:root{--sat: env(safe-area-inset-top, 0px);--sab: env(safe-area-inset-bottom, 0px);--sal: env(safe-area-inset-left, 0px);--sar: env(safe-area-inset-right, 0px);--bg-main: #000000;--bg-surface: #111116;--bg-surface-elevated: #181820;--bg-surface-highlight: #22222d;--bg-surface-inset: #09090d;--border-subtle: rgba(255, 255, 255, .08);--border-medium: rgba(255, 255, 255, .14);--border-strong: rgba(255, 255, 255, .24);--text-main: #ffffff;--text-muted: #8e8e98;--text-dim: #545460;--accent-amber: #f59e0b;--accent-amber-subtle: rgba(245, 158, 11, .14);--accent-emerald: #30d158;--accent-emerald-subtle: rgba(48, 209, 88, .14);--accent-rose: #ff453a;--accent-rose-subtle: rgba(255, 69, 58, .14);--accent-cyan: #38bdf8;--accent-blue: #0ea5e9;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-full: 9999px;--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif;--shadow-card: 0 4px 20px rgba(0, 0, 0, .6);--shadow-pressed: inset 0 3px 8px rgba(0, 0, 0, .9)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{background-color:var(--bg-main);color:var(--text-main);font-family:var(--font-sans);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{display:flex;flex-direction:column;flex:1;width:100%;max-width:500px;margin:0 auto;position:relative;background-color:var(--bg-main)}.glass-panel,.surface-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);position:relative}.app-header{display:flex;align-items:center;justify-content:space-between;padding-top:calc(var(--sat) + 14px);padding-bottom:14px;padding-left:calc(var(--sal) + 18px);padding-right:calc(var(--sar) + 18px);background:#000;border-bottom:1px solid var(--border-subtle);position:sticky;top:0;z-index:100}.brand-wrap{display:flex;align-items:center;gap:12px}.brand-icon{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--bg-surface-elevated);padding:3px;border:1px solid var(--border-subtle)}.brand-name{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;color:#fff}.btn-logout{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:6px 14px;border-radius:var(--radius-full);background:var(--bg-surface-elevated);color:var(--text-muted);border:1px solid var(--border-subtle);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s ease}.btn-logout:active{background:var(--bg-surface-highlight);color:#fff;transform:scale(.96)}.nav-bar{display:flex;justify-content:space-around;align-items:center;padding-top:8px;padding-bottom:calc(var(--sab) + 10px);padding-left:calc(var(--sal) + 16px);padding-right:calc(var(--sar) + 16px);background:#0a0a0e;border-top:1px solid var(--border-subtle);position:fixed;bottom:0;left:0;right:0;max-width:500px;margin:0 auto;z-index:100}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text-dim);text-decoration:none;font-size:.72rem;font-weight:500;padding:6px 14px;border-radius:var(--radius-md);transition:all .15s ease;background:transparent;border:none;cursor:pointer}.nav-item.active{color:#fff;background:#ffffff14}.nav-item svg{width:22px;height:22px;stroke:currentColor}.page-container{flex:1;padding-top:20px;padding-left:calc(var(--sal) + 18px);padding-right:calc(var(--sar) + 18px);padding-bottom:calc(var(--sab) + 96px);display:flex;flex-direction:column}.gate-button-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:28px 0 20px;position:relative}.hold-button-container{position:relative;width:220px;height:220px;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none}.progress-ring{position:absolute;top:0;left:0;width:220px;height:220px;transform:rotate(-90deg);pointer-events:none}.progress-ring-bg{fill:transparent;stroke:#ffffff0f;stroke-width:4}.progress-ring-fill{fill:transparent;stroke:var(--accent-amber);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .04s linear}.progress-ring-fill.opened{stroke:var(--accent-emerald)}.progress-ring-fill.error{stroke:var(--accent-rose)}.hold-btn-core{width:184px;height:184px;border-radius:var(--radius-full);background:linear-gradient(180deg,#1b1b22,#111116);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 28px #000c,inset 0 1px 1px #ffffff29,inset 0 -2px 4px #0009;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:transform .12s cubic-bezier(.2,0,0,1),box-shadow .12s ease;outline:none;position:relative;z-index:2}.hold-btn-core:active,.hold-btn-core.holding{transform:scale(.96) translateY(3px);background:linear-gradient(180deg,#131318,#0c0c10);border-color:#f59e0b66;box-shadow:0 2px 8px #000000e6,inset 0 4px 14px #000000e6}.hold-btn-core.opening{border-color:var(--accent-amber);animation:pulse-border 1.5s infinite}.hold-btn-core.opened{border-color:var(--accent-emerald);box-shadow:0 8px 24px #30d15833,inset 0 1px 1px #fff3}.hold-btn-core.disabled{opacity:.35;cursor:not-allowed;filter:grayscale(1);box-shadow:none;border-color:var(--border-subtle)}.btn-icon-wrap{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .15s ease}.btn-label{font-size:1.15rem;font-weight:800;letter-spacing:.08em;color:#fff;text-transform:uppercase}.btn-hint{font-size:.7rem;font-weight:600;color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase}.status-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--radius-full);font-size:.8rem;font-weight:600;background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-main)}.dot{width:7px;height:7px;border-radius:50%}.dot.online{background:var(--accent-emerald);box-shadow:0 0 6px var(--accent-emerald)}.dot.offline{background:var(--accent-rose);box-shadow:0 0 6px var(--accent-rose)}.form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}.form-label{font-size:.82rem;font-weight:600;color:var(--text-muted)}.form-input{width:100%;padding:13px 16px;border-radius:var(--radius-md);background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-main);font-size:.95rem;transition:all .15s ease;outline:none}.form-input:focus{border-color:var(--border-strong);background:var(--bg-surface-highlight)}.btn-primary{width:100%;padding:14px 20px;border-radius:var(--radius-md);background:#fff;color:#000;font-weight:700;font-size:.95rem;border:none;cursor:pointer;transition:transform .12s ease,opacity .12s ease}.btn-primary:active{transform:scale(.98);opacity:.9}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-secondary{padding:9px 16px;border-radius:var(--radius-md);background:var(--bg-surface-elevated);color:var(--text-main);border:1px solid var(--border-subtle);font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s ease,transform .1s ease}.btn-secondary:active{transform:scale(.97);background:var(--bg-surface-highlight)}.banner{padding:12px 16px;border-radius:var(--radius-md);font-size:.85rem;margin-bottom:16px;display:flex;align-items:center;gap:10px}.banner.error{background:var(--accent-rose-subtle);border:1px solid rgba(255,69,58,.3);color:#ff857e}.banner.success{background:var(--accent-emerald-subtle);border:1px solid rgba(48,209,88,.3);color:#72e88f}.banner.warning{background:var(--accent-amber-subtle);border:1px solid rgba(245,158,11,.3);color:#fbbf24}@keyframes pulse-border{0%,to{border-color:#f59e0b4d}50%{border-color:#f59e0be6}}