* { box-sizing: border-box; }
    body { margin:0; font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif; color:#151b2b; background:#f4f7fc; line-height:1.55; }
    a { color:#0d3d8f; }
    h1, h2, h3 { color:#062559; font-weight:700; letter-spacing:-0.3px; }
    h2 { font-size: 1.15rem; margin: 0 0 12px; }
    h3 { font-size: 0.95rem; margin: 0 0 8px; }
    nav.topnav { border-bottom:1px solid #d6dfec; background:#fff; }
    nav.topnav .inner { max-width:1300px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
    nav.topnav .brand { font-weight:700; color:#062559; text-decoration:none; font-size:1.05rem; display:flex; align-items:center; gap:8px; }
    nav.topnav .nav-link { color:#062559; text-decoration:none; font-size:0.9rem; font-weight:600; padding:6px 10px; border-radius:5px; }
    nav.topnav .nav-link:hover { background:#e6ecf7; }
    nav.topnav .spacer { flex:1; }
    nav.topnav .nav-logo { height:32px; width:32px; }
    nav.topnav .user-chip { display:flex; align-items:center; gap:8px; color:#3a4a68; font-size:0.85rem; }
    nav.topnav .user-chip button { border:1px solid #d6dfec; background:transparent; padding:4px 10px; border-radius:5px; cursor:pointer; font-family:inherit; font-size:0.82rem; color:#062559; }

    main { max-width: 1300px; margin: 0 auto; padding: 32px 24px 60px; }
    .toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:20px; }
    .toolbar h1 { margin:0; font-size:1.6rem; letter-spacing:-0.4px; }
    .toolbar .spacer { flex:1; }
    .toolbar button { border:1px solid #d6dfec; background:#fff; color:#062559; padding:8px 14px; border-radius:6px; cursor:pointer; font-weight:600; font-family:inherit; font-size:0.88rem; }
    .toolbar button:hover { background:#e6ecf7; }
    .toolbar button.primary { background:#062559; color:#fff; border-color:#062559; }
    .toolbar button.primary:hover { background:#0d3d8f; }

    .empty, .loading { background:#fff; border:1px solid #d6dfec; border-radius:10px; padding:40px 30px; text-align:center; color:#3a4a68; }
    .empty h2, .loading h2 { color:#062559; margin:0 0 10px; }
    .empty a { color:#0d3d8f; font-weight:600; }
    .msg { padding:12px 16px; border-radius:6px; font-size:0.9rem; margin-bottom:18px; }
    .msg.err { background:#fee2e2; border:1px solid #fca5a5; color:#7f1d1d; }

    .licence-card { background:#fff; border:1px solid #d6dfec; border-radius:12px; margin-bottom:24px; overflow:hidden; }
    .licence-header { padding:22px 26px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; border-bottom:1px solid #ebf1fa; }
    .licence-header .code { font-family:'Menlo','Monaco',monospace; font-size:1.2rem; font-weight:800; color:#062559; letter-spacing:2px; padding:6px 12px; background:#f4f7fc; border-radius:6px; }
    .licence-header .badge { padding:3px 10px; border-radius:12px; font-size:0.7rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
    .licence-header .badge.trial { background:#fef3c7; color:#78350f; }
    .licence-header .badge.paid { background:#dcfce7; color:#14532d; }
    .licence-header .badge.expired { background:#fee2e2; color:#7f1d1d; }
    .licence-header .meta { color:#3a4a68; font-size:0.82rem; }
    .licence-header .meta strong { color:#062559; }
    .licence-header .spacer { flex:1; }

    /* -----------------------------------------------------------------
     * v149 compact licence-card layout.
     * Replaces the old always-open header + roster strip + grid-2 body
     * with a compact summary + progressive-disclosure <details> panels.
     * ---------------------------------------------------------------- */
    .licence-card.compact { padding:0; }
    .licence-summary { padding:18px 22px 14px; }
    .licence-nickname-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
    .licence-nickname { margin:0; font-size:1.15rem; font-weight:800; color:#062559; letter-spacing:-0.01em; line-height:1.2; }
    .rename-btn.tiny { background:transparent; border:1px solid transparent; color:#6b7a99; cursor:pointer; padding:3px 7px; border-radius:5px; font-size:0.95rem; font-family:inherit; line-height:1; }
    .rename-btn.tiny:hover { background:#eff6ff; color:#0d3d8f; border-color:#cfd9ee; }
    .code-chip { font-family:'Menlo','Monaco',monospace; font-size:0.82rem; font-weight:700; color:#062559; letter-spacing:1.5px; padding:3px 10px; background:#f4f7fc; border-radius:6px; margin-left:auto; }
    .licence-meta-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
    .courses { display:flex; gap:5px; flex-wrap:wrap; }
    .course-pill { display:inline-block; padding:3px 9px; border-radius:10px; font-size:0.7rem; font-weight:700; letter-spacing:0.03em; background:#eff6ff; color:#0d3d8f; border:1px solid #dbeafe; }
    .seats-block { display:flex; align-items:center; gap:10px; }
    .seats-count { font-size:0.82rem; color:#4a5a75; }
    .seats-count strong { color:#062559; font-size:0.9rem; }
    .seat-bar { width:120px; height:7px; background:#e6ecf7; border-radius:4px; overflow:hidden; }
    .seat-bar > span { display:block; height:100%; border-radius:4px; transition:width 240ms ease; }
    .expiry-note { color:#6b7a99; font-size:0.78rem; margin-left:auto; }
    .licence-actions { display:flex; gap:8px; flex-wrap:wrap; }
    .lc-btn { background:#fff; border:1px solid #cfd9ee; color:#062559; padding:7px 12px; border-radius:6px; font-size:0.82rem; font-weight:700; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:5px; transition:all 140ms; line-height:1; }
    .lc-btn:hover { border-color:#0d3d8f; background:#eff6ff; }
    .lc-btn.primary { background:#0d3d8f; color:#fff; border-color:#0d3d8f; }
    .lc-btn.primary:hover { background:#062559; border-color:#062559; }
    .lc-btn.danger { color:#7f1d1d; border-color:#fecaca; background:#fef2f2; }
    .lc-btn.danger:hover { background:#fee2e2; border-color:#dc2626; }
    .lc-btn small { color:inherit; opacity:0.75; font-weight:600; }
    .lc-btn > span { line-height:1; }
    .lc-panel { border-top:1px solid #ebf1fa; padding:14px 22px; background:#fbfcfe; }
    .lc-panel > summary { cursor:pointer; font-weight:700; color:#062559; font-size:0.92rem; padding:4px 0; list-style:none; display:flex; align-items:center; gap:6px; }
    .lc-panel > summary::before { content:'\25B8'; color:#6b7a99; transition:transform 160ms; display:inline-block; }
    .lc-panel[open] > summary::before { transform:rotate(90deg); }
    .lc-panel[open] > summary { border-bottom:1px solid #ebf1fa; padding-bottom:10px; margin-bottom:12px; }
    /* Inline delete confirmation — inserted by JS, matches other panels' look. */
    .lc-confirm-delete { border-top:1px solid #fecaca; background:#fef2f2; padding:14px 22px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:#7f1d1d; font-size:0.88rem; }
    .lc-confirm-delete strong { color:#7f1d1d; }
    .lc-confirm-delete input { padding:6px 10px; border:1px solid #fca5a5; border-radius:5px; font:inherit; }
    .lc-confirm-delete .lc-btn { border-color:#fca5a5; }

    @media (max-width: 640px) {
      .licence-actions { gap:6px; }
      .lc-btn { padding:6px 10px; font-size:0.78rem; }
      .expiry-note { margin-left:0; width:100%; }
      .code-chip { margin-left:0; }
    }


    .licence-body { padding:20px 26px 26px; }
    .grid-2 { display:grid; grid-template-columns: 1.7fr 1fr; gap:24px; }
    .grid-2 > * { min-width: 0; } /* prevents child tables from forcing grid overflow on mobile */
    @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

    /* ============ Mobile-friendly overrides (≤ 640px) ============ */
    @media (max-width: 640px) {
        nav.topnav .inner { padding: 10px 14px; gap: 10px; }
        nav.topnav .brand { font-size: 0.98rem; }
        main { padding: 18px 14px 42px; }
        .toolbar { gap: 8px; }
        .licence-header { padding: 14px 16px; gap: 10px; }
        .licence-body { padding: 14px 16px !important; }
        .roster-strip { padding: 12px 16px; gap: 10px 14px; }
        .roster-strip form input,
        .class-filter select { min-width: 0; width: 100%; }
        .roster-strip form { width: 100%; flex-direction: column; align-items: stretch; gap: 6px; }
        .roster-strip form button { width: 100%; }
        .class-filter { flex-wrap: wrap; }
        /* Reveal the "swipe to see more" hint only when the table is scrollable. */
        .scroll-hint { display: block !important; }
        table.students { font-size: 0.82rem; }
        table.students th, table.students td { padding: 8px 8px; }
        h1 { font-size: 1.5rem !important; }
        h2 { font-size: 1.05rem !important; }
        .report-modal .card { max-height: 92vh; margin: 12px; }
        .report-modal .card-head, .report-modal .card-foot { padding: 12px 16px; }
        /* Auto-sized coverage/preview grids should collapse to a single column. */
        #coverage-grid, #daily-preview-grid { grid-template-columns: 1fr !important; }
    }
    @media (max-width: 400px) {
        main { padding: 14px 10px 36px; }
        .licence-header { padding: 12px 12px; gap: 8px; }
        .licence-body { padding: 12px 12px !important; }
        .roster-strip { padding: 10px 12px; }
    }

    /* Student table */
    table.students { width:100%; border-collapse:collapse; font-size:0.85rem; min-width: 540px; }
    table.students th { text-align:left; color:#6b7a99; font-weight:600; padding:8px 10px; border-bottom:1px solid #ebf1fa; font-size:0.78rem; letter-spacing:0.3px; text-transform:uppercase; white-space:nowrap; }
    table.students td { padding:10px; border-bottom:1px solid #f4f7fc; color:#3a4a68; vertical-align:middle; }
    table.students td.pct { font-weight:700; white-space:nowrap; }
    table.students .bar { display:inline-block; width:80px; height:6px; background:#ebf1fa; border-radius:3px; margin-left:6px; vertical-align:middle; overflow:hidden; }
    table.students .bar span { display:block; height:100%; background:#0d3d8f; border-radius:3px; }
    table.students .bar span.low { background:#dc2626; }
    table.students .bar span.mid { background:#f47b20; }
    table.students .bar span.high { background:#16a34a; }
    table.students .never { color:#b8c9e2; font-style:italic; font-size:0.8rem; }

    /* Horizontal scroll wrapper for the students table on narrow screens.
       Provides a visible gradient hint on the right so mobile users know to swipe. */
    .students-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
        border-radius: 4px;
        /* Right-edge fade — hints at more content off-screen on mobile. */
        background:
            linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
            linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
            linear-gradient(to right, rgba(6,37,89,0.08), rgba(6,37,89,0)),
            linear-gradient(to left,  rgba(6,37,89,0.08), rgba(6,37,89,0)) 100% 0;
        background-repeat: no-repeat;
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }
    table.students tr:hover { background:#fafcff; }
    .student-row { cursor:pointer; }
    .student-detail { display:none; background:#fafcff; padding:14px 16px 6px !important; border-bottom:1px solid #ebf1fa !important; }
    .student-detail.open { display:table-row; }
    .student-detail .topics { display:flex; flex-wrap:wrap; gap:8px; }
    .student-detail .topic-chip { background:#fff; border:1px solid #d6dfec; padding:5px 10px; border-radius:14px; font-size:0.78rem; color:#3a4a68; }
    .student-detail .topic-chip strong { color:#062559; }

    /* Weak topics */
    .weak-list { display:flex; flex-direction:column; gap:8px; }
    .weak-row { padding:10px 12px; background:#fff5e6; border-left:3px solid #f47b20; border-radius:4px; font-size:0.85rem; color:#3a4a68; display:flex; justify-content:space-between; align-items:center; }
    .weak-row strong { color:#7a3400; }
    .weak-empty { padding:14px; background:#dcfce7; border-left:3px solid #16a34a; border-radius:4px; color:#14532d; font-size:0.85rem; }

    /* Copyable class-code panel */
    .code-share { background:#f4f7fc; border-radius:8px; padding:14px 16px; margin-top:16px; font-size:0.85rem; color:#3a4a68; }
    .code-share code { background:#fff; padding:2px 6px; border-radius:4px; font-family:'Menlo','Monaco',monospace; color:#062559; font-weight:700; }
    .code-share button { border:none; background:#062559; color:#fff; padding:4px 10px; border-radius:4px; cursor:pointer; font-size:0.78rem; font-weight:700; margin-left:8px; font-family:inherit; }

    /* Class filter dropdown + rename */
    .class-filter { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #d6dfec; border-radius:8px; padding:8px 12px; font-size:0.88rem; }
    .class-filter label { color:#6b7a99; font-weight:600; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.5px; }
    .class-filter select { border:1px solid #d6dfec; padding:6px 10px; border-radius:5px; font-family:inherit; font-size:0.88rem; color:#062559; background:#fff; cursor:pointer; min-width:220px; }
    .class-filter select:focus { outline:2px solid #0d3d8f; outline-offset:-1px; }
    .rename-btn { border:none; background:transparent; color:#0d3d8f; cursor:pointer; font-family:inherit; font-size:0.78rem; font-weight:600; padding:4px 8px; border-radius:4px; }
    .rename-btn:hover { background:#e6ecf7; }
    .class-nickname { font-size:0.85rem; color:#3a4a68; font-weight:500; }
    .class-nickname strong { color:#062559; font-weight:700; }

    /* Generate report per-student button + modal */
    .gen-report-btn { border:1px solid #0d3d8f; background:#fff; color:#0d3d8f; padding:4px 10px; border-radius:4px; cursor:pointer; font-family:inherit; font-size:0.78rem; font-weight:700; }
    .gen-report-btn:hover { background:#0d3d8f; color:#fff; }

    /* Row-level actions: move / remove student. Icon-only to keep the row
       compact; hover reveals the semantics via native `title`. */
    .row-action { border:none; background:transparent; color:#6b7a99; cursor:pointer; font-family:inherit; font-size:1rem; font-weight:700; padding:2px 8px; border-radius:4px; margin-left:2px; }
    .row-action:hover { background:#e6ecf7; color:#062559; }
    .row-action-danger:hover { background:#fdecec; color:#7a1c1c; }

    /* Inline roster-management strip that sits below the licence header.
       Holds Add-student form + collapsible Co-teachers panel. */
    .roster-strip { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:flex-start; padding:14px 26px 16px; background:#f8fafd; border-bottom:1px solid #ebf1fa; }
    .roster-strip form { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
    .roster-strip form input[type="email"] {
        border:1px solid #d6dfec; background:#fff; padding:6px 10px; border-radius:6px;
        font-family:inherit; font-size:0.85rem; min-width:220px;
    }
    .roster-strip form input[type="email"]:focus { outline:none; border-color:#0d3d8f; box-shadow:0 0 0 3px rgba(13,61,143,0.1); }
    .roster-strip form input[type="email"]:disabled { background:#f4f7fc; color:#9daabe; }
    .roster-strip form button { border:none; background:#062559; color:#fff; padding:6px 14px; border-radius:6px; font-weight:700; font-size:0.83rem; cursor:pointer; font-family:inherit; }
    .roster-strip form button:hover:not(:disabled) { background:#0d3d8f; }
    .roster-strip form button:disabled { background:#9daabe; cursor:not-allowed; }
    .roster-strip .roster-hint { color:#6b7a99; font-size:0.78rem; }
    .roster-strip details.co-teachers-details summary { cursor:pointer; color:#062559; font-size:0.85rem; font-weight:700; padding:6px 0; }
    .co-teachers-body { margin-top:8px; padding-left:12px; border-left:2px solid #d6dfec; }
    .co-teachers-body .ct-list { list-style:none; padding:0; margin:0 0 10px; }
    .co-teachers-body .ct-list li { display:flex; align-items:center; gap:10px; padding:4px 0; font-size:0.85rem; color:#062559; }
    .co-teachers-body .ct-remove { border:1px solid #d6dfec; background:#fff; color:#7a1c1c; padding:3px 10px; border-radius:6px; font-size:0.75rem; font-weight:700; cursor:pointer; font-family:inherit; }
    .co-teachers-body .ct-remove:hover { background:#fdecec; }
    .co-teachers-body .ct-empty { color:#6b7a99; font-size:0.82rem; margin:0 0 8px; font-style:italic; }
    .gen-report-btn:disabled { opacity:0.55; cursor:wait; }

    /* Report-Writing Help picker (top-of-dashboard tile). Groups students
       by class, sorts by recent activity, and exposes a one-click
       Generate button that reuses openReportModal(). Empty-state message
       shown when no students have logged practice yet. */
    .rw-empty { padding:14px 16px; background:#f4f7fc; border:1px dashed #d6dfec; border-radius:8px; color:#6b7a99; font-size:0.9rem; }
    .rw-toolbar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:8px 0 12px; }
    .rw-toolbar input { flex:1 1 200px; min-width:180px; padding:8px 12px; border:1px solid #d6dfec; border-radius:8px; background:#f4f7fc; font-family:inherit; font-size:0.9rem; color:#062559; min-height:36px; }
    .rw-toolbar select { padding:8px 12px; border:1px solid #d6dfec; border-radius:8px; background:#f4f7fc; font-family:inherit; font-size:0.9rem; color:#062559; min-height:36px; }
    .rw-toolbar .rw-count { color:#6b7a99; font-size:0.85rem; margin-left:auto; }
    .rw-toolbar .rw-count b { color:#062559; }
    .rw-class { margin:0 0 14px; }
    .rw-class h4 { margin:0 0 6px; color:#062559; font-size:0.82rem; letter-spacing:0.4px; text-transform:uppercase; }
    .rw-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px; }
    .rw-student { border:1px solid #e5ecf5; border-radius:10px; padding:12px 14px; background:#fff; display:flex; flex-direction:column; gap:6px; position:relative; }
    .rw-student.rw-checked { border-color:#16a34a; background:#f0fdf4; box-shadow:0 0 0 3px rgba(22,163,74,0.08); }
    .rw-tick { position:absolute; top:10px; right:12px; }
    .rw-tick input { width:20px; height:20px; cursor:pointer; accent-color:#16a34a; margin:0; }
    .rw-student .name { font-weight:700; color:#062559; font-size:0.92rem; word-break:break-word; }
    .rw-student .meta { color:#6b7a99; font-size:0.75rem; display:flex; gap:8px; flex-wrap:wrap; }
    .rw-student .meta span { background:#f4f7fc; padding:1px 8px; border-radius:10px; }
    .rw-student .meta .low  { background:#fee2e2; color:#7f1d1d; }
    .rw-student .meta .mid  { background:#fef3c7; color:#78350f; }
    .rw-student .meta .high { background:#dcfce7; color:#14532d; }
    .rw-student button { margin-top:4px; align-self:flex-start; padding:6px 12px; background:#16a34a; color:#fff; border:0; border-radius:6px; font-weight:700; font-family:inherit; font-size:0.82rem; cursor:pointer; }
    .rw-student button:hover { background:#0d7a3d; }
    .rw-student button:disabled { opacity:0.55; cursor:wait; }

    /* Sticky Report-Writer bulk-generate bar — sits at the bottom of the
       tile when 1+ student is ticked. Progress bar animates during batch
       generation; batch is rate-limited to one call every ~1.5s so the
       Gemini quota / Firebase Callable concurrency stays polite. */
    .rw-bulk { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:14px; padding:12px 16px; background:#062559; color:#fff; border-radius:12px; box-shadow:0 8px 22px rgba(6,37,89,0.24); }
    .rw-bulk[hidden] { display:none; }
    .rw-bulk .count { font-weight:800; font-size:0.95rem; }
    .rw-bulk .spacer { flex:1; }
    .rw-bulk button { background:#fff; color:#062559; border:0; padding:8px 14px; border-radius:8px; font-weight:700; font-family:inherit; font-size:0.85rem; cursor:pointer; }
    .rw-bulk button.ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.4); }
    .rw-bulk button.primary { background:#22c55e; color:#052e16; }
    .rw-bulk button.primary:hover { background:#16a34a; color:#fff; }
    .rw-bulk button:disabled { opacity:0.55; cursor:wait; }
    .rw-bulk .rw-length { padding:8px 12px; border:1px solid rgba(255,255,255,0.35); background:transparent; color:#fff; border-radius:8px; font-family:inherit; font-size:0.85rem; min-height:36px; }
    .rw-bulk .rw-length option { color:#062559; }
    .rw-progress { width:100%; margin-top:10px; height:6px; background:rgba(255,255,255,0.18); border-radius:3px; overflow:hidden; }
    .rw-progress[hidden] { display:none; }
    .rw-progress-fill { height:100%; background:#22c55e; transition:width 0.4s ease; }

    /* Batch result modal — shows all generated drafts in one scroll pane
       with a "Copy all" button. Structured as { email, report, error }. */
    .rw-batch-modal { position:fixed; inset:0; background:rgba(6,37,89,0.55); display:none; align-items:center; justify-content:center; padding:24px; z-index:99; }
    .rw-batch-modal.open { display:flex; }
    .rw-batch-modal .card { background:#fff; border-radius:14px; padding:22px 24px; max-width:820px; width:100%; max-height:88vh; overflow-y:auto; }
    .rw-batch-modal h3 { margin:0 0 6px; color:#062559; }
    .rw-batch-modal .subtitle { color:#6b7a99; font-size:0.85rem; margin:0 0 16px; }
    .rw-batch-modal .rb-item { border:1px solid #e5ecf5; border-radius:10px; padding:14px 16px; margin-bottom:12px; }
    .rw-batch-modal .rb-item .rb-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
    .rw-batch-modal .rb-item h4 { margin:0; color:#062559; font-size:0.95rem; }
    .rw-batch-modal .rb-item .rb-copy { background:#eaf1fb; border:0; color:#0d3d8f; padding:5px 10px; border-radius:6px; cursor:pointer; font-weight:700; font-size:0.78rem; }
    .rw-batch-modal .rb-item .rb-body { color:#151b2b; font-size:0.9rem; line-height:1.55; white-space:pre-wrap; }
    .rw-batch-modal .rb-item.error .rb-body { color:#991b1b; }
    .rw-batch-modal .rb-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
    .rw-batch-modal .rb-actions button { padding:8px 16px; border-radius:8px; border:0; font-weight:700; cursor:pointer; font-family:inherit; }
    .rw-batch-modal .rb-actions .close { background:#e5ecf5; color:#062559; }
    .rw-batch-modal .rb-actions .copyall { background:#16a34a; color:#fff; }
    .report-modal { position:fixed; inset:0; background:rgba(6,37,89,0.55); display:none; align-items:center; justify-content:center; z-index:200; padding:20px; }
    .report-modal.open { display:flex; }
    .report-modal .card { background:#fff; border-radius:12px; max-width:640px; width:100%; max-height:88vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 20px 50px rgba(6,37,89,0.35); }
    .report-modal .card-head { padding:18px 24px; border-bottom:1px solid #ebf1fa; display:flex; align-items:center; gap:14px; }
    .report-modal .card-head h2 { margin:0; font-size:1.05rem; }
    .report-modal .card-head .who { color:#6b7a99; font-size:0.82rem; }
    .report-modal .card-head .close { margin-left:auto; border:none; background:transparent; font-size:1.4rem; color:#6b7a99; cursor:pointer; padding:0 4px; }
    .report-modal .card-body { padding:20px 24px; overflow-y:auto; }
    .report-modal .length-row { display:flex; gap:8px; margin-bottom:16px; }
    .report-modal .length-row button { flex:1; padding:8px 12px; border:1px solid #d6dfec; background:#fff; color:#062559; border-radius:6px; cursor:pointer; font-family:inherit; font-size:0.85rem; font-weight:600; }
    .report-modal .length-row button.active { background:#062559; color:#fff; border-color:#062559; }
    .report-modal .length-row button:disabled { opacity:0.5; cursor:wait; }
    .report-modal .report-out { background:#f4f7fc; border:1px solid #d6dfec; border-radius:8px; padding:16px; font-size:0.92rem; color:#151b2b; line-height:1.6; min-height:120px; white-space:pre-wrap; }
    .report-modal .report-out.placeholder { color:#8ea4c8; font-style:italic; }
    .report-modal .card-foot { padding:14px 24px; border-top:1px solid #ebf1fa; display:flex; gap:10px; justify-content:flex-end; }
    .report-modal .card-foot button { padding:8px 14px; border-radius:6px; cursor:pointer; font-family:inherit; font-size:0.85rem; font-weight:600; border:1px solid #d6dfec; background:#fff; color:#062559; }
    .report-modal .card-foot button.primary { background:#062559; color:#fff; border-color:#062559; }
    .report-modal .card-foot button:disabled { opacity:0.5; cursor:not-allowed; }
    .report-modal .disclaimer { margin-top:12px; font-size:0.75rem; color:#8ea4c8; }

    /* Class Mastery Heatmap — per-course row with 5 unit tiles + a topic
       drill-down panel that expands when a tile is clicked. All numbers
       come from getClassMasteryHeatmap. */
    .mastery-info-icon:hover .mastery-tip,
    .mastery-info-icon:focus .mastery-tip { opacity:1; pointer-events:auto; }
    .mastery-course { border:1px solid #ebf1fa; border-radius:10px; padding:14px 16px; margin-bottom:14px; background:#fff; }
    .mastery-course-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
    .mastery-course-label { font-size:0.95rem; font-weight:800; color:#062559; }
    .mastery-course-note  { color:#6b7a99; font-size:0.78rem; }
    .mastery-grid { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; }
    .mastery-tile { border-radius:8px; padding:12px 10px; text-align:center; cursor:pointer; color:#062559; border:1px solid transparent; transition: transform 0.12s, box-shadow 0.12s; position:relative; min-height:82px; display:flex; flex-direction:column; justify-content:center; }
    .mastery-tile:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(6,37,89,0.10); }
    .mastery-tile.selected { outline:2px solid #062559; outline-offset:1px; }
    .mastery-tile .m-unit  { font-size:0.72rem; letter-spacing:0.5px; text-transform:uppercase; opacity:0.75; }
    .mastery-tile .m-topic { font-size:0.66rem; letter-spacing:0.2px; opacity:0.68; margin-top:1px; text-transform:none; font-weight:600; line-height:1.15; }
    .mastery-tile .m-pct   { font-size:1.4rem; font-weight:800; line-height:1.1; margin-top:4px; }
    .mastery-tile .m-n     { font-size:0.68rem; opacity:0.65; margin-top:2px; }
    .mastery-tile.band-red    { background:#fee2e2; color:#7f1d1d; }
    .mastery-tile.band-amber  { background:#fef3c7; color:#78350f; }
    .mastery-tile.band-green  { background:#dcfce7; color:#14532d; }
    .mastery-tile.band-empty  { background:#f4f7fc; color:#8ea4c8; cursor:default; }
    .mastery-tile.band-empty:hover { transform:none; box-shadow:none; }
    .mastery-tile.band-empty .m-pct { font-size:1rem; font-weight:600; }

    .mastery-drill { margin-top:12px; padding:12px 14px; background:#f4f7fc; border-radius:8px; border:1px solid #e6ecf7; }
    .mastery-drill-title { font-weight:700; color:#062559; font-size:0.88rem; margin:0 0 8px; }
    .mastery-drill-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
    .mastery-drill-table th, .mastery-drill-table td { text-align:left; padding:6px 10px; }
    .mastery-drill-table th { color:#4a5a75; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid #d6dfec; }
    .mastery-drill-table td.m-num { text-align:right; font-variant-numeric:tabular-nums; }
    .mastery-drill-table tr + tr td { border-top:1px solid #eef2f8; }
    .mastery-drill-table td.m-cell.band-red    { color:#7f1d1d; font-weight:700; }
    .mastery-drill-table td.m-cell.band-amber  { color:#78350f; font-weight:700; }
    .mastery-drill-table td.m-cell.band-green  { color:#14532d; font-weight:700; }
    .mastery-drill-table td.m-cell.band-empty  { color:#c0c9d8; }
    .mastery-empty { color:#6b7a99; font-size:0.85rem; padding:16px 8px; text-align:center; }
    @media (max-width: 640px) {
        .mastery-grid { grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; }
        .mastery-tile { padding:10px 6px; min-height:70px; }
        .mastery-tile .m-pct { font-size:1.1rem; }
    }

    footer { background:#151b2b; color:#8ea4c8; text-align:center; padding:22px 24px; font-size:0.86rem; margin-top:40px; }
    footer a { color:#c9d5eb; }

    /* ------------------------------------------------------------
       Trial countdown pill
       - Green    > 12h remaining
       - Amber    4-12h remaining
       - Red      < 4h remaining
       - Expired  hits zero: swaps to "Trial ended · Convert →"
       ------------------------------------------------------------ */
    .trial-pill {
        margin: 12px 24px 0;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px 10px 14px;
        border-radius: 999px;
        font-family: inherit;
        font-size: 0.94rem;
        font-weight: 700;
        background: #e7fbf1;
        color: #0a4a25;
        border: 1.5px solid #186a3b;
        transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    .trial-pill.state-amber   { background: #fef3e3; color: #7a3400; border-color: #f57f17; }
    .trial-pill.state-red     { background: #fef3f0; color: #7a1e0a; border-color: #c23b22; animation: trial-pulse 2s ease-in-out infinite; }
    .trial-pill.state-expired { background: #062559; color: #fff;    border-color: #f47b20; }
    .trial-pill.state-expired .trial-pill-label { text-decoration: line-through; opacity: 0.55; }
    .trial-pill.state-expired .trial-pill-icon  { filter: grayscale(1); opacity: 0.55; }
    .trial-pill.state-expired #trial-pill-time  { color: #ffdb99; }
    .trial-pill-icon  { font-size: 1.05rem; line-height: 1; }
    .trial-pill-label { font-weight: 600; opacity: 0.85; }
    .trial-pill #trial-pill-time { font-variant-numeric: tabular-nums; letter-spacing: 0.3px; }
    .trial-pill-cta {
        margin-left: 8px;
        padding: 5px 12px;
        background: #062559;
        color: #fff;
        text-decoration: none;
        border-radius: 999px;
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 0.2px;
        display: none;
    }
    .trial-pill.state-red .trial-pill-cta,
    .trial-pill.state-expired .trial-pill-cta { display: inline-block; }
    .trial-pill.state-expired .trial-pill-cta { background: #f47b20; }
    @keyframes trial-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(194,59,34,0.35); }
        50%      { box-shadow: 0 0 0 6px rgba(194,59,34,0);   }
    }

    /* ============ Homework Mark Book ============ */
    #markbook .mb-table-wrap { overflow-x: auto; }
    #markbook table.mb-grid { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 640px; }
    #markbook table.mb-grid th, #markbook table.mb-grid td { padding: 8px 10px; border-bottom: 1px solid #ebf1fa; vertical-align: middle; text-align: left; }
    #markbook table.mb-grid thead th { position: sticky; top: 0; background: #f4f7fc; color: #062559; font-size: 0.72rem; letter-spacing: 0.4px; text-transform: uppercase; z-index: 1; border-bottom: 1px solid #d6dfec; }
    #markbook table.mb-grid tbody tr:hover { background: #fafcff; }
    #markbook table.mb-grid td.student-col { font-weight: 600; color: #062559; position: sticky; left: 0; background: #fff; z-index: 2; white-space: nowrap; box-shadow: 1px 0 0 #ebf1fa; }
    #markbook table.mb-grid thead th.student-col { z-index: 3; background: #f4f7fc; }
    /* CAT4 / Target frozen columns — sticky to the left so they stay
       visible while a teacher scrolls the assignments horizontally. */
    #markbook table.mb-grid th.profile-col,
    #markbook table.mb-grid td.profile-col { text-align: center; white-space: nowrap; background: #fff; box-shadow: 1px 0 0 #ebf1fa; }
    #markbook table.mb-grid td.profile-col:nth-child(2) { position: sticky; left: 240px; z-index: 2; }
    #markbook table.mb-grid td.profile-col:nth-child(3) { position: sticky; left: 320px; z-index: 2; }
    #markbook table.mb-grid thead th.profile-col:nth-child(2) { position: sticky; left: 240px; z-index: 3; background: #f4f7fc; }
    #markbook table.mb-grid thead th.profile-col:nth-child(3) { position: sticky; left: 320px; z-index: 3; background: #f4f7fc; }
    #markbook .mb-cat4-empty, #markbook .mb-target-empty { color: #b8c9e2; font-weight: 700; }
    #markbook .mb-cell { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px; font-weight: 700; cursor: pointer; border: 1px solid transparent; min-width: 46px; justify-content: center; }
    #markbook .mb-cell:hover { border-color: #0d3d8f; }
    #markbook .mb-cell.band-red    { background: #fee2e2; color: #7f1d1d; }
    #markbook .mb-cell.band-amber  { background: #fef3c7; color: #78350f; }
    #markbook .mb-cell.band-green  { background: #dcfce7; color: #14532d; }
    #markbook .mb-cell.band-empty  { background: #f4f7fc; color: #b8c9e2; }
    #markbook .mb-cell .mb-override-dot { width: 6px; height: 6px; border-radius: 50%; background: #0d3d8f; }
    #markbook .mb-cell .mb-photo { color: #6b7a99; font-size: 0.75rem; }
    #markbook .mb-cell.late { outline: 1.5px dashed #c6335c; outline-offset: -2px; }
    #markbook .mb-asgn-title { display: block; color: #062559; font-weight: 700; font-size: 0.75rem; }
    #markbook .mb-asgn-due { display: block; color: #6b7a99; font-size: 0.68rem; font-weight: 500; }
    #markbook .mb-empty { color: #6b7a99; padding: 24px; text-align: center; }
    #mb-uploads-preview .up-thumb { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; margin:0 6px 6px 0; background:#f4f7fc; border:1px solid #d6dfec; border-radius:6px; cursor:pointer; font-size:0.82rem; color:#062559; text-decoration:none; }
    #mb-uploads-preview .up-thumb:hover { background: #e6ecf7; }