:root{
  --font-ui:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Unbounded','Onest',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --rs:1;--fs:15px;--dens:1;
  --r-sm:calc(10px*var(--rs));--r-md:calc(16px*var(--rs));--r-lg:calc(22px*var(--rs));--r-xl:calc(30px*var(--rs));
  --bg:#E3E1F2;--panel:#F7F6FF;--panel-2:#FFFFFF;--raised:#ECEAF8;--raised-2:#DFDCF1;
  --line:rgba(26,22,54,.09);--text:#1A1636;--text-2:#585482;--text-3:#8C89AE;
  --shadow:0 12px 34px rgba(44,32,110,.16);
  --good:#1FA971;--warn:#D99A00;--bad:#E5484D;
  --accent:#FFD23F;--on-accent:#1B1500;--accent-ink-l:#8A6A00;--accent-ink:var(--accent-ink-l);
  color-scheme:light;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#100E24;--panel:#1B1938;--panel-2:#252248;--raised:#2B2858;--raised-2:#383470;
  --line:rgba(255,255,255,.08);--text:#F3F1FF;--text-2:#B8B4DC;--text-3:#827EAE;
  --shadow:0 16px 44px rgba(4,2,20,.55);--good:#4ADE9A;--warn:#FFC24B;--bad:#FF6B7A;
  --accent-ink:var(--accent);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#100E24;--panel:#1B1938;--panel-2:#252248;--raised:#2B2858;--raised-2:#383470;
  --line:rgba(255,255,255,.08);--text:#F3F1FF;--text-2:#B8B4DC;--text-3:#827EAE;
  --shadow:0 16px 44px rgba(4,2,20,.55);--good:#4ADE9A;--warn:#FFC24B;--bad:#FF6B7A;
  --accent-ink:var(--accent);color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;margin:0;padding:0;scrollbar-width:thin;scrollbar-color:var(--raised-2) transparent}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font:400 15px/1.45 var(--font-ui);overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.sm{width:16px;height:16px}.ic.xs{width:14px;height:14px}.ic.lg{width:24px;height:24px}
