:root {
    --bg: #ffffff;
    --panel: #ffffff;
    --text: #292b2d;
    --muted: #66706b;
    --line: #e9ebe7;
    --accent: #ff7e66;
    --accent-strong: #e9634c;
    --mint: #b8ddc8;
    --violet: #9ca1db;
    --yellow: #ffe780;
    --surface: #fafaf7;
    --danger: #b33838;
    --shadow: 0 14px 34px rgba(41, 43, 45, 0.07);
}

/* Workbook QR audio */
.workbook-listen-page {
    min-height: 100vh;
    margin: 0;
    background: #f4f5f7;
    color: #172b24;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
}
.workbook-listen-shell { width: min(100% - 32px, 620px); margin: 0 auto; padding: 28px 0 72px; }
.workbook-listen-brand { display: flex; align-items: center; gap: 13px; padding: 6px 2px 26px; border-bottom: 1px solid #dfe5e1; }
.workbook-listen-brand img { width: 116px; height: auto; }
.workbook-listen-brand div { display: grid; gap: 2px; padding-left: 13px; border-left: 1px solid #cfd8d3; }
.workbook-listen-brand strong { font-size: 18px; }
.workbook-listen-brand span { color: #6a7772; font-size: 12px; }
.workbook-listen-heading { padding: 42px 4px 27px; text-align: center; }
.workbook-listen-heading > span { color: #17875f; font-size: 11px; font-weight: 900; }
.workbook-listen-heading h1 { margin: 8px 0 0; font-size: 28px; line-height: 1.3; letter-spacing: 0; overflow-wrap: anywhere; }
.workbook-listen-subtitle { margin: 9px 0 0; color: #77827e; font-size: 15px; }
.workbook-audio-card { padding: 46px 40px 32px; border: 1px solid #dfe5e1; border-radius: 8px; background: #fff; box-shadow: 0 12px 30px rgba(24, 53, 42, .08); text-align: center; }
.workbook-audio-card audio { display: none; }
.workbook-play-button { position: relative; display: grid; width: 190px; height: 190px; margin: 0 auto 45px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: #1b1b1d; color: #fff; cursor: pointer; }
.workbook-play-button:focus-visible { outline: 4px solid #f0c84b; outline-offset: 5px; }
.workbook-play-icon { position: relative; z-index: 2; width: 0; height: 0; margin-left: 10px; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 39px solid #fff; }
.workbook-equalizer { position: absolute; display: flex; align-items: center; gap: 8px; opacity: .42; }
.workbook-equalizer i { display: block; width: 7px; height: 34px; border-radius: 4px; background: #fff; }
.workbook-equalizer i:nth-child(2), .workbook-equalizer i:nth-child(4) { height: 64px; }
.workbook-equalizer i:nth-child(3) { height: 82px; }
.workbook-audio-card.is-playing .workbook-play-icon { width: 13px; height: 50px; margin-right: 22px; border: 0; background: #fff; box-shadow: 22px 0 #fff; }
.workbook-progress { width: 100%; margin: 0; accent-color: #17875f; cursor: pointer; }
.workbook-player-meta { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 14px; color: #65716c; font-variant-numeric: tabular-nums; }
.workbook-player-meta time:first-child { text-align: left; }
.workbook-player-meta time:last-child { text-align: right; }
.workbook-player-meta label { display: flex; align-items: center; gap: 6px; margin: 0; padding: 7px 11px; border-radius: 999px; background: #f1f3f2; color: #263b33; font-size: 13px; font-weight: 800; white-space: nowrap; }
.workbook-player-meta select { width: auto; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; }
.workbook-player-status { min-height: 20px; margin: 20px 0 0; color: #7b8682; font-size: 13px; }
.workbook-listen-unavailable { width: min(100% - 40px, 520px); margin: 22vh auto 0; text-align: center; }
.workbook-listen-unavailable h1 { font-size: 28px; }
.workbook-listen-unavailable p { color: #6f7d77; }

.workbook-audio-admin-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 18px; align-items: start; }
.workbook-audio-guide ol { display: grid; gap: 12px; padding-left: 22px; color: #52645d; }
.workbook-audio-guide > p { padding: 13px; border-left: 4px solid #f0c84b; background: #fff9df; color: #4c5e57; }
.workbook-audio-resources { margin-top: 28px; }
.workbook-audio-resource { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 20px 0; border-top: 1px solid #dfe5e1; }
.workbook-resource-qr { width: 240px; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border: 1px solid #dfe5e1; background: #fff; }
.workbook-resource-info { min-width: 0; }
.workbook-resource-info h3 { margin: 8px 0 4px; font-size: 20px; overflow-wrap: anywhere; }
.workbook-resource-info p, .workbook-resource-info small { display: block; margin: 0 0 7px; color: #6b7873; }
.workbook-resource-info a { display: block; max-width: 100%; color: #126f51; font-size: 12px; overflow-wrap: anywhere; }
.workbook-resource-actions { display: grid; min-width: 126px; gap: 8px; }
.workbook-resource-actions form, .workbook-resource-actions button, .workbook-resource-actions a { width: 100%; margin: 0; text-align: center; }

@media (max-width: 760px) {
    .workbook-listen-shell { width: min(100% - 24px, 620px); padding-top: 18px; }
    .workbook-listen-brand { padding-bottom: 18px; }
    .workbook-listen-heading { padding: 34px 2px 23px; }
    .workbook-listen-heading h1 { font-size: 24px; }
    .workbook-audio-card { padding: 38px 22px 28px; }
    .workbook-play-button { width: 160px; height: 160px; margin-bottom: 38px; }
    .workbook-audio-admin-grid { grid-template-columns: 1fr; }
    .workbook-audio-resource { grid-template-columns: 150px minmax(0, 1fr); gap: 14px; }
    .workbook-resource-qr { width: 150px; height: auto; }
    .workbook-resource-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Teacher listening classroom skill */
.listening-classroom-head .eyebrow { display: block; margin-bottom: 8px; color: #5b6b83; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.listening-classroom-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 22px; margin-bottom: 22px; }
.listening-classroom-upload form { display: grid; gap: 10px; }
.listening-classroom-upload label { display: grid; gap: 8px; color: #27372f; font-weight: 750; }
.listening-classroom-upload input[type="file"] { width: 100%; padding: 16px; border: 1px dashed #aebfb5; border-radius: 14px; background: #f8fbf8; color: #4d5e54; }
.listening-classroom-guide { background: linear-gradient(145deg, #fffdf4 0%, #f7fbf8 100%); }
.feature-list { display: grid; gap: 14px; margin: 18px 0 24px; padding: 0; list-style: none; }
.feature-list li { display: grid; gap: 3px; padding-left: 18px; border-left: 4px solid #f0c851; }
.feature-list span, .listening-classroom-workflow li { color: #68756e; line-height: 1.55; }
.listening-classroom-workflow ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 18px 0 0; padding-left: 24px; }
.listening-classroom-error { max-width: 760px; }
.listening-auto-split { margin-bottom: 22px; border-left: 6px solid #f0c851; background: linear-gradient(135deg, #fffef8 0%, #f3faf5 100%); }
.listening-auto-split form { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(260px, 1.5fr) minmax(130px, .55fr) minmax(130px, .55fr) auto; align-items: end; gap: 12px; }
.listening-auto-split label { display: grid; gap: 7px; color: #34463c; font-weight: 750; }
.listening-auto-split label small { color: #748078; font-size: 11px; font-weight: 650; }
@media (max-width: 900px) { .listening-classroom-grid, .listening-classroom-workflow ol { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .listening-auto-split form { grid-template-columns: 1fr 1fr; } .listening-auto-split button { grid-column: 1 / -1; } }
@media (max-width: 700px) { .listening-auto-split form { grid-template-columns: 1fr; } .listening-auto-split button { grid-column: auto; } }

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

a {
    color: var(--accent);
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

.topbar {
    min-height: 74px;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 32px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 2px solid #f3f3ef;
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand,
.login-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
}

.brand img {
    width: 138px;
    height: 42px;
    object-fit: contain;
    display: block;
}

.brand > span {
    padding-left: 12px;
    border-left: 2px solid var(--line);
    font-size: 15px;
    color: var(--muted);
}

.brand-mark {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--accent);
    display: inline-block;
    flex: 0 0 auto;
}

nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

nav a {
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--muted);
    font-weight: 700;
}

nav a.active,
nav a:hover {
    color: var(--text);
    background: var(--yellow);
}

.logout-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.user-chip,
.pill {
    border: 1px solid var(--line);
    background: var(--surface);
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--muted);
    white-space: nowrap;
}

.member-points-menu { position: relative; flex: 0 0 auto; }
.member-points-menu > summary { min-width: 132px; display: flex; align-items: center; gap: 8px; padding: 5px 9px 5px 6px; border: 1px solid #dce4df; border-radius: 7px; background: #f6f9f7; color: #35483e; cursor: pointer; list-style: none; }
.member-points-menu > summary::-webkit-details-marker { display: none; }
.member-points-menu > summary img { width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain; border-radius: 50%; background: #fff; }
.member-points-menu > summary span { min-width: 0; display: grid; gap: 1px; }
.member-points-menu > summary small { max-width: 86px; overflow: hidden; color: #68776f; font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.member-points-menu > summary b { color: #2e5947; font-size: 11px; }
.member-points-menu[open] > summary { border-color: #81b49e; background: #eaf6f0; }
.member-points-popover { width: min(340px, calc(100vw - 24px)); position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; padding: 18px; border: 1px solid #d8e2dc; border-radius: 8px; background: #fff; box-shadow: 0 18px 46px rgba(34, 57, 46, .18); }
.member-points-popover header { display: grid; grid-template-columns: 1fr auto; align-items: end; padding-bottom: 13px; border-bottom: 1px solid #e7ece9; }
.member-points-popover header span { color: #7c6fa5; font-size: 9px; font-weight: 900; }
.member-points-popover header strong { grid-row: 1 / 3; grid-column: 2; color: #2f674f; font-size: 38px; line-height: 1; }
.member-points-popover header small { color: #758078; font-size: 10px; font-weight: 800; }
.member-points-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); margin: 13px 0; border: 1px solid #e4eae6; border-radius: 6px; overflow: hidden; }
.member-points-breakdown span { display: grid; gap: 3px; padding: 9px 6px; border-right: 1px solid #e4eae6; color: #738078; font-size: 9px; text-align: center; }
.member-points-breakdown span:last-child { border-right: 0; }
.member-points-breakdown b { color: #314b3f; font-size: 14px; }
.member-points-popover ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.member-points-popover li { display: flex; justify-content: space-between; gap: 10px; color: #59665f; font-size: 10px; }
.member-points-popover li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-points-popover li b { flex: 0 0 auto; color: #b37c16; }
.member-points-popover li.empty { display: block; padding: 8px 0; color: #7d8882; text-align: center; }
.member-menu-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; padding-top: 13px; border-top: 1px solid #e7ece9; }
.member-menu-actions form { margin: 0; }
.member-menu-actions a,
.member-menu-actions button { width: 100%; min-height: 36px; display: flex; align-items: center; justify-content: center; padding: 8px 10px; border: 1px solid #d8e2dc; border-radius: 6px; background: #f6f9f7; color: #405248; font: inherit; font-size: 11px; font-weight: 800; text-align: center; cursor: pointer; }
.member-menu-actions a:hover,
.member-menu-actions button:hover { border-color: #81b49e; background: #eaf6f0; color: #274b3b; }
.member-points-popover > p { margin: 13px -18px -18px; padding: 11px 18px; border-radius: 0 0 8px 8px; background: #fff8dd; color: #756224; font-size: 9px; font-weight: 800; }

.shell {
    width: min(1280px, calc(100vw - 40px));
    margin: 28px auto 56px;
}

.login-wrap {
    min-height: calc(100vh - 56px);
    display: grid;
    place-items: center;
    background: #f4f5f2;
}

.login-panel {
    width: min(420px, calc(100vw - 36px));
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 32px;
    box-shadow: var(--shadow);
}

.login-title {
    margin-bottom: 22px;
}

.login-title h1,
.page-head h1,
.lesson-toolbar h1 {
    margin: 0;
    font-weight: 900;
}

.login-title p,
.page-head p,
.course-card p,
.lesson-toolbar span,
.muted {
    color: var(--muted);
}

.login-demo {
    display: grid;
    gap: 4px;
    margin-top: 18px;
    color: var(--muted);
    font-size: 13px;
}

label {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
    color: var(--text);
    font-weight: 600;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    padding: 10px 11px;
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 126, 102, 0.16);
}

textarea {
    resize: vertical;
}

button,
.primary,
.secondary,
.danger {
    min-height: 38px;
    border: 0;
    border-radius: 8px;
    padding: 9px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.primary {
    color: #111;
    background: var(--accent);
    font-weight: 900;
}

.primary:hover {
    background: var(--accent-strong);
    color: #fff;
}

.secondary {
    color: #1f2622;
    background: var(--mint);
    font-weight: 800;
}

.danger {
    color: #fff;
    background: var(--danger);
}

.ghost {
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--line);
}

.wide {
    width: 100%;
}

.notice {
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 14px;
}

.notice.danger {
    background: #faecec;
    color: var(--danger);
}

.page-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 22px;
    padding: 8px 0 4px;
}

.page-head h1 {
    font-size: 34px;
    line-height: 1.15;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.course-card,
.panel,
.metrics > div {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.course-card {
    min-height: 220px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
}

.course-icon {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--violet);
    font-weight: 800;
    letter-spacing: 0;
}

.course-meta {
    color: var(--accent-strong);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.course-card h2,
.panel h2 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 900;
}

.course-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.course-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.course-actions form {
    margin: 0;
}

.daily-count-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.daily-count-form label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.daily-count-form input {
    width: 64px;
    min-height: 34px;
    padding: 6px 8px;
}

.course-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.course-tags span {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
}

.panel {
    padding: 20px;
    margin-bottom: 18px;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.metrics > div {
    padding: 18px;
    display: grid;
    gap: 8px;
    border-top: 5px solid var(--mint);
}

.metrics span {
    color: var(--muted);
}

.metrics strong {
    font-size: 30px;
    font-weight: 900;
}

.admin-note-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-note-grid div {
    min-height: 104px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    display: grid;
    gap: 8px;
}

.admin-note-grid strong {
    color: var(--text);
}

.admin-note-grid span {
    color: var(--muted);
    line-height: 1.6;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    text-align: left;
    border-bottom: 1px solid var(--line);
    padding: 13px 10px;
    vertical-align: middle;
}

th {
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
}

tbody tr:hover {
    background: #fffdf0;
}

td form {
    margin: 0;
}

.status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--mint);
    color: var(--muted);
}

.status.active,
.status.success,
.status.published {
    background: #e3f2e9;
    color: var(--accent-strong);
}

.status.disabled,
.status.failed,
.status.ended,
.status.archived {
    background: #f4eeee;
    color: #8f3c3c;
}

.status.draft {
    background: #f3efe5;
    color: #8b631b;
}

.split {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 18px;
    align-items: start;
}

.form-panel {
    position: sticky;
    top: 86px;
}

.empty {
    border: 1px dashed var(--line);
    border-radius: 8px;
    padding: 28px;
    color: var(--muted);
}

details summary {
    cursor: pointer;
    color: var(--accent);
}

.inline-editor {
    width: min(380px, 72vw);
    display: grid;
    gap: 8px;
    margin: 12px 0;
}

.inline-editor label {
    margin: 0;
    font-size: 13px;
}

.grant {
    background: #f5f5f0;
    color: var(--muted);
    border: 1px solid var(--line);
}

.grant.checked {
    background: #e3f2e9;
    color: var(--accent-strong);
}

.wide-table {
    overflow-x: auto;
}

.share-link {
    min-width: 260px;
    margin-top: 6px;
    padding: 7px 8px;
    font-size: 13px;
    color: var(--muted);
}

.page-editor-form {
    width: min(680px, 78vw);
    display: grid;
    gap: 10px;
    margin: 12px 0;
}

.student-shell {
    width: min(900px, calc(100vw - 28px));
    margin-top: 16px;
}

body.student-page {
    background: #ffffff;
}

.vocab-student {
    display: grid;
    gap: 16px;
}

.vocab-hero {
    min-height: 112px;
    position: relative;
    padding: 16px 0 22px;
    border-radius: 8px;
    color: var(--text);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    border-bottom: 1px solid var(--line);
}

.vocab-hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    background: var(--accent);
}

.student-logo {
    width: 260px;
    height: 82px;
    border-radius: 0;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: transparent;
    box-shadow: none;
}

.student-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.student-logo span {
    margin: 0;
    color: #155f46;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
}

.vocab-hero span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-weight: 700;
}

.vocab-slogan {
    display: block;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
}

.vocab-hero h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 900;
    line-height: 1.2;
}

.vocab-hero p {
    margin: 8px 0 0;
    color: var(--muted);
}

.vocab-name-panel,
.vocab-card,
.vocab-summary,
.vocab-ranking,
.student-empty {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.vocab-name-panel {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
    align-items: end;
    gap: 12px;
}

.vocab-name-panel label {
    margin: 0;
}

.vocab-progress {
    height: 11px;
    border-radius: 999px;
    background: var(--surface);
    overflow: hidden;
}

.vocab-progress div {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    transition: width 0.25s ease;
}

.vocab-card {
    min-height: 380px;
    display: grid;
    align-content: start;
    gap: 16px;
}

.vocab-mode {
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--yellow);
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.vocab-card h2 {
    margin: 0;
    font-size: 36px;
    line-height: 1.35;
    font-weight: 900;
}

.vocab-pos {
    margin: -8px 0 0;
    color: var(--muted);
    font-size: 18px;
    font-weight: 700;
}

.vocab-options {
    display: grid;
    gap: 10px;
}

.vocab-choice {
    width: 100%;
    min-height: 60px;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--line);
    font-weight: 800;
}

.vocab-choice:hover {
    border-color: var(--accent);
    background: #fff5f1;
}

.vocab-spell {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.vocab-feedback {
    min-height: 28px;
    margin: 0;
    color: var(--accent-strong);
    font-weight: 700;
}

.vocab-result {
    min-height: 112px;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 92px 1fr;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 2px solid var(--line);
    background: #f8faf7;
    cursor: default;
    user-select: none;
    touch-action: manipulation;
}

.vocab-student [hidden] {
    display: none !important;
}

.vocab-choice:disabled {
    cursor: default;
}

.vocab-result strong {
    width: 80px;
    height: 80px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 58px;
    line-height: 1;
}

.vocab-result span {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.35;
}

.vocab-result.correct {
    border-color: var(--mint);
    background: #effaf4;
    color: #1d5f3e;
}

.vocab-result.correct strong {
    background: #2e8f59;
}

.vocab-result.wrong {
    border-color: var(--accent);
    background: #fff1ee;
    color: #8f2929;
}

.vocab-result.wrong strong {
    background: var(--accent);
}

.vocab-summary h2 {
    margin: 0 0 8px;
}

.vocab-summary table,
.vocab-ranking table {
    margin-top: 12px;
}

.summary-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0;
}

.wrong-sheet {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8faf7;
}

.wrong-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.wrong-sheet h3 {
    margin: 0;
    font-size: 18px;
}

.wrong-sheet textarea {
    min-height: 180px;
    line-height: 1.65;
    white-space: pre-wrap;
}

.wrong-sheet p {
    margin: 8px 0 0;
}

.report-filter {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 180px auto;
    align-items: end;
    gap: 12px;
}

.report-filter label {
    margin: 0;
}

.student-empty {
    margin-top: 18vh;
    text-align: center;
}

.editor-layout {
    display: grid;
    grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.editor-sidebar {
    display: grid;
    gap: 18px;
}

.field-help {
    margin: -4px 0 14px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.quiz-editor {
    min-width: 0;
    margin: 4px 0 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.quiz-editor legend {
    padding: 0 6px;
    color: var(--accent-strong);
    font-weight: 700;
}

.activity-editor {
    margin: 0;
    padding: 16px;
    display: grid;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.activity-editor legend {
    padding: 0 6px;
    color: var(--accent-strong);
    font-weight: 800;
}

.import-panel {
    border-top: 4px solid var(--accent);
}

.import-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.import-panel-head h2 {
    margin: 4px 0 0;
}

.import-panel-head > strong {
    min-width: 54px;
    padding: 7px 10px;
    border-radius: 6px;
    background: #e9f5ee;
    color: var(--accent-strong);
    text-align: center;
}

.import-panel p {
    color: var(--muted);
    line-height: 1.6;
}

.cue-editor {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.cue-editor h3 {
    margin: 0 0 12px;
    font-size: 16px;
}

.cue-editor-row {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

.cue-editor-row > span {
    display: grid;
    gap: 2px;
}

.cue-editor-row small {
    color: var(--muted);
}

.cue-add-form {
    margin-top: 16px;
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.2fr) auto;
    align-items: end;
    gap: 12px;
}

.compact {
    min-height: 32px;
    padding: 6px 10px;
}

.page-editor-form label {
    margin: 0;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lesson-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
}

.lesson-main,
.lesson-side {
    min-width: 0;
}

.lesson-toolbar {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.lesson-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.remote-frame {
    height: calc(100vh - 160px);
    min-height: 520px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #181d1b;
    position: relative;
    overflow: hidden;
}

.remote-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.remote-pending {
    height: 100%;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    padding: 32px;
    color: #e8eee9;
}

.remote-pending h2 {
    margin: 0;
}

.remote-pending p {
    margin: 0;
    color: #c7d1cc;
}

.remote-pending dl {
    width: min(720px, 100%);
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px 14px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
}

.remote-pending dt {
    color: #b9c5bf;
}

.remote-pending dd {
    margin: 0;
    word-break: break-all;
}

.watermark-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 120px;
    opacity: 0.18;
    transform: rotate(-18deg) scale(1.15);
}

.watermark-layer span {
    color: #ffffff;
    font-weight: 700;
    align-self: center;
    justify-self: center;
    white-space: nowrap;
}

.lesson-side {
    display: grid;
    gap: 14px;
}

.lesson-side form,
.side-facts {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    box-shadow: var(--shadow);
}

.side-facts {
    display: grid;
    gap: 12px;
}

.side-facts div {
    display: grid;
    gap: 3px;
}

.side-facts span {
    color: var(--muted);
    font-size: 13px;
}

.page-link-list {
    display: grid;
    gap: 8px;
}

.page-link {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8faf7;
}

.page-link strong {
    color: var(--text);
    font-size: 14px;
}

.page-link span {
    color: var(--muted);
    font-size: 12px;
}

.page-preview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.page-preview,
.page-preview-side {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.page-preview {
    min-height: 560px;
    padding: clamp(22px, 4vw, 48px);
    line-height: 1.8;
}

.page-preview h2 {
    margin: 0 0 18px;
    font-size: clamp(28px, 5vw, 54px);
}

.page-preview h3 {
    margin: 24px 0 10px;
    font-size: 24px;
}

.page-preview p,
.page-preview li {
    font-size: 20px;
}

.page-preview ul {
    display: grid;
    gap: 10px;
    padding-left: 24px;
}

.lesson-image {
    width: 100%;
    margin: 0 0 28px;
}

.lesson-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
    background: #f1f4ef;
}

.lesson-audio {
    margin-top: 28px;
    padding: 16px;
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(260px, 1.5fr);
    align-items: center;
    gap: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8faf7;
}

.lesson-audio div {
    display: grid;
    gap: 4px;
}

.lesson-audio span {
    color: var(--muted);
    font-size: 13px;
}

.lesson-audio audio {
    width: 100%;
}

.audio-cue-bank {
    margin-top: 28px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8faf7;
}

.audio-cue-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.audio-cue-head span {
    font-weight: 800;
}

.audio-cue-head strong {
    color: var(--muted);
    font-size: 13px;
}

.audio-cue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.audio-cue {
    min-height: 50px;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    color: var(--text);
    font-weight: 750;
    white-space: normal;
}

.audio-cue > span {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e9f5ee;
    color: var(--accent-strong);
    font-size: 11px;
}

.audio-cue.playing {
    border-color: var(--accent);
    background: #e9f5ee;
    color: var(--accent-strong);
}

.sort-activity {
    margin-top: 28px;
    padding: 22px;
    border: 1px solid var(--line);
    border-left: 4px solid #2878a7;
    border-radius: 8px;
    background: #fbfcfa;
}

.sort-activity-head span {
    color: #2878a7;
    font-size: 13px;
    font-weight: 800;
}

.sort-activity-head h3 {
    margin: 6px 0 16px;
}

.sort-pool {
    min-height: 76px;
    padding: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border: 1px dashed #9faea6;
    border-radius: 8px;
    background: #fff;
}

.sort-item {
    min-width: 108px;
    min-height: 44px;
    border: 1px solid #bcc8c0;
    border-radius: 7px;
    background: #fff;
    color: var(--text);
    font-weight: 800;
    cursor: grab;
}

.sort-item:active {
    cursor: grabbing;
}

.sort-item.selected {
    border-color: #2878a7;
    box-shadow: 0 0 0 3px rgba(40, 120, 167, 0.16);
}

.sort-zones {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sort-zone {
    min-height: 154px;
    padding: 12px;
    border: 2px solid #9bc2d9;
    border-radius: 8px;
    background: #eef7fb;
    transition: border-color 140ms ease, background 140ms ease;
}

.sort-zone:nth-child(2) {
    border-color: #e7bd74;
    background: #fff8e9;
}

.sort-zone.drag-over {
    border-color: var(--accent);
    background: #e9f5ee;
}

.sort-zone-target {
    width: 100%;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: #1c638b;
    font-size: 17px;
    font-weight: 850;
}

.sort-zone:nth-child(2) .sort-zone-target {
    color: #9a5a12;
}

.sort-zone-items {
    min-height: 72px;
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

.sort-item.correct,
.sort-zone.correct {
    border-color: var(--accent);
}

.sort-item.correct {
    background: #e9f5ee;
    color: var(--accent-strong);
}

.sort-item.wrong,
.sort-zone.wrong {
    border-color: #bd5b5b;
}

.sort-item.wrong {
    background: #faeeee;
    color: #8f3636;
}

.sort-actions {
    min-height: 46px;
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sort-actions p {
    margin: 0 0 0 auto;
    color: var(--accent-strong);
    font-weight: 800;
}

.quiz-block {
    margin-top: 28px;
    padding: 22px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--amber);
    border-radius: 8px;
    background: #fffdf8;
}

.quiz-label {
    color: var(--amber);
    font-size: 13px;
    font-weight: 800;
}

.quiz-block h3 {
    margin: 8px 0 16px;
}

.quiz-options {
    display: grid;
    gap: 10px;
}

.quiz-option {
    width: 100%;
    min-height: 52px;
    justify-content: flex-start;
    gap: 12px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    text-align: left;
    white-space: normal;
}

.quiz-option span {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #edf2ed;
    color: var(--accent-strong);
    font-weight: 800;
}

.quiz-option.correct {
    border-color: var(--accent);
    background: #e9f5ee;
}

.quiz-option.wrong {
    border-color: #c46b6b;
    background: #faeeee;
}

.quiz-feedback {
    min-height: 30px;
    margin: 12px 0 0;
    color: var(--accent-strong);
    font-weight: 700;
}

.player-shell {
    width: min(1600px, calc(100vw - 28px));
    margin: 14px auto 28px;
}

.classroom-shell {
    min-height: calc(100vh - 94px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.classroom-shell:fullscreen {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
}

.classroom-toolbar {
    min-height: 62px;
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(220px, 2fr) minmax(360px, 1fr);
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    position: relative;
    z-index: 6;
}

.classroom-exit form {
    margin: 0;
}

.classroom-title {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 2px;
}

.classroom-title strong,
.classroom-title span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.classroom-title span {
    color: var(--muted);
    font-size: 13px;
}

.classroom-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.classroom-nav {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    color: var(--text);
    font-size: 22px;
}

.classroom-nav.disabled {
    color: #aab2ae;
    background: #f3f5f2;
}

.classroom-stage {
    min-height: 600px;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #e8ece7;
}

.classroom-page {
    width: min(1180px, 100%);
    max-height: calc(100vh - 210px);
    min-height: 520px;
    overflow: auto;
    position: relative;
    z-index: 1;
    padding: clamp(24px, 4vw, 54px);
    border: 1px solid #d6ddd5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(25, 35, 29, 0.12);
    line-height: 1.7;
}

.classroom-page > h2 {
    margin: 0 0 18px;
    font-size: clamp(30px, 4vw, 52px);
}

.classroom-page > h3 {
    font-size: 24px;
}

.classroom-page > p,
.classroom-page > ul li {
    font-size: clamp(18px, 2vw, 26px);
}

.classroom-watermark {
    position: absolute;
    right: 30px;
    bottom: 22px;
    z-index: 2;
    display: grid;
    justify-items: end;
    color: rgba(39, 52, 45, 0.3);
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
}

.annotation-canvas {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.annotation-canvas.active {
    pointer-events: auto;
    cursor: crosshair;
    touch-action: none;
}

.annotation-tools {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 5;
    transform: translateX(-50%);
    max-width: calc(100% - 28px);
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 30px rgba(25, 35, 29, 0.18);
}

.annotation-tools[hidden] {
    display: none;
}

.tool-button {
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
}

.tool-button.selected {
    border-color: var(--accent);
    background: #e6f1eb;
    color: var(--accent-strong);
}

.tool-divider {
    width: 1px;
    height: 30px;
    flex: 0 0 1px;
    background: var(--line);
}

.color-swatch {
    width: 30px;
    height: 30px;
    min-height: 30px;
    flex: 0 0 30px;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 1px var(--line);
}

.color-swatch.selected {
    box-shadow: 0 0 0 2px var(--accent);
}

.stroke-size {
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 12px;
    white-space: nowrap;
}

.stroke-size input {
    width: 78px;
    padding: 0;
}

.classroom-tips {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--line);
    background: #fff;
}

.classroom-tips strong {
    color: var(--accent-strong);
    white-space: nowrap;
}

.classroom-tips span {
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-gap {
    height: 14px;
}

.page-preview-side {
    padding: 16px;
    display: grid;
    gap: 14px;
}

.page-preview-side h2,
.page-preview-side p {
    margin: 0;
}

.page-preview-side p {
    color: var(--muted);
    line-height: 1.7;
}

.assessment-split {
    align-items: start;
}

.assessment-form h3 {
    margin: 18px 0 8px;
}

.form-grid {
    display: grid;
    gap: 12px;
}

.form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid.five {
    grid-template-columns: repeat(5, minmax(88px, 1fr));
}

.assessment-score-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 10px;
}

.speaking-score-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(110px, 1fr));
    gap: 10px;
}

.speaking-score-grid label {
    min-width: 0;
    margin: 0;
}

.assessment-score-grid fieldset {
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.dynamic-section-list {
    display: grid;
    gap: 8px;
}

.dynamic-section-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(90px, 1fr) minmax(90px, 1fr) 36px;
    gap: 8px;
    align-items: end;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.dynamic-section-row label {
    margin: 0;
}

.icon-only {
    width: 36px;
    min-width: 36px;
    padding: 0;
    font-size: 20px;
}

.assessment-score-grid legend {
    padding: 0 5px;
    font-weight: 800;
}

.assessment-score-grid label {
    margin-top: 7px;
    font-size: 12px;
}

.compact-list {
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
    line-height: 1.8;
}

.report-processing {
    min-height: 180px;
    display: grid;
    align-content: center;
    gap: 10px;
    border-left: 6px solid #989cda;
    background: #f7f7fc;
}

.report-processing h2,
.report-processing p {
    margin: 0;
}

.status.processing {
    color: #545aa7;
    background: #eeeefa;
}

.status.failed {
    color: #a43e31;
    background: #fff0ed;
}

.assessment-report {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* MuBo VI: coral, mint, butter yellow and periwinkle on a quiet white base. */
.assessment-report {
    --mubo-coral: #ff7865;
    --mubo-mint: #b8dccb;
    --mubo-yellow: #ffe582;
    --mubo-lilac: #989cda;
    --mubo-ink: #2d2d2d;
    color: var(--mubo-ink);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
}

.report-cover {
    position: relative;
    min-height: 132px;
    padding: 28px 42px 30px;
    background: #fff;
    box-shadow: inset 0 7px var(--mubo-coral);
    border-bottom: 0;
}

.report-logo {
    position: absolute;
    top: 25px;
    left: 42px;
    display: block;
    width: 128px;
    height: auto;
}

.report-title {
    padding: 30px 145px 0;
    text-align: center;
}

.report-title h1 {
    margin: 0 0 15px;
    color: var(--mubo-ink);
    font-size: 30px;
    letter-spacing: 0;
}

.report-title p {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 30px;
    margin: 0;
    color: #626262;
    font-size: 14px;
}

.report-section {
    padding: 30px 42px;
    border-bottom: 1px solid #ececec;
}

.report-section:last-child {
    border-bottom: 0;
}

.report-section h2 {
    margin: 0 0 12px;
    padding-left: 14px;
    border-left: 7px solid var(--mubo-mint);
    color: var(--mubo-ink);
    font-size: 22px;
}

.report-section p,
.report-section li {
    line-height: 1.85;
}

.report-section table {
    margin-top: 10px;
}

.report-status,
.evidence-note {
    padding: 10px 12px;
    background: #fff9dc;
    border-left: 4px solid var(--mubo-yellow);
    color: #57534a;
    font-size: 13px;
}

.ability-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0 20px;
}

.ability-card {
    padding: 14px;
    border: 0;
    border-top: 4px solid var(--mubo-mint);
    border-radius: 0;
    background: #f7fbf9;
}

.ability-card > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.ability-card span {
    color: var(--muted);
    font-size: 13px;
}

.ability-track {
    height: 8px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 4px;
    background: #edf0ee;
}

.ability-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--mubo-coral);
}

.diagnosis-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.diagnosis-columns > div {
    padding: 16px;
    border-top: 4px solid var(--mubo-mint);
    background: #f8faf9;
}

.diagnosis-columns > div:nth-child(2) {
    border-color: var(--mubo-coral);
}

.diagnosis-columns > div:nth-child(3) {
    border-color: var(--mubo-yellow);
}

.diagnosis-columns h3,
.diagnosis-columns p,
.study-timeline p {
    margin: 0;
}

.diagnosis-columns p {
    margin-top: 8px;
}

.signal-list li {
    margin-bottom: 8px;
}

.signal-list span {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.action-list li {
    margin-bottom: 10px;
}

.daily-plan {
    display: grid;
    grid-template-columns: 1.2fr repeat(4, 1fr);
    gap: 1px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--line);
}

.daily-plan strong,
.daily-plan span {
    padding: 12px;
    background: #fff;
    text-align: center;
}

.daily-plan strong {
    background: #f4f8f5;
}

.study-timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.study-timeline > div {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.study-timeline strong {
    display: block;
    margin-bottom: 8px;
    color: var(--accent-strong);
}

.question-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.report-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .9fr);
    gap: 24px;
    align-items: center;
    margin: 16px 0 24px;
    padding: 20px;
    background: #fafafa;
    border: 1px solid #ededed;
}

.bar-chart {
    display: grid;
    gap: 14px;
}

.bar-chart-row {
    display: grid;
    grid-template-columns: minmax(100px, 150px) minmax(160px, 1fr) 58px;
    gap: 14px;
    align-items: center;
}

.bar-chart-track {
    height: 24px;
    overflow: hidden;
    background: #eceeed;
}

.bar-chart-track i {
    display: block;
    height: 100%;
}

.bar-chart-name {
    font-size: 14px;
}

.bar-chart-value {
    color: var(--mubo-ink);
    font-size: 16px;
    text-align: right;
}

.report-accuracy .bar-chart {
    max-width: 860px;
    margin-top: 20px;
}

.loss-pie-wrap {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.loss-pie {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 14px #fff;
}

.loss-pie-wrap h4 {
    margin: 0 0 8px;
}

.pie-legend {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
}

.pie-legend li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
    margin: 0;
    line-height: 1.3;
}

.pie-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.question-metrics > div {
    display: grid;
    gap: 5px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8faf9;
}

.question-metrics span {
    color: var(--muted);
    font-size: 13px;
}

.question-metrics strong {
    font-size: 22px;
}

.knowledge-errors {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    list-style: none;
}

.knowledge-errors li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-left: 3px solid #e46f56;
    background: #fff7f4;
}

.knowledge-errors span {
    color: var(--muted);
    white-space: nowrap;
}

.knowledge-summary td small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.knowledge-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 22px;
}

.knowledge-overview > div {
    display: grid;
    gap: 7px;
    padding: 15px;
    border: 1px solid var(--line);
    border-top: 3px solid #5f9e7a;
    border-radius: 8px;
}

.knowledge-overview > div:nth-child(2) {
    border-top-color: #e46f56;
}

.knowledge-overview > div:nth-child(3) {
    border-top-color: #d7a72d;
}

.knowledge-overview span {
    color: var(--muted);
    font-size: 13px;
}

.knowledge-actions {
    display: grid;
    gap: 10px;
}

.knowledge-actions li {
    padding: 12px 14px;
    border-left: 3px solid #e46f56;
    background: #fff7f4;
}

.knowledge-actions p {
    margin: 4px 0 0;
}

.action-check {
    display: block;
    margin-top: 6px;
    color: #5f7568;
    font-size: 13px;
}

.wrong-question-list {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.wrong-question-card {
    padding: 16px;
    border: 1px solid var(--line);
    border-left: 4px solid #e46f56;
    border-radius: 8px;
    background: #fff;
}

.wrong-question-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wrong-question-head span {
    color: var(--muted);
    font-size: 13px;
}

.question-excerpt {
    margin: 10px 0;
    padding: 10px 12px;
    color: #4b5d52;
    background: #f6f8f6;
    font-size: 14px;
}

.wrong-question-card dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.wrong-question-card dl > div {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    gap: 10px;
}

.wrong-question-card dt {
    color: var(--muted);
    font-weight: 700;
}

.wrong-question-card dd {
    margin: 0;
    line-height: 1.65;
}

.knowledge-chart,
.speaking-rubric {
    display: grid;
    gap: 12px;
    margin: 14px 0 22px;
}

.knowledge-chart-row,
.speaking-rubric-row {
    display: grid;
    gap: 7px;
}

.knowledge-chart-row > div:first-child,
.speaking-rubric-row > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.knowledge-chart-row span,
.speaking-rubric-row span,
.speaking-rubric-row p,
.audio-source {
    color: var(--muted);
}

.knowledge-track,
.speaking-track {
    height: 10px;
    overflow: hidden;
    border-radius: 5px;
    background: #edf0ee;
}

.knowledge-track i,
.speaking-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #5f9e7a;
}

.knowledge-track.danger i {
    background: #e46f56;
}

.speaking-track i {
    background: #e46f56;
}

.speaking-rubric-row {
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.speaking-rubric-row p {
    margin: 0;
    font-size: 13px;
}

.oral-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.oral-metrics > div {
    display: grid;
    gap: 6px;
    padding: 15px;
    border: 1px solid var(--line);
    border-top: 3px solid #5f9e7a;
    border-radius: 8px;
    background: #f8faf9;
}

.oral-metrics span {
    color: var(--muted);
    font-size: 13px;
}

.oral-metrics strong {
    font-size: 21px;
}

.question-review {
    margin-bottom: 18px;
}

.question-review form {
    display: grid;
    gap: 14px;
}

.bulk-answer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.question-table-wrap {
    overflow-x: auto;
}

.question-review table {
    min-width: 920px;
}

.question-review th:nth-child(1),
.question-review td:nth-child(1) {
    width: 80px;
}

.question-review th:nth-child(2),
.question-review td:nth-child(2) {
    width: 110px;
}

.question-review th:nth-child(4),
.question-review td:nth-child(4),
.question-review th:nth-child(5),
.question-review td:nth-child(5) {
    width: 130px;
}

.question-review input,
.question-review select {
    min-width: 0;
    margin: 0;
}

.ocr-raw pre {
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    color: var(--muted);
    max-height: 360px;
    overflow: auto;
}

.print-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.print-shell {
    max-width: 960px;
}

@media (max-width: 900px) {
    .topbar {
        height: auto;
        align-items: stretch;
        flex-direction: column;
        padding: 14px;
        gap: 12px;
    }

    .brand img {
        width: 120px;
        height: 36px;
    }

    nav {
        overflow-x: auto;
    }

    .shell {
        width: min(100vw - 24px, 1280px);
        margin-top: 18px;
    }

    .split,
    .editor-layout,
    .lesson-shell,
    .page-preview-layout,
    .metrics,
    .admin-note-grid,
    .form-grid.two,
    .form-grid.five,
    .assessment-score-grid,
    .speaking-score-grid,
    .dynamic-section-row,
    .ability-grid,
    .diagnosis-columns,
    .daily-plan,
    .study-timeline,
    .question-metrics,
    .knowledge-errors,
    .knowledge-overview,
    .oral-metrics,
    .wrong-question-card dl > div,
    .bulk-answer-grid,
    .report-cover {
        grid-template-columns: 1fr;
    }

    .lesson-audio {
        grid-template-columns: 1fr;
    }

    .cue-add-form {
        grid-template-columns: 1fr;
    }

    .sort-zones {
        grid-template-columns: 1fr;
    }

    .report-filter {
        grid-template-columns: 1fr;
    }

    .vocab-hero,
    .vocab-name-panel,
    .vocab-spell {
        align-items: stretch;
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .student-logo {
        width: 220px;
        height: 70px;
    }

    .vocab-hero h1,
    .vocab-card h2 {
        font-size: 24px;
    }

    .vocab-result {
        grid-template-columns: 72px 1fr;
        min-height: 92px;
    }

    .vocab-result strong {
        width: 64px;
        height: 64px;
        font-size: 46px;
    }

    .vocab-result span {
        font-size: 18px;
    }

    .share-link {
        width: 100%;
        min-width: 0;
    }

    .sort-actions {
        flex-wrap: wrap;
    }

    .sort-actions p {
        width: 100%;
        margin-left: 0;
    }

    .course-foot,
    .classroom-toolbar {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .course-foot {
        flex-direction: column;
    }

    .course-actions,
    .classroom-controls {
        justify-content: flex-start;
    }

    .classroom-title {
        justify-items: start;
    }

    .classroom-stage {
        min-height: 520px;
        padding: 10px;
    }

    .classroom-page {
        min-height: 480px;
        max-height: 64vh;
    }

    .classroom-tips {
        align-items: flex-start;
        flex-direction: column;
    }

    .classroom-tips span {
        overflow: visible;
        white-space: normal;
    }

    .form-panel {
        position: static;
    }

    .lesson-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .remote-frame {
        min-height: 420px;
        height: 62vh;
    }

    th,
    td {
        padding: 10px 8px;
    }
}

@media print {
    body {
        background: #fff;
    }

    .topbar,
    .no-print,
    .print-actions {
        display: none !important;
    }

    .shell {
        width: 100%;
        margin: 0;
    }

    .assessment-report {
        border: 0;
        box-shadow: none;
    }

    .report-cover,
    .report-chart-grid,
    .loss-pie-wrap,
    .report-section {
        break-inside: avoid;
        padding: 22px 0;
    }
}

/* Report components use the same four brand accents instead of dashboard green. */
.assessment-report table {
    border: 1px solid #e5e5e5;
    font-size: 13px;
}

.assessment-report th {
    background: var(--mubo-mint);
    color: var(--mubo-ink);
    font-weight: 800;
}

.assessment-report tr:nth-child(even) td {
    background: #fffdf0;
}

.report-module {
    background: #fff;
    break-inside: avoid;
}

.report-module + .report-module {
    border-top: 12px solid #f4f5f4;
}

.module-banner {
    padding: 18px 42px;
    color: var(--mubo-ink);
}

.module-banner div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
}

.module-banner h2,
.module-banner span {
    margin: 0;
    letter-spacing: 0;
}

.module-banner h2 {
    font-size: 24px;
}

.module-banner span {
    font-size: 12px;
    font-weight: 800;
}

.module-listening .module-banner {
    background: #ff9a8b;
}

.module-speaking .module-banner {
    background: var(--mubo-lilac);
}

.module-reading-writing .module-banner {
    background: var(--mubo-mint);
}

.module-content {
    padding: 28px 42px 38px;
}

.module-content h3 {
    margin: 28px 0 14px;
    padding-left: 12px;
    border-left: 4px solid var(--mubo-coral);
    color: #25332b;
    font-size: 17px;
}

.module-content > h3:first-child {
    margin-top: 0;
}

.module-speaking .module-content h3 {
    border-left-color: var(--mubo-lilac);
}

.module-reading-writing .module-content h3 {
    border-left-color: #6fc3a5;
}

.module-speaking .speaking-track i {
    background: var(--mubo-lilac);
}

.module-speaking .speaking-rubric-row {
    border: 0;
    border-bottom: 1px solid #e6e6f3;
    border-radius: 0;
    background: #fafafe;
}

.module-speaking .oral-metrics > div {
    border: 0;
    border-top: 4px solid var(--mubo-lilac);
    border-radius: 0;
    background: #f7f7fc;
}

.question-metrics > div:nth-child(1),
.knowledge-overview > div:nth-child(1) {
    border-top: 4px solid var(--mubo-mint);
    background: #f7fbf9;
}

.question-metrics > div:nth-child(2),
.knowledge-overview > div:nth-child(2) {
    border-top: 4px solid var(--mubo-coral);
    background: #fff7f4;
}

.question-metrics > div:nth-child(3),
.knowledge-overview > div:nth-child(3) {
    border-top: 4px solid var(--mubo-yellow);
    background: #fffdf0;
}

.question-metrics > div:nth-child(4) {
    border-top: 4px solid var(--mubo-lilac);
    background: #f7f7fc;
}

.wrong-question-card {
    border: 0;
    border-left: 5px solid var(--mubo-coral);
    border-radius: 0;
    background: #fff8f6;
}

.wrong-question-card:nth-child(4n + 2) {
    border-left-color: #6fc3a5;
    background: #f5fbf8;
}

.wrong-question-card:nth-child(4n + 3) {
    border-left-color: var(--mubo-yellow);
    background: #fffdf2;
}

.wrong-question-card:nth-child(4n + 4) {
    border-left-color: var(--mubo-lilac);
    background: #f7f7fc;
}

.wrong-question-head strong {
    color: #25332b;
    font-size: 15px;
}

.wrong-question-head span {
    color: #53675c;
    font-weight: 700;
}

.question-excerpt {
    color: var(--mubo-ink);
    background: #fff;
    border-left: 4px solid var(--mubo-yellow);
}

.knowledge-errors li,
.knowledge-actions li {
    border: 0;
    border-top: 5px solid var(--mubo-lilac);
    background: #f7f7fc;
    padding: 16px 18px;
}

.knowledge-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 0;
    list-style-position: inside;
}

.knowledge-actions li:nth-child(even) {
    border-top-color: #6fc3a5;
    background: #f5fbf8;
}

.knowledge-actions li::marker {
    color: var(--mubo-coral);
    font-weight: 800;
}

.knowledge-actions strong {
    color: #25332b;
}

.knowledge-track i {
    background: var(--mubo-coral);
}

.report-cover + .report-section {
    background: #fff;
}

@media (max-width: 700px) {
    .report-cover {
        min-height: 150px;
        padding: 24px 20px 24px;
    }

    .report-logo {
        top: 22px;
        left: 20px;
        width: 92px;
    }

    .report-title {
        padding: 58px 0 0;
    }

    .report-title h1 {
        font-size: 24px;
    }

    .report-title p {
        gap: 6px 14px;
    }

    .bar-chart-row {
        grid-template-columns: 82px minmax(100px, 1fr) 48px;
        gap: 8px;
    }

    .bar-chart-name {
        overflow-wrap: anywhere;
    }

    .knowledge-actions {
        grid-template-columns: 1fr;
    }

    .module-banner,
    .module-content {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* MuBo workspace UI: solid brand blocks, quiet surfaces, and consistent hierarchy. */
body.app-page {
    background: #f4f5f2;
}

.login-page .shell {
    width: 100%;
    margin: 0;
}

.login-page .login-wrap {
    min-height: 100vh;
    padding: 0;
    background: #f5f3ed;
}

.login-stage {
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(500px, .72fr);
    overflow: hidden;
    background: #f5f3ed;
}

.login-stage::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 26px;
    border: 1px solid rgba(37, 42, 39, .14);
    pointer-events: none;
}

.login-stage::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 9px;
    height: 62%;
    background: var(--accent);
}

.login-brand-panel {
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 64px 40px 64px 6.1vw;
    background: transparent;
}

.login-brand-logo {
    width: 210px;
    height: auto;
    position: absolute;
    z-index: 4;
    top: 52px;
    right: 4.1%;
    display: block;
}

.login-watermark {
    position: absolute;
    top: 27%;
    left: 6.1vw;
    color: rgba(184, 221, 200, .42);
    font-size: clamp(120px, 12vw, 184px);
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
}

.login-brand-message {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 38px;
    margin: auto 0 0;
    color: #31483e;
}

.login-brand-message strong {
    max-width: 560px;
    font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
    font-size: 58px;
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: 0;
}

.login-brand-rule {
    width: 408px;
    height: 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.login-brand-rule i {
    display: block;
}

.login-brand-rule i:nth-child(1) { background: var(--accent); }
.login-brand-rule i:nth-child(2) { background: var(--yellow); }
.login-brand-rule i:nth-child(3) { background: var(--mint); }
.login-brand-rule i:nth-child(4) { background: var(--violet); }

.login-page .login-panel {
    width: min(440px, calc(100% - 48px));
    align-self: center;
    justify-self: center;
    padding: 0 0 0 30px;
    border: 0;
    border-left: 1px solid rgba(37, 42, 39, .18);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.login-page label {
    gap: 9px;
    margin-bottom: 20px;
    font-size: 14px;
}

.login-page input {
    min-height: 58px;
    padding: 13px 15px;
    border-color: #d8deda;
    background: rgba(255, 255, 255, .72);
}

.login-page .primary {
    min-height: 56px;
    margin-top: 8px;
    font-size: 16px;
}

.topbar {
    min-height: 72px;
    position: sticky;
    padding-top: 5px;
    border-bottom: 1px solid #e2e6e2;
    background: #fff;
    box-shadow: 0 5px 18px rgba(37, 51, 43, .05);
}

.topbar-colors {
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.topbar-colors span:nth-child(1) { background: var(--accent); }
.topbar-colors span:nth-child(2) { background: var(--yellow); }
.topbar-colors span:nth-child(3) { background: var(--mint); }
.topbar-colors span:nth-child(4) { background: var(--violet); }

.brand img {
    width: 128px;
    height: 40px;
}

.brand > span {
    color: #25332b;
    border-left-color: #d7ddd8;
    font-weight: 900;
}

nav a {
    border-radius: 6px;
    color: #5b6760;
    font-size: 14px;
}

nav a.active {
    color: #252a27;
    background: var(--yellow);
    box-shadow: inset 0 -3px #e4bd36;
}

nav a:hover {
    color: #252a27;
    background: #f1f5f2;
}

.app-page .shell {
    margin-top: 32px;
}

.app-page .page-head {
    min-height: 116px;
    align-items: center;
    padding: 24px 28px;
    border-left: 8px solid var(--accent);
    background: #fff5f2;
}

.app-page.route-dashboard .page-head {
    border-left-color: #e7c247;
    background: #fffbed;
}

.app-page.route-vocab .page-head {
    border-left-color: var(--accent);
    background: #fff5f2;
}

.app-page.route-assessment .page-head {
    border-left-color: var(--violet);
    background: #f5f5fc;
}

.app-page.route-admin .page-head,
.app-page.route-teachers .page-head,
.app-page.route-members .page-head,
.app-page.route-listening-admin .page-head,
.app-page.route-courses .page-head,
.app-page.route-editor .page-head,
.app-page.route-grants .page-head,
.app-page.route-logs .page-head {
    border-left-color: #6fc3a5;
    background: #f1f8f4;
}

.app-page .page-head h1 {
    color: #25332b;
    font-size: 32px;
}

.app-page .panel,
.app-page .course-card,
.app-page .metrics > div {
    border-color: #e0e5e1;
    box-shadow: none;
}

.app-page main > .panel,
.app-page main > .split > .panel,
.app-page main > .split > .form-panel {
    border-top: 4px solid var(--mint);
}

.app-page.route-vocab main > .panel,
.app-page.route-vocab main > .split > .panel {
    border-top-color: var(--accent);
}

.app-page.route-assessment main > .panel {
    border-top-color: var(--violet);
}

.app-page.route-assessment main > .split > .panel,
.app-page.route-assessment main > .split > .form-panel {
    border-top-color: var(--violet);
}

.route-assessment .assessment-split {
    grid-template-columns: minmax(440px, 500px) minmax(0, 1fr);
}

.route-assessment .assessment-form .speaking-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-page .panel-head {
    padding-bottom: 10px;
    border-bottom: 1px solid #e8ece9;
}

.app-page input,
.app-page select,
.app-page textarea {
    border-color: #d8deda;
    background: #fbfcfa;
}

.app-page th {
    color: #3f5047;
    background: #f0f6f2;
}

.app-page tbody tr:hover {
    background: #fffbed;
}

.app-page .metrics > div:nth-child(1) { border-top-color: var(--accent); background: #fff8f6; }
.app-page .metrics > div:nth-child(2) { border-top-color: var(--mint); background: #f5faf7; }
.app-page .metrics > div:nth-child(3) { border-top-color: var(--yellow); background: #fffdf2; }
.app-page .metrics > div:nth-child(4) { border-top-color: var(--violet); background: #f7f7fc; }

.app-page .user-chip {
    color: #3c4c43;
    background: #f3f6f4;
}

.member-shell {
    display: grid;
    gap: 22px;
}

.member-page {
    background: #f3f6f4;
}

.member-page .topbar {
    border-bottom-color: #dfe6e1;
    background: rgba(255, 255, 255, .97);
}

.member-page .topbar nav a:nth-child(1):hover,
.member-page .topbar nav a:nth-child(1).active { background: #dff3fb; box-shadow: inset 0 -3px #62b9da; }
.member-page .topbar nav a:nth-child(2):hover,
.member-page .topbar nav a:nth-child(2).active { background: #eeeafd; box-shadow: inset 0 -3px #9485dc; }
.member-page .topbar nav a:nth-child(3):hover,
.member-page .topbar nav a:nth-child(3).active { background: #fff4c9; box-shadow: inset 0 -3px #e2b933; }
.member-page .topbar nav a:nth-child(4):hover,
.member-page .topbar nav a:nth-child(4).active { background: #ffe9e4; box-shadow: inset 0 -3px #eb806b; }

.member-hero {
    min-height: 230px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    padding: 42px 46px;
    position: relative;
    overflow: hidden;
    border: 1px solid #dde4df;
    border-radius: 8px;
    background: #eaf6f0;
}

.member-hero-listening {
    border-color: #c9e5ef;
    background: #e6f6fc;
}

.member-hero-reading {
    border-color: #ddd5f5;
    background: #f0ecfd;
}

.member-hero-courses {
    border-color: #eedb98;
    background: #fff6d7;
}

.member-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 8px;
    background: linear-gradient(90deg, var(--accent) 0 25%, var(--yellow) 25% 50%, var(--mint) 50% 75%, var(--violet) 75% 100%);
}

.member-hero::after {
    content: "MU BO";
    position: absolute;
    top: 28px;
    right: 42px;
    color: rgba(55, 79, 66, .055);
    font-size: 92px;
    font-weight: 900;
    line-height: 1;
}

.member-hero > * {
    position: relative;
    z-index: 1;
}

.member-eyebrow {
    color: #648073;
    font-size: 12px;
    font-weight: 900;
}

.member-hero h1 {
    margin: 12px 0 8px;
    color: #24372d;
    font-size: 38px;
}

.member-hero p {
    margin: 0;
    color: #5f7067;
    font-size: 17px;
}

.member-person {
    min-width: 150px;
    display: grid;
    gap: 5px;
    padding: 14px 18px;
    border: 1px solid rgba(58, 82, 69, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
}

.member-person strong {
    color: #2d4036;
    font-size: 15px;
}

.club-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #d9e2dc;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.club-switch {
    min-height: 116px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-content: center;
    column-gap: 12px;
    padding: 22px 24px;
    border-right: 1px solid #e4e9e5;
    color: #31433a;
    text-decoration: none;
    position: relative;
}

.club-switch:last-child {
    border-right: 0;
}

.club-switch::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 5px;
    opacity: 0;
    transition: opacity .18s ease;
}

.club-switch-listening { background: #eaf7fc; }
.club-switch-reading { background: #f2effd; }
.club-switch-courses { background: #fff7dc; }
.club-switch-records { background: #fff0ec; }

.club-switch:hover,
.club-switch.active { filter: saturate(1.08); }

.club-switch.active::after {
    opacity: 1;
}

.club-switch-listening::after { background: #54b890; }
.club-switch-reading::after { background: #9d91dc; }
.club-switch-courses::after { background: #efbd39; }
.club-switch-records::after { background: #ef806b; }

.club-switch > span {
    grid-row: 1 / 3;
    color: #98a59e;
    font-size: 12px;
    font-weight: 900;
}

.club-switch strong {
    font-size: 17px;
}

.club-switch small {
    margin-top: 6px;
    color: #7b8981;
    font-size: 13px;
}

.club-library {
    min-height: 310px;
    padding: 32px 34px;
    border: 1px solid #dfe5e1;
    border-left: 7px solid #54b890;
    border-radius: 8px;
    background: #f1f8f4;
}

.club-library-reading { border-left-color: #9d91dc; background: #f3f0fd; }
.club-library-courses { border-left-color: #efbd39; background: #fff8e1; }
.club-library-listening { border-left-color: #62b9da; background: #eef8fc; }

.club-library-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e7ebe8;
}

.club-library-head > span {
    color: #98a59e;
    font-size: 12px;
    font-weight: 900;
}

.club-library-head p {
    margin: 0 0 4px;
    color: #78887f;
    font-size: 11px;
    font-weight: 900;
}

.club-library-head h2 {
    margin: 0;
    color: #2c4035;
    font-size: 22px;
}

.club-empty-state {
    min-height: 205px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: left;
}

.club-empty-state strong {
    color: #304238;
    font-size: 18px;
}

.club-empty-state p {
    max-width: 520px;
    margin: 8px 0 0;
    color: #748179;
    line-height: 1.7;
}

.club-empty-mark {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid #dce5e0;
    border-radius: 50%;
    background: #f6faf8;
}

.club-empty-mark i {
    width: 5px;
    border-radius: 3px;
    background: #54b890;
}

.club-empty-mark i:nth-child(1) { height: 18px; }
.club-empty-mark i:nth-child(2) { height: 32px; }
.club-empty-mark i:nth-child(3) { height: 24px; }
.club-library-reading .club-empty-mark i { background: #9d91dc; }
.club-library-courses .club-empty-mark i { background: #efbd39; }

.reading-library {
    min-height: 420px;
    padding-inline: 0;
    overflow: hidden;
    background: #f4f1fd;
}

.reading-area-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid #d9d3ec;
    background: #fff;
}

.reading-area-tabs a {
    min-height: 54px;
    display: grid;
    place-items: center;
    border-bottom: 4px solid transparent;
    color: #625d72;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
}

.reading-area-tabs a + a { border-left: 1px solid #e6e2f0; }
.reading-area-tabs a:hover { background: #f8f6fd; }
.reading-area-tabs a.active { border-bottom-color: #7465b3; background: #eeebfa; color: #3d355f; }

.reading-library > .club-library-head,
.reading-level-nav {
    margin-inline: 34px;
}

.reading-level-nav {
    display: flex;
    gap: 8px;
    padding: 22px 0 16px;
    overflow-x: auto;
}

.reading-level-pill {
    min-width: 112px;
    min-height: 58px;
    flex: 0 0 auto;
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 9px 13px;
    border: 1px solid #d6d0eb;
    border-top: 5px solid #9d91dc;
    border-radius: 7px;
    background: rgba(255, 255, 255, .9);
    color: #4e4965;
    text-decoration: none;
}

.reading-level-pill strong {
    font-size: 14px;
}

.reading-level-pill small {
    color: #858096;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.reading-level-pill.level-red { border-top-color: #ed746b; }
.reading-level-pill.level-orange { border-top-color: #f3a84a; }
.reading-level-pill.level-yellow { border-top-color: #e3c84f; }
.reading-level-pill.level-green { border-top-color: #64b882; }
.reading-level-pill.level-cyan { border-top-color: #53bfc1; }
.reading-level-pill.level-blue { border-top-color: #6497d8; }
.reading-level-pill.level-purple { border-top-color: #8d78d4; }
.reading-level-pill.level-diamond { border-top-color: #3e4354; }

.reading-level-pill:hover,
.reading-level-pill.active {
    border-color: #6b618f;
    background: #6b618f;
    color: #fff;
}

.reading-level-pill.active small {
    color: rgba(255, 255, 255, .8);
}

.reading-level-list {
    display: grid;
    gap: 0;
    margin-top: 22px;
}

.newspaper-publication-list {
    display: grid;
    margin-top: 22px;
}

.newspaper-publication {
    min-height: 210px;
    padding: 30px 34px 36px;
    border-top: 1px solid #dce5e0;
    background: #f4faf7;
}

.newspaper-publication:nth-child(even) { background: #fff8df; }
.newspaper-publication > header { margin-bottom: 20px; padding-left: 14px; border-left: 6px solid #4d9a78; }
.newspaper-publication:nth-child(even) > header { border-left-color: #d7a42d; }
.newspaper-publication > header span { color: #648073; font-size: 10px; font-weight: 900; }
.newspaper-publication > header h2 { margin: 4px 0 0; color: #2f3c36; font-size: 24px; }
.newspaper-issue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.newspaper-issue { min-height: 84px; display: grid; align-content: center; gap: 5px; padding: 14px; border: 1px solid #d7e3dd; border-radius: 7px; background: #fff; color: #31473d; text-decoration: none; }
.newspaper-issue span { color: #6f7f77; font-size: 10px; font-weight: 850; }
.newspaper-empty { min-height: 86px; display: grid; place-items: center; border: 1px dashed #cbd7d1; color: #77847e; font-size: 12px; font-weight: 800; }

.reading-level-section {
    padding: 30px 34px 36px;
    border-top: 1px solid rgba(74, 65, 104, .11);
    background: color-mix(in srgb, var(--reading-level-color) 9%, #fff);
}

.reading-level-section:nth-child(even) {
    background: color-mix(in srgb, var(--reading-level-color) 13%, #fff);
}

.reading-level-section > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
    padding-left: 14px;
    border-left: 6px solid var(--reading-level-color);
}

.reading-level-section > header span {
    color: var(--reading-level-color);
    font-size: 11px;
    font-weight: 900;
}

.reading-level-section > header h2 {
    margin: 4px 0 0;
    color: #302d3e;
    font-size: 25px;
}

.reading-level-section > header p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.reading-level-section > header p strong,
.reading-level-section > header p span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--reading-level-color) 40%, #fff);
    border-radius: 6px;
    background: rgba(255, 255, 255, .82);
    color: #555065;
    font-size: 11px;
}

.reading-series-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
    gap: 16px;
}

.reading-series-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--reading-level-color) 30%, #dfe3e1);
    border-top: 5px solid var(--reading-level-color);
    border-radius: 8px;
    background: rgba(255, 255, 255, .94);
}

.reading-cover {
    width: 100%;
    aspect-ratio: 4 / 5;
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--reading-level-color) 28%, #e0e5e2);
    border-radius: 6px;
    background: #fff;
}

.reading-cover-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: space-between;
    gap: 20px;
    padding: 22px 16px 16px;
    border-bottom: 18px solid var(--reading-level-color);
    background: color-mix(in srgb, var(--reading-level-color) 18%, #fff);
    color: #302e39;
}

.reading-cover-fallback::before {
    content: "MUBO READING";
    color: var(--reading-level-color);
    font-size: 9px;
    font-weight: 900;
}

.reading-cover-fallback b {
    align-self: center;
    overflow-wrap: anywhere;
    font-size: 17px;
    line-height: 1.28;
}

.reading-cover-fallback small {
    color: #5e5969;
    font-size: 10px;
    font-weight: 900;
}

.reading-cover img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: contain;
    background: #fff;
}

.reading-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 11px;
}

.reading-card-badges span {
    padding: 4px 6px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--reading-level-color) 14%, #f6f7f6);
    color: #5c5767;
    font-size: 9px;
    font-weight: 900;
}

.reading-series-card h3 {
    min-height: 44px;
    margin: 10px 0 8px;
    overflow-wrap: anywhere;
    color: #30383a;
    font-size: 15px;
    line-height: 1.38;
}

.reading-card-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid #e7ebe8;
}

.reading-resource-state {
    color: #9b6c30;
    font-size: 10px;
    font-weight: 900;
}

.reading-resource-state.ready {
    color: #2d8a64;
}

.reading-card-status small {
    color: #92999a;
    font-size: 9px;
}

.reading-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 10px;
}

.reading-card-actions a,
.reading-card-actions span {
    min-height: 32px;
    display: grid;
    place-items: center;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
}

.reading-card-actions a {
    border: 1px solid var(--reading-level-color);
    background: var(--reading-level-color);
    color: #fff;
    text-decoration: none;
}

.reading-card-actions a + a {
    background: #fff;
    color: #4d4859;
}

.reading-card-actions.pending {
    grid-template-columns: 1fr;
}

.reading-card-actions.pending span {
    border: 1px dashed #d8d5df;
    background: #f7f7f7;
    color: #8a8790;
}

.member-role {
    min-width: 92px;
    padding: 12px 18px;
    border: 1px solid #d4ddd7;
    border-radius: 8px;
    background: #fff;
    color: #2f493b;
    text-align: center;
}

.member-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #e0e5e1;
    border-radius: 8px;
    background: #fff;
}

.member-facts > div {
    min-height: 88px;
    display: grid;
    align-content: center;
    gap: 7px;
    padding: 18px 22px;
    border-right: 1px solid #e8ece9;
}

.member-facts > div:last-child {
    border-right: 0;
}

.member-facts span,
.member-person span,
.member-learning-empty span {
    color: var(--muted);
    font-size: 13px;
}

.member-content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.member-section {
    min-height: 250px;
    padding: 26px 28px;
    border: 1px solid #e0e5e1;
    border-top: 5px solid var(--violet);
    border-radius: 8px;
    background: #fff;
}

.member-section.learning-section {
    border-top-color: var(--yellow);
    background: #fffdf5;
}

.member-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e9edea;
}

.member-section-head span {
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 900;
}

.member-section-head h2,
.family-link-panel h2 {
    margin: 0;
    color: #2d4036;
    font-size: 20px;
}

.student-profile-list {
    display: grid;
    gap: 0;
    margin: 18px 0 0;
}

.student-profile-list > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid #e9edea;
}

.student-profile-list > div:last-child {
    border-bottom: 0;
}

.student-profile-list dt {
    color: var(--muted);
}

.student-profile-list dd {
    margin: 0;
    color: #2d4036;
    font-weight: 800;
}

.member-learning-empty {
    min-height: 144px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    color: #3a463f;
}

.listening-summary-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid #dbe6e0;
    border-radius: 8px;
    background: #fff;
}

.listening-summary-band > div {
    min-height: 98px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 20px 26px;
    border-right: 1px solid #e6ebe8;
}

.listening-summary-band > div:last-child {
    border-right: 0;
}

.listening-summary-band span {
    color: #718078;
    font-size: 12px;
    font-weight: 800;
}

.listening-summary-band strong {
    color: #274236;
    font-size: 23px;
}

.listening-library {
    min-height: 360px;
}

.listening-filter-board {
    display: grid;
    gap: 8px;
    padding: 20px 0 24px;
}

.listening-filter-board.compact {
    padding-top: 10px;
}

.listening-filter-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 11px 14px;
    border-left: 5px solid #82c9e4;
    background: #eef9fd;
}

.listening-filter-row > strong {
    padding: 8px 0;
    color: #38594c;
    font-size: 12px;
    line-height: 1;
}

.filter-row-level {
    border-left-color: #efc64d;
    background: #fff9e9;
}

.filter-row-topic {
    border-left-color: #78bea0;
    background: #f0f8f4;
}

.filter-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.filter-pill {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border: 1px solid #c8ddd4;
    border-radius: 6px;
    background: rgba(255, 255, 255, .85);
    color: #50685c;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}

.filter-pill:hover {
    border-color: #5ea987;
    color: #2f7759;
}

.filter-pill.active {
    border-color: #397e60;
    background: #397e60;
    color: #fff;
    box-shadow: 0 3px 8px rgba(45, 105, 79, .15);
}

.filter-row-type .filter-pill.active {
    border-color: #3186a5;
    background: #3186a5;
}

.filter-row-level .filter-pill.active {
    border-color: #c88f16;
    background: #c88f16;
}

.listening-resource-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.listening-resource-card {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto auto;
    padding: 12px;
    border: 1px solid #dfe6e2;
    border-radius: 8px;
    background: #fff;
    color: #2f4137;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease;
}

.listening-resource-card:hover {
    border-color: #82bea5;
    transform: translateY(-2px);
}

.listening-cover,
.listening-player-cover {
    overflow: hidden;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 6px;
    background: #b8e5d3;
}

.listening-cover-song,
.listening-player-cover.listening-cover-song {
    background: #f8dc73;
}

.listening-cover img,
.listening-player-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.listening-cover > span,
.listening-player-cover > span {
    color: rgba(37, 67, 53, .72);
    font-size: 58px;
    font-weight: 900;
}

.listening-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.listening-card-meta span {
    padding: 4px 7px;
    border-radius: 4px;
    background: #eef5f1;
    color: #567065;
    font-size: 10px;
    font-weight: 800;
}

.listening-card-meta .cefr-badge {
    border: 1px solid #e4c14b;
    background: #f8dc73;
    color: #315b49;
}

.listening-resource-card h3 {
    overflow: hidden;
    margin: 10px 0 5px;
    font-size: 16px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listening-resource-card p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #718078;
    font-size: 12px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.listening-card-progress {
    height: 5px;
    overflow: hidden;
    margin-top: 14px;
    border-radius: 3px;
    background: #e8eeea;
}

.listening-card-progress i {
    display: block;
    height: 100%;
    background: #5ab890;
}

.listening-resource-card small {
    margin-top: 7px;
    color: #7b8881;
}

.podcast-show-card {
    border-top: 5px solid #5ab890;
}

.song-catalog-card {
    border-top: 5px solid #f1c94f;
}

.song-catalog-card .listening-cover {
    background: #fff4b8;
}

.super-simple-wordmark {
    color: #315b49 !important;
    font-size: 34px !important;
    line-height: .9;
    text-align: center;
}

.podcast-show-count {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e4ebe7;
    color: #61736a;
    font-size: 11px;
}

.podcast-show-count strong {
    color: #315b49;
    font-size: 20px;
}

.podcast-show-count i {
    margin-left: auto;
    color: #8a799f;
    font-style: normal;
    font-weight: 800;
}

.listening-library-empty {
    grid-column: 1 / -1;
    min-height: 190px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    border: 1px dashed #ccd9d2;
    border-radius: 8px;
    color: #40564a;
}

.listening-library-empty span {
    color: #7b8881;
    font-size: 13px;
}

.listening-history-panel {
    border-left-color: #9d91dc;
}

.listening-history-panel table {
    margin-top: 18px;
}

.listening-back {
    width: fit-content;
    color: #526b5e;
    font-weight: 800;
    text-decoration: none;
}

.podcast-show-page {
    display: grid;
    gap: 20px;
}

.super-simple-library-page {
    display: grid;
    gap: 20px;
}

.super-simple-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    padding: 34px 38px;
    border-top: 8px solid #f1c94f;
    border-right: 8px solid #ef8c79;
    background: #fffdf4;
}

.super-simple-hero > div > span,
.super-simple-admin-card > div > span {
    color: #8a799f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
}

.super-simple-hero h1 {
    margin: 8px 0;
    color: #283f34;
    font-size: 38px;
}

.super-simple-hero p {
    margin: 0;
    color: #64776d;
}

.super-simple-hero > strong {
    color: #db6f62;
    font-size: 54px;
    line-height: 1;
    text-align: right;
}

.super-simple-hero > strong small {
    display: block;
    margin-top: 8px;
    color: #61736a;
    font-size: 12px;
}

.super-simple-results {
    border-left-color: #82c9e4;
}

.super-simple-search {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 20px 0 0;
}

.super-simple-search input {
    min-height: 42px;
}

.super-simple-search > a {
    color: #66786e;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

.super-simple-song-card {
    border-top: 4px solid #82c9e4;
}

.super-simple-song-card:nth-child(4n + 2) {
    border-top-color: #ef8c79;
}

.super-simple-song-card:nth-child(4n + 3) {
    border-top-color: #f1c94f;
}

.super-simple-song-card:nth-child(4n) {
    border-top-color: #9d91dc;
}

.podcast-show-hero {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    align-items: center;
    gap: 36px;
    padding: 34px;
    border-top: 7px solid #5ab890;
    background: #eef8f3;
}

.podcast-show-hero h1 {
    margin: 14px 0 7px;
    color: #253d31;
    font-size: 36px;
}

.podcast-show-hero > div:last-child > strong {
    color: #547064;
    font-size: 14px;
}

.podcast-show-hero p {
    max-width: 820px;
    margin: 14px 0 0;
    color: #60756a;
    line-height: 1.75;
}

.podcast-source-line,
.podcast-player-source {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    color: #738279;
    font-size: 12px;
}

.podcast-source-line a,
.podcast-player-source a {
    color: #39785e;
    font-weight: 900;
}

.podcast-episode-list {
    padding: 28px 30px 12px;
    border-left: 7px solid #9d91dc;
    background: #fff;
}

.podcast-episode-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 20px 2px;
    border-bottom: 1px solid #e4e9e6;
    color: #2d4136;
    text-decoration: none;
}

.podcast-episode-row:last-child {
    border-bottom: 0;
}

.podcast-pagination {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) auto minmax(110px, 1fr);
    align-items: center;
    gap: 16px;
    padding: 24px 2px 16px;
}

.podcast-pagination a,
.podcast-pagination > span {
    color: #39785e;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.podcast-pagination a:last-child,
.podcast-pagination > span:last-child {
    text-align: right;
}

.podcast-pagination .disabled {
    color: #aeb8b2;
}

.podcast-pagination strong {
    color: #344b3f;
    font-size: 13px;
    text-align: center;
}

.podcast-pagination small {
    margin-left: 6px;
    color: #7b8881;
    font-weight: 700;
}

.podcast-episode-row:hover h2 {
    color: #398263;
}

.podcast-episode-number {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #b7d7c8;
    border-radius: 50%;
    background: #f1faf6;
}

.podcast-episode-number span {
    color: #39785e;
    font-size: 9px;
    font-weight: 900;
}

.podcast-episode-copy {
    min-width: 0;
}

.podcast-episode-copy small {
    color: #829087;
    font-size: 11px;
}

.podcast-episode-copy h2 {
    margin: 5px 0;
    font-size: 17px;
    line-height: 1.45;
}

.podcast-episode-copy p {
    overflow: hidden;
    margin: 0;
    color: #748178;
    font-size: 12px;
    line-height: 1.55;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podcast-episode-row > strong {
    color: #776a8c;
    font-size: 12px;
    white-space: nowrap;
}

.listening-player-page {
    display: grid;
    gap: 20px;
}

.listening-player-hero {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: center;
    gap: 34px;
    padding: 30px;
    border: 1px solid #dbe5df;
    border-top: 7px solid #5ab890;
    border-radius: 8px;
    background: #f3faf6;
}

.listening-player-copy h1 {
    margin: 15px 0 10px;
    color: #273e32;
    font-size: 34px;
}

.listening-player-copy > p {
    max-width: 720px;
    margin: 0;
    color: #67786f;
    line-height: 1.7;
}

.listening-control-panel,
.listening-transcript {
    padding: 28px 30px;
    border: 1px solid #dfe5e1;
    border-radius: 8px;
    background: #fff;
}

.listening-control-panel audio {
    width: 100%;
}

.super-simple-admin-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-top: 6px solid #f1c94f;
    border-left: 6px solid #82c9e4;
}

.super-simple-admin-card h2 {
    margin: 7px 0;
}

.super-simple-admin-card p {
    margin: 0 0 8px;
    color: #65766d;
}

.speed-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #e5ebe7;
}

.speed-control > span {
    color: #455a4e;
    font-size: 13px;
    font-weight: 900;
}

.speed-options {
    display: flex;
    overflow: hidden;
    border: 1px solid #cfdad4;
    border-radius: 7px;
}

.speed-option {
    min-width: 62px;
    min-height: 40px;
    border: 0;
    border-right: 1px solid #dbe3de;
    border-radius: 0;
    background: #fff;
    color: #52665b;
}

.speed-option:last-child {
    border-right: 0;
}

.speed-option.active {
    background: #376c56;
    color: #fff;
}

.listening-live-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 22px;
    border: 1px solid #e0e7e3;
    border-radius: 8px;
    background: #f8faf9;
}

.listening-live-status > div {
    display: grid;
    gap: 7px;
    padding: 18px 20px;
    border-right: 1px solid #e0e7e3;
}

.listening-live-status > div:last-child {
    border-right: 0;
}

.listening-live-status span {
    color: #718078;
    font-size: 12px;
}

.listening-live-status strong {
    color: #2b4638;
    font-size: 18px;
}

.listening-transcript {
    border-left: 7px solid #9d91dc;
}

.listening-transcript-body {
    padding-top: 20px;
    color: #3f5147;
    line-height: 1.85;
}

.listening-transcript-body h2,
.listening-transcript-body h3 {
    color: #2d4136;
}

.listening-admin-layout {
    display: grid;
    grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
    gap: 20px;
}

.table-actions {
    display: flex;
    gap: 6px;
}

.danger-text {
    color: #a94343;
}

.records-shell {
    gap: 18px;
}

.records-hero {
    min-height: 126px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 34px;
    border: 1px solid #d9d2f3;
    border-left: 9px solid #ef806b;
    border-radius: 8px;
    background: #eeeafd;
}

.records-hero span,
.record-calendar-section header span,
.record-history-section header span {
    color: #7468ae;
    font-size: 11px;
    font-weight: 900;
}

.records-hero h1 {
    margin: 6px 0 0;
    color: #302d45;
    font-size: 31px;
}

.records-hero p {
    margin: 0;
    color: #665f84;
    font-size: 14px;
    font-weight: 800;
}

.record-summary-band {
    display: grid;
    grid-template-columns: 1.25fr repeat(4, minmax(115px, .82fr)) minmax(220px, 1.6fr);
    overflow: hidden;
    border: 1px solid #d9e1dc;
    border-radius: 8px;
    background: #fff;
}

.record-summary-band > div {
    min-width: 0;
    min-height: 126px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 20px;
    border-right: 1px solid rgba(80, 96, 87, .11);
}

.record-summary-band > div:last-child { border-right: 0; }

.record-summary-band span {
    color: #596b61;
    font-size: 11px;
    font-weight: 900;
}

.record-summary-band strong {
    color: #263c31;
    font-size: 26px;
    line-height: 1.1;
}

.record-summary-band small {
    color: #748178;
    font-size: 10px;
    font-weight: 800;
}

.record-student { background: #ffece8; }
.record-metric.metric-words { background: #fff7d9; }
.record-metric.metric-reading { background: #eaf6f0; }
.record-metric.metric-listening { background: #e7f5fb; }
.record-metric.metric-lexile { background: #eeeafd; }
.record-ar { background: #fff; }

.record-ar {
    grid-template-columns: auto minmax(112px, 1fr);
    align-items: center;
    gap: 16px !important;
}

.record-ar > div:first-child {
    display: grid;
    gap: 5px;
}

.record-ar-progress {
    display: grid;
    gap: 9px;
}

.record-ar-progress span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.record-ar-progress b { color: #e16e59; }

.record-ar-progress > i {
    height: 9px;
    overflow: hidden;
    border-radius: 5px;
    background: #ece8f8;
}

.record-ar-progress em {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #ef806b;
}

.record-calendar-section,
.record-history-section {
    padding: 30px 32px 34px;
    border: 1px solid #d9d5ee;
    border-radius: 8px;
    background: #ece9fb;
}

.record-calendar-section > header,
.record-history-section > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
}

.record-calendar-section h2,
.record-history-section header h2 {
    margin: 5px 0 0;
    color: #343048;
    font-size: 24px;
}

.record-year-nav {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 38px 76px 38px;
    gap: 0;
    overflow: hidden;
    border: 1px solid #c9c1eb;
    border-radius: 7px;
    background: #fff;
}

.record-year-nav a,
.record-year-nav strong {
    min-height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #5e5394;
}

.record-year-nav a:hover { background: #f3f0fd; }

.record-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 18px;
    color: #625d78;
    font-size: 11px;
    font-weight: 800;
}

.record-calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.record-calendar-legend i {
    width: 11px;
    height: 11px;
    border-radius: 3px;
}

.record-calendar-legend .audio { background: #62b9da; }
.record-calendar-legend .reading { background: #8d7bd5; }
.record-calendar-legend .both { background: #ef806b; }

.record-calendar-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.record-calendar-month {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(116, 104, 174, .16);
    border-radius: 7px;
    background: rgba(255, 255, 255, .88);
}

.record-calendar-month:nth-child(4n + 2) { background: #fff9e5; }
.record-calendar-month:nth-child(4n + 3) { background: #edf8f3; }
.record-calendar-month:nth-child(4n) { background: #eaf7fc; }

.record-calendar-month h3 {
    margin: 0 0 12px;
    color: #3b3948;
    font-size: 14px;
}

.record-calendar-weekdays,
.record-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.record-calendar-weekdays { margin-bottom: 5px; }

.record-calendar-weekdays span {
    color: #9994ae;
    font-size: 9px;
    font-weight: 800;
    text-align: center;
}

.record-calendar-day,
.record-calendar-blank {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 4px;
    color: #8a8795;
    font-size: 9px;
    font-style: normal;
}

.record-calendar-day {
    border: 1px solid #eceaf3;
    background: rgba(255, 255, 255, .7);
}

.record-calendar-day.audio,
.record-calendar-day.reading,
.record-calendar-day.both {
    border-color: transparent;
    color: #fff;
    font-weight: 900;
}

.record-calendar-day.audio { background: #62b9da; }
.record-calendar-day.reading { background: #8d7bd5; }
.record-calendar-day.both { background: #ef806b; }

.record-history-section {
    border-color: #cde4ec;
    background: #eaf7fb;
}

.record-type-tabs {
    flex: 0 0 auto;
    display: flex;
    gap: 7px;
}

.record-type-tab {
    min-width: 68px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid #bcd6df;
    border-radius: 6px;
    background: rgba(255, 255, 255, .85);
    color: #4f6d78;
    font-size: 12px;
    font-weight: 900;
}

.record-type-tab.active {
    border-color: #3787a3;
    background: #3787a3;
    color: #fff;
}

.record-history-month {
    padding: 20px 0 2px;
    border-top: 1px solid rgba(60, 123, 144, .15);
}

.record-history-month > h2 {
    margin: 0 0 12px;
    color: #3d5963;
    font-size: 16px;
}

.record-history-month > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.record-history-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px solid #d7e7ec;
    border-left: 5px solid #62b9da;
    border-radius: 7px;
    background: #fff;
}

.record-history-article { border-left-color: #8d7bd5; }
.record-history-book { border-left-color: #efbd39; }

.record-history-cover {
    overflow: hidden;
    width: 68px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: #dff1f7;
    color: #39788e;
    font-size: 24px;
    font-weight: 900;
}

.record-history-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.record-history-copy { min-width: 0; }

.record-history-copy > span {
    color: #39809a;
    font-size: 10px;
    font-weight: 900;
}

.record-history-copy h3 {
    overflow: hidden;
    margin: 4px 0;
    color: #2f4147;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record-history-copy p {
    overflow: hidden;
    margin: 0;
    color: #73868c;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record-history-copy p span { margin-left: 7px; }

.record-history-measure {
    display: grid;
    gap: 6px;
    text-align: right;
}

.record-history-measure strong {
    color: #365b67;
    font-size: 12px;
    white-space: nowrap;
}

.record-history-measure time {
    color: #8a999e;
    font-size: 9px;
}

.record-history-empty {
    min-height: 180px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    border-top: 1px solid rgba(60, 123, 144, .15);
    color: #54717a;
}

.record-history-empty span {
    color: #82949a;
    font-size: 12px;
}

.table-subline {
    display: block;
    max-width: 260px;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.35;
}

.member-inline-editor {
    width: min(340px, 72vw);
}

@media (max-width: 900px) {
    .login-page .login-wrap {
        padding: 0;
    }

    .login-stage {
        width: 100%;
        min-height: 100vh;
        grid-template-columns: 1fr;
    }

    .login-stage::before {
        inset: 12px;
    }

    .login-stage::after {
        width: 6px;
        height: 300px;
    }

    .login-brand-panel {
        min-height: 300px;
        padding: 28px 26px 24px;
    }

    .login-brand-logo {
        width: 178px;
        top: 34px;
        right: 28px;
    }

    .login-watermark {
        top: 86px;
        left: 26px;
        font-size: 78px;
    }

    .login-brand-message {
        gap: 20px;
        margin: auto 0 0;
    }

    .login-brand-message strong {
        font-size: 34px;
        line-height: 1.32;
    }

    .login-brand-rule {
        width: min(256px, 76vw);
        height: 6px;
    }

    .login-page .login-panel {
        width: calc(100% - 56px);
        min-height: 470px;
        align-self: stretch;
        padding: 86px 0 56px;
        border-left: 0;
        border-top: 1px solid rgba(37, 42, 39, .14);
    }

    .topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px 12px;
        padding: 18px 14px 10px;
    }

    .topbar .brand {
        min-width: 0;
    }

    .topbar nav {
        grid-column: 1 / -1;
        width: 100%;
        padding-bottom: 2px;
        overflow-x: auto;
    }

    .topbar nav a {
        flex: 0 0 auto;
        padding: 8px 10px;
    }

    .topbar .logout-form {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .route-assessment .assessment-split,
    .route-assessment .assessment-form .speaking-score-grid,
    .member-content-grid {
        grid-template-columns: 1fr;
    }

    .member-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .member-facts > div:nth-child(2) {
        border-right: 0;
    }

    .app-page .page-head {
        min-height: 0;
        align-items: flex-start;
        padding: 20px;
    }

    .record-summary-band {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .record-summary-band > div:nth-child(3) {
        border-right: 0;
    }

    .record-ar {
        grid-column: span 2;
    }

    .record-calendar-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .record-history-month > div {
        grid-template-columns: 1fr;
    }

    .reading-series-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media (max-width: 560px) {
    .login-page .login-wrap {
        align-items: start;
        padding: 0;
    }

    .login-stage {
        width: 100%;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .login-brand-panel {
        min-height: 280px;
        padding: 24px 22px;
    }

    .login-brand-message strong {
        font-size: 30px;
    }

    .login-page .login-panel {
        width: calc(100% - 44px);
        min-height: 440px;
        padding-top: 72px;
    }

    .brand img {
        width: 108px;
        height: 34px;
    }

    .brand > span {
        padding-left: 8px;
        font-size: 13px;
    }

    .topbar .user-chip {
        display: none;
    }

    .member-page .topbar nav {
        display: grid;
        grid-template-columns: 1.18fr 1.12fr .86fr .86fr;
        gap: 2px;
        overflow: visible;
    }

    .member-page .topbar nav a {
        min-width: 0;
        padding: 8px 2px;
        text-align: center;
        white-space: nowrap;
        font-size: 12px;
    }

    .app-page .shell {
        width: calc(100vw - 20px);
        margin-top: 14px;
    }

    .app-page .page-head {
        padding: 18px 16px;
        border-left-width: 6px;
    }

    .app-page .page-head h1 {
        font-size: 27px;
    }

    .member-hero {
        min-height: 220px;
        align-items: flex-start;
        flex-direction: column;
        padding: 34px 24px 26px;
    }

    .member-hero::after {
        top: 26px;
        right: 18px;
        font-size: 58px;
    }

    .member-hero h1 {
        font-size: 30px;
    }

    .member-person {
        min-width: min(100%, 260px);
    }

    .records-hero,
    .record-calendar-section > header,
    .record-history-section > header {
        align-items: flex-start;
        flex-direction: column;
    }

    .records-hero {
        padding: 24px 20px;
    }

    .record-summary-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .record-summary-band > div {
        min-height: 108px;
        padding: 16px;
        border-bottom: 1px solid rgba(80, 96, 87, .11);
    }

    .record-student,
    .record-ar {
        grid-column: 1 / -1;
    }

    .record-ar {
        grid-template-columns: 1fr;
    }

    .record-calendar-section,
    .record-history-section {
        padding: 24px 18px;
    }

    .record-calendar-grid {
        grid-template-columns: 1fr;
    }

    .record-year-nav {
        width: 100%;
        grid-template-columns: 42px 1fr 42px;
    }

    .record-type-tabs {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .record-type-tab {
        min-width: 0;
    }

    .record-history-card {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 11px;
    }

    .record-history-cover {
        width: 56px;
    }

    .record-history-measure {
        grid-column: 2;
        text-align: left;
    }

    .club-overview {
        grid-template-columns: 1fr;
    }

    .club-switch {
        min-height: 92px;
        border-right: 0;
        border-bottom: 1px solid #e4e9e5;
    }

    .club-switch:last-child {
        border-bottom: 0;
    }

    .club-library {
        padding: 25px 20px;
    }

    .reading-library {
        padding-inline: 0;
    }

    .reading-library > .club-library-head,
    .reading-level-nav {
        margin-inline: 20px;
    }

    .newspaper-publication { padding: 26px 20px 30px; }

    .reading-level-section > header {
        align-items: flex-start;
        flex-direction: column;
    }

    .reading-level-section {
        padding: 26px 20px 30px;
    }

    .reading-series-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .reading-series-card {
        padding: 9px;
    }

    .reading-cover-fallback {
        padding: 18px 12px 13px;
    }

    .reading-cover-fallback b {
        font-size: 14px;
    }

    .club-empty-state {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
        padding: 28px 6px 10px;
    }

    .member-facts {
        grid-template-columns: 1fr;
    }

    .member-facts > div {
        border-right: 0;
        border-bottom: 1px solid #e8ece9;
    }

    .member-facts > div:last-child {
        border-bottom: 0;
    }

    .member-section {
        padding: 22px 18px;
    }

    .listening-summary-band,
    .listening-live-status {
        grid-template-columns: 1fr;
    }

    .listening-summary-band > div,
    .listening-live-status > div {
        border-right: 0;
        border-bottom: 1px solid #e6ebe8;
    }

    .listening-summary-band > div:last-child,
    .listening-live-status > div:last-child {
        border-bottom: 0;
    }

    .listening-filter-row {
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 11px;
    }

    .listening-filter-row > strong {
        padding: 2px 0 6px;
    }

    .filter-pill {
        padding-inline: 9px;
    }

    .super-simple-search {
        grid-template-columns: 1fr auto;
    }

    .super-simple-search > a {
        grid-column: 1 / -1;
        text-align: left;
    }

    .listening-resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .listening-player-hero {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 22px;
    }

    .podcast-show-hero {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 24px 20px;
    }

    .super-simple-hero,
    .super-simple-admin-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 24px 20px;
    }

    .super-simple-hero h1 {
        font-size: 30px;
    }

    .super-simple-hero > strong {
        font-size: 42px;
        text-align: left;
    }

    .podcast-show-hero .listening-player-cover {
        width: min(100%, 280px);
    }

    .podcast-show-hero h1 {
        font-size: 29px;
    }

    .podcast-episode-list {
        padding: 22px 16px 8px;
    }

    .podcast-episode-row {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
    }

    .podcast-episode-number {
        width: 40px;
        height: 40px;
    }

    .podcast-episode-row > strong {
        grid-column: 2;
    }

    .podcast-pagination {
        grid-template-columns: 1fr 1fr;
    }

    .podcast-pagination strong {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .listening-player-cover {
        width: min(100%, 280px);
    }

    .listening-player-copy h1 {
        font-size: 28px;
    }

    .speed-control {
        align-items: stretch;
        flex-direction: column;
    }

    .speed-options {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .speed-option {
        min-width: 0;
    }

    .listening-control-panel,
    .listening-transcript {
        padding: 22px 18px;
    }

    .listening-admin-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .listening-resource-grid {
        grid-template-columns: 1fr;
    }
}

/* Daily AR reading and STAR-based assessment */
.member-page .topbar nav a:nth-child(1):hover,
.member-page .topbar nav a:nth-child(1).active { background: #ffe9e4; box-shadow: inset 0 -3px #eb806b; }
.member-page .topbar nav a:nth-child(2):hover,
.member-page .topbar nav a:nth-child(2).active { background: #dff3fb; box-shadow: inset 0 -3px #62b9da; }
.member-page .topbar nav a:nth-child(3):hover,
.member-page .topbar nav a:nth-child(3).active { background: #eeeafd; box-shadow: inset 0 -3px #9485dc; }
.member-page .topbar nav a:nth-child(4):hover,
.member-page .topbar nav a:nth-child(4).active { background: #fff4c9; box-shadow: inset 0 -3px #e2b933; }
.member-page .topbar nav a:nth-child(5):hover,
.member-page .topbar nav a:nth-child(5).active { background: #e9f6ef; box-shadow: inset 0 -3px #58b890; }

.home-record-summary {
    box-shadow: 0 12px 30px rgba(55, 75, 64, .06);
}

.daily-ar-section {
    overflow: hidden;
    border: 1px solid #d9e2dc;
    border-radius: 8px;
    background: #f7f3ff;
}

.daily-ar-section > header {
    min-height: 144px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 28px 34px;
    border-bottom: 1px solid #ded7f3;
    background: linear-gradient(110deg, #efeafd 0 62%, #e6f4ef 62% 100%);
}

.daily-ar-section > header > div:first-child > span,
.ar-article-hero > div span,
.ar-quiz-form > header span,
.ar-result > div > span {
    color: #66599a;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.daily-ar-section h2 {
    margin: 5px 0;
    color: #2f3041;
    font-size: 29px;
}

.daily-ar-section header p {
    margin: 0;
    color: #69746e;
    font-size: 14px;
}

.daily-ar-score {
    min-width: 150px;
    display: grid;
    gap: 3px;
    padding: 16px 20px;
    border: 1px solid rgba(65, 101, 82, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
    text-align: right;
}

.daily-ar-score span,
.daily-ar-score small { color: #61736a; font-size: 11px; font-weight: 850; }
.daily-ar-score strong { color: #2b4638; font-size: 29px; }

.daily-ar-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 24px;
}

.daily-ar-card {
    min-width: 0;
    min-height: 190px;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 25px;
    border: 1px solid #ded9ea;
    border-top: 5px solid #8f7ed2;
    border-radius: 8px;
    background: #fff;
    color: #2f3d35;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.daily-ar-card:nth-child(2) { border-top-color: #4daf89; }
.daily-ar-card:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(69, 58, 116, .1); }
.daily-ar-card.status-passed { border-top-color: #50ad83; background: #f9fdfb; }

.daily-ar-number {
    width: 68px;
    height: 78px;
    display: grid;
    place-content: center;
    gap: 2px;
    border-radius: 8px;
    background: #f1edfd;
    text-align: center;
}

.daily-ar-card:nth-child(2) .daily-ar-number { background: #e8f6ef; }
.daily-ar-number span { color: #6355a2; font-size: 25px; font-weight: 950; }
.daily-ar-number small { color: #7c7597; font-size: 9px; font-weight: 850; }

.daily-ar-copy > div { display: flex; flex-wrap: wrap; gap: 6px; }
.daily-ar-copy > div span {
    padding: 4px 7px;
    border-radius: 4px;
    background: #f1f4f2;
    color: #617269;
    font-size: 10px;
    font-weight: 850;
}

.daily-ar-copy h3 { margin: 10px 0 5px; font-size: 20px; letter-spacing: 0; }
.daily-ar-copy p { margin: 0 0 10px; color: #6c7771; font-size: 13px; line-height: 1.55; }
.daily-ar-copy > small { color: #8a928d; font-size: 11px; font-weight: 750; }
.daily-ar-card > strong { color: #6858a7; font-size: 12px; white-space: nowrap; }
.daily-ar-card > strong i { margin-left: 4px; font-style: normal; }

.daily-ar-empty {
    grid-column: 1 / -1;
    min-height: 150px;
    display: grid;
    place-content: center;
    gap: 8px;
    padding: 28px;
    border: 1px dashed #bdb3dc;
    border-radius: 8px;
    background: rgba(255, 255, 255, .66);
    text-align: center;
}

.daily-ar-empty strong { color: #423c62; font-size: 19px; }
.daily-ar-empty p { max-width: 620px; margin: 0; color: #767184; }
.daily-ar-section > footer { padding: 0 24px 22px; color: #726b89; font-size: 12px; font-weight: 800; }

.ar-reader-shell { max-width: 1080px; gap: 20px; }
.ar-reader-top { display: flex; align-items: center; justify-content: space-between; }
.ar-reader-top a { color: #53665c; font-weight: 850; text-decoration: none; }
.ar-reader-top div { padding: 8px 13px; border-radius: 6px; background: #fff3c8; color: #7d6a29; font-weight: 800; }
.ar-reader-top div span { font-size: 18px; font-weight: 950; }

.ar-article-hero {
    padding: 44px 52px;
    border: 1px solid #ddd7ef;
    border-radius: 8px;
    background: #eeeafd;
}

.ar-article-hero > div { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-article-hero > div span { padding: 6px 9px; border-radius: 5px; background: rgba(255, 255, 255, .72); }
.ar-article-hero h1 { max-width: 760px; margin: 18px 0 10px; color: #2b2d3d; font-size: 42px; letter-spacing: 0; }
.ar-article-hero p { max-width: 720px; margin: 0 0 20px; color: #606574; font-size: 16px; line-height: 1.65; }
.ar-article-hero small { color: #756d92; font-size: 12px; font-weight: 850; }

.ar-article-body {
    padding: 48px 72px;
    border: 1px solid #dfe5e1;
    border-radius: 8px;
    background: #fff;
}

.ar-article-body p {
    max-width: 760px;
    margin: 0 auto 24px;
    color: #29362f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    line-height: 1.9;
}

.ar-quiz-form {
    display: grid;
    gap: 18px;
    padding: 40px 52px;
    border: 1px solid #d8e2dc;
    border-radius: 8px;
    background: #eef7f2;
}

.ar-quiz-form > header { margin-bottom: 4px; }
.ar-quiz-form > header h2 { margin: 5px 0; font-size: 28px; }
.ar-quiz-form > header p { margin: 0; color: #66766d; }
.ar-quiz-form fieldset { margin: 0; padding: 22px; border: 1px solid #d9e2dd; border-radius: 8px; background: #fff; }
.ar-quiz-form legend { display: flex; align-items: center; gap: 10px; padding: 0 6px; color: #2d3e35; font-size: 15px; font-weight: 900; }
.ar-quiz-form legend span { width: 28px; height: 28px; display: grid; place-content: center; border-radius: 50%; background: #5eb58c; color: #fff; }
.ar-quiz-form fieldset > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 15px; }
.ar-quiz-form fieldset label { cursor: pointer; }
.ar-quiz-form fieldset input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ar-quiz-form fieldset label span { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #dbe2de; border-radius: 6px; color: #425249; }
.ar-quiz-form fieldset label b { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-content: center; border-radius: 5px; background: #f0f4f1; }
.ar-quiz-form fieldset input:checked + span { border-color: #7b6bc1; background: #f0edfc; box-shadow: inset 3px 0 #7b6bc1; }

.ar-result { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; padding: 26px 30px; border: 1px solid #cfe3d8; border-radius: 8px; background: #e9f6ef; }
.ar-result.retry { border-color: #eadca7; background: #fff8dc; }
.ar-result h2 { margin: 5px 0; font-size: 36px; }
.ar-result p { margin: 0; color: #607168; }
.ar-result ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ar-result li { padding: 10px 12px; border-radius: 6px; background: rgba(255, 255, 255, .7); }
.ar-result li span { display: block; margin-top: 4px; color: #4c594f; font-size: 12px; }
.ar-result li p { margin-top: 3px; font-size: 11px; }
.ar-complete-state { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 28px; border: 1px solid #cde3d7; border-radius: 8px; background: #eaf7f0; }
.ar-complete-state span { color: #3d7058; font-weight: 900; }

/* Daily AR reading workspace */
.ar-reader-shell {
    width: min(1480px, calc(100% - 36px));
    max-width: 1480px;
    gap: 16px;
}

.ar-reader-top {
    min-height: 44px;
    padding: 0 4px;
}

.ar-reading-workspace {
    height: calc(100vh - 152px);
    min-height: 650px;
    max-height: 880px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
    overflow: hidden;
    border: 1px solid #d9dfdc;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(45, 62, 53, .09);
}

.ar-reading-pane,
.ar-assessment-pane {
    min-width: 0;
    min-height: 0;
}

.ar-reading-pane {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: #fffdf8;
}

.ar-reading-header {
    padding: 34px 42px 24px;
    border-bottom: 1px solid #e7e1d5;
    background: #fff8e9;
}

.ar-article-order,
.ar-celebration > header > span {
    color: #6d5e9d;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.ar-reading-header h1 {
    margin: 8px 0 16px;
    color: #29372f;
    font-size: clamp(29px, 3vw, 44px);
    line-height: 1.12;
    letter-spacing: 0;
}

.ar-reading-header > p {
    max-width: 720px;
    margin: 17px 0 0;
    color: #6e766f;
    font-size: 14px;
    line-height: 1.6;
}

.ar-reading-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid #e0ddd4;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(255, 255, 255, .72);
}

.ar-reading-meta > span {
    min-width: 0;
    display: grid;
    gap: 3px;
    padding: 11px 14px;
    border-right: 1px solid #e0ddd4;
}

.ar-reading-meta > span:last-child { border-right: 0; }
.ar-reading-meta small { color: #8b8b83; font-size: 9px; font-weight: 900; }
.ar-reading-meta strong { overflow-wrap: anywhere; color: #34473d; font-size: 14px; }

.ar-reading-scroll {
    overflow-y: auto;
    padding: 36px 48px 54px;
    scrollbar-color: #cabf9f transparent;
}

.ar-reading-scroll p {
    max-width: 760px;
    margin: 0 auto 23px;
    color: #29362f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    line-height: 1.86;
}

.ar-assessment-pane {
    overflow-y: auto;
    border-left: 1px solid #d9dfdc;
    background: #f2effb;
    scrollbar-color: #bcb0e3 transparent;
}

.ar-assessment-pane .ar-quiz-form {
    min-height: 100%;
    gap: 16px;
    padding: 32px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.ar-assessment-pane .ar-quiz-form > header {
    padding-bottom: 15px;
    border-bottom: 1px solid #d8d1ed;
}

.ar-assessment-pane .ar-quiz-form > header h2 { margin: 4px 0; color: #302e41; font-size: 25px; }
.ar-assessment-pane .ar-quiz-form > header p { font-size: 12px; }
.ar-assessment-pane .ar-quiz-form fieldset { padding: 18px; border-color: #ddd8eb; }
.ar-assessment-pane .ar-quiz-form fieldset > div { grid-template-columns: 1fr; }
.ar-assessment-pane .ar-quiz-form fieldset label span { min-height: 50px; background: #fff; }

.ar-celebration {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 38px 36px;
    text-align: center;
}

.ar-celebration > header h2 {
    margin: 5px 0 2px;
    color: #39334f;
    font-size: 32px;
    letter-spacing: 0;
}

.ar-celebration > header p { margin: 0; color: #655d7d; font-size: 15px; font-weight: 800; }

.ar-trophy-stage {
    width: 100%;
    min-height: 285px;
    display: grid;
    place-items: center;
    margin: 7px 0 2px;
    overflow: hidden;
}

.ar-trophy {
    position: relative;
    width: 230px;
    height: 268px;
}

.ar-trophy-cup {
    position: absolute;
    left: 35px;
    bottom: 65px;
    z-index: 2;
    width: 160px;
    height: 145px;
    border: 8px solid #e2a91b;
    border-top: 0;
    border-radius: 0 0 72px 72px;
    background: linear-gradient(135deg, #ffe686 0%, #ffc928 48%, #ed9e12 100%);
    box-shadow: inset 13px 0 18px rgba(255, 255, 255, .32), 0 14px 24px rgba(139, 92, 9, .2);
}

.ar-trophy-cup::before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 11px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 246, 192, .38);
}

.ar-trophy-cup img {
    position: absolute;
    left: 50%;
    bottom: 9px;
    z-index: 3;
    width: 150px;
    height: 155px;
    object-fit: contain;
    transform: translateX(-50%);
    filter: drop-shadow(0 8px 8px rgba(109, 74, 15, .16));
}

.ar-trophy-handles::before,
.ar-trophy-handles::after {
    content: "";
    position: absolute;
    bottom: 112px;
    z-index: 1;
    width: 67px;
    height: 80px;
    border: 13px solid #dfa71b;
    border-radius: 50%;
}

.ar-trophy-handles::before { left: 4px; }
.ar-trophy-handles::after { right: 4px; }
.ar-trophy-stem { position: absolute; left: 103px; bottom: 38px; width: 25px; height: 45px; border-radius: 3px; background: #e5aa18; }
.ar-trophy-base { position: absolute; left: 55px; bottom: 20px; width: 120px; height: 25px; border-radius: 6px 6px 3px 3px; background: #d99512; box-shadow: inset 0 6px rgba(255, 221, 93, .55); }

.ar-accuracy {
    width: min(360px, 100%);
    display: grid;
    gap: 2px;
    padding: 16px 18px;
    border-top: 1px solid #d8d1ed;
    border-bottom: 1px solid #d8d1ed;
}

.ar-accuracy span { color: #746d89; font-size: 12px; font-weight: 900; }
.ar-accuracy strong { color: #4f976f; font-size: 38px; line-height: 1.1; }
.ar-accuracy small { color: #887f9c; font-size: 11px; font-weight: 800; }
.ar-celebration > .wide { width: min(360px, 100%); margin-top: 12px; }
.ar-celebration > a.wide { display: grid; place-content: center; min-height: 44px; text-decoration: none; }

.ar-question-review {
    width: 100%;
    display: grid;
    gap: 10px;
    margin-top: 14px;
    text-align: left;
}

.ar-question-review[hidden] { display: none; }
.ar-review-item { padding: 15px; border: 1px solid #dcd7e9; border-left: 4px solid #55aa7f; border-radius: 7px; background: #fff; }
.ar-review-item.incorrect { border-left-color: #e29f3b; }
.ar-review-item header { display: flex; justify-content: space-between; gap: 12px; color: #7b738e; font-size: 10px; }
.ar-review-item header strong { color: #3e8060; }
.ar-review-item.incorrect header strong { color: #a56e20; }
.ar-review-item h4 { margin: 8px 0 10px; color: #343242; font-size: 13px; line-height: 1.5; }
.ar-review-answers { display: grid; gap: 4px; }
.ar-review-answers p { margin: 0; color: #566159; font-size: 11px; line-height: 1.5; }
.ar-review-answers b { display: inline-block; min-width: 62px; margin-right: 5px; color: #6f6784; }
.ar-review-item > small { display: block; margin-top: 9px; padding-top: 9px; border-top: 1px solid #ece8f3; color: #77717f; line-height: 1.5; }

.ar-assessment-pane > .ar-result.retry {
    grid-template-columns: 1fr;
    margin: 24px 24px 0;
    padding: 20px;
}

.ar-assessment-pane > .ar-result.retry + .ar-quiz-form { min-height: auto; }

.reading-complete-form { margin-top: 8px; }
.reading-complete-form button { width: 100%; min-height: 36px; border: 1px solid #e2bd3a; border-radius: 5px; background: #fff1b8; color: #66551c; font-size: 11px; font-weight: 900; }

.reading-detail-shell,
.reading-reader-shell {
    width: min(1480px, calc(100% - 32px));
}

.reading-series-page,
.reading-book-page {
    padding: 24px 0 48px;
}

.reading-series-hero {
    min-height: 154px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 16px;
    padding: 28px 34px;
    border-left: 8px solid var(--reading-level-color);
    background: color-mix(in srgb, var(--reading-level-color) 12%, #fff);
}

.reading-series-hero span,
.reading-book-header > div > span,
.reading-audio-pane > div > span {
    color: var(--reading-level-color, #6b618f);
    font-size: 11px;
    font-weight: 900;
}

.reading-series-hero h1,
.reading-book-header h1 {
    margin: 6px 0;
    color: #2f3540;
    font-size: 32px;
    letter-spacing: 0;
}

.reading-series-hero p { margin: 0; color: #69706f; font-weight: 800; }
.reading-series-count { min-width: 150px; display: grid; text-align: right; }
.reading-series-count strong { color: #303943; font-size: 38px; line-height: 1; }
.reading-series-count span { margin-top: 5px; font-size: 12px; font-weight: 900; }
.reading-series-count small { margin-top: 3px; color: #718078; font-weight: 800; }

.reading-series-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 22px 0;
}

.reading-series-search input { width: min(380px, 100%); min-height: 42px; border: 1px solid #cedbd4; border-radius: 6px; padding: 0 13px; background: #fff; }
.reading-series-search button { min-height: 42px; border-radius: 6px; background: #2f765d; }
.reading-series-search a { color: #68746e; font-size: 12px; font-weight: 800; }

.reading-book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 16px;
}

.reading-book-card {
    min-width: 0;
    padding: 10px;
    border: 1px solid #dce5e0;
    border-top: 4px solid var(--reading-level-color);
    border-radius: 8px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}

.reading-book-cover {
    width: 100%;
    aspect-ratio: 3 / 4;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    background: color-mix(in srgb, var(--reading-level-color) 14%, #f8faf9);
}

.reading-book-cover > span { position: absolute; inset: 0; display: grid; align-content: space-between; padding: 20px 14px; border-bottom: 14px solid var(--reading-level-color); }
.reading-book-cover b { align-self: center; overflow-wrap: anywhere; color: #38403e; font-size: 15px; line-height: 1.35; }
.reading-book-cover small { color: #6b736f; font-size: 9px; font-weight: 900; }
.reading-book-cover img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; padding: 4px; background: #fff; }
.reading-book-copy h3 { min-height: 42px; margin: 10px 0 4px; overflow-wrap: anywhere; color: #303a37; font-size: 14px; line-height: 1.35; }
.reading-book-levels { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.reading-book-levels span { padding: 3px 5px; border-radius: 4px; background: #f1f5f3; color: #617069; font-size: 8px; font-weight: 900; }
.reading-book-copy p { margin: 0; color: #688078; font-size: 10px; font-weight: 900; }
.reading-books-empty { grid-column: 1 / -1; min-height: 220px; display: grid; place-content: center; gap: 5px; text-align: center; color: #67736e; }
.reading-pagination { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 28px; }
.reading-pagination a, .reading-pagination span { min-width: 88px; color: #53655d; font-size: 12px; font-weight: 800; text-align: center; }

.reading-book-header {
    margin: 16px 0 18px;
    padding: 22px 28px;
    border-left: 7px solid #57b58b;
    background: #eaf7f1;
}
.reading-book-header p { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 0; }
.reading-book-header p b { padding: 5px 8px; border-radius: 5px; background: #fff; color: #52655c; font-size: 10px; }
.reading-complete-notice { margin-bottom: 14px; padding: 11px 14px; border-left: 5px solid #efbd39; background: #fff8d9; color: #77601c; font-size: 12px; font-weight: 900; }

.reading-book-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    min-height: 760px;
    border: 1px solid #d9e3de;
    background: #fff;
}
.reading-document-pane { min-width: 0; display: grid; grid-template-rows: auto 1fr; background: #e5ebe8; }
.reading-document-toolbar { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #d7dfdb; background: #fff; }
.reading-page-controls,
.reading-zoom-controls { display: flex; align-items: center; gap: 8px; }
.reading-document-toolbar button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid #cddbd4; border-radius: 5px; background: #f7faf8; color: #355b4b; font-size: 19px; font-weight: 800; }
.reading-document-toolbar button:hover { border-color: #69a78d; background: #eaf6f0; }
.reading-document-toolbar button:disabled { opacity: .35; cursor: default; }
.reading-document-toolbar span { min-width: 54px; color: #5d6c65; font-size: 11px; font-weight: 850; text-align: center; }
.reading-page-stage { min-height: 760px; max-height: calc(100vh - 120px); position: relative; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 20px; outline: 0; }
.reading-page-stage:focus-visible { box-shadow: inset 0 0 0 3px #65aa8d; }
.reading-page-sheet { width: 100%; height: max-content; position: relative; flex: 0 0 auto; }
.reading-page-stage img { width: 100%; height: auto; display: block; box-shadow: 0 6px 20px rgba(42, 61, 52, .16); user-select: none; -webkit-user-drag: none; }
.reading-word-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.reading-word-hit { min-width: 3px; min-height: 8px; position: absolute; padding: 0; border: 0; border-radius: 2px; background: transparent; color: transparent; cursor: pointer; pointer-events: auto; }
.reading-word-hit:hover, .reading-word-hit:focus-visible, .reading-word-hit.active { outline: 1px solid rgba(57, 145, 106, .8); background: rgba(117, 221, 167, .24); }
.reading-word-popover { max-width: min(300px, 72vw); position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 7px)); padding: 8px 10px; border: 1px solid #b9d8c9; border-radius: 5px; background: #fff; box-shadow: 0 8px 24px rgba(35, 61, 49, .2); color: #30463c; pointer-events: none; }
.reading-word-popover strong { display: block; margin-bottom: 2px; font-size: 13px; }
.reading-word-popover span { display: block; font-size: 11px; line-height: 1.5; }
.reading-page-loading { position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%); padding: 10px 14px; border-radius: 5px; background: rgba(35, 53, 45, .88); color: #fff; font-size: 11px; font-weight: 850; }
.has-sentence-controls { grid-template-rows: auto auto 1fr; }
.reading-sentence-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #d7dfdb; }
.reading-mode-options { display: flex; border: 1px solid #cddbd4; border-radius: 5px; overflow: hidden; }
.reading-mode-options button { min-height: 36px; padding: 6px 12px; border: 0; border-radius: 0; background: #fff; color: #456255; font-size: 12px; white-space: nowrap; }
.reading-mode-options button[aria-pressed="true"] { background: #315f4d; color: #fff; }
.reading-sentence-controls > button { width: 36px; height: 36px; padding: 0; border-radius: 5px; border: 1px solid #cddbd4; background: #f7faf8; color: #355b4b; }
.reading-sentence-controls > button:disabled { opacity: .4; }
.reading-sentence-controls > span { flex: 1 1 140px; font-size: 11px; color: #5d6c65; }
.reading-sentence-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.reading-sentence-hit { position: absolute; min-width: 3px; min-height: 8px; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 224, 113, .13); cursor: pointer; pointer-events: auto; }
.reading-sentence-hit:hover, .reading-sentence-hit:focus-visible, .reading-sentence-hit.playing { background: rgba(255, 207, 68, .4); outline: 1px solid #9f7800; }
.reading-sentence-layer[hidden], .reading-word-layer[hidden] { display: none; }
.reading-audio-pane { padding: 24px 20px; border-left: 1px solid #dfe6e2; background: #f8fbf9; }
.reading-audio-pane h2 { margin: 4px 0 20px; color: #304139; font-size: 20px; }
.reading-audio-player label { display: grid; gap: 7px; color: #5f6f68; font-size: 11px; font-weight: 900; }
.reading-audio-player select { width: 100%; min-height: 42px; padding: 7px 9px; border: 1px solid #cedbd4; border-radius: 5px; background: #fff; }
.reading-audio-player audio { width: 100%; margin: 16px 0; }
.reading-audio-player .speed-control { align-items: flex-start; flex-direction: column; }
.reading-audio-player .speed-options { width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.reading-audio-player .speed-options button { min-width: 0; padding-inline: 4px; }
.reading-audio-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 16px; }
.reading-audio-stats span { padding: 9px; border: 1px solid #dce7e1; border-radius: 5px; background: #fff; color: #6a7771; font-size: 9px; }
.reading-audio-stats b { display: block; margin-top: 3px; color: #2f5747; font-size: 11px; }
.reading-no-audio { min-height: 130px; display: grid; place-content: center; gap: 5px; border: 1px dashed #cddbd4; color: #728078; text-align: center; }
.reading-no-audio span { font-size: 10px; }
.reading-finish-form { margin-top: 22px; }
.reading-finish-form button { width: 100%; min-height: 44px; border-radius: 6px; background: #efbd39; color: #2e342f; font-weight: 900; }
.reading-finish-form button:disabled { background: #dbe3df; color: #78817d; cursor: default; }
.reading-finish-form small { display: block; margin-top: 8px; color: #758078; font-size: 9px; font-weight: 800; line-height: 1.5; text-align: center; }

.reading-reward {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-content: center;
    justify-items: center;
    overflow: hidden;
    pointer-events: none;
    background: rgba(255, 255, 255, .18);
    animation: reading-reward-fade 2.8s ease both;
}
.reading-reward strong { position: relative; z-index: 2; color: #f3ae19; font-size: 72px; line-height: 1; text-shadow: 0 5px 0 #fff, 0 12px 30px rgba(175, 111, 0, .24); animation: reading-reward-pop .7s cubic-bezier(.2, 1.4, .3, 1) both; }
.reading-reward span { position: relative; z-index: 2; margin-top: 10px; padding: 7px 14px; border-radius: 5px; background: #fff8d9; color: #725917; font-size: 14px; font-weight: 900; }
.reading-reward-stars { position: absolute; width: min(430px, 92vw); aspect-ratio: 1; }
.reading-reward-stars i { --angle: calc(var(--star-index) * 30deg); position: absolute; left: calc(50% - 12px); top: calc(50% - 12px); color: #f5c431; font-size: 24px; font-style: normal; opacity: 0; transform: rotate(var(--angle)) translateY(0) scale(.2); animation: reading-star-burst 1.35s calc(var(--star-index) * 35ms) ease-out both; }
@keyframes reading-reward-pop { 0% { opacity: 0; transform: scale(.35) rotate(-8deg); } 70% { transform: scale(1.14) rotate(2deg); } 100% { opacity: 1; transform: scale(1); } }
@keyframes reading-star-burst { 0% { opacity: 0; transform: rotate(var(--angle)) translateY(0) scale(.2); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--angle)) translateY(-180px) scale(1.1); } }
@keyframes reading-reward-fade { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 760px) {
    .member-points-menu { grid-column: 2; grid-row: 1; justify-self: end; }
    .member-points-menu > summary { min-width: 0; padding-right: 6px; }
    .member-points-menu > summary span { display: none; }
    .member-points-popover { position: fixed; top: 70px; right: 10px; }
    .reading-detail-shell,
    .reading-reader-shell { width: min(100% - 20px, 1480px); }
    .reading-series-page,
    .reading-book-page { padding-top: 16px; }
    .reading-series-hero { min-height: 130px; align-items: flex-start; padding: 20px; }
    .reading-series-hero h1,
    .reading-book-header h1 { font-size: 23px; }
    .reading-series-count { min-width: 78px; }
    .reading-series-count strong { font-size: 29px; }
    .reading-book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .reading-book-card { padding: 8px; }
    .reading-book-copy h3 { font-size: 12px; }
    .reading-book-header { padding: 18px; }
    .reading-book-workspace { grid-template-columns: 1fr; min-height: 0; }
    .reading-document-toolbar { position: sticky; top: 0; z-index: 3; }
    .reading-page-stage { min-height: 0; max-height: 72vh; padding: 10px; }
    .reading-audio-pane { border-top: 1px solid #dfe6e2; border-left: 0; }
}

@media print {
    .reading-document-pane,
    .reading-book-header,
    .reading-audio-pane { display: none !important; }
    .reading-book-page::after { content: "本阅读内容不支持打印"; display: block; padding: 40px; color: #333; text-align: center; }
}

.points-toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; padding: 14px 18px; border: 1px solid #bddbc9; border-radius: 7px; background: #e7f6ed; color: #275640; font-weight: 900; box-shadow: 0 12px 30px rgba(37, 80, 57, .2); }

.reading-assessment-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #dce3df; border-radius: 8px; overflow: hidden; background: #fff; }
.reading-assessment-metrics > div { display: grid; gap: 5px; padding: 22px 26px; border-right: 1px solid #e0e5e2; }
.reading-assessment-metrics > div:nth-child(1) { background: #eeeafd; }
.reading-assessment-metrics > div:nth-child(2) { background: #e8f5ef; }
.reading-assessment-metrics > div:nth-child(3) { border-right: 0; background: #fff5d5; }
.reading-assessment-metrics span,
.reading-assessment-metrics small { color: #68746d; font-size: 11px; font-weight: 850; }
.reading-assessment-metrics strong { color: #2e3d35; font-size: 27px; }
.reading-assessment-list { display: grid; gap: 14px; margin-top: 18px; }
.reading-assessment-student { display: grid; grid-template-columns: minmax(150px, .85fr) minmax(150px, .75fr) minmax(140px, .7fr) minmax(460px, 2.4fr); align-items: center; gap: 18px; padding: 20px 22px; border: 1px solid #dce3df; border-left: 6px solid #8e7bcf; border-radius: 8px; background: #fff; }
.reading-assessment-student h3 { margin: 4px 0; font-size: 20px; }
.reading-assessment-student span,
.reading-assessment-student small { display: block; color: #738078; font-size: 10px; font-weight: 800; }
.reading-student-level strong,
.reading-student-week strong { display: block; margin: 4px 0; color: #304139; font-size: 20px; }
.reading-assessment-student form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: 8px; }
.reading-assessment-student form label { margin: 0; color: #617068; font-size: 10px; font-weight: 850; }
.reading-assessment-student form input,
.reading-assessment-student form select { min-height: 38px; padding: 7px 8px; }
.reading-assessment-student form button { min-height: 38px; white-space: nowrap; }

@media (max-width: 1100px) {
    .daily-ar-grid { grid-template-columns: 1fr; }
    .reading-assessment-student { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .reading-assessment-student form { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .member-page .topbar nav { grid-template-columns: repeat(5, minmax(92px, 1fr)); overflow-x: auto; }
    .home-record-summary { margin-top: 0; }
    .daily-ar-section > header { align-items: flex-start; flex-direction: column; padding: 24px 20px; background: #eeeafd; }
    .daily-ar-score { width: 100%; text-align: left; }
    .daily-ar-grid { padding: 14px; }
    .daily-ar-card { grid-template-columns: 52px minmax(0, 1fr); gap: 13px; padding: 18px 14px; }
    .daily-ar-number { width: 52px; height: 66px; }
    .daily-ar-card > strong { grid-column: 2; }
    .ar-article-hero { padding: 30px 22px; }
    .ar-article-hero h1 { font-size: 31px; }
    .ar-article-body { padding: 30px 22px; }
    .ar-article-body p { font-size: 18px; line-height: 1.75; }
    .ar-quiz-form { padding: 26px 16px; }
    .ar-quiz-form fieldset { padding: 17px 12px; }
    .ar-quiz-form fieldset > div { grid-template-columns: 1fr; }
    .ar-result { grid-template-columns: 1fr; }
    .ar-complete-state { align-items: stretch; flex-direction: column; }
    .reading-assessment-metrics { grid-template-columns: 1fr; }
    .reading-assessment-metrics > div { border-right: 0; border-bottom: 1px solid #e0e5e2; }
    .reading-assessment-student { grid-template-columns: 1fr 1fr; }
    .reading-student-name { grid-column: 1 / -1; }
    .reading-assessment-student form { grid-template-columns: 1fr 1fr; }
    .reading-assessment-student form button { grid-column: 1 / -1; }
}

/* Compact learning summary shared by the home and records pages */
.record-summary-band {
    grid-template-columns: minmax(180px, 1.18fr) repeat(4, minmax(108px, .78fr)) minmax(265px, 1.55fr);
    min-height: 82px;
}

.record-summary-band > div {
    min-height: 82px;
    gap: 3px;
    padding: 11px 15px;
}

.record-summary-band strong { font-size: 21px; }
.record-summary-band span { font-size: 10px; }
.record-summary-band small { font-size: 9px; }

.record-student {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
}

.record-student img {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, .62);
}

.record-student > div { min-width: 0; display: grid; gap: 2px; }
.record-student strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-ar { grid-template-columns: minmax(70px, auto) minmax(145px, 1fr); gap: 12px !important; }
.record-ar-progress { gap: 7px; }
.record-ar-progress span { display: block; color: #68617c; white-space: nowrap; }
.record-ar-progress > i { height: 7px; }

.login-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.login-code-row button { min-width: 104px; }
.login-panel label > small { min-height: 16px; color: #738078; font-size: 11px; font-weight: 600; }

.teacher-class-create > form { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(160px, .8fr) minmax(220px, 1.3fr) auto; align-items: end; gap: 14px; }
.teacher-class-create form > div span { color: #7e71aa; font-size: 10px; font-weight: 900; }
.teacher-class-create form > div h2 { margin: 3px 0 0; }
.teacher-class-create label,
.teacher-report-filter label,
.teacher-add-student label { margin: 0; }
.teacher-class-list,
.teacher-learning-list { display: grid; gap: 16px; }
.teacher-class-card { margin: 0; }
.teacher-class-card.is-archived { opacity: .65; }
.teacher-class-head { align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid #e7ece9; }
.teacher-class-head > div { display: grid; gap: 3px; }
.teacher-class-head > div > span,
.teacher-class-head > div > small { color: #748078; font-size: 10px; font-weight: 800; }
.teacher-class-head details { position: relative; }
.teacher-class-head details > summary { padding: 7px 10px; border: 1px solid #dfe5e1; border-radius: 6px; list-style: none; }
.teacher-class-head details > summary::-webkit-details-marker { display: none; }
.teacher-class-head details[open] { width: min(390px, 72vw); }
.teacher-add-student { display: grid; grid-template-columns: minmax(160px, .7fr) minmax(190px, .8fr) auto; align-items: end; gap: 10px; margin: 16px 0; padding: 14px; background: #f4f8f5; border: 1px solid #e0e9e3; border-radius: 7px; }
.teacher-class-card td strong,
.teacher-class-card td small { display: block; }
.teacher-class-card td small { margin-top: 3px; color: #7a857f; font-size: 10px; }
.teacher-transfer-form { width: min(300px, 70vw); display: grid; gap: 8px; margin: 12px 0; }
.teacher-transfer-form label { margin: 0; font-size: 12px; }

.teacher-report-filter { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, .7fr) auto; align-items: end; gap: 12px; margin-bottom: 16px; padding: 16px 18px; border: 1px solid #e2e7e4; background: #f7f9f7; }
.teacher-report-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; border: 1px solid #dfe5e1; background: #fff; }
.teacher-report-metrics > div { min-height: 86px; display: grid; align-content: center; gap: 5px; padding: 14px 18px; border-right: 1px solid #dfe5e1; }
.teacher-report-metrics > div:last-child { border-right: 0; }
.teacher-report-metrics span { color: #6f7c75; font-size: 10px; font-weight: 850; }
.teacher-report-metrics strong { color: #30463b; font-size: 22px; }
.teacher-learning-card { border: 1px solid #dce4df; border-left: 5px solid #8c7bc7; border-radius: 8px; background: #fff; overflow: hidden; }
.teacher-learning-card > header { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; background: #f5f2ff; }
.teacher-learning-card > header h2 { margin: 3px 0; font-size: 20px; }
.teacher-learning-card > header span,
.teacher-learning-card > header small { display: block; color: #706987; font-size: 10px; font-weight: 800; }
.teacher-learning-card > header > strong { color: #315646; font-size: 20px; text-align: right; }
.teacher-learning-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.teacher-learning-columns > section { min-width: 0; padding: 18px 20px; border-right: 1px solid #e6ebe8; }
.teacher-learning-columns > section:last-child { border-right: 0; }
.teacher-learning-columns h3 { margin: 0 0 11px; color: #56645d; font-size: 12px; }
.teacher-learning-columns ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.teacher-learning-columns li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; color: #3b4741; font-size: 11px; line-height: 1.45; }
.teacher-learning-columns li span { min-width: 0; overflow-wrap: anywhere; }
.teacher-learning-columns li b { flex: 0 0 auto; color: #65746c; font-size: 10px; }
.teacher-learning-columns li b.passed { color: #278158; }
.teacher-learning-columns li b.failed { color: #c4624f; }
.teacher-learning-columns li b.pending { color: #9a771f; }

@media (max-width: 900px) {
    .ar-reading-workspace {
        height: auto;
        max-height: none;
        grid-template-columns: 1fr;
    }

    .ar-assessment-pane { overflow: visible; border-top: 1px solid #d9dfdc; border-left: 0; }
    .ar-reading-scroll { max-height: none; overflow: visible; }
    .teacher-class-create > form { grid-template-columns: 1fr 1fr; }
    .teacher-class-create form > div { grid-column: 1 / -1; }
    .teacher-learning-columns { grid-template-columns: 1fr; }
    .teacher-learning-columns > section { border-right: 0; border-bottom: 1px solid #e6ebe8; }
    .teacher-learning-columns > section:last-child { border-bottom: 0; }
}

@media (max-width: 760px) {
    .login-code-row { grid-template-columns: minmax(0, 1fr) 96px; }
    .login-code-row button { min-width: 0; padding-inline: 8px; font-size: 12px; }
    .teacher-class-create > form,
    .teacher-add-student,
    .teacher-report-filter { grid-template-columns: 1fr; }
    .teacher-class-create form > div { grid-column: auto; }
    .teacher-report-metrics { grid-template-columns: 1fr 1fr; }
    .teacher-report-metrics > div:nth-child(2) { border-right: 0; }
    .teacher-report-metrics > div:nth-child(-n+2) { border-bottom: 1px solid #dfe5e1; }
    .teacher-learning-card > header { align-items: flex-start; }
    .member-page .topbar nav {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        overflow: visible;
    }

    .member-page .topbar nav a {
        min-height: 42px;
        display: grid;
        place-content: center;
        padding: 6px 2px;
        white-space: normal;
        font-size: 10px;
        line-height: 1.18;
    }

    .member-hero {
        min-height: 0;
        gap: 15px;
        padding: 27px 18px 18px;
    }

    .member-hero::after { top: 24px; right: 14px; font-size: 52px; }
    .member-hero h1 { margin: 7px 0 4px; font-size: 27px; }
    .member-hero p { font-size: 14px; }
    .member-person { width: 100%; min-width: 0; grid-template-columns: auto 1fr; align-items: center; padding: 10px 12px; }

    .club-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .club-switch { min-height: 82px; padding: 15px; border-right: 1px solid #e4e9e5; }
    .club-switch:nth-child(2n) { border-right: 0; }

    .record-summary-band {
        display: flex;
        min-height: 74px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }

    .record-summary-band > div,
    .record-student,
    .record-ar {
        min-height: 74px;
        grid-column: auto;
        flex: 0 0 122px;
        padding: 9px 12px;
        border-bottom: 0;
        scroll-snap-align: start;
    }

    .record-summary-band > .record-student { flex-basis: 174px; }
    .record-student img { width: 44px; height: 44px; flex-basis: 44px; }
    .record-summary-band > .record-ar {
        flex-basis: 270px;
        grid-template-columns: 72px minmax(150px, 1fr);
    }
    .record-summary-band strong { font-size: 19px; }

    .ar-reader-shell { width: min(100% - 20px, 1480px); gap: 10px; }
    .ar-reader-top { min-height: 38px; }
    .ar-reader-top a { font-size: 12px; }
    .ar-reading-header { padding: 26px 18px 20px; }
    .ar-reading-header h1 { font-size: 29px; }
    .ar-reading-meta > span { padding: 9px 8px; }
    .ar-reading-meta strong { font-size: 12px; }
    .ar-reading-scroll { padding: 26px 20px 38px; }
    .ar-reading-scroll p { font-size: 17px; line-height: 1.76; }
    .ar-assessment-pane .ar-quiz-form { padding: 24px 14px; }
    .ar-assessment-pane .ar-quiz-form fieldset { padding: 16px 11px; }
    .ar-celebration { padding: 28px 16px 32px; }
    .ar-celebration > header h2 { font-size: 28px; }
    .ar-trophy-stage { min-height: 260px; transform: scale(.92); margin: -2px 0 -8px; }
    .ar-assessment-pane > .ar-result.retry { margin: 14px 14px 0; }
}