:root {
  color-scheme: dark;
  --bg: #07111f;
  --bg-deep: #050b14;
  --panel: rgba(15, 27, 45, .82);
  --panel-solid: #101d30;
  --panel-soft: rgba(24, 39, 62, .64);
  --line: rgba(151, 177, 216, .14);
  --line-strong: rgba(151, 177, 216, .24);
  --text: #f4f7fb;
  --muted: #8998ad;
  --accent: #7770ff;
  --accent-2: #43d7df;
  --accent-rgb: 119, 112, 255;
  --good: #42d79a;
  --danger: #ff6578;
  --shadow: 0 26px 80px rgba(0, 0, 0, .32);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--bg-deep); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: radial-gradient(circle at 72% -10%, rgba(var(--accent-rgb), .16), transparent 36%), linear-gradient(145deg, var(--bg) 0%, var(--bg-deep) 68%); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input, select { font: inherit; }
button { color: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ambient { position: fixed; border-radius: 50%; pointer-events: none; filter: blur(1px); opacity: .6; z-index: 0; }
.ambient-a { width: 520px; height: 520px; right: -280px; top: 8%; background: radial-gradient(circle, rgba(var(--accent-rgb), .18), transparent 68%); }
.ambient-b { width: 420px; height: 420px; left: 22%; bottom: -310px; background: radial-gradient(circle, rgba(67, 215, 223, .11), transparent 68%); }

.rail { position: fixed; inset: 0 auto 0 0; width: 88px; z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 24px 12px 20px; border-right: 1px solid var(--line); background: rgba(5, 11, 20, .78); backdrop-filter: blur(22px); }
.brand-mark { width: 48px; height: 48px; border: 0; border-radius: 15px; background: linear-gradient(145deg, var(--accent), #9c6dff); display: flex; justify-content: center; align-items: center; gap: 3px; box-shadow: 0 10px 28px rgba(var(--accent-rgb), .28); }
.brand-mark span { width: 3px; border-radius: 3px; background: white; animation: brand-wave 1.4s ease-in-out infinite; }
.brand-mark span:nth-child(1) { height: 11px; animation-delay: -.4s; }.brand-mark span:nth-child(2) { height: 21px; animation-delay: -.2s; }.brand-mark span:nth-child(3) { height: 16px; animation-delay: -.6s; }.brand-mark span:nth-child(4) { height: 8px; animation-delay: -.1s; }
@keyframes brand-wave { 50% { transform: scaleY(.55); opacity: .72; } }
.rail-nav { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.rail-btn { width: 64px; min-height: 58px; border: 0; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #65748a; background: transparent; transition: .2s ease; }
.rail-btn svg { width: 22px; height: 22px; }.rail-btn span { font-size: 11px; }.rail-btn:hover { color: #c8d2e1; background: rgba(255,255,255,.04); }.rail-btn.active { color: #fff; background: rgba(var(--accent-rgb), .16); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .16); }
.rail-spacer { flex: 1; }.user-orb { width: 40px; height: 40px; border: 2px solid rgba(255,255,255,.2); border-radius: 50%; background: linear-gradient(145deg, #4d74a0, #8f6cbe); font-weight: 750; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .08); }

.shell { position: relative; z-index: 2; margin-left: 88px; min-height: 100vh; }
.topbar { height: 80px; padding: 0 4vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(7, 17, 31, .48); backdrop-filter: blur(20px); }
.topbar-brand { display: flex; align-items: center; gap: 12px; }.topbar-brand strong { display: block; font-size: 22px; letter-spacing: .08em; }.topbar-brand>div>span { display: block; margin-top: 1px; color: var(--muted); font-size: 9px; letter-spacing: .24em; }.mobile-brand { display: none; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }.status-chip { border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); color: var(--muted); font-size: 13px; padding: 9px 13px; }.status-chip i, .quality-badge i, .chat-header i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px rgba(66, 215, 154, .7); }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.035); color: #a9b5c6; transition: .2s ease; }.icon-button svg { width: 19px; }.icon-button:hover { color: #fff; border-color: var(--line-strong); transform: translateY(-1px); }.icon-button.small { width: 34px; height: 34px; border-radius: 10px; }
.profile-chip { border: 0; background: transparent; display: flex; align-items: center; gap: 10px; padding: 3px 2px 3px 5px; text-align: left; }.profile-chip>span:nth-child(2) { display: grid; gap: 2px; }.profile-chip strong { font-size: 13px; }.profile-chip small { color: var(--muted); font-size: 11px; }.profile-chip>svg { width: 16px; color: var(--muted); }.avatar { display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 750; }.profile-chip .avatar { width: 36px; height: 36px; font-size: 13px; }.avatar-purple { background: linear-gradient(145deg, #6b7bd7, #9f6aca); }

.view { display: none; }.view.active { display: block; animation: view-in .35s ease both; }@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
#lobby-view { padding: 34px 4vw 64px; max-width: 1540px; margin: 0 auto; }
.hero-panel { min-height: 370px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); align-items: center; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(120deg, rgba(21, 36, 59, .86), rgba(13, 25, 43, .72)); box-shadow: var(--shadow); }
.hero-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg, black, transparent 85%); }
.hero-copy { position: relative; z-index: 2; padding: 54px clamp(28px, 5vw, 72px); }.eyebrow { color: var(--accent-2); font-size: 12px; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }.hero-copy h1 { margin: 14px 0 18px; font-size: clamp(36px, 4.3vw, 64px); line-height: 1.08; letter-spacing: -.055em; }.hero-copy h1 em { color: #b0aaff; font-style: normal; }.hero-copy p { max-width: 570px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.8; }.hero-actions { display: flex; gap: 12px; margin-top: 30px; }
.primary-button, .ghost-button { min-height: 46px; padding: 0 22px; border-radius: 13px; font-weight: 720; border: 1px solid transparent; transition: .2s ease; }.primary-button { background: linear-gradient(135deg, var(--accent), #8e6eff); color: #fff; box-shadow: 0 12px 28px rgba(var(--accent-rgb), .22); }.primary-button:hover { transform: translateY(-2px); box-shadow: 0 15px 32px rgba(var(--accent-rgb), .32); }.ghost-button { border-color: var(--line); background: rgba(255,255,255,.035); color: #cad4e1; }.ghost-button:hover { border-color: var(--line-strong); background: rgba(255,255,255,.06); }.pulse-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px rgba(66, 215, 154, .12); }
.soundscape { position: relative; min-height: 360px; height: 100%; }.soundscape::after { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(var(--accent-rgb), .25), transparent 64%); filter: blur(4px); }.orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(150, 150, 255, .18); border-radius: 50%; transform: translate(-50%,-50%); z-index: 2; }.orbit-one { width: 280px; height: 280px; animation: spin 22s linear infinite; }.orbit-two { width: 390px; height: 390px; animation: spin 32s linear reverse infinite; }@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.floating-avatar { position: absolute; width: 48px; height: 48px; border: 4px solid #192842; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; box-shadow: 0 10px 24px rgba(0,0,0,.28); }.fa-one { top: -22px; left: calc(50% - 24px); background: linear-gradient(145deg,#d55c83,#814eaa); }.fa-two { right: 8px; bottom: 30px; background: linear-gradient(145deg,#2e9f99,#4267a8); }
.center-signal { position: absolute; z-index: 4; left: 50%; top: 50%; width: 148px; height: 148px; transform: translate(-50%,-50%); border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, rgba(var(--accent-rgb), .95), rgba(67, 215, 223, .85)); box-shadow: 0 0 60px rgba(var(--accent-rgb), .4), inset 0 0 30px rgba(255,255,255,.13); }.signal-ring { position: absolute; inset: -18px; border: 1px solid rgba(162, 157, 255, .35); border-radius: 50%; animation: signal 2.5s ease-out infinite; }.ring-two { animation-delay: 1.25s; }@keyframes signal { from { opacity: .7; transform: scale(.88); } to { opacity: 0; transform: scale(1.35); } }.wave-bars { display: flex; align-items: center; gap: 5px; height: 52px; }.wave-bars i { width: 5px; border-radius: 5px; background: #fff; animation: wave 1s ease-in-out infinite; }.wave-bars i:nth-child(1),.wave-bars i:nth-child(7){height:16px}.wave-bars i:nth-child(2),.wave-bars i:nth-child(6){height:28px;animation-delay:-.2s}.wave-bars i:nth-child(3),.wave-bars i:nth-child(5){height:40px;animation-delay:-.4s}.wave-bars i:nth-child(4){height:50px;animation-delay:-.6s}@keyframes wave{50%{transform:scaleY(.45);opacity:.72}}
.floating-note { position: absolute; z-index: 5; padding: 9px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(10,20,36,.82); box-shadow: 0 12px 25px rgba(0,0,0,.24); backdrop-filter: blur(8px); color: #dbe3ed; font-size: 12px; }.note-one { left: 7%; top: 25%; }.note-two { right: 5%; bottom: 19%; }

.content-card { margin-top: 24px; padding: 0 28px 30px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(18px); }.tabs-row { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }.tabs { display: flex; align-self: stretch; gap: 30px; }.tab { position: relative; border: 0; padding: 0 2px; background: transparent; color: var(--muted); font-weight: 650; }.tab::after { content: ""; position: absolute; height: 2px; left: 50%; right: 50%; bottom: -1px; background: var(--accent); transition: .2s ease; }.tab.active { color: #fff; }.tab.active::after { left: 0; right: 0; }.rooms-meta { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 13px; }.text-button { border: 0; background: transparent; color: #9f9aff; padding: 5px; }
.tab-panel { display: none; padding-top: 22px; }.tab-panel.active { display: block; animation: view-in .25s ease; }.toolbar { display: flex; gap: 12px; margin-bottom: 20px; }.search-box { flex: 1; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(5,12,22,.38); }.search-box:focus-within { border-color: rgba(var(--accent-rgb),.48); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08); }.search-box svg { width: 19px; color: var(--muted); }.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); }.search-box input::placeholder { color: #647287; }.select-box { min-width: 190px; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 13px; background: rgba(5,12,22,.38); }.select-box select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #dbe4ef; }.select-box option { background: var(--panel-solid); }
.room-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 15px; }.room-card { position: relative; overflow: hidden; min-height: 214px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(29,45,69,.76), rgba(15,28,46,.84)); transition: .22s ease; }.room-card::before { content:""; position:absolute; width:150px;height:150px;right:-80px;top:-80px;border-radius:50%;background:radial-gradient(circle, rgba(var(--card-rgb),.22),transparent 68%); }.room-card:hover { transform: translateY(-4px); border-color: rgba(var(--card-rgb),.38); box-shadow: 0 18px 34px rgba(0,0,0,.2); }.room-card-head { display:flex;align-items:flex-start;justify-content:space-between;gap:10px; }.topic-chip { padding:5px 8px;border-radius:7px;background:rgba(var(--card-rgb),.13);color:rgb(var(--card-rgb));font-size:11px;font-weight:750; }.room-card-head .count { color:var(--muted);font-size:12px; }.room-card h3 { margin:16px 0 7px;font-size:18px;letter-spacing:-.02em; }.room-card p { min-height: 42px; margin:0;color:var(--muted);font-size:13px;line-height:1.6; }.room-card-foot { display:flex;align-items:center;justify-content:space-between;margin-top:18px; }.avatar-stack { display:flex;padding-left:5px; }.avatar-stack .avatar { width:31px;height:31px;margin-left:-6px;border:2px solid #18263c;font-size:10px; }.more-avatar { background:#26364e;color:#aab7c8; }.join-card { border:0;border-radius:10px;background:rgba(var(--accent-rgb),.13);color:#b7b3ff;font-size:12px;font-weight:750;padding:9px 12px; }.join-card:hover { background:var(--accent);color:#fff; }.empty-state { padding:54px 20px;text-align:center;color:var(--muted); }.empty-state div { font-size:40px;color:#687994; }.empty-state strong,.empty-state span { display:block;margin-top:6px; }.empty-state strong { color:#dce5ef; }
.room-form { max-width: 780px; margin: 10px auto 4px; padding: 20px; }.narrow-form { max-width:580px; }.form-intro { display:flex;align-items:center;gap:14px;margin-bottom:26px; }.form-icon { width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:rgba(var(--accent-rgb),.15);color:#b0acff;font-size:24px; }.form-intro h2 { margin:0 0 5px;font-size:21px; }.form-intro p { margin:0;color:var(--muted);font-size:13px; }.field-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px; }.field.wide { grid-column:1/-1; }.field { display:grid;gap:8px;color:#cdd7e3;font-size:13px; }.field small { color:var(--muted); }.field input,.field select { width:100%;height:46px;border:1px solid var(--line);border-radius:12px;outline:0;background:rgba(4,11,20,.4);color:var(--text);padding:0 14px; }.field input:focus,.field select:focus { border-color:rgba(var(--accent-rgb),.52);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08); }.field select option { background:var(--panel-solid); }.switch-row { display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:16px 0;border-top:1px solid var(--line); }.switch-row span { display:grid;gap:4px; }.switch-row strong { font-size:13px; }.switch-row small { color:var(--muted);font-size:12px; }.switch-row input { display:none; }.switch-row i { position:relative;width:43px;height:24px;border-radius:20px;background:#334157;transition:.2s; }.switch-row i::after { content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s; }.switch-row input:checked+i { background:var(--accent); }.switch-row input:checked+i::after { transform:translateX(19px); }.form-submit { width:100%;margin-top:10px; }

.room-view { padding: 0 4vw 46px; max-width: 1600px; margin:0 auto; }.room-topline { min-height:94px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px; }.back-button { justify-self:start;display:flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--muted); }.back-button:hover{color:#fff}.back-button svg{width:18px}.room-title-wrap{display:flex;align-items:center;gap:12px;text-align:left}.room-title-wrap h1{margin:0;font-size:19px}.room-title-wrap p{margin:4px 0 0;color:var(--muted);font-size:12px}.live-badge{padding:5px 7px;border-radius:6px;background:rgba(255,101,120,.12);color:#ff8392;font-size:10px;font-weight:800;letter-spacing:.12em}.inline-code{border:0;background:transparent;color:#aaa6ff;padding:0}.room-top-actions{justify-self:end;display:flex;gap:8px}
.room-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;min-height:calc(100vh - 145px)}.stage-panel,.chat-panel{border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:var(--shadow);backdrop-filter:blur(18px)}.stage-panel{position:relative;min-width:0;padding:30px 32px 112px;overflow:hidden}.stage-panel::before{content:"";position:absolute;width:520px;height:520px;left:50%;top:40%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.1),transparent 66%);pointer-events:none}.stage-heading{position:relative;display:flex;align-items:center;justify-content:space-between}.stage-heading h2{margin:6px 0 0;font-size:21px}.quality-badge{padding:8px 11px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:11px;background:rgba(5,12,22,.28)}.seat-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(100px,1fr));gap:34px 20px;margin:54px auto 20px;max-width:850px}.seat{text-align:center;min-width:0}.seat-avatar{position:relative;width:74px;height:74px;margin:0 auto 10px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,var(--seat-a),var(--seat-b));border:3px solid rgba(255,255,255,.08);box-shadow:0 10px 28px rgba(0,0,0,.25);font-weight:800;font-size:20px}.seat.speaking .seat-avatar{box-shadow:0 0 0 4px rgba(67,215,223,.12),0 0 0 7px rgba(67,215,223,.4),0 12px 30px rgba(0,0,0,.25)}.seat-status{position:absolute;right:-1px;bottom:1px;width:22px;height:22px;display:grid;place-items:center;border:3px solid #132238;border-radius:50%;background:var(--good);color:#fff}.seat-status svg{width:11px}.seat.muted .seat-status{background:#48566c}.seat-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.seat-role{display:inline-block;margin-top:4px;color:var(--muted);font-size:10px}.room-controls{position:absolute;z-index:5;left:50%;bottom:24px;transform:translateX(-50%);display:flex;gap:13px;padding:12px 18px;border:1px solid var(--line);border-radius:20px;background:rgba(6,14,25,.86);box-shadow:0 15px 40px rgba(0,0,0,.28);backdrop-filter:blur(20px)}.control-button{min-width:58px;border:0;background:transparent;color:var(--muted);display:grid;justify-items:center;gap:6px}.control-button>span{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.035)}.control-button svg{width:20px}.control-button small{font-size:10px}.control-button.active{color:#fff}.control-button.active>span{border-color:rgba(var(--accent-rgb),.32);background:rgba(var(--accent-rgb),.16)}.control-button.danger{color:#ff8b98}.control-button.danger>span{background:rgba(255,101,120,.12);border-color:rgba(255,101,120,.2)}
.chat-panel{display:flex;min-width:0;flex-direction:column;overflow:hidden}.chat-header{min-height:76px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.chat-header h2{margin:0 0 4px;font-size:15px}.chat-header span{color:var(--muted);font-size:11px}.chat-header i{width:6px;height:6px}.chat-messages{flex:1;min-height:380px;overflow-y:auto;padding:18px;scrollbar-width:thin}.message{display:grid;grid-template-columns:34px 1fr;gap:10px;margin-bottom:18px}.message>.avatar{width:34px;height:34px;font-size:11px}.message-head{display:flex;align-items:baseline;gap:7px}.message-head strong{font-size:12px}.message-head time{color:#5f6f84;font-size:10px}.message p{margin:5px 0 0;color:#c9d3df;font-size:13px;line-height:1.55}.system-message{margin:14px 0;text-align:center;color:#65748a;font-size:11px}.chat-composer{padding:14px;border-top:1px solid var(--line);background:rgba(5,12,22,.22)}.composer-tools{display:flex;align-items:center;gap:10px;margin-bottom:9px}.composer-tools button{border:0;background:transparent;color:#8998ad;padding:2px;font-size:18px}.composer-tools span{margin-left:auto;color:#5f6d80;font-size:10px}.composer-row{display:flex;gap:8px}.composer-row input{flex:1;min-width:0;height:42px;border:1px solid var(--line);border-radius:11px;outline:0;background:rgba(4,10,18,.5);color:#fff;padding:0 12px}.composer-row input:focus{border-color:rgba(var(--accent-rgb),.45)}.composer-row button{width:42px;border:0;border-radius:11px;background:var(--accent);color:#fff}.composer-row svg{width:19px}
.theme-panel{position:fixed;z-index:40;right:24px;bottom:24px;width:310px;padding:18px;border:1px solid var(--line-strong);border-radius:20px;background:rgba(12,23,39,.96);box-shadow:var(--shadow);backdrop-filter:blur(20px);opacity:0;pointer-events:none;transform:translateY(12px) scale(.98);transition:.2s ease}.theme-panel.open{opacity:1;pointer-events:auto;transform:none}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}.panel-heading>div{display:grid;gap:4px}.panel-heading span{color:var(--muted);font-size:12px}.panel-heading button{border:0;background:transparent;color:var(--muted);font-size:24px}.theme-option{width:100%;display:flex;align-items:center;gap:11px;margin-top:8px;padding:11px;border:1px solid transparent;border-radius:13px;background:rgba(255,255,255,.025);text-align:left}.theme-option:hover{background:rgba(255,255,255,.05)}.theme-option.active{border-color:rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.1)}.theme-option>span{display:grid;gap:3px;flex:1}.theme-option strong{font-size:13px}.theme-option small{color:var(--muted)}.theme-option b{visibility:hidden;color:var(--accent-2)}.theme-option.active b{visibility:visible}.swatch{width:39px;height:39px;border-radius:12px}.swatch.ocean{background:linear-gradient(145deg,#6f6cff,#42d2dc)}.swatch.aurora{background:linear-gradient(145deg,#20b98a,#7ce0c2)}.swatch.sunset{background:linear-gradient(145deg,#ff7868,#e168a6)}
.join-dialog{width:min(92vw,460px);padding:0;border:1px solid var(--line-strong);border-radius:22px;background:rgba(12,23,39,.98);color:var(--text);box-shadow:0 35px 100px rgba(0,0,0,.58);backdrop-filter:blur(24px)}.join-dialog::backdrop{background:rgba(2,7,14,.72);backdrop-filter:blur(8px)}.identity-form{position:relative;padding:30px}.identity-form>.form-icon{margin-bottom:18px}.identity-form h2{margin:0 0 6px;font-size:24px}.identity-form>p{margin:0 0 22px;color:var(--muted);font-size:13px}.identity-form .field{margin-top:15px}.identity-form .privacy-note{margin:16px 0 0;padding:11px 12px;border:1px solid rgba(67,215,223,.12);border-radius:10px;background:rgba(67,215,223,.05);color:#8ea8b2;font-size:11px;line-height:1.55}.dialog-close{position:absolute;right:18px;top:16px;width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.04);color:var(--muted);font-size:22px}.dialog-close:hover{color:#fff;background:rgba(255,255,255,.08)}.join-dialog[open]{animation:dialog-in .22s ease both}@keyframes dialog-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
.status-chip.offline i,.quality-badge.offline i{background:#77869a;box-shadow:none}.status-chip.connecting i,.quality-badge.connecting i{background:#f7b955;box-shadow:0 0 10px rgba(247,185,85,.55)}.seat.empty .seat-avatar{background:rgba(255,255,255,.025);border-style:dashed;color:#607086;box-shadow:none}.seat.local .seat-avatar{box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12),0 0 0 7px rgba(var(--accent-rgb),.28),0 12px 30px rgba(0,0,0,.25)}
.toast{position:fixed;z-index:100;left:50%;bottom:28px;transform:translate(-50%,20px);padding:11px 16px;border:1px solid var(--line-strong);border-radius:11px;background:rgba(12,22,36,.96);box-shadow:var(--shadow);color:#dce4ee;font-size:13px;opacity:0;pointer-events:none;transition:.25s ease}.toast.show{opacity:1;transform:translate(-50%,0)}.mobile-nav{display:none}

body[data-theme="aurora"]{--bg:#071b1b;--bg-deep:#041110;--panel:rgba(12,38,36,.82);--panel-solid:#0e2927;--accent:#21b98a;--accent-2:#77e0c0;--accent-rgb:33,185,138}.body[data-theme="sunset"],body[data-theme="sunset"]{--bg:#1c0d1a;--bg-deep:#100810;--panel:rgba(45,20,39,.82);--panel-solid:#331529;--accent:#ef6f7f;--accent-2:#ffb065;--accent-rgb:239,111,127}

@media (max-width: 1120px){.room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-panel{grid-template-columns:1fr .8fr}.room-layout{grid-template-columns:minmax(0,1fr) 320px}.seat-grid{grid-template-columns:repeat(3,1fr)}.hero-copy h1{font-size:44px}}
@media (max-width: 820px){body{padding-bottom:72px}.rail{display:none}.shell{margin-left:0}.topbar{height:68px;padding:0 18px}.mobile-brand{display:flex;width:39px;height:39px;border-radius:12px}.topbar-brand>div>strong{font-size:18px}.status-chip,.profile-chip>span:nth-child(2),.profile-chip>svg,.topbar-actions>.icon-button{display:none}.profile-chip .avatar{width:34px;height:34px}.topbar-actions{gap:0}#lobby-view{padding:16px 14px 28px}.hero-panel{min-height:0;grid-template-columns:1fr;border-radius:22px}.hero-copy{padding:32px 24px 36px}.hero-copy h1{font-size:36px}.hero-copy p{font-size:14px}.soundscape{display:none}.content-card{margin-top:14px;padding:0 14px 22px;border-radius:20px}.tabs-row{min-height:64px;overflow-x:auto}.tabs{gap:20px;white-space:nowrap}.rooms-meta{display:none}.toolbar{display:grid}.select-box{width:100%;min-width:0}.room-grid{grid-template-columns:1fr}.room-card{min-height:200px}.field-grid{grid-template-columns:1fr}.field.wide{grid-column:auto}.room-form{padding:12px 4px}.mobile-nav{position:fixed;z-index:30;inset:auto 0 0;display:grid;grid-template-columns:repeat(5,1fr);height:66px;border-top:1px solid var(--line);background:rgba(6,14,25,.93);backdrop-filter:blur(20px)}.mobile-nav button{border:0;background:transparent;color:#68778c;display:grid;place-content:center;justify-items:center;gap:3px}.mobile-nav svg{width:20px;height:20px}.mobile-nav span{font-size:10px}.mobile-nav button.active{color:#fff}.mobile-create{width:38px;height:30px;display:grid!important;place-items:center;border-radius:10px;background:var(--accent);color:#fff;font-size:22px!important;margin-top:-12px}.room-view{padding:0 12px 18px}.room-topline{min-height:82px;grid-template-columns:auto 1fr auto}.back-button{font-size:0}.back-button svg{width:22px}.room-title-wrap{justify-self:center}.room-title-wrap h1{font-size:15px}.room-title-wrap p{display:none}.live-badge{display:none}.room-layout{display:block;min-height:0}.stage-panel{min-height:600px;padding:24px 14px 104px}.chat-panel{margin-top:14px;min-height:540px}.seat-grid{grid-template-columns:repeat(3,1fr);gap:26px 10px;margin-top:42px}.seat-avatar{width:62px;height:62px}.quality-badge{display:none}.room-controls{position:fixed;z-index:25;bottom:72px;gap:5px;padding:8px 10px;max-width:calc(100vw - 18px)}.control-button{min-width:54px}.control-button>span{width:38px;height:38px}.theme-panel{right:12px;left:12px;bottom:76px;width:auto}.toast{bottom:82px;white-space:nowrap;max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis}}
@media (max-width: 440px){.hero-actions{display:grid}.hero-copy h1{font-size:31px}.tabs{gap:16px}.tab{font-size:13px}.seat-grid{grid-template-columns:repeat(2,1fr)}.stage-panel{min-height:720px}.control-button small{display:none}.control-button{min-width:48px}.chat-panel{min-height:500px}.room-title-wrap{max-width:190px}.room-title-wrap h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Simplified private voice-room layout */
.simple-shell{margin-left:0}.simple-shell .topbar{padding-inline:max(24px,calc((100vw - 1120px)/2))}.simple-brand{width:44px;height:44px;border:0}.simple-lobby{max-width:1120px!important;padding-top:42px!important}.simple-hero{min-height:290px;grid-template-columns:1fr}.simple-hero .hero-copy{max-width:760px}.simple-hero .hero-copy h1{font-size:clamp(40px,5vw,62px)}
.quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}.action-card{max-width:none;margin:0;padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:var(--shadow);backdrop-filter:blur(18px)}.action-card .form-intro{margin-bottom:24px}.action-card .form-submit{min-height:48px;margin-top:20px}.compact-button{min-height:38px;padding:0 15px;font-size:12px}
.simple-room-layout{grid-template-columns:minmax(0,1fr);min-height:calc(100vh - 145px)}.simple-room-layout .stage-panel{min-height:620px}.simple-room-layout .seat-grid{max-width:900px}.simple-room-layout .room-controls{gap:18px}.simple-room-layout .control-button{min-width:68px}

@media (max-width:820px){body{padding-bottom:0}.simple-shell .topbar{padding-inline:16px}.simple-shell .status-chip{display:block}.simple-lobby{padding-top:16px!important}.simple-hero .hero-copy{padding:34px 25px}.quick-actions{grid-template-columns:1fr;gap:14px;margin-top:14px}.action-card{padding:22px 18px}.simple-room-layout .stage-panel{min-height:calc(100vh - 100px);padding-bottom:104px}.simple-room-layout .room-controls{bottom:14px}.room-top-actions .compact-button{display:none}.toast{bottom:82px}}

.account-chip{display:flex;align-items:center;gap:10px;min-height:44px;padding:5px 12px 5px 6px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035);text-align:left}.account-chip>span:last-child{display:grid;gap:1px}.account-chip strong{font-size:12px}.account-chip small{color:var(--muted);font-size:10px}.account-avatar{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,var(--accent),#43b8cf);color:#fff;font-size:12px;font-weight:800}.account-avatar-large{width:58px;height:58px;margin-bottom:16px;border-radius:18px;font-size:20px}.role-pill{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(var(--accent-rgb),.13);color:#b7b3ff;font-size:12px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:22px 0 16px;padding:5px;border-radius:12px;background:rgba(5,12,22,.45)}.auth-tabs button{height:36px;border:0;border-radius:9px;background:transparent;color:var(--muted)}.auth-tabs button.active{background:rgba(var(--accent-rgb),.18);color:#fff}.auth-form{display:grid;gap:14px}.auth-form .form-submit{margin-top:2px}.primary-button:disabled,.ghost-button:disabled{opacity:.55;cursor:wait}.admin-dialog{width:min(94vw,620px)}.admin-section{margin-top:20px}.admin-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.admin-heading strong{font-size:13px}.admin-heading span{color:var(--muted);font-size:12px}.admin-list{display:grid;gap:8px;max-height:210px;overflow:auto}.admin-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:rgba(5,12,22,.3)}.admin-row>span{display:grid;gap:3px;min-width:0}.admin-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.admin-row small{color:var(--muted);font-size:10px}.admin-row button{border:1px solid rgba(255,101,120,.18);border-radius:8px;background:rgba(255,101,120,.1);color:#ff8b98;padding:6px 10px;font-size:11px}.admin-empty{padding:18px;text-align:center;color:var(--muted);font-size:12px;border:1px dashed var(--line);border-radius:11px}

@media (max-width:520px){.simple-shell .status-chip{display:none}.account-chip>span:last-child{display:none}.account-chip{padding:5px}.admin-dialog .identity-form{padding:25px 18px}}