/* discord.css — final override layer: Discord-desktop-like look (loaded last). */
:root,[data-theme="dark"],:root[data-theme="dark"]{
  --bg-0:#1e1f22; --bg-1:#2b2d31; --bg-2:#313338; --bg-3:#383a40; --bg-4:#404249; --bg-float:#111214; --code:#2b2d31;
  --rail:#1e1f22; --side:#2b2d31; --chat:#313338; --mem:#2b2d31; --inp:#383a40; --userbar:#232428;
  --line:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.1);
  --hover:rgba(78,80,88,.3); --active:rgba(78,80,88,.6);
  --text:#f2f3f5; --text-2:#dbdee1; --muted:#949ba4; --faint:#80848e; --hdr:#f2f3f5;
  --accent:#5865f2; --accent-hover:#4752c4; --accent-ink:#fff;
  --green:#23a559; --red:#da373c; --yellow:#f0b232; --amber:#f0b232;
  --mention-bg:rgba(240,178,50,.1); --mention-bar:#f0b232;
  --shadow:0 8px 16px rgba(0,0,0,.24);
  color-scheme:dark;
}
[data-theme="midnight"]{ --bg-0:#000; --bg-1:#0b0b0d; --bg-2:#111214; --bg-3:#1e1f22; --bg-4:#2b2d31; --rail:#000; --side:#0b0b0d; --chat:#111214; --mem:#0b0b0d; --inp:#1e1f22; --userbar:#050506; --code:#0b0b0d; }
:root[data-theme="light"],[data-theme="light"]{
  --bg-0:#e3e5e8; --bg-1:#f2f3f5; --bg-2:#ffffff; --bg-3:#ebedef; --bg-4:#e3e5e8; --bg-float:#ffffff; --code:#f2f3f5;
  --rail:#e3e5e8; --side:#f2f3f5; --chat:#ffffff; --mem:#f2f3f5; --inp:#ebedef; --userbar:#ebedef;
  --line:rgba(6,6,7,.08); --line-2:rgba(6,6,7,.14); --hover:rgba(116,124,138,.14); --active:rgba(116,124,138,.24);
  --text:#060607; --text-2:#313338; --muted:#5c5e66; --faint:#80848e; --hdr:#060607;
  --accent:#5865f2; --accent-hover:#4752c4; --mention-bg:rgba(240,178,50,.14); --shadow:0 8px 16px rgba(0,0,0,.12);
  color-scheme:light;
}
html{font-size:var(--fs,16px)}
body{font-family:"Noto Sans","gg sans",Inter,system-ui,"Segoe UI",sans-serif!important;background:var(--rail)!important;color:var(--text-2)}

/* kill glass/glow */
.app>.rail,.app>.side,.app>.main,.app>.members,.main .top,.settings,.settings nav,.pop,.menu-pop,.modal,.msg .acts,.toast,.me-card,.pcard,.tip{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.app{background:var(--rail)!important}

/* server rail */
.app>.rail,.rail{background:var(--rail)!important;gap:8px!important;padding:12px 0!important;border:0!important;box-shadow:none!important}
.rail .sep{width:32px!important;height:2px!important;background:var(--bg-4)!important;border-radius:1px!important}
.ri .icon{width:48px!important;height:48px!important;border-radius:50%!important;background:var(--bg-2)!important;color:var(--text-2)!important;box-shadow:none!important;transition:border-radius .17s ease,background-color .17s ease,color .17s ease!important}
[data-theme="light"] .ri .icon{background:#fff!important}
.ri:hover .icon,.ri.on .icon{border-radius:16px!important}
.ri:hover .icon:not(:has(img)),.ri.on .icon:not(:has(img)){background:var(--accent)!important;color:#fff!important}
.ri .icon.add,.ri .icon.disc{color:var(--green)!important}
.ri:hover .icon.add,.ri:hover .icon.disc,.ri.on .icon.disc{background:var(--green)!important;color:#fff!important}
.ri .pip{left:-16px!important;width:8px!important;background:var(--text)!important;border-radius:0 4px 4px 0!important;box-shadow:none!important}
.ri .badge{background:var(--red)!important;border-color:var(--rail)!important}

/* channel sidebar */
.app>.side,.side{background:var(--side)!important;border:0!important;box-shadow:none!important}
.side-head{height:48px!important;padding:0 16px!important;font-weight:600!important;font-size:1rem!important;color:var(--hdr)!important;border-bottom:1px solid rgba(0,0,0,.24)!important;box-shadow:0 1px 0 rgba(4,4,5,.1)!important;background:transparent;transition:background .1s}
.side-head:hover{background-color:var(--hover)}
.side-banner{box-shadow:none!important}
.cat{padding:16px 8px 4px 2px!important;font-size:12px!important;font-weight:600!important;letter-spacing:.02em!important;color:var(--muted)!important}
.cat:hover{color:var(--text-2)!important}
.ch{padding:6px 8px!important;margin:1px 0!important;border-radius:4px!important;color:var(--muted)!important;font-weight:500!important;font-size:1rem!important;background:transparent!important;box-shadow:none!important;border:0!important}
.ch::after{display:none!important}
.ch:hover{background:var(--hover)!important;color:var(--text-2)!important}
.ch.on{background:var(--active)!important;color:var(--text)!important}
.ch.unread{color:var(--text)!important;font-weight:600!important}
.ch .ico{opacity:.7!important;color:var(--muted)}
.ch .mb,.mb-badge{background:var(--red)!important;border-radius:8px!important}
.me-bar{background:var(--userbar)!important;padding:0 8px!important;height:52px!important;border:0!important;box-shadow:none!important;border-radius:0!important;margin:0!important}
.me-bar .who{border-radius:4px!important}
.me-bar .who:hover{background:var(--hover)!important}
.me-bar .nm{color:var(--text)!important;font-size:14px!important}
.me-bar .un{font-size:12px!important;color:var(--muted)!important}
.me-bar button:not(.who){width:32px;height:32px;border-radius:4px!important;color:var(--muted)}
.me-bar button:not(.who):hover{background:var(--hover)!important;color:var(--text-2)}

/* main / top bar */
.app>.main,.main{background:var(--chat)!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.top,.main .top{height:48px!important;background:var(--chat)!important;border-bottom:1px solid rgba(0,0,0,.24)!important;box-shadow:0 1px 0 rgba(4,4,5,.1)!important;padding:0 8px 0 16px!important}
[data-theme="light"] .top,[data-theme="light"] .side-head{border-bottom-color:rgba(6,6,7,.08)!important}
.top .title{color:var(--hdr)!important;font-weight:600!important;font-size:1rem!important}
.top .title .ico{color:var(--faint)!important}
.top .topic{font-size:14px!important;color:var(--muted)!important;border-left:1px solid var(--line-2)!important}
.top .tb{border-radius:4px!important;color:var(--muted)!important;background:transparent!important}
.top .tb:hover,.top .tb.on{color:var(--text-2)!important;background:transparent!important}
.search input{background:var(--bg-0)!important;border:0!important;border-radius:4px!important;height:24px!important;padding:0 26px 0 6px!important;font-size:14px!important;width:144px!important;box-shadow:none!important}
.search input:focus{width:240px!important}
[data-theme="light"] .search input{background:#e3e5e8!important}

/* messages */
.msg{padding:2px 48px 2px 16px!important;margin-top:17px!important;gap:16px!important;border-radius:0!important;font-size:1rem!important;line-height:1.375rem!important;color:var(--text-2)}
.msg .gut{width:40px!important}
.msg.compact{margin-top:0!important}
.msg:hover{background:rgba(2,2,2,.06)!important}
[data-theme="light"] .msg:hover{background:rgba(6,6,7,.03)!important}
.msg .gut .av,.msg .gut .av img{width:40px;height:40px}
.msg .name{font-weight:500!important;font-size:1rem!important;color:var(--text)}
.msg .ts{font-size:.75rem!important;color:var(--muted)!important;font-weight:500;margin-left:.25rem}
.msg .gut .hts{font-size:11px!important;color:var(--muted)!important;line-height:1.375rem;padding-top:0!important}
.msg.mentioned{background:var(--mention-bg)!important}
.msg.mentioned:hover{background:rgba(240,178,50,.08)!important}
.msg.mentioned::before{width:2px!important;background:var(--mention-bar)!important;display:block!important}
.msg .acts,.acts{background:var(--chat)!important;border:1px solid var(--line)!important;border-radius:4px!important;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.2)!important;right:14px!important;top:-16px!important;padding:0!important}
[data-theme="dark"] .msg .acts,:root:not([data-theme="light"]) .msg .acts{background:var(--chat)!important}
.acts button{width:32px!important;height:32px!important;border-radius:0!important;color:var(--muted)!important;background:transparent!important}
.acts button:hover{background:var(--hover)!important;color:var(--text-2)!important}
.reply-ref{position:relative;font-size:.875rem;color:var(--muted)}
.mention{background:rgba(88,101,242,.3)!important;color:#c9cdfb!important;border-radius:3px!important;padding:0 2px!important;font-weight:500!important}
.mention:hover{background:var(--accent)!important;color:#fff!important}
[data-theme="light"] .mention{color:#505cdc!important;background:rgba(88,101,242,.15)!important}
.embed{background:var(--bg-1)!important;border-radius:4px!important;border-left:4px solid var(--bg-0);box-shadow:none!important}
.react{background:var(--bg-1)!important;border:1px solid transparent!important;border-radius:8px!important;box-shadow:none!important}
.react.on,.react.me{background:rgba(88,101,242,.15)!important;border-color:var(--accent)!important}
.divider{color:var(--muted)}
.sys{color:var(--muted)!important}
.sys:hover{background:rgba(2,2,2,.06)!important}

/* composer */
.composer{padding:0 16px 24px!important;background:transparent!important}
.box{background:var(--inp)!important;border:0!important;border-radius:8px!important;box-shadow:none!important;padding:0 4px 0 6px!important}
.reply-bar,.tray{background:var(--bg-1)!important;border:0!important}
.reply-bar+.box,.tray+.box{border-radius:0 0 8px 8px!important}
.box textarea{font-size:1rem!important;color:var(--text-2)!important}
.box textarea::placeholder{color:var(--faint)!important}
.box .cb{color:var(--muted)!important;background:transparent!important}
.box .cb:hover{color:var(--text-2)!important}

/* member list */
.app>.members,.members{background:var(--mem)!important;border:0!important;box-shadow:none!important;padding:0 8px 20px!important}
.members h5,.panel-h{font-size:12px!important;font-weight:600!important;color:var(--muted)!important;letter-spacing:.02em!important;padding:24px 8px 4px!important}
.mem{border-radius:4px!important;padding:1px 8px!important;min-height:42px;margin:1px 0;background:transparent!important}
.mem:hover{background:var(--hover)!important}
.mem .nm{color:var(--muted);font-size:1rem}
.mem:hover .nm{color:var(--text-2)}
.mem.off{opacity:.3!important}

/* popups, menus, tooltips */
.pop,.menu-pop{background:var(--bg-float)!important;border:0!important;border-radius:4px!important;box-shadow:0 8px 16px rgba(0,0,0,.24)!important}
[data-theme="light"] .pop,[data-theme="light"] .menu-pop{background:#fff!important;box-shadow:0 0 0 1px rgba(6,6,7,.08),0 8px 16px rgba(0,0,0,.16)!important}
.menu-pop{padding:6px 8px!important;min-width:188px!important}
.menu-pop button,.menu-pop label{padding:6px 8px!important;margin:2px 0;border-radius:2px!important;font-size:14px!important;font-weight:500!important;color:var(--text-2)!important;min-height:32px}
.menu-pop button:hover,.menu-pop label:hover{background:var(--accent)!important;color:#fff!important}
.menu-pop button.danger{color:#f23f42!important}
.menu-pop button.danger:hover{background:var(--red)!important;color:#fff!important}
.menu-pop hr{border-top:1px solid var(--line-2)!important;margin:4px!important}
.tip{background:var(--bg-float)!important;color:var(--text)!important;border:0!important;border-radius:4px!important;font-size:14px!important;font-weight:600!important;padding:8px 12px!important;box-shadow:0 8px 16px rgba(0,0,0,.24)!important}
[data-theme="light"] .tip{background:#fff!important}
.pcard{background:var(--bg-0)!important;border:0!important;border-radius:8px!important;box-shadow:0 8px 16px rgba(0,0,0,.24)!important}
[data-theme="light"] .pcard{background:#fff!important}
.pop .pcard{box-shadow:none!important}
.pcard .pav{border-color:var(--bg-0)!important}
.pcard .pinner{background:var(--bg-float)!important;border-radius:8px!important;border:0!important}
[data-theme="light"] .pcard .pinner{background:#f2f3f5!important}
.pcard h3{color:var(--text)!important;font-size:20px!important;font-weight:600!important}
.pcard h6{font-size:12px!important;font-weight:700!important;color:var(--text)!important;border-top:1px solid var(--line-2)!important}

/* modals */
.backdrop,.scrim{background:rgba(0,0,0,.7)!important}
.modal{background:var(--chat)!important;border:0!important;border-radius:4px!important;box-shadow:0 0 0 1px rgba(32,34,37,.6),0 2px 10px 0 rgba(0,0,0,.2)!important}
.modal .mh h2{font-size:20px!important;font-weight:600!important;color:var(--text)!important}
.modal .mh p{color:var(--text-2)!important;font-size:14px}
.modal .mf{background:var(--bg-1)!important;border:0!important;border-radius:0 0 4px 4px!important}
.input,input.input,textarea.input,select.input,.field input,.field textarea,.field select{background:var(--bg-0)!important;border:0!important;border-radius:3px!important;box-shadow:none!important;color:var(--text-2)!important}
[data-theme="light"] .input,[data-theme="light"] .field input{background:#e3e5e8!important}
.input:focus{box-shadow:none!important;outline:none}
.btn{border-radius:3px!important;font-weight:500!important;font-size:14px!important;box-shadow:none!important;background-image:none!important;min-height:38px;padding:2px 16px}
.btn.primary,.btn.brand{background:var(--accent)!important;color:#fff!important;border:0!important}
.btn.primary:hover,.btn.brand:hover{background:var(--accent-hover)!important}
.btn.danger{background:var(--red)!important;color:#fff!important}
.btn.ghost,.btn.link{background:transparent!important}

/* settings */
.settings,:root:not([data-theme="light"]) .settings{background:var(--chat)!important}
.settings nav{background:var(--side)!important;border:0!important}
.settings nav h6{font-size:12px!important;font-weight:700!important;color:var(--muted)!important}
.settings nav button{border-radius:4px!important;padding:6px 10px!important;font-size:1rem!important;color:var(--muted)!important;background:transparent!important}
.settings nav button:hover{background:var(--hover)!important;color:var(--text-2)!important}
.settings nav button.on{background:var(--active)!important;color:var(--text)!important}
.settings nav button.out{color:#f23f42!important}
.settings .pane h2{font-size:20px!important;font-weight:600!important;color:var(--text)!important}
.settings .pane h3{font-size:12px!important;font-weight:700!important;color:var(--muted)!important}
.toggle{box-shadow:none!important}

/* toasts, misc */
.toast{background:var(--bg-float)!important;border:0!important;border-radius:4px!important;color:var(--text)!important}
.tile,.vc-user{border-radius:8px!important;box-shadow:none!important;background-image:none}
.tile{background-color:var(--bg-0)}
.voice-bar{background:var(--userbar)!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important}
.scroll::-webkit-scrollbar-thumb{background:var(--bg-0)!important}
.chip,.tag{border-radius:4px!important}

/* Super: keep the gradient visible through slightly translucent solid panels */
:root:not([data-theme="light"]).is-super .app>.main{background:rgba(49,51,56,.86)!important}
:root:not([data-theme="light"]).is-super .app>.side,:root:not([data-theme="light"]).is-super .app>.members{background:rgba(43,45,49,.88)!important}
:root:not([data-theme="light"]).is-super .app>.rail{background:rgba(30,31,34,.9)!important}
:root:not([data-theme="light"]).is-super .top{background:transparent!important}

/* phones: drawer stays solid */
@media (max-width:760px){
  .app.drawer .side,.app .side{background:var(--side)!important}
  .msg{padding-right:16px!important}
}

/* ---- upgrade pass: finishing touches ---- */
.pc-note{margin:8px 12px 4px;padding:0}
.pc-note-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--text-2);margin-bottom:4px}
.pc-note textarea{width:100%;box-sizing:border-box;resize:none;border:0;border-radius:4px;background:transparent;color:var(--text-2);font:inherit;font-size:12px;line-height:16px;padding:4px;outline:none;transition:background .12s}
.pc-note textarea:hover{background:var(--hover)}
.pc-note textarea:focus{background:var(--bg-0)}
:focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px}
input:focus-visible,textarea:focus-visible,[contenteditable]:focus-visible{outline:none!important}
*{scrollbar-width:thin;scrollbar-color:var(--bg-0) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--bg-0);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
button,.btn,.ch,.ri .icon,.msg,.mem,.menu-pop .it{transition:background-color .12s ease,color .12s ease,border-color .12s ease,opacity .12s ease}
button:active:not(:disabled),.btn:active:not(:disabled){transform:translateY(1px)}
.modal,.menu-pop,.pop{animation:lk-pop .14s cubic-bezier(.2,.9,.3,1.2)}
@keyframes lk-pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.toast{border-radius:8px!important;box-shadow:0 8px 24px rgba(0,0,0,.35)!important}
.msg:hover{background:rgba(2,2,2,.06)}
[data-theme="light"] .msg:hover{background:rgba(6,6,7,.03)}
img{image-rendering:auto}
::selection{background:rgba(88,101,242,.45)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- server header: normal 48px row; optional banner above it ---- */
.side-head-wrap{position:relative}
.side-head-wrap .side-head,.side-head.has-banner{height:48px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:6px;padding:0 12px 0 16px!important;background:transparent!important;text-shadow:none!important;width:100%;text-align:left}
.side-head .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.side-head::after{display:none!important}
.side-banner-img{height:110px;overflow:hidden;background:var(--bg-0)}
.side-banner-img img{width:100%;height:100%;object-fit:cover;display:block}
.side-head-wrap.with-banner .side-head{position:absolute!important;left:0;right:0;top:0;color:#fff!important;border-bottom:0!important;box-shadow:none!important;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0))!important}
.side-head-wrap.with-banner .side-head .t,.side-head-wrap.with-banner .side-head svg{color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.7)!important}

/* ---- user panel: always show name + status ---- */
.me-bar{display:flex!important;align-items:center!important;gap:2px!important}
.me-bar .who{flex:1 1 auto!important;min-width:0!important;display:flex!important;align-items:center;gap:8px;padding:2px 4px!important;text-align:left}
.me-bar .who>div{display:block!important;min-width:0}
.me-bar .nm,.me-bar .un{display:block!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-bar .nm{font-weight:600!important}
.me-bar .mb-grp{display:inline-flex;flex:none}
/* Discord-like user panel: avatar, bold name over status, then mic ⌄ headphones ⌄ settings */
.me-bar{min-height:52px;padding:0 8px!important;background:#232428!important}
.me-bar .who .av{width:32px!important;height:32px!important;flex:none}
.me-bar .nm{font-size:14px!important;line-height:18px;color:#f2f3f5}
.me-bar .un{font-size:12px!important;line-height:15px;color:#b5bac1}
.me-bar .mb-grp{border-radius:4px}
.me-bar .mb-grp .icon-btn{width:28px!important;height:32px!important}
.me-bar .mb-chev{display:grid!important;width:14px!important;height:32px;margin-left:-4px;color:#b5bac1}
.me-bar .icon-btn{width:32px!important;height:32px!important;flex:none;color:#b5bac1}
.me-bar .icon-btn .ico{width:20px;height:20px}
.me-bar .icon-btn:hover,.me-bar .mb-grp:hover .icon-btn,.me-bar .mb-chev:hover{color:#dbdee1}

/* ---- roomier, Discord-like sizes ---- */
.ch{font-size:16px!important;min-height:32px;box-sizing:border-box}
.cat{text-transform:uppercase}
.mem{min-height:42px}
.mem .nm,.members .nm{font-size:16px!important}
.dm-item,.side .dm{min-height:42px;font-size:16px!important}
.person,.friend-row{min-height:62px}
.person .nm{font-size:16px!important;font-weight:600}
.msg .body,.msg .content,.msg .text{font-size:16px!important;line-height:1.375!important}
.msg .name,.msg .author{font-size:16px!important}
.msg .ts,.msg time{font-size:12px!important}
.main .top{font-size:16px}


/* discover requirements checklist */
.dc{padding:12px 14px}
.dc-row{display:grid;grid-template-columns:20px 1fr auto;grid-template-rows:auto 4px;gap:4px 8px;align-items:center;padding:6px 0;font-size:14px}
.dc-ic{color:var(--red);font-weight:700}.dc-row.ok .dc-ic{color:var(--green)}
.dc-v{color:var(--muted);font-variant-numeric:tabular-nums}
.dc-bar{grid-column:2/4;height:4px;border-radius:2px;background:var(--bg-4);overflow:hidden}
.dc-bar i{display:block;height:100%;background:var(--red)}.dc-row.ok .dc-bar i{background:var(--green)}

/* ===== Call view (Discord-client style, original) ===== */
.vroom{background:#000!important;position:relative;display:flex!important;flex-direction:column!important;min-height:0;overflow:hidden}
.vroom .vhead{flex:none;display:flex;align-items:center;gap:8px;height:48px;padding:0 16px;color:#f2f3f5;font-weight:600;background:linear-gradient(180deg,rgba(0,0,0,.65),transparent);position:relative;z-index:2}
.vroom .vhead .ico{width:20px;height:20px;color:#b5bac1}
.vroom .vhead b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vroom .vhead .vcount{display:inline-flex;align-items:center;gap:4px;margin-left:4px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.08);color:#b5bac1;font-size:12px;font-weight:600}
.vroom .vhead .vcount .ico{width:14px;height:14px}
.vroom .vhead .live,.vroom .tlive{background:#da373c;color:#fff;font-size:11px;font-weight:800;border-radius:4px;padding:1px 6px;letter-spacing:.02em}
.vroom>.grid{flex:1;display:flex!important;flex-wrap:wrap;align-content:center;justify-content:center;gap:8px;padding:8px 16px 96px!important;overflow:auto}
.vroom>.grid>.tile{flex:1 1 300px;max-width:640px;width:auto!important;height:auto!important;aspect-ratio:16/9;min-height:0}
.vroom .tile{position:relative;background:#111214!important;border-radius:8px!important;overflow:hidden;display:grid;place-items:center;cursor:pointer;outline:0;transition:box-shadow .15s}
.vroom .tile .pbg{position:absolute;inset:0;opacity:.9}
.vroom .tile .pbg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.25)}
.vroom .tile>.av{position:relative;z-index:1;width:80px!important;height:80px!important;box-shadow:0 0 0 4px rgba(0,0,0,.25);border-radius:50%;transition:box-shadow .12s}
.vroom .tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.vroom .tile.stile video{object-fit:contain}
.vroom .tile.speaking{box-shadow:inset 0 0 0 3px #23a55a,0 0 0 0 #23a55a!important}
.vroom .tile.speaking>.av{box-shadow:0 0 0 3px #23a55a,0 0 0 6px rgba(35,165,90,.25)}
.vroom .tile .lbl{position:absolute;left:8px;bottom:8px;z-index:2;max-width:calc(100% - 60px);padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vroom .tile .mchip{position:absolute;right:8px;bottom:8px;z-index:2;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.6);display:grid;place-items:center;color:#f23f42}
.vroom .tile .mchip .ico{width:15px;height:15px}
.vroom .tile .tlive{position:absolute;top:8px;left:8px;z-index:2}
.vroom .tile .tfs{position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff;border:0;display:grid;place-items:center;opacity:0;transition:opacity .12s}
.vroom .tile:hover .tfs{opacity:1}
.vroom .vstage{flex:1;display:flex;flex-direction:column;gap:8px;padding:8px 16px 96px;min-height:0}
.vroom .vmain{flex:1;min-height:0;display:flex}
.vroom .vmain>.tile{flex:1;aspect-ratio:auto}
.vroom .vstrip{flex:none;display:flex;gap:8px;justify-content:center;overflow-x:auto;padding-bottom:2px}
.vroom .vstrip>.tile{flex:none;width:176px;aspect-ratio:16/9}
.vroom .vstrip>.tile>.av{width:48px!important;height:48px!important}
/* floating control pill */
.vroom .ctrl.vpill{position:absolute!important;left:50%;bottom:20px;transform:translateX(-50%);z-index:5;display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:8px;padding:8px 12px!important;border-radius:16px!important;background:rgba(17,18,20,.92)!important;border:1px solid rgba(255,255,255,.06)!important;box-shadow:0 8px 24px rgba(0,0,0,.5)!important;margin:0!important;width:auto!important}
.vroom .vpill .vgrp{display:flex;gap:8px;align-items:center}
.vroom .vpill .vsep{width:1px;height:28px;background:rgba(255,255,255,.1)}
.vroom .vpill button{width:48px;height:48px;border-radius:12px!important;border:0;background:#2b2d31!important;color:#f2f3f5!important;display:grid;place-items:center;cursor:pointer;padding:0}
.vroom .vpill button:hover{background:#3a3c42!important}
.vroom .vpill button .ico{width:22px;height:22px}
.vroom .vpill button.on{background:#f2f3f5!important;color:#111214!important}
.vroom .vpill .vsplit{display:flex;border-radius:12px;overflow:hidden;background:#2b2d31}
.vroom .vpill .vsplit>button{border-radius:0!important;background:transparent!important}
.vroom .vpill .vsplit>button:hover{background:#3a3c42!important}
.vroom .vpill .vsplit .vcar{width:24px;font-size:14px;color:#b5bac1!important;border-left:1px solid rgba(255,255,255,.06)}
.vroom .vpill .vsplit.off{background:#4b1e20}
.vroom .vpill .vsplit.off>button[data-v]{color:#f23f42!important}
.vroom .vpill button.end{width:64px;background:#da373c!important;color:#fff!important}
.vroom .vpill button.end:hover{background:#a12d2f!important}
.vroom .join{background:#000;color:#f2f3f5}
.dm-call.vroom{min-height:280px;max-height:60vh;border-bottom:1px solid #000}
.dm-call.vroom>.grid{padding-bottom:88px!important}
@media (max-width:760px){
.vroom>.grid{align-content:flex-start;padding:8px 8px 96px!important}
.vroom>.grid>.tile{flex:1 1 100%}
.vroom .vstage{padding:8px 8px 96px}
.vroom .vstrip>.tile{width:120px}
.vroom .ctrl.vpill{bottom:12px;gap:6px;padding:6px 8px!important;max-width:calc(100% - 16px)}
.vroom .vpill .vgrp{gap:6px}
.vroom .vpill button{width:42px;height:42px}
.vroom .vpill .vsplit .vcar{display:none}
.vroom .vpill button.end{width:50px}
.vroom .vpill .vsep{display:none}
}
/* ===== Soundboard popup ===== */
.snd-pop2{width:min(380px,calc(100vw - 24px));display:flex;flex-direction:column;max-height:min(480px,70vh)}
.snd-pop2 .snd-top{display:flex;align-items:center;gap:10px;padding:6px 4px 10px}
.snd-pop2 .snd-top b{color:var(--text);font-size:16px;flex:none}
.snd-pop2 .snd-q{flex:1;min-width:0;height:30px;border:0;border-radius:6px;background:var(--bg-0);color:var(--text-2);padding:0 10px;font:inherit;font-size:14px;outline:0}
.snd-pop2 .snd-body{overflow:auto;min-height:0;padding:0 2px}
.snd-sec{margin-bottom:10px}
.snd-sh{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--muted);padding:4px 2px 6px}
.snd-pop2 .snd-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:6px}
.snd-pop2 .snd-t{position:relative;display:flex!important;flex-direction:row!important;align-items:center;gap:8px;height:44px;padding:0 10px!important;margin:0!important;border:0;border-radius:8px!important;background:var(--bg-4)!important;color:var(--text-2)!important;cursor:pointer;text-align:left;min-height:0!important}
.snd-pop2 .snd-t:hover{background:var(--accent)!important;color:#fff!important}
.snd-pop2 .snd-t span{font-size:22px;line-height:1;flex:none}
.snd-pop2 .snd-t span img{width:22px;height:22px}
.snd-pop2 .snd-t small{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.snd-pop2 .snd-prev{position:absolute;top:3px;right:4px;font-style:normal;font-size:9px;opacity:0;padding:2px 4px;border-radius:4px;background:rgba(0,0,0,.35);color:#fff}
.snd-pop2 .snd-t:hover .snd-prev{opacity:1}
.snd-pop2 .snd-t.pl{animation:snd-pl .45s ease}
@keyframes snd-pl{30%{transform:scale(.94)}60%{transform:scale(1.04)}}
.snd-hint{font-size:12px;margin:2px 2px 8px}
.snd-foot{display:flex;align-items:center;gap:8px;padding:8px 4px 2px;border-top:1px solid var(--line-2);margin-top:4px;font-size:13px;color:var(--muted)}
.snd-foot input{flex:1;accent-color:var(--accent)}
.snd-foot .snd-vv{min-width:36px;text-align:right}
.snd-float{border-radius:999px!important}
/* ===== Channel list ===== */
.ch .n{display:flex;align-items:center;min-width:0;overflow:hidden;white-space:nowrap}
.ch .ch-emo{flex:none;width:20px;text-align:center;margin-right:4px;font-size:15px;line-height:1}
.ch .ch-emo img{width:16px;height:16px;vertical-align:-2px}
.ch .ch-sep{flex:none;color:var(--faint);margin-right:6px;opacity:.7}
.ch .ch-nm{overflow:hidden;text-overflow:ellipsis}
.ch .tools{display:none;margin-left:auto;gap:4px;align-items:center}
.ch:hover .tools,.ch.on .tools{display:inline-flex}
.ch .tools [role=button]{color:var(--muted);display:grid;place-items:center}
.ch .tools [role=button]:hover{color:var(--text)}
.ch .tools .ico{width:16px;height:16px}
.cat .add{opacity:0;margin-left:auto}
.cat:hover .add{opacity:1}
.cat .chev .ico{width:12px;height:12px}
.cat.closed .chev{transform:rotate(-90deg)}
.ch.sub,.ch-sub{margin-left:28px!important;position:relative}
.ch.sub::before,.ch-sub::before{content:"";position:absolute;left:-14px;top:-6px;width:12px;height:22px;border-left:2px solid var(--line-2);border-bottom:2px solid var(--line-2);border-bottom-left-radius:8px;display:block!important}
.vc-users{padding:0 0 4px 32px!important}
.vc-user{display:flex;align-items:center;gap:8px;padding:3px 8px!important;border-radius:4px!important;color:var(--muted);font-size:14px;cursor:pointer}
.vc-user:hover{background:var(--hover);color:var(--text-2)}
.vc-user .av{width:24px!important;height:24px!important;transition:box-shadow .12s;border-radius:50%}
.vc-user.speaking .av{box-shadow:0 0 0 2px #23a55a}
.vc-user .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-user>.ico{width:14px;height:14px;color:var(--muted)}
/* ===== Chat ===== */
.divider.new{position:relative;display:flex!important;align-items:center;height:0;margin:16px 16px 8px 16px!important;border-top:1px solid #f23f42!important;color:transparent!important;font-size:0!important;background:none!important}
.divider.new::before{display:none!important}
.divider.new::after{content:"NEW";position:absolute;right:0;top:-9px;background:#f23f42;color:#fff;font-size:10px;font-weight:800;line-height:16px;padding:0 4px;border-radius:0 8px 8px 0;letter-spacing:.02em;display:block!important}
.msg.mentioned,.msg.mention-me{background:rgba(240,177,50,.1)!important;position:relative}
.msg.mentioned::before,.msg.mention-me::before{content:""!important;position:absolute!important;left:0;top:0;bottom:0;width:2px!important;background:#f0b132!important;display:block!important}
.reply-ref{display:flex;align-items:center;gap:4px;margin-left:-2px;position:relative}
.msg .reply-ref::before{content:"";position:absolute;left:-36px;top:50%;width:33px;height:12px;border-left:2px solid var(--line-2,#4e5058);border-top:2px solid var(--line-2,#4e5058);border-top-left-radius:6px;box-sizing:border-box}
.typing{min-height:24px;display:flex!important;align-items:center;gap:6px;font-size:13px!important;color:var(--text-2);padding:0 4px}
.typing b{color:var(--text);font-weight:700}
.typing .dots{display:inline-flex;gap:3px;align-items:center}
.typing .dots i{width:6px;height:6px;border-radius:50%;background:var(--text-2);animation:ty-dot 1.2s infinite ease-in-out;display:block}
.typing .dots i:nth-child(2){animation-delay:.15s}.typing .dots i:nth-child(3){animation-delay:.3s}
@keyframes ty-dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-2px)}}

/* ===== QA pass: emoji picker, auth, light theme, phones ===== */
.emoji-pop{background:var(--bg-1)!important;border-radius:8px!important;overflow:hidden}
[data-theme="light"] .emoji-pop{background:#fff!important}
.emoji-pop .es{border-bottom:1px solid var(--line)!important;padding:8px!important}
.emoji-pop .es input{background:var(--bg-0)!important;border:0!important;border-radius:4px!important;height:30px;padding:0 8px;color:var(--text-2)}
[data-theme="light"] .emoji-pop .es input{background:#e3e5e8!important}
.emoji-pop .eg h6{font-size:12px!important;font-weight:600!important;letter-spacing:.02em!important;color:var(--muted)!important}
.emoji-pop .eg button{border-radius:4px!important;background:transparent!important;box-shadow:none!important}
.emoji-pop .eg button:hover{background:var(--hover)!important}
.emoji-pop .ef{background:var(--bg-0)!important;border-top:0!important;color:var(--text-2)!important}
[data-theme="light"] .emoji-pop .ef{background:#f2f3f5!important}
.auth{background:var(--accent)!important}
:root:not([data-theme="light"]) .auth{background:var(--bg-0)!important}
.auth-card{background:var(--bg-1)!important;border:0!important;border-radius:5px!important;box-shadow:0 2px 10px rgba(0,0,0,.2)!important;padding:32px!important}
[data-theme="light"] .auth-card{background:#fff!important}
.auth-card h1,.auth-card h2{color:var(--text)!important;font-weight:600!important}
[data-theme="light"] .modal .mf{background:#f2f3f5!important}
[data-theme="light"] .msg:hover{background:rgba(6,6,7,.02)}
@media (max-width:480px){
  .modal{width:calc(100vw - 32px)!important;max-width:calc(100vw - 32px)!important}
  .emoji-pop{width:min(340px,calc(100vw - 16px))!important}
  .auth-card{padding:24px 16px!important}
  .settings .pane{padding:20px 16px!important}
}

/* ===== Pitch-black default dark theme (AMOLED) ===== */
:root:not([data-theme="light"]){
  --bg-0:#000; --bg-1:#050505; --bg-2:#000; --bg-3:#0d0d0d; --bg-4:#141414; --bg-float:#050505; --code:#0a0a0a;
  --rail:#000; --side:#000; --chat:#000; --mem:#000; --inp:#0d0d0d; --userbar:#050505;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.09);
  --hover:rgba(255,255,255,.06); --active:rgba(255,255,255,.10);
}
:root:not([data-theme="light"]):not(.is-super) body,:root:not([data-theme="light"]):not(.is-super) .app{background:#000!important}
:root:not([data-theme="light"]) .app>.rail{border-right:1px solid var(--line)!important}
:root:not([data-theme="light"]) .app>.side{border-right:1px solid var(--line)!important}
:root:not([data-theme="light"]) .app>.members{border-left:1px solid var(--line)!important}
:root:not([data-theme="light"]) .top,:root:not([data-theme="light"]) .side-head{border-bottom:1px solid var(--line)!important;box-shadow:none!important}
:root:not([data-theme="light"]) .me-bar{background:#050505!important;border-top:1px solid var(--line)!important}
:root:not([data-theme="light"]) .voice-bar,:root:not([data-theme="light"]) .vb-share{background:#050505!important}
:root:not([data-theme="light"]) .box,:root:not([data-theme="light"]) .search input,:root:not([data-theme="light"]) .input,:root:not([data-theme="light"]) .field input,:root:not([data-theme="light"]) .field textarea,:root:not([data-theme="light"]) .field select,:root:not([data-theme="light"]) .snd-q{background:#0d0d0d!important;border:1px solid var(--line)!important}
:root:not([data-theme="light"]) .reply-bar,:root:not([data-theme="light"]) .tray{background:#0a0a0a!important;border:1px solid var(--line)!important;border-bottom:0!important}
:root:not([data-theme="light"]) .pop,:root:not([data-theme="light"]) .menu-pop,:root:not([data-theme="light"]) .modal,:root:not([data-theme="light"]) .tip,:root:not([data-theme="light"]) .toast,:root:not([data-theme="light"]) .pcard,:root:not([data-theme="light"]) .msg .acts{background:#050505!important;border:1px solid var(--line-2)!important}
:root:not([data-theme="light"]) .pcard .pinner{background:#0a0a0a!important;border:1px solid var(--line)!important}
:root:not([data-theme="light"]) .modal .mf{background:#050505!important;border-top:1px solid var(--line)!important}
:root:not([data-theme="light"]) .settings,:root:not([data-theme="light"]) .settings nav,:root:not([data-theme="light"]) .settings .pane{background:#000!important}
:root:not([data-theme="light"]) .settings nav{border-right:1px solid var(--line)!important}
:root:not([data-theme="light"]) .ri .icon{background:#0d0d0d!important}
:root:not([data-theme="light"]) .rail .sep{background:var(--line-2)!important}
:root:not([data-theme="light"]) .msg:hover{background:rgba(255,255,255,.03)!important}
:root:not([data-theme="light"]) .embed,:root:not([data-theme="light"]) .react{background:#0a0a0a!important}
:root:not([data-theme="light"]) .vroom .tile{background:#0a0a0a!important}
:root:not([data-theme="light"]) .vroom .ctrl.vpill{background:rgba(5,5,5,.94)!important;border-color:var(--line-2)!important}
:root:not([data-theme="light"]) .vroom .vpill button,:root:not([data-theme="light"]) .vroom .vpill .vsplit{background:#141414!important}
:root:not([data-theme="light"]) .vroom .vpill .vsplit>button{background:transparent!important}
:root:not([data-theme="light"]) .vroom .vpill button:hover{background:#1f1f1f!important}
:root:not([data-theme="light"]) .vroom .vpill button.end{background:#da373c!important}
:root:not([data-theme="light"]) .snd-pop2 .snd-t{background:#141414!important}
:root:not([data-theme="light"]) .snd-pop2 .snd-t:hover{background:var(--accent)!important}
:root:not([data-theme="light"]) ::-webkit-scrollbar-thumb{background:#1a1a1a}
/* ===== Subtle server tag chip ===== */
.stag,.tg{display:inline-flex!important;align-items:center;gap:4px;margin-left:5px!important;padding:0 6px 0 4px!important;height:18px!important;border-radius:4px!important;background:rgba(255,255,255,.08)!important;border:0!important;box-shadow:none!important;color:#f2f3f5!important;font:700 11px/18px "Noto Sans",Inter,system-ui,sans-serif!important;letter-spacing:.04em!important;vertical-align:1px!important;text-shadow:none!important;white-space:nowrap}
.stag .pxb,.tg .pxb,.stag img,.tg img,.stag svg,.tg svg{width:16px!important;height:16px!important;flex:none;image-rendering:pixelated}
.stag i,.tg i{font-size:11px!important}
[data-theme="light"] .stag,[data-theme="light"] .tg{background:rgba(0,0,0,.07)!important;color:#313338!important}

/* ===== Sidebar polish (rail + channel list) ===== */
:root:not([data-theme="light"]) .app>.rail{background:#000!important}
.rail .ri{position:relative}
.ri .pip{position:absolute;left:-12px!important;top:50%!important;width:4px!important;height:0;margin-top:0!important;transform:translateY(-50%);background:#fff!important;border-radius:0 4px 4px 0!important;transition:height .15s ease,opacity .15s;opacity:0}
.ri.unread .pip,.ri.has-unread .pip{height:8px;opacity:1}
.ri:hover .pip{height:20px;opacity:1}
.ri.on .pip{height:40px;opacity:1}
.ri .badge{background:#f23f42!important;border:3px solid #000!important;font-weight:800!important;min-width:20px;height:20px;line-height:14px}
:root:not([data-theme="light"]) .ri .icon{background:#111113!important}
:root:not([data-theme="light"]) .ri:hover .icon:not(:has(img)),:root:not([data-theme="light"]) .ri.on .icon:not(:has(img)){background:var(--accent)!important}
.app>.side .side-list{padding:8px 8px 12px!important}
.cat{display:flex!important;align-items:center;gap:2px;width:100%;padding:18px 6px 6px 2px!important;font-size:11.5px!important;font-weight:700!important;letter-spacing:.04em!important;color:#8b8e96!important;background:none!important;border:0!important;cursor:pointer}
.cat:first-of-type{padding-top:12px!important}
.cat:hover{color:#dbdee1!important}
.cat .t{order:1}
.cat .chev{order:2;display:inline-grid;margin-left:2px;transition:transform .15s}
.cat .sp{order:3;flex:1}
.cat .add{order:4;color:#8b8e96;display:grid;place-items:center}
.cat .add:hover{color:#fff}
.cat .add .ico{width:16px;height:16px}
.ch{position:relative;display:flex!important;align-items:center;gap:6px;height:34px;min-height:34px!important;padding:0 8px!important;margin:1px 0!important;border-radius:6px!important;color:#8b8e96!important;font-weight:500!important}
.ch>.ico{width:20px;height:20px;flex:none;opacity:1!important;color:#6d6f78!important}
:root:not([data-theme="light"]) .ch:hover{background:rgba(255,255,255,.05)!important;color:#dbdee1!important}
:root:not([data-theme="light"]) .ch.on{background:rgba(255,255,255,.10)!important;color:#fff!important}
.ch.on>.ico{color:#dbdee1!important}
.ch.unread{color:#fff!important;font-weight:700!important}
.ch.unread>.ico{color:#dbdee1!important}
.ch.unread::before{content:"";position:absolute;left:-8px;top:50%;width:4px;height:8px;margin-top:-4px;background:#fff;border-radius:0 4px 4px 0;display:block!important}
.ch.muted{opacity:.45}
.ch .mb{margin-left:auto;min-width:16px;height:16px;padding:0 5px;border-radius:8px!important;background:#f0b132!important;color:#000!important;font-size:11px;font-weight:800;line-height:16px;text-align:center}
.ch:hover .mb,.ch.on .mb{display:none}
.ch .tools{margin-left:auto}
.ch.lobby-link,.invite-pill{border-radius:6px!important}
:root:not([data-theme="light"]) .side .invite-pill{background:transparent!important;border:1px solid var(--line)!important}
.vc-users{position:relative;padding:2px 0 6px 30px!important}
.vc-user{height:30px;padding:0 8px!important;gap:8px!important;color:#8b8e96!important;font-size:14px!important;font-weight:500}
.vc-user:hover{background:rgba(255,255,255,.05)!important;color:#dbdee1!important}
.vc-user .live{background:#da373c;color:#fff;font-size:10px;font-weight:800;border-radius:4px;padding:0 5px;line-height:16px}

/* ---- Discord-style profile popout (pc2): one solid card, actions on the banner ---- */
.pcard.pc2{background:#000;border:1px solid #1f1f23;width:340px;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.6)}
.pcard.pc2.themed{background:color-mix(in srgb,var(--p1) 22%,#000);border-color:color-mix(in srgb,var(--p1) 45%,#000)}
.pcard.pc2 .banner{height:120px;position:relative}
.pc2-acts{position:absolute;top:10px;right:10px;display:flex;gap:6px}
.pc2-rb{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.72);color:#fff;border:0;cursor:pointer}
.pc2-rb .ico{width:18px;height:18px}
.pc2-rb:hover:not([disabled]){background:rgba(0,0,0,.9)}
.pc2-rb[disabled]{opacity:.7;cursor:default}
.pcard.pc2 .pav{margin:-46px 0 0 14px;border:6px solid #000;border-radius:50%}
.pcard.pc2.themed .pav,.pcard.pc2.themed .pav .av .st{border-color:color-mix(in srgb,var(--p1) 22%,#000)}
.pcard.pc2 .pav .av .st{border-color:#000}
.pcard.pc2 .pb{padding:6px 16px 16px;display:flex;flex-direction:column;gap:8px}
.pc2-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pcard.pc2 .pc2-name h3{font-size:20px;font-weight:800;margin:0;color:#fff;line-height:1.2}
.pcard.pc2 .pc2-name .badges{margin:0;display:flex;gap:2px;flex-wrap:wrap}
.pc2-sub{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:14px;color:#dbdee1;margin-top:-6px}
.pc2-dot{color:#80848e}
.pc2-mut:empty{display:none}
.pc2-mutbtn{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;color:#b5bac1;font:500 13px/1.3 inherit;cursor:pointer;text-align:left}
.pc2-mutbtn:hover span:last-child{text-decoration:underline;color:#fff}
.pc2-stack{display:flex}
.pc2-stack > *{margin-left:-6px;border-radius:50%;box-shadow:0 0 0 2px #000}
.pc2-stack > *:first-child{margin-left:0}
.pc2-bio{font-size:14px;color:#dbdee1;white-space:pre-wrap;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-break:break-word}
.pc2-bio.open{display:block;-webkit-line-clamp:unset}
.pc2-bio a{color:#00a8fc}
.pc2-more{align-self:flex-start;background:none;border:0;padding:0;color:#fff;font:600 13px inherit;cursor:pointer;margin-top:-4px}
.pc2-more:hover{text-decoration:underline}
.pc2-lines{display:flex;flex-direction:column;gap:3px;font-size:13px;color:#b5bac1}
.pcard.pc2 h6{display:none}
.pc2-lines > *,.pcard.pc2 .pw-streak,.pcard.pc2 .pw-act,.pcard.pc2 .pw-row,.pcard.pc2 .pw-card{margin:0;padding:0;background:none;border:0;font-size:13px;color:#b5bac1;box-shadow:none}
.pcard.pc2 .pw-card{display:block}
.pcard.pc2 .pw-act small{margin-left:4px;color:#80848e}
.pc2-line span{color:#dbdee1}
.pc2-note{color:#dbdee1}
.pcard.pc2 .f3-conn{padding:0;background:none;margin:0}
.pcard.pc2 .roles{display:flex;flex-wrap:wrap;gap:4px}
.pcard.pc2 .roles .chip{background:#1a1a1e;border:1px solid #2a2a30;border-radius:6px;padding:2px 7px;font-size:12px;display:inline-flex;align-items:center;gap:5px;color:#dbdee1}
.pcard.pc2 .roles .chip i{width:10px;height:10px;border-radius:50%;display:inline-block}
.pcard.pc2 .send{margin:4px 0 0}
.pc2-send{position:relative;display:flex;align-items:center}
.pc2-send .input{flex:1;background:#111214;border:1px solid #26262b;border-radius:8px;padding:10px 40px 10px 12px;font-size:14px}
.pc2-emo{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:#b5bac1;cursor:pointer;padding:4px;display:grid}
.pc2-emo:hover{color:#fff}
.pc2-emo .ico{width:20px;height:20px}
.pcard.pc2 .pbubble{left:108px}
.pc2-tabs{display:flex;gap:16px;border-bottom:1px solid #26262b;margin-bottom:10px}
.pc2-tabs button{background:none;border:0;padding:8px 0;color:#b5bac1;font:600 14px inherit;cursor:pointer;border-bottom:2px solid transparent}
.pc2-tabs button.on{color:#fff;border-bottom-color:#fff}
.pc2-list{display:flex;flex-direction:column;gap:2px;max-height:50vh;overflow-y:auto}
.pc2-li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;background:none;border:0;color:#dbdee1;cursor:pointer;text-align:left}
.pc2-li:hover{background:#1a1a1e}
.pc2-li small{display:block;color:#80848e;font-size:12px}
.pc2-li img,.pc2-li > i{width:32px;height:32px;border-radius:10px;object-fit:cover;display:grid;place-items:center;font-style:normal;font-weight:700;color:#fff;font-size:12px}
@media (max-width:420px){.pcard.pc2{width:min(340px,calc(100vw - 32px))}}
@media (max-width:600px){.pcard-pop{position:fixed!important;left:50%!important;right:auto!important;top:auto!important;bottom:12px!important;transform:translateX(-50%)!important;max-height:calc(100dvh - 24px);overflow-y:auto;border-radius:12px}}

/* ===== Chat polish v2 ===== */
.msg{margin-top:16px!important;padding-top:2px!important;padding-bottom:2px!important}
.msg.compact{margin-top:0!important;padding-top:1px!important;padding-bottom:1px!important}
:root:not([data-theme="light"]) .msg:hover{background:rgba(255,255,255,.035)!important}
.msg .name{font-size:16px!important;font-weight:600!important;line-height:22px}
.msg .ts{font-size:12px!important;color:#80848e!important;font-weight:400!important;margin-left:6px!important;vertical-align:baseline}
.msg .stag,.msg .bdg,.msg .badges{vertical-align:baseline!important;position:relative;top:-1px}
.msg .gut .hts{opacity:0;font-size:11px!important;color:#80848e!important;text-align:right}
.msg:hover .gut .hts{opacity:1}
/* reply preview with spine */
.msg .reply-ref{position:relative!important;display:flex!important;align-items:center;gap:4px;min-width:0;height:20px;margin:0 0 2px 0!important;padding-left:56px!important;font-size:14px!important;color:#b5bac1;cursor:pointer;white-space:nowrap}
.msg .reply-ref::before{content:""!important;position:absolute!important;left:20px!important;top:10px!important;width:32px!important;height:12px!important;border-left:2px solid #4e5058!important;border-top:2px solid #4e5058!important;border-right:0!important;border-bottom:0!important;border-top-left-radius:6px!important;box-sizing:border-box;display:block!important;background:none!important;margin:0!important}
.msg .reply-ref .av,.msg .reply-ref .av img{width:16px!important;height:16px!important;flex:none}
.msg .reply-ref b{flex:none;font-weight:600;font-size:14px;color:#f2f3f5;opacity:.9}
.msg .reply-ref>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#a3a6aa}
.msg .reply-ref:hover>span{color:#fff}
.msg .reply-ref:hover b{opacity:1;text-decoration:underline}
/* NEW divider */
.divider.new{position:relative!important;display:block!important;height:0!important;margin:14px 16px 6px!important;padding:0!important;border:0!important;border-top:1px solid #f0a020!important;color:transparent!important;font-size:0!important;background:none!important;overflow:visible}
.divider.new::before{display:none!important}
.divider.new::after{content:"NEW"!important;position:absolute!important;right:0;top:-8px;height:16px;padding:0 5px 0 4px;background:#f0a020!important;color:#1a1100!important;font-size:10px!important;font-weight:800!important;line-height:16px!important;letter-spacing:.03em;border-radius:0 8px 8px 0!important;display:block!important}
.divider.new::after{clip-path:polygon(4px 0,100% 0,100% 100%,4px 100%,0 50%)}
/* mention highlight */
.msg.mentioned,.msg.mention-me{background:rgba(240,160,32,.08)!important}
.msg.mentioned:hover,.msg.mention-me:hover{background:rgba(240,160,32,.12)!important}
.msg.mentioned::before,.msg.mention-me::before{background:#f0a020!important;width:2px!important}
.mention:not(.role){background:rgba(240,160,32,.16)!important;color:#ffc46b!important;border-radius:3px!important;padding:0 2px!important}
.mention:not(.role):hover{background:rgba(240,160,32,.32)!important;color:#ffe0ad!important}
/* composer */
:root:not([data-theme="light"]) .composer .box{background:#1a1b1e!important;border:1px solid rgba(255,255,255,.06)!important;border-radius:8px!important;min-height:44px}
.composer .box textarea{padding-top:11px!important;padding-bottom:11px!important}
.pcard-pop{max-height:calc(100vh - 24px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.pcard.pc2{overflow:hidden!important;contain:paint}
.pcard.pc2 .pfx{inset:0;overflow:hidden}
.pc2-fullbio{white-space:pre-wrap;word-break:break-word;color:#dbdee1;font-size:14px;max-height:60vh;overflow-y:auto}
.pc2-fullbio a{color:#00a8fc}
/* activity: Discord-style card, SVG icons only */
.act-ic{width:14px;height:14px;flex:none;vertical-align:-2px;margin-right:4px;opacity:.85}
.acard{background:#1e1f22;border-radius:8px;padding:10px 12px 12px;margin:2px 0;color:#dbdee1}
.pcard.pc2 .pc2-lines > .acard{background:#1e1f22;padding:10px 12px 12px;border-radius:8px}
.acard-h{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#dbdee1;margin-bottom:8px}
.acard-h b{font-weight:700}
.acard-more{background:none;border:0;color:#b5bac1;cursor:pointer;padding:2px;display:grid;border-radius:4px}
.acard-more:hover{color:#fff;background:#2b2d31}
.acard-more .ico{width:16px;height:16px}
.acard-b{display:flex;gap:12px;align-items:center}
.acard-art{width:64px;height:64px;border-radius:8px;background:#2b2d31;display:grid;place-items:center;flex:none;overflow:hidden;color:#b5bac1}
.acard-art img{width:100%;height:100%;object-fit:cover}
.acard-art .ico{width:32px;height:32px}
.acard-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.acard-t b{font-size:14px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acard-t small{font-size:12px;color:#b5bac1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acard-el{display:flex;align-items:center;gap:4px;color:#3ba55c!important}
.acard-el .ico{width:13px;height:13px}
.acard-prog{height:4px;border-radius:2px;background:#4e5058;margin-top:6px;overflow:hidden}
.acard-prog i{display:block;height:100%;background:#fff}
.acard-times{display:flex;justify-content:space-between;font-size:11px;color:#b5bac1}

/* ===== Profile popout: one-line mutual row, clipped effects ===== */
.pc2-mut{min-width:0;max-width:100%;overflow:hidden}
.pc2-mutbtn{flex-wrap:nowrap!important;white-space:nowrap!important;max-width:100%;min-width:0;gap:6px!important;font-size:13px!important;line-height:18px!important}
.pc2-mutbtn>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc2-stack{flex:none}
.pc2-stack>*,.pc2-stack .av,.pc2-stack img{width:18px!important;height:18px!important;min-width:18px}
.pc2-stack>*{margin-left:-6px!important}
.pc2-stack>*:first-child{margin-left:0!important}
.pcard{position:relative}
.pcard:has(.pfx){overflow:hidden}
.pcard .pfx{border-radius:inherit}
/* ---- popout fit v3: card is the scroll container; banner + avatar stay put, body scrolls ---- */
.pop.pcard-pop{max-height:none;overflow:visible}
.pcard.pc2{display:flex;flex-direction:column;max-height:calc(100vh - 24px);position:relative;overflow:hidden!important;contain:paint}
.pcard.pc2 > .banner,.pcard.pc2 > .pav{flex:none}
.pcard.pc2 > .pb{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.pcard.pc2 .pfx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.pcard.pc2 > .banner,.pcard.pc2 > .pav,.pcard.pc2 > .pb{position:relative;z-index:1}
/* mutual row: always one line */
.pc2-mutbtn{white-space:nowrap;max-width:100%;overflow:hidden;font-size:13px}
.pc2-multx{overflow:hidden;text-overflow:ellipsis;min-width:0}
.pc2-stack .av{width:16px!important;height:16px!important}
/* bio: always 3 lines until expanded; stands out a bit */
.pcard.pc2 .pc2-bio{margin-top:8px;padding-top:12px;border-top:1px solid #232428;color:#dbdee1;font-size:14px;line-height:1.4;-webkit-line-clamp:3;max-height:calc(1.4em * 3)}
.pcard.pc2 .pc2-bio *{margin:0}
.pcard.pc2 .pc2-bio.open{max-height:none;-webkit-line-clamp:unset;display:block}
.pc2-note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pw-streak{display:flex;align-items:center}
/* custom status: Discord-style thought bubble beside the avatar */
.pcard.pc2 .pbubble{position:absolute;left:112px;top:92px;z-index:2;max-width:200px;background:#232428;color:#dbdee1;border:0;border-radius:8px;padding:6px 10px;font:500 14px/1.3 inherit;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:visible;white-space:normal;word-break:break-word;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.pcard.pc2 .pbubble::before,.pcard.pc2 .pbubble::after{content:"";position:absolute;background:#232428;border-radius:50%}
.pcard.pc2 .pbubble::before{width:10px;height:10px;left:-8px;bottom:-4px}
.pcard.pc2 .pbubble::after{width:6px;height:6px;left:-16px;bottom:-10px}
.pcard.pc2 .pbubble.add{color:#b5bac1;display:flex;align-items:center;gap:4px;cursor:pointer}
.pcard.pc2 .pbubble.add .ico{width:14px;height:14px}
.pcard.pc2 .pbubble.mine{cursor:pointer}
@media (max-width:420px){.pcard.pc2 .pbubble{max-width:calc(100% - 128px)}}
/* status icons (Discord shapes): ring color cuts into the avatar */
:root{--ring:#000}
.av .st{--ring-c:var(--ring)}
.av .st.online{background:#23a55a!important}
.av .st.idle{background:radial-gradient(circle at 22% 22%,var(--ring-c) 0 38%,#f0b232 40%)!important}
.av .st.dnd{background:linear-gradient(#fff,#fff) center/58% 24% no-repeat,#f23f43!important}
.av .st.offline,.av .st.invisible{background:radial-gradient(circle,var(--ring-c) 0 34%,#80848e 37%)!important}
.pcard.pc2.themed .av .st{--ring-c:color-mix(in srgb,var(--p1) 22%,#000)}
.pcard.pc2 .pbubble{display:block}
.pcard.pc2 .pbubble.add{display:flex}
.pcard.pc2 .pb-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ---- home sidebar (Discord style) ---- */
.side-head.hs-head{padding:10px 10px;height:auto;border-bottom:1px solid #1a1a1e;box-shadow:none}
.hs-find{width:100%;height:30px;border-radius:8px;background:#1e1f22;color:#949ba4;border:0;font:500 14px inherit;text-align:center;cursor:pointer;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-find:hover{color:#dbdee1}
.hs-list{padding-top:4px}
.hs-sep{height:1px;background:#1e1f22;margin:6px 10px}
.ch.nav.hs-row{height:42px;padding:0 12px 0 14px;gap:14px;border-radius:8px;margin:1px 8px;color:#949ba4;font-size:16px;font-weight:500}
.ch.nav.hs-row .ico{width:24px;height:24px;flex:none}
.ch.nav.hs-row:hover{background:#1a1a1e;color:#dbdee1}
.ch.nav.hs-row.on{background:#26262b;color:#fff}
.hs-pill{margin-left:auto;background:#f23f43;color:#fff;font:700 12px/1 inherit;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:grid;place-items:center}
.cat.hs-dmh{padding:14px 10px 6px 18px}
.cat.hs-dmh .t{font-size:12px;text-transform:none;letter-spacing:0;font-weight:600;color:#949ba4}
.cat.hs-dmh:hover .t{color:#dbdee1}
.side-head.hs-head{display:block}
.side-head.hs-head .hs-find{display:block;width:100%!important;max-width:none!important;margin:0!important;flex:1 1 auto}

/* ===== Dark theme: lifted slightly (still black, never grey) ===== */
:root:not([data-theme="light"]){
  --bg-0:#050506; --bg-1:#0e0e10; --bg-2:#0b0b0c; --bg-3:#141416; --bg-4:#1a1a1d; --bg-float:#141416; --code:#101012;
  --rail:#050506; --side:#08080a; --chat:#0b0b0c; --mem:#08080a; --inp:#141416; --userbar:#0e0e10;
  --line:#1f1f22; --line-2:#26262a;
  --hover:#1a1a1d; --active:#202024;
}
:root:not([data-theme="light"]):not(.is-super) body,:root:not([data-theme="light"]):not(.is-super) .app{background:#050506!important}
:root:not([data-theme="light"]) .app>.rail,:root:not([data-theme="light"]) .rail{background:#050506!important}
:root:not([data-theme="light"]):not(.is-super) .app>.side,:root:not([data-theme="light"]):not(.is-super) .app>.members{background:#08080a!important}
:root:not([data-theme="light"]):not(.is-super) .app>.main,:root:not([data-theme="light"]):not(.is-super) .main .top,:root:not([data-theme="light"]) .settings .pane,:root:not([data-theme="light"]) .settings{background:#0b0b0c!important}
:root:not([data-theme="light"]) .settings nav{background:#08080a!important}
:root:not([data-theme="light"]) .me-bar,:root:not([data-theme="light"]) .voice-bar,:root:not([data-theme="light"]) .vb-share{background:#0e0e10!important}
:root:not([data-theme="light"]) .box,:root:not([data-theme="light"]) .composer .box,:root:not([data-theme="light"]) .search input,:root:not([data-theme="light"]) .input,:root:not([data-theme="light"]) .field input,:root:not([data-theme="light"]) .field textarea,:root:not([data-theme="light"]) .field select,:root:not([data-theme="light"]) .snd-q{background:#141416!important;border-color:#1f1f22!important}
:root:not([data-theme="light"]) .reply-bar,:root:not([data-theme="light"]) .tray{background:#111113!important}
:root:not([data-theme="light"]) .pop,:root:not([data-theme="light"]) .menu-pop,:root:not([data-theme="light"]) .modal,:root:not([data-theme="light"]) .tip,:root:not([data-theme="light"]) .toast,:root:not([data-theme="light"]) .pcard,:root:not([data-theme="light"]) .msg .acts,:root:not([data-theme="light"]) .modal .mf{background:#141416!important;border-color:#26262a!important}
:root:not([data-theme="light"]) .pcard .pinner,:root:not([data-theme="light"]) .embed,:root:not([data-theme="light"]) .react{background:#1a1a1d!important}
:root:not([data-theme="light"]) .ri .icon{background:#141416!important}
:root:not([data-theme="light"]) .ch:hover,:root:not([data-theme="light"]) .vc-user:hover,:root:not([data-theme="light"]) .mem:hover{background:#1a1a1d!important}
:root:not([data-theme="light"]) .ch.on{background:#222226!important}
:root:not([data-theme="light"]) .msg:hover{background:#0f0f11!important}
:root:not([data-theme="light"]) .snd-pop2 .snd-t{background:#1a1a1d!important}
:root:not([data-theme="light"]) .vroom .tile{background:#141416!important}
:root:not([data-theme="light"]) .msg.mentioned,:root:not([data-theme="light"]) .msg.mention-me{background:rgba(240,160,32,.08)!important}:root:not([data-theme="light"]) .msg.mentioned:hover,:root:not([data-theme="light"]) .msg.mention-me:hover{background:rgba(240,160,32,.12)!important}
/* discover: Servers | Apps tabs + app cards */
.dtabs{display:flex;gap:6px;padding:16px 24px 0}
.dtabs button{background:#111214;border:1px solid #26262b;color:#b5bac1;border-radius:8px;padding:6px 16px;font:600 14px inherit;cursor:pointer}
.dtabs button.on{background:#26262b;color:#fff}
.dapp{padding:16px;display:flex;flex-direction:column;gap:10px;cursor:pointer;background:#0b0b0d;border:1px solid #1f1f23}
.dapp:hover{border-color:#2f2f36}
.dapp p{color:#b5bac1;font-size:13px;margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dapp .btn{align-self:flex-start}
.dapp-h{display:flex;gap:12px;align-items:center}
.dapp-h h4{margin:0;font-size:15px;color:#fff}
.dapp-h small{color:#949ba4;font-size:12px}
.dapp-pop{padding:14px;width:min(320px,90vw);display:flex;flex-direction:column;gap:8px;background:#000}
.dapp-pop p{color:#dbdee1;font-size:14px;margin:0}
.dapp-pop h6{margin:6px 0 0;font-size:12px;color:#949ba4}
.dapp-pop ul{margin:0;padding-left:18px;color:#dbdee1;font-size:13px}
.dapp-pop .btn{align-self:flex-start;margin-top:6px}
/* AN spoiler media */
.spoil-media{position:relative;display:inline-block;overflow:hidden;border-radius:8px;cursor:pointer;max-width:100%}
.spoil-media > img,.spoil-media > video,.spoil-media > .blurwrap{filter:blur(44px);transform:scale(1.08);pointer-events:none}
.spoil-media > b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.75);color:#fff;font:800 13px/1 inherit;letter-spacing:.06em;padding:8px 12px;border-radius:20px}
.spoil-media.shown > img,.spoil-media.shown > video,.spoil-media.shown > .blurwrap{filter:none;transform:none;pointer-events:auto}
.tray .tile{position:relative}
.tray .tray-sp{position:absolute;left:4px;top:4px;width:26px;height:26px;border-radius:6px;background:rgba(0,0,0,.7);color:#fff;border:0;display:grid;place-items:center;cursor:pointer}
.tray .tray-sp.on{background:#e8792b}
.tray .tray-sp .ico{width:15px;height:15px}
/* AU role icons, AT cake */
.ricon,.bday{display:inline-flex;align-items:center;margin-left:4px;vertical-align:-3px}
.ricon svg{width:16px;height:16px;image-rendering:pixelated}
.bday .ico{width:16px;height:16px;color:#e8792b}
.f3-ri{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #1e1f22}
.f3-ri b{flex:1}
.f3-ripop{display:grid;grid-template-columns:repeat(6,32px);gap:4px;padding:8px;max-height:260px;overflow:auto}
.f3-ripop button{width:32px;height:32px;border:0;border-radius:6px;background:#1a1a1e;display:grid;place-items:center;cursor:pointer}
.f3-ripop button:hover{background:#2b2d31}
/* AQ Super-only frame: a subtle animated ring around the profile card */
@property --sang{syntax:'<angle>';inherits:false;initial-value:0deg}
.pcard.pc2.is-super{border:0;padding:1.5px;background:conic-gradient(from var(--sang),#ff73fa,#7b9cff,#4fe3c1,#ff73fa);animation:superFrame 6s linear infinite}
.pcard.pc2.is-super > *{background-clip:padding-box}
.pcard.pc2.is-super::before{content:"";position:absolute;inset:1.5px;border-radius:11px;background:#000;z-index:0;pointer-events:none}
.pcard.pc2.is-super.themed::before{background:color-mix(in srgb,var(--p1) 22%,#000)}
@keyframes superFrame{to{--sang:360deg}}
@media (prefers-reduced-motion:reduce){.pcard.pc2.is-super{animation:none}}
/* BB Go Live preview */
.f3-thumb{display:block;width:calc(100% - 40px);margin:2px 0 6px 34px;border-radius:6px;border:1px solid #26262b;aspect-ratio:16/9;object-fit:cover;background:#111}
/* BD IRC mode */
body.irc .msg{display:flex;align-items:baseline;gap:6px;padding-top:1px!important;padding-bottom:1px!important;min-height:0!important}
body.irc .msg .gut{position:static!important;width:auto!important;flex:none}
body.irc .msg .gut .av,body.irc .msg .gut > span[data-profile]{display:none}
body.irc .msg .gut .hts{display:inline!important;opacity:1!important;font-size:12px;color:#80848e}
body.irc .msg .mb{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;min-width:0}
body.irc .msg .head{display:inline-flex;align-items:baseline;gap:4px;margin:0}
body.irc .msg .head .ts{order:-1;margin:0 4px 0 0}
body.irc .msg .head .name::before{content:"<";color:#80848e}
body.irc .msg .head .name::after{content:">";color:#80848e}
body.irc .msg .content{display:inline}
body.irc .msg.compact .mb::before{content:"";display:inline-block;width:0}

/* ===== Profile popout: thought bubble fix ===== */
.pcard.pc2 .pav{width:max-content!important;max-width:max-content!important;display:block;line-height:0}
.pcard.pc2 .pbubble{left:116px!important;top:82px!important;display:block!important;max-width:calc(100% - 132px)!important;padding:6px 10px!important;border-radius:10px!important;background:#232428!important;color:#e3e5e8!important;border:0!important;overflow:visible!important;white-space:nowrap!important;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));box-shadow:none!important;z-index:3}
.pcard.pc2 .pbubble .pb-t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard.pc2 .pbubble.add{display:flex!important}
.pcard.pc2 .pbubble::before,.pcard.pc2 .pbubble::after{content:""!important;position:absolute!important;background:#232428!important;border-radius:50%!important;display:block!important;top:auto!important;right:auto!important}
.pcard.pc2 .pbubble::before{width:10px!important;height:10px!important;left:-7px!important;bottom:-5px!important}
.pcard.pc2 .pbubble::after{width:6px!important;height:6px!important;left:-15px!important;bottom:-11px!important}

/* ===== Rich composer input + Discord-blue mention chips ===== */
.rinput{position:relative;flex:1;min-width:0;min-height:22px;max-height:40vh;overflow-y:auto;padding:11px 4px;outline:none;font-size:16px;line-height:22px;color:var(--text-2);white-space:pre-wrap;word-break:break-word;cursor:text}
.box .rinput{align-self:center}
.rinput.empty::before,.rinput:empty::before{content:attr(data-ph);color:#6d6f78;pointer-events:none;position:absolute}
.edit-box .rinput{background:#141416;border:1px solid #1f1f22;border-radius:8px;padding:10px 12px;margin:4px 0}
.mchip{display:inline;padding:0 2px;border-radius:3px;background:rgba(88,101,242,.3);color:#c9cdfb;font-weight:500;cursor:pointer;user-select:all;-webkit-user-select:all;white-space:nowrap}
.mchip:hover{background:#5865f2;color:#fff}
.mchip.role{color:var(--rc,#c9cdfb);background:color-mix(in srgb,var(--rc,#5865f2) 18%,transparent)}
.rinput ::selection{background:rgba(88,101,242,.45)}
.mention:not(.role){background:rgba(88,101,242,.3)!important;color:#c9cdfb!important;border-radius:3px!important;padding:0 2px!important}
.mention:not(.role):hover{background:#5865f2!important;color:#fff!important}
[data-theme="light"] .mention:not(.role),[data-theme="light"] .mchip{background:rgba(88,101,242,.15)!important;color:#4752c4!important}

/* ===== Server header menu (Discord-style) ===== */
.srv-menu .menu-pop,.srv-menu-pop{width:100%!important;min-width:0!important;box-sizing:border-box;padding:8px!important;border-radius:8px!important;background:#141416!important;border:1px solid #26262a!important;box-shadow:0 12px 32px rgba(0,0,0,.55)!important}
.srv-menu .menu-pop>button{display:flex!important;align-items:center;gap:10px;min-height:40px!important;padding:0 8px!important;margin:0!important;border-radius:4px!important;font-size:15px!important;font-weight:500!important;color:#dbdee1!important}
.srv-menu .menu-pop>button .lbl{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important;gap:10px;flex:1;min-width:0;flex-wrap:wrap}
.srv-menu .menu-pop>button .lbl small{flex-basis:100%;margin:-4px 0 4px 30px;font-size:12px;color:#949ba4;font-weight:400}
.srv-menu .sm-ic{flex:none;width:20px;height:20px;display:grid;place-items:center;color:#b5bac1}
.srv-menu .sm-ic .ico{width:20px;height:20px}
.srv-menu .sm-t{display:inline-flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srv-menu .menu-pop>button:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}
.srv-menu .menu-pop>button:hover .sm-ic{color:#fff}
.srv-menu .menu-pop>button.danger,.srv-menu .menu-pop>button.danger .sm-ic{color:#f23f42!important}
.srv-menu .menu-pop>button.danger:hover{background:rgba(242,63,66,.12)!important;color:#f23f42!important}
.srv-menu .sm-boost{color:#ff73fa}
.srv-menu .menu-pop>button[data-mi=boost] .sm-ic{color:#ff73fa}
.srv-menu .sm-inv{color:#949cf7}
.srv-menu .menu-pop>button[data-mi=invite] .sm-ic{color:#949cf7}
.srv-menu .menu-pop hr{margin:4px 8px!important;border:0!important;border-top:1px solid #26262a!important}
.srv-menu .sm-cb{width:20px;height:20px;flex:none;border-radius:4px;border:1.5px solid #6d6f78;display:grid;place-items:center;margin-left:auto}
.srv-menu .sm-cb.on{background:#5865f2;border-color:#5865f2;color:#fff}
.srv-menu .sm-cb .ico{width:14px;height:14px;stroke-width:3}
.srv-menu .stag{margin-left:2px!important}
/* notification modal radios */
.sm-radios{display:grid;gap:8px}
.sm-radio{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:8px;background:#1a1a1d;cursor:pointer}
.sm-radio input{margin-top:3px;accent-color:#5865f2}
.sm-radio b{display:block;color:#f2f3f5}.sm-radio small{color:#949ba4}
/* Server Guide */
.sg-modal .modal{max-width:560px}
.sg-hero{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.sg-hero .ob-ic{width:64px;height:64px;font-size:22px;border-radius:18px}
.sg-hero small{color:#949ba4;font-weight:600;text-transform:uppercase;font-size:11px;letter-spacing:.04em}
.sg-hero h2{margin:2px 0;font-size:22px;color:#f2f3f5}
.sg-hero p{margin:0;color:#b5bac1;font-size:14px}
.sg-card{background:#1a1a1d;border:1px solid #26262a;border-radius:10px;padding:14px 16px;margin-top:10px}
.sg-card h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#949ba4}
.sg-card p,.sg-rules{color:#dbdee1;font-size:14px;line-height:1.5}
.sg-step{display:flex;align-items:center;gap:12px;width:100%;padding:10px;margin:2px 0;border:0;border-radius:8px;background:transparent;color:#dbdee1;text-align:left;cursor:pointer}
.sg-step:hover{background:rgba(255,255,255,.06)}
.sg-step>.ico:first-child{width:22px;height:22px;color:#949cf7;flex:none}
.sg-step span{flex:1;min-width:0}.sg-step b{display:block}.sg-step small{color:#949ba4}
.sg-step>.ico:last-child{width:16px;height:16px;color:#6d6f78}
/* Channels & Roles */
.cr-modal .modal{max-width:620px;width:100%}
.cr-tabs{display:flex;gap:4px;border-bottom:1px solid #26262a;margin-bottom:12px}
.cr-tabs button{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:0;background:none;color:#949ba4;font-weight:600;border-bottom:2px solid transparent;cursor:pointer}
.cr-tabs button .ico{width:18px;height:18px}
.cr-tabs button.on{color:#f2f3f5;border-bottom-color:#5865f2}
.cr-sub{color:#b5bac1;font-size:14px;margin:0 0 12px}
.cr-q{margin-bottom:16px}.cr-q h4{margin:0;color:#f2f3f5;font-size:16px}.cr-q>small{color:#949ba4}
.cr-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:8px}
.cr-opt{position:relative;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:8px;border:1px solid #26262a;background:#1a1a1d;color:#dbdee1;text-align:left;cursor:pointer}
.cr-opt:hover{border-color:#3a3a40}
.cr-opt.on{border-color:#5865f2;background:rgba(88,101,242,.12)}
.cr-opt .em{font-size:20px}.cr-opt span:not(.em){flex:1;min-width:0}.cr-opt b{display:block}.cr-opt small{color:#949ba4}
.cr-opt .ck{width:18px;height:18px;border-radius:50%;border:1.5px solid #6d6f78;display:grid;place-items:center;flex:none}
.cr-opt .ck .ico{width:12px;height:12px;opacity:0}
.cr-opt.on .ck{background:#5865f2;border-color:#5865f2;color:#fff}.cr-opt.on .ck .ico{opacity:1}
.cr-f{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;bottom:0;padding-top:10px;background:inherit}
.cr-showall{margin-bottom:12px}
.cr-cat h5{margin:14px 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#949ba4}
.cr-ch{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:6px;cursor:pointer}
.cr-ch:hover{background:rgba(255,255,255,.04)}
.cr-ci{color:#6d6f78;display:grid}.cr-ci .ico{width:20px;height:20px}
.cr-cn{flex:1;min-width:0;color:#dbdee1;font-weight:500}.cr-cn small{display:block;color:#949ba4;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-ch input{position:absolute;opacity:0;pointer-events:none}
.cr-ch .sw{flex:none;width:36px;height:22px;border-radius:11px;background:#4e5058;position:relative;transition:background .15s}
.cr-ch .sw::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.cr-ch input:checked+.sw{background:#23a55a}
.cr-ch input:checked+.sw::after{transform:translateX(14px)}
@media (max-width:560px){.cr-opts{grid-template-columns:1fr}}
.srv-menu .menu-pop>button .lbl{flex-wrap:nowrap!important}.srv-menu .menu-pop>button .lbl:has(small){flex-wrap:wrap!important}.srv-menu .menu-pop>button .lbl>.sm-t{flex:1}

/* DM list: Discord spacing, status on its own line under the name */
.ch.dm{min-height:44px!important;padding:6px 8px!important;margin:2px 0!important;gap:12px!important;align-items:center!important;border-radius:6px!important}
.ch.dm>.n{display:flex!important;flex-direction:column!important;justify-content:center!important;min-width:0!important;line-height:1.2!important;font-size:15px!important;font-weight:500!important;overflow:hidden!important}
.ch.dm>.n>.sub,.ch.dm>.n .sub{display:block!important;margin:1px 0 0!important;font-size:12px!important;font-weight:400!important;color:var(--text-muted,#949ba4)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:100%!important}

/* ===== User Settings: categorized sidebar + centered content ===== */
.us-cat nav{background:#08080a!important;border-right:1px solid #1f1f22!important}
.us-cat nav>div{padding:16px 10px 24px!important;max-width:260px;margin-left:auto}
.us-cat .sx-head{padding:0 6px 10px}
.us-cat .sx-me{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.us-cat .sx-me .av{width:40px!important;height:40px!important;flex:none}
.us-cat .sx-me b{display:block;color:#f2f3f5;font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.us-cat .sx-editp{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:#949ba4;font-size:13px;cursor:pointer}
.us-cat .sx-editp:hover{color:#dbdee1}
.us-cat .sx-editp .ico{width:12px;height:12px}
.us-cat .sx-search{position:relative}
.us-cat .sx-search .ico{position:absolute;left:8px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:#80848e;pointer-events:none}
.us-cat .sx-search input{width:100%;box-sizing:border-box;height:32px;padding:0 8px 0 30px;border-radius:6px;border:1px solid #1f1f22;background:#141416;color:#dbdee1;font:inherit;font-size:14px;outline:none}
.us-cat .sx-search input:focus{border-color:#5865f2}
.us-cat .sx-grp{padding:6px 0;border-top:1px solid #1f1f22}
.us-cat .sx-grp h6{margin:6px 10px 4px!important;padding:0!important;font-size:12px!important;font-weight:700!important;letter-spacing:.02em;text-transform:none!important;color:#949ba4!important}
.us-cat nav button.sx-row{display:flex!important;align-items:center;gap:10px;width:100%;min-height:36px;padding:6px 10px!important;margin:1px 0!important;border-radius:6px!important;font-size:15px!important;font-weight:500!important;color:#b5bac1!important;text-align:left;background:transparent!important}
.us-cat nav button.sx-row:hover{background:#1a1a1d!important;color:#dbdee1!important}
.us-cat nav button.sx-row.on,.us-cat nav button.sx-row.sx-parent-on{background:#222226!important;color:#fff!important}
.us-cat .sx-ic{width:20px;height:20px;display:grid;place-items:center;flex:none;color:inherit}
.us-cat .sx-ic .ico{width:20px;height:20px}
.us-cat .sx-kids{display:none;margin:2px 0 4px 20px;padding-left:10px;border-left:1px solid #26262a}
.us-cat .sx-kids.open,.us-cat .sx-kids.force{display:block}
.us-cat nav button.sx-sub{min-height:30px;font-size:14px!important;padding:4px 10px!important}
.us-cat nav button[data-t=logout]{color:#f23f42!important}
.us-cat nav button[data-t=logout]:hover{background:rgba(242,63,66,.1)!important}
.us-cat nav button[data-t=super]{color:#ff73fa!important}
/* content: centered column, title bar */
.us-cat .pane{padding:0 40px 80px!important}
.us-cat .pane>*{max-width:740px;margin-left:auto!important;margin-right:auto!important}
.us-cat .pane>h2.sx-title,.us-cat .pane>h2:first-child{position:sticky;top:0;z-index:3;margin:0 auto 20px!important;padding:22px 0 14px!important;background:#0b0b0c;border-bottom:1px solid #1f1f22;font-size:20px!important;font-weight:700!important;color:#f2f3f5!important}
.us-cat .pane h3{font-size:16px!important;font-weight:700!important;color:#f2f3f5!important;text-transform:none!important;letter-spacing:0!important;margin:28px auto 10px!important;padding-top:20px;border-top:1px solid #1f1f22}
.us-cat .pane .card-box{background:#111113!important;border:1px solid #1f1f22!important;border-radius:10px!important}
.us-cat .pane .kv{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #1a1a1d}
.us-cat .pane .kv:last-child{border-bottom:0}
.us-cat .pane .kv .k b{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:#949ba4;margin-bottom:2px}
.us-cat .pane .kv .k{color:#f2f3f5;font-size:15px}
.us-cat .pane .kv .btn{background:#26262a!important;color:#f2f3f5!important}
.us-cat .pane .kv .btn:hover{background:#303036!important}
@media (max-width:760px){
.us-cat nav>div{max-width:none;margin:0}
.us-cat .pane{padding:0 16px 80px!important}
.us-cat .pane>h2.sx-title,.us-cat .pane>h2:first-child{padding:16px 40px 12px 0!important}
}
.us-cat .sx-editp{white-space:nowrap}.us-cat .sx-me>div{min-width:0}
@media (max-width:760px){.us-cat nav{width:100%!important;max-height:42vh;overflow-y:auto!important;overflow-x:hidden!important;border-right:0!important;border-bottom:1px solid #1f1f22!important;flex:none}.us-cat nav>div{display:block!important;flex-direction:column!important;white-space:normal!important;overflow:visible!important;padding:12px 12px 8px!important;width:auto!important}.us-cat .sx-grp{display:block!important}.us-cat nav button.sx-row{width:100%!important;flex:none!important}.us-cat .sx-head{padding-right:48px}}
.ch.dm>.n{align-items:flex-start!important;text-align:left!important;flex:1 1 auto!important}
.ch.dm>.n>*{text-align:left!important;max-width:100%!important}
/* activity line: icon inline with the text, one status line per member row */
.act-ic{display:inline-block!important;width:14px!important;height:14px!important;flex:none!important;vertical-align:-2px!important;margin:0 4px 0 0!important}
.act-line{display:flex!important;align-items:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:12px!important}
.act-line b{font-weight:500!important;overflow:hidden!important;text-overflow:ellipsis!important}
.act-line + .ab{display:none!important}
.ch.dm>.n .act-sub{display:flex!important;align-items:center!important}

/* ===================== Darker theme (final) ===================== */
:root:not([data-theme="light"]){
  --bg-0:#000; --bg-1:#0a0a0c; --bg-2:#050506; --bg-3:#0e0e10; --bg-4:#151517; --bg-float:#0e0e10; --code:#0a0a0c;
  --rail:#000; --side:#030304; --chat:#050506; --mem:#030304; --inp:#0e0e10; --userbar:#08080a;
  --line:#19191c; --line-2:#202024; --hover:#151517; --active:#1b1b1e;
}
:root:not([data-theme="light"]):not(.is-super) body,:root:not([data-theme="light"]):not(.is-super) .app{background:#000!important}
:root:not([data-theme="light"]) .app>.rail,:root:not([data-theme="light"]) .rail{background:#000!important}
:root:not([data-theme="light"]):not(.is-super) .app>.side,:root:not([data-theme="light"]):not(.is-super) .app>.members,:root:not([data-theme="light"]) .settings nav,:root:not([data-theme="light"]) .us-cat nav{background:#030304!important}
:root:not([data-theme="light"]):not(.is-super) .app>.main,:root:not([data-theme="light"]):not(.is-super) .main .top,:root:not([data-theme="light"]) .settings,:root:not([data-theme="light"]) .settings .pane,:root:not([data-theme="light"]) .ps-wrap,:root:not([data-theme="light"]) .us-cat .pane>h2:first-child,:root:not([data-theme="light"]) .us-cat .pane>h2.sx-title{background:#050506!important}
:root:not([data-theme="light"]) .me-bar,:root:not([data-theme="light"]) .voice-bar,:root:not([data-theme="light"]) .vb-share{background:#08080a!important}
:root:not([data-theme="light"]) .box,:root:not([data-theme="light"]) .composer .box,:root:not([data-theme="light"]) .search input,:root:not([data-theme="light"]) .input,:root:not([data-theme="light"]) .field input,:root:not([data-theme="light"]) .field textarea,:root:not([data-theme="light"]) .field select,:root:not([data-theme="light"]) .snd-q,:root:not([data-theme="light"]) .sx-search input,:root:not([data-theme="light"]) .ps-search input,:root:not([data-theme="light"]) .edit-box .rinput{background:#0e0e10!important;border-color:#19191c!important}
:root:not([data-theme="light"]) .pop,:root:not([data-theme="light"]) .menu-pop,:root:not([data-theme="light"]) .modal,:root:not([data-theme="light"]) .tip,:root:not([data-theme="light"]) .toast,:root:not([data-theme="light"]) .pcard,:root:not([data-theme="light"]) .msg .acts,:root:not([data-theme="light"]) .modal .mf,:root:not([data-theme="light"]) .srv-menu .menu-pop{background:#0e0e10!important;border-color:#202024!important}
:root:not([data-theme="light"]) .pcard .pinner,:root:not([data-theme="light"]) .embed,:root:not([data-theme="light"]) .react,:root:not([data-theme="light"]) .card-box,:root:not([data-theme="light"]) .us-cat .pane .card-box,:root:not([data-theme="light"]) .sg-card,:root:not([data-theme="light"]) .cr-opt,:root:not([data-theme="light"]) .sm-radio,:root:not([data-theme="light"]) .pcard.pc2 .pbubble,:root:not([data-theme="light"]) .reply-bar,:root:not([data-theme="light"]) .tray{background:#0b0b0d!important;border-color:#19191c!important}
:root:not([data-theme="light"]) .ri .icon{background:#0e0e10!important}
:root:not([data-theme="light"]) .ch:hover,:root:not([data-theme="light"]) .vc-user:hover,:root:not([data-theme="light"]) .mem:hover,:root:not([data-theme="light"]) .us-cat nav button.sx-row:hover,:root:not([data-theme="light"]) .srv-menu .menu-pop>button:hover{background:#151517!important}
:root:not([data-theme="light"]) .ch.on,:root:not([data-theme="light"]) .us-cat nav button.sx-row.on,:root:not([data-theme="light"]) .us-cat nav button.sx-row.sx-parent-on{background:#1b1b1e!important}
:root:not([data-theme="light"]) .msg:hover{background:#0a0a0c!important}
:root:not([data-theme="light"]) .msg.mentioned,:root:not([data-theme="light"]) .msg.mention-me{background:rgba(240,160,32,.07)!important}
:root:not([data-theme="light"]) .msg.mentioned:hover,:root:not([data-theme="light"]) .msg.mention-me:hover{background:rgba(240,160,32,.11)!important}
:root:not([data-theme="light"]) .top,:root:not([data-theme="light"]) .side-head,:root:not([data-theme="light"]) .app>.side,:root:not([data-theme="light"]) .app>.members,:root:not([data-theme="light"]) .app>.rail{border-color:#19191c!important}
:root:not([data-theme="light"]) .vroom .tile{background:#0e0e10!important}
:root:not([data-theme="light"]) .vroom .vpill button,:root:not([data-theme="light"]) .vroom .vpill .vsplit{background:#151517!important}
:root:not([data-theme="light"]) .vroom .vpill .vsplit>button{background:transparent!important}
:root:not([data-theme="light"]) .vroom .ctrl.vpill{background:rgba(8,8,10,.94)!important;border-color:#202024!important}
:root:not([data-theme="light"]) .snd-pop2 .snd-t{background:#151517!important}
:root:not([data-theme="light"]) .ps-card,:root:not([data-theme="light"]) .qc,:root:not([data-theme="light"]) .sp-card,:root:not([data-theme="light"]) .sp-cmp,:root:not([data-theme="light"]) .sp-faq details,:root:not([data-theme="light"]) .qh-week,:root:not([data-theme="light"]) .ps-bal,:root:not([data-theme="light"]) .ps-arrow{background:#0b0b0d!important;border-color:#19191c!important}
:root:not([data-theme="light"]) .ps-art{background:#101020!important}
:root:not([data-theme="light"]) .pd-prev{background:#08080a!important}
:root:not([data-theme="light"]) .pd-card{background:#0e0e10!important;border-color:#202024!important}

/* ===================== Delight pass ===================== */
:root{--r1:4px;--r2:8px;--r3:12px;--r4:16px;--sh1:0 1px 2px rgba(0,0,0,.5);--sh2:0 8px 20px rgba(0,0,0,.5);--sh3:0 16px 40px rgba(0,0,0,.6);--spring:cubic-bezier(.34,1.56,.64,1)}
/* rail: morph + springy pill */
.ri .icon{transition:border-radius .2s var(--spring),background-color .15s,color .15s,transform .15s!important}
.ri:active .icon{transform:translateY(1px) scale(.96)}
.ri .pip{transition:height .25s var(--spring),opacity .15s!important}
.ri.pop-in .icon{animation:dl-pop .45s var(--spring)}
@keyframes dl-pop{from{transform:scale(.4);opacity:0}}
.ri .badge.bump,.ch .mb.bump,.hs-pill.bump{animation:dl-bump .5s var(--spring)}
@keyframes dl-bump{30%{transform:scale(1.35)}}
/* channels */
.ch{transition:background-color .18s ease,color .18s ease!important}
.ch.unread.dl-arrive::before{animation:dl-dot 1s ease-out 1}
@keyframes dl-dot{0%{transform:scale(.2);opacity:0}40%{transform:scale(1.6)}100%{transform:none;opacity:1}}
/* messages */
.msg.dl-new{animation:dl-msg .16s ease-out both}
@keyframes dl-msg{from{opacity:0;transform:translateY(6px)}}
.msg .acts{transform-origin:right bottom}
.msg:hover .acts{animation:dl-acts .18s var(--spring)}
@keyframes dl-acts{from{opacity:0;transform:translateY(4px) scale(.92)}}
.react{transition:transform .15s var(--spring),background-color .15s,border-color .15s!important}
.react:hover{transform:translateY(-1px)}
.react:active{transform:scale(.9)}
.react.dl-pop{animation:dl-react .4s var(--spring)}
@keyframes dl-react{40%{transform:scale(1.25)}}
.dl-spark{position:fixed;z-index:9999;width:6px;height:6px;border-radius:50%;pointer-events:none}
.jump-present{border-radius:999px!important;box-shadow:var(--sh2);animation:dl-up .25s var(--spring)}
@keyframes dl-up{from{opacity:0;transform:translateY(10px)}}
.dl-whoosh{position:fixed;z-index:50;pointer-events:none;color:#dbdee1;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* typing dots already animate; make them bounce */
.typing .dots i{animation:dl-typing 1.2s infinite ease-in-out!important}
@keyframes dl-typing{0%,60%,100%{transform:none;opacity:.35}30%{transform:translateY(-3px);opacity:1}}
/* popovers / menus / modals: scale+fade from click point */
.pop{transform-origin:var(--ox,50%) var(--oy,0%);animation:dl-open .15s cubic-bezier(.2,.9,.3,1.2)!important}
.modal{animation:dl-open .17s cubic-bezier(.2,.9,.3,1.2)!important}
@keyframes dl-open{from{opacity:0;transform:scale(.94)}}
.backdrop,.scrim{animation:dl-fade .15s ease}
@keyframes dl-fade{from{opacity:0}}
/* buttons + toggles */
.btn{transition:transform .1s ease,background-color .15s,box-shadow .2s!important}
.btn:active:not(:disabled){transform:scale(.97)!important}
.btn.primary,.btn.brand,.btn:not(.soft):not(.ghost):not(.link):not(.danger):not(.green):not(.sm){box-shadow:0 0 0 0 rgba(88,101,242,0)}
.btn.primary:hover,.btn.brand:hover{box-shadow:0 0 18px rgba(88,101,242,.35)!important}
.toggle .sw,.toggle .sw::after,.cr-ch .sw::after{transition:background-color .2s,transform .25s var(--spring)!important}
input[type=checkbox]:not(.sw-input):active{transform:scale(.9)}
/* voice */
.vroom .tile.speaking>.av{animation:dl-speak 1.4s ease-in-out infinite}
@keyframes dl-speak{50%{box-shadow:0 0 0 3px #23a55a,0 0 0 9px rgba(35,165,90,.12)}}
.vc-user.dl-join{animation:dl-slide .25s ease-out both}
@keyframes dl-slide{from{opacity:0;transform:translateX(-8px)}}
.vroom .vpill button{transition:transform .15s var(--spring),background-color .15s!important}
.vroom .vpill button:hover{transform:translateY(-2px)}
/* toasts */
.toast{animation:dl-up .22s var(--spring)!important}
.dl-orbtoast{display:inline-flex;align-items:center;gap:6px}
/* what's new dot shimmer */
.wn-dot,.whatsnew .dot,[data-act=whatsnew] .dot{animation:dl-shimmer 2.4s ease-in-out infinite}
@keyframes dl-shimmer{50%{opacity:.4;transform:scale(.8)}}
/* skeletons */
.skel{background:linear-gradient(100deg,#0e0e10 30%,#18181b 50%,#0e0e10 70%)!important;background-size:200% 100%!important;animation:skel 1.2s linear infinite!important;border-radius:var(--r2)}
@keyframes skel{to{background-position:-200% 0}}
/* empty states: our own little illustration + calmer text */
.empty:not(.rinput){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;color:#949ba4;padding:40px 16px}
.empty:not(.rinput)::before{content:"";width:140px;height:100px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'%3E%3Cellipse cx='70' cy='90' rx='46' ry='6' fill='%2314141a'/%3E%3Crect x='30' y='22' width='80' height='56' rx='14' fill='%23181a2e'/%3E%3Crect x='42' y='36' width='38' height='6' rx='3' fill='%235865f2'/%3E%3Crect x='42' y='48' width='56' height='6' rx='3' fill='%232a2d4a'/%3E%3Crect x='42' y='60' width='30' height='6' rx='3' fill='%232a2d4a'/%3E%3Ccircle cx='112' cy='24' r='10' fill='%23ff8fd0'/%3E%3Ccircle cx='24' cy='40' r='6' fill='%236ee8d8'/%3E%3Cpath d='M118 50l3 6 6 1-4 4 1 6-6-3-5 3 1-6-4-4 6-1z' fill='%23ffd23f'/%3E%3C/svg%3E") center/contain no-repeat;animation:dl-float 4s ease-in-out infinite}
.empty:not(.rinput):has(img)::before{display:none}
@keyframes dl-float{50%{transform:translateY(-6px)}}
.empty img{animation:dl-float 4s ease-in-out infinite}
/* radius + shadow consistency */
.pop,.menu-pop{border-radius:var(--r2)!important;box-shadow:var(--sh2)!important}
.modal{border-radius:var(--r3)!important;box-shadow:var(--sh3)!important}
.tip{border-radius:var(--r2)!important}
.toast{border-radius:var(--r2)!important}
@media (prefers-reduced-motion:reduce){.ri .icon,.msg,.react,.pop,.menu-pop,.modal,.btn,.toast,.vroom .tile,.vc-user,.empty:not(.rinput)::before,.skel,.typing .dots i,.jump-present{animation:none!important;transition:none!important}}
.rinput.empty::before,.rinput:empty::before{left:4px;top:11px;right:auto;text-align:left;white-space:nowrap;overflow:hidden;max-width:calc(100% - 8px)}.edit-box .rinput.empty::before{left:12px;top:10px}
.rinput{text-align:left!important}

/* composer: the generic .empty block style must not apply to the empty message box */
.rinput.empty,.rinput:empty{display:block!important;flex:1 1 auto!important;padding:11px 4px!important;opacity:1!important;place-items:initial!important;align-content:initial!important;gap:0!important;text-align:left!important;color:var(--text-2)!important}
.edit-box .rinput.empty{padding:10px 12px!important}
/* Super members: same near-black surfaces as everyone (slightly see-through so their gradient shows), never grey */
:root:not([data-theme="light"]).is-super .app>.main{background:rgba(5,5,6,.9)!important}
:root:not([data-theme="light"]).is-super .app>.side,:root:not([data-theme="light"]).is-super .app>.members{background:rgba(3,3,4,.92)!important}
:root:not([data-theme="light"]).is-super .app>.rail{background:rgba(0,0,0,.94)!important}

/* friendly loading-problem screen */
.hiccup{min-height:100vh;display:grid;place-items:center;padding:24px;background:#000;color:#dbdee1}
.hc-card{max-width:420px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;animation:hcIn .35s ease both}
.hc-card h1{font-size:24px;font-weight:700;color:#fff;margin:6px 0 0}
.hc-card p{font-size:15px;line-height:1.5;color:#b5bac1;margin:0}
.hc-card small{font-size:12px;color:#80848e}
.hc-status{display:flex;align-items:center;gap:10px;font-size:14px;color:#dbdee1;background:#0e0e10;border:1px solid #19191c;border-radius:999px;padding:8px 14px}
.hc-spin{width:14px;height:14px;border-radius:50%;border:2px solid #2b2d31;border-top-color:#5865f2;animation:hcSpin .8s linear infinite}
.hc-orb{position:relative;width:84px;height:84px}
.hc-orb i{position:absolute;inset:0;border-radius:50%;border:2px solid #5865f2;opacity:0;animation:hcPulse 2.4s ease-out infinite}
.hc-orb i:nth-child(2){animation-delay:.8s}.hc-orb i:nth-child(3){animation-delay:1.6s}
.hc-orb::after{content:"";position:absolute;inset:26px;border-radius:50%;background:#5865f2;box-shadow:0 0 24px rgba(88,101,242,.6)}
@keyframes hcPulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.15);opacity:0}}
@keyframes hcSpin{to{transform:rotate(360deg)}}
@keyframes hcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hc-orb i,.hc-spin,.hc-card{animation:none}.hc-orb i:first-child{opacity:.5}}

/* server banner header: no hard line across the banner */
html:root .side-head-wrap.with-banner .side-head,html:root .side-head-wrap.with-banner .side-head:hover{border:0!important;box-shadow:none!important;outline:0!important;height:56px!important;background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.25) 60%,rgba(0,0,0,0))!important}
html:root .side-head-wrap.with-banner .side-head::before,html:root .side-head-wrap.with-banner .side-head::after,html:root .side-head-wrap.with-banner::before,html:root .side-head-wrap.with-banner::after{display:none!important;content:none!important}
html:root .side-head-wrap.with-banner,html:root .side-head-wrap.with-banner .side-banner-img{border:0!important;box-shadow:none!important}

/* reactions: clear difference between yours and other people's */
html:root .react{background:#0e0e10!important;border:1px solid #1c1c20!important;color:#b5bac1!important}
html:root .react:hover{border-color:#2e2f36!important;background:#151517!important}
html:root .react.me{background:rgba(88,101,242,.28)!important;border-color:#5865f2!important;color:#e0e3ff!important;font-weight:600!important;box-shadow:0 0 0 1px rgba(88,101,242,.35)!important}
html:root .react.me:hover{background:rgba(88,101,242,.38)!important}