:root {
    --ink: #18332f;
    --muted: #647b75;
    --line: #dce8e3;
    --paper: #ffffff;
    --page: #f4f8f5;
    --accent: #13766d;
    --accent-dark: #0d5d56;
    --accent-soft: #dff4ed;
    --warm: #f1a45b;
    --danger: #b54747;
    --danger-soft: #fff0ed;
    --success: #237a52;
    --success-soft: #e4f6ec;
    --shadow: 0 22px 60px rgba(25, 68, 61, 0.12);
}

/* STAR wallet and teacher Cash confirmation */
.account-cash-panel { padding-top: 4px; }
.account-cash-history { display: grid; gap: 10px; }
.account-cash-panel h3,
.account-cash-history h3 { margin: 0 0 10px; }
.account-reward-options,
.account-request-actions,
.teacher-star-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.account-cash-form { display: grid; gap: 12px; }
.account-cash-form p { margin: 0; color: var(--muted); }
.account-cash-form output { color: #916900; font-size: 24px; font-weight: 900; }
.account-cash-form input[type="range"] { width: 100%; accent-color: #e5ae17; }
.account-cash-submit { width: 100%; min-height: 46px; border-radius: 999px; }
.account-cash-request,
.teacher-star-card {
    margin-top: 10px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.7);
}
.account-cash-request > div:first-child,
.teacher-star-card header { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.account-cash-request > div:first-child span,
.teacher-star-card header span { display: block; color: var(--muted); font-size: 12px; }
.account-request-status { padding: 4px 8px; border-radius: 999px; background: #fff3be; color: #765600 !important; }
.account-cash-request small { display: block; margin: 6px 0 10px; color: var(--muted); }
.account-proof-upload { cursor: pointer; border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; font-weight: 800; }
.account-proof-upload.is-uploading { cursor: wait; opacity: .58; }
.account-upload-status { margin: 10px 0 0; color: var(--muted); font-size: 13px; font-weight: 750; }
.account-upload-status.is-success { color: #147341; }
.account-upload-status.is-error { color: #b42318; }
.account-star-filters,
.teacher-star-tabs { display: flex; gap: 8px; margin: 18px 0 10px; }
.account-star-filters button,
.teacher-star-tabs button { border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; background: transparent; font-weight: 800; }
.account-star-filters button.active,
.teacher-star-tabs button.active { background: var(--ink); color: white; border-color: var(--ink); }
.account-star-history-row.is-self-study .account-star-history-icon { color: #3992f2; }
.account-star-history-row.is-assignment .account-star-history-icon { color: #e5ae17; }
.account-evidence-list,
.teacher-star-evidence { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 10px; }
.account-evidence-item { margin: 0; padding: 7px; border: 1px solid var(--line); border-radius: 12px; }
.account-evidence-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; }
.account-evidence-item figcaption { margin-top: 5px; color: var(--muted); font-size: 12px; }
.account-evidence-item.is-superseded { opacity: .5; }
.teacher-star-modal { position: fixed; inset: 0; z-index: 230; }
.teacher-star-dialog { overflow: auto; padding: 18px; }
.teacher-star-list { display: grid; gap: 12px; }
.teacher-star-card header b { color: #9a7000; font-size: 20px; }
.teacher-star-card-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 9px 0; color: var(--muted); font-size: 13px; }
.teacher-star-reason { margin: 8px 0; }
.teacher-star-button .teacher-header-icon { color: #d49c00; }
@media (max-width: 620px) {
    .student-star-overlay { padding: max(14px, env(safe-area-inset-top)) 10px max(14px, env(safe-area-inset-bottom)); }
    .student-star-stack { width: 100%; }
    .student-star-dialog { padding: 14px; border-radius: 25px; }
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 8% 4%, rgba(250, 221, 178, 0.48), transparent 30%),
        radial-gradient(circle at 92% 6%, rgba(179, 230, 214, 0.52), transparent 27%),
        var(--page);
    font-family: Inter, ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.teacher-page {
    --accent: #7c3aed;
    --accent-dark: #5b21b6;
    --accent-soft: #f1e8ff;
    --page: #f8f5ff;
    --line: #ddd0f6;
    --shadow: 0 22px 60px rgba(83, 45, 145, 0.15);
    background:
        radial-gradient(circle at 8% 4%, rgba(216, 199, 255, 0.62), transparent 30%),
        radial-gradient(circle at 92% 6%, rgba(189, 208, 255, 0.44), transparent 27%),
        var(--page);
}

button, input, select { font: inherit; }
button { cursor: pointer; }
html.teacher-modal-scroll-locked {
    overflow: hidden;
    overscroll-behavior: none;
}

.eyebrow {
    margin: 0 0 14px;
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.16em;
}

.eyebrow.accent { color: var(--accent); }
.muted { color: var(--muted); }
.fine-print { margin: 14px 0 0; color: var(--muted); font-size: 0.78rem; text-align: center; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.auth-page {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    justify-items: center;
    align-items: center;
    gap: 18px;
    padding: 24px;
}

.site-filing-footer {
    align-self: end;
    width: 100%;
    color: rgba(27, 37, 43, 0.62);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Segoe UI", sans-serif;
}

.site-filing-bar {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 13px;
    width: min(1040px, 100%);
    margin: 0 auto;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
    text-align: center;
    -webkit-backdrop-filter: blur(12px) saturate(125%);
    backdrop-filter: blur(12px) saturate(125%);
}

.site-brand-handle {
    flex: 0 0 auto;
    color: rgba(27, 37, 43, 0.68);
    font-size: 0.74rem;
    font-weight: 650;
    letter-spacing: 0.015em;
    white-space: nowrap;
}

.site-contact-links {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.site-contact-separator {
    flex: 0 0 auto;
    color: rgba(76, 96, 104, 0.32);
    font-size: 0.72rem;
}

.site-contact-email {
    white-space: nowrap;
}

.site-filing-separator {
    flex: 0 0 1px;
    width: 1px;
    height: 22px;
    background: rgba(76, 96, 104, 0.15);
}

.site-filing-links {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.site-filing-footer a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 8px;
    border-radius: 10px;
    color: inherit;
    font-size: 0.71rem;
    line-height: 1.2;
    text-decoration: none;
    transition: color 120ms ease-out, background 120ms ease-out, transform 100ms ease-out;
}

.site-filing-footer a:hover {
    color: rgba(27, 37, 43, 0.9);
    background: rgba(255, 255, 255, 0.42);
}

.site-filing-footer a:active {
    transform: scale(0.97);
}

.site-filing-footer .public-security-filing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.public-security-filing img {
    width: 14px;
    height: 16px;
    object-fit: contain;
    opacity: 0.72;
}

@media (max-width: 820px) {
    .site-filing-bar {
        flex-wrap: wrap;
        gap: 4px 10px;
        padding: 10px 12px;
    }

    .site-contact-links {
        flex-basis: 100%;
        flex-wrap: wrap;
    }

    .site-filing-separator {
        display: none;
    }

    .site-filing-links {
        flex: 1 1 auto;
    }
}

@media (max-width: 540px) {
    .site-filing-links {
        flex-basis: 100%;
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .site-filing-bar {
        background: #f7f9f8;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (prefers-contrast: more) {
    .site-filing-bar {
        border-color: rgba(27, 37, 43, 0.42);
        background: rgba(255, 255, 255, 0.94);
    }
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    width: min(1040px, 100%);
    min-height: 620px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.brand-panel {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(28px, 4vw, 48px);
    padding: clamp(38px, 7vw, 80px);
    color: var(--ink);
    background:
        radial-gradient(circle at 72% 18%, rgba(255, 233, 160, 0.46), transparent 24%),
        linear-gradient(145deg, #fbfff8 0%, #ecf8f3 48%, #d6f0e7 100%);
}

.paper-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.paper-sheet {
    position: absolute;
    width: 116px;
    height: 150px;
    border: 1px solid rgba(19, 118, 109, 0.1);
    border-radius: 16px;
    background:
        repeating-linear-gradient(180deg, transparent 0 22px, rgba(19, 118, 109, 0.1) 22px 23px),
        rgba(255,255,255,0.72);
    box-shadow: 0 18px 44px rgba(19, 118, 109, 0.1);
    animation: paperDrift var(--duration, 18s) linear infinite;
    animation-delay: var(--delay, 0s);
}
.paper-sheet.one { left: -150px; top: 32%; --from-x: -6vw; --from-y: 18px; --to-x: 122vw; --to-y: -54px; --rot: -10deg; --duration: 22s; }
.paper-sheet.two { left: -120px; top: 48%; width: 92px; height: 118px; --from-x: -10vw; --from-y: -18px; --to-x: 118vw; --to-y: 38px; --rot: 12deg; --duration: 19s; --delay: -7s; }
.paper-sheet.three { left: -132px; top: 64%; width: 104px; height: 134px; --from-x: -14vw; --from-y: 24px; --to-x: 124vw; --to-y: -22px; --rot: 7deg; --duration: 24s; --delay: -13s; }
.paper-pencil {
    position: absolute;
    left: -220px;
    top: 72%;
    width: 190px;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f2bd34 0 72%, #e88955 72% 84%, #17342f 84%);
    box-shadow: 0 18px 34px rgba(23, 52, 47, 0.1);
    --from-x: -6vw;
    --from-y: 10px;
    --to-x: 122vw;
    --to-y: -48px;
    --rot: -13deg;
    animation: paperDrift 21s linear infinite;
    animation-delay: -4s;
}
.paper-brand {
    position: relative;
    z-index: 3;
    align-self: flex-start;
    margin: 0;
    color: var(--accent-dark);
    font-size: 0.92rem;
    font-weight: 950;
}
.study-symbol {
    position: absolute;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(19, 118, 109, 0.1);
    border-radius: 20px;
    color: rgba(13, 93, 86, 0.62);
    background: rgba(255,255,255,0.54);
    box-shadow: 0 18px 38px rgba(19, 118, 109, 0.08);
    animation: paperDrift var(--duration, 18s) linear infinite;
    animation-delay: var(--delay, 0s);
}
.study-symbol svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 2.1;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.study-symbol.headphones { left: -80px; top: 24%; --from-x: -8vw; --from-y: 0; --to-x: 118vw; --to-y: 44px; --rot: 6deg; --duration: 18s; --delay: -2s; }
.study-symbol.words { left: -80px; top: 40%; --from-x: -12vw; --from-y: 0; --to-x: 124vw; --to-y: -36px; --rot: -5deg; --duration: 20s; --delay: -9s; }
.study-symbol.pen { left: -80px; top: 56%; --from-x: -10vw; --from-y: 0; --to-x: 120vw; --to-y: 34px; --rot: 8deg; --duration: 17s; --delay: -14s; }
.study-symbol.speak { left: -80px; top: 68%; --from-x: -14vw; --from-y: 0; --to-x: 126vw; --to-y: -28px; --rot: -7deg; --duration: 21s; --delay: -5s; }
.brand-quote {
    position: relative;
    z-index: 4;
    align-self: center;
    max-width: 500px;
    padding: 0;
    text-align: center;
}
.brand-quote p {
    margin: 0;
    color: var(--ink);
    font-size: 3.4rem;
    font-weight: 950;
    line-height: 1.04;
    letter-spacing: 0;
}

.login-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(30px, 5vw, 58px);
    background: rgba(255, 255, 255, 0.88);
}

.login-card .muted { margin: 9px 0 28px; font-size: 0.94rem; }

.login-card form { display: grid; gap: 9px; }
.login-card label { margin-top: 7px; font-size: 0.82rem; font-weight: 800; }
.login-card input {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    background: white;
    outline: none;
}
.login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(19, 118, 109, 0.1); }

.primary-button, .secondary-button {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    font-weight: 850;
}
.primary-button {
    border: 1px solid rgba(19, 118, 109, 0.18);
    color: var(--accent-dark);
    background: linear-gradient(135deg, #e7f8f2, #ffffff);
    box-shadow: 0 14px 28px rgba(19, 118, 109, 0.12);
}
.primary-button:hover { background: #f7fffb; }
.primary-button:disabled { cursor: wait; opacity: 0.65; }
.secondary-button { border: 1px solid var(--line); color: var(--ink); background: white; }
.secondary-button:hover { border-color: #abc9bf; background: #f8fbfa; }
.login-card #parent-mode-button { margin-bottom: 8px; }

.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: #91a29d; font-size: 0.78rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.form-message { min-height: 20px; margin: 3px 0 0; color: var(--danger); font-size: 0.82rem; }

@keyframes paperDrift {
    0% {
        opacity: 0;
        transform: translate3d(var(--from-x), var(--from-y), 0) rotate(var(--rot));
    }
    8%, 88% { opacity: 0.88; }
    100% {
        opacity: 0;
        transform: translate3d(var(--to-x), var(--to-y), 0) rotate(var(--rot));
    }
}

.app-page { padding-bottom: 70px; }
.app-shell { width: min(1080px, calc(100% - 28px)); margin: 0 auto; }
.teacher-page .app-shell { width: min(1840px, calc(100% - 28px)); }

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 30px 0 20px;
}
.student-primary-cluster {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: clamp(8px, 1.3vw, 12px);
}
.app-brand { margin: 0; font-size: 1rem; font-weight: 900; letter-spacing: -0.02em; }
.student-greeting-marquee {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.student-greeting-marquee + .identity-cluster {
    flex: 0 0 auto;
    flex-wrap: nowrap;
}
.student-greeting-track {
    display: flex;
    width: max-content;
    will-change: transform;
}
.student-greeting-track.is-scrolling {
    animation: studentGreetingScrollRight 24s linear infinite;
}
.student-greeting-copy {
    flex: none;
    padding-right: 3rem;
}
@keyframes studentGreetingScrollRight {
    from { transform: translate3d(-50%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}
.student-chip {
    padding: 9px 13px;
    border: 1px solid rgba(19, 118, 109, 0.15);
    border-radius: 999px;
    color: var(--accent-dark);
    background: rgba(255,255,255,0.72);
    font-size: 0.8rem;
    font-weight: 800;
}
.teacher-page .student-chip {
    border-color: rgba(124, 58, 237, 0.2);
    color: var(--accent-dark);
}
.account-chip-button,
.icon-pill-button {
    position: relative;
    border: 1px solid rgba(19, 118, 109, 0.15);
}
.account-chip-button {
    box-shadow: 0 8px 22px rgba(25, 68, 61, 0.08);
}
.account-chip-button[aria-expanded="true"] {
    border-color: rgba(19, 118, 109, 0.34);
    background: #fff;
}
.icon-pill-button {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 999px;
    color: var(--accent-dark);
    background: rgba(255,255,255,0.76);
    font-weight: 950;
    box-shadow: 0 8px 22px rgba(25, 68, 61, 0.08);
}
.icon-pill-button.has-updates {
    border-color: rgba(225, 29, 72, 0.28);
    background: #fff;
}
.icon-pill-button .notice-dot {
    top: -7px;
    right: -6px;
}
.student-message-button svg,
.student-calendar-button svg,
.student-words-button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@view-transition {
    navigation: auto;
}

.student-words-button {
    view-transition-name: my-words-surface;
    transform-origin: center;
    transition: transform 100ms ease-out, background-color 140ms ease-out, border-color 140ms ease-out;
}

.student-words-button:active,
.student-words-button.is-pressing {
    transform: scale(0.96);
    border-color: rgba(19, 118, 109, 0.34);
    background: rgba(255, 255, 255, 0.96);
}

.my-words-route-surface {
    position: fixed;
    z-index: 9999;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(19, 118, 109, 0.16);
    border-radius: 999px;
    color: #174f42;
    background: rgba(244, 250, 247, 0.82);
    box-shadow: 0 24px 70px rgba(20, 72, 58, 0.18);
    backdrop-filter: blur(24px) saturate(155%);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
    pointer-events: none;
    transition: top 300ms cubic-bezier(0.22, 1, 0.36, 1), left 300ms cubic-bezier(0.22, 1, 0.36, 1), width 300ms cubic-bezier(0.22, 1, 0.36, 1), height 300ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 300ms cubic-bezier(0.22, 1, 0.36, 1), background-color 300ms ease-out;
}

.my-words-route-surface svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity 160ms ease-out, transform 240ms ease-out;
}

.my-words-route-surface.is-expanding {
    border-radius: 25px;
    background: rgba(244, 250, 247, 0.94);
}

.my-words-route-surface.is-expanding svg {
    opacity: 0;
    transform: scale(1.12);
}

.my-words-fallback-return .app-shell {
    animation: dashboardWordsFallbackArrival 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: top right;
}

@keyframes dashboardWordsFallbackArrival {
    from { opacity: 0; transform: translateY(-5px) scale(0.992); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

::view-transition-group(my-words-surface) {
    z-index: 1000;
    overflow: clip;
    border-radius: 25px;
    animation-duration: 380ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(my-words-surface) {
    animation: dashboardWordsSharedOld 220ms ease-out both;
}

::view-transition-new(my-words-surface) {
    animation: dashboardWordsSharedNew 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes dashboardWordsSharedOld {
    from { opacity: 1; }
    to { opacity: 0.22; }
}

@keyframes dashboardWordsSharedNew {
    from { opacity: 0; }
    24% { opacity: 0.18; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .student-words-button {
        transition-duration: 0.001ms !important;
    }

    .my-words-route-surface,
    .my-words-fallback-return .app-shell {
        animation: none !important;
        transition: none !important;
    }

    ::view-transition-group(my-words-surface),
    ::view-transition-old(my-words-surface),
    ::view-transition-new(my-words-surface) {
        animation-duration: 120ms !important;
        transform: none !important;
    }
}
.student-todo-button {
    width: 42px;
    height: 42px;
    border-color: rgba(19, 118, 109, 0.2);
}
.student-todo-button[aria-expanded="true"] {
    border-color: rgba(19, 118, 109, 0.34);
    background: #fff;
}
.student-calendar-date {
    position: absolute;
    top: 57%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    color: currentColor;
    font-size: 0.48rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    line-height: 1;
    pointer-events: none;
}
.student-calendar-date.is-double-digit {
    font-size: 0.43rem;
}
.student-calendar-button.active {
    border-color: rgba(19, 118, 109, 0.34);
    background: rgba(227, 244, 238, 0.96);
    box-shadow: 0 10px 24px rgba(19, 118, 109, 0.14);
}
.student-words-button.active {
    border-color: rgba(19, 118, 109, 0.32);
    background:
        radial-gradient(circle at 24% 12%, rgba(255,255,255,0.94), transparent 38%),
        linear-gradient(135deg, rgba(255, 244, 176, 0.76), rgba(184, 238, 220, 0.8) 48%, rgba(187, 222, 255, 0.76));
    box-shadow: 0 10px 24px rgba(19, 118, 109, 0.16);
}
.student-words-overlay {
    position: fixed;
    inset: 0;
    z-index: 2150;
    display: grid;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
    background: rgba(17, 38, 34, 0.3);
    backdrop-filter: blur(8px) saturate(118%);
}
.student-words-overlay[hidden] { display: none; }
.student-words-stack,
.student-calendar-stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 11px;
    width: min(720px, 100%);
    height: min(720px, 86vh);
    height: min(720px, 86dvh);
    min-height: 0;
}
.student-words-dialog {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.88);
    border-radius: 26px;
    background: rgba(248,251,249,0.96);
    box-shadow: 0 24px 80px rgba(20,54,47,0.24), 0 3px 12px rgba(20,54,47,0.08);
}
.student-words-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 18px 13px 20px;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(18px) saturate(150%);
}
.student-words-dialog-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}
.student-words-dialog-icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: #13766d;
    box-shadow: 0 7px 18px rgba(19,118,109,0.23);
    cursor: pointer;
    transition: transform 140ms ease, background 140ms ease;
}
.student-words-dialog-icon:hover,
.student-words-dialog-icon[aria-expanded="true"] {
    color: #fff;
    background: #0e675f;
}
.student-words-dialog-icon:active {
    transform: scale(0.92);
    transition-duration: 80ms;
}
.student-words-dialog-icon:disabled {
    opacity: 0.45;
    cursor: default;
}
.student-words-dialog-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#my-words-add-trigger svg { transition: transform 180ms ease; }
#my-words-add-trigger[aria-expanded="true"] svg { transform: rotate(45deg); }
.student-words-tool-panel {
    display: grid;
    grid-template-rows: 0fr;
    border-bottom: 1px solid transparent;
    background: rgba(255,255,255,0.75);
    transition: grid-template-rows 220ms cubic-bezier(0.2,0.8,0.2,1), border-color 180ms ease;
}
.student-words-tool-panel.open {
    grid-template-rows: 1fr;
    border-color: var(--line);
}
.student-words-tool-panel-inner {
    min-height: 0;
    overflow: hidden;
}
.student-words-dialog-scroll {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 2px 14px max(18px, env(safe-area-inset-bottom));
    scroll-behavior: auto;
    scrollbar-gutter: stable;
}
.student-words-dialog-scroll::-webkit-scrollbar { width: 8px; }
.student-words-dialog-scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 99px;
    background: rgba(78,108,100,0.25);
    background-clip: content-box;
}
.student-words-outside-close {
    justify-self: center;
    min-width: 116px;
    min-height: 43px;
    padding: 0 22px;
    border: 1px solid rgba(255,255,255,0.84);
    border-radius: 999px;
    color: #36574f;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 10px 28px rgba(20,54,47,0.16);
    backdrop-filter: blur(18px) saturate(150%);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 820;
    cursor: pointer;
    transition: transform 120ms ease, background 140ms ease;
}
.student-words-outside-close:hover { background: #fff; }
.student-words-outside-close:active {
    transform: scale(0.96);
    transition-duration: 70ms;
}

/* Dashboard My Words is a bounded nine-word preview; the full workspace stays on my-words.html. */
.student-words-dialog {
    grid-template-rows: auto minmax(0, 1fr);
    background: rgba(248,251,249,0.76);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    backdrop-filter: blur(30px) saturate(160%);
}
.student-words-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 66px;
    padding: 11px 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0.06));
}
.student-words-dialog-head .student-words-dialog-icon {
    width: 44px;
    height: 44px;
}
.student-words-stack[hidden],
.student-words-manual-layer[hidden] {
    display: none;
}
.student-words-overlay > .student-words-stack,
.student-words-overlay > .student-words-manual-layer {
    grid-area: 1 / 1;
}
.student-words-overlay.is-layer-transitioning > .student-words-stack,
.student-words-overlay.is-layer-transitioning > .student-words-manual-layer {
    will-change: opacity, transform, filter;
}
.student-words-overlay > .student-words-stack {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition:
        opacity 200ms cubic-bezier(.4, 0, .7, .2),
        transform 300ms cubic-bezier(.2, .8, .2, 1),
        filter 240ms ease;
}
.student-words-manual-layer {
    display: grid;
    grid-template-rows: minmax(0, auto) auto;
    justify-items: stretch;
    gap: 11px;
    width: min(430px, 100%);
    min-height: 0;
    opacity: 0;
    transform: translateY(18px) scale(.94);
    filter: blur(6px);
    pointer-events: none;
    transition:
        opacity 220ms cubic-bezier(.4, 0, .7, .2),
        transform 360ms cubic-bezier(.18, .95, .26, 1.12),
        filter 260ms ease;
}
.student-words-overlay.is-manual-open > .student-words-stack {
    opacity: 0;
    transform: translateY(-14px) scale(.965);
    filter: blur(5px);
    pointer-events: none;
}
.student-words-overlay.is-manual-open > .student-words-manual-layer {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    pointer-events: auto;
}
.student-words-overlay.is-scan-covered > .student-words-stack {
    visibility: hidden;
}
.student-words-manual-close {
    justify-self: center;
    min-height: 44px;
}
.student-words-manual-close:disabled {
    opacity: 0.55;
    cursor: default;
}
.student-words-camera-button {
    color: var(--accent-dark);
    border: 1px solid rgba(19,118,109,0.16);
    background: rgba(255,255,255,0.78);
    box-shadow: 0 7px 18px rgba(20,54,47,0.09);
    text-decoration: none;
}
.student-words-camera-button:hover {
    color: #fff;
    border-color: transparent;
    background: var(--accent-dark);
}
.student-words-camera-button[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}
.liquid-glass-dashboard .my-words-scan-overlay {
    z-index: 2250;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
    background: rgba(17, 38, 34, 0.42);
    -webkit-backdrop-filter: blur(12px) saturate(118%);
    backdrop-filter: blur(12px) saturate(118%);
}
.liquid-glass-dashboard .my-words-scan-overlay[hidden] {
    display: none;
}
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-shell {
    position: relative;
    width: min(720px, 100%);
    height: min(720px, 86vh);
    height: min(720px, 86dvh);
    min-height: 0;
    margin: 0;
    padding: 70px 18px 18px;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 26px;
    background:
        radial-gradient(circle at 84% 0%, rgba(255,255,255,0.62), transparent 48%),
        rgba(248,251,249,0.76);
    box-shadow: 0 24px 80px rgba(20,54,47,0.24), 0 3px 12px rgba(20,54,47,0.08);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    backdrop-filter: blur(30px) saturate(160%);
    scrollbar-gutter: stable;
    animation: practiceEntryPop 360ms cubic-bezier(.18, .95, .26, 1.12) both;
}
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-shell.is-choose-phase {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
}
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-header {
    position: absolute;
    top: 14px;
    right: 14px;
    left: auto;
    z-index: 20;
    display: block;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-header-action.is-back,
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-title-group {
    display: none;
}
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-header-action.is-discard {
    min-height: 42px;
    padding: 0 14px;
    border-color: rgba(163,55,55,0.15);
    background: rgba(255,255,255,0.58);
    box-shadow: 0 7px 18px rgba(20,54,47,0.08);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
}
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-status {
    min-height: 0;
    margin: 0 112px 10px 0;
    text-align: left;
}
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-status:empty {
    display: none;
}
.liquid-glass-dashboard .dashboard-words-scan-overlay.is-choose-phase .my-words-scan-status:not(:empty) {
    position: absolute;
    top: 25px;
    right: 112px;
    left: 18px;
    z-index: 19;
    margin: 0;
}
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-choose {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: none;
}
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-choose[hidden] {
    display: none;
}
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-photo-empty,
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-pages,
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-photo-card,
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-photo-frame,
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-photo-open {
    height: 100%;
    min-height: 0;
}
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-photo-drop {
    height: 100%;
    min-height: 0;
    background: rgba(224,243,235,0.34);
}
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-photo-card {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    background: rgba(237,244,241,0.6);
}
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-photo-open img {
    height: 100%;
    min-height: 0;
}
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-choose-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    justify-content: stretch;
    gap: 8px;
    margin: 0;
}
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-choose-footer > span {
    text-align: center;
}
.liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-choose-footer .primary-button {
    width: 100%;
}
#student-words-preview-add-trigger svg { transition: transform 180ms ease; }
#student-words-preview-add-trigger[aria-expanded="true"] svg { transform: rotate(45deg); }
.student-words-preview-add-menu {
    position: relative;
    width: 100%;
    padding: 24px;
    border: 1px solid rgba(255,255,255,0.88);
    border-radius: 26px;
    background: rgba(248,251,249,0.76);
    box-shadow: 0 24px 80px rgba(20,54,47,0.24), 0 3px 12px rgba(20,54,47,0.08);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    backdrop-filter: blur(30px) saturate(160%);
    transform-origin: center;
}
.student-words-preview-add-menu[hidden] { display: none; }
.student-words-manual-title-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.student-words-manual-title-row .eyebrow {
    grid-column: 2;
    margin: 0;
    color: var(--accent-dark);
    text-align: center;
}
.student-words-preview-add-form {
    display: grid;
    gap: 10px;
}
.student-words-preview-add-form > label {
    display: grid;
    gap: 6px;
}
.student-words-preview-add-form > label > span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}
.student-words-preview-add-form > label small {
    margin-left: 4px;
    font-size: 0.66rem;
    font-weight: 650;
}
.student-words-preview-add-form input {
    min-width: 0;
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    background: #fff;
    font: inherit;
    font-size: 16px;
    line-height: 1.35;
}
.student-words-preview-add-form input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(19,118,109,0.1);
    outline: none;
}
.dialog-actions.student-words-manual-actions {
    grid-template-columns: minmax(180px, 240px);
    justify-content: center;
    margin-top: 4px;
}
.student-words-manual-actions .primary-button {
    width: 100%;
}
.student-words-preview-add-form button:disabled { opacity: 0.56; cursor: default; }
.student-words-preview-add-form p {
    min-height: 1.2em;
    margin: -4px 2px 0;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.3;
}
.student-words-manual-close {
    width: 132px;
    min-width: 132px;
}
.student-words-dialog-scroll {
    padding: 0 18px max(18px, env(safe-area-inset-bottom));
}
.student-words-preview,
.student-words-preview-list {
    min-height: 100%;
}
.student-words-preview-list {
    display: grid;
    align-content: start;
}
.student-words-preview-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 12px;
    min-height: 53px;
    padding: 5px 4px 5px 8px;
    border-bottom: 1px solid rgba(79,101,111,0.10);
}
.student-words-preview-item:last-child {
    border-bottom: 0;
}
.student-words-preview-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.student-words-preview-copy > strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 820;
    letter-spacing: -0.012em;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.student-words-preview-copy > span {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.25;
}
.student-words-preview-copy b {
    flex: 0 0 auto;
    color: var(--accent-dark);
    font-size: 0.7rem;
    font-weight: 780;
}
.student-words-preview-copy > span > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.student-words-preview-speak {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(19,118,109,0.14);
    border-radius: 50%;
    color: var(--accent-dark);
    background: rgba(255,255,255,0.72);
    cursor: pointer;
    transition: transform 100ms ease-out, border-color 140ms ease-out, background 140ms ease-out;
}
.student-words-preview-speak:hover {
    border-color: rgba(19,118,109,0.30);
    background: rgba(255,255,255,0.96);
}
.student-words-preview-speak:active {
    transform: scale(0.94);
}
.student-words-preview-speak svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.student-words-preview-loading,
.student-words-preview-empty {
    display: grid;
    place-content: center;
    min-height: 100%;
    padding: 28px 20px;
    color: var(--muted);
    text-align: center;
}
.student-words-preview-loading {
    animation: pulse 1.3s ease-in-out infinite;
}
.student-words-preview-empty strong {
    color: var(--ink);
    font-size: 1rem;
}
.student-words-preview-empty p {
    max-width: 320px;
    margin: 7px auto 14px;
    font-size: 0.82rem;
    line-height: 1.45;
}
.student-words-open-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 38px;
    padding: 0 11px 0 13px;
    border: 1px solid rgba(19,118,109,0.16);
    border-radius: 999px;
    color: var(--accent-dark);
    background: rgba(255,255,255,0.68);
    box-shadow: 0 7px 18px rgba(19,118,109,0.08);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    font-size: 0.76rem;
    font-weight: 850;
    white-space: nowrap;
    text-decoration: none;
    transition: transform 100ms ease-out, color 140ms ease-out, background 140ms ease-out;
}
.student-words-open-button:hover {
    color: var(--accent-dark);
    background: rgba(255,255,255,0.92);
}
.student-words-open-button:active {
    transform: scale(0.96);
}
.student-words-open-button svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.student-words-preview-speak:focus-visible,
.student-words-open-button:focus-visible {
    outline: 3px solid rgba(19,118,109,0.24);
    outline-offset: 3px;
}

.student-calendar-overlay {
    position: fixed;
    inset: 0;
    z-index: 2160;
    display: grid;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
    background: rgba(17, 38, 34, 0.3);
    backdrop-filter: blur(8px) saturate(118%);
}
.student-calendar-overlay[hidden] { display: none; }
.student-calendar-dialog {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.88);
    border-radius: 26px;
    background: rgba(248,251,249,0.76);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    backdrop-filter: blur(30px) saturate(160%);
    box-shadow: 0 24px 80px rgba(20,54,47,0.24), 0 3px 12px rgba(20,54,47,0.08);
}
.student-calendar-scroll {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 14px 18px 20px;
    scrollbar-gutter: stable;
}
.student-calendar-toolbar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.student-calendar-month-title {
    margin: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 850;
    letter-spacing: -0.018em;
}
.student-calendar-month-button {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--accent-dark);
    background: rgba(19,118,109,0.08);
    cursor: pointer;
    transition: transform 100ms ease, background 140ms ease;
}
.student-calendar-month-button:hover { background: rgba(19,118,109,0.14); }
.student-calendar-month-button:active { transform: scale(0.94); }
.student-calendar-month-button:disabled { opacity: 0.28; cursor: default; transform: none; }
.student-calendar-month-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.student-calendar-weekdays,
.student-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}
.student-calendar-weekdays { margin-bottom: 5px; }
.student-calendar-weekdays span {
    padding: 4px 0;
    color: var(--muted);
    text-align: center;
    font-size: 0.66rem;
    font-weight: 780;
}
.student-calendar-day,
.student-calendar-day-empty {
    aspect-ratio: 4 / 3;
    min-width: 0;
    border-radius: 14px;
}

@property --student-calendar-gold-edge-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.student-calendar-day {
    --student-calendar-day-fill: rgba(224,233,229,0.48);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    -webkit-appearance: none;
    appearance: none;
    color: #315149;
    background: var(--student-calendar-day-fill);
    font: inherit;
    font-size: 0.77rem;
    font-weight: 820;
    line-height: 1;
    cursor: pointer;
    transition: transform 100ms ease, border-color 140ms ease, background 140ms ease;
}
.student-calendar-day:hover { transform: translateY(-1px); }
.student-calendar-day:active { transform: scale(0.96); }
.student-calendar-day[data-level="1"] { --student-calendar-day-fill: #d9eee7; }
.student-calendar-day[data-level="2"] { --student-calendar-day-fill: #a9d9cc; color: #164f46; }
.student-calendar-day[data-level="3"],
.student-calendar-day[data-level="4"] { --student-calendar-day-fill: #247d70; color: #fff; }
.student-calendar-day.is-today { border-color: rgba(19,118,109,0.62); }
.student-calendar-day.is-selected {
    --student-calendar-gold-edge-angle: 0deg;
    border: 2px solid transparent;
    background:
        linear-gradient(var(--student-calendar-day-fill), var(--student-calendar-day-fill)) padding-box,
        conic-gradient(
            from var(--student-calendar-gold-edge-angle),
            rgba(245,158,11,0.42) 0 72%,
            rgba(255,255,255,0.86) 78%,
            #fff1a6 84%,
            #f59e0b 90%,
            rgba(245,158,11,0.42) 96% 100%
        ) border-box;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.72), 0 0 14px rgba(245,158,11,0.34);
    animation: studentCalendarGoldEdgeOrbit 7s linear infinite;
}
.student-calendar-day:disabled {
    color: rgba(78,108,100,0.36);
    background: rgba(224,233,229,0.25);
    cursor: default;
    transform: none;
}
.student-calendar-day-star {
    position: absolute;
    right: 5px;
    bottom: 3px;
    color: #f2b84b;
    font-size: 0.58rem;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(57,40,9,0.22);
}

@keyframes studentCalendarGoldEdgeOrbit {
    to { --student-calendar-gold-edge-angle: 360deg; }
}
.student-calendar-detail {
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid rgba(78,108,100,0.14);
}
.student-calendar-detail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}
.student-calendar-detail-head h3 {
    margin: 0;
    font-size: 0.92rem;
    letter-spacing: -0.015em;
}
.student-calendar-detail-head span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 720;
}
.student-calendar-task-list { display: grid; gap: 8px; }
.student-calendar-empty {
    margin: 0;
    padding: 18px 10px;
    color: var(--muted);
    text-align: center;
    font-size: 0.78rem;
}
.student-calendar-outside-close {
    justify-self: center;
    min-width: 116px;
    min-height: 43px;
    padding: 0 22px;
    border: 1px solid rgba(255,255,255,0.84);
    border-radius: 999px;
    color: #36574f;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 10px 28px rgba(20,54,47,0.16);
    backdrop-filter: blur(18px) saturate(150%);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 820;
    cursor: pointer;
    transition: transform 120ms ease, background 140ms ease;
}
.student-calendar-outside-close:hover { background: #fff; }
.student-calendar-outside-close:active { transform: scale(0.96); }
.teacher-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.teacher-header-primary-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}
.teacher-header-icon-button,
.teacher-updates-button,
.teacher-review-button {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(124, 58, 237, 0.22);
    border-radius: 50%;
    color: var(--accent-dark);
    background: rgba(255,255,255,0.78);
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(83, 45, 145, 0.10);
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.teacher-header-icon,
.teacher-updates-button svg,
.teacher-review-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.teacher-header-icon path,
.teacher-header-icon rect,
.teacher-header-icon circle {
    vector-effect: non-scaling-stroke;
}
.teacher-header-icon-button:hover,
.teacher-header-icon-button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(124,58,237,0.34);
    background: rgba(247,243,255,0.96);
    outline: 3px solid rgba(124,58,237,0.12);
    outline-offset: 2px;
}
.review-question-mark {
    display: inline-grid;
    place-items: center;
    width: 19px;
    height: 19px;
    color: currentColor;
    font-size: 1.05rem;
    font-weight: 950;
    line-height: 1;
}
.teacher-updates-button.has-updates,
.teacher-review-button.has-updates {
    border-color: rgba(225, 29, 72, 0.28);
    background: var(--danger-soft);
}
.teacher-updates-button .notice-dot,
.teacher-review-button .notice-dot {
    top: -9px;
    right: -5px;
}
.teacher-page .tab-button.active { background: linear-gradient(135deg, #6d28d9, #8b5cf6 58%, #60a5fa); }
.teacher-page .primary-button { background: linear-gradient(135deg, #6d28d9, #8b5cf6 58%, #60a5fa); }
.teacher-page .primary-button:hover { background: linear-gradient(135deg, #5b21b6, #7c3aed 58%, #3b82f6); }
.identity-cluster { display: flex; align-items: center; gap: 8px; }
.account-panel {
    position: absolute;
    right: max(14px, calc((100vw - 1080px) / 2));
    top: 76px;
    z-index: 120;
    width: min(430px, calc(100vw - 28px));
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.82);
    border-radius: 20px;
    background: rgba(255,255,255,0.96);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}
.account-panel[hidden] { display: none; }
.account-panel-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 38px;
    margin-bottom: 12px;
}
.account-panel-title {
    width: 100%;
    padding: 0 86px;
    text-align: center;
}
.account-panel-head .eyebrow { margin: 0; }
.account-panel-head h2 { margin: 2px 0 0; font-size: 1.15rem; }
.student-account-outside-close {
    position: static;
    justify-self: center;
    transform: none;
}
.account-panel-actions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.account-panel-actions .create-student-close {
    position: static;
    width: 34px;
    min-width: 34px;
    height: 34px;
}
.account-panel .profile-grid { grid-template-columns: 1fr; }
.teacher-page .account-panel { border-color: rgba(124, 58, 237, 0.18); }
.teacher-email-card { display: grid; gap: 10px; }
.teacher-email-title {
    margin: 0;
    color: #0878e8;
    font-size: 0.84rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1.15;
}
.teacher-email-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.teacher-email-form input {
    min-width: 0;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(8, 120, 232, 0.2);
    border-radius: 12px;
    color: var(--ink);
    background: rgba(255,255,255,0.82);
    font: 750 0.8rem/1 system-ui, sans-serif;
    outline: none;
}
.teacher-email-form input:focus { border-color: #0878e8; box-shadow: 0 0 0 3px rgba(8, 120, 232, 0.12); }
.teacher-email-form button { min-width: 64px; min-height: 42px; padding: 0 14px; border-radius: 12px; }
.teacher-email-form input:disabled,
.teacher-email-form button:disabled { opacity: 0.58; cursor: wait; }
.teacher-email-list { display: grid; gap: 8px; }
.teacher-email-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 54px;
    padding: 8px 9px 8px 12px;
    border: 1px solid rgba(8, 120, 232, 0.12);
    border-radius: 14px;
    background: rgba(248, 247, 255, 0.72);
}
.teacher-email-address { min-width: 0; }
.teacher-email-address strong { overflow: hidden; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.teacher-email-switch {
    position: relative;
    width: 44px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #cdd3d0;
    cursor: pointer;
    transition: background-color 180ms ease;
}
.teacher-email-switch > span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(31,45,38,0.22);
    transform: translateX(0);
    transition: transform 220ms cubic-bezier(.2,.8,.3,1);
}
.teacher-email-switch.is-enabled { background: #0878e8; }
.teacher-email-switch.is-enabled > span { transform: translateX(18px); }
.teacher-email-switch:active > span { width: 23px; }
.teacher-email-switch:disabled { opacity: 0.55; cursor: wait; }
.teacher-email-switch:focus-visible { outline: 3px solid rgba(8, 120, 232, 0.25); outline-offset: 2px; }
.teacher-email-notice { margin: 0; color: var(--muted); font-size: 0.7rem; font-weight: 750; }
.teacher-email-notice.error { color: #b73542; }
@media (prefers-reduced-motion: reduce) {
    .teacher-email-switch,
    .teacher-email-switch > span { transition: none !important; }
}
.student-account-overlay {
    position: fixed;
    inset: 0;
    z-index: 2160;
    display: grid;
    place-items: center;
    width: auto;
    padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: rgba(17, 38, 34, 0.3);
    box-shadow: none;
    -webkit-backdrop-filter: blur(8px) saturate(118%);
    backdrop-filter: blur(8px) saturate(118%);
}
.student-account-overlay[hidden] { display: none; }
.student-account-stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 11px;
    width: min(430px, 100%);
    max-height: min(680px, 86vh);
    max-height: min(680px, 86dvh);
}
.student-account-dialog {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.88);
    border-radius: 26px;
    background: rgba(248,251,249,0.76);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    backdrop-filter: blur(30px) saturate(160%);
    box-shadow: 0 24px 80px rgba(20,54,47,0.24), 0 3px 12px rgba(20,54,47,0.08);
}
.student-account-overlay .profile-grid { grid-template-columns: 1fr; }
.student-account-dialog .profile-card {
    border-color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.68);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.star-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 13px;
    border: 1px solid rgba(216, 149, 40, 0.24);
    border-radius: 999px;
    color: #9a6717;
    background: rgba(255, 248, 224, 0.86);
    font-size: 0.8rem;
    font-weight: 900;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(216, 149, 40, 0.12);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.star-counter:hover { transform: translateY(-1px); }
.star-counter:active { transform: scale(0.96); }
.star-counter:focus-visible,
.account-star-back:focus-visible,
.account-star-history-row:focus-visible,
.account-wallet-destinations button:focus-visible,
.account-wallet-redeem:focus-visible,
.account-wallet-inline-link:focus-visible {
    outline: 3px solid rgba(31, 111, 135, 0.28);
    outline-offset: 3px;
}
.assignment-star-counter {
    border-color: rgba(216, 149, 40, 0.24);
    color: #9a6717;
    background: rgba(255, 248, 224, 0.86);
}
.self-study-star-counter {
    border-color: rgba(31, 111, 135, 0.2);
    color: #1f6f87;
    background: #e3f4fb;
    box-shadow: 0 8px 22px rgba(31, 111, 135, 0.1);
}
.star-counter.pop { animation: star-counter-pop 700ms ease-out both; }
@keyframes star-counter-pop {
    0% { transform: scale(1); }
    35% { transform: scale(1.18) rotate(-4deg); }
    100% { transform: scale(1); }
}
.account-summary-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248, 253, 251, 0.94));
}
.account-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 50px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--line);
}
.account-summary-name {
    margin: 0;
    font-size: 1.08rem;
}
.account-row-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 7px 11px;
}
.account-star-pair {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}
.account-star-history {
    display: grid;
    align-content: start;
    gap: 12px;
}
.account-wallet-home { gap: 14px; }
.account-wallet-pass {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 156px;
    margin-top: 4px;
    padding: 24px 28px;
    border: 1px solid rgba(151, 103, 0, 0.12);
    border-radius: 24px;
    color: #4e3900;
    background: linear-gradient(135deg, #ffe79a, #efbd3f);
    box-shadow: 0 18px 38px rgba(176, 125, 0, 0.16);
}
.account-wallet-pass-star {
    font-size: clamp(4rem, 16vw, 5.4rem);
    line-height: 1;
}
.account-wallet-pass strong {
    color: inherit;
    font-size: clamp(3.3rem, 13vw, 4.6rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
}
.account-wallet-redeem {
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
    color: #fff;
    background: var(--accent);
    font-size: 0.94rem;
    box-shadow: 0 12px 28px rgba(19, 118, 109, 0.22);
}
.account-wallet-destinations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.account-wallet-destinations button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 46px;
    padding: 10px;
    border: 1px solid rgba(19, 118, 109, 0.18);
    border-radius: 999px;
    color: var(--accent-dark);
    background: var(--accent-soft);
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.account-wallet-destinations button:hover { border-color: rgba(19, 118, 109, 0.32); background: #d5efe7; transform: translateY(-1px); }
.account-wallet-destinations button:active { transform: scale(0.97); }
.account-wallet-destinations button > span { white-space: nowrap; }
.account-wallet-detail { gap: 14px; }
.account-wallet-detail-intro { margin: -2px 0 2px; color: var(--muted); font-size: 0.8rem; line-height: 1.45; }
.account-star-source-group { display: grid; gap: 9px; }
.account-star-source-group + .account-star-source-group { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.account-star-source-heading { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; }
.account-star-source-heading > span { display: inline-flex; align-items: baseline; gap: 7px; }
.account-star-source-heading em { color: var(--accent-dark); font-size: 0.62rem; font-style: normal; letter-spacing: 0.04em; }
.account-star-source-group[data-star-source="blue"] .account-star-source-heading em { color: #1f6f87; }
.account-star-source-heading strong { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 999px; color: var(--ink); background: var(--page); font-size: 0.72rem; letter-spacing: 0; }
.account-wallet-redeem-balance { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 18px 8px 8px; color: #9a7000; }
.account-wallet-redeem-balance > span { font-size: 2.2rem; }
.account-wallet-redeem-balance strong { font-size: 2.8rem; line-height: 1; letter-spacing: -0.04em; }
.account-wallet-redeem-balance small { color: var(--muted); font-weight: 800; }
.account-wallet-message { display: grid; gap: 6px; padding: 16px; border-radius: 18px; background: var(--page); text-align: center; }
.account-wallet-message p { margin: 0; color: var(--muted); font-size: 0.8rem; }
.account-wallet-inline-link { justify-self: center; padding: 7px 12px; border: 0; color: var(--accent); background: transparent; font: 850 0.8rem/1 inherit; cursor: pointer; }
.student-star-overlay {
    position: fixed;
    inset: 0;
    z-index: 2180;
    display: grid;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
    background: rgba(17, 38, 34, 0.42);
}
.student-star-overlay[hidden] { display: none; }
.student-star-stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 11px;
    width: min(540px, 100%);
    max-height: min(760px, 90vh);
    max-height: min(760px, 90dvh);
}
.student-star-dialog {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.92);
    border-radius: 26px;
    color: var(--ink);
    background: #f8fbf9;
    box-shadow: 0 28px 86px rgba(20,54,47,0.28), 0 3px 12px rgba(20,54,47,0.1);
}
.student-star-outside-close {
    justify-self: center;
    min-width: 112px;
    min-height: 46px;
    padding: 10px 22px;
    border: 1px solid rgba(255,255,255,0.88);
    border-radius: 999px;
    color: #fff;
    background: rgba(24,51,47,0.72);
    font: 850 0.84rem/1 inherit;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(20,54,47,0.2);
}
.student-star-outside-close:focus-visible {
    outline: 3px solid rgba(255,255,255,0.72);
    outline-offset: 3px;
}
.account-star-history-row.is-unavailable {
    cursor: default;
    border-style: dashed;
}
.account-star-history-row.is-unavailable:hover {
    transform: none;
    box-shadow: 0 8px 22px rgba(25, 68, 61, 0.055);
}
.account-star-history-head {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
}
.account-star-history-head p { margin: 0; }
.account-star-history-head > .eyebrow {
    grid-column: 2;
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
}
.account-star-back {
    width: 38px;
    height: 38px;
    padding: 0 1px 2px 0;
    border: 1px solid rgba(24, 53, 47, 0.1);
    border-radius: 50%;
    color: var(--ink);
    background: rgba(255,255,255,0.8);
    font-family: inherit;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease;
}
.account-star-back:hover { background: #fff; transform: translateX(-1px); }
.account-star-back:active { transform: scale(0.94); }
.account-star-history-count { min-width: 56px; cursor: default; }
.account-star-history-count:hover { transform: none; }
.account-star-history-description { margin: -2px 0 2px; font-size: 0.82rem; }
.account-star-history-list {
    display: grid;
    gap: 9px;
}
.account-star-history-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 72px;
    padding: 11px 12px;
    border: 1px solid rgba(24, 53, 47, 0.09);
    border-radius: 18px;
    background: rgba(255,255,255,0.78);
    box-shadow: 0 8px 22px rgba(25, 68, 61, 0.055);
    cursor: default;
}
.account-star-history-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 11px;
    color: #9a6717;
    background: rgba(255, 248, 224, 0.9);
    font-size: 1.05rem;
}
.account-star-history-row.is-self-study .account-star-history-icon {
    color: #1f6f87;
    background: #e3f4fb;
}
.account-star-history-copy { display: grid; min-width: 0; gap: 3px; }
.account-star-history-copy strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.88rem;
    line-height: 1.28;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-star-history-kind {
    color: var(--muted);
    font-size: 0.63rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.account-star-history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 750;
}
.account-star-history-empty {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 30px 16px;
    border: 1px dashed rgba(24, 53, 47, 0.14);
    border-radius: 18px;
    color: var(--muted);
    text-align: center;
}
.account-star-history-empty > span { color: #b58a3c; font-size: 1.8rem; }
.account-star-history-empty strong { color: var(--ink); }
.account-star-history-empty p { margin: 0; font-size: 0.78rem; }
.account-star-history-empty.compact { padding: 18px 14px; }
.account-star-history-empty.compact > span { font-size: 1.35rem; }
.account-quiet-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.account-status-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 850;
}
.account-status-dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #58b784;
}
.account-quiet-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}
.account-quiet-actions .text-button {
    min-height: 30px;
    padding: 6px 12px;
    border: 1px solid rgba(24, 53, 47, 0.1);
    border-radius: 999px;
    color: #58716c;
    background: rgba(255,255,255,0.66);
    box-shadow: 0 8px 18px rgba(25, 68, 61, 0.06);
    font-size: 0.74rem;
    text-decoration: none;
}
.account-quiet-actions .text-button:hover {
    color: var(--accent-dark);
    border-color: rgba(19, 118, 109, 0.22);
    background: rgba(255,255,255,0.9);
}
.account-quiet-actions .danger-text-button {
    color: #9a4b42;
    border-color: rgba(181, 71, 71, 0.12);
}
.account-quiet-actions .danger-text-button:hover {
    color: var(--danger);
    border-color: rgba(181, 71, 71, 0.22);
    background: rgba(255, 240, 237, 0.82);
}
.text-button {
    min-height: 0;
    padding: 4px 0;
    border: 0;
    color: var(--muted);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 850;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.text-button:hover {
    color: var(--accent);
}
.danger-text-button {
    color: #a94a3d;
}
.danger-text-button:hover {
    color: var(--danger);
}

.hero-card {
    position: relative;
    overflow: hidden;
    padding: clamp(26px, 5vw, 48px);
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 30px;
    color: var(--ink);
    background:
        linear-gradient(135deg, rgba(251,255,248,0.94), rgba(232,249,241,0.92)),
        #f4fbf7;
    box-shadow: var(--shadow);
    isolation: isolate;
}
.teacher-page .hero-card {
    color: white;
    border: 0;
    background: linear-gradient(135deg, #312e81, #7c3aed 58%, #60a5fa);
}
.hero-card::before {
    content: "";
    position: absolute;
    inset: -44% -22%;
    z-index: 0;
    background:
        conic-gradient(from 120deg,
            rgba(255, 211, 103, 0.02),
            rgba(124, 211, 255, 0.42),
            rgba(184, 156, 255, 0.34),
            rgba(255, 154, 188, 0.32),
            rgba(255, 224, 130, 0.36),
            rgba(104, 211, 168, 0.38),
            rgba(255, 211, 103, 0.02));
    filter: blur(28px);
    opacity: 0.9;
    animation: heroAuroraTurn 16s linear infinite;
}
.teacher-page .hero-card::before { display: none; }
.hero-card::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 260px;
    height: 260px;
    right: -70px;
    top: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.62), transparent 68%);
}
.teacher-page .hero-card::after { background: radial-gradient(circle, rgba(255, 223, 178, 0.5), transparent 68%); }
.hero-card h1 { position: relative; z-index: 1; margin: 0; font-size: clamp(2.2rem, 6vw, 4rem); letter-spacing: -0.055em; }
.hero-card p { position: relative; z-index: 1; max-width: 600px; margin: 13px 0 0; color: rgba(24, 53, 47, 0.68); }
.teacher-page .hero-card p { color: rgba(255,255,255,0.78); }

.student-progress-hero {
    color: var(--ink);
    border-color: rgba(255,255,255,0.86);
    background:
        radial-gradient(circle at 74% 10%, rgba(255, 233, 160, 0.46), transparent 26%),
        radial-gradient(circle at 18% 112%, rgba(179, 230, 214, 0.56), transparent 36%),
        linear-gradient(145deg, #fbfff8 0%, #ecf8f3 48%, #d6f0e7 100%);
}
.student-ai-tutor-entry {
    margin: 18px 0 28px;
}

.student-ai-tutor-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 126px;
    padding: 22px 24px;
    overflow: hidden;
    color: #173f38;
    text-decoration: none;
    border: 1px solid rgba(73, 142, 124, 0.22);
    border-radius: 28px;
    background:
        radial-gradient(circle at 82% 8%, rgba(255, 225, 159, 0.48), transparent 36%),
        linear-gradient(135deg, rgba(231, 248, 241, 0.98), rgba(249, 252, 242, 0.94));
    box-shadow: 0 18px 42px rgba(38, 87, 75, 0.1);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.student-ai-tutor-card:hover {
    transform: translateY(-2px);
    border-color: rgba(52, 127, 106, 0.4);
    box-shadow: 0 22px 48px rgba(38, 87, 75, 0.15);
}

.student-ai-tutor-card:focus-visible {
    outline: 3px solid rgba(41, 128, 105, 0.32);
    outline-offset: 3px;
}

.student-ai-tutor-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 20px;
    color: #f9fffc;
    background: linear-gradient(145deg, #216d5d, #3b9b7e);
    box-shadow: 0 12px 24px rgba(28, 99, 82, 0.22);
}

.student-ai-tutor-icon svg {
    width: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.student-ai-tutor-copy { display: grid; gap: 5px; }
.student-ai-tutor-copy strong { font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -0.025em; }
.student-ai-tutor-copy > span:last-child { color: rgba(23, 63, 56, 0.68); line-height: 1.5; }
.student-ai-tutor-eyebrow { color: #2b806b; font-size: 0.73rem; font-weight: 800; letter-spacing: 0.13em; }
.student-ai-tutor-arrow { font-size: 1.8rem; transition: transform 180ms ease; }
.student-ai-tutor-card:hover .student-ai-tutor-arrow { transform: translateX(4px); }

@media (max-width: 640px) {
    .student-ai-tutor-card { gap: 14px; min-height: 112px; padding: 18px; border-radius: 24px; }
    .student-ai-tutor-icon { width: 52px; height: 52px; border-radius: 17px; }
    .student-ai-tutor-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
.student-ai-tutor-card,
    .student-ai-tutor-arrow { transition-duration: 1ms; }
}

.student-skill-entries {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 17px;
    margin: 18px 0 28px;
}
.student-skill-card {
    --skill-tone: #2c72d8;
    --skill-glow: rgba(44, 114, 216, 0.22);
    --skill-wash: rgba(224, 235, 252, 0.88);
    --skill-edge: rgba(44, 114, 216, 0.19);
    --skill-focus: rgba(44, 114, 216, 0.28);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    align-items: center;
    gap: 24px;
    min-height: 122px;
    padding: 19px 27px;
    overflow: hidden;
    color: #233039;
    text-decoration: none;
    border: 1px solid var(--skill-edge);
    border-radius: 32px;
    background:
        radial-gradient(circle at 85% 28%, var(--skill-glow), transparent 19rem),
        linear-gradient(110deg, rgba(255, 255, 255, 0.88), var(--skill-wash));
    box-shadow: 0 18px 48px rgba(35, 55, 62, 0.10), inset 0 1px rgba(255, 255, 255, 0.96);
    isolation: isolate;
    transform-origin: center;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 300ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 300ms ease;
}
.student-skill-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0.2), transparent 58%, rgba(255, 255, 255, 0.1));
}
.student-skill-card.writing {
    --skill-tone: #2c72d8;
    --skill-glow: rgba(44, 114, 216, 0.22);
    --skill-wash: rgba(224, 235, 252, 0.88);
    --skill-edge: rgba(44, 114, 216, 0.19);
    --skill-focus: rgba(44, 114, 216, 0.28);
}
.student-skill-card.intensive-listening {
    --skill-tone: #0f9194;
    --skill-glow: rgba(15, 145, 148, 0.21);
    --skill-wash: rgba(222, 242, 241, 0.9);
    --skill-edge: rgba(15, 145, 148, 0.19);
    --skill-focus: rgba(15, 145, 148, 0.28);
}
.student-skill-card.speaking {
    --skill-tone: #dd6928;
    --skill-glow: rgba(221, 105, 40, 0.21);
    --skill-wash: rgba(250, 232, 220, 0.9);
    --skill-edge: rgba(221, 105, 40, 0.19);
    --skill-focus: rgba(221, 105, 40, 0.28);
}
.student-skill-card:hover {
    transform: translateY(-2px);
    filter: saturate(1.04) brightness(1.01);
    box-shadow: 0 23px 54px rgba(35, 55, 62, 0.14), inset 0 1px rgba(255, 255, 255, 0.98);
}
.student-skill-card:active {
    transform: scale(0.987);
    transition-duration: 90ms;
}
.student-skill-card:focus-visible {
    outline: 3px solid var(--skill-focus);
    outline-offset: 3px;
}
.student-skill-copy {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: #627078;
    line-height: 1.5;
}
.student-skill-title-row {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    white-space: nowrap;
}
.student-skill-title {
    color: var(--skill-tone);
    font-size: clamp(1.2rem, 1.8vw, 1.4rem);
    font-weight: 760;
    letter-spacing: -0.035em;
    line-height: 1.1;
}
.student-skill-badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 9px;
    border: 1px solid var(--skill-edge);
    border-radius: 999px;
    color: var(--skill-tone);
    background: rgba(255, 255, 255, 0.56);
    font-size: 0.62rem;
    font-weight: 780;
    letter-spacing: 0.025em;
    line-height: 1;
}
.student-skill-sentence {
    display: block;
    font-size: clamp(0.86rem, 1.2vw, 0.96rem);
    font-weight: 590;
    line-height: 1.45;
}
.student-skill-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 1px solid var(--skill-edge);
    border-radius: 19px;
    color: var(--skill-tone);
    background: rgba(255, 255, 255, 0.57);
    box-shadow: 0 10px 24px var(--skill-glow), inset 0 1px rgba(255, 255, 255, 0.92);
    transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1), color 220ms ease, background 220ms ease;
}
.student-skill-card .student-skill-icon svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.student-skill-card .student-skill-pen-solid,
.student-workspace-confirm-icon .student-skill-pen-solid {
    fill: currentColor;
    stroke: none;
}
.student-workspace-confirm-icon svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.student-skill-card:hover .student-skill-icon,
.student-skill-card:focus-visible .student-skill-icon {
    color: var(--skill-tone);
    background: rgba(255, 255, 255, 0.72);
    transform: scale(1.04);
}
@media (max-width: 640px) {
    .student-skill-entries { gap: 12px; margin: 12px 0 24px; }
    .student-skill-card {
        grid-template-columns: minmax(0, 1fr) 58px;
        gap: 12px;
        min-height: 112px;
        padding: 15px 18px;
        border-radius: 24px;
    }
    .student-skill-copy { gap: 5px; }
    .student-skill-title { font-size: 1.1rem; }
    .student-skill-title-row { gap: 7px; }
    .student-skill-badge {
        min-height: 22px;
        padding: 0 7px;
        font-size: 0.56rem;
        letter-spacing: 0.01em;
    }
    .student-skill-sentence {
        font-size: 0.8rem;
        line-height: 1.4;
    }
    .student-skill-icon { width: 58px; height: 58px; border-radius: 18px; }
    .student-skill-card .student-skill-icon svg { width: 29px; height: 29px; }
}
@media (max-width: 360px) {
    .student-skill-card { padding-inline: 17px; }
    .student-skill-title { font-size: 1.02rem; }
    .student-skill-badge { padding-inline: 5px; font-size: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .student-skill-card,
    .student-skill-icon { transition-duration: 1ms; }
    .student-skill-card:hover,
    .student-skill-card:active { transform: none; }
}
@media (prefers-contrast: more) {
    .student-skill-card { border-color: rgba(27, 37, 43, 0.48); }
    .student-skill-copy { color: #1d2b28; }
    .student-skill-icon { color: #1f4c42; border: 1px solid rgba(31, 76, 66, 0.38); }
}
@media (prefers-reduced-transparency: reduce) {
    .student-skill-card {
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

.student-workspace-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1800;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(30, 42, 41, 0.22);
    opacity: 0;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: opacity 220ms ease;
}
.student-workspace-confirm-overlay[hidden] { display: none; }
.student-workspace-confirm-overlay.is-visible { opacity: 1; }
.student-workspace-confirm-stack { width: min(100%, 420px); }
.student-workspace-confirm-dialog {
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 26px;
    background: rgba(251, 253, 250, 0.97);
    box-shadow: 0 28px 70px rgba(35, 55, 52, 0.24), inset 0 1px 0 #ffffff;
    transform: scale(0.94) translateY(12px);
    opacity: 0;
    transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 190ms ease;
}
.student-workspace-confirm-overlay.is-visible .student-workspace-confirm-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.student-workspace-confirm-icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 16px;
    color: #36534d;
    background: #e3efea;
}
.student-workspace-confirm-dialog h2 {
    margin: 0;
    color: #202d2b;
    font-size: 1.4rem;
    letter-spacing: -0.025em;
}
.student-workspace-confirm-dialog p { margin: 12px 0 24px; color: rgba(32, 45, 43, 0.62); }
.student-workspace-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.student-workspace-confirm-actions button {
    min-height: 46px;
    padding: 11px 16px;
    border: 0;
    border-radius: 14px;
    font: inherit;
    font-weight: 760;
    cursor: pointer;
    transition: transform 100ms ease, filter 160ms ease;
}
.student-workspace-confirm-actions button:hover { filter: brightness(0.985); }
.student-workspace-confirm-actions button:active { transform: scale(0.97); }
.student-workspace-confirm-actions button:focus-visible { outline: 3px solid rgba(49, 93, 83, 0.28); outline-offset: 2px; }
.student-workspace-confirm-cancel { color: #33413f; background: #edf1ef; }
.student-workspace-confirm-submit { color: #f8fbf9; background: #315d53; }
@media (max-width: 520px) {
    .student-workspace-confirm-actions { grid-template-columns: 1fr; }
    .student-workspace-confirm-cancel { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .student-workspace-confirm-overlay,
    .student-workspace-confirm-dialog { transition-duration: 1ms; transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .student-workspace-confirm-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .student-workspace-confirm-dialog { background: #fbfdfa; }
}
.student-progress-hero::before {
    background:
        conic-gradient(from 160deg,
            rgba(255, 213, 107, 0.04),
            rgba(124, 211, 255, 0.24),
            rgba(184, 156, 255, 0.16),
            rgba(255, 224, 130, 0.22),
            rgba(104, 211, 168, 0.28),
            rgba(255, 213, 107, 0.04));
    opacity: 0.7;
}
.student-progress-hero::after {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.68), transparent 70%);
}
.hero-progress-head {
    position: relative;
    z-index: 1;
    margin-bottom: 22px;
}
.hero-progress-stats {
    display: grid;
    gap: 11px;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(19, 118, 109, 0.12);
    border-radius: 18px;
    background: rgba(255,255,255,0.68);
    box-shadow: 0 10px 26px rgba(19, 118, 109, 0.08);
}
.hero-meter-row {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 12px;
    text-align: center;
}
.hero-meter-row strong {
    display: block;
    color: var(--accent-dark);
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    line-height: 1;
    font-weight: 950;
    white-space: nowrap;
}
.hero-meter-row span {
    color: rgba(24, 53, 47, 0.6);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.25;
    text-align: right;
}
.hero-meter-track {
    position: relative;
    overflow: hidden;
    height: 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.72);
    box-shadow: inset 0 0 0 1px rgba(19,118,109,0.09);
}
.hero-meter-track i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #8ad6aa, #13766d);
}
.hero-progress-stats.is-loading .hero-meter-track i,
.loading-track i {
    width: 46%;
    animation: progressLoadingPulse 1.2s ease-in-out infinite;
}
.progress-skeleton-text,
.hero-progress-stats.is-loading .hero-meter-legend {
    color: rgba(24, 53, 47, 0.44);
}
.hero-meter-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: rgba(24, 53, 47, 0.58);
    font-size: 0.72rem;
    font-weight: 850;
}
.hero-meter-legend span {
    min-width: 0;
}
.hero-meter-legend b {
    color: var(--ink);
    font-weight: 950;
}
.progress-board {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.14fr) minmax(300px, 0.86fr);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.82);
    border-radius: 20px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,0.78), transparent 35%),
        rgba(255,255,255,0.5);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.86),
        0 18px 42px rgba(19, 118, 109, 0.1);
    backdrop-filter: blur(14px);
}
.progress-map-panel,
.progress-detail-panel {
    min-height: 304px;
    padding: 24px;
    background: transparent;
}
.progress-map-panel {
    display: grid;
    align-content: center;
    justify-content: stretch;
}
.progress-dot-map {
    display: grid;
    grid-template-columns: 58px repeat(7, minmax(30px, 1fr));
    gap: 12px 11px;
    align-items: center;
    justify-items: center;
    width: min(100%, 520px);
    max-width: 100%;
    margin: 0 auto;
    overflow-x: auto;
    padding: 6px 2px 10px;
}
.progress-dot-map span,
.progress-week-button {
    color: rgba(24, 53, 47, 0.58);
    font-size: 0.78rem;
    font-weight: 950;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}
