:root{--green: #138a4f;--green-d: #0e6b3d;--red: #d23b36;--red-d: #b22f2b;--amber: #c77c0a;--amber-d: #a5650a;--ink: #15181c;--muted: #6b7280;--line: #e4e7ea;--bg: #f4f5f7;font-family:Hanken Grotesk,system-ui,-apple-system,sans-serif;color:var(--ink)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:var(--bg);-webkit-font-smoothing:antialiased}input,button{font-family:inherit}input:focus{outline:none}.screen{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:18px}.screen.center{justify-content:center;align-items:center}.muted{color:var(--muted)}.sm{font-size:12.5px}.center-text{text-align:center}.error{color:var(--red);font-weight:700;text-align:center}.login{width:100%;max-width:360px;background:#fff;border-radius:22px;padding:30px;box-shadow:0 20px 50px #0000001a;display:grid;gap:14px}.brand{display:flex;align-items:center;justify-content:center;gap:10px;font-size:24px;font-weight:800}.brand .logo{width:40px;height:40px;border-radius:10px}.login input{width:100%;min-height:50px;border:1.5px solid var(--line);border-radius:13px;padding:0 14px;font-size:16px}.login input:focus{border-color:var(--green)}.by{text-align:center;color:var(--muted);font-size:12px;font-weight:600}button{cursor:pointer;font-weight:800;border:none;border-radius:16px;color:#fff}button:active{transform:translateY(1px)}button:disabled{opacity:.55}.block{width:100%;min-height:54px;font-size:17px}button.green{background:var(--green);box-shadow:0 4px 0 var(--green-d)}button.red{background:var(--red);box-shadow:0 4px 0 var(--red-d)}button.amber{background:var(--amber);box-shadow:0 4px 0 var(--amber-d)}.link{background:none;color:var(--muted);font-weight:700;font-size:14px;box-shadow:none}.top{display:flex;align-items:flex-start;justify-content:space-between}.hi{font-size:22px;font-weight:800;letter-spacing:-.3px}.bigwrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px 0}.clocknow{font-size:46px;font-weight:800;letter-spacing:-1px}.statelabel{font-size:14px;font-weight:700;color:var(--muted);margin-top:-8px}.big{width:100%;max-width:320px;min-height:150px;border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.big-l{font-size:26px}.big-s{font-size:14px;font-weight:600;opacity:.9}.secondary{background:#fff;color:var(--ink);border:1.5px solid var(--line);min-height:50px;width:100%;max-width:320px;font-size:16px;box-shadow:none}.flash{background:#eef6f0;color:var(--green-d);font-weight:700;padding:10px 16px;border-radius:12px;font-size:14px}.timeline{border-top:1px solid var(--line);padding-top:14px}.tl-title{font-weight:800;font-size:13px;margin-bottom:8px}.tl-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line)}.tl-type{flex:1;font-weight:700;font-size:14px}.tl-time{color:var(--muted);font-size:13px;font-weight:600}.dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}.dot.clock_in{background:var(--green)}.dot.clock_out{background:var(--red)}.dot.break_start,.dot.break_end{background:var(--amber)}.corr{margin-top:16px}.corr-form{display:grid;gap:8px;margin-top:8px}.corr-form select,.corr-form input{width:100%;min-height:46px;border:1.5px solid var(--line);border-radius:12px;padding:0 12px;font-size:15px}.corr-form button{min-height:48px;font-size:16px}