:root{--ink: #1a1d1f;--paper: #edeeea;--paper-raised: #f6f6f3;--line: #d4d3c9;--steel: #2b4c5c;--steel-dark: #1c333f;--arrived: #2f6b4f;--arrived-dim: #e3ede8;--departed: #a6462e;--departed-dim: #f3e4e0;--muted: #6b6f66}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:Assistant,system-ui,sans-serif;font-size:16px;line-height:1.5}button,input{font-family:inherit}.app-shell{min-height:100%;display:flex;flex-direction:column}.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--steel-dark);padding:24px}.login-card{width:100%;max-width:380px;background:var(--paper-raised);padding:40px 32px;border-radius:4px}.login-title{font-size:28px;font-weight:800;margin:0 0 4px;color:var(--ink)}.login-sub{color:var(--muted);margin:0 0 28px;font-size:15px}.field{margin-bottom:16px}.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--ink)}.field input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:3px;font-size:16px;background:#fff}.field input:focus{outline:2px solid var(--steel);outline-offset:1px}.btn-primary{width:100%;padding:13px;background:var(--steel);color:#fff;border:none;border-radius:3px;font-size:16px;font-weight:700;cursor:pointer;transition:background .15s ease}.btn-primary:hover{background:var(--steel-dark)}.btn-primary:disabled{opacity:.6;cursor:default}.form-error{color:var(--departed);font-size:14px;margin-bottom:16px}.employee-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:32px 20px 48px}.employee-topbar{width:100%;max-width:480px;display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}.employee-name{font-weight:700;font-size:18px}.link-btn{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;text-decoration:underline}.clock{font-size:56px;font-weight:800;letter-spacing:1px;margin-bottom:6px;font-variant-numeric:tabular-nums}.clock-date{color:var(--muted);margin-bottom:40px;font-size:16px}.punch-btn{width:220px;height:220px;border-radius:50%;border:none;color:#fff;font-size:24px;font-weight:800;cursor:pointer;box-shadow:0 0 0 8px #0000000a;transition:transform .12s ease,box-shadow .12s ease}.punch-btn:active{transform:scale(.97)}.punch-btn.state-out{background:var(--arrived)}.punch-btn.state-in{background:var(--departed)}.punch-btn:disabled{opacity:.65;cursor:default}.punch-status{margin-top:20px;font-size:15px;color:var(--muted);min-height:20px;text-align:center}.punch-status.error{color:var(--departed)}.history{width:100%;max-width:480px;margin-top:56px}.history h2{font-size:16px;font-weight:700;margin:0 0 12px}.history-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}.history-row:last-child{border-bottom:none}.tag{display:inline-block;padding:2px 10px;border-radius:12px;font-size:13px;font-weight:700}.tag.in{background:var(--arrived-dim);color:var(--arrived)}.tag.out{background:var(--departed-dim);color:var(--departed)}.manager-shell{display:flex;min-height:100vh}.manager-nav{width:220px;background:var(--steel-dark);color:#fff;padding:28px 20px;flex-shrink:0}.manager-nav-title{font-size:20px;font-weight:800;margin-bottom:4px}.manager-nav-sub{font-size:13px;color:#fff9;margin-bottom:32px}.manager-nav button{display:block;width:100%;text-align:right;padding:10px 12px;margin-bottom:4px;background:none;border:none;color:#fffc;font-size:15px;font-weight:600;border-radius:3px;cursor:pointer}.manager-nav button.active{background:#ffffff1f;color:#fff}.manager-nav .logout{margin-top:32px;color:#ffffff8c;font-weight:500}.manager-content{flex:1;padding:36px 40px;max-width:980px}.manager-content h1{font-size:24px;font-weight:800;margin:0 0 24px}.panel{background:var(--paper-raised);border:1px solid var(--line);border-radius:4px;padding:24px;margin-bottom:24px}.panel h2{font-size:17px;font-weight:700;margin:0 0 16px}.inline-form{display:flex;gap:10px;align-items:flex-end}.inline-form .field{margin-bottom:0;flex:1}.data-table{width:100%;border-collapse:collapse}.data-table th{text-align:right;font-size:13px;font-weight:700;color:var(--muted);padding:8px 10px;border-bottom:2px solid var(--line)}.data-table td{padding:12px 10px;border-bottom:1px solid var(--line);font-size:15px}.data-table tr:last-child td{border-bottom:none}.credential-box{background:var(--arrived-dim);border:1px solid var(--arrived);border-radius:4px;padding:16px;margin-top:16px;font-size:15px}.credential-box strong{font-variant-numeric:tabular-nums}.muted{color:var(--muted)}.status-pill{display:inline-block;padding:2px 10px;border-radius:12px;font-size:13px;font-weight:700}.status-pill.active{background:var(--arrived-dim);color:var(--arrived)}.status-pill.inactive{background:var(--departed-dim);color:var(--departed)}.small-btn{background:none;border:1px solid var(--line);border-radius:3px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink)}.small-btn:hover{border-color:var(--steel);color:var(--steel)}