:root{color-scheme:dark;--bg:#0b0b0b;--panel:#171717;--panel-2:#202020;--line:#333;--text:#f7f7f4;--muted:#aaa;--red:#e32824;--green:#39b66a;--amber:#efad35;--radius:20px;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 0,#24100f 0,transparent 32rem),var(--bg);color:var(--text);font-size:16px}
button,a{font:inherit}
button{color:inherit}
.hidden{display:none!important}
.staff-top{height:76px;padding:0 max(24px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #282828;background:rgba(11,11,11,.9);backdrop-filter:blur(18px);position:sticky;top:0;z-index:10}
.staff-brand{display:flex;align-items:center;gap:14px;font-weight:750;letter-spacing:-.02em}
.staff-brand img{width:42px;height:42px;object-fit:contain}
.staff-now{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:650}
.staff-shell{width:min(1120px,100%);margin:0 auto;padding:clamp(22px,4vw,48px)}
.staff-panel{background:linear-gradient(145deg,#191919,#121212);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,4vw,42px);box-shadow:0 22px 60px rgba(0,0,0,.26)}
.staff-centred{text-align:center;max-width:620px;margin:5vh auto}
.staff-centred h1{margin:18px 0 8px;font-size:clamp(28px,5vw,44px);letter-spacing:-.045em}
.staff-centred p{margin:0 auto 24px;max-width:490px;color:var(--muted);line-height:1.55}
.staff-spinner{width:46px;height:46px;margin:auto;border-radius:50%;border:4px solid #333;border-top-color:var(--red);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.staff-status-icon,.staff-success-icon{width:70px;height:70px;margin:auto;border-radius:22px;display:grid;place-items:center;font-size:38px;font-weight:850;background:#3a1d1b;color:#ff8c85}
.staff-success-icon{background:#15351f;color:#6ee39a}
.staff-link-button,.staff-primary-button{display:inline-flex;min-height:56px;align-items:center;justify-content:center;padding:0 24px;border:0;border-radius:14px;background:var(--red);color:#fff;text-decoration:none;font-weight:780;cursor:pointer}
.staff-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:30px}
.staff-heading h1{font-size:clamp(32px,5vw,54px);margin:3px 0 0;letter-spacing:-.055em}
.staff-kicker{text-transform:uppercase;letter-spacing:.13em;color:#ff6a62;font-size:13px;font-weight:800}
.staff-quiet-button,.staff-back{border:1px solid var(--line);background:#181818;border-radius:13px;min-height:48px;padding:0 18px;cursor:pointer;font-weight:700}
.staff-back{margin-bottom:18px}
.staff-group h2,.staff-all summary{font-size:15px;color:var(--muted);margin:0 0 14px;font-weight:750;text-transform:uppercase;letter-spacing:.08em}
.staff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.staff-person{min-height:112px;padding:18px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,#1c1c1c,#141414);display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;transition:transform .12s,border-color .12s,background .12s}
.staff-person:active{transform:scale(.98)}
.staff-person:hover{border-color:#555;background:#202020}
.staff-person strong{font-size:19px;display:block}
.staff-person small{display:block;color:var(--muted);margin-top:5px;line-height:1.3}
.staff-avatar{width:48px;height:48px;flex:0 0 auto;border-radius:15px;background:#3b1d1b;color:#ff8c85;display:grid;place-items:center;font-weight:850;font-size:19px}
.staff-avatar.large{width:72px;height:72px;border-radius:23px;font-size:27px;margin:auto}
.staff-all{margin-top:30px;border-top:1px solid #272727;padding-top:22px}
.staff-all summary{cursor:pointer;list-style:none;margin-bottom:18px}
.staff-pin-panel{max-width:590px;margin:auto}
.staff-pin-panel h1{font-size:35px;margin:14px 0 5px}
.staff-pin-dots{display:flex;justify-content:center;gap:15px;margin:22px 0}
.staff-pin-dots span{width:17px;height:17px;border-radius:50%;border:2px solid #666;background:transparent}
.staff-pin-dots span.filled{background:var(--text);border-color:var(--text)}
.staff-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:390px;margin:auto}
.staff-keypad button{height:68px;border-radius:16px;border:1px solid #3a3a3a;background:#242424;font-size:24px;font-weight:760;cursor:pointer}
.staff-keypad button:active{background:#3a3a3a;transform:scale(.97)}
.staff-keypad button[data-key="clear"]{font-size:15px;color:var(--muted)}
.staff-inline-status{min-height:25px;margin-top:16px;color:var(--muted)}
.staff-detail-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:18px}
.staff-shift-card h2,.staff-detail-grid article>h2{margin:22px 0 8px;font-size:15px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.staff-state-pill{display:inline-flex;padding:8px 12px;border-radius:999px;background:#282828;font-size:14px;font-weight:800}
.staff-state-pill.working{background:#15351f;color:#79e7a0}
.staff-state-pill.on_break{background:#3c2c12;color:#ffc361}
.staff-shift-time{font-size:clamp(30px,5vw,49px);font-weight:820;letter-spacing:-.045em}
.staff-worked{color:var(--muted);margin-top:8px}
.staff-actions{display:grid;gap:12px;margin-top:30px}
.staff-action{min-height:70px;border:0;border-radius:17px;background:var(--red);font-size:21px;font-weight:820;cursor:pointer}
.staff-action.secondary{background:#292929;border:1px solid #414141}
.staff-action:disabled{opacity:.58;cursor:wait}
.staff-upcoming{display:grid;gap:10px}
.staff-upcoming-row{padding:15px 0;border-bottom:1px solid #2d2d2d;display:flex;justify-content:space-between;gap:16px}
.staff-upcoming-row:last-child{border-bottom:0}
.staff-upcoming-row span{color:var(--muted)}
.staff-alert{padding:14px 18px;border-radius:13px;margin-bottom:18px;line-height:1.4}
.staff-alert-error{background:#3a1d1b;border:1px solid #71312d;color:#ffb0aa}
@media(max-width:820px){.staff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.staff-detail-grid{grid-template-columns:1fr}}
@media(max-width:540px){.staff-top{height:66px;padding:0 16px}.staff-brand img{width:36px;height:36px}.staff-brand span{font-size:15px}.staff-now{font-size:14px}.staff-shell{padding:20px 14px}.staff-grid{grid-template-columns:1fr}.staff-person{min-height:88px}.staff-heading{align-items:center}.staff-heading h1{font-size:36px}.staff-panel{border-radius:17px;padding:22px}.staff-keypad button{height:62px}.staff-shift-time{font-size:34px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}