/* SierraTec Survey v11 Visual System
   -------------------------------------------------------------
   Shared appearance engine for marketing pages, product surfaces,
   survey builder, participant experience, and administrator console.
   The prototype persists appearance choices in browser localStorage.
   Production theme governance requires server-side RBAC, approvals,
   versioning, asset storage, and organization/workspace inheritance. */

:root {
  --v11-page: #ffffff;
  --v11-panel: #ffffff;
  --v11-panel-soft: #f6f9fd;
  --v11-panel-strong: #eef4fb;
  --v11-text: #0e1726;
  --v11-text-2: #243147;
  --v11-muted: #617087;
  --v11-border: #dce4ef;
  --v11-border-strong: #c7d2e2;
  --v11-shadow: 0 18px 50px rgba(25,57,95,.12);
  --v11-shadow-soft: 0 5px 18px rgba(29,62,99,.06);
  --v11-accent: #4b8ede;
  --v11-accent-strong: #286fca;
  --v11-accent-deep: #205ca8;
  --v11-accent-soft: #eaf3ff;
  --v11-focus: rgba(75,142,222,.4);
  --v11-danger: #d9485f;
  --v11-success: #0d9b6d;
  --v11-warning: #e58a05;
  --v11-radius: 16px;
  --v11-radius-lg: 24px;
  --v11-density-scale: 1;
  color-scheme: light;
}

html[data-theme="dark"] {
  --v11-page: #08111f;
  --v11-panel: #101b2d;
  --v11-panel-soft: #0c1728;
  --v11-panel-strong: #15243a;
  --v11-text: #f4f7fb;
  --v11-text-2: #d7e1ee;
  --v11-muted: #9fb0c5;
  --v11-border: #273b57;
  --v11-border-strong: #324b6b;
  --v11-shadow: 0 20px 54px rgba(0,0,0,.34);
  --v11-shadow-soft: 0 8px 22px rgba(0,0,0,.22);
  --v11-accent-soft: rgba(75,142,222,.16);
  --v11-focus: rgba(119,180,250,.55);
  color-scheme: dark;
}

