/* ---------- LinkUp look: loaded last, refines app.css. Flat, quiet, Discord-like. ---------- */
:root,[data-theme="dark"]{
  --bg-0:#040817; --bg-1:#08102b; --bg-2:#0b1536; --bg-3:#121f4a; --bg-4:#1b2b5e; --bg-float:#070d24;
  --line:rgba(140,170,255,.08); --line-2:rgba(140,170,255,.14); --hover:rgba(130,160,255,.07); --active:rgba(130,160,255,.14);
  --text:#f2f5ff; --text-2:#cfd8f6; --muted:#8e9bc8; --faint:#5d6a99;
  --accent:#7c3cff; --accent-hover:#6a2be6; --accent-ink:#fff;
  --green:#1fd27a; --red:#ff3b5c; --yellow:#ffc233; --amber:#ffc233;
  --mention-bg:rgba(255,194,51,.09); --mention-bar:#ffc233; --code:#060c22;
  --shadow:0 10px 30px rgba(0,0,10,.6); --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}
.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:var(--accent)}
[data-theme="light"] .auth{background:var(--accent)}
.auth-card{border-radius:8px;border:0;padding:32px;background:var(--bg-2);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)}
.settings .pane>*{animation:lu-fade .18s ease-out}
.toast{animation:lu-rise .22s var(--ease)}
.ac{animation:lu-rise .14s var(--ease)}
.unsaved{animation:lu-rise .2s var(--ease)}
.chat,.lobby,.devp,.discover,.homeview,.vroom{animation:lu-fade .18s ease-out}
.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} }