:root{
  --bg:#f8f9fa; --surface:#ffffff; --surface-2:#f1f3f4; --surface-3:#e8eaed;
  --border:#e0e0e0; --border-soft:#ebedef;
  --text:#202124; --text-2:#5f6368; --text-3:#9aa0a6; --text-msg:#37393e;
  --accent:#ffffff; --accent-hover:#f2f2f2; --accent-soft:rgba(0,0,0,.05); --on-accent:#0a0a0a;
  
  --accent-default:#ffffff;
  --green:#188038; --green-dot:#34a853; --green-soft:#e6f4ea;
  --red:#d93025; --red-hover:#b3261e; --red-soft:#fce8e6;
  
  --on-red:#ffffff;
  --scroll:#dadce0; --scroll-h:#bdc1c6;
  
  --divider:rgba(128,134,139,.25);
  --sh-1:0 1px 2px rgba(60,64,67,.30),0 1px 3px 1px rgba(60,64,67,.15);
  --sh-2:0 1px 2px rgba(60,64,67,.30),0 2px 6px 2px rgba(60,64,67,.15);
  --sh-3:0 4px 8px 3px rgba(60,64,67,.15),0 1px 3px rgba(60,64,67,.30);
  --r-s:20px; --r-m:20px; --r-l:20px;
  
  --font:'Poppins','Google Sans','Segoe UI',Roboto,system-ui,sans-serif;
  --ease:cubic-bezier(.2,0,0,1);
}
body.dark{
  --bg:#1b1f27; --surface:#1b1f27; --surface-2:#242a35; --surface-3:#354b5b;
  --border:#5f6368; --border-soft:#3c4043;
  --text:#e8eaed; --text-2:#bdc1c6; --text-3:#80868b; --text-msg:#dadce0;
  --accent:#ffffff; --accent-hover:#e8e8e8; --accent-soft:rgba(255,255,255,.16); --on-accent:#0a0a0a;
  --accent-default:#ffffff;
  --green:#81c995; --green-dot:#34a853; --green-soft:rgba(129,201,149,.16);
  --red:#f28b82; --red-hover:#f6aea9; --red-soft:rgba(242,139,130,.16);
  --on-red:#3c0d08;   
  --scroll:#5f6368; --scroll-h:#80868b;
  --sh-1:0 1px 2px rgba(0,0,0,.5),0 1px 3px 1px rgba(0,0,0,.3);
  --sh-2:0 1px 2px rgba(0,0,0,.5),0 2px 6px 2px rgba(0,0,0,.3);
  --sh-3:0 4px 8px 3px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.5);
}

body.night{
  --bg:#000000; --surface:#0a0a0b; --surface-2:#121214; --surface-3:#1b1b1e;
  --border:#2c2c30; --border-soft:#19191c;
  --text:#f4f4f5; --text-2:#a7a7ad; --text-3:#9d9da3; --text-msg:#e4e4e7;
  --scroll:#2c2c30; --scroll-h:#3d3d42;
  --sh-1:0 1px 2px rgba(0,0,0,.7),0 1px 3px 1px rgba(0,0,0,.4);
  --sh-2:0 1px 2px rgba(0,0,0,.7),0 2px 6px 2px rgba(0,0,0,.4);
  --sh-3:0 4px 8px 3px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.7);
}

body.black{
  --bg:#000000; --surface:#000000; --surface-2:#0a0a0a; --surface-3:#161618;
  --border:#262629; --border-soft:#141416;
  --text:#f4f4f5; --text-2:#a7a7ad; --text-3:#6c6c73; --text-msg:#e4e4e7;
  --scroll:#262629; --scroll-h:#36363c;
  --sh-1:0 1px 2px rgba(0,0,0,.8),0 1px 3px 1px rgba(0,0,0,.5);
  --sh-2:0 1px 2px rgba(0,0,0,.8),0 2px 6px 2px rgba(0,0,0,.5);
  --sh-3:0 4px 10px 3px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.8);
}

html[data-color="periwinkle"] body{--accent:#7c85ff;--accent-hover:#636dff;--accent-soft:rgba(124,133,255,.16);--on-accent:#ffffff}
html[data-color="ocean"] body{--accent:#2563eb;--accent-hover:#1d4ed8;--accent-soft:rgba(37,99,235,.16);--on-accent:#ffffff}
html[data-color="sky"] body{--accent:#0ea5e9;--accent-hover:#0284c7;--accent-soft:rgba(14,165,233,.16);--on-accent:#ffffff}
html[data-color="teal"] body{--accent:#0d9488;--accent-hover:#0f766e;--accent-soft:rgba(13,148,136,.16);--on-accent:#ffffff}
html[data-color="emerald"] body{--accent:#10b981;--accent-hover:#059669;--accent-soft:rgba(16,185,129,.16);--on-accent:#06241b}
html[data-color="lime"] body{--accent:#65a30d;--accent-hover:#4d7c0f;--accent-soft:rgba(101,163,13,.16);--on-accent:#ffffff}
html[data-color="amber"] body{--accent:#f59e0b;--accent-hover:#d97706;--accent-soft:rgba(245,158,11,.18);--on-accent:#241800}
html[data-color="coral"] body{--accent:#f0563f;--accent-hover:#e0452f;--accent-soft:rgba(240,86,63,.16);--on-accent:#ffffff}
html[data-color="virgo"] body{--accent:#ec4899;--accent-hover:#db2777;--accent-soft:rgba(236,72,153,.16);--on-accent:#ffffff}
html[data-color="violet"] body{--accent:#8b5cf6;--accent-hover:#7c3aed;--accent-soft:rgba(139,92,246,.16);--on-accent:#ffffff}

html[data-font="poppins"] body{--font:'Poppins','Google Sans','Segoe UI',Roboto,system-ui,sans-serif}
html[data-font="google-sans"] body{--font:'Google Sans','Google Sans Text','Product Sans','Segoe UI',Roboto,system-ui,sans-serif}
html[data-font="space-grotesk"] body{--font:'Space Grotesk','Segoe UI',Roboto,system-ui,sans-serif}

html[data-textsize="12"] .mtext{font-size:12px}
html[data-textsize="14"] .mtext{font-size:14px}
html[data-textsize="15"] .mtext{font-size:15px}
html[data-textsize="16"] .mtext{font-size:16px}
html[data-textsize="17"] .mtext{font-size:17px}
html[data-textsize="18"] .mtext{font-size:18px}
html[data-underline="on"] .mtext a{text-decoration:underline}
html[data-density="compact"] #rail{gap:5px;padding:9px 0}
html[data-density="compact"] .rail-item{width:42px;height:42px}
html[data-density="compact"] .channel{padding:5px 10px;margin:0}
html[data-density="compact"] .member{padding:4px 10px}
html[data-density="spacious"] #rail{gap:12px;padding:16px 0}
html[data-density="spacious"] .rail-item{width:52px;height:52px}
html[data-density="spacious"] .channel{padding:11px 10px;margin:3px 0}
html[data-density="spacious"] .member{padding:9px 10px}
.crow-head{display:none}
.crow-head .ch-time{color:var(--text-3);font-size:12px}
.crow-head .ch-name{font-weight:600}
html[data-msgmode="compact"] .mrow{gap:0;padding-top:1px;padding-bottom:1px}
html[data-msgmode="compact"] .mrow.first{margin-top:5px}
html[data-msgmode="compact"] .mrow:not(.sys) .gutter{display:none}
html[data-msgmode="compact"] .mrow .mhead{display:none}
html[data-msgmode="compact"] .mrow .crow-head{display:inline}
html[data-msgmode="compact"] .mrow .mtext{display:inline}
html[data-msgmode="compact"] .crow-head .ch-time{margin-right:3px}
html[data-msgmode="compact"] .crow-head .ch-name{margin-right:6px}
*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
html,body{height:100%}
body{
  font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow:hidden;transition:background .25s,color .25s;
}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}
input,textarea,select{font-family:inherit;font-size:14px;color:var(--text)}

textarea{resize:none}
textarea.autogrow{overflow:hidden}

@media (pointer:coarse){
  input,textarea,select,#msg-input,#browse-search,.edit-box textarea,
  #auth .field input[type=text],#auth .field input[type=email],
  #auth .field input[type=password],#auth .field input[type=number]{font-size:16px!important}
}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-h)}
::-webkit-scrollbar-track{background:transparent}

*{-webkit-tap-highlight-color:transparent}
.hidden{display:none!important}


.btn,.icon-btn,.rail-item,.channel,.menu-item,.tab,.member,.role-item,.chip,.cat-head{position:relative;overflow:hidden}
.rip{position:absolute;border-radius:50%;background:currentColor;opacity:.14;transform:scale(0);
  animation:rip .55s var(--ease) forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}

@media (prefers-reduced-motion:reduce){
  html:not([data-motion="on"]) *,html:not([data-motion="on"]) *::before,html:not([data-motion="on"]) *::after{
    animation-duration:.01ms!important;transition-duration:.01ms!important}
}

html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}


.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 22px;
  border-radius:20px;background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:500;letter-spacing:.2px;
  box-shadow:var(--sh-1);transition:box-shadow .2s var(--ease),background .2s,transform .15s var(--ease)}
.btn:hover{background:var(--accent-hover);box-shadow:var(--sh-2)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:disabled{background:var(--surface-3);color:var(--text-3);box-shadow:none;cursor:default}
.btn-text{background:transparent;color:var(--accent);box-shadow:none}
.btn-text:hover{background:var(--accent-soft);box-shadow:none}
.btn-outline{background:var(--surface);color:var(--accent);box-shadow:none;border:1px solid var(--border)}
.btn-outline:hover{background:var(--accent-soft);box-shadow:none}
.btn-danger{background:var(--red);color:var(--on-red)}
.btn-danger:hover{background:var(--red-hover)}
.btn-danger.btn-text,.btn-danger.btn-outline{background:transparent;color:var(--red)}
.btn-danger.btn-text:hover,.btn-danger.btn-outline:hover{background:var(--red-soft)}
.btn .spin{width:16px;height:16px;border:2px solid rgba(128,128,128,.4);border-top-color:currentColor;border-radius:50%;
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:var(--r-s);color:var(--text-2);transition:background .15s}
.icon-btn:hover{color:var(--text)}
.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.icon-btn svg{width:20px;height:20px}

.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:400;color:var(--text-2);margin-bottom:6px;letter-spacing:.3px}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=number],.field textarea,.field select{
  width:100%;height:44px;padding:0 14px;border:1px solid var(--border);border-radius:var(--r-s);
  background:var(--surface);transition:border-color .15s,box-shadow .15s;outline:none;appearance:none}

.field input[type=number]{width:140px;max-width:100%;-moz-appearance:textfield;appearance:textfield}
.field input[type=number]::-webkit-outer-spin-button,
.field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field select{cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);
  background-position:calc(100% - 19px) 19px,calc(100% - 14px) 19px;background-size:5px 5px;background-repeat:no-repeat}
.field textarea{height:auto;min-height:72px;padding:10px 14px;resize:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

#pf-bio{resize:none;overflow:hidden}
.field .hint{font-size:12px;color:var(--text-3);margin-top:6px;text-transform:none;letter-spacing:0}

.field-row{display:flex;gap:14px}
.field-row .field{flex:1 1 0;min-width:0}
.field-row .field-pronouns{flex:0.7 1 0}
@media (max-width:600px){ .field-row{flex-wrap:wrap;gap:0} .field-row .field{flex-basis:100%} }
.form-err{display:none;font-size:13px;color:var(--red);background:var(--red-soft);border-radius:var(--r-s);
  padding:10px 14px;margin-bottom:16px;line-height:1.45}
.form-err.show{display:block;animation:fadeUp .2s var(--ease)}


#boot{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:200}
.loader{width:40px;height:40px;border:3px solid var(--surface-3);border-top-color:var(--accent);border-radius:50%;
  animation:spin .8s linear infinite}



#auth{
  
  --bg:#ffffff;--surface:#ffffff;--surface-2:#f3f4f6;--surface-3:#e8eaee;
  --border:#e6e7eb;--border-soft:#eceef1;
  --text:#16171b;--text-2:#5a616c;--text-3:#9aa1ac;
  --accent:#ffffff;--accent-hover:#e8e8e8;--accent-soft:rgba(255,255,255,.16);--on-accent:#0a0a0a;
  --red:#d93025;--red-hover:#b3261e;--red-soft:rgba(217,48,37,.12);
  --auth-card:#ffffff;--auth-card-border:#e9eaee;
  --auth-input:#f5f6f8;--auth-input-border:#e4e6ea;--auth-input-focus:#ffffff;
  --auth-tabbar:#f1f2f5;--auth-tab-hover:#eceef2;--auth-btn-hover:#ebedf1;--auth-divider:#e7e8ec;
  --sh-1:0 1px 2px rgba(20,22,28,.06);
  --sh-2:0 6px 20px rgba(20,22,28,.10);
  --sh-3:0 24px 60px -22px rgba(20,22,28,.16),0 8px 22px rgba(20,22,28,.05);
  color-scheme:light;
  
  position:absolute;top:0;left:0;right:0;bottom:auto;height:100vh;height:var(--app-h,100dvh);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;color:var(--text);z-index:100;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:var(--bg);
}
body.dark #auth{
  
  --bg:#000000;--surface:#0b0c0f;--surface-2:#121318;--surface-3:#1b1d23;
  --border:#23252b;--border-soft:#191b20;
  --text:#f1f2f5;--text-2:#aeb4c0;--text-3:#777e8c;
  --accent:#ffffff;--accent-hover:#e8e8e8;--accent-soft:rgba(255,255,255,.16);--on-accent:#0a0a0a;
  --red:#f28b82;--red-hover:#f6aea9;--red-soft:rgba(242,139,130,.16);
  --auth-card:#0a0b0e;--auth-card-border:#1d1f25;
  --auth-input:#141519;--auth-input-border:#272a31;--auth-input-focus:#1a1c22;
  --auth-tabbar:#101116;--auth-tab-hover:#16181e;--auth-btn-hover:#1b1d23;--auth-divider:#23252b;
  --sh-1:0 1px 2px rgba(0,0,0,.6);
  --sh-2:0 6px 22px rgba(0,0,0,.5);
  --sh-3:0 30px 70px -22px rgba(0,0,0,.85),0 10px 28px rgba(0,0,0,.5);
  color-scheme:dark;
}


.auth-brand{position:absolute;top:26px;left:32px;display:inline-flex;align-items:center;z-index:2;
  animation:authRise .5s var(--ease) both}
.auth-logo-img{height:30px;width:auto;max-width:62vw;display:block}
.auth-brand .logo-on-dark{display:none}
body.dark .auth-brand .logo-on-light{display:none}
body.dark .auth-brand .logo-on-dark{display:block}
@keyframes authRise{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}


.auth-card{position:relative;z-index:1;width:100%;max-width:400px;
  background:var(--auth-card);border:1px solid var(--auth-card-border);border-radius:32px;
  box-shadow:var(--sh-3);overflow:hidden;animation:cardIn .45s var(--ease) both}

@keyframes cardIn{from{opacity:0}to{opacity:1}}


.auth-main{padding:30px 30px 26px;display:flex;flex-direction:column}
.auth-sub{color:var(--text-2);font-size:13.5px;margin-bottom:22px;line-height:1.5;text-align:center}


.tabs{display:flex;background:#ffffff0f;border-radius:20px;padding:4px;margin-bottom:24px}
.tab{flex:1;height:40px;border-radius:20px;font-size:14px;font-weight:500;color:var(--text-2);
  transition:color .2s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.tab:hover:not(.active){color:var(--text)}
.tab.active{background:#ffffff17;color:#fff;box-shadow:var(--sh-1)}


#f-login,#f-register,#f-verify,#f-reactivate,#f-forgot,#f-reset,#f-oauth{animation:panelIn .34s var(--ease) both}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.auth-main .field{animation:fieldIn .45s var(--ease) both}
@keyframes fieldIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.auth-main .field:nth-child(2){animation-delay:.04s}
.auth-main .field:nth-child(3){animation-delay:.09s}
.auth-main .field:nth-child(4){animation-delay:.14s}

.auth-foot{margin-top:22px;text-align:center;font-size:12.5px;color:var(--text-3);font-weight:400}

.linklike{color:var(--accent);font-weight:400;cursor:pointer}
.linklike:hover{text-decoration:underline}
.auth-legal{margin-top:18px;text-align:center;font-size:12px;color:var(--text-3);line-height:1.5}
.auth-legal a{color:var(--accent);text-decoration:none;font-weight:500}
.auth-legal a:hover{text-decoration:underline}
.code-input{letter-spacing:14px!important;text-align:center;font-size:22px!important;font-weight:600}
.dev-code{background:rgba(249,171,0,.12);border:1px dashed #f9ab00;color:#fdd663;border-radius:var(--r-s);
  padding:10px 14px;font-size:13px;margin-bottom:16px;line-height:1.5}
.dev-code b{font-size:16px;letter-spacing:3px}


#auth .tabs{background:var(--auth-tabbar);border:1px solid var(--border-soft);border-radius:20px;padding:5px;margin-bottom:24px}
#auth .tab{height:42px;border-radius:20px;font-weight:600}
#auth .tab:hover:not(.active){color:var(--text);background:var(--auth-tab-hover)}
#auth .tab.active{background:var(--accent);color:var(--on-accent);box-shadow:var(--sh-1)}
#auth .linklike{font-weight:500}


#auth .field label{font-weight:500;color:var(--text-2)}
#auth .field input[type=text],#auth .field input[type=email],#auth .field input[type=password],
#auth .field input[type=number],#auth .field textarea,#auth .field select{
  height:46px;border-radius:20px;font-size:14.5px;padding:0 14px;
  background:var(--auth-input);border:1px solid var(--auth-input-border);color:var(--text)}
#auth .field input::placeholder{color:var(--text-3)}
#auth .field input:focus,#auth .field textarea:focus,#auth .field select:focus{
  background:var(--auth-input-focus);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
#auth .field input:-webkit-autofill,#auth .field input:-webkit-autofill:hover,#auth .field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);caret-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--auth-input) inset;transition:background-color 9999s}
#auth .auth-main .field{margin-bottom:16px}
#auth .field .hint{margin-top:7px;font-size:12px;color:var(--text-3);line-height:1.45}


#auth .btn{height:48px;border-radius:20px;font-weight:600;font-size:15px;margin-top:4px;
  background:var(--accent);color:var(--on-accent);box-shadow:var(--sh-1);
  transition:background .15s var(--ease),box-shadow .2s var(--ease),transform .12s var(--ease)}
#auth .btn:hover{background:var(--accent-hover);box-shadow:var(--sh-2)}
#auth .btn:active{transform:scale(.99)}
#auth .code-input{border-radius:20px}


.auth-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--text-3);font-size:12px;
  text-transform:uppercase;letter-spacing:.4px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--auth-divider)}
.oauth-btns{display:flex;flex-direction:column;gap:10px}
.oauth-btns .btn-discord{margin-top:0}

.auth-powered{margin:16px 0 0;text-align:center;font-size:11.5px;font-weight:500;color:var(--text-3);
  letter-spacing:.3px}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:46px;
  border-radius:20px;background:var(--auth-input);border:1px solid var(--auth-input-border);color:var(--text);
  text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.2px;
  transition:background .15s,box-shadow .2s var(--ease),transform .15s var(--ease)}
.btn-google:hover{background:var(--auth-btn-hover)}
.btn-google:active{transform:scale(.98)}
.btn-google:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-google svg{flex:0 0 auto}

.btn-discord{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:46px;margin-top:10px;
  border-radius:20px;background:#5865f2;color:#fff;text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.2px;
  border:1px solid transparent;
  transition:background .15s,box-shadow .2s var(--ease),transform .15s var(--ease)}
.btn-discord:hover{background:#4752c4}
.btn-discord:active{transform:scale(.98)}
.btn-discord:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-discord svg{flex:0 0 auto}




#app{display:grid;grid-template-columns:72px var(--sidebar-w,264px) 1fr 300px;grid-template-rows:56px 1fr;
  grid-template-areas:"rail sidebar topbar topbar" "rail sidebar chat members";
  
  height:100vh;height:100dvh;background:var(--surface)}


#titlebar{display:none}
@media (min-width:981px){
  #titlebar{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;right:0;height:32px;
    z-index:50;background:var(--surface);user-select:none}
  #titlebar .tb-label{font-size:13px;font-weight:600;color:var(--text-2);white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;max-width:60vw;padding:0 120px}
  #titlebar .tb-version{position:absolute;right:10px;font-size:11px;font-weight:500;letter-spacing:.3px;color:var(--text-3);
    background:transparent;border:0;cursor:pointer;padding:4px 8px;border-radius:7px;font-family:inherit;
    transition:background .12s,color .12s}
  #titlebar .tb-version:hover{background:var(--surface-3);color:var(--text)}
  #app{margin-top:32px;height:calc(100dvh - 32px)}
}
#rail{grid-area:rail}
#sidebar{grid-area:sidebar}
#chat-top{grid-area:topbar}
#chat{grid-area:chat}
#members{grid-area:members}

#app>*{min-width:0;min-height:0}


#rail{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0;background:var(--surface);
  overflow:hidden}

@media (min-width:981px){
  
  #sidebar{border-left:1px solid var(--divider);border-top:1px solid var(--divider)}
  #sidebar,#sidebar #srv-banner,#sidebar #srv-head{border-top-left-radius:14px}
}

@media (max-width:980px){
  #sidebar,#sidebar #srv-banner,#sidebar #srv-head{border-top-left-radius:16px}
}

#rail-list{display:flex;flex-direction:column;gap:8px;align-items:center;flex:0 1 auto;min-height:0;width:100%;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding:1px 0;box-shadow:none}
#rail-list::-webkit-scrollbar{display:none}
#rail-bottom{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto;padding-top:2px}
.rail-item{width:43px;height:43px;border-radius:20px;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:600;color:#fff;cursor:pointer;flex:0 0 auto;
  transition:border-radius .25s var(--ease),box-shadow .2s,transform .15s var(--ease)}
.rail-item:hover{border-radius:20px;box-shadow:var(--sh-2)}
.rail-item:active{transform:scale(.95)}
.rail-item.active{border-radius:20px;box-shadow:var(--sh-2)}
.rail-wrap{position:relative}
.rail-wrap .pill{position:absolute;left:-12px;top:50%;translate:0 -50%;width:4px;height:8px;border-radius:0 4px 4px 0;
  background:var(--accent);opacity:0;transition:opacity .25s var(--ease),height .25s var(--ease)}
.rail-wrap:hover .pill{opacity:1;height:20px}
.rail-wrap.active .pill{opacity:1;height:36px}
.rail-item.add{background:var(--surface);color:var(--green);font-size:24px;box-shadow:var(--sh-1)}
.rail-item.add:hover{background:var(--green);color:var(--surface)}

.rail-item.pending{opacity:.9;box-shadow:0 0 0 2px var(--surface),0 0 0 3px color-mix(in srgb,var(--accent) 50%,transparent)}
.rail-item.pending:hover{opacity:1}
.rail-pending-badge{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--accent);box-shadow:0 0 0 2px var(--bg)}
.rail-pending-badge svg{width:11px;height:11px}
.rail-sep{width:32px;height:2px;border-radius:1px;background:var(--border-soft);margin:2px 0;flex:0 0 auto}
.rail-tip{position:fixed;left:76px;background:#202124;color:#fff;font-size:13px;font-weight:500;padding:8px 12px;
  border-radius:var(--r-s);box-shadow:var(--sh-2);pointer-events:none;z-index:90;white-space:nowrap;
  opacity:0;transition:opacity .12s;transform:translateY(-50%)}
body.dark .rail-tip{background:#e8eaed;color:#202124}
.rail-tip.show{opacity:1}

@media (hover: none), (pointer: coarse), (max-width: 980px){#rail-tip{display:none!important}}


#sidebar{display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border-soft);min-width:0;position:relative}


#srv-banner{order:-2;height:0;background-size:cover;background-position:center;transition:height .25s var(--ease);flex:0 0 auto;overflow:hidden}

#srv-banner.has{height:auto;aspect-ratio:5/2}
#srv-head{order:-1;display:flex;align-items:center;gap:6px;height:56px;padding:0 10px 0 16px;
  background:var(--surface);border-bottom:1px solid var(--border-soft);cursor:pointer;transition:background .15s;flex:0 0 auto;position:relative;z-index:2}
#srv-head:hover{background:var(--surface-2)}
#srv-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#srv-head svg{width:20px;height:20px;color:var(--text-2);transition:transform .2s var(--ease);flex:0 0 auto}
#srv-head.open > svg{transform:rotate(180deg)}
#srv-invite{margin-left:auto;flex:0 0 auto;width:32px;height:32px}
#srv-invite svg{width:18px;height:18px}
.menu{position:absolute;top:62px;left:10px;width:210px;background:var(--surface);border:1px solid var(--border-soft);
  border-radius:20px;box-shadow:var(--sh-3);padding:8px;z-index:60;animation:menuIn .16s var(--ease);transform-origin:top left}

#srv-menu{left:8px;right:8px;width:auto}
@keyframes menuIn{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border-radius:20px;
  font-size:13.5px;font-weight:500;color:var(--text);transition:background .12s;text-align:left}
.menu-item:hover{background:var(--surface-2)}
.menu-item .mi-ic{width:34px;height:34px;border-radius:20px;background:var(--surface-2);color:var(--text-2);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .12s,color .12s}
.menu-item:hover .mi-ic{background:var(--accent-soft);color:var(--accent)}
.menu-item svg{width:18px;height:18px;flex:0 0 auto}
.menu-item.danger{color:var(--red)}
.menu-item.danger .mi-ic{background:var(--red-soft);color:var(--red)}
.menu-item.danger:hover{background:var(--red-soft)}
.menu-sep{height:1px;background:var(--border-soft);margin:5px 8px}

#channel-zone{flex:1;overflow-y:auto;padding:12px 8px}


#sidebar-resize{display:none}
@media (min-width:981px){
  #sidebar-resize{display:block;position:fixed;top:32px;bottom:0;left:var(--rz-x,336px);width:8px;
    margin-left:-4px;cursor:col-resize;z-index:45}
  #sidebar-resize::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);
    background:transparent;transition:background .15s}
  
  #sidebar-resize:hover::before,body.rz-dragging #sidebar-resize::before{background:var(--text-3)}
}
body.rz-dragging{cursor:col-resize;user-select:none}
.side-label{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 6px 12px;
  font-size:11px;font-weight:700;letter-spacing:.8px;color:var(--text-3);text-transform:uppercase}
.side-label .icon-btn{width:24px;height:24px}
.side-label .icon-btn svg{width:16px;height:16px}

.cat-head{display:flex;align-items:center;gap:4px;padding:7px 6px 5px 6px;margin-top:10px;border-radius:var(--r-s);
  font-size:12px;font-weight:400;letter-spacing:.8px;color:var(--text-3);cursor:pointer;
  transition:color .12s;user-select:none}
.cat-head:hover{color:var(--text-2)}
.cat-head .chev{width:12px;height:12px;flex:0 0 auto;transition:transform .2s var(--ease)}
.cat-head.closed .chev{transform:rotate(-90deg)}
.cat-head .cname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-head .mod-ico{width:13px;height:13px;color:var(--text-3);flex:0 0 auto}
.cat-tools{display:inline-flex;align-items:center;gap:0;margin-left:auto}
.cat-tools .icon-btn{width:22px;height:22px}
.cat-tools .icon-btn svg{width:13px;height:13px}

.channel{display:flex;align-items:center;gap:8px;padding:8px 10px;margin:1px 0;border-radius:var(--r-s);
  color:var(--text-2);font-size:14px;font-weight:400;cursor:pointer;transition:background .12s,color .12s}
.channel:hover{background:var(--surface-2);color:var(--text)}
.channel.active{background:var(--accent-soft);color:var(--accent)}
body.dark .channel.active{background:#ffffff12;color:#ffffff}
.channel .hash{font-weight:600;color:var(--text-3);font-size:15px}
.channel.active .hash{color:var(--accent)}

.channel .hash.priv-hash{display:inline-flex;align-items:center;justify-content:center;width:15px}
.channel .hash.priv-hash svg{width:14px;height:14px}
.channel span.cname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.channel .mod-ico{width:14px;height:14px;color:var(--text-3);flex:0 0 auto}
.channel.active .mod-ico{color:var(--accent)}
body.dark .channel.active .hash,body.dark .channel.active .mod-ico{color:#ffffff}
.channel .nsfw-ico{width:14px;height:14px;color:#e0823d;flex:0 0 auto}
.channel .cact{opacity:0;width:24px;height:24px}
.channel:hover .cact{opacity:1}
.channel .cact svg{width:15px;height:15px}


.unread-jump{position:sticky;z-index:4;display:flex;align-items:center;justify-content:center;gap:5px;
  margin:4px 4px;padding:5px 12px;border:none;border-radius:999px;cursor:pointer;
  background:var(--accent);color:#fff;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  box-shadow:0 4px 12px rgba(0,0,0,.28);animation:fadeUp .18s var(--ease)}
.unread-jump:hover{filter:brightness(1.08)}
.unread-jump svg{width:14px;height:14px;flex:0 0 auto}
.unread-jump.up{top:8px}
.unread-jump.down{bottom:8px}
.unread-jump .uj-m{display:none}


#user-panel{display:flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--border-soft);
  background:var(--surface-2);border-radius:20px;flex:0 0 auto;margin:6px 11px 16px}
#me-card{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:4px 6px;border-radius:20px;
  text-align:left;cursor:pointer;transition:background .12s}
#me-card:hover{background:var(--surface-3)}
#me-card.open{background:var(--surface-3)}
#user-panel .meta{flex:1;min-width:0}

.me-name-row{display:flex;align-items:center;gap:4px;min-width:0}
.me-name-row #me-name{flex:0 1 auto;min-width:0}
.me-name-chev{display:none;width:16px;height:16px;color:var(--text-3);flex:0 0 auto}
#me-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.bdg-row{display:flex;align-items:center;gap:11px;padding:9px 2px;cursor:pointer}
.bdg-row .bdg-ico{width:26px;height:26px;object-fit:contain;flex:0 0 auto}
.bdg-row .bdg-name{flex:1;font-size:14px;font-weight:500}

#user-panel .status{font-size:12px;color:var(--text-2);display:flex;align-items:center;gap:5px;
  width:fit-content;max-width:100%;border-radius:20px}
#user-panel .status #me-status-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#user-panel #me-avatar{position:relative;display:inline-flex;flex:0 0 auto}
#user-panel .me-av-dot{display:block;position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;
  border-radius:50%;background:var(--green-dot);border:3px solid var(--surface);box-sizing:content-box}
#user-panel .me-av-dot.st-idle{background:#f9ab00}
#user-panel .me-av-dot.st-dnd{background:#ea4335}
#user-panel .me-av-dot.st-off{background:#bdc1c6}

#user-panel{margin-left:-62px}
#rail::after{content:'';flex:0 0 84px}



.me-menu{position:fixed;top:auto;width:280px;max-width:calc(100vw - 24px);padding:0;overflow:hidden}
.me-menu .mm-head{display:flex;align-items:center;gap:11px;padding:14px 14px 11px}
.me-menu .mm-head .av{box-shadow:0 0 0 4px var(--surface);background:var(--surface-3)}
.me-menu .mm-head-meta{min-width:0;padding-bottom:1px}
.me-menu .mm-head-name{font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.me-menu .mm-head-handle{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.me-menu .mm-cs{font-size:12px;color:var(--text-2);padding:0 14px 10px;margin-top:-4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-menu .mm-body{padding:6px;border-top:1px solid var(--border-soft)}
.me-menu .menu-item{padding:7px 9px;border-radius:20px}
.me-menu .menu-item .mi-ic{width:30px;height:30px;border-radius:20px}
.me-menu .mm-sect{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--text-3);padding:7px 10px 3px}
.me-menu .menu-item .sdot{width:11px;height:11px;border-radius:50%;display:inline-block}
.me-menu .menu-item .st-check{margin-left:auto;color:var(--accent);font-weight:700}


.av{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-weight:600;font-size:14px;flex:0 0 auto;overflow:hidden;user-select:none;isolation:isolate}
.av img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none;z-index:1}

.bdg-chip img{-webkit-user-drag:none;user-select:none}
.av.lg{width:64px;height:64px;font-size:26px}
.av.xl{width:80px;height:80px;font-size:32px}


#chat{display:flex;flex-direction:column;background:var(--surface);min-width:0;min-height:0;overflow:hidden;position:relative;isolation:isolate}

#chat::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--srv-grad,transparent);opacity:0;transition:opacity .5s ease}
body.srv-themed #chat::before{opacity:.16}
#chat-top{display:flex;align-items:center;gap:10px;height:56px;padding:0 16px;border-bottom:1px solid var(--border-soft);
  border-top:1px solid var(--border-soft);flex:0 0 auto;background:var(--surface);position:relative;z-index:5}
#chat-top .hash{font-size:20px;font-weight:600;color:var(--text-3)}
#chat-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#chat-name.clickable{cursor:pointer}
#chat-name.clickable:hover{text-decoration:underline}

#chat-name-chev{width:16px;height:16px;color:var(--text-3);flex:0 0 auto;margin-left:-2px}
.mrow.first .gutter .av{cursor:pointer}

#chat-topic{font-size:13px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:42vw;padding-left:11px;margin-left:3px;border-left:1px solid var(--border);line-height:1.2}
#chat-lock{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--text-3);
  background:var(--surface-2);border-radius:20px;padding:4px 10px}
#chat-lock svg{width:13px;height:13px}
#chat-top .spacer{flex:1}

