/* Self_Dev shared course shell — themes, topbar, nav-collapse, video header, content typography.
   UI_REDESIGN 2026-07: 12-theme selector (18 theme blocks incl. 6 legacy), Playfair Display
   display face (Fraunces from the spec has no Cyrillic), rounded card boxes, scroll-reveal.
   Course templates link this file via /_shared/shell.css and keep only course-specific styles. */

/* ═══════════════════════════════════════════════════════════════
   THEMES — 18 variable blocks.
   :root = Paper (default). 12 exposed in the selector; dusk/forest/
   rose/arctic/sepia/slate kept for saved localStorage values.
   Variable reference: /_shared/theme-ref.css
   ═══════════════════════════════════════════════════════════════ */

:root {
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    Georgia, 'Times New Roman', serif;
  --font-ui:      system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-scale:     1;

  /* Paper — warm neutral (default) */
  --art-bg:              #F8F4ED;
  --art-text:            #1C1814;
  --art-text-muted:      #7A7066;
  --art-border:          #E2DBCC;
  --top-bg:              rgba(248,244,237,0.94);
  --top-border:          #E2DBCC;
  --top-text:            #1C1814;
  --top-muted:           #7A7066;
  --left-bg:             linear-gradient(180deg, #1C1810 0%, #121008 100%);
  --ch-active-bg:        rgba(196,151,90,0.12);
  --ch-active-border:    #C4975A;
  --ch-time:             #C4975A;
  --ch-text:             #C8C0B4;
  --ch-labels:           #5A5248;
  --acc-grad:            linear-gradient(135deg, #C4975A 0%, #A06030 100%);
  --acc-solid:           #B87333;
  --acc-light:           #FDF5E6;
  --acc-border:          rgba(196,151,90,0.3);
  --acc-text:            #7A4C1A;
  --box-c-bg:            #EDF7E8;
  --box-c-border:        #5E9A4C;
  --box-c-text:          #1C3E12;
  --box-h-bg:            #FEF9E7;
  --box-h-border:        #D97706;
  --mark-bg:             rgba(196,151,90,0.18);
  --mark-text:           #713F12;
  --divider:             #E2DBCC;
  --link:                #A06030;
  --scrollbar:           #C8BFB0;
  --progress-bg:         #E2DBCC;
  --card-bg:             rgba(0,0,0,0.02);
  --card-border:         rgba(0,0,0,0.08);
  --box-danger-bg:       #FEF2F2;
  --box-danger-border:   #DC2626;
  --box-danger-text:     #7F1D1D;
}

[data-theme="midnight"] {
  --art-bg: #0C1320; --art-text: #C8D8EE; --art-text-muted: #5A7A9E; --art-border: #1B2C42;
  --top-bg: rgba(10,16,26,0.96); --top-border: #1B2C42; --top-text: #C8D8EE; --top-muted: #5A7A9E;
  --left-bg: linear-gradient(180deg, #060C18 0%, #040810 100%);
  --ch-active-bg: rgba(90,154,240,0.13); --ch-active-border: #5A9AF0; --ch-time: #5A9AF0;
  --ch-text: #7A9AB8; --ch-labels: #2A4A6E;
  --acc-grad: linear-gradient(135deg, #5A9AF0 0%, #2A5ABF 100%); --acc-solid: #3A7AD4;
  --acc-light: rgba(42,90,191,0.12); --acc-border: rgba(90,154,240,0.32); --acc-text: #BFDBFE;
  --box-c-bg: rgba(16,185,129,0.08); --box-c-border: #10B981; --box-c-text: #6EE7B7;
  --box-h-bg: rgba(245,158,11,0.09); --box-h-border: #F59E0B;
  --mark-bg: rgba(90,154,240,0.18); --mark-text: #BFDBFE;
  --divider: #1B2C42; --link: #5A9AF0; --scrollbar: #1B2D48; --progress-bg: #1B2C42;
  --card-bg: rgba(255,255,255,0.035); --card-border: rgba(255,255,255,0.08);
  --box-danger-bg: rgba(220,38,38,0.1); --box-danger-border: #EF4444; --box-danger-text: #FECACA;
}

/* ---- New light themes ---- */

[data-theme="moss"] {
  --art-bg: #F6FBF5; --art-text: #1C2E1A; --art-text-muted: #5A7A54; --art-border: #D6E2D0;
  --top-bg: rgba(246,251,245,0.94); --top-border: #D6E2D0; --top-text: #1C2E1A; --top-muted: #5A7A54;
  --left-bg: linear-gradient(180deg, #132011 0%, #0A1409 100%);
  --ch-active-bg: rgba(94,154,76,0.12); --ch-active-border: #5E9A4C; --ch-time: #5E9A4C;
  --ch-text: #9AB890; --ch-labels: #2A5A22;
  --acc-grad: linear-gradient(135deg, #7CB86A 0%, #4F8A3E 100%); --acc-solid: #5E9A4C;
  --acc-light: rgba(94,154,76,0.1); --acc-border: rgba(94,154,76,0.3); --acc-text: #1C3E12;
  --box-c-bg: #EDF7E8; --box-c-border: #5E9A4C; --box-c-text: #1C3E12;
  --box-h-bg: #F5FCF0; --box-h-border: #7CB86A;
  --mark-bg: rgba(94,154,76,0.18); --mark-text: #1C3E12;
  --divider: #D6E2D0; --link: #4F8A3E; --scrollbar: #C4D8BC; --progress-bg: #D6E2D0;
  --card-bg: rgba(0,0,0,0.02); --card-border: rgba(0,0,0,0.08);
  --box-danger-bg: #FEF2F2; --box-danger-border: #DC2626; --box-danger-text: #7F1D1D;
}

[data-theme="sand"] {
  --art-bg: #FDF8F0; --art-text: #2A2218; --art-text-muted: #7D6E58; --art-border: #E6DBC8;
  --top-bg: rgba(253,248,240,0.94); --top-border: #E6DBC8; --top-text: #2A2218; --top-muted: #7D6E58;
  --left-bg: linear-gradient(180deg, #1E180E 0%, #141008 100%);
  --ch-active-bg: rgba(196,144,80,0.12); --ch-active-border: #C49050; --ch-time: #C49050;
  --ch-text: #B8A888; --ch-labels: #5A4A2E;
  --acc-grad: linear-gradient(135deg, #D4A164 0%, #B8844A 100%); --acc-solid: #C49050;
  --acc-light: rgba(196,144,80,0.1); --acc-border: rgba(196,144,80,0.3); --acc-text: #5A3A18;
  --box-c-bg: #F5F0E6; --box-c-border: #7A9A5A; --box-c-text: #2A4A1A;
  --box-h-bg: #FDF5E6; --box-h-border: #D4A164;
  --mark-bg: rgba(196,144,80,0.18); --mark-text: #4A3010;
  --divider: #E6DBC8; --link: #B8844A; --scrollbar: #D4C8B4; --progress-bg: #E6DBC8;
  --card-bg: rgba(0,0,0,0.02); --card-border: rgba(0,0,0,0.08);
  --box-danger-bg: #FEF2F2; --box-danger-border: #DC2626; --box-danger-text: #7F1D1D;
}

[data-theme="frost"] {
  --art-bg: #F5F8FC; --art-text: #181E28; --art-text-muted: #5A6E84; --art-border: #D0DAE8;
  --top-bg: rgba(245,248,252,0.94); --top-border: #D0DAE8; --top-text: #181E28; --top-muted: #5A6E84;
  --left-bg: linear-gradient(180deg, #0E1A2E 0%, #08101C 100%);
  --ch-active-bg: rgba(74,138,200,0.12); --ch-active-border: #4A8AC8; --ch-time: #4A8AC8;
  --ch-text: #88A0C0; --ch-labels: #2A4A6E;
  --acc-grad: linear-gradient(135deg, #6A9CD6 0%, #3A7ABF 100%); --acc-solid: #4A8AC8;
  --acc-light: rgba(74,138,200,0.1); --acc-border: rgba(74,138,200,0.3); --acc-text: #1A3A5A;
  --box-c-bg: #EDF3F8; --box-c-border: #4A8AC8; --box-c-text: #1A3A5A;
  --box-h-bg: #F0F6FC; --box-h-border: #6A9CD6;
  --mark-bg: rgba(74,138,200,0.15); --mark-text: #1A3A5A;
  --divider: #D0DAE8; --link: #3A7ABF; --scrollbar: #C8D4E2; --progress-bg: #D0DAE8;
  --card-bg: rgba(0,0,0,0.02); --card-border: rgba(0,0,0,0.08);
  --box-danger-bg: #FEF2F2; --box-danger-border: #DC2626; --box-danger-text: #7F1D1D;
}

[data-theme="blush"] {
  --art-bg: #FDF8FA; --art-text: #2A1A22; --art-text-muted: #7A5E6A; --art-border: #E8DAE0;
  --top-bg: rgba(253,248,250,0.94); --top-border: #E8DAE0; --top-text: #2A1A22; --top-muted: #7A5E6A;
  --left-bg: linear-gradient(180deg, #1E1016 0%, #14080C 100%);
  --ch-active-bg: rgba(196,122,150,0.12); --ch-active-border: #C47A96; --ch-time: #C47A96;
  --ch-text: #B090A0; --ch-labels: #5A3A46;
  --acc-grad: linear-gradient(135deg, #D48AA8 0%, #C06A8A 100%); --acc-solid: #C47A96;
  --acc-light: rgba(196,122,150,0.1); --acc-border: rgba(196,122,150,0.3); --acc-text: #5A2A3E;
  --box-c-bg: #F4ECF0; --box-c-border: #C47A96; --box-c-text: #4A2032;
  --box-h-bg: #FCF0F6; --box-h-border: #D48AA8;
  --mark-bg: rgba(196,122,150,0.18); --mark-text: #4A2032;
  --divider: #E8DAE0; --link: #C06A8A; --scrollbar: #DCCCD4; --progress-bg: #E8DAE0;
  --card-bg: rgba(0,0,0,0.02); --card-border: rgba(0,0,0,0.08);
  --box-danger-bg: #FEF2F2; --box-danger-border: #DC2626; --box-danger-text: #7F1D1D;
}

[data-theme="amber"] {
  --art-bg: #FDF6EC; --art-text: #2A1E0E; --art-text-muted: #7A623A; --art-border: #E8D6B8;
  --top-bg: rgba(253,246,236,0.94); --top-border: #E8D6B8; --top-text: #2A1E0E; --top-muted: #7A623A;
  --left-bg: linear-gradient(180deg, #201406 0%, #140A02 100%);
  --ch-active-bg: rgba(212,138,48,0.12); --ch-active-border: #D48A30; --ch-time: #D48A30;
  --ch-text: #B89868; --ch-labels: #5A4220;
  --acc-grad: linear-gradient(135deg, #E8A040 0%, #CC7A20 100%); --acc-solid: #D48A30;
  --acc-light: rgba(212,138,48,0.1); --acc-border: rgba(212,138,48,0.3); --acc-text: #5A3208;
  --box-c-bg: #F0E6D4; --box-c-border: #7A8A3A; --box-c-text: #2A3A12;
  --box-h-bg: #FDECC8; --box-h-border: #D48A30;
  --mark-bg: rgba(212,138,48,0.2); --mark-text: #4A2606;
  --divider: #E8D6B8; --link: #CC7A20; --scrollbar: #D4C4A8; --progress-bg: #E8D6B8;
  --card-bg: rgba(0,0,0,0.02); --card-border: rgba(0,0,0,0.08);
  --box-danger-bg: #FEF2F2; --box-danger-border: #DC2626; --box-danger-text: #7F1D1D;
}

/* ---- New dark themes ---- */

[data-theme="canopy"] {
  --art-bg: #0A140E; --art-text: #A8D0B8; --art-text-muted: #4A7A5A; --art-border: #122A1A;
  --top-bg: rgba(6,15,8,0.96); --top-border: #122A1A; --top-text: #A8D0B8; --top-muted: #4A7A5A;
  --left-bg: linear-gradient(180deg, #040C06 0%, #020804 100%);
  --ch-active-bg: rgba(58,154,90,0.12); --ch-active-border: #3A9A5A; --ch-time: #3A9A5A;
  --ch-text: #5A8A6E; --ch-labels: #1A4A2A;
  --acc-grad: linear-gradient(135deg, #4CAF6E 0%, #2E8A4E 100%); --acc-solid: #3A9A5A;
  --acc-light: rgba(58,154,90,0.1); --acc-border: rgba(58,154,90,0.3); --acc-text: #B8E8C8;
  --box-c-bg: rgba(58,154,90,0.08); --box-c-border: #3A9A5A; --box-c-text: #88D8A0;
  --box-h-bg: rgba(76,175,110,0.08); --box-h-border: #4CAF6E;
  --mark-bg: rgba(58,154,90,0.18); --mark-text: #B8E8C8;
  --divider: #122A1A; --link: #4CAF6E; --scrollbar: #1A3A22; --progress-bg: #122A1A;
  --card-bg: rgba(255,255,255,0.035); --card-border: rgba(255,255,255,0.08);
  --box-danger-bg: rgba(220,38,38,0.1); --box-danger-border: #EF4444; --box-danger-text: #FECACA;
}

[data-theme="obsidian"] {
  --art-bg: #100A14; --art-text: #C8B8DC; --art-text-muted: #6A4E8A; --art-border: #1E142A;
  --top-bg: rgba(8,6,12,0.97); --top-border: #1E142A; --top-text: #C8B8DC; --top-muted: #6A4E8A;
  --left-bg: linear-gradient(180deg, #06040A 0%, #040206 100%);
  --ch-active-bg: rgba(122,74,196,0.12); --ch-active-border: #7A4AC4; --ch-time: #7A4AC4;
  --ch-text: #8A6E9A; --ch-labels: #2A1A42;
  --acc-grad: linear-gradient(135deg, #9A6AD6 0%, #6E3EB8 100%); --acc-solid: #7A4AC4;
  --acc-light: rgba(122,74,196,0.1); --acc-border: rgba(122,74,196,0.3); --acc-text: #D8C2F0;
  --box-c-bg: rgba(122,74,196,0.08); --box-c-border: #7A4AC4; --box-c-text: #C8A8E2;
  --box-h-bg: rgba(154,106,214,0.08); --box-h-border: #9A6AD6;
  --mark-bg: rgba(122,74,196,0.18); --mark-text: #E0CCF4;
  --divider: #1E142A; --link: #9A6AD6; --scrollbar: #2A1A3E; --progress-bg: #1E142A;
  --card-bg: rgba(255,255,255,0.035); --card-border: rgba(255,255,255,0.08);
  --box-danger-bg: rgba(220,38,38,0.1); --box-danger-border: #EF4444; --box-danger-text: #FECACA;
}

[data-theme="abyss"] {
  --art-bg: #08141E; --art-text: #A8C8DC; --art-text-muted: #4A728E; --art-border: #10222E;
  --top-bg: rgba(4,12,20,0.97); --top-border: #10222E; --top-text: #A8C8DC; --top-muted: #4A728E;
  --left-bg: linear-gradient(180deg, #040A10 0%, #02060C 100%);
  --ch-active-bg: rgba(42,142,176,0.12); --ch-active-border: #2A8EB0; --ch-time: #2A8EB0;
  --ch-text: #5A8AA0; --ch-labels: #1A3A4E;
  --acc-grad: linear-gradient(135deg, #3AA8C8 0%, #1A7A9A 100%); --acc-solid: #2A8EB0;
  --acc-light: rgba(42,142,176,0.1); --acc-border: rgba(42,142,176,0.3); --acc-text: #B8E0EE;
  --box-c-bg: rgba(42,142,176,0.08); --box-c-border: #2A8EB0; --box-c-text: #8AC8DE;
  --box-h-bg: rgba(58,168,200,0.08); --box-h-border: #3AA8C8;
  --mark-bg: rgba(42,142,176,0.18); --mark-text: #C0E4F0;
  --divider: #10222E; --link: #3AA8C8; --scrollbar: #1A3040; --progress-bg: #10222E;
  --card-bg: rgba(255,255,255,0.035); --card-border: rgba(255,255,255,0.08);
  --box-danger-bg: rgba(220,38,38,0.1); --box-danger-border: #EF4444; --box-danger-text: #FECACA;
}

[data-theme="ember"] {
  --art-bg: #181008; --art-text: #E0C8A0; --art-text-muted: #8A6A3A; --art-border: #2E1E0C;
  --top-bg: rgba(16,10,4,0.97); --top-border: #2E1E0C; --top-text: #E0C8A0; --top-muted: #8A6A3A;
  --left-bg: linear-gradient(180deg, #0E0802 0%, #080400 100%);
  --ch-active-bg: rgba(212,112,40,0.12); --ch-active-border: #D47028; --ch-time: #D47028;
  --ch-text: #A8885A; --ch-labels: #4A2E0E;
  --acc-grad: linear-gradient(135deg, #E8883A 0%, #C06020 100%); --acc-solid: #D47028;
  --acc-light: rgba(212,112,40,0.1); --acc-border: rgba(212,112,40,0.3); --acc-text: #F0D8B8;
  --box-c-bg: rgba(212,112,40,0.08); --box-c-border: #D47028; --box-c-text: #E8C088;
  --box-h-bg: rgba(232,136,58,0.08); --box-h-border: #E8883A;
  --mark-bg: rgba(212,112,40,0.2); --mark-text: #F0D8B8;
  --divider: #2E1E0C; --link: #E8883A; --scrollbar: #2E1E0C; --progress-bg: #2E1E0C;
  --card-bg: rgba(255,255,255,0.035); --card-border: rgba(255,255,255,0.08);
  --box-danger-bg: rgba(220,38,38,0.1); --box-danger-border: #EF4444; --box-danger-text: #FECACA;
}

[data-theme="nebula"] {
  --art-bg: #0E0A18; --art-text: #C8B8E0; --art-text-muted: #6A528A; --art-border: #1A142E;
  --top-bg: rgba(8,4,16,0.97); --top-border: #1A142E; --top-text: #C8B8E0; --top-muted: #6A528A;
  --left-bg: linear-gradient(180deg, #06040C 0%, #040208 100%);
  --ch-active-bg: rgba(176,78,200,0.12); --ch-active-border: #B04EC8; --ch-time: #B04EC8;
  --ch-text: #88709E; --ch-labels: #2E1A4A;
  --acc-grad: linear-gradient(135deg, #C86ADA 0%, #9A3EB8 100%); --acc-solid: #B04EC8;
  --acc-light: rgba(176,78,200,0.1); --acc-border: rgba(176,78,200,0.3); --acc-text: #E4CAEE;
  --box-c-bg: rgba(176,78,200,0.08); --box-c-border: #B04EC8; --box-c-text: #D8BEE6;
  --box-h-bg: rgba(200,106,218,0.08); --box-h-border: #C86ADA;
  --mark-bg: rgba(176,78,200,0.18); --mark-text: #EAD4F2;
  --divider: #1A142E; --link: #C86ADA; --scrollbar: #2A1A3E; --progress-bg: #1A142E;
  --card-bg: rgba(255,255,255,0.035); --card-border: rgba(255,255,255,0.08);
  --box-danger-bg: rgba(220,38,38,0.1); --box-danger-border: #EF4444; --box-danger-text: #FECACA;
}

/* ---- Legacy themes (not in the selector; saved localStorage values keep working) ---- */

[data-theme="dusk"] {
  --art-bg: linear-gradient(160deg, #1e1508 0%, #120d04 100%); --art-text: #e8d5b0; --art-text-muted: #9a8060;
  --art-border: #2e1f0c; --top-bg: rgba(18,13,4,0.97); --top-border: #2e1f0c; --top-text: #e8d5b0; --top-muted: #9a8060;
  --left-bg: linear-gradient(180deg, #100902 0%, #0a0601 100%); --ch-active-bg: rgba(251,191,36,0.1);
  --ch-active-border: #fbbf24; --ch-time: #d97706; --ch-text: #c4a070;
  --acc-grad: linear-gradient(135deg, #fbbf24 0%, #dc2626 100%); --acc-solid: #d97706; --acc-light: rgba(217,119,6,0.12);
  --acc-border: rgba(251,191,36,0.3); --acc-text: #fef3c7; --box-c-bg: rgba(21,128,61,0.1); --box-c-border: #15803d;
  --box-c-text: #86efac; --box-h-bg: rgba(234,179,8,0.1); --box-h-border: #ca8a04; --mark-bg: rgba(202,138,4,0.22);
  --mark-text: #fef08a; --divider: #2e1f0c; --link: #f59e0b; --scrollbar: #2e1f0c; --ch-labels: #5a4020; --progress-bg: #2e1f0c;
  --card-bg: rgba(255,255,255,0.035); --card-border: rgba(255,255,255,0.08);
  --box-danger-bg: rgba(220,38,38,0.1); --box-danger-border: #EF4444; --box-danger-text: #FECACA;
}
[data-theme="forest"] {
  --art-bg: linear-gradient(160deg, #0b1a10 0%, #060e09 100%); --art-text: #b6e8c8; --art-text-muted: #4e8a64;
  --art-border: #0f2618; --top-bg: rgba(6,14,9,0.97); --top-border: #0f2618; --top-text: #b6e8c8; --top-muted: #4e8a64;
  --left-bg: linear-gradient(180deg, #040c07 0%, #030804 100%); --ch-active-bg: rgba(52,211,153,0.1);
  --ch-active-border: #34d399; --ch-time: #059669; --ch-text: #5a8a6e;
  --acc-grad: linear-gradient(135deg, #34d399 0%, #059669 100%); --acc-solid: #10b981; --acc-light: rgba(16,185,129,0.1);
  --acc-border: rgba(52,211,153,0.25); --acc-text: #d1fae5; --box-c-bg: rgba(20,83,45,0.2); --box-c-border: #16a34a;
  --box-c-text: #86efac; --box-h-bg: rgba(16,185,129,0.08); --box-h-border: #10b981; --mark-bg: rgba(52,211,153,0.15);
  --mark-text: #a7f3d0; --divider: #0f2618; --link: #34d399; --scrollbar: #0f2618; --ch-labels: #1e5c36; --progress-bg: #0f2618;
  --card-bg: rgba(255,255,255,0.035); --card-border: rgba(255,255,255,0.08);
  --box-danger-bg: rgba(220,38,38,0.1); --box-danger-border: #EF4444; --box-danger-text: #FECACA;
}
[data-theme="rose"] {
  --art-bg: linear-gradient(160deg, #1a0810 0%, #110508 100%); --art-text: #f0c8d8; --art-text-muted: #9a6878;
  --art-border: #2e1020; --top-bg: rgba(18,5,10,0.97); --top-border: #2e1020; --top-text: #f0c8d8; --top-muted: #9a6878;
  --left-bg: linear-gradient(180deg, #0e0308 0%, #090204 100%); --ch-active-bg: rgba(244,114,182,0.12);
  --ch-active-border: #f472b6; --ch-time: #f472b6; --ch-text: #c8849a;
  --acc-grad: linear-gradient(135deg, #f472b6 0%, #be185d 100%); --acc-solid: #db2777; --acc-light: rgba(190,24,93,0.12);
  --acc-border: rgba(244,114,182,0.3); --acc-text: #fce7f3; --box-c-bg: rgba(236,72,153,0.08); --box-c-border: #db2777;
  --box-c-text: #fbcfe8; --box-h-bg: rgba(245,158,11,0.09); --box-h-border: #f59e0b; --mark-bg: rgba(244,114,182,0.2);
  --mark-text: #fce7f3; --divider: #2e1020; --link: #f472b6; --scrollbar: #2e1020; --ch-labels: #5a2040; --progress-bg: #2e1020;
  --card-bg: rgba(255,255,255,0.035); --card-border: rgba(255,255,255,0.08);
  --box-danger-bg: rgba(220,38,38,0.12); --box-danger-border: #EF4444; --box-danger-text: #FECACA;
}
[data-theme="arctic"] {
  --art-bg: linear-gradient(160deg, #f0f6ff 0%, #e4eef8 100%); --art-text: #0d1b2e; --art-text-muted: #4e7898;
  --art-border: #c8d8ea; --top-bg: rgba(240,246,255,0.96); --top-border: #c8d8ea; --top-text: #0d1b2e; --top-muted: #4e7898;
  --left-bg: linear-gradient(180deg, #0a1628 0%, #060d1c 100%); --ch-active-bg: rgba(14,165,233,0.12);
  --ch-active-border: #0ea5e9; --ch-time: #0284c7; --ch-text: #a8c8e0;
  --acc-grad: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%); --acc-solid: #0284c7; --acc-light: rgba(14,165,233,0.1);
  --acc-border: rgba(56,189,248,0.35); --acc-text: #0c4a6e; --box-c-bg: #f0fdf4; --box-c-border: #16a34a;
  --box-c-text: #14532d; --box-h-bg: #fffbeb; --box-h-border: #d97706; --mark-bg: rgba(56,189,248,0.18);
  --mark-text: #0c4a6e; --divider: #c8d8ea; --link: #0284c7; --scrollbar: #c0d4e8; --ch-labels: #8ab4d0; --progress-bg: #c8d8ea;
  --card-bg: rgba(0,0,0,0.02); --card-border: rgba(0,0,0,0.08);
  --box-danger-bg: #FEF2F2; --box-danger-border: #DC2626; --box-danger-text: #7F1D1D;
}
[data-theme="sepia"] {
  --art-bg: linear-gradient(160deg, #f8f0e3 0%, #ede0c8 100%); --art-text: #2d1c08; --art-text-muted: #7a5c38;
  --art-border: #d8c4a4; --top-bg: rgba(248,240,227,0.96); --top-border: #d8c4a4; --top-text: #2d1c08; --top-muted: #7a5c38;
  --left-bg: linear-gradient(180deg, #1a0e04 0%, #100800 100%); --ch-active-bg: rgba(161,100,40,0.12);
  --ch-active-border: #a16428; --ch-time: #8b5220; --ch-text: #c8a878;
  --acc-grad: linear-gradient(135deg, #c2824a 0%, #8b4513 100%); --acc-solid: #a0522d; --acc-light: #fdf5e6;
  --acc-border: #d4a86c; --acc-text: #4a2008; --box-c-bg: #f0fdf4; --box-c-border: #16a34a; --box-c-text: #14532d;
  --box-h-bg: #fffbeb; --box-h-border: #d97706; --mark-bg: #fef3c7; --mark-text: #713f12; --divider: #d8c4a4;
  --link: #8b4513; --scrollbar: #c8b490; --ch-labels: #6a4c28; --progress-bg: #d8c4a4;
  --card-bg: rgba(0,0,0,0.02); --card-border: rgba(0,0,0,0.08);
  --box-danger-bg: #FEF2F2; --box-danger-border: #DC2626; --box-danger-text: #7F1D1D;
}
[data-theme="slate"] {
  --art-bg: linear-gradient(160deg, #1c2028 0%, #13161c 100%); --art-text: #c8cdd6; --art-text-muted: #607084;
  --art-border: #282e38; --top-bg: rgba(18,20,26,0.97); --top-border: #282e38; --top-text: #c8cdd6; --top-muted: #607084;
  --left-bg: linear-gradient(180deg, #0e1016 0%, #090c10 100%); --ch-active-bg: rgba(148,163,184,0.12);
  --ch-active-border: #94a3b8; --ch-time: #94a3b8; --ch-text: #708094;
  --acc-grad: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); --acc-solid: #64748b; --acc-light: rgba(100,116,139,0.12);
  --acc-border: rgba(148,163,184,0.3); --acc-text: #e2e8f0; --box-c-bg: rgba(16,185,129,0.07); --box-c-border: #10b981;
  --box-c-text: #6ee7b7; --box-h-bg: rgba(245,158,11,0.08); --box-h-border: #f59e0b; --mark-bg: rgba(148,163,184,0.2);
  --mark-text: #e2e8f0; --divider: #282e38; --link: #94a3b8; --scrollbar: #282e38; --ch-labels: #3a4456; --progress-bg: #282e38;
  --card-bg: rgba(255,255,255,0.035); --card-border: rgba(255,255,255,0.08);
  --box-danger-bg: rgba(220,38,38,0.1); --box-danger-border: #EF4444; --box-danger-text: #FECACA;
}

/* ═══════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body { font-family: var(--font-body); background: var(--art-bg); color: var(--art-text); display: flex; flex-direction: column; }
::selection { background: var(--mark-bg); color: var(--mark-text); }

/* Smooth cross-fade when switching themes */
body, .art-header, .art-body h2, .art-body h3, .art-body p,
.art-body li, .art-body mark, .box-concept, .box-hi, .box-src,
.topbar, .panel-left, .panel-right, .divider-text, hr, .nav-tab,
.art-title, .art-meta, .module-tag, .fs-btn, .video-area {
  transition: background 0.6s ease, color 0.6s ease, border-color 0.6s ease;
}

/* ---- Topbar ---- */
.topbar { height: 56px; background: var(--top-bg); border-bottom: 1px solid var(--top-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; padding: 0 24px; gap: 12px; flex-shrink: 0; font-family: var(--font-ui); z-index: 10; }
.breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--top-muted); white-space: nowrap; }
.breadcrumb a { background: var(--acc-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; font-weight: 600; }
.breadcrumb span { color: var(--top-muted); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.progress-wrap { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--top-muted); font-family: var(--font-ui); }
.progress-bar { width: 88px; height: 3px; background: var(--progress-bg); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--acc-grad); width: 0%; transition: width 0.6s ease; }
.fs-controls { display: flex; align-items: center; gap: 4px; }
.fs-btn { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--top-text); background: transparent; border: 1px solid var(--top-border); border-radius: 6px; width: 24px; height: 24px; line-height: 1; cursor: pointer; }
.fs-btn:hover { background: var(--acc-light); border-color: var(--acc-border); }
.login-wrap { position: relative; }
.login-panel { display: none; position: absolute; top: 34px; right: 0; z-index: 20; flex-direction: column; gap: 6px; background: var(--top-bg); border: 1px solid var(--top-border); border-radius: 12px; padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); min-width: 160px; }
.login-panel.open { display: flex; }
.login-panel input { font-family: var(--font-ui); font-size: 13px; padding: 6px 8px; border: 1px solid var(--top-border); border-radius: 6px; background: var(--art-bg); color: var(--art-text); }
.login-submit { width: auto; padding: 0 10px; height: 28px; }
.login-error { font-family: var(--font-ui); font-size: 11px; color: #d9534f; min-height: 14px; }

/* ---- Theme selector: grouped dots + live theme name ---- */
.theme-dots { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tgroup-label { font-size: 8px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--top-muted); margin: 0 2px; opacity: 0.6; user-select: none; }
.tname { font-size: 11px; font-weight: 600; color: var(--top-text); margin-left: 4px; min-width: 50px; }
.tdot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; padding: 0; outline: none; flex-shrink: 0; }
.tdot:hover { transform: scale(1.25); }
.tdot.active { border-color: var(--top-bg); box-shadow: 0 0 0 2px var(--top-text); transform: scale(1.1); }

/* ---- Layout: collapsible nav column + tongue + content ---- */
.main { display: flex; flex: 1; overflow: hidden; }
.panel-left { width: 280px; flex-shrink: 0; background: var(--left-bg); overflow: hidden; transition: width 0.28s ease, background 0.6s ease; }
.main.nav-collapsed .panel-left { width: 0; }
.nav-inner { width: 280px; height: 100%; display: flex; flex-direction: column; overflow-y: auto; padding: 0 0 24px; }
.nav-inner::-webkit-scrollbar { width: 3px; }
.nav-inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
/* Nav toggle: a narrow strip carrying a visible accent "grip" so it reads as a
   button rather than a seam between the panels. Glyph markup: shell.js. */
.nav-tab { width: 26px; flex-shrink: 0; border: none; cursor: pointer; padding: 0; background: var(--left-bg); display: flex; align-items: center; justify-content: center; }
.nav-tab:hover { background: var(--ch-active-bg); }
.nav-tab-grip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 54px;
  border-radius: 10px;
  background: var(--acc-grad);
  color: var(--acc-text);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nav-tab:hover .nav-tab-grip { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0,0,0,0.45); }
.nav-tab:focus-visible { outline: none; }
.nav-tab:focus-visible .nav-tab-grip { outline: 2px solid var(--acc-solid); outline-offset: 3px; }
.nav-head { font-family: var(--font-ui); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.13em; color: var(--ch-labels); padding: 18px 20px 10px; transition: color 0.6s; }
.part-label { font-family: var(--font-ui); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.13em; color: var(--ch-labels); padding: 18px 20px 8px; transition: color 0.6s; }
.chapter { display: flex; align-items: flex-start; gap: 12px; padding: 9px 20px; cursor: pointer; border-left: 3px solid transparent; transition: background 0.12s, border-color 0.12s; text-decoration: none; }
.chapter:hover { background: rgba(255,255,255,0.04); }
.chapter.active { background: var(--ch-active-bg); border-left-color: var(--ch-active-border); }
.ch-time { font-family: 'Courier New', monospace; font-size: 11px; color: var(--ch-time); min-width: 36px; padding-top: 1px; flex-shrink: 0; transition: color 0.6s; }
.ch-num { font-family: 'Courier New', monospace; font-size: 11px; color: var(--ch-time); min-width: 18px; padding-top: 1px; flex-shrink: 0; transition: color 0.6s; }
.chapter.done .ch-num { color: #6ee7b7; }
.ch-text { font-family: var(--font-ui); font-size: 13px; color: var(--ch-text); line-height: 1.4; transition: color 0.15s; }
.chapter.active .ch-text { color: #fff; }

/* ---- Content column (scroll container). Padding lives on .art-wrap so a
   sticky .video-area can span the full column width above the text. ---- */
.panel-right { flex: 1; overflow-y: auto; padding: 0; background: var(--art-bg); min-width: 0; }
.panel-right::-webkit-scrollbar { width: 5px; }
.panel-right::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }
.art-wrap { padding: 44px 52px 100px; max-width: 960px; margin: 0 auto; }

/* ---- Video header (courses with video only): sticky at top of the content
   column, full column width, independently collapsible — desktop included. ---- */
.video-area { position: sticky; top: 0; z-index: 5; background: var(--left-bg); box-shadow: 0 2px 16px rgba(0,0,0,0.18); }
.video-head { display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; user-select: none; padding: 7px 14px; font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: #fff; background: rgba(255,255,255,0.12); }
.video-head:hover { background: rgba(255,255,255,0.2); }
.video-head .ch-arrow { font-size: 11px; transition: transform 0.2s; }
.video-head.collapsed .ch-arrow { transform: rotate(-90deg); }
.video-area.collapsed .video-wrapper { display: none; }
.video-wrapper { width: 100%; aspect-ratio: 16 / 9; max-height: 46vh; background: #000; position: relative; overflow: hidden; }
.video-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px; color: #fff; font-family: var(--font-ui); font-size: 13px; line-height: 1.5; }
.video-error a { color: #fff; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   ARTICLE TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */

.art-header { margin-bottom: 36px; padding-bottom: 28px; border-bottom: 2px solid var(--art-border); }
.module-tag { font-family: var(--font-ui); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; margin-bottom: 14px; color: var(--acc-solid); }
.art-title { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 12px; color: var(--art-text); }
.art-meta { font-family: var(--font-ui); font-size: 13px; color: var(--art-text-muted); }
.art-body h2 { font-family: var(--font-display); font-weight: 600; font-size: calc(24px * var(--fs-scale)); line-height: 1.25; margin: 44px 0 16px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; color: var(--art-text); }
.art-body h3 { font-family: var(--font-display); font-weight: 600; font-size: calc(18px * var(--fs-scale)); margin: 28px 0 12px; color: var(--art-text); }
.art-body p { font-size: calc(17px * var(--fs-scale)); line-height: 1.75; margin-bottom: 18px; color: var(--art-text); }
.art-body ul, .art-body ol { padding-left: 26px; margin-bottom: 18px; }
.art-body li { font-size: calc(16px * var(--fs-scale)); line-height: 1.7; margin-bottom: 8px; color: var(--art-text); }
.art-body li::marker { color: var(--acc-solid); }
.art-body table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: calc(14px * var(--fs-scale)); }
.art-body th, .art-body td { border: 1px solid var(--art-border); padding: 8px 10px; text-align: left; vertical-align: top; }
.art-body th { font-family: var(--font-ui); font-size: calc(11.5px * var(--fs-scale)); text-transform: uppercase; letter-spacing: 0.04em; color: var(--art-text-muted); background: var(--acc-light); }
.art-body td { line-height: 1.55; color: var(--art-text); }

/* Drop cap on the lede paragraph (render.py tags the first <p> after the first <h2>) */
.art-body .lede::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.4em;
  line-height: 0.82;
  float: left;
  padding: 0.04em 0.1em 0 0;
  background: var(--acc-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

mark { background: var(--mark-bg); color: var(--mark-text); padding: 1px 4px; border-radius: 3px; transition: background 0.6s, color 0.6s; }
hr { border: none; border-top: 1px solid var(--divider); margin: 36px 0; }
.chapter-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--divider); }
.nav-btn { font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--link); text-decoration: none; max-width: 46%; transition: opacity 0.15s; }
.nav-btn:hover { opacity: 0.75; text-decoration: underline; }
.nav-next { text-align: right; margin-left: auto; }

/* ---- Boxes: rounded cards (shared by all courses) ---- */
.box-concept, .box-hi, .box-src {
  border-radius: 16px;
  padding: 20px 24px;
  margin: 28px 0;
  border: 1px solid transparent;
  transition: background 0.6s ease, color 0.6s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.5s ease, transform 0.5s ease;
}
.box-concept { background: var(--box-c-bg); }
.box-concept:hover { border-color: var(--box-c-border); box-shadow: 0 6px 24px rgba(0,0,0,0.07); }
.box-hi { background: var(--box-h-bg); }
.box-hi:hover { border-color: var(--box-h-border); box-shadow: 0 6px 24px rgba(0,0,0,0.07); }
.box-src { background: var(--acc-light); }
.box-src:hover { border-color: var(--acc-border); box-shadow: 0 6px 24px rgba(0,0,0,0.07); }
.blabel { font-family: var(--font-ui); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.box-concept .blabel { color: var(--box-c-border); }
.box-concept .blabel::before { content: '📌'; font-size: 12px; }
.box-src .blabel { color: var(--acc-solid); }
.box-src .blabel::before { content: '📚'; font-size: 12px; }
.box-hi::before { content: '💡'; display: block; font-size: 16px; margin-bottom: 6px; }
.box-concept p, .box-src p { margin-bottom: 0 !important; font-size: calc(15px * var(--fs-scale)); }
.box-concept p { color: var(--box-c-text) !important; }
.box-hi p { margin-bottom: 0 !important; font-size: calc(15px * var(--fs-scale)); }

/* ---- Timestamp buttons: subtle floating chips ---- */
.ts {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--acc-solid);
  background: var(--acc-light);
  border: 1px solid var(--acc-border);
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.4;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.ts::before { content: '▶'; font-size: 8px; }
.ts:hover { background: var(--acc-grad); color: var(--acc-text); border-color: transparent; transform: scale(1.04); }

/* ═══════════════════════════════════════════════════════════════
   SCROLL-REVEAL — armed only when shell.js adds .reveal-ready to <html>,
   so content stays visible without JS (mocks, no-script, old browsers).
   ═══════════════════════════════════════════════════════════════ */

.reveal-ready .art-body .box-concept,
.reveal-ready .art-body .box-hi,
.reveal-ready .art-body .box-src {
  opacity: 0;
  transform: translateY(12px);
}
.reveal-ready .art-body .box-concept.in-view,
.reveal-ready .art-body .box-hi.in-view,
.reveal-ready .art-body .box-src.in-view {
  opacity: 1;
  transform: translateY(0);
}
.reveal-ready .art-body mark {
  background-color: transparent;
  background-image: linear-gradient(var(--mark-bg), var(--mark-bg));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  transition: background-size 0.6s ease, color 0.6s ease;
}
.reveal-ready .art-body mark.in-view { background-size: 100% 100%; }

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .art-body .box-concept,
  .reveal-ready .art-body .box-hi,
  .reveal-ready .art-body .box-src { opacity: 1; transform: none; }
  .reveal-ready .art-body mark { background-size: 100% 100%; }
}

/* ---- Mobile: stacked layout, nav below content, tongue hidden ---- */
@media (max-width: 768px) {
  html { height: auto; overflow-y: auto; }
  body { height: auto; overflow: visible; }
  .main { flex-direction: column; overflow: visible; }
  .nav-tab { display: none; }
  .panel-left { width: 100%; order: 2; overflow: visible; }
  .main.nav-collapsed .panel-left { width: 100%; }
  .nav-inner { width: 100%; height: auto; overflow: visible; }
  .panel-right { order: 1; overflow: visible; }
  .video-wrapper { max-height: 28vh; }
  .art-wrap { padding: 28px 18px 60px; }
  .topbar { padding: 0 10px; gap: 6px; flex-wrap: wrap; height: auto; min-height: 50px; }
  .breadcrumb { font-size: 11px; gap: 5px; }
  .progress-wrap { display: none; }
  .theme-dots { gap: 4px; }
  .tgroup-label, .tname { display: none; }
  .tdot { width: 14px; height: 14px; }
  .art-title { font-size: 24px; }
  .art-header { margin-bottom: 24px; padding-bottom: 18px; }
  .art-body h2 { font-size: calc(19px * var(--fs-scale)); margin: 28px 0 10px; }
  .art-body h3 { font-size: calc(16px * var(--fs-scale)); margin: 20px 0 8px; }
  .art-body p, .art-body li { font-size: calc(15px * var(--fs-scale)); line-height: 1.7; }
  .art-body table { font-size: calc(12.5px * var(--fs-scale)); }
  .art-body .lede::first-letter { font-size: 3.4em; }
  .box-concept, .box-hi, .box-src { padding: 14px 16px; margin: 20px 0; border-radius: 12px; }
  .nav-btn { max-width: 48%; font-size: 12.5px; }
}