/* Syllaboard Glass — layered liquid glass over a soft amber-and-lagoon
   aurora. Token system + components adapted from the "Syllaboard Glass"
   design package (generated against this app, commit e189e9d). */

/* Four self-contained theme identities (Midnight/Clear/Paper/Pop), each
   baking in its own light-or-dark appearance — no separate light/dark
   toggle crosses these. ink*, glass-*, load-*, accent* and shadow-tint
   are set per-theme below; --ink-faint/--accent-hover/--accent-soft and
   the shadow tokens are *derived* once from those, so they adapt
   automatically. --status-* varies by theme (dark bg vs light bg need
   different validated sets); --course-* stays one fixed palette
   everywhere (see README: both were contrast/colourblind-checked). */
[data-accent="midnight"], :root {
  --canvas: #0a0c10;
  --aurora-amber: rgba(232, 144, 44, 0.5);
  --aurora-lagoon: rgba(19, 168, 158, 0.5);
  --aurora-coral: rgba(226, 85, 63, 0.5);
  --glass-thin: rgba(255, 255, 255, 0.06);
  --glass-regular: rgba(255, 255, 255, 0.06);
  --glass-thick: rgba(255, 255, 255, 0.08);
  --glass-rim: rgba(255, 255, 255, 0.20);
  --glass-edge: rgba(255, 255, 255, 0.12);
  --glass-shade: rgba(255, 255, 255, 0.10);
  --ink: #f2f3f5;
  --ink-muted: #a3a9b5;
  --accent: #f5b544;
  --on-accent: #1c1405;
  --focus: #8cbcf0;
  --load-light: #8fd6a0; --load-moderate: #f5c46a; --load-moderate-fill: #e6b85c; --load-over: #ff8a73;
  --nav-active-bg: rgba(255, 255, 255, 0.12); --nav-active-fg: #f2f3f5;
  --shadow-tint: 0, 0, 0;
  --status-not-started: #3987e5; --status-in-progress: #d95926;
  --status-in-review: #9085e9; --status-blocked: #e66767; --status-completed: #2e9e3a;
}
[data-accent="clear"] {
  --canvas: #eaf0f2;
  --aurora-amber: rgba(127, 211, 207, 0.9);
  --aurora-lagoon: rgba(169, 200, 245, 0.9);
  --aurora-coral: rgba(255, 207, 174, 0.9);
  --glass-thin: rgba(255, 255, 255, 0.50);
  --glass-regular: rgba(255, 255, 255, 0.50);
  --glass-thick: rgba(255, 255, 255, 0.78);
  --glass-rim: rgba(255, 255, 255, 0.95);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-shade: rgba(16, 40, 48, 0.10);
  --ink: #10181c;
  --ink-muted: #46555c;
  --accent: #0f6e6a;
  --on-accent: #ffffff;
  --focus: #2f6fb3;
  --load-light: #2f6e40; --load-moderate: #8a5a00; --load-moderate-fill: #d9a441; --load-over: #b3261e;
  --nav-active-bg: rgba(255, 255, 255, 0.85); --nav-active-fg: #10181c;
  --shadow-tint: 16, 40, 48;
  --status-not-started: #2a78d6; --status-in-progress: #eb6834;
  --status-in-review: #4a3aa7; --status-blocked: #e34948; --status-completed: #008300;
}
[data-accent="sage"] {
  --canvas: #eef0e6;
  --aurora-amber: rgba(212, 180, 131, 0.85);
  --aurora-lagoon: rgba(168, 184, 148, 0.85);
  --aurora-coral: rgba(201, 168, 148, 0.85);
  --glass-thin: rgba(255, 255, 255, 0.52);
  --glass-regular: rgba(255, 255, 255, 0.52);
  --glass-thick: rgba(255, 255, 255, 0.80);
  --glass-rim: rgba(255, 255, 255, 0.95);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-shade: rgba(0, 0, 0, 0.10);
  --ink: #232619;
  --ink-muted: #666a52;
  --accent: #4f6b3a;
  --on-accent: #ffffff;
  --focus: #2f6fb3;
  --load-light: #2f6e40; --load-moderate: #8a5a00; --load-moderate-fill: #d9a441; --load-over: #b3261e;
  --nav-active-bg: rgba(255, 255, 255, 0.85); --nav-active-fg: #232619;
  --shadow-tint: 40, 25, 10;
  --status-not-started: #2a78d6; --status-in-progress: #eb6834;
  --status-in-review: #4a3aa7; --status-blocked: #e34948; --status-completed: #008300;
}
[data-accent="pop"] {
  --canvas: #fbf6ee;
  --aurora-amber: rgba(159, 227, 196, 1);
  --aurora-lagoon: rgba(255, 224, 122, 1);
  --aurora-coral: rgba(255, 179, 138, 1);
  --glass-thin: rgba(255, 255, 255, 0.48);
  --glass-regular: rgba(255, 255, 255, 0.48);
  --glass-thick: rgba(255, 255, 255, 0.80);
  --glass-rim: rgba(255, 255, 255, 0.95);
  --glass-edge: rgba(255, 255, 255, 0.90);
  --glass-shade: rgba(29, 27, 31, 0.10);
  --ink: #1d1b1f;
  --ink-muted: #55505a;
  --accent: #c8432d;
  --on-accent: #ffffff;
  --focus: #2f6fb3;
  --load-light: #2f6e40; --load-moderate: #8a5a00; --load-moderate-fill: #f2b93b; --load-over: #b3261e;
  --nav-active-bg: #1d1b1f; --nav-active-fg: #ffffff;
  --shadow-tint: 60, 40, 20;
  --status-not-started: #2a78d6; --status-in-progress: #eb6834;
  --status-in-review: #4a3aa7; --status-blocked: #e34948; --status-completed: #008300;
}
[data-accent="sakura"] {
  --canvas: #fbf0f2;
  --aurora-amber: rgba(247, 183, 200, 0.85);
  --aurora-lagoon: rgba(255, 217, 176, 0.85);
  --aurora-coral: rgba(184, 224, 210, 0.85);
  --glass-thin: rgba(255, 255, 255, 0.50);
  --glass-regular: rgba(255, 255, 255, 0.50);
  --glass-thick: rgba(255, 255, 255, 0.78);
  --glass-rim: rgba(255, 255, 255, 0.95);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-shade: rgba(0, 0, 0, 0.10);
  --ink: #2a1a20;
  --ink-muted: #6e5560;
  --accent: #b4315a;
  --on-accent: #ffffff;
  --focus: #2f6fb3;
  --load-light: #2f6e40; --load-moderate: #8a5a00; --load-moderate-fill: #d9a441; --load-over: #b3261e;
  --nav-active-bg: rgba(255, 255, 255, 0.85); --nav-active-fg: #2a1a20;
  --shadow-tint: 40, 25, 10;
  --status-not-started: #2a78d6; --status-in-progress: #eb6834;
  --status-in-review: #4a3aa7; --status-blocked: #e34948; --status-completed: #008300;
}
[data-accent="forest"] {
  --canvas: #0b120e;
  --aurora-amber: rgba(47, 143, 91, 0.5);
  --aurora-lagoon: rgba(201, 162, 39, 0.5);
  --aurora-coral: rgba(30, 111, 106, 0.5);
  --glass-thin: rgba(255, 255, 255, 0.06);
  --glass-regular: rgba(255, 255, 255, 0.06);
  --glass-thick: rgba(255, 255, 255, 0.08);
  --glass-rim: rgba(255, 255, 255, 0.20);
  --glass-edge: rgba(255, 255, 255, 0.12);
  --glass-shade: rgba(255, 255, 255, 0.10);
  --ink: #eef4ef;
  --ink-muted: #a3b3a7;
  --accent: #8fd694;
  --on-accent: #0b1a0f;
  --focus: #8cbcf0;
  --load-light: #8fd6a0; --load-moderate: #f5c46a; --load-moderate-fill: #e6b85c; --load-over: #ff8a73;
  --nav-active-bg: rgba(255, 255, 255, 0.12); --nav-active-fg: #eef4ef;
  --shadow-tint: 0, 0, 0;
  --status-not-started: #3987e5; --status-in-progress: #d95926;
  --status-in-review: #9085e9; --status-blocked: #e66767; --status-completed: #2e9e3a;
}
[data-accent="ocean"] {
  --canvas: #07111c;
  --aurora-amber: rgba(29, 111, 184, 0.55);
  --aurora-lagoon: rgba(25, 167, 160, 0.55);
  --aurora-coral: rgba(42, 95, 208, 0.55);
  --glass-thin: rgba(255, 255, 255, 0.06);
  --glass-regular: rgba(255, 255, 255, 0.06);
  --glass-thick: rgba(255, 255, 255, 0.08);
  --glass-rim: rgba(255, 255, 255, 0.20);
  --glass-edge: rgba(255, 255, 255, 0.12);
  --glass-shade: rgba(255, 255, 255, 0.10);
  --ink: #eaf3fb;
  --ink-muted: #9db0c3;
  --accent: #5cc8ff;
  --on-accent: #04121d;
  --focus: #8cbcf0;
  --load-light: #8fd6a0; --load-moderate: #f5c46a; --load-moderate-fill: #e6b85c; --load-over: #ff8a73;
  --nav-active-bg: rgba(255, 255, 255, 0.12); --nav-active-fg: #eaf3fb;
  --shadow-tint: 0, 0, 0;
  --status-not-started: #3987e5; --status-in-progress: #d95926;
  --status-in-review: #9085e9; --status-blocked: #e66767; --status-completed: #2e9e3a;
}
[data-accent="sunset"] {
  --canvas: #fff3ea;
  --aurora-amber: rgba(255, 154, 118, 0.8);
  --aurora-lagoon: rgba(255, 207, 107, 0.8);
  --aurora-coral: rgba(255, 122, 162, 0.8);
  --glass-thin: rgba(255, 255, 255, 0.50);
  --glass-regular: rgba(255, 255, 255, 0.50);
  --glass-thick: rgba(255, 255, 255, 0.78);
  --glass-rim: rgba(255, 255, 255, 0.95);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-shade: rgba(0, 0, 0, 0.10);
  --ink: #2b1810;
  --ink-muted: #6e5244;
  --accent: #c2410c;
  --on-accent: #ffffff;
  --focus: #2f6fb3;
  --load-light: #2f6e40; --load-moderate: #8a5a00; --load-moderate-fill: #d9a441; --load-over: #b3261e;
  --nav-active-bg: rgba(255, 255, 255, 0.85); --nav-active-fg: #2b1810;
  --shadow-tint: 40, 25, 10;
  --status-not-started: #2a78d6; --status-in-progress: #eb6834;
  --status-in-review: #4a3aa7; --status-blocked: #e34948; --status-completed: #008300;
}
[data-accent="lilac"] {
  --canvas: #f3f0fa;
  --aurora-amber: rgba(199, 184, 245, 0.85);
  --aurora-lagoon: rgba(169, 216, 240, 0.85);
  --aurora-coral: rgba(245, 198, 224, 0.85);
  --glass-thin: rgba(255, 255, 255, 0.50);
  --glass-regular: rgba(255, 255, 255, 0.50);
  --glass-thick: rgba(255, 255, 255, 0.78);
  --glass-rim: rgba(255, 255, 255, 0.95);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-shade: rgba(0, 0, 0, 0.10);
  --ink: #1e1a2b;
  --ink-muted: #5d5670;
  --accent: #5b3fa8;
  --on-accent: #ffffff;
  --focus: #2f6fb3;
  --load-light: #2f6e40; --load-moderate: #8a5a00; --load-moderate-fill: #d9a441; --load-over: #b3261e;
  --nav-active-bg: rgba(255, 255, 255, 0.85); --nav-active-fg: #1e1a2b;
  --shadow-tint: 40, 25, 10;
  --status-not-started: #2a78d6; --status-in-progress: #eb6834;
  --status-in-review: #4a3aa7; --status-blocked: #e34948; --status-completed: #008300;
}
[data-accent="graphite"] {
  --canvas: #121214;
  --aurora-amber: rgba(107, 107, 120, 0.45);
  --aurora-lagoon: rgba(68, 68, 79, 0.45);
  --aurora-coral: rgba(138, 138, 153, 0.45);
  --glass-thin: rgba(255, 255, 255, 0.06);
  --glass-regular: rgba(255, 255, 255, 0.06);
  --glass-thick: rgba(255, 255, 255, 0.08);
  --glass-rim: rgba(255, 255, 255, 0.20);
  --glass-edge: rgba(255, 255, 255, 0.12);
  --glass-shade: rgba(255, 255, 255, 0.10);
  --ink: #f2f2f4;
  --ink-muted: #a6a6b0;
  --accent: #f2f2f2;
  --on-accent: #121214;
  --focus: #8cbcf0;
  --load-light: #8fd6a0; --load-moderate: #f5c46a; --load-moderate-fill: #e6b85c; --load-over: #ff8a73;
  --nav-active-bg: rgba(255, 255, 255, 0.12); --nav-active-fg: #f2f2f4;
  --shadow-tint: 0, 0, 0;
  --status-not-started: #3987e5; --status-in-progress: #d95926;
  --status-in-review: #9085e9; --status-blocked: #e66767; --status-completed: #2e9e3a;
}

