:root {
  color-scheme: light;

  /* Typography: Japanese-first system stack and the approved type scale. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-18: 18px;
  --text-22: 22px;
  --text-28: 28px;
  --text-36: 36px;
  --text-label: var(--text-12);
  --text-caption: var(--text-13);
  --text-body-sm: var(--text-14);
  --text-body-lg: var(--text-16);
  --text-subtitle: var(--text-18);
  --text-heading: var(--text-22);
  --text-display: var(--text-36);

  /* Legacy type aliases retained for all existing native pages. */
  --text-xs: var(--text-12);
  --text-sm: var(--text-13);
  --text-base: var(--text-14);
  --text-body: var(--text-15);
  --text-title: var(--text-28);

  /* Existing spacing values are a compatibility contract. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 30px;
  --space-8: 36px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  --elev-0: none;
  --elev-1: 0 1px 2px rgba(20,30,50,.06), 0 1px 1px rgba(20,30,50,.04);
  --elev-2: 0 2px 8px rgba(20,30,50,.08), 0 1px 2px rgba(20,30,50,.05);
  --elev-3: 0 8px 24px rgba(20,30,50,.10), 0 2px 6px rgba(20,30,50,.06);
  --elev-4: 0 20px 60px rgba(20,30,50,.18), 0 4px 12px rgba(20,30,50,.08);
  --shadow-1: var(--elev-1);
  --shadow-2: var(--elev-2);
  --shadow-3: var(--elev-4);
  --shadow-modal: var(--elev-4);

  --transition-fast: 150ms;
  --transition-mid: 250ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --enter: cubic-bezier(0, .4, 0, 1);
  --exit: cubic-bezier(.6, 0, .8, .6);

  /* Compact is the business-screen default. */
  --density-line-height: 1.5;
  --density-panel-padding: 12px;
  --density-card-padding: 10px;
  --density-cell-y: 8px;
  --density-cell-x: 12px;
  --density-row-height: 34px;
  --density-control-height: 36px;
  --density-gap: 8px;

  --sidebar-width: 236px;
  --page-head-height: 132px;

  /* Light surfaces and neutrals (approved design-pattern values). */
  --surface-1: #F6F7F7;
  --surface-2: #FFFFFF;
  --surface-3: #FFFFFF;
  --surface-muted: #F1F3F3;
  --surface-sunken: #E9ECEC;
  --color-text: #171A1A;
  --color-text-strong: #171A1A;
  --color-muted: #727B79;
  --color-inverse: #FFFFFF;
  --color-line: #DADFDE;
  --color-line-soft: #E5E9E8;
  --color-hover: #F1F3F3;
  --color-overlay: rgb(14 22 20 / 48%);
  --color-sidebar-value: #FFFFFF;
  --gray-0: #FFFFFF;
  --gray-1: #F6F7F7;
  --gray-2: #ECEFEE;
  --gray-3: #DADFDE;
  --gray-4: #BFC7C5;
  --gray-5: #929B99;
  --gray-6: #727B79;
  --gray-7: #4F5755;
  --gray-8: #2E3433;
  --gray-9: #171A1A;
  --chart-grid: #E5E9E8;
  --chart-muted: #C8CECC;

  /* Category colors are fixed per mode and never change with data-key. */
  --cat-1: #008E7B;
  --cat-2: #2A78D6;
  --cat-3: #E87BA4;
  --cat-4: #EDA100;
  --cat-5: #1BAF7A;
  --cat-6: #EB6834;
  --cat-7: #4A3AA7;
  --cat-8: #E34948;

  --status-good: #16794A;
  --status-good-soft: #E6F5EC;
  --status-warning: #8A6200;
  --status-warning-soft: #FFF3D6;
  --status-serious: #A84B0F;
  --status-serious-soft: #FFF0E5;
  --status-critical: #B4232A;
  --status-critical-soft: #FDEBEC;

  /* Default key: teal (proposal A). */
  --key: #006B60;
  --key-strong: #00584F;
  --key-soft: #DDEDEA;
  --key-faint: #EEF7F5;
  --key-neighbor: #27A58F;
  --key-contrast: #FFFFFF;
  --grad-data-1: #F07850;
  --grad-data-2: #D35B9D;
  --grad-data-3: #267F78;
  --grad-action-1: #27A58F;
  --grad-action-2: #00584F;
  --grad-card-1: #159984;
  --grad-card-2: #006B60;
  --grad-card-3: #244A72;
  --seq-100: #EEF7F5;
  --seq-200: #E2F1EE;
  --seq-300: #B6DED7;
  --seq-400: #75BDAF;
  --seq-500: #2B9483;
  --seq-600: #006B60;
  --seq-700: #00584F;
  --div-neg-2: #315DAD;
  --div-neg-1: #DDE7F8;
  --div-mid: #DADFDE;
  --div-pos-1: #B6DED7;
  --div-pos-2: #006B60;

  /* Gradients are tokens for data, dark primary action, and special cards only. */
  --grad-data: linear-gradient(90deg, var(--grad-data-1), var(--grad-data-2), var(--grad-data-3));
  --grad-action: linear-gradient(135deg, var(--grad-action-1), var(--grad-action-2));
  --grad-card: linear-gradient(135deg, var(--grad-card-1), var(--grad-card-2) 52%, var(--grad-card-3));
  --grad-fade: linear-gradient(180deg, color-mix(in srgb, var(--key) 28%, transparent), transparent);

  /* Legacy aliases: do not remove; 46 existing screens depend on these names. */
  --color-bg: var(--surface-1);
  --color-sidebar: var(--color-sidebar-value);
  --color-panel: var(--surface-2);
  --color-panel-muted: var(--surface-muted);
  --color-active: var(--key-faint);
  --color-accent: var(--key);
  --color-accent-soft: var(--key-soft);
  --color-good: var(--status-good);
  --color-warning: var(--status-warning);
  --color-danger: var(--status-critical);
  --color-white: var(--color-inverse);
  --border: 1px solid var(--color-line);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--key) 22%, transparent);
}

