@charset "UTF-8";
/* Presentation layer. Attendance colours and print evidence remain in app.css. */
@media screen {
  :root {
    --wine:#1a3155; --wine-dark:#102542; --wine-light:#edf2f8;
    --ink:#23334b; --muted:#69788d; --border:#e3e8ef;
    --canvas:#f3f5f8; --red:#af2941; --radius:14px;
    --signal-blue:#138bff; --signal-green:#00d488; --signal-red:#ff3157;
    font-family:"SF Pro Display","PingFang TC",-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft JhengHei",sans-serif;
    font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  body { background:radial-gradient(ellipse at 92% 0%,#eadde86b,transparent 40%),radial-gradient(ellipse at 35% 5%,#dce9f6a8,transparent 44%),var(--canvas); background-attachment:fixed; }
  [hidden] { display:none!important; }
  #toast { pointer-events:none; }
  h1 { font-size:30px; line-height:1.25; letter-spacing:-.025em; font-weight:750; text-wrap:balance; }
  h2 { font-size:20px; letter-spacing:-.02em; }
  h3 { font-size:16px; }
  .small,small { font-size:13px; }
  .mono { font-family:inherit; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
  ::selection { background:#d6e3f4; color:#152c4d; }
  :is(button,a,input,select,textarea):focus-visible { outline:3px solid #9eb5d4; outline-offset:3px; }

  /* A quiet, floating navigation rail with the school colours. */
  .sidebar { inset:14px auto 14px 14px; width:232px; border:1px solid #ffffff12; border-radius:18px; background:radial-gradient(ellipse at 100% 95%,#76334e66,transparent 55%),linear-gradient(155deg,#11223d,#224566 62%,#182b4c); box-shadow:0 15px 38px #172e4d26; overflow:auto; }
  .sidebar::before { content:""; position:absolute; width:38px; height:4px; top:0; left:25px; background:#c54458; border-radius:0 0 3px 3px; }
  .sidebar .brand { padding:29px 19px 30px; gap:11px; align-items:center; }
  .sidebar .brand-seal { width:45px; height:45px; background:white; border:3px solid white; border-radius:50%; }
  .sidebar .brand-title { font-size:15px; letter-spacing:.015em; color:white; }
  .sidebar .brand-subtitle { font-size:10px; color:#b4c5dc; line-height:1.45; margin-top:3px; }
  .sidebar .nav-label { padding:17px 24px 9px; font-size:10px; color:#9eb1ce; letter-spacing:.14em; }
  .nav { gap:5px; padding:0 12px; }
  .nav a { color:#c9d4e5; border:0; border-radius:9px; min-height:46px; padding:11px 13px; font-size:15px; font-weight:500; transition:background .16s,color .16s; }
  .nav a:hover { background:#ffffff0c; color:#fff; }
  .nav a.active { background:linear-gradient(105deg,#fff,#e9f0f9); color:#162e50; box-shadow:0 4px 14px #05152b26; border-left:0; position:relative; }
  .nav a.active::before { content:""; width:3px; height:18px; background:var(--red); position:absolute; left:-12px; border-radius:0 3px 3px 0; }
  .nav svg { width:19px; height:19px; stroke-width:1.7; opacity:.95; }
  .sidebar-bottom { margin:auto 19px 0; padding:18px 5px; border-top:1px solid #ffffff12; color:#96abc7; font-size:11px; line-height:1.8; }
  .sidebar-bottom small { display:block; font-size:10px; margin-left:14px; color:#728cad; }
  .sidebar-status-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:#80a390; margin-right:8px; vertical-align:middle; }
  .workspace { margin-left:260px; min-width:0; }
  .topbar { min-height:66px; height:auto; background:linear-gradient(110deg,#fffffff2,#f3f6fbd9); border:1px solid #ffffff; border-radius:14px; margin:14px 32px 12px; padding:13px 18px; gap:20px; box-shadow:0 4px 18px #203b5906; }
  .topbar-context { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
  .topbar-context>strong { color:#738199; font-weight:500; font-size:13px; }
  .topbar-context .today { font-size:13px; color:#8491a4; }
  .user-area { gap:11px; }
  .avatar { background:linear-gradient(135deg,#e0eaf6,#eee1e9); color:#2b476b; width:35px; height:35px; border-radius:11px; border:1px solid #ffffff; box-shadow:0 2px 6px #20355308; }
  .user-info strong { font-size:13px; font-weight:600; }
  .user-info span { font-size:11px; color:#7d8a9d; }
  .user-area .btn { border-color:transparent; background:transparent; font-size:12px; padding:6px 9px; color:#65778e; }
  .user-area .btn:hover { background:white; color:var(--wine); }
  .account-actions { display:flex; align-items:center; gap:5px; flex-shrink:0; }
  .role-switch { display:flex; align-items:center; flex-shrink:0; padding:4px; gap:4px; border:1px solid #adbfda; border-radius:12px; background:#e6edf8; box-shadow:0 3px 10px #223f6114; }
  .user-area .role-switch .btn { display:flex; align-items:center; justify-content:center; gap:6px; border:0; min-height:44px; padding:8px 12px; color:#445f83; font-size:14px; font-weight:700; white-space:nowrap; }
  .role-switch .btn svg { width:18px; height:18px; stroke-width:1.8; }
  .user-area .role-switch .btn.active { background:linear-gradient(120deg,#20385f,#3a5b85); color:#fff; box-shadow:0 3px 7px #142c5030; }
  .global-demo-note { padding:0 32px; margin:0 auto; }
  .global-demo-note .note { font-size:12px; padding:8px 12px; border:0; border-radius:6px; background:#eee9df; color:#77664a; margin:0; }
  .global-demo-note .note svg { width:14px; height:14px; }
  main { max-width:1640px; padding:26px 32px 60px; }
  .page-head { align-items:center; gap:22px; margin-bottom:25px; padding:4px 0 0; }
  .page-head .eyebrow,.page-eyebrow { display:flex; align-items:center; gap:9px; color:#8a6271; font-size:10px; font-weight:650; letter-spacing:.13em; margin-bottom:10px; }
  .page-head .eyebrow::before,.page-eyebrow::before { content:""; width:19px; height:2px; background:var(--red); display:inline-block; }
  .page-head p,.page-description { color:#7a889b; font-size:14px; margin-top:9px; line-height:1.6; }
  .page-head .actions { justify-content:flex-end; }
  .section-kicker { color:#8b96a7; text-transform:uppercase; letter-spacing:.1em; font-size:10px; font-weight:600; margin-bottom:6px; }
  .workspace-context { display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; color:#64748b; font-size:14px; }

  /* Shared controls, surfaces and tables. */
  .btn { font-size:14px; min-height:43px; border-radius:8px; border-color:#dfe5ed; padding:10px 15px; font-weight:600; box-shadow:0 1px 2px #172b5003; transition:background .15s,border-color .15s,box-shadow .15s; }
  .btn:hover { background:#f4f7fb; border-color:#bccadc; box-shadow:0 2px 5px #172b5007; }
  .btn.primary { background:linear-gradient(120deg,#1c3257,#34577e); border-color:#284568; color:#fff; box-shadow:0 4px 10px #172b5021,inset 0 1px 0 #ffffff14; }
  .btn.primary:hover { background:linear-gradient(120deg,#243f68,#3e648f); border-color:#385b85; }
  .btn.soft { background:#eaf0f7; border-color:#eaf0f7; color:#284969; }
  .btn.tiny { font-size:13px; min-height:33px; padding:6px 11px; }
  .btn svg { width:16px; height:16px; stroke-width:1.6; }
  .btn.link { box-shadow:none; }
  .card { border:1px solid #e0e7f0; border-radius:14px; box-shadow:0 6px 22px #172b5007; margin-bottom:20px; }
  .card-head { padding:19px 22px; border-color:#e7edf5; background:linear-gradient(105deg,#fff,#f4f7fc); }
  .card-head h2 { font-size:18px; }
  .card-head p { font-size:13px; }
  .card-body { padding:22px; }
  .card-foot { padding:14px 22px; background:#f9fafc; border-color:#edf0f4; }
  .card-head.compact { background:transparent; }
  .filters { gap:14px; }
  .filters .field { min-width:140px; }
  #dashboard-filter { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
  #dashboard-filter .field { min-width:0; }
  #dashboard-filter>.btn { justify-self:start; min-width:100px; }
  .date-query-status { grid-column:1/-1; margin:0; }
  .field { gap:7px; min-width:0; }
  .field>span,.field>label { font-size:13px; font-weight:600; color:#69778a; }
  input,select,textarea { min-height:44px; font-size:16px; border-color:#d9e3f0; border-radius:9px; background:linear-gradient(180deg,#fff,#f8fafd); padding:9px 12px; box-shadow:inset 0 1px 2px #1c355504; transition:border-color .15s,box-shadow .15s; }
  input:hover,select:hover,textarea:hover { border-color:#b9c9db; }
  input:focus,select:focus,textarea:focus { background:white; border-color:#7898bf; }
  /* Safari's native date editor must stay inside its flex/grid field. */
  input:is([type=date],[type=time],[type=datetime-local]) { min-width:0; max-width:100%; width:100%; }
  input:is([type=date],[type=time],[type=datetime-local])::-webkit-date-and-time-value { min-width:0; text-align:left; }
  input::placeholder,textarea::placeholder { color:#9aa6b6; }
  input[type=checkbox] { width:18px; height:18px; min-height:18px; border-radius:4px; accent-color:var(--wine); }
  input[type=file] { background:#f6f8fc; border:1px dashed #c4d0df; padding:18px; font-size:14px; }
  input[type=file]::file-selector-button { padding:8px 12px; border:0; border-radius:6px; color:#284665; background:#e5edf7; margin-right:12px; font:inherit; cursor:pointer; }
  .badge,.chip { padding:4px 9px; font-size:12px; line-height:1.35; border-radius:6px; font-weight:550; }
  .badge.gray { background:#e5e8ed; color:#626c7c; }
  .badge.white { border-color:#d7dfe9; color:#65738a; }
  .note { border:0; border-radius:9px; padding:13px 16px; font-size:14px; background:#edf3f9; }
  .note.warning { background:#fbf3e7; }
  .note.error { background:#fff0f1; border-left:3px solid var(--red); }
  .note.success { background:#eef7f1; }
  .note:last-child { margin-bottom:0; }
  .context-help { margin:0 0 20px; font-size:13px; color:#748298; }
  .context-help>summary { display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none; width:fit-content; padding:5px 0; }
  .context-help>summary::-webkit-details-marker { display:none; }
  .context-help>summary::before { content:"+"; width:19px; height:19px; display:grid; place-items:center; border:1px solid #c9d4e1; border-radius:50%; font-size:13px; color:#7b8ca2; line-height:1; }
  .context-help[open]>summary::before { content:"−"; }
  .context-help>summary>svg { width:14px; height:14px; display:none; }
  .context-help-body { padding:13px 16px; background:#eaf0f6; border-radius:8px; color:#586d88; line-height:1.8; margin-top:7px; }
  .context-help-body .note { background:transparent; padding:0; }
  table { font-size:15px; }
  th { padding:13px 16px; background:linear-gradient(180deg,#f0f4fa,#eaf0f8); color:#617691; font-size:12px; font-weight:650; letter-spacing:.025em; border-color:#dfe8f3; }
  td { padding:14px 16px; border-color:#edf0f5; line-height:1.55; }
  tbody tr:last-child td { border-bottom:0; }
  tbody tr:hover td { background-color:#f6f9fd; }
  td small { color:#8a97a9; font-size:12px; margin-top:3px; }
  td.name,.name { font-weight:650; color:#273a55; }
  .tabs { gap:6px; margin-bottom:22px; padding:5px; border:1px solid #dfe6f1; background:linear-gradient(110deg,#e5edf7,#ecebf3); border-radius:10px; }
  .tabs button { border:0; border-radius:7px; padding:9px 14px; font-size:14px; color:#7b879a; background:transparent; }
  .tabs button.active { background:white; color:var(--wine); box-shadow:0 2px 5px #213d5e0b; }
  .tabs button:hover { color:var(--wine); background:#ffffff70; }
  .section-tabs { display:flex; flex-wrap:wrap; gap:5px; padding:5px; margin-bottom:22px; border:1px solid #dfe6f1; border-radius:10px; background:linear-gradient(110deg,#e5edf7,#ecebf3); }
  .section-tabs button { border:0; border-radius:7px; background:transparent; padding:9px 13px; font-size:14px; color:#74829a; }
  .section-tabs button.active { background:white; color:#223c5f; box-shadow:0 2px 5px #2035520b; }
  details.system-panel>summary,details.snapshots-panel>summary { cursor:pointer; list-style:none; }
  details.system-panel>summary::after,details.snapshots-panel>summary::after { content:"＋"; color:#8b9aaf; font-size:18px; }
  details.system-panel[open]>summary::after,details.snapshots-panel[open]>summary::after { content:"−"; }
  .empty { padding:58px 24px; color:#7d8c9f; }
  .empty>svg { width:52px; height:52px; padding:13px; border:1px solid #dbe3ee; background:#e9eef5; border-radius:14px; color:#8a9bb3; margin-bottom:15px; stroke-width:1.3; }
  .empty h3 { font-size:17px; font-weight:600; color:#60738e; margin-bottom:5px; }
  .empty p { font-size:14px; color:#8b98aa; max-width:380px; line-height:1.75; }
  .empty .btn { margin-top:17px; }
  dialog { border:0; border-radius:17px; box-shadow:0 25px 90px #0e24433a; }
  dialog::backdrop { background:#11264070; backdrop-filter:blur(4px); }
  .modal-head { border-color:#dfe7f2; padding:22px 25px; background:linear-gradient(105deg,#f2f6fb,#f5edf2); }
  .modal-head h2 { font-size:21px; }
  .modal-head .btn.icon { border:0; background:#f0f3f8; border-radius:50%; min-width:32px; min-height:32px; color:#6c7d94; }
  .modal-body { padding:24px 25px; }
  .modal-foot { padding:17px 25px; background:#f7f9fc; border-color:#e9edf3; }

  /* Attendance work surfaces keep students and the primary action foremost. */
  .roll-header { padding:22px; background:linear-gradient(115deg,#fff,#edf3fa); border-bottom:1px solid #e1e9f4; }
  .roll-header h2 { font-size:21px; }
  .group-meta { font-size:13px; color:#8592a3; gap:9px 18px; margin-top:7px; }
  .roll-reference { font-size:12px; color:#8592a3; margin-top:10px; }
  .roll-reference summary { cursor:pointer; }
  .roll-dirty-indicator { color:#ac5b25; background:#fff0e0; border-radius:5px; padding:4px 8px; font-size:12px; }
  .roll-toolbar { padding:14px 22px; background:#f8fafd; border-color:#edf1f5; gap:12px; }
  .roll-toolbar .chips { gap:7px; }
  .roll-footer { padding:18px 22px; background:#fafbfd; border-color:#e7ecf3; }
  .roll-footer .field { max-width:480px; }
  .roll-group td { padding:12px 13px; }
  .roll-group td.name { font-size:17px; }
  .roll-group .status-cell select { min-width:106px; font-size:16px; background:#fff; }
  .roll-group input[type=time] { font-size:16px; }
  .roll-group .face-detail { font-size:12px; }
  .roll-group .note-cell input { min-width:140px; font-size:16px; }
  .row-status-present .name { color:#28634c; }
  .stats-grid { gap:14px; margin:20px 0; }
  .stat-card { border-radius:13px; border:1px solid #e4eaf1; background:#fff; padding:21px; box-shadow:0 3px 9px #18355903; }
  .stat-card .number,.stat-card strong { font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
  .stat-card .label { color:#79889c; font-size:13px; }
  .stat-card .number { font-size:34px; font-weight:650; line-height:1.25; margin:7px 0; }
  .stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:11px; border:0; background:none; margin:18px 0; border-radius:0; }
  .stats>.stat { border:1px solid #e1e7f0; border-top:3px solid var(--metric,#bdc9d9); border-radius:12px; background:white; padding:19px 17px; min-height:134px; box-shadow:0 3px 7px #152e4b03; }
  .stats>.stat:last-child { border-right:1px solid #e1e7f0; }
  .stat-label { font-size:12px; color:#7d8b9e; min-height:20px; }
  .stat-number { font-size:34px; line-height:1.3; color:#233f65; font-weight:720; letter-spacing:-.035em; margin:9px 0 2px; font-variant-numeric:tabular-nums; }
  .stat-number>span { font-size:10px; font-weight:400; color:#9aa7b8; letter-spacing:0; margin-left:6px; }
  .stat-footer { font-size:11px; color:#8e9caf; padding-top:4px; }
  .stats>.stat.metric-status-total { background:radial-gradient(circle at 100% 0%,#b567872b,transparent 70%),linear-gradient(135deg,#1c3154,#355d80); border-color:#2b496c; box-shadow:0 8px 20px #1c385124; }
  .stats>.stat.metric-status-face_only { background:linear-gradient(145deg,#fff,#eaf4ff); }
  .stats>.stat.metric-status-present { background:linear-gradient(145deg,#fff,#edf8f3); }
  .metric-status-total .stat-label { color:#bbcadc; }
  .metric-status-total .stat-number { color:#fff; }
  .metric-status-total .stat-footer,.metric-status-total .stat-number>span { color:#91a8c5; }
  [class*="metric-status-"] { --metric:#bdc9d9; }
  .metric-status-face_only { --metric:#3b76ba; }
  .metric-status-present { --metric:#287653; }
  .metric-status-grade_off { --metric:#303d4f; }
  .metric-status-leave { --metric:#aab2c0; }
  .stat-card[class*="metric-status-"] { border-top:3px solid var(--metric); }
  .progress { background:#eaf0f6; border-radius:12px; height:5px; margin-top:9px; }
  .progress>div { background:linear-gradient(90deg,#36577f,#7194b8); border-radius:12px; }
  .overview-alert-strip { padding:13px 17px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; border-radius:10px; background:#fff3e8; color:#8e643e; margin-bottom:18px; font-size:13px; }
  .overview-alert-strip:not(:has(.badge)) { padding:0; background:transparent; }
  .overview-alert-strip .context-help { margin:0; }
  .configuration-review { padding:14px 22px; margin:0; border-top:1px solid #edf0f4; background:#fbfcfe; }
  .review-clear { color:#8695a8; font-size:14px; }
  .file-checksum { overflow-wrap:anywhere; font-size:11px; }

  /* Live rooms: ordered rows, open space, restrained seat lamps. */
  .live-monitor { padding-top:20px; }
  .live-monitor .page-head { margin-bottom:16px; }
  .live-monitor .page-head .eyebrow { display:none; }
  .live-monitor .card { border-radius:13px; margin-bottom:12px; }
  .live-monitor #live-query { padding:13px 18px; gap:12px; }
  .live-monitor .live-status { margin:8px 0 12px; font-size:12px; color:#8190a3; }
  .live-dot { box-shadow:0 0 0 3px #e3f0e9; width:6px; height:6px; margin-right:4px; }
  .live-dot.stale { box-shadow:0 0 0 3px #f9e3e6; }
  .live-summary { gap:0; border-radius:12px; border-color:#e2e8f0; background:#fff; padding:5px 0; margin:15px 0 20px; }
  .live-summary>div { border-color:#edf0f5; padding:10px 15px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .live-summary span { font-size:12px; color:#7e8b9e; }
  .live-summary strong { font-size:28px; letter-spacing:-.03em; font-weight:650; color:#1d3558; }
  .live-summary-context { font-size:12px; color:#8390a2; margin:0 0 15px; }
  .live-legend,.live-monitor .live-legend { display:flex; flex-wrap:nowrap; align-items:center; gap:22px; overflow-x:auto; padding:7px 4px 12px; scrollbar-width:thin; scrollbar-color:#acbcd2 transparent; }
  .live-legend>span,.live-monitor .live-legend>span { flex:0 0 auto; font-size:18px; font-weight:600; white-space:nowrap; color:#405471; gap:10px; }
  .live-legend .live-seat,.live-monitor .live-legend .live-seat { width:28px; height:28px; min-width:28px; flex:0 0 28px; font-size:17px; border-radius:6px; }
  .live-seat.state-face_only { background:var(--signal-blue); border-color:#0974e0; box-shadow:0 0 8px #138bff60; }
  .live-seat.state-present { background:var(--signal-green); border-color:#00af70; color:#074e38; box-shadow:0 0 8px #00d48865; }
  .live-monitor .live-session-label { margin:9px 0; }
  .live-monitor .live-summary { margin:10px 0; }
  .live-monitor .live-summary-context { margin-bottom:10px; }
  .live-monitor .live-building-tabs { margin-bottom:8px; }
  .live-seat.has-seat-alert { background:var(--signal-red)!important; border-color:#e91640!important; color:#fff!important; box-shadow:0 0 9px #ff315775; animation:seat-alert-pulse 2.4s ease-in-out infinite; }
  .live-seat.has-seat-alert :is(strong,.live-cell-status,.live-student-name,.seat-code,.live-cell-reason) { color:inherit!important; }
  .live-alert-reason { display:block; font-size:12px; line-height:1.4; font-weight:650; color:inherit; }
  .live-alert-legend { display:flex; align-items:center; gap:9px; font-size:15px; color:#a32d41; }
  .live-alert-copy { display:flex; flex-direction:column; gap:3px; line-height:1.35; }
  .live-alert-copy strong { font-size:18px; color:#b72845; font-weight:650; }
  .live-alert-copy small { font-size:13px; font-weight:500; color:#a44758; }
  .live-alert-key { margin:10px 0 0; color:#a32d41; font-size:14px; line-height:1.5; }
  .live-alert-key strong { font-weight:650; }
  @keyframes seat-alert-pulse { 0%,100% { filter:brightness(1.08); box-shadow:0 0 9px #ff315790; } 50% { filter:brightness(.76); box-shadow:0 0 3px #ff315735; } }
  .live-building-tabs { border-bottom:0; gap:7px; }
  .live-building-tabs button { border:1px solid #dce4ef; background:#fff; border-radius:8px; padding:8px 16px; color:#75869e; }
  .live-building-tabs button.active { background:#1e3a60; border-color:#1e3a60; color:#fff; }
  .live-building-section>header { padding:11px 0 10px; border-bottom:1px solid #dee6ef; margin-bottom:12px; }
  .live-building-section>header h2 { font-size:17px; }
  .live-room-card { border:1px solid #e3e9f1; border-radius:11px; padding:15px; box-shadow:0 2px 6px #172b5002; }
  .live-room-card:hover { border-color:#9db1cd; box-shadow:0 5px 13px #1d3a5e0b; background:#fcfdff; }
  .live-room-card-head h2 { color:#203b61; font-size:20px; letter-spacing:-.025em; }
  .live-room-card-head>span { color:#8a97a8; font-size:11px; }
  .live-room-card-stats { color:#7d8ba0; font-size:12px; }
  .live-room-card-stats strong { font-size:15px; color:#3e5473; }
  .live-room-card .live-seat { border-radius:2px; }
  .podium-marker { background:#e9eef5; color:#70839e; border:1px solid #d5dfeb; border-radius:5px; letter-spacing:.08em; }
  #live-room-detail .live-stat-panel { background:#f6f8fc; border:1px solid #e5ebf3; border-radius:11px; padding:18px 20px; margin-bottom:18px; }
  #live-room-detail .live-panel-heading { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
  #live-room-detail .live-panel-heading h3 { font-size:16px; }
  #live-room-detail .live-panel-heading>p { font-size:12px; margin-top:0; color:#8592a4; }
  #live-room-detail .live-detail-summary { background:transparent; border:0; margin:16px 0 0; padding:0; gap:12px; }
  #live-room-detail .live-detail-summary>.live-stat-item { border:0; border-right:1px solid #e0e6ee; padding:0 12px 0 0; }
  #live-room-detail .live-detail-summary>.live-stat-item:last-child { border:0; }
  #live-room-detail .live-stat-item>span { font-size:12px; color:#8090a4; }
  #live-room-detail .live-stat-number { gap:6px; margin-top:4px; }
  #live-room-detail .live-stat-number strong { font-size:27px; line-height:1.3; color:#294768; letter-spacing:-.035em; }
  #live-room-detail .live-stat-number em { font-size:11px; color:#98a4b4; }
  #live-room-detail .live-reconciliation { margin-top:15px; padding-top:10px; font-size:12px; border-color:#e2e8f0; }
  #live-room-detail .live-detail-legend { margin:18px 0; padding:0; border:0; }
  #live-room-detail .live-legend { margin:0; }
  #live-room-detail .live-detail-legend .live-legend { display:flex; flex-wrap:nowrap; gap:22px; }
  #live-room-detail .live-detail-legend .live-legend>span { font-size:18px; align-items:center; }
  .live-legend-descriptions { gap:10px 22px; }
  .live-legend-entry strong { font-size:13px; }
  .live-legend-entry p { font-size:12px; }
  .live-detail-plan { margin-top:17px; padding-top:15px; }
  .live-view-switch { display:flex; width:fit-content; gap:5px; padding:5px; margin:20px 0; border:1px solid #e1e7ef; border-radius:10px; background:#eef2f7; }
  .live-view-switch button { display:flex; align-items:center; justify-content:center; gap:8px; border:0; background:transparent; border-radius:7px; padding:10px 22px; color:#78889e; font-size:14px; font-weight:600; cursor:pointer; }
  .live-view-switch button.active,.live-view-switch button[aria-pressed=true] { background:white; color:#203d64; box-shadow:0 2px 6px #1a365915; }
  .live-view-switch svg { width:17px; height:17px; }
  .live-view-toolbar { display:flex; justify-content:space-between; align-items:center; gap:14px; }
  #live-room-detail .live-student-list table { min-width:0; width:100%; table-layout:fixed; }
  .live-student-list th:first-child { width:80px; }
  .live-student-list th:nth-child(2) { width:38%; }
  .live-student-list th:last-child { width:90px; }
  .live-list-student strong { font-size:16px; color:#263e61; }
  .live-list-student small { display:block; font-size:13px; margin-top:4px; }
  .live-person-status { --seat-lamp:#fff; --seat-edge:#a5b3c7; display:inline-flex; align-items:center; gap:8px; color:#3c5270; font-size:14px; line-height:1.5; }
  .live-person-status.state-face_only { --seat-lamp:var(--signal-blue); --seat-edge:#0974e0; }
  .live-person-status.state-present { --seat-lamp:var(--signal-green); --seat-edge:#00af70; }
  .live-person-status.state-grade_off { --seat-lamp:#252c34; --seat-edge:#252c34; }
  .live-person-status.state-leave { --seat-lamp:#a5afbd; --seat-edge:#a5afbd; }
  .live-person-status.has-seat-alert { --seat-lamp:var(--signal-red); --seat-edge:#e91640; }
  .live-status-light { flex:0 0 12px; width:12px; height:12px; border:1px solid var(--seat-edge); border-radius:50%; background:var(--seat-lamp); font-size:0; }
  .live-person-status:is(.state-face_only,.state-present) .live-status-light { box-shadow:0 0 7px color-mix(in srgb,var(--seat-lamp) 55%,transparent); }
  .live-person-status.has-seat-alert .live-status-light { animation:seat-alert-pulse 2.4s ease-in-out infinite; }
  .live-person-status+.live-alert-reason { color:#ad3046; margin-top:5px; }
  .live-student-panel { margin-top:20px; border:1px solid #e0e7f1; border-radius:12px; overflow:hidden; background:#fff; }
  .live-student-panel .card-head { padding:18px 20px; }
  .live-student-panel .card-body { padding:20px; }
  .live-student-panel h3 { color:#294362; }
  .live-student-panel dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 25px; }
  .live-student-panel dt { font-size:12px; color:#8291a5; margin-bottom:6px; }
  .live-student-panel dd { font-size:15px; color:#2c4262; margin:0; overflow-wrap:anywhere; }
  .live-student-toolbar { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid #e7edf4; background:#f7f9fc; font-size:13px; color:#7c8ca3; gap:12px; }
  .live-student-header { display:flex; align-items:center; flex-wrap:wrap; gap:14px 25px; padding:23px 24px; border-bottom:1px solid #e7edf4; }
  .live-student-header>div { flex:1; }
  .live-student-header h3 { font-size:23px; }
  .live-student-header p { font-size:13px; color:#8190a5; margin-top:6px; }
  .live-person-record { padding:22px 24px; border-bottom:1px solid #e7edf4; }
  .live-person-record:last-child { border:0; }
  .live-person-record>header { display:flex; align-items:center; flex-wrap:wrap; gap:12px 25px; margin-bottom:22px; }
  .live-person-record>header>div { flex:1; }
  .live-person-record h4 { font-size:16px; font-weight:650; color:#354d6e; margin:0; }
  .live-person-record>header p { font-size:13px; color:#8392a7; margin:5px 0 0; }
  .live-person-facts .wide { grid-column:1/-1; }
  .live-person-facts dd small { display:block; font-size:12px; color:#8695a9; margin-top:5px; }
  .live-person-record .context-help { margin:20px 0 0; }
  .live-person-actions { padding-top:20px; }
  #live-room-detail .table-wrap { border:1px solid #e5ebf3; border-radius:10px; }
  #live-room-detail .table-wrap td { padding:15px 18px; }
  #live-room-detail .live-seat-grid.detail { grid-template-columns:repeat(var(--live-columns),minmax(132px,1fr)); gap:20px 16px; padding:10px 3px 16px; }
  #live-room-detail .detail-seat { --seat-lamp:#fff; --seat-edge:#acbacd; border-radius:10px; min-height:126px; padding:13px 10px; gap:8px; box-shadow:0 2px 4px #1b355107; background:#fff!important; color:#2b4262!important; border:1px solid #dce4ef!important; animation:none!important; }
  #live-room-detail .detail-seat:hover { background:#f8fafd!important; border-color:#91a9c7!important; box-shadow:0 4px 12px #1b355112; }
  #live-room-detail .detail-seat.state-face_only { --seat-lamp:var(--signal-blue); --seat-edge:#0974e0; }
  #live-room-detail .detail-seat.state-present { --seat-lamp:var(--signal-green); --seat-edge:#00af70; }
  #live-room-detail .detail-seat.state-grade_off { --seat-lamp:#252c34; --seat-edge:#252c34; }
  #live-room-detail .detail-seat.state-leave { --seat-lamp:#a5afbd; --seat-edge:#a5afbd; }
  #live-room-detail .detail-seat.has-seat-alert { --seat-lamp:var(--signal-red); --seat-edge:#e91640; }
  #live-room-detail .detail-seat .live-cell-status { display:flex; align-items:center; justify-content:center; gap:6px; }
  #live-room-detail .detail-seat .live-cell-status::before { content:""; width:9px; height:9px; flex:0 0 9px; background:var(--seat-lamp); border:1px solid var(--seat-edge); border-radius:50%; }
  #live-room-detail .detail-seat:is(.state-face_only,.state-present) .live-cell-status::before { box-shadow:0 0 7px color-mix(in srgb,var(--seat-lamp) 55%,transparent); }
  #live-room-detail .detail-seat.has-seat-alert .live-cell-status::before { animation:seat-alert-pulse 2.4s ease-in-out infinite; }
  #live-room-detail .detail-seat .live-alert-reason { color:#aa3045!important; font-size:11px; }
  #live-room-detail .detail-seat.state-empty,#live-room-detail .detail-seat.state-disabled { background:#f4f6f9!important; border-style:dashed!important; color:#99a5b5!important; box-shadow:none; }
  #live-room-detail .detail-seat .live-cell-status { font-size:13px; }
  #live-room-detail .detail-seat .seat-code { font-size:11px; }
  #live-room-detail .detail-seat .live-student-name { font-size:14px; }
  #live-room-detail .room-diagram.hall-diagram>.podium-marker { border-radius:6px; height:32px; font-size:13px; border-color:#c2d0e1; background:#e8eff7; }
  .live-room-exams { border-radius:8px; background:#f5f8fc; border-left:3px solid #6682a8; }
  .live-room-exams strong,.live-room-exams span { font-size:13px; }

  /* Identity and account views. */
  .login { background:radial-gradient(ellipse at 100% 0%,#e5eafa,transparent 65%),#f5f6f8; min-height:100dvh; padding:22px; gap:0; grid-template-columns:minmax(420px,1.03fr) minmax(420px,1fr); }
  .login-story { position:relative; overflow:hidden; background:radial-gradient(ellipse at 100% 100%,#893f6066,transparent 60%),linear-gradient(150deg,#122541,#284d70 65%,#273557); border-radius:20px; padding:42px 46px; display:flex; flex-direction:column; justify-content:space-between; min-height:calc(100dvh - 44px); border:0; box-shadow:0 15px 40px #1e35591c; }
  .login-story::before { content:""; position:absolute; right:-110px; top:23%; width:500px; height:500px; border:1px solid #ffffff07; border-radius:50%; pointer-events:none; }
  .login-story::after { content:""; position:absolute; width:50px; height:5px; left:46px; top:0; background:#bf4055; border-radius:0 0 4px 4px; }
  .login-story .brand { position:relative; z-index:1; color:white; }
  .login-story .brand-seal { width:60px; height:60px; background:#fff; border:3px solid white; border-radius:50%; }
  .login-story .brand-title { font-size:19px; font-weight:650; letter-spacing:.07em; }
  .login-story .brand-subtitle { font-size:12px; color:#b7c8df; margin-top:3px; opacity:1; }
  .login-copy { position:relative; padding-top:44px; z-index:1; max-width:480px; margin:0; }
  .login-copy .eyebrow,.login-kicker { font-size:11px; font-weight:550; color:#b9a0aa; letter-spacing:.22em; margin-bottom:18px; }
  .login-copy h1 { font-size:42px; line-height:1.25; letter-spacing:-.025em; font-weight:650; max-width:430px; }
  .login-copy p { color:#aebfd6; font-size:15px; margin-top:16px; line-height:1.9; }
  .login-story footer { font-size:11px; letter-spacing:.09em; color:#8ca4c3; padding-top:25px; position:relative; z-index:1; }
  .login-form-side { padding:56px; display:flex; justify-content:center; align-items:center; background:transparent; }
  .login-form { width:100%; max-width:375px; padding:0; background:transparent; box-shadow:none; border:0; }
  .login-form h2 { font-size:27px; color:#20385a; font-weight:650; letter-spacing:-.025em; }
  .login-form>.muted { margin:12px 0 28px; font-size:14px; }
  #google-login { margin:24px 0; }
  .google-login-button { background:#fff!important; color:#284364!important; border:1px solid #d5deea!important; border-radius:10px; min-height:52px; font-size:15px; box-shadow:0 4px 13px #223e5907!important; }
  .google-login-button:hover { background:#f1f5fa!important; }
  .google-domain-help { color:#8794a6; font-size:12px; line-height:1.85; text-align:center; margin-top:15px; }
  .password-login { margin-top:30px; padding-top:16px; border-color:#dfe5ed; }
  .password-login>summary { font-size:13px; color:#8493a7; padding:8px 0; }
  .password-login[open]>summary { color:#486180; }
  .login-form .footnote { font-size:12px; line-height:1.8; color:#96a2b2; margin-top:25px; }
  .login-privacy-link { color:#758ca7; text-decoration:none; font-size:12px; }
  .login-privacy-link:hover { text-decoration:underline; }
  .login-visual { position:relative; max-width:350px; width:100%; margin:35px 0 15px; padding:18px 29px 25px; border:1px solid #ffffff0c; background:#ffffff03; border-radius:12px; transform:perspective(650px) rotateX(13deg) rotateZ(-6deg); }
  .login-podium { height:7px; width:65%; margin:0 auto 27px; border-radius:5px; background:#a1b5d33d; }
  .login-seat-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:11px; }
  .login-seat-grid i { display:block; width:100%; aspect-ratio:1; background:#6487b542; border:1px solid #afc9eb20; border-radius:5px; }
  .login-seat-grid i.soft { background:#a4bed16b; }
  .login-seat-grid i.accent { background:#ad3b526e; border-color:#bd526666; }
  .login-capabilities { display:flex; flex-wrap:wrap; gap:20px; margin-top:22px; color:#b5c5da; font-size:11px; }
  .login-capabilities>span { display:flex; align-items:center; gap:6px; }
  .login-capabilities svg { width:14px; height:14px; stroke-width:1.5; color:#819bbd; }
  #google-login>.context-help { margin:12px 0 5px; font-size:12px; }
  .google-redirect { background:#f7f9fc; border-color:#e2e8f1; border-radius:10px; }
  .google-config-status { font-size:13px; }
  .google-teacher-email { border-radius:10px; background:#edf3f9; }
  .google-access-panel[data-access=admins]>.card-head { background:linear-gradient(110deg,#f7edf1,#f0f4fa); }
  .daily-row { border-radius:11px; background:#fcfdfe; border-color:#e3eaf3; padding:17px; }
  .hall-current { border-radius:10px; background:#f5f8fc; border-color:#e0e7f0; }
  .hall-seat { border-radius:7px; border-color:#d9e3ef; background:#fafcfe; }
  .hall-schematic-scroll { border-radius:10px; border-color:#dce5ef; }
  .privacy-page { background:#f3f5f8; border:0; }
  .privacy-page main { max-width:820px; margin:44px auto; padding:38px 44px; border:1px solid #e4e9f0; border-top:4px solid var(--red); border-radius:16px; background:white; }
  .privacy-page header { display:flex; align-items:center; gap:16px; padding-bottom:25px; border-bottom:1px solid #e5ebf3; }
  .privacy-page header img { width:56px; height:56px; }
  .privacy-page h1 { font-size:28px; margin:28px 0 20px; }
  .privacy-page h2 { font-size:17px; margin:25px 0 10px; }
  .privacy-page p { font-size:15px; line-height:1.9; color:#617189; }
  .privacy-page footer { margin-top:28px; padding-top:20px; border-top:1px solid #e5ebf3; font-size:14px; }
}

@media screen and (min-width:1650px) {
  .workspace { margin-left:270px; }
  .topbar,main,.global-demo-note { padding-left:44px; padding-right:44px; }
}
@media screen and (min-width:801px) {
  dialog.wide:has(#live-room-detail) { width:min(1240px,calc(100vw - 48px)); max-width:calc(100vw - 48px); }
  .live-student-panel { max-width:940px; margin-left:auto; margin-right:auto; }
}
@media screen and (max-width:1100px) and (min-width:801px) {
  .sidebar { width:210px; inset:10px auto 10px 10px; }
  .workspace { margin-left:230px; }
  .sidebar .brand { padding:25px 14px; gap:8px; }
  .sidebar .brand-title { font-size:13px; }
  .sidebar .brand-seal { width:39px; height:39px; }
  .sidebar .brand-subtitle { font-size:9px; }
  .nav a { font-size:14px; padding:10px; }
  .topbar,main,.global-demo-note { padding-left:22px; padding-right:22px; }
  .page-head { align-items:flex-start; }
  .topbar .today { display:none; }
  .login { padding:16px; grid-template-columns:1fr 1fr; }
  .login-story { padding:34px 30px; min-height:calc(100dvh - 32px); }
  .login-form-side { padding:35px; }
  .login-copy h1 { font-size:34px; }
}
@media screen and (max-width:800px) {
  :root { font-size:16px; }
  .sidebar { position:relative; inset:auto; width:100%; border-radius:0; padding-bottom:10px; overflow:visible; box-shadow:none; }
  .sidebar::before { left:22px; }
  .sidebar .brand { padding:19px 20px 14px; gap:11px; }
  .sidebar .brand-seal { width:40px; height:40px; }
  .sidebar .brand-title { font-size:15px; }
  .sidebar .brand-subtitle { font-size:10px; max-width:none; }
  .sidebar .nav-label,.sidebar-bottom { display:none; }
  .nav { display:flex; flex-direction:row; padding:0 14px 4px; gap:5px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#56708f transparent; }
  .nav a { flex:0 0 auto; min-height:40px; padding:9px 11px; font-size:13px; gap:7px; border-radius:7px; }
  .nav a.active::before { display:none; }
  .nav svg { width:16px; height:16px; }
  .workspace { margin:0; }
  .topbar { margin:12px 17px; padding:13px 14px; min-height:59px; gap:10px; border-radius:12px; }
  .topbar-context { display:none; }
  .user-area { width:100%; gap:9px; flex-wrap:wrap; }
  .user-info { flex:1; min-width:0; }
  .user-info strong { display:block; font-size:12px; overflow-wrap:anywhere; }
  .user-info span { font-size:10px; overflow-wrap:anywhere; }
  .avatar { width:30px; height:30px; border-radius:9px; font-size:12px; }
  .user-area .btn { padding:5px 7px; min-height:32px; font-size:11px; }
  .user-area:has(.role-switch) { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 8px; align-items:center; }
  .user-area:has(.role-switch) .avatar { display:none; }
  .user-area:has(.role-switch) .user-info { grid-column:1; grid-row:1; }
  .user-area:has(.role-switch) .account-actions { grid-column:1; grid-row:2; justify-content:flex-start; gap:0; }
  .user-area .role-switch { grid-column:2; grid-row:1 / span 2; width:auto; padding:3px; gap:3px; align-self:start; }
  .user-area .role-switch .btn { flex:0 0 auto; min-height:44px; padding:6px 8px; font-size:13px; gap:4px; }
  .role-switch .btn svg { width:16px; height:16px; }
  main,.live-monitor { padding:23px 17px 45px; }
  .global-demo-note { padding:0 17px; }
  .global-demo-note .note { font-size:11px; padding:7px 10px; }
  .page-head,.live-monitor .page-head { flex-direction:column; align-items:stretch; gap:16px; margin-bottom:20px; }
  h1 { font-size:27px; }
  .page-head .eyebrow,.page-eyebrow { font-size:9px; margin-bottom:8px; }
  .page-head p { font-size:13px; margin-top:8px; }
  .page-head .actions { justify-content:flex-start; gap:7px; }
  .page-head .btn { min-height:35px; padding:7px 11px; font-size:12px; }
  .card { border-radius:12px; margin-bottom:16px; }
  .card-body,.card-head { padding:17px; }
  .card-head { flex-wrap:wrap; gap:12px; }
  .card-foot { padding:12px 17px; }
  .filters { gap:13px; }
  .filters .field { min-width:130px; }
  #dashboard-filter { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #dashboard-filter .field:has(select[name=date]) { grid-column:1/-1; }
  .field>span { font-size:12px; }
  .btn { min-height:42px; font-size:14px; }
  input,select,textarea { font-size:16px; min-height:44px; }
  .form-grid { gap:14px; }
  .tabs { padding:4px; gap:3px; flex-wrap:nowrap; overflow:auto; border-radius:9px; }
  .tabs button { flex:0 0 auto; font-size:13px; padding:8px 11px; }
  .stats-grid { gap:10px; }
  .stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
  .stats>.stat { padding:13px 11px; min-height:112px; border-right:1px solid #e1e7f0; }
  .stats>.stat:nth-child(2n) { border-right:1px solid #e1e7f0; }
  .stat-label { font-size:11px; }
  .stat-number { font-size:26px; margin-top:7px; }
  .stat-number>span { font-size:9px; margin-left:4px; }
  .stat-footer { font-size:9px; }
  .section-tabs { flex-wrap:nowrap; overflow:auto; gap:4px; }
  .section-tabs button { flex:0 0 auto; font-size:12px; padding:9px 11px; }
  .stat-card { padding:15px; }
  .stat-card .number { font-size:28px; }
  .stat-card .label { font-size:12px; }
  .roll-header { padding:17px; }
  .roll-header h2 { font-size:19px; }
  .roll-toolbar { padding:13px 17px; }
  .roll-footer { padding:16px 17px; }
  .roll-footer .actions { flex-wrap:wrap; }
  .live-monitor #live-query { padding:16px; }
  .live-summary { border-radius:10px; padding:0; margin:12px 0 16px; }
  .live-summary.five-category-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .live-summary>div { padding:12px; border-bottom:1px solid #edf0f5; }
  .live-summary>div:nth-child(3) { border-right:0; }
  .live-summary>div:nth-last-child(-n+2) { border-bottom:0; }
  .live-summary strong { font-size:24px; }
  .live-summary span { font-size:11px; white-space:normal; }
  .live-room-card { padding:12px; border-radius:9px; }
  .live-room-card-head h2 { font-size:18px; }
  .live-room-card-head>span { font-size:10px; }
  .live-room-card-stats { font-size:11px; }
  .live-building-tabs button { font-size:13px; padding:7px 13px; }
  #live-room-detail .live-stat-panel { padding:15px; }
  #live-room-detail .live-panel-heading { flex-direction:column; gap:4px; }
  #live-room-detail .live-detail-summary.five-category-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 10px; }
  #live-room-detail .live-detail-summary>.live-stat-item { padding-right:5px; }
  #live-room-detail .live-stat-number strong { font-size:25px; }
  #live-room-detail .live-stat-item>span { font-size:11px; }
  .live-detail-legend .live-legend { gap:18px; }
  #live-room-detail .live-detail-legend .live-legend>span { font-size:18px; }
  .live-view-switch { width:100%; margin:17px 0; }
  .live-view-switch button { flex:1; padding:9px 12px; }
  .live-view-toolbar { display:block; margin-bottom:15px; }
  .live-view-toolbar .small { font-size:12px; }
  .live-student-panel dl { grid-template-columns:1fr; }
  .live-student-toolbar { padding:12px; font-size:12px; }
  .live-student-header,.live-person-record { padding:18px 15px; }
  .live-student-header { display:block; }
  .live-student-header>.live-person-status { margin-top:15px; }
  .live-student-header h3 { font-size:22px; }
  .live-person-record>header { display:block; }
  .live-person-record>header>.live-person-status { margin-top:13px; }
  #live-room-detail .table-wrap td { padding:12px 10px; }
  #live-room-detail .live-student-list :is(table,tbody) { display:block; min-width:0; }
  #live-room-detail .live-student-list thead { display:none; }
  #live-room-detail .live-student-list tr { display:grid; grid-template-columns:36px minmax(0,1fr) 48px; gap:5px 10px; padding:16px 10px; border-bottom:1px solid #e7edf4; }
  #live-room-detail .live-student-list tr:last-child { border:0; }
  #live-room-detail .live-student-list td { border:0; padding:0; min-width:0; white-space:normal; }
  #live-room-detail .live-student-list td:first-child { grid-column:1; grid-row:1/3; font-size:11px; color:#8797ad; align-self:center; }
  #live-room-detail .live-student-list td:nth-child(2) { grid-column:2; grid-row:1; }
  #live-room-detail .live-student-list td:nth-child(3) { grid-column:2; grid-row:2; }
  #live-room-detail .live-student-list td:last-child { grid-column:3; grid-row:1/3; align-self:center; }
  #live-room-detail .live-student-list .btn { padding:6px 7px; font-size:12px; }
  .live-student-list .live-person-status { font-size:12px; }
  .live-student-list .live-list-student small { display:inline; margin-left:7px; font-size:12px; }
  .live-student-list .live-alert-reason { font-size:11px; }
  .live-legend>span,.live-monitor .live-legend>span { font-size:18px; }
  .live-summary>div { flex-direction:column; align-items:flex-start; gap:5px; }
  .live-legend-entry strong { font-size:12px; }
  .modal-head { padding:18px; }
  .modal-head h2 { font-size:19px; }
  .modal-body { padding:18px; }
  .modal-foot { padding:14px 18px; }
  dialog { border-radius:14px; max-height:92dvh; }
  .login { display:block; padding:0; min-height:100dvh; background:#f7f8fa; }
  .login-story { min-height:0; border-radius:0 0 25px 25px; padding:30px 28px 33px; }
  .login-story::after { left:30px; }
  .login-story .brand-seal { width:46px; height:46px; }
  .login-story .brand-title { font-size:17px; }
  .login-story .brand-subtitle { font-size:10px; max-width:none; }
  .login-copy { padding-top:30px; }
  .login-copy .eyebrow,.login-kicker { font-size:9px; margin-bottom:10px; }
  .login-copy h1 { font-size:31px; }
  .login-copy p { font-size:13px; margin-top:10px; }
  .login-copy h1 br { display:none; }
  .login-capabilities { margin-top:17px; gap:19px; font-size:10px; }
  .login-visual,.login-story footer { display:none; }
  .login-form-side { padding:33px 28px 38px; }
  .login-form { max-width:460px; }
  .login-form h2 { font-size:23px; }
  .login-form>.muted { font-size:13px; margin:9px 0 22px; }
  #google-login { margin:20px 0; }
  .login-form .footnote { font-size:11px; }
  .privacy-page main { margin:20px 14px; padding:25px 22px; }
  .privacy-page h1 { font-size:24px; }
  .privacy-page header strong { font-size:14px; }
  .privacy-page header small { font-size:10px; }
}
@media screen and (max-width:600px) {
  .filters .field:has(input:is([type=date],[type=time],[type=datetime-local])) { min-width:0; flex-basis:100%; }
  #room-query { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
  #room-query .field { min-width:0; width:100%; }
  #room-query>.btn { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; }
  .live-seat.has-seat-alert { animation:none!important; }
  #live-room-detail .detail-seat.has-seat-alert .live-cell-status::before { animation:none!important; }
  .live-person-status.has-seat-alert .live-status-light { animation:none!important; }
}

/* Mobile account access beside the school identity. Desktop controls stay in the topbar. */
.mobile-account { display:none; }
@media screen and (max-width:760px) {
  .sidebar { overflow:visible; z-index:30; }
  .sidebar-brand-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 17px 9px; position:relative; }
  .sidebar-brand-row .brand { padding:0; margin:0; flex:1; min-width:0; gap:9px; }
  .sidebar-brand-row .brand>div { min-width:0; }
  .sidebar-brand-row .brand-seal { width:38px; height:38px; flex:0 0 38px; }
  .sidebar-brand-row .brand-title { font-size:15px; line-height:1.35; white-space:normal; }
  .sidebar-brand-row .brand-subtitle { font-size:10px; line-height:1.4; max-width:180px; white-space:normal; }
  .workspace>.topbar { display:none; }
  .mobile-account { display:block; position:static; flex:0 0 104px; min-width:0; }
  .mobile-account-trigger { width:100%; min-height:48px; padding:7px 9px; border:1px solid #ffffff2b; border-radius:10px; background:#ffffff0e; color:#fff; cursor:pointer; text-align:right; font:inherit; }
  .mobile-account-trigger strong { display:block; font-size:14px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-account-trigger>span { display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:3px; color:#c4d5e8; font-size:12px; }
  .mobile-account-menu { position:absolute; z-index:100; top:calc(100% - 3px); right:14px; width:min(292px,calc(100vw - 28px)); padding:10px; border:1px solid #d8e1ee; border-radius:13px; background:#fff; color:#243954; box-shadow:0 18px 45px #12244030; }
  .mobile-account-menu[hidden] { display:none; }
  .mobile-account-menu .mobile-account-identity { padding:8px 9px 12px; border-bottom:1px solid #e7edf5; margin-bottom:8px; overflow-wrap:anywhere; }
  .mobile-account-identity strong { display:block; font-size:16px; }
  .mobile-account-identity small { display:block; font-size:12px; color:#70829c; margin-top:5px; }
  .mobile-account-menu>.btn { width:100%; min-height:44px; margin-top:4px; justify-content:flex-start; border:0; background:transparent; font-size:15px; }
  .mobile-account-menu>.btn:hover { background:#f0f4fa; }
  .mobile-account-menu .role-switch { width:100%; margin:9px 0; }
  .mobile-account-menu .role-switch .btn { min-height:44px; }
}
@media screen and (max-width:350px) {
  .sidebar-brand-row { padding-left:12px; padding-right:12px; gap:8px; }
  .mobile-account { flex-basis:88px; }
  .sidebar-brand-row .brand-seal { width:32px; height:32px; flex-basis:32px; }
  .sidebar-brand-row .brand { gap:7px; }
  .sidebar-brand-row .brand-title { font-size:14px; }
  .sidebar-brand-row .brand-subtitle { font-size:10px; }
}
@media screen and (max-width:760px) {
  .mobile-account-menu .role-switch { display:flex; gap:4px; padding:4px; border-radius:10px; background:#e8eef6; }
  .mobile-account-menu .role-switch .btn { flex:1; min-width:0; padding:8px 6px; font-size:14px; }
  .mobile-account-menu .role-switch .btn.active { background:linear-gradient(135deg,#223c60,#365d82); color:white; border-color:transparent; }
  .mobile-account-menu .role-switch .btn svg { width:16px; height:16px; flex:0 0 16px; }
}

/* Visible setup sequence and system page navigation. */
@media screen {
  .setup-flow { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 16px; padding:14px 16px; margin:0 0 18px; border:1px solid var(--role-line,#d9e3ef); border-radius:12px; background:#ffffffb8; }
  .setup-flow-title { flex:none; color:var(--role-ink,#263b60); font-size:13px; font-weight:800; white-space:nowrap; }
  .setup-flow-steps { display:flex; flex:1 1 640px; flex-wrap:wrap; gap:8px 10px; list-style:none; margin:0; padding:0; }
  .setup-flow-steps li { display:flex; align-items:center; gap:10px; color:var(--role-ink,#263b60); font-size:14px; font-weight:650; line-height:1.5; white-space:nowrap; }
  .setup-flow-arrow { color:var(--role-main,#344b84); font-size:18px; font-weight:800; line-height:1; }
}
@media screen and (max-width:600px) {
  .setup-flow { padding:12px; gap:8px; }
  .setup-flow-title { flex-basis:100%; }
  .setup-flow-steps { gap:7px 8px; }
  .setup-flow-steps li { gap:8px; font-size:13px; }
}

@media screen {
  .system-settings-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:6px; margin:0 0 20px; border:1px solid var(--role-line,#d9e3ef); border-radius:14px; background:var(--role-soft,#e7edf5); }
  .system-settings-nav a { display:flex; justify-content:center; align-items:center; gap:9px; min-width:0; min-height:48px; padding:10px 12px; border-radius:9px; color:var(--role-muted,#657c98); font-size:16px; font-weight:750; text-decoration:none; }
  .system-settings-nav a svg { flex:none; width:21px; height:21px; stroke-width:1.8; }
  .system-settings-nav a:hover { background:#ffffffa6; color:var(--role-ink,#263b60); }
  .system-settings-nav a.active { background:var(--role-gradient,linear-gradient(120deg,#213d61,#3c5b7a)); color:#fff; box-shadow:0 3px 9px #20355218; }
  .system-settings-nav a:focus-visible { outline:3px solid var(--role-main,#344b84); outline-offset:2px; }
  #system-content { min-width:0; }
  #system-content .card:last-child { margin-bottom:0; }
}
@media screen and (max-width:600px) {
  .system-settings-nav { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:16px; }
  .system-settings-nav a { min-height:46px; padding:9px 6px; font-size:15px; }
  #system-content .card-head { flex-wrap:wrap; gap:12px; }
}