/* Light/dark toggle — each theme has one "native" register above and a
   designed counterpart below for the other register, layered on via
   [data-theme] so switching modes keeps the selected theme's hue family.
   Structural tokens (glass/focus/load/status/shadow-tint) reuse the same
   dark-register or light-register set across every counterpart here. */
[data-accent="clear"][data-theme="dark"] {
  --canvas: #0a1416;
  --aurora-amber: rgba(127, 211, 207, 0.5);
  --aurora-lagoon: rgba(169, 200, 245, 0.5);
  --aurora-coral: rgba(255, 207, 174, 0.5);
  --glass-thin: rgba(255, 255, 255, 0.06); --glass-regular: rgba(255, 255, 255, 0.06); --glass-thick: rgba(255, 255, 255, 0.08);
  --glass-rim: rgba(255, 255, 255, 0.20); --glass-edge: rgba(255, 255, 255, 0.12); --glass-shade: rgba(255, 255, 255, 0.10);
  --ink: #eef7f6; --ink-muted: #9bb3b0;
  --accent: #3fb3a8; --on-accent: #04201c;
  --focus: #8cbcf0;
  --load-light: #8fd6a0; --load-moderate: #f5c46a; --load-moderate-fill: #e6b85c; --load-over: #ff8a73;
  --nav-active-bg: rgba(255, 255, 255, 0.12); --nav-active-fg: #eef7f6;
  --shadow-tint: 0, 0, 0;
  --status-not-started: #3987e5; --status-in-progress: #d95926;
  --status-in-review: #9085e9; --status-blocked: #e66767; --status-completed: #2e9e3a;
}
[data-accent="sage"][data-theme="dark"] {
  --canvas: #0f130c;
  --aurora-amber: rgba(212, 180, 131, 0.5);
  --aurora-lagoon: rgba(168, 184, 148, 0.5);
  --aurora-coral: rgba(201, 168, 148, 0.5);
  --glass-thin: rgba(255, 255, 255, 0.06); --glass-regular: rgba(255, 255, 255, 0.06); --glass-thick: rgba(255, 255, 255, 0.08);
  --glass-rim: rgba(255, 255, 255, 0.20); --glass-edge: rgba(255, 255, 255, 0.12); --glass-shade: rgba(255, 255, 255, 0.10);
  --ink: #eef0e6; --ink-muted: #a8ad96;
  --accent: #7fa05a; --on-accent: #0e1608;
  --focus: #8cbcf0;
  --load-light: #8fd6a0; --load-moderate: #f5c46a; --load-moderate-fill: #e6b85c; --load-over: #ff8a73;
  --nav-active-bg: rgba(255, 255, 255, 0.12); --nav-active-fg: #eef0e6;
  --shadow-tint: 0, 0, 0;
  --status-not-started: #3987e5; --status-in-progress: #d95926;
  --status-in-review: #9085e9; --status-blocked: #e66767; --status-completed: #2e9e3a;
}
[data-accent="pop"][data-theme="dark"] {
  --canvas: #140d0a;
  --aurora-amber: rgba(159, 227, 196, 0.5);
  --aurora-lagoon: rgba(255, 224, 122, 0.5);
  --aurora-coral: rgba(255, 179, 138, 0.5);
  --glass-thin: rgba(255, 255, 255, 0.06); --glass-regular: rgba(255, 255, 255, 0.06); --glass-thick: rgba(255, 255, 255, 0.08);
  --glass-rim: rgba(255, 255, 255, 0.20); --glass-edge: rgba(255, 255, 255, 0.12); --glass-shade: rgba(255, 255, 255, 0.10);
  --ink: #faf3ea; --ink-muted: #b8a99e;
  --accent: #ff6a4d; --on-accent: #2a0a02;
  --focus: #8cbcf0;
  --load-light: #8fd6a0; --load-moderate: #f5c46a; --load-moderate-fill: #e6b85c; --load-over: #ff8a73;
  --nav-active-bg: rgba(255, 255, 255, 0.12); --nav-active-fg: #faf3ea;
  --shadow-tint: 0, 0, 0;
  --status-not-started: #3987e5; --status-in-progress: #d95926;
  --status-in-review: #9085e9; --status-blocked: #e66767; --status-completed: #2e9e3a;
}
[data-accent="sakura"][data-theme="dark"] {
  --canvas: #140a0e;
  --aurora-amber: rgba(247, 183, 200, 0.5);
  --aurora-lagoon: rgba(255, 217, 176, 0.5);
  --aurora-coral: rgba(184, 224, 210, 0.5);
  --glass-thin: rgba(255, 255, 255, 0.06); --glass-regular: rgba(255, 255, 255, 0.06); --glass-thick: rgba(255, 255, 255, 0.08);
  --glass-rim: rgba(255, 255, 255, 0.20); --glass-edge: rgba(255, 255, 255, 0.12); --glass-shade: rgba(255, 255, 255, 0.10);
  --ink: #f7ecf0; --ink-muted: #b89aa3;
  --accent: #e8537f; --on-accent: #2a0612;
  --focus: #8cbcf0;
  --load-light: #8fd6a0; --load-moderate: #f5c46a; --load-moderate-fill: #e6b85c; --load-over: #ff8a73;
  --nav-active-bg: rgba(255, 255, 255, 0.12); --nav-active-fg: #f7ecf0;
  --shadow-tint: 0, 0, 0;
  --status-not-started: #3987e5; --status-in-progress: #d95926;
  --status-in-review: #9085e9; --status-blocked: #e66767; --status-completed: #2e9e3a;
}
[data-accent="sunset"][data-theme="dark"] {
  --canvas: #160d07;
  --aurora-amber: rgba(255, 154, 118, 0.5);
  --aurora-lagoon: rgba(255, 207, 107, 0.5);
  --aurora-coral: rgba(255, 122, 162, 0.5);
  --glass-thin: rgba(255, 255, 255, 0.06); --glass-regular: rgba(255, 255, 255, 0.06); --glass-thick: rgba(255, 255, 255, 0.08);
  --glass-rim: rgba(255, 255, 255, 0.20); --glass-edge: rgba(255, 255, 255, 0.12); --glass-shade: rgba(255, 255, 255, 0.10);
  --ink: #fbeee2; --ink-muted: #b89e8a;
  --accent: #f2652a; --on-accent: #2a0f02;
  --focus: #8cbcf0;
  --load-light: #8fd6a0; --load-moderate: #f5c46a; --load-moderate-fill: #e6b85c; --load-over: #ff8a73;
  --nav-active-bg: rgba(255, 255, 255, 0.12); --nav-active-fg: #fbeee2;
  --shadow-tint: 0, 0, 0;
  --status-not-started: #3987e5; --status-in-progress: #d95926;
  --status-in-review: #9085e9; --status-blocked: #e66767; --status-completed: #2e9e3a;
}
[data-accent="lilac"][data-theme="dark"] {
  --canvas: #0e0b18;
  --aurora-amber: rgba(199, 184, 245, 0.5);
  --aurora-lagoon: rgba(169, 216, 240, 0.5);
  --aurora-coral: rgba(245, 198, 224, 0.5);
  --glass-thin: rgba(255, 255, 255, 0.06); --glass-regular: rgba(255, 255, 255, 0.06); --glass-thick: rgba(255, 255, 255, 0.08);
  --glass-rim: rgba(255, 255, 255, 0.20); --glass-edge: rgba(255, 255, 255, 0.12); --glass-shade: rgba(255, 255, 255, 0.10);
  --ink: #efeaf7; --ink-muted: #a79fc0;
  --accent: #9075d6; --on-accent: #130a28;
  --focus: #8cbcf0;
  --load-light: #8fd6a0; --load-moderate: #f5c46a; --load-moderate-fill: #e6b85c; --load-over: #ff8a73;
  --nav-active-bg: rgba(255, 255, 255, 0.12); --nav-active-fg: #efeaf7;
  --shadow-tint: 0, 0, 0;
  --status-not-started: #3987e5; --status-in-progress: #d95926;
  --status-in-review: #9085e9; --status-blocked: #e66767; --status-completed: #2e9e3a;
}
[data-accent="midnight"][data-theme="light"] {
  --canvas: #f4efe6;
  --aurora-amber: rgba(232, 144, 44, 0.85);
  --aurora-lagoon: rgba(19, 168, 158, 0.85);
  --aurora-coral: rgba(226, 85, 63, 0.85);
  --glass-thin: rgba(255, 255, 255, 0.50); --glass-regular: rgba(255, 255, 255, 0.50); --glass-thick: rgba(255, 255, 255, 0.78);
  --glass-rim: rgba(255, 255, 255, 0.95); --glass-edge: rgba(255, 255, 255, 0.85); --glass-shade: rgba(0, 0, 0, 0.10);
  --ink: #211a0c; --ink-muted: #6b5d48;
  --accent: #a5690f; --on-accent: #ffffff;
  --focus: #2f6fb3;
  --load-light: #2f6e40; --load-moderate: #8a5a00; --load-moderate-fill: #d9a441; --load-over: #b3261e;
  --nav-active-bg: rgba(255, 255, 255, 0.85); --nav-active-fg: #211a0c;
  --shadow-tint: 40, 25, 10;
  --status-not-started: #2a78d6; --status-in-progress: #eb6834;
  --status-in-review: #4a3aa7; --status-blocked: #e34948; --status-completed: #008300;
}
[data-accent="forest"][data-theme="light"] {
  --canvas: #eef5ee;
  --aurora-amber: rgba(47, 143, 91, 0.85);
  --aurora-lagoon: rgba(201, 162, 39, 0.85);
  --aurora-coral: rgba(30, 111, 106, 0.85);
  --glass-thin: rgba(255, 255, 255, 0.50); --glass-regular: rgba(255, 255, 255, 0.50); --glass-thick: rgba(255, 255, 255, 0.78);
  --glass-rim: rgba(255, 255, 255, 0.95); --glass-edge: rgba(255, 255, 255, 0.85); --glass-shade: rgba(0, 0, 0, 0.10);
  --ink: #10200f; --ink-muted: #51614e;
  --accent: #2f7d47; --on-accent: #ffffff;
  --focus: #2f6fb3;
  --load-light: #2f6e40; --load-moderate: #8a5a00; --load-moderate-fill: #d9a441; --load-over: #b3261e;
  --nav-active-bg: rgba(255, 255, 255, 0.85); --nav-active-fg: #10200f;
  --shadow-tint: 40, 25, 10;
  --status-not-started: #2a78d6; --status-in-progress: #eb6834;
  --status-in-review: #4a3aa7; --status-blocked: #e34948; --status-completed: #008300;
}
[data-accent="ocean"][data-theme="light"] {
  --canvas: #eaf2fb;
  --aurora-amber: rgba(29, 111, 184, 0.85);
  --aurora-lagoon: rgba(25, 167, 160, 0.85);
  --aurora-coral: rgba(42, 95, 208, 0.85);
  --glass-thin: rgba(255, 255, 255, 0.50); --glass-regular: rgba(255, 255, 255, 0.50); --glass-thick: rgba(255, 255, 255, 0.78);
  --glass-rim: rgba(255, 255, 255, 0.95); --glass-edge: rgba(255, 255, 255, 0.85); --glass-shade: rgba(0, 0, 0, 0.10);
  --ink: #0c1f33; --ink-muted: #4d6478;
  --accent: #0f6fa8; --on-accent: #ffffff;
  --focus: #2f6fb3;
  --load-light: #2f6e40; --load-moderate: #8a5a00; --load-moderate-fill: #d9a441; --load-over: #b3261e;
  --nav-active-bg: rgba(255, 255, 255, 0.85); --nav-active-fg: #0c1f33;
  --shadow-tint: 40, 25, 10;
  --status-not-started: #2a78d6; --status-in-progress: #eb6834;
  --status-in-review: #4a3aa7; --status-blocked: #e34948; --status-completed: #008300;
}
[data-accent="graphite"][data-theme="light"] {
  --canvas: #f1f1f2;
  --aurora-amber: rgba(107, 107, 120, 0.85);
  --aurora-lagoon: rgba(68, 68, 79, 0.85);
  --aurora-coral: rgba(138, 138, 153, 0.85);
  --glass-thin: rgba(255, 255, 255, 0.50); --glass-regular: rgba(255, 255, 255, 0.50); --glass-thick: rgba(255, 255, 255, 0.78);
  --glass-rim: rgba(255, 255, 255, 0.95); --glass-edge: rgba(255, 255, 255, 0.85); --glass-shade: rgba(0, 0, 0, 0.10);
  --ink: #1c1c1e; --ink-muted: #67676f;
  --accent: #1c1c1e; --on-accent: #ffffff;
  --focus: #2f6fb3;
  --load-light: #2f6e40; --load-moderate: #8a5a00; --load-moderate-fill: #d9a441; --load-over: #b3261e;
  --nav-active-bg: rgba(255, 255, 255, 0.85); --nav-active-fg: #1c1c1e;
  --shadow-tint: 40, 25, 10;
  --status-not-started: #2a78d6; --status-in-progress: #eb6834;
  --status-in-review: #4a3aa7; --status-blocked: #e34948; --status-completed: #008300;
}

