*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:#0a0a0f;color:#e0e0e0;min-height:100vh;display:flex;place-items:center}#root{width:100%;max-width:600px;margin:0 auto;padding:2rem 1.5rem}.app{width:100%}.header{text-align:center;margin-bottom:2rem}.header h1{font-size:1.8rem;font-weight:700;color:#fff;margin-bottom:.25rem}.header p{color:#666;font-size:.9rem}.status{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .8rem;border-radius:20px;font-size:.8rem;margin-top:.75rem}.status.connected{background:#22c55e1a;color:#22c55e;border:1px solid rgba(34,197,94,.2)}.status.disconnected{background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.2)}.status-dot{width:8px;height:8px;border-radius:50%;background:currentColor}.key-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem}.key-card{background:#141420;border:1px solid #1e1e30;border-radius:12px;padding:1.2rem;transition:all .2s;cursor:pointer}.key-card:hover{border-color:#6366f1;background:#18182a}.key-card.active{border-color:#6366f1;box-shadow:0 0 20px #6366f126}.key-number{font-size:.7rem;color:#555;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.key-action{font-size:.95rem;font-weight:600;color:#fff;margin-bottom:.25rem}.key-shortcut{font-size:.75rem;color:#6366f1;font-family:SF Mono,Fira Code,monospace}.editor{background:#141420;border:1px solid #1e1e30;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem}.editor h3{font-size:1rem;margin-bottom:1rem;color:#fff}.field{margin-bottom:1rem}.field label{display:block;font-size:.8rem;color:#888;margin-bottom:.4rem}.field select,.field input{width:100%;padding:.6rem .8rem;background:#0a0a0f;border:1px solid #1e1e30;border-radius:8px;color:#e0e0e0;font-size:.9rem;outline:none;transition:border-color .2s}.field select:focus,.field input:focus{border-color:#6366f1}.field select option{background:#0a0a0f}.btn-row{display:flex;gap:.75rem}.btn{flex:1;padding:.7rem;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background:#6366f1;color:#fff}.btn-primary:hover{background:#5558e6}.btn-secondary{background:#1e1e30;color:#e0e0e0}.btn-secondary:hover{background:#2a2a40}.mode-toggle{display:flex;background:#141420;border:1px solid #1e1e30;border-radius:10px;padding:.25rem;margin-bottom:1.5rem}.mode-btn{flex:1;padding:.5rem;border:none;border-radius:8px;background:transparent;color:#666;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s}.mode-btn.active{background:#6366f1;color:#fff}.tab-bar{display:flex;background:#141420;border:1px solid #1e1e30;border-radius:10px;padding:.25rem;margin-bottom:1.5rem}.tab-btn{flex:1;padding:.6rem;border:none;border-radius:8px;background:transparent;color:#666;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.tab-btn.active{background:#6366f1;color:#fff}.tab-btn:hover:not(.active){color:#aaa}.status.waiting{background:#eab3081a;color:#eab308;border:1px solid rgba(234,179,8,.2)}.wifi-setup{display:flex;flex-direction:column;gap:1rem}.wifi-note{color:#888;font-size:.85rem;margin-bottom:1rem}.wifi-steps{display:flex;flex-direction:column;gap:.75rem}.wifi-step{display:flex;gap:.8rem;align-items:flex-start}.wifi-step-num{flex-shrink:0;width:24px;height:24px;background:#6366f1;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;margin-top:2px}.wifi-step strong{display:block;font-size:.9rem;color:#fff;margin-bottom:.15rem}.wifi-step p{font-size:.8rem;color:#888;line-height:1.4}.wifi-step code{background:#6366f126;color:#a5b4fc;padding:.1rem .4rem;border-radius:4px;font-size:.8rem}.wifi-step a{color:#6366f1;text-decoration:none}.wifi-step a:hover{text-decoration:underline}.wifi-network-item{display:flex;align-items:center;justify-content:space-between;padding:.7rem .8rem;background:#0a0a0f;border:1px solid #1e1e30;border-radius:8px;cursor:pointer;transition:all .15s}.wifi-network-item:hover{border-color:#6366f1}.wifi-network-item.selected{border-color:#6366f1;background:#6366f114}.wifi-network-info{display:flex;align-items:center;gap:.5rem}.wifi-network-ssid{color:#e0e0e0;font-size:.9rem;font-weight:500}.wifi-network-lock{font-size:.7rem}.wifi-network-signal{color:#6366f1;font-family:SF Mono,Fira Code,monospace;font-size:.7rem;letter-spacing:1px}.wifi-status-bar{padding:.7rem 1rem;border-radius:8px;font-size:.85rem;font-weight:500;background:#6366f11a;color:#a5b4fc;border:1px solid rgba(99,102,241,.2)}.wifi-status-bar.success{background:#22c55e1a;color:#22c55e;border-color:#22c55e33}.wifi-status-bar.error{background:#ef44441a;color:#ef4444;border-color:#ef444433}.press-log{max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:.3rem}.press-entry{display:flex;align-items:center;gap:.75rem;padding:.4rem .6rem;background:#0a0a0f;border-radius:6px;font-size:.8rem}.press-key{color:#6366f1;font-weight:600;min-width:45px}.press-action{color:#e0e0e0;flex:1}.press-time{color:#555;font-family:SF Mono,Fira Code,monospace;font-size:.7rem}