.progress-dot-map .progress-week-label {
    justify-self: start;
    color: rgba(13, 93, 86, 0.78);
    text-align: left;
}
.progress-week-button {
    min-height: 26px;
    padding: 0 7px;
    border: 0;
    border-radius: 999px;
    appearance: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.progress-week-button:hover,
.progress-week-button.active {
    color: var(--accent-dark);
    background: rgba(255,255,255,0.78);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(19,118,109,0.1);
}
.progress-dot,
.progress-dot-map i {
    display: inline-block;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    appearance: none;
    background: rgba(255,255,255,0.62);
    box-shadow: inset 0 0 0 1px rgba(19, 118, 109, 0.08);
}
button.progress-dot {
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
button.progress-dot:hover,
button.progress-dot.active {
    transform: translateY(-1px) scale(1.16);
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.92),
        0 0 0 5px rgba(19, 118, 109, 0.12),
        0 8px 18px rgba(19,118,109,0.18);
}
.progress-dot.l1 { background: #c9ead8; }
.progress-dot.l2 { background: #8ad6aa; }
.progress-dot.l3 { background: #44ad7d; }
.progress-dot.l4 { background: #13766d; }
.progress-dot.star { background: #ffd56b; box-shadow: 0 0 0 2px rgba(255,255,255,0.78), 0 8px 18px rgba(216,149,40,0.2); }
.progress-dot.future {
    border: 1px dashed rgba(19, 118, 109, 0.22);
    background: rgba(255,255,255,0.46);
    box-shadow: none;
}
.progress-detail-panel {
    display: grid;
    align-content: center;
    border-left: 1px solid rgba(19,118,109,0.1);
}
.progress-detail-list {
    display: grid;
    align-content: center;
    gap: 12px;
}
.progress-detail-task {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    min-height: 64px;
    padding: 13px 14px;
    border: 1px solid rgba(19,118,109,0.1);
    border-radius: 16px;
    background: rgba(255,255,255,0.68);
    box-shadow: 0 8px 20px rgba(19, 118, 109, 0.06);
}
.progress-detail-task[data-open-href] {
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.progress-detail-task[data-open-href]:hover,
.progress-detail-task[data-open-href]:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(19,118,109,0.3);
    background: rgba(255,255,255,0.9);
    box-shadow: 0 12px 26px rgba(19,118,109,0.12);
    outline: none;
}
.progress-detail-task strong {
    display: block;
    grid-column: 1 / -1;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.32;
}
.progress-task-meta {
    display: inline-flex;
    grid-column: 2;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    flex-wrap: nowrap;
    gap: 6px;
}
.progress-task-type,
.progress-task-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 950;
    white-space: nowrap;
}
.progress-task-type {
    color: #1f6f87;
    background: #e3f4fb;
}
.progress-task-score {
    color: #17654e;
    background: #dcf5e7;
}
.progress-detail-empty {
    padding: 16px;
    border: 1px dashed rgba(19,118,109,0.18);
    border-radius: 16px;
    color: rgba(24, 53, 47, 0.62);
    background: rgba(255,255,255,0.56);
    line-height: 1.55;
}
.progress-dot-map-loading i {
    --progress-column-delay: 0s;
    --progress-row-delay: 0s;
    background: linear-gradient(135deg, rgba(255,255,255,0.52), rgba(138,214,170,0.58));
    animation: progressGridWave 1.65s ease-in-out infinite;
    animation-delay: calc(var(--progress-column-delay) + var(--progress-row-delay));
}
.progress-dot-map-loading i:nth-of-type(7n + 2) { --progress-column-delay: 0.06s; }
.progress-dot-map-loading i:nth-of-type(7n + 3) { --progress-column-delay: 0.12s; }
.progress-dot-map-loading i:nth-of-type(7n + 4) { --progress-column-delay: 0.18s; }
.progress-dot-map-loading i:nth-of-type(7n + 5) { --progress-column-delay: 0.24s; }
.progress-dot-map-loading i:nth-of-type(7n + 6) { --progress-column-delay: 0.30s; }
.progress-dot-map-loading i:nth-of-type(7n) { --progress-column-delay: 0.36s; }
.progress-dot-map-loading i:nth-of-type(n + 8):nth-of-type(-n + 14) { --progress-row-delay: 0.10s; }
.progress-dot-map-loading i:nth-of-type(n + 15):nth-of-type(-n + 21) { --progress-row-delay: 0.20s; }
.progress-dot-map-loading i:nth-of-type(n + 22):nth-of-type(-n + 28) { --progress-row-delay: 0.30s; }
.progress-detail-loading {
    background: linear-gradient(90deg, rgba(255,255,255,0.42), rgba(255,255,255,0.82), rgba(255,255,255,0.42));
    background-size: 220% 100%;
    animation: progressSkeletonSweep 1.4s ease-in-out infinite;
}
.progress-detail-loading {
    display: grid;
    min-height: 72px;
    place-items: center;
    padding: 14px 18px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(19,118,109,0.07);
}
.progress-loading-copy {
    position: relative;
    z-index: 1;
    color: rgba(24, 53, 47, 0.5);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

@keyframes heroAuroraTurn {
    from { transform: rotate(0deg) scale(1); }
    to { transform: rotate(360deg) scale(1); }
}

@keyframes progressSkeletonSweep {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

@keyframes progressGridWave {
    0%, 100% { opacity: 0.45; transform: scale(0.88); }
    45% { opacity: 1; transform: scale(1); background: rgba(138,214,170,0.72); }
}

@keyframes progressLoadingPulse {
    0%, 100% { opacity: 0.5; transform: scaleX(0.74); transform-origin: left center; }
    50% { opacity: 1; transform: scaleX(1); transform-origin: left center; }
}

.dashboard-tabs {
    position: sticky;
    z-index: 80;
    top: 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: min(560px, 100%);
    margin: 18px auto 28px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,0.78);
    border-radius: 999px;
    background: rgba(255,255,255,0.78);
    box-shadow: 0 12px 34px rgba(25, 68, 61, 0.1);
    backdrop-filter: blur(18px);
}
.student-library-tabs {
    grid-template-columns: 1fr;
    width: min(300px, 100%);
}
.student-library-dock {
    position: sticky;
    z-index: 80;
    top: 8px;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: min(360px, 100%);
    margin: 18px auto 28px;
}
.student-library-dock .student-library-tabs {
    position: relative;
    top: auto;
    display: block;
    width: 100%;
    height: 54px;
    min-height: 54px;
    margin: 0;
}
.student-library-search-trigger {
    display: inline-grid;
    place-items: center;
    width: 50px;
    min-width: 50px;
    height: 50px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.76);
    border-radius: 50%;
    color: rgba(24, 53, 47, 0.7);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0.38)),
        rgba(255,255,255,0.42);
    box-shadow:
        0 14px 36px rgba(25, 68, 61, 0.1),
        inset 0 1px 0 rgba(255,255,255,0.8);
    backdrop-filter: blur(22px) saturate(1.25);
    transition: transform 150ms ease, color 180ms ease, box-shadow 180ms ease, background 180ms ease;
    -webkit-tap-highlight-color: transparent;
}
.student-library-search-trigger svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.15;
    stroke-linecap: round;
}
.student-library-search-trigger:hover {
    color: var(--accent-dark);
    transform: translateY(-1px);
}
.student-library-search-trigger:active {
    transform: scale(0.96);
    transition-duration: 80ms;
}
.student-library-dock.is-searching .student-library-search-trigger {
    color: var(--accent-dark);
    background:
        radial-gradient(circle at 24% 12%, rgba(255,255,255,0.94), transparent 38%),
        linear-gradient(135deg, rgba(255, 244, 176, 0.78), rgba(184, 238, 220, 0.82) 48%, rgba(187, 222, 255, 0.76));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.94),
        0 10px 24px rgba(19, 118, 109, 0.16);
}
.student-library-dock .student-library-label,
.student-library-search-panel {
    position: absolute;
    inset: 6px;
    width: calc(100% - 12px);
    transition: transform 230ms cubic-bezier(.2,.78,.2,1), opacity 160ms ease;
}
.student-library-dock .student-library-label {
    min-height: 42px;
}
.student-library-search-panel {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 5px 0 14px;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-12px) scale(0.98);
    background: rgba(255,255,255,0.72);
}
.student-library-search-panel .resource-search {
    min-width: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--ink);
    background: transparent;
    font-size: 0.88rem;
    font-weight: 720;
}
.student-library-search-panel .resource-search::placeholder {
    color: rgba(100, 123, 117, 0.78);
    font-weight: 650;
}
.student-library-search-panel .resource-search::-webkit-search-cancel-button {
    display: none;
}
.student-library-search-close {
    display: grid;
    place-items: center;
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: rgba(24, 53, 47, 0.58);
    background: rgba(19, 118, 109, 0.08);
    font-size: 1.15rem;
    line-height: 1;
}
.student-library-dock.is-searching .student-library-label {
    opacity: 0;
    pointer-events: none;
    transform: translateX(12px) scale(0.98);
}
.student-library-dock.is-searching .student-library-search-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) scale(1);
}
.teacher-page .dashboard-tabs { grid-template-columns: repeat(3, 1fr); }
.teacher-create-capsule {
    width: 46px;
    min-width: 46px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(139, 92, 246, 0.36);
    border-radius: 12px;
    color: var(--accent-dark);
    background: rgba(255,255,255,0.78);
    box-shadow: 0 10px 24px rgba(83, 45, 145, 0.10);
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 900;
}
.teacher-create-capsule:hover {
    border-color: rgba(124, 58, 237, 0.38);
    background: rgba(247, 243, 255, 0.96);
}
.header-create-student {
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    box-shadow: 0 10px 24px rgba(83, 45, 145, 0.10);
    overflow: visible;
}
.header-student-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tab-button {
    position: relative;
    min-height: 42px;
    border: 0;
    border-radius: 999px;
    color: var(--muted);
    background: transparent;
    font-weight: 850;
}
.tab-button .notice-dot { top: -9px; right: -5px; }
.tab-button .notice-dot.todo { background: var(--danger); }
.tab-button.active { color: white; background: var(--accent); }
body:not(.teacher-page) .dashboard-tabs {
    border: 1px solid rgba(255,255,255,0.76);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0.38)),
        rgba(255,255,255,0.42);
    box-shadow:
        0 16px 42px rgba(25, 68, 61, 0.1),
        inset 0 1px 0 rgba(255,255,255,0.8);
    backdrop-filter: blur(22px) saturate(1.25);
}
body:not(.teacher-page) .tab-button {
    color: rgba(24, 53, 47, 0.64);
    font-weight: 880;
    overflow: visible;
}
body:not(.teacher-page) .tab-button .notice-dot {
    top: -13px;
    right: -8px;
    z-index: 4;
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.9),
        0 8px 18px rgba(181, 71, 71, 0.24);
}
body:not(.teacher-page) .tab-button:hover {
    color: #0d5d56;
    background: rgba(255,255,255,0.38);
}
body:not(.teacher-page) .tab-button.active {
    color: #0d5d56;
    background:
        radial-gradient(circle at 24% 12%, rgba(255,255,255,0.92), transparent 38%),
        linear-gradient(135deg, rgba(255, 244, 176, 0.72), rgba(184, 238, 220, 0.76) 48%, rgba(187, 222, 255, 0.72));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 10px 22px rgba(19, 118, 109, 0.14);
}

