:root{--bg:#071321;--panel:#0d2033;--line:#203b51;--text:#f5f8fa;--muted:#88a1b7;--mint:#22d3a6;--blue:#168cf0;--orange:#ffb444}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 80% -10%,#134a66 0,transparent 35%),var(--bg);color:var(--text);font:15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif;min-height:100vh}main{max-width:1180px;margin:auto;padding:28px}header{display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:13px}.brand img{width:52px;height:52px}.brand strong,.brand span{display:block}.brand strong{font-size:21px;letter-spacing:.2px}.brand span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1.7px}.network{border:1px solid var(--line);border-radius:99px;padding:8px 13px;display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px}.network i{width:8px;height:8px;border-radius:50%;background:var(--orange)}.network.online i{background:var(--mint);box-shadow:0 0 10px var(--mint)}.hero{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;align-items:end;padding:72px 0 38px}.eyebrow{color:var(--mint);letter-spacing:2.2px;font-size:11px;font-weight:800}.hero h1{font-size:clamp(40px,7vw,74px);line-height:1;margin:10px 0 18px;letter-spacing:-3px}.sub{max-width:620px;color:var(--muted);font-size:16px}.clock{text-align:right}.clock strong{font-variant-numeric:tabular-nums;font-size:clamp(44px,6vw,70px);letter-spacing:-3px}.clock span{display:block;color:var(--muted)}.panel{background:color-mix(in srgb,var(--panel) 86%,transparent);border:1px solid var(--line);border-radius:20px;padding:24px;margin-bottom:18px;box-shadow:0 20px 50px #0004}.section-title,.section-title>div{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-title span{color:var(--mint);font:700 12px monospace}.section-title h2{font-size:17px}.section-title small{color:var(--muted)}.employees{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.employee{border:1px solid var(--line);background:#0a1928;color:var(--text);border-radius:13px;padding:16px;text-align:left;font-weight:700;cursor:pointer;transition:.2s}.employee:hover,.employee.selected{border-color:var(--mint);background:#103832;transform:translateY(-1px)}.employee.admin:after{content:'ADMIN';float:right;color:var(--orange);font-size:9px;letter-spacing:1px}.employee.standby{border-style:dashed;color:var(--mint)}.add-box{margin-top:14px;padding:18px;border-radius:14px;background:#081827}.add-box label{display:block;color:var(--muted);margin-bottom:8px}.add-box div{display:flex;gap:8px}.add-box input{flex:1;background:#071321;border:1px solid var(--line);border-radius:10px;color:white;padding:12px}.add-box button{border:0;border-radius:10px;padding:0 16px;font-weight:800;background:var(--mint);color:#05251e}.add-box .quiet{background:transparent;color:var(--muted);border:1px solid var(--line)}.hidden{display:none}.actions{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px;margin:18px 0}.selected,.punch{min-height:105px;border-radius:18px;padding:20px}.selected{background:linear-gradient(135deg,#1487ed,#16b9a1);display:flex;flex-direction:column;justify-content:center}.selected span{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;opacity:.8}.selected strong{font-size:26px}.punch{border:1px solid var(--line);color:var(--text);text-align:left;display:flex;flex-direction:column;justify-content:center;cursor:pointer}.punch span{font-weight:900;font-size:21px}.punch small{opacity:.7}.punch.in{background:#113e35}.punch.out{background:#3b2722}.punch:disabled{opacity:.35;cursor:not-allowed}.record-list{display:grid;gap:8px;margin-top:12px}.record{display:grid;grid-template-columns:1.2fr .7fr 1fr auto;align-items:center;gap:12px;border-top:1px solid var(--line);padding:12px 2px}.record .type{color:var(--mint);font-weight:800}.record .pending{color:var(--orange);font-size:11px}.empty{color:var(--muted);padding:20px 0}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,30px);opacity:0;background:#fff;color:#071321;padding:12px 18px;border-radius:12px;font-weight:800;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:760px){main{padding:18px}.hero{grid-template-columns:1fr;padding:50px 0 28px}.clock{text-align:left}.employees{grid-template-columns:repeat(2,1fr)}.actions{grid-template-columns:1fr}.record{grid-template-columns:1fr 1fr}.record span:nth-child(3){grid-column:1/2}.brand span{letter-spacing:.8px}.hero h1{letter-spacing:-2px}.add-box div{flex-wrap:wrap}.add-box input{flex-basis:100%}}