/* ============================================================
   GRINDLY · TEACHER MODE · teachermode.css
   MOBILE-FIRST. Base rules = phone. min-width MQ = tablet/desktop.
   Matches studentmode.css design language.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ============================================================
   01 · TOKENS
   ============================================================ */
:root {
  color-scheme: light;

  --paper-base: #fef9e8;
  --paper-line: rgba(255, 69, 0, 0.11);
  --paper-margin: rgba(255, 69, 0, 0.28);
  --paper-ruling: 28px;
  --paper-margin-x: 20px;

  --ink-0: #fef9e8;
  --ink-1: #ffffff;
  --ink-2: #faf5e8;
  --ink-3: #f2ecdc;
  --ink-4: #e2d9c2;
  --ink-5: #c9beab;

  --bg: var(--ink-0);
  --card: var(--ink-1);
  --border: rgba(60, 42, 15, 0.10);

  --text: #1a1a2e;
  --text-muted: #5a5a7a;
  --text-faint: #8a8aa8;

  --ember: #ff4714;
  --ember-hot: #d61f00;
  --ember-warm: #ffaa33;
  --ember-soft: rgba(255, 71, 20, 0.12);
  --ember-glow: rgba(255, 71, 20, 0.38);

  --accent: var(--ember);
  --accent-dark: var(--ember-hot);
  --accent-light: var(--ember-soft);
  --accent-soft: var(--ember-soft);
  --accent-glow: var(--ember-glow);

  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --purple: #8b5cf6;

  --gradient-primary: linear-gradient(135deg, #ffaa33 0%, #ff6b35 40%, #ff2200 100%);
  --gradient-success: linear-gradient(135deg, #10b981, #059669);
  --gradient-warning: linear-gradient(135deg, #f59e0b, #d97706);
  --gradient-danger: linear-gradient(135deg, #ef4444, #dc2626);
  --gradient-info: linear-gradient(135deg, #3b82f6, #2563eb);
  --gradient-info-dark: linear-gradient(135deg, #2563eb, #1d4ed8);
  --gradient-purple: linear-gradient(135deg, #8b5cf6, #7c3aed);
  --gradient-flame: linear-gradient(135deg, #ffaa33 0%, #ff4714 50%, #d61f00 100%);

  --pulse-cold: linear-gradient(135deg, #3b82f6, #60a5fa);
  --pulse-mid: linear-gradient(135deg, #10b981, #34d399);
  --pulse-warm: linear-gradient(135deg, #ffaa33, #ff2200);
  --pulse-cold-solid: #3b82f6;
  --pulse-mid-solid: #10b981;
  --pulse-warm-solid: #ff4714;

  /* Spacing — mobile-first, fluid */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 44px;
  --space-10: 60px;
  --space-12: 80px;
  --space-16: 100px;

  --spacing-xs: var(--space-2);
  --spacing-sm: var(--space-3);
  --spacing-md: var(--space-4);
  --spacing-lg: var(--space-6);
  --spacing-xl: var(--space-8);
  --spacing-2xl: var(--space-12);

  --card-pad: var(--space-5);
  --section-gap: var(--space-6);
  --element-gap: var(--space-4);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(60, 42, 15, 0.06);
  --shadow: 0 4px 12px rgba(60, 42, 15, 0.08);
  --shadow-md: 0 8px 24px rgba(60, 42, 15, 0.10);
  --shadow-lg: 0 16px 40px rgba(60, 42, 15, 0.14);
  --shadow-xl: 0 28px 60px rgba(60, 42, 15, 0.18);
  --shadow-2xl: 0 40px 90px rgba(60, 42, 15, 0.20);

  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --transition-fast: 0.15s cubic-bezier(.2, .8, .2, 1);
  --transition: 0.24s cubic-bezier(.2, .8, .2, 1);
  --transition-slow: 0.42s cubic-bezier(.2, .8, .2, 1);

  --heat-0: rgba(60, 42, 15, 0.06);
  --heat-1: rgba(255, 71, 20, 0.20);
  --heat-2: rgba(255, 71, 20, 0.42);
  --heat-3: rgba(255, 71, 20, 0.66);
  --heat-4: rgba(255, 71, 20, 0.94);

  --poll-bg: #ffffff;
  --poll-text: #202124;
  --poll-muted: #5f6368;
  --poll-border: #dadce0;
  --poll-divider: #e0e0e0;
  --poll-input-bg: #ffffff;
  --poll-button-bg: #f1f3f4;
  --poll-button-hover: #e8eaed;
  --poll-radio: #5f6368;

  --sidebar-width: 280px;
  --header-height: 60px;
}

/* Tablet + up: bigger rhythm */
@media (min-width: 769px) {
  :root {
    --paper-ruling: 30px;
    --paper-margin-x: 40px;
    --card-pad: var(--space-6);
    --section-gap: var(--space-8);
    --element-gap: var(--space-5);
    --header-height: 64px;
  }
}
/* Desktop: full rhythm */
@media (min-width: 1021px) {
  :root {
    --paper-ruling: 32px;
    --paper-margin-x: 76px;
    --card-pad: var(--space-8);
    --section-gap: var(--space-10);
    --element-gap: var(--space-5);
  }
}

/* ============================================================
   02 · THEMES
   ============================================================ */
body.light { color-scheme: light; }

body.dark {
  color-scheme: dark;
  --paper-base: #0f1014; --paper-line: rgba(255,255,255,0.03); --paper-margin: rgba(255,71,20,0.20);
  --ink-0: #0f1014; --ink-1: #17181e; --ink-2: #1e2028; --ink-3: #262933; --ink-4: #33363f; --ink-5: #4a4e5a;
  --bg: var(--ink-0); --card: var(--ink-1); --border: rgba(255,255,255,0.06);
  --text: #eceef4; --text-muted: #9aa0b0; --text-faint: #5a6070;
  --ember: #ff5722; --ember-hot: #ff2200; --ember-warm: #ffb070;
  --ember-soft: rgba(255,87,34,0.16); --ember-glow: rgba(255,87,34,0.45);
  --accent: var(--ember); --accent-dark: var(--ember-hot); --accent-light: var(--ember-soft);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.40); --shadow: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.55); --shadow-lg: 0 16px 40px rgba(0,0,0,0.65);
  --shadow-xl: 0 28px 60px rgba(0,0,0,0.72);
  --heat-0: rgba(255,255,255,0.05); --heat-1: rgba(255,87,34,0.28);
  --heat-2: rgba(255,87,34,0.50); --heat-3: rgba(255,87,34,0.72); --heat-4: rgba(255,87,34,0.95);
  --poll-bg: #111827; --poll-text: #e5e7eb; --poll-muted: #9ca3af;
  --poll-border: #374151; --poll-divider: #1f2937; --poll-input-bg: #0b1220;
  --poll-button-bg: #1f2937; --poll-button-hover: #374151; --poll-radio: #9ca3af;
}

body.ocean {
  --paper-base: #eaf6fc; --paper-line: rgba(2,132,199,0.10); --paper-margin: rgba(2,132,199,0.26);
  --ink-0: #eaf6fc; --ink-1: #ffffff; --ink-2: #dbedf7; --ink-3: #c6e2f2; --ink-4: #8fc3e1; --ink-5: #5aa1c8;
  --bg: var(--ink-0); --card: var(--ink-1); --border: rgba(2,132,199,0.15);
  --text: #062d3d; --text-muted: #3a7a95; --text-faint: #7aa8be;
  --ember: #0284c7; --ember-hot: #0369a1; --ember-warm: #38bdf8;
  --ember-soft: rgba(2,132,199,0.14); --ember-glow: rgba(2,132,199,0.32);
  --accent: #0284c7; --accent-dark: #0369a1; --accent-light: rgba(2,132,199,0.12);
  --gradient-flame: linear-gradient(135deg, #7dd3fc, #0284c7, #075985);
  --gradient-primary: linear-gradient(135deg, #0ea5e9, #0369a1);
  --heat-0: rgba(2,132,199,0.08); --heat-1: rgba(2,132,199,0.28);
  --heat-2: rgba(2,132,199,0.50); --heat-3: rgba(2,132,199,0.72); --heat-4: rgba(2,132,199,0.95);
}

body.forest {
  --paper-base: #f0f7f0; --paper-line: rgba(5,150,105,0.10); --paper-margin: rgba(5,150,105,0.26);
  --ink-0: #f0f7f0; --ink-1: #ffffff; --ink-2: #e2efe2; --ink-3: #cde3cd; --ink-4: #a3cca3; --ink-5: #7aad7a;
  --bg: var(--ink-0); --card: var(--ink-1); --border: rgba(5,150,105,0.15);
  --text: #0a2e1a; --text-muted: #3f7a55; --text-faint: #7fa88d;
  --ember: #059669; --ember-hot: #047857; --ember-warm: #34d399;
  --ember-soft: rgba(5,150,105,0.14); --ember-glow: rgba(5,150,105,0.32);
  --accent: #059669; --accent-dark: #047857; --accent-light: rgba(5,150,105,0.12);
  --gradient-flame: linear-gradient(135deg, #6ee7b7, #059669, #065f46);
  --gradient-primary: linear-gradient(135deg, #10b981, #047857);
  --heat-0: rgba(5,150,105,0.08); --heat-1: rgba(5,150,105,0.28);
  --heat-2: rgba(5,150,105,0.50); --heat-3: rgba(5,150,105,0.72); --heat-4: rgba(5,150,105,0.95);
}

body.sunset {
  --paper-base: #fff4ec; --paper-line: rgba(234,88,12,0.10); --paper-margin: rgba(234,88,12,0.26);
  --ink-0: #fff4ec; --ink-1: #ffffff; --ink-2: #fde8d8; --ink-3: #fbd6bb; --ink-4: #f5b48a; --ink-5: #e08a5a;
  --bg: var(--ink-0); --card: var(--ink-1); --border: rgba(234,88,12,0.15);
  --text: #401a08; --text-muted: #9c5a2e; --text-faint: #c99368;
  --ember: #ea580c; --ember-hot: #c2410c; --ember-warm: #fb923c;
  --ember-soft: rgba(234,88,12,0.14); --ember-glow: rgba(234,88,12,0.32);
  --accent: #ea580c; --accent-dark: #c2410c; --accent-light: rgba(234,88,12,0.12);
  --gradient-flame: linear-gradient(135deg, #fcd34d, #ea580c, #9a3412);
  --gradient-primary: linear-gradient(135deg, #fb923c, #c2410c);
  --heat-0: rgba(234,88,12,0.08); --heat-1: rgba(234,88,12,0.28);
  --heat-2: rgba(234,88,12,0.50); --heat-3: rgba(234,88,12,0.72); --heat-4: rgba(234,88,12,0.95);
}

body.purple {
  color-scheme: dark;
  --paper-base: #140a26; --paper-line: rgba(179,136,255,0.05); --paper-margin: rgba(179,136,255,0.22);
  --ink-0: #140a26; --ink-1: #1d1038; --ink-2: #24144a; --ink-3: #2d1a5c; --ink-4: #3a2a5a; --ink-5: #5a4480;
  --bg: var(--ink-0); --card: var(--ink-1); --border: rgba(179,136,255,0.15);
  --text: #f3eefe; --text-muted: #b9a8de; --text-faint: #7a6ba8;
  --ember: #b388ff; --ember-hot: #9b5cff; --ember-warm: #d6bcff;
  --ember-soft: rgba(179,136,255,0.16); --ember-glow: rgba(179,136,255,0.38);
  --accent: #b388ff; --accent-dark: #9b5cff; --accent-light: rgba(179,136,255,0.14);
  --gradient-flame: linear-gradient(135deg, #e9d5ff, #b388ff, #7c3aed);
  --gradient-primary: linear-gradient(135deg, #c4b5fd, #9b5cff);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35); --shadow: 0 4px 12px rgba(0,0,0,0.42);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.52); --shadow-lg: 0 16px 40px rgba(0,0,0,0.62);
  --shadow-xl: 0 28px 60px rgba(0,0,0,0.72);
  --heat-0: rgba(255,255,255,0.05); --heat-1: rgba(179,136,255,0.20);
  --heat-2: rgba(179,136,255,0.42); --heat-3: rgba(179,136,255,0.66); --heat-4: rgba(179,136,255,0.92);
  --poll-bg: #1f1b5c; --poll-text: #ede9fe; --poll-muted: #c7d2fe;
  --poll-border: rgba(167,139,250,0.4); --poll-divider: rgba(167,139,250,0.25);
  --poll-input-bg: rgba(30,27,75,0.55); --poll-button-bg: rgba(167,139,250,0.2);
  --poll-button-hover: rgba(167,139,250,0.3); --poll-radio: #c4b5fd;
}

body.aurora {
  color-scheme: dark;
  --paper-base: #061018; --paper-line: rgba(34,211,238,0.05); --paper-margin: rgba(34,211,238,0.22);
  --ink-0: #061018; --ink-1: rgba(11,22,34,0.75); --ink-2: rgba(18,30,46,0.78);
  --ink-3: rgba(26,44,68,0.88); --ink-4: rgba(58,88,120,0.55); --ink-5: rgba(90,120,150,0.50);
  --bg: #061018; --card: var(--ink-1); --border: rgba(125,211,252,0.18);
  --text: #EAF6FF; --text-muted: #8AA3BE; --text-faint: #4A6480;
  --ember: #22D3EE; --ember-hot: #0891B2; --ember-warm: #7DD3FC;
  --ember-soft: rgba(34,211,238,0.16); --ember-glow: rgba(34,211,238,0.38);
  --accent: #7DD3FC; --accent-dark: #22D3EE; --accent-light: rgba(125,211,252,0.14);
  --gradient-primary: linear-gradient(135deg, #7DD3FC, #0891B2);
  --gradient-flame: linear-gradient(135deg, #a5f3fc, #22d3ee, #0e7490);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.40); --shadow: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.55); --shadow-lg: 0 16px 40px rgba(0,0,0,0.65);
  --shadow-xl: 0 28px 60px rgba(0,0,0,0.72);
  --heat-0: rgba(255,255,255,0.05); --heat-1: rgba(125,211,252,0.20);
  --heat-2: rgba(125,211,252,0.42); --heat-3: rgba(125,211,252,0.66); --heat-4: rgba(125,211,252,0.92);
  background:
    radial-gradient(1200px 700px at 0% -30%, rgba(56,189,248,0.26), transparent 60%),
    radial-gradient(900px 600px at 85% 0%, rgba(16,185,129,0.16), transparent 55%),
    linear-gradient(170deg, #061018 0%, #0a111c 45%, #0b1422 100%);
  background-attachment: fixed;
}
body.aurora .sidebar, body.aurora .content-card, body.aurora .form-card,
body.aurora .stat-card, body.aurora .modal-content {
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

body.obsidian {
  color-scheme: dark;
  --paper-base: #07070A; --paper-line: rgba(249,115,22,0.05); --paper-margin: rgba(249,115,22,0.22);
  --ink-0: #07070A; --ink-1: #0F0E14; --ink-2: #16141D; --ink-3: #1F1B28; --ink-4: #2B2438; --ink-5: #3E3550;
  --bg: var(--ink-0); --card: var(--ink-1); --border: rgba(249,115,22,0.16);
  --text: #F4F0FF; --text-muted: #9188A8; --text-faint: #4B4260;
  --ember: #F97316; --ember-hot: #DC2626; --ember-warm: #FB923C;
  --ember-soft: rgba(249,115,22,0.18); --ember-glow: rgba(249,115,22,0.45);
  --accent: #F97316; --accent-dark: #C2410C; --accent-light: rgba(249,115,22,0.16);
  --gradient-primary: linear-gradient(135deg, #FB923C, #DC2626);
  --gradient-flame: linear-gradient(135deg, #fdba74, #f97316, #b91c1c);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.40); --shadow: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.55); --shadow-lg: 0 16px 40px rgba(0,0,0,0.65);
  --shadow-xl: 0 28px 60px rgba(0,0,0,0.72);
  --heat-0: rgba(255,255,255,0.05); --heat-1: rgba(249,115,22,0.20);
  --heat-2: rgba(249,115,22,0.42); --heat-3: rgba(249,115,22,0.66); --heat-4: rgba(249,115,22,0.92);
  background:
    radial-gradient(900px 600px at 70% -10%, rgba(249,115,22,0.16), transparent 60%),
    radial-gradient(800px 500px at 0% 20%, rgba(244,63,94,0.12), transparent 55%),
    linear-gradient(170deg, #050607 0%, #0b0c10 55%, #14121a 100%);
  background-attachment: fixed;
}

body.celestial {
  color-scheme: dark;
  --paper-base: #0B1220; --paper-line: rgba(167,139,250,0.05); --paper-margin: rgba(167,139,250,0.22);
  --ink-0: #0B1220; --ink-1: #14263B; --ink-2: #1A3050; --ink-3: #224066; --ink-4: #2F5078; --ink-5: #3D5F8A;
  --bg: var(--ink-0); --card: var(--ink-1); --border: rgba(167,139,250,0.20);
  --text: #F8FAFC; --text-muted: #94A8C0; --text-faint: #4E6580;
  --ember: #A78BFA; --ember-hot: #F472B6; --ember-warm: #C4B5FD;
  --ember-soft: rgba(167,139,250,0.20); --ember-glow: rgba(167,139,250,0.48);
  --accent: #A78BFA; --accent-dark: #7C3AED; --accent-light: rgba(167,139,250,0.18);
  --gradient-primary: linear-gradient(135deg, #C4B5FD, #F472B6);
  --gradient-flame: linear-gradient(135deg, #ddd6fe, #a78bfa, #db2777);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.40); --shadow: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.55); --shadow-lg: 0 16px 40px rgba(0,0,0,0.65);
  --shadow-xl: 0 28px 60px rgba(0,0,0,0.72);
  --heat-0: rgba(255,255,255,0.05); --heat-1: rgba(167,139,250,0.20);
  --heat-2: rgba(167,139,250,0.42); --heat-3: rgba(167,139,250,0.66); --heat-4: rgba(167,139,250,0.92);
  background:
    radial-gradient(1200px 700px at 20% -15%, rgba(167,139,250,0.26), transparent 60%),
    radial-gradient(900px 600px at 85% 0%, rgba(56,189,248,0.20), transparent 60%),
    linear-gradient(170deg, #0b1424 0%, #0d1a2f 55%, #12213a 100%);
  background-attachment: fixed;
}

body.rainbow {
  color-scheme: dark;
  --paper-base: #0b1020; --paper-line: rgba(255,122,217,0.05); --paper-margin: rgba(255,122,217,0.22);
  --ink-0: #0b1020; --ink-1: #141a33; --ink-2: #1a2244; --ink-3: #222c5a; --ink-4: #384168; --ink-5: #505b88;
  --bg: #0b1020; --card: var(--ink-1); --border: rgba(255,255,255,0.18);
  --text: #ffffff; --text-muted: #c9cff0; --text-faint: #7a7fa8;
  --ember: #ff7ad9; --ember-hot: #c026d3; --ember-warm: #7c3aed;
  --ember-soft: rgba(255,122,217,0.18); --ember-glow: rgba(255,122,217,0.40);
  --accent: #ff7ad9; --accent-dark: #c026d3; --accent-light: rgba(255,122,217,0.2);
  --gradient-primary: linear-gradient(135deg, #ff7ad9, #7c3aed, #3b82f6, #22c55e, #f59e0b, #ef4444);
  --gradient-flame: linear-gradient(135deg, #ff7ad9, #a855f7, #3b82f6);
  --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #3b82f6;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.55); --shadow-lg: 0 16px 40px rgba(0,0,0,0.65);
  --shadow-xl: 0 28px 60px rgba(0,0,0,0.72);
  --heat-0: rgba(255,122,217,0.08); --heat-1: rgba(255,122,217,0.30);
  --heat-2: rgba(168,85,247,0.55); --heat-3: rgba(59,130,246,0.75); --heat-4: rgba(34,197,94,0.95);
  background:
    radial-gradient(800px 420px at 10% -5%, rgba(255,122,217,0.25), transparent 60%),
    radial-gradient(900px 420px at 90% 0%, rgba(59,130,246,0.22), transparent 60%),
    radial-gradient(700px 380px at 50% 10%, rgba(34,197,94,0.20), transparent 70%),
    linear-gradient(135deg, #0b1020 0%, #111b3a 55%, #0b1020 100%);
  background-attachment: fixed;
}

body.premium {
  color-scheme: dark;
  --paper-base: #0a1219; --paper-line: rgba(64,201,255,0.05); --paper-margin: rgba(64,201,255,0.24);
  --ink-0: #0a1219; --ink-1: rgba(18,28,40,0.98); --ink-2: rgba(30,41,59,0.72);
  --ink-3: rgba(48,62,82,0.72); --ink-4: rgba(70,90,118,0.55); --ink-5: rgba(100,120,150,0.50);
  --bg: #0a1219; --card: var(--ink-1); --border: rgba(64,156,255,0.3);
  --text: #f0f8ff; --text-muted: #a6c1e0; --text-faint: #6a8bb0;
  --ember: #40c9ff; --ember-hot: #2d9cdb; --ember-warm: #c084fc;
  --ember-soft: rgba(64,201,255,0.15); --ember-glow: rgba(64,201,255,0.40);
  --accent: #40c9ff; --accent-dark: #2d9cdb; --accent-light: rgba(64,201,255,0.15);
  --gradient-primary: linear-gradient(135deg, #40c9ff 0%, #497fff 50%, #c084fc 100%);
  --gradient-flame: linear-gradient(135deg, #40c9ff, #6a93ff, #c084fc);
  --success: #00e6a9; --warning: #ffb347; --danger: #ff6b8b; --info: #6a93ff; --purple: #c084fc;
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.4); --shadow: 0 4px 20px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.55); --shadow-lg: 0 15px 40px rgba(0,0,0,0.6);
  --shadow-xl: 0 25px 60px rgba(0,0,0,0.7);
  --heat-0: rgba(64,201,255,0.08); --heat-1: rgba(64,201,255,0.30);
  --heat-2: rgba(64,201,255,0.55); --heat-3: rgba(108,92,231,0.75); --heat-4: rgba(192,132,252,0.95);
  background:
    radial-gradient(ellipse at 20% 20%, rgba(64,201,255,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(192,132,252,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 40% 80%, rgba(0,230,169,0.10) 0%, transparent 60%),
    linear-gradient(135deg, #0a1219 0%, #0f1a2a 50%, #0a1219 100%);
  background-attachment: fixed;
  min-height: 100vh;
}
body.premium h1, body.premium h2, body.premium h3,
body.premium h4, body.premium h5, body.premium h6 {
  background: linear-gradient(135deg, #40c9ff, #6a93ff, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: textShimmer 8s ease-in-out infinite;
}
@keyframes textShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ============================================================
   03 · RESET & BASE
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html {
  font-size: 15px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
@media (min-width: 769px) { html { font-size: 15px; } }
@media (min-width: 1021px) { html { font-size: 16px; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Notebook paper — default light only */
body:not([class*="theme-"]):not(.dark):not(.ocean):not(.forest):not(.sunset):not(.purple):not(.aurora):not(.obsidian):not(.celestial):not(.rainbow):not(.premium)::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-color: var(--paper-base);
  background-image:
    linear-gradient(to bottom,
      transparent 0,
      transparent calc(var(--paper-ruling) - 1px),
      var(--paper-line) calc(var(--paper-ruling) - 1px),
      var(--paper-line) var(--paper-ruling));
  background-size: 100% var(--paper-ruling);
  background-repeat: repeat-y;
}
body:not([class*="theme-"]):not(.dark):not(.ocean):not(.forest):not(.sunset):not(.purple):not(.aurora):not(.obsidian):not(.celestial):not(.rainbow):not(.premium)::after {
  content: '';
  position: fixed;
  top: 0;
  left: var(--paper-margin-x);
  bottom: 0;
  width: 2px;
  background: var(--paper-margin);
  pointer-events: none;
  z-index: 0;
}
body.dark::before, body.ocean::before, body.forest::before,
body.sunset::before, body.purple::before, body.aurora::before,
body.obsidian::before, body.celestial::before, body.rainbow::before,
body.premium::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: var(--paper-base);
}
body.dark::after, body.ocean::after, body.forest::after,
body.sunset::after, body.purple::after, body.aurora::after,
body.obsidian::after, body.celestial::after {
  content: '';
  position: fixed;
  top: 0;
  left: var(--paper-margin-x);
  bottom: 0;
  width: 2px;
  background: var(--paper-margin);
  pointer-events: none;
  z-index: 0;
}
.app-layout, .mobile-header, .sidebar-toggle, .sidebar-backdrop { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }
@media (min-width: 769px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.15rem; }
}
@media (min-width: 1021px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.75rem; }
}

code, kbd, samp, pre { font-family: var(--font-mono); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--ember-soft); color: var(--ember-hot); }
img { max-width: 100%; height: auto; }
button { font-family: inherit; }

/* Hide collapse arrows everywhere */
.collapse-icon,
.section-header .collapse-icon,
.sidebar-section .collapse-icon,
.dashboard-section .collapse-icon {
  display: none !important;
}
/* Kill any stray arrow spans in headers */
.section-header > span:not([class]) { display: none; }

/* Mono numbers */
.stat-value, .stat-number, .metric-value, .stats-overview-number,
.leaderboard-score, .leaderboard-rank, .class-card-code,
.class-code-display .code, .streak-number, .goal-stats,
.focus-timer-display, .wb-session-code, .date, .item-date,
.badge-count, .toast-time, .sync-status, .heatmap-value,
.presentation-timer, .chain-link, .streak-chain-count,
.challenge-card-score, .duration-number, .notification-time,
.challenge-details, .challenge-stat, .activity-meta, .student-id,
.priority-stat, .resource-file-badge, .pulse-ring-number,
.pulse-metric-value, .pres-snapshot-value, .pres-checkin-value,
.stat-pill-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ============================================================
   04 · LAYOUT — MOBILE-FIRST
   Base: sidebar is a drawer, content full width, mobile header visible
   ============================================================ */
.app-layout {
  display: block;
  min-height: 100vh;
}

.main-content {
  margin-left: 0;
  padding: calc(var(--header-height) + env(safe-area-inset-top) + var(--space-4))
           var(--space-4)
           calc(var(--space-12) + env(safe-area-inset-bottom));
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.main-content > * {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Tablet */
@media (min-width: 769px) {
  .main-content {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
    padding-bottom: var(--space-16);
  }
  .main-content > * { max-width: 760px; }
}

/* Desktop: sidebar takes over */
@media (min-width: 1021px) {
  .main-content {
    margin-left: var(--sidebar-width);
    padding: var(--space-10) var(--space-8) var(--space-16);
  }
  .main-content > * { max-width: 1160px; }
}

/* Section gaps */
.dashboard-content > * + *,
#dashboard > * + * {
  margin-top: var(--section-gap) !important;
}

/* ============================================================
   05 · MOBILE HEADER (visible on mobile + tablet, hidden on desktop)
   ============================================================ */
.mobile-header {
  /* !important to beat inline style="display:none" in your HTML */
  display: flex !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: env(safe-area-inset-top) var(--space-3) 0;
  padding-left: max(var(--space-3), env(safe-area-inset-left));
  padding-right: max(var(--space-3), env(safe-area-inset-right));
  align-items: center;
  justify-content: space-between;
  height: calc(var(--header-height) + env(safe-area-inset-top));
  box-shadow: var(--shadow-sm);
  gap: 8px;
}
.mobile-menu-btn {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1.25rem;
  cursor: pointer;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.mobile-menu-btn:active { background: var(--ink-2); transform: scale(0.94); }
.mobile-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  flex: 1;
  margin: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-actions { display: flex; gap: 4px; align-items: center; }
.mobile-actions .btn-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: all var(--transition-fast);
  padding: 0;
}
.mobile-actions .btn-icon:active { background: var(--ink-2); transform: scale(0.94); }
.mobile-actions .btn-primary {
  background: var(--gradient-flame);
  color: #fff;
  box-shadow: 0 3px 10px var(--ember-glow);
}

/* Tablet: slightly wider header */
@media (min-width: 769px) {
  .mobile-header { padding-left: var(--space-5); padding-right: var(--space-5); }
  .mobile-title { font-size: 1.15rem; }
}

/* Desktop: hide header, show sidebar toggle */
@media (min-width: 1021px) {
  .mobile-header { display: none !important; }
}

/* ============================================================
   06 · SIDEBAR — MOBILE-FIRST DRAWER
   Base: off-screen drawer. Desktop: fixed sidebar.
   ============================================================ */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(60, 42, 15, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  z-index: 1050;
  display: block;
}
.sidebar-backdrop.show {
  opacity: 1;
  visibility: visible;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 88%;
  max-width: 320px;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: calc(var(--space-5) + env(safe-area-inset-top))
           var(--space-4)
           calc(var(--space-8) + env(safe-area-inset-bottom));
  z-index: 1100;
  transform: translateX(-105%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-shadow: 12px 0 40px rgba(60, 42, 15, 0.18);
  will-change: transform;
}
.sidebar.active { transform: translateX(0); }
.sidebar > * + * { margin-top: var(--space-5); }

.sidebar-header {
  text-align: center;
  padding-bottom: var(--space-4);
  border-bottom: 2px dashed var(--border);
}
.teacher-emoji {
  font-size: 2.5rem;
  margin-bottom: var(--space-2);
  display: block;
  animation: float 5s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-5px) rotate(2deg); }
}
.sidebar h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.2;
  background: var(--gradient-flame);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.sidebar-subtitle {
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.sidebar-toggle {
  display: none;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 101;
  background: var(--gradient-flame);
  color: #fff;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 6px 20px var(--ember-glow);
  transition: all var(--transition);
}
.sidebar-toggle:hover { transform: scale(1.08); filter: brightness(1.06); }

.class-switcher {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  overflow: hidden;
}
.class-switcher select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font-size: 0.9375rem;
  font-family: var(--font-ui);
  font-weight: 600;
  cursor: pointer;
  text-overflow: ellipsis;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 14px;
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 600;
  font-size: 0.9375rem;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-item:active { background: var(--ink-2); transform: scale(0.98); }
.nav-item.active {
  background: var(--gradient-flame);
  color: #fff;
  font-weight: 700;
  border-color: transparent;
  box-shadow: 0 6px 18px var(--ember-glow);
}

.sidebar-stats {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  overflow: hidden;
}
.sidebar-stats > * + * { margin-top: var(--space-3); }
.sidebar-stats h3 {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-weight: 700;
}
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.8125rem;
  min-width: 0;
  gap: 8px;
}
.stat-row:last-child { border-bottom: none; }
.stat-row > span:first-child {
  color: var(--text-muted);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-value {
  font-size: 0.9375rem;
  color: var(--ember);
  flex-shrink: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.theme-selector {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--ink-2);
  color: var(--text);
  font-size: 0.875rem;
  font-family: var(--font-ui);
  font-weight: 600;
  cursor: pointer;
  text-overflow: ellipsis;
}

.logout-btn {
  width: 100%;
  padding: 12px;
  margin-top: var(--space-4);
  background: transparent;
  color: var(--danger);
  border: 2px solid var(--danger);
  border-radius: var(--radius);
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.875rem;
  min-height: 48px;
}
.logout-btn:active { background: var(--danger); color: #fff; }

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: var(--ink-4);
  border-radius: 3px;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--ember); }

/* Tablet: a bit roomier drawer */
@media (min-width: 769px) {
  .sidebar { padding: calc(var(--space-6) + env(safe-area-inset-top)) var(--space-5) var(--space-10); }
  .sidebar h2 { font-size: 1.5rem; }
  .sidebar > * + * { margin-top: var(--space-6); }
}

/* Desktop: sidebar becomes fixed, always visible, toggle appears */
@media (min-width: 1021px) {
  .sidebar {
    width: var(--sidebar-width);
    max-width: none;
    transform: translateX(0);
    padding: var(--space-8) var(--space-5);
    box-shadow: 6px 0 30px rgba(60, 42, 15, 0.04);
    z-index: 100;
  }
  .sidebar-backdrop { display: none !important; }
  .sidebar-toggle { display: flex; }
  .app-layout.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
  }
  .app-layout.sidebar-collapsed .main-content { margin-left: 0; }
  .app-layout.sidebar-collapsed .sidebar-toggle { transform: rotate(180deg); }
}

/* ============================================================
   07 · DASHBOARD HEADER
   ============================================================ */
.dashboard-header {
  margin-bottom: var(--space-6);
  text-align: center;
}
.dashboard-header h1 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: var(--space-3);
  background: var(--gradient-flame);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.time-greeting {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
  font-weight: 500;
}
.dashboard-subtitle {
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: var(--space-5);
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}
.controls-bar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.controls-bar .search-bar { flex: 1 1 100%; max-width: 100%; }
.controls-bar > div:not(.search-bar) {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  width: 100%;
}

@media (min-width: 769px) {
  .dashboard-header { text-align: left; margin-bottom: var(--space-10); }
  .dashboard-header h1 { font-size: 2.25rem; }
  .dashboard-subtitle { font-size: 1.0625rem; margin-left: 0; margin-right: 0; }
  .controls-bar { padding: var(--space-4); }
  .controls-bar .search-bar { flex: 1; max-width: 400px; }
  .controls-bar > div:not(.search-bar) { width: auto; }
}
@media (min-width: 1021px) {
  .dashboard-header h1 { font-size: 2.5rem; }
}

/* ============================================================
   08 · PRO TIPS — sticky notes in content, clean in sidebar
   ============================================================ */
.pro-tip {
  position: relative;
  background: #fef3c7;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 40%),
    repeating-linear-gradient(0deg, transparent 0, transparent 27px, rgba(0,0,0,0.04) 27px, rgba(0,0,0,0.04) 28px);
  border: none;
  border-radius: 3px 3px 12px 3px;
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.6;
  color: #422006;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.08),
    0 8px 24px rgba(60, 42, 15, 0.10),
    inset 0 0 60px rgba(255, 200, 100, 0.15);
  transform: rotate(-0.4deg);
  transition: all var(--transition);
  overflow: hidden;
}
.pro-tip::before {
  content: '📌';
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 1.1rem;
  transform: rotate(-12deg);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
  opacity: 0.85;
  display: none; /* hide pin on mobile to reduce clutter */
}
.pro-tip::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, transparent 50%, rgba(60, 42, 15, 0.10) 50%);
  border-radius: 0 0 12px 0;
  pointer-events: none;
  display: none;
}
.pro-tip:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.10),
    0 16px 40px rgba(60, 42, 15, 0.16);
}
.pro-tip strong {
  color: #b45309;
  display: block;
  margin-bottom: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pro-tip:nth-of-type(even) {
  background: #d1fae5;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 40%),
    repeating-linear-gradient(0deg, transparent 0, transparent 27px, rgba(0,0,0,0.03) 27px, rgba(0,0,0,0.03) 28px);
  color: #064e3b;
  transform: rotate(0.35deg);
}
.pro-tip:nth-of-type(even) strong { color: #047857; }

@media (min-width: 769px) {
  .pro-tip {
    padding: var(--space-5) var(--space-6);
    font-size: 0.9375rem;
    margin: var(--space-5) 0;
  }
  .pro-tip::before { display: block; }
  .pro-tip::after { display: block; }
  .pro-tip strong { font-size: 0.75rem; }
}

/* Sidebar pro-tips stay clean */
.sidebar .pro-tip,
.sidebar-stats .pro-tip {
  background: var(--ember-soft);
  background-image: none;
  border-left: 3px solid var(--ember);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 12px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text);
  transform: none !important;
  box-shadow: none;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.sidebar .pro-tip::before,
.sidebar .pro-tip::after { display: none; }
.sidebar .pro-tip strong {
  color: var(--ember-hot);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

/* ============================================================
   09 · QUICK STATS — mobile-first grid
   ============================================================ */
.quick-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
@media (min-width: 769px) {
  .quick-stats { gap: var(--space-5); margin-bottom: var(--space-8); }
}
@media (min-width: 1021px) {
  .quick-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 84px;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-flame);
  opacity: 0;
  transition: opacity var(--transition);
}
.stat-card:hover {
  border-color: var(--ember);
  box-shadow: 0 16px 40px rgba(255, 71, 20, 0.10);
}
.stat-card:hover::before { opacity: 1; }
.stat-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: var(--ember-soft);
  color: var(--ember);
  flex-shrink: 0;
}
.stat-card:nth-child(2) .stat-icon { background: rgba(16, 185, 129, 0.12); color: var(--success); }
.stat-card:nth-child(3) .stat-icon { background: rgba(245, 158, 11, 0.12); color: var(--warning); }
.stat-card:nth-child(4) .stat-icon { background: rgba(59, 130, 246, 0.12); color: var(--info); }
.stat-content { flex: 1; min-width: 0; }
.stat-number {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-label {
  font-size: 0.625rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 769px) {
  .stat-card { padding: var(--space-5); min-height: 120px; gap: var(--space-5); }
  .stat-icon { width: 56px; height: 56px; font-size: 1.75rem; border-radius: var(--radius-lg); }
  .stat-number { font-size: 2.25rem; margin-bottom: 8px; }
  .stat-label { font-size: 0.75rem; letter-spacing: 0.12em; }
}

/* ============================================================
   10 · CARDS
   ============================================================ */
.content-card,
.form-card,
.assignment-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
  position: relative;
  overflow: hidden;
  background-image:
    radial-gradient(circle, rgba(60, 42, 15, 0.045) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
}
.content-card > *,
.form-card > * { position: relative; z-index: 1; }
.content-card:hover,
.form-card:hover,
.assignment-card:hover {
  border-color: var(--ember);
  box-shadow: 0 16px 40px rgba(255, 71, 20, 0.10);
}
.content-card { padding: 0; }
.content-header {
  padding: var(--space-4) var(--space-4);
  border-bottom: 2px dashed var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  min-width: 0;
}
.content-header h2,
.form-card h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  line-height: 1.25;
  white-space: normal;
}
.content-header h2::before,
.form-card h2::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gradient-flame);
  margin-right: 4px;
  box-shadow: 0 0 10px var(--ember-glow);
  flex-shrink: 0;
}
.content-body {
  padding: var(--space-4);
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.form-card { padding: var(--space-4); }
.form-card > * + * { margin-top: var(--space-4); }

@media (min-width: 769px) {
  .content-card,
  .form-card,
  .assignment-card { border-radius: var(--radius-xl); }
  .content-header { padding: var(--space-6) var(--space-6); gap: var(--space-4); }
  .content-header h2,
  .form-card h2 { font-size: 1.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .content-body { padding: var(--space-6); max-height: 480px; }
  .form-card { padding: var(--card-pad); }
  .form-card > * + * { margin-top: var(--space-5); }
}
@media (min-width: 1021px) {
  .content-header { padding: var(--space-6) var(--space-8); }
  .content-body { padding: var(--space-8); }
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.forms-section,
.content-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
@media (min-width: 769px) {
  .dashboard-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-8);
  }
  .forms-section,
  .content-section {
    grid-column: span 6;
    gap: var(--space-6);
  }
}
@media (min-width: 1021px) {
  .dashboard-grid { gap: var(--space-10); }
}

/* ============================================================
   11 · FORMS
   ============================================================ */
.form-group { margin-bottom: var(--space-4); }
.form-group:last-child { margin-bottom: 0; }
.form-group label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text);
}
input,
textarea,
select {
  width: 100%;
  padding: 13px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--ink-2);
  color: var(--text);
  font-size: 16px; /* prevents iOS zoom */
  font-family: var(--font-ui);
  font-weight: 500;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  min-height: 48px;
}
input::placeholder,
textarea::placeholder { color: var(--text-faint); font-weight: 400; }
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--ember);
  background: var(--card);
  box-shadow: 0 0 0 4px var(--ember-soft), 0 0 20px var(--ember-soft);
}
textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.6;
}

@media (min-width: 769px) {
  input, textarea, select { font-size: 0.9375rem; min-height: auto; padding: 14px 16px; }
  .form-group { margin-bottom: var(--space-5); }
  .form-group label { font-size: 0.875rem; margin-bottom: var(--space-3); }
  textarea { min-height: 130px; }
}

/* ============================================================
   12 · BUTTONS
   ============================================================ */
.btn,
.btn-submit,
.btn-challenge,
.delete-btn,
.whiteboard-btn {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  text-decoration: none;
  touch-action: manipulation;
  user-select: none;
  white-space: nowrap;
  padding: 10px 16px;
  min-height: 42px;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--gradient-flame);
  color: #fff;
  box-shadow: 0 6px 18px var(--ember-glow);
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.btn-primary:hover { box-shadow: 0 10px 28px var(--ember-glow); filter: brightness(1.05); }
.btn-secondary {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--ink-2); border-color: var(--ember); color: var(--ember); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { filter: brightness(1.08); }
.btn-warning { background: var(--warning); color: #fff; }
.btn-warning:hover { filter: brightness(1.08); }
.btn-danger  { background: var(--danger); color: #fff; }
.btn-danger:hover  { filter: brightness(1.08); }

.btn-submit {
  width: 100%;
  padding: 14px 20px;
  background: var(--gradient-flame);
  color: #fff;
  font-size: 0.9375rem;
  box-shadow: 0 8px 22px var(--ember-glow);
  margin-top: var(--space-3);
  min-height: 52px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.btn-submit:hover { box-shadow: 0 12px 32px var(--ember-glow); filter: brightness(1.06); }

.btn-icon {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.btn-challenge {
  width: 100%;
  background: var(--gradient-flame);
  color: #fff;
  padding: 12px 14px;
  margin-top: var(--space-3);
  box-shadow: 0 6px 16px var(--ember-glow);
}
.btn-challenge:hover { box-shadow: 0 10px 24px var(--ember-glow); }
.delete-btn {
  background: transparent;
  color: var(--danger);
  border: 2px solid var(--danger);
  padding: 8px 12px;
  font-size: 0.75rem;
}
.delete-btn:hover { background: var(--danger); color: #fff; }

@media (min-width: 769px) {
  .btn, .btn-submit, .btn-challenge, .delete-btn { font-size: 0.875rem; }
  .btn { padding: 11px 20px; }
  .btn-submit { padding: 15px 22px; font-size: 1rem; }
}

/* ============================================================
   13 · MODALS — mobile-first: bottom sheet style
   ============================================================ */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(60, 42, 15, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1600;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal.show,
.modal[style*="display: flex"],
.modal[style*="display:flex"] {
  display: flex !important;
}
.modal-content {
  background: var(--card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-5);
  padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  max-width: 100%;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-2xl);
  border: 1px solid var(--border);
  border-bottom: none;
  animation: modalIn 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) both;
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.modal-content > * + * { margin-top: var(--space-4); }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal-header { margin-bottom: var(--space-4); }
.modal-header h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: var(--space-2);
  color: var(--text);
}
.modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: var(--ink-2);
  border: none;
  color: var(--text-muted);
  font-size: 1.35rem;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  transition: all var(--transition-fast);
  z-index: 2;
}
.modal-close:hover { background: var(--ink-3); color: var(--ember); }
.modal-body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.modal-body iframe { width: 100%; height: 300px; border: none; border-radius: var(--radius); }

@media (min-width: 769px) {
  .modal { align-items: center; padding: var(--space-4); }
  .modal-content {
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    max-width: 540px;
    max-height: 88vh;
    border-bottom: 1px solid var(--border);
    animation: modalCenterIn var(--transition) both;
  }
  @keyframes modalCenterIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .modal-content > * + * { margin-top: var(--space-5); }
  .modal-header { margin-bottom: var(--space-6); }
  .modal-header h3 { font-size: 1.75rem; }
  .modal-body iframe { height: 400px; }
}

/* ============================================================
   14 · TOASTS — full-width on mobile, right-aligned on desktop
   ============================================================ */
.toast-container,
#toastContainer {
  position: fixed;
  top: calc(var(--header-height) + env(safe-area-inset-top) + var(--space-3));
  right: var(--space-3);
  left: var(--space-3);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  max-width: none;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 4px solid var(--ember);
  box-shadow: var(--shadow-lg);
  animation: toastIn var(--transition) both;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.toast > span:first-child { font-size: 1.05rem; flex-shrink: 0; }
.toast > div { flex: 1; min-width: 0; }
.toast > div > div:first-child { font-weight: 600; line-height: 1.35; word-break: break-word; }
.toast > div > div:last-child {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: 3px;
  font-family: var(--font-mono);
  font-weight: 500;
}
.toast.success { border-left-color: var(--success); }
.toast.error   { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
.toast.info    { border-left-color: var(--info); }

@media (min-width: 769px) {
  .toast-container,
  #toastContainer {
    top: var(--space-5);
    right: var(--space-5);
    left: auto;
    align-items: flex-end;
    max-width: calc(100vw - 40px);
  }
  .toast {
    min-width: 280px;
    max-width: 360px;
    width: auto;
    padding: 14px 18px;
    font-size: 0.9375rem;
  }
}

/* ============================================================
   15 · SYNC STATUS
   ============================================================ */
.sync-status {
  position: fixed;
  top: calc(var(--header-height) + env(safe-area-inset-top) + var(--space-2));
  left: var(--space-3);
  right: var(--space-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.8125rem;
  z-index: 999;
  display: none;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-md);
  max-width: none;
  font-family: var(--font-mono);
  font-weight: 500;
}
.sync-status.syncing { color: var(--warning); border-left: 4px solid var(--warning); }
.sync-status.success { color: var(--success); border-left: 4px solid var(--success); }
.sync-status.error   { color: var(--danger);  border-left: 4px solid var(--danger);  }
.sync-status.info    { color: var(--info);    border-left: 4px solid var(--info);    }

@media (min-width: 769px) {
  .sync-status {
    top: 96px;
    right: var(--space-5);
    left: auto;
    max-width: 320px;
    padding: 12px 18px;
  }
}

/* ============================================================
   16 · STUDENTS
   ============================================================ */
.students-card .content-body,
#studentsList,
#allStudentsList {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.student-item {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}
.student-item:hover {
  border-color: var(--ember);
  box-shadow: 0 12px 28px rgba(255, 71, 20, 0.12);
}
.student-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.student-info h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.2;
}
.student-id {
  font-size: 0.6875rem;
  color: var(--text-faint);
  background: var(--ink-3);
  padding: 3px 8px;
  border-radius: 6px;
}
.streak-badge {
  background: var(--gradient-flame);
  color: #fff;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  box-shadow: 0 4px 12px var(--ember-glow);
}
.student-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-pill {
  text-align: center;
  padding: 10px 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.stat-pill-value {
  font-size: 1rem;
  color: var(--ember);
  line-height: 1;
}
.stat-pill-label {
  font-size: 0.5625rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
  font-weight: 700;
}

@media (min-width: 600px) {
  .students-card .content-body,
  #studentsList,
  #allStudentsList {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
  }
}
@media (min-width: 769px) {
  .student-item { padding: var(--space-5); }
  .student-item:hover { transform: translateY(-4px); }
  .student-info h4 { font-size: 1.15rem; margin-bottom: 6px; }
  .streak-badge { padding: 5px 12px; font-size: 0.8125rem; }
  .stat-pill { padding: 12px 6px; }
  .stat-pill-value { font-size: 1.1rem; }
  .stat-pill-label { font-size: 0.625rem; margin-top: 6px; }
}

/* ============================================================
   17 · ITEMS & ACTIVITY
   ============================================================ */
.items-list { display: flex; flex-direction: column; gap: var(--space-3); }
.item {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: all var(--transition-fast);
}
.item:hover { border-color: var(--ember); }
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.item-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--text);
}
.item-date {
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  background: var(--card);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.item-content { font-size: 0.875rem; line-height: 1.65; color: var(--text-muted); font-weight: 500; }
.item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: var(--space-3);
  opacity: 1;
}

.activity-list { display: flex; flex-direction: column; gap: var(--space-3); }
.activity-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
}
.activity-item:hover { border-color: var(--ember); }
.activity-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ember-soft);
  color: var(--ember);
  font-size: 1rem;
}
.activity-content { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.activity-title { font-weight: 600; font-size: 0.875rem; color: var(--text); }
.activity-meta {
  font-size: 0.625rem;
  color: var(--text-faint);
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

@media (min-width: 769px) {
  .items-list { gap: var(--space-5); }
  .item { padding: var(--space-5); }
  .item-title { font-size: 1.15rem; }
  .item-date { font-size: 0.75rem; padding: 5px 12px; }
  .item-content { font-size: 0.9375rem; line-height: 1.7; }
  .item-actions { opacity: 0.5; }
  .item:hover .item-actions { opacity: 1; }
  .activity-item { grid-template-columns: 40px 1fr; padding: var(--space-4); gap: var(--space-4); }
  .activity-icon { width: 40px; height: 40px; font-size: 1.05rem; }
  .activity-title { font-size: 0.9375rem; }
  .activity-meta { font-size: 0.6875rem; }
}

/* ============================================================
   18 · ASSIGNMENTS
   ============================================================ */
.assignment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.assignment-card { padding: var(--space-4); overflow: hidden; }
.assignment-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.assignment-card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
.assignment-card-due {
  background: var(--warning);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.625rem;
  font-weight: 700;
  white-space: nowrap;
  font-family: var(--font-mono);
}
.assignment-card-description {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: var(--space-4);
  font-weight: 500;
}
.assignment-card-actions { display: flex; gap: 8px; justify-content: flex-end; }

@media (min-width: 600px) {
  .assignment-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6); }
}
@media (min-width: 769px) {
  .assignment-card { padding: var(--space-6); }
  .assignment-card-title { font-size: 1.25rem; }
  .assignment-card-due { padding: 5px 12px; font-size: 0.6875rem; }
  .assignment-card-description { font-size: 0.9375rem; line-height: 1.65; margin-bottom: var(--space-5); }
}

/* ============================================================
   19 · CLASSROOM ITEMS (announcements, resources, polls)
   ============================================================ */
.classroom-item {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  transition: all var(--transition-fast);
  max-width: 100%;
  overflow: hidden;
}
.classroom-item:hover {
  border-color: var(--ember);
  box-shadow: 0 8px 20px var(--ember-soft);
}
.classroom-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}
.classroom-item-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.25;
}
.classroom-item-date {
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  background: var(--card);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-mono);
}
.classroom-item-content {
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  line-height: 1.65;
  font-size: 0.875rem;
  font-weight: 500;
}
.classroom-item-link {
  color: var(--ember);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
}
.classroom-item-link:hover { text-decoration: underline; }

@media (min-width: 769px) {
  .classroom-item { padding: var(--space-5); margin-bottom: var(--space-4); }
  .classroom-item:hover { transform: translateX(4px); }
  .classroom-item-title { font-size: 1.125rem; }
  .classroom-item-date { font-size: 0.75rem; padding: 5px 12px; }
  .classroom-item-content { font-size: 0.9375rem; line-height: 1.7; margin-bottom: var(--space-4); }
}

/* Polls — Google Forms look */
.classroom-item.poll-card {
  background: var(--poll-bg) !important;
  border: 1px solid var(--poll-border) !important;
  border-radius: 8px !important;
  padding: 1rem 1.25rem !important;
  box-shadow: none !important;
  color: var(--poll-text) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  transform: none !important;
  margin-bottom: var(--space-4) !important;
}
.classroom-item.poll-card:hover {
  transform: none !important;
  background: var(--poll-bg) !important;
  border-color: var(--poll-border) !important;
  box-shadow: none !important;
}
.classroom-item.poll-card .classroom-item-title {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: var(--poll-text) !important;
  white-space: normal !important;
}
.classroom-item.poll-card .classroom-item-date { display: none !important; }
.classroom-item.poll-card .poll-divider {
  height: 1px;
  background: var(--poll-divider);
  margin: 0.75rem 0 1rem;
}
.classroom-item.poll-card .poll-options { display: grid; gap: 0.5rem; }
.classroom-item.poll-card .poll-option {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.9rem;
  color: var(--poll-text);
}
.classroom-item.poll-card .poll-radio {
  width: 16px;
  height: 16px;
  accent-color: var(--poll-radio);
}
.classroom-item.poll-card .poll-other-input {
  width: 100%;
  border: 1px solid var(--poll-border);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.85rem;
  color: var(--poll-text);
  background: var(--poll-input-bg);
  margin-left: 8px;
}
.classroom-item.poll-card .poll-submit {
  margin-top: 0.75rem;
  background: var(--poll-button-bg) !important;
  color: var(--poll-text) !important;
  border: 1px solid var(--poll-border) !important;
  border-radius: 999px;
  padding: 6px 20px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
}
.classroom-item.poll-card .poll-submit:hover { background: var(--poll-button-hover) !important; }

/* ============================================================
   20 · EMPTY & LOADING
   ============================================================ */
.loading {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--text-muted);
  font-size: 0.9375rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  font-weight: 500;
}
.loading::after {
  content: '';
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--ember);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.empty-state-icon {
  font-size: 2.75rem;
  opacity: 0.6;
  animation: float 6s ease-in-out infinite;
  filter: drop-shadow(0 8px 16px var(--ember-soft));
}
.empty-state-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.empty-state-description {
  font-size: 0.875rem;
  line-height: 1.6;
  max-width: 420px;
  font-weight: 500;
}

@media (min-width: 769px) {
  .loading, .empty-state { padding: var(--space-12) var(--space-6); }
  .empty-state-icon { font-size: 3.5rem; }
  .empty-state-title { font-size: 1.5rem; }
  .empty-state-description { font-size: 0.9375rem; }
}

/* ============================================================
   21 · HEATMAP
   ============================================================ */
.aggregate-heatmap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
  overflow: hidden;
}
.calendar-heatmap {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  max-width: 100%;
  overflow: hidden;
}
.calendar-heatmap-header {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 3px;
  align-items: end;
  max-width: 100%;
  overflow: hidden;
}
.calendar-months {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 11px;
  column-gap: 2px;
  align-items: center;
  max-width: calc(100% - 25px);
  overflow: hidden;
}
.calendar-month-label {
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  grid-column: span 4;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-weight: 600;
}
.calendar-heatmap-body {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 3px;
  max-width: 100%;
  overflow: hidden;
}
.calendar-weekday-labels {
  display: grid;
  grid-template-rows: repeat(7, 11px);
  gap: 2px;
  font-size: 0.55rem;
  color: var(--text-muted);
  text-align: right;
  padding-right: 2px;
  font-family: var(--font-mono);
  font-weight: 600;
}
.calendar-weekday-labels span { height: 11px; line-height: 11px; overflow: hidden; }
.calendar-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 11px;
  grid-template-rows: repeat(7, 11px);
  gap: 2px;
  max-width: calc(100% - 25px);
  overflow: hidden;
}
.calendar-day {
  width: 11px;
  height: 11px;
  min-width: 11px;
  min-height: 11px;
  border-radius: 3px;
  background: var(--heat-0);
}
.calendar-day.level-1, .heatmap-cell.level-1 { background: var(--heat-1); }
.calendar-day.level-2, .heatmap-cell.level-2 { background: var(--heat-2); }
.calendar-day.level-3, .heatmap-cell.level-3 { background: var(--heat-3); }
.calendar-day.level-4, .heatmap-cell.level-4 { background: var(--heat-4); }

.aggregate-heatmap-cell {
  background: var(--heat-0);
  min-height: 22px;
  border: 1px solid var(--border);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.aggregate-heatmap-cell.level-1 { background: var(--heat-1); }
.aggregate-heatmap-cell.level-2 { background: var(--heat-2); }
.aggregate-heatmap-cell.level-3 { background: var(--heat-3); }
.aggregate-heatmap-cell.level-4 { background: var(--heat-4); }
.aggregate-heatmap-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--ember-soft);
}

.aggregate-heatmap-insight {
  margin-top: var(--space-2);
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
  font-weight: 500;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.aggregate-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-2);
  font-size: 0.65rem;
  color: var(--text-muted);
  justify-content: flex-end;
  flex-wrap: wrap;
  max-width: 100%;
  overflow: hidden;
  font-family: var(--font-mono);
  font-weight: 600;
}
.aggregate-heatmap-legend .legend-dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.aggregate-heatmap-legend .legend-dot.level-1 { background: var(--heat-1); }
.aggregate-heatmap-legend .legend-dot.level-2 { background: var(--heat-2); }
.aggregate-heatmap-legend .legend-dot.level-3 { background: var(--heat-3); }
.aggregate-heatmap-legend .legend-dot.level-4 { background: var(--heat-4); }

/* Sidebar heatmap — same sizing */
#aggregateHeatmapSidebar { max-width: 100%; overflow: hidden; }
.sidebar-stats:has(#aggregateHeatmapSidebar) { overflow: hidden; max-width: 100%; }

/* ============================================================
   22 · STREAK CHAIN
   ============================================================ */
.streak-chain-container {
  grid-column: span 12;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
}
.streak-chain-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.streak-chain-header h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.streak-chain-count {
  background: var(--gradient-flame);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 18px var(--ember-glow);
}
.streak-chain-wrapper {
  position: relative;
  min-height: 80px;
  overflow-x: auto;
  padding: var(--space-2) 0;
  -webkit-overflow-scrolling: touch;
}
.streak-chain {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  padding: var(--space-2);
  min-width: min-content;
}
.chain-link {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.6875rem;
  position: relative;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.chain-link.completed {
  background: var(--gradient-flame);
  color: #fff;
  box-shadow: 0 4px 14px var(--ember-glow), inset 0 1px 0 rgba(255,255,255,0.3);
}
.chain-link.pending {
  background: var(--ink-2);
  border: 2px dashed var(--ink-4);
  color: var(--text-faint);
}
.chain-link.active {
  background: var(--ember-hot);
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 24px var(--ember-glow);
  animation: chainPulse 1.8s infinite;
}
@keyframes chainPulse {
  0%, 100% { box-shadow: 0 0 18px var(--ember-glow); }
  70%      { box-shadow: 0 0 36px var(--ember-glow); }
}
.chain-link.new-link { animation: chainGrow 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes chainGrow {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
.streak-chain-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: var(--space-2);
  font-weight: 600;
}
.streak-chain-milestone {
  background: var(--ember-soft);
  border-left: 4px solid var(--ember);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  line-height: 1.55;
  font-weight: 500;
}
.streak-chain-milestone strong {
  color: var(--ember-hot);
  display: block;
  margin-bottom: 3px;
  font-weight: 700;
}
.streak-chain-empty { text-align: center; padding: var(--space-8); color: var(--text-muted); }
.streak-chain-empty-icon { font-size: 2.5rem; margin-bottom: var(--space-3); opacity: 0.5; }

@media (min-width: 769px) {
  .streak-chain-container { padding: var(--card-pad); border-radius: var(--radius-xl); }
  .streak-chain-header h2 { font-size: 1.5rem; }
  .streak-chain-count { padding: 10px 22px; font-size: 1rem; }
  .streak-chain-info { font-size: 0.875rem; }
  .chain-link { width: 38px; height: 38px; min-width: 38px; font-size: 0.75rem; }
}

/* ============================================================
   23 · CHALLENGES
   ============================================================ */
.challenges-section {
  padding-top: var(--space-5);
  border-top: 2px dashed var(--border);
}
.challenges-section > * + * { margin-top: var(--space-3); }
.challenges-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.challenge-item {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: all var(--transition-fast);
  cursor: pointer;
}
.challenge-item:hover { border-color: var(--ember); }
.challenge-item.active { border-left: 4px solid var(--ember); }
.challenge-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text);
  margin-bottom: 4px;
}
.challenge-details {
  font-size: 0.6875rem;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  font-weight: 500;
}
.challenge-stats { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.challenge-stat {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 6px;
  background: var(--card);
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
}
.challenge-stat.winning { background: var(--success); color: #fff; }
.challenge-stat.losing  { background: rgba(239, 68, 68, 0.12); color: var(--danger); }

.challenge-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.challenge-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: all var(--transition-fast);
  position: relative;
}
.challenge-card:hover {
  border-color: var(--ember);
  box-shadow: 0 12px 28px rgba(255,71,20,0.12);
}
.challenge-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.challenge-card-type {
  background: var(--gradient-flame);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  display: inline-block;
}
.challenge-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.challenge-card-time {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  font-weight: 500;
}
.challenge-card-progress { margin: var(--space-3) 0; }
.challenge-card-progress > div:last-child {
  height: 8px;
  background: var(--ink-2);
  border-radius: 4px;
  overflow: hidden;
}
.challenge-card-progress > div:last-child > div {
  height: 100%;
  background: var(--gradient-flame);
  box-shadow: 0 0 10px var(--ember-glow);
}
.challenge-card-stats {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
}
.challenge-card-class {
  text-align: center;
  font-size: 0.625rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.challenge-card-score {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 4px;
  color: var(--text);
}
.challenge-card-score.winning { color: var(--success); }
.challenge-card-score.losing  { color: var(--danger); }
.challenge-card-actions, .challenge-actions {
  display: flex;
  gap: 8px;
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.challenge-card.winning { animation: celebrationPulse 2s infinite; border-color: var(--success); }
@keyframes celebrationPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

.create-challenge-form { max-width: 100%; margin: 0 auto; }
.form-step { animation: fadeInUp var(--transition) both; min-height: 300px; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.challenge-type-selector {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.challenge-type-option {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 170px;
}
.challenge-type-option:hover {
  border-color: var(--ember);
  box-shadow: 0 12px 28px var(--ember-soft);
}
.challenge-type-option.selected {
  border-color: var(--ember);
  background: linear-gradient(135deg, var(--ember-soft), transparent);
  box-shadow: 0 12px 32px var(--ember-soft);
}
.challenge-type-icon { font-size: 2.25rem; margin-bottom: var(--space-3); }
.challenge-type-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 6px;
  color: var(--text);
}
.challenge-type-desc { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; font-weight: 500; }
.duration-selector {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: var(--space-5) 0;
}
.duration-option {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.duration-option:hover { border-color: var(--ember); }
.duration-option.selected { border-color: var(--ember); background: var(--ember-soft); }
.duration-number {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ember);
  margin-bottom: 4px;
}
.duration-label { font-weight: 700; font-size: 0.9375rem; margin-bottom: 3px; }
.duration-subtext { font-size: 0.6875rem; color: var(--text-muted); font-weight: 500; }
.challenge-preview {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: var(--space-5) 0;
  position: relative;
  overflow: hidden;
}
.challenge-preview::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-flame);
}
.step-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.step-indicator { display: flex; gap: 8px; align-items: center; }
.step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-4);
  transition: all var(--transition-fast);
}
.step-dot.active {
  background: var(--ember);
  transform: scale(1.35);
  box-shadow: 0 0 12px var(--ember-glow);
}

@media (min-width: 600px) {
  .challenge-cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-6); }
  .challenge-type-selector { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); margin: var(--space-8) 0; }
  .challenge-type-option { padding: var(--space-8); min-height: 220px; }
  .challenge-type-icon { font-size: 3rem; margin-bottom: var(--space-4); }
  .challenge-type-label { font-size: 1.35rem; }
  .duration-selector { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-8) 0; }
  .duration-option { padding: var(--space-5); }
  .duration-number { font-size: 2rem; margin-bottom: 6px; }
  .duration-label { font-size: 1rem; }
  .duration-subtext { font-size: 0.75rem; }
}
@media (min-width: 769px) {
  .create-challenge-form { max-width: 720px; }
  .form-step { min-height: 400px; }
  .challenge-card { padding: var(--space-6); border-radius: var(--radius-xl); }
  .challenge-card:hover { transform: translateY(-3px); }
  .challenge-card-title { font-size: 1.35rem; margin-bottom: 8px; }
  .challenge-card-score { font-size: 1.85rem; margin-top: 6px; }
  .challenge-card-time { font-size: 0.875rem; }
}

/* ============================================================
   24 · NOTIFICATIONS
   ============================================================ */
.notification-item {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.notification-item:hover { background: var(--ink-2); }
.notification-item.unread {
  background: rgba(59, 130, 246, 0.05);
  border-left: 4px solid var(--info);
}
.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: 6px;
}
.notification-title { font-weight: 700; font-size: 0.875rem; color: var(--text); }
.notification-time { font-size: 0.6875rem; color: var(--text-muted); }
.notification-content { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.6; font-weight: 500; }
.notification-actions { display: flex; gap: 8px; margin-top: var(--space-3); flex-wrap: wrap; }
.notification-bell { position: relative; }
.notification-bell .badge, .notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--gradient-flame);
  color: #fff;
  border-radius: var(--radius-pill);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  box-shadow: 0 0 12px var(--ember-glow);
}

/* ============================================================
   25 · MEMORY WALL
   ============================================================ */
.memory-whiteboard,
#memoryWhiteboard {
  position: relative;
  width: 100%;
  height: 400px;
  background:
    linear-gradient(45deg, var(--card) 25%, transparent 25%, transparent 75%, var(--card) 75%, var(--card) 100%),
    linear-gradient(45deg, var(--card) 25%, var(--bg) 25%, var(--bg) 75%, var(--card) 75%, var(--card) 100%);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--space-3) 0;
}
.whiteboard-background {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}
.sticky-notes-container,
#stickyNotesContainer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sticky-note {
  position: absolute;
  width: 160px;
  min-height: 150px;
  padding: var(--space-3);
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(60, 42, 15, 0.20), 0 0 0 1px rgba(60, 42, 15, 0.08);
  cursor: move;
  pointer-events: auto;
  transition: box-shadow 0.2s, transform 0.2s;
  overflow: hidden;
  z-index: 2;
  color: #333;
  touch-action: none;
}
.sticky-note:hover {
  box-shadow: 0 12px 32px rgba(60, 42, 15, 0.28);
  transform: translateY(-2px) rotate(0deg) !important;
}
.sticky-note.dragging {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.30);
  transform: scale(1.05) rotate(0deg) !important;
  z-index: 1000 !important;
}
.sticky-note.welcome {
  width: 240px;
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%) !important;
  color: #fff;
}
.sticky-note.welcome .note-text,
.sticky-note.welcome .note-author { color: #fff; }
.welcome-note {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.note-content { height: 100%; display: flex; flex-direction: column; }
.note-text {
  flex: 1;
  font-family: 'Comic Sans MS', 'Chalkboard SE', cursive, var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: break-word;
  margin-bottom: var(--space-3);
  max-height: 100px;
  overflow-y: auto;
  color: #333;
}
.note-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.7);
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px dashed rgba(0,0,0,0.12);
  font-weight: 600;
}
.note-author { font-weight: 700; }
.note-date { opacity: 0.7; font-family: var(--font-mono); }
.note-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-2);
}
.note-likes {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-family: var(--font-mono);
}
.btn-note {
  background: none;
  border: none;
  font-size: 1.15rem;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
  min-width: 30px;
  min-height: 30px;
}
.btn-note:hover { background-color: rgba(0, 0, 0, 0.08); }

