:root{--navy:#10254a;--navy2:#17386d;--gold:#e2aa32;--bg:#f3f6fb;--text:#1e293b;--muted:#64748b;--green:#16a34a;--red:#dc2626;--line:#e2e8f0;--shadow:0 8px 28px rgba(15,35,70,.09)}*{box-sizing:border-box}body{margin:0;font:14px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}.app{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:linear-gradient(180deg,var(--navy),#09172e);color:white;padding:22px 14px;z-index:30}.brand{display:flex;gap:10px;align-items:center;padding:0 8px 24px}.brandmark{width:38px;height:38px;border:2px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-weight:900}.brand b{font-size:12px}.brand small,.topbar small{display:block;opacity:.72}.sidebar nav{display:grid;gap:5px}.sidebar nav a{padding:11px 13px;border-radius:10px;display:flex;gap:12px}.sidebar nav a:hover{background:#ffffff18}.app main{margin-left:250px}.topbar{height:72px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 28px;position:sticky;top:0;z-index:20}.menu{display:none;border:0;background:none;font-size:24px}.content{padding:26px;max-width:1500px;margin:auto}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{background:white;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow)}.stat strong{font-size:28px;display:block;color:var(--navy)}.stat small,.muted{color:var(--muted)}h1,h2,h3{margin-top:0}h2{font-size:18px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}.btn{border:0;border-radius:10px;padding:10px 15px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn-primary{background:var(--navy2);color:white}.btn-gold{background:var(--gold);color:#1b2434}.btn-light{background:#edf2f7;color:var(--text)}.btn-danger{background:#fee2e2;color:var(--red)}input,select,textarea{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;background:white;font:inherit}.form-group{margin-bottom:14px}.form-group label{display:block;font-weight:650;margin-bottom:5px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;white-space:nowrap}.table th,.table td{padding:11px;border-bottom:1px solid var(--line);text-align:left}.table th{font-size:12px;text-transform:uppercase;color:var(--muted);background:#f8fafc}.badge{display:inline-block;padding:4px 9px;border-radius:99px;font-size:12px;font-weight:700}.success{background:#dcfce7;color:#166534}.warning{background:#fef3c7;color:#92400e}.danger{background:#fee2e2;color:#991b1b}.info{background:#dbeafe;color:#1e40af}.alert{padding:12px 15px;border-radius:10px;margin-bottom:15px}.attendance-hero{text-align:center;max-width:650px;margin:auto}.clock{font-size:38px;font-weight:800;color:var(--navy);letter-spacing:1px}.camera{background:#0b1220;border-radius:16px;overflow:hidden;aspect-ratio:4/3;margin:15px 0;position:relative}.camera video,.camera canvas,.camera img{width:100%;height:100%;object-fit:cover}.camera-note{position:absolute;left:10px;bottom:10px;background:#000a;color:white;padding:5px 9px;border-radius:8px;font-size:12px}.privacy{background:#eff6ff;border-left:4px solid #3b82f6;padding:10px 12px;text-align:left;border-radius:8px;margin:12px 0}.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#09172e,#17386d)}.login-card{width:min(420px,92vw);background:white;border-radius:22px;padding:30px;box-shadow:0 25px 70px #0005}.login-logo{text-align:center;margin-bottom:25px}.login-logo .brandmark{margin:auto;width:58px;height:58px}.empty{text-align:center;padding:32px;color:var(--muted)}.overlay{display:none}.modal{position:fixed;inset:0;background:#0008;display:none;place-items:center;z-index:50}.modal.open{display:grid}.modal-box{background:white;padding:22px;border-radius:16px;width:min(520px,92vw);max-height:90vh;overflow:auto}
@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:none}.app main{margin-left:0}.menu{display:block;margin-right:12px}.overlay.open{display:block;position:fixed;inset:0;background:#0006;z-index:25}.content{padding:16px}.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.grid,.form-grid{grid-template-columns:1fr}.topbar{padding:0 14px}.card{padding:15px;border-radius:13px}.clock{font-size:32px}.btn.mobile-full{width:100%}.table th,.table td{padding:9px 8px}.hide-mobile{display:none}}