:root{--bg: #0f1720;--surface: #1a2431;--surface-2: #243247;--text: #f3f6fa;--muted: #9fb0c3;--brand: #3b82f6;--success: #12805c;--reward: #7c3aed;--warn: #b45309;--error: #b42318;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:18px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-text-size-adjust:100%;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}#app{height:100%}.screen{height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.btn{min-height:4rem;padding:.75rem 1.5rem;border:0;border-radius:1rem;font:inherit;font-size:1.25rem;font-weight:700;color:var(--text);cursor:pointer}.btn:disabled{opacity:.6;cursor:default}.btn:focus-visible,.link:focus-visible,.code-input:focus-visible{outline:3px solid #fff;outline-offset:2px}.btn-primary{background:var(--brand)}.btn-secondary{background:#ffffff29}.link{background:none;border:0;color:var(--muted);font:inherit;font-size:.95rem;text-decoration:underline;padding:.75rem;cursor:pointer}.pair{align-items:center;justify-content:center;gap:.5rem;padding:1.5rem;text-align:center}.brandmark{width:4.5rem;height:4.5rem;border-radius:1.2rem;background:var(--brand);display:grid;place-items:center;font-size:2.4rem;font-weight:700}.app-name{margin:0 0 .75rem;color:var(--muted);font-weight:600}.notice{max-width:28rem;margin:0 0 .75rem;padding:.75rem 1rem;border-radius:.75rem;background:#b4530940;border:1px solid var(--warn)}.card{width:100%;max-width:28rem;background:var(--surface);border-radius:1.25rem;padding:1.5rem;text-align:left;display:flex;flex-direction:column;gap:.75rem}.card h1{margin:0;font-size:1.6rem;line-height:1.2}.intro{margin:0;color:var(--muted)}.field-label{font-weight:600}.code-input{width:100%;min-height:4.5rem;border-radius:1rem;border:2px solid var(--surface-2);background:var(--bg);color:var(--text);font:700 2rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-align:center;text-transform:uppercase;user-select:text;-webkit-user-select:text}.form-error{min-height:1.5rem;margin:0;color:#ffb4a8;font-weight:600}.scan-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.25rem .75rem;min-height:3.25rem}.biz{font-weight:700;font-size:1.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.viewport{position:relative;flex:1;min-height:0;overflow:hidden;background:#000}.video{width:100%;height:100%;object-fit:cover;display:block}.frame{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:min(70%,22rem);aspect-ratio:1;border:4px solid rgb(255 255 255 / .85);border-radius:1.5rem;box-shadow:0 0 0 100vmax #00000059;pointer-events:none}.hint{position:absolute;left:0;right:0;bottom:0;margin:0;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));text-align:center;font-weight:600;background:linear-gradient(transparent,#000000bf)}.hint-error{background:#b42318eb;display:flex;flex-direction:column;align-items:center;gap:.75rem}.panel{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;justify-content:center;padding:env(safe-area-inset-top) 1.25rem env(safe-area-inset-bottom);overflow:hidden}.panel[hidden]{display:none}.tone-busy{background:#0f1720eb}.tone-success{background:var(--success)}.tone-reward{background:var(--reward)}.tone-warn{background:var(--warn)}.tone-error{background:var(--error)}.panel-body{max-width:34rem;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center}.panel-icon{width:6rem;height:6rem;border-radius:50%;background:#fff3;display:grid;place-items:center;font-size:3.5rem;font-weight:700}.panel h2{margin:0;font-size:2.2rem;line-height:1.15}.big-count{margin:0;font-size:3rem;font-weight:800}.detail{margin:0;font-size:1.25rem;max-width:28rem}.bar{width:100%;max-width:24rem;height:1rem;border-radius:1rem;background:#0000004d;overflow:hidden}.bar-fill{height:100%;background:#fff;border-radius:1rem}.actions{width:100%;display:flex;flex-direction:column;gap:.75rem;margin-top:.75rem}.tone-reward .btn-primary{background:#fff;color:#4c1d95}.countdown{position:absolute;left:0;bottom:0;height:.4rem;width:100%;background:#ffffffbf;transform-origin:left;animation:countdown linear forwards}@keyframes countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.spinner{width:4rem;height:4rem;border-radius:50%;border:6px solid rgb(255 255 255 / .25);border-top-color:#fff;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.spinner{animation-duration:2.4s}}