.sticky-note .note-text,
.sticky-note .note-meta,
.sticky-note .note-author,
.sticky-note .note-date,
.sticky-note .note-likes { color: #333 !important; }

.sticky-note-preview {
  width: 100%;
  min-height: 140px;
  padding: var(--space-3);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(60, 42, 15, 0.16);
  margin-top: var(--space-3);
  color: #333;
}
.preview-content { height: 100%; display: flex; flex-direction: column; }
.preview-text {
  flex: 1;
  font-family: 'Comic Sans MS', 'Chalkboard SE', cursive, var(--font-ui);
  font-size: 13px;
  line-height: 1.55;
  color: #1A1815;
  margin-bottom: 6px;
  font-weight: 500;
}
.preview-meta { font-size: 11px; color: rgba(0,0,0,0.55); margin-top: auto; font-weight: 600; }
.preview-author { font-weight: 700; }

.color-picker {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.color-option {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all var(--transition-fast);
}
.color-option:hover { transform: scale(1.10); }
.color-option.selected {
  border-color: var(--ember);
  transform: scale(1.10);
  box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--ember);
}
.color-option-tooltip { display: none; }

.whiteboard-controls {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  display: flex;
  gap: 6px;
  z-index: 10;
  flex-wrap: wrap;
}
.whiteboard-btn {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 0.8125rem;
  box-shadow: var(--shadow-sm);
}
.whiteboard-btn:hover {
  background: var(--ember);
  color: #fff;
  border-color: var(--ember);
}

.add-memory-form {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  border: 1px solid var(--border);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (min-width: 769px) {
  .memory-whiteboard, #memoryWhiteboard { height: 600px; background-size: 40px 40px; background-position: 0 0, 20px 20px; margin: var(--space-4) 0; }
  .sticky-note { width: 200px; min-height: 180px; padding: var(--space-4); }
  .note-text { font-size: 15px; max-height: 130px; }
  .add-memory-form { padding: var(--space-8); margin-bottom: var(--space-8); border-radius: var(--radius-xl); }
  .form-row { grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-bottom: var(--space-5); }
  .color-option { width: 38px; height: 38px; }
}

/* ============================================================
   26 · WHITEBOARD SESSION
   ============================================================ */
.wb-session {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  margin: var(--space-4) 0;
  display: none;
  overflow: hidden;
  position: relative;
  z-index: 50;
}
.wb-session.show,
.wb-session[style*="display: block"],
.wb-session[style*="display:block"] { display: block !important; }
.wb-session-header {
  padding: var(--space-4);
  background: var(--gradient-flame);
  color: #fff;
  text-align: center;
}
.wb-session-header h3 {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}
.wb-session-code {
  font-size: 1.25rem;
  letter-spacing: 0.2em;
  background: #fff;
  color: var(--ember);
  padding: 10px 18px;
  border-radius: var(--radius);
  display: inline-block;
  margin: var(--space-3) 0;
}
.wb-participants {
  padding: var(--space-3);
  background: var(--ember-soft);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
}
.wb-tools {
  padding: var(--space-3);
  background: var(--ink-2);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  justify-content: center;
  align-items: center;
}
.wb-tool {
  padding: 7px 12px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}
.wb-tool.active { background: var(--ember); color: #fff; border-color: var(--ember); }
.wb-color {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
}
.wb-color.active {
  border-color: var(--ember);
  transform: scale(1.12);
  box-shadow: 0 0 14px var(--ember-glow);
}
#wbCanvas {
  display: block;
  background: #fff;
  width: 100%;
  height: auto;
  cursor: crosshair;
  touch-action: none;
}
#wbPenSize {
  padding: 7px 10px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  width: auto;
}
@media (min-width: 769px) {
  .wb-session-header h3 { font-size: 1.5rem; }
  .wb-session-code { font-size: 1.75rem; letter-spacing: 0.25em; padding: 12px 26px; }
  .wb-tool { padding: 8px 16px; font-size: 0.875rem; }
}

/* ============================================================
   27 · PRIORITY LIST
   ============================================================ */
.priority-list-container {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid var(--border);
  width: 100%;
  box-sizing: border-box;
}
.priority-list-container:hover { border-color: var(--ember); }
.priority-list-container h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.priority-input-area { display: flex; gap: 8px; margin-bottom: var(--space-4); flex-wrap: wrap; }
.priority-input-area input {
  flex: 1 1 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--ink-2);
  color: var(--text);
  font-size: 16px;
  min-height: 48px;
  font-weight: 500;
}
.priority-input-area input:focus { border-color: var(--ember); background: var(--card); }
.priority-input-area button {
  padding: 12px 20px;
  background: var(--gradient-flame);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  white-space: nowrap;
  min-height: 48px;
  flex: 1 1 100%;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 12px var(--ember-glow);
}
.priority-input-area button:hover { filter: brightness(1.05); }
.priority-items {
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: var(--space-4);
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}
.priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--ink-2);
  border-radius: var(--radius);
  margin-bottom: 8px;
  border: 1px solid var(--border);
  animation: fadeInUp var(--transition) both;
}
.priority-item:hover { border-color: var(--ember); }
.priority-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.priority-item-left input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--ember);
  flex-shrink: 0;
}
.priority-item-left span {
  font-size: 0.875rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.priority-item-left span.completed { text-decoration: line-through; color: var(--text-faint); }
.priority-item-actions {
  display: flex;
  gap: 4px;
  opacity: 1;
  margin-left: 6px;
  flex-shrink: 0;
}
.priority-item-actions button {
  background: none;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 0.8125rem;
  border-radius: 6px;
  color: var(--text-muted);
  min-width: 32px;
  min-height: 32px;
}
.priority-item-actions button:hover { background: var(--ink-3); color: var(--ember); }
.priority-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  gap: 8px;
  flex-wrap: wrap;
}
.priority-stats { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.priority-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  color: var(--text-muted);
  background: var(--ink-2);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  font-weight: 600;
}
.priority-stat span { font-weight: 700; color: var(--ember); margin-left: 2px; }
.priority-clear-btn {
  background: none;
  border: 2px solid var(--danger);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--danger);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.priority-clear-btn:hover:not(:disabled) { background: var(--danger); color: #fff; }
.priority-clear-btn:disabled { opacity: 0.35; cursor: default; border-color: var(--border); color: var(--text-muted); }
.priority-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  background: var(--ink-2);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
  border: 2px dashed var(--ink-4);
}
.priority-empty-icon { font-size: 1.75rem; margin-bottom: 8px; opacity: 0.5; }
.priority-empty-text { font-size: 0.875rem; color: var(--text-muted); font-weight: 500; }

