.main-content {
    padding: 12px 20px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#placeholderContent {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 1200px;
    align-self: center;
}

/* Library page host — mounts the class library card inline as the main
   page body via tcOpenLibraryModalEmbedded. Fills the flex parent. */
.tc-library-page-host {
    flex: 1;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Subtitle line under the page-title h1 — used by the Library page +
   any future class page that wants a grade/subject/curriculum byline
   without rolling its own selector. Matches .roster-title-row p. */
.page-subtitle {
    font-size: 13px;
    color: #666;
    margin: 2px 0 0;
}

/* Notebook page framing.

   Goal: tan is the *page* background — extends behind the sidebar so
   collapsing it flows tan instead of grey. The notebook spread sits
   inside a 1200px-max-width centered area like other class pages.
   The title bar spans edge-to-edge of main-content (white strip),
   then the tan desk starts below it.

   zoom: 1.2 lives on #placeholderContent (NOT on .main-content, which
   is position:fixed — Chrome's `zoom` interacts badly with fixed
   positioning and shifts the element off-anchor). Net display scale
   is body's 0.75 × placeholderContent's 1.2 = 0.9, slightly larger
   than other class pages without going full-natural. Body tan is set
   on body.tc-notebook-page (toggled by class-placeholder-app.js in
   lockstep with .notebook-mode). */
.main-content.notebook-mode {
    padding: 0;
    background-color: transparent;
    align-items: stretch;
    overflow: hidden;
}
.main-content.notebook-mode #placeholderContent {
    max-width: none;
    align-self: stretch;
    background-color: transparent;
    zoom: 1.2;
}
/* The notebook wrapper's inline style="overflow:hidden" was cutting
   the left binder tabs (which project to the left of .nb-page-left
   via right:100%). Override to visible so the binder tabs render in
   the tan strip on each side of the spread. */
.main-content.notebook-mode #nbContainer {
    overflow: visible !important;
    background-color: transparent;
}

/* Body-level tan for the notebook page only. Body.tc-notebook-page is
   added alongside .main-content.notebook-mode so the tan extends
   behind the (white) sidebar — collapsing the sidebar reveals tan,
   not the default #f5f5f5 grey. Scoped to the body class so other
   pages keep the standard grey app canvas. */
body.tc-notebook-page {
    background-color: #e8e0d4;
}

/* Placeholder Header */
.placeholder-header {
    margin-bottom: 16px;
    flex-shrink: 0;
}
.placeholder-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 2px;
    letter-spacing: -0.3px;
}
.placeholder-header p {
    font-size: 13px;
    color: #666;
}

.not-found-container {
    text-align: center;
    padding: 80px 40px;
}
.not-found-container h2 {
    font-size: 20px;
    color: #333;
    margin-bottom: 8px;
}
.not-found-container p {
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
}

.btn-primary {
    display: inline-block;
    padding: 10px 24px;
    background-color: #059669;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-primary:hover { background-color: #047857; }

/* Page tabs */
.page-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    flex-shrink: 0;
    width: 100%;
    max-width: 1200px;
}
.page-tab {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.page-tab:hover {
    color: #059669;
    border-color: #a7f3d0;
    background: #f0fdf4;
}
.page-tab.active {
    color: #059669;
    border-color: #059669;
    background: #f0fdf4;
    cursor: default;
}

/* ========== GHOST PLACEHOLDER SYSTEM ========== */

/* Wrapper fills remaining space */
.gh-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
}

/* Ghost content layer — muted behind overlay */
.gh-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}

/* Semi-transparent overlay */
.gh-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(245,245,245,0.15) 0%, rgba(245,245,245,0.35) 100%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CTA card — editorial cream/serif look, matches dh-onb-card + er-modal */
.gh-cta {
    background: linear-gradient(180deg, #fefdfb 0%, #f8f5ee 100%);
    border-radius: 24px;
    border: 1px solid #ece7dd;
    box-shadow:
        0 24px 64px rgba(40, 30, 10, 0.10),
        0 8px 24px rgba(40, 30, 10, 0.04),
        0 1px 0 rgba(255, 255, 255, 0.8) inset;
    padding: 40px 44px 36px;
    text-align: center;
    max-width: 560px;
    width: 92%;
    animation: gh-cta-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes gh-cta-enter {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.gh-cta .gh-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #2f6844;
    margin-bottom: 10px;
}
.gh-cta h2 {
    font-family: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1.1;
    color: #1a1a1a;
    margin: 0 0 12px;
    letter-spacing: -0.015em;
}
.gh-cta h2 em {
    color: #2f6844;
    font-style: italic;
}
.gh-cta p {
    font-size: 14.5px;
    color: #4b5563;
    line-height: 1.55;
    margin: 0 auto 24px;
    max-width: 460px;
}
.gh-cta-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.gh-cta-buttons .btn-primary {
    padding: 11px 24px;
    font-size: 13px;
}
.gh-cta-buttons .btn-secondary {
    display: inline-block;
    padding: 11px 24px;
    background-color: white;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}
.gh-cta-buttons .btn-secondary:hover {
    background-color: #f9fafb;
    border-color: #059669;
    color: #059669;
}

/* Step-by-step flow for onboarding CTAs */
.gh-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.gh-step {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    border: 1.5px solid #ece7dd;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}
.gh-step:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: #c8e6cf;
    box-shadow: 0 4px 14px rgba(47, 104, 68, 0.10);
}
.gh-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gh-step-active .gh-step-num {
    background: #2f6844;
    color: #fff;
}
.gh-step-done .gh-step-num {
    background: #d1fae5;
    color: #059669;
}
.gh-step-locked .gh-step-num {
    background: #f3f4f6;
    color: #c8c4ba;
}
.gh-step-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gh-step-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
}
.gh-step-desc {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.4;
}
.gh-step-arrow {
    font-size: 18px;
    color: #9ca3af;
    flex-shrink: 0;
    transition: transform 0.15s, color 0.15s;
}
.gh-step:hover:not(:disabled) .gh-step-arrow {
    transform: translateX(3px);
    color: #2f6844;
}
.gh-step-locked {
    opacity: 0.55;
    cursor: not-allowed;
}
.gh-step-locked .gh-step-arrow {
    display: none;
}
.gh-step-done {
    border-color: #d1fae5;
    background: #f6fdf9;
}
.gh-step-done .gh-step-title {
    color: #059669;
}

/* ============================================================
   DASHBOARD ONBOARDING CARD (dh-onb-*) — per-class empty state
   Wider, softer, 2-column with video placeholder + dashboard
   purpose copy. Mirrors the teacher-home welcome modal styling.
   ============================================================ */
.dh-onb-card {
    background: linear-gradient(180deg, #fefdfb 0%, #f8f5ee 100%);
    border-radius: 24px;
    border: 1px solid #ece7dd;
    box-shadow:
        0 24px 64px rgba(40, 30, 10, 0.10),
        0 8px 24px rgba(40, 30, 10, 0.04),
        0 1px 0 rgba(255, 255, 255, 0.8) inset;
    padding: 44px 52px 48px;
    max-width: 940px;
    width: 95%;
    animation: dh-onb-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dh-onb-enter {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Headline */
.dh-onb-headline {
    text-align: center;
    margin-bottom: 32px;
}
.dh-onb-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #2f6844;
    margin-bottom: 8px;
}
.dh-onb-card h2 {
    font-family: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.1;
    color: #1a1a1a;
    margin: 0 0 10px;
    letter-spacing: -0.015em;
}
.dh-onb-card h2 em {
    color: #2f6844;
    font-style: italic;
}
.dh-onb-card .dh-onb-headline p {
    font-size: 15px;
    color: #4b5563;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 540px;
}

/* Body grid */
.dh-onb-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 32px;
    align-items: start;
}
@media (max-width: 820px) {
    .dh-onb-body { grid-template-columns: 1fr; }
}

/* LEFT column — step cards */
.dh-onb-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dh-onb-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1.5px solid #ece7dd;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}
.dh-onb-step:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: #c8e6cf;
    box-shadow: 0 4px 14px rgba(47, 104, 68, 0.10);
}
.dh-onb-step-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dh-onb-step-active .dh-onb-step-num { background: #2f6844; color: #fff; }
.dh-onb-step-done   .dh-onb-step-num { background: #d1fae5; color: #059669; }
.dh-onb-step-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dh-onb-step-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
}
.dh-onb-step-desc {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.4;
}
.dh-onb-step-arrow {
    flex-shrink: 0;
    font-size: 18px;
    color: #9ca3af;
    transition: transform 0.15s, color 0.15s;
}
.dh-onb-step:hover:not(:disabled) .dh-onb-step-arrow { transform: translateX(3px); color: #2f6844; }
.dh-onb-step-locked {
    opacity: 0.55;
    cursor: not-allowed;
}
.dh-onb-step-locked .dh-onb-step-arrow { display: none; }

/* Google connect card */
.dh-onb-gcal {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-top: 6px;
    background: #fff;
    border: 1.5px solid #dbeafe;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}
.dh-onb-gcal:hover {
    transform: translateY(-1px);
    border-color: #93c5fd;
    box-shadow: 0 4px 14px rgba(66, 133, 244, 0.12);
}
.dh-onb-gcal-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #eff6ff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dh-onb-gcal-text {
    flex: 1;
    min-width: 0;
}
.dh-onb-gcal-title {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
}
.dh-onb-gcal-sub {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
    margin-top: 1px;
}
.dh-onb-gcal-arrow {
    flex-shrink: 0;
    font-size: 18px;
    color: #4285f4;
}

/* RIGHT column — video + purpose copy */
.dh-onb-right {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.dh-onb-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #1a1a1a;
    box-shadow: 0 8px 20px rgba(40, 30, 10, 0.12);
}
.dh-onb-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.dh-onb-video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background:
        radial-gradient(circle at 30% 20%, rgba(47, 104, 68, 0.18), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(47, 104, 68, 0.10), transparent 60%),
        linear-gradient(135deg, #f0eee8 0%, #e8e4d8 100%);
}
.dh-onb-video-placeholder svg {
    opacity: 0.85;
    transition: transform 0.2s ease;
}
.dh-onb-video-placeholder:hover svg { transform: scale(1.05); }
.dh-onb-video-caption {
    font-size: 12.5px;
    font-weight: 500;
    color: #6b5d3f;
    letter-spacing: 0.01em;
}

/* Purpose section */
.dh-onb-purpose {
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #ece7dd;
    border-radius: 12px;
}
.dh-onb-purpose-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #2f6844;
    margin-bottom: 12px;
}
.dh-onb-purpose-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dh-onb-purpose-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: #374151;
    line-height: 1.5;
}
.dh-onb-purpose-list li svg {
    flex-shrink: 0;
    margin-top: 2px;
}
.dh-onb-purpose-list strong {
    color: #1a1a1a;
    font-weight: 700;
}

/* ============================================================
   gh-split — shared 2-column empty-state pattern (2026-05-14)
   ------------------------------------------------------------
   Replaces the page-specific gh-cta single-column blocks with
   a tinted left nav of next-step tabs + a right detail pane
   that swaps when a tab is clicked. Visual language mirrors
   the teacher-home "Next up" modal so the onboarding language
   reads consistently across surfaces.
   ============================================================ */
.gh-split-card {
    /* White card to match the home "Next up" modal — single shared design
       language across onboarding surfaces. Shadow + 1px border give it
       definition against the underlying page. */
    background: #fff;
    border-radius: 14px;
    border: 1px solid #ece7dd;
    box-shadow: 0 12px 60px rgba(0, 0, 0, 0.25);
    /* Padding moves onto each section — hero + body — so the body can
       sit flush with the card edges (no card-within-card border). */
    padding: 0;
    max-width: 960px;
    width: 95%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: gh-cta-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.gh-split-card-dashboard { max-width: 1000px; }

/* Hero is left-aligned (matches home modal) — eyebrow + title + sub stack
   on the left edge of the card. */
.gh-split-hero {
    text-align: left;
    padding: 20px 28px 18px;
    margin-bottom: 0;
}
.gh-split-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #2f6844;
    margin-bottom: 8px;
}
.gh-split-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.18;
    color: #0f172a;
    margin: 6px 0 10px;
    letter-spacing: 0;
}
.gh-split-title em { color: #2f6844; font-style: italic; }
.gh-split-sub {
    font-size: 14px;
    color: #475569;
    line-height: 1.55;
    margin: 0;
}

/* Two-column body — flush with card edges, single top border separates it
   from the hero. Mirrors the teacher-home "Next up" modal layout (no inner
   card-within-card border). The card's overflow:hidden + border-radius
   round the bottom corners for both children automatically. */
.gh-split-body {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 0;
    border-top: 1px solid #eef2f0;
    flex: 1 1 auto;
    min-height: 0;
}
@media (max-width: 820px) {
    .gh-split-body { grid-template-columns: 1fr; }
}

/* Left nav — tinted cream/green background, vertical button list. Now sits
   flush with the card's bottom-left rounded corner (card's overflow:hidden
   clips the tint), no inner border. */
.gh-split-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 12px;
    background: #f6faf6;
    border-right: 1px solid #e8efe9;
    overflow-y: auto;
    min-height: 0;
}
@media (max-width: 820px) {
    .gh-split-nav {
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid #e8efe9;
    }
}

.gh-split-tab {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: #1f2937;
    transition: background 0.15s, border-color 0.15s, transform 0.08s;
}
.gh-split-tab:hover:not(:disabled) {
    background: #fff;
    border-color: #d6e6dc;
}
.gh-split-tab.is-active {
    background: #fff;
    border-color: #2f6844;
    box-shadow: 0 1px 3px rgba(47, 104, 68, 0.12);
}
.gh-split-tab.is-locked {
    opacity: 0.45;
    cursor: not-allowed;
}
.gh-split-tab-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ecf6ef;
    color: #2f6844;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gh-split-tab.is-active .gh-split-tab-icon {
    background: #2f6844;
    color: #fff;
}
.gh-split-tab.is-done .gh-split-tab-icon {
    background: #d1fae5;
    color: #059669;
}
.gh-split-tab-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.gh-split-tab-label {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.1px;
}
.gh-split-tab-sub {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.35;
}

/* Right detail pane — content swaps based on the active tab. White bg
   reads cleanly against the green-tinted nav on the left. Flex column
   lets the active pane fill the full 380px height so its CTA-row can
   margin-top:auto its way to the bottom-right of the pane. */
.gh-split-detail {
    position: relative;
    padding: 22px 28px 18px;
    overflow-y: auto;
    height: 380px;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.gh-split-pane {
    display: none;
}
.gh-split-pane.is-active {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
}
.gh-split-pane-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #2f6844;
}
.gh-split-pane-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 22px;
    color: #0f172a;
    line-height: 1.2;
}
.gh-split-pane-sub {
    font-size: 13.5px;
    line-height: 1.55;
    color: #475569;
}
.gh-split-pane-cta-row {
    display: flex;
    justify-content: flex-end;
    /* margin-top: auto pins the CTA to the bottom-right of the pane —
       same anchor behaviour as .th-fum-detail-cta-row in the home modal,
       so the button always lives in the same place regardless of how
       much content sits above. */
    margin-top: auto;
    padding-top: 12px;
}
.gh-split-cta {
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #2f6844;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, transform 0.12s, box-shadow 0.2s;
    box-shadow: 0 2px 6px rgba(47, 104, 68, 0.18);
    font-family: inherit;
}
.gh-split-cta:hover {
    background: #264f35;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(47, 104, 68, 0.25);
}

