*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(160deg,#0a1e3d,#1e3a8a);color:#fff;user-select:none;-webkit-user-select:none}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:#00000040}.topbar .title{font-size:22px;font-weight:700;letter-spacing:1px}.topbar .right{display:flex;gap:12px;align-items:center}.badge{background:#1677ff;padding:4px 10px;border-radius:12px;font-size:12px}.badge.warn{background:#d4380d}.badge.ok{background:#389e0d}.center{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}.pin-pad{background:#ffffff0f;border-radius:16px;padding:32px;width:360px;text-align:center;box-shadow:0 8px 32px #0000004d}.pin-display{font-size:48px;letter-spacing:16px;height:64px;margin:12px 0 24px;background:#0000004d;border-radius:8px;line-height:64px}.pin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.pin-grid button{height:64px;font-size:24px;font-weight:600;border-radius:8px;border:none;background:#ffffff1a;color:#fff;cursor:pointer}.pin-grid button:active{background:#fff3}.pin-grid button.primary{background:#1677ff}.pin-grid button.danger{background:#d4380d}.home{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:100%;max-width:900px}.action-card{background:#ffffff0f;border-radius:16px;padding:24px;cursor:pointer;text-align:center;transition:transform .1s ease}.action-card:active{transform:scale(.98)}.action-card .label{font-size:24px;font-weight:700;margin-bottom:8px}.action-card .sub{font-size:14px;opacity:.8}.action-card.in{background:#1677ff}.action-card.out{background:#d4380d}.action-card.break{background:#faad14}.action-card.job{background:#13c2c2}.user-info{text-align:center;margin-bottom:24px}.user-info .name{font-size:32px;font-weight:700}.user-info .meta{font-size:14px;opacity:.7;margin-top:6px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:10}.modal{background:#fff;color:#1f1f1f;border-radius:12px;padding:24px;min-width:320px;max-width:90vw;box-shadow:0 12px 40px #0006}.modal h2{margin:0 0 16px}.modal .actions{display:flex;gap:12px;margin-top:24px;justify-content:flex-end}.modal button{padding:10px 18px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;cursor:pointer}.modal button.primary{background:#1677ff;color:#fff;border-color:#1677ff}.job-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto}.job-list label{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #eee;border-radius:6px;cursor:pointer}.job-list label.selected{background:#e6f4ff;border-color:#1677ff}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);padding:12px 24px;border-radius:8px;background:#000000d9;font-size:14px;z-index:20;max-width:80%;text-align:center}.toast.success{background:#389e0d}.toast.error{background:#d4380d}.clock{font-variant-numeric:tabular-nums;font-size:56px;font-weight:700;margin:16px 0}.elapsed{font-size:20px;opacity:.85;margin-bottom:16px}.bottom-bar{padding:12px;text-align:center;font-size:12px;opacity:.6}