@media (min-width: 769px) {
  .priority-list-container { padding: var(--space-6); border-radius: var(--radius-xl); }
  .priority-list-container h3 { font-size: 1.35rem; margin-bottom: var(--space-5); }
  .priority-input-area { flex-wrap: nowrap; }
  .priority-input-area input { flex: 1; }
  .priority-input-area button { flex: 0 0 auto; padding: 12px 22px; font-size: 0.9375rem; }
  .priority-item { padding: 12px 16px; margin-bottom: 10px; }
  .priority-item-left span { font-size: 0.9375rem; }
  .priority-item-actions { opacity: 0; transition: opacity var(--transition-fast); }
  .priority-item:hover .priority-item-actions { opacity: 1; }
  .priority-stat { font-size: 0.75rem; padding: 5px 12px; }
}

/* ============================================================
   28 · DASHBOARD BUTTONS (horizontal scroll on mobile)
   ============================================================ */
.dashboard-button-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--space-4);
  padding: 5px;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  flex-wrap: nowrap;
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dashboard-button-bar::-webkit-scrollbar { display: none; }
.dashboard-section-btn {
  padding: 9px 14px;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 40px;
}
.dashboard-section-btn:hover { background: var(--card); color: var(--text); }
.dashboard-section-btn.active {
  background: var(--gradient-flame);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 14px var(--ember-soft);
}
@media (min-width: 769px) {
  .dashboard-button-bar { width: fit-content; flex-wrap: wrap; margin-bottom: var(--space-8); }
  .dashboard-section-btn { padding: 10px 20px; font-size: 0.875rem; }
}