.grow{flex:1}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------- layout ---------- */
.app{height:100%;display:grid;grid-template-columns:76px 284px minmax(0,1fr) 300px;gap:12px;padding:12px}
.app[data-right="closed"]{grid-template-columns:76px 284px minmax(0,1fr)}
.app[data-right="closed"] .right{display:none}
.nav{display:contents}
.side,.main,.right{background:var(--panel);border-radius:var(--r-xl);min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.scrim{display:none}

/* ---------- avatars ---------- */
.av{--s:40px;width:var(--s);height:var(--s);border-radius:calc(var(--s)*.34);background:var(--uc);color:#171230;display:grid;place-items:center;font-weight:700;font-size:calc(var(--s)*.37);position:relative;flex:none;letter-spacing:-.02em;user-select:none}
.av .st{position:absolute;right:-3px;bottom:-3px;width:max(11px,calc(var(--s)*.32));height:max(11px,calc(var(--s)*.32));border-radius:50%;border:max(2px,calc(var(--s)*.07)) solid var(--ring,var(--panel));background:var(--text-3)}
.st.online{background:var(--good)}.st.idle{background:var(--warn)}.st.dnd{background:var(--bad)}.st.off,.st.invisible{background:var(--text-3)}
.av--tile{--s:clamp(48px,26cqmin,124px)}
.stack{display:flex}.stack .av{box-shadow:0 0 0 3px var(--ring,var(--panel))}.stack .av+.av{margin-left:-10px}

/* ---------- dock ---------- */
.dock{display:flex;flex-direction:column;align-items:center;gap:10px;padding:2px 0;overflow-y:auto;scrollbar-width:none}
.brand{width:52px;height:52px;border-radius:18px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;flex:none}
.brand svg{width:28px;height:28px;fill:currentColor}
.dock-sep{width:26px;height:2px;border-radius:2px;background:var(--line);flex:none}
.sp{position:relative;width:52px;height:52px;border-radius:20px;border:0;background:var(--panel);color:var(--text);font:700 18px var(--font-display);display:grid;place-items:center;flex:none;transition:border-radius .28s,background .2s,color .2s}
.sp:hover{border-radius:15px;background:var(--panel-2)}
.sp.on{background:var(--text);color:var(--panel);border-radius:16px}
.sp.on::before{content:"";position:absolute;left:-12px;top:50%;width:5px;height:26px;margin-top:-13px;border-radius:0 5px 5px 0;background:var(--accent-ink)}
.sp--add{background:transparent;color:var(--text-3);box-shadow:inset 0 0 0 2px var(--line)}
.sp--add:hover{color:var(--text);background:var(--panel)}
.sp .bdg{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--accent);color:var(--on-accent);font:700 11px/14px var(--font-ui);border:3px solid var(--bg);display:grid;place-items:center}

/* ---------- side ---------- */
.s-head{display:flex;align-items:center;gap:10px;padding:20px 18px 12px 22px}
.s-title{font:600 16px/1.2 var(--font-display);letter-spacing:-.01em}
.s-sub{display:flex;align-items:center;gap:6px;color:var(--text-3);font-size:12.5px;margin-top:4px}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in oklab,var(--good) 25%,transparent)}
.hb{width:38px;height:38px;border-radius:14px;border:0;background:transparent;color:var(--text-2);display:grid;place-items:center;flex:none;transition:background .15s,color .15s}
.hb:hover{background:var(--raised);color:var(--text)}
.hb.on{background:var(--accent);color:var(--on-accent)}
.s-search{margin:0 14px 8px;display:flex;align-items:center;gap:10px;padding:0 12px;height:42px;border-radius:15px;border:0;background:var(--raised);color:var(--text-3);text-align:left;font-size:14px}
.s-search:hover{background:var(--raised-2)}
.s-search span{flex:1}
kbd{font:500 11.5px var(--font-ui);padding:2px 7px;border-radius:7px;background:var(--panel);color:var(--text-2);box-shadow:inset 0 -1px 0 var(--line)}
.s-list{flex:1;overflow-y:auto;padding:4px 10px 10px}
.grp-h{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;color:var(--text-3);font:600 13px var(--font-ui);padding:14px 10px 6px;text-align:left}
.grp-h .ic{transition:transform .2s}.grp-h.fold .ic{transform:rotate(-90deg)}
.grp-h:hover{color:var(--text-2)}
.row{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 10px 0 12px;border:0;border-radius:var(--r-md);background:none;color:var(--text-2);text-align:left;font-size:14.5px;font-weight:500;transition:background .15s,color .15s}
.row:hover{background:var(--raised);color:var(--text)}
.row.on{background:color-mix(in oklab,var(--accent) 18%,transparent);color:var(--text);font-weight:600}
.row.on>.ic:first-child{color:var(--accent-ink)}
.row .ic:first-child{color:var(--text-3)}
.row-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.unread{color:var(--text);font-weight:600}
.bdg2{min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--accent);color:var(--on-accent);font:700 12px/22px var(--font-ui);text-align:center}
.row-count{font-size:12px;color:var(--text-3);font-weight:600}
.row.live .ic:first-child{color:var(--good)}
.vlist{padding:2px 0 6px 22px;display:flex;flex-direction:column;gap:2px}
.vrow{display:flex;align-items:center;gap:9px;padding:4px 8px;border-radius:12px;font-size:13.5px;color:var(--text-2);border:0;background:none;width:100%;text-align:left;--ring:var(--panel)}
.vrow:hover{background:var(--raised);color:var(--text)}
.vrow .av{transition:box-shadow .2s}
.vrow.speaking .av{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent)}
.vrow .vn{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vflags{display:flex;gap:4px;color:var(--text-3)}
.vflags .bad{color:var(--bad)}.vflags .on{color:var(--accent-ink)}
.dm{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border:0;border-radius:var(--r-md);background:none;text-align:left;transition:background .15s}
.dm:hover{background:var(--raised)}.dm.on{background:color-mix(in oklab,var(--accent) 18%,transparent)}
.dm-t{flex:1;min-width:0;display:flex;flex-direction:column}
.dm-t b{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-t small{color:var(--text-3);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm.unread small{color:var(--text-2)}
.dm-time{font-size:11.5px;color:var(--text-3);align-self:flex-start;padding-top:3px}

.callcard{margin:0 10px 8px;padding:12px;border-radius:var(--r-lg);background:var(--raised);display:flex;flex-direction:column;gap:12px;box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--good) 40%,transparent)}
.callcard:not(.live){box-shadow:inset 0 0 0 1.5px var(--line)}
.cc-top{display:flex;align-items:center;gap:10px}
.sig{display:flex;align-items:flex-end;gap:2px;height:16px;flex:none}
.sig i{width:3.5px;border-radius:2px;background:var(--good)}
.sig i:nth-child(1){height:5px}.sig i:nth-child(2){height:8px}.sig i:nth-child(3){height:11px}.sig i:nth-child(4){height:15px}
.callcard:not(.live) .sig i{background:var(--text-3);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.cc-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.cc-t b{font-size:13.5px;color:var(--good);font-weight:600}
.cc-t span{font-size:12.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-time{font:500 12.5px var(--font-ui);font-variant-numeric:tabular-nums;color:var(--text-2)}
.cc-btns{display:flex;gap:6px}
.cb{flex:1;height:38px;border-radius:13px;border:0;background:var(--panel);color:var(--text);display:grid;place-items:center;transition:background .15s}
.cb:hover{background:var(--panel-2)}.cb.on{background:var(--accent);color:var(--on-accent)}
.cb.leave{background:var(--bad);color:#fff}.cb.leave:hover{filter:brightness(1.08)}

.me{margin:0 10px 10px;padding:8px 8px 8px 10px;border-radius:var(--r-lg);background:var(--raised);display:flex;align-items:center;gap:6px;--ring:var(--raised)}
.me-id{display:flex;align-items:center;gap:10px;flex:1;min-width:0;border:0;background:none;text-align:left;padding:2px;border-radius:12px}
.me-id:hover{background:var(--raised-2)}
.me-id span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.me-id b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-id small{color:var(--text-3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb{width:36px;height:36px;border-radius:12px;border:0;background:none;color:var(--text-2);display:grid;place-items:center;flex:none}
.mb:hover{background:var(--raised-2);color:var(--text)}
.mb.off{color:var(--bad);background:color-mix(in oklab,var(--bad) 16%,transparent)}

/* ---------- main header ---------- */
.mhead{min-height:68px;display:flex;align-items:center;gap:12px;padding:0 16px 0 24px;flex:none}
.mh-ic{color:var(--text-3);display:grid}
.mh-title{font-weight:650;font-size:17px;white-space:nowrap;letter-spacing:-.01em}
.mh-sep{width:1px;height:20px;background:var(--line);flex:none}
.mh-topic{color:var(--text-3);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mh-sp{flex:1}
.menu-btn{display:none}
.qchip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:15px;background:var(--raised);font-size:12.5px;font-weight:600;color:var(--text-2)}
.qchip i{width:7px;height:7px;border-radius:50%;background:var(--good)}

/* ---------- feed ---------- */
.feed{flex:1;overflow-y:auto;padding:4px 28px 14px;display:flex;flex-direction:column;min-height:0}
.day{display:flex;align-items:center;gap:14px;margin:calc(18px*var(--dens)) 0 6px;color:var(--text-3);font-size:12.5px;font-weight:600}
.day::before,.day::after{content:"";flex:1;height:1px;background:var(--line)}
.newline{display:flex;align-items:center;gap:12px;margin:14px 0 4px;color:var(--accent-ink);font-size:12.5px;font-weight:700}
.newline::before,.newline::after{content:"";flex:1;height:1.5px;background:color-mix(in oklab,var(--accent) 55%,transparent);border-radius:2px}
.sys{align-self:center;display:flex;align-items:center;gap:8px;margin:12px 0 4px;padding:6px 14px 6px 11px;border-radius:999px;background:var(--raised);color:var(--text-2);font-size:12.5px}
.sys .ic{width:15px;height:15px;color:var(--good)}.sys time{color:var(--text-3)}
.msg{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;margin-top:calc(14px*var(--dens))}
.msg.cont{margin-top:calc(3px*var(--dens))}
.msg.cont .msg-av .av{display:none}
.msg-av{padding-top:1px}
.msg-body{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;max-width:min(660px,100%)}
.msg-head{display:flex;align-items:center;gap:8px;margin-bottom:1px;min-height:20px}
.msg-name{border:0;background:none;font-weight:650;font-size:14px;color:color-mix(in oklab,var(--uc) 62%,var(--text))}
.msg-name:hover{text-decoration:underline}
.rtag{font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:8px;background:color-mix(in oklab,var(--uc) 22%,transparent);color:color-mix(in oklab,var(--uc) 50%,var(--text))}
.msg-head time{font-size:12px;color:var(--text-3)}
.bubble{background:var(--raised);padding:10px 14px;border-radius:6px var(--r-lg) var(--r-lg) var(--r-lg);font-size:var(--fs);line-height:1.5;overflow-wrap:anywhere;max-width:100%}
.msg.cont .bubble{border-top-left-radius:var(--r-lg)}
.bt{display:none;float:right;margin:7px 0 -5px 12px;font-size:11px;opacity:.55}
.mention{background:color-mix(in oklab,var(--accent) 22%,transparent);color:var(--accent-ink);padding:0 4px;border-radius:6px;font-weight:600}
.bubble code{font:500 .88em var(--font-mono);background:color-mix(in oklab,var(--text) 10%,transparent);padding:1px 6px;border-radius:6px}
.quote{display:block;border-left:3px solid var(--accent-ink);padding:5px 10px;margin:-2px 0 7px;border-radius:4px 10px 10px 4px;background:color-mix(in oklab,var(--text) 7%,transparent);font-size:13px;line-height:1.35}
.quote b{display:block;font-size:12.5px;color:var(--accent-ink)}
.quote span{display:block;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:380px}
.react{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.rx{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 8px;border-radius:14px;border:0;background:var(--raised);font-size:13px;font-weight:600;color:var(--text-2);box-shadow:inset 0 0 0 1.5px transparent;transition:background .15s,transform .12s}
.rx:hover{background:var(--raised-2)}.rx:active{transform:scale(.94)}
.rx.me{background:color-mix(in oklab,var(--accent) 22%,transparent);box-shadow:inset 0 0 0 1.5px var(--accent-ink);color:var(--text)}
.rx span{font-size:15px;line-height:1}
.rx-add{padding:0 8px;opacity:0}.msg:hover .rx-add{opacity:1}
.msg-tools{position:absolute;right:0;top:-16px;display:none;gap:2px;padding:3px;background:var(--panel-2);border-radius:14px;box-shadow:var(--shadow),inset 0 0 0 1px var(--line);z-index:2}
.msg:hover .msg-tools{display:flex}
.tb{width:32px;height:32px;border-radius:11px;border:0;background:none;color:var(--text-2);display:grid;place-items:center}
.tb:hover{background:var(--raised);color:var(--text)}
/* bubble mode */
.feed--bubbles .msg-head time{display:none}
.feed--bubbles .bt{display:inline-block}
.feed--bubbles .msg.own{grid-template-columns:minmax(0,1fr);justify-items:end}
.feed--bubbles .own .msg-av,.feed--bubbles .own .msg-head{display:none}
.feed--bubbles .own .msg-body{align-items:flex-end}
.feed--bubbles .own .bubble{background:var(--accent);color:var(--on-accent);border-radius:var(--r-lg) 6px var(--r-lg) var(--r-lg)}
.feed--bubbles .own.cont .bubble{border-top-right-radius:var(--r-lg)}
.feed--bubbles .own .mention{background:rgba(0,0,0,.14);color:inherit}
.feed--bubbles .own .quote{border-color:var(--on-accent);background:rgba(0,0,0,.1)}
.feed--bubbles .own .quote b{color:inherit}
.feed--bubbles .own .bubble code{background:rgba(0,0,0,.14)}
.feed--bubbles .own .rx.me{box-shadow:inset 0 0 0 1.5px var(--accent-ink)}
/* lines mode */
.feed--lines .bubble{background:none;padding:0;border-radius:0}
.feed--lines .msg{margin-top:calc(16px*var(--dens))}.feed--lines .msg.cont{margin-top:calc(2px*var(--dens))}
.feed--lines .msg:hover{background:color-mix(in oklab,var(--text) 4%,transparent);border-radius:12px;box-shadow:0 0 0 8px color-mix(in oklab,var(--text) 4%,transparent)}
.feed--lines .msg-tools{right:-4px}

.img{position:relative;width:min(380px,100%);border-radius:var(--r-lg);overflow:hidden;background:var(--raised)}
.img svg{display:block;width:100%;height:auto;aspect-ratio:360/220}
.img-n{position:absolute;left:10px;bottom:10px;padding:4px 10px;border-radius:10px;background:rgba(10,8,30,.6);backdrop-filter:blur(8px);color:#fff;font-size:12px;font-weight:500}
.file{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-lg);background:var(--raised);min-width:290px}
.file-ic{width:44px;height:44px;border-radius:14px;background:color-mix(in oklab,var(--accent) 22%,transparent);color:var(--accent-ink);display:grid;place-items:center;flex:none}
.file div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.file b{font-size:14px;font-weight:600}.file small{color:var(--text-3);font-size:12.5px}
.vm{display:flex!important;align-items:center;gap:12px;min-width:290px;padding:8px 14px 8px 8px!important}
.vm-btn{width:40px;height:40px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;flex:none}
.feed--bubbles .own .vm-btn{background:var(--on-accent);color:var(--accent)}
.wave{display:flex;align-items:center;gap:2.5px;height:30px;flex:1}
.wave i{width:3px;border-radius:2px;background:currentColor;opacity:.28;flex:none}
.wave i.on{opacity:1;color:var(--accent-ink)}
.feed--bubbles .own .wave i.on{color:var(--on-accent)}
.vm-d{font:500 12.5px var(--font-ui);font-variant-numeric:tabular-nums;opacity:.7}
.code{width:min(520px,100%);border-radius:var(--r-lg);overflow:hidden;background:color-mix(in oklab,var(--bg) 70%,var(--panel));box-shadow:inset 0 0 0 1px var(--line)}
.code-h{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 6px 16px;font-size:12.5px;color:var(--text-3);font-weight:600;background:color-mix(in oklab,var(--text) 5%,transparent)}
.code pre{padding:12px 16px 14px;font:400 13px/1.6 var(--font-mono);overflow-x:auto;color:var(--text)}
.t-k{color:#E56FA4}.t-s{color:#2FA67E}.t-c{color:var(--text-3);font-style:italic}.t-n{color:#E08A2E}
:root[data-theme="dark"] .t-k{color:#FF8FB8}:root[data-theme="dark"] .t-s{color:#8EEBC0}:root[data-theme="dark"] .t-n{color:#FFB86B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .t-k{color:#FF8FB8}:root:not([data-theme="light"]) .t-s{color:#8EEBC0}:root:not([data-theme="light"]) .t-n{color:#FFB86B}}
.calllog{align-self:flex-start;display:flex;align-items:center;gap:14px;margin:14px 0 4px;padding:12px 14px;border-radius:var(--r-lg);background:var(--raised);max-width:100%;--ring:var(--raised);flex-wrap:wrap}
.cl-ic{width:44px;height:44px;border-radius:15px;background:color-mix(in oklab,var(--good) 20%,transparent);color:var(--good);display:grid;place-items:center;flex:none}
.calllog div.cl-t{display:flex;flex-direction:column;line-height:1.3}
.calllog b{font-weight:600}.calllog small{color:var(--text-3);font-size:12.5px}
.btn{height:38px;padding:0 16px;border-radius:13px;border:0;background:var(--accent);color:var(--on-accent);font-weight:650;font-size:14px;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn:hover{filter:brightness(1.06)}
.btn--ghost{background:var(--raised-2);color:var(--text)}
.btn--danger{background:color-mix(in oklab,var(--bad) 18%,transparent);color:var(--bad)}
.typing{display:flex;align-items:center;gap:10px;margin-top:14px;color:var(--text-3);font-size:13px}
.dots{display:flex;gap:4px;padding:9px 12px;border-radius:14px;background:var(--raised)}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:bounce 1.1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px);background:var(--accent-ink)}}
.empty{margin:auto;text-align:center;color:var(--text-3);max-width:320px;display:flex;flex-direction:column;align-items:center;gap:10px}
.empty b{color:var(--text);font:600 18px var(--font-display)}
.empty .big{width:72px;height:72px;border-radius:26px;background:var(--raised);display:grid;place-items:center;color:var(--accent-ink)}

/* ---------- composer ---------- */
.comp-wrap{margin:0 20px 20px;flex:none}
.replybar{display:flex;align-items:center;gap:10px;margin:0 14px;padding:8px 8px 8px 14px;border-radius:14px 14px 0 0;background:var(--raised-2);font-size:13px;color:var(--text-2)}
.replybar b{color:var(--accent-ink)}.replybar span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer{background:var(--raised);border-radius:calc(var(--r-lg) + 4px);padding:8px;display:flex;align-items:flex-end;gap:4px;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s}
.composer:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent-ink)}
.composer textarea{flex:1;resize:none;border:0;outline:0;background:none;color:var(--text);font:inherit;font-size:var(--fs);padding:10px 6px;max-height:160px;line-height:1.45}
.composer textarea::placeholder{color:var(--text-3)}
.ibtn{width:40px;height:40px;border-radius:calc(var(--r-md) - 2px);border:0;background:transparent;color:var(--text-2);display:grid;place-items:center;flex:none;transition:background .15s,color .15s}
.ibtn:hover{background:var(--raised-2);color:var(--text)}
.ibtn.sendbtn{background:var(--accent);color:var(--on-accent)}.ibtn.sendbtn:hover{filter:brightness(1.07)}

/* ---------- right ---------- */
.r-tabs{display:flex;gap:4px;margin:16px 16px 6px;padding:4px;border-radius:16px;background:var(--raised);flex:none}
.r-tab{flex:1;height:34px;border:0;border-radius:12px;background:none;color:var(--text-2);font-weight:600;font-size:13.5px}
.r-tab.on{background:var(--panel-2);color:var(--text);box-shadow:0 1px 0 var(--line)}
.r-body{flex:1;overflow-y:auto;padding:6px 10px 14px;min-height:0;display:flex;flex-direction:column}
.mg-h{padding:14px 10px 6px;color:var(--text-3);font-size:13px;font-weight:600}
.mrow{display:flex;align-items:center;gap:12px;width:100%;padding:7px 10px;border:0;border-radius:var(--r-md);background:none;text-align:left}
.mrow:hover{background:var(--raised)}
.mrow.off{opacity:.55}
.mrow div{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.mrow b{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow small{color:var(--text-3);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .rd{width:8px;height:8px;border-radius:50%;background:var(--uc);display:inline-block;margin-right:6px}
.pin{padding:12px 14px;border-radius:var(--r-lg);background:var(--raised);margin:6px 6px 0;font-size:13.5px;display:flex;flex-direction:column;gap:6px}
.pin header{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-3)}
.pin header b{color:var(--text);font-weight:600}
.rchat{flex:1;display:flex;flex-direction:column;min-height:0}
.rchat .feed{padding:0 6px 8px}
.right .msg{grid-template-columns:34px minmax(0,1fr);gap:10px}
.right .msg-body{max-width:100%}
.right .msg-tools{display:none!important}
.rcomp{margin:0 6px;display:flex;gap:6px;padding:6px;border-radius:var(--r-lg);background:var(--raised)}
.rcomp input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--text);font:inherit;font-size:14px;padding:0 8px}
.rcomp input::placeholder{color:var(--text-3)}

/* ---------- profile card ---------- */
.pcard{width:100%;background:var(--panel-2);border-radius:var(--r-xl);overflow:hidden;--ring:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line)}
.pc-banner{height:84px;background-color:color-mix(in oklab,var(--uc) 70%,var(--panel-2));background-image:radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.35) 1.5px,transparent 0);background-size:14px 14px}
.pc-av{padding:0 20px;margin-top:-38px;display:flex;align-items:flex-end;justify-content:space-between}
.pc-av .av{box-shadow:0 0 0 5px var(--panel-2)}
.pc-body{padding:12px 20px 18px;display:flex;flex-direction:column;gap:14px}
.pc-body h3{font:600 18px/1.2 var(--font-display);letter-spacing:-.01em}
.pc-handle{color:var(--text-3);font-size:13px;margin-top:3px}
.pc-status{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-2)}
.pc-sec{padding:12px 14px;border-radius:var(--r-md);background:var(--raised)}
.pc-sec h4{font-size:12.5px;color:var(--text-3);font-weight:600;margin-bottom:6px}
.pc-sec p{font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;background:color-mix(in oklab,var(--uc) 24%,transparent);color:color-mix(in oklab,var(--uc) 45%,var(--text));font-size:12.5px;font-weight:600}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--uc)}
.pc-act{display:flex;gap:8px}.pc-act .btn{flex:1}.pc-act .ibtn{background:var(--raised)}
.pop{position:fixed;z-index:60;background:var(--panel-2);border-radius:var(--r-xl);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);animation:pop .18s cubic-bezier(.2,.9,.3,1.15);pointer-events:auto}
.pop.pc{width:316px}
.pop.small{border-radius:var(--r-lg);padding:6px}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.97)}}
.emo{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;width:316px}
.emo button,.qr button{width:34px;height:34px;border:0;border-radius:11px;background:none;font-size:20px;display:grid;place-items:center;transition:transform .12s,background .12s}
.emo button:hover,.qr button:hover{background:var(--raised);transform:scale(1.18)}
.qr{display:flex;gap:2px}
.menu{display:flex;flex-direction:column;min-width:220px}
.menu button{display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border:0;border-radius:var(--r-md);background:none;text-align:left;font-size:14px;font-weight:500}
.menu button:hover{background:var(--raised)}.menu .ic{color:var(--text-2)}