html[data-theme="light"] {
  color-scheme: light;
  --surface-1: #F6F7F7;
  --surface-2: #FFFFFF;
  --surface-3: #FFFFFF;
  --surface-muted: #F1F3F3;
  --surface-sunken: #E9ECEC;
  --color-text: #171A1A;
  --color-text-strong: #171A1A;
  --color-muted: #727B79;
  --color-inverse: #FFFFFF;
  --color-line: #DADFDE;
  --color-line-soft: #E5E9E8;
  --color-hover: #F1F3F3;
  --color-overlay: rgb(14 22 20 / 48%);
  --color-sidebar-value: #FFFFFF;
  --gray-0: #FFFFFF;
  --gray-1: #F6F7F7;
  --gray-2: #ECEFEE;
  --gray-3: #DADFDE;
  --gray-4: #BFC7C5;
  --gray-5: #929B99;
  --gray-6: #727B79;
  --gray-7: #4F5755;
  --gray-8: #2E3433;
  --gray-9: #171A1A;
  --chart-grid: #E5E9E8;
  --chart-muted: #C8CECC;
  --cat-1: #008E7B;
  --cat-2: #2A78D6;
  --cat-3: #E87BA4;
  --cat-4: #EDA100;
  --cat-5: #1BAF7A;
  --cat-6: #EB6834;
  --cat-7: #4A3AA7;
  --cat-8: #E34948;
  --status-good: #16794A;
  --status-good-soft: #E6F5EC;
  --status-warning: #8A6200;
  --status-warning-soft: #FFF3D6;
  --status-serious: #A84B0F;
  --status-serious-soft: #FFF0E5;
  --status-critical: #B4232A;
  --status-critical-soft: #FDEBEC;
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(20,30,50,.06), 0 1px 1px rgba(20,30,50,.04);
  --elev-2: 0 2px 8px rgba(20,30,50,.08), 0 1px 2px rgba(20,30,50,.05);
  --elev-3: 0 8px 24px rgba(20,30,50,.10), 0 2px 6px rgba(20,30,50,.06);
  --elev-4: 0 20px 60px rgba(20,30,50,.18), 0 4px 12px rgba(20,30,50,.08);
}

html[data-density="comfortable"] {
  --density-line-height: 1.7;
  --density-panel-padding: 24px;
  --density-card-padding: 16px;
  --density-cell-y: 12px;
  --density-cell-x: 14px;
  --density-row-height: 52px;
  --density-control-height: 42px;
  --density-gap: 16px;
}

html[data-density="compact"] {
  --density-line-height: 1.5;
  --density-panel-padding: 12px;
  --density-card-padding: 10px;
  --density-cell-y: 8px;
  --density-cell-x: 12px;
  --density-row-height: 34px;
  --density-control-height: 36px;
  --density-gap: 8px;
}

:root:not([data-theme])[data-key="teal"],
html[data-theme="light"][data-key="teal"] {
  --key: #006B60;
  --key-strong: #00584F;
  --key-soft: #DDEDEA;
  --key-faint: #EEF7F5;
  --key-neighbor: #27A58F;
  --key-contrast: #FFFFFF;
  --grad-data-1: #F07850;
  --grad-data-2: #D35B9D;
  --grad-data-3: #267F78;
  --grad-action-1: #27A58F;
  --grad-action-2: #00584F;
  --grad-card-1: #159984;
  --grad-card-2: #006B60;
  --grad-card-3: #244A72;
  --seq-100: #EEF7F5;
  --seq-200: #E2F1EE;
  --seq-300: #B6DED7;
  --seq-400: #75BDAF;
  --seq-500: #2B9483;
  --seq-600: #006B60;
  --seq-700: #00584F;
  --div-neg-2: #315DAD;
  --div-neg-1: #DDE7F8;
  --div-mid: #DADFDE;
  --div-pos-1: #B6DED7;
  --div-pos-2: #006B60;
}

