:root{--bg:#0B1220;--panel:#111A2E;--line:#22304D;--line2:#2F4670;--ink:#E5ECF5;--muted:#8EA3C2;--go:#34D399;--warn:#FBBF24;--bad:#F87171;--acc:#7DD3FC}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;font-size:15px}
a{color:var(--acc)}
button{font:inherit;cursor:pointer}
.muted{color:var(--muted)}.small{font-size:13px}
.error{color:var(--bad);font-weight:600}
.center{max-width:420px;margin:0 auto;padding:72px 24px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.center.wide{max-width:720px;text-align:left;align-items:stretch}
.center h1{margin:0;font-size:26px}
.stack{display:flex;flex-direction:column;gap:14px;width:100%;text-align:left}
.stack label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:13px;font-weight:600}
.stack input{height:50px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);font:inherit;font-size:18px;padding:0 14px}
.go{height:52px;border-radius:12px;border:0;background:var(--go);color:#062016;font-size:17px;font-weight:800}
.qr{background:#fff;padding:12px;border-radius:12px}
code{background:var(--panel);padding:2px 6px;border-radius:6px;word-break:break-all}
.app{display:flex;flex-direction:column;height:100%}
.bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.bar .brand{display:flex;align-items:center;gap:8px;font-weight:800}.bar .brand svg{width:26px;height:26px}
.bar form{margin:0}
.grow{flex:1}
.ghost,.light{height:38px;padding:0 14px;border-radius:10px;font-weight:600}
.ghost{border:1px solid #3B4B6B;background:transparent;color:var(--ink)}
.light{border:0;background:var(--ink);color:var(--bg);font-weight:700}
.picker{position:relative}
.picker summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:#16233D;cursor:pointer;font-weight:600}
.picker summary::-webkit-details-marker{display:none}
.where .dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.state-ready .dot{background:var(--go)}.state-switching .dot{background:var(--warn)}.state-error .dot{background:var(--bad)}
.where .ip{color:var(--muted);font-weight:400}
.menu{position:absolute;z-index:20;top:46px;left:0;width:min(420px,92vw);background:var(--panel);border:1px solid var(--line2);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.45);padding:12px;display:flex;flex-direction:column;gap:4px}
.mlbl{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--muted);padding:4px 6px}
.menu button{width:100%;display:flex;align-items:center;gap:8px;min-height:46px;padding:0 12px;border-radius:10px;border:0;background:transparent;color:var(--ink);text-align:left}
.menu button:hover,.menu button.on{background:#1E3A5F}
.menu .code{width:34px;font-weight:800;color:var(--acc)}
.screen{flex:1;width:100%;border:0;background:#000}
.wait{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;max-width:560px;margin:0 auto}
.wait h1{margin:0;font-size:26px}
.progress{width:100%;height:10px;border-radius:999px;background:#1C2A45;overflow:hidden}
.progress span{display:block;height:100%;width:40%;background:var(--warn);animation:slide 1.6s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
@media (max-width:640px){.hide-phone{display:none}.bar{gap:8px}}