:root{
  color-scheme:light;
  --bg:#f4f7fb;--bg-soft:#eef2ff;--surface:#ffffff;--surface-raised:#ffffff;--surface2:#f7f9fc;
  --text:#172033;--heading:#101729;--muted:#6f7a91;--line:#e3e8f1;--line-strong:#d5dcea;
  --primary:#4f46e5;--primary2:#7c3aed;--accent:#06b6d4;--success:#0f9f6e;--warning:#d97706;--danger:#dc4c64;
  --primary-soft:#eeedff;--success-soft:#e9f8f2;--warning-soft:#fff6e8;--danger-soft:#fff0f3;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04),0 6px 18px rgba(15,23,42,.04);
  --shadow:0 18px 55px rgba(31,41,75,.11);--shadow-lg:0 28px 90px rgba(31,41,75,.18);
  --radius:22px;--radius-sm:14px;--sidebar:272px;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b1020;--bg-soft:#11182b;--surface:#121a2b;--surface-raised:#162036;--surface2:#19243a;
  --text:#eaf0ff;--heading:#f8faff;--muted:#94a0b7;--line:#253149;--line-strong:#31405e;
  --primary:#818cf8;--primary2:#a78bfa;--accent:#22d3ee;--success:#34d399;--warning:#fbbf24;--danger:#fb7185;
  --primary-soft:#20244a;--success-soft:#13362f;--warning-soft:#3b2e16;--danger-soft:#3c1f2b;
  --shadow-sm:0 1px 2px rgba(0,0,0,.16),0 8px 20px rgba(0,0,0,.12);--shadow:0 22px 60px rgba(0,0,0,.28);--shadow-lg:0 32px 100px rgba(0,0,0,.42);
}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg);scroll-behavior:smooth}body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;transition:background .25s ease,color .25s ease}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}.hidden{display:none!important}.muted{color:var(--muted)}.tiny{font-size:12px}.center{text-align:center}.row{display:flex;align-items:center;gap:12px}.spread{justify-content:space-between}.grid{display:grid;gap:18px}.eyebrow{display:inline-block;font-size:10px;font-weight:850;letter-spacing:.17em;color:var(--primary)}

/* focus + interaction */
button,input,select,textarea,a{transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease,opacity .18s ease}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 24%,transparent);outline-offset:2px}

/* network progress: every API request */
.network-loader{position:fixed;z-index:1200;left:0;right:0;top:0;height:3px;pointer-events:none;opacity:0;overflow:hidden;transition:opacity .15s ease}.network-loader.active{opacity:1}.network-loader span{display:block;width:38%;height:100%;background:linear-gradient(90deg,var(--accent),var(--primary),var(--primary2));box-shadow:0 0 14px color-mix(in srgb,var(--primary) 60%,transparent);animation:networkRun 1s ease-in-out infinite}

