/* ═══════════════════════════════════════════════
       RESET
    ═══════════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    button { font-family: inherit; cursor: pointer; }

    /* ═══════════════════════════════════════════════
       THEME TOKENS — THE MURK (dark default)
    ═══════════════════════════════════════════════ */
    :root {
      --bg:         #2e3830;
      --bg-nav:     #1d2420;
      --bg-side:    #252e28;
      --bg-surface: #323e35;
      --bg-raised:  #3c4840;
      --bg-inset:   #222c26;

      --text:   #dcd8cc;
      --text-2: #8a9a8c;
      --text-3: #556055;

      --accent:   #e06272;
      --accent-d: rgba(224,98,114,.18);
      --accent-g: rgba(224,98,114,.32);
      --teal:     #5ba090;
      --teal-d:   rgba(91,160,144,.18);

      --bdr:    rgba(255,255,255,.07);
      --bdr-md: rgba(255,255,255,.13);

      --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0;
      --fs: 1;
      --ff-ui:   'Space Grotesk', sans-serif;
      --ff-head: 'Syne', sans-serif;
      --ff-body: 'Lora', serif;

      /* Hand-drawn sketch border */
      --sketch-stroke: var(--text);
      --sketch-width:  2px;

      /* Elevation drop shadow (soft gradient blur, not dots) */
      --sketch-shadow:         5px 7px 12px rgba(0,0,0,.4), 2px 3px 5px rgba(0,0,0,.25);
      --sketch-shadow-pressed: inset 2px 2px 6px rgba(0,0,0,.4);
    }

    /* ═══════════════════════════════════════════════
       THEME TOKENS — WIKI PREMIUM (light)
    ═══════════════════════════════════════════════ */
    [data-theme="light"] {
      --bg:         #ece8e0;
      --bg-nav:     #dedad2;
      --bg-side:    #e5e1d9;
      --bg-surface: #f0ece4;
      --bg-raised:  #f7f3eb;
      --bg-inset:   #dcd8d0;

      --text:   #27231c;
      --text-2: #575350;
      --text-3: #888480;

      --bdr:    rgba(0,0,0,.07);
      --bdr-md: rgba(0,0,0,.13);

      --sh-up:   5px 5px 15px rgba(0,0,0,.12), -3px -3px 8px rgba(255,255,255,.76);
      --sh-up-s: 3px 3px 8px rgba(0,0,0,.09),  -2px -2px 5px rgba(255,255,255,.72);
      --sh-in:   inset 3px 3px 9px rgba(0,0,0,.1),  inset -2px -2px 5px rgba(255,255,255,.66);
      --sh-in-s: inset 2px 2px 5px rgba(0,0,0,.08), inset -1px -1px 3px rgba(255,255,255,.62);
      --sh-fl:   0 14px 36px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.07);

      --sketch-shadow:         5px 7px 12px rgba(0,0,0,.18), 2px 3px 5px rgba(0,0,0,.1);
      --sketch-shadow-pressed: inset 2px 2px 6px rgba(0,0,0,.15);
    }

    /* View-transition ripple shell */
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
    ::view-transition-new(root) { z-index: 9999; }

    /* Fallback CSS transition */
    html.transitioning *, html.transitioning *::before, html.transitioning *::after {
      transition: background-color .45s ease, color .35s ease,
                  box-shadow .45s ease, border-color .35s ease !important;
    }

    /* ═══════════════════════════════════════════════
       BASE
    ═══════════════════════════════════════════════ */
    html, body, #root { height: 100%; overflow: hidden; }
    body {
      font-family: var(--ff-ui);
      background: var(--bg);
      color: var(--text);
      font-size: calc(14px * var(--fs));
      -webkit-font-smoothing: antialiased;
    }

    /* ═══════════════════════════════════════════════
       THREE-COLUMN LAYOUT
    ═══════════════════════════════════════════════ */
    .layout { display: flex; height: 100vh; width: 100vw; overflow: hidden; }

    /* Col 1 — Nav Island */
    .nav-island {
      width: 56px; min-width: 56px;
      background: var(--bg-nav);
      display: flex; flex-direction: column; align-items: center;
      padding: 14px 0; gap: 4px;
      border-right: 1px solid var(--bdr);
            z-index: 10;
    }
    .nav-logo {
      width: 34px; height: 34px;
      background: var(--accent);
      border-radius: var(--r-md);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 10px;
      color: #fff;
      font-family: var(--ff-head);
      font-weight: 800; font-size: 13px; letter-spacing: -.5px;
    }
    .nav-btn {
      width: 38px; height: 38px;
      border-radius: var(--r-sm);
      display: flex; align-items: center; justify-content: center;
      color: var(--text-3);
      border: none; background: transparent;
      position: relative; transition: all .18s ease;
    }
    .nav-btn:hover { background: var(--bg-surface); color: var(--text); }
    .nav-btn.active { background: var(--bg-surface); color: var(--accent); }
    .nav-btn.active::before {
      content: ''; position: absolute;
      left: -1px; top: 50%; transform: translateY(-50%);
      width: 3px; height: 20px;
      background: var(--accent); border-radius: 0;
          }
    .nav-spacer { flex: 1; }

    /* Col 2 — Sidebar */
    .sidebar {
      width: 240px; min-width: 240px;
      background: var(--bg-side);
      display: flex; flex-direction: column;
      border-right: 1px solid var(--bdr);
      overflow: hidden;
      transition: width .2s ease, min-width .2s ease;
    }
    .sidebar.sidebar-collapsed {
      width: 40px; min-width: 40px;
    }
    .sidebar-profile {
      padding: 16px 14px 12px;
      border-bottom: 1px solid var(--bdr);
      display: flex; align-items: center; gap: 10px;
      flex-shrink: 0;
    }
    .avatar {
      width: 32px; height: 32px; border-radius: 0;
      background: var(--bg-raised);
            display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; color: var(--accent);
      font-family: var(--ff-head); flex-shrink: 0;
    }
    .profile-name { font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--text); line-height: 1.2; }
    .profile-role { font-size: calc(11px * var(--fs)); color: var(--text-3); }
    .sidebar-search {
display: flex; align-items: center; gap: 6px;
      background: var(--bg-inset); border-radius: var(--r-sm);
      padding: 6px 10px;
      border: 1px solid var(--bdr);
    }
    .sidebar-search input {
      flex: 1; border: none; background: transparent;
      color: var(--text); font-family: var(--ff-ui);
      font-size: calc(12px * var(--fs)); outline: none;
    }
    .sidebar-search input::placeholder { color: var(--text-3); }
    .sidebar-scroll { flex: 1; overflow-y: auto; padding: 8px 10px; }
    .sidebar-scroll::-webkit-scrollbar { width: 3px; }
    .sidebar-scroll::-webkit-scrollbar-thumb { background: var(--bdr-md); border-radius: 0; }
    .sidebar-section { margin-bottom: 14px; }
    .sidebar-section-label {
      font-size: calc(10px * var(--fs)); font-weight: 600;
      letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
      padding: 0 6px 6px;
    }
    .sidebar-item {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 8px; border-radius: var(--r-sm);
      color: var(--text-2); font-size: calc(13px * var(--fs));
      border: none; background: transparent; width: 100%; text-align: left;
      transition: all .15s ease;
    }
    .sidebar-item:hover { background: var(--bg-surface); color: var(--text); }
    .sidebar-item.active { background: var(--bg-surface); color: var(--text); }
    .sidebar-badge {
      margin-left: auto; background: var(--bg-raised); color: var(--text-3);
      font-size: 10px; padding: 1px 6px; border-radius: 0;     }
    .sidebar-badge.accent { background: var(--accent-d); color: var(--accent); }

    /* Col 3 — Workspace */
    .workspace { flex: 1; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
    .workspace-header {
      padding: 13px 22px; border-bottom: 1px solid var(--bdr);
      display: flex; align-items: center; gap: 12px;
      flex-shrink: 0; background: var(--bg);
    }
    .workspace-title { font-family: var(--ff-head); font-size: calc(18px * var(--fs)); font-weight: 700; color: var(--text); }
    .workspace-body { flex: 1; overflow: hidden; padding: 0; display: flex; flex-direction: column; }
    .workspace-body::-webkit-scrollbar { width: 4px; }
    .workspace-body::-webkit-scrollbar-thumb { background: var(--bdr-md); border-radius: 0; }

    /* Thin scrollbars for all overflow-auto containers */
    *::-webkit-scrollbar { width: 3px; height: 3px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb { background: var(--bdr-md); border-radius: 0; }
    * { scrollbar-width: thin; scrollbar-color: var(--bdr-md) transparent; }

    /* Custom scrollbar styling — red accent */
    .chat-messages-scroll {
      scrollbar-width: 12px;
      scrollbar-color: #e06272 #f5f5f5;
    }
    .chat-messages-scroll::-webkit-scrollbar {
      width: 12px !important;
    }
    .chat-messages-scroll::-webkit-scrollbar-track {
      background: #f5f5f5 !important;
    }
    .chat-messages-scroll::-webkit-scrollbar-thumb {
      background: #e06272 !important;
      border-radius: 0 !important;
    }
    .chat-messages-scroll::-webkit-scrollbar-thumb:hover {
      background: #d04858 !important;
    }

    /* ═══════════════════════════════════════════════
       SKETCH ENGINE — hand-drawn squiggle borders + soft elevation shadow
       Pure CSS, no JS scanning/injection: the squiggle is an SVG
       turbulence+displacement filter (data URI, self-contained — no
       shared <svg><defs> needed in the DOM) applied to a ::before
       border layer, animated across two noise seeds with steps(1) for
       a subtle "boil". The shadow is a plain box-shadow gradient blur
       (matches the reference kit's "Elevation Levels" swatches) rather
       than a dot-matrix pattern — much simpler and doesn't fight with
       each component's own background color at all.

       .sketch-box is a generic opt-in for ad-hoc inline-styled boxes
       that don't use a shared component class — this codebase has no
       central design system, so many cards/panels are hand-rolled
       per-file with inline style={{...}}. Add className="sketch-box"
       to bring any such box into the treatment without touching its
       existing inline styles (border-color: transparent !important
       wins over an inline border).
    ═══════════════════════════════════════════════ */
    :is(
      .btn-primary, .btn-secondary, .btn-dec,
      .neu-card, .neu-card-inset, .stat-card,
      .tag, .mode-pill, .theme-toggle,
      .lesson-entry, .lesson-date,
      .ledger-table td,
      .calendar-day:not(.empty), .cal-day,
      .ann-tooltip, .ann-marker,
      .toggle-track,
      .mobile-nav-tab, .sidebar-search,
      .sketch-box
    ) {
      position: relative;
      border-color: transparent !important;
      box-shadow: var(--sketch-shadow);
    }
    :is(
      .btn-primary, .btn-secondary, .btn-dec,
      .neu-card, .neu-card-inset, .stat-card,
      .tag, .mode-pill, .theme-toggle,
      .lesson-entry, .lesson-date,
      .ledger-table td,
      .calendar-day:not(.empty), .cal-day,
      .ann-tooltip, .ann-marker,
      .toggle-track,
      .mobile-nav-tab, .sidebar-search,
      .sketch-box
    ):hover {
      filter: brightness(0.9);
    }
    :is(
      .btn-primary, .btn-secondary, .btn-dec,
      .neu-card, .neu-card-inset, .stat-card,
      .tag, .mode-pill, .theme-toggle,
      .lesson-entry, .lesson-date,
      .ledger-table td,
      .calendar-day:not(.empty), .cal-day,
      .ann-tooltip, .ann-marker,
      .toggle-track,
      .mobile-nav-tab, .sidebar-search,
      .sketch-box
    ):is(:active, .sketch-pressed) {
      box-shadow: var(--sketch-shadow-pressed);
      filter: brightness(0.85);
    }
    :is(
      .btn-primary, .btn-secondary, .btn-dec,
      .neu-card, .neu-card-inset, .stat-card,
      .tag, .mode-pill, .theme-toggle,
      .lesson-entry, .lesson-date,
      .ledger-table td,
      .calendar-day:not(.empty), .cal-day,
      .ann-tooltip, .ann-marker,
      .toggle-track,
      .mobile-nav-tab, .sidebar-search,
      .sketch-box
    )::before {
      content: '';
      position: absolute; inset: 0;
      border: var(--sketch-width) solid var(--sketch-stroke);
      pointer-events: none;
      animation: sketch-boil 0.9s steps(1) infinite;
    }
    @keyframes sketch-boil {
      /* Low baseFrequency = long, smooth wavelength. A frequency too high
         relative to the border's own thickness makes nearby points on the
         line get displaced in wildly different directions, which visually
         tears a continuous line into what looks like a dotted/dashed one —
         that's what a too-high baseFrequency (0.03) produced earlier. */
      0%, 100% {
        filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='sq'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' seed='4' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.5'/%3E%3C/filter%3E%3C/svg%3E#sq");
      }
      50% {
        filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='sq'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' seed='15' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.5'/%3E%3C/filter%3E%3C/svg%3E#sq");
      }
    }

    /* ═══════════════════════════════════════════════
       AI-GENERATED / TEACHER-AUTHORED LESSON HTML — GLASSMORPHISM
       Lesson CONTENT is styled to match the site's OWN interactive pages
       (VoiceTube, Reading Fluency, Reading News Reader — see
       MD_Files/POPOVER_DESIGN_SPECIFICATION.md), deliberately NOT the
       dashboard's own look — explicit direction: the lesson a student opens
       should look like the site's content, not like dashboard chrome. Colors
       and font below are taken directly from the real pages' CSS
       (standalone-projects/voicetube-replica/style.css — light theme values;
       standalone-projects/reading-news-reader/style.css — dark gradient),
       not approximated from the spec doc alone. The dashboard's OWN [data-
       theme] toggle still drives which of the two branches below applies —
       reusing that toggle rather than building a second one.

       Shared by every dangerouslySetInnerHTML render of this content shape:
       the Library viewer (lms-resources.jsx), the live-class editor
       (lms-live-class.jsx), the student's past-class review overlay
       (lms-student-workspace.jsx), and the calendar's class-review popover
       (calendar-component.jsx).

       RETROACTIVITY: lessons already saved in Firestore have their HTML
       frozen as a string with the OLD dashboard-var inline styles baked in
       (background:var(--bg-inset) etc). Inline styles beat class rules, so
       every property below that needs to win over old inline content uses
       !important. Two consequences:
       - mmMcqPick (lms-utils.jsx) must ALSO use style.setProperty(...,
         'important') for its correct/incorrect colors, or its own inline
         update would lose to these !important rules and the click-to-reveal
         feedback would go invisible.
       - The shimmer glow (.shimmer-shimmer/.shimmer-text spans) can't be
         retrofitted onto old saved buttons — CSS can't add markup that isn't
         there. Old buttons still get the correct glass colors (targeted by
         the bare [data-correct] attribute, no class needed) but not the
         hover glow; only newly-generated lessons carry the extra spans.
    ═══════════════════════════════════════════════ */
    .ai-lesson-content {
      --lesson-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --lesson-accent: #4a90e2;
      /* Dark is the default branch (matches reading-news-reader's navy gradient + white text) */
      --lesson-bg-from: #0a0e1a;
      --lesson-bg-to: #0d1b2a;
      --lesson-text: #ffffff;
      --lesson-text-2: #cbd5e1;
      --lesson-card-bg: rgba(255,255,255,0.1);
      --lesson-card-border: rgba(255,255,255,0.2);
      --lesson-border: rgba(255,255,255,0.15);
      font-family: var(--lesson-font);
      background: linear-gradient(135deg, var(--lesson-bg-from) 0%, var(--lesson-bg-to) 100%);
      color: var(--lesson-text);
    }
    /* Light branch — values copied 1:1 from voicetube-replica's body.vt-replica-theme-light */
    [data-theme="light"] .ai-lesson-content {
      --lesson-bg-from: #eef1f6;
      --lesson-bg-to: #e4e9f2;
      --lesson-text: #2c3e50;
      --lesson-text-2: #4a5568;
      --lesson-card-bg: rgba(255,255,255,0.75);
      --lesson-card-border: rgba(0,0,0,0.08);
      --lesson-border: rgba(0,0,0,0.08);
    }

    .ai-lesson-content h1 { color: var(--lesson-text); }
    .ai-lesson-content h2 { color: var(--lesson-accent) !important; }
    .ai-lesson-content h3 { color: var(--lesson-text); }
    .ai-lesson-content p, .ai-lesson-content li, .ai-lesson-content td, .ai-lesson-content th { color: var(--lesson-text-2); }
    .ai-lesson-content strong, .ai-lesson-content b { color: var(--lesson-text); }
    .ai-lesson-content a { color: var(--lesson-accent); }
    .ai-lesson-content a:hover { filter: brightness(1.2); }
    .ai-lesson-content hr { border: none; border-top: 1px solid var(--lesson-border); margin: 24px 0; }
    .ai-lesson-content img { max-width: 100%; height: auto; display: block; border-radius: 0.75rem; }
    .ai-lesson-content table { border-color: var(--lesson-border) !important; }
    .ai-lesson-content td, .ai-lesson-content th { border-color: var(--lesson-border) !important; }

    /* Glass card — the "Presentation" box. [style*="bg-inset"] catches lessons saved under the
       PREVIOUS prompt version (background:var(--bg-inset) inline, no class) retroactively; new
       lessons carry class="ai-lesson-box" directly (see api/generate-lesson.js). */
    .ai-lesson-content .ai-lesson-box,
    .ai-lesson-content div[style*="bg-inset"] {
      background: var(--lesson-card-bg) !important;
      border: 1px solid var(--lesson-card-border) !important;
      border-radius: 1rem !important;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.12);
    }
    /* Homework box's own emphasis (was an inline accent border, now a modifier class since the
       rule above forces border-color — inline can no longer win against an !important class). */
    .ai-lesson-content .ai-lesson-box-accent {
      border-color: var(--lesson-accent) !important;
    }

    /* Text-based answer widget — retroactive via bare tag selector, no class needed. */
    .ai-lesson-content textarea {
      background: var(--lesson-card-bg) !important;
      border: 1px solid var(--lesson-card-border) !important;
      border-radius: 0.66em !important;
      color: var(--lesson-text) !important;
      font-family: var(--lesson-font) !important;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
    }
    .ai-lesson-content textarea::placeholder { color: var(--lesson-text-2); opacity: .8; }

    /* MCQ options — retroactive via the [data-correct] attribute every version has always had,
       no class required. New lessons ADDITIONALLY carry class="shimmer-button" (below) for the
       hover glow, layered on top of these same base colors. */
    .ai-lesson-content button[data-correct] {
      background: var(--lesson-card-bg) !important;
      border: 1px solid var(--lesson-card-border) !important;
      border-radius: 0.66em !important;
      color: var(--lesson-text) !important;
      font-family: var(--lesson-font) !important;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
    }

    /* ── Shimmer button system — ported from MD_Files/POPOVER_DESIGN_SPECIFICATION.md ──
       Simplified from the spec in one place: .shimmer-text uses color:inherit instead of a
       gradient background-clip. The spec's version hardcodes white text for permanent marketing
       buttons; these MCQ buttons need mmMcqPick to recolor them green/red on click, and a
       background-clip gradient can't be overridden by a simple color change afterward. Dropping
       the clip trick means the glow overlay (the effect's main visual signature) still works,
       and mmMcqPick's color updates stay simple and reliable. */
    @property --shimmer-shimmer {
      syntax: "<angle>";
      inherits: false;
      initial-value: 33deg;
    }
    @keyframes shimmer-shimmer { 0% { --shimmer-shimmer: 0deg; } 100% { --shimmer-shimmer: 360deg; } }
    @keyframes shimmer-shine { 0% { opacity: 0; } 15% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } }

    .shimmer-button {
      --inset: 24px;
      --shimmer-glow-hue: 213deg;
      position: relative;
      isolation: isolate;
      text-align: left;
      cursor: pointer;
      transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .shimmer-button:hover:not(:disabled) {
      border-color: var(--lesson-accent) !important;
    }
    .shimmer-text { color: inherit; }

    .shimmer-shimmer {
      position: absolute;
      inset: calc(var(--inset) * -1);
      border-radius: inherit;
      pointer-events: none;
      mask-image: conic-gradient(
        from var(--shimmer-shimmer, 0deg),
        transparent 0%, transparent 20%, black 36%, black 45%,
        transparent 50%, transparent 70%, black 85%, black 95%, transparent 100%
      );
      mask-size: cover;
      mix-blend-mode: plus-lighter;
      animation: shimmer-shimmer 1s linear infinite both;
    }
    .shimmer-button:hover:not(:disabled) .shimmer-shimmer::before,
    .shimmer-button:hover:not(:disabled) .shimmer-shimmer::after {
      opacity: 1;
      animation: shimmer-shine 1.2s ease-in 1 forwards;
    }
    .shimmer-shimmer::before, .shimmer-shimmer::after {
      transition: all .5s ease; opacity: 0; content: ''; border-radius: inherit;
      position: absolute; mix-blend-mode: color; inset: var(--inset); pointer-events: none;
    }
    .shimmer-shimmer::before {
      box-shadow:
        0 0 calc(var(--inset) * .1) 2px hsl(var(--shimmer-glow-hue) 20% 95%),
        0 0 calc(var(--inset) * .18) 4px hsl(var(--shimmer-glow-hue) 20% 80%),
        0 0 calc(var(--inset) * .33) 4px hsl(var(--shimmer-glow-hue) 50% 70%),
        0 0 calc(var(--inset) * .66) 5px hsl(var(--shimmer-glow-hue) 100% 70%);
      z-index: -1;
    }
    .shimmer-shimmer::after {
      box-shadow:
        inset 0 0 0 1px hsl(var(--shimmer-glow-hue) 70% 95%),
        inset 0 0 2px 1px hsl(var(--shimmer-glow-hue) 100% 80%),
        inset 0 0 5px 2px hsl(var(--shimmer-glow-hue) 100% 70%);
      z-index: 2;
    }
    @supports not (background: paint(worklet)) {
      .shimmer-shimmer { display: none; }
    }

    /* ── Lesson tabs (Reading / Vocabulary / Quiz / Discussion) — see api/generate-lesson.js's
       SYSTEM_PROMPT (TAB_SNIPPET) for the exact markup the AI reproduces. Only ever emitted by
       newly-generated lessons; older flat (non-tabbed) saved lessons simply never contain these
       classes, so this is purely additive and can't break anything already saved. */
    .ai-lesson-content .ai-lesson-tabs {
      display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
      padding-bottom: 12px; border-bottom: 1px solid var(--lesson-border);
    }
    .ai-lesson-content .ai-lesson-tab {
      padding: 8px 16px; border-radius: 0.66em;
      background: var(--lesson-card-bg); border: 1px solid var(--lesson-card-border);
      color: var(--lesson-text-2); font-family: var(--lesson-font); font-weight: 600;
      font-size: 0.9rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    .ai-lesson-content .ai-lesson-tab.active {
      background: var(--lesson-accent); border-color: var(--lesson-accent); color: #fff;
    }
    .ai-lesson-content .ai-lesson-panel { display: none; }
    .ai-lesson-content .ai-lesson-panel.active { display: block; animation: ai-panel-in .35s ease; }
    @keyframes ai-panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

    /* ── Reading tab — <type-writer> (lms-type-writer.js) + playback/challenge controls */
    .ai-lesson-content type-writer { display: block; line-height: inherit; }
    .ai-lesson-content .ai-reading-controls {
      display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
    }
    .ai-lesson-content .ai-reading-controls .shimmer-button {
      padding: 7px 14px; border-radius: 0.66em; font-size: 0.82rem; font-weight: 600;
      background: var(--lesson-card-bg); border: 1px solid var(--lesson-card-border);
      color: var(--lesson-text-2); font-family: var(--lesson-font);
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    }
    .ai-lesson-content .ai-reading-body {
      transition: filter .4s ease, opacity .4s ease;
    }
    .ai-lesson-content .ai-reading-body.ai-reading-hidden {
      filter: blur(9px); opacity: .5; user-select: none; pointer-events: none;
    }

    /* ── Vocabulary tab — click-to-reveal cards (window.mmCardFlip) */
    .ai-lesson-content .ai-vocab-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
    }
    .ai-lesson-content .ai-vocab-card { cursor: pointer; padding: 16px 18px !important; }
    .ai-lesson-content .ai-vocab-card .ai-vocab-back { display: none; }
    .ai-lesson-content .ai-vocab-card.flipped .ai-vocab-front { display: none; }
    .ai-lesson-content .ai-vocab-card.flipped .ai-vocab-back { display: block; }
    .ai-lesson-content .ai-vocab-word { font-weight: 700; color: var(--lesson-text); font-size: 1.05rem; }
    .ai-lesson-content .ai-vocab-pos { font-weight: 400; font-style: italic; color: var(--lesson-text-2); font-size: 0.85rem; }
    .ai-lesson-content .ai-vocab-hint { margin-top: 8px; font-size: 0.78rem; color: var(--lesson-text-2); opacity: .75; }
    .ai-lesson-content .ai-vocab-def { color: var(--lesson-text-2); }

    /* ═══════════════════════════════════════════════
       COMPONENTS
    ═══════════════════════════════════════════════ */
    .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: calc(11px * var(--fs)); color: var(--text-3); }
    .breadcrumb-sep { opacity: .5; }

    /* Mode pill */
    .mode-pill {
display: flex; background: var(--bg-inset);
      border-radius: 0;
      padding: 3px; gap: 2px;
      border: 1px solid var(--bdr);
    }
    .mode-pill button {
      border: none; background: transparent; color: var(--text-3);
      font-family: var(--ff-ui); font-size: calc(12px * var(--fs));
      font-weight: 500; padding: 5px 14px;
      border-radius: 0; transition: all .2s;
    }
    .mode-pill button.active { background: var(--bg-raised); color: var(--text); }

    /* Theme toggle */
    .theme-toggle {
display: flex; align-items: center; gap: 8px;
      padding: 6px 12px; border-radius: var(--r-md);
      background: var(--bg-raised);       border: 1px solid var(--bdr); color: var(--text-2);
      font-size: calc(12px * var(--fs)); font-weight: 500;
      transition: all .2s; white-space: nowrap;
    }
    .theme-toggle:hover { color: var(--text); }
    .toggle-track {
width: 36px; height: 20px; background: var(--bg-inset);
      border-radius: 0;       position: relative;
    }
    .toggle-thumb {
      width: 14px; height: 14px; background: var(--accent);
      border-radius: 0; position: absolute; top: 3px; left: 3px;
            transition: transform .28s cubic-bezier(.34,1.56,.64,1);
    }
    .toggle-thumb.lit { transform: translateX(16px); }

    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
      50% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
    }

    /* Cards */
    .neu-card {
background: var(--bg-surface); border-radius: var(--r-lg);
      border: 1px solid var(--bdr); padding: 20px;
    }
    .neu-card-inset {
background: var(--bg-inset); border-radius: var(--r-md);
       border: 1px solid var(--bdr); padding: 16px;
    }

    /* Stats */
    .stats-row { display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
    .stat-card {
flex: 1; min-width: 130px;
      background: var(--bg-surface); border-radius: var(--r-lg);
      border: 1px solid var(--bdr); padding: 16px 20px;
    }
    .stat-label { font-size: calc(10px * var(--fs)); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin-bottom: 8px; }
    .stat-value { font-family: var(--ff-head); font-size: calc(28px * var(--fs)); font-weight: 700; color: var(--text); line-height: 1; }
    .stat-delta { font-size: calc(11px * var(--fs)); color: var(--teal); margin-top: 4px; }

    /* Buttons */
    .btn-primary {
background: var(--accent); color: #fff; border: none;
      border-radius: var(--r-sm); padding: 8px 18px;
      font-family: var(--ff-ui); font-size: calc(13px * var(--fs)); font-weight: 500;
      transition: all .2s; display: inline-flex; align-items: center; gap: 6px;
    }
    .btn-primary:hover { transform: translateY(-1px); }
    .btn-secondary {
background: var(--bg-raised); color: var(--text-2);
      border: 1px solid var(--bdr-md); border-radius: var(--r-sm);
      padding: 8px 18px; font-family: var(--ff-ui);
      font-size: calc(13px * var(--fs)); font-weight: 500;
      transition: all .2s;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .btn-secondary:hover { color: var(--text); }
    .btn-dec {
      background: transparent; border: 1px solid var(--bdr-md); border-radius: var(--r-sm);
      color: var(--text-3); padding: 4px 10px; font-size: calc(11px * var(--fs));
      font-family: var(--ff-ui); transition: all .2s;
    }
    .btn-dec:hover { border-color: var(--accent); color: var(--accent); }

    /* Section headers */
    .section-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      cursor: pointer;
      padding: 8px;
      border-radius: var(--r-md);
      transition: background 0.2s;
      -webkit-user-select: none;
      user-select: none;
    }
    .section-header:hover { background: var(--bg-surface); }
    .section-header.collapsed { margin-bottom: 8px; }

    .section-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      transition: transform 0.2s;
      color: var(--text-3);
    }
    .section-toggle.collapsed { transform: rotate(-90deg); }

    .section-title {
      font-family: var(--ff-head);
      font-size: calc(15px * var(--fs));
      font-weight: 700;
      color: var(--text);
      flex: 1;
    }

    .section-action {
      font-size: calc(11px * var(--fs));
      color: var(--accent);
      cursor: pointer;
      white-space: nowrap;
    }
    .section-action:hover { text-decoration: underline; }

    .section-content {
      overflow: hidden;
      transition: max-height 0.3s ease-out, opacity 0.2s;
      max-height: 2000px;
      opacity: 1;
    }
    .section-content.collapsed {
      max-height: 0;
      opacity: 0;
    }

    /* Lesson assignments */
    .lesson-assignments-feed { display: flex; flex-direction: column; gap: 9px; }
    .lesson-entry {
display: flex; gap: 12px; padding: 13px 15px;
      background: var(--bg-surface); border-radius: var(--r-md);
      border: 1px solid var(--bdr);       cursor: pointer; transition: all .18s;
    }
    .lesson-entry:hover { border-color: var(--bdr-md); }
    .lesson-entry.active { border-color: var(--accent); }
    .lesson-date {
min-width: 40px; background: var(--bg-raised); border-radius: var(--r-sm);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; padding: 6px 0;
    }
    .lesson-date .day { font-family: var(--ff-head); font-size: 19px; font-weight: 700; color: var(--text); line-height: 1; }
    .lesson-date .mon { font-size: 9px; font-weight: 600; text-transform: uppercase; color: var(--text-3); letter-spacing: .05em; }
    .lesson-content { flex: 1; min-width: 0; }
    .lesson-title { font-size: calc(14px * var(--fs)); font-weight: 600; color: var(--text); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .lesson-meta { font-size: calc(11px * var(--fs)); color: var(--text-3); }
    .lesson-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

    /* Tags */
    .tag {
font-size: calc(10px * var(--fs)); padding: 2px 8px;
      border-radius: 0; background: var(--bg-raised);
      color: var(--text-3);     }
    .tag.coral {background: var(--accent-d); color: var(--accent); }
    .tag.teal  {background: var(--teal-d);   color: var(--teal); }

    /* Ledger table */
    .ledger-table { width: 100%; border-collapse: separate; border-spacing: 0 5px; }
    .ledger-table th {
      font-size: calc(10px * var(--fs)); text-transform: uppercase;
      letter-spacing: .07em; color: var(--text-3); padding: 4px 12px;
      text-align: left; font-weight: 500;
    }
    .ledger-table td {
padding: 10px 12px; background: var(--bg-surface);
      border-top: 1px solid var(--bdr); border-bottom: 1px solid var(--bdr);
      font-size: calc(13px * var(--fs)); color: var(--text);
    }
    .ledger-table td:first-child { border-left: 1px solid var(--bdr); border-radius: 0; }
    .ledger-table td:last-child  { border-right: 1px solid var(--bdr); border-radius: 0; }
    .credit-pips { display: flex; gap: 3px; align-items: center; }
    .pip { width: 10px; height: 10px; border-radius: 0; background: var(--bg-raised); flex-shrink: 0; }
    .pip.filled { background: var(--accent); }

    /* Calendar */
    .mini-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
    .cal-day-label { font-size: 9px; color: var(--text-3); text-align: center; padding: 3px 0; font-weight: 600; text-transform: uppercase; }
    .cal-day {
      aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
      border-radius: var(--r-sm); font-size: calc(12px * var(--fs));
      cursor: pointer; color: var(--text-2); transition: all .12s; position: relative;
    }
    .cal-day:hover { background: var(--bg-raised); color: var(--text); }
    .cal-day.today  {background: var(--bg-raised); color: var(--text); font-weight: 600; }
    .cal-day.has-lesson { color: var(--lesson-color, var(--accent)); font-weight: 600; }
    .cal-day.has-lesson::after { content: ''; display: block; width: 4px; height: 4px; background: var(--lesson-color, var(--accent)); border-radius: 0; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); }
    .cal-day.selected {background: var(--accent) !important; color: #fff !important; }

    /* ═══════════════════════════════════════════════
       ANNOTATION KIT
    ═══════════════════════════════════════════════ */
    .ann-canvas {
      position: relative; border-radius: var(--r-lg); overflow: visible;
      border: 2px solid var(--bdr);       cursor: default; transition: border-color .2s, box-shadow .2s;
    }
    .ann-canvas.placing { cursor: crosshair !important; border-color: var(--accent); }
    .ann-marker {
position: absolute; width: 30px; height: 30px; border-radius: 0;
      background: var(--accent);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--ff-head); font-weight: 800; font-size: 12px; color: #fff;
      cursor: grab; transform: translate(-50%,-50%);
      transition: transform .15s, box-shadow .15s; user-select: none; z-index: 10;
    }
    .ann-marker:hover { transform: translate(-50%,-50%) scale(1.18); }
    .ann-marker.selected { }
    .ann-marker.student { animation: ann-in .4s ease-out both, ann-pulse 2.8s ease-in-out infinite; cursor: default; }
    @keyframes ann-in { from { transform:translate(-50%,-50%) scale(0); opacity:0; } to { transform:translate(-50%,-50%) scale(1); opacity:1; } }
    .ann-tooltip {
      position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
      min-width: 190px; max-width: 260px; background: var(--bg-surface);
      border-radius: var(--r-md); border: 1px solid var(--bdr-md);
      padding: 12px 14px; z-index: 40; pointer-events: none;
      animation: ann-tip .15s ease-out; white-space: normal;
    }
    .ann-tooltip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:7px solid transparent; border-top-color:var(--bg-surface); }
    @keyframes ann-tip { from { opacity:0; transform:translateX(-50%) translateY(5px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
    .ann-tooltip-type { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--accent); margin-bottom:4px; }
    .ann-tooltip-content { font-size:calc(12px * var(--fs)); color:var(--text-2); line-height:1.55; font-family:var(--ff-body); }

    /* Response zone */
    .response-zone {
      border: 2px dashed var(--accent); border-radius: var(--r-md);
      padding: 16px; background: var(--accent-d);
    }

    /* Live-class layout preset picker: drop the text labels on narrow
       viewports so the four buttons never overflow the class header. */
    @media (max-width: 1100px) {
      .mm-preset-label { display: none; }
    }

    /* ═══════════════════════════════════════════════
       PHASE 1: MOBILE RESPONSIVE (768px / 480px)
    ═══════════════════════════════════════════════ */
    @media (max-width: 768px) {
      .nav-island { display: none; }
      .sidebar { display: none; }
      .mobile-drawer .sidebar { display: flex; flex-direction: column; width: 100%; flex: 1; }
      .layout { flex-direction: column; }
      .workspace { width: 100%; height: 100%; }
      button { min-height: 44px; min-width: 44px; }
      input, select, textarea { font-size: 16px; min-height: 44px; }
      .stats-row { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
      .stats-row { grid-template-columns: 1fr; }
      .section-title { font-size: calc(13px * var(--fs)); }
    }

    /* ═══════════════════════════════════════════════
       PHASE 2: MOBILE NAVIGATION & MODALS
    ═══════════════════════════════════════════════ */

    /* Bottom Navigation Tabs (Mobile) */
    .mobile-nav-tabs {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60px;
      background: var(--bg-nav);
      border-top: 1px solid var(--bdr);
      flex-wrap: wrap;
      z-index: 1000;
    }

    .mobile-nav-tab {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      background: none;
      border: none;
      color: var(--text-3);
      cursor: pointer;
      padding: 8px 4px;
      transition: all 0.2s;
      font-size: calc(10px * var(--fs));
      min-height: 60px;
    }

    .mobile-nav-tab.active {
      color: var(--accent);
    }

    .mobile-nav-tab:active {
      background: var(--bg-surface);
    }

    .mobile-nav-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }

    /* Hamburger Menu Button */
    .hamburger-btn {
      display: none;
      background: none;
      border: none;
      color: var(--text);
      cursor: pointer;
      padding: 8px 12px;
      font-size: 24px;
      z-index: 1001;
      min-height: 44px;
      min-width: 44px;
    }

    /* Mobile Drawer (Sidebar Overlay) */
    .mobile-drawer {
      position: fixed;
      left: -280px;
      top: 0;
      width: 280px;
      height: 100vh;
      background: var(--bg-side);
      border-right: 1px solid var(--bdr);
      display: flex;
      flex-direction: column;
      z-index: 999;
      transition: left 0.3s ease-out;
    }

    .mobile-drawer.open {
      left: 0;
    }

    .mobile-drawer-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 998;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease-out;
    }

    .mobile-drawer-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Full-screen Modals on Mobile */
    .modal-full-screen {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      border-radius: 0;
      max-height: 100vh;
      overflow-y: auto;
      z-index: 2000;
    }

    /* Mobile-optimized Typography */
    @media (max-width: 768px) {
      .workspace-title {
        font-size: calc(20px * var(--fs));
        margin-bottom: 12px;
      }

      .section-title {
        font-size: calc(16px * var(--fs));
      }

      .lesson-title {
        font-size: calc(13px * var(--fs));
      }

      input, select, textarea {
        font-size: 16px;
        padding: 12px;
      }

      /* Make all touch targets at least 44x44px */
      .btn-primary, .btn-secondary, .btn-dec,
      .sidebar-item, .mobile-nav-tab {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
      }

      /* Full-width buttons on mobile */
      .btn-primary, .btn-secondary {
        width: 100%;
        justify-content: center;
      }

      /* Increase tap target for lesson entries */
      .lesson-entry {
        padding: 16px;
        min-height: 60px;
      }

      /* Modal adjustments for mobile */
      .neu-card {
        border-radius: 0;
        max-height: 90vh;
        overflow-y: auto;
      }

      /* Larger form labels */
      label {
        font-size: calc(14px * var(--fs));
        margin-bottom: 8px;
        display: block;
      }

      /* Responsive grid layouts */
      .stats-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }

      /* Reduce padding on mobile */
      .workspace-header {
        padding: 12px 16px;
      }

      .workspace-body {
        padding: 12px;
      }
    }

    /* Tablet adjustments (481px - 768px) */
    @media (max-width: 768px) and (min-width: 481px) {
      .mobile-nav-tabs {
        display: flex;
      }

      .hamburger-btn {
        display: flex;
      }

      .stats-row {
        grid-template-columns: repeat(2, 1fr);
      }

      .lesson-entry {
        min-height: 56px;
      }
    }

    /* Small phone adjustments (max 480px) */
    @media (max-width: 480px) {
      .mobile-nav-tabs {
        display: flex;
      }

      .hamburger-btn {
        display: flex;
      }

      .workspace-body {
        padding-bottom: 80px;
      }

      .stats-row {
        grid-template-columns: 1fr;
      }

      .section-title {
        font-size: calc(14px * var(--fs));
      }

      .workspace-title {
        font-size: calc(18px * var(--fs));
      }

      /* Extra padding for bottom nav clearance */
      .workspace-body {
        padding-bottom: 80px;
      }

      /* Responsive grid for lesson list */
      .lesson-assignments-feed {
        gap: 12px;
      }

      .lesson-entry {
        min-height: 52px;
        padding: 12px;
      }

      /* Tighter spacing on small screens */
      .btn-primary, .btn-secondary {
        padding: 10px 14px;
        font-size: calc(12px * var(--fs));
      }

      /* Reduce card padding */
      .neu-card {
        padding: 16px;
      }

      /* Stack stat cards single column */
      .stat-card {
        min-width: unset;
      }
    }

    /* iPad / Landscape adjustments */
    @media (max-width: 1024px) and (orientation: landscape) {
      .mobile-nav-tabs {
        height: 50px;
      }

      .mobile-nav-tab {
        min-height: 50px;
      }

      .workspace-body {
        padding-bottom: 70px;
      }
    }

    /* Calendar Component Styles */
    .calendar-day {
aspect-ratio: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: var(--r-sm);
      font-size: calc(14px * var(--fs));
      cursor: pointer;
      color: var(--text-2);
      transition: all 0.2s;
      position: relative;
      background: var(--bg-surface);
      border: 1px solid var(--bdr);
      padding: 6px;
      gap: 4px;
    }

    .calendar-day.empty {
      background: transparent;
      border: none;
      cursor: default;
    }

    .calendar-day:not(.empty):hover {
      background: var(--bg-raised);
      color: var(--text);
    }

    .calendar-day.today {
background: var(--bg-raised);
      color: var(--text);
      font-weight: 600;
      border-color: var(--accent);
    }

    .calendar-day.has-events {
      background: var(--bg-surface);
    }

    .calendar-day.has-booking {
background: rgba(91, 160, 144, 0.3);
      border-color: var(--teal);
      color: var(--text);
      font-weight: 600;
    }

    .calendar-day.has-booking:hover {
      background: rgba(91, 160, 144, 0.5);
    }

    .day-number {
      font-weight: 600;
      font-size: calc(16px * var(--fs));
    }

    .booking-time {
      font-size: calc(11px * var(--fs));
      font-weight: 600;
      color: var(--teal);
      text-align: center;
    }

    .day-events {
      display: flex;
      gap: 2px;
      justify-content: center;
      margin-top: 2px;
    }

    .event-dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--accent);
    }