:root{font-family:'Overpass',system-ui,-apple-system,Segoe UI,sans-serif;color:#172033;background:#edf3f9;--primary:#165db6;--dark:#101a2e;--muted:#64748b;--line:#dbe5f0;--panel:#fff;--soft:#f7fbff;--success:#168a55;--danger:#b73535;--amber:#c27a13;--shadow:0 18px 50px rgba(30,41,59,.10);--radius:24px}*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#f7fbff,#edf3f9);min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}.clock-page{min-height:100vh;padding:28px;background:radial-gradient(circle at top left,rgba(30,101,193,.14),transparent 34%),radial-gradient(circle at bottom right,rgba(22,138,85,.08),transparent 30%),linear-gradient(180deg,#f7fbff,#edf3f9);display:flex;flex-direction:column;gap:24px}.clock-top{display:flex;justify-content:space-between;gap:24px;align-items:center}.clock-top h1{margin:0;font-size:clamp(2rem,4vw,2.7rem);font-weight:900;letter-spacing:-.04em}.clock-top p{margin:8px 0 0;color:var(--muted);font-weight:700}.clock-time{background:rgba(255,255,255,.92);padding:18px 28px;border-radius:24px;font-size:clamp(2rem,4vw,2.8rem);font-weight:900;box-shadow:var(--shadow);min-width:190px;text-align:center}.admin-icon{position:absolute;right:24px;top:24px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);display:grid;place-items:center;text-decoration:none}.clock-card{width:min(760px,100%);margin:auto;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.9);border-radius:34px;padding:42px;text-align:center;box-shadow:0 26px 85px rgba(36,50,75,.16)}.clock-card h2{font-size:clamp(2rem,3vw,2.5rem);margin:0 0 24px;font-weight:900}.pin-dots{font-size:2rem;letter-spacing:10px;color:var(--primary);margin-bottom:28px;min-height:42px}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.keypad button,.action,.secondary,.admin-btn,.small-btn{border:0;border-radius:18px;background:#fff;color:#172033;min-height:60px;font-weight:900;box-shadow:0 10px 28px rgba(30,50,80,.10);transition:.15s}.keypad button{min-height:74px;font-size:1.45rem}.keypad button:hover,.action:hover,.secondary:hover,.admin-btn:hover,.small-btn:hover{transform:translateY(-1px)}.action{width:100%;margin-top:22px;min-height:78px;background:linear-gradient(180deg,#1aa364,#13804f);color:#fff;font-size:1.8rem}.action.danger{background:linear-gradient(180deg,#d34b4b,#b73535)}.action.amber{background:linear-gradient(180deg,#d9942d,#c27a13)}.secondary{margin-top:16px;width:100%;background:#eef3f9}.status-pill{display:inline-flex;padding:14px 24px;border-radius:999px;background:#e9eef5;font-weight:900;letter-spacing:.04em}.status-pill.clocked_in{background:#dff7ec;color:#087346}.status-pill.on_break{background:#fff1d6;color:#9c5b00}.status-pill.clocked_out{background:#eceff4;color:#546172}.hours-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 8px}.hours-grid div{background:#f8fbff;border:1px solid #e4ebf4;border-radius:18px;padding:18px;text-align:left}.hours-grid span{display:block;color:var(--muted);font-size:.9rem;font-weight:800;margin-bottom:8px}.hours-grid strong{font-size:1.35rem;font-weight:900}.message{font-weight:900;color:var(--primary);margin-top:18px}.error{color:var(--danger)}
.admin-shell{min-height:100vh;display:grid;grid-template-columns:290px 1fr;background:#f3f7fb}.sidebar{background:linear-gradient(180deg,#0f172a,#172033);padding:30px 24px;color:#fff;display:flex;flex-direction:column;gap:10px}.sidebar h2{margin:0 0 18px;font-size:1.6rem;font-weight:900}.sidebar a,.sidebar button{color:#dfe8f7;text-decoration:none;padding:13px 16px;border-radius:14px;background:transparent;border:0;text-align:left;font-weight:900}.sidebar a:hover,.sidebar button:hover{background:rgba(255,255,255,.10);color:#fff}.main{padding:34px}.page-stack{display:grid;gap:22px}.hero,.panel,.stat{background:#fff;border:1px solid rgba(219,229,240,.75);border-radius:24px;padding:26px;box-shadow:0 10px 30px rgba(30,41,59,.07)}.hero{display:flex;justify-content:space-between;gap:18px}.hero h1{margin:0 0 8px;font-size:clamp(2rem,3vw,2.4rem);font-weight:900;letter-spacing:-.03em}.hero p,.panel p{margin:0;color:var(--muted);line-height:1.55}.eyebrow{display:inline-flex;padding:8px 12px;border-radius:999px;background:#eaf1fb;color:var(--primary);font-size:.8rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.stat span{color:var(--muted);font-weight:900}.stat strong{display:block;font-size:2.7rem;font-weight:900;margin-top:10px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.admin-btn{background:linear-gradient(180deg,var(--primary),#0f468a);color:#fff;padding:14px 20px}.small-btn{min-height:42px;padding:10px 14px;background:#edf3f9}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.form{display:grid;gap:12px}.form label{font-weight:900;color:#39465a}.form input,.form select,.filters input{width:100%;padding:14px 15px;border-radius:14px;border:1px solid #cad4e2;background:#fff}.table-wrap{overflow:auto}table{width:100%;border-collapse:separate;border-spacing:0}th,td{padding:14px 16px;border-bottom:1px solid #e6ebf2;text-align:left;background:#fff;white-space:nowrap}th{color:var(--muted);text-transform:uppercase;font-size:.85rem;letter-spacing:.03em}.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top left,#e6f1ff,#f4f7fb 45%,#e8edf5);padding:24px}.login-card{width:min(460px,100%);background:#fff;border-radius:28px;box-shadow:0 24px 80px rgba(36,50,75,.18);padding:34px;display:grid;gap:16px}.back{position:absolute;top:24px;left:24px;background:#fff;border:1px solid #d8e1ed;border-radius:999px;padding:11px 16px;text-decoration:none;font-weight:900}.filters{display:flex;gap:14px;flex-wrap:wrap;align-items:end}.filters label{font-weight:900;display:grid;gap:8px}.sync-result{display:grid;gap:8px;background:#f4f7fb;border:1px solid #e4ebf4;border-radius:18px;padding:18px;margin-top:16px}.success{color:#087346}.failed{color:#9f2e2e}@media(max-width:900px){.clock-top,.hero,.panel-head{flex-direction:column;align-items:stretch;text-align:left}.clock-time{text-align:center}.hours-grid,.stats,.grid2{grid-template-columns:1fr}.admin-shell{grid-template-columns:1fr}.sidebar{position:sticky;top:0;z-index:5}.main{padding:20px}}@media(max-width:640px){.clock-page{padding:18px}.clock-card{padding:26px 18px;border-radius:24px}.keypad{gap:12px}.keypad button{min-height:66px}.main{padding:16px}.sidebar{padding:18px}th,td{padding:12px}}