/* full-screen attendance loader */
.app-loader{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;align-content:center;gap:18px;padding:24px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);animation:fade .2s ease}.loader-visual{position:relative;width:112px;height:112px;display:grid;place-items:center}.loader-core{position:relative;z-index:3;width:62px;height:62px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(145deg,var(--primary),var(--primary2));box-shadow:0 16px 38px color-mix(in srgb,var(--primary) 30%,transparent);color:white;font-size:27px;font-weight:950;animation:corePulse 1.4s ease-in-out infinite}.loader-orbit{position:absolute;border-radius:50%;border:2px solid transparent}.orbit-one{inset:8px;border-top-color:var(--accent);border-right-color:color-mix(in srgb,var(--primary) 45%,transparent);animation:spin 1.15s linear infinite}.orbit-two{inset:0;border-bottom-color:color-mix(in srgb,var(--primary2) 65%,transparent);border-left-color:color-mix(in srgb,var(--accent) 45%,transparent);animation:spinReverse 1.8s linear infinite}.loader-scan{position:absolute;z-index:4;width:58px;height:2px;background:linear-gradient(90deg,transparent,#fff,transparent);filter:drop-shadow(0 0 6px #fff);animation:scanLine 1.4s ease-in-out infinite}.loader-copy{text-align:center;display:flex;flex-direction:column;gap:4px}.loader-copy strong{font-size:16px;color:var(--heading)}.loader-copy span{font-size:12px;color:var(--muted)}.loader-dots{display:flex;justify-content:center;gap:6px}.loader-dots i{width:7px;height:7px;border-radius:999px;background:var(--primary);animation:dotBounce .9s ease-in-out infinite}.loader-dots i:nth-child(2){animation-delay:.12s}.loader-dots i:nth-child(3){animation-delay:.24s}

/* brand */
.brand{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:900;letter-spacing:-.025em;color:var(--heading)}.brand.big{font-size:24px;color:#fff}.brand-mark{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,var(--accent),var(--primary));color:#fff;font-weight:950;box-shadow:0 12px 26px rgba(52,72,229,.25)}

/* login */
.login-shell{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.07fr) minmax(440px,.93fr);background:var(--surface)}.login-art{position:relative;isolation:isolate;overflow:hidden;min-height:100dvh;padding:clamp(36px,4vw,58px);display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(circle at 82% 15%,rgba(34,211,238,.28),transparent 27%),radial-gradient(circle at 14% 90%,rgba(167,139,250,.28),transparent 29%),linear-gradient(145deg,#151b4f 0%,#3730a3 52%,#6d28d9 100%);color:white}.login-art:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 38%,rgba(0,0,0,.14));pointer-events:none}.login-art .brand-mark{background:rgba(255,255,255,.94);color:#4338ca;box-shadow:0 16px 35px rgba(0,0,0,.18)}.hero-copy{position:relative;z-index:2;max-width:760px;margin:13vh 0 9vh}.hero-copy .eyebrow{color:#c7d2fe}.hero-copy h1{max-width:720px;margin:14px 0 22px;font-size:clamp(44px,5.3vw,78px);line-height:.98;letter-spacing:-.06em}.hero-copy p{max-width:560px;margin:0;font-size:18px;line-height:1.65;color:#e6e8ff}.hero-points{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.hero-points span{display:flex;align-items:center;gap:7px;padding:10px 13px;border:1px solid rgba(255,255,255,.17);border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter:blur(12px);font-size:12px;font-weight:700;color:#f7f7ff}.hero-points b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.14)}.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.32}.orb-a{width:430px;height:430px;right:-180px;top:-160px;background:#67e8f9}.orb-b{width:340px;height:340px;left:22%;bottom:-220px;background:#f0abfc}.grid-glow{position:absolute;inset:0;opacity:.08;background-image:linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,transparent,black 25%,black 75%,transparent)}.login-panel{position:relative;display:grid;place-items:center;padding:clamp(30px,5vw,72px);background:var(--surface)}.login-top-actions{position:absolute;top:24px;right:24px}.auth-card{width:min(440px,100%);animation:rise .45s ease both}.mobile-brand{display:none;margin-bottom:30px}.auth-card h2{margin:8px 0 7px;color:var(--heading);font-size:35px;line-height:1.08;letter-spacing:-.045em}.auth-card>p{margin:0 0 8px}.auth-card label:not(.check){display:block;margin-top:21px;font-size:12px;font-weight:800;color:var(--text)}.auth-card input:not([type=checkbox]),.field input,.field select,.field textarea,.search{width:100%;min-height:50px;margin-top:8px;padding:13px 15px;border:1px solid var(--line);border-radius:14px;outline:none;background:var(--surface2);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}.auth-card input:focus,.field input:focus,.field select:focus,.field textarea:focus,.search:focus{border-color:color-mix(in srgb,var(--primary) 60%,var(--line));background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 11%,transparent)}.password-row{position:relative}.password-row input{padding-right:72px!important}.password-row .text-btn{position:absolute;right:9px;top:16px}.auth-options{margin-top:16px}.check{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.check input{width:16px;height:16px;accent-color:var(--primary)}.text-btn{border:0;background:transparent;color:var(--primary);font-size:12px;font-weight:800;padding:8px;border-radius:9px}.text-btn:hover{background:color-mix(in srgb,var(--primary) 8%,transparent)}.primary,.secondary{border-radius:14px;padding:13px 17px;font-weight:850}.primary{border:0;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 11px 26px color-mix(in srgb,var(--primary) 26%,transparent)}.primary:hover{transform:translateY(-1px);box-shadow:0 15px 30px color-mix(in srgb,var(--primary) 30%,transparent)}.primary:active,.secondary:active{transform:scale(.985)}.primary:disabled{opacity:.62}.secondary{border:1px solid var(--line);background:var(--surface);color:var(--text)}.secondary:hover{border-color:color-mix(in srgb,var(--primary) 36%,var(--line));background:var(--primary-soft);color:var(--primary)}.full{width:100%;display:flex;justify-content:space-between;align-items:center}.login-submit{min-height:51px;margin-top:24px}.button-loading{display:flex;justify-content:center;align-items:center;gap:9px;width:100%}.button-loading i,.inline-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.38);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}.demo-box{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:22px;padding:13px;border:1px solid var(--line);border-radius:17px;background:var(--surface2)}.demo-box strong{grid-column:1/-1;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.demo-box button{min-height:39px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--text);font-size:12px;font-weight:750}.demo-box button:hover{border-color:color-mix(in srgb,var(--primary) 34%,var(--line));background:var(--primary-soft);color:var(--primary)}

/* app shell */
.app-shell{min-height:100dvh;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--primary) 5%,transparent),transparent 28%),var(--bg)}.sidebar{position:sticky;top:0;z-index:50;height:100dvh;padding:24px 16px 18px;display:flex;flex-direction:column;border-right:1px solid var(--line);background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(18px)}.sidebar-brand{padding:0 10px 29px}.sidebar nav{display:flex;flex-direction:column;gap:6px;min-height:0;overflow:auto;scrollbar-width:none}.sidebar nav::-webkit-scrollbar{display:none}.nav-item{position:relative;width:100%;min-height:45px;border:0;border-radius:13px;background:transparent;color:var(--muted);display:flex;align-items:center;gap:12px;padding:11px 13px;text-align:left;font-size:13px;font-weight:780}.nav-item>span:first-child{width:25px;height:25px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:transparent;transition:background .18s ease,color .18s ease}.nav-item:hover{background:var(--surface2);color:var(--text)}.nav-item.active{background:var(--primary-soft);color:var(--primary)}.nav-item.active>span:first-child{background:color-mix(in srgb,var(--primary) 13%,transparent)}.nav-item.active:before{content:"";position:absolute;left:-16px;width:4px;height:25px;border-radius:0 8px 8px 0;background:linear-gradient(var(--accent),var(--primary))}.sidebar-bottom{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}.sidebar-user{display:flex;align-items:center;gap:10px;padding:7px 10px 12px}.mini-avatar{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:0 0 36px;background:linear-gradient(145deg,var(--accent),var(--primary));color:#fff;font-size:13px;font-weight:900}.sidebar-user>div:last-child{display:flex;min-width:0;flex-direction:column}.sidebar-user strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--heading)}.sidebar-user span{font-size:10px;color:var(--muted)}.logout-item{color:var(--danger)}.logout-item:hover{background:var(--danger-soft);color:var(--danger)}

.main{min-width:0}.topbar{position:sticky;top:0;z-index:40;min-height:84px;padding:16px clamp(22px,3vw,38px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid color-mix(in srgb,var(--line) 78%,transparent);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.topbar-title{min-width:0}.topbar h2{margin:3px 0 0;color:var(--heading);font-size:25px;line-height:1.05;letter-spacing:-.035em}.top-actions{display:flex;align-items:center;gap:10px}.icon-btn{width:43px;height:43px;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}.icon-btn:hover{border-color:color-mix(in srgb,var(--primary) 26%,var(--line));background:var(--primary-soft);color:var(--primary);transform:translateY(-1px)}.theme-icon{font-size:17px}.avatar{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,var(--accent),var(--primary));color:white;font-weight:900;box-shadow:0 10px 24px color-mix(in srgb,var(--primary) 25%,transparent)}.content{max-width:1480px;margin:0 auto;padding:30px clamp(22px,3vw,38px) 100px;animation:fade .25s ease}.welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:24px}.welcome h1{margin:0 0 6px;color:var(--heading);font-size:34px;line-height:1.08;letter-spacing:-.045em}

/* cards / data */
.stats{grid-template-columns:repeat(4,minmax(0,1fr))}.card{padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,color-mix(in srgb,var(--surface-raised) 98%,transparent),var(--surface));box-shadow:var(--shadow-sm)}.card:hover{border-color:color-mix(in srgb,var(--primary) 15%,var(--line));box-shadow:0 12px 36px rgba(31,41,75,.075)}[data-theme="dark"] .card:hover{box-shadow:0 16px 40px rgba(0,0,0,.18)}.stat{position:relative;overflow:hidden;min-height:128px}.stat:after{content:"";position:absolute;right:-24px;top:-28px;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 10%,transparent),transparent 70%);pointer-events:none}.stat .kicker{font-size:12px;font-weight:750;color:var(--muted)}.stat .value{margin-top:9px;color:var(--heading);font-size:34px;font-weight:950;line-height:1;letter-spacing:-.05em}.stat .delta{margin-top:7px;font-size:11px;color:var(--success)}.progress{height:7px;margin-top:14px;overflow:hidden;border-radius:999px;background:var(--surface2)}.progress span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--primary))}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:29px 2px 12px}.section-head h3{margin:0;color:var(--heading);font-size:18px;letter-spacing:-.02em}.class-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.class-card{min-height:145px;display:flex;flex-direction:column;gap:11px}.class-card strong{color:var(--heading);font-size:15px;line-height:1.35}.class-card .primary,.class-card .secondary{margin-top:auto}.subject-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:0 0 42px;background:linear-gradient(145deg,var(--primary-soft),color-mix(in srgb,var(--accent) 10%,var(--surface)));color:var(--primary);font-size:11px;font-weight:900;letter-spacing:.03em}.badge{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:6px 9px;border-radius:999px;background:var(--surface2);color:var(--muted);font-size:10px;font-weight:800;text-transform:capitalize}.badge.present{background:var(--success-soft);color:var(--success)}.badge.late{background:var(--warning-soft);color:var(--warning)}.badge.absent{background:var(--danger-soft);color:var(--danger)}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.search{min-width:260px;max-width:480px;margin:0}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-sm);-webkit-overflow-scrolling:touch}table{width:100%;min-width:700px;border-collapse:collapse}th,td{padding:15px 17px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;font-size:12px}th{position:sticky;top:0;z-index:2;background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(10px);color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}td strong{color:var(--heading)}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:color-mix(in srgb,var(--primary) 3%,var(--surface))}.list{padding-top:5px;padding-bottom:5px}.list-row{display:grid;grid-template-columns:minmax(0,1.5fr) auto auto auto;align-items:center;gap:16px;padding:14px 4px;border-bottom:1px solid var(--line);font-size:12px}.list-row:last-child{border-bottom:0}.list-row strong{color:var(--heading)}.list-row>span{color:var(--muted)}.empty{padding:34px!important;text-align:center;color:var(--muted)}

