/* Versoes visuais: 1 Classico (padrao, sem override), 2 Sidebar, 3 Dock, 4 Editorial.
   Cada versao redefine tokens (claro e escuro) e o tipo de menu. Contrastes AA verificados. */
:root{--hdr-h:64px}

/* ---------------------------------------------------------------- 2. SIDEBAR (grafite + esmeralda) */
html[data-variant="sidebar"]{
  --font-sans:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --bg:#F3F5F4;--bg-soft:#E6EBE9;--surface:#FFFFFF;--surface-2:#F8FAF9;--text:#111827;--muted:#4B5563;
  --border:#E3E8E6;--border-strong:#77847E;--primary:#047857;--primary-hover:#065F46;--primary-ink:#FFFFFF;
  --primary-tint:#DDF3EA;--primary-tint-ink:#065F46;--focus:#047857;
  --r-sm:6px;--r-md:8px;--r-lg:10px;--r-xl:12px;
  --mesh-1:rgba(4,120,87,.18);--mesh-2:rgba(8,145,178,.12);--mesh-3:rgba(77,124,15,.12);--glow:rgba(4,120,87,.28);
  --video-accent:#34D399;--hdr-h:0px;
}
html[data-variant="sidebar"][data-theme="dark"]{
  --bg:#0C1110;--bg-soft:#121917;--surface:#141B19;--surface-2:#1A2320;--text:#E6ECEA;--muted:#9FB0AA;
  --border:#232E2B;--border-strong:#6A7C75;--primary:#34D399;--primary-hover:#6EE7B7;--primary-ink:#052E22;
  --primary-tint:#123B2E;--primary-tint-ink:#86E5C0;--focus:#6EE7B7;
  --mesh-1:rgba(52,211,153,.2);--mesh-2:rgba(34,211,238,.12);--mesh-3:rgba(163,230,53,.1);--glow:rgba(52,211,153,.3);
}
html[data-variant="sidebar"] .btn{height:36px}
html[data-variant="sidebar"] .btn-lg{height:48px}
@media (min-width:1024px){html[data-variant="sidebar"] body{padding-left:248px}}
.side-nav{position:fixed;z-index:60;top:0;bottom:0;left:0;width:248px;display:flex;flex-direction:column;gap:4px;padding:16px 12px;background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;transform:translateX(-100%);transition:transform var(--dur-base) var(--ease-out)}
.side-nav.open{transform:none}
@media (min-width:1024px){.side-nav{transform:none;z-index:45}}
.side-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--border)}
@media (min-width:1024px){.side-top{display:none}}
.side-scrim{position:fixed;inset:0;z-index:55;background:var(--overlay)}
.side-scrim[hidden]{display:none}
.nl{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);color:var(--muted) !important;font-size:14px;font-weight:600;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.nl:hover{background:var(--bg-soft);color:var(--text) !important}
.nl[aria-current="page"]{background:var(--primary-tint);color:var(--primary-tint-ink) !important}
.ng{margin:14px 12px 4px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.side-nav #hdr-actions{flex-direction:column;align-items:stretch;width:100%}
.side-nav #hdr-actions .btn{width:100%;justify-content:flex-start}
.side-nav #hdr-actions .btn span.hidden{display:inline}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--border)}

/* ---------------------------------------------------------------- 3. DOCK (violeta + ciano) */
html[data-variant="dock"]{
  --font-sans:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --bg:#F4F2FF;--bg-soft:#E8E4FB;--surface:#FFFFFF;--surface-2:#FAF9FF;--text:#1E1B4B;--muted:#4C4977;
  --border:#E4E0F7;--border-strong:#7C79A6;--primary:#6D28D9;--primary-hover:#5B21B6;--primary-ink:#FFFFFF;
  --primary-tint:#EDE7FF;--primary-tint-ink:#3B1B85;--focus:#6D28D9;
  --r-sm:12px;--r-md:16px;--r-lg:20px;--r-xl:26px;
  --mesh-1:rgba(109,40,217,.24);--mesh-2:rgba(8,145,178,.2);--mesh-3:rgba(219,39,119,.12);--glow:rgba(109,40,217,.32);
  --video-accent:#A78BFA;--hdr-h:0px;
}
html[data-variant="dock"][data-theme="dark"]{
  --bg:#0A0A18;--bg-soft:#101024;--surface:#12122A;--surface-2:#191938;--text:#ECEBFF;--muted:#A8A6D0;
  --border:#26264A;--border-strong:#6F6D9C;--primary:#A78BFA;--primary-hover:#C4B5FD;--primary-ink:#0A0A18;
  --primary-tint:#2A2160;--primary-tint-ink:#CDBEFF;--focus:#C4B5FD;
  --mesh-1:rgba(167,139,250,.26);--mesh-2:rgba(34,211,238,.18);--mesh-3:rgba(244,114,182,.12);--glow:rgba(167,139,250,.34);
}
html[data-variant="dock"] .num,html[data-variant="dock"] .odo,html[data-variant="dock"] time{font-family:var(--font-mono)}
html[data-variant="dock"] body{padding-top:60px;padding-bottom:92px}
html[data-variant="dock"] .toasts{bottom:96px}
html[data-variant="dock"] .rec-pill{bottom:92px !important}
html[data-variant="dock"] .card{background:color-mix(in srgb,var(--surface) 92%,var(--primary) 3%)}
.dock{position:fixed;z-index:60;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:2px;max-width:calc(100vw - 20px);padding:6px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--surface) 80%,transparent);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border:1px solid var(--border);box-shadow:var(--shadow-lg);overflow-x:auto;scrollbar-width:none}
.dock::-webkit-scrollbar{display:none}
.dock .nl{padding:9px 14px;border-radius:var(--r-pill);white-space:nowrap}
.dock .sep{width:1px;height:24px;margin:0 6px;background:var(--border);flex:none}
.dock .btn{border-radius:var(--r-pill);white-space:nowrap}
.dock-brand{position:fixed;z-index:50;left:16px;top:14px;display:flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--surface) 80%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);color:var(--text) !important;font-weight:700;font-size:14px}
@media (max-width:639px){.dock .nl span{display:none}.dock .nl{padding:10px 12px}.dock-brand span.t{display:none}.dock-brand{padding:5px}}
@media (prefers-reduced-transparency:reduce){.dock,.dock-brand{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------------------------------------------------------------- 4. EDITORIAL (branco, tinta e vermelho) */
html[data-variant="editorial"]{
  --font-sans:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --bg:#FAFAFA;--bg-soft:#EFEFEF;--surface:#FFFFFF;--surface-2:#F5F5F5;--text:#0A0A0A;--muted:#525252;
  --border:#DADADA;--border-strong:#737373;--primary:#B91C1C;--primary-hover:#991B1B;--primary-ink:#FFFFFF;
  --primary-tint:#FBE4E4;--primary-tint-ink:#7F1414;--focus:#B91C1C;
  --r-sm:2px;--r-md:2px;--r-lg:3px;--r-xl:4px;--r-pill:2px;
  --shadow-sm:none;--shadow-md:none;--shadow-lg:none;
  --mesh-1:rgba(185,28,28,.1);--mesh-2:rgba(10,10,10,.05);--mesh-3:rgba(185,28,28,.06);--glow:rgba(185,28,28,.2);
  --video-accent:#F87171;--hdr-h:46px;
}
html[data-variant="editorial"][data-theme="dark"]{
  --bg:#0A0A0A;--bg-soft:#111111;--surface:#141414;--surface-2:#1B1B1B;--text:#F5F5F5;--muted:#A3A3A3;
  --border:#2A2A2A;--border-strong:#737373;--primary:#F87171;--primary-hover:#FCA5A5;--primary-ink:#0A0A0A;
  --primary-tint:#3B1616;--primary-tint-ink:#FCA5A5;--focus:#FCA5A5;
  --mesh-1:rgba(248,113,113,.14);--mesh-2:rgba(255,255,255,.04);--mesh-3:rgba(248,113,113,.08);--glow:rgba(248,113,113,.26);
}
html[data-variant="editorial"] h1,html[data-variant="editorial"] h2{letter-spacing:-.045em}
html[data-variant="editorial"] .card{border-color:var(--border-strong)}
html[data-variant="editorial"] .btn{border-color:var(--text)}
html[data-variant="editorial"] .btn-primary{border-color:var(--primary)}
html[data-variant="editorial"] .theme-toggle,html[data-variant="editorial"] .theme-toggle button{border-radius:2px}
html[data-variant="editorial"] .thumb{border-top-width:4px}
.ed-mast{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:16px 24px 12px;border-bottom:2px solid var(--text);background:var(--bg)}
.ed-mast .wm{display:flex;align-items:center;justify-content:center;gap:10px;font-size:30px;font-weight:800;letter-spacing:-.05em;color:var(--text) !important}
.ed-mast .l{font-size:12.5px;font-weight:600;color:var(--muted)}
.ed-mast .r{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.ed-nav{position:sticky;top:0;z-index:40;display:flex;justify-content:flex-start;gap:28px;padding:0 24px;background:var(--bg);border-bottom:1px solid var(--border-strong);overflow-x:auto;scrollbar-width:none}
.ed-nav a:first-child{margin-left:auto}.ed-nav a:last-child{margin-right:auto}
.ed-nav a{padding:12px 0 10px;border-bottom:2px solid transparent;font-size:14px;font-weight:700;color:var(--muted) !important;white-space:nowrap}
.ed-nav a:hover{color:var(--text) !important}
.ed-nav a[aria-current="page"]{color:var(--text) !important;border-bottom-color:var(--primary)}
@media (max-width:767px){.ed-mast{grid-template-columns:1fr;justify-items:center;padding:12px 16px}.ed-mast .l{display:none}.ed-mast .r{justify-content:center}.ed-mast .wm{font-size:24px}}

/* seletor de versao */
.variant-sw{display:inline-flex;padding:3px;gap:2px;background:var(--bg-soft);border-radius:var(--r-pill);border:1px solid var(--border)}
.variant-sw button{min-width:34px;height:34px;padding:0 6px;border-radius:var(--r-pill);border:none;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.variant-sw button:hover{color:var(--text)}
.variant-sw button[aria-pressed="true"]{background:var(--surface);color:var(--primary-tint-ink);box-shadow:var(--shadow-sm)}