:root{--nx-bg: #0a0a0b;--nx-surface: #121214;--nx-card: #18181b;--nx-border: rgba(30, 144, 255, .22);--nx-gold: #3aa0ff;--nx-gold-dim: rgba(30, 144, 255, .15);--nx-text: #f5f5f4;--nx-muted: #a1a1aa;--nx-danger: #ef4444;--nx-success: #22c55e;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,sans-serif;background:var(--nx-bg);color:var(--nx-text);overscroll-behavior:none}.app-root{min-height:100%;display:flex;flex-direction:column;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}.screen{flex:1;display:flex;flex-direction:column;width:100%;max-width:720px;margin:0 auto;padding:clamp(12px,3vw,20px);gap:clamp(12px,2.5vw,16px)}.screen-full{max-width:none;padding:0}.nx-serif{font-family:Georgia,Times New Roman,serif;letter-spacing:.02em}.status-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px clamp(12px,3vw,20px);font-size:11px;color:var(--nx-muted);border-bottom:1px solid var(--nx-border)}.status-dot{width:8px;height:8px;border-radius:50%}.status-connected{background:var(--nx-success)}.status-reconnecting{background:#f59e0b;animation:pulse 1s infinite}.status-offline,.status-unreachable,.status-session_expired{background:var(--nx-danger)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.card{background:linear-gradient(180deg,#18181bf2,#0a0a0bfa);border:1px solid var(--nx-border);border-radius:16px;padding:clamp(14px,3vw,20px)}.btn{display:flex;align-items:center;justify-content:center;min-height:52px;width:100%;border:none;border-radius:14px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .12s ease,opacity .12s ease}.btn:active{transform:scale(.98)}.btn-gold{background:linear-gradient(135deg,#c9a227,#3aa0ff);color:#0a0a0b}.btn-ghost{background:transparent;border:1px solid var(--nx-border);color:var(--nx-text)}.btn-danger{background:#ef444426;color:#fecaca;border:1px solid rgba(239,68,68,.3)}.input{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid var(--nx-border);background:var(--nx-surface);color:var(--nx-text);font-size:16px}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.pin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,2vw,12px);max-width:360px;margin:0 auto;width:100%}.pin-key{aspect-ratio:1.4;min-height:56px;border-radius:14px;border:1px solid var(--nx-border);background:var(--nx-card);color:var(--nx-text);font-size:clamp(20px,5vw,24px);font-weight:600}.qr-wrap{position:relative;flex:1;min-height:55vh;background:#000;overflow:hidden}#qr-reader{width:100%!important;height:100%!important;border:none!important}#qr-reader video{object-fit:cover!important}.qr-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;align-items:center;justify-content:center}.qr-frame{width:min(72vw,280px);height:min(72vw,280px);border:2px solid var(--nx-gold);border-radius:20px;box-shadow:0 0 0 9999px #00000073}.bottom-bar{position:sticky;bottom:0;padding:12px clamp(12px,3vw,20px) calc(12px + var(--safe-bottom));background:linear-gradient(180deg,transparent,var(--nx-bg) 30%)}.skeleton{background:linear-gradient(90deg,#1f1f23 25%,#2a2a30,#1f1f23 75%);background-size:200% 100%;animation:shimmer 1.2s infinite;border-radius:12px;min-height:48px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.hero-title{font-size:clamp(22px,5vw,28px);color:var(--nx-gold);margin:0}.subtitle{color:var(--nx-muted);font-size:14px;margin:0}.error-icon{font-size:48px;text-align:center}.sticky-footer{margin-top:auto}.app-root{min-height:100dvh;display:flex;flex-direction:column}.screen-shell{min-height:100dvh;display:flex;flex-direction:column;padding:max(var(--safe-top),12px) clamp(12px,4vw,24px) max(var(--safe-bottom),16px)}.screen-header{margin-bottom:clamp(12px,3vw,20px)}.screen-title{font-size:clamp(1.35rem,4.5vw,1.75rem);margin:8px 0 4px}.screen-subtitle{color:var(--nx-muted);font-size:clamp(.875rem,2.5vw,1rem)}.screen-body{flex:1;display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto}.screen-footer{padding-top:12px;border-top:1px solid var(--nx-border)}.kicker{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--nx-gold)}.hint{color:var(--nx-muted);font-size:14px;line-height:1.5}.state-card{border-radius:14px;padding:16px;text-align:center}.state-error{background:#ef44441f;border:1px solid rgba(239,68,68,.25);color:#fecaca}.state-success{background:#22c55e1f;border:1px solid rgba(34,197,94,.25);color:#bbf7d0}.skeleton-stack{display:flex;flex-direction:column;gap:10px}.skeleton-line{height:14px;border-radius:8px;background:linear-gradient(90deg,#1a1a1d 25%,#2a2a30,#1a1a1d 75%);background-size:200% 100%;animation:shimmer 1.2s infinite}.nav-ops{display:flex;flex-wrap:wrap;gap:8px}.btn-sm{min-height:40px;font-size:13px;padding:0 10px;width:auto;flex:1 1 calc(50% - 4px)}.photo-preview{width:100%;max-height:40vh;object-fit:contain;border-radius:12px;border:1px solid var(--nx-border)}.pin-pad{width:100%;max-width:360px;margin:0 auto}.pin-dots{display:flex;justify-content:center;gap:12px;margin-bottom:20px}.pin-dots .pin-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--nx-gold)}.pin-dots .pin-dot.filled{background:var(--nx-gold)}
