:root {
    color-scheme: light;
    --ink: #192c27;
    --muted: #697870;
    --line: #dfe6df;
    --paper: #f5f7f2;
    --white: #fff;
    --forest: #174b3a;
    --forest-dark: #10392d;
    --gold: #eec846;
    --coral: #c65243;
    --mint: #dcefe4;
    --display: "Fraunces", Georgia, serif;
    --body: "DM Sans", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 14px; }
button, input, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; background: var(--white); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; }
.brand img { width: 49px; height: 49px; object-fit: contain; }
.brand span, .tv-brand span { display: grid; gap: 3px; }
.brand strong { font-size: 15px; letter-spacing: 0; }
.brand small { color: var(--muted); font-size: 11px; }
.top-actions { display: flex; align-items: center; gap: 20px; }
.connection { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; }
.connection i, .live-tag i { width: 8px; height: 8px; border-radius: 50%; background: #d4a832; box-shadow: 0 0 0 3px #f4efd7; }
.connection.is-live i { background: #41976a; box-shadow: 0 0 0 3px #e2f1e7; }
.install-link { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 4px; padding: 0 11px; color: var(--forest); background: white; font-size: 11px; font-weight: 700; }
.install-link:hover { border-color: var(--forest); background: #f0f7f2; }
.install-link > span:first-child { font-size: 16px; }
.install-link[hidden] { display: none; }
.mural-launch-button { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #b9cec0; border-radius: 4px; padding: 0 11px; color: var(--forest); background: #edf5ee; font-size: 11px; font-weight: 700; }
.mural-launch-button:hover { border-color: var(--forest); background: #e1efe4; }
.mural-launch-button span:first-child { color: var(--forest); font-size: 15px; }
.quiz-launch-button { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #d9c36e; border-radius: 4px; padding: 0 11px; color: #735c12; background: #fbf4d8; font-size: 11px; font-weight: 700; }
.quiz-launch-button:hover { border-color: #ae8f24; background: #f7edc1; }
.quiz-launch-button span:first-child { color: #b38d0d; font-size: 15px; }
.settings-launch-button { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 4px; padding: 0 11px; color: var(--ink); background: white; font-size: 11px; font-weight: 700; }
.settings-launch-button:hover { border-color: var(--forest); color: var(--forest); background: #f0f7f2; }
.settings-launch-button span:first-child { color: var(--forest); font-size: 15px; }
.tv-link { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); padding: 9px 13px; text-decoration: none; font-weight: 700; font-size: 12px; }
.tv-link:hover { border-color: var(--forest); color: var(--forest); }
.page-shell { width: min(1440px, 91vw); margin: 0 auto; padding: 42px 0 72px; }
.welcome-row { display: flex; justify-content: space-between; align-items: end; margin-bottom: 28px; }
.eyebrow { color: #6e7f75; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; margin: 0 0 8px; }
h1, h2, p { margin-top: 0; }
.welcome-row h1 { font-family: var(--display); font-size: 39px; line-height: 1.05; font-weight: 600; letter-spacing: 0; margin: 0; }
.welcome-row h1 em { color: var(--forest); font-style: italic; }
.date-stamp { margin: 0 0 5px; color: var(--muted); font-size: 12px; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--white); margin-bottom: 25px; }
.summary-item { min-height: 105px; display: flex; flex-direction: column; justify-content: center; padding: 15px 21px; border-right: 1px solid var(--line); }
.summary-item:last-child { border-right: 0; }
.summary-item > span { color: var(--muted); font-size: 11px; }
.summary-item strong { font-family: var(--display); font-size: 25px; line-height: 1.2; margin: 6px 0 2px; }
.summary-item small { color: #859087; font-size: 10px; }
.leader-summary strong { font-family: var(--body); font-size: 17px; font-weight: 700; }
.toolbar { display: flex; align-items: end; gap: 12px; margin-bottom: 24px; }
.class-control { display: grid; gap: 6px; }
.class-control label, .field-label { color: var(--muted); font-size: 11px; font-weight: 700; }
.class-control select { min-width: 130px; height: 42px; padding: 0 32px 0 12px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: white; }
.search-box { height: 42px; width: min(300px, 30vw); display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 4px; background: white; padding: 0 12px; color: var(--muted); }
.search-box > span { font-size: 24px; line-height: 1; transform: rotate(-15deg); }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.pair-button { height: 42px; display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 4px; padding: 0 16px; margin-left: auto; color: white; background: var(--forest); font-size: 12px; font-weight: 700; }
.pair-button span { color: var(--gold); font-size: 18px; }
.pair-button:hover { background: var(--forest-dark); }
.pair-button:disabled, button:disabled { opacity: .55; cursor: wait; }
.add-student-button { height: 42px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 4px; padding: 0 13px; color: var(--forest); background: white; font-size: 12px; font-weight: 700; }
.add-student-button:hover { border-color: var(--forest); background: #f0f7f2; }
.add-student-button span { font-size: 17px; }
.attendance-section { margin-bottom: 24px; border: 1px solid var(--line); background: var(--white); }
.attendance-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 17px 20px; }
.attendance-heading .eyebrow { margin-bottom: 4px; }
.attendance-heading h2 { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 600; }
.attendance-summary { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.attendance-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mark-all-button { min-height: 38px; border: 1px solid var(--line); border-radius: 3px; padding: 0 12px; color: var(--forest); background: white; font-size: 11px; font-weight: 700; }
.mark-all-button:hover { border-color: var(--forest); }
.attendance-section .save-button { min-height: 38px; }
.attendance-roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); padding: 0 18px 16px; border-top: 1px solid #edf0ec; }
.attendance-student { min-width: 0; min-height: 48px; display: grid; grid-template-columns: 17px 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid #edf0ec; cursor: pointer; }
.attendance-student input { width: 15px; height: 15px; margin: 0; accent-color: var(--forest); }
.attendance-student img { width: 26px; height: 34px; object-fit: cover; border-radius: 2px; background: #e9eee8; }
.attendance-name { min-width: 0; color: var(--ink); font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
.attendance-status { color: #9a7460; font-size: 9px; white-space: nowrap; }
.attendance-student.is-present .attendance-status { color: #377452; }
.attendance-student.is-present .attendance-name { font-weight: 600; }
.attendance-student.is-absent .attendance-status { color: var(--coral); }
.quiz-section { margin-bottom: 24px; border: 1px solid var(--line); border-left: 4px solid var(--gold); background: var(--white); padding: 17px 20px; }
.quiz-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.quiz-heading .eyebrow { margin-bottom: 4px; }
.quiz-heading h2 { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 600; }
.quiz-round-status { color: var(--muted); font-size: 10px; }
.quiz-intro { margin: 9px 0 15px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.quiz-intro strong { color: var(--forest); }
.quiz-message { margin: 0; color: var(--muted); font-size: 11px; }
.quiz-next { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #edf0ec; padding-top: 13px; }
.quiz-draw-button { min-height: 38px; flex: none; border: 0; border-radius: 3px; padding: 0 15px; color: white; background: var(--forest); font-size: 11px; font-weight: 700; }
.quiz-draw-button:hover { background: var(--forest-dark); }
.quiz-current { display: grid; grid-template-columns: 58px minmax(130px, 1fr) auto; align-items: center; gap: 12px; border-top: 1px solid #edf0ec; padding-top: 13px; }
.quiz-current > img { width: 54px; height: 64px; border-radius: 3px; object-fit: cover; background: #e9eee8; }
.quiz-student { min-width: 0; display: grid; gap: 3px; }
.quiz-student > span { color: #7a6a3b; font-size: 9px; font-weight: 700; letter-spacing: .8px; }
.quiz-student > strong { font-size: 14px; overflow-wrap: anywhere; }
.quiz-student > .quiz-name { color: var(--forest); font-size: 12px; }
.quiz-student > small { color: var(--muted); font-size: 10px; }
.quiz-outcomes { display: flex; gap: 6px; }
.quiz-outcomes button { min-height: 36px; border: 1px solid var(--line); border-radius: 3px; padding: 0 10px; color: var(--ink); background: white; font-size: 10px; font-weight: 700; }
.quiz-outcomes button:hover { border-color: var(--forest); background: #f0f7f2; }
.quiz-outcomes button:last-child { color: var(--coral); }
.quiz-outcomes b { margin-left: 3px; color: var(--forest); }
.quiz-outcomes button:last-child b { color: var(--coral); }
.quiz-dialog { width: min(820px, calc(100vw - 32px)); max-height: min(90vh, 760px); overflow: auto; border: 1px solid #e3e7dc; border-radius: 8px; padding: 0; color: var(--ink); background: var(--paper); box-shadow: 0 25px 90px #10271f55; }
.quiz-dialog::backdrop { background: #12251fbd; backdrop-filter: blur(4px); }
.quiz-dialog .quiz-section { margin: 0; border: 0; border-left: 5px solid var(--gold); padding: 26px; }
.configuration-dialog { width: min(760px, calc(100vw - 28px)); }
.configuration-section { padding: clamp(17px, 3vw, 27px); }
.settings-home { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 23px; }
.settings-menu-button { min-height: 100px; display: grid; align-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 4px; padding: 15px; color: var(--ink); background: white; text-align: left; }
.settings-menu-button:hover { border-color: var(--forest); background: #f0f7f2; }
.settings-menu-button[hidden] { display: none; }
.settings-menu-link { text-decoration: none; }
.settings-menu-button strong { color: var(--forest); font-size: 14px; }
.settings-menu-button span, .settings-description { color: var(--muted); font-size: 11px; line-height: 1.5; }
.settings-page[hidden], .settings-home[hidden] { display: none; }
.settings-back-button { margin: 18px 0 12px; border: 0; padding: 0; color: var(--forest); background: transparent; font-size: 11px; font-weight: 700; }
.settings-description { margin: 0 0 14px; }
.settings-weekday { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.settings-weekday .text-input { max-width: 300px; margin-top: 0; color: var(--ink); background: white; }
.settings-start-time { display: grid; gap: 5px; margin-top: 12px; color: var(--muted); font-size: 11px; font-weight: 700; }
.settings-start-time .text-input { max-width: 180px; margin-top: 0; color: var(--ink); background: white; }
.weekly-schedule-list { display: grid; gap: 8px; margin-top: 14px; }
.weekly-schedule-row { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(95px, 125px) 15px minmax(95px, 125px); align-items: center; gap: 8px; border: 1px solid #e8ece7; border-radius: 3px; padding: 8px 10px; background: white; }
.weekly-schedule-row > strong { color: var(--forest); font-size: 11px; }
.weekly-schedule-row > span { color: var(--ink); font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; }
.weekly-schedule-row > span:nth-child(3) { color: var(--muted); }
.weekly-schedule-save { min-height: 38px; margin-top: 12px; }
.settings-attendance-section { margin-top: 12px; }
.settings-attendance-section.attendance-section { margin-bottom: 0; }
.settings-attendance-section .attendance-heading { align-items: start; flex-direction: column; gap: 12px; }
.settings-attendance-section .attendance-actions { width: 100%; }
.settings-attendance-section .attendance-actions button { flex: 1; }
.settings-attendance-section .attendance-roster { max-height: 42vh; overflow: auto; }
.current-round-dialog { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; overflow: auto; border: 0; padding: 0; color: var(--ink); background: var(--paper); }
.current-round-dialog::backdrop { background: #14241f; }
.current-round-page { min-height: 100%; padding: clamp(18px, 4vw, 48px); }
.current-round-heading { width: min(1100px, 100%); display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 auto 24px; border-bottom: 1px solid var(--line); padding-bottom: 17px; }
.current-round-heading .eyebrow { margin-bottom: 5px; }
.current-round-heading h2 { margin: 0; font-family: var(--display); font-size: clamp(25px, 3.5vw, 38px); font-weight: 600; }
.current-round-class { display: inline-block; margin-top: 5px; color: var(--forest); font-size: 13px; font-weight: 700; }
.current-round-content { width: min(1100px, 100%); margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--white); }
.current-round-content .compact-heading { padding: 20px 22px 15px; }
.current-round-content .match-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; padding: 0 20px 16px; }
.current-round-content .match-card { padding: 16px; }
.current-round-content .match-player img { width: 48px; height: 56px; }
.current-round-content .match-player strong { font-size: 13px; }
.current-round-content .versus { font-size: 18px; }
.current-round-content .result-button { min-height: 38px; font-size: 11px; }
.current-round-actions { display: flex; justify-content: center; border-top: 1px solid #edf0ec; padding: 16px 20px; }
.current-round-actions .pair-button { min-height: 42px; margin: 0; }
.mural-dialog { width: min(880px, calc(100vw - 28px)); }
.mural-section { padding: clamp(13px, 3vw, 25px); }
.mural-board-frame { width: min(100%, 68vh); margin: 22px auto 15px; border: 8px solid #684526; border-radius: 4px; padding: 7px; background: #b8834d; box-shadow: 0 8px 24px #31231635, inset 0 0 0 1px #e3bb80; }
.mural-board-frame > div { width: 100%; }
.mural-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.mural-controls .quiz-close-button { color: var(--forest); }
.mural-controls .quiz-close-button:disabled { opacity: .5; cursor: default; }
.quiz-heading-actions { display: flex; align-items: center; gap: 12px; }
.quiz-close-button { min-height: 34px; border: 1px solid var(--line); border-radius: 3px; padding: 0 10px; color: var(--muted); background: white; font-size: 10px; font-weight: 700; }
.quiz-close-button:hover { border-color: var(--coral); color: var(--coral); }
.quiz-current-animating { grid-template-columns: 70px minmax(0, 1fr); min-height: 112px; }
.quiz-animation-orbit { width: 64px; height: 64px; display: grid; place-items: center; border: 2px solid #dfc55c; border-radius: 50%; color: #b38d0d; font-size: 30px; animation: quiz-spin 1.4s linear infinite; }
.quiz-current-animating .quiz-student > strong { min-height: 20px; color: var(--forest); font-size: 12px; animation: quiz-name-flash .35s ease-in-out infinite alternate; }
.quiz-current-animating .quiz-student > small b { color: var(--forest); font-variant-numeric: tabular-nums; }
.quiz-student > .quiz-question { color: var(--ink); font-size: 16px; line-height: 1.4; }
.quiz-question-error { color: var(--coral); }
.quiz-answer { margin-top: 4px; color: var(--muted); font-size: 10px; }
.quiz-answer summary { width: fit-content; cursor: pointer; color: var(--forest); font-weight: 700; }
.quiz-answer p { margin: 5px 0 0; color: var(--ink); font-size: 11px; line-height: 1.45; }
@keyframes quiz-spin { to { transform: rotate(360deg); } }
@keyframes quiz-name-flash { from { opacity: .48; filter: blur(.7px); } to { opacity: 1; filter: blur(0); } }
.quiz-history { max-width: 620px; margin-top: 12px; }
.quiz-history h3 { margin: 0; border-top: 1px solid #edf0ec; padding: 10px 0 3px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.quiz-history-row { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #edf0ec; padding: 7px 0; font-size: 10px; }
.quiz-history-row strong { color: var(--forest); font-size: 9px; }
.roster-section, .side-section { background: var(--white); border: 1px solid var(--line); }
.page-footer-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; margin-top: 18px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; padding: 19px 20px 15px; }
.section-heading .eyebrow { margin-bottom: 4px; }
.section-heading h2 { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.1; margin: 0; letter-spacing: 0; }
.count-label { color: var(--muted); font-size: 11px; padding-bottom: 2px; }
.score-legend { display: flex; gap: 18px; border-top: 1px solid #edf0ec; border-bottom: 1px solid #edf0ec; padding: 9px 20px; color: #7b877f; font-size: 10px; }
.score-legend b { color: var(--forest); margin-right: 3px; }
.student-list { padding: 0 18px; }
.student-row { min-height: 88px; display: grid; grid-template-columns: minmax(120px, 1fr) auto auto; gap: 12px; align-items: center; border-bottom: 1px solid #edf0ec; }
.student-row:last-child { border-bottom: 0; }
.student-profile-button { min-width: 0; min-height: 78px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 3px; padding: 5px; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.student-profile-button:hover, .student-profile-button:focus-visible { outline: 2px solid #b9cec0; background: #f7faf7; }
.student-profile-button > img { pointer-events: none; }
.student-profile-details { min-width: 0; display: grid; gap: 4px; }
.student-profile-details > small { color: var(--forest); font-size: 9px; font-weight: 700; }
.student-photo { width: 54px; height: 66px; flex: none; border-radius: 3px; object-fit: cover; background: #e9eee8; }
.student-name { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.student-name strong { max-width: 100%; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.rank-mark { display: inline-flex; align-items: center; gap: 3px; color: #7c6015; background: #fbf2cc; border-radius: 2px; padding: 3px 5px; font-size: 9px; font-weight: 700; }
.rank-mark.queen { color: #8a5145; background: #f8e9e3; }
.student-points { display: grid; justify-items: end; gap: 2px; margin-right: 8px; }
.student-points strong { font-family: var(--display); font-size: 18px; line-height: 1; }
.student-points small { color: var(--muted); font-size: 9px; }
.student-actions { display: flex; align-items: center; gap: 5px; }
.mini-action { min-width: 34px; height: 32px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 3px; color: var(--forest); background: white; font-size: 11px; font-weight: 700; }
.mini-action:hover { border-color: var(--forest); background: #f0f7f2; }
.mini-action.negative { color: var(--coral); }
.mini-action.edit { font-size: 15px; color: #748078; }
.empty-state { color: var(--muted); padding: 28px 12px; text-align: center; font-size: 12px; }
.compact-heading { padding: 17px 17px 13px; }
.compact-heading h2 { font-size: 20px; }
.live-tag { display: inline-flex; align-items: center; gap: 6px; color: #63746b; font-size: 10px; }
.live-tag i { width: 6px; height: 6px; background: #d65043; box-shadow: none; }
.match-list { padding: 0 15px 14px; display: grid; gap: 8px; }
.match-card { border: 1px solid #e5eae4; border-radius: 3px; padding: 10px; }
.match-pair { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: center; gap: 6px; }
.match-player { min-width: 0; display: flex; align-items: center; gap: 7px; }
.match-player:last-child { flex-direction: row-reverse; text-align: right; }
.match-player img { width: 34px; height: 39px; flex: none; object-fit: cover; border-radius: 2px; background: #eef0eb; }
.match-player strong { font-size: 10px; line-height: 1.25; overflow-wrap: anywhere; }
.versus { color: #9a8d6b; font-family: var(--display); font-size: 12px; text-align: center; }
.bye-label { padding: 8px 0; text-align: center; color: var(--muted); font-size: 11px; }
.match-controls { display: flex; gap: 5px; margin-top: 9px; }
.result-button { flex: 1; min-height: 28px; border: 1px solid var(--line); border-radius: 2px; padding: 4px; color: #5e6b64; background: white; font-size: 9px; }
.result-button:hover { color: var(--forest); border-color: #8aa797; }
.activity-section { padding-bottom: 7px; }
.event-list { padding: 0 16px 8px; }
.match-history { padding: 0 16px 9px; }
.history-item { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid #edf0ec; font-size: 10px; }
.history-item strong { min-width: 0; line-height: 1.35; }
.history-item span { flex: none; color: var(--muted); text-align: right; font-size: 9px; }
.activity-item { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid #edf0ec; }
.activity-item img { width: 32px; height: 38px; object-fit: cover; border-radius: 2px; background: #edf0ec; }
.activity-item div { min-width: 0; display: grid; gap: 3px; }
.activity-item strong { font-size: 10px; }
.activity-item span { color: var(--muted); font-size: 9px; line-height: 1.35; }
.student-dialog { width: min(520px, calc(100vw - 28px)); max-height: 90vh; overflow-y: auto; border: 0; padding: 0; border-radius: 5px; box-shadow: 0 22px 70px #12251f38; }
.student-dialog::backdrop { background: #14241f99; }
.student-dialog form { padding: 24px; }
.student-profile-history { margin-top: 18px; border-top: 1px solid #edf0ec; padding-top: 13px; }
.student-profile-history[hidden] { display: none; }
.student-profile-history h3 { margin: 0 0 9px; color: var(--forest); font-size: 12px; }
.student-profile-history h3:not(:first-child) { margin-top: 16px; }
.student-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.student-stat-grid > div { min-width: 0; display: grid; gap: 4px; border: 1px solid #e8ece7; border-radius: 3px; padding: 9px 7px; background: #fff; text-align: center; }
.student-stat-grid strong { color: var(--forest); font-family: var(--display); font-size: 18px; }
.student-stat-grid span { color: var(--muted); font-size: 9px; line-height: 1.25; }
.student-point-history { max-height: 200px; overflow: auto; border-top: 1px solid #edf0ec; }
.student-point-history-item { display: grid; gap: 4px; border-bottom: 1px solid #edf0ec; padding: 9px 3px; }
.student-point-history-item strong { color: var(--coral); font-size: 10px; }
.student-point-history-item span { color: var(--ink); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.point-reason-dialog { width: min(430px, calc(100vw - 28px)); }
.point-reason-input { min-height: 96px; height: auto; padding: 9px 10px; resize: vertical; }
.login-dialog { width: min(390px, calc(100vw - 28px)); }
.install-dialog { width: min(460px, calc(100vw - 28px)); }
.install-instructions { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.login-error { min-height: 16px; margin: 8px 0 0; color: var(--coral); font-size: 11px; }
.dialog-heading { display: flex; align-items: start; justify-content: space-between; margin-bottom: 20px; }
.dialog-heading h2 { font-family: var(--display); font-size: 25px; font-weight: 600; margin: 0; }
.close-button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 3px; background: white; color: var(--muted); font-size: 21px; line-height: 1; }
.text-input { width: 100%; height: 42px; margin-top: 7px; border: 1px solid var(--line); border-radius: 3px; padding: 0 10px; }
.dialog-field { display: block; margin-top: 14px; }
.dialog-field span { color: var(--muted); font-weight: 400; }
.file-input { height: auto; min-height: 42px; padding: 8px; font-size: 11px; }
.student-dialog-actions { align-items: center; }
.archive-button { min-height: 38px; margin-right: auto; border: 1px solid #e7c5bd; border-radius: 3px; padding: 0 11px; color: #a33f34; background: white; font-size: 10px; font-weight: 700; }
.archive-button:hover { background: #fcf0ed; }
.skill-fieldset { margin: 19px 0 0; border: 0; padding: 0; }
.skill-fieldset legend { margin-bottom: 10px; color: var(--muted); font-size: 11px; font-weight: 700; }
.skill-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.skill-option { display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 3px; font-size: 11px; }
.skill-option input { accent-color: var(--forest); }
.dialog-actions { display: flex; justify-content: end; gap: 8px; margin-top: 22px; }
.cancel-button, .save-button { height: 38px; padding: 0 14px; border-radius: 3px; font-size: 11px; font-weight: 700; }
.cancel-button { border: 1px solid var(--line); color: var(--ink); background: white; }
.save-button { border: 0; color: white; background: var(--forest); }
.toast { position: fixed; z-index: 10; left: 50%; bottom: 24px; max-width: calc(100vw - 30px); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 12px 16px; border-radius: 4px; color: white; background: var(--forest-dark); box-shadow: 0 8px 25px #14241f38; font-size: 12px; transition: opacity .2s ease, transform .2s ease; }
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.toast.is-error { background: #a63d31; }

@media (max-width: 1050px) {
    .student-list { padding: 0 12px; }
    .student-row { grid-template-columns: minmax(100px, 1fr) auto auto; gap: 8px; }
    .student-photo { width: 48px; height: 59px; }
    .mini-action { min-width: 30px; height: 30px; }
}
@media (max-width: 760px) {
    .topbar { min-height: 65px; padding: 0 5vw; }
    .brand img { width: 40px; height: 40px; }
    .brand small { display: none; }
    .top-actions { gap: 12px; }
    .connection { max-width: 94px; font-size: 10px; }
    .install-link { padding: 0 8px; }
    .settings-launch-button { min-height: 32px; padding: 0 7px; font-size: 10px; }
    .mural-launch-button { min-height: 32px; padding: 0 7px; font-size: 10px; }
    .quiz-launch-button { min-height: 32px; padding: 0 7px; font-size: 10px; }
    .tv-link { padding: 8px 9px; }
    .tv-link span { display: none; }
    .page-shell { width: 90vw; padding: 29px 0 52px; }
    .welcome-row { align-items: start; }
    .welcome-row h1 { font-size: 33px; }
    .date-stamp { max-width: 120px; text-align: right; font-size: 10px; }
    .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .summary-item { min-height: 91px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
    .summary-item:nth-child(2) { border-right: 0; }
    .summary-item:nth-child(3), .summary-item:nth-child(4) { border-bottom: 0; }
    .summary-item strong { font-size: 22px; }
    .leader-summary strong { font-size: 14px; }
    .toolbar { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
    .class-control select { width: 100%; }
    .search-box { grid-column: 2; grid-row: 1; width: 100%; }
    .add-student-button { grid-column: 1; grid-row: 2; justify-content: center; padding: 0 7px; }
    .pair-button { grid-column: 2; grid-row: 2; margin: 0; justify-content: center; padding: 0 7px; }
    .attendance-heading { align-items: start; flex-direction: column; gap: 12px; padding: 15px; }
    .attendance-actions { width: 100%; }
    .attendance-actions button { flex: 1; }
    .attendance-roster { grid-template-columns: 1fr; padding: 0 11px 12px; }
    .quiz-section { padding: 15px; }
    .quiz-dialog { width: calc(100vw - 18px); max-height: 94vh; }
    .quiz-dialog .quiz-section { padding: 16px 13px; }
    .mural-section { padding: 13px 10px; }
    .mural-board-frame { width: min(100%, 58vh); margin: 15px auto 12px; border-width: 5px; padding: 4px; }
    .mural-controls { display: grid; grid-template-columns: 1fr 1fr; }
    .mural-controls button:last-child { grid-column: 1 / -1; }
    .quiz-heading-actions { align-items: end; flex-direction: column-reverse; gap: 7px; }
    .quiz-close-button { min-height: 30px; }
    .quiz-current { grid-template-columns: 48px minmax(0, 1fr); gap: 9px; }
    .quiz-current-animating { grid-template-columns: 48px minmax(0, 1fr); }
    .quiz-animation-orbit { width: 44px; height: 44px; font-size: 22px; }
    .quiz-student > .quiz-question { font-size: 14px; }
    .quiz-current > img { width: 46px; height: 56px; }
    .quiz-outcomes { grid-column: 1 / -1; }
    .quiz-outcomes button { flex: 1; padding: 0 5px; }
    .quiz-next { align-items: stretch; flex-direction: column; }
    .quiz-draw-button { width: 100%; }
    .page-footer-panels { grid-template-columns: 1fr; }
    .student-row { min-height: 75px; grid-template-columns: minmax(95px, 1fr) auto auto; gap: 8px; }
    .student-profile-button { min-height: 72px; gap: 9px; padding: 3px; }
    .student-photo { width: 48px; height: 59px; }
    .student-points { margin-right: 2px; }
    .student-actions { gap: 4px; }
    .mini-action { min-width: 31px; }
    .score-legend { gap: 11px; padding-left: 13px; font-size: 9px; }
}
@media (max-width: 600px) {
    .connection { display: none; }
    .top-actions { gap: 8px; }
    .settings-launch-button span:last-child { display: none; }
    .settings-launch-button { width: 34px; justify-content: center; padding: 0; }
    .settings-home { grid-template-columns: 1fr; }
    .current-round-page { padding: 16px 10px; }
    .current-round-heading { margin-bottom: 15px; }
    .current-round-content .compact-heading { padding: 15px 13px 12px; }
    .current-round-content .match-list { grid-template-columns: 1fr; padding: 0 11px 12px; }
    .current-round-content .match-card { padding: 11px; }
    .current-round-content .match-player img { width: 38px; height: 45px; }
    .current-round-content .match-player strong { font-size: 11px; }
    .weekly-schedule-row { grid-template-columns: minmax(70px, 1fr) minmax(48px, .7fr) 10px minmax(48px, .7fr); gap: 5px; padding: 7px 6px; }
    .weekly-schedule-row > span { font-size: 10px; }
    .settings-attendance-section .attendance-heading { padding: 13px 10px; }
    .settings-attendance-section .attendance-roster { grid-template-columns: 1fr; padding: 0 7px 10px; }
}
@media (max-width: 390px) {
    .student-row { min-height: 76px; grid-template-columns: minmax(90px, 1fr) auto auto; gap: 5px; }
    .student-profile-button { min-height: 68px; gap: 7px; }
    .student-photo { width: 44px; height: 54px; }
    .student-name strong { font-size: 11px; }
    .student-points strong { font-size: 15px; }
    .student-actions { gap: 2px; }
    .mini-action { min-width: 28px; height: 29px; font-size: 10px; }
    .score-legend { justify-content: space-between; gap: 3px; font-size: 8px; }
}