:root {
  --course-0: #a8763e; --course-1: #3f7cac; --course-2: #5b8266; --course-3: #8a5cb8;
  --course-4: #b6553f; --course-5: #4a8f8f; --course-6: #b3893f; --course-7: #6b7fd6;
  /* Derived once from the per-theme tokens above; adapts automatically. */
  --ink-faint: color-mix(in srgb, var(--ink-muted) 60%, var(--canvas));
  --accent-hover: color-mix(in srgb, var(--accent) 85%, var(--ink));
  --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--canvas));
  --shadow-glass-sm: 0 1px 2px rgba(var(--shadow-tint), 0.08), 0 2px 6px rgba(var(--shadow-tint), 0.06);
  --shadow-glass-md: 0 2px 6px rgba(var(--shadow-tint), 0.08), 0 14px 34px rgba(var(--shadow-tint), 0.16);
  --shadow-glass-lg: 0 10px 24px rgba(var(--shadow-tint), 0.14), 0 28px 60px rgba(var(--shadow-tint), 0.26);
  --shadow-specular: inset 0 1px 0 var(--glass-rim), inset 0 -1px 1px rgba(var(--shadow-tint), 0.08);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; --radius-pill: 999px;
  --blur-thin: blur(14px) saturate(190%);
  --blur-regular: blur(24px) saturate(220%);
  --blur-thick: blur(40px) saturate(230%);
  --target-min: 44px; --target-compact: 36px;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: var(--radius-md);
}

