:root{color-scheme:light;--bg:#fafbfc;--ink:#19222b;--muted:#66747e;--line:#dae0e5;--red:#a62935;--green:#23715f;--gold:#b18438;--surface:#fff}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:var(--ink);background:var(--bg);letter-spacing:0}
button,input,select{font:inherit}button,a,input,select{outline-offset:4px}
button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}
a{color:inherit;text-decoration:none}
.topbar{min-height:92px;margin:0 4.5%;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:14px;min-width:0}.brand img{object-fit:contain}.brand span{display:grid;gap:5px}.brand strong{font-size:21px;font-weight:700}.brand small{font-size:12px;color:var(--muted);max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toolbar{display:flex;align-items:center;gap:9px}.grade-control{display:flex;align-items:center;gap:10px;margin-right:14px;font-size:14px;color:var(--muted)}
select{height:42px;border:1px solid var(--line);border-radius:5px;background:var(--surface);padding:0 32px 0 12px;color:var(--ink);max-width:200px}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;background:none;border:1px solid transparent;border-radius:5px;color:var(--muted);flex-shrink:0}
.icon-button:hover{background:#eef1f4;color:var(--ink);border-color:var(--line)}.icon-button svg{width:21px;height:21px}
.system-line{display:flex;justify-content:space-between;gap:15px;margin:18px 4.5% 0;font-size:12px;color:var(--muted);min-height:18px}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:7px}
.clock-screen{position:relative;isolation:isolate;min-height:calc(100svh - 199px);display:flex;flex-direction:column;justify-content:space-between;padding:22px 4.5% 0;overflow:hidden}
.watermark{position:absolute;z-index:-1;pointer-events:none;opacity:.065;width:min(620px,80%);height:auto;left:50%;top:42%;transform:translate(-50%,-50%);object-fit:contain}
.clock-content{text-align:center;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 0 28px;min-width:0}
.phase{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--muted);min-height:26px}
.phase::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
h1{font-size:46px;line-height:1.3;margin:12px 0 16px;font-weight:600;max-width:100%;overflow-wrap:anywhere}
.countdown-label{font-size:16px;color:var(--muted);margin:0 0 5px;line-height:1.6}
.countdown{font-family:"Bahnschrift","Arial",sans-serif;font-variant-numeric:tabular-nums;font-size:160px;font-weight:600;line-height:1.15;letter-spacing:0;white-space:nowrap;min-height:184px}
.announcement{font-size:19px;line-height:1.6;color:var(--red);margin:20px 0 0;min-height:31px;font-weight:500;max-width:100%;overflow-wrap:anywhere}
.exam-details{display:grid;grid-template-columns:1fr 1.4fr 1fr 1fr;border-top:1px solid var(--line);padding:26px 0 25px;gap:18px;min-width:0}
.exam-details>div{padding:0 18px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px;min-width:0}.exam-details>div:first-child{padding-left:0}.exam-details>div:last-child{border:0}
.exam-details span{color:var(--muted);font-size:13px}.exam-details strong{font-weight:600;font-size:25px;line-height:1.4;overflow-wrap:anywhere}.exam-details small{font-size:12px;color:var(--muted)}
.footer{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);margin:0 4.5%;padding:15px 0;font-size:12px;color:var(--muted);min-height:53px}
body[data-phase="active"] .phase{color:var(--green)}
body[data-phase="waiting"] .phase{color:#387082}
body[data-phase="ended"] .phase,body[data-urgent="true"] .countdown{color:var(--red)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line);border-radius:5px;min-height:43px;padding:11px 19px;font-size:14px;font-weight:500;white-space:normal;text-align:center}
.button svg{width:18px;height:18px;flex-shrink:0}.primary{background:var(--red);color:white;border-color:var(--red)}.primary:hover{background:#90212c}.secondary{background:white;color:var(--ink)}.secondary:hover{background:#f0f3f5}
.wide{width:100%}.empty-actions{display:flex;justify-content:center;gap:12px;margin-top:18px}
.dialog{border:1px solid var(--line);border-radius:8px;padding:28px;width:min(480px,calc(100% - 32px));color:var(--ink);background:white;box-shadow:0 20px 70px #172b3f26;max-height:85svh;overflow:auto}
.dialog::backdrop{background:#15233255}.dialog h2{font-size:23px;font-weight:600;margin:8px 0 22px}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.dialog-heading h2{margin:0}
.grade-dialog{text-align:center}.grade-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 22px}
.grade-choice{position:relative;display:flex;align-items:center;justify-content:center;padding:16px 8px;min-height:60px;border:1px solid var(--line);border-radius:5px;font-size:16px;cursor:pointer;overflow-wrap:anywhere}
.grade-choice:has(input:checked){color:var(--red);background:#fff5f6;border-color:var(--red)}.grade-choice input{position:absolute;opacity:0;width:1px;height:1px}.grade-choice:has(input:focus-visible){outline:2px solid var(--red);outline-offset:2px}
.form-error{color:var(--red);font-size:13px;line-height:1.65;min-height:21px;overflow-wrap:anywhere}
.schedule-dialog{width:min(760px,calc(100% - 32px))}
.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}th{font-weight:500;font-size:12px;color:var(--muted);background:#f6f8fa}th,td{padding:13px 14px;border-bottom:1px solid var(--line);white-space:nowrap}td.active{color:var(--green);font-weight:600}
.sound-options{display:grid;gap:14px}.switch-row,.volume-row{display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:15px;padding:8px 0}.switch-row input{width:20px;height:20px;accent-color:var(--green)}.volume-row input{width:65%;accent-color:var(--red)}
.toast{position:fixed;z-index:100;bottom:25px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);padding:13px 20px;border-radius:5px;background:#243139;color:white;font-size:14px;box-shadow:0 4px 20px #19222b22}
.demo-banner{background:#a62935;color:#fff;text-align:center;padding:8px 12px;font-size:13px;min-height:36px}.demo-banner button{background:transparent;color:white;border:0;text-decoration:underline;margin-left:16px;font-size:12px}
.demo-controls{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;max-width:calc(100% - 20px);padding:7px 10px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 3px 15px #19222b15;z-index:20;overflow:auto;white-space:nowrap;font-size:12px}
.demo-controls>span{color:var(--red);margin:0 5px}.demo-controls button{padding:8px 10px;border:0;border-radius:3px;background:#f2f4f6;color:var(--ink);font-size:12px}.demo-controls button:hover{background:#e7edf0}
body.demo .footer{padding-bottom:65px}
body.demo .toast{bottom:76px}
.admin-main{max-width:1200px;margin:36px auto;padding:0 28px}.admin-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding-bottom:22px}.admin-heading h1{font-size:27px;margin:0}.admin-heading p{font-size:13px;color:var(--muted);margin:10px 0 0}
.admin-actions{display:flex;gap:9px;flex-wrap:wrap}.admin-fields{display:grid;grid-template-columns:2fr 1fr;gap:22px;margin:24px 0}.field{display:grid;gap:8px;font-size:13px;color:var(--muted)}.field input{height:44px;border:1px solid var(--line);border-radius:5px;padding:0 12px;background:white;color:var(--ink);min-width:0}
.import-strip{display:flex;align-items:center;gap:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}.import-strip span{color:var(--muted);font-size:13px}.file-input{position:absolute;width:1px;height:1px;opacity:0}
.preview-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:28px 0 14px}.preview-heading h2{font-size:18px;margin:0}.preview-heading span{font-size:12px;color:var(--muted)}
.admin-status{font-size:13px;color:var(--muted);margin:20px 0;line-height:1.8;overflow-wrap:anywhere}.admin-status.error{color:var(--red)}.admin-status.success{color:var(--green)}.admin-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:20px;margin-top:25px}
.preview-empty{text-align:center;color:var(--muted);padding:50px!important;font-size:14px}
@media(min-width:1700px){.countdown{font-size:210px;min-height:242px}h1{font-size:58px}.countdown-label{font-size:21px}.announcement{font-size:25px}.exam-details strong{font-size:31px}.exam-details span{font-size:17px}.phase{font-size:19px}.watermark{width:750px}.topbar{min-height:105px}}
@media(max-width:1050px){.countdown{font-size:126px;min-height:145px}.exam-details strong{font-size:21px}.brand small{max-width:230px}.topbar{gap:15px}.toolbar{gap:3px}.grade-control{margin-right:3px}}
@media(max-width:700px){.topbar{min-height:120px;flex-wrap:wrap;padding:14px 0;gap:12px}.brand strong{font-size:17px}.brand img{width:36px;height:36px}.brand small{max-width:260px}.toolbar{width:100%;justify-content:flex-end}.grade-control{margin-right:auto}.system-line{font-size:10px;flex-wrap:wrap;margin-top:12px}.clock-screen{min-height:calc(100svh - 217px);padding-top:28px}.countdown{font-size:74px;min-height:86px}h1{font-size:33px}.countdown-label{font-size:14px}.announcement{font-size:15px;margin-top:19px;min-height:48px}.exam-details{grid-template-columns:1fr 1fr;gap:20px 12px;padding:20px 0}.exam-details>div{padding:0 12px}.exam-details>div:nth-child(odd){padding-left:0}.exam-details>div:nth-child(even){border:0}.exam-details strong{font-size:18px}.exam-details span{font-size:11px}.footer{font-size:10px;gap:10px}.clock-content{padding-bottom:20px}.phase{font-size:12px}.dialog{padding:23px}.admin-main{padding:0 18px;margin-top:26px}.admin-heading{align-items:flex-start;flex-direction:column}.admin-fields{grid-template-columns:1fr}.import-strip{align-items:flex-start;flex-direction:column}.admin-footer{align-items:flex-start;flex-direction:column}.demo-controls{font-size:10px}.demo-controls button{font-size:10px;padding:8px 7px}.demo-controls>span{display:none}}
@media(max-width:370px){.countdown{font-size:61px;min-height:71px}.grade-control select{max-width:130px}.icon-button{width:35px;height:38px}.brand small{max-width:220px}}
@media(max-height:650px) and (min-width:701px){.topbar{min-height:68px}.clock-screen{min-height:calc(100svh - 158px);padding-top:10px}.countdown{font-size:110px;min-height:126px}h1{font-size:32px;margin:8px 0}.announcement{margin:8px 0 0;font-size:16px}.clock-content{padding-bottom:15px}.exam-details{padding:14px 0}.exam-details strong{font-size:20px}.watermark{width:420px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Classroom projection: subdued charcoal-blue ground, large readable exam information. */
:root{color-scheme:dark;--bg:#171d25;--ink:#e0e5eb;--muted:#adb8c5;--line:#3b4655;--red:#dfa5a5;--green:#9ac5b7;--gold:#c1ab80;--surface:#222b37}
.brand strong{color:#d2dbe7}
.icon-button:hover{background:#2a3441}
.watermark{opacity:.085;width:min(620px,76%);top:40%}
.clock-screen{padding-top:14px}
.clock-content{padding-bottom:22px}
.phase{font-size:20px}
h1{font-size:48px;margin:10px 0 12px}
.countdown-label{font-size:23px;color:#bbc6d2}
.countdown{font-size:156px;min-height:180px;color:#e0e5eb}
.announcement{font-size:29px;margin-top:12px;min-height:47px;color:#d6c09d}
.exam-details{grid-template-columns:.85fr 1.6fr 1.2fr 1.2fr;padding:25px 0 24px;gap:12px}
.exam-details>div{padding:0 15px;gap:12px}
.exam-details span{font-size:24px;color:#b9c4d1}
.exam-details strong{font-size:36px;font-weight:600;line-height:1.35;color:#e0e5eb}
.exam-details small{font-size:20px;color:#b1bccb}
.footer{font-size:19px;padding:17px 0;min-height:64px}
.system-line{font-size:14px}
body[data-phase="waiting"] .phase{color:#a2bbd1}
.primary{background:#455a77;color:#eef1f6;border-color:#536b8a}.primary:hover{background:#506686}
.secondary{background:#232d39;color:var(--ink)}.secondary:hover{background:#2f3c4b}
.dialog{background:#202935;box-shadow:0 20px 70px #0008}.dialog::backdrop{background:#0a0e14ad}
.grade-choice:has(input:checked){color:#e0e5eb;background:#374963;border-color:#8ba4c4}
th{background:#26313f}
.toast{background:#344357;color:#e8ecf1}
.demo-controls{background:#202935;box-shadow:0 3px 15px #0004}
.demo-controls button{background:#303c4b;color:var(--ink)}.demo-controls button:hover{background:#405069}
.demo-banner{background:#633039;color:#e7d6d8}
.field input{background:#222b37;color:var(--ink)}
.admin-heading h1{font-size:27px}
.editor-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.editor-actions .admin-status{margin:0}
.editor-table th,.editor-table td{padding:9px 6px}
.editor-table input{width:100%;min-width:100px;height:38px;border:1px solid var(--line);border-radius:4px;background:#222b37;color:var(--ink);padding:5px 8px;font-size:14px}
.editor-table input[type="number"]{min-width:76px;width:80px}
.editor-table input[type="date"]{min-width:148px}
.editor-table input[type="time"]{min-width:132px}
.editor-table input:focus{outline:2px solid #90a6c0;border-color:#90a6c0}
.editor-table input:disabled{opacity:.65}
@media(min-width:1700px){
 .phase{font-size:26px}h1{font-size:62px}.countdown-label{font-size:30px}
 .countdown{font-size:208px;min-height:239px}.announcement{font-size:38px;min-height:61px}
 .exam-details{padding:34px 0 30px}.exam-details span{font-size:30px}
 .exam-details strong{font-size:48px}.exam-details small{font-size:27px}
 .footer{font-size:25px;min-height:75px}.watermark{width:740px}
}
@media(max-width:1100px) and (min-width:701px){
 .exam-details{grid-template-columns:.8fr 1.65fr 1.15fr 1.15fr}
 .exam-details strong{font-size:27px}.exam-details span{font-size:22px}.exam-details small{font-size:18px}
 .announcement{font-size:25px}.countdown{font-size:124px;min-height:143px}.countdown-label{font-size:21px}
 .footer{font-size:16px}
}
@media(max-width:700px){
 .clock-screen{padding-top:24px}.phase{font-size:16px}h1{font-size:34px}
 .countdown-label{font-size:18px}.countdown{font-size:74px;min-height:86px}
 .announcement{font-size:20px;min-height:64px}.exam-details{grid-template-columns:1fr 1fr;gap:20px 10px;padding:21px 0}
 .exam-details>div{padding:0 9px;gap:10px}.exam-details>div:nth-child(odd){padding-left:0}
 .exam-details strong{font-size:24px}.exam-details span{font-size:18px}.exam-details small{font-size:15px}
 .footer{font-size:12px;min-height:60px}.system-line{font-size:11px}
 .admin-heading h1{font-size:27px}
}
@media(max-width:370px){
 .countdown{font-size:61px;min-height:71px}.exam-details strong{font-size:21px}
 .exam-details span{font-size:17px}.exam-details small{font-size:13px}.announcement{font-size:18px}
}
@media(max-height:650px) and (min-width:701px){
 .countdown{font-size:100px;min-height:115px}h1{font-size:32px}
 .phase{font-size:17px}.countdown-label{font-size:19px}.announcement{font-size:23px;min-height:37px;margin-top:6px}
 .exam-details{padding:15px 0}.exam-details span{font-size:21px}.exam-details strong{font-size:28px}
 .exam-details small{font-size:17px}.footer{font-size:15px;padding:12px 0;min-height:47px}
}
/* The classroom has no header: six quiet keys on the left, one sound control. */
.classroom{--rail-space:132px;--edge-space:36px}
.grade-rail{position:fixed;inset:0 auto 0 22px;width:86px;display:flex;flex-direction:column;justify-content:center;gap:12px;z-index:5}
.grade-key{width:100%;min-height:62px;border:1px solid #364352;background:#1d2530;color:#aebdce;border-radius:6px;font-size:25px;font-weight:600}
.grade-key:hover{background:#293545;color:#e0e5eb}
.grade-key[aria-pressed="true"]{background:#36485e;color:#e8edf4;border-color:#90a6c0;box-shadow:inset 3px 0 #aec1d7}
.grade-key:focus-visible{outline:2px solid #aec1d7;outline-offset:4px}
.classroom-sound{position:fixed;top:20px;right:26px;width:48px;height:48px;z-index:10;color:#bec9d5;background:#202935}
.classroom-sound svg{width:26px;height:26px}
.classroom .clock-screen{margin-left:var(--rail-space);min-height:calc(100svh - 111px);padding:38px var(--edge-space) 0}
.classroom .clock-content{padding:16px 0 30px}
.classroom .system-line{margin:12px var(--edge-space) 0 var(--rail-space);padding-left:var(--edge-space);font-size:12px}
.classroom .footer{margin:0 var(--edge-space) 0 calc(var(--rail-space) + var(--edge-space));font-size:16px;min-height:64px}
.classroom .exam-details{grid-template-columns:.85fr 1.6fr 1.2fr 1.2fr}
.classroom .exam-details strong{font-size:clamp(23px,2.6vw,48px)}
.classroom .exam-details span{font-size:clamp(20px,1.65vw,30px)}
.classroom .countdown{font-size:clamp(90px,13vw,240px);min-height:0}
.classroom .watermark{width:min(700px,76%)}
.classroom .phase{font-size:clamp(20px,1.6vw,30px)}
.classroom .announcement{font-size:clamp(24px,2.1vw,40px)}
.audio-help{font-size:14px;line-height:1.8;color:var(--muted);margin:0}
.volume-row{flex-wrap:wrap;gap:10px}
.volume-row output{font-variant-numeric:tabular-nums;color:var(--ink)}
.volume-row input{flex:1;min-width:130px;max-width:65%}
.volume-warning{position:fixed;inset:82px 26px auto auto;margin:0;width:min(380px,calc(100vw - 32px));z-index:15;padding:22px;box-shadow:0 12px 35px #0007}
.volume-warning .dialog-heading h2{font-size:20px}
.volume-warning p{font-size:15px;line-height:1.8}
.volume-warning .button{margin-top:18px}
.invigilators-strip{display:flex;align-items:center;gap:38px;border-top:1px solid var(--line);padding:12px 0;min-width:0}
.invigilators-label{font-size:clamp(20px,1.65vw,30px);color:#b9c4d1;flex-shrink:0}
.invigilators-list{display:flex;flex-wrap:wrap;align-items:center;gap:14px 40px;min-width:0;font-size:clamp(26px,2.6vw,48px);font-weight:600;line-height:1.35}
.invigilator-name{display:inline-flex;justify-content:space-between;width:calc(var(--name-length,3) * 1em);flex-shrink:0;white-space:nowrap}
.invigilators-empty{color:var(--muted);font-weight:500}
.classroom .clock-content{padding:0 0 12px}
.classroom .exam-details{padding:14px 0}
@media(min-width:701px){
 .classroom .clock-screen{height:calc(100svh - 111px);min-height:0}
 .classroom .clock-content{min-height:0}
 .classroom .countdown{font-size:clamp(90px,min(12vw,21vh),240px)}
 .classroom h1{font-size:clamp(32px,3.2vw,62px);margin:8px 0 10px}
 .classroom .countdown-label{font-size:21px}
 .classroom .announcement{margin-top:8px}
}
@media(min-width:1700px){
 .classroom{--rail-space:170px;--edge-space:50px}
 .grade-rail{left:30px;width:105px;gap:16px}.grade-key{font-size:30px;min-height:78px}
 .classroom .clock-screen{height:calc(100svh - 126px);min-height:0}
 .classroom h1{font-size:62px}
 .classroom .countdown-label{font-size:30px}
 .classroom .footer{font-size:22px;min-height:75px}
 .classroom .system-line{font-size:15px}
}
@media(max-width:1100px) and (min-width:701px){
 .classroom{--rail-space:110px;--edge-space:24px}
 .grade-rail{left:18px;width:73px}.grade-key{font-size:23px;min-height:58px}
 .classroom .exam-details{grid-template-columns:.85fr 1.6fr 1.1fr 1.1fr;gap:8px}
 .classroom .exam-details>div{padding:0 8px}
 .classroom .exam-details small{font-size:16px}
 .classroom .footer{font-size:13px}
}
@media(max-width:700px){
 .classroom{--rail-space:76px;--edge-space:12px}
 .grade-rail{left:10px;width:54px;gap:9px}.grade-key{font-size:18px;min-height:48px}
 .classroom-sound{top:12px;right:12px;width:38px;height:38px}
 .classroom .clock-screen{min-height:calc(100svh - 134px);padding-top:64px}
 .classroom .clock-content{padding:12px 0 24px}
 .classroom h1{font-size:28px}
 .classroom .phase{font-size:15px}
 .classroom .countdown{font-size:clamp(38px,10.5vw,72px)}
 .classroom .countdown-label{font-size:15px}
 .classroom .announcement{font-size:18px;min-height:58px}
 .classroom .exam-details{grid-template-columns:1fr 1fr;gap:20px 8px}
 .classroom .exam-details strong{font-size:20px}
 .classroom .exam-details span{font-size:16px}
 .classroom .exam-details small{font-size:12px}
 .classroom .system-line{font-size:10px;gap:5px}
 .classroom .footer{font-size:10px;gap:8px;align-items:flex-start;min-height:64px}
 .invigilators-strip{gap:14px;padding:14px 0;align-items:flex-start}
 .invigilators-label{font-size:16px;line-height:1.7}
 .invigilators-list{font-size:20px;gap:10px 18px}
 .volume-warning{top:62px;right:12px;width:calc(100vw - 100px);max-width:380px;padding:16px}
 .volume-warning .dialog-heading{gap:4px}
 .volume-warning .dialog-heading h2{font-size:18px}
}
@media(max-height:650px) and (min-width:701px){
 .classroom .clock-screen{height:calc(100svh - 94px);min-height:0;padding-top:24px}
 .classroom .clock-content{padding:0 0 10px}
 .classroom .countdown{font-size:clamp(90px,min(11vw,18vh),160px)}
 .classroom h1{font-size:32px;margin:6px 0 8px}
 .classroom .phase{font-size:17px}.classroom .countdown-label{font-size:19px}
 .classroom .announcement{font-size:23px;min-height:37px}
 .classroom .exam-details{padding:16px 0}
 .classroom .exam-details strong{font-size:27px}.classroom .exam-details span{font-size:20px}
 .classroom .footer{min-height:47px;font-size:13px}.grade-key{min-height:48px}
 .invigilators-strip{padding:10px 0;gap:28px}.invigilators-label{font-size:20px}.invigilators-list{font-size:27px}
}