/* Classroom v3: one clear hierarchy, no explanatory footer. */
.classroom{--rail-space:192px;--edge-space:4vw;background:#161e28}
.classroom .watermark,.classroom .system-line,.classroom>.footer{display:none}
.classroom>.toast{pointer-events:none}
.grade-rail{left:0;width:192px;padding:24px 28px;background:#121a24;border-right:1px solid #263340;gap:20px}
.grade-key{min-height:72px;border-radius:10px;background:#1c2835;font-size:28px}
.grade-key[aria-pressed="true"]{background:#365875;border-color:#9ebbd5}
.classroom .clock-screen{padding:28px var(--edge-space) 36px;min-height:100svh;height:auto;overflow:visible;gap:0}
.classroom-heading{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px;align-items:start;min-height:110px;flex:none}
.classroom .classroom-heading .exam-title{font-size:clamp(16px,1.4vw,27px);line-height:1.5;margin:14px 0 0;max-width:90%;text-align:left}
.classroom .phase{justify-content:center;align-self:start;white-space:nowrap;background:#24473e;color:#c7f1df!important;
 border:1px solid #629c87;border-radius:12px;font-size:clamp(18px,1.6vw,29px);padding:13px 22px;margin:0;min-height:58px}
.classroom .phase::before,.classroom .phase::after{content:"";width:16px;height:2px;border:0;border-radius:0;background:currentColor;flex:none}
.classroom[data-phase="waiting"] .phase,.classroom[data-phase="empty"] .phase{background:#263b52;border-color:#6683a3;color:#c1d5e9!important}
.classroom[data-phase="ended"] .phase,.classroom[data-phase="complete"] .phase{background:#553337;border-color:#94616a;color:#f4c6c9!important}
.classroom .clock-content{flex:1 0 auto;justify-content:center;gap:0;padding:18px 0 38px}
.classroom h1{font-size:clamp(34px,4vw,75px);margin:8px 0 22px}
.classroom .countdown-label{font-size:clamp(18px,1.4vw,26px);margin:0 0 16px}
.classroom .countdown{font-size:clamp(72px,min(10vw,18vh),192px);line-height:1.15}
.classroom .announcement{font-size:clamp(18px,1.5vw,29px);line-height:1.5;min-height:0;margin:28px 0 0}
.classroom .exam-details{grid-template-columns:1.35fr 1.15fr 1fr 1fr;gap:28px;padding:28px 0 30px}
.classroom .exam-details>div{border:0;padding:0;min-width:0}
.classroom .exam-details span{font-size:clamp(16px,1.25vw,24px)}
.classroom .exam-details strong,.classroom .invigilators-list{font-size:clamp(23px,1.85vw,36px);margin-top:15px;font-weight:600}
.classroom .invigilators-list{gap:10px 20px;line-height:1.35}
.classroom .invigilators-list .invigilator-name{font-size:inherit}
.classroom .invigilator-name>span{font-size:inherit}
.classroom .exam-details .invigilator-name>span{font-size:inherit}
.classroom .exam-details .invigilators-empty{font-size:inherit}
.classroom #detailDate{display:none}
.classroom .room-picker-strip{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;padding:30px 0 0;flex-wrap:nowrap}
.classroom .room-picker-strip label{font-size:clamp(18px,1.4vw,27px);color:#9cabbc;white-space:nowrap}
.room-buttons{display:flex;flex-wrap:wrap;gap:12px;min-width:0}
.room-button{flex:1 0 64px;min-width:64px;max-width:240px;min-height:68px;padding:10px 14px;overflow-wrap:anywhere;
 background:#202c3a;color:#b6c4d3;border:1px solid #3a4a5d;border-radius:10px;font-size:clamp(22px,1.8vw,36px)}
.room-button[aria-pressed="true"]{background:#365875;color:#eef3f8;border:2px solid #b0c9df;font-weight:700;box-shadow:inset 0 -4px #b0c9df}
.room-button:disabled{cursor:default;opacity:1}.room-empty{font-size:18px;color:var(--muted);padding:14px 0}
.classroom-sound{top:28px;right:22px;z-index:6}
.listening-badge{justify-self:end;margin-right:58px;width:min(100%,330px);text-align:left;display:grid;grid-template-columns:1fr auto;
 gap:7px 10px;min-width:0;background:#202f3b;color:#dce9f2;border:1px solid #4b6373;border-radius:12px;padding:12px 16px}
.listening-badge>span:first-child{font-size:20px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.listening-badge>small{font-size:12px;align-self:center;white-space:nowrap}
.listening-badge>strong{grid-column:1/-1;font-size:23px;line-height:1.4}
.listening-badge .badge-identity{grid-column:1/-1;font-size:13px;color:#a8bac8;overflow-wrap:anywhere}
.listening-badge[data-state="ready"]{border-color:#78aa94}.listening-badge[data-state="ready"]>span:first-child{color:#bce8d3}
.listening-badge[data-state="warning"]>span:first-child{color:#e0be87}.listening-badge[data-state="error"]>span:first-child{color:#f3b1aa}
.listening-dialog{width:min(860px,calc(100vw - 32px));max-height:90svh;overflow:auto}
.listening-dialog .listening-panel{margin:12px 0 0;max-width:none}
.listening-dialog .listening-tools>label{display:none}
@media(max-height:900px) and (min-width:701px){
 .classroom .clock-screen{padding-top:18px;padding-bottom:22px}
 .classroom-heading{min-height:94px;gap:14px}
 .classroom .classroom-heading .exam-title{font-size:17px;margin-top:10px}
 .classroom .phase{font-size:19px;padding:10px 16px;min-height:48px}
 .classroom .clock-content{padding:8px 0 22px}
 .classroom h1{font-size:36px;margin:4px 0 12px}
 .classroom .countdown-label{font-size:18px;margin-bottom:10px}
 .classroom .countdown{font-size:clamp(64px,min(11vw,15vh),135px)}
 .classroom .announcement{font-size:20px;margin-top:15px}
 .classroom .exam-details{padding:18px 0;gap:18px}
 .classroom .exam-details strong,.classroom .invigilators-list{font-size:25px;margin-top:10px}
 .classroom .exam-details span{font-size:17px}
 .classroom .room-picker-strip{padding-top:18px;gap:20px}
 .room-button{min-height:54px;font-size:25px}
 .listening-badge{padding:9px 12px;gap:4px 8px}
 .listening-badge>span:first-child{font-size:17px}.listening-badge>strong{font-size:18px}.listening-badge .badge-identity{font-size:12px}
 .grade-rail{gap:14px}.grade-key{min-height:56px;font-size:25px}
}
@media(max-width:1400px){.classroom{--rail-space:132px;--edge-space:28px}.grade-rail{width:132px;padding:20px;gap:14px}.grade-key{font-size:25px;min-height:60px}}
@media(max-width:1100px){
 .classroom{--rail-space:98px;--edge-space:20px}.grade-rail{width:98px;padding:16px 12px;gap:10px}.grade-key{font-size:22px;min-height:54px}
 .classroom-heading{grid-template-columns:1fr auto;min-height:0}
 .classroom .classroom-heading .exam-title{grid-column:1;max-width:100%;font-size:16px;margin:8px 0}
 .classroom .phase{grid-column:2;font-size:17px;margin-right:50px}
 .listening-badge{grid-column:1/-1;width:100%;margin:0;grid-template-columns:1fr auto;max-width:none}
 .listening-badge>strong{grid-column:2;grid-row:1}.listening-badge>small{grid-row:2;grid-column:2}
 .listening-badge .badge-identity{grid-column:1;grid-row:2}
 .classroom .exam-details{gap:14px}
 .classroom .exam-details strong,.classroom .invigilators-list{font-size:23px}
}
@media(max-width:700px){
 .classroom{--rail-space:68px;--edge-space:14px}.grade-rail{width:68px;padding:12px 8px;gap:10px}.grade-key{font-size:18px;min-height:48px}
 .classroom .clock-screen{padding-top:18px;padding-bottom:20px;min-height:100svh}
 .classroom-heading{grid-template-columns:1fr;gap:10px}
 .classroom .classroom-heading .exam-title{text-align:center;margin:0 40px 0 0;font-size:14px}
 .classroom .phase{grid-column:1;justify-self:center;margin:0;min-height:42px;font-size:16px;padding:8px 16px}
 .classroom-sound{top:12px;right:10px;width:36px;height:36px}
 .listening-badge{grid-column:1;font-size:14px;padding:9px;gap:6px}.listening-badge>strong{font-size:16px}.listening-badge>span:first-child{font-size:16px}
 .classroom .clock-content{padding:20px 0}
 .classroom h1{font-size:30px;margin:0 0 14px}
 .classroom .countdown-label{font-size:15px;margin-bottom:10px}
 .classroom .countdown{font-size:clamp(36px,10vw,70px)}
 .classroom .announcement{font-size:17px;margin-top:20px}
 .classroom .exam-details{grid-template-columns:1fr 1fr;padding:18px 0;gap:20px 12px}
 .classroom .exam-details strong,.classroom .invigilators-list{font-size:20px;margin-top:8px}
 .classroom .exam-details span{font-size:15px}
 .classroom .room-picker-strip{grid-template-columns:1fr;padding-top:18px;gap:12px}
 .classroom .room-picker-strip label{font-size:17px}
 .room-buttons{gap:8px}.room-button{min-height:48px;min-width:52px;flex-basis:52px;font-size:23px;padding:8px}
}