/* ---------- stage ---------- */
.stagewrap{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.stage{position:relative;flex:1;min-height:0;padding:0 20px 20px;display:flex;flex-direction:column}
.vgrid{flex:1;min-height:0;display:grid;gap:14px;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);padding-bottom:86px}
.vgrid[data-n="1"]{--cols:1}.vgrid[data-n="2"],.vgrid[data-n="3"],.vgrid[data-n="4"]{--cols:2}.vgrid[data-n="5"],.vgrid[data-n="6"]{--cols:3}.vgrid[data-n="7"],.vgrid[data-n="8"]{--cols:4}
.vgrid.spot{grid-template-columns:repeat(var(--rest),minmax(0,1fr));grid-template-rows:minmax(0,1fr) 128px}
.vgrid.spot .vt.is-pin{grid-column:1/-1}
.vt{position:relative;container-type:size;border-radius:calc(var(--r-xl) - 2px);overflow:hidden;background:color-mix(in oklab,var(--uc) 20%,var(--panel-2));isolation:isolate;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .25s}
.vt.speaking{box-shadow:inset 0 0 0 3px var(--accent)}
.t-av{position:absolute;inset:0;display:grid;place-items:center;--s:clamp(48px,26cqmin,124px);--ring:transparent}
.t-av .av{z-index:1;font-size:calc(var(--s)*.34)}
.ripples i{position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);border-radius:34%;border:2px solid color-mix(in oklab,var(--uc) 60%,var(--text));opacity:0}
.vt.speaking .ripples i{animation:rip 2.2s ease-out infinite}
.ripples i:nth-child(2){animation-delay:.7s}.ripples i:nth-child(3){animation-delay:1.4s}
@keyframes rip{0%{transform:scale(1);opacity:.65}100%{transform:scale(2.5);opacity:0}}
.t-media{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.t-media.screen{background:#17142e}
.t-top{position:absolute;right:12px;top:12px;display:flex;gap:6px;z-index:2}
.t-chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:15px;background:color-mix(in oklab,var(--panel) 72%,transparent);backdrop-filter:blur(10px);font-size:12.5px;font-weight:600}
.t-chip i{width:7px;height:7px;border-radius:50%;background:var(--bad);animation:blink 1.4s infinite}
.t-pin{width:30px;height:30px;border-radius:15px;border:0;background:color-mix(in oklab,var(--panel) 72%,transparent);backdrop-filter:blur(10px);display:grid;place-items:center;opacity:0;transition:opacity .15s}
.vt:hover .t-pin,.vt.is-pin .t-pin{opacity:1}.vt.is-pin .t-pin{background:var(--accent);color:var(--on-accent)}
.t-name{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:8px;height:32px;padding:0 13px 0 9px;border-radius:16px;background:color-mix(in oklab,var(--panel) 72%,transparent);backdrop-filter:blur(10px);font-weight:600;font-size:13px;max-width:calc(100% - 24px)}
.t-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-name .bad{color:var(--bad)}
.eq{display:flex;align-items:flex-end;gap:2px;height:14px;width:16px;justify-content:center}
.eq i{width:3px;height:4px;border-radius:2px;background:var(--text-3);transition:background .2s}
.vt.speaking .eq i{background:var(--accent-ink);animation:eq .7s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.18s}.eq i:nth-child(3){animation-delay:.36s}
@keyframes eq{50%{height:14px}}
.vgrid.spot .vt:not(.is-pin) .t-name{height:26px;font-size:12px;left:8px;bottom:8px}
.vgrid.spot .vt:not(.is-pin) .t-top{display:none}
.ctrl{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px;border-radius:32px;background:color-mix(in oklab,var(--panel-2) 86%,transparent);backdrop-filter:blur(18px);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);z-index:5}
.cbtn{width:52px;height:52px;border-radius:calc(var(--r-lg) - 2px);border:0;background:var(--raised);color:var(--text);display:grid;place-items:center;position:relative;transition:background .2s,transform .12s,box-shadow .2s}
.cbtn:hover{background:var(--raised-2)}.cbtn:active{transform:scale(.94)}
.cbtn.on{background:var(--accent);color:var(--on-accent)}
.cbtn.off{background:color-mix(in oklab,var(--bad) 22%,var(--raised));color:var(--bad)}
.cbtn.speaking{box-shadow:0 0 0 3px var(--accent)}
.cbtn.leave{width:auto;padding:0 20px 0 16px;gap:8px;background:var(--bad);color:#fff;font-weight:650;display:flex;align-items:center;font-size:14px}
.cbtn.leave:hover{filter:brightness(1.08)}
.csep{width:1px;height:28px;background:var(--line);margin:0 2px}
.rpick{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) scale(.9);opacity:0;pointer-events:none;display:flex;gap:2px;padding:6px;border-radius:22px;background:var(--panel-2);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);transition:.18s}
.rpick.open{opacity:1;pointer-events:auto;transform:translateX(-50%)}
.rpick button{width:42px;height:42px;font-size:24px;border:0;border-radius:15px;background:none;transition:transform .12s}
.rpick button:hover{background:var(--raised);transform:translateY(-3px) scale(1.12)}
.float{position:absolute;bottom:100px;font-size:40px;z-index:6;pointer-events:none;animation:floatup 2.6s ease-out forwards}
@keyframes floatup{0%{transform:translateY(0) scale(.6);opacity:0}12%{opacity:1;transform:translateY(-30px) scale(1)}100%{transform:translateY(-320px) translateX(24px) scale(1.1);opacity:0}}
.lobby{margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:20px;max-width:460px}
.l-ic{width:92px;height:92px;border-radius:32px;background:var(--raised);color:var(--accent-ink);display:grid;place-items:center;margin-bottom:6px}
.l-ic .ic{width:40px;height:40px}
.lobby h2{font:600 28px/1.15 var(--font-display);letter-spacing:-.02em}
.lobby p{color:var(--text-2);font-size:15px;max-width:360px}
.l-who{display:flex;flex-direction:column;align-items:center;gap:10px;--ring:var(--panel)}
.l-who .stack .av{box-shadow:0 0 0 4px var(--panel)}
.l-pre{display:flex;gap:8px;margin-top:4px}
.l-pre .pill{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 12px;border-radius:21px;border:0;background:var(--raised);font-weight:600;font-size:14px}
.l-pre .pill.off{color:var(--bad)}.l-pre .pill.on{background:var(--accent);color:var(--on-accent)}
.btn--xl{height:56px;padding:0 32px;border-radius:calc(var(--r-lg) - 2px);font-size:16px;margin-top:6px}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid color-mix(in oklab,var(--on-accent) 30%,transparent);border-top-color:var(--on-accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}