.chat-search{display:none;align-items:center;gap:6px;height:36px;margin-left:8px;padding:0 9px 0 11px;
  min-width:280px;max-width:230px;border:1px solid var(--border-soft);border-radius:20px;background:var(--surface-2);
  color:var(--text-3);font-size:13px;cursor:text;transition:background .12s,border-color .12s}
.chat-search:hover{background:var(--surface-3)}
.chat-search .cs-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-search svg{width:16px;height:16px;flex:0 0 auto;color:var(--text-3)}
@media(min-width:981px){
  .chat-search:not(.hidden){display:inline-flex}
  #chat-top #btn-search{display:none}   
}
#btn-drawer{display:none}
#btn-members.on,#btn-dm-profile.on{color:var(--accent);background:var(--accent-soft)}
@media (min-width:981px){
  body.members-collapsed #app{grid-template-columns:72px var(--sidebar-w,264px) 1fr;
    grid-template-areas:"rail sidebar topbar" "rail sidebar chat"}
  body.members-collapsed #members{display:none}
}

.cat-head.dragging,.channel.dragging,.role-item.dragging{opacity:.4}
.cat-head[draggable="true"] .cname,.channel[draggable="true"]{cursor:pointer}
.role-item{cursor:grab}
.role-item .rgrip{display:inline-flex;align-items:center;color:var(--text-3);flex:0 0 auto;margin:0 -2px 0 -3px}
.role-item .rgrip svg{width:14px;height:14px}
.mgroup h4 .role-badge{width:14px;height:14px;border-radius:3px;vertical-align:-3px;margin:0 5px}


#messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:18px 0 8px;min-height:0;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.msg-loading{display:flex;justify-content:center;padding:34px}
.day-empty{padding:4px 24px 22px}
.day-empty .big-hash{width:64px;height:64px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;
  justify-content:center;font-size:32px;font-weight:700;color:var(--text-3);margin-bottom:14px}
.day-empty h2{font-size:24px;font-weight:600;margin-bottom:6px}
.day-empty p{color:var(--text-2);font-size:14px}

.await-screen{min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:40px 24px}
.await-icon{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent) 14%,var(--surface-2));color:var(--accent);margin-bottom:20px;
  box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 7%,transparent)}
.await-icon svg{width:42px;height:42px}
.await-screen h2{font-size:25px;font-weight:700;margin-bottom:8px}
.await-screen p{color:var(--text-2);font-size:14.5px;line-height:1.6;max-width:440px}
.await-spin{display:flex;gap:7px;margin-top:24px}
.await-spin span{width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.3;animation:awaitDot 1.2s var(--ease) infinite}
.await-spin span:nth-child(2){animation-delay:.18s}
.await-spin span:nth-child(3){animation-delay:.36s}
@keyframes awaitDot{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-5px)}}
html[data-motion="off"] .await-spin span{animation:none;opacity:.6}

.mrow{display:flex;gap:10px;padding:3px 17px;transition:filter .2s var(--ease);position:relative}
.mrow:hover{background:var(--bg)}
.mrow.first{margin-top:14px;margin-left:0;padding:5px 17px 5px 16px}
.mrow .gutter{width:38px;flex:0 0 auto;display:flex;justify-content:center}
.mrow .av{width:38px;height:38px;font-size:15px}
.mrow .ts-hover{font-size:10px;color:var(--text-3);opacity:0;align-self:center}
.mrow:hover .ts-hover{opacity:1}
.mrow .mbody{flex:1;min-width:0}
.mhead{display:flex;align-items:baseline;gap:6px;margin-bottom:1px}
.mhead .uname{font-size:14px;font-weight:600;cursor:pointer}
.mhead .uname:hover{text-decoration:underline}
.mhead .mtime{font-size:11px;color:var(--text-3)}
.mtext{font-size:14px;line-height:1.55;color:var(--text-msg);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.rline{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2);margin:0 0 3px 0;cursor:pointer;
  white-space:nowrap;overflow:hidden}
.rline:hover{color:var(--text)}
.rline svg{width:14px;height:14px;color:var(--text-3);flex:0 0 auto}
.rline b{font-weight:600;flex:0 0 auto}
.rline .rsnip{overflow:hidden;text-overflow:ellipsis;color:var(--text-3)}
.mrow.flash{animation:flash 1.6s var(--ease)}
@keyframes flash{0%,55%{background:var(--accent-soft)}100%{background:transparent}}

.mrow.pinned{box-shadow:inset 3px 0 0 var(--accent)}
.pin-flag{position:absolute;right:12px;top:5px;display:flex;align-items:center;color:var(--accent);
  opacity:.85;pointer-events:none;z-index:2}
.pin-flag svg{width:13px;height:13px}
.mrow:hover .pin-flag{opacity:0}   

.blocked-bar{display:inline-block;font-size:12.5px;font-style:italic;color:var(--text-3);
  background:var(--surface-2);border:1px solid var(--border-soft);border-radius:0;
  padding:4px 10px;cursor:pointer;user-select:none}
.blocked-bar:hover{color:var(--text-2);background:var(--surface-3)}
.macts{display:none;position:absolute;right:10px;top:-13px;background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--r-s);box-shadow:var(--sh-1);z-index:4}
.mrow:hover .macts{display:flex}
.macts .icon-btn{width:30px;height:30px;border-radius:var(--r-s)}
.macts .icon-btn svg{width:16px;height:16px}
@keyframes fadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}


#composer{padding:9px 12px calc(14px + env(safe-area-inset-bottom));flex:0 0 auto}

@media (max-width:980px){#composer{padding:8px 5px calc(5px + env(safe-area-inset-bottom))}}
#reply-bar,#edit-bar{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:16px 16px 4px 4px;
  padding:8px 10px 8px 16px;font-size:13px;color:var(--text-2);margin-bottom:4px;animation:fadeUp .15s var(--ease)}
#reply-bar svg,#edit-bar svg{width:14px;height:14px;color:var(--text-3);flex:0 0 auto}
#reply-bar b,#edit-bar b{color:var(--text)}
#reply-bar .rsnip,#edit-bar .rsnip{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-3)}
#reply-bar .icon-btn,#edit-bar .icon-btn{width:26px;height:26px}
#reply-bar .icon-btn svg,#edit-bar .icon-btn svg{width:14px;height:14px}
.composer-pill{display:flex;align-items:flex-end;gap:6px;background:var(--surface);border-radius:20px;
  padding:9px 6px;transition:box-shadow .2s,background .2s,border-color .2s;border:1px solid var(--border-soft);position:relative}
.composer-pill:focus-within{background:var(--surface);border-color:var(--border);box-shadow:var(--sh-1)}
.composer-pill.locked{opacity:.65}

#btn-mic.mic-collapsed,#btn-emoji.emoji-collapsed{display:none}
#msg-input{flex:1;border:none;background:transparent;outline:none;resize:none;max-height:132px;
  line-height:20px;padding:8px 0;font-size:14px}

#msg-input::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#btn-send{width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;transition:background .15s,transform .15s var(--ease),opacity .15s;box-shadow:var(--sh-1)}
#btn-send:hover{background:var(--accent-hover)}
#btn-send:active{transform:scale(.92)}
#btn-send:disabled{background:var(--surface-3);color:var(--text-3);box-shadow:none}
#btn-send svg{width:18px;height:18px;margin-left:2px}


#hero{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 24px;overflow-y:auto}
.hero-card{text-align:center;max-width:480px;width:100%;animation:cardIn .35s var(--ease)}
.hero-card .bubble{width:84px;height:84px;border-radius:20px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:var(--sh-1)}
.hero-card .bubble svg{width:40px;height:40px}
.hero-card h2{font-size:25px;font-weight:700;margin-bottom:8px}
.hero-card p{color:var(--text-2);line-height:1.6;margin-bottom:24px;font-size:14.5px}
.hero-card .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.hero-actions{display:flex;flex-direction:column;gap:10px;text-align:left}
.hero-action{display:flex;align-items:center;gap:14px;width:100%;padding:13px 15px;border-radius:20px;text-align:left;
  border:1px solid var(--border-soft);background:var(--surface-2);cursor:pointer;
  transition:transform .12s var(--ease),border-color .15s,background .15s,box-shadow .15s}
.hero-action:hover{background:var(--surface-3);border-color:var(--border);transform:translateY(-1px);box-shadow:var(--sh-1)}
.hero-action:active{transform:translateY(0)}
.hero-action:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ha-ic{flex:0 0 auto;width:46px;height:46px;border-radius:20px;display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:var(--sh-1)}
.ha-ic svg,.ha-ic .png-ic{width:23px;height:23px}
.ha-explore{background:linear-gradient(135deg,#5b8df9,#3f6fe0)}
.ha-join{background:linear-gradient(135deg,#a78bfa,#7c5cf0)}
.ha-create{background:linear-gradient(135deg,#34d399,#0fa872)}
.ha-friend{background:linear-gradient(135deg,#fb923c,#ef6c2e)}
.ha-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ha-t{font-size:15px;font-weight:600;color:var(--text)}
.ha-d{font-size:12.5px;color:var(--text-3);line-height:1.35}
.ha-go{flex:0 0 auto;width:18px;height:18px;color:var(--text-3);transition:transform .15s var(--ease),color .15s}
.hero-action:hover .ha-go{transform:translateX(3px);color:var(--text-2)}
.hero-skip{margin:18px auto 0;display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;
  color:var(--text-3);font-size:13.5px;font-weight:500;cursor:pointer;transition:color .15s,background .15s}
.hero-skip svg{width:16px;height:16px;flex:0 0 auto}
.hero-skip:hover{color:var(--text);background:var(--surface-2)}
.hero-skip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:600px){
  #hero{padding:24px 16px}
  .hero-card h2{font-size:22px}
  .hero-action{padding:12px 13px;gap:12px}
  .ha-ic{width:42px;height:42px;border-radius:20px}
  .ha-ic svg,.ha-ic .png-ic{width:21px;height:21px}
}


#members{background:var(--bg);border-left:1px solid var(--border-soft);overflow-y:auto;padding:8px 8px}

body.night #members{background:#0a0a0b}


.mgroup{margin-bottom:10px}
.mgroup h4{font-size:12px;font-weight:400;letter-spacing:.8px;color:var(--text-3);
  padding:8px 10px 4px}
.member{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--r-s);cursor:pointer;
  transition:background .12s}
.member:hover{background:var(--surface-3)}
.member .avwrap{position:relative;flex:0 0 auto}
.member .av{width:32px;height:32px;font-size:13px}
.member .dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
  border:2.5px solid var(--bg);background:var(--green-dot)}
.member:hover .dot{border-color:var(--surface-3)}
.member.off .dot{background:#bdc1c6}
.member.off{opacity:.55}
.member .mname{flex:1;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.member .mcol{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px}
.member .mname-row{display:flex;align-items:center;gap:6px;min-width:0}
.member .mstatus{font-size:12px;font-weight:400;color:var(--text-3);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member .timeout-ind{flex:0 0 auto;display:inline-flex;align-items:center;color:var(--text-3)}
.member .timeout-ind svg{width:13px;height:13px}
.member .crown{width:15px;height:15px;color:#f9ab00;flex:0 0 auto}


.modal{position:fixed;inset:0;background:transparent;
  display:flex;align-items:center;justify-content:center;
  padding:20px;z-index:120;opacity:0;pointer-events:none;transition:opacity .18s var(--ease)}

.modal.open{opacity:1;pointer-events:auto;background:rgba(0,0,0,.45)}

#m-confirm.modal,#m-prompt.modal{z-index:200}
.modal-card{width:100%;max-width:520px;background:var(--surface);border-radius:20px;box-shadow:var(--sh-3);border:1px solid #ffffff2b;
  padding:37px;max-height:calc(100dvh - 60px);overflow-y:auto;transform:translateY(14px) scale(.96);
  transition:transform .2s var(--ease),opacity .2s var(--ease)}
.modal.open .modal-card{transform:none}
.modal-card.wide{max-width:780px}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px}
.modal-head h3{font-size:20px;font-weight:600}
.modal-sub{color:var(--text-2);font-size:13px;line-height:1.5;margin-bottom:20px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}

.modal-card:not(.settings-shell):not(.mc-shell) > .modal-head{position:sticky;top:-37px;z-index:4;
  margin:-37px -37px 8px;padding:37px 37px 12px;background:var(--surface);border-radius:23px 23px 0 0}
.modal-card:not(.settings-shell):not(.mc-shell) > .modal-actions{position:sticky;bottom:-37px;z-index:4;
  margin:20px -37px -37px;padding:16px 37px 20px;background:var(--surface);border-top:1px solid var(--border-soft);
  border-radius:0 0 23px 23px}

.invite-box{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:var(--r-m);
  padding:8px 8px 8px 16px;margin-bottom:12px}
.invite-box code{flex:1;font-family:'Roboto Mono',Consolas,monospace;font-size:15px;font-weight:600;
  color:var(--accent);letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.color-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.swatch{width:34px;height:34px;border-radius:50%;cursor:pointer;border:2px solid transparent;
  transition:transform .15s var(--ease),border-color .15s;position:relative}
.swatch:hover{transform:scale(1.12)}
.swatch.sel{border-color:var(--text)}
.swatch.sel::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:14px;font-weight:700}
.swatch.upload{background:var(--surface-2);color:var(--text-2);display:flex;align-items:center;justify-content:center}
.swatch.upload svg{width:17px;height:17px}

.profile-top{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.checkrow{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border:1px solid var(--border-soft);
  border-radius:var(--r-m);margin-bottom:10px;cursor:pointer;transition:background .12s,border-color .12s}
.checkrow:hover{background:var(--surface-2)}

.checkrow input[type=checkbox]{appearance:none;-webkit-appearance:none;margin:1px 0 0;flex:0 0 auto;
  position:relative;width:38px;height:22px;border-radius:999px;background:var(--surface-3);
  border:1px solid var(--border);cursor:pointer;transition:background .16s ease,border-color .16s ease}

.checkrow input[type=checkbox]::after{content:'';position:absolute;top:50%;left:2px;transform:translate(0,-50%);
  width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:transform .16s ease}
.checkrow input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.checkrow input[type=checkbox]:checked::after{transform:translate(16px,-50%)}
.checkrow input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}
.checkrow input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}

html[data-motion="off"] .checkrow input[type=checkbox],
html[data-motion="off"] .checkrow input[type=checkbox]::after{transition:none}

.checkrow input[type=radio]{appearance:none;-webkit-appearance:none;margin:0;flex:0 0 auto;position:relative;
  width:22px;height:22px;border-radius:50%;background:transparent;border:2px solid var(--border);cursor:pointer;
  transition:background .14s ease,border-color .14s ease}
.checkrow input[type=radio]:checked{background:var(--accent);border-color:var(--accent)}
.checkrow input[type=radio]:checked::after{content:'';position:absolute;inset:0;background:var(--on-accent,#fff);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/13px no-repeat}
.checkrow input[type=radio]:disabled{opacity:.5;cursor:not-allowed}
.checkrow input[type=radio]:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.checkrow:has(input[type=radio]:checked){border-color:var(--accent);background:var(--accent-soft)}
.checkrow:has(input[type=radio]:checked) .t{color:var(--accent)}
html[data-motion="off"] .checkrow input[type=radio]{transition:none}
.checkrow .t{font-size:14px;font-weight:500}
.checkrow .d{font-size:12px;color:var(--text-2);margin-top:1px;line-height:1.45}

.seg{display:flex;background:var(--surface-2);border-radius:20px;padding:4px;margin-top:4px}
.seg .tab{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.seg .tab svg{width:15px;height:15px;flex:0 0 auto}
.seg .tab{height:36px}

.roles-layout{display:grid;grid-template-columns:170px 1fr;gap:18px}
.roles-col{border-right:1px solid var(--border-soft);padding-right:14px;max-height:380px;overflow-y:auto}
.role-item{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border-radius:var(--r-s);
  font-size:13.5px;font-weight:500;color:var(--text-2);transition:background .12s;text-align:left}
.role-item:hover{background:var(--surface-2)}
.role-item.active{background:var(--accent-soft);color:var(--text)}
.role-item .rdot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.role-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roles-empty{font-size:13px;color:var(--text-3);padding:10px;line-height:1.5}
.order-row{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.order-row .lbl{font-size:12px;font-weight:500;color:var(--text-2);letter-spacing:.3px;text-transform:uppercase;flex:1}
.order-row .btn{height:32px;padding:0 14px;font-size:13px}
.order-hint{font-size:12px;color:var(--text-3);line-height:1.5;margin:-6px 0 14px}

.banner-prev{width:100%;aspect-ratio:5/2;border-radius:var(--r-m);background:var(--surface-2) center/cover no-repeat;
  border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;
  color:var(--text-3);font-size:13px;margin-bottom:10px;overflow:hidden}
.banner-prev.has{border-style:solid}
.icon-edit-row{display:flex;align-items:center;gap:18px;margin-bottom:8px}

.member-card-top{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.member-card-top .mc-name{font-size:19px;font-weight:600;display:flex;align-items:center;gap:8px}
.member-card-top .mc-name .crown{width:17px;height:17px;color:#f9ab00}
.member-card-top .mc-sub{font-size:13px;color:var(--text-2);margin-top:2px}
.mc-bio{background:var(--surface-2);border-radius:var(--r-m);padding:12px 14px;font-size:13.5px;line-height:1.55;
  color:var(--text-2);margin:12px 0 4px;white-space:pre-wrap;word-break:break-word}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;border-radius:20px;
  border:1px solid var(--border);font-size:12.5px;font-weight:500;color:var(--text-2);cursor:pointer;
  transition:all .15s;background:var(--surface)}
.chip .rdot{width:9px;height:9px;border-radius:50%}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.chip.static{cursor:default}
.sect-label{font-size:12px;font-weight:500;letter-spacing:.8px;color:var(--text-3);
  margin:16px 0 8px}



.modal-card.settings-shell{max-width:1550px;width:100%;padding:0;display:grid;grid-template-columns:275px 1fr;
  overflow:hidden;height:calc(100dvh - 60px);max-height:780px}
.ss-nav{background:var(--surface-2);border-right:1px solid var(--border-soft);padding:9px 11px 16px;
  overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.ss-nav-head{font-size:15px;font-weight:600;color:var(--text);padding:0 10px 16px}
.ss-nav-group{display:flex;flex-direction:column;gap:1px;margin-bottom:16px}
.ss-nav-title{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-3);
  padding:2px 10px 4px}
.ss-navitem{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 10px;
  border-radius:var(--r-s);font-size:14px;font-weight:500;color:var(--text-2);
  transition:background .12s,color .12s;position:relative;overflow:hidden}
.ss-navitem:hover{background:var(--surface-3);color:var(--text)}
.ss-navitem.active{background:var(--surface-3);color:var(--text);font-weight:400;border-radius:20px}
body.dark .ss-navitem.active{background:rgb(255 255 255 / 4%);color:#ffffff}
.ss-navitem.hidden{display:none}
.ss-navitem .soon-tag{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--text-3);background:var(--surface-3);padding:2px 6px;border-radius:6px}
.ss-nav-sep{height:1px;background:var(--border-soft);margin:8px 8px 4px}
.ss-nav-spacer{flex:1 1 auto;min-height:8px}
.ss-nav-danger{color:var(--red)}
.ss-nav-danger:hover{background:transparent;color:var(--red-hover)}
.ss-content{position:relative;padding:18px 22px 34px;overflow-y:auto}

.ss-esc{position:sticky;top:4px;float:right;margin-left:14px;display:flex;flex-direction:column;align-items:center;gap:5px;
  color:var(--text-3);font-size:11px;font-weight:400;letter-spacing:.4px;z-index:5}
.ss-esc .x{width:34px;height:34px;border-radius:50%;border:1.5px solid currentColor;background:var(--surface);display:flex;
  align-items:center;justify-content:center;transition:border-color .12s,color .12s}
.ss-esc .x svg{width:15px;height:15px}
.ss-esc:hover{color:var(--text)}
.ss-back{display:none;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--text-2);
  margin-bottom:14px;height:34px}
.ss-back svg{width:18px;height:18px}
.ss-pane{animation:ssFade .18s var(--ease)}
.ss-pane.hidden{display:none}
.ss-pane-title{font-size:19px;font-weight:600;margin-bottom:20px;padding-right:60px}
@keyframes ssFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}


.sp-grid{display:grid;grid-template-columns:1fr 286px;gap:30px;align-items:start}
.sp-edit{min-width:0}
.sp-side{position:sticky;top:0}
.sp-side-label{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-3);
  margin-bottom:10px}
.sp-card{border:1px solid var(--border-soft);border-radius:var(--r-l);overflow:hidden;background:var(--surface);
  box-shadow:var(--sh-1)}
.sp-card-banner{aspect-ratio:5/2;background:var(--surface-2) center/cover no-repeat}
.sp-card-banner.accent{background:linear-gradient(120deg,var(--accent),var(--accent-hover))}

.sp-card-body{padding:0 18px 20px;margin-top:-32px}
.sp-card-icon{display:inline-block}
.sp-card-icon .av{box-shadow:0 0 0 4px var(--surface);border-radius:20px;background:var(--surface-3)}
.sp-card-name{font-size:18px;font-weight:700;margin-top:12px;word-break:break-word;display:flex;
  align-items:center;gap:7px}
.sp-card-name .priv-ic{flex:0 0 auto;color:var(--text-3)}
.sp-card-name .priv-ic svg{width:15px;height:15px;display:block}
.sp-card-stats{font-size:12.5px;color:var(--text-2);margin-top:6px;display:flex;align-items:center;
  gap:6px;flex-wrap:wrap}
.sp-card-stats .on-dot{width:8px;height:8px;border-radius:50%;background:var(--green-dot);flex:0 0 auto}
.sp-card-est{font-size:11.5px;color:var(--text-3);margin-top:4px;text-transform:uppercase;letter-spacing:.4px;
  font-weight:600}
.sp-card-desc{font-size:13px;color:var(--text-2);line-height:1.55;margin-top:12px;white-space:pre-wrap;
  word-break:break-word}
.sp-card-desc.empty{color:var(--text-3);font-style:italic}


.priv-tiers{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.priv-tier{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--border-soft);
  border-radius:var(--r-m);cursor:pointer;transition:background .12s,border-color .12s}
.priv-tier:hover{background:var(--surface-2)}
.priv-tier input{margin-top:2px;width:17px;height:17px;accent-color:var(--accent);flex:0 0 auto;cursor:pointer}
.priv-tier .pt-ic{flex:0 0 auto;width:20px;height:20px;color:var(--text-2);margin-top:1px}
.priv-tier .pt-ic svg{width:20px;height:20px;display:block}
.priv-tier .t{font-size:14px;font-weight:600;display:block}
.priv-tier .d{font-size:12px;color:var(--text-2);margin-top:2px;line-height:1.45;display:block}
.priv-tier:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.priv-tier:has(input:checked) .pt-ic{color:var(--accent)}
.priv-tier.lock:has(input:checked){border-color:var(--red);background:var(--red-soft)}
.priv-tier.lock:has(input:checked) .pt-ic{color:var(--red)}


.chip-tiers{gap:8px;margin-top:6px}
.chip-tiers .priv-tier{align-items:center;gap:13px;padding:11px 44px 11px 13px;border-radius:20px;position:relative}

.chip-tiers.no-ic .priv-tier{padding-left:16px}
.chip-tiers .priv-tier input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}   
.chip-tiers .pt-ic{width:34px;height:34px;border-radius:20px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-3);color:var(--text-2);margin:0;flex:0 0 auto;transition:background .12s,color .12s}
.chip-tiers .pt-ic svg{width:19px;height:19px}
.chip-tiers .pt-meta{flex:1;min-width:0}
.chip-tiers .priv-tier:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.chip-tiers .priv-tier:has(input:checked) .pt-ic{background:var(--accent);color:var(--on-accent)}
.chip-tiers .priv-tier:has(input:checked) .t{color:var(--accent)}

.chip-tiers .priv-tier::after{content:'';position:absolute;right:13px;top:50%;transform:translateY(-50%);
  box-sizing:border-box;width:22px;height:22px;border-radius:50%;border:2px solid var(--border);background:transparent;
  transition:border-color .14s var(--ease),background .14s var(--ease)}
.chip-tiers .priv-tier::before{content:'';position:absolute;right:13px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;opacity:0;z-index:1;background:var(--on-accent,#fff);transition:opacity .14s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/13px no-repeat}
.chip-tiers .priv-tier:has(input:checked)::after{border-color:var(--accent);background:var(--accent)}
.chip-tiers .priv-tier:has(input:checked)::before{opacity:1}

.chip-tiers .priv-tier.lock:has(input:checked){border-color:var(--red);background:var(--red-soft)}
.chip-tiers .priv-tier.lock:has(input:checked) .pt-ic{background:var(--red);color:var(--on-accent)}
.chip-tiers .priv-tier.lock:has(input:checked) .t{color:var(--red)}
.chip-tiers .priv-tier.lock:has(input:checked)::after{border-color:var(--red);background:var(--red)}

.priv-tiers:not(.chip-tiers) .priv-tier input[type=radio]{appearance:none;-webkit-appearance:none;margin-top:1px;
  position:relative;width:22px;height:22px;border-radius:50%;background:transparent;border:2px solid var(--border);
  flex:0 0 auto;cursor:pointer;transition:background .14s ease,border-color .14s ease}
.priv-tiers:not(.chip-tiers) .priv-tier input[type=radio]:checked{background:var(--accent);border-color:var(--accent)}
.priv-tiers:not(.chip-tiers) .priv-tier input[type=radio]:checked::after{content:'';position:absolute;inset:0;
  background:var(--on-accent,#fff);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/13px no-repeat}


.ss-soon{text-align:center;padding:64px 20px;color:var(--text-3)}
.ss-soon svg{width:46px;height:46px;margin-bottom:14px;opacity:.6}
.ss-soon .h{font-size:16px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.ss-soon .p{font-size:13px;line-height:1.5;max-width:320px;margin:0 auto}


.dls-warn{background:var(--red-soft);border:1px solid var(--red);border-radius:var(--r-m);padding:14px 16px;
  margin-bottom:16px}
.dls-warn .h{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--red);
  margin-bottom:8px}
.dls-warn .h svg{width:18px;height:18px;flex:0 0 auto}
.dls-warn ul{margin:0;padding-left:20px;font-size:13px;color:var(--text-2);line-height:1.7}
.dls-confirm-name{font-weight:700;color:var(--text)}


@media (min-width:721px){
  #m-settings.modal.open,
  #m-editchan.modal.open,
  #m-profile.modal.open{padding:0}
  #m-settings .modal-card.settings-shell,
  #m-editchan .modal-card.settings-shell,
  #m-profile .modal-card.settings-shell{
    width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;border-radius:0;
    border:0;box-shadow:none;
    grid-template-columns:minmax(240px,1fr) minmax(0,2.3fr)}
  #m-settings .ss-nav,
  #m-editchan .ss-nav,
  #m-profile .ss-nav{align-items:flex-end;padding:58px 16px 40px 0}
  #m-settings .ss-nav>*,
  #m-editchan .ss-nav>*,
  #m-profile .ss-nav>*{width:100%;max-width:220px}
  #m-settings .ss-content,
  #m-editchan .ss-content,
  #m-profile .ss-content{padding:58px 48px 56px 52px}
  #m-settings .ss-content>.ss-pane,
  #m-editchan .ss-content>.ss-pane,
  #m-profile .ss-content>.ss-pane{max-width:760px}
  
  #m-profile .ss-nav>*{max-width:248px}
}


@media (min-width:721px){
  .modal.open:has(> .modal-card.settings-shell){padding:0;align-items:stretch;justify-content:stretch}
  .modal.open > .modal-card.settings-shell{width:100vw;max-width:none;height:100vh;height:100dvh;
    max-height:none;border-radius:0}
}

@media (max-width:720px){
  
  .modal.open:has(> .modal-card.settings-shell){padding:0;align-items:stretch;justify-content:stretch}
  .modal-card.settings-shell{grid-template-columns:1fr;max-width:100%;width:100%;height:100dvh;max-height:100dvh;
    border-radius:0}
  .ss-nav{border-right:none}
  .ss-nav.is-hidden{display:none}
  .ss-content{display:none;padding:18px 14px calc(40px + env(safe-area-inset-bottom))}
  .ss-content.is-shown{display:block}
  
  .settings-shell.ss-stepping{overflow:hidden;position:relative}
  .settings-shell.ss-stepping>.ss-nav{display:flex}
  .settings-shell.ss-stepping>.ss-content.is-shown{position:absolute;inset:0;z-index:5;background:var(--surface);box-shadow:-18px 0 40px rgba(0,0,0,.22);will-change:transform}
  .ss-back{display:inline-flex}
  
  .ss-esc{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:14px;left:auto;bottom:auto;
    float:none;margin:0;z-index:8}
  .sp-grid{grid-template-columns:1fr}
  .sp-side{position:static;order:-1}
}


.ss-count{font-size:13px;font-weight:500;color:var(--text-3)}
.ss-locked-note{display:flex;align-items:center;gap:10px;background:var(--red-soft);border:1px solid var(--red);
  color:var(--text);border-radius:var(--r-m);padding:12px 14px;font-size:13px;line-height:1.45;margin-bottom:16px}
.ss-locked-note svg{width:18px;height:18px;flex:0 0 auto;color:var(--red)}


.mp-search{position:relative;margin-bottom:14px}
.mp-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-3)}
.mp-search input{width:100%;height:40px;padding:0 14px 0 40px;border:1px solid var(--border);border-radius:var(--r-m);
  background:var(--surface);color:var(--text);font:inherit;font-size:14px}
.mp-search input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);outline:none}
.mp-layout{display:grid;grid-template-columns:240px 1fr;gap:18px;align-items:start}
.mp-list{border-right:1px solid var(--border-soft);padding-right:14px;max-height:440px;overflow-y:auto;
  display:flex;flex-direction:column;gap:1px}
.mp-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;border-radius:var(--r-s);
  transition:background .12s}
.mp-item:hover{background:var(--surface-2)}
.mp-item.active{background:var(--accent-soft)}
.mp-item .avwrap{position:relative;flex:0 0 auto}
.mp-item .dot{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;border:2px solid var(--surface)}
.mp-meta{min-width:0;flex:1}
.mp-nm{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:500;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-nm .crown{width:14px;height:14px;color:#f9ab00;flex:0 0 auto}
.mp-nm .timeout-ind{flex:0 0 auto}
.mp-sub{font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-editor{min-width:0}
.mp-empty{color:var(--text-3);font-size:13px;padding:30px 4px;text-align:center}
.mp-ed-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.mp-ed-head .avwrap{position:relative;flex:0 0 auto}
.mp-ed-head .mc-dot{position:absolute;right:0;bottom:0;width:15px;height:15px;border-radius:50%;border:3px solid var(--surface)}
.mp-ed-name{font-size:18px;font-weight:600;display:flex;align-items:center;gap:7px}
.mp-ed-name .crown{width:16px;height:16px;color:#f9ab00}
.mp-ed-sub{font-size:12.5px;color:var(--text-2);margin-top:2px}
.mp-nick-row{display:flex;gap:8px}
.mp-nick-row input{flex:1;height:38px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-s);
  background:var(--surface);color:var(--text);font:inherit;font-size:14px}
.mp-nick-row input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);outline:none}
.mp-actions{display:flex;gap:10px}


.inv-create{display:flex;gap:12px;align-items:flex-end;margin-bottom:6px}
.inv-create .btn{height:42px;flex:0 0 auto}
.inv-create select:disabled,.inv-create .btn:disabled{opacity:.5;cursor:not-allowed}


.audit-filters{display:flex;gap:10px;margin-bottom:12px}
.audit-filters select,.audit-filters input{height:38px;padding:0 12px;border:1px solid var(--border);
  border-radius:var(--r-s);background:var(--surface);color:var(--text);font:inherit;font-size:13.5px}
.audit-filters select{flex:0 0 auto;min-width:150px;cursor:pointer}
.audit-filters input{flex:1}
.audit-filters select:focus,.audit-filters input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);outline:none}

@media (max-width:720px){
  .mp-layout{grid-template-columns:1fr;gap:14px}
  .mp-list{border-right:none;border-bottom:1px solid var(--border-soft);padding:0 0 12px;max-height:200px}
  .inv-create{flex-wrap:wrap}
  .inv-create .field{flex:1 1 140px}
}



.cemoji{width:1.4em;height:1.4em;vertical-align:-0.32em;object-fit:contain;margin:0 1px}


.emoji-new{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.emoji-prev{width:44px;height:44px;flex:0 0 auto;border:1px dashed var(--border);border-radius:var(--r-s);
  display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:22px;font-weight:400;
  background:var(--surface-2);overflow:hidden}
.emoji-prev img{width:100%;height:100%;object-fit:contain}
.emoji-new input[type=text]{flex:1;min-width:140px;height:42px;padding:0 14px;border:1px solid var(--border);
  border-radius:var(--r-s);background:var(--surface);color:var(--text);font:inherit;font-size:14px}
.emoji-new input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);outline:none}
.emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.emoji-cell{position:relative;border:1px solid var(--border-soft);border-radius:var(--r-m);padding:12px 8px 8px;
  display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--surface);text-align:center}
.emoji-cell img{width:40px;height:40px;object-fit:contain}
.emoji-cell-name{font-size:11px;color:var(--text-2);font-family:'Roboto Mono',Consolas,monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.emoji-del{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:var(--surface-3);
  color:var(--text-2);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s}
.emoji-del svg{width:13px;height:13px}
.emoji-cell:hover .emoji-del{opacity:1}
.emoji-del:hover{background:var(--red);color:#fff}


#eng-welcome-wrap.hidden{display:none}
.onb-q{border:1px solid var(--border-soft);border-radius:var(--r-m);padding:14px;margin-bottom:12px;background:var(--surface-2)}
.onb-q-head{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.onb-q-text{flex:1;height:38px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-s);
  background:var(--surface);color:var(--text);font:inherit;font-size:14px;font-weight:500}
.onb-q-text:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);outline:none}
.onb-q-del{flex:0 0 auto;color:var(--text-3)}
.onb-q-del:hover{color:var(--red)}
.onb-ans-label{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.onb-ans{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.onb-ans-label-in{flex:1;height:36px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-s);
  background:var(--surface);color:var(--text);font:inherit;font-size:13.5px}
.onb-ans-role{flex:0 0 auto;width:150px;height:36px;padding:0 10px;border:1px solid var(--border);
  border-radius:var(--r-s);background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;cursor:pointer}
.onb-ans-label-in:focus,.onb-ans-role:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);outline:none}
.onb-ans-del{flex:0 0 auto;width:32px;height:32px;color:var(--text-3)}
.onb-ans-del:hover{color:var(--red)}
.onb-q-foot{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--border-soft)}
.onb-chk{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-2);cursor:pointer}
.onb-chk input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}