/* Glass intensity — scales how strong the blur/backdrop-saturate reads;
   "balanced" matches the default values above. */
[data-glass="subtle"] {
  --blur-thin: blur(8px) saturate(160%);
  --blur-regular: blur(14px) saturate(180%);
  --blur-thick: blur(22px) saturate(190%);
}
[data-glass="vivid"] {
  --blur-thin: blur(20px) saturate(240%);
  --blur-regular: blur(34px) saturate(260%);
  --blur-thick: blur(54px) saturate(270%);
}

/* Reduce transparency (accessibility) — collapses the thin/regular glass
   tiers to the already-opaque "thick" level and turns blur off everywhere,
   via the same --blur-* indirection every glass surface already reads. */
[data-reduce-transparency="true"] {
  --blur-thin: none; --blur-regular: none; --blur-thick: none;
  --glass-thin: var(--glass-thick);
  --glass-regular: var(--glass-thick);
}

* { box-sizing: border-box; }

html, body { margin: 0; overflow-x: hidden; }
/* Tells the browser to render native widget chrome (select popups,
   scrollbars) in matching light/dark colors, so an open <select>'s
   dropdown list is actually readable against a dark theme instead of
   defaulting to the OS's light popup regardless of our own styling. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body {
  background:
    radial-gradient(720px circle at 6% 0%, var(--aurora-amber), transparent 72%),
    radial-gradient(640px circle at 100% 12%, var(--aurora-lagoon), transparent 72%),
    radial-gradient(700px circle at 30% 115%, var(--aurora-coral), transparent 72%),
    var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px; line-height: 22px;
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.icon { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.icon svg { display: block; width: 16px; height: 16px; }

#app { margin: 0 auto; }
.app-shell { display: flex; min-height: 100vh; align-items: flex-start; }

/* ---------- Glass: three thicknesses ---------- */
.sg-glass, .sg-glass-thin, .sg-glass-thick {
  position: relative;
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-rim);
  border-bottom-color: var(--glass-shade);
  box-shadow: var(--shadow-glass-md), var(--shadow-specular);
}
.sg-glass       { background: var(--glass-regular); backdrop-filter: var(--blur-regular); -webkit-backdrop-filter: var(--blur-regular); }
.sg-glass-thin  { background: var(--glass-thin);    backdrop-filter: var(--blur-thin);    -webkit-backdrop-filter: var(--blur-thin); }
.sg-glass-thick { background: var(--glass-thick);   backdrop-filter: var(--blur-thick);   -webkit-backdrop-filter: var(--blur-thick); box-shadow: var(--shadow-glass-lg), var(--shadow-specular); }
.sg-glass::before, .sg-glass-thin::before, .sg-glass-thick::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, var(--glass-rim) 0%, transparent 38%);
  opacity: .35;
}
.sg-glass > *, .sg-glass-thin > *, .sg-glass-thick > * { position: relative; }

@media (prefers-reduced-transparency: reduce) {
  .sg-glass, .sg-glass-thin, .sg-glass-thick { background: var(--glass-thick); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sg-glass, .sg-glass-thin { background: var(--glass-thick); }
}

/* ---------- Button ---------- */
.sg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--target-min); padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  font: 600 15px/1 var(--font-body);
  color: var(--ink); cursor: pointer; text-decoration: none;
  background: var(--glass-regular);
  backdrop-filter: var(--blur-regular); -webkit-backdrop-filter: var(--blur-regular);
  border: 1px solid var(--glass-edge); border-top-color: var(--glass-rim); border-bottom-color: var(--glass-shade);
  box-shadow: var(--shadow-glass-sm), var(--shadow-specular);
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
}
.sg-btn:hover { background: var(--glass-thick); box-shadow: var(--shadow-glass-md), var(--shadow-specular); }
.sg-btn:active { transform: scale(.97); }
.sg-btn svg { width: 18px; height: 18px; flex: none; }
.sg-btn[hidden] { display: none; }
.sg-btn--primary { background: var(--accent); color: var(--on-accent); border-color: transparent; border-top-color: var(--glass-rim); }
.sg-btn--primary:hover { background: var(--accent-hover); }
.sg-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sg-btn--ghost:hover { background: var(--accent-soft); box-shadow: none; }
.sg-btn--danger { color: var(--load-over); margin-right: auto; }
.sg-btn--danger.is-confirming { background: var(--load-over); color: #fff; border-color: transparent; }
.sg-btn--icon { width: var(--target-min); padding: 0; }
.sg-btn[disabled] { color: var(--ink-faint); cursor: not-allowed; box-shadow: none; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 248px; flex: none;
  position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-5) var(--space-4);
  background: var(--glass-regular);
  backdrop-filter: var(--blur-regular); -webkit-backdrop-filter: var(--blur-regular);
  border-right: 1px solid var(--glass-edge); border-top-color: var(--glass-rim);
  box-shadow: var(--shadow-glass-md);
  transition: width .18s ease, padding .18s ease;
}

/* Collapsed icon-rail: toggled manually via #sidebar-toggle-btn, and
   forced on automatically (regardless of the manual preference) while
   the window is too narrow for the full sidebar — see
   handleSidebarResize() / isSidebarCollapsed() in app.js. */
