/*
 * Colour themes. Each one only overrides tokens from tokens.css, so layout
 * and components stay identical. Picked from the palette button in the top
 * bar; stored in localStorage and applied as <html data-theme="…">.
 * The default theme (Treaptă) is tokens.css itself.
 */

/* Original — the navy and gold of the first prototype, dark sidebar, Inter. */
[data-theme='original'] {
  --paper: #F5F7FB;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --line: #E2E8F0;
  --line-strong: #CBD5E1;
  --ink: #071A36;
  --ink-2: #334155;
  --muted: #64748B;
  --primary: #0C2853;
  --primary-hover: #0A2348;
  --primary-soft: #EEF3FA;
  --primary-ink: #0C2853;
  --accent: #F5C84C;
  --accent-hover: #FFDA69;
  --accent-edge: #D3A019;
  --on-accent: #071A36;
  --mint: #9DB4D6;
  --sage: #5F7FAE;
  --pipe-1: #9DB4D6;
  --dark: #0A2348;
  --dark-hover: #0C2853;
  --on-dark-muted: #BFD0EA;
  --on-dark-faint: #93A8C8;
  --info: #1D4ED8;
  --info-soft: #EFF6FF;
  --warn: #B45309;
  --warn-soft: #FFFBEB;
  --warn-bright: #E8A51B;
  --danger: #B91C1C;
  --danger-soft: #FEF2F2;
  --danger-line: #FECACA;
  --success: #047857;
  --success-soft: #ECFDF5;
  --neutral: #475569;
  --neutral-soft: #F1F5F9;
  --placeholder: #94A3B8;
  --surface-tint: #F8FAFC;
  --backdrop: rgba(7, 26, 54, 0.5);
  --topbar-bg: rgba(255, 255, 255, 0.9);
  --ring: 0 0 0 3px rgba(12, 77, 145, 0.3);

  --sidebar-bg: #071A36;
  --sidebar-line: #071A36;
  --nav-fg: rgba(239, 246, 255, 0.75);
  --nav-hover-bg: rgba(255, 255, 255, 0.1);
  --nav-hover-fg: #FFFFFF;
  --nav-active-bg: #F5C84C;
  --nav-active-fg: #071A36;
  --nav-active-icon: #071A36;
  --nav-label: rgba(219, 234, 254, 0.5);
  --brand-fg: #FFFFFF;
  --brand-em: #F5C84C;
  --me-bg: rgba(255, 255, 255, 0.05);
  --me-fg: #FFFFFF;
  --me-sub: rgba(219, 234, 254, 0.55);

  --mark-bg: #F5C84C;
  --mark-1: #5F7FAE;
  --mark-2: #0C4D91;
  --mark-3: #071A36;

  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
[data-theme='original'] h1, [data-theme='original'] h2 { font-weight: 800; letter-spacing: -0.025em; }

/* Ocean — deep blue with a coral accent. */
[data-theme='ocean'] {
  --paper: #F3F6F8;
  --surface-2: #EAF0F4;
  --line: #DCE4EA;
  --line-strong: #C4D0D9;
  --ink: #0B1F33;
  --ink-2: #34495C;
  --muted: #5A6B7B;
  --primary: #1F5FAD;
  --primary-hover: #174C8C;
  --primary-soft: #E6EFFA;
  --primary-ink: #174C8C;
  --accent: #FF8A65;
  --accent-hover: #FF7A50;
  --accent-edge: #E46B45;
  --on-accent: #0B1F33;
  --mint: #9CC3E6;
  --sage: #5D93C5;
  --pipe-1: #C7B8F5;
  --dark-hover: #15304A;
  --on-dark-muted: #C3D3E2;
  --on-dark-faint: #9DB1C4;
  --info: #6247C9;
  --info-soft: #F0ECFF;
  --success: #17775A;
  --success-soft: #E3F4EC;
  --neutral: #4B5B69;
  --neutral-soft: #EDF1F4;
  --placeholder: #8596A5;
  --surface-tint: #F7FAFC;
  --backdrop: rgba(11, 31, 51, 0.45);
  --topbar-bg: rgba(243, 246, 248, 0.86);
  --ring: 0 0 0 3px rgba(31, 95, 173, 0.28);

  --mark-bg: #0B1F33;
  --mark-1: #5D93C5;
  --mark-2: #9CC3E6;
  --mark-3: #FF8A65;
}

/* Teracotă — warm clay and sand, serif titles. */
[data-theme='teracota'] {
  --paper: #F7F3EE;
  --surface-2: #F1EBE3;
  --line: #E7DED3;
  --line-strong: #D3C6B7;
  --ink: #2A1D16;
  --ink-2: #52423A;
  --muted: #76655B;
  --primary: #A4472A;
  --primary-hover: #8A3A21;
  --primary-soft: #F6E7E0;
  --primary-ink: #8A3A21;
  --accent: #E9C46A;
  --accent-hover: #E2B84F;
  --accent-edge: #C9A445;
  --on-accent: #2A1D16;
  --mint: #E2C2A9;
  --sage: #C28B6E;
  --pipe-1: #B9C7A8;
  --dark-hover: #3B2A21;
  --on-dark-muted: #E3D3C7;
  --on-dark-faint: #C2AFA1;
  --success: #2F6B4F;
  --success-soft: #E6F2EB;
  --neutral: #5E5049;
  --neutral-soft: #F1EBE3;
  --placeholder: #A39286;
  --surface-tint: #FBF8F4;
  --backdrop: rgba(42, 29, 22, 0.45);
  --topbar-bg: rgba(247, 243, 238, 0.86);
  --ring: 0 0 0 3px rgba(164, 71, 42, 0.28);

  --mark-bg: #2A1D16;
  --mark-1: #C28B6E;
  --mark-2: #E2C2A9;
  --mark-3: #E9C46A;

  --font-display: 'Fraunces', Georgia, serif;
}
[data-theme='teracota'] h1, [data-theme='teracota'] h2 { font-weight: 600; letter-spacing: -0.01em; }

/* Noapte — dark mode. */
[data-theme='noapte'] {
  color-scheme: dark;
  --paper: #0F1714;
  --surface: #16211D;
  --surface-2: #1D2A25;
  --line: #26352F;
  --line-strong: #34463F;
  --ink: #E7EEEA;
  --ink-2: #C1CEC8;
  --muted: #8FA19A;
  --primary: #3CC2A0;
  --primary-hover: #5AD3B4;
  --primary-soft: #16352D;
  --primary-ink: #6FE0C3;
  --on-primary: #0B1411;
  --accent: #D9F26B;
  --accent-hover: #E4F78A;
  --accent-edge: #B9D24A;
  --on-accent: #0F1714;
  --mint: #7FB8A6;
  --sage: #4E8A78;
  --dark: #22312B;
  --dark-hover: #2A3B34;
  --on-dark: #F1F6F3;
  --on-dark-muted: #B9C8C1;
  --on-dark-faint: #93A69E;
  --info: #8FB0FF;
  --info-soft: #1A2440;
  --warn: #F2B65A;
  --warn-soft: #33270F;
  --warn-bright: #F2B65A;
  --danger: #FF8A80;
  --danger-soft: #3A1C1A;
  --danger-line: #5A2A26;
  --success: #6FE0C3;
  --success-soft: #16352D;
  --neutral: #B5C3BD;
  --neutral-soft: #23302B;
  --placeholder: #6F817A;
  --surface-tint: #1A2621;
  --backdrop: rgba(0, 0, 0, 0.6);
  --topbar-bg: rgba(15, 23, 20, 0.86);
  --glass: rgba(22, 33, 29, 0.95);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 64px -24px rgba(0, 0, 0, 0.75);
  --ring: 0 0 0 3px rgba(60, 194, 160, 0.35);

  --mark-bg: #22312B;
  --mark-1: #4E8A78;
  --mark-2: #7FB8A6;
  --mark-3: #D9F26B;
}
[data-theme='noapte'] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C1CEC8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Lavandă — soft violet light, Outfit + DM Sans. */
[data-theme='lavanda'] {
  --paper: #F6F3FB;
  --page-bg: radial-gradient(900px 600px at 100% 0%, rgba(109, 63, 192, 0.12), transparent 60%), radial-gradient(800px 560px at 0% 100%, rgba(255, 140, 186, 0.16), transparent 60%), #F6F3FB;
  --surface-2: #F0EBF8;
  --line: #E6DFF2;
  --line-strong: #D1C6E6;
  --ink: #22183A;
  --ink-2: #4A3F63;
  --muted: #6E6488;
  --primary: #6D3FC0;
  --primary-hover: #5A31A3;
  --primary-soft: #EFE7FB;
  --primary-ink: #5A31A3;
  --accent: #FFB4D0;
  --accent-hover: #FFA1C4;
  --accent-edge: #E98AB0;
  --on-accent: #22183A;
  --mint: #CBB6F2;
  --sage: #9C7FD9;
  --pipe-1: #FFD5A8;
  --dark-hover: #33264F;
  --on-dark-muted: #D6CCE8;
  --on-dark-faint: #ABA0C4;
  --success: #1F7A5A;
  --success-soft: #E4F4EC;
  --neutral: #5A5170;
  --neutral-soft: #F0EBF8;
  --placeholder: #9C93B3;
  --surface-tint: #FAF8FD;
  --backdrop: rgba(34, 24, 58, 0.45);
  --topbar-bg: rgba(246, 243, 251, 0.8);
  --ring: 0 0 0 3px rgba(109, 63, 192, 0.28);
  --r-xl: 24px; --r-lg: 18px;
  --mark-bg: #22183A; --mark-1: #9C7FD9; --mark-2: #CBB6F2; --mark-3: #FFB4D0;
  --font-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
}

/* Grafit — monochrome with an orange accent, dot grid, dark sidebar, Space Grotesk + IBM Plex Sans. */
[data-theme='grafit'] {
  --paper: #F2F2F0;
  --page-bg: radial-gradient(rgba(22, 22, 22, 0.13) 1px, transparent 1.2px) 0 0 / 18px 18px, #F2F2F0;
  --surface-2: #EDEDEA;
  --line: #E2E2DE;
  --line-strong: #C9C9C3;
  --ink: #161616;
  --ink-2: #3D3D3A;
  --muted: #64645F;
  --primary: #161616;
  --primary-hover: #000000;
  --primary-soft: #ECECE8;
  --primary-ink: #161616;
  --accent: #FF5A1F;
  --accent-hover: #F04A0F;
  --accent-edge: #D9470F;
  --on-accent: #FFFFFF;
  --mint: #BDBDB6;
  --sage: #8A8A83;
  --pipe-1: #FFB08F;
  --dark: #161616;
  --dark-hover: #262626;
  --on-dark-muted: #CFCFC9;
  --on-dark-faint: #A3A39D;
  --info: #2950C8;
  --success: #1E7A4C;
  --success-soft: #E4F2EA;
  --neutral: #4D4D49;
  --neutral-soft: #ECECE8;
  --placeholder: #9A9A94;
  --surface-tint: #FAFAF8;
  --backdrop: rgba(10, 10, 10, 0.5);
  --topbar-bg: rgba(242, 242, 240, 0.86);
  --ring: 0 0 0 3px rgba(255, 90, 31, 0.35);
  --r-md: 8px; --r-lg: 10px; --r-xl: 12px;
  --sidebar-bg: #161616; --sidebar-line: #161616;
  --nav-fg: rgba(255, 255, 255, 0.7); --nav-hover-bg: rgba(255, 255, 255, 0.08); --nav-hover-fg: #FFFFFF;
  --nav-active-bg: #FF5A1F; --nav-active-fg: #FFFFFF; --nav-active-icon: #FFFFFF;
  --nav-label: rgba(255, 255, 255, 0.45); --brand-fg: #FFFFFF; --brand-em: #FF5A1F;
  --me-bg: rgba(255, 255, 255, 0.06); --me-fg: #FFFFFF; --me-sub: rgba(255, 255, 255, 0.55);
  --mark-bg: #FF5A1F; --mark-1: #FFD3C2; --mark-2: #FFFFFF; --mark-3: #161616;
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
}
[data-theme='grafit'] .pill { border-radius: 6px; }

/* Pădure — forest green and cream, dark green sidebar, Playfair Display + Source Sans 3. */
[data-theme='padure'] {
  --paper: #F4F1E8;
  --page-bg: radial-gradient(1200px 700px at 100% 0%, rgba(232, 176, 74, 0.14), transparent 60%), #F4F1E8;
  --surface-2: #EEEADD;
  --line: #E3DDCC;
  --line-strong: #CFC6AF;
  --ink: #1C2A20;
  --ink-2: #3F4D42;
  --muted: #66705F;
  --primary: #2F5D3A;
  --primary-hover: #244A2E;
  --primary-soft: #E5EEE4;
  --primary-ink: #244A2E;
  --accent: #E8B04A;
  --accent-hover: #E0A232;
  --accent-edge: #C48E2C;
  --on-accent: #1C2A20;
  --mint: #A9C4A2;
  --sage: #6E9468;
  --pipe-1: #D9C49B;
  --dark: #1F3A28;
  --dark-hover: #284A33;
  --on-dark-muted: #CFDCCB;
  --on-dark-faint: #A5B7A0;
  --success: #2F6B3F;
  --success-soft: #E5EEE4;
  --neutral: #575F51;
  --neutral-soft: #EEEADD;
  --placeholder: #9C9A86;
  --surface-tint: #FAF8F1;
  --backdrop: rgba(28, 42, 32, 0.45);
  --topbar-bg: rgba(244, 241, 232, 0.86);
  --ring: 0 0 0 3px rgba(47, 93, 58, 0.3);
  --sidebar-bg: #1F3A28; --sidebar-line: #1F3A28;
  --nav-fg: rgba(244, 241, 232, 0.75); --nav-hover-bg: rgba(255, 255, 255, 0.08); --nav-hover-fg: #FFFFFF;
  --nav-active-bg: #F4F1E8; --nav-active-fg: #1F3A28; --nav-active-icon: #2F5D3A;
  --nav-label: rgba(244, 241, 232, 0.5); --brand-fg: #F4F1E8; --brand-em: #E8B04A;
  --me-bg: rgba(255, 255, 255, 0.06); --me-fg: #F4F1E8; --me-sub: rgba(244, 241, 232, 0.6);
  --mark-bg: #E8B04A; --mark-1: #6E9468; --mark-2: #2F5D3A; --mark-3: #1C2A20;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-ui: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
}
[data-theme='padure'] h1, [data-theme='padure'] h2 { font-weight: 700; letter-spacing: -0.01em; }

/* Corporativ — crisp white and blue, Plus Jakarta Sans. */
[data-theme='corporativ'] {
  --paper: #F7F9FC;
  --page-bg: linear-gradient(180deg, #E8F0FE 0, #F7F9FC 460px), #F7F9FC;
  --surface-2: #F1F5F9;
  --line: #E2E8F0;
  --line-strong: #CBD5E1;
  --ink: #0F172A;
  --ink-2: #334155;
  --muted: #64748B;
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --primary-soft: #EAF1FF;
  --primary-ink: #1D4ED8;
  --accent: #BFDBFE;
  --accent-hover: #A9CCFD;
  --accent-edge: #93C5FD;
  --on-accent: #0F172A;
  --mint: #93C5FD;
  --sage: #60A5FA;
  --pipe-1: #C4B5FD;
  --dark: #0F172A;
  --dark-hover: #1E293B;
  --on-dark-muted: #CBD5E1;
  --on-dark-faint: #94A3B8;
  --info: #7C3AED;
  --info-soft: #F3EEFF;
  --success: #047857;
  --success-soft: #ECFDF5;
  --neutral: #475569;
  --neutral-soft: #F1F5F9;
  --placeholder: #94A3B8;
  --surface-tint: #F8FAFC;
  --backdrop: rgba(15, 23, 42, 0.45);
  --topbar-bg: rgba(255, 255, 255, 0.82);
  --ring: 0 0 0 3px rgba(37, 99, 235, 0.3);
  --nav-active-bg: #EAF1FF; --nav-active-fg: #1D4ED8; --nav-active-icon: #2563EB;
  --mark-bg: #2563EB; --mark-1: #93C5FD; --mark-2: #DBEAFE; --mark-3: #FFFFFF;
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}
[data-theme='corporativ'] .nav__item[aria-current='page'] .count { background: #2563EB; color: #FFFFFF; }

/* Soare — warm yellow paper with fine diagonal lines, orange, Sora + Nunito Sans. */
[data-theme='soare'] {
  --paper: #FFF8E7;
  --page-bg: repeating-linear-gradient(135deg, rgba(234, 88, 12, 0.05) 0 2px, transparent 2px 16px), #FFF8E7;
  --surface-2: #FFF1D1;
  --line: #F2E3BF;
  --line-strong: #E2CD98;
  --ink: #1C1917;
  --ink-2: #44403C;
  --muted: #6B625A;
  --primary: #C2410C;
  --primary-hover: #9A3412;
  --primary-soft: #FFEDD5;
  --primary-ink: #9A3412;
  --accent: #FDE047;
  --accent-hover: #FACC15;
  --accent-edge: #EAB308;
  --on-accent: #1C1917;
  --mint: #FCD34D;
  --sage: #F59E0B;
  --pipe-1: #FDBA74;
  --dark: #1C1917;
  --dark-hover: #292524;
  --on-dark-muted: #E7E1D8;
  --on-dark-faint: #B8AFA4;
  --success: #15803D;
  --success-soft: #E8F6EC;
  --neutral: #57534E;
  --neutral-soft: #FFF1D1;
  --placeholder: #A8A29E;
  --surface-tint: #FFFCF4;
  --backdrop: rgba(28, 25, 23, 0.45);
  --topbar-bg: rgba(255, 248, 231, 0.86);
  --ring: 0 0 0 3px rgba(194, 65, 12, 0.3);
  --r-md: 14px; --r-lg: 18px; --r-xl: 26px;
  --mark-bg: #1C1917; --mark-1: #F59E0B; --mark-2: #FCD34D; --mark-3: #FDE047;
  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
}

/* Minimal — editorial black and white with a rose accent, Instrument Serif + Inter Tight. */
[data-theme='minimal'] {
  --paper: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F5F5F4;
  --line: #E7E5E4;
  --line-strong: #D6D3D1;
  --ink: #111111;
  --ink-2: #3F3F3F;
  --muted: #6B6B6B;
  --primary: #111111;
  --primary-hover: #000000;
  --primary-soft: #F5F5F4;
  --primary-ink: #111111;
  --accent: #E11D48;
  --accent-hover: #BE123C;
  --accent-edge: #BE123C;
  --on-accent: #FFFFFF;
  --mint: #D6D3D1;
  --sage: #A8A29E;
  --pipe-1: #FDA4AF;
  --dark: #111111;
  --dark-hover: #262626;
  --on-dark-muted: #D4D4D4;
  --on-dark-faint: #A3A3A3;
  --success: #166534;
  --success-soft: #EEF7F0;
  --neutral: #525252;
  --neutral-soft: #F5F5F4;
  --placeholder: #A3A3A3;
  --surface-tint: #FAFAF9;
  --backdrop: rgba(0, 0, 0, 0.5);
  --topbar-bg: rgba(255, 255, 255, 0.9);
  --ring: 0 0 0 3px rgba(225, 29, 72, 0.3);
  --r-md: 6px; --r-lg: 8px; --r-xl: 10px;
  --mark-bg: #111111; --mark-1: #737373; --mark-2: #D4D4D4; --mark-3: #E11D48;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-ui: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
}
[data-theme='minimal'] h1, [data-theme='minimal'] h2, [data-theme='minimal'] h3,
[data-theme='minimal'] .kpi__value, [data-theme='minimal'] .card__title { font-weight: 400; letter-spacing: -0.01em; }
[data-theme='minimal'] h1 { font-size: 44px; }
[data-theme='minimal'] h2 { font-size: 26px; }
[data-theme='minimal'] .kpi__value { font-size: 46px; }
[data-theme='minimal'] .card { box-shadow: none; }

/* Miezul nopții — deep blue dark with cyan glow, Sora + Inter. */
[data-theme='miez'] {
  color-scheme: dark;
  --paper: #0B1020;
  --page-bg: radial-gradient(1000px 600px at 85% -10%, rgba(108, 140, 255, 0.22), transparent 60%), radial-gradient(800px 600px at -10% 110%, rgba(79, 227, 193, 0.12), transparent 60%), #0B1020;
  --surface: #121933;
  --surface-2: #19223F;
  --line: #222C4D;
  --line-strong: #313D66;
  --ink: #E6EAF5;
  --ink-2: #BAC2DB;
  --muted: #8A94B4;
  --primary: #6C8CFF;
  --primary-hover: #8AA4FF;
  --primary-soft: #1C2550;
  --primary-ink: #A9BCFF;
  --on-primary: #0B1020;
  --accent: #4FE3C1;
  --accent-hover: #72EBCF;
  --accent-edge: #2FC9A5;
  --on-accent: #0B1020;
  --mint: #7C93E0;
  --sage: #4B5FA8;
  --pipe-1: #C49BFF;
  --dark: #1A2347;
  --dark-hover: #222D58;
  --on-dark: #F1F4FB;
  --on-dark-muted: #BAC2DB;
  --on-dark-faint: #8E98B8;
  --info: #9DB3FF;
  --info-soft: #1C2550;
  --warn: #F5C26B;
  --warn-soft: #33290F;
  --warn-bright: #F5C26B;
  --danger: #FF8F8F;
  --danger-soft: #3A1A22;
  --danger-line: #5C2A33;
  --success: #4FE3C1;
  --success-soft: #11332F;
  --neutral: #B3BCD6;
  --neutral-soft: #1C2442;
  --placeholder: #6C7699;
  --surface-tint: #151D3A;
  --backdrop: rgba(0, 0, 0, 0.6);
  --topbar-bg: rgba(11, 16, 32, 0.78);
  --glass: rgba(18, 25, 51, 0.95);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 64px -24px rgba(0, 0, 0, 0.8);
  --ring: 0 0 0 3px rgba(108, 140, 255, 0.4);
  --sidebar-bg: rgba(18, 25, 51, 0.85);
  --mark-bg: #1A2347; --mark-1: #4B5FA8; --mark-2: #7C93E0; --mark-3: #4FE3C1;
  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
[data-theme='miez'] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BAC2DB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* Theme gallery (palette button in the top bar)                       */
/* ------------------------------------------------------------------ */
.theme-menu { right: 0; top: calc(100% + 8px); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 110px); overflow-y: auto; padding: 12px; }
.theme-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 8px; }
@media (max-width: 520px) { .theme-grid { grid-template-columns: minmax(0, 1fr); } }
.theme-card {
  display: flex; flex-direction: column; gap: 0; width: 100%; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-align: left;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.theme-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.theme-card[aria-checked='true'] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.theme-card__preview { position: relative; height: 64px; display: flex; align-items: flex-end; gap: 6px; padding: 10px; }
.theme-card__aa { position: absolute; top: 8px; right: 12px; font-size: 26px; line-height: 1; }
.theme-card__sw { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(0, 0, 0, 0.2); }
.theme-card__body { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.theme-card__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 800; font-size: 14px; }
.theme-card__name .icon { color: var(--primary); width: 16px; height: 16px; }
.theme-card__desc { font-size: 12px; font-weight: 600; color: var(--muted); }
.theme-card__font { font-size: 11px; font-weight: 700; color: var(--ink-2); }

/* Visible theme control in the top bar: current swatches, label and name */
.theme-wrap { position: relative; }
.theme-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 12px 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); text-align: left;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.theme-btn:hover, .theme-btn[aria-expanded='true'] { border-color: var(--ink-2); background: var(--surface-2); }
.theme-btn__sw { display: inline-flex; }
.theme-btn__sw span { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.theme-btn__sw span + span { margin-left: -5px; }
.theme-btn__text { display: flex; flex-direction: column; line-height: 1.15; }
.theme-btn__label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.theme-btn__name { font-size: var(--text-sm); font-weight: 750; white-space: nowrap; }
.theme-btn__chev { color: var(--muted); }
@media (max-width: 640px) {
  .theme-btn { padding: 0 10px; gap: 6px; }
  .theme-btn__text, .theme-btn__chev { display: none; }
}