.gate-rules-text{max-height:46vh;overflow-y:auto;background:var(--surface-2);border:1px solid var(--border-soft);
  border-radius:var(--r-m);padding:14px 16px;font-size:14px;line-height:1.6;color:var(--text);
  white-space:pre-wrap;word-break:break-word;margin-bottom:6px}
.gate-q{margin-bottom:18px}
.gate-q-prompt{font-size:14px;font-weight:600;margin-bottom:10px}
.gate-req{color:var(--red)}
.gate-opts{display:flex;flex-direction:column;gap:8px}

.gate-opt{display:flex;align-items:center;gap:13px;padding:13px 15px;
  border:1.5px solid var(--border-soft);border-radius:20px;cursor:pointer;
  font-size:14.5px;font-weight:500;color:var(--gate-text,var(--text));background:var(--surface);
  transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease),transform .07s var(--ease);
  -webkit-tap-highlight-color:transparent}
.gate-opt > span{flex:1 1 auto;line-height:1.35}
.gate-opt:hover{border-color:color-mix(in srgb,var(--g-accent,var(--accent)) 45%,var(--border-soft));background:var(--surface-2)}
.gate-opt:active{transform:scale(.992)}
.gate-opt:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--g-accent,var(--accent)) 30%,transparent)}

.gate-opt input{appearance:none;-webkit-appearance:none;margin:0;flex:0 0 auto;cursor:pointer;
  width:22px;height:22px;border:2px solid var(--border);border-radius:7px;background:var(--surface);
  background-repeat:no-repeat;background-position:center;background-size:0 0;
  transition:border-color .15s var(--ease),background-color .15s var(--ease),background-size .15s var(--ease)}
.gate-opt input[type="radio"]{border-radius:50%}
.gate-opt input:checked{border-color:var(--g-accent,var(--accent));background-color:var(--g-accent,var(--accent));
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>");
  background-size:64% 64%}
.gate-opt:has(input:checked){border-color:var(--g-accent,var(--accent));
  background:color-mix(in srgb,var(--g-accent,var(--accent)) 12%,transparent)}

#gate-onb-questions[data-onb-style="default"] .gate-opt:has(input:checked){
  box-shadow:inset 0 0 0 1px var(--g-accent,var(--accent)),0 6px 18px -12px var(--g-accent,var(--accent))}


.modal#m-gate{--g-accent:var(--gate-accent,var(--accent))}
.modal#m-gate.gate-fs.open{padding:0;align-items:stretch;justify-content:stretch}
.modal#m-gate.gate-fs.open>.modal-card{
  width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;
  border-radius:0;border:0;padding:0;overflow:auto;position:relative;
  display:flex;flex-direction:column;
  background:var(--gate-bg,var(--surface));color:var(--gate-text,var(--text))}

.gate-close{position:absolute;top:16px;right:16px;z-index:7;width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;opacity:.7;
  background:color-mix(in srgb,var(--gate-text,var(--text)) 8%,transparent);color:var(--gate-text,var(--text));
  transition:opacity .15s var(--ease),background .15s var(--ease)}
.gate-close:hover{opacity:1;background:color-mix(in srgb,var(--gate-text,var(--text)) 16%,transparent)}
.gate-close svg{width:22px;height:22px}

.modal#m-gate.gate-fs.open>.modal-card>.modal-head{
  position:static;margin:auto auto 0;padding:0 26px 8px;background:transparent;border:0;border-radius:0;
  flex:0 0 auto;width:100%;max-width:600px;justify-content:center;text-align:center}
.modal#m-gate.gate-fs.open>.modal-card>.modal-head h3{font-size:25px}
.modal#m-gate.gate-fs.open .modal-sub{text-align:center}
.modal#m-gate.gate-fs.open>.modal-card>.form-err{width:100%;max-width:600px;margin:0 auto;padding:0 26px}
.modal#m-gate.gate-fs.open>.modal-card>#gate-rules,
.modal#m-gate.gate-fs.open>.modal-card>#gate-onb{
  width:100%;max-width:600px;margin:0 auto auto;padding:12px 26px calc(20px + env(safe-area-inset-bottom));
  flex:0 0 auto;display:flex;flex-direction:column}

.modal#m-gate.gate-fs.open #gate-onb-questions,
.modal#m-gate.gate-fs.open .gate-rules-text{flex:0 0 auto}
.modal#m-gate.gate-fs.open .modal-actions{position:static;margin-top:20px;padding:0;background:none}

@media (min-width:981px){
  .modal#m-gate.gate-fs.open{left:72px}
  .modal#m-gate.gate-fs.open>.modal-card{width:calc(100vw - 72px)}
}

#gate-onb-questions[data-onb-style="solid"] .gate-opt,
#gate-onb-questions[data-onb-style="outline"] .gate-opt{justify-content:center;text-align:center;font-weight:600;border-radius:999px}
#gate-onb-questions[data-onb-style="solid"] .gate-opt input,
#gate-onb-questions[data-onb-style="outline"] .gate-opt input,
#gate-onb-questions[data-onb-style="cards"] .gate-opt input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#gate-onb-questions[data-onb-style="solid"] .gate-opt{background:var(--surface-2)}
#gate-onb-questions[data-onb-style="solid"] .gate-opt:has(input:checked){background:var(--g-accent);border-color:var(--g-accent);color:var(--on-accent,#fff)}
#gate-onb-questions[data-onb-style="outline"] .gate-opt{border-width:2px;background:transparent}
#gate-onb-questions[data-onb-style="outline"] .gate-opt:has(input:checked){border-color:var(--g-accent);color:var(--g-accent);background:transparent}
#gate-onb-questions[data-onb-style="cards"] .gate-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
#gate-onb-questions[data-onb-style="cards"] .gate-opt{flex-direction:column;justify-content:center;text-align:center;gap:6px;padding:22px 12px;border-width:2px;font-weight:600;border-radius:20px}
#gate-onb-questions[data-onb-style="cards"] .gate-opt:has(input:checked){border-color:var(--g-accent);
  background:var(--accent-soft);background:color-mix(in srgb,var(--g-accent) 14%,transparent)}

.onb-theme-row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;margin-top:6px}
.onb-theme-row.hidden{display:none}
.onb-col{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text-2)}
.onb-col input[type="color"]{width:54px;height:34px;border:1px solid var(--border-soft);border-radius:20px;background:none;cursor:pointer;padding:2px}



#toasts{position:fixed;left:0;right:0;bottom:24px;display:flex;flex-direction:column;
  align-items:center;gap:10px;z-index:160;pointer-events:none;padding:0 12px}


.conn-status{position:fixed;left:50%;top:calc(var(--store-h, 0px) + 10px);transform:translateX(-50%);
  z-index:90;display:flex;align-items:center;gap:9px;max-width:calc(100vw - 24px);padding:8px 15px;
  border-radius:999px;background:var(--surface);color:var(--text-2);
  font-size:13px;font-weight:600;line-height:1;white-space:nowrap;border:1px solid var(--border-soft);
  box-shadow:var(--sh-2)}
.conn-status.hidden{display:none}
.conn-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#f9ab00}
html:not([data-motion="off"]) .conn-dot{animation:connPulse 1.1s ease-in-out infinite}
@keyframes connPulse{0%,100%{opacity:1}50%{opacity:.3}}

.toast{position:relative;display:flex;align-items:center;gap:12px;
  background:var(--surface);color:var(--text);
  font-size:14px;font-weight:500;line-height:1.4;padding:14px 20px;border-radius:var(--r-l);
  border:1px solid var(--border-soft);box-shadow:var(--sh-3);
  max-width:min(560px,calc(100vw - 24px));text-align:left;overflow:hidden;
  animation:toastIn .28s var(--ease)}
.toast.err{border-color:var(--red)}
.toast.out{animation:toastOut .22s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(18px) scale(.95)}to{opacity:1;transform:none}}
@keyframes toastOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(10px) scale(.97)}}


.rail-item.browse{background:var(--surface);color:var(--text);box-shadow:var(--sh-1)}
.rail-item.browse:hover{background:var(--accent);color:var(--on-accent)}

.rail-item.browse.active{background:var(--accent);color:var(--on-accent);box-shadow:var(--sh-2)}
.rail-item.browse svg{width:22px;height:22px}

#preview-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--accent-soft);
  border-bottom:1px solid var(--border-soft);font-size:13.5px;flex:0 0 auto}
#preview-bar span{flex:1;min-width:0}
#preview-bar .btn{height:34px;padding:0 16px;font-size:13px;flex:0 0 auto}

@media (max-width:980px){
  #preview-bar{flex-direction:column;align-items:center;text-align:center;gap:11px;padding:14px 16px 15px}
  #preview-bar span{flex:none;width:100%;line-height:1.4}
  #preview-bar .btn{width:100%;max-width:360px;height:48px;font-size:15px;font-weight:600;padding:0 20px}
}

#attach-bar{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:16px 16px 4px 4px;
  padding:8px 10px;font-size:13px;color:var(--text-2);margin-bottom:4px;animation:fadeUp .15s var(--ease)}
#attach-bar img{width:44px;height:44px;border-radius:20px;object-fit:cover;flex:0 0 auto}
#attach-bar .rsnip{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#attach-bar .icon-btn{width:26px;height:26px}
#attach-bar .icon-btn svg{width:14px;height:14px}

.mimg{display:block;max-width:min(380px,100%);max-height:300px;border-radius:20px;margin-top:4px;cursor:zoom-in;
  border:1px solid var(--border-soft);object-fit:cover}

.browse-card{border:1px solid var(--border-soft);border-radius:var(--r-l);overflow:hidden;margin-bottom:14px;
  background:var(--surface)}
.browse-card .bb{height:110px;background:var(--surface-2) center/cover no-repeat}
.browse-card .bbody{display:flex;align-items:center;gap:14px;padding:14px 16px}
.browse-card .bmeta{flex:1;min-width:0}
.browse-card .bname{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browse-card .bcount{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2);margin-top:2px}
.browse-card .bcount svg{width:14px;height:14px;flex:0 0 auto}
.browse-card .av{border-radius:20px}




.rail-wrap .badge{position:absolute;right:-3px;bottom:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:20px;
  background:var(--red);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;
  border:2px solid var(--surface-2);z-index:2;pointer-events:none}
.rail-wrap .unread-dot{position:absolute;left:-12px;top:50%;translate:0 -50%;width:8px;height:8px;border-radius:50%;
  background:var(--text);z-index:1}
.rail-wrap.active .unread-dot{display:none}


.channel.unread{color:var(--text);font-weight:600}
.channel.unread .hash{color:var(--text)}
.channel .ch-badge{min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:var(--red);color:#fff;
  font-size:11px;font-weight:700;line-height:18px;text-align:center;flex:0 0 auto}
.channel:hover .cact{opacity:1}


.mention{background:var(--accent-soft);color:var(--accent);border-radius:4px;padding:0 3px;font-weight:600;
  cursor:pointer}
.mention.me{background:rgba(249,171,0,.22);color:#9a6a00}
body.dark .mention.me{background:rgba(249,171,0,.18);color:#fdd663}
.mrow.mentioned{box-shadow:inset 3px 0 0 var(--accent)}
.mrow.mentioned-me{box-shadow:inset 3px 0 0 #f9ab00;background:rgba(249,171,0,.06)}
.mtext a{color:var(--accent);text-decoration:none}
.mtext a:hover{text-decoration:underline}


#mention-pop{position:absolute;bottom:100%;left:0;margin-bottom:8px;background:var(--surface);
  border:1px solid var(--border-soft);border-radius:var(--r-m);box-shadow:var(--sh-3);
  width:280px;max-height:240px;overflow-y:auto;padding:6px;z-index:30;animation:fadeUp .12s var(--ease)}
.mention-item{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:var(--r-s);cursor:pointer}
.mention-item .av{width:28px;height:28px;font-size:12px}
.mention-item .mn{font-size:13.5px;font-weight:500}
.mention-item.sel,.mention-item:hover{background:var(--accent-soft)}


#slash-pop{position:absolute;bottom:100%;left:0;margin-bottom:8px;background:var(--surface);
  border:1px solid var(--border-soft);border-radius:var(--r-m);box-shadow:var(--sh-3);
  width:340px;max-width:calc(100vw - 32px);max-height:300px;overflow-y:auto;padding:6px;z-index:31;animation:fadeUp .12s var(--ease)}
.slash-head{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-3);padding:6px 9px 5px}
.slash-item{display:flex;align-items:baseline;gap:8px;padding:7px 9px;border-radius:var(--r-s);cursor:pointer}
.slash-item.sel,.slash-item:hover{background:var(--accent-soft)}
.slash-item .sc-name{font-size:13.5px;font-weight:600;color:var(--text);flex:0 0 auto}
.slash-item .sc-arg{font-size:12px;color:var(--accent);white-space:nowrap;flex:0 0 auto}
.slash-item .sc-desc{font-size:12px;color:var(--text-3);margin-left:auto;text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}

.slash-item .sc-bot{font-size:9.5px;font-weight:700;letter-spacing:.4px;color:var(--on-accent);
  background:var(--accent);border-radius:4px;padding:1px 5px;flex:0 0 auto}
.slash-item .sc-bot + .sc-desc{margin-left:8px}


.new-divider{position:relative;display:flex;align-items:center;justify-content:flex-end;
  margin:6px 18px 2px;height:0;border-top:1px solid var(--red);pointer-events:none}
.new-divider span{position:relative;top:-9px;background:var(--red);color:var(--on-accent);
  font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:2px 8px;border-radius:0}


.reacts{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.react{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:20px;
  background:var(--surface-2);border:1px solid transparent;font-size:13px;cursor:pointer;
  transition:background .12s,border-color .12s;user-select:none;background:#ffffff0f}
.react .rc{font-size:12px;font-weight:600;color:var(--text-2);min-width:8px}
.react:hover{background:var(--surface-3)}
.react.mine{background:var(--accent-soft);border-color:var(--accent)}
.react.mine .rc{color:var(--accent)}


.react-pop{position:absolute;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-m);
  box-shadow:var(--sh-3);padding:6px;display:flex;gap:2px;z-index:30;animation:fadeUp .12s var(--ease)}
.react-pop button{width:34px;height:34px;border-radius:var(--r-s);font-size:18px;display:flex;align-items:center;
  justify-content:center;transition:background .12s}
.react-pop button:hover{background:var(--surface-2)}


#typing{height:20px;padding:2px 18px 0;font-size:12.5px;color:var(--text-2);display:flex;align-items:center;gap:7px;
  flex:0 0 auto;visibility:hidden}
#typing.show{visibility:visible}
.typing-dots{display:inline-flex;gap:3px}
.typing-dots i{width:6px;height:6px;border-radius:50%;background:var(--text-2);
  animation:typed 1s infinite ease-in-out;will-change:transform,opacity}
.typing-dots i:nth-child(2){animation-delay:.15s}
.typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes typed{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}

html[data-motion="off"] .typing-dots i{animation:typed 1s infinite ease-in-out!important}

@media (prefers-reduced-motion:reduce){
  .typing-dots i{animation-duration:1s!important}
}

.mem-typing{position:absolute;right:-4px;bottom:-3px;display:inline-flex;align-items:center;gap:2.5px;
  padding:4px 6px;border-radius:20px;background:var(--surface-2);box-shadow:0 0 0 2px var(--bg);z-index:2;pointer-events:none}
.mem-typing i{width:4px;height:4px;border-radius:50%;background:var(--green-dot,#34a853);animation:memTyped 1.2s infinite ease-in-out;will-change:opacity}
.mem-typing i:nth-child(2){animation-delay:.15s}
.mem-typing i:nth-child(3){animation-delay:.3s}
.member.is-typing .dot{display:none}
html[data-motion="off"] .mem-typing i{animation:memTyped 1.2s infinite ease-in-out!important}

@keyframes memTyped{0%,80%,100%{opacity:.3}40%{opacity:1}}

.mrow.pending{filter:opacity(.6)}


.day-divider{display:flex;align-items:center;gap:14px;margin:18px 4px 8px;color:var(--text-3);
  font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.day-divider::before,.day-divider::after{content:'';flex:1;height:1px;background:var(--border-soft)}


.mtext .edited{font-size:10px;color:var(--text-3);font-weight:400;margin-left:5px;letter-spacing:.2px}


.edit-box{margin-top:2px}
.edit-box textarea{width:100%;border:1px solid var(--border);border-radius:var(--r-s);background:var(--surface);
  padding:8px 10px;font-size:14px;line-height:1.5;resize:none;min-height:38px;outline:none}
.edit-box textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.edit-box .hint{font-size:11px;color:var(--text-3);margin-top:4px}
.edit-box .hint span{color:var(--accent);cursor:pointer}


#chat-top .pin-btn{position:relative}
#chat-top .pin-btn .pin-count{position:absolute;top:2px;right:2px;min-width:15px;height:15px;padding:0 3px;
  border-radius:20px;background:var(--accent);color:var(--on-accent);font-size:9px;font-weight:700;line-height:15px;
  text-align:center}

.pin-pop{position:fixed;right:14px;bottom:auto;width:min(460px,calc(100vw - 28px));margin-top:8px;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:20px;box-shadow:var(--sh-3);
  padding:0;z-index:65;display:flex;flex-direction:column;overflow:hidden;max-height:min(68vh,640px);
  transform-origin:top right;animation:popAnchor .18s var(--ease)}
@keyframes popAnchor{from{transform:translateY(-6px) scale(.98);opacity:0}to{transform:none;opacity:1}}
@keyframes panelSlideIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:980px){
  .pin-pop{right:0;bottom:0;width:min(400px,100vw);max-width:100vw;margin-top:0;max-height:none;
    border:0;border-left:1px solid var(--border-soft);border-radius:0;box-shadow:-12px 0 32px rgba(0,0,0,.22);
    animation:panelSlideIn .2s var(--ease)}
}

.pin-pop .pp-head{display:flex;align-items:center;gap:8px;height:52px;flex:0 0 auto;padding:0 8px 0 18px;
  margin-top:0;border-bottom:1px solid var(--border-soft)}
.pin-pop h4{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-3);
  padding:0;margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pin-pop .pp-close{flex:0 0 auto}
.pin-pop .pp-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:2px}
.search-pop .pp-search{flex:0 0 auto;padding:12px 14px;border-bottom:1px solid var(--border-soft)}
.search-pop #search-input{width:100%;height:40px;padding:0 14px;border-radius:var(--r-m);border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font:inherit;font-size:14px;outline:none}
.search-pop #search-input:focus{border-color:var(--accent)}

.sf-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.sf-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 4px 0 10px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:600;max-width:100%}
.sf-chip .sf-k{opacity:.7;font-weight:700}
.sf-chip button{appearance:none;border:0;background:transparent;cursor:pointer;color:inherit;width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:0}
.sf-chip button:hover{background:rgba(0,0,0,.08)}
.sf-chip button svg{width:12px;height:12px}

.sf-head{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-3);
  padding:8px 10px 6px}
.sf-row{display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border-radius:20px;cursor:pointer;
  text-align:left;background:none;border:0;font:inherit;color:var(--text)}
.sf-row:hover{background:var(--surface-2)}
.sf-ic{width:30px;height:30px;border-radius:20px;background:var(--surface-3);display:inline-flex;align-items:center;
  justify-content:center;color:var(--text-2);flex:0 0 auto;font-size:15px;font-weight:700}
.sf-ic svg{width:16px;height:16px}
.sf-av{flex:0 0 auto;position:relative;display:inline-block}
.sf-av .av{width:30px;height:30px;font-size:12px}
.sf-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sf-t{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-s{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-s b{color:var(--text-2);font-weight:600}
.sf-hint{font-size:11.5px;color:var(--text-3);padding:8px 10px 4px;text-align:center}
.sr-chan{font-size:11.5px;color:var(--text-3);font-weight:500;margin-left:2px}
.pin-card{padding:9px 10px;border-radius:var(--r-s);transition:background .12s;cursor:pointer;position:relative}
.pin-card:hover{background:var(--surface-2)}
.pin-card .pn{font-size:13px;font-weight:600;margin-bottom:2px}
.pin-card .pt{font-size:13px;color:var(--text-2);line-height:1.45;word-break:break-word}
.pin-card .punpin{position:absolute;top:6px;right:6px;width:24px;height:24px;opacity:0}
.pin-card:hover .punpin{opacity:1}
.pin-card .punpin svg{width:14px;height:14px}
.pin-empty{font-size:13px;color:var(--text-3);padding:14px 8px;text-align:center;line-height:1.5}


#browse-search{border:none;outline:none;background:transparent;width:100%;height:100%;font-size:13.5px;color:var(--text)}
.browse-card .bdesc{font-size:12.5px;color:var(--text-2);margin-top:3px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}


.explore-top{display:flex;align-items:center;gap:16px;margin-bottom:18px;border-bottom:1px solid var(--border-soft)}
.explore-tabs{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.explore-tabs::-webkit-scrollbar{display:none}
.explore-tabs .chip{height:32px;flex:0 0 auto}

.xtab{flex:0 0 auto;height:40px;padding:0 12px;background:transparent;border:none;border-radius:0;cursor:pointer;
  position:relative;color:var(--text-2);font-size:14.5px;font-weight:600;white-space:nowrap}
.xtab:hover{color:var(--text)}
.xtab.active{color:var(--text)}
.xtab.active::after{content:'';position:absolute;left:8px;right:8px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--accent)}

.discover-nav{display:flex;flex-direction:column;gap:2px;padding:6px 8px}
.discover-navitem{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:none;border-radius:var(--r-m);
  background:transparent;color:var(--text-2);font-size:15px;font-weight:600;cursor:pointer;text-align:left;
  transition:background .12s,color .12s}
.discover-navitem svg{width:21px;height:21px;flex:0 0 auto}
.discover-navitem .dn-meta{display:flex;flex-direction:column;min-width:0}
.discover-navitem .dn-sub{display:none}   
.discover-navitem:hover:not(:disabled){background:var(--surface-2);color:var(--text)}
.discover-navitem.active{background:var(--accent-soft);color:var(--accent)}
.discover-navitem:disabled{cursor:default;opacity:.5}
.dn-soon{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-3);
  background:var(--surface-3);padding:2px 7px;border-radius:5px}

@media (max-width:980px){
  .discover-nav{display:flex;flex-direction:column;gap:2px;padding:8px}
  .discover-navitem{align-items:center;gap:12px;width:100%;min-height:0;padding:12px 14px;
    border-radius:20px;border:0;text-align:left;color:var(--text-2);position:relative;overflow:hidden;
    background:transparent;box-shadow:none;transition:background .12s,color .12s}
  .discover-navitem::before{display:none}
  .discover-navitem svg{width:21px;height:21px;padding:0;box-sizing:content-box;border-radius:0;
    background:transparent;color:inherit;box-shadow:none}
  .discover-navitem .dn-name{font-size:15px;font-weight:600;letter-spacing:0}
  .discover-navitem .dn-sub{display:none}
  .discover-navitem:hover:not(:disabled){background:var(--surface-2);color:var(--text)}
  .discover-navitem.active{background:var(--accent-soft);color:var(--accent);box-shadow:none}
  .discover-navitem:disabled{cursor:default;opacity:.5}
  .dn-soon{color:var(--text-3);background:var(--surface-3);font-size:9px;padding:2px 7px;border-radius:20px}
  .discover-navitem:active:not(:disabled){transform:scale(.98)}
}
.explore-search{display:flex;align-items:center;gap:8px;flex:0 0 auto;width:260px;max-width:40vw;height:38px;
  padding:0 14px;border:1px solid var(--border);border-radius:var(--r-m);background:var(--surface)}
.explore-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.explore-search svg{width:16px;height:16px;color:var(--text-3);flex:0 0 auto}

.hd-search{height:34px;width:240px;max-width:42vw;margin-left:auto;padding:0 12px}

@media (max-width:980px){
  #hd-explore-search{width:34px;max-width:34px;padding:0;justify-content:center;cursor:pointer;
    transition:max-width .2s var(--ease),padding .2s var(--ease)}
  #hd-explore-search #browse-search{width:0;min-width:0;padding:0;transition:width .2s var(--ease)}
  #hd-explore-search:focus-within{max-width:62vw;width:auto;padding:0 12px;justify-content:flex-start}
  #hd-explore-search:focus-within #browse-search{width:160px}
}
.explore-section-title{font-size:18px;font-weight:700;margin:4px 0 14px}
.explore-hero{position:relative;border-radius:var(--r-l);overflow:hidden;margin-bottom:22px;padding:48px 40px;
  background:linear-gradient(120deg,#0f1657 0%,#1a3fae 55%,#1a73e8 100%);color:#fff}
.explore-hero h2{font-size:38px;font-weight:800;letter-spacing:.5px;line-height:1.05;text-transform:uppercase;max-width:560px}
.explore-hero p{margin-top:12px;font-size:15px;opacity:.9;max-width:520px}
.explore-hero::before{content:'';position:absolute;left:-60px;bottom:-80px;width:220px;height:220px;border-radius:50%;
  background:rgba(255,255,255,.06)}
@media (max-width:760px){.explore-hero{padding:30px 22px}.explore-hero h2{font-size:27px}
  .explore-search{width:180px}}
.explore-hero::after{content:'';position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;
  background:rgba(255,255,255,.08)}
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tagrow .chip{height:28px;padding:0 12px;font-size:12px}
.explore-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.explore-card{border:1px solid var(--border-soft);border-radius:var(--r-l);overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;transition:box-shadow .18s var(--ease),transform .18s var(--ease)}
.explore-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.explore-card .xb{height:140px;background:linear-gradient(120deg,var(--surface-3),var(--surface-2)) center/cover no-repeat;
  background-size:cover}
.explore-card .xicon{margin:-26px 0 0 14px;border:4px solid var(--surface);border-radius:20px;width:52px;height:52px;
  font-size:19px}
.explore-card .xbody{padding:6px 14px 14px;display:flex;flex-direction:column;flex:1}
.explore-card .xname{font-size:15px;font-weight:600;margin-top:2px;display:flex;align-items:center;gap:6px}
.explore-card .xname svg{width:15px;height:15px;color:var(--green);flex:0 0 auto}
.explore-card .xdesc{font-size:12.5px;color:var(--text-2);line-height:1.45;margin-top:4px;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.explore-card .xtags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.explore-card .xtag{font-size:10.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--accent);
  background:var(--accent-soft);border-radius:20px;padding:3px 8px}
.explore-card .xfoot{display:flex;align-items:center;gap:14px;margin-top:10px;font-size:12px;color:var(--text-2)}
.explore-card .xfoot .stat{display:inline-flex;align-items:center;gap:5px}
.explore-card .xfoot .stat i{width:8px;height:8px;border-radius:50%;display:inline-block}
.explore-card .xfoot .stat i.on{background:var(--green-dot)}
.explore-card .xfoot .stat i.tot{background:var(--text-3)}
.explore-card .xfoot .btn{height:32px;padding:0 16px;font-size:13px;margin-left:auto}


.rail-item.home{background:var(--accent);color:var(--on-accent);box-shadow:var(--sh-1)}
body.dark .rail-item.home{background:#ffffff17;color:#ffffff;box-shadow:var(--sh-1)}
.rail-item.home svg{width:24px;height:24px}


.png-ic{display:inline-block;flex:0 0 auto;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.rail-item.home .png-home{width:24px;height:24px;
  -webkit-mask-image:url("/app/assets/img/home.png");mask-image:url("/app/assets/img/home.png")}
.rail-item.browse .png-browse{width:22px;height:22px;
  -webkit-mask-image:url("/app/assets/img/compass.png");mask-image:url("/app/assets/img/compass.png")}
#btn-profile .png-settings{width:20px;height:20px;background:var(--text);
  -webkit-mask-image:url("/app/assets/img/setting.png");mask-image:url("/app/assets/img/setting.png")}

.png-ic.ic-addfriend,.png-ic.ic-dots,.png-ic.ic-mute,.png-ic.ic-ban,.png-ic.ic-thread{width:18px;height:18px}
.ic-addfriend{-webkit-mask-image:url("/app/assets/img/add-friend.png");mask-image:url("/app/assets/img/add-friend.png")}
.ic-dots{-webkit-mask-image:url("/app/assets/img/dots.png");mask-image:url("/app/assets/img/dots.png")}
.ic-mute{-webkit-mask-image:url("/app/assets/img/time.png");mask-image:url("/app/assets/img/time.png")}
.ic-ban{-webkit-mask-image:url("/app/assets/img/ban.png");mask-image:url("/app/assets/img/ban.png")}
.ic-thread{-webkit-mask-image:url("/app/assets/img/thread.png");mask-image:url("/app/assets/img/thread.png")}
#btn-thread .png-ic{width:20px;height:20px}

.ic-phone{-webkit-mask-image:url("/app/assets/img/smartphone.png");mask-image:url("/app/assets/img/smartphone.png");
  -webkit-mask-size:auto 82%;mask-size:auto 82%}
.dm-row{display:flex;align-items:center;gap:10px;padding:7px 10px;margin:1px 0;border-radius:var(--r-s);cursor:pointer;
  color:var(--text-2);font-size:14px;font-weight:500;transition:background .12s,color .12s}
.dm-row:hover{background:var(--surface-2);color:var(--text)}
.dm-row.active{background:var(--accent-soft);color:var(--accent)}
.dm-row .avwrap{position:relative;flex:0 0 auto}
.dm-row .av{width:30px;height:30px;font-size:12px}
.dm-row .dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;
  border:2.5px solid var(--surface);background:var(--green-dot)}
.dm-row.off .dot{background:#bdc1c6}
.dm-row .meta{flex:1;min-width:0}
.dm-row .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-row .lastline{font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-weight:400;margin-top:1px}
.dm-row .ch-badge{flex:0 0 auto}
.freq-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-s);font-size:13.5px}
.freq-row .av{width:30px;height:30px;font-size:12px;flex:0 0 auto}
.freq-row .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.freq-row .icon-btn{width:28px;height:28px}
.freq-row .icon-btn.ok{color:var(--green)}
.freq-row .icon-btn.no{color:var(--red)}
.freq-row .pending{font-size:11px;color:var(--text-3)}


.mc-private{display:flex;gap:12px;align-items:flex-start;background:var(--red-soft);color:var(--red);
  border-radius:var(--r-m);padding:14px;font-size:13.5px;line-height:1.5;margin:12px 0 4px}
.mc-private svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px}
.mc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.mc-actions .btn{height:36px;padding:0 18px;font-size:13px}


.fit-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.fit-row label{flex:0 0 84px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3)}
.fit-row input[type=range]{flex:1;accent-color:var(--accent);height:24px}
.fit-row output{flex:0 0 44px;text-align:right;font-size:12px;color:var(--text-2)}




#drawer-scrim{position:fixed;inset:0;background:rgba(0,0,0,.42);
  z-index:69;opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease)}




.channel.muted{opacity:.55}
.channel.muted.active{opacity:.85}
.channel .mute-ico{width:13px;height:13px;color:var(--text-3);flex:0 0 auto}
.channel .cmute{opacity:0;width:24px;height:24px}
.channel:hover .cmute{opacity:1}
.channel .cmute svg{width:15px;height:15px}

.channel .ch-reorder{display:inline-flex;align-items:center;gap:1px;flex:0 0 auto}
.channel .ch-reorder .icon-btn{width:24px;height:24px;opacity:1}
.channel .ch-reorder .icon-btn svg{width:16px;height:16px}
.channel.reordering,.cat-head.reordering{cursor:default}


.bot-tag{display:inline-flex;align-items:center;height:15px;padding:0 5px;border-radius:4px;background:var(--accent);
  color:var(--on-accent);font-size:9px;font-weight:700;letter-spacing:.6px;vertical-align:2px;cursor:pointer}
.bot-tag:hover{filter:brightness(1.12)}