:root:not([data-theme])[data-key="indigo"],
html[data-theme="light"][data-key="indigo"] {
  --key: #3157C8;
  --key-strong: #2445A9;
  --key-soft: #E1E7FA;
  --key-faint: #F0F3FC;
  --key-neighbor: #6681E0;
  --key-contrast: #FFFFFF;
  --grad-data-1: #F07850;
  --grad-data-2: #C45EA7;
  --grad-data-3: #3157C8;
  --grad-action-1: #6681E0;
  --grad-action-2: #2445A9;
  --grad-card-1: #6E87E6;
  --grad-card-2: #3157C8;
  --grad-card-3: #42348F;
  --seq-100: #F0F3FC;
  --seq-200: #E6EAF8;
  --seq-300: #C5D0F3;
  --seq-400: #92A8E8;
  --seq-500: #607DD9;
  --seq-600: #3157C8;
  --seq-700: #2445A9;
  --div-neg-2: #7545A8;
  --div-neg-1: #E9E0F5;
  --div-mid: #DADFDE;
  --div-pos-1: #C5D0F3;
  --div-pos-2: #3157C8;
}

:root:not([data-theme])[data-key="violet"],
html[data-theme="light"][data-key="violet"] {
  --key: #7042B8;
  --key-strong: #5A329B;
  --key-soft: #EAE2F6;
  --key-faint: #F6F1FB;
  --key-neighbor: #A066CF;
  --key-contrast: #FFFFFF;
  --grad-data-1: #F07850;
  --grad-data-2: #D35B9D;
  --grad-data-3: #7042B8;
  --grad-action-1: #A066CF;
  --grad-action-2: #5A329B;
  --grad-card-1: #B16FD3;
  --grad-card-2: #7042B8;
  --grad-card-3: #3F347E;
  --seq-100: #F6F1FB;
  --seq-200: #EEE7F7;
  --seq-300: #D7C4EC;
  --seq-400: #B99BDB;
  --seq-500: #966BC8;
  --seq-600: #7042B8;
  --seq-700: #5A329B;
  --div-neg-2: #315DAD;
  --div-neg-1: #DDE7F8;
  --div-mid: #DADFDE;
  --div-pos-1: #D7C4EC;
  --div-pos-2: #7042B8;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #151522;
  --surface-2: #1D1D2B;
  --surface-3: #303044;
  --surface-muted: #262637;
  --surface-sunken: #0F0F1B;
  --color-text: #F3F6F5;
  --color-text-strong: #F3F6F5;
  --color-muted: #9696A8;
  --color-inverse: #0F0F1B;
  --color-line: #373748;
  --color-line-soft: #39394A;
  --color-hover: #262637;
  --color-overlay: rgb(0 0 0 / 66%);
  --color-sidebar-value: #0F0F1B;
  --gray-0: #0F0F1B;
  --gray-1: #1D1D2B;
  --gray-2: #262637;
  --gray-3: #303044;
  --gray-4: #45455A;
  --gray-5: #68687D;
  --gray-6: #9696A8;
  --gray-7: #C7C7D2;
  --gray-8: #E4E4EA;
  --gray-9: #F7F9F8;
  --chart-grid: #39394A;
  --chart-muted: #545469;
  --cat-1: #0FA48D;
  --cat-2: #4A90E8;
  --cat-3: #D6608F;
  --cat-4: #B58800;
  --cat-5: #13A070;
  --cat-6: #E85F28;
  --cat-7: #7B68D9;
  --cat-8: #DE3F3E;
  --status-good: #5DE39A;
  --status-good-soft: #173727;
  --status-warning: #FFD166;
  --status-warning-soft: #3D3115;
  --status-serious: #FF9F66;
  --status-serious-soft: #412719;
  --status-critical: #FF7B86;
  --status-critical-soft: #431E23;
  --key: #39F2D0;
  --key-strong: #75FFE6;
  --key-soft: #153D36;
  --key-faint: #122723;
  --key-neighbor: #82FFE8;
  --key-contrast: #07110F;
  --grad-data-1: #FF966F;
  --grad-data-2: #F17ABB;
  --grad-data-3: #58D6C7;
  --grad-action-1: #75FFE6;
  --grad-action-2: #20A891;
  --grad-card-1: #2AC7AB;
  --grad-card-2: #126E64;
  --grad-card-3: #202B58;
  --seq-100: #122723;
  --seq-200: #15312C;
  --seq-300: #1D5147;
  --seq-400: #267A69;
  --seq-500: #2BB797;
  --seq-600: #39F2D0;
  --seq-700: #75FFE6;
  --div-neg-2: #7FA9FF;
  --div-neg-1: #20375F;
  --div-mid: #3B4442;
  --div-pos-1: #1D5147;
  --div-pos-2: #39F2D0;
  --elev-0: none;
  --elev-1: inset 0 1px 0 rgba(255,255,255,.06);
  --elev-2: inset 0 1px 0 rgba(255,255,255,.06);
  --elev-3: inset 0 1px 0 rgba(255,255,255,.06);
  --elev-4: inset 0 1px 0 rgba(255,255,255,.06);
}

