:root{--navy:#0b1f3a;--navy2:#12345c;--blue:#1769e0;--bg:#f4f7fb;--card:#fff;--text:#122033;--muted:#6b7a90;--line:#dde5ef;--ok:#169b62;--warn:#cc7a00;--danger:#c63b3b;--radius:16px;--shadow:0 12px 30px rgba(9,29,55,.08)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}.hidden{display:none!important}.stack{display:grid;gap:14px}.login-screen{min-height:100dvh;display:grid;place-items:center;padding:24px;background:linear-gradient(145deg,#07162b,#113762 65%,#1769e0)}.login-card{width:min(430px,100%);background:#fff;border-radius:24px;padding:32px;box-shadow:0 24px 70px rgba(0,0,0,.28)}.login-card h1{margin:14px 0 6px}.login-card p{margin:0 0 24px;color:var(--muted)}label{display:grid;gap:7px;font-weight:650;font-size:14px}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px 12px;background:#fff;color:var(--text);outline:none}input:focus,select:focus,textarea:focus{border-color:#72a8ef;box-shadow:0 0 0 3px rgba(23,105,224,.10)}textarea{min-height:90px;resize:vertical}.brand-mark{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;font-weight:900;background:linear-gradient(135deg,var(--blue),#74adff);color:#fff}.brand-mark.small{width:39px;height:39px;border-radius:12px;font-size:13px}.btn{border:0;border-radius:11px;padding:11px 15px;font-weight:750;cursor:pointer}.btn.primary{background:var(--blue);color:#fff}.btn.secondary{background:#eaf1fb;color:var(--navy)}.btn.danger{background:#ffeaea;color:var(--danger)}.btn:disabled{opacity:.55;cursor:not-allowed}.app-shell{min-height:100dvh;display:grid;grid-template-columns:250px 1fr}.sidebar{background:var(--navy);color:#fff;padding:20px 16px;display:flex;flex-direction:column;min-height:100dvh;position:sticky;top:0;height:100dvh}.brand{display:flex;gap:12px;align-items:center;padding:4px 6px 22px}.brand small,.sidebar-footer small{display:block;color:#9fb2cb;margin-top:3px}.sidebar nav{display:grid;gap:5px}.sidebar nav button{border:0;background:transparent;color:#c8d6e7;text-align:left;padding:11px 13px;border-radius:10px;cursor:pointer}.sidebar nav button.active,.sidebar nav button:hover{background:#183b65;color:#fff}.sidebar-footer{margin-top:auto;padding:16px 8px 2px;border-top:1px solid rgba(255,255,255,.12)}.link-btn{border:0;background:transparent;color:#9fc5ff;padding:10px 0;cursor:pointer}.main{min-width:0}.topbar{height:92px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:5}.topbar h2{margin:0;font-size:23px}.topbar p{margin:5px 0 0;color:var(--muted);font-size:13px}.online-dot{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.online-dot span:first-child{width:9px;height:9px;background:var(--ok);border-radius:50%}.content{padding:26px;max-width:1440px;margin:0 auto}.grid{display:grid;gap:18px}.grid.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:var(--card);border:1px solid #e8eef5;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.metric .value{font-size:32px;font-weight:850;margin-top:10px}.metric .label{color:var(--muted);font-size:13px}.metric .hint{font-size:12px;color:var(--muted);margin-top:8px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title h3{margin:0}.section-title p{margin:4px 0 0;color:var(--muted);font-size:13px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.form-grid .full{grid-column:1/-1}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}table{border-collapse:collapse;width:100%;background:#fff;font-size:13px}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);white-space:nowrap}th{background:#f7f9fc;color:#506078}.badge{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:800;background:#e8eef7;color:#526478}.badge.ok{background:#e5f8ef;color:#0d8050}.badge.warn{background:#fff0d8;color:#9a5c00}.badge.bad{background:#ffe7e7;color:#a52f2f}.attendance-hero{text-align:center;padding:26px}.clock{font-size:42px;font-weight:900;letter-spacing:-1.5px}.date-text{color:var(--muted);margin:5px 0 18px}.location-box{background:#f5f8fd;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:left;margin:16px 0}.camera-box{background:#0b1727;border-radius:14px;padding:12px;color:#fff}.camera-box video{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:#02060b}.camera-actions{display:flex;gap:8px;margin-top:10px}.camera-status{font-size:12px;color:#b9c8db;margin-top:9px}.notice{padding:13px 15px;border-radius:12px;background:#edf5ff;border:1px solid #cfe3ff;color:#31567f;font-size:13px}.toast{position:fixed;right:20px;top:20px;z-index:100;background:#111d2f;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(-10px);transition:.2s}.toast.show{opacity:1;transform:none}.toast.error{background:#8e2828}.row-actions{display:flex;gap:7px}.muted{color:var(--muted)}code{background:#eef2f7;padding:2px 5px;border-radius:5px}.empty{padding:35px;text-align:center;color:var(--muted)}
@media(max-width:1000px){.grid.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.app-shell{grid-template-columns:84px 1fr}.sidebar{padding:16px 10px}.brand>div{display:none}.sidebar nav button{font-size:0;text-align:center}.sidebar nav button:before{content:attr(data-view);font-size:10px;text-transform:capitalize}.sidebar-footer #userName,.sidebar-footer small{display:none}}
@media(max-width:700px){.app-shell{display:block;padding-bottom:70px}.sidebar{position:fixed;z-index:20;left:0;right:0;bottom:0;top:auto;height:66px;min-height:0;padding:7px 8px;display:block;background:#0b1f3af2;backdrop-filter:blur(14px)}.brand,.sidebar-footer{display:none}.sidebar nav{display:flex;overflow-x:auto;gap:4px}.sidebar nav button{min-width:74px;padding:10px 7px;font-size:0}.sidebar nav button:before{font-size:10px}.topbar{height:76px;padding:0 16px}.topbar h2{font-size:20px}.topbar p{display:none}.content{padding:15px}.grid.cards,.grid.two,.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.card{padding:16px}.clock{font-size:36px}}