:root {
    color-scheme: light;
    --bg: #f3f7fb;
    --panel: rgba(255, 255, 255, 0.94);
    --text: #17212b;
    --muted: #607080;
    --line: rgba(33, 54, 75, 0.16);
    --line-soft: rgba(33, 54, 75, 0.09);
    --primary: #1373d1;
    --primary-strong: #0a5fb4;
    --green-soft: #e8f7ef;
    --blue-soft: #e8f2ff;
    --amber-soft: #fff3d8;
    --rose-soft: #ffe9ed;
    --teal-soft: #e4f7f4;
    --danger: #d92d20;
    --success: #248a3d;
    --shadow: 0 18px 44px rgba(28, 49, 71, 0.12);
    --shadow-soft: 0 8px 24px rgba(28, 49, 71, 0.07);
    --shadow-pop: 0 20px 48px rgba(19, 115, 209, 0.18);
    --glass: rgba(255, 255, 255, 0.78);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        linear-gradient(180deg, #fbfdff 0%, var(--bg) 42%, #f8fbff 100%);
    color: var(--text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, video, canvas {
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

.app-shell {
    width: min(920px, 100%);
    max-width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    padding: 22px 16px 104px;
    overflow-x: hidden;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--glass);
    padding: 14px;
    box-shadow: var(--shadow-soft);
    -webkit-backdrop-filter: saturate(170%) blur(20px);
    backdrop-filter: saturate(170%) blur(20px);
}

.topbar-brand-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.topbar-logo {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 8px 18px rgba(19, 115, 209, 0.14);
}

.teacher-meta {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.topbar-actions {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
}

.page-help {
    position: relative;
}

.page-help summary {
    min-height: 38px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    padding: 9px 10px;
    color: var(--primary-strong);
    font-size: 13px;
    font-weight: 800;
    line-height: 18px;
    list-style: none;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
}

.page-help summary::-webkit-details-marker {
    display: none;
}

.page-help-body {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    right: 0;
    width: min(280px, calc(100vw - 32px));
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: #fff;
    padding: 12px;
    color: #424245;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
    box-shadow: var(--shadow);
}

.eyebrow {
    margin: 0 0 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

h1, h2, h3, p {
    margin-top: 0;
}

h1 {
    margin-bottom: 0;
    font-size: 34px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: 0;
}

h2 {
    margin-bottom: 16px;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 800;
}

h3 {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.35;
}

.icon-link, .mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    padding: 8px 10px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: var(--shadow-soft);
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.panel {
    margin-bottom: 16px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--glass);
    padding: 18px;
    max-width: 100%;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    -webkit-backdrop-filter: saturate(150%) blur(18px);
    backdrop-filter: saturate(150%) blur(18px);
}

.muted {
    color: var(--muted);
    line-height: 1.65;
}

.tiny {
    font-size: 12px;
    line-height: 1.5;
}

.notice {
    margin-bottom: 14px;
    border-radius: 8px;
    padding: 12px 14px;
    background: #eaf7ee;
    color: var(--success);
    line-height: 1.5;
    border: 1px solid rgba(36, 138, 61, 0.15);
    box-shadow: 0 12px 28px rgba(36, 138, 61, 0.08);
}

.notice.danger {
    background: #fff2f0;
    color: var(--danger);
    border-color: rgba(217, 45, 32, 0.16);
}

.notice.warn {
    background: #fff7e6;
    color: #9a5b00;
    border-color: rgba(204, 130, 0, 0.18);
}

.danger-zone {
    border-color: rgba(217, 45, 32, 0.28);
    background: #fffafa;
}

.tool-collapse,
.whiteboard-after-class {
    overflow: hidden;
}

.tool-collapse summary,
.whiteboard-after-class summary {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    color: var(--primary-strong);
    font-weight: 800;
    list-style: none;
}

.tool-collapse summary::-webkit-details-marker,
.whiteboard-after-class summary::-webkit-details-marker {
    display: none;
}

.tool-collapse summary::after,
.whiteboard-after-class summary::after {
    content: "展开";
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(19, 115, 209, 0.10);
    padding: 6px 10px;
    color: var(--primary-strong);
    font-size: 13px;
}

.tool-collapse[open] summary,
.whiteboard-after-class[open] summary {
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 12px;
}

.tool-collapse[open] summary::after,
.whiteboard-after-class[open] summary::after {
    content: "收起";
}

.ai-quota-badge,
.btn-badge {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(19, 115, 209, 0.12);
    padding: 0 8px;
    color: var(--primary-strong);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.btn-badge {
    margin-left: 8px;
    background: rgba(255, 255, 255, 0.22);
    color: inherit;
}

.ai-quota-card span {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.login-help-panel h2 {
    margin-bottom: 8px;
}

.login-help-panel p {
    margin: 0 0 8px;
}

.login-help-panel p:last-child {
    margin-bottom: 0;
}

.auth-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

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

label {
    display: grid;
    gap: 7px;
    color: #424245;
    font-size: 14px;
    font-weight: 600;
}

input, textarea, select {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    padding: 10px 11px;
    color: var(--text);
    font: inherit;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

input:focus, textarea:focus, select:focus {
    outline: 0;
    border-color: rgba(19, 115, 209, 0.72);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(19, 115, 209, 0.12);
}

textarea {
    resize: vertical;
    line-height: 1.6;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

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

.primary-btn, .secondary-btn {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    padding: 0 16px;
    font: inherit;
    font-weight: 700;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms ease, filter 180ms ease;
}

.primary-btn {
    background: linear-gradient(180deg, #2389ee 0%, var(--primary) 100%);
    color: white;
    box-shadow: 0 12px 28px rgba(19, 115, 209, 0.26);
}

.secondary-btn {
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.78);
    color: var(--primary-strong);
    box-shadow: var(--shadow-soft);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
}

.primary-btn:active,
.secondary-btn:active,
.quick-card:active,
.today-card:active,
.whiteboard-entry:active,
.recitation-student-btn:active,
.discipline-student-btn:active {
    transform: translateY(1px) scale(0.985);
}

.primary-btn:disabled,
.secondary-btn:disabled,
.secondary-btn.disabled,
.danger-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.block {
    width: 100%;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.stats-grid.small {
    margin-top: 14px;
}

.stat-card {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    padding: 16px;
    box-shadow: var(--shadow-soft);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.stat-card span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 13px;
}

.stat-card strong {
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.quick-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    min-height: 108px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    padding: 16px;
    overflow: hidden;
    color: #1d1d1f;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
    box-shadow: var(--shadow-soft);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, filter 180ms ease;
}

.quick-card span,
.quick-card small {
    display: block;
}

.quick-card small {
    max-width: calc(100% - 22px);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.quick-card::after {
    content: ">";
    position: absolute;
    right: 16px;
    bottom: 14px;
    color: rgba(29, 29, 31, 0.36);
    font-size: 20px;
    font-weight: 700;
    transition: transform 180ms ease, color 180ms ease;
}

.quick-card.green { background: #e8f7ef; }
.quick-card.blue { background: #e8f2ff; }
.quick-card.teal { background: #e4f7f4; }
.quick-card.lime { background: #eef8e5 !important; }
.quick-card.indigo { background: #edf0ff; }
.quick-card.orange { background: #fff0e4; }
.quick-card.cyan { background: #e6f7ff; }
.quick-card.violet { background: #f0edff; }
.quick-card.purple { background: #f4edff; }
.quick-card.amber { background: #fff3d8; }
.quick-card.rose { background: #ffe9ee; }

.quick-card.disabled-card {
    background: rgba(255, 255, 255, 0.74);
    color: var(--muted);
    filter: grayscale(0.2);
}

.quick-card.disabled-card::after {
    content: "";
}

.today-hero {
    display: grid;
    gap: 14px;
}

.apple-workbench {
    border-color: rgba(19, 115, 209, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.70));
}

.today-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.today-head h2 {
    margin-bottom: 6px;
    font-size: 24px;
    font-weight: 750;
}

.today-head .muted {
    margin-bottom: 0;
    max-width: 460px;
}

.today-class-form {
    margin: 0;
}

.today-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.today-card {
    display: grid;
    gap: 8px;
    min-height: 116px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    padding: 14px;
    box-shadow: var(--shadow-soft);
    transition: transform 190ms cubic-bezier(.2,.8,.2,1), box-shadow 190ms ease, border-color 190ms ease, filter 190ms ease;
}

.today-card.done {
    background: linear-gradient(180deg, #f3fbf6, #e6f7ef);
}

.today-card.todo {
    background: linear-gradient(180deg, #fffaf0, #fff1d8);
}

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

.today-card strong {
    font-size: 23px;
    line-height: 1.1;
}

.today-card small {
    color: #424245;
    line-height: 1.45;
}

.whiteboard-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    border: 1px solid rgba(19, 115, 209, 0.14);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 244, 255, 0.84));
    padding: 18px;
    box-shadow: var(--shadow-pop);
}

.whiteboard-cta h2 {
    margin-bottom: 8px;
    font-size: 28px;
    font-weight: 780;
}

.whiteboard-cta p:last-child {
    margin-bottom: 0;
    max-width: 620px;
    color: #4f6070;
    line-height: 1.65;
}

.whiteboard-main-btn {
    min-width: 172px;
    min-height: 58px;
    font-size: 18px;
}

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

.today-record-head h3 {
    margin-bottom: 0;
}

.today-record-head span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.secondary-entry-grid .quick-card {
    min-height: 96px;
    background: rgba(255, 255, 255, 0.72);
}

.whiteboard-stage,
.whiteboard-empty {
    display: grid;
    gap: 18px;
}

.whiteboard-stage-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
}

.whiteboard-stage-head h2 {
    margin-bottom: 8px;
    font-size: 30px;
    font-weight: 780;
}

.whiteboard-stage-head .muted {
    margin-bottom: 0;
}

.whiteboard-fullscreen-btn {
    min-width: 112px;
    min-height: 52px;
}

.whiteboard-class-form {
    max-width: 360px;
}

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

.whiteboard-entry {
    display: grid;
    gap: 10px;
    min-height: 176px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    padding: 20px;
    box-shadow: var(--shadow-soft);
    transition: transform 190ms cubic-bezier(.2,.8,.2,1), box-shadow 190ms ease, border-color 190ms ease, filter 190ms ease;
}

.whiteboard-entry.blue { background: linear-gradient(180deg, #f7fbff, #e6f2ff); }
.whiteboard-entry.green { background: linear-gradient(180deg, #f6fff9, #e4f7ef); }
.whiteboard-entry.amber { background: linear-gradient(180deg, #fffaf1, #fff0d6); }
.whiteboard-entry.rose { background: linear-gradient(180deg, #fff7f9, #ffe8ee); }

.whiteboard-entry span {
    color: var(--muted);
    font-size: 15px;
    font-weight: 800;
}

.whiteboard-entry strong {
    color: #152536;
    font-size: 26px;
    line-height: 1.18;
}

.whiteboard-entry small {
    align-self: end;
    color: #526273;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
}

.class-whiteboard-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(19, 115, 209, 0.14);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(232, 244, 255, 0.78));
    padding: 16px;
    box-shadow: var(--shadow-soft);
}

.class-whiteboard-cta strong,
.class-whiteboard-cta small {
    display: block;
}

.class-whiteboard-cta strong {
    margin-bottom: 6px;
    font-size: 22px;
}

.class-whiteboard-cta small {
    color: var(--muted);
    font-weight: 700;
    line-height: 1.5;
}

.compact-action-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.compact-action-row a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--primary-strong);
    font-weight: 800;
    box-shadow: var(--shadow-soft);
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms ease, border-color 180ms ease;
}

.section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.section-head h2 {
    margin-bottom: 0;
}

.onboarding-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
}

.onboarding-actions .inline-form {
    flex: 0 0 auto;
}

.onboarding-actions .mini-btn {
    min-height: 36px;
}

.mini-btn.muted {
    color: var(--muted);
}

.must-do-panel {
    background: #fffdf7;
}

.progress-box {
    margin-top: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    padding: 12px;
}

.progress-box.compact {
    margin: 0 0 12px;
    padding: 10px;
}

.progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--text);
}

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

.progress-track {
    height: 8px;
    border-radius: 999px;
    background: #edf1f5;
    overflow: hidden;
}

.progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1373d1, #2fb47c);
}

.must-do-list {
    display: grid;
    gap: 9px;
}

.must-do-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    padding: 11px;
    box-shadow: var(--shadow-soft);
}

.must-do-item.done {
    background: #eef8f1;
}

.must-do-index {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.must-do-item.done .must-do-index {
    background: var(--success);
}

.must-do-main {
    min-width: 0;
}

.must-do-main strong,
.must-do-main small {
    display: block;
}

.must-do-main strong {
    font-size: 15px;
    line-height: 1.3;
}

.must-do-main small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
}

.must-do-item em {
    color: var(--primary-strong);
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.must-do-item.done em {
    color: var(--success);
}

.onboarding-banner,
.onboarding-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.onboarding-banner h2,
.onboarding-hero h2 {
    margin-bottom: 8px;
}

.onboarding-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.onboarding-step {
    position: relative;
    margin-bottom: 0;
}

.onboarding-step.done {
    background: #eef8f1;
}

.onboarding-step-mark {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border-radius: 8px;
    background: #fff3d7;
    padding: 0 9px;
    color: #7a4b00;
    font-size: 12px;
    font-weight: 800;
}

.onboarding-step.done .onboarding-step-mark {
    background: #dff3e6;
    color: var(--success);
}

.inline-form {
    margin: 0;
}

.inline-form button {
    width: 100%;
}

.list {
    display: grid;
    gap: 8px;
}

.list-row, .mistake-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    padding: 12px;
    box-shadow: var(--shadow-soft);
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.mistake-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
}

.mistake-row .row-main {
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 10px;
}

.row-main {
    display: block;
    min-width: 0;
    flex: 1;
}

.row-action-form {
    flex: 0 0 auto;
}

.list-row span, .mistake-row strong {
    font-weight: 700;
}

.list-row small, .mistake-row small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    line-height: 1.4;
}

.danger-btn {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(217, 45, 32, 0.28);
    border-radius: 8px;
    background: #fff2f0;
    padding: 0 12px;
    color: var(--danger);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.danger-btn.small {
    min-height: 34px;
    padding: 0 10px;
}

.compact .list-row {
    min-height: 46px;
}

.action-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.score-form {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    padding-bottom: 72px;
    align-items: start;
}

.score-card {
    min-width: 0;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    padding: 10px;
    box-shadow: var(--shadow-soft);
}

.score-card h3 {
    margin: 0 0 10px;
    overflow: hidden;
    color: var(--text);
    font-size: 15px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.score-card label {
    gap: 6px;
    font-size: 13px;
}

.score-card input {
    min-height: 40px;
    padding: 8px 10px;
}

.section-score-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.score-card .section-score-grid {
    grid-template-columns: 1fr;
    gap: 8px;
}

.score-form .sticky-action {
    grid-column: 1 / -1;
}

.file-upload-field {
    display: grid;
    gap: 8px;
}

.file-upload-row {
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr;
    gap: 10px;
    align-items: stretch;
}

.file-upload-btn {
    width: 100%;
    cursor: pointer;
}

.file-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.file-upload-status {
    display: flex;
    min-height: 46px;
    align-items: center;
    margin: 0;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: #f3f7fb;
    padding: 10px 11px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    word-break: break-all;
}

.file-upload-status.has-file {
    border-color: rgba(36, 138, 61, 0.26);
    background: var(--green-soft);
    color: var(--success);
}

.file-upload-status.is-danger {
    border-color: rgba(217, 45, 32, 0.26);
    background: var(--rose-soft);
    color: var(--danger);
}

.sticky-action {
    position: sticky;
    bottom: calc(66px + env(safe-area-inset-bottom));
    margin-top: 12px;
    box-shadow: 0 12px 26px rgba(19, 115, 209, 0.24);
}

.report-content {
    margin-top: 16px;
    border-top: 1px solid var(--line-soft);
    padding-top: 16px;
    white-space: normal;
    line-height: 1.85;
    font-size: 15px;
}

.trend-summary {
    margin-bottom: 0;
    line-height: 1.8;
}

.trend-list {
    display: grid;
    gap: 12px;
}

.trend-card {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    padding: 12px;
    box-shadow: var(--shadow-soft);
}

.trend-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.trend-head strong {
    line-height: 1.45;
}

.trend-head small {
    flex: 0 0 auto;
    color: var(--muted);
}

.trend-meter {
    display: grid;
    gap: 7px;
    margin-bottom: 10px;
    color: #424245;
    font-size: 14px;
}

.trend-meter div {
    overflow: hidden;
    height: 10px;
    border-radius: 999px;
    background: #e8e8ed;
}

.trend-meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.trend-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
}

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

.weak-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    padding: 12px;
    box-shadow: var(--shadow-soft);
}

.weak-row span {
    font-weight: 700;
}

.weak-row strong {
    color: var(--danger);
    font-size: 14px;
}

.diagnosis-card-list {
    display: grid;
    gap: 10px;
}

.diagnosis-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    padding: 13px;
    box-shadow: var(--shadow-soft);
}

.diagnosis-card strong {
    display: block;
    margin-bottom: 5px;
}

.diagnosis-card small {
    display: block;
    color: var(--muted);
    line-height: 1.45;
}

.diagnosis-card > span,
.diagnosis-score {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #eaf3ff;
    padding: 6px 10px;
    color: var(--primary-strong);
    font-size: 13px;
    font-weight: 800;
}

.diagnosis-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mistake-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.mistake-actions form {
    margin: 0;
    min-width: 0;
}

.mistake-actions .mini-btn,
.mistake-actions .danger-btn {
    display: inline-flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}

.mistake-actions .danger-btn.small {
    min-height: 38px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.detail-grid div,
.answer-compare div {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    padding: 12px;
    box-shadow: var(--shadow-soft);
}

.detail-grid span,
.answer-compare span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 13px;
}

.detail-grid strong {
    line-height: 1.5;
}

.mistake-detail-text {
    white-space: normal;
    line-height: 1.85;
}

.answer-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.answer-compare p {
    margin-bottom: 0;
    line-height: 1.75;
}

.student-summary {
    margin: 14px 0 0;
    border-top: 1px solid var(--line-soft);
    padding-top: 14px;
    line-height: 1.8;
}

.student-period-form {
    margin-top: 14px;
}

.subsection-title {
    margin: 18px 0 10px;
    font-size: 16px;
    letter-spacing: 0;
}

.student-comment-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.student-comment-row {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    padding: 12px;
    box-shadow: var(--shadow-soft);
}

.student-comment-row strong {
    display: block;
    margin-bottom: 7px;
}

.student-comment-row p {
    margin-bottom: 8px;
    color: #424245;
    line-height: 1.75;
}

.student-comment-row small {
    display: block;
    color: var(--muted);
    line-height: 1.55;
}

.student-score-list {
    display: grid;
    gap: 10px;
}

.student-score-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    padding: 12px;
    box-shadow: var(--shadow-soft);
}

.student-score-row strong {
    display: block;
    margin-bottom: 4px;
}

.student-score-row small {
    color: var(--muted);
}

.score-pill {
    align-self: start;
    min-width: 58px;
    border-radius: 999px;
    background: #eaf3ff;
    padding: 6px 10px;
    color: var(--primary-strong);
    text-align: center;
    font-weight: 800;
}

.trend-meter.full {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.tag-cloud span {
    border: 1px solid rgba(19, 115, 209, 0.18);
    border-radius: 999px;
    background: #eaf3ff;
    padding: 6px 10px;
    color: var(--primary-strong);
    font-size: 13px;
    font-weight: 700;
}

.score-options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.score-options label {
    display: block;
}

.score-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.score-options span {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: #fff;
    color: var(--primary-strong);
    font-weight: 800;
}

.score-options input:checked + span {
    border-color: var(--primary);
    background: #eaf3ff;
    box-shadow: inset 0 0 0 1px var(--primary);
}

.lesson-summary {
    margin-bottom: 0;
    line-height: 1.8;
}

.lesson-row {
    align-items: flex-start;
}

.lesson-score-badge {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #eaf3ff;
    padding: 7px 10px;
    color: var(--primary-strong);
    font-size: 14px;
}

.recitation-content {
    margin-top: 12px;
    border-top: 1px solid var(--line-soft);
    padding-top: 12px;
    color: #424245;
    line-height: 1.8;
}

.recitation-option-row,
.recitation-page-grid {
    display: grid;
    gap: 7px;
}

.recitation-option-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.recitation-page-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.recitation-option-row label,
.recitation-page-grid label {
    display: block;
    min-width: 0;
}

.recitation-option-row input,
.recitation-page-grid input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.recitation-option-row span,
.recitation-page-grid span,
.recitation-title-preview {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: #fff;
    color: #424245;
    font-weight: 800;
}

.recitation-page-grid span {
    min-height: 34px;
    padding: 0 2px;
    font-size: 13px;
}

.recitation-option-row input:checked + span,
.recitation-page-grid input:checked + span {
    border-color: rgba(19, 115, 209, 0.55);
    background: #eaf3ff;
    color: var(--primary-strong);
    box-shadow: inset 0 0 0 1px rgba(19, 115, 209, 0.42);
}

.recitation-title-preview {
    justify-content: flex-start;
    min-height: 42px;
    padding: 0 12px;
    background: #f3f7fb;
    color: var(--primary-strong);
}

.recitation-panel {
    padding: 14px;
}

.recitation-student-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
}

.recitation-student-form {
    margin: 0;
    min-width: 0;
}

.recitation-student-btn {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    padding: 0 6px;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

.recitation-student-btn.completed {
    background: #1373d1;
    box-shadow: 0 6px 14px rgba(19, 115, 209, 0.18);
}

.recitation-student-btn.pending {
    background: #f97316;
    box-shadow: 0 6px 14px rgba(249, 115, 22, 0.16);
}

.homework-status-subject-row,
.homework-status-student-grid {
    display: grid;
    gap: 7px;
}

.homework-status-subject-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.homework-status-student-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.homework-status-subject-row label,
.homework-status-student-grid label {
    display: block;
    min-width: 0;
}

.homework-status-subject-row input,
.homework-status-student-grid input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.homework-status-subject-row span,
.homework-status-student-grid span {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: #eaf3ff;
    color: var(--primary-strong);
    padding: 0 6px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
}

.homework-status-student-grid span {
    color: #fff;
    background: #1373d1;
    font-size: 14px;
}

.homework-status-subject-row input:checked + span {
    border-color: rgba(19, 115, 209, 0.55);
    background: #eaf3ff;
    box-shadow: inset 0 0 0 1px rgba(19, 115, 209, 0.42);
}

.homework-status-student-grid input:checked + span,
.homework-status-student-grid span.incomplete {
    border-color: rgba(220, 38, 38, 0.35);
    background: #dc2626;
    color: #fff;
    box-shadow: 0 6px 14px rgba(220, 38, 38, 0.15);
}

.homework-status-student-grid span.completed {
    border-color: rgba(19, 115, 209, 0.35);
    background: #1373d1;
    color: #fff;
}

.homework-status-panel {
    padding: 14px;
}

.discipline-mode-row,
.discipline-student-grid {
    display: grid;
    gap: 7px;
}

.discipline-mode-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.discipline-student-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.discipline-mode-row label {
    display: block;
    min-width: 0;
}

.discipline-mode-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.discipline-mode-row span,
.discipline-student-btn,
.discipline-student-grid.readonly span {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    padding: 0 6px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
}

.discipline-mode-row span {
    background: #fff;
    color: #424245;
}

.discipline-mode-row input:checked + span {
    border-color: rgba(124, 58, 237, 0.45);
    background: #f4edff;
    color: #5b21b6;
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.28);
}

.discipline-student-btn {
    width: 100%;
    border: 0;
    color: #fff;
    font: inherit;
    font-size: 14px;
    transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

.discipline-student-btn.normal,
.discipline-student-grid span.normal {
    background: #1373d1;
    color: #fff;
    box-shadow: 0 6px 14px rgba(19, 115, 209, 0.16);
}

.discipline-student-btn.excellent,
.discipline-student-grid span.excellent {
    background: #7c3aed;
    color: #fff;
    box-shadow: 0 6px 14px rgba(124, 58, 237, 0.18);
}

.discipline-student-btn.violation,
.discipline-student-grid span.violation {
    background: #dc2626;
    color: #fff;
    box-shadow: 0 6px 14px rgba(220, 38, 38, 0.16);
}

.discipline-record-status {
    display: inline-flex;
    min-width: 76px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.discipline-record-status.normal {
    background: #eaf3ff;
    color: var(--primary-strong);
}

.discipline-record-status.excellent {
    background: #f4edff;
    color: #5b21b6;
}

.discipline-record-status.violation {
    background: #fff1f2;
    color: #b91c1c;
}

.student-recitation-row.is-excellent {
    border-color: rgba(124, 58, 237, 0.2);
}

.summary-box {
    margin-top: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    padding: 12px;
    line-height: 1.75;
}

.summary-box p {
    margin-bottom: 8px;
}

.summary-box p:last-child {
    margin-bottom: 0;
}

.recovery-code-box {
    display: grid;
    gap: 10px;
    margin: 12px 0;
    padding: 18px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.96));
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.08);
}

.recovery-code-box span {
    color: var(--muted);
    font-size: 0.92rem;
}

.recovery-code-box strong {
    color: #0f172a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: clamp(1.15rem, 3vw, 1.65rem);
    letter-spacing: 0.08em;
    word-break: break-all;
}

.backup-warning {
    color: #b42318;
    font-weight: 700;
}

.term-row {
    align-items: flex-start;
}

.backup-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.backup-meta div,
.backup-table-list div {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    padding: 12px;
    box-shadow: var(--shadow-soft);
}

.backup-meta span,
.backup-table-list span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 13px;
}

.backup-meta strong,
.backup-table-list strong {
    word-break: break-all;
    line-height: 1.45;
}

.backup-table-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.parent-page {
    background: var(--bg);
}

.parent-shell {
    padding-bottom: 28px;
}

.parent-hero h1 {
    margin-top: 4px;
}

.parent-link-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.parent-link-copy input,
.parent-link-row input {
    min-width: 0;
    width: 100%;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    padding: 10px 12px;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
}

.parent-link-row {
    align-items: flex-start;
}

.parent-link-row .row-main {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.parent-link-row .mini-btn,
.parent-link-row .danger-btn.small {
    margin-top: 2px;
}

.home-school-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.home-school-list {
    display: grid;
    gap: 12px;
}

.home-school-card {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
    padding: 14px;
    box-shadow: var(--shadow-soft);
}

.home-school-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.home-school-card-head strong,
.home-school-card-head small,
.home-school-card-head span {
    display: block;
}

.home-school-card-head small {
    margin-top: 4px;
    color: var(--muted);
    line-height: 1.45;
}

.home-school-card-head > span {
    flex: 0 0 auto;
    border-radius: 999px;
    background: #eef6ff;
    padding: 6px 9px;
    color: var(--primary-strong);
    font-size: 12px;
    font-weight: 800;
}

.home-school-mini {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 10px;
}

.school-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.school-brand {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 12px;
}

.school-logo {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: #fff;
    object-fit: cover;
    box-shadow: var(--shadow-soft);
}

.school-logo.placeholder {
    display: grid;
    place-items: center;
    color: var(--primary-strong);
    font-size: 22px;
    font-weight: 900;
}

.school-logo-config {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

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

.official-flow div {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    padding: 12px;
}

.official-flow strong,
.official-flow span {
    display: block;
}

.official-flow span {
    margin-top: 6px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.school-hero h2 {
    margin-bottom: 8px;
}

.school-contact {
    flex: 0 0 190px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    padding: 12px;
    box-shadow: var(--shadow-soft);
}

.school-contact span,
.school-contact small {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.school-contact strong {
    display: block;
    margin: 7px 0 5px;
    line-height: 1.4;
}

.school-summary-list {
    margin-top: 12px;
}

.school-grade-grid,
.school-class-list {
    display: grid;
    gap: 12px;
}

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

.school-grade-card,
.school-class-card {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    padding: 14px;
    box-shadow: var(--shadow-soft);
}

.school-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.school-card-head strong,
.school-card-head small {
    display: block;
}

.school-card-head small {
    margin-top: 4px;
    color: var(--muted);
    line-height: 1.45;
}

.school-status {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.school-status.ok {
    background: #eaf7ee;
    color: var(--success);
}

.school-status.warn {
    background: #fff3d7;
    color: #986f00;
}

.school-status.danger {
    background: #fff2f0;
    color: var(--danger);
}

.school-mini {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 10px;
}

.school-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.school-actions .secondary-btn {
    min-height: 40px;
    padding: 0 10px;
    font-size: 14px;
}

.research-point-list {
    display: grid;
    gap: 12px;
}

.research-point-card {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    padding: 14px;
    box-shadow: var(--shadow-soft);
}

.research-class-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.research-class-pills span {
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: #f5f8fb;
    padding: 7px 10px;
    color: #303033;
    font-size: 13px;
    font-weight: 700;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.teacher-list {
    display: grid;
    gap: 12px;
}

.teacher-card {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    padding: 14px;
    box-shadow: var(--shadow-soft);
}

.teacher-card summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.teacher-card summary strong,
.teacher-card summary small {
    display: block;
}

.teacher-card summary small {
    margin-top: 4px;
    color: var(--muted);
    line-height: 1.45;
}

.teacher-edit-form {
    margin-top: 14px;
    border-top: 1px solid var(--line-soft);
    padding-top: 14px;
}

.role-badge {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.role-badge.active {
    background: #eaf7ee;
    color: var(--success);
}

.role-badge.inactive {
    background: #fff2f0;
    color: var(--danger);
}

.parent-message-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    margin-top: 10px;
}

.parent-message-copy textarea {
    min-height: 112px;
    border-color: var(--line-soft);
    background: #fff;
    color: #303033;
    font-size: 14px;
}

.compact-copy {
    margin-top: 10px;
}

.closure-student-grid,
.closure-list {
    display: grid;
    gap: 12px;
}

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

.closure-student-card,
.closure-card {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    padding: 14px;
    box-shadow: var(--shadow-soft);
}

.closure-student-card strong,
.closure-student-card small,
.closure-student-card span {
    display: block;
}

.closure-student-card small,
.closure-student-card span {
    margin-top: 6px;
    color: var(--muted);
    line-height: 1.45;
}

.closure-card.is-overdue {
    border-color: rgba(217, 45, 32, 0.28);
    background: #fffafa;
}

.closure-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.closure-card-head strong,
.closure-card-head small {
    display: block;
}

.closure-card-head small {
    margin-top: 4px;
    color: var(--muted);
    line-height: 1.45;
}

.closure-status {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.closure-status.pending {
    background: #fff3d7;
    color: #986f00;
}

.closure-status.corrected {
    background: #eaf3ff;
    color: var(--primary-strong);
}

.closure-status.retested {
    background: #f0edff;
    color: #5b21b6;
}

.closure-status.mastered {
    background: #eaf7ee;
    color: var(--success);
}

.closure-form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.closure-mini {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 10px;
}

.closure-point-list small {
    display: block;
    color: var(--muted);
    line-height: 1.5;
}

.backup-preview-list {
    display: grid;
    gap: 8px;
}

.backup-preview-list div {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    padding: 12px;
    box-shadow: var(--shadow-soft);
}

.backup-preview-list span,
.backup-preview-list strong,
.backup-preview-list small {
    display: block;
}

.backup-preview-list span,
.backup-preview-list small {
    color: var(--muted);
}

.backup-preview-list strong {
    margin: 5px 0;
}

.system-check-list {
    display: grid;
    gap: 10px;
}

.system-check-item {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    padding: 12px;
    box-shadow: var(--shadow-soft);
}

.system-check-item div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.system-check-item span {
    color: var(--muted);
    font-size: 13px;
}

.system-check-item strong {
    font-size: 15px;
}

.system-check-item small {
    color: var(--muted);
    line-height: 1.55;
    word-break: break-all;
}

.system-check-item.ok strong {
    color: #14713f;
}

.system-check-item.warn strong {
    color: #9a5b00;
}

.system-check-item.danger strong {
    color: #b42318;
}

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

.export-grid .secondary-btn {
    justify-content: center;
    min-height: 44px;
}

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

.closure-list {
    display: grid;
    gap: 10px;
}

.closure-item {
    display: block;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    padding: 12px;
    box-shadow: var(--shadow-soft);
}

.closure-item div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.closure-item strong {
    color: var(--text);
}

.closure-item span {
    font-weight: 800;
}

.closure-item.ok span {
    color: #14713f;
}

.closure-item.pending span {
    color: #b42318;
}

.closure-item small {
    color: var(--muted);
    line-height: 1.5;
}

.recycle-row {
    align-items: flex-start;
}

.recycle-row.restored {
    opacity: 0.72;
}

.recycle-row .row-action-form {
    margin: 0;
}

.student-recitation-list,
.recitation-report-list {
    display: grid;
    gap: 8px;
}

.student-recitation-row,
.recitation-report-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    padding: 12px;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.student-recitation-row strong,
.recitation-report-row span {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
}

.student-recitation-row small,
.recitation-report-row small {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.recitation-record-status,
.recitation-report-metrics span {
    display: inline-flex;
    min-width: 56px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    margin-bottom: 0;
}

.recitation-report-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.recitation-record-status.completed,
.recitation-report-metrics .metric-done {
    background: #eaf3ff;
    color: var(--primary-strong);
}

.recitation-record-status.pending,
.recitation-report-metrics .metric-pending {
    background: #fff1e7;
    color: #b45309;
}

.student-recitation-row.is-completed {
    border-color: rgba(19, 115, 209, 0.18);
}

.student-recitation-row.is-pending {
    border-color: rgba(249, 115, 22, 0.2);
}

.recitation-student-btn:disabled {
    cursor: wait;
    opacity: 0.72;
}

@media (hover: hover) {
    .recitation-student-btn:hover {
        filter: brightness(1.04);
        transform: translateY(-1px);
    }

    .discipline-student-btn:hover {
        filter: brightness(1.04);
        transform: translateY(-1px);
    }
}

.homework-photo {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 72vh;
    object-fit: contain;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: #f3f7fb;
}

.homework-photo-wrap {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
}

.homework-upload-field {
    display: grid;
    gap: 8px;
}

.field-label {
    color: #424245;
    font-size: 14px;
    font-weight: 600;
}

.homework-upload-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.homework-upload-btn {
    width: 100%;
    cursor: pointer;
}

.homework-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.homework-upload-status {
    margin: 0;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: #f3f7fb;
    padding: 10px 11px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.homework-upload-status.has-file {
    border-color: rgba(36, 138, 61, 0.26);
    background: var(--green-soft);
    color: var(--success);
}

.homework-upload-status.is-danger {
    border-color: rgba(217, 45, 32, 0.26);
    background: var(--rose-soft);
    color: var(--danger);
}

.homework-item-list {
    display: grid;
    gap: 10px;
}

.homework-item {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    padding: 12px;
    box-shadow: var(--shadow-soft);
}

.homework-item p {
    margin-bottom: 8px;
    line-height: 1.7;
}

.homework-item small {
    display: block;
    color: var(--muted);
    line-height: 1.6;
}

.homework-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.homework-item-head strong {
    border-radius: 999px;
    background: #eaf3ff;
    padding: 5px 10px;
    color: var(--primary-strong);
    font-size: 13px;
}

.ai-check-form {
    margin-top: 12px;
    border-top: 1px solid var(--line-soft);
    padding-top: 12px;
}

.ai-check-form + .stack-form {
    margin-top: 12px;
}

.inline-confirm-form {
    margin-top: 10px;
}

.report-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.copy-source {
    position: fixed;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: min(920px, 100%);
    margin: 0 auto;
    border-top: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.82);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

.bottom-nav a {
    border-radius: 8px;
    padding: 9px 0;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.bottom-nav a.active {
    background: rgba(19, 115, 209, 0.10);
    color: var(--primary-strong);
    font-weight: 800;
}

.login-page, .install-page {
    display: grid;
    place-items: center;
    padding: 22px 14px;
}

.login-shell, .install-shell {
    width: min(480px, 100%);
}

.brand-panel {
    margin-bottom: 14px;
    text-align: center;
}

.app-icon {
    width: 74px;
    height: 74px;
    margin-bottom: 12px;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: var(--shadow-soft);
}

.brand-panel h1 {
    margin-bottom: 8px;
}

.brand-panel p {
    color: var(--muted);
}

.web-qr-login-panel {
    display: grid;
    gap: 14px;
}

.web-qr-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.web-qr-head h2 {
    margin: 0 0 6px;
    font-size: 18px;
}

.web-qr-head p {
    margin: 0;
}

.web-qr-head span {
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--blue-soft);
    padding: 6px 10px;
    color: var(--primary-strong);
    font-size: 12px;
    font-weight: 800;
}

.web-qr-box {
    display: grid;
    place-items: center;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: rgba(19, 115, 209, 0.04);
    padding: 14px;
}

.web-qr-image {
    width: 220px;
    height: 220px;
    border-radius: 8px;
    background: #ffffff;
}

.wechat-official-qr {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 300px;
}

.wechat-official-qr iframe {
    width: 100%;
    max-width: 320px;
    min-height: 300px;
    border: 0;
}

.wechat-official-qr p {
    margin: 0;
}

.web-qr-status {
    margin: 0;
    border-radius: 8px;
    background: var(--blue-soft);
    padding: 10px 12px;
    color: var(--primary-strong);
    font-weight: 800;
    text-align: center;
}

.web-qr-status.success {
    background: var(--green-soft);
    color: #1b7f3b;
}

.web-qr-status.danger {
    background: #fff0ef;
    color: #b42318;
}

.web-qr-note {
    margin: 0;
    font-size: 13px;
    text-align: center;
}

body.theme-workbench {
    --bg: #f3f7fb;
    --panel: rgba(255, 255, 255, 0.94);
}

body.theme-workbench .topbar {
    background: rgba(255, 255, 255, 0.78);
}

body.theme-workbench .today-hero,
body.theme-workbench .must-do-panel {
    border-color: rgba(19, 115, 209, 0.10);
}

body.theme-professional {
    --bg: #eef3f8;
    --panel: rgba(255, 255, 255, 0.96);
    --text: #172033;
    --muted: #5d6f83;
    --line: rgba(31, 49, 69, 0.18);
    --line-soft: rgba(31, 49, 69, 0.10);
    --primary: #22577a;
    --primary-strong: #173b57;
    --blue-soft: #e7eef7;
    --green-soft: #e6f3ee;
    --amber-soft: #fff1d3;
    --shadow: 0 14px 34px rgba(19, 32, 51, 0.12);
}

body.theme-professional .app-shell,
body.theme-professional .bottom-nav {
    width: min(1040px, 100%);
}

body.theme-professional .topbar {
    border-color: rgba(23, 32, 51, 0.10);
    background: #172033;
    color: #ffffff;
}

body.theme-professional .topbar .eyebrow,
body.theme-professional .teacher-meta {
    color: rgba(255, 255, 255, 0.72);
}

body.theme-professional .icon-link,
body.theme-professional .page-help summary {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
}

body.theme-professional .page-help-body {
    color: #243447;
}

body.theme-professional .stat-card,
body.theme-professional .school-grade-card,
body.theme-professional .school-class-card,
body.theme-professional .teacher-card,
body.theme-professional .research-point-card,
body.theme-professional .trend-card,
body.theme-professional .weak-row,
body.theme-professional .closure-card {
    background: #ffffff;
}

body.theme-professional .stat-card strong,
body.theme-professional .diagnosis-score {
    color: var(--primary-strong);
}

body.theme-warm,
.parent-page {
    --bg: #fff8ed;
    --panel: rgba(255, 254, 250, 0.96);
    --text: #241f1a;
    --muted: #71665a;
    --line: rgba(111, 83, 46, 0.18);
    --line-soft: rgba(111, 83, 46, 0.10);
    --primary: #2d7a66;
    --primary-strong: #1f5f50;
    --green-soft: #eaf7ef;
    --blue-soft: #eaf3ff;
    --amber-soft: #fff1d4;
    --shadow: 0 12px 30px rgba(90, 64, 31, 0.10);
}

body.theme-warm .app-shell {
    width: min(820px, 100%);
}

body.theme-warm .topbar,
.parent-page .parent-shell > .panel:first-child {
    border-color: rgba(194, 130, 57, 0.16);
    background: #fffaf1;
}

body.theme-warm .panel,
body.theme-warm .home-school-card,
body.theme-warm .list-row {
    background: rgba(255, 254, 250, 0.96);
}

body.theme-warm .quick-card.orange,
body.theme-warm .quick-card.amber {
    background: #fff0d9;
}

body.theme-warm .quick-card.purple,
body.theme-warm .quick-card.violet {
    background: #f4efff;
}

body.mode-whiteboard {
    --bg: #eef6ff;
    --panel: rgba(255, 255, 255, 0.82);
}

body.mode-whiteboard .app-shell,
body.mode-whiteboard .bottom-nav {
    width: min(1120px, 100%);
}

body.mode-whiteboard .topbar {
    position: sticky;
    top: 12px;
    z-index: 20;
    border-color: rgba(19, 115, 209, 0.14);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 16px 40px rgba(19, 55, 92, 0.10);
}

body.mode-whiteboard h1 {
    font-size: 38px;
    font-weight: 760;
}

body.mode-whiteboard .panel {
    padding: 22px;
}

body.mode-whiteboard .stack-form {
    gap: 18px;
}

body.mode-whiteboard label {
    gap: 10px;
    font-size: 17px;
}

body.mode-whiteboard input,
body.mode-whiteboard textarea,
body.mode-whiteboard select {
    min-height: 58px;
    font-size: 18px;
}

body.mode-whiteboard .primary-btn,
body.mode-whiteboard .secondary-btn,
body.mode-whiteboard .danger-btn {
    min-height: 60px;
    font-size: 18px;
}

body.mode-whiteboard .stack-form > .primary-btn.block {
    position: relative;
    z-index: 1;
    min-height: 68px;
    font-size: 20px;
    box-shadow: var(--shadow-pop);
}

body.mode-whiteboard .score-options,
body.mode-whiteboard .discipline-mode-row,
body.mode-whiteboard .homework-status-subject-row,
body.mode-whiteboard .recitation-option-row {
    gap: 12px;
}

body.mode-whiteboard .score-options span,
body.mode-whiteboard .discipline-mode-row span,
body.mode-whiteboard .homework-status-subject-row span,
body.mode-whiteboard .recitation-option-row span {
    min-height: 66px;
    font-size: 18px;
    box-shadow: var(--shadow-soft);
}

body.mode-whiteboard .recitation-page-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 8px;
}

body.mode-whiteboard .recitation-page-grid span {
    min-height: 48px;
    font-size: 15px;
}

body.mode-whiteboard .recitation-student-grid,
body.mode-whiteboard .homework-status-student-grid,
body.mode-whiteboard .discipline-student-grid {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 12px;
}

body.mode-whiteboard .recitation-student-btn,
body.mode-whiteboard .homework-status-student-grid span,
body.mode-whiteboard .discipline-student-btn,
body.mode-whiteboard .discipline-student-grid.readonly span {
    min-height: 74px;
    padding: 8px;
    font-size: 19px;
    box-shadow: 0 12px 28px rgba(27, 74, 122, 0.14);
}

body.mode-whiteboard .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

body.mode-whiteboard .stat-card strong {
    font-size: 34px;
}

body.mode-whiteboard .action-row {
    margin-bottom: 12px;
}

body.mode-whiteboard .list-row {
    min-height: 58px;
}

body.mode-whiteboard .danger-zone {
    opacity: 0.82;
}

body.page-seat_planner .app-shell,
body.page-seat-planner .app-shell {
    width: min(1480px, 100%);
}

.seat-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.seat-hero h2 {
    margin-bottom: 8px;
}

.seat-hero-actions,
.seat-toggle-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.seat-planner-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(420px, 1.6fr) minmax(250px, 0.78fr);
    gap: 16px;
    align-items: start;
}

.seat-side .panel,
.seat-board-panel {
    margin-bottom: 16px;
}

.seat-flag-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.seat-flag-cell {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    padding: 9px;
}

.seat-flag-cell strong {
    display: block;
    margin-bottom: 5px;
    color: var(--primary-strong);
    font-size: 13px;
}

.seat-flag-cell label,
.seat-check-row label,
.seat-toggle-row label,
.seat-rule-row label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.seat-flag-cell input,
.seat-check-row input,
.seat-toggle-row input,
.seat-rule-row input[type="checkbox"] {
    width: auto;
    min-height: 0;
}

.seat-rule-list {
    display: grid;
    gap: 8px;
}

.seat-rule-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 72px 66px;
    gap: 8px;
    align-items: center;
}

.seat-rule-row input[type="number"] {
    min-height: 38px;
}

.seat-check-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.seat-board-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.seat-board-head h2 {
    margin-bottom: 6px;
}

.seat-front-board {
    display: grid;
    min-height: 54px;
    place-items: center;
    border: 1px solid rgba(19, 115, 209, 0.18);
    border-radius: 8px;
    background: linear-gradient(180deg, #ecf6ff, #dfefff);
    color: var(--primary-strong);
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 14px;
}

.seat-board-grid {
    display: grid;
    gap: 9px;
    align-items: stretch;
    overflow-x: auto;
    padding-bottom: 4px;
}

.seat-board-cell {
    min-height: 82px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
    padding: 9px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 5px;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
}

.seat-board-cell.draggable {
    cursor: grab;
}

.seat-board-cell.draggable:active {
    cursor: grabbing;
}

.seat-board-cell.dragging {
    opacity: 0.56;
    transform: scale(0.98);
}

.seat-board-cell.drag-over {
    border-color: var(--primary);
    background: #eaf4ff;
    box-shadow: 0 0 0 4px rgba(19, 115, 209, 0.16), var(--shadow-soft);
}

.seat-board-cell strong {
    display: grid;
    min-width: 0;
    place-items: center;
    font-size: 16px;
    line-height: 1.2;
    word-break: break-word;
}

.seat-board-cell small,
.seat-position {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.seat-board-cell.filled {
    border-color: rgba(19, 115, 209, 0.22);
    background: linear-gradient(180deg, #ffffff, #edf6ff);
}

.seat-board-cell.warning {
    border-color: rgba(217, 45, 32, 0.38);
    background: #fff7f5;
}

.seat-board-cell.unavailable {
    border-style: dashed;
    background: #eef1f4;
    color: #7b8794;
    cursor: not-allowed;
}

.seat-board-cell.locked {
    box-shadow: inset 0 0 0 2px rgba(19, 115, 209, 0.18);
}

.seat-board-cell.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(19, 115, 209, 0.14), var(--shadow-soft);
}

.seat-save-form {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: end;
}

.seat-issue-list,
.seat-history-list {
    display: grid;
    gap: 10px;
}

.seat-issue {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: #fffaf0;
    padding: 10px;
    color: #765200;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.seat-issue.required {
    background: #fff2f0;
    color: var(--danger);
}

.seat-history-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    padding: 10px;
}

.seat-history-row small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

@media (hover: hover) {
    .primary-btn:hover {
        background: #0f7adb;
        filter: saturate(1.08);
        transform: translateY(-2px);
        box-shadow: var(--shadow-pop);
    }

    .secondary-btn:hover,
    .icon-link:hover,
    .mini-btn:hover {
        border-color: rgba(19, 115, 209, 0.24);
        background: #fff;
        color: var(--primary-strong);
        transform: translateY(-1px);
    }

    .danger-btn:hover {
        background: #fff7f6;
        border-color: rgba(217, 45, 32, 0.42);
        transform: translateY(-1px);
    }

    .stat-card:hover,
    .quick-card:hover,
    .today-card:hover,
    .whiteboard-entry:hover,
    .compact-action-row a:hover,
    .list-row:hover,
    .mistake-row:hover,
    .must-do-item:hover {
        border-color: rgba(19, 115, 209, 0.18);
        box-shadow: var(--shadow);
        transform: translateY(-3px);
    }

    .quick-card:hover::after {
        color: rgba(19, 115, 209, 0.75);
        transform: translateX(3px);
    }

    .bottom-nav a:hover {
        background: rgba(19, 115, 209, 0.08);
        color: var(--primary-strong);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .app-shell > section,
    .notice {
        animation: appleFadeUp 260ms ease both;
    }

    .app-shell > section:nth-of-type(2) {
        animation-delay: 35ms;
    }

    .app-shell > section:nth-of-type(3) {
        animation-delay: 70ms;
    }
}

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

.check-row {
    display: flex;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
}

.check-row input {
    width: auto;
    min-height: auto;
}

@media (max-width: 1180px) {
    .score-form {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .score-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .whiteboard-cta,
    .whiteboard-stage-head,
    .class-whiteboard-cta {
        grid-template-columns: 1fr;
    }

    .whiteboard-main-btn,
    .whiteboard-fullscreen-btn,
    .class-whiteboard-cta .primary-btn {
        width: 100%;
    }

    .whiteboard-entry-grid {
        grid-template-columns: 1fr;
    }

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

    body.mode-whiteboard .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .grid-2, .grid-3, .section-score-grid, .file-upload-row, .report-actions, .trend-mini, .detail-grid, .answer-compare, .backup-meta, .backup-table-list, .export-grid, .weekly-grid, .parent-link-copy, .diagnosis-split, .home-school-actions, .school-grade-grid, .school-actions, .permission-grid, .parent-message-copy, .onboarding-steps, .official-flow, .school-logo-config {
        grid-template-columns: 1fr;
    }

    .topbar {
        align-items: flex-start;
        display: grid;
    }

    .topbar-actions {
        flex-direction: column;
        align-items: stretch;
    }

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

    .page-help-body {
        right: 0;
    }

    .onboarding-banner,
    .onboarding-hero,
    .section-head {
        display: grid;
    }

    .school-hero {
        display: grid;
    }

    .school-brand {
        display: grid;
    }

    .school-contact {
        width: 100%;
        flex-basis: auto;
    }

    .home-school-card-head {
        display: grid;
    }

    .home-school-card-head > span {
        justify-self: start;
    }

    .home-school-mini {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .school-card-head {
        display: grid;
    }

    .school-status {
        justify-self: start;
    }

    .teacher-card summary {
        display: grid;
    }

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

    .closure-student-grid,
    .closure-mini {
        grid-template-columns: 1fr;
    }

    .closure-card-head {
        display: grid;
    }

    .closure-status {
        justify-self: start;
    }

    .score-options {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }

    .today-card-grid,
    .compact-action-row {
        grid-template-columns: 1fr;
    }

    .whiteboard-entry {
        min-height: 148px;
        padding: 16px;
    }

    .whiteboard-entry strong {
        font-size: 22px;
    }

    body.mode-whiteboard .recitation-student-grid,
    body.mode-whiteboard .homework-status-student-grid,
    body.mode-whiteboard .discipline-student-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.mode-whiteboard .recitation-page-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .score-options span {
        font-size: 13px;
    }

    .list-row {
        align-items: stretch;
    }

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

    .recitation-student-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }

    .homework-status-student-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }

    .discipline-student-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }

    .recitation-page-grid {
        grid-template-columns: repeat(10, minmax(0, 1fr));
        gap: 5px;
    }

    .recitation-page-grid span {
        min-height: 32px;
        font-size: 12px;
    }

    .student-recitation-row,
    .recitation-report-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .recitation-report-metrics {
        justify-content: flex-start;
    }

    .recitation-student-btn {
        min-height: 38px;
        padding: 0 4px;
        font-size: 13px;
    }

    .homework-status-student-grid span {
        min-height: 38px;
        padding: 0 4px;
        font-size: 13px;
    }

    .discipline-student-btn,
    .discipline-student-grid.readonly span {
        min-height: 38px;
        padding: 0 4px;
        font-size: 13px;
    }

    .row-main {
        flex: 1 1 auto;
    }

    .student-score-row {
        grid-template-columns: 1fr;
    }

    .score-pill {
        justify-self: start;
    }

    .seat-hero,
    .seat-board-head {
        display: grid;
    }

    .seat-hero-actions,
    .seat-toggle-row {
        justify-content: stretch;
    }

    .seat-hero-actions > *,
    .seat-toggle-row > * {
        width: 100%;
    }

    .seat-planner-layout {
        grid-template-columns: 1fr;
    }

    .seat-save-form,
    .seat-history-row,
    .seat-check-row,
    .seat-rule-row {
        grid-template-columns: 1fr;
    }

    .seat-board-grid {
        gap: 7px;
    }

    .seat-board-cell {
        min-height: 68px;
        padding: 7px;
    }

    .seat-board-cell strong {
        font-size: 14px;
    }

    h1 {
        font-size: 24px;
    }
}

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

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

    .app-shell {
        width: 100%;
        padding: 0;
    }

    .panel {
        border: 0;
        padding: 0;
    }

    .seat-planner-layout {
        display: block;
    }

    .seat-board-panel {
        box-shadow: none;
    }

    .seat-board-grid {
        overflow: visible;
        gap: 8px;
    }

    .seat-board-cell {
        min-height: 74px;
        box-shadow: none;
        break-inside: avoid;
    }

    .seat-board-cell strong {
        font-size: 15px;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .report-content {
        border-top: 1px solid #ddd;
        font-size: 14px;
        line-height: 1.9;
    }

    .printable-practice h2 {
        font-size: 22px;
        margin-bottom: 8px;
    }
}