.sidebar.collapsed { width: 72px; padding-left: var(--space-2); padding-right: var(--space-2); }
.sidebar.collapsed .wordmark { display: none; }
.sidebar.collapsed .sidebar-top .sidebar-section-header { justify-content: center; }
.sidebar.collapsed .sidebar-upload { width: 40px; height: 40px; padding: 0; gap: 0; border-radius: 50%; font-size: 0; align-self: center; }
.sidebar.collapsed .sidebar-nav .tab-btn { justify-content: center; padding: 0; gap: 0; font-size: 0; }
.sidebar.collapsed .sidebar-section { display: none; }
.sidebar.collapsed .sidebar-bottom { flex-direction: column; gap: var(--space-2); }
.sidebar.collapsed .account-card { width: 40px; padding: 4px; justify-content: center; border-color: transparent; background: transparent; }
.sidebar.collapsed .account-card:hover { background: var(--glass-thin); }
.sidebar.collapsed .account-info { display: none; }
.sidebar-top { display: flex; flex-direction: column; gap: var(--space-3); }
.wordmark { font: 700 20px/1 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.sidebar-upload { width: 100%; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav[hidden] { display: none; }
.tab-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 40px; padding: 0 var(--space-4);
  border: 0; border-radius: var(--radius-pill); background: transparent;
  font: 500 14px/1 var(--font-body); color: var(--ink-muted); cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.tab-btn svg { width: 16px; height: 16px; flex: none; }
.tab-btn:hover { color: var(--ink); }
.sidebar-nav .tab-btn {
  justify-content: flex-start; width: 100%; min-height: 40px; padding: 0 var(--space-3);
  border-radius: var(--radius-md); color: var(--ink-muted); background: transparent; box-shadow: none;
}
.sidebar-nav .tab-btn:hover { background: var(--nav-active-bg); color: var(--ink); }
.sidebar-nav .tab-btn.active { background: var(--nav-active-bg); color: var(--nav-active-fg); font-weight: 600; box-shadow: none; }

.sidebar-section { display: flex; flex-direction: column; gap: var(--space-2); }
.sidebar-section[hidden] { display: none; }
.sidebar-label { margin: 0; font: 600 12px/16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.sidebar-section-header { display: flex; align-items: center; justify-content: space-between; }
.icon-toggle {
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.icon-toggle svg { width: 14px; height: 14px; }
.icon-toggle:hover { background: var(--glass-thin); color: var(--ink); }

.sidebar-courses { display: flex; flex-direction: column; gap: 2px; }
.sidebar-courses[hidden] { display: none; }
.course-item {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  min-height: 36px; padding: 0 var(--space-2); text-align: left;
  border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer;
  font: 500 13px/1 var(--font-body); color: var(--ink-muted);
}
.course-item:hover { background: var(--glass-thin); color: var(--ink); }
.course-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.course-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-item-count { font-variant-numeric: tabular-nums; color: var(--ink-faint); font-size: 12px; flex: none; }
.sg-dot, .course-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.course-dot-all { background: var(--ink-muted); }
.course-dot.c0 { background: var(--course-0); } .course-dot.c1 { background: var(--course-1); }
.course-dot.c2 { background: var(--course-2); } .course-dot.c3 { background: var(--course-3); }
.course-dot.c4 { background: var(--course-4); } .course-dot.c5 { background: var(--course-5); }
.course-dot.c6 { background: var(--course-6); } .course-dot.c7 { background: var(--course-7); }

.sidebar-bottom { margin-top: auto; display: flex; align-items: center; gap: var(--space-2); }
.account-card {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); text-align: left;
  padding: var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--glass-edge);
  background: var(--glass-thin); cursor: pointer;
}
.account-card:hover { background: var(--glass-thick); }
.account-avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font: 700 12px/1 var(--font-body);
}
.account-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.account-name { font: 600 13px/18px var(--font-body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-status { font: 500 12px/16px var(--font-body); color: var(--ink-faint); }
.account-status.is-synced { color: var(--load-light); }
.account-status.is-synced::before { content: "● "; }

/* ---------- Main column / header ---------- */
.main-col { flex: 1; min-width: 0; padding: var(--space-5) var(--space-6) 60px; }
.main-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.main-header-text { min-width: 0; }
.header-subtitle { margin: 0 0 2px; font: 600 12px/16px var(--font-body); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; }
.main-header-text h1 { margin: 0; font: 600 30px/36px var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.main-header-actions { display: flex; align-items: center; gap: var(--space-2); }
.main-header-actions[hidden] { display: none; }

.search-box {
  display: flex; align-items: center; gap: var(--space-2); min-width: 220px;
  min-height: var(--target-min); padding: 0 var(--space-3);
  border-radius: var(--radius-pill); background: var(--glass-regular);
  border: 1px solid var(--glass-edge); border-top-color: var(--glass-rim);
  box-shadow: var(--shadow-glass-sm), var(--shadow-specular);
}
.search-box .icon { color: var(--ink-faint); }
.search-box input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 400 14px/1 var(--font-body); color: var(--ink); }
.search-box input::placeholder { color: var(--ink-faint); }
.search-kbd {
  flex: none; font: 600 11px/1 var(--font-body); color: var(--ink-faint);
  padding: 3px 6px; border-radius: 6px; background: var(--glass-thick); border: 1px solid var(--glass-edge);
}

.filter-note { font: 500 13px/18px var(--font-body); color: var(--ink-muted); margin: 0 0 var(--space-4); }
.filter-note[hidden] { display: none; }

/* ---------- Stat row ---------- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.stat-row[hidden] { display: none; }
.stat-tile-label { display: block; font: 600 12px/16px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--space-2); }
.stat-tile-value { display: block; font: 600 26px/30px var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); }
.stat-tile-sub { display: block; font: 500 13px/18px var(--font-body); color: var(--ink-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-load-light { color: var(--load-light); }
.stat-load-moderate { color: var(--load-moderate); }
.stat-load-overloaded { color: var(--load-over); }
.stat-load-bar { margin-top: var(--space-2); height: 6px; border-radius: var(--radius-pill); background: var(--glass-shade); overflow: hidden; }
.stat-load-bar-fill { height: 100%; border-radius: var(--radius-pill); }
.stat-load-bar-fill.stat-load-light { background: var(--load-light); }
.stat-load-bar-fill.stat-load-moderate { background: var(--load-moderate-fill, var(--load-moderate)); }
.stat-load-bar-fill.stat-load-overloaded { background: var(--load-over); }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--target-compact); padding: 0 var(--space-3);
  border-radius: var(--radius-pill); cursor: pointer;
  font: 500 13px/1 var(--font-body); color: var(--ink);
  background: var(--glass-regular);
  border: 1px solid var(--glass-edge); border-top-color: var(--glass-rim);
  box-shadow: var(--shadow-glass-sm), var(--shadow-specular);
}
.chip:hover { background: var(--accent-soft); }
.chip.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--accent); }

.view[hidden] { display: none; }

/* ---------- Generic panels (What-now, Today, Upcoming, Insights, Grades) ---------- */
section, .today-panel, .upcoming-panel {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  background: var(--glass-thin);
  backdrop-filter: var(--blur-thin); -webkit-backdrop-filter: var(--blur-thin);
  border: 1px solid var(--glass-edge); border-top-color: var(--glass-rim); border-bottom-color: var(--glass-shade);
  box-shadow: var(--shadow-glass-md), var(--shadow-specular);
}
section h2, .today-panel h2, .upcoming-panel h2, .panel-title { margin: 0 0 var(--space-3); font: 600 17px/24px var(--font-display); }

.empty-state {
  border-radius: var(--radius-lg); padding: var(--space-12) var(--space-5); text-align: center; color: var(--ink-muted);
  background: var(--glass-thin);
  backdrop-filter: var(--blur-thin); -webkit-backdrop-filter: var(--blur-thin);
  border: 1px dashed var(--glass-edge);
}
.empty-state .hint { font: 400 13px/18px var(--font-body); max-width: 480px; margin: var(--space-3) auto 0; }

/* ---------- Banners ---------- */
.error-banner, .overload-banner {
  display: flex; gap: var(--space-3); align-items: flex-start; flex-wrap: wrap;
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  background: var(--glass-regular);
  backdrop-filter: var(--blur-regular); -webkit-backdrop-filter: var(--blur-regular);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-glass-sm), var(--shadow-specular);
}
.overload-banner[hidden] { display: none; }
.overload-icon {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: grid; place-items: center; background: var(--load-over); color: var(--on-accent);
  font: 700 15px/1 var(--font-display);
}
.overload-body { flex: 1; min-width: 0; }
.overload-title { font: 600 15px/22px var(--font-body); color: var(--load-over); margin-bottom: var(--space-2); }
.overload-days { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.overload-day-pill {
  font: 500 12px/1 var(--font-body); padding: 5px var(--space-3); border-radius: var(--radius-pill);
  background: var(--glass-thick); border: 1px solid var(--glass-edge); color: var(--ink);
}
.overload-hint { font: 400 13px/18px var(--font-body); color: var(--ink-muted); }
.error-banner { color: var(--load-over); font: 500 13px/18px var(--font-body); }

/* ---------- Board (kanban) ---------- */
.board-view { background: none; border: none; box-shadow: none; padding: 0; }
.board-columns {
  display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-1);
  scrollbar-width: thin; scrollbar-color: var(--glass-edge) transparent;
}
.board-columns::-webkit-scrollbar { height: 8px; }
.board-columns::-webkit-scrollbar-track { background: transparent; }
.board-columns::-webkit-scrollbar-thumb { background: var(--glass-edge); border-radius: 999px; }
.board-columns::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }
.board-col {
  border-radius: var(--radius-lg); padding: var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-2);
  min-height: 200px; max-height: calc(100vh - 220px);
  background: var(--glass-thin);
  backdrop-filter: var(--blur-thin); -webkit-backdrop-filter: var(--blur-thin);
  border: 1px solid var(--glass-edge); border-top-color: var(--glass-rim); border-bottom-color: var(--glass-shade);
  box-shadow: var(--shadow-glass-md), var(--shadow-specular);
}
.board-col-list {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); padding: 0 2px 2px;
  scrollbar-width: thin; scrollbar-color: var(--glass-edge) transparent;
}
.board-col-list::-webkit-scrollbar { width: 8px; }
.board-col-list::-webkit-scrollbar-track { background: transparent; }
.board-col-list::-webkit-scrollbar-thumb { background: var(--glass-edge); border-radius: 999px; }
.board-col-list::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }
.board-col-list.drag-over { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); border-radius: var(--radius-md); }
.board-col-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-1); }
.board-col-not-started .board-col-header { --board-col-dot: var(--status-not-started); }
.board-col-in-progress .board-col-header { --board-col-dot: var(--status-in-progress); }
.board-col-in-review .board-col-header    { --board-col-dot: var(--status-in-review); }
.board-col-blocked .board-col-header      { --board-col-dot: var(--status-blocked); }
.board-col-completed .board-col-header    { --board-col-dot: var(--status-completed); }
.board-col-badge {
  flex: none; min-width: 26px; height: 26px; padding: 0 2px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--board-col-dot, var(--accent)) 30%, transparent);
  color: var(--board-col-dot, var(--accent));
  font: 700 12px/1 var(--font-body); font-variant-numeric: tabular-nums;
}
.board-col-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.board-col-title { font: 600 15px/20px var(--font-display); }
.board-col-sub { font: 500 11px/14px var(--font-body); color: var(--ink-muted); }
.board-col-empty { font: 500 13px/18px var(--font-body); color: var(--ink-muted); text-align: center; padding: var(--space-4) var(--space-2); }
.kanban-card.is-done { opacity: .7; }
.kanban-card.is-done .card-name { text-decoration: line-through; text-decoration-color: var(--ink-muted); }
.board-col-add {
  display: inline-flex; align-items: center; gap: var(--space-2); justify-content: flex-start;
  min-height: var(--target-min); padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer;
  font: 600 13px/1 var(--font-body); color: var(--ink-muted);
}
.board-col-add:hover { background: var(--accent-soft); color: var(--accent); }
.board-col-add svg { width: 16px; height: 16px; flex: none; }

