:root{--bg: #0f1220;--panel: #1a1f38;--panel-2: #232a4a;--text: #eef1ff;--muted: #9aa3c7;--accent: #6c8cff;--accent-2: #ffcf5c;--danger: #ff6b6b;--good: #4fd08a;--die: #f6f7ff;--die-pip: #1a1f38;--radius: 16px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}.app{max-width:560px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));min-height:100dvh}h1,h2,h3{margin:0 0 12px}h1{font-size:1.6rem}.panel{background:var(--panel);border-radius:var(--radius);padding:18px;margin-bottom:14px}button{font:inherit;border:0;border-radius:12px;padding:14px 18px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer;touch-action:manipulation;transition:transform .05s ease,filter .15s ease}button:active{transform:scale(.97)}button:disabled{opacity:.45;cursor:default}button.secondary{background:var(--panel-2);color:var(--text)}button.ghost{background:transparent;color:var(--accent);padding:8px}button.danger{background:var(--danger)}button.wide{width:100%}input,select{font:inherit;width:100%;padding:14px;border-radius:12px;border:1px solid var(--panel-2);background:var(--panel-2);color:var(--text);margin-bottom:12px}input.code{text-transform:uppercase;letter-spacing:.35em;text-align:center;font-size:1.6rem;font-weight:700}label{display:block;color:var(--muted);font-size:.85rem;margin-bottom:6px}.row{display:flex;gap:10px;align-items:center}.row.wrap{flex-wrap:wrap}.spread{justify-content:space-between}.muted{color:var(--muted)}.center{text-align:center}.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;background:var(--panel-2);color:var(--muted)}.pill.host{background:var(--accent);color:#fff}.pill.idle{background:var(--accent-2);color:#3a2f00}.pill.out{background:var(--danger);color:#fff}.error{background:#3a1d24;color:var(--danger);padding:10px 14px;border-radius:12px;margin-bottom:12px;font-size:.9rem}.banner{background:linear-gradient(90deg,var(--accent-2),#ffb347);color:#3a2f00;font-weight:700;padding:12px 16px;border-radius:12px;margin-bottom:14px;text-align:center}