:root{--bg: #0f1115;--fg: #e8eaed;--muted: #9aa0a6;--card: #171a21;--line: #262b36;--brand: #c8a56a;--brand-fg: #1a1a1a;--danger: #e5484d;--ok: #30a46c}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,sans-serif;-webkit-text-size-adjust:100%}button{font:inherit;cursor:pointer}.container{max-width:560px;margin:0 auto;padding:16px;min-height:100%;display:flex;flex-direction:column}.muted{color:var(--muted)}.brand{color:var(--brand)}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}.btn{border:1px solid var(--line);background:#20242e;color:var(--fg);border-radius:10px;padding:10px 16px}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--brand);color:var(--brand-fg);border-color:var(--brand);font-weight:600}.btn-danger{background:transparent;color:var(--danger);border-color:var(--danger)}.field{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#10131a;color:var(--fg)}.row{display:flex;gap:10px;align-items:center}.spacer{flex:1}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);display:inline-block}.status-connected{background:var(--ok)}.status-error{background:var(--danger)}.status-connecting,.status-reconnecting{background:var(--brand)}