@charset "UTF-8";
/* Shared status cards keep the same meaning in both workspaces and every summary. */
@media screen {
  body :is(#app,#modal) .attendance-stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
  body #app .attendance-stats.dashboard-attendance-stats { grid-template-columns:repeat(7,minmax(0,1fr)); }
  body :is(#app,#modal) .attendance-stats.five-category-summary { grid-template-columns:repeat(5,minmax(0,1fr)); }
  body :is(#app,#modal) .attendance-stat {
    --stat-bg:#fff; --stat-ink:#263c53; --stat-edge:#8094ab;
    display:flex; flex-direction:column; justify-content:space-between; min-width:0;
    padding:12px; gap:8px; border:2px solid var(--stat-edge); border-radius:13px;
    background:var(--stat-bg); color:var(--stat-ink); box-shadow:0 4px 10px #1b355514;
  }
  body :is(#app,#modal) .attendance-stat[data-state=total] { --stat-bg:#304875; --stat-ink:#fff; --stat-edge:#304875; }
  body :is(#app,#modal) .attendance-stat[data-state=face_only] { --stat-bg:#0865ce; --stat-ink:#fff; --stat-edge:#0865ce; }
  body :is(#app,#modal) .attendance-stat[data-state=present] { --stat-bg:#08734c; --stat-ink:#fff; --stat-edge:#08734c; }
  body :is(#app,#modal) .attendance-stat[data-state=manual_not_entered] { --stat-bg:#b32644; --stat-ink:#fff; --stat-edge:#b32644; }
  body :is(#app,#modal) .attendance-stat[data-state=leave] { --stat-bg:#d3dae3; --stat-ink:#263547; --stat-edge:#9baabc; }
  body :is(#app,#modal) .attendance-stat[data-state=grade_off] { --stat-bg:#202630; --stat-ink:#fff; --stat-edge:#202630; }
  body :is(#app,#modal) .attendance-stat-label { min-height:50px; color:inherit; font-size:21px; font-weight:800; line-height:1.25; letter-spacing:0; }
  body :is(#app,#modal) .attendance-stat-label small { display:block; font-size:16px; line-height:1.5; color:inherit; }
  body :is(#app,#modal) .attendance-stat-reading { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; color:inherit; }
  body :is(#app,#modal) .attendance-stat:not(.has-unit) .attendance-stat-reading { display:grid; grid-template-columns:minmax(0,1fr) 22px; grid-template-rows:38px; align-items:center; gap:4px; }
  body :is(#app,#modal) .attendance-stat:not(.has-unit) .attendance-stat-reading > strong { grid-column:1; }
  body :is(#app,#modal) .attendance-stat:not(.has-unit) .attendance-stat-symbol { grid-column:2; }
  body :is(#app,#modal) .attendance-stat-reading > strong { font-size:38px; line-height:1; font-weight:800; font-variant-numeric:tabular-nums; color:inherit; letter-spacing:-.02em; }
  body :is(#app,#modal) .attendance-stat-unit { color:inherit; font-size:14px; font-weight:650; }
  body :is(#app,#modal) .attendance-stat-symbol { display:grid; place-items:center; align-self:center; flex:0 0 22px; width:22px; height:22px; margin-left:auto; border:2px solid currentColor; border-radius:50%; color:inherit; font-size:16px; line-height:1; font-weight:800; }
  body :is(#app,#modal) .attendance-stat-footer { font-size:14px; font-weight:600; line-height:1.4; color:inherit; }
  body :is(#app,#modal) .attendance-stat.has-unit { justify-content:flex-start; }
  body :is(#app,#modal) .attendance-stat.has-unit .attendance-stat-reading { display:grid; grid-template-columns:1fr 22px; grid-template-rows:38px 20px; align-items:center; gap:3px; }
  body :is(#app,#modal) .attendance-stat.has-unit .attendance-stat-reading > strong { grid-column:1/-1; }
  body :is(#app,#modal) .attendance-stat.has-unit .attendance-stat-footer { font-size:13px; }
  body :is(#app,#modal) .attendance-stat.is-compact { padding:12px; gap:9px; }
  body :is(#app,#modal) .attendance-stat.is-compact .attendance-stat-label { min-height:44px; font-size:18px; }
  body :is(#app,#modal) .attendance-stat.is-compact .attendance-stat-reading > strong { font-size:32px; }
  body :is(#app,#modal) .attendance-stat.is-compact:not(.has-unit) .attendance-stat-reading { grid-template-columns:minmax(0,1fr) 22px; grid-template-rows:32px; }
  body :is(#app,#modal) .attendance-stat.is-compact .attendance-stat-symbol { width:25px; height:25px; flex-basis:25px; font-size:17px; }
  body #app .live-command-board .live-attendance-stats { padding:14px 18px 8px; }
  body #app .statistics-help { padding:0 18px 12px; font-size:13px; color:#526982; }
  body #app .statistics-help summary { cursor:pointer; width:fit-content; }
  body #app .statistics-help p { margin:8px 0 0; line-height:1.6; }
  body #app .roll-stat-note { font-size:15px; }
  body #modal .live-stat-panel { background:#fff; }

  body #app .roll-entry-reminder { display:flex; position:static; align-items:center; justify-content:center; gap:11px; margin:0 0 16px; padding:10px 18px; width:100%; border:1px solid #dfa812; border-radius:8px; background:#ffda62; color:#3a2c12; box-shadow:0 0 10px #f6b9003d; animation:roll-banner-glow 4.8s ease-in-out infinite; }
  body #app .roll-entry-reminder::before { content:"!"; display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px; border:2px solid currentColor; border-radius:50%; color:inherit; font-size:16px; line-height:1; font-weight:850; }
  body #app .roll-entry-reminder strong { font-size:18px; font-weight:750; line-height:1.45; white-space:nowrap; }
  @keyframes roll-banner-glow { 0%,100% { box-shadow:0 0 5px #f6b90033; border-color:#dca817; } 50% { box-shadow:0 0 15px #f6bc1588,0 0 0 3px #f6bc151a; border-color:#ffeb9f; } }

  /* Enlarged seats increase both the geometry and the complete identity text. */
  body :is(#app,#modal) .seat-viewport { container-type:inline-size; }
  body :is(#app,#modal) :is(.roll-seat-viewport[data-roll-zoom=large],.seat-viewport[data-seat-zoom=detail]) .seat-podium { position:sticky; left:max(14px,calc((100cqw - 440px)/2)); align-self:flex-start; justify-self:start; width:min(440px,calc(100cqw - 28px)); }
  body :is(#app,#modal) .roll-seat-status { display:none; }
  body :is(#app,#modal) .roll-seat-viewport[data-roll-zoom=large] .roll-seat-grid { gap:7px; }
  body :is(#app,#modal) .roll-seat-viewport[data-roll-zoom=large] .roll-seat { padding:8px; gap:4px; border-width:2px; border-radius:10px; }
  body :is(#app,#modal) .roll-seat-viewport[data-roll-zoom=large] .roll-seat-number { align-self:center; width:100%; text-align:center; font-size:18px; line-height:1.2; }
  body :is(#app,#modal) .roll-seat-viewport[data-roll-zoom=large] .roll-seat > strong { font-size:20px; line-height:1.25; }
  body :is(#app,#modal) .roll-seat-viewport[data-roll-zoom=large] .roll-seat-name { font-size:24px; font-weight:750; line-height:1.2; white-space:normal; overflow-wrap:anywhere; }
  body :is(#app,#modal) .roll-seat-viewport[data-roll-zoom=large] .roll-seat-symbol { font-size:20px; top:7px; right:9px; }
  body :is(#app,#modal) .roll-seat-viewport[data-roll-zoom=large] .roll-seat-status { display:block; font-size:15px; line-height:1.3; font-weight:750; }
  body :is(#app,#modal) .roll-seat-viewport[data-roll-zoom=large] .roll-seat-many { font-size:13px; }
  body :is(#app,#modal) .seat-viewport[data-seat-zoom=detail] { --seat-row-min:140px; }
  body :is(#app,#modal) .seat-viewport[data-seat-zoom=detail] .live-seat-grid.detail { grid-template-columns:repeat(var(--live-columns),140px); gap:7px; }
  body :is(#app,#modal) .seat-viewport[data-seat-zoom=detail] .seat-map { grid-template-columns:repeat(var(--seat-columns),140px); gap:7px; }
  body :is(#app,#modal) .seat-viewport[data-seat-zoom=detail] .hall-schematic-grid { grid-template-columns:repeat(var(--hall-columns),140px); gap:7px; }
  body :is(#app,#modal) .seat-viewport[data-seat-zoom=detail] :is(.detail-seat,.seat-map-cell,.hall-seat) { min-height:140px; padding:8px; gap:4px; align-items:center; justify-content:center; }
  body :is(#app,#modal) .seat-viewport[data-seat-zoom=detail] :is(.detail-seat,.seat-map-cell,.hall-seat) > strong { font-size:20px; line-height:1.25; }
  body :is(#app,#modal) .seat-viewport[data-seat-zoom=detail] :is(.live-student-name,.allocation-student,.hall-student-name) { font-size:24px; font-weight:750; line-height:1.2; white-space:normal; overflow-wrap:anywhere; }
  body :is(#app,#modal) .seat-viewport[data-seat-zoom=detail] :is(.live-cell-status,.live-alert-reason) { font-size:16px; line-height:1.4; }
  body :is(#app,#modal) .seat-viewport[data-seat-zoom=detail] :is(.seat-code,.seat-map-label,.hall-seat>span:first-child) { width:100%; align-self:center; text-align:center; font-size:18px; }
  body :is(#app,#modal) .seat-map-tools button { min-height:44px; padding:9px 18px; font-size:17px; font-weight:700; }
  body :is(#app,#modal) .record-stamp { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding-block:5px; line-height:1.45; color:var(--role-ink,#293e57); }
  body :is(#app,#modal) .record-stamp strong { font-size:17px; font-weight:750; overflow-wrap:anywhere; }
  body :is(#app,#modal) .record-stamp time { font-size:15px; color:#4d6179; font-variant-numeric:tabular-nums; }
  body :is(#app,#modal) .record-empty { display:block; padding-block:6px; color:#566b82; font-size:16px; }
  body #app #batch-content .group-meta { align-items:center; gap:12px 22px; margin-top:14px; font-size:17px; }
  body #app #batch-content .group-meta .record-stamp { border-left:2px solid #c8d3df; padding-left:20px; }
  body :is(#app,#modal) :is(.history-record-table,.saved-records-table) table { min-width:1220px; }
  body :is(#app,#modal) :is(.history-record-table,.saved-records-table) th { font-size:16px; white-space:nowrap; padding:17px 18px; }
  body :is(#app,#modal) :is(.history-record-table,.saved-records-table) td { font-size:18px; line-height:1.6; vertical-align:top; padding:22px 18px; }
  body #app .history-record-table td > strong { display:block; font-size:19px; color:var(--role-ink,#263f5f); }
  body #app .history-record-table td:nth-child(1) { min-width:170px; }
  body #app .history-record-table td:nth-child(2) { min-width:155px; }
  body #app .history-record-table td:nth-child(3) { min-width:260px; }
  body #app .history-record-table td:last-child { min-width:205px; }
  body #app .history-secondary { display:block; color:#4d6179; font-size:16px; font-weight:500; line-height:1.6; margin-top:8px; }
  body #app .history-location { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 14px; border-top:1px solid #d2dce7; margin-top:12px; padding-top:10px; font-size:16px; }
  body #app .history-location b { font-size:18px; color:var(--role-ink,#263f5f); }
  body #app .history-record-table .record-stamp { margin-top:8px; }
}
@media screen and (min-width:621px) and (max-width:1200px) {
  body :is(#app,#modal) .attendance-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body #app .attendance-stats.dashboard-attendance-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body #app .dashboard-attendance-stats > [data-state=total] { grid-column:1/-1; }
  body :is(#app,#modal) .attendance-stats.five-category-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media screen and (max-width:620px) {
  body #app .attendance-stats.dashboard-attendance-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body #app .dashboard-attendance-stats > [data-state=total] { grid-column:1/-1; }
  body :is(#app,#modal) .attendance-stats,
  body :is(#app,#modal) .attendance-stats.five-category-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  body :is(#app,#modal) .attendance-stats.five-category-summary > :last-child { grid-column:1/-1; }
  body :is(#app,#modal) .attendance-stat { padding:11px; gap:7px; }
  body :is(#app,#modal) .attendance-stat-label { font-size:19px; min-height:46px; }
  body :is(#app,#modal) .attendance-stat-label small { font-size:15px; }
  body :is(#app,#modal) .attendance-stat-reading > strong { font-size:36px; }
  body :is(#app,#modal) .attendance-stat-symbol { width:22px; height:22px; flex-basis:22px; font-size:16px; }
  body :is(#app,#modal) .attendance-stat-unit { font-size:12px; }
  body :is(#app,#modal) .attendance-stat.has-unit .attendance-stat-reading { grid-template-rows:36px 20px; }
  body :is(#app,#modal) .attendance-stat:not(.has-unit) .attendance-stat-reading { grid-template-rows:36px; }
  body #app .roll-entry-reminder { padding:8px 10px; margin-bottom:12px; gap:8px; }
  body #app .roll-entry-reminder strong { font-size:clamp(13px,3.85vw,16px); }
  body #app .live-command-board .live-attendance-stats { padding:14px; }
  body :is(#app,#modal) .attendance-stats.five-category-summary > :last-child { flex-direction:row; align-items:center; }
  body :is(#app,#modal) .attendance-stats.five-category-summary > :last-child .attendance-stat-label { min-height:0; }
  body :is(#app,#modal) .attendance-stats.five-category-summary > :last-child .attendance-stat-reading { gap:12px; }
  body #app .history-record-table { overflow:visible; padding:12px; }
  body #app .table-wrap.history-record-table > table { display:block; min-width:0; width:100%; }
  body #app .history-record-table thead { display:none; }
  body #app .history-record-table tbody { display:grid; gap:16px; }
  body #app .history-record-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid #bdccdb; border-radius:12px; background:white; overflow:hidden; }
  body #app .history-record-table td:nth-child(n) { display:block; min-width:0; padding:14px 12px; border-bottom:1px solid #dce4ed; overflow-wrap:anywhere; }
  body #app .history-record-table td::before { content:attr(data-label); display:block; font-size:14px; color:#587087; font-weight:750; margin-bottom:8px; }
  body #app .history-record-table td:nth-child(3),body #app .history-record-table td:last-child { grid-column:1/-1; }
  body #app .history-record-table td:last-child { border-bottom:0; }
  body #app .history-record-table .history-secondary { margin-top:5px; font-size:16px; }
  body #app #batch-content .group-meta .record-stamp { border-left:0; padding-left:0; flex-basis:100%; border-top:1px solid #c8d3df; padding-top:12px; }
}
@media (prefers-reduced-motion:reduce) { body #app .roll-entry-reminder { animation:none; } }
@media print {
  .attendance-stats { display:flex; flex-wrap:wrap; gap:10px; }
  .attendance-stat { border:1px solid #444; padding:6px; background:white; color:black; }
  .attendance-stat-label small { font-size:inherit; }
  .attendance-stat-symbol,.roll-seat-status,.roll-entry-reminder { display:none; }
}

/* Five attendance categories and a separate teacher-confirmed non-entry rail. */
@media screen {
  body :is(#app,#modal) .attendance-summary-layout { display:grid; grid-template-columns:minmax(0,1fr) 152px; gap:14px; align-items:stretch; }
  body #app .attendance-stats.dashboard-attendance-stats { grid-template-columns:repeat(6,minmax(0,1fr)); }
  body :is(#app,#modal) .live-primary-legend { display:flex; gap:22px; align-items:center; flex:none; }
  body :is(#app,#modal) .live-primary-legend .live-state-legend { display:inline-flex; align-items:center; gap:9px; white-space:nowrap; font-size:17px; font-weight:750; }
  body :is(#app,#modal) .live-legend .live-alert-legend { flex:none; margin-left:4px; padding:9px 12px; border:1px dashed #c97082; border-left:4px solid #b32644; border-radius:4px 9px 9px 4px; background:#fff6f7; }
  body :is(#app,#modal) .live-alert-copy { font-family:"PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif; color:#951d37; }
  body :is(#app,#modal) .live-alert-copy strong { font-family:inherit; font-size:20px; font-weight:900; color:inherit; letter-spacing:.035em; }
  body :is(#app,#modal) .live-alert-copy small { font-family:inherit; font-size:15px; font-weight:800; color:inherit; letter-spacing:.02em; }
  body :is(#app,#modal) .live-key-dots .alert-dot { margin-left:8px; outline:1px dashed #b32644; outline-offset:3px; }
}
@media screen and (max-width:1200px) {
  body :is(#app,#modal) .attendance-summary-layout { grid-template-columns:minmax(0,1fr); gap:10px; }
  body #app .attendance-stats.dashboard-attendance-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media screen and (max-width:620px) {
  body :is(#app,#modal) .attendance-summary-layout { gap:8px; }
  body :is(#app,#modal) .attendance-summary-layout > .attendance-stats { display:flex; flex-direction:column; gap:0; border:1px solid #b9c6d5; border-radius:10px; overflow:hidden; background:#fff; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; justify-content:initial; min-height:46px; padding:7px 12px 7px 38px; gap:5px 8px; border:0; border-bottom:1px solid #e0e6ed; border-radius:0; background:#fff; color:#263c53; box-shadow:none; position:relative; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat:last-child { border-bottom:0; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat::before { content:""; position:absolute; left:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; border-radius:4px; background:var(--stat-bg); border:1px solid var(--stat-edge); }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat .attendance-stat-label { min-height:0; font-size:17px; line-height:1.35; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat .attendance-stat-label small { display:inline; font-size:inherit; line-height:inherit; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat .attendance-stat-label small::before { content:"／"; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat .attendance-stat-reading { display:flex; flex-wrap:nowrap; align-items:baseline; gap:4px; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat .attendance-stat-reading>strong { font-size:27px; line-height:1.05; letter-spacing:-.025em; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat[data-state=face_only] .attendance-stat-reading>strong { color:#0865ce; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat .attendance-stat-symbol { display:none; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat .attendance-stat-unit { display:none; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat .attendance-stat-footer { grid-column:1/-1; font-size:12px; line-height:1.3; margin-top:-1px; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat[data-state=total] { background:var(--stat-bg); }
}

/* Direct teacher confirmation; reviewed leave changes. */
@media screen {
  body :is(#app,#modal) .attendance-stats.five-category-summary {grid-template-columns:repeat(4,minmax(0,1fr));}
  body #app .attendance-stats.dashboard-attendance-stats {grid-template-columns:repeat(5,minmax(0,1fr));}
  .summary-light.state-manual_not_entered {background:#b31e45;box-shadow:0 0 0 1px #b31e45;}
  .leave-review-list {display:grid;gap:14px;max-height:52vh;overflow:auto;}
  .leave-review-row {padding:16px;border:1px solid #cad4e2;border-radius:12px;background:#fff;}
  .leave-review-row header {display:flex;gap:12px;justify-content:space-between;}
  .leave-review-row p {margin:8px 0;}
  .leave-comparison {display:grid;grid-template-columns:1fr auto 1fr;gap:14px;background:#f1f5fa;border-radius:8px;padding:12px;align-items:center;}
  .leave-comparison small,.leave-review-row li small {display:block;line-height:1.5;}
  .leave-comparison strong {display:block;font-size:20px;}
  .leave-review-confirm {display:flex;align-items:center;gap:10px;padding:14px 0;font-weight:700;}
  .leave-review-confirm input {width:24px;height:24px;}
  .seat-choice-actions {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0;}
  .seat-choice-actions .btn {min-height:60px;font-size:22px;font-weight:800;}
  .seat-choice-actions .btn:last-child {grid-column:1/-1;}
  .roll-entry-reminder {display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;}
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] {--seat-row-min:110px;}
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] .detail-seat {height:auto;min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;padding:6px;}
  body #modal #live-room-detail .seat-viewport .detail-seat > * {position:static;align-self:center;text-align:center;margin:0;max-width:100%;}
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] .detail-seat .seat-code {font-size:17px;line-height:1.15;width:100%;font-weight:800;}
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] .detail-seat strong {font-size:17px;line-height:1.2;white-space:normal;}
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] .detail-seat .live-student-name {font-size:20px;line-height:1.2;font-weight:750;white-space:normal;}
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] .detail-seat :is(.live-cell-status,.live-alert-reason) {font-size:13px;line-height:1.25;justify-content:center;}
}
@media screen and (max-width:760px) {
  body :is(#app,#modal) .attendance-stats.five-category-summary,body #app .attendance-stats.dashboard-attendance-stats {display:flex;flex-direction:column;}
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] {--seat-row-min:92px;}
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] .detail-seat {min-height:92px;height:auto;padding:4px 1px;gap:3px;}
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] .detail-seat .seat-code {font-size:13px;}
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] .detail-seat strong {font-size:12px;white-space:normal;}
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] .detail-seat .live-student-name {font-size:13px;white-space:normal;}
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] .detail-seat :is(.live-cell-status,.live-alert-reason) {font-size:11px;white-space:normal;}
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] .hall-diagram .detail-seat {min-height:32px;padding:3px 1px;}
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] .hall-diagram .detail-seat :is(.live-student-name,strong,.live-cell-status,.live-alert-reason) {display:none;}
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] .hall-diagram .detail-seat .seat-code {font-size:12px;}
}
.batch-steps {display:flex;gap:18px;flex-wrap:wrap;margin:0 0 22px;color:#64758c;font-size:15px;}
.batch-steps span {display:flex;align-items:center;gap:8px;}
.batch-steps b {display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#e7edf5;}
.batch-steps .active {color:#254779;font-weight:800;}
.batch-steps .active b {background:#254779;color:white;}
.batch-creation-preview {margin-top:20px;padding:20px;border-left:4px solid #466db0;background:#f0f4fa;border-radius:10px;}
.batch-creation-preview h3 {font-size:24px;margin:6px 0 12px;}
.batch-creation-preview p {margin:8px 0;}

@media screen and (max-width:600px) {
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] .live-seat-grid {gap:3px;}
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] .detail-seat {padding:4px 0;border-width:1px;gap:3px;min-height:100px;}
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] .detail-seat .live-cell-status {font-size:0;line-height:1;}
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] .detail-seat .live-cell-status::after {content:attr(data-short-label);font-size:10px;line-height:1.3;}
  body #modal #live-room-detail .seat-viewport[data-seat-zoom=fit] .detail-seat .live-student-name {font-size:12.5px;word-break:normal;line-height:1.25;}
}

/* One shared scale for attendance, live rooms and the office dashboard. */
@media screen {
  body :is(#app,#modal) .attendance-summary-layout { grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:1fr; gap:12px; }
  body #app .attendance-summary-layout:has(>.dashboard-attendance-stats) { grid-template-columns:repeat(7,minmax(0,1fr)); }
  body :is(#app,#modal) .attendance-summary-layout > .attendance-stats { display:contents; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat { grid-column:auto; }
  body :is(#app,#modal) .attendance-stat[data-state=pending] { --stat-bg:#e0e5eb; --stat-ink:#273b50; --stat-edge:#96a5b5; }
  body :is(#app,#modal) .attendance-stat[data-state=leave] { --stat-bg:#1167c6; --stat-ink:#fff; --stat-edge:#1167c6; }
  body :is(#app,#modal) .attendance-stat[data-state=manual_not_entered] { --stat-bg:#b51f40; --stat-ink:#fff; --stat-edge:#9d1636; box-shadow:0 4px 10px #8e193124; background-clip:padding-box; }
  body :is(#app,#modal) .attendance-stat[data-state=manual_not_entered] .attendance-stat-label { font-weight:900; }
  body :is(#app,#modal) .attendance-stat[data-state=manual_not_entered] .attendance-stat-symbol { border:0; border-radius:0; padding:0; box-sizing:border-box; line-height:0; }
  body :is(#app,#modal) .attendance-stat-symbol > svg { display:block; width:100%; height:100%; }
  body :is(#app,#modal) .attendance-stat[data-state=manual_not_entered].has-alert { animation:absent-stat-pulse 3.2s ease-in-out infinite; }
  @keyframes absent-stat-pulse { 50% { background-color:#9d1636; } }

  body :is(#app,#modal) .live-legend-panel { display:block; }
  body :is(#app,#modal) .live-legend-caption { display:block; margin-bottom:8px; }
  body :is(#app,#modal) .live-legend { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; width:100%; padding:2px; }
  body :is(#app,#modal) .live-primary-legend { display:contents; }
  body :is(#app,#modal) .live-primary-legend .live-state-legend,
  body :is(#app,#modal) .live-legend .live-alert-legend { display:flex; align-items:center; min-width:0; min-height:76px; margin:0; padding:10px; gap:10px; border:1px solid #cbd5e0; border-radius:10px; background:#f7f9fc; color:#263d57; white-space:normal; font-size:18px; font-weight:800; line-height:1.4; }
  body :is(#app,#modal) .live-legend .live-seat { flex:0 0 34px; width:34px; height:34px; min-width:34px; font-size:22px; }
  body :is(#app,#modal) .live-legend-label { min-width:0; }
  body :is(#app,#modal) .live-legend .live-alert-legend { border:2px solid #9d1636; background:#b51f40; color:#fff; box-shadow:inset 4px 0 #ff7995; }
  body :is(#app,#modal) .live-alert-copy { color:inherit; min-width:0; }
  body :is(#app,#modal) .live-alert-copy strong { font-family:inherit; font-size:21px; font-weight:900; line-height:1.25; }
  body :is(#app,#modal) .live-alert-copy small { font-size:13px; line-height:1.4; white-space:normal; }

  body #app .room-entry-number > strong { color:#08734c; }
  body #app .room-seat-context { grid-column:1/-1; display:block; margin:8px 0 10px; color:#4c6178; font-size:14px; line-height:1.5; text-align:left; }

  /* The same status colours apply to maps, lamps, detail panels and labels. */
  body :is(#app,#modal) :is(.live-seat.state-pending,.roll-seat-pending) { background:#d4dce5; color:#263b50; border-color:#899aac; box-shadow:none; }
  body :is(#app,#modal) :is(.live-seat.state-leave,.roll-seat-leave) { background:#1683f5; color:#fff; border-color:#0767c7; box-shadow:0 0 7px #1683f538; }
  body :is(#app,#modal) :is(.live-person-status.state-pending,.detail-seat.state-pending) { --seat-lamp:#9caabc; --seat-edge:#7a8ca2; }
  body :is(#app,#modal) :is(.live-person-status.state-leave,.detail-seat.state-leave) { --seat-lamp:#1683f5; --seat-edge:#0767c7; }
  body #modal #live-room-detail .detail-seat.state-pending { background:#e0e5eb!important; border-color:#96a5b5!important; }
  body #modal #live-room-detail .detail-seat.state-leave { background:#e4f0ff!important; border-color:#1683f5!important; }
  body :is(#app,#modal) .summary-light.state-pending { background:#a7b4c3; border-color:#8395aa; }
  body :is(#app,#modal) .summary-light.state-leave { background:#1683f5; border-color:#0767c7; }
  body :is(#app,#modal) :is(.live-seat.state-relocated,.roll-seat-relocated) { background:#eee5fb; color:#62339a; border:1px dashed #8753c3; box-shadow:none; --seat-lamp:#8753c3; --seat-edge:#62339a; }
  body #modal #live-room-detail .detail-seat.state-relocated { background:#f3edfc!important; border:1px dashed #8753c3!important; --seat-lamp:#8753c3; --seat-edge:#62339a; }
}

/* Room transfers are planning information, separate from attendance states. */
body :is(#app,#modal) .room-seat-context { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:10px 0; font-size:14px; }
body #app .room-seat-context { display:flex; }
body :is(#app,#modal) .room-transfer-count { display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid #d5c0ed; border-radius:10px; background:#f3edfc; color:#62339a; font-weight:750; }
body :is(#app,#modal) .room-transfer-count > span:first-child { font-size:23px; line-height:1; }
body :is(#app,#modal) .room-transfer-count > strong { margin-left:5px; font-size:22px; line-height:1; }
body :is(#app,#modal) .room-transfer-count small { margin-left:4px; font-size:12px; font-weight:600; }
body :is(#app,#modal) .room-empty-count { padding:6px 9px; color:#617185; font-size:13px; white-space:nowrap; }
body #modal .live-relocation-panel { background:#fff; border:1px solid #e0d9eb; border-radius:18px; overflow:hidden; }
body #modal .live-relocation-panel .live-student-toolbar { padding:16px 22px; background:#faf8fd; border-bottom:1px solid #e9e3f0; }
body #modal .relocation-card { max-width:880px; margin:0 auto; padding:28px; color:#26364a; }
body #modal .relocation-identity { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
body #modal .relocation-class { display:block; margin-bottom:5px; color:#66738a; font-size:16px; font-weight:700; }
body #modal .relocation-identity h3 { margin:0; font-size:30px; font-weight:850; line-height:1.35; }
body #modal .relocation-badge { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:100px; background:#eee5fb; color:#62339a; font-size:15px; font-weight:800; white-space:nowrap; }
body #modal .relocation-badge > span { font-size:22px; }
body #modal .relocation-routes { display:grid; gap:14px; }
body #modal .relocation-route { display:grid; grid-template-columns:minmax(0,1fr) 38px minmax(0,1.5fr); align-items:center; gap:14px; }
body #modal .relocation-origin { display:flex; flex-direction:column; gap:9px; padding:22px; border:1px solid #e1e6ed; border-radius:14px; background:#f6f8fb; }
body #modal .relocation-label { display:block; font-size:14px; font-weight:700; color:#69758a; }
body #modal .relocation-origin > strong { font-size:26px; line-height:1.2; }
body #modal .relocation-origin-seat { font-size:16px; color:#64738a; }
body #modal .relocation-arrow { text-align:center; color:#8753c3; font-size:32px; font-weight:800; }
body #modal .relocation-destination { padding:22px; border:1px solid #d1bae9; border-radius:14px; background:linear-gradient(120deg,#f3edfc,#faf8fe); }
body #modal .relocation-destination .relocation-label { color:#76519c; }
body #modal .relocation-destination > strong { display:block; margin:8px 0 16px; color:#62339a; font-size:32px; font-weight:850; line-height:1.25; overflow-wrap:anywhere; }
body #modal .relocation-seat { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; padding-top:14px; border-top:1px solid #dccced; }
body #modal .relocation-seat > span { color:#76519c; font-size:14px; font-weight:650; }
body #modal .relocation-seat b { color:#492473; font-size:26px; font-weight:850; line-height:1.2; letter-spacing:.025em; overflow-wrap:anywhere; }
body #modal .relocation-note { display:flex; align-items:flex-start; gap:12px; margin-top:22px; color:#56677d; }
body #modal .relocation-note > span { flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#eee5fb; color:#7645ae; font-size:20px; }
body #modal .relocation-note strong { font-size:15px; font-weight:750; }
body #modal .relocation-note p { margin:5px 0 0; font-size:13px; line-height:1.6; color:#758097; }
@media screen and (max-width:600px) {
  body #modal .live-relocation-panel .live-student-toolbar { padding:12px; gap:8px; }
  body #modal .relocation-card { padding:20px 16px; }
  body #modal .relocation-identity { align-items:flex-start; gap:10px; margin-bottom:18px; }
  body #modal .relocation-identity h3 { font-size:26px; }
  body #modal .relocation-class { font-size:14px; }
  body #modal .relocation-badge { padding:6px 9px; font-size:13px; }
  body #modal .relocation-route { grid-template-columns:minmax(0,1fr); gap:8px; }
  body #modal .relocation-origin { flex-direction:row; align-items:center; flex-wrap:wrap; padding:13px 16px; gap:6px 12px; }
  body #modal .relocation-origin .relocation-label { flex-basis:100%; font-size:12px; }
  body #modal .relocation-origin > strong { font-size:22px; }
  body #modal .relocation-origin-seat { font-size:14px; }
  body #modal .relocation-arrow { transform:rotate(90deg); font-size:24px; line-height:1; }
  body #modal .relocation-destination { padding:17px; }
  body #modal .relocation-destination > strong { font-size:30px; margin:6px 0 12px; }
  body #modal .relocation-note { margin-top:18px; gap:9px; }
}
@media screen and (min-width:761px) and (max-width:1100px) {
  body :is(#app,#modal) .attendance-summary-layout,
  body #app .attendance-summary-layout:has(>.dashboard-attendance-stats) { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media screen and (max-width:760px) {
  body :is(#app,#modal) .live-legend { grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; gap:6px; }
  body :is(#app,#modal) .live-primary-legend .live-state-legend,
  body :is(#app,#modal) .live-legend .live-alert-legend { min-height:58px; padding:7px; gap:7px; font-size:15px; }
  body :is(#app,#modal) .live-legend .live-seat { flex-basis:29px; min-width:29px; width:29px; height:29px; font-size:20px; }
  body :is(#app,#modal) .live-legend .live-alert-legend { grid-column:1/-1; }
  body :is(#app,#modal) .live-alert-copy { display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:5px 12px; }
  body :is(#app,#modal) .live-alert-copy strong { font-size:19px; }
  body :is(#app,#modal) .live-alert-copy small { font-size:13px; }
  body :is(#app,#modal) .attendance-summary-layout,
  body #app .attendance-summary-layout:has(>.dashboard-attendance-stats) { grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; gap:7px; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; min-height:54px; padding:8px 12px; gap:4px 10px; border:1px solid var(--stat-edge); border-radius:9px; background:var(--stat-bg); color:var(--stat-ink); box-shadow:none; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat::before { display:none; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat .attendance-stat-label { min-height:0; font-size:17px; line-height:1.35; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat .attendance-stat-label small { display:inline; font-size:13px; margin-left:4px; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat .attendance-stat-label small::before { content:""; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat .attendance-stat-reading { display:flex; align-items:center; gap:4px; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat .attendance-stat-reading > strong { font-size:28px; color:inherit; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat :is(.attendance-stat-symbol,.attendance-stat-unit) { display:none; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat .attendance-stat-footer { grid-column:1; font-size:12px; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat[data-state=manual_not_entered] { box-shadow:none; }
  body :is(#app,#modal) .attendance-summary-layout .attendance-stat[data-state=manual_not_entered] .attendance-stat-symbol { display:grid; order:-1; width:22px; height:22px; margin:0 4px 0 0; }
}

/* A small key beside the building filters, and one row of room readings. */
@media screen {
  body #app .live-campus-toolbar { justify-content:flex-start; gap:10px 18px; }
  body #app .live-toolbar-legend { display:flex; flex:1 1 420px; flex-wrap:wrap; align-items:center; gap:8px 12px; min-width:0; }
  body #app .live-toolbar-legend-title { color:var(--role-muted,#60728a); font-size:12px; font-weight:750; white-space:nowrap; }
  body #app :is(.live-toolbar-key,.room-reading) { --reading-ink:#526477; }
  body #app :is(.live-toolbar-key,.room-reading)[data-state=present] { --reading-ink:#08734c; }
  body #app :is(.live-toolbar-key,.room-reading)[data-state=leave] { --reading-ink:#1167c6; }
  body #app :is(.live-toolbar-key,.room-reading)[data-state=grade_off] { --reading-ink:#202630; }
  body #app :is(.live-toolbar-key,.room-reading)[data-state=manual_not_entered] { --reading-ink:#b51f40; }
  body #app .live-toolbar-key { display:inline-flex; align-items:center; gap:5px; color:var(--reading-ink); font-size:13px; font-weight:700; white-space:nowrap; }
  body #app .live-toolbar-lamp { display:grid; place-items:center; flex:none; width:19px; height:19px; border:1px solid #9aabba; border-radius:5px; background:#d4dce5; color:#33485d; font-size:13px; font-style:normal; line-height:1; }
  body #app .live-toolbar-key[data-state=present] .live-toolbar-lamp { background:#08734c; border-color:#08734c; color:#fff; }
  body #app .live-toolbar-key[data-state=leave] .live-toolbar-lamp { background:#1167c6; border-color:#1167c6; color:#fff; }
  body #app .live-toolbar-key[data-state=grade_off] .live-toolbar-lamp { background:#202630; border-color:#202630; color:#fff; }
  body #app .live-toolbar-key[data-state=manual_not_entered] .live-toolbar-lamp { background:#b51f40; border-color:#b51f40; color:#fff; font-weight:900; }
  body #app .live-campus-hint { flex-basis:100%; margin:0; color:var(--role-muted,#60728a); font-size:12px; line-height:1.4; }

  body #app .live-room-card { padding-bottom:12px; }
  body #app .live-room-readings { grid-column:1/-1; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; padding-top:11px; border-top:1px solid #e1e7ef; }
  body #app .room-reading { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; min-width:0; padding:0 2px; gap:9px; color:var(--reading-ink); text-align:center; }
  body #app .room-reading + .room-reading { border-left:1px solid #e1e7ef; }
  body #app .room-reading-label { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; min-height:2.5em; color:#33485d; font-size:14px; line-height:1.25; font-weight:800; white-space:nowrap; }
  body #app .room-reading[data-state=manual_not_entered] .room-reading-label { color:var(--reading-ink); }
  body #app .room-reading > strong { position:relative; display:block; font-size:23px; line-height:1.15; font-weight:850; font-variant-numeric:tabular-nums; }
  body #app .room-reading[data-state=manual_not_entered] > strong::after { content:""; position:absolute; height:3px; left:0; right:0; bottom:-5px; border-radius:2px; background:#b51f40; }
  body #app .room-reading.has-alert > strong { border-radius:6px; padding:0 2px; background:#b51f40; color:white; }
  body #app .room-reading.has-alert > strong::after { display:none; }
  body #app .live-room-card .room-seat-context { margin:3px 0 0; gap:6px 12px; padding-top:8px; border-top:1px solid #edf0f5; font-size:12px; line-height:1.4; }
  body #app .live-room-card .room-transfer-count { gap:4px; padding:0; border:0; border-radius:0; background:none; font-size:12px; }
  body #app .live-room-card .room-transfer-count > span:first-child { font-size:16px; }
  body #app .live-room-card .room-transfer-count > strong { margin-left:1px; font-size:15px; }
  body #app .live-room-card .room-transfer-count small { margin-left:3px; font-size:12px; }
  body #app .live-room-card .room-empty-count { margin-left:auto; padding:0; font-size:12px; }

  /* H8 enlargement keeps readable identity text and a pannable canvas. */
  body :is(#app,#modal) .seat-viewport.hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail]) {
    max-height:70dvh; overflow:auto; cursor:grab; touch-action:none;
    overscroll-behavior:contain; scrollbar-gutter:stable; --seat-row-min:112px; container-type:inline-size;
  }
  body :is(#app,#modal) .hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail]) .seat-canvas {
    width:max-content; min-width:100%; padding:10px; box-sizing:border-box;
  }
  body #modal #live-room-detail .seat-viewport.hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail])[data-seat-zoom] .live-seat-grid.detail { grid-template-columns:repeat(var(--live-columns),112px); gap:6px; }
  body :is(#app,#modal) .hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail]) .hall-schematic-grid { grid-template-columns:repeat(var(--hall-columns),112px); gap:6px; }
  body #modal #live-room-detail .seat-viewport.hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail])[data-seat-zoom] .hall-diagram .detail-seat,
  body :is(#app,#modal) .hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail]) .hall-seat { min-height:112px; height:auto; padding:7px 4px; gap:4px; text-align:center; align-items:center; justify-content:center; }
  body :is(#app,#modal) .hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail]) :is(.roll-seat,.hall-seat) > strong,
  body #modal #live-room-detail .seat-viewport.hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail])[data-seat-zoom] .hall-diagram .detail-seat strong { display:block; font-size:17px!important; line-height:1.3; white-space:nowrap; }
  body :is(#app,#modal) .hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail]) :is(.roll-seat-name,.hall-student-name),
  body #modal #live-room-detail .seat-viewport.hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail])[data-seat-zoom] .hall-diagram .detail-seat .live-student-name { display:block; font-size:18px!important; line-height:1.35; font-weight:750; white-space:normal; overflow:visible; overflow-wrap:anywhere; }
  body :is(#app,#modal) .hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail]) :is(.roll-seat-number,.hall-seat>span:first-child),
  body #modal #live-room-detail .seat-viewport.hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail])[data-seat-zoom] .hall-diagram .detail-seat .seat-code { font-size:15px!important; line-height:1.2; text-align:center; width:100%; }
  body :is(#app,#modal) .hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail]) .roll-seat-status,
  body #modal #live-room-detail .seat-viewport.hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail])[data-seat-zoom] .hall-diagram .detail-seat .live-cell-status { display:block; font-size:13px; line-height:1.3; }
  body #modal #live-room-detail .seat-viewport.hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail])[data-seat-zoom] .hall-diagram .detail-seat .live-cell-status::after { content:none; }
  body #modal #live-room-detail .seat-viewport.hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail])[data-seat-zoom][data-seat-zoom=detail] .live-seat-grid.detail { grid-template-columns:repeat(var(--live-columns),140px); }
  body :is(#app,#modal) .hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail])[data-seat-zoom=detail] .hall-schematic-grid { grid-template-columns:repeat(var(--hall-columns),140px); }
  body :is(#app,#modal) .hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail]) .roll-seat { gap:4px; }
  body :is(#app,#modal) .hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail]) .seat-podium { position:sticky; left:10px; right:10px; width:calc(100cqw - 24px); min-width:0; justify-self:start; align-self:flex-start; }
}

/* H8 overview uses the full available width with no inner scroll surface. */
@media screen {
  body :is(#app,#modal) .seat-viewport.hall-readable:is([data-roll-zoom=fit],[data-seat-zoom=fit]) {
    width:100%; max-width:100%; max-height:none; height:auto; padding:6px;
    overflow:visible; cursor:auto; touch-action:pan-y; overscroll-behavior:auto;
    scrollbar-gutter:auto; container-type:inline-size; --seat-row-min:28px;
  }
  body :is(#app,#modal) .hall-readable:is([data-roll-zoom=fit],[data-seat-zoom=fit]) .seat-canvas { width:100%; min-width:0; padding:0; gap:6px; }
  body #app .hall-readable[data-roll-zoom=fit] .roll-seat-grid { width:100%; gap:2px; padding:0; }
  body #modal #live-room-detail .seat-viewport.hall-readable[data-seat-zoom=fit] .live-seat-grid.detail { grid-template-columns:repeat(var(--live-columns),minmax(0,1fr)); gap:2px; --seat-row-min:28px; }
  body #modal .seat-viewport.hall-readable[data-seat-zoom=fit] .hall-schematic-grid { grid-template-columns:repeat(var(--hall-columns),minmax(0,1fr)); gap:2px; }
  body #app .hall-readable[data-roll-zoom=fit] .roll-seat,
  body #modal #live-room-detail .seat-viewport.hall-readable[data-seat-zoom=fit] .hall-diagram .detail-seat,
  body #modal .seat-viewport.hall-readable[data-seat-zoom=fit] .hall-seat { min-height:28px; height:auto; padding:1px 0; gap:1px; border-width:1px; border-radius:3px; align-items:center; justify-content:center; text-align:center; }
  body #app .hall-readable[data-roll-zoom=fit] .roll-seat { height:100%; }
  body #app .hall-readable[data-roll-zoom=fit] .roll-seat strong,
  body #modal #live-room-detail .seat-viewport.hall-readable[data-seat-zoom=fit] .hall-diagram .detail-seat strong,
  body #modal .seat-viewport.hall-readable[data-seat-zoom=fit] .hall-seat strong { display:block; font-size:clamp(7px,1cqw,10px)!important; line-height:1.2; white-space:nowrap; letter-spacing:-.03em; }
  body #app .hall-readable[data-roll-zoom=fit] .roll-seat-name,
  body #modal #live-room-detail .seat-viewport.hall-readable[data-seat-zoom=fit] .hall-diagram .detail-seat .live-student-name,
  body #modal .seat-viewport.hall-readable[data-seat-zoom=fit] .hall-student-name { display:block; font-size:clamp(8px,1.2cqw,12px)!important; line-height:1.2; font-weight:700; white-space:normal; overflow:visible; overflow-wrap:anywhere; }
  body #app .hall-readable[data-roll-zoom=fit] :is(.roll-seat-number,.roll-seat-symbol,.roll-seat-status),
  body #modal #live-room-detail .seat-viewport.hall-readable[data-seat-zoom=fit] .hall-diagram .detail-seat :is(.seat-code,.live-cell-status,.live-alert-reason),
  body #modal .seat-viewport.hall-readable[data-seat-zoom=fit] .hall-seat>span:first-child { display:none; }
  body :is(#app,#modal) .hall-readable:is([data-roll-zoom=fit],[data-seat-zoom=fit]) .seat-podium { position:static; width:100%; min-width:0; height:25px; margin:0; font-size:12px; align-self:center; }
}

@media screen and (max-width:760px) {
  body #app .seat-viewport.hall-readable[data-roll-zoom=fit],
  body #modal #live-room-detail .seat-viewport.hall-readable[data-seat-zoom=fit],
  body #modal .seat-viewport.hall-readable[data-seat-zoom=fit] .hall-diagram { --hall-fit-row:22px; --seat-row-min:22px; }
  body #app .hall-readable[data-roll-zoom=fit] .roll-seat,
  body #modal #live-room-detail .seat-viewport.hall-readable[data-seat-zoom=fit] .hall-diagram .detail-seat,
  body #modal .seat-viewport.hall-readable[data-seat-zoom=fit] .hall-seat { min-height:22px; }
  body #app .hall-readable[data-roll-zoom=fit] .roll-seat-name,
  body #modal #live-room-detail .seat-viewport.hall-readable[data-seat-zoom=fit] .hall-diagram .detail-seat .live-student-name,
  body #modal .seat-viewport.hall-readable[data-seat-zoom=fit] .hall-student-name { display:none; }
}

@media screen and (max-width:760px) {
  body #modal #live-room-detail .seat-viewport.hall-readable[data-seat-zoom=fit] .hall-diagram .live-seat-grid.detail { --seat-row-min:22px; }
  body #app .hall-readable[data-roll-zoom=fit] .roll-seat strong,
  body #modal #live-room-detail .seat-viewport.hall-readable[data-seat-zoom=fit] .hall-diagram .detail-seat strong,
  body #modal .seat-viewport.hall-readable[data-seat-zoom=fit] .hall-seat strong { white-space:normal; overflow-wrap:anywhere; }
}

@media screen and (min-width:761px) {
  body #modal #live-room-detail .seat-viewport.hall-readable[data-seat-zoom=fit] .hall-diagram .detail-seat { padding:0; gap:0; }
  body #modal #live-room-detail .seat-viewport.hall-readable[data-seat-zoom=fit] .live-seat-grid.detail { gap:1px; }
}

/* Seat swaps: show both destinations before committing. */
.seat-swap-preview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0; }
.seat-swap-preview>div { padding:16px; border:1px solid #bacbdf; border-radius:12px; background:#f2f7fe; color:#203b60; }
.seat-swap-preview span { display:block; margin-top:8px; line-height:1.6; overflow-wrap:anywhere; }
.seat-swap-preview b { padding-inline:5px; }
.qr-entry-card .password-login { text-align:left; margin-block:20px; }
.qr-entry-card .password-login .field { margin-block:14px; }
@media(max-width:600px) { .seat-swap-preview { grid-template-columns:1fr; } }
.qr-entry-card .password-login>summary { min-height:48px; display:list-item; padding:12px 4px; color:#203b60; font-size:18px; font-weight:800; cursor:pointer; }
@media(max-width:600px) {
  .qr-entry-card .qr-entry-room { padding:14px 16px; margin-bottom:16px; }
  .qr-entry-card .qr-entry-room strong { font-size:30px; }
}

/* Shared hall wayfinding: readable in full maps without enlarging room thumbnails. */
body :is(#app,#modal) .hall-readable .seat-podium.source-podium {
  position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  width:100%; min-width:0; min-height:46px; height:auto; padding:8px 12px; margin:0;
  background:#234565; color:#fff; border:0; border-radius:8px;
  font-size:21px; line-height:1.3; letter-spacing:.16em; font-weight:800;
}
body :is(#app,#modal) .hall-readable .source-podium .source-entry {
  position:static; justify-self:start; grid-column:1; font-size:17px; font-weight:800;
  letter-spacing:0; padding:4px 9px; background:#fff; color:#234565; border-radius:5px;
}
body :is(#app,#modal) .hall-readable .source-podium > strong { grid-column:2; font:inherit; }
body :is(#app,#modal) .hall-readable .source-rear-label {
  width:100%; margin:2px 0 0; padding:10px 8px; box-sizing:border-box;
  border:2px solid #7393a9; border-radius:8px; background:#eaf2f7; color:#234565;
  font-size:18px; line-height:1.4; font-weight:800; text-align:center;
}
body :is(#app,#modal) .hall-readable:is([data-roll-zoom=large],[data-seat-zoom=detail]) :is(.source-podium,.source-rear-label) {
  position:sticky; left:10px; width:calc(100cqw - 24px); align-self:flex-start;
}
.hall-column-axis { display:grid; grid-template-columns:repeat(var(--hall-columns),minmax(0,1fr)); gap:2px; width:100%; color:#294a67; text-align:center; font-size:13px; font-weight:800; }

/* A teacher's chosen hall columns are a view filter, never a change to seating. */
body #app .roll-map-tools { flex-wrap:wrap; justify-content:flex-start; }
#roll-focused-details { margin-left:auto; }
#roll-column-tools { padding:4px 24px 16px; }
.roll-column-picker { padding:14px; border:2px solid #bdcbd8; border-radius:12px; background:#f7fafc; }
.roll-column-picker.needs-selection { border-color:#d29a00; background:#fff7cc; animation:column-choice-glow 3s ease-in-out infinite; }
.roll-column-prompt { margin:0 0 12px; padding:9px 12px; border-radius:7px; background:#ffdf4d; color:#493700; font-size:18px; font-weight:850; line-height:1.4; }
@keyframes column-choice-glow { 0%,100% { box-shadow:0 0 0 1px #e6b60044; } 50% { border-color:#f2bd00; box-shadow:0 0 0 4px #ffda4066,0 0 22px #ffd22477; } }
.roll-column-toolbar { display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; margin-bottom:9px; }
.roll-column-toolbar > strong { font-size:16px; }
.roll-column-toolbar > span { color:#586d80; font-size:13px; }
.roll-column-toolbar > div { margin-left:auto; display:flex; gap:8px; }
.roll-column-options { display:flex; gap:6px; flex-wrap:wrap; }
body #app .roll-column-options button { min-width:52px; min-height:42px; padding:7px 12px; border:1px solid #a6b8ca; border-radius:7px; background:#fff; color:#2c465d; font-family:inherit; font-size:16px; font-weight:700; line-height:1.3; box-shadow:none; cursor:pointer; }
body #app .roll-column-options button[aria-pressed=true] { background:var(--role-ink,#284565); border-color:var(--role-ink,#284565); color:#fff; }
.roll-column-options button:focus-visible { outline:3px solid #c77d0b; outline-offset:2px; }
.roll-column-scope { font-size:13px; line-height:1.5; color:#52677a; margin:9px 0 0; }
.roll-columns-grid { display:grid; grid-template-columns:repeat(auto-fill,174px); justify-content:start; align-items:start; gap:12px; padding:16px 24px 24px; }
.roll-column { border:1px solid #b7c8d6; border-radius:10px; background:#f5f8fb; overflow:hidden; min-width:0; }
.roll-column > header { display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 6px; background:var(--role-ink,#284565); color:#fff; }
.roll-column > header h3 { font-size:22px; line-height:1.2; margin:0; color:inherit; }
.roll-column > header span { font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.roll-column-direction { padding:8px 10px; text-align:center; color:#395b75; font-size:14px; font-weight:750; }
.roll-column-seats { display:grid; gap:6px; padding:0 8px; }
body #app .roll-column-seats .roll-seat {
  display:flex; flex-direction:column; aspect-ratio:1; width:100%; height:auto; min-height:0;
  gap:3px; padding:6px; box-sizing:border-box; text-align:center;
  align-items:center; justify-content:center; border-radius:7px; touch-action:pan-y;
}
body #app .roll-column-seats .roll-seat-number { display:block; width:100%; text-align:center; font-size:13px; font-weight:800; overflow-wrap:anywhere; }
body #app .roll-column-seats .roll-seat > strong { font-size:14px!important; line-height:1.3; }
body #app .roll-column-seats .roll-seat-name { display:block; font-size:18px!important; font-weight:750; line-height:1.3; max-width:100%; white-space:normal; overflow-wrap:anywhere; }
body #app .roll-column-seats .roll-seat-symbol { display:none; }
body #app .roll-column-seats .roll-seat-status { display:block; max-width:100%; font-size:12px; font-weight:700; line-height:1.4; text-align:center; }
body #app .roll-column-seats .roll-seat-many { font-size:12px; }
body #app .roll-column-seats :is(.roll-seat-empty,.roll-seat-disabled) { opacity:1; color:#607385; }
.roll-columns-empty { padding:30px 24px; color:#52677a; text-align:center; }
@media(max-width:620px) {
  #roll-column-tools { padding:4px 12px 12px; }
  .roll-column-toolbar > div { margin-left:0; }
  .roll-columns-grid { grid-template-columns:repeat(2,minmax(0,174px)); padding:12px; gap:12px; }
  body #app .roll-map-tools .field { flex:1; min-width:125px; max-width:none; }
  body #app .roll-map-tools .field > span { display:block; font-size:13px; }
  body #app .roll-map-tools select { font-size:14px; }
  #roll-focused-details { margin-left:0; }
  body :is(#app,#modal) .hall-readable .seat-podium.source-podium { min-height:44px; padding:6px 8px; font-size:19px; }
  body :is(#app,#modal) .hall-readable .source-podium .source-entry { font-size:15px; padding:4px 6px; }
  body :is(#app,#modal) .hall-readable .source-rear-label { font-size:16px; padding:8px 4px; }
  .hall-column-axis { font-size:11px; }
}
@media print { #roll-column-tools { display:none; } .roll-column { break-inside:avoid; } }
@media (prefers-reduced-motion:reduce) {
  .roll-column-picker.needs-selection,
  body :is(#app,#modal) .attendance-stat[data-state=manual_not_entered].has-alert { animation:none; }
}

/* The date belongs to the printed password, not to the permanent QR URL. */
.qr-daily-code { display:grid; justify-items:center; gap:4px; padding:10px 14px; margin:10px auto; border:2px solid #b8c9d5; border-radius:8px; background:#f3f7fa; color:#203c54; }
.qr-daily-code strong { font:800 30px/1.2 ui-monospace,monospace; letter-spacing:.16em; }
.qr-daily-code span,.qr-daily-code small { font-size:13px; }
#qr-code-login .field { display:grid; gap:8px; margin:18px 0; text-align:left; }
#qr-code-login [type=submit] { width:100%; }
.roll-signature { margin-top:18px; }
.roll-signature label { font-size:18px; font-weight:800; }
.roll-signature p { margin:8px 0; color:#52677a; }
.roll-signature canvas { display:block; width:100%; aspect-ratio:10/3; border:2px solid #8098ae; border-radius:8px; background:#fff; touch-action:none; cursor:crosshair; margin:10px 0; }
#signature-status { margin-left:12px; font-size:14px; }
.signature-record { max-width:480px; margin:12px 0; }
.signature-record figcaption { font-size:14px; font-weight:700; }
.signature-record figcaption span { display:block; margin:4px 0; font-weight:400; }
.signature-record svg { display:block; width:100%; background:#fff; border:1px solid #bccbd6; border-radius:6px; }
.roll-signed-record { padding:12px 24px; border-top:1px solid #d9e2e8; }
.roll-signed-record > summary { cursor:pointer; font-weight:700; }

/* Daily room cards are the primary office printing task. */
.qr-today-card .card-body {display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.qr-today-card h2 {margin:0 0 6px;}
.qr-today-card p {margin:0;color:var(--muted);}
.qr-print-controls {display:flex;gap:14px;align-items:end;flex-wrap:wrap;}
.qr-print-controls .field {flex:1 1 190px;min-width:0;}
@media(max-width:600px){.qr-today-card .btn,.qr-print-controls .btn {width:100%;}.qr-print-controls .field {flex-basis:100%;}}

.qr-session-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:10px; margin:16px 0; }
.qr-session-choice { display:flex; align-items:center; gap:12px; padding:14px; border:1.5px solid #b5c3d8; border-radius:10px; background:#fff; cursor:pointer; }
.qr-session-choice:has(:checked) { border-color:#3456a0; background:#edf3ff; }
.qr-session-choice input { flex:none; width:22px; height:22px; margin:0; }
.qr-session-choice strong,.qr-session-choice small { display:block; }
.qr-session-choice small { margin-top:5px; color:#51617a; }
#qr-multi-print > .field { max-width:600px; margin-bottom:16px; }

/* Late arrivals remain distinct from green arrivals and red absences. */
@media screen {
  body :is(#app,#modal) .attendance-stat[data-state=late] { --stat-bg:#a85400; --stat-ink:#fff; --stat-edge:#914900; }
  body :is(#app,#modal) :is(.live-seat.state-late,.roll-seat-late) { background:#ffae39; color:#542900; border-color:#a85400; box-shadow:none; }
  body :is(#app,#modal) :is(.live-person-status.state-late,.detail-seat.state-late) { --seat-lamp:#ffae39; --seat-edge:#a85400; }
  body #modal #live-room-detail .detail-seat.state-late { background:#fff0d6!important; border-color:#a85400!important; color:#542900; }
  body :is(#app,#modal) .summary-light.state-late { background:#ffae39; border-color:#a85400; }
  body #app :is(.live-toolbar-key,.room-reading)[data-state=late] { --reading-ink:#a85400; }
  body #app .roll-confirm-late { background:#a85400; border-color:#914900; color:#fff; }
  body #app .room-reading-label { font-size:12px; }
}

/* Longer synthetic names use the same layout with a smaller visual scale. */
body :is(#app,#modal) :is(.roll-seat,.detail-seat) .practice-seat-name {
  zoom:.82;
}

/* CSV identity and exam choices stay readable on phones. */
.leave-match-list { display:grid; gap:16px; }
.leave-match-intro { margin:0 0 16px; line-height:1.6; }
.leave-match-row { min-width:0; padding:16px; border:1px solid #bdcbdc; border-radius:12px; background:#fff; }
.leave-match-row header { display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:space-between; margin-bottom:12px; }
.leave-match-row header span { color:#536780; }
.leave-match-row .field { margin:12px 0; }
.leave-match-warning { color:#805214; background:#fff4d6; border-left:3px solid #c38d20; padding:10px 12px; line-height:1.5; }
.leave-match-exams { margin-top:12px; }
.leave-match-exams fieldset { border:0; padding:0; margin:0; min-width:0; }
.leave-match-exams legend { font-weight:750; margin-bottom:6px; }
.leave-exam-option { display:flex; align-items:center; gap:10px; padding:12px; margin-top:8px; border:1px solid #c7d4e4; border-radius:8px; cursor:pointer; }
.leave-exam-option:has(input:checked) { background:#e8f1ff; border-color:#2566bb; }
.leave-exam-option input { flex:0 0 22px; width:22px; height:22px; margin:0; }
.leave-exam-option span { min-width:0; overflow-wrap:anywhere; }
.leave-match-single { padding:12px; background:#eef4fa; border-radius:8px; line-height:1.5; }

/* Locate an absent student's room without hiding the rest of the building. */
@media screen {
  body #app .building-alert-toggle {
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    min-height:40px; padding:8px 12px; max-width:100%; flex-shrink:0;
    border:1px solid #c72c4b; border-radius:8px; background:#fff5f7;
    color:#a71938; font-size:13px; font-weight:750; line-height:1.4; cursor:pointer;
  }
  body #app .building-alert-toggle i {
    display:grid; place-items:center; margin:0; width:19px; height:19px;
    border-radius:50%; background:#b51f40; color:#fff; font-style:normal; font-weight:900;
  }
  body #app .building-alert-toggle:hover { background:#ffe6ec; }
  body #app .building-alert-toggle.is-active { background:#b51f40; border-color:#b51f40; color:#fff; }
  body #app .building-alert-toggle.is-active i { background:#fff; color:#b51f40; }
  body #app .building-alert-toggle:disabled { opacity:.65; cursor:default; }
  body #app .building-alert-toggle:focus-visible { outline:3px solid #b51f40; outline-offset:3px; }
  body[data-role] #app .live-room-card.has-red-alert {
    border-color:#c31f44; box-shadow:inset 0 0 0 2px #c31f44,0 0 0 3px #c31f4426,0 5px 18px #9f17351a;
    animation:live-room-alert-pulse 2.4s ease-in-out infinite;
    scroll-margin-block:24px;
  }
  body[data-role] #app .live-room-card.has-red-alert .live-room-card-head h3 { color:#ad1839; }
  @keyframes live-room-alert-pulse {
    0%,100% { border-color:#c31f44; box-shadow:inset 0 0 0 2px #c31f44,0 0 0 5px #c31f4440,0 5px 18px #9f173526; }
    50% { border-color:#e9a2b3; box-shadow:inset 0 0 0 2px #c31f4400,0 0 0 0 #c31f4400,0 5px 18px #9f17350d; }
  }
}
@media (prefers-reduced-motion:reduce) {
  body[data-role] #app .live-room-card.has-red-alert { animation:none; }
}
@media screen and (max-width:420px) {
  body #app .live-building-section>header { flex-wrap:wrap; gap:10px; }
  body #app .building-alert-toggle { padding:7px 9px; font-size:12px; }
}
.roll-time-issues { display:grid; gap:12px; margin:0 0 14px; }
.roll-time-issue { padding:16px; border:1px solid #d7af5d; border-left:4px solid #a46c0a; border-radius:9px; background:#fff9ed; color:#44361e; }
.roll-time-issue>strong { display:block; font-size:17px; line-height:1.5; overflow-wrap:anywhere; }
.roll-time-seat { display:block; margin-top:3px; color:#6f5934; font-size:13px; }
.roll-time-issue dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0 10px; }
.roll-time-issue dl div { min-width:0; }
.roll-time-issue dt { font-size:13px; color:#6f5934; }
.roll-time-issue dd { margin:3px 0 0; font-size:21px; font-weight:800; font-variant-numeric:tabular-nums; }
.roll-time-reason { margin:0 0 14px; font-size:14px; line-height:1.5; }
.roll-time-help { margin:0; font-size:14px; line-height:1.6; }
.batch-schedule-notes { margin:16px 24px; }
.batch-schedule-notes ul { margin:0; padding-left:1.4em; }
.batch-schedule-notes li + li { margin-top:8px; }
#leave-results .leave-room { color:#365778; font-weight:650; }
@media (max-width:600px) { .batch-schedule-notes { margin:14px 16px; } }

/* Batch details and actions each have their own row. */
#batch-content .batch-heading { display:grid; gap:12px; align-items:start; }
.batch-title-line { display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; min-width:0; }
.batch-title-line h2 { margin:0; line-height:1.5; overflow-wrap:anywhere; }
.batch-title-line .badge { flex-shrink:0; }
.batch-facts { display:flex; flex-wrap:wrap; gap:6px 24px; color:#586b88; font-size:15px; line-height:1.7; }
.batch-saved { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; font-size:13px; color:#6b7b93; }
body #app .batch-saved .record-stamp { display:inline-flex; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:6px 12px; padding:0; }
body #app .batch-saved .record-stamp strong { font-size:13px; font-weight:600; }
body #app .batch-saved .record-stamp time { font-size:13px; }
.batch-toolbar { display:flex; flex-wrap:wrap; gap:10px; padding:16px 24px; border-bottom:1px solid #e1e6ef; background:#f8fafe; }
.batch-toolbar .btn { min-height:44px; padding:10px 18px; white-space:nowrap; font-size:15px; }
@media (max-width:600px) {
  .batch-facts { display:grid; gap:4px; font-size:14px; }
  .batch-toolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:14px 16px; gap:9px; }
  .batch-toolbar .btn { padding-inline:8px; font-size:14px; }
  .batch-toolbar .btn.primary { grid-column:1 / -1; }
}