:root{color:#2f3030;background:#f7f4ed;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(135deg,#6b9b7e24,#f09a541f),#fbfaf6}button,input{font:inherit}button{cursor:pointer}.clock-shell{min-height:100vh;padding:18px;display:flex;flex-direction:column;gap:14px}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;min-height:70px}.logo{width:min(280px,28vw);height:auto}.date-line,.status-line{display:flex;gap:12px;align-items:center;color:#51575c;font-size:15px}.status-line{justify-content:flex-end}.columns{flex:1;min-height:0;display:grid;grid-template-columns:minmax(250px,1fr) minmax(360px,1.25fr) minmax(250px,1fr);gap:16px}.panel{min-height:0;border:1px solid rgba(78,89,96,.18);border-radius:8px;background:#ffffffc7;box-shadow:0 14px 40px #32393e14;display:flex;flex-direction:column}.panel h2{margin:0;padding:18px 20px 12px;text-transform:uppercase;letter-spacing:0;font-size:16px;display:flex;align-items:center;gap:10px}.panel-icon{width:28px;height:28px;display:inline-grid;place-items:center;color:#43545c}.panel-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.panel-scroll{overflow:auto;padding:0 10px 12px;display:grid;gap:12px}.panel footer{margin-top:auto;min-height:52px;display:grid;place-items:center;color:#56636d;border-top:1px solid rgba(78,89,96,.12)}.order-card,.staff-card,.empty-card,.announcement-card{border:1px solid rgba(78,89,96,.16);border-radius:8px;background:#fffefa}.order-card{padding:16px}.order-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.order-heading strong,.staff-details strong,.announcement-card strong,.empty-card strong{display:block;font-size:20px}.order-heading span,.staff-details span,.announcement-card p,.empty-card span{display:block;margin-top:4px;color:#4f565d}.announcement-card p{margin:8px 0 0;line-height:1.45}.order-heading b{border:1px solid #76b889;color:#1e6f38;background:#eaf7ed;border-radius:8px;padding:5px 8px;white-space:nowrap;font-size:14px}.order-items{margin-top:18px;display:grid;gap:8px}.order-items div{display:flex;justify-content:space-between;gap:12px}.order-total{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(78,89,96,.22);text-align:right;color:#1e6f38;font-weight:700}.center-panel{display:grid;grid-template-rows:42% 58%}.announcements{min-height:0;border-bottom:1px solid rgba(78,89,96,.12);display:flex;flex-direction:column}.announcement-list{min-height:0;overflow:auto;padding:0 14px 14px;display:grid;gap:10px}.announcement-card{padding:14px;display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:center}.announcement-mark{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#ffe9d7;color:#bd5d25;font-weight:800}.announcement-mark svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.announcement-card small{display:block;margin-top:10px;color:#6d747a}.muted{opacity:.8}.clock-face{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px}.live-clock{font-size:clamp(52px,7vw,86px);line-height:1;font-weight:650;color:#3b2a23}.live-date{font-size:20px;color:#5d4a43}.action-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:16px}.action-button{min-height:160px;border-radius:8px;border:1px solid transparent;display:grid;place-items:center;gap:6px;padding:18px;color:#2f3030}.action-button strong{text-transform:uppercase;letter-spacing:0;font-size:20px}.action-button small{font-size:15px;color:#4f565d}.action-icon{width:62px;height:62px;display:grid;place-items:center;border-radius:50%;color:#fff}.action-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.clock-in-button{background:#ecf8ee;border-color:#67ad7a}.clock-in-button .action-icon{background:#3a9b5a}.break-button{background:#fff0e2;border-color:#ec9856}.break-button .action-icon{background:#f08a3e}.staff-list{gap:14px}.staff-card{padding:18px;display:grid;grid-template-columns:62px 1fr;gap:16px;align-items:center}.avatar{width:62px;height:62px;display:grid;place-items:center;border-radius:50%;background:#e6ebee;color:#3f4c53;font-weight:800;font-size:24px}.staff-details b{display:inline-block;width:fit-content;margin-top:10px;border-radius:8px;padding:6px 10px;font-weight:650;background:#edf0f2;color:#4f565d}.clocked-in .avatar,.clocked-in b{background:#e3f5e7;color:#1e6f38}.on-break .avatar,.on-break b{background:#fff0d8;color:#b45309}.break-ready .avatar,.break-ready b{background:#e5f1ff;color:#245b8f}.needs-review .avatar,.needs-review b{background:#ffe4e6;color:#be123c}.clocked-out .avatar,.clocked-out b{background:#eef0f1;color:#56636d}.empty-card{padding:18px;display:grid;gap:5px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#1b1f226b;display:grid;place-items:center;padding:20px}.pin-modal{width:min(420px,92vw);border-radius:8px;background:#fffefa;padding:26px;display:grid;gap:16px;position:relative;box-shadow:0 28px 80px #14181c47}.clock-modal{border:1px solid #67ad7a;background:linear-gradient(180deg,#fbfffc,#ecf8ee)}.break-modal{border:1px solid #ec9856;background:linear-gradient(180deg,#fffefa,#fff0e2)}.pin-modal h2{margin:0}.pin-modal label{display:grid;gap:8px;font-weight:700}.pin-entry{display:grid;gap:12px;font-weight:800}.pin-dots{height:60px;display:flex;align-items:center;justify-content:center;gap:16px;border:1px solid rgba(47,48,48,.16);border-radius:8px;background:#ffffffbd}.pin-dots i{width:18px;height:18px;border:2px solid rgba(47,48,48,.26);border-radius:50%;display:block}.clock-modal .pin-dots i.filled{border-color:#3a9b5a;background:#3a9b5a}.break-modal .pin-dots i.filled{border-color:#f08a3e;background:#f08a3e}.number-pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.number-pad button{min-height:64px;border:1px solid rgba(47,48,48,.12);border-radius:8px;background:#ffffffd1;color:#36433a;font-size:28px;font-weight:800;box-shadow:0 8px 18px #32393e14}.clock-modal .number-pad button{border-color:#3a9b5a3d;color:#1e6f38}.break-modal .number-pad button{border-color:#f08a3e42;color:#b45309}.number-pad button:active{transform:translateY(1px);box-shadow:0 4px 10px #32393e1a}.clock-modal .number-pad button:active{background:#dcf3e2}.break-modal .number-pad button:active{background:#ffe2c7}.number-pad .keypad-command{font-size:15px;font-weight:800;color:#5f6b64}.number-pad svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.pin-modal button[type=submit]{border:0;border-radius:8px;padding:16px;background:#3a9b5a;color:#fff;font-weight:800}.break-modal button[type=submit]{background:#f08a3e}.pin-modal button[type=submit]:disabled{cursor:not-allowed;background:#2f303047}.close-button{position:absolute;top:12px;right:12px;width:38px;height:38px;border:0;border-radius:50%;background:#ffffffbd;font-size:24px}.modal-message{min-height:24px;color:#5d4a43}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);max-width:min(720px,92vw);border-radius:8px;padding:18px 22px;background:#2f3030;color:#fff;font-size:22px;box-shadow:0 20px 60px #14181c3d}.error-screen{min-height:100vh;display:grid;place-items:center;align-content:center;gap:12px;text-align:center}@media(max-width:900px){.clock-shell{padding:12px}.columns{grid-template-columns:1fr}.center-panel{min-height:680px}.topbar{grid-template-columns:1fr;justify-items:center}.date-line,.status-line{justify-content:center}}