/* ============================================================
   29 · RESOURCES / CLASS CODE
   ============================================================ */
.resource-clickable { cursor: pointer; transition: all var(--transition-fast); }
.resource-clickable:hover {
  border-color: var(--ember) !important;
  box-shadow: 0 10px 26px var(--ember-soft);
}
.resource-file-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--ink-2);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  margin-left: 8px;
  font-weight: 600;
}

.class-code-display {
  background: var(--card);
  border: 3px dashed var(--ember);
  color: var(--text);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  margin: var(--space-4) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 12px 40px var(--ember-soft),
    0 0 0 4px rgba(255, 71, 20, 0.08);
}
.class-code-display h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: var(--space-2);
  color: var(--text);
}
.class-code-display .code {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin: var(--space-4) 0;
  background: var(--gradient-flame);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  word-break: break-all;
}
.class-code-display .btn {
  background: var(--card);
  color: var(--text);
  border: 2px solid var(--border);
}
.class-code-display .btn:hover {
  background: var(--gradient-flame);
  color: #fff;
  border-color: transparent;
}
.class-code-display .btn-danger {
  background: var(--card);
  color: var(--danger);
  border-color: var(--danger);
}
.class-code-display .btn-danger:hover {
  background: var(--danger);
  color: #fff;
}
@media (min-width: 769px) {
  .class-code-display { padding: var(--space-8); margin: var(--space-6) 0; border-radius: var(--radius-xl); }
  .class-code-display h2 { font-size: 1.5rem; }
  .class-code-display .code { font-size: 2.75rem; letter-spacing: 0.28em; }
}

