:root { color-scheme: dark; }
* { box-sizing: border-box; }
html,body { margin:0; min-height:100%; background:#111f2b; color:#f4f7fa; font-family:Arial,Helvetica,sans-serif; }
.display { min-height:100vh; padding:3.1vh 3.6vw 2.3vh; display:flex; flex-direction:column; }
.header { display:flex; justify-content:space-between; align-items:center; gap:30px; border-bottom:3px solid #50d7ce; padding-bottom:2.9vh; }
.brand { font-size:24px; font-size:1.8vw; font-weight:700; letter-spacing:-.7px; }
.brand span { display:inline-block; border-left:1px solid #6b7a85; color:#9cafbd; margin-left:16px; padding-left:17px; font-size:16px; font-size:1.1vw; letter-spacing:2px; vertical-align:middle; }
h1 { font-size:54px; font-size:3.5vw; letter-spacing:-1.7px; line-height:1.05; margin:1.4vh 0 1vh; }
.heading p { color:#bac8d2; font-size:24px; font-size:1.5vw; margin:0; }
.dot { color:#50d7ce; padding:0 12px; }
.clock { text-align:right; flex-shrink:0; }
.clock time { font-size:64px; font-size:4.3vw; letter-spacing:-2px; font-weight:700; font-variant-numeric:tabular-nums; }
.clock time small { font-size:27px; font-size:1.8vw; margin-left:9px; color:#bac8d2; font-weight:400; letter-spacing:0; }
.clock #date { font-size:24px; font-size:1.5vw; color:#bac8d2; margin-top:.9vh; }
.schedule { flex:1; }
.table-head,.class-row { display:flex; width:100%; align-items:center; }
.table-head { color:#9eb1bf; font-size:15px; font-size:1.02vw; font-weight:700; letter-spacing:2px; padding:2.2vh 0 1.6vh; }
.table-head>span:nth-child(1),.room-cell { width:20%; padding-left:1.1vw; }
.table-head>span:nth-child(2),.class-cell { width:49%; padding:0 1.7vw; }
.table-head>span:nth-child(3),.teacher-cell { width:31%; padding:0 1.1vw 0 1.7vw; }
.class-row { min-height:10.2vh; padding:1.4vh 0; border-top:1px solid #304250; }
.class-row:nth-child(even) { background:#152634; }
.room { color:#6ce1d6; font-size:43px; font-size:2.8vw; font-weight:700; letter-spacing:-.6px; overflow-wrap:break-word; }
.room.pending { color:#f1cc87; font-size:1.7vw; }
.class-name { font-size:30px; font-size:1.9vw; font-weight:700; line-height:1.17; margin-bottom:.7vh; }
.class-meta { color:#aebfcb; font-size:18px; font-size:1.17vw; line-height:1.35; }
.class-group { color:#6ce1d6; font-weight:700; margin-right:.55em; }
.teacher { font-size:24px; font-size:1.6vw; line-height:1.3; }
.teacher.pending { color:#f1cc87; }
.footer { display:flex; justify-content:space-between; align-items:center; gap:15px; border-top:1px solid #304250; padding-top:1.8vh; margin-top:1.9vh; font-size:16px; font-size:1.02vw; color:#b2c2cd; }
.footer-left { display:flex; align-items:center; gap:9px; }
.status-dot { display:block; width:8px; height:8px; background:#6ce1d6; border-radius:50%; flex-shrink:0; }
.status-dot.warning { background:#f1cc87; }
.pagination { color:#f4f7fa; font-variant-numeric:tabular-nums; }
.welcome { color:#8fa5b4; text-align:right; }
.empty { min-height:53vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.empty-mark { font-size:50px; font-weight:700; color:#6ce1d6; }
.empty h2 { font-size:34px; margin:16px 0 0; }
.empty p { font-size:23px; color:#b2c2cd; max-width:80%; line-height:1.5; }
.empty[hidden],[hidden] { display:none!important; }
.controls { position:fixed; right:3.6vw; bottom:6.5vh; display:flex; gap:10px; opacity:0; transition:opacity .2s; }
.controls.visible,.controls:focus-within { opacity:1; }
.controls button { font:inherit; font-size:15px; color:#f4f7fa; background:#294353; border:1px solid #78909e; padding:10px 15px; border-radius:5px; }
button:focus { outline:3px solid #6ce1d6; outline-offset:3px; }
.preview-banner { position:fixed; top:0; left:0; right:0; padding:4px; text-align:center; font-size:14px; background:#72541c; color:#fff; }
.no-script { position:fixed; inset:35% 10% auto; background:#111f2b; padding:40px; font-size:28px; }
@media (max-width:900px) {
 .display{padding:24px;}.brand{font-size:22px;}.brand span{font-size:11px;}h1{font-size:34px;letter-spacing:-1px;}.heading p,.clock #date{font-size:15px;}.clock time{font-size:36px;}.clock time small{font-size:17px;}.table-head{font-size:10px;letter-spacing:1px;}.room{font-size:25px;}.room.pending{font-size:17px;}.class-name{font-size:18px;}.class-meta{font-size:12px;}.teacher{font-size:16px;}.footer{font-size:11px;}.class-row{min-height:82px;}.welcome{display:none;}
}
@media (max-width:560px) {
 .header{align-items:flex-start;gap:15px;}.heading p{font-size:13px;}.brand span{display:block;border:0;padding:0;margin:6px 0;}.clock time{font-size:27px;}.clock time small{font-size:13px;margin-left:4px;}h1{font-size:27px;}.clock #date{font-size:12px;max-width:110px;} .display{padding:18px;}.table-head{font-size:9px;letter-spacing:0;}.table-head>span:nth-child(1),.room-cell{width:22%;}.table-head>span:nth-child(2),.class-cell{width:45%;}.table-head>span:nth-child(3),.teacher-cell{width:33%;}.class-name{font-size:16px;}.teacher{font-size:14px;}.room{font-size:21px;}.footer{flex-wrap:wrap;}.empty h2{font-size:25px;}.empty p{font-size:17px;}.controls{bottom:65px;}
}
@media (prefers-reduced-motion:reduce){.controls{transition:none;}}