/* ---------- overlays ---------- */
#layer{position:fixed;inset:0;pointer-events:none;z-index:50}
#layer>*{pointer-events:auto}
.mscrim{position:fixed;inset:0;background:rgba(8,6,24,.58);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px;animation:fade .2s;z-index:55}
.mscrim.top{align-items:start;padding-top:12vh}
@keyframes fade{from{opacity:0}}
.modal{width:min(1040px,100%);height:min(700px,100%);background:var(--panel);border-radius:34px;display:grid;grid-template-columns:250px minmax(0,1fr);overflow:hidden;box-shadow:var(--shadow);animation:pop .28s cubic-bezier(.2,.9,.3,1.15);position:relative}
.set-nav{background:var(--bg);padding:24px 14px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.set-nav h2{font:600 15px var(--font-display);padding:2px 12px 16px}
.set-nav button{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;border:0;border-radius:var(--r-md);background:none;color:var(--text-2);font-weight:600;font-size:14.5px;text-align:left}
.set-nav button:hover{background:var(--panel);color:var(--text)}
.set-nav button.on{background:var(--panel);color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line)}
.set-nav button.on .ic{color:var(--accent-ink)}
.set-nav .logout{margin-top:auto;color:var(--bad)}
.set-body{overflow-y:auto;padding:32px 40px 40px;position:relative}
.x-btn{position:absolute;right:18px;top:18px;width:42px;height:42px;border-radius:16px;border:0;background:var(--raised);color:var(--text-2);display:grid;place-items:center;z-index:3}
.x-btn:hover{background:var(--raised-2);color:var(--text)}
.sh1{font:600 24px/1.2 var(--font-display);letter-spacing:-.02em;margin-bottom:24px;padding-right:50px}
.sh{font-size:13px;font-weight:600;color:var(--text-3);margin:26px 0 10px 6px}
.sgroup{background:var(--raised);border-radius:var(--r-lg);overflow:hidden}
.srow{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:15px 18px;border-top:1px solid var(--line)}
.srow:first-child{border-top:0}
.srow>div:first-child{min-width:0}
.srow b{display:block;font-weight:600;font-size:14.5px}
.srow small{display:block;color:var(--text-3);font-size:13px;margin-top:2px;line-height:1.35}
.sw{width:50px;height:30px;border-radius:15px;border:0;background:var(--raised-2);position:relative;flex:none;transition:background .2s}
.sw i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--text-3);transition:transform .25s cubic-bezier(.3,1.4,.5,1),background .2s}
.sw[aria-checked=true]{background:var(--accent)}.sw[aria-checked=true] i{transform:translateX(20px);background:var(--on-accent)}
.seg{display:inline-flex;padding:4px;border-radius:16px;background:var(--raised-2);gap:2px;flex:none}
.seg button{border:0;background:none;color:var(--text-2);padding:0 14px;height:34px;border-radius:12px;font-weight:600;font-size:13px}
.seg button.on{background:var(--panel-2);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.sel,.inp{background:var(--raised-2);border:1.5px solid transparent;border-radius:14px;padding:0 14px;height:44px;color:var(--text);font:inherit;font-size:14.5px;outline:0;width:100%}
textarea.inp{height:auto;padding:12px 14px;resize:none;line-height:1.45}
.inp:focus,.sel:focus{border-color:var(--accent-ink)}
.sel{appearance:none;-webkit-appearance:none;width:240px;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C89AE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
.sel option{background:var(--panel-2);color:var(--text)}
.field{margin-bottom:18px}.field label{display:block;font-size:13px;font-weight:600;color:var(--text-3);margin:0 0 8px 4px}
.rng{display:flex;align-items:center;gap:12px;width:260px}
.rng input{-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:3px;background:linear-gradient(to right,var(--accent) var(--p),var(--raised-2) var(--p));outline:0;min-width:0}
.rng input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--panel-2);border:5px solid var(--accent);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.rng input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--panel-2);border:5px solid var(--accent);cursor:pointer}
.rng output{min-width:42px;text-align:right;font-size:13px;color:var(--text-2);font-variant-numeric:tabular-nums}
.s-two{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:32px;align-items:start}
.s-prev{position:sticky;top:0}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pick button{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border:0;border-radius:var(--r-md);background:var(--raised);font-weight:600;font-size:14px;box-shadow:inset 0 0 0 1.5px transparent;text-align:left}
.pick button.on{box-shadow:inset 0 0 0 1.5px var(--accent-ink);background:color-mix(in oklab,var(--accent) 14%,var(--raised))}
.pick .st{position:static;width:12px;height:12px;border:0;flex:none}
.meter-card{padding:18px;display:flex;flex-direction:column;gap:14px}
.meter{display:flex;gap:3px;height:36px;align-items:flex-end}
.meter i{flex:1;border-radius:3px;background:var(--raised-2);height:100%}
.meter i.on{background:var(--good)}.meter i.hi{background:var(--warn)}.meter i.max{background:var(--bad)}
.meter-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.meter-row small{color:var(--text-3);font-size:13px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.tcard{border:0;background:var(--raised);border-radius:var(--r-lg);padding:10px 10px 12px;display:flex;flex-direction:column;gap:10px;text-align:left;box-shadow:inset 0 0 0 2px transparent;font-weight:600;font-size:14px}
.tcard.on{box-shadow:inset 0 0 0 2px var(--accent-ink)}
.tc-prev{height:84px;border-radius:calc(var(--r-md) - 2px);background:var(--b);display:flex;gap:6px;padding:8px;overflow:hidden}
.tc-prev i{display:block;border-radius:6px;background:var(--p)}
.tc-prev i:nth-child(1){width:14px}.tc-prev i:nth-child(2){flex:1;display:flex}
.tc-prev i:nth-child(3){width:26px}
.mp{height:84px;border-radius:calc(var(--r-md) - 2px);background:var(--panel);padding:10px;display:flex;flex-direction:column;gap:6px;justify-content:center}
.mp .l,.mp .r{height:16px;border-radius:8px 12px 12px 12px;background:var(--raised-2);width:62%}
.mp .r{align-self:flex-end;background:var(--accent);border-radius:12px 8px 12px 12px;width:48%}
.mp.lines{gap:8px}.mp .ln{display:flex;gap:8px;align-items:center}.mp .ln i{width:14px;height:14px;border-radius:5px;background:var(--raised-2);flex:none}.mp .ln b{height:6px;border-radius:3px;background:var(--raised-2);flex:1}
.swatches{display:flex;gap:12px;padding:18px;flex-wrap:wrap}
.swatch{width:46px;height:46px;border-radius:50%;border:0;background:var(--c);display:grid;place-items:center;color:var(--k);box-shadow:0 0 0 3px var(--raised),0 0 0 5px transparent;transition:box-shadow .2s,transform .15s}
.swatch:hover{transform:scale(1.08)}.swatch.on{box-shadow:0 0 0 3px var(--raised),0 0 0 5px var(--text)}
.swatch .ic{opacity:0}.swatch.on .ic{opacity:1}
.live-prev{padding:16px 18px 18px;--ring:var(--raised)}
.live-prev .feed{padding:0;overflow:visible}
.e2e{display:flex;gap:14px;padding:18px;border-radius:var(--r-lg);background:color-mix(in oklab,var(--good) 12%,var(--raised));margin-bottom:6px}
.e2e .ic{color:var(--good);width:26px;height:26px}.e2e b{display:block;font-weight:650;margin-bottom:3px}.e2e small{color:var(--text-2);font-size:13.5px;line-height:1.4}
.e2e code{font:500 13px var(--font-mono);color:var(--text)}
.keys{display:flex;gap:6px}.keys kbd{font-size:12.5px;padding:5px 10px;border-radius:9px;background:var(--raised-2);color:var(--text)}
.cam-prev{position:relative;height:200px;border-radius:var(--r-lg);overflow:hidden;--uc:#FFC857;container-type:size}
.cam-prev svg{width:100%;height:100%;display:block;transition:transform .3s}
.cam-prev.mirror svg{transform:scaleX(-1)}
.cam-prev span{position:absolute;left:12px;bottom:12px;padding:5px 12px;border-radius:12px;background:rgba(10,8,30,.6);color:#fff;font-size:12.5px;font-weight:500}
.danger-zone{margin-top:30px}
.ver{margin-top:26px;text-align:center;color:var(--text-3);font-size:13px}

.palette{width:min(580px,100%);background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden;animation:pop .2s;display:flex;flex-direction:column;max-height:70vh}
.pal-in{display:flex;align-items:center;gap:12px;padding:0 20px;height:62px;color:var(--text-3);border-bottom:1px solid var(--line)}
.pal-in input{flex:1;border:0;outline:0;background:none;color:var(--text);font:inherit;font-size:17px}
.pal-list{overflow-y:auto;padding:8px}
.pal-i{display:flex;align-items:center;gap:12px;height:48px;padding:0 12px;border-radius:var(--r-md);border:0;background:none;width:100%;text-align:left;font-size:14.5px;font-weight:500}
.pal-i.on{background:color-mix(in oklab,var(--accent) 20%,transparent)}
.pal-i small{margin-left:auto;color:var(--text-3);font-size:12.5px}
.pal-i .ic:first-child{color:var(--text-3)}
.pal-foot{display:flex;gap:16px;padding:12px 20px;border-top:1px solid var(--line);color:var(--text-3);font-size:12.5px}
#toasts{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;z-index:80;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;height:46px;padding:0 20px 0 14px;border-radius:23px;background:var(--text);color:var(--panel);font-weight:600;font-size:14px;box-shadow:var(--shadow);animation:toastin .3s cubic-bezier(.2,.9,.3,1.2)}
.toast .ic{color:var(--good)}
.toast.out{opacity:0;transform:translateY(8px);transition:.25s}
@keyframes toastin{from{opacity:0;transform:translateY(14px) scale(.96)}}
.tip{position:fixed;z-index:90;pointer-events:none;padding:6px 11px;border-radius:10px;background:var(--text);color:var(--panel);font-size:12.5px;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .12s}
.tip.show{opacity:1}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .app,.app[data-right="closed"]{grid-template-columns:76px 272px minmax(0,1fr)}
  .right{position:fixed;right:12px;top:calc(12px + env(safe-area-inset-top,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));width:320px;z-index:30;box-shadow:var(--shadow);animation:slidein .25s}
  .app[data-right="closed"] .right{display:none}
  @keyframes slidein{from{transform:translateX(30px);opacity:0}}
}
@media (max-width:820px){
  .app,.app[data-right="closed"]{grid-template-columns:minmax(0,1fr);padding:8px}
  .nav{display:flex;gap:8px;position:fixed;left:8px;top:calc(8px + env(safe-area-inset-top,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:40;transform:translateX(-120%);transition:transform .3s cubic-bezier(.2,.9,.3,1);max-width:calc(100vw - 16px)}
  .nav .dock{background:var(--bg);padding:8px;border-radius:var(--r-xl)}
  .nav .side{width:272px}
  .app[data-nav="open"] .nav{transform:none}
  .app[data-nav="open"] .scrim{display:block;position:fixed;inset:0;background:rgba(8,6,24,.5);z-index:35}
  .menu-btn{display:grid}
  .mhead{padding:0 10px 0 12px}.mh-topic,.mh-sep{display:none}
  .feed{padding:4px 14px 12px}.comp-wrap{margin:0 10px 10px}
  .stage{padding:0 10px 10px}.vgrid{gap:8px}
  .vgrid[data-n="3"],.vgrid[data-n="4"],.vgrid[data-n="5"],.vgrid[data-n="6"]{--cols:2}
  .ctrl{gap:4px;padding:6px;bottom:14px}.cbtn{width:46px;height:46px}.cbtn.leave span{display:none}.cbtn.leave{padding:0 14px}
  .hide-m{display:none!important}
  .modal{grid-template-columns:1fr;grid-template-rows:auto 1fr;border-radius:26px}
  .set-nav{flex-direction:row;overflow-x:auto;padding:12px;gap:4px}.set-nav h2,.set-nav .logout{display:none}.set-nav button{flex:none;height:40px}
  .set-body{padding:20px 18px 28px}.s-two{grid-template-columns:1fr}.s-prev{position:static}
  .srow{flex-wrap:wrap}.sel,.rng{width:100%}.cards{grid-template-columns:1fr 1fr}
  .right{left:8px;right:8px;width:auto}
}
.cards+.sgroup,.sgroup+.sgroup,.cards+.sh{margin-top:16px}
.kbd-hint{display:none}
.ripples{position:absolute;inset:0;pointer-events:none}
.t-chip{white-space:nowrap}
.msg-name{white-space:nowrap;text-align:left;padding:0}
.right .msg-head{flex-wrap:wrap;row-gap:0}
.r-close{display:none;position:absolute;right:10px;top:10px;z-index:2}
@media (max-width:1180px){.r-close{display:grid}.r-tabs{margin-right:58px}}