/* ============================================================
   30 · CHECK-INS
   ============================================================ */
.checkin-chart { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.chart-bar { transition: height var(--transition-slow); cursor: pointer; }
.chart-bar:hover { opacity: 0.9; transform: translateY(-4px); }
.emotion-confident   { color: var(--success); background: rgba(16, 185, 129, 0.10);  border-left: 4px solid var(--success); }
.emotion-okay        { color: var(--warning); background: rgba(245, 158, 11, 0.10);  border-left: 4px solid var(--warning); }
.emotion-struggling  { color: var(--danger);  background: rgba(239, 68, 68, 0.10);   border-left: 4px solid var(--danger);  }
.btn-checkin {
  background: var(--gradient-flame);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 14px var(--ember-glow);
  min-height: 44px;
  font-size: 0.875rem;
}
.btn-checkin:hover { filter: brightness(1.06); transform: translateY(-2px); }
.session-active { animation: softPulse 2s infinite; }
@keyframes softPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

/* ============================================================
   31 · CONFETTI & FEEDBACK
   ============================================================ */
#confettiCanvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 9999 !important;
  display: none !important;
  background: transparent !important;
}
.celebration-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--gradient-flame);
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  z-index: 1;
  box-shadow: 0 0 16px var(--ember-glow);
  animation: bounceY 1s infinite;
}
@keyframes bounceY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.feedback-btn {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  right: 14px;
  background: var(--gradient-flame);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  padding: 11px 16px;
  font-weight: 700;
  font-size: 0.8125rem;
  cursor: pointer;
  box-shadow: 0 10px 28px var(--ember-glow);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
  font-family: var(--font-ui);
  min-height: 44px;
}
.feedback-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 36px var(--ember-glow); }
@media (min-width: 769px) {
  .feedback-btn { bottom: 20px; right: 20px; padding: 14px 24px; font-size: 0.9375rem; }
}

