:root{--primary:#2563eb;--primary-dark:#1749bd;--navy:#10214b;--cyan:#06b6d4;--success:#16a34a;--danger:#dc2626;--warning:#f59e0b;--bg:#f3f7ff;--card:#fff;--text:#172033;--muted:#667085;--border:#e4eaf4;--shadow:0 12px 35px rgba(29,63,125,.1);--radius:20px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.94rem}a{text-decoration:none}.app-shell{min-height:100vh}.sidebar{position:fixed;z-index:1040;left:0;top:0;bottom:0;width:260px;padding:22px 16px;background:linear-gradient(180deg,#122a62 0%,#0b1735 100%);color:#fff;display:flex;flex-direction:column;transition:.25s ease}.brand{display:flex;align-items:center;gap:12px;color:var(--navy);min-width:0}.sidebar .brand{color:#fff;padding:4px 8px 22px}.brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#55c9ff,#3f6cff);box-shadow:0 8px 20px rgba(41,121,255,.3);font-size:1.35rem;color:#fff;flex:0 0 auto}.brand span:last-child{display:flex;flex-direction:column;min-width:0}.brand strong{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand small{font-size:.72rem;opacity:.7}.sidebar .nav{gap:5px;overflow-y:auto}.sidebar .nav-link{color:#b8c7e8;border-radius:13px;padding:11px 13px;display:flex;align-items:center;gap:12px;font-weight:600;transition:.2s}.sidebar .nav-link i{font-size:1.08rem;width:20px}.sidebar .nav-link:hover,.sidebar .nav-link.active{color:#fff;background:rgba(255,255,255,.12)}.sidebar .nav-link.active{box-shadow:inset 3px 0 #5dc9ff}.sidebar-user{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding:18px 7px 0;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px}.sidebar-user .avatar{width:38px;height:38px;border-radius:12px;background:#fff;color:var(--primary);display:grid;place-items:center;font-weight:800}.sidebar-user div:nth-child(2){min-width:0}.sidebar-user strong,.sidebar-user small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user small{font-size:.7rem;color:#9fb0d6}.sidebar-user>a{color:#b8c7e8}.main-content{min-height:100vh;margin-left:260px}.topbar{height:86px;padding:0 30px;background:rgba(255,255,255,.87);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:1020}.topbar h1{font-size:1.35rem;margin:0;font-weight:800}.topbar p{font-size:.78rem}.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.icon-btn{width:42px;height:42px;border-radius:13px;border:1px solid var(--border);background:#fff;display:grid;place-items:center;color:var(--navy);font-size:1.2rem}.topbar>#sidebarToggle{display:none}.camera-pill{font-size:.78rem;padding:8px 12px;border-radius:50px;background:#ecfdf3;color:#067647;font-weight:700}.content-wrap{padding:28px;max-width:1600px;margin:auto}.card{border:1px solid rgba(222,231,245,.8);border-radius:var(--radius);box-shadow:0 8px 28px rgba(35,65,130,.06)}.card-header{padding:18px 21px;background:transparent;border-color:var(--border);font-weight:800}.card-body{padding:21px}.stat-card{position:relative;overflow:hidden;height:100%;background:rgba(255,255,255,.9)}.stat-card:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-25px;top:-30px;background:var(--tint,#eef4ff)}.stat-card .stat-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--tint,#eef4ff);color:var(--accent,var(--primary));font-size:1.25rem;position:relative;z-index:1}.stat-label{color:var(--muted);font-weight:600;font-size:.78rem;margin-top:14px}.stat-value{font-weight:850;font-size:1.75rem;margin:2px 0}.stat-meta{font-size:.72rem;color:var(--muted)}.page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}.page-head h2{font-size:1.3rem;font-weight:800;margin:0}.page-head p{margin:3px 0 0;color:var(--muted)}.btn{border-radius:11px;font-weight:700;padding:.58rem .95rem}.btn-primary{background:linear-gradient(135deg,#3779f5,#1d55ca);border:none;box-shadow:0 7px 16px rgba(37,99,235,.22)}.form-control,.form-select{border-radius:11px;border-color:#d7dfed;min-height:43px}.form-control:focus,.form-select:focus{border-color:#6aa0ff;box-shadow:0 0 0 .2rem rgba(37,99,235,.12)}.form-label{font-weight:700;font-size:.8rem;color:#344054}.table{--bs-table-bg:transparent;margin:0}.table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:#667085;background:#f8faff;border-bottom:1px solid var(--border);white-space:nowrap}.table td{vertical-align:middle;border-color:#edf1f7}.student-photo{width:45px;height:45px;border-radius:13px;object-fit:cover;background:#edf2fb}.badge{padding:.48em .7em;border-radius:50px}.filter-panel{background:linear-gradient(135deg,#fff,#f8fbff)}.empty-state{text-align:center;padding:55px 20px}.empty-state i{font-size:3rem;color:#a5b5d1}.empty-state h3{font-size:1.1rem;margin-top:14px}.camera-stage{position:relative;background:#07101f;border-radius:22px;overflow:hidden;aspect-ratio:4/3;min-height:330px}.camera-stage video,.camera-stage canvas.preview{width:100%;height:100%;object-fit:cover;display:block}.face-frame{position:absolute;width:45%;height:62%;left:27.5%;top:17%;border:3px solid #43e1ff;border-radius:48% 48% 42% 42%;box-shadow:0 0 0 9999px rgba(4,10,22,.26),0 0 30px rgba(67,225,255,.4);pointer-events:none}.face-frame:before,.face-frame:after{content:"";position:absolute;width:34px;height:34px;border-color:#fff}.face-frame:before{left:-7px;top:-7px;border-left:5px solid;border-top:5px solid;border-radius:13px 0 0}.face-frame:after{right:-7px;bottom:-7px;border-right:5px solid;border-bottom:5px solid;border-radius:0 0 13px}.camera-overlay{position:absolute;inset:0;display:grid;place-items:center;color:#fff;text-align:center;background:rgba(3,8,20,.72);z-index:5}.camera-overlay.hidden{display:none}.scan-line{position:absolute;left:24%;right:24%;height:2px;top:20%;background:linear-gradient(90deg,transparent,#4ce5ff,transparent);box-shadow:0 0 10px #4ce5ff;animation:scan 2.4s ease-in-out infinite}@keyframes scan{50%{top:76%}}.recognition-result{min-height:180px;display:flex;align-items:center;justify-content:center}.success-ring{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:#dcfce7;color:#16a34a;font-size:2.2rem;animation:pop .35s ease}@keyframes pop{from{transform:scale(.5)}80%{transform:scale(1.12)}}.pulse-dot{width:9px;height:9px;background:#19b36b;border-radius:50%;display:inline-block;box-shadow:0 0 0 0 rgba(25,179,107,.5);animation:pulse 1.8s infinite}@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(25,179,107,0)}}.model-loader{display:flex;align-items:center;gap:8px}.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 15% 20%,#d9edff,transparent 30%),radial-gradient(circle at 85% 80%,#dbe3ff,transparent 32%),#f6f9ff;position:relative;overflow-x:hidden}.auth-card{width:min(1060px,100%);min-height:640px;background:#fff;border-radius:30px;overflow:hidden;box-shadow:0 30px 80px rgba(22,52,112,.18);display:grid;grid-template-columns:1.05fr 1fr;position:relative;z-index:2}.auth-visual{padding:40px;background:linear-gradient(145deg,rgba(16,44,103,.96),rgba(24,86,191,.92)),url('../img/school-bg.jpg') center/cover;color:#fff;display:flex;flex-direction:column;position:relative}.brand-light{color:#fff}.auth-copy{margin-top:auto;margin-bottom:25px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:#7dd3fc;font-weight:800}.auth-copy h1{font-size:3.5rem;font-weight:850;letter-spacing:-.05em;margin:10px 0}.auth-copy p{font-size:1.1rem;color:#d7e5ff;max-width:430px}.trust-row{display:flex;gap:18px;margin-top:25px;font-size:.8rem}.trust-row span{display:flex;align-items:center;gap:6px}.auth-form-wrap{display:grid;place-items:center;padding:42px}.auth-form{width:min(380px,100%)}.auth-form h2,.simple-auth-card h1{font-weight:850;font-size:1.75rem}.input-icon{position:relative}.input-icon>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#8491a8;z-index:2}.input-icon .form-control{padding-left:42px}.password-field button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;padding:8px;color:#71809a}.auth-help{text-align:center;color:#8a96aa;font-size:.72rem;margin-top:24px}.simple-auth-card{width:min(470px,100%);background:#fff;border-radius:24px;padding:36px;box-shadow:var(--shadow);position:relative;z-index:2}.back-link{display:inline-block;margin-bottom:24px}.auth-orb{position:absolute;border-radius:50%;filter:blur(1px)}.orb-one{width:180px;height:180px;background:#6bbcff;left:-70px;top:-50px;opacity:.2}.orb-two{width:240px;height:240px;background:#818cf8;right:-100px;bottom:-90px;opacity:.17}.action-menu .btn{padding:.35rem .55rem}.profile-hero{background:linear-gradient(135deg,#173d89,#2779e6);color:#fff}.profile-photo{width:130px;height:130px;border-radius:28px;object-fit:cover;border:5px solid rgba(255,255,255,.3)}.info-item label{display:block;color:var(--muted);font-size:.72rem;font-weight:700;text-transform:uppercase}.info-item strong{display:block;margin-top:3px}.progress{height:9px;border-radius:20px}.print-only{display:none}
@media(max-width:991.98px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(5,14,32,.45);z-index:1035}.sidebar-overlay.show{display:block}.main-content{margin-left:0}.topbar>#sidebarToggle{display:grid}.content-wrap{padding:20px}.camera-pill{display:none}.auth-card{grid-template-columns:1fr;max-width:560px}.auth-visual{min-height:270px}.auth-copy{margin-top:60px;margin-bottom:0}.auth-copy h1{font-size:2.6rem}.trust-row{display:none}}
@media(max-width:575.98px){body{font-size:.88rem}.topbar{height:72px;padding:0 15px}.topbar h1{font-size:1.12rem}.content-wrap{padding:15px}.page-head{align-items:flex-start;flex-direction:column}.page-head .btn{width:100%}.card{border-radius:16px}.card-body{padding:16px}.auth-page{padding:12px}.auth-card{border-radius:22px}.auth-visual{padding:25px}.auth-form-wrap{padding:30px 22px}.auth-copy h1{font-size:2.2rem}.camera-stage{min-height:280px}.face-frame{width:58%;left:21%}}
@media print{.sidebar,.topbar,.no-print,.btn,.filter-panel{display:none!important}.main-content{margin:0}.content-wrap{padding:0}.card{box-shadow:none;border:0}.print-only{display:block}.table{font-size:10pt}@page{size:A4;margin:12mm}}