html[data-theme="dark"][data-key="teal"] {
  --key: #39F2D0;
  --key-strong: #75FFE6;
  --key-soft: #153D36;
  --key-faint: #122723;
  --key-neighbor: #82FFE8;
  --key-contrast: #07110F;
  --grad-data-1: #FF966F;
  --grad-data-2: #F17ABB;
  --grad-data-3: #58D6C7;
  --grad-action-1: #75FFE6;
  --grad-action-2: #20A891;
  --grad-card-1: #2AC7AB;
  --grad-card-2: #126E64;
  --grad-card-3: #202B58;
  --seq-100: #122723;
  --seq-200: #15312C;
  --seq-300: #1D5147;
  --seq-400: #267A69;
  --seq-500: #2BB797;
  --seq-600: #39F2D0;
  --seq-700: #75FFE6;
  --div-neg-2: #7FA9FF;
  --div-neg-1: #20375F;
  --div-mid: #3B4442;
  --div-pos-1: #1D5147;
  --div-pos-2: #39F2D0;
}

html[data-theme="dark"][data-key="indigo"] {
  --key: #8EAAFF;
  --key-strong: #B2C4FF;
  --key-soft: #25345F;
  --key-faint: #1A2240;
  --key-neighbor: #BDD0FF;
  --key-contrast: #07110F;
  --grad-data-1: #FF966F;
  --grad-data-2: #E17CC8;
  --grad-data-3: #8EAAFF;
  --grad-action-1: #BDD0FF;
  --grad-action-2: #617FD4;
  --grad-card-1: #819CFA;
  --grad-card-2: #405CA9;
  --grad-card-3: #493B91;
  --seq-100: #1A2240;
  --seq-200: #202A49;
  --seq-300: #2B3D71;
  --seq-400: #3E5D9F;
  --seq-500: #617FD4;
  --seq-600: #8EAAFF;
  --seq-700: #B2C4FF;
  --div-neg-2: #C29BFF;
  --div-neg-1: #39295A;
  --div-mid: #3B4442;
  --div-pos-1: #2B3D71;
  --div-pos-2: #8EAAFF;
}