.dashboard-view {
    min-width: 0;
}
.dashboard-view[hidden] { display: none; }
#assignment-content {
    display: flex;
    min-height: clamp(360px, calc(100vh - 390px), 720px);
    flex-direction: column;
}
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 28px 0 13px; }
.section-heading h2 { margin: 0; font-size: 1.35rem; letter-spacing: -0.035em; }
.section-heading p { margin: 4px 0 0; color: var(--muted); font-size: 0.86rem; }

.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.summary-card {
    position: relative;
    width: 100%;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    color: var(--ink);
    background: rgba(255,255,255,0.82);
    text-align: left;
}
.summary-value { display: block; font-size: 1.8rem; font-weight: 900; letter-spacing: -0.05em; }
.summary-label { color: var(--muted); font-size: 0.76rem; font-weight: 800; }
.assignment-list-tools { display: flex; justify-content: flex-end; margin: -10px 0 14px; }

.task-list, .resource-list { display: grid; gap: 12px; }
.task-card, .resource-card, .profile-card, .empty-card {
    padding: 19px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255,255,255,0.86);
    box-shadow: 0 10px 28px rgba(25, 68, 61, 0.055);
}
.task-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; overflow: hidden; }
.task-card.has-teacher-replies {
    border-color: rgba(124, 58, 237, 0.28);
    background: linear-gradient(135deg, rgba(248, 245, 255, 0.94), rgba(255,255,255,0.9));
    box-shadow: 0 14px 34px rgba(91, 33, 182, 0.08);
}
.task-card h3, .resource-card h3 { margin: 5px 0 6px; font-size: 1.06rem; }
.assignment-title { margin: 0 0 8px !important; color: var(--ink); letter-spacing: -0.02em; }
.card-meta { display: flex; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 0.78rem; }
.badge { display: inline-flex; align-items: center; min-height: 25px; padding: 3px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 850; }
.badge.todo { color: #7a5528; background: #fff1da; }
.badge.to_do { color: #7a5528; background: #fff1da; }
.badge.passed { color: #1f6f87; background: #e3f4fb; }
.badge.mastered { color: var(--success); background: var(--success-soft); }
.badge.failed { color: var(--danger); background: var(--danger-soft); }
.badge.done { color: var(--success); background: var(--success-soft); }
.badge.neutral { color: var(--accent-dark); background: var(--accent-soft); }
.card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 98px;
    min-height: 42px;
    padding: 0 15px;
    border: 0;
    border-radius: 12px;
    color: white;
    background: var(--accent);
    font-weight: 850;
    text-decoration: none;
}
.reply-button {
    gap: 7px;
    color: #fff;
    background: #6d28d9;
}
.reply-button:hover { background: #5b21b6; }
.reply-count-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: #e11d48;
    font-size: 0.68rem;
    line-height: 1;
    font-weight: 900;
}
.task-go-button {
    width: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 999px;
}
.star-button { background: #d89528; }
.star-button:hover { background: #ba7417; }
.star-button.collected, .star-button:disabled {
    color: #7a5528;
    background: #fff1da;
    cursor: default;
    opacity: 1;
}
.star-button.collected {
    transform: scale(0.85);
    opacity: 0;
    transition: transform 160ms ease, opacity 160ms ease;
}
.star-flyer {
    position: fixed;
    z-index: 30;
    transform: translate(-50%, -50%);
    pointer-events: none;
    color: #d89528;
    font-size: 2.4rem;
    line-height: 1;
    text-shadow: 0 10px 22px rgba(216, 149, 40, 0.28);
    animation: star-fly 900ms cubic-bezier(.2,.78,.2,1) forwards;
}

@keyframes star-fly {
    0% { transform: translate(-50%, -50%) scale(0.35) rotate(-18deg); opacity: 0; }
    18% { transform: translate(-50%, calc(-50% - 18px)) scale(1.18) rotate(8deg); opacity: 1; }
    78% { transform: translate(calc(-50% + var(--star-dx)), calc(-50% + var(--star-dy) - 10px)) scale(0.88) rotate(22deg); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--star-dx)), calc(-50% + var(--star-dy))) scale(0.25) rotate(32deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .star-flyer { animation-duration: 1ms; }
    .star-counter.pop { animation-duration: 1ms; }
    .star-counter,
    .account-feedback-row,
    .account-finished-row,
    .account-finished-value svg,
    .account-star-back,
    .account-star-history-row,
    .account-wallet-destinations button,
    .account-wallet-redeem { transition-duration: 1ms !important; }
    .account-feedback-row.is-responding > span,
    .account-feedback-row.is-responding > strong {
        animation: none !important;
        color: var(--accent-dark);
    }
    .student-greeting-track.is-scrolling {
        transform: none;
        animation: none;
    }
    .student-greeting-copy:last-child { display: none; }
    .student-library-search-trigger,
    .student-library-dock .student-library-label,
    .student-library-search-panel { transition-duration: 1ms; }
}
.teacher-dictionary-modal {
    position: fixed;
    z-index: 11040;
    inset: 0;
    padding: 24px;
    background: rgba(21,44,39,.36);
    backdrop-filter: blur(14px) saturate(120%);
}
.teacher-dictionary-shell { width: min(1120px, 100%); height: min(780px, calc(100vh - 48px)); margin: 0 auto; }
.teacher-dictionary-dialog {
    display: grid;
    grid-template-rows: auto auto minmax(0,1fr);
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 28px;
    background: rgba(248,251,249,.96);
    box-shadow: 0 30px 90px rgba(20,54,47,.28);
}
.teacher-dictionary-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px 14px; }
.teacher-dictionary-head h2 { margin: 2px 0 0; }
.teacher-dictionary-head input { width: min(320px, 46%); padding: 10px 13px; border: 1px solid #cbdad5; border-radius: 999px; background: #fff; }
.teacher-dictionary-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 0 22px 14px; }
.teacher-dictionary-tabs button { padding: 8px 12px; border: 0; border-radius: 999px; color: #49635d; background: #e8f0ed; font-weight: 800; cursor: pointer; }
.teacher-dictionary-tabs button.active { color: #fff; background: #13766d; }
.teacher-dictionary-body { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(0, 1.6fr); min-height: 0; border-top: 1px solid #dbe6e2; }
.teacher-dictionary-list { overflow: auto; padding: 12px; border-right: 1px solid #dbe6e2; }
.teacher-dictionary-row { display: grid; gap: 3px; width: 100%; padding: 11px 12px; border: 0; border-radius: 13px; color: #18332f; background: transparent; text-align: left; cursor: pointer; }
.teacher-dictionary-row span { color: #7a8e87; font-size: .72rem; }
.teacher-dictionary-row:hover,
.teacher-dictionary-row.active { background: #eaf6f2; }
.teacher-dictionary-editor { overflow: auto; padding: 20px 22px 28px; }
.teacher-dictionary-form { display: grid; gap: 13px; }
.teacher-dictionary-editor-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.teacher-dictionary-editor-title h3 { margin: 2px 0 0; font-size: 1.45rem; }
.teacher-dictionary-form label { display: grid; gap: 5px; color: #49635d; font-size: .76rem; font-weight: 800; }
.teacher-dictionary-form input,
.teacher-dictionary-form textarea { width: 100%; padding: 10px 11px; border: 1px solid #cbdad5; border-radius: 11px; color: #18332f; background: #fff; font: inherit; }
.teacher-dictionary-form textarea { min-height: 80px; resize: vertical; }
.teacher-dictionary-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.teacher-dictionary-reports { margin: 0; padding: 10px 12px 10px 28px; border-radius: 12px; color: #7b5146; background: #fff1ed; font-size: .75rem; }
.teacher-dictionary-form-status { min-height: 1.2em; margin: 0; color: #13766d; font-weight: 760; }
@media (max-width: 760px) {
    .teacher-dictionary-modal { padding: 10px; }
    .teacher-dictionary-shell { height: calc(100vh - 20px); }
    .teacher-dictionary-body { grid-template-columns: 1fr; grid-template-rows: minmax(150px, .55fr) minmax(0, 1.45fr); }
    .teacher-dictionary-list { border-right: 0; border-bottom: 1px solid #dbe6e2; }
    .teacher-dictionary-head { align-items: stretch; flex-direction: column; }
    .teacher-dictionary-head input { width: 100%; }
    .teacher-dictionary-form-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-transparency: reduce) {
    .student-library-search-trigger,
    body:not(.teacher-page) .student-library-dock .dashboard-tabs {
        background: #fff;
        backdrop-filter: none;
    }
}

.filter-select {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    background: white;
}

.resource-tools { display: flex; gap: 10px; margin-bottom: 16px; }
.resource-search {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: white;
    outline: none;
}
.library-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}
.library-tab {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255,255,255,0.76);
    font-size: 0.78rem;
    font-weight: 900;
}
.library-tab.active {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent);
}
.library-book-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 14px;
}
.library-book-tab {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(72, 86, 78, 0.18);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.68);
    font-size: 0.76rem;
    font-weight: 900;
    white-space: nowrap;
}
.library-book-tab.active {
    color: #1f5c42;
    border-color: rgba(31, 92, 66, 0.42);
    background: rgba(229, 244, 235, 0.95);
}
.resource-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; }
.library-task-list {
    grid-template-columns: 1fr;
}
.library-task-card {
    min-height: 86px;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.library-task-card:hover {
    transform: translateY(-1px);
    border-color: rgba(19, 118, 109, 0.28);
    background: rgba(255,255,255,0.96);
    box-shadow: 0 14px 34px rgba(25, 68, 61, 0.08);
}
.assignment-task-card.has-teacher-replies {
    border-color: rgba(124, 58, 237, 0.26);
    background: linear-gradient(135deg, rgba(248, 245, 255, 0.94), rgba(255,255,255,0.92));
}
.assignment-task-card.finished-assignment-card {
    background: rgba(255,255,255,0.9);
}
.library-task-card[data-open-href] {
    cursor: pointer;
}
.library-task-card[data-open-href]:focus-visible {
    outline: 3px solid rgba(19, 118, 109, 0.24);
    outline-offset: 3px;
}
.intensive-notification-detail h2 { margin: 8px 0 5px; color: var(--ink); }
.intensive-notification-events { display: grid; gap: 12px; margin-top: 18px; }
.intensive-notification-event { padding: 14px 16px; border: 1px solid rgba(19, 118, 109, .14); border-radius: 14px; background: rgba(249, 252, 251, .82); }
.intensive-notification-event-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.intensive-notification-event p { margin: 4px 0 0; }
.intensive-notification-event .activity-session-summary { margin: 12px 0 0; padding: 12px; }
.intensive-notification-event .activity-session-summary strong { font-size: 1.5rem; }
.activity-session-summary {
    display: grid;
    gap: 8px;
    margin: 22px 0;
    padding: 18px;
    border: 1px solid rgba(19, 118, 109, .16);
    border-radius: 16px;
    background: rgba(229, 244, 235, .68);
}
.activity-session-summary strong { color: #216d5d; font-size: 2rem; }
.activity-session-summary span { color: rgba(24, 53, 47, .72); font-size: .88rem; }
.assignment-task-card .library-task-actions,
.assignment-task-card .card-button {
    position: relative;
    z-index: 2;
}
.practice-entry-overlay {
    position: fixed;
    inset: 0;
    z-index: 2300;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(13, 44, 39, 0.38);
    backdrop-filter: blur(9px);
}
.practice-entry-overlay[hidden] { display: none; }
.practice-entry-shell {
    width: min(420px, 100%);
    display: grid;
    gap: 12px;
    justify-items: center;
}
.practice-entry-card {
    position: relative;
    width: 100%;
    padding: 30px 26px 0;
    border: 1px solid rgba(24, 53, 47, 0.1);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.95);
    text-align: center;
    box-shadow: 0 28px 78px rgba(24, 53, 47, 0.22);
    overflow: visible;
}
.practice-entry-card.is-question-confirmation {
    padding-bottom: 26px;
}
.practice-entry-ribbon[hidden] {
    display: none;
}

/* Give Student and Teacher dialog cards the task-entry confirmation's materialization. */
.practice-entry-card,
.liquid-glass-dashboard :is(
    .student-account-dialog,
    .student-star-dialog,
    .student-words-dialog,
    .student-calendar-dialog,
    .student-message-dialog,
    .teacher-replies-dialog,
    .password-dialog,
    .logout-confirm-dialog,
    .my-word-merge-card
),
.liquid-glass-teacher :is(
    .account-panel,
    .teacher-utility-dialog,
    .create-student-dialog,
    .create-student-success-card,
    .assign-picker-dialog,
    .assignment-edit-dialog,
    .percentage-picker-dialog,
    .assignment-cancel-confirm-dialog,
    .progress-matrix-modal
) {
    animation: practiceEntryPop 560ms cubic-bezier(.18,.95,.26,1.16) both;
    transform-origin: center;
}
.liquid-glass-teacher
.notification-attempt-modal.is-refreshing
.notification-attempt-dialog {
    animation: none;
}
.practice-entry-editions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 8px;
    margin: 0 0 14px;
}
.practice-entry-editions[hidden] { display: none; }
.practice-entry-edition {
    display: grid;
    gap: 3px;
    min-height: 54px;
    padding: 8px 10px;
    border: 1px solid rgba(24, 53, 47, 0.14);
    border-radius: 14px;
    color: var(--ink);
    background: rgba(246, 250, 247, 0.86);
    font: inherit;
    cursor: pointer;
}
.practice-entry-edition strong { font-size: .82rem; }
.practice-entry-edition small { color: var(--muted); font-size: .72rem; font-weight: 850; }
.practice-entry-edition:hover,
.practice-entry-edition.selected {
    border-color: rgba(19, 118, 109, .42);
    background: rgba(224, 244, 238, .92);
    box-shadow: inset 0 0 0 1px rgba(19, 118, 109, .08);
}
.practice-entry-edition:focus-visible {
    outline: 3px solid rgba(19, 118, 109, 0.24);
    outline-offset: 2px;
}
.practice-entry-task {
    position: relative;
    z-index: 1;
    margin: 6px 0 0;
    padding: 15px;
    border: 1px solid rgba(24, 53, 47, 0.1);
    border-radius: 18px;
    background: rgba(246, 250, 247, 0.82);
    text-align: left;
}
.practice-entry-task small {
    display: block;
    color: #13766d;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.practice-entry-task strong {
    display: block;
    margin-top: 5px;
    color: var(--ink);
    font-size: 1.04rem;
    line-height: 1.18;
}
.practice-entry-actions {
    position: relative;
    z-index: 1;
    display: grid;
    margin-top: 18px;
}
.practice-entry-enter {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 999px;
    padding: 12px 18px;
    color: #fff;
    background: var(--ink);
    box-shadow: 0 14px 26px rgba(24,53,47,.20);
    font: inherit;
    font-weight: 950;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.practice-entry-enter:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 30px rgba(24,53,47,.24);
}
.practice-entry-enter:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.practice-entry-enter:focus-visible,
.practice-entry-close:focus-visible {
    outline: 3px solid rgba(19, 118, 109, 0.24);
    outline-offset: 3px;
}
.practice-entry-enter svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.practice-entry-ribbon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    width: calc(100% + 52px);
    margin: 20px -26px 0;
    padding: 13px 18px;
    border-radius: 0 0 30px 30px;
    font-size: .86rem;
    font-weight: 950;
}
#practice-entry-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.practice-entry-score-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(21,127,85,0.16);
    border-radius: 999px;
    color: var(--success);
    background: rgba(232,247,239,0.62);
    font-size: .78rem;
    line-height: 1;
}
.practice-entry-ribbon.not-passed {
    color: #68706d;
    background: linear-gradient(90deg, #f2f4f3, #dfe3e1);
}
.practice-entry-ribbon.not-passed .practice-entry-score-lock {
    border-color: rgba(104, 112, 109, 0.16);
    color: #68706d;
    background: rgba(255, 255, 255, 0.54);
}
.practice-entry-ribbon.passed {
    color: #0d5e4e;
    background: linear-gradient(90deg, #dcf6ec, #a7ead7 56%, #c9f5e8);
}
.practice-entry-ribbon.mastered {
    color: #654000;
    background: linear-gradient(90deg, #fff4bc, #ffd84f 44%, #ffb62e);
    box-shadow:
        0 -8px 26px rgba(255, 190, 45, .26),
        0 0 24px rgba(255, 201, 45, .22);
}
.practice-entry-close {
    min-height: 38px;
    border: 1px solid rgba(24, 53, 47, 0.1);
    border-radius: 999px;
    padding: 8px 18px;
    color: #5f7069;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 10px 24px rgba(13, 44, 39, 0.12);
    font: inherit;
    font-size: .84rem;
    font-weight: 850;
    cursor: pointer;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}
.practice-entry-close:hover {
    color: var(--ink);
    background: rgba(255,255,255,.94);
    border-color: rgba(19, 118, 109, .22);
    transform: translateY(-1px);
}
@keyframes practiceEntryPop {
    from { opacity: 0; transform: translateY(18px) scale(.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.teacher-page .library-task-card:hover {
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: 0 14px 34px rgba(83, 45, 145, 0.09);
}
.library-task-copy { min-width: 0; }
.library-task-copy h3 {
    overflow: hidden;
    text-overflow: ellipsis;
}
.library-task-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.library-task-foot .card-note {
    margin: 0;
}
.library-task-actions {
    display: grid;
    justify-items: end;
    gap: 8px;
}
.library-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid rgba(216, 149, 40, 0.28);
    border-radius: 999px;
    color: #8a5d12;
    background: #fff7d8;
    font-size: 0.76rem;
    font-weight: 950;
    box-shadow: 0 8px 20px rgba(216, 149, 40, 0.12);
}
.library-task-placeholder {
    text-align: left;
}
.resource-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
}
.resource-card-head .eyebrow { margin: 0; }
.resource-card-head span {
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.profile-card h2 { margin-top: 0; }
.profile-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 50px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.profile-row:last-child { border: 0; }
.profile-row.account-final-row { border-bottom: 0; }
.profile-row span { color: var(--muted); }
.account-feedback-row,
.account-finished-row {
    width: 100%;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    color: var(--ink);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.account-feedback-row > span,
.account-feedback-row > strong,
.account-finished-row > span { will-change: transform; }
.account-feedback-row:hover,
.account-feedback-row:active {
    background: transparent;
    transform: none;
}
.account-finished-row:hover { background: rgba(19, 118, 109, 0.045); }
.account-finished-row:active { transform: scale(0.985); }
.account-feedback-row:focus-visible,
.account-finished-row:focus-visible {
    outline: 3px solid rgba(31, 111, 135, 0.24);
    outline-offset: 2px;
    border-radius: 10px;
}
.account-feedback-row.is-responding > span,
.account-feedback-row.is-responding > strong {
    animation: account-row-response 360ms cubic-bezier(.22,.8,.3,1);
}
.account-feedback-row.is-responding > strong { animation-delay: 24ms; }
.account-finished-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink) !important;
}
.account-finished-value svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 160ms ease;
}
.account-finished-row:hover .account-finished-value svg { transform: translateX(2px); }
@keyframes account-row-response {
    0%, 100% { transform: translateX(0); }
    42% { transform: translateX(-3px); }
    72% { transform: translateX(1px); }
}
.profile-actions { display: grid; gap: 10px; margin-top: 18px; }
.profile-actions button { min-height: 44px; border-radius: 12px; font-weight: 850; }
.outline-button { border: 1px solid var(--line); color: var(--ink); background: white; }
.danger-button { border: 1px solid #efc9c3; color: var(--danger); background: #fff; }
.my-words-card { margin: 0; }
.my-words-manual {
    padding: 3px 20px 14px;
}
.my-words-input-shell {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid rgba(19,118,109,0.24);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(19,118,109,0.06);
}
.my-words-input-shell svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #13766d;
    stroke-width: 2.2;
    stroke-linecap: round;
}
.my-words-input-shell input {
    width: 100%;
    min-width: 0;
    padding: 10px 0;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
}
.my-words-input-shell input::placeholder { color: #96a49f; }
.my-words-input-shell > span {
    color: #82938e;
    font-size: 0.68rem;
    font-weight: 750;
    white-space: nowrap;
}
.my-words-manual-status {
    min-height: 1em;
    margin: 6px 3px 0;
    color: #13766d;
    font-size: 0.73rem;
    font-weight: 700;
}
.my-words-search-wrap { padding: 3px 20px 14px; }
.my-words-search-box {
    position: relative;
    display: block;
}
.my-words-search-box svg {
    position: absolute;
    left: 13px;
    top: 50%;
    width: 17px;
    height: 17px;
    transform: translateY(-50%);
    fill: none;
    stroke: #78908a;
    stroke-width: 2;
    stroke-linecap: round;
}
.my-words-search-box input {
    width: 100%;
    min-height: 42px;
    padding: 9px 13px 9px 39px;
    border: 1px solid rgba(35,71,63,0.09);
    border-radius: 14px;
    outline: 0;
    color: var(--ink);
    background: rgba(232,239,235,0.76);
}
.my-words-search-box input:focus {
    border-color: rgba(19,118,109,0.27);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(19,118,109,0.07);
}
.my-words-list {
    display: grid;
}
.my-words-table {
    display: grid;
    overflow: hidden;
}
.my-word-item {
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: transparent;
}
.my-word-item:last-child { border-bottom: 0; }
.my-word-summary {
    display: flex;
    align-items: stretch;
    min-height: 67px;
}
.my-word-toggle {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    flex: 1;
    gap: 0;
    width: 100%;
    min-width: 0;
    min-height: 67px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.my-word-toggle::after {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 50%;
    width: 1px;
    background: var(--line);
    transform: translateX(-0.5px);
}
.my-word-toggle:active { opacity: 0.68; }
.my-word-name {
    min-width: 0;
    padding: 0 13px;
    font-size: 1rem;
    font-weight: 790;
    line-height: 1.22;
    letter-spacing: -0.012em;
    text-align: center;
    overflow-wrap: anywhere;
}
.my-word-name small {
    display: block;
    margin-top: 4px;
    color: #13766d;
    font-size: 0.62rem;
    font-weight: 760;
    letter-spacing: 0;
}
.my-word-select {
    display: grid;
    place-items: center;
    width: 42px;
    flex: 0 0 42px;
    cursor: pointer;
}
.my-word-select input { position: absolute; opacity: 0; pointer-events: none; }
.my-word-select span {
    width: 21px;
    height: 21px;
    border: 2px solid #a9bab4;
    border-radius: 50%;
    background: #fff;
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.my-word-select input:checked + span {
    border-color: #13766d;
    background: #13766d radial-gradient(circle, #fff 0 27%, transparent 30%);
}
.my-word-select:active span { transform: scale(0.88); }
.my-word-primary-copy {
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    padding: 0 13px;
}
.my-word-pos {
    padding: 2px 6px;
    border-radius: 6px;
    color: #13766d;
    background: #eaf6f2;
    font-size: 0.63rem;
    font-weight: 850;
    text-transform: lowercase;
    white-space: nowrap;
}
.my-word-chinese {
    min-width: 0;
    overflow: hidden;
    color: #49635d;
    font-size: 0.8rem;
    font-weight: 680;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.my-word-detail {
    padding: 0 14px 14px;
    background: transparent;
}
.my-word-detail-copy {
    position: relative;
    display: grid;
    gap: 7px;
    padding: 0 44px 0 0;
    color: #637871;
    font-size: 0.78rem;
    line-height: 1.48;
}
.my-word-detail-copy p { margin: 0; }
.my-word-dictionary-status {
    justify-self: start;
    padding: 4px 8px;
    border-radius: 99px;
    color: #6b5a18;
    background: #fff6cf;
    font-size: 0.66rem;
    font-weight: 800;
}
.my-word-recommendation,
.my-word-actions button {
    justify-self: start;
    border: 0;
    border-radius: 999px;
    color: #13766d;
    background: #eaf6f2;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 850;
    cursor: pointer;
}
.my-word-recommendation { padding: 7px 11px; }
.my-word-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; }
.my-word-actions button { padding: 7px 10px; }
.my-word-actions button:active,
.my-word-recommendation:active { transform: scale(0.96); }
.my-word-edit-form,
.my-word-note-form { display: grid; gap: 8px; }
.my-word-edit-form input,
.my-word-note-form textarea {
    width: 100%;
    border: 1px solid #bdd4cd;
    border-radius: 12px;
    color: #18332f;
    background: #fff;
    font: inherit;
    padding: 10px 11px;
}
.my-word-note-form textarea { min-height: 92px; resize: vertical; }
.my-word-edit-form > div,
.my-word-note-form > div { display: flex; justify-content: flex-end; gap: 7px; }
.my-word-note { display: grid; gap: 4px; padding: 10px 11px; border-radius: 12px; background: #f2f7f5; }
.my-word-note p { white-space: pre-wrap; }
.my-word-examples { display: grid; gap: 8px; }
.my-word-examples > div { display: grid; gap: 3px; }
.my-word-examples small { color: #8a9994; }
.my-words-undo-toast {
    position: fixed;
    z-index: 12000;
    left: 50%;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    border-radius: 999px;
    color: #fff;
    background: rgba(24,51,47,.94);
    box-shadow: 0 16px 44px rgba(20,54,47,.28);
    opacity: 0;
    transform: translate(-50%, 12px);
    transition: opacity 160ms ease, transform 160ms ease;
}
.my-words-undo-toast.show { opacity: 1; transform: translate(-50%, 0); }
.my-words-undo-toast button { border: 0; color: #9fe4ce; background: transparent; font: inherit; font-weight: 900; cursor: pointer; }
.my-word-merge-modal {
    position: fixed;
    z-index: 12100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(21,44,39,.38);
    backdrop-filter: blur(13px);
}
.my-word-merge-card {
    display: grid;
    gap: 12px;
    width: min(440px, 100%);
    max-height: min(620px, calc(100vh - 40px));
    overflow: auto;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 24px;
    background: rgba(249,252,250,.97);
    box-shadow: 0 26px 80px rgba(20,54,47,.28);
}
.my-word-merge-card h2,
.my-word-merge-card p { margin: 0; }
.my-word-merge-card > p:not(.eyebrow) { color: #637871; font-size: .82rem; }
.my-word-merge-options { display: grid; gap: 7px; }
.my-word-merge-options label { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 12px; background: #eef6f3; font-weight: 800; cursor: pointer; }
.my-word-merge-options input { width: 19px; height: 19px; accent-color: #13766d; }
.my-word-merge-actions { display: flex; justify-content: flex-end; gap: 8px; }
.my-word-merge-status { min-height: 1em; color: #a5483f !important; }
.my-words-export-controls { display: grid; gap: 11px; padding: 12px 16px 14px; }
.my-words-export-ranges,
.my-words-export-fields { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.my-words-export-ranges button,
.my-words-export-fields label {
    flex: 0 0 auto;
    border: 1px solid #d2e0dc;
    border-radius: 999px;
    color: #49635d;
    background: rgba(255,255,255,.86);
    font: inherit;
    font-size: .7rem;
    font-weight: 800;
}
.my-words-export-ranges button { padding: 7px 11px; cursor: pointer; }
.my-words-export-ranges button.active { border-color: #13766d; color: #fff; background: #13766d; }
.my-words-export-fields label { padding: 6px 10px; cursor: pointer; }
.my-words-export-fields input { margin: 0 5px 0 0; accent-color: #13766d; }
.my-words-export-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.my-words-export-actions span { margin-right: auto; color: #637871; font-size: .72rem; font-weight: 800; }
.my-words-export-status { min-height: 1em; margin: 0; color: #8a5a12; font-size: .7rem; }
@media (prefers-reduced-motion: reduce) {
    .my-word-select span,
    .my-words-undo-toast { transition: none; }
}
.my-word-detail-copy blockquote {
    margin: 2px 0;
    padding: 10px 12px;
    border-left: 3px solid #8fcdb9;
    border-radius: 0 10px 10px 0;
    background: #fff;
}
.my-word-phonetic {
    color: #13766d;
    font-weight: 760;
}
.my-word-phonetic-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
}
.my-word-definition { color: #49645e; }
.my-word-detail-meta { color: #8a9994; font-size: 0.7rem; }
.my-word-speak,
.my-word-lookup {
    border: 0;
    color: #13766d;
    background: #eaf6f2;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}
.my-word-speak {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
}
.my-word-speak svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.my-word-speak:active { transform: scale(0.92); }
.my-word-lookup {
    justify-self: start;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 0.72rem;
}
.my-word-archive {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #8c9b96;
    background: transparent;
    cursor: pointer;
}
.my-word-archive:hover {
    color: #a8483f;
    background: #fff0ee;
}
.my-word-archive:disabled { opacity: 0.42; }
.my-word-archive svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.my-words-empty {
    padding: 50px 20px;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
}
.my-words-message {
    display: grid;
    place-items: center;
    min-height: 240px;
    padding: 28px 20px;
    text-align: center;
}
.my-words-message p { margin: 0; }
.my-words-message .profile-actions { width: min(220px, 100%); }

.student-words-dialog-icon:focus-visible,
.student-words-preview-add-form input:focus-visible,
.student-words-preview-add-form textarea:focus-visible,
.student-words-preview-add-form button:focus-visible,
.student-words-outside-close:focus-visible,
.my-word-toggle:focus-visible,
.my-word-speak:focus-visible,
.my-word-archive:focus-visible,
.my-word-lookup:focus-visible {
    outline: 3px solid rgba(19,118,109,0.25);
    outline-offset: 2px;
}

@media (max-width: 380px) {
    .student-words-preview-add-menu { padding: 20px 17px; }
    .my-word-primary-copy { gap: 5px; }
    .my-words-input-shell > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .student-words-dialog-icon,
    .student-words-preview-speak,
    .student-words-open-button,
    .student-words-tool-panel,
    #my-words-add-trigger svg,
    .student-words-outside-close,
    .student-calendar-month-button,
    .student-calendar-day,
    .student-calendar-outside-close,
    .student-message-section-toggle,
    .student-message-task { transition-duration: 1ms; }

    .student-calendar-day.is-selected { animation: none; }
    .student-words-overlay > .student-words-stack,
    .student-words-overlay > .student-words-manual-layer {
        transform: none;
        filter: none;
        transition: opacity 120ms ease;
    }
    .liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-shell {
        animation: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .student-account-dialog,
    .student-words-dialog,
    .student-words-dialog-head,
    .student-words-open-button,
    .student-words-preview-add-menu,
    .liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-shell,
    .liquid-glass-dashboard .my-words-scan-overlay,
    .student-words-outside-close,
    .student-calendar-dialog,
    .student-calendar-outside-close,
    .student-message-dialog,
    .teacher-replies-dialog,
    .teacher-replies-outside-close {
        background: #f9fbfa;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .student-account-overlay,
    .student-words-overlay,
    .student-calendar-overlay,
    .student-message-overlay,
    .teacher-replies-overlay {
        background: rgba(17,38,34,0.52);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (prefers-contrast: more) {
    .student-account-dialog,
    .student-words-dialog,
    .student-calendar-dialog,
    .student-message-dialog,
    .teacher-replies-dialog { border-color: #56746c; background: #fff; }
    .my-word-item,
    .student-words-preview-item,
    .my-words-search-box input,
    .student-calendar-day,
    .student-message-task { border-color: #82978f; }
}

.password-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(24, 51, 47, 0.34);
    backdrop-filter: blur(8px);
}
.password-dialog-stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 11px;
    width: min(440px, 100%);
    max-height: min(680px, 90vh);
    max-height: min(680px, 90dvh);
}
.password-dialog {
    position: relative;
    width: 100%;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.84);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow);
}
.password-dialog-title-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.password-dialog-title-row .password-dialog-back { grid-column: 1; }
.password-dialog-title-row .eyebrow {
    grid-column: 2;
    margin: 0;
    text-align: center;
}
.password-dialog-title-spacer {
    grid-column: 3;
    width: 38px;
    height: 38px;
}
.password-form {
    display: grid;
    gap: 10px;
}
.password-form label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}
.password-form input {
    min-height: 46px;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0 13px;
    color: var(--ink);
    background: #fff;
}
.password-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(19, 118, 109, 0.1);
}
.password-hint {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.45;
}
.password-message {
    min-height: 20px;
    margin: 0;
    font-size: 0.84rem;
    font-weight: 750;
}
.password-message.error { color: var(--danger); }
.password-message.success { color: var(--success); }
.dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}
.dialog-actions button {
    min-height: 44px;
    border-radius: 12px;
    font-weight: 850;
}
.password-dialog-actions {
    grid-template-columns: minmax(180px, 240px);
    justify-content: center;
}
.password-dialog-outside-close { justify-self: center; }

/* Personal Center descendants share one spatial footprint and one Close anchor. */
.student-star-overlay,
.password-dialog-overlay,
.logout-confirm-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
    border: 0;
    background: rgba(17, 38, 34, 0.3);
    box-shadow: none;
    -webkit-backdrop-filter: blur(8px) saturate(118%);
    backdrop-filter: blur(8px) saturate(118%);
}
.logout-confirm-overlay { z-index: 2200; }
.logout-confirm-overlay[hidden] { display: none; }
.student-account-stack,
.student-star-stack,
.password-dialog-stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 11px;
    width: min(430px, 100%);
    height: min(490px, 86vh);
    height: min(490px, 86dvh);
    max-height: none;
}
.logout-confirm-stack {
    width: min(320px, calc(100% - 32px));
}
.student-account-dialog,
.student-star-dialog,
.password-dialog {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.88);
    border-radius: 26px;
    color: var(--ink);
    background: rgba(248,251,249,0.76);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    backdrop-filter: blur(30px) saturate(160%);
    box-shadow: 0 24px 80px rgba(20,54,47,0.24), 0 3px 12px rgba(20,54,47,0.08);
}
.student-account-outside-close,
.student-star-outside-close,
.password-dialog-outside-close {
    width: 132px;
    min-width: 132px;
    height: 44px;
    min-height: 44px;
    padding: 0 22px;
    justify-self: center;
}
.logout-confirm-dialog {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.88);
    border-radius: 22px;
    color: var(--ink);
    background: rgba(247,249,248,0.82);
    -webkit-backdrop-filter: blur(32px) saturate(165%);
    backdrop-filter: blur(32px) saturate(165%);
    box-shadow: 0 22px 64px rgba(20,54,47,0.24), 0 2px 8px rgba(20,54,47,0.08);
}
.logout-confirm-copy {
    padding: 24px 22px 20px;
    text-align: center;
}
.logout-confirm-copy strong {
    display: block;
    color: var(--ink);
    font-size: 1.2rem;
}
.logout-confirm-copy p {
    max-width: 270px;
    margin: 8px auto 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.45;
}
.logout-confirm-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 0.5px solid rgba(24,49,43,0.16);
}
.logout-confirm-actions button {
    min-height: 48px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.93rem;
    font-weight: 650;
    transition: background 100ms ease-out, opacity 100ms ease-out;
}
.logout-confirm-cancel { color: var(--accent); }
.logout-confirm-submit {
    border-left: 0.5px solid rgba(24,49,43,0.16);
    color: var(--danger);
    background: transparent;
}
.logout-confirm-cancel:hover,
.logout-confirm-submit:hover {
    background: rgba(24,49,43,0.06);
}
.logout-confirm-cancel:active,
.logout-confirm-submit:active {
    transform: none;
    background: rgba(24,49,43,0.1);
}
.logout-confirm-submit:disabled { opacity: 0.62; cursor: wait; }
@media (prefers-reduced-motion: reduce) {
    .logout-confirm-dialog { animation-duration: 1ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
    .student-account-dialog,
    .student-star-dialog,
    .password-dialog {
        background: #f9fbfa;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .student-account-overlay,
    .student-star-overlay,
    .password-dialog-overlay,
    .logout-confirm-overlay {
        background: rgba(17,38,34,0.52);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .logout-confirm-dialog {
        background: #f9fbfa;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
@media (prefers-contrast: more) {
    .student-account-dialog,
    .student-star-dialog,
    .password-dialog,
    .logout-confirm-dialog {
        border-color: #56746c;
        background: #fff;
    }
}

.teacher-replies-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    justify-items: center;
    text-align: center;
    margin-bottom: 14px;
    padding: 17px;
    border: 1px solid rgba(19, 118, 109, 0.18);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(223, 244, 237, 0.92), rgba(255, 255, 255, 0.96));
    box-shadow: 0 14px 34px rgba(25, 68, 61, 0.1);
}
.teacher-replies-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #101918;
    color: #fff;
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0;
}
.teacher-replies-card h3 {
    margin: 7px 0 0;
    font-size: 1rem;
}
.teacher-replies-card .primary-button {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    font-weight: 850;
}
.teacher-replies-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: grid;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
    background: rgba(17, 38, 34, 0.3);
    -webkit-backdrop-filter: blur(8px) saturate(118%);
    backdrop-filter: blur(8px) saturate(118%);
}
.teacher-replies-overlay[hidden] { display: none; }
.student-message-overlay {
    background: rgba(17, 38, 34, 0.3);
    -webkit-backdrop-filter: blur(8px) saturate(118%);
    backdrop-filter: blur(8px) saturate(118%);
}
.student-message-overlay[hidden] { display: none; }
.student-message-shell {
    display: grid;
    width: min(720px, 100%);
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    gap: 14px;
    justify-items: center;
}
.student-message-shell.is-account-finished {
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 11px;
    width: min(430px, 100%);
    height: min(490px, 86vh);
    height: min(490px, 86dvh);
    max-height: none;
}
.teacher-replies-stack {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 11px;
    width: min(560px, 100%);
    max-height: min(680px, 86vh);
    max-height: min(680px, 86dvh);
    justify-items: center;
}
.teacher-replies-dialog {
    position: relative;
    width: 100%;
    min-height: 0;
    overflow: auto;
    padding: 24px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
    border: 1px solid rgba(255,255,255,0.88);
    border-radius: 26px;
    background: rgba(248,251,249,0.76);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    backdrop-filter: blur(30px) saturate(160%);
    box-shadow: 0 24px 80px rgba(20,54,47,0.24), 0 3px 12px rgba(20,54,47,0.08);
}
.teacher-replies-dialog-head {
    margin-bottom: 18px;
    text-align: center;
}
.teacher-replies-dialog h2 {
    margin: 0;
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.student-message-dialog {
    width: 100%;
    height: min(510px, calc(75vh - 30px));
    height: min(510px, calc(75dvh - 30px));
    max-height: min(510px, calc(75vh - 30px));
    max-height: min(510px, calc(75dvh - 30px));
    overscroll-behavior: contain;
    border-color: rgba(255, 255, 255, 0.84);
    border-radius: 26px;
    background: rgba(248, 251, 249, 0.76);
    box-shadow: 0 28px 82px rgba(20, 54, 47, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    backdrop-filter: blur(30px) saturate(160%);
}
.student-message-dialog.is-account-finished {
    height: 100%;
    max-height: none;
    padding: 16px;
}
.student-message-shell.is-account-finished > .student-message-close {
    width: 132px;
    min-width: 132px;
    height: 44px;
    min-height: 44px;
}
.student-message-close,
.student-words-outside-close,
.student-calendar-outside-close,
.student-star-outside-close {
    min-width: 132px;
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 999px;
    color: #26343b;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 12px 30px rgba(27, 45, 56, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(20px) saturate(155%);
    backdrop-filter: blur(20px) saturate(155%);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 900;
    cursor: pointer;
    transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.student-message-close:hover,
.student-words-outside-close:hover,
.student-calendar-outside-close:hover,
.student-star-outside-close:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 15px 34px rgba(27, 45, 56, 0.2), inset 0 1px 0 #fff;
}
.student-message-close:active,
.student-words-outside-close:active,
.student-calendar-outside-close:active,
.student-star-outside-close:active { transform: scale(0.97); }
.student-message-close:focus-visible,
.student-words-outside-close:focus-visible,
.student-calendar-outside-close:focus-visible,
.student-star-outside-close:focus-visible {
    outline: 3px solid rgba(19, 118, 109, 0.24);
    outline-offset: 3px;
}
@media (prefers-reduced-transparency: reduce) {
    .student-message-close,
    .student-words-outside-close,
    .student-calendar-outside-close,
    .student-star-outside-close {
        border-color: rgba(38, 52, 59, 0.18);
        background: #f8faf9;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
@media (prefers-contrast: more) {
    .student-message-close,
    .student-words-outside-close,
    .student-calendar-outside-close,
    .student-star-outside-close {
        border-color: #26343b;
        background: #fff;
    }
}
.student-message-dialog-head {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
    text-align: left;
}
.student-message-dialog-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
}
.student-message-dialog-head h2 {
    width: 100%;
    margin: 0;
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}
.student-message-dialog.is-focused-scope .student-message-dialog-head {
    justify-items: center;
    margin-bottom: 14px;
    text-align: center;
}
.student-message-dialog.is-focused-scope .student-message-dialog-head h2 {
    width: 100%;
    text-align: center;
}
.student-message-dialog.is-focused-scope .student-message-dialog-title-row {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}
.student-message-dialog.is-focused-scope .student-message-dialog-title-row.has-account-back {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
}
.student-message-account-back { grid-column: 1; }
.student-message-dialog-title-row.has-account-back h2 { grid-column: 2; }
.student-message-title-spacer {
    grid-column: 3;
    width: 38px;
    height: 38px;
}
.student-message-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.student-message-summary span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;
    border: 1px solid rgba(19, 118, 109, 0.14);
    border-radius: 999px;
    color: var(--muted);
    background: #f4f8f5;
    font-size: 0.78rem;
    font-weight: 850;
}
.student-message-summary b {
    margin-right: 4px;
    color: var(--accent-dark);
    font-size: 0.9rem;
}
.student-message-sections {
    display: grid;
    gap: 0;
}
.student-message-dialog:not(.is-focused-scope) {
    display: grid;
    overflow: hidden;
    padding: 0;
}
.student-message-dialog:not(.is-focused-scope) .student-message-sections {
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    height: 100%;
}
.student-message-tabs {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) 42px;
    gap: 6px;
    margin: 0;
    padding: 12px 24px;
    border-bottom: 1px solid rgba(19,118,109,0.1);
    background: rgba(248,251,249,0.92);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
}
.student-message-tab {
    position: relative;
    display: inline-flex;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid rgba(19,118,109,0.12);
    border-radius: 999px;
    color: #465a54;
    background: rgba(255,255,255,0.58);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 900;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.student-message-tab[data-message-tab="replies"] {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    justify-self: end;
    padding: 0;
}
.student-message-tab[data-message-tab="replies"] svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.student-message-tab[data-message-tab="replies"] .notice-dot {
    top: -7px;
    right: -6px;
}
.student-message-tab:hover { background: rgba(239,248,245,0.96); }
.student-message-tab:active { transform: scale(0.98); }
.student-message-tab[aria-selected="true"] {
    border-color: rgba(19,118,109,0.28);
    color: #075f58;
    background: #e7f4ef;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 5px 14px rgba(20,54,47,0.08);
}
.student-message-tab:focus-visible {
    outline: 3px solid rgba(19,118,109,0.22);
    outline-offset: 2px;
}
.student-message-tab-count {
    display: inline-flex;
    min-width: 23px;
    height: 23px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    color: inherit;
    background: rgba(255,255,255,0.72);
    font-size: 0.72rem;
    font-weight: 950;
}
.student-message-tab-panel {
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px 24px 24px;
    overscroll-behavior: contain;
    scrollbar-color: rgba(19, 118, 109, 0.34) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
}
.student-message-tab-panel::-webkit-scrollbar { width: 7px; }
.student-message-tab-panel::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(19, 118, 109, 0.3);
}
.student-message-tab-panel::-webkit-scrollbar-track { background: transparent; }
.student-message-tab-panel[hidden] { display: none; }
@media (prefers-reduced-transparency: reduce) {
    .student-message-tabs { background: #f9fbfa; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.student-message-flat-list { min-width: 0; }
.student-message-section {
    display: grid;
    gap: 9px;
}
.student-message-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.student-message-section.is-collapsible {
    display: block;
}
.student-message-section.is-collapsible > summary {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0 -24px;
    padding: 7px 24px;
    border-bottom: 1px solid rgba(19,118,109,0.1);
    border-radius: 0;
    background: rgba(248,251,249,0.9);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    box-shadow: 0 8px 18px rgba(20,54,47,0.04);
    cursor: pointer;
    list-style: none;
    transition: background 140ms ease, box-shadow 140ms ease;
}
.student-message-section.is-heading-only > .student-message-section-head {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0 -24px;
    padding: 7px 24px;
    border-bottom: 1px solid rgba(19,118,109,0.1);
    background: rgba(248,251,249,0.9);
}
.student-message-section.is-heading-only > .student-message-section-head::before {
    content: "";
    grid-column: 1;
}
.student-message-section.is-collapsible > summary::before { content: ""; }
.student-message-section.is-collapsible > summary::-webkit-details-marker { display: none; }
.student-message-section.is-collapsible > summary:hover { background: rgba(239,248,245,0.97); }
.student-message-section.is-collapsible > summary:active { background: rgba(230,244,239,0.98); }
.student-message-section.is-collapsible > summary:focus-visible {
    outline: 3px solid rgba(19, 118, 109, 0.2);
    outline-offset: 2px;
}
@media (prefers-reduced-transparency: reduce) {
    .student-message-section.is-collapsible > summary {
        background: #f9fbfa;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
@media (prefers-contrast: more) {
    .student-message-section.is-collapsible > summary {
        border-bottom-color: #56746c;
        background: #fff;
    }
}
.student-message-section.is-collapsible[open] > .student-message-list,
.student-message-section.is-collapsible[open] > .student-message-empty { margin-top: 9px; }
.student-message-section-head h3 {
    grid-column: 2;
    margin: 0;
    color: #101918;
    font-size: 0.96rem;
    font-weight: 950;
    letter-spacing: 0;
    text-align: center;
}
.student-message-section-head-meta {
    grid-column: 3;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.student-message-section-count {
    display: inline-flex;
    min-width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--accent-dark);
    background: #e7f4ef;
    font-size: 0.76rem;
    font-weight: 950;
}
.student-message-section-toggle {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--muted);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.student-message-section.is-collapsible[open] .student-message-section-toggle { transform: rotate(180deg); }
.student-message-list {
    display: grid;
    gap: 8px;
}
.student-message-task {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbfa;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.student-message-task.todo {
    border-color: rgba(225, 29, 72, 0.18);
    background: linear-gradient(135deg, #fff7f7, #f8fbfa);
}
.student-message-task.overdue {
    border-color: rgba(207, 54, 72, 0.5);
    background: linear-gradient(135deg, #ffedef, #fff8f8);
    animation: student-overdue-pulse 1.7s ease-in-out infinite;
}
.student-message-task.overdue .student-message-kicker,
.student-message-task.overdue .student-message-score {
    color: #a92f42;
}
@keyframes student-overdue-pulse {
    0%, 100% {
        border-color: rgba(207, 54, 72, 0.42);
        box-shadow: inset 0 0 0 1px rgba(207, 54, 72, 0.08), 0 0 0 0 rgba(207, 54, 72, 0);
    }
    50% {
        border-color: rgba(207, 54, 72, 0.76);
        box-shadow: inset 0 0 0 1px rgba(207, 54, 72, 0.16), 0 0 0 4px rgba(207, 54, 72, 0.1);
    }
}
.student-message-task.finished {
    border-color: rgba(19, 118, 109, 0.16);
    background: linear-gradient(135deg, #f4fbf7, #fff);
}
.student-message-task.upcoming {
    border-color: rgba(63, 123, 174, 0.18);
    background: linear-gradient(135deg, #f3f8fd, #fff);
}
.student-message-task:hover,
.student-message-task:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(19, 118, 109, 0.34);
    background: #fff;
    box-shadow: 0 10px 24px rgba(25, 68, 61, 0.08);
}
@media (prefers-reduced-motion: reduce) {
    .student-message-task.overdue {
        animation: none;
        box-shadow: inset 0 0 0 2px rgba(207, 54, 72, 0.14);
    }
}
.student-message-task:active {
    transform: scale(0.985);
    transition-duration: 80ms;
}
.student-message-task:focus-visible {
    outline: 3px solid rgba(19, 118, 109, 0.2);
    outline-offset: 2px;
}
.student-message-task-main {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
}
.student-message-kicker {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 25px;
    max-width: 96px;
    padding: 0 8px;
    overflow: hidden;
    border-radius: 999px;
    color: var(--accent-dark);
    background: rgba(19, 118, 109, 0.09);
    font-size: 0.68rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.student-message-title-window {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}
.student-message-title-track {
    display: block;
    width: max-content;
    max-width: none;
    color: #101918;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
    will-change: transform;
}
.student-message-title-window.is-overflowing {
    mask-image: linear-gradient(90deg, #000 0%, #000 93%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 93%, transparent 100%);
}
.student-message-title-window.is-overflowing .student-message-title-track {
    animation: studentMessageTitleScroll var(--student-message-title-duration, 9s) ease-in-out infinite alternate;
}
@keyframes studentMessageTitleScroll {
    0%, 16% { transform: translate3d(0, 0, 0); }
    84%, 100% { transform: translate3d(var(--student-message-title-shift, 0), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .student-message-title-window,
    .student-message-title-track {
        width: 100%;
        max-width: 100%;
    }
    .student-message-title-track {
        overflow: hidden;
        text-overflow: ellipsis;
        animation: none;
        transform: none;
    }
}
.student-message-task-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
}
.student-message-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    border-radius: 999px;
    padding: 0 8px;
    color: var(--success);
    background: var(--success-soft);
    font-size: 0.72rem;
    font-weight: 900;
    white-space: nowrap;
}
.student-message-score.is-todo {
    color: var(--danger);
    background: var(--danger-soft);
}
.student-message-score.is-upcoming {
    color: #376f9f;
    background: rgba(63, 123, 174, 0.12);
}
.student-message-task-meta svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.student-message-empty {
    padding: 13px;
    border: 1px dashed rgba(19, 118, 109, 0.22);
    border-radius: 14px;
    color: var(--muted);
    background: #f8fbfa;
    font-size: 0.86rem;
    font-weight: 750;
}
.teacher-replies-list {
    display: grid;
    min-width: 0;
    gap: 10px;
}
.teacher-reply-item.is-revealing {
    animation: teacherReplyReveal 520ms cubic-bezier(0.2, 0.78, 0.24, 1) both;
}
.teacher-reply-item.is-revealing:nth-last-child(4) { animation-delay: 45ms; }
.teacher-reply-item.is-revealing:nth-last-child(3) { animation-delay: 90ms; }
.teacher-reply-item.is-revealing:nth-last-child(2) { animation-delay: 135ms; }
.teacher-reply-item.is-revealing:nth-last-child(1) { animation-delay: 180ms; }
@keyframes teacherReplyReveal {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .teacher-reply-item.is-revealing {
        animation: none;
        transition: none;
    }
}
.teacher-replies-empty {
    padding: 28px 18px;
    border: 1px dashed rgba(19, 118, 109, 0.24);
    border-radius: 14px;
    color: var(--muted);
    background: #f8fbfa;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 750;
}
.teacher-reply-item {
    width: 100%;
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fbfa;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.teacher-reply-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(24, 53, 47, 0.09);
}
.teacher-reply-item:active {
    transform: scale(0.99);
}
.teacher-reply-item:focus-visible {
    outline: 3px solid rgba(19, 118, 109, 0.24);
    outline-offset: 2px;
}
.teacher-reply-item.approved {
    border-color: rgba(35, 122, 82, 0.22);
    background: var(--success-soft);
}
.teacher-reply-item.rejected {
    border-color: rgba(181, 71, 71, 0.2);
    background: var(--danger-soft);
}
.teacher-reply-head {
    min-width: 0;
    margin-bottom: 12px;
}
.teacher-reply-question {
    min-width: 0;
}
.teacher-reply-title-track {
    min-width: 100%;
    color: #101918;
    font-size: 1.02rem;
    font-weight: 950;
    text-align: center;
}
.teacher-reply-title-window {
    width: 100%;
    min-width: 0;
}
.teacher-reply-question p {
    max-width: 62ch;
    margin: 8px 0 0;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 720;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.teacher-reply-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 900;
    white-space: nowrap;
}
.teacher-reply-status.approved { color: var(--success); background: var(--success-soft); }
.teacher-reply-status.rejected { color: var(--danger); background: var(--danger-soft); }
.teacher-reply-status.pending { color: #7a5528; background: #fff8e5; }
.teacher-reply-status span {
    width: 13px;
    height: 13px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.58rem;
    line-height: 1;
    font-weight: 950;
}
.teacher-reply-status.approved span { background: var(--success); }
.teacher-reply-status.rejected span { background: var(--danger); }
.teacher-reply-status.pending span { background: #d89528; }
.teacher-reply-flow {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    gap: 10px;
    align-items: stretch;
}
.teacher-reply-answer {
    flex: 1 0 max-content;
    min-width: min(100%, 160px);
    max-width: 100%;
    min-height: 74px;
    padding: 10px;
    border: 1px solid #e4eee9;
    border-radius: 12px;
    background: #f4f6f5;
}
.teacher-reply-answer.submitted {
    border-color: #d6e2ff;
    background: #eef4ff;
}
.teacher-reply-answer > b,
.teacher-reply-note b {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 850;
}
.teacher-reply-answer > span,
.teacher-reply-note span {
    display: block;
    width: 100%;
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.teacher-reply-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    margin-top: 8px;
}
.teacher-reply-note {
    margin-top: 12px;
    padding: 10px;
    border: 1px solid #efc9c3;
    border-radius: 12px;
    background: #fff;
}
.teacher-reply-timestamp {
    display: block;
    min-width: 0;
    color: rgba(72, 87, 83, 0.68);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    line-height: 1.25;
    text-align: left;
}

.teacher-hero {
    background: linear-gradient(135deg, #312e81, #7c3aed 58%, #60a5fa);
}
.teacher-message {
    min-height: 24px;
    margin: -12px 4px 10px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 750;
}
.teacher-message.success { color: var(--success); }
.teacher-message.error { color: var(--danger); }
#teacher-modal-root { display: contents; }
.teacher-updates-panel {
    display: grid;
    position: fixed;
    inset: 0;
    z-index: 150;
    place-items: center;
    padding: 20px 16px;
    background: rgba(24, 18, 43, 0.28);
    backdrop-filter: blur(10px);
}
.teacher-updates-panel[hidden] { display: none; }
#teacher-notification-attempt-root { display: contents; }
.teacher-updates-shell {
    display: grid;
    gap: 12px;
    width: min(760px, 100%);
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
}
.teacher-updates-dialog {
    width: 100%;
    max-height: min(760px, 75vh);
    max-height: min(760px, 75dvh);
    overflow: auto;
    padding: 18px;
    border: 1px solid rgba(255,255,255,0.82);
    border-radius: 22px;
    background: rgba(255,255,255,0.96);
    box-shadow: var(--shadow);
}
.updates-panel-head {
    position: sticky;
    top: -18px;
    z-index: 2;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
    margin: -18px -18px 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(124,58,237,0.12);
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(14px);
}
.updates-panel-primary-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}
.updates-panel-dictionary-button {
    flex: 0 0 auto;
}
.teacher-updates-body {
    display: grid;
    align-content: start;
    gap: 8px;
}
.teacher-review-modal {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: min(7vh, 56px) 16px 28px;
    background: rgba(24, 18, 43, 0.28);
    backdrop-filter: blur(10px);
}
.teacher-review-modal[hidden] { display: none; }
.teacher-review-dialog {
    width: min(940px, 100%);
    max-height: min(820px, calc(100vh - 64px));
    max-height: min(820px, calc(100dvh - 64px));
    overflow: auto;
    padding: 18px;
    border: 1px solid rgba(255,255,255,0.82);
    border-radius: 22px;
    background: rgba(255,255,255,0.96);
    box-shadow: var(--shadow);
}
.teacher-review-head {
    position: sticky;
    top: -18px;
    z-index: 2;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
    margin: -18px -18px 14px;
    padding: 18px;
    border-bottom: 1px solid rgba(124,58,237,0.12);
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(14px);
}
.teacher-review-head h2 {
    margin: 2px 0 0;
    font-size: 1.18rem;
}
.teacher-review-head .eyebrow { margin: 0; }
.teacher-star-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 18px;
    text-align: center;
}
.teacher-star-head h2 {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    margin: 0;
    color: var(--accent);
    line-height: 1.2;
    letter-spacing: 0.08em;
}
.teacher-star-head .student-subdialog-back {
    position: static;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    transform: none;
}
.teacher-star-head .student-subdialog-back:hover,
.teacher-star-head .student-subdialog-back:focus-visible {
    transform: none;
}
.student-lookup-modal {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: min(7vh, 56px) 16px 28px;
    background: rgba(24, 18, 43, 0.28);
    backdrop-filter: blur(10px);
}
.student-lookup-modal[hidden] { display: none; }
.student-lookup-stage {
    display: grid;
    justify-items: center;
    gap: 12px;
    width: min(840px, 100%);
    max-height: calc(100vh - 56px);
    max-height: calc(100dvh - 56px);
}
.student-lookup-dialog {
    width: 100%;
    max-height: min(630px, calc(100vh - 148px));
    max-height: min(630px, calc(100dvh - 148px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-x: none;
    touch-action: pan-y pinch-zoom;
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,0.82);
    border-radius: 22px;
    background: rgba(255,255,255,0.96);
    box-shadow: var(--shadow);
}
.student-lookup-head {
    position: sticky;
    top: -18px;
    z-index: 32;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: -18px -18px 0;
    padding: 18px;
    border-bottom: 1px solid rgba(124,58,237,0.12);
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(14px);
}
.student-lookup-search-state {
    flex: 1 1 auto;
    min-width: 0;
}
.student-lookup-head .student-lookup-searchbar {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(118px, 150px);
    gap: 8px;
    width: min(590px, 100%);
    padding: 0;
    background: transparent;
}
.student-lookup-head .student-lookup-searchbar input {
    width: 100%;
    min-height: 40px;
    border-color: rgba(124, 58, 237, 0.2);
    border-radius: 13px;
    background: rgba(255,255,255,0.82);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.07);
}
.student-lookup-class-filter {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    border-color: rgba(124, 58, 237, 0.2);
    border-radius: 13px;
    background-color: rgba(255,255,255,0.82);
}
.student-lookup-title-state {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}
.student-lookup-title-state[hidden] { display: none; }
.student-lookup-back {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid rgba(124, 58, 237, 0.16);
    border-radius: 11px;
    color: var(--accent-dark);
    background: rgba(255,255,255,0.76);
}
.student-lookup-back:hover,
.student-lookup-back:focus-visible {
    color: white;
    background: var(--accent);
}
.student-lookup-back svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.student-subdialog-back {
    position: absolute;
    top: 50%;
    left: 18px;
    z-index: 2;
    transform: translateY(-50%);
}
.student-subdialog-back:hover,
.student-subdialog-back:focus-visible {
    transform: translateY(-50%);
}
.student-lookup-head h2 {
    margin: 2px 0 0;
    font-size: 1.18rem;
}
.student-lookup-head .eyebrow { margin: 0; }
.student-lookup-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.student-lookup-create {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
}
.student-lookup-star {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
}
.student-lookup-star .teacher-header-icon,
.student-lookup-create .teacher-header-icon {
    width: 20px;
    height: 20px;
    color: inherit;
}
.teacher-page .student-lookup-dialog .student-select-card {
    z-index: 3;
    overflow: visible;
}
.teacher-page .student-lookup-dialog .student-lookup-picker-card {
    min-height: 0;
    margin: -14px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.teacher-page .student-lookup-dialog .student-select-card .student-picker-shell {
    position: absolute;
    top: 0;
    right: 14px;
    left: 14px;
    z-index: 40;
    width: auto;
    max-height: min(430px, 45vh);
    max-height: min(430px, 45dvh);
    margin-top: 0;
    overflow: hidden;
}
.teacher-page .student-lookup-dialog .student-select-card.picker-choose .student-picker-shell,
.teacher-page .student-lookup-dialog .student-select-card.picker-search .student-picker-shell {
    right: 14px;
    left: 14px;
    max-height: min(430px, 45vh);
    max-height: min(430px, 45dvh);
}
.teacher-page .student-lookup-dialog .student-select-card.picker-choose .student-picker,
.teacher-page .student-lookup-dialog .student-select-card.picker-search .student-picker {
    max-height: calc(min(430px, 45vh) - 22px);
    max-height: calc(min(430px, 45dvh) - 22px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
}
.student-lookup-external-close {
    justify-self: center;
}
.student-metric-detail-modal,
.student-account-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 170;
}
.student-metric-detail-shell { width: min(650px, 100%); }
.student-metric-detail-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    padding: 0;
}
.student-metric-detail-head {
    position: relative;
    padding: 21px 22px 16px;
    border-bottom: 1px solid rgba(124,58,237,0.12);
    text-align: center;
}
.student-metric-detail-head .eyebrow { margin: 0 0 5px; }
.student-metric-detail-head h2 { margin: 0; color: var(--accent); font-size: 1.15rem; letter-spacing: 0.08em; }
.student-metric-detail-head .student-subdialog-back { left: 22px; }
.student-metric-detail-body {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 20px 24px;
    touch-action: pan-y pinch-zoom;
}
.student-account-detail-body {
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 20px 24px;
    touch-action: pan-y pinch-zoom;
}
.student-metric-section { display: grid; gap: 9px; }
.student-metric-section + .student-metric-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.student-metric-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.student-metric-section-head h3 { margin: 0; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.08em; }
.student-metric-section-head > strong { display: grid; min-width: 25px; height: 25px; place-items: center; border-radius: 999px; background: var(--page); font-size: 0.72rem; }
.student-metric-list { display: grid; gap: 8px; }
.student-metric-row {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid rgba(31,45,38,0.08);
    border-radius: 15px;
    background: rgba(255,255,255,0.84);
}
.student-metric-row-copy { display: grid; min-width: 0; gap: 3px; flex: 1 1 auto; }
.student-metric-row-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-metric-row-copy small { color: var(--muted); font-size: 0.69rem; line-height: 1.4; }
.student-metric-row-value { flex: 0 0 auto; color: var(--success); font-size: 0.82rem; font-weight: 950; }
.student-metric-row-value.is-open { color: var(--danger); }
.student-metric-star { flex: 0 0 auto; color: #e2ae18; font-size: 1.2rem; }
.student-star-source-row.is-blue .student-metric-star { color: #397bc0; }
.student-metric-empty { margin: 0; padding: 18px 10px; color: var(--muted); text-align: center; }
.teacher-utility-modal {
    display: grid;
    place-items: center;
    padding: 20px 16px;
    background: rgba(24, 18, 43, 0.28);
    backdrop-filter: blur(10px);
}
.teacher-utility-modal[hidden] { display: none; }
.teacher-utility-shell {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    justify-items: stretch;
    width: min(760px, 100%);
    height: min(812px, calc(100vh - 40px));
    height: min(812px, calc(100dvh - 40px));
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    gap: 12px;
    background: transparent;
}
.teacher-utility-dialog {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    border: 1px solid rgba(255,255,255,0.82);
    border-radius: 22px;
    background: rgba(255,255,255,0.96);
    box-shadow: var(--shadow);
}
.teacher-dictionary-dialog.teacher-utility-dialog {
    overflow: hidden;
    border-radius: 22px;
}
.teacher-utility-shell > .progress-matrix-modal-close {
    justify-self: center;
}
.teacher-star-shell::after {
    content: "";
    display: block;
    height: 40px;
    visibility: hidden;
}
.activity-sub-tabs { margin: 0; }
.updates-feed-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.activity-mark-read {
    position: relative;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(124,58,237,0.22);
    border-radius: 50%;
    color: var(--muted);
    background: rgba(255,255,255,0.74);
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
.activity-mark-read svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.activity-mark-read.has-unread {
    border-color: rgba(124,58,237,0.34);
    color: var(--accent-dark);
    background: rgba(245,241,255,0.92);
}
.activity-mark-read.has-unread:hover,
.activity-mark-read.has-unread:focus-visible {
    transform: translateY(-1px);
    outline: 3px solid rgba(124,58,237,0.14);
    outline-offset: 2px;
}
.activity-mark-read.is-success {
    border-color: rgba(21,127,85,0.30);
    color: var(--success);
    background: rgba(232,247,239,0.94);
}
.activity-mark-read.is-pending svg {
    opacity: 0;
}
.activity-mark-read.is-pending::before {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(124,58,237,0.22);
    border-top-color: var(--accent);
    border-radius: 50%;
    content: "";
    animation: teacherHeaderLoadingSpin 0.8s linear infinite;
}
.activity-mark-read:disabled {
    cursor: default;
    opacity: 0.45;
}
.activity-mark-read.is-success:disabled {
    opacity: 1;
}
.activity-list {
    display: grid;
    gap: 8px;
}
.notification-feed-loading {
    display: grid;
    min-height: 38px;
    place-items: center;
}
.notification-feed-loading > span[aria-hidden="true"] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(124,58,237,0.20);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: teacherHeaderLoadingSpin 0.8s linear infinite;
}
.activity-row {
    width: 100%;
    display: grid;
    grid-template-areas:
        "dot title score"
        ". timing score";
    grid-template-columns: auto minmax(0, 1fr) max-content;
    gap: 4px 10px;
    align-items: center;
    min-height: 46px;
    padding: 9px 11px;
    border: 1px solid rgba(124,58,237,0.12);
    border-radius: 12px;
    color: var(--ink);
    background: rgba(255,255,255,0.74);
    text-align: left;
}
.activity-row.unread { background: var(--danger-soft); }
.activity-row:hover {
    border-color: rgba(124,58,237,0.28);
    background: rgba(247,243,255,0.90);
}
.activity-unread-dot {
    grid-area: dot;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: transparent;
}
.activity-row.unread .activity-unread-dot { background: var(--danger); }
.activity-line {
    grid-area: title;
    min-width: 0;
}
.activity-line strong {
    display: block;
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.activity-timing {
    grid-area: timing;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.activity-attempt-count {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 950;
    white-space: nowrap;
}
.activity-attempt-count.single {
    color: #245a86;
    background: #e7f2ff;
}
.activity-attempt-count.repeat {
    color: #8b5a08;
    background: #fff1c7;
}
.activity-attempt-count.many {
    color: #9f2948;
    background: #ffe2ea;
}
.activity-date {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.activity-score {
    grid-area: score;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-width: 58px;
    min-height: 34px;
    padding: 0 11px;
    border-radius: 999px;
    color: #0d6f58;
    background: #def8ec;
    font-size: 0.82rem;
    font-weight: 1000;
    white-space: nowrap;
}
.activity-score.mastered {
    color: #fff;
    background: linear-gradient(135deg, #159b72, #31c58e);
    box-shadow: 0 0 14px rgba(30,176,125,0.24);
}
.activity-score.low {
    color: #64736f;
    border: 1px solid rgba(100,115,111,0.18);
    background: rgba(255,255,255,0.9);
}
.teacher-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
    gap: 18px;
    align-items: start;
}
.compact-heading { margin-top: 0; }
.teacher-form {
    display: grid;
    gap: 9px;
}
.teacher-form label {
    margin-top: 7px;
    font-size: 0.8rem;
    font-weight: 850;
}
.teacher-form input,
.teacher-form select {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    background: white;
    outline: none;
}
.teacher-form input:focus,
.teacher-form select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(19, 118, 109, 0.1);
}
.teacher-form .primary-button { margin-top: 10px; }
.teacher-list { display: grid; gap: 11px; }
.teacher-row {
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: rgba(255,255,255,0.88);
    box-shadow: 0 8px 24px rgba(25, 68, 61, 0.05);
}
.teacher-row-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.teacher-row-main strong { display: block; }
.teacher-row-main span:not(.badge) {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.78rem;
}
.teacher-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 13px;
}
.teacher-row-actions button {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 800;
}
.teacher-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 13px;
}
.teacher-metrics span {
    padding: 9px;
    border-radius: 10px;
    color: var(--muted);
    background: #f6faf8;
    font-size: 0.72rem;
}
.teacher-metrics strong { display: block; margin-top: 3px; color: var(--ink); font-size: 0.8rem; }
.teacher-footer { display: flex; justify-content: flex-end; margin-top: 28px; }
.teacher-logout { min-height: 42px; padding: 0 20px; border-radius: 12px; font-weight: 850; }
.teacher-refresh { min-height: 38px; padding: 0 14px; border-radius: 11px; font-weight: 800; }
.assign-flow {
    display: grid;
    gap: 10px;
}
.simple-assign-flow {
    gap: 14px;
}
.assign-minimal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.assign-picker-card {
    display: grid;
    min-height: min(610px, 68vh);
    padding: 14px;
    border-radius: 8px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 10px 28px rgba(25, 68, 61, 0.045);
}
.assign-picker-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.assign-picker-head h2 {
    margin: 0;
    font-size: 1.08rem;
    letter-spacing: 0;
}
.assign-picker-head p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
}
.assign-summary-card {
    align-content: start;
    min-height: 128px;
    padding: 16px;
}
.assign-open-picker {
    width: auto;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
}
.assign-picker-modal {
    position: fixed;
    inset: 0;
    z-index: 132;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(22, 30, 38, 0.3);
    backdrop-filter: blur(8px);
}
.assign-picker-modal[hidden] { display: none; }
.assign-picker-dialog {
    position: relative;
    display: grid;
    gap: 12px;
    width: min(900px, 100%);
    max-height: min(760px, 88vh);
    max-height: min(760px, 88dvh);
    padding: 18px;
    border: 1px solid rgba(124, 58, 237, 0.16);
    border-radius: 20px;
    background: rgba(255,255,255,0.98);
    box-shadow: 0 24px 70px rgba(21, 31, 43, 0.24);
    overflow: hidden;
}
.assign-picker-dialog-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 18px;
    padding-right: 40px;
}
.assign-picker-dialog-head h2 {
    margin: 2px 0 0;
    font-size: 1.35rem;
    letter-spacing: 0;
}
.assign-modal-list {
    max-height: min(500px, 55vh);
    overflow-y: auto;
    padding: 2px 4px 6px 2px;
}
.assign-picker-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
}
.assign-picker-dialog-actions span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 850;
}
.assign-minimal-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, .34fr);
    gap: 8px;
    margin-bottom: 10px;
}
.assign-minimal-controls input,
.assign-minimal-controls select {
    width: 100%;
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid rgba(72, 86, 78, 0.16);
    border-radius: 8px;
    color: var(--ink);
    background: rgba(255,255,255,0.92);
    font-size: 0.82rem;
    font-weight: 760;
    outline: none;
}
.assign-minimal-controls input:focus,
.assign-minimal-controls select:focus {
    border-color: rgba(19, 118, 109, 0.34);
    box-shadow: 0 0 0 3px rgba(19, 118, 109, 0.08);
}
.assign-choice-list {
    display: grid;
    align-content: start;
    gap: 7px;
    max-height: min(480px, 54vh);
    overflow-y: auto;
    padding: 2px 2px 4px;
}
.assign-choice-card {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 9px 10px;
    border: 1px solid rgba(72, 86, 78, 0.14);
    border-radius: 8px;
    background: rgba(255,255,255,0.76);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.assign-choice-card:hover {
    border-color: rgba(19, 118, 109, 0.28);
    background: rgba(255,255,255,0.98);
}
.assign-choice-card.selected {
    border-color: rgba(19, 118, 109, 0.42);
    background: rgba(229, 244, 235, 0.88);
    box-shadow: inset 0 0 0 1px rgba(19, 118, 109, 0.08);
}
.assign-choice-card.progress {
    border-color: #ecd7b8;
    background: #fffaf2;
}
.assign-choice-card.starred,
.assign-choice-card.completed {
    border-color: #e1c56f;
    background: #fff9e5;
}
.assign-choice-card.progress .assign-choice-copy small {
    color: #8a622d;
}
.assign-choice-card.starred .assign-choice-copy small,
.assign-choice-card.completed .assign-choice-copy small {
    color: #8a6819;
}
.assign-choice-card.disabled {
    cursor: not-allowed;
    opacity: .52;
}
.assign-choice-card.catalog-only {
    border-style: dashed;
    opacity: .72;
}
.assign-choice-card.catalog-only .assign-choice-copy small {
    color: #8a622d;
}
.assign-choice-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.assign-choice-mark {
    width: 16px;
    height: 16px;
    border: 1.6px solid rgba(72, 86, 78, 0.32);
    border-radius: 50%;
    background: #fff;
}
.assign-choice-card.selected .assign-choice-mark {
    border-color: var(--accent);
    background:
        radial-gradient(circle, var(--accent) 0 42%, transparent 46%),
        #fff;
}
.assign-choice-copy {
    min-width: 0;
}
.assign-choice-copy strong,
.assign-choice-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.assign-choice-copy strong {
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0;
}
.assign-choice-copy small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 760;
}
.assign-choice-copy small.assign-choice-progress-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}
.assign-choice-base-meta {
    display: block;
    flex: 0 0 auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.assign-choice-student-progress {
    display: contents;
}
.assign-choice-student-progress > span {
    display: inline-flex;
    gap: 3px;
    align-items: baseline;
    padding: 3px 6px;
    border-radius: 999px;
    color: #745d21;
    background: rgba(224, 172, 54, 0.14);
    font-size: 0.64rem;
    line-height: 1.25;
}
.assign-choice-student-progress b {
    color: inherit;
    font-weight: 900;
}
.simple-assign-flow .candidate-grid {
    grid-template-columns: 1fr;
    max-height: min(480px, 54vh);
}
.simple-assign-flow .candidate-card {
    grid-template-columns: 18px minmax(0, 1fr);
    padding: 9px 10px;
    border-radius: 8px;
}
.simple-assign-flow .candidate-card.progress {
    border-color: rgba(208, 154, 76, 0.22);
    background: rgba(255,250,242,0.86);
}
.assign-tabs {
    margin: 0 0 12px;
}
.revise-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.assign-tabs .summary-card,
.revise-tabs .summary-card {
    min-height: 48px;
    padding: 12px 16px;
    text-align: center;
}
.revise-tabs .summary-card {
    min-width: 0;
    white-space: nowrap;
}
.revise-tabs .summary-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
.assign-view-panel[hidden] { display: none; }
.task-view-panel[hidden] { display: none; }
.task-switch-tabs {
    width: min(460px, 100%);
    margin-left: auto;
    margin-right: auto;
}
.assignment-overview {
    display: grid;
    gap: 12px;
    min-width: 0;
}
.assignment-overview.matrix-reveal-ready > .progress-matrix-card,
.assignment-overview.matrix-reveal-ready > .assignment-overview-toolbar,
.assignment-overview.matrix-reveal-ready > .assignment-progress-groups {
    animation: matrixRevealFadeLift 0.64s ease-out both;
}
.assignment-overview.matrix-reveal-ready > .assignment-overview-toolbar {
    animation-delay: 0.05s;
}
.assignment-overview.matrix-reveal-ready > .assignment-progress-groups {
    animation-delay: 0.1s;
}
.assignment-overview-toolbar {
    position: sticky;
    top: 8px;
    z-index: 120;
    display: flex;
    justify-content: center;
    padding: 4px 0;
    pointer-events: none;
}
.matrix-loading-card {
    position: relative;
    display: grid;
    min-height: 320px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(70, 163, 106, 0.18);
    border-radius: 16px;
    background:
        linear-gradient(90deg, transparent 0%, rgba(70, 163, 106, 0.14) 34%, rgba(217, 168, 45, 0.18) 58%, transparent 100%),
        linear-gradient(#cfe1d5 1.5px, transparent 1.5px),
        linear-gradient(90deg, #cfe1d5 1.5px, transparent 1.5px),
        rgba(255,255,255,0.92);
    background-size: 220px 100%, 42px 42px, 42px 42px, auto;
    box-shadow: 0 10px 28px rgba(70, 163, 106, 0.07);
    animation: matrixSheetMove 1.8s linear infinite;
}
.matrix-loading-card::before,
.matrix-loading-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.matrix-loading-card::before {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.86), rgba(255,255,255,0.50), rgba(255,255,255,0.86)),
        radial-gradient(circle at center, rgba(70, 163, 106, 0.13), transparent 34%);
}
.matrix-loading-card::after {
    background:
        linear-gradient(90deg, transparent 0%, rgba(70, 163, 106, 0.10) 18%, transparent 36%),
        linear-gradient(180deg, transparent 0%, rgba(217, 168, 45, 0.10) 42%, transparent 68%);
    background-size: 260px 100%, 100% 180px;
    mix-blend-mode: multiply;
    animation: matrixColorWash 2.4s ease-in-out infinite;
}
@keyframes matrixSheetMove {
    to { background-position: 220px 0, 42px 42px, 42px 42px, 0 0; }
}
@keyframes matrixColorWash {
    0% { background-position: -120px 0, 0 -80px; opacity: 0.62; }
    50% { background-position: 80px 0, 0 34px; opacity: 0.9; }
    100% { background-position: 260px 0, 0 180px; opacity: 0.62; }
}
@keyframes matrixRevealFadeLift {
    from {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
.teacher-view-board {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
    min-width: 0;
}
.progress-matrix-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 15px;
    border: 1px solid rgba(124,58,237,0.16);
    border-radius: 16px;
    background: rgba(255,255,255,0.88);
    box-shadow: 0 10px 28px rgba(83, 45, 145, 0.055);
}
.progress-matrix-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.progress-matrix-title .eyebrow { margin: 0; }
.progress-matrix-title h2 {
    margin: 2px 0 0;
    font-size: 1.15rem;
}
.progress-matrix-title > span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 850;
    white-space: nowrap;
}
.progress-matrix-tools {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 7px;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.progress-matrix-tools > span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 850;
    white-space: nowrap;
}
.matrix-class-filter,
.matrix-column-filter,
.matrix-date-filter,
.matrix-date-bound input {
    min-height: 34px;
    max-width: 156px;
    border: 1px solid rgba(124,58,237,0.16);
    border-radius: 10px;
    padding: 0 10px;
    color: var(--ink);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 800;
}
.matrix-class-filter,
.matrix-column-filter,
.matrix-date-filter {
    flex: 0 0 156px;
    width: 156px;
}
.matrix-date-bound {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 850;
}
.matrix-date-bound input {
    width: 142px;
}
.matrix-density-controls {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 3px;
    padding: 3px;
    border: 1px solid rgba(124,58,237,0.14);
    border-radius: 11px;
    background: rgba(255,255,255,0.82);
    box-shadow: 0 6px 16px rgba(83,45,145,0.06);
}
.matrix-density-button,
.matrix-density-fit-button,
.matrix-axis-button {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    color: rgba(35,48,42,0.72);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    transition: transform 100ms ease-out, color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.matrix-density-button { font-size: 1rem; }
.matrix-density-button:active,
.matrix-density-fit-button:active,
.matrix-axis-button:active { transform: scale(0.94); }
.matrix-density-fit-button.active {
    color: #fff;
    background: #2563eb;
    box-shadow: 0 5px 12px rgba(37,99,235,0.22);
}
.matrix-axis-button {
    margin-left: 2px;
    border-left: 1px solid rgba(124,58,237,0.13);
    border-radius: 0 8px 8px 0;
    font-size: 1rem;
}
.matrix-axis-button.active {
    color: #1d4ed8;
    background: rgba(37,99,235,0.11);
}
.matrix-density-button:disabled {
    cursor: default;
    opacity: 0.28;
}
.progress-matrix-scroll {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    scrollbar-gutter: stable;
    border: 1px solid rgba(124,58,237,0.12);
    border-radius: 14px;
}
.progress-matrix-row {
    display: grid;
    grid-template-columns: var(--matrix-student-col, max-content) repeat(var(--matrix-cols, 6), minmax(var(--matrix-task-col, 78px), 1fr));
    width: max(100%, var(--matrix-min, 630px));
    min-width: var(--matrix-min, 630px);
}
.matrix-density-fit .progress-matrix-row {
    grid-template-columns: var(--matrix-student-col-fit, 64px) repeat(var(--matrix-cols, 6), minmax(31px, 1fr));
    width: max(100%, var(--matrix-fit-min, 340px));
    min-width: var(--matrix-fit-min, 340px);
}
.progress-matrix-scroll.matrix-transposed .progress-matrix-row,
.progress-matrix-scroll.matrix-transposed.matrix-density-fit .progress-matrix-row {
    grid-template-columns: var(--matrix-task-axis-col, 92px) repeat(var(--matrix-cols, 4), minmax(var(--matrix-student-axis-col, 72px), 1fr));
    width: max(100%, var(--matrix-transposed-min, 380px));
    min-width: var(--matrix-transposed-min, 380px);
}
.progress-matrix-row > span,
.progress-matrix-row > a,
.progress-matrix-row > button.progress-matrix-task-head,
.progress-matrix-row > button.progress-matrix-due-cell {
    min-height: 44px;
    padding: 9px 10px;
    border-top: 1px solid rgba(124,58,237,0.10);
    border-left: 1px solid rgba(124,58,237,0.10);
    background: rgba(255,255,255,0.66);
    font-size: 0.75rem;
    font-weight: 850;
}
.progress-matrix-row > span:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    border-left: 0;
    box-shadow: inset -1px 0 0 rgba(124,58,237,0.10);
}
.progress-matrix-row > .progress-matrix-student-button {
    position: sticky;
    left: 0;
    z-index: 2;
    min-height: 44px;
    padding: 9px 10px;
    border: 0;
    border-top: 1px solid rgba(124,58,237,0.10);
    border-left: 0;
    color: var(--ink);
    background: rgba(255,255,255,0.78);
    box-shadow: inset -1px 0 0 rgba(124,58,237,0.10);
    text-align: left;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 850;
    cursor: pointer;
}
.progress-matrix-student-button:hover,
.progress-matrix-student-button.selected,
.progress-matrix-column-student-button:hover,
.progress-matrix-column-student-button.selected {
    background: #def8ec;
}
.progress-matrix-column-student-button {
    min-width: 0;
    min-height: 44px;
    padding: 9px 6px;
    overflow: hidden;
    border: 0;
    border-left: 1px solid rgba(124,58,237,0.10);
    color: var(--ink);
    background: rgba(124,58,237,0.07);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 850;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: none !important;
    white-space: nowrap;
    cursor: pointer;
}
.progress-matrix-column-student-button strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.progress-matrix-head > span,
.progress-matrix-head > a,
.progress-matrix-head > button {
    border-top: 0;
    color: var(--muted);
    background: rgba(124,58,237,0.07);
    text-transform: uppercase;
}
.progress-matrix-head > span:first-child { z-index: 3; }
.progress-matrix-student-cell {
    min-width: 0;
    width: auto;
    white-space: nowrap;
}
.progress-matrix-task-head strong {
    color: var(--ink);
    font-size: 0.72rem;
    line-height: 1.1;
}
.progress-matrix-task-id-compact { display: none !important; }
.progress-matrix-task-head {
    display: grid;
    align-content: center;
    justify-items: stretch;
    gap: 2px;
    border: 0;
    border-left: 1px solid rgba(124,58,237,0.10);
    color: inherit;
    font: inherit;
    text-align: center;
    text-decoration: none;
}
.progress-matrix-task-axis-cell {
    position: sticky;
    left: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 4px;
    min-width: 0;
    padding: 6px;
    border-top: 1px solid rgba(124,58,237,0.10);
    background: rgba(255,255,255,0.9);
    box-shadow: inset -1px 0 0 rgba(124,58,237,0.10);
}
.progress-matrix-transposed-task-head {
    display: grid;
    min-width: 0;
    color: inherit;
    font-size: 0.7rem;
    line-height: 1.1;
    text-align: left;
    text-decoration: none;
}
.progress-matrix-transposed-task-head strong,
.progress-matrix-transposed-task-head small {
    overflow: hidden;
    text-overflow: ellipsis;
}
.progress-matrix-transposed-due-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    padding: 0;
    border: 0;
    color: #62547c;
    background: transparent;
    font: inherit;
    cursor: pointer;
}
.progress-matrix-transposed-due-cell .matrix-due-parameter-pill {
    min-width: 0;
    min-height: 19px;
    padding: 2px 6px;
    font-size: 0.62rem;
}
.progress-matrix-transposed-due-cell:hover .matrix-due-parameter-pill,
.progress-matrix-transposed-due-cell:focus-visible .matrix-due-parameter-pill {
    border-color: rgba(105,82,157,0.56);
    color: #493370;
    background: #fff;
}
.matrix-transposed.matrix-density-tight .progress-matrix-column-student-button,
.matrix-transposed.matrix-density-tight .progress-matrix-cell {
    padding-right: 3px;
    padding-left: 3px;
    font-size: 0.62rem;
}
.matrix-transposed.matrix-density-tight .progress-matrix-column-student-button {
    min-height: 52px;
}
.matrix-transposed.matrix-density-tight .progress-matrix-task-axis-cell {
    padding: 5px;
}
.progress-matrix-due-row > span,
.progress-matrix-due-row > button.progress-matrix-due-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding-top: 6px;
    padding-bottom: 6px;
    color: #62547c;
    background: rgba(244,241,250,0.84);
    font-size: 0.68rem;
    font-weight: 950;
    text-align: center;
}
.progress-matrix-due-row > button.progress-matrix-due-cell {
    border: 0;
    border-top: 1px solid rgba(124,58,237,0.10);
    border-left: 1px solid rgba(124,58,237,0.10);
    font-family: inherit;
    line-height: 1;
    appearance: none;
    cursor: pointer;
    transition: background 150ms ease;
}
.progress-matrix-due-row > button.progress-matrix-due-cell:hover,
.progress-matrix-due-row > button.progress-matrix-due-cell:focus-visible {
    position: relative;
    z-index: 1;
    background: rgba(237,231,249,0.96);
    outline: none;
}
.matrix-due-parameter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(48px, calc(100% - 4px));
    min-height: 22px;
    padding: 3px 7px;
    border: 1px solid rgba(105,82,157,0.28);
    border-radius: 999px;
    color: #5d4a87;
    background: rgba(255,255,255,0.82);
    box-shadow: 0 3px 9px rgba(76,55,119,0.06);
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease, transform 100ms ease;
}
button.progress-matrix-due-cell:hover .matrix-due-parameter-pill,
button.progress-matrix-due-cell:focus-visible .matrix-due-parameter-pill {
    border-color: rgba(105,82,157,0.56);
    color: #493370;
    background: #fff;
}
button.progress-matrix-due-cell:active .matrix-due-parameter-pill {
    transform: scale(0.94);
}
.matrix-due-parameter-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.matrix-due-parameter-label svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
}
.matrix-density-fit .matrix-due-parameter-label > span {
    display: none;
}
.progress-matrix-due-row > .progress-matrix-student-cell {
    color: #62547c;
    justify-content: flex-start;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 0.75rem;
    font-weight: 850;
    text-align: left;
    text-transform: uppercase;
}
.progress-matrix-task-name {
    display: -webkit-box !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-transform: none;
    line-height: 1.2;
}
.progress-matrix-row strong,
.progress-matrix-row small { display: block; }
.progress-matrix-row small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.66rem;
}
.progress-matrix-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 9px 10px;
    border: 0;
    border-top: 1px solid rgba(124,58,237,0.10);
    border-left: 1px solid rgba(124,58,237,0.10);
    text-align: center;
    font-size: 0.75rem;
    font-weight: 850;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, outline-color 140ms ease;
}
.progress-matrix-status-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 0.88rem;
    font-weight: 950;
    line-height: 1;
}
.progress-matrix-status-score {
    min-width: 2.8em;
    font-weight: 930;
    line-height: 1;
}
.progress-matrix-status-score-compact { display: none; }
.matrix-density-condensed .progress-matrix-task-id-full,
.matrix-density-condensed .progress-matrix-task-name {
    display: none !important;
}
.matrix-density-condensed .progress-matrix-task-id-compact {
    display: grid !important;
    align-content: center;
    gap: 1px;
    min-width: 0;
    max-width: 100%;
    font-size: 0.6rem;
    letter-spacing: -0.01em;
}
.matrix-density-condensed .progress-matrix-task-id-compact span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.matrix-density-tight .progress-matrix-row > span,
.matrix-density-tight .progress-matrix-row > a,
.matrix-density-tight .progress-matrix-row > button.progress-matrix-due-cell,
.matrix-density-tight .progress-matrix-row > .progress-matrix-student-button,
.matrix-density-tight .progress-matrix-cell {
    padding-right: 3px;
    padding-left: 3px;
    font-size: 0.62rem;
}
.matrix-density-tight .progress-matrix-head > span,
.matrix-density-tight .progress-matrix-head > a {
    min-height: 52px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.matrix-density-tight .progress-matrix-due-row > span,
.matrix-density-tight .progress-matrix-due-row > button.progress-matrix-due-cell {
    min-height: 28px;
    padding-top: 4px;
    padding-bottom: 4px;
}
.matrix-density-tight .progress-matrix-student-cell,
.matrix-density-tight .progress-matrix-student-button strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.matrix-density-tight .progress-matrix-cell {
    flex-direction: column;
    gap: 2px;
}
.matrix-density-tight .progress-matrix-status-icon {
    width: 16px;
    height: 16px;
    font-size: 0.66rem;
}
.matrix-density-tight .progress-matrix-status-score-full { display: none; }
.matrix-density-tight .progress-matrix-status-score-compact {
    display: inline;
    min-width: 0;
    font-size: 0.58rem;
}
.progress-matrix-cell:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 2px rgba(124, 58, 237, 0.14);
}
.progress-matrix-cell.selected {
    outline: 3px solid rgba(124, 58, 237, 0.22);
    outline-offset: -3px;
}
.progress-matrix-cell.to_do {
    color: #6f817c;
    background: rgba(255,255,255,0.78);
}
.progress-matrix-cell.to_do .progress-matrix-status-icon {
    color: #8fa09b;
    background: rgba(255,255,255,0.94);
    box-shadow: inset 0 0 0 2px rgba(143,160,155,0.22);
}
.progress-matrix-cell.passed {
    color: #0d6f58;
    background: #def8ec;
}
.progress-matrix-cell.passed .progress-matrix-status-icon {
    color: #fff;
    background: #1aa67d;
}
.progress-matrix-cell.mastered {
    color: #0d6f58;
    background: #def8ec;
}
.progress-matrix-cell.mastered .progress-matrix-status-icon {
    color: #fff;
    background: #1aa67d;
    box-shadow: none;
    text-shadow: none;
}
.progress-matrix-cell.cancelled {
    color: #66736f;
    background: #eef3f1;
}
.progress-matrix-cell.cancelled .progress-matrix-status-icon {
    color: #66736f;
    background: #dce5e1;
}
.progress-matrix-cell.danger { color: var(--danger); background: var(--danger-soft); }
.progress-matrix-cell.empty { color: #a8b5b1; background: rgba(255,255,255,0.42); }
.progress-matrix-detail {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(124,58,237,0.12);
    border-radius: 14px;
    background: rgba(255,255,255,0.72);
}
.progress-matrix-detail-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}
.progress-matrix-detail-head strong,
.progress-matrix-detail-head small {
    display: block;
}
.progress-matrix-detail-head small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
}
.progress-matrix-detail-head > span {
    color: #6d28d9;
    font-size: 0.82rem;
    font-weight: 900;
    white-space: nowrap;
}
.progress-matrix-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 180;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(22, 30, 38, 0.28);
    backdrop-filter: blur(7px);
}
.notification-attempt-modal {
    background: rgba(36, 50, 58, 0.18);
    backdrop-filter: blur(7px) saturate(115%);
}
.progress-matrix-modal-shell {
    display: grid;
    gap: 12px;
    width: min(980px, 100%);
}
.notification-attempt-modal .notification-attempt-shell {
    width: min(760px, 100%);
}
.progress-matrix-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: min(760px, calc(100vh - 112px));
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(124,58,237,0.16);
    border-radius: 22px;
    background: rgba(255,255,255,0.98);
    box-shadow: 0 24px 70px rgba(21, 31, 43, 0.24);
}
.progress-matrix-modal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 2px 4px;
}
.progress-matrix-modal .progress-matrix-detail {
    margin-top: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.notification-attempt-dialog {
    height: 100%;
    min-height: 0;
    max-height: none;
}
.matrix-student-modal {
    display: grid;
    gap: 14px;
}
.progress-matrix-modal.matrix-student-modal {
    display: flex;
    gap: 0;
}
.matrix-student-overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(31,45,38,0.09);
}
.matrix-student-progress-board {
    margin-top: 16px;
    border-color: rgba(19,118,109,0.12);
    background:
        radial-gradient(circle at 18% 0%, rgba(255,255,255,0.9), transparent 35%),
        linear-gradient(145deg, rgba(242,251,246,0.96), rgba(226,245,237,0.9));
    box-shadow: 0 16px 38px rgba(19,118,109,0.1);
}
.matrix-student-progress-board .progress-map-panel,
.matrix-student-progress-board .progress-detail-panel {
    min-height: 270px;
    padding: 20px;
}
.matrix-student-calendar-toolbar {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.matrix-student-calendar-toolbar h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    letter-spacing: -0.015em;
    text-align: center;
}
.matrix-student-calendar-toolbar button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    color: var(--accent-dark);
    background: rgba(255,255,255,0.72);
    font-size: 1.35rem;
    font-weight: 700;
}
.matrix-student-calendar-toolbar button:active { transform: scale(0.94); }
.matrix-student-calendar-toolbar button:disabled { opacity: 0.28; transform: none; }
.progress-weekday-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
    margin: 0 4px 6px 48px;
}
.progress-weekday-row span {
    color: rgba(24,53,47,0.52);
    font-size: 0.66rem;
    font-weight: 900;
    text-align: center;
}
.progress-week-band-list { display: grid; gap: 7px; }
.progress-week-band {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 6px;
    border: 1px solid rgba(19,118,109,0.07);
    border-radius: 15px;
    background: rgba(255,255,255,0.48);
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.progress-week-band.active {
    border-color: rgba(19,118,109,0.2);
    background: rgba(255,255,255,0.82);
    box-shadow: 0 8px 18px rgba(19,118,109,0.08);
}
.progress-week-band .progress-week-button {
    justify-self: stretch;
    min-width: 0;
    padding: 0 4px;
}
.progress-week-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}
.progress-week-band .progress-dot {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 38px;
    border-radius: 11px;
    color: rgba(24,53,47,0.76);
    font-size: 0.72rem;
    font-weight: 900;
}
.progress-week-band .progress-dot:hover,
.progress-week-band .progress-dot.active {
    transform: translateY(-1px);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.94), 0 0 0 4px rgba(19,118,109,0.16);
}
.progress-week-band .progress-dot.l3,
.progress-week-band .progress-dot.l4 { color: #fff; }
.progress-week-band .progress-dot.star { color: #694709; }
.progress-week-band .progress-dot i {
    position: absolute;
    right: 3px;
    bottom: 2px;
    color: #a56600;
    font-size: 0.52rem;
    font-style: normal;
}
.progress-week-band .progress-dot.outside-month {
    color: transparent;
    background: transparent;
    box-shadow: none;
}
.matrix-student-progress-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.matrix-student-progress-detail-head h3 {
    margin: 0;
    color: var(--ink);
    font-size: 0.92rem;
}
.matrix-student-progress-detail-head span {
    display: grid;
    place-items: center;
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    border-radius: 999px;
    color: var(--accent-dark);
    background: rgba(19,118,109,0.1);
    font-size: 0.72rem;
    font-weight: 950;
}
.matrix-student-progress-empty {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    text-align: center;
}
.matrix-student-progress-task {
    width: 100%;
    text-align: left;
}
.matrix-student-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.matrix-student-avatar {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #13766d, #2fbf91);
    font-weight: 1000;
}
.matrix-student-identity h2 {
    margin: 0;
    font-size: 1.35rem;
    letter-spacing: 0;
}
.matrix-student-identity small {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 830;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.matrix-student-stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}
.matrix-student-stats span {
    min-width: 74px;
    padding: 8px 10px;
    border: 1px solid rgba(31,45,38,0.08);
    border-radius: 14px;
    background: rgba(255,255,255,0.78);
    text-align: center;
}
.matrix-student-stats strong,
.matrix-student-stats small {
    display: block;
}
.matrix-student-stats strong {
    color: var(--ink);
    font-size: 1.08rem;
    font-weight: 1000;
}
.matrix-student-stats small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 850;
}
.matrix-student-timeline {
    display: grid;
    gap: 10px;
}
.matrix-student-timeline-row {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) minmax(110px, 0.7fr) 64px;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid rgba(31,45,38,0.09);
    border-radius: 14px;
    background: rgba(255,255,255,0.74);
}
.matrix-student-date {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 900;
}
.matrix-student-task {
    min-width: 0;
}
.matrix-student-task strong,
.matrix-student-task small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.matrix-student-task strong {
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 940;
}
.matrix-student-task small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 830;
}
.matrix-student-bar {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(31,45,38,0.08);
}
.matrix-student-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1aa67d, #54c98b);
}
.matrix-student-timeline-row.mastered .matrix-student-bar span {
    background: linear-gradient(90deg, #f5b83d, #ffd76a);
    box-shadow: 0 0 14px rgba(245,184,61,0.28);
}
.matrix-student-timeline-row.open .matrix-student-bar span,
.matrix-student-timeline-row.cancelled .matrix-student-bar span {
    background: rgba(143,160,155,0.42);
}
.matrix-student-score {
    justify-self: end;
    min-width: 58px;
    padding: 8px 10px;
    border-radius: 999px;
    color: #0d6f58;
    background: #def8ec;
    text-align: center;
    font-size: 0.84rem;
    font-weight: 1000;
}
.matrix-student-timeline-row.mastered .matrix-student-score {
    color: #80510a;
    background: linear-gradient(135deg, #fff6c7, #ffd76a);
    box-shadow: 0 0 18px rgba(245,184,61,0.28);
}
.matrix-student-timeline-row.open .matrix-student-score,
.matrix-student-timeline-row.cancelled .matrix-student-score {
    color: #7b8783;
    border: 1px solid rgba(31,45,38,0.12);
    background: rgba(255,255,255,0.9);
}
.matrix-student-empty {
    padding: 16px;
    border: 1px solid rgba(31,45,38,0.09);
    border-radius: 14px;
    color: var(--muted);
    background: rgba(255,255,255,0.74);
    font-weight: 850;
}
.progress-matrix-modal-close {
    justify-self: center;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid rgba(255,255,255,0.76);
    border-radius: 999px;
    color: white;
    background: rgba(24, 51, 47, 0.78);
    font-size: 0.78rem;
    font-weight: 900;
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 32px rgba(21, 31, 43, 0.18);
}
.progress-matrix-modal-close:hover {
    background: rgba(24, 51, 47, 0.92);
}
.matrix-modal-actions,
.notification-attempt-actions {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    margin: 16px -22px -22px;
    padding: 14px 22px 18px;
    border-top: 1px solid rgba(31,45,38,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.98));
}
.matrix-modal-actions .progress-matrix-modal-close,
.notification-attempt-actions .progress-matrix-modal-close {
    color: #fff;
}
.matrix-detail-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.matrix-detail-summary h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.18rem;
    letter-spacing: 0;
}
.matrix-detail-pills {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}
.matrix-detail-pill,
.matrix-score-lock,
.matrix-edit-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 11px;
    border: 1px solid rgba(124,58,237,0.14);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(255,255,255,0.58);
    box-shadow: 0 8px 22px rgba(24, 51, 47, 0.055);
    font-size: 0.76rem;
    font-weight: 850;
}
.matrix-score-lock {
    gap: 7px;
    min-width: 72px;
    justify-content: center;
    font-weight: 950;
}
.matrix-score-lock.locked {
    border-color: rgba(21,127,85,0.16);
    color: var(--success);
    background: rgba(232,247,239,0.62);
}
.matrix-score-lock.unlocked {
    border-color: rgba(111,129,124,0.18);
    color: var(--ink);
    background: rgba(255,255,255,0.58);
}
.matrix-score-lock strong {
    color: inherit;
    font-variant-numeric: tabular-nums;
}
.matrix-edit-pill {
    justify-content: center;
    border-color: rgba(26,166,125,0.18);
    color: #0d6f58;
    background: #def8ec;
    font-weight: 950;
    cursor: pointer;
}
.matrix-edit-pill:hover,
.matrix-edit-pill:focus-visible {
    border-color: rgba(26,166,125,0.34);
    background: #cff3e3;
    outline: 3px solid rgba(26,166,125,0.16);
    outline-offset: 2px;
}
.matrix-detail-pill.cancelled {
    color: #66736f;
    background: #eef3f1;
}
.matrix-attempt-bars {
    position: relative;
    min-height: 158px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background:
        linear-gradient(rgba(255,255,255,0.78), rgba(255,255,255,0.78)) padding-box,
        linear-gradient(180deg, rgba(225,235,231,0.74), rgba(248,251,250,0.92)) border-box;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}
.matrix-attempt-bars-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--attempt-count), 48px);
    justify-content: safe center;
    align-items: start;
    gap: 6px;
    box-sizing: border-box;
    width: max-content;
    min-width: 100%;
    min-height: 158px;
    padding: 10px 12px 12px;
}
.matrix-attempt-bar {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: 18px 82px 15px minmax(20px, auto);
    justify-items: center;
    align-items: end;
    gap: 3px;
    width: 48px;
    min-width: 48px;
    min-height: 145px;
    padding: 0;
    border: 0;
    border-radius: 13px;
    color: inherit;
    background: transparent;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 110ms ease-out;
}
.matrix-attempt-bar:active {
    transform: scale(0.97);
}
.matrix-attempt-bar:hover .matrix-attempt-track,
.matrix-attempt-bar:focus-visible .matrix-attempt-track {
    outline: 3px solid rgba(19,118,109,0.16);
    outline-offset: 3px;
}
.matrix-attempt-bar:focus-visible {
    outline: none;
}
.matrix-attempt-bar.highlight .matrix-attempt-track {
    width: 16px;
    outline: 3px solid rgba(19,118,109,0.24);
    outline-offset: 3px;
}
.matrix-attempt-score {
    position: relative;
    color: var(--ink);
    font-size: 0.66rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.matrix-attempt-bar.best .matrix-attempt-score::after {
    position: absolute;
    top: -2px;
    right: -6px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #e6ad20;
    box-shadow: 0 0 0 2px rgba(230,173,32,0.14);
    content: "";
}
.matrix-attempt-track {
    position: relative;
    align-self: end;
    width: 14px;
    height: 82px;
    border-radius: 999px;
    background: rgba(183,199,193,0.34);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(69,91,83,0.05);
    transition: width 120ms ease-out, outline-color 120ms ease-out;
}
.matrix-attempt-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 6%;
    border-radius: 999px;
    background: #df8c82;
}
.matrix-attempt-fill.not-passed {
    background: #df8c82;
}
.matrix-attempt-fill.passed {
    background: #36a889;
}
.matrix-attempt-fill.mastered {
    background: #e6ad20;
    box-shadow: 0 0 12px rgba(230,173,32,0.24);
}
.matrix-attempt-number {
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.matrix-attempt-caption {
    display: grid;
    justify-items: center;
    align-content: start;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}
.matrix-attempt-caption small {
    display: block;
    margin: 0;
    color: var(--muted);
    font-size: 0.55rem;
    font-weight: 850;
    line-height: 1.22;
    letter-spacing: -0.015em;
    white-space: nowrap;
}
.matrix-attempt-caption .page-time {
    color: #405b53;
}
.matrix-attempt-caption .audio-time {
    color: var(--accent);
}
.matrix-attempt-threshold {
    position: absolute;
    z-index: 0;
    right: 12px;
    left: 12px;
    height: 0;
    border-top: 1px dashed rgba(75,97,89,0.18);
    pointer-events: none;
}
.matrix-attempt-threshold small {
    position: absolute;
    top: -7px;
    left: 0;
    padding-right: 4px;
    color: rgba(64,83,76,0.58);
    background: rgba(251,253,252,0.92);
    font-size: 0.48rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
}
.matrix-attempt-threshold.mastery {
    border-top-color: rgba(201,143,22,0.24);
}
.matrix-attempt-threshold.mastery small {
    color: rgba(151,99,7,0.68);
}
@media (prefers-reduced-motion: reduce) {
    .matrix-attempt-bar,
    .matrix-attempt-track {
        transition: none;
    }
    .matrix-attempt-bar:active {
        transform: none;
    }
}
@media (prefers-contrast: more) {
    .matrix-attempt-track {
        background: rgba(88,107,100,0.38);
        box-shadow: inset 0 0 0 1px rgba(28,47,40,0.20);
    }
    .matrix-attempt-threshold {
        border-top-color: rgba(42,64,56,0.48);
    }
}
.matrix-attempt-empty,
.matrix-wrong-empty {
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--muted);
    background: #f8fbfa;
    font-size: 0.82rem;
    font-weight: 800;
}
.matrix-attempt-list {
    display: grid;
    gap: 14px;
}
.matrix-attempt-card {
    scroll-margin-top: 24px;
    overflow: hidden;
    border: 1px solid rgba(124,58,237,0.14);
    border-radius: 16px;
    background: white;
}
.matrix-attempt-answer-region {
    min-width: 0;
}
.matrix-attempt-answer-region.is-revealing {
    transform-origin: top center;
    will-change: opacity, transform;
    animation: matrixAttemptAnswerReveal 460ms cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--attempt-reveal-order, 0) * 45ms);
}
@keyframes matrixAttemptAnswerReveal {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.matrix-attempt-card:target,
.matrix-attempt-card.highlight {
    border-color: rgba(124,58,237,0.42);
    box-shadow: 0 0 0 4px rgba(124,58,237,0.12);
}
.matrix-attempt-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 14px 15px;
    background: rgba(124,58,237,0.06);
}
.matrix-attempt-identity {
    display: grid;
    min-width: 0;
    gap: 7px;
    justify-items: start;
}
.matrix-attempt-head h3 {
    margin: 0;
    font-size: 0.98rem;
    letter-spacing: 0;
    white-space: nowrap;
}
.matrix-attempt-date {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    min-width: 0;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid rgba(124,58,237,0.12);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255,255,255,0.66);
    font-size: 0.68rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}
.matrix-work-button {
    appearance: none;
    -webkit-appearance: none;
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(124,58,237,0.18);
    border-radius: 999px;
    padding: 0;
    color: var(--accent);
    background: rgba(255,255,255,0.82);
    line-height: 1;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.matrix-work-button svg {
    display: block;
    width: 17px;
    height: 17px;
    margin: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.matrix-work-button:hover,
.matrix-work-button:focus-visible {
    transform: translateY(-1px);
    background: white;
    box-shadow: 0 8px 18px rgba(83, 45, 145, 0.14);
}
.matrix-attempt-context {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 14px 11px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 850;
}
.matrix-attempt-context span {
    overflow-wrap: anywhere;
}
.matrix-attempt-context .mode {
    border-radius: 999px;
    padding: 5px 9px;
    color: #365f4d;
    background: rgba(6, 214, 160, 0.12);
    font-weight: 950;
}
.matrix-attempt-context .mode.quiz {
    color: #6b4a08;
    background: rgba(255, 190, 11, 0.16);
}
.matrix-attempt-context .quiz-set-count {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.matrix-attempt-context .matrix-practice-group-sequence {
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.045em;
    line-height: 1;
    white-space: nowrap;
}
.matrix-attempt-identity .matrix-attempt-context {
    gap: 6px;
    padding: 0;
}
.matrix-attempt-identity .matrix-attempt-context .mode {
    padding: 4px 8px;
}
.matrix-answer-table {
    display: grid;
    grid-template-columns: minmax(54px, 0.32fr) minmax(0, 1fr) minmax(0, 1fr);
}
.matrix-answer-table > div {
    min-width: 0;
    padding: 11px 12px;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    font-size: 0.8rem;
}
.matrix-answer-table > div:nth-child(3n + 1) {
    border-left: 0;
}
.matrix-answer-table .q-cell {
    color: var(--ink);
    background: white;
    font-weight: 900;
}
.matrix-answer-table .student-answer {
    color: var(--danger);
    background: var(--danger-soft);
    font-weight: 850;
}
.matrix-answer-table .correct-answer {
    color: var(--success);
    background: var(--success-soft);
    font-weight: 850;
}
@media (max-width: 520px) {
    .matrix-attempt-head {
        gap: 8px;
        padding: 12px;
    }
    .matrix-attempt-date {
        max-width: 100%;
        padding-inline: 8px;
        overflow: hidden;
        font-size: 0.62rem;
        text-overflow: ellipsis;
    }
}
@media (prefers-reduced-motion: reduce) {
    .matrix-attempt-answer-region.is-revealing {
        transform: none;
        will-change: opacity;
        animation: matrixAttemptAnswerFade 140ms ease-out both;
        animation-delay: 0ms;
    }
}
@keyframes matrixAttemptAnswerFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.matrix-work-review {
    display: grid;
    gap: 14px;
}
.matrix-work-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 15px;
    border: 1px solid rgba(124,58,237,0.14);
    border-radius: 16px;
    background: rgba(124,58,237,0.06);
}
.matrix-work-review-head h3 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0;
    text-align: right;
}
.matrix-work-review-head small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 850;
    text-align: right;
}
.matrix-review-back {
    min-height: 34px;
    border: 1px solid rgba(124,58,237,0.16);
    border-radius: 999px;
    padding: 0 12px;
    color: var(--accent);
    background: white;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
}
.matrix-work-history {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(31,45,38,0.08);
    border-radius: 12px;
    color: var(--muted);
    background: rgba(255,255,255,0.72);
    font-size: 0.72rem;
    font-weight: 850;
}
.matrix-work-history span {
    text-align: right;
}
.matrix-work-question-list {
    display: grid;
    gap: 10px;
}
.matrix-work-question {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: white;
}
.matrix-work-question.correct {
    border-color: rgba(22, 163, 74, 0.20);
}
.matrix-work-question.wrong {
    border-color: rgba(220, 38, 38, 0.20);
}
.matrix-work-question-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(31,45,38,0.04);
}
.matrix-work-question-top strong {
    font-size: 0.82rem;
}
.matrix-work-question-top span {
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 0.66rem;
    font-weight: 950;
}
.matrix-work-question.correct .matrix-work-question-top span {
    color: var(--success);
    background: var(--success-soft);
}
.matrix-work-question.wrong .matrix-work-question-top span {
    color: var(--danger);
    background: var(--danger-soft);
}
.matrix-work-question-text {
    margin: 0;
    padding: 12px;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 760;
    line-height: 1.45;
}
.matrix-work-question-text.missing {
    color: var(--muted);
    font-style: italic;
}
.matrix-work-answer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line);
}
.matrix-work-answer-grid > div {
    min-width: 0;
    padding: 11px 12px;
}
.matrix-work-answer-grid > div + div {
    border-left: 1px solid var(--line);
}
.matrix-work-answer-grid small {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 900;
    text-transform: uppercase;
}
.matrix-work-answer-grid strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 0.82rem;
    line-height: 1.35;
}
.matrix-work-question.correct .matrix-work-answer-grid > div:first-child strong,
.matrix-work-answer-grid > div:nth-child(2) strong {
    color: var(--success);
}
.matrix-work-question.wrong .matrix-work-answer-grid > div:first-child strong {
    color: var(--danger);
}
.matrix-work-explanation {
    padding: 11px 12px 13px;
    border-top: 1px solid var(--line);
    background: rgba(255, 248, 224, 0.62);
}
.matrix-work-explanation small {
    display: block;
    margin-bottom: 5px;
    color: #8a5a00;
    font-size: 0.64rem;
    font-weight: 950;
    text-transform: uppercase;
}
.matrix-work-explanation p {
    margin: 0;
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 720;
    line-height: 1.5;
    white-space: pre-line;
}
.matrix-work-question-actions {
    display: flex;
    justify-content: flex-end;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--line);
    background: rgba(245, 250, 248, 0.76);
}
.matrix-accept-answer-button {
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(19, 118, 109, 0.22);
    border-radius: 999px;
    color: #0d6f58;
    background: #def8ec;
    font-size: 0.72rem;
    font-weight: 900;
}
.matrix-accept-answer-button:hover:not(:disabled) {
    border-color: rgba(19, 118, 109, 0.38);
    background: #c9f2df;
}
.matrix-accept-answer-button:disabled {
    cursor: wait;
    opacity: 0.68;
}
.assignment-progress-mode-tabs {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    width: min(560px, 100%);
    padding: 5px;
    border: 1px solid rgba(124,58,237,0.16);
    border-radius: 999px;
    background: rgba(255,255,255,0.84);
    pointer-events: auto;
}
.assignment-progress-mode-tab {
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    color: var(--muted);
    background: transparent;
    font-weight: 900;
    cursor: pointer;
}
.assignment-progress-mode-tab.active {
    color: #fff;
    background: var(--accent);
}
.assignment-group-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 10px 0;
    padding: 10px;
    border: 1px solid rgba(124,58,237,0.12);
    border-radius: 12px;
    background: rgba(255,255,255,0.78);
}
.assignment-group-tools span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 850;
}
.assignment-edit-button {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 0.78rem;
}
.task-score-chart {
    display: flex;
    align-items: end;
    gap: 8px;
    min-height: 168px;
    margin: 10px;
    padding: 12px 10px 10px;
    overflow-x: auto;
    border: 1px solid rgba(124,58,237,0.12);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(248,245,255,0.9), rgba(255,255,255,0.82));
}
.task-score-bar {
    display: grid;
    grid-template-rows: auto 110px auto;
    justify-items: center;
    align-items: end;
    gap: 6px;
    min-width: 58px;
    border: 0;
    color: var(--ink);
    background: transparent;
}
.task-score-value {
    color: #5b21b6;
    font-size: 0.72rem;
    font-weight: 900;
    white-space: nowrap;
}
.task-score-fill {
    width: 24px;
    min-height: 4px;
    border-radius: 999px 999px 6px 6px;
    background: linear-gradient(180deg, #8b5cf6, #60a5fa);
    box-shadow: 0 8px 18px rgba(109,40,217,0.16);
}
.task-score-label {
    max-width: 64px;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.group-mini-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
    margin: 10px;
}
.group-mini-cell {
    display: grid;
    gap: 3px;
    min-height: 58px;
    padding: 8px;
    border: 1px solid rgba(124,58,237,0.12);
    border-radius: 12px;
    background: #fff;
    text-align: left;
}
.group-mini-cell strong {
    color: #5b21b6;
    font-size: 1rem;
    font-weight: 950;
}
.group-mini-cell small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.group-mini-cell.passed { background: #e3f4fb; }
.group-mini-cell.mastered { background: var(--success-soft); }
.group-mini-cell.cancelled { background: #eef3f1; }
.assignment-progress-groups {
    display: grid;
    gap: 10px;
}
.assignment-progress-group {
    overflow: hidden;
    border: 1px solid rgba(124,58,237,0.16);
    border-radius: 16px;
    background: rgba(255,255,255,0.88);
}
.assignment-progress-group-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 13px;
    border: 0;
    color: var(--ink);
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.assignment-progress-group-head:hover {
    background: rgba(124,58,237,0.045);
}
.assignment-progress-group-copy strong,
.assignment-progress-group-copy small {
    display: block;
}
.assignment-progress-group-copy small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.72rem;
}
.assignment-progress-group-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(54px, auto));
    gap: 8px;
    text-align: center;
}
.assignment-progress-group-stats span {
    display: block;
    min-width: 54px;
    padding: 6px 8px;
    border-radius: 12px;
    background: rgba(124,58,237,0.07);
}
.assignment-progress-group-stats strong,
.assignment-progress-group-stats small {
    display: block;
}
.assignment-progress-group-stats strong {
    color: var(--accent-dark);
    font-size: 1rem;
    font-weight: 950;
}
.assignment-progress-group-stats small {
    margin-top: 1px;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 850;
}
.assignment-progress-group-body {
    border-top: 1px solid rgba(124,58,237,0.10);
}
.student-history-group.expanded {
    border-color: rgba(31,45,38,0.14);
    box-shadow: 0 18px 42px rgba(31,45,38,0.10);
}
.student-history-group .assignment-progress-group-head {
    grid-template-columns: minmax(0, 1fr);
}
.student-history-shell {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    min-height: 220px;
}
.student-history-sidebar {
    padding: 16px;
    border-right: 1px solid rgba(31,45,38,0.10);
    background: rgba(255,255,255,0.62);
}
.student-history-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.student-history-identity strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.student-history-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #13766d, #2fbf91);
    font-weight: 1000;
}
.student-history-list {
    display: grid;
    align-content: start;
}
.student-history-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 62px;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid rgba(31,45,38,0.10);
    color: var(--ink);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 150ms ease;
}
.student-history-row:last-child {
    border-bottom: 0;
}
.student-history-row:hover {
    background: rgba(222,248,236,0.46);
    box-shadow: inset 4px 0 0 rgba(19,118,109,0.55);
}
.student-history-task {
    min-width: 0;
}
.student-history-task strong,
.student-history-task small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.student-history-task strong {
    font-size: 0.9rem;
    font-weight: 920;
}
.student-history-task small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 850;
}
.student-history-score {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    padding: 0 12px;
    border-radius: 999px;
    color: #0d6f58;
    background: #def8ec;
    font-size: 0.82rem;
    font-weight: 1000;
    white-space: nowrap;
}
.student-history-score.mastered {
    color: #fff;
    background: linear-gradient(135deg, #159b72, #31c58e);
    box-shadow: 0 0 14px rgba(30,176,125,0.24);
}
.student-history-score.low {
    color: #64736f;
    border: 1px solid rgba(100,115,111,0.18);
    background: rgba(255,255,255,0.9);
}

.teacher-page {
    --accent: #ef476f;
    --accent-dark: #8338ec;
    --accent-soft: #fff1f6;
    --line: rgba(239, 71, 111, 0.16);
    --page: #fffaf8;
    --shadow: 0 22px 58px rgba(31, 45, 38, 0.13);
    --teacher-rainbow: linear-gradient(120deg, #ef476f, #ff9f1c, #ffd166, #06d6a0, #3a86ff, #8338ec, #ff4d6d, #ef476f);
    --teacher-rainbow-soft: linear-gradient(120deg, rgba(239,71,111,0.22), rgba(255,159,28,0.20), rgba(255,209,102,0.22), rgba(6,214,160,0.18), rgba(58,134,255,0.18), rgba(131,56,236,0.20), rgba(255,77,109,0.20), rgba(239,71,111,0.22));
    background:
        radial-gradient(circle at 8% 5%, rgba(239, 71, 111, 0.18), transparent 28%),
        radial-gradient(circle at 92% 4%, rgba(6, 214, 160, 0.20), transparent 28%),
        radial-gradient(circle at 52% 0%, rgba(255, 209, 102, 0.16), transparent 34%),
        #fffaf8;
    background-size: 220% 220%, 220% 220%, 240% 240%, auto;
    animation: teacherRainbowPageFlow 24s ease-in-out infinite;
}

.teacher-page .hero-card {
    color: white;
    border: 0;
    background: var(--teacher-rainbow);
    background-size: 360% 360%;
    box-shadow: 0 24px 62px rgba(239, 71, 111, 0.18);
    animation: teacherRainbowHeroFlow 16s ease-in-out infinite;
}
.teacher-page .hero-card::before {
    display: block;
    background:
        conic-gradient(from 120deg,
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.20),
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.24),
            rgba(255,255,255,0.08));
    filter: blur(22px);
    opacity: 0.92;
    animation: teacherRainbowAuroraTurn 20s linear infinite;
}
.teacher-page .hero-card::after {
    background: radial-gradient(circle, rgba(255,255,255,0.62), transparent 68%);
}
.teacher-page .hero-card p { color: rgba(255,255,255,0.86); }