.verified-tag{font-size:11px;font-weight:600;color:var(--green,#188038);letter-spacing:.2px;margin:0 4px 0 6px;vertical-align:middle}


.mhead .mega{width:14px;height:14px;color:#f9ab00;align-self:center;flex:0 0 auto}
#btn-announce.on{background:rgba(249,171,0,.18);color:#9a6a00}
body.dark #btn-announce.on{color:#fdd663}


.wh-new{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.wh-new select,.wh-new input{height:38px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-s);
  background:var(--surface);outline:none;font-size:13.5px;flex:1;min-width:130px}
.wh-new select:focus,.wh-new input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.wh-new .btn{flex:0 0 auto}
.wh-token{cursor:pointer;letter-spacing:.5px}

.vanity-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.vanity-row input{flex:1;min-width:170px;height:38px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-s);
  background:var(--surface);color:var(--text);outline:none;font-size:14px}
.vanity-row input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.vanity-row .btn{flex:0 0 auto}

.am-list{min-height:54px}
.am-list-del{color:var(--red);cursor:pointer}
.am-list-del:hover{text-decoration:underline}

.stat-bar{height:10px;border-radius:6px;background:var(--surface-2);overflow:hidden;margin:2px 0 6px}
.stat-fill{height:100%;width:0;background:var(--accent);border-radius:6px;transition:width .3s}
.stat-fill.full{background:var(--red)}
.stat-row{font-size:13px;color:var(--text-2);font-weight:600}
.wh-token:hover{border-color:var(--accent);color:var(--accent)}


#jump-pill{position:absolute;right:18px;bottom:96px;z-index:20;display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;background:var(--surface);color:var(--text);border:1px solid var(--border);
  box-shadow:var(--sh-3);transform-origin:center bottom;
  opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;
  transition:opacity .26s var(--ease),transform .34s var(--ease),background .12s var(--ease)}
#jump-pill.show{opacity:1;transform:none;pointer-events:auto}
html[data-motion="off"] #jump-pill{transition:none}
#jump-pill svg{width:22px;height:22px}
#jump-pill:hover{background:var(--surface-2)}



.dm-row .dm-ts{font-size:10.5px;color:var(--text-3);flex:0 0 auto;margin-left:2px}


.dm-seen{padding:1px 8px 4px 60px;font-size:11px;font-weight:500;color:var(--text-3);animation:fadeUp .18s var(--ease)}
.nickrow{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.nickrow input{flex:1;min-width:0;height:40px;padding:0 13px;border:1px solid var(--border);
  border-radius:var(--r-s);background:var(--surface);color:var(--text);font:inherit;font-size:14px;
  outline:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.nickrow input::placeholder{color:var(--text-3)}
.nickrow input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.nickrow .btn{flex:0 0 auto;height:40px}
.mention-item .mn-real{font-size:11.5px;color:var(--text-3);margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


.ss-list{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow-y:auto;padding-right:2px}
.ss-list.ss-audit{max-height:340px}
.ss-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r-s);transition:background .12s}
.ss-row:hover{background:var(--surface-2)}
.ss-row .av{width:32px;height:32px;font-size:13px;flex:0 0 auto}
.ss-row .meta{flex:1;min-width:0}
.ss-row .nm{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-row .nm .ss-act{font-weight:400;color:var(--text-2)}
.ss-row .sub{font-size:11.5px;color:var(--text-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-row .btn{height:30px;padding:0 14px;font-size:12.5px;flex:0 0 auto}
.ss-code{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:12.5px;background:var(--surface-2);
  border:1px solid var(--border-soft);border-radius:6px;padding:5px 8px;letter-spacing:1px;flex:0 0 auto}




.srch-hl{background:rgba(249,171,0,.4);color:inherit;border-radius:3px;padding:0 1px}
body.dark .srch-hl{background:rgba(249,171,0,.3)}


.mcode{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:12.5px;
  background:var(--surface-2);border:1px solid var(--border-soft);border-radius:4px;padding:1px 5px}
.mblock{display:block;background:var(--surface-2);border:1px solid var(--border-soft);
  border-radius:var(--r-s);padding:8px 10px;margin:4px 0;overflow-x:auto;max-width:100%}
.mblock code{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:12.5px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word}
.bq{display:block;border-left:3px solid var(--border);padding:1px 0 1px 10px;color:var(--text-2)}

.md-h{display:block;font-weight:700;line-height:1.3;margin:6px 0 2px;color:var(--text)}
.md-h1{font-size:1.6em}
.md-h2{font-size:1.3em}
.md-h3{font-size:1.05em}
.spoiler{background:var(--text-3);color:transparent;border-radius:4px;padding:0 4px;cursor:pointer;user-select:none;
  transition:background .18s var(--ease),color .18s var(--ease)}
.spoiler.revealed{background:var(--surface-2);color:inherit;cursor:auto;user-select:auto}


.dot.st-online,.sdot.st-online{background:var(--green-dot)}
.dot.st-idle,.sdot.st-idle{background:#f9ab00}
.dot.st-dnd,.sdot.st-dnd{background:#ea4335}
.dot.st-off,.sdot.st-off{background:#bdc1c6}
.member.off .dot.st-off,.dm-row.off .dot.st-off{background:#bdc1c6}

.dot-mobile{background:transparent!important;border-color:transparent!important;box-shadow:none!important;
  display:inline-flex;align-items:center;justify-content:center;overflow:visible}
.dot-mobile svg,.dot-mobile .png-ic{width:150%;height:150%;display:block;filter:drop-shadow(0 0 .8px var(--surface)) drop-shadow(0 0 .8px var(--surface))}
.dot-mobile.st-online{color:var(--green-dot)}
.dot-mobile.st-idle{color:#f9ab00}
.dot-mobile.st-dnd{color:#ea4335}
.dot-mobile.st-off{color:#bdc1c6}

.member .dot-mobile svg,.member .dot-mobile .png-ic{width:22px;height:22px}        
.dm-row .dot-mobile svg,.dm-row .dot-mobile .png-ic{width:22px;height:22px}         
.pp-head .dot-mobile svg,.pp-head .dot-mobile .png-ic{width:34px;height:34px}       
#mm-avatar .dot-mobile svg,#mm-avatar .dot-mobile .png-ic{width:46px;height:46px}   

#user-panel .me-av-dot.dot-mobile svg,#user-panel .me-av-dot.dot-mobile .png-ic{width:108%;height:108%}

#user-panel .me-av-dot.dot-mobile{background:var(--surface-3)!important;border-radius:50%!important;
  border:3px solid var(--surface-3)!important;box-shadow:0 0 0 1px var(--border-soft)!important}

.member .dot.dot-mobile{right:-5px;bottom:-5px;width:20px;height:20px}
.mc-av-row #mm-avatar .mc-dot.dot-mobile{border-width:5px;width:40px;height:40px;right:-10px;bottom:2px}
.dm-row .dot.dot-mobile{right:-4px;bottom:0;width:18px;height:18px;border-width:0}


.act-sec{padding:14px 12px 18px;border-top:1px solid var(--border-soft);margin-top:6px}

#members-list > .act-sec:first-child{border-top:0;margin-top:0}
.act-head{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);margin:0 0 10px;padding:0 4px}
.act-list{display:flex;flex-direction:column;gap:6px}
.act-card{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-m);background:var(--surface-2);
  border:1px solid var(--border-soft);cursor:pointer;transition:background .14s var(--ease),border-color .14s var(--ease)}
.act-card:hover{background:var(--surface-3)}
.act-card .avwrap{position:relative;flex:0 0 auto;display:inline-block}
.act-card .avwrap .dot{position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-radius:50%;border:2.5px solid var(--surface-2)}
.act-card:hover .avwrap .dot{border-color:var(--surface-3)}
.act-meta{display:flex;flex-direction:column;min-width:0;gap:1px}
.act-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act-line{font-size:12.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 16px;color:var(--text-3)}
.act-empty-ic{display:inline-flex;width:40px;height:40px;margin-bottom:10px;color:var(--text-3);opacity:.55}
.act-empty-ic svg{width:40px;height:40px}
.act-empty-t{font-size:14px;font-weight:700;color:var(--text-2);margin-bottom:4px}
.act-empty-d{font-size:12.5px;line-height:1.45;max-width:230px}
#home-activity-m{padding:0 10px 4px}
#home-activity-m.hidden{display:none}
.act-sec-m{padding:4px 0 10px;border-top:0;margin-top:0}
.act-sec-m .act-head{padding:0 4px;margin-bottom:8px}
.act-sec-m .act-empty{padding:14px 16px}


.act-tabs{display:flex;align-items:center;gap:4px;margin:0 0 10px}
.act-tab{flex:1;height:30px;border:0;border-radius:999px;background:transparent;color:var(--text-3);
  font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:background .14s var(--ease),color .14s var(--ease)}
.act-tab:hover{color:var(--text-2)}
.act-tab.active{background:var(--surface-3);color:var(--text)}
.ntf-list{display:flex;flex-direction:column;gap:6px}
.ntf-item{display:flex;align-items:flex-start;gap:10px;padding:10px 11px;border-radius:var(--r-m);
  background:var(--surface-2);border:1px solid var(--border-soft);cursor:pointer;position:relative;
  transition:background .14s var(--ease),border-color .14s var(--ease)}
.ntf-item:hover{background:var(--surface-3)}
.ntf-item.new::after{content:'';position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;
  background:var(--accent)}
.ntf-ic{flex:0 0 auto;width:32px;height:32px;border-radius:20px;display:inline-flex;align-items:center;
  justify-content:center;background:var(--surface-3);color:var(--text-2)}
.ntf-ic svg{width:17px;height:17px;display:block}
.ntf-ic.ntf-ping{background:var(--accent-soft);color:var(--accent)}
.ntf-ic.ntf-announce{background:#fdefe0;color:#b45309}
body.dark .ntf-ic.ntf-announce,body.night .ntf-ic.ntf-announce,body.black .ntf-ic.ntf-announce{background:#3a2d18;color:#f9ab00}
.ntf-ic.ntf-thread{background:var(--green-soft);color:var(--green)}
body.dark .ntf-ic.ntf-thread,body.night .ntf-ic.ntf-thread,body.black .ntf-ic.ntf-thread{background:#1c3226;color:#34a853}
.ntf-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-right:12px}
.ntf-title{font-size:13.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ntf-line{font-size:12.5px;color:var(--text-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.ntf-sub{font-size:11.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ntf-empty{padding:24px 0}

#ntf-list-m{display:flex;flex-direction:column;gap:8px;overflow-y:auto;
  padding:12px 14px calc(22px + env(safe-area-inset-bottom,0px))}


.info-i{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;padding:0;
  border:0;border-radius:50%;background:var(--surface-3);color:var(--text-3);font-size:11px;font-weight:700;
  font-style:italic;font-family:Georgia,'Times New Roman',serif;cursor:pointer;vertical-align:middle;line-height:1}
.info-i:hover{background:var(--accent);color:var(--on-accent,#fff)}


.status-menu{position:fixed;top:auto;left:auto;width:200px}
.status-menu .mi-ic{display:inline-flex;align-items:center;justify-content:center}
.status-menu .sdot{width:10px;height:10px;border-radius:50%;display:inline-block}
.status-menu .st-check{margin-left:auto;color:var(--accent);font-weight:700}


.mc-dot{position:absolute;right:2px;bottom:2px;width:16px;height:16px;border-radius:50%;
  border:3px solid var(--surface);background:#bdc1c6}




.role-badge{width:16px;height:16px;border-radius:4px;object-fit:cover;flex:0 0 auto;display:inline-block;vertical-align:-3px}
.mhead .role-badge{align-self:center;vertical-align:baseline}
.badge-row{display:flex;align-items:center;gap:12px}
.badge-prev{width:34px;height:34px;border-radius:20px;background:var(--surface-2);border:1px dashed var(--border);
  display:inline-flex;align-items:center;justify-content:center;color:var(--text-3);font-size:13px;overflow:hidden;flex:0 0 auto}
.badge-prev img{width:100%;height:100%;object-fit:cover}
.badge-prev.has{border-style:solid}


.hex-row{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.hex-row input[type=text]{width:130px;height:40px;padding:0 14px;border:1px solid var(--border);border-radius:20px;
  background:var(--surface);outline:none;color:var(--text);font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  font-size:13.5px;letter-spacing:1px;text-transform:lowercase;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.hex-row input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hex-row input[type=text].bad{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.hex-prev{display:none}                                   
.hex-pick{width:46px;height:40px;padding:0;border:1px solid var(--border);border-radius:20px;background:var(--surface);
  cursor:pointer;flex:0 0 auto;overflow:hidden;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.hex-pick::-webkit-color-swatch-wrapper{padding:3px}
.hex-pick::-webkit-color-swatch{border:none;border-radius:7px}
.hex-pick::-moz-color-swatch{border:none;border-radius:7px}
.hex-pick:hover{border-color:var(--accent)}
.hex-pick:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hex-row .hxhint{font-size:12px;color:var(--text-3);flex:1 1 auto;min-width:90px}


.re-head{margin-bottom:6px}
.re-title{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.re-title #re-name-lbl{color:var(--text)}
.re-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border-soft)}
.re-tab{appearance:none;background:transparent;border:0;cursor:pointer;padding:9px 13px;margin-bottom:-1px;
  font-size:13.5px;font-weight:600;color:var(--text-3);border-bottom:2px solid transparent;transition:color .12s,border-color .12s}
.re-tab:hover{color:var(--text-2)}
.re-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.re-mcount{font-weight:600;opacity:.85}
.re-pane{margin-top:16px;animation:ssFade .2s var(--ease)}
.re-style{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-s);overflow:hidden;margin-top:4px}
.re-style-opt{appearance:none;background:var(--surface);border:0;cursor:pointer;padding:8px 20px;font-size:13px;font-weight:600;
  color:var(--text-2);transition:background .12s,color .12s}
.re-style-opt+.re-style-opt{border-left:1px solid var(--border)}
.re-style-opt.active{background:var(--accent);color:var(--on-accent)}
.re-grad-prev{margin-top:14px;font-size:22px;font-weight:800;letter-spacing:.2px;line-height:1.1}
.re-members{display:flex;flex-direction:column;gap:2px;max-height:360px;overflow-y:auto}
.re-member{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r-s)}
.re-member:hover{background:var(--surface-2)}
.re-member .avwrap .av{width:28px;height:28px;font-size:12px}
.re-member-nm{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


.poll{max-width:min(440px,100%);border:1px solid var(--border-soft);border-radius:var(--r-m);background:var(--surface-2);
  padding:12px 14px;margin-top:4px}
.poll-title{font-size:14px;font-weight:600;margin-bottom:8px;word-break:break-word}
.poll-opt{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:7px 12px;margin:6px 0;
  border:1px solid var(--border);border-radius:var(--r-s);background:var(--surface);cursor:pointer;overflow:hidden;text-align:left;
  font-size:13.5px;font-weight:500;color:var(--text);transition:border-color .12s}
.poll-opt:hover{border-color:var(--accent)}
.poll-opt.closed{cursor:default}
.poll-opt.closed:hover{border-color:var(--border)}
.poll-opt.mine{border-color:var(--accent)}
.poll-fill{position:absolute;inset:0;width:0;background:var(--accent-soft);transition:width .35s var(--ease);pointer-events:none}
.poll-opt .ptxt{position:relative;flex:1;min-width:0;word-break:break-word}
.poll-opt .pct{position:relative;flex:0 0 auto;font-size:12px;color:var(--text-2);font-weight:600;white-space:nowrap}
.poll-opt.mine .pct{color:var(--accent)}
.poll-foot{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12px;color:var(--text-3)}
.poll-foot .pclose{margin-left:auto;height:28px;padding:0 12px;font-size:12px}
.poll-final{display:inline-flex;align-items:center;gap:5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  font-size:10.5px;color:var(--accent);background:var(--accent-soft);border-radius:20px;padding:3px 8px}
#pl-opts .pl-opt{width:100%;height:40px;padding:0 14px;border:1px solid var(--border);border-radius:var(--r-s);
  background:var(--surface);outline:none;margin-bottom:8px}
#pl-opts .pl-opt:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}


.plus-menu{position:absolute;bottom:52px;left:4px;top:auto;width:200px;transform-origin:bottom left}

#emoji-pop{position:absolute;bottom:100%;right:6px;margin-bottom:10px;width:412px;max-width:calc(100vw - 24px);max-height:420px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);box-shadow:var(--sh-3);
  display:flex;flex-direction:column;overflow:hidden;z-index:40;animation:popIn .14s var(--ease)}
#emoji-pop .ep-search{margin:12px 12px 10px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--r-s);
  background:var(--surface-2);color:var(--text);font-size:14px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
#emoji-pop .ep-search:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

#emoji-pop .ep-body{display:flex;flex:1;min-height:0;overflow:hidden;border-top:1px solid var(--border-soft)}
#emoji-pop .ep-nav{flex:0 0 46px;display:flex;flex-direction:column;gap:2px;padding:6px 5px;overflow-y:auto;
  background:var(--surface-2);border-right:1px solid var(--border-soft);scrollbar-width:none}
#emoji-pop .ep-nav::-webkit-scrollbar{display:none}
#emoji-pop .ep-nav-ic{width:36px;height:36px;margin:0 auto;flex:0 0 auto;border:none;border-radius:var(--r-s);
  background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-2);transition:background .1s}
#emoji-pop .ep-nav-ic:hover{background:var(--surface-3)}
#emoji-pop .ep-nav-ic.active{background:var(--accent-soft)}
#emoji-pop .ep-nav-g{font-size:20px;line-height:1}
#emoji-pop .ep-nav-ic .ep-srv{width:24px;height:24px;border-radius:6px;font-size:10px;display:flex;align-items:center;
  justify-content:center;color:#fff;overflow:hidden;flex:0 0 auto}
#emoji-pop .ep-nav-ic .ep-srv img{width:100%;height:100%;object-fit:cover}
#emoji-pop .ep-scroll{flex:1;position:relative;overflow-y:auto;padding:0 8px 10px}

#emoji-pop .ep-cat{position:sticky;top:0;z-index:2;background:var(--surface);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);padding:9px 4px 5px}
#emoji-pop .ep-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin-bottom:4px}
#emoji-pop .ep-em{position:relative;display:flex;align-items:center;justify-content:center;height:38px;border-radius:var(--r-s);
  font-size:23px;line-height:1;cursor:pointer;transition:background .1s}
#emoji-pop .ep-em:hover{background:var(--surface-3)}
#emoji-pop .ep-em img{width:24px;height:24px;object-fit:contain}
#emoji-pop .ep-empty{color:var(--text-3);font-size:13px;text-align:center;padding:24px 8px}

#emoji-pop .ep-star{position:absolute;top:0;right:1px;width:14px;height:14px;padding:0;border:none;background:none;
  cursor:pointer;line-height:1;font-size:11px;color:var(--text-3);opacity:0;transition:opacity .12s,transform .1s}
#emoji-pop .ep-star::before{content:'\2606'}                 
#emoji-pop .ep-em:hover .ep-star{opacity:.8}
#emoji-pop .ep-star:hover{transform:scale(1.25);opacity:1}
#emoji-pop .ep-em.is-fav .ep-star{opacity:1;color:#f5b301}
#emoji-pop .ep-em.is-fav .ep-star::before{content:'\2605'}   

@media (pointer: coarse){#emoji-pop .ep-star{opacity:.5;width:18px;height:18px;font-size:13px}}

.srv-badges{display:none!important}   
.srv-badges:empty{display:none}
.srv-badges .sbadge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:7px;background:var(--surface-2);color:var(--text-3);box-shadow:var(--sh-1);
  transition:transform .13s var(--ease),background .13s,color .13s}
.srv-badges .sbadge:hover{transform:translateY(-1px)}
.srv-badges .sbadge svg{width:14px;height:14px}
.srv-badges .sbadge.public{color:#3b82f6}
.srv-badges .sbadge.private{color:var(--text-2)}
.srv-badges .sbadge.locked{color:#e0823d}
.srv-badges .sbadge.partner{color:var(--accent)}
body.dark .srv-badges .sbadge{background:#ffffff0f}

.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tier{border:1px solid var(--border);border-radius:var(--r-m);padding:16px;display:flex;flex-direction:column}
.tier.feat{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.tier .tier-name{font-size:15px;font-weight:700}
.tier .tier-price{font-size:21px;font-weight:700;margin:4px 0 10px}
.tier .tier-price span{font-size:12px;font-weight:500;color:var(--text-3)}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}
.tier li{font-size:13px;color:var(--text-2);display:flex;gap:7px;align-items:flex-start;line-height:1.4}
.tier li svg{width:14px;height:14px;color:var(--accent);flex:0 0 auto;margin-top:2px}
@media(max-width:560px){.tier-grid{grid-template-columns:1fr}}


.ctx-menu{position:fixed;top:0;left:0;width:236px;background:var(--surface);border:1px solid var(--border-soft);
  border-radius:20px;box-shadow:var(--sh-3);padding:8px;z-index:130;animation:menuIn .14s var(--ease)}
.ctx-quick{display:flex;gap:6px;margin-bottom:6px}
.ctx-quick button{flex:1;height:38px;border-radius:20px;background:var(--surface-2);font-size:19px;display:flex;
  align-items:center;justify-content:center;transition:background .12s,transform .12s var(--ease)}
.ctx-quick button:hover{background:var(--surface-3);transform:scale(1.06)}
.ctx-menu .menu-item{padding:7px 9px}
.ctx-menu .menu-item .mi-ic{width:30px;height:30px;border-radius:20px}

.msgsheet-scrim{position:fixed;inset:0;z-index:114;background:#00000045;opacity:0;transition:opacity .2s var(--ease)}
.msgsheet-scrim.show{opacity:1}
.msgsheet{position:fixed;left:0;right:0;bottom:0;z-index:115;display:flex;flex-direction:column;
  max-width:560px;margin:0 auto;background:var(--surface);border-radius:20px 20px 0 0;box-shadow:var(--sh-3);
  max-height:75dvh;transform:translateY(100%);transition:transform .26s var(--ease);
  padding-bottom:env(safe-area-inset-bottom)}
.msgsheet.show{transform:none}
.msgsheet-grab{width:40px;height:4px;border-radius:999px;background:var(--border);margin:10px auto 4px;flex:0 0 auto}
.msgsheet-react{display:flex;gap:8px;padding:6px 14px 12px;overflow-x:auto;flex:0 0 auto;-webkit-overflow-scrolling:touch}
.msgsheet-react button{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--surface-2);
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .12s var(--ease),background .12s}
.msgsheet-react button:active{transform:scale(.88);background:var(--surface-3)}
.msgsheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 12px 12px}
.msgsheet-group{background:var(--surface-2);border-radius:20px;overflow:hidden;margin-bottom:12px}
.msgsheet-group:last-child{margin-bottom:0}
.msgsheet-item{display:flex;align-items:center;gap:16px;width:100%;padding:15px 16px;border:none;background:transparent;
  color:var(--text);font-size:15.5px;font-weight:500;text-align:left;cursor:pointer}
.msgsheet-item + .msgsheet-item{border-top:1px solid var(--border-soft)}
.msgsheet-item:active{background:var(--surface-3)}
.msgsheet-item .mi-ic{width:24px;height:24px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--text-2)}
.msgsheet-item .mi-ic svg{width:23px;height:23px}
.msgsheet-item.danger{color:var(--red,#ea4335)}
.msgsheet-item.danger .mi-ic{color:var(--red,#ea4335)}

.ctx-sheet-scrim{position:fixed;inset:0;z-index:114;background:#00000045;opacity:0;transition:opacity .2s var(--ease)}
.ctx-sheet-scrim.show{opacity:1}
.ctx-sheet{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;max-width:560px;margin:0 auto;
  padding:0 0 env(safe-area-inset-bottom);border:none;border-radius:20px 20px 0 0;
  max-height:78dvh;display:flex;flex-direction:column;animation:none;z-index:115;
  transform:translateY(100%);transition:transform .26s var(--ease)}
.ctx-sheet.show{transform:none}

.ctx-sheet .menu-item{display:flex;align-items:center;gap:16px;width:100%;padding:15px 16px;border:none;
  background:transparent;color:var(--text);font-size:15.5px;font-weight:500;text-align:left;cursor:pointer;border-radius:0}
.ctx-sheet .menu-item + .menu-item{border-top:1px solid var(--border-soft)}
.ctx-sheet .menu-item:active{background:var(--surface-3)}
.ctx-sheet .menu-item .mi-ic{width:24px;height:24px;flex:0 0 auto;border-radius:0;background:transparent;color:var(--text-2)}
.ctx-sheet .menu-item:hover .mi-ic{background:transparent;color:var(--text-2)}
.ctx-sheet .menu-item .mi-ic svg,.ctx-sheet .menu-item .mi-ic .png-ic{width:22px;height:22px}
.ctx-sheet .menu-item.danger,.ctx-sheet .menu-item.danger .mi-ic{color:var(--red)}


@keyframes cxRoleGrad{to{background-position:200% center}}
html[data-motion="off"] [style*="cxRoleGrad"]{animation:none!important}   

[style*="cxRoleGrad"][style*="transparent"]{animation-play-state:paused!important}
.member:hover [style*="cxRoleGrad"][style*="transparent"],
.mrow:hover [style*="cxRoleGrad"][style*="transparent"]{animation-play-state:running!important}

body.reply-active #jump-pill,body.editing-msg #jump-pill,body.composer-focused #jump-pill{
  opacity:0;transform:translateY(10px) scale(.9);pointer-events:none}

body.editing-msg #btn-attach,body.editing-msg #btn-mic,body.editing-msg #btn-announce{display:none}

.uname.grad{transition:text-shadow .15s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .mrow:hover .uname.grad{text-shadow:0 1px 7px rgba(0,0,0,.55)}
}


.rail-wrap.drag-over .rail-item,.rail-wrap.drag-over .rail-folder{outline:2px dashed var(--accent);outline-offset:2px;border-radius:20px}
.rail-wrap.drop-before::before{content:'';position:absolute;left:4px;right:4px;top:-5px;height:2px;border-radius:1px;background:var(--accent)}
.rail-wrap.drop-after::after{content:'';position:absolute;left:4px;right:4px;bottom:-5px;height:2px;border-radius:1px;background:var(--accent)}
.rail-arrows{display:flex;flex-direction:column;gap:2px;position:absolute;right:-6px;top:50%;translate:0 -50%;z-index:3}
.rail-arrows .icon-btn{width:20px;height:20px;background:var(--surface);box-shadow:var(--sh-1);color:var(--text)}
.rail-arrows .icon-btn svg{width:13px;height:13px}


.rail-folder{width:48px;border-radius:20px;background:var(--surface-3);flex:0 0 auto;overflow:visible;transition:background .2s}
.rail-folder .fold-head{width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  position:relative;border-radius:20px;transition:background .15s}
.rail-folder .fold-head:hover{background:var(--surface-2)}
.rail-folder .fold-mini{display:grid;grid-template-columns:16px 16px;grid-auto-rows:16px;gap:3px}
.rail-folder .fold-mini .mini{width:16px;height:16px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:8px;font-weight:700;overflow:hidden}
.rail-folder .fold-mini .mini img{width:100%;height:100%;object-fit:cover;display:block}
.rail-folder.open{background:var(--surface-2);padding-bottom:6px}
.rail-folder.open .fold-head{color:var(--accent)}
.rail-folder.open .fold-head svg{width:22px;height:22px}
.rail-folder .fold-items{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:2px}
.rail-folder .fold-items .rail-item{width:40px;height:40px;font-size:13px}
.rail-folder .fbadge{position:absolute;right:-2px;bottom:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:20px;
  background:var(--red);color:#fff;font-size:10px;font-weight:700;line-height:17px;text-align:center;border:2px solid var(--surface-2);pointer-events:none}
.rail-folder .funread{position:absolute;left:3px;top:3px;width:7px;height:7px;border-radius:50%;background:var(--text);pointer-events:none}


#explore-view{flex:1;overflow-y:auto;padding:20px 22px;min-height:0}
#explore-view .explore-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:1500px){#explore-view .explore-grid{grid-template-columns:repeat(2,1fr)}}
.discover-panel{padding:14px 12px;font-size:13px;color:var(--text-2);line-height:1.55}
.discover-panel .dp-ic{width:44px;height:44px;border-radius:20px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.discover-panel .dp-ic svg{width:22px;height:22px}
.discover-panel h4{font-size:14px;color:var(--text);margin-bottom:4px}


#friends-view{flex:1;display:flex;flex-direction:column;min-height:0}
.fr-top{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border-soft);flex:0 0 auto;flex-wrap:wrap}
.fr-top .fr-title{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;margin-right:8px}
.fr-top .fr-title svg{width:20px;height:20px;color:var(--text-2)}
.fr-tab{height:32px;padding:0 14px;border-radius:20px;font-size:13.5px;font-weight:500;color:var(--text-2);
  transition:background .15s,color .15s;position:relative;overflow:hidden}
.fr-tab:hover{background:var(--surface-2);color:var(--text)}
.fr-tab.active{background:var(--surface-3);color:var(--text)}
.fr-tab.add{background:var(--accent);color:var(--on-accent)}
.fr-tab.add.active,.fr-tab.add:hover{background:var(--accent-hover);color:var(--on-accent)}
.fr-tab .fr-pill{display:inline-block;min-width:17px;height:17px;padding:0 5px;margin-left:6px;border-radius:20px;
  background:var(--red);color:#fff;font-size:10.5px;font-weight:700;line-height:17px;text-align:center}
.fr-body{flex:1;overflow-y:auto;padding:14px 18px;min-height:0}
.fr-search{width:100%;height:40px;padding:0 14px;border:1px solid var(--border);border-radius:var(--r-s);
  background:var(--surface);margin-bottom:14px;outline:none}
.fr-search:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.fr-label{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-3);
  padding:6px 2px 8px;border-bottom:1px solid var(--border-soft);margin-bottom:4px}
.fr-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:var(--r-s);transition:background .12s;cursor:pointer}
.fr-row:hover{background:var(--surface-2)}
.fr-row .avwrap{position:relative;flex:0 0 auto}
.fr-row .dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
  border:2.5px solid var(--surface)}
.fr-row .meta{flex:1;min-width:0}
.fr-row .nm{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-row .sub{font-size:12px;color:var(--text-3);margin-top:1px}
.fr-row .icon-btn{width:34px;height:34px;background:var(--surface-2)}
.fr-row .icon-btn:hover{background:var(--surface-3)}
.fr-row .icon-btn.ok{color:var(--green)}
.fr-row .icon-btn.no{color:var(--red)}
.fr-empty{padding:30px 10px;text-align:center;color:var(--text-3);font-size:13.5px;line-height:1.6}
.fr-addbox{max-width:560px;margin-inline:auto}
.fr-addbox h3{font-size:16px;font-weight:600;margin-bottom:4px}
.fr-addbox p{font-size:13px;color:var(--text-2);margin-bottom:14px;line-height:1.5}
.fr-addrow{display:flex;gap:10px;flex-wrap:wrap}
.fr-addrow input{flex:1;min-width:180px;height:44px;padding:0 14px;border:1px solid var(--border);border-radius:var(--r-s);
  background:var(--surface);outline:none}
.fr-addrow input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.fr-feedback{margin-top:12px;font-size:13px;border-radius:var(--r-s);padding:10px 14px;display:none;line-height:1.5}
.fr-feedback.ok{display:block;background:var(--green-soft);color:var(--green)}
.fr-feedback.err{display:block;background:var(--red-soft);color:var(--red)}

@media (min-width:981px){
  .fr-top{padding:16px 28px;gap:10px}
  .fr-top .fr-title{font-size:17px;font-weight:700;margin-right:14px}
  .fr-top .fr-title svg{width:34px;height:34px;padding:7px;box-sizing:border-box;border-radius:20px;
    background:var(--accent-soft);color:var(--accent)}
  .fr-tab{height:34px;padding:0 16px;font-size:14px;font-weight:600}
  .fr-body{padding:22px 28px}
  .fr-search{height:42px;border-radius:999px;border-color:transparent;background:var(--surface-2);padding:0 18px}
  .fr-search:focus{background:var(--surface);border-color:var(--accent)}
  .fr-label{border-bottom:0;padding:10px 4px 8px}
  .fr-row{padding:10px 14px;border-radius:20px;margin-bottom:2px}
  .fr-row .av{width:38px;height:38px;font-size:14px}
  .fr-row .dot{width:12px;height:12px;border-width:3px}
  .fr-row .dot.dot-mobile{width:16px;height:16px;right:-3px;bottom:-2px;border-width:0}
  .fr-row .nm{font-size:14.5px}
  .fr-row .sub{font-size:12.5px}
  .fr-row .icon-btn:not(.ok):not(.no){opacity:0;transform:translateX(3px);
    transition:opacity .14s var(--ease),transform .14s var(--ease),background .12s}
  .fr-row:hover .icon-btn:not(.ok):not(.no),
  .fr-row:focus-within .icon-btn:not(.ok):not(.no){opacity:1;transform:none}
  .fr-empty{border:1px dashed var(--border);border-radius:20px;padding:44px 24px;margin:24px 0}
  
  .fr-addbox{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:20px;padding:22px;margin-top:6px;
    max-width:none;width:100%}
}

@media (min-width:981px) and (hover:none){
  .fr-row .icon-btn:not(.ok):not(.no){opacity:.6;transform:none}
}

@media (max-width:980px){
  
  
  
  html{--store-h:env(safe-area-inset-top,0px)}
  
  #auth{top:var(--store-h);height:calc(var(--app-h,100dvh) - var(--store-h))}
  #app{grid-template-columns:1fr;grid-template-areas:"topbar" "chat";
    margin-top:var(--store-h);height:calc(var(--app-h,100dvh) - var(--store-h))}
  
  #srv-head > #srv-invite{margin-left:auto}
  
  #rail,#sidebar{position:fixed;top:var(--store-h);bottom:0;z-index:70;transition:transform .26s var(--ease);
    box-shadow:var(--sh-3)}
  #rail{left:0;width:72px;transform:translateX(-110%)}
  
  
  .rail-item{width:52px;height:52px;border-radius:20px}
  .rail-item.active,.rail-item:active{border-radius:20px}
  
  #rail{padding-top:0}
  #home-wrap{margin-top:0;width:72px;display:flex;justify-content:center}
  #rail .rail-item.home{width:56px;height:45px;border-radius:0 0 20px 20px}
  #rail-list .rail-item{font-size:18px}
  #rail .rail-item.browse svg{width:26px;height:26px}
  #rail .rail-item.browse .png-browse{width:26px;height:26px}
  
  #rail-list{gap:10px}
  #rail .rail-wrap .pill{left:-8px}
  #rail .rail-wrap .unread-dot{left:-8px}
  #rail .rail-folder,#rail .rail-folder .fold-head{width:52px}
  #rail .rail-folder .fold-head{height:52px}
  #rail .rail-folder .fold-items .rail-item{width:46px;height:46px;font-size:13px}   
  
  .dm-row .dm-close{display:none}
  
  #sidebar{left:72px;width:calc(100% - 72px);transform:translateX(-130%);z-index:72}
  
  
  
  #user-panel{position:relative;z-index:1;height:52px;
    margin:2px 0 0 -67px;padding:0 8px calc(env(safe-area-inset-bottom)) 0px;
    border:1px solid var(--border-soft);border-radius:20px 20px 0 0;background:var(--surface-2);overflow:visible}
  #user-panel #me-card{padding:0;overflow:visible}
  #user-panel #me-card:hover,
  #user-panel #me-card.open{background:transparent}
  
  #user-panel #me-avatar{position:relative;display:inline-flex;flex:0 0 auto}
  #user-panel #me-avatar .av{width:46px;height:46px}
  
  #user-panel .me-av-dot{display:block;position:absolute;right:1px;bottom:1px;width:20px;height:20px;
    border-radius:50%;background:var(--green-dot);border:4px solid var(--surface-3);box-sizing:content-box}
  #user-panel .me-av-dot.st-idle{background:#f9ab00}
  #user-panel .me-av-dot.st-dnd{background:#ea4335}
  #user-panel .me-av-dot.st-off{background:#bdc1c6}
  
  #channel-zone{padding-top:0}
  #channel-zone > #srv-banner.has{margin:0 -8px}
  #channel-zone > #srv-head{margin:0 -8px;position:sticky;top:0;z-index:3}
  
  .me-menu,.status-menu{z-index:78}
  body.drawer #rail,body.drawer #sidebar{transform:none}
  body.drawer #drawer-scrim{opacity:1;pointer-events:auto}
  #members{position:fixed;top:var(--store-h);bottom:0;right:0;width:min(300px,86vw);z-index:70;transform:translateX(110%);
    transition:transform .26s var(--ease);box-shadow:var(--sh-3)}
  body.members-open #members{transform:none}
  body.members-open #drawer-scrim{opacity:1;pointer-events:auto}
  #btn-drawer,#btn-members{display:inline-flex}
  .roles-layout{grid-template-columns:1fr}
  .roles-col{border-right:none;border-bottom:1px solid var(--border-soft);padding:0 0 12px;max-height:160px}
  .explore-grid{grid-template-columns:1fr}
  .explore-hero{padding:22px 18px}
  .explore-hero h2{font-size:20px}
  #chat-lock span{display:none}
  #explore-view{padding:14px}
  #explore-view .explore-grid{grid-template-columns:1fr}
  .fr-top{padding:10px 12px}
  .fr-body{padding:12px 14px}
  
  .mrow.first{padding:8px 8px 8px 8px}
  .channel.active{border:solid #ffffff14 1px}
  
  #chat-top #btn-search{background:#ffffff17;border-radius:0 0 20px 20px;height:31px;width:31px}
  
  .unread-jump .uj-d{display:none}
  .unread-jump .uj-m{display:inline}
  .unread-jump.up{top:52px}
  
  .me-name-chev{display:inline-flex}
}

@media (max-width:759px){
  #auth{padding:0;align-items:stretch;justify-content:flex-start}
  
  .auth-brand{position:static;align-self:center;justify-content:center;margin:18px auto 6px}
  .auth-logo-img{height:26px}
  
  .auth-card{max-width:none;width:100%;min-height:0;flex:1;border:none;border-radius:0;box-shadow:none;
    background:transparent;display:flex;flex-direction:column;justify-content:flex-start;animation:none;
    overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
  
  .auth-main{flex:1;padding:8px 18px calc(28px + env(safe-area-inset-bottom));justify-content:flex-start}
  
  #auth .oauth-btns{flex-direction:row;justify-content:center;gap:16px}
  #auth .oauth-btns .btn-google,#auth .oauth-btns .btn-discord{width:52px;height:52px;border-radius:50%;padding:0;margin:0;flex:0 0 auto}
  #auth .oauth-btns .btn-google span,#auth .oauth-btns .btn-discord span{display:none}
  #auth .oauth-btns .btn-google svg,#auth .oauth-btns .btn-discord svg{width:22px;height:22px}
}




.channel .draft-pen,.dm-row .draft-pen{width:14px;height:14px;color:var(--text-3);flex:0 0 auto;opacity:.85}
.channel:hover .draft-pen{color:var(--text-2)}
.dm-row .draft-pen{margin-left:2px}


.qs{position:fixed;inset:0;background:rgba(15,18,24,.62);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:200;opacity:0;
  pointer-events:none;transition:opacity .16s var(--ease)}
.qs.open{opacity:1;pointer-events:auto}
.qs-box{width:100%;max-width:640px;background:var(--surface);border-radius:20px;box-shadow:var(--sh-3);
  overflow:hidden;transform:translateY(-10px) scale(.98);transition:transform .2s var(--ease);
  border:1px solid var(--border-soft);display:flex;flex-direction:column;max-height:min(74vh,560px)}
.qs.open .qs-box{transform:none}
.qs-inputrow{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border-soft);flex:0 0 auto}
.qs-inputrow svg{width:20px;height:20px;color:var(--text-3);flex:0 0 auto}
.qs-inputrow input{flex:1;border:none;background:transparent;outline:none;font-size:16px;color:var(--text);min-width:0}
.qs-back{display:none;flex:0 0 auto}                     

.qs .qs-esc{position:absolute;top:18px;right:18px;float:none;margin:0;color:#e4e6eb}
.qs .qs-esc .x{background:transparent;border-color:currentColor}
.qs .qs-esc:hover{color:#fff}
@media (max-width:980px){ .qs .qs-esc{display:none} }
.qs-tabs{display:none}                                   
.qs-tab{flex:0 0 auto;height:44px;padding:0 14px;background:transparent;border:none;cursor:pointer;position:relative;
  color:var(--text-2);font-size:16px;font-weight:600;white-space:nowrap}
.qs-tab.active{color:var(--accent)}
.qs-tab.active::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--accent)}
.qs-results{flex:1;min-height:0;max-height:min(56vh,420px);overflow-y:auto;padding:8px}

.qs-results .pin-card{background:var(--surface-2);border-radius:20px;margin-bottom:9px;padding:12px 14px}
.qs-where{color:var(--text-3);font-weight:500;font-size:12px}
.qs-empty{padding:22px 16px;text-align:center;color:var(--text-3);font-size:13.5px;line-height:1.5}
.qs-section{font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-3);
  padding:8px 10px 4px}
.qs-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:20px;cursor:pointer;
  text-align:left;color:var(--text);transition:background .1s}
.qs-item:hover,.qs-item.sel{background:var(--surface-2)}
.qs-item.sel{box-shadow:inset 0 0 0 1px var(--border)}
.qs-ic{width:32px;height:32px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;font-size:13px;font-weight:600;color:#fff;overflow:hidden}
.qs-ic img{width:100%;height:100%;object-fit:cover}
.qs-ic.hash{background:var(--surface-3);color:var(--text-2);font-size:17px}
.qs-ic .av{width:32px;height:32px;font-size:12px}
.qs-meta{flex:1;min-width:0}
.qs-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qs-title .qs-path{color:var(--text-3);font-weight:500}
.qs-sub{font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.qs-kind{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3);
  flex:0 0 auto;padding-left:6px}


.mc-banner{aspect-ratio:5/2;border-radius:0;margin:-6px -28px 0;background:var(--surface-3);
  background-size:cover;background-position:center;position:relative}
.member-card-top{display:block;margin:0 0 6px;padding-top:44px;position:relative}
.member-card-top #mm-avatar{position:absolute;top:-40px;left:0}
.member-card-top #mm-avatar .avwrap .av{box-shadow:0 0 0 6px var(--surface);background:var(--surface-3)}
.member-card-top .mc-name{font-size:21px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.member-card-top .mc-name .crown{width:17px;height:17px;color:#f9ab00}
.member-card-top .mc-sub{font-size:13px;color:var(--text-2);margin-top:3px}

#us-prev-banner{position:relative}
.us-banner-tools{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:2}
.us-banner-btn{width:30px;height:30px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.62);color:#fff;cursor:pointer;
  transition:background .15s var(--ease),transform .12s var(--ease)}
.us-banner-btn:hover{background:rgba(0,0,0,.72);transform:translateY(-1px)}
.us-banner-btn:focus-visible{outline:2px solid #fff;outline-offset:1px}
.us-banner-btn svg{width:15px;height:15px;flex:0 0 auto}
.us-banner-btn.danger:hover{background:var(--red)}


.mrow.sys{display:block;padding:5px 18px;margin:2px 0}
.mrow.sys .sys-line{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-3);
  font-size:12.5px;line-height:1.4;text-align:center}
.mrow.sys .sys-text{word-break:break-word}
.mrow.sys .sys-time{font-size:10.5px;color:var(--text-3);opacity:.7;flex:0 0 auto}

@media (max-width:980px){
  
  .qs{align-items:stretch;justify-content:stretch;padding:0;background:var(--bg)}
  .qs-box{max-width:100%;width:100%;height:100%;max-height:none;border:0;border-radius:0;
    box-shadow:none;transform:none}
  .qs.open .qs-box{transform:none}
  .qs-inputrow{padding:calc(12px + env(safe-area-inset-top)) 12px 12px;gap:8px}
  .qs-back{display:inline-flex}
  .qs-search-ic{display:none}                            
  .qs-tabs{display:flex;align-items:center;gap:2px;padding:0 8px;overflow-x:auto;scrollbar-width:none;
    flex:0 0 auto;border-bottom:1px solid var(--border-soft)}
  .qs-tabs::-webkit-scrollbar{display:none}
  .qs-results{max-height:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding:16px 14px calc(20px + env(safe-area-inset-bottom))}
  .qs-results .qs-item{padding:11px 10px}
  .qs-results .qs-ic,.qs-results .qs-ic .av{width:40px;height:40px;font-size:15px}
  .qs-results .qs-title{font-size:15.5px}
}



.us-card{display:flex;align-items:center;gap:11px;width:100%;padding:8px;margin-bottom:8px;border:none;
  background:#ffffff0d;border-radius:var(--r-m);cursor:pointer;text-align:left;transition:background .12s}
.us-card:hover{background:#ffffff17}
.us-card.us-match{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.us-card .av{width:42px;height:42px;flex:0 0 auto;font-size:15px}
.us-card-meta{min-width:0;flex:1}
.us-card-name{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.us-card-handle{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.us-card-edit{width:16px;height:16px;flex:0 0 auto;color:var(--text-3);transition:color .12s}
.us-card:hover .us-card-edit{color:var(--text)}

.us-search{display:flex;align-items:center;gap:8px;height:34px;padding:11px;margin:0 0 16px;
  border:1px solid var(--border);border-radius:var(--r-s);background:var(--surface)}
.us-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.us-search svg{width:15px;height:15px;color:var(--text-3);flex:0 0 auto}
.us-search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;font-size:13.5px;color:var(--text)}
.us-hide{display:none!important}

@media (max-width:980px){.us-search{height:46px;margin-bottom:14px}.us-search input{font-size:15px}}
.us-poweredby{font-size:11px;color:var(--text-3);text-align:center;padding:12px 6px 2px;letter-spacing:.2px;line-height:1.5}
.us-grid{display:grid;grid-template-columns:1fr 286px;gap:30px;align-items:start}
.us-edit-col{min-width:0}
.us-side{position:sticky;top:0}
.sp-card-handle{font-size:12.5px;color:var(--text-3);margin-top:3px;word-break:break-word}
.us-accent-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.us-hex{width:116px;height:38px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-s);
  background:var(--surface);outline:none;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:13px;
  letter-spacing:1px;text-transform:lowercase}
.us-hex:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.us-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.us-prefix-field{display:flex;align-items:center;flex:1;min-width:200px;border:1px solid var(--border);
  border-radius:var(--r-s);background:var(--surface);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.us-prefix-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.us-prefix-field .us-prefix{padding:0 1px 0 13px;color:var(--text-3);font-size:14px;font-weight:600;flex:0 0 auto}
.us-prefix-field input{border:none;background:transparent;height:42px;flex:1;min-width:0;padding:0 13px}
.us-prefix-field input:focus{outline:none;box-shadow:none}
.us-prefix-field input[readonly]{color:var(--text-2);cursor:default}
@media (max-width:720px){
  .us-grid{grid-template-columns:1fr}
  .us-side{position:static;order:-1}
}

.us-acct-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.us-sndrow{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.us-sndrow .checkrow{flex:1;margin-bottom:0}
.us-test{flex:0 0 auto;height:34px;padding:0 16px}

.us-theme-cards{display:flex;gap:12px}

.us-tcard{flex:1;position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:96px;
  padding:0;border:1px solid var(--border);border-radius:var(--r-m);background:var(--surface);overflow:hidden;
  transition:border-color .12s,box-shadow .12s}
.us-tcard:hover{border-color:var(--accent)}
.us-tcard.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.us-tprev{position:absolute;inset:0;border:0;border-radius:0}
.us-tprev[data-tp="light"]{background:#ffffff}
.us-tprev[data-tp="dark"]{background:#1b1f27}
.us-tprev[data-tp="night"]{background:#0a0a0b}
.us-tprev[data-tp="black"]{background:#000000}
.us-tname{position:relative;z-index:1;width:100%;text-align:center;padding:8px 6px;font-size:13px;font-weight:600;color:#fff}
.us-tcard:has(.us-tprev[data-tp="light"]) .us-tname{color:#202124}
.us-swatches{display:flex;flex-wrap:wrap;gap:10px}

.us-swatch{position:relative;display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:64px;min-height:50px;padding:8px;border:1px solid var(--border-soft);border-radius:var(--r-m);background:var(--surface);overflow:hidden;transition:border-color .12s,transform .12s var(--ease);cursor:pointer;text-align:center}
.us-swatch:hover{transform:translateY(-1px)}
.us-swatch.active{border-color:var(--text);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.us-swatch-dot{position:absolute;inset:0;width:auto;height:auto;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.us-swatch-lbl{position:relative;z-index:1;font-size:11.5px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);
  background:rgba(0,0,0,.5);padding:3px 9px;border-radius:999px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 8px)}

.us-font-cards{display:flex;gap:12px}
.us-fcard{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;
  border:1px solid var(--border);border-radius:var(--r-m);background:var(--surface);
  transition:border-color .12s,box-shadow .12s;cursor:pointer}
.us-fcard:hover{border-color:var(--accent)}
.us-fcard.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.us-fprev{font-size:26px;font-weight:700;line-height:1;color:var(--text)}
.us-fname{font-size:13px;font-weight:600;color:var(--text-2)}
.us-fcard.active .us-fname{color:var(--accent)}

@media (max-width:760px){#pf-pfont-cards{gap:8px}#pf-pfont-cards .us-fcard{padding:12px 5px}#pf-pfont-cards .us-fname{font-size:12px}}


.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.preset-tile{position:relative;height:56px;border-radius:20px;border:1px solid var(--border);cursor:pointer;
  padding:0;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;
  transition:transform .14s var(--ease),box-shadow .14s var(--ease),border-color .14s var(--ease),opacity .14s var(--ease)}
.preset-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -20px 24px -18px rgba(0,0,0,.5);pointer-events:none}
.preset-tile:hover{transform:translateY(-2px);border-color:var(--accent)}
.preset-grid:has(.preset-tile.active) .preset-tile:not(.active){opacity:.5;filter:saturate(.85)}
.preset-tile.active{border-color:transparent;transform:translateY(-3px) scale(1.05);
  box-shadow:0 0 0 3px var(--accent),0 10px 22px -8px rgba(0,0,0,.55);z-index:1}
.preset-tile.active::before{content:"";position:absolute;top:6px;right:6px;width:19px;height:19px;border-radius:50%;
  background:var(--accent) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/13px no-repeat;
  z-index:2;box-shadow:0 1px 4px rgba(0,0,0,.45)}
.preset-tile-name{position:relative;z-index:1;font-size:10.5px;font-weight:700;letter-spacing:.2px;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6);background:rgba(0,0,0,.48);padding:2px 8px;border-radius:999px;margin-bottom:6px;
  max-width:calc(100% - 10px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preset-tile.active .preset-tile-name{background:rgba(0,0,0,.42)}

#pf-card-intensity{display:flex;width:100%;max-width:340px}
#pf-card-intensity .re-style-opt{flex:1;padding:8px 6px}

.mi-preview{display:flex;align-items:center;gap:10px;margin-top:14px;padding:8px 12px;border-radius:var(--r-s)}
.mi-preview .mi-prev-av .av{width:30px;height:30px;font-size:12px}
.mi-preview .mi-prev-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


.member.mi-on{margin:2px 0}
.member.mi-on:hover{filter:brightness(1.08)}

.channel.ch-themed:hover{filter:brightness(1.06)}
#composer-preview{margin:0 0 8px;padding:9px 14px;border:1px solid var(--border-soft);border-radius:var(--r-m);background:var(--surface-2);color:var(--text-msg);font-size:14px;line-height:1.5;max-height:148px;overflow:auto;word-break:break-word}
#composer-preview.hidden{display:none}




.modal-card.mc-shell{max-width:880px;width:100%;padding:0;overflow:visible;background:transparent;box-shadow:none;border-radius:0;position:relative;border:none}

.mc-tabs .mc-x{position:absolute;top:11px;right:14px;z-index:5;width:32px;height:32px;border-radius:50%;
  color:var(--text-3);background:transparent}
.mc-tabs .mc-x:hover{background:var(--surface-2);color:var(--text)}

.mc-grid{display:grid;grid-template-columns:340px 1fr;grid-template-rows:minmax(0,1fr);background:var(--surface);border-radius:20px;
  overflow:hidden;box-shadow:var(--sh-3);max-height:calc(100dvh - 60px);border:1px solid #ffffff1c}
.mc-left{background:var(--surface-2);min-width:0;min-height:0;overflow-y:auto;border-right:1px solid var(--border-soft)}
.mc-left .mc-banner{margin:0;border-radius:0;background:var(--surface-3);background-size:cover;background-position:center;position:relative}



.mc-left.pc-light, .mc-left.pc-light .mc-name-txt, .mc-left.pc-light #mm-name,
.mc-left.pc-light #mm-bio, .mc-left.pc-light .mc-mutuals,
.pp-card.pc-light, .pp-card.pc-light .pp-name, .pp-card.pc-light .pp-bio,
.sp-card.pc-light, .sp-card.pc-light .sp-card-name, .sp-card.pc-light .sp-card-desc{color:#15161c}
.mc-left.pc-light #mm-sub, .pp-card.pc-light .pp-status, .pp-card.pc-light .pp-handle,
.sp-card.pc-light .sp-card-handle{color:#3a3d49}

.sp-card-badges{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:5px 0 2px}
.sp-card-badges:empty{display:none}
.sp-card-badges img{width:18px;height:18px;object-fit:contain;display:block}

#btn-profile{background:#ffffff08;border-radius:20px}

.mc-left[data-pfont="grotesk"] .mc-name-txt, .pp-card[data-pfont="grotesk"] .pp-name, .sp-card[data-pfont="grotesk"] .sp-card-name,
.mrow[data-pfont="grotesk"] .uname, .mrow[data-pfont="grotesk"] .ch-name, .member[data-pfont="grotesk"] .mname{font-family:'Space Grotesk',var(--font)}
.mc-left[data-pfont="serif"] .mc-name-txt, .pp-card[data-pfont="serif"] .pp-name, .sp-card[data-pfont="serif"] .sp-card-name,
.mrow[data-pfont="serif"] .uname, .mrow[data-pfont="serif"] .ch-name, .member[data-pfont="serif"] .mname{font-family:Merriweather,Georgia,'Times New Roman',serif}
.mc-left[data-pfont="mono"] .mc-name-txt, .pp-card[data-pfont="mono"] .pp-name, .sp-card[data-pfont="mono"] .sp-card-name,
.mrow[data-pfont="mono"] .uname, .mrow[data-pfont="mono"] .ch-name, .member[data-pfont="mono"] .mname{font-family:ui-monospace,'Cascadia Code',Consolas,'Courier New',monospace}
.mc-left[data-pfont="script"] .mc-name-txt, .pp-card[data-pfont="script"] .pp-name, .sp-card[data-pfont="script"] .sp-card-name,
.mrow[data-pfont="script"] .uname, .mrow[data-pfont="script"] .ch-name, .member[data-pfont="script"] .mname{font-family:Pacifico,'Segoe Script','Brush Script MT',cursive}

.pf-badges-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.pf-badge-row{display:flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid var(--border-soft);
  border-radius:var(--r-m);background:var(--surface-2);cursor:grab;user-select:none}
.pf-badge-row.dragging{opacity:.45}
.pf-badge-row .pf-badge-img{width:22px;height:22px;flex:0 0 auto;border-radius:5px;object-fit:contain}
.pf-badge-row .pf-badge-label{flex:1;font-size:14px;color:var(--text);min-width:0}

.pf-badge-cb{appearance:none;-webkit-appearance:none;margin:0;flex:0 0 auto;position:relative;width:38px;height:22px;
  border-radius:999px;background:var(--surface-3);border:1px solid var(--border);cursor:pointer;transition:background .16s ease,border-color .16s ease}
.pf-badge-cb::after{content:'';position:absolute;top:50%;left:2px;transform:translate(0,-50%);width:16px;height:16px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .16s ease}
.pf-badge-cb:checked{background:var(--accent);border-color:var(--accent)}
.pf-badge-cb:checked::after{transform:translate(16px,-50%)}
.pf-badge-cb:disabled{opacity:.5;cursor:not-allowed}
.pf-badge-cb:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
html[data-motion="off"] .pf-badge-cb,html[data-motion="off"] .pf-badge-cb::after{transition:none}

.mc-topactions{position:absolute;top:12px;right:12px;z-index:6;display:flex;align-items:center;gap:8px}
.mc-top-btn{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.42);color:#fff;display:inline-flex;
  align-items:center;justify-content:center;transition:background .12s}
.mc-top-btn:hover{background:rgba(0,0,0,.62)}
.mc-top-btn svg{width:18px;height:18px}
.mc-friendbadge{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.42);color:var(--green-dot,#34a853);
  display:inline-flex;align-items:center;justify-content:center}
.mc-friendbadge svg{width:18px;height:18px}
.mc-mutuals{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:13px;font-weight:500;color:var(--text-2);
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.mc-mutuals:active{opacity:.65}
.mc-mut-info{display:flex;align-items:center;flex-wrap:wrap;gap:7px;flex:1 1 auto;min-width:0}
.mc-mut-chev{width:18px;height:18px;flex:0 0 auto;color:var(--text-3)}
.mc-mutuals .mc-mutual-ic{width:18px;height:18px;border-radius:30%;overflow:hidden;display:inline-flex;align-items:center;
  justify-content:center;background:var(--surface-3);font-size:9px;font-weight:700;color:var(--text-2);flex:0 0 auto}
.mc-mutuals .mc-mutual-ic img{width:100%;height:100%;object-fit:cover}
.mc-mutual-sep{color:var(--text-3)}
.mc-actionrow{display:flex;align-items:center;gap:10px;margin-top:16px;margin-bottom:16px}
.mc-actionrow:empty{display:none}
.mc-act{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border-radius:var(--r-m);
  font-size:14px;font-weight:600;cursor:pointer;flex:0 0 auto;transition:filter .12s,background .12s,transform .12s}
.mc-act svg{width:18px;height:18px;flex:0 0 auto}
.mc-act span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mc-act-wide{flex:1 1 auto;min-width:0}
.mc-act-icon{width:44px;padding:0;border-radius:50%}
.mc-act-primary{background:var(--accent);color:var(--on-accent)}
.mc-act-primary:hover{filter:brightness(1.07)}
.mc-act-primary:active{transform:scale(.98)}
.mc-act-muted{background:var(--surface-3);color:var(--text)}
.mc-act-muted:hover{filter:brightness(1.18)}
.mc-act-muted:active{transform:scale(.98)}
.mc-act-pending{background:var(--surface-3);color:var(--text-3);cursor:default}

@media (min-width:761px){
  .mc-mutuals,.mc-actionrow,#mm-activity-wrap{display:none}
}
.mc-right{display:flex;flex-direction:column;min-width:0;background:var(--surface)}
.mc-tabs{display:flex;align-items:center;gap:20px;padding:18px 54px 0 22px;border-bottom:1px solid var(--border-soft);flex:0 0 auto;position:relative}
.mc-tab{padding:0 0 12px;font-size:14px;font-weight:600;color:var(--text-3);border-bottom:2px solid transparent;
  margin-bottom:-1px;white-space:nowrap;transition:color .12s}
.mc-tab:hover{color:var(--text-2)}
.mc-tab.active{color:var(--text);border-bottom-color:var(--accent)}
.mc-tab.hidden{display:none}
.mc-tabbody{flex:1;overflow-y:auto;padding:22px;min-height:280px}
.mc-tabpane.hidden{display:none}
.mc-left-body{padding:0 22px 22px;position:relative}
.mc-av-row{position:relative;height:54px}
.mc-av-row #mm-avatar{position:absolute;top:-46px;left:0}

.mc-av-row #mm-badges{position:absolute;right:0;bottom:6px;max-width:62%}
.mc-badges,.pp-badges{display:flex;flex-wrap:wrap;align-items:center;gap:5px;width:fit-content;
  background:var(--surface-3);border:1px solid var(--border-soft);border-radius:6px;padding:3px 6px}
.mc-badges{margin-left:auto;justify-content:flex-end}
.pp-badges{justify-content:flex-start;margin:7px 0 0}
.mc-badges:empty,.pp-badges:empty{display:none}
.bdg-chip{display:inline-flex;align-items:center}
.mc-badges img{width:18px;height:18px;object-fit:contain;display:block}
.pp-badges img{width:20px;height:20px;object-fit:contain;display:block}

#badge-tip{position:fixed;transform:translate(-50%,-100%);background:var(--surface);color:var(--text);
  border:1px solid var(--border-soft);border-radius:6px;padding:5px 9px;font-size:11px;font-weight:600;
  line-height:1;white-space:nowrap;box-shadow:var(--sh-2);pointer-events:none;opacity:0;transition:opacity .1s;z-index:9999}
#badge-tip.show{opacity:1}

.tagpop{position:fixed;z-index:9999;max-width:240px;background:var(--surface);border:1px solid var(--border-soft);
  border-radius:20px;box-shadow:var(--sh-3);padding:11px 13px;opacity:0;transform:translateY(4px);
  transition:opacity .12s var(--ease),transform .12s var(--ease)}
.tagpop.show{opacity:1;transform:none}
.tagpop-h{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text)}
.tagpop-ic{display:inline-flex;width:16px;height:16px;color:var(--accent);flex:0 0 auto}
.tagpop-ic svg{width:16px;height:16px}
.tagpop-b{margin-top:5px;font-size:12px;line-height:1.45;color:var(--text-2)}
.mc-av-row #mm-avatar .av.xl{width:96px;height:96px;font-size:38px;box-shadow:0 0 0 6px var(--surface-2);background:var(--surface-3)}
.mc-av-row #mm-avatar .mc-dot{border-width:5px;width:26px;height:26px;right:4px;bottom:4px}
.mc-left .mc-name{font-size:22px;font-weight:700;line-height:1.2;display:flex;align-items:center;gap:8px;flex-wrap:wrap;word-break:break-word;margin:13px 0}
.mc-left .mc-name .crown{width:18px;height:18px;color:#f9ab00}
.mc-left .mc-sub{font-size:13px;color:var(--text-2);margin-top:4px;word-break:break-word}
.mc-left .mc-bio{background:transparent;border-top:1px solid var(--border-soft);border-radius:0;
  padding:14px 0 0;margin:14px 0 0;font-size:13.5px;color:var(--text-2);line-height:1.55;white-space:pre-wrap;word-break:break-word}
.mc-field{border-top:1px solid var(--border-soft);padding:13px 0 0;margin-top:13px}
.mc-field-h{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3)}
.mc-field .mc-note-tag{font-weight:600;letter-spacing:.3px;text-transform:none;color:var(--text-3);opacity:.8}
.mc-field-v{font-size:14px;color:var(--text);margin-top:5px}
.mc-note{width:100%;margin-top:6px;background:transparent;border:none;resize:none;color:var(--text);
  font:inherit;font-size:13.5px;line-height:1.5;outline:none;padding:0;min-height:22px;overflow:hidden}
.mc-note::placeholder{color:var(--text-3)}
.mc-note:focus{color:var(--text)}
.mc-left .mc-private{margin:14px 0 0}
.mc-left #mm-roles-wrap{border-top:1px solid var(--border-soft);padding-top:13px;margin-top:13px}
.mc-left #mm-roles-wrap .sect-label{margin-top:0}
.mc-left #mm-nick-wrap{border-top:1px solid var(--border-soft);padding-top:13px;margin-top:13px}
.mc-left #mm-modactions{margin-top:16px;margin-bottom:16px}
.mc-left #mm-modactions:empty{display:none}

.mc-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  height:100%;min-height:240px;padding:20px;color:var(--text-2)}
.mc-empty h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.4}
.mc-empty p{font-size:13px;color:var(--text-3);line-height:1.5;max-width:300px;margin-bottom:16px}
.mc-mlist{display:flex;flex-direction:column;gap:2px}
.mc-mlrow{display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:var(--r-m);cursor:pointer;transition:background .12s}
.mc-mlrow:hover{background:var(--surface-2)}
.mc-mlrow .avwrap{position:relative;display:inline-block;flex:0 0 auto}
.mc-mlrow .av{width:36px;height:36px;font-size:14px}
.mc-mlrow .ricon{width:36px;height:36px;border-radius:30%;background:var(--surface-3);display:inline-flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--text-2);overflow:hidden;flex:0 0 auto}
.mc-mlrow .ricon img{width:100%;height:100%;object-fit:cover}
.mc-mlrow .nm{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-mlrow .dot{position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;border:2.5px solid var(--surface)}
.mc-mlrow:hover .dot{border-color:var(--surface-2)}

@media (max-width:760px){
  .modal-card.mc-shell{max-width:100%}
  
  .mc-grid{width:100%;grid-template-columns:1fr;max-height:calc(100dvh - 40px)}
  .mc-left{border-right:none;min-height:0;background:transparent}
  .mc-right{display:none}
  .mc-empty{min-height:0;padding:30px 20px}
  
  .mc-left-body{padding:14px}
  .mc-left-body .mc-bio,
  .mc-left-body .mc-field,
  .mc-left-body #mm-roles-wrap,
  .mc-left-body #mm-nick-wrap,
  .mc-left-body .mc-private{
    border-top:none;background:var(--surface-2);border-radius:var(--r-l);padding:15px 16px;margin:0 0 12px}
  .mc-left-body .mc-bio{margin-top:14px}
  
  .mc-act{border-radius:50px}
}


.modal.m-sheet,
.modal.m-sheet.open{align-items:flex-end;justify-content:center;padding:0}
.msheet-card{width:100%;max-width:520px;background:var(--surface-2);border-radius:20px 20px 0 0;box-shadow:var(--sh-3);
  display:flex;flex-direction:column;overflow:hidden;height:70dvh;max-height:70dvh;
  transform:translateY(100%);transition:transform .26s var(--ease);padding-bottom:env(safe-area-inset-bottom)}
.modal.m-sheet.open .msheet-card{transform:none}
.msheet-grab{width:40px;height:4px;border-radius:999px;background:var(--border);margin:10px auto 2px;flex:0 0 auto;cursor:pointer}
.msheet-title{font-size:17px;font-weight:700;text-align:center;padding:8px 16px 2px;color:var(--text);flex:0 0 auto}
.msheet-tabs{display:flex;align-items:stretch;padding:8px 6px 0;border-bottom:1px solid var(--border-soft);flex:0 0 auto}
.msheet-tab{flex:1;padding:10px 8px 13px;font-size:14px;font-weight:600;color:var(--text-3);text-align:center;
  border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color .12s;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.msheet-tab:active{color:var(--text-2)}
.msheet-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.msheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px}
.msheet-pane.hidden{display:none}


.pp-card{background:transparent;border:none;border-radius:0;box-shadow:none;overflow:visible;margin:-14px -10px 0}
.pp-banner{aspect-ratio:5/2;background:var(--accent);background-size:cover;background-position:center}
.pp-head{padding:0 14px;margin-top:-36px}
.pp-head .av.xl{width:72px;height:72px;font-size:27px;box-shadow:0 0 0 5px var(--bg);background:var(--surface-3)}
.pp-head .mc-dot{border-width:4px;border-color:var(--bg)}
.pp-body{padding:8px 14px 16px}
.pp-card-inner{background:var(--surface);border-radius:var(--r-l,16px);padding:13px 14px;box-shadow:var(--sh-1)}
.pp-name{font-size:18px;font-weight:700;word-break:break-word;line-height:1.2}
.pp-handle{font-size:12.5px;color:var(--text-3);margin-top:2px;word-break:break-word}
.pp-status{display:flex;align-items:center;font-size:12.5px;color:var(--text-2);margin-top:9px}
.pp-bio{font-size:13px;color:var(--text-2);line-height:1.5;margin-top:11px;padding-top:11px;
  border-top:1px solid var(--border-soft);word-break:break-word;white-space:pre-wrap}
.pp-private{font-size:12.5px;color:var(--text-3);font-style:italic;margin-top:11px}
.pp-info{margin-top:11px;padding-top:11px;border-top:1px solid var(--border-soft);display:flex;flex-direction:column;gap:10px}
.pp-row-h{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3)}
.pp-row-v{font-size:13px;color:var(--text);margin-top:3px}
.pp-mutuals{display:flex;gap:8px;flex-wrap:wrap}
.pp-pill{font-size:11.5px;font-weight:600;color:var(--text-2);background:var(--surface-2);
  border-radius:999px;padding:4px 10px}
.pp-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.pp-btn{width:100%;justify-content:center;height:36px}


#members-list:has(> .pp-card.pc-on):not(:has(.act-sec)){min-height:100%;display:flex;flex-direction:column}
#members-list:has(> .pp-card.pc-on):not(:has(.act-sec)) > .pp-card.pc-on{flex:1 1 auto}

.pp-back{display:none}
@media (max-width:980px){
  body.members-open #members:has(.pp-card){width:100vw}
  .pp-card{position:relative}
  .pp-back{display:inline-flex;align-items:center;justify-content:center;position:absolute;top:12px;left:12px;z-index:6;
    width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.62);color:#fff}
  .pp-back svg{width:22px;height:22px}
}


#home-nav{padding:0}
#home-nav.hidden{display:none}
.home-find-wrap{height:56px;display:flex;align-items:center;padding:0 10px;border-bottom:1px solid var(--border-soft)}
.home-nav-list{padding:8px 10px 4px}
.home-find{width:100%;height:36px;display:flex;align-items:center;padding:0 12px;border-radius:var(--r-s);
  background:var(--bg);color:var(--text-3);font-size:13px;font-weight:500;text-align:left;
  border:1px solid var(--border-soft);transition:background .12s,color .12s}
.home-find:hover{background:var(--surface-3);color:var(--text-2)}
.home-navitem{display:flex;align-items:center;gap:12px;width:100%;height:42px;padding:0 12px;margin-top:6px;
  border-radius:var(--r-m);color:var(--text-2);font-size:15px;font-weight:600;transition:background .12s,color .12s}
.home-navitem svg{width:22px;height:22px;flex:0 0 auto}
.home-navitem:hover{background:var(--surface-3);color:var(--text)}
.home-navitem.active{background:var(--accent-soft);color:var(--accent)}
.home-navitem.soon{cursor:default}
.home-navitem.soon:hover{background:transparent;color:var(--text-2)}
.home-navitem .nav-soon{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--text-3);background:var(--surface-3);padding:2px 7px;border-radius:7px}

.home-navitem .nav-new{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:#fff;background:linear-gradient(90deg,#7c3aed,#db2777);padding:2px 8px;border-radius:999px}

.home-navitem .nav-pill{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:20px;
  background:var(--red);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;flex:0 0 auto}
.home-navitem .nav-pill.hidden{display:none}


.author.clickable,.dm-row .nm.clickable{cursor:pointer}
.author.clickable:hover,.mc-left .mc-name.clickable:hover{text-decoration:underline}





#mm-roles{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mc-role-pill{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 5px 0 11px;border-radius:20px;
  background:var(--surface-3);border:1px solid var(--border-soft);font-size:12.5px;font-weight:600;color:var(--text);max-width:100%}
.mc-role-pill .rdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.mc-role-pill .rnm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-role-pill.static{padding-right:11px}
.mc-role-pill .rx{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
  color:var(--text-3);flex:0 0 auto;transition:background .12s,color .12s}
.mc-role-pill .rx:hover{background:var(--red-soft);color:var(--red)}
.mc-role-pill .rx svg{width:12px;height:12px}
.mc-role-add{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  border:1px dashed var(--border);color:var(--text-2);flex:0 0 auto;transition:background .12s,color .12s,border-color .12s}
.mc-role-add:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.mc-role-add svg{width:16px;height:16px}
.mc-roles-empty{font-size:13px;color:var(--text-3)}


.ctx-menu.role-pop{width:248px;padding:8px}
.role-pop-search{width:100%;height:34px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-s);
  background:var(--surface);color:var(--text);font:inherit;font-size:13px;outline:none;margin-bottom:6px}
.role-pop-search::placeholder{color:var(--text-3)}
.role-pop-search:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.role-pop-list{max-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.role-pop-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-s);cursor:pointer;
  font-size:13.5px;color:var(--text);text-align:left;width:100%;transition:background .12s}
.role-pop-item:hover,.role-pop-item.sel{background:var(--surface-2)}
.role-pop-item .rdot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.role-pop-item .rnm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.role-pop-empty{padding:12px 8px;font-size:12.5px;color:var(--text-3);text-align:center}


#mm-modactions .mc-mod-btn{width:38px;height:38px;border-radius:var(--r-s);display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--border);color:var(--text-2);background:var(--surface);flex:0 0 auto;
  transition:background .12s,color .12s,border-color .12s}
#mm-modactions .mc-mod-btn:hover{background:var(--red-soft);color:var(--red);border-color:var(--red)}
#mm-modactions .mc-mod-btn svg{width:18px;height:18px}

#mm-topcluster{position:absolute;top:12px;right:12px;z-index:6;display:flex;align-items:flex-start;gap:8px}
#mm-topcluster:empty{display:none}
#mm-topcluster #mm-modactions.mm-mod-cluster{margin:0;gap:8px}
#mm-topcluster #mm-modactions.mm-mod-cluster .mc-mod-btn{width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.22);color:#fff}
#mm-topcluster #mm-modactions.mm-mod-cluster .mc-mod-btn:hover{background:#d83a3a;border-color:#d83a3a;color:#fff}


.dirtybar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;
  width:min(660px,calc(100% - 32px));display:none}
.dirtybar.show{display:block;animation:dirtyUp .18s var(--ease)}
@keyframes dirtyUp{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
.dirtybar-inner{display:flex;align-items:center;gap:14px;background:var(--surface-3);
  border:1px solid var(--border);border-radius:20px;padding:9px 10px 9px 18px;box-shadow:var(--sh-3)}
.dirtybar-msg{font-size:14px;font-weight:500;color:var(--text);flex:1;min-width:0}
.dirtybar-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.dirtybar .db-cancel{height:34px;padding:0 14px;border-radius:var(--r-s);background:transparent;color:var(--text);
  font-size:13px;font-weight:600;transition:background .12s}
.dirtybar .db-cancel:hover{background:rgba(128,134,139,.16)}
.dirtybar .db-ok{height:34px;padding:0 18px;font-size:13px}
@media (max-width:720px){.dirtybar{bottom:14px}.dirtybar-msg{font-size:13px}}


.modal-card.ec-shell{max-width:880px;max-height:680px}
.ec-shell .ss-nav-head{padding-bottom:10px;margin:12px 0 20px 0;font-weight:400}
.ec-shell .ss-pane-title{display:flex;align-items:center;gap:8px}
.ec-shell .ss-pane-title .ec-hash{color:var(--text-3);font-weight:600}


.us-colorpick{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.us-colorpick input[type=color]{width:52px;height:40px;padding:0;border:1px solid var(--border);border-radius:var(--r-s);
  background:var(--surface);cursor:pointer;flex:0 0 auto}
.us-colorpick input[type=color]::-webkit-color-swatch-wrapper{padding:4px}
.us-colorpick input[type=color]::-webkit-color-swatch{border:none;border-radius:5px}
.us-colorpick input[type=color]::-moz-color-swatch{border:none;border-radius:5px}
.us-colorpick .us-hex{width:120px;flex:0 0 auto}
.us-colorpick .us-cp-reset{font-size:12.5px;height:36px;padding:0 12px}




#home-hint{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
#home-hint.hidden{display:none}


.fr-row .fr-more svg{width:18px;height:18px}


body.shift-del .macts [data-act-del]{color:var(--red)}
body.shift-del .macts [data-act-del]:hover{background:var(--red-soft);color:var(--red)}


.role-item.role-owner{cursor:pointer;margin-top:6px}
.role-item.role-owner .rdot{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.oc-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.oc-crown{flex:0 0 auto;width:42px;height:42px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:rgba(249,171,0,.14)}
.oc-crown svg{width:23px;height:23px;color:#f9ab00}
.oc-title{font-size:16px;font-weight:700;color:var(--text)}
.oc-desc{font-size:12.5px;color:var(--text-2);margin-top:3px;line-height:1.5;max-width:400px}



.modal-back{display:none;position:absolute;top:12px;left:12px;z-index:6;
  width:40px;height:40px;min-width:40px;align-items:center;justify-content:center;border-radius:50%;
  background:transparent;color:var(--text);box-shadow:none}
.modal-back:active{opacity:.6}
.modal-back svg{width:22px;height:22px}

@media (max-width:980px){#btn-pins,#btn-thread{display:none}}

@media (max-width:600px){
  
  .modal.open{padding:0;align-items:stretch;justify-content:stretch}
  
  .modal.open > .modal-card,
  .modal.open > .modal-card.wide,
  .modal.open > .modal-card.settings-shell,
  .modal.open > .modal-card.mc-shell,
  .modal.open > .modal-card.ec-shell{
    position:fixed;inset:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;
    margin:0;border-radius:0;border:0;overflow-y:auto}
  
  
  .modal.open > .modal-card:not(.settings-shell):not(.mc-shell):not(.ec-shell){
    padding:64px 18px 24px;display:flex;flex-direction:column;justify-content:safe center}
  
  
  .modal.open > .modal-card:not(.settings-shell):not(.mc-shell):not(.ec-shell) > .modal-head{
    position:static;margin:0 -18px 8px;padding:0 18px 12px;border-radius:0;min-height:40px;align-items:center}
  .modal.open > .modal-card:not(.settings-shell):not(.mc-shell):not(.ec-shell) > .modal-actions{
    bottom:0;margin:20px -18px 0;padding:16px 18px calc(16px + env(safe-area-inset-bottom));border-radius:0}
  
  .modal#m-gate.gate-fs.open .modal-back{display:none}
  .modal#m-gate.gate-fs.open>.modal-card>.modal-head{padding-top:max(40px,5vh)}
  
  .modal.open > .modal-card.settings-shell{grid-template-columns:1fr;padding-top:60px;background:var(--bg)}
  
  .modal.open > .modal-card.mc-shell{padding:0;background:var(--surface)}
  
  .modal.open .mc-shell .mc-grid{grid-template-columns:1fr;
    border-radius:0;max-height:none;height:100vh;height:100dvh;box-shadow:none;overflow:hidden}
  .modal.open .mc-shell .mc-x{display:none}            
  
  .modal.open .modal-back{display:inline-flex;left:0;top:12px;background:#ffffff;color:#000000;
    box-shadow:none;border-radius:0 20px 20px 0}
  
  .modal.open .wlc-card[data-step="2"] .modal-back{display:none}

  
  #m-server .modal-head h3{font-size:19px}
  #m-server .modal-sub{margin-bottom:16px}
  #m-server .tabs{margin-bottom:18px}
  #m-server .tab{height:42px;font-size:14px}
  #m-server .priv-tiers{gap:8px}
  #m-server .chip-tiers .priv-tier{padding:11px 44px 11px 13px}   
  #m-server .priv-tier .t{font-size:14px}
  #m-server .priv-tier .d{font-size:12.5px;line-height:1.4}
  
}

@media (min-width:760px){
  #m-server .modal-card{max-width:520px}
}

#srv-head, #channel-zone, #members-list,
.uname, .crow-head, .ch-name, .mname, .cname, .cat-head, .side-label{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}

input, textarea, select, [contenteditable="true"], .mtext, .mtext *{
  -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;
}



@media (hover:none){
  .mtext, .mtext *, .mbody, .mrow, .crow-head{
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
    -webkit-touch-callout:none;
  }
  input, textarea, [contenteditable="true"]{
    -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;
    -webkit-touch-callout:default;
  }
  .mrow:hover .macts, .macts{ display:none !important; }
}

body.touch .mtext, body.touch .mtext *, body.touch .mbody, body.touch .mrow, body.touch .crow-head{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
body.touch input, body.touch textarea, body.touch [contenteditable="true"]{
  -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;
  -webkit-touch-callout:default;
}
body.touch .mrow:hover .macts, body.touch .macts{ display:none !important; }


.us-search-results{display:flex;flex-direction:column;gap:2px;margin:2px 6px 8px;padding:4px;
  background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--r-m);box-shadow:var(--sh-1)}
.us-search-hit{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:8px 10px;border-radius:var(--r-s);text-align:left;color:var(--text);transition:background .12s var(--ease)}
.us-search-hit:hover{background:var(--surface-3)}
.us-search-hit .ush-t{font-size:13.5px;font-weight:600}
.us-search-hit .ush-s{font-size:11.5px;color:var(--text-3);white-space:nowrap}



@keyframes cxPopIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes cxRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (min-width:981px){
  html:not([data-motion="off"]) .btn{transition:background .15s var(--ease),color .15s var(--ease),transform .09s var(--ease),box-shadow .15s var(--ease)}
  html:not([data-motion="off"]) .btn:not(:disabled):active{transform:translateY(1px) scale(.985)}
  html:not([data-motion="off"]) .rail-item{transition:transform .16s var(--ease),border-radius .18s var(--ease),background .15s var(--ease)}
  html:not([data-motion="off"]) .rail-item:hover{transform:translateY(-2px)}
  html:not([data-motion="off"]) .channel,
  html:not([data-motion="off"]) .dm-row,
  html:not([data-motion="off"]) .member,
  html:not([data-motion="off"]) .ss-navitem,
  html:not([data-motion="off"]) .us-navitem{transition:background .14s var(--ease),color .14s var(--ease),transform .14s var(--ease)}
  html:not([data-motion="off"]) .channel:hover,
  html:not([data-motion="off"]) .dm-row:hover{transform:translateX(2px)}
  html:not([data-motion="off"]) .explore-card,
  html:not([data-motion="off"]) .sp-card{transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
  html:not([data-motion="off"]) .explore-card:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
  html:not([data-motion="off"]) #btn-send{transition:transform .12s var(--ease),background .15s var(--ease),opacity .15s var(--ease)}
  html:not([data-motion="off"]) #btn-send:not(:disabled):hover{transform:scale(1.08)}
  html:not([data-motion="off"]) #btn-send:not(:disabled):active{transform:scale(.92)}
  
  html:not([data-motion="off"]) .menu:not(.hidden),
  html:not([data-motion="off"]) .ctx-menu,
  html:not([data-motion="off"]) .me-menu,
  html:not([data-motion="off"]) .status-menu,
  html:not([data-motion="off"]) #emoji-pop,
  html:not([data-motion="off"]) .us-search-results:not(.hidden){animation:cxPopIn .16s var(--ease)}
  
  html:not([data-motion="off"]) .ss-pane:not(.hidden){animation:cxRise .2s var(--ease)}
}


.ov-addrow{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.ov-addrow select{flex:1;min-width:0;height:34px;border:1px solid var(--border);border-radius:var(--r-s,8px);
  background:var(--surface);color:var(--text);padding:0 10px}
.ov-card{border:1px solid var(--border);border-radius:20px;background:var(--surface-2);padding:10px 12px;margin-bottom:10px}
.ov-card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-weight:600;color:var(--text)}
.ov-card-head .ov-tname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-card-head .rdot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.ov-card-head .ov-rm{flex:0 0 auto;font-size:18px;line-height:1;width:28px;height:28px}
.ov-permrow{display:flex;align-items:center;gap:10px;padding:5px 0}
.ov-permrow .ov-pname{flex:1;min-width:0;font-size:13px;color:var(--text-2)}
.ov-tri{display:inline-flex;border:1px solid var(--border);border-radius:20px;overflow:hidden;flex:0 0 auto}
.ov-tri .ovb{width:34px;height:28px;border:0;background:var(--surface);color:var(--text-3);cursor:pointer;
  font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border)}
.ov-tri .ovb:last-child{border-right:0}
.ov-tri .ovb:hover{background:var(--surface-3)}
.ov-tri .ovb.ovdeny.on{background:var(--red);color:var(--on-accent)}
.ov-tri .ovb.ovneu.on{background:var(--surface-3);color:var(--text)}
.ov-tri .ovb.ovallow.on{background:var(--green);color:var(--on-accent)}
#perm-list{display:block}


.bm-row{align-items:flex-start}
.bm-row .meta{flex:1;min-width:0}
.bm-row .pt{margin-top:4px;color:var(--text-2);font-size:14px;word-break:break-word;overflow-wrap:anywhere}
.bm-acts{display:flex;flex-direction:row;align-items:center;gap:6px;flex:0 0 auto}
.bm-acts .btn{height:30px;padding:0 12px;font-size:12.5px}

.bm-x{appearance:none;border:0;background:transparent;cursor:pointer;color:var(--text-3);width:30px;height:30px;
  border-radius:var(--r-s);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  opacity:0;transition:opacity .12s,background .12s,color .12s}
.bm-x svg{width:16px;height:16px}
.bm-x:hover{background:var(--red-soft);color:var(--red)}
.bm-row:hover .bm-x,.bm-row:focus-within .bm-x{opacity:1}
@media (hover:none){.bm-x{opacity:1}}


.sys-review{display:flex;gap:8px;justify-content:center;margin-top:6px;flex-wrap:wrap}
.ss-raid-banner{background:var(--red-soft);color:var(--red);border-radius:20px;padding:10px 12px;margin-bottom:14px;font-size:13px;font-weight:500}


.cf-head{display:flex;align-items:flex-start;gap:13px}
.cf-head .modal-head{flex:1;min-width:0;margin-bottom:0}
.cf-icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:var(--red-soft);color:var(--red)}
.cf-icon.hidden{display:none}
.cf-icon svg{width:21px;height:21px}
#m-confirm .modal-sub{margin-top:9px}
#m-confirm #cf-warn{margin-top:14px}
#m-confirm .form-err:empty{display:none}

@media (max-width:980px){
  #m-confirm.cf-danger > .modal-card{
    background:linear-gradient(180deg,var(--red-soft) 0,transparent 190px),var(--surface)}
  #m-confirm .cf-icon{width:42px;height:42px}
  #m-confirm .cf-icon svg{width:23px;height:23px}
}


.img-lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.92);padding:24px}
.img-lightbox.open{display:flex}
.img-lightbox img{max-width:92vw;max-height:92vh;width:auto;height:auto;object-fit:contain;border-radius:20px;
  box-shadow:0 18px 60px rgba(0,0,0,.5);cursor:zoom-out}
.img-lightbox-close{position:absolute;top:18px;right:18px;width:40px;height:40px;border:none;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s var(--ease)}
.img-lightbox-close:hover{background:rgba(255,255,255,.26)}
.img-lightbox-close svg{width:20px;height:20px}


.composer-notice{margin:0 0 8px;padding:10px 14px;border-radius:var(--r-m);font-size:13px;line-height:1.45;
  font-weight:500;display:flex;align-items:center;gap:8px}
.composer-notice.hidden{display:none}
.composer-notice.is-mute{background:var(--red-soft);color:var(--red)}
.composer-notice.is-automod{background:var(--amber-soft,rgba(245,158,11,.16));color:var(--amber,#c2710c)}

.composer-notice.has-actions{flex-direction:column;align-items:stretch}
.composer-notice .cn-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.composer-notice .cn-ic{width:18px;height:18px;flex:0 0 auto}
.composer-notice .cn-txt{flex:1 1 160px;min-width:0}
.composer-notice .cn-link{background:none;border:0;font:inherit;font-weight:700;color:inherit;
  text-decoration:underline;cursor:pointer;padding:0;flex:0 0 auto;opacity:.95}
.composer-notice .cn-link:hover{opacity:1}
.composer-notice .cn-note{font-weight:600;opacity:.8;flex:0 0 auto}
.composer-notice .cn-reason{margin-top:8px;font-weight:400;line-height:1.5;white-space:pre-wrap;word-break:break-word}


.reply-mention{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;background:var(--surface-3);
  border:1px solid var(--border-soft);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;
  color:var(--text-3);cursor:pointer;line-height:1}
.reply-mention svg{width:14px!important;height:14px!important;color:inherit!important;flex:0 0 auto}
.reply-mention.on{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.reply-mention.hidden{display:none}
@media (max-width:560px){.reply-mention .rm-label{display:none}}

.us-nav-badge{display:inline-block;min-width:16px;padding:0 5px;margin-left:6px;font-size:11px;line-height:16px;
  text-align:center;border-radius:20px;background:var(--red,#e5484d);color:#fff;font-weight:700;vertical-align:middle}
.us-nav-badge:empty{display:none}


.appeal-card.is-resolved{opacity:.85}
.appeal-card .tk-resolved{margin-top:8px;color:var(--text-3)}


.dm-row .dm-close{opacity:0;transition:opacity .14s var(--ease);color:var(--text-3)}
.dm-row:hover .dm-close,.dm-row .dm-close:focus-visible{opacity:.65}
.dm-row .dm-close:hover{opacity:1;color:var(--text)}
@media (hover:none){.dm-row .dm-close{opacity:.5}}   



body.explore #members, body.no-members #members{display:none}
@media (min-width:981px){
  body.explore #app, body.no-members #app{grid-template-columns:72px var(--sidebar-w,264px) 1fr;
    grid-template-areas:"rail sidebar topbar" "rail sidebar chat"}
}


.modal-card.wlc-card{max-width:480px;width:100%}

.wlc-progress{display:flex;justify-content:center;gap:7px;margin:2px 0 18px}
.wlc-dot{width:7px;height:7px;border-radius:999px;background:var(--border);
  transition:width .25s var(--ease),background .25s var(--ease),opacity .25s var(--ease)}
.wlc-card[data-step="1"] .wlc-dot[data-dot="1"],
.wlc-card[data-step="2"] .wlc-dot[data-dot="2"]{width:22px;background:var(--accent)}
.wlc-card[data-step="2"] .wlc-dot[data-dot="1"]{background:var(--accent);opacity:.45}

.wlc-pane{animation:wlcIn .3s var(--ease)}
@keyframes wlcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wlc-hero{text-align:center;margin-bottom:6px}
.wlc-badge{width:56px;height:56px;border-radius:20px;margin:0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent)}
.wlc-badge svg{width:28px;height:28px}
.wlc-title{margin:8px 0 4px;font-size:22px}
.wlc-sub{color:var(--text-2);font-size:14px;line-height:1.55;margin:0 auto;max-width:340px}
.wlc-step{margin-top:18px}
.wlc-step .sect-label{margin-bottom:10px}
.wlc-themes{display:flex;gap:10px;flex-wrap:wrap}
.wlc-colors{display:flex;gap:10px;flex-wrap:wrap}

.wlc-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:24px}
.wlc-nav .btn:not(.btn-text){min-width:128px}
.wlc-stepcount{font-size:12px;font-weight:600;color:var(--text-3)}

.wlc-cards{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.wlc-action{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:14px 16px;border:1px solid var(--border-soft);border-radius:var(--r-m);background:var(--surface);
  cursor:pointer;transition:border-color .14s var(--ease),background .14s var(--ease),transform .14s var(--ease),box-shadow .14s var(--ease)}
.wlc-action:hover,.wlc-action:focus-visible{border-color:var(--accent);background:var(--accent-soft);
  transform:translateY(-1px);box-shadow:var(--sh-1);outline:none}
.wlc-action-ic{flex:0 0 auto;width:42px;height:42px;border-radius:20px;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);transition:background .14s var(--ease),color .14s var(--ease)}
.wlc-action:hover .wlc-action-ic,.wlc-action:focus-visible .wlc-action-ic{background:var(--accent);color:var(--on-accent)}
.wlc-action-ic svg{width:22px;height:22px}
.wlc-action-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wlc-action-t{font-size:15px;font-weight:600;color:var(--text)}
.wlc-action-d{font-size:12.5px;color:var(--text-2);line-height:1.4}
.wlc-action-arr{width:18px;height:18px;flex:0 0 auto;color:var(--text-3);
  transition:transform .14s var(--ease),color .14s var(--ease)}
.wlc-action:hover .wlc-action-arr,.wlc-action:focus-visible .wlc-action-arr{color:var(--accent);transform:translateX(3px)}


.modal-card.ac-card{max-width:420px;width:100%}
.ac-stage{position:relative;width:260px;height:260px;max-width:100%;margin:0 auto;border-radius:20px;overflow:hidden;
  background:var(--surface-3);touch-action:none;cursor:grab;user-select:none}
.ac-stage:active{cursor:grabbing}
.ac-stage #ac-img{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;pointer-events:none;
  -webkit-user-drag:none;max-width:none;max-height:none}
.ac-ring{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(0,0,0,.42),inset 0 0 0 2px rgba(255,255,255,.85)}
.ac-zoom-row{display:flex;align-items:center;gap:10px;margin:14px auto 4px;max-width:260px}
.ac-zoom-row .ac-zicon{width:18px;height:18px;color:var(--text-3);flex:0 0 auto}
.ac-zoom-row #ac-zoom{flex:1}


.modal-card.bc-card{max-width:460px;width:100%}
.bc-card .ac-zoom-row{max-width:280px}
.bc-stage{position:relative;width:280px;height:112px;max-width:100%;margin:0 auto;border-radius:20px;overflow:hidden;
  background:var(--surface-3);touch-action:none;cursor:grab;user-select:none}
.bc-stage:active{cursor:grabbing}
.bc-stage #bc-img{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;pointer-events:none;
  -webkit-user-drag:none;max-width:none;max-height:none}
.bc-frame{position:absolute;inset:0;pointer-events:none;border-radius:20px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}



@keyframes cxScaleIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes cxPopUp{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes cxTierIn{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:none}}
@keyframes cxSendPulse{0%{box-shadow:0 0 0 0 var(--accent-soft)}100%{box-shadow:0 0 0 9px transparent}}
@media (min-width:981px){

  
  html:not([data-motion="off"]) .modal.open .modal-card{
    animation:cxScaleIn .24s var(--ease) both;transform-origin:50% 46%}
  html:not([data-motion="off"]) .modal-card{
    transition:transform .22s var(--ease),opacity .22s var(--ease),box-shadow .22s var(--ease)}

  
  html:not([data-motion="off"]) .plus-menu{
    animation:cxPopUp .16s var(--ease);transform-origin:bottom left}

  
  html:not([data-motion="off"]) .react-pop button{
    transition:background .12s var(--ease),transform .12s var(--ease)}
  html:not([data-motion="off"]) .react-pop button:hover{transform:scale(1.14)}
  html:not([data-motion="off"]) .react-pop button:active{transform:scale(.92)}

  
  html:not([data-motion="off"]) .priv-tier{
    animation:cxTierIn .26s var(--ease) both;
    transition:background .16s var(--ease),border-color .16s var(--ease),
               box-shadow .18s var(--ease),transform .16s var(--ease);
    will-change:transform}
  html:not([data-motion="off"]) .priv-tiers > .priv-tier:nth-child(2){animation-delay:.04s}
  html:not([data-motion="off"]) .priv-tiers > .priv-tier:nth-child(3){animation-delay:.08s}
  html:not([data-motion="off"]) .priv-tiers > .priv-tier:nth-child(4){animation-delay:.12s}
  html:not([data-motion="off"]) .priv-tier:hover{transform:translateY(-2px);box-shadow:var(--sh-1)}
  html:not([data-motion="off"]) .priv-tier .pt-ic{
    transition:color .16s var(--ease),background .16s var(--ease),transform .2s var(--ease)}
  html:not([data-motion="off"]) .priv-tier:hover .pt-ic{transform:scale(1.12) rotate(-4deg)}
  html:not([data-motion="off"]) .priv-tier:has(input:checked){box-shadow:0 0 0 1px var(--accent),var(--sh-1)}
  html:not([data-motion="off"]) .priv-tier:has(input:checked) .pt-ic{transform:scale(1.08)}
  html:not([data-motion="off"]) .priv-tier.lock:has(input:checked){box-shadow:0 0 0 1px var(--red),var(--sh-1)}

  
  html:not([data-motion="off"]) .fr-row{
    transition:background .14s var(--ease),transform .14s var(--ease)}
  html:not([data-motion="off"]) .fr-row:hover,
  html:not([data-motion="off"]) .member:hover{transform:translateX(4px)}

  
  html:not([data-motion="off"]) .icon-btn{
    transition:background .14s var(--ease),color .14s var(--ease),transform .12s var(--ease)}
  html:not([data-motion="off"]) .icon-btn:hover{transform:scale(1.08)}
  html:not([data-motion="off"]) .icon-btn:active{transform:scale(.94)}
  html:not([data-motion="off"]) #btn-send:not(:disabled):active{animation:cxSendPulse .32s var(--ease)}

  
  html:not([data-motion="off"]) .react{
    transition:background .12s var(--ease),border-color .12s var(--ease),transform .13s var(--ease)}
  html:not([data-motion="off"]) .react:hover{transform:translateY(-1px) scale(1.04)}
  html:not([data-motion="off"]) .react:active{transform:scale(.96)}

  
  html:not([data-motion="off"]) .mc-tab{transition:color .15s var(--ease),border-color .2s var(--ease)}
  html:not([data-motion="off"]) .fr-tab{
    transition:background .16s var(--ease),color .15s var(--ease),transform .12s var(--ease)}
  html:not([data-motion="off"]) .fr-tab:active{transform:scale(.97)}
  html:not([data-motion="off"]) .ss-navitem:hover,
  html:not([data-motion="off"]) .us-navitem:hover{transform:translateX(2px)}

  
  html:not([data-motion="off"]) .qs-item{transition:background .12s var(--ease),transform .12s var(--ease)}
  html:not([data-motion="off"]) .qs-item:active{transform:scale(.99)}

  
  html:not([data-motion="off"]) .rail-folder .fold-head{
    transition:background .15s var(--ease),transform .15s var(--ease)}
  html:not([data-motion="off"]) .rail-folder .fold-head:hover{transform:translateY(-1px)}

  
  html:not([data-motion="off"]) .mrow.first .gutter .av,
  html:not([data-motion="off"]) .fr-row .av,
  html:not([data-motion="off"]) .member .av{transition:transform .16s var(--ease)}
  html:not([data-motion="off"]) .mrow.first .gutter .av:hover,
  html:not([data-motion="off"]) .fr-row:hover .av,
  html:not([data-motion="off"]) .member:hover .av{transform:scale(1.06)}

  
  html:not([data-motion="off"]) .explore-card .xicon{transition:transform .2s var(--ease)}
  html:not([data-motion="off"]) .explore-card:hover .xicon{transform:scale(1.05)}

  
  html:not([data-motion="off"]) #friends-view:not(.hidden),
  html:not([data-motion="off"]) #explore-view:not(.hidden),
  html:not([data-motion="off"]) #hero:not(.hidden){animation:cxViewIn .34s var(--ease)}
  
  html:not([data-motion="off"]) .ss-pane:not(.hidden){animation:cxPaneIn .24s var(--ease)}
  
  html:not([data-motion="off"]) .modal.open > .modal-card{animation:cxModalPop .26s var(--ease)}
  
  
  html:not([data-motion="off"]) .channel,
  html:not([data-motion="off"]) .dm-row{transition:background .14s var(--ease),transform .14s var(--ease)}
  html:not([data-motion="off"]) .channel:hover,
  html:not([data-motion="off"]) .dm-row:hover{transform:translateX(2px)}
}

@keyframes cxViewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cxPaneIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes cxModalPop{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}


@media (max-width:980px){
  
  html:not([data-motion="off"]) .rail-item{transition:transform .14s var(--ease),border-radius .2s var(--ease),box-shadow .2s var(--ease)}
  html:not([data-motion="off"]) .rail-item:active{transform:scale(.88)}
  html:not([data-motion="off"]) .channel,
  html:not([data-motion="off"]) .dm-row,
  html:not([data-motion="off"]) .member,
  html:not([data-motion="off"]) .menu-item,
  html:not([data-motion="off"]) .home-navitem,
  html:not([data-motion="off"]) .ss-navitem,
  html:not([data-motion="off"]) .us-navitem,
  html:not([data-motion="off"]) .fr-row,
  html:not([data-motion="off"]) .qs-item,
  html:not([data-motion="off"]) .explore-card{transition:transform .12s var(--ease),background .14s var(--ease)}
  html:not([data-motion="off"]) .channel:active,
  html:not([data-motion="off"]) .dm-row:active,
  html:not([data-motion="off"]) .member:active,
  html:not([data-motion="off"]) .menu-item:active,
  html:not([data-motion="off"]) .home-navitem:active,
  html:not([data-motion="off"]) .ss-navitem:active,
  html:not([data-motion="off"]) .us-navitem:active,
  html:not([data-motion="off"]) .fr-row:active,
  html:not([data-motion="off"]) .qs-item:active,
  html:not([data-motion="off"]) .explore-card:active{transform:scale(.975);transition:transform .07s var(--ease)}
  html:not([data-motion="off"]) .mb-tab:active,
  html:not([data-motion="off"]) .mp-tab:active,
  html:not([data-motion="off"]) .fr-tab:active,
  html:not([data-motion="off"]) .mc-tab:active{transform:scale(.93)}
  html:not([data-motion="off"]) .icon-btn:active{transform:scale(.9)}
  html:not([data-motion="off"]) .btn:not(:disabled):active{transform:translateY(1px) scale(.98)}
  
  html:not([data-motion="off"]) .modal.open > .modal-card{animation:cxModalPop .24s var(--ease)}
  html:not([data-motion="off"]) #explore-view:not(.hidden),
  html:not([data-motion="off"]) #friends-view:not(.hidden),
  html:not([data-motion="off"]) #hero:not(.hidden){animation:cxViewIn .26s var(--ease)}
}


@media (max-width:720px){
  .ss-nav{gap:0;padding:16px 16px calc(30px + env(safe-area-inset-bottom));background:var(--bg)}

  
  .ss-nav-head{font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--text);padding:6px 4px 18px}

  
  .ss-nav-title{font-size:13px;font-weight:600;letter-spacing:normal;text-transform:none;
    color:var(--text-2);padding:2px 6px 9px}

  
  .ss-nav-group{background:transparent;gap:0;margin-bottom:22px}
  .ss-nav-group .ss-navitem{background:var(--surface-2);color:var(--text);font-size:16px;font-weight:500;
    min-height:55px;padding:14px 16px;border-radius:0;gap:13px}
  .ss-nav-group .ss-navitem + .ss-navitem{border-top:1px solid var(--border-soft)}
  .ss-nav-group .ss-navitem:first-of-type{border-radius:14px 14px 0 0}
  .ss-nav-group .ss-navitem:last-of-type{border-radius:0 0 14px 14px}
  .ss-nav-group .ss-navitem:only-of-type{border-radius:20px}
  .ss-nav-group .ss-navitem:active{background:var(--surface-3);color:var(--text)}
  
  .ss-nav .ss-nav-group .ss-navitem.active{background:var(--surface-2);color:var(--text)}

  
  .ss-navitem:not(.ss-nav-danger)::after{content:'';flex:0 0 auto;margin-left:auto;width:9px;height:9px;
    border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:rotate(-45deg)}

  
  .ss-nav-danger{background:var(--surface-2);border-radius:20px;margin-bottom:10px;min-height:53px;
    padding:14px 16px;font-size:16px}
  .ss-nav-danger:active{background:var(--red-soft)}

  .ss-nav-sep{display:none}
  .ss-nav-spacer{flex:0 0 auto;min-height:18px}

  
  .us-card{background:var(--surface-2);border-radius:20px;padding:12px;margin-bottom:18px}
  .us-search{height:52px;border-radius:20px;margin-bottom:18px;background:var(--surface-2);border-color:transparent;padding:10px 12px}
  .us-poweredby{padding-top:20px}
}


.a11y-haptic{display:none}
@media (max-width:980px){ .a11y-haptic{display:block} }


.ap-vronify{display:none}
@media (max-width:980px){ .ap-vronify{display:block} }
.vr-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border-soft);
  border-radius:var(--r-m);margin-bottom:10px}
.vr-row label{flex:0 0 auto;width:158px;font-size:13.5px;font-weight:500}
.vr-row input[type=range]{flex:1;min-width:0;accent-color:var(--accent);height:24px}
.vr-row output{flex:0 0 auto;width:30px;text-align:right;font-size:13px;font-weight:700;color:var(--text-2);
  font-variant-numeric:tabular-nums}



.rep-q{font-size:13px;font-weight:600;color:var(--text-2);margin:4px 2px 10px}
.rep-opts{display:flex;flex-direction:column;gap:8px}
.rep-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;
  padding:13px 14px;border:1px solid var(--border);border-radius:var(--r-m);background:var(--surface);
  color:var(--text);font-size:14.5px;font-weight:500;cursor:pointer;transition:border-color .12s,background .12s}
.rep-opt:hover{background:var(--surface-2)}
.rep-opt.sel{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.rep-opt .rep-tick{opacity:0;font-weight:700;color:var(--accent)}
.rep-opt.sel .rep-tick{opacity:1}
.rep-preview{background:var(--surface-2);border-left:3px solid var(--border);border-radius:var(--r-s);
  padding:10px 12px;margin-bottom:14px;font-size:13.5px;color:var(--text-2);white-space:pre-wrap;word-break:break-word;max-height:120px;overflow:auto}
.rep-ctx{width:100%;min-height:96px;resize:none;padding:11px 13px;border:1px solid var(--border);border-radius:var(--r-m);
  background:var(--surface);color:var(--text);font:inherit;font-size:14px;outline:none}
.rep-ctx:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.rep-count{font-size:11.5px;color:var(--text-3);text-align:right;margin-top:6px}
.rep-count.bad{color:var(--red)}


.report-card{margin:10px 16px;border:1px solid var(--border);border-radius:20px;background:var(--surface-2);
  padding:14px 16px;max-width:680px}
.report-card.resolved{opacity:.62}
.rc-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rc-type{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--on-accent);
  background:var(--accent);border-radius:999px;padding:3px 9px}
.rc-reason{font-size:13px;font-weight:700;color:var(--text)}
.rc-done{margin-left:auto;font-size:11px;font-weight:700;color:var(--green);background:var(--green-soft);border-radius:999px;padding:2px 9px}
.rc-target{font-size:14px;color:var(--text);margin-bottom:3px}
.rc-link{color:var(--accent);cursor:pointer;text-decoration:underline}
.rc-by{font-size:12px;color:var(--text-3);margin-bottom:6px}
.rc-line{font-size:12.5px;color:var(--text-2);margin-bottom:4px}
.rc-snapshot{background:var(--surface);border-left:3px solid var(--border);border-radius:var(--r-s);
  padding:9px 11px;margin:6px 0;font-size:13.5px;color:var(--text-2);white-space:pre-wrap;word-break:break-word}
.rc-context{font-size:14px;color:var(--text);background:var(--surface);border-radius:var(--r-s);padding:9px 11px;margin:6px 0 2px;white-space:pre-wrap;word-break:break-word}
.rc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rc-btn{font-size:13px;font-weight:600;padding:7px 13px;border-radius:var(--r-s);border:1px solid var(--border);
  background:var(--surface);color:var(--text);cursor:pointer;transition:background .12s,border-color .12s}
.rc-btn:hover{background:var(--surface-3)}
.rc-danger{color:var(--red);border-color:var(--red-soft)}
.rc-danger:hover{background:var(--red-soft)}



.bot-card{margin:6px 0;max-width:680px}
.bot-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.bot-head .av{width:26px;height:26px;font-size:11px;border-radius:50%;flex:0 0 auto}
.bot-head .uname{font-weight:600;color:var(--text)}
.bot-head .mtime{font-size:11px;color:var(--text-3)}
.bot-panel{background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:0;padding:12px 14px;margin:20px}
.bp-title{font-weight:700;font-size:15px;color:var(--text);margin-bottom:4px}
.bp-desc{color:var(--text-2);font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.bp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.bot-btn{font-size:13px;font-weight:600;padding:8px 16px;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.bot-btn svg{width:16px;height:16px;flex:0 0 auto}

.bot-btn-wide{width:100%;max-width:340px;padding:11px 18px;font-size:14px}
.bot-btn-warn{background:var(--surface-3);color:var(--text);border:1px solid var(--border)}
.bot-btn-warn:hover{filter:brightness(1.08)}
.bot-btn-danger{background:var(--red);color:#fff}
.bot-btn-danger:hover{filter:brightness(1.08)}
.welcome-card{position:relative;border-radius:20px;overflow:hidden;padding:30px 22px 26px;text-align:center;
  max-width:640px;box-shadow:0 6px 24px rgba(0,0,0,.22);margin:15px}
.welcome-card .wc-ring{display:flex;justify-content:center;margin-bottom:14px}
.welcome-card .wc-av{width:96px;height:96px;border-radius:50%;font-size:34px;border:4px solid rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.welcome-card .wc-av img{border-radius:50%}
.wc-title{color:var(--wc-text,#fff);font-size:24px;font-weight:800;line-height:1.25;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.wc-sub{color:var(--wc-text,#fff);opacity:.92;font-size:14px;margin-top:6px;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.ticket-card.is-closed{border-left-color:var(--text-3);opacity:.92}
.tk-meta{font-size:12px;color:var(--text-3);margin-top:8px}
.tk-closed{color:var(--red);font-weight:700}
.rr-panel .rr-legend{display:flex;flex-direction:column;gap:5px;margin:10px 0 6px}
.rr-row{display:flex;align-items:center;gap:8px;font-size:14px}
.rr-emoji{font-size:18px;line-height:1}
.rr-arrow{color:var(--text-3)}
.rr-role{font-weight:600;color:var(--accent)}
.rr-hint{font-size:12px;color:var(--text-3);margin-bottom:6px}
.rr-panel .reacts{margin-top:4px}
.msglog-card{background:var(--surface-2);border:1px solid var(--border);border-radius:0;padding:10px 12px;max-width:640px;font-size:13px;margin:15px}
.msglog-card.is-del{border-left:3px solid var(--red)}
.msglog-card.is-edit{border-left:3px solid var(--accent)}
.ml-head{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--text)}
.ml-head .ml-where{color:var(--text-3);font-weight:500}
.ml-head .mtime{margin-left:auto;font-size:11px;color:var(--text-3);font-weight:400}
.ml-who{color:var(--text-2);margin:5px 0}
.ml-text{background:var(--surface);border-radius:var(--r-s);padding:6px 9px;color:var(--text);white-space:pre-wrap;word-break:break-word}
.ml-text.ml-old{color:var(--text-3);text-decoration:line-through}
.ml-arrow{text-align:center;color:var(--text-3);margin:2px 0}
.ml-img{color:var(--accent);font-size:12px}
.ml-head .ml-icon svg{width:15px;height:15px;vertical-align:-2px}

.ticket-log-card{border-left:3px solid var(--accent)}
.ticket-log-card .tl-body{margin-top:8px;max-height:280px;overflow:auto;display:flex;flex-direction:column;gap:7px}
.tl-line{background:var(--surface);border-radius:0;padding:6px 9px}
.tl-line.tl-bot{border-left:2px solid var(--accent)}
.tl-author{font-weight:600;color:var(--text);font-size:12.5px}
.tl-time{color:var(--text-3);font-size:11px;margin-left:7px}
.tl-text{color:var(--text-2);white-space:pre-wrap;word-break:break-word;margin-top:2px}
.tl-empty,.tl-trunc{color:var(--text-3);font-size:12px;margin-top:8px}


.bot-shell{max-width:1040px}
#bot-body{padding:4px 2px 30px}
#bot-body .ss-pane-title{margin:0 0 6px}
.ss-help{color:var(--text-2);font-size:13px;line-height:1.55;margin:0 0 16px}
.ss-help code{background:var(--surface-3);border-radius:5px;padding:1px 5px;font-size:12px}
.bot-hero{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.bot-hero-av{width:56px;height:56px;border-radius:20px;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.bot-hero-av svg{width:32px;height:32px}
.bot-hero-name{font-size:20px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px}
.bot-hero-sub{color:var(--text-2);font-size:13px;margin-top:3px;max-width:520px}
.bot-feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}
.bot-feat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;border:1px solid var(--border);
  border-radius:var(--r-m);background:var(--surface-2);cursor:pointer;color:var(--text);font-size:14px;font-weight:600;text-align:left}
.bot-feat:hover{border-color:var(--accent);background:var(--surface-3)}
.bf-badge{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--surface-3);color:var(--text-3)}
.bf-badge.on{background:var(--accent-soft);color:var(--accent)}
.bot-switch{display:flex;align-items:center;gap:11px;cursor:pointer;margin:0 0 16px;user-select:none}
.bot-switch input{position:absolute;opacity:0;width:0;height:0}
.bot-switch .bsw{position:relative;width:42px;height:24px;border-radius:999px;background:var(--surface-3);flex:0 0 auto;transition:background .15s;border:1px solid var(--border)}
.bot-switch .bsw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.bot-switch input:checked + .bsw{background:var(--accent);border-color:var(--accent)}
.bot-switch input:checked + .bsw::after{transform:translateX(18px)}
.bot-switch .bsw-label{font-size:14px;font-weight:600;color:var(--text)}
.bot-switch.big{padding:14px;border:1px solid var(--border);border-radius:var(--r-m);background:var(--surface-2)}
.bot-row{display:flex;gap:14px;flex-wrap:wrap}
.bot-row > .field{flex:1;min-width:130px}
.field-select{width:100%;padding:9px 11px;border-radius:var(--r-s);border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:14px}
.bot-check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);margin:6px 0;cursor:pointer}
.bot-check input{width:16px;height:16px;accent-color:var(--accent)}
.bot-check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 14px}
.bot-radio{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--text);margin-right:18px;cursor:pointer}
.bot-radio input{accent-color:var(--accent)}
.bot-emoji-row{display:flex;flex-wrap:wrap;gap:8px}
.bot-emoji-chip{font-size:20px;width:42px;height:42px;border-radius:var(--r-s);border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:border-color .12s,background .12s}
.bot-emoji-chip:hover{background:var(--surface-3)}
.bot-emoji-chip.sel{border-color:var(--accent);background:var(--accent-soft)}
.bot-cmd-head{display:grid;grid-template-columns:1fr 2fr 32px;gap:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-3);padding:0 2px 4px}
.bot-cmd-row,.bot-rrmap-row,.bot-reward-row{display:grid;gap:8px;align-items:center;margin-bottom:8px}
.bot-cmd-row{grid-template-columns:1fr 2fr 32px}
.bot-rrmap-row{grid-template-columns:80px 18px 1fr 32px}
.bot-reward-row{grid-template-columns:48px 80px 1fr 32px}
.bot-cmd-row input,.bot-rrmap-row select,.bot-reward-row input,.bot-reward-row select{padding:8px 10px;border-radius:var(--r-s);border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:13px;width:100%}
.bot-reward-row .brw-lbl{font-size:13px;color:var(--text-3)}
.bot-rrmap-row .rr-arrow{text-align:center}
.bcmd-del,.brr-del,.brw-del,.bslash-del{color:var(--text-3)}
.bcmd-del:hover,.brr-del:hover,.brw-del:hover,.bslash-del:hover{color:var(--red)}

.bslash-head{grid-template-columns:1fr 2fr 32px}
.bslash-row{grid-template-columns:1fr 2fr 32px}
.bslash-row{position:relative}
.bslash-row .bslash-pre{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:13px;pointer-events:none}
.bslash-row .bslash-trig{padding-left:20px!important}
.bslash-row input{padding:8px 10px;border-radius:var(--r-s);border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:13px;width:100%}

.bot-builder{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.bot-divider{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-3);margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--border)}
.bot-panel-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border:1px solid var(--border);border-radius:var(--r-m);background:var(--surface-2);margin-bottom:8px}
.bpi-sub{font-size:12px;color:var(--text-3);margin-top:2px}
.bot-lb{display:flex;flex-direction:column;gap:2px}
.bot-lb-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-s)}
.bot-lb-row:nth-child(odd){background:var(--surface-2)}
.lb-rank{font-weight:700;color:var(--text-3);width:30px}
.lb-av{width:26px;height:26px;font-size:11px;border-radius:50%}
.lb-name{flex:1;font-weight:600;color:var(--text)}
.lb-lvl{font-size:12px;font-weight:700;color:var(--accent)}
.lb-xp{font-size:12px;color:var(--text-3);width:72px;text-align:right}
#bot-body textarea{width:100%;padding:9px 11px;border-radius:var(--r-s);border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:14px;resize:none}

#bot-body input[type=text],#bot-body input[type=number],#bot-body input:not([type]){
  width:100%;padding:9px 11px;border-radius:var(--r-s);border:1px solid var(--border);
  background:var(--surface);color:var(--text);font:inherit;font-size:14px}
#bot-body input::placeholder,#bot-body textarea::placeholder{color:var(--text-3)}
#bot-body input:focus,#bot-body textarea:focus,#bot-body select:focus,#bot-body input[type=color]:focus{outline:none;border-color:var(--accent)}
#bot-body input[type=color]{width:48px;height:34px;padding:2px;border:1px solid var(--border);border-radius:var(--r-s);background:var(--surface);cursor:pointer}
.control-card{border-left-color:var(--accent)}
.bot-warn{font-size:12.5px;color:#caa24a;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.32);border-radius:var(--r-s);padding:8px 11px;margin:0 0 12px;line-height:1.5}
.bot-hint{font-size:12px;color:var(--text-3);margin-top:6px;line-height:1.5}
.bot-role-note{flex-basis:100%;width:100%;font-size:12px;color:var(--text-3);margin-top:8px;line-height:1.5}

.bot-card{position:relative}
.bot-card-del{position:absolute;top:8px;right:8px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border:none;border-radius:6px;background:var(--surface-3);color:var(--text-3);cursor:pointer;opacity:0;transition:opacity .12s,background .12s,color .12s;z-index:2}
.bot-card-del svg{width:15px;height:15px}
.bot-card:hover .bot-card-del{opacity:.85}
.bot-card-del:hover{opacity:1;background:var(--red);color:#fff}
.welcome-card .bot-card-del{background:rgba(0,0,0,.32);color:#fff}
.welcome-card:hover .bot-card-del{opacity:.9}


.app-row{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--border);border-radius:var(--r-m);background:var(--surface-2)}
.app-icon{width:48px;height:48px;border-radius:20px;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.app-icon svg{width:28px;height:28px}
.app-row-meta{flex:1;min-width:0}
.app-row-name{font-size:16px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:7px}
.app-row-sub{font-size:13px;color:var(--text-2);margin-top:2px}
.explore-card.app-card .app-banner{background:linear-gradient(120deg,var(--accent),#8b5cf6)}
.explore-card.app-card .app-icon{border-radius:20px}
.bot-pick-list{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto;margin:6px 0 4px}
.bot-pick-srv{display:flex;align-items:center;gap:11px;padding:9px 11px;border:1px solid var(--border);border-radius:var(--r-m);
  background:var(--surface-2);cursor:pointer;color:var(--text);font-weight:600;font-size:14px;text-align:left;width:100%}
.bot-pick-srv:hover{border-color:var(--accent);background:var(--surface-3)}
.bot-pick-srv .av{width:32px;height:32px;font-size:13px;flex:0 0 auto}
@media (max-width:680px){.bot-feat-grid,.bot-check-grid{grid-template-columns:1fr}.welcome-card .wc-av{width:80px;height:80px}.wc-title{font-size:20px}}


#btn-mic.recording{color:var(--danger,#e0452f)}
#btn-mic.recording svg{animation:cx-recpulse 1.1s ease-in-out infinite}
@keyframes cx-recpulse{0%,100%{opacity:1}50%{opacity:.35}}
#rec-bar,#clip-bar{display:flex;align-items:center;gap:10px;padding:7px 12px;margin:0 0 6px;border-radius:var(--r-m);background:var(--surface-2);border:1px solid var(--border);font-size:13px;color:var(--text)}
#rec-bar .rec-dot{width:10px;height:10px;border-radius:50%;background:var(--danger,#e0452f);flex:0 0 auto;animation:cx-recpulse 1.1s ease-in-out infinite}
#rec-bar .rec-label{font-weight:600}
#rec-bar #rec-time{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.8}
#rec-bar #rec-stop{padding:4px 12px}
#clip-bar .clip-bar-kind{font-weight:600}
#clip-bar #clip-dur{opacity:.7;font-variant-numeric:tabular-nums}
#clip-bar .clip-preview{margin-left:auto;display:flex;align-items:center}
#clip-bar .clip-preview audio{height:34px;max-width:min(240px,60vw)}
#clip-bar .clip-preview .clip-prev-vid{max-height:96px;border-radius:20px}
#clip-bar #clip-cancel{flex:0 0 auto}
.clip-bubble{margin:4px 0;max-width:min(420px,100%)}
.clip-bubble.clip-voice{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-m);min-width:0}

.clip-voice .clip-play{flex:0 0 auto;width:38px;height:38px;padding:0;border:none;border-radius:50%;cursor:pointer;
  background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center}
.clip-voice .clip-play svg{width:20px;height:20px}
.clip-voice .clip-play .ic-pause{display:none}
.clip-voice.playing .clip-play .ic-play{display:none}
.clip-voice.playing .clip-play .ic-pause{display:block}

.clip-voice .clip-wave{position:relative;display:flex;align-items:center;justify-content:space-between;gap:2px;height:28px;flex:1 1 auto;min-width:0;max-width:240px;overflow:hidden;cursor:pointer}
.clip-voice .clip-wave span{flex:1 1 0;min-width:1px;max-width:3px;border-radius:2px;background:var(--text-3);opacity:.55}
.clip-voice .clip-scrub{position:absolute;left:0;top:0;bottom:0;width:var(--clip-prog,0%);background:var(--accent);opacity:.22;pointer-events:none}
.clip-voice .clip-dur{font-size:12px;color:var(--text-2);font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:32px;text-align:right}
.clip-voice .clip-audio{display:none}
.clip-bubble.clip-video .clip-vid{max-width:100%;max-height:320px;border-radius:20px;background:#000;display:block}


.file-media{margin:4px 0;max-width:min(420px,100%)}
.file-media .file-vid{max-width:100%;max-height:320px;border-radius:20px;background:#000;display:block}
.file-media audio{width:min(360px,100%);margin-top:2px}
.file-chip{display:inline-flex;align-items:center;gap:10px;margin:4px 0;padding:9px 12px;max-width:min(360px,100%);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-m);text-decoration:none;color:var(--text);
  transition:background .12s,border-color .12s}
.file-chip:hover{background:var(--surface-3);border-color:var(--accent)}
.file-chip .file-ic{flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:20px;background:var(--accent-soft);color:var(--accent)}
.file-chip .file-ic svg{width:20px;height:20px}
.file-chip .file-meta{display:flex;flex-direction:column;min-width:0}
.file-chip .file-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-chip .file-size{font-size:11.5px;color:var(--text-3)}
.file-chip .file-dl{flex:0 0 auto;margin-left:auto;color:var(--text-3)}
.file-chip .file-dl svg{width:18px;height:18px}
.file-chip:hover .file-dl{color:var(--accent)}


.call-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.68)}
.call-overlay.hidden{display:none}
.call-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:30px 34px;min-width:268px;max-width:92vw;text-align:center;box-shadow:0 18px 60px rgba(0,0,0,.4);animation:callpop .16s ease-out}
@keyframes callpop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.call-av{display:flex;justify-content:center;margin-bottom:14px}
.call-av .av.xl{width:84px;height:84px;font-size:32px}
.call-peer{font-size:20px;font-weight:600;color:var(--text);margin-bottom:4px;word-break:break-word}
.call-status{font-size:13px;color:var(--text-2)}
.call-timer{font-size:14px;color:var(--text-2);font-variant-numeric:tabular-nums;margin-top:4px}
.call-timer.hidden{display:none}
.call-actions{display:flex;gap:18px;justify-content:center;margin-top:22px}
.call-btn{width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .1s ease,filter .1s ease}
.call-btn svg{width:24px;height:24px}
.call-btn:hover{filter:brightness(1.08)}
.call-btn:active{transform:scale(.93)}
.call-btn.hidden{display:none}
.call-accept{background:var(--green-dot,#34a853)}
.call-mute{background:var(--surface-3);color:var(--text)}
.call-mute.on{background:var(--accent);color:var(--on-accent)}
.call-hangup{background:var(--red,#d93025)}

#call-audio{display:none!important}

@media (max-width:600px){
  .call-card{width:100%;max-width:none;min-width:0;height:100%;border:none;border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;box-shadow:none}
  .call-av .av.xl{width:96px;height:96px;font-size:36px}
  .call-actions{gap:26px;margin-top:30px}
  .call-btn{width:62px;height:62px}
  .call-btn svg{width:26px;height:26px}
}

.call-rec .sys-line{justify-content:center}
.call-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;background:var(--surface-2);color:var(--text-2);font-size:12.5px;font-weight:500}
.call-pill svg{opacity:.8}
.call-pill-missed{background:var(--red-soft);color:var(--red)}


.channel.voice .vc-ico{color:var(--text-3);display:inline-flex}
.channel.voice .vc-ico svg{width:18px;height:18px}
.channel.voice.vc-on{background:var(--accent-soft)}
.channel.voice.vc-on .cname,.channel.voice.vc-on .vc-ico{color:var(--accent)}
.channel.voice .vc-count{margin-left:auto;font-size:11px;font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums;padding:1px 7px;border-radius:20px;background:var(--surface-2);flex:0 0 auto}
.channel.voice .cact{margin-left:6px}
.vc-roster{display:flex;flex-direction:column;gap:1px;margin:0 0 5px 24px}
.vc-member{display:flex;align-items:center;gap:8px;padding:3px 8px;border-radius:var(--r-s);color:var(--text-2);font-size:13px}
.vc-member .vc-av{flex:0 0 auto;display:inline-flex}
.vc-member .vc-av .av{width:20px;height:20px;font-size:9px}
.vc-member .vc-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-member.me .vc-nm{color:var(--text);font-weight:600}

#voice-bar{display:flex;align-items:center;gap:8px;margin:6px 11px 0;padding:7px 10px;border:1px solid var(--border-soft);border-radius:20px;background:var(--surface-2);flex:0 0 auto}
#voice-bar.hidden{display:none}
#voice-bar .vb-info{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
#voice-bar .vb-ico{width:20px;height:20px;color:var(--green-dot,#34a853);flex:0 0 auto}
#voice-bar .vb-meta{min-width:0}
#voice-bar .vb-status{font-size:12px;font-weight:700;color:var(--green,#188038);line-height:1.2}
#voice-bar .vb-chan{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#voice-bar .vb-actions{display:flex;gap:4px;flex:0 0 auto}
#voice-bar .icon-btn{width:30px;height:30px}
#voice-bar #vb-mute.on{color:var(--accent)}
#voice-bar .vb-leave{color:var(--red,#d93025)}

.cc-type{display:flex;gap:8px;margin-bottom:14px}
.cc-type-opt{flex:1;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-m);background:var(--surface);cursor:pointer;text-align:left;transition:border-color .12s,background .12s}
.cc-type-opt:hover{background:var(--surface-2)}
.cc-type-opt.active{border-color:var(--accent);background:var(--accent-soft)}
.cc-type-opt svg{width:22px;height:22px;color:var(--text-2);flex:0 0 auto}
.cc-type-opt.active svg{color:var(--accent)}
.cc-type-opt .t{display:block;font-size:14px;font-weight:600;color:var(--text)}
.cc-type-opt .d{display:block;font-size:11.5px;color:var(--text-3)}

.ctx-menu .menu-head{padding:8px 12px 4px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
.ctx-menu .menu-item.on{color:var(--accent)}
.ctx-menu .menu-item.on .mi-ic svg{width:15px;height:15px}




.bot-tag.app-tag{background:#8b5cf6;color:#fff}


.srv-topbar{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13.5px;font-weight:600;
  line-height:1.4;flex:0 0 auto;min-width:0;position:relative;z-index:2}
.srv-topbar .srv-topbar-text{flex:1;min-width:0;overflow-wrap:anywhere}
.srv-topbar-x{flex:0 0 auto;width:24px;height:24px;border:0;border-radius:6px;display:inline-flex;
  align-items:center;justify-content:center;background:rgba(0,0,0,.16);color:inherit;cursor:pointer;opacity:.85;
  transition:opacity .12s,background .12s}
.srv-topbar-x:hover{opacity:1;background:rgba(0,0,0,.28)}
.srv-topbar-x svg{width:16px;height:16px}
.srv-topbar.hidden{display:none}

@media (max-width:980px){#srv-topbar{display:none!important}}
@media (min-width:981px){#srv-topbar-m{display:none!important}}

.srv-topbar-static{display:flex!important;border-radius:var(--r-s)}


.srv-popup-head{display:flex;justify-content:center;margin:4px 0 14px}
.srv-popup-head .av{width:72px;height:72px;font-size:28px;border-radius:50%}
.srv-popup-title{font-size:22px;font-weight:700;text-align:center;margin:0 0 10px;line-height:1.25;word-break:break-word}
.srv-popup-body{font-size:14.5px;color:var(--text-2);line-height:1.6;text-align:center;white-space:pre-wrap;
  word-break:break-word;margin:0}
.srv-popup-body.hidden{display:none}
.srv-popup-foot{margin-top:16px;text-align:center;font-size:12px;color:var(--text-3);
  border-top:1px solid var(--border-soft);padding-top:12px}


.np-preview{margin-top:4px}
.np-wel-card{border:1px solid var(--border);border-radius:var(--r-m);background:var(--surface-2);padding:20px;text-align:center}
.np-wel-icon{display:flex;justify-content:center;margin-bottom:10px}
.np-wel-icon .av{width:56px;height:56px;font-size:22px;border-radius:50%}
.np-wel-title{font-size:18px;font-weight:700;margin-bottom:6px;word-break:break-word}
.np-wel-body{font-size:13.5px;color:var(--text-2);line-height:1.55;white-space:pre-wrap;word-break:break-word}
.np-wel-foot{margin-top:12px;font-size:11.5px;color:var(--text-3);border-top:1px solid var(--border-soft);padding-top:10px}


.ma-grid{display:grid;grid-template-columns:1fr 260px;gap:28px;align-items:start}
@media (max-width:880px){.ma-grid{grid-template-columns:1fr;gap:18px}}
.ma-side .sp-side-label{margin-bottom:10px}
.ma-preview{border:1px solid var(--border-soft);border-radius:var(--r-m);background:var(--surface-2);padding:12px}
.ma-pv-row{display:flex;gap:12px}
.ma-pv-row > .av{width:38px;height:38px;flex:0 0 auto}
.ma-pv-main{flex:1;min-width:0}
.ma-pv-head{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.ma-pv-name{font-weight:600;font-size:14px}
.ma-pv-text{font-size:14px;color:var(--text);line-height:1.5;white-space:pre-wrap;word-break:break-word}


.app-embed{border-left:4px solid var(--accent);background:var(--surface-3);border-radius:4px;
  padding:10px 14px;margin-top:4px;max-width:520px}
.app-embed-title{font-weight:700;font-size:15px;margin-bottom:4px;color:var(--text);word-break:break-word}
.app-embed-desc{font-size:14px;color:var(--text);line-height:1.5;word-break:break-word}
.app-embed-empty{color:var(--text-3);font-style:italic}
.app-embed-ping{margin:2px 0 6px}


.changelog-list{display:flex;flex-direction:column;gap:18px;margin-top:2px}
.cl-entry{border-left:3px solid var(--accent);padding-left:14px}
.cl-ver{font-size:13px;font-weight:700;color:var(--text);margin-bottom:6px;letter-spacing:.2px}
.changelog-list ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin:0;padding:0}
.changelog-list li{position:relative;padding-left:16px;font-size:13.5px;color:var(--text-2);line-height:1.5}
.changelog-list li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--text-3)}
.changelog-list b{color:var(--text);font-weight:600}


.mb{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;flex-direction:column;
  animation:mbIn .2s var(--ease)}
@keyframes mbIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mb-top{display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 12px 12px;flex:0 0 auto}
.mb-back{flex:0 0 auto;width:38px;height:38px}
.mb-search{flex:1;display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;border-radius:20px;min-width:0;
  background:var(--surface-2);border:1px solid var(--border-soft)}
.mb-search-ic{width:18px;height:18px;color:var(--text-3);flex:0 0 auto}
.mb-ctx{display:inline-flex;align-items:center;gap:2px;color:var(--text-2);font-size:14.5px;white-space:nowrap;flex:0 0 auto}
.mb-ctx .hash{color:var(--text-3)}
.mb-ctx .mb-ch{color:var(--text);max-width:38vw;overflow:hidden;text-overflow:ellipsis}
.mb-search input{flex:1;min-width:0;border:none;outline:none;background:transparent;color:var(--text);font-size:15px;height:100%}
.mb-search input::placeholder{color:var(--text-3)}
.mb-filter{flex:0 0 auto;width:38px;height:38px}
.mb-tabs{display:flex;align-items:center;gap:2px;padding:2px 8px 0;overflow-x:auto;scrollbar-width:none;flex:0 0 auto;
  border-bottom:1px solid var(--border-soft)}
.mb-tabs::-webkit-scrollbar{display:none}
.mb-tab{flex:0 0 auto;height:44px;padding:0 14px;background:transparent;border:none;cursor:pointer;position:relative;
  color:var(--text-2);font-size:16px;font-weight:600;white-space:nowrap}
.mb-tab.active{color:var(--accent)}
.mb-tab.active::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--accent)}
.mb-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:18px 14px calc(20px + env(safe-area-inset-bottom))}
.mb-empty{padding:48px 16px;text-align:center;color:var(--text-3);font-size:14px;line-height:1.5}

.mb-invite{display:flex;align-items:center;gap:16px;width:100%;padding:18px 16px;margin-bottom:22px;border:none;
  border-radius:20px;background:var(--surface-2);color:var(--text);cursor:pointer;text-align:left}
.mb-invite:active{background:var(--surface-3)}
.mb-invite-ic{width:28px;height:28px;color:var(--text);flex:0 0 auto}
.mb-invite-ic svg{width:28px;height:28px}
.mb-invite-tx{flex:1;font-size:15px;font-weight:400}
.mb-invite-chev{width:22px;height:22px;color:var(--text-3);flex:0 0 auto}

.mb-body .mgroup{margin-bottom:22px}
.mb-body .mgroup h4{font-size:14px;font-weight:600;color:var(--text-2);margin:0 6px 8px;text-transform:none;letter-spacing:0}
.mb-body .mgroup .member{background:var(--surface-2);border-radius:0;padding:13px 14px;margin:0;gap:14px}
.mb-body .mgroup .member .av{width:42px;height:42px;font-size:16px}
.mb-body .mgroup .member:first-of-type{border-radius:16px 16px 0 0}
.mb-body .mgroup .member:last-of-type{border-radius:0 0 16px 16px}
.mb-body .mgroup .member:only-of-type{border-radius:20px}
.mb-body .mgroup .member + .member{border-top:1px solid var(--border-soft)}

.mb-media{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.mb-media-cell{aspect-ratio:1;border:none;padding:0;border-radius:20px;overflow:hidden;background:var(--surface-2);cursor:pointer}
.mb-media-cell img{width:100%;height:100%;object-fit:cover;display:block}
.mb-media-clip{display:flex;align-items:center;justify-content:center;color:var(--text-2)}
.mb-media-clip svg{width:34px;height:34px}

.mb-link{display:block;padding:13px 15px;border-radius:20px;background:var(--surface-2);margin-bottom:9px;text-decoration:none}
.mb-link:active{background:var(--surface-3)}
.mb-link-url{color:var(--accent);font-size:14.5px;word-break:break-all;line-height:1.4}
.mb-link-by{color:var(--text-3);font-size:12px;margin-top:5px}

.mb-file{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:20px;background:var(--surface-2);margin-bottom:9px;text-decoration:none}
.mb-file:active{background:var(--surface-3)}
.mb-file-ic{width:36px;height:36px;flex:0 0 auto;color:var(--text-2);display:flex;align-items:center;justify-content:center}
.mb-file-ic svg{width:28px;height:28px}
.mb-file-meta{min-width:0;display:flex;flex-direction:column}
.mb-file-name{color:var(--text);font-size:14.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-file-by{color:var(--text-3);font-size:12px;margin-top:3px}

.mb-body .pin-card{background:var(--surface-2);border-radius:20px;margin-bottom:9px;padding:12px 14px}




.beta-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--accent-soft);
  color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;vertical-align:middle}


.mfull{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;background:var(--bg);animation:mbIn .22s var(--ease)}

#m-you.mfull{animation:sheetUp .3s var(--ease)}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}

.mfull-bar{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding:10px 10px 8px}
.mfull-bar .icon-btn{width:38px;height:38px}
.mfull-spacer{flex:1}
.mfull-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(22px + env(safe-area-inset-bottom))}


.mp-id{padding:6px 18px 0}
.mp-av{position:relative;display:inline-block}
.mp-av .av{width:84px;height:84px;font-size:32px}
.mp-av .dot{position:absolute;right:2px;bottom:2px;width:20px;height:20px;border-radius:50%;border:4px solid var(--bg);box-sizing:content-box}
.mp-id-name{margin-top:12px;font-size:23px;font-weight:800;line-height:1.2;color:var(--text);word-break:break-word}
.mp-id-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;color:var(--text-2);font-size:14px}
.mp-id-handle{font-weight:500}
.mp-id-sub .pp-badges{display:inline-flex;gap:4px;margin:0}
.mp-edit{width:100%;height:44px;margin-top:16px;border-radius:var(--r-m);font-size:15px;font-weight:600}

.mp-status{padding:18px 18px 0}
.mp-status:empty{display:none}
.mp-sect{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-3);margin:0 2px 9px}
.mp-st-card{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:20px;overflow:hidden}
.mp-st-opt{display:flex;align-items:center;gap:12px;width:100%;padding:13px 15px;background:none;border:0;font:inherit;font-size:15.5px;font-weight:500;color:var(--text);text-align:left;cursor:pointer;transition:background .12s var(--ease)}
.mp-st-opt + .mp-st-opt{border-top:1px solid var(--border-soft)}
.mp-st-opt:active{background:var(--surface-3)}
.mp-st-opt .sdot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.mp-st-lbl{flex:1;min-width:0}
.mp-st-check{flex:0 0 auto;display:flex;align-items:center;color:var(--accent)}
.mp-st-check svg{width:18px;height:18px}
.mp-cs{display:flex;align-items:stretch;margin-top:10px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:20px;overflow:hidden}
.mp-cs-edit{flex:1;min-width:0;display:flex;align-items:center;gap:11px;padding:13px 15px;background:none;border:0;font:inherit;font-size:15px;font-weight:500;text-align:left;cursor:pointer;transition:background .12s var(--ease)}
.mp-cs-edit:active{background:var(--surface-3)}
.mp-cs-ic{flex:0 0 auto;display:flex;align-items:center;color:var(--text-3)}
.mp-cs-ic svg{width:18px;height:18px}
.mp-cs-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.mp-cs-txt.set{color:var(--text)}
.mp-cs-clear{flex:0 0 auto;width:48px;display:flex;align-items:center;justify-content:center;background:none;border:0;border-left:1px solid var(--border-soft);color:var(--text-3);cursor:pointer;transition:background .12s var(--ease),color .12s var(--ease)}
.mp-cs-clear:active{background:var(--surface-3);color:var(--red)}
.mp-cs-clear svg{width:18px;height:18px}

.mp-showfriends{display:flex;align-items:center;gap:11px;width:calc(100% - 36px);margin:16px 18px 0;padding:13px 15px;
  background:var(--surface-2);border:1px solid var(--border-soft);border-radius:20px;
  font:inherit;font-size:15.5px;font-weight:600;color:var(--text);text-align:left;cursor:pointer;
  transition:background .12s var(--ease)}
.mp-showfriends:active{background:var(--surface-3)}
.mp-showfriends > svg:first-child{flex:0 0 auto;width:19px;height:19px;color:var(--text-3)}
.mp-sf-lbl{flex:1;min-width:0}
.mp-sf-chev{flex:0 0 auto;width:18px;height:18px;color:var(--text-3);transition:transform .18s var(--ease)}
.mp-showfriends.open .mp-sf-chev{transform:rotate(180deg)}
html[data-motion="off"] .mp-sf-chev{transition:none}
.mp-tabs{display:flex;gap:26px;padding:10px 18px 0;margin-top:10px;border-bottom:1px solid var(--border-soft)}

.mp-tab-add{margin-left:auto;color:var(--accent)}
.mp-tab{position:relative;background:none;border:0;padding:10px 0;font:inherit;font-size:15px;font-weight:600;color:var(--text-3);cursor:pointer}
.mp-tab.active{color:var(--text)}
.mp-tab.active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2.5px;border-radius:3px;background:var(--accent)}
.mp-pill{margin-left:7px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:700}
.mp-pill.hidden{display:none}
.you-list{padding:10px 12px}
.you-list .fr-label{margin:10px 4px 4px;font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--text-3);text-transform:uppercase}
.you-list .fr-empty{padding:34px 12px;text-align:center;color:var(--text-3);font-size:14px}


.ms-banner{height:170px;flex:0 0 auto;background:var(--surface-2);background-size:cover;background-position:center;background-repeat:no-repeat}
.ms-head{position:relative;padding:0 18px calc(10px + env(safe-area-inset-bottom))}
.ms-icon{width:74px;height:74px;margin-top:-30px;border-radius:20px;border:5px solid var(--bg);background:var(--surface-3);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:26px;font-weight:700;color:#fff;box-shadow:var(--sh-2)}
.ms-icon img{width:100%;height:100%;object-fit:cover}
.ms-name{margin:12px 0 0;font-size:23px;font-weight:800;line-height:1.2;color:var(--text);word-break:break-word}
.ms-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:9px;color:var(--text-2);font-size:13px}

.ms-type{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:var(--surface-2);font-size:12.5px;font-weight:600}
.ms-type svg{width:14px;height:14px;flex:0 0 auto}
.ms-type.pub{color:#3b82f6}
.ms-type.priv{color:var(--text-2)}
.ms-type.lock{color:#e0823d}
.ms-stat{display:inline-flex;align-items:center;gap:6px}
.ms-stat i{width:8px;height:8px;border-radius:50%;background:var(--text-3);display:inline-block}
.ms-stat.online i{background:var(--green-dot)}
.ms-desc{margin:13px 0 0;color:var(--text-2);font-size:14.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.ms-desc:empty{display:none}

.ms-actions{display:flex;gap:10px;margin-top:22px}
.ms-act{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:20px;padding:14px 6px 12px;font:inherit;color:var(--text-2);cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease)}
.ms-act:active{background:var(--surface-3);border-color:var(--border)}
.ms-act .ms-act-ic{width:44px;height:44px;border-radius:50%;background:var(--surface-3);display:flex;align-items:center;justify-content:center;transition:background .15s var(--ease)}
.ms-act:active .ms-act-ic{background:var(--surface-2)}
.ms-act .ms-act-ic svg{width:23px;height:23px}
.ms-act.on .ms-act-ic{background:var(--accent);color:var(--on-accent)}
.ms-act-lbl{font-size:12.5px;font-weight:600;color:var(--text-2)}


.srvsheet{position:fixed;inset:0;z-index:96}
.srvsheet.hidden{display:none}
.srvsheet-scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .26s var(--ease)}
.srvsheet.show .srvsheet-scrim{opacity:1}
.srvsheet-card{position:absolute;left:0;right:0;bottom:0;height:80dvh;max-height:80dvh;background:var(--bg);
  border-radius:20px 20px 0 0;overflow:hidden;display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .3s var(--ease);will-change:transform;
  box-shadow:0 -8px 30px rgba(0,0,0,.4);padding-bottom:env(safe-area-inset-bottom)}
.srvsheet.show .srvsheet-card{transform:none}
.srvsheet-grab{position:absolute;top:9px;left:50%;margin-left:-20px;z-index:3;width:40px;height:5px;
  border-radius:999px;background:rgba(255,255,255,.75);pointer-events:none}
.srvsheet-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
@media (min-width:981px){ .srvsheet{display:none!important} }


#verify-screen{position:fixed;inset:0;z-index:140;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;overflow-y:auto;
  padding:calc(34px + env(safe-area-inset-top)) 26px calc(34px + env(safe-area-inset-bottom))}
#verify-screen.hidden{display:none}
.vs-inner{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;
  animation:cardIn .35s var(--ease)}
.vs-mark{width:74px;height:74px;border-radius:20px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;box-shadow:var(--sh-1)}
.vs-mark svg{width:36px;height:36px}
.vs-title{font-size:24px;font-weight:700;margin-bottom:10px}
.vs-sub{color:var(--text-2);font-size:14.5px;line-height:1.6;margin-bottom:22px}
.vs-sub b{color:var(--text);font-weight:600;word-break:break-word}
#verify-screen .form-err{width:100%}
#verify-screen .dev-code{width:100%;margin-bottom:14px}
#vs-code{width:100%;height:60px;margin-bottom:16px;padding:0 14px;border:1px solid var(--border);
  border-radius:var(--r-m);background:var(--surface);color:var(--text);outline:none;appearance:none;
  transition:border-color .15s,box-shadow .15s}
#vs-code:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.vs-go{width:100%;height:48px;font-size:15px;margin-bottom:8px}
.vs-resend{padding:10px;font-size:14px}
.vs-switch{margin-top:14px;padding:8px;color:var(--text-3);font-size:13px;font-weight:500;cursor:pointer;
  background:none;border:0;font-family:inherit}
.vs-switch:hover{color:var(--text-2)}
@media (min-width:981px){ #verify-screen{display:none!important} }


.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:75;background:var(--surface);border-top:1px solid var(--border-soft);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 14px rgba(0,0,0,.18)}
.tab-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:54px;background:none;border:0;font:inherit;color:var(--text-3);cursor:pointer;-webkit-tap-highlight-color:transparent}
.tab-ic{position:relative;display:flex;align-items:center;justify-content:center}
.tab-ic svg{width:24px;height:24px;display:block}
.tab-lbl{font-size:10.5px;font-weight:600;letter-spacing:.1px}
.tab-btn.active{color:var(--accent)}
.tab-badge{position:absolute;top:-5px;right:-9px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--surface)}
.tab-badge.hidden{display:none}

.tab-av{width:26px;height:26px;border-radius:50%;overflow:hidden;border:2px solid transparent;box-sizing:border-box}
.tab-av .av{width:100%;height:100%;font-size:11px}
.tab-profile.active .tab-av{border-color:var(--accent)}


.mfull-title{flex:0 0 auto;font-size:17px;font-weight:700;color:var(--text)}
.srvlist{padding:8px 10px}
.srvl-row{display:flex;align-items:center;gap:13px;width:100%;padding:9px 12px;border-radius:20px;background:none;border:0;font:inherit;text-align:left;color:var(--text);cursor:pointer}
.srvl-row:active,.srvl-row.active{background:var(--surface-2)}
.srvl-ic{width:46px;height:46px;flex:0 0 auto;border-radius:20px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;font-size:16px;font-weight:700}
.srvl-ic img{width:100%;height:100%;object-fit:cover}
.srvl-ic.alt{background:var(--surface-3);color:var(--accent)}
.srvl-ic.alt svg{width:24px;height:24px}
.srvl-name{flex:1;min-width:0;font-size:15.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srvl-badge{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.srvl-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--text)}
.srvl-empty{padding:30px 14px;text-align:center;color:var(--text-3)}


.ms-extra{margin-top:18px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:20px;overflow:hidden}
.ms-xrow{display:flex;align-items:center;gap:13px;width:100%;padding:15px 16px;background:none;border:0;font:inherit;font-size:15px;font-weight:500;text-align:left;color:var(--text);cursor:pointer;transition:background .12s var(--ease)}
.ms-xrow + .ms-xrow{border-top:1px solid var(--border-soft)}
.ms-xrow:active{background:var(--surface-3)}
.ms-xrow.danger{color:var(--red)}
.ms-xic{width:24px;height:24px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.ms-xic svg{width:22px;height:22px}


#home-msg-head{padding:14px 14px 8px}
#home-msg-head.hidden{display:none}
.hm-title{margin:0 0 12px;font-size:18px;font-weight:400;color:var(--text)}
.hm-actions{display:flex;align-items:center;gap:10px}

@media (max-width:980px){
  #home-msg-head{display:flex;align-items:center;gap:12px}
  #home-msg-head .hm-title{margin:0;flex:0 0 auto}
  #home-msg-head .hm-actions{flex:1;min-width:0;justify-content:flex-end}
}
.hm-search{width:44px;height:44px;flex:0 0 auto;background:var(--surface-2);border-radius:50%}

.hm-addfriends{position:relative;width:44px;height:44px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:var(--accent);color:var(--on-accent);cursor:pointer}
.hm-addfriends svg{width:20px;height:20px}
.hm-fr-badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:20px;
  background:var(--red);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}


@media (min-width:981px){ .mfull,.tabbar{display:none!important} }

@media (max-width:980px){
  
  .mfull{top:var(--store-h)}
  
  body.tabbar-show #tabbar{display:flex}
  
  body.tabbar-show #explore-view,
  body.tabbar-show .fr-body,
  body.tabbar-show #rail,
  body.tabbar-show #sidebar,
  body.tabbar-show #members{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  
  body.tabbar-show #rail::after{flex-basis:0}
  
  html[data-tabbar="on"] #rail{display:none}
  html[data-tabbar="on"] #sidebar{left:0;width:100%}
  html[data-tabbar="on"] #user-panel{display:none}
  
  
  body.tabbar-show #m-you,
  body.tabbar-show #m-servers{bottom:calc(54px + env(safe-area-inset-bottom))}
}


@media (max-width:980px){

  
  .checkrow input[type=checkbox]::after,
  .pf-badge-cb::after,
  .bot-switch .bsw::after{
    background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.35),
               inset 0 0 0 .5px rgba(255,255,255,.45);
  }
  
  body:not(.dark) .checkrow input[type=checkbox]::after,
  body:not(.dark) .pf-badge-cb::after,
  body:not(.dark) .bot-switch .bsw::after{
    box-shadow:0 1px 3px rgba(0,0,0,.3),
               inset 0 0 0 .5px rgba(20,22,28,.12);
  }

  
  .mb-search{
    background:var(--surface-2);
    border-color:rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15),
               inset 0 -1px 0 rgba(255,255,255,.04),
               0 6px 20px rgba(0,0,0,.18);
  }
  .mb-search:focus-within{
    border-color:rgba(255,255,255,.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
               0 6px 22px rgba(0,0,0,.22),
               0 0 0 2px var(--accent-soft);
  }
  
  body:not(.dark) .mb-search{
    background:var(--surface-2);
    border-color:rgba(20,22,28,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
               0 6px 18px rgba(0,0,0,.08);
  }
  body:not(.dark) .mb-search:focus-within{
    border-color:var(--accent);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
               0 0 0 2px var(--accent-soft);
  }
}



.mrow.thread-row{display:block;padding:6px 18px 10px 18px}
.thread-startline{display:flex;align-items:center;gap:7px;color:var(--text-3);font-size:13px;margin:2px 0 6px}
.thread-startline .ts-ico{display:inline-flex;width:17px;height:17px;color:var(--text-2);flex:none}
.thread-startline .ts-ico svg,.thread-startline .ts-ico .png-ic{width:17px;height:17px}
.thread-startline .ts-text{color:var(--text-2)}
.thread-startline .ts-text b{color:var(--text);font-weight:600}
.thread-startline .ts-all{color:var(--accent);cursor:pointer;font-weight:600}
.thread-startline .ts-all:hover{text-decoration:underline}
.thread-startline .sys-time{margin-left:auto;color:var(--text-3);font-size:11px}
.thread-card-open{display:flex;align-items:flex-start;gap:10px;width:100%;max-width:460px;text-align:left;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-m);padding:10px 12px;cursor:pointer;
  transition:background .12s,border-color .12s}
.thread-card-open:hover{background:var(--surface-3);border-color:var(--accent)}
.thread-card-open .tc-ico{display:inline-flex;width:20px;height:20px;color:var(--accent);flex:none;margin-top:1px}
.thread-card-open .tc-ico svg{width:20px;height:20px}
.thread-card-open .tc-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.thread-card-open .tc-title{font-weight:600;color:var(--text);font-size:14px}
.thread-card-open .tc-count{color:var(--accent);font-size:12.5px;font-weight:600}
.thread-card-open .tc-last{font-size:12.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.thread-card-open .tc-last-name{color:var(--text-2);font-weight:600}


#thread-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:79}
#thread-scrim.hidden{display:none}
#thread-panel{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:100vw;z-index:80;
  background:var(--bg);border-left:1px solid var(--border);box-shadow:var(--sh-3);display:flex;flex-direction:column}
#thread-panel.hidden{display:none}
.th-top{display:flex;align-items:center;gap:8px;height:49px;padding:0 8px 0 14px;border-bottom:1px solid var(--border);flex:none}
.th-top .th-spiral{display:inline-flex;width:18px;height:18px;color:var(--text-2);flex:none}
.th-top .th-spiral svg{width:18px;height:18px}
.th-top .th-title{font-weight:600;color:var(--text);font-size:15px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-top .th-x{margin-left:auto}
.th-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}

.th-create{padding:18px 16px}
.th-bigicon{width:64px;height:64px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;
  color:var(--text-2);margin:6px auto 20px}
.th-bigicon svg,.th-bigicon .png-ic{width:30px;height:30px}
.th-flabel{display:block;font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:.3px;margin-bottom:6px}
#th-name{width:100%;height:40px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r-s);
  background:var(--surface);color:var(--text);font-family:inherit;font-size:14px;outline:none}
#th-name:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

.th-private-row{margin-top:16px}

.th-newbtn{display:flex;align-items:center;gap:7px;width:calc(100% - 24px);margin:12px;padding:9px 12px;border-radius:var(--r-s);
  background:var(--accent);color:var(--on-accent);font-weight:600;font-size:13.5px;cursor:pointer}
.th-newbtn svg{width:18px;height:18px}
.th-newbtn:hover{background:var(--accent-hover)}
.thr-list{padding:4px 8px 12px}
.thr-row{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:var(--r-s);cursor:pointer;transition:background .12s}
.thr-row:hover{background:var(--surface-2)}
.thr-name{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--text);font-size:14px;margin-bottom:3px}
.thr-name .th-lock{width:14px;height:14px;color:var(--text-3);flex:none}
.thr-last{display:block;font-size:12.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thr-last b{color:var(--text-2)}
.thr-last.thr-dim{font-style:italic;opacity:.8}
.thr-meta{display:block;font-size:11px;color:var(--text-3);margin-top:3px}
.th-empty{padding:28px 18px;text-align:center;color:var(--text-3);font-size:13.5px}

.th-msg{display:flex;gap:10px;padding:7px 14px}

.th-av-wrap .th-av{width:34px;height:34px;border-radius:50%;flex:none;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:13px}
.th-av-wrap .th-av img{width:100%;height:100%;object-fit:cover;display:block}
.th-mc{min-width:0;flex:1}
.th-mhead{display:flex;align-items:baseline;gap:7px;margin-bottom:1px}
.th-mhead .th-name{font-weight:600;color:var(--text);font-size:13.5px}
.th-mhead .th-time{color:var(--text-3);font-size:10.5px}
.th-mtext{color:var(--text);font-size:14px;line-height:1.4;word-wrap:break-word;overflow-wrap:anywhere}
.th-img{max-width:280px;max-height:240px;border-radius:var(--r-s);margin-top:4px;display:block}

.th-composer{flex:none;padding:8px 12px 12px}
.th-pill{display:flex;align-items:flex-end;gap:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-m);padding:5px 6px 5px 12px}
.th-pill:focus-within{border-color:var(--accent)}
#th-input{flex:1;min-width:0;max-height:120px;border:0;background:transparent;color:var(--text);font-family:inherit;font-size:14px;
  resize:none;outline:none;padding:6px 0;line-height:1.35}