.kanban-card {
  border-radius: var(--radius-md); padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
  cursor: grab; transition: transform .15s ease, box-shadow .15s ease;
  background: var(--glass-regular); backdrop-filter: var(--blur-regular); -webkit-backdrop-filter: var(--blur-regular);
  border: 1px solid var(--glass-edge); border-top-color: var(--glass-rim); border-bottom-color: var(--glass-shade);
  box-shadow: var(--shadow-glass-sm), var(--shadow-specular);
}
.kanban-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-glass-md), var(--shadow-specular); }
.kanban-card.dragging { transform: rotate(-1.5deg) scale(1.02); box-shadow: var(--shadow-glass-lg), var(--shadow-specular); cursor: grabbing; opacity: 1; }
.card-top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.card-course-chip {
  display: inline-flex; align-items: center;
  font: 700 11px/16px var(--font-body); letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-sm);
}
.card-course-chip.c0 { background: color-mix(in srgb, var(--course-0) 28%, transparent); color: var(--course-0); }
.card-course-chip.c1 { background: color-mix(in srgb, var(--course-1) 28%, transparent); color: var(--course-1); }
.card-course-chip.c2 { background: color-mix(in srgb, var(--course-2) 28%, transparent); color: var(--course-2); }
.card-course-chip.c3 { background: color-mix(in srgb, var(--course-3) 28%, transparent); color: var(--course-3); }
.card-course-chip.c4 { background: color-mix(in srgb, var(--course-4) 28%, transparent); color: var(--course-4); }
.card-course-chip.c5 { background: color-mix(in srgb, var(--course-5) 28%, transparent); color: var(--course-5); }
.card-course-chip.c6 { background: color-mix(in srgb, var(--course-6) 28%, transparent); color: var(--course-6); }
.card-course-chip.c7 { background: color-mix(in srgb, var(--course-7) 28%, transparent); color: var(--course-7); }
.card-name { font: 600 15px/22px var(--font-body); color: var(--ink); }
.card-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font: 500 13px/18px var(--font-body); color: var(--ink-muted); }
.due-soon { color: var(--load-moderate); font-weight: 600; }
.due-overdue { color: var(--load-over); font-weight: 600; }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.card-hours { display: inline-flex; align-items: center; gap: 4px; font: 600 13px/18px var(--font-body); font-variant-numeric: tabular-nums; color: var(--ink-muted); white-space: nowrap; }
.card-hours.overloaded { color: var(--load-over); }
.card-status-select {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; max-width: 128px; padding: 0 8px; border-radius: var(--radius-pill);
  font: 500 12px/1 var(--font-body); color: var(--ink);
  background-color: var(--glass-thick);
  border: 1px solid var(--glass-edge); cursor: pointer;
}
.pill-manual, .pill { display: inline-block; font: 600 11px/16px var(--font-body); padding: 2px 8px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); }
.pill-overdue { background: var(--load-over); color: #fff; }

/* ---------- What-now / task list rows ---------- */
.whatnow-panel {
  border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4);
  background: var(--glass-regular);
  backdrop-filter: var(--blur-regular); -webkit-backdrop-filter: var(--blur-regular);
  border: 1px solid var(--glass-edge); border-top-color: var(--glass-rim); border-bottom-color: var(--glass-shade);
  box-shadow: var(--shadow-glass-md), var(--shadow-specular);
}
.whatnow-panel h2 { margin: 0 0 var(--space-3); font: 600 17px/24px var(--font-display); }
.whatnow-input-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); align-items: center; }
.whatnow-input-row input {
  flex: 1; max-width: 200px; min-height: var(--target-min); padding: 0 var(--space-3);
  border-radius: var(--radius-sm); font: 400 15px/22px var(--font-body); color: var(--ink);
  background: var(--glass-thick); border: 1px solid var(--glass-shade); box-shadow: inset 0 1px 2px var(--glass-shade);
}
.whatnow-presets { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.whatnow-result:empty { display: none; }
.whatnow-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); counter-reset: whatnow; }
.whatnow-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--glass-regular); border: 1px solid var(--glass-edge); }
.whatnow-item::before {
  counter-increment: whatnow; content: counter(whatnow); font: 600 13px/1 var(--font-display);
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--accent); color: var(--on-accent);
}
.whatnow-main { flex: 1; min-width: 0; }
.whatnow-name { font: 600 15px/22px var(--font-body); color: var(--ink); }
.whatnow-meta { font: 500 13px/18px var(--font-body); color: var(--ink-muted); margin-top: 2px; }
.whatnow-time { font: 600 15px/1 var(--font-display); color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.whatnow-leftover { font: 400 13px/18px var(--font-body); color: var(--ink-muted); margin: var(--space-2) 0 0; }

.today-header, .upcoming-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.weekly-view-toggle { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.weekly-view-toggle-label { font: 500 13px/1 var(--font-body); color: var(--ink-muted); }
.today-header h2, .upcoming-header h2 { margin: 0; font: 600 17px/24px var(--font-display); }
.today-load { font: 500 13px/18px var(--font-body); color: var(--ink-muted); }
.today-load.over { color: var(--load-over); font-weight: 600; }
.legend { display: flex; gap: var(--space-4); font: 500 13px/18px var(--font-body); color: var(--ink-muted); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-ok { background: var(--load-light); }
.dot-moderate { background: var(--load-moderate); }
.dot-over { background: var(--load-over); }

.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.task-item {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border-radius: var(--radius-md); background: var(--glass-regular); border: 1px solid var(--glass-edge);
}
.task-main { flex: 1; min-width: 0; }
.task-name { font: 600 15px/22px var(--font-body); color: var(--ink); }
.task-meta { font: 500 13px/18px var(--font-body); color: var(--ink-muted); margin-top: 2px; }
.task-hours { display: inline-flex; align-items: center; gap: 4px; font: 600 13px/18px var(--font-body); color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.task-hours.overloaded { color: var(--load-over); }
.muted { color: var(--ink-muted); font: 400 13px/18px var(--font-body); }

.day-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-2); }
.day-col { border-radius: var(--radius-md); padding: var(--space-3); background: var(--glass-regular); border: 1px solid var(--glass-edge); }
.day-col-header { display: flex; justify-content: space-between; align-items: center; font: 500 13px/18px var(--font-body); margin-bottom: var(--space-1); }
.day-col-header .dow { font-weight: 600; color: var(--ink); }
.day-col-header .load { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.day-col-header .load.over { color: var(--load-over); font-weight: 600; }
.day-col-level { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/16px var(--font-body); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-2); }
.day-col-level::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.level-light { color: var(--load-light); }
.level-moderate { color: var(--load-moderate); }
.level-overloaded { color: var(--load-over); }
.day-col-task { font: 500 12px/16px var(--font-body); padding: 6px 8px; border-radius: 8px; background: var(--glass-thick); border: 1px solid var(--glass-edge); margin-bottom: var(--space-1); }
.day-col-task .h { color: var(--ink-muted); }
.day-col-empty { font: 400 13px/18px var(--font-body); color: var(--ink-muted); }

/* ---------- Insights ---------- */
.insights-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.stat-tile { border-radius: var(--radius-md); padding: var(--space-4); background: var(--glass-regular); border: 1px solid var(--glass-edge); border-top-color: var(--glass-rim); box-shadow: var(--shadow-glass-sm), var(--shadow-specular); }
.stat-value { font: 600 28px/32px var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); }
.stat-label { font: 500 13px/18px var(--font-body); color: var(--ink-muted); margin-top: 2px; }
.insights-panel-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.insights-panel-header h2 { margin: 0; font: 600 17px/24px var(--font-display); }
.insights-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.insights-legend-item { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/18px var(--font-body); color: var(--ink); }
.insights-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.insights-course-list { display: flex; flex-direction: column; gap: var(--space-4); }
.insights-course-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font: 500 13px/18px var(--font-body); margin-bottom: var(--space-1); }
.insights-course-title { font-weight: 600; color: var(--ink); }
.insights-course-total { color: var(--ink-muted); white-space: nowrap; }
.insights-bar { display: flex; gap: 2px; height: 12px; border-radius: 4px; overflow: hidden; background: var(--glass-thin); border: 1px solid var(--glass-edge); }
.insights-bar-seg { height: 100%; min-width: 3px; }