/* qr/scanner */
.qr-card{max-width:560px;margin:12px auto;text-align:center;padding:28px}.qr-card h2{margin-bottom:4px;color:var(--heading)}.qr-card img{display:block;width:min(310px,88%);margin:23px auto;padding:12px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 16px 45px rgba(15,23,42,.1)}.scanner-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);gap:20px;align-items:start}.scanner{position:relative;min-height:420px;overflow:hidden;border-radius:24px;background:#05070d;box-shadow:0 22px 55px rgba(4,8,18,.25)}.scanner video{display:block;width:100%;height:100%;min-height:420px;object-fit:cover}.scanner:before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at center,transparent 20%,rgba(0,0,0,.14) 58%,rgba(0,0,0,.48) 100%);pointer-events:none}.scanner-frame{position:absolute;z-index:2;left:50%;top:50%;width:min(58%,320px);aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.9);border-radius:26px;box-shadow:0 0 0 999px rgba(0,0,0,.08)}.scanner-frame:before,.scanner-frame:after{content:"";position:absolute;width:56px;height:56px;border-color:#67e8f9}.scanner-frame:before{left:-3px;top:-3px;border-left:5px solid #67e8f9;border-top:5px solid #67e8f9;border-radius:20px 0 0 0}.scanner-frame:after{right:-3px;bottom:-3px;border-right:5px solid #818cf8;border-bottom:5px solid #818cf8;border-radius:0 0 20px 0}.camera-permission-panel{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:min(86%,390px);padding:22px;border:1px solid rgba(255,255,255,.18);border-radius:22px;background:rgba(8,12,24,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 20px 60px rgba(0,0,0,.42);color:#fff;text-align:center}.camera-permission-panel.hidden{display:none}.camera-permission-icon{width:52px;height:52px;margin:0 auto 12px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(135deg,#38bdf8,#818cf8);font-size:25px;font-weight:900;box-shadow:0 10px 30px rgba(56,189,248,.22)}.camera-permission-panel strong{display:block;font-size:18px;margin-bottom:7px}.camera-permission-panel p{margin:0 auto 16px;max-width:320px;color:#cbd5e1;font-size:13px;line-height:1.55}.camera-allow-btn{width:100%;min-height:45px}.camera-status{position:absolute;z-index:5;left:14px;right:14px;bottom:14px;padding:9px 12px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(5,7,13,.68);backdrop-filter:blur(10px);color:#fff;font-size:12px;line-height:1.35;text-align:center;pointer-events:none}.scan-result{text-align:center;min-height:200px;display:grid;place-items:center;align-content:center}.scan-result h2{margin:7px 0;color:var(--heading)}.success-ring{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:0 auto 7px;background:var(--success-soft);color:var(--success);font-size:28px;font-weight:900;animation:pop .25s ease}

/* forms/modals */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field label{display:block;font-size:11px;font-weight:800;color:var(--muted)}.field input,.field select,.field textarea{margin-top:7px}.field input:disabled{opacity:.8;cursor:not-allowed}.full-span{grid-column:1/-1}.modal-backdrop{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px;background:rgba(7,12,24,.55);backdrop-filter:blur(10px);animation:fade .18s ease}.modal{width:min(720px,100%);max-height:90dvh;overflow:auto;padding:24px;border:1px solid var(--line);border-radius:26px;background:var(--surface);box-shadow:var(--shadow-lg);animation:modalIn .23s ease}.modal-head{position:sticky;top:-24px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-24px -24px 18px;padding:22px 24px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(16px);border-radius:26px 26px 0 0}.modal-head h3{margin:3px 0 0;color:var(--heading)}.close,.menu-close{width:36px;height:36px;border:1px solid var(--line);border-radius:11px;background:var(--surface2);color:var(--text);font-size:20px;line-height:1}.close:hover,.menu-close:hover{background:var(--danger-soft);color:var(--danger)}

/* page skeleton */
.page-loading{animation:fade .18s ease}.page-loading-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}.page-loading-head>div{display:flex;flex-direction:column;gap:3px}.page-loading-head strong{color:var(--heading);font-size:13px}.page-loading-head span{font-size:11px;color:var(--muted)}.mini-loader-mark{width:40px;height:40px;border-radius:13px;display:grid!important;place-items:center!important;flex:0 0 40px;background:linear-gradient(145deg,var(--accent),var(--primary));color:white!important;font-size:17px!important;font-weight:900;box-shadow:0 10px 24px color-mix(in srgb,var(--primary) 22%,transparent);animation:corePulse 1.2s ease-in-out infinite}.skeleton{position:relative;height:124px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--primary) 7%,var(--surface)),transparent);animation:shimmer 1.25s infinite}

