*{box-sizing:border-box}body{color:#111;background:linear-gradient(#f8f9fb 0%,#eef0f4 100%);min-height:100vh;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.container{background:#fff;border:1px solid #e7e8ec;border-radius:14px;max-width:440px;margin:80px auto;padding:36px 32px;box-shadow:0 1px 2px #1018280a,0 8px 24px #1018280f}.header-row{align-items:center;gap:10px;margin-bottom:14px;display:flex}.user-row{align-items:center;gap:8px;margin-bottom:20px;display:flex}.avatar{color:#fff;background:#111;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-size:.72rem;font-weight:600;display:inline-flex}h1{letter-spacing:-.01em;margin:0;font-size:1.3rem;font-weight:600}input{background:#fafafb;border:1px solid #d7d9de;border-radius:8px;width:100%;margin-bottom:12px;padding:10px 12px;font-size:.95rem;transition:border-color .15s,background .15s;display:block}input:focus{background:#fff;border-color:#111;outline:none}button{cursor:pointer;color:#fff;background:#111;border:1px solid #111;border-radius:8px;align-items:center;gap:8px;padding:10px 16px;font-size:.95rem;font-weight:500;transition:transform 50ms,opacity .15s,background .15s;display:inline-flex}button:hover:not(:disabled){background:#292929}button:active:not(:disabled){transform:scale(.98)}button:disabled{opacity:.5;cursor:not-allowed}button.secondary{color:#111;background:#fff;border-color:#d7d9de}button.secondary:hover:not(:disabled){background:#f5f5f6}button.danger{color:#d92d20;background:#fff;border-color:#f3b3ab}button.danger:hover:not(:disabled){background:#fef3f2}button.full-width{justify-content:center;width:100%}.link-button{color:#06c;cursor:pointer;background:0 0;border:none;padding:0;font-size:.9rem;text-decoration:underline}.divider{text-align:center;color:#888;margin:20px 0;font-size:.85rem}.banner{border-radius:4px;margin-bottom:16px;padding:10px 14px;font-size:.9rem}.banner.success{color:#1a7a1a;background:#e6f7e6;border:1px solid #b6e3b6}.banner.error{color:#a10000;background:#fde8e8;border:1px solid #f3b3b3}.error-text{color:#a10000;margin:-6px 0 12px;font-size:.85rem}.status-box{background:#fafafb;border:1px solid #e7e8ec;border-radius:10px;margin-bottom:20px;padding:20px}.status-pill{border-radius:999px;align-items:center;gap:7px;margin-bottom:14px;padding:5px 12px;font-size:.82rem;font-weight:600;display:inline-flex}.status-pill .dot{border-radius:999px;width:8px;height:8px}.status-pill.connected{color:#17803d;background:#e6f7ea}.status-pill.connected .dot{background:#17a34a;box-shadow:0 0 0 3px #17a34a2e}.status-pill.disconnected{color:#565a64;background:#f1f2f4}.status-pill.disconnected .dot{background:#9a9ea6}.channel-row{color:#333;align-items:center;gap:8px;margin:0 0 16px;font-size:.9rem;display:flex}.channel-row code{background:#eef0f4;border-radius:4px;padding:2px 6px;font-size:.85rem}.footer-row{justify-content:flex-end;margin-top:4px;display:flex}.muted{color:#666;font-size:.85rem}.skeleton{background:linear-gradient(90deg,#f1f2f4 25%,#e9eaee 37%,#f1f2f4 63%) 0 0/400% 100%;border-radius:10px;height:76px;margin-bottom:20px;animation:1.4s infinite shimmer}@keyframes shimmer{0%{background-position:100% 0}to{background-position:0 0}}