:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#090f21;--muted:#a2b0ce;--gold:#efd196;--green:#79efbc;--red:#ff96ad;--line:#9bb4ea29}*{box-sizing:border-box}body{background:var(--bg);color:#edf2ff;background-image:radial-gradient(at 85% 0,#4941b433,#0000 40%),radial-gradient(at 0 20%,#1a5a9e26,#0000 35%);margin:0;font-family:Inter,Microsoft YaHei,PingFang SC,system-ui,sans-serif;font-size:1rem;line-height:1.5}button{font:inherit;cursor:pointer;touch-action:manipulation;transition:background .18s,border-color .18s,transform .18s}button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}button:disabled{cursor:wait;opacity:.7}button:active:not(:disabled){transform:scale(.97)}.classroom{max-width:1240px;margin:0 auto;padding:34px 32px 24px}.masthead{align-items:center;gap:20px;margin-bottom:32px;display:flex}.brand-symbol{width:60px;height:60px;color:var(--gold);background:linear-gradient(135deg,#2d3459,#121a31);border:1px solid #efd196b3;border-radius:18px;flex:none;place-items:center;font:700 1.1rem/1 system-ui;display:grid;transform:rotate(-6deg);box-shadow:0 0 30px #8e6c4620}.heading h1{letter-spacing:.04em;margin:4px 0 0;font-size:clamp(1.6rem,3.1vw,2.3rem);font-weight:700;line-height:1.3}.heading h1 span{color:var(--gold);padding:0 .12em}.eyebrow{letter-spacing:.16em;color:var(--gold);margin:0;font-size:.75rem;font-weight:600}.edition{text-align:right;color:#d5def3;margin-left:auto;font-size:1rem}.edition span{color:var(--muted);letter-spacing:.16em;margin-top:3px;font-size:.75rem;display:block}.overview{background:linear-gradient(120deg,#18213e,#131a31 65%,#22203d);border:1px solid #d5bd9342;border-radius:24px;grid-template-columns:1.8fr repeat(3,1fr);padding:28px 32px;display:grid;position:relative;overflow:hidden;box-shadow:0 16px 60px #0003}.overview:before{content:"";background:linear-gradient(90deg,#0000,#efd196b0,#0000);height:1px;position:absolute;top:0;left:0;right:0}.date{color:#e2e8fa;margin:6px 0 8px;font-size:1rem}.save-state{color:var(--muted);flex-wrap:wrap;align-items:center;gap:6px;font-size:.875rem;display:flex}.save-state:before{content:"";background:#779bc2;border-radius:50%;width:6px;height:6px}.save-state.saved:before{background:var(--green)}.save-state.error{color:var(--red)}.save-state.error:before{background:var(--red)}.stat{border-left:1px solid var(--line);flex-direction:column;justify-content:center;gap:4px;padding-left:32px;display:flex}.stat span{color:var(--muted);font-size:.875rem}.stat strong{letter-spacing:-.06em;font:500 2.6rem/1.1 ui-monospace,monospace}.present-stat strong{color:var(--green)}.absent-stat strong{color:var(--red)}.pending-stat strong{color:#d1dcfa}.progress{background:#222d47;border-radius:3px;height:4px;margin:16px 10px 0;overflow:hidden}.progress div{background:linear-gradient(90deg,#5baaea,#9a8bea,var(--gold));height:100%;transition:width .25s;box-shadow:0 0 15px #efd19699}.roster-section{margin-top:32px}.roster-heading{justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px;display:flex}.roster-heading h2{align-items:center;gap:10px;margin:0;font-size:1.2rem;font-weight:600;display:flex}.roster-heading h2 span{color:#c5d3ec;background:#22314e;border:1px solid #36425e;border-radius:7px;padding:0 7px;font:500 .875rem/1.5 ui-monospace,monospace}.roster-heading p{color:var(--muted);margin:5px 0 0;font-size:.875rem}.legend{gap:18px;font-size:.875rem;display:flex}.legend span:first-child{color:var(--green)}.legend span:last-child{color:var(--red)}.roster-tools{align-items:center;gap:20px;display:flex}.reset-button,.retry-button{color:#dfd8cb;background:#25273c;border:1px solid #665842;border-radius:10px;min-height:42px;padding:8px 14px;font-size:.875rem}.retry-button{min-height:30px;padding:2px 10px}.reset-button:hover{background:#373047}.student-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;display:grid}.student-card{background:linear-gradient(145deg,#15203a,#10192e);border:1px solid #2b3655;border-radius:18px;padding:16px 18px 18px;transition:border-color .2s,background .2s,box-shadow .2s;position:relative;overflow:hidden;box-shadow:0 6px 18px #00000016}.student-card:after{content:"";background:#4a638e;width:3px;position:absolute;inset:0 auto 0 0}.card-top{justify-content:space-between;align-items:center;gap:5px;display:flex}.student-number{color:#90a2c2;letter-spacing:.12em;font:500 .75rem/1 ui-monospace,monospace}.status-label{color:#a7b6d4;font-size:.875rem}.student-card h3{letter-spacing:.07em;overflow-wrap:anywhere;margin:14px 0 18px;font-size:1.25rem;font-weight:600;line-height:1.45}.student-actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.student-actions button{color:#cedaf1;background:#1c2944;border:1px solid #394865;border-radius:10px;min-height:44px;padding:8px 4px;font-size:.875rem;font-weight:600}.student-actions button span{vertical-align:-.03em;font-size:1.15rem;line-height:1}.student-actions .present-button:hover{color:var(--green);background:#214736;border-color:#58cc9e}.student-actions .absent-button:hover{color:var(--red);background:#52263c;border-color:#dd7793}.student-card.present{background:linear-gradient(135deg,#12392f,#122a2f);border-color:#49b48e;box-shadow:0 0 18px #28c68a15}.student-card.present:after{background:var(--green)}.student-card.present h3,.student-card.present .status-label{color:#a7ffcf}.student-card.present .present-button{color:#073b2b;background:#75efba;border-color:#75efba;box-shadow:0 3px 16px #5eeeae20}.student-card.absent{background:linear-gradient(135deg,#402136,#29203a);border-color:#c96a89;box-shadow:0 0 18px #f478a015}.student-card.absent:after{background:var(--red)}.student-card.absent h3,.student-card.absent .status-label{color:#ffc3d2}.student-card.absent .absent-button{color:#501329;background:#ff9ab1;border-color:#ff9ab1;box-shadow:0 3px 16px #ff7ea320}footer{border-top:1px solid var(--line);color:#8f9fbe;letter-spacing:.05em;justify-content:space-between;gap:20px;margin-top:32px;padding-top:20px;font-size:.75rem;display:flex}.toast{z-index:10;background:#172f2e;border:1px solid #6c847c;border-radius:12px;max-width:calc(100vw - 30px);padding:12px 22px;font-size:.875rem;position:fixed;bottom:28px;left:50%;transform:translate(-50%);box-shadow:0 6px 40px #0008}.error-message{color:#ffcfdb;background:#402538;border:1px solid #865065;border-radius:12px;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding:12px 16px;font-size:.875rem;display:flex}.empty-banner{color:var(--green);text-align:center;margin-top:14px;padding:12px;font-size:.875rem}dialog{color:#edf2ff;background:#17203a;border:1px solid #5b5476;border-radius:22px;width:min(420px,100vw - 32px);padding:28px;box-shadow:0 24px 80px #0009}dialog::backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#050a19bb}dialog h2{margin:0 0 10px;font-size:1.3rem}dialog p{color:#b5c2de;margin:0 0 24px}dialog .dialog-actions{justify-content:flex-end;gap:12px;display:flex}dialog button{color:#e3ebff;background:#24324f;border:1px solid #485475;border-radius:10px;min-height:44px;padding:8px 20px}dialog .confirm-button{color:#292134;background:#efd196;border-color:#efd196}@media (width>=900px){.student-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px #0003}}@media (width<=950px){.student-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.overview{padding:24px}.stat{padding-left:22px}.legend{display:none}}@media (width<=650px){.classroom{padding:24px 16px 20px}.masthead{gap:13px;margin-bottom:24px}.brand-symbol{border-radius:14px;width:46px;height:46px;font-size:.875rem}.edition{display:none}.heading h1{letter-spacing:.01em;font-size:1.55rem}.eyebrow{letter-spacing:.09em;font-size:.75rem}.overview{border-radius:20px;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 0;padding:20px}.overview-title{grid-column:1/-1;grid-template-columns:1fr auto;gap:2px 10px;display:grid}.overview-title .eyebrow{grid-column:1}.date{grid-column:1;margin:3px 0 0;font-size:.875rem}.save-state{grid-area:1/2/3;justify-content:flex-end;align-self:center;max-width:145px;font-size:.75rem}.stat{gap:7px;padding-left:18px}.stat:nth-child(2){border-left:0;padding-left:0}.stat strong{font-size:2.2rem}.stat span{font-size:.875rem}.roster-section{margin-top:26px}.roster-heading{align-items:flex-start;gap:12px}.roster-heading p{max-width:200px;font-size:.875rem}.roster-heading h2{font-size:1.125rem}.roster-tools{gap:0}.reset-button{white-space:nowrap;padding:8px 10px;font-size:.875rem}.student-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.student-card{border-radius:15px;padding:13px 12px 14px}.student-card h3{letter-spacing:.04em;margin:12px 0 16px;font-size:1.18rem}.student-actions{gap:7px}.student-actions button{min-height:44px;font-size:.875rem}.status-label{font-size:.875rem}.student-number{font-size:.75rem}footer{flex-direction:column;gap:4px;font-size:.75rem}.toast{bottom:calc(16px + env(safe-area-inset-bottom))}.error-message{flex-wrap:wrap}}@media (width<=350px){.student-grid{grid-template-columns:1fr}.heading h1{font-size:1.3rem}.overview-title{display:block}.save-state{justify-content:flex-start;max-width:none;margin-top:8px}.classroom{padding-inline:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}