/* toasts */
.toast-wrap{position:fixed;z-index:1300;right:18px;top:18px;display:flex;flex-direction:column;gap:9px;pointer-events:none}.toast{max-width:min(390px,calc(100vw - 30px));padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(16px);box-shadow:var(--shadow);font-size:12px;font-weight:750;color:var(--text);animation:toastIn .23s ease}

/* floating mobile navigation */
.bottom-nav,.floating-menu-btn,.floating-menu,.mobile-menu-backdrop{display:none}

/* tablet */
@media(max-width:1120px) and (min-width:761px){:root{--sidebar:92px}.sidebar{padding-left:12px;padding-right:12px}.sidebar-brand{justify-content:center;padding-left:0;padding-right:0}.sidebar-brand>span:last-child,.sidebar .nav-item>span:last-child,.sidebar-user>div:last-child{display:none}.sidebar .nav-item{justify-content:center;padding-left:0;padding-right:0}.sidebar .nav-item.active:before{left:-12px}.sidebar-user{justify-content:center;padding-left:0;padding-right:0}.logout-item{justify-content:center}.class-list{grid-template-columns:repeat(2,minmax(0,1fr))}.scanner-layout{grid-template-columns:1fr}.content{padding-left:24px;padding-right:24px}}

/* mobile */
@media(max-width:760px){
  body{overflow-x:hidden}.login-shell{display:block;background:var(--surface)}.login-art{display:none}.login-panel{min-height:100dvh;padding:calc(72px + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom));align-items:center;background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--primary) 10%,transparent),transparent 30%),var(--surface)}.login-top-actions{top:calc(15px + env(safe-area-inset-top));right:16px}.mobile-brand{display:flex;margin-bottom:26px}.auth-card{max-width:500px}.auth-card h2{font-size:29px}.auth-options{align-items:center;gap:8px}.demo-box{margin-top:20px}.app-shell{display:block;min-height:100dvh}.sidebar{display:none}.main{min-height:100dvh}.topbar{min-height:72px;padding:calc(10px + env(safe-area-inset-top)) 15px 11px;align-items:flex-end}.topbar .eyebrow{font-size:8px}.topbar h2{font-size:20px}.top-actions{gap:8px}.icon-btn,.avatar{width:40px;height:40px;border-radius:13px}.content{padding:17px 14px calc(112px + env(safe-area-inset-bottom));max-width:none}.welcome{flex-direction:column;align-items:stretch;gap:13px;margin-bottom:18px}.welcome h1{font-size:27px}.welcome>.primary{width:100%;min-height:47px}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card{padding:16px;border-radius:18px}.card:hover{box-shadow:var(--shadow-sm)}.stat{min-height:120px}.stat .value{font-size:29px}.section-head{margin:24px 1px 10px}.section-head h3{font-size:16px}.class-list{grid-template-columns:1fr;gap:10px}.class-card{min-height:auto}.toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}.toolbar .search{min-width:0;max-width:none}.table-wrap{border-radius:16px}.list-row{grid-template-columns:minmax(0,1fr) auto;gap:9px 12px;padding:13px 2px}.list-row>span:nth-of-type(n+2),.list-row>button{justify-self:end}.scanner-layout{grid-template-columns:1fr;gap:14px}.scanner{min-height:350px;border-radius:20px}.scanner video{min-height:350px}.scanner-frame{width:68%;border-radius:22px}.camera-permission-panel{width:calc(100% - 28px);padding:18px 16px;border-radius:19px}.camera-permission-panel strong{font-size:17px}.camera-status{left:10px;right:10px;bottom:10px}.qr-card{margin:5px auto}.qr-card img{width:min(275px,88%)}.form-grid{grid-template-columns:1fr;gap:12px}.full-span{grid-column:1}.modal-backdrop{place-items:end center;padding:0}.modal{width:100%;max-height:92dvh;padding:20px 18px calc(20px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0}.modal-head{top:-20px;margin:-20px -18px 16px;padding:19px 18px;border-radius:26px 26px 0 0}.toast-wrap{top:max(12px,env(safe-area-inset-top));right:12px}.page-loading-head{margin-bottom:13px}.skeleton{height:108px;border-radius:18px}

  .bottom-nav{position:fixed;z-index:70;left:10px;right:76px;bottom:calc(10px + env(safe-area-inset-bottom));height:64px;padding:6px;display:flex;align-items:center;gap:3px;border:1px solid color-mix(in srgb,var(--line) 90%,transparent);border-radius:22px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 18px 50px rgba(24,32,58,.17)}[data-theme="dark"] .bottom-nav{box-shadow:0 20px 55px rgba(0,0,0,.4)}.bottom-nav .nav-item{min-width:0;height:51px;flex:1;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:5px 3px;border-radius:16px;text-align:center;font-size:9px}.bottom-nav .nav-item>span:first-child{width:24px;height:22px;font-size:16px}.bottom-nav .nav-item.active:before{display:none}.bottom-nav .nav-item.active{background:var(--primary-soft);color:var(--primary)}.bottom-nav .nav-item>span:last-child{max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .floating-menu-btn{position:fixed;z-index:72;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));width:58px;height:64px;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--line));border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:linear-gradient(145deg,var(--primary),var(--primary2));color:white;box-shadow:0 16px 38px color-mix(in srgb,var(--primary) 32%,transparent)}.floating-menu-btn:hover{transform:translateY(-2px)}.menu-dots{font-size:19px;line-height:16px;letter-spacing:2px}.floating-menu-btn small{font-size:9px;font-weight:850}
  .mobile-menu-backdrop{position:fixed;inset:0;z-index:78;display:block;border:0;background:rgba(6,10,22,.5);backdrop-filter:blur(6px);animation:fade .18s ease}.floating-menu{position:fixed;z-index:80;left:12px;right:12px;bottom:calc(86px + env(safe-area-inset-bottom));display:block;padding:15px;border:1px solid var(--line);border-radius:24px;background:color-mix(in srgb,var(--surface) 97%,transparent);backdrop-filter:blur(22px);box-shadow:var(--shadow-lg);animation:menuUp .22s ease}.floating-menu-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:3px 3px 12px}.floating-menu-head>div{display:flex;flex-direction:column;gap:3px}.floating-menu-head strong{color:var(--heading);font-size:14px}.floating-menu-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.floating-menu-nav .nav-item{min-height:50px;padding:11px;background:var(--surface2);border:1px solid var(--line)}.floating-menu-nav .nav-item.active:before{display:none}.floating-menu-nav .nav-item.active{background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 20%,var(--line))}.floating-logout{width:100%;min-height:49px;margin-top:10px;border:1px solid color-mix(in srgb,var(--danger) 18%,var(--line));border-radius:14px;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--danger-soft);color:var(--danger);font-size:12px;font-weight:850}
}
@media(max-width:430px){.login-panel{padding-left:15px;padding-right:15px}.auth-options{font-size:11px}.demo-box{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.card{padding:15px}.stat .value{font-size:27px}.toolbar{grid-template-columns:1fr}.toolbar .primary{width:100%}.floating-menu-nav{grid-template-columns:1fr 1fr}.bottom-nav{right:72px}.floating-menu-btn{width:56px}}
@media(max-width:350px){.stats{grid-template-columns:1fr}.demo-box{grid-template-columns:1fr}.bottom-nav .nav-item>span:last-child{display:none}.bottom-nav .nav-item>span:first-child{font-size:18px}.floating-menu-nav{grid-template-columns:1fr}}

@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes spinReverse{to{transform:rotate(-360deg)}}@keyframes corePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}@keyframes scanLine{0%,100%{transform:translateY(-20px);opacity:.4}50%{transform:translateY(20px);opacity:1}}@keyframes dotBounce{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-5px);opacity:1}}@keyframes networkRun{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}@keyframes shimmer{100%{transform:translateX(100%)}}@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}@keyframes menuUp{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* management additions */
.admin-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px;padding:15px 17px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--line));border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),color-mix(in srgb,var(--accent) 5%,var(--surface)));box-shadow:var(--shadow-sm)}
.admin-banner>div{display:flex;flex-direction:column;gap:3px}.admin-banner strong{color:var(--heading);font-size:16px}.admin-banner>span{font-size:12px;color:var(--muted);text-align:right}.admin-access-pill{display:inline-flex;margin-top:12px;padding:8px 11px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:11px;font-weight:850}
.manage-table table{min-width:920px}.manage-table th:last-child,.manage-table td:last-child{text-align:right}.action-group{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap}.icon-action{min-height:34px;padding:7px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--text);font-size:11px;font-weight:850}.icon-action:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--line));background:var(--primary-soft);color:var(--primary)}.icon-action.danger{border-color:color-mix(in srgb,var(--danger) 18%,var(--line));color:var(--danger);background:var(--danger-soft)}.icon-action:disabled{opacity:.4;transform:none}
.subject-pill{display:inline-flex;max-width:220px;padding:6px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface2);color:var(--text);font-size:10px;font-weight:750;line-height:1.2;white-space:normal}.subject-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:15px;background:var(--surface2)}.subject-check{display:flex!important;align-items:flex-start;gap:9px;margin:0!important;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer}.subject-check:hover{border-color:color-mix(in srgb,var(--primary) 32%,var(--line));background:var(--primary-soft)}.subject-check input{width:16px;height:16px;margin:2px 0 0!important;accent-color:var(--primary)}.subject-check span{display:flex;min-width:0;flex-direction:column;gap:2px}.subject-check strong{color:var(--heading);font-size:11px}.subject-check small{color:var(--muted);font-size:10px;line-height:1.35}.subject-empty{grid-column:1/-1;padding:10px;color:var(--muted);font-size:11px}.field-hint{display:block;margin-top:7px;color:var(--muted);font-size:10px;line-height:1.45}.management-modal{width:min(760px,100%)}
.confirm-backdrop{z-index:180}.confirm-modal{width:min(430px,100%);text-align:center;overflow:visible}.confirm-icon{width:54px;height:54px;margin:2px auto 14px;border-radius:18px;display:grid;place-items:center;background:var(--danger-soft);color:var(--danger);font-size:24px;font-weight:900}.confirm-modal h3{margin:0 0 8px;color:var(--heading);font-size:21px}.confirm-modal p{margin:0 auto 20px;max-width:330px;line-height:1.55}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.danger-button{min-height:44px;border:0;border-radius:14px;padding:11px 15px;background:linear-gradient(135deg,var(--danger),color-mix(in srgb,var(--danger) 74%,#000));color:#fff;font-weight:850;box-shadow:0 10px 22px color-mix(in srgb,var(--danger) 22%,transparent)}.danger-button:hover{transform:translateY(-1px)}.danger-button:disabled{opacity:.62}

@media(max-width:760px){
  .admin-banner{align-items:flex-start;flex-direction:column;gap:7px;padding:14px}.admin-banner>span{text-align:left}.manage-table{border:0;background:transparent;overflow:visible}.manage-table table{min-width:0;width:100%;display:block}.manage-table thead{display:none}.manage-table tbody{display:grid;gap:10px}.manage-table tr{display:block;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}.manage-table td{display:grid!important;grid-template-columns:105px minmax(0,1fr);align-items:start;gap:10px;width:100%;padding:8px 0!important;border:0!important;text-align:left!important;white-space:normal}.manage-table td:before{content:attr(data-label);font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.manage-table td:first-child{padding-top:0!important}.manage-table td:last-child{padding-bottom:0!important}.manage-table .action-group{justify-content:flex-start}.subject-pill{max-width:100%;border-radius:10px}.subject-picker{grid-template-columns:1fr}.management-modal{max-height:94dvh}.confirm-modal{border-radius:24px 24px 0 0}.confirm-actions{grid-template-columns:1fr 1fr}
}
@media(max-width:430px){.manage-table td{grid-template-columns:92px minmax(0,1fr)}.confirm-actions{grid-template-columns:1fr}.subject-picker{padding:8px}}

/* subject management */
.toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}.subject-management-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.subject-manage-card{gap:8px}.subject-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.subject-owner{max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface2);color:var(--muted);font-size:9px;font-weight:800}
@media(max-width:760px){.management-toolbar{grid-template-columns:1fr}.toolbar-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.toolbar-actions .primary,.toolbar-actions .secondary{width:100%}.subject-management-grid{grid-template-columns:1fr}}
@media(max-width:390px){.toolbar-actions{grid-template-columns:1fr}}

/* dashboard layout correction: keep summary stats and dashboard sections independent */
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.9fr);gap:20px;align-items:start;margin-top:2px}.dashboard-panel{min-width:0}.dashboard-panel>.section-head{margin-top:28px}.dashboard-classes{grid-template-columns:repeat(2,minmax(220px,1fr))}.dashboard-classes .class-card{min-width:0}.class-copy{min-width:0}.class-copy strong{display:block;overflow-wrap:anywhere}.class-meta{display:block;line-height:1.55;overflow-wrap:anywhere}.recent-panel{min-width:0}.dashboard-session-list{min-width:0}.session-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;padding:15px 4px}.session-main{display:flex;min-width:0;flex-direction:column;gap:3px}.session-main strong{overflow-wrap:anywhere}.session-main span,.session-status,.session-count{color:var(--muted);font-size:11px}.session-status{justify-self:end;padding:5px 8px;border-radius:999px;background:var(--surface2);text-transform:capitalize}.session-count{grid-column:1;align-self:center}.session-row .open-session{grid-column:2;justify-self:end}

