:root{--color-cyan:#22d3ee;--color-cyan-light:#6ee7f7;--color-indigo:#818cf8;--color-indigo-deep:#6366f1;--gradient-brand:linear-gradient(135deg, var(--color-cyan) 0%, var(--color-indigo) 100%);--gradient-brand-h:linear-gradient(90deg, var(--color-cyan) 0%, var(--color-indigo) 100%);--bg:#f8fafc;--bg-alt:#f1f5f9;--card-bg:#fff;--border:#e2e8f0;--border-strong:#cbd5e1;--text:#0f172a;--text-secondary:#475569;--text-subtle:#94a3b8;--green:var(--color-cyan);--green-light:#22d3ee1f;--blue:var(--color-indigo-deep);--blue-light:#6366f11f;--grey-light:#e2e8f0;--red:#ef4444;--red-light:#ef44441f;--warning:#f59e0b;--warning-light:#f59e0b1f;--success:#10b981;--shadow-sm:0 1px 3px #00000014;--shadow-md:0 4px 16px #0000001a;--shadow-glow:0 0 24px #22d3ee40;--radius-sm:8px;--radius:14px;--radius-lg:20px;--radius-full:9999px;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;--font-mono:"JetBrains Mono", "SF Mono", "Fira Code", "Courier New", monospace;--transition-fast:.15s ease;--transition-base:.2s ease}@media (prefers-color-scheme:dark){:root{--bg:#0b1120;--bg-alt:#111827;--card-bg:#1a2540;--border:#1e3a5f;--border-strong:#2c4a75;--text:#f1f5f9;--text-secondary:#94a3b8;--text-subtle:#64748b;--grey-light:#1e3a5f;--shadow-sm:0 1px 3px #0006;--shadow-md:0 4px 16px #00000080}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--transition-base), color var(--transition-base);line-height:1.5}button:focus,a:focus{outline:none}button:focus-visible,a:focus-visible{outline:2px solid var(--color-cyan);outline-offset:2px;border-radius:var(--radius-sm)}.gradient-text{background:var(--gradient-brand-h);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.app-content{flex-direction:column;height:calc(100dvh - 64px);padding:16px 16px 0;display:flex;overflow:hidden}.app-header{align-items:center;gap:10px;padding:6px 2px 14px;display:flex}.app-header img{filter:drop-shadow(0 0 16px #22d3ee40);width:32px;height:32px}.app-header__title{letter-spacing:-.03em;color:var(--text);font-size:1.05rem;font-weight:800}.app-header__title em{background:var(--gradient-brand-h);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-style:normal}.app-header__subtitle{text-transform:uppercase;letter-spacing:.1em;color:var(--text-subtle);margin-left:auto;font-size:.7rem;font-weight:600}.tab-bar{background:var(--card-bg);border-top:1px solid var(--border);padding:8px 0 env(safe-area-inset-bottom,10px);z-index:100;-webkit-backdrop-filter:blur(12px);display:flex;position:fixed;bottom:0;left:0;right:0}.tab-bar button{color:var(--text-secondary);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:3px;padding:6px 0;font-family:inherit;font-size:11px;font-weight:500;display:flex}.tab-bar button.active{color:var(--text);font-weight:700}.tab-bar button .tab-icon{transition:transform var(--transition-base);font-size:22px}.tab-bar button.active .tab-icon{filter:drop-shadow(0 0 8px #22d3ee66);transform:scale(1.08)}.card{background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:border-color var(--transition-base), box-shadow var(--transition-base);margin-bottom:12px;padding:16px}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px 22px;font-family:inherit;font-size:15px;font-weight:600;display:inline-flex}.btn:active{transform:scale(.98)}.btn-primary{background:var(--gradient-brand-h);color:#0b1120;box-shadow:0 4px 14px #22d3ee4d}.btn-primary:active{opacity:.92}.btn-outline{border:1.5px solid var(--border-strong);color:var(--text);background:0 0}.btn-outline:active{border-color:var(--color-cyan);color:var(--color-cyan)}.btn-small{width:auto;padding:10px 16px;font-size:13px}.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.bubble{word-break:break-word;border-radius:16px;max-width:75%;margin-bottom:6px;padding:10px 14px;font-size:14px;line-height:1.4}.bubble-sent{background:var(--gradient-brand-h);color:#0b1120;border-bottom-right-radius:4px;align-self:flex-end;font-weight:600}.bubble-received{background:var(--bg-alt);color:var(--text);border:1px solid var(--border);border-bottom-left-radius:4px;align-self:flex-start}.bubble-time{opacity:.65;margin-top:2px;font-size:10px}.message-log{flex-direction:column;gap:4px;max-height:260px;padding:8px 0;display:flex;overflow-y:auto}.step-row{justify-content:center;gap:8px;margin-bottom:20px;display:flex}.step-item{flex-direction:column;align-items:center;min-width:38px;display:flex}.step-dot{background:var(--border);border:2px solid var(--border);width:12px;height:12px;transition:all var(--transition-base);border-radius:50%}.step-dot.completed{background:var(--gradient-brand);border-color:#0000;box-shadow:0 0 8px #22d3ee66}.step-dot.current{border-color:var(--color-cyan);background:0 0;animation:1.6s ease-in-out infinite pulse-dot;box-shadow:0 0 0 3px #22d3ee26}@keyframes pulse-dot{0%,to{box-shadow:0 0 0 3px #22d3ee26}50%{box-shadow:0 0 0 5px #22d3ee40}}.step-label{text-align:center;color:var(--text-secondary);margin-top:3px;font-size:9px;font-weight:500}.status-chip{border-radius:var(--radius-full);color:var(--color-cyan);background:#22d3ee1a;border:1px solid #22d3ee4d;align-items:center;gap:5px;padding:4px 11px;font-size:12px;font-weight:600;display:inline-flex}.status-chip.blue{color:var(--color-indigo);background:#6366f11a;border-color:#6366f14d}.status-chip.red{background:var(--red-light);color:var(--red);border-color:#ef44444d}.status-chip:before{content:"";background:currentColor;border-radius:50%;width:6px;height:6px;display:block}.input{border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--card-bg);width:100%;color:var(--text);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;padding:12px 14px;font-family:inherit;font-size:15px}.input::placeholder{color:var(--text-subtle)}.input:focus{border-color:var(--color-cyan);box-shadow:0 0 0 3px #22d3ee26}.conn-bar{border-radius:var(--radius-sm);border:1px solid #0000;align-items:center;gap:8px;margin-bottom:12px;padding:10px 14px;font-size:13px;font-weight:600;display:flex}.conn-bar.connected{color:var(--color-cyan);background:#22d3ee1a;border-color:#22d3ee4d}.conn-bar.disconnected{background:var(--red-light);color:var(--red);border-color:#ef44444d}.conn-bar:before{content:"";background:currentColor;border-radius:50%;width:8px;height:8px;display:block;box-shadow:0 0 0 2px #fff9}.conn-bar.connected:before{animation:1.6s ease-in-out infinite pulse-dot}.telem-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.telem-badge{text-align:center;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-sm);transition:border-color var(--transition-fast);padding:12px 6px}.telem-badge .label{color:var(--text-subtle);text-transform:uppercase;letter-spacing:.08em;font-size:9px;font-weight:600}.telem-badge .value{color:var(--text);letter-spacing:-.02em;margin-top:2px;font-size:20px;font-weight:800}.telem-badge:first-child .value{background:var(--gradient-brand-h);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.btn-indicator{border-radius:var(--radius-sm);background:var(--bg-alt);color:var(--text-secondary);border:1px solid var(--border);transition:all var(--transition-fast);padding:6px 14px;font-size:13px;font-weight:600;display:inline-flex}.btn-indicator.flash{color:var(--color-cyan);border-color:var(--color-cyan);background:#22d3ee1f;box-shadow:0 0 12px #22d3ee4d}.modal-overlay{-webkit-backdrop-filter:blur(8px);z-index:200;background:#0b1120e6;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-close{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);background:#ffffff1f;border:1px solid #fff3;border-radius:50%;width:44px;height:44px;font-size:24px;position:absolute;top:16px;right:16px}.spinner{border:3px solid var(--border);border-top-color:var(--color-cyan);border-right-color:var(--color-indigo);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.text-center{text-align:center}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mb-12{margin-bottom:12px}.gap-8{gap:8px}.flex-row{align-items:center;display:flex}.empty-state{text-align:center;color:var(--text-secondary);padding:48px 16px;font-size:15px}.empty-state:before{content:"";opacity:.25;filter:grayscale(.4);background-image:url(/qr-iot-logo.svg);background-repeat:no-repeat;background-size:contain;width:64px;height:64px;margin:0 auto 16px;display:block}