:root{--background:#f7f8fb;--foreground:#172033;--muted:#5d687c;--panel:#fff;--line:#d8deea;--primary:#156d6b;--primary-strong:#0d514f;--danger:#b42318;--warning:#9a5b00;--success:#167349}html{height:100%}html,body{max-width:100vw;overflow-x:hidden}body{min-height:100%;color:var(--foreground);background:var(--background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex-direction:column;font-family:Arial,Helvetica,sans-serif;display:flex}*{box-sizing:border-box;margin:0;padding:0}a{color:inherit;text-decoration:none}.app-shell{width:min(100%,1040px);margin:0 auto;padding:48px 20px}.join-shell{border:1px solid var(--line);background:var(--panel);border-radius:8px;gap:24px;padding:28px;display:grid;box-shadow:0 18px 48px #17203314}.join-header{justify-content:space-between;align-items:start;gap:20px;display:flex}.eyebrow{color:var(--primary);text-transform:uppercase;margin-bottom:6px;font-size:.78rem;font-weight:700}h1{color:var(--foreground);letter-spacing:0;font-size:2rem;line-height:1.15}.join-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}label{color:var(--muted);gap:8px;font-size:.88rem;font-weight:700;display:grid}input,select{border:1px solid var(--line);width:100%;min-height:44px;color:var(--foreground);font:inherit;background:#fff;border-radius:6px;padding:10px 12px;font-weight:500}input:focus,select:focus{border-color:var(--primary);outline:3px solid #156d6b29}.channel-picker{gap:10px;display:grid}.channel-list-message{min-height:22px;color:var(--muted);font-size:.92rem;line-height:1.45}.join-actions{flex-wrap:wrap;gap:12px;display:flex}button{min-height:44px;font:inherit;cursor:pointer;border:1px solid #0000;border-radius:6px;padding:0 18px;font-weight:700}button:disabled{cursor:not-allowed;opacity:.48}.primary-action{color:#fff;background:var(--primary)}.primary-action:hover:not(:disabled){background:var(--primary-strong)}.secondary-action{color:var(--foreground);border-color:var(--line);background:#fff}.secondary-action:hover:not(:disabled){border-color:var(--primary)}.connection-badge{min-width:116px;color:var(--muted);text-align:center;background:#eef2f7;border-radius:999px;flex:none;padding:8px 10px;font-size:.82rem;font-weight:800}.connection-badge-connected{color:var(--success);background:#e8f6ef}.connection-badge-requesting_token,.connection-badge-connecting,.connection-badge-reconnecting{color:var(--warning);background:#fff3d8}.connection-badge-denied,.connection-badge-error,.connection-badge-unconfigured{color:var(--danger);background:#fff0ed}.state-message{min-height:24px;color:var(--muted);font-size:.98rem;line-height:1.5}@media (max-width:760px){.app-shell{padding:20px 12px}.join-shell{padding:20px}.join-header{flex-direction:column;align-items:stretch}.connection-badge{width:fit-content}.join-grid{grid-template-columns:1fr}}