@media(max-width:1240px){.dashboard-grid{grid-template-columns:1fr}.dashboard-classes{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-session-list .session-row{grid-template-columns:minmax(0,1fr) auto auto auto}.dashboard-session-list .session-count,.dashboard-session-list .open-session{grid-column:auto}}
@media(max-width:920px) and (min-width:761px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-classes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.dashboard-grid{display:block;margin-top:0}.dashboard-panel>.section-head{margin-top:24px}.dashboard-classes{grid-template-columns:1fr}.dashboard-classes .class-card{gap:10px;padding:17px}.dashboard-classes .class-card .secondary{width:100%;min-height:44px}.dashboard-session-list{padding:4px 15px}.dashboard-session-list .session-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:14px 0}.dashboard-session-list .session-count{grid-column:1}.dashboard-session-list .open-session{grid-column:2}.class-meta{font-size:12px}}
@media(max-width:420px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.stat{min-height:112px}.stat .kicker{font-size:11px}.stat .value{font-size:26px}.dashboard-session-list{padding-left:13px;padding-right:13px}}

/* subject-scoped attendance workflow */
.scanner-subject-banner{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px;padding:17px 19px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--line));border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),color-mix(in srgb,var(--accent) 5%,var(--surface)));box-shadow:var(--shadow-sm)}
.scanner-subject-banner h2{margin:4px 0 3px;color:var(--heading);font-size:20px}.scanner-subject-banner p{margin:0;color:var(--muted);font-size:11px}.attendance-rule-pills{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap}.attendance-rule-pills span{padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:10px;font-weight:800;white-space:nowrap}
.attendance-slip{width:100%;text-align:left}.attendance-slip-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:13px;border-bottom:1px solid var(--line)}.attendance-slip-head h2{margin:4px 0 0;font-size:18px}.attendance-slip-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.attendance-slip-grid>div{min-width:0;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:var(--surface2)}.attendance-slip-grid span{display:block;margin-bottom:3px;color:var(--muted);font-size:8px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.attendance-slip-grid strong{display:block;overflow-wrap:anywhere;color:var(--heading);font-size:11px;line-height:1.35}.attendance-slip-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px;color:var(--muted);font-size:10px;line-height:1.4}.print-slip{flex:0 0 auto}
.attendance-live-row{grid-template-columns:minmax(0,1fr) auto auto auto}.live-student{min-width:0}.live-student strong,.live-student span{overflow-wrap:anywhere}.live-student span,.live-time{color:var(--muted);font-size:10px}.live-status,.live-time,.live-actions{justify-self:end}.attendance-correction-student{display:flex;justify-content:space-between;gap:12px;margin-bottom:15px;padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}.attendance-correction-student span{color:var(--muted);font-size:11px}.attendance-correction-modal{width:min(560px,100%)}
@media(max-width:760px){.scanner-subject-banner{flex-direction:column;padding:15px}.attendance-rule-pills{justify-content:flex-start}.attendance-rule-pills span{white-space:normal}.attendance-slip-grid{grid-template-columns:1fr 1fr}.attendance-live-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px}.attendance-live-row .live-status{grid-column:2;grid-row:1}.attendance-live-row .live-time{grid-column:1;grid-row:2;justify-self:start}.attendance-live-row .live-actions{grid-column:2;grid-row:2}.attendance-slip-foot{align-items:flex-start;flex-direction:column}.print-slip{width:100%;text-align:center}}
@media(max-width:420px){.attendance-slip-grid{grid-template-columns:1fr}.scanner-subject-banner h2{font-size:18px}.attendance-rule-pills{display:grid;grid-template-columns:1fr;width:100%}.attendance-rule-pills span{text-align:center}}