/* ============================================================
   32 · CHATBOT & TOUR
   ============================================================ */
.teacher-chatbot-fab {
  position: fixed;
  z-index: 9998;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom) + 70px);
}
.teacher-chatbot-bubble {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 14px;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: all var(--transition);
  box-shadow: 0 16px 40px var(--ember-soft);
  pointer-events: none;
  max-width: 260px;
  margin-bottom: 10px;
}
.teacher-chatbot-bubble.show { opacity: 1; transform: translateY(0) scale(1); }
.bubble-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bubble-icon { font-size: 1.15rem; }
.bubble-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ember);
}
.bubble-message { font-weight: 600; line-height: 1.5; margin-bottom: 8px; font-size: 0.8125rem; color: var(--text); }
.bubble-stats {
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 8px;
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  font-weight: 500;
}
.teacher-chatbot-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.teacher-chatbot-img { width: 70px; height: 70px; object-fit: contain; }
@media (min-width: 769px) {
  .teacher-chatbot-fab { right: 18px; bottom: 96px; }
  .teacher-chatbot-bubble { padding: 18px; max-width: 340px; }
  .bubble-title { font-size: 1.1rem; }
  .bubble-message { font-size: 0.9375rem; }
  .bubble-stats { font-size: 0.8125rem; }
  .teacher-chatbot-img { width: 100px; height: 100px; }
}

.tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(60, 42, 15, 0.55);
  backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.tour-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  max-width: 500px;
  width: 100%;
  padding: var(--space-6) var(--space-5);
  text-align: center;
  box-shadow: var(--shadow-2xl);
  border: 1px solid var(--border);
  animation: modalIn var(--transition) both;
  max-height: 90vh;
  overflow-y: auto;
}
.tour-icon { font-size: 3rem; margin-bottom: var(--space-3); display: inline-block; }
.tour-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--text);
}
.tour-impact {
  font-size: 0.6875rem;
  color: var(--ember);
  margin-bottom: var(--space-3);
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
}
.tour-description { color: var(--text-muted); font-size: 0.875rem; line-height: 1.6; margin-bottom: var(--space-5); font-weight: 500; }
.tour-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--ink-2);
  border-radius: var(--radius-lg);
}
.tour-feature { text-align: center; }
.tour-feature-icon { font-size: 1.5rem; margin-bottom: 6px; display: inline-block; }
.tour-feature-text { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.tour-progress { display: flex; justify-content: center; gap: 8px; margin-bottom: var(--space-5); flex-wrap: wrap; }
.tour-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-4);
  transition: all var(--transition-fast);
  cursor: pointer;
}
.tour-dot.active {
  width: 24px;
  background: var(--gradient-flame);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 12px var(--ember-glow);
}
.tour-buttons { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.tour-btn {
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-size: 0.875rem;
  transition: all var(--transition-fast);
  min-height: 44px;
}
.tour-btn-primary { background: var(--gradient-flame); color: #fff; box-shadow: 0 6px 18px var(--ember-glow); }
.tour-btn-primary:hover { filter: brightness(1.06); }
.tour-btn-secondary { background: transparent; border: 2px solid var(--border); color: var(--text); }
.tour-btn-secondary:hover { background: var(--ink-2); border-color: var(--ember); color: var(--ember); }
.tour-highlight {
  position: relative;
  z-index: 10001;
  border-radius: var(--radius);
  background: var(--ember-soft);
  animation: tourGlow 1.5s infinite;
}
@keyframes tourGlow {
  0%   { box-shadow: 0 0 0 0 var(--ember-glow); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 71, 20, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 71, 20, 0); }
}
@media (min-width: 600px) {
  .tour-features { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); padding: var(--space-5); }
}
@media (min-width: 769px) {
  .tour-card { padding: var(--space-10); border-radius: var(--radius-2xl); }
  .tour-icon { font-size: 4rem; margin-bottom: var(--space-4); }
  .tour-title { font-size: 1.75rem; }
  .tour-description { font-size: 1rem; margin-bottom: var(--space-8); }
  .tour-features { margin-bottom: var(--space-8); }
  .tour-progress { margin-bottom: var(--space-8); }
}

/* ============================================================
   33 · CLASS PULSE WIDGET — MOBILE-FIRST, VISIBLE
   ============================================================ */
.pulse-widget {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition-fast);
  margin-bottom: var(--space-5);
}
.pulse-widget:hover { border-color: var(--ember); }

/* The ring — visible track + bright progress */
.pulse-ring-wrapper {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto;
  flex-shrink: 0;
}
.pulse-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  filter: drop-shadow(0 8px 24px var(--ember-soft));
}
.pulse-ring-track {
  fill: none;
  stroke: rgba(255, 71, 20, 0.14);   /* visible warm track — was nearly invisible */
  stroke-width: 14;
}
.pulse-ring-progress {
  fill: none;
  stroke: url(#pulseGradient);
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1);
}
.pulse-widget[data-state="cold"] .pulse-ring-progress { stroke: url(#pulseCold); }
.pulse-widget[data-state="mid"]  .pulse-ring-progress { stroke: url(#pulseMid); }
.pulse-widget[data-state="warm"] .pulse-ring-progress { stroke: url(#pulseWarm); }
.pulse-ring-value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.pulse-ring-number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.pulse-ring-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: 700;
  margin-top: 4px;
}

.pulse-info { min-width: 0; }
.pulse-info h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-2);
  color: var(--text);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.pulse-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: var(--space-4);
}
.pulse-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.pulse-metric {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-2);
  text-align: center;
  transition: all var(--transition-fast);
}
.pulse-metric:hover { border-color: var(--ember); }
.pulse-metric-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ember);
  margin-bottom: 4px;
}
.pulse-metric-label {
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
  line-height: 1.3;
}
.pulse-history {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border);
}
.pulse-history span {
  flex: 1;
  height: var(--h, 30%);
  min-height: 6px;
  background: var(--gradient-flame);
  border-radius: 4px 4px 2px 2px;
  opacity: 0.55;
  transition: all var(--transition-fast);
}
.pulse-history span:hover { opacity: 1; transform: translateY(-3px); }
.pulse-history span:last-child { opacity: 1; box-shadow: 0 0 12px var(--ember-glow); }

/* Tablet + desktop: side-by-side layout */
@media (min-width: 769px) {
  .pulse-widget {
    grid-template-columns: auto 1fr;
    gap: var(--space-8);
    padding: var(--space-8);
    text-align: left;
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-8);
  }
  .pulse-ring-wrapper { width: 180px; height: 180px; margin: 0; }
  .pulse-ring-number { font-size: 3.5rem; }
  .pulse-info h2 { font-size: 1.85rem; }
  .pulse-desc { font-size: 1rem; margin-bottom: var(--space-5); }
  .pulse-metrics { gap: var(--space-4); margin-bottom: var(--space-5); }
  .pulse-metric { padding: var(--space-4); }
  .pulse-metric-value { font-size: 1.6rem; }
  .pulse-metric-label { font-size: 0.65rem; }
}
@media (min-width: 1021px) {
  .pulse-widget { gap: var(--space-10); padding: var(--space-8); }
  .pulse-ring-wrapper { width: 200px; height: 200px; }
  .pulse-ring-number { font-size: 4rem; }
  .pulse-info h2 { font-size: 2rem; }
  .pulse-metrics { gap: var(--space-5); }
  .pulse-metric-value { font-size: 1.75rem; }
  .pulse-metric-label { font-size: 0.6875rem; letter-spacing: 0.1em; }
  .pulse-history { height: 40px; gap: 4px; }
}

/* ============================================================
   34 · PRESENTATION MODE
   ============================================================ */
body.presentation-mode .sidebar,
body.presentation-mode .mobile-header,
body.presentation-mode .sidebar-toggle,
body.presentation-mode .sidebar-backdrop,
body.presentation-mode .dashboard-header,
body.presentation-mode .dashboard-button-bar,
body.presentation-mode .feedback-btn { display: none !important; }

body.presentation-mode .main-content {
  margin-left: 0 !important;
  padding: 12px !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-top: 12px !important;
}
body.presentation-mode { overflow-y: auto !important; overflow-x: hidden !important; }
body.presentation-mode #presentation { display: block !important; }

.presentation-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}
.pres-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.pres-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
  animation: presLivePulse 2s infinite;
  flex-shrink: 0;
}
@keyframes presLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.pres-toolbar-info { min-width: 0; flex: 1; }
.presentation-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.presentation-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 0.6875rem;
}
.pres-meta-pill {
  font-family: var(--font-mono);
  background: var(--ink-2);
  color: var(--text);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-weight: 600;
}
.pres-meta-updated { color: var(--text-muted); }
.presentation-controls { display: flex; gap: 6px; flex-wrap: wrap; }
.pres-btn {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  min-height: 38px;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.pres-btn:hover { border-color: var(--ember); color: var(--ember); }
.pres-btn:active { transform: scale(0.97); }
.pres-btn-primary {
  background: var(--gradient-flame);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px var(--ember-glow);
}
.pres-btn-primary:hover { color: #fff; filter: brightness(1.05); }
.pres-btn-danger {
  background: transparent;
  color: #dc2626;
  border-color: #dc2626;
}
.pres-btn-danger:hover { background: #dc2626; color: #fff; }
.pres-btn-sm { padding: 7px 12px; font-size: 0.75rem; min-height: 34px; }
.pres-btn-full { width: 100%; }

.presentation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.presentation-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 140px;
  overflow: hidden;
}
.presentation-card h3 {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 12px;
  flex-shrink: 0;
}
.pres-span-4, .pres-span-6, .pres-span-8, .pres-span-12 { grid-column: span 1; }

.pres-card-snapshot { justify-content: space-between; }
.pres-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.pres-snapshot-stat { display: flex; flex-direction: column; gap: 4px; }
.pres-snapshot-value {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.pres-snapshot-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
}
.presentation-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ember-soft);
  color: var(--ember);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  align-self: flex-start;
}

.pres-card-activity { min-height: 220px; max-height: 320px; }
.presentation-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.presentation-item {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.8125rem;
  line-height: 1.4;
  flex-shrink: 0;
  font-weight: 500;
}
.presentation-item strong { display: block; font-weight: 700; margin-bottom: 2px; color: var(--text); }

.pres-card-spotlight { justify-content: space-between; }
.pres-card-actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; flex-shrink: 0; }

.pres-checkins {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.pres-checkin-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 4px;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.pres-checkin-emoji { font-size: 1.25rem; line-height: 1; }
.pres-checkin-value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.pres-checkins-updated { font-size: 0.6875rem; color: var(--text-muted); margin-bottom: 6px; }

.pres-card-agenda { min-height: 180px; }
.pres-timer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.presentation-timer {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.pres-timer-controls { display: flex; gap: 6px; flex-wrap: wrap; }
.pres-agenda-input { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pres-agenda-input input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--ink-2);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  min-height: 42px;
}
.pres-agenda-input input:focus { outline: none; border-color: var(--ember); background: var(--card); }
.pres-agenda-input .pres-btn { width: 100%; }

.pres-card-goals { justify-content: space-between; }
.pres-goal { margin-bottom: 12px; }
.pres-goal label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.pres-goal input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--ink-2);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  margin-bottom: 8px;
  min-height: 42px;
}
.pres-goal input:focus { outline: none; border-color: var(--ember); background: var(--card); }
.presentation-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--ink-2);
  overflow: hidden;
  border: 1px solid var(--border);
}
.presentation-progress > span {
  display: block;
  height: 100%;
  background: var(--gradient-flame);
  width: 0%;
  transition: width 0.4s ease;
  border-radius: 3px;
}

/* Tablet: 12-col grid, larger snapshot values */
@media (min-width: 769px) {
  body.presentation-mode .main-content { padding: 16px !important; }
  .presentation-toolbar {
    flex-direction: row;
    align-items: center;
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-6);
    gap: var(--space-5);
  }
  .presentation-title { font-size: 1.5rem; }
  .presentation-meta { font-size: 0.75rem; }
  .presentation-controls { flex-wrap: wrap; }
  .pres-btn { padding: 10px 18px; font-size: 0.875rem; min-height: 42px; }
  .pres-btn-sm { padding: 8px 14px; font-size: 0.8125rem; min-height: 38px; }

  .presentation-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
  .presentation-card { padding: 16px; border-radius: 16px; min-height: 160px; }
  .pres-span-4 { grid-column: span 4; }
  .pres-span-6 { grid-column: span 6; }
  .pres-span-8 { grid-column: span 8; }
  .pres-span-12 { grid-column: span 12; }
  .pres-snapshot-value { font-size: 2.5rem; }
  .pres-checkin-value { font-size: 1.6rem; }
  .presentation-timer { font-size: 2.5rem; }
  .pres-agenda-input { flex-direction: row; }
  .pres-agenda-input .pres-btn { width: auto; }
  .pres-card-activity { max-height: 380px; }
}

/* ============================================================
   35 · SCROLLBAR · ACCESSIBILITY
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-4);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ember);
  background-clip: padding-box;
  border: 2px solid transparent;
}

:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (hover: none) and (pointer: coarse) {
  .btn:hover, .btn-submit:hover, .nav-item:hover,
  .student-item:hover, .item:hover, .stat-card:hover,
  .content-card:hover, .form-card:hover, .assignment-card:hover,
  .challenge-card:hover, .memory-card:hover { transform: none !important; }
  .btn:active, .btn-submit:active, .nav-item:active { transform: scale(0.98); }
  .item-actions, .priority-item-actions { opacity: 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .teacher-emoji, .empty-state-icon { animation: none; }
}

/* ============================================================
   36 · SMALL PHONES
   ============================================================ */