html[data-theme="dark"][data-key="violet"] {
  --key: #C6A2FF;
  --key-strong: #DAC2FF;
  --key-soft: #392A53;
  --key-faint: #241C34;
  --key-neighbor: #E0C9FF;
  --key-contrast: #07110F;
  --grad-data-1: #FF966F;
  --grad-data-2: #F17ABB;
  --grad-data-3: #C6A2FF;
  --grad-action-1: #E0C9FF;
  --grad-action-2: #966FC6;
  --grad-card-1: #D290EF;
  --grad-card-2: #8056B6;
  --grad-card-3: #3D326E;
  --seq-100: #241C34;
  --seq-200: #2B213D;
  --seq-300: #473365;
  --seq-400: #6D4C96;
  --seq-500: #966FC6;
  --seq-600: #C6A2FF;
  --seq-700: #DAC2FF;
  --div-neg-2: #88A9FF;
  --div-neg-1: #263A68;
  --div-mid: #3B4442;
  --div-pos-1: #473365;
  --div-pos-2: #C6A2FF;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --surface-1: #151522;
    --surface-2: #1D1D2B;
    --surface-3: #303044;
    --surface-muted: #262637;
    --surface-sunken: #0F0F1B;
    --color-text: #F3F6F5;
    --color-text-strong: #F3F6F5;
    --color-muted: #9696A8;
    --color-inverse: #0F0F1B;
    --color-line: #373748;
    --color-line-soft: #39394A;
    --color-hover: #262637;
    --color-overlay: rgb(0 0 0 / 66%);
    --color-sidebar-value: #0F0F1B;
    --gray-0: #0F0F1B;
    --gray-1: #1D1D2B;
    --gray-2: #262637;
    --gray-3: #303044;
    --gray-4: #45455A;
    --gray-5: #68687D;
    --gray-6: #9696A8;
    --gray-7: #C7C7D2;
    --gray-8: #E4E4EA;
    --gray-9: #F7F9F8;
    --chart-grid: #39394A;
    --chart-muted: #545469;
    --cat-1: #0FA48D;
    --cat-2: #4A90E8;
    --cat-3: #D6608F;
    --cat-4: #B58800;
    --cat-5: #13A070;
    --cat-6: #E85F28;
    --cat-7: #7B68D9;
    --cat-8: #DE3F3E;
    --status-good: #5DE39A;
    --status-good-soft: #173727;
    --status-warning: #FFD166;
    --status-warning-soft: #3D3115;
    --status-serious: #FF9F66;
    --status-serious-soft: #412719;
    --status-critical: #FF7B86;
    --status-critical-soft: #431E23;
    --key: #39F2D0;
    --key-strong: #75FFE6;
    --key-soft: #153D36;
    --key-faint: #122723;
    --key-neighbor: #82FFE8;
    --key-contrast: #07110F;
    --grad-data-1: #FF966F;
    --grad-data-2: #F17ABB;
    --grad-data-3: #58D6C7;
    --grad-action-1: #75FFE6;
    --grad-action-2: #20A891;
    --grad-card-1: #2AC7AB;
    --grad-card-2: #126E64;
    --grad-card-3: #202B58;
    --seq-100: #122723;
    --seq-200: #15312C;
    --seq-300: #1D5147;
    --seq-400: #267A69;
    --seq-500: #2BB797;
    --seq-600: #39F2D0;
    --seq-700: #75FFE6;
    --div-neg-2: #7FA9FF;
    --div-neg-1: #20375F;
    --div-mid: #3B4442;
    --div-pos-1: #1D5147;
    --div-pos-2: #39F2D0;
    --elev-0: none;
    --elev-1: inset 0 1px 0 rgba(255,255,255,.06);
    --elev-2: inset 0 1px 0 rgba(255,255,255,.06);
    --elev-3: inset 0 1px 0 rgba(255,255,255,.06);
    --elev-4: inset 0 1px 0 rgba(255,255,255,.06);
  }

  html:not([data-theme])[data-key="indigo"] {
    --key: #8EAAFF;
    --key-strong: #B2C4FF;
    --key-soft: #25345F;
    --key-faint: #1A2240;
    --key-neighbor: #BDD0FF;
    --key-contrast: #07110F;
    --grad-data-1: #FF966F;
    --grad-data-2: #E17CC8;
    --grad-data-3: #8EAAFF;
    --grad-action-1: #BDD0FF;
    --grad-action-2: #617FD4;
    --grad-card-1: #819CFA;
    --grad-card-2: #405CA9;
    --grad-card-3: #493B91;
    --seq-100: #1A2240;
    --seq-200: #202A49;
    --seq-300: #2B3D71;
    --seq-400: #3E5D9F;
    --seq-500: #617FD4;
    --seq-600: #8EAAFF;
    --seq-700: #B2C4FF;
    --div-neg-2: #C29BFF;
    --div-neg-1: #39295A;
    --div-mid: #3B4442;
    --div-pos-1: #2B3D71;
    --div-pos-2: #8EAAFF;
  }

  html:not([data-theme])[data-key="violet"] {
    --key: #C6A2FF;
    --key-strong: #DAC2FF;
    --key-soft: #392A53;
    --key-faint: #241C34;
    --key-neighbor: #E0C9FF;
    --key-contrast: #07110F;
    --grad-data-1: #FF966F;
    --grad-data-2: #F17ABB;
    --grad-data-3: #C6A2FF;
    --grad-action-1: #E0C9FF;
    --grad-action-2: #966FC6;
    --grad-card-1: #D290EF;
    --grad-card-2: #8056B6;
    --grad-card-3: #3D326E;
    --seq-100: #241C34;
    --seq-200: #2B213D;
    --seq-300: #473365;
    --seq-400: #6D4C96;
    --seq-500: #966FC6;
    --seq-600: #C6A2FF;
    --seq-700: #DAC2FF;
    --div-neg-2: #88A9FF;
    --div-neg-1: #263A68;
    --div-mid: #3B4442;
    --div-pos-1: #473365;
    --div-pos-2: #C6A2FF;
  }

  html:not([data-theme]) .button.primary {
    border-color: var(--key);
    background: var(--grad-action);
    color: var(--key-contrast);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  }

  html:not([data-theme]) .button.primary:hover {
    border-color: var(--key-strong);
    filter: brightness(1.06);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--color-bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--density-line-height);
  letter-spacing: 0.01em;
  transition: background var(--transition-mid) var(--ease), color var(--transition-mid) var(--ease);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--color-accent);
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--key) 72%, transparent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

[hidden] {
  display: none !important;
}

.auth-gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: var(--color-bg);
}

.auth-card {
  width: min(calc(var(--sidebar-width) + var(--sidebar-width)), 100%);
  border: var(--border);
  border-radius: var(--radius-xl);
  background: var(--color-panel);
  box-shadow: var(--elev-1);
  overflow: hidden;
  transition: transform var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease), background var(--transition-fast) var(--ease);
}

.auth-card:hover {
  transform: translateY(-1px);
  background: var(--surface-3);
  box-shadow: var(--elev-2);
}

.auth-card-head {
  padding: var(--space-6);
  border-bottom: var(--border);
}

.auth-card-head h1 {
  margin: var(--space-2) 0 var(--space-1);
  color: var(--color-text-strong);
  font-size: var(--text-title);
  line-height: 1.15;
}

.auth-card-head p {
  margin: 0;
  color: var(--color-muted);
}

.auth-form {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
}

.auth-form .field {
  margin-bottom: 0;
}

.auth-error {
  margin: 0;
}

.auth-submit {
  width: 100%;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: var(--color-sidebar);
  border-right: var(--border);
}

.brand {
  padding: 8px 10px 20px;
  border-bottom: var(--border);
}

.brand strong {
  display: block;
  color: var(--color-text-strong);
  font-size: var(--text-16);
  letter-spacing: 0.04em;
}