#th-send{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;flex:none}
#th-send svg{width:18px;height:18px}
#th-send:disabled{opacity:.45;cursor:default}
#th-send:not(:disabled):hover{background:var(--accent-hover)}
@media (max-width:760px){
  #thread-panel{width:100vw;border-left:0}
  
  .th-top{padding:0 8px;gap:4px}
  .th-top .th-x{order:-2;margin-left:0}
  .th-top .th-back{order:-1}
  .th-top .th-spiral{display:none}
  
  #thread-panel.th-creating .th-body{display:flex;flex-direction:column}
  #thread-panel.th-creating .th-create{margin:auto 0;width:100%}
}


.link-embed{display:grid;grid-template-columns:1fr;gap:5px;max-width:460px;margin:6px 0 2px;
  padding:10px 12px 10px 13px;background:var(--surface-2);border-radius:var(--r-m);
  border-left:4px solid var(--accent);position:relative}
.link-embed .le-site{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-embed .le-title{font-size:14px;font-weight:600;color:var(--accent);text-decoration:none;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.link-embed .le-title:hover{text-decoration:underline}
.link-embed .le-desc{font-size:13px;color:var(--text-2);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.link-embed .le-thumb{display:block;margin-top:4px;border-radius:var(--r-s);overflow:hidden;max-width:100%}
.link-embed .le-thumb img{display:block;width:100%;max-height:280px;object-fit:cover;border-radius:var(--r-s)}



.fwd-card{max-width:460px;margin:4px 0 2px;border-left:3px solid var(--border);padding:2px 0 2px 12px}
.fwd-head{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--text-3);margin-bottom:4px}
.fwd-head svg{width:14px;height:14px;transform:scaleX(-1)}
.fwd-content{display:flex;flex-direction:column;gap:3px}
.fwd-content .fwd-from{font-size:13px;font-weight:600;color:var(--text-2)}
.fwd-content .fwd-text{font-size:14px;color:var(--text);line-height:1.4;word-wrap:break-word;overflow-wrap:anywhere}
.fwd-content .fwd-img{max-width:280px;max-height:240px;border-radius:var(--r-s);margin-top:2px;display:block}
.fwd-src{display:inline-flex;align-items:center;gap:7px;margin-top:5px;padding:4px 9px 4px 5px;border-radius:999px;
  background:var(--surface-2);font-size:12px;color:var(--text-2);width:max-content;max-width:100%;border:1px solid transparent}
.fwd-src.jumpable{cursor:pointer}
.fwd-src.jumpable:hover{background:var(--surface-3);border-color:var(--accent);color:var(--text)}
.fwd-src .fwd-srv-ic{width:18px;height:18px;border-radius:6px;flex:none;overflow:hidden}
.fwd-src .fwd-srv-ic img{width:100%;height:100%;object-fit:cover}
.fwd-src .generic-ic{display:flex;align-items:center;justify-content:center;color:var(--text-3)}
.fwd-src .generic-ic svg{width:14px;height:14px}
.fwd-src .fwd-srv-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fwd-src.generic{cursor:default}


.modal-card.fwd-modal{max-width:480px;width:100%;display:flex;flex-direction:column;max-height:min(680px,calc(100dvh - 60px))}
.fwd-search{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;margin:4px 0 10px;
  border:1px solid var(--border);border-radius:var(--r-s);background:var(--surface-2)}
.fwd-search:focus-within{border-color:var(--accent)}
.fwd-search svg{width:18px;height:18px;color:var(--text-3);flex:none}
.fwd-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font-family:inherit;font-size:14px;outline:none}
.fwd-list{flex:1;min-height:120px;overflow-y:auto;margin:0 -6px;padding:0 2px}
.fwd-sec{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-3);padding:8px 8px 4px}
.fwd-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:8px 10px;border-radius:var(--r-s);cursor:pointer;transition:background .1s}
.fwd-row:hover{background:var(--surface-2)}
.fwd-row.on{background:var(--accent-soft)}
.fwd-av{flex:none;display:inline-flex}
.fwd-av .fwd-row-av{width:34px;height:34px;border-radius:50%;flex:none;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#fff}
.fwd-av .fwd-row-av.sq{border-radius:20px}
.fwd-av .fwd-row-av img{width:100%;height:100%;object-fit:cover}
.fwd-row-main{flex:1;min-width:0;display:flex;flex-direction:column}
.fwd-row-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fwd-row-name .fwd-hash{color:var(--text-3);margin-right:1px}
.fwd-row-sub{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fwd-check{width:21px;height:21px;border-radius:50%;border:2px solid var(--border);flex:none;position:relative;transition:border-color .12s,background .12s}
.fwd-row.on .fwd-check{border-color:var(--accent);background:var(--accent)}
.fwd-row.on .fwd-check::after{content:'';position:absolute;left:6px;top:2.5px;width:5px;height:10px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.fwd-empty{padding:26px 16px;text-align:center;color:var(--text-3);font-size:13.5px}
.fwd-foot{display:flex;align-items:center;gap:8px;padding-top:12px;margin-top:4px;border-top:1px solid var(--border-soft)}
.fwd-note{flex:1;min-width:0;height:40px;padding:0 13px;border:1px solid var(--border);border-radius:var(--r-m);
  background:var(--surface-2);color:var(--text);font-family:inherit;font-size:14px;outline:none}
.fwd-note:focus{border-color:var(--accent)}
.fwd-foot .btn{flex:none}


.invite-card{max-width:420px;margin:6px 0 2px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-m);overflow:hidden}
.invite-card.loading,.invite-card.dead{padding:14px 14px}
.invite-card .ic-spinner{display:flex;align-items:center;gap:10px;color:var(--text-3);font-size:13px}
.invite-card .ic-dead{color:var(--text-3);font-size:13px}
.invite-card .ic-banner{height:78px;background:var(--surface-3);background-size:cover;background-position:center}
.invite-card .ic-body{display:flex;align-items:center;gap:12px;padding:12px 14px}
.invite-card .ic-icon{width:46px;height:46px;border-radius:20px;flex:0 0 auto;font-size:18px}
.invite-card .ic-meta{min-width:0;flex:1}
.invite-card .ic-name{font-weight:700;font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.invite-card .ic-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:3px}
.invite-card .ic-stat{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-3)}
.invite-card .ic-dot{width:8px;height:8px;border-radius:50%;background:var(--text-3);display:inline-block}
.invite-card .ic-dot.on{background:#3ba55d}
.invite-card .ic-join{flex:0 0 auto;height:36px;padding:0 18px;font-size:14px}


@keyframes vrViewUp{from{opacity:0;transform:translateY(calc(16px * var(--vr-amp,1)))}to{opacity:1;transform:none}}
@keyframes vrModalIn{from{opacity:0;transform:translateY(calc(30px * var(--vr-amp,1))) scale(calc(1 - .05 * var(--vr-amp,1)))}to{opacity:1;transform:none}}
@keyframes vrSheetSlide{from{transform:translateY(100%)}to{transform:none}}
@media (max-width:980px){
  
  html[data-vronify="on"]:not([data-motion="off"]) .msgsheet.show,
  html[data-vronify="on"]:not([data-motion="off"]) .ctx-sheet.show{transition:transform calc(.44s * var(--vr-dur,1)) var(--vr-spring)}
  html[data-vronify="on"]:not([data-motion="off"]) .msgsheet-scrim.show,
  html[data-vronify="on"]:not([data-motion="off"]) .ctx-sheet-scrim.show{transition:opacity calc(.28s * var(--vr-dur,1)) var(--ease)}
  
  html[data-vronify="on"]:not([data-motion="off"]) #rail,
  html[data-vronify="on"]:not([data-motion="off"]) #sidebar,
  html[data-vronify="on"]:not([data-motion="off"]) #members{transition:transform calc(.42s * var(--vr-dur,1)) var(--vr-spring)}
  html[data-vronify="on"]:not([data-motion="off"]) #drawer-scrim{transition:opacity calc(.30s * var(--vr-dur,1)) var(--ease)}
  
  html[data-vronify="on"]:not([data-motion="off"]) .modal.open > .modal-card{animation:vrModalIn calc(.5s * var(--vr-dur,1)) var(--vr-spring)}
  
  html[data-vronify="on"]:not([data-motion="off"]) .mb{animation:vrViewUp calc(.4s * var(--vr-dur,1)) var(--vr-spring)}
  html[data-vronify="on"]:not([data-motion="off"]) .mfull{animation:vrViewUp calc(.44s * var(--vr-dur,1)) var(--vr-spring)}
  html[data-vronify="on"]:not([data-motion="off"]) #m-you.mfull{animation:vrSheetSlide calc(.52s * var(--vr-dur,1)) var(--vr-spring)}
  html[data-vronify="on"]:not([data-motion="off"]) #explore-view:not(.hidden),
  html[data-vronify="on"]:not([data-motion="off"]) #friends-view:not(.hidden),
  html[data-vronify="on"]:not([data-motion="off"]) #hero:not(.hidden){animation:vrViewUp calc(.42s * var(--vr-dur,1)) var(--vr-spring)}
  
  
  html[data-vronify="on"]:not([data-motion="off"]) .tagpop{transition:opacity calc(.16s * var(--vr-dur,1)) var(--ease),transform calc(.34s * var(--vr-dur,1)) var(--vr-spring)}
  html[data-vronify="on"]:not([data-motion="off"]) .tagpop:not(.show){transform:translateY(calc(10px * var(--vr-amp,1)))}
  
  html[data-vronify="on"]:not([data-motion="off"]) #jump-pill{
    transition:opacity calc(.26s * var(--vr-dur,1)) var(--ease),transform calc(.4s * var(--vr-dur,1)) var(--vr-spring),background .12s var(--ease)}
  
  html[data-vronify="on"]:not([data-motion="off"]) .toast:not(.out){animation:toastIn calc(.4s * var(--vr-dur,1)) var(--vr-spring)}
  
  html[data-vronify="on"]:not([data-motion="off"]) .channel,
  html[data-vronify="on"]:not([data-motion="off"]) .dm-row,
  html[data-vronify="on"]:not([data-motion="off"]) .member,
  html[data-vronify="on"]:not([data-motion="off"]) .menu-item,
  html[data-vronify="on"]:not([data-motion="off"]) .home-navitem,
  html[data-vronify="on"]:not([data-motion="off"]) .ss-navitem,
  html[data-vronify="on"]:not([data-motion="off"]) .fr-row,
  html[data-vronify="on"]:not([data-motion="off"]) .qs-item,
  html[data-vronify="on"]:not([data-motion="off"]) .explore-card{transition:transform calc(.38s * var(--vr-dur,1)) var(--vr-spring),background .14s var(--ease)}
  html[data-vronify="on"]:not([data-motion="off"]) .channel:active,
  html[data-vronify="on"]:not([data-motion="off"]) .dm-row:active,
  html[data-vronify="on"]:not([data-motion="off"]) .member:active,
  html[data-vronify="on"]:not([data-motion="off"]) .menu-item:active,
  html[data-vronify="on"]:not([data-motion="off"]) .home-navitem:active,
  html[data-vronify="on"]:not([data-motion="off"]) .ss-navitem:active,
  html[data-vronify="on"]:not([data-motion="off"]) .fr-row:active,
  html[data-vronify="on"]:not([data-motion="off"]) .qs-item:active,
  html[data-vronify="on"]:not([data-motion="off"]) .explore-card:active{transform:scale(calc(1 - .045 * var(--vr-amp,1)));transition:transform .07s var(--ease),background .14s var(--ease)}
  html[data-vronify="on"]:not([data-motion="off"]) .rail-item{transition:transform calc(.42s * var(--vr-dur,1)) var(--vr-spring),border-radius .2s,box-shadow .2s}
  html[data-vronify="on"]:not([data-motion="off"]) .rail-item:active{transform:scale(calc(1 - .14 * var(--vr-amp,1)));transition:transform .08s var(--ease),border-radius .2s,box-shadow .2s}
  html[data-vronify="on"]:not([data-motion="off"]) .icon-btn{transition:transform calc(.36s * var(--vr-dur,1)) var(--vr-spring),background .14s var(--ease)}
  html[data-vronify="on"]:not([data-motion="off"]) .icon-btn:active{transform:scale(calc(1 - .12 * var(--vr-amp,1)));transition:transform .08s var(--ease),background .14s var(--ease)}
  html[data-vronify="on"]:not([data-motion="off"]) .btn{transition:box-shadow .2s var(--ease),background .2s,transform calc(.36s * var(--vr-dur,1)) var(--vr-spring)}
  html[data-vronify="on"]:not([data-motion="off"]) .btn:not(:disabled):active{transform:translateY(1px) scale(calc(1 - .035 * var(--vr-amp,1)));transition:box-shadow .2s var(--ease),background .2s,transform .08s var(--ease)}
  html[data-vronify="on"]:not([data-motion="off"]) .tab-btn{transition:transform calc(.4s * var(--vr-dur,1)) var(--vr-spring),color .15s var(--ease)}
  html[data-vronify="on"]:not([data-motion="off"]) .tab-btn:active{transform:scale(calc(1 - .1 * var(--vr-amp,1)));transition:transform .08s var(--ease),color .15s var(--ease)}
  html[data-vronify="on"]:not([data-motion="off"]) .discover-navitem:active:not(:disabled){transform:scale(calc(1 - .04 * var(--vr-amp,1)))}
  
  html[data-vronify="on"]:not([data-motion="off"]) .checkrow input[type=checkbox]::after{transition:transform calc(.36s * var(--vr-dur,1)) var(--vr-spring)}
}