/* ---------- Grades ---------- */
.grades-course-list { display: flex; flex-direction: column; gap: var(--space-6); }
.grades-course-panel { padding-top: var(--space-5); border-top: 1px solid var(--glass-edge); }
.grades-course-panel:first-child { padding-top: 0; border-top: none; }
.grades-course-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font: 600 15px/22px var(--font-body); margin-bottom: 2px; }
.grades-course-title { color: var(--ink); }
.grades-course-grade { font: 600 22px/28px var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums; }
.grades-course-sub { font: 500 13px/18px var(--font-body); color: var(--ink-muted); margin-bottom: var(--space-3); }
.grades-table { width: 100%; border-collapse: collapse; font: 400 14px/20px var(--font-body); }
.grades-table th { text-align: left; font: 600 12px/16px var(--font-body); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); padding: 4px var(--space-2); border-bottom: 1px solid var(--glass-edge); }
.grades-table td { padding: 8px var(--space-2); border-bottom: 1px solid var(--glass-edge); color: var(--ink); }
.grades-table tr:last-child td { border-bottom: none; }
.grades-score-input {
  width: 64px; min-height: 36px; padding: 0 8px; border-radius: var(--radius-sm);
  background: var(--glass-thick); border: 1px solid var(--glass-shade); color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- Weekly ---------- */
.weekly-hint { font: 500 13px/18px var(--font-body); color: var(--ink-muted); margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
.weekly-list { display: flex; flex-direction: column; gap: var(--space-3); }
.weekly-row { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background: var(--glass-regular); border: 1px solid var(--glass-edge); border-top-color: var(--glass-rim); box-shadow: var(--shadow-glass-sm), var(--shadow-specular); }
.weekly-row-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.weekly-row-toggle { cursor: pointer; margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2)) 0; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.weekly-row-toggle:hover { background: var(--accent-soft); }
.weekly-row-label-wrap { display: flex; align-items: baseline; gap: var(--space-2); }
.weekly-row-chevron { color: var(--ink-muted); font-size: .75rem; width: .9em; display: inline-block; }
.weekly-row-label { font: 600 15px/22px var(--font-body); color: var(--ink); }
.weekly-row-level { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/16px var(--font-body); text-transform: uppercase; letter-spacing: .04em; color: var(--sg-load, var(--ink-muted)); }
.weekly-row-level::before { content: ""; width: 8px; height: 8px; background: currentColor; flex: none; }
.weekly-row-light    { --sg-load: var(--load-light); }
.weekly-row-light .weekly-row-level::before { border-radius: 50%; }
.weekly-row-moderate { --sg-load: var(--load-moderate); }
.weekly-row-moderate .weekly-row-level::before { clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.weekly-row-overloaded { --sg-load: var(--load-over); }
.weekly-row-overloaded .weekly-row-level::before { border-radius: 2px; }
.weekly-bar-track { height: 10px; border-radius: var(--radius-pill); background: var(--glass-thin); box-shadow: inset 0 1px 2px var(--glass-shade); overflow: hidden; margin-bottom: var(--space-2); }
.weekly-bar-fill { height: 100%; border-radius: inherit; box-shadow: inset 0 1px 0 var(--glass-rim); }
.weekly-bar-fill-light { background: var(--load-light); }
.weekly-bar-fill-moderate { background: var(--load-moderate); }
.weekly-bar-fill-overloaded { background: var(--load-over); }
.weekly-row-meta { font: 500 13px/18px var(--font-body); color: var(--ink-muted); }

.weekly-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--glass-edge); }
.weekly-day { border-radius: var(--radius-sm); padding: var(--space-2); background: var(--glass-thin); border: 1px solid var(--glass-edge); max-height: 260px; overflow-y: auto; }
.weekly-day-head { display: flex; justify-content: space-between; align-items: center; font: 500 12px/16px var(--font-body); margin-bottom: var(--space-1); }
.weekly-day-dow { font-weight: 600; color: var(--ink); }
.weekly-day-hours { color: var(--ink-muted); }
.weekly-day-empty { font: 400 12px/16px var(--font-body); color: var(--ink-muted); }
.weekly-day-task { font: 400 12px/16px var(--font-body); padding: 5px 6px; border-radius: 8px; background: var(--glass-thick); border: 1px solid var(--glass-edge); margin-bottom: var(--space-1); color: var(--ink); }
.weekly-day-task .h { color: var(--ink-muted); }
.weekly-day-task:last-child { margin-bottom: 0; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(20, 17, 12, 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: var(--space-4); z-index: 10; }
.modal[hidden] { display: none; }
.modal-card {
  background: var(--glass-thick); backdrop-filter: var(--blur-thick); -webkit-backdrop-filter: var(--blur-thick);
  border: 1px solid var(--glass-edge); border-top-color: var(--glass-rim); border-bottom-color: var(--glass-shade);
  border-radius: var(--radius-xl); padding: var(--space-6);
  width: 100%; max-width: 380px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-glass-lg), var(--shadow-specular);
}
.modal-card h2 { margin-top: 0; font: 600 22px/28px var(--font-display); letter-spacing: -.01em; color: var(--ink); }

/* ---------- Welcome / tutorial modal ---------- */
.welcome-modal-card { max-width: 580px; position: relative; }
.welcome-modal-close { position: absolute; top: var(--space-4); right: var(--space-4); }
.welcome-title { margin: 0 var(--space-8) var(--space-2) 0; font: 600 26px/32px var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.welcome-subtitle { margin: 0 var(--space-8) var(--space-5) 0; font: 400 14px/20px var(--font-body); color: var(--ink-muted); }
.welcome-steps { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-5); }
.welcome-step { display: flex; gap: var(--space-3); align-items: flex-start; }
.welcome-step-icon {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.welcome-step-icon svg { width: 16px; height: 16px; }
.welcome-step-text { min-width: 0; }
.welcome-step-title { font: 600 14px/20px var(--font-body); color: var(--ink); margin-bottom: 2px; }
.welcome-step-body { font: 400 13px/19px var(--font-body); color: var(--ink-muted); }
.welcome-template-box {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  border-radius: var(--radius-lg); padding: var(--space-4);
  background: var(--accent-soft); border: 1px solid var(--glass-edge);
  margin-bottom: var(--space-5);
}
.welcome-template-text { flex: 1; min-width: 220px; }
.welcome-template-title { font: 600 14px/20px var(--font-body); color: var(--ink); margin-bottom: 4px; }
.welcome-template-body { font: 400 13px/19px var(--font-body); color: var(--ink-muted); }
.welcome-template-btn { flex: none; white-space: nowrap; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); font: 500 13px/18px var(--font-body); color: var(--ink); }
.field input, .field select, .field textarea {
  min-height: var(--target-min); padding: 0 var(--space-3); font: 400 15px/22px var(--font-body); color: var(--ink);
  border-radius: var(--radius-sm); border: 1px solid var(--glass-shade);
  background: var(--glass-thick); font-family: inherit; resize: vertical;
  box-shadow: inset 0 1px 2px var(--glass-shade);
}
.field textarea { padding: var(--space-2) var(--space-3); min-height: var(--target-min); }
.field-checkbox { flex-direction: row; align-items: center; gap: var(--space-2); min-height: var(--target-min); }
.field-checkbox input { flex-shrink: 0; width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); }
.field-row { display: flex; gap: var(--space-3); }
.field-row .field { flex: 1; min-width: 0; }
.modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); margin-top: var(--space-1); flex-wrap: wrap; }