.brand small {
  display: block;
  margin-top: 6px;
  color: var(--color-accent);
  font: var(--text-12) var(--font-mono);
  letter-spacing: 0.14em;
}

.nav {
  display: grid;
  gap: 3px;
  padding-top: 14px;
}

.nav-section {
  display: grid;
  gap: 3px;
}

.nav-section + .nav-section {
  margin-top: var(--space-3);
}

.nav-section-toggle {
  width: 100%;
  appearance: none;
  display: grid;
  grid-template-columns: var(--space-3) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-1);
  border: 0;
  padding: var(--space-1) var(--space-2);
  background: transparent;
  color: var(--color-muted);
  text-align: left;
  font: 700 var(--text-sm) var(--font-sans);
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-section-toggle:hover {
  background: var(--color-hover);
  color: var(--color-text-strong);
}

.nav-section-indicator {
  font-family: var(--font-mono);
  line-height: 1;
}

.nav-section-label {
  min-width: 0;
}

.nav-section-items {
  display: grid;
  gap: 3px;
}

.nav-button {
  width: 100%;
  appearance: none;
  display: grid;
  grid-template-columns: 22px 26px minmax(0, 1fr);
  align-items: center;
  border: 0;
  border-right: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 9px 10px;
  background: transparent;
  color: var(--color-muted);
  text-align: left;
  font: 650 var(--text-13) var(--font-sans);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-button:hover {
  background: var(--color-hover);
  color: var(--color-text-strong);
}

.nav-button.active {
  border-right-color: var(--key);
  background: var(--key-soft);
  color: var(--key-strong);
  box-shadow: var(--elev-1);
}

.nav-icon {
  font-family: var(--font-sans);
  font-size: var(--text-13);
  line-height: 1;
}

.nav-index {
  color: inherit;
  font: var(--text-11) var(--font-mono);
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-status {
  margin-top: auto;
  border: var(--border);
  border-radius: var(--radius-md);
  padding: 11px;
  color: var(--color-muted);
  font: var(--text-12)/1.6 var(--font-mono);
}

.sidebar-status b {
  color: var(--color-accent);
  font-weight: 500;
}

.sidebar-user {
  display: grid;
  gap: var(--space-1);
  margin-top: auto;
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-panel);
  box-shadow: var(--elev-1);
}

.sidebar-user strong {
  overflow: hidden;
  color: var(--color-text-strong);
  font-size: var(--text-base);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user span {
  color: var(--color-muted);
  font: var(--text-sm)/1.5 var(--font-mono);
}

.sidebar-user .button {
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2);
}

.sidebar-user + .sidebar-status {
  margin-top: var(--space-2);
}

.main {
  min-width: 0;
}

.page-head {
  min-height: var(--page-head-height);
  padding: 24px 30px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
  border-bottom: var(--border);
  background: var(--color-bg);
}

.page-head-copy {
  min-width: 0;
}

.eyebrow {
  color: var(--color-accent);
  font: 750 var(--text-12) var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page-head h1 {
  margin: 8px 0 4px;
  font-size: var(--text-title);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.page-head p {
  max-width: 650px;
  margin: 0;
  color: var(--color-muted);
}

.page-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.content {
  padding: 18px 30px 36px;
}

.page-region {
  min-height: calc(100vh - var(--page-head-height));
}

.page-banner-host:empty {
  display: none;
}

.banner {
  position: relative;
  margin-bottom: var(--space-3);
  border: 1px solid currentColor;
  border-radius: var(--radius-md);
  padding: 11px 42px 11px 13px;
  background: var(--status-serious-soft);
  color: var(--status-serious);
  font-size: var(--text-base);
}

.banner strong {
  font: 700 var(--text-12) var(--font-sans);
  letter-spacing: 0.08em;
}

.banner-close {
  position: absolute;
  top: 4px;
  right: 5px;
}

.panel {
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-panel);
  box-shadow: var(--elev-1);
  transition: transform var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease), background var(--transition-fast) var(--ease);
}

.panel:hover,
.panel:focus-within {
  transform: translateY(-1px);
  background: var(--surface-3);
  box-shadow: var(--elev-2);
}

/* shell.js injects structure only; theme.css owns its visual elevation. */
.shell-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  overflow: hidden;
  transition: transform var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease), background var(--transition-fast) var(--ease);
}

.shell-card:hover,
.shell-card:focus-within {
  transform: translateY(-1px);
  background: var(--surface-3);
  box-shadow: var(--elev-2);
}

.shell-toolbar,
.shell-frame,
.shell-status {
  border-radius: var(--radius-lg);
}

.page-region .shell-card-body {
  padding: var(--density-panel-padding);
}

.panel-header {
  min-height: 43px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: var(--border);
}

.panel-header h2,
.section-bar h2 {
  margin: 0;
  font: 700 var(--text-13) var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-body {
  padding: var(--density-panel-padding);
}

.section-bar {
  margin: 20px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.section-bar small,
.mono-meta {
  color: var(--color-muted);
  font: var(--text-12) var(--font-mono);
}

.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--density-gap);
  margin-bottom: 18px;
}