/* Default "overview" pane chrome — video placeholder + purpose list. */
.gh-split-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #1a1a1a;
    box-shadow: 0 6px 16px rgba(40, 30, 10, 0.1);
}
.gh-split-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.gh-split-video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background:
        radial-gradient(circle at 30% 20%, rgba(47, 104, 68, 0.18), transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(47, 104, 68, 0.10), transparent 60%),
        linear-gradient(135deg, #f0eee8 0%, #e8e4d8 100%);
}
.gh-split-video-placeholder svg { opacity: 0.85; transition: transform 0.2s ease; }
.gh-split-video-placeholder:hover svg { transform: scale(1.05); }
.gh-split-video-caption {
    font-size: 12px;
    font-weight: 500;
    color: #6b5d3f;
}
.gh-split-purpose {
    padding: 14px 16px;
    background: #faf8f3;
    border: 1px solid #ece7dd;
    border-radius: 12px;
}
.gh-split-purpose-title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #2f6844;
    margin-bottom: 10px;
}
.gh-split-purpose-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gh-split-purpose-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
}
.gh-split-purpose-list li svg { flex-shrink: 0; margin-top: 2px; color: #2f6844; }
.gh-split-purpose-list strong { color: #1a1a1a; font-weight: 700; }

@media (max-width: 540px) {
    .dh-onb-card { padding: 28px 22px 32px; border-radius: 18px; }
    .dh-onb-card h2 { font-size: 28px; }
}

/* ===== IMPORT STUDENTS MODAL ===== */

.imp-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}
.imp-overlay.active { display: flex; }
.imp-modal {
    background-color: white;
    border-radius: 10px;
    width: 960px;
    max-width: 95vw;
    height: 88vh;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    overflow: hidden;
}
.imp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}
.imp-header-title { font-size: 18px; font-weight: 700; color: #1a1a1a; }
.imp-close-btn {
    width: 32px; height: 32px; border: none; background: none;
    font-size: 20px; color: #999; cursor: pointer; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}
.imp-close-btn:hover { background-color: #f0f0f0; color: #333; }
.imp-header-left { display: flex; align-items: center; gap: 8px; }
.imp-back-btn {
    width: 32px; height: 32px; border: none; background: none;
    font-size: 20px; color: #666; cursor: pointer; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.15s, color 0.15s;
}
.imp-back-btn:hover { background: #f0f0f0; color: #333; }

/* Chooser: Manual vs Import */
.imp-chooser {
    display: flex; align-items: stretch; height: 100%;
    padding: 40px 32px;
}
.imp-chooser-card {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 40px 32px; cursor: pointer; border-radius: 12px;
    transition: background 0.2s, box-shadow 0.2s;
    text-align: center;
}
.imp-chooser-card:hover {
    background: #f0fdf4; box-shadow: 0 0 0 2px #a7f3d0;
}
.imp-chooser-divider {
    width: 1px; background: #e0e0e0; margin: 20px 24px;
    align-self: stretch;
}
.imp-chooser-icon { font-size: 40px; margin-bottom: 16px; }
.imp-chooser-title {
    font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px;
}
.imp-chooser-desc {
    font-size: 13px; color: #666; line-height: 1.5; max-width: 220px;
}

/* Inline CSV mapping (inside modal body) */
.csvm-inner {
    display: flex; flex-direction: column; height: 100%;
    padding: 20px 24px;
}
.csvm-inner .csvm-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 4px; }
.csvm-inner .csvm-desc { font-size: 13px; color: #666; margin: 0 0 16px; }
.csvm-inner .csvm-columns-list { flex: 1; overflow-y: auto; max-height: none; }
.csvm-inner .csvm-import-btn { margin-top: 16px; }
.csvm-inner .csvm-cancel-btn { margin-top: 8px; }

.imp-mode-bar {
    display: flex; background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0; padding: 0 20px; flex-shrink: 0;
}
.imp-mode-btn {
    padding: 10px 16px; font-size: 13px; font-weight: 600; color: #666;
    background: none; border: none; border-bottom: 3px solid transparent;
    cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.imp-mode-btn:hover { color: #333; }
.imp-mode-btn.active { color: #059669; border-bottom-color: #059669; }
.imp-header-right { display: flex; align-items: center; gap: 8px; }
.imp-csv-btn {
    padding: 6px 14px; font-size: 12px; font-weight: 600; color: #374151;
    background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 6px;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.imp-csv-btn:hover { background: #e5e7eb; border-color: #059669; color: #059669; }
.imp-file-banner {
    display: flex; align-items: center; gap: 8px;
    margin: 8px 20px 0; padding: 8px 12px;
    background: #f0fdf4; border: 1px solid #a7f3d0; border-radius: 6px;
    font-size: 12px; color: #059669; flex-shrink: 0;
}
.imp-file-banner-icon { font-weight: 700; font-size: 14px; }
.imp-file-banner-text { flex: 1; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.imp-spinner {
    display: inline-block; width: 14px; height: 14px; border: 2px solid #a7f3d0;
    border-top-color: #059669; border-radius: 50%;
    animation: impSpin 0.8s linear infinite;
}
@keyframes impSpin { to { transform: rotate(360deg); } }

/* AI analyzing loading state */
.imp-load-wrap {
    max-width: 420px; margin: 56px auto 40px; padding: 0 20px; text-align: center;
}
.imp-load-icon {
    font-size: 34px; margin-bottom: 14px;
    animation: impLoadPulse 1.8s ease-in-out infinite;
}
@keyframes impLoadPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.08); opacity: 0.75; }
}
.imp-load-title {
    font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px;
    letter-spacing: 0.1px;
}
.imp-load-status {
    font-size: 12px; color: #666; margin-bottom: 22px;
    min-height: 16px; transition: opacity 0.2s;
}
.imp-load-track {
    position: relative; height: 6px; background: #e5e7eb;
    border-radius: 999px; overflow: hidden;
}
.imp-load-bar {
    position: absolute; top: 0; left: 0; height: 100%; width: 5%;
    background: linear-gradient(90deg, #059669, #10b981);
    border-radius: 999px;
    transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.imp-load-shimmer {
    position: absolute; top: 0; left: 0; height: 100%; width: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: impLoadShimmer 1.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes impLoadShimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.imp-load-steps {
    display: flex; justify-content: space-between; margin-top: 14px;
    font-size: 11px; color: #bbb; gap: 8px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.imp-load-steps span {
    flex: 1; transition: color 0.3s, font-weight 0.3s;
}
.imp-load-steps span.done {
    color: #059669; font-weight: 700;
}
.imp-col-menu {
    background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 6px 0;
    z-index: 100; min-width: 200px; max-height: 360px; overflow-y: auto;
}
.imp-col-menu-item {
    display: block; width: 100%; text-align: left; padding: 8px 16px;
    font-size: 13px; color: #333; background: none; border: none;
    cursor: pointer; transition: background 0.15s;
}
.imp-col-menu-item:hover:not(:disabled) { background: #f0fdf4; color: #059669; }
.imp-col-menu-item.disabled { color: #aaa; cursor: default; }
.imp-col-menu-divider { height: 1px; background: #e0e0e0; margin: 4px 0; }

/* Column Mapping Step */
.imp-mapping-step {
    display: flex; flex-direction: column; height: 100%;
    overflow: hidden;
}
.imp-mapping-header {
    padding: 16px 20px 12px; border-bottom: 1px solid #e0e0e0; flex-shrink: 0;
}
.imp-mapping-title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.imp-mapping-desc { font-size: 12px; color: #666; line-height: 1.5; }
.imp-mapping-table {
    flex: 1; overflow-y: auto; padding: 0;
}
.imp-mapping-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 20px; border-bottom: 1px solid #f0f0f0;
}
.imp-mapping-row-header {
    background: #f8f9fa; border-bottom: 1px solid #e0e0e0;
    position: sticky; top: 0; z-index: 1;
}
.imp-mapping-row-header span {
    font-size: 11px; font-weight: 700; color: #666;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.imp-mapping-col-csv { flex: 1; font-size: 13px; font-weight: 600; color: #333; }
.imp-mapping-col-sample {
    flex: 1.5; font-size: 12px; color: #888;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.imp-mapping-col-target { flex: 1.2; }
.imp-mapping-select {
    width: 100%; padding: 6px 8px; font-size: 12px;
    border: 1px solid #d1d5db; border-radius: 6px;
    background: #fff; color: #333; cursor: pointer;
    transition: border-color 0.2s;
}
.imp-mapping-select:focus { border-color: #059669; outline: none; }
.imp-mapping-actions {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 12px 20px; border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
}
.imp-file-banner-remove {
    background: none; border: none; color: #999; font-size: 11px;
    cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.imp-file-banner-remove:hover { background: #fee2e2; color: #dc2626; }
.imp-body { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.imp-panel { display: none; flex-direction: column; height: 100%; }
.imp-panel.active { display: flex; }
.imp-section-desc { font-size: 13px; color: #666; flex-shrink: 0; }
.imp-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px; flex-shrink: 0; gap: 12px;
}
.imp-toolbar-actions { display: flex; gap: 6px; flex-shrink: 0; }
.imp-toolbar-btn {
    padding: 5px 12px; font-size: 11px; font-weight: 600; color: #374151;
    background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 5px;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.imp-toolbar-btn:hover { background: #e5e7eb; border-color: #059669; color: #059669; }
.imp-row-header {
    display: flex; align-items: center; padding: 8px 20px;
    background-color: #f8f9fa; border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0; gap: 8px;
}
.imp-col { font-size: 11px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }
.imp-col-num { width: 24px; text-align: center; }
.imp-col-first { flex: 1; }
.imp-col-last { flex: 1; }
.imp-col-notes { flex: 1.5; }
.imp-col-custom {
    flex: 1; display: flex; align-items: center; gap: 4px;
}
.imp-col-remove {
    background: none; border: none; color: #ccc; font-size: 12px;
    cursor: pointer; padding: 0 2px; line-height: 1;
}
.imp-col-remove:hover { color: #dc2626; }
.imp-input-custom { flex: 1; }
.imp-col-attach { width: 36px; text-align: center; }
.imp-col-action { width: 28px; }
.imp-rows { flex: 1; overflow-y: auto; padding: 4px 0; }
.imp-row {
    display: flex; align-items: center; padding: 6px 20px;
    gap: 8px; border-bottom: 1px solid #f0f0f0;
}
.imp-row:last-child { border-bottom: none; }
.imp-row-num { width: 24px; text-align: center; font-size: 12px; color: #999; flex-shrink: 0; }
.imp-input {
    padding: 5px 8px; font-size: 13px; border: 1px solid #e0e0e0;
    border-radius: 4px; background-color: #f8f9fa; outline: none;
    transition: border-color 0.2s; flex: 1; min-width: 0;
}
.imp-input:focus { border-color: #059669; background-color: white; }
.imp-attach-btn {
    width: 30px; height: 30px; border: 1px solid #e0e0e0; background: white;
    border-radius: 4px; cursor: pointer; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: border-color 0.15s, background-color 0.15s; color: #999;
}
.imp-attach-btn:hover { border-color: #059669; background-color: #f0fdf4; color: #059669; }
.imp-attach-btn.has-file { border-color: #059669; background-color: #ecfdf5; color: #059669; }
.imp-remove-btn {
    width: 24px; height: 24px; border: none; background: none; color: #ccc;
    font-size: 16px; cursor: pointer; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: color 0.15s, background-color 0.15s;
}
.imp-remove-btn:hover { color: #dc2626; background-color: #fef2f2; }
.imp-add-row-bar { padding: 10px 20px; flex-shrink: 0; }
.imp-add-row-btn {
    padding: 6px 14px; font-size: 12px; font-weight: 600; color: #059669;
    background-color: transparent; border: 1px dashed #059669;
    border-radius: 6px; cursor: pointer; transition: background-color 0.2s;
}
.imp-add-row-btn:hover { background-color: #ecfdf5; }
.imp-dropzone {
    border: 2px dashed #d1d5db; border-radius: 8px; padding: 40px 20px;
    text-align: center; cursor: pointer; margin: 16px 20px;
    transition: border-color 0.2s, background-color 0.2s;
}
.imp-dropzone:hover { border-color: #9ca3af; }
.imp-dropzone.dragover { border-color: #059669; background-color: #f0fdf4; }
.imp-dropzone-icon { font-size: 32px; margin-bottom: 8px; }
.imp-dropzone-text { font-size: 14px; color: #333; font-weight: 500; }
.imp-dropzone-hint { font-size: 12px; color: #999; margin-top: 4px; }
.imp-file-error { font-size: 12px; color: #dc2626; padding: 4px 20px 0; display: none; }
.imp-file-info {
    display: flex; align-items: center; padding: 10px 20px;
    background-color: #f0fdf4; border-bottom: 1px solid #d1fae5;
    gap: 10px; flex-shrink: 0;
}
.imp-file-name { font-size: 13px; color: #333; font-weight: 500; flex: 1; }
.imp-file-remove { font-size: 12px; color: #dc2626; background: none; border: none; cursor: pointer; font-weight: 500; }
.imp-file-remove:hover { text-decoration: underline; }
.imp-word-notice {
    font-size: 12px; color: #b45309; background-color: #fffbeb;
    padding: 8px 20px; border-bottom: 1px solid #fde68a; flex-shrink: 0;
}
.imp-preview { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.imp-preview-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 20px; flex-shrink: 0;
}
.imp-preview-count { font-size: 13px; font-weight: 600; color: #333; }
.imp-preview-hint { font-size: 12px; color: #999; }
.imp-footer {
    padding: 12px 20px; border-top: 1px solid #e0e0e0;
    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}
.imp-footer-count { font-size: 12px; color: #999; }
.imp-footer-actions { display: flex; gap: 8px; }
.imp-btn-cancel {
    padding: 7px 16px; font-size: 12px; font-weight: 600; color: #666;
    background-color: white; border: 1px solid #e0e0e0; border-radius: 6px;
    cursor: pointer; transition: background-color 0.2s;
}
.imp-btn-cancel:hover { background-color: #f8f9fa; }
.imp-btn-primary {
    padding: 7px 20px; font-size: 12px; font-weight: 600; color: white;
    background-color: #059669; border: none; border-radius: 6px;
    cursor: pointer; transition: background-color 0.2s;
}
.imp-btn-primary:hover { background-color: #047857; }
.imp-btn-primary:disabled { background-color: #d1d5db; cursor: not-allowed; }

/* ========== CSV MAPPING STYLES ========== */
.csvm-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 4px; }
.csvm-desc { font-size: 13px; color: #666; margin: 0 0 16px; }
.csvm-toggle-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: #f8f9fa; border-radius: 8px; margin-bottom: 16px;
}
.csvm-toggle {
    position: relative; width: 36px; height: 20px; flex-shrink: 0;
}
.csvm-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.csvm-toggle-slider {
    position: absolute; inset: 0; background: #ccc; border-radius: 20px;
    cursor: pointer; transition: background 0.2s;
}
.csvm-toggle-slider::before {
    content: ''; position: absolute; left: 2px; top: 2px;
    width: 16px; height: 16px; background: #fff; border-radius: 50%;
    transition: transform 0.2s;
}
.csvm-toggle input:checked + .csvm-toggle-slider { background: #059669; }
.csvm-toggle input:checked + .csvm-toggle-slider::before { transform: translateX(16px); }
.csvm-toggle-label { font-size: 13px; font-weight: 500; color: #333; }
.csvm-columns-header {
    display: flex; align-items: center; padding: 0 4px 8px;
    border-bottom: 1px solid #e0e0e0;
}
.csvm-col-left {
    flex: 1; font-size: 11px; font-weight: 700; color: #666;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.csvm-col-right {
    flex: 1; font-size: 11px; font-weight: 700; color: #666;
    text-transform: uppercase; letter-spacing: 0.5px; text-align: right;
}
.csvm-columns-list {
    flex: 1; overflow-y: auto; margin: 0 -4px; padding: 0 4px;
    max-height: 340px;
}
.csvm-column-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid #f0f0f0;
}
.csvm-column-row:last-child { border-bottom: none; }
.csvm-col-name {
    flex: 1; font-size: 13px; font-weight: 600; color: #333;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.csvm-col-arrow { font-size: 14px; color: #bbb; flex-shrink: 0; }
.csvm-select {
    padding: 7px 10px; font-size: 13px;
    border: 1px solid #d1d5db; border-radius: 6px;
    background: #fff; color: #333; cursor: pointer;
    transition: border-color 0.2s; appearance: auto;
}
.csvm-select { width: 100%; }
.csvm-select:focus { border-color: #059669; outline: none; }
.csvm-col-target {
    flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.csvm-custom-label {
    padding: 6px 10px; font-size: 12px; border: 1px solid #e5c07b;
    border-radius: 6px; background: #fffbeb; color: #333;
    transition: border-color 0.2s; width: 100%; box-sizing: border-box;
}
.csvm-custom-label:focus { border-color: #f59e0b; outline: none; background: #fff; }
.csvm-custom-label::placeholder { color: #999; }
.csvm-import-btn {
    display: block; width: 100%; padding: 11px 20px; margin-top: 16px;
    font-size: 14px; font-weight: 600; color: #fff; background: #059669;
    border: none; border-radius: 8px; cursor: pointer;
    transition: background 0.2s;
}
.csvm-import-btn:hover { background: #047857; }
.csvm-cancel-btn {
    display: block; width: 100%; padding: 9px 20px; margin-top: 8px;
    font-size: 13px; font-weight: 500; color: #666; background: none;
    border: 1px solid #e0e0e0; border-radius: 8px; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.csvm-cancel-btn:hover { background: #f8f9fa; color: #333; }

/* Notebook full-bleed override */
.gh-wrapper.gh-notebook {
    margin: -20px;
    width: calc(100% + 40px);
    max-width: none;
}

/* ========== GHOST PRIMITIVES ========== */

.gh-bar {
    background-color: #ddd;
    border-radius: 4px;
    height: 10px;
}
.gh-block {
    background-color: #e8e8e8;
    border-radius: 6px;
}
.gh-panel {
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}
.gh-panel-header {
    background-color: #f0f0f0;
    border-bottom: 2px solid #e0e0e0;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.gh-circle {
    border-radius: 50%;
    background-color: #ddd;
}
.gh-btn {
    background-color: #e4e4e4;
    border-radius: 4px;
    height: 30px;
    display: inline-block;
}
.gh-table-row {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    gap: 16px;
}
.gh-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.gh-toggle {
    display: flex;
    flex-shrink: 0;
    border-bottom: 2px solid #e0e0e0;
}
.gh-toggle-btn {
    flex: 1;
    padding: 12px 10px;
    background-color: #f5f5f5;
    border: none;
    text-align: center;
}
.gh-toggle-btn:first-child {
    border-right: 1px solid #e0e0e0;
}

/* ===== REAL ROSTER TABLE ===== */
.roster-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;
    width: 100%;
    max-width: 1200px;
}
.roster-title-row h1 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: -0.3px;
}
.roster-title-row p {
    font-size: 13px;
    color: #666;
    margin: 2px 0 0;
}
.roster-content-wrapper {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
}
.roster-container {
    background-color: white;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    overflow: auto;
    flex: 1;
    min-height: 0;
}
.roster-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.roster-table thead {
    border-bottom: 2px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 10;
}
.roster-table th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #f8f9fa;
}
/* Checkbox column (always first) */
.roster-table .roster-check-col {
    padding-left: 14px;
}

.roster-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.15s;
}
.roster-table tbody tr:hover { background-color: #f8fafb; }
.roster-table tbody tr:last-child { border-bottom: none; }
.roster-table td {
    padding: 14px 16px;
    font-size: 13px;
    color: #333;
}
.roster-table td.grade-high { color: #059669; }
.roster-table td.grade-mid { color: #d97706; }
.roster-table td.grade-low { color: #dc2626; }

/* Roster actions */
.roster-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    position: relative;
}
.add-student-btn {
    padding: 7px 16px;
    background-color: #059669;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}
.add-student-btn:hover { background-color: #047857; }
.roster-update-btn {
    padding: 7px 16px; background: #3b82f6; color: white; border: none;
    border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background 0.2s;
}
.roster-update-btn:hover { background: #2563eb; }
.roster-check-col { width: 32px; text-align: center !important; }
.roster-check {
    width: 15px; height: 15px; cursor: pointer; accent-color: #059669;
}

/* Accommodation badges */
.accom-badge {
    display: inline-block;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 3px;
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.accom-badge-iep { background: #fef3c7; color: #92400e; }
.accom-badge-504 { background: #dbeafe; color: #1e40af; }
.accom-badge-ell { background: #e0e7ff; color: #3730a3; }

/* Per-student row menu */
.student-row-menu { position: relative; }
.student-row-menu-btn {
    width: 28px;
    height: 28px;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #999;
    transition: all 0.15s;
    padding: 0;
}
.student-row-menu-btn:hover {
    background-color: #f0f0f0;
    border-color: #e0e0e0;
    color: #333;
}
.student-row-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    display: none;
    z-index: 100;
    min-width: 200px;
    padding: 4px 0;
}
.student-row-menu-dropdown.open { display: block; }
.student-row-menu-label {
    padding: 6px 14px 4px;
    font-size: 10px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.student-row-menu-item {
    padding: 8px 14px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: background-color 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.student-row-menu-item:hover { background-color: #f8f9fa; }
.student-row-menu-item:last-child { border-radius: 0 0 8px 8px; }
.student-row-menu-icon {
    font-size: 14px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.student-row-menu-divider {
    height: 1px;
    background-color: #f0f0f0;
    margin: 4px 0;
}
.roster-loading {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    font-size: 14px;
}

/* Clickable student names */
.roster-table td .student-name-clickable,
.student-name-clickable {
    color: #1a1a1a;
    cursor: pointer;
    font-family: 'Calibri', 'Arial', sans-serif;
    font-weight: 600;
    font-size: 14px;
    transition: color 0.15s;
}
.roster-table td .student-name-clickable:hover,
.student-name-clickable:hover {
    color: #059669;
    text-decoration: underline;
}

/* ===== Roster Settings Button ===== */
.roster-settings-wrap {
    position: relative;
}
.roster-settings-btn {
    width: 34px;
    height: 34px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
}
.roster-settings-btn:hover {
    background: #f8f9fa;
    border-color: #ccc;
    color: #333;
}
.roster-settings-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    display: none;
    z-index: 200;
    min-width: 160px;
    padding: 4px 0;
}
.roster-settings-dropdown.open { display: block; }
.roster-settings-item {
    padding: 8px 14px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s;
}
.roster-settings-item:hover { background: #f8f9fa; }
.roster-settings-icon {
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* ===== Edit View Panel (overlay) ===== */
.rv-edit-view-panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    padding: 16px;
    width: 280px;
    z-index: 300;
}
.rv-edit-view-panel.open { display: block; }
.rv-edit-view-header {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 2px;
}
.rv-edit-view-desc {
    font-size: 11px;
    color: #999;
    margin-bottom: 10px;
}
.rv-edit-list {
    max-height: 340px;
    overflow-y: auto;
}
.rv-edit-item {
    display: flex;
    align-items: center;
    padding: 8px 4px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    color: #333;
    cursor: grab;
    border-radius: 4px;
    transition: background 0.15s;
    gap: 8px;
}
.rv-edit-item:last-child { border-bottom: none; }
.rv-edit-item:hover { background: #f8f9fa; }
.rv-edit-item.rv-dragging {
    opacity: 0.4;
    background: #e0f2fe;
}
.rv-edit-item.rv-drag-over {
    border-top: 2px solid #059669;
}
.rv-edit-drag {
    color: #ccc;
    font-size: 14px;
    cursor: grab;
    flex-shrink: 0;
    user-select: none;
}
.rv-edit-label {
    flex: 1;
    user-select: none;
}
.rv-edit-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #059669;
    cursor: pointer;
    flex-shrink: 0;
}

/* ===== Dynamic Column Styles ===== */
.rv-th {
    position: relative;
    user-select: none;
}
.rv-th-number { width: 50px; text-align: center; }
.rv-th-name { min-width: 140px; }
.rv-th-email { min-width: 120px; }
.rv-th-grade { width: 90px; text-align: center; }
.rv-th-attendance { width: 100px; text-align: center; }
.rv-th-accommodations { width: 160px; text-align: center; }
.rv-th-notebook { width: 50px; text-align: center; }
.rv-th-message { width: 80px; text-align: center; }
.rv-th-menu { width: 48px; text-align: center; }

.rv-col-number { text-align: center; color: #999; font-size: 12px; font-weight: 500; }
.rv-col-name { font-family: 'Calibri', 'Arial', sans-serif; }
.rv-col-email { font-size: 13px; color: #555; }
.rv-col-grade { font-family: 'Courier New', monospace; font-size: 13px; font-weight: 600; text-align: center; }
.rv-col-attendance { font-family: 'Courier New', monospace; font-size: 13px; font-weight: 600; text-align: center; }
.rv-col-accommodations { text-align: center; }
.rv-col-notebook { text-align: center; }
.rv-col-message { text-align: center; }
.rv-col-menu { text-align: center; }

.rv-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 16px;
    color: #666;
    transition: all 0.15s;
}
.rv-link-btn:hover {
    background: #f0f0f0;
    color: #333;
}
.rv-col-pf { font-size: 13px; color: #555; }

/* ===== Column Resize Handle ===== */
.rv-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    background: transparent;
    z-index: 11;
}
.rv-resize-handle:hover,
.rv-resize-handle:active {
    background: #059669;
    opacity: 0.4;
}

/* ===== Update Students Manual View ===== */
.upd-col-name {
    min-width: 160px;
    flex: 1;
}
.upd-name-readonly {
    font-weight: 600;
    color: #1a1a1a;
    font-family: 'Calibri', 'Arial', sans-serif;
    font-size: 13px;
}
.upd-col-data {
    min-width: 120px;
    flex: 1;
    position: relative;
}
.upd-col-remove {
    background: none;
    border: none;
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
    margin-left: 4px;
    padding: 0 2px;
    line-height: 1;
}
.upd-col-remove:hover { color: #dc2626; }
.upd-data-input {
    width: 100%;
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}
.upd-data-input:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 2px rgba(5,150,105,0.1);
}
.upd-row {
    align-items: center;
}
.upd-match-banner {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    color: #92400e;
    margin-bottom: 8px;
}
.upd-match-icon {
    margin-right: 4px;
}

/* Inline edit mode */
.ph-edit-input {
    padding: 5px 8px;
    font-size: 13px;
    border: 1px solid #059669;
    border-radius: 4px;
    background-color: white;
    outline: none;
    width: 100%;
}
.ph-edit-save {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    background-color: #059669;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 6px;
    transition: background-color 0.15s;
}
.ph-edit-save:hover { background-color: #047857; }
.ph-edit-cancel {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    background-color: white;
    color: #666;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
.ph-edit-cancel:hover { border-color: #999; color: #333; }
tr.editing { background-color: #f0fdf4 !important; }

/* ===== POPULATED DASHBOARD ===== */
.title-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-shrink: 0;
    width: 100%;
    max-width: 1200px;
}
.page-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    padding: 0;
    letter-spacing: -0.3px;
}
.ph-dashboard {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.ph-dash-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 12px;
}

/* Lesson banner */
.ph-lesson-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px;
    flex-shrink: 0;
}
.ph-banner-date {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ph-banner-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 2px 0;
}
.ph-banner-meta {
    font-size: 11px;
    color: #999;
}
.ph-banner-right {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ph-banner-btn {
    padding: 8px 18px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background-color 0.15s;
}
.ph-banner-btn-primary {
    background: #059669;
    color: white;
}
.ph-banner-btn-primary:hover { background: #047857; }
.ph-banner-btn-secondary {
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
}
.ph-banner-btn-secondary:hover { border-color: #059669; color: #059669; }

/* Lesson banner with selector */
.ph-banner-has-lesson .ph-banner-date { color: #059669; }
.ph-banner-selector { cursor: pointer; position: relative; }
.ph-banner-selector:hover .ph-banner-title { color: #059669; }
.ph-banner-chevron { font-size: 10px; color: #999; transition: transform 0.2s; display: inline-block; margin-left: 4px; }
.ph-banner-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 280px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    max-height: 240px;
    overflow-y: auto;
}
.ph-banner-dropdown.open { display: block; }
.ph-banner-dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}
.ph-banner-dd-item:hover { background: #f8f9fa; }
.ph-banner-dd-item.active { background: #f0fdf4; font-weight: 600; }
.ph-banner-dd-item:last-child { border-bottom: none; }
.ph-banner-dd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ph-banner-dd-date { margin-left: auto; font-size: 11px; color: #999; }

/* Lesson nav arrows */
.ph-banner-nav-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ph-banner-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: white;
    color: #374151;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
    padding: 0;
}
.ph-banner-nav-btn:hover:not(.disabled) { border-color: #059669; color: #059669; background: #f0fdf4; }
.ph-banner-nav-btn.disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* Today button */
.ph-banner-btn-today {
    background: #6366f1;
    color: white;
    border: none;
}
.ph-banner-btn-today:hover { background: #4f46e5; }

/* Finalize button */
.ph-banner-btn-finalize {
    background: #059669;
    color: white;
    border: none;
}
.ph-banner-btn-finalize:hover { background: #047857; }
/* Phase 2 — post-finalize past-tense button, clickable, opens read-only modal */
.ph-banner-btn-finalized {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
}
.ph-banner-btn-finalized:hover { background: #e2e8f0; border-color: #94a3b8; }

/* Live badge in tab button */
.ph-live-badge {
    font-size: 8px;
    font-weight: 700;
    color: #059669;
    background: #dcfce7;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

/* ===== SUBMISSIONS TABLE (aligned with attendance rows) ===== */
.ph-sub-scroll-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
}
.ph-sub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ph-sub-th {
    background: #fafbfc;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 700;
    padding: 0 14px;
    height: 48px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 1;
    vertical-align: middle;
}
.ph-sub-th-student {
    text-align: left;
    color: #374151;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ph-sub-th-asgn {
    text-align: center;
    color: #6b7280;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0 6px;
}
.ph-sub-row {
    border-bottom: 1px solid #f0f0f0;
}
.ph-sub-row:hover { background: #fafbfc; }
.ph-sub-td-name {
    padding: 10px 14px;
    font-weight: 600;
    font-size: 13px;
    color: #1a1a1a;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 48px;
    border-left: 3px solid transparent;
}
.ph-sub-td-name:hover { color: #059669; }
.ph-sub-td-score {
    text-align: center;
    padding: 8px 6px;
    height: 48px;
    min-height: 48px;
}
.ph-sub-score-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.ph-sub-score {
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}
.ph-sub-time {
    font-size: 9px;
    color: #999;
}
.ph-sub-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-top: 2px solid #e0e0e0;
    background: #fafbfc;
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    flex-shrink: 0;
}

/* ===== FINALIZE MODAL ===== */
.ph-finalize-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ph-finalize-modal {
    background: white;
    border-radius: 12px;
    width: 480px;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.ph-finalize-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #e5e7eb;
}
.ph-finalize-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}
.ph-finalize-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin-top: 2px;
}
.ph-finalize-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #9ca3af;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.ph-finalize-close:hover { color: #374151; }
.ph-finalize-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}
.ph-finalize-note {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.6;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 20px;
}
.ph-finalize-section {
    margin-bottom: 20px;
}
.ph-finalize-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.ph-finalize-section-desc {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 8px;
}
.ph-finalize-action-btn {
    padding: 8px 16px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}
.ph-finalize-action-btn:hover {
    border-color: #059669;
    color: #059669;
}
.ph-finalize-absent-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ph-finalize-absent-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    font-size: 13px;
    color: #374151;
}
.ph-finalize-select {
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    color: #374151;
    background: white;
}
.ph-finalize-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}
.ph-finalize-toggle-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #059669;
}
.ph-finalize-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
}
.ph-finalize-cancel {
    padding: 8px 20px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
}
.ph-finalize-cancel:hover { background: #f9fafb; }
.ph-finalize-confirm {
    padding: 8px 24px;
    background: #059669;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    color: white;
    cursor: pointer;
}
.ph-finalize-confirm:hover { background: #047857; }

/* Finalize success flash */
.ph-finalize-flash {
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    background: #059669;
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 6px;
    white-space: nowrap;
    animation: phFlashIn 0.3s ease, phFlashOut 0.3s ease 2.5s forwards;
    z-index: 10;
}
@keyframes phFlashIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes phFlashOut { from { opacity: 1; } to { opacity: 0; } }

/* Live Monitor button */
.ph-banner-btn-monitor {
    background: #1e293b;
    color: white;
    border: 1px solid #334155;
}
.ph-banner-btn-monitor:hover {
    background: #334155;
}

/* Live Monitor button in title row (top right) */
.ph-title-monitor-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: #1e293b;
    color: white;
    border: 1px solid #334155;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background-color 0.15s;
}
.ph-title-monitor-btn:hover { background: #334155; }
.ph-title-monitor-btn svg { flex-shrink: 0; }

/* Settings + monitor sit side-by-side in the title row */
.ph-title-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Gear icon next to Live Monitor — quiet, icon-only */
.ph-title-settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: white;
    color: #4b5563;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.ph-title-settings-btn:hover {
    background: #f9fafb;
    color: #1e293b;
    border-color: #9ca3af;
}
.ph-title-settings-btn svg { flex-shrink: 0; }

/* Dashboard settings modal (stub) */
.ph-ds-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.ph-ds-modal {
    background: white;
    border-radius: 12px;
    width: 460px;
    max-width: 92vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
}
.ph-ds-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #eef0f2;
}
.ph-ds-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.2px;
}
.ph-ds-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
    padding: 0 4px;
}
.ph-ds-close:hover { color: #1a1a1a; }
.ph-ds-body { padding: 22px; }
.ph-ds-empty {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.55;
    margin: 0;
}

/* Change Lesson button */
.ph-banner-btn-change {
    background: #6366f1;
    color: white;
    border: none;
}
.ph-banner-btn-change:hover { background: #4f46e5; }

/* Finalized pill (replaces Finalize button once lesson is finalized) */
.ph-banner-finalized-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: #f0fdf4;
    color: #047857;
    border: 1px solid #a7f3d0;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* State chips in banner meta line */
.ph-banner-state-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.ph-banner-state-chip.ph-chip-upcoming {
    background: #eef2ff;
    color: #4f46e5;
}
.ph-banner-state-chip.ph-chip-today {
    background: #ecf6ef;
    color: #2a5d3a;
}

/* ===== CHANGE LESSON MODAL ===== */
.cl-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 3000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.cl-container {
    background: white;
    border-radius: 10px;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 60px);
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.cl-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 18px 22px 14px 22px;
    border-bottom: 1px solid #e5e7eb;
}
.cl-header-text { flex: 1; min-width: 0; }
.cl-title { font-size: 18px; font-weight: 700; color: #111827; }
.cl-subtitle { font-size: 13px; color: #6b7280; margin-top: 4px; }
.cl-close-btn {
    background: none; border: none;
    font-size: 28px; line-height: 1;
    color: #9ca3af; cursor: pointer;
    padding: 0 4px; margin-left: 12px;
}
.cl-close-btn:hover { color: #111827; }

.cl-warning {
    display: flex; gap: 10px;
    margin: 14px 22px 0 22px;
    padding: 10px 12px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    font-size: 12px;
    color: #78350f;
    line-height: 1.4;
}
.cl-warning-icon { font-size: 16px; flex-shrink: 0; line-height: 1.2; }

.cl-body {
    padding: 12px 22px 22px 22px;
    overflow-y: auto;
}
.cl-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-top: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.cl-row:hover { border-color: #6366f1; background: #f5f6ff; }
.cl-row-current { cursor: default; background: #f9fafb; border-style: dashed; }
.cl-row-current:hover { border-color: #e5e7eb; background: #f9fafb; }
.cl-row-main { display: flex; gap: 12px; flex: 1; min-width: 0; align-items: center; }
.cl-row-num {
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 50%; background: #eef2ff; color: #4f46e5;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.cl-row-current .cl-row-num { background: #ecfdf5; color: #047857; }
.cl-row-meta { min-width: 0; flex: 1; }
.cl-row-title { font-size: 14px; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; }
.cl-row-sub { margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cl-row-date {
    font-size: 11px; color: #6b7280;
}
.cl-row-date-empty { font-style: italic; color: #9ca3af; }
.cl-row-status {
    font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: 10px;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.cl-status-finalized { background: #dcfce7; color: #166534; }
.cl-status-completed { background: #dbeafe; color: #1e40af; }
.cl-row-current-chip {
    font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: 10px;
    background: #fee2e2; color: #991b1b;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.cl-row-arrow { font-size: 20px; color: #9ca3af; flex-shrink: 0; }

.cl-empty {
    padding: 24px; text-align: center; color: #9ca3af; font-size: 13px;
}

/* Unit grouping in the non-destructive lesson picker */
.cl-unit-group { margin-bottom: 14px; }
.cl-unit-group:last-child { margin-bottom: 0; }
.cl-unit-head {
    font-size: 11px; font-weight: 700; color: #6b7280; letter-spacing: 0.6px;
    text-transform: uppercase; padding: 0 4px 6px;
    border-bottom: 1px solid #e5e7eb; margin-bottom: 8px;
}

/* Confirmation panel */
.cl-confirm {
    padding: 22px;
}
.cl-confirm-title { font-size: 16px; font-weight: 700; color: #111827; }
.cl-confirm-desc { font-size: 13px; color: #374151; margin-top: 6px; line-height: 1.5; }
.cl-confirm-list {
    margin: 14px 0 0 0;
    padding-left: 20px;
    font-size: 13px; color: #374151; line-height: 1.7;
}
.cl-confirm-list li { margin-bottom: 4px; }
.cl-confirm-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 18px;
}
.cl-btn {
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.cl-btn-ghost { background: white; color: #374151; border-color: #d1d5db; }
.cl-btn-ghost:hover { border-color: #9ca3af; }
.cl-btn-danger { background: #dc2626; color: white; }
.cl-btn-danger:hover { background: #b91c1c; }
.cl-btn-danger:disabled { background: #fca5a5; cursor: wait; }

/* ===== LIVE MONITOR ===== */
.lm-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
    background: #f1f5f9;
}

.lm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #1e293b;
    color: white;
    flex-shrink: 0;
}
.lm-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lm-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.lm-back-btn {
    background: none;
    border: 1px solid #475569;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lm-back-btn:hover {
    background: #334155;
}
.lm-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lm-title-icon {
    font-size: 18px;
}
.lm-title-text {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.lm-title-class {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 400;
}
.lm-status-bar {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.lm-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.lm-dot-connected {
    background: #22c55e;
    box-shadow: 0 0 4px #22c55e;
}
.lm-status-counts {
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    gap: 4px;
}
.lm-count-typing { color: #22c55e; }
.lm-count-idle { color: #facc15; }
.lm-count-away { color: #f97316; }
.lm-count-offline { color: #64748b; }

/* Grid */
.lm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

/* Student Card */
.lm-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 120px;
}
.lm-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.lm-card.lm-status-typing {
    border-color: #22c55e;
    animation: lm-pulse-green 2s infinite;
}
.lm-card.lm-status-idle {
    border-color: #facc15;
}
.lm-card.lm-status-away {
    border-color: #f97316;
}
.lm-card.lm-status-offline {
    border-color: #e2e8f0;
    opacity: 0.6;
}

@keyframes lm-pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.2); }
    50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15); }
}

.lm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.lm-card-name {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}
.lm-card-status-badge {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
}
.lm-status-typing .lm-card-status-badge { color: #16a34a; }
.lm-status-away .lm-card-status-badge { color: #ea580c; }

.lm-card-tab {
    font-size: 11px;
    font-weight: 600;
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.lm-card-preview {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.lm-card-offline-msg {
    color: #94a3b8;
    font-style: italic;
}
.lm-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 4px;
    border-top: 1px solid #f1f5f9;
}
.lm-card-words {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
}
.lm-card-dots {
    display: flex;
    gap: 4px;
}
.lm-section-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Focus View */
.lm-focus {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    padding: 16px 20px;
    flex: 1;
    overflow-y: auto;
}
.lm-focus-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lm-focus-right {
    display: flex;
    flex-direction: column;
}
.lm-focus-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
}
.lm-focus-card-title {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.lm-focus-tab {
    font-size: 18px;
    font-weight: 700;
    color: #6366f1;
}
.lm-focus-total {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}
.lm-focus-wc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid #f1f5f9;
}
.lm-focus-wc-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.lm-focus-wc-label {
    font-size: 13px;
    color: #374151;
    flex: 1;
}
.lm-focus-wc-count {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}
.lm-focus-wc-done {
    color: #22c55e;
    font-weight: 700;
    font-size: 14px;
}
.lm-focus-status {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}
.lm-focus-status.lm-status-typing {
    background: #dcfce7;
    color: #16a34a;
}
.lm-focus-status.lm-status-idle {
    background: #fef9c3;
    color: #a16207;
}
.lm-focus-status.lm-status-away {
    background: #ffedd5;
    color: #ea580c;
}
.lm-focus-status.lm-status-offline {
    background: #f1f5f9;
    color: #64748b;
}
.lm-focus-preview-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.lm-focus-preview-text {
    font-size: 15px;
    line-height: 1.7;
    color: #374151;
    flex: 1;
    white-space: pre-wrap;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    min-height: 200px;
}

/* Loading state inside the dashboard portal hosts */
.ph-overview-loading { padding: 40px; text-align: center; color: #999; font-size: 13px; }

/* ===== Lesson Plan sub-toggle (2026-05-25 portal) =====
   Mirrors .nb-plan-subtabs from the notebook teacher view, which itself
   mirrors the lesson-modal's Lesson Plan / Student View pills. NO
   completion checkboxes here — those live in the modal sub-tab pills
   only. Visual rhythm matches the notebook so the portal feels
   consistent across dashboard / notebook / modal. */
.ph-plan-subtabs {
    display: flex;
    gap: 6px;
    background-color: #f4efe7;
    border: 1px solid #e0d9cc;
    border-radius: 8px;
    padding: 3px;
    margin: 12px 12px 10px;
}
.ph-plan-subtab {
    flex: 1;
    padding: 7px 12px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7a6d57;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: transparent;
    text-align: center;
    transition: all 0.18s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
}
.ph-plan-subtab:hover { background-color: rgba(255,255,255,0.6); color: #4d4530; }
.ph-plan-subtab.active {
    background-color: #fff;
    color: #2a5d3a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.ph-plan-subbanner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 6px;
    margin: 0 12px 12px;
    font-size: 11.5px;
    font-weight: 600;
}
.ph-plan-subbanner-icon { font-size: 13px; line-height: 1; }
.ph-plan-subbanner-text { line-height: 1.4; }
.ph-plan-subbanner-private {
    background-color: #fef6e7;
    border: 1px solid #f6dca0;
    color: #8c5a1a;
}
.ph-plan-subbanner-public {
    background-color: #ecf6ef;
    border: 1px solid #c7e2cd;
    color: #2a5d3a;
}

/* Portal-host wrapper + the two sub-panes. Only the active one is
   visible (display swap, not unmount, so renderer state persists).
   Parent .ph-tab-wrapper is a flex column with overflow:hidden, so the
   wrap itself is the scrollable area (flex:1 + min-height:0 +
   overflow-y:auto). Without min-height:0 the flex item refuses to
   shrink past its content and the scrollbar never engages. */
.ph-plan-portal-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 12px 16px;
}
.ph-plan-subpane { display: none; }
.ph-plan-subpane.ph-plan-subpane-active { display: block; }

/* Submissions grid */
.ph-sub-grid-wrap { overflow-x: auto; flex: 1; min-height: 0; }
.ph-sub-grid { border-collapse: collapse; font-size: 13px; table-layout: fixed; width: 100%; }
.ph-sub-grid th {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    letter-spacing: 0.3px;
    padding: 0 6px;
    height: 48px;
    border-bottom: 1px solid #e0e0e0;
    text-align: center;
    vertical-align: middle;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fafbfc;
    overflow: hidden;
}
.ph-sub-grid td { padding: 0 6px; height: 48px; border-bottom: 1px solid #f0f0f0; overflow: hidden; vertical-align: middle; }
.ph-sub-student-col { text-align: left; padding: 0 14px !important; font-size: 11px; text-transform: uppercase; }
.ph-sub-asgn-col { }

/* Resize handles on column headers */
.ph-sub-resize {
    position: absolute;
    top: 0;
    right: -2px;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
    background: transparent;
    transition: background 0.15s;
}
.ph-sub-resize:hover { background: #059669; }
.ph-sub-header-type {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: white;
    background: #6366f1;
    padding: 1px 4px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 2px;
}
.ph-sub-header-title {
    font-size: 10px;
    font-weight: 600;
    color: #333;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ph-sub-review-btn {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #059669;
    border: none;
    border-radius: 4px;
    padding: 2px 8px;
    margin-top: 3px;
    cursor: pointer;
    letter-spacing: 0.3px;
}
.ph-sub-review-btn:hover { background: #047857; }
.ph-sub-student-name {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 14px;
}
.ph-sub-student-name:hover { color: #059669; }
.ph-sub-cell { text-align: center; font-weight: 600; }
.ph-sub-empty { color: #d1d5db; }
.ph-sub-submitted { color: #059669; }
.ph-sub-graded { color: #1e40af; background: #eff6ff; border-radius: 4px; }
.ph-sub-pending { color: #f59e0b; }

/* Gradebook */
.gb-loading { text-align: center; padding: 60px 20px; color: #999; font-size: 14px; }
.gb-empty { text-align: center; padding: 80px 20px; }
.gb-container { padding: 0; display: flex; flex-direction: column; height: 100%; }
.gb-scroll-wrap { overflow: auto; flex: 1; border: 1px solid #e0e0e0; border-radius: 8px; background: white; }
.gb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gb-corner {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #f8f9fa;
    min-width: 160px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 0.3px;
    padding: 10px 12px;
    border-bottom: 2px solid #e0e0e0;
    border-right: 2px solid #e0e0e0;
}
.gb-lesson-header {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1a1a1a;
    letter-spacing: 0.3px;
    padding: 8px 10px;
    text-align: center;
    background: #f0fdf4;
    border-bottom: 1px solid #d1fae5;
    border-left: 2px solid #e0e0e0;
}
.gb-lesson-header:first-of-type { border-left: none; }
.gb-asgn-header {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    padding: 6px 8px;
    text-align: center;
    background: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gb-student-name {
    position: sticky;
    left: 0;
    z-index: 2;
    background: white;
    font-weight: 600;
    color: #333;
    padding: 8px 12px;
    border-right: 2px solid #e0e0e0;
    border-bottom: 1px solid #f0f0f0;
    min-width: 160px;
}
.gb-cell {
    text-align: center;
    padding: 8px 10px;
    font-weight: 600;
    border-bottom: 1px solid #f0f0f0;
    min-width: 80px;
}
.gb-empty { color: #d1d5db; }
.gb-submitted { color: #059669; background: #f0fdf4; }
.gb-graded { color: #1e40af; background: #eff6ff; }
.gb-pending { color: #f59e0b; background: #fffbeb; }

/* Lesson group borders in gradebook */
.gb-table td:first-child { border-left: none; }
.gb-lesson-row th + th { border-left: 2px solid #e0e0e0; }
.gb-group-start { border-left: 2px solid #d1d5db; }

/* Two-column layout */
.ph-dash-columns {
    display: flex;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.ph-dash-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ph-col-attendance { flex: 27; min-width: 0; }
.ph-col-main { flex: 73; min-width: 0; }

/* Draggable column resizer */
.ph-col-resizer {
    width: 12px;
    cursor: col-resize;
    background: transparent;
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.ph-col-resizer::after {
    content: '';
    width: 3px;
    height: 32px;
    background: #d0d0d0;
    border-radius: 2px;
    transition: background 0.15s, height 0.15s;
}
/* Per-student action icons in insights list */
.ph-insight-action {
    color: #b0b0b0;
    cursor: pointer;
    flex-shrink: 0;
    padding: 3px;
    margin-left: 2px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}
.ph-insight-action:hover {
    background: rgba(0,0,0,0.04);
}
.ph-insight-action-notes:hover { color: #059669; }
.ph-insight-action-notebook:hover { color: #2563eb; }
.ph-insight-action-message:hover { color: #7c3aed; }

/* Refresh icon inside dropdown detail */
.ph-insight-reload {
    color: #b0b0b0;
    cursor: pointer;
    flex-shrink: 0;
    padding: 3px;
    border-radius: 4px;
    transition: color 0.15s;
    line-height: 0;
    display: inline-flex;
    align-items: center;
}
.ph-insight-reload:hover {
    color: #059669;
}
@keyframes ph-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* Detail header bar (Last run + refresh) */
.ph-insight-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 4px;
}
.ph-insight-last-run {
    font-size: 11px;
    color: #999;
    font-style: italic;
}

.ph-col-resizer:hover::after,
.ph-col-resizer.active::after {
    background: #059669;
    height: 48px;
}

/* Panels */
.ph-panel {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

/* Toggle bar (segmented toggle) */
.ph-toggle-bar {
    display: flex;
    flex-shrink: 0;
    background: #dde3ec;
    border-bottom: 2px solid #c9d1dc;
}
.ph-toggle-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 10px;
    background: transparent;
    border: none;
    border-right: 1px solid #c9d1dc;
    font-size: 13px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    position: relative;
    transition: color 0.15s, background-color 0.15s;
    text-align: center;
    white-space: nowrap;
}
.ph-toggle-btn:last-child { border-right: none; }
.ph-toggle-btn:hover { color: #374151; background: rgba(255,255,255,0.45); }
.ph-toggle-btn.active {
    color: #059669;
    background: white;
}
.ph-toggle-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #059669;
}

/* Tab wrapper */
.ph-tab-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Attendance / Insights info bar — fixed height to prevent tab switch jump */
.ph-att-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    height: 48px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafbfc;
    flex-shrink: 0;
    box-sizing: border-box;
}
.ph-att-info-date {
    font-size: 11px;
    font-weight: 700;
    color: #059669;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.ph-att-info-lesson {
    font-size: 11px;
    color: #999;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Select All */
.ph-select-all-wrap { position: relative; }
.ph-select-all-btn {
    padding: 5px 14px;
    background: white;
    color: #333;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ph-select-all-btn:hover { border-color: #999; }
.ph-select-all-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 50;
    min-width: 150px;
    display: none;
}
.ph-select-all-dropdown.open { display: block; }
.ph-select-option {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.1s;
}
.ph-select-option:hover { background: #f0f0f0; }
.ph-select-divider { height: 1px; background: #e0e0e0; margin: 2px 0; }
.ph-select-clear { color: #999; }
.ph-option-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ph-dot-present { background: #059669; }
.ph-dot-absent { background: #dc2626; }
.ph-dot-late { background: #f59e0b; }
.ph-dot-excused { background: #6366f1; }

/* Attendance list */
.ph-att-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-gutter: stable;
}

/* Attendance row */
.ph-att-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    min-height: 48px;
    border-bottom: 1px solid #f0f0f0;
    border-left: 3px solid transparent;
}
.ph-att-row:hover { background: #fafbfc; }
.ph-att-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
}
.ph-att-options {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.ph-att-btn {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid #d0d0d0;
    background: white;
    font-size: 11px;
    font-weight: 700;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.ph-att-btn:hover { border-color: #999; }
.ph-att-present.active { background: #d1fae5; color: #065f46; border-color: #059669; }
.ph-att-absent.active { background: #fee2e2; color: #991b1b; border-color: #dc2626; }
.ph-att-late.active { background: #fef3c7; color: #92400e; border-color: #f59e0b; }
.ph-att-excused.active { background: #e0e7ff; color: #3730a3; border-color: #6366f1; }

/* Empty tab placeholder */
.ph-empty-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
}
.ph-empty-icon { font-size: 36px; margin-bottom: 12px; }
.ph-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 6px;
}
.ph-empty-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    max-width: 300px;
}

/* ===== NOTEBOOK VIEW =====
   White header strip flush below the global top banner. Per user
   direction the strip ignores .sidebar-toggle-btn — the toggle floats
   on top of the strip's left edge, that overlap is intentional. The
   strip stretches edge-to-edge across main-content; tan is BEHIND the
   sidebar (body.tc-notebook-page) so the strip can't show a tan
   gutter to its left. */
.nb-title-bar {
    padding: 8px 24px 10px;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.nb-title-bar-icon { font-size: 24px; flex-shrink: 0; }
.nb-title-bar-name {
    font-size: 20px; font-weight: 700; color: #1a1a1a; letter-spacing: -0.3px;
    /* Keep on one line — short class names like "G7CDE Notebook" were
       wrapping to two lines because the parent flex container was
       allotting them shrinkable width. */
    white-space: nowrap;
    flex-shrink: 0;
}
.nb-title-bar-sep { color: #d0d0d0; font-size: 20px; font-weight: 300; flex-shrink: 0; }
.nb-title-bar-lesson-label {
    font-size: 15px; color: #555; font-weight: 500;
    /* Take the remaining row width so the action buttons + student-nav
       on the right are anchored to the far edge. Allow truncation
       rather than wrap when the lesson title is very long; keeps the
       title bar one row tall. */
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* Legacy lesson dropdown (now in right page header) */
.tb-lesson-dropdown { display: none; }
.tb-lesson-dropdown.open { display: none; }
.tb-lesson-dropdown-empty {
    padding: 16px 14px; font-size: 13px; color: #999; text-align: center;
    font-style: italic;
}
.tb-lesson-dropdown-unit {
    padding: 8px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; user-select: none;
}
.tb-lesson-dropdown-lessons { overflow: hidden; }
.tb-lesson-dropdown-lessons.collapsed { display: none; }
.tb-lesson-dropdown-item {
    padding: 7px 14px 7px 24px; font-size: 13px; color: #333; cursor: pointer;
    display: flex; align-items: center; gap: 8px; transition: background 0.1s;
}
.tb-lesson-dropdown-item:hover { background: #f5f5f5; }
.tb-lesson-dropdown-item.current { background: #f0fdf4; color: #059669; font-weight: 600; }
.tb-lesson-dropdown-item-num { font-size: 11px; font-weight: 700; color: #999; min-width: 18px; }
.tb-lesson-unit-group { margin-bottom: 4px; }
.tb-lesson-unit-title {
    padding: 8px 14px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #888;
}
.tb-lesson-item {
    padding: 7px 14px 7px 24px; font-size: 13px; color: #333; cursor: pointer;
    display: flex; align-items: center; gap: 8px; transition: background 0.1s;
}
.tb-lesson-item:hover { background: #f5f5f5; }
.tb-lesson-item.active { background: #f0fdf4; color: #059669; font-weight: 600; }
.tb-lesson-item-title { flex: 1; }
.tb-lesson-status {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
    padding: 2px 6px; border-radius: 4px;
}
.tb-lesson-status-complete { background: #d1fae5; color: #059669; }
.tb-lesson-status-draft { background: #f3f4f6; color: #9ca3af; }
.tb-lesson-status-in-progress { background: #dbeafe; color: #2563eb; }
/* 2026-05-13: Open Calendar row pinned to the top of the dropdown. */
.tb-lesson-item--open-cal {
    padding: 10px 14px;
    color: #059669;
    font-weight: 600;
}
.tb-lesson-item--open-cal:hover { background: #ecfdf5; color: #047857; }
.tb-lesson-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0;
}
.tb-lesson-recent-head {
    padding: 8px 14px 4px;
}
.tb-open-lesson-btn {
    padding: 5px 12px; font-size: 12px; font-weight: 600; color: #6366f1;
    background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 6px;
    cursor: pointer; white-space: nowrap; transition: all 0.15s; margin-left: 4px;
}
.tb-open-lesson-btn:hover { background: #e0e7ff; border-color: #a5b4fc; }
.tb-open-lesson-btn:disabled { opacity: 0.5; cursor: default; }
.tb-open-lesson-btn:disabled:hover { background: #eef2ff; border-color: #c7d2fe; }
#nbTodayBtn {
    color: #059669; background: #f0fdf4; border-color: #bbf7d0;
}
#nbTodayBtn:hover { background: #dcfce7; border-color: #86efac; }
/* Phase 2 — notebook header Finalize button */
.tb-finalize-btn {
    color: #166534; background: #dcfce7; border-color: #86efac;
}
.tb-finalize-btn:hover { background: #bbf7d0; border-color: #4ade80; }
.tb-finalize-btn-done {
    color: #475569; background: #f1f5f9; border-color: #cbd5e1;
}
.tb-finalize-btn-done:hover { background: #e2e8f0; border-color: #94a3b8; }
.student-nav { display: flex; align-items: center; gap: 4px; margin-left: 16px; flex-shrink: 0; }
.student-nav-btn {
    width: 28px; height: 28px; border: 1px solid #d0d0d0; border-radius: 6px;
    background: #fff; color: #555; font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.student-nav-btn:hover { background: #f0f0f0; border-color: #bbb; color: #333; }
.student-nav-select {
    padding: 5px 28px 5px 10px; border: 1px solid #d0d0d0; border-radius: 6px;
    background: #fff; font-size: 13px; font-weight: 600; color: #333; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center;
}
.student-nav-select:hover { border-color: #bbb; }
.student-nav-select:focus { outline: none; border-color: #059669; box-shadow: 0 0 0 2px rgba(5,150,105,0.15); }

.nb-desk {
    flex: 1;
    min-height: 0;
    background-color: #e8e0d4;
    background-image: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.08) 0%, transparent 70%);
    /* Vertical padding leaves tan visible above + below the cream
       spread so the notebook reads as a book sitting *on* the desk,
       not flush against the white title bar above and the viewport
       edge below. Sides stay 0 so the binder tabs can still project
       into the tan margins flanking the centered spread. */
    padding: 24px 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    position: relative;
    overflow: visible;
}

.nb-spread {
    display: flex;
    /* Cap narrower than the desk's likely width on wide viewports so
       the absolute-positioned binder tabs (.nb-tabs-left right:100%
       and .nb-tabs-right left:100%) have room to project into the tan
       strip on each side. Each side's projection is ~44px; 1200 keeps
       ~50+px of tan headroom at typical 1920-viewport widths. */
    max-width: 1200px;
    width: 100%;
    min-height: 0;
    position: relative;
    perspective: 2500px;
}

/* Binder tabs */
.nb-tabs-left, .nb-tabs-right {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    z-index: 5;
    pointer-events: none;
    padding-top: 20px;
    gap: 6px;
}
.nb-tabs-left { right: 100%; align-items: flex-end; }
.nb-tabs-right { left: 100%; align-items: flex-start; gap: 4px; justify-content: flex-start; height: calc(100% - 40px); overflow: visible; scrollbar-width: none; }
.nb-tabs-left-bottom {
    position: absolute;
    bottom: 0;
    right: 100%;
    display: flex;
    flex-direction: column;
    z-index: 5;
    pointer-events: none;
    gap: 6px;
    padding-bottom: 20px;
    align-items: flex-end;
}

.nb-tab {
    pointer-events: all;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    position: relative;
    flex-shrink: 0;
    min-height: 0;
}
.nb-tab-left {
    width: 44px;
    padding: 14px 6px;
    background-color: #d6cfc4;
    border-radius: 6px 0 0 6px;
    border: 1px solid #c0b8ac;
    border-right: none;
    box-shadow: -2px 1px 4px rgba(0,0,0,0.08);
}
.nb-tab-left:hover { background-color: #c8bfb2; width: 48px; }
.nb-tab-left.active { background-color: #6366f1; border-color: #4f46e5; }
.nb-tab-left.active .nb-tab-text { color: white; }

.nb-tab-right {
    width: 44px;
    padding: 8px 6px;
    background-color: #d6cfc4;
    border-radius: 0 6px 6px 0;
    border: 1px solid #c0b8ac;
    border-left: none;
    box-shadow: 2px 1px 4px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-top: 0;
    flex-shrink: 1;
    flex-grow: 1;
    flex-basis: 0;
    max-height: none;
    min-height: 36px;
    transition: width 0.2s, background-color 0.2s, z-index 0s;
    position: relative;
}
.nb-tab-right:first-child { margin-top: 0; }
/* When only Home tab exists, don't stretch it */
.nb-tabs-right.nb-tabs-home-only .nb-tab-right { flex-grow: 0; }
/* Add section button — standalone button matching lesson modal's .ld-nb-binder-add */
.nb-binder-add {
    pointer-events: all;
    width: 44px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 0 6px 6px 0;
    border: 2px dashed #c0b8ac;
    border-left: none;
    margin-bottom: 4px;
    background: #f5f3ef;
    font-size: 20px;
    font-weight: 700;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: all 0.15s;
    padding: 0;
}
.nb-binder-add:hover {
    background: #e8e0d4;
    border-color: #a09888;
    color: #666;
    border-style: solid;
    border-left: none;
}
/* Home tab — small fixed emoji button */
.nb-tab-home {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    min-height: 0 !important;
    padding: 6px 6px !important;
}
.nb-tab-home .nb-tab-text-right {
    font-size: 14px !important;
    writing-mode: horizontal-tb !important;
    max-height: none !important;
    overflow: visible !important;
}
.nb-tab-right:hover { background-color: #c8bfb2; width: 48px; z-index: 50 !important; overflow: visible; }
.nb-tab-right.active { background-color: #059669; border-color: #047857; z-index: 40 !important; }
.nb-tab-right.active .nb-tab-text { color: white; }
/* Hover X delete button on right binder tabs */
.nb-tab-delete {
    display: none; position: absolute; top: 2px; right: 2px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #dc2626; color: #fff; border: none; cursor: pointer;
    font-size: 9px; line-height: 1; padding: 0;
    align-items: center; justify-content: center; z-index: 3;
    font-family: inherit;
}
.nb-tab-right:hover .nb-tab-delete { display: flex; }

.nb-tab-text {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #666;
    white-space: nowrap;
}
.nb-tab-text-left { writing-mode: vertical-rl; transform: rotate(180deg); }
.nb-tab-text-right {
    writing-mode: vertical-rl;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-height: 100%;
}

/* Section-specific right tab colors */
.nb-tab-right[data-section="doNow"] { background-color: #dde8d6; }
.nb-tab-right[data-section="doNow"].active { background-color: #059669; border-color: #047857; }
.nb-tab-right[data-section="classNotes"] { background-color: #d6dde0; }
.nb-tab-right[data-section="classNotes"].active { background-color: #0284c7; border-color: #0369a1; }
.nb-tab-right[data-section="exitTicket"] { background-color: #e0d6da; }
.nb-tab-right[data-section="exitTicket"].active { background-color: #c2410c; border-color: #9a3412; }
.nb-tab-right[data-section="overview"] { background-color: #ddd6e8; }
.nb-tab-right[data-section="overview"].active { background-color: #6366f1; border-color: #4f46e5; }

/* Activity tabs — use CSS variables for dynamic coloring */
.nb-tab-right[data-section^="pushed_"],
.nb-tab-right[data-section^="act_"] {
    background-color: var(--tab-bg, #e0e0e0);
    border-color: var(--tab-border, #ccc);
}
.nb-tab-right[data-section^="pushed_"].active,
.nb-tab-right[data-section^="act_"].active {
    background-color: var(--tab-color, #059669);
    border-color: var(--tab-color, #047857);
    filter: brightness(0.9);
}
.nb-tab-right[data-section^="pushed_"] .nb-tab-text-right,
.nb-tab-right[data-section^="act_"] .nb-tab-text-right {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--tab-color, #333);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-height: 100%;
}
.nb-tab-right[data-section^="pushed_"].active .nb-tab-text-right,
.nb-tab-right[data-section^="act_"].active .nb-tab-text-right {
    color: #fff;
}

/* Drag and drop for notebook sections */
.nb-draggable-section { transition: border-top 0.15s, opacity 0.15s; }
.nb-draggable-section.drag-over { border-top: 2px solid #059669 !important; }
.nb-drag-handle:hover { color: #333 !important; }

/* Drag and drop for top-level lesson-plan sections (Today's Goal,
   Inquiry Question, ATL, Criteria, Activities, etc). The whole card
   is draggable; the handle on the left edge is the visual grab cue. */
.nb-lp-plan-section { transition: opacity 0.15s, border-top 0.15s; }
.nb-lp-plan-section.nb-plan-drag-source { opacity: 0.4; }
.nb-lp-plan-section.nb-plan-drag-over { border-top: 2px solid #059669 !important; }
.nb-plan-section-drag-handle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 20px;
    margin-right: 2px;
    padding: 0;
    color: #aaa;
    background: none;
    border: none;
    border-radius: 3px;
    cursor: grab;
    user-select: none;
}
.nb-plan-section-drag-handle:hover { color: #555; background: rgba(0, 0, 0, 0.04); }
.nb-plan-section-drag-handle:active { cursor: grabbing; }
.nb-tabs-right::-webkit-scrollbar { display: none; }

/* --- Drag-to-reorder: right binder tabs --- */
.nb-tab-right[draggable="true"] { cursor: grab; }
.nb-tab-right[draggable="true"]:active { cursor: grabbing; }
.nb-tab-right.nb-tab-dragover { outline: 2px solid #059669; outline-offset: -2px; box-shadow: inset 0 0 8px rgba(5,150,105,0.15); }

/* --- Drag-to-reorder: material subtabs --- */
.nb-mat-subtab-wrap { position: relative; display: inline-flex; align-items: center; flex: 1; min-width: 0; }
.nb-mat-subtab-wrap[draggable="true"] { cursor: grab; }
.nb-mat-subtab-wrap[draggable="true"]:active { cursor: grabbing; }
.nb-mat-subtab-wrap.nb-mat-subtab-dragover { outline: 2px solid #059669; outline-offset: -2px; border-radius: 4px; background: rgba(5,150,105,0.06); }

/* --- Color picker trigger (small dot at top of right binder tab, shown on hover) --- */
.nb-tab-color-trigger {
    display: none; width: 16px; height: 16px; border: 2px solid rgba(0,0,0,0.15); border-radius: 50%;
    cursor: pointer; padding: 0; flex-shrink: 0; transition: transform 0.15s;
    position: absolute; top: 3px; left: 50%; transform: translateX(-50%); z-index: 2;
}
.nb-tab-right:hover .nb-tab-color-trigger { display: block; }
.nb-tab-color-trigger:hover { transform: translateX(-50%) scale(1.2); box-shadow: 0 0 0 2px rgba(0,0,0,0.08); }
/* Subtab color trigger (legacy — kept for any leftover references; the
   active surface is now the kebab below) */
.nb-subtab-color-trigger {
    display: none; width: 14px; height: 14px; border: 2px solid rgba(0,0,0,0.15); border-radius: 50%;
    cursor: pointer; padding: 0; flex-shrink: 0; transition: transform 0.15s; margin-right: 2px;
}
.nb-subtab-color-trigger:hover { transform: scale(1.2); box-shadow: 0 0 0 2px rgba(0,0,0,0.08); }

/* Subtab kebab — hidden until the wrap is hovered. Opens an action menu
   (Change Color, Duplicate, Delete) anchored below it. */
.nb-subtab-kebab {
    display: none; width: 18px; height: 18px;
    margin-left: 2px; padding: 0; flex-shrink: 0;
    border: none; background: transparent; color: #6b7280;
    font-size: 15px; line-height: 1; cursor: pointer;
    border-radius: 4px; transition: background 0.12s, color 0.12s;
}
.nb-mat-subtab-wrap:hover .nb-subtab-kebab,
.nb-subtab-kebab:focus { display: inline-flex; align-items: center; justify-content: center; }
.nb-subtab-kebab:hover { background: rgba(0,0,0,0.07); color: #1f2937; }

/* Shared action menu used by the subtab kebab + the "+ Add Section"
   dropdown. Tight padding, soft shadow, one column. */
.nb-tab-action-menu {
    position: fixed; z-index: 100000;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 4px; min-width: 180px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    display: flex; flex-direction: column; gap: 1px;
    font-family: inherit;
}
.nb-tab-action-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border: none; background: transparent;
    color: #1f2937; font-size: 13px; font-weight: 500;
    text-align: left; cursor: pointer; border-radius: 5px;
    font-family: inherit; line-height: 1.2;
}
.nb-tab-action-item:hover { background: #f3f4f6; }
.nb-tab-action-item.nb-tab-action-danger { color: #b91c1c; }
.nb-tab-action-item.nb-tab-action-danger:hover { background: #fee2e2; }
.nb-tab-action-icon {
    width: 16px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.nb-tab-action-swatch {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.15); flex-shrink: 0;
}
/* Title color picker (in front of right-page section title — always visible in teacher view) */
.nb-title-color-trigger:hover { transform: scale(1.2); box-shadow: 0 0 0 2px rgba(0,0,0,0.08); }


/* Notebook pages */
.nb-page {
    background-color: #fefcf8;
    background-image: repeating-linear-gradient(
        transparent, transparent 27px,
        rgba(200, 195, 185, 0.25) 27px,
        rgba(200, 195, 185, 0.25) 28px
    );
    background-position: 0 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    position: relative;
}
.nb-page-left {
    flex: 1;
    min-width: 0;
    border-radius: 6px 0 0 6px;
    box-shadow: -3px 0 8px -4px rgba(0,0,0,0.08) inset, -4px 4px 16px rgba(0,0,0,0.10);
    position: relative;
    overflow: hidden;
}
.nb-page-left::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 1px;
    background-color: rgba(220, 80, 80, 0.12);
}
.nb-page-right {
    flex: 1;
    min-width: 0;
    border-radius: 0 6px 6px 0;
    box-shadow: 3px 0 8px -4px rgba(0,0,0,0.08) inset, 4px 4px 16px rgba(0,0,0,0.10);
}

/* Spine */
.nb-spine {
    width: 28px;
    flex-shrink: 0;
    background: linear-gradient(to right,
        #d6cfc4 0%, #c8bfb2 15%, #bab0a2 30%, #a89e90 50%,
        #bab0a2 70%, #c8bfb2 85%, #d6cfc4 100%);
    position: relative;
    z-index: 2;
    box-shadow: -3px 0 6px -2px rgba(0,0,0,0.2), 3px 0 6px -2px rgba(0,0,0,0.2), inset 0 0 8px rgba(0,0,0,0.1);
}
.nb-spine::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background-image: repeating-linear-gradient(to bottom,
        transparent 0px, transparent 8px,
        rgba(0,0,0,0.15) 8px, rgba(0,0,0,0.15) 12px,
        transparent 12px, transparent 20px);
}

/* Left page header/tabs */
.nb-lp-header { padding: 12px 20px 0 20px; flex-shrink: 0; }
.nb-lp-tabs {
    display: flex;
    gap: 4px;
    background-color: #e8e2da;
    border-radius: 8px;
    padding: 3px;
}
.nb-lp-tab {
    flex: 1;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #666;
    cursor: pointer;
    border: none;
    border-radius: 6px;
    background-color: transparent;
    text-align: center;
    transition: all 0.2s;
}
.nb-lp-tab:hover { background-color: #d6cfc4; color: #555; }
.nb-lp-tab.active { background-color: #059669; color: white; box-shadow: 0 1px 3px rgba(5,150,105,0.3); }
.nb-lp-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 20px 20px 20px;
    min-height: 0;
}
.nb-lp-content::-webkit-scrollbar { width: 5px; }
.nb-lp-content::-webkit-scrollbar-track { background: transparent; }
.nb-lp-content::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* ===== Lesson Plan sub-toggle (2026-05-25 portal) =====
   Sits inside the "Lesson Plan" top tab. Mirrors the modal's
   Lesson Plan / Student View sub-tab so the notebook is a true
   portal — same content authoring shape, same visual rhythm. */
.nb-plan-subtabs {
    display: flex;
    gap: 6px;
    background-color: #f4efe7;
    border: 1px solid #e0d9cc;
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 10px;
}
.nb-plan-subtab {
    flex: 1;
    padding: 7px 12px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7a6d57;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: transparent;
    text-align: center;
    transition: all 0.18s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
}
.nb-plan-subtab:hover { background-color: rgba(255,255,255,0.6); color: #4d4530; }
.nb-plan-subtab.active {
    background-color: #fff;
    color: #2a5d3a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.nb-plan-subbanner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 11.5px;
    font-weight: 600;
}
.nb-plan-subbanner-icon { font-size: 13px; line-height: 1; }
.nb-plan-subbanner-text { line-height: 1.4; }
.nb-plan-subbanner-private {
    background-color: #fef6e7;
    border: 1px solid #f6dca0;
    color: #8c5a1a;
}
.nb-plan-subbanner-public {
    background-color: #ecf6ef;
    border: 1px solid #c7e2cd;
    color: #2a5d3a;
}

/* Student-View empty hint shown to the teacher when no studentSections
   have been authored yet. */
.nb-student-plan-empty {
    padding: 22px 18px;
    border: 1px dashed #cbb892;
    border-radius: 8px;
    background-color: #fbf6eb;
    text-align: center;
}
.nb-student-plan-empty-title {
    font-size: 13px;
    font-weight: 700;
    color: #6b5a37;
    margin-bottom: 4px;
}
.nb-student-plan-empty-body {
    font-size: 12px;
    color: #8a7752;
    line-height: 1.55;
}

/* ===== ANSWER pill (replaces the old TEACHER VIEW indicator 2026-05-25)
   Sits where the static green TEACHER VIEW chip used to live. Click =
   reveals every .ld-asgn-answer-key-wrap inside the activity tab. */
.nb-answer-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 8px;
    border-radius: 9999px;
    border: 1px solid #d1fae5;
    background-color: #f0fdf4;
    color: #047857;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    cursor: pointer;
    transition: all 0.15s;
    margin-left: 8px;
    font-family: inherit;
}
.nb-answer-pill:hover {
    background-color: #dcfce7;
    border-color: #86efac;
    color: #065f46;
}
.nb-answer-pill-icon { font-size: 11px; line-height: 1; }
.nb-answer-pill-label { line-height: 1; }
.nb-answer-pill-on {
    background-color: #047857;
    border-color: #047857;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.12);
}
.nb-answer-pill-on:hover {
    background-color: #065f46;
    border-color: #065f46;
    color: #fff;
}

/* Answer-key reveal scoping — every activity content block carries
   either .nb-answers-hidden or .nb-answers-revealed at its root.
   The master "All Answers" pill flips between the two and ONLY
   affects .nb-answer-reveal (the inline student-facing answer-key
   block used by the pushed/legacy activity renderer).
   2026-05-25 — .ld-asgn-answer-key-wrap (the teacher's editable green
   "ANSWER KEY (guidelines the AI uses when grading)" box from
   nbBuildSAEditor / nbBuildEssayEditor) was REMOVED from these
   selectors. That box is now controlled SOLELY by the per-question
   ANSWER pill's isAnswerOpen render branch — was getting masked by
   the master pill's default hidden state, so the teacher couldn't
   see their own answer-key editor even after toggling ANSWER on. */
.nb-answers-hidden .nb-answer-reveal {
    display: none !important;
}
.nb-answers-revealed .nb-answer-reveal {
    display: block !important;
}

/* Inline reveal block used by the pushed-activity legacy renderer
   for plain-text answer-key strings. */
.nb-answer-reveal {
    margin-top: 6px;
    padding: 8px 10px;
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 3px solid #047857;
    border-radius: 6px;
}
.nb-answer-reveal-label {
    font-size: 10px;
    font-weight: 700;
    color: #047857;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}
.nb-answer-reveal-body {
    font-size: 12.5px;
    color: #1f3a2a;
    line-height: 1.55;
    white-space: pre-wrap;
}

/* Right page header */
.nb-rp-header {
    padding: 10px 14px;
    border-bottom: 2px solid #e0e0e0;
    flex-shrink: 0;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nb-rp-header-left { display: flex; align-items: center; gap: 8px; width: 100%; }
.nb-rp-header-info {
    flex: 1; text-align: center; cursor: pointer; position: relative;
    padding: 4px 8px; border-radius: 6px; transition: background 0.15s;
}
.nb-rp-header-info:hover { background: #eee; }
.nb-rp-header-date { display: block; font-size: 13px; font-weight: 600; color: #059669; }
.nb-rp-header-lesson { display: block; font-size: 12px; font-weight: 600; color: #64748b; margin-top: 1px; }
.nb-rp-chevron { font-size: 9px; color: #999; margin-left: 3px; transition: transform 0.2s; }
.nb-rp-header-info.open .nb-rp-chevron { transform: rotate(180deg); }
.nb-lesson-nav-btn {
    width: 30px; height: 30px; border: 1px solid #d0d0d0; border-radius: 6px;
    background: #fff; color: #555; font-size: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.15s;
    flex-shrink: 0;
}
.nb-lesson-nav-btn:hover { background: #f0f0f0; border-color: #bbb; color: #333; }
.nb-lesson-nav-btn:disabled { opacity: 0.3; cursor: default; }
.nb-lesson-nav-btn:disabled:hover { background: #fff; border-color: #d0d0d0; color: #555; }

/* ===== Day Complete pill (2026-05-25 Phase 3) ===== */
.nb-day-complete-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px; font-family: inherit;
    font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
    cursor: pointer; transition: all 0.18s ease;
    border: 1px solid; flex-shrink: 0;
    /* Sized to roughly match two stacked rows of nav buttons — the
       user asked for this to occupy the space the ▶ arrow vacated. */
    min-height: 32px;
}
.nb-day-complete-pill .nb-day-complete-icon { font-size: 14px; line-height: 1; }
.nb-day-complete-pill.nb-day-complete-idle {
    background: #f3f4f6; border-color: #d1d5db; color: #6b7280;
}
.nb-day-complete-pill.nb-day-complete-idle:hover {
    background: #e5e7eb; border-color: #9ca3af; color: #374151;
}
.nb-day-complete-pill.nb-day-complete-done {
    background: #16a34a; border-color: #15803d; color: #fff;
    box-shadow: 0 1px 4px rgba(22, 163, 74, 0.35);
}
.nb-day-complete-pill.nb-day-complete-done:hover { background: #15803d; }
.nb-day-complete-pill.nb-pill-pulse { animation: nb-pill-pulse 0.6s ease-in-out 1; }
@keyframes nb-pill-pulse {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.08); }
}
/* Wiggle animation for missing right-binder tabs */
.nb-tab.nb-tab-wiggle { animation: nb-tab-wiggle 0.5s ease-in-out 1; }
@keyframes nb-tab-wiggle {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}
.nb-dark .nb-day-complete-pill.nb-day-complete-idle {
    background: #1f1c17; border-color: #3a302a; color: #b8a890;
}
.nb-dark .nb-day-complete-pill.nb-day-complete-done {
    background: #047857; border-color: #065f46; color: #fff;
}
/* Lesson dropdown inside right page header */
.nb-rp-lesson-dropdown {
    display: none; position: absolute; top: calc(100% + 6px); left: 50%;
    transform: translateX(-50%); min-width: 280px; max-height: 320px;
    overflow-y: auto; background: #fff; border: 1px solid #e0e0e0;
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 1000; padding: 6px 0; text-align: left;
}
.nb-rp-lesson-dropdown.open { display: block; }
.nb-rp-header-right { display: flex; align-items: center; gap: 8px; }
.nb-rp-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px 24px 20px;
    min-height: 0;
}
.nb-rp-content::-webkit-scrollbar { width: 5px; }
.nb-rp-content::-webkit-scrollbar-track { background: transparent; }
.nb-rp-content::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* Notebook empty section placeholder */
.nb-empty-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 24px;
    color: #999;
}
.nb-empty-section-icon { font-size: 28px; margin-bottom: 10px; }
.nb-empty-section-title { font-size: 14px; font-weight: 700; color: #666; margin-bottom: 4px; }
.nb-empty-section-desc { font-size: 12px; color: #999; line-height: 1.5; }

/* ===== MATERIALS TAB ===== */
.materials-container { display: flex; flex-direction: column; height: 100%; gap: 0; }
.materials-subtabs {
    display: flex; gap: 0; flex-shrink: 0;
    border-bottom: 2px solid #e0e0e0;
    padding: 0;
    overflow-x: auto;
}
.materials-subtab {
    padding: 8px 14px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; color: #888;
    cursor: pointer; border: none; background: transparent;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    white-space: nowrap; transition: all 0.15s;
}
.materials-subtab:hover { color: #555; background: rgba(0,0,0,0.03); }
.materials-subtab.active { color: #059669; border-bottom-color: #059669; }

/* Notebook material subtabs — single row, no wrap, truncate */
.nb-mat-subtabs {
    display: flex; gap: 0; flex-shrink: 0;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 12px; overflow: hidden;
}
.nb-mat-subtab {
    flex: 1; min-width: 0;
    padding: 5px 6px; font-size: 10px; font-weight: 700;
    color: var(--stc, #888); background: transparent;
    border: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
    cursor: pointer; font-family: inherit; text-transform: uppercase;
    letter-spacing: 0.2px; border-radius: 4px 4px 0 0;
    transition: all 0.15s; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
    display: flex; align-items: center; gap: 2px;
    position: relative;
}
.nb-mat-subtab:hover { background: var(--stbg, #f5f5f5); }
.nb-mat-subtab.active { color: #fff !important; }
/* Hover X delete button on material subtabs */
.nb-mat-subtab-delete {
    display: none; position: absolute; top: -1px; right: 0;
    width: 14px; height: 14px; border-radius: 50%;
    background: #dc2626; color: #fff; border: none; cursor: pointer;
    font-size: 9px; line-height: 1; padding: 0;
    align-items: center; justify-content: center; z-index: 2;
    font-family: inherit;
}
.nb-mat-subtab:hover .nb-mat-subtab-delete { display: flex; }
.nb-mat-subtab-label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0; flex: 1;
}
.nb-mat-subtab-count { font-size: 9px; opacity: 0.7; flex-shrink: 0; }
.nb-mat-subtab-add {
    flex-shrink: 0; width: 28px; padding: 4px 0;
    font-size: 16px; font-weight: 700; color: #059669;
    background: #f0fdf4; border: none; border-bottom: 2px solid transparent;
    margin-bottom: -2px; cursor: pointer; font-family: inherit;
    border-radius: 4px 4px 0 0; transition: all 0.15s;
}
.nb-mat-subtab-add:hover { background: #d1fae5; }
.materials-viewer {
    flex: 1; min-height: 0; margin-top: 6px;
    border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden;
    background: #f5f5f5; display: flex; align-items: center; justify-content: center;
}
.materials-viewer .materials-empty {
    font-size: 13px; color: #999; text-align: center; padding: 20px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.materials-viewer .materials-empty-icon { font-size: 28px; }

/* ===== FAB AREA ===== */
.nb-fab-area {
    position: absolute; bottom: 12px; right: 16px;
    display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 20;
}
.nb-fab-area .nb-settings-btn { position: static; }
.nb-add-btn {
    width: 32px; height: 32px; border: none; border-radius: 50%;
    background: rgba(0,0,0,0.15); color: #fff; font-size: 16px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s; line-height: 1; position: relative;
}
.nb-add-btn:hover { background: rgba(0,0,0,0.3); }
.nb-fab-wrap {
    position: relative; display: flex; align-items: center;
}
.nb-fab-wrap::after {
    content: ''; position: absolute; right: 100%; top: 0; width: 8px; height: 100%;
}
.nb-fab-wrap:hover .nb-flyout { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.nb-flyout {
    position: absolute; right: 40px; top: 50%; background: #e0e0e0;
    border: 1px solid #d0d0d0; border-radius: 6px; padding: 6px 0;
    min-width: 140px; z-index: 21;
    transform: translateY(-50%) translateX(-8px); opacity: 0;
    pointer-events: none; transition: opacity 0.15s, transform 0.15s;
}
.nb-flyout::before {
    content: ''; position: absolute; right: -7px; top: 50%; transform: translateY(-50%);
    border: 7px solid transparent; border-left-color: #d0d0d0; border-right: none;
}
.nb-flyout::after {
    content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%);
    border: 6px solid transparent; border-left-color: #e0e0e0; border-right: none;
}
.nb-flyout-item {
    padding: 8px 16px; font-size: 12px; color: #333; cursor: pointer;
    display: flex; align-items: center; gap: 8px; transition: background 0.12s; white-space: nowrap;
}
.nb-flyout-item:hover { background: #f0f0f0; }
.nb-flyout-icon { font-size: 14px; flex-shrink: 0; }
.nb-settings-btn {
    width: 32px; height: 32px; border: none; border-radius: 50%;
    background: rgba(0,0,0,0.15); color: #fff; font-size: 18px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s; z-index: 20; line-height: 1; letter-spacing: 1px;
}
.nb-settings-btn:hover { background: rgba(0,0,0,0.3); }

/* ===== SETTINGS PANEL ===== */
.nb-settings-panel {
    position: absolute; bottom: 92px; right: 16px; width: 260px;
    max-height: calc(100% - 80px); background: #fff; border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    z-index: 25; display: none; overflow-y: auto; overflow-x: hidden;
}
.nb-settings-panel.open { display: block; }
.nb-settings-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid #e5e7eb;
}
.nb-settings-title {
    font-size: 13px; font-weight: 700; color: #333;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.nb-settings-close {
    width: 24px; height: 24px; border: none; background: none;
    font-size: 18px; color: #999; cursor: pointer; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
}
.nb-settings-close:hover { background: #f3f4f6; color: #333; }
.nb-settings-section { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; }
.nb-settings-section-last { border-bottom: none; }
.nb-settings-label {
    font-size: 11px; font-weight: 700; color: #888;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}
.nb-settings-sublabel { font-size: 12px; color: #888; font-weight: 600; }
.nb-settings-swatches { display: flex; gap: 8px; }
.nb-swatch {
    width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent;
    cursor: pointer; transition: border-color 0.15s, transform 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.nb-swatch:hover { transform: scale(1.12); }
.nb-swatch.active { border-color: #059669; box-shadow: 0 0 0 2px rgba(5,150,105,0.25); }
.nb-settings-row { display: flex; align-items: center; gap: 8px; }
.nb-color-input {
    width: 30px; height: 30px; border: 1px solid #d0d5dd; border-radius: 6px;
    padding: 2px; cursor: pointer; background: #fff;
}
.nb-settings-action-btn {
    flex: 1; padding: 7px 0; border: 1px solid #d0d5dd; border-radius: 6px;
    background: #fff; font-size: 12px; font-weight: 600; color: #333; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.nb-settings-action-btn:hover { background: #f8f9fa; }
.nb-settings-action-secondary { color: #999; flex: 0; padding: 7px 12px; }

/* Paper presets */
.nb-paper-options { display: flex; gap: 6px; }
.nb-paper-btn {
    flex: 1; height: 44px; border: 2px solid #e5e7eb; border-radius: 8px;
    cursor: pointer; transition: border-color 0.15s, transform 0.15s;
    position: relative; overflow: hidden; background: none;
}
.nb-paper-btn:hover { border-color: #bbb; transform: scale(1.03); }
.nb-paper-btn.active { border-color: #059669; box-shadow: 0 0 0 2px rgba(5,150,105,0.25); }
.nb-paper-btn-inner {
    width: 100%; height: 100%; display: flex; align-items: flex-end;
    justify-content: center; padding-bottom: 3px;
}
.nb-paper-btn-label {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.3px; padding: 1px 4px; border-radius: 2px;
}
.nb-paper-cream .nb-paper-btn-inner {
    background-color: #fefcf8;
    background-image: repeating-linear-gradient(transparent, transparent 7px, rgba(200,195,185,0.25) 7px, rgba(200,195,185,0.25) 8px);
}
.nb-paper-cream .nb-paper-btn-label { color: #8a7e6e; }
.nb-paper-legal .nb-paper-btn-inner {
    background-color: #fdf8e1;
    background-image: repeating-linear-gradient(transparent, transparent 7px, rgba(180,170,130,0.3) 7px, rgba(180,170,130,0.3) 8px);
}
.nb-paper-legal .nb-paper-btn-label { color: #8a7e3e; }
.nb-paper-white .nb-paper-btn-inner { background-color: #ffffff; background-image: none; }
.nb-paper-white .nb-paper-btn-label { color: #999; }
.nb-paper-graph .nb-paper-btn-inner {
    background-color: #fcfcff;
    background-image: linear-gradient(rgba(100,130,200,0.12) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(100,130,200,0.12) 1px, transparent 1px);
    background-size: 8px 8px;
}
.nb-paper-graph .nb-paper-btn-label { color: #6680aa; }
.nb-settings-paper-labels { display: flex; gap: 6px; margin-top: 4px; }
.nb-settings-paper-labels span { flex: 1; font-size: 9px; text-align: center; color: #aaa; font-weight: 600; }

/* Tab color presets */
.nb-tab-options { display: flex; gap: 6px; }
.nb-tab-btn {
    flex: 1; height: 36px; border: 2px solid #e5e7eb; border-radius: 8px;
    cursor: pointer; transition: border-color 0.15s, transform 0.15s;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden; background: none;
}
.nb-tab-btn:hover { border-color: #bbb; transform: scale(1.03); }
.nb-tab-btn.active { border-color: #059669; box-shadow: 0 0 0 2px rgba(5,150,105,0.25); }
.nb-tab-btn-preview { display: flex; gap: 2px; align-items: center; }
.nb-tab-btn-swatch { width: 6px; height: 18px; border-radius: 2px; }
.nb-settings-tab-labels { display: flex; gap: 6px; margin-top: 4px; }
.nb-settings-tab-labels span { flex: 1; font-size: 9px; text-align: center; color: #aaa; font-weight: 600; }

/* Font options */
.nb-settings-font-options { display: flex; gap: 6px; }
.nb-font-btn {
    flex: 1; height: 36px; border: 2px solid #e5e7eb; border-radius: 8px;
    background: #fff; font-size: 16px; font-weight: 600; color: #444;
    cursor: pointer; transition: border-color 0.15s;
}
.nb-font-btn:hover { border-color: #bbb; }
.nb-font-btn.active { border-color: #059669; background: #f0fdf4; color: #059669; }
.nb-settings-font-labels { display: flex; gap: 6px; margin-top: 4px; }
.nb-settings-font-labels span { flex: 1; font-size: 10px; text-align: center; color: #aaa; font-weight: 600; }

/* Theme toggle */
.nb-settings-toggle-row { display: flex; gap: 6px; }
.nb-theme-btn {
    flex: 1; padding: 8px 0; border: 2px solid #e5e7eb; border-radius: 8px;
    background: #fff; font-size: 12px; font-weight: 700; color: #555;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: border-color 0.15s;
}
.nb-theme-btn:hover { border-color: #bbb; }
.nb-theme-btn.active { border-color: #059669; background: #f0fdf4; color: #059669; }

/* ===== OVERVIEW CARDS ===== */
.overview-right-section { margin-bottom: 18px; }
.overview-right-section:last-child { margin-bottom: 0; }
.overview-teacher-message {
    padding: 14px 16px; background: linear-gradient(135deg, #fdf6e3 0%, #fef5d8 100%);
    border: 2px solid #f9d471; border-radius: 10px; position: relative;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.06);
}
.overview-teacher-message::before {
    content: ''; position: absolute; top: -6px; left: 24px;
    width: 32px; height: 12px; background: rgba(5,150,105,0.35); border-radius: 2px;
}
.overview-teacher-message-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.overview-teacher-message-icon { font-size: 20px; }
.overview-teacher-message-from {
    font-size: 13px; font-weight: 700; color: #333;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.overview-prev-lesson {
    padding: 16px 18px; background: linear-gradient(135deg, #eff6ff 0%, #f0f4ff 100%);
    border: 2px solid #93c5fd; border-radius: 10px; position: relative;
}
.overview-prev-lesson-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: #3b82f6; color: #fff; font-size: 11px; font-weight: 800;
    padding: 3px 8px; border-radius: 4px; margin-bottom: 8px;
}

/* ===== QUESTION CARDS (Do Now, Class Notes, Exit Ticket) ===== */
.cn-question {
    margin-bottom: 12px; padding: 14px 16px; border: 1px solid #e0e0e0;
    border-radius: 10px; background: #fff;
}
.cn-question:last-child { margin-bottom: 0; }
.cn-question-label {
    font-size: 13px; font-weight: 700; color: #333; margin-bottom: 8px;
    padding-bottom: 8px; border-bottom: 1px solid #f0f0f0;
}
.cn-question-text {
    font-size: 14px; line-height: 1.55; color: #444; margin-bottom: 10px;
}
.nb-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.nb-section-title {
    font-size: 16px; font-weight: 700; color: #333;
}
.nb-section-edit-btn {
    padding: 5px 12px; font-size: 11px; font-weight: 700;
    border: 1px solid #d1d5db; border-radius: 6px; background: #fff;
    color: #666; cursor: pointer; text-transform: uppercase; letter-spacing: 0.3px;
}
.nb-section-edit-btn:hover { background: #f3f4f6; }

/* ===== ANALYTICS ===== */
.analytics-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.analytics-metric-card {
    text-align: center; padding: 10px 8px; background: #f8f9fa;
    border: 1px solid #e9ecef; border-radius: 6px;
}
.analytics-metric-value { font-size: 22px; font-weight: 700; color: #059669; }
.analytics-metric-value.neutral { color: #333; }
.analytics-metric-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    color: #999; letter-spacing: 0.5px; margin-top: 2px;
}
.analytics-breakdown { margin-bottom: 14px; }
.analytics-breakdown-title {
    font-size: 13px; font-weight: 700; color: #333; margin-bottom: 8px;
}
.analytics-breakdown-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid #f0f0f0;
}
.analytics-breakdown-row:last-child { border-bottom: none; }
.analytics-breakdown-label {
    font-size: 13px; font-weight: 600; color: #333;
    display: flex; align-items: center; gap: 8px;
}
.analytics-breakdown-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.analytics-breakdown-value { font-size: 13px; font-weight: 600; color: #333; }
.analytics-chart-wrap {
    background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px;
    padding: 12px; margin-bottom: 14px;
}
.analytics-bar-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.analytics-bar-row:last-child { margin-bottom: 0; }
.analytics-bar-label { font-size: 11px; font-weight: 600; color: #666; width: 60px; flex-shrink: 0; }
.analytics-bar-track {
    flex: 1; height: 14px; background: #e9ecef; border-radius: 7px; overflow: hidden;
}
.analytics-bar-fill { height: 100%; border-radius: 7px; transition: width 0.5s; }
.analytics-bar-value { font-size: 11px; font-weight: 700; color: #666; width: 30px; text-align: right; }

/* ===== CLASS ANALYTICS PAGE (ca-*) ===== */
.ca-wrap { padding: 20px 24px; max-width: 1400px; margin: 0 auto; }
.ca-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px; margin-bottom: 20px;
}
.ca-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 16px 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ca-card-label {
    font-size: 11px; font-weight: 700; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px;
}
.ca-card-value { font-size: 26px; font-weight: 700; color: #111; }
.ca-card-sub { font-size: 11px; color: #6b7280; margin-top: 2px; }

/* Two-column layout */
.ca-columns { display: flex; gap: 16px; align-items: stretch; min-height: calc(100vh - 300px); }
.ca-col-left { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); min-width: 0; display: flex; flex-direction: column; }
.ca-col-right { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); min-width: 0; display: flex; flex-direction: column; }
.ca-col-left .ph-panel,
.ca-col-right .ph-panel { flex: 1; display: flex; flex-direction: column; }
.ca-tab-content { padding: 16px; overflow-y: auto; flex: 1; }
.ca-col-title {
    font-size: 14px; font-weight: 700; color: #333; text-transform: uppercase;
    letter-spacing: 0.6px; padding: 0 0 8px 2px;
}

/* Sections */
.ca-section {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 16px 18px; margin-bottom: 14px;
}
.ca-section-title {
    font-size: 13px; font-weight: 700; color: #111;
    margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.3px;
}

/* Rows */
.ca-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 10px; background: #f9fafb; border-radius: 6px; margin-bottom: 5px;
}
.ca-row-name { font-size: 13px; color: #111; font-weight: 600; cursor: pointer; }
.ca-row-name:hover { color: #2563eb; text-decoration: underline; }

/* Lesson bars */
.ca-lesson-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; background: #f9fafb; border-radius: 6px; margin-bottom: 5px;
}
.ca-lesson-bar-title { flex: 1; font-size: 12px; color: #111; font-weight: 600; }
.ca-lesson-bar-track { flex: 0 0 140px; height: 7px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
.ca-lesson-bar-fill { height: 100%; transition: width 0.3s; border-radius: 4px; }

/* Tags */
.ca-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ca-tag {
    background: #fef3c7; color: #78350f; padding: 5px 12px;
    border-radius: 12px; font-weight: 600; font-size: 12px;
}

/* Mini metric cards */
.ca-mini-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; margin-bottom: 14px; }
.ca-mini-card {
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 10px 12px; text-align: center;
}
.ca-mini-label { font-size: 10px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.3px; }
.ca-mini-value { font-size: 20px; font-weight: 700; color: #111; margin-top: 2px; }

/* Student selector */
.ca-student-select-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ca-select {
    flex: 1; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px;
    font-size: 13px; background: #fff; color: #111; cursor: pointer;
}
.ca-open-profile-btn {
    padding: 7px 14px; font-size: 12px; font-weight: 600; background: #059669;
    color: white; border: none; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.ca-open-profile-btn:hover { background: #047857; }

/* Empty state */
.ca-empty-state { text-align: center; padding: 40px 20px; }
.ca-empty-icon { font-size: 40px; margin-bottom: 8px; }
.ca-empty-title { font-size: 16px; font-weight: 700; color: #111; margin-bottom: 6px; }
.ca-empty-desc { font-size: 13px; color: #6b7280; line-height: 1.5; }

/* Chart legend */
.ca-chart-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #6b7280; margin-bottom: 8px; }
.ca-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Question type performance bars */
.ca-type-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ca-type-label { width: 110px; font-size: 12px; font-weight: 600; color: #333; flex-shrink: 0; }
.ca-type-bars { flex: 1; }
.ca-type-bar-track { height: 7px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
.ca-type-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.ca-type-score { font-size: 12px; font-weight: 700; color: #111; min-width: 30px; text-align: right; }

/* Recent graded work */
.ca-recent-row {
    display: grid; grid-template-columns: 1fr 1.5fr auto auto;
    gap: 8px; align-items: center; padding: 8px 10px;
    background: #f9fafb; border-radius: 6px; margin-bottom: 4px;
}
.ca-recent-student { font-size: 12px; font-weight: 600; color: #111; }
.ca-recent-lesson { font-size: 11px; color: #6b7280; }
.ca-recent-score { text-align: center; }
.ca-recent-date { font-size: 10px; color: #9ca3af; text-align: right; }

/* Score distribution */
.ca-dist-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ca-dist-label { width: 80px; font-size: 12px; font-weight: 600; color: #333; flex-shrink: 0; }
.ca-dist-bar-wrap { flex: 1; height: 14px; background: #f0f0f0; border-radius: 7px; overflow: hidden; }
.ca-dist-bar { height: 100%; border-radius: 7px; transition: width 0.4s; }
.ca-dist-count { font-size: 11px; font-weight: 600; color: #6b7280; min-width: 60px; text-align: right; }

/* Projections */
.ca-proj-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ca-settings-btn {
    width: 28px; height: 28px; border: 1px solid #d1d5db; border-radius: 6px;
    background: #fff; font-size: 16px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; color: #6b7280;
}
.ca-settings-btn:hover { background: #f3f4f6; }

.ca-proj-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #f9fafb; border-radius: 6px; margin-bottom: 5px; }
.ca-proj-name { flex: 0 0 120px; font-size: 12px; font-weight: 600; color: #111; }
.ca-proj-current { font-size: 11px; color: #6b7280; min-width: 80px; }
.ca-proj-mapped { flex: 1; display: flex; align-items: center; gap: 8px; }
.ca-proj-bar-track { flex: 1; height: 12px; background: #e5e7eb; border-radius: 6px; position: relative; overflow: visible; }
.ca-proj-band { position: absolute; top: 0; height: 100%; background: rgba(99,102,241,0.2); border-radius: 6px; }
.ca-proj-dot {
    position: absolute; top: 50%; width: 10px; height: 10px;
    background: #6366f1; border-radius: 50%; border: 2px solid #fff;
    transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.ca-proj-value { font-size: 12px; font-weight: 700; color: #6366f1; min-width: 36px; text-align: right; }

/* Projection editor overlay */
.ca-proj-editor-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4); z-index: 10000;
    display: flex; align-items: center; justify-content: center;
}
.ca-proj-editor {
    background: #fff; border-radius: 12px; padding: 24px; width: 480px;
    max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.ca-proj-editor-header {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 16px; font-weight: 700; color: #111; margin-bottom: 8px;
}
.ca-proj-editor-desc { font-size: 12px; color: #6b7280; margin-bottom: 16px; line-height: 1.5; }
.ca-proj-fw-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    padding: 8px 10px; background: #f9fafb; border-radius: 6px;
}
.ca-proj-fw-input {
    padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 4px;
    font-size: 12px; background: #fff;
}
.ca-proj-fw-input.ca-proj-fw-label { flex: 1; }
.ca-proj-fw-del {
    background: none; border: none; cursor: pointer; font-size: 14px;
    color: #9ca3af; padding: 2px 6px;
}
.ca-proj-fw-del:hover { color: #dc2626; }
.ca-proj-add-btn {
    display: block; width: 100%; padding: 8px; border: 1px dashed #d1d5db;
    border-radius: 6px; background: none; font-size: 12px; font-weight: 600;
    color: #6b7280; cursor: pointer; margin-top: 8px;
}
.ca-proj-add-btn:hover { background: #f9fafb; color: #111; }
.ca-proj-editor-footer { margin-top: 16px; text-align: right; }
.ca-proj-save-btn {
    padding: 8px 24px; background: #059669; color: white; border: none;
    border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ca-proj-save-btn:hover { background: #047857; }

/* Differentiation tab */
.ca-diff-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 6px 0; }
.ca-diff-name { flex: 0 0 140px; font-size: 12px; font-weight: 600; color: #111; }
.ca-diff-bar-wrap { flex: 1; height: 10px; background: #f0f0f0; border-radius: 5px; overflow: hidden; }
.ca-diff-bar { height: 100%; border-radius: 5px; transition: width 0.3s; }
.ca-diff-pct { font-size: 11px; font-weight: 600; color: #333; min-width: 80px; text-align: right; }
.ca-flag {
    display: inline-block; padding: 1px 6px; border-radius: 3px;
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
}
.ca-flag-iep { background: #dbeafe; color: #1d4ed8; }
.ca-flag-504 { background: #fef3c7; color: #92400e; }
.ca-flag-ell { background: #d1fae5; color: #065f46; }

.ca-impact-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.ca-impact-card {
    text-align: center; padding: 14px 10px; background: #f9fafb;
    border: 1px solid #e5e7eb; border-radius: 8px;
}
.ca-impact-label { font-size: 10px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.3px; }
.ca-impact-value { font-size: 22px; font-weight: 700; color: #111; margin-top: 4px; }
.ca-impact-sub { font-size: 10px; color: #9ca3af; margin-top: 2px; }

/* Insights tab */
.ca-insight-card {
    border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 8px;
    overflow: hidden;
}
.ca-insight-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; cursor: pointer; background: #f9fafb;
}
.ca-insight-header:hover { background: #f3f4f6; }
.ca-insight-name { font-size: 13px; font-weight: 600; color: #111; }
.ca-insight-chevron { font-size: 10px; color: #9ca3af; transition: transform 0.2s; }
.ca-insight-body { padding: 12px 14px; border-top: 1px solid #e5e7eb; }
.ca-insight-summary { font-size: 12px; color: #333; line-height: 1.6; margin-bottom: 10px; }
.ca-insight-section-label {
    font-size: 10px; font-weight: 700; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.4px; margin: 10px 0 6px;
}
.ca-trait-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; background: #f0f0f0; border-radius: 12px;
    font-size: 11px; font-weight: 600; margin: 0 4px 4px 0;
}
.ca-trait-name { color: #333; }
.ca-trait-conf { font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; }
.ca-conf-high { background: #d1fae5; color: #065f46; }
.ca-conf-medium { background: #fef3c7; color: #92400e; }
.ca-conf-low { background: #fee2e2; color: #991b1b; }
.ca-trait-desc { font-size: 11px; color: #6b7280; line-height: 1.5; margin: 2px 0 6px 8px; }
.ca-growth-item { font-size: 12px; color: #333; padding: 3px 0; }
.ca-suggestion-item {
    font-size: 11px; color: #333; padding: 6px 10px; background: #f0fdf4;
    border-left: 3px solid #059669; border-radius: 0 4px 4px 0; margin-bottom: 4px;
}

/* ===== NOTES TAB ===== */
.notes-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.notes-add-btn {
    padding: 5px 14px; font-size: 12px; font-weight: 700; background: #059669;
    color: white; border: none; border-radius: 4px; cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.notes-add-btn:hover { background: #047857; }
.notes-filter-bar { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.notes-filter-btn {
    padding: 4px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.3px; border: 1px solid #d1d5db; border-radius: 12px;
    background: white; color: #666; cursor: pointer; transition: all 0.15s;
}
.notes-filter-btn:hover { border-color: #059669; color: #059669; }
.notes-filter-btn.active { background: #059669; color: white; border-color: #059669; }
.notes-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 20px; text-align: center; color: #999;
}
.notes-empty-state-icon { font-size: 32px; margin-bottom: 10px; }
.notes-empty-state-title { font-size: 14px; font-weight: 700; color: #666; margin-bottom: 4px; }
.notes-empty-state-desc { font-size: 12px; color: #999; line-height: 1.5; }

/* ===== ANSWER BUTTON SYSTEM (shortAnswer / essay) ===== */
.nb-answer-row {
    display: flex; align-items: stretch; margin-bottom: 10px; height: 34px;
}
.nb-answer-toggle-btn {
    height: 34px; padding: 0 18px; font-size: 13px; font-weight: 600;
    border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer;
    background: #f3f4f6; color: #555; font-family: Arial, sans-serif;
    white-space: nowrap; flex-shrink: 0; position: relative; z-index: 2;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    display: inline-flex; align-items: center; box-sizing: border-box;
}
.nb-answer-toggle-btn:hover { background: #e5e7eb; color: #333; }
.nb-answer-toggle-btn.open { background: #059669; color: white; border-color: #059669; }

.nb-answer-options-slider {
    display: flex; align-items: stretch; overflow: hidden;
    max-width: 0; opacity: 0; margin-left: -6px; padding-left: 6px;
    transition: max-width 0.3s ease, opacity 0.2s ease; z-index: 1;
}
.nb-answer-options-slider.open { max-width: 400px; opacity: 1; }
.nb-answer-options-slider .nb-input-mode-btn {
    height: 34px; border-radius: 0; border-left: none;
    padding: 0 14px; font-size: 12px; margin: 0;
    display: inline-flex; align-items: center; box-sizing: border-box;
}
.nb-answer-options-slider .nb-input-mode-btn:last-child { border-radius: 0 6px 6px 0; }

.nb-input-mode-btn {
    padding: 10px 20px; font-size: 14px; font-weight: 600;
    border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer;
    transition: all 0.2s; background-color: #f3f4f6; color: #666;
    font-family: Arial, sans-serif; display: inline-flex; align-items: center; gap: 6px;
}
.nb-input-mode-btn:hover { background-color: #e5e7eb; color: #333; }
.nb-input-mode-btn.active { background-color: #059669; color: white; border-color: #059669; }

/* Response areas — hidden by default, visible when mode active */
.nb-response-area { display: none; margin-top: 8px; }
.nb-response-area.visible { display: block; }
.nb-response-area textarea {
    width: 100%; padding: 12px 14px; font-size: 14px; font-family: Arial, sans-serif;
    line-height: 1.6; border: 1px solid #e0e0e0; border-radius: 6px;
    background-color: #fefcf8; resize: vertical; outline: none;
    transition: border-color 0.2s, background-color 0.2s; color: #333; box-sizing: border-box;
}
.nb-response-area textarea:focus {
    border-color: #059669; background-color: #fff;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.08);
}
.nb-response-area textarea.readonly {
    background-color: #f3f4f6; border-color: #d1d5db; cursor: not-allowed; color: #374151;
}

/* Photo upload area */
.nb-photo-upload-area { margin-top: 8px; }
.nb-photo-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.nb-photo-thumb-wrapper { position: relative; width: 90px; height: 90px; }
.nb-photo-thumb {
    width: 90px; height: 90px; object-fit: cover; border-radius: 4px; border: 1px solid #e0e0e0;
    cursor: pointer; transition: border-color 0.15s;
}
.nb-photo-thumb:hover { border-color: #059669; }
.nb-photo-remove {
    position: absolute; top: -8px; right: -8px; width: 24px; height: 24px;
    border-radius: 50%; background-color: #dc2626; color: white;
    font-size: 13px; font-weight: 700; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; line-height: 1;
    transition: background-color 0.15s;
}
.nb-photo-remove:hover { background-color: #b91c1c; }
.nb-photo-add-btn {
    display: flex; align-items: center; justify-content: center;
    width: 90px; height: 90px; border: 2px dashed #ccc; border-radius: 6px;
    cursor: pointer; font-size: 24px; color: #999; transition: border-color 0.15s, color 0.15s;
}
.nb-photo-add-btn:hover { border-color: #059669; color: #059669; }
.nb-photo-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 16px; border: 2px dashed #d1d5db; border-radius: 8px;
    cursor: pointer; color: #999; transition: border-color 0.2s, color 0.2s;
}
.nb-photo-empty:hover { border-color: #059669; color: #059669; }
.nb-photo-empty-icon { font-size: 24px; margin-bottom: 4px; }
.nb-photo-empty-text { font-size: 12px; font-weight: 500; }

/* Doodle canvas preview (per-question) */
.nb-doodle-preview {
    border: 1px solid #e9ecef; border-radius: 6px; overflow: hidden;
    margin-top: 8px; background: #fff;
}
.nb-doodle-preview img {
    display: block; width: 100%; max-height: 200px; object-fit: contain;
    background: #fff; border-radius: 4px 4px 0 0;
}
.nb-doodle-preview-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; background: #f8f9fa; border-top: 1px solid #e9ecef;
    font-size: 11px; color: #999;
}
.nb-doodle-preview-bar span { display: flex; align-items: center; gap: 4px; }
.nb-doodle-preview-bar button {
    background: none; border: none; color: #dc2626; font-size: 11px;
    cursor: pointer; font-weight: 600; padding: 0;
}
.nb-doodle-preview-bar button:hover { text-decoration: underline; }

/* URL input + preview (essay only) */
.nb-url-input-area { margin-top: 8px; }
.nb-url-input-row {
    display: flex; align-items: center; gap: 8px;
}
.nb-url-input {
    flex: 1; padding: 8px 12px; font-size: 13px; font-family: Arial, sans-serif;
    border: 1px solid #e0e0e0; border-radius: 6px; outline: none;
    transition: border-color 0.2s; background: #fefcf8; color: #333; box-sizing: border-box;
}
.nb-url-input:focus { border-color: #059669; background: #fff; box-shadow: 0 0 0 2px rgba(5,150,105,0.08); }
.nb-url-input.invalid { border-color: #dc2626; }
.nb-url-input.valid { border-color: #059669; }
.nb-url-status {
    font-size: 16px; flex-shrink: 0; width: 20px; text-align: center;
}
.nb-url-preview {
    margin-top: 8px; border: 1px solid #d1fae5; border-radius: 8px;
    background: #f0fdf4; padding: 10px 14px; display: flex; align-items: center; gap: 10px;
}
.nb-url-preview-icon {
    font-size: 20px; flex-shrink: 0; color: #059669;
}
.nb-url-preview-info { flex: 1; min-width: 0; }
.nb-url-preview-title {
    font-size: 12px; font-weight: 700; color: #333; margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nb-url-preview-url {
    font-size: 11px; color: #059669; word-break: break-all;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nb-url-preview-actions { flex-shrink: 0; display: flex; gap: 6px; }
.nb-url-preview-actions a, .nb-url-preview-actions button {
    font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 4px;
    cursor: pointer; text-decoration: none; border: 1px solid #d1fae5;
    background: #fff; color: #059669; transition: all 0.15s;
}
.nb-url-preview-actions a:hover, .nb-url-preview-actions button:hover {
    background: #059669; color: #fff;
}
.nb-url-preview-actions button.nb-url-remove {
    color: #dc2626; border-color: #fecaca;
}
.nb-url-preview-actions button.nb-url-remove:hover {
    background: #dc2626; color: #fff;
}
.nb-url-error {
    margin-top: 4px; font-size: 11px; color: #dc2626; display: none;
}
.nb-url-error.visible { display: block; }

/* Photo lightbox (click to zoom) */
.nb-photo-lightbox {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.8); z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; animation: nbLightboxFadeIn 0.2s ease;
}
.nb-photo-lightbox img {
    max-width: 90vw; max-height: 90vh; object-fit: contain;
    border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
@keyframes nbLightboxFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== GOOGLE DRIVE FILE PICKER (student answer) ===== */
.nb-drive-area {
    padding: 8px;
}
.nb-drive-connect-prompt {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #f8f9fa;
    margin-top: 4px;
}
.nb-drive-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    font-size: 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    outline: none;
}
.nb-drive-search-input:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.1);
}
.nb-drive-file-list {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #fff;
}
.nb-drive-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid #f3f4f6;
}
.nb-drive-file-row:last-child { border-bottom: none; }
.nb-drive-file-row:hover { background: #f0f7ff; }
.nb-drive-file-row-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.nb-drive-file-row-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.nb-drive-selected-files {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e9ecef;
}
.nb-drive-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    background: #fff;
    margin-bottom: 6px;
}
.nb-drive-card-thumb {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid #e0e0e0;
    flex-shrink: 0;
}
.nb-drive-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: #f3f4f6;
    border-radius: 4px;
    flex-shrink: 0;
}
.nb-drive-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.nb-drive-card-info a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== DOODLE CANVAS ===== */
.doodle-spread-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 5; display: flex; flex-direction: column;
    background: #fefcf8; border-radius: 6px; pointer-events: all;
}
.doodle-spread-toolbar {
    display: flex; align-items: center; gap: 4px; padding: 8px 20px;
    border-bottom: 1px solid #e0e0e0; flex-shrink: 0; background: #fefcf8;
}
.doodle-tool-btn {
    width: 34px; height: 34px; border: 1px solid #d0d5dd; border-radius: 6px;
    background: #fff; font-size: 16px; cursor: pointer; display: flex;
    align-items: center; justify-content: center; transition: all 0.15s;
}
.doodle-tool-btn:hover { background: #f3f4f6; }
.doodle-tool-btn.active { background: #059669; color: #fff; border-color: #059669; }
.doodle-color-input {
    width: 34px; height: 34px; border: 1px solid #d0d5dd; border-radius: 6px;
    padding: 3px; cursor: pointer; background: #fff;
}
.doodle-clear-btn {
    padding: 6px 12px; font-size: 12px; font-weight: 600;
    border: 1px solid #d0d5dd; border-radius: 6px; background: #fff;
    color: #666; cursor: pointer; margin-left: auto;
}
.doodle-clear-btn:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.doodle-done-btn {
    padding: 6px 16px; font-size: 13px; font-weight: 600; color: #fff;
    background: #059669; border: none; border-radius: 4px; cursor: pointer;
    margin-left: 8px;
}
.doodle-done-btn:hover { background: #047857; }
.doodle-spread-canvas-wrap {
    flex: 1; min-height: 0; position: relative; cursor: crosshair; overflow: hidden; margin: 0;
}
.doodle-spread-canvas-wrap canvas { display: block; background: #fff; }
.nb-spread.doodle-active .nb-spine { background: #fefcf8; box-shadow: none; }
.nb-spread.doodle-active .nb-spine::after { display: none; }
.nb-spread.doodle-active .nb-page-left::after { display: none; }

/* ===== OVERLAY SHARED (left-tab overlays that take over both pages) ===== */
.nb-overlay-header {
    font-size: 16px; font-weight: 700; color: #333; margin-bottom: 14px;
    padding-bottom: 8px; border-bottom: 2px solid #e5e7eb;
}
.nb-overlay-subheader {
    font-size: 12px; font-weight: 700; color: #888; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 10px;
}

/* Submissions timeline */
.submissions-timeline { padding: 0; }
.submissions-unit-group { border: 1px solid #e9ecef; border-radius: 6px; margin-bottom: 8px; overflow: hidden; }
.submissions-unit-header {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    cursor: pointer; user-select: none; background: #f8f9fa; transition: background 0.15s;
}
.submissions-unit-header:hover { background: #f0f1f3; }
.submissions-unit-title { flex: 1; font-size: 13px; font-weight: 700; color: #333; }
.submissions-unit-count {
    font-size: 10px; font-weight: 700; color: #999; background: #e9ecef;
    padding: 1px 6px; border-radius: 8px; flex-shrink: 0;
}
.submissions-unit-chevron { font-size: 11px; color: #999; transition: transform 0.2s; }
.submissions-unit-group.expanded .submissions-unit-chevron { transform: rotate(90deg); }
.submissions-unit-body { display: none; border-top: 1px solid #e9ecef; background: #fff; }
.submissions-unit-group.expanded .submissions-unit-body { display: block; }
.submissions-slot {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px;
    border-bottom: 1px solid #f0f0f0; font-size: 13px; color: #444;
}
.submissions-slot:last-child { border-bottom: none; }
.submissions-status-icon { font-size: 14px; flex-shrink: 0; }
.submissions-slot-label { flex: 1; font-weight: 500; }

/* Practice overlay */
.practice-metric-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.practice-metric-card {
    text-align: center; padding: 10px 8px; background: #f8f9fa;
    border: 1px solid #e9ecef; border-radius: 6px;
}
.practice-metric-value { font-size: 20px; font-weight: 700; color: #059669; }
.practice-metric-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    color: #999; letter-spacing: 0.4px; margin-top: 2px;
}

/* ===== PAGE FLIP ANIMATION ===== */
.page-flip-overlay {
    position: absolute; top: 0; z-index: 20;
    transform-style: preserve-3d; pointer-events: none;
}
.page-flip-overlay.flip-forward { transform-origin: left center; animation: nbFlipForward 0.7s ease-in-out forwards; }
.page-flip-overlay.flip-backward { transform-origin: right center; animation: nbFlipBackward 0.7s ease-in-out forwards; }
.page-flip-face {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    backface-visibility: hidden; background-color: #fefcf8;
    background-image: repeating-linear-gradient(transparent, transparent 27px, rgba(200,195,185,0.25) 27px, rgba(200,195,185,0.25) 28px);
    background-position: 0 12px;
}
.page-flip-front-right { border-radius: 0 6px 6px 0; box-shadow: 2px 0 12px rgba(0,0,0,0.15); }
.page-flip-back-right { transform: rotateY(180deg); border-radius: 6px 0 0 6px; box-shadow: -2px 0 12px rgba(0,0,0,0.15); }
.page-flip-front-left { border-radius: 6px 0 0 6px; box-shadow: -2px 0 12px rgba(0,0,0,0.15); }
.page-flip-back-left { transform: rotateY(-180deg); border-radius: 0 6px 6px 0; box-shadow: 2px 0 12px rgba(0,0,0,0.15); }
@keyframes nbFlipForward { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(-180deg); } }
@keyframes nbFlipBackward { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(180deg); } }
.nb-page.flipping { opacity: 0.3; transition: opacity 0.15s ease; }
.page-content-fade { opacity: 0; transition: opacity 0.4s ease; }
.page-content-fade.visible { opacity: 1; }

/* ===== CREATE NOTE MODAL ===== */
.nb-note-modal-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3); z-index: 30; display: flex;
    align-items: center; justify-content: center;
}
.nb-note-modal {
    background: #fff; border-radius: 12px; width: 380px; max-width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2); overflow: hidden;
}
.nb-note-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #e5e7eb;
}
.nb-note-modal-title { font-size: 15px; font-weight: 700; color: #333; }
.nb-note-modal-close {
    width: 28px; height: 28px; border: none; background: none;
    font-size: 18px; color: #999; cursor: pointer; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
}
.nb-note-modal-close:hover { background: #f3f4f6; color: #333; }
.nb-note-modal-body { padding: 18px; }
.nb-note-modal-input {
    width: 100%; padding: 10px 12px; font-size: 13px; font-family: inherit;
    border: 1px solid #d1d5db; border-radius: 8px; resize: vertical; min-height: 100px;
    outline: none; box-sizing: border-box;
}
.nb-note-modal-input:focus { border-color: #059669; box-shadow: 0 0 0 2px rgba(5,150,105,0.1); }
.nb-note-modal-footer {
    display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px;
    border-top: 1px solid #e5e7eb;
}
.nb-note-modal-cancel {
    padding: 8px 16px; font-size: 13px; font-weight: 600;
    border: 1px solid #d1d5db; border-radius: 6px; background: #fff;
    color: #666; cursor: pointer;
}
.nb-note-modal-cancel:hover { background: #f3f4f6; }
.nb-note-modal-save {
    padding: 8px 16px; font-size: 13px; font-weight: 600;
    border: none; border-radius: 6px; background: #059669;
    color: #fff; cursor: pointer;
}
.nb-note-modal-save:hover { background: #047857; }

/* ===== ZOOM CONTROL (settings panel row) ===== */
.nb-zoom-row {
    display: flex; align-items: center; gap: 8px;
}
.nb-zoom-btn {
    flex: 0 0 auto; width: 32px; height: 32px;
    border: 2px solid #e5e7eb; border-radius: 8px;
    background: #fff; color: #444; font-size: 16px; font-weight: 700;
    cursor: pointer; transition: border-color 0.15s, background-color 0.15s;
    display: flex; align-items: center; justify-content: center;
}
.nb-zoom-btn:hover { border-color: #059669; background: #f0fdf4; color: #059669; }
/* Editable zoom value. Looks like the old static label, but clicking it lets
   the user type any whole percent between 75 and 150. */
.nb-zoom-inputwrap {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    gap: 1px; border-radius: 6px; padding: 0 4px;
    transition: background-color 0.15s, box-shadow 0.15s;
}
.nb-zoom-inputwrap:focus-within {
    background: #f0fdf4; box-shadow: 0 0 0 2px rgba(5,150,105,0.25);
}
.nb-zoom-input {
    width: 44px; padding: 0; border: none; background: transparent;
    text-align: right; font-size: 13px; font-weight: 700; color: #444;
    font-variant-numeric: tabular-nums; font-family: inherit; outline: none;
    -moz-appearance: textfield;
}
.nb-zoom-input::-webkit-outer-spin-button,
.nb-zoom-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.nb-zoom-pct { font-size: 13px; font-weight: 700; color: #444; }

/* Wallpaper hint */
.nb-wallpaper-hint {
    margin-top: 6px; font-size: 11px; color: #888; line-height: 1.4;
}
.nb-wallpaper-hint > span:first-child { color: #059669; font-weight: 600; margin-right: 4px; }
.nb-wallpaper-hint > span:first-child:empty { display: none; }

/* ============================================================
   COZY DARK MODE
   ------------------------------------------------------------
   Goals: the notebook still reads as a notebook, just at night.
   Palette is warm (parchment-cream text on near-black-brown),
   not the flat #1a1a1a / pure-blue dark of the previous pass.
   Section cards inside .nb-page used to render with inline
   white backgrounds — the [style*=...] overrides at the bottom
   of this block force-darken every common inline color so the
   "white cards inside a dark page" bug is gone.
   ============================================================ */

/* --- Frame: desk, spread, spine, pages --- */
.nb-dark .nb-desk {
    background-color: #14110d !important;
    background-image: radial-gradient(ellipse at 50% 30%, rgba(255,200,140,0.05) 0%, transparent 70%) !important;
}
.nb-dark .nb-page {
    background-color: #1f1c17;
    background-image: repeating-linear-gradient(transparent, transparent 27px, rgba(255,210,160,0.05) 27px, rgba(255,210,160,0.05) 28px);
    color: #e8dfd1;
}
.nb-dark .nb-page-left {
    box-shadow: -3px 0 8px -4px rgba(0,0,0,0.5) inset, -4px 4px 16px rgba(0,0,0,0.5);
}
.nb-dark .nb-page-left::after { background-color: rgba(220,80,80,0.10); }
.nb-dark .nb-page-right {
    box-shadow: 3px 0 8px -4px rgba(0,0,0,0.5) inset, 4px 4px 16px rgba(0,0,0,0.5);
}
.nb-dark .nb-spine {
    background: linear-gradient(to right, #3a2f24 0%, #2e251b 15%, #261e16 30%, #1a1410 50%, #261e16 70%, #2e251b 85%, #3a2f24 100%);
    box-shadow: -3px 0 6px -2px rgba(0,0,0,0.5), 3px 0 6px -2px rgba(0,0,0,0.5), inset 0 0 8px rgba(0,0,0,0.4);
}
.nb-dark .nb-spine::after {
    background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 8px, rgba(255,200,140,0.10) 8px, rgba(255,200,140,0.10) 12px, transparent 12px, transparent 20px);
}

/* --- Title bar + lesson dropdowns --- */
.nb-dark .nb-title-bar { background-color: #1a1611; border-bottom-color: #3a302a; }
.nb-dark .nb-title-bar-name { color: #f0e6d4; }
.nb-dark .nb-title-bar-sep { color: #6a5a4a; }
.nb-dark .nb-title-bar-lesson-label { color: #b8a890; }
.nb-dark .tb-lesson-dropdown {
    background: #1f1c17; border-color: #3a302a;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.nb-dark .tb-lesson-dropdown-item { color: #d8cdb8; }
.nb-dark .tb-lesson-dropdown-item:hover { background: #2a241d; }
.nb-dark .tb-lesson-dropdown-item-num { color: #8a7e6a; }
.nb-dark .tb-lesson-unit-title { color: #8a7e6a; }
.nb-dark .tb-lesson-item { color: #d8cdb8; }
.nb-dark .tb-lesson-item:hover { background: #2a241d; }
.nb-dark .tb-lesson-item.active { background: #1f3a2a; color: #6ee7b7; }
.nb-dark .tb-open-lesson-btn { background: #2d2855; color: #b8a5fc; border-color: #4338ca; }
.nb-dark .tb-open-lesson-btn:hover { background: #3730a3; }
.nb-dark .student-nav-btn { background: #1f1c17; border-color: #3a302a; color: #d8cdb8; }
.nb-dark .student-nav-btn:hover { background: #2a241d; }
.nb-dark .student-nav-select { background: #1f1c17; border-color: #3a302a; color: #d8cdb8; }

/* --- Right-page header (date + lesson picker) --- */
.nb-dark .nb-rp-header { background-color: #1a1611; border-bottom-color: #3a302a; }
.nb-dark .nb-rp-header-date { color: #6ee7b7; }
.nb-dark .nb-rp-header-lesson { color: #b8a890; }
.nb-dark .nb-rp-header-info:hover { background: #2a241d; }
.nb-dark .nb-lesson-nav-btn { background: #1f1c17; border-color: #3a302a; color: #d8cdb8; }
.nb-dark .nb-lesson-nav-btn:hover { background: #2a241d; }
.nb-dark .nb-rp-lesson-dropdown { background: #1f1c17; border-color: #3a302a; }
.nb-dark #nbTodayBtn { background: #1f3a2a; color: #6ee7b7; border-color: #065f46; }

/* --- Left-page lesson-plan tabs --- */
.nb-dark .nb-lp-tabs { background-color: #1a1611; }
.nb-dark .nb-lp-tab { color: #a89a82; }
.nb-dark .nb-lp-tab:hover { background-color: #2a241d; color: #d8cdb8; }
.nb-dark .nb-lp-tab.active { background-color: #065f46; color: #fff; }

/* --- Binder tabs (left + right) --- */
.nb-dark .nb-tab-left { background-color: #2a241d; border-color: #3a302a; }
.nb-dark .nb-tab-left:hover { background-color: #342c23; }
.nb-dark .nb-tab-left .nb-tab-text { color: #c8bda8; }
.nb-dark .nb-tab-right { background-color: #2a241d; border-color: #3a302a; }
.nb-dark .nb-tab-right:hover { background-color: #342c23; }
.nb-dark .nb-tab-right .nb-tab-text { color: #c8bda8; }
.nb-dark .nb-tab-right[data-section="doNow"] { background-color: #1f3a2a; }
.nb-dark .nb-tab-right[data-section="classNotes"] { background-color: #1f2a3a; }
.nb-dark .nb-tab-right[data-section="exitTicket"] { background-color: #3a1f2a; }
.nb-dark .nb-tab-right.active .nb-tab-text { color: #fff; }
.nb-dark .nb-tab-left.active .nb-tab-text { color: #fff; }

/* --- FAB + flyout + in-spread settings button --- */
.nb-dark .nb-add-btn { background: rgba(255,210,160,0.18); }
.nb-dark .nb-add-btn:hover { background: rgba(255,210,160,0.28); }
.nb-dark .nb-flyout { background: #1f1c17; border-color: #3a302a; }
.nb-dark .nb-flyout::after { border-left-color: #1f1c17; }
.nb-dark .nb-flyout::before { border-left-color: #3a302a; }
.nb-dark .nb-flyout-item { color: #d8cdb8; }
.nb-dark .nb-flyout-item:hover { background: #2a241d; }
.nb-dark .nb-settings-btn { background: rgba(255,210,160,0.18); }
.nb-dark .nb-settings-btn:hover { background: rgba(255,210,160,0.28); }

/* --- Settings panel itself --- */
.nb-dark .nb-settings-panel { background: #1f1c17; border-color: #3a302a; color: #e8dfd1; }
.nb-dark .nb-settings-header { border-bottom-color: #3a302a; }
.nb-dark .nb-settings-title { color: #f0e6d4; }
.nb-dark .nb-settings-close { color: #b8a890; }
.nb-dark .nb-settings-close:hover { background: #2a241d; color: #f0e6d4; }
.nb-dark .nb-settings-section { border-bottom-color: #2e2620; }
.nb-dark .nb-settings-label { color: #8a7e6a; }
.nb-dark .nb-settings-sublabel { color: #8a7e6a; }
.nb-dark .nb-settings-paper-labels span,
.nb-dark .nb-settings-tab-labels span,
.nb-dark .nb-settings-font-labels span { color: #6e6354; }
.nb-dark .nb-paper-btn { border-color: #3a302a; }
.nb-dark .nb-tab-btn { border-color: #3a302a; }
.nb-dark .nb-font-btn { background: #1a1611; border-color: #3a302a; color: #d8cdb8; }
.nb-dark .nb-font-btn:hover { border-color: #6ee7b7; }
.nb-dark .nb-font-btn.active { background: #1f3a2a; color: #6ee7b7; border-color: #065f46; }
.nb-dark .nb-theme-btn { background: #1a1611; border-color: #3a302a; color: #d8cdb8; }
.nb-dark .nb-theme-btn.active { background: #1f3a2a; color: #6ee7b7; border-color: #065f46; }
.nb-dark .nb-settings-action-btn { background: #1a1611; border-color: #3a302a; color: #d8cdb8; }
.nb-dark .nb-settings-action-btn:hover { background: #2a241d; }
.nb-dark .nb-color-input { background: #1a1611; border-color: #3a302a; }
.nb-dark .nb-zoom-btn { background: #1a1611; border-color: #3a302a; color: #d8cdb8; }
.nb-dark .nb-zoom-btn:hover { background: #1f3a2a; border-color: #065f46; color: #6ee7b7; }
.nb-dark .nb-zoom-input,
.nb-dark .nb-zoom-pct { color: #e8dfd1; }
.nb-dark .nb-zoom-inputwrap:focus-within {
    background: #1f3a2a; box-shadow: 0 0 0 2px rgba(110,231,183,0.25);
}
.nb-dark .nb-wallpaper-hint { color: #8a7e6a; }

/* --- Empty / placeholder sections --- */
.nb-dark .nb-empty-section-title { color: #d8cdb8; }
.nb-dark .nb-empty-section-desc { color: #8a7e6a; }
.nb-dark .nb-rp-content::-webkit-scrollbar-thumb { background: #3a302a; }
.nb-dark .nb-lp-content::-webkit-scrollbar-thumb { background: #3a302a; }

/* --- Overview cards (top of right page) --- */
.nb-dark .overview-teacher-message {
    background: linear-gradient(135deg, #3a2f10 0%, #4a3a14 100%);
    border-color: #8a6e2e;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.3);
}
.nb-dark .overview-teacher-message::before { background: rgba(110,231,183,0.4); }
.nb-dark .overview-teacher-message-from { color: #f0e6d4; }
.nb-dark .overview-prev-lesson {
    background: linear-gradient(135deg, #1a2335 0%, #1e2840 100%);
    border-color: #3b6abf;
}
.nb-dark .overview-prev-lesson-badge { background: #2563eb; color: #fff; }

/* --- Question / activity / analytics cards --- */
.nb-dark .cn-question { background: #2a241d; border-color: #3a302a; }
.nb-dark .cn-question-label { color: #c8bda8; border-bottom-color: #3a302a; }
.nb-dark .cn-question-text { color: #e8dfd1; }
.nb-dark .nb-section-title { color: #f0e6d4; }
.nb-dark .nb-section-edit-btn {
    background: #2a241d; border-color: #3a302a; color: #d8cdb8;
}
.nb-dark .nb-section-edit-btn:hover { background: #342c23; }
.nb-dark .analytics-metric-card { background: #2a241d; border-color: #3a302a; }
.nb-dark .analytics-metric-value { color: #6ee7b7; }
.nb-dark .analytics-metric-value.neutral { color: #e8dfd1; }
.nb-dark .analytics-metric-label { color: #8a7e6a; }
.nb-dark .analytics-breakdown-row { border-bottom-color: #3a302a; }
.nb-dark .analytics-breakdown-title { color: #f0e6d4; }
.nb-dark .analytics-breakdown-label { color: #e8dfd1; }
.nb-dark .analytics-breakdown-value { color: #e8dfd1; }
.nb-dark .analytics-chart-wrap { background: #2a241d; border-color: #3a302a; }

/* --- Overlays, modals, materials --- */
.nb-dark .nb-overlay-header { color: #f0e6d4; border-bottom-color: #3a302a; }
.nb-dark .nb-overlay-subheader { color: #8a7e6a; }
.nb-dark .nb-note-modal { background: #1f1c17; }
.nb-dark .nb-note-modal-header { border-bottom-color: #3a302a; }
.nb-dark .nb-note-modal-title { color: #f0e6d4; }
.nb-dark .nb-note-modal-input { background: #1a1611; border-color: #3a302a; color: #e8dfd1; }
.nb-dark .nb-note-modal-footer { border-top-color: #3a302a; }
.nb-dark .nb-note-modal-cancel { background: #2a241d; color: #d8cdb8; border-color: #3a302a; }
.nb-dark .nb-note-modal-cancel:hover { background: #342c23; }
.nb-dark .materials-subtabs { border-bottom-color: #3a302a; }
.nb-dark .materials-subtab { color: #8a7e6a; }
.nb-dark .materials-subtab:hover { color: #d8cdb8; background: rgba(255,210,160,0.05); }
.nb-dark .materials-subtab.active { color: #6ee7b7; border-bottom-color: #6ee7b7; }
.nb-dark .materials-viewer { background: #14110d; border-color: #3a302a; }
.nb-dark .nb-mat-subtabs { border-bottom-color: #3a302a; }
.nb-dark .nb-mat-subtab { color: var(--stc, #8a7e6a); }
.nb-dark .nb-mat-subtab:hover { background: rgba(255,210,160,0.05); }
.nb-dark .nb-mat-subtab-add { background: #1f3a2a; color: #6ee7b7; }
.nb-dark .nb-mat-subtab-add:hover { background: #065f46; }
.nb-dark .nb-binder-add { background: #2a241d; border-color: #3a302a; color: #8a7e6a; }
.nb-dark .nb-binder-add:hover { background: #342c23; border-color: #5a4e3e; color: #d8cdb8; }
.nb-dark .nb-tab-color-trigger { border-color: rgba(255,210,160,0.2); }
.nb-dark .nb-subtab-color-trigger { border-color: rgba(255,210,160,0.2); }

/* ============================================================
   INLINE-STYLE OVERRIDES
   ------------------------------------------------------------
   Render functions in class-placeholder-app.js sprinkle inline
   `style="background:#fff..."` on cards, instruction boxes, badges
   etc. Inline styles outrank class selectors, so the only way to
   darken them without a render refactor is attribute substring
   selectors with !important. Scoped to .nb-dark .nb-page so we
   don't touch the rest of the app.
   ============================================================ */

/* Whites + light greys → warm dark card surface */
.nb-dark .nb-page [style*="background:#fff"],
.nb-dark .nb-page [style*="background: #fff"],
.nb-dark .nb-page [style*="background:white"],
.nb-dark .nb-page [style*="background-color:#fff"],
.nb-dark .nb-page [style*="background-color: #fff"],
.nb-dark .nb-page [style*="background:#fafafa"],
.nb-dark .nb-page [style*="background: #fafafa"],
.nb-dark .nb-page [style*="background:#f8f9fa"],
.nb-dark .nb-page [style*="background: #f8f9fa"],
.nb-dark .nb-page [style*="background:#f9fafb"],
.nb-dark .nb-page [style*="background: #f9fafb"],
.nb-dark .nb-page [style*="background:#f3f4f6"],
.nb-dark .nb-page [style*="background: #f3f4f6"],
.nb-dark .nb-page [style*="background:#f0f0f0"],
.nb-dark .nb-page [style*="background: #f0f0f0"],
.nb-dark .nb-page [style*="background:#eaeaea"],
.nb-dark .nb-page [style*="background:#e9ecef"],
.nb-dark .nb-page [style*="background:#e8e8e8"],
.nb-dark .nb-page [style*="background:#d4d4d4"],
.nb-dark .nb-page [style*="background:#d0d0d0"],
.nb-dark .nb-page [style*="background:#faf8f4"],
.nb-dark .nb-page [style*="background:#e4e0d8"],
.nb-dark .nb-page [style*="background:#d8d4cc"] {
    background-color: #2a241d !important;
    background-image: none !important;
}

/* Green tints (success, teacher view, objective) */
.nb-dark .nb-page [style*="background:#f0fdf4"],
.nb-dark .nb-page [style*="background: #f0fdf4"],
.nb-dark .nb-page [style*="background:#d1fae5"] {
    background-color: #16382a !important;
    color: #6ee7b7 !important;
}

/* Blue tints (info / differentiation notice) */
.nb-dark .nb-page [style*="background:#eff6ff"],
.nb-dark .nb-page [style*="background: #eff6ff"],
.nb-dark .nb-page [style*="background:#dbeafe"] {
    background-color: #1a2540 !important;
    color: #93c5fd !important;
}

/* Yellow tints (caution, locked) */
.nb-dark .nb-page [style*="background:#fffbeb"],
.nb-dark .nb-page [style*="background: #fffbeb"] {
    background-color: #3a2f10 !important;
    color: #fbbf24 !important;
}

/* Light borders → warm dark border */
.nb-dark .nb-page [style*="border:1px solid #e0e0e0"],
.nb-dark .nb-page [style*="border:1px solid #e9ecef"],
.nb-dark .nb-page [style*="border:1px solid #d1d5db"],
.nb-dark .nb-page [style*="border:1px solid #d0d5dd"],
.nb-dark .nb-page [style*="border:1px solid #e5e7eb"] {
    border-color: #3a302a !important;
}

/* Dark text → warm parchment text. Skip accent colors (green/blue/red/amber). */
.nb-dark .nb-page [style*="color:#333"],
.nb-dark .nb-page [style*="color: #333"],
.nb-dark .nb-page [style*="color:#444"],
.nb-dark .nb-page [style*="color: #444"],
.nb-dark .nb-page [style*="color:#555"],
.nb-dark .nb-page [style*="color: #555"],
.nb-dark .nb-page [style*="color:#1a1a1a"],
.nb-dark .nb-page [style*="color:#374151"] {
    color: #e8dfd1 !important;
}
.nb-dark .nb-page [style*="color:#666"],
.nb-dark .nb-page [style*="color: #666"],
.nb-dark .nb-page [style*="color:#6b7280"],
.nb-dark .nb-page [style*="color:#888"],
.nb-dark .nb-page [style*="color:#999"],
.nb-dark .nb-page [style*="color: #999"],
.nb-dark .nb-page [style*="color:#9ca3af"] {
    color: #a89a82 !important;
}

/* Textareas / inputs inside the page in dark mode */
.nb-dark .nb-page textarea,
.nb-dark .nb-page input[type="text"],
.nb-dark .nb-page input[type="number"] {
    background-color: #1a1611 !important;
    border-color: #3a302a !important;
    color: #e8dfd1 !important;
}
.nb-dark .nb-page textarea::placeholder,
.nb-dark .nb-page input::placeholder { color: #6e6354 !important; }

/* ========== EXTERNAL DATA MODAL ========== */
.exd-overlay {
    display: none; position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2000;
    justify-content: center; align-items: center;
}
.exd-overlay.active { display: flex; }
.exd-modal {
    background-color: white; border-radius: 10px;
    width: 960px; max-width: 95vw;
    height: 88vh; max-height: 95vh;
    display: flex; flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    overflow: hidden;
}
.exd-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid #e0e0e0; flex-shrink: 0;
}
.exd-header-left { display: flex; align-items: center; gap: 8px; }
.exd-header-title { font-size: 18px; font-weight: 700; color: #1a1a1a; }
.exd-header-right { display: flex; align-items: center; gap: 8px; }
.exd-back-btn {
    width: 32px; height: 32px; border: none; background: none;
    font-size: 20px; color: #666; cursor: pointer; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.15s, color 0.15s;
}
.exd-back-btn:hover { background: #f0f0f0; color: #333; }
.exd-close-btn {
    width: 32px; height: 32px; border: none; background: none;
    font-size: 20px; color: #999; cursor: pointer; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}
.exd-close-btn:hover { background-color: #f0f0f0; color: #333; }
.exd-body { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.exd-panel { display: none; flex-direction: column; height: 100%; }
.exd-panel.active { display: flex; }

/* List view */
.exd-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; height: 100%; padding: 40px;
    text-align: center;
}
.exd-empty-icon { font-size: 48px; margin-bottom: 16px; }
.exd-empty-title { font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
.exd-empty-desc { font-size: 13px; color: #666; line-height: 1.6; max-width: 380px; margin-bottom: 24px; }
.exd-list-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
}
.exd-list-header span { font-size: 14px; font-weight: 700; color: #333; text-transform: uppercase; letter-spacing: 0.5px; }
.exd-btn-add {
    padding: 5px 14px; font-size: 12px; font-weight: 600; color: white;
    background-color: #059669; border: none; border-radius: 6px;
    cursor: pointer; transition: background-color 0.2s;
}
.exd-btn-add:hover { background-color: #047857; }
.exd-dataset-card {
    display: flex; align-items: center; padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0; cursor: pointer;
    transition: background-color 0.15s;
}
.exd-dataset-card:hover { background-color: #f8faf9; }
.exd-dataset-card-main { flex: 1; min-width: 0; }
.exd-dataset-title { font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; }
.exd-dataset-desc { font-size: 12px; color: #666; line-height: 1.4; margin-bottom: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exd-dataset-meta { font-size: 11px; color: #999; }
.exd-dataset-actions { flex-shrink: 0; margin-left: 12px; }
.exd-dataset-action-btn {
    width: 32px; height: 32px; border: none; background: none;
    font-size: 16px; color: #ccc; cursor: pointer; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.15s, background-color 0.15s;
}
.exd-dataset-action-btn:hover { color: #dc2626; background-color: #fef2f2; }

/* Editor view */
.exd-meta-section {
    padding: 16px 20px; border-bottom: 1px solid #e0e0e0; flex-shrink: 0;
}
.exd-field { margin-bottom: 12px; }
.exd-field:last-child { margin-bottom: 0; }
.exd-label {
    display: block; font-size: 11px; font-weight: 700; color: #666;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;
}
.exd-input {
    width: 100%; padding: 7px 10px; font-size: 13px; border: 1px solid #e0e0e0;
    border-radius: 5px; background-color: #f8f9fa; outline: none;
    transition: border-color 0.2s; box-sizing: border-box;
}
.exd-input:focus { border-color: #059669; background-color: white; }
.exd-textarea {
    width: 100%; padding: 7px 10px; font-size: 13px; border: 1px solid #e0e0e0;
    border-radius: 5px; background-color: #f8f9fa; outline: none;
    transition: border-color 0.2s; resize: vertical; font-family: inherit;
    box-sizing: border-box;
}
.exd-textarea:focus { border-color: #059669; background-color: white; }

/* Data entry table */
.exd-data-section { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.exd-table-wrap { flex: 1; overflow: auto; min-height: 0; }
.exd-table-inner { min-width: fit-content; }
.exd-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px; flex-shrink: 0; gap: 12px;
}
.exd-section-desc { font-size: 13px; color: #666; }
.exd-toolbar-actions { display: flex; gap: 6px; flex-shrink: 0; position: relative; }
.exd-toolbar-btn {
    padding: 5px 12px; font-size: 11px; font-weight: 600; color: #374151;
    background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 5px;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.exd-toolbar-btn:hover { background: #e5e7eb; border-color: #059669; color: #059669; }
.exd-row-header {
    display: flex; align-items: center; padding: 8px 20px;
    background-color: #f8f9fa; border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0; gap: 8px;
    position: sticky; top: 0; z-index: 2;
}
.exd-row-header .exd-col {
    font-size: 11px; font-weight: 700; color: #666;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.exd-col-num { width: 28px; text-align: center; flex-shrink: 0; }
.exd-col-name { width: 160px; flex-shrink: 0; }
.exd-col-data {
    flex: 0 0 110px; width: 110px; display: flex; align-items: center; gap: 4px;
}
.exd-col-type-badge {
    font-size: 9px; color: #999; font-weight: 400; text-transform: none; letter-spacing: 0;
    flex-shrink: 0;
}
.exd-col-label-edit {
    border: none; outline: none; background: transparent; font-size: 10px; font-weight: 700;
    color: #666; text-transform: uppercase; letter-spacing: 0.3px; padding: 2px 0;
    min-width: 0; flex: 1; cursor: text; width: 100%; box-sizing: border-box;
}
.exd-col-label-edit:hover { color: #333; }
.exd-col-label-edit:focus { color: #059669; background: white; border-radius: 3px; padding: 2px 4px; }
.exd-col-remove {
    background: none; border: none; color: #ccc; font-size: 14px;
    cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0;
}
.exd-col-remove:hover { color: #dc2626; }
.exd-rows { padding: 4px 0; }
.exd-row {
    display: flex; align-items: center; padding: 6px 20px;
    gap: 8px; border-bottom: 1px solid #f0f0f0;
}
.exd-row:last-child { border-bottom: none; }
.exd-row .exd-col-num { font-size: 12px; color: #999; }
.exd-student-name { font-size: 13px; color: #333; font-weight: 500; }
.exd-row .exd-input {
    padding: 5px 8px; font-size: 13px; border: 1px solid #e0e0e0;
    border-radius: 4px; background-color: #f8f9fa; outline: none;
    transition: border-color 0.2s; flex: 1; min-width: 0;
    width: auto; box-sizing: border-box;
}
.exd-row .exd-input:focus { border-color: #059669; background-color: white; }
.exd-row .exd-input-long {
    font-size: 13px; border: 1px solid #e0e0e0; border-radius: 4px;
    background-color: #f8f9fa; outline: none; transition: border-color 0.2s;
    flex: 1; min-width: 0; padding: 5px 8px; font-family: inherit;
    resize: none; width: 100%; box-sizing: border-box;
}
.exd-row .exd-input-long:focus { border-color: #059669; background-color: white; }
.exd-no-students {
    padding: 40px 20px; text-align: center; color: #999; font-size: 13px;
}

/* Column type menu */
.exd-col-menu {
    position: absolute; top: 100%; right: 0; margin-top: 4px;
    background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 6px 0;
    min-width: 200px; z-index: 10;
}
.exd-col-menu-item {
    display: flex; flex-direction: column; width: 100%;
    padding: 8px 14px; border: none; background: none;
    cursor: pointer; text-align: left; transition: background 0.15s;
}
.exd-col-menu-item:hover { background: #f0fdf4; }
.exd-col-menu-label { font-size: 13px; font-weight: 600; color: #333; }
.exd-col-menu-desc { font-size: 11px; color: #999; margin-top: 2px; }

/* Footer */
.exd-footer {
    padding: 12px 20px; border-top: 1px solid #e0e0e0;
    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}
.exd-footer-info { font-size: 12px; color: #999; }
.exd-footer-actions { display: flex; gap: 8px; }
.exd-btn-cancel {
    padding: 7px 16px; font-size: 12px; font-weight: 600; color: #666;
    background-color: white; border: 1px solid #e0e0e0; border-radius: 6px;
    cursor: pointer; transition: background-color 0.2s;
}
.exd-btn-cancel:hover { background-color: #f8f9fa; }
.exd-btn-primary {
    padding: 7px 20px; font-size: 12px; font-weight: 600; color: white;
    background-color: #059669; border: none; border-radius: 6px;
    cursor: pointer; transition: background-color 0.2s;
}
.exd-btn-primary:hover { background-color: #047857; }

/* External Data button in roster toolbar */
.exd-open-btn {
    background-color: #f3f4f6 !important; color: #374151 !important;
    border: 1px solid #d1d5db !important;
}
.exd-open-btn:hover {
    background-color: #e5e7eb !important; border-color: #059669 !important;
    color: #059669 !important;
}

/* External data columns — compact width so many columns can fit */
.rv-th-exd { width: 70px; text-align: center; font-size: 11px; }
.rv-col-exd { font-size: 12px; color: #555; text-align: center; white-space: nowrap; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }

/* External data CSV mapping panel */
.exd-mapping-inner {
    display: flex; flex-direction: column; height: 100%;
    padding: 20px 24px;
}
.exd-mapping-inner .csvm-columns-list { flex: 1; overflow-y: auto; max-height: none; }
.exd-mapping-inner .csvm-import-btn { margin-top: 16px; }
.exd-mapping-inner .csvm-cancel-btn { margin-top: 8px; }
.csvm-col-name-wrap { flex: 1; min-width: 0; }
.csvm-col-name-wrap .csvm-col-name { display: block; }
.exd-csvm-sample {
    display: block; font-size: 11px; color: #999; font-weight: 400;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px; font-style: italic;
}

/* ===== Lesson Plans — Units View ===== */
.lp-units-view {
    width: 100%;
    max-width: 560px;
    padding: 36px 32px;
    background: white;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    text-align: center;
}

.lp-units-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px;
}

.lp-units-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 0 0 24px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.lp-units-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 16px;
}

.lp-add-unit-btn {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #059669;
    background: white;
    border: 1px solid #059669;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.lp-add-unit-btn:hover {
    background: #f0fdf4;
}

.lp-unit-card {
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: visible;
    text-align: left;
}

.lp-unit-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #eee;
    border-radius: 10px 10px 0 0;
}

.lp-unit-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
}

.lp-unit-card-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lp-unit-edit-btn {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #059669;
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
}

.lp-unit-edit-btn:hover {
    border-color: #059669;
    background: #f0fdf4;
}

.lp-unit-delete-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
    color: #9ca3af;
    background: none;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-unit-delete-btn:hover {
    color: #ef4444;
    border-color: #fecaca;
    background: #fef2f2;
}

.lp-unit-card-meta {
    display: flex;
    gap: 16px;
    padding: 8px 18px;
    border-bottom: 1px solid #eee;
}

.lp-unit-card-meta span {
    font-size: 12px;
    color: #888;
}

.lp-unit-card-body {
    padding: 14px 18px;
    text-align: center;
}

.lp-unit-card-empty {
    font-size: 13px;
    color: #bbb;
    margin: 0 0 12px;
    font-style: italic;
}

.lp-unit-card-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.lp-unit-add-lesson-btn {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: white;
    background: #059669;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.lp-unit-add-lesson-btn:hover { background: #047857; }

.lp-unit-batch-btn {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #059669;
    background: none;
    border: 1px solid #059669;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.lp-unit-batch-btn:hover { background: #f0fdf4; }

/* ===== REAL LESSON PLANS VIEW ===== */
.lp-real-view {
    padding: 0;
    width: 100%;
}
.lp-real-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.lp-real-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.3px;
    margin: 0;
}
.lp-real-header-actions {
    display: flex;
    gap: 8px;
}
.lp-edit-curriculum-btn {
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.lp-edit-curriculum-btn:hover {
    background: #f9fafb;
    color: #059669;
    border-color: #059669;
}

/* Library button is the primary CTA on this page — pronounce it. */
.lp-library-btn {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 700;
    color: #065f46;
    background: #ecfdf5;
    border-color: #10b981;
}
.lp-library-btn:hover {
    background: #d1fae5;
    color: #064e3b;
    border-color: #047857;
}

/* Unit accordion */
.lp-real-unit {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 12px;
    width: 100%;
    overflow: hidden;
    background: white;
    position: relative;
    z-index: 1;
}
.lp-real-unit.has-open-dropdown {
    z-index: 9999;
    overflow: visible;
}
.lp-real-unit-header {
    padding: 12px 20px;
    background: #f8f9fa;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.15s;
    border-bottom: 2px solid #e0e0e0;
}
.lp-real-unit-header:hover { background: #eef0f2; }
.lp-real-unit-header.active { background: #eef0f2; border-bottom: 2px solid #e0e0e0; }
.lp-real-unit-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.lp-real-unit-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lp-real-unit-actions .unit-btn {
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.lp-real-unit-actions .unit-btn:hover { color: #059669; border-color: #059669; background: #f0fdf4; }

/* Unit settings kebab */
.lp-unit-settings {
    font-size: 14px;
    color: #666;
    cursor: pointer;
    padding: 4px 8px;
    transition: all 0.2s;
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    line-height: 1;
}
.lp-unit-settings:hover {
    background: #f9fafb;
    color: #059669;
    border-color: #059669;
}
.lp-unit-settings-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: none;
    z-index: 10000;
    min-width: 150px;
    margin-top: 5px;
}
.lp-unit-settings-dropdown.open { display: block; }
.lp-unit-dropdown-item {
    padding: 10px 15px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}
.lp-unit-dropdown-item:hover { background: #e9ecef; color: #059669; }
.lp-unit-dropdown-item:first-child { border-radius: 4px 4px 0 0; }
.lp-unit-dropdown-item:last-child { border-radius: 0 0 4px 4px; }
.lp-unit-dropdown-item.delete { color: #dc2626; }
.lp-unit-dropdown-item.delete:hover { background: #fee2e2; color: #dc2626; }

/* Collapsible content */
.lp-real-unit-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.lp-real-unit-content.open { max-height: 2000px; }
.lp-real-unit.has-open-dropdown .lp-real-unit-content { overflow: visible; }

/* Lessons table — 7 columns */
.lp-real-table {
    width: 100%;
    border-collapse: collapse;
}
.lp-real-table thead { background: #f8f9fa; }
.lp-real-table th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e0e0e0;
}
/* Column widths: 1=drag, 2=checkbox, 3=lesson#, 4=lesson title (flex), 5=date, 6=status, 7=differentiated, 8=reflection, 9=analytics, 10=kebab */
.lp-real-table th.lp-col-drag,
.lp-real-table td.lp-col-drag { width: 28px; text-align: center; padding-left: 6px; padding-right: 0; }
.lp-real-table th.lp-col-select,
.lp-real-table td.lp-col-select { width: 32px; text-align: center; padding-left: 4px; padding-right: 4px; }
.lp-real-table th.lp-col-num,
.lp-real-table td.lp-col-num { width: 48px; text-align: center; }

/* "Set" pill — appears in the Date cell when a lesson has no scheduled date.
   Subtle by default so it doesn't pull eyes away from real dates; greens up
   on hover to invite the click. */
.lp-set-date-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: #f3f4f6;
    color: #6b7280;
    border: 1px dashed #d1d5db;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.lp-set-date-pill:hover {
    background: #ecfdf5;
    color: #059669;
    border-color: #059669;
    border-style: solid;
}

/* Scheduled-date pill — clickable to re-open the calendar picker so the
   teacher can reassign or unlink. Sized to match the Draft status pill
   next to it; palette is derived from the class's accent color via the
   --tc-pill-rgb CSS variable injected inline at render time, so each
   class's row inherits its sidebar identity. */
.lp-date-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.lp-date-pill:hover {
    /* Inline style already paints rgba(--tc-pill-rgb, 0.15) on the base;
       deepen to 0.25 on hover for an unmistakable affordance. */
    background: rgba(var(--tc-pill-rgb, 99, 102, 241), 0.25) !important;
    border-color: rgba(var(--tc-pill-rgb, 99, 102, 241), 0.55) !important;
}
.lp-date-pill:active { transform: translateY(0.5px); }

/* Drag handle: 6-dots icon. Visible on row hover, full opacity on its own
   hover so the whole row stays calm until the user actually targets it. */
.lp-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 22px;
    color: #c0c4ca;
    cursor: grab;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.12s, color 0.12s, background 0.12s;
    touch-action: none;  /* let pointer events drive — disable native scroll */
}
.lp-real-lesson-row:hover .lp-drag-handle { opacity: 1; }
.lp-drag-handle:hover { color: #6b7280; background: #f3f4f6; }
.lp-drag-handle:active { cursor: grabbing; color: #059669; }
.lp-drag-handle svg { fill: currentColor; }

/* Source row while dragging: muted */
.lp-real-table tr.lp-real-lesson-row.is-dragging { opacity: 0.35; }
.lp-real-table tr.lp-real-lesson-row.is-dragging:hover { background: transparent; }
body.lp-dragging,
body.lp-dragging * { cursor: grabbing !important; user-select: none; }

/* Floating ghost — rides the cursor with a soft shadow + slight tilt */
.lp-drag-ghost {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
    transform: rotate(-0.6deg) scale(1.01);
    overflow: hidden;
}
.lp-drag-ghost-table { width: 100%; border-collapse: collapse; background: white; }
.lp-drag-ghost-table tr { background: white; }
.lp-drag-ghost-table td { padding: 12px 16px; }

/* Drop indicator: a 2px green line spanning the full unit width */
.lp-drop-line {
    position: absolute;
    left: 12px;
    right: 12px;
    height: 2px;
    background: #059669;
    border-radius: 2px;
    transform: translateY(-1px);
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.18);
    pointer-events: none;
    z-index: 50;
    transition: top 0.08s ease-out;
}
.lp-drop-line::before,
.lp-drop-line::after {
    content: '';
    position: absolute;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #059669;
}
.lp-drop-line::before { left: -4px; }
.lp-drop-line::after { right: -4px; }
/* After the new drag column, columns shift one to the right.
   Now: 1=drag, 2=select, 3=num, 4=title (flex), 5=date, 6=status, 7=diff, 8=refl, 9=analytics, 10=kebab */
.lp-real-table th:nth-child(4) { width: auto; }
.lp-real-table th:nth-child(5) { width: 100px; }
.lp-real-table th:nth-child(6) { width: 90px; }
.lp-real-table th:nth-child(7) { width: 100px; }
.lp-real-table th:nth-child(8) { width: 80px; }
.lp-real-table th:nth-child(9) { width: 80px; }
/* Center the data columns (date, status, differentiated, reflection, analytics) */
.lp-real-table th:nth-child(5),
.lp-real-table th:nth-child(6),
.lp-real-table th:nth-child(7),
.lp-real-table th:nth-child(8),
.lp-real-table th:nth-child(9) { text-align: center; }
.lp-real-table td:nth-child(5),
.lp-real-table td:nth-child(6),
.lp-real-table td:nth-child(7),
.lp-real-table td:nth-child(8),
.lp-real-table td:nth-child(9) { text-align: center; }
/* Lesson # cell visual */
.lp-real-table td.lp-col-num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #9ca3af;
}
/* Selected-row tint */
.lp-real-table tr.lp-real-lesson-row.is-selected { background: #f0fdf4; }
.lp-real-table tr.lp-real-lesson-row.is-selected:hover { background: #ecfdf5; }
/* Checkbox styling */
.lp-real-table input.lp-row-select,
.lp-real-table input.lp-select-all {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #059669;
    margin: 0;
}

/* Bulk-action group inside the unit kebab dropdown */
.lp-unit-bulk-group { display: none; }
.lp-real-unit.has-selection .lp-unit-bulk-group { display: block; }
.lp-unit-bulk-header {
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #059669;
}
.lp-unit-bulk-header .lp-bulk-count { font-weight: 700; }
.lp-unit-dropdown-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0;
}

.lp-real-table td { padding: 12px 16px; font-size: 13px; color: #333; }
.lp-real-table td:first-child { text-align: center; color: #999; font-weight: 600; font-size: 12px; }
.lp-real-table tbody tr { border-bottom: 1px solid #f0f0f0; transition: background-color 0.15s; }
.lp-real-table tbody tr:last-child { border-bottom: none; }
.lp-real-table tbody tr:hover { background: #f8fafb; }

.lp-real-lesson-row { cursor: pointer; }
.lp-real-lesson-title { font-weight: 500; }

/* Green pill that appears inline with a lesson's title when that
   lesson is linked to an assessment. Always green (per spec) —
   the label itself disambiguates formative vs. summative. A lesson
   is constrained to a single assessment type elsewhere in code. */
.lp-assessment-pill {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    font-size: 11px;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.01em;
    vertical-align: middle;
    line-height: 1.6;
    cursor: default;
}
.lp-real-lesson-date {
    color: #666;
    font-size: 12px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}
.lp-real-empty { color: #bbb; font-style: italic; text-align: center !important; padding: 20px 16px !important; }

/* Date badges */
.lp-class-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
    background: #dbeafe;
    color: #1e40af;
}

/* Adjusted indicators */
.lp-diff-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 12px;
    font-weight: 700;
}
.lp-diff-empty {
    border: 2px solid #d1d5db;
    background: #f9fafb;
    border-radius: 3px;
}
.lp-diff-no { color: #dc2626; }
.lp-diff-yes { color: #059669; }

/* Reflection / Analytics links */
.lp-lesson-link {
    color: #059669;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s;
}
.lp-lesson-link:hover { color: #047857; text-decoration: underline; }

/* Status badges */
.lp-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.lp-status-badge.draft { background: #f3f4f6; color: #6b7280; }
.lp-status-badge.active { background: #dbeafe; color: #1e40af; }
.lp-status-badge.completed { background: #d1fae5; color: #065f46; }
.lp-status-badge.finalized { background: #d1fae5; color: #065f46; font-weight: 700; }
.lp-status-badge.pending { background: #f3f4f6; color: #6b7280; }
.lp-status-badge.archived { background: #fef3c7; color: #92400e; }

/* Add lesson row */
.lp-real-add-row { border-bottom: none !important; background: #f8f9fa; border-top: 1px solid #e0e0e0; }
.lp-real-add-row td { padding: 12px !important; text-align: center; }
.lp-real-add-buttons { display: flex; gap: 8px; justify-content: center; align-items: center; }
.lp-real-add-btn, .lp-real-batch-btn {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.lp-real-add-btn:hover, .lp-real-batch-btn:hover {
    background: #f9fafb;
    color: #059669;
    border-color: #059669;
}

/* Lesson row kebab menu */
.lp-lesson-kebab-cell { width: 36px; text-align: center !important; padding: 0 4px !important; }
.lp-lesson-kebab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    color: #999;
    position: relative;
    transition: background 0.15s, color 0.15s;
}
.lp-lesson-kebab:hover { background: #f0f0f0; color: #333; }
.lp-lesson-kebab-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 140px;
    z-index: 1000;
    padding: 4px 0;
}
.lp-lesson-kebab-dropdown.open { display: block; }
.lp-lesson-kebab-item {
    padding: 8px 16px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.lp-lesson-kebab-item:hover { background: #f5f5f5; }
.lp-lesson-kebab-item.delete { color: #dc2626; }
.lp-lesson-kebab-item.delete:hover { background: #fee2e2; color: #dc2626; }

/* Toast notification */
.lp-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #1a1a1a;
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 10000;
    pointer-events: none;
}
.lp-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Add unit section at bottom */
.lp-real-add-unit-section {
    margin-top: 12px;
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.lp-real-add-unit-btn {
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.lp-real-add-unit-btn:hover {
    background: #f9fafb;
    color: #059669;
    border-color: #059669;
}

/* ===== BATCH LESSONS MODAL ===== */
/* Inherit the base .modal-overlay z-index (2000) so the shared
   admin-guidance popover (z-index 9999) renders above the modal,
   matching how the lesson + unit modals layer it. The earlier
   10000 setting buried the popover behind the batch backdrop. */
/* Match the lesson modal dimensions (2026-05-11) — both modals should
   feel like the same workspace, just configured for a different task.
   See lesson-modal.css .lesson-detail-modal .modal-container. */
.batch-modal .modal-container,
.batch-container {
    width: 90vw;
    max-width: 1400px;
    height: 85vh;
    max-height: 85vh;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

/* Header count badge — pill-shaped stepper that lives next to the close
   button so the batch output size stays visible the whole time the
   teacher is on the launcher. Mirrors the size of the existing modal
   header pills so it reads as native chrome, not a popover. */
/* Header count badge — pill-shaped stepper anchored next to the close
   button. Sized prominently so the batch output size reads as the
   primary control of the modal, not a chrome detail. Bold green to
   tie back to the TeachComplete accent. */
.batch-header-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    background: #059669;
    border: 1px solid #047857;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin-right: 10px;
    user-select: none;
    box-shadow: 0 1px 3px rgba(4, 120, 87, 0.25);
}
.batch-header-count-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, transform 0.08s;
}
.batch-header-count-btn:hover {
    background: rgba(255,255,255,0.22);
}
.batch-header-count-btn:active {
    transform: translateY(1px);
}
.batch-header-count-value {
    min-width: 30px;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    padding: 0 2px;
}
.batch-header-count-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255,255,255,0.92);
    margin: 0 6px 0 2px;
}

/* Locked Admin Guidance tile — for indie / SoloTeacher users who don't
   have school admins above them. The tile reads as an Enterprise teaser:
   dimmed copy + lock icon + small "Enterprise" tag next to the label,
   muted hover so it doesn't promise interactive depth it doesn't have. */
.ld-launcher-tile-locked {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
    cursor: pointer;
    box-shadow: none;
}
.ld-launcher-tile-locked .ld-launcher-tile-icon {
    color: #94a3b8;
    filter: grayscale(0.7);
    opacity: 0.85;
}
.ld-launcher-tile-locked .ld-launcher-tile-label {
    color: #64748b;
}
.ld-launcher-tile-locked .ld-launcher-tile-sub {
    color: #94a3b8;
}
.ld-launcher-tile-locked:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.ld-launcher-tile-enterprise-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #475569;
    vertical-align: middle;
}

/* Transient bubble shown when an indie teacher clicks the locked
   Admin Guidance tile or composer pill. Default anchor is below the
   element; the `-flip` variant pops above when overflow is detected by
   shared/enterprise-gate.js (horizontal OR vertical clipping). 320px
   gives the body copy a comfortable two-line wrap. */
.batch-enterprise-bubble {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    padding: 14px 38px 14px 16px;
    box-sizing: border-box;
    background: #1e293b;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.25);
    z-index: 100;
    animation: batch-enterprise-bubble-in 0.18s ease-out;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.batch-enterprise-bubble.batch-enterprise-bubble-flip {
    top: auto;
    bottom: calc(100% + 8px);
    right: 0;
}
/* Portal mode — see lesson-modal.css for the long-form note. */
.batch-enterprise-bubble.batch-enterprise-bubble-portal {
    position: fixed;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 100060;
}
@keyframes batch-enterprise-bubble-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.batch-enterprise-bubble-title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #6ee7b7;
    margin-bottom: 6px;
}
.batch-enterprise-bubble-body {
    font-size: 13px;
    line-height: 1.5;
    color: #e2e8f0;
}
.batch-enterprise-bubble-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 999px;
    transition: background 0.12s, color 0.12s;
}
.batch-enterprise-bubble-close:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

/* Cascade-delete modal — picks between "this class only" vs "every
   connected class". Centered overlay; the two scope buttons read as
   cards (title + sub) so the trade-off is unmistakable. The All
   button gets the danger-red treatment because it's the destructive
   one most likely to surprise. */
.lp-delete-cascade-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: lp-delete-cascade-fade 0.14s ease-out;
}
@keyframes lp-delete-cascade-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.lp-delete-cascade-modal {
    width: 92vw;
    max-width: 440px;
    background: #fff;
    border-radius: 12px;
    padding: 22px 24px 18px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25);
    font-family: inherit;
}
.lp-delete-cascade-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}
.lp-delete-cascade-body {
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
    margin-bottom: 14px;
}
.lp-delete-cascade-body strong { color: #0f172a; }
.lp-delete-cascade-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.lp-delete-cascade-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
    font-family: inherit;
}
.lp-delete-cascade-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.lp-delete-cascade-btn:active {
    transform: translateY(0.5px);
}
.lp-delete-cascade-btn.is-danger {
    border-color: #fecaca;
    background: #fef2f2;
}
.lp-delete-cascade-btn.is-danger:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}
.lp-delete-cascade-btn-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}
.lp-delete-cascade-btn.is-danger .lp-delete-cascade-btn-title { color: #b91c1c; }
.lp-delete-cascade-btn-sub {
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
}
.lp-delete-cascade-btn.is-danger .lp-delete-cascade-btn-sub em {
    font-style: normal;
    font-weight: 700;
    color: #b91c1c;
}
.lp-delete-cascade-footer {
    display: flex;
    justify-content: flex-end;
}
.lp-delete-cascade-cancel {
    padding: 8px 14px;
    background: transparent;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    font-family: inherit;
}
.lp-delete-cascade-cancel:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}
.batch-split {
    display: flex;
    flex: 1;
    min-height: 0;
    border-top: 1px solid #e5e7eb;
}
.batch-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 18px;
    border-right: 1px solid #e5e7eb;
    overflow-y: auto;
}
.batch-right {
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    position: relative;
}
.batch-config {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.batch-label {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.batch-count-input {
    width: 60px;
    padding: 5px 8px;
    font-size: 13px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    text-align: center;
}

/* Lesson cards list */
.batch-lessons-list {
    flex: 1;
    overflow-y: auto;
}
.batch-lessons-empty {
    font-size: 13px;
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 40px 16px;
    line-height: 1.6;
}
.batch-lesson-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    background: #fff;
}
.batch-lesson-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    background: #fafafa;
    transition: background 0.15s;
}
.batch-lesson-card-header:hover {
    background: #f0fdf4;
}
.batch-lesson-card-chevron {
    font-size: 10px;
    color: #888;
    flex-shrink: 0;
    width: 14px;
}
.batch-lesson-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}
.batch-lesson-card-title-input {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 3px 6px;
    background: transparent;
    font-family: inherit;
    min-width: 0;
}
.batch-lesson-card-title-input:hover {
    border-color: #d0d0d0;
    background: #fff;
}
.batch-lesson-card-title-input:focus {
    outline: none;
    border-color: #059669;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(5,150,105,0.12);
}
.batch-lesson-remove-btn {
    background: none;
    border: none;
    color: #ccc;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.batch-lesson-remove-btn:hover {
    color: #ef4444;
    background: #fef2f2;
}
.batch-add-lesson-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 4px;
    border: 1px dashed #d0d0d0;
    border-radius: 8px;
    background: transparent;
    color: #059669;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.batch-add-lesson-btn:hover {
    background: #f0fdf4;
    border-color: #059669;
}
.batch-lesson-card-body {
    border-top: 1px solid #eee;
    padding: 10px 14px;
}
.batch-lesson-card-textarea {
    width: 100%;
    min-height: 80px;
    padding: 8px 10px;
    font-size: 12px;
    font-family: inherit;
    line-height: 1.6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
    resize: vertical;
    box-sizing: border-box;
}
.batch-left-hint {
    font-size: 11px;
    color: #999;
    padding: 10px 0 0;
    line-height: 1.4;
    flex-shrink: 0;
}

/* Chat messages — reuse shared chat styles from unit-plan-modal / lesson-modal */
.batch-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}
.batch-msg-user {
    background: #059669;
    color: white;
    padding: 8px 12px;
    border-radius: 12px 12px 2px 12px;
    margin: 6px 0 6px 40px;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
}
.batch-msg-ai {
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 8px 12px;
    border-radius: 12px 12px 12px 2px;
    margin: 6px 40px 6px 0;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
}
.batch-msg-typing {
    color: #888;
    font-style: italic;
}
.batch-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
}
.batch-cancel-btn {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
}
.batch-cancel-btn:hover { background: #f3f4f6; }
.batch-create-btn {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: white;
    background: #059669;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.batch-create-btn:hover { background: #047857; }
.batch-create-btn:disabled { background: #d1d5db; cursor: not-allowed; }

/* Prechat + default footer clusters — _batchUpdateFooterMode toggles
   which one is visible. Both use flex so buttons sit on one line at the
   bottom-right of .batch-footer. */
.batch-footer-prechat,
.batch-footer-default {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 1;
}

/* ===== Notebook Modal (roster Book column popup) ===== */
.nbk-modal-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 10300; align-items: center; justify-content: center;
}
.nbk-modal-overlay.active { display: flex; }
.nbk-modal-container {
    margin: auto;
    width: 92%; max-width: 1200px; height: 78%;
    background: #fff; border-radius: 12px;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.nbk-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; border-bottom: 1px solid #e0e0e0; background: #fafafa; flex-shrink: 0;
}
.nbk-modal-title { font-size: 15px; font-weight: 600; color: #333; }
.nbk-nav-group { display: flex; align-items: center; gap: 6px; }
.nbk-nav-btn {
    width: 28px; height: 28px; border: 1px solid #d0d0d0; border-radius: 6px;
    background: #fff; color: #666; cursor: pointer; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
}
.nbk-nav-btn:hover { background: #f0f0f0; color: #333; }
.nbk-student-select {
    padding: 5px 28px 5px 10px; border: 1px solid #d0d0d0; border-radius: 6px;
    background: #fff; font-size: 14px; font-weight: 600; color: #333; cursor: pointer;
    font-family: inherit; max-width: 340px;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center;
}
.nbk-student-select:focus { outline: none; border-color: #059669; box-shadow: 0 0 0 2px rgba(5,150,105,0.15); }
.nbk-modal-actions { display: flex; align-items: center; gap: 8px; }
.nbk-expand-btn {
    font-size: 12px; padding: 5px 12px; border: 1px solid #d0d0d0; border-radius: 5px;
    background: #fff; color: #555; cursor: pointer;
}
.nbk-expand-btn:hover { background: #f0f0f0; }
.nbk-close-btn {
    font-size: 22px; width: 32px; height: 32px; border: none; background: none;
    color: #999; cursor: pointer; display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
}
.nbk-close-btn:hover { background: #f0f0f0; color: #333; }
.nbk-modal-iframe { flex: 1; border: none; width: 100%; }

/* ===== IFRAME NOTEBOOK WRAPPER ===== */
.nb-iframe-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.nb-iframe-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #fafafa;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}
.nb-iframe-student-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}
.nb-iframe-nav-btn {
    width: 28px; height: 28px;
    border: 1px solid #d0d0d0; border-radius: 5px;
    background: #fff; color: #666; font-size: 12px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.nb-iframe-nav-btn:hover { background: #f0f0f0; border-color: #999; }
.nb-iframe-student-select {
    padding: 6px 28px 6px 10px;
    border: 1px solid #d0d0d0; border-radius: 5px;
    background: #fff; font-size: 13px; font-weight: 600; color: #333;
    cursor: pointer; font-family: inherit;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center;
    min-width: 200px;
}
.nb-iframe-student-select:focus { outline: none; border-color: #059669; }
.nb-iframe {
    flex: 1;
    border: none;
    width: 100%;
    min-height: 0;
}

/* ========== EMPTY ROSTER MODAL (er-*) ========== */

.er-overlay {
    position: absolute;
    inset: 0;
    background: rgba(245, 245, 245, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

/* Fixed variant used when opening "Add Students" on top of a populated roster */
.er-overlay.er-overlay-fixed {
    position: fixed;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1000;
}

/* Restyled 2026-05-14 to match the home "Next up" modal + gh-split
   placeholders: white card, 14px radius, soft shadow. Single design
   language across every onboarding surface. */
.er-modal {
    background: #fff;
    border: 1px solid #ece7dd;
    border-radius: 14px;
    box-shadow: 0 12px 60px rgba(0, 0, 0, 0.25);
    width: 940px;
    max-width: 95vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: er-modal-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes er-modal-enter {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Editorial headline — left-justified to match the home "Next up" modal
   + gh-split placeholders. Tighter padding so the QR + action cards
   below have more room without the whole modal towering up. */
.er-headline {
    text-align: left;
    padding: 20px 28px 14px;
    flex-shrink: 0;
}
.er-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #2f6844;
    margin-bottom: 8px;
}
.er-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.18;
    color: #0f172a;
    margin: 6px 0 10px;
    letter-spacing: 0;
}
.er-title em {
    color: #2f6844;
    font-style: italic;
}
.er-sub {
    font-size: 14px;
    color: #475569;
    line-height: 1.55;
    margin: 0;
}

/* Prerequisite row — moved 2026-05-14 from below the headline to the top
   of .er-modal-right so the QR + code on the left column have full room.
   Renders as a full-width banner above "Add by hand". */
.er-prereq {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    font-family: inherit;
    text-align: left;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}
.er-prereq-done {
    background: #f0fdf4;
    border-color: #c8e6cf;
}
.er-prereq-active {
    background: #fff8eb;
    border-color: #f5d488;
    cursor: pointer;
}
.er-prereq-active:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.18);
}
.er-prereq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #d1fae5;
    flex-shrink: 0;
}
.er-prereq-icon-pending {
    background: #fef3c7;
    color: #b45309;
    font-size: 12px;
    font-weight: 700;
}
.er-prereq-text {
    font-size: 13px;
    color: #1a1a1a;
    line-height: 1.4;
}
.er-prereq-text strong { font-weight: 700; }
.er-prereq-done .er-prereq-text strong { color: #047857; }
.er-prereq-active .er-prereq-text strong { color: #b45309; }
.er-prereq-arrow {
    font-size: 16px;
    color: #b45309;
    flex-shrink: 0;
}

/* Compact header (floating "Add Students" variant — still used to add more
   after the roster exists). */
.er-modal-header {
    padding: 22px 32px 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.er-modal-title {
    font-family: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    font-weight: 400;
    font-size: 24px;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}

.er-close-btn {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.15s;
}
.er-close-btn:hover { color: #111827; }

.er-modal-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.er-modal-left {
    flex: 0 0 320px;
    padding: 4px 28px 18px;
}

.er-modal-divider {
    width: 1px;
    background: #eef2f0;
    flex-shrink: 0;
}

.er-modal-right {
    flex: 1;
    padding: 4px 28px 18px;
    min-width: 0;
}

.er-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #2f6844;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 12px;
}

/* Class info items */
.er-info-item {
    margin-bottom: 16px;
}

.er-info-item:last-child {
    margin-bottom: 0;
}

.er-info-label {
    font-size: 11px;
    font-weight: 700;
    color: #2f6844;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 6px;
}

.er-info-value {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    word-break: break-all;
}

.er-info-value-mono {
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 26px;
    font-weight: 700;
    color: #2f6844;
    letter-spacing: 3px;
}

.er-info-link {
    font-size: 12px;
    color: #059669;
    text-decoration: none;
    word-break: break-all;
}

.er-info-link:hover {
    text-decoration: underline;
}

.er-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.er-copy-btn:hover {
    background: #eee;
    color: #333;
}

.er-qr-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 152px;
    height: 152px;
    background: #fff;
    border: 1px solid #eef2f0;
    border-radius: 10px;
    margin-top: 6px;
    box-shadow: 0 2px 8px rgba(40, 30, 10, 0.04);
}

.er-qr-placeholder {
    width: 128px;
    height: 128px;
    background: repeating-conic-gradient(#d0d0d0 0% 25%, #f0f0f0 0% 50%) 50% / 10px 10px;
    border-radius: 4px;
}

/* Right panel — Add Students actions */
.er-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.er-action-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #eef2f0;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}

.er-action-card:hover {
    transform: translateY(-1px);
    border-color: #c8e6cf;
    box-shadow: 0 4px 14px rgba(47, 104, 68, 0.10);
}

.er-action-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ecf6ef;
    color: #2f6844;
    border-radius: 50%;
    font-size: 16px;
    flex-shrink: 0;
}

.er-action-info {
    flex: 1;
}

.er-action-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
    letter-spacing: -0.1px;
}

.er-action-desc {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.4;
}

.er-action-arrow {
    font-size: 18px;
    color: #ccc;
    flex-shrink: 0;
    transition: color 0.15s;
}

.er-action-card:hover .er-action-arrow {
    color: #059669;
}

/* Joined students live feed — bar across the bottom of the modal,
   above the footer. Always present; status text + dot are always
   visible, the per-student chips append below as students arrive. */
.er-modal-feed {
    padding: 10px 28px 4px;
    border-top: 1px solid #eef2f0;
    background: #fafdfb;
}
.er-feed-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.er-feed-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
    transition: background 0.2s;
}
.er-feed-dot.er-feed-dot-live {
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    animation: er-feed-pulse 1.8s infinite;
}
@keyframes er-feed-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.er-feed-status {
    font-size: 13px;
    color: #1a1a1a;
    font-weight: 500;
    flex: 1;
}
.er-joined-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: #059669;
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 11px;
    flex-shrink: 0;
}
.er-joined-count[hidden] { display: none; }
.er-joined-list {
    max-height: 140px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 10px;
}

.er-joined-list::-webkit-scrollbar { width: 5px; }
.er-joined-list::-webkit-scrollbar-track { background: #f8f8f8; border-radius: 3px; }
.er-joined-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

.er-joined-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f0fdf4;
    border: 1px solid #d1fae5;
    border-radius: 6px;
    animation: erSlideIn 0.3s ease-out;
}

@keyframes erSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.er-joined-num {
    font-size: 11px;
    font-weight: 700;
    color: #059669;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.er-joined-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #ecfdf5;
    border-radius: 50%;
    flex-shrink: 0;
}

.er-joined-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    flex: 1;
}

.er-joined-badge {
    font-size: 10px;
    font-weight: 600;
    color: #059669;
    background: #d1fae5;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

/* Modal footer */
.er-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    border-top: 1px solid #eef2f0;
    background: #fafdfb;
    flex-shrink: 0;
}

.er-footer-status {
    font-size: 13px;
    color: #999;
    font-style: italic;
}
.er-footer-hint {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
    flex: 1;
    margin-right: 16px;
}

/* ============================================================
   Student "no lesson yet" placeholder (snl-)
   ------------------------------------------------------------
   Shown when a student opens a class.html where the teacher
   hasn't pushed any lessons. Reuses the design language of the
   other onboarding cards (white card, soft shadow, left-just
   italic-serif title) so student-facing chrome reads consistent
   with what the teacher sees on her side.
   ============================================================ */
.snl-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.snl-card {
    background: #fff;
    border: 1px solid #ece7dd;
    border-radius: 14px;
    box-shadow: 0 12px 60px rgba(0, 0, 0, 0.10);
    width: 520px;
    max-width: 100%;
    padding: 28px 32px 26px;
    text-align: left;
    animation: snl-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes snl-enter {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.snl-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ecf6ef;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.snl-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #2f6844;
    margin-bottom: 8px;
}
.snl-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.18;
    color: #0f172a;
    margin: 0 0 10px;
    letter-spacing: 0;
}
.snl-title em { color: #2f6844; font-style: italic; }
.snl-sub {
    font-size: 14px;
    color: #475569;
    line-height: 1.55;
    margin: 0 0 14px;
}
.snl-hint {
    font-size: 12.5px;
    color: #64748b;
    padding-top: 12px;
    border-top: 1px solid #eef2f0;
}
.snl-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #eef2f0;
}
.snl-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.snl-cta-primary {
    background: #2f6844;
    color: #fff;
}
.snl-cta-primary:hover { background: #245236; }
.snl-cta-secondary {
    background: #fff;
    color: #374151;
    border-color: #d1d5db;
}
.snl-cta-secondary:hover { background: #f9fafb; }

/* Matches .gh-split-cta + .th-fum-cta for one consistent action button
   across every onboarding surface. */
.er-finish-btn {
    padding: 11px 22px;
    background: #2f6844;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.12s, box-shadow 0.2s;
    box-shadow: 0 2px 6px rgba(47, 104, 68, 0.18);
    flex-shrink: 0;
}

.er-finish-btn:hover {
    background: #264f35;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(47, 104, 68, 0.25);
}

/* Responsive */
@media (max-width: 700px) {
    .er-modal-body {
        flex-direction: column;
    }
    .er-modal-left {
        flex: 0 0 auto;
    }
    .er-modal-divider {
        width: auto;
        height: 1px;
    }
}

/* ============================================================
   GRADED (LOCKED) NOTEBOOK SECTIONS
   Rendered when the selected student has submitted a section.
   ============================================================ */

/* Green check badge overlaid on right binder tabs for submitted sections */
.nb-tab-check {
    position: absolute;
    top: 3px;
    right: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 50%;
    background: #059669;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    pointer-events: none;
    z-index: 3;
}
.nb-tab-check.nb-tab-check-grading { background: #2563eb; }
.nb-tab-check.nb-tab-check-error { background: #dc2626; }
.nb-tab-check.nb-tab-check-partial { background: #d97706; }
.nb-tab-right.active .nb-tab-check { box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(0,0,0,0.25); }

/* Locked/graded answer blocks */
.nb-graded-activity .nb-graded-q { margin-bottom: 16px; }
.nb-locked-answer {
    margin-top: 8px;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.nb-locked-text {
    font-size: 13px;
    color: #111;
    line-height: 1.6;
    white-space: pre-wrap;
}
.nb-locked-text.empty {
    color: #9ca3af;
    font-style: italic;
}
.nb-locked-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.nb-locked-photo {
    max-width: 180px;
    max-height: 180px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}
.nb-locked-url {
    font-size: 12px;
    color: #2563eb;
    margin-top: 4px;
    word-break: break-all;
}

/* Multiple choice — picks + correct marking */
.nb-locked-mc { display: flex; flex-direction: column; gap: 4px; }
.nb-locked-mc-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
}
.nb-locked-mc-opt.pick-correct {
    background: #f0fdf4;
    border-color: #86efac;
    color: #064e3b;
}
.nb-locked-mc-opt.pick-wrong {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #7f1d1d;
}
.nb-locked-mc-opt.pick-answer {
    background: #ecfdf5;
    border-color: #a7f3d0;
}
.nb-locked-mc-letter { font-weight: 700; min-width: 16px; }
.nb-locked-mc-text { flex: 1; }
.nb-locked-mc-tag {
    font-size: 10px;
    font-weight: 700;
    color: #374151;
    background: #e5e7eb;
    padding: 1px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.nb-locked-mc-opt.pick-correct .nb-locked-mc-tag { background: #bbf7d0; color: #064e3b; }
.nb-locked-mc-opt.pick-wrong .nb-locked-mc-tag { background: #fecaca; color: #7f1d1d; }
.nb-locked-mc-check {
    color: #059669;
    font-weight: 700;
    font-size: 14px;
}

/* True/False */
.nb-locked-tf { display: flex; flex-direction: column; gap: 6px; }
.nb-locked-tf-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12.5px;
    background: #fff;
    flex-wrap: wrap;
}
.nb-locked-tf-row.pick-correct { background: #f0fdf4; border-color: #86efac; }
.nb-locked-tf-row.pick-wrong { background: #fef2f2; border-color: #fca5a5; }
.nb-locked-tf-row.empty { background: #f9fafb; color: #9ca3af; }
.nb-locked-tf-idx { font-weight: 700; min-width: 16px; }
.nb-locked-tf-stmt { flex: 1; color: #111; }
.nb-locked-tf-pick { font-size: 11px; color: #374151; }
.nb-locked-tf-correct { font-size: 11px; color: #065f46; font-weight: 600; }

/* Matching */
.nb-locked-matching { display: flex; flex-direction: column; gap: 6px; }
.nb-locked-match-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
}
.nb-locked-match-answer { font-weight: 600; color: #059669; }

/* Bottom block: section score card + AI observation summary */
.nb-graded-bottom {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
}
.nb-graded-observation {
    margin-top: 10px;
    padding: 12px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 3px solid #059669;
    border-radius: 8px;
}
.nb-graded-observation-label {
    font-size: 10px;
    font-weight: 700;
    color: #059669;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.nb-graded-observation-body {
    font-size: 13px;
    color: #064e3b;
    line-height: 1.55;
    white-space: pre-wrap;
}

/* Next Section navigation button on locked/graded section view */
.nb-graded-next {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
}
.nb-next-btn {
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 700;
    background: #059669;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: background 0.15s, transform 0.05s;
}
.nb-next-btn:hover { background: #047857; }
.nb-next-btn:active { transform: translateY(1px); }
.nb-graded-allcomplete {
    margin-top: 18px;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1px dashed #86efac;
    border-radius: 6px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #047857;
}

/* Wrap-up next-button variant — warm amber to distinguish from regular next */
.nb-next-btn-wrapup {
    background: #d97706 !important;
}
.nb-next-btn-wrapup:hover { background: #b45309 !important; }

/* ============================================================
   WRAP-UP TAB (right rail, pinned bottom)
   Mirrors .nb-tab-home shape — small fixed emoji chip.
   ============================================================ */
.nb-tab-wrapup {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    min-height: 0 !important;
    padding: 6px 6px !important;
    margin-top: auto;       /* push to bottom of flex column */
    /* The right-rail container has padding-top: 20px above Home and ends
       40px above the page bottom (height: calc(100% - 40px) in .nb-tabs-right).
       That made the wrap-up chip sit further from the page bottom than Home
       does from the page top. Negative bottom-margin shifts the chip down
       so the top-gap and bottom-gap are symmetric ~20px. */
    margin-bottom: -20px;
    background-color: #fef3c7;
    border-color: #fde68a;
    transition: opacity 0.2s, background-color 0.2s, filter 0.2s, transform 0.05s;
}
.nb-tab-wrapup .nb-tab-text-right {
    font-size: 14px !important;
    writing-mode: horizontal-tb !important;
    max-height: none !important;
    overflow: visible !important;
}
.nb-tab-wrapup.locked {
    opacity: 0.45;
    filter: grayscale(70%);
    background-color: #e5e7eb;
    border-color: #d1d5db;
    cursor: not-allowed;
}
.nb-tab-wrapup.locked:hover {
    width: 44px;
    background-color: #e5e7eb;
}
.nb-tab-wrapup.ready {
    background-color: #fde68a;
    border-color: #fbbf24;
    animation: nb-wrapup-pulse 2.6s ease-in-out infinite;
}
@keyframes nb-wrapup-pulse {
    0%, 100% { box-shadow: 2px 1px 4px rgba(0, 0, 0, 0.08); }
    50%      { box-shadow: 2px 1px 10px rgba(217, 119, 6, 0.55); }
}
.nb-tab-wrapup.submitted {
    background-color: #d1fae5;
    border-color: #6ee7b7;
}
.nb-tab-wrapup.active {
    background-color: #d97706 !important;
    border-color: #b45309 !important;
}
.nb-tab-wrapup.active .nb-tab-text-right { color: #fff; }

/* Tooltip shown when student clicks a locked wrap-up tab */
.nb-wrapup-tooltip {
    position: fixed;
    z-index: 99999;
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.18s, transform 0.18s;
}
.nb-wrapup-tooltip.show {
    opacity: 1;
    transform: translateX(0);
}

/* Wrap-up pane (Phase 3 placeholder body) */
.nb-wrapup-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid #fde68a;
}
.nb-wrapup-icon {
    font-size: 28px;
    line-height: 1;
}
.nb-wrapup-title {
    font-size: 17px;
    font-weight: 700;
    color: #92400e;
}
.nb-wrapup-subtitle {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
    line-height: 1.4;
}
.nb-wrapup-banner {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 14px;
    border: 1px solid;
}
.nb-wrapup-banner.preview {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}
.nb-wrapup-banner.ready {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
}
.nb-wrapup-banner.submitted {
    background: #d1fae5;
    border-color: #6ee7b7;
    color: #065f46;
}
.nb-wrapup-banner.locked {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #4b5563;
}
.nb-wrapup-placeholder {
    background: #fafaf9;
    border: 1px dashed #d6d3d1;
    border-radius: 8px;
    padding: 18px 20px;
    color: #57534e;
}
.nb-wrapup-placeholder-title {
    font-size: 13px;
    font-weight: 700;
    color: #44403c;
    margin-bottom: 6px;
}
.nb-wrapup-placeholder-body {
    font-size: 13px;
    line-height: 1.55;
}

/* ===== WRAP-UP CONTENT (Phase 4) ===== */

/* Loading spinner */
.nb-wrapup-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    text-align: center;
    color: #6b7280;
}
.nb-wrapup-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #fde68a;
    border-top-color: #d97706;
    border-radius: 50%;
    animation: nb-wrapup-spin 0.9s linear infinite;
    margin-bottom: 14px;
}
@keyframes nb-wrapup-spin {
    to { transform: rotate(360deg); }
}
.nb-wrapup-loading-text {
    font-size: 13px;
    font-weight: 500;
    max-width: 320px;
    line-height: 1.5;
}

/* Per-criterion cards */
.nb-wrapup-crits {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}
.nb-wrapup-crit {
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}
.nb-wrapup-crit-assessed {
    border-left: 3px solid #d97706;
}
.nb-wrapup-crit-na {
    border-left: 3px solid #d1d5db;
    background: #fafafa;
}
.nb-wrapup-crit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.nb-wrapup-crit-label {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    flex: 1;
}
.nb-wrapup-crit-score-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    padding: 4px 10px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 999px;
    font-weight: 700;
}
.nb-wrapup-crit-score {
    font-size: 16px;
    color: #92400e;
}
.nb-wrapup-crit-scale {
    font-size: 11px;
    color: #b45309;
    font-weight: 600;
}
.nb-wrapup-crit-na-pill {
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    padding: 3px 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.nb-wrapup-crit-desc {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
    font-style: italic;
}
.nb-wrapup-crit-rationale {
    font-size: 13px;
    color: #374151;
    line-height: 1.55;
    margin-top: 8px;
}

/* Untagged bucket */
.nb-wrapup-untagged {
    padding: 10px 14px;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    margin-bottom: 14px;
}
.nb-wrapup-untagged-label {
    font-size: 10px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}
.nb-wrapup-untagged-body {
    font-size: 12px;
    color: #4b5563;
    line-height: 1.5;
}

/* Overall summary */
.nb-wrapup-overall {
    padding: 12px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 3px solid #d97706;
    border-radius: 8px;
    margin-bottom: 14px;
}
.nb-wrapup-overall-label {
    font-size: 10px;
    font-weight: 700;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}
.nb-wrapup-overall-body {
    font-size: 13px;
    color: #422006;
    line-height: 1.55;
}

.nb-wrapup-scale-note {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 16px;
    padding: 6px 10px;
    background: #f9fafb;
    border-left: 2px solid #d1d5db;
}

/* Reflection input + submit */
.nb-wrapup-reflection {
    padding: 14px 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    margin-top: 6px;
}
.nb-wrapup-reflection-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #065f46;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}
.nb-wrapup-reflection-help {
    font-size: 12px;
    color: #047857;
    line-height: 1.5;
    margin-bottom: 10px;
}
.nb-wrapup-reflection-input {
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 1.55;
    padding: 10px 12px;
    border: 1px solid #86efac;
    border-radius: 8px;
    resize: vertical;
    min-height: 110px;
    font-family: inherit;
    background: #fff;
}
.nb-wrapup-reflection-input:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.nb-wrapup-reflection-msg {
    min-height: 18px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
}
.nb-wrapup-reflection-msg.err {
    color: #b91c1c;
}
.nb-wrapup-reflection-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}
.nb-wrapup-submit-btn {
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 700;
    background: #059669;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: background 0.15s, transform 0.05s;
}
.nb-wrapup-submit-btn:hover { background: #047857; }
.nb-wrapup-submit-btn:active { transform: translateY(1px); }
.nb-wrapup-submit-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}
.nb-wrapup-finality-note {
    font-size: 11px;
    color: #047857;
    margin-top: 10px;
    font-style: italic;
    text-align: right;
}

/* Read-only review state (after submit) */
.nb-wrapup-reflection-locked {
    background: #f9fafb;
    border-color: #e5e7eb;
}
.nb-wrapup-reflection-readonly {
    font-size: 13px;
    color: #374151;
    line-height: 1.55;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    white-space: pre-wrap;
}
.nb-wrapup-reflection-stamp {
    font-size: 11px;
    color: #6b7280;
    margin-top: 8px;
    text-align: right;
}

.nb-wrapup-retry-btn {
    margin-top: 12px;
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    color: #b45309;
    border: 1px solid #fbbf24;
    border-radius: 6px;
    cursor: pointer;
}
.nb-wrapup-retry-btn:hover {
    background: #fffbeb;
}

/* Teacher-only inline reset button on the locked section header */
.nb-graded-reset {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s, background 0.15s;
}
.nb-graded-reset:hover {
    opacity: 1;
    background: #fee2e2;
}

/* Per-question feedback body — render newline/bullet-separated lines as a list */
.tc-q-feedback-body {
    white-space: pre-wrap;
}
.tc-q-feedback-body ul {
    margin: 0;
    padding-left: 18px;
}
.tc-q-feedback-body li {
    margin: 2px 0;
}

/* ===== NOTEBOOK PLAN SECTION FORMAT TOOLBAR =====
   2026-05-25 — mirrored to lesson-modal's .ld-section-format-bar: two
   stacked rows (format/list/table on top, font colors + image picker on
   bottom), soft-green chrome borrowed from the student card. Keeps the
   notebook LP teacher view visually identical to the Student View tab
   (which portals through the same modal renderer). */
.nb-section-format-bar {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 6px 10px;
    background: #f5f9f5;
    border: 1px solid #d7e6d7;
    border-radius: 6px;
    margin: 4px 0 8px;
}
.nb-section-format-bar.open {
    display: flex;
}
.nb-sfmt-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
}
.nb-sfmt-row-colors {
    border-top: 1px dashed #e5e7eb;
    padding-top: 4px;
    margin-top: 1px;
}
.nb-sfmt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    transition: all 0.15s;
    padding: 0;
}
.nb-sfmt-btn:hover {
    background: #e9ecef;
    border-color: #d0d0d0;
}
.nb-sfmt-btn:active {
    background: #dee2e6;
}
.nb-sfmt-btn svg {
    display: block;
}
.nb-sfmt-text {
    font-weight: 700;
    font-family: Georgia, "Times New Roman", serif;
}
.nb-sfmt-sep {
    width: 1px;
    height: 18px;
    background: #d0d0d0;
    margin: 0 4px;
    flex-shrink: 0;
}
.nb-sfmt-label {
    font-size: 10px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-right: 4px;
    flex-shrink: 0;
}
.nb-sfmt-color-btn {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
    padding: 0;
    flex-shrink: 0;
}
.nb-sfmt-color-btn:hover {
    transform: scale(1.15);
    border-color: #999;
}
.nb-sfmt-color-btn.active {
    border-color: #333;
    box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px #333;
}

/* Contenteditable section content — flat (no visible border) to match
   the lesson-modal's .ld-section-content. The outer .nb-lp-plan-section
   card already provides the frame (green left-rule + light gray border).
   Focus is a subtle pale-green background, not a colored border ring. */
.nb-plan-section-content {
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    padding: 4px 2px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: inherit;
    line-height: 1.55;
    background: transparent;
    color: #222;
    min-height: 48px;
    outline: none;
    overflow-wrap: break-word;
    word-break: break-word;
    transition: background 0.15s;
}
.nb-plan-section-content:focus {
    background: #fafdfa;
}
.nb-plan-section-content:empty::before {
    content: attr(data-placeholder);
    color: #bbb;
    font-style: italic;
    pointer-events: none;
}

/* Rich text formatting support inside plan sections */
.nb-plan-section-content ul,
.nb-plan-section-content ol {
    margin: 4px 0 4px 20px;
    padding: 0;
}
.nb-plan-section-content li {
    margin-bottom: 2px;
}
.nb-plan-section-content b,
.nb-plan-section-content strong {
    font-weight: 700;
}

/* Read-only section content (student view) */
.nb-plan-section-readonly ul,
.nb-plan-section-readonly ol {
    margin: 4px 0 4px 20px;
    padding: 0;
}
.nb-plan-section-readonly li {
    margin-bottom: 2px;
}
.nb-plan-section-readonly b,
.nb-plan-section-readonly strong {
    font-weight: 700;
}

/* Tables inside lesson-plan sections — same look as the modal's
   .ld-content-table so a teacher's table reads identically whether
   they're editing in the modal or the notebook spread. Catches both
   the explicit .nb-content-table class the toolbar inserts and any
   bare <table> pasted in or rendered from sec.contentHtml. */
.nb-plan-section-content table,
.nb-plan-section-content .nb-content-table,
.nb-plan-section-readonly table,
.nb-plan-section-readonly .nb-content-table {
    border-collapse: collapse;
    width: 100%;
    margin: 8px 0;
    font-size: 12px;
    background: #fff;
}
.nb-plan-section-content th,
.nb-plan-section-content td,
.nb-plan-section-readonly th,
.nb-plan-section-readonly td {
    border: 1px solid #d1d5db;
    padding: 6px 10px;
    vertical-align: top;
    text-align: left;
}
.nb-plan-section-content thead th,
.nb-plan-section-content th,
.nb-plan-section-readonly thead th,
.nb-plan-section-readonly th {
    background: #f3f4f6;
    font-weight: 700;
    color: #1f2937;
}

/* ===== SHORT TEXT ANSWER FORMATTING TOOLBAR ===== */

/* Wrapper for contenteditable answer with pencil + toolbar */
.nb-answer-text-wrapper {
    position: relative;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

/* Pencil toggle button — top-right inside the answer box */
.nb-answer-format-pencil {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #999;
    transition: all 0.15s;
}
.nb-answer-format-pencil:hover {
    color: #555;
    background: #f0f0f0;
    border-color: #ddd;
}
.nb-answer-format-pencil.nb-active-format {
    color: #4338ca;
    background: #e0e7ff;
    border-color: #818cf8;
}
.nb-answer-format-pencil svg {
    display: block;
}

/* Answer formatting toolbar (slides open inside the answer box) */
.nb-answer-format-bar {
    display: none;
    align-items: center;
    gap: 3px;
    padding: 5px 10px;
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}
.nb-answer-format-bar.open {
    display: flex;
}

/* Contenteditable answer area */
.nb-answer-text-editable {
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    padding: 8px 10px;
    padding-right: 30px;
    border: none !important;
    border-radius: 0;
    font-family: inherit;
    line-height: 1.5;
    background: #fff;
    color: #333;
    outline: none;
    overflow-wrap: break-word;
    word-break: break-word;
}
.nb-answer-text-editable:empty::before {
    content: attr(data-placeholder);
    color: #bbb;
    font-style: italic;
    pointer-events: none;
}

/* Rich text formatting support inside answer areas */
.nb-answer-text-editable ul,
.nb-answer-text-editable ol {
    margin: 4px 0 4px 20px;
    padding: 0;
}
.nb-answer-text-editable li {
    margin-bottom: 2px;
}
.nb-answer-text-editable b,
.nb-answer-text-editable strong {
    font-weight: 700;
}

/* ============================================================
   STUDENT-MODE CHROME SWAP
   Applied by student-class-bootstrap.js when the signed-in user has
   role=Student. Keeps the teacher 48px global top bar visible (with
   logo + account + kebab only — search/tokens/plan/bell stripped),
   hides the teacher left sidebar, and frames the page with the
   student .ss-sidebar (shared/student-sidebar.{js,css}) sized to
   match the teacher's 240px rail. Force-routed to ?page=notebook
   upstream — only the notebook surface is reachable.
   ============================================================ */

/* Drop the teacher left rail + toggle + role switcher (kept for teachers). */
body.tc-student-mode .sidebar-background,
body.tc-student-mode .left-sidebar,
body.tc-student-mode .sidebar-toggle-btn,
body.tc-student-mode .role-switcher,
body.tc-student-mode .tc-role-switcher {
    display: none !important;
}

/* Page geometry — class.html-only (depends on layout.css .page-container /
   .main-content). The chrome rules themselves (.ss-sidebar / .ss-nav-item /
   class badges / collapse chip / topbar widgets) live in shared/student-
   sidebar.css under "body.tc-student-mode, body.tc-student-shell" so the
   standalone student pages get them too. */
body.tc-student-mode .page-container {
    margin-top: 48px;
    height: calc(100vh - 48px);
}
body.tc-student-mode .main-content {
    top: 48px;
    left: 240px;
    transition: left 0.18s ease;
}
/* Collapsed: sidebar shrinks to a 56px icon rail flush against the left
   edge. Icons + toggle arrow stay visible; the "My Classes" section
   and text labels hide. Body-class chain raises specificity above
   `body.tc-student-mode .ss-sidebar { width:240px; ... }` in
   shared/student-sidebar.css, which loads later in class.html and
   would otherwise win the cascade. */
body.tc-student-mode.tc-student-collapsed .main-content {
    left: 56px !important;
}
body.tc-student-mode.tc-student-collapsed .ss-sidebar {
    width: 56px;
    flex: 0 0 56px;
    overflow: visible;
}
body.tc-student-collapsed .ss-nav-item > span:not(.ss-nav-icon),
body.tc-student-collapsed .ss-nav-badge,
body.tc-student-collapsed .ss-sec,
body.tc-student-collapsed .ss-class-list,
body.tc-student-collapsed .ss-sec-head,
body.tc-student-collapsed .ss-logo-text {
    display: none !important;
}
body.tc-student-mode.tc-student-collapsed .ss-topnav {
    padding: 12px 6px;
}
body.tc-student-mode.tc-student-collapsed .ss-nav-item {
    justify-content: center;
    padding: 12px 0;
}
/* The .ss-toggle in tc-student-mode is position:fixed (see
   shared/student-sidebar.css:1017-1038), pinned at left:252px when
   the sidebar is open. On collapse, slide it to left:68px so it sits
   in the gutter next to the 56px icon rail. Setting `right: -14px`
   here would push it off the viewport entirely. */
body.tc-student-mode.tc-student-collapsed .ss-toggle {
    left: 68px;
    transform: rotate(180deg);
}
body.tc-student-mode.tc-student-collapsed .ss-toggle:hover {
    transform: rotate(180deg);
}
/* Keep the notebook book pinned to where it sat with the sidebar open
   — left-anchor the desk and reserve a 184px gutter (240 open − 56
   collapsed rail) as padding so the book doesn't lurch left when
   `.nb-desk { justify-content: center }` re-centers in the now-wider
   main-content area. */
body.tc-student-collapsed .nb-desk {
    justify-content: flex-start;
    padding-left: 184px;
}
/* …except on the notebook page, where the user wants the spread to
   actually re-center when the sidebar collapses (the 184px hack made
   the spread sit way off to the right, with a huge tan strip between
   the sidebar rail and the book on the left and almost none on the
   right). 4-class chain beats `body.tc-student-collapsed .nb-desk`
   (2 classes). */
body.tc-student-mode.tc-student-collapsed.tc-notebook-page .nb-desk {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* In student-mode, move the notebook FAB area (which carries the
   settings gear in student-mode — the + add button is hidden) out
   of the notebook's bottom-right corner (where the AI orb sits and
   covers it) and dock it under the floating full-page toggle. The
   settings panel then opens directly below the gear. Teacher mode
   keeps the original bottom-right anchor. */
/* The in-spread .nb-fab-area / .nb-settings-btn lives inside
   .nb-spread, which has perspective:2500px and therefore creates a
   containing block for position:fixed descendants. That's why the
   old in-spread gear could never line up with the body-level
   full-page toggle. In student-mode we hide the spread copy and
   render a body-level pill (.tc-topright-pill) that holds BOTH
   buttons as siblings so they share one true viewport anchor. */
body.tc-student-mode .nb-fab-area {
    display: none !important;
}
/* The standalone .sns-fab (Quick Add Note, bottom-right) is replaced by
   the note button inside the top-right pill — hide the floating one. */
body.tc-student-mode .sns-fab {
    display: none !important;
}
/* Students never get the AI chatbot. Hide the AI orb + panel entirely
   in student-mode on class.html so they can't open or interact with
   it. (Teacher view keeps it.) */
body.tc-student-mode #aiAssistant,
body.tc-student-mode .ai-bubble,
body.tc-student-mode .ai-panel {
    display: none !important;
}
body.tc-student-mode .nb-settings-panel {
    position: fixed;
    /* Pill is 32x96 now (3 buttons); ends at 152. 8px gap → panel 160. */
    top: 160px;
    right: 16px;
    bottom: auto;
    max-height: calc(100vh - 176px);
}

/* ============================================================
   Student FULL-PAGE mode — hides the global top banner AND the
   student sidebar, lets the notebook fill the entire viewport.
   Toggled by the floating button in the top-right corner of the
   tan background (injected by student-class-bootstrap.js).
   ============================================================ */
body.tc-student-fullscreen .top-banner,
body.tc-student-fullscreen .ss-sidebar,
body.tc-student-fullscreen .ss-toggle {
    display: none !important;
}
body.tc-student-fullscreen .page-container {
    margin-top: 0 !important;
    height: 100vh !important;
}
/* The .main-content + .nb-desk overrides below CHAIN tc-student-mode and
   tc-notebook-page (both always present in fullscreen notebook view) so
   our selectors have FOUR class selectors and beat the otherwise-tied
   `body.tc-student-mode.tc-student-collapsed .main-content { left: 56px
   !important }` rule (3 classes). Without that, if the student collapsed
   the sidebar before entering fullscreen, main-content stayed offset
   56px right and the left binder tabs got clipped by main-content's
   overflow:hidden. */
body.tc-student-fullscreen.tc-student-mode.tc-notebook-page .main-content {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}
body.tc-student-fullscreen.tc-student-mode.tc-notebook-page .nb-desk {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* In fullscreen the banner is gone — slide the panel up too. Pill
   moves to top:12, ends at 108 (3 buttons * 32); panel sits 8px
   below at top:116. */
body.tc-student-fullscreen .nb-settings-panel {
    top: 116px;
    max-height: calc(100vh - 128px);
}


/* ============================================================
   Top-right pill: one body-level container holding the
   full-page toggle (top) and notebook settings gear (bottom).
   Both buttons must be siblings here — the in-notebook gear's
   ancestor (.nb-spread) has perspective:2500px, which creates
   a containing block that traps position:fixed children, so
   they'd never line up with the body-fixed full-page chip.
   ============================================================ */
.tc-topright-pill {
    position: fixed;
    top: 56px;
    right: 16px;
    width: 32px;
    z-index: 90;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.tc-topright-btn {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #4b5563;
    transition: color 0.15s, background-color 0.15s;
}
.tc-topright-btn:hover {
    color: #059669;
    background: #f9fafb;
}
.tc-topright-btn svg { width: 16px; height: 16px; display: block; }
.tc-topright-btn + .tc-topright-btn { border-top: 1px solid #e5e7eb; }
body.tc-student-fullscreen .tc-topright-pill {
    top: 12px;
}

/* Old single-chip class — kept hidden so any stale DOM doesn't
   double-render. The new pill is .tc-topright-pill. */
.tc-fullpage-toggle { display: none !important; }

/* Hide teacher-only controls from the notebook chrome.
   Hidden: lesson editor opener, student picker (the student is auto-selected
   to themselves), Quick Note FAB (Phase 1 safety — re-enable when student
   note write-path is verified). The Today's Lesson button (#nbTodayBtn) is
   moved out of the title bar into the global topbar by student-class-
   bootstrap.js so we can hide the entire title bar row for students. */
body.tc-student-mode #nbOpenLessonBtn,
body.tc-student-mode .student-nav,
body.tc-student-mode .nb-add-btn,
body.tc-student-mode .nb-flyout,
body.tc-student-mode .nb-fab-wrap {
    display: none !important;
}

/* Hide the duplicated "G7CDE Notebook | No lesson selected" row entirely.
   That row's Today's Lesson button is relocated to the global topbar — see
   student-class-bootstrap.js _injectTopbarTodayBtn. */
body.tc-student-mode .nb-title-bar {
    display: none !important;
}

/* ============================================================
   EMBED MODE — class.html loaded inside an iframe.
   Used by the teacher's "view student notebook" overlays
   (nbkModal, nbIframe panel) so the host page's chrome doesn't
   render twice. Host adds ?embed=1 to the iframe src; an inline
   script in class.html sets body.tc-embed-mode on detection.
   ============================================================ */
body.tc-embed-mode .top-banner,
body.tc-embed-mode .sidebar-background,
body.tc-embed-mode .left-sidebar,
body.tc-embed-mode .sidebar-toggle-btn,
body.tc-embed-mode .role-switcher,
body.tc-embed-mode .tc-role-switcher {
    display: none !important;
}
body.tc-embed-mode .page-container {
    margin-top: 0;
    height: 100vh;
}
body.tc-embed-mode .main-content {
    top: 0;
    left: 0;
}


/* ============================================================
   Linked-portal Phase 5d — strikethrough roster row when a
   student has been copied out via the linked-teacher flow.
   excludedFromPushes is set by gcp/functions/teacherlinks/main.py
   on approval. Row stays clickable so the teacher can still open
   the student modal and review past data.
   ============================================================ */
tr.row-copied-out .student-name-clickable {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    color: #6b7280;
}
tr.row-copied-out .student-name-clickable::after {
    content: 'Copied out';
    display: inline-block;
    margin-left: 8px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #92400e;
    background: #fef9ed;
    padding: 1px 6px;
    border-radius: 999px;
    text-decoration: none;
    vertical-align: 2px;
}
tr.row-copied-out td:not(.rv-col-menu) {
    opacity: 0.75;
}

/* ===== Previous-lessons pill + dropdown (Phase 6, 2026-05-27) =====
   Shared class names with the lesson + unit modals. Duplicated here so
   the styles apply on the class home / batch-lesson surfaces too. */
.tc-prev-lessons-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: #dbeafe;
    border: 1px solid #93c5fd;
    font: 600 12px/1.15 inherit;
    color: #1e40af;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    letter-spacing: 0;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.tc-prev-lessons-pill:hover { background: #bfdbfe; border-color: #60a5fa; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08); }
.tc-prev-lessons-pill:disabled {
    cursor: default; opacity: 0.55;
    background: #f1f5f9; border-color: #e2e8f0; color: #64748b; box-shadow: none;
}
.tc-prev-lessons-pill:disabled:hover { background: #f1f5f9; border-color: #e2e8f0; box-shadow: none; }
.ld-launcher-prev-pill { align-self: flex-start; margin-top: 4px; }

.tc-prev-lessons-dropdown {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 25, 35, 0.18);
    padding: 10px 0;
    font: 13px/1.4 inherit;
    color: #0f172a;
    max-height: min(360px, calc(100vh - 40px));
    overflow: auto;
}
.tc-prev-lessons-dropdown-head {
    display: flex; flex-direction: column; gap: 2px;
    padding: 4px 14px 8px;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700; color: #0f172a; font-size: 13px;
}
.tc-prev-lessons-dropdown-sub { font-weight: 500; color: #64748b; font-size: 11px; letter-spacing: 0.1px; }
.tc-prev-lessons-dropdown-empty { padding: 18px 16px; color: #64748b; font-size: 12px; text-align: center; }
.tc-prev-lessons-dropdown-list { display: flex; flex-direction: column; padding: 4px 0; }
.tc-prev-lessons-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 14px; cursor: pointer;
    transition: background 0.12s;
}
.tc-prev-lessons-row:hover { background: #f1f5f9; }
.tc-prev-lessons-row input[type=checkbox] {
    margin: 3px 0 0; flex: 0 0 auto; cursor: pointer;
    width: 14px; height: 14px; accent-color: #2563eb;
}
.tc-prev-lessons-row-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tc-prev-lessons-row-title { font-weight: 600; color: #1e293b; font-size: 12.5px; line-height: 1.35; white-space: normal; word-break: break-word; }
.tc-prev-lessons-row-date { font-size: 11px; color: #64748b; margin-top: 2px; letter-spacing: 0.1px; }
.tc-prev-lessons-more {
    display: block; width: calc(100% - 28px);
    margin: 6px 14px 4px; padding: 7px 10px;
    background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px;
    color: #1e40af; font: 600 12px/1.2 inherit; font-family: inherit;
    cursor: pointer; text-align: center;
    transition: background 0.12s, border-color 0.12s;
}
.tc-prev-lessons-more:hover { background: #eff6ff; border-color: #93c5fd; }

.ld-launcher-title-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }