:root{--nav:#102f53;--blue:#1769d2;--bg:#f4f7fb;--text:#172b4d;--muted:#667085;--line:#e4e9f0;--danger:#b42318;--ok:#067647;--side:268px}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:15px}.nav-check{display:none}.topbar{position:fixed;z-index:20;left:var(--side);right:0;top:0;height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 28px;box-shadow:0 2px 8px #102f5310}.top-title{font-size:20px;font-weight:700}.top-user{margin-left:auto;text-align:right;display:flex;flex-direction:column;line-height:1.3}.top-user span{font-weight:700}.top-user small{color:var(--muted)}.menu-button{display:none;font-size:25px;cursor:pointer;margin-right:14px}.sidebar{position:fixed;z-index:30;left:0;top:0;bottom:0;width:var(--side);background:linear-gradient(180deg,var(--nav),#0a2540);color:#fff;box-shadow:4px 0 18px #0a254025;overflow-y:auto}.sidebar-brand{min-height:92px;padding:20px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #ffffff18}.sidebar-brand strong{display:block;font-size:15px}.sidebar-brand small{display:block;color:#c7d8eb;margin-top:4px}.brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#3a8cf0,#70b8ff);display:grid;place-items:center;font-size:23px;font-weight:800;box-shadow:0 6px 14px #0003}.side-nav{padding:14px 10px 30px}.side-nav a{color:#eaf2fb;text-decoration:none;display:flex;align-items:center;gap:11px;padding:11px 12px;margin:3px 0;border-radius:9px;font-size:14px;line-height:1.25;transition:.16s}.side-nav a span{width:22px;text-align:center;font-size:18px;color:#8dc3ff}.side-nav a:hover{background:#ffffff14;color:#fff;transform:translateX(2px)}.nav-section{color:#83a4c5;font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:17px 12px 6px}.nav-overlay{display:none}.content{margin-left:var(--side);padding:96px 34px 40px;max-width:1540px;min-height:100vh}.wrap{max-width:1180px;margin:22px auto;padding:0 14px}h1{font-size:28px;margin:0 0 22px;letter-spacing:-.02em}h2{font-size:19px;margin:0 0 14px}.card{background:#fff;border:1px solid #edf0f5;border-radius:14px;padding:20px;margin-bottom:18px;box-shadow:0 3px 12px #172b4d0d}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}.stat{font-size:31px;font-weight:750;margin-top:5px}.muted{color:var(--muted)}.ok{color:var(--ok)}.bad{color:var(--danger)}table{width:100%;border-collapse:separate;border-spacing:0;background:#fff}th,td{padding:12px 11px;border-bottom:1px solid var(--line);text-align:left;font-size:14px;vertical-align:top}th{background:#eef4fb;color:#304966;font-weight:700;white-space:nowrap}tr:last-child td{border-bottom:0}tr:hover td{background:#fafcff}input,select,textarea,button{width:100%;padding:10px 11px;border:1px solid #cbd5e1;border-radius:8px;font:inherit;background:#fff}input:focus,select:focus,textarea:focus{outline:3px solid #1769d21c;border-color:var(--blue)}label{display:block;font-weight:650;margin:10px 0 6px}button,.btn{background:var(--blue);color:#fff;border:0;cursor:pointer;text-decoration:none;display:inline-block;width:auto;padding:10px 16px;border-radius:8px;font-weight:650;box-shadow:0 2px 5px #1769d230}button:hover,.btn:hover{background:#0f58b4}.btn-danger{background:var(--danger)}.actions{display:flex;gap:8px;flex-wrap:wrap}.flash{padding:13px 15px;border-radius:9px;background:#eaf2ff;border:1px solid #cce0ff;margin-bottom:16px}.login{max-width:430px;margin:70px auto}.punch{font-size:18px;padding:15px 24px}.camera{width:100%;max-width:480px;background:#111;border-radius:10px}.preview{max-width:160px;border-radius:8px}@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:.2s}.topbar{left:0;padding:0 15px;height:61px}.menu-button{display:block}.content{margin-left:0;padding:82px 14px 28px}.nav-check:checked~.sidebar{transform:translateX(0)}.nav-check:checked~.nav-overlay{display:block;position:fixed;z-index:25;inset:0;background:#071a2e8c}.top-title{font-size:17px}.top-user span{font-size:13px}.top-user small{font-size:11px}h1{font-size:24px}.card{padding:15px;border-radius:11px}th,td{font-size:12px;padding:8px}.hide-mobile{display:none}}