body{background:#0d0d0d}.shift-shell{min-height:100vh;background:#0d0d0d}.kiosk-header{display:flex;align-items:center;justify-content:space-between;padding:24px 32px;background:#121212;border-bottom:1px solid #252525}.kiosk-logo{display:flex;align-items:center;gap:14px}.logo-mark{width:56px;height:56px;border-radius:14px;background:#c49a28;color:#111;font-weight:700;font-size:1.75rem;display:flex;align-items:center;justify-content:center}.logo-text-wrap{display:flex;flex-direction:column;line-height:1.1}.logo-name{font-size:1.15rem;font-weight:700;color:#f0ede8}.logo-sub{font-size:.78rem;color:#8a8070;text-transform:uppercase;letter-spacing:.16em;margin-top:.25rem}.clock-wrap{text-align:right}.clock-time{font-size:clamp(3rem,4vw,4.6rem);font-weight:700;line-height:1;color:#c49a28;letter-spacing:.04em;font-variant-numeric:tabular-nums}.clock-date-en{margin-top:.35rem;font-size:1rem;color:#d2cbc2}.clock-date-th{margin-top:.15rem;font-size:1rem;color:#8a8070}.status-banner{margin:0;padding:1rem 1.5rem;min-height:3.5rem;background:#111;border-top:1px solid #1a1a1a;border-bottom:1px solid #1a1a1a;color:#c8c0b7;font-size:1rem}.device-setup{display:flex;align-items:center;justify-content:center;min-height:60vh;padding:24px 30px}.device-setup.hidden{display:none}.device-setup-card{max-width:440px;padding:48px 32px;border-radius:28px;background:#1a1410f0;border:1px solid rgba(212,148,58,.16);box-shadow:0 20px 50px #0000003d;text-align:center}.device-setup-icon{font-size:4.5rem;margin-bottom:24px}.device-setup-title{font-size:1.8rem;font-weight:700;color:#f0ede8;margin:0 0 16px;font-family:Playfair Display,serif}.device-setup-text{font-size:1rem;color:#d2cbc2;margin:0 0 12px;line-height:1.6}.device-setup-subtext{font-size:.9rem;color:#8a8070;margin:0 0 28px;line-height:1.5}.device-register-btn{width:100%;padding:16px 24px;border-radius:14px;background:#c49a28;color:#0a0806;border:0;font:600 1rem Instrument Sans,sans-serif;cursor:pointer;transition:background .2s ease,transform .12s ease}.device-register-btn:hover{background:#ddb75f}.device-register-btn:active{transform:scale(.98)}.device-register-btn:disabled{opacity:.6;cursor:not-allowed}.staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;padding:24px 30px 30px;align-content:start}.staff-card,.empty-card{padding:1.25rem;border-radius:1.4rem;background:#1a1410f0;border:1px solid rgba(212,148,58,.16);box-shadow:0 20px 50px #0000003d}.empty-card{max-width:32rem;color:#f0ede8}.staff-tile{background:#171717;border:1px solid #262626;border-radius:18px;padding:22px 16px 18px;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:236px;position:relative;cursor:pointer;transition:transform .12s ease,border-color .12s ease;color:#f0ede8;font:inherit}.staff-tile:active{transform:scale(.98)}.staff-tile.clocked-in{border-color:#22c55e73}.staff-tile.is-saving{opacity:.75}.tile-status-dot{width:12px;height:12px;border-radius:50%;background:#474747;position:absolute;top:16px;right:16px}.staff-tile.clocked-in .tile-status-dot{background:#22c55e;box-shadow:0 0 12px #22c55e66}.tile-avatar{width:86px;height:86px;border-radius:50%;background:#252525;display:flex;align-items:center;justify-content:center;margin-top:10px;font-size:2rem;font-weight:700;color:#c49a28}.tile-name,.staff-name{margin-top:4px;font-size:1.15rem;font-weight:700;color:#f0ebe3;text-align:center}.tile-role{font-size:.95rem;color:#8f867c;text-align:center}.tile-shift{margin-top:.1rem;font-size:.95rem;color:#6f675f;text-align:center}.tile-badge{display:inline-flex;align-items:center;justify-content:center;margin-top:auto;padding:.36rem .78rem;border-radius:999px;font-size:.8rem;font-weight:600}.tile-badge-in{background:#59b27429;color:#9fe0b4}.tile-badge-idle{background:#c49a281f;color:#ddb75f}.pin-overlay{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:24px;background:#070707d6}.pin-overlay.hidden{display:none}.pin-card{width:min(28rem,100%);border-radius:28px;border:1px solid #2a2a2a;background:#111;padding:22px 22px 26px;box-shadow:0 30px 80px #00000073}.pin-back-btn{border:0;background:transparent;color:#8a8070;font:inherit;margin-bottom:12px}.pin-employee-name{font-size:1.8rem;font-weight:700;color:#f0ede8;text-align:center}.pin-action-label{margin-top:.35rem;text-align:center;color:#8a8070}.pin-dots{display:flex;justify-content:center;gap:16px;margin:22px 0 14px}.pin-dot{width:18px;height:18px;border-radius:50%;border:2px solid #464646}.pin-dot.filled{background:#c49a28;border-color:#c49a28}.pin-error{min-height:1.4rem;text-align:center;color:#f48b8b}.pin-error.hidden{visibility:hidden}.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}.pin-key{border:0;border-radius:18px;padding:18px 0;background:#1d1d1d;color:#f0ede8;font:inherit;font-size:1.45rem;font-weight:600}.pin-key:active{transform:scale(.98)}@media(max-width:720px){.shift-shell{min-height:100vh}.kiosk-header{flex-direction:column;align-items:flex-start;gap:18px;padding:20px 18px}.clock-wrap{text-align:left}.status-banner{padding:.9rem 1rem}.staff-grid{padding:16px;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.staff-tile{min-height:210px;padding:18px 12px 16px}.tile-avatar{width:72px;height:72px;font-size:1.7rem}.pin-card{width:100%;max-width:24rem;padding:18px 18px 22px}}