.teacher-page .dashboard-tabs {
    border-color: rgba(255,255,255,0.82);
    background: rgba(255,255,255,0.72);
    box-shadow: 0 12px 34px rgba(31, 45, 38, 0.10);
}
.teacher-page .tab-button.active,
.teacher-page .primary-button,
.teacher-page .assignment-edit-button {
    color: #fff;
    background: var(--teacher-rainbow);
    background-size: 300% 100%;
    box-shadow: 0 10px 26px rgba(239, 71, 111, 0.18);
    animation: teacherRainbowFlow 8s linear infinite;
}
.teacher-page .primary-button:hover,
.teacher-page .tab-button.active:hover {
    background: var(--teacher-rainbow);
    background-size: 300% 100%;
}

.teacher-page .teacher-updates-button,
.teacher-page .teacher-review-button,
.teacher-page .teacher-create-capsule,
.teacher-page .student-chip {
    position: relative;
    overflow: hidden;
    border-color: rgba(255,255,255,0.78);
    background: rgba(255,255,255,0.72);
    color: rgba(23,32,27,0.72);
    box-shadow: 0 10px 24px rgba(31, 45, 38, 0.08);
}
.teacher-page .teacher-updates-button,
.teacher-page .teacher-review-button {
    overflow: visible;
}
.teacher-page .teacher-updates-button.has-updates,
.teacher-page .teacher-review-button.has-updates {
    border-color: rgba(239, 71, 111, 0.24);
    background: rgba(255,255,255,0.82);
}
.teacher-page .teacher-updates-button.is-loading,
.teacher-page .teacher-review-button.is-loading {
    color: transparent;
    pointer-events: none;
}
.teacher-page .teacher-updates-button.is-loading > *,
.teacher-page .teacher-review-button.is-loading > * {
    position: absolute;
    opacity: 0;
}
.teacher-page .teacher-updates-button.is-loading::before,
.teacher-page .teacher-review-button.is-loading::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255,255,255,0.72);
    border-top-color: #ef476f;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(255,255,255,0.48);
    animation: teacherHeaderLoadingSpin 0.8s linear infinite;
}

