/* ---------- LinkupHQ look: loaded last, refines app.css. Flat, quiet, Discord-like. ---------- */
:root,[data-theme="dark"]{
  --bg-0:#0e0e11; --bg-1:#141418; --bg-2:#1a1a1f; --bg-3:#222228; --bg-4:#2c2c33; --bg-float:#18181d;
  --line:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.1); --hover:rgba(255,255,255,.045); --active:rgba(255,255,255,.08);
  --text:#f1f1f4; --text-2:#c9c9d1; --muted:#8b8b96; --faint:#5f5f6a;
  --accent:#7c5cff; --accent-hover:#6a4cf0; --accent-ink:#fff;
  --green:#2fc77a; --red:#f2475a; --yellow:#f0b232; --amber:#f0b232;
  --mention-bg:rgba(240,178,50,.08); --mention-bar:#f0b232; --code:#0b0b0e;
  --shadow:0 8px 24px rgba(0,0,0,.45); --r:8px;
}
[data-theme="midnight"]{ --bg-0:#000; --bg-1:#0e0e10; --bg-2:#141417; --bg-3:#1c1c20; --bg-4:#26262b; --bg-float:#0e0e10; --code:#0e0e10; }
[data-theme="light"]{
  --bg-0:#e3e5e8; --bg-1:#f2f3f5; --bg-2:#ffffff; --bg-3:#ebedef; --bg-4:#dfe1e5; --bg-float:#ffffff;
  --line:rgba(6,6,7,.08); --line-2:rgba(6,6,7,.14); --hover:rgba(6,6,7,.04); --active:rgba(6,6,7,.08);
  --text:#060607; --text-2:#313338; --muted:#5c5e66; --faint:#80848e;
  --accent:#6a4ae6; --accent-hover:#5a3bd4; --code:#f2f3f5; --mention-bg:rgba(240,178,50,.14);
  --shadow:0 8px 24px rgba(0,0,0,.14);
}
body{background:var(--bg-0)}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
::selection{background:color-mix(in srgb,var(--accent) 40%,transparent)}

/* ---------- buttons & form controls ---------- */
.btn{border-radius:6px;padding:8px 16px;font-weight:500;font-size:.9rem;background:var(--accent);transition:background-color .15s ease,color .15s ease,transform .1s ease,box-shadow .15s ease}
.btn:hover{filter:none;background:var(--accent-hover)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--text)}
.btn.ghost:hover{background:transparent;text-decoration:underline}
.btn.soft{background:var(--bg-4);color:var(--text)}
.btn.soft:hover{background:color-mix(in srgb,var(--bg-4) 80%,var(--text) 12%)}
.btn.danger{background:var(--red)}.btn.danger:hover{background:#a12828}
.btn.green{background:var(--green)}.btn.green:hover{background:#1a8346}
.btn.sm{padding:5px 12px;font-size:.85rem;border-radius:6px}
.btn .ico{width:16px;height:16px}
.input{background:var(--bg-0);border:1px solid transparent;border-radius:6px;padding:10px;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
[data-theme="light"] .input{background:var(--bg-3)}
.input:hover{border-color:var(--line-2)}
.input:focus{border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);outline:none}
.input::placeholder{color:var(--faint)}
.field>span,.label{font-size:.75rem;font-weight:700;letter-spacing:.02em;color:var(--text-2);margin-bottom:8px}
.hint{color:var(--muted)}
.sw{background:#80848e;width:40px;height:24px}
input:checked+.sw{background:var(--green)}
.toggle{padding:14px 0}
.chip{border-radius:4px}
.card-box{background:var(--bg-1);border:0;border-radius:var(--r);padding:16px}
.seg{background:var(--bg-0);border-radius:6px}
.seg button{border-radius:4px}
.seg button.on{background:var(--bg-4);color:var(--text)}

/* ---------- layout ---------- */
.app{grid-template-columns:72px 240px 1fr}
.rail{background:var(--bg-0);padding:12px 0;gap:8px}
.side{background:var(--bg-1)}
.main{background:var(--bg-2)}
.members,.dm-profile,.results,.active-now{background:var(--bg-1);border-left:0}

/* server rail */
.ri .icon{background:var(--bg-2);transition:border-radius .15s,background .15s,color .15s}
.ri:hover .icon,.ri.on .icon{border-radius:16px}
.ri.on .icon.home,.ri:hover .icon.home{background:var(--accent)}
.ri .icon.add,.ri .icon.disc{color:var(--green)}
.ri:hover .icon.add,.ri:hover .icon.disc,.ri.on .icon.disc{background:var(--green);color:#fff}
.ri .pip{background:var(--text);left:-12px}
.rail .sep{width:32px;height:2px;background:var(--bg-3)}
.ri-dev{margin-top:auto}
.ri .icon.dev{color:var(--text-2)}
.ri:hover .icon.dev,.ri.on .icon.dev{background:var(--accent);color:#fff}

/* channel sidebar */
.side-head{height:48px;padding:0 16px;font-weight:600;font-size:.95rem;border-bottom:1px solid rgba(0,0,0,.2);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.side-head>.ico{width:18px;height:18px;color:var(--text-2);flex:none}
.side-banner{height:84px;margin:8px 8px 0;border-radius:6px}
.boost-pill{display:inline-flex;align-items:center;gap:2px;padding:0 6px 0 4px;height:18px;border-radius:9px;font-size:.72rem;font-weight:700;color:#f47fff;background:rgba(244,127,255,.12);flex:none}
.boost-pill .ico{width:12px;height:12px}
.find{margin:9px 10px;padding:4px 8px;height:30px;border-radius:6px;background:var(--bg-3);border:1px solid var(--line-2);font-size:.82rem;font-weight:600;color:var(--text-2);text-align:center;width:calc(100% - 20px)}
.find:hover{background:var(--bg-4);color:var(--text)}
.side-list{padding:8px}
.cat{padding:18px 4px 4px 8px;font-size:.75rem;font-weight:600;letter-spacing:.02em;gap:2px}
.cat .t{flex:none}
.cat .sp{flex:1}
.cat .chev{display:grid;opacity:.8}
.cat .chev .ico{width:12px;height:12px;transition:transform .15s}
.cat.closed .ico{transform:none}
.cat.closed .chev .ico{transform:rotate(-90deg)}
.cat .add{opacity:.75;display:grid;padding:2px;border-radius:3px}
.cat .add:hover{opacity:1;color:var(--text)}
.cat .add .ico{width:16px;height:16px}
.ch{padding:6px 8px;border-radius:4px;margin:1px 0;font-weight:500;color:var(--muted)}
.ch:hover{background:var(--hover);color:var(--text-2)}
.ch.on{background:var(--active);color:var(--text)}
.ch.unread{color:var(--text)}
.ch.unread::before{left:-8px;background:var(--text)}
.ch .ico{opacity:.7}
.ch.ann>.ico{color:inherit;opacity:.7}
.ch.on .ico{opacity:1}
.ch.lobby-link{color:var(--text-2)}
.ch.lobby-link .ico{opacity:.9}
.invite-pill{display:flex;align-items:center;gap:8px;width:100%;margin:1px 0 8px;padding:6px 8px;border-radius:4px;font-weight:500;color:var(--muted)}
.invite-pill:hover{background:var(--hover);color:var(--text-2)}
.invite-pill .ico{width:18px;height:18px;opacity:.7}
.ch .mb,.mb-badge{border-radius:8px;background:var(--red)}
.me-bar{background:color-mix(in srgb,var(--bg-0) 60%,var(--bg-1));padding:6px 8px;margin:0;gap:0}
.me-bar .who{border-radius:4px}
.mb-grp{display:flex;align-items:center;border-radius:6px;flex:none}
.mb-grp:hover{background:var(--hover)}
.mb-grp .icon-btn{width:26px}
.me-bar>.icon-btn{width:30px}
.me-bar .who{padding:3px 2px}
.mb-grp .icon-btn:hover{background:transparent}
.mb-chev{width:12px;height:32px;display:grid;place-items:center;color:var(--muted);margin-left:-3px;padding-right:2px}
.mb-chev:hover{color:var(--text)}
.mb-chev .ico{width:12px;height:12px}
/* voice stage, Discord-style */
.vroom{background:#000}
.vroom .grid{gap:8px;padding:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));grid-auto-rows:1fr}
.tile{border-radius:8px;background:#111;aspect-ratio:16/9;box-shadow:none;outline:2px solid transparent;outline-offset:-2px;transition:outline-color .12s}
.tile.speaking{box-shadow:none;outline-color:#23a55a}
.tile video{object-fit:contain;background:#000}
.ptile .pbg{position:absolute;inset:0}
.ptile .pbg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.08)}
.ptile>.av{position:relative;z-index:1;box-shadow:0 2px 12px rgba(0,0,0,.25);border-radius:50%}
.tile .lbl.nm{z-index:2;left:10px;bottom:10px;background:rgba(0,0,0,.6);border-radius:6px;padding:4px 8px;opacity:0;transition:opacity .12s}
.tile:hover .lbl.nm{opacity:1}
.tile .mchip{position:absolute;z-index:2;left:10px;bottom:10px;width:30px;height:30px;border-radius:7px;background:rgba(0,0,0,.45);display:grid;place-items:center;color:#fff}
.tile:hover .mchip{left:auto;right:10px}
.tile .mchip .ico{width:18px;height:18px}
.tile .tlive{position:absolute;z-index:2;right:10px;top:10px;background:#f23f43;color:#fff;font-weight:800;font-size:.72rem;padding:2px 7px;border-radius:6px;letter-spacing:.03em}
.vroom .ctrl{gap:10px;padding:12px}
.vroom .ctrl button{width:56px;height:48px;border-radius:12px;background:#2b2d31}
.vroom .ctrl button:hover{background:#35373c}
.vroom .ctrl button.off{background:#f23f4333;color:#f23f43}
.vroom .ctrl button.on{background:#23a55a33;color:#2dc770}
.vroom .ctrl button.end{background:#f23f43;color:#fff;width:64px}
/* profile role chips (+ / ×) */
.pcard .roles{display:flex;flex-wrap:wrap;gap:6px;align-items:center;position:relative}
.pcard .roles .chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:6px;background:color-mix(in srgb,var(--text) 8%,transparent);font-size:.78rem;font-weight:500}
.pcard .roles .chip i{width:10px;height:10px;border-radius:50%;flex:none}
.chip-x{display:grid;place-items:center;width:14px;height:14px;margin-right:-3px;border-radius:50%;color:var(--muted);opacity:.7}
.chip-x:hover{opacity:1;color:var(--text);background:color-mix(in srgb,var(--text) 14%,transparent)}
.chip-x .ico{width:10px;height:10px}
.chip.chip-add{width:24px;height:24px;padding:0;justify-content:center;color:var(--muted)}
.chip.chip-add:hover{color:var(--text);background:color-mix(in srgb,var(--text) 14%,transparent)}
.chip-add .ico{width:14px;height:14px}
.role-add-pop{position:absolute;z-index:5;left:0;top:calc(100% + 6px);width:220px;background:var(--bg-0);border:1px solid var(--line);border-radius:8px;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.role-add-pop .input{width:100%;margin-bottom:4px;padding:6px 8px}
.role-add-pop .ral{max-height:200px;overflow:auto}
.role-add-pop button{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border-radius:5px;text-align:left;font-size:.85rem}
.role-add-pop button:hover{background:var(--hover)}
.role-add-pop button i{width:10px;height:10px;border-radius:50%}
/* account standing */
.st-wrap{max-width:620px;margin:10px auto 0}
.st-top{display:flex;gap:20px;align-items:flex-start;margin-bottom:26px}
.st-top .av{flex:none}
.settings .st-h,.st-h{margin:4px 0 6px;font-size:1.2rem;text-transform:none;letter-spacing:0;color:var(--text)}
.st-top p{margin:0;color:var(--text-2);font-size:.85rem}
.st-track{display:flex;margin-top:18px}
.st-step{flex:1;position:relative;text-align:center;font-size:.78rem;color:var(--text-2)}
.st-step::before{content:"";position:absolute;top:10px;left:-50%;right:50%;height:3px;background:var(--bg-4,#3a3a44)}
.st-step:first-child::before{display:none}
.st-step.past::before,.st-step.on::before{background:var(--c)}
.st-step i{position:relative;z-index:1;display:grid;place-items:center;width:16px;height:16px;margin:3px auto 8px;border-radius:50%;background:var(--bg-4,#3a3a44);font-style:normal;font-weight:800;font-size:13px;color:#000}
.st-step.past i{background:var(--c)}
.st-step.on i{width:24px;height:24px;margin:-1px auto 4px;background:var(--c)}
.st-step.on span{color:var(--text);font-weight:600}
.st-box{background:var(--bg-1);border-radius:10px;margin-bottom:10px;padding:0 14px}
.st-box summary{display:flex;align-items:center;gap:14px;padding:14px 0;cursor:pointer;list-style:none}
.st-box summary::-webkit-details-marker{display:none}
.st-box summary>.ico{width:16px;height:16px;color:var(--muted);transition:transform .15s}
.st-box[open] summary>.ico{transform:rotate(180deg)}
.st-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--bg-0);font-weight:900}
.st-t{flex:1;min-width:0}.st-t b{display:block}.st-t small{color:var(--text-2)}
.st-v{border-top:1px solid var(--line,#2a2a33);padding:10px 0}.st-v b{display:block}.st-v small{display:block;color:var(--muted)}
@media (max-width:560px){.st-top{flex-direction:column;align-items:center;text-align:center}.st-step span{font-size:.65rem}}
/* image cropper */
.crop-ov{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:16px}
.crop-box{background:var(--bg-2);border-radius:12px;padding:20px;box-shadow:0 12px 40px rgba(0,0,0,.5);max-width:100%}
.crop-box h2{margin:0 0 14px;font-size:1.15rem}
.crop-stage{position:relative;background:#000;border-radius:8px;overflow:hidden;cursor:grab;touch-action:none}
.crop-stage:active{cursor:grabbing}
.crop-stage canvas{display:block}
.crop-stage::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 2px #fff8}
.crop-stage.round::after{border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.55),inset 0 0 0 2px #fff}
.crop-zoom{display:flex;align-items:center;gap:10px;margin:14px 4px}
.crop-zoom input{flex:1;accent-color:var(--brand,#7C3CFF)}
.crop-zoom .ico{width:14px;height:14px;color:var(--muted)}.crop-zoom .ico:last-child{width:20px;height:20px}
.crop-f{display:flex;gap:8px}
/* Discord-style user panel: one floating rounded card (screen share + voice + user) */
.me-card{flex:none;margin:0 8px 8px;border-radius:8px;background:color-mix(in srgb,var(--bg-0) 35%,var(--bg-2));border:1px solid color-mix(in srgb,var(--text) 7%,transparent);box-shadow:0 4px 14px rgba(0,0,0,.28);overflow:hidden}
.me-card>*+*{border-top:1px solid color-mix(in srgb,var(--text) 7%,transparent)}
.me-bar{margin:0;padding:6px;background:transparent;gap:2px}
.me-card .voice-bar{background:transparent;border-bottom:0;padding:10px 8px 8px}
.me-card .voice-bar .st{text-align:left;border-radius:6px;padding:2px 4px}
.me-card .voice-bar .st:hover small{text-decoration:underline}
.me-card .voice-bar .st b{color:#23a55a;font-weight:700}
.me-card .voice-bar .st .sig{width:18px;height:18px}
.me-card .voice-bar .row>.icon-btn{width:32px;height:32px;border-radius:6px}
.me-card .voice-bar .acts2{gap:8px;margin-top:10px}
.me-card .voice-bar .acts2 button{height:34px;border-radius:8px;background:color-mix(in srgb,var(--text) 7%,transparent)}
.me-card .voice-bar .acts2 button:hover{background:color-mix(in srgb,var(--text) 12%,transparent)}
.me-card .voice-bar .acts2 button.on{background:#23a55a33;color:#2dc770}
.vb-share{display:flex;align-items:center;gap:10px;padding:10px}
.vb-share b{flex:1;font-size:.9rem}
.vb-sic{width:34px;height:34px;border-radius:8px;background:#23a55a;color:#fff;display:grid;place-items:center}
.vb-sic .ico{width:18px;height:18px}
.me-bar .who{padding:2px 6px 2px 2px;border-radius:6px;gap:8px}
.me-bar .nm{font-size:.875rem;font-weight:600;line-height:1.15}
.me-bar .un{font-size:.75rem;line-height:1.2}
.me-bar .icon-btn{height:32px;border-radius:6px;color:color-mix(in srgb,var(--text) 72%,transparent)}
.me-bar .icon-btn:hover,.mb-grp:hover .icon-btn{color:var(--text)}
.me-bar>.icon-btn{width:32px}
.me-bar>.icon-btn:hover{background:var(--hover)}
.mb-grp{border-radius:6px}
.mb-grp .icon-btn{width:28px}
.mb-chev{width:14px;height:32px;margin-left:-4px;padding-right:2px;opacity:.75}
.mb-grp .icon-btn.off{color:#f23f43}
.mb-grp:has(.icon-btn.off){background:color-mix(in srgb,#f23f43 14%,transparent)}
.mb-grp:has(.icon-btn.off):hover{background:color-mix(in srgb,#f23f43 22%,transparent)}
.ch.nav{padding:8px 10px;margin:1px 0;font-size:.98rem}
.ch.nav .ico{width:20px;height:20px;opacity:.85}
.nav-sep{height:1px;background:var(--line-2);margin:8px 6px 4px}
.icon-btn{border-radius:4px}
.voice-bar{border-bottom:1px solid var(--line)}

/* top bar */
.top{height:48px;padding:0 8px 0 16px;border-bottom:1px solid rgba(0,0,0,.2);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.top .title{font-weight:600;font-size:.95rem}
.top .title .ico{color:var(--muted)}
.top .topic{font-size:.85rem}
.top .tb{border-radius:4px;color:var(--muted)}
.top .tb:hover,.top .tb.on{color:var(--text);background:transparent}
.search input{border-radius:4px;background:var(--bg-0);border:0;padding:4px 24px 4px 8px;height:24px;font-size:.82rem}

/* ---------- messages ---------- */
.msg{padding:2px 48px 2px 16px;margin-top:17px;gap:16px}
.msg.compact{margin-top:0}
.msg:hover{background:rgba(0,0,0,.06)}
[data-theme="light"] .msg:hover{background:rgba(6,6,7,.03)}
.msg.mentioned{background:var(--mention-bg)}
.msg.mentioned::before{width:2px;background:var(--mention-bar)}
.msg .gut{width:40px}
.msg .head{gap:8px}
.msg .name{font-weight:500;font-size:1rem;color:var(--text)}
.msg .ts{font-size:.75rem;color:var(--muted)}
.content{color:var(--text-2);line-height:1.375;font-size:1rem}
.content code{background:var(--code);border:0;border-radius:3px;padding:1px 4px}
.content pre{background:var(--code);border:1px solid rgba(0,0,0,.2);border-radius:4px}
.content blockquote{border-left:4px solid var(--bg-4);padding-left:12px}
.tag{background:var(--accent);border-radius:3px;padding:0 4px;font-size:.625rem;line-height:15px;height:15px}
.mention{border-radius:3px;padding:0 2px;background:color-mix(in srgb,var(--accent) 25%,transparent);color:color-mix(in srgb,var(--accent) 45%,#fff)}
[data-theme="light"] .mention{color:var(--accent)}
.divider{margin:24px 16px 8px;font-size:.75rem;font-weight:600;color:var(--muted)}
.divider::before,.divider::after{background:var(--line-2)}
.atts img,.atts video{border-radius:8px;border:0}
.file,.vmsg,.embed,.poll,.invite-card{border-radius:8px;background:var(--bg-1);border:1px solid var(--line)}
.sys{margin-top:8px;padding:2px 48px 2px 16px;font-size:.95rem}
.intro{padding:32px 16px 8px}
.intro .big{width:68px;height:68px;background:var(--bg-4)}
.intro h2{font-size:2rem;font-weight:700}

/* reactions */
.reacts{gap:4px;margin-top:4px}
.react{border-radius:8px;padding:2px 6px;background:var(--bg-1);border:1px solid transparent;font-size:.875rem;font-weight:600;gap:6px;color:var(--muted);transition:none}
.react:hover{border-color:var(--line-2);background:var(--bg-1);transform:none}
.react.mine{background:color-mix(in srgb,var(--accent) 15%,transparent);border-color:var(--accent);color:var(--text);box-shadow:none}
.react.add{background:transparent}

/* hover toolbar */
.acts{top:-16px;right:14px;border-radius:6px;padding:0;background:var(--bg-2);border:1px solid var(--line-2);box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.acts button{width:32px;height:32px;border-radius:0}
.acts button:hover{background:var(--hover);color:var(--text)}
.acts button.qr:hover{transform:none}
.acts>span{display:flex;align-items:center}
.acts .acts-s{display:none}
body.shift-held .acts .acts-n{display:none}
body.shift-held .acts .acts-s{display:flex}
.acts button.del{color:var(--red)}
.acts button.del:hover{background:color-mix(in srgb,var(--red) 18%,transparent);color:var(--red)}
.saved-list .res{display:block;width:100%;text-align:left}
.saved-list .rh .x{margin-left:auto;display:grid;color:var(--muted)}
.saved-list .rh .x:hover{color:var(--text)}
.saved-list .rh .x .ico{width:16px;height:16px}

/* composer */
.composer{padding:0 16px 24px}
.box{border-radius:8px;background:var(--bg-3);border:0;padding:0 4px;box-shadow:none}
.box:focus-within{border:0;box-shadow:none}
[data-theme="light"] .box{background:var(--bg-3)}
.box textarea{padding:11px 6px}
.box .cb{border-radius:4px;color:var(--muted);width:34px}
.box .cb .ico{width:22px;height:22px}
.box .cb:hover{color:var(--text)}
.reply-bar,.tray{border-radius:8px 8px 0 0;border:0;background:var(--bg-1)}
.reply-bar+.box,.tray+.box{border-radius:0 0 8px 8px}
.ac{border-radius:8px;padding:6px}
.ac button{border-radius:4px}
.blocked{border-radius:8px}
.jump-present{border-radius:16px;box-shadow:none}

/* member list */
.members{padding:0 8px 20px}
.members h5,.panel-h{font-size:.75rem;font-weight:600;letter-spacing:.02em;padding:24px 8px 4px}
.mem{border-radius:4px;padding:4px 8px}
.mem .nm{font-weight:500}

/* ---------- profile card ---------- */
.pcard{border-radius:8px;border:0;box-shadow:var(--shadow);background:var(--bg-float)}
.pcard .banner{height:105px}
.pcard .pav{margin:-46px 0 0 14px;border-width:6px}
.pcard .pinner,.pcard .phead,.pmenu{border-radius:8px;border:0}
.pcard h3{font-size:1.25rem;font-weight:700}
.pcard h6{font-size:.75rem;letter-spacing:.02em;color:var(--text-2)}
.pcard .pinner>h6:first-child{margin-top:0;padding-top:0;border-top:0}
.badges{border-radius:8px}
.badge{border-radius:4px}

/* ---------- modals, menus, popovers ---------- */
.backdrop{background:rgba(0,0,0,.7);backdrop-filter:none}
.modal{border-radius:8px;border:0;box-shadow:var(--shadow)}
.modal .mh{padding:16px 16px 0}
.modal .mh h2{font-size:1.25rem;font-weight:600}
.modal .mbd{padding:16px}
.modal .mf{padding:16px;border-radius:0 0 8px 8px;border-top:0;background:var(--bg-1)}
.radio-list label{border-radius:4px;background:var(--bg-1);border:0;padding:10px 12px}
.radio-list label:hover{background:var(--bg-3)}
.radio-list label:has(input:checked){background:var(--bg-4);border:0}
.choice{border-radius:8px;border:1px solid var(--line-2)}
.pop{border-radius:8px;border:0;box-shadow:var(--shadow)}
.menu-pop{padding:6px 8px}
.menu-pop button,.menu-pop label{border-radius:2px;padding:6px 8px;font-size:.875rem}
.menu-pop button:hover,.menu-pop label:hover{background:var(--accent);color:#fff}
.menu-pop button.danger:hover{background:var(--red);color:#fff}
.emoji-pop .eg button{border-radius:4px}
.emoji-pop .eg button:hover{transform:none}
.toast{border-radius:6px;border:0;box-shadow:var(--shadow)}
.tip{border-radius:4px;border:0}
.inbox .ni,.switcher .sl button{border-radius:4px}

/* ---------- settings ---------- */
.settings{grid-template-columns:1fr minmax(0,740px) 1fr;grid-template-rows:minmax(0,1fr);background:var(--bg-2);overflow:hidden}
.settings nav{background:var(--bg-1);padding:60px 6px 20px 20px;scrollbar-width:none}
.settings nav::-webkit-scrollbar{display:none}
.settings nav>div{width:218px;background:none;border:0;padding:0;height:max-content}
.settings nav h6{font-size:.75rem;font-weight:700;letter-spacing:.02em;color:var(--muted);padding:6px 10px}
.settings nav button{border-radius:4px;padding:6px 10px;margin-bottom:2px;font-weight:500;color:var(--muted)}
.settings nav button:hover{background:var(--hover);color:var(--text-2)}
.settings nav button.on{background:var(--active);color:var(--text);box-shadow:none}
.settings nav .nav-super{background:none;color:var(--muted)!important;font-weight:500}
.settings nav .nav-super:hover{background:var(--hover)}
.settings nav .nav-super.on{background:var(--active);color:var(--text)!important}
.settings .pane .pcard h3{font-size:1.25rem;font-weight:700;text-transform:none;letter-spacing:0;color:inherit;margin:0}
.settings .pane .pcard h6{margin:10px 0 4px}
.settings .pane{padding:60px 40px 80px;background:transparent;margin:0;border:0;border-radius:0}
.settings .pane h2{font-size:1.25rem;font-weight:600;margin-bottom:20px}
.settings .pane h3{font-size:.75rem;font-weight:700;letter-spacing:.02em;color:var(--text-2);margin:28px 0 10px}
.settings .close{padding:60px 20px}
.settings .close button{width:36px;height:36px;border:2px solid var(--muted);background:transparent}
.prof-grid{grid-template-columns:minmax(0,1fr) 300px;gap:24px}
.modal .kv{padding:7px 0}
.modal .card-box{padding:8px 14px}
.prev-col{top:0}
/* slash command menu */
.ac.cmds{padding:8px 6px;max-height:380px}
.ac.cmds h6{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;color:var(--text);text-transform:none;letter-spacing:0;padding:4px 8px 8px}
.ac .sc-ico{width:18px;height:18px;border-radius:4px;background:var(--text-2);color:var(--bg-1);display:grid;place-items:center;font-weight:900;font-size:.8rem;font-style:italic}
.ac.cmds button{display:block;padding:8px 10px;border-radius:6px}
.ac.cmds button.sel{background:var(--active)}
.ac .sc-n{display:block;font-weight:700;font-size:.98rem;color:var(--text)}
.ac .sc-n i{font-style:normal;font-weight:500;font-size:.8rem;color:var(--text-2);background:var(--bg-4);border-radius:4px;padding:1px 6px;margin-left:2px;vertical-align:1px}
.ac .sc-d{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}
/* Twemoji images */
img.emoji{height:1.375em;width:1.375em;margin:0 .05em 0 .1em;vertical-align:-.3em;display:inline-block}
.content.jumbo img.emoji{height:3rem;width:3rem;vertical-align:-.2em}
.react img.emoji,.acts .qr img.emoji{height:1.2em;width:1.2em;vertical-align:-.25em;margin:0}
.emoji-pop .eg button img.emoji{height:28px;width:28px;margin:0;vertical-align:middle}
.emoji-pop .ef img.emoji{height:1.4em;width:1.4em}
/* role mention popup */
.rm-pop{padding:10px 8px;min-width:240px;max-height:360px;overflow-y:auto}
.rm-pop h6{font-size:.8rem;font-weight:600;color:var(--muted);padding:2px 8px 8px}
.rm-row{display:flex;align-items:center;gap:10px;width:100%;padding:6px 8px;border-radius:4px;text-align:left;font-weight:600}
.rm-row:hover{background:var(--hover)}
.rm-row .crown{display:grid;color:var(--yellow)}.rm-row .crown .ico{width:16px;height:16px}
.mention.role{cursor:pointer}
/* role editor tabs + manage members */
.role-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line-2);margin:4px 0 18px}
.role-tabs button{padding:8px 0 10px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.role-tabs button:hover{color:var(--text-2)}
.role-tabs button.on{color:var(--text);border-bottom-color:var(--accent)}
.rm-head{margin-bottom:10px}
.rm-add{background:var(--bg-1);border-radius:8px;padding:6px;margin-bottom:14px}
.rm-line{display:flex;align-items:center;gap:12px;padding:8px;border-radius:6px}
.rm-line:hover{background:var(--hover)}
.rm-line>span{flex:1;min-width:0}
.rm-line b{display:block;font-weight:600}
.rm-line small{color:var(--muted);font-size:.8rem}
/* unsaved changes bar (replaces the inline Save buttons) */
.settings .pane [data-save]{display:none}
.unsaved{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);width:min(700px,calc(100vw - 32px));display:flex;align-items:center;gap:10px;padding:10px 10px 10px 16px;background:var(--bg-float);border:1px solid var(--line-2);border-radius:8px;box-shadow:var(--shadow);z-index:60;animation:unsaved-in .18s ease-out}
.unsaved[hidden]{display:none}
.unsaved span{flex:1;font-weight:600}
.unsaved .btn.ghost{color:var(--accent-2,#a4b0ff);color:#9fb0ff}
.unsaved.nudge{animation:unsaved-nudge .4s;background:#3a0d18;border-color:var(--red)}
@keyframes unsaved-in{from{opacity:0;transform:translate(-50%,12px)}}
@keyframes unsaved-nudge{0%,100%{transform:translateX(-50%)}20%,60%{transform:translateX(calc(-50% - 8px))}40%,80%{transform:translateX(calc(-50% + 8px))}}
.settings.dirty .pane{padding-bottom:120px}
.perm-sec{font-size:1rem;font-weight:700;color:var(--text);margin:22px 0 4px}
.perm-sec:first-of-type{margin-top:4px}
.perm-row .tx small{max-width:440px}
.tri{border:0;background:var(--bg-0);border-radius:6px;padding:2px;gap:2px}
.tri button{width:30px;height:26px;border:0;border-radius:4px;font-weight:700}
.tri .d{color:#ff5c77}.tri .a{color:var(--green)}.tri .i{color:var(--text-2)}
.tri .d.on{background:var(--red);color:#fff}.tri .i.on{background:var(--bg-4);color:var(--text)}.tri .a.on{background:var(--green);color:#fff}
.pick{border-radius:8px;border:2px solid transparent;background:var(--bg-1)}
.pick:hover{border-color:var(--line-2);transform:none}
.pick.on{border-color:var(--accent);background:var(--bg-1);box-shadow:none}
.swatches{gap:6px;flex-wrap:nowrap}
.swatches button,.swatches input[type=color]{width:28px;height:28px;flex:none}
.swatches button:hover{transform:none}
.swatches button.on{border-color:var(--text);box-shadow:none}
.theme-pick button{border-radius:8px;border-width:2px}
.theme-pick button.on{box-shadow:none}
.status-list button{border-radius:4px;border:0;background:var(--bg-1)}
.status-list button.on{background:var(--bg-4)}
@media (max-width:1100px){ .settings{grid-template-columns:auto minmax(0,1fr) auto} .settings .pane{padding:60px 24px 70px} }
@media (max-width:900px){ .prof-grid{grid-template-columns:1fr} .prev-col{position:static} }
@media (max-width:760px){
  .settings{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .settings nav{padding:56px 8px 8px}
  .settings nav>div{width:100%}
  .settings .pane{padding:20px 16px 60px}
}

/* ---------- friends / home / discover ---------- */
.tabs button{border-radius:4px;padding:2px 8px;font-weight:500}
.tabs button.addf{background:var(--green)}
.person{border-radius:8px}
.scard,.dcard,.discover .hero,.active-now .an{border-radius:8px;border:0;background:var(--bg-1)}
.dcard:hover,.scard:hover{background:var(--bg-3)}

/* ---------- auth ---------- */
.auth{background:radial-gradient(900px 500px at 50% -10%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),var(--bg-0)}
[data-theme="light"] .auth{background:radial-gradient(900px 500px at 50% -10%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%),var(--bg-0)}
.auth-card{border-radius:14px;border:1px solid var(--line-2);padding:32px;background:var(--bg-1);box-shadow:var(--shadow)}
.auth-card .logo{justify-content:center;margin-bottom:20px}
.auth-card h1{font-size:1.5rem;font-weight:600;text-align:center}
.auth-card .sub{text-align:center}
.code-input{border-radius:4px}
.auth-card .or{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--muted);font-size:.8rem}
.auth-card .or::before,.auth-card .or::after{content:"";flex:1;height:1px;background:var(--line-2)}
.auth-card .or[hidden]{display:none}
.discord-btn{background:#5865f2;text-decoration:none;gap:10px}
.discord-btn:hover{background:#4752c4}
.discord-btn[hidden]{display:none}

/* ---------- server lobby page ---------- */
.lobby{flex:1;min-width:0;background:var(--bg-2)}
.lb-hero{height:200px;background-size:cover;background-position:center}
.lb-wrap{max-width:820px;margin:-56px auto 0;padding:0 24px 48px;position:relative}
.lb-head{text-align:center;margin-bottom:24px}
.lb-icon{width:96px;height:96px;margin:0 auto 12px;border-radius:24px;padding:6px;background:var(--bg-2)}
.lb-icon img,.lb-icon span{width:100%;height:100%;border-radius:18px;display:grid;place-items:center;object-fit:cover;color:#fff;font-weight:700;font-size:1.6rem}
.lb-head h1{font-size:1.75rem;font-weight:700}
.lb-desc{color:var(--text-2);margin-top:4px}
.lb-stats{display:flex;justify-content:center;gap:16px;margin-top:8px;font-size:.85rem;color:var(--muted);flex-wrap:wrap}
.lb-stats b{color:var(--text-2);font-weight:600}
.lb-stats span{display:inline-flex;align-items:center;gap:6px}
.lb-stats .lv{color:#f47fff;font-weight:600}.lb-stats .lv .ico{width:13px;height:13px}
.lobby .dot{width:8px;height:8px;border-radius:50%;background:var(--faint);display:inline-block}.lobby .dot.on{background:var(--green)}
.lb-cta{display:flex;justify-content:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.lb-card{background:var(--bg-1);border-radius:8px;padding:16px;margin-bottom:12px}
.lb-card h6{display:flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--text-2);margin-bottom:12px}
.lb-card>p{color:var(--text-2)}
.lb-muted{color:var(--muted);font-size:.9rem;margin-bottom:12px}
.lb-grid{display:grid;gap:8px}
.lb-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.lb-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.lb-vc,.lb-ch{display:flex;align-items:center;gap:10px;padding:10px;border-radius:6px;background:var(--bg-2);text-align:left;min-width:0}
.lb-vc:hover,.lb-ch:hover{background:var(--bg-3)}
.lb-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--bg-4);color:var(--text-2)}
.lb-ic .ico{width:16px;height:16px}
.lb-t{flex:1;min-width:0}
.lb-t b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-t small{display:block;font-size:.75rem;color:var(--muted)}
.lb-t small.on{color:var(--green)}
.lb-ch>.ico{width:16px;height:16px;color:var(--faint);flex:none}
.lb-avs{display:flex;align-items:center}
.lb-avs .av{margin-left:-6px;box-shadow:0 0 0 2px var(--bg-2)}
.lb-avs i{font-style:normal;font-size:.75rem;font-weight:600;margin-left:4px;color:var(--muted)}
.lb-faq details{background:var(--bg-2);border-radius:6px;margin-bottom:4px}
.lb-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;font-weight:600;cursor:pointer;border-radius:6px}
.lb-faq summary:hover{background:var(--bg-3)}
.lb-faq summary::-webkit-details-marker{display:none}
.lb-faq summary .ico{width:16px;height:16px;color:var(--muted);transition:transform .15s}
.lb-faq details[open] summary .ico{transform:rotate(180deg)}
.lb-faq p{padding:0 12px 12px;color:var(--text-2);font-size:.94rem}
@media (max-width:900px){ .lb-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .lb-grid.two,.lb-grid.three{grid-template-columns:1fr} .lb-wrap{padding:0 12px 40px} .lb-head h1{font-size:1.4rem} }

/* ---------- small screens ---------- */
@media (max-width:760px){ .app{grid-template-columns:1fr} }

/* ---------- developer portal ---------- */
.devp{flex:1;min-width:0;background:var(--bg-2)}
.copyrow select.input{font-family:inherit;font-size:.95rem}
.dev-wrap{max-width:900px;margin:0 auto;padding:32px 32px 60px}
.dev-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px}
.dev-head h1,.dev-title h1{font-size:1.5rem;font-weight:700}
.dev-head .hint{margin-top:4px;max-width:520px}
.dev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.dev-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 14px 16px;border-radius:10px;background:var(--bg-1);border:1px solid var(--line);text-align:center;transition:transform .15s ease,border-color .15s ease,background-color .15s ease}
.dev-card:hover{transform:translateY(-2px);border-color:var(--line-2);background:var(--bg-3)}
.dev-card b{font-weight:600}.dev-card small{color:var(--muted);font-size:.8rem}
.app-ic{display:grid;place-items:center;border-radius:22%;color:#fff;font-weight:700;object-fit:cover;flex:none}
.dev-empty{text-align:center;padding:60px 20px;background:var(--bg-1);border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:8px}
.dev-empty>.ico{width:42px;height:42px;color:var(--faint)}
.dev-empty p{color:var(--muted);margin-bottom:8px}
.dev-title{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.dev-row{display:flex;gap:28px;align-items:flex-start}
.dev-icon{display:flex;flex-direction:column;align-items:center;gap:10px}
.dev-danger{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:36px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--red) 40%,transparent);border-radius:8px}
.dev-danger b{display:block}.dev-danger small{color:var(--muted)}
.dev-bot{display:flex;align-items:center;gap:14px;padding:16px;background:var(--bg-1);border-radius:10px;margin-bottom:8px}
.dev-bot b{display:block;font-size:1.1rem}.dev-bot small{color:var(--muted)}
.devp h3{font-size:.75rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--text-2);margin:26px 0 8px}
.dev-docs h4{font-size:.95rem;margin:16px 0 6px}
.dev-docs h4:first-child{margin-top:0}
.dev-docs pre{background:var(--code);border-radius:8px;padding:10px 12px;overflow-x:auto;font:.82rem/1.5 'JetBrains Mono',ui-monospace,monospace;color:var(--text-2)}
.dev-docs p{color:var(--text-2);font-size:.92rem}
.dev-docs code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.85em}
@media (max-width:700px){ .dev-row{flex-direction:column} .dev-head{flex-direction:column} .dev-wrap{padding:20px 16px 40px} }

.dev-title .tag{margin-left:4px}
.on-dot{color:var(--green);font-weight:600}
.cmd-list{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.cmd-row{display:flex;align-items:center;gap:12px;background:var(--bg1);border-radius:8px;padding:10px 12px}
.cmd-row>div{flex:1;min-width:0}
.cmd-row b{display:block;font-weight:700}
.cmd-row b i{font-style:normal;font-weight:500;font-size:.8rem;background:var(--bg-4);border-radius:4px;padding:1px 6px;margin-left:2px}
.cmd-row small{color:var(--muted)}
.cmd-new{display:grid;grid-template-columns:1fr 1.4fr 1.4fr auto;gap:8px;margin:8px 0}
@media (max-width:800px){ .cmd-new{grid-template-columns:1fr} }
.inst-perms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;margin:6px 0}
.inst-perms.gen{grid-template-columns:repeat(3,minmax(0,1fr))}
.inst-perms label{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:6px;cursor:pointer;font-size:.92rem}
.inst-perms label:hover{background:var(--hover)}
.inst-perms input{accent-color:var(--accent);width:16px;height:16px}
@media (max-width:700px){ .inst-perms,.inst-perms.gen{grid-template-columns:1fr} }
.inst-head{text-align:center;margin-bottom:16px}
.inst-head .app-ic{margin:0 auto 10px}
.inst-head h2{font-size:1.3rem;display:flex;align-items:center;justify-content:center;gap:8px}
.inst-desc{color:var(--text-2);margin-top:8px;font-size:.92rem}
.verify-box{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:10px;background:var(--bg1)}
.verify-box>.ico{width:26px;height:26px;color:var(--muted)}
.verify-box.verified>.ico{color:var(--green)}.verify-box.pending>.ico{color:var(--yellow)}
.verify-box b{display:block}.verify-box small{color:var(--muted)}
.cmd-ref .cmd-name{color:#a98bff;font-weight:600}
.ephemeral{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:.8rem;color:var(--muted)}
.ephemeral .ico{width:14px;height:14px}
.ac h6 .app-ic{border-radius:5px}
.adm-app{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:8px;background:var(--bg1);margin-bottom:8px}
.adm-app .tx{flex:1;min-width:0}.adm-app b{display:flex;align-items:center;gap:6px}
.adm-app small{color:var(--muted);font-size:.8rem}.adm-app p{color:var(--text-2);font-size:.9rem;margin-top:6px}

/* context menus with submenus (Discord-style) */
.menu-wrap{overflow:visible}
.menu-pop{min-width:220px;padding:6px}
.menu-pop hr{margin:6px 4px;border-top-color:var(--line-2)}
.menu-pop button{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:4px;font-size:.875rem;font-weight:500;color:var(--text-2)}
.menu-pop button .lbl{flex:1;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.menu-pop button .lbl small{font-size:.72rem;color:var(--muted);font-weight:400;margin-top:1px}
.menu-pop button .lead{display:grid;color:var(--muted)}.menu-pop button .lead .ico{width:16px;height:16px}
.menu-pop button .chev{display:grid;color:var(--muted)}.menu-pop button .chev .ico{width:16px;height:16px}
.menu-pop button:hover,.menu-pop button.open{background:var(--hover);color:var(--text)}
.menu-pop button:hover .lead,.menu-pop button:hover .chev,.menu-pop button.open .chev,.menu-pop button:hover .lbl small{color:var(--text-2)}
.menu-pop button.danger{color:#ff6b81}.menu-pop button.danger:hover{background:var(--red);color:#fff}
.menu-pop button.dis{color:var(--faint);cursor:default}.menu-pop button.dis:hover{background:none;color:var(--faint)}
.menu-pop .radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--muted);flex:none;position:relative}
.menu-pop .radio.on{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--bg-float)}
.menu-pop.submenu{position:absolute;z-index:2;background:var(--bg-float);border-radius:8px;box-shadow:var(--shadow);max-height:none;animation:lu-drop .12s var(--ease)}
.ch .n .sub{display:block;font-size:.72rem;color:var(--faint);font-weight:400}

/* ---------- motion: quick, soft transitions everywhere ---------- */
:root{--ease:cubic-bezier(.2,.8,.2,1)}
.ch,.mem,.icon-btn,.top .tb,.react,.pick,.tri button,.cat,.find,.invite-pill,.settings nav button,.role-tabs button,.menu-pop button,.menu-pop label,.ac button,.lb-vc,.lb-ch,.person,.rm-row,.rm-line,.box .cb,.acts button,.mb-chev,.tabs button,.seg button,.swatches button,.radio-list label,.status-list button,.theme-pick button,.choice{transition:background-color .15s ease,color .15s ease,border-color .15s ease,opacity .15s ease,transform .15s var(--ease)}
.sw,.sw::after{transition:background-color .2s ease,transform .2s var(--ease)}
.cat .chev .ico{transition:transform .2s var(--ease)}
@keyframes lu-fade{from{opacity:0}}
@keyframes lu-pop{from{opacity:0;transform:scale(.96)}}
@keyframes lu-drop{from{opacity:0;transform:translateY(-4px)}}
@keyframes lu-rise{from{opacity:0;transform:translateY(6px)}}
@keyframes lu-slide{from{opacity:0;transform:scale(1.02)}}
.backdrop{animation:lu-fade .16s ease-out}
.modal{animation:lu-pop .2s var(--ease)}
.pop{animation:lu-drop .14s var(--ease)}
.settings{animation:lu-slide .2s var(--ease)}
.toast{animation:lu-rise .22s var(--ease)}
.ac{animation:lu-rise .14s var(--ease)}
.unsaved{animation:lu-rise .2s var(--ease)}
/* no fade on views: they re-render on every live update (reactions etc.) and the fade replayed/stuck */
.msg:hover .acts,.sys:hover .acts{animation:lu-fade .12s ease-out}
.lb-faq details[open] p{animation:lu-drop .18s var(--ease)}
.jump-present{animation:lu-rise .2s var(--ease)}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} }

/* ===== simpler, smaller profile popup ===== */
.pcard-pop .pcard{width:290px}
.pcard-pop .pcard .banner{height:84px}
.pcard-pop .pcard .pav{margin:-38px 0 0 12px;border-width:5px}
.pcard-pop .pcard .pav .av{width:68px!important;height:68px!important}
.pcard-pop .pcard .pb{padding:2px 12px 12px}
.pcard-pop .pcard .phead{padding:8px 10px;margin-bottom:6px}
.pcard-pop .pcard h3{font-size:1.1rem}
.pcard-pop .pcard .pinner{padding:10px}
.pcard-pop .pcard .pinner h6{margin:8px 0 3px;font-size:.7rem}
.pcard-pop .pcard .pacts{top:92px}
.pcard-pop .pcard:has(.pbubble) .pacts{top:104px}
.pcard-pop .pbubble{left:88px;top:68px;font-size:.78rem;padding:4px 9px}
.me-pop .pcard{width:300px}

/* ===== simpler settings ===== */
.settings{background:var(--bg-1)}
.settings nav{background:var(--bg-0);padding:48px 8px 20px 16px}
.settings nav>div{width:200px}
.settings nav h6{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint,var(--muted));padding:14px 10px 4px}
.settings nav h6:first-child{padding-top:0}
.settings nav button{border-radius:6px;padding:7px 10px;font-size:.9rem}
.settings nav hr{border:0;border-top:1px solid var(--line);margin:10px 8px}
.settings .pane{padding:48px 40px 80px;max-width:700px}
.settings .pane h2{font-size:1.35rem;font-weight:700;margin:0 0 22px;letter-spacing:-.01em}
.settings .pane h3{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:30px 0 10px}
.settings .pane .field{display:block;margin-bottom:16px}
.settings .pane .field>span{display:block;font-size:.8rem;font-weight:600;color:var(--text-2);margin-bottom:6px}
.settings .pane .input{border-radius:8px;background:var(--bg-0);border:1px solid var(--line);padding:9px 12px}
.settings .pane .input:focus{border-color:var(--brand,#7C3CFF);outline:none}
.settings .pane .card-box{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:4px 14px}
.settings .pane .toggle{padding:12px 0}
.settings .pane .card-box .toggle+.toggle{border-top:1px solid var(--line)}
.settings .pane .hint{font-size:.8rem;color:var(--muted)}
.settings .pane .pick-grid{gap:8px}
.settings .pane .pick{border-radius:10px;background:var(--bg-2);border:1px solid var(--line)}
.settings .pane .pick.on{border-color:var(--brand,#7C3CFF);box-shadow:0 0 0 1px var(--brand,#7C3CFF)}
.settings .pane .prof-grid{gap:32px}
.settings .close{padding:48px 20px}
.settings .close button{width:34px;height:34px;border-width:1.5px;opacity:.75}
.settings .close button:hover{opacity:1}
@media (max-width:760px){.settings .pane{padding:24px 16px 80px}}
.settings .pane .field>span{text-transform:none;letter-spacing:0;font-size:.85rem}
.settings .pane .prev-col{position:sticky;top:0;align-self:start}

/* ===== clean & simple pass ===== */
.pbubble.mine{cursor:pointer;font:inherit;font-size:.78rem;font-weight:500}
.pbubble.mine:hover{border-color:var(--accent)}
.me-pop .pcard .pinner .about{max-height:96px;overflow:auto}
.me-pop .pmenu button{padding:7px 10px;font-size:.88rem}
.me-pop .pmenu{padding:4px}
.side,.members{border:0}
.rail{background:var(--bg-0)}
.top{box-shadow:none;border-bottom:1px solid var(--line)}
.composer .box,.composer form{border-radius:10px}
.btn{border-radius:8px;box-shadow:none}
.btn:not(.ghost):not(.soft):not(.danger):not(.green){background:var(--accent)}
.btn:not(.ghost):not(.soft):not(.danger):not(.green):hover{background:var(--accent-hover)}
.menu-pop,.pop .modal,.modal{border-radius:12px;border:1px solid var(--line-2);box-shadow:var(--shadow)}
.ri .icon{border-radius:14px;transition:border-radius .15s}
.ri .icon:hover,.ri.on .icon{border-radius:12px}

/* ===== clean & simple pass 2 ===== */
.lb-hero{height:140px}
/* composer: just GIF + emoji (gift/stickers/apps stay reachable from the emoji picker & + menu) */
.composer [data-act="gift"],.composer [data-act="sticker"],.composer [data-act="apps"]{display:none}
/* rail: one accent for active/hover instead of green */
.rail .ri.on .icon,.rail .ri .icon:hover{background:var(--accent)!important;color:#fff!important}
.rail .ri .icon{background:var(--bg-2)}
/* messages: quieter meta, calmer bot tag & crown */
.msg .time,.msg time{color:var(--faint);font-size:.72rem}
.msg .tag.bot,.bot-tag{background:color-mix(in srgb,var(--accent) 80%,#000);font-size:.62rem}
/* headings & big empty states lighter */
.chat .welcome h1,.chat .start h1{font-size:1.7rem;font-weight:700}
.chat .welcome .bigic,.chat .start .bigic{background:var(--bg-2)}
/* cards: one flat surface */
.lb-sec,.discover .hero,.dcard,.card-box{background:var(--bg-2);border:1px solid var(--line);box-shadow:none}
.dcard:hover{border-color:var(--line-2);transform:none}
/* section labels everywhere: same small caps */
.cat .t,.members h6,.lb-sec h6{font-size:.68rem;letter-spacing:.06em;color:var(--faint)}
.closed-note{background:color-mix(in srgb,var(--yellow) 12%,transparent);border:1px solid color-mix(in srgb,var(--yellow) 35%,transparent);color:var(--text);border-radius:8px;padding:10px 12px;font-size:.85rem;margin-bottom:14px}

/* ===== onboarding ===== */
.ob-ov{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:16px;background:radial-gradient(800px 500px at 50% 0,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%),rgba(8,8,10,.92)}
.ob-box{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--bg-1);border:1px solid var(--line-2);border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.ob-top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.ob-top small{display:block;color:var(--muted);font-size:.78rem}.ob-top b{font-size:1.05rem}
.ob-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;overflow:hidden;flex:none}
.ob-ic img{width:100%;height:100%;object-fit:cover}
.ob-pv{margin-left:auto;font-size:.7rem;font-weight:700;background:var(--bg-3);padding:3px 8px;border-radius:99px;color:var(--muted)}
.ob-prog{display:flex;gap:6px;margin-bottom:20px}.ob-prog i{flex:1;height:4px;border-radius:4px;background:var(--bg-3)}.ob-prog i.on{background:var(--accent)}
.ob-welcome{color:var(--text-2);margin:0 0 16px}
.ob-box h2{font-size:1.35rem;margin:0 0 4px}
.ob-sub{color:var(--muted);font-size:.85rem;margin:0 0 16px}
.ob-opts{display:grid;gap:8px}
.ob-opt{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);transition:border-color .12s,background .12s}
.ob-opt:hover{border-color:var(--line-2);background:var(--bg-3)}
.ob-opt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg-2))}
.ob-opt .em{font-size:1.4rem;width:28px;text-align:center}
.ob-opt>span:not(.em){flex:1;min-width:0}.ob-opt b{display:block}.ob-opt small{color:var(--muted)}
.ob-opt .ck{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;color:transparent}
.ob-opt.on .ck{background:var(--accent);border-color:var(--accent);color:#fff}.ob-opt .ck .ico{width:12px;height:12px}
.ob-rules{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:14px;max-height:280px;overflow:auto;color:var(--text-2);margin:12px 0}
.ob-agree{display:flex;gap:8px;align-items:center;font-weight:500}
.ob-f{display:flex;gap:8px;margin-top:22px}
.ob-f .btn[disabled]{opacity:.45;pointer-events:none}
/* onboarding editor */
.ob-q{padding:14px!important;margin-bottom:12px}
.ob-qh{display:flex;gap:8px}.ob-qh .input{flex:1;font-weight:600}
.ob-flags{display:flex;gap:16px;margin:10px 0;font-size:.85rem;color:var(--text-2)}.ob-flags label{display:flex;gap:6px;align-items:center}
.ob-o{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px}
.ob-em{width:52px!important;text-align:center;flex:none}
.ob-ot{flex:1;display:grid;gap:4px;min-width:0}
.ob-roles{width:150px;flex:none;height:64px}
@media (max-width:640px){.ob-o{flex-wrap:wrap}.ob-roles{width:100%}}
.wave-btn{width:36px;height:36px;border-radius:50%;background:var(--bg-3);font-size:1.05rem;display:grid;place-items:center;margin-right:6px;transition:transform .15s}
.wave-btn:hover{transform:rotate(-14deg) scale(1.08);background:var(--bg-4)}
.ri .badge{right:-3px;bottom:-3px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;border:3px solid var(--bg-0);box-sizing:content-box;font:700 11px/1 Inter,system-ui,sans-serif;font-style:normal;display:flex;align-items:center;justify-content:center;transform:none;letter-spacing:0;z-index:2}

/* rail badges: small round red dot with count, bottom-right, ringed with the rail color */
.rail .ri{position:relative}
.rail .ri .badge{position:absolute;left:auto;top:auto;right:2px;bottom:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#f23f43;color:#fff;border:3px solid var(--bg-0);box-sizing:content-box;font:700 10.5px/16px Inter,system-ui,sans-serif;text-align:center;display:block;box-shadow:none;transform:none;width:auto}
/* server name tooltip */
.tip{background:#111214;color:#f2f3f5;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:7px 11px;font:600 .86rem/1.2 Inter,system-ui,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.45);animation:none}
.rail .ri .badge{padding:0 2px;min-width:14px;right:0;bottom:-3px}
.tip.tip-rich{white-space:normal;max-width:260px;padding:10px 12px;border-radius:10px}
.tip-rich .tr-h{display:flex;align-items:center;gap:8px}
.tip-rich .tr-h .ob-ic{width:22px;height:22px;border-radius:6px;font-size:.6rem}
.tip-rich .tr-h b{font-size:.92rem}
.tip-rich .tr-l{margin-top:4px;color:#b5b8c0;font-size:.8rem;font-weight:500}.tip-rich .tr-l b{color:#e6e7ea}
.tip-rich .tr-v{display:flex;align-items:center;gap:4px;margin-top:8px}.tip-rich .tr-v>.ico{width:16px;height:16px;color:#b5b8c0;margin-right:2px}
.tip-rich .tr-v i{font-style:normal;font-size:.75rem;color:#b5b8c0;margin-left:2px}
/* server Access */
.acc-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:14px 0 6px}
.acc-mode{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line)}
.acc-mode:hover:not([disabled]){border-color:var(--line-2)}
.acc-mode.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg-2))}
.acc-mode small{color:var(--muted);font-size:.8rem;line-height:1.35}
.acc-ic{width:34px;height:34px;border-radius:10px;background:var(--bg-3);display:grid;place-items:center;margin-bottom:6px}
.acc-mode.on .acc-ic{background:var(--accent);color:#fff}
.acc-ic .ico{width:18px;height:18px}
.acc-app{gap:12px;padding:10px 0}
.pcard .pav{cursor:zoom-in}
.pfp-zoom{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.82);display:grid;place-items:center;cursor:zoom-out;animation:lu-fade .15s ease-out}
.pfp-zoom img{width:min(420px,80vw);height:min(420px,80vw);object-fit:cover;border-radius:50%;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.pfp-big{border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;box-shadow:0 20px 60px rgba(0,0,0,.6)}
/* Developer Portal switched off for now */
[data-go="@dev"],[data-act="dev-portal"],.rail .ri:has([data-go="@dev"]){display:none!important}

/* ===== frosted glass look (whole app) ===== */
:root:not([data-theme="light"]) .app{background:
  radial-gradient(900px 600px at 15% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 65%),
  radial-gradient(800px 600px at 100% 100%,rgba(56,120,255,.16),transparent 60%),
  radial-gradient(600px 500px at 60% 40%,rgba(255,90,200,.08),transparent 60%),
  #0b0b0f}
:root:not([data-theme="light"]) .app>.rail{background:rgba(10,10,14,.55);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
:root:not([data-theme="light"]) .app>.side{background:rgba(20,20,26,.55);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border-right:1px solid rgba(255,255,255,.05)}
:root:not([data-theme="light"]) .app>.main{background:rgba(24,24,30,.42);backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%)}
:root:not([data-theme="light"]) .main .top{background:rgba(24,24,30,.35)}
:root:not([data-theme="light"]) .main .members,:root:not([data-theme="light"]) .main .now,:root:not([data-theme="light"]) .main aside{background:rgba(16,16,22,.35)}
:root:not([data-theme="light"]) .main .chat,:root:not([data-theme="light"]) .main .body,:root:not([data-theme="light"]) .main .home,:root:not([data-theme="light"]) .main .lobby{background:transparent}
:root:not([data-theme="light"]) .composer .box,:root:not([data-theme="light"]) .main .input[data-homeq]{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
:root:not([data-theme="light"]) .me-card{background:rgba(255,255,255,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
:root:not([data-theme="light"]) .pop .pcard,:root:not([data-theme="light"]) .menu-pop,:root:not([data-theme="light"]) .modal{background:rgba(22,22,28,.78);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}
:root:not([data-theme="light"]) .settings{background:rgba(14,14,18,.82);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
:root:not([data-theme="light"]) .settings nav{background:rgba(0,0,0,.25)}
:root:not([data-theme="light"]) .app>.main{background:rgba(24,24,30,.26)}
:root:not([data-theme="light"]) .app>.side{background:rgba(20,20,26,.4)}
:root:not([data-theme="light"]) .app>.rail{background:rgba(10,10,14,.4)}

/* ===== polish pass: feel & flow ===== */
/* thin, quiet scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px;border:2px solid transparent;background-clip:padding-box}*::-webkit-scrollbar-track{background:transparent}
/* channel list: soft pill + accent bar on the active one */
.side .ch{border-radius:8px;transition:background-color .12s,color .12s}
.side .ch.on,.side .ch.active{background:rgba(255,255,255,.08);box-shadow:inset 3px 0 0 var(--accent)}
.side .ch:hover:not(.on):not(.active){background:rgba(255,255,255,.045)}
/* rail: icons morph from circle to rounded square on hover, pip grows */
.rail .ri .icon{border-radius:50%;transition:border-radius .18s var(--ease),background-color .15s,transform .15s}
.rail .ri .icon:hover,.rail .ri.on .icon{border-radius:14px}
.rail .ri .icon:active{transform:translateY(1px) scale(.97)}
.rail .pip{transition:height .18s var(--ease),opacity .18s}
/* messages: gentle hover band, rounded */
.msg{border-radius:8px;transition:background-color .1s}
.msg:hover{background:rgba(255,255,255,.035)}
.msg .acts{border-radius:10px;background:rgba(28,28,34,.92);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 18px rgba(0,0,0,.35)}
/* composer: glow on focus */
.composer .box{transition:box-shadow .15s,border-color .15s}
.composer .box:focus-within{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
/* member list & friend rows */
.mem,.person{border-radius:8px;transition:background-color .1s}
.mem:hover,.person:hover{background:rgba(255,255,255,.05)}
/* buttons: subtle lift */
.btn{transition:background-color .15s,transform .12s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.icon-btn{border-radius:8px}
/* keyboard focus that's visible but tidy */
:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 70%,#fff);outline-offset:2px;border-radius:6px}
/* top bar tabs (Online / All / Pending...) as soft pills */
.top .tb,.tabs button{border-radius:8px}
/* toasts: glass */
.toast{background:rgba(24,24,30,.86)!important;backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:12px!important}
/* popovers & menus open with a small rise */
.menu-pop{animation:lu-rise .14s var(--ease)}
/* unread channel: brighter name + dot */
.side .ch.unread .n{color:var(--text);font-weight:600}
/* respect reduced motion */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* fix: large backdrop blurs made Chrome skip painting parts of settings; the glow behind is smooth already, so panels don't need them */
.app>.rail,.app>.side,.app>.main,.main .top,.settings,.settings nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
:root:not([data-theme="light"]) .settings{background:#121216}
:root:not([data-theme="light"]) .settings nav{background:#0d0d10}
.settings .pane,.settings>div,.settings .close{border:0!important;box-shadow:none!important}
.settings .pane{max-width:none}
.settings .pane>*{max-width:740px}
.dm-h{padding:6px 10px 4px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* voice: Discord-style stage when someone streams / a tile is focused */
.vroom .vstage{flex:1;display:flex;flex-direction:column;gap:8px;padding:8px;min-height:0}
.vroom .vmain{flex:1;min-height:0;display:flex}
.vroom .vmain .tile{flex:1;aspect-ratio:auto;height:100%;cursor:zoom-out}
.vroom .vstrip{flex:none;display:flex;gap:8px;overflow-x:auto;justify-content:center;padding-bottom:2px}
.vroom .vstrip .tile{flex:none;width:200px;cursor:zoom-in}
.vroom .vstrip .tile .av{width:48px!important;height:48px!important}
.vroom .grid .tile[data-focus]{cursor:zoom-in}
.tile .tfs{position:absolute;z-index:3;right:10px;bottom:10px;width:32px;height:32px;border-radius:8px;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;opacity:0;transition:opacity .12s}
.tile:hover .tfs{opacity:1}.tile .tfs .ico{width:16px;height:16px}
.tile.stile{background:#000}
.tile:fullscreen{border-radius:0;outline:0}.tile:fullscreen video{object-fit:contain}
/* server tags */
.stag{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:0 6px;height:18px;border-radius:5px;font:800 .66rem/18px Inter,system-ui,sans-serif;letter-spacing:.05em;color:#fff;background:color-mix(in srgb,var(--tc) 55%,#1a1a20);border:1px solid color-mix(in srgb,var(--tc) 70%,transparent);vertical-align:2px;white-space:nowrap}
.stag i{font-style:normal;font-size:.72rem}
.tag-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}@media(max-width:760px){.tag-grid{grid-template-columns:1fr}}
.tag-badges{display:flex;flex-wrap:wrap;gap:6px}.tag-badges button{width:38px;height:38px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);font-size:1.1rem}.tag-badges button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,var(--bg-2))}
.tag-prev .label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.msg-prev{display:flex;gap:12px;padding:14px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line)}
/* DM call panel above the chat */
.dm-call.vroom{flex:none;height:min(46vh,420px);display:flex;flex-direction:column;border-bottom:1px solid var(--line);background:#000}
.dm-call.vroom .grid{flex:1;align-content:center}
.dm-call.vroom .join{padding:18px}
.dm-call.vroom .ctrl{padding:8px}
/* soundboard */
.snd-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.snd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:14px}
.snd-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line)}
.snd-item b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snd-play{width:36px;height:36px;border-radius:10px;background:var(--bg-3);font-size:1.15rem}
.snd-pop{width:300px;padding:4px}
.snd-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px}
.snd-pgrid button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:10px;background:var(--bg-3)}
.snd-pgrid button:hover{background:var(--bg-4);transform:translateY(-1px)}
.snd-pgrid span{font-size:1.4rem}.snd-pgrid small{font-size:.72rem;color:var(--text-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snd-float{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:9500;background:rgba(24,24,30,.9);border:1px solid rgba(255,255,255,.1);padding:8px 14px;border-radius:999px;font-weight:600;font-size:.88rem;animation:lu-rise .2s var(--ease);pointer-events:none}

/* ===== phone & iPad ===== */
html,body{-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
.app{height:100dvh}
/* iPhone notch / home bar */
@supports (padding:env(safe-area-inset-bottom)){
  .app{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .composer-wrap{padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .me-card{margin-bottom:max(8px,env(safe-area-inset-bottom))}
  .top{padding-top:env(safe-area-inset-top)}
  .settings{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
}
/* touch screens: things that only showed on hover are always visible / bigger targets */
@media (hover:none){
  .tile .tfs,.tile .lbl.nm{opacity:1}
  .tile:hover .mchip{left:10px;right:auto}
  .rail .ri .icon:hover{border-radius:50%}
  .btn:hover{transform:none}
  .icon-btn,.tb{min-width:40px;min-height:40px}
  .side .ch{min-height:40px}
  .msg .acts{opacity:1}
}
/* iOS zooms into inputs smaller than 16px */
@media (max-width:900px){input,textarea,select,.input{font-size:16px!important}}
/* tablets: hide the "Active now" column and member list unless opened, keep chat roomy */
@media (max-width:1100px){
  .homeview .now,.home .now,.main .now{display:none}
  .vroom .vstrip .tile{width:160px}
}
/* phones */
@media (max-width:640px){
  .top{gap:4px}
  .top .title{min-width:0;overflow:hidden}
  .top .tabs,.top .htabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;min-width:0}
  .top .tabs::-webkit-scrollbar,.top .htabs::-webkit-scrollbar{display:none}
  .top .tabs button,.top .htabs button{flex:none}
  .vroom .grid{grid-template-columns:1fr;gap:6px;padding:6px}
  .vroom .vstrip .tile{width:120px}
  .vroom .ctrl{gap:6px;padding:8px;flex-wrap:nowrap;overflow-x:auto}
  .vroom .ctrl button{width:48px;height:44px;flex:none}
  .dm-call.vroom{height:42vh}
  .pcard-pop .pcard,.me-pop .pcard{width:min(300px,calc(100vw - 20px))}
  .ob-box{padding:20px}
  .acc-modes{grid-template-columns:1fr}
  .snd-pop{width:min(300px,calc(100vw - 24px))}
  .crop-box{padding:14px}
  .settings nav{padding:10px 8px}
  .settings nav>div{width:auto}
  .settings .pane{padding:16px 14px 90px}
  .tag-badges button{width:42px;height:42px}
  .pfp-zoom img{width:80vw;height:80vw}
}
@media (max-width:1100px){.active-now{display:none!important}}
@media (max-width:640px){.top .title:has(+ .tabs) span{display:none}.top .tabs{flex:1}.top .tabs .sepv{display:none}}
@media (max-width:1000px){.top .title:has(+ .tabs) span{display:none}}
@media (max-width:640px){.top:has(.tabs){flex-wrap:wrap;height:auto;row-gap:4px;padding-bottom:6px}.top:has(.tabs) .tabs{order:10;flex:1 0 100%;display:flex;gap:4px;overflow-x:auto}.top:has(.tabs) .sp{flex:1}}
/* pixel tag badges */
.stag .pxb{flex:none;image-rendering:pixelated}
.tag-badges.px{display:grid;grid-template-columns:repeat(5,52px);gap:8px}
.tag-badges.px button{width:52px;height:52px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);display:grid;place-items:center}
.tag-badges.px button:hover:not([disabled]){border-color:var(--line-2)}
.tag-badges.px button.on{border-color:#8b9cff;box-shadow:0 0 0 1px #8b9cff}
.tag-badges.px button.locked{opacity:.32;filter:grayscale(.6)}
.tag-upsell{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:12px 14px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);font-size:.85rem}
.tag-upsell b{background:#fff;color:#111;border-radius:8px;padding:6px 12px;font-size:.8rem;box-shadow:0 0 18px rgba(167,139,250,.6)}
.tag-lockt{display:block;margin:8px auto 0;font-size:.82rem;color:var(--text-2)}
.tag-colors{display:grid;grid-template-columns:repeat(5,52px);gap:8px}
.tag-colors button,.tag-pick{width:52px;height:52px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;position:relative}
.tag-colors button.on{border-color:#8b9cff;box-shadow:0 0 0 1px #8b9cff}
.tag-pick input{position:absolute;inset:0;opacity:0;cursor:pointer}.tag-pick .ico{width:18px;height:18px}
@media(max-width:640px){.tag-badges.px,.tag-colors{grid-template-columns:repeat(5,1fr)}.tag-badges.px button,.tag-colors button,.tag-pick{width:100%}}
/* messages that ping you: red highlight + bar (also replies to you) */
:root{--mention-bg:rgba(242,63,67,.12);--mention-bar:#f23f43}
.msg.mentioned{background:var(--mention-bg)!important;border-radius:0 8px 8px 0}
.msg.mentioned:hover{background:rgba(242,63,67,.17)!important}
.msg.mentioned::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px!important;background:var(--mention-bar)!important;border-radius:2px}
.msg.mentioned{position:relative}

/* ===== round 3 ===== */
/* server banner behind the server name */
.side-head.has-banner{position:relative;height:120px;align-items:flex-start;padding-top:14px;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0) 60%),var(--sb) center/cover;border-bottom:0;overflow:hidden}
.side-head.has-banner .t,.side-head.has-banner>.ico{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);position:relative;z-index:1}
.side-head.has-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28px;background:linear-gradient(0deg,rgba(14,14,18,.55),transparent)}
/* pings: orange */
:root{--mention-bg:rgba(250,140,40,.11)!important;--mention-bar:#fa8c28!important}
.msg.mentioned:hover{background:rgba(250,140,40,.16)!important}
.mention{background:rgba(250,140,40,.18);color:#ffc690}
/* active channel: simple soft pill, no side bar */
.side .ch.on,.side .ch.active{box-shadow:none!important;background:rgba(255,255,255,.09)}
.side .ch.on .n,.side .ch.on>.ico{color:#fff}
/* overall tidy-ups */
.side .cat .t{padding-left:2px}
.msg .head .name{font-weight:600}
.msg .time{margin-left:6px}
.top .title span{font-weight:700;letter-spacing:-.01em}
.empty{opacity:.9}
.ch .mb,.mb-badge{background:#f23f43}
.composer .box{border-radius:12px}
.pcard{border-radius:14px}
.menu-pop{padding:6px}
.menu-pop button{border-radius:6px}
/* phone drawer: solid panels (the glass look let the chat show through the slide-out menu) */
@media (max-width:760px){
  :root:not([data-theme="light"]) .app>.rail{background:#0b0b0f!important}
  :root:not([data-theme="light"]) .app>.side{background:#141419!important;box-shadow:8px 0 30px rgba(0,0,0,.5)}
  .app.drawer .scrim{background:rgba(0,0,0,.6)!important;backdrop-filter:none}
}

/* ===== app polish 4 ===== */
/* replies: preview hugs the message it belongs to */
.msg.has-ref{row-gap:0;padding-top:6px}
.msg.has-ref>.reply-ref{margin:0 0 -2px;padding-left:56px;font-size:.8rem}
.reply-ref::before{border-color:rgba(255,255,255,.18)!important}
.reply-ref:hover b,.reply-ref:hover span{color:var(--text)}
/* channel links stay purple; only people-pings are orange */
.mention[data-chan]{background:color-mix(in srgb,var(--accent) 20%,transparent)!important;color:#c9b8ff!important}
.mention[data-chan]:hover{background:color-mix(in srgb,var(--accent) 32%,transparent)!important}
.mention.role{background:color-mix(in srgb,var(--rc,var(--accent)) 22%,transparent)}
/* links, inline code, code blocks */
.content a{color:#8cb4ff;text-decoration:none}.content a:hover{text-decoration:underline}
.content code{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.06);border-radius:5px;padding:1px 5px;font-size:.85em}
.content pre{background:#0b0b0e;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:10px 12px}
/* reactions: rounder pills */
.react{border-radius:999px;padding:2px 9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.react.mine{background:color-mix(in srgb,var(--accent) 20%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
/* images & attachments */
.att img,.att video,.content img.embed{border-radius:10px}
/* date divider */
.day-div,.divider{color:var(--muted);font-size:.72rem;font-weight:600}
/* system messages ("walked in") quieter */
.sys{opacity:.85}
/* member list: offline dimmer, hover clearer */
.mem.offline{opacity:.45}.mem.offline:hover{opacity:.8}
/* boot screen: logo pulse */
.boot img{animation:lu-pulse 1.4s ease-in-out infinite}@keyframes lu-pulse{50%{transform:scale(.92);opacity:.7}}

/* ===== solid background (no decorative purple fades); Super members get a gradient ===== */
:root:not([data-theme="light"]) .app{background:#0e0e11!important}
:root:not([data-theme="light"]).is-super .app{background:linear-gradient(135deg,var(--sg1,#1b1530) 0%,#0e0e11 55%,var(--sg2,#10182b) 100%)!important}
.auth{background:var(--bg-0)!important}
.ob-ov{background:rgba(8,8,10,.94)!important}
.lb-hero{background:var(--bg-2)}