.theme-swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.theme-swatch {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0;
  background: none; box-shadow: 0 0 0 1px var(--glass-edge) inset;
  display: flex; align-items: center; justify-content: center;
}
.theme-swatch-dot { width: 100%; height: 100%; border-radius: 50%; }
.theme-swatch:hover { transform: scale(1.08); }
.theme-swatch.active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--glass-thick), 0 0 0 4px var(--ink); }
.theme-swatch--labeled {
  width: auto; height: auto; flex-direction: column; gap: 6px; padding: var(--space-2);
  border-radius: var(--radius-md); box-shadow: none; border: 1.5px solid transparent;
}
.theme-swatch--labeled:hover { transform: none; background: var(--glass-thin); }
.theme-swatch--labeled .theme-swatch-dot { width: 36px; height: 36px; box-shadow: 0 0 0 1px var(--glass-edge) inset; }
.theme-swatch--labeled.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-swatch-label { font: 500 12px/1 var(--font-body); color: var(--ink-muted); }
.theme-swatch--labeled.active .theme-swatch-label { color: var(--ink); font-weight: 600; }

/* ---------- Account settings (full page) ---------- */
.settings-view { padding-bottom: var(--space-8); }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.settings-col { display: flex; flex-direction: column; gap: var(--space-3); }
.settings-card {
  border-radius: var(--radius-lg); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--glass-regular); backdrop-filter: var(--blur-regular); -webkit-backdrop-filter: var(--blur-regular);
  border: 1px solid var(--glass-edge); border-top-color: var(--glass-rim); border-bottom-color: var(--glass-shade);
  box-shadow: var(--shadow-glass-md), var(--shadow-specular);
}
.settings-card h2 { margin: 0; font: 600 17px/24px var(--font-display); }
.settings-card .field:last-child { margin-bottom: 0; }
.settings-card-header { display: flex; align-items: baseline; justify-content: space-between; }
.settings-card-hint { font: 500 13px/18px var(--font-body); color: var(--ink-muted); }
.settings-row { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; }
.settings-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.settings-row-title { font: 600 14px/20px var(--font-body); color: var(--ink); }
.settings-row-sub { font: 400 13px/18px var(--font-body); color: var(--ink-muted); }

.seg-control { display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--glass-thick); border: 1px solid var(--glass-edge); }
.seg-btn {
  min-height: 32px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-muted); font: 500 13px/1 var(--font-body); cursor: pointer;
}
.seg-btn.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }

.toggle-switch {
  position: relative; flex: none; width: 46px; height: 26px; padding: 0; border: 0; border-radius: var(--radius-pill);
  background: var(--glass-shade); cursor: pointer; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18);
}
.toggle-knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); transition: left .15s ease;
}
.toggle-switch.active { background: var(--accent); }
.toggle-switch.active .toggle-knob { left: 23px; background: var(--on-accent); }
.task-modal-error { color: var(--load-over); font: 500 13px/18px var(--font-body); margin: calc(-1 * var(--space-2)) 0 var(--space-3); }
.task-modal-error[hidden] { display: none; }

.auth-modal-note { margin: calc(-1 * var(--space-1)) 0 var(--space-4); line-height: 1.4; color: var(--ink-muted); font: 400 13px/18px var(--font-body); }
.auth-modal-actions { flex-wrap: wrap; }
.btn-link { background: none; border: none; padding: 0; margin-right: auto; color: var(--accent); font: 500 13px/1 var(--font-body); cursor: pointer; }
.btn-link:hover { text-decoration: underline; }
.auth-modal-divider { display: flex; align-items: center; text-align: center; color: var(--ink-muted); font: 500 12px/1 var(--font-body); margin: var(--space-4) 0 var(--space-3); }
.auth-modal-divider::before, .auth-modal-divider::after { content: ""; flex: 1; height: 1px; background: var(--glass-edge); }
.auth-modal-divider span { padding: 0 var(--space-2); }
.auth-google-btn { width: 100%; justify-content: center; }
.field-hint { font-weight: 400; color: var(--ink-muted); font-size: 12px; }

/* ---------- Assistant panel ---------- */
.assistant-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100vw;
  background: var(--glass-thick); backdrop-filter: var(--blur-thick); -webkit-backdrop-filter: var(--blur-thick);
  border-left: 1px solid var(--glass-edge); box-shadow: var(--shadow-glass-lg), var(--shadow-specular);
  display: flex; flex-direction: column; z-index: 5;
}
.assistant-panel[hidden] { display: none; }
.assistant-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--glass-edge); }
.assistant-header h2 { margin: 0; font: 600 17px/24px var(--font-display); display: flex; align-items: center; gap: var(--space-2); }
.assistant-header h2 svg { width: 18px; height: 18px; color: var(--accent); }
.badge-wip {
  font: 700 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .04em;
  padding: 4px 8px; border-radius: var(--radius-pill);
  background: var(--load-moderate-fill, var(--load-moderate)); color: #1c1405;
}
.assistant-setup { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.assistant-setup p { margin: 0; line-height: 1.4; font: 400 14px/20px var(--font-body); color: var(--ink); }
.assistant-setup .field { margin-bottom: 0; }
.assistant-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.assistant-chat[hidden] { display: none; }
.assistant-messages { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.assistant-msg { max-width: 88%; padding: 8px 12px; border-radius: var(--radius-md); font: 400 14px/20px var(--font-body); white-space: pre-wrap; word-break: break-word; }
.assistant-msg-user { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; }
.assistant-msg-assistant { align-self: flex-start; background: var(--glass-regular); border: 1px solid var(--glass-edge); color: var(--ink); border-bottom-left-radius: 4px; }
.assistant-msg-system { align-self: center; background: none; color: var(--ink-muted); font-size: 12px; text-align: center; max-width: 100%; }
.assistant-input-row { display: flex; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--glass-edge); }
.assistant-input-row textarea {
  flex: 1; min-height: var(--target-min); resize: none; font: 400 15px/22px var(--font-body); color: var(--ink);
  padding: 10px var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--glass-shade); background: var(--glass-thick);
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
  .assistant-panel { width: 100vw; }
  .app-shell { flex-direction: column; }
  .sidebar {
    position: static; width: 100%; height: auto; overflow: visible;
    border-right: none; border-bottom: 1px solid var(--glass-edge);
    /* position:fixed children (the nav pill bar) must stay pinned to the
       viewport, not this box — an ancestor backdrop-filter would otherwise
       make it a containing block for them. */
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .sidebar-top { flex-direction: row; align-items: center; justify-content: space-between; }
  .sidebar-upload { width: auto; }
  .sidebar-nav {
    position: fixed; bottom: var(--space-4); left: 50%; transform: translateX(-50%);
    flex-direction: row; width: auto; max-width: calc(100vw - var(--space-8));
    overflow-x: auto; scrollbar-width: none;
    gap: var(--space-1); z-index: 9; padding: var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--glass-regular); backdrop-filter: var(--blur-regular); -webkit-backdrop-filter: var(--blur-regular);
    border: 1px solid var(--glass-edge); border-top-color: var(--glass-rim); border-bottom-color: var(--glass-shade);
    box-shadow: var(--shadow-glass-sm), var(--shadow-specular);
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .sidebar-nav .tab-btn { width: auto; flex: none; justify-content: center; border-radius: var(--radius-pill); }
  .sidebar-courses { flex-direction: row; overflow-x: auto; }
  .course-item { width: auto; flex: none; }
  .main-col { padding: var(--space-4) var(--space-4) calc(var(--target-min) + var(--space-8)); }
  .main-header { flex-direction: column; align-items: stretch; }
  .main-header-actions { flex-wrap: wrap; width: 100%; }
  .search-box { flex: 1 1 100%; min-width: 0; }
  .stat-row { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .theme-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .modal { align-items: flex-end; padding: 0; }
  .modal-card { max-width: 100%; width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 85vh; }
  .board-columns { grid-auto-flow: column; grid-auto-columns: 86vw; grid-template-columns: none; scroll-snap-type: x mandatory; }
  .board-col { scroll-snap-align: start; }
}

@media (max-width: 1300px) and (min-width: 901px) {
  .board-columns { grid-template-columns: repeat(5, minmax(180px, 1fr)); }
}

@media (max-width: 900px) and (min-width: 481px) {
  .board-columns { grid-template-columns: repeat(5, minmax(165px, 1fr)); }
  .board-col { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-btn, .kanban-card, .tab-btn, .chip { transition: none; }
  .kanban-card:hover { transform: none; }
}