.teacher-page .profile-card,
.teacher-page .empty-card,
.teacher-page .account-panel,
.teacher-page .teacher-updates-dialog,
.teacher-page .teacher-review-dialog,
.teacher-page .create-student-dialog,
.teacher-page .create-student-success-card,
.teacher-page .assign-picker-dialog,
.teacher-page .assignment-progress-group,
.teacher-page .assignment-progress-mode-tabs,
.teacher-page .student-select-card {
    border-color: rgba(255,255,255,0.78);
    background: rgba(255,255,255,0.78);
    box-shadow: 0 14px 34px rgba(31, 45, 38, 0.09);
    backdrop-filter: blur(16px);
}

.teacher-page .progress-matrix-card,
.teacher-page .assignment-progress-group,
.teacher-page .profile-card,
.teacher-page .student-select-card {
    position: relative;
    overflow: hidden;
}
.teacher-page .progress-matrix-card::before,
.teacher-page .assignment-progress-group::before,
.teacher-page .student-select-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    height: 4px;
    background: var(--teacher-rainbow);
    background-size: 300% 100%;
    animation: teacherRainbowFlow 8s linear infinite;
}
.teacher-page .progress-matrix-card > *,
.teacher-page .assignment-progress-group > *,
.teacher-page .student-select-card > * {
    position: relative;
    z-index: 2;
}