.kpi {
  min-height: 94px;
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--density-card-padding);
  background: var(--color-panel);
  box-shadow: var(--elev-1);
  transition: transform var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease), background var(--transition-fast) var(--ease);
}

.kpi:hover,
.kpi:focus-within {
  transform: translateY(-1px);
  background: var(--surface-3);
  box-shadow: var(--elev-2);
}

.kpi .label {
  color: var(--color-muted);
  font-size: var(--text-12);
}

.kpi .value {
  margin-top: 17px;
  color: var(--color-text-strong);
  font: var(--text-36)/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.kpi .delta {
  float: right;
  margin-top: 9px;
  color: var(--status-good);
  font: var(--text-12) var(--font-mono);
}

.kpi.warn .value,
.kpi.warn .delta {
  color: var(--status-serious);
}

.data-table,
.table-wrap {
  overflow: auto;
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-panel);
  box-shadow: var(--elev-0);
}

.data-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  min-height: var(--density-row-height);
  padding: var(--density-cell-y) var(--density-cell-x);
  border-bottom: 1px solid var(--color-line-soft);
}

.data-row:last-child {
  border-bottom: 0;
}

.data-row:hover {
  background: var(--color-active);
}

.data-row strong {
  min-width: 0;
  font-size: var(--text-13);
}

.data-row > span,
.data-row > time {
  color: var(--color-muted);
  font: var(--text-12) var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.table th,
.table td {
  min-height: var(--density-row-height);
  padding: var(--density-cell-y) var(--density-cell-x);
  border-bottom: 1px solid var(--color-line-soft);
  text-align: left;
  vertical-align: middle;
}

.table th {
  background: var(--color-panel-muted);
  color: var(--color-muted);
  font: 700 var(--text-12) var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover td {
  background: var(--color-active);
}

.numeric,
.kpi .value,
.kpi .delta,
.data-row > span,
.data-row > time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  width: fit-content;
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  padding: 4px 9px;
  background: var(--key-soft);
  color: var(--color-accent);
  font: 700 var(--text-12) var(--font-sans);
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}

.badge.warning,
.role-CMO {
  background: var(--status-warning-soft);
  color: var(--status-warning);
}

.badge.danger,
.role-CEO {
  background: var(--status-critical-soft);
  color: var(--status-critical);
}

.badge.muted {
  background: var(--color-panel-muted);
  color: var(--color-muted);
}

.badge.good {
  background: var(--status-good-soft);
  color: var(--status-good);
}

.badge.serious {
  background: var(--status-serious-soft);
  color: var(--status-serious);
}

.badge.critical {
  background: var(--status-critical-soft);
  color: var(--status-critical);
}

.role-CTO,
.role-CFO,
.role-COO {
  background: var(--key-soft);
  color: var(--color-accent);
}

.button {
  min-height: var(--density-control-height);
  appearance: none;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 9px 14px;
  background: var(--color-panel-muted);
  color: var(--color-text);
  font: 700 var(--text-13) var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform 100ms var(--ease), color var(--transition-fast) var(--ease), background var(--transition-fast) var(--ease), border-color var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease);
}

.button:hover {
  border-color: var(--gray-4);
  background: var(--surface-sunken);
}

.button:active {
  transform: scale(.98);
}

.button.primary {
  border-color: var(--gray-9);
  background: var(--gray-9);
  color: var(--gray-0);
}

.button.primary:hover {
  border-color: var(--gray-8);
  background: var(--gray-8);
}

html[data-theme="dark"] .button.primary {
  border-color: var(--key);
  background: var(--grad-action);
  color: var(--key-contrast);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

html[data-theme="dark"] .button.primary:hover {
  border-color: var(--key-strong);
  filter: brightness(1.06);
}

.button.ghost {
  border-color: var(--color-line);
  background: var(--color-panel);
  color: var(--color-text);
}

.button.ghost:hover {
  border-color: var(--gray-4);
  background: var(--color-panel-muted);
  color: var(--color-text-strong);
}

.button.danger {
  border-color: var(--color-danger);
  background: transparent;
  color: var(--color-danger);
}

.button.danger:hover {
  background: var(--color-danger);
  color: var(--gray-0);
}

.button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.icon-button {
  width: 34px;
  height: 34px;
  appearance: none;
  border: 0;
  border-radius: var(--radius-md);
  padding: 0;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: var(--color-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.icon-button:hover {
  color: var(--color-text);
  background: var(--color-hover);
}

.toolbar {
  display: flex;
  gap: var(--density-gap);
  align-items: center;
  margin-bottom: var(--space-3);
}

.toolbar .input {
  max-width: 360px;
}

.toolbar .select {
  width: auto;
  min-width: 150px;
}

.result-count {
  margin-left: auto;
  color: var(--color-muted);
  font: var(--text-12) var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--density-control-height);
  border: 1px solid var(--gray-4);
  border-radius: var(--radius-md);
  padding: 10px 11px;
  background: var(--color-panel);
  color: var(--color-text);
  outline: none;
  font: var(--text-13) var(--font-sans);
  transition: border-color var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease), background var(--transition-fast) var(--ease);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--color-muted);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-muted);
}