/* Scanner subject navigation */
.scanner-subject-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:0}
.scanner-change-subject{min-height:40px;white-space:nowrap}
@media(max-width:760px){.scanner-subject-actions{width:100%;align-items:stretch}.scanner-change-subject{width:100%}}

/* Scan confirmation stays visible until the teacher explicitly starts the next scan. */
.attendance-slip-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}.scan-new-btn{min-height:40px;padding:9px 16px;white-space:nowrap}
@media(max-width:760px){.attendance-slip-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.attendance-slip-actions .print-slip,.attendance-slip-actions .scan-new-btn{width:100%;text-align:center}}
@media(max-width:420px){.attendance-slip-actions{grid-template-columns:1fr}}

/* Asia/Manila clock + schedule-gated attendance + student QR JPG download */
.sidebar-clock{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin:0 8px 10px;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:var(--surface2)}
.sidebar-clock span,.header-clock span{color:var(--muted);font-size:8px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.sidebar-clock strong,.header-clock strong{color:var(--heading);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.header-clock{display:none;min-width:88px;flex-direction:column;align-items:flex-end;gap:1px;padding:5px 7px;border:1px solid var(--line);border-radius:11px;background:var(--surface);box-shadow:var(--shadow-sm)}
.schedule-note{display:block;min-height:30px;padding:7px 9px;border-radius:10px;font-size:10px;font-weight:750;line-height:1.4}
.schedule-open{background:var(--success-soft);color:var(--success)}
.schedule-closed{background:var(--surface2);color:var(--muted)}
.start-session:disabled{opacity:.55;transform:none!important;box-shadow:none!important}
.scanner-class-list .class-card{align-content:start}
.qr-download-btn{display:inline-flex;align-items:center;justify-content:center;align-self:center;margin-top:14px;text-decoration:none;min-height:44px;padding:11px 17px}

@media(max-width:1120px){.sidebar-clock{display:none}.header-clock{display:flex}}
@media(max-width:760px){.header-clock{display:flex;min-width:82px;padding:4px 6px}.header-clock span{font-size:7px}.header-clock strong{font-size:10px}.topbar-title{max-width:42vw}.qr-download-btn{width:100%}}
@media(max-width:390px){.top-actions{gap:5px}.header-clock{min-width:76px}.header-clock strong{font-size:9px}.icon-btn,.avatar{width:38px;height:38px}.topbar-title{max-width:36vw}}

/* editable subject attendance rules */
.subject-attendance-rules{display:inline-flex;width:max-content;max-width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--muted);font-size:10px;font-weight:800;line-height:1.3}
.subject-card-actions{display:flex;gap:8px;margin-top:auto;padding-top:4px}.subject-card-actions .icon-action{flex:1}
@media(max-width:430px){.subject-card-actions{display:grid;grid-template-columns:1fr 1fr}.subject-attendance-rules{width:100%;justify-content:center;text-align:center}}


/* multi-day subject scheduling + consistent subject form sizing */
.management-modal .form-grid{align-items:start}
.management-modal .form-grid>.field{width:100%;min-width:0}
.management-modal .field>input,.management-modal .field>select{display:block;width:100%;height:50px;min-height:50px}
.management-modal .field>input[type="number"],.management-modal .field>input[type="time"]{width:100%}
.schedule-days-field{width:100%}
.day-picker-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;width:100%;margin-top:8px}
.day-choice{position:relative;display:block!important;width:100%;min-width:0;margin:0!important;cursor:pointer}
.day-choice input{position:absolute;width:1px!important;height:1px!important;min-height:0!important;margin:0!important;opacity:0;pointer-events:none}
.day-choice>span{display:flex;min-height:62px;width:100%;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 6px;border:1px solid var(--line);border-radius:13px;background:var(--surface2);text-align:center;transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.day-choice>span strong{color:var(--heading);font-size:11px}
.day-choice>span small{max-width:100%;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:8px;white-space:nowrap}
.day-choice:hover>span{border-color:color-mix(in srgb,var(--primary) 34%,var(--line));background:var(--primary-soft)}
.day-choice input:checked+span{border-color:color-mix(in srgb,var(--primary) 62%,var(--line));background:var(--primary-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 8%,transparent)}
.day-choice input:checked+span strong{color:var(--primary)}
.subject-management-grid{align-items:stretch}
.subject-management-grid>.subject-manage-card{width:100%;min-width:0;height:100%}
@media(max-width:760px){.day-picker-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.management-modal .field>input,.management-modal .field>select{height:50px;min-height:50px}}
@media(max-width:430px){.day-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* subject time fields: match the rest of the management form */
.management-modal .subject-time-input{
  display:block;
  width:100%;
  min-width:0;
  height:50px;
  min-height:50px;
  margin-top:7px;
  padding:0 44px 0 15px;
  border:1px solid var(--line);
  border-radius:14px;
  outline:none;
  background-color:var(--surface2);
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  font:inherit;
  font-size:14px;
  font-weight:650;
  line-height:50px;
  font-variant-numeric:tabular-nums;
  color-scheme:light;
}
[data-theme="dark"] .management-modal .subject-time-input{color-scheme:dark}
.management-modal .subject-time-input:hover{border-color:var(--line-strong)}
.management-modal .subject-time-input:focus{
  border-color:color-mix(in srgb,var(--primary) 60%,var(--line));
  background-color:var(--surface);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 11%,transparent);
}
.management-modal .subject-time-input::-webkit-datetime-edit{
  display:flex;
  align-items:center;
  min-height:48px;
  padding:0;
  color:var(--text);
}
.management-modal .subject-time-input::-webkit-datetime-edit-fields-wrapper{padding:0}
.management-modal .subject-time-input::-webkit-datetime-edit-text{padding:0 2px;color:var(--muted)}
.management-modal .subject-time-input::-webkit-datetime-edit-hour-field,
.management-modal .subject-time-input::-webkit-datetime-edit-minute-field,
.management-modal .subject-time-input::-webkit-datetime-edit-ampm-field{
  padding:2px 3px;
  border-radius:6px;
  color:var(--text);
}
.management-modal .subject-time-input::-webkit-calendar-picker-indicator{
  width:20px;
  height:20px;
  margin:0;
  padding:5px;
  border-radius:8px;
  cursor:pointer;
  opacity:.72;
}
.management-modal .subject-time-input::-webkit-calendar-picker-indicator:hover{
  background-color:color-mix(in srgb,var(--primary) 10%,transparent);
  opacity:1;
}
@media(max-width:760px){
  .management-modal .subject-time-input{height:50px;min-height:50px;padding-left:14px;padding-right:42px;font-size:16px}
}

/* Production usability: readable surfaces, accessible controls, and stable layouts. */
:root{--radius:18px;--radius-sm:12px;--muted:#59667d;--shadow-sm:0 1px 3px rgba(15,23,42,.045),0 4px 14px rgba(15,23,42,.025)}
[data-theme="dark"]{--muted:#a9b6cb}
html{scrollbar-gutter:stable}
body{overflow-wrap:break-word}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button:disabled{transform:none!important}
.primary{background:linear-gradient(135deg,#4f46e5,#6d28d9);box-shadow:0 4px 12px rgba(79,70,229,.18)}
.primary:hover{box-shadow:0 6px 18px rgba(79,70,229,.22)}
.card:hover{box-shadow:var(--shadow-sm);border-color:var(--line)}
.auth-card{max-width:420px}
.auth-card h2{line-height:1.2}
.auth-note{margin-top:18px!important;line-height:1.6}
.auth-card input:not([type=checkbox]){font-size:16px;min-height:54px}
.auth-card label:not(.check){font-size:13px}
.auth-options{flex-wrap:wrap}
.auth-options .check{min-height:44px;font-size:13px}
.password-row .text-btn{min-width:52px;min-height:44px;top:12px}
.login-submit{min-height:52px;margin-top:16px}
.form-error{padding:13px 15px!important;margin:16px 0!important;border:1px solid color-mix(in srgb,var(--danger) 30%,var(--line));border-radius:12px;background:var(--danger-soft);color:var(--text);font-size:13px;line-height:1.6;text-align:left;overflow-wrap:anywhere}
.toast{line-height:1.6;overflow-wrap:anywhere;border-left:4px solid var(--success)}
.toast-error{border-left-color:var(--danger)}
.connection-status{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:calc(100% - 24px);z-index:1350;background:var(--warning-soft);border:1px solid var(--warning);border-radius:12px;padding:12px 18px;font-size:13px;box-shadow:var(--shadow-sm);text-align:center}
.nav-item svg{display:block;width:20px;height:20px;stroke-width:1.8}
.nav-item[aria-current="page"]{font-weight:800}
.content:focus{outline:none}
.content>.toolbar:first-child{margin-top:0}
.toolbar .search{min-width:0}
.toolbar input,.field input,.field select,.field textarea{font-size:14px}
.field{min-width:0}
.field label{font-size:12px;color:var(--text)}
.field-hint{font-size:12px;line-height:1.55}
.page-error{max-width:640px;margin:24px auto;padding:28px}
.page-error h3{font-size:23px;letter-spacing:-.025em;margin:10px 0}
.page-error p{line-height:1.6}
.page-error .secondary{margin-top:8px;min-width:140px}
.topbar-title .eyebrow{line-height:1.5;overflow-wrap:anywhere}
.top-actions{flex-shrink:0}
.table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.table-wrap th{font-size:11px;letter-spacing:.055em}
.table-wrap td{font-size:13px;line-height:1.5}
.table-wrap tbody tr:hover{background:var(--surface2)}
.class-copy,.class-card,.list-row>div,.welcome>div,.dashboard-panel{min-width:0}
.class-card strong,.class-card .muted,.list-row strong,.sidebar-user strong{overflow-wrap:anywhere}
.icon-action,.close,.menu-close,.text-btn,.secondary{min-height:44px}
.close,.menu-close{width:44px;flex-shrink:0}
.dialog-open{overflow:hidden}
.modal{overscroll-behavior:contain;scrollbar-width:thin}
.modal .form-grid{padding-bottom:4px}
.modal .primary[type=submit]{min-height:48px;justify-content:center;gap:12px}
.modal .primary[type=submit]>span:not(.button-loading){margin-left:auto}
.modal :focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.subject-check{min-height:50px}
.subject-check strong{font-size:12px}
.subject-check small{font-size:11px}
.confirm-modal{overflow:auto}
.floating-menu{max-height:calc(100dvh - 116px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}
@media(min-width:761px) and (max-width:1000px){
  .login-shell{grid-template-columns:minmax(0,1fr) minmax(360px,1fr)}
  .login-art{padding:30px}
  .hero-copy h1{font-size:48px}
  .hero-copy p{font-size:16px}
  .login-panel{padding:60px 28px}
}
@media(max-width:760px){
  html{scrollbar-gutter:auto}
  .login-panel{padding-left:24px;padding-right:24px}
  .auth-card{max-width:420px}
  .mobile-brand{margin-bottom:36px}
  .auth-card h2{font-size:30px;letter-spacing:-.035em}
  .form-error{font-size:13px}
  .content{padding-left:16px;padding-right:16px}
  .table-wrap{border:1px solid var(--line)}
  .manage-table{border:0;overflow:visible}
  .manage-table td{overflow-wrap:anywhere;row-gap:3px}
  .manage-table td>br{display:none}
  .manage-table td>*{grid-column:2;min-width:0}
  .manage-table td::before{grid-column:1;grid-row:1 / span 4;line-height:1.5}
  .manage-table td[colspan]{display:block!important}
  .manage-table td[colspan]::before{display:none}
  .field input,.field select,.field textarea,.toolbar .search{font-size:16px}
  .modal{max-height:calc(100dvh - 20px - env(safe-area-inset-top))}
  .modal-head{padding-top:16px;padding-bottom:16px}
  .topbar{gap:8px;align-items:center}
  .topbar-title{max-width:none;flex:1}
  .topbar-title .eyebrow{font-size:8px;letter-spacing:.08em}
  .topbar h2{font-size:19px}
  .top-actions .avatar{display:none}
  .top-actions .icon-btn{width:44px;height:44px}
  .bottom-nav .nav-item>span:last-child{font-size:10px;max-width:100%}
  .bottom-nav .nav-item svg{width:20px;height:20px}
  .connection-status{bottom:calc(88px + env(safe-area-inset-bottom));width:max-content}
  .toast-wrap{left:12px;right:12px;align-items:center}
  .toast{width:100%;max-width:440px}
}
@media(max-width:350px){
  .login-panel{padding-left:18px;padding-right:18px}
  .auth-card h2{font-size:27px}
  .topbar{padding-left:12px;padding-right:12px}
  .header-clock{min-width:72px}
  .manage-table td{grid-template-columns:80px minmax(0,1fr)}
  .bottom-nav .nav-item>span:last-child{display:block;font-size:8px}
}
@media(prefers-reduced-motion:reduce){.app-loader{backdrop-filter:none}.skeleton{animation:none}}
.auth-card input:not([type=checkbox]),.field input,.field select,.field textarea,.search{font-weight:450}
input::placeholder,textarea::placeholder{font-weight:400;color:var(--muted);opacity:1}
.dashboard-classes{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}