@font-face{font-family:Vietnam;src:url('vendor/be-vietnam-pro-vietnamese-400-normal.woff2')}@font-face{font-family:Vietnam;src:url('vendor/be-vietnam-pro-latin-400-normal.woff2');unicode-range:U+0000-00FF}@font-face{font-family:Vietnam;src:url('vendor/be-vietnam-pro-vietnamese-700-normal.woff2');font-weight:700}@font-face{font-family:Vietnam;src:url('vendor/be-vietnam-pro-latin-700-normal.woff2');font-weight:700;unicode-range:U+0000-00FF}
:root{color-scheme:dark;--bg:#080c18;--panel:#131b2c;--line:#29334a;--text:#eef2ff;--muted:#a3aec7;--purple:#8764ff;--cyan:#49dfd6;--gold:#ffd276;--green:#61dbad;--red:#ff808d}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 48% -10%,#242045 0,transparent 52%),var(--bg);color:var(--text);font:14px/1.6 Vietnam,Arial,sans-serif}button,input,select,textarea{font:inherit}button,input,select,textarea{border:1px solid var(--line);border-radius:10px;color:var(--text);background:#1c263a}button{padding:10px 16px;cursor:pointer;transition:background .16s,transform .16s}button:hover{background:#303c58;transform:translateY(-1px)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}input,select,textarea{padding:10px 12px}textarea{width:100%;min-height:120px}a{color:var(--cyan)}.primary{background:linear-gradient(135deg,#8a5cff,#6444e9);border-color:#a185ff;color:white;font-weight:700;box-shadow:0 4px 20px #7450ed26}.primary:hover{background:#8c6aff}.cyan{background:linear-gradient(135deg,#46e1da,#2bbab7);color:#062528;border-color:#58efdc;font-weight:700}.gold{background:var(--gold);color:#352617;border-color:#ffe5a1;font-weight:700}.danger{color:var(--red)}.muted{color:var(--muted)}.tiny{font-size:12px}.tag,.badge{display:inline-flex;align-items:center;gap:6px;border-radius:7px;padding:4px 10px;font-size:12px;background:#25304a;color:#cdd6f0}.tag.green{background:#123b34;color:var(--green)}.tag.gold{background:#453822;color:var(--gold)}.tag.purple{background:#332650;color:#cab7ff}.top{display:flex;align-items:center;gap:18px;padding:16px 28px;border-bottom:1px solid var(--line);background:#101627e8;position:relative}.brand{display:flex;align-items:center;gap:12px;min-width:260px}.logo{width:43px;height:43px;background:linear-gradient(140deg,#a779ff,#6546e8);border-radius:13px;display:grid;place-items:center;font-size:26px;font-weight:700;box-shadow:0 0 25px #8a5bfc30}.brand strong{display:block;font-size:19px;letter-spacing:-.6px}.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:1.7px}.top .spacer{flex:1}.top select{max-width:155px}.sound{padding:8px 12px}.nav{display:flex;padding:8px 28px;gap:5px;border-bottom:1px solid var(--line);background:#0f1526;overflow-x:auto}.nav button{border:0;background:transparent;white-space:nowrap;padding:10px 13px;color:var(--muted);font-size:12px}.nav button.active{background:#7654ea;color:#fff}.nav button span{margin-right:7px}.workspace{max-width:1400px;margin:0 auto;padding:28px}.pagehead{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:2px;font-weight:700;color:#b9a5ff}.pagehead h1{font-size:26px;margin:3px 0 2px;letter-spacing:-.7px}.pagehead p{margin:0;color:var(--muted)}.actions,.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.panel{background:linear-gradient(140deg,#182237,#121a2b);border:1px solid var(--line);border-radius:17px;padding:22px}.panel h2{font-size:16px;margin:0 0 15px}.panel h3{font-size:14px;margin:18px 0 10px}.grid{display:grid;grid-template-columns:1fr 300px;gap:20px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}.metric{padding:17px 20px;background:#141d30;border:1px solid var(--line);border-radius:13px}.metric strong{display:block;font-size:27px;line-height:1.4}.metric small{color:var(--muted)}.hero{padding:22px 25px;border-color:#423666;background:linear-gradient(120deg,#25203e,#172838)}.hero .pagehead{margin:0}.controls{padding:14px 20px;margin-bottom:16px}.segments{display:flex;gap:4px;flex-wrap:wrap}.segments button{font-size:12px;padding:7px 12px;border:0;background:#202b40}.segments button.active{background:#7451ee;color:#fff}.sep{width:1px;height:25px;background:var(--line);margin:0 8px}.stage{position:relative;min-height:535px;display:flex;align-items:center;flex-direction:column;justify-content:center;overflow:hidden;background:radial-gradient(circle at center,#2c285143,transparent 65%),#10192a;border:1px solid #403461}.stage:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#aca2eb30 1px,transparent 1px);background-size:27px 27px;opacity:.25}.stage>*{z-index:1}.stage-label{margin:0 0 20px}.wheel-wrap{position:relative;width:min(400px,80vw);height:min(400px,80vw)}.wheel-wrap canvas{width:100%;height:100%;filter:drop-shadow(0 14px 22px #0007)}.pointer{position:absolute;top:-13px;left:calc(50% - 16px);width:32px;height:36px;background:var(--gold);clip-path:polygon(0 0,100% 0,50% 100%);z-index:4;filter:drop-shadow(0 3px 3px #000)}.wheel-center{position:absolute;top:calc(50% - 40px);left:calc(50% - 40px);width:80px;height:80px;border:5px solid #e0c9ff;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#8b64ec,#4830a8);font-weight:700;font-size:15px;pointer-events:none}.draw-btn{margin:24px 0 3px;min-width:250px;padding:14px 25px;font-size:16px}.stage .tiny{margin:8px 0 0}.student-strip{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}.student-strip:last-child{border-bottom:0}.avatar{height:36px;width:36px;background:#3a2d59;color:#d7c3ff;border-radius:10px;display:grid;place-items:center;font-weight:700;flex-shrink:0}.student-name{font-size:12px}.aside{display:flex;flex-direction:column;gap:16px}.note{padding:14px;background:#21223b;border-left:3px solid #8c69ff;border-radius:8px;color:#c5cbe0;font-size:12px}.winner{width:100%;text-align:center;padding:35px 15px}.winner h2{font-size:34px;line-height:1.4;color:var(--gold);margin:12px 0 25px}.winner .result-name{font-size:29px;font-weight:700;display:block;color:#fff}.winner .trophy{font-size:60px}.winner small{color:var(--muted)}.reward{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:15px 0}.result-card{padding:16px;border:1px solid #655038;background:#2d2730;border-radius:14px;margin:10px 0}.reel,.mystery{font-size:35px;min-height:230px;display:grid;place-items:center;width:100%;text-align:center;font-weight:700}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:25px;width:100%}.playing-card{height:130px;border-radius:15px;background:linear-gradient(130deg,#7554d7,#2e254f);border:2px solid #b195ff;display:grid;place-items:center;font-size:42px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:13px;margin-top:18px}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:left;background:#202a41;color:#bdc8e0;font-size:11px;letter-spacing:.4px;padding:13px 12px;position:sticky;top:0;z-index:2}td{padding:10px 12px;border-bottom:1px solid #263147;font-size:12px}tr:hover td{background:#ffffff04}td input.grade{width:64px;text-align:center;padding:7px 3px;background:#101929}td input.comment{min-width:240px;padding:7px 10px}td .avg{font-weight:700;color:var(--cyan)}.fixed-name{min-width:210px}td input[type=checkbox]{accent-color:#8964ff;width:17px;height:17px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.empty{padding:55px 20px;text-align:center;color:var(--muted)}.empty strong{display:block;font-size:21px;color:#e3e8ff;margin:10px}.dropzone{text-align:center;border:2px dashed #554576;border-radius:18px;padding:45px 25px;background:#22203c55;cursor:pointer}.dropzone.drag{border-color:var(--cyan);background:#1b3a3a}.dropzone h2{font-size:23px}.dropzone .icon{font-size:48px}.import-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}.status-line{color:var(--green);font-size:12px;display:flex;gap:8px;align-items:center}.dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 9px #61dbad}.footer{display:flex;justify-content:space-between;color:#8190ae;font-size:10px;padding:16px 2px;letter-spacing:.4px}.progress{height:5px;border-radius:10px;background:#2c3550;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,#a985ff,#49dfd6)}.bar-row{display:grid;grid-template-columns:150px 1fr 40px;gap:16px;align-items:center;margin:18px 0}.event{display:flex;gap:15px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}.event time{font-size:11px;color:var(--muted);margin-left:auto}.schedule{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.lesson{background:#202840;border-left:3px solid #9a74ff;border-radius:9px;padding:12px;margin:10px 0;font-size:12px}.setting{padding:20px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:25px;align-items:center}.setting p{margin:2px 0;color:var(--muted);font-size:12px}.confetti{position:fixed;top:-20px;pointer-events:none;z-index:100;animation:fall 2.5s linear forwards}@keyframes fall{to{transform:translateY(100vh) rotate(600deg);opacity:0}}dialog{color:var(--text);background:#141d31;border:1px solid #554573;border-radius:20px;padding:28px;max-width:750px;width:calc(100vw - 40px);max-height:85vh;box-shadow:0 25px 100px #0008}dialog::backdrop{background:#050713b8;backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.dialog-head h2{margin:0;font-size:21px}.dialog-body{overflow:auto;max-height:65vh}.form-field{display:flex;flex-direction:column;gap:7px;margin:15px 0}.form-field label{font-size:12px;color:var(--muted)}#toast{position:fixed;right:25px;bottom:25px;z-index:1000;background:#283b43;color:#d5fff3;border:1px solid #578576;box-shadow:0 10px 30px #0006;padding:14px 20px;border-radius:12px;max-width:400px;opacity:0;transform:translateY(30px);transition:.2s;pointer-events:none}#toast.show{opacity:1;transform:translateY(0)}#toast.error{background:#49313a;color:#ffd1d6;border-color:#985666}.projecting .top,.projecting .nav,.projecting .aside,.projecting .controls,.projecting .hero,.projecting .footer,.projecting .metrics{display:none}.projecting .workspace{max-width:none;padding:15px}.projecting .grid{display:block}.projecting .stage{min-height:calc(100vh - 40px)}.projecting .wheel-wrap{width:min(65vh,650px);height:min(65vh,650px)}.projecting .winner .result-name{font-size:clamp(32px,5vw,72px)}.projection-exit{position:fixed;top:20px;right:20px;z-index:10}.timer-value{text-align:center;font-size:75px;color:var(--cyan);font-variant-numeric:tabular-nums}.question{font-size:22px;text-align:center;padding:30px;color:var(--gold)}@media(max-width:1100px){.top{gap:10px;padding:15px}.brand{min-width:220px}.brand strong{font-size:17px}.top .tag{display:none}.nav{padding:8px 12px}.workspace{padding:20px}.grid{grid-template-columns:1fr 260px}.pagehead h1{font-size:23px}.actions button{padding:8px 10px;font-size:12px}.schedule{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.top{flex-wrap:wrap}.top .spacer{display:none}.brand{flex:1}.top .gold{font-size:11px;padding:9px}.top select{flex:1;max-width:none}.grid,.import-grid{grid-template-columns:1fr}.aside{display:grid;grid-template-columns:1fr 1fr}.workspace{padding:15px}.pagehead{flex-direction:column;align-items:flex-start;gap:10px}.metrics{grid-template-columns:repeat(2,1fr)}.hero{padding:17px}.stage{min-height:510px}.schedule{grid-template-columns:1fr 1fr}.setting{align-items:flex-start;flex-direction:column;gap:10px}.wheel-wrap{width:min(355px,78vw);height:min(355px,78vw)}.brand small{font-size:9px}.panel{padding:16px}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}.confetti{display:none}}
.cards{grid-template-columns:repeat(5,1fr);max-width:650px}.playing-card.choosing{transform:rotateY(18deg) translateY(-10px);background:#9467ff;box-shadow:0 0 30px #9975ff85}.card-name{min-height:100px;font-size:29px}.shaking{animation:shake .22s ease-in-out infinite}@keyframes shake{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}@media(max-width:760px){.cards{gap:7px;padding:10px}.playing-card{height:120px}}
/* Class Studio 1.1: sân khấu và hiệu ứng chọn tên */
:root{--bg:#111224;--panel:#242b3e;--line:#39415b;--gold:#ffcf54}.panel{background:linear-gradient(145deg,#2b3348,#1c2235);box-shadow:inset 0 1px 0 #ffffff10,0 14px 35px #05071535}.nav button.active,.segments button.active{background:linear-gradient(#7958ff,#5230d6);box-shadow:inset 0 1px 1px #ffffff50,0 4px 0 #36207d,0 7px 20px #7654ee35}.primary,.gold,.cyan{box-shadow:inset 0 2px 0 #ffffff50,0 5px 0 #38236e,0 10px 24px #0004;transition:transform .18s,filter .18s}.gold{background:linear-gradient(#ffdc6a,#eea818);box-shadow:inset 0 2px 0 #fff7,0 5px 0 #8d570b,0 10px 25px #ecac1830}.primary:active,.gold:active,.cyan:active{transform:translateY(4px);box-shadow:inset 0 1px 0 #fff5,0 1px 0 #38236e}.stage{background:radial-gradient(ellipse at 50% 35%,#55439b50,transparent 65%),linear-gradient(150deg,#20263a,#14162a);border:1px solid #6851b0;box-shadow:inset 0 0 60px #7660c410,0 18px 50px #0004;min-height:590px}.draw-btn{background:linear-gradient(#ffdc65,#f0ab20);color:#362510;border-color:#ffe1a0;box-shadow:inset 0 2px 0 #fff8,0 6px 0 #8d5917,0 10px 30px #ffbf3020;letter-spacing:.6px}.draw-btn:hover{background:linear-gradient(#ffe78b,#ffc440)}.wheel-center{background:radial-gradient(circle at 30% 25%,#46366e,#13192b);border-color:#ffdb73;color:#ffdf78;box-shadow:0 5px 12px #0008,inset 0 2px 8px #fff3}.pointer{background:linear-gradient(#ffaabb,#e53568);filter:drop-shadow(0 0 5px #fff)}.winner{animation:winner-in .65s cubic-bezier(.2,.8,.2,1);max-width:800px}.winner h2{font-size:24px;margin:5px 0 20px}.winner .trophy{color:#ffdc69;text-shadow:0 0 28px #ffdc6970}.result-card{border:1px solid #d49a31;background:linear-gradient(135deg,#423149,#252b40);box-shadow:inset 0 2px 0 #ffe5ac20,0 10px 25px #0004}.winner .result-name{font-size:clamp(24px,3vw,42px);color:#ffda68;text-shadow:0 3px 0 #7e551e,0 0 25px #ffc84430;line-height:1.5}.celebrate-icon{display:inline-block;font-size:.8em;animation:icon-bounce 1.8s ease-in-out infinite}.reel{border:2px solid #8060ce;border-radius:22px;margin:35px 0;background:linear-gradient(#111427,#2d2546,#111427);box-shadow:inset 0 12px 25px #0009,0 0 40px #8764ff30;min-height:200px;color:#eadfff;padding:20px}.drawing-reel .reel{animation:reel-pulse .17s infinite alternate}.cards{grid-template-columns:repeat(5,1fr);perspective:900px}.playing-card{height:170px;background:repeating-linear-gradient(45deg,#fff0 0 12px,#fff1 12px 14px),linear-gradient(135deg,#a770ff,#593bbe,#251838);box-shadow:inset 0 3px 0 #fff6,0 7px 0 #30204f,0 15px 25px #0007;transform:rotate(var(--tilt,0deg));transition:transform .14s,box-shadow .14s}.playing-card.choosing{transform:translateY(-22px) rotateY(25deg) scale(1.08);border-color:#ffdf7c;color:#ffdf7c;box-shadow:0 0 30px #ffc95860}.playing-card.revealed{transform:rotateY(180deg);background:#ffd767}.card-name{min-height:100px;font-size:25px;margin:0}.mystery{gap:15px;min-height:330px}.gift{display:inline-block;filter:drop-shadow(0 18px 15px #0008);transform:rotate(var(--shake,0deg));transition:transform .1s}.drawing-box .gift{animation:gift-bounce .6s ease-in-out infinite}.gift.opened{transform:translateY(-50px) scale(1.4);filter:drop-shadow(0 0 40px #ffcc55)}.cycle-info{padding:12px;background:#161b30;border-radius:10px;margin-bottom:12px;color:#cdbfff}.cycle-info strong{color:#ffda68;font-size:22px}#fx-volume{width:100%;accent-color:#9674ff}#celebration-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:90}.drawing .stage-label{color:#ffdf84;background:#3e315f}.drawing .draw-btn{opacity:1;color:#eadfff;background:#38334d;box-shadow:none}@keyframes winner-in{from{opacity:0;transform:translateY(35px) scale(.9)}to{opacity:1;transform:none}}@keyframes icon-bounce{50%{transform:translateY(-6px) rotate(8deg)}}@keyframes reel-pulse{to{filter:blur(1px);transform:translateY(2px)}}@keyframes gift-bounce{50%{translate:0 -15px}}@media(max-width:760px){.cards{gap:8px;padding:15px}.playing-card{height:110px;font-size:28px}.stage{min-height:530px}.reel{font-size:25px}.celebrate-icon{font-size:.7em}}
/* Classroom controls and reference-style registers */
.celebrate-icon{animation:none!important;transform:none!important}.grid{align-items:start;grid-template-columns:minmax(0,1fr) 310px}.stage{min-height:480px;gap:0}.wheel-wrap{width:min(var(--wheel-size,400px),100%);height:auto;aspect-ratio:1;flex-shrink:0;transition:width .15s}.wheel-wrap canvas{display:block}.winner{padding:12px 0}.winner .trophy{font-size:32px}.winner h2{margin-bottom:12px;font-size:21px}.result-card{padding:14px}.quick-label{font-size:12px;letter-spacing:1px;color:#c1b4d9;margin-top:14px}.reward{margin:10px 0}.shortcut-bar{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 16px;padding:15px 8px 0;margin-top:12px;border-top:1px solid #ffffff16;width:100%;font-size:12px;color:#b6bed5}.shortcut-bar span{white-space:nowrap}kbd{font:inherit;background:#343d57;border:1px solid #58617b;border-bottom-width:3px;border-radius:4px;padding:1px 5px;color:#b9e5ff}input[type=range]{width:100%;padding:0;accent-color:#aa88ff;cursor:pointer}output{color:#ffd879;font-weight:600}.cards{grid-template-columns:repeat(4,minmax(0,1fr));padding:25px 4px;gap:12px}.playing-card{font-size:16px;height:210px;padding:14px 8px;text-align:center;display:flex;flex-direction:column;justify-content:space-between;transform:none;overflow:hidden}.playing-card small{font-size:11px;color:#dacaff}.playing-card strong{font-size:clamp(15px,1.6vw,23px);line-height:1.5;overflow-wrap:anywhere}.playing-card>span{font-size:28px;color:#dfc8ff}.playing-card.choosing{transform:translateY(-8px);background:linear-gradient(145deg,#ae7cfa,#7144bf);box-shadow:0 0 20px #ffc95840}.playing-card.revealed{transform:translateY(-8px) scale(1.04);color:#412448;background:linear-gradient(#ffeaaa,#ffcb55)}.card-status{font-size:20px;color:#ffdc78;text-align:center;min-height:50px}.reel-window{width:100%;max-width:580px;margin:20px 0;overflow:hidden;text-align:center;border:1px solid #7052aa;border-radius:22px;background:#14182b}.reel-window .reel{margin:0;min-height:105px;border-radius:0;border-width:1px 0;color:#ffdb77;font-size:30px}.reel-neighbor{padding:17px;font-size:21px;opacity:.4}.drawing-reel .reel{animation:none}.box-names{display:flex;flex-direction:column;gap:6px;min-width:240px;font-size:20px}.box-candidate{padding:5px 20px;border-radius:8px;background:#292640;color:#d0bddf}.box-candidate:nth-child(2){color:#ffe38d;background:#42324c;border:1px solid #a78044}.mystery #animated-name{font-size:17px;color:#bdc4db}.drawing-box .gift{animation:none}.grade-panel,.behavior-panel{background:#202638;border-radius:18px}.grade-panel th,.behavior-panel th{background:#151929;font-size:12px;padding:14px 10px}.grade-panel td,.behavior-panel td{font-size:13px;padding:12px 10px;border-color:#30374b}.grade-panel tbody tr:nth-child(even),.behavior-panel tbody tr:nth-child(even){background:#ffffff02}.grade-panel input{background:#121627!important;border-color:#38334f}.grade-panel td input.grade{width:58px}.grade-panel .weight-1{background:#14364240}.grade-panel th.weight-1{background:#163143;color:#8bd6f4}.grade-panel .weight-2{background:#34305d40}.grade-panel th.weight-2{background:#252544;color:#b7b8ff}.grade-panel .weight-3{background:#4b225b40}.grade-panel th.weight-3{background:#381e49;color:#dfafff}.grade-panel .col-average{background:#153e3838;color:#6ce5bd}.grade-panel th.col-average{background:#163831;color:#7ae2c1}.star-badge{background:#483420;color:#ffd76b;border:1px solid #705032}.grade-metrics .metric:nth-child(2) strong{color:#53e2bc}.grade-metrics .metric:nth-child(3) strong{color:#a78aff}.grade-metrics .metric:nth-child(4) strong{color:#c980fc}.behavior-metrics{grid-template-columns:repeat(5,1fr)}.behavior-metrics strong{color:#ffe17d}.behavior-actions{display:flex;gap:6px;align-items:center}.behavior-actions button{font-size:12px;padding:6px 9px;border-radius:7px;background:#171c2d;white-space:nowrap}.behavior-actions b{color:#ffd46e;background:#5c47263d;border-radius:4px;padding:0 3px}.behavior-count{display:inline-grid;place-items:center;border-radius:50%;width:30px;height:30px;background:#30384e;font-weight:700}.behavior-count.has-record{background:#513721;color:#ffd169;border:1px solid #8a6034}.behavior-panel .segments button.active{background:linear-gradient(#ffc34d,#e99816);color:#34210f;box-shadow:0 3px 0 #81551b}.grade-panel input:focus{outline:2px solid #9e7dff}.hero .pagehead p{display:none}.workspace{padding-top:18px}.metrics{margin:14px 0}.metric{padding:12px 17px}.hero{padding:14px 20px}@media(max-width:760px){.grid{grid-template-columns:1fr}.aside{grid-template-columns:1fr}.wheel-wrap{width:min(var(--wheel-size,400px),100%);height:auto}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.playing-card{height:145px}.playing-card strong{font-size:17px}.behavior-metrics{grid-template-columns:repeat(2,1fr)}.reel-window .reel{font-size:23px}.winner .result-name{font-size:25px}.stage{min-height:420px}.projecting .wheel-wrap{width:min(var(--wheel-size,400px),100%);height:auto}}
.music-controls{display:flex;align-items:center;gap:8px;padding:5px 9px;border:1px solid #6a5a903d;border-radius:12px;background:#101528bc}.music-controls button{font-size:12px;padding:6px 9px;white-space:nowrap;background:transparent;border:0}.music-controls input{width:82px;accent-color:#b28aff}.music-controls output{font-size:12px;min-width:30px}.top{flex-wrap:wrap;gap:10px}.top .brand{min-width:220px}.top .spacer{min-width:0}.top #home-btn{font-size:12px;padding:8px}.welcome-screen{min-height:100svh;position:relative;isolation:isolate;background:#12132b url('assets/welcome.webp') center center/cover no-repeat;display:flex;flex-direction:column;padding:32px 5vw;overflow:hidden}.welcome-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0b1026e8 0%,#10102f9c 32%,#10102f05 70%),linear-gradient(0deg,#0b1026aa,transparent 30%)}.welcome-top,.welcome-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center}.welcome-brand{font-size:20px;font-weight:700;letter-spacing:5px;color:#e2d1ff}.welcome-copy{margin:auto 0;max-width:620px;padding:50px 0}.welcome-copy h1{font-size:clamp(60px,7.5vw,118px);line-height:1.05;letter-spacing:-4px;margin:18px 0 25px;text-shadow:0 5px 0 #302354,0 15px 30px #0009;color:#f4f0ff}.welcome-copy h1 span{color:#ffd66a;text-shadow:0 5px 0 #936223,0 10px 30px #cf99265c}.welcome-copy p{font-size:24px;line-height:1.5;color:#e5e3fc;margin:0 0 32px}.welcome-actions{display:flex;flex-wrap:wrap;gap:15px}.welcome-actions button{font-size:15px;font-weight:700;padding:16px 23px;min-height:55px}.welcome-copy>small{display:block;margin-top:27px;font-size:12px;color:#bec2dd;max-width:440px}.welcome-bottom{font-size:13px;color:#c1c6df;padding-top:15px}.welcome-screen:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background-image:radial-gradient(#fff9 1px,transparent 2px),radial-gradient(#d3b6ff8c 1px,transparent 2px);background-size:173px 193px,251px 223px;animation:welcome-dust 30s linear infinite}@keyframes welcome-dust{to{background-position:80px -180px,-100px -80px}}.guide-list{padding-left:23px}.guide-list li{margin:14px 0;line-height:1.8}.attendance-panel{margin-bottom:22px}.attendance-panel .toolbar h2{margin-bottom:5px}.attendance-panel .toolbar .muted{font-size:13px}.attendance-present{color:#66e4bd;background:#173b323b}.attendance-absent{color:#ff9da8;background:#5525363b}.class-roster{margin-top:20px}.participation-panel{margin-top:22px}.participation-panel .called{background:#34336e;color:#d3c9ff}.participation-panel .uncalled{background:#153d35;color:#6ee3c2}.participation-panel td{padding-top:13px;padding-bottom:13px}.participation-panel .tag{margin-left:8px}.participation-panel tbody tr:has(.uncalled){background:#36574e15}.participation-panel td:nth-child(4){color:#ffdc6f;font-weight:700}#comment-value{width:100%;white-space:normal;max-width:100%}#comment-preview{min-height:95px}@media(max-width:760px){.welcome-screen{padding:22px;background-position:65% center}.welcome-shade{background:linear-gradient(90deg,#0b1026e8,#10102fa1),linear-gradient(0deg,#0b1026aa,transparent)}.welcome-top{flex-wrap:wrap}.welcome-copy{padding:45px 0}.welcome-copy h1{font-size:68px;letter-spacing:-2px}.welcome-copy p{font-size:21px}.welcome-actions{flex-direction:column;align-items:flex-start}.welcome-bottom{flex-direction:column;align-items:flex-start;gap:8px}.music-controls input{width:80px}.top .music-controls{order:3}.attendance-panel .toolbar .row{width:100%}.attendance-panel input[type=date]{max-width:180px}.attendance-panel button{font-size:12px}.attendance-panel .metric strong{font-size:23px}.welcome-screen .music-controls{max-width:100%}}@media(prefers-reduced-motion:reduce){.welcome-screen:after{animation:none}}
.absence-toggle{display:inline-flex;align-items:center;gap:9px;cursor:pointer;padding:5px 9px;border-radius:8px;background:#2b3046;color:#acb5cd}.absence-toggle input{accent-color:#ff7e94;width:19px;height:19px;margin:0}.absence-toggle:has(input:checked){color:#ffb2bc;background:#552839}.attendance-panel .note{margin:15px 0}#attendance-save-inline{min-width:200px}
/* Keep the full student name on one line when presenting. */
.winner .result-name{display:flex;align-items:center;justify-content:center;gap:.25em;white-space:nowrap;line-height:1.45;width:100%;min-width:0}.student-result-text{white-space:nowrap;flex:0 0 auto}.result-name .celebrate-icon{flex:0 0 auto;font-size:.65em}.selection-complete{display:flex;justify-content:center;align-items:center;gap:8px;font-size:15px!important;color:#c2eedc!important;text-transform:none;letter-spacing:0}.projecting .winner{width:100%;max-width:1300px}.projecting .winner .result-name{font-size:clamp(32px,5.4vw,82px)}.projecting .result-card{padding:20px 24px}.projecting .selection-complete{font-size:18px!important}@media(max-width:760px){.projecting .result-card{padding:15px 10px}.selection-complete{font-size:13px!important}.projecting .selection-complete{font-size:14px!important}}
.app-logo{width:52px;height:52px;flex:0 0 auto;filter:drop-shadow(0 4px 8px #0004)}.brand{min-width:240px!important}.class-picker{display:flex;gap:8px;align-items:center;padding:4px 9px;border:1px solid #465575;border-radius:12px;background:#29344a;color:#ffd975;min-width:230px;max-width:340px}.class-picker>span:first-child{font-size:24px;color:#79e2d9}.class-picker #class-select{background:transparent;border:0;padding:8px 0;max-width:none;min-width:0;flex:1;font-weight:700;color:#ffe083}.class-count{white-space:nowrap;font-size:12px;color:#b7c2d9}.nav .donate-btn,.donate-btn{background:linear-gradient(#ffe29a,#f2b94c)!important;color:#3b260b!important;border:1px solid #ffda86!important;box-shadow:inset 0 2px 0 #fff9,0 4px 0 #96631d,0 7px 18px #f6bc3830;font-weight:700;white-space:nowrap}.nav .donate-btn{margin-left:auto;padding:8px 16px}.welcome-brand{display:flex;align-items:center;gap:12px}.welcome-brand .app-logo{width:55px;height:55px}.donate-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px;align-items:start}.donate-qr{width:100%;border:12px solid white;border-radius:16px;image-rendering:auto;background:white}.donate-details{display:flex;flex-direction:column;gap:10px}.donate-details>div{padding:12px 15px;border:1px solid #38425a;border-radius:10px;background:#1d273b}.donate-details small{display:block;font-size:11px;letter-spacing:.5px;color:#a9b6cc}.donate-details strong{display:block;font-size:17px;margin:4px 0;overflow-wrap:anywhere;user-select:text}.donate-details button{font-size:12px;padding:5px 9px;color:#ffe7a4;margin-top:5px}.behavior-record{padding:16px;margin:12px 0;border:1px solid #414967;border-radius:12px;background:#20283d}.behavior-record>strong{display:block;margin:10px 0}.behavior-record .row{margin-top:12px}.behavior-record p{margin:8px 0;white-space:pre-wrap}.kind-positive{color:#77e0b3!important}.kind-reminder{color:#ffb784!important}.kind-learning{color:#acaaff!important}.metric.kind-positive strong{color:#63e4ac}.metric.kind-reminder strong{color:#ffb984}.metric.kind-learning strong{color:#b4a0ff}.behavior-count.kind-positive{background:#1d453d}.behavior-count.kind-reminder{background:#51382b}.behavior-count.kind-learning{background:#343359}.behavior-actions button.kind-positive{border-color:#2c6255}.behavior-actions button.kind-reminder{border-color:#70482d}.behavior-actions button.kind-learning{border-color:#504c86}.behavior-search,.behavior-dates{margin-top:14px}.behavior-actions{flex-wrap:wrap;min-width:520px;max-width:850px}.behavior-panel th{white-space:normal}.behavior-panel td{vertical-align:middle}.behavior-panel .fixed-name{min-width:180px}@media(max-width:760px){.class-picker{max-width:none;width:100%;min-width:0}.class-picker #class-select{min-width:0;width:0}.app-logo{width:44px;height:44px}.nav .donate-btn{margin-left:8px}.donate-layout{grid-template-columns:1fr}.donate-qr{max-width:230px;margin:0 auto}.donate-details strong{font-size:16px}.welcome-brand{font-size:17px;letter-spacing:3px}.behavior-panel .row{width:100%}.behavior-search input{width:100%}}
@media(min-width:761px) and (max-width:1600px){.top>.tag.green{display:none}.top{gap:9px}.top .class-picker{max-width:300px}.top .brand{min-width:220px!important}.top .brand strong{font-size:17px}.top .music-controls input{width:65px}}
/* v1.6: readable native menus and a separate assessment console */
select{color-scheme:dark}select option,select optgroup{background:#1c263a;color:#eef2ff}select option:checked{background:#5140a1;color:#fff}.class-picker #class-select{color:#ffe7a0}.class-picker #class-select option{background:#202b41;color:#f3f5ff}.class-picker #class-select option:checked{background:#5140a1;color:#fff}
.quick-assessments{display:grid;gap:16px;margin-top:20px}.quick-assessment{text-align:left;border-color:#3b686e;background:linear-gradient(135deg,#283447,#1b293c);box-shadow:inset 0 1px 0 #ffffff12,0 12px 28px #0002;padding:22px 24px}.qa-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid #ffffff0d;padding-bottom:14px}.qa-heading h2{margin:0;color:#6ee6cc;font-size:16px}.qa-heading h2 span{color:#f2f5ff;margin-left:8px}.qa-grading{display:flex;gap:20px;justify-content:space-between;align-items:start;padding:16px 0}.qa-grade-main{flex:1;min-width:0}.qa-grade-main>label{display:flex;align-items:center;gap:10px;color:#bdc9de;font-size:14px;margin-bottom:12px}.qa-grade-main select{padding:6px 10px;max-width:240px}.qa-scores{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.qa-scores>span{color:#bac6db;margin-right:4px}.qa-scores button{padding:6px 12px;min-width:38px;background:linear-gradient(#46536a,#344259);border-color:#56647c;font-weight:700;box-shadow:inset 0 1px 0 #ffffff14,0 2px 0 #121b2c}.qa-scores button.selected{background:linear-gradient(#ffd36a,#e8a62d);border-color:#ffe196;color:#342209;box-shadow:0 0 12px #e8a62d33}.qa-decimal{display:flex;gap:7px;flex-wrap:wrap}.qa-decimal input{width:175px;min-width:0;padding:6px 10px}.qa-grade-status{display:block;font-size:14px;color:#9de8d2;margin-top:10px}.qa-stars{display:flex;gap:7px;align-items:center;flex-wrap:wrap;border:1px solid #695437;border-radius:12px;padding:10px;background:linear-gradient(#493c2c,#332d29);color:#ffde8d;max-width:100%}.qa-stars button{padding:6px 10px;background:linear-gradient(#735c36,#564327);color:#ffe39e;border-color:#997746}.qa-stars [data-star-total]{font-size:12px;color:#ead7b4}.qa-behavior{border-top:1px solid #ffffff0d;padding-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.qa-behavior>strong{color:#ffdf91}.qa-behavior .behavior-actions{display:flex;gap:7px;flex-wrap:wrap;min-width:0;max-width:100%}.qa-behavior button{padding:6px 10px;font-size:14px}.qa-behavior details{width:100%;border:1px solid #43516c;border-radius:10px;background:#182338;padding:10px 12px;order:3}.qa-behavior summary{cursor:pointer;color:#c9bcff;font-weight:600}.qa-category-group{padding:10px 0}.qa-category-group>strong{display:block;font-size:14px;color:#c2cde0;margin-bottom:6px}.qa-behavior-status{color:#9de8d2;font-size:14px;width:100%}.qa-note{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.qa-note input{flex:1;min-width:180px;background:#162034}.qa-note span{color:#9de8d2;align-self:center}.projecting .quick-assessments{max-width:1300px;margin:20px auto}.projecting .quick-assessment{padding:20px 24px}.projecting .workspace>.shortcut-bar{max-width:1300px;margin:12px auto}.projecting .stage{min-height:70vh}.quick-assessment .kind-learning{color:#d6c8ff;background:linear-gradient(#413653,#302840);border-color:#6c5b88}.quick-assessment .kind-positive{color:#9aefd2;background:linear-gradient(#2d504b,#213f3b);border-color:#46756b}.quick-assessment .kind-reminder{color:#ffd3b1;background:linear-gradient(#584339,#40302b);border-color:#836450}
@media(max-width:1100px){.qa-grading{flex-wrap:wrap}.qa-stars{width:auto}.qa-grade-main{flex-basis:100%}}@media(max-width:760px){.quick-assessment,.projecting .quick-assessment{padding:16px 12px}.qa-heading h2 span{display:block;margin-left:0}.qa-note input{min-width:0;flex-basis:100%}.qa-scores button{padding:6px 10px}.qa-stars{gap:6px}.qa-stars strong{width:100%}.qa-heading{gap:8px}}
/* v1.7: assessment follows the draw stage, independent of sidebar height. */
.draw-layout{align-items:start}.draw-main{min-width:0;display:flex;flex-direction:column;gap:16px}.draw-main .quick-assessments{margin-top:0}.draw-main .stage{min-height:440px}.draw-main .winner{padding:20px 12px}.draw-main .winner h2{margin:8px 0 14px}.draw-main .quick-assessment{padding:18px 20px}.import-replace-confirm,.import-restore-option{display:flex;gap:10px;align-items:flex-start;margin:16px 0;color:#c5d3e8}.import-replace-confirm input,.import-restore-option input{margin-top:5px;flex-shrink:0;accent-color:#a581ff}.projecting .draw-main{max-width:1300px;margin:auto}.projecting .draw-main .quick-assessments{margin:0}.projecting .draw-main .stage{min-height:55vh}@media(max-width:760px){.draw-main .quick-assessment{padding:16px 12px}.draw-main .stage{min-height:380px}.draw-layout .aside{grid-template-columns:1fr 1fr}.draw-main .qa-grading{gap:12px}}
/* v1.8: one roster, readable lesson board */
.attendance-bar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;background:#172e3d;border:1px solid #315363;border-radius:12px;padding:14px;margin:14px 0}.attendance-bar label{display:flex;align-items:center;gap:10px}.attendance-bar input{width:auto}.attendance-live{color:#a0f0d4;font-weight:700}.unified-roster td{padding:10px 14px}.counter-cell{display:flex;align-items:center;gap:8px;white-space:nowrap}.counter-cell span{min-width:32px;text-align:center}.counter-cell button{padding:5px 10px}.star-count{color:var(--gold)}.schedule-filters{display:flex;align-items:end;flex-wrap:wrap;gap:16px;margin-bottom:24px}.schedule-filters label{display:grid;gap:8px;font-weight:600;min-width:190px}.schedule-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;align-items:start}.schedule-day>h2{font-size:20px;border-bottom:1px solid var(--border);padding-bottom:12px}.session-group{border-radius:14px;padding:12px;margin:14px 0}.session-group.morning{background:#302c22;border:1px solid #655332}.session-group.afternoon{background:#23263d;border:1px solid #485589}.session-group h3{display:flex;justify-content:space-between;font-size:16px;margin:0 0 14px}.morning h3,.morning .lesson-period{color:#ffe19a}.afternoon h3,.afternoon .lesson-period{color:#bccaff}.lesson.morning{border:1px solid #77613c;border-left:4px solid #efbf62;background:#22222b}.lesson.afternoon{border:1px solid #5466a3;border-left:4px solid #9aafff;background:#1e2538}.lesson{padding:14px!important;border-radius:12px}.lesson-top{display:flex;justify-content:space-between;gap:8px;margin-bottom:12px}.lesson-period{font-weight:800}.lesson-subject{display:block;font-size:17px;line-height:1.55}.lesson-class{color:#d7e0f5;margin-top:6px;font-weight:600}.lesson-title{font-size:16px;line-height:1.65;margin:12px 0}.lesson-preparation{font-size:14px;color:#c8d3e8}.lesson-actions{margin-top:12px}.lesson-done{border-bottom:3px solid #67ceab!important}.session-empty{color:#a9b3cb;font-size:14px;margin:0}.schedule-empty{text-align:center;padding:30px}.schedule-preview{max-height:50vh;overflow:auto;margin:16px 0}.schedule-preview th{position:sticky;top:0;background:#202637}.qa-note input{min-width:0}.dialog-body .table-wrap{max-height:65vh}.unified-roster .table-wrap{max-height:70vh;overflow:auto}.unified-roster thead th{position:sticky;top:0;background:#1b2133;z-index:1}@media(max-width:600px){.attendance-bar label{flex-wrap:wrap}.attendance-bar button{flex:1}.schedule-filters label{width:100%}.schedule-board{grid-template-columns:1fr}.unified-roster{padding:14px!important}.attendance-bar{padding:10px}.lesson-title{font-size:16px}}
.subject-icon{display:inline-block;width:24px;height:24px;vertical-align:middle;flex-shrink:0;margin-right:5px;color:#d1e5ff}.schedule-preview .subject-icon{width:20px;height:20px}
/* v1.9 timetable and school bell */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}.schedule-overview{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:24px;align-items:start;margin-bottom:24px}.schedule-overview .pagehead{display:block;margin-bottom:0}.schedule-overview .pagehead .actions{justify-content:flex-start;margin-top:20px}.school-clock{background:linear-gradient(120deg,#163c55,#085464);border:1px solid #558598;border-radius:18px;padding:20px;color:#f4fbff;box-shadow:0 10px 25px #0003}.clock-top,.clock-main,.clock-bottom,.clock-footer{display:flex;justify-content:space-between;gap:14px;align-items:center}.clock-top{font-size:14px;color:#cee4f4}.clock-live{color:#ffe09a;font-size:12px;white-space:nowrap}.clock-main{margin:17px 0;justify-content:flex-start}.clock-main>strong{font-size:36px;font-variant-numeric:tabular-nums;letter-spacing:-1px;white-space:nowrap}.clock-main h2{font-size:18px;margin:0 0 5px}.clock-main p{font-size:14px;margin:0;line-height:1.5}.clock-progress{height:5px;background:#062f4280;border-radius:4px;overflow:hidden}.clock-progress span{display:block;height:100%;background:#73e6c9;transition:width 1s linear}.clock-bottom{margin:14px 0;align-items:start}.clock-bottom>div:last-child{text-align:right}.clock-bottom small{display:block;font-size:14px;color:#c8e2ef;margin-bottom:5px}.clock-bottom strong{font-size:17px;font-variant-numeric:tabular-nums}.clock-footer{font-size:12px;color:#b7d4e2}.clock-footer button{background:transparent;border:0;padding:2px;color:#d2f2ff;text-decoration:underline;font-size:14px}.timetable-wrap{max-height:78vh;overflow:auto;border:1px solid #5e718f;border-radius:12px}.timetable{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:1050px}.timetable th,.timetable td{border-right:1px solid #53627d;border-bottom:1px solid #53627d;padding:12px;vertical-align:top}.timetable th:last-child,.timetable td:last-child{border-right:0}.timetable thead th{position:sticky;top:0;background:#28344d;z-index:4;text-align:center;font-size:17px;color:#edf5ff;padding:15px}.timetable thead th:first-child{width:140px;left:0;z-index:5}.timetable thead small{display:block;margin-top:7px;font-size:14px;font-weight:500;color:#c2d4ec}.timetable .period-heading{position:sticky;left:0;z-index:2;width:140px;background:#262b38}.timetable .morning .period-heading{background:#373027}.timetable .afternoon .period-heading{background:#262f48}.period-heading strong{font-size:17px;display:block}.period-heading small{font-size:14px;display:block;margin-top:8px;font-weight:500;white-space:nowrap}.timetable .session-heading th{padding:13px 16px;text-align:left;font-size:17px}.timetable .session-heading.morning th{background:#5d4527;color:#ffdf91}.timetable .session-heading.afternoon th{background:#343c69;color:#d2ddff}.session-heading span{font-size:14px;font-weight:500;margin-left:18px}.timetable tr.morning td{background:#29282b}.timetable tr.afternoon td{background:#222b3d}.timetable tbody tr:hover td{filter:none}.timetable-lesson{padding:0;margin:0}.timetable-lesson+.timetable-lesson{border-top:1px dashed #8b95ab;margin-top:16px;padding-top:16px}.timetable-subject{display:flex;align-items:center;gap:5px;font-size:16px;line-height:1.55}.timetable-subject .subject-icon{width:22px;height:22px;margin:0}.timetable-class{font-weight:700;color:#bdeafa;margin-top:6px;font-size:15px}.timetable-class span{color:#d2d9ea;font-size:14px;font-weight:500;margin-left:8px}.timetable-lesson>p{line-height:1.6;font-size:15px;margin:12px 0}.timetable-lesson details{font-size:14px;margin:9px 0}.timetable-lesson details p{line-height:1.6}.lesson-cell-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:#bdcce4;margin-top:12px}.lesson-cell-footer .row{gap:5px}.lesson-cell-footer button{padding:3px 9px;min-height:30px}.lesson-teacher{display:block;margin-top:9px;color:#b7c6db;font-size:12px;line-height:1.5}.empty-period{display:block;text-align:center;padding:18px;color:#8a9bb5}.timetable .current-lesson{box-shadow:inset 0 0 0 3px #59e0b7;background:#193c38!important}.timetable-lesson.lesson-done{border-bottom:0!important}.timetable-lesson.lesson-done .lesson-cell-footer>span{color:#8beaaf}.timetable-hint{margin-bottom:0}.hours-layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start}.hours-general{display:flex;align-items:start;gap:28px;flex-wrap:wrap}.hours-general>label{display:grid;gap:8px;max-width:220px;font-weight:600}.hours-general fieldset{border:1px solid #5b6685;border-radius:12px;padding:14px}.day-check{display:flex;align-items:center;gap:7px;font-size:15px}.day-check input{width:18px;height:18px}.hours-sessions{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0}.hours-session{min-width:0;border:1px solid #63708c;border-radius:12px;overflow:hidden;padding:15px}.hours-session.morning{border-color:#a1854e;background:#352d2440}.hours-session.afternoon{border-color:#788ecd;background:#26355370}.hours-session h2{font-size:19px;margin:0 0 16px}.hours-session th{font-size:14px;white-space:normal;padding:10px 5px}.hours-session td{padding:9px 5px}.hours-session input[type=time]{min-width:105px;width:110px}.hours-session input[type=number]{width:65px;padding:9px}.hours-session output{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:15px}.hours-session>button{margin-top:12px}.hours-help{margin-top:20px}.hours-help p{line-height:1.7;font-size:15px}#school-hours-error{color:#ffa1ad;font-weight:600}#school-hours-saved{color:#a1eace;font-size:15px}@media(max-width:1400px){.hours-sessions{grid-template-columns:1fr}.hours-layout{grid-template-columns:minmax(0,1fr) 370px}}@media(max-width:900px){.schedule-overview,.hours-layout{grid-template-columns:1fr}.school-clock{max-width:600px;width:100%;box-sizing:border-box}.hours-layout>aside{order:-1}.schedule-filters label{min-width:160px}.timetable-wrap{max-height:75vh}}@media(max-width:500px){.school-clock{padding:16px}.clock-main{gap:12px}.clock-main>strong{font-size:32px}.clock-main h2{font-size:16px}.clock-bottom strong{font-size:15px}.clock-main p{font-size:13px}.clock-footer{flex-wrap:wrap}.hours-session{padding:10px}.hours-session input[type=time]{min-width:98px;width:98px}.hours-session input[type=number]{width:56px}.hours-form{padding:14px!important}.session-heading span{display:block;margin:5px 0 0}.timetable thead th:first-child,.timetable .period-heading{width:115px}.period-heading small{font-size:13px}.schedule-panel{padding:14px!important}}
.timetable th,.timetable td{white-space:normal;overflow-wrap:anywhere}.timetable-lesson{min-width:0}.timetable-lesson>p{white-space:normal;overflow-wrap:anywhere}.timetable-subject strong{min-width:0;overflow-wrap:anywhere}
.hours-session .hours-time{width:98px;min-width:90px;font-variant-numeric:tabular-nums}
/* v1.10 readable navigation */
.nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;padding:13px 28px;overflow:visible;background:linear-gradient(180deg,#182137,#11192b)}.nav button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 12px;font-size:15px;font-weight:600;color:#d7e3f8;border:1px solid #42516e;background:linear-gradient(160deg,#26344e,#1b253b);border-radius:12px;box-shadow:inset 0 1px 0 #ffffff12,0 3px 0 #0b1323;white-space:normal;text-align:left;line-height:1.4}.nav button span{margin:0}.nav .nav-icon{display:flex;flex:none;width:28px;height:28px;color:#a9cfff}.nav-icon svg{width:28px;height:28px}.nav button:hover{border-color:#9cbbef;background:#304464}.nav button.active{background:linear-gradient(145deg,#9066ff,#5832cf);border:1px solid #bba0ff;box-shadow:inset 0 1px 0 #e3d4ff55,0 4px 0 #352278,0 5px 18px #8b60ff30;color:#fff}.nav button.active .nav-icon{color:#ffe6a0}.nav .donate-btn{margin:0;color:#4a3010;background:linear-gradient(160deg,#ffec9c,#ffc556);border:1px solid #ffe4a2;justify-content:center}.nav .donate-btn:hover{background:#ffe29a}@media(max-width:1100px){.nav{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:760px){.nav{grid-template-columns:repeat(3,minmax(0,1fr));padding:12px 16px;gap:8px}.nav button{font-size:14px;gap:8px;padding:9px}.nav .nav-icon,.nav-icon svg{width:25px;height:25px}}@media(max-width:500px){.nav{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px 12px}.nav button{justify-content:flex-start;min-height:54px}.nav .donate-btn{justify-content:center}}
/* v1.11 compact single-line navigation and classroom tools */
.nav{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:9px 24px;scrollbar-width:thin}.nav button{flex:0 0 auto;min-height:38px;padding:7px 10px;font-size:14px;gap:7px;white-space:nowrap;font-weight:600;box-shadow:inset 0 1px 0 #ffffff0b;border-radius:9px}.nav .nav-icon,.nav-icon svg{width:20px;height:20px}.nav button.active{box-shadow:inset 0 1px 0 #ffffff24,0 2px 0 #352278}.top .header-donate{font-size:13px;padding:7px 12px;min-height:34px;background:linear-gradient(155deg,#ffe595,#f6bd53);color:#503512;border:1px solid #ffe2a1;box-shadow:inset 0 1px 0 #fff8;border-radius:9px}.attendance-modal-controls{padding-bottom:12px}.attendance-modal-controls>.row{margin:0 0 12px}.attendance-modal-controls p{margin:6px 0;font-size:14px;line-height:1.6}.attendance-modal-controls input[type=date]{width:auto}.attendance-modal-controls #modal-attendance-count{color:#98e8ce;font-size:14px}#attendance-list{max-height:48vh;overflow:auto;border:1px solid #4a5773;border-radius:12px;padding:0 12px}#attendance-list .student-strip{cursor:pointer;user-select:none;padding:12px 8px;font-size:15px}#attendance-list .student-strip:has(input:checked){background:#622c3c55;color:#ffc1cc}#attendance-list input{width:20px;height:20px;accent-color:#a17aff}.activity-timer-dock{position:fixed;right:22px;bottom:22px;z-index:50;background:linear-gradient(145deg,#25364d,#162138);border:1px solid #7aaac0;box-shadow:0 10px 30px #0007;border-radius:15px;padding:14px 18px;min-width:240px;display:grid;gap:6px}.activity-caption{font-size:14px;color:#c4e7ef}.activity-timer-dock>strong{font-size:36px;line-height:1.2;color:#ffe497;font-variant-numeric:tabular-nums}.activity-timer-dock>[data-activity-status]{font-size:14px;color:#bcd9df}.activity-timer-dock .row{gap:6px}.activity-timer-dock button{font-size:13px;padding:6px 10px}.current-question{margin:16px 0;border-color:#5e9ea9;background:linear-gradient(120deg,#1b3843,#242e48)}.current-question>strong{color:#a6ecde;font-size:15px}.current-question p{font-size:22px;line-height:1.6;margin:10px 0 14px}.current-question button{padding:7px 12px}.attendance-bar{position:relative}.projecting .activity-timer-dock{right:24px;bottom:80px}@media(max-width:760px){.nav{padding:8px 12px}.nav button{font-size:14px;min-height:38px}.nav .nav-icon,.nav-icon svg{width:20px;height:20px}.activity-timer-dock{right:12px;bottom:12px;min-width:220px;padding:12px}.current-question p{font-size:19px}}
/* v1.12: classroom group tables and draggable student cards */
.group-board-dialog{width:min(1160px,96vw);max-width:1160px;max-height:94dvh}.group-board-dialog .dialog-body{padding:20px}.group-board-intro{display:flex;align-items:center;gap:20px;justify-content:space-between;margin-bottom:15px}.group-board-intro p{max-width:650px;margin:0;color:#b9c5dc;font-size:14px}.group-mode{flex-shrink:0}.group-setup{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:18px;font-size:14px}.group-setup label{display:flex;gap:10px;align-items:center;font-weight:700}.group-setup input{width:74px}.group-fixed-note{color:#7edac6}.group-tables{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.group-table{border:1px solid color-mix(in srgb,var(--group-color) 55%,#263047);border-radius:18px;background:linear-gradient(140deg,color-mix(in srgb,var(--group-color) 13%,#171d30),#171d30 75%);box-shadow:0 5px 0 #101525,0 12px 25px #0002;min-width:0;transition:border-color .15s,box-shadow .15s,transform .15s}.group-table-head{display:flex;gap:10px;align-items:center;padding:13px 14px;border-bottom:1px solid #ffffff12;color:var(--group-color)}.group-table-icon{font-size:26px}.group-table-head input{min-width:0;flex:1;border:1px solid transparent;background:transparent;color:var(--group-color);font-size:17px;font-weight:800;padding:6px}.group-table-head input:focus,.group-table-head input:hover{border-color:var(--group-color)}.group-member-count{font-weight:700;font-size:13px;white-space:nowrap;background:#1015268a;border-radius:20px;padding:5px 9px}.group-members{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;min-height:116px;max-height:260px;overflow:auto;align-content:start}.group-student{display:flex;gap:8px;align-items:center;text-align:left;width:100%;min-width:0;white-space:normal;min-height:48px;padding:8px;border:1px solid #45516c;background:linear-gradient(145deg,#303a53,#232c42);box-shadow:0 3px 0 #101527;color:#edf2ff;border-radius:10px;cursor:grab;font-size:13px;font-weight:600;transition:background .15s,border-color .15s}.group-student:active{cursor:grabbing}.group-student.selected{border-color:#b5a0ff;background:linear-gradient(145deg,#59428c,#392f65);box-shadow:0 0 0 2px #b5a0ff33}.group-stt{flex-shrink:0;border-radius:7px;background:#0e162780;color:#c4d3ed;font-size:12px;min-width:24px;height:24px;display:grid;place-items:center}.group-student-name{flex:1;overflow-wrap:anywhere}.group-student-name small{display:block;color:#f4c084;font-size:11px}.group-card-check{color:#c9b7ff;font-size:14px;flex-shrink:0}.group-drop-hint{grid-column:1/-1;text-align:center;padding:24px 8px;color:#8798b9;font-size:14px;margin:0}.group-table.drag-over,.group-pool.drag-over{border-color:#c0a8ff;box-shadow:0 0 0 3px #ac8dff50,0 10px 30px #0004}.is-dragging [data-drop-group]{border-style:dashed}.group-pool{margin-top:22px;border:1px solid #3e4b67;border-radius:16px;background:#11192a;padding:16px}.group-pool-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.group-pool h3{margin:0 0 5px;font-size:17px}.group-pool h3 span{font-size:13px;background:#35425c;border-radius:20px;padding:3px 8px}.group-pool small{color:#99abc9;font-size:12px}.group-pool-head input{width:230px}.group-pool-actions{margin:12px 0}.group-pool-actions button{font-size:12px;padding:6px 10px}.group-pool-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;max-height:240px;overflow:auto;padding-bottom:4px}.group-action-bar{position:sticky;bottom:-20px;background:#1c2438f5;backdrop-filter:blur(12px);border-top:1px solid #46536e;margin:20px -20px -20px;padding:14px 20px;z-index:2}.group-transfer,.group-save-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.group-transfer strong{font-size:13px;min-width:100px;color:#c5b6ff}.group-transfer select{max-width:240px;min-width:150px}.group-transfer button{font-size:13px}.group-save-row{justify-content:space-between;margin-top:12px}.group-save-row span{font-size:12px;color:#9fc2bb}#group-message{margin:8px 0 0;color:#a5c9e1;font-size:12px}#group-message:empty{display:none}#group-message.error{color:#ffb2bc}@media(max-width:760px){.group-board-intro{flex-direction:column;align-items:flex-start;gap:12px}.group-members{grid-template-columns:1fr}.group-pool-list{grid-template-columns:repeat(2,minmax(0,1fr))}.group-pool-head{flex-direction:column;align-items:stretch}.group-pool-head input{width:100%}.group-table-head{padding:8px;gap:5px}.group-table-head input{font-size:14px;padding:4px}.group-table-icon{font-size:20px}.group-member-count{padding:4px;font-size:11px}.group-tables{gap:10px}.group-student{font-size:12px}.group-board-dialog .dialog-body{padding:14px}.group-action-bar{margin:16px -14px -14px;padding:12px 14px;bottom:-14px}.group-transfer select{flex:1}.group-transfer strong{width:100%}.group-save-row button{width:100%}}@media(prefers-reduced-motion:reduce){.group-table,.group-student{transition:none}}
@media(min-width:761px){.group-board-dialog{padding:20px;overflow:hidden}.group-board-dialog .dialog-head{margin-bottom:12px}.group-board-dialog .dialog-body{padding:0;max-height:none;overflow:hidden}#group-board{height:min(800px,calc(94dvh - 100px));display:grid;grid-template-rows:auto auto minmax(220px,1fr) minmax(150px,.65fr) auto;gap:12px}.group-board-intro,.group-setup{margin:0}.group-tables{min-height:0;overflow:auto;grid-template-rows:repeat(2,minmax(100px,1fr));grid-auto-rows:150px;padding-bottom:5px}.group-table{display:flex;flex-direction:column;min-height:0}.group-table-head{padding:8px 12px;flex-shrink:0}.group-members{min-height:50px;max-height:none;flex:1}.group-pool{margin:0;min-height:0;display:flex;flex-direction:column;padding:12px}.group-pool-list{min-height:0;max-height:none;flex:1}.group-pool-actions{margin:7px 0}.group-action-bar{position:static;margin:0;padding:10px 0 0;background:transparent;backdrop-filter:none}.group-save-row{margin-top:8px}.group-student:hover{transform:none}}
@media(max-width:760px){.group-board-dialog{padding:14px;overflow:hidden}.group-board-dialog .dialog-head{margin-bottom:10px}.group-board-dialog .dialog-head h2{font-size:18px}.group-board-dialog .dialog-body{padding:0 4px 0 0;max-height:calc(94dvh - 95px)}.group-board-intro p,.group-fixed-note{display:none}.group-board-intro{margin-bottom:10px}.group-mode button{font-size:12px;padding:7px 9px}.group-setup{gap:8px;margin-bottom:12px;font-size:12px}.group-setup input{padding:6px;width:60px}.group-members{padding:7px;gap:7px;max-height:180px;min-height:100px}.group-action-bar{margin:14px 0 0;padding:8px;background:#1c2438fa;bottom:0;border-radius:10px}.group-transfer{gap:6px}.group-transfer strong{width:auto;min-width:95px;font-size:11px}.group-transfer select{min-width:100px;padding:6px;font-size:12px}.group-transfer button{font-size:12px;padding:7px 9px}.group-save-row{margin-top:6px}.group-save-row span{display:none}.group-save-row button{width:100%;padding:7px;font-size:13px}#group-message{font-size:11px;line-height:1.4;max-height:32px;overflow:auto;margin-top:4px}.group-pool{padding:10px}.group-pool small{font-size:11px}}
@media(min-width:761px) and (max-height:850px){#group-board{grid-template-rows:auto auto minmax(140px,1fr) minmax(100px,.6fr) auto;gap:8px}.group-board-intro p{font-size:12px;line-height:1.4}.group-setup input{padding:6px}.group-table-head{padding:5px 10px}.group-table-head input{font-size:15px;padding:3px}.group-members{padding:7px}.group-pool-head h3{font-size:14px}.group-pool-head small{font-size:11px}.group-pool-head input{padding:6px}.group-action-bar{padding-top:7px}.group-transfer button,.group-transfer select{padding:6px 10px}.group-save-row button{padding:7px 12px}.group-save-row{margin-top:5px}#group-message{margin-top:4px;line-height:1.4;max-height:32px;overflow:auto}}
/* v1.13: group calling context across all four games */
.calling-panel{margin:0 0 16px;padding:14px 18px}.calling-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.calling-controls label{display:flex;align-items:center;gap:10px;font-weight:700}.calling-controls select{font-size:14px;padding:7px 10px}.no-repeat-note{color:#88d9bd;font-size:12px}.calling-groups{display:flex;gap:9px;overflow-x:auto;padding:12px 0 3px}.calling-group{min-width:155px;flex:1;white-space:nowrap;border:1px solid color-mix(in srgb,var(--group-color) 35%,#29334a);background:#172137;text-align:left;padding:8px 12px}.calling-group strong{color:var(--group-color);display:block;font-size:14px}.calling-group span{display:block;color:#b7c6dd;font-size:11px}.calling-group.active{background:color-mix(in srgb,var(--group-color) 17%,#172137);border-color:var(--group-color);box-shadow:inset 0 0 0 1px var(--group-color)}.calling-context{margin:9px 0 0;font-size:14px;font-weight:700;color:#d4e1f4}.calling-context small{display:block;color:#99aecb;font-weight:400;font-size:12px}.winner-group{display:block;width:max-content;max-width:100%;margin:9px auto 0;padding:5px 15px;border-radius:20px;background:color-mix(in srgb,var(--group-color) 17%,#172137);border:1px solid color-mix(in srgb,var(--group-color) 50%,#29334a);color:var(--group-color);font-size:18px;font-weight:700}.result-card{flex-direction:column}.projecting .calling-panel{display:block}.projecting .winner-group{font-size:clamp(18px,2.1vw,30px)}@media(max-width:600px){.calling-controls label{width:100%;font-size:13px}.calling-controls select{min-width:0;flex:1;font-size:12px}.calling-panel{padding:12px}.calling-group{min-width:140px}.winner-group{font-size:15px}}