.teacher-page .matrix-loading-card {
    border-color: rgba(239, 71, 111, 0.16);
    background:
        linear-gradient(90deg, transparent 0%, rgba(239,71,111,0.16) 18%, rgba(255,209,102,0.18) 36%, rgba(6,214,160,0.16) 54%, rgba(58,134,255,0.15) 72%, transparent 100%),
        linear-gradient(#f2d2da 1.5px, transparent 1.5px),
        linear-gradient(90deg, #f2d2da 1.5px, transparent 1.5px),
        rgba(255,255,255,0.92);
    background-size: 320px 100%, 42px 42px, 42px 42px, auto;
    box-shadow: 0 10px 28px rgba(239, 71, 111, 0.08);
}
.teacher-page .matrix-loading-card::after {
    background:
        linear-gradient(90deg, transparent 0%, rgba(239,71,111,0.10) 16%, rgba(255,209,102,0.12) 32%, rgba(6,214,160,0.10) 50%, rgba(58,134,255,0.10) 68%, transparent 84%),
        linear-gradient(180deg, transparent 0%, rgba(131,56,236,0.10) 42%, transparent 68%);
    background-size: 320px 100%, 100% 180px;
}
.teacher-page .matrix-class-filter,
.teacher-page .matrix-column-filter,
.teacher-page .matrix-date-filter,
.teacher-page .matrix-date-bound input,
.teacher-page .assignment-group-tools,
.teacher-page .task-score-chart {
    border-color: transparent;
    background:
        linear-gradient(rgba(255,255,255,0.78), rgba(255,255,255,0.78)) padding-box,
        var(--teacher-rainbow) border-box;
    background-size: auto, 300% 100%;
    animation: teacherRainbowFlow 10s linear infinite;
}
.teacher-page .assignment-progress-mode-tabs {
    border-color: rgba(31,45,38,0.10);
    background: rgba(255,255,255,0.76);
    animation: none;
}
.teacher-page .assignment-progress-mode-tab.active {
    color: #24372f;
    background: rgba(31,45,38,0.10);
    box-shadow: none;
    animation: none;
}
.teacher-page .progress-matrix-scroll {
    border-color: rgba(239, 71, 111, 0.14);
}
.teacher-page .progress-matrix-row > span,
.teacher-page .progress-matrix-row > a,
.teacher-page .progress-matrix-row > button.progress-matrix-due-cell,
.teacher-page .progress-matrix-cell {
    border-color: rgba(31,45,38,0.08);
}
.teacher-page .progress-matrix-head > span,
.teacher-page .progress-matrix-head > a {
    color: rgba(23,32,27,0.74);
    background:
        var(--teacher-rainbow-soft),
        rgba(255,255,255,0.78);
    background-size: 280% 100%, auto;
    animation: teacherRainbowFlow 13s linear infinite;
}
.teacher-page .progress-matrix-due-row > .progress-matrix-student-cell {
    color: #62547c;
    background: rgba(244,241,250,0.94);
    animation: none;
}
.teacher-page .progress-matrix-row > span:first-child {
    box-shadow: inset -1px 0 0 rgba(31,45,38,0.08);
}
.teacher-page .progress-matrix-cell:hover {
    box-shadow: inset 0 0 0 2px rgba(239, 71, 111, 0.14);
}
.teacher-page .progress-matrix-cell.selected {
    outline-color: rgba(239, 71, 111, 0.24);
}
.teacher-page .progress-matrix-cell.passed,
.teacher-page .progress-matrix-cell.mastered {
    color: #0d6f58;
    background: #def8ec;
}
.teacher-page .progress-matrix-cell.passed .progress-matrix-status-icon,
.teacher-page .progress-matrix-cell.mastered .progress-matrix-status-icon {
    background: #1aa67d;
}
.teacher-page .task-score-value,
.teacher-page .group-mini-cell strong,
.teacher-page .assignment-progress-group-stats strong {
    color: #31453d;
}
.teacher-page .task-score-fill {
    background: linear-gradient(180deg, #54c98b, #2fae6a);
    box-shadow: 0 8px 18px rgba(47, 174, 106, 0.14);
}
.teacher-page .group-mini-cell {
    border-color: rgba(31,45,38,0.10);
    background: rgba(255,255,255,0.82);
    animation: none;
}
.teacher-page .group-mini-cell.passed,
.teacher-page .group-mini-cell.mastered {
    background: #def8ec;
}
.teacher-page .group-mini-cell.cancelled {
    background: #eef3f1;
}
.teacher-page .assignment-progress-group-stats span {
    color: var(--ink);
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(31,45,38,0.08);
}
.teacher-page .assignment-progress-group-stats span strong {
    color: #31453d;
}
.teacher-page .assignment-progress-group-stats small {
    color: var(--muted);
}
.teacher-page .assignment-progress-group-head:hover {
    background: rgba(239, 71, 111, 0.055);
}
.teacher-page .student-mode-button.active,
.teacher-page .student-mode-button:hover,
.teacher-page .selected-student-pill:not(.empty) {
    border-color: transparent;
    background:
        linear-gradient(rgba(255,255,255,0.78), rgba(255,255,255,0.78)) padding-box,
        var(--teacher-rainbow) border-box;
    background-size: auto, 300% 100%;
    animation: teacherRainbowFlow 10s linear infinite;
}

@keyframes teacherRainbowFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}
@keyframes teacherRainbowHeroFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes teacherRainbowPageFlow {
    0% { background-position: 0% 0%, 100% 0%, 50% 0%, 0 0; }
    50% { background-position: 100% 70%, 0% 50%, 80% 40%, 0 0; }
    100% { background-position: 0% 0%, 100% 0%, 50% 0%, 0 0; }
}
@keyframes teacherRainbowAuroraTurn {
    from { transform: rotate(0deg) scale(1); }
    to { transform: rotate(360deg) scale(1); }
}
@keyframes teacherHeaderLoadingSpin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .teacher-page .teacher-updates-button.is-loading::before,
    .notification-feed-loading > span[aria-hidden="true"] {
        animation: none;
    }
}
.assignment-edit-overlay {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(24, 20, 43, 0.38);
    backdrop-filter: blur(8px);
}
.assignment-edit-shell {
    display: grid;
    gap: 12px;
    width: min(520px, 100%);
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
}
.assignment-edit-dialog {
    position: relative;
    width: 100%;
    max-height: min(720px, calc(100vh - 92px));
    max-height: min(720px, calc(100dvh - 92px));
    overflow: auto;
    padding: 24px;
    border: 1px solid rgba(124,58,237,0.18);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
}
.assignment-edit-external-close,
.matrix-cell-external-close {
    justify-self: center;
}
.assignment-edit-head {
    margin-bottom: 16px;
}
.assignment-edit-head .eyebrow { margin: 0; }
.assignment-edit-head h2 {
    margin: 4px 0 5px;
}
.assignment-edit-head p {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 750;
}
.assignment-edit-form {
    display: grid;
    gap: 12px;
}
.assignment-edit-field {
    display: grid;
    grid-template-columns: minmax(120px, .65fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}
.assignment-edit-field > label,
.assignment-edit-field-label {
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 850;
}
.assignment-edit-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.assignment-edit-earn-star {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8c6517;
    font-size: 0.76rem;
    font-weight: 900;
    white-space: nowrap;
}
.assignment-edit-earn-star input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #d19a2b;
}
.assignment-edit-form input[type="date"],
.assignment-edit-form input[type="number"],
.assignment-edit-form select {
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0 12px;
    color: var(--ink);
    background: #fff;
}
.assignment-edit-form .dialog-actions {
    margin-top: 6px;
}
.assignment-edit-percentage {
    min-width: 0;
    transition: opacity 150ms ease;
}
.assignment-edit-percentage.is-disabled {
    opacity: 0.42;
}
.assignment-edit-percentage .percentage-picker-trigger {
    width: 100%;
}
.percentage-picker-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line, rgba(72, 86, 78, 0.16));
    border-radius: 12px;
    color: var(--ink, #18332f);
    background: #fff;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 860;
    text-align: left;
    cursor: pointer;
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 100ms ease;
}
.percentage-picker-trigger:hover,
.percentage-picker-trigger:focus-visible {
    border-color: rgba(19, 118, 109, 0.38);
    box-shadow: 0 0 0 3px rgba(19, 118, 109, 0.09);
}
.percentage-picker-trigger:active {
    transform: scale(0.985);
}
.percentage-picker-trigger:disabled {
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.percentage-picker-glyph {
    flex: 0 0 auto;
    color: var(--accent, #13766d);
    font-size: 1rem;
    line-height: 1;
}
.percentage-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 360;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(18, 29, 27, 0.34);
    backdrop-filter: blur(12px) saturate(1.1);
}
.percentage-picker-dialog {
    width: min(360px, 100%);
    padding: 16px;
    border: 1px solid rgba(19, 118, 109, 0.16);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 28px 80px rgba(10, 52, 47, 0.24);
}
.percentage-picker-head {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 72px;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    text-align: center;
}
.percentage-picker-head p {
    margin: 0 0 2px;
    color: var(--accent, #13766d);
    font-size: 0.64rem;
    font-weight: 920;
    letter-spacing: 0.12em;
}
.percentage-picker-head h2 {
    margin: 0;
    color: var(--ink, #18332f);
    font-size: 1rem;
    line-height: 1.2;
}
.percentage-picker-action {
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    border-radius: 12px;
    color: var(--accent, #13766d);
    background: transparent;
    font-size: 0.84rem;
    font-weight: 880;
    cursor: pointer;
}
.percentage-picker-action:hover,
.percentage-picker-action:focus-visible {
    background: rgba(19, 118, 109, 0.08);
    outline: none;
}
.percentage-picker-action.done {
    color: #fff;
    background: var(--accent, #13766d);
}
.percentage-wheel-frame {
    position: relative;
    height: 220px;
    overflow: hidden;
    border-radius: 18px;
    background: #f6faf9;
}
.percentage-wheel {
    position: relative;
    z-index: 1;
    height: 220px;
    padding: 88px 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    outline: none;
}
.percentage-wheel::-webkit-scrollbar {
    display: none;
}
.percentage-wheel-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    padding: 0;
    border: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    color: rgba(24, 51, 47, 0.46);
    background: transparent;
    font: inherit;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    font-weight: 760;
    cursor: pointer;
    transition: color 120ms ease, font-size 120ms ease, font-weight 120ms ease;
}
.percentage-wheel-option span {
    margin-left: 2px;
    font-size: 0.72em;
}
.percentage-wheel-option.active {
    color: var(--ink, #18332f);
    font-size: 1.34rem;
    font-weight: 950;
}
.percentage-wheel-highlight {
    position: absolute;
    z-index: 0;
    top: 88px;
    right: 10px;
    left: 10px;
    height: 44px;
    border-top: 1px solid rgba(19, 118, 109, 0.18);
    border-bottom: 1px solid rgba(19, 118, 109, 0.18);
    border-radius: 12px;
    background: rgba(19, 118, 109, 0.075);
    pointer-events: none;
}
.percentage-wheel-fade {
    position: absolute;
    z-index: 2;
    right: 0;
    left: 0;
    height: 88px;
    pointer-events: none;
}
.percentage-wheel-fade.top {
    top: 0;
    background: linear-gradient(180deg, #f6faf9 14%, rgba(246, 250, 249, 0));
}
.percentage-wheel-fade.bottom {
    bottom: 0;
    background: linear-gradient(0deg, #f6faf9 14%, rgba(246, 250, 249, 0));
}
.percentage-picker-output {
    display: block;
    margin-top: 10px;
    color: var(--muted, #58716c);
    font-size: 0.76rem;
    font-weight: 850;
    text-align: center;
}
@media (prefers-reduced-motion: reduce) {
    .percentage-picker-trigger,
    .percentage-wheel-option {
        transition: none;
    }
    .percentage-wheel {
        scroll-behavior: auto;
    }
}
@media (prefers-reduced-transparency: reduce) {
    .percentage-picker-overlay {
        background: rgba(18, 29, 27, 0.72);
        backdrop-filter: none;
    }
    .percentage-picker-dialog {
        background: #fff;
    }
}
.danger-button.assignment-cancel-open-button {
    border-color: rgba(255, 59, 48, 0.18);
    color: #b63a34;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 59, 48, 0.065));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 5px 14px rgba(120, 34, 30, 0.055);
    outline: none;
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 100ms ease;
}
.danger-button.assignment-cancel-open-button:hover,
.danger-button.assignment-cancel-open-button:focus-visible {
    border-color: rgba(255, 59, 48, 0.3);
    color: #a82f2a;
    background: linear-gradient(180deg, #fff, rgba(255, 59, 48, 0.105));
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.075), 0 7px 17px rgba(120, 34, 30, 0.075);
}
.danger-button.assignment-cancel-open-button:active {
    transform: scale(0.985);
    background: rgba(255, 59, 48, 0.13);
    box-shadow: inset 0 1px 2px rgba(120, 34, 30, 0.08);
}
.danger-button.assignment-cancel-open-button:disabled {
    border-color: rgba(103, 84, 82, 0.12);
    color: rgba(103, 84, 82, 0.42);
    background: rgba(103, 84, 82, 0.045);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}
.assignment-cancel-confirm-actions .danger-button {
    color: #fff;
    background: #c93645;
}
.assignment-cancel-confirm-actions .danger-button:hover,
.assignment-cancel-confirm-actions .danger-button:focus-visible {
    color: #fff;
    background: #ad2736;
}
@media (prefers-reduced-motion: reduce) {
    .danger-button.assignment-cancel-open-button {
        transition: none;
    }
    .danger-button.assignment-cancel-open-button:active {
        transform: none;
    }
}
.assignment-cancel-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 380;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(43, 16, 23, 0.42);
    backdrop-filter: blur(12px) saturate(1.08);
}
.assignment-cancel-confirm-dialog {
    display: grid;
    justify-items: center;
    gap: 12px;
    width: min(390px, 100%);
    padding: 26px 22px 22px;
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 28px 80px rgba(55, 16, 24, 0.28);
    text-align: center;
}
.assignment-cancel-confirm-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 999px;
    color: #b42332;
    background: #feecef;
    font-size: 1.45rem;
    font-weight: 950;
}
.assignment-cancel-confirm-dialog h2 {
    margin: 0;
    font-size: 1.2rem;
}
.assignment-cancel-confirm-dialog p {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 750;
    line-height: 1.5;
}
.assignment-cancel-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}
.assignment-cancel-confirm-actions button {
    min-height: 44px;
    border-radius: 12px;
}
.danger-button {
    border-color: rgba(220,38,38,0.24);
    color: var(--danger);
    background: #fff;
}
.assignment-table {
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(124,58,237,0.16);
    border-radius: 16px;
    background: rgba(255,255,255,0.88);
}
.assignment-progress-group-body .assignment-table {
    border: 0;
    border-radius: 0;
    background: transparent;
}
.assignment-table-head,
.assignment-table-row {
    display: grid;
    grid-template-columns: minmax(130px, 1.1fr) minmax(180px, 1.6fr) minmax(96px, .7fr) minmax(80px, .45fr) minmax(80px, .45fr) minmax(120px, .8fr);
    gap: 10px;
    align-items: center;
}
.assignment-table-head {
    padding: 11px 13px;
    color: var(--muted);
    background: rgba(124,58,237,0.07);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}
.assignment-table-row {
    width: 100%;
    padding: 13px;
    border: 0;
    border-top: 1px solid rgba(124,58,237,0.10);
    color: var(--ink);
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.assignment-table-row:hover { background: rgba(124,58,237,0.045); }
.assignment-table-row strong,
.assignment-table-row small {
    display: block;
}
.assignment-table-row small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.7rem;
}
.assignment-status-pill,
.assignment-alert-pill {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 900;
}
.assignment-status-pill.to_do { color: #7a5528; background: #fff1da; }
.assignment-status-pill.passed,
.assignment-status-pill.mastered { color: var(--success); background: var(--success-soft); }
.assignment-status-pill.cancelled { color: #66736f; background: #eef3f1; }
.assignment-alert-pill.ok { color: var(--success); background: var(--success-soft); }
.assignment-alert-pill.watch { color: #7a5528; background: #fff1da; }
.assignment-alert-pill.danger { color: var(--danger); background: var(--danger-soft); }
.assignment-overview-detail {
    padding: 0 13px 13px;
    border-top: 1px solid rgba(124,58,237,0.10);
}
.assign-setup { margin-bottom: 14px; }
.assign-step-card,
.assign-options-card {
    display: grid;
    gap: 8px;
    padding: 13px;
}
.assign-step-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0;
    border: 0;
    color: var(--ink);
    background: transparent;
    text-align: left;
}
.assign-step-summary strong,
.assign-step-summary small {
    display: block;
}
.assign-step-summary strong {
    font-size: 0.96rem;
}
.assign-step-summary small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}
.assign-step-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--accent-dark);
    background: var(--accent-soft);
    font-size: 0.72rem;
    font-weight: 900;
}
.assign-step-card.expanded .assign-step-action,
.assign-options-card.expanded .assign-step-action {
    color: white;
    background: var(--accent);
}
.assign-chip-list {
    display: grid;
    gap: 6px;
    min-height: 26px;
}
.assign-chip,
.assign-empty-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    max-width: 100%;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 850;
}
.assign-chip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 4px 6px 4px 10px;
    color: var(--accent-dark);
    background: var(--accent-soft);
}
.assign-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.assign-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid rgba(19, 118, 109, 0.2);
    border-radius: 50%;
    color: var(--accent-dark);
    background: rgba(255,255,255,0.82);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}
.assign-chip-remove:hover {
    color: white;
    background: var(--accent);
}
.assign-empty-chip {
    color: var(--muted);
    background: rgba(255,255,255,0.72);
}
.assign-step-panel,
.assign-options-panel {
    display: grid;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(124, 58, 237, 0.12);
}
.assign-controls {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(190px, 0.7fr);
    gap: 12px;
}
.assign-controls.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}
.assign-options-panel .assign-controls.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.assign-params-panel {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(19, 118, 109, 0.12);
    border-radius: 8px;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 10px 28px rgba(25, 68, 61, 0.05);
}
.assign-params-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
}
.assign-params-head h2 {
    margin: 2px 0 0;
    font-size: 1rem;
    letter-spacing: 0;
}
.assign-params-head p:last-child {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 850;
    text-align: right;
}
.assign-params-table-wrap {
    overflow-x: auto;
}
.assign-params-table {
    display: grid;
    gap: 7px;
    min-width: 760px;
}
.assign-params-row {
    display: grid;
    grid-template-columns: minmax(210px, 1.5fr) minmax(230px, 1.35fr) minmax(110px, 0.65fr) minmax(180px, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid rgba(19, 118, 109, 0.1);
    border-radius: 8px;
    background: rgba(255,255,255,0.86);
}
.assign-progress-preview {
    margin: -3px 10px 6px;
    border-radius: 10px;
    color: var(--ink);
    background: rgba(244, 249, 247, 0.86);
}
.assign-progress-preview summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 860;
    list-style: none;
}
.assign-progress-preview summary::-webkit-details-marker { display: none; }
.assign-progress-preview summary:focus-visible {
    border-radius: 10px;
    outline: 3px solid rgba(19, 118, 109, 0.12);
}
.assign-progress-preview-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: 6px;
}
.assign-progress-preview-chips span {
    padding: 4px 7px;
    border-radius: 999px;
    color: rgba(24, 53, 47, 0.72);
    background: rgba(79, 96, 90, 0.08);
    font-size: 0.66rem;
    font-weight: 880;
}
.assign-progress-preview-chips .is-progress {
    color: #805c14;
    background: rgba(224, 172, 54, 0.14);
}
.assign-progress-preview-chips .is-finished {
    color: #116b58;
    background: rgba(19, 118, 109, 0.12);
}
.assign-progress-preview-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 11px 11px;
}
.assign-progress-preview-detail section {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    padding: 9px;
    border-radius: 9px;
    background: rgba(255,255,255,0.76);
}
.assign-progress-preview-detail section > strong {
    color: var(--muted);
    font-size: 0.68rem;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}