.textarea {
  min-height: 90px;
  resize: vertical;
}

.form {
  padding: 18px;
}

.field {
  display: grid;
  gap: var(--space-2);
  margin-bottom: 14px;
}

.field label,
.field-label {
  color: var(--color-muted);
  font: 650 var(--text-13) var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field-hint,
.form-error {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-12);
}

.form-error {
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  padding: 9px 10px;
  background: var(--status-critical-soft);
  color: var(--color-danger);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: 6px;
}

.modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: var(--color-overlay);
}

.modal-wrap.open {
  display: flex;
}

.modal {
  width: min(510px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border: var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-3);
  box-shadow: var(--shadow-modal);
  animation: modal-in var(--transition-mid) cubic-bezier(.4, 0, 0, 1);
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(.97) translateY(8px);
  }
}

.modal-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: var(--border);
  background: var(--surface-3);
}

.modal-head h2 {
  margin: 0;
  font: 700 var(--text-18) var(--font-sans);
}

.modal-body {
  min-width: 0;
}

body.modal-open {
  overflow: hidden;
}

.toast-region {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  display: grid;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  max-width: min(390px, calc(100vw - 32px));
  border: 1px solid color-mix(in srgb, var(--key) 72%, var(--color-line));
  border-radius: var(--radius-md);
  padding: 12px 16px;
  transform: translateY(24px);
  opacity: 0;
  background: var(--color-accent);
  color: var(--key-contrast);
  font: 700 var(--text-13)/1.5 var(--font-sans);
  box-shadow: var(--elev-3);
  transition: opacity var(--transition-mid) var(--ease), transform var(--transition-mid) var(--ease);
}

.toast.show {
  transform: none;
  opacity: 1;
}

.empty-state,
.placeholder {
  padding: 70px 30px;
}

.empty-state-box,
.placeholder-box {
  max-width: 680px;
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 34px;
  background: var(--color-panel);
  box-shadow: var(--elev-1);
  transition: transform var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease), background var(--transition-fast) var(--ease);
}

.empty-state-box:hover,
.placeholder-box:hover {
  transform: translateY(-1px);
  background: var(--surface-3);
  box-shadow: var(--elev-2);
}

.empty-state h2,
.placeholder h2 {
  margin: 0 0 12px;
  font: 700 var(--text-28)/1.35 var(--font-sans);
}

.empty-state p,
.placeholder p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.8;
}

.empty-state code,
.placeholder code {
  color: var(--color-accent);
}

.empty {
  padding: 28px 10px;
  color: var(--color-muted);
  text-align: center;
  font: var(--text-12) var(--font-mono);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.stack {
  display: grid;
  gap: var(--space-3);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: relative;
    height: auto;
    padding: 12px;
    overflow: visible;
  }

  .brand {
    padding: 6px 8px;
    border: 0;
  }

  .sidebar-status {
    display: none;
  }

  .sidebar-user {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    margin-top: var(--space-2);
    padding: var(--space-2);
  }

  .sidebar-user .button {
    width: auto;
    margin-top: 0;
  }

  .nav {
    display: flex;
    overflow-x: auto;
    border-top: var(--border);
    padding-top: 8px;
    scrollbar-width: thin;
  }

  .nav-section {
    flex: 0 0 auto;
    display: flex;
  }

  .nav-section + .nav-section {
    margin-top: 0;
    margin-left: var(--space-2);
  }

  .nav-section-toggle {
    width: auto;
    flex: 0 0 auto;
    padding: var(--space-2);
  }

  .nav-section-items {
    flex: 0 0 auto;
    display: flex;
  }

  .nav-button {
    width: auto;
    flex: 0 0 auto;
    grid-template-columns: 18px 22px auto;
    border-right: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }

  .nav-button.active {
    border-right: 0;
    border-bottom-color: var(--color-accent);
  }

  .page-head {
    min-height: auto;
    align-items: flex-start;
  }

  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .auth-gate {
    padding: var(--space-4);
  }

  .auth-card-head,
  .auth-form {
    padding: var(--space-4);
  }

  .sidebar-user {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .sidebar-user .button {
    width: 100%;
    grid-column: 1 / -1;
  }

  .page-head,
  .content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .page-head {
    display: block;
  }

  .page-actions {
    margin-top: 18px;
  }

  .kpis,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar .input,
  .toolbar .select {
    width: 100%;
    max-width: none;
  }

  .result-count {
    margin-left: 0;
  }

  .empty-state,
  .placeholder {
    padding: 38px 0;
  }

  .empty-state-box,
  .placeholder-box {
    padding: 24px;
  }

  .toast-region {
    right: 16px;
    bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .auth-card:hover,
  .panel:hover,
  .panel:focus-within,
  .shell-card:hover,
  .shell-card:focus-within,
  .kpi:hover,
  .kpi:focus-within,
  .empty-state-box:hover,
  .placeholder-box:hover {
    transform: none;
  }
}