@media (max-width: 380px) {
  :root {
    --paper-ruling: 26px;
    --paper-margin-x: 16px;
  }
  .pulse-ring-wrapper { width: 140px; height: 140px; }
  .pulse-ring-number { font-size: 2.5rem; }
  .stat-number { font-size: 1.25rem; }
  .quick-stats { gap: 8px; }
  .stat-card { padding: var(--space-3); }
  .content-card, .form-card { padding: var(--space-4); }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .sidebar, .mobile-header, .sidebar-toggle, .sidebar-backdrop, .controls-bar,
  .btn, .delete-btn, .modal, .toast-container, .sync-status,
  .feedback-btn, .teacher-chatbot-fab, .dashboard-button-bar { display: none !important; }
  .main-content { margin-left: 0; padding: 0; }
  .content-body { max-height: none; overflow: visible; }
  body { background: #fff; color: #000; }
  body::before, body::after { display: none; }
  .content-card, .form-card, .student-item, .item, .assignment-card,
  .pulse-widget { border: 1px solid #ddd; box-shadow: none; break-inside: avoid; }
}

/* ============================================================
   SAFE AREAS
   ============================================================ */
@supports (padding: max(0px)) {
  .main-content {
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
  }
  @media (min-width: 769px) {
    .main-content {
      padding-left: max(var(--space-6), env(safe-area-inset-left));
      padding-right: max(var(--space-6), env(safe-area-inset-right));
    }
  }
  @media (min-width: 1021px) {
    .main-content {
      padding-left: max(var(--space-8), env(safe-area-inset-left));
      padding-right: max(var(--space-8), env(safe-area-inset-right));
      padding-bottom: max(var(--space-16), env(safe-area-inset-bottom));
    }
  }
}

/* ============================================================
   TIGHTEN · Desktop spacing between sidebar and content
   ============================================================ */

@media (min-width: 1021px) {

  /* 1 · Less left padding right after the sidebar */
  .main-content {
    padding-left: var(--space-5) !important;   /* was --space-8 (44px) → now 24px */
    padding-right: var(--space-5) !important;
    padding-top: var(--space-8) !important;    /* was --space-10 (60px) */
  }

  /* 2 · Make the content column wider so the auto-margins shrink.
         Bump this number up if you want it even closer to the sidebar. */
  .main-content > * {
    max-width: 1320px !important;              /* was 1160px */
  }

  /* 3 · Optional: if you want the content pinned LEFT instead of
         centered (removes ALL auto-margin gap on the left), swap
         rule 2 for this instead: */
  /*
  .main-content > * {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  */
}

/* ============================================================
   SIDEBAR STACKING — NUCLEAR OPTION
   Beats any other stylesheet by using html body + [class].
   ============================================================ */

/* Destroy every stacking-context trigger on .app-layout */
html body > .app-layout,
html body .app-layout,
html body .app-layout[class] {
  position: static !important;
  z-index: auto !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  isolation: auto !important;
  contain: none !important;
  will-change: auto !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  clip-path: none !important;
  mask: none !important;
}

/* Sidebar goes to the absolute top of the stacking order */
html body .sidebar,
html body .sidebar[class],
html body .sidebar.active {
  position: fixed !important;
  z-index: 2147483000 !important;
  pointer-events: auto !important;
}

/* Backdrop sits just above main content, far below sidebar.
   pointer-events only turn on when it's actually meant to show. */
html body .sidebar-backdrop,
html body .sidebar-backdrop[class] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: rgba(60, 42, 15, 0.45) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.24s ease, visibility 0.24s ease !important;
}
html body .sidebar-backdrop.show,
html body .sidebar-backdrop.active,
html body .sidebar-backdrop[style*="display: block"],
html body .sidebar-backdrop[style*="display:block"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Header stays above the backdrop so the hamburger is always tappable */
html body .mobile-header { z-index: 1000 !important; }

/* Desktop: leave the sidebar at normal z-index (no drawer behaviour) */
@media (min-width: 1021px) {
  html body .sidebar { z-index: 100 !important; }
  html body .sidebar-backdrop { display: none !important; }
}

/* ============================================================
   COMPACT DASHBOARD · 2-col cards · tight spacing · equal margins
   ============================================================ */

/* Equal, tight gutter on both sides at every screen size */
.main-content {
  padding-left: 14px !important;
  padding-right: 14px !important;
}
@media (min-width: 769px) {
  .main-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
@media (min-width: 1021px) {
  .main-content {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Kill the red notebook margin line on mobile — it made the
   left look wider than the right */
@media (max-width: 1020px) {
  body::after { display: none !important; }
}

/* Force 2-column grid inside the Teacher Toolkit and any other
   auto-fit grid that was collapsing to 1 column on mobile */
.content-body > div[style*="grid-template-columns"],
.content-body > div[style*="repeat(auto-fit"],
.dashboard-content div[style*="minmax(240px"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

/* Compact the toolkit mini-cards */
.content-body > div[style*="grid-template-columns"] .form-card {
  padding: 12px !important;
  border-radius: 14px !important;
  margin: 0 !important;
}
.content-body > div[style*="grid-template-columns"] .form-card h3 {
  font-size: 0.8125rem !important;
  margin-bottom: 6px !important;
  line-height: 1.2 !important;
}
.content-body > div[style*="grid-template-columns"] .form-card p,
.content-body > div[style*="grid-template-columns"] .form-card div {
  font-size: 0.75rem !important;
}
.content-body > div[style*="grid-template-columns"] .form-card .btn {
  padding: 8px 12px !important;
  font-size: 0.75rem !important;
  min-height: 36px !important;
  width: 100%;
}
.content-body > div[style*="grid-template-columns"] .form-card input,
.content-body > div[style*="grid-template-columns"] .form-card textarea {
  padding: 8px 10px !important;
  font-size: 14px !important;
  min-height: 38px !important;
}
.content-body > div[style*="grid-template-columns"] .form-card textarea {
  min-height: 70px !important;
}

/* At very small phones still keep 2-col — cards get narrower */
@media (max-width: 380px) {
  .content-body > div[style*="grid-template-columns"] {
    gap: 8px !important;
  }
  .content-body > div[style*="grid-template-columns"] .form-card {
    padding: 10px !important;
  }
  .content-body > div[style*="grid-template-columns"] .form-card h3 {
    font-size: 0.75rem !important;
  }
}

/* Tighten the space around every big section on mobile */
@media (max-width: 768px) {
  :root {
    --card-pad: 14px;
    --section-gap: 18px;
    --element-gap: 12px;
  }
  .dashboard-content > * + *,
  #dashboard > * + * {
    margin-top: 18px !important;
  }
  .form-card { padding: 14px !important; }
  .form-card > * + * { margin-top: 12px !important; }
  .content-header { padding: 12px 14px !important; }
  .content-body { padding: 14px !important; }
  .form-group { margin-bottom: 12px !important; }
}

/* Quick stats — a touch tighter on mobile */
@media (max-width: 768px) {
  .quick-stats {
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  .stat-card {
    padding: 10px !important;
    gap: 8px !important;
    min-height: 76px !important;
  }
  .stat-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 1rem !important;
  }
  .stat-number { font-size: 1.15rem !important; }
  .stat-label { font-size: 0.5625rem !important; }
}
/* ============================================================
   DASHBOARD · 2 CARDS PER ROW
   ============================================================ */

/* Both main sections become 2-col grids */
.forms-section,
.content-section {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}

/* Cards flow first, pro-tips are pushed to the bottom */
.forms-section > :not(.pro-tip),
.content-section > :not(.pro-tip) {
  order: 1;
  min-width: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Pro-tips span full width and appear after the cards */
.forms-section > .pro-tip,
.content-section > .pro-tip {
  order: 100;
  grid-column: 1 / -1;
  margin: 0 !important;
}

/* Compact the cards so they fit nicely at half width */
.forms-section .form-card,
.content-section .content-card {
  padding: 14px !important;
}
.forms-section .form-card h2,
.content-section .content-header h2 {
  font-size: 1rem !important;
  margin-bottom: 8px !important;
  white-space: normal !important;
}
.forms-section .form-card > * + *,
.content-section .content-body > * + * {
  margin-top: 10px !important;
}
.forms-section .form-group {
  margin-bottom: 10px !important;
}
.forms-section .form-card input,
.forms-section .form-card textarea,
.forms-section .form-card select {
  padding: 9px 11px !important;
  font-size: 14px !important;
  min-height: 40px !important;
}
.forms-section .form-card textarea {
  min-height: 72px !important;
}
.forms-section .form-card .btn-submit,
.forms-section .form-card .btn-challenge {
  padding: 10px 14px !important;
  font-size: 0.8125rem !important;
  min-height: 40px !important;
  margin-top: 8px !important;
}
.content-section .content-header {
  padding: 12px 14px !important;
}
.content-section .content-body {
  padding: 12px 14px !important;
  max-height: 260px !important;
}

/* Class Code card — shrink the giant code text so it fits half-width */
.forms-section .class-code-display {
  padding: 18px 14px !important;
  margin: 0 !important;
}
.forms-section .class-code-display h2 {
  font-size: 1rem !important;
  margin-bottom: 6px !important;
}
.forms-section .class-code-display .code {
  font-size: 1.5rem !important;
  letter-spacing: 0.15em !important;
  margin: 12px 0 !important;
}
.forms-section .class-code-display .btn {
  padding: 8px 12px !important;
  font-size: 0.75rem !important;
  min-height: 38px !important;
}

/* At tablet/desktop the two sections sit side-by-side as before,
   but still 2-col internally. Slightly roomier padding. */
@media (min-width: 769px) {
  .forms-section,
  .content-section {
    gap: 16px !important;
  }
  .forms-section .form-card,
  .content-section .content-card {
    padding: 16px !important;
  }
  .forms-section .class-code-display .code {
    font-size: 1.75rem !important;
  }
}

/* Ultra-small phones: keep 2-col but tighten further */
@media (max-width: 380px) {
  .forms-section,
  .content-section {
    gap: 10px !important;
  }
  .forms-section .form-card,
  .content-section .content-card {
    padding: 11px !important;
  }
  .forms-section .form-card h2,
  .content-section .content-header h2 {
    font-size: 0.875rem !important;
  }
  .forms-section .class-code-display .code {
    font-size: 1.15rem !important;
    letter-spacing: 0.1em !important;
  }
}

/* ============================================================
   SIDEBAR STACKING — NUCLEAR OPTION
   ============================================================ */

html body > .app-layout,
html body .app-layout,
html body .app-layout[class] {
  position: static !important;
  z-index: auto !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  isolation: auto !important;
  contain: none !important;
  will-change: auto !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  clip-path: none !important;
  mask: none !important;
}

html body .sidebar,
html body .sidebar[class],
html body .sidebar.active {
  position: fixed !important;
  z-index: 2147483000 !important;
  pointer-events: auto !important;
}

html body .sidebar *,
html body .sidebar button,
html body .sidebar a,
html body .sidebar select,
html body .sidebar input,
html body .sidebar .nav-item {
  pointer-events: auto !important;
}

html body .sidebar-backdrop,
html body .sidebar-backdrop[class] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: rgba(60, 42, 15, 0.45) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.24s ease, visibility 0.24s ease !important;
}
html body .sidebar-backdrop.show,
html body .sidebar-backdrop.active,
html body .sidebar-backdrop[style*="display: block"],
html body .sidebar-backdrop[style*="display:block"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body .mobile-header { z-index: 1000 !important; }

@media (min-width: 1021px) {
  html body .sidebar { z-index: 100 !important; }
  html body .sidebar-backdrop { display: none !important; }
}

/* ============================================================
   DASHBOARD RESTRUCTURE
   ============================================================ */

/* ── 1 · Kill the "content management" cards
        (Recent Announcements + Recent Assignments) ── */
.content-section > *:nth-child(3),
.content-section > *:nth-child(4) {
  display: none !important;
}

/* ── 2 · Forms section: Class Code full width,
        then Announcement + Assignment side-by-side ── */
.forms-section {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

/* Class Code stays alone, full row */
.forms-section > .class-code-display {
  grid-column: 1 / -1 !important;
  order: 0;
  margin: 0 !important;
}

/* Announcement + Assignment sit next to each other */
.forms-section > .form-card:not(.class-code-display) {
  grid-column: span 1 !important;
  order: 1;
  margin: 0 !important;
}

/* All pro-tips pushed to the bottom, full-width, small */
.forms-section > .pro-tip,
.content-section > .pro-tip {
  grid-column: 1 / -1 !important;
  order: 10;
  padding: 8px 10px !important;
  font-size: 0.6875rem !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  transform: none !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(60, 42, 15, 0.06) !important;
}
.forms-section > .pro-tip::before,
.forms-section > .pro-tip::after,
.content-section > .pro-tip::before,
.content-section > .pro-tip::after {
  display: none !important;
}
.forms-section > .pro-tip strong,
.content-section > .pro-tip strong {
  font-size: 0.625rem !important;
  margin-bottom: 2px !important;
  letter-spacing: 0.06em !important;
}

/* Compact form cards so both fit comfortably at half-width */
.forms-section > .form-card:not(.class-code-display) {
  padding: 14px !important;
}
.forms-section > .form-card:not(.class-code-display) h2 {
  font-size: 1rem !important;
  margin-bottom: 8px !important;
  white-space: normal !important;
}
.forms-section > .form-card:not(.class-code-display) > * + * {
  margin-top: 10px !important;
}
.forms-section > .form-card:not(.class-code-display) .form-group {
  margin-bottom: 10px !important;
}
.forms-section > .form-card:not(.class-code-display) input,
.forms-section > .form-card:not(.class-code-display) textarea,
.forms-section > .form-card:not(.class-code-display) select {
  padding: 9px 11px !important;
  font-size: 14px !important;
  min-height: 40px !important;
}
.forms-section > .form-card:not(.class-code-display) textarea {
  min-height: 70px !important;
}
.forms-section > .form-card:not(.class-code-display) .btn-submit {
  padding: 10px 14px !important;
  font-size: 0.8125rem !important;
  min-height: 40px !important;
  margin-top: 8px !important;
}

/* ── 3 · Content section: single column (Students, Live Activity) ── */
.content-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* ── 4 · Hide the Analytics nav item ── */
.nav-item[onclick*="'analytics'"] {
  display: none !important;
}

/* ── 5 · Teacher Toolkit: hide heading, scrollable, compact ── */
.content-card:has(button[onclick="renderTeacherToolkit()"]) .content-header h2 {
  display: none !important;
}
.content-card:has(button[onclick="renderTeacherToolkit()"]) .content-header {
  justify-content: flex-end !important;
  padding: 10px 14px !important;
}
.content-card:has(button[onclick="renderTeacherToolkit()"]) .content-body {
  max-height: 400px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 12px !important;
}
.content-card:has(button[onclick="renderTeacherToolkit()"]) .content-body > div {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.content-card:has(button[onclick="renderTeacherToolkit()"]) .content-body .form-card {
  padding: 12px !important;
  border-radius: 12px !important;
}
.content-card:has(button[onclick="renderTeacherToolkit()"]) .content-body .form-card h3 {
  font-size: 0.75rem !important;
  margin-bottom: 6px !important;
  line-height: 1.2 !important;
}
.content-card:has(button[onclick="renderTeacherToolkit()"]) .content-body .form-card .btn {
  padding: 7px 10px !important;
  font-size: 0.6875rem !important;
  min-height: 34px !important;
  width: 100%;
}
.content-card:has(button[onclick="renderTeacherToolkit()"]) .content-body .form-card input,
.content-card:has(button[onclick="renderTeacherToolkit()"]) .content-body .form-card textarea {
  padding: 7px 10px !important;
  font-size: 13px !important;
  min-height: 34px !important;
}
.content-card:has(button[onclick="renderTeacherToolkit()"]) .content-body .form-card textarea {
  min-height: 60px !important;
}

/* ── 6 · Class Pulse widget — make sure it always shows ── */
.pulse-widget {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ── 7 · Ultra-narrow phones: keep 2-col but tighter ── */
@media (max-width: 380px) {
  .forms-section {
    gap: 8px !important;
  }
  .forms-section > .form-card:not(.class-code-display) {
    padding: 10px !important;
  }
  .forms-section > .form-card:not(.class-code-display) h2 {
    font-size: 0.875rem !important;
  }
  .content-card:has(button[onclick="renderTeacherToolkit()"]) .content-body > div {
    gap: 8px !important;
  }
  .content-card:has(button[onclick="renderTeacherToolkit()"]) .content-body .form-card {
    padding: 10px !important;
  }
  .content-card:has(button[onclick="renderTeacherToolkit()"]) .content-body .form-card h3 {
    font-size: 0.6875rem !important;
  }
}

/* ============================================================
   SIDEBAR STACKING — NUCLEAR
   ============================================================ */
html body > .app-layout,
html body .app-layout,
html body .app-layout[class] {
  position: static !important;
  z-index: auto !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  isolation: auto !important;
  contain: none !important;
  will-change: auto !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  clip-path: none !important;
  mask: none !important;
}

html body .sidebar,
html body .sidebar.active {
  position: fixed !important;
  z-index: 2147483000 !important;
  pointer-events: auto !important;
}

html body .sidebar *,
html body .sidebar button,
html body .sidebar a,
html body .sidebar select,
html body .sidebar input,
html body .sidebar .nav-item {
  pointer-events: auto !important;
}

html body .sidebar-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: rgba(60, 42, 15, 0.45) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.24s ease, visibility 0.24s ease !important;
}
html body .sidebar-backdrop.show,
html body .sidebar-backdrop.active,
html body .sidebar-backdrop[style*="display: block"],
html body .sidebar-backdrop[style*="display:block"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html body .mobile-header { z-index: 1000 !important; }

@media (min-width: 1021px) {
  html body .sidebar { z-index: 100 !important; }
  html body .sidebar-backdrop { display: none !important; }
}
/* ============================================================
   DASHBOARD CLEANUP
   ============================================================ */

/* ── 1 · Kill all pro-tips in the forms column
        (🔑 Class Code Management, 📢 Announcement Tips,
         📚 Assignment Best Practices) ── */
.forms-section > .pro-tip {
  display: none !important;
}

/* ── 2 · Content column → 2-col grid ── */
.content-section {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

/* Hide the Recent Announcements + Recent Assignments cards
   (children 3 and 4 in .content-section) */
.content-section > :nth-child(3),
.content-section > :nth-child(4) {
  display: none !important;
}

/* Students card → left column */
.content-section > #studentsCard {
  grid-column: span 1 !important;
  order: 1;
  margin: 0 !important;
}

/* Live Activity card → right column (last child) */
.content-section > .content-card:last-child {
  grid-column: span 1 !important;
  order: 2;
  margin: 0 !important;
}

/* Student Monitoring tip → full-width, small, at the bottom */
.content-section > .pro-tip {
  grid-column: 1 / -1 !important;
  order: 10;
  padding: 8px 10px !important;
  font-size: 0.6875rem !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  transform: none !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(60, 42, 15, 0.06) !important;
}
.content-section > .pro-tip::before,
.content-section > .pro-tip::after { display: none !important; }
.content-section > .pro-tip strong {
  font-size: 0.625rem !important;
  margin-bottom: 2px !important;
  letter-spacing: 0.06em !important;
}

/* ── 3 · Compact the two visible content cards ── */
.content-section > #studentsCard .content-header,
.content-section > .content-card:last-child .content-header {
  padding: 10px 12px !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.content-section > #studentsCard .content-header h2,
.content-section > .content-card:last-child .content-header h2 {
  font-size: 0.9375rem !important;
  white-space: normal !important;
  gap: 6px !important;
}
.content-section > #studentsCard .content-header h2::before,
.content-section > .content-card:last-child .content-header h2::before {
  width: 5px !important;
  height: 5px !important;
}
.content-section > #studentsCard .content-body,
.content-section > .content-card:last-child .content-body {
  padding: 10px 12px !important;
  max-height: 320px !important;
}

/* Students inside the narrow card → single column, compact */
.content-section > #studentsCard #studentsList {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}
.content-section > #studentsCard .student-item {
  padding: 10px !important;
  border-radius: 12px !important;
}
.content-section > #studentsCard .student-info h4 {
  font-size: 0.875rem !important;
  margin-bottom: 2px !important;
}
.content-section > #studentsCard .student-id {
  font-size: 0.625rem !important;
  padding: 2px 6px !important;
}
.content-section > #studentsCard .streak-badge {
  padding: 3px 8px !important;
  font-size: 0.6875rem !important;
}
.content-section > #studentsCard .student-stats {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 5px !important;
}
.content-section > #studentsCard .stat-pill {
  padding: 6px 3px !important;
}
.content-section > #studentsCard .stat-pill-value {
  font-size: 0.75rem !important;
}
.content-section > #studentsCard .stat-pill-label {
  font-size: 0.5rem !important;
  margin-top: 2px !important;
}

/* ── 4 · Remove 📈 Analytics from the sidebar nav ── */
.nav-item[onclick*="'analytics'"],
.nav-item[onclick*='"analytics"'] {
  display: none !important;
}

/* ── 5 · Kill the theme preview overlay ── */
#themePreviewOverlay,
.theme-preview-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── 6 · Ultra-narrow phones ── */
@media (max-width: 480px) {
  .content-section { gap: 8px !important; }
  .content-section > #studentsCard .content-header h2,
  .content-section > .content-card:last-child .content-header h2 {
    font-size: 0.8125rem !important;
  }
}

/* ============================================================
   RESTORE · dashboard header, controls bar, tabs
   ============================================================ */

.dashboard-header,
#dashboardHeader {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
  margin-top: 0 !important;
}

.dashboard-header h1,
#dashboardHeader h1 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  -webkit-text-fill-color: transparent !important;
  background: var(--gradient-flame) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Fallback if the gradient-clip trick fails on some browsers */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .dashboard-header h1,
  #dashboardHeader h1 {
    color: var(--ember) !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
  }
}