html[data-density="compact"] { --v11-density-scale: .84; }
html[data-text-scale="large"] { font-size: 112.5%; }
html[data-contrast="high"] { --v11-border: #6f849f; --v11-border-strong: #93a5ba; }
html[data-theme="dark"][data-contrast="high"] { --v11-border: #94a6ba; --v11-border-strong: #c0cedd; }
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }

/* Global token bridge ---------------------------------------------------- */
body { background: var(--v11-page); color: var(--v11-text); }
html[data-theme="dark"] body { background: var(--v11-page); color: var(--v11-text); }
html[data-theme="dark"] .section-muted { background: var(--v11-panel-soft); }
html[data-theme="dark"] .section-border { border-color: var(--v11-border); }
html[data-theme="dark"] .section-dark { color: #f8fbff; background: #050c16; }
/* .page-hero's light gradient background isn't covered by the reference's
   own dark-mode rules below (only .page-hero.dark, an intentionally-dark
   hero variant used in light mode too, was) - left as-is this makes the
   H1/.meta text (which inherits body's now-near-white dark-mode color)
   unreadable against the still-light hero on every page that uses it. */
html[data-theme="dark"] .page-hero:not(.page-hero.dark) { background: linear-gradient(180deg, rgba(75,142,222,.1), var(--v11-page)); }
html[data-theme="dark"] .page-title { color: var(--v11-text); }
html[data-theme="dark"] .meta { color: var(--v11-muted); }
html[data-theme="dark"] .meta strong { color: var(--v11-text-2); }
html[data-theme="dark"] .section-brand { color: #fff; }
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .lead,
html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] .section-head p,
html[data-theme="dark"] .page-hero p { color: var(--v11-muted) !important; }

html[data-theme="dark"] .site-header { background: rgba(8,17,31,.92); border-bottom-color: var(--v11-border); }
html[data-theme="dark"] .brand-product,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .nav-button { color: var(--v11-text-2); }
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-button:hover,
html[data-theme="dark"] .nav-link.active { color: #8bc0ff; background: rgba(75,142,222,.12); }
html[data-theme="dark"] .nav-dropdown,
html[data-theme="dark"] .mobile-panel { background: var(--v11-panel); border-color: var(--v11-border); box-shadow: var(--v11-shadow); }
html[data-theme="dark"] .dropdown-link:hover { background: var(--v11-panel-strong); }
html[data-theme="dark"] .dropdown-title { color: var(--v11-text); }
html[data-theme="dark"] .dropdown-desc { color: var(--v11-muted); }
html[data-theme="dark"] .language-select,
html[data-theme="dark"] .mobile-toggle { color: var(--v11-text-2); background-color: var(--v11-panel); border-color: var(--v11-border); }
html[data-theme="dark"] .mobile-toggle span { background: var(--v11-text); }

html[data-theme="dark"] :where(
  .card,.stat-card,.pricing-card,.price-card,.product-window,.mock-browser,.mock-metric,.mock-chart,.mock-panel,
  .comparison-table,.auth-form-panel,.sso-button,.account-type,.calculator-card,.tool-card,.ai-lab,.ai-question,
  .integration-card,.format-chip,.template-category-group,.template-card,.template-preview-window,.app-topbar,
  .metric-card,.dashboard-panel,.dashboard-widget-section,.dashboard-widget-grid article,.survey-list,.builder-topbar,
  .builder-panel,.survey-canvas,.sso-step,.resource-hero-search,.resource-entry-card,.resource-topic,.download-resource,
  .resource-article,.resource-guide-card,.learning-summary,.learning-path,.glossary-term,.modal,.audience-app-panel,
  .audience-sourcing-choice,.v10-mini-grid>div,.admin-card,.admin-metric-card,.admin-settings-nav
) { background: var(--v11-panel) !important; color: var(--v11-text); border-color: var(--v11-border) !important; box-shadow: var(--v11-shadow-soft); }

html[data-theme="dark"] :where(.card,.stat-card,.metric-card,.dashboard-panel,.template-card,.tool-card,.integration-card,.admin-card,.price-card) h1,
html[data-theme="dark"] :where(.card,.stat-card,.metric-card,.dashboard-panel,.template-card,.tool-card,.integration-card,.admin-card,.price-card) h2,
html[data-theme="dark"] :where(.card,.stat-card,.metric-card,.dashboard-panel,.template-card,.tool-card,.integration-card,.admin-card,.price-card) h3,
html[data-theme="dark"] :where(.card,.stat-card,.metric-card,.dashboard-panel,.template-card,.tool-card,.integration-card,.admin-card,.price-card) strong { color: var(--v11-text); }
html[data-theme="dark"] :where(.card,.stat-card,.metric-card,.dashboard-panel,.template-card,.tool-card,.integration-card,.admin-card,.price-card) p,
html[data-theme="dark"] :where(.card,.stat-card,.metric-card,.dashboard-panel,.template-card,.tool-card,.integration-card,.admin-card,.price-card) small,
html[data-theme="dark"] :where(.card,.stat-card,.metric-card,.dashboard-panel,.template-card,.tool-card,.integration-card,.admin-card,.price-card) span:not(.tag):not(.status):not(.admin-status) { color: var(--v11-muted); }

html[data-theme="dark"] :where(.check-list,.plain-list) li { color: var(--v11-muted); }
html[data-theme="dark"] :where(.check-list,.plain-list) li strong { color: var(--v11-text); }

html[data-theme="dark"] :where(input,select,textarea,.form-control,.admin-global-search input,.admin-v10-rate) {
  color: var(--v11-text) !important;
  background: #0b1626 !important;
  border-color: var(--v11-border-strong) !important;
}
html[data-theme="dark"] :where(input,select,textarea,.form-control)::placeholder { color: #71839a; }
html[data-theme="dark"] .btn-light { color: var(--v11-text-2); background: var(--v11-panel); border-color: var(--v11-border); }
html[data-theme="dark"] .btn-light:hover { color: #8bc0ff; border-color: #6caaf0; }
html[data-theme="dark"] .btn-ghost { color: #9bc8ff; background: rgba(75,142,222,.13); border-color: rgba(75,142,222,.25); }
html[data-theme="dark"] .trust-strip { background: var(--v11-page); border-color: var(--v11-border); }
html[data-theme="dark"] .comparison-table th:first-child,
html[data-theme="dark"] .comparison-table td:first-child { background: var(--v11-panel) !important; }
html[data-theme="dark"] .dashboard-chart-stage { background: linear-gradient(180deg,#0c1728,#0a1422); border-color: var(--v11-border); }
html[data-theme="dark"] .dashboard-chart-toolbar button { color: var(--v11-muted); background: var(--v11-panel); border-color: var(--v11-border); }
html[data-theme="dark"] .dashboard-chart-toolbar button.active,
html[data-theme="dark"] .dashboard-chart-toolbar button:hover { color: #a7d0ff; background: rgba(75,142,222,.16); border-color: #639fe7; }
html[data-theme="dark"] .dashboard-data-table th { color: var(--v11-muted); background: #0d192a; }
html[data-theme="dark"] .dashboard-data-table td,
html[data-theme="dark"] .dashboard-data-table th { border-bottom-color: var(--v11-border); }
html[data-theme="dark"] .v10-wallet-balance { background: linear-gradient(135deg,#0a3154,#155384); }
html[data-theme="dark"] .v10-pill { background: rgba(75,142,222,.16); color:#9bcbff; }
html[data-theme="dark"] .v10-admin-note,
html[data-theme="dark"] .admin-v10-rule { background: rgba(75,142,222,.12); color: var(--v11-text-2); }

/* Administrator console ------------------------------------------------- */
html[data-theme="dark"] .admin-body,
html[data-theme="dark"] .admin-auth-page { background: var(--v11-page); color: var(--v11-text); }
html[data-theme="dark"] .admin-stage,
html[data-theme="dark"] .admin-main { background: var(--v11-page); }
html[data-theme="dark"] .admin-topbar { background: rgba(8,17,31,.94); border-color: var(--v11-border); }
html[data-theme="dark"] .admin-sidebar { background: #07101d; border-color: var(--v11-border); }
html[data-theme="dark"] .admin-brand { color: var(--v11-text); background: #0d192a; }
html[data-theme="dark"] .admin-nav-link { color: #a9b8ca; }
html[data-theme="dark"] .admin-nav-link:hover,
html[data-theme="dark"] .admin-nav-link.active { color: #e7f2ff; background: rgba(75,142,222,.15); }
html[data-theme="dark"] .admin-nav-label,
html[data-theme="dark"] .admin-card-kicker,
html[data-theme="dark"] .admin-eyebrow { color: #91a4ba; }
html[data-theme="dark"] .admin-table { background: var(--v11-panel); }
html[data-theme="dark"] .admin-table th { color: var(--v11-muted); background: #0c1728; border-color: var(--v11-border); }
html[data-theme="dark"] .admin-table td { color: var(--v11-text-2); border-color: var(--v11-border); }
html[data-theme="dark"] .admin-table tbody tr:hover td { background: #132239; }
html[data-theme="dark"] .admin-priority-list button,
html[data-theme="dark"] .admin-action-list>button,
html[data-theme="dark"] .admin-language-grid article,
html[data-theme="dark"] .admin-health-grid article,
html[data-theme="dark"] .admin-v9-link-grid a,
html[data-theme="dark"] .admin-v10-fee-grid>div { background: #0d192a; color: var(--v11-text-2); border-color: var(--v11-border); }
html[data-theme="dark"] .admin-profile-button { color: var(--v11-text-2); }

/* Density system -------------------------------------------------------- */
html[data-density="compact"] .section { padding-block: 76px; }
html[data-density="compact"] .section-sm { padding-block: 50px; }
html[data-density="compact"] :where(.card,.stat-card,.metric-card,.dashboard-panel,.admin-card,.template-category-group) { padding: calc(18px * var(--v11-density-scale)); }
html[data-density="compact"] :where(.btn,.nav-link,.nav-button,.form-control,.admin-btn) { min-height: 38px; }
html[data-density="compact"] .app-topbar { height: 60px; }
html[data-density="compact"] .builder-topbar { min-height: 58px; }

/* Theme switcher -------------------------------------------------------- */
.v11-theme-control { position: relative; display: inline-flex; align-items: center; }
.v11-theme-toggle {
  width: 42px; height: 42px; display: inline-grid; place-items: center; padding: 0;
  color: var(--v11-text-2); background: var(--v11-panel); border: 1px solid var(--v11-border);
  border-radius: 10px; box-shadow: none; cursor: pointer; transition: .18s ease;
  display: none;
}
.v11-theme-toggle:hover { color: var(--v11-accent-deep); border-color: var(--v11-accent); transform: translateY(-1px); }
.v11-theme-toggle svg { width: 18px; height: 18px; }
.v11-theme-label { display:none; }
.v11-theme-popover {
  position: absolute; z-index: 1400; top: calc(100% + 9px); inset-inline-end: 0; width: 240px;
  padding: 10px; background: var(--v11-panel); border:1px solid var(--v11-border); border-radius: 14px;
  box-shadow: var(--v11-shadow); color: var(--v11-text); opacity:0; visibility:hidden; transform:translateY(-5px); transition:.16s ease;
}
.v11-theme-control.open .v11-theme-popover { opacity:1; visibility:visible; transform:translateY(0); }
.v11-theme-popover strong { display:block; padding:6px 8px 9px; font-size:12px; }
.v11-theme-choice { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; background:transparent; border:0; border-radius:9px; color:var(--v11-text-2); font-size:12px; font-weight:800; text-align:start; }
.v11-theme-choice:hover,.v11-theme-choice.active { color:var(--v11-accent-deep); background:var(--v11-accent-soft); }
.v11-theme-choice small { color:var(--v11-muted); font-weight:650; }
.v11-theme-link { display:flex; align-items:center; justify-content:center; min-height:36px; margin-top:7px; border-top:1px solid var(--v11-border); color:var(--v11-accent-deep); font-size:11px; font-weight:850; }
html[data-theme="dark"] .v11-theme-toggle { color:var(--v11-text-2); background:var(--v11-panel); border-color:var(--v11-border); }
html[data-theme="dark"] .v11-theme-choice:hover,
html[data-theme="dark"] .v11-theme-choice.active { color:#9bc8ff; }

/* Visual-system marketing ------------------------------------------------ */
.v11-visual-band { position:relative; overflow:hidden; }
.v11-visual-band::before { content:""; position:absolute; width:440px; height:440px; border-radius:50%; inset:-220px -120px auto auto; background:radial-gradient(circle,rgba(75,142,222,.18),transparent 68%); pointer-events:none; }
.v11-mode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.v11-mode-card { min-height:190px; padding:22px; border:1px solid var(--v11-border); border-radius:18px; background:var(--v11-panel); box-shadow:var(--v11-shadow-soft); }
.v11-mode-card .v11-mode-preview { height:78px; margin-bottom:16px; border-radius:12px; border:1px solid var(--v11-border); overflow:hidden; background:linear-gradient(135deg,var(--v11-panel-soft),var(--v11-panel)); }
.v11-mode-preview::before { content:""; display:block; width:56%; height:10px; margin:18px 16px 8px; border-radius:99px; background:var(--v11-accent); opacity:.75; box-shadow:0 18px 0 var(--v11-border),0 36px 0 var(--v11-border); }

/* Theme & Brand Studio --------------------------------------------------- */
.v11-studio-shell { display:grid; grid-template-columns:minmax(270px,.75fr) minmax(0,1.55fr); gap:22px; align-items:start; }
.v11-studio-controls { position:sticky; top:96px; display:grid; gap:14px; }
.v11-control-card,.v11-preview-card,.v11-preset-card,.v11-brand-surface { padding:20px; border:1px solid var(--v11-border); border-radius:18px; background:var(--v11-panel); box-shadow:var(--v11-shadow-soft); }
.v11-control-card h3,.v11-preview-card h3 { margin:0 0 12px; }
.v11-control-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.v11-control-grid .form-group { margin:0; }
.v11-radio-row { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.v11-radio-row button,.v11-layout-tabs button { min-height:38px; border:1px solid var(--v11-border); border-radius:9px; background:var(--v11-panel-soft); color:var(--v11-text-2); font-size:11px; font-weight:850; }
.v11-radio-row button.active,.v11-layout-tabs button.active { border-color:var(--v11-accent); background:var(--v11-accent-soft); color:var(--v11-accent-deep); }
.v11-color-input { display:grid; grid-template-columns:46px 1fr; align-items:center; gap:8px; }
.v11-color-input input[type="color"] { width:46px; height:42px; padding:4px; border:1px solid var(--v11-border); border-radius:9px; background:var(--v11-panel); }
.v11-studio-preview { min-height:610px; padding:26px; border:1px solid var(--v11-border); border-radius:22px; background:#eef3f9; transition:.2s ease; }
.v11-preview-device { max-width:760px; min-height:550px; margin:auto; overflow:hidden; border:1px solid rgba(15,35,60,.12); border-radius:var(--preview-radius,18px); background:var(--preview-bg,#fff); box-shadow:0 24px 70px rgba(27,55,90,.18); color:var(--preview-text,#172033); font-family:var(--preview-font,Inter,ui-sans-serif,system-ui,sans-serif); }
.v11-preview-device[data-preview-mode="dark"] { --preview-bg:#101b2d; --preview-text:#eef5fd; --preview-muted:#9dafc4; --preview-line:#293c57; }
.v11-preview-device[data-preview-mode="light"] { --preview-bg:#fff; --preview-text:#172033; --preview-muted:#6c7a8d; --preview-line:#dde6f0; }
.v11-preview-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; border-bottom:1px solid var(--preview-line,#dde6f0); }
.v11-preview-brand { display:flex; align-items:center; gap:8px; font-weight:900; }
.v11-preview-dot { width:24px; height:24px; border-radius:8px; background:var(--preview-accent,#4b8ede); }
.v11-preview-progress { width:120px; height:7px; overflow:hidden; border-radius:99px; background:var(--preview-line,#dde6f0); }
.v11-preview-progress i { display:block; width:42%; height:100%; border-radius:inherit; background:var(--preview-accent,#4b8ede); }
.v11-preview-body { max-width:620px; margin:auto; padding:44px 32px 50px; }
.v11-preview-body h2 { margin:0 0 10px; color:var(--preview-text,#172033); font-size:32px; line-height:1.12; }
.v11-preview-body p { color:var(--preview-muted,#6c7a8d); }
.v11-question-demo { margin-top:28px; padding:22px; border:1px solid var(--preview-line,#dde6f0); border-radius:calc(var(--preview-radius,18px) * .75); background:color-mix(in srgb,var(--preview-bg,#fff) 94%,var(--preview-accent,#4b8ede) 6%); }
.v11-question-demo strong { color:var(--preview-text,#172033); }
.v11-answer-demo { display:grid; gap:9px; margin-top:15px; }
.v11-answer-demo button { min-height:46px; padding:10px 14px; border:1px solid var(--preview-line,#dde6f0); border-radius:calc(var(--preview-radius,18px) * .55); background:var(--preview-bg,#fff); color:var(--preview-text,#172033); text-align:left; font:inherit; }
.v11-answer-demo button:first-child { border-color:var(--preview-accent,#4b8ede); box-shadow:0 0 0 2px color-mix(in srgb,var(--preview-accent,#4b8ede) 17%,transparent); }
.v11-preview-next { min-height:46px; margin-top:22px; padding:10px 18px; border:0; border-radius:calc(var(--preview-radius,18px) * .55); background:var(--preview-accent,#4b8ede); color:#fff; font-weight:850; }
.v11-preview-device[data-layout="conversational"] .v11-question-demo { border:0; padding:0; background:transparent; }
.v11-preview-device[data-layout="conversational"] .v11-preview-body { display:flex; min-height:470px; flex-direction:column; justify-content:center; }
.v11-preview-device[data-layout="cards"] .v11-preview-body { max-width:680px; }
.v11-preview-device[data-layout="cards"] .v11-question-demo { box-shadow:0 18px 42px rgba(24,53,90,.11); }
.v11-preview-device[data-layout="kiosk"] { max-width:920px; border-radius:8px; }
.v11-preview-device[data-layout="kiosk"] .v11-preview-body { max-width:760px; padding-top:70px; }
.v11-preview-device[data-layout="field"] .v11-preview-head { padding:12px 16px; }
.v11-preview-device[data-layout="field"] .v11-preview-body { padding:24px 18px; }
.v11-preview-device[data-layout="field"] .v11-question-demo { box-shadow:none; }
.v11-preview-device[data-layout="embed"] { max-width:520px; min-height:480px; border-radius:12px; }
.v11-preview-device[data-layout="embed"] .v11-preview-head { display:none; }
.v11-preview-device[data-layout="embed"] .v11-preview-body { padding:30px 24px; }
.v11-layout-tabs { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.v11-layout-tabs button { padding:8px 11px; }
.v11-preset-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.v11-preset-card { padding:14px; cursor:pointer; transition:.18s ease; }
.v11-preset-card:hover { transform:translateY(-2px); border-color:var(--v11-accent); }
.v11-preset-swatch { height:70px; border-radius:11px; background:linear-gradient(135deg,var(--preset-a),var(--preset-b)); margin-bottom:10px; position:relative; overflow:hidden; }
.v11-preset-swatch::after { content:""; position:absolute; width:55%; height:8px; left:12px; bottom:12px; border-radius:99px; background:rgba(255,255,255,.75); box-shadow:0 -15px 0 rgba(255,255,255,.42); }
.v11-preset-card strong { display:block; font-size:12px; }
.v11-preset-card small { color:var(--v11-muted); }
.v11-a11y-score { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; padding:16px; border:1px solid var(--v11-border); border-radius:14px; background:var(--v11-panel-soft); }
.v11-a11y-score b { width:54px; height:54px; display:grid; place-items:center; border-radius:50%; background:#e8f8ef; color:#176f47; font-size:17px; }
.v11-brand-inheritance { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.v11-brand-inheritance>div { position:relative; padding:15px; border:1px solid var(--v11-border); border-radius:12px; background:var(--v11-panel-soft); }
.v11-brand-inheritance>div:not(:last-child)::after { content:"→"; position:absolute; top:50%; right:-12px; transform:translate(50%,-50%); color:var(--v11-muted); font-weight:900; z-index:2; }
.v11-studio-toast { position:fixed; z-index:1600; right:20px; bottom:20px; max-width:330px; padding:13px 16px; border-radius:12px; background:#102238; color:#fff; box-shadow:var(--v11-shadow); font-size:12px; font-weight:750; opacity:0; transform:translateY(8px); pointer-events:none; transition:.2s ease; }
.v11-studio-toast.show { opacity:1; transform:translateY(0); }

/* Builder visual controls ------------------------------------------------ */
.v11-builder-design { margin-top:12px; padding-top:14px; border-top:1px solid var(--v11-border); }
.v11-builder-design .v11-mini-theme-row { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px; }
.v11-mini-theme { height:30px; border:2px solid transparent; border-radius:8px; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.v11-mini-theme.active { border-color:var(--v11-accent); }

/* Admin visual-system panel --------------------------------------------- */
.admin-v11-theme-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.admin-v11-theme-grid>div { padding:15px; border:1px solid var(--v11-border); border-radius:12px; background:var(--v11-panel-soft); }
.admin-v11-theme-grid strong,.admin-v11-theme-grid span { display:block; }
.admin-v11-theme-grid strong { font-size:20px; }
.admin-v11-theme-grid span { margin-top:4px; color:var(--v11-muted); font-size:11px; }
.admin-v11-swatch-row { display:flex; gap:7px; flex-wrap:wrap; }
.admin-v11-swatch-row i { width:30px; height:30px; border-radius:8px; border:1px solid var(--v11-border); }

@media (max-width: 1050px) {
  .v11-studio-shell { grid-template-columns:1fr; }
  .v11-studio-controls { position:static; grid-template-columns:repeat(2,1fr); }
  .v11-preset-grid { grid-template-columns:repeat(3,1fr); }
  .v11-brand-inheritance { grid-template-columns:1fr 1fr; }
  .v11-brand-inheritance>div::after { display:none; }
}
@media (max-width: 760px) {
  .v11-mode-grid { grid-template-columns:1fr; }
  .v11-studio-controls { grid-template-columns:1fr; }
  .v11-control-grid { grid-template-columns:1fr; }
  .v11-preset-grid { grid-template-columns:1fr 1fr; }
  .v11-studio-preview { padding:10px; min-height:auto; }
  .v11-preview-device { min-height:500px; }
  .v11-preview-body { padding:32px 20px; }
  .v11-preview-body h2 { font-size:26px; }
  .admin-v11-theme-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 480px) {
  .v11-preset-grid,.v11-brand-inheritance,.admin-v11-theme-grid { grid-template-columns:1fr; }
  .v11-radio-row { grid-template-columns:1fr; }
}
.v11-preview-device[data-layout="chat"] .v11-preview-head { background:color-mix(in srgb,var(--preview-accent,#4b8ede) 8%,var(--preview-bg,#fff)); }
.v11-preview-device[data-layout="chat"] .v11-preview-body { max-width:680px; }
.v11-preview-device[data-layout="chat"] .v11-question-demo { max-width:520px; margin-left:auto; border-radius:22px 22px 6px 22px; background:color-mix(in srgb,var(--preview-accent,#4b8ede) 10%,var(--preview-bg,#fff)); }
.v11-preview-device[data-layout="chat"] .v11-answer-demo button { border-radius:18px 18px 18px 6px; }