/* ==========================================================================
   Demo2Web / Legendary Dental — visual shell
   Storybook-themed demo site. Five picker themes: Light, Dark, Illuminated,
   Enchanted, Storybook. Illuminated is the brand default (deep indigo + gold
   + cream + wine). Light/Dark preserved as neutral fallbacks.
   ========================================================================== */

:root {
  --brand-500:   #1f4fd6;
  --brand-600:   #1b46bd;
  --brand-100:   #e6efff;
  --brand-50:    #f0f5ff;

  --nav-bg:      #0f172a;
  --nav-bg-hover:#1e293b;
  --nav-fg:      #cbd5e1;
  --nav-fg-dim:  #64748b;
  --nav-fg-hot:  #ffffff;
  --nav-accent:  #3b82f6;

  --bg:          #f6f8fb;
  --panel:       #ffffff;
  --border:      #e5e9f0;
  --border-hot:  #cfd6e2;

  --text:        #1e293b;
  --text-dim:    #64748b;
  --text-mute:   #94a3b8;

  --ok:          #16a34a;
  --warn:        #d97706;
  --err:         #dc2626;

  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;

  --shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow:      0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 20px rgba(15, 23, 42, 0.06);
  --shadow-lg:   0 10px 40px rgba(15, 23, 42, 0.12);

  --topbar-h:    56px;
  --sidebar-w:   268px;

  --font:        -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
  --font-size:   14px;
  --sidebar-shadow: none;
  --card-bg:     var(--panel);
  --brand-grad:  linear-gradient(135deg, var(--brand-500), #7c3aed);
  /* Section-header chip background — themes override for their palette. */
  --nav-label-bg:      rgba(255,255,255,0.05);
  --nav-label-fg:      var(--nav-fg-dim);
  --nav-label-shadow:  none;
  --group-op:    #38bdf8;  /* per-group accent overrides for themes */
  --group-bl:    #4ade80;
  --group-dv:    #c084fc;
  --group-mt:    #fb923c;
  --group-cm:    #22d3ee;
  --group-pr:    #f472b6;
  --group-fn:    #facc15;
  --group-gl:    #22c55e;  /* Goals — grass green, distinct + growth-y */
}

/* =========================================================================
   Theme: Light — neutral fallback (blue/slate). Preserved from the clone
   so users always have a plain, readable option outside the 3 storybook
   themes. Not the brand default (Illuminated is).
   ========================================================================= */
[data-theme="light"] {
  /* Section-header chip: cool grey lifted from the icon's neutral tones */
  --nav-label-bg:      linear-gradient(180deg, #eef2f6 0%, #e0e6ec 100%);
  --nav-label-fg:      #46586c;
  --nav-label-shadow:  inset 0 -1px 0 rgba(46,62,82,0.08);

  --brand-500:   #1E7BB0;   /* Radiant blue — ring of the sun mark */
  --brand-600:   #185f8a;   /* deeper blue for hovers */
  --brand-100:   #cfe4f2;
  --brand-50:    #eaf3fa;

  /* Light sidebar with a cool blue-grey tint */
  --nav-bg:      #f6f9fc;
  --nav-bg-hover:#e6eff8;
  --nav-fg:      #2E3E52;   /* Radiant dark slate — the ray color */
  --nav-fg-dim:  #64748b;
  --nav-fg-hot:  #185f8a;   /* deep blue on hover */
  --nav-accent:  #1E7BB0;   /* Radiant blue active bar */

  --bg:          #f2f5f8;
  --panel:       #ffffff;
  --border:      #dde4ec;
  --border-hot:  #c5d0dc;

  --text:        #2E3E52;   /* Radiant dark slate for body text */
  --text-dim:    #4a5a6e;
  --text-mute:   #94a3b8;

  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;

  --brand-grad:  linear-gradient(135deg, #1E7BB0, #2E3E52);
  --sidebar-shadow: 1px 0 0 rgba(30,123,176,0.12);

  /* Group accents — variations along a blue/teal/slate axis so groups stay
     visually distinct while all reading as "Radiant blue" family. */
  --group-op:    #1E7BB0;   /* Radiant blue primary */
  --group-bl:    #185f8a;   /* deep blue */
  --group-dv:    #2E3E52;   /* slate */
  --group-mt:    #3a97c5;   /* mid blue */
  --group-cm:    #0ea5e9;   /* sky */
  --group-pr:    #0369a1;   /* navy */
  --group-fn:    #06b6d4;   /* cyan */
  --group-gl:    #38bdf8;   /* Goals — bright sky (aspirational) */
}

/* Light-theme sidebar structural overrides — tuned for the blue-slate palette. */
[data-theme="light"] .side-group-label { color: #46586c; }
[data-theme="light"] .side-group-label:hover { color: #185f8a; }
[data-theme="light"] .side-group-label { border-bottom-color: rgba(30,123,176,0.12); }
[data-theme="light"] .side-actions { border-bottom-color: rgba(30,123,176,0.12); }
[data-theme="light"] .side-action-btn { color: #64748b; border-color: rgba(30,123,176,0.15); }
[data-theme="light"] .side-action-btn:hover { color: #185f8a; background: #eaf3fa;
                                              border-color: rgba(30,123,176,0.30); }
[data-theme="light"] .side-list a { color: #2E3E52; }
[data-theme="light"] .side-list a:hover { background: #eaf3fa; color: #185f8a; }
[data-theme="light"] .side-list li.active a { background: #eaf3fa; color: #185f8a; }
[data-theme="light"] .side-list li.unlinked .muted { color: #94a3b8; }
[data-theme="light"] .sidebar { border-right: 1px solid #dfe6ed; }

/* =========================================================================
   Theme: Dark — dark chrome + scarce brand accents.
   Palette: Oragen Sky #28B4E6 (signal), Oragen Primary #0A82C8 (secondary/gradient),
            Dark Slate #3D3D3D (never true black), White.
   Surfaces: --surface-mid #111111 (nav), --surface-dark #0A0A0A (topbar),
             sky-tinted borders rgba(40,180,230,0.15). Sky is scarce by
             design — it fires on active states + CTAs only, not everywhere.
   Body text = Inter; display type would be Jost (loaded in base.html).
   ========================================================================= */
[data-theme="dark"] {
  /* Section-header chip: subtle sky-tinted panel on the dark surface */
  --nav-label-bg:      linear-gradient(180deg, rgba(40,180,230,0.06) 0%, rgba(10,130,200,0.02) 100%);
  --nav-label-fg:      rgba(255,255,255,0.55);
  --nav-label-shadow:  inset 0 -1px 0 rgba(40,180,230,0.18);

  --brand-500:   #28B4E6;   /* Sky — the signal color */
  --brand-600:   #0A82C8;   /* primary blue for hovers */
  --brand-100:   #B8E5F5;
  --brand-50:    rgba(40,180,230,0.08);

  /* Sidebar = surface-mid; navbar text high-contrast white with dimmed nav-fg */
  --nav-bg:      #111111;   /* --surface-mid */
  --nav-bg-hover:#1a1a1a;
  --nav-fg:      #f4f4f4;
  --nav-fg-dim:  rgba(255,255,255,0.45);
  --nav-fg-hot:  #28B4E6;   /* sky pop on hover */
  --nav-accent:  #28B4E6;

  /* Content area stays light per "dark-first immersion, light for content
     clarity" — Section 6 of the brand guide. */
  --bg:          #F8F8F8;   /* --surface-light */
  --panel:       #ffffff;
  --border:      #e2e2e2;
  --border-hot:  #d0d0d0;

  --text:        #1A1A1A;   /* --body-text per §3 carve-out */
  --text-dim:    #3D3D3D;   /* Dark Slate */
  --text-mute:   #6b7280;

  /* Signature gradient — Sky → Primary, 135deg, per §3 */
  --brand-grad:  linear-gradient(135deg, #28B4E6, #0A82C8);
  --sidebar-shadow: 1px 0 0 rgba(0,0,0,0.40);

  /* Group icons — restrict to the brand palette. Sky is primary; Oragen
     Primary is the natural companion in the gradient. Everything else is a
     shade interpolated on the Sky→Primary axis. Keeps sky scarce for
     active/hover states while still differentiating groups. */
  --group-op:    #28B4E6;   /* Sky */
  --group-bl:    #0A82C8;   /* Primary */
  --group-dv:    #159AD0;   /* mid (sky→primary gradient midpoint) */
  --group-mt:    #7DCFEC;   /* pale sky */
  --group-cm:    #0A82C8;   /* primary */
  --group-pr:    #5AC3E8;   /* light sky */
  --group-fn:    #14508C;   /* navy */
  --group-gl:    #28B4E6;   /* Goals — sky (aspirational) */
}

/* Dark theme structural overrides — enforce brand palette everywhere */
[data-theme="dark"] .side-list a { color: var(--nav-fg); }
[data-theme="dark"] .side-list a:hover {
  background: rgba(40,180,230,0.10);
  color: #28B4E6;
}
[data-theme="dark"] .side-list li.active a {
  background: rgba(40,180,230,0.18);
  color: #28B4E6;
  box-shadow: inset 3px 0 0 #28B4E6;   /* sky left-bar on active */
}
[data-theme="dark"] .sidebar { border-right: 1px solid rgba(40,180,230,0.15); }

/* Top-bar goes even darker (--surface-dark) for that "immersive" feel */
[data-theme="dark"] .topbar {
  background: #0A0A0A;
  border-bottom: 1px solid rgba(40,180,230,0.15);
  color: #f4f4f4;
}
[data-theme="dark"] .topbar .brand,
[data-theme="dark"] .topbar .user-chip-name { color: #f4f4f4; }
[data-theme="dark"] .topbar .user-chip-roles { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .user-chip {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .top-pills {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(40,180,230,0.15);
}
[data-theme="dark"] .top-pill { color: rgba(255,255,255,0.60); }
[data-theme="dark"] .top-pill:hover { background: rgba(40,180,230,0.12); color: #28B4E6; }
[data-theme="dark"] .top-pill.active {
  background: linear-gradient(135deg, #28B4E6, #0A82C8);
  color: #0A0A0A;
  font-weight: 700;
}
[data-theme="dark"] .omni-trigger {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.65);
}
[data-theme="dark"] .omni-trigger:hover {
  background: rgba(40,180,230,0.12);
  border-color: rgba(40,180,230,0.35);
  color: #28B4E6;
}
[data-theme="dark"] .omni-kbd,
[data-theme="dark"] .user-chip .avatar { color: #0A0A0A; }
[data-theme="dark"] .user-chip .avatar { background: linear-gradient(135deg, #28B4E6, #0A82C8); }
[data-theme="dark"] .sidebar-toggle {
  color: rgba(255,255,255,0.6);
  border-color: rgba(255,255,255,0.15);
  background: transparent;
}
[data-theme="dark"] .sidebar-toggle:hover {
  background: rgba(40,180,230,0.12);
  border-color: rgba(40,180,230,0.35);
  color: #28B4E6;
}
[data-theme="dark"] .theme-picker {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .theme-picker button { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .theme-picker button:hover { color: #f4f4f4; }
[data-theme="dark"] .theme-picker button.active {
  background: linear-gradient(135deg, #28B4E6, #0A82C8);
  color: #0A0A0A;
}
[data-theme="dark"] .nav-logout button {
  background: transparent;
  color: rgba(255,255,255,0.65);
  border-color: rgba(255,255,255,0.15);
}
[data-theme="dark"] .nav-logout button:hover {
  background: rgba(40,180,230,0.12);
  border-color: rgba(40,180,230,0.35);
  color: #28B4E6;
}
[data-theme="dark"] .topbar .nav .nav-item { color: rgba(255,255,255,0.65); }
[data-theme="dark"] .topbar .nav .nav-item:hover { background: rgba(40,180,230,0.12); color: #28B4E6; }

/* Side-actions row (Collapse-all / Expand-all) */
[data-theme="dark"] .side-actions { border-bottom-color: rgba(40,180,230,0.15); }
[data-theme="dark"] .side-action-btn {
  color: rgba(255,255,255,0.55);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .side-action-btn:hover {
  background: rgba(40,180,230,0.12);
  border-color: rgba(40,180,230,0.35);
  color: #28B4E6;
}

/* Section-header labels get uppercase + Jost per the brand guide */
[data-theme="dark"] .side-group-label {
  font-family: "Jost", "Century Gothic", "AppleGothic", "Trebuchet MS", sans-serif;
  letter-spacing: 0.10em;
}

/* =========================================================================
   Theme: Illuminated — deep indigo + gold + cream + wine.
   Illuminated-manuscript / medieval-quest storybook feel. Cream backgrounds,
   deep indigo brand chrome, gold signal accents, serif type. Feels like a
   leather-bound tome you'd find in a wizard's library.
   ========================================================================= */
[data-theme="illuminated"] {
  --nav-label-bg:      linear-gradient(180deg, #F5EBD0 0%, #E8D9A8 100%);
  --nav-label-fg:      #2A2160;
  --nav-label-shadow:  inset 0 -1px 0 rgba(200,155,60,0.30);

  --brand-500:   #2A2160;   /* deep indigo — primary */
  --brand-600:   #1A1440;   /* deeper indigo — hover */
  --brand-100:   #E5DFF5;   /* pale indigo */
  --brand-50:    #F5F1FA;   /* very pale */

  --nav-bg:      #201B47;   /* indigo sidebar — chrome */
  --nav-bg-hover:#2D2560;
  --nav-fg:      #F5EBD0;   /* cream text on indigo */
  --nav-fg-dim:  rgba(245,235,208,0.55);
  --nav-fg-hot:  #C89B3C;   /* gold pop on hover */
  --nav-accent:  #C89B3C;

  --bg:          #FDF8ED;   /* cream parchment */
  --panel:       #FFF9EA;   /* ivory panel */
  --border:      #E5D9B5;   /* aged gold-tinted border */
  --border-hot:  #C89B3C;

  --text:        #1F1A3B;
  --text-dim:    #4A3F5E;
  --text-mute:   #6E6482;

  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;

  --font:        "Merriweather", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-size:   14px;
  --sidebar-shadow: 1px 0 0 rgba(200,155,60,0.20);
  --brand-grad:  linear-gradient(135deg, #2A2160, #6B1F2E);

  /* Jewel-tone group palette: indigo → gold → wine → forest → copper */
  --group-op:    #2A2160;   /* indigo */
  --group-bl:    #6B1F2E;   /* wine */
  --group-dv:    #C89B3C;   /* gold */
  --group-mt:    #2E5A3E;   /* forest */
  --group-cm:    #B87333;   /* copper */
  --group-pr:    #1A1440;   /* deep indigo */
  --group-fn:    #8B1A1A;   /* deeper wine */
  --group-gl:    #C89B3C;   /* Goals — aspirational gold */
}

[data-theme="illuminated"] .side-list a { color: #F5EBD0; }
[data-theme="illuminated"] .side-list a:hover { background: rgba(200,155,60,0.12); color: #C89B3C; }
[data-theme="illuminated"] .side-list li.active a {
  background: linear-gradient(90deg, rgba(200,155,60,0.20) 0%, rgba(200,155,60,0.05) 100%);
  color: #C89B3C; font-weight: 600;
  box-shadow: inset 3px 0 0 #C89B3C;
}
[data-theme="illuminated"] .sidebar { border-right: 1px solid rgba(200,155,60,0.18); }
[data-theme="illuminated"] .topbar { background: #201B47; color: #F5EBD0; border-bottom-color: rgba(200,155,60,0.25); }
[data-theme="illuminated"] .topbar .brand,
[data-theme="illuminated"] .topbar .user-chip-name { color: #F5EBD0; }
[data-theme="illuminated"] .side-actions { border-bottom-color: rgba(200,155,60,0.18); }
[data-theme="illuminated"] .side-action-btn { color: rgba(245,235,208,0.55); border-color: rgba(245,235,208,0.20); }
[data-theme="illuminated"] .side-action-btn:hover { color: #C89B3C; background: rgba(200,155,60,0.10); }
[data-theme="illuminated"] .theme-picker button.active { background: #C89B3C; color: #201B47; }

/* =========================================================================
   Theme: Enchanted — moss + gold-hour + parchment.
   Fantasy quest / hobbit-adventure. Warm parchment bg, deep sage brand
   primary, golden-hour accents. Bright and inviting like the start of an
   adventure. Rounded soft chrome, subtle serifs.
   ========================================================================= */
[data-theme="enchanted"] {
  --nav-label-bg:      linear-gradient(180deg, #EFE2C4 0%, #D9C8A0 100%);
  --nav-label-fg:      #1E3A2A;
  --nav-label-shadow:  inset 0 -1px 0 rgba(56,94,60,0.20);

  --brand-500:   #385E3C;   /* moss primary */
  --brand-600:   #1E3A2A;   /* forest hover */
  --brand-100:   #D1E5D2;
  --brand-50:    #ECF3EC;

  --nav-bg:      #F0E6D2;   /* parchment sidebar */
  --nav-bg-hover:#E5D8B8;
  --nav-fg:      #1E3A2A;
  --nav-fg-dim:  #5B6E5F;
  --nav-fg-hot:  #385E3C;
  --nav-accent:  #E0A24A;   /* gold-hour accent */

  --bg:          #FBF5E4;   /* parchment page */
  --panel:       #FFF9EA;   /* cream panel */
  --border:      #E0D2A8;
  --border-hot:  #C4A484;

  --text:        #26301F;
  --text-dim:    #4A5A45;
  --text-mute:   #7A8570;

  --radius-sm:   10px;
  --radius:      14px;
  --radius-lg:   20px;

  --font:        "Lora", "IM Fell", "Iowan Old Style", Georgia, serif;
  --font-size:   14px;
  --sidebar-shadow: 1px 0 0 rgba(56,94,60,0.14);
  --brand-grad:  linear-gradient(135deg, #385E3C, #E0A24A);

  /* Forest palette: moss, gold, clay, rust, sky, stone, heather, fern */
  --group-op:    #385E3C;   /* moss */
  --group-bl:    #B65B34;   /* clay */
  --group-dv:    #E0A24A;   /* gold-hour */
  --group-mt:    #8B4A2A;   /* rust */
  --group-cm:    #6A9AC4;   /* sky */
  --group-pr:    #1E3A2A;   /* forest */
  --group-fn:    #957C6C;   /* heather */
  --group-gl:    #2E5A3E;   /* Goals — deep growth */
}

[data-theme="enchanted"] .side-list a { color: #26301F; }
[data-theme="enchanted"] .side-list a:hover { background: rgba(224,162,74,0.15); color: #385E3C; }
[data-theme="enchanted"] .side-list li.active a {
  background: linear-gradient(90deg, rgba(224,162,74,0.25) 0%, rgba(224,162,74,0.05) 100%);
  color: #1E3A2A; font-weight: 600;
}
[data-theme="enchanted"] .side-actions { border-bottom-color: rgba(56,94,60,0.20); }
[data-theme="enchanted"] .side-action-btn { color: #5B6E5F; border-color: rgba(56,94,60,0.22); }
[data-theme="enchanted"] .side-action-btn:hover { color: #385E3C; background: rgba(224,162,74,0.15); }
[data-theme="enchanted"] .sidebar { border-right: 1px solid #E0D2A8; }
[data-theme="enchanted"] .theme-picker button.active { background: #E0A24A; color: #1E3A2A; }

/* =========================================================================
   Theme: Storybook — cornflower + poppy + mustard + cream.
   Wes-Anderson storybook feel. Symmetrical, ornate, playful color pops on
   cream. Bright and cheery. Great for a demo where every page should feel
   like a spark of joy. Ornate borders + retro whimsy.
   ========================================================================= */
[data-theme="storybook"] {
  --nav-label-bg:      linear-gradient(180deg, #F5EFD9 0%, #E8DEB8 100%);
  --nav-label-fg:      #4A3F5E;
  --nav-label-shadow:  inset 0 -1px 0 rgba(84,112,192,0.18);

  --brand-500:   #5470C0;   /* cornflower */
  --brand-600:   #3A54A0;   /* deeper cornflower */
  --brand-100:   #D5DEF0;
  --brand-50:    #EEF2FA;

  --nav-bg:      #FBF5E6;   /* cream sidebar */
  --nav-bg-hover:#F5EFD9;
  --nav-fg:      #2A2833;
  --nav-fg-dim:  #6E6482;
  --nav-fg-hot:  #5470C0;
  --nav-accent:  #D34F3F;   /* poppy accent */

  --bg:          #FBF5E6;   /* cream page */
  --panel:       #FFFCF2;   /* warm ivory panel */
  --border:      #E5DCC0;
  --border-hot:  #C4B593;

  --text:        #2A2833;
  --text-dim:    #4A4658;
  --text-mute:   #7A7285;

  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;

  --font:        "Nunito", "Playfair Display", Georgia, sans-serif;
  --font-size:   14px;
  --sidebar-shadow: 1px 0 0 rgba(84,112,192,0.14);
  --brand-grad:  linear-gradient(135deg, #5470C0, #2E7B72);

  /* Retro-storybook palette: cornflower, poppy, mustard, teal, mint, rose, lavender, sage */
  --group-op:    #5470C0;   /* cornflower */
  --group-bl:    #D34F3F;   /* poppy */
  --group-dv:    #E8AE3C;   /* mustard */
  --group-mt:    #2E7B72;   /* teal */
  --group-cm:    #8FB897;   /* mint-sage */
  --group-pr:    #E2A3B0;   /* dusty rose */
  --group-fn:    #B8ACD6;   /* lavender */
  --group-gl:    #E8AE3C;   /* Goals — cheery mustard */
}

[data-theme="storybook"] .side-list a { color: #2A2833; }
[data-theme="storybook"] .side-list a:hover { background: rgba(84,112,192,0.10); color: #3A54A0; }
[data-theme="storybook"] .side-list li.active a {
  background: linear-gradient(90deg, rgba(84,112,192,0.15) 0%, rgba(84,112,192,0.03) 100%);
  color: #3A54A0; font-weight: 700;
  box-shadow: inset 3px 0 0 #D34F3F;
}
[data-theme="storybook"] .side-actions { border-bottom-color: rgba(84,112,192,0.16); }
[data-theme="storybook"] .side-action-btn { color: #6E6482; border-color: rgba(84,112,192,0.20); }
[data-theme="storybook"] .side-action-btn:hover { color: #3A54A0; background: rgba(84,112,192,0.10); }
[data-theme="storybook"] .sidebar { border-right: 1px solid #E5DCC0; }
[data-theme="storybook"] .theme-picker button.active { background: #D34F3F; color: #FBF5E6; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text);
             font-family: var(--font); font-size: var(--font-size); line-height: 1.5;
             -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
             transition: background-color .2s, color .2s; }
a { color: var(--brand-500); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-h);
          background: var(--panel); border-bottom: 1px solid var(--border);
          box-shadow: var(--shadow-sm); }
.topbar-inner { height: 100%; display: flex; align-items: center;
                gap: 20px; padding: 0 20px; }

.sidebar-toggle { display: inline-flex; align-items: center; justify-content: center;
                   width: 32px; height: 32px; padding: 0; margin-right: -4px;
                   background: transparent; border: 1px solid var(--border);
                   color: var(--text-dim); border-radius: 6px; cursor: pointer;
                   transition: all .12s; }
.sidebar-toggle:hover { background: var(--brand-50); color: var(--brand-600);
                         border-color: var(--brand-500); }
.sidebar-toggle svg { display: block; transition: transform .18s; }
[data-sidebar-collapsed="true"] .sidebar-toggle svg { transform: rotate(180deg); }
[data-sidebar-collapsed="true"] .layout { grid-template-columns: 1fr; }
[data-sidebar-collapsed="true"] .sidebar { display: none; }
.topbar .brand { display: inline-flex; align-items: center; gap: 10px;
                 font-size: 16px; font-weight: 700; color: var(--text);
                 text-decoration: none; }
.topbar .brand:hover { text-decoration: none; }
.brand-logo { display: block; height: 32px; width: auto; object-fit: contain; }

.topbar .nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.topbar .nav .nav-item { padding: 7px 12px; font-size: 13px; font-weight: 500;
                          color: var(--text-dim); border-radius: 6px; }
.topbar .nav .nav-item:hover { background: var(--brand-50); color: var(--brand-600);
                                text-decoration: none; }

.topbar .spacer { flex: 1; }

.user-chip { display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px;
             border-radius: 999px; border: 1px solid var(--border); background: var(--bg); }
.user-chip .avatar { width: 28px; height: 28px; border-radius: 50%;
                     background: var(--brand-grad);
                     color: #fff; display: inline-flex; align-items: center;
                     justify-content: center; font-size: 12px; font-weight: 700; }
.user-chip .who { display: flex; flex-direction: column; line-height: 1.15; }
.user-chip .user-chip-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.user-chip .user-chip-roles { font-size: 10.5px; color: var(--text-mute);
                              text-transform: uppercase; letter-spacing: 0.04em; }

.nav-logout { margin: 0; }
.nav-logout button { padding: 7px 12px; font-size: 12.5px; font-weight: 600;
                     background: var(--panel); color: var(--text-dim);
                     border: 1px solid var(--border); border-radius: 6px;
                     cursor: pointer; transition: all .15s; }
.nav-logout button:hover { background: var(--brand-50); color: var(--brand-600);
                            border-color: var(--brand-500); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.content { min-height: calc(100vh - var(--topbar-h)); padding: 0; }
.layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr;
          min-height: calc(100vh - var(--topbar-h)); }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar { background: var(--nav-bg); color: var(--nav-fg); padding: 12px 0 24px;
           border-right: 1px solid rgba(255,255,255,0.06); overflow-y: auto;
           height: calc(100vh - var(--topbar-h)); position: sticky; top: var(--topbar-h); }
.side-actions { display: flex; gap: 6px; padding: 8px 16px 10px;
                border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 6px; }
.side-action-btn { flex: 1; padding: 5px 8px; font-size: 10px; font-weight: 600;
                    text-transform: uppercase; letter-spacing: 0.06em;
                    background: transparent; color: var(--nav-fg-dim);
                    border: 1px solid rgba(255,255,255,0.08); border-radius: 4px;
                    cursor: pointer; transition: all .12s; }
.side-action-btn:hover { color: var(--nav-fg-hot); background: var(--nav-bg-hover);
                          border-color: rgba(255,255,255,0.15); }

.side-group { padding: 2px 12px 6px; }
.side-group-label { display: flex; align-items: center; gap: 10px; width: 100%;
                    font-family: inherit;
                    font-size: 12px; font-weight: 700; text-transform: uppercase;
                    letter-spacing: 0.08em; color: var(--nav-label-fg);
                    padding: 10px 12px 9px; margin: 6px 0 5px;
                    background: var(--nav-label-bg); border: 0; text-align: left;
                    cursor: pointer; border-radius: 6px;
                    box-shadow: var(--nav-label-shadow); transition: background .12s; }
.side-group-label:hover { color: var(--nav-fg-hot); filter: brightness(0.98); }
.side-group-name { flex: 1; }
.side-chevron { color: var(--nav-fg-dim); transition: transform .18s ease;
                margin-left: auto; }
.side-group.collapsed .side-chevron { transform: rotate(-90deg); }
.side-group.collapsed .side-list { display: none; }
.side-group-icon { display: inline-flex; align-items: center; justify-content: center;
                    color: var(--nav-accent); opacity: 1; }
.side-group-icon svg { display: block; }

/* Per-group icon color — makes the sidebar feel less monochrome. */
.side-group[data-group="Operations"]  .side-group-icon { color: var(--group-op); }
.side-group[data-group="Billing"]     .side-group-icon { color: var(--group-bl); }
.side-group[data-group="Development"] .side-group-icon { color: var(--group-dv); }
.side-group[data-group="Maintenance"] .side-group-icon { color: var(--group-mt); }
.side-group[data-group="Compliance"]  .side-group-icon { color: var(--group-cm); }
.side-group[data-group="Provider"]    .side-group-icon { color: var(--group-pr); }
.side-group[data-group="Finance"]     .side-group-icon { color: var(--group-fn); }
.side-group[data-group="Goals"]       .side-group-icon { color: var(--group-gl); }
.side-group[data-group="Admin"]       .side-group-icon { color: var(--text-dim); }

.side-group[data-group="Operations"]  .side-group-label { border-left: 3px solid var(--group-op); }
.side-group[data-group="Billing"]     .side-group-label { border-left: 3px solid var(--group-bl); }
.side-group[data-group="Development"] .side-group-label { border-left: 3px solid var(--group-dv); }
.side-group[data-group="Maintenance"] .side-group-label { border-left: 3px solid var(--group-mt); }
.side-group[data-group="Compliance"]  .side-group-label { border-left: 3px solid var(--group-cm); }
.side-group[data-group="Provider"]    .side-group-label { border-left: 3px solid var(--group-pr); }
.side-group[data-group="Finance"]     .side-group-label { border-left: 3px solid var(--group-fn); }
.side-group[data-group="Goals"]       .side-group-label { border-left: 3px solid var(--group-gl); }
.side-group[data-group="Admin"]       .side-group-label { border-left: 3px solid #94a3b8; }
.side-group .side-group-label { padding-left: 12px; border-radius: 0 4px 4px 0; }

.side-group[data-group="Operations"]  .side-list a:hover .side-dot,
.side-group[data-group="Operations"]  li.active .side-dot { background: var(--group-op); }
.side-group[data-group="Billing"]     .side-list a:hover .side-dot,
.side-group[data-group="Billing"]     li.active .side-dot { background: var(--group-bl); }
.side-group[data-group="Development"] .side-list a:hover .side-dot,
.side-group[data-group="Development"] li.active .side-dot { background: var(--group-dv); }
.side-group[data-group="Maintenance"] .side-list a:hover .side-dot,
.side-group[data-group="Maintenance"] li.active .side-dot { background: var(--group-mt); }
.side-group[data-group="Compliance"]  .side-list a:hover .side-dot,
.side-group[data-group="Compliance"]  li.active .side-dot { background: var(--group-cm); }
.side-group[data-group="Provider"]    .side-list a:hover .side-dot,
.side-group[data-group="Provider"]    li.active .side-dot { background: var(--group-pr); }
.side-group[data-group="Finance"]     .side-list a:hover .side-dot,
.side-group[data-group="Finance"]     li.active .side-dot { background: var(--group-fn); }
.side-group[data-group="Goals"]       .side-list a:hover .side-dot,
.side-group[data-group="Goals"]       li.active .side-dot { background: var(--group-gl); }

.side-group li.active a { border-left-color: var(--nav-accent) !important; }

/* Theme picker */
/* ── Native maintenance pages ────────────────────────────────────────────── */
.maint-header { display: flex; align-items: flex-start; justify-content: space-between;
                gap: 20px; margin-bottom: 16px; }
.maint-header h1 { margin: 4px 0 6px; font-size: 22px; font-weight: 700; }
.maint-header .muted { color: var(--text-dim); font-size: 13px; margin: 0; max-width: 60ch; }
.maint-actions { display: flex; gap: 8px; flex-shrink: 0; }

.maint-tbl { width: 100%; border-collapse: collapse; }
.maint-tbl thead th { padding: 12px 16px; text-align: left; background: var(--bg);
                      border-bottom: 1px solid var(--border);
                      font-size: 11px; font-weight: 700; text-transform: uppercase;
                      letter-spacing: 0.06em; color: var(--text-mute); }
.maint-tbl thead th.num, .maint-tbl tbody td.num { text-align: right; }
.maint-tbl tbody td { padding: 10px 16px; border-bottom: 1px solid var(--border);
                       font-size: 14px; }
.maint-tbl tbody tr:last-child td { border-bottom: none; }
.maint-tbl tbody tr:hover { background: var(--brand-50); }
.maint-tbl tbody tr.dirty { background: #fffbea; }
.maint-tbl tbody tr.dirty:hover { background: #fff5d0; }
.cell-input { width: 140px; padding: 6px 10px; font-size: 14px; font-family: inherit;
              border: 1px solid var(--border); border-radius: 4px; text-align: right;
              background: var(--panel); color: var(--text); outline: none;
              font-variant-numeric: tabular-nums;
              transition: border-color .12s, box-shadow .12s; }
.cell-input:focus { border-color: var(--brand-500);
                    box-shadow: 0 0 0 3px var(--brand-50); }

.maint-status { margin-top: 12px; font-size: 13px; font-weight: 600; min-height: 20px; }
.maint-status.ok  { color: var(--ok); }
.maint-status.err { color: var(--err); }

/* User table extras */
.user-name { font-weight: 600; color: var(--text); font-family: ui-monospace, monospace; font-size: 13px; }
.row-actions { display: flex; gap: 6px; }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn.danger { background: var(--panel); color: var(--err); border-color: #fecaca; }
.btn.danger:hover { background: #fef2f2; color: var(--err); border-color: var(--err); }

.role-chip { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600;
              border-radius: 999px; margin-right: 4px; background: var(--bg);
              color: var(--text-dim); border: 1px solid var(--border); }
.role-chip.role-administrator { background: #e0e7ff; color: #4338ca; border-color: #c7d2fe; }
.role-chip.role-corporate     { background: #ccfbf1; color: #0f766e; border-color: #99f6e4; }
.role-chip.role-office-manager{ background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.role-chip.role-billing       { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.role-chip.role-analyst       { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }

.auth-chip { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600;
              border-radius: 999px; }
.auth-chip.auth-hashed { background: #dcfce7; color: #166534; }
.auth-chip.auth-plain  { background: #fef3c7; color: #92400e; }

/* Modal system */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.55);
                   z-index: 150; display: flex; align-items: flex-start;
                   justify-content: center; padding: 12vh 20px 20px;
                   backdrop-filter: blur(3px); }
.modal-backdrop[hidden] { display: none; }
.modal { width: 100%; max-width: 520px; background: var(--panel);
         border: 1px solid var(--border); border-radius: 12px;
         box-shadow: 0 20px 60px rgba(15,23,42,0.30); overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between;
              padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.modal-close { background: transparent; border: 0; font-size: 22px; line-height: 1;
                color: var(--text-mute); cursor: pointer; padding: 0 6px; }
.modal-close:hover { color: var(--text); }
.modal form { padding: 20px; }
.modal .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.modal .field label { font-size: 12px; font-weight: 600; color: var(--text-dim);
                       text-transform: uppercase; letter-spacing: 0.04em; }
.modal .field input[type=text], .modal .field input[type=password] {
  padding: 10px 12px; font-size: 14px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); color: var(--text); outline: none; font-family: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.modal .field input:focus { border-color: var(--brand-500);
                             box-shadow: 0 0 0 3px var(--brand-50); }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px;
               padding-top: 8px; border-top: 1px solid var(--border); margin: 8px -20px -20px;
               padding: 14px 20px; }

.role-checks { display: flex; flex-direction: column; gap: 8px; }
.role-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
               border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
               transition: background .12s, border-color .12s; }
.role-check:hover { background: var(--brand-50); border-color: var(--brand-500); }
.role-check input { margin-top: 3px; }
.role-check-name { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.role-check-desc { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.pw-hint { color: var(--text-mute); font-size: 12px; margin-top: 6px; font-style: italic; }

/* Filter row (procedures + future maintenance grids) */
.filter-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.filter-cell { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.filter-cell label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
                      font-weight: 700; color: var(--text-mute); }
.filter-cell input, .filter-cell select {
  padding: 8px 12px; font-size: 13.5px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--panel); color: var(--text); outline: none;
  font-family: inherit; min-width: 160px;
  transition: border-color .12s, box-shadow .12s;
}
.filter-cell input:focus, .filter-cell select:focus { border-color: var(--brand-500);
                                                       box-shadow: 0 0 0 3px var(--brand-50); }
.filter-cell-search input { min-width: 280px; }
.filter-cell-count { min-width: 90px; text-align: right; }
.filter-count { padding: 8px 12px; font-size: 15px; font-weight: 700; color: var(--brand-600);
                background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 6px;
                font-variant-numeric: tabular-nums; text-align: right; }

/* Two-column grid for modal fields */
.modal .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal .grid-2 .field-span2 { grid-column: 1 / -1; }

/* ── Top pills (quick-access dashboards) ────────────────────────────────── */
.top-pills { display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
             margin-left: 12px; padding: 3px; background: var(--bg);
             border: 1px solid var(--border); border-radius: 999px; }
.top-pill  { padding: 5px 12px; font-size: 12px; font-weight: 600;
             color: var(--text-dim); border-radius: 999px;
             text-decoration: none; white-space: nowrap; transition: all .12s; }
.top-pill:hover { background: var(--brand-50); color: var(--brand-600);
                   text-decoration: none; }
.top-pill.active { background: var(--brand-500); color: #fff; }
.top-pill.active:hover { background: var(--brand-600); color: #fff; }

/* Adaptive: on narrower viewports drop the outer pill border so it looks
   less crowded next to the brand. */
@media (max-width: 1200px) {
  .top-pills { border: 0; background: transparent; padding: 0; }
}

/* ── Omnibox search ─────────────────────────────────────────────────────── */
.omni-trigger { display: inline-flex; align-items: center; gap: 8px;
                padding: 6px 10px 6px 12px; font-size: 12.5px; color: var(--text-dim);
                background: var(--bg); border: 1px solid var(--border);
                border-radius: 999px; cursor: pointer; margin-right: 8px;
                transition: all .12s; font-family: inherit; }
.omni-trigger:hover { background: var(--brand-50); color: var(--brand-600);
                       border-color: var(--brand-500); }
.omni-trigger-label { font-weight: 500; }
.omni-kbd { display: inline-flex; align-items: center; padding: 1px 6px;
             font-size: 10px; font-weight: 600; color: var(--text-mute);
             background: var(--panel); border: 1px solid var(--border);
             border-radius: 4px; font-family: ui-monospace, monospace; margin-left: 4px; }

.omni-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.45);
                  z-index: 100; display: flex; align-items: flex-start;
                  justify-content: center; padding: 12vh 20px 20px;
                  backdrop-filter: blur(3px); }
.omni-backdrop[hidden] { display: none; }
.omni-panel { width: 100%; max-width: 620px; background: var(--panel);
              border: 1px solid var(--border); border-radius: 12px;
              box-shadow: 0 20px 60px rgba(15,23,42,0.30); overflow: hidden; }
.omni-input-row { display: flex; align-items: center; gap: 10px;
                   padding: 14px 16px; border-bottom: 1px solid var(--border);
                   color: var(--text-dim); }
.omni-input-row input { flex: 1; padding: 0; border: 0; outline: 0;
                         font-size: 15px; font-family: inherit; color: var(--text);
                         background: transparent; }
.omni-input-row input::placeholder { color: var(--text-mute); }
.omni-kbd-hint { margin-left: auto; }

.omni-results { max-height: 45vh; overflow-y: auto; padding: 6px; }
.omni-item { display: flex; align-items: center; justify-content: space-between;
             gap: 12px; padding: 9px 12px; border-radius: 6px;
             color: var(--text); text-decoration: none; cursor: pointer; }
.omni-item:hover, .omni-item.active { background: var(--brand-50); text-decoration: none;
                                       color: var(--brand-600); }
.omni-item-label { font-weight: 500; font-size: 13.5px; }
.omni-item-group { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
                    letter-spacing: 0.06em; color: var(--text-mute);
                    padding: 3px 7px; background: var(--bg); border-radius: 4px; }
.omni-item.active .omni-item-group { background: var(--brand-100); color: var(--brand-600); }
.omni-empty { padding: 32px 16px; text-align: center; color: var(--text-mute); font-size: 13px; }
.omni-footer { display: flex; justify-content: center; gap: 20px;
                padding: 10px 14px; border-top: 1px solid var(--border);
                background: var(--bg); font-size: 11px; color: var(--text-mute); }
.omni-footer kbd { padding: 1px 5px; font-family: ui-monospace, monospace;
                   background: var(--panel); border: 1px solid var(--border);
                   border-radius: 3px; font-size: 10px; margin: 0 2px; }

.theme-picker { display: inline-flex; align-items: center; gap: 4px; padding: 3px;
                background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
                margin-right: 8px; }
.theme-picker button { padding: 4px 10px; font-size: 11px; font-weight: 600;
                       color: var(--text-dim); background: transparent; border: 0;
                       border-radius: 999px; cursor: pointer; transition: all .12s;
                       letter-spacing: 0.02em; }
.theme-picker button:hover { color: var(--text); }
.theme-picker button.active { background: var(--brand-500); color: #fff; }
[data-theme="serif"]   .theme-picker button.active { background: var(--brand-600); }
[data-theme="verdant"] .theme-picker button.active { background: var(--brand-500); }
[data-theme="dark"]    .theme-picker button.active { background: var(--brand-500); color: #fff; }

.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li { margin: 2px 0; }
.side-list a, .side-list .muted {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 12px; font-size: 14px; color: var(--nav-fg);
  border-radius: 6px; text-decoration: none; transition: background .12s, color .12s;
  border-left: 3px solid transparent;
}
.side-list .side-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
                        background: currentColor; opacity: 0.35; transition: opacity .12s; }
.side-list a:hover { background: var(--nav-bg-hover); color: var(--nav-fg-hot);
                     text-decoration: none; }
.side-list a:hover .side-dot { opacity: 0.75; }
.side-list li.active a { background: var(--nav-bg-hover); color: var(--nav-fg-hot);
                          border-left-color: var(--nav-accent); font-weight: 600; }
.side-list li.active .side-dot { background: var(--nav-accent); opacity: 1; }
.side-list li.unlinked .muted { color: var(--nav-fg-dim); font-style: italic; cursor: default; }
.side-list li.unlinked .side-dot { opacity: 0.15; }

/* ── Workspace ───────────────────────────────────────────────────────────── */
.workspace { padding: 24px 32px; }
.workspace-iframe { padding: 0; display: flex; flex-direction: column;
                    height: calc(100vh - var(--topbar-h)); }

.iframe-header { display: flex; align-items: center; justify-content: space-between;
                 padding: 10px 20px; border-bottom: 1px solid var(--border);
                 background: var(--panel); }
.iframe-header.slim { padding: 8px 20px; }
.iframe-crumb { font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
                text-transform: uppercase; color: var(--text-dim); }

.dashboard-frame { flex: 1; width: 100%; border: 0; background: var(--panel); }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card { background: var(--panel); border: 1px solid var(--border);
        border-radius: var(--radius); box-shadow: var(--shadow-sm);
        padding: 24px 26px; }
.card.welcome h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700; }
.card.welcome > .muted { color: var(--text-dim); font-size: 13px; margin: 0 0 22px; }

.section-h { font-size: 11px; font-weight: 700; text-transform: uppercase;
             letter-spacing: 0.08em; color: var(--text-mute);
             margin: 22px 0 10px; }

/* Landing quicklinks */
.quicklinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
              gap: 10px; }
.quicklink { padding: 14px 16px; font-size: 13.5px; font-weight: 600;
             color: var(--text); background: var(--brand-50);
             border: 1px solid var(--brand-100); border-radius: var(--radius-sm);
             text-decoration: none; transition: all .15s; }
.quicklink:hover { background: var(--brand-500); color: #fff; border-color: var(--brand-500);
                    text-decoration: none; }

/* Landing group grid */
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
              gap: 14px; }
.group-card { background: var(--panel); border: 1px solid var(--border);
              border-radius: var(--radius-sm); padding: 14px 16px 12px; }
.group-card-title { font-size: 11px; font-weight: 700; text-transform: uppercase;
                    letter-spacing: 0.08em; color: var(--brand-600);
                    padding-bottom: 8px; margin-bottom: 8px;
                    border-bottom: 1px solid var(--border); }
.group-card ul { list-style: none; margin: 0; padding: 0; }
.group-card li { padding: 4px 0; font-size: 13px; }
.group-card li a { color: var(--text); }
.group-card li a:hover { color: var(--brand-600); text-decoration: none; }
.group-card li.muted { color: var(--text-mute); font-style: italic; }

.card.muted-card { background: var(--brand-50); border-color: var(--brand-100); }
.card.muted-card h2 { margin: 0 0 8px; font-size: 16px; color: var(--brand-600); }
.card.muted-card p { color: var(--text-dim); font-size: 13px; margin: 6px 0; }

.btn { display: inline-flex; align-items: center; gap: 6px;
       padding: 8px 14px; font-size: 13px; font-weight: 600;
       color: #fff; background: var(--brand-500); border: 1px solid var(--brand-500);
       border-radius: 6px; cursor: pointer; text-decoration: none;
       transition: all .15s; }
.btn:hover { background: var(--brand-600); border-color: var(--brand-600);
             text-decoration: none; color: #fff; }
.btn.small { padding: 6px 10px; font-size: 12px; }
.btn.secondary { background: var(--panel); color: var(--text);
                 border-color: var(--border); }
.btn.secondary:hover { background: var(--brand-50); color: var(--brand-600);
                       border-color: var(--brand-500); }

/* ── Auth pages ──────────────────────────────────────────────────────────── */
.auth-page { background: linear-gradient(135deg, #d5dae0 0%, #6b7684 100%); }
[data-theme="light"]   .auth-page { background: linear-gradient(135deg, #d5dae0 0%, #1c2530 100%); }
[data-theme="dark"]    .auth-page { background: linear-gradient(135deg, #1c2530 0%, #14508C 100%); }
[data-theme="verdant"] .auth-page { background: linear-gradient(135deg, #EAF4FA 0%, #0A82C8 100%); }
[data-theme="serif"]   .auth-page { background: linear-gradient(135deg, #faf9f5 0%, #14508C 100%); }
.auth-page .topbar { background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); }
.auth-page .content { display: flex; align-items: center; justify-content: center;
                       min-height: calc(100vh - var(--topbar-h)); padding: 20px; }
.auth-shell { max-width: 440px; width: 100%; margin: 0; padding: 40px 40px 36px;
              background: var(--panel); border: 1px solid var(--border);
              border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.auth-logo { text-align: center; margin: 0 0 24px; }
.auth-logo img { display: inline-block; max-width: 240px; max-height: 90px;
                 width: auto; height: auto; border-radius: var(--radius-sm); }
.auth-shell h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700; text-align: center; }
.auth-shell .subtitle { color: var(--text-dim); font-size: 13.5px; margin: 0 0 24px;
                        text-align: center; }
.auth-shell .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.auth-shell label { font-size: 12px; font-weight: 600; color: var(--text-dim);
                    text-transform: uppercase; letter-spacing: 0.05em; }
.auth-shell input[type=text],
.auth-shell input[type=password],
.auth-shell input { padding: 10px 12px; font-size: 14px; border: 1px solid var(--border);
                    border-radius: 6px; background: var(--panel); color: var(--text);
                    outline: none; transition: border-color .15s, box-shadow .15s; }
.auth-shell input:focus { border-color: var(--brand-500);
                          box-shadow: 0 0 0 3px var(--brand-50); }
.auth-shell button[type=submit] { width: 100%; padding: 11px 16px; font-size: 14px;
                                   font-weight: 600; color: #fff;
                                   background: var(--brand-500); border: 0;
                                   border-radius: 6px; cursor: pointer;
                                   margin-top: 6px; transition: background .15s; }
.auth-shell button[type=submit]:hover { background: var(--brand-600); }
.auth-shell .error { padding: 10px 12px; margin-bottom: 14px;
                     background: #fef2f2; color: var(--err); font-size: 13px;
                     border-radius: 6px; border: 1px solid #fecaca; }

/* ── Utilities ───────────────────────────────────────────────────────────── */
.muted { color: var(--text-mute); }