.assign-progress-preview-detail p {
    display: grid;
    gap: 2px;
    margin: 0;
}
.assign-progress-preview-detail p span { font-size: 0.74rem; font-weight: 850; }
.assign-progress-preview-detail p small { color: var(--muted); font-size: 0.66rem; font-weight: 720; }
.assign-params-header {
    padding: 0 10px 2px;
    border: 0;
    color: var(--muted);
    background: transparent;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.assign-params-cell {
    display: grid;
    gap: 7px;
    min-width: 0;
}
.assign-params-cell.task strong,
.assign-params-cell.task small {
    display: block;
}
.assign-params-cell.task strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 0.82rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.assign-params-cell.task small,
.assign-params-cell.date small {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 820;
}
.assign-params-cell select,
.assign-params-cell input,
.assign-params-cell .percentage-picker-trigger {
    width: 100%;
    min-height: 40px;
    padding: 0 11px;
    border: 1px solid rgba(72, 86, 78, 0.16);
    border-radius: 8px;
    color: var(--ink);
    background: white;
    font-size: 0.82rem;
    font-weight: 780;
    outline: none;
}
.assign-params-cell select:focus,
.assign-params-cell input:focus,
.assign-params-cell .percentage-picker-trigger:focus-visible {
    border-color: rgba(19, 118, 109, 0.34);
    box-shadow: 0 0 0 3px rgba(19, 118, 109, 0.08);
}
.assign-custom-date-controls {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: 7px;
}
.assign-custom-date-controls .assign-week-current-label {
    grid-column: 1 / -1;
    color: var(--accent-dark);
}
.assign-star-toggle.compact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 860;
}
.assign-star-toggle.compact input {
    width: 22px;
    height: 22px;
    min-height: 22px;
    padding: 0;
    accent-color: var(--accent);
}
.assign-star-disabled {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 850;
}
.assign-mastery-inline {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 850;
}
.assign-params-empty {
    padding: 12px;
    border: 1px dashed rgba(19, 118, 109, 0.18);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(255,255,255,0.62);
    font-size: 0.78rem;
    font-weight: 820;
}
.assign-controls label,
.assign-list-label,
.horizontal-form label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}
.assign-controls select,
.assign-controls input,
.assign-list-label select,
.horizontal-form input {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink);
    background: white;
}
.assign-controls select[multiple] {
    min-height: 146px;
    padding: 8px;
}
.assign-list-label select[multiple] {
    min-height: 190px;
    padding: 8px;
}
.assign-controls select[multiple] option {
    padding: 8px 9px;
    border-radius: 8px;
}
.assign-list-label select[multiple] option {
    padding: 9px;
    border-radius: 8px;
}
.assign-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px auto;
    gap: 10px;
    margin: 18px 0 10px;
}
.assign-toolbar.compact {
    margin: 0;
}
.assign-students-panel {
    display: grid;
    gap: 12px;
}
.assign-students-panel .assign-toolbar {
    grid-template-columns: minmax(0, 1fr) 210px;
    margin: 0;
}
.assign-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 4px 13px;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 750;
}
.assign-legend span { display: inline-flex; align-items: center; gap: 6px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; }
.status-dot.available { background: var(--accent); }
.status-dot.progress { background: #d09a4c; }
.status-dot.completed { background: var(--success); }
.candidate-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-height: min(460px, 58vh);
    overflow-y: auto;
}
.candidate-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,0.88);
    cursor: pointer;
}
.candidate-card.completed { border-color: #b8dcc9; background: #f4fbf7; }
.candidate-card.starred { border-color: #e1c56f; background: #fff9e5; }
.candidate-card.progress { border-color: #ecd7b8; background: #fffaf2; }
.candidate-card.disabled { cursor: not-allowed; opacity: 0.7; }
.candidate-card input { width: 18px; height: 18px; accent-color: var(--accent); }
.candidate-copy strong, .candidate-copy small, .candidate-status small { display: block; }
.candidate-copy small, .candidate-status small { margin-top: 3px; color: var(--muted); font-size: 0.7rem; }
.candidate-status { color: var(--accent-dark); font-size: 0.72rem; font-weight: 850; text-align: right; }
.candidate-card.progress .candidate-status { color: #8a622d; }
.candidate-card.starred .candidate-status { color: #8a6819; }
.assign-submit-bar {
    position: sticky;
    z-index: 4;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 16px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 12px 34px rgba(25, 68, 61, 0.12);
    backdrop-filter: blur(16px);
}
.assign-submit-bar span { color: var(--muted); font-size: 0.82rem; font-weight: 800; }
.assign-button { width: auto; min-width: 170px; padding: 0 18px; }
.assign-done-button {
    justify-self: end;
    width: auto;
    min-width: 112px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 12px;
}
.student-page-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}
.student-page-toolbar h2 { margin: 0; font-size: 1.55rem; }
.student-page-toolbar p { margin: 5px 0 0; color: var(--muted); font-size: 0.85rem; }
.compact-primary { width: auto; padding: 0 18px; }
.create-student-modal {
    position: fixed;
    inset: 0;
    z-index: 170;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(22, 30, 38, 0.28);
    backdrop-filter: blur(7px);
}
.create-student-modal[hidden] { display: none; }
.create-student-dialog {
    position: relative;
    width: min(760px, 100%);
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 20px;
    border: 1px solid rgba(124, 58, 237, 0.16);
    border-radius: 20px;
    background: rgba(255,255,255,0.98);
    box-shadow: 0 24px 70px rgba(21, 31, 43, 0.24);
}
.create-student-head {
    position: relative;
    justify-content: center;
    min-height: 38px;
    padding: 0 46px;
    text-align: center;
}
.create-student-head .student-subdialog-back {
    top: 0;
    left: 0;
    transform: none;
}
.create-student-head .student-subdialog-back:hover,
.create-student-head .student-subdialog-back:focus-visible { transform: none; }
.create-student-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(124, 58, 237, 0.28);
    border-radius: 999px;
    color: var(--accent-dark);
    background: var(--accent-soft);
    font-size: 1rem;
    font-weight: 950;
    line-height: 1;
}
.create-student-close:hover {
    color: white;
    background: var(--accent);
    box-shadow: 0 10px 22px rgba(124, 58, 237, 0.18);
}
.horizontal-form {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr 1fr auto;
    gap: 10px;
    align-items: end;
}
.horizontal-form .primary-button { width: auto; padding: 0 18px; }
.create-student-form {
    grid-template-columns: 1fr;
    gap: 10px;
}
.create-student-form label {
    display: grid;
    gap: 7px;
    color: var(--muted);
}
.create-student-form .primary-button {
    width: 100%;
    margin-top: 12px;
}
.create-student-success-modal {
    position: fixed;
    inset: 0;
    z-index: 176;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(22, 30, 38, 0.26);
    backdrop-filter: blur(7px);
}
.create-student-success-modal[hidden] { display: none; }
.create-student-success-card {
    display: grid;
    justify-items: center;
    gap: 12px;
    width: min(380px, 100%);
    padding: 28px 24px 24px;
    border: 1px solid rgba(35, 122, 82, 0.18);
    border-radius: 20px;
    background: rgba(255,255,255,0.98);
    box-shadow: 0 24px 70px rgba(21, 31, 43, 0.24);
    text-align: center;
}
.create-student-success-card h2 {
    margin: 4px 0 0;
    color: var(--ink);
    font-size: 1.32rem;
    letter-spacing: 0;
}
.create-student-success-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 780;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.create-student-success-card .primary-button {
    width: 100%;
    margin-top: 4px;
}
.success-checkmark {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    border-radius: 999px;
    background: var(--success-soft);
}
.success-checkmark svg {
    width: 54px;
    height: 54px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.success-checkmark-ring {
    stroke: rgba(35, 122, 82, 0.25);
    stroke-width: 2.5;
}
.success-checkmark-tick {
    stroke: var(--success);
    stroke-width: 4;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: draw-success-check 520ms ease-out 120ms forwards;
}
@keyframes draw-success-check {
    to { stroke-dashoffset: 0; }
}
.student-directory {
    display: grid;
    grid-template-columns: minmax(240px, 0.65fr) minmax(0, 1.35fr);
    gap: 14px;
    align-items: start;
}
.student-sidebar {
    display: grid;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: rgba(255,255,255,0.72);
}
.student-select-card {
    position: relative;
    z-index: 8;
    margin-bottom: 14px;
}
.student-select-card > .eyebrow { margin: 0 0 12px; }
.student-search-actions {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(150px, 1.1fr);
    gap: 8px;
    align-items: center;
    width: min(760px, 100%);
}
.student-mode-buttons {
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: 14px;
    background: rgba(255,255,255,0.74);
}
.student-mode-button {
    min-height: 34px;
    min-width: 78px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    color: var(--accent-dark);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 900;
}
.student-mode-button.active,
.student-mode-button:hover {
    color: white;
    background: var(--accent);
    box-shadow: 0 8px 18px rgba(124, 58, 237, 0.14);
}
.student-search-button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: var(--accent-dark);
    background: transparent;
}
.student-search-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.student-search-button:hover,
.student-search-button.active {
    color: white;
    background: var(--accent);
    box-shadow: 0 8px 18px rgba(124, 58, 237, 0.14);
}
.student-mode-buttons .student-picker-searchbar {
    position: static;
    min-width: 0;
    padding: 0;
    background: transparent;
}
.student-mode-buttons .student-picker-searchbar input {
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    box-shadow: none;
    font-size: 0.75rem;
}
.selected-student-pill {
    display: flex;
    align-items: center;
    min-height: 42px;
    min-width: 0;
    padding: 0 13px;
    border: 1px solid rgba(124, 58, 237, 0.16);
    border-radius: 12px;
    color: var(--ink);
    background: rgba(255,255,255,0.78);
    font-size: 0.78rem;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.selected-student-pill.empty {
    color: var(--muted);
    font-weight: 800;
}
.student-select-card .student-picker-shell {
    position: absolute;
    left: 20px;
    right: 20px;
    top: calc(100% - 10px);
    z-index: 20;
    display: none;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,0.98);
    box-shadow: 0 18px 46px rgba(83, 45, 145, 0.18);
    overflow: hidden;
}
.student-select-card.picker-open .student-picker-shell { display: grid; }
.student-select-card.picker-choose .student-picker-shell {
    left: 14px;
    right: 14px;
    max-height: min(520px, 68vh);
}
.student-select-card.picker-search .student-picker-shell {
    left: 20px;
    right: 20px;
    max-height: min(430px, 62vh);
}
.student-picker-searchbar {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-bottom: 8px;
    background: rgba(255,255,255,0.98);
}
.student-picker-searchbar input {
    min-height: 44px;
    border-color: rgba(124, 58, 237, 0.2);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.08);
}
.full-width { width: 100%; }
.student-picker {
    display: grid;
    gap: 7px;
    max-height: 680px;
    overflow-y: auto;
}
.student-select-card.picker-choose .student-picker {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    max-height: min(490px, 62vh);
}
.student-select-card.picker-search .student-picker {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    max-height: min(350px, 50vh);
}
.student-pick {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: var(--ink);
    background: transparent;
    text-align: left;
}
.student-select-card .student-pick {
    min-height: 70px;
    align-items: flex-start;
    padding: 10px;
    border-color: rgba(220,232,227,0.86);
    background: #f9fcfb;
}
.student-lookup-dialog .student-select-card .student-pick {
    min-height: 54px;
    align-items: center;
    padding: 10px 12px 10px 14px;
    border-color: rgba(31,45,38,0.08);
    border-radius: 14px;
    background: rgba(255,255,255,0.86);
}
.student-lookup-dialog .student-select-card .student-pick:hover,
.student-lookup-dialog .student-select-card .student-pick:focus-visible {
    border-color: rgba(124,58,237,0.24);
    background: #fff;
    box-shadow: 0 8px 22px rgba(83,45,145,0.08);
}
.student-pick-chevron {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: rgba(24,53,47,0.42);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.student-select-card .student-pick.compact {
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-color: rgba(124, 58, 237, 0.14);
    background: #fbf9ff;
    text-align: center;
}
.student-pick:hover { background: white; }
.student-pick.active {
    border-color: rgba(124, 58, 237, 0.38);
    background: white;
    box-shadow: 0 7px 20px rgba(83,45,145,0.10);
}
.student-pick.incomplete-profile { cursor: default; border-color: #efc9c3; background: var(--danger-soft); }
.student-pick strong, .student-pick small { display: block; }
.student-pick small { margin-top: 3px; color: var(--muted); font-size: 0.7rem; }
.student-pick i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.account-active { background: var(--success); }
.account-inactive { background: var(--danger); }
.student-detail { display: grid; gap: 12px; }
.student-profile-card, .student-progress-card { min-height: 160px; }
.student-profile-summary {
    display: grid;
    grid-template-columns: minmax(220px, 1.25fr) minmax(360px, 1.75fr);
    align-items: center;
    gap: 12px;
    min-height: 0;
}
.student-identity-capsule {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 62px;
    padding: 10px 14px;
    border: 1px solid rgba(124,58,237,0.15);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(247,243,255,0.76));
}
.student-identity-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}
.student-identity-copy strong,
.student-identity-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.student-identity-copy strong {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 950;
}
.student-identity-copy small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 760;
}
.student-summary-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}
.student-summary-capsule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 62px;
    padding: 9px 10px;
    border: 1px solid rgba(31,45,38,0.08);
    border-radius: 18px;
    color: var(--ink);
    background: rgba(255,255,255,0.78);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.student-summary-capsule svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.student-summary-capsule > span { display: grid; min-width: 0; gap: 2px; }
