:root{--navy:#10263e;--navy2:#173b59;--teal:#0b9ca6;--orange:#ef7b22;--bg:#f1f5f8;--line:#dbe4ea;--text:#172b3d;--muted:#657686;--white:#fff;--red:#c84444;--green:#198754}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}.topbar{height:76px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100% - 1180px)/2));box-shadow:0 4px 15px #10263e30}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-size:18px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--teal),#13b4bd);font-size:12px;font-weight:900}.brand b{color:#61d8de}.topbar nav{display:flex;gap:6px}.nav-btn{border:0;background:transparent;color:#bfd0de;padding:12px 16px;border-radius:9px;font-weight:700;cursor:pointer}.nav-btn.active,.nav-btn:hover{background:#ffffff16;color:#fff}.view{display:none}.view.active{display:block}.hero{text-align:center;padding:55px 20px 24px}.hero h1,.admin-head h1{font-size:clamp(32px,5vw,48px);margin:7px 0}.hero p,.admin-head p,.card p{color:var(--muted);line-height:1.55}.eyebrow{color:var(--teal);font-size:12px;font-weight:900;letter-spacing:1.6px}.card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 28px #17324d12;padding:26px}.device-card{max-width:600px;margin:0 auto 60px}.card h2{margin:12px 0 4px}.status{display:inline-flex;padding:7px 11px;border-radius:99px;font-size:12px;font-weight:800}.status.warn{background:#fff2e7;color:#b55511}.status.ok{background:#e5f7ed;color:#167147}label{display:block;font-weight:800;font-size:13px;margin:18px 0 7px}input,select{width:100%;border:1px solid #cdd9e1;border-radius:10px;padding:13px 14px;font:inherit;color:var(--text);background:#fff}input:focus,select:focus{outline:3px solid #0b9ca622;border-color:var(--teal)}button{font:inherit;cursor:pointer;border-radius:10px;border:0;font-weight:800;padding:12px 16px}.primary{background:var(--teal);color:#fff}.primary:hover{background:#087f88}.secondary{background:#e8eff4;color:var(--navy)}.wide{width:100%;margin-top:18px}.location{margin-top:20px;border:1px solid var(--line);background:#f7fafc;padding:16px;border-radius:13px;display:flex;align-items:center;justify-content:space-between;gap:14px}.location strong,.location small{display:block}.location small{margin-top:4px;color:var(--muted)}.actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.mark{padding:16px;color:#fff}.mark.enter{background:var(--green)}.mark.exit{background:var(--orange)}#admin{max-width:1200px;margin:auto;padding:45px 20px 70px}.login{max-width:460px;margin:30px auto}.admin-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px}.admin-head h1{font-size:38px}.admin-head>div:last-child{display:flex;gap:9px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:18px}.metrics article{background:var(--navy);color:#fff;border-radius:15px;padding:20px}.metrics span{display:block;color:#b9ccd9}.metrics strong{font-size:36px}.employee-form{display:grid;grid-template-columns:2fr 1fr auto;gap:10px;margin:18px 0}.employee-form input{margin:0}.employee-list{display:grid;gap:8px}.employee{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding:13px 0}.employee small{display:block;color:var(--muted);margin-top:4px}.employee>div:last-child{display:flex;gap:7px}.title-row{display:flex;justify-content:space-between}.title-row h2{margin:0}.admin-grid{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(260px,.8fr);gap:18px;margin-top:18px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;min-width:740px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:13px 10px;vertical-align:top}th{color:var(--muted);font-size:12px;text-transform:uppercase}td small{display:block;color:var(--muted);margin-top:4px}.badge{padding:5px 8px;border-radius:99px;font-size:12px;font-weight:800}.badge.in{background:#e4f6ec;color:#157448}.badge.out{background:#fff0e4;color:#ae5313}.qr{text-align:center}.qr img{display:block;width:min(100%,280px);margin:18px auto}.empty{text-align:center;color:var(--muted);padding:20px}#toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,25px);background:var(--navy);color:#fff;padding:13px 18px;border-radius:10px;opacity:0;pointer-events:none;transition:.25s;z-index:10;box-shadow:0 8px 25px #0003}#toast.show{opacity:1;transform:translate(-50%,0)}#toast.error{background:var(--red)}[hidden]{display:none!important}@media(max-width:760px){.topbar{height:auto;min-height:74px;padding:12px 16px;align-items:flex-start}.brand>span:last-child{display:none}.topbar nav{flex:1;justify-content:flex-end}.nav-btn{font-size:13px;padding:11px 9px}.hero{padding-top:38px}.actions,.metrics,.admin-grid{grid-template-columns:1fr}.admin-head{align-items:flex-start;flex-direction:column}.employee-form{grid-template-columns:1fr}.employee{align-items:flex-start;flex-direction:column}.employee>div:last-child{width:100%;flex-wrap:wrap}.location{align-items:flex-start;flex-direction:column}.location button{width:100%}}