/* Hallmark · macrostructure: Workbench · tone: playful-utilitarian · anchor hue: sky blue
 * pre-emit critique: P5 H5 E4 S5 R5 V5
 */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import url('tokens.css');

@font-face {
    font-family: 'OpenDyslexic';
    src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Hallmark · component: register modal · genre: playful · theme: Hum
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 */
#classListModal {
    padding: clamp(0.5rem, 1.5vh, 1rem);
    box-sizing: border-box;
    overflow: hidden;
}

.class-list-modal-content {
    width: min(calc(96 * var(--tp-vw)), 1280px);
    height: min(calc(94 * var(--tp-vh)), 900px);
    max-width: none;
    max-height: none;
    padding: clamp(0.75rem, 1.6vh, 1.25rem);
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: clamp(0.55rem, 1.2vh, 0.9rem);
    overflow: hidden;
}

.class-list-status .class-list-dismiss {
    margin-inline-start: 0.3rem;
    flex: none;
}

.class-list-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
}

.class-list-heading h2 {
    margin: 0;
    border: 0;
    font-size: clamp(1.55rem, 3.4vh, 2.25rem);
    line-height: 1;
    overflow-wrap: anywhere;
}

#classListTutor {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: clamp(0.85rem, 1.8vh, 1.05rem);
    font-weight: 700;
}

.class-list-status {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

#livePresentCounter {
    flex: none;
    margin: 0;
    padding: 0.45rem 0.8rem;
    border: 3px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in oklch, var(--color-green) 24%, var(--panel-bg));
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: clamp(0.9rem, 2vh, 1.1rem);
    font-weight: 800;
    white-space: nowrap;
}

.class-list-modal-content .student-name-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: clamp(0.45rem, 1.1vh, 0.8rem);
    min-height: 0;
    max-height: none;
    padding: clamp(0.6rem, 1.4vh, 1rem);
    border-width: 3px;
    border-radius: 20px;
    background: color-mix(in oklch, var(--color-blue) 8%, var(--panel-bg));
    overflow: hidden;
}

.class-list-modal-content .student-tag {
    position: relative;
    min-width: 0;
    min-height: 0;
    padding: clamp(0.5rem, 1.5vh, 0.9rem) 0.75rem;
    border-width: 3px;
    border-radius: 16px;
    background: var(--panel-bg);
    color: var(--text-main);
    box-shadow: 0 4px 0 var(--border-color);
    font-family: var(--font-display);
    font-size: clamp(1rem, 2.2vh, 1.4rem);
    line-height: 1.1;
    touch-action: manipulation;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.class-list-modal-content .student-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--border-color);
    background: color-mix(in oklch, var(--color-amber) 24%, var(--panel-bg));
}

.class-list-modal-content .student-tag:focus-visible {
    outline: 4px solid var(--color-blue);
    outline-offset: 2px;
}

.class-list-modal-content .student-tag:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--border-color);
}

.class-list-modal-content .student-tag:disabled,
.class-list-modal-content .student-tag[aria-busy="true"] {
    cursor: wait;
    opacity: 0.62;
}

.class-list-modal-content .student-tag.marked {
    background: var(--color-green);
    color: var(--text-main);
    border-color: var(--color-green-dark);
    box-shadow: 0 4px 0 var(--color-green-dark);
}

.class-list-modal-content .student-tag.marked:active {
    box-shadow: 0 1px 0 var(--color-green-dark);
}

.class-list-modal-content .class-list-close {
    flex: none;
    min-height: 42px;
    margin: 0;
    padding: 0.45rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
}

@media (orientation: portrait) {
    .class-list-header {
        align-items: stretch;
        flex-direction: column;
        gap: 0.45rem;
    }

    .class-list-status {
        justify-content: space-between;
    }

    .class-list-modal-content .student-name-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .class-list-modal-content .student-name-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .class-list-modal-content .student-tag {
        padding-inline: 0.35rem;
        border-width: 2px;
        border-radius: 12px;
    }

}

@font-face {
    font-family: 'OpenDyslexic';
    src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Hum Palette: OKLCH Calibration */
    --bg-main: oklch(97.5% 0.012 95);
    /* Cream paper */
    --panel-bg: oklch(99% 0.005 95);
    /* Slightly cleaner cream panel */
    --border-color: oklch(22% 0.012 250);
    /* Near-black cool ink borders */
    --text-main: oklch(22% 0.012 250);
    /* Ink text */
    --text-muted: oklch(48% 0.012 250);
    /* Muted body text */

    /* Font Families */
    --font-display: 'Fredoka', system-ui, -apple-system, sans-serif;
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    /* Calibrated child-friendly accents */
    --color-red: oklch(68% 0.24 18);
    /* Coral-red */
    --color-red-dark: oklch(58% 0.26 18);
    --color-blue: oklch(66% 0.18 235);
    /* Sky-cyan */
    --color-blue-dark: oklch(56% 0.20 235);
    --color-green: oklch(80% 0.16 150);
    /* Mint */
    --color-green-dark: oklch(70% 0.18 150);
    --color-amber: oklch(86% 0.18 95);
    /* Pear-yellow */
    --color-amber-dark: oklch(76% 0.20 95);
    --color-purple: oklch(76% 0.16 305);
    /* Lavender */
    --color-purple-dark: oklch(66% 0.18 305);
    --color-pink: oklch(75% 0.20 345);
    /* Rose pink */
    --color-pink-dark: oklch(65% 0.22 345);
    --background-light: oklch(97% 0.01 250);
    --spinner-yellow: oklch(91% 0.14 98);
    --spinner-pink: oklch(88% 0.10 345);
    --spinner-mint: oklch(90% 0.08 185);
    --spinner-gold: oklch(86% 0.16 85);
    --spinner-lilac: oklch(78% 0.14 300);
    --spinner-sky: oklch(82% 0.11 240);
    --spinner-lime: oklch(86% 0.15 130);
    --spinner-peach: oklch(89% 0.10 55);
    --spinner-focus: oklch(56% 0.20 235);
    --spinner-danger-soft: oklch(96% 0.03 18);

    --font-family: var(--font-body);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-micro: 120ms;
    --dur-short: 180ms;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

html,
body {
    font-family: var(--font-body);
    background-color: var(--bg-main);
    background-image:
        radial-gradient(at 0% 0%, oklch(86% 0.18 95 / 0.03) 0px, transparent 50%),
        radial-gradient(at 100% 0%, oklch(66% 0.18 235 / 0.03) 0px, transparent 50%);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    min-height: calc(100 * var(--tp-vh));
    overflow-x: clip;
}

/* Screen units that stay true under the board zoom fallback (display-fit.js).
   On boards using the viewport meta, laptops and phones --tp-zoom is unset,
   so these are plain 1vh / 1vw. Under `zoom` on <html>, vh/vw get scaled by
   the zoom as well; dividing it back out makes calc(100 * var(--tp-vh)) the
   real screen height. Use these for any full-screen height/width. */
:root {
    --tp-vh: calc(1vh / var(--tp-zoom, 1));
    --tp-vw: calc(1vw / var(--tp-zoom, 1));
    --tp-dvh: calc(1dvh / var(--tp-zoom, 1));
}

html {
    /* A 1900px layout scaled onto a smaller screen must not trigger Android's
       font boosting, which enlarges some paragraphs and not others. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
.menu-card-title,
.btn-ui,
.mute-btn,
.timer-widget,
.screensaver-time,
.screensaver-date,
.brand-tutor,
.brand-pulse-badge {
    font-family: var(--font-display);
}

.confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

header {
    background: var(--panel-bg);
    border-bottom: 4px solid var(--border-color);
    padding: 1rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1001;
}

.header-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

header h1 {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-align: center;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-center-info {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0.6rem;
    flex: 1;
}

/* SCOREBOARD CHUNKS */
.scoreboard-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    background: #f8fafc;
    padding: 0.85rem;
    border-radius: 20px;
    border: 3px solid var(--border-color);
}

.team-chip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #ffffff;
    border: 3px solid var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: 16px;
    font-weight: 700;
    font-size: 1.15rem;
    box-shadow: 0 4px 0 var(--border-color);
    transition: transform 0.1s, box-shadow 0.1s;
}

.team-chip .score-display {
    color: #ffffff;
    font-size: 1.4rem;
    background: var(--border-color);
    padding: 0.15rem 0.75rem;
    border-radius: 10px;
    min-width: 32px;
    text-align: center;
}

.score-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    background: #ffffff;
    color: var(--border-color);
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
    user-select: none;
}

.score-btn:active {
    transform: scale(0.9);
}

.score-btn.plus {
    background: var(--color-green);
    color: white;
}

.score-btn.minus {
    background: var(--color-red);
    color: white;
}

.team-chip.color-red {
    border-color: var(--color-red);
}

.team-chip.color-blue {
    border-color: var(--color-blue);
}

.team-chip.color-green {
    border-color: var(--color-green);
}

.team-chip.color-amber {
    border-color: var(--color-amber);
}

.team-chip.color-purple {
    border-color: var(--color-purple);
}

.team-chip button.remove-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 700;
    font-size: 1.3rem;
    padding: 0 0.15rem;
    transition: color 0.15s;
}

.team-chip button.remove-btn:hover {
    color: var(--color-red);
}

.add-team-box {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.add-team-box input {
    background: #ffffff;
    border: 3px solid var(--border-color);
    color: var(--text-main);
    padding: 0.6rem 1rem;
    border-radius: 14px;
    font-size: 1.05rem;
    font-weight: 600;
    width: 170px;
}

.mute-btn {
    font-size: 1.1rem;
    background: var(--panel-bg);
    border: 3px solid var(--border-color);
    border-radius: 10px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--border-color);
    transition: all 0.15s;
}

.mute-btn:active {
    transform: translateY(3px);
    box-shadow: none;
}

/* MAIN VIEW LAYOUT */
.workspace {
    max-width: 1400px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

.display-deck {
    background: color-mix(in oklch, var(--app-theme-color, var(--panel-bg)) 4%, var(--panel-bg));
    border: 4px solid var(--app-theme-color, var(--border-color));
    border-radius: 32px;
    padding: 2.5rem;
    min-height: 500px;
    box-shadow: 0 12px 0 var(--app-theme-color, var(--border-color));
    position: relative;
}

.screen {
    display: none;
}

.screen.active {
    display: block;
}

.screen:not(.active) {
    display: none !important;
}

@media (min-width: 769px) {
    body.classroom-presentation-active {
        height: calc(100 * var(--tp-dvh));
        overflow: hidden;
    }

    body.classroom-presentation-active .workspace {
        /* .display-deck has a 12px bottom box-shadow that doesn't count
           toward its layout box, so this margin needs to clear that shadow
           depth plus leave an actual visible gap beneath it. */
        margin-block: 1.75rem;
    }

    body.classroom-presentation-active .display-deck {
        box-sizing: border-box;
        height: var(--presentation-height);
        min-height: 0;
        overflow-y: auto;
    }

    /* Every app loses this much top-loaded whitespace once it's actually
       being used, reclaiming room across the board for apps whose content
       is tight against the fit-to-screen height. */
    body.classroom-presentation-active p.subtitle {
        margin-bottom: 1rem;
    }

    body.classroom-presentation-active .screen.active {
        width: 100%;
        max-width: none;
        transform-origin: top left;
    }

    body.classroom-presentation-active #bigQuestionsView.active {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        height: 100%;
    }

    body.classroom-presentation-active #bigQuestionsView.active #bigQuestionText {
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: 0;
        margin-block: 1rem;
    }

    body.classroom-presentation-active #bigQuestionsView.active>div:last-child {
        align-self: center;
        margin-block: 0.5rem !important;
    }

    body.classroom-presentation-active #icebreakerView.active {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto auto;
        height: 100%;
    }

    body.classroom-presentation-active #icebreakerView.active #icebreakerField {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
        margin-block: 1rem;
    }

    body.classroom-presentation-active #icebreakerView.active>div:last-child {
        align-self: center;
        margin-block: 0.75rem !important;
    }

    body.classroom-presentation-active #doodleView.active {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto auto;
        height: 100%;
    }

    body.classroom-presentation-active #doodleView.active #doodlePromptField {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
        margin-block: 1rem;
    }

    body.classroom-presentation-active #scrambleView.active,
    body.classroom-presentation-active #dailyRiddleView.active {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        height: 100%;
    }

    body.classroom-presentation-active #scrambleView.active>div:last-child {
        align-self: center;
    }

    body.classroom-presentation-active #dailyRiddleView.active .riddle-card-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        max-width: 54rem;
        margin: 0 auto;
    }

    body.classroom-presentation-active #dailyRiddleView.active .riddle-main-card {
        width: 100%;
    }

    body.classroom-presentation-active #dailyRiddleView.active .riddle-question-text {
        font-size: clamp(1.8rem, 3.4vw, 3rem);
    }

    body.classroom-presentation-active #goodNewsView.active {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        height: 100%;
    }

    body.classroom-presentation-active #goodNewsView.active .good-news-card-wrapper {
        height: 100%;
        min-height: 0;
        max-width: 54rem;
        margin: 0 auto;
    }

    body.classroom-presentation-active #goodNewsView.active .good-news-deck-card {
        gap: 1rem;
        padding: 1.5rem 2.2rem;
    }

    body.classroom-presentation-active #goodNewsView.active .good-news-emoji-seal {
        font-size: 3rem;
    }

    body.classroom-presentation-active #goodNewsView.active .good-news-headline {
        font-size: clamp(1.8rem, 3vw, 2.6rem);
    }

    body.classroom-presentation-active #goodNewsView.active .good-news-body-text {
        font-size: clamp(1.2rem, 2vw, 1.6rem);
    }

    body.classroom-presentation-active #goodNewsView.active .good-news-actions {
        padding-top: 1rem;
    }

    body.classroom-presentation-active #memoryMatchView.active {
        display: grid;
        grid-template-rows: auto auto auto minmax(0, 1fr);
        height: 100%;
    }

    body.classroom-presentation-active #memoryMatchView.active .memory-grid-wrapper {
        min-height: 0;
        align-items: center;
        margin-top: 0;
    }

    body.classroom-presentation-active #memoryMatchView.active .memory-cards-grid {
        width: auto;
        height: min(100%, 560px);
        aspect-ratio: 1;
    }

    body.classroom-presentation-active #rewardSpinnerView.active {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        height: 100%;
    }

    body.classroom-presentation-active #rewardSpinnerView.active .spinner-outer-box {
        min-height: 0;
        align-items: stretch;
        margin-top: 0.75rem;
    }

    body.classroom-presentation-active #rewardSpinnerView.active .spinner-stage,
    body.classroom-presentation-active #rewardSpinnerView.active .spinner-controls-panel {
        min-height: 0;
        gap: 0.5rem;
        padding: 1rem;
        overflow-y: auto;
    }

    body.classroom-presentation-active #rewardSpinnerView.active .spinner-wheel-container {
        flex: 1 1 0;
        min-height: 0;
        width: auto;
        max-height: 30rem;
    }

    /* Shared across every .classroom-puzzle-screen app (Link Up, Order Up,
       Definition Detective, Sequence Solver, British Values) - reclaims
       top/bottom-loaded whitespace around the toolbar/heading/teacher-note
       once an app is actually open. */
    body.classroom-presentation-active .puzzle-toolbar {
        margin-bottom: 0.5rem;
    }

    body.classroom-presentation-active .puzzle-heading-row {
        margin-bottom: 0.5rem;
    }

    body.classroom-presentation-active .teacher-note {
        margin-top: 0.5rem;
        padding: 0.5rem 1rem;
    }

    /* Link Up: 4x4 tile grid was fixed at min-height:76px/tile regardless of
       available space. Let it size off the actual remaining height instead.
       .puzzle-stage gets an explicit height:100% (not just min-height:0) so
       it can't end up short of the row it's supposed to fill - that gap was
       showing up as dead space between the teacher-note and the deck's
       bottom edge.
       #linkUpView now has only 3 direct children (h2, subtitle, puzzle-stage)
       - the toolbar moved inside the heading row and the teacher note was
       removed - so this must track that count exactly or the leftover rows
       silently swallow the grid's height and collapse every tile to ~0px. */
    body.classroom-presentation-active #linkUpView.active {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        height: 100%;
    }

    body.classroom-presentation-active #linkUpView.active>.puzzle-stage {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }

    body.classroom-presentation-active #linkUpView.active .link-up-grid {
        flex: 1 1 0;
        min-height: 0;
        grid-template-rows: repeat(4, minmax(0, 1fr));
    }

    body.classroom-presentation-active #linkUpView.active .puzzle-tile {
        min-height: 0;
        font-size: clamp(0.95rem, 1.6vw, 1.5rem);
    }

    /* Order Up: same screen-level flexible-height structure and explicit
       height fix as Link Up, plus shrunk rows/controls so longer ordering
       challenges fit without an inner scroll. */
    body.classroom-presentation-active #orderUpView.active {
        display: grid;
        grid-template-rows: auto auto auto minmax(0, 1fr) auto;
        height: 100%;
    }

    body.classroom-presentation-active #orderUpView.active>.puzzle-stage {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }

    body.classroom-presentation-active #orderUpView.active .puzzle-heading-row h3 {
        font-size: clamp(1.4rem, 2.6vw, 2rem);
    }

    body.classroom-presentation-active #orderUpView.active .order-up-list {
        flex: 1 1 0;
        min-height: 0;
        gap: 0.3rem;
        align-content: center;
        overflow-y: auto;
    }

    body.classroom-presentation-active #orderUpView.active .order-up-row {
        min-height: 32px;
        padding: 0.25rem 0.6rem;
    }

    body.classroom-presentation-active #orderUpView.active .order-controls button {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
    }

    /* Pictogram Puzzles: the wrapper around the board/hint/answer/actions
       had a flat 1.5rem gap between all 4-5 children, and the filter row
       above it added more margin on top of that. */
    body.classroom-presentation-active #whiteboardView.active #pictoCategoryFilters {
        margin-bottom: 0.5rem;
    }

    body.classroom-presentation-active #whiteboardView.active #pictoFilterStatus {
        margin-bottom: 0.5rem;
    }

    body.classroom-presentation-active #whiteboardView.active>div:last-child {
        gap: 0.75rem;
        margin-top: 0.5rem;
    }

    body.classroom-presentation-active #whiteboardView.active #pictoBoard {
        min-height: 0 !important;
    }

    /* Fluency Sprint: top options bar (auto height) + main question/keypad
       row (grows to fill whatever's left) + full-width timer bar (auto,
       pinned to the bottom). The screen itself needs an explicit
       height:100% here (display:block by default doesn't fill its parent) -
       without it, .fs-main-row's flex-grow has nothing definite to grow
       within, so it just sizes to its own content and leaves the reserved
       space empty instead of filling it. */
    /* display:flex here previously mis-measured .fs-top-row's wrapped
       (2-line) height, reserving only a 1-line gap and letting the
       overflow paint on top of .fs-main-row below it - a known flexbox
       quirk with auto-sized wrapping flex items in a column container.
       CSS Grid's auto row sizing doesn't have that problem, matching the
       (working) technique used for Link Up/Order Up/Daily Riddle. */
    body.classroom-presentation-active #fluencySprintView.active {
        display: grid;
        grid-template-rows: auto auto auto minmax(0, 1fr) auto;
        height: 100%;
    }

    body.classroom-presentation-active #fluencySprintView.active .fs-main-row {
        min-height: 0;
    }

    body.classroom-presentation-active #breathingView.active {
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        height: 100%;
    }

    body.classroom-presentation-active #breathingView.active .breathing-bubble-container {
        align-self: center;
    }

    body.classroom-presentation-active #newsView .subtitle {
        margin-block: 0.75rem;
    }

    body.classroom-presentation-active #newsView>div:nth-of-type(1) {
        margin-bottom: 0.75rem !important;
    }

    body.classroom-presentation-active #newsView .news-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
        margin-top: 0.75rem;
    }

    body.classroom-presentation-active #newsView .news-story-card {
        min-height: 280px;
    }
}

h2 {
    font-size: 2.4rem;
    margin-top: 0;
    font-weight: 700;
    color: var(--app-theme-color, var(--border-color));
    border-bottom: 4px solid var(--app-theme-color, var(--bg-main));
    padding-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

h2 svg {
    width: 2.2rem;
    height: 2.2rem;
    stroke-width: 2.25;
    flex-shrink: 0;
    color: var(--app-theme-color, inherit);
}

p.subtitle {
    color: var(--text-muted);
    font-size: 1.25rem;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    line-height: 1.4;
}

/* CHUNKY CLASSROOM BUTTONS */
.btn-ui {
    background: var(--panel-bg);
    color: var(--border-color);
    border: 3px solid var(--border-color);
    padding: 0.9rem 1.8rem;
    border-radius: 18px;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 0 var(--border-color);
    transition: all 0.15s;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-ui:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 var(--border-color);
}

.btn-ui:active {
    transform: translateY(5px);
    box-shadow: 0 1px 0 var(--border-color);
}

.btn-accent {
    background: var(--color-blue);
    color: #ffffff;
}

.btn-delete {
    background: var(--color-red);
    color: #ffffff;
}

.btn-yellow {
    background: var(--color-amber);
    color: #ffffff;
}

/* .btn-ui.btn-green / .btn-red / .btn-blue previously had no rule of their
   own anywhere in the codebase (only unrelated compound selectors like
   .menu-card.btn-green existed) - buttons using them silently fell back to
   an unstyled default look despite the class implying a fill colour. Added
   to match the working .btn-yellow/.btn-accent recipe, fixing every existing
   use (Sequence Solver was already fixed separately; this covers Team Duel's
   judge buttons, Student Points' Add/Take/Save, Reward Spinner's Spin
   button, Quote of the Week's timer controls, Audiobooks' Lookup button,
   and others) without touching any screen's markup. */
.btn-red {
    background: var(--color-red);
    color: #ffffff;
}

.btn-green {
    background: var(--color-green);
    color: #ffffff;
}

.btn-blue {
    background: var(--color-blue);
    color: #ffffff;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: minmax(145px, auto);
    align-items: stretch;
    gap: 1.25rem;
    margin: 1rem 0;
}

.menu-card {
    position: relative;
    background: var(--panel-bg);
    border: 4px solid var(--border-color);
    border-radius: 20px;
    padding: 1.25rem;
    cursor: pointer;
    box-shadow: 0 8px 0 var(--border-color);
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    order: 1;
    height: 100%;
    box-sizing: border-box;
}

.menu-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 3px solid var(--border-color);
    background: var(--panel-bg);
    box-shadow: 2px 2px 0px 0px var(--border-color);
    pointer-events: none;
}

.menu-card-badge svg {
    width: 1.1rem;
    height: 1.1rem;
    stroke-width: 2.25;
    color: var(--text-muted);
}

.menu-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 13px 0 var(--border-color);
}

.menu-card:active {
    transform: translateY(6px);
    box-shadow: 0 2px 0 var(--border-color);
}

.menu-card-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.2rem;
    margin-bottom: 0.25rem;
}

.menu-card-icon svg {
    width: 2.8rem;
    height: 2.8rem;
    stroke-width: 2.25;
    transition: transform 0.2s ease, stroke-width 0.2s ease;
}

.menu-card:hover .menu-card-icon svg {
    transform: scale(1.1);
    stroke-width: 2.5;
}

/* Icon matching colors for card themes */
.menu-card.btn-c1 .menu-card-icon {
    color: #f87171;
}

.menu-card.btn-c2 .menu-card-icon {
    color: #fb923c;
}

.menu-card.btn-c3 .menu-card-icon {
    color: #fbbf24;
}

.menu-card.btn-c4 .menu-card-icon {
    color: #a3e635;
}

.menu-card.btn-c5 .menu-card-icon {
    color: #34d399;
}

.menu-card.btn-c6 .menu-card-icon {
    color: #2dd4bf;
}

.menu-card.btn-c7 .menu-card-icon {
    color: #38bdf8;
}

.menu-card.btn-c8 .menu-card-icon {
    color: #60a5fa;
}

.menu-card.btn-c9 .menu-card-icon {
    color: #818cf8;
}

.menu-card.btn-c10 .menu-card-icon {
    color: #a78bfa;
}

.menu-card.btn-c11 .menu-card-icon {
    color: #c084fc;
}

.menu-card.btn-c12 .menu-card-icon {
    color: #e879f9;
}

.menu-card.btn-c13 .menu-card-icon {
    color: #f472b6;
}

.menu-card.btn-c14 .menu-card-icon {
    color: #fb7185;
}

.menu-card.btn-c15 .menu-card-icon {
    color: #10b981;
}

.menu-card.btn-c16 .menu-card-icon {
    color: #059669;
}

.menu-card.btn-c17 .menu-card-icon {
    color: #d97706;
}

.menu-card.btn-c18 .menu-card-icon {
    color: #64748b;
}

.menu-card.btn-c19 .menu-card-icon {
    color: #d946ef;
}

.menu-card.btn-c20 .menu-card-icon {
    color: #b45309;
}

.menu-card.btn-c21 .menu-card-icon {
    color: #eab308;
}

.menu-card.btn-c22 .menu-card-icon {
    color: #9333ea;
}

.menu-card.btn-c23 .menu-card-icon {
    color: #ea580c;
}

.menu-card.btn-c24 .menu-card-icon {
    color: #0f766e;
}

.menu-card.btn-c25 .menu-card-icon {
    color: #0284c7;
}

.menu-card.btn-c26 .menu-card-icon {
    color: #be123c;
}

.menu-card.btn-c27 .menu-card-icon {
    color: #4f46e5;
}

.menu-card.btn-c28 .menu-card-icon {
    color: #65a30d;
}

.menu-card.btn-c29 .menu-card-icon {
    color: #0891b2;
}

.menu-card.btn-c30 .menu-card-icon {
    color: #7c3aed;
}

.menu-card.btn-c31 .menu-card-icon {
    color: #f97316;
}

.menu-card.btn-c32 .menu-card-icon {
    color: #ca8a04;
}

.menu-card.btn-c33 .menu-card-icon {
    color: #0d9488;
}

.menu-card.btn-c34 .menu-card-icon {
    color: #db2777;
}

.menu-card.btn-c35 .menu-card-icon {
    color: #0e7490;
}

.menu-card.btn-c36 .menu-card-icon {
    color: #f59e0b;
}

.menu-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--border-color);
}

.menu-card-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
}

.menu-card.btn-blue {
    border-color: var(--color-blue);
    background: color-mix(in oklch, var(--color-blue) 5%, transparent);
}

.menu-card.btn-purple {
    border-color: var(--color-purple);
    background: color-mix(in oklch, var(--color-purple) 5%, transparent);
}

.menu-card.btn-red {
    border-color: var(--color-red);
    background: color-mix(in oklch, var(--color-red) 5%, transparent);
}

.menu-card.btn-amber {
    border-color: var(--color-amber);
    background: color-mix(in oklch, var(--color-amber) 5%, transparent);
}

.menu-card.btn-green {
    border-color: var(--color-green);
    background: color-mix(in oklch, var(--color-green) 5%, transparent);
}

.menu-card.btn-pink {
    border-color: var(--color-pink);
    background: color-mix(in oklch, var(--color-pink) 5%, transparent);
}

/* 36 Differentiated App Card Border Colors */
.menu-card.btn-c1 {
    border-color: #f87171;
    --card-accent: #f87171;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c2 {
    border-color: #fb923c;
    --card-accent: #fb923c;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c3 {
    border-color: #fbbf24;
    --card-accent: #fbbf24;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c4 {
    border-color: #a3e635;
    --card-accent: #a3e635;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c5 {
    border-color: #34d399;
    --card-accent: #34d399;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c6 {
    border-color: #2dd4bf;
    --card-accent: #2dd4bf;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c7 {
    border-color: #38bdf8;
    --card-accent: #38bdf8;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c8 {
    border-color: #60a5fa;
    --card-accent: #60a5fa;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c9 {
    border-color: #818cf8;
    --card-accent: #818cf8;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c10 {
    border-color: #a78bfa;
    --card-accent: #a78bfa;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c11 {
    border-color: #c084fc;
    --card-accent: #c084fc;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c12 {
    border-color: #e879f9;
    --card-accent: #e879f9;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c13 {
    border-color: #f472b6;
    --card-accent: #f472b6;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c14 {
    border-color: #fb7185;
    --card-accent: #fb7185;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c15 {
    border-color: #10b981;
    --card-accent: #10b981;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c16 {
    border-color: #059669;
    --card-accent: #059669;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c17 {
    border-color: #d97706;
    --card-accent: #d97706;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c18 {
    border-color: #64748b;
    --card-accent: #64748b;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c19 {
    border-color: #d946ef;
    --card-accent: #d946ef;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c20 {
    border-color: #b45309;
    --card-accent: #b45309;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c21 {
    border-color: #eab308;
    --card-accent: #eab308;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c22 {
    border-color: #9333ea;
    --card-accent: #9333ea;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c23 {
    border-color: #ea580c;
    --card-accent: #ea580c;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c24 {
    border-color: #0f766e;
    --card-accent: #0f766e;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c25 {
    border-color: #0284c7;
    --card-accent: #0284c7;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c26 {
    border-color: #be123c;
    --card-accent: #be123c;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c27 {
    border-color: #4f46e5;
    --card-accent: #4f46e5;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c28 {
    border-color: #65a30d;
    --card-accent: #65a30d;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c29 {
    border-color: #0891b2;
    --card-accent: #0891b2;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c30 {
    border-color: #7c3aed;
    --card-accent: #7c3aed;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c31 {
    border-color: #f97316;
    --card-accent: #f97316;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c32 {
    border-color: #ca8a04;
    --card-accent: #ca8a04;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c33 {
    border-color: #0d9488;
    --card-accent: #0d9488;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c34 {
    border-color: #db2777;
    --card-accent: #db2777;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c35 {
    border-color: #0e7490;
    --card-accent: #0e7490;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

.menu-card.btn-c36 {
    border-color: #f59e0b;
    --card-accent: #f59e0b;
    background: color-mix(in oklch, var(--card-accent) 5%, var(--panel-bg));
}

/* TRIVIA & DISCUSSION */
.trivia-box {
    background: #ffffff;
    border: 4px solid var(--app-theme-color, var(--border-color));
    border-radius: 24px;
    padding: 2.5rem;
    text-align: center;
    font-size: 1.9rem;
    font-weight: 700;
    margin: 1.5rem 0;
    line-height: 1.4;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.05);
}

.answer-reveal-zone {
    background: rgba(16, 185, 129, 0.1);
    border: 4px dashed var(--color-green);
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-green-dark);
    margin-top: 1.5rem;
    display: none;
}

/* TIMER SVGs */
.timer-circle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.5rem 0;
    position: relative;
    height: 140px;
}

.timer-svg {
    width: 130px;
    height: 130px;
    transform: rotate(-90deg);
}

.timer-circle-bg {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 10;
}

.timer-circle-fill {
    fill: none;
    stroke: var(--color-blue);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 339.29;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.1s linear, stroke 0.3s;
}

.timer-text {
    position: absolute;
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--border-color);
}

/* WOULD YOU RATHER */
.would-you-rather-container {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.wyr-option-box {
    background: #ffffff;
    border: 4px solid var(--color-red);
    border-radius: 24px;
    padding: 2rem;
    flex: 1;
    min-width: 250px;
    max-width: 450px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 8px 0 var(--color-red-dark);
    transition: transform 0.15s, box-shadow 0.15s;
    font-family: inherit;
    color: var(--text-main);
}

.wyr-option-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 0 var(--color-red-dark);
}

.wyr-option-box:active {
    transform: translateY(6px);
    box-shadow: 0 2px 0 var(--color-red-dark);
}

.wyr-option-box.font-alt {
    border-color: var(--color-blue);
    box-shadow: 0 8px 0 var(--color-blue-dark);
}

.wyr-option-box.font-alt:hover {
    box-shadow: 0 12px 0 var(--color-blue-dark);
}

.wyr-option-box.font-alt:active {
    transform: translateY(6px);
    box-shadow: 0 2px 0 var(--color-blue-dark);
}

.wyr-option-text {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.wyr-vote-count {
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-red);
}

.wyr-option-box.font-alt .wyr-vote-count {
    color: var(--color-blue);
}

/* TWO TRUTHS AND A LIE */
.truths-setup-card {
    background: #f8fafc;
    border: 4px solid var(--border-color);
    border-radius: 24px;
    padding: 2rem;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.setup-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.statement-input {
    flex: 1;
    background: #ffffff;
    border: 3px solid var(--border-color);
    color: var(--text-main);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
}

.lie-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    user-select: none;
}

.lie-checkbox-label input[type="radio"] {
    width: 22px;
    height: 22px;
    accent-color: var(--color-red);
}

.truths-game-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 750px;
    margin: 1.5rem auto;
}

.truth-game-card {
    background: #ffffff;
    border: 4px solid var(--border-color);
    border-radius: 20px;
    padding: 1.25rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    cursor: pointer;
    box-shadow: 0 6px 0 var(--border-color);
    transition: transform 0.1s, box-shadow 0.1s;
}

.truth-game-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 var(--border-color);
}

.truth-game-card:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--border-color);
}

.truth-card-number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e2e8f0;
    border: 3px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--border-color);
    flex-shrink: 0;
}

.truth-card-text {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    flex: 1;
}

.truth-game-card.revealed-lie {
    border-color: var(--color-red);
    background: rgba(239, 68, 68, 0.08);
    box-shadow: 0 6px 0 var(--color-red-dark);
}

.truth-game-card.revealed-lie .truth-card-number {
    background: var(--color-red);
    color: white;
    border-color: var(--color-red-dark);
}

.truth-game-card.revealed-truth {
    border-color: var(--color-green);
    background: rgba(16, 185, 129, 0.08);
    box-shadow: 0 6px 0 var(--color-green-dark);
}

.truth-game-card.revealed-truth .truth-card-number {
    background: var(--color-green);
    color: white;
    border-color: var(--color-green-dark);
}

/* NUMBER CRUNCH */
.card-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}

.block-card {
    background: #ffffff;
    border: 4px solid var(--border-color);
    width: 85px;
    height: 95px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--color-blue);
    box-shadow: 0 6px 0 var(--border-color);
}

.block-card.target {
    width: 160px;
    color: var(--color-amber);
    border-color: var(--color-amber);
    box-shadow: 0 6px 0 var(--color-amber-dark);
}

.math-reveal-panel {
    background: #f8fafc;
    border: 3px solid var(--border-color);
    border-radius: 20px;
    padding: 1.5rem;
    margin: 1.5rem auto 0;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.math-reveal-panel[hidden] {
    display: none;
}

.math-step-display {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.math-step-fallback {
    text-align: center;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0;
}

.math-step-line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #ffffff;
    border: 3px solid var(--border-color);
    border-radius: 14px;
    padding: 0.75rem 1rem;
}

.math-step-badge {
    background: var(--color-purple);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.25rem 0.7rem;
    border-radius: 50px;
    flex-shrink: 0;
}

.math-step-expr {
    font-size: 1.2rem;
    font-weight: 700;
}

.math-bar-step {
    background: #ffffff;
    border: 3px solid var(--border-color);
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.math-bar-combine-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.math-bar-operand {
    height: 48px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: #ffffff;
    background: var(--color-blue);
    border: 3px solid var(--border-color);
    border-radius: 12px;
    padding: 0 0.5rem;
}

.math-bar-operand.result {
    background: var(--color-green);
}

.math-bar-op-symbol {
    font-weight: 800;
    font-size: 1.5rem;
    flex: 0 0 auto;
}

.math-reveal-controls {
    display: flex;
    justify-content: center;
}

.math-companion-code {
    font-size: 1.2rem;
    font-weight: 800;
    text-align: center;
    margin: 0;
}

.math-companion-code strong {
    color: var(--color-blue);
    font-size: 1.6rem;
    letter-spacing: 0.1em;
}

.math-companion-hint {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.math-companion-live {
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: var(--text-muted);
}

.math-companion-results {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.math-companion-result-row {
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    border: 3px solid var(--border-color);
    border-radius: 12px;
    padding: 0.6rem 1rem;
    font-weight: 700;
}

.progress-track {
    width: 100%;
    height: 16px;
    background: #e2e8f0;
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 2rem;
    border: 3px solid var(--border-color);
}

.progress-fill {
    width: 100%;
    height: 100%;
    background: var(--color-purple);
    transition: width 1s linear;
}

/* 3x3 MEMORY MATRIX */
.matrix-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 360px;
    margin: 2rem auto;
}

.matrix-tile {
    background: #e2e8f0;
    border: 4px solid var(--app-theme-color, var(--border-color));
    aspect-ratio: 1;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 6px 0 var(--app-theme-color, var(--border-color));
    transition: transform 0.1s, box-shadow 0.1s;
    padding: 0;
}

.matrix-tile:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--border-color);
}

.matrix-tile.flash {
    background: var(--color-green);
    box-shadow: 0 6px 0 var(--color-green-dark);
}

.matrix-tile.alarm {
    background: var(--color-red);
    box-shadow: 0 6px 0 var(--color-red-dark);
}

/* NEWSROUND CHAT */
.news-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1rem;
}

.news-story-card {
    background: #ffffff;
    border: 3px solid var(--border-color);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 6px 0 var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: transform 0.15s, box-shadow 0.15s;
    text-align: left;
}

.news-story-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 var(--border-color);
}

.news-story-card h3 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--color-blue-dark);
    line-height: 1.3;
}

.news-story-card p {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-main);
    line-height: 1.4;
}

.news-card-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: auto;
    flex-wrap: wrap;
}

.news-card-action {
    min-height: auto;
    padding: 0.45rem 0.85rem;
    font-size: 0.95rem;
}

.news-local-label {
    pointer-events: none;
    border-color: #cbd5e1;
    background: rgba(0, 0, 0, 0.05);
    color: #64748b;
}

.discussion-box-container {
    display: none;
    margin-top: 0.75rem;
    padding: 0.85rem;
    border: 3px solid var(--border-color);
    border-radius: 14px;
    background: #f8fafc;
    text-align: left;
}

.discussion-box-container h4 {
    margin: 0 0 0.5rem;
    color: var(--color-purple-dark);
    font-size: 1.15rem;
}

.discussion-prompts-content {
    color: var(--text-main);
    font-size: 1.05rem;
    line-height: 1.4;
}

.news-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.news-pagination[hidden] {
    display: none;
}

.news-pagination span {
    min-width: 8rem;
    text-align: center;
    font-weight: 800;
}

/* BOARD WHITEBOARD */
.whiteboard-split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1.5rem;
}

.drawing-slate-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.drawing-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    background: #ffffff;
    border: 3px solid var(--app-theme-color, var(--border-color));
}

.brush-color-picker {
    display: flex;
    gap: 0.5rem;
}

.color-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s;
}

.color-dot.active {
    transform: scale(1.2);
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--border-color);
}

.drawing-canvas {
    background: #ffffff;
    border: 4px solid var(--app-theme-color, var(--border-color));
    border-radius: 20px;
    width: 100%;
    height: 400px;
    cursor: crosshair;
    box-shadow: 0 6px 0 var(--app-theme-color, var(--border-color));
    touch-action: none;
}

.text-slate-container {
    display: flex;
    flex-direction: column;
}

.whiteboard-textbox {
    flex: 1;
    background: #ffffff;
    border: 4px solid var(--app-theme-color, var(--border-color));
    border-radius: 20px;
    padding: 1.5rem;
    font-size: 1.25rem;
    font-family: inherit;
    color: var(--text-main);
    resize: none;
    box-shadow: 0 6px 0 var(--app-theme-color, var(--border-color));
    outline: none;
    min-height: 450px;
    line-height: 1.5;
}

.whiteboard-textbox:focus {
    border-color: var(--color-blue);
    box-shadow: 0 6px 0 var(--color-blue-dark);
}

/* ESTIMATION */
.estimation-scale {
    position: relative;
    height: 44px;
    background: #e2e8f0;
    border-radius: 22px;
    margin: 4.5rem 1rem 1.5rem 1rem;
    border: 4px solid var(--border-color);
    box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.05);
}

.scale-range-label {
    position: absolute;
    bottom: -32px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-muted);
}

.scale-range-label.min {
    left: 5px;
}

.scale-range-label.max {
    right: 5px;
}

.estimation-marker {
    position: absolute;
    top: -40px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.estimation-pin {
    background: var(--color-purple);
    color: white;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 10px;
    font-size: 0.95rem;
    white-space: nowrap;
    border: 3px solid var(--border-color);
    box-shadow: 0 4px 0 var(--border-color);
}

.estimation-pin-arrow {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--border-color);
}

.estimation-marker.actual {
    z-index: 5;
}

.estimation-marker.actual .estimation-pin {
    background: var(--color-green);
    color: white;
    box-shadow: 0 4px 0 var(--border-color);
}

.estimation-team-pin {
    cursor: grab;
    touch-action: none;
    z-index: 6;
    transition: top 0.15s ease;
}

.estimation-team-pin .estimation-pin {
    transition: transform 0.1s ease;
}

.estimation-team-pin.dragging {
    top: -48px;
    z-index: 8;
}

.estimation-team-pin.dragging .estimation-pin {
    transform: scale(1.1);
}

.estimation-team-pin.red .estimation-pin {
    background: var(--color-red);
    box-shadow: 0 4px 0 var(--color-red-dark);
}

.estimation-team-pin.blue .estimation-pin {
    background: var(--color-blue);
    box-shadow: 0 4px 0 var(--color-blue-dark);
}

.estimation-team-pin.red .estimation-pin-arrow {
    border-top-color: var(--color-red-dark);
}

.estimation-team-pin.blue .estimation-pin-arrow {
    border-top-color: var(--color-blue-dark);
}

.estimation-team-pin:focus-visible .estimation-pin {
    outline: 3px solid var(--color-purple-dark);
    outline-offset: 2px;
}

.estimation-scale.revealed .estimation-team-pin {
    cursor: default;
    pointer-events: none;
}

.estimation-slider-group {
    background: #f8fafc;
    border: 3px solid var(--border-color);
    border-radius: 20px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.estimation-slider-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.estimation-slider-row label {
    font-weight: 700;
    width: 140px;
    font-size: 1.1rem;
}

.estimation-slider-row input[type="text"] {
    background: #ffffff;
    border: 3px solid var(--border-color);
    color: var(--text-main);
    padding: 0.5rem 0.85rem;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    width: 120px;
}

@media (max-width: 768px) {
    .whiteboard-split-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .whiteboard-textbox {
        min-height: 250px;
    }
}

@media (max-width: 1024px) {
    header h1 {
        font-size: 2.2rem;
    }

    .display-deck {
        padding: 1.5rem;
    }
}

/* CUSTOM MODAL ALERT */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: oklch(22% 0.012 250 / 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(8px);
    animation: fadeIn 0.15s ease-out;
}

.custom-modal-content {
    background: var(--panel-bg);
    border: 5px solid var(--border-color);
    border-radius: 28px;
    padding: 2.5rem;
    width: 90%;
    max-width: 440px;
    text-align: center;
    box-shadow: 0 14px 0 var(--border-color);
    animation: popScale 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-height: calc(90 * var(--tp-vh));
    overflow-y: auto;
    box-sizing: border-box;
}

.custom-modal-icon {
    font-size: 4.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-modal-icon svg {
    width: 4.5rem;
    height: 4.5rem;
    stroke-width: 2.5;
}

@keyframes lucide-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.lucide-spin {
    animation: lucide-spin 1.2s linear infinite;
}


.custom-modal-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--border-color);
    margin-bottom: 0.5rem;
}

.custom-modal-message {
    font-size: 1.25rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Hallmark · component: transient status popup · genre: playful · theme: existing TutorPulse
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass · pre-emit critique: P5 H5 E5 S5 R5 V4
 */
#customAlertModal {
    background: color-mix(in oklch, var(--border-color) 48%, transparent);
}

#customAlertModal .custom-alert-content {
    position: relative;
    max-width: 400px;
    padding: 2rem;
    overflow: hidden;
    border-width: 4px;
    border-radius: 24px;
    box-shadow: 0 10px 0 var(--border-color);
}

#customAlertModal .custom-alert-content::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 8px;
    background: var(--color-purple);
}

#customAlertModal[data-variant="loading"] .custom-alert-content::before {
    background: var(--color-blue);
}

#customAlertModal[data-variant="success"] .custom-alert-content::before {
    background: var(--color-green-dark);
}

#customAlertModal[data-variant="error"] .custom-alert-content::before {
    background: var(--color-red);
}

.custom-alert-kicker {
    margin-bottom: 0.8rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#customAlertModal .custom-modal-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 1rem;
    border: 3px solid currentColor;
    border-radius: 20px;
    color: var(--color-purple-dark);
    background: color-mix(in oklch, currentColor 9%, var(--panel-bg));
}

#customAlertModal[data-variant="loading"] .custom-modal-icon {
    color: var(--color-blue-dark);
}

/* Loading alerts are intentionally icon-only. The title and message remain in
   the DOM so the dialog still announces useful progress to screen readers. */
#customAlertModal[data-variant="loading"] {
    background: color-mix(in oklch, var(--border-color) 22%, transparent);
}

#customAlertModal[data-variant="loading"] .custom-alert-content {
    width: 84px;
    min-height: 84px;
    padding: 0;
    display: grid;
    place-items: center;
    border-width: 3px;
    border-radius: 26px;
    background: var(--color-blue);
    box-shadow: 5px 5px 0 var(--color-blue-dark);
}

#customAlertModal[data-variant="loading"] .custom-alert-content::before,
#customAlertModal[data-variant="loading"] .custom-alert-kicker,
#customAlertModal[data-variant="loading"] .custom-alert-progress {
    display: none;
}

#customAlertModal[data-variant="loading"] .custom-modal-icon {
    width: 42px;
    height: 42px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--border-color);
}

#customAlertModal[data-variant="loading"] .custom-modal-icon svg {
    width: 42px;
    height: 42px;
    stroke-width: 2.75;
}

#customAlertModal[data-variant="loading"] .custom-modal-title,
#customAlertModal[data-variant="loading"] .custom-modal-message {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#customAlertModal[data-variant="success"] .custom-modal-icon {
    color: var(--color-green-dark);
}

#customAlertModal[data-variant="error"] .custom-modal-icon {
    color: var(--color-red-dark);
}

#customAlertModal .custom-modal-icon svg {
    width: 34px;
    height: 34px;
    color: inherit;
    stroke: currentColor;
}

#customAlertModal .custom-modal-title {
    margin-bottom: 0.65rem;
    font-size: clamp(1.55rem, 4vw, 1.9rem);
    line-height: 1.05;
}

#customAlertModal .custom-modal-message {
    max-width: 32ch;
    margin-inline: auto;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.5;
}

.custom-alert-progress {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    min-height: 48px;
    margin-top: 1rem;
}

#customAlertModal[data-variant="loading"] .custom-alert-progress {
    display: none;
}

.custom-alert-progress span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-blue-dark);
    animation: custom-alert-pulse 900ms var(--ease-out) infinite alternate;
}

.custom-alert-progress span:nth-child(2) {
    animation-delay: 150ms;
}

.custom-alert-progress span:nth-child(3) {
    animation-delay: 300ms;
}

@keyframes custom-alert-pulse {
    from {
        opacity: 0.35;
        transform: translateY(2px);
    }

    to {
        opacity: 1;
        transform: translateY(-2px);
    }
}

.custom-alert-action {
    width: 100%;
    min-height: 48px;
    margin-top: 1.35rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.custom-alert-action[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {

    .custom-alert-progress span,
    #customAlertModal .lucide-spin {
        animation-duration: 1ms;
        animation-iteration-count: 1;
    }
}

/* Hallmark · component: seating workbench · macrostructure: Workbench · tone: playful-utilitarian · anchor hue: sky blue
 * states: default · hover · focus · active · disabled · loading · error · success · contrast: pass (40–41)
 * pre-emit critique: P5 H5 E4 S5 R5 V5
 */
.seating-plan-launcher {
    background: var(--color-seating-desk);
    color: var(--color-seating-front);
}

.seating-settings-heading,
.seating-builder-toolbar,
.seating-dialog-header,
.seating-dialog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-workflow-md);
    flex-wrap: wrap;
}

.seating-settings-heading h3,
.seating-dialog-header h2 {
    margin: var(--space-workflow-xs) 0 0;
}

.seating-builder-toolbar {
    justify-content: flex-start;
    padding-block: var(--space-workflow-md);
    border-block: 3px solid var(--border-color);
}

.seating-builder-toolbar label {
    display: flex;
    align-items: center;
    gap: var(--space-workflow-xs);
    font-weight: 800;
}

.seating-builder-toolbar select {
    min-height: 44px;
    padding-inline: var(--space-workflow-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-workflow-sm);
    background: var(--panel-bg);
    font: inherit;
    outline: 2px solid transparent;
}

.seating-builder-toolbar select:focus-visible {
    outline: 2px solid var(--color-game-focus);
    outline-offset: 1px;
}

.seating-builder-toolbar .is-active {
    background: var(--color-seating-front);
    color: var(--panel-bg);
}

.seating-builder-toolbar .btn-ui {
    white-space: nowrap;
}

.seating-builder-workbench {
    display: grid;
    gap: var(--space-workflow-lg);
    margin-top: var(--space-workflow-lg);
}

body.seating-editor-open {
    overflow: hidden;
}

.seating-settings-panel.is-fullscreen {
    position: fixed;
    z-index: 10000;
    inset: 0;
    width: auto;
    max-width: none;
    height: calc(100 * var(--tp-dvh));
    margin: 0 !important;
    padding: var(--space-workflow-lg);
    border: 0;
    border-radius: 0;
    overflow: auto;
    box-sizing: border-box;
    background: var(--panel-bg);
}

.seating-settings-panel.is-fullscreen .seating-builder-workbench {
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    align-items: start;
}

.seating-settings-panel.is-fullscreen .seating-grid {
    min-width: 0;
    height: calc(100 * var(--tp-dvh) - 18rem);
    min-height: 32rem;
}

.seating-settings-panel.is-fullscreen #seatingEditorPupils {
    max-height: calc(100 * var(--tp-dvh) - 20rem);
}

.seating-fullscreen-toggle {
    margin-inline-start: auto;
}

.seating-pupil-bank {
    min-width: 0;
}

.seating-pupil-bank h4 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-workflow-lg);
}

.seating-pupil-bank p {
    color: var(--text-muted);
}

#seatingEditorPupils {
    display: grid;
    gap: var(--space-workflow-xs);
    max-height: 34rem;
    overflow-y: auto;
    padding-inline-end: var(--space-workflow-xs);
}

#seatingDisplayPupils {
    display: flex;
    align-items: center;
    gap: var(--space-workflow-xs);
    flex-wrap: wrap;
}

.seating-assignment-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(7rem, .65fr);
    align-items: center;
    gap: var(--space-workflow-sm);
    min-height: 48px;
    padding: var(--space-workflow-xs);
    border-bottom: 1px solid var(--color-game-rule);
    font-weight: 800;
}

.seating-assignment-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seating-assignment-row select {
    width: 100%;
    min-height: 44px;
    padding-inline: var(--space-workflow-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-workflow-sm);
    background: var(--panel-bg);
    color: var(--text-main);
    font: 700 var(--text-workflow-sm)/1 var(--font-body);
    outline: 2px solid transparent;
}

.seating-assignment-row select:hover {
    background: var(--color-seating-desk);
}

.seating-assignment-row select:focus-visible {
    outline: 2px solid var(--color-game-focus);
    outline-offset: 1px;
}

.seating-assignment-row select:active {
    background: var(--color-seating-locked);
}

.seating-assignment-row select:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.seating-settings-panel[data-state="loading"] .seating-assignment-row select {
    cursor: progress;
}

.seating-settings-panel[data-state="error"] #seatingSaveStatus,
.seating-plan-dialog[data-state="error"] #seatingDialogStatus {
    padding: var(--space-workflow-xs);
    border-radius: var(--radius-workflow-sm);
    background: var(--color-game-error-soft);
    color: var(--text-main);
}

.seating-settings-panel[data-state="success"] #seatingSaveStatus,
.seating-plan-dialog[data-state="success"] #seatingDialogStatus {
    padding: var(--space-workflow-xs);
    border-radius: var(--radius-workflow-sm);
    background: var(--color-game-success-soft);
    color: var(--text-main);
}

.seating-pupil {
    min-height: 44px;
    padding: var(--space-workflow-xs) var(--space-workflow-sm);
    border: 2px solid var(--border-color);
    border-radius: 999px;
    background: var(--panel-bg);
    color: var(--text-main);
    font: 800 var(--text-workflow-sm)/1 var(--font-body);
    cursor: grab;
}

.seating-pupil:hover,
.seating-pupil.is-selected {
    background: var(--color-seating-desk-hover);
}

.seating-pupil:focus-visible,
.seating-seat-main:focus-visible,
.seating-lock:focus-visible {
    outline: 3px solid var(--color-game-focus);
    outline-offset: 2px;
}

.seating-pupil:active,
.seating-seat-main:active {
    background: var(--color-seating-locked);
}

.seating-pupil:disabled,
.seating-seat-main:disabled,
.seating-lock:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.seating-room,
.seating-display-room {
    min-width: 0;
    padding: var(--space-workflow-md);
    border: 3px solid var(--border-color);
    border-radius: var(--radius-workflow-lg);
    background: var(--color-seating-empty);
    overflow-x: auto;
}

.seating-room-front {
    width: min(75%, 32rem);
    margin: 0 auto var(--space-workflow-lg);
    padding: var(--space-workflow-xs) var(--space-workflow-md);
    border-radius: var(--radius-workflow-sm);
    background: var(--color-seating-front);
    color: var(--panel-bg);
    text-align: center;
    font-weight: 800;
    line-height: 1;
}

.seating-grid {
    position: relative;
    width: 100%;
    min-width: 34rem;
    height: clamp(28rem, calc(58 * var(--tp-vh)), 38rem);
}

.seating-seat {
    position: absolute;
    width: clamp(6.5rem, calc(12 * var(--tp-vw)), 9rem);
    min-height: 5.5rem;
    transform: translate(-50%, -50%) scale(var(--seating-zoom, 1));
    border: 2px solid var(--border-color);
    border-radius: var(--radius-workflow-sm);
    background: var(--color-seating-desk);
    box-shadow: 0 3px 0 var(--border-color);
}

.seating-seat:hover {
    background: var(--color-seating-desk-hover);
}

.seating-seat.is-locked {
    background: var(--color-seating-locked);
}

.seating-seat.is-empty {
    border-style: dashed;
    background: transparent;
    box-shadow: none;
}

.seating-seat-main {
    width: 100%;
    min-height: 5.5rem;
    padding: var(--space-workflow-sm);
    border: 0;
    border-radius: var(--radius-workflow-sm);
    background: transparent;
    color: var(--text-main);
    font: 800 var(--text-workflow-sm)/1.2 var(--font-body);
    cursor: pointer;
}

.seating-grid.is-layout-mode .seating-seat-main {
    cursor: grab;
    touch-action: none;
}

.seating-grid.is-layout-mode .seating-seat-main:active {
    cursor: grabbing;
}

.seating-seat-main span,
.seating-seat-main small {
    display: block;
}

.seating-seat-main small {
    margin-top: var(--space-workflow-xs);
    color: var(--text-muted);
    font-size: .7rem;
}

.seating-lock {
    position: absolute;
    inset-block-start: var(--space-workflow-xs);
    inset-inline-end: var(--space-workflow-xs);
    width: 32px;
    height: 32px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--panel-bg);
    color: var(--text-main);
    cursor: pointer;
}

.seating-lock svg {
    width: 16px;
    height: 16px;
}

.seating-drag-handle {
    position: absolute;
    z-index: 2;
    inset-block-start: calc(var(--space-workflow-xs) * -1);
    inset-inline-start: 50%;
    width: 36px;
    height: 28px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 2px solid var(--border-color);
    border-radius: 999px;
    background: var(--panel-bg);
    color: var(--text-main);
    cursor: grab;
    touch-action: none;
}

.seating-drag-handle:hover {
    background: var(--color-seating-desk-hover);
}

.seating-drag-handle:active {
    cursor: grabbing;
    background: var(--color-seating-locked);
}

.seating-drag-handle:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.seating-toggle {
    position: absolute;
    z-index: 2;
    inset-block-end: calc(var(--space-workflow-xs) * -1);
    inset-inline-start: 50%;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 6px;
    transform: translate(-50%, 50%);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--panel-bg);
    color: var(--text-main);
    cursor: pointer;
}

.seating-toggle:hover {
    background: var(--color-seating-desk-hover);
}

.seating-toggle:focus-visible,
.seating-drag-handle:focus-visible {
    outline: 3px solid var(--color-game-focus);
    outline-offset: 2px;
}

.seating-toggle:active {
    background: var(--color-seating-locked);
}

.seating-toggle:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.seating-plan-dialog {
    width: min(calc(96 * var(--tp-vw)), 88rem);
    height: min(calc(94 * var(--tp-vh)), 58rem);
    padding: 0;
    border: 3px solid var(--border-color);
    border-radius: var(--radius-workflow-lg);
    background: var(--panel-bg);
    color: var(--text-main);
    overflow: hidden;
}

.seating-plan-dialog::backdrop {
    background: var(--color-workflow-overlay);
}

.seating-dialog-shell {
    height: 100%;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: var(--space-workflow-md);
    padding: var(--space-workflow-lg);
    box-sizing: border-box;
}

.seating-dialog-header {
    flex-wrap: nowrap;
}

.seating-dialog-header p {
    margin: var(--space-workflow-xs) 0 0;
    color: var(--text-muted);
}

.seating-dialog-toolbar {
    justify-content: flex-start;
}

#seatingDialogStatus {
    margin-inline-start: auto;
    color: var(--text-muted);
    font-weight: 800;
}

.seating-display-room {
    overflow: auto;
}

.seating-unassigned {
    display: flex;
    align-items: center;
    gap: var(--space-workflow-sm);
    flex-wrap: wrap;
    padding-top: var(--space-workflow-sm);
    border-top: 2px solid var(--border-color);
}

.seating-all-assigned {
    margin: 0;
    color: var(--text-muted);
    font-weight: 700;
}

@media (min-width:60rem) {
    .seating-builder-workbench {
        grid-template-columns: minmax(12rem, .28fr) minmax(0, 1fr);
        align-items: start;
    }
}

@media (max-width:48rem) {
    .seating-settings-panel.is-fullscreen .seating-builder-workbench {
        grid-template-columns: minmax(0, 1fr);
    }

    .seating-settings-panel.is-fullscreen .seating-grid {
        min-width: 34rem;
    }
}

@media (max-width:40rem) {
    .seating-dialog-shell {
        padding: var(--space-workflow-md);
    }

    .seating-dialog-toolbar .btn-ui {
        flex: 1 1 9rem;
    }

    #seatingDialogStatus {
        width: 100%;
        margin: 0;
    }
}

@media (prefers-reduced-motion:reduce) {

    .seating-pupil,
    .seating-seat,
    .seating-lock {
        transition: none;
    }
}

.seating-settings-panel:not(.is-fullscreen) .seating-builder-workbench {
    grid-template-columns: minmax(0, 1fr);
}

.seating-settings-panel:not(.is-fullscreen) .seating-room {
    order: 1;
}

.seating-settings-panel:not(.is-fullscreen) .seating-pupil-bank {
    order: 2;
    padding-top: var(--space-workflow-md);
    border-top: 2px solid var(--border-color);
}

.seating-settings-panel:not(.is-fullscreen) #seatingEditorPupils {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
    column-gap: var(--space-workflow-lg);
}

.seating-settings-panel:not(.is-fullscreen) .seating-grid {
    min-width: 0;
    height: 34rem;
}

.seating-settings-panel.is-fullscreen>.subtitle {
    display: none;
}

.seating-settings-panel.is-fullscreen #seatingEditorPupils {
    grid-template-columns: minmax(0, 1fr);
}

/* Hallmark · component: pupil seating poster · genre: playful · theme: Hum
 * states: display-only · contrast: pass (40–41)
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 */
.seating-plan-dialog {
    width: min(calc(98 * var(--tp-vw)), 96rem);
    height: min(calc(96 * var(--tp-vh)), 64rem);
    background: var(--color-seating-poster-paper);
}

.seating-plan-dialog .seating-dialog-shell {
    position: relative;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-workflow-sm);
    padding: var(--space-workflow-lg);
}

.seating-plan-dialog .seating-dialog-header {
    justify-content: center;
    min-height: 4rem;
    padding-inline: 4rem;
}

.seating-plan-dialog .seating-dialog-header h2 {
    min-width: 0;
    margin: 0;
    color: var(--color-seating-poster-ink);
    font: 700 clamp(2rem, 4vw, 3.75rem)/1 var(--font-display);
    text-align: center;
    overflow-wrap: anywhere;
}

.seating-plan-dialog .seating-dialog-header .custom-content-close {
    position: absolute;
    z-index: 3;
    inset-block-start: var(--space-workflow-lg);
    inset-inline-end: var(--space-workflow-lg);
}

.seating-plan-dialog .seating-display-room {
    padding: var(--space-workflow-lg);
    border: 0;
    border-radius: var(--radius-workflow-lg);
    background: var(--color-seating-poster-paper);
    overflow: auto;
}

.seating-plan-dialog .seating-room-front {
    width: min(70%, 38rem);
    margin-bottom: var(--space-workflow-xl);
    padding: var(--space-workflow-sm) var(--space-workflow-lg);
    border: 2px solid var(--color-seating-poster-ink);
    border-radius: 999px;
    background: var(--color-seating-poster-ink);
    color: var(--color-seating-poster-paper);
    font: 700 clamp(1rem, 1.8vw, 1.35rem)/1 var(--font-display);
    letter-spacing: .02em;
}

.seating-plan-dialog .seating-grid {
    min-width: 48rem;
    height: clamp(34rem, calc(72 * var(--tp-vh)), 48rem);
}

.seating-plan-dialog .seating-poster-seat {
    width: clamp(8rem, calc(12 * var(--tp-vw)), 11rem);
    min-height: 5.75rem;
    border: 2px solid var(--color-seating-poster-ink);
    border-radius: var(--radius-workflow-md);
    box-shadow: 0 5px 0 var(--color-seating-poster-ink);
    pointer-events: none;
}

.seating-plan-dialog .seating-poster-seat:hover {
    background: inherit;
}

.seating-plan-dialog .seating-poster-seat .seating-seat-main {
    display: grid;
    place-items: center;
    min-height: 5.75rem;
    padding: var(--space-workflow-sm);
    color: var(--color-seating-poster-ink);
    font: 700 clamp(1.05rem, 1.8vw, 1.5rem)/1.05 var(--font-display);
    cursor: default;
}

.seating-plan-dialog .seating-poster-seat .seating-seat-main span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seating-poster-tone-1 {
    background: var(--color-seating-poster-blue);
}

.seating-poster-tone-2 {
    background: var(--color-seating-poster-yellow);
}

.seating-poster-tone-3 {
    background: var(--color-seating-poster-pink);
}

.seating-poster-tone-4 {
    background: var(--color-seating-poster-green);
}

.seating-poster-tone-5 {
    background: var(--color-seating-poster-orange);
}

.seating-poster-tone-6 {
    background: var(--color-seating-poster-lilac);
}

@media (max-width:40rem) {
    .seating-plan-dialog .seating-dialog-shell {
        padding: var(--space-workflow-md);
    }

    .seating-plan-dialog .seating-dialog-header {
        padding-inline: 3rem;
    }

    .seating-plan-dialog .seating-dialog-header .custom-content-close {
        inset-block-start: var(--space-workflow-md);
        inset-inline-end: var(--space-workflow-md);
    }

    .seating-plan-dialog .seating-display-room {
        padding: var(--space-workflow-md);
    }
}

/* Seating poster spacing correction: preserve a clear gutter between freely placed desks. */
.seating-plan-dialog .seating-poster-seat {
    width: clamp(6.75rem, calc(8 * var(--tp-vw)), 8.5rem);
    min-height: 5.25rem;
    box-sizing: border-box;
}

.seating-plan-dialog .seating-poster-seat .seating-seat-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.25rem;
    padding: var(--space-workflow-xs);
    font-size: clamp(1rem, 1.45vw, 1.35rem);
    text-align: center;
}

.seating-plan-dialog .seating-poster-seat .seating-seat-main span {
    width: 100%;
    text-align: center;
}

@media (max-width:48rem) {
    .seating-settings-panel:not(.is-fullscreen) #seatingEditorPupils {
        grid-template-columns: minmax(0, 1fr);
    }

    .seating-settings-panel:not(.is-fullscreen) .seating-grid {
        min-width: 34rem;
    }
}

/* PET COMPANION PROMO MODAL CARDS */
.pet-promo-card {
    background: var(--color-paper, #fdf6e2);
    border: 4px solid var(--border-color, #000000);
    border-radius: 20px;
    padding: 1.25rem 0.5rem;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    box-shadow: 4px 4px 0 var(--border-color, #000000);
    position: relative;
    user-select: none;
}

.pet-promo-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0 var(--border-color, #000000);
}

.pet-promo-card.selected {
    border-color: #8b5cf6 !important;
    box-shadow: 4px 4px 0 #8b5cf6 !important;
    transform: translate(2px, 2px);
}

.pet-promo-card-title {
    font-family: 'Fredoka', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--border-color, #000000);
    margin: 0.5rem 0 0 0;
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popScale {
    from {
        transform: scale(0.88);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* STUDENT CLASSLISTS - OPTIMIZED FOR SMARTBOARDS & 20 CHILDREN */
.student-name-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.25rem;
    padding: 1.5rem;
    border: 4px solid var(--border-color);
    border-radius: 24px;
    background: var(--panel-bg);
}

.student-tag {
    background: #ffffff;
    border: 3.5px solid var(--border-color);
    border-radius: 18px;
    padding: 1rem 1.2rem;
    font-size: 1.35rem;
    font-weight: 800;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    user-select: none;
    box-shadow: 0 6px 0 var(--border-color);
    color: var(--text-main);
}

.student-tag:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 0 var(--border-color);
}

.student-tag:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--border-color);
}

.student-tag.marked {
    background: var(--color-green);
    color: white;
    border-color: var(--color-green-dark);
    box-shadow: 0 6px 0 var(--color-green-dark);
}

.student-tag.marked:active {
    box-shadow: 0 2px 0 var(--color-green-dark);
}

/* --- 3D Neobrutalist Level & Category Pills --- */
.level-pill-container {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.level-pill {
    background: #ffffff;
    border: 3px solid var(--border-color);
    border-radius: 50px;
    padding: 0.6rem 1.4rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-main);
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 0 var(--border-color);
    position: relative;
    top: 0;
}

.level-pill:hover {
    background: #f8fafc;
    top: -2px;
    box-shadow: 0 6px 0 var(--border-color);
}

.level-pill:active {
    top: 2px;
    box-shadow: 0 2px 0 var(--border-color);
}

/* Active Highlight State */
.level-pill.active {
    background: var(--color-purple);
    border-color: var(--color-purple-dark);
    color: #ffffff;
    box-shadow: 0 4px 0 var(--color-purple-dark);
}

.level-pill.active:hover {
    background: var(--color-purple-dark);
    top: -2px;
    box-shadow: 0 6px 0 var(--color-purple-dark);
}

.level-pill.active:active {
    top: 2px;
    box-shadow: 0 2px 0 var(--color-purple-dark);
}

/* --- New Portal Styles --- */
.class-selector-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--border-color);
    flex: 1;
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* Hallmark · component: class-pet status · genre: playful · theme: Hum
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass
 */
.class-pet-status {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 230px;
    min-height: 38px;
    padding: 0.25rem 0.7rem 0.25rem 0.3rem;
    border: 3px solid var(--border-color);
    border-radius: 12px;
    background: color-mix(in oklch, var(--color-purple) 10%, var(--panel-bg));
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 3px 0 var(--border-color);
}

.class-pet-status[hidden] {
    display: none;
}

.class-pet-status[role="button"] {
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.class-pet-status[role="button"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 var(--border-color);
}

.class-pet-status[role="button"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 0 var(--border-color);
}

.class-pet-status[role="button"]:focus-visible {
    outline: 3px solid var(--color-purple);
    outline-offset: 3px;
}

.class-pet-status__icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    margin-inline-end: 0.5rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in oklch, var(--color-purple) 26%, var(--panel-bg));
}

.class-pet-status__icon svg {
    width: 0.9rem;
    height: 0.9rem;
    stroke-width: 2.5;
}

.class-pet-status__label {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.class-pet-status__name {
    min-width: 0;
    margin-inline-start: 0.4rem;
    overflow: hidden;
    font-family: var(--font-display);
    font-weight: 700;
    text-overflow: ellipsis;
}

/* Hallmark · component: birthday countdown · genre: playful · theme: existing TutorPulse
 * states: default · empty · today
 * contrast: pass
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4
 */
.class-birthday-countdown {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    max-width: 250px;
    min-height: 38px;
    padding: 0.55rem;
    border: 3px solid var(--color-pink-dark);
    border-radius: 12px;
    background: color-mix(in oklch, var(--color-pink) 24%, var(--panel-bg));
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.2;
    box-shadow: 0 3px 0 var(--color-pink-dark);
}

.class-birthday-countdown__heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-pink-dark);
}

.class-birthday-countdown__icon {
    display: grid;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-inline-end: 0.5rem;
    place-items: center;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in oklch, var(--color-pink) 52%, var(--panel-bg));
}

.class-birthday-countdown__icon svg {
    width: 0.9rem;
    height: 0.9rem;
    stroke-width: 2.5;
}

.class-birthday-countdown__label {
    display: block;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.class-birthday-countdown__list {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.class-birthday-countdown__list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.25rem 0.35rem;
    border-radius: 7px;
}

.class-birthday-countdown__list li+li {
    border-top: 1px solid color-mix(in oklch, var(--border-color) 20%, transparent);
}

.class-birthday-countdown__list strong {
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.class-birthday-countdown__list span {
    padding: 0.18rem 0.32rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--color-pink) 34%, var(--panel-bg));
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 900;
    white-space: nowrap;
}

.class-birthday-countdown__list .is-today {
    background: color-mix(in oklch, var(--color-pink) 22%, var(--panel-bg));
}

.class-birthday-countdown__list .is-today span {
    color: var(--text-main);
}

.class-birthday-countdown__empty {
    display: block !important;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.class-birthday-countdown[data-state="empty"] {
    background: color-mix(in oklch, var(--border-color) 4%, var(--panel-bg));
    color: var(--text-muted);
}

.class-birthday-countdown[data-state="today"] {
    border-color: var(--color-pink-dark);
    background: color-mix(in oklch, var(--color-pink) 24%, var(--panel-bg));
    box-shadow: 0 3px 0 var(--color-pink-dark);
}

/* Hallmark · component: birthday countdown trigger · genre: playful
 * The rail widget doubles as the button that opens the full birthdays modal.
 */
.class-birthday-countdown[role="button"] {
    width: 100%;
    text-align: start;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.class-birthday-countdown[role="button"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 var(--color-pink-dark);
}

.class-birthday-countdown[role="button"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 0 var(--color-pink-dark);
}

.class-birthday-countdown[role="button"]:focus-visible {
    outline: 3px solid var(--color-pink-dark);
    outline-offset: 3px;
}

/* Hallmark · component: form birthdays modal · genre: playful · theme: existing TutorPulse
 * layout: four quarter columns (Jan-Mar | Apr-Jun | Jul-Sep | Oct-Dec), cards
 *         sized to content, empty months collapse to a slim bar so it all fits
 * states: default · empty · current-month · today
 * contrast: pass
 */
.birthdays-modal__content {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: min(1000px, calc(95 * var(--tp-vw)));
    max-width: 1000px;
    max-height: calc(90 * var(--tp-vh));
    padding: 1.5rem 1.65rem 1.65rem;
    overflow-y: auto;
    text-align: start;
}

.birthdays-modal__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.birthdays-modal__heading .apps-eyebrow {
    margin: 0;
}

.birthdays-modal__content h2 {
    margin: 0.1rem 0 0;
    font-size: 1.55rem;
    line-height: 1.1;
}

.birthdays-modal__subtitle {
    margin: 0.3rem 0 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.birthdays-modal__summary {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.class-pet-modal__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: min(440px, calc(95 * var(--tp-vw)));
    max-width: 440px;
    max-height: calc(90 * var(--tp-vh));
    padding: 1.5rem 1.65rem 1.65rem;
    overflow-y: auto;
    text-align: start;
}

.class-pet-modal__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.class-pet-modal__heading .apps-eyebrow {
    margin: 0;
}

.class-pet-modal__content h2 {
    margin: 0.1rem 0 0;
    font-size: 1.55rem;
    line-height: 1.1;
}

.class-pet-modal__subtitle {
    margin: 0.3rem 0 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.class-pet-modal__body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.class-pet-modal__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    padding: 0.5rem;
    border: 3px dashed var(--border-color);
    border-radius: 16px;
    background: color-mix(in oklch, var(--color-purple) 8%, var(--panel-bg));
}

.class-pet-modal__preview svg {
    width: 160px;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.12));
}

.class-pet-modal__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.class-pet-modal__row-label {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--text-main);
}

.class-pet-nap-btn {
    width: auto;
    height: auto;
    min-width: 110px;
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    flex: 0 0 auto;
}

.class-pet-nap-btn:active {
    box-shadow: 0 1px 0 var(--border-color);
    transform: translateY(2px);
}

.class-pet-nap-btn[aria-pressed="true"] {
    background: color-mix(in oklch, var(--color-purple) 22%, var(--panel-bg));
}

.birthdays-quarter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    gap: 0.7rem;
}

.birthdays-quarter {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

/* Per-month brand hues from the TutorPulse palette (each used twice, never on
 * adjacent months). --m = tint hue, --md = ink / bar / border. */
.birthdays-month[data-month="0"]  { --m: var(--color-blue);   --md: var(--color-blue-dark); }
.birthdays-month[data-month="1"]  { --m: var(--color-purple); --md: var(--color-purple-dark); }
.birthdays-month[data-month="2"]  { --m: var(--color-green);  --md: var(--color-green-dark); }
.birthdays-month[data-month="3"]  { --m: var(--color-pink);   --md: var(--color-pink-dark); }
.birthdays-month[data-month="4"]  { --m: var(--color-amber);  --md: var(--color-amber-dark); }
.birthdays-month[data-month="5"]  { --m: var(--color-red);    --md: var(--color-red-dark); }
.birthdays-month[data-month="6"]  { --m: var(--color-pink);   --md: var(--color-pink-dark); }
.birthdays-month[data-month="7"]  { --m: var(--color-amber);  --md: var(--color-amber-dark); }
.birthdays-month[data-month="8"]  { --m: var(--color-purple); --md: var(--color-purple-dark); }
.birthdays-month[data-month="9"]  { --m: var(--color-red);    --md: var(--color-red-dark); }
.birthdays-month[data-month="10"] { --m: var(--color-blue);   --md: var(--color-blue-dark); }
.birthdays-month[data-month="11"] { --m: var(--color-green);  --md: var(--color-green-dark); }

.birthdays-month {
    --m: var(--color-pink);
    --md: var(--color-pink-dark);
    overflow: hidden;
    border: 2px solid var(--md);
    border-radius: 11px;
    background: var(--panel-bg);
}

.birthdays-month__name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin: 0;
    padding: 0.32rem 0.55rem;
    border-bottom: 2px solid var(--md);
    background: color-mix(in oklch, var(--m) 55%, var(--panel-bg));
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 0.01em;
}

.birthdays-month__count {
    display: grid;
    place-items: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.28rem;
    border: 1.5px solid var(--md);
    border-radius: 999px;
    background: var(--panel-bg);
    color: var(--text-main);
    font-size: 0.7rem;
    font-weight: 900;
}

.birthdays-month__none {
    color: color-mix(in oklch, var(--text-main) 65%, transparent);
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

.birthdays-month[data-empty="true"] {
    border-color: color-mix(in oklch, var(--md) 42%, var(--panel-bg));
}

.birthdays-month[data-empty="true"] .birthdays-month__name {
    border-bottom-color: transparent;
    background: color-mix(in oklch, var(--m) 16%, var(--panel-bg));
    color: var(--text-muted);
}

.birthdays-month__list {
    display: grid;
    gap: 0.05rem;
    margin: 0;
    padding: 0.28rem 0.4rem;
    list-style: none;
    background: color-mix(in oklch, var(--m) 12%, var(--panel-bg));
}

.birthdays-month[data-current="true"] {
    outline: 2px solid var(--md);
    outline-offset: 2px;
}

.birthdays-month[data-has-today="true"] .birthdays-month__name {
    background: color-mix(in oklch, var(--m) 72%, var(--panel-bg));
}

.birthdays-row {
    display: grid;
    grid-template-columns: 2.4em minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem;
    padding: 0.18rem 0.2rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

.birthdays-row + .birthdays-row {
    border-top: 1px solid color-mix(in oklch, var(--md) 18%, transparent);
}

.birthdays-row__day {
    display: grid;
    place-items: center;
    padding: 0.05rem 0;
    border-radius: 5px;
    background: color-mix(in oklch, var(--m) 34%, var(--panel-bg));
    color: var(--text-main);
    font-size: 0.68rem;
    font-weight: 900;
    white-space: nowrap;
}

.birthdays-row__name {
    min-width: 0;
    overflow: hidden;
    color: var(--text-main);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.birthdays-row.is-today {
    background: color-mix(in oklch, var(--m) 42%, var(--panel-bg));
}

.birthdays-row.is-today .birthdays-row__day {
    background: var(--panel-bg);
}

.birthdays-row__badge {
    padding: 0.1rem 0.4rem;
    border: 1.5px solid var(--md);
    border-radius: 999px;
    background: var(--panel-bg);
    color: var(--text-main);
    font-size: 0.64rem;
    font-weight: 900;
    white-space: nowrap;
}

.birthdays-modal__empty {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    padding: 2rem 1rem;
    text-align: center;
}

.birthdays-modal__empty p {
    margin: 0;
    font-weight: 800;
    color: var(--text-main);
}

.birthdays-modal__empty-hint {
    color: var(--text-muted) !important;
    font-size: 0.88rem;
    font-weight: 700 !important;
}

.birthdays-modal__empty-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 3px solid var(--color-pink-dark);
    border-radius: 12px;
    background: color-mix(in oklch, var(--color-pink) 24%, var(--panel-bg));
}

@media (max-width: 780px) {
    .birthdays-quarter-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 460px) {
    .birthdays-quarter-grid {
        grid-template-columns: 1fr;
    }
}

.class-selector-container select {
    background: #ffffff;
    border: 3px solid var(--border-color);
    border-radius: 12px;
    padding: 0.35rem 0.8rem;
    font-family: inherit;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text-main);
    cursor: pointer;
    box-shadow: 0 4px 0 var(--border-color);
    outline: none;
    transition: transform 0.1s, box-shadow 0.1s, background-color 0.1s;
}

.class-selector-container select:hover {
    background: #f8fafc;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--border-color);
}

.class-selector-container select:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--border-color);
}

.utility-tray {
    position: fixed;
    z-index: 880;
    top: 8.25rem;
    right: auto;
    left: 0;
    width: 48px;
    pointer-events: none;
}

.utility-edge-dock {
    display: grid;
    gap: 0.35rem;
    padding: 0.4rem 0.35rem;
    border: 3px solid var(--border-color);
    border-left: 0;
    border-radius: 0 14px 14px 0;
    background: var(--panel-bg);
    box-shadow: 0 5px 0 var(--border-color);
    pointer-events: auto;
}

.utility-edge-btn {
    width: 38px;
    min-width: 0;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    border: 2px solid transparent;
    border-radius: 9px;
    box-shadow: none;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.utility-edge-btn svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.utility-edge-btn:hover {
    transform: translateX(2px);
}

.utility-edge-btn:active {
    transform: translateX(0);
}

.utility-edge-btn:focus-visible {
    outline: 4px solid var(--color-blue);
    outline-offset: 2px;
}

.utility-sound-toggle {
    background: color-mix(in oklch, var(--color-purple) 12%, var(--panel-bg));
    color: var(--text-main);
}

.utility-sound-toggle:hover {
    background: color-mix(in oklch, var(--color-purple) 20%, var(--panel-bg));
}

.utility-sound-toggle:focus-visible {
    outline: 4px solid var(--color-purple);
    outline-offset: 3px;
}

.utility-sound-toggle[aria-expanded="true"] {
    background: color-mix(in oklch, var(--color-purple) 25%, var(--panel-bg));
}

.utility-picker-toggle {
    background: color-mix(in oklch, var(--color-green) 13%, var(--panel-bg));
    color: var(--text-main);
}

.utility-picker-toggle:hover,
.utility-picker-toggle[aria-expanded="true"] {
    background: color-mix(in oklch, var(--color-green) 25%, var(--panel-bg));
}

.utility-noise-toggle {
    background: color-mix(in oklch, var(--color-amber) 14%, var(--panel-bg));
    color: var(--text-main);
}

.utility-noise-toggle:hover,
.utility-noise-toggle[aria-expanded="true"] {
    background: color-mix(in oklch, var(--color-amber) 28%, var(--panel-bg));
}

.utility-tray-toggle {
    background: color-mix(in oklch, var(--color-blue) 10%, var(--panel-bg));
    color: var(--text-main);
}

.utility-tray-toggle svg {
    width: 0.95rem;
    height: 0.95rem;
}

.utility-tray-toggle:hover {
    background: color-mix(in oklch, var(--color-blue) 17%, var(--panel-bg));
}

.utility-tray-toggle:focus-visible {
    outline: 4px solid var(--color-blue);
    outline-offset: 3px;
}

.utility-tray-toggle[aria-expanded="true"] {
    background: color-mix(in oklch, var(--color-green) 16%, var(--panel-bg));
}

.utility-tray-panel {
    position: absolute;
    top: 0;
    right: auto;
    left: calc(100% + 0.65rem);
    width: min(350px, calc(100 * var(--tp-vw) - 4.5rem));
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.45rem) scale(0.985);
    transform-origin: top left;
    background: var(--panel-bg);
    border: 0 solid var(--border-color);
    border-radius: 16px;
    box-shadow: none;
    pointer-events: auto;
    transition:
        max-height var(--dur-short) var(--ease-out),
        opacity var(--dur-micro) linear,
        transform var(--dur-short) var(--ease-out),
        visibility 0s linear var(--dur-short);
}

.utility-tray-panel.is-expanded {
    max-height: 420px;
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    border-width: 4px;
    box-shadow: 0 8px 12px color-mix(in oklch, var(--border-color) 12%, transparent);
    transition-delay: 0s;
}

.utility-tray-panel[data-pane="sound"] {
    width: min(320px, calc(100 * var(--tp-vw) - 4.5rem));
}

.utility-tray-panel[data-pane="picker"] {
    width: min(300px, calc(100 * var(--tp-vw) - 4.5rem));
}

.utility-tray-panel[data-pane="noise"] {
    width: min(340px, calc(100 * var(--tp-vw) - 4.5rem));
}

.utility-popover-pane {
    padding: 0.65rem;
}

.utility-popover-pane[hidden] {
    display: none;
}

.header-widget {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-main);
    border: 3px solid var(--border-color);
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    box-shadow: 0 4px 0 var(--border-color);
    flex-wrap: wrap;
}

.utility-popover-pane .header-widget {
    width: 100%;
    box-sizing: border-box;
    box-shadow: none;
}

.utility-popover-pane .timer-widget {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border: 0;
}

.utility-popover-pane .timer-widget .widget-controls {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
}

.utility-popover-pane .timer-widget .widget-adjusters {
    grid-column: 1 / -1;
    justify-content: center;
    padding-top: 0.55rem;
    border-top: 2px dashed color-mix(in oklch, var(--border-color) 22%, transparent);
}

.utility-popover-pane .soundscape-widget {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.55rem 0.65rem;
    border: 0;
}

.utility-popover-pane .soundscape-widget select {
    width: 100%;
    min-width: 0;
}

.utility-popover-pane .soundscape-volume {
    grid-column: 1 / -1;
    justify-content: center;
    padding-top: 0.55rem;
    border-top: 2px dashed color-mix(in oklch, var(--border-color) 22%, transparent);
}

.utility-popover-pane .soundscape-volume input[type="range"] {
    width: min(220px, 70%);
}

.utility-picker {
    display: grid;
    gap: 0.75rem;
    text-align: center;
}

.utility-picker-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.utility-picker-result {
    min-height: 76px;
    display: grid;
    place-items: center;
    padding: 0.7rem;
    border: 3px solid var(--border-color);
    border-radius: 12px;
    background: color-mix(in oklch, var(--color-green) 8%, var(--panel-bg));
    color: var(--text-main);
    font-size: 1.45rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.utility-picker-result.spinning {
    animation: fast-blur 0.1s infinite alternate;
}

.utility-picker-action {
    width: 100%;
    min-height: 44px;
    margin: 0;
}

.utility-picker-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 650;
    line-height: 1.35;
}

.utility-noise {
    display: grid;
    gap: 0.8rem;
}

.utility-noise-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-weight: 900;
}

.utility-noise-heading>span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.utility-noise-heading svg {
    width: 1.1rem;
    height: 1.1rem;
}

.utility-noise-status {
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in oklch, var(--text-muted) 10%, var(--panel-bg));
    color: var(--text-muted);
    font-size: 0.7rem;
    white-space: nowrap;
}

.utility-noise-meter {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem;
    border: 3px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-main);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.utility-noise-track {
    height: 18px;
    overflow: hidden;
    border: 2px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in oklch, var(--text-muted) 14%, var(--panel-bg));
}

.utility-noise-bar {
    width: 0%;
    height: 100%;
    background: var(--color-green);
    transition: width 100ms linear, background-color var(--dur-short) var(--ease-out);
}

.utility-noise-action {
    width: 100%;
    min-height: 44px;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    background: color-mix(in oklch, var(--color-green) 20%, var(--panel-bg));
    font-size: 0.9rem;
    box-shadow: 0 4px 0 var(--border-color);
}

.utility-noise-action[aria-pressed="true"] {
    background: color-mix(in oklch, var(--color-red) 18%, var(--panel-bg));
}

.timer-widget .widget-time {
    font-size: 1.7rem;
    font-weight: 800;
    font-family: monospace;
    min-width: 90px;
    text-align: center;
    background: var(--panel-bg);
    border: 3px solid var(--border-color);
    border-radius: 10px;
    padding: 0.15rem 0.5rem;
}

.widget-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    background: var(--panel-bg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    transition: transform 0.1s, box-shadow 0.1s;
    box-shadow: 0 3px 0 var(--border-color);
}

.widget-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--border-color);
}

.widget-btn.btn-green {
    background: var(--color-green);
    color: white;
}

.widget-btn.btn-amber {
    background: var(--color-amber);
    color: white;
}

.widget-btn.btn-red {
    background: var(--color-red);
    color: white;
}

.widget-btn.btn-blue {
    background: var(--color-blue);
    color: white;
}

.widget-adjusters {
    display: flex;
    gap: 0.4rem;
}

.adjust-btn {
    background: var(--panel-bg);
    border: 3px solid var(--border-color);
    border-radius: 10px;
    padding: 0.35rem 0.65rem;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--border-color);
    transition: all 0.1s;
}

.adjust-btn:hover {
    background: #eff6ff;
}

.adjust-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--border-color);
}

.soundscape-options {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.soundscape-btn {
    background: #ffffff;
    border: 3px solid var(--border-color);
    border-radius: 14px;
    padding: 0.4rem 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--border-color);
    transition: all 0.15s;
}

.soundscape-btn:hover {
    background: #f1f5f9;
}

.soundscape-btn.active {
    background: var(--color-purple);
    color: #ffffff;
    border-color: var(--color-purple-dark);
    box-shadow: 0 3px 0 var(--color-purple-dark);
}

.soundscape-btn.active:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--color-purple-dark);
}

.soundscape-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--border-color);
}

.soundscape-volume {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.soundscape-volume input[type="range"] {
    width: 80px;
    accent-color: var(--color-purple);
    cursor: pointer;
}

.soundscape-widget {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.soundscape-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.05rem;
    font-weight: 800;
}

.soundscape-widget select {
    background: var(--panel-bg);
    border: 3px solid var(--border-color);
    border-radius: 14px;
    padding: 0.4rem 0.8rem;
    font-family: inherit;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-main);
    cursor: pointer;
    box-shadow: 0 4px 0 var(--border-color);
}

.soundscape-widget select:focus-visible,
.soundscape-volume input:focus-visible {
    outline: 4px solid var(--color-blue);
    outline-offset: 3px;
}

@keyframes fast-blur {
    from {
        filter: blur(1px);
        transform: scale(0.95);
    }

    to {
        filter: blur(4px);
        transform: scale(1.05);
    }
}

/* --- Fact or Fiction --- */
.fact-fiction-stage {
    max-width: 900px;
    margin: 1.5rem auto 0;
    padding: 1.5rem;
    border: 4px solid var(--border-color);
    border-radius: 24px;
    background: var(--panel-bg);
    box-shadow: 0 8px 0 var(--border-color);
}

.fact-fiction-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fact-fiction-statement {
    min-height: 150px;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    color: var(--text-main);
    font-size: clamp(1.55rem, 3vw, 2.5rem);
    font-weight: 900;
    line-height: 1.18;
    text-align: center;
    overflow-wrap: anywhere;
}

.fact-fiction-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.fact-fiction-choice {
    min-height: 76px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border: 3px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 5px 0 var(--border-color);
    color: var(--text-main);
    font: 900 1.25rem var(--font-family);
    cursor: pointer;
}

.fact-fiction-choice svg {
    width: 1.5rem;
    height: 1.5rem;
}

.fact-choice {
    background: color-mix(in oklch, var(--color-green) 18%, var(--panel-bg));
}

.fiction-choice {
    background: color-mix(in oklch, var(--color-red) 15%, var(--panel-bg));
}

.fact-fiction-choice:hover,
.fact-fiction-choice.is-selected {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 var(--border-color);
}

.fact-fiction-choice.is-selected {
    outline: 5px solid var(--color-blue);
    outline-offset: 2px;
}

.fact-fiction-choice:focus-visible {
    outline: 4px solid var(--color-blue);
    outline-offset: 4px;
}

.fact-fiction-choice:disabled {
    cursor: default;
    opacity: 0.7;
    transform: none;
}

.fact-fiction-choice.is-correct {
    opacity: 1;
    outline: 5px solid var(--color-green-dark);
    outline-offset: 2px;
}

.fact-fiction-reveal {
    margin-top: 1rem;
    padding: 1rem 1.2rem;
    border: 3px solid var(--border-color);
    border-radius: 14px;
    background: color-mix(in oklch, var(--color-blue) 8%, var(--panel-bg));
}

.fact-fiction-reveal strong {
    font-size: 1.2rem;
}

.fact-fiction-reveal p {
    margin: 0.4rem 0 0;
    color: var(--text-main);
    font-weight: 650;
    line-height: 1.45;
}

.fact-fiction-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* --- Odd One Out --- */
.ooo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 600px;
    margin: 2rem auto;
}

.ooo-card {
    background: #ffffff;
    border: 4px solid var(--border-color);
    border-radius: 24px;
    padding: 2.5rem 1.5rem;
    font-size: 2.2rem;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 8px 0 var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 120px;
    transition: transform 0.15s, box-shadow 0.15s;
}

.ooo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 0 var(--border-color);
}

/* --- Mystery Country Clues --- */
.mystery-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 650px;
    margin: 2rem auto;
}

.clue-drawer {
    background: #ffffff;
    border: 4px solid var(--border-color);
    border-radius: 20px;
    box-shadow: 0 6px 0 var(--border-color);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.15s;
    width: 100%;
    padding: 0;
    text-align: left;
    font-family: inherit;
    color: var(--text-main);
}

.clue-drawer:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 var(--border-color);
}

.clue-drawer.locked {
    background: #f1f5f9;
    border-style: dashed;
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
}

.clue-drawer.locked:hover {
    transform: none;
}

.drawer-header {
    background: #eff6ff;
    padding: 1rem 1.5rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-blue-dark);
    border-bottom: 3px solid var(--border-color);
}

.clue-drawer.locked .drawer-header {
    background: #cbd5e1;
    color: #64748b;
    border-bottom: 3px dashed var(--border-color);
}

.drawer-content {
    padding: 1.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    display: none;
    line-height: 1.4;
    background: #ffffff;
}

.clue-drawer.open .drawer-content {
    display: block;
    animation: slideDown 0.25s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hallmark · feature: wellbeing signals · genre: playful utility · theme: TutorPulse
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: preserved through existing TutorPulse tokens
 */
/* --- Mood Two-Column Layout --- */
.mood-layout {
    display: block;
    max-width: 1100px;
    margin-top: 1rem;
    margin-inline: auto;
}

.mood-layout-graph {
    position: sticky;
    top: 1rem;
}

.mood-layout-graph .mood-graph-track {
    margin: 0 auto;
    max-width: 100%;
    min-height: 200px;
    padding: 1.5rem 1rem 1rem 1rem;
}

.mood-layout-graph .mood-graph-col {
    height: 180px;
}

.mood-layout-interact {
    display: flex;
    flex-direction: column;
}

.mood-checkin-actions {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
}

.mood-checkin-actions .btn-ui {
    min-height: 42px;
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* --- Mood Check-in Cards --- */
.mood-cards-container {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0.75rem 0;
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mood-cards-container.mood-cards-enabled {
    opacity: 1;
    pointer-events: auto;
}

.mood-card-item {
    background: #ffffff;
    border: 4px solid var(--border-color);
    border-radius: 20px;
    padding: 1rem;
    min-width: 110px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 8px 0 var(--border-color);
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    user-select: none;
    font-family: var(--font-family);
    color: var(--text-main);
}

.mood-card-item:hover {
    transform: translateY(-4px);
}

.mood-card-item:active {
    transform: translateY(6px);
}

.mood-card-item:focus-visible,
.wellbeing-signal select:focus-visible {
    outline: 4px solid var(--color-blue);
    outline-offset: 3px;
}

.mood-card-item:disabled,
.mood-card-item[aria-busy="true"] {
    cursor: wait;
    opacity: 0.55;
    transform: none;
}

.mood-emoji {
    font-size: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mood-emoji svg {
    width: 3.2rem;
    height: 3.2rem;
    stroke-width: 2;
}

.mood-label {
    font-size: 1.15rem;
    font-weight: 700;
}

.mood-card-item>span {
    max-width: 15ch;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
}

.mood-card-item.btn-blue {
    border-color: var(--color-blue);
}

.mood-card-item.btn-blue .mood-emoji svg {
    color: var(--color-blue);
}

.mood-card-item.btn-purple {
    border-color: var(--color-purple);
}

.mood-card-item.btn-purple .mood-emoji svg {
    color: var(--color-purple);
}

.mood-card-item.btn-green {
    border-color: var(--color-green);
}

.mood-card-item.btn-green .mood-emoji svg {
    color: var(--color-green);
}

.mood-card-item.btn-amber {
    border-color: var(--color-amber);
}

.mood-card-item.btn-amber .mood-emoji svg {
    color: var(--color-amber);
}

.mood-card-item.btn-red {
    border-color: var(--color-red);
}

.mood-card-item.btn-red .mood-emoji svg {
    color: var(--color-red);
}

.mood-card-item.btn-pink {
    border-color: var(--color-pink);
}

.mood-card-item.btn-pink .mood-emoji svg {
    color: var(--color-pink);
}

/* --- Mood Student Name Grid --- */
.mood-name-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    padding: 1.25rem;
    border: 4px solid var(--border-color);
    border-radius: 24px;
    background: #f1f5f9;
    margin: 0.5rem 0;
    max-height: 220px;
    overflow-y: auto;
}

.mood-name-btn {
    background: #ffffff;
    border: 3.5px solid var(--border-color);
    border-radius: 18px;
    padding: 0.85rem 1rem;
    font-size: 1.2rem;
    font-weight: 800;
    font-family: var(--font-family);
    cursor: pointer;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s, color 0.15s;
    user-select: none;
    box-shadow: 0 5px 0 var(--border-color);
    color: var(--text-main);
}

.mood-name-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 0 var(--border-color);
}

.mood-name-btn:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 var(--border-color);
}

.mood-name-btn.selected {
    background: var(--color-blue);
    color: white;
    border-color: var(--color-blue-dark);
    box-shadow: 0 5px 0 var(--color-blue-dark);
    transform: scale(1.04);
}

.mood-name-btn.voted {
    background: #e2e8f0;
    color: #94a3b8;
    border-color: #cbd5e1;
    box-shadow: 0 3px 0 #cbd5e1;
    pointer-events: none;
    opacity: 0.6;
}

.mood-name-btn.voted::after {
    content: " ✓";
    font-weight: 900;
}

/* Mood instruction prompt */
.mood-prompt-text {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-blue);
    margin: 0.4rem 0 0.2rem 0;
    min-height: 1.5rem;
    transition: opacity 0.2s;
}

/* Mood confirmation toast */
.mood-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: var(--color-green);
    color: white;
    border: 4px solid var(--color-green-dark);
    border-radius: 20px;
    padding: 1rem 2rem;
    font-size: 1.35rem;
    font-weight: 800;
    font-family: var(--font-family);
    box-shadow: 0 6px 0 var(--color-green-dark);
    z-index: 9999;
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.35s ease;
    pointer-events: none;
}

.mood-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Mood Chart Graph */
.mood-graph-track {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    background: #f8fafc;
    border: 4px solid var(--border-color);
    border-radius: 28px;
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    min-height: 250px;
    max-width: 700px;
    margin: 2rem auto;
    box-shadow: inset 0 4px 0 rgba(0, 0, 0, 0.05);
}

.mood-graph-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 220px;
    justify-content: flex-end;
    gap: 0.75rem;
}

.mood-graph-bar {
    width: 60px;
    border: 3px solid var(--border-color);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    position: relative;
    min-height: 20px;
    transition: none;
    display: flex;
    justify-content: center;
}

.mood-graph-bar.bg-blue {
    background-color: var(--color-blue);
}

.mood-graph-bar.bg-purple {
    background-color: var(--color-purple);
}

.mood-graph-bar.bg-green {
    background-color: var(--color-green);
}

.mood-graph-bar.bg-amber {
    background-color: var(--color-amber);
}

.mood-graph-bar.bg-red {
    background-color: var(--color-red);
}

.mood-graph-bar.bg-pink {
    background-color: var(--color-pink);
}

.mood-graph-count {
    position: absolute;
    top: -30px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--border-color);
}

.mood-graph-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.mood-graph-label svg {
    width: 1rem;
    height: 1rem;
}

/* --- Mood Log Modal --- */
.mood-log-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 41, 59, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(8px);
    animation: fadeIn 0.15s ease-out;
}

.mood-log-card {
    background: #ffffff;
    border: 5px solid var(--border-color);
    border-radius: 28px;
    padding: 2rem;
    width: 92%;
    max-width: 900px;
    max-height: calc(85 * var(--tp-vh));
    overflow-y: auto;
    box-shadow: 0 14px 0 var(--border-color);
    animation: popScale 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mood-log-card h2 {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.mood-log-card h2 svg {
    width: 1.8rem;
    height: 1.8rem;
}

.mood-log-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 3px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    margin-top: 1rem;
}

.mood-log-table th,
.mood-log-table td {
    padding: 0.75rem 0.6rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    border-bottom: 2px solid #e2e8f0;
}

.mood-log-table th {
    background: var(--border-color);
    color: white;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mood-log-table th:first-child {
    text-align: left;
    padding-left: 1rem;
}

.mood-log-table td:first-child {
    text-align: left;
    padding-left: 1rem;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
}

.mood-log-table tr:last-child td {
    border-bottom: none;
}

.mood-log-table tr:nth-child(even) {
    background: #f8fafc;
}

.mood-log-table td svg {
    width: 1.4rem;
    height: 1.4rem;
    vertical-align: middle;
}

/* Pastoral warning row highlight */
.mood-log-table tr.mood-flag-warning td {
    background: #fef2f2;
}

.mood-log-table tr.mood-flag-warning td:first-child {
    position: relative;
    padding-left: 1.8rem;
}

.mood-log-table tr.mood-flag-warning td:first-child::before {
    content: "⚠";
    position: absolute;
    left: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
}

.mood-log-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    font-size: 1.25rem;
    font-weight: 700;
}

.wellbeing-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-block: 1rem 1.5rem;
}

.wellbeing-summary-grid>div {
    min-width: 0;
    padding: 1rem;
    border: 3px solid var(--border-color);
    border-radius: 16px;
    background: var(--background-light);
}

.wellbeing-summary-grid strong,
.wellbeing-summary-grid span {
    display: block;
}

.wellbeing-summary-grid strong {
    overflow-wrap: anywhere;
    color: var(--text-main);
    font-size: 1.65rem;
    line-height: 1;
    text-transform: capitalize;
}

.wellbeing-summary-grid span {
    margin-top: 0.4rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.wellbeing-section {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 2px solid var(--background-light);
}

.wellbeing-section h3 {
    margin: 0;
    font-size: 1.25rem;
}

.wellbeing-section>p {
    margin: 0.35rem 0 1rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 650;
}

.wellbeing-today-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.55rem;
}

.wellbeing-today-person {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.55rem;
    padding: 0.7rem;
    border: 2px solid var(--border-color);
    border-radius: 11px;
    background: var(--panel-bg);
}

.wellbeing-today-person svg {
    grid-row: 1 / 3;
    width: 1.4rem;
    height: 1.4rem;
}

.wellbeing-today-person strong,
.wellbeing-today-person span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wellbeing-today-person span {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 750;
}

.wellbeing-today-person--bright svg {
    color: var(--color-blue);
}

.wellbeing-today-person--calm svg {
    color: var(--color-purple);
}

.wellbeing-today-person--okay svg {
    color: var(--color-green-dark);
}

.wellbeing-today-person--tired svg {
    color: var(--color-amber-dark);
}

.wellbeing-today-person--worried svg,
.wellbeing-today-person--chat svg {
    color: var(--color-red-dark);
}

.wellbeing-missing {
    margin-top: 0.8rem;
    padding: 0.65rem 0.75rem;
    border: 2px solid var(--background-light);
    border-radius: 10px;
}

.wellbeing-missing summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.wellbeing-missing>div {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.65rem;
}

.wellbeing-missing span,
.wellbeing-missing em {
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    background: var(--background-light);
    color: var(--text-muted);
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 700;
}

.wellbeing-signals {
    display: grid;
    gap: 0.65rem;
}

.wellbeing-signal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-bg);
}

.wellbeing-signal--priority {
    border-color: var(--color-red);
}

.wellbeing-signal--pattern {
    border-color: var(--color-amber);
}

.wellbeing-signal strong,
.wellbeing-signal span {
    display: inline-block;
    margin-right: 0.45rem;
}

.wellbeing-signal span {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.wellbeing-signal p {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.wellbeing-signal select {
    min-height: 42px;
    padding: 0.5rem 2rem 0.5rem 0.65rem;
    border: 2px solid var(--border-color);
    border-radius: 9px;
    background: var(--panel-bg);
    color: var(--text-main);
    font: 700 0.85rem var(--font-family);
}

.wellbeing-signal select:hover {
    background: var(--background-light);
}

.wellbeing-signal select:active {
    transform: translateY(1px);
}

.wellbeing-signal select:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    background: var(--background-light);
}

.wellbeing-trend {
    display: grid;
    grid-template-columns: repeat(10, minmax(34px, 1fr));
    min-height: 145px;
    gap: 0.5rem;
    align-items: end;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 14px;
    background: var(--background-light);
}

.wellbeing-trend-day {
    display: grid;
    grid-template-rows: auto 80px auto;
    gap: 0.35rem;
    min-width: 0;
    text-align: center;
}

.wellbeing-trend-day span,
.wellbeing-trend-day small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wellbeing-trend-day i {
    align-self: end;
    width: 100%;
    height: var(--trend-height);
    min-height: 6px;
    border-radius: 5px 5px 2px 2px;
    background: var(--color-red);
    opacity: 0.78;
}

.school-wellbeing-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem;
    border-bottom: 1px solid var(--background-light);
}

.school-wellbeing-row>div:first-child strong,
.school-wellbeing-row>div:first-child span {
    display: block;
}

.school-wellbeing-row>div:first-child span {
    margin-top: 0.2rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.school-wellbeing-metrics {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.school-wellbeing-metrics>span {
    padding: 0.35rem 0.55rem;
    border-radius: 7px;
    background: var(--background-light);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.school-wellbeing-metrics .has-open-chat {
    background: color-mix(in oklch, var(--color-red) 14%, var(--panel-bg));
    color: var(--color-red-dark);
}

.wellbeing-retention-control {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.wellbeing-retention-control select {
    min-height: 36px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--panel-bg);
    color: var(--text-main);
    font: inherit;
}

/* --- Word Scramble --- */
.scramble-tiles-row {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
}

.scramble-tile {
    background: #fef08a;
    /* Soft yellow tile */
    border: 4px solid var(--border-color);
    border-radius: 16px;
    width: 65px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-main);
    box-shadow: 0 5px 0 var(--border-color);
    text-transform: uppercase;
}

/* --- Mindfulness Breathing --- */
.breathing-bubble-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    margin: 2rem 0;
}

.breathing-bubble {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--color-purple-dark);
    border: 5px solid var(--border-color);
    box-shadow: 0 10px 0 var(--border-color), inset 0 -10px 0 rgba(0, 0, 0, 0.1);
    transition: transform 4s ease-in-out;
}

.breathing-bubble.inhale {
    transform: scale(2.2);
    background: var(--color-blue);
    box-shadow: 0 14px 0 var(--border-color);
}

.breathing-bubble.hold {
    transform: scale(2.2);
    background: var(--color-green);
}

.breathing-bubble.exhale {
    transform: scale(1.0);
    background: var(--color-purple-dark);
    box-shadow: 0 10px 0 var(--border-color);
}

.breathing-instruction {
    margin-top: 2rem;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--border-color);
    letter-spacing: 1px;
    text-transform: uppercase;
    height: 40px;
    text-align: center;
}

/* --- Class Roster Editor --- */
.roster-editor-card {
    background: #ffffff;
    border: 4px solid var(--app-theme-color, var(--border-color));
    border-radius: 24px;
    padding: 2rem;
    max-width: 650px;
    margin: 0 auto;
    box-shadow: 0 8px 0 var(--app-theme-color, var(--border-color));
}

/* Hallmark · settings workbench · genre: playful · theme: existing TutorPulse
 * hierarchy: section rail + focused work area · save model: explicit or labelled autosave
 */
.settings-nav {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.85rem;
    width: 100%;
    margin-bottom: 1.75rem;
    padding: 0.9rem;
    border: 3px solid var(--border-color);
    border-radius: 20px;
    background: var(--panel-bg);
    box-shadow: 0 5px 0 var(--border-color);
    overflow: visible;
}

.settings-nav .level-pill {
    grid-column: span 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    white-space: nowrap;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    border: 3px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 4px 0 var(--border-color);
    font-size: clamp(0.78rem, 0.83vw, 0.96rem);
    top: 0;
    transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background var(--dur-short) var(--ease-out);
}

.settings-nav .level-pill:nth-child(n + 5) {
    grid-column: span 4;
}

.settings-nav .level-pill:nth-child(1) {
    background: var(--spinner-peach);
}

.settings-nav .level-pill:nth-child(2) {
    background: var(--spinner-mint);
}

.settings-nav .level-pill:nth-child(3) {
    background: var(--spinner-sky);
}

.settings-nav .level-pill:nth-child(4) {
    background: var(--spinner-gold);
}

.settings-nav .level-pill:nth-child(5) {
    background: var(--spinner-lilac);
}

.settings-nav .level-pill:nth-child(6) {
    background: var(--spinner-pink);
}

.settings-nav .level-pill:nth-child(7) {
    background: var(--spinner-lime);
}

#rosterEditorView .settings-nav .level-pill:hover {
    top: 0;
    transform: translateY(-3px);
    box-shadow: 0 7px 0 var(--border-color);
}

#rosterEditorView .settings-nav .level-pill:active {
    top: 0;
    transform: translateY(1px);
    box-shadow: none;
}

#rosterEditorView .settings-nav .level-pill.active {
    background: var(--app-theme-color, var(--color-purple-dark));
    border-color: var(--border-color);
    color: #ffffff;
    box-shadow: 0 5px 0 var(--border-color);
}

#rosterEditorView .settings-nav .level-pill.active:hover {
    background: var(--app-theme-color, var(--color-purple-dark));
    box-shadow: 0 8px 0 var(--border-color);
}

.settings-nav .level-pill svg {
    flex: 0 0 auto;
    box-sizing: content-box;
    width: 1rem !important;
    height: 1rem !important;
    padding: 0.32rem;
    border: 2px solid var(--border-color);
    border-radius: 9px;
    background: #ffffff;
    color: var(--border-color);
    stroke-width: 2.6;
}

#rosterEditorView .settings-nav .level-pill:focus-visible {
    outline: 4px solid var(--app-theme-color, var(--color-purple-dark));
    outline-offset: 3px;
}

.app-customisation-card {
    max-width: 1040px;
}

.app-manager-toolbar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
}

.app-search-field {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1;
    min-width: 0;
    padding: 0 0.85rem;
    background: #ffffff;
    border: 3px solid var(--border-color);
    border-radius: 14px;
}

.app-search-field:focus-within {
    outline: 4px solid color-mix(in srgb, var(--app-theme-color, var(--color-purple)) 28%, transparent);
    outline-offset: 2px;
}

.app-search-field svg {
    width: 1.1rem;
    flex: 0 0 auto;
}

.app-search-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0.78rem 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-weight: 700;
}

.app-bulk-actions {
    display: flex;
    gap: 0.5rem;
}

.app-manager-action {
    min-height: 0;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    box-shadow: 0 3px 0 var(--border-color);
    font-size: 0.85rem;
    white-space: nowrap;
}

.app-category-filters {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 0 0.5rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.app-category-chip {
    flex: 0 0 auto;
    padding: 0.5rem 0.8rem;
    border: 2px solid var(--border-color);
    border-radius: 999px;
    background: #ffffff;
    color: var(--text-main);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.app-category-chip:hover,
.app-category-chip:focus-visible {
    background: var(--bg-main);
}

.app-category-chip:focus-visible {
    outline: 3px solid var(--app-theme-color, var(--color-purple));
    outline-offset: 2px;
}

.app-category-chip.active {
    color: #ffffff;
    background: var(--border-color);
}

.app-visibility-count {
    margin: 0.45rem 0 1rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.app-customisation-layout {
    display: block;
}

.app-visibility-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.app-visibility-item {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.65rem 0.75rem;
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 13px;
    transition: transform 120ms ease, background 120ms ease, opacity 120ms ease;
}

.app-visibility-item:hover {
    background: var(--bg-main);
}

.app-visibility-item.is-locked {
    opacity: 0.58;
    background: #f1f5f9;
}

.app-visibility-item.is-dragging {
    opacity: 0.45;
}

.app-visibility-item.is-drag-target {
    transform: translateY(-2px);
    outline: 3px solid var(--app-theme-color, var(--color-purple));
    outline-offset: 2px;
}

.app-visibility-item[hidden] {
    display: none;
}

.app-drag-handle {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: grab;
}

.app-drag-handle:active {
    cursor: grabbing;
}

.app-drag-handle:focus-visible {
    outline: 3px solid var(--app-theme-color, var(--color-purple));
    border-radius: 6px;
}

.app-order-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1.8rem);
    gap: 0.25rem;
}

.app-move-button {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    color: var(--text-main);
    background: var(--bg-main);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
}

.app-move-button:hover:not(:disabled) {
    color: var(--app-theme-color, var(--color-purple));
    border-color: var(--app-theme-color, var(--color-purple));
}

.app-move-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--app-theme-color, var(--color-purple)) 40%, transparent);
    outline-offset: 2px;
}

.app-move-button:disabled {
    opacity: 0.3;
    cursor: default;
}

.app-visibility-item input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--app-theme-color, var(--color-purple));
}

.app-visibility-item label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-weight: 800;
    cursor: pointer;
}

.app-visibility-item label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-visibility-item label small {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1.25;
}

.app-favourite-toggle {
    grid-column: 4;
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-main);
    color: var(--text-muted);
    cursor: pointer;
}

.app-favourite-toggle:hover {
    color: var(--color-amber);
    border-color: var(--color-amber);
}

.app-favourite-toggle svg {
    width: 1.05rem;
    height: 1.05rem;
    stroke-width: 2.25;
}

.app-favourite-toggle[aria-pressed="true"] {
    background: color-mix(in oklch, var(--color-amber) 24%, var(--panel-bg));
    border-color: var(--color-amber);
    color: var(--color-amber);
}

.app-favourite-toggle[aria-pressed="true"] svg {
    fill: currentColor;
}

.app-favourite-toggle:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-amber) 40%, transparent);
    outline-offset: 2px;
}

.dashboard-order-preview {
    position: sticky;
    top: 1rem;
    padding: 1rem;
    background: var(--bg-main);
    border: 3px solid var(--border-color);
    border-radius: 16px;
}

.dashboard-preview-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.dashboard-preview-heading h4 {
    margin: 0.1rem 0 0;
    font-size: 1rem;
}

.dashboard-preview-kicker {
    color: var(--app-theme-color, var(--color-purple));
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-order-list {
    display: grid;
    gap: 0.4rem;
    max-height: 400px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.dashboard-order-list li {
    display: grid;
    grid-template-columns: 1.7rem minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    padding: 0.48rem 0.55rem;
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 800;
}

.dashboard-order-list li span {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--app-theme-color, var(--color-purple));
    color: #ffffff;
    font-size: 0.68rem;
}

.dashboard-order-list .dashboard-preview-empty {
    display: block;
    color: var(--text-muted);
}

.settings-save-bar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.25rem -0.75rem -0.75rem;
    padding: 0.85rem;
    background: color-mix(in srgb, #ffffff 94%, transparent);
    border-top: 2px solid var(--border-color);
    backdrop-filter: blur(8px);
}

.settings-save-bar .btn-ui {
    min-width: 160px;
}

.settings-save-bar .btn-ui:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 3px 0 var(--border-color);
}

.settings-save-status {
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.settings-save-status[data-state="dirty"] {
    color: #b45309;
}

.settings-save-status[data-state="saving"] {
    color: var(--color-blue-dark);
}

.settings-save-status[data-state="saved"] {
    color: #15803d;
}

.settings-save-status[data-state="error"] {
    color: #b91c1c;
}

.custom-content-settings {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 3px dashed var(--border-color);
}

.custom-content-heading,
.custom-content-modal-header,
.custom-content-library-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.custom-content-heading h3,
.custom-content-modal-header h3,
.custom-content-library h4 {
    margin: 0;
}

.custom-content-badge {
    flex: 0 0 auto;
    padding: 0.35rem 0.55rem;
    color: var(--color-purple-dark);
    background: #f3e8ff;
    border: 2px solid var(--color-purple-dark);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
    white-space: nowrap;
}

.custom-content-app-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.custom-content-app-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 13px;
}

.custom-content-app-card h4,
.custom-content-app-card p {
    margin: 0;
}

.custom-content-app-card p {
    margin-top: 0.15rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.custom-content-app-card button {
    min-height: 0;
    padding: 0.55rem 0.75rem;
    box-shadow: 0 3px 0 var(--border-color);
    font-size: 0.8rem;
}

.custom-content-modal-content {
    width: min(1120px, calc(100 * var(--tp-vw) - 2rem));
    max-width: 1120px;
    max-height: calc(100 * var(--tp-vh) - 2rem);
    padding: 1.25rem;
    overflow-y: auto;
    text-align: left;
}

.custom-content-close {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    color: var(--text-main);
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
}

.custom-content-close:focus-visible,
.custom-question-form input:focus-visible,
.custom-question-form textarea:focus-visible,
.custom-question-form select:focus-visible,
.custom-content-mode-group select:focus-visible,
.custom-content-library-toolbar select:focus-visible,
.custom-content-import textarea:focus-visible {
    outline: 4px solid var(--color-purple);
    outline-offset: 2px;
}

.custom-content-mode-group {
    display: grid;
    grid-template-columns: minmax(180px, 0.65fr) minmax(220px, 1fr);
    align-items: center;
    gap: 0.4rem 1rem;
    margin: 1rem 0;
    padding: 0.85rem;
    background: var(--bg-main);
    border: 2px solid var(--border-color);
    border-radius: 13px;
}

.custom-content-mode-group label {
    font-weight: 900;
}

.custom-content-mode-group select,
.custom-content-library-toolbar select,
.custom-question-form input,
.custom-question-form textarea,
.custom-question-form select,
.custom-content-import textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 0.65rem 0.75rem;
    color: var(--text-main);
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font: inherit;
    font-weight: 700;
}

.custom-content-mode-group p {
    grid-column: 2;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 650;
}

.custom-content-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 1rem;
}

.custom-question-form,
.custom-content-library {
    min-width: 0;
    padding: 1rem;
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 14px;
}

.custom-question-form {
    display: grid;
    align-content: start;
    gap: 0.75rem;
}

.custom-question-form label,
.custom-content-years legend {
    display: grid;
    gap: 0.3rem;
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 900;
}

.custom-content-paired-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.custom-content-years {
    min-width: 0;
    margin: 0;
    padding: 0.65rem;
    border: 2px solid var(--border-color);
    border-radius: 10px;
}

.custom-content-years>div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.custom-content-years label {
    display: inline-flex;
    grid-template-columns: none;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.45rem;
    background: var(--bg-main);
    border-radius: 8px;
    cursor: pointer;
}

.custom-content-years input {
    width: auto;
    accent-color: var(--color-purple-dark);
}

.custom-content-image-fields {
    display: grid;
    gap: 0.6rem;
    padding: 0.75rem;
    background: #f8fafc;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
}

.custom-content-image-fields[hidden],
.custom-content-image-preview[hidden] {
    display: none;
}

.custom-content-image-fields>p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 650;
}

.custom-content-image-preview {
    position: relative;
    overflow: hidden;
    border: 2px solid var(--border-color);
    border-radius: 10px;
}

.custom-content-image-preview img {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    background: #eef2f7;
}

.custom-content-image-preview button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.35rem 0.5rem;
    color: #ffffff;
    background: #991b1b;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
}

.custom-content-error {
    min-height: 1.2em;
    margin: 0;
    color: #b91c1c;
    font-size: 0.8rem;
    font-weight: 800;
}

.custom-content-form-actions,
.custom-content-import-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.custom-content-form-actions .btn-ui,
.custom-content-import .btn-ui {
    min-height: 0;
    padding: 0.55rem 0.75rem;
    font-size: 0.8rem;
}

.custom-content-library-toolbar p {
    margin: 0.15rem 0 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.custom-content-library-toolbar select {
    width: min(220px, 48%);
}

.custom-content-library-list {
    display: grid;
    gap: 0.55rem;
    max-height: 580px;
    margin-top: 0.75rem;
    overflow-y: auto;
}

.custom-content-library-empty {
    padding: 2rem 1rem;
    color: var(--text-muted);
    background: var(--bg-main);
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    text-align: center;
    font-weight: 750;
}

.custom-content-question-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    padding: 0.7rem;
    background: var(--bg-main);
    border: 2px solid var(--border-color);
    border-radius: 11px;
}

.custom-content-question-row strong,
.custom-content-question-row span {
    display: block;
}

.custom-content-question-row strong {
    overflow-wrap: anywhere;
    font-size: 0.84rem;
}

.custom-content-question-row span {
    margin-top: 0.2rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.custom-content-row-actions {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
}

.custom-content-row-actions button {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--text-main);
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
}

.custom-content-row-actions button:last-child {
    color: #b91c1c;
}

.custom-content-import {
    margin-top: 1rem;
    padding: 0.85rem;
    background: var(--bg-main);
    border: 2px solid var(--border-color);
    border-radius: 13px;
}

.custom-content-import summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 900;
    cursor: pointer;
}

.custom-content-import summary svg {
    width: 1.1rem;
}

.custom-content-import>p,
.custom-content-import-result {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.custom-content-import textarea {
    margin: 0.65rem 0;
    resize: vertical;
}

.custom-content-file-button {
    cursor: pointer;
}

.custom-content-file-button input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.trivia-question-image {
    width: min(680px, 100%);
    margin: 0 auto 1rem;
    overflow: hidden;
    background: #eef2f7;
    border: 4px solid var(--border-color);
    border-radius: 16px;
}

.trivia-question-image[hidden] {
    display: none;
}

.trivia-question-image img {
    display: block;
    width: 100%;
    max-height: min(calc(44 * var(--tp-vh)), 430px);
    object-fit: contain;
}

/* Trivia Buzz has a taller content stack than other apps. Keep its controls
   inside a typical laptop/smartboard viewport without shrinking the question. */
#triviaView .trivia-question-image {
    width: min(620px, calc(72 * var(--tp-vw)));
    margin-bottom: 0.65rem;
}

#triviaView .trivia-question-image img {
    max-height: clamp(180px, calc(28 * var(--tp-vh)), 300px);
}

.trivia-stage {
    min-height: 0;
}

@media (min-width: 769px) {
    body.classroom-presentation-active #triviaView.active.trivia-no-image {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        height: 100%;
    }

    body.classroom-presentation-active #triviaView.active.trivia-no-image .trivia-stage {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-bottom: clamp(1rem, 5vh, 4rem);
    }
}

#triviaView #triviaQuestionField {
    min-height: 72px;
    margin: 0.65rem 0;
    padding: clamp(0.85rem, 2vh, 1.35rem);
    background: transparent;
    border: none;
    box-shadow: none;
}

#triviaView .trivia-box {
    font-size: calc(clamp(1.9rem, 3.2vw, 3.25rem) * var(--text-zoom, 1)) !important;
}

#triviaView .timer-circle-container {
    height: 170px;
    margin: 0.75rem 0;
}

#triviaView .timer-svg {
    width: 160px;
    height: 160px;
}

#triviaView .timer-text {
    font-size: 3.2rem;
}

.trivia-action-bar {
    position: sticky;
    bottom: 0.5rem;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    margin: 0.75rem auto 0;
    padding: 0.55rem;
    background: color-mix(in srgb, var(--panel-bg) 94%, transparent);
    border: 2px solid color-mix(in srgb, var(--app-theme-color, var(--border-color)) 55%, transparent);
    border-radius: 14px;
    backdrop-filter: blur(8px);
}

.trivia-action-bar .btn-ui {
    min-height: 42px;
    padding: 0.55rem 0.85rem;
    border-width: 2px;
    border-radius: 11px;
    box-shadow: 0 3px 0 var(--app-theme-color, var(--border-color));
    font-size: 0.85rem;
}

.trivia-action-bar .btn-ui:hover {
    box-shadow: 0 5px 0 var(--app-theme-color, var(--border-color));
}

@media (max-height: 820px) and (min-width: 769px) {
    #triviaView .trivia-question-image img {
        max-height: 210px;
    }

    #triviaView #triviaQuestionField {
        min-height: 58px;
        padding-block: 0.7rem;
    }

    #triviaView .timer-circle-container {
        height: 110px;
        margin-block: 0.5rem;
    }

    #triviaView .timer-svg {
        width: 104px;
        height: 104px;
    }

    #triviaView .timer-text {
        font-size: 2.2rem;
    }
}

/* Phase 5 rollout: flatten the inner .trivia-box card + bump primary prompt
   text on more apps, following the same recipe validated on #triviaView. */
#estimateView .trivia-box,
#icebreakerView .trivia-box {
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: calc(clamp(1.9rem, 3.2vw, 3.25rem) * var(--text-zoom, 1)) !important;
}

#doodleView .trivia-box,
#teamDuelView .trivia-box {
    background: transparent;
    border: none;
    box-shadow: none;
}

#teamDuelView #duelQuestionText {
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
}

.in-app-quiz-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 0 auto;
    padding: 0.18rem 0.3rem;
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 9px;
    box-shadow: 0 2px 0 var(--border-color);
    box-sizing: border-box;
}

.in-app-quiz-picker>svg {
    width: 0.85rem;
    height: 0.85rem;
}

.in-app-quiz-picker select {
    min-width: 0;
    min-height: 44px;
    padding: 0.35rem 0.5rem;
    color: var(--text-main);
    background: var(--bg-main);
    border: 2px solid var(--border-color);
    border-radius: 9px;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
}

.in-app-quiz-picker select:focus-visible {
    outline: 4px solid var(--app-theme-color, var(--color-purple));
    outline-offset: 2px;
}

h2 .in-app-quiz-picker+.screen-zoom-container {
    margin-left: 0;
}

@media (max-width: 768px) {

    .custom-content-app-list,
    .custom-content-editor-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .custom-content-mode-group {
        grid-template-columns: minmax(0, 1fr);
    }

    .custom-content-mode-group p {
        grid-column: 1;
    }
}

@media (max-width: 414px) {

    .custom-content-heading,
    .custom-content-library-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .custom-content-app-card,
    .custom-content-question-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .custom-content-app-card button,
    .custom-content-library-toolbar select {
        width: 100%;
    }

    .custom-content-paired-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .custom-content-row-actions {
        justify-content: flex-end;
    }

    .custom-content-form-actions .btn-ui {
        flex: 1;
    }

    .in-app-quiz-picker {
        order: 10;
        width: auto;
        margin-left: 0;
    }

    .in-app-quiz-picker select {
        width: min(190px, calc(48 * var(--tp-vw)));
    }
}

/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 * Hallmark · component: content inventory · genre: modern-minimal · theme: existing TutorPulse admin
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass
 */
.admin-content-audit-layout {
    display: grid;
    gap: 1rem;
}

.content-inventory-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.content-inventory-heading h3 {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.content-inventory-heading .subtitle {
    max-width: 78ch;
    margin: 0;
}

.content-audit-refresh {
    flex: 0 0 auto;
    white-space: nowrap;
}

.content-audit-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin: 1.25rem 0;
}

.content-audit-metric {
    min-width: 0;
    padding: .85rem 1rem;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.content-audit-metric span {
    display: block;
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.content-audit-metric strong {
    display: block;
    margin-top: .2rem;
    color: var(--text-main);
    font-size: 1.4rem;
    line-height: 1.1;
}

.content-audit-toolbar {
    display: flex;
    gap: .65rem;
    margin-bottom: .8rem;
}

.content-audit-search {
    position: relative;
    flex: 1;
    min-width: 0;
}

.content-audit-search svg {
    position: absolute;
    left: .75rem;
    top: 50%;
    width: 1rem;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.content-audit-search input {
    width: 100%;
    min-height: 42px;
    padding: .5rem .75rem .5rem 2.25rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font: inherit;
}

.content-audit-search input:focus-visible,
.content-audit-detail-toggle:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

.content-inventory-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.content-inventory-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
}

.content-inventory-table th {
    padding: .7rem .75rem;
    background: var(--background-light);
    color: var(--text-muted);
    text-align: left;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}

.content-inventory-table td {
    padding: .72rem .75rem;
    border-top: 1px solid var(--border-color);
    vertical-align: middle;
}

.content-inventory-table td:nth-child(2),
.content-inventory-table td:nth-child(3),
.content-inventory-table td:nth-child(4) {
    font-variant-numeric: tabular-nums;
}

.content-inventory-row:hover td {
    background: var(--background-light);
}

.content-inventory-row small {
    display: block;
    max-width: 58ch;
    margin-top: .16rem;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.content-audit-status {
    display: inline-flex;
    padding: .2rem .45rem;
    border: 1px solid;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}

.content-audit-status.is-ok {
    color: var(--color-green-dark);
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.content-audit-status.is-dynamic {
    color: var(--color-blue-dark);
    background: #eff6ff;
    border-color: #bfdbfe;
}

.content-audit-status.is-warning {
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a;
}

.content-audit-status.is-error {
    color: var(--color-red-dark);
    background: #fef2f2;
    border-color: #fecaca;
}

.content-audit-status.is-neutral {
    color: var(--text-muted);
    background: var(--background-light);
    border-color: var(--border-color);
}

.content-audit-detail-toggle {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}

.content-audit-detail-toggle:hover,
.content-audit-detail-toggle[aria-expanded="true"] {
    background: #fff;
    border-color: var(--border-color);
}

.content-audit-detail-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.content-inventory-detail td {
    background: var(--background-light);
}

.content-audit-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.content-audit-detail-grid h4,
.content-audit-pools h4 {
    margin: 0 0 .45rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.content-audit-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.content-audit-chip {
    padding: .22rem .42rem;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-muted);
    font-size: .72rem;
}

.content-audit-pools {
    margin-top: 1rem;
}

.content-audit-pools>div {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) auto minmax(7rem, .6fr);
    align-items: center;
    gap: .65rem;
    margin-top: .4rem;
}

.content-audit-pools code {
    overflow-wrap: anywhere;
}

.content-audit-pools progress {
    width: 100%;
    accent-color: var(--color-green);
}

.content-audit-note,
.content-audit-footnote {
    margin: .75rem 0 0;
    color: var(--text-muted);
    font-size: .75rem;
}

.content-audit-loading {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem;
    color: var(--text-muted);
    font-weight: 700;
}

.content-audit-loading svg {
    animation: content-audit-spin 900ms linear infinite;
}

@keyframes content-audit-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .content-audit-loading svg {
        animation: none;
    }
}

@media (max-width: 768px) {

    .content-inventory-heading,
    .content-audit-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .content-audit-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .content-audit-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .content-audit-pools>div {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .content-audit-pools progress {
        grid-column: 1 / -1;
    }
}

@media (max-width: 375px) {
    .content-audit-summary {
        grid-template-columns: minmax(0, 1fr);
    }
}

.settings-autosave-status {
    margin: 1rem 0 0;
    text-align: right;
}

.settings-inline-select {
    width: 170px;
    height: 42px;
    padding: 0.2rem 0.5rem;
    background: #ffffff;
    border: 3px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 2px 2px 0 var(--border-color);
    color: var(--text-main);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
}

.experience-subsection {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid color-mix(in srgb, var(--border-color) 25%, transparent);
}

.experience-subsection-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.experience-subsection-heading>svg {
    box-sizing: content-box;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0.45rem;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--spinner-lilac);
}

.experience-subsection-heading h4 {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
}

.experience-subsection-heading p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.4;
}

.screensaver-option-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.screensaver-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: #ffffff;
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.screensaver-option input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--app-theme-color, var(--color-purple-dark));
}

/* Settings use the brand's tactile treatment at the outer level; inner
   controls stay quieter so form hierarchy remains clear. */
#rosterEditorView .roster-editor-card,
#rosterEditorView .accessibility-settings-card {
    border-width: 2px;
    border-color: color-mix(in srgb, var(--app-theme-color, var(--color-purple)) 62%, var(--border-color));
    box-shadow: 0 4px 0 color-mix(in srgb, var(--app-theme-color, var(--color-purple)) 62%, var(--border-color));
}

#rosterEditorView .roster-editor-card input:not([type="checkbox"]),
#rosterEditorView .roster-editor-card select,
#rosterEditorView .roster-editor-card textarea,
#rosterEditorView .accessibility-settings-card input:not([type="checkbox"]),
#rosterEditorView .accessibility-settings-card select {
    border-width: 2px !important;
    box-shadow: none;
}

#rosterEditorView .a11y-toggle-row,
#rosterEditorView .gdpr-safeguarding-alert,
#rosterEditorView #settingsPanelPastoral>div {
    border-width: 2px !important;
    box-shadow: none;
}

#rosterEditorView .app-visibility-item,
#rosterEditorView .dashboard-order-preview,
#rosterEditorView .dashboard-order-list li {
    box-shadow: none;
}

.security-privacy-card {
    max-width: 760px;
}

.settings-section {
    padding: 1.25rem 0;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 28%, transparent);
}

.settings-section:first-of-type {
    margin-top: 1.25rem;
}

.settings-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.settings-section-heading h4 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.3rem;
    color: var(--text-main);
    font-size: 1.05rem;
}

.settings-section-heading h4 svg {
    width: 1.05rem;
    height: 1.05rem;
}

.settings-section-heading p {
    max-width: 62ch;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.settings-section-badge {
    flex: 0 0 auto;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    background: var(--bg-main);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    white-space: nowrap;
}

.settings-field {
    display: grid;
    gap: 0.45rem;
    max-width: 230px;
    margin-bottom: 1rem;
    color: var(--text-main);
    font-size: 0.88rem;
    font-weight: 800;
}

.settings-field-hint {
    max-width: 62ch;
    margin: -0.5rem 0 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

.settings-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.72rem;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: #ffffff;
    color: var(--text-main);
    font: inherit;
    font-size: 1.05rem;
    letter-spacing: 0.28rem;
    text-align: center;
}

.settings-field input:focus-visible {
    outline: 3px solid var(--app-theme-color, var(--color-purple));
    outline-offset: 2px;
}

.settings-section-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.settings-section-actions .btn-ui,
.settings-section-actions .settings-text-link {
    white-space: nowrap;
}

.settings-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--app-theme-color, var(--color-purple));
    font-size: 0.87rem;
    font-weight: 800;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.settings-text-link svg {
    width: 0.9rem;
    height: 0.9rem;
}

.settings-text-link:focus-visible {
    outline: 3px solid var(--app-theme-color, var(--color-purple));
    outline-offset: 3px;
    border-radius: 4px;
}

@media (max-width: 900px) {
    .app-visibility-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1400px) {
    .settings-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-nav .level-pill,
    .settings-nav .level-pill:nth-child(n + 5) {
        grid-column: span 1;
        font-size: 0.9rem;
    }
}

@media (max-width: 600px) {
    .settings-nav {
        display: grid;
        grid-template-columns: 1fr;
        margin-inline: 0;
        width: 100%;
        padding-inline: 0;
    }

    .settings-nav .level-pill {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        grid-column: span 1;
    }

    .app-customisation-card,
    .accessibility-settings-card {
        padding: 1.2rem;
    }

    .app-manager-toolbar {
        flex-direction: column;
    }

    .app-bulk-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-visibility-grid {
        grid-template-columns: 1fr;
    }

    .a11y-toggle-row {
        align-items: flex-start;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .settings-inline-select,
    .pet-name-input {
        width: 100%;
    }

    .settings-save-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-save-bar .btn-ui {
        width: 100%;
    }

    .screensaver-option-grid {
        grid-template-columns: 1fr;
    }

    .settings-section-heading,
    .settings-section-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-section-actions .btn-ui,
    .settings-section-actions .settings-text-link,
    .settings-field {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }

    .settings-section-actions .settings-text-link {
        min-height: 44px;
        align-items: center;
    }
}

/* Hallmark · component: classroom corner rail · genre: playful · theme: existing TutorPulse
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass · responsive: 320 / 375 / 414 / 768
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 */
.sidebar-rail-stack {
    position: fixed;
    z-index: 881;
    top: 7.75rem;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 188px;
    pointer-events: none;
}

.sidebar-rail-stack > * {
    pointer-events: auto;
}

.school-branding-corner {
    width: 188px;
    padding: 0.65rem 0.55rem;
    box-sizing: border-box;
    border: 3px solid var(--border-color);
    border-left: 0;
    border-radius: 0 16px 16px 0;
    background: var(--panel-bg);
    box-shadow: 0 5px 0 var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.45rem;
}

.school-branding-corner[hidden] {
    display: none !important;
}

.school-branding-corner__icon-wrapper {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 10px;
    border: 2px solid var(--border-color);
    background: color-mix(in oklch, var(--color-blue) 20%, var(--panel-bg));
    color: var(--color-blue);
}

.school-branding-corner__icon-wrapper svg {
    width: 1.4rem;
    height: 1.4rem;
    stroke-width: 2.5;
    color: var(--text-main);
}

.school-branding-corner__logo {
    max-height: 48px;
    max-width: 130px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

.school-branding-corner__name {
    font-size: 0.85rem;
    font-weight: 800;
    text-align: center;
    color: var(--text-main);
    line-height: 1.25;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ============================================================
   SCHOOL VALUES OVERLAY (centred floating plaque, bottom of screen)
   Body-level fixed chrome: a school's values acronym as a row of
   big poster letters, each with the word it stands for beneath.
   Content-width rounded panel — centred, clears the edge rails by
   position. Pure rem/px/% + clamp so CSS `zoom` on <html> scales it
   with no JS compensation.
   ============================================================ */
.school-phrase-bar {
    position: fixed;
    bottom: clamp(0.5rem, calc(1.6 * var(--tp-vh)), 0.9rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 95;
    width: fit-content;
    max-width: min(900px, calc(100 * var(--tp-vw) - 2rem));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem clamp(0.6rem, 1.2vw, 0.9rem) 0.55rem;
    box-sizing: border-box;
    background: var(--panel-bg);
    border: 3px solid var(--spb-border-color, var(--border-color));
    border-radius: 18px;
    color: var(--text-main);
    box-shadow: 0 4px 0 var(--spb-border-color, var(--border-color)), 0 14px 30px rgba(0, 0, 0, 0.18);
}

/* On desktop, keep the plaque clear of the fixed edge rails. */
@media (min-width: 1025px) {
    .school-phrase-bar {
        max-width: min(880px, calc(100 * var(--tp-vw) - 27rem));
    }
}

.school-phrase-bar[hidden] {
    display: none !important;
}

.school-phrase-bar__acrostic {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    column-gap: clamp(0.6rem, 2.5vw, 1.5rem);
    row-gap: 0.4rem;
    max-width: 100%;
}

.spb-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

/* Large letter in its own full colour, with an ink offset so pale colours
   (amber, mint) still read against the cream. No box. */
.spb-chip__letter {
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 5.5vw, 2.9rem);
    font-weight: 700;
    line-height: 0.95;
    color: var(--spb-color, #4aa3df);
    text-shadow: 3px 3px 0 var(--border-color);
    transition: transform 0.16s var(--ease-out);
}

.spb-chip:hover .spb-chip__letter {
    transform: translateY(-3px) rotate(-3deg);
}

.spb-chip__title {
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: var(--text-main);
    text-align: center;
    white-space: nowrap;
}

/* Its own little box, attached above the main plaque, straddling the top edge. */
.school-phrase-bar__strapline {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -68%);
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 0.3rem 0.9rem;
    background: var(--panel-bg);
    border: 3px solid var(--spb-border-color, var(--border-color));
    border-radius: 12px;
    box-shadow: 0 3px 0 var(--spb-border-color, var(--border-color));
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-main);
    white-space: nowrap;
}

.school-phrase-bar__strapline[hidden] {
    display: none;
}

/* Reserve room so the fixed bar never covers the last dashboard row.
   --tp-phrase-bar-h is measured + set in JS after each render. */
body.has-school-phrase .workspace {
    padding-bottom: var(--tp-phrase-bar-h, 5rem);
}

body.has-school-phrase.theater-active .workspace,
body.has-school-phrase.classroom-presentation-active .workspace {
    padding-bottom: 0;
}

/* Hide in immersive modes (body-level chrome isn't caught by the theater
   .workspace rule). The PIN-lock and screensaver overlays already sit far above
   this bar at full-viewport coverage, so they need no rule here. */
body.theater-active #schoolPhraseBar,
body.classroom-presentation-active #schoolPhraseBar {
    display: none !important;
}

@media (max-width: 640px) {
    .school-phrase-bar {
        padding: 0.4rem 0.55rem 0.45rem;
        border-radius: 15px;
    }

    .school-phrase-bar__acrostic {
        column-gap: 0.5rem;
    }

    .spb-chip__letter {
        font-size: 1.85rem;
        text-shadow: 2px 2px 0 var(--border-color);
    }

    .spb-chip__title {
        font-size: 0.62rem;
    }

    .school-phrase-bar__strapline {
        padding: 0.22rem 0.6rem;
        font-size: 0.56rem;
        letter-spacing: 0.11em;
    }
}

/* Very narrow: keep the tiled letters, drop the words. */
@media (max-width: 520px) {
    .spb-chip__title {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .spb-chip__letter,
    .spb-chip:hover .spb-chip__letter {
        transition: none;
        transform: none;
    }
}

.classroom-corner {
    display: grid;
    width: 188px;
    gap: 0.45rem;
    padding: 0.55rem 0.55rem 0.65rem 0.4rem;
    box-sizing: border-box;
    border: 3px solid var(--border-color);
    border-left: 0;
    border-radius: 0 16px 16px 0;
    background: var(--panel-bg);
    box-shadow: 0 5px 0 var(--border-color);
}

.classroom-corner::before {
    display: none;
}

.classroom-corner__heading {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.05rem 0.25rem 0.35rem;
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.055em;
    line-height: 1;
    text-transform: uppercase;
}

.classroom-corner__spark {
    display: grid;
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    place-items: center;
    border: 2px solid var(--border-color);
    border-radius: 7px;
    background: color-mix(in oklch, var(--color-amber) 28%, var(--panel-bg));
}

.classroom-corner__spark svg {
    width: 0.72rem;
    height: 0.72rem;
    stroke-width: 2.7;
}

.classroom-corner .class-pet-status,
.classroom-corner .class-birthday-countdown,
.classroom-corner .school-branding-badge {
    width: 100%;
    max-width: none;
    min-height: 42px;
    gap: 0.45rem;
    padding: 0.35rem;
    box-sizing: border-box;
    border-width: 2px;
    border-radius: 10px;
    box-shadow: 0 2px 0 var(--border-color);
    white-space: normal;
}

.classroom-corner .school-branding-badge {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    align-items: center;
    border-color: var(--color-blue);
    background: color-mix(in oklch, var(--color-blue) 10%, var(--panel-bg));
    box-shadow: 0 2px 0 var(--color-blue);
}

.classroom-corner .school-branding-badge[hidden] {
    display: none;
}

.classroom-corner .school-branding-badge__icon {
    width: 29px;
    height: 29px;
    margin: 0;
    align-self: center;
    border-radius: 7px;
    border: 2px solid var(--border-color);
    background: color-mix(in oklch, var(--color-blue) 24%, var(--panel-bg));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.classroom-corner .school-branding-badge__icon svg {
    width: 1rem;
    height: 1rem;
    stroke-width: 2.5;
    color: var(--text-main);
}

.classroom-corner .school-branding-badge__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.classroom-corner .school-branding-badge__label {
    display: block;
    font-size: 0.56rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    color: var(--text-muted);
}

.classroom-corner .school-branding-badge__name {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.screensaver-school {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

.screensaver-school[hidden] {
    display: none !important;
}

.screensaver-school-logo {
    max-height: 48px;
    max-width: 120px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.screensaver-school-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: 0.02em;
}

.classroom-corner .class-pet-status {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    background: color-mix(in oklch, var(--color-purple) 9%, var(--panel-bg));
}

.classroom-corner .class-birthday-countdown {
    display: block;
    border-color: var(--color-pink-dark);
    background: color-mix(in oklch, var(--color-pink) 10%, var(--panel-bg));
    box-shadow: 0 2px 0 var(--color-pink-dark);
}

.classroom-corner .class-pet-status[hidden] {
    display: none;
}

.classroom-corner .class-pet-status__icon,
.classroom-corner .class-birthday-countdown__icon {
    width: 29px;
    height: 29px;
    margin: 0;
    align-self: center;
}

.classroom-corner .class-pet-status__icon {
    background: color-mix(in oklch, var(--color-purple) 22%, var(--panel-bg));
}

.classroom-corner .class-birthday-countdown__icon {
    background: color-mix(in oklch, var(--color-pink) 24%, var(--panel-bg));
}

.classroom-corner__copy {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 0.18rem;
}

.classroom-corner .class-pet-status__label,
.classroom-corner .class-birthday-countdown__label {
    display: block;
    font-size: 0.56rem;
    line-height: 1;
}

.classroom-corner .class-pet-status__name,
.classroom-corner .class-birthday-countdown__text {
    display: block;
    margin: 0;
    overflow: hidden;
    font-size: 0.7rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Reserve a true left rail so the corner and tool docks never cover app cards. */
@media (min-width: 1025px) {
    .workspace {
        width: min(1400px, calc(100% - 13rem));
        margin-right: auto;
        margin-left: max(11.75rem, calc((100% - 1400px) / 2));
        box-sizing: border-box;
    }

    .utility-tray {
        top: 16.75rem;
    }

    .routine-tray {
        top: 28.5rem;
    }
}

@media (max-width: 1024px) {
    .classroom-corner {
        position: relative;
        top: auto;
        left: auto;
        z-index: 89;
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
        width: auto;
        margin: 0.75rem;
        padding: 0.5rem;
        border-left: 3px solid var(--border-color);
        border-radius: 14px;
    }

    .classroom-corner__heading {
        align-self: center;
        padding: 0.15rem;
    }

    .classroom-corner .class-pet-status,
    .classroom-corner .class-birthday-countdown {
        min-width: 0;
    }
}

@media (max-width: 520px) {
    .classroom-corner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .classroom-corner__heading {
        grid-column: 1 / -1;
    }
}

@media (max-width: 375px) {
    .classroom-corner {
        grid-template-columns: minmax(0, 1fr);
    }

    .classroom-corner__heading {
        grid-column: 1;
    }
}

/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V4
 * genre: modern-minimal · macrostructure: Index-First · theme: existing TutorPulse
 * nav: settings rail · footer: none (authenticated workspace)
 * contrast: pass (40–41) · responsive: pass (34, 49–57)
 */
.super-admin-page {
    background: var(--bg-main);
    color: var(--text-main);
}

.super-admin-workspace {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 2rem;
    box-sizing: border-box;
}

#superAdminView>h2 {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
    min-width: 0;
}

#superAdminView>.subtitle {
    max-width: 60ch;
    margin: 0.4rem 0 1.75rem;
}

.admin-settings-layout {
    display: block;
}

.admin-settings-nav {
    position: sticky;
    top: 5.5rem;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.admin-settings-nav-link {
    appearance: none;
    flex: 0 0 auto;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0 0.8rem;
    color: var(--text-muted);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.admin-settings-nav-link svg {
    width: 1rem;
    height: 1rem;
}

.admin-settings-nav-link:hover,
.admin-settings-nav-link.is-active {
    background: var(--background-light);
    color: var(--color-blue-dark);
}

.admin-settings-nav-link:focus-visible,
.btn-admin:focus-visible,
.admin-input:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

.admin-settings-content {
    min-width: 0;
    display: grid;
    gap: 1.25rem;
}

[data-admin-panel][hidden] {
    display: none !important;
}

.admin-settings-section {
    scroll-margin-top: 6rem;
}

#superAdminView .admin-two-col-grid {
    gap: 1rem;
    margin: 0 !important;
}

#superAdminView .roster-editor-card {
    padding: 1.25rem !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
}

#superAdminView .roster-editor-card h3 {
    margin: 0 0 0.5rem !important;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

#superAdminView .admin-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
}

#superAdminView .admin-stat-card {
    min-width: 0;
    padding: 1rem;
    border-color: var(--border-color);
    box-shadow: none;
    transition: background-color 140ms ease, border-color 140ms ease;
}

#superAdminView .admin-stat-card:hover {
    transform: none;
    box-shadow: none;
}

#superAdminView .admin-console-table {
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

#superAdminView .admin-console-table th,
#superAdminView .admin-console-table td {
    border-color: var(--border-color) !important;
}

.admin-change-modal {
    width: min(calc(92 * var(--tp-vw)), 34rem);
}

.admin-field-help,
.admin-transfer-summary {
    min-height: 1lh;
    margin: 0.45rem 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

.admin-transfer-summary {
    margin: 1rem 0;
    padding: 0.8rem;
    background: var(--background-light);
    color: var(--color-blue-dark);
    border-radius: 8px;
}

.admin-transfer-summary:empty {
    display: none;
}

.admin-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.admin-modal-actions .btn-admin {
    min-height: 44px;
    white-space: nowrap;
}

.btn-admin:disabled,
.admin-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 768px) {

    html,
    body {
        overflow-x: clip;
    }

    .super-admin-workspace {
        padding: 0.5rem;
    }

    .admin-settings-layout {
        display: block;
    }

    .admin-settings-nav {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid var(--border-color);
        margin-bottom: 1rem;
        -webkit-overflow-scrolling: touch;
    }

    .admin-settings-nav-link {
        flex: 0 0 auto;
        padding: 0.6rem 0.85rem;
        font-size: 0.85rem;
        border-radius: 10px;
        min-height: 44px;
    }

    #superAdminView .admin-stats-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .emergency-command-deck {
        padding: 1rem !important;
        border-radius: 12px !important;
    }

    .emergency-grid {
        grid-template-columns: 1fr !important;
    }

    /* Convert Admin Tables into Touch-Friendly Responsive Cards on Mobile */
    .admin-console-table {
        display: block;
        width: 100%;
    }

    .admin-console-table thead {
        display: none;
    }

    .admin-console-table tbody,
    .admin-console-table tr,
    .admin-console-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .admin-console-table tr {
        margin-bottom: 0.85rem;
        background: var(--panel-bg, #f8fafc);
        border: 2px solid var(--border-color, #e2e8f0);
        border-radius: 12px;
        padding: 0.75rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    }

    .admin-console-table td {
        padding: 0.4rem 0 !important;
        border: none !important;
        text-align: left !important;
    }
}

@media (max-width: 414px) {
    .admin-modal-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-modal-actions .btn-admin {
        width: 100%;
    }
}

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
/* Dashboard routines and app discovery */
.routine-tray {
    position: fixed;
    z-index: 879;
    top: 21.75rem;
    left: 0;
    width: 48px;
    pointer-events: none;
}

.routine-tray-toggle {
    width: 48px;
    min-height: 92px;
    padding: 0.55rem 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-direction: column;
    border: 3px solid var(--border-color);
    border-left: 0;
    border-radius: 0 14px 14px 0;
    background: color-mix(in oklch, var(--color-green) 13%, var(--panel-bg));
    color: var(--text-main);
    box-shadow: 0 5px 0 var(--border-color);
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 900;
    cursor: pointer;
    pointer-events: auto;
}

.routine-tray-toggle span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.routine-tray-toggle:hover {
    background: color-mix(in oklch, var(--color-green) 23%, var(--panel-bg));
    transform: translateX(2px);
}

.routine-tray-toggle:active {
    transform: translateX(0);
}

.routine-tray-toggle:focus-visible,
.routine-tray-heading button:focus-visible,
.routine-tray .routine-card__start:focus-visible {
    outline: 4px solid var(--color-green);
    outline-offset: 2px;
}

.routine-tray-toggle[aria-expanded="true"] {
    background: color-mix(in oklch, var(--color-green) 28%, var(--panel-bg));
}

.routine-tray-panel {
    position: absolute;
    top: 0;
    left: calc(100% + 0.65rem);
    width: min(360px, calc(100 * var(--tp-vw) - 4.5rem));
    max-height: min(calc(70 * var(--tp-vh)), 620px);
    overflow: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.45rem) scale(0.985);
    transform-origin: top left;
    padding: 0.75rem;
    border: 0 solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-main);
    color: var(--text-main);
    pointer-events: auto;
    transition: opacity var(--dur-micro) linear, transform var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short);
}

.routine-tray-panel.is-expanded {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    border-width: 4px;
    box-shadow: 0 8px 12px color-mix(in oklch, var(--border-color) 12%, transparent);
    transition-delay: 0s;
}

.routine-tray-heading,
.routine-settings-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-workflow-sm);
}

.routine-tray-heading {
    margin-bottom: var(--space-workflow-sm);
    padding: 0.25rem 0.25rem var(--space-workflow-sm);
    border-bottom: 2px solid var(--border-color);
}

.routine-tray-heading>div,
.routine-settings-summary>div {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.routine-tray-heading span,
.routine-settings-summary span {
    color: var(--text-muted);
    font-size: var(--text-workflow-sm);
    font-weight: 700;
}

.routine-tray-heading button {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-workflow-sm);
    background: var(--color-workflow-paper);
    color: var(--text-main);
    cursor: pointer;
}

.routine-tray-heading button:hover {
    background: var(--color-workflow-pinned);
}

.routine-tray-list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-workflow-xs);
}

.routine-tray .routine-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-workflow-sm);
    min-width: 0;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-workflow-sm);
    background: var(--panel-bg);
    color: var(--text-main);
    box-shadow: none;
}

.routine-tray .routine-card__icon {
    width: 42px;
    height: 42px;
    border: 2px solid var(--border-color);
    background: color-mix(in oklch, var(--color-green) 18%, var(--panel-bg));
    color: var(--text-main);
}

.routine-tray .routine-card__copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.routine-tray .routine-card__copy h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 1rem;
    line-height: 1.2;
}

.routine-tray .routine-card__copy p {
    margin: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.routine-tray .routine-card__start {
    width: auto;
    min-height: 40px;
    padding: 0 var(--space-workflow-sm);
    border: 2px solid var(--border-color);
    background: var(--color-green);
    color: var(--border-color);
    box-shadow: 0 3px 0 var(--border-color);
    white-space: nowrap;
}

.routine-tray .routine-card__start:hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
}

.routine-tray .routine-card__start:active {
    box-shadow: none;
    transform: translateY(2px);
}

.routine-tray .routine-card__start:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.routine-tray .routine-card__start[data-state="loading"] {
    opacity: 0.72;
    cursor: progress;
}

.routine-tray .routine-card__start[data-state="error"] {
    background: var(--color-red);
}

.routine-tray .routine-card__start[data-state="success"] {
    background: var(--color-green);
}

.routine-settings-summary {
    margin-top: var(--space-workflow-md);
    padding: var(--space-workflow-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-workflow-md);
    background: var(--color-workflow-soft);
}

.routine-workbench,
.app-discovery {
    min-width: 0;
    margin-bottom: var(--space-workflow-xl);
}

.routine-workbench {
    padding: var(--space-workflow-lg);
    border: var(--rule-workflow) solid var(--border-color);
    border-radius: var(--radius-workflow-lg);
    background: var(--color-workflow-soft);
    box-shadow: 0 8px 0 var(--border-color);
}

.routine-workbench__heading,
.app-discovery__heading,
.discovery-shelf__heading,
.all-apps-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-workflow-md);
    min-width: 0;
}

.routine-workbench__heading h2,
.app-discovery__heading h2 {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--text-main);
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    line-height: 1.05;
    font-style: normal;
    overflow-wrap: anywhere;
    min-width: 0;
}

.routine-workbench__heading p,
.app-discovery__heading p {
    margin: var(--space-workflow-xs) 0 0;
    color: var(--text-muted);
    font-weight: 700;
}

.routine-workbench__context {
    color: var(--color-workflow-accent-ink) !important;
    font-size: var(--text-workflow-sm);
}

.routine-manage-button,
.command-palette-hint,
.discovery-reset-button {
    white-space: nowrap;
    flex: 0 0 auto;
}

.routine-launcher-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-workflow-md);
    margin-top: var(--space-workflow-lg);
}

.routine-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: var(--space-workflow-md);
    border: var(--rule-workflow) solid var(--border-color);
    border-radius: var(--radius-workflow-md);
    background: var(--color-workflow-paper);
}

.routine-card__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-workflow-sm);
    color: var(--text-muted);
    font-size: var(--text-workflow-sm);
    font-weight: 800;
}

.routine-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: var(--rule-workflow) solid var(--border-color);
    border-radius: var(--radius-workflow-sm);
    background: var(--color-workflow-pinned);
}

.routine-card h3 {
    margin: var(--space-workflow-sm) 0;
    font-size: var(--text-workflow-lg);
    line-height: 1.1;
    font-style: normal;
    overflow-wrap: anywhere;
}

.routine-card__steps {
    display: grid;
    gap: var(--space-workflow-xs);
    margin: 0 0 var(--space-workflow-md);
    padding: 0;
    list-style: none;
}

.routine-card__steps li {
    display: flex;
    align-items: center;
    gap: var(--space-workflow-xs);
    color: var(--text-muted);
    font-size: var(--text-workflow-sm);
    font-weight: 700;
}

.routine-card__steps svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-workflow-accent-ink);
}

.routine-card__start {
    width: 100%;
    margin-top: auto;
    justify-content: center;
    white-space: nowrap;
}

.routine-card__start:focus-visible,
.routine-manage-button:focus-visible,
.command-palette-hint:focus-visible,
.discovery-reset-button:focus-visible,
.discovery-mini-card:focus-visible,
.workflow-icon-button:focus-visible,
.routine-editor-list button:focus-visible,
.routine-draft-steps button:focus-visible,
.command-palette__results button:focus-visible {
    outline: 4px solid var(--color-workflow-accent);
    outline-offset: 2px;
}

.routine-card__start:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.routine-card__start[data-state="loading"],
.workflow-modal__footer .btn-ui[data-state="loading"] {
    cursor: wait;
    opacity: 0.72;
}

.routine-card__start[data-state="error"],
.workflow-modal__footer .btn-ui[data-state="error"] {
    background: var(--color-workflow-danger-soft);
}

.routine-card__start[data-state="success"],
.workflow-modal__footer .btn-ui[data-state="success"] {
    background: var(--color-workflow-success);
}

.app-discovery {
    padding: var(--space-workflow-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-workflow-lg);
    background: var(--color-workflow-paper);
}

.command-palette-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--space-workflow-xs);
    min-height: 44px;
    padding: 0 var(--space-workflow-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-workflow-sm);
    background: var(--color-workflow-paper);
    color: var(--text-main);
    font: 800 var(--text-workflow-sm) var(--font-body);
    cursor: pointer;
}

.command-palette-hint:hover,
.command-palette-hint.is-hover {
    background: var(--color-workflow-soft);
}

.command-palette-hint:active,
.command-palette-hint.is-active {
    transform: translateY(1px);
}

.command-palette-hint:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.command-palette-hint kbd,
.command-palette__search kbd {
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-main);
    font-family: var(--font-body);
    font-size: 0.72rem;
}

.app-discovery-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-workflow-sm);
    margin-top: var(--space-workflow-lg);
    min-height: 52px;
    padding: 0 var(--space-workflow-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-workflow-md);
    background: var(--color-workflow-paper);
    outline: 2px solid transparent;
}

.app-discovery-search:focus-within {
    outline-color: var(--color-workflow-accent);
    outline-offset: 1px;
}

.app-discovery-search input {
    min-width: 0;
    height: 48px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    font: 700 var(--text-workflow-base) var(--font-body);
}

.app-discovery-search button {
    min-height: 40px;
    border: 0;
    background: transparent;
    color: var(--color-blue-dark);
    font: 800 var(--text-workflow-sm) var(--font-body);
    cursor: pointer;
}

.discovery-filter-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-workflow-sm);
    margin: var(--space-workflow-md) 0;
    flex-wrap: wrap;
}

.discovery-filter-row label {
    display: grid;
    gap: 0.25rem;
    color: var(--text-muted);
    font-size: var(--text-workflow-sm);
    font-weight: 800;
}

.discovery-filter-row select {
    min-height: 44px;
    padding: 0 var(--space-workflow-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-workflow-sm);
    outline: 2px solid transparent;
    background: var(--color-workflow-paper);
    color: var(--text-main);
    font: 700 var(--text-workflow-sm) var(--font-body);
}

.discovery-filter-row select:focus-visible {
    outline-color: var(--color-workflow-accent);
    outline-offset: 1px;
}

.discovery-reset-button {
    min-height: 44px;
    padding: 0 var(--space-workflow-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-workflow-sm);
    background: var(--color-workflow-soft);
    color: var(--text-main);
    font: 800 var(--text-workflow-sm) var(--font-body);
    cursor: pointer;
}

.discovery-reset-button:hover {
    background: var(--color-workflow-pinned);
}

.discovery-reset-button:active {
    transform: translateY(1px);
}

.discovery-shelf {
    margin-top: var(--space-workflow-lg);
}

.discovery-shelf__heading {
    align-items: center;
    margin-bottom: var(--space-workflow-sm);
}

.discovery-shelf__heading h3,
.all-apps-heading h3 {
    display: inline-flex;
    align-items: center;
    gap: var(--space-workflow-xs);
    margin: 0;
    font-style: normal;
}

.discovery-shelf__heading>span,
.all-apps-heading>span {
    color: var(--text-muted);
    font-size: var(--text-workflow-sm);
    font-weight: 700;
}

.discovery-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-workflow-sm);
}

.discovery-mini-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-workflow-sm);
    min-width: 0;
    min-height: 64px;
    padding: var(--space-workflow-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-workflow-sm);
    background: var(--color-workflow-paper);
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
    transition: transform var(--dur-workflow-micro) var(--ease-workflow-out), background-color var(--dur-workflow-micro) linear;
}

.discovery-mini-card:hover,
.discovery-mini-card.is-hover {
    background: var(--color-workflow-soft);
    transform: translateY(-2px);
}

.discovery-mini-card:active,
.discovery-mini-card.is-active {
    transform: translateY(1px);
}

.discovery-mini-card:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.discovery-mini-card__icon {
    display: inline-flex;
    color: var(--color-blue-dark);
}

.discovery-mini-card__copy {
    display: grid;
    min-width: 0;
}

.discovery-mini-card__copy strong,
.discovery-mini-card__copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discovery-mini-card__copy small {
    color: var(--text-muted);
}

.all-apps-heading {
    align-items: center;
    margin-top: var(--space-workflow-lg);
}

.menu-card-shell {
    position: relative;
    min-width: 0;
    will-change: transform;
}

.menu-card-shell[hidden] {
    display: none;
}

@keyframes appCardFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.94) translateY(12px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes appCardFadeOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.96) translateY(-10px);
    }
}

.menu-card-shell.app-card-enter {
    animation: appCardFadeIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.menu-card-shell.app-card-exit {
    animation: appCardFadeOut 0.2s cubic-bezier(0.4, 0, 1, 1) both;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .menu-card-shell {
        transition: none !important;
        will-change: auto !important;
    }

    .menu-card-shell.app-card-enter,
    .menu-card-shell.app-card-exit {
        animation: none !important;
    }
}

.menu-card-meta {
    display: flex;
    gap: var(--space-workflow-xs);
    justify-content: center;
    margin-top: auto;
    padding-top: var(--space-workflow-xs);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.menu-card-meta span+span::before {
    content: "·";
    margin-right: var(--space-workflow-xs);
}

/* Glow lives on the shell (painted before its .menu-card child in DOM/paint
   order) instead of on .menu-card itself, so the card's own opaque
   background fully covers it and only the blurred edge peeks out. Putting
   this on .menu-card::before instead paints it on top of the card's own
   background (still under z-index:-1, but above that background), which
   washes out the whole face on cards with a lot of open interior. */
.menu-card-shell.favourited::before {
    content: "";
    position: absolute;
    inset: -8px;
    z-index: -1;
    border-radius: 26px;
    background: var(--card-accent, var(--color-amber));
    opacity: 0.45;
    filter: blur(16px);
    pointer-events: none;
}

.app-discovery-empty {
    margin: var(--space-workflow-lg) 0;
    padding: var(--space-workflow-xl);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-workflow-md);
    text-align: center;
}

.app-discovery-empty h3 {
    margin: var(--space-workflow-sm) 0 var(--space-workflow-xs);
    font-style: normal;
}

.app-discovery-empty p {
    margin: 0 0 var(--space-workflow-md);
    color: var(--text-muted);
}

.routine-runner {
    position: fixed;
    z-index: 8500;
    right: var(--space-workflow-md);
    bottom: var(--space-workflow-md);
    left: var(--space-workflow-md);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-workflow-md);
    padding: var(--space-workflow-sm) var(--space-workflow-md);
    border: var(--rule-workflow) solid var(--border-color);
    border-radius: var(--radius-workflow-md);
    background: var(--color-workflow-paper);
    box-shadow: 0 8px 0 var(--border-color);
}

.routine-runner__identity {
    display: grid;
}

.routine-runner__eyebrow {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
}

.routine-runner__steps {
    display: flex;
    justify-content: center;
    gap: var(--space-workflow-xs);
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.routine-runner__steps li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    color: var(--text-muted);
}

.routine-runner__steps li>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-main);
    font-size: 0.75rem;
    font-weight: 900;
}

.routine-runner__steps li em {
    max-width: 8rem;
    overflow: hidden;
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.routine-runner__steps li.is-current {
    color: var(--text-main);
}

.routine-runner__steps li.is-current>span {
    background: var(--color-workflow-pinned);
}

.routine-runner__steps li.is-complete>span {
    background: var(--color-workflow-success);
}

.routine-runner__actions {
    display: flex;
    gap: var(--space-workflow-xs);
}

.routine-runner__actions .btn-ui {
    white-space: nowrap;
}

body.routine-running {
    padding-bottom: 6rem;
}

.workflow-modal[hidden],
.routine-runner[hidden] {
    display: none;
}

.workflow-modal {
    position: fixed;
    z-index: 9000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--space-workflow-md);
}

.workflow-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--color-workflow-overlay);
}

.workflow-modal__panel,
.command-palette__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 960px);
    max-height: calc(100 * var(--tp-dvh) - 2rem);
    overflow: auto;
    border: var(--rule-workflow) solid var(--border-color);
    border-radius: var(--radius-workflow-lg);
    background: var(--color-workflow-paper);
    box-shadow: 0 10px 0 var(--border-color);
}

.workflow-modal__header,
.workflow-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-workflow-md);
    padding: var(--space-workflow-md);
}

.workflow-modal__header {
    border-bottom: 1px solid var(--border-color);
}

.workflow-modal__header p,
.workflow-modal__header h2 {
    margin: 0;
}

.workflow-modal__header p {
    color: var(--text-muted);
    font-size: var(--text-workflow-sm);
    font-weight: 700;
}

.workflow-modal__header h2 {
    display: block;
    font-style: normal;
    padding: 0;
    border: 0;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.workflow-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-workflow-sm);
    background: var(--color-workflow-paper);
    color: var(--text-main);
    cursor: pointer;
}

.workflow-icon-button:hover {
    background: var(--color-workflow-danger-soft);
}

.workflow-icon-button:active {
    transform: translateY(1px);
}

.routine-editor-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.65fr) minmax(0, 1.35fr);
    min-height: 430px;
}

.routine-editor-list {
    padding: var(--space-workflow-md);
    border-right: 1px solid var(--border-color);
    background: var(--color-workflow-soft);
}

.routine-editor-list__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem;
    margin-bottom: var(--space-workflow-xs);
}

.routine-editor-list__row>button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-workflow-xs);
    min-height: 48px;
    padding: var(--space-workflow-xs);
    border: 1px solid transparent;
    border-radius: var(--radius-workflow-sm);
    background: transparent;
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
}

.routine-editor-list__row>button:hover,
.routine-editor-list__row>button.is-active {
    border-color: var(--border-color);
    background: var(--color-workflow-paper);
}

.routine-editor-list__row span {
    min-width: 0;
}

.routine-editor-list__row small {
    display: block;
    color: var(--text-muted);
}

.routine-editor-list__move {
    display: grid;
    gap: 0.2rem;
}

.routine-editor-list__move button,
.routine-draft-steps button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--color-workflow-paper);
    color: var(--text-main);
    cursor: pointer;
}

.routine-editor-list__move button:hover,
.routine-draft-steps button:hover {
    background: var(--color-workflow-pinned);
}

.routine-editor-list__move button:active,
.routine-draft-steps button:active {
    transform: translateY(1px);
}

.routine-editor-list__move button:disabled,
.routine-draft-steps button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.routine-editor-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-workflow-sm);
    min-width: 0;
    padding: var(--space-workflow-lg);
}

.routine-editor-form>label {
    font-weight: 800;
}

.routine-editor-form>input,
.routine-editor-form>select {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 var(--space-workflow-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-workflow-sm);
    outline: 2px solid transparent;
    background: var(--color-workflow-paper);
    color: var(--text-main);
    font: 700 var(--text-workflow-base) var(--font-body);
}

.routine-editor-form>input:focus-visible,
.routine-editor-form>select:focus-visible {
    outline-color: var(--color-workflow-accent);
    outline-offset: 1px;
}

.routine-editor-form__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-workflow-md);
    margin-top: var(--space-workflow-md);
}

.routine-editor-form__heading h3,
.routine-editor-form__heading p {
    margin: 0;
}

.routine-editor-form__heading p {
    color: var(--text-muted);
    font-size: var(--text-workflow-sm);
}

.routine-draft-steps {
    display: grid;
    gap: var(--space-workflow-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.routine-draft-steps li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-workflow-md);
    min-height: 48px;
    padding: var(--space-workflow-xs) var(--space-workflow-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-workflow-sm);
}

.routine-draft-steps li>span {
    display: flex;
    align-items: center;
    gap: var(--space-workflow-xs);
}

.routine-draft-steps__empty {
    color: var(--text-muted);
}

.workflow-form-status {
    min-height: 1lh;
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-workflow-sm);
    font-weight: 700;
}

.workflow-modal__footer {
    border-top: 1px solid var(--border-color);
    justify-content: flex-end;
    flex-wrap: wrap;
}

.command-palette {
    align-items: start;
    padding-top: min(14vh, 8rem);
}

.command-palette__panel {
    width: min(100%, 680px);
}

.command-palette__search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-workflow-sm);
    padding: var(--space-workflow-sm) var(--space-workflow-md);
    border-bottom: 1px solid var(--border-color);
}

.command-palette__search input {
    min-width: 0;
    height: 48px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    font: 700 var(--text-workflow-lg) var(--font-body);
}

.command-palette__results {
    display: grid;
    gap: 0.25rem;
    padding: var(--space-workflow-sm);
}

.command-palette__results button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-workflow-sm);
    min-height: 58px;
    padding: var(--space-workflow-sm);
    border: 1px solid transparent;
    border-radius: var(--radius-workflow-sm);
    background: transparent;
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
}

.command-palette__results button:hover,
.command-palette__results button.is-selected {
    border-color: var(--border-color);
    background: var(--color-workflow-soft);
}

.command-palette__results button:active {
    transform: translateY(1px);
}

.command-palette__results button span {
    display: grid;
    min-width: 0;
}

.command-palette__results button strong,
.command-palette__results button small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.command-palette__results button small,
.command-palette__results button em {
    color: var(--text-muted);
    font-size: var(--text-workflow-sm);
    font-style: normal;
}

.command-palette__empty,
.command-palette__hint {
    margin: 0;
    padding: var(--space-workflow-md);
    color: var(--text-muted);
    text-align: center;
    font-size: var(--text-workflow-sm);
}

.command-palette__hint {
    border-top: 1px solid var(--border-color);
    padding: var(--space-workflow-xs);
}

body.modal-open {
    overflow: hidden;
}

@media (max-width: 1100px) {

    .routine-launcher-grid,
    .discovery-mini-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .routine-runner {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .routine-runner__steps {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        overflow-x: auto;
    }
}

@media (max-width: 768px) {
    .routine-tray {
        top: auto;
        bottom: 1rem;
    }

    .routine-tray-toggle {
        min-height: 48px;
    }

    .routine-tray-toggle span {
        display: none;
    }

    .routine-tray-panel {
        top: auto;
        bottom: 0;
        max-height: min(calc(65 * var(--tp-vh)), 520px);
    }

    .routine-settings-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .routine-workbench,
    .app-discovery {
        padding: var(--space-workflow-md);
        border-radius: var(--radius-workflow-md);
    }

    .routine-workbench__heading,
    .app-discovery__heading,
    .routine-editor-form__heading {
        align-items: stretch;
        flex-direction: column;
    }

    .routine-manage-button,
    .command-palette-hint {
        align-self: flex-start;
    }

    .routine-editor-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .routine-editor-list {
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .routine-runner {
        right: var(--space-workflow-xs);
        bottom: var(--space-workflow-xs);
        left: var(--space-workflow-xs);
    }
}

@media (max-width: 600px) {

    .routine-launcher-grid,
    .discovery-mini-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .discovery-filter-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .discovery-filter-row label:last-of-type,
    .discovery-reset-button {
        grid-column: 1 / -1;
    }

    .routine-runner {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        max-height: calc(46 * var(--tp-vh));
        overflow: auto;
    }

    .routine-runner__steps {
        order: 2;
    }

    .routine-runner__actions {
        order: 3;
    }

    .routine-runner__actions .btn-ui {
        flex: 1;
    }

    body.routine-running {
        padding-bottom: 12rem;
    }

    .workflow-modal {
        padding: var(--space-workflow-xs);
    }

    .workflow-modal__footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .workflow-modal__footer .btn-ui {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 414px) {
    .routine-tray .routine-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .routine-tray .routine-card__start {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }

    .discovery-filter-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .discovery-filter-row label,
    .discovery-filter-row label:last-of-type,
    .discovery-reset-button {
        grid-column: 1;
    }

    .discovery-filter-row select {
        width: 100%;
    }

    .routine-card__start,
    .routine-manage-button,
    .command-palette-hint,
    .discovery-reset-button {
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {

    .discovery-mini-card,
    .workflow-icon-button,
    .routine-editor-list button,
    .routine-draft-steps button {
        transition-duration: 0ms;
    }
}

@media (max-width: 768px) {

    html,
    body {
        overflow-x: clip;
    }

    #rosterEditorView {
        min-width: 0;
        padding-inline: clamp(0.75rem, 4vw, 1.5rem);
    }

    #rosterEditorView>h2 {
        align-items: flex-start;
        gap: 0.5rem;
        overflow-wrap: anywhere;
    }

    #rosterEditorView .roster-editor-card,
    #rosterEditorView .accessibility-settings-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    #rosterEditorView #settingsPanelRoster>div:first-child>div {
        align-items: stretch !important;
        flex-wrap: wrap;
    }

    #rosterEditorView #editorClassSelect {
        flex-basis: 100% !important;
        min-width: 0;
    }

    #rosterEditorView #editorScheduleGrid {
        grid-template-columns: 1fr !important;
    }

    #rosterEditorView input,
    #rosterEditorView select,
    #rosterEditorView textarea {
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 414px) {
    #rosterEditorView {
        padding-inline: 0.65rem;
    }

    #rosterEditorView>h2 {
        font-size: clamp(1.45rem, 8vw, 2rem);
    }

    #rosterEditorView>.subtitle {
        font-size: 0.93rem;
        line-height: 1.45;
    }

    .settings-nav .level-pill {
        min-height: 44px;
        padding: 0.55rem 0.85rem;
        font-size: 0.86rem;
    }

    .app-customisation-card,
    #rosterEditorView .roster-editor-card,
    #rosterEditorView .accessibility-settings-card {
        padding: 1rem;
        border-radius: 17px;
    }

    .app-bulk-actions {
        grid-template-columns: 1fr;
    }

    .app-manager-action,
    .settings-save-bar .btn-ui,
    .settings-section-actions .btn-ui {
        min-height: 44px;
        white-space: nowrap;
    }

    .app-visibility-item {
        grid-template-columns: auto auto minmax(0, 1fr);
        padding: 0.6rem 0.55rem;
    }

    .dashboard-order-list {
        max-height: 300px;
    }

    .a11y-toggle-info {
        min-width: 0;
        margin-right: 0;
    }

    .settings-save-bar {
        margin-inline: -0.35rem;
    }
}

@media (max-width: 320px) {
    #rosterEditorView {
        padding-inline: 0.45rem;
    }

    .app-customisation-card,
    #rosterEditorView .roster-editor-card,
    #rosterEditorView .accessibility-settings-card {
        padding: 0.8rem;
    }

    .settings-nav {
        margin-inline: 0;
        width: 100%;
        padding-inline: 0;
    }

    .app-category-chip {
        min-height: 40px;
    }
}

/* Hallmark · component: child roster editor · genre: playful · theme: existing TutorPulse
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
 */
.roster-children-section {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.roster-children-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.roster-children-heading h4,
.roster-children-heading p {
    margin: 0;
}

.roster-children-heading h4 {
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-style: normal;
}

.roster-children-heading p {
    margin-top: 0.2rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 650;
}

#rosterEditorView .roster-add-child {
    min-height: 42px;
    padding: 0.55rem 0.8rem;
    border-width: 1px;
    border-radius: 9px;
    background: var(--panel-bg);
    box-shadow: none;
    white-space: nowrap;
    transform: none;
}

#rosterEditorView .roster-add-child:hover {
    background: color-mix(in oklch, var(--color-purple) 9%, var(--panel-bg));
}

#rosterEditorView .roster-add-child:focus-visible,
.roster-child-row input:focus-visible,
.roster-remove-child:focus-visible {
    outline: 3px solid var(--color-purple);
    outline-offset: 2px;
}

#rosterEditorView .roster-add-child:active,
.roster-remove-child:active {
    transform: translateY(1px);
}

.roster-children-list {
    display: grid;
    gap: 0.65rem;
}

.roster-children-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(160px, 0.8fr) minmax(110px, 0.65fr) 42px;
    gap: 0.65rem;
    margin-bottom: -0.5rem;
    padding-inline: 0.8rem;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.roster-children-columns small {
    font: inherit;
    font-weight: 650;
}

.roster-child-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(160px, 0.8fr) minmax(110px, 0.65fr) 42px;
    align-items: end;
    gap: 0.65rem;
    padding: 0.8rem;
    border: 1px solid color-mix(in oklch, var(--border-color) 18%, transparent);
    border-radius: 11px;
    background: color-mix(in oklch, var(--panel-bg) 96%, var(--color-purple));
}

.roster-child-row:hover {
    border-color: color-mix(in oklch, var(--color-purple) 38%, transparent);
}

.roster-child-field {
    display: grid;
    min-width: 0;
    gap: 0.35rem;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
}

#rosterEditorView .roster-child-row input,
#rosterEditorView .roster-child-row select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0.55rem 0.7rem;
    box-sizing: border-box;
    border: 1px solid color-mix(in oklch, var(--border-color) 32%, transparent);
    border-radius: 8px;
    background: var(--panel-bg);
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 0.94rem;
    font-weight: 650;
}

.roster-house-badge {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 0.7rem;
    border: 1px solid color-mix(in oklch, var(--border-color) 32%, transparent);
    border-radius: 8px;
    background: var(--panel-bg);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.roster-house-badge.has-house {
    border-color: var(--house-color);
    background: color-mix(in oklch, var(--house-color) 16%, var(--panel-bg));
    color: var(--text-main);
}

.roster-child-row input:invalid:not(:placeholder-shown) {
    border-color: var(--color-red);
}

.roster-remove-child {
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 1px solid color-mix(in oklch, var(--color-red) 40%, transparent);
    border-radius: 8px;
    background: var(--panel-bg);
    color: var(--color-red-dark);
    cursor: pointer;
}

.roster-remove-child:hover {
    background: color-mix(in oklch, var(--color-red) 10%, var(--panel-bg));
}

.roster-remove-child svg {
    width: 17px;
    height: 17px;
}

.roster-add-child:disabled,
.roster-child-row input:disabled,
.roster-remove-child:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.roster-children-section:has(+ .settings-save-bar .settings-save-status[data-state="saving"]) {
    cursor: progress;
}

.roster-children-section:has(+ .settings-save-bar .settings-save-status[data-state="saved"]) .roster-child-row {
    border-color: color-mix(in oklch, var(--color-green) 45%, transparent);
}

@media (max-width: 600px) {
    .roster-children-heading {
        align-items: stretch;
        flex-direction: column;
    }

    #rosterEditorView .roster-add-child {
        align-self: flex-start;
    }

    .roster-child-row {
        grid-template-columns: minmax(0, 1fr) 42px;
    }

    .roster-children-columns {
        display: none;
    }

    .roster-child-name,
    .roster-child-birthday,
    .roster-child-house {
        grid-column: 1;
    }

    .roster-remove-child {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: center;
    }
}

/* Hallmark · redesign: classic account workspace · genre: modern-minimal
 * structure: persistent section rail + focused content pane · existing TutorPulse tokens
 */
#rosterEditorView {
    max-width: 1180px;
    margin-inline: auto;
}

#rosterEditorView>h2 {
    margin-bottom: 0.35rem;
    color: var(--text-main);
    font-size: clamp(1.8rem, 3vw, 2.35rem);
}

#rosterEditorView>.subtitle {
    max-width: 68ch;
    margin: 0 0 1.75rem;
    color: var(--text-muted);
    font-size: 0.98rem;
}

#rosterEditorView .screen-fullscreen-btn {
    display: none;
}

.settings-account-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
    gap: 2rem;
}

.settings-sidebar {
    position: sticky;
    top: 1rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid color-mix(in oklch, var(--border-color) 18%, transparent);
    border-radius: 16px;
    background: var(--panel-bg);
    box-shadow: 0 1px 2px color-mix(in oklch, var(--border-color) 10%, transparent);
}

.settings-sidebar-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0.35rem 1rem;
    border-bottom: 1px solid color-mix(in oklch, var(--border-color) 15%, transparent);
}

.settings-sidebar-heading>div {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
}

.settings-sidebar-heading strong {
    color: var(--text-main);
    font-size: 1rem;
    line-height: 1.2;
}

.settings-sidebar-heading span {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.35;
}

.settings-sidebar-mark {
    display: grid;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in oklch, var(--color-purple) 14%, var(--panel-bg));
    color: var(--color-purple-dark) !important;
}

.settings-sidebar-mark svg {
    width: 18px;
    height: 18px;
}

#rosterEditorView .settings-nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    margin: 0;
    padding: 0.75rem 0 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.settings-nav-group-label {
    margin: 0.8rem 0.65rem 0.3rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.settings-nav-group-label:first-child {
    margin-top: 0;
}

#rosterEditorView .settings-nav .level-pill,
#rosterEditorView .settings-nav .level-pill:nth-child(n + 5) {
    display: flex;
    grid-column: auto;
    justify-content: flex-start;
    width: 100%;
    min-height: 42px;
    padding: 0.55rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1;
    text-align: left;
    transform: none;
}

#rosterEditorView .settings-nav .level-pill:hover {
    top: 0;
    background: color-mix(in oklch, var(--border-color) 5%, transparent);
    box-shadow: none;
    color: var(--text-main);
    transform: none;
}

#rosterEditorView .settings-nav .level-pill:active {
    background: color-mix(in oklch, var(--border-color) 9%, transparent);
    box-shadow: none;
    transform: translateY(1px);
}

#rosterEditorView .settings-nav .level-pill.active,
#rosterEditorView .settings-nav .level-pill.active:hover {
    border-color: color-mix(in oklch, var(--color-purple) 34%, transparent);
    background: color-mix(in oklch, var(--color-purple) 12%, var(--panel-bg));
    box-shadow: none;
    color: var(--text-main);
    transform: none;
}

#rosterEditorView .settings-nav .level-pill svg {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 17px !important;
    height: 17px !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: currentColor;
    stroke-width: 2.2;
}

#rosterEditorView .settings-nav .level-pill.active svg {
    color: var(--color-purple-dark);
}

#rosterEditorView .settings-nav .level-pill:focus-visible {
    outline: 3px solid var(--color-purple);
    outline-offset: 2px;
}

.settings-workspace {
    min-width: 0;
}

#rosterEditorView .settings-workspace>.roster-editor-card,
#rosterEditorView .settings-workspace>.accessibility-settings-card {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0 !important;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    box-sizing: border-box;
    border: 1px solid color-mix(in oklch, var(--border-color) 18%, transparent);
    border-radius: 16px;
    background: var(--panel-bg);
    box-shadow: 0 1px 3px color-mix(in oklch, var(--border-color) 10%, transparent);
}

#rosterEditorView .settings-workspace>div>h3:first-child {
    margin: 0 0 0.35rem;
    color: var(--text-main);
    font-size: 1.35rem;
}

#rosterEditorView .settings-workspace>div>h3:first-child svg {
    width: 1.15rem;
    height: 1.15rem;
}

#settingsPanelAccount>div[style*="flex-direction:column"] {
    max-width: 560px;
}

#settingsPanelAccount>div[style*="flex-direction:column"]>label {
    color: var(--text-main) !important;
    font-size: 0.88rem !important;
    font-weight: 750 !important;
}

#settingsPanelAccount>div[style*="flex-direction:column"]>input {
    min-height: 44px;
    border-width: 1px !important;
    border-radius: 9px !important;
    font-size: 0.96rem !important;
    font-weight: 650 !important;
}

#rosterEditorView .settings-save-bar {
    border-width: 1px;
    border-radius: 10px;
    box-shadow: none;
}

@media (max-width: 900px) {
    .settings-account-shell {
        display: block;
    }

    .settings-sidebar {
        position: static;
        margin-bottom: 1rem;
        padding: 0.75rem;
    }

    .settings-sidebar-heading {
        padding-bottom: 0.75rem;
    }

    #rosterEditorView .settings-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .settings-nav-group-label {
        grid-column: 1 / -1;
        margin-top: 0.6rem;
    }
}

@media (max-width: 600px) {
    #rosterEditorView .settings-nav {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .ooo-grid {
        grid-template-columns: 1fr;
    }

    .mood-layout {
        grid-template-columns: 1fr;
    }

    .mood-layout-graph .mood-graph-col {
        height: auto;
    }

    .mood-graph-track {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        min-height: auto;
    }

    .mood-graph-col {
        height: auto;
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .mood-graph-bar {
        width: 0%;
        height: 25px !important;
        border-radius: 0 12px 12px 0;
        border-bottom: 3px solid var(--border-color);
        border-left: none;
    }

    .mood-graph-count {
        right: -30px;
        top: 2px;
    }

    .mood-name-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 0.75rem;
        padding: 1rem;
        max-height: 260px;
    }

    .mood-name-btn {
        font-size: 1rem;
        padding: 0.7rem 0.6rem;
    }

    .mood-cards-container {
        gap: 0.75rem;
    }

    .mood-card-item {
        min-width: 100px;
        padding: 1rem;
    }

    .mood-emoji svg {
        width: 2.4rem;
        height: 2.4rem;
    }

    .mood-log-card {
        padding: 1.25rem;
        width: 96%;
    }

    .mood-log-table th,
    .mood-log-table td {
        padding: 0.5rem 0.35rem;
        font-size: 0.85rem;
    }

    .wellbeing-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wellbeing-signal {
        grid-template-columns: 1fr;
    }

    .wellbeing-signal select {
        width: 100%;
    }

    .wellbeing-trend {
        grid-template-columns: repeat(5, minmax(38px, 1fr));
    }

    .school-wellbeing-row,
    .wellbeing-retention-control {
        grid-template-columns: 1fr;
    }

    .school-wellbeing-metrics {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {

    .mood-card-item,
    .mood-name-btn,
    .mood-graph-bar,
    .mood-toast {
        transition-duration: 0.01ms;
    }

    .mood-log-overlay,
    .mood-log-card {
        animation: none;
    }
}

/* --- STARTUP FORM SELECTION MODAL --- */
.startup-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: oklch(22% 0.012 250 / 0.4);
    backdrop-filter: blur(12px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    overflow-y: auto;
    padding: 2rem 0;
}

.startup-modal-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.startup-modal-card {
    background: var(--panel-bg);
    border: 5px solid var(--border-color);
    box-shadow: 0 14px 0 var(--border-color);
    border-radius: 24px;
    padding: 3rem;
    max-width: 1050px;
    width: 90%;
    text-align: center;
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin: auto;
}

.startup-modal-overlay.hidden .startup-modal-card {
    transform: scale(0.9);
}

.startup-modal-card h2 {
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 0.8rem;
}

.startup-modal-card p {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.startup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 900px) {
    .startup-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .startup-grid {
        grid-template-columns: 1fr;
    }
}

.startup-btn {
    border: 4px solid var(--border-color);
    border-radius: 18px;
    padding: 1.5rem;
    background: var(--panel-bg);
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    transition: all 0.2s ease;
    box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 1);
}

.startup-btn:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0px 0px rgba(0, 0, 0, 1);
}

.startup-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
}

.startup-form-badge {
    font-size: 1.8rem;
    font-weight: 900;
    padding: 0.3rem 0.8rem;
    border: 3px solid var(--border-color);
    border-radius: 10px;
    display: inline-block;
    align-self: flex-start;
    color: white;
}

.startup-tutor {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-main);
}

/* Accents per Form */
.badge-3g {
    background: var(--color-amber);
}

.card-3g:hover {
    background: #fffbeb;
}

.badge-4g {
    background: var(--color-pink);
}

.card-4g:hover {
    background: #fdf2f8;
}

.badge-5r {
    background: var(--color-red);
}

.card-5r:hover {
    background: #fef2f2;
}

.badge-5g {
    background: var(--color-green);
}

.card-5g:hover {
    background: #ecfdf5;
}

.badge-6r {
    background: var(--color-blue);
}

.card-6r:hover {
    background: #eff6ff;
}

.badge-6g {
    background: var(--color-purple);
}

.card-6g:hover {
    background: #faf5ff;
}

.startup-footer {
    margin-top: 1.5rem;
    border-top: 3px dashed #cbd5e1;
    padding-top: 1.5rem;
    font-size: 1.05rem;
    color: var(--text-muted);
}

/* --- MEMORY MATCH-UP STYLES --- */
.memory-match-controls {
    margin-bottom: 0.75rem !important;
}

.memory-match-stats {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 3px solid var(--color-pink);
    border-radius: 12px;
    background: var(--panel-bg);
    box-shadow: 0 3px 0 var(--color-pink-dark);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
}

.memory-match-stats>span {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.45rem 0.7rem;
    white-space: nowrap;
}

.memory-match-stats>span+span {
    border-left: 2px solid color-mix(in oklch, var(--color-pink) 40%, transparent);
}

.memory-match-stats strong {
    color: var(--text-main);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.memory-grid-wrapper {
    margin-top: 0.75rem !important;
}

.memory-cards-grid {
    width: min(100%, clamp(340px, calc(var(--presentation-height, calc(100 * var(--tp-vh))) - 300px), 560px));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.45rem, 1vw, 0.75rem);
    padding: clamp(0.7rem, 1.4vw, 1.1rem);
    border: 4px solid var(--border-color);
    border-radius: 24px;
    background:
        linear-gradient(135deg,
            color-mix(in oklch, var(--color-green) 12%, var(--panel-bg)),
            color-mix(in oklch, var(--color-amber) 8%, var(--panel-bg)));
    box-shadow: 0 9px 0 var(--border-color);
}

@media (max-width: 500px) {
    .memory-cards-grid {
        width: 100%;
        gap: 0.4rem;
        padding: 0.55rem;
        border-radius: 18px;
    }
}

.memory-card {
    min-width: 0;
    aspect-ratio: 1;
    perspective: 900px;
    cursor: pointer;
    user-select: none;
    border: 0;
    padding: 0;
    background: transparent;
    font-family: inherit;
}

.memory-card:hover:not(:disabled) .memory-card-inner {
    transform: translateY(-3px);
    box-shadow: 0 8px 0 var(--border-color);
}

.memory-card:active:not(:disabled) .memory-card-inner {
    transform: translateY(3px);
    box-shadow: 0 2px 0 var(--border-color);
}

.memory-card:focus-visible {
    outline: 4px solid var(--color-blue);
    outline-offset: 4px;
    border-radius: 14px;
}

.memory-card:disabled {
    cursor: default;
    opacity: 1;
}

.memory-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition:
        transform 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.2),
        box-shadow var(--dur-short) var(--ease-out),
        border-color var(--dur-short) linear;
    transform-style: preserve-3d;
    border: 3px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 6px 0 var(--border-color);
}

.memory-card.flipped .memory-card-inner {
    transform: rotateY(180deg);
}

.memory-card.flipped:hover:not(:disabled) .memory-card-inner {
    transform: rotateY(180deg) translateY(-3px);
}

.memory-card-front,
.memory-card-back {
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.memory-card-front {
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.45rem;
    background:
        linear-gradient(145deg,
            color-mix(in oklch, var(--color-green) 76%, var(--panel-bg)),
            color-mix(in oklch, var(--color-amber) 55%, var(--panel-bg)));
    color: var(--text-main);
}

.memory-card-number {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 3.5vw, 2.4rem);
    font-weight: 700;
    line-height: 1;
}

.memory-card-symbol {
    color: color-mix(in oklch, var(--text-main) 58%, transparent);
    font-size: clamp(0.7rem, 1.4vw, 1rem);
}

.memory-card-back {
    padding: clamp(0.4rem, 1vw, 0.75rem);
    background: var(--panel-bg);
    color: var(--text-main);
    transform: rotateY(180deg);
    line-height: 1.05;
}

.memory-card-back--symbol {
    font-size: clamp(2rem, 5.5vw, 3.8rem);
}

.memory-card-back--short {
    font-size: clamp(1.35rem, 3.4vw, 2.4rem);
}

.memory-card-back--long {
    font-size: clamp(0.78rem, 1.6vw, 1.2rem);
}

/* Match highlight */
.memory-card.matched .memory-card-inner {
    border-color: var(--color-green-dark);
    box-shadow: 0 4px 0 var(--color-green-dark);
    animation: memory-match-pop 0.42s var(--ease-out);
}

.memory-card.matched .memory-card-back {
    background: color-mix(in oklch, var(--color-green) 22%, var(--panel-bg));
    color: var(--color-green-dark);
}

.memory-card.matched .memory-card-back::after {
    content: "✓";
    position: absolute;
    top: 0.35rem;
    right: 0.4rem;
    width: 1.35rem;
    height: 1.35rem;
    display: grid;
    place-items: center;
    border: 2px solid var(--color-green-dark);
    border-radius: 50%;
    background: var(--panel-bg);
    font-size: 0.8rem;
    line-height: 1;
}

.memory-card.is-mismatch .memory-card-inner {
    border-color: var(--color-red);
    animation: memory-mismatch-nudge 0.3s ease-in-out;
}

@keyframes memory-match-pop {
    50% {
        transform: rotateY(180deg) scale(1.08);
    }
}

@keyframes memory-mismatch-nudge {
    25% {
        transform: rotateY(180deg) translateX(-4px);
    }

    75% {
        transform: rotateY(180deg) translateX(4px);
    }
}

/* --- TEAM DUEL QUIZ STYLES --- */
@media (max-width: 800px) {
    .team-duel-layout {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .team-buzzer {
        padding: 1.2rem 1rem !important;
    }
}

.team-buzzer {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.team-buzzer:hover {
    transform: translateY(-2px);
}

.team-buzzer:active {
    transform: translateY(4px);
}

.team-buzzer:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none !important;
}

.team-buzzer.buzzed-in {
    animation: flashBuzzer 0.4s infinite alternate;
}

@keyframes flashBuzzer {
    0% {
        filter: brightness(1);
        transform: scale(1);
    }

    100% {
        filter: brightness(1.25);
        transform: scale(1.05);
    }
}

/* TIMER WIDGET INTERACTIVE FEEDBACK */
.timer-widget {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.timer-widget.running {
    border-color: var(--color-green) !important;
    box-shadow: 0 4px 0 var(--color-green-dark) !important;
}

.timer-widget.warning {
    border-color: var(--color-red) !important;
    box-shadow: 0 4px 0 var(--color-red-dark) !important;
    animation: timerPulseWarning 0.8s infinite alternate ease-in-out;
}

@keyframes timerPulseWarning {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.03);
    }
}

/* MENU FILTER BAR STYLES */
.menu-filter-bar {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0 0 1.5rem;
}

@media (min-width: 900px) {
    #homeMenuView .menu-filter-bar {
        position: relative;
        z-index: 2;
        margin-top: -4rem;
        margin-bottom: 1.15rem;
        justify-content: center;
    }

    #homeMenuView .filter-pill {
        background: var(--panel-bg);
    }

    #homeMenuView .filter-pill.active {
        background: var(--border-color);
    }
}

.apps-eyebrow {
    color: var(--color-purple) !important;
    font-size: 0.78rem;
    font-weight: 900 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.filter-pill {
    background: var(--panel-bg);
    border: 3px solid var(--border-color);
    border-radius: 12px;
    padding: 0.4rem 1rem;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 0 var(--border-color);
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    user-select: none;
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: inherit;
}

.filter-pill svg {
    width: 1.05rem;
    height: 1.05rem;
    stroke-width: 2.25;
}

.filter-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--border-color);
}

.filter-pill:active,
.filter-pill.active {
    transform: translateY(4px);
    box-shadow: 0 0px 0 var(--border-color);
    background: var(--border-color);
    color: white;
}

/* Card interaction transitions */
.menu-card {
    transition:
        transform var(--dur-short) var(--ease-out),
        box-shadow 0.15s ease;
}

.menu-card[hidden] {
    display: none;
}

.menu-card {
    width: 100%;
    font-family: inherit;
}

.menu-card:focus-visible,
.filter-pill:focus-visible,
.screen-back-btn:focus-visible,
.app-help-btn:focus-visible,
.app-guide-close:focus-visible {
    outline: 4px solid var(--color-blue);
    outline-offset: 4px;
}

.app-help-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    padding: 0.4rem 0.8rem;
    border: 3px solid var(--app-theme-color, var(--border-color));
    border-radius: 12px;
    background: var(--panel-bg);
    color: var(--text-main);
    box-shadow: 0 4px 0 var(--app-theme-color, var(--border-color));
    font: 800 0.9rem var(--font-family);
    cursor: pointer;
}

.app-help-btn svg {
    width: 1.1rem !important;
    height: 1.1rem !important;
}

.app-guide-modal {
    padding: 1rem;
}

.app-guide-content {
    max-width: 760px;
    text-align: left;
}

.app-guide-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.app-guide-heading h2 {
    margin: 0.2rem 0 0;
    border: 0;
    font-size: 2rem;
}

.app-guide-close {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-bg);
    box-shadow: 0 3px 0 var(--border-color);
    cursor: pointer;
}

.app-guide-summary {
    color: var(--text-muted);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.5;
}

.app-guide-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.app-guide-facts div,
.app-guide-access {
    padding: 0.9rem;
    border: 2px solid var(--border-color);
    border-radius: 14px;
    background: color-mix(in oklch, var(--color-blue) 6%, var(--panel-bg));
}

.app-guide-facts dt {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.app-guide-facts dd {
    margin: 0.35rem 0 0;
    font-weight: 800;
    line-height: 1.35;
}

.app-guide-content h3 {
    font-size: 1.05rem;
    margin: 1.2rem 0 0.5rem;
}

.app-guide-content ol {
    margin: 0;
    padding-left: 1.5rem;
    line-height: 1.55;
    font-weight: 650;
}

.app-guide-content li+li {
    margin-top: 0.4rem;
}

.app-guide-access {
    margin-top: 1.2rem;
    background: color-mix(in oklch, var(--color-green) 9%, var(--panel-bg));
}

.app-guide-access h3 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0;
}

.app-guide-access p {
    margin-bottom: 0;
    line-height: 1.5;
}

.app-guide-done {
    width: 100%;
    justify-content: center;
    margin-top: 1.2rem;
}

/* --- Dashboard "Edit / + Add Apps" bar & modal --- */
.dashboard-add-apps-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0.5rem 0 1rem;
    padding: 0.7rem 1rem;
    background: var(--panel-bg);
    border: 3px dashed var(--border-color);
    border-radius: 16px;
    color: var(--text-main);
    font: 800 0.95rem var(--font-family);
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.15s ease;
}

.dashboard-add-apps-bar svg {
    width: 1.15rem;
    height: 1.15rem;
    stroke-width: 2.5;
}

.dashboard-add-apps-bar:hover {
    background: var(--bg-main);
    transform: translateY(-2px);
}

.dashboard-add-apps-bar:active {
    transform: translateY(0);
}

.add-apps-modal {
    padding: 1rem;
}

.add-apps-content {
    max-width: 1140px;
    width: 94%;
    text-align: left;
}

.add-apps-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.add-apps-heading h2 {
    margin: 0.2rem 0 0;
    border: 0;
    font-size: 2rem;
}

.add-apps-subtitle {
    color: var(--text-muted);
    font-weight: 700;
    margin: 0.35rem 0 0;
}

.add-apps-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.1rem 0 0.5rem;
    flex-wrap: wrap;
}

.add-apps-toolbar .app-search-field {
    flex: 1 1 220px;
}

.add-apps-reset {
    flex: 0 0 auto;
}

.add-apps-categories {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.add-apps-category-group[hidden] {
    display: none;
}

.add-apps-category-title {
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-purple);
    margin: 0 0 0.6rem;
}

.add-apps-category-rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.6rem;
}

.add-apps-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.65rem 0.8rem;
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 14px;
}

.add-apps-row .app-favourite-toggle {
    grid-column: auto;
}

.add-apps-row[hidden] {
    display: none;
}

.add-apps-row-icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--bg-main);
    color: var(--text-main);
}

.add-apps-row-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.add-apps-row-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.15rem;
}

.add-apps-row-title {
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-apps-row-desc {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-apps-lock-tag {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: #fee2e2;
    color: #ef4444;
}

.add-apps-lock-tag.locked {
    background: #ffedd5;
    color: #f97316;
}

@media (max-width: 640px) {
    .add-apps-category-rows {
        grid-template-columns: 1fr;
    }

    .add-apps-content {
        padding: 1.5rem;
    }
}

body.modal-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .utility-tray {
        right: auto;
        left: 0;
        width: 48px;
    }

    .utility-tray-panel.is-expanded {
        max-height: min(700px, calc(100 * var(--tp-vh) - 7rem));
        overflow-y: auto;
    }

    .header-bottom,
    .header-widget,
    .soundscape-widget {
        align-items: stretch;
        flex-direction: column;
    }

    .header-widget {
        width: 100%;
        box-sizing: border-box;
    }

    .fact-fiction-stage {
        padding: 1rem;
    }

    .fact-fiction-statement {
        min-height: 120px;
        padding: 1rem 0.5rem;
    }

    .fact-fiction-choices {
        grid-template-columns: minmax(0, 1fr);
    }

    .fact-fiction-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .app-guide-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-guide-content {
        padding: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* FULLSCREEN TIMER OVERLAY (LIGHT THEME MATCHING PORTAL) */
.fullscreen-timer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(240, 244, 248, 0.88);
    /* Matches var(--bg-main) with opacity */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9990;
    /* High index, but below customAlertModal (10000) so alerts can pop over it */
    backdrop-filter: blur(10px);
    animation: fullscreenFadeIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: var(--text-main);
    font-family: var(--font-family);
}

@keyframes fullscreenFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fullscreen-timer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 900px;
    padding: 3.5rem 2rem;
    background: #ffffff;
    border: 6px solid var(--border-color);
    border-radius: 36px;
    box-shadow: 0 20px 0 var(--border-color);
    position: relative;
    text-align: center;
    animation: popScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fullscreen-timer-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: #ffffff;
    border: 3px solid var(--border-color);
    color: var(--text-main);
    font-size: 1.1rem;
    font-weight: 800;
    padding: 0.6rem 1.4rem;
    border-radius: 16px;
    cursor: pointer;
    font-family: var(--font-family);
    transition: all 0.15s;
    box-shadow: 0 5px 0 var(--border-color);
}

.fullscreen-timer-close:hover {
    background: var(--color-red);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 7px 0 var(--border-color);
}

.fullscreen-timer-close:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--border-color);
}

.fullscreen-timer-header {
    margin-bottom: 1.5rem;
}

.fullscreen-timer-badge {
    background: var(--color-blue);
    color: white;
    padding: 0.6rem 2rem;
    border-radius: 20px;
    font-weight: 900;
    font-size: 1.3rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 3px solid var(--border-color);
    box-shadow: 0 5px 0 var(--border-color);
}

.fullscreen-timer-display {
    font-size: 11rem;
    font-weight: 900;
    font-family: monospace;
    line-height: 1.1;
    margin: 2rem 0;
    letter-spacing: -2px;
    user-select: none;
    background: #ffffff;
    border: 6px solid var(--border-color);
    border-radius: 24px;
    padding: 1.5rem 5rem;
    min-width: 460px;
    box-shadow: 0 10px 0 var(--border-color);
    color: var(--text-main);
    transition: all 0.3s ease;
}

/* Glowing/color changes matching widget visual states */
.fullscreen-timer-display.running {
    border-color: var(--color-green);
    color: var(--color-green);
    box-shadow: 0 10px 0 var(--color-green-dark);
}

.fullscreen-timer-display.warning {
    border-color: var(--color-red);
    color: var(--color-red);
    box-shadow: 0 10px 0 var(--color-red-dark);
    animation: fullscreenPulseWarning 0.8s infinite alternate ease-in-out;
}

.fullscreen-timer-controls {
    display: flex;
    gap: 1.5rem;
    margin-top: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Reusing portal button style classes scaled up */
.fullscreen-btn {
    font-family: var(--font-family);
    font-size: 1.3rem;
    font-weight: 800;
    padding: 0.9rem 2.2rem;
    border-radius: 20px;
    border: 3px solid var(--border-color);
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 6px 0 var(--border-color);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
}

.fullscreen-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 var(--border-color);
}

.fullscreen-btn:active {
    transform: translateY(5px);
    box-shadow: 0 1px 0 var(--border-color);
}

.fullscreen-btn.btn-green {
    background: var(--color-green);
}

.fullscreen-btn.btn-amber {
    background: var(--color-amber);
}

.fullscreen-btn.btn-red {
    background: var(--color-red);
}

.fullscreen-timer-adjusters {
    display: flex;
    gap: 1rem;
    margin-top: 2.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.fullscreen-adjust-btn {
    background: #ffffff;
    border: 3px solid var(--border-color);
    color: var(--text-main);
    font-weight: 800;
    font-size: 1.1rem;
    padding: 0.6rem 1.4rem;
    border-radius: 16px;
    cursor: pointer;
    font-family: var(--font-family);
    transition: all 0.15s ease;
    box-shadow: 0 5px 0 var(--border-color);
}

.fullscreen-adjust-btn:hover {
    background: #eff6ff;
    transform: translateY(-2px);
    box-shadow: 0 7px 0 var(--border-color);
}

.fullscreen-adjust-btn:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--border-color);
}

@media (max-width: 600px) {
    .fullscreen-timer-content {
        padding: 2rem 1rem;
        width: 95%;
    }

    .fullscreen-timer-display {
        font-size: 5.5rem;
        min-width: unset;
        width: 100%;
        padding: 1rem 1.5rem;
    }

    .fullscreen-btn {
        font-size: 1.1rem;
        padding: 0.6rem 1.2rem;
    }

    .fullscreen-timer-close {
        position: static;
        margin-bottom: 1rem;
    }
}

.bookshelf-container {
    background: #fcfbfa;
    border: 4px solid var(--border-color);
    border-radius: 24px;
    padding: 1.5rem 1.2rem 1rem 1.2rem;
    box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.06), 4px 4px 0 var(--border-color);
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* vertical space between shelves */
    /* As many shelves as the class needs; the cabinet grows and the page
       (or the fullscreen deck) scrolls — no scroll box inside a scroll box */
    overflow-x: clip;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.bookshelf-row {
    position: relative;
    min-height: 210px;
    /* consistent shelf height to fit larger books */
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Staggered shelf entrance, only when the view opens or the layout changes */
.bookshelf-container.bookshelf-animate .bookshelf-row {
    animation: bookshelfShelfIn 0.35s ease both;
    animation-delay: calc(var(--shelf-index, 0) * 45ms);
}

@keyframes bookshelfShelfIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bookshelf-container.bookshelf-animate .bookshelf-row {
        animation: none;
    }
}

/* Books-per-shelf picker in the bookshelf toolbar */
.bookshelf-layout-control {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 34px;
    padding: 0 0.3rem 0 0.6rem;
    border: 3px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
    box-sizing: border-box;
    flex-shrink: 0;
    cursor: pointer;
}

.bookshelf-layout-control svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.bookshelf-layout-control select {
    border: none;
    background: transparent;
    font-family: inherit;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text-main);
    cursor: pointer;
    padding: 0.2rem;
    outline: none;
}

.bookshelf-layout-control:focus-within {
    box-shadow: 0 0 0 3px var(--color-amber);
}

.bookshelf-tidy-btn {
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #fff;
    box-shadow: 0 3px 0 var(--border-color);
    transform: none;
    flex-shrink: 0;
}

.bookshelf-tidy-btn svg {
    width: 16px;
    height: 16px;
}

/* Shelf under the pointer while dragging a book: drop on empty space to add it to the end */
.bookshelf-row.drag-target .bookshelf-books-container {
    background: rgba(243, 232, 255, 0.55);
    border-radius: 14px 14px 0 0;
}

.bookshelf-row.drag-target .bookshelf-books-container::after {
    background: var(--color-pink);
}

.bookshelf-books-container {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    /* space for shelf thickness and shadow */
    width: 100%;
    box-sizing: border-box;
    min-height: 210px;
    /* Keeps empty shelf at the bottom of the row */
}

/* Flat Neo-Brutalist shelf styling */
.bookshelf-books-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: #f3e8ff;
    /* Soft pastel purple */
    border: 3px solid var(--border-color);
    box-shadow: 0 4px 0 var(--border-color);
    z-index: 1;
}

.audiobook-book-card {
    position: relative;
    width: 130px;
    aspect-ratio: 2/3;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.15s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.15s ease, border-color 0.15s ease;
    border-radius: 12px;
    box-shadow: 4px 4px 0 var(--border-color);
    background: #fff;
    border: 3px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-sizing: border-box;
}

.audiobook-book-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0 var(--border-color);
    z-index: 10;
}

.audiobook-book-card:active {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--border-color);
}

.audiobook-book-card.active {
    border-color: var(--color-pink);
    box-shadow: 4px 4px 0 var(--color-pink);
}

/* --- Drag-to-reorder books on the shelf --- */
.audiobook-book-card {
    cursor: grab;
}

.audiobook-book-card.dragging {
    opacity: 0.4;
    cursor: grabbing;
    transform: rotate(-3deg) scale(0.96);
}

.audiobook-drag-handle {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 6;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--border-color);
    color: var(--border-color);
    font-size: 0.9rem;
    line-height: 1;
    letter-spacing: -1px;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.audiobook-book-card:hover .audiobook-drag-handle {
    opacity: 1;
}

/* Insertion indicator while dragging over a neighbouring book */
.audiobook-book-card.drag-over-before {
    box-shadow: -10px 0 0 -4px var(--color-pink), 4px 4px 0 var(--border-color);
}

.audiobook-book-card.drag-over-after {
    box-shadow: 10px 0 0 -4px var(--color-pink), 4px 4px 0 var(--border-color);
}

/* spine shading overlay on each book */
.audiobook-book-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 12px;
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.1) 40%,
            rgba(255, 255, 255, 0.15) 75%,
            rgba(0, 0, 0, 0.3) 100%);
    z-index: 4;
    pointer-events: none;
}

/* Hardcover bind indent crease line */
.audiobook-book-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    bottom: 0;
    width: 2px;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 1px 0 1px rgba(255, 255, 255, 0.15);
    z-index: 4;
    pointer-events: none;
}

.audiobook-cover-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.audiobook-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.audiobook-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0.5rem;
    box-sizing: border-box;
    font-weight: 800;
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.2;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}

.audiobook-card-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 0.35rem;
    z-index: 5;
    opacity: 0.85;
    /* always see actions on touch board without hover! */
    transition: opacity 0.2s ease;
}

.audiobook-book-card:hover .audiobook-card-actions {
    opacity: 1;
}

.audiobook-action-badge {
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 0 var(--border-color);
    cursor: pointer;
    font-size: 0.9rem;
    transition: transform 0.1s, background 0.1s;
}

.audiobook-action-badge:hover {
    transform: scale(1.1);
    background: #f1f5f9;
}

.audiobook-action-badge:active {
    transform: scale(0.95);
}

/* Custom CSS Tooltip on Bookshelf Hover */
.audiobook-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: var(--border-color);
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    width: 140px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 100;
    line-height: 1.3;
}

.audiobook-book-card:hover .audiobook-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px);
}

.audiobook-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--border-color);
}

/* --- Redesigned listening player: cover-led centred column + custom transport --- */
/* --ab-accent / --ab-tint / --ab-soft / --ab-shadow are set at runtime from the
   cover art (themeAudiobookModalFromCover); every rule falls back to the default
   palette when they are absent. */
.listening-modal-content.audiobook-player-modal {
    max-width: 600px;
    background:
        radial-gradient(130% 68% at 50% 0%, var(--ab-tint, oklch(97% 0.03 250 / 0.55)) 0%, transparent 62%),
        var(--panel-bg);
    border-color: var(--ab-shadow, var(--border-color));
    box-shadow: 10px 10px 0 var(--ab-shadow, var(--border-color));
    transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}

.audiobook-player-modal .audiobook-stage-cover {
    box-shadow: 6px 6px 0 var(--ab-shadow, var(--border-color));
    transition: box-shadow 0.45s ease;
}

.audiobook-player-modal .audiobook-icon-btn {
    box-shadow: 0 3px 0 var(--ab-shadow, var(--border-color));
}

.audiobook-player-modal .audiobook-transport {
    border-color: var(--ab-accent, var(--border-color));
    background: linear-gradient(180deg, #ffffff 0%, var(--ab-soft, #fbfaf7) 100%);
    box-shadow: 4px 4px 0 var(--ab-shadow, var(--border-color));
    transition: border-color 0.45s ease, background 0.45s ease, box-shadow 0.45s ease;
}

.audiobook-player-modal .audiobook-play-pause {
    background: var(--ab-accent, var(--color-green));
    color: var(--ab-shadow, var(--border-color));
    box-shadow: 0 4px 0 var(--ab-shadow, var(--border-color)), inset 0 0 0 3px rgba(255, 255, 255, 0.4);
    transition: background 0.45s ease, box-shadow 0.1s ease, transform 0.1s ease;
}

.audiobook-player-modal .audiobook-play-pause:hover {
    box-shadow: 0 6px 0 var(--ab-shadow, var(--border-color)), inset 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.audiobook-player-modal .audiobook-step-btn {
    box-shadow: 0 3px 0 var(--ab-shadow, var(--border-color));
}

.audiobook-player-modal .audiobook-seek::-webkit-slider-runnable-track {
    background: linear-gradient(to right,
        var(--ab-accent, var(--color-green)) 0%,
        var(--ab-accent, var(--color-green)) var(--seek-pct, 0%),
        #eef1f4 var(--seek-pct, 0%),
        #eef1f4 100%);
}

.audiobook-player-modal .audiobook-seek::-moz-range-progress {
    background: var(--ab-accent, var(--color-green));
}

.audiobook-player-modal .audiobook-chapter-picker select {
    box-shadow: 0 3px 0 var(--ab-shadow, var(--border-color));
}

.audiobook-player-stage {
    max-width: 460px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

.audiobook-native-hidden {
    display: none !important;
}

.audiobook-stage-hero {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0.15rem 0 0.25rem;
    isolation: isolate;
}

.audiobook-stage-glow {
    position: absolute;
    top: -6px;
    left: 50%;
    width: 250px;
    height: 250px;
    transform: translateX(-50%);
    background-size: cover;
    background-position: center;
    filter: blur(48px) saturate(1.6);
    opacity: 0.42;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}

.audiobook-stage-cover {
    width: min(184px, calc(44 * var(--tp-vw)));
    aspect-ratio: 2 / 3;
    border: 3.5px solid var(--border-color);
    border-left-width: 5px;
    border-radius: 3px 10px 10px 3px;
    box-shadow: 6px 6px 0 var(--border-color);
    background-size: cover;
    background-position: center top;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0.75rem;
    box-sizing: border-box;
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
}

.audiobook-stage-cover .audiobook-cover-spine {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 12px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.05) 40%, rgba(255, 255, 255, 0.1) 75%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 3;
}

.audiobook-stage-cover .audiobook-cover-spine::after {
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    bottom: 0;
    width: 2px;
    background: rgba(0, 0, 0, 0.15);
}

.audiobook-stage-cover .audiobook-cover-title {
    z-index: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    font-family: 'Georgia', serif;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    line-height: 1.2;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}

.audiobook-stage-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.audiobook-stage-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.15;
    color: var(--border-color);
}

.audiobook-stage-author {
    font-weight: 800;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.audiobook-icon-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.audiobook-icon-btn {
    width: 46px;
    height: 46px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: #fff;
    border: 3px solid var(--border-color);
    border-radius: 50%;
    box-shadow: 0 3px 0 var(--border-color);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
    box-sizing: border-box;
}

.audiobook-icon-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 var(--border-color);
}

.audiobook-icon-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--border-color);
}

.audiobook-icon-btn.is-fav {
    background: #fff0f2;
    border-color: var(--color-pink);
    box-shadow: 0 3px 0 var(--color-pink);
}

.audiobook-icon-btn.is-active {
    background: #dcfce7;
    border-color: var(--color-green);
    box-shadow: 0 3px 0 var(--color-green);
}

.audiobook-icon-btn.is-static {
    cursor: default;
    background: #f1f5f9;
    color: var(--text-muted);
}

.audiobook-icon-btn.is-static:hover {
    transform: none;
    box-shadow: 0 3px 0 var(--border-color);
}

.audiobook-transport,
.audiobook-yt-stage {
    width: 100%;
    box-sizing: border-box;
}

.audiobook-transport {
    background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
    border: 3px solid var(--border-color);
    border-radius: 18px;
    box-shadow: 4px 4px 0 var(--border-color);
    padding: 0.85rem 1rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.audiobook-now-playing {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.audiobook-now-playing-chapter {
    font-weight: 800;
    font-size: 0.98rem;
    color: var(--border-color);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.audiobook-now-playing-index {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.audiobook-seek {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 14px;
    margin: 0.1rem 0;
    background: transparent;
    cursor: pointer;
}

.audiobook-seek:disabled {
    cursor: default;
    opacity: 0.55;
}

.audiobook-seek::-webkit-slider-runnable-track {
    height: 12px;
    border: 2.5px solid var(--border-color);
    border-radius: 999px;
    background: linear-gradient(to right, var(--color-green) 0%, var(--color-green) var(--seek-pct, 0%), #eef1f4 var(--seek-pct, 0%), #eef1f4 100%);
}

.audiobook-seek::-moz-range-track {
    height: 12px;
    border: 2.5px solid var(--border-color);
    border-radius: 999px;
    background: #eef1f4;
}

.audiobook-seek::-moz-range-progress {
    height: 12px;
    border-radius: 999px 0 0 999px;
    background: var(--color-green);
}

.audiobook-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--border-color);
    box-shadow: 0 2px 0 var(--border-color);
}

.audiobook-seek::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--border-color);
    box-shadow: 0 2px 0 var(--border-color);
}

.audiobook-time-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.audiobook-transport-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 0.1rem;
}

.audiobook-play-pause,
.audiobook-step-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--border-color);
    background: #fff;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.audiobook-play-pause {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--color-green);
    color: var(--border-color);
    box-shadow: 0 4px 0 var(--border-color), inset 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.audiobook-step-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 3px 0 var(--border-color);
}

.audiobook-play-pause:hover,
.audiobook-step-btn:hover {
    transform: translateY(-2px);
}

.audiobook-play-pause:hover {
    box-shadow: 0 6px 0 var(--border-color), inset 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.audiobook-step-btn:hover {
    box-shadow: 0 5px 0 var(--border-color);
}

.audiobook-play-pause:active,
.audiobook-step-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--border-color);
}

.audiobook-play-pause i {
    width: 28px;
    height: 28px;
}

.audiobook-step-btn i {
    width: 20px;
    height: 20px;
}

.audiobook-step-btn:disabled {
    opacity: 0.4;
    cursor: default;
    transform: none;
    box-shadow: 0 3px 0 var(--border-color);
}

.audiobook-yt-stage {
    max-width: 480px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border: 3px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 4px 4px 0 var(--border-color);
}

.audiobook-yt-stage>div {
    width: 100%;
    height: 100%;
}

/* YouTube chapters still play through the YouTube iframe (there's no client-side
   way to pull a raw audio stream from a YouTube URL), but the video itself stays
   visually hidden — playback is driven entirely through the same transport bar
   used for MP3 chapters. Uses a clip-hidden technique rather than display:none
   so the iframe keeps rendering/playing in the background. */
.audiobook-yt-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.audiobook-chapter-picker {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border-top: 2px solid #f1f5f9;
    padding-top: 0.75rem;
}

.audiobook-chapter-picker label {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--border-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.audiobook-chapter-picker select {
    flex: 1;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border: 3px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 0 var(--border-color);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--border-color);
    cursor: pointer;
}

@media (max-width: 460px) {
    .audiobook-play-pause {
        width: 56px;
        height: 56px;
    }

    .audiobook-play-pause i {
        width: 24px;
        height: 24px;
    }

    .audiobook-transport {
        padding: 0.85rem 0.8rem 1rem;
    }

    .audiobook-transport-controls {
        gap: 0.8rem;
    }
}

/* Listening Station Modal Overlay styles */
.listening-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: oklch(22% 0.012 250 / 0.4);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9995;
}

.listening-modal-content {
    background: var(--panel-bg);
    border: 4px solid var(--border-color);
    border-radius: 24px;
    width: 95%;
    max-width: 820px;
    max-height: calc(92 * var(--tp-vh));
    overflow: hidden;
    padding: 2.2rem 2.2rem;
    box-shadow: 10px 10px 0 var(--border-color);
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Currently Reading dashboard cards */
.currently-reading-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 0.75rem;
    width: 100%;
}

.currently-reading-card {
    background: var(--panel-bg);
    border: 3px solid var(--border-color);
    border-radius: 18px;
    padding: 1rem;
    box-shadow: 4px 4px 0 var(--border-color);
    display: flex;
    gap: 1rem;
    align-items: center;
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s;
    text-align: left;
    box-sizing: border-box;
}

.currently-reading-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--border-color);
}

#audiobookCurrentlyReadingGrid::-webkit-scrollbar {
    display: none;
}

#audiobookCurrentlyReadingGrid {
    scrollbar-width: none;
    /* Firefox */
}

.currently-reading-card-mini {
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Slide through the Currently Listening cards, one card per click */
.currently-reading-arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(255, 255, 255, 0.95);
    border: 3px solid var(--border-color);
    border-radius: 50%;
    box-shadow: 2px 2px 0 var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 900;
    color: var(--border-color);
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.15s ease;
}

.currently-reading-arrow:hover {
    transform: scale(1.1);
}

.currently-reading-arrow:active {
    transform: scale(0.95);
}

.currently-reading-arrow:focus-visible {
    outline: 3px solid var(--color-blue);
    outline-offset: 2px;
}

.currently-reading-card-mini:hover {
    transform: translateY(-2px);
    box-shadow: 5px 5px 0 var(--border-color) !important;
}

@keyframes bounceRight {
    0% {
        transform: translateY(-50%) translateX(0);
    }

    100% {
        transform: translateY(-50%) translateX(5px);
    }
}

/* --- Lucide General UI Styling --- */
.btn-ui svg,
.fullscreen-btn svg,
.mute-btn svg,
.widget-btn svg,
.widget-icon svg,
.fullscreen-timer-badge svg,
.soundscape-volume svg,
.level-pill svg,
.adjust-btn svg {
    display: inline-block;
    vertical-align: middle;
    width: 1.15em;
    height: 1.15em;
    stroke-width: 2.25;
}

.mute-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.widget-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.level-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

/* Theater / Presentation Mode Styles */
body.theater-active {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--bg-main) !important;
}

body.theater-active header,
body.theater-active .header-bottom,
body.theater-active .workspace>*:not(.display-deck) {
    display: none !important;
}

body.theater-active .workspace {
    max-width: calc(100 * var(--tp-vw)) !important;
    width: calc(100 * var(--tp-vw)) !important;
    height: calc(100 * var(--tp-vh)) !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.theater-active .display-deck {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 3rem !important;
    min-height: calc(100 * var(--tp-vh)) !important;
    height: calc(100 * var(--tp-vh)) !important;
    overflow-y: auto !important;
    background: var(--panel-bg) !important;
}

.screen-fullscreen-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, transform 0.15s ease;
}

.screen-fullscreen-btn:hover {
    color: var(--border-color);
    transform: scale(1.15);
}

.screen-fullscreen-btn svg {
    width: 1.4rem !important;
    height: 1.4rem !important;
    stroke-width: 2.5 !important;
}

/* Screensaver / Idle Mode Styles */
.screensaver-overlay {
    position: fixed;
    inset: 0;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--color-amber) 24%, transparent) 0 9%, transparent 9.2%),
        radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--color-blue) 20%, transparent) 0 12%, transparent 12.2%),
        var(--bg-main);
    z-index: 1000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 420ms var(--ease-out);
}

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

.screensaver-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.screensaver-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(calc(92 * var(--tp-vw)), 1100px);
    text-align: center;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    animation: screensaver-drift 24s ease-in-out infinite alternate;
}

@keyframes screensaver-drift {
    0% {
        transform: translate3d(-1.2vw, -0.8vh, 0);
    }

    100% {
        transform: translate3d(1.2vw, 0.8vh, 0);
    }
}

.screensaver-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    margin-bottom: clamp(1.25rem, 4vh, 2.75rem);
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1;
}

.screensaver-brand .brand-pulse-badge {
    padding: 0.16em 0.48em;
    border-width: 3px;
    border-radius: 0.42em;
    font-size: 0.78em;
}

.screensaver-brand .brand-pulse-badge svg {
    width: 0.7em !important;
    height: 0.7em !important;
    margin-left: 0.12em;
    stroke-width: 3;
}

.screensaver-time {
    font-size: clamp(6rem, 17vw, 14rem);
    font-weight: 900;
    letter-spacing: -0.075em;
    line-height: 0.82;
    display: flex;
    align-items: baseline;
    justify-content: center;
    color: var(--text-main);
    filter: drop-shadow(0.045em 0.055em 0 var(--color-purple-dark));
    -webkit-text-stroke: clamp(1px, 0.16vw, 3px) var(--border-color);
}

.screensaver-time .ss-hours,
.screensaver-time .ss-minutes {
    color: var(--panel-bg);
}

.screensaver-time .ss-colon {
    color: var(--color-amber);
    margin: 0 0.08em;
    -webkit-text-stroke-color: var(--border-color);
}

.screensaver-time .ss-seconds {
    font-size: 0.27em;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin-left: 0.35em;
    vertical-align: baseline;
    color: var(--color-pink);
    -webkit-text-stroke: 0;
}

.screensaver-date {
    margin-top: clamp(1.5rem, 4vh, 2.75rem);
    color: var(--text-main);
    font-size: clamp(1.15rem, 2.6vw, 2.35rem);
    font-weight: 850;
    letter-spacing: -0.025em;
}

.screensaver-class,
.screensaver-pet {
    margin-top: 1rem;
    border: 3px solid var(--border-color);
    color: var(--text-main);
    font-family: var(--font-display);
    font-weight: 800;
    box-shadow: 0 4px 0 var(--border-color);
}

.screensaver-class {
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: var(--spinner-mint);
    font-size: clamp(0.9rem, 1.5vw, 1.15rem);
}

.screensaver-pet {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.9rem 0.45rem 0.55rem;
    border-radius: 14px;
    background: var(--spinner-peach);
}

.screensaver-pet[hidden],
.screensaver-class[hidden] {
    display: none;
}

.screensaver-pet-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--border-color);
    border-radius: 9px;
    background: #ffffff;
    font-size: 1.2rem;
}

.screensaver-return-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: clamp(1.75rem, 5vh, 3.5rem);
    color: var(--text-muted);
    font-size: clamp(0.75rem, 1.2vw, 0.95rem);
    font-weight: 750;
}

.screensaver-return-hint svg {
    width: 1rem;
    height: 1rem;
}

.screensaver-overlay[data-theme="sky"] {
    background:
        radial-gradient(ellipse at 18% 20%, #ffffff 0 5%, transparent 5.3%),
        radial-gradient(ellipse at 76% 72%, #ffffff 0 7%, transparent 7.3%),
        linear-gradient(165deg, var(--spinner-sky), color-mix(in srgb, var(--spinner-mint) 72%, #ffffff));
}

.screensaver-overlay[data-theme="sky"] .screensaver-time {
    filter: drop-shadow(0.045em 0.055em 0 var(--color-blue-dark));
}

.screensaver-overlay[data-theme="minimal"] {
    background: var(--bg-main);
}

.screensaver-overlay[data-theme="minimal"] .screensaver-brand,
.screensaver-overlay[data-theme="minimal"] .screensaver-pet,
.screensaver-overlay[data-theme="minimal"] .screensaver-canvas {
    display: none;
}

.screensaver-overlay[data-theme="minimal"] .screensaver-time {
    filter: none;
}

@media (max-width: 600px) {
    .screensaver-time {
        font-size: clamp(4.5rem, 24vw, 7rem);
    }

    .screensaver-time .ss-seconds {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .screensaver-overlay {
        transition-duration: 120ms;
    }

    .screensaver-content {
        animation: none;
    }

    .screensaver-canvas {
        display: none;
    }
}

.header-separator {
    width: 2px;
    height: 24px;
    background-color: var(--border-color);
    opacity: 0.3;
    margin: 0 0.4rem;
    align-self: center;
}

.screen-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.48rem 1rem;
    font-family: inherit;
    font-weight: 900;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--text-main);
    background: var(--panel-bg);
    border: 3px solid var(--border-color);
    border-radius: 11px;
    box-shadow: 0 4px 0 var(--border-color);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.screen-back-btn:hover {
    background: color-mix(in oklch, var(--app-theme-color, var(--color-purple)) 12%, var(--panel-bg));
    transform: translateY(-1px);
    box-shadow: 0 5px 0 var(--border-color);
}

.screen-back-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--border-color);
}

.screen-back-btn:focus-visible {
    outline: 4px solid var(--app-theme-color, var(--color-purple));
    outline-offset: 3px;
}

h2 .screen-back-btn svg {
    width: 1.15rem !important;
    height: 1.15rem !important;
    stroke-width: 3 !important;
    color: var(--app-theme-color, var(--color-purple-dark));
}

.header-home-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.25rem 0.4rem;
    border: 0;
    border-radius: 18px;
    background: transparent;
    font: inherit;
    cursor: pointer;
    transition: transform var(--dur-micro) var(--ease-out);
}

.header-home-logo:hover {
    transform: translateY(-1px);
}

.header-home-logo:active {
    transform: translateY(1px);
}

.header-home-logo:focus-visible {
    outline: 4px solid var(--app-theme-color, var(--color-purple));
    outline-offset: 4px;
}

/* --- Dynamic Screen Theme Button Styles --- */
.screen .btn-ui:not(.btn-red):not(.btn-green):not(.btn-yellow):not(.btn-delete):not(.btn-blue):not(.btn-accent) {
    border-color: var(--app-theme-color, var(--border-color));
    color: var(--app-theme-color, var(--text-main));
    box-shadow: 0 6px 0 var(--app-theme-color, var(--border-color));
}

.screen .btn-ui:not(.btn-red):not(.btn-green):not(.btn-yellow):not(.btn-delete):not(.btn-blue):not(.btn-accent):hover {
    box-shadow: 0 8px 0 var(--app-theme-color, var(--border-color));
}

.screen .btn-ui:not(.btn-red):not(.btn-green):not(.btn-yellow):not(.btn-delete):not(.btn-blue):not(.btn-accent):active {
    box-shadow: 0 1px 0 var(--app-theme-color, var(--border-color));
}

.screen .btn-accent {
    background: var(--app-theme-color, var(--color-blue));
    border-color: var(--app-theme-color, var(--border-color));
    box-shadow: 0 6px 0 var(--app-theme-color-dark, var(--border-color));
    color: #ffffff;
}

.screen .btn-accent:hover {
    box-shadow: 0 8px 0 var(--app-theme-color-dark, var(--border-color));
}

.screen .btn-accent:active {
    box-shadow: 0 1px 0 var(--app-theme-color-dark, var(--border-color));
}

/* --- TutorPulse Neo-Brutalist Brand Logo --- */
.logo-text {
    font-family: var(--font-family);
    font-size: 2.8rem;
    /* Enlarged and premium heading size */
    font-weight: 900;
    letter-spacing: -1.5px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
    line-height: 1;
}

.brand-tutor {
    color: var(--text-main);
    text-shadow: 2px 2px 0 var(--bg-main), 4.5px 4.5px 0 var(--app-theme-color, #3b82f6);
    /* Dynamic pop shadow, fallback to bright blue */
}

.brand-pulse-badge {
    background: var(--app-theme-color, #ec4899);
    /* Dynamic pink badge background, fallback to bright pink */
    color: #ffffff;
    border: 3.5px solid var(--border-color);
    border-radius: 16px;
    padding: 0.2rem 0.75rem;
    font-size: 2.2rem;
    /* Sized relative to text size */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 4px 4px 0 var(--border-color);
    transform: rotate(-2.5deg);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.brand-pulse-badge svg {
    filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.15));
}


/* ==========================================
   ACCESSIBILITY MODES
   ========================================== */

/* --- Dyslexia-Friendly Font Mode --- */
body.dyslexia-font * {
    font-family: 'OpenDyslexic', system-ui, -apple-system, sans-serif !important;
}

body.dyslexia-font .brand-tutor,
body.dyslexia-font .brand-pulse-badge {
    letter-spacing: 0.02em;
}

/* --- Accessibility Toggle Switch Component --- */
.accessibility-settings-card {
    background: #ffffff;
    border: 4px solid var(--app-theme-color, var(--border-color));
    border-radius: 24px;
    padding: 2rem;
    max-width: 650px;
    margin: 2rem auto 0 auto;
    box-shadow: 0 8px 0 var(--app-theme-color, var(--border-color));
}

.accessibility-settings-card h3 {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-main);
}

.accessibility-settings-card .subtitle {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0 0 1.5rem 0;
}

.a11y-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--bg-main);
    border: 3px solid var(--border-color);
    border-radius: 16px;
    margin-bottom: 1rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.a11y-toggle-row[hidden] {
    display: none;
}

.a11y-toggle-row:last-child {
    margin-bottom: 0;
}

.a11y-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    margin-right: 1rem;
}

.a11y-toggle-label {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text-main);
}

.a11y-toggle-desc {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.35;
}

/* The toggle switch */
.a11y-switch {
    position: relative;
    width: 60px;
    height: 34px;
    flex-shrink: 0;
}

.a11y-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.a11y-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #cbd5e1;
    border: 3px solid var(--border-color);
    border-radius: 34px;
    transition: background 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 3px 0 var(--border-color);
}

.a11y-switch-slider::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: #ffffff;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.a11y-switch input:checked+.a11y-switch-slider {
    background: var(--color-green);
}

.a11y-switch input:checked+.a11y-switch-slider::before {
    transform: translateX(26px);
}

.a11y-switch input:focus-visible+.a11y-switch-slider {
    outline: 3px solid var(--color-blue);
    outline-offset: 2px;
}


/* --- Magnify Text (Text Scaling) Utility --- */
.screen {
    --text-zoom: 1.0;
}

/* Override and scale font sizes of major question, prompt, and card areas proportionally using the --text-zoom variable */
.screen .trivia-box {
    font-size: calc(1.9rem * var(--text-zoom, 1)) !important;
}

.screen #doodlePromptField.trivia-box {
    font-size: calc(clamp(2.1rem, 3.4vw, 3.4rem) * var(--text-zoom, 1)) !important;
}

.screen .word-day-card #wotdWord {
    font-size: calc(3.2rem * var(--text-zoom, 1)) !important;
}

.screen .word-day-card #wotdDefinition {
    font-size: calc(1.35rem * var(--text-zoom, 1)) !important;
}

.screen .word-day-card #wotdExample {
    font-size: calc(1.25rem * var(--text-zoom, 1)) !important;
}

.screen .word-day-card #wotdChallenge {
    font-size: calc(1.15rem * var(--text-zoom, 1)) !important;
}

.screen .on-this-day-card #otdYear {
    font-size: calc(2.8rem * var(--text-zoom, 1)) !important;
}

.screen .on-this-day-card #otdEvent {
    font-size: calc(clamp(1.4rem, 2vw, 1.9rem) * var(--text-zoom, 1)) !important;
}

.screen .on-this-day-card #otdPrompt {
    font-size: calc(1.15rem * var(--text-zoom, 1)) !important;
}

.screen .quote-week-card #qotwText {
    font-size: calc(1.6rem * var(--text-zoom, 1)) !important;
}

.screen .quote-week-card #qotwAuthor {
    font-size: calc(1.25rem * var(--text-zoom, 1)) !important;
}

.screen #scrambleHint {
    font-size: calc(1.15rem * var(--text-zoom, 1)) !important;
}

.screen .news-story-card h3 {
    font-size: calc(1.45rem * var(--text-zoom, 1)) !important;
}

.screen .news-story-card p {
    font-size: calc(1.1rem * var(--text-zoom, 1)) !important;
}

/* Control buttons inside header */
.screen-zoom-container {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    margin-right: 0.5rem;
    background: #ffffff;
    border: 3px solid var(--border-color);
    border-radius: 12px;
    padding: 0.2rem 0.4rem;
    box-shadow: 0 3px 0 var(--border-color);
    height: 32px;
    box-sizing: border-box;
    vertical-align: middle;
}

.screen-zoom-container .zoom-btn {
    background: #f1f5f9;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    font-size: 0.75rem;
    font-weight: 900;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.1s, box-shadow 0.1s;
    box-shadow: 0 2px 0 var(--border-color);
}

.screen-zoom-container .zoom-btn:hover {
    background: #e2e8f0;
}

.screen-zoom-container .zoom-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 var(--border-color);
}

.screen-zoom-container .screen-zoom-value {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-muted);
    min-width: 38px;
    text-align: center;
    user-select: none;
}

h2 .screen-zoom-container+.screen-fullscreen-btn {
    margin-left: 0 !important;
}

/* ==========================================
   AUTHENTICATION OVERLAY STYLES
   ========================================== */
.auth-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--bg-main);
    background-image: radial-gradient(circle at 10% 20%, rgba(216, 241, 230, 0.46) 0.1%, rgba(233, 226, 226, 0.28) 90.1%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.auth-card {
    background: var(--panel-bg);
    border: 4px solid var(--border-color);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    width: 90%;
    max-width: 440px;
    box-shadow: 8px 8px 0 var(--border-color);
    text-align: center;
    box-sizing: border-box;
}

.auth-tab {
    transition: all 0.15s ease-in-out;
}

.auth-tab.active {
    background: var(--color-amber) !important;
    color: white !important;
}

.auth-tab:not(.active):hover {
    background: #f8fafc !important;
}

.auth-form input:focus {
    border-color: var(--color-purple) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.auth-btn {
    font-weight: 800;
    transition: all 0.15s ease;
}

.auth-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--border-color) !important;
}

.auth-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--border-color) !important;
}

/* ==========================================
   INTERACTIVE ONBOARDING TUTORIAL STYLES
   ========================================== */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 99998;
    pointer-events: none;
}

.tutorial-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 99996;
    pointer-events: none !important;
}

.tutorial-card {
    position: fixed;
    width: 330px;
    background: white;
    border: 4px solid var(--border-color);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 8px 8px 0 var(--border-color);
    pointer-events: auto;
    z-index: 99999;
    box-sizing: border-box;
}

.tutorial-highlight {
    z-index: 99997 !important;
    outline: 4px solid var(--color-amber) !important;
    outline-offset: 4px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45) !important;
    pointer-events: auto !important;
}

.tutorial-progress {
    width: min(104px, 100%);
    min-width: 72px;
    display: grid;
    gap: 0.3rem;
    text-align: center;
}

.tutorial-progress-count {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.tutorial-progress-track {
    height: 8px;
    overflow: hidden;
    border: 2px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in oklch, var(--text-muted) 14%, var(--panel-bg));
}

.tutorial-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-amber);
    transition: width var(--dur-short) var(--ease-out);
}

/* --- ADMIN DASHBOARD & MASTER DECK STYLES --- */
.license-tracker-badge {
    background: #dbeafe;
    color: #1e40af;
    border: 3px solid var(--border-color);
    border-radius: 12px;
    padding: 0.4rem 0.8rem;
    font-weight: 800;
    box-shadow: 0 3px 0 var(--border-color);
    display: inline-block;
}

.admin-action-btn {
    padding: 0.4rem 0.8rem;
    min-height: auto;
    font-size: 0.9rem;
    font-weight: 800;
    border-radius: 10px;
    box-shadow: 0 3px 0 var(--border-color);
    transform: none;
}

.admin-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 0 var(--border-color);
}

.admin-action-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--border-color);
}

.school-suspended-row {
    background: #fef2f2 !important;
    opacity: 0.85;
}

.status-badge {
    padding: 0.25rem 0.6rem;
    font-weight: 800;
    font-size: 0.85rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    display: inline-block;
    text-transform: uppercase;
}

.status-badge.active {
    background: #dcfce7;
    color: #15803d;
}

.status-badge.suspended {
    background: #fee2e2;
    color: #b91c1c;
}

/* Full Width Admin Controls & Tables */
.roster-editor-card.admin-full-width {
    max-width: 100% !important;
}

.admin-console-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 4px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    margin-top: 1rem;
    box-shadow: 0 6px 0 var(--border-color);
    background: #ffffff;
}

.admin-console-table th,
.admin-console-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 700;
    border-bottom: 3px solid var(--border-color);
    border-right: 3px solid var(--border-color);
}

.admin-console-table th:last-child,
.admin-console-table td:last-child {
    border-right: none;
}

.admin-console-table tr:last-child td {
    border-bottom: none;
}

.admin-console-table th {
    background: #f8fafc;
    color: var(--border-color);
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.admin-console-table tr:nth-child(even) {
    background: #f8fafc;
}

.admin-console-table tr:hover td {
    background: #f1f5f9;
}

/* --- SLEEK ENTERPRISE ADMIN OVERRIDES --- */
#superAdminView,
#schoolAdminView,
#superAdminAddSchoolModal,
#superAdminEditSchoolModal,
#superAdminImpersonateModal,
#superAdminChangeAdminModal,
#schoolAdminAddTeacherModal,
#schoolAdminBulkImportModal,
#schoolAdminEditTeacherModal {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Modern Card Layouts for Admin Dashboard */
#superAdminView .roster-editor-card,
#schoolAdminView .roster-editor-card {
    background: #ffffff;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* Stats Row Styling */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.admin-stat-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.admin-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
}

.admin-stat-card.blue {
    border-left: 4px solid var(--color-blue);
    background: #f8fafc;
}

.admin-stat-card.green {
    border-left: 4px solid var(--color-green);
    background: #f8fafc;
}

.admin-stat-card.orange {
    border-left: 4px solid var(--color-amber);
    background: #f8fafc;
}

.admin-stat-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.admin-stat-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.admin-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.1;
}

.admin-stat-icon-wrapper {
    padding: 0.75rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-stat-card.blue .admin-stat-icon-wrapper {
    background: #dbeafe;
    color: var(--color-blue-dark);
}

.admin-stat-card.green .admin-stat-icon-wrapper {
    background: #d1fae5;
    color: var(--color-green-dark);
}

.admin-stat-card.orange .admin-stat-icon-wrapper {
    background: #ffedd5;
    color: var(--color-amber-dark);
}

/* Live Indicator inside stat card */
.admin-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-green-dark);
    background: #e6fcf5;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    border: 1px solid #c3f9e8;
}

/* Layout Grid for System & Broadcast */
.admin-two-col-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

/* Headings Override */
#superAdminView h2,
#schoolAdminView h2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#superAdminView h3,
#schoolAdminView h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#superAdminView .subtitle,
#schoolAdminView .subtitle {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

/* Sleek Admin Action Buttons to Replace Bouncy Bulky Ones */
.btn-admin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    user-select: none;
}

.btn-admin:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.btn-admin svg {
    width: 0.95rem;
    height: 0.95rem;
    stroke-width: 2.25;
}

.btn-admin-primary {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4338ca;
}

.btn-admin-primary:hover {
    background: #4338ca;
    border-color: #3730a3;
    color: #ffffff;
}

.btn-admin-blue {
    background: #2563eb;
    color: #ffffff;
    border-color: #1d4ed8;
}

.btn-admin-blue:hover {
    background: #1d4ed8;
    border-color: #1e40af;
    color: #ffffff;
}

.btn-admin-green {
    background: #10b981;
    color: #ffffff;
    border-color: #059669;
}

.btn-admin-green:hover {
    background: #059669;
    border-color: #047857;
    color: #ffffff;
}

.btn-admin-orange {
    background: #f59e0b;
    color: #ffffff;
    border-color: #d97706;
}

.btn-admin-orange:hover {
    background: #d97706;
    border-color: #b45309;
    color: #ffffff;
}

.btn-admin-yellow {
    background: #eab308;
    color: #ffffff;
    border-color: #ca8a04;
}

.btn-admin-yellow:hover {
    background: #ca8a04;
    border-color: #a16207;
    color: #ffffff;
}

.btn-admin-red {
    background: #ef4444;
    color: #ffffff;
    border-color: #dc2626;
}

.btn-admin-red:hover {
    background: #dc2626;
    border-color: #b91c1c;
    color: #ffffff;
}

/* Header bar layout inside Roster Editor Card */
.admin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.admin-header-actions-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Filter & Search Bar */
.admin-filter-bar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}

.admin-search-wrapper {
    position: relative;
    flex: 1;
    min-width: 260px;
}

.admin-search-wrapper .search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: #94a3b8;
    stroke-width: 2.5;
}

.admin-search-wrapper input {
    width: 100%;
    padding: 0.55rem 0.55rem 0.55rem 2.2rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.85rem;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: #ffffff;
}

.admin-search-wrapper input:focus,
.admin-select-filter:focus,
.admin-textarea:focus,
.admin-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.admin-select-filter {
    padding: 0.55rem 2rem 0.55rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.85rem;
    background: #ffffff;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    font-weight: 600;
    color: #334155;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23475569%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Form Controls */
.admin-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.admin-form-group label {
    font-weight: 700;
    font-size: 0.85rem;
    color: #475569;
}

.admin-input {
    padding: 0.6rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    font-weight: 600;
    color: #1e293b;
}

.admin-textarea {
    padding: 0.6rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    font-weight: 600;
    color: #1e293b;
    resize: vertical;
}

/* Hallmark · component: school-admin child roster · genre: modern-minimal · existing admin theme
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass · responsive: 320 / 375 / 414 / 768
 */
.admin-roster-editor {
    min-width: 0;
}

.admin-roster-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.75rem;
}

.admin-roster-heading>div {
    display: grid;
    gap: 0.1rem;
}

.admin-roster-heading small {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.admin-add-child {
    min-height: 36px;
    white-space: nowrap;
}

.admin-roster-columns,
.admin-roster-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(145px, 0.8fr) minmax(110px, 0.65fr) 36px;
    gap: 0.5rem;
}

.admin-roster-columns {
    padding: 0.25rem 0.55rem 0;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.admin-roster-columns small {
    font: inherit;
    font-weight: 500;
}

.admin-roster-list {
    display: grid;
    gap: 0.45rem;
    max-height: 245px;
    padding: 0.5rem;
    overflow-y: auto;
    border: 1px solid color-mix(in oklch, var(--border-color) 18%, transparent);
    border-radius: 8px;
    background: color-mix(in oklch, var(--border-color) 3%, var(--panel-bg));
}

.admin-roster-row {
    align-items: center;
}

#schoolAdminEditTeacherModal .admin-roster-row .admin-input {
    min-width: 0;
    min-height: 38px;
    padding: 0.45rem 0.55rem;
    background: var(--panel-bg);
}

.admin-roster-remove {
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    border: 1px solid color-mix(in oklch, var(--color-red) 45%, transparent);
    border-radius: 7px;
    background: var(--panel-bg);
    color: var(--color-red-dark);
    cursor: pointer;
}

.admin-roster-remove:hover {
    background: color-mix(in oklch, var(--color-red) 12%, var(--panel-bg));
}

.admin-roster-remove:focus-visible,
.admin-add-child:focus-visible {
    outline: 3px solid var(--color-blue);
    outline-offset: 2px;
}

.admin-roster-remove:active {
    transform: translateY(1px);
}

.admin-roster-remove:disabled,
.admin-add-child:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.admin-roster-remove svg {
    width: 0.95rem;
    height: 0.95rem;
}

@media (max-width: 560px) {
    .admin-roster-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-add-child {
        align-self: flex-start;
    }

    .admin-roster-columns {
        display: none;
    }

    .admin-roster-row {
        grid-template-columns: minmax(0, 1fr) 36px;
    }

    .admin-roster-name,
    .admin-roster-birthday,
    .admin-roster-house {
        grid-column: 1;
    }

    .admin-roster-remove {
        grid-column: 2;
        grid-row: 1 / span 3;
    }
}

/* Elegant, High-Density Table Styles */
#superAdminView .admin-console-table,
#schoolAdminView .admin-console-table {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    overflow: hidden;
    border-collapse: collapse !important;
    margin-top: 0.5rem !important;
}

#superAdminView .admin-console-table th,
#superAdminView .admin-console-table td,
#schoolAdminView .admin-console-table th,
#schoolAdminView .admin-console-table td {
    padding: 0.75rem 1rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    border-right: none !important;
}

#superAdminView .admin-console-table th,
#schoolAdminView .admin-console-table th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 0.75rem !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

#superAdminView .admin-console-table tr:nth-child(even),
#schoolAdminView .admin-console-table tr:nth-child(even) {
    background: #f8fafc !important;
}

#superAdminView .admin-console-table tr:hover td,
#schoolAdminView .admin-console-table tr:hover td {
    background: #f1f5f9 !important;
}

#superAdminView .admin-console-table tr:last-child td,
#schoolAdminView .admin-console-table tr:last-child td {
    border-bottom: none !important;
}

.admin-table-actions {
    display: flex;
    gap: 0.35rem;
    justify-content: center;
    flex-wrap: wrap;
}

.admin-table-actions .btn-admin {
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 4px;
}

/* Modals Override */
#superAdminAddSchoolModal .custom-modal-content,
#superAdminEditSchoolModal .custom-modal-content,
#superAdminImpersonateModal .custom-modal-content,
#superAdminChangeAdminModal .custom-modal-content,
#schoolAdminAddTeacherModal .custom-modal-content,
#schoolAdminBulkImportModal .custom-modal-content,
#schoolAdminEditTeacherModal .custom-modal-content {
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    padding: 1.5rem !important;
    animation: adminSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-align: left !important;
}

#superAdminAddSchoolModal h3,
#superAdminEditSchoolModal h3,
#superAdminImpersonateModal h3,
#superAdminChangeAdminModal h3,
#schoolAdminAddTeacherModal h3,
#schoolAdminBulkImportModal h3,
#schoolAdminEditTeacherModal h3 {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    color: #0f172a !important;
}

@keyframes adminSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Status Badges Override */
#superAdminView .status-badge,
#schoolAdminView .status-badge {
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    padding: 0.15rem 0.4rem !important;
}

/* System Engine items override */
.admin-engine-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.admin-engine-status-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.admin-engine-status-label {
    color: #475569;
}

.admin-engine-status-value {
    font-weight: 700;
    color: #0f172a;
}

/* Hallmark · component: Class Notes card · genre: playful · theme: existing TutorPulse
 * states: default · focus · dirty · saving · saved · error
 * An autosaving "legal pad" textarea that lives in the dashboard card grid and
 * can be dragged, hidden, or expanded to a 2x2 writing pad like other widgets.
 */
/* Only the interior layout differs from a standard card — hover, active press,
   cursor, border and background all come from .menu-card / .btn-c21 unchanged. */
.menu-card.menu-card-notes {
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    gap: 0.4rem;
    padding: 0.85rem 0.9rem 0.9rem;
}

/* In edit mode the size toggle sits top-left; give the heading room for it. */
.menu-grid.is-editing-layout .menu-card-notes .menu-card-notes__heading {
    padding-left: 2.4rem;
}

.menu-card-notes__heading {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.menu-card-notes__icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border: 2px solid var(--border-color);
    border-radius: 7px;
    background: color-mix(in oklch, var(--color-amber) 34%, var(--panel-bg));
}

.menu-card-notes__icon svg {
    width: 0.7rem;
    height: 0.7rem;
    stroke-width: 2.7;
}

.menu-card-notes__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-card-notes__status {
    flex: 0 0 auto;
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-muted);
}

.menu-card-notes__status[data-state="dirty"] { color: var(--color-amber); }
.menu-card-notes__status[data-state="saving"] { color: var(--text-muted); }
.menu-card-notes__status[data-state="error"] { color: var(--color-red, #dc2626); }

.menu-card-notes__textarea {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
    resize: none;
    padding: 0.5rem 0.6rem;
    border: 2px solid var(--border-color);
    border-radius: 11px;
    background-color: color-mix(in oklch, var(--color-amber) 5%, var(--panel-bg));
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(1.5rem - 1px),
        color-mix(in oklch, var(--color-amber) 24%, transparent) calc(1.5rem - 1px),
        color-mix(in oklch, var(--color-amber) 24%, transparent) 1.5rem
    );
    background-attachment: local;
    background-position: 0 calc(0.5rem + 6px);
    box-shadow: inset 0 2px 0 color-mix(in oklch, var(--border-color) 10%, transparent);
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.5rem;
    color: var(--text-main);
}

.menu-card-notes__textarea::placeholder {
    color: color-mix(in oklch, var(--text-muted) 78%, transparent);
}

.menu-card-notes__textarea:focus-visible {
    outline: 3px solid var(--color-blue);
    outline-offset: 1px;
}

/* House Cup widget: reuses the .menu-card-notes layout/heading, but its own
   icon tint follows the card's own accent instead of the notes' amber. */
.menu-card.menu-card-house-cup .menu-card-notes__icon {
    background: color-mix(in oklch, var(--card-accent) 34%, var(--panel-bg));
}

.house-cup-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    overflow-y: auto;
}

.house-cup-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid color-mix(in oklch, var(--border-color) 18%, transparent);
    border-radius: 9px;
    background: color-mix(in oklch, var(--panel-bg) 96%, var(--border-color));
    font-family: var(--font-body);
}

.house-cup-rank {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-weight: 800;
    font-size: 0.8rem;
}

.house-cup-swatch {
    flex: 0 0 auto;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--house-color);
    border: 2px solid var(--border-color);
}

.house-cup-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    font-size: 0.85rem;
}

.house-cup-total {
    flex: 0 0 auto;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text-main);
}

/* 5x5 DASHBOARD EXPANSION CARDS & VIEWS STYLING */

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V4
 * Random Choice Wheel · genre: playful · theme: Hum
 * contrast: pass (40–41) · responsive: pass (34, 49–55)
 */
/* A. RANDOM CHOICE WHEEL */
.spinner-outer-box {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(19rem, 0.75fr);
    align-items: start;
    gap: clamp(1rem, 3vw, 2.5rem);
    margin: 1.5rem auto 0;
    width: 100%;
    max-width: 88rem;
}

.spinner-stage,
.spinner-controls-panel {
    min-width: 0;
    background: var(--panel-bg);
    border: 4px solid var(--border-color);
    border-radius: 24px;
    box-shadow: 7px 7px 0 var(--border-color);
}

.spinner-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding: clamp(1rem, 3vw, 2rem);
}

.spinner-controls-heading {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.spinner-controls-heading h3 {
    margin: 0.15rem 0 0;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
    min-width: 0;
}

.spinner-kicker {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.spinner-count-badge {
    flex: 0 0 auto;
    padding: 0.42rem 0.72rem;
    border: 2px solid var(--border-color);
    border-radius: 999px;
    background: var(--color-amber);
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.spinner-count-badge--standalone {
    align-self: flex-end;
}

.spinner-wheel-container {
    position: relative;
    width: min(100%, 35rem);
    aspect-ratio: 1;
    border: 5px solid var(--border-color);
    border-radius: 50%;
    box-shadow: 8px 8px 0 var(--border-color);
    background: var(--panel-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    isolation: isolate;
}

.spinner-wheel-canvas {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: rotate(0deg);
    transition: transform 4s cubic-bezier(0.1, 0.8, 0.2, 1);
    outline: 3px solid transparent;
    outline-offset: 5px;
    cursor: pointer;
}

.spinner-wheel-canvas:hover {
    filter: saturate(1.06);
}

.spinner-wheel-canvas:focus-visible {
    outline-color: var(--spinner-focus);
}

.spinner-wheel-canvas:active {
    filter: brightness(0.98);
}

.spinner-wheel-canvas[aria-disabled="true"] {
    cursor: wait;
    opacity: 0.82;
}

.spinner-wheel-container--large {
    width: min(100%, 49rem);
}

.spinner-pointer {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 30px solid var(--color-red-dark);
    filter: drop-shadow(2px 2px 0 var(--border-color));
    z-index: 10;
}

.spinner-center-hub {
    position: absolute;
    width: clamp(3rem, calc(10 * var(--tp-vw)), 4.5rem);
    height: clamp(3rem, calc(10 * var(--tp-vw)), 4.5rem);
    background: var(--panel-bg);
    border: 4px solid var(--border-color);
    border-radius: 50%;
    box-shadow: 2px 2px 0 var(--border-color);
    z-index: 5;
    pointer-events: none;
    display: grid;
    place-items: center;
}

.spinner-center-hub svg {
    width: 45%;
    height: 45%;
}

.spinner-controls-panel {
    padding: clamp(1rem, 2.5vw, 1.5rem);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.spinner-icon-button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-bg);
    color: var(--text-main);
    cursor: pointer;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.spinner-icon-button:hover,
.spinner-presets button:hover,
.spinner-list-heading button:hover {
    background: var(--color-amber);
}

.spinner-icon-button:focus-visible,
.spinner-presets button:focus-visible,
.spinner-list-heading button:focus-visible,
.spinner-input-row button:focus-visible,
.spinner-bulk-panel summary:focus-visible {
    outline: 2px solid var(--spinner-focus);
    outline-offset: 2px;
}

.spinner-icon-button:active,
.spinner-presets button:active,
.spinner-list-heading button:active {
    transform: translateY(1px);
}

.spinner-presets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.spinner-presets button,
.spinner-list-heading button {
    min-height: 40px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--background-light);
    color: var(--text-main);
    font: 800 0.78rem var(--font-body);
    cursor: pointer;
    outline: 2px solid transparent;
    white-space: nowrap;
}

.spinner-add-form {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.spinner-add-form>label,
.spinner-bulk-panel label {
    font-weight: 800;
    font-size: 0.85rem;
}

.spinner-add-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
}

.spinner-add-row input,
.spinner-bulk-panel textarea,
.spinner-input-row input {
    box-sizing: border-box;
    min-height: 46px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--panel-bg);
    color: var(--text-main);
    font: 700 0.9rem var(--font-body);
    outline: 2px solid transparent;
    outline-offset: 1px;
}

.spinner-add-row input {
    width: 100%;
    padding: 0.65rem 0.75rem;
}

.spinner-add-row input:focus,
.spinner-bulk-panel textarea:focus,
.spinner-input-row input:focus {
    outline-color: var(--spinner-focus);
}

.spinner-add-row input[aria-invalid="true"] {
    border-color: var(--color-red-dark);
    background: var(--spinner-danger-soft);
}

.spinner-add-row .btn-ui {
    min-height: 46px;
    white-space: nowrap;
}

.spinner-field-help {
    min-height: 1lh;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.spinner-field-help.is-error {
    color: var(--color-red-dark);
}

.spinner-bulk-panel {
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--background-light);
    overflow: clip;
}

.spinner-bulk-panel summary {
    min-height: 44px;
    padding: 0.65rem 0.8rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 800;
    cursor: pointer;
    outline: 2px solid transparent;
}

.spinner-bulk-panel[open] {
    padding-bottom: 0.75rem;
}

.spinner-bulk-panel[open] summary {
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.spinner-bulk-panel label,
.spinner-bulk-panel textarea,
.spinner-bulk-actions {
    margin-inline: 0.75rem;
    width: calc(100% - 1.5rem);
}

.spinner-bulk-panel label {
    display: block;
    margin-bottom: 0.35rem;
}

.spinner-bulk-panel textarea {
    resize: vertical;
    padding: 0.65rem 0.75rem;
}

.spinner-bulk-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.spinner-bulk-actions .btn-ui {
    min-height: 44px;
    padding-inline: 0.5rem;
    font-size: 0.78rem;
    white-space: nowrap;
}

.spinner-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.spinner-list-heading h4 {
    margin: 0;
    font-size: 0.95rem;
}

.spinner-list-heading>div {
    display: flex;
    gap: 0.35rem;
}

.spinner-list-heading button {
    min-height: 34px;
    padding: 0.35rem 0.55rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
}

.spinner-list-heading button svg {
    width: 0.85rem;
    height: 0.85rem;
}

.spinner-inputs-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.15rem 0.35rem 0.15rem 0.1rem;
}

.spinner-input-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
    background: var(--background-light);
    border: 2px solid var(--border-color);
    border-radius: 11px;
    padding: 0.35rem;
}

.spinner-input-row input {
    min-height: 40px;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border-width: 2px;
}

.spinner-input-number {
    width: 1.65rem;
    height: 1.65rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-amber);
    font-size: 0.72rem;
    font-weight: 900;
}

.spinner-input-row button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 2px solid var(--border-color);
    border-radius: 9px;
    background: var(--panel-bg);
    color: var(--text-main);
    cursor: pointer;
    outline: 2px solid transparent;
}

.spinner-input-row button:hover {
    background: var(--spinner-danger-soft);
    color: var(--color-red-dark);
}

.spinner-options {
    padding-top: 0.7rem;
    border-top: 2px dashed var(--border-color);
}

.spinner-switch {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.spinner-switch input {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--color-blue-dark);
}

.spinner-history-empty {
    color: var(--text-muted);
    list-style: none;
    margin-left: -1.5rem;
}

@media (max-width: 60rem) {
    .spinner-outer-box {
        grid-template-columns: minmax(0, 1fr);
    }

    .spinner-controls-panel {
        max-width: 42rem;
        width: 100%;
        margin-inline: auto;
    }
}

@media (max-width: 30rem) {

    .spinner-stage,
    .spinner-controls-panel {
        border-width: 3px;
        border-radius: 18px;
        box-shadow: 4px 4px 0 var(--border-color);
    }

    .spinner-add-row,
    .spinner-bulk-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .spinner-add-row .btn-ui,
    .spinner-bulk-actions .btn-ui {
        width: 100%;
    }

    .spinner-list-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .spinner-list-heading>div {
        width: 100%;
    }

    .spinner-list-heading button {
        flex: 1;
        justify-content: center;
    }

    .spinner-input-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }
}

/* B. DAILY RIDDLES SCREEN */
.riddle-card-wrapper {
    max-width: 46rem;
    margin: 2rem auto;
}

.riddle-main-card {
    background: #fdfcfa;
    border: 4.5px solid var(--border-color);
    border-radius: 24px;
    padding: 2.2rem;
    box-shadow: 6px 6px 0 var(--border-color);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
}

.riddle-question-text {
    font-size: clamp(1.5rem, 2.8vw, 2.4rem);
    font-weight: 850;
    line-height: 1.4;
    color: var(--text-main);
    margin: 0;
}

.riddle-hint-container {
    background: #fffbeb;
    border: 3px dashed var(--color-amber, #f59e0b);
    border-radius: 14px;
    padding: 0.85rem 1.2rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: #b45309;
    display: none;
    animation: fadeIn 0.25s ease-out;
}

.riddle-answer-container {
    background: #dcfce7;
    border: 3.5px solid var(--border-color);
    border-radius: 16px;
    padding: 1rem 1.5rem;
    font-weight: 900;
    font-size: 1.4rem;
    color: #15803d;
    display: none;
    box-shadow: 3px 3px 0 var(--border-color);
    animation: popScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* D. STUDENT POINTS BAR CHART */
.student-points-app-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    background: #ffffff;
    border: 3.5px solid var(--border-color);
    border-radius: 16px;
    padding: 0.85rem 1.2rem;
    box-shadow: 4px 4px 0 var(--border-color);
}

.points-chart-scroller {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 55px;
    margin-top: 1rem;
}

.points-chart-canvas {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    min-width: 600px;
    height: 280px;
    border-bottom: 4px solid var(--border-color);
    padding: 0 1rem;
    position: relative;
    box-sizing: border-box;
}

.points-chart-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 100%;
    justify-content: flex-end;
    margin: 0 4px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.points-chart-column:hover {
    transform: translateY(-4px);
}

.points-chart-column.selected-column .points-chart-bar-fill {
    box-shadow: 0 0 0 4px #000000, 0 0 16px var(--app-theme-color, #2dd4bf);
    transform: scale(1.05);
}

.points-chart-bar-fill {
    width: 80%;
    max-width: 42px;
    min-height: 10px;
    border: 3px solid var(--border-color);
    border-bottom: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: #2dd4bf;
    transition: height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15), transform 0.2s;
    position: relative;
    box-shadow: 2px 0 0 rgba(0, 0, 0, 0.05);
}

.points-chart-column:nth-child(5n+1) .points-chart-bar-fill {
    background-color: #2dd4bf;
}

.points-chart-column:nth-child(5n+2) .points-chart-bar-fill {
    background-color: #fb923c;
}

.points-chart-column:nth-child(5n+3) .points-chart-bar-fill {
    background-color: #fbbf24;
}

.points-chart-column:nth-child(5n+4) .points-chart-bar-fill {
    background-color: #c084fc;
}

.points-chart-column:nth-child(5n+5) .points-chart-bar-fill {
    background-color: #f87171;
}

.points-chart-bar-tally {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--text-main);
}

.point-override-input {
    width: 48px;
    text-align: center;
    font-family: inherit;
    font-weight: 900;
    font-size: 0.9rem;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    padding: 0.1rem;
    outline: none;
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
}

.points-chart-label {
    position: absolute;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-main);
    text-align: center;
    white-space: nowrap;
    width: 65px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.points-chart-column:nth-child(odd) .points-chart-label {
    bottom: -22px;
}

.points-chart-column:nth-child(even) .points-chart-label {
    bottom: -44px;
}

/* Keep the pupil touch targets within reach at the bottom of a smartboard. */
@media (min-width: 769px) {
    #studentPointsView.active {
        display: grid;
        /* min-content, not 0: on a short screen the chart row must keep its
           height and let the deck scroll, never collapse up over the header. */
        grid-template-rows: auto auto minmax(min-content, 1fr);
        height: 100%;
    }

    #studentPointsView.active > div:last-child {
        align-self: end;
        align-items: flex-end !important;
        margin-top: 0 !important;
    }

    #studentPointsView.active .points-chart-scroller {
        margin-top: 0;
    }
}

/* Hallmark · component: live news card · genre: playful · existing TutorPulse palette
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: preserves existing high-contrast ink, blue and paper tokens
 */
/* E. GOOD NEWS BULLETIN SCREEN */
.good-news-card-wrapper {
    max-width: 56rem;
    margin: 1.5rem auto;
    height: calc(100% - 3rem);
    min-height: 22rem;
}

.good-news-deck-card {
    background: #fdfcfa;
    border: 4.5px solid var(--border-color);
    border-radius: 24px;
    padding: 2.2rem;
    box-shadow: 6px 6px 0 var(--border-color);
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
    animation: slideInLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.good-news-emoji-seal {
    font-size: 4rem;
    margin: 0;
    line-height: 1;
    flex: 0 0 auto;
}

.good-news-headline {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 900;
    color: var(--text-main);
    margin: 0;
    flex: 0 0 auto;
}

.good-news-body-text {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    font-weight: 600;
    line-height: 1.6;
    color: #334155;
    text-align: left;
    background: #f8fafc;
    border: 2.5px solid var(--border-color);
    border-radius: 14px;
    box-sizing: border-box;
    padding: 1.25rem 1.5rem;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    align-items: center;
}

.good-news-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border-top: 3px dashed var(--border-color);
    padding-top: 1.25rem;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.good-news-actions .btn-ui {
    min-height: 48px;
    padding: 0.7rem 1.3rem;
    font-size: 1.05rem;
    white-space: nowrap;
}

.good-news-source-link {
    color: var(--text-main);
    background: #ffffff;
    border: 3px solid var(--border-color);
    text-decoration: none;
}

.good-news-source-link:hover {
    background: #f1f5f9;
    transform: translateY(-1px);
}

.good-news-source-link:focus-visible,
.good-news-actions button:focus-visible {
    outline: 3px solid var(--color-blue, #3b82f6);
    outline-offset: 3px;
}

.good-news-source-link:active,
.good-news-actions button:active {
    transform: translateY(1px);
}

.good-news-actions button:disabled {
    cursor: wait;
    opacity: 0.55;
}

@media (max-width: 26rem) {
    .good-news-deck-card {
        padding: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .good-news-deck-card {
        animation: none !important;
    }

    .good-news-source-link,
    .good-news-actions button {
        transition: none;
    }
}

/* Account Dropdown & Semantic Islands Styles */
.classroom-tools-island {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f8fafc;
    border: 3px solid var(--border-color);
    border-radius: 14px;
    padding: 0.35rem 0.5rem;
    box-shadow: 2px 2px 0 var(--border-color);
}

.account-dropdown {
    position: relative;
    display: inline-block;
}

.account-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: #ffffff;
    border: 3px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 4px 4px 0 var(--border-color);
    padding: 0.5rem;
    min-width: 220px;
    z-index: 1010;
    flex-direction: column;
    gap: 0.25rem;
}

.account-dropdown-menu.show {
    display: flex;
}

.account-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
    box-sizing: border-box;
}

.account-dropdown-menu .dropdown-item:hover {
    background: #f1f5f9;
}

.account-dropdown-menu .dropdown-item[title="Edit Forms"]:hover {
    background: #f5f3ff;
    color: #6d28d9;
}

.account-dropdown-menu .dropdown-item[title="School Admin Console"]:hover {
    background: #ecfdf5;
    color: #059669;
}

.account-dropdown-menu .dropdown-item[title="Start Tour Walkthrough"]:hover {
    background: #eff6ff;
    color: #2563eb;
}

.account-dropdown-menu .dropdown-item[title="Submit Support Ticket / Feedback"]:hover {
    background: #fef3c7;
    color: #d97706;
}

.account-dropdown-menu .dropdown-item.logout-item:hover {
    background: #fee2e2;
    color: var(--color-red-dark);
}

.account-dropdown-menu .dropdown-item svg {
    width: 1.1rem;
    height: 1.1rem;
    stroke-width: 2.25;
}

.account-dropdown-menu .dropdown-divider {
    height: 2px;
    background-color: var(--border-color);
    margin: 0.4rem 0.2rem;
    opacity: 0.2;
}

/* Audiobook Store Cards styling */
.audiobook-store-card {
    position: relative;
    cursor: pointer;
    background: #fff;
    border: 3px solid var(--border-color);
    box-shadow: 3px 3px 0 var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.15s ease;
    box-sizing: border-box;
    width: 100%;
}

.audiobook-store-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--border-color);
}

.audiobook-store-cover-container {
    position: relative;
    width: 100%;
    aspect-ratio: 2/3;
    background: #e2e8f0;
    border-bottom: 3px solid var(--border-color);
    overflow: hidden;
    box-sizing: border-box;
}

.audiobook-store-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.audiobook-store-info {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
    flex: 1;
    background: #fff;
}

.audiobook-store-title {
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--border-color);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 22px;
}

.audiobook-store-author {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audiobook-store-badge {
    align-self: flex-start;
    font-size: 0.6rem;
    font-weight: 900;
    background: var(--color-amber);
    color: var(--border-color);
    border: 2px solid var(--border-color);
    padding: 0.05rem 0.3rem;
    border-radius: 5px;
    box-shadow: 1px 1px 0 var(--border-color);
    margin-top: 0.15rem;
    text-transform: uppercase;
}

/* GDPR & Safeguarding Alert */
.gdpr-safeguarding-alert {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: #f5f3ff;
    border: 3px solid var(--border-color);
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 0.5rem;
    box-shadow: 4px 4px 0 var(--border-color);
}

/* Dashboard Lock Screen Styles */
.dashboard-lock-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.85);
    /* Slightly lighter to be subtle */
    backdrop-filter: blur(8px);
    z-index: 2000000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 2rem;
    box-sizing: border-box;
    animation: fadeIn 0.3s ease-out;
}

@media (max-width: 500px) {
    .dashboard-lock-overlay {
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }
}

.lock-screen-content {
    background: var(--panel-bg);
    border: 4px solid var(--border-color);
    border-radius: 24px;
    padding: 1.5rem;
    width: 100%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 10px 0 var(--border-color);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: popScale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.lock-header h2 {
    font-family: 'Fredoka', var(--font-family);
    font-size: 1.4rem;
    font-weight: 900;
    margin: 0.5rem 0 0.2rem 0;
    color: var(--text-main);
}

.lock-header p {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.lock-icon-container {
    background: #fee2e2;
    border: 3px solid var(--border-color);
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    box-shadow: 0 3px 0 var(--border-color);
    margin: 0 auto;
}

/* PIN Display (Indicator Dots) */
.pin-display {
    display: flex;
    justify-content: center;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.pin-dot {
    width: 0.95rem;
    height: 0.95rem;
    border: 2.5px solid var(--border-color);
    border-radius: 50%;
    background: #f1f5f9;
    transition: all 0.15s ease;
}

.pin-dot.filled {
    background: var(--color-primary);
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.pin-dot.error {
    background: var(--color-red) !important;
    border-color: var(--color-red-dark) !important;
}

/* PIN Keypad Grid */
.pin-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    width: 100%;
    max-width: 260px;
}

.keypad-btn {
    aspect-ratio: 1;
    font-family: 'Fredoka', var(--font-family);
    font-size: 1.35rem;
    font-weight: 800;
    background: #ffffff;
    border: 3px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 0 var(--border-color);
    transition: all 0.1s ease;
    padding: 0;
    margin-bottom: 3px;
}

.keypad-btn:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 var(--border-color);
}

.keypad-btn-action {
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
}

.keypad-btn.btn-clear {
    background: #f1f5f9;
}

.keypad-btn.btn-logout {
    background: #fee2e2;
    color: #ef4444;
    font-size: 0.9rem;
    padding: 0 5px;
}

.keypad-btn.btn-logout:hover {
    background: #fecaca;
}

/* Keypad Shake Animation on Error */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-8px);
    }

    40%,
    80% {
        transform: translateX(8px);
    }
}

.lock-screen-content.shake {
    animation: shake 0.3s ease-in-out;
}

/* Class List Modal layout */
.class-list-modal-content {
    max-width: 1400px;
    width: 95%;
    padding: 2.2rem;
    box-sizing: border-box;
}

/* LANDSCAPE ORIENTATION OPTIMIZATIONS FOR SMARTBOARDS (NO SCROLLING) */
@media (orientation: landscape) {

    /* Register Modal Landscape Expansion */
    .class-list-modal-content {
        max-width: 1200px;
        max-height: calc(96 * var(--tp-vh));
        overflow: hidden;
        padding: 1rem 2rem 1.25rem 2rem;
    }

    .class-list-modal-content h2 {
        font-size: 1.6rem;
        margin: 0 0 0.15rem 0;
    }

    .class-list-modal-content p {
        margin-bottom: 0.25rem !important;
        font-size: 1.1rem !important;
    }

    #livePresentCounter {
        margin-bottom: 0.5rem !important;
        padding: 0.25rem 0.6rem !important;
        font-size: 1rem !important;
    }

    .class-list-modal-content .btn-accent {
        margin-top: 0.75rem !important;
        min-height: 40px !important;
        padding: 0.5rem 1rem !important;
    }

    .student-name-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 1rem;
        padding: 1.25rem;
        max-height: calc(55 * var(--tp-vh));
        overflow-y: auto;
    }

    .student-tag {
        padding: 1.1rem 1.3rem;
        font-size: 1.5rem;
        border-radius: 18px;
        border-width: 3.5px;
        box-shadow: 0 6px 0 var(--border-color);
    }

    .student-tag:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 0 var(--border-color);
    }

    .student-tag:active {
        transform: translateY(4px);
        box-shadow: 0 2px 0 var(--border-color);
    }
}

/* ==========================================
   CLASSROOM PET COMPANION
   ========================================== */
.classroom-pet-container {
    position: fixed;
    bottom: -25px;
    /* Pushed lower into the bottom border layout */
    left: 0;
    width: 200px;
    height: 166px;
    z-index: 9999;
    pointer-events: none;
    user-select: none;
    overflow: visible;
}

.classroom-pet-container:focus-visible {
    outline: none;
}

.classroom-pet-container:focus-visible svg {
    outline: 3px solid var(--color-purple);
    outline-offset: 3px;
    border-radius: 24px;
}

.classroom-pet-container svg {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    cursor: pointer;
    filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.15));
    overflow: visible;
}

.pet-nap-indicator {
    position: absolute;
    bottom: 120px;
    left: 60%;
    width: 30px;
    height: 36px;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    user-select: none;
}

/* Each "z" drifts up and to the right, fading in and out, staggered so the
 * three overlap into one continuous floating loop while the parent is shown. */
.pet-nap-z {
    position: absolute;
    left: 0;
    bottom: 0;
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--text-main, #2b2b2b);
    opacity: 0;
    animation: pet-zzz-float 2.6s ease-in infinite;
}

.pet-nap-z--1 {
    font-size: 0.8rem;
    animation-delay: 0s;
}

.pet-nap-z--2 {
    font-size: 1.05rem;
    left: 8px;
    animation-delay: 0.65s;
}

.pet-nap-z--3 {
    font-size: 1.35rem;
    left: 16px;
    animation-delay: 1.3s;
}

@keyframes pet-zzz-float {
    0% {
        opacity: 0;
        transform: translate(0, 4px) rotate(-6deg) scale(0.6);
    }
    15% {
        opacity: 1;
    }
    75% {
        opacity: 0.85;
    }
    100% {
        opacity: 0;
        transform: translate(13px, -24px) rotate(10deg) scale(1.15);
    }
}

/* "Shh... <name> is sleeping" placard — fades in/out on a loop while napping,
 * reusing the speech bubble's position so it never collides with it (the
 * speech bubble is hidden for the whole duration of a nap). */
.pet-nap-sign {
    position: absolute;
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background-color: var(--panel-bg);
    border: 3px solid var(--border-color);
    box-shadow: 4px 4px 0px var(--border-color);
    border-radius: 12px;
    padding: 6px 14px;
    max-width: 200px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--text-main);
    text-align: center;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    user-select: none;
}

.pet-nap-sign.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Hallmark · component: pet-speech-bubble · genre: playful · theme: hum
 * states: default · hover · active
 * contrast: pass
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 */
.pet-speech-bubble {
    position: absolute;
    bottom: 155px;
    /* Floats above the pet's head */
    left: 50%;
    transform: translateX(-50%) scale(0);
    transform-origin: bottom center;
    background-color: var(--panel-bg);
    border: 3px solid var(--border-color);
    box-shadow: 4px 4px 0px var(--border-color);
    border-radius: 16px;
    padding: 10px 14px;
    width: 220px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--text-main);
    text-align: center;
    z-index: 10000;
    pointer-events: none;
    cursor: pointer;
    transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-micro) linear;
    opacity: 0;
    user-select: none;
}

.pet-speech-bubble.show {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.pet-speech-bubble:hover,
.pet-speech-bubble.is-hover {
    transform: translateX(-50%) scale(1.03);
}

.pet-speech-bubble:active,
.pet-speech-bubble.is-active {
    transform: translateX(-50%) scale(0.97);
}

/* Triangle arrow pointing down at the pet's head */
.pet-speech-bubble::after,
.pet-speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Outer border triangle */
.pet-speech-bubble::before {
    border-width: 12px 10px 0 10px;
    border-color: var(--border-color) transparent transparent transparent;
    bottom: -15px;
    z-index: 1;
}

/* Inner white fill triangle */
.pet-speech-bubble::after {
    border-width: 11px 9px 0 9px;
    border-color: #ffffff transparent transparent transparent;
    bottom: -11px;
    z-index: 2;
}

/* Hallmark · component: classroom pet · genre: playful · theme: existing TutorPulse
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: existing dashboard tokens preserved
 * pre-emit critique: P4 H4 E4 S5 R4 V4
 */

.pet-name-input {
    width: min(220px, 100%);
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 3px solid var(--border-color);
    border-radius: 12px;
    outline: 3px solid transparent;
    outline-offset: 2px;
    background: var(--panel-bg);
    color: var(--text-main);
    font: inherit;
    font-weight: 800;
    box-shadow: 2px 2px 0 var(--border-color);
}

@media (hover: hover) and (pointer: fine) {
    .pet-name-input:hover {
        background: var(--bg-main);
    }
}

.pet-name-input:focus-visible {
    outline-color: var(--color-purple);
}

.pet-name-input:active {
    box-shadow: 1px 1px 0 var(--border-color);
}

.pet-name-input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.pet-name-input[aria-busy="true"] {
    opacity: 0.7;
}

.pet-name-input[aria-invalid="true"] {
    outline-color: var(--color-red);
}

.pet-name-input[data-state="success"] {
    outline-color: var(--color-green);
}

.pet-color-swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pet-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    box-shadow: 2px 2px 0 var(--border-color);
    cursor: pointer;
    padding: 0;
}

.pet-color-swatch[aria-pressed="true"] {
    outline: 3px solid var(--color-purple);
    outline-offset: 2px;
}

.pet-color-swatch:active {
    box-shadow: 1px 1px 0 var(--border-color);
}

/* Hallmark · component: sync status toast · genre: playful · theme: existing TutorPulse
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass · pre-emit critique: P5 H5 E5 S5 R5 V4
 */
.offline-mutation-status {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 10020;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: max-content;
    max-width: calc(100% - 2rem);
    padding: 0.65rem 0.9rem;
    transform: translateY(0.5rem) scale(0.94);
    opacity: 0;
    border: 3px solid var(--border-color);
    border-radius: 999px;
    background: var(--panel-bg);
    color: var(--text-main);
    box-shadow: 3px 3px 0 var(--border-color);
    font-weight: 800;
    pointer-events: none;
    transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-micro) linear;
}

.offline-mutation-status.is-visible {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.offline-mutation-status svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
    stroke-width: 3;
}

.offline-mutation-status[data-state="synced"] {
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    border-width: 2px;
    border-color: var(--border-color);
    border-radius: 16px;
    background: var(--color-green);
    color: var(--border-color);
    box-shadow: 4px 4px 0 var(--border-color);
}

.offline-mutation-status[data-state="synced"] svg {
    width: 1.45rem;
    height: 1.45rem;
}

.offline-mutation-status[data-state="syncing"] {
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    border-width: 2px;
    border-color: var(--border-color);
    border-radius: 16px;
    background: var(--color-blue);
    color: var(--border-color);
    box-shadow: 4px 4px 0 var(--border-color);
}

.offline-mutation-status[data-state="syncing"] svg {
    width: 1.35rem;
    height: 1.35rem;
    animation: lucide-spin 1.2s linear infinite;
}

.offline-mutation-status[data-state="syncing"]::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 2px solid var(--color-blue-dark);
    border-radius: 21px;
    opacity: 0;
    animation: compact-status-ring 1.4s var(--ease-out) infinite;
}

@keyframes compact-status-ring {
    0% {
        transform: scale(0.82);
        opacity: 0.55;
    }

    70%,
    100% {
        transform: scale(1.08);
        opacity: 0;
    }
}

.offline-mutation-status[data-state="pending"] {
    background: var(--color-amber);
}

.offline-mutation-status[data-state="pending"] [data-lucide="loader-circle"] {
    animation: lucide-spin 1.2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .offline-mutation-status {
        transition-duration: 0.01ms;
    }

    .offline-mutation-status[data-state="syncing"]::after {
        animation: none;
    }
}

@media (max-width: 600px) {
    .class-pet-status__label {
        display: none;
    }

    .class-pet-status__name {
        margin-inline-start: 0;
    }

    #classroomPetNameRow {
        align-items: stretch;
        flex-direction: column;
    }

    .pet-name-input {
        width: 100%;
    }
}

/* Hallmark · settings forms · genre: modern-minimal · desktop account density
 * hierarchy: section title → compact fields → quiet save action
 */
.settings-workspace {
    max-width: 920px;
}

#rosterEditorView .settings-workspace>.roster-editor-card,
#rosterEditorView .settings-workspace>.accessibility-settings-card {
    padding: 1.5rem 1.65rem;
    border-radius: 12px;
}

#rosterEditorView .settings-workspace h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
    color: var(--text-main);
    font-size: 1.2rem;
    line-height: 1.25;
}

#rosterEditorView .settings-workspace h3 svg {
    width: 1.05rem;
    height: 1.05rem;
    stroke-width: 2.25;
}

#rosterEditorView .settings-workspace>div>.subtitle,
#rosterEditorView .settings-workspace section>.subtitle {
    margin: 0 0 1.35rem;
    max-width: 70ch;
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 550;
    line-height: 1.5;
}

#rosterEditorView .settings-workspace label {
    color: var(--text-main) !important;
    font-size: 0.79rem !important;
    font-weight: 750 !important;
    line-height: 1.35;
}

#rosterEditorView .settings-workspace input:not([type="checkbox"]):not([type="radio"]),
#rosterEditorView .settings-workspace select,
#rosterEditorView .settings-workspace textarea {
    min-height: 40px;
    padding: 0.58rem 0.7rem !important;
    border: 1px solid color-mix(in oklch, var(--border-color) 28%, transparent) !important;
    border-radius: 8px !important;
    outline: 2px solid transparent;
    background: var(--panel-bg);
    box-shadow: none !important;
    color: var(--text-main);
    font-family: var(--font-body) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    line-height: 1.4;
}

#rosterEditorView .settings-workspace textarea {
    min-height: 150px;
}

#rosterEditorView .settings-workspace input:not([type="checkbox"]):not([type="radio"]):hover,
#rosterEditorView .settings-workspace select:hover,
#rosterEditorView .settings-workspace textarea:hover {
    border-color: color-mix(in oklch, var(--border-color) 48%, transparent) !important;
}

#rosterEditorView .settings-workspace input:not([type="checkbox"]):not([type="radio"]):focus-visible,
#rosterEditorView .settings-workspace select:focus-visible,
#rosterEditorView .settings-workspace textarea:focus-visible {
    border-color: var(--color-purple-dark) !important;
    outline: 2px solid var(--color-purple);
    outline-offset: 1px;
}

#rosterEditorView .settings-workspace input:disabled,
#rosterEditorView .settings-workspace select:disabled,
#rosterEditorView .settings-workspace textarea:disabled {
    cursor: not-allowed;
    background: color-mix(in oklch, var(--border-color) 5%, var(--panel-bg)) !important;
    color: var(--text-muted) !important;
    opacity: 0.7;
}

#rosterEditorView .settings-workspace .btn-ui {
    min-height: 38px;
    padding: 0.5rem 0.78rem;
    border-width: 1px;
    border-radius: 8px;
    box-shadow: none;
    font-size: 0.78rem;
    line-height: 1;
    white-space: nowrap;
    transform: none;
}

#rosterEditorView .settings-workspace .btn-ui:hover {
    box-shadow: none;
    transform: translateY(-1px);
}

#rosterEditorView .settings-workspace .btn-ui:active {
    box-shadow: none;
    transform: translateY(1px);
}

#rosterEditorView .settings-workspace .btn-ui:disabled {
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.55;
    transform: none;
}

#rosterEditorView .settings-workspace .btn-ui:focus-visible {
    outline: 3px solid var(--color-purple);
    outline-offset: 2px;
}

#rosterEditorView .settings-workspace .btn-ui svg {
    width: 0.95rem;
    height: 0.95rem;
}

#rosterEditorView .settings-save-bar {
    min-height: 0;
    margin-top: 1.25rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid color-mix(in oklch, var(--border-color) 14%, transparent);
    border-radius: 9px;
    background: color-mix(in oklch, var(--border-color) 3%, var(--panel-bg));
}

#rosterEditorView .settings-save-status {
    font-size: 0.75rem;
    font-weight: 700;
}

/* Hallmark · component: billing card · genre: playful · theme: Hum
 * states: default · hover · focus · active · disabled · loading · error · success
 * critique: P5 H5 E4 S5 R5 V4 · contrast: pass
 */
.billing-plan-card {
    margin-top: 1.5rem;
    padding: clamp(1rem, 3vw, 1.35rem);
    border: 1px solid color-mix(in oklch, var(--border-color) 17%, transparent);
    border-radius: 12px;
    background: color-mix(in oklch, var(--color-purple) 4%, var(--panel-bg));
}

.billing-plan-card[hidden],
.billing-upgrade-content[hidden],
.billing-owner-content[hidden],
.billing-return-notice[hidden] {
    display: none !important;
}

.billing-plan-heading,
.billing-plan-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.billing-plan-eyebrow {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.billing-plan-heading h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--text-main);
    font-size: 1.08rem;
    font-style: normal;
}

.billing-plan-heading h3 svg {
    width: 1rem;
    height: 1rem;
}

.billing-plan-badge {
    padding: 0.3rem 0.55rem;
    border: 1px solid color-mix(in oklch, var(--color-purple) 25%, transparent);
    border-radius: 999px;
    background: var(--panel-bg);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
}

.billing-plan-summary,
.billing-plan-terms {
    max-width: 68ch;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

.billing-plan-summary {
    margin: 0.7rem 0 0;
}

.billing-plan-terms {
    margin: 0.85rem 0;
}

.billing-plan-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.billing-plan-features li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    color: var(--text-main);
    font-size: 0.76rem;
    font-weight: 700;
}

.billing-plan-features svg {
    flex: 0 0 auto;
    width: 0.9rem;
    height: 0.9rem;
    color: var(--color-green-dark);
}

.billing-primary-action:hover {
    filter: brightness(0.98);
}

.billing-primary-action:focus-visible {
    outline: 3px solid var(--color-purple);
    outline-offset: 3px;
}

.billing-primary-action:active {
    transform: translateY(1px);
}

.billing-primary-action:disabled {
    cursor: wait;
    opacity: 0.7;
}

.billing-primary-action[data-state="loading"] {
    filter: saturate(0.7);
}

.billing-primary-action[data-state="error"] {
    border-color: var(--color-red);
}

.billing-return-notice {
    margin-bottom: 1rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid color-mix(in oklch, var(--border-color) 18%, transparent);
    border-radius: 8px;
    background: var(--panel-bg);
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.45;
}

.billing-return-notice[data-state="success"] {
    border-color: color-mix(in oklch, var(--color-green-dark) 35%, transparent);
    background: color-mix(in oklch, var(--color-green) 10%, var(--panel-bg));
}

.billing-return-notice[data-state="error"] {
    border-color: color-mix(in oklch, var(--color-red) 35%, transparent);
    background: color-mix(in oklch, var(--color-red) 8%, var(--panel-bg));
}

@media (max-width: 768px) {
    .billing-plan-features {
        grid-template-columns: 1fr;
    }
}

#rosterEditorView .a11y-toggle-row {
    min-height: 0;
    margin-top: 0 !important;
    padding: 0.9rem 0;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in oklch, var(--border-color) 13%, transparent) !important;
    border-radius: 0;
    background: transparent;
}

#rosterEditorView .a11y-toggle-label {
    font-size: 0.86rem;
}

#rosterEditorView .a11y-toggle-desc {
    max-width: 62ch;
    font-size: 0.76rem;
    line-height: 1.45;
}

#rosterEditorView .experience-subsection,
#rosterEditorView .settings-section,
#rosterEditorView .custom-content-settings {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in oklch, var(--border-color) 14%, transparent);
}

#rosterEditorView .custom-content-panel .custom-content-settings {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

#rosterEditorView .settings-section {
    padding-bottom: 0.5rem;
}

#rosterEditorView .settings-section-heading {
    margin-bottom: 0.8rem;
}

#rosterEditorView .settings-section-heading h4 {
    font-size: 0.92rem;
}

#rosterEditorView .settings-section-heading p {
    font-size: 0.78rem;
}

#rosterEditorView .settings-section-badge,
#rosterEditorView .custom-content-badge {
    border: 1px solid color-mix(in oklch, var(--border-color) 14%, transparent);
    font-size: 0.66rem;
}

#rosterEditorView .gdpr-safeguarding-alert,
#rosterEditorView #settingsPanelPastoral>div {
    padding: 0.85rem !important;
    border: 1px solid color-mix(in oklch, var(--border-color) 16%, transparent) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

#rosterEditorView .app-manager-toolbar {
    align-items: center;
    margin: 1rem 0 0.75rem;
}

#rosterEditorView .app-search-field {
    min-height: 40px;
    border-width: 1px;
    border-radius: 8px;
    box-shadow: none;
}

#rosterEditorView .app-visibility-item,
#rosterEditorView .dashboard-order-preview,
#rosterEditorView .dashboard-order-list li,
#rosterEditorView .custom-content-app-card {
    border-width: 1px;
    border-radius: 9px;
    box-shadow: none;
}

#rosterEditorView .app-visibility-item {
    padding: 0.6rem;
}

#rosterEditorView .app-visibility-name {
    font-size: 0.8rem;
}

#rosterEditorView .app-visibility-category,
#rosterEditorView .app-visibility-description {
    font-size: 0.7rem;
}

@media (max-width: 900px) {
    .settings-workspace {
        max-width: none;
    }
}

@media (max-width: 600px) {

    #rosterEditorView .settings-workspace>.roster-editor-card,
    #rosterEditorView .settings-workspace>.accessibility-settings-card {
        padding: 1rem;
    }
}

/* Direct-launch routine dock
 * Hallmark · component: icon button dock · genre: playful · theme: existing TutorPulse
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass (40–41)
 */
.routine-edge-dock {
    display: grid;
    gap: 0.35rem;
    padding: 0.4rem 0.35rem;
    border: 3px solid var(--border-color);
    border-left: 0;
    border-radius: 0 14px 14px 0;
    background: var(--panel-bg);
    box-shadow: 0 5px 0 var(--border-color);
    pointer-events: auto;
}

.routine-edge-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 9px;
    background: color-mix(in oklch, var(--color-green) 18%, var(--panel-bg));
    color: var(--text-main);
    cursor: pointer;
}

.routine-edge-btn:nth-child(2) {
    background: color-mix(in oklch, var(--color-amber) 18%, var(--panel-bg));
}

.routine-edge-btn:nth-child(3) {
    background: color-mix(in oklch, var(--color-blue) 16%, var(--panel-bg));
}

.routine-edge-btn:nth-child(4) {
    background: color-mix(in oklch, var(--color-purple) 16%, var(--panel-bg));
}

.routine-edge-btn svg {
    width: 1.05rem;
    height: 1.05rem;
}

.routine-edge-btn:hover {
    border-color: var(--border-color);
    transform: translateX(2px);
}

.routine-edge-btn:focus-visible {
    outline: 4px solid var(--color-green);
    outline-offset: 2px;
}

.routine-edge-btn:active {
    transform: translateX(0);
}

.routine-edge-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.routine-edge-btn[data-state="loading"] {
    opacity: 0.72;
    cursor: progress;
}

.routine-edge-btn[data-state="error"] {
    background: color-mix(in oklch, var(--color-red) 22%, var(--panel-bg));
}

.routine-edge-btn[data-state="success"] {
    background: color-mix(in oklch, var(--color-green) 28%, var(--panel-bg));
}

.routine-edge-tooltip {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: calc(100% + 0.65rem);
    width: max-content;
    max-width: 12rem;
    padding: 0.4rem 0.55rem;
    border: 2px solid var(--border-color);
    border-radius: 7px;
    background: var(--panel-bg);
    box-shadow: 0 3px 0 var(--border-color);
    color: var(--text-main);
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: translate(0.35rem, -50%);
    transition: opacity var(--dur-micro) linear, transform var(--dur-micro) var(--ease-out);
    visibility: hidden;
}

.routine-edge-btn:hover .routine-edge-tooltip {
    opacity: 1;
    transform: translate(0, -50%);
    transition-delay: 800ms;
    visibility: visible;
}

.routine-edge-btn:focus-visible .routine-edge-tooltip {
    opacity: 1;
    transform: translate(0, -50%);
    transition-delay: 0ms;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {

    .routine-edge-btn,
    .routine-edge-tooltip {
        transition-duration: 0ms;
    }
}

/* Active routine progress — vertical desktop rail
 * Hallmark · component: progress panel · genre: playful · theme: existing TutorPulse
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass (40–41)
 */
.routine-runner {
    top: 34rem;
    right: auto;
    bottom: auto;
    left: 0.25rem;
    width: min(142px, calc(100 * var(--tp-vw) - 0.5rem));
    max-height: calc(100 * var(--tp-dvh) - 35rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-workflow-sm);
    padding: var(--space-workflow-xs);
    overflow-y: auto;
    box-sizing: border-box;
}

.routine-runner__identity {
    padding-bottom: var(--space-workflow-xs);
    border-bottom: 1px solid var(--border-color);
}

.routine-runner__identity strong {
    font-size: 0.95rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.routine-runner__eyebrow {
    font-size: 0.62rem;
}

.routine-runner__steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: var(--space-workflow-xs);
    overflow: visible;
}

.routine-runner__steps li {
    width: 100%;
    min-width: 0;
    gap: 0.3rem;
}

.routine-runner__steps li>span {
    width: 1.55rem;
    height: 1.55rem;
    flex: 0 0 auto;
}

.routine-runner__steps li em {
    max-width: none;
    min-width: 0;
    overflow: visible;
    font-size: 0.68rem;
    line-height: 1.2;
    text-overflow: clip;
    white-space: normal;
}

.routine-runner__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem;
}

.routine-runner__actions .btn-ui {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.35rem 0.25rem;
    border-width: 1px;
    border-radius: 8px;
    box-shadow: none;
    justify-content: center;
    gap: 0.2rem;
    font-size: 0.62rem;
    line-height: 1;
}

.routine-runner__actions .btn-ui:hover {
    box-shadow: none;
    transform: translateY(-1px);
}

.routine-runner__actions .btn-ui:active {
    box-shadow: none;
    transform: translateY(1px);
}

.routine-runner__actions .btn-ui svg {
    width: 0.75rem;
    height: 0.75rem;
}

body.routine-running {
    padding-bottom: 0;
}

@media (max-width: 600px) {
    .routine-runner {
        top: auto;
        right: var(--space-workflow-xs);
        bottom: var(--space-workflow-xs);
        left: var(--space-workflow-xs);
        width: auto;
        max-height: calc(46 * var(--tp-vh));
        display: flex;
        align-items: stretch;
        flex-direction: column;
        overflow: auto;
    }

    .routine-runner__steps {
        order: 2;
    }

    .routine-runner__actions {
        order: 3;
        display: flex;
    }

    body.routine-running {
        padding-bottom: 12rem;
    }
}

/* Super Admin workspace final cascade: keep the settings treatment above legacy admin overrides. */
body.super-admin-page #superAdminView .roster-editor-card {
    padding: 1.25rem !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

body.super-admin-page #superAdminView .admin-console-table {
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

body.super-admin-page #superAdminView .admin-console-table th,
body.super-admin-page #superAdminView .admin-console-table td {
    border-color: var(--border-color) !important;
}

/* Register modal final cascade: preserve the viewport-fitted, non-scrolling layout. */
#classListModal {
    align-items: flex-end;
    padding: 1rem;
}

.register-backdrop-masthead {
    position: absolute;
    top: clamp(1.5rem, calc(5 * var(--tp-vh)), 4rem);
    left: 50%;
    width: min(calc(90 * var(--tp-vw)), 760px);
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: clamp(0.3rem, 1vh, 0.65rem);
    color: var(--panel-bg);
    font-family: var(--font-body);
    text-align: center;
    text-shadow: 0 2px 18px var(--border-color);
    transform: translateX(-50%);
    pointer-events: none;
}

.register-backdrop-kicker {
    font-size: clamp(0.72rem, 1.5vw, 0.95rem);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.register-backdrop-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.65rem, 1.5vw, 1rem);
    min-width: 0;
}

.register-backdrop-title-row strong {
    min-width: 0;
    max-width: calc(70 * var(--tp-vw));
    color: var(--panel-bg);
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 8vh, 5.5rem);
    font-weight: 700;
    line-height: 0.9;
    overflow-wrap: anywhere;
}

.register-backdrop-mark {
    width: clamp(2.5rem, calc(6 * var(--tp-vh)), 4rem);
    height: clamp(2.5rem, calc(6 * var(--tp-vh)), 4rem);
    display: grid;
    place-items: center;
    border: 3px solid var(--panel-bg);
    border-radius: 18px;
    background: color-mix(in oklch, var(--color-pink) 82%, transparent);
    box-shadow: 0 5px 0 color-mix(in oklch, var(--border-color) 72%, transparent);
}

.register-backdrop-mark svg {
    width: 58%;
    height: 58%;
    stroke-width: 2.8;
}

.register-backdrop-tutor {
    padding: 0.4rem 0.9rem;
    border: 2px solid color-mix(in oklch, var(--panel-bg) 72%, transparent);
    border-radius: 999px;
    background: color-mix(in oklch, var(--border-color) 42%, transparent);
    font-size: clamp(0.82rem, 1.8vw, 1.05rem);
    font-weight: 700;
    white-space: nowrap;
}

#classListModal .class-list-modal-content {
    width: min(calc(96 * var(--tp-vw)), 1280px);
    height: min(calc(78 * var(--tp-vh)), 720px);
    max-width: none;
    max-height: none;
    padding: clamp(0.9rem, 2vh, 1.4rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(0.75rem, 1.5vh, 1rem);
    overflow: hidden;
}

#classListModal .student-name-grid {
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    gap: clamp(0.55rem, 1.25vh, 0.9rem);
    overflow: hidden;
}

#classListModal .student-tag {
    border-width: 3px;
    border-radius: 18px;
    background: var(--panel-bg);
    box-shadow: 0 5px 0 var(--border-color);
}

#classListModal .student-tag:hover {
    background: var(--panel-bg);
    box-shadow: 0 7px 0 var(--border-color);
}

#classListModal .student-tag.marked,
#classListModal .student-tag.marked:hover {
    background: var(--color-green);
    border-color: var(--border-color);
    box-shadow: 0 5px 0 var(--border-color);
}

#classListModal .class-list-header {
    padding-inline: 0.15rem;
}

#classListModal .class-list-heading h2 {
    font-size: clamp(1.5rem, 3.2vh, 2rem);
}

#classListModal .class-list-status {
    gap: 0.55rem;
}

#classListModal .class-list-close {
    min-height: 42px;
    margin: 0;
    padding: 0.55rem 1rem;
}

#classListModal .class-list-reset {
    min-height: 42px;
    margin: 0;
    padding: 0.55rem 0.8rem;
    white-space: nowrap;
}

@media (max-width: 680px) {
    #classListModal {
        padding: 0.5rem;
    }

    #classListModal .class-list-modal-content {
        width: calc(98 * var(--tp-vw));
        height: calc(84 * var(--tp-vh));
    }

    #classListModal .class-list-status {
        width: 100%;
    }

    #classListModal #livePresentCounter {
        margin-right: auto;
    }

    .register-backdrop-masthead {
        display: none;
    }
}

/* Register identity lives in the quiet backdrop; the tray header is controls only. */
.register-backdrop-masthead {
    top: calc(14 * var(--tp-vh));
    gap: clamp(0.5rem, 1.2vh, 0.9rem);
    transform: translate(-50%, -50%);
}

#classListModal[data-roster-size="small"] .register-backdrop-masthead,
#classListModal[data-roster-size="medium"] .register-backdrop-masthead {
    top: calc(29 * var(--tp-vh));
}

.register-backdrop-kicker {
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
}

.register-backdrop-title-row {
    gap: clamp(0.85rem, 2vw, 1.4rem);
}

.register-backdrop-title-row strong {
    font-size: clamp(4.5rem, 11vh, 8.5rem);
    line-height: 1;
}

#classListModal[data-roster-size="small"] .register-backdrop-title-row strong,
#classListModal[data-roster-size="medium"] .register-backdrop-title-row strong {
    font-size: clamp(5.5rem, 14vh, 10rem);
}

.register-backdrop-mark {
    width: clamp(4rem, calc(9 * var(--tp-vh)), 6.5rem);
    height: clamp(4rem, calc(9 * var(--tp-vh)), 6.5rem);
    border-width: 4px;
    border-radius: 24px;
    box-shadow: 0 7px 0 color-mix(in oklch, var(--border-color) 72%, transparent);
}

.register-backdrop-tutor {
    padding: 0.5rem 1.15rem;
    font-size: clamp(0.95rem, 1.8vw, 1.25rem);
}

#classListModal .class-list-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    background: color-mix(in oklch, var(--color-pink) 12%, var(--panel-bg));
}

#classListModal .register-session-tabs {
    justify-self: start;
}

#classListModal #livePresentCounter {
    justify-self: center;
    margin: 0;
    padding-inline: 1rem;
}

#classListModal .class-list-status {
    justify-self: end;
}

@media (max-width: 900px) {
    #classListModal .class-list-header {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    #classListModal .register-session-tabs {
        order: initial;
        width: auto;
    }

    #classListModal #livePresentCounter {
        justify-self: end;
    }

    #classListModal .class-list-status {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

@media (max-width: 680px) {
    #classListModal .class-list-header {
        display: flex;
        align-items: stretch;
    }

    #classListModal .register-session-tabs {
        width: 100%;
    }

    #classListModal #livePresentCounter {
        align-self: flex-start;
    }

    #classListModal .class-list-status {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-height: 700px) {
    .register-backdrop-masthead {
        top: 1rem;
        gap: 0.2rem;
    }

    .register-backdrop-title-row strong {
        font-size: clamp(2rem, 7vh, 3rem);
    }

    .register-backdrop-mark {
        width: 2.35rem;
        height: 2.35rem;
        border-radius: 12px;
    }
}

@media (max-height: 560px) {
    .register-backdrop-masthead {
        display: none;
    }
}

.register-session-tabs {
    flex: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.25rem;
    border: 3px solid var(--border-color);
    border-radius: 16px;
    background: var(--panel-bg);
    box-shadow: 0 4px 0 var(--border-color);
}

.register-session-btn {
    min-height: 42px;
    padding: 0.45rem 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: clamp(0.82rem, 1.7vh, 1rem);
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.register-session-btn svg {
    width: 1.1rem;
    height: 1.1rem;
    stroke-width: 2.75;
}

.register-session-btn:hover {
    color: var(--text-main);
    background: color-mix(in oklch, var(--color-amber) 15%, var(--panel-bg));
}

.register-session-btn:focus-visible {
    outline: 3px solid var(--color-blue);
    outline-offset: 2px;
}

.register-session-btn:active {
    transform: translateY(1px);
}

.register-session-btn.active {
    background: var(--color-amber);
    color: var(--text-main);
    box-shadow: inset 0 0 0 2px var(--border-color);
}

.register-session-btn[data-session="afternoon"].active {
    background: var(--color-blue);
}

.attendance-history-section {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.registers-settings-panel .attendance-history-section {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */
.pastoral-settings-panel .attendance-history-section {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.pastoral-settings-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
    align-items: end;
    margin-top: 1.25rem;
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-bg);
}

.pastoral-active-form,
.pastoral-data-summary {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.pastoral-active-form span,
.pastoral-data-summary span {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.pastoral-active-form strong,
.pastoral-data-summary strong {
    min-height: 40px;
    padding: 0.55rem 0.65rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-light);
    color: var(--text-main);
    font-size: 0.86rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.pastoral-settings-toolbar .btn-ui {
    min-height: 40px;
    margin: 0;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
}

.pastoral-settings-toolbar .btn-ui:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.pastoral-results-summary {
    line-height: 1.45;
}

@media (min-width: 35rem) {
    .pastoral-settings-toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .pastoral-settings-toolbar .btn-ui {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (min-width: 56.25rem) {
    .pastoral-settings-toolbar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) auto;
    }

    .pastoral-settings-toolbar .btn-ui {
        grid-column: auto;
        width: auto;
    }
}


.attendance-history-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.attendance-history-heading h3 {
    margin: 0.45rem 0 0.25rem;
}

.attendance-history-heading p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.attendance-history-controls {
    display: flex;
    gap: 0.5rem;
}

.attendance-history-controls select {
    min-width: 9rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--panel-bg);
    color: var(--text-main);
    font: inherit;
    font-weight: 700;
}

.attendance-history-controls .btn-ui {
    min-height: 38px;
    padding: 0.5rem 0.75rem;
}

.register-filter-bar {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.65rem;
    align-items: end;
    margin-top: 1.25rem;
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-bg);
}

.register-filter-bar label:nth-child(1) {
    grid-column: span 2;
}

.register-filter-bar label:nth-child(2) {
    grid-column: span 4;
}

.register-filter-bar label:nth-child(3),
.register-filter-bar label:nth-child(4),
.register-filter-bar label:nth-child(5),
.register-filter-bar label:nth-child(6) {
    grid-column: span 3;
}

.register-filter-bar label {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.register-filter-bar input,
.register-filter-bar select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--panel-bg);
    color: var(--text-main);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
}

.register-filter-bar input:focus-visible,
.register-filter-bar select:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.register-filter-actions {
    grid-column: 7 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.register-filter-actions .btn-ui,
.register-pagination .btn-ui {
    min-height: 38px;
    padding: 0.45rem 0.7rem;
}

.register-results-summary {
    display: flex;
    justify-content: space-between;
    margin-top: 0.8rem;
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 800;
}

.register-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.register-pagination[hidden] {
    display: none;
}

.register-pagination span {
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 800;
}

.attendance-history-list {
    margin-top: 1rem;
    display: grid;
    gap: 0.75rem;
}

.attendance-history-day {
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--panel-bg);
}

.attendance-history-day h4 {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
}

.attendance-history-session {
    display: grid;
    grid-template-columns: minmax(8rem, 0.7fr) minmax(7rem, 0.6fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-top: 1px solid color-mix(in oklch, var(--border-color) 16%, transparent);
    font-size: 0.88rem;
}

.attendance-history-session-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.attendance-history-session-name svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-amber-dark);
}

.attendance-history-session-name.afternoon svg {
    color: var(--color-blue-dark);
}

.attendance-history-count {
    font-weight: 800;
}

.attendance-history-absence {
    min-width: 0;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.attendance-history-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
}

.attendance-history-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--panel-bg);
    color: var(--text-main);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.attendance-history-action:hover {
    background: var(--color-blue-light);
}

.attendance-history-action.danger {
    color: var(--color-red-dark);
}

.attendance-history-action svg {
    width: 0.9rem;
    height: 0.9rem;
}

.attendance-edit-content {
    max-width: 620px;
    text-align: left;
}

.attendance-edit-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.attendance-edit-header h2 {
    margin: 0.45rem 0 0.25rem;
}

.attendance-edit-header p {
    margin: 0;
    color: var(--text-muted);
    font-weight: 700;
}

.attendance-edit-entries {
    display: grid;
    gap: 0.45rem;
    margin: 1.25rem 0;
    max-height: calc(50 * var(--tp-vh));
    overflow-y: auto;
}

.attendance-edit-entry {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    cursor: pointer;
}

.attendance-edit-entry input {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--color-green);
}

.attendance-edit-entry strong {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.attendance-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

.attendance-history-empty {
    padding: 1rem;
    border: 1px dashed var(--border-color);
    border-radius: 9px;
    color: var(--text-muted);
    text-align: center;
}

.attendance-history-empty.error {
    color: var(--color-red-dark);
}

@media (max-width: 900px) {
    #classListModal .class-list-header {
        flex-wrap: wrap;
    }

    .register-session-tabs {
        order: 3;
        width: 100%;
    }

    .attendance-history-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .attendance-history-session {
        grid-template-columns: 1fr 1fr;
    }

    .attendance-history-absence {
        grid-column: 1 / -1;
    }

    .attendance-history-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .register-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .register-filter-bar label:nth-child(n) {
        grid-column: span 1;
    }

    .register-filter-search {
        grid-column: span 2 !important;
    }

    .register-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 540px) {
    .attendance-history-controls {
        flex-direction: column;
    }

    .attendance-history-controls select {
        width: 100%;
    }

    .register-filter-bar {
        grid-template-columns: minmax(0, 1fr);
    }

    .register-filter-search {
        grid-column: auto !important;
    }

    .register-filter-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .register-pagination {
        justify-content: space-between;
    }
}

/* Roster-aware sizing prevents small classes stretching into full-height columns. */
#classListModal[data-roster-size="small"] .class-list-modal-content,
#classListModal[data-roster-size="medium"] .class-list-modal-content {
    height: auto;
}

#classListModal[data-roster-size="small"] .student-name-grid,
#classListModal[data-roster-size="medium"] .student-name-grid {
    grid-template-columns: repeat(var(--register-columns), minmax(140px, 210px));
    justify-content: center;
    grid-auto-rows: clamp(88px, 12vh, 120px);
}

#classListModal[data-roster-size="small"] .student-name-grid {
    padding-block: clamp(1rem, 2.4vh, 1.6rem);
}

#classListModal[data-roster-size="medium"] .student-name-grid {
    grid-auto-rows: clamp(82px, 11vh, 112px);
}

#classListModal[data-roster-size="small"] .student-tag,
#classListModal[data-roster-size="medium"] .student-tag {
    min-height: 0;
    font-size: clamp(1.05rem, 2.5vh, 1.45rem);
}

@media (max-width: 1100px) {

    #classListModal[data-roster-size="small"] .student-name-grid,
    #classListModal[data-roster-size="medium"] .student-name-grid {
        grid-template-columns: repeat(var(--register-columns), minmax(0, 1fr));
    }
}

@media (max-width: 680px) {

    #classListModal[data-roster-size="small"] .student-name-grid,
    #classListModal[data-roster-size="medium"] .student-name-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: clamp(62px, 9vh, 88px);
    }
}

/* Register modal composition: wide-board pupil tray. */
#classListModal {
    padding: clamp(0.5rem, 1.5vh, 1rem);
}

#classListModal .class-list-modal-content {
    position: relative;
    width: min(calc(96 * var(--tp-vw)), 1560px);
    height: min(calc(70 * var(--tp-vh)), 760px);
    padding: 0;
    gap: 0;
    border-width: 5px;
    border-radius: 28px;
    background: var(--panel-bg);
    box-shadow: 0 14px 0 var(--border-color);
}

#classListModal .class-list-header {
    min-width: 0;
    padding: clamp(0.8rem, 1.8vh, 1.2rem) clamp(1rem, 2vw, 1.6rem);
    align-items: center;
    border-bottom: 4px solid var(--border-color);
    border-radius: 22px 22px 0 0;
    background: color-mix(in oklch, var(--color-pink) 18%, var(--panel-bg));
}

#classListModal .class-list-heading {
    min-width: 0;
}

#classListModal .class-list-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#classListModal .class-list-icon {
    flex: none;
    width: clamp(2.5rem, calc(5 * var(--tp-vh)), 3.25rem);
    height: clamp(2.5rem, calc(5 * var(--tp-vh)), 3.25rem);
    display: grid;
    place-items: center;
    border: 3px solid var(--border-color);
    border-radius: 14px;
    background: var(--color-pink);
    box-shadow: 0 4px 0 var(--border-color);
}

#classListModal .class-list-icon svg {
    width: 60%;
    height: 60%;
    stroke-width: 3;
}

#classListModal .class-list-label {
    display: block;
    margin-bottom: 0.1rem;
    color: var(--color-pink-dark);
    font-family: var(--font-display);
    font-size: clamp(0.72rem, 1.5vh, 0.9rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

#classListModal .class-list-heading h2 {
    font-size: clamp(1.5rem, 3.5vh, 2.2rem);
}

#classListModal #classListTutor {
    margin: 0.45rem 0 0 calc(clamp(2.5rem, 5vh, 3.25rem) + 0.75rem);
    color: var(--text-main);
    font-size: clamp(0.8rem, 1.7vh, 1rem);
}

#classListModal #livePresentCounter {
    padding: 0.5rem 0.85rem;
    background: var(--panel-bg);
    box-shadow: 0 3px 0 var(--border-color);
}

#classListModal .class-list-reset {
    background: var(--panel-bg);
    color: var(--color-red-dark);
}

#classListModal .student-name-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: clamp(0.55rem, 1.3vh, 0.9rem);
    padding: clamp(0.8rem, 1.8vh, 1.25rem);
    background: var(--bg-main);
}

#classListModal .student-tag {
    padding: 0.5rem;
    border-color: var(--border-color);
    border-radius: 16px;
    font-size: clamp(1.05rem, 2.6vh, 1.55rem);
    box-shadow: 0 5px 0 var(--border-color);
}

/* Thin house-colour bar under a pupil's name; absent unless a house is
   assigned, so pupils with no house look exactly as before. */
#classListModal .student-tag.has-house::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    border-radius: 0 0 16px 16px;
    background: var(--house-color);
}

#classListModal .student-tag:nth-child(4n + 1) {
    background: color-mix(in oklch, var(--color-blue) 12%, var(--panel-bg));
}

#classListModal .student-tag:nth-child(4n + 2) {
    background: color-mix(in oklch, var(--color-amber) 16%, var(--panel-bg));
}

#classListModal .student-tag:nth-child(4n + 3) {
    background: color-mix(in oklch, var(--color-purple) 11%, var(--panel-bg));
}

#classListModal .student-tag:nth-child(4n + 4) {
    background: color-mix(in oklch, var(--color-pink) 10%, var(--panel-bg));
}

#classListModal .student-tag.marked,
#classListModal .student-tag.marked:hover {
    background: var(--color-green);
    transform: translateY(3px);
    box-shadow: 0 2px 0 var(--border-color);
}

@media (max-width: 1100px) {
    #classListModal .class-list-modal-content {
        height: min(calc(78 * var(--tp-vh)), 760px);
    }

    #classListModal .student-name-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (orientation: portrait) {
    #classListModal .class-list-modal-content {
        height: calc(88 * var(--tp-vh));
    }

    #classListModal .student-name-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    #classListModal .class-list-header {
        align-items: stretch;
    }

    #classListModal .class-list-status {
        justify-content: flex-end;
    }

    #classListModal #livePresentCounter {
        margin-right: auto;
    }

    #classListModal .class-list-modal-content {
        height: calc(90 * var(--tp-vh));
    }

    #classListModal .student-name-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Keep register toolbar actions on one exact baseline despite legacy landscape rules. */
#classListModal .class-list-status .btn-ui {
    box-sizing: border-box;
    height: 54px;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0.55rem 1rem !important;
    border-width: 3px;
    line-height: 1;
}

#classListModal .class-list-status .btn-ui svg {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
}

#classListModal #livePresentCounter {
    margin: 0 !important;
}

/* Hallmark · component: My Resources workflow · genre: playful · theme: TutorPulse
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 */
.resource-settings-heading,
.resource-editor-title-row,
.resource-library-heading,
.resource-presentation-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-workflow-md);
}

.resource-settings-heading {
    align-items: flex-start;
    padding-block-end: var(--space-workflow-lg);
    border-block-end: 3px solid var(--border-color);
}

.resource-settings-heading h3,
.resource-editor-title-row h4,
.resource-library-heading h4 {
    margin: 0;
    overflow-wrap: anywhere;
    min-width: 0;
}

.resource-settings-heading .subtitle {
    margin-block: var(--space-workflow-xs) 0;
}

.resource-settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-workflow-lg);
    margin-block-start: var(--space-workflow-lg);
}

.resource-editor,
.resource-library-manager {
    min-width: 0;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 3px solid var(--border-color);
    border-radius: var(--radius-workflow-md);
    background: var(--panel-bg);
}

.resource-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-workflow-sm);
    box-shadow: 0 6px 0 var(--border-color);
}

.resource-editor-title-row,
.resource-library-heading {
    margin-block-end: var(--space-workflow-sm);
}

.resource-editor label {
    color: var(--text-main);
    font-weight: 800;
}

.resource-editor label span,
.resource-editor-help,
.resource-library-heading>span {
    color: var(--text-muted);
    font-size: var(--text-workflow-sm);
    font-weight: 700;
}

.resource-editor input,
.resource-editor textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.8rem 0.9rem;
    border: 3px solid var(--border-color);
    border-radius: var(--radius-workflow-sm);
    background: var(--panel-bg);
    color: var(--text-main);
    font: 700 var(--text-workflow-base)/1.5 var(--font-body);
}

.resource-editor textarea {
    resize: vertical;
    min-height: 15rem;
    font-weight: 600;
}

.resource-editor input:hover,
.resource-editor textarea:hover {
    border-color: var(--color-purple);
}

.resource-editor input:focus-visible,
.resource-editor textarea:focus-visible,
.resource-title-card:focus-visible,
.resource-settings-open:focus-visible,
.resource-delete-button:focus-visible,
.resource-text-controls button:focus-visible {
    outline: 4px solid var(--color-blue);
    outline-offset: 2px;
}

.resource-editor input:disabled,
.resource-editor textarea:disabled,
.resource-title-card:disabled,
.resource-settings-open:disabled,
.resource-delete-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.resource-editor-error {
    margin: 0;
    padding: var(--space-workflow-sm);
    border: 2px solid var(--color-red);
    border-radius: var(--radius-workflow-sm);
    background: var(--color-workflow-danger-soft);
    color: var(--text-main);
    font-weight: 800;
}

.resource-editor-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-workflow-sm);
    margin-block-start: var(--space-workflow-xs);
}

.resource-editor-actions button,
.resource-new-button {
    white-space: nowrap;
}

#resourceSaveButton.is-loading {
    cursor: wait;
    opacity: 0.7;
}

#resourceSaveStatus {
    color: var(--text-muted);
    font-weight: 800;
}

.resource-pdf-divider {
    display: flex;
    align-items: center;
    gap: var(--space-workflow-sm);
    margin-block: var(--space-workflow-sm) 0;
    color: var(--text-muted);
    font-size: var(--text-workflow-sm);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.resource-pdf-divider::before,
.resource-pdf-divider::after {
    content: "";
    height: 2px;
    flex: 1;
    background: color-mix(in oklch, var(--border-color) 30%, transparent);
}

.resource-pdf-upload {
    display: grid;
    gap: var(--space-workflow-sm);
    padding: var(--space-workflow-md);
    border: 3px dashed var(--border-color);
    border-radius: var(--radius-workflow-md);
    background: color-mix(in oklch, var(--color-purple) 7%, var(--panel-bg));
}

.resource-pdf-upload h5,
.resource-pdf-upload p {
    margin: 0;
}

.resource-pdf-upload h5 {
    display: flex;
    align-items: center;
    gap: var(--space-workflow-xs);
    font-size: 1.05rem;
}

.resource-pdf-upload p,
.resource-pdf-actions span {
    color: var(--text-muted);
    font-size: var(--text-workflow-sm);
    font-weight: 700;
}

.resource-pdf-picker {
    min-height: 3.25rem;
    display: flex;
    align-items: center;
    gap: var(--space-workflow-sm);
    padding: 0.65rem 0.8rem;
    border: 3px solid var(--border-color);
    border-radius: var(--radius-workflow-sm);
    background: var(--panel-bg);
    cursor: pointer;
}

.resource-pdf-picker input {
    padding: 0;
    border: 0;
    font-size: var(--text-workflow-sm);
}

.resource-pdf-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-workflow-sm);
}

#resourcePdfUploadButton.is-loading {
    cursor: wait;
    opacity: 0.7;
}

.resource-settings-list {
    display: grid;
    gap: var(--space-workflow-sm);
}

.resource-settings-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    border: 3px solid var(--border-color);
    border-radius: var(--radius-workflow-sm);
    background: var(--panel-bg);
    overflow: clip;
}

.resource-settings-open,
.resource-delete-button,
.resource-title-card,
.resource-text-controls button {
    border: 0;
    color: var(--text-main);
    font-family: var(--font-body);
    cursor: pointer;
}

.resource-settings-open {
    min-width: 0;
    padding: var(--space-workflow-sm);
    display: flex;
    align-items: center;
    gap: var(--space-workflow-sm);
    background: transparent;
    text-align: start;
}

.resource-settings-open>span:last-child {
    display: grid;
    min-width: 0;
}

.resource-settings-open strong,
.resource-settings-open small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-settings-open strong {
    font-size: var(--text-workflow-base);
}

.resource-settings-open small {
    color: var(--text-muted);
    font-weight: 700;
}

.resource-file-mark {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-workflow-sm);
    background: color-mix(in oklch, var(--color-purple) 18%, var(--panel-bg));
}

.resource-delete-button {
    width: 3rem;
    display: grid;
    place-items: center;
    border-inline-start: 3px solid var(--border-color);
    background: var(--color-workflow-danger-soft);
}

.resource-settings-open:active,
.resource-delete-button:active,
.resource-title-card:active,
.resource-text-controls button:active {
    transform: translateY(2px);
}

.resource-settings-empty,
.resource-app-empty {
    padding: clamp(2rem, 5vw, 4rem) var(--space-workflow-lg);
    display: grid;
    justify-items: center;
    gap: var(--space-workflow-xs);
    border: 3px dashed var(--border-color);
    border-radius: var(--radius-workflow-md);
    color: var(--text-muted);
    text-align: center;
}

.resource-settings-empty svg {
    width: 2rem;
    height: 2rem;
}

.resource-app-library,
.resource-presentation {
    width: min(100%, 1120px);
    margin-inline: auto;
}

.resource-app-kicker,
.resource-presentation-header>span {
    display: block;
    margin-block-end: var(--space-workflow-xs);
    color: var(--text-muted);
    font-size: clamp(0.75rem, 1.4vw, 0.9rem);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.resource-app-count {
    flex: 0 0 auto;
    padding: 0.55rem 0.8rem;
    border: 3px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in oklch, var(--color-purple) 16%, var(--panel-bg));
    font-weight: 800;
    white-space: nowrap;
    font-size: 0.85rem;
}

.my-resources-screen>h2 .resource-app-count {
    margin-inline-start: 0.25rem;
}

.resource-app-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-workflow-md);
}

.resource-title-card {
    min-width: 0;
    min-height: 7rem;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(0.8rem, 2vw, 1.3rem);
    border: 3px solid var(--border-color);
    border-radius: var(--radius-workflow-md);
    background: var(--panel-bg);
    box-shadow: 0 6px 0 var(--border-color);
    text-align: start;
    transition: transform var(--dur-workflow-short) var(--ease-workflow-out), box-shadow var(--dur-workflow-short) var(--ease-workflow-out), background var(--dur-workflow-short) var(--ease-workflow-out);
}

.resource-title-number {
    color: var(--color-purple);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.5vw, 1.7rem);
    font-weight: 800;
}

.resource-title-copy {
    display: grid;
    min-width: 0;
    gap: 0.2rem;
}

.resource-title-copy strong {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.8rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.resource-title-copy small {
    color: var(--text-muted);
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.resource-title-card>svg {
    width: 1.6rem;
    height: 1.6rem;
}

.resource-title-card[data-state="loading"] {
    cursor: wait;
    opacity: 0.65;
}

.resource-title-card[data-state="error"] {
    background: var(--color-workflow-danger-soft);
}

.resource-title-card[data-state="success"] {
    background: var(--color-game-success-soft);
}

.resource-app-empty-mark {
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    border: 3px solid var(--border-color);
    border-radius: 50%;
    background: color-mix(in oklch, var(--color-purple) 18%, var(--panel-bg));
}

.resource-presentation-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    padding-block-end: 0.85rem !important;
    border-block-end: 2px solid var(--border-color, rgba(0, 0, 0, 0.12)) !important;
    margin-block-end: 1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

.resource-presentation-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.85rem !important;
    min-width: 0 !important;
    flex: 1 1 0% !important;
    overflow: hidden !important;
}

.resource-presentation-header h3 {
    max-width: 100% !important;
    margin: 0 !important;
    color: var(--text-main) !important;
    font-family: var(--font-display) !important;
    font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    flex: 1 1 0% !important;
    outline: none !important;
}

.resource-presentation-header h3:focus,
#resourcePresentationTitle:focus {
    outline: none !important;
}

.resource-presentation-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
    margin-inline-start: auto !important;
}

/* Unified Touch-Optimized Button System for Presentation Header */
.resource-presentation-header .btn-ui,
.resource-text-controls button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    height: 2.25rem !important;
    min-height: 2.25rem !important;
    padding: 0 0.85rem !important;
    font-family: inherit !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--color-purple, #4f46e5) !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(79, 70, 229, 0.25) !important;
    border-radius: 9999px !important;
    box-shadow: none !important;
    transition: none !important;
    transform: none !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.resource-presentation-header .btn-ui-icon,
.resource-text-controls button {
    padding: 0 !important;
    width: 2.25rem !important;
    min-width: 2.25rem !important;
}

.resource-presentation-header .btn-ui:hover,
.resource-presentation-header .btn-ui:active,
.resource-text-controls button:hover,
.resource-text-controls button:active {
    transform: none !important;
    box-shadow: none !important;
    background: rgba(79, 70, 229, 0.08) !important;
}

.resource-presentation-header .btn-ui:disabled,
.resource-text-controls button:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

.resource-text-controls {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    background: transparent !important;
    border: none !important;
}

.resource-pdf-controls {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.resource-pdf-controls[hidden] {
    display: none !important;
}

.resource-pdf-slide-count {
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    color: var(--text-muted, #64748b) !important;
    padding: 0.35rem 0.7rem !important;
    white-space: nowrap !important;
    user-select: none !important;
    background: rgba(0, 0, 0, 0.04) !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.resource-presentation-content {
    --resource-text-scale: 1;
    max-width: 78ch;
    margin-block-start: clamp(1rem, 2.5vh, 2rem);
    color: var(--text-main);
    font-size: calc(clamp(1.1rem, 2vw, 1.5rem) * var(--resource-text-scale));
    line-height: 1.6;
}

.resource-presentation-content h4 {
    margin: 1.5em 0 0.45em;
    color: var(--color-purple);
    font-family: var(--font-display);
    font-size: 1.35em;
    font-style: normal;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.resource-presentation-content p,
.resource-presentation-content ul {
    margin: 0 0 1.15em;
}

.resource-presentation-content ul {
    padding-inline-start: 1.3em;
}

.resource-presentation-content li {
    padding-inline-start: 0.3em;
    margin-block-end: 0.45em;
}

.resource-pdf-viewer {
    width: 100%;
    margin-block-start: clamp(1rem, 3vh, 2rem);
    display: grid;
    justify-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
}

.resource-pdf-viewer[hidden] {
    display: none;
}

.resource-pdf-page {
    width: min(100%, 1100px);
    margin: 0;
    background: #ffffff;
    box-shadow: 0 3px 14px oklch(18% 0.02 255 / 0.18);
}

.resource-pdf-page canvas {
    display: block;
    width: 100%;
    height: auto;
    background: #ffffff;
}

.resource-pdf-loading,
.resource-pdf-load-error {
    width: min(100%, 1100px);
    min-height: 16rem;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-workflow-sm);
    color: var(--text-muted);
    font-weight: 800;
    text-align: center;
}


.resource-pdf-slide-count {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-color, #1e293b);
    padding: 0 0.4rem;
    white-space: nowrap;
    user-select: none;
}

.resource-pdf-slide-stage {
    position: relative;
    width: min(100%, 1200px);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    background: #0f172a;
}

.resource-pdf-stage-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 3rem;
    height: 3.5rem;
    border: none;
    background: rgba(15, 23, 42, 0.55);
    color: #ffffff;
    display: grid;
    place-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.2s ease, opacity 0.2s ease;
    opacity: 0.4;
}

.resource-pdf-slide-stage:hover .resource-pdf-stage-nav {
    opacity: 0.9;
}

.resource-pdf-stage-nav:hover:not(:disabled) {
    background: rgba(15, 23, 42, 0.85);
    opacity: 1;
}

.resource-pdf-stage-nav:disabled {
    opacity: 0.15;
    cursor: not-allowed;
}

.resource-pdf-stage-nav.stage-prev {
    left: 0;
    border-radius: 0 0.75rem 0.75rem 0;
}

.resource-pdf-stage-nav.stage-next {
    right: 0;
    border-radius: 0.75rem 0 0 0.75rem;
}

.resource-pdf-stage-nav svg {
    width: 1.75rem;
    height: 1.75rem;
}

/* Fullscreen Document Presentation Mode */
body.is-resource-fullscreen #resourcePresentation,
#resourcePresentation:fullscreen,
#resourcePresentation.is-in-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    background: #090d16 !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#resourcePresentation:-webkit-full-screen {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    background: #090d16 !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.is-resource-fullscreen .resource-presentation-toolbar,
body.is-resource-fullscreen #resourcePresentationHeader,
#resourcePresentation:fullscreen .resource-presentation-toolbar,
#resourcePresentation:fullscreen #resourcePresentationHeader,
#resourcePresentation.is-in-fullscreen .resource-presentation-toolbar,
#resourcePresentation.is-in-fullscreen #resourcePresentationHeader {
    display: none !important;
}
#resourcePresentation:-webkit-full-screen .resource-presentation-toolbar,
#resourcePresentation:-webkit-full-screen #resourcePresentationHeader {
    display: none !important;
}

body.is-resource-fullscreen #resourcePdfViewer,
#resourcePresentation:fullscreen #resourcePdfViewer,
#resourcePresentation.is-in-fullscreen #resourcePdfViewer {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #090d16 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}
#resourcePresentation:-webkit-full-screen #resourcePdfViewer {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #090d16 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body.is-resource-fullscreen #resourcePdfViewer.is-scroll-mode,
#resourcePresentation:fullscreen #resourcePdfViewer.is-scroll-mode,
#resourcePresentation.is-in-fullscreen #resourcePdfViewer.is-scroll-mode {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: 5rem !important;
    padding-bottom: 4rem !important;
    gap: 2rem !important;
    box-sizing: border-box !important;
}
#resourcePresentation:-webkit-full-screen #resourcePdfViewer.is-scroll-mode {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: 5rem !important;
    padding-bottom: 4rem !important;
    gap: 2rem !important;
    box-sizing: border-box !important;
}

.resource-pdf-viewer.is-scroll-mode .resource-pdf-page {
    width: min(calc(92 * var(--tp-vw)), 900px) !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35) !important;
    overflow: hidden !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
}

.resource-pdf-viewer.is-scroll-mode .resource-pdf-page canvas {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

body.is-resource-fullscreen .resource-pdf-slide-stage,
#resourcePresentation:fullscreen .resource-pdf-slide-stage,
#resourcePresentation.is-in-fullscreen .resource-pdf-slide-stage {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}
#resourcePresentation:-webkit-full-screen .resource-pdf-slide-stage {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body.is-resource-fullscreen .resource-pdf-slide-stage canvas,
#resourcePresentation:fullscreen .resource-pdf-slide-stage canvas,
#resourcePresentation.is-in-fullscreen .resource-pdf-slide-stage canvas {
    max-width: calc(95 * var(--tp-vw)) !important;
    max-height: calc(88 * var(--tp-vh)) !important;
    object-fit: contain !important;
    box-shadow: 0 12px 45px rgba(0,0,0,0.7) !important;
    border-radius: 8px !important;
}
#resourcePresentation:-webkit-full-screen .resource-pdf-slide-stage canvas {
    max-width: calc(95 * var(--tp-vw)) !important;
    max-height: calc(88 * var(--tp-vh)) !important;
    object-fit: contain !important;
    box-shadow: 0 12px 45px rgba(0,0,0,0.7) !important;
    border-radius: 8px !important;
}

/* FULLSCREEN TOPBAR (Top Left: Exact White Dashboard Logo, Top Right: Slide Count + Minimise) */
.resource-fullscreen-topbar {
    display: none;
    position: fixed;
    top: 1rem;
    left: 1.25rem;
    right: 1.25rem;
    z-index: 1000000;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

body.is-resource-fullscreen .resource-fullscreen-topbar,
#resourcePresentation:fullscreen .resource-fullscreen-topbar,
#resourcePresentation.is-in-fullscreen .resource-fullscreen-topbar {
    display: flex !important;
}
#resourcePresentation:-webkit-full-screen .resource-fullscreen-topbar {
    display: flex !important;
}

.resource-fullscreen-brand {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
}

.resource-fullscreen-logo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.4rem;
    border: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    cursor: pointer;
    box-shadow: none !important;
}

.resource-fullscreen-logo-btn .brand-tutor {
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 1.4rem !important;
    letter-spacing: -0.02em !important;
    text-shadow: 2px 2px 0 #000000, 3.5px 3.5px 0 rgba(255, 255, 255, 0.35) !important;
}

.resource-fullscreen-logo-btn .brand-pulse-badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border: 3px solid #ffffff !important;
    border-radius: 14px !important;
    padding: 0.18rem 0.65rem !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    margin-left: 0.2rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 3.5px 3.5px 0 #ffffff !important;
    transform: rotate(-2.5deg) !important;
}

.resource-fullscreen-logo-btn .brand-pulse-badge svg {
    width: 1.1rem !important;
    height: 1.1rem !important;
    stroke-width: 3 !important;
    color: #ffffff !important;
    margin-left: 0.15rem !important;
    filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.4)) !important;
}

.resource-fullscreen-actions {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.resource-fullscreen-slide-counter {
    background: rgba(15, 23, 42, 0.75);
    color: #ffffff;
    padding: 0.5rem 0.95rem;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    white-space: nowrap;
}

.resource-fullscreen-minimize-btn {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    backdrop-filter: blur(8px);
    display: grid;
    place-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.resource-fullscreen-minimize-btn:hover {
    background: rgba(239, 68, 68, 0.95);
    border-color: #f87171;
    transform: scale(1.08);
}

.resource-fullscreen-minimize-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.resource-pdf-loading svg {
    animation: spin 0.9s linear infinite;
}

@media (hover: hover) and (pointer: fine) {
    .resource-settings-open:hover {
        background: color-mix(in oklch, var(--color-purple) 8%, var(--panel-bg));
    }

    .resource-delete-button:hover {
        background: color-mix(in oklch, var(--color-red) 16%, var(--panel-bg));
    }

    .resource-title-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 9px 0 var(--border-color);
        background: color-mix(in oklch, var(--color-purple) 8%, var(--panel-bg));
    }

    .resource-text-controls button:hover {
        background: color-mix(in oklch, var(--color-purple) 12%, var(--panel-bg));
    }
}

@media (min-width: 40rem) {
    .resource-app-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 68rem) {
    .resource-settings-layout {
        grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
        align-items: start;
    }

    .resource-library-manager {
        position: sticky;
        top: var(--space-workflow-md);
    }
}

@media (pointer: coarse) {

    .resource-settings-open,
    .resource-delete-button,
    .resource-title-card,
    .resource-text-controls button {
        min-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .resource-title-card {
        transition: none;
    }
}

/* Optical centring accounts for the display face and the desk's lower shadow. */
.seating-plan-dialog .seating-poster-seat .seating-seat-main span {
    transform: translateY(var(--space-seating-name-optical));
}

/* True tile centring: include padding inside the 100% name container. */
.seating-plan-dialog .seating-poster-seat .seating-seat-main {
    width: 100%;
    box-sizing: border-box;
}

.seating-plan-dialog .seating-poster-seat .seating-seat-main span {
    transform: none;
}

/* Final desktop rail geometry follows all legacy dock declarations. */
@media (min-width: 1025px) {
    body>header .utility-tray {
        top: 16.75rem;
    }

    body>header .routine-tray {
        top: 28.5rem;
    }
}

/* ==========================================================================
   WEBSITE GUIDE & KNOWLEDGE BASE STYLES
   ========================================================================== */

#userGuideView {
    padding: 1rem 1.5rem 3rem 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.guide-header-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 3px solid #ddd6fe;
    border-radius: 20px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.06);
}

.guide-header-main h2 {
    font-size: 1.85rem;
    font-weight: 800;
    color: #4c1d95;
    margin: 0.35rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.guide-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    background: #7c3aed;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.guide-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.guide-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 320px;
}

.guide-search-icon {
    position: absolute;
    left: 1rem;
    width: 1.1rem;
    height: 1.1rem;
    color: #7c3aed;
    pointer-events: none;
}

.guide-search-wrapper input {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 2.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    border: 2px solid #c4b5fd;
    border-radius: 14px;
    background: #ffffff;
    color: #2e1065;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.guide-search-wrapper input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15);
}

.guide-search-clear {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1rem;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.25rem;
}

.guide-search-clear:hover {
    color: #475569;
}

.guide-layout-shell {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
}

/* --- GUIDE SIDEBAR --- */
.guide-sidebar {
    width: 330px;
    flex-shrink: 0;
    background: #ffffff;
    border: 3px solid #e2e8f0;
    border-radius: 20px;
    padding: 1.25rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 1rem;
    max-height: calc(100 * var(--tp-vh) - 120px);
    overflow-y: auto;
}

.guide-sidebar-group {
    margin-bottom: 1.25rem;
}

.guide-sidebar-group:last-child {
    margin-bottom: 0;
}

.guide-nav-group-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}

.guide-nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.9rem;
    border: 2px solid transparent;
    border-radius: 14px;
    background: #f8fafc;
    color: #334155;
    text-align: left;
    cursor: pointer;
    margin-bottom: 0.4rem;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.guide-nav-btn i {
    width: 1.3rem;
    height: 1.3rem;
    color: #64748b;
    flex-shrink: 0;
}

.guide-nav-text {
    display: flex;
    flex-direction: column;
}

.guide-nav-text strong {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.guide-nav-text span {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 0.15rem;
}

.guide-nav-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateX(3px);
}

.guide-nav-btn.active {
    background: #f5f3ff;
    border-color: #7c3aed;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.12);
}

.guide-nav-btn.active i {
    color: #7c3aed;
}

.guide-nav-btn.active .guide-nav-text strong {
    color: #5b21b6;
}

/* --- GUIDE MAIN CONTENT AREA --- */
.guide-content-panel {
    flex: 1;
    min-width: 0;
    background: #ffffff;
    border: 3px solid #e2e8f0;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
}

.guide-topic-article {
    animation: fadeInGuide 0.3s ease;
}

@keyframes fadeInGuide {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.guide-article-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 1.5rem;
    border-bottom: 2px dashed #e2e8f0;
    margin-bottom: 1.75rem;
}

.guide-topic-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.tag-purple {
    background: #f3e8ff;
    color: #7e22ce;
}

.tag-blue {
    background: #dbeafe;
    color: #1e40af;
}

.tag-green {
    background: #dcfce7;
    color: #15803d;
}

.tag-pink {
    background: #fce7f3;
    color: #be185d;
}

.tag-orange {
    background: #ffedd5;
    color: #c2410c;
}

.tag-red {
    background: #fee2e2;
    color: #b91c1c;
}

.guide-article-hero-text h3 {
    font-size: 1.65rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.4rem;
}

.guide-article-hero-text p {
    font-size: 1.02rem;
    color: #475569;
    max-width: 680px;
    line-height: 1.5;
}

.guide-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: 12px;
    flex-shrink: 0;
}

/* --- VISUAL ILLUSTRATIONS & MOCKUPS --- */
.guide-illustration-box {
    margin-bottom: 2rem;
}

.guide-mockup-window {
    background: #0f172a;
    border: 3px solid #1e293b;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
}

.guide-mockup-bar {
    background: #1e293b;
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mock-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.mock-dot.red {
    background: #ef4444;
}

.mock-dot.yellow {
    background: #f59e0b;
}

.mock-dot.green {
    background: #10b981;
}

.mock-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    margin-left: 0.5rem;
}

.guide-screenshot-frame {
    background: #0f172a;
    line-height: 0;
    overflow: hidden;
}

.guide-real-screenshot {
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: cover;
    object-position: top center;
    display: block;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.guide-mockup-window:hover .guide-real-screenshot {
    transform: scale(1.015);
}

.guide-mockup-body {
    background: #f8fafc;
    padding: 1.25rem;
    min-height: 220px;
}

/* Dashboard Mockup */
.mockup-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
}

.mockup-logo {
    font-weight: 800;
    font-size: 0.95rem;
    color: #4c1d95;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mock-badge {
    background: #ddd6fe;
    color: #5b21b6;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
}

.mockup-top-nav {
    display: flex;
    gap: 0.5rem;
}

.mockup-chip {
    background: #f1f5f9;
    padding: 0.3rem 0.65rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
}

.mockup-categories {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    overflow-x: auto;
}

.mockup-cat-pill {
    padding: 0.35rem 0.85rem;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
}

.mockup-cat-pill.active {
    background: #7c3aed;
    color: #ffffff;
    border-color: #7c3aed;
}

.mockup-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.85rem;
}

.mockup-app-card {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.85rem 0.75rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.mock-app-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.mockup-app-card strong {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e293b;
}

.mock-app-tag {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 0.2rem;
}

/* Seating Mockup */
.mockup-teacher-board {
    background: #1e293b;
    color: #38bdf8;
    text-align: center;
    padding: 0.6rem;
    font-size: 0.8rem;
    font-weight: 800;
    border-radius: 8px;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
}

.mockup-desks-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.mockup-desk-pair {
    display: flex;
    gap: 0.4rem;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    padding: 0.5rem;
}

.mockup-seat {
    padding: 0.4rem 0.75rem;
    background: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.mockup-seat.occupied {
    background: #e0e7ff;
    border-color: #6366f1;
    color: #3730a3;
}

.mockup-seat.empty {
    background: #f8fafc;
    border-style: dashed;
    color: #94a3b8;
}

.seat-num {
    background: #3730a3;
    color: #fff;
    font-size: 0.65rem;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

.mockup-seating-toolbar {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.mock-btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 8px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
}

.mock-btn-sm.primary {
    background: #7c3aed;
    color: #ffffff;
    border-color: #7c3aed;
}

.mock-btn-sm.accent {
    background: #059669;
    color: #ffffff;
    border-color: #059669;
}

/* Roster / Birthday Mockup */
.mockup-birthday-banner {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    border: 2px solid #f472b6;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.bday-icon {
    font-size: 1.6rem;
}

.mockup-birthday-banner strong {
    font-size: 0.88rem;
    color: #9d174d;
    display: block;
}

.mockup-birthday-banner span {
    font-size: 0.8rem;
    color: #be185d;
}

.mockup-table {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.mockup-table-header {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    background: #f1f5f9;
    padding: 0.5rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
}

.mockup-table-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    align-items: center;
    padding: 0.6rem 0.85rem;
    border-top: 1px solid #f1f5f9;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
}

.mockup-table-row.highlight-bday {
    background: #fdf2f8;
}

.mock-tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 800;
    border-radius: 6px;
    text-align: center;
}

.mock-tag.blue {
    background: #dbeafe;
    color: #1e40af;
}

.mock-tag.bday {
    background: #be185d;
    color: #ffffff;
}

.mock-tag.gray {
    background: #f1f5f9;
    color: #64748b;
}

.mock-tag.green {
    background: #dcfce7;
    color: #15803d;
}

/* Pet Showcase Mockup */
.mockup-pet-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.mockup-pet-card {
    background: #ffffff;
    border: 2px solid #fdba74;
    border-radius: 14px;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.08);
}

.pet-avatar-large {
    font-size: 3rem;
}

.pet-details h4 {
    font-size: 1rem;
    font-weight: 800;
    color: #c2410c;
    margin-bottom: 0.4rem;
}

.pet-stat-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 0.25rem;
}

.bar-fill-track {
    width: 90px;
    height: 8px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: #f97316;
    border-radius: 10px;
}

.bar-fill.green-fill {
    background: #10b981;
}

.mockup-pet-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* App Suite & Utilities Mockups */
.mockup-app-suite,
.mockup-utility-tray,
.mockup-security-panel {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.mockup-app-row {
    display: flex;
    gap: 0.85rem;
}

.mini-app-badge {
    flex: 1;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.mini-app-badge .icon {
    font-size: 1.4rem;
}

.mini-app-badge strong {
    font-size: 0.82rem;
    color: #1e293b;
    display: block;
}

.mini-app-badge small {
    font-size: 0.72rem;
    color: #64748b;
}

.mockup-utility-dock {
    display: flex;
    gap: 0.5rem;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    padding: 0.5rem;
    border-radius: 10px;
    justify-content: center;
}

.dock-item {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
}

.dock-item.active {
    background: #2563eb;
    color: #ffffff;
}

.mockup-points-preview {
    display: flex;
    gap: 1rem;
}

.house-team {
    flex: 1;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.red-team {
    border-color: #fca5a5;
}

.blue-team {
    border-color: #93c5fd;
}

.score {
    font-size: 1rem;
    font-weight: 800;
    color: #1e293b;
}

.mockup-pin-box {
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    max-width: 320px;
    margin: 0 auto;
}

.pin-header {
    font-weight: 800;
    color: #334155;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.pin-inputs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.pin-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e2e8f0;
    display: inline-block;
}

.pin-dot.filled {
    background: #7c3aed;
}

.pin-status-text {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
}

/* --- STEP CARDS --- */
.guide-steps-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.guide-step-card {
    display: flex;
    gap: 1.25rem;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.15rem 1.25rem;
    transition: all 0.2s ease;
}

.guide-step-card:hover {
    border-color: #cbd5e1;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.guide-step-number {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 6px rgba(124, 58, 237, 0.25);
}

.guide-step-content h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.35rem;
}

.guide-step-content p {
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

/* --- TIP BOX --- */
.guide-tip-box {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: #fffbeb;
    border: 2px solid #fde68a;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    color: #92400e;
    font-size: 0.92rem;
    line-height: 1.45;
}

.tip-icon {
    width: 1.3rem;
    height: 1.3rem;
    color: #d97706;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* Responsive adjustments */
@media (max-width: 960px) {
    .guide-layout-shell {
        flex-direction: column;
    }

    .guide-sidebar {
        width: 100%;
        position: static;
        max-height: none;
    }

    .guide-search-wrapper {
        min-width: 100%;
    }
}

/* ---------------------------------------------------------------------- */
/* Big Questions Debate — pilot look-and-feel treatment (scoped only to   */
/* #bigQuestionsView / .bq-* classes; nothing else on the site is touched */
/* by these rules).                                                       */
/* ---------------------------------------------------------------------- */

/* The resting wash colour for Big Questions now comes from the generic
   .display-deck:has(.screen.active) rule further down (using
   --app-theme-color, same as every other app) so it matches its own deck
   colour instead of a hardcoded purple. Only the flash-on-next, watermark
   and stance chips keep their own purple identity below. */

.bq-question-card {
    position: relative;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
}

.bq-question-card::before {
    content: "?";
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(7rem, 22vw, 15rem);
    line-height: 1;
    color: var(--color-purple);
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%) rotate(var(--bq-wm-rot, 0deg)) translate(var(--bq-wm-x, 0px), var(--bq-wm-y, 0px));
}

.bq-question-card.bq-beat::before {
    animation: bqWatermarkBeat 480ms var(--ease-game-out, ease-out);
}

@keyframes bqWatermarkBeat {
    0% {
        transform: translate(-50%, -50%) rotate(var(--bq-wm-rot, 0deg)) translate(var(--bq-wm-x, 0px), var(--bq-wm-y, 0px)) scale(1);
    }

    40% {
        transform: translate(-50%, -50%) rotate(var(--bq-wm-rot, 0deg)) translate(var(--bq-wm-x, 0px), var(--bq-wm-y, 0px)) scale(1.12);
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--bq-wm-rot, 0deg)) translate(var(--bq-wm-x, 0px), var(--bq-wm-y, 0px)) scale(1);
    }
}

.display-deck:has(#bigQuestionsView.active.bq-flash) {
    animation: bqWashFlash 700ms var(--ease-game-out, ease-out);
}

@keyframes bqWashFlash {
    0% {
        background-color: color-mix(in oklch, var(--app-theme-color, var(--color-purple)) 22%, white);
    }

    100% {
        background-color: color-mix(in oklch, var(--app-theme-color, var(--color-purple)) 6%, white);
    }
}

.bq-question-text {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 600;
    line-height: 1.5;
    font-size: clamp(2rem, 3.6vw, 3.5rem);
}

.bq-question-text.bq-enter {
    animation: bqTextRise 520ms var(--ease-game-out, ease-out);
}

@keyframes bqTextRise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bq-key-word {
    background-image: linear-gradient(120deg, color-mix(in oklch, var(--color-purple) 35%, transparent), color-mix(in oklch, var(--color-purple) 35%, transparent));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 0% 40%;
    padding: 0 0.1em;
    border-radius: 3px;
    animation: bqHighlightSweep 480ms var(--ease-game-out, ease-out) 1.1s forwards;
}

@keyframes bqHighlightSweep {
    to {
        background-size: 100% 40%;
    }
}

.bq-stance-row {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.bq-stance-chip {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    padding: 0.6rem 1.4rem;
    border: 3px solid var(--color-purple);
    border-radius: 999px;
    background: #ffffff;
    color: var(--color-purple-dark);
    cursor: pointer;
    transition: background-color 0.15s var(--ease-game-out, ease-out), color 0.15s var(--ease-game-out, ease-out), transform 0.15s var(--ease-game-out, ease-out);
}

.bq-stance-chip:hover {
    transform: translateY(-2px);
}

.bq-stance-chip.active {
    background: var(--color-purple);
    color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {

    .bq-question-card.bq-beat::before,
    .display-deck:has(#bigQuestionsView.active.bq-flash),
    .bq-question-text.bq-enter,
    .bq-key-word,
    .bq-stance-chip {
        animation: none;
    }

    .bq-key-word {
        background-size: 100% 40%;
    }
}

/* ---------------------------------------------------------------------- */
/* Generic prompt-card system — reused by every "single statement + Next" */
/* app (Icebreaker Chat, Estimation Face-Off, Fact or Fiction, British    */
/* Values, Definition Detective, Sequence Solver). Each app opts in by    */
/* adding the classes below to its own existing markup; nothing here      */
/* changes behaviour for apps that don't opt in. Colour is inherited from */
/* --app-theme-color, which switchView() already sets per app, so no      */
/* colour needs to be hardcoded per app here.                             */
/* ---------------------------------------------------------------------- */

.app-prompt-card {
    position: relative;
    overflow: hidden;
}

.app-prompt-card::before {
    content: var(--app-glyph, "");
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(6rem, 20vw, 13rem);
    line-height: 1;
    color: var(--app-theme-color, var(--color-purple));
    opacity: 0.10;
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%) rotate(var(--wm-rot, -3deg)) translate(var(--wm-x, 6px), var(--wm-y, -4px));
}

.app-prompt-card.app-card-enter::before {
    animation: appWatermarkBeat 480ms var(--ease-game-out, ease-out);
}

/* For hosts that are just a line or two of text with no padding of their own
   (a <p> or <h3>, rather than a padded .trivia-box) — the default glyph size
   is taller than the host and gets clipped. Use a smaller glyph and let it
   spill into the host's own margin instead of clipping it. */
.app-prompt-card--compact {
    overflow: visible;
}

.app-prompt-card--compact::before {
    font-size: clamp(2.75rem, 9vw, 5rem);
}

@keyframes appWatermarkBeat {
    0% {
        transform: translate(-50%, -50%) rotate(var(--wm-rot, -3deg)) translate(var(--wm-x, 6px), var(--wm-y, -4px)) scale(1);
    }

    40% {
        transform: translate(-50%, -50%) rotate(var(--wm-rot, -3deg)) translate(var(--wm-x, 6px), var(--wm-y, -4px)) scale(1.1);
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--wm-rot, -3deg)) translate(var(--wm-x, 6px), var(--wm-y, -4px)) scale(1);
    }
}

/* Edge-to-edge colour wash for every app (not just the ones with a prompt
   card) — reaches the .display-deck's actual edges and rounded corners,
   using whichever accent colour that app already has (--app-theme-color is
   set per app by applyViewTheme(), so this needs no per-app colour choice). */
.display-deck:has(.screen.active) {
    background: color-mix(in oklch, var(--app-theme-color, var(--color-purple)) 6%, white);
    transition: background-color 0.4s var(--ease-game-out, ease-out);
}

.app-prompt-text {
    position: relative;
    z-index: 1;
}

.app-prompt-text.app-card-enter {
    animation: appTextRise 520ms var(--ease-game-out, ease-out);
}

@keyframes appTextRise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Typography modifiers — pick the one that matches the app's personality. */
.app-type-serif {
    font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 600;
    line-height: 1.5;
}

.app-type-punchy {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.app-type-playful {
    font-weight: 700;
    letter-spacing: 0.3px;
}

@media (prefers-reduced-motion: reduce) {

    .app-prompt-card.app-card-enter::before,
    .app-prompt-text.app-card-enter {
        animation: none;
    }
}

/* ---------------------------------------------------------------------- */
/* Global tap ripple — a purely visual overlay (pointer-events: none) that  */
/* sits on top of the whole page and never intercepts clicks or touches.   */
/* It does not modify any existing element's markup, position or overflow, */
/* so it cannot affect any other button/card's own styling.                */
/* ---------------------------------------------------------------------- */

.tp-ripple-layer {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2100000;
}

.tp-ripple {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: var(--ripple-color, var(--color-purple));
    opacity: 0.3;
    transform: scale(0);
    animation: tpRippleExpand 550ms ease-out forwards;
}

@keyframes tpRippleExpand {
    to {
        transform: scale(9);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tp-ripple-layer {
        display: none;
    }
}

/* ==========================================================================
   TUTOR PULSE - CHUNKY TACTILE CARD REDESIGN & FEATURE WIDGET SYSTEM
   ========================================================================== */

/* Enhanced grid container to support multi-span widget cards */
.menu-grid {
    grid-auto-flow: dense !important;
}

/* Whitelisted Large Card Spans */
.menu-card-shell[data-card-size="large"][data-app-id="student_points"],
.menu-card-shell[data-card-size="large"][data-app-id="morning_mood"],
.menu-card-shell[data-card-size="large"][data-app-id="class_notes"] {
    grid-column: span 2;
    grid-row: span 2;
}

.menu-card-shell[data-card-size="large"][data-app-id="daily_riddle"],
.menu-card-shell[data-card-size="large"][data-app-id="audiobooks"],
.menu-card-shell[data-card-size="large"][data-app-id="word_of_the_day"],
.menu-card-shell[data-card-size="large"][data-app-id="on_this_day"],
.menu-card-shell[data-card-size="large"][data-app-id="quote_of_the_week"] {
    grid-column: span 2;
    grid-row: span 1;
}

/* Mobile responsive safety fallback */
@media (max-width: 768px) {
    .menu-card-shell[data-card-size="large"] {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}

/* Card Size Toggle Button - HIDDEN by default, visible ONLY during Edit Mode */
.menu-card-size-toggle {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
    display: none; /* Hidden during normal viewing */
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 3px solid var(--border-color);
    background: #ffffff;
    box-shadow: 2px 2px 0px 0px var(--border-color);
    cursor: pointer;
    z-index: 20;
    transition: transform 0.15s ease, background 0.15s ease;
    color: var(--border-color);
}

.menu-grid.is-editing-layout .menu-card-size-toggle {
    display: flex !important;
}

.menu-card-size-toggle:hover {
    transform: scale(1.15);
    background: var(--color-purple, #8b5cf6);
    color: #ffffff;
}

.menu-card-size-toggle svg {
    width: 1.1rem;
    height: 1.1rem;
    stroke-width: 2.5;
}

/* Edit Mode Card Jiggle & Drag Handlers */
@keyframes cardJiggle {
    0% { transform: rotate(-0.75deg) translateY(0); }
    50% { transform: rotate(0.75deg) translateY(-1px); }
    100% { transform: rotate(-0.75deg) translateY(0); }
}

.menu-grid.is-editing-layout .menu-card-shell:nth-child(odd) {
    animation: cardJiggle 0.52s infinite ease-in-out;
    cursor: grab;
}

.menu-grid.is-editing-layout .menu-card-shell:nth-child(even) {
    animation: cardJiggle 0.58s infinite ease-in-out reverse;
    cursor: grab;
}

.menu-grid.is-editing-layout .menu-card {
    border-style: dashed;
}

.menu-grid.is-editing-layout .menu-card-shell:active {
    cursor: grabbing;
}

.menu-grid.is-editing-layout .menu-card-shell.dragging {
    opacity: 0.45;
    transform: scale(0.96);
}

.menu-card-shell.drag-over {
    outline: 3px dashed var(--color-purple, #8b5cf6);
    outline-offset: 4px;
    border-radius: 20px;
    background: color-mix(in oklch, var(--color-purple) 15%, transparent);
}

/* Prominent Floating Edit Done Button (Top Right) */
.dashboard-edit-floating-bar {
    position: absolute;
    top: 0.75rem;
    right: 1.25rem;
    z-index: 100;
    animation: appCardFadeIn 0.2s ease-out;
}

.edit-done-btn {
    background: #10b981 !important;
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    padding: 0.5rem 1.4rem !important;
    border-radius: 14px !important;
    border: 3px solid var(--border-color) !important;
    box-shadow: 0 5px 0 var(--border-color) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.edit-done-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 7px 0 var(--border-color) !important;
}

.edit-done-btn:active {
    transform: translateY(2px) !important;
    box-shadow: 0 2px 0 var(--border-color) !important;
}

/* Large Menu Card Styling Override */
.menu-card.menu-card-large {
    align-items: stretch;
    text-align: left;
    padding: 1.2rem 1.3rem;
    cursor: pointer;
    background: var(--panel-bg);
}

/* Widget General Layout */
.widget-large-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 0.75rem;
    box-sizing: border-box;
}

.widget-large-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 0.5rem;
    padding-right: 2.75rem;
    border-bottom: 2px solid color-mix(in oklab, var(--border-color) 30%, transparent);
}

.widget-header-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-color);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.widget-header-title span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-header-title svg {
    width: 1.3rem;
    height: 1.3rem;
    color: var(--color-accent, #3b82f6);
}

.widget-header-sub {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
}

.widget-badge-pill {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.25rem 0.65rem;
    border-radius: 10px;
    border: 2px solid var(--border-color);
    box-shadow: 2px 2px 0 var(--border-color);
    background: color-mix(in oklab, var(--panel-bg) 80%, white);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1;
    max-width: calc(100% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widget-date-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.25rem 0.65rem;
    border-radius: 10px;
    background: color-mix(in oklab, var(--panel-bg) 80%, white);
    color: inherit;
    border: 2px solid var(--border-color);
    box-shadow: 2px 2px 0 var(--border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    line-height: 1;
}

.widget-date-badge svg,
.widget-date-badge [data-lucide] {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
    flex-shrink: 0;
}

.widget-large-body-vertical {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
    gap: 0.8rem;
    min-height: 0;
}

.widget-large-body-horizontal {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    gap: 1rem;
    min-height: 0;
}

.widget-large-body-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 1.1rem;
    min-height: 0;
    padding: 0.5rem 0;
}

.widget-large-body-full {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-height: 0;
}

/* House Points Line Graph Widget - Flexible Height Layout */
.widget-large-layout.widget-house-points {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hp-widget-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.75rem;
    min-height: 0;
}

.widget-house-points .widget-line-graph-container {
    width: 100%;
    flex: 1;
    min-height: 120px;
    position: relative;
    border-bottom: 2px solid color-mix(in oklab, var(--border-color) 30%, transparent);
    overflow: hidden;
}

.widget-house-points .widget-line-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.pupil-rank-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    width: 100%;
    flex-shrink: 0;
}

.pupil-rank-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.65rem;
    border-radius: 10px;
    background: color-mix(in oklch, var(--panel-bg) 75%, white);
    border: 2px solid var(--border-color);
    box-shadow: 2px 2px 0 var(--border-color);
    font-size: 0.85rem;
    font-weight: 700;
}

.pupil-rank-num {
    font-size: 0.88rem;
    font-weight: 900;
    color: var(--color-purple, #8b5cf6);
    width: 20px;
}

.pupil-rank-name {
    flex: 1;
    margin: 0 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.pupil-rank-pts {
    font-weight: 900;
    color: var(--color-green, #10b981);
    background: color-mix(in oklch, var(--color-green) 15%, transparent);
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    font-size: 0.78rem;
}

.widget-empty-note {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    font-style: italic;
    padding: 0.5rem 0;
    grid-column: span 2;
    text-align: center;
}

/* Morning Mood Gauge (Stacked Chart on Top, Moods Below) - Scaled Layout */
.widget-large-layout.widget-morning-mood {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.widget-morning-mood .widget-large-body-stacked {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    align-items: stretch;
    gap: 0.75rem;
    min-height: 0;
    padding: 0.5rem 0 0 0;
}

.mood-top-chart-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex: 1;
    min-height: 140px;
}

.mood-gauge-graphic {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
}

.mood-gauge-svg {
    width: 100%;
    height: auto;
    max-height: 165px;
    display: block;
}

.mood-gauge-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 0.88rem;
    font-weight: 900;
    color: var(--text-muted);
    margin-top: -4px;
    padding: 0 4px;
}

.mood-recent-data-box {
    width: 100%;
    background: color-mix(in oklab, var(--panel-bg) 85%, #fef3c7);
    border: 2.5px solid var(--border-color);
    border-radius: 16px;
    padding: 0.6rem 0.65rem;
    box-shadow: 2px 2px 0 var(--border-color);
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden;
}

.mood-data-subhead {
    font-size: 0.82rem;
    font-weight: 900;
    color: var(--text-color);
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
}

.mood-data-pills-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    width: 100%;
    box-sizing: border-box;
}

.mood-recent-pill {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--panel-bg);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 0.35rem 0.45rem;
    font-size: 0.78rem;
    font-weight: 800;
    box-shadow: 1px 1px 0 var(--border-color);
    box-sizing: border-box;
}

.mood-pill-left {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 800;
    min-width: 0;
}

.mood-pill-left svg {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
    stroke-width: 2.5;
}

.mood-pill-right {
    font-weight: 900;
    color: var(--text-color);
    margin-left: 0.25rem;
    flex-shrink: 0;
}

/* Word of the Day Centralized Layout */
.widget-large-body-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    min-height: 0;
    width: 100%;
}

.word-widget-center-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
}

.word-hero-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.word-hero-text {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--text-color);
    letter-spacing: -0.02em;
    line-height: 1;
}

.word-hero-type {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--color-blue, #3b82f6);
    background: color-mix(in oklch, var(--color-blue) 15%, transparent);
    padding: 0.25rem 0.65rem;
    border-radius: 10px;
    border: 2px solid var(--border-color);
    box-shadow: 2px 2px 0 var(--border-color);
    text-transform: lowercase;
}

.word-hero-def {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1.4;
    text-align: center;
}

/* Quote of the Week Centralized Layout */
.quote-widget-center-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 92%;
    margin: 0 auto;
    gap: 0.35rem;
}

.quote-hero-text {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-color);
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.quote-hero-author {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
}

/* Audiobook Widget Large Cover Artwork */
.audiobook-large-cover-frame {
    width: 68px;
    height: 84px;
    border-radius: 12px;
    border: 3px solid var(--border-color);
    background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
    box-shadow: 3px 3px 0 var(--border-color);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audiobook-large-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.audiobook-large-cover-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 900;
    font-size: 0.65rem;
    gap: 0.2rem;
}

.audiobook-large-cover-fallback svg {
    width: 1.6rem;
    height: 1.6rem;
}

.audiobook-widget-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.audiobook-widget-now-playing {
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--color-purple, #8b5cf6);
    letter-spacing: 0.05em;
}

.audiobook-widget-book-title {
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audiobook-widget-book-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audiobook-widget-progress-track {
    height: 8px;
    background: color-mix(in oklab, var(--border-color) 20%, transparent);
    border-radius: 4px;
    border: 1.5px solid var(--border-color);
    overflow: hidden;
    margin-top: 0.25rem;
}

.audiobook-progress-fill {
    height: 100%;
    background: var(--color-purple, #8b5cf6);
    border-radius: 3px;
}

/* --- Background audiobook playback --- */

/* Minimised player: stays mounted (so the YouTube iframe keeps playing) but is
   invisible and click-through. */
.listening-modal-overlay.is-backgrounded {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.audiobook-modal-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
    z-index: 100;
}

.audiobook-modal-action {
    padding: 0.4rem 0.8rem;
    min-height: auto;
    font-size: 0.9rem;
    box-shadow: 0 3px 0 var(--border-color);
    transform: none;
    border-color: var(--border-color);
}

.audiobook-modal-action--close {
    background: #fee2e2;
}

.audiobook-modal-action--keep {
    background: color-mix(in oklab, var(--ab-accent, var(--color-purple, #8b5cf6)) 18%, var(--panel-bg));
}

/* Equaliser bars: animate only while the root says it's playing. */
.audiobook-eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 0.8rem;
    flex: none;
}

.audiobook-eq i {
    display: block;
    width: 3px;
    height: 35%;
    border-radius: 2px;
    background: var(--color-purple, #8b5cf6);
}

.is-playing .audiobook-eq i {
    animation: audiobook-eq-bounce 0.9s ease-in-out infinite;
}

.is-playing .audiobook-eq i:nth-child(2) { animation-delay: -0.3s; }
.is-playing .audiobook-eq i:nth-child(3) { animation-delay: -0.6s; }

@keyframes audiobook-eq-bounce {
    0%, 100% { height: 30%; }
    50% { height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .is-playing .audiobook-eq i { animation: none; height: 80%; }
}

/* Play/pause icon swap without re-running lucide on every update. */
.ab-mini-ico-pause { display: none; }
.is-playing .ab-mini-ico-play { display: none; }
.is-playing .ab-mini-ico-pause { display: inline-flex; }
.ab-mini-ico-play, .ab-mini-ico-pause { align-items: center; justify-content: center; }
.ab-mini-ico-play { display: inline-flex; }

.audiobook-mini-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border-radius: 999px;
    border: 2px solid var(--border-color);
    background: var(--panel-bg);
    color: var(--text-color);
    cursor: pointer;
}

.audiobook-mini-btn svg {
    width: 1rem;
    height: 1rem;
}

.audiobook-mini-btn--play {
    background: var(--color-purple, #8b5cf6);
    border-color: color-mix(in oklab, var(--color-purple, #8b5cf6) 60%, black);
    color: #fff;
}

.audiobook-mini-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.audiobook-mini__progress {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: color-mix(in oklab, var(--border-color) 20%, transparent);
    overflow: hidden;
}

.audiobook-mini__progress > span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--color-purple, #8b5cf6);
}

/* Floating pill, shown inside other apps. */
.audiobook-mini {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    max-width: min(22rem, calc(100% - 2rem));
    padding: 0.4rem 0.5rem 0.55rem 0.4rem;
    border: 3px solid var(--border-color);
    border-radius: 999px;
    background: var(--panel-bg);
    box-shadow: 0 4px 0 var(--border-color), 0 10px 24px oklch(22% 0.012 250 / 0.18);
}

.audiobook-mini[hidden] {
    display: none;
}

.audiobook-mini > .audiobook-mini__progress {
    position: absolute;
    left: 1.4rem;
    right: 1.4rem;
    bottom: 0.2rem;
    height: 3px;
}

.audiobook-mini__open {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.audiobook-mini__cover {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    border: 2px solid var(--border-color);
    background: var(--color-purple, #8b5cf6) center / cover no-repeat;
}

.audiobook-mini__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.audiobook-mini__title {
    font-size: 0.85rem;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audiobook-mini__sub {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

.audiobook-mini-btn--stop {
    width: 1.8rem;
    height: 1.8rem;
}

/* Home card: standard size while live. */
.audiobook-card-live {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.audiobook-card-live__row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.audiobook-card-live__text {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

/* Home card: large widget while live. */
.audiobook-widget-live-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.audiobook-widget-live-time {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.audiobook-widget-live-controls {
    display: inline-flex;
    gap: 0.35rem;
}

.widget-audiobooks.is-live .widget-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* On This Day Widget */
.widget-otd-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.widget-otd-year {
    font-size: 0.82rem;
    font-weight: 900;
    color: var(--color-amber-dark, #b45309);
    letter-spacing: 0.05em;
}

.widget-otd-event {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.4;
}

.widget-otd-prompt {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

/* Daily Riddle Pure Text Widget */
.widget-riddle-pure-text {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.45;
    width: 100%;
}

.audiobook-progress-bar {
    height: 100%;
    background: #a855f7;
    border-radius: 3px;
}

/* Word of the Day Widget */
.word-widget-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.word-widget-term {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--text-color);
    letter-spacing: 0.03em;
}

.word-widget-term small {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    font-style: italic;
}

.word-widget-def {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.3;
}

/* Hallmark · component: timetable rail · genre: playful · theme: existing TutorPulse
 * states: default · empty · weekend · ready · collapsed(tab) · open(overlay)
 * contrast: pass · responsive: 375 / 768 / 1024 / 1280
 */
.timetable-rail {
    position: fixed;
    z-index: 881;
    top: 7.75rem;
    right: 0;
    width: 188px;
    max-height: calc(100 * var(--tp-vh) - 9.5rem);
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.55rem 0.4rem 0.65rem 0.55rem;
    border: 3px solid var(--border-color);
    border-right: 0;
    border-radius: 16px 0 0 16px;
    background: var(--panel-bg);
    box-shadow: 0 5px 0 var(--border-color);
    overflow: hidden;
}

.timetable-rail__heading {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.05rem 0.2rem 0.35rem;
    color: var(--text-main);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.055em;
    line-height: 1;
    text-transform: uppercase;
}

.timetable-rail__spark {
    display: grid;
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    place-items: center;
    border: 2px solid var(--border-color);
    border-radius: 7px;
    background: color-mix(in oklch, var(--color-green) 30%, var(--panel-bg));
}

.timetable-rail__spark svg {
    width: 0.72rem;
    height: 0.72rem;
    stroke-width: 2.7;
}

.timetable-rail__week {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 0.12rem 0.3rem;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: color-mix(in oklch, var(--color-green) 18%, var(--panel-bg));
    font-size: 0.55rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.timetable-rail__days {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.2rem;
    padding: 0 0.1rem 0.3rem;
}

.timetable-rail__day {
    padding: 0.2rem 0;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: var(--panel-bg);
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 0.56rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.timetable-rail__day.is-today {
    border-color: var(--color-green-dark);
}

.timetable-rail__day.is-active {
    background: var(--color-green);
    color: var(--text-main);
    box-shadow: 0 2px 0 var(--color-green-dark);
}

.timetable-rail__list {
    list-style: none;
    margin: 0;
    padding: 0.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    /* Take the leftover height inside the rail and scroll within it, rather than
       overflowing and being clipped by the rail's `overflow: hidden`. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.timetable-rail__tile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--tt-subject-hue, var(--panel-bg));
    box-shadow: 0 2px 0 var(--border-color);
}

.timetable-rail__body {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    flex: 1 1 auto;
    min-width: 0;
}

.timetable-rail__tile.is-free {
    background: var(--panel-bg);
    opacity: 0.72;
}

/* Subject colours — the same lesson name always lands on the same swatch.
   Twelve distinct hues round the wheel (~30° apart, so neighbouring subjects
   rarely read as the same colour); shared by the rail tiles and the Settings
   editor grid cells. */
:is(.timetable-rail__tile, .timetable-editor-grid td)[data-color="0"]  { --tt-subject-hue: oklch(88% 0.105 25); }
:is(.timetable-rail__tile, .timetable-editor-grid td)[data-color="1"]  { --tt-subject-hue: oklch(90% 0.10 55); }
:is(.timetable-rail__tile, .timetable-editor-grid td)[data-color="2"]  { --tt-subject-hue: oklch(92% 0.12 85); }
:is(.timetable-rail__tile, .timetable-editor-grid td)[data-color="3"]  { --tt-subject-hue: oklch(92% 0.13 118); }
:is(.timetable-rail__tile, .timetable-editor-grid td)[data-color="4"]  { --tt-subject-hue: oklch(90% 0.13 150); }
:is(.timetable-rail__tile, .timetable-editor-grid td)[data-color="5"]  { --tt-subject-hue: oklch(91% 0.085 185); }
:is(.timetable-rail__tile, .timetable-editor-grid td)[data-color="6"]  { --tt-subject-hue: oklch(91% 0.09 215); }
:is(.timetable-rail__tile, .timetable-editor-grid td)[data-color="7"]  { --tt-subject-hue: oklch(89% 0.10 248); }
:is(.timetable-rail__tile, .timetable-editor-grid td)[data-color="8"]  { --tt-subject-hue: oklch(89% 0.105 278); }
:is(.timetable-rail__tile, .timetable-editor-grid td)[data-color="9"]  { --tt-subject-hue: oklch(89% 0.105 305); }
:is(.timetable-rail__tile, .timetable-editor-grid td)[data-color="10"] { --tt-subject-hue: oklch(90% 0.115 332); }
:is(.timetable-rail__tile, .timetable-editor-grid td)[data-color="11"] { --tt-subject-hue: oklch(90% 0.10 358); }

.timetable-rail__period {
    font-family: var(--font-display);
    font-size: 0.56rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.timetable-rail__subject {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-main);
    overflow-wrap: break-word;
}

/* Icon sits to the left, vertically centred across the full tile height
   (period label + subject name) so it doesn't add to the tile's height. */
.timetable-rail__icon {
    flex: none;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timetable-rail__icon svg {
    width: 1.3rem;
    height: 1.3rem;
    stroke-width: 2.25;
}

/* Period times, right-aligned — start on top, end (with a leading en dash)
   below. Fills the space to the right of short subject names. */
.timetable-rail__time {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.02rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.6rem;
    line-height: 1.15;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.timetable-rail__time-end {
    opacity: 0.7;
}

.timetable-rail__time-end::before {
    content: "\2013";
    margin-right: 0.1em;
}

.timetable-rail__tile.is-free .timetable-rail__subject {
    font-weight: 700;
    color: var(--text-muted);
}

.timetable-rail__note,
.timetable-rail__empty {
    padding: 0.5rem 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.35;
    text-align: center;
}

.timetable-rail__empty p {
    margin: 0 0 0.5rem;
}

.timetable-rail__cta {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 2px solid var(--border-color);
    border-radius: 9px;
    background: color-mix(in oklch, var(--color-green) 22%, var(--panel-bg));
    box-shadow: 0 2px 0 var(--border-color);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.8rem;
    cursor: pointer;
}

.timetable-rail__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--border-color);
}

/* Collapsed edge tab (mid-width screens) */
.timetable-rail-tab {
    position: fixed;
    z-index: 881;
    top: 7.75rem;
    right: 0;
    width: 38px;
    height: 132px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 3px solid var(--border-color);
    border-right: 0;
    border-radius: 14px 0 0 14px;
    background: color-mix(in oklch, var(--color-green) 30%, var(--panel-bg));
    box-shadow: 0 5px 0 var(--border-color);
    cursor: pointer;
}

.timetable-rail-tab:hover {
    transform: translateX(-2px);
}

.timetable-rail-tab__icon svg {
    width: 1.05rem;
    height: 1.05rem;
    stroke-width: 2.6;
}

.timetable-rail-tab__text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* >= 1280px: rail lives in the reserved right margin, no tab */
@media (min-width: 1280px) {
    .timetable-rail {
        display: flex;
    }

    .workspace {
        width: min(1400px, calc(100% - 24rem));
        margin-left: max(12rem, calc((100% - 1400px) / 2));
        margin-right: max(12rem, calc((100% - 1400px) / 2));
    }
}

/* 1024px – 1279px: rail hidden behind an edge tab, opens as an overlay */
@media (min-width: 1025px) and (max-width: 1279px) {
    .timetable-rail-tab {
        display: flex;
    }

    .workspace {
        padding-right: 3.5rem;
    }

    .timetable-rail.is-open {
        display: flex;
        z-index: 900;
        box-shadow: -8px 0 0 color-mix(in oklch, var(--color-green) 22%, transparent), 0 5px 0 var(--border-color);
    }

    .timetable-rail.is-open+.timetable-rail-tab {
        opacity: 0;
        pointer-events: none;
    }
}

/* <= 1024px: rail becomes a horizontal strip above the app grid */
@media (max-width: 1024px) {
    .timetable-rail {
        display: flex;
        position: relative;
        top: auto;
        right: auto;
        width: auto;
        max-height: none;
        margin: 0.75rem;
        border-left: 3px solid var(--border-color);
        border-radius: 14px;
    }

    .timetable-rail__list {
        flex-direction: row;
        flex-wrap: wrap;
        overflow: visible;
    }

    .timetable-rail__tile {
        flex: 1 1 130px;
    }

    .timetable-rail-tab {
        display: none;
    }
}

/* Settings → Timetable editor */
.timetable-lock-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.6rem 0.8rem;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in oklch, var(--color-amber) 16%, var(--panel-bg));
    font-weight: 700;
    font-size: 0.9rem;
}

.timetable-editor-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.timetable-editor-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-weight: 800;
    font-size: 0.9rem;
}

.timetable-editor-field select {
    padding: 0.5rem 0.7rem;
    border: 3px solid var(--border-color);
    border-radius: 10px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    background: var(--panel-bg);
}

.timetable-week-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.timetable-week-pills {
    display: flex;
    gap: 0.35rem;
}

.timetable-btn-small {
    padding: 0.4rem 0.8rem;
    min-height: auto;
    font-size: 0.85rem;
}

.timetable-current-week-note {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
}

.timetable-editor-section {
    margin-top: 1.5rem;
}

.timetable-editor-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.timetable-editor-section__head h4 {
    margin: 0;
}

.timetable-grid-week-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
}

.timetable-hint {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.timetable-period-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.timetable-period-list__empty {
    padding: 0.6rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.timetable-period-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--panel-bg);
    box-shadow: 0 2px 0 var(--border-color);
}

.timetable-period-row__index {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    display: grid;
    place-items: center;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 0.78rem;
}

.timetable-period-row__label {
    flex: 1 1 10rem;
    min-width: 0;
    padding: 0.4rem 0.55rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    background: var(--panel-bg);
}

.timetable-period-row__times {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.timetable-period-row__time {
    padding: 0.3rem 0.35rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    background: var(--panel-bg);
    color: var(--text-main);
    color-scheme: light dark;
}

.timetable-period-row__time-sep {
    color: var(--text-muted);
    font-weight: 800;
}

.timetable-period-row__actions {
    display: flex;
    gap: 0.25rem;
}

.timetable-icon-btn {
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    border: 2px solid var(--border-color);
    border-radius: 7px;
    background: var(--panel-bg);
    box-shadow: 0 2px 0 var(--border-color);
    cursor: pointer;
}

.timetable-icon-btn svg {
    width: 0.9rem;
    height: 0.9rem;
    stroke-width: 2.6;
}

.timetable-icon-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--border-color);
}

.timetable-icon-btn--danger:hover {
    background: color-mix(in oklch, var(--color-red) 20%, var(--panel-bg));
}

.timetable-grid-scroll {
    overflow-x: auto;
    border: 2px solid var(--border-color);
    border-radius: 12px;
}

.timetable-editor-grid {
    border-collapse: collapse;
    width: 100%;
    min-width: 520px;
}

.timetable-editor-grid th,
.timetable-editor-grid td {
    border: 1px solid var(--border-color);
    padding: 0;
}

.timetable-editor-grid thead th {
    padding: 0.45rem 0.5rem;
    background: color-mix(in oklch, var(--color-green) 12%, var(--panel-bg));
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.timetable-editor-grid__period {
    padding: 0.45rem 0.6rem;
    background: color-mix(in oklch, var(--color-green) 6%, var(--panel-bg));
    font-weight: 800;
    font-size: 0.88rem;
    text-align: left;
    white-space: nowrap;
}

.timetable-editor-grid td[data-color] {
    background: color-mix(in oklch, var(--tt-subject-hue, var(--panel-bg)) 78%, #ffffff);
}

.timetable-editor-grid td input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.5rem;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
}

.timetable-editor-grid td input:focus-visible {
    outline: 3px solid var(--color-blue);
    outline-offset: -3px;
}

.timetable-editor-grid__empty {
    padding: 1rem;
    color: var(--text-muted);
    font-weight: 600;
}

#timetableEditorBody.is-readonly {
    opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}