.student-summary-capsule strong,
.student-summary-capsule small { display: block; min-width: 0; }
.student-summary-capsule strong {
    color: var(--ink);
    font-size: 0.94rem;
    font-weight: 950;
    white-space: nowrap;
}
.student-summary-capsule small {
    color: var(--muted);
    font-size: 0.61rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.student-summary-capsule.is-star { color: #c48b00; background: rgba(255,249,224,0.78); }
.student-summary-capsule.is-completed { color: #258067; background: rgba(239,250,246,0.82); }
.student-summary-capsule.is-account { color: var(--accent-dark); background: rgba(247,243,255,0.78); }
.student-summary-capsule:hover,
.student-summary-capsule:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(124,58,237,0.28);
    background: #fff;
    box-shadow: 0 9px 22px rgba(83,45,145,0.08);
    outline: 3px solid rgba(124,58,237,0.10);
    outline-offset: 2px;
}
.student-summary-capsule:active { transform: scale(0.97); }
.student-detail,
.student-detail > *,
.student-info-grid,
.student-info-item { min-width: 0; }
.student-calendar-card > .eyebrow { margin: 0 0 14px; }
.student-calendar-card .matrix-student-progress-board { margin-top: 0; }
.student-info-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.student-info-head .eyebrow { margin: 0; }
.student-info-name {
    margin: 0;
    color: var(--ink);
    font-size: 1.18rem;
    letter-spacing: -0.02em;
    text-align: center;
}
.student-info-edit {
    position: relative;
    width: 100%;
    min-height: 54px;
    padding: 0 64px 0 0;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.student-info-edit::after {
    content: attr(data-info-action);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    padding: 5px 8px;
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: 999px;
    color: var(--accent-dark);
    background: rgba(255,255,255,0.78);
    font-size: 0.65rem;
    font-weight: 900;
    text-transform: uppercase;
}
.student-info-edit:hover::after,
.student-info-edit:focus-visible::after {
    border-color: rgba(124, 58, 237, 0.34);
    background: white;
}
.student-info-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 7px;
    align-items: center;
    margin-top: 10px;
}
.student-info-editor input,
.student-info-editor select {
    min-width: 0;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(124,58,237,0.22);
    border-radius: 9px;
    background: white;
    color: var(--ink);
    font: inherit;
}
.student-info-editor button {
    min-height: 36px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 900;
}
.empty-check-card h2 { margin: 0 0 8px; }
.student-detail-heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.student-detail-heading h2 { margin: 0; }
.student-detail-heading p:not(.eyebrow) { margin: 5px 0 0; color: var(--muted); }
.student-profile-card > .eyebrow,
.student-progress-card > .eyebrow { margin: 0 0 14px; }
.student-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
.student-info-item {
    min-height: 70px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #f8fbfa;
}
.student-info-item span,
.student-info-item strong { display: block; }
.student-info-item span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}
.student-info-item strong {
    margin-top: 7px;
    color: var(--ink);
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}
.student-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 7px;
}
.student-meta > span {
    display: inline-flex;
    align-items: center;
}
.student-meta > span + span::before {
    content: "·";
    margin-right: 7px;
    color: var(--muted);
}
.system-tag {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    vertical-align: middle;
}
.student-account-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.student-account-actions button {
    min-height: 40px;
    border-radius: 10px;
}
.student-account-actions button { padding: 0 11px; font-size: 0.75rem; font-weight: 800; }
.student-summary { margin: 14px 0; }
.student-summary .summary-card {
    position: relative;
    overflow: visible;
    border: 1px solid rgba(124, 58, 237, 0.18);
    background: rgba(255,255,255,0.86);
    cursor: pointer;
}
.student-summary .progress-status-filter.active {
    color: var(--ink);
    border-color: rgba(124, 58, 237, 0.36);
    background: var(--accent-soft);
    box-shadow: 0 10px 28px rgba(83, 45, 145, 0.12), inset 0 0 0 2px rgba(255,255,255,0.9);
    transform: translateY(-1px);
}
.student-summary .progress-status-filter.active .summary-label { color: var(--muted); }
.student-summary .progress-status-filter .summary-value { color: var(--accent-dark); }
.student-summary .progress-status-filter .notice-dot {
    top: -9px;
    right: -6px;
}
.progress-mode-tabs {
    display: inline-flex;
    gap: 5px;
    margin: 0 0 2px;
    padding: 4px;
    border: 1px solid rgba(220,232,227,0.92);
    border-radius: 999px;
    background: #f8fbfa;
}
.progress-mode-tab {
    min-width: 104px;
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    color: var(--muted);
    background: transparent;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0;
    cursor: pointer;
}
.progress-mode-tab.active {
    color: #7a5528;
    background: #fff1da;
    box-shadow: 0 6px 18px rgba(202, 103, 2, 0.12);
}
.progress-mode-tab:nth-child(2).active {
    color: var(--success);
    background: var(--success-soft);
}
.learning-section { margin-top: 14px; }
.learning-section h3 { margin: 0 0 10px; }
.learning-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}
.learning-row:last-child { border-bottom: 0; }
.learning-row strong, .learning-row small { display: block; }
.learning-row small { margin-top: 3px; color: var(--muted); font-size: 0.72rem; }
.learning-row > span { color: var(--muted); font-size: 0.78rem; font-weight: 800; text-align: right; }
.learning-row .score-pass { color: var(--success); }
.learning-row .score-fail { color: var(--danger); }
.attempt-row strong { margin-bottom: 3px; }
.attempt-set-list { display: grid; gap: 10px; }
.attempt-set-capsule {
    overflow: hidden;
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: 16px;
    background: rgba(255,255,255,0.82);
}
.attempt-set-capsule.expanded {
    border-color: rgba(124, 58, 237, 0.36);
    background: white;
    box-shadow: 0 12px 30px rgba(83,45,145,0.10);
}
.attempt-set-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 13px;
    border: 0;
    color: var(--ink);
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.attempt-set-head strong,
.attempt-set-head small,
.attempt-detail-head strong,
.attempt-detail-head small {
    display: block;
}
.attempt-set-head small,
.attempt-detail-head small,
.wrong-question small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.71rem;
}
.attempt-set-head > span:last-child {
    min-width: 76px;
    text-align: right;
    font-size: 0.82rem;
    font-weight: 900;
}
.assignment-best-score { color: var(--accent-dark); }
.attempt-set-head > span:last-child small {
    color: inherit;
    opacity: 0.78;
}
.attempt-detail-list {
    display: grid;
    gap: 9px;
    padding: 0 13px 13px;
}
.attempt-detail-row {
    padding: 11px;
    border: 1px solid rgba(124, 58, 237, 0.14);
    border-radius: 13px;
    background: #fbf9ff;
}
.attempt-detail-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}
.attempt-detail-head > span,
.attempt-detail-actions > span:last-child {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-align: right;
}
.attempt-detail-actions {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 7px;
}
.answer-reveal-badge {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 900;
    white-space: nowrap;
}
.answer-reveal-badge.locked {
    color: #7a5528;
    background: #fff1da;
}
.answer-reveal-badge.fresh {
    color: var(--success);
    background: var(--success-soft);
}
.answer-reveal-badge.neutral {
    color: var(--muted);
    background: rgba(72, 86, 78, 0.08);
}
.latest-answer-panel {
    display: grid;
    gap: 7px;
    margin-top: 11px;
    padding: 11px;
    border: 1px solid rgba(124, 58, 237, 0.14);
    border-radius: 12px;
    background: rgba(255,255,255,0.82);
}
.latest-answer-panel.empty,
.latest-answer-panel.all-correct {
    color: var(--success);
    background: var(--success-soft);
}
.latest-answer-panel p {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 850;
}
.latest-answer-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
}
.latest-answer-head strong,
.latest-answer-head small {
    display: block;
}
.latest-answer-head strong {
    color: var(--ink);
    font-size: 0.82rem;
}
.latest-answer-head small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
}
.latest-answer-head > span {
    color: var(--accent-dark);
    font-size: 0.8rem;
    font-weight: 950;
    white-space: nowrap;
}
.latest-answer-grid {
    display: grid;
    grid-template-columns: minmax(58px, .42fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
}
.latest-answer-grid > span {
    min-width: 0;
    padding: 8px 9px;
    border-radius: 8px;
    color: var(--ink);
    background: rgba(247, 246, 255, 0.86);
    font-size: 0.74rem;
    font-weight: 820;
    overflow-wrap: anywhere;
}
.latest-answer-grid-head > span {
    color: var(--muted);
    background: transparent;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 0.68rem;
    text-transform: uppercase;
}
.latest-answer-grid .student-answer {
    color: #8a341f;
    background: #fff1e8;
}
.latest-answer-grid .correct-answer {
    color: var(--success);
    background: var(--success-soft);
}
.wrong-summary {
    margin: 8px 0 7px;
    color: var(--accent-dark);
    font-size: 0.76rem;
    font-weight: 800;
}
.attempt-history-empty {
    margin-top: 10px;
    padding: 11px;
    border: 1px dashed rgba(124, 58, 237, 0.22);
    border-radius: 12px;
    color: var(--muted);
    background: rgba(255,255,255,0.72);
    font-size: 0.78rem;
    font-weight: 750;
}
.attempt-trend {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(44px, 1fr);
    align-items: end;
    gap: 8px;
    min-height: 132px;
    margin-top: 12px;
    padding: 12px 10px 8px;
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 12px;
    background:
        linear-gradient(to top, rgba(124, 58, 237, 0.08) 1px, transparent 1px) 0 0 / 100% 25%,
        rgba(255,255,255,0.72);
    overflow-x: auto;
}
.attempt-trend-point {
    display: grid;
    grid-template-rows: 22px 76px 18px;
    align-items: end;
    justify-items: center;
    min-width: 42px;
}
.attempt-trend-value {
    color: var(--accent-dark);
    font-size: 0.68rem;
    font-weight: 900;
}
.attempt-trend-bar {
    width: 18px;
    min-height: 6px;
    border-radius: 999px 999px 5px 5px;
    background: linear-gradient(180deg, #a78bfa, var(--accent-dark));
    box-shadow: 0 8px 18px rgba(91, 33, 182, 0.14);
}
.attempt-trend-point.best .attempt-trend-bar {
    background: linear-gradient(180deg, #f0abfc, var(--accent));
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.24);
}
.attempt-trend-label {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 850;
}
.attempt-history-list {
    display: grid;
    gap: 7px;
    margin-top: 9px;
}
.attempt-history-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid rgba(124, 58, 237, 0.12);
    border-radius: 11px;
    background: white;
}
.attempt-history-main strong,
.attempt-history-main small,
.attempt-history-score strong,
.attempt-history-score small {
    display: block;
}
.attempt-history-main strong,
.attempt-history-score strong {
    color: var(--ink);
    font-size: 0.79rem;
}
.attempt-history-main small,
.attempt-history-score small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.69rem;
    font-weight: 750;
}
.attempt-history-score { text-align: right; }
.attempt-wrong-list {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(124,58,237,0.09);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
}
.attempt-wrong-list strong {
    width: 100%;
    color: var(--ink);
    font-size: 0.74rem;
}
.attempt-wrong-list span {
    display: inline-flex;
    gap: 5px;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    color: #8a341f;
    background: #fff1e8;
}
.attempt-wrong-list.ok {
    color: var(--success);
}
.attempt-all-correct {
    margin: 9px 0 0;
    color: var(--success);
    font-size: 0.76rem;
    font-weight: 800;
}
.wrong-question-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 7px;
    margin-top: 8px;
}
.wrong-question {
    padding: 9px;
    border-radius: 11px;
    background: white;
    border: 1px solid rgba(239, 201, 195, 0.72);
}
.wrong-question strong { display: block; color: var(--danger); font-size: 0.78rem; }
.wrong-question p { margin: 4px 0 0; color: var(--ink); font-size: 0.76rem; line-height: 1.4; }
.review-shell { max-width: 900px; }
.review-back { color: var(--ink); text-decoration: none; }
.review-hero { margin-bottom: 20px; }
.review-list { display: grid; gap: 12px; }
.review-answer {
    padding: 20px;
    border: 2px solid transparent;
    border-radius: 20px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 10px 28px rgba(25,68,61,0.055);
}
.review-answer.correct { border-color: #72bf91; background: #f1fbf5; }
.review-answer.wrong { border-color: #e1b75c; background: #fff9e9; }
.review-answer h2 { margin: 7px 0; font-size: 1rem; }
.review-answer p { margin: 0; color: var(--ink); white-space: pre-wrap; }
.review-status { color: var(--muted); font-size: 0.72rem; font-weight: 850; text-transform: uppercase; }
.sub-tabs {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 8px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255,255,255,0.72);
    box-shadow: 0 10px 24px rgba(83,45,145,0.07);
}
.revise-tabs { margin-bottom: 14px; }
.revise-tabs .revise-filter {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-content: center;
    justify-items: center;
    gap: 5px;
    min-height: 64px;
    padding: 10px 16px;
    color: var(--ink);
    text-align: center;
}
.revise-tabs .summary-label { display: block; color: inherit; font-size: 0.82rem; letter-spacing: 0.04em; }
.review-status-count {
    display: block;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1;
}
.review-pending-count {
    top: -8px;
    right: -5px;
    box-shadow: 0 7px 16px rgba(181, 71, 71, 0.22);
}
.sub-tab {
    position: relative;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    color: var(--muted);
    background: transparent;
    font-weight: 900;
}
.sub-tab.active { color: #fff; background: var(--accent); }
.notice-dot {
    position: absolute;
    top: -7px;
    right: -3px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: var(--danger);
    font-size: 0.68rem;
    line-height: 1;
}
.notice-dot.success { background: var(--danger); }
.notice-dot.danger { background: var(--danger); }
.notice-dot[hidden] { display: none; }
.dispute-list { display: grid; gap: 12px; }
.review-merge-toggle {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(124,58,237,0.22);
    border-radius: 999px;
    color: var(--accent-dark);
    background: rgba(255,255,255,0.86);
    font-size: 0.74rem;
    font-weight: 900;
    cursor: pointer;
}
.review-merge-toggle.active {
    color: white;
    border-color: transparent;
    background: var(--accent);
}
.dispute-merge-card { padding: 0; overflow: hidden; }
.dispute-merge-head {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 18px 20px;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.dispute-merge-head:hover { background: rgba(124,58,237,0.055); }
.dispute-merge-head strong,
.dispute-merge-head small { display: block; }
.dispute-merge-head small { margin-top: 4px; color: var(--muted); font-size: 0.76rem; }
.dispute-merge-viz {
    display: grid;
    gap: 10px;
    padding: 0 20px 18px;
}
.merge-bars { display: grid; gap: 8px; }
.merge-bar-row {
    display: grid;
    grid-template-columns: minmax(80px, .45fr) minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 850;
}
.merge-bar-track {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(124,58,237,0.10);
}
.merge-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, #6d28d9, #8b5cf6 58%, #60a5fa);
}
.dispute-card { padding: 0; overflow: hidden; }
.dispute-card.approved, .dispute-card.rejected { opacity: 0.82; }
.dispute-card.intensive-spelling-card { border-color: rgba(23,108,88,.26); background: linear-gradient(135deg, rgba(234,248,242,.96), rgba(255,255,255,.96)); box-shadow: 0 14px 38px rgba(23,108,88,.09); opacity: 1; }
.intensive-spelling-capsule { width: 100%; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 17px 19px; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.intensive-spelling-capsule:hover { background: rgba(23,108,88,.055); }
.intensive-wave-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; gap: 3px; border-radius: 50%; color: #fff; background: #176c58; box-shadow: 0 8px 18px rgba(23,108,88,.18); }
.intensive-wave-icon i { width: 3px; border-radius: 999px; background: currentColor; }
.intensive-wave-icon i:nth-child(1), .intensive-wave-icon i:nth-child(3) { height: 12px; }
.intensive-wave-icon i:nth-child(2) { height: 22px; }
.intensive-spelling-summary { min-width: 0; display: grid; gap: 2px; }
.intensive-spelling-summary small { color: #176c58; font-size: .66rem; font-weight: 900; letter-spacing: .1em; }
.intensive-spelling-summary strong { overflow: hidden; color: #0d3f34; font-size: 1.35rem; line-height: 1.15; text-overflow: ellipsis; }
.intensive-spelling-summary span { overflow: hidden; color: var(--muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.intensive-spelling-status { max-width: 12rem; padding: 6px 9px; border-radius: 999px; color: #7a5528; background: #fff1da; font-size: .68rem; font-weight: 850; text-align: center; }
.intensive-spelling-status.approved { color: #176c58; background: #dff3ea; }
.intensive-spelling-status.rejected { color: #5f6e69; background: #eaf0ed; }
.intensive-spelling-body { padding: 0 19px 19px; }
.intensive-spelling-detail { padding: 18px; border-color: rgba(23,108,88,.18); background: rgba(255,255,255,.76); }
.intensive-spelling-context { display: flex; flex-wrap: wrap; gap: 7px; }
.intensive-spelling-context span { padding: 5px 8px; border-radius: 999px; color: #47645b; background: #e8f3ef; font-size: .7rem; font-weight: 800; }
.intensive-target-word { margin: 18px 0 12px; display: grid; justify-items: center; }
.intensive-target-word span { color: var(--muted); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.intensive-target-word strong { margin-top: 3px; color: #0d3f34; font-size: clamp(2rem,5vw,3rem); line-height: 1; overflow-wrap: anywhere; }
.intensive-sentence { margin: 0; padding: 16px; border-radius: 14px; color: #19362f; background: #edf7f3; font-size: 1rem; line-height: 1.65; text-align: center; overflow-wrap: anywhere; }
.intensive-sentence mark { padding: 2px 4px; border-radius: 5px; color: #0d3f34; background: #bfe8d8; font-weight: 900; }
.intensive-sentence.missing { color: var(--muted); }
.intensive-audio-preview { min-height: 40px; margin: 12px auto 0; padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(23,108,88,.24); border-radius: 999px; color: #176c58; background: #fff; font-size: .76rem; font-weight: 850; cursor: pointer; }
.intensive-audio-preview.playing { color: #fff; background: #176c58; }
.intensive-student-note { margin: 16px 0 10px; padding: 12px 13px; border-radius: 12px; background: #f7faf9; }
.intensive-impact-note { margin: 10px 0 0; color: #8a5a17; font-size: .75rem; text-align: center; }
.intensive-dispute-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.intensive-dispute-actions button { min-height: 44px; padding: 8px 12px; border-radius: 12px; font-size: .77rem; font-weight: 850; cursor: pointer; }
.intensive-keep-button { border: 1px solid rgba(23,108,88,.2); color: #294c43; background: #fff; }
.intensive-provide-button { border: 0; color: #fff; background: #176c58; }
.intensive-provide-button.confirming { color: #553500; background: #f4c96b; }
.intensive-decision-result { margin-top: 14px; padding: 13px; display: grid; gap: 3px; border-radius: 12px; color: #40534d; background: #edf2f0; text-align: center; }
.intensive-decision-result.provide { color: #176c58; background: #dff3ea; }
.intensive-decision-result span { font-size: .76rem; }
.dispute-capsule {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: start;
    padding: 18px 20px;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.dispute-capsule:hover { background: rgba(124,58,237,0.055); }
.dispute-capsule-copy strong, .dispute-capsule-copy small, .dispute-capsule-meta small { display: block; }
.dispute-capsule-copy strong { font-size: 1.02rem; }
.dispute-capsule-copy small, .dispute-capsule-meta small { margin-top: 4px; color: var(--muted); font-size: 0.76rem; }
.dispute-capsule-meta { display: grid; justify-items: end; gap: 4px; }
.badge.pending { color: #7a5528; background: #fff1da; }
.badge.resolved { color: var(--success); background: var(--success-soft); }
.badge.approved { color: var(--success); background: var(--success-soft); }
.badge.rejected { color: var(--danger); background: var(--danger-soft); }
.badge.dispute-status.pending { color: #7a5528; background: #fff1da; }
.badge.dispute-status.approved { color: var(--success); background: var(--success-soft); }
.badge.dispute-status.rejected { color: var(--danger); background: var(--danger-soft); }
.dispute-group-detail { display: grid; gap: 12px; padding: 0 20px 20px; }
.dispute-detail {
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,0.72);
}
.dispute-detail.resolved { background: #f8fbfa; }
.dispute-detail-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}
.dispute-detail-head strong, .dispute-detail-head small { display: block; }
.dispute-detail-head small { margin-top: 3px; color: var(--muted); font-size: 0.72rem; }
.dispute-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.dispute-comparison div { padding: 13px; border-radius: 13px; background: #f6faf8; }
.dispute-comparison span, .dispute-comparison strong { display: block; }
.dispute-comparison span { color: var(--muted); font-size: 0.72rem; }
.dispute-comparison strong { margin-top: 5px; overflow-wrap: anywhere; }
.dispute-question-text { margin: 14px 0 0; padding: 13px; border-radius: 13px; background: #edf3f0; font-style: italic; color: var(--text); overflow-wrap: anywhere; }
.dispute-explanation { margin: 12px 0 0; padding: 13px; border-radius: 13px; background: #fef8e7; overflow-wrap: anywhere; }
.dispute-question-text.missing, .dispute-explanation.missing { color: var(--muted); }
.dispute-explanation strong { display: block; margin-bottom: 4px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.dispute-reason { color: var(--muted); }
.dispute-note { width: 100%; min-height: 72px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; resize: vertical; }
.dispute-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.dispute-actions button { min-height: 42px; padding: 7px 10px; border-radius: 11px; font-size: 0.75rem; font-weight: 800; }
@media (max-width: 620px) {
    .intensive-spelling-capsule { grid-template-columns: auto minmax(0,1fr); }
    .intensive-spelling-status { grid-column: 2; justify-self: start; }
    .intensive-spelling-summary span { white-space: normal; }
    .intensive-dispute-actions { grid-template-columns: 1fr; }
}
.data-placeholder {
    padding: clamp(34px, 7vw, 76px);
    border: 1px solid var(--line);
    border-radius: 26px;
    background: rgba(255,255,255,0.84);
    text-align: center;
}
.data-placeholder h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -0.045em; }
.data-placeholder > p:not(.eyebrow) { max-width: 650px; margin: 14px auto; color: var(--muted); }
.data-path { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.data-path span { padding: 10px 14px; border-radius: 999px; color: var(--accent-dark); background: var(--accent-soft); font-weight: 800; }
.data-path strong { align-self: center; color: var(--muted); }

.empty-card { text-align: center; padding: 34px 20px; color: var(--muted); }
.empty-card strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 1.05rem; }
.loading-card { animation: pulse 1.3s ease-in-out infinite; }

@keyframes pulse { 50% { opacity: 0.55; } }

@media (max-width: 760px) {
    .student-words-overlay,
    .student-calendar-overlay,
    .student-message-overlay {
        place-items: center;
        padding: max(14px, env(safe-area-inset-top)) 10px max(14px, env(safe-area-inset-bottom));
        background: rgba(17,38,34,0.27);
    }
    .student-words-stack,
    .student-calendar-stack {
        width: 100%;
        height: min(700px, 84vh);
        height: min(700px, 84dvh);
        min-height: 0;
    }
    .liquid-glass-dashboard .dashboard-words-scan-overlay {
        padding: max(14px, env(safe-area-inset-top)) 10px max(14px, env(safe-area-inset-bottom));
    }
    .liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-shell {
        width: 100%;
        height: min(700px, 84vh);
        height: min(700px, 84dvh);
        padding: 66px 13px 13px;
        border-radius: 25px;
    }
    .liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-header {
        top: 12px;
        right: 12px;
    }
    .liquid-glass-dashboard .dashboard-words-scan-overlay .my-words-scan-photo-drop {
        padding: 20px 15px;
        border-radius: 20px;
    }
    .student-words-dialog {
        width: 100%;
        border-radius: 25px;
    }
    .student-words-dialog-head { padding: 15px 14px 12px 17px; }
    .student-words-dialog-icon { width: 40px; height: 40px; }
    .my-words-manual { padding-inline: 14px; }
    .my-words-search-wrap { padding-inline: 12px; }
    .student-words-dialog-scroll { padding-inline: 14px; }
    .student-calendar-dialog { border-radius: 25px; }
    .student-calendar-scroll { padding: 12px 12px 17px; }
    .student-calendar-weekdays,
    .student-calendar-grid { gap: 4px; }
    .student-calendar-day,
    .student-calendar-day-empty { border-radius: 11px; }
    .student-calendar-day { font-size: 0.73rem; }
    .student-calendar-day-star { right: 4px; bottom: 3px; font-size: 0.52rem; }
    .auth-page { padding: 12px; }
    .auth-shell { grid-template-columns: 1fr; min-height: auto; border-radius: 25px; }
    .brand-panel { min-height: 0; padding: 28px 22px 30px; }
    .brand-quote { max-width: 330px; }
    .brand-quote p { font-size: 2.25rem; }
    .paper-brand { font-size: 0.86rem; }
    .login-card { padding: 32px 24px; }
    .app-header { padding-top: 20px; }
    .student-library-dock { width: min(330px, 100%); }
    .identity-cluster { flex-wrap: wrap; justify-content: flex-end; }
    .account-panel {
        left: 14px;
        right: 14px;
        top: 72px;
        width: auto;
    }
    .student-account-overlay,
    .student-star-overlay,
    .password-dialog-overlay,
    .logout-confirm-overlay {
        inset: 0;
        width: auto;
        padding: max(14px, env(safe-area-inset-top)) 10px max(14px, env(safe-area-inset-bottom));
    }
    .student-account-stack,
    .student-star-stack,
    .password-dialog-stack { width: 100%; }
    .logout-confirm-stack { width: min(320px, calc(100% - 32px)); }
    .student-message-shell.is-account-finished { width: 100%; }
    .student-message-dialog.is-account-finished { padding: 15px 14px; border-radius: 25px; }
    .student-account-dialog,
    .student-star-dialog,
    .password-dialog { padding: 15px 14px; border-radius: 25px; }
    .teacher-header-actions { flex-wrap: wrap; }
    .teacher-updates-panel {
        padding: 12px;
    }
    .teacher-updates-shell {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }
    .updates-panel-head { align-items: center; }
    .activity-row {
        grid-template-columns: auto minmax(0, 1fr) max-content;
        gap: 6px 9px;
    }
    .activity-score { min-width: 52px; padding: 0 9px; }
    .hero-card { border-radius: 24px; }
    .student-progress-hero {
        margin-right: -12px;
        margin-left: -12px;
        padding: 12px;
        border-radius: 22px;
    }
    .hero-progress-head { margin-bottom: 16px; }
    .hero-progress-stats {
        padding: 12px;
    }
    .hero-meter-row {
        align-items: center;
    }
    .progress-board {
        grid-template-columns: 1fr;
    }
    .progress-map-panel,
    .progress-detail-panel {
        min-height: 0;
        padding: 10px;
    }
    .matrix-student-progress-board .progress-map-panel,
    .matrix-student-progress-board .progress-detail-panel {
        min-height: 0;
        padding: 10px;
    }
    .progress-detail-panel {
        border-left: 0;
        border-top: 1px solid rgba(19,118,109,0.1);
    }
    .progress-dot-map {
        grid-template-columns: 36px repeat(7, minmax(0, 1fr));
        gap: clamp(5px, 1.6vw, 8px);
        width: 100%;
        padding-top: 5px;
        padding-bottom: 8px;
    }
    .progress-dot-map span,
    .progress-week-button {
        font-size: 0.68rem;
    }
    .progress-dot,
    .progress-dot-map i {
        width: clamp(20px, 6.3vw, 24px);
        height: clamp(20px, 6.3vw, 24px);
        border-radius: 6px;
    }
    .progress-detail-task {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding: 11px 12px;
        border-radius: 14px;
    }
    .progress-detail-task strong {
        font-size: 0.94rem;
    }
    .progress-task-meta {
        align-self: end;
    }
    .progress-task-type,
    .progress-task-score {
        min-height: 24px;
        padding: 3px 7px;
        font-size: 0.64rem;
    }
    .summary-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .revise-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .revise-tabs .summary-card { padding: 12px 6px; }
    .revise-tabs .summary-label { font-size: 0.68rem; }
    .summary-card { padding: 14px 10px; }
    .summary-value { font-size: 1.45rem; }
    .account-quiet-footer {
        align-items: center;
        justify-content: flex-end;
    }
    .account-quiet-actions {
        justify-content: flex-end;
    }
    .resource-card { grid-template-columns: 1fr; }
    .card-button { width: 100%; }
    .task-card .task-go-button {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: center;
        width: 46px;
        min-width: 46px;
        min-height: 46px;
        padding: 0;
        border-radius: 999px;
    }
    .task-card > .reply-button {
        grid-column: 1 / -1;
    }
    .profile-grid { grid-template-columns: 1fr; }
    .my-word-toggle { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
    .my-word-chinese { font-size: 0.77rem; }
    .password-dialog { padding: 15px 14px; }
    .practice-entry-overlay { padding: 18px; }
    .practice-entry-card {
        padding: 28px 20px 0;
        border-radius: 26px;
    }
    .practice-entry-ribbon {
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
        border-radius: 0 0 26px 26px;
    }
    .teacher-replies-card { grid-template-columns: 1fr; }
    .teacher-replies-card .primary-button { width: auto; }
    .teacher-replies-dialog { padding: 22px 18px; }
    .student-message-dialog:not(.is-focused-scope) { padding: 0; }
    .student-message-dialog:not(.is-focused-scope) .student-message-tabs {
        padding-right: 18px;
        padding-left: 18px;
    }
    .student-message-dialog:not(.is-focused-scope) .student-message-tab-panel {
        padding-right: 18px;
        padding-bottom: 18px;
        padding-left: 18px;
    }
    .student-message-tab { gap: 5px; padding: 7px 6px; font-size: 0.74rem; }
    .student-message-dialog:not(.is-focused-scope) .student-message-section.is-collapsible > summary {
        margin-right: -18px;
        margin-left: -18px;
        padding-right: 18px;
        padding-left: 18px;
    }
    .student-message-task { min-height: 50px; }
    .student-message-kicker { max-width: 72px; }
    .teacher-reply-flow { flex-direction: column; }
    .teacher-reply-answer { width: 100%; }
    .dialog-actions { grid-template-columns: 1fr; }
    .teacher-grid { grid-template-columns: 1fr; }
    .teacher-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .assign-controls,
    .assign-controls.compact,
    .assign-options-panel .assign-controls.compact,
    .assign-toolbar,
    .assign-toolbar.compact,
    .assign-minimal-grid,
    .assign-minimal-controls,
    .horizontal-form,
    .student-directory { grid-template-columns: 1fr; }
    .assign-params-table { min-width: 0; }
    .assign-params-row {
        grid-template-columns: 1fr;
    }
    .assign-progress-preview { margin-inline: 0; }
    .assign-progress-preview summary { align-items: start; flex-direction: column; }
    .assign-progress-preview-chips { justify-content: start; }
    .assign-progress-preview-detail { grid-template-columns: 1fr; }
    .assign-params-header { display: none; }
    .assign-custom-date-controls {
        grid-template-columns: 1fr;
    }
    .assign-params-head {
        align-items: start;
        flex-direction: column;
    }
    .assign-params-head p:last-child { text-align: left; }
    .assign-picker-card { min-height: 0; }
    .candidate-grid { grid-template-columns: 1fr; }
    .assign-submit-bar {
        align-items: stretch;
        flex-direction: column;
        bottom: 8px;
    }
    .assign-button,
    .assign-done-button { width: 100%; }
    .assign-picker-modal {
        align-items: end;
        padding: 12px;
    }
    .assign-picker-dialog {
        width: 100%;
        max-height: 92vh;
        padding: 16px;
        border-radius: 18px;
    }
    .assign-picker-dialog-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .assign-picker-dialog-actions span { text-align: center; }
    .student-page-toolbar { align-items: stretch; flex-direction: column; }
    .compact-primary { width: 100%; }
    .create-student-modal {
        align-items: end;
        padding: 12px;
    }
    .create-student-dialog {
        padding: 18px;
        border-radius: 18px;
    }
    .create-student-success-modal {
        align-items: end;
        padding: 12px;
    }
    .create-student-success-card {
        width: 100%;
        padding: 24px 18px 18px;
        border-radius: 18px;
    }
    .student-lookup-modal {
        align-items: end;
        padding: 12px;
    }
    .student-lookup-stage {
        width: 100%;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        gap: 8px;
    }
    .student-lookup-dialog {
        max-height: calc(100vh - 76px);
        max-height: calc(100dvh - 76px);
        border-radius: 18px;
    }
    .student-lookup-head .student-lookup-searchbar {
        grid-template-columns: minmax(0, 1fr) 112px;
        gap: 6px;
    }
    .student-search-actions { grid-template-columns: 1fr; }
    .student-mode-buttons {
        width: 100%;
    }
    .selected-student-pill { min-width: 0; }
    .student-select-card .student-picker-shell { left: 14px; right: 14px; }
    .student-select-card.picker-choose .student-picker,
    .student-select-card.picker-search .student-picker {
        grid-template-columns: 1fr;
    }
    .student-account-actions { justify-content: stretch; }
    .student-account-actions button { flex: 1 1 140px; }
    .student-profile-summary {
        grid-template-columns: 1fr;
    }
    .student-identity-capsule { justify-content: flex-start; }
    .student-summary-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .student-summary-capsule { gap: 5px; padding-right: 6px; padding-left: 6px; }
    .student-summary-capsule svg { width: 19px; height: 19px; }
    .student-summary-capsule strong { font-size: 0.82rem; }
    .student-summary-capsule small { font-size: 0.54rem; }
    .progress-weekday-row { margin-left: 39px; }
    .progress-week-band {
        grid-template-columns: 31px minmax(0, 1fr);
        gap: 3px;
        padding: 4px;
        border-radius: 12px;
    }
    .progress-week-days { gap: 3px; }
    .progress-week-band .progress-dot {
        height: 34px;
        border-radius: 9px;
        font-size: 0.67rem;
    }
    .progress-week-band .progress-week-button { font-size: 0.62rem; }
    .student-info-head { grid-template-columns: 1fr; text-align: center; }
    .student-info-head .eyebrow { justify-self: center; }
    .student-info-editor { grid-template-columns: 1fr; }
    .progress-matrix-card { padding: 9px; }
    .progress-matrix-title { align-items: start; flex-direction: column; }
    .progress-matrix-tools {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        width: 100%;
        overflow: visible;
    }
    .matrix-class-filter,
    .matrix-column-filter,
    .matrix-date-filter {
        min-width: 0;
        width: 100%;
        max-width: none;
        padding-right: 3px;
        padding-left: 3px;
        font-size: 0.64rem;
    }
    .matrix-date-bound,
    .matrix-date-bound input { max-width: 140px; }
    .matrix-density-controls { align-self: flex-end; }
    .progress-matrix-row {
        grid-template-columns: var(--matrix-student-col, max-content) repeat(var(--matrix-cols, 6), minmax(var(--matrix-task-col, 96px), 1fr));
        min-width: var(--matrix-min, 560px);
    }
    .matrix-density-fit .progress-matrix-row {
        grid-template-columns: minmax(0, var(--matrix-student-col-fit, 5ch)) repeat(var(--matrix-cols, 6), minmax(31px, 1fr));
        min-width: var(--matrix-fit-min, 340px);
    }
    .progress-matrix-row > span,
    .progress-matrix-row > a,
    .progress-matrix-row > button.progress-matrix-due-cell,
    .progress-matrix-row > .progress-matrix-student-button,
    .progress-matrix-cell {
        min-height: 40px;
        padding: 8px 7px;
        font-size: 0.68rem;
    }
    .progress-matrix-due-row > .progress-matrix-student-cell {
        padding-right: 7px;
        padding-left: 7px;
        font-size: 0.68rem;
    }
    .progress-matrix-modal-backdrop {
        align-items: end;
        padding: 12px;
    }
    .progress-matrix-modal-shell {
        width: 100%;
    }
    .progress-matrix-modal {
        max-height: calc(100vh - 82px);
        padding: 16px;
        border-radius: 18px;
    }
    .teacher-utility-modal,
    .notification-attempt-modal {
        place-items: center;
        padding: 20px 16px;
    }
    .teacher-utility-shell,
    .notification-attempt-modal .teacher-utility-shell {
        width: min(760px, 100%);
        height: calc(100vh - 40px);
        height: calc(100dvh - 40px);
        min-height: 0;
        gap: 12px;
    }
    .teacher-utility-dialog,
    .notification-attempt-modal .notification-attempt-dialog {
        height: 100%;
        min-height: 0;
        max-height: none;
        border-radius: 22px;
    }
    .matrix-modal-actions,
    .notification-attempt-actions {
        margin: 14px -16px -16px;
        padding: 12px 16px 16px;
    }
    .matrix-student-overview {
        align-items: stretch;
        flex-direction: column;
    }
    .matrix-student-stats {
        justify-content: stretch;
    }
    .matrix-student-stats span {
        flex: 1 1 88px;
    }
    .matrix-student-timeline-row {
        grid-template-columns: 1fr max-content;
    }
    .matrix-student-date,
    .matrix-student-bar {
        grid-column: 1 / -1;
    }
    .matrix-student-score {
        align-self: start;
    }
    .matrix-detail-summary {
        align-items: stretch;
        flex-direction: column;
    }
    .matrix-detail-pills {
        justify-content: flex-start;
    }
    .matrix-answer-table {
        grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr);
    }
    .matrix-answer-table > div {
        padding: 9px 8px;
    }
    .matrix-work-review-head,
    .matrix-work-history {
        display: flex;
        align-items: stretch;
        flex-direction: column;
    }
    .matrix-work-review-head h3,
    .matrix-work-review-head small,
    .matrix-work-history span {
        text-align: left;
    }
    .matrix-work-answer-grid {
        grid-template-columns: 1fr;
    }
    .matrix-work-answer-grid > div + div {
        border-top: 1px solid var(--line);
        border-left: 0;
    }
    .assignment-overview-toolbar { justify-content: stretch; }
    .assignment-progress-mode-tabs { width: 100%; }
    .assignment-group-tools {
        align-items: stretch;
        flex-direction: column;
    }
    .assignment-edit-button { width: 100%; }
    .assignment-edit-dialog { padding: 22px 18px; }
    .assignment-edit-field { grid-template-columns: 1fr; }
    .assignment-cancel-confirm-actions { grid-template-columns: 1fr; }
    .attempt-detail-head,
    .latest-answer-head {
        flex-direction: column;
    }
    .attempt-detail-actions {
        align-items: flex-start;
    }
    .latest-answer-grid {
        grid-template-columns: 1fr;
    }
    .latest-answer-grid-head {
        display: none;
    }
    .assignment-progress-group-head { grid-template-columns: 1fr; }
    .assignment-progress-group-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .assignment-progress-group-stats span { min-width: 0; }
    .student-history-shell {
        grid-template-columns: 1fr;
    }
    .student-history-sidebar {
        border-right: 0;
        border-bottom: 1px solid rgba(31,45,38,0.10);
    }
    .student-history-row {
        grid-template-columns: minmax(0, 1fr) max-content;
        gap: 10px;
        padding: 13px 12px;
    }
    .student-history-score {
        justify-self: end;
    }
    .assignment-table-head { display: none; }
    .assignment-table-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .assignment-status-pill,
    .assignment-alert-pill { justify-self: start; }
    .merge-bar-row { grid-template-columns: 1fr; }
    .dispute-capsule { grid-template-columns: 1fr auto; }
    .dispute-capsule-meta { justify-items: end; }
    .sub-tabs { width: 100%; }
    .dispute-comparison, .dispute-actions { grid-template-columns: 1fr; }
}

/* --- Library 3-tab styles --- */
.library-tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    padding: 4px;
    border-radius: 12px;
    background: var(--bg-card, rgba(255,255,255,0.56));
    border: 1px solid rgba(255,255,255,0.72);
}
.library-tab-btn {
    flex: 1;
    padding: 8px 14px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--muted, #58716c);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.library-tab-btn:hover {
    color: var(--text-primary, #16312f);
    background: rgba(15, 118, 110, 0.06);
}
.library-tab-btn.active {
    background: var(--accent, #0f766e);
    color: #fff;
}
#student-library-tab-bar.library-tab-bar {
    gap: 6px;
    margin-bottom: 16px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,0.76);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0.38)),
        rgba(255,255,255,0.42);
    box-shadow:
        0 16px 42px rgba(25, 68, 61, 0.1),
        inset 0 1px 0 rgba(255,255,255,0.8);
    backdrop-filter: blur(22px) saturate(1.25);
}
#student-library-tab-bar .library-tab-btn {
    min-height: 42px;
    border-radius: 999px;
    color: rgba(24, 53, 47, 0.64);
    font-weight: 880;
}
#student-library-tab-bar .library-tab-btn:hover {
    color: #0d5d56;
    background: rgba(255,255,255,0.38);
}
#student-library-tab-bar .library-tab-btn.active {
    color: #0d5d56;
    background:
        radial-gradient(circle at 24% 12%, rgba(255,255,255,0.92), transparent 38%),
        linear-gradient(135deg, rgba(255, 244, 176, 0.72), rgba(184, 238, 220, 0.76) 48%, rgba(187, 222, 255, 0.72));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 10px 22px rgba(19, 118, 109, 0.14);
}
.year-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    padding: 3px;
    border-radius: 10px;
    background: rgba(15, 118, 110, 0.06);
}
.year-tab {
    padding: 5px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--muted, #58716c);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.year-tab:hover {
    color: var(--text-primary, #16312f);
    background: rgba(15, 118, 110, 0.08);
}
.year-tab.active {
    background: var(--accent, #0f766e);
    color: #fff;
}
.sub-tab-bar {
    display: none;
    gap: 8px;
    margin-bottom: 12px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    flex-wrap: wrap;
}
.sub-tab-btn {
    min-height: 32px;
    padding: 6px 15px;
    border: 1px solid rgba(216, 149, 40, 0.2);
    border-radius: 999px;
    background: rgba(255, 248, 221, 0.78);
    color: #7b5515;
    font-size: 0.82rem;
    font-weight: 850;
    cursor: pointer;
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(216, 149, 40, 0.08);
}
.sub-tab-btn:hover {
    transform: translateY(-1px);
    color: #67420a;
    border-color: rgba(216, 149, 40, 0.34);
    background: #fff4c9;
    box-shadow: 0 8px 20px rgba(216, 149, 40, 0.14);
}
.sub-tab-btn.active {
    color: #5f3b05;
    border-color: rgba(216, 149, 40, 0.38);
    background: linear-gradient(135deg, #fff8d7, #f4c84f 65%, #fff0b2);
    box-shadow: 0 0 18px rgba(244, 200, 79, 0.34), 0 8px 18px rgba(116, 71, 11, 0.1);
}
.library-year-bar {
    margin-bottom: 12px;
}
.library-year-bar .year-tabs {
    margin-bottom: 0;
}
.menu-card.year-hidden,
.library-task-card.year-hidden,
.teacher-library-card.year-hidden {
    display: none !important;
}
#teacher-library-content .teacher-library-card .card-button,
#student-library-content .student-library-card .card-button {
    width: auto;
    white-space: nowrap;
}
#teacher-library-content .teacher-library-placeholder {
    text-align: left;
}
#student-library-sections .section {
    margin-bottom: 14px;
    padding: 16px;
    background: rgba(255,255,255,0.56);
    border: 1px solid rgba(255,255,255,0.72);
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(15,23,42,0.05);
}
#student-library-sections .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    margin: 0;
    border-radius: 12px;
    background: rgba(255,255,255,0.5);
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    user-select: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    color: var(--text-primary, #16312f);
}
#student-library-sections .section.is-open .section-title {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: auto;
    padding: 8px 10px;
    margin: -8px -10px 0;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 6px 16px rgba(15,23,42,0.06);
    backdrop-filter: blur(12px);
}
#student-library-sections .toggle-btn {
    font-size: 0.72rem;
    color: var(--accent, #0f766e);
    font-weight: 800;
    cursor: pointer;
    user-select: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15,118,110,0.08);
    transition: background 0.15s;
}
#student-library-sections .toggle-btn:hover {
    background: rgba(15,118,110,0.14);
}
#student-library-sections .section-body {
    margin-top: 12px;
}
#student-library-sections .menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}
#student-library-sections .menu-card {
    background: rgba(255,255,255,0.7);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.72);
    box-shadow: 0 6px 16px rgba(15,23,42,0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}
#student-library-sections .menu-card:hover {
    background: rgba(255,255,255,0.86);
    border-color: rgba(15,118,110,0.24);
    box-shadow: 0 10px 24px rgba(15,23,42,0.07);
    transform: translateY(-1px);
}
#student-library-sections .menu-card a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 88px;
    padding: 14px;
    text-decoration: none;
    color: inherit;
}
#student-library-sections .card-content {
    flex: 1;
    padding-right: 14px;
}
#student-library-sections .card-title {
    margin: 0 0 5px;
    color: var(--text-primary, #16312f);
    font-size: 1rem;
    font-weight: 850;
    letter-spacing: -0.02em;
}
#student-library-sections .card-date {
    font-size: 0.82rem;
    color: var(--accent, #0f766e);
    font-weight: 800;
    white-space: nowrap;
}
#student-library-sections .meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: hidden;
}
#student-library-sections .tags {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
}
#student-library-sections .tag {
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 800;
    white-space: nowrap;
}
#student-library-sections .tag.tag-topic {
    background: rgba(249,115,22,0.11);
    color: #9a3412;
}
#student-library-sections .tag.tag-bbc {
    background: rgba(15,118,110,0.09);
    color: #78908a;
}
#student-library-sections .card-note {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: var(--text-secondary, #58716c);
    font-weight: 650;
}
#student-library-sections .arrow-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(15,118,110,0.1);
    border-radius: 50%;
    color: var(--accent, #0f766e);
    font-weight: 900;
    font-size: 1rem;
    transition: background 0.15s, color 0.15s;
    flex: 0 0 auto;
}
#student-library-sections .menu-card:hover .arrow-box {
    background: var(--accent, #0f766e);
    color: #fff;
}
#student-library-sections .placeholder-card .card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#student-library-sections .placeholder-card .card-title {
    color: var(--muted, #58716c);
    margin-bottom: 0;
}
#student-library-sections .placeholder-card .card-note {
    color: var(--muted, #58716c);
    margin-top: 0;
}
#student-library-sections .placeholder-card .arrow-box {
    background: transparent;
    color: var(--muted, #58716c);
}
#student-library-sections .section-description {
    color: var(--text-secondary, #58716c);
    font-size: 0.9rem;
    margin: 0;
}