:root{--bg-0: #060d16;--bg-1: #0b1726;--panel: #101f33;--ink: #e8f1f8;--ink-dim: #7d93a8;--accent: #2dd4bf;--in: #34d399;--out: #fbbf24;--danger: #f87171}.kiosk-root,.kiosk-root *{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.kiosk-root{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:radial-gradient(120% 90% at 15% 110%,#103246 0%,transparent 55%),linear-gradient(160deg,var(--bg-1) 0%,var(--bg-0) 70%)}.brand{font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:.5rem}.brand-mark{width:1.5em;height:1.5em}.punch{align-items:stretch}.panel-left{flex:1.2;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(1.5rem,4vw,3.5rem)}.clock-time{font-size:clamp(4rem,10vw,7.5rem);font-weight:200;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}.clock-ampm{font-size:.32em;font-weight:400;color:var(--ink-dim);margin-left:.35em}.clock-date{margin-top:.8rem;font-size:clamp(1.1rem,2.4vw,1.7rem);color:var(--ink-dim)}.kiosk-name{color:var(--ink-dim);font-size:1rem;letter-spacing:.08em;text-transform:uppercase}.panel-footer{display:flex;flex-direction:column;gap:.8rem}.net-badge{display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;padding:.55rem .95rem;border-radius:2rem;font-size:.95rem;font-weight:600;color:var(--out);background:#fbbf241a;border:1px solid rgba(251,191,36,.35)}.net-badge.syncing{color:var(--accent);background:#2dd4bf1a;border-color:#2dd4bf59}.net-dot{width:.6rem;height:.6rem;border-radius:50%;background:currentColor;animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}.panel-right{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;padding:clamp(1rem,3vw,2.5rem);background:linear-gradient(180deg,#101f33a6,#101f3359);border-left:1px solid rgba(125,147,168,.15)}.pad-prompt{margin:0;font-size:clamp(1.1rem,2.2vw,1.5rem);color:var(--ink-dim);min-height:1.5em}.pin-dots{display:flex;gap:1.1rem;margin-bottom:.4rem}.pin-dot{width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid var(--ink-dim);transition:background .12s,border-color .12s,transform .12s}.pin-dot.filled{background:var(--accent);border-color:var(--accent);transform:scale(1.15)}.pinpad-grid{display:grid;grid-template-columns:repeat(3,minmax(5.2rem,7.5rem));gap:clamp(.6rem,1.4vh,1rem)}.pad-key{height:clamp(4.2rem,13.5vh,6.2rem);border-radius:1.1rem;border:1px solid rgba(125,147,168,.22);background:#e8f1f80d;color:var(--ink);font-size:clamp(1.7rem,4vh,2.3rem);font-weight:500;cursor:pointer;transition:background 90ms,transform 90ms}.pad-key:active{background:#2dd4bf40;transform:scale(.96)}.pad-key:disabled{opacity:.4}.pad-aux{color:var(--ink-dim);font-size:clamp(1.3rem,3vh,1.7rem)}.pad-error{margin:0;min-height:2.6em;max-width:26rem;text-align:center;font-size:clamp(1rem,2vw,1.25rem);font-weight:600;color:var(--danger);opacity:0;transition:opacity .15s}.pad-error.visible{opacity:1}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-7px)}40%,60%{transform:translate(7px)}}.shake{animation:shake .45s ease both}.confirm{align-items:center;justify-content:center;text-align:center}.confirm-in{background:radial-gradient(100% 100% at 50% 120%,rgba(52,211,153,.35) 0%,transparent 60%),linear-gradient(160deg,var(--bg-1) 0%,var(--bg-0) 70%)}.confirm-out{background:radial-gradient(100% 100% at 50% 120%,rgba(251,191,36,.3) 0%,transparent 60%),linear-gradient(160deg,var(--bg-1) 0%,var(--bg-0) 70%)}.confirm-body{display:flex;flex-direction:column;align-items:center;gap:.8rem;animation:pop-in .24s cubic-bezier(.2,1.4,.4,1) both}@keyframes pop-in{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}.confirm-check{width:clamp(5.5rem,14vh,8rem);height:clamp(5.5rem,14vh,8rem);border-radius:50%;display:grid;place-items:center;font-size:clamp(2.8rem,7vh,4rem);font-weight:700}.confirm-in .confirm-check{background:#34d3992e;color:var(--in);box-shadow:0 0 0 1px #34d39966 inset}.confirm-out .confirm-check{background:#fbbf2426;color:var(--out);box-shadow:0 0 0 1px #fbbf2466 inset}.confirm-title{margin:0;font-size:clamp(2.6rem,8vh,4.5rem);font-weight:800;letter-spacing:-.01em}.confirm-in .confirm-title{color:var(--in)}.confirm-out .confirm-title{color:var(--out)}.confirm-who{margin:0;font-size:clamp(1.4rem,3.6vh,2rem);color:var(--ink)}.confirm-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin-top:1.6rem}.confirm-btn{padding:1rem 1.6rem;border-radius:1rem;border:1px solid rgba(125,147,168,.35);background:#e8f1f812;color:var(--ink);font-size:1.1rem;font-weight:600;cursor:pointer}.confirm-btn:active{background:#e8f1f82e}.confirm-btn.subtle{color:var(--ink-dim)}.confirm-btn.done{background:#2dd4bf33;border-color:#2dd4bf80}.confirm-queued{margin:0;font-size:1.05rem;color:var(--ink-dim)}.confirm-countdown{margin-top:1.2rem;color:var(--ink-dim);font-size:.95rem}.confirm-undone .confirm-title{color:var(--ink-dim)}.setup-card{margin:auto;width:min(34rem,92vw);padding:clamp(1.6rem,4vw,3rem);border-radius:1.4rem;background:var(--panel);border:1px solid rgba(125,147,168,.2);display:flex;flex-direction:column;gap:1rem;text-align:center}.setup-card h1{margin:.4rem 0 0;font-size:1.7rem}.setup-hint{margin:0;color:var(--ink-dim);line-height:1.5}.setup-code{font-size:2.2rem;text-align:center;letter-spacing:.35em;text-transform:uppercase;padding:.8rem;border-radius:.9rem;border:1px solid rgba(125,147,168,.35);background:#060d1699;color:var(--ink);outline:none;font-variant-numeric:tabular-nums}.setup-code:focus{border-color:var(--accent)}.setup-error{margin:0;color:var(--danger);font-weight:600}.setup-submit{padding:1.1rem;font-size:1.2rem;font-weight:700;border-radius:.9rem;border:none;background:var(--accent);color:#042220;cursor:pointer}.setup-submit:disabled{opacity:.45}@media(orientation:portrait){.punch{flex-direction:column}.panel-left{flex:0 0 auto;padding-bottom:.5rem}.panel-right{border-left:none;border-top:1px solid rgba(125,147,168,.15)}}