.dashboard-subtitle,
#dashboardSubtitle,
.time-greeting {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--text-muted) !important;
}

/* Controls bar + its buttons */
.controls-bar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-wrap: wrap !important;
}

.controls-bar > div:not(.search-bar) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}

@media (min-width: 769px) {
  .controls-bar > div:not(.search-bar) { width: auto !important; }
}

.controls-bar .btn,
.controls-bar .btn-icon {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Dashboard button bar (the "Stats / Content / ..." tabs) */
.dashboard-button-bar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 6px !important;
  gap: 4px !important;
}
.dashboard-button-bar::-webkit-scrollbar { display: none !important; }

.dashboard-section-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   TEACHER TOOLKIT · heading back + tighter top gap
   ============================================================ */

/* Bring back the heading (undo the earlier display:none) */
.content-card:has(button[onclick="renderTeacherToolkit()"]) .content-header h2,
.content-card:has([onclick="renderTeacherToolkit()"]) .content-header h2 {
  display: flex !important;
  font-size: 1.05rem !important;
  white-space: normal !important;
}

.content-card:has(button[onclick="renderTeacherToolkit()"]) .content-header,
.content-card:has([onclick="renderTeacherToolkit()"]) .content-header {
  justify-content: space-between !important;
  padding: 12px 14px !important;
}

/* Reduce the gap between Class Stats (quick-stats) and the Teacher Toolkit card */
.quick-stats {
  margin-bottom: 16px !important;
}

/* Also tighten any margin applied directly to the toolkit card */
.content-card:has(button[onclick="renderTeacherToolkit()"]),
.content-card:has([onclick="renderTeacherToolkit()"]) {
  margin-top: 16px !important;
}

/* If the toolkit is inside #dashboard as a direct child */
#dashboard > .content-card:has([onclick="renderTeacherToolkit()"]) {
  margin-top: 16px !important;
}

/* And in case it's wrapped in another container */
#dashboard > * + .content-card:has([onclick="renderTeacherToolkit()"]) {
  margin-top: 16px !important;
}

/* Small gap between subsequent dashboard cards */
@media (max-width: 768px) {
  #dashboard > * + *,
  .dashboard-content > * + * {
    margin-top: 16px !important;
  }
}

/* ============================================================
   NARROW PHONES · smaller heading + controls
   ============================================================ */
@media (max-width: 480px) {
  .dashboard-header h1 { font-size: 1.35rem !important; }
  .dashboard-subtitle { font-size: 0.85rem !important; }
  .controls-bar .btn,
  .controls-bar .btn-icon {
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
    min-height: 38px !important;
  }
  .dashboard-section-btn {
    padding: 7px 11px !important;
    font-size: 0.75rem !important;
    min-height: 36px !important;
  }
}
/* ============================================================
   DESKTOP · content hugs sidebar · equal left/right gutter
   ============================================================ */

@media (min-width: 1021px) {

  /* Remove auto-centering that pushed content away from the sidebar */
  .main-content {
    margin-left: var(--sidebar-width) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 32px !important;
  }

  /* Content fills the space edge-to-edge instead of being centered */
  .main-content > * {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Tablet: same idea but smaller gutters */
@media (min-width: 769px) and (max-width: 1020px) {
  .main-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .main-content > * {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================================
   CONTENT SIZING · hug sidebar · capped width · equal gutters
   ============================================================ */

@media (min-width: 1021px) {
  .main-content {
    margin-left: var(--sidebar-width) !important;
    padding: 32px !important;
  }
  .main-content > * {
    max-width: 1280px !important;   /* ← bump to 1400px if you want it wider */
    width: 100% !important;
    margin-left: auto !important;   /* centers within the padded area */
    margin-right: auto !important;  /* so left and right gutters are equal */
  }
}

@media (min-width: 769px) and (max-width: 1020px) {
  .main-content {
    padding: 20px !important;
  }
  .main-content > * {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================================
   FORCE-VISIBLE · header, controls bar, tab bar
   ============================================================ */

#dashboardHeader,
.dashboard-header {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  transform: none !important;
}

#dashboardHeader > *,
.dashboard-header > * {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#dashboardHeader h1,
.dashboard-header h1 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--ember) !important;
  -webkit-text-fill-color: var(--ember) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

#dashboardSubtitle,
.dashboard-subtitle,
.time-greeting {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--text-muted) !important;
}

.controls-bar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  clip-path: none !important;
  transform: none !important;
  flex-wrap: wrap !important;
}

.controls-bar > * {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.controls-bar .btn,
.controls-bar .btn-icon,
.controls-bar button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Bring back the tab bar even on mobile */
.dashboard-button-bar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  clip-path: none !important;
  transform: none !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

.dashboard-section-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
}

/* Neutralize any prior "hide on mobile" rules */
@media (max-width: 768px) {
  .controls-bar,
  .dashboard-header,
  #dashboardHeader,
  .dashboard-button-bar {
    display: flex !important;
  }
  .dashboard-header,
  #dashboardHeader {
    display: block !important;
  }
}

/* ============================================================
   FORCE-VISIBLE CHROME · header · controls · tabs
   Resets every property that can hide text
   ============================================================ */

#dashboardHeader,
.dashboard-header,
.controls-bar,
.dashboard-button-bar,
#dashboardHeader h1,
.dashboard-header h1,
.dashboard-subtitle,
.time-greeting,
.controls-bar .btn,
.controls-bar .btn-icon,
.dashboard-section-btn {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  transform: none !important;
  /* Kill the transparent-text gradient trick */
  -webkit-text-fill-color: currentColor !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  background-image: none !important;
  -webkit-text-stroke: 0 !important;
}

/* Give text + buttons a solid, visible color */
#dashboardHeader h1,
.dashboard-header h1 {
  color: var(--ember) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

.dashboard-subtitle,
.time-greeting {
  color: var(--text-muted) !important;
  background: none !important;
}

.controls-bar .btn,
.controls-bar .btn-icon,
.dashboard-section-btn {
  color: var(--text) !important;
  background-color: var(--card) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
}

.controls-bar .btn-primary,
.controls-bar .btn-primary:hover {
  background: var(--gradient-flame) !important;
  background-color: var(--ember) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.dashboard-section-btn.active {
  background: var(--gradient-flame) !important;
  background-color: var(--ember) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Search input */
.controls-bar .search-bar input,
.controls-bar input[type="text"] {
  color: var(--text) !important;
  background-color: var(--ink-2) !important;
}
.controls-bar .search-bar input::placeholder {
  color: var(--text-faint) !important;
  opacity: 1 !important;
}

/* ============================================================
   CENTER CONTENT IN MAIN COLUMN
   ============================================================ */

/* Desktop: main content sits to the right of the sidebar.
   Center its children instead of pinning them left. */
@media (min-width: 1021px) {
  .main-content {
    margin-left: var(--sidebar-width) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 32px !important;
    padding-bottom: 64px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .main-content > * {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
  }

  /* Inner grids and cards should fill the centered column */
  .main-content > .dashboard-grid,
  .main-content > #dashboard,
  .main-content > #memoryWall,
  .main-content > #addMemoryPage,
  .main-content > #announcements,
  .main-content > #assignments,
  .main-content > #resources,
  .main-content > #polls,
  .main-content > #students,
  .main-content > #analytics,
  .main-content > #presentation,
  .main-content > #checkins,
  .main-content > #exitTickets,
  .main-content > #challenges,
  .main-content > #create-challenge,
  .main-content > #settings {
    max-width: 1280px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* Tablet: same idea, smaller gutters */
@media (min-width: 769px) and (max-width: 1020px) {
  .main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .main-content > * {
    width: 100% !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }
}

/* Mobile: full-width, no centering needed */
@media (max-width: 768px) {
  .main-content > * {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================================
   WIDER SIDEBAR · CONTENT FILLS REMAINING SPACE EVENLY
   ============================================================ */

/* 1 · Widen the sidebar everywhere it's referenced */
:root {
  --sidebar-width: 340px !important;
}

/* 2 · Desktop layout */
@media (min-width: 1021px) {

  .sidebar {
    width: 340px !important;
    max-width: 340px !important;
  }

  .main-content {
    margin-left: 340px !important;
    padding: 32px 40px 64px 40px !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Every top-level section fills the space, no max-width cap,
     so the left and right padding are the ONLY gap on each side. */
  .main-content > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Kill the leftover max-width caps on section wrappers */
  .main-content > .dashboard-grid,
  .main-content > #dashboard,
  .main-content > #memoryWall,
  .main-content > #addMemoryPage,
  .main-content > #announcements,
  .main-content > #assignments,
  .main-content > #resources,
  .main-content > #polls,
  .main-content > #students,
  .main-content > #analytics,
  .main-content > #presentation,
  .main-content > #checkins,
  .main-content > #exitTickets,
  .main-content > #challenges,
  .main-content > #create-challenge,
  .main-content > #settings {
    max-width: 100% !important;
  }
}

/* 3 · Tablet — 280px sidebar, content fills the rest */
@media (min-width: 769px) and (max-width: 1020px) {
  .main-content {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .main-content > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* 4 · Mobile — sidebar is a drawer, content full-width */
@media (max-width: 768px) {
  .sidebar { width: 88% !important; max-width: 340px !important; }
  .main-content {
    margin-left: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}
/* Presentation mode · final */
body.presentation-mode .sidebar,
body.presentation-mode .mobile-header,
body.presentation-mode .sidebar-toggle,
body.presentation-mode .sidebar-backdrop,
body.presentation-mode #tmHeaderFinal,
body.presentation-mode .footer,
body.presentation-mode .feedback-btn { display: none !important; }

body.presentation-mode .main-content {
  margin: 0 !important;
  padding: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.presentation-mode #presentation {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.presentation-mode .presentation-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

@media (max-width: 1020px) {
  body.presentation-mode .presentation-grid { grid-template-columns: 1fr !important; }
  body.presentation-mode .pres-span-3,
  body.presentation-mode .pres-span-4,
  body.presentation-mode .pres-span-6,
  body.presentation-mode .pres-span-8,
  body.presentation-mode .pres-span-12 { grid-column: span 1 !important; }
}

/* Presentation mode · final */
body.presentation-mode .sidebar,
body.presentation-mode .mobile-header,
body.presentation-mode .sidebar-toggle,
body.presentation-mode .sidebar-backdrop,
body.presentation-mode #tmHeaderFinal,
body.presentation-mode .footer,
body.presentation-mode .feedback-btn { display: none !important; }

body.presentation-mode #presentation {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  grid-column: span 12 !important;
}