:root{color-scheme:dark;--bg:#111519;--side:#161b20;--rail:#101317;--card:#1c2429;--line:#293239;--soft:#98a8ad;--text:#e7eeed;--mint:#8ce4c2;--deep:#19372f;--faint:#73858a;font:15px/1.55 system-ui,-apple-system,Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text)}
button,input,textarea{font:inherit;color:inherit}
button{border:0;background:transparent;cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
button:hover{color:var(--mint)}
button[hidden],[hidden]{display:none!important}
svg{width:20px;height:20px;vertical-align:middle;flex:none}
small{display:block;color:var(--soft);font-size:.78rem}
kbd{font:11px system-ui;color:var(--soft);direction:ltr;unicode-bidi:isolate}
.layout{display:grid;grid-template-columns:72px 232px minmax(0,1fr) 220px;height:100vh;height:100dvh}
.layout.no-members{grid-template-columns:72px 232px minmax(0,1fr)}
.no-members .members{display:none}
.rail{background:var(--rail);border-inline-end:1px solid var(--line);display:flex;align-items:center;flex-direction:column;gap:12px;padding:17px 8px;overflow:auto}
.rail #servers{display:grid;gap:10px}
.brand,.rail-btn{width:45px;height:45px;border-radius:14px;background:#222a30;color:var(--soft);display:grid;place-items:center;font-weight:750;font-size:19px;position:relative}
.brand{background:var(--mint);color:#14372c}
.brand:hover,.send:hover{color:#14372c;background:#abf2d6}
.brand svg{width:32px;height:32px}
.rail-line{width:28px;border-top:1px solid var(--line)}
.rail-btn.active{background:var(--deep);color:var(--mint);border:1px solid #42725e}
.rail-btn.active:after{content:"";position:absolute;inset-inline-start:-13px;width:3px;height:20px;background:var(--mint);border-radius:4px}
.add-server{border:1px dashed #425751;background:transparent;color:var(--mint)}
.rail-settings{margin-top:auto}
.channels{background:var(--side);border-inline-end:1px solid var(--line);min-width:0;display:flex;flex-direction:column;overflow:auto}
.workspace,.topbar,.members-head{min-height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.workspace{padding:10px 17px}
.workspace strong{display:block;overflow-wrap:anywhere}
.workspace-logo{height:39px;width:39px;border-radius:12px;background:var(--deep);color:var(--mint);display:grid;place-items:center;flex:none}
.quick-search{margin:17px 13px 12px;padding:8px 10px;background:#101519;border:1px solid var(--line);border-radius:8px;text-align:start;display:flex;align-items:center;gap:8px;color:var(--soft);font-size:.86rem}
.quick-search kbd{margin-inline-start:auto;border:1px solid var(--line);border-radius:4px;padding:1px 4px}
.channel-section{padding:8px 17px 5px;display:flex;align-items:center;justify-content:space-between;color:var(--soft);font-size:.79rem;font-weight:700}
.channel-section .icon-btn{width:25px;height:25px}
.channel-section svg,.quick-search svg,.tools svg{width:16px;height:16px}
.channel-btn,.tools button{margin:2px 10px;width:calc(100% - 20px);min-height:38px;padding:6px 10px;border-radius:8px;display:flex;align-items:center;gap:9px;text-align:start;color:var(--soft);overflow-wrap:anywhere}
.channel-btn svg{width:17px;height:17px}
.channel-btn:hover,.tools button:hover,.icon-btn:hover{background:#222c32;color:var(--text)}
.channel-btn.active{background:#20352f;color:var(--mint);font-weight:700}
.channel-btn.active::after{content:"";margin-inline-start:auto;flex:none;width:6px;height:6px;border-radius:50%;background:var(--mint)}
.tools{margin:17px 0 8px;padding-top:8px;border-top:1px solid var(--line)}
.tools b,.tools i{margin-inline-start:auto;color:var(--mint);font-size:.76rem}
.tools i.on{width:7px;height:7px;background:var(--mint);border-radius:50%}
.profile{margin-top:auto;display:flex;align-items:center;gap:9px;padding:13px;border-top:1px solid var(--line);background:#13191d}
.profile button{margin-inline-start:auto}
.icon-btn{width:34px;height:34px;border-radius:8px;color:var(--soft);display:inline-grid;place-items:center;flex:none}
.icon-btn svg{width:18px;height:18px}
.chat{min-width:0;min-height:0;display:flex;flex-direction:column}
.topbar{padding:0 20px;gap:10px;flex:none}
.top-hash{color:var(--mint)}
.topbar strong,.channel-topic{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar strong{flex:none;max-width:40%}
.channel-topic{color:var(--soft);font-size:.86rem}
.top-divider{height:21px;border-inline-start:1px solid var(--line)}
.top-actions{display:flex;gap:3px;margin-inline-start:auto}
.mobile-menu,.mobile-search{display:none}
.feed{overflow:auto;flex:1;padding:22px clamp(15px,3vw,38px) 10px;scrollbar-color:#405159 transparent}
.welcome{position:relative;isolation:isolate;overflow:hidden;min-height:150px;padding:18px 21px;background:radial-gradient(ellipse at 0% 100%,#243d34,transparent 73%),#1a2528;border:1px solid #324740;border-radius:15px}
.welcome-kicker{font-size:.76rem;color:var(--mint);display:flex;align-items:center;gap:7px;font-weight:650}
.welcome-kicker span{height:6px;width:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 13px #8ce4c288}
.welcome h1{font-size:clamp(1.55rem,3vw,2.25rem);line-height:1.24;margin:8px 0 7px;overflow-wrap:anywhere}
.welcome p{margin:0;color:#b1c4c0;font-size:.91rem;max-width:75%}
.welcome-art{position:absolute;z-index:-1;inset-inline-end:13px;bottom:5px;color:#6fb09a8a}
.welcome-art svg{width:clamp(105px,15vw,173px);height:auto}
.date-rule{display:flex;align-items:center;gap:12px;margin:17px 0 8px;color:var(--soft);font-size:.74rem}
.date-rule span{height:1px;background:var(--line);flex:1}
.message{display:flex;gap:11px;padding:9px 3px;position:relative}
.message + .message{border-top:1px solid #29323970}
.message:target,.message.highlight{background:#22372f;border-radius:8px}
.avatar{width:35px;height:35px;border-radius:12px;display:grid;place-items:center;font-weight:750;flex:none;position:relative}
.avatar.mint,.avatar.me{background:#294d40;color:#a3ebcc}.avatar.lilac{background:#3a344e;color:#dfc7ff}.avatar.sand{background:#4b3d2c;color:#f6d699}.avatar.rose{background:#4b333d;color:#ffc9db}.avatar.slate{background:#304149;color:#b8d0de}
.message-content{min-width:0;flex:1}
.message header{display:flex;align-items:center;gap:8px;padding-inline-end:92px}
.message header time{font-size:.72rem;color:var(--soft)}
.message p{margin:1px 0 0;color:#d3dddd;overflow-wrap:anywhere;white-space:pre-wrap;font-size:.92rem}
.message-actions{display:flex;position:absolute;inset-inline-end:0;top:4px;gap:0}
.message-actions .icon-btn{width:29px;height:27px}
.message-actions svg{width:15px;height:15px}
.message-actions button.on{color:var(--mint)}
.reactions{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.reactions button{font-size:.73rem;background:#1c252b;border:1px solid #314047;border-radius:7px;padding:2px 6px;min-width:34px}
.reactions button.on{border-color:var(--mint);color:var(--mint)}
.composer-wrap{padding:8px clamp(15px,3vw,38px) 13px;position:relative}
.composer{display:flex;align-items:flex-end;gap:8px;padding:7px;background:var(--card);border:1px solid #34434a;border-radius:12px}
.composer:focus-within{border-color:#74b59e}
.composer textarea{background:none;border:0;resize:vertical;max-height:130px;min-height:35px;flex:1;width:0;padding:6px 0;outline:none}
.composer textarea:focus-visible{outline:none}
.composer textarea::placeholder{color:var(--soft)}
.send{background:var(--mint);color:#17382e;width:36px;height:35px;border-radius:8px}
.send svg{transform:scaleX(-1);width:18px;height:18px}
.compose-meta{display:flex;justify-content:space-between;gap:8px;margin-top:6px;color:var(--soft);font-size:.71rem}
.compose-meta i{display:inline-block;height:3px;width:3px;background:var(--faint);vertical-align:middle;border-radius:50%;margin:0 4px}
.emoji-picker{position:absolute;bottom:75px;inset-inline-start:24px;padding:7px;background:#202a2f;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 25px #0009}
.emoji-picker button{padding:6px;border-radius:6px;font-size:1.2rem}
.emoji-picker button:hover{background:var(--deep)}
.members{background:var(--side);border-inline-start:1px solid var(--line);overflow:auto}
.members-head{justify-content:space-between;padding:0 17px}
.members-head span{color:var(--mint)}
.member-group{margin:16px 14px 5px;color:var(--soft);font-size:.78rem}
.member{display:flex;align-items:center;gap:9px;margin:0 10px;padding:6px 5px}
.member .avatar{width:32px;height:32px}
.member .avatar:after{content:"";position:absolute;inset-inline-end:-2px;bottom:-2px;border:2px solid var(--side);width:9px;height:9px;background:#839399;border-radius:50%}
.member.online .avatar:after{background:var(--mint)}
.member strong{font-size:.88rem}
.member em{font-style:normal;font-size:.65rem;margin-inline-start:6px;color:var(--mint)}
.empty{color:var(--soft);padding:8px 3px}
dialog{width:min(500px,calc(100% - 28px));max-height:80dvh;background:#171e23;color:var(--text);border:1px solid #3b504a;border-radius:15px;padding:17px;box-shadow:0 18px 65px #0009}
dialog::backdrop{background:#080b0dc9}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.dialog-head h2{font-size:1.2rem;margin:0}
.dialog-input{display:block;width:100%;padding:9px 11px;background:#11161a;border:1px solid #405055;border-radius:8px;margin:6px 0 10px}
.primary{background:var(--mint);color:#17382e;padding:7px 14px;border-radius:8px;font-weight:700}
.primary:hover{color:#17382e;background:#abf2d6}
.result{display:block;text-align:start;width:100%;padding:8px 10px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.result:hover{background:var(--deep);color:var(--text)}
.pref{display:flex;gap:9px;align-items:center;min-height:40px}.pref input{accent-color:var(--mint)}
body.compact .message{padding-block:4px}
body.quiet .member .avatar:after{visibility:hidden}
@media(max-width:1030px){.layout{grid-template-columns:64px 195px minmax(0,1fr) 174px}.layout.no-members{grid-template-columns:64px 195px minmax(0,1fr)}}
@media(max-width:800px){.layout,.layout.no-members{grid-template-columns:60px 165px minmax(0,1fr)}.members{display:none}.layout.show-members .members{display:block;position:fixed;z-index:3;inset-inline-end:0;top:70px;bottom:0;width:200px;box-shadow:0 0 30px #0008}.workspace{padding-inline:10px}.quick-search kbd{display:none}}
@media(max-width:610px){.layout,.layout.no-members{grid-template-columns:51px minmax(0,1fr)}.rail{padding-inline:4px}.brand,.rail-btn{width:37px;height:37px;border-radius:11px}.channels{display:none}.layout.show-menu .channels{display:flex;position:fixed;z-index:4;inset-inline-start:51px;top:0;bottom:0;width:min(230px,calc(100% - 58px));box-shadow:0 0 30px #0009}.mobile-menu,.mobile-search{display:inline-grid}.topbar{padding:0 7px;gap:4px;min-height:60px}.top-actions{gap:0}.top-divider,.channel-topic{display:none}.welcome p{max-width:90%}.welcome-art{opacity:.52}.layout.show-members .members{top:60px}.message header{padding-inline-end:92px}.compose-meta span:first-child{display:none}}
a{color:var(--mint)}
.gate{min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 20%,#30343b,#141519 68%)}
.gate-shell{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;width:min(100%,860px);overflow:hidden;border:1px solid #41444d;border-radius:24px;box-shadow:0 24px 90px #0008}
.gate-hero{display:grid;justify-items:center;align-content:center;min-height:420px;padding:24px;color:#f4f5f7;text-align:center;background:radial-gradient(ellipse at 50% 44%,#5b606b,#282b32 53%,#181a1f 88%)}
.gate-emblem{width:min(100%,236px);aspect-ratio:1;display:grid;place-items:center;position:relative;isolation:isolate}
.gate-emblem::before{content:"";position:absolute;inset:8%;z-index:-1;border:1px solid #d2d6e540;border-radius:50%;box-shadow:0 0 0 15px #d2d6e510,0 0 42px #d2d6e533}
.gate-emblem img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 16px #0008)}
.gate-hero h1{margin:0;font-size:clamp(1.9rem,5vw,2.7rem);line-height:1.2}
.gate-hero h1 span{display:block;margin-block-start:7px;color:#dadde4;font-size:.48em;font-weight:850;letter-spacing:.21em}
.gate-hero p{margin:12px 0 0;color:#c5c8d0}
.gate-card{min-width:0;padding:clamp(20px,4vw,36px);align-content:center;background:var(--side)}
.gate-card h2{margin:0;font-size:1.55rem}
.gate-card p{color:var(--soft);margin:6px 0 18px}
.gate-card .primary{display:inline-block;text-decoration:none}
@media(max-width:650px){
  .gate{padding:14px}
  .gate-shell{grid-template-columns:1fr;max-width:440px;border-radius:18px}
  .gate-hero{min-height:0;padding:10px 16px 18px}
  .gate-emblem{width:140px}
}
.workspace strong{flex:1}.workspace .icon-btn{width:28px}
#navigation{min-height:0}.channel-btn span{min-width:0;overflow-wrap:anywhere}.tools{margin-top:12px}
.channel-btn.active:after{margin-inline-start:auto}
.members-head{position:sticky;top:0;background:var(--side);z-index:1}
.member{width:calc(100% - 20px);text-align:start;border-radius:8px;overflow-wrap:anywhere}.member:hover{background:var(--card)}
.member .avatar,.message .avatar{border-radius:50%}
.profile .profile-info{text-align:start;overflow-wrap:anywhere;padding:0;flex:1}.profile-info small{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.voice-dock{border-top:1px solid var(--line);padding:10px 12px;display:flex;align-items:center;gap:6px;background:var(--deep)}
.voice-dock strong{flex:1;color:var(--mint);overflow-wrap:anywhere}.voice-dock .icon-btn{width:29px}.voice-dock .muted{color:#ffadba}
.message header{padding-inline-end:72px;flex-wrap:wrap;gap:3px 8px}.message header .icon-btn{width:auto;height:auto;padding:0;color:var(--text);font-weight:700}
.message-actions{gap:2px}.message-actions .icon-btn{width:28px}
.message p{unicode-bidi:plaintext}.message small{display:inline}.topbar strong{max-width:58%}
.field{display:block;margin-bottom:10px}.field .dialog-input{margin-bottom:2px}.field span{font-size:.85rem;color:var(--soft)}
.panel-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.secondary{padding:7px 12px;border-radius:8px;border:1px solid #405055;background:#1c272a;color:var(--text)}.secondary:hover{background:var(--deep)}
.danger{color:#ffacb9}.list-card{border:1px solid var(--line);padding:11px;border-radius:9px;margin:8px 0}.list-card p{margin:4px 0;color:var(--soft);white-space:pre-wrap;overflow-wrap:anywhere}.list-card strong{overflow-wrap:anywhere}
#notice{position:fixed;bottom:18px;inset-inline-start:18px;z-index:6;background:#233832;border:1px solid #497965;color:var(--text);padding:8px 13px;border-radius:10px;max-width:calc(100vw - 36px);box-shadow:0 5px 18px #0008}
.more{font-size:.8rem;margin:10px 0}.reactions button{min-width:36px}
body.quiet .members small,body.quiet .member .avatar:after{visibility:hidden}
.voice-room{display:grid;justify-items:start;gap:8px}.voice-room p{color:var(--soft);margin:4px 0}.avatar.large{width:58px;height:58px;font-size:24px}
.badge{margin-inline-end:6px;display:inline-block;border:1px solid #4a5a5f;color:#b9cfce;padding:2px 6px;border-radius:7px;font-size:.72rem}
.badge.mint{color:#a3ebcc}.badge.lilac{color:#dfc7ff}.badge.sand{color:#f6d699}.badge.rose{color:#ffc9db}.badge.slate{color:#b8d0de}
.layout.is-home{grid-template-columns:72px 232px minmax(0,1fr)}.layout.is-home .members{display:none}
@media(max-width:1030px){.layout.is-home{grid-template-columns:64px 195px minmax(0,1fr)}}
@media(max-width:800px){.layout.is-home{grid-template-columns:60px 165px minmax(0,1fr)}}
@media(max-width:610px){.layout.is-home{grid-template-columns:51px minmax(0,1fr)}}

:root {
  --bg:#232428;
  --side:#1c1d21;
  --rail:#141519;
  --card:#2e3035;
  --line:#393b42;
  --soft:#c0c1c7;
  --text:#f4f4f6;
  --mint:#d6d9df;
  --deep:#3c3f47;
  --faint:#a1a3ac;
  --accent:#575d6a;
}
.workspace,.topbar,.members-head{min-height:49px}
.workspace,.topbar{box-shadow:0 1px 0 #17181c70}
.workspace{padding:7px 13px}
.workspace-logo{display:none}
.rail{padding-top:11px;gap:8px}
.rail #servers{gap:8px}
.brand,.rail-btn{width:46px;height:46px;border-radius:50%;background:#303136;color:#e3e5e8;transition:border-radius .16s,background .16s}
.brand:hover,.brand.selected,.rail-btn.active,.rail-btn:hover{border-radius:15px;background:var(--accent);color:white}
.brand,.brand:hover,.brand.selected{background:transparent}
.brand img{width:100%;height:100%;object-fit:contain;display:block;transform:scale(1.25)}
.brand:hover img,.brand.selected img{filter:drop-shadow(0 0 4px #d6d9df65)}
.rail-wordmark{margin-top:-4px;color:var(--soft);font-size:.55rem;font-weight:800;letter-spacing:.12em}
.rail-btn.active{border:0}
.rail-btn.active:after{background:white}
.add-server{border:0;color:#52bd88}
.add-server:hover{background:#248255;color:white}
.quick-search{margin:12px 10px 8px;background:#1f2024;border:0;border-radius:5px;padding:6px 8px}
.channel-btn,.tools button{min-height:33px;border-radius:5px;margin-block:1px}
.channel-btn:hover,.tools button:hover,.icon-btn:hover{background:#383941}
.channel-btn.active{background:#404149;color:#fff}
.channel-btn.active:after{display:none}
.channel-section{padding-block:7px 2px}
.category-toggle{display:flex;align-items:center;gap:4px;color:var(--soft);padding:0;min-width:0;font-size:.8rem;text-align:start}
.category-toggle svg{width:12px;height:12px}
.category-toggle.collapsed svg{transform:rotate(90deg)}
.profile{background:#232428;padding:8px 10px}
.profile .avatar{border-radius:50%}
.top-hash,.members-head span{color:var(--faint)}
.members-head{padding-inline:14px}
.feed{padding:10px 0 0}
.feed>.empty,#messages>.empty,.feed>.more{margin-inline:18px}
.message{padding:4px 15px;gap:10px}
.message + .message{border-top:0}
.message:hover,.message:focus-within{background:#2d2e34}
.message header{padding-inline-end:112px}
.message p{color:#dbdee1}
.message-actions{inset-inline-end:12px;top:-7px;opacity:0;background:#303137;border:1px solid #464850;border-radius:6px;z-index:1}
.message:hover .message-actions,.message:focus-within .message-actions{opacity:1}
@media (hover:none){.message-actions{opacity:1}}
.reply-quote{display:flex;align-items:center;gap:6px;max-width:90%;color:var(--soft);font-size:.78rem;padding:0;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-quote svg{width:15px;height:15px}
#reply-bar{display:flex;justify-content:space-between;align-items:center;padding:3px 10px;background:#25262a;border-radius:8px 8px 0 0;color:var(--soft)}
#reply-bar:not([hidden]) + .composer{border-start-start-radius:0;border-start-end-radius:0}
.composer-wrap{padding:7px 15px 12px}
.composer{background:var(--card);border:1px solid transparent;border-radius:8px}
.composer:focus-within{border-color:#505467}
.send,.primary{background:var(--accent);color:#fff}
.send:hover,.primary:hover{background:color-mix(in srgb,var(--accent),white 12%);color:#fff}
.welcome{margin:12px 16px;background:#303349;border-color:#484d75}
.friends-page{min-height:calc(100dvh - 61px)}
.friend-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:4px 14px 10px;border-bottom:1px solid var(--line)}
.friend-tabs button{padding:4px 9px;border-radius:5px;color:#c9cdd1}
.friend-tabs button:hover,.friend-tabs .active{background:#40414a;color:#fff}
.friend-tabs .add-friend{background:#248045;color:white}
.friend-tabs .add-friend:hover,.friend-tabs .add-friend.active{background:#1b6938;color:white}
.friend-content{padding:16px}
.friend-content h2{font-size:.92rem;margin:0 0 12px}
.friend-content>p,.friend-empty{color:var(--soft)}
.friend-empty{display:grid;justify-items:center;margin:10vh 0 0;text-align:center}
.empty-emblem{background:#404575;border:1px solid #545b9d;border-radius:24px;padding:18px;color:#d7dbff}
.empty-emblem svg{width:38px;height:38px}
.friend-content form{max-width:550px}
.friend-row{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding:8px 4px}
.friend-row:hover{background:#383a41}
.friend-person{flex:1;display:flex;gap:10px;align-items:center;text-align:start;overflow-wrap:anywhere}
.friend-person .avatar{border-radius:50%}
#context-menu,.context-submenu{position:fixed;min-width:185px;max-width:calc(100vw - 8px);max-height:calc(100dvh - 8px);overflow:auto;background:#1c1d21;padding:5px;border:1px solid #41424a;border-radius:6px;box-shadow:0 8px 24px #0009;z-index:8}
.context-submenu{z-index:9}
.menu-item{display:block;text-align:start;padding:7px 10px;width:100%;border-radius:4px;color:#dbdee1}
.menu-item:disabled{opacity:.55;cursor:default}
.menu-mark{float:inline-end;margin-inline-start:15px}
.voice-member{display:flex;align-items:center;gap:6px;margin-inline-start:22px;padding:3px 6px;color:var(--soft);text-align:start;font-size:.82rem}
.voice-member:hover{background:var(--card);border-radius:5px}
.voice-member .avatar{width:22px;height:22px;min-width:22px;font-size:.7rem}
.dm-call-live{color:var(--mint);margin-inline-start:auto}
.message-avatar{padding:0;border-radius:50%;align-self:start}
.menu-item:hover,.menu-item:focus-visible{background:var(--accent);color:#fff}
.menu-item.danger{color:#ff9b9f}
.menu-item.danger:hover,.menu-item.danger:focus-visible{background:#a63e45;color:white}
.switch-results{max-height:44dvh;overflow:auto}
.switch-row{display:flex;align-items:center;gap:9px}
.switch-row small{margin-inline-start:auto}
dialog{background:#2b2d33;border-color:#4b4e5a}
.dialog-input{background:#1e1f24;border-color:#41434a}
@media(max-width:800px){.layout.show-members .members{top:49px}}
@media(max-width:610px){
  .rail{padding-inline:4px}.brand,.rail-btn{width:36px;height:36px}
  .message{padding-inline:8px}.message-actions{inset-inline-end:6px}.message header{padding-inline-end:104px}
  .friend-tabs{padding-inline:8px}.friend-tabs button{padding-inline:6px}
}
.channel-btn.unread{color:#fff;font-weight:700;position:relative}
.channel-btn.unread:before{content:"";width:5px;height:5px;background:#fff;border-radius:50%;position:absolute;inset-inline-start:-7px}

/* Keep desktop navigation in the Discord column order, with bidi text inside. */
.layout[dir="ltr"] .send svg{transform:none}
.workspace strong,.topbar strong,.channel-topic,.nav-name,.profile-info strong,.member strong{unicode-bidi:plaintext}
.message p{white-space:pre-wrap;text-align:start}
.message p[dir="auto"]{unicode-bidi:plaintext}
.composer textarea{direction:rtl;text-align:right}
#reply-bar span{unicode-bidi:plaintext}
.rail-btn{font-size:clamp(.72rem,2vw,1.05rem);overflow-wrap:anywhere}
.rail-btn:active{cursor:grabbing}
.server-tag{display:inline-flex;align-items:center;background:#272831;border:1px solid #494b58;border-radius:5px;color:#dcdeff;padding:0 5px;font-size:.68rem;white-space:nowrap;font-weight:750;line-height:1.5;vertical-align:middle}
.member .server-tag{margin-inline-start:5px}
.channel-btn .server-tag{margin-inline-start:auto;max-width:56px;overflow:hidden}
.server-tag.mint,.role-color.mint{color:#8ce4bd}
.server-tag.lilac,.role-color.lilac{color:#c8b7ff}
.server-tag.sand,.role-color.sand{color:#ecc898}
.server-tag.rose,.role-color.rose{color:#f4aabe}
.server-tag.slate,.role-color.slate{color:#a9bedc}
.access-roles{border:1px solid var(--line);border-radius:8px;padding:7px 10px;margin:6px 0 12px;max-height:200px;overflow:auto}
.access-roles .pref{min-height:32px}
.role-row{display:flex;align-items:center;gap:6px}
.role-row .badge{margin-inline-end:auto}
.channel-btn.muted-channel{color:#90939c}
body[data-accent="mint"]{--accent:#247659}
body[data-accent="rose"]{--accent:#a64c76}
body[data-accent="aqua"]{--accent:#166d69}
body[data-accent="burgundy"]{--accent:#831e48}
body[data-accent="gold"]{--accent:#74571d}
body[data-size="large"] .message p,body[data-size="large"] .composer textarea{font-size:1.1rem}
.channel-entry{position:relative}
.channel-entry .channel-gear{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;opacity:0}
.channel-entry .channel-gear svg{width:15px;height:15px}
.channel-entry:hover .channel-gear,.channel-entry:focus-within .channel-gear{opacity:1}
.channel-entry:has(.channel-gear) .channel-btn{padding-right:29px}
@media(hover:none){.channel-entry .channel-gear{opacity:1}}
.layout .rail-btn.active::after{inset-inline-start:auto;left:-11px;right:auto}

.chat-main{display:flex;flex:1;min-height:0;min-width:0;position:relative}
.chat-center{display:flex;flex-direction:column;min-width:0;flex:1}
.chat-feed{display:flex;flex-direction:column;padding:0}
.chat-feed::before{content:"";flex:1 0 12px}
.chat-feed>*{flex:none}
.channel-intro{margin:16px 18px 14px}
.channel-intro h1{margin:8px 0 2px;font-size:1.65rem;line-height:1.25;unicode-bidi:plaintext}
.channel-intro p{margin:0 0 8px;color:var(--soft);unicode-bidi:plaintext}
.channel-emblem{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#45474f}
.channel-emblem svg{width:29px;height:29px}
.date-divider{display:flex;align-items:center;gap:8px;margin:10px 15px;color:var(--soft);font-size:.72rem;text-align:center}
.date-divider::before,.date-divider::after{content:"";height:1px;background:var(--line);flex:1}
.message{padding-block:7px;gap:10px}
.message + .message{margin-top:0}
.message.grouped{padding-block:1px}
.message .grouped-time{width:35px;flex:none;text-align:center;align-self:start;margin-top:4px;color:var(--soft);font-size:.64rem;opacity:0;white-space:nowrap;overflow:hidden}
.message.grouped:hover .grouped-time,.message.grouped:focus-within .grouped-time{opacity:1}
.message.pinned-message{background:#66522c29;box-shadow:inset 2px 0 #a68046}
.message.pinned-message:hover{background:#66522c3b}
.message p.message-text{width:fit-content;max-width:100%;line-height:1.48;overflow-wrap:anywhere}
.message-text code{background:#232429;border:1px solid #494b54;border-radius:4px;padding:0 4px;direction:ltr;unicode-bidi:isolate}
.message-text a{color:#87c5ff}
.message .edited-mark{font-size:.66rem}
#chat-search{display:flex;align-items:center;width:clamp(108px,14vw,186px);height:27px;align-self:center;background:#202127;border-radius:5px}
#chat-search input{flex:1;width:0;padding:4px 0 4px 8px;color:var(--text);background:transparent;border:0;font-size:.82rem}
#chat-search input:focus-visible{outline:none}
#chat-search:focus-within{outline:1px solid var(--accent)}
#chat-search .icon-btn{width:27px;height:25px}
#chat-search svg{width:15px;height:15px}
.mobile-chat-search{display:none}
.chat-results{flex:none;width:min(345px,48%);background:#2b2d32;border-left:1px solid var(--line);overflow:auto}
.result-header{display:flex;justify-content:space-between;align-items:center;gap:7px;padding:7px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#2b2d32;z-index:1}
.result-body{padding:9px}
.result-count{color:var(--soft);font-size:.8rem;margin:0 4px 6px}
.result-body .result{display:block;background:#34363e;margin-bottom:5px;border:1px solid var(--line);border-radius:6px;overflow-wrap:anywhere;padding:8px}
.result-body .result:hover{background:#3f424d}
.layout.show-results{grid-template-columns:72px 232px minmax(0,1fr)}
.layout.show-results .members{display:none}
@media(max-width:1030px){.layout.show-results{grid-template-columns:64px 195px minmax(0,1fr)}}
@media(max-width:800px){.layout.show-results{grid-template-columns:60px 165px minmax(0,1fr)}}
@media(max-width:610px){
  .layout.show-results{grid-template-columns:51px minmax(0,1fr)}
  #chat-search{display:none}
  .mobile-chat-search{display:inline-grid}
  .chat-results{position:absolute;inset:0;z-index:3;width:100%}
}
.composer{align-items:center}
.composer .composer-add{border-right:1px solid var(--line);border-radius:0;padding-right:5px}
.composer .send{width:32px;height:31px;background:transparent;color:var(--soft)}
.composer .send:hover{background:#464950;color:var(--text)}
.composer .send:disabled{opacity:.4;cursor:progress}
#file-preview{display:flex;align-items:center;gap:8px;padding:5px 9px;background:#272930;border-radius:8px 8px 0 0}
#file-preview bdi{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#file-preview .icon-btn{margin-left:auto}
#file-preview:not([hidden]) + .composer{border-start-start-radius:0;border-start-end-radius:0}
.attachment-card{max-width:min(380px,100%);margin:4px 0 2px}
.attachment-image{display:block;max-width:100%;max-height:280px;object-fit:contain;border-radius:6px;margin-bottom:5px}
.attachment-download{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:6px;padding:6px 9px;background:#2b2d33;text-decoration:none}
.attachment-download bdi{overflow-wrap:anywhere}
.attachment-download small{margin-left:auto;white-space:nowrap}
.channel-intro h1,.channel-intro p{width:fit-content;max-width:100%}

dialog.settings-window{
  width:min(940px,calc(100vw - 28px));
  max-width:none;
  height:min(760px,calc(100dvh - 28px));
  max-height:none;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
dialog.settings-window:not([open]){display:none}
.settings-window>.dialog-head{padding:10px 16px;margin:0;border-bottom:1px solid var(--line);flex:none}
.settings-window #dialog-body{flex:1;min-height:0}
.settings-grid{display:grid;grid-template-columns:205px minmax(0,1fr);direction:ltr;height:100%;min-height:0}
.settings-nav{background:var(--side);border-right:1px solid var(--line);padding:14px 10px;overflow:auto}
.settings-caption{padding:4px 8px;font-weight:700;overflow-wrap:anywhere}
.settings-tab{display:block;width:100%;text-align:left;padding:7px 8px;color:var(--soft);border-radius:5px;unicode-bidi:plaintext}
.settings-tab:hover,.settings-tab[aria-current]{color:var(--text);background:#404149}
.settings-content{direction:rtl;background:var(--bg);padding:20px 24px;overflow:auto}
.settings-content h2{margin:0 0 16px;font-size:1.35rem}
.settings-view{max-width:600px}
.settings-view form{margin-bottom:12px}
.settings-view hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.settings-account{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--card)}
.settings-account .avatar{border-radius:50%}
.settings-note{color:var(--soft)}
.key-list{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0}
.key-list dt,.key-list dd{margin:0;padding:8px 0;border-bottom:1px solid var(--line)}
.member.status-online .avatar:after{background:#3ab87c}
.member.status-idle .avatar:after{background:#e5b54d}
.member.status-dnd .avatar:after{background:#e86b74}
.member.status-offline .avatar:after{background:#737680}
body[data-theme="midnight"]{--bg:#1d1e24;--side:#191a20;--rail:#121319;--card:#242630;--line:#30323b}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:620px){
  dialog.settings-window{width:100vw;height:100dvh;border-radius:0}
  .settings-grid{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .settings-nav{display:flex;gap:4px;border-right:0;border-bottom:1px solid var(--line);padding:6px;overflow-x:auto}
  .settings-tab{width:auto;flex:none;white-space:nowrap}
  .settings-caption{display:none}
  .settings-content{padding:14px}
}

.voice-settings h3{margin:0 0 6px}
.voice-range{display:grid;grid-template-columns:1fr auto;gap:5px;margin:8px 0 16px}
.voice-range output{color:var(--soft);direction:ltr;font-variant-numeric:tabular-nums}
.voice-range input{grid-column:1/-1;inline-size:100%;accent-color:var(--accent);direction:ltr}
.mic-meter{display:block;width:100%;height:22px;direction:ltr}

.rail-btn.loading{background:var(--accent);border-radius:15px;color:white}
.chat{position:relative}
.opening-server .chat::after,.opening-room::after{
  content:"";position:absolute;z-index:4;top:0;left:0;right:0;height:2px;background:var(--accent);
  opacity:.85;pointer-events:none;transform-origin:left;animation:navigation-progress 1.25s ease-in-out infinite;
}
.chat-main{min-height:0}
@keyframes navigation-progress{0%{transform:scaleX(.12)}70%{transform:scaleX(.85)}100%{transform:scaleX(.96);opacity:.3}}
.pending-message{display:block;color:var(--soft);font-size:.68rem}

.permission-switch{border:0;border-bottom:1px solid var(--line);padding:7px 0;margin:0 0 8px;min-inline-size:0}
.permission-switch legend{padding:0;color:var(--text);font-size:.88rem}
.permission-options{display:inline-flex;direction:ltr;border:1px solid var(--line);border-radius:6px;background:var(--rail);margin-top:5px}
.permission-options label{position:relative}
.permission-options input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.permission-options span{display:grid;place-items:center;width:42px;height:30px;color:var(--soft);border-radius:4px}
.permission-options input:focus-visible + span{outline:2px solid var(--accent);outline-offset:1px}
.permission-deny input:checked + span{background:#962d3b;color:white}
.permission-inherit input:checked + span{background:#4a4d58;color:white}
.permission-allow input:checked + span{background:#247650;color:white}

#conversation{display:flex;flex:1;min-height:0;min-width:0;flex-direction:column}
.layout.viewing-call{grid-template-columns:72px 232px minmax(0,1fr)}
.layout.viewing-call .members{display:none}
.chat-center.in-call{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.chat-center.in-call.voice-chat-open{grid-template-columns:minmax(0,1fr) minmax(240px,320px)}
#call-stage{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--rail)}
.call-grid{min-height:0;flex:1;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(145px,1fr);gap:8px;padding:10px}
.call-grid:has(> :only-child){grid-template-columns:minmax(0,1fr)}
.call-tile{position:relative;border-radius:10px;overflow:hidden;display:grid;place-items:center;min-height:145px;background:linear-gradient(155deg,#292d39,#454b5d)}
.tile-mint{background:linear-gradient(155deg,#122b28,#345c50)}.tile-lilac{background:linear-gradient(155deg,#261d3c,#514369)}
.tile-sand{background:linear-gradient(155deg,#2e231d,#624b37)}.tile-rose{background:linear-gradient(155deg,#3a191e,#694349)}
.call-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#111}
.call-tile video.mirrored-camera{transform:scaleX(-1)}
.call-audio-status:not(:empty){display:flex;align-items:center;justify-content:center;gap:8px;padding:6px;color:var(--soft);font-size:.8rem}
.call-tile .avatar.large{width:clamp(52px,10vw,104px);height:clamp(52px,10vw,104px);border-radius:50%;font-size:1.85rem}
[data-speaking="true"] > .avatar::before,.speaker-video[data-speaking="true"]::after{
  content:"";position:absolute;pointer-events:none;inset:-3px;border:2px solid #489bff;
  border-radius:inherit;box-shadow:0 0 5px #489bff80;animation:voice-blue-pulse 1.2s ease-in-out infinite
}
.speaker-video[data-speaking="true"]::after{inset:0}
@keyframes voice-blue-pulse{50%{border-color:#84caff;box-shadow:0 0 10px #489bffb0}}
@media(prefers-reduced-motion:reduce){
  [data-speaking="true"] > .avatar::before,.speaker-video[data-speaking="true"]::after{animation:none}
}
.call-label,.call-muted,.call-live{position:absolute;padding:4px 8px;background:#101116de;color:white;border-radius:7px;line-height:1.4}
.call-label{left:10px;bottom:10px;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.call-muted{bottom:10px;right:10px;font-size:.7rem}
.call-live{right:10px;top:10px;background:#a72d48;font-size:.72rem}
.call-expand-share{position:absolute;top:10px;left:10px;z-index:1;padding:5px 8px;border-radius:7px;background:#101116e8;color:#fff;font-size:.78rem}
.call-expand-share:hover{background:#303642;color:#fff}
.share-viewer{width:calc(100vw - 24px);height:calc(100dvh - 24px);max-width:none;max-height:none;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#101116;color:#f4f4f6}
.share-viewer::backdrop{background:#000c}
.share-viewer-panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;background:#101116}
.share-viewer-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:8px 12px;border-bottom:1px solid #393b42}
.share-viewer-bar h2{margin:0;font-size:1rem;overflow-wrap:anywhere}
.share-viewer-controls{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.share-viewer-controls button{min-height:34px;padding:4px 8px;font-size:.82rem}
.share-viewer-controls button:disabled{opacity:.45;cursor:default}
.share-viewer-zoom{min-width:4ch;text-align:center;direction:ltr;font-variant-numeric:tabular-nums}
.share-viewer-viewport{direction:ltr;display:flex;overflow:auto;min-width:0;min-height:0;background:#08090b}
.share-viewer-viewport:focus-visible{outline-offset:-2px}
.share-viewer-surface{flex:none;margin:auto;width:var(--share-zoom,100%);height:var(--share-zoom,100%)}
.share-viewer-surface video{display:block;width:100%;height:100%;object-fit:contain}
.call-empty{display:grid;place-content:center;justify-items:center;text-align:center;min-height:170px;background:var(--bg);border-radius:10px}
.call-empty h1{margin:8px 0 0}.call-empty p{color:var(--soft);margin:2px 0 0}
.call-toolbar{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;padding:10px;background:var(--rail);border-top:1px solid var(--line)}
.call-control{width:42px;height:38px;border-radius:8px;background:var(--card);color:var(--text)}
.call-control:hover,.call-control.on{background:var(--accent);color:white}
.call-control.off,.call-control.hangup{background:#a93049;color:white}
.call-control svg{width:18px;height:18px}
.voice-chat-open #conversation{border-left:1px solid var(--line);background:var(--bg)}
.voice-chat-open #conversation .composer-wrap{padding-inline:6px}
.voice-chat-open #conversation .message header{padding-inline-end:0}
.voice-chat-open #conversation .channel-intro h1{font-size:1.1rem}
.voice-chat-open #conversation .channel-emblem{width:36px;height:36px}
.voice-chat-open #conversation .compose-meta{display:none}
@media(max-width:1030px){.layout.viewing-call{grid-template-columns:64px 195px minmax(0,1fr)}}
@media(max-width:800px){
  .layout.viewing-call{grid-template-columns:60px 165px minmax(0,1fr)}
  .chat-center.in-call.voice-chat-open{grid-template-columns:minmax(0,1fr)}
  .voice-chat-open #conversation{position:absolute;inset:0;z-index:2}
}
@media(max-width:610px){.layout.viewing-call{grid-template-columns:51px minmax(0,1fr)}.call-grid{grid-template-columns:minmax(0,1fr)}}
.log-event{margin-inline:16px;padding:9px 12px;border-block-end:1px solid var(--line)}
.log-event:hover{background:var(--card)}
.log-event header,.log-subject{display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px}
.log-event time,.log-subject{color:var(--soft);font-size:.78rem}
.log-event .message-text{margin-block:4px}
.log-copy{margin-inline-start:auto;padding:3px 8px;font-size:.78rem}
.log-mention{background:color-mix(in srgb,var(--accent),transparent 55%);color:var(--text);border-radius:4px;padding:1px 5px;font-weight:600;overflow-wrap:anywhere}
.log-mention:hover{background:var(--accent);text-decoration:underline}
.boost-panel{display:grid;justify-items:center;text-align:center;gap:8px}
.boost-panel h2,.boost-panel p{margin:0}
.boost-emblem{font-size:2rem;color:#ffa2e4;text-shadow:0 0 20px #f08ed7}
.boost-panel progress{width:min(320px,100%);accent-color:#e76ebd}
.gradient-name{background:var(--name-gradient);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:var(--text)}
.nameplate{padding:2px 7px;border-radius:7px;border:1px solid #aeb4db44}
.nameplate:not(.gradient-name).plate-glass{background:#adb4e326}
.nameplate:not(.gradient-name).plate-gold{background:#bc84274d}
.nameplate:not(.gradient-name).plate-violet{background:#a168ef55}
.nameplate.plate-gold{border-color:#e4b96a}
.nameplate.plate-violet{border-color:#af8cf3}
.profile-style-card{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px;border-radius:12px;background:var(--card);margin-bottom:12px;border:1px solid var(--line)}
.profile-style-card .avatar{border-radius:50%}
.profile-aurora{background:linear-gradient(120deg,#183947,#354f73,#3f2c62)}
.profile-ember{background:linear-gradient(120deg,#3d1c25,#734021,#3c2e42)}
.profile-stars{background:radial-gradient(circle at 80% 20%,#7b6196,#222643 35%,#232234 85%)}
.avatar-glow{box-shadow:0 0 14px #a99cff}
.avatar-halo{outline:2px dashed #90d7ff;outline-offset:3px}
.avatar-pulse{animation:avatar-pulse 2s ease-in-out infinite}
@keyframes avatar-pulse{0%,100%{box-shadow:0 0 3px #a99cff}50%{box-shadow:0 0 17px #a99cff}}
.avatar.frame-gold{border:2px solid #e3b767}
.avatar.frame-ice{border:2px solid #7fdaec}
.avatar.frame-rainbow{border:2px solid #e6a9ff;outline:1px dashed #8eddd0;outline-offset:2px}
.color-input{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0;padding:5px 8px;background:var(--card);border-radius:6px}
.color-input input{width:46px;height:28px;padding:0;background:transparent;border:0;cursor:pointer}
.theme-editor h3,.profile-style-preview h3{margin:0 0 8px;font-size:1rem}
.theme-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:8px;margin-block:12px 18px}
.theme-preset{display:grid;gap:7px;text-align:start;border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:var(--card)}
.theme-preset[aria-pressed="true"]{border-color:var(--mint);box-shadow:inset 0 0 0 1px var(--mint)}
.theme-swatches{display:flex;gap:5px}
.theme-swatch{width:18px;height:18px;border-radius:50%;border:1px solid #ffffff40}
.theme-preview{display:grid;grid-template-columns:32px minmax(65px,23%) minmax(0,1fr);overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);margin-bottom:12px}
.theme-preview-rail{display:grid;align-content:start;justify-items:center;gap:6px;padding-block:10px;background:var(--rail);border-right:1px solid var(--line)}
.theme-preview-rail span{width:16px;height:16px;border-radius:6px;background:var(--card)}
.theme-preview-rail span:first-child,.theme-preview-accent{background:var(--accent)}
.theme-preview-channels{display:grid;align-content:start;gap:4px;padding:9px;background:var(--side);border-left:1px solid var(--line);font-size:.75rem}
.theme-preview-channels span{color:var(--soft)}
.theme-preview-chat{display:grid;justify-items:start;gap:8px;padding:10px}
.theme-preview-message{width:100%;padding:6px 9px;background:var(--card);border:1px solid var(--line);border-radius:7px}
.theme-preview-accent{border-radius:6px;padding:3px 9px;color:#fff;font-size:.78rem}
.theme-color-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:4px 8px;margin-bottom:10px}
.theme-color-fields .color-input{margin:0}
.theme-actions{display:flex;flex-wrap:wrap;gap:8px}
.profile-style-preview{padding:12px;margin-bottom:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.profile-style-preview .profile-style-card{gap:12px;padding:16px}
.profile-style-identity{min-width:0;display:grid;justify-items:start;gap:2px}
.profile-style-identity strong,.profile-name-samples strong{max-width:100%;overflow-wrap:anywhere;line-height:1.35}
.profile-style-preview .profile-style-identity strong{font-size:1.65rem}
.profile-name-samples{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.profile-name-samples > div{display:grid;justify-items:start;min-width:0;padding:7px 9px;border-radius:8px;background:var(--card)}
.profile-name-samples strong{font-size:1.05rem}
@media(min-width:801px) and (min-height:740px){.profile-style-preview{position:sticky;top:0;z-index:1}}
.chat-results,.result-header{background:var(--side)}
#chat-search{background:var(--rail)}
#navigation{overflow:auto;flex:0 1 auto;scrollbar-width:thin}
.channels .tools,.channels .profile,.channels .voice-dock{flex-shrink:0}

.channel-entry[data-room-drop]::after{content:"";position:absolute;z-index:2;left:10px;right:10px;height:2px;background:var(--accent);pointer-events:none}
.channel-entry[data-room-drop="before"]::after{top:0}
.channel-entry[data-room-drop="after"]::after{bottom:0}

.profile-dates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 12px;padding:12px 0;margin:10px 0 0;border-top:1px solid var(--line)}
.profile-dates dt{color:var(--soft)}
.profile-dates dd{margin:0;overflow-wrap:anywhere}
.profile-roles{border-top:1px solid var(--line);padding:10px 0 2px}
.profile-roles h3{font-size:.95rem;margin:0 0 7px}
.profile-role-list{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.profile-role-list .badge{margin:0}
.profile-role-add{display:inline-flex;align-items:center;gap:4px;padding:4px 7px}
.profile-role-add svg{width:15px;height:15px}
.profile-roles form{margin-top:8px}

dialog.profile-window{
  width:min(1040px,calc(100vw - 28px));max-width:none;max-height:calc(100dvh - 28px);
  padding:0;background:#1c1614;border:1px solid #5b4940;overflow:auto;
}
.profile-window>.dialog-head{position:sticky;top:0;z-index:2;padding:10px 18px;margin:0;background:#1b1513f5;border-bottom:1px solid #ffffff15}
.member-profile{display:grid;grid-template-columns:minmax(0,47fr) minmax(0,53fr);gap:24px;padding:18px;direction:ltr;align-items:start}
.member-profile-identity,.member-profile-board{direction:rtl;min-width:0}
.member-profile-identity{overflow:hidden;border-radius:16px;background:linear-gradient(#211713,#473320);border:1px solid #ffffff16}
.member-profile-banner{height:160px;background:radial-gradient(ellipse at 30% 0%,#865c3f,transparent 70%),linear-gradient(130deg,#583727,#241b18);overflow:hidden}
.member-profile-banner img{width:100%;height:100%;object-fit:cover;display:block}
.member-profile-info{padding:0 22px 22px}
.member-profile-info>.avatar{width:88px;height:88px;border-radius:50%;margin-top:-44px;border:5px solid #2b1e18;font-size:2rem}
.member-profile-status{width:19px;height:19px;background:#85848a;border:4px solid #2b1e18;border-radius:50%;position:absolute;bottom:0;inset-inline-end:0}
.member-profile-status.status-online{background:#4bcb90}.member-profile-status.status-idle{background:#f0bc66}.member-profile-status.status-dnd{background:#ea626a}
.member-profile-info h2{font-size:1.65rem;margin:9px 0 4px;overflow-wrap:anywhere}
.member-profile-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:#e1d8d3}
.member-profile-bubble{display:inline-block;background:#342821;border:1px solid #ffffff25;border-radius:15px;padding:6px 11px;margin:10px 0 0;overflow-wrap:anywhere}
.member-profile-actions{margin:15px 0}
.member-profile-info h3{margin:13px 0 4px;font-size:.92rem}
.member-profile-bio{margin:0 0 14px;white-space:pre-wrap;overflow-wrap:anywhere}
.member-profile-tabs{display:flex;gap:14px;border-bottom:1px solid #ffffff21;margin-bottom:16px}
.profile-tab{padding:8px 3px 12px;color:#cdbfb8;border-bottom:2px solid transparent}
.profile-tab[aria-pressed="true"]{border-color:#f1e9e4;color:#fff;font-weight:700}
.profile-widgets-title{font-size:1rem;margin:6px 0 12px}
.profile-widget{padding:14px;border-radius:16px;background:#332923;border:1px solid #ffffff12;margin-bottom:12px}
.profile-widget header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.profile-widget h3{margin:0;font-size:.97rem}
.profile-widget small,.profile-widget-empty{color:#ccbdb5}
.profile-widget-empty{margin:6px 0 0}
.profile-widget header button,.profile-game button{background:#ffffff14}
.profile-game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px}
.profile-game{min-width:0;position:relative}
.profile-game-cover{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:9px;background:#24201e}
.profile-game-fallback{display:grid;place-items:center;background:linear-gradient(150deg,#6a5143,#261f1d);font-size:2rem}
.profile-game strong{display:block;font-size:.8rem;overflow-wrap:anywhere;margin-top:5px}
.profile-game button{position:absolute;top:3px;inset-inline-end:3px;width:22px;height:22px;background:#181311da}
.profile-game button svg{width:14px;height:14px}
.profile-game-rotation{grid-template-columns:1fr}
.profile-game-rotation .profile-game{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:center}
@media(max-width:670px){
  .member-profile{grid-template-columns:1fr;gap:14px;padding:12px}
  .member-profile-banner{height:120px}
}

.avatar > .discord-avatar { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.server-icon-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.workspace-banner{height:83px;flex:none;overflow:hidden;border-bottom:1px solid var(--line)}
.workspace-banner img{display:block;width:100%;height:100%;object-fit:cover}
.settings-image-preview,.invite-banner-image{display:block;max-width:100%;max-height:160px;object-fit:contain;border-radius:8px;margin:8px 0}
.auth-panel { display: grid; gap: 10px; }
.auth-panel h3 { margin: 10px 0 0; }
.auth-panel .settings-note { margin: 0; }
.auth-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
#gate-form .auth-panel > a { text-align: center; }
.auth-panel button:disabled { opacity: .65; cursor: default; }

.channel-variant { margin-inline-start: auto; font-size: .65rem; white-space: nowrap; opacity: .7; }
.message.message-divider { border-top: 1px solid var(--line, #ffffff18); margin-top: .5rem; padding-top: .65rem; }
.welcome-message-image { display: block; max-width: min(100%, 480px); border-radius: .75rem; margin-top: .5rem; }
.welcome-mark { font-size: 1.25rem; text-align: center; }
.custom-emoji { width: 1.3em; height: 1.3em; object-fit: contain; vertical-align: middle; }
.chat-media { display: block; width: auto; max-width: min(100%, 320px); max-height: 260px; object-fit: contain; border-radius: .5rem; }
.media-pick { width: 2rem; height: 2rem; object-fit: contain; }
.role-identity { display: inline-flex; align-items: center; gap: .3rem; }

body[data-menu-font="thmanyah"] :is(.rail,.channels,.members,.topbar,.settings-window,#context-menu,.context-submenu),
.thmanyah-menu-sample {
  font-family: 'LAMMA Thmanyah Menus', system-ui, -apple-system, Arial, sans-serif;
}
.settings-content select { font: inherit; }
.menu-font-preview { display: grid; gap: .15rem; padding: .65rem .8rem; margin-bottom: .7rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--card); }
.thmanyah-install a { color: var(--mint); text-underline-offset: .2em; }
.auth-alternatives summary { cursor: pointer; color: var(--soft); }
.auth-alternatives > .auth-panel { padding-block-start: .45rem; }

/* Navigation and settings surfaces */
.workspace strong, .topbar strong { font-weight: 680; }
.channel-btn, .tools button, .quick-search, .member { border-radius: 10px; }
.quick-search { min-height: 36px; background: color-mix(in srgb, var(--card) 64%, var(--side)); }
.channel-btn:hover, .tools button:hover, .member:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.channel-btn.active { background: color-mix(in srgb, var(--accent) 30%, var(--side)); color: var(--text); }
:is(#context-menu,.context-submenu) { background: var(--card); border-color: var(--line); border-radius: 14px; padding: 6px; }
.menu-item { border-radius: 8px; color: var(--text); }
.menu-item:hover, .menu-item:focus-visible { background: color-mix(in srgb, var(--accent) 30%, var(--card)); color: var(--text); }

dialog.settings-window { border-radius: 24px; background: var(--bg); border-color: var(--line); box-shadow: 0 25px 70px #0007; }
.settings-window > .dialog-head { padding: 12px 18px; background: var(--side); }
.settings-window .dialog-head .icon-btn { border-radius: 50%; background: color-mix(in srgb, var(--text) 9%, transparent); }
.settings-grid { grid-template-columns: 218px minmax(0, 1fr); }
.settings-nav { padding: 16px 11px; }
.settings-caption { margin-bottom: 8px; opacity: .85; }
.settings-tab {
  display: flex; align-items: center; gap: 9px; min-height: 37px; padding: 7px 10px;
  margin-block: 2px; border-radius: 10px; text-align: start;
}
.settings-tab svg { width: 17px; height: 17px; }
.settings-tab:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.settings-tab[aria-current] { color: var(--text); background: color-mix(in srgb, var(--accent) 30%, var(--side)); font-weight: 680; }
.settings-content { padding: clamp(20px, 4vw, 38px); }
.settings-content h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); letter-spacing: -.02em; margin-bottom: 18px; }
.settings-content .dialog-input { background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.settings-content :is(.primary,.secondary) { border-radius: 999px; }
.theme-preset { border-radius: 15px; min-height: 66px; }
.theme-preview { border-radius: 16px; }
.theme-preview-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 30px;
  padding: 3px 10px; font-size: .76rem; border-radius: 999px; background: var(--card);
}

/* Glass sits above the reading area, on navigation and controls. */
.glass-interface {
  --glass-surface: color-mix(in srgb, var(--side) 65%, transparent);
  --glass-edge: color-mix(in srgb, var(--text) 17%, transparent);
  --glass-highlight: #ffffff30;
  --glass-shadow: 0 8px 24px #080d262c;
  --glass-canvas: radial-gradient(ellipse at 12% 8%, color-mix(in srgb, var(--accent) 43%, transparent), transparent 57%),
    radial-gradient(ellipse at 91% 86%, color-mix(in srgb, var(--accent) 28%, var(--side)), transparent 62%), var(--bg);
}
.glass-light {
  color-scheme: light;
  --glass-highlight: #ffffffed;
  --glass-shadow: 0 8px 24px #263d651a;
  --mint: var(--accent);
  --faint: var(--soft);
}
.glass-interface .layout, .theme-preview.glass-interface { background: var(--glass-canvas); }
.glass-interface .chat { background: color-mix(in srgb, var(--bg) 94%, transparent); }
.glass-interface :is(.rail,.channels,.members,.topbar,.composer,#context-menu,.context-submenu,.settings-nav),
.theme-preview.glass-interface :is(.theme-preview-rail,.theme-preview-channels,.theme-preview-toolbar) {
  background: linear-gradient(148deg, color-mix(in srgb, var(--glass-highlight) 58%, transparent), transparent 55%), var(--glass-surface);
  border-color: var(--glass-edge);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
}
.glass-interface :is(.workspace,.members-head) { background: var(--glass-surface); box-shadow: none; border-bottom-color: var(--glass-edge); }
.glass-interface .topbar { margin: 9px 10px 5px; padding-inline: 12px; border: 1px solid var(--glass-edge); border-radius: 18px; }
.glass-interface .composer { border: 1px solid var(--glass-edge); border-radius: 20px; }
.glass-interface .composer:focus-within { border-color: var(--accent); }
.glass-interface :is(.quick-search,#chat-search,.profile,.voice-dock) { background: color-mix(in srgb, var(--card) 64%, transparent); }
.glass-interface :is(.quick-search,#chat-search) { border-radius: 999px; }
.glass-interface :is(.icon-btn:hover,.channel-btn.active,.settings-tab[aria-current]) { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }
.glass-interface .rail-btn:not(.active):not(.loading):not(:hover) { background: color-mix(in srgb, var(--card) 75%, transparent); color: var(--text); }
.glass-interface .settings-grid { background: var(--glass-canvas); }
.glass-interface .settings-content { background: var(--bg); }
.glass-interface :is(#context-menu,.context-submenu) { background-color: color-mix(in srgb, var(--card) 84%, transparent); }
.glass-interface .menu-item.danger { color: #ff9b9f; }
.glass-light .menu-item.danger { color: #a32539; }
.glass-interface .menu-item.danger:hover, .glass-interface .menu-item.danger:focus-visible { color: white; }
.theme-preview.glass-interface .theme-preview-chat { background: color-mix(in srgb, var(--bg) 90%, transparent); }
.theme-preview.glass-interface .theme-preview-toolbar { border: 1px solid var(--glass-edge); }
.theme-preview.glass-interface .theme-preview-message { border-radius: 11px; }

.server-media-page { display: grid; gap: 22px; }
.server-media-upload { background: var(--side); border: 1px solid var(--line); border-radius: 17px; padding: 16px; }
.server-media-upload > p { margin: 0 0 12px; }
.server-media-upload form { margin: 0; }
.server-media-upload form > small { margin-bottom: 12px; }
.server-media-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.server-media-heading h3 { margin: 0; font-size: 1rem; }
.server-media-count { color: var(--soft); font-size: .8rem; }
.server-media-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); gap: 10px; }
.server-media-card { display: grid; gap: 4px; justify-items: center; min-width: 0; padding: 8px; background: var(--side); border: 1px solid var(--line); border-radius: 15px; }
.server-media-artwork { width: 100%; height: 74px; display: grid; place-items: center; background: var(--card); border-radius: 10px; }
.server-media-image { width: 100%; height: 60px; object-fit: contain; }
.server-media-card strong { max-width: 100%; overflow-wrap: anywhere; text-align: center; font-size: .83rem; }
.server-media-remove { min-height: 30px; padding-inline: 9px; color: var(--soft); border-radius: 8px; }
.server-media-remove:hover { background: color-mix(in srgb, #cf3752 18%, transparent); color: var(--text); }
.server-media-library > .empty { margin: 0; padding: 16px; border: 1px dashed var(--line); border-radius: 14px; }

@media (max-width: 800px) {
  .glass-interface .layout.show-members .members { top: 64px; }
}
@media (max-width: 620px) {
  dialog.settings-window { border-radius: 0; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-nav { padding: 6px; }
  .settings-content { padding: 18px 14px; }
  .glass-interface .topbar { margin-inline: 5px; padding-inline: 7px; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass-interface { --glass-surface: var(--side); }
}

.glass-interface .message p { color: var(--text); }
.glass-interface .message:not(.pinned-message):is(:hover,:focus-within) { background: color-mix(in srgb, var(--text) 5%, transparent); }
.glass-interface :is(.message-actions,.message-text code,.channel-emblem,#notice) { background: var(--card); border-color: var(--glass-edge); }
.glass-interface .channel-emblem { color: var(--text); box-shadow: inset 0 0 0 1px var(--glass-edge); }
.glass-light .message-text a { color: #2456a5; }
.glass-light .badge { color: var(--soft); border-color: var(--line); }
.glass-light .danger { color: #a32539; }
.server-media-upload input::file-selector-button {
  font: inherit; color: var(--text); background: var(--side); border: 1px solid var(--line);
  border-radius: 999px; padding: .25rem .7rem; margin-inline-end: .55rem; cursor: pointer;
}

/* Settings directories and server action sheets */
.grouped-settings .settings-nav { display: block; padding: 14px 12px; }
.settings-group-title { color: var(--soft); font-size: .84rem; font-weight: 600; margin: 20px 6px 8px; }
.settings-group, .menu-list { background: var(--card); border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.settings-group .settings-tab, .menu-list-row {
  display: flex; align-items: center; gap: 12px; min-height: 46px; width: 100%; padding: 8px 12px;
  margin: 0; text-align: start; border-radius: 0;
}
.settings-group .settings-tab + .settings-tab, .menu-list-row + .menu-list-row { border-block-start: 1px solid var(--line); }
.menu-list-row:hover, .menu-list-row:focus-visible { color: var(--text); background: color-mix(in srgb, var(--accent) 18%, var(--card)); }
.settings-next { margin-inline-start: auto; opacity: .63; flex: none; }
.settings-next svg { width: 15px; height: 15px; transform: rotate(-90deg); }
[dir="rtl"] .settings-next svg { transform: rotate(90deg); }
.settings-back { display: flex; gap: 5px; align-items: center; min-height: 38px; color: var(--soft); margin-bottom: 8px; }
.settings-back svg { transform: rotate(-90deg); width: 15px; }
.settings-logout { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; margin: 18px 0; padding-inline: 12px; background: var(--card); color: #f48491; border-radius: 13px; }
.settings-directory .settings-grid { grid-template-columns: minmax(0,1fr); }
.settings-directory .settings-nav { width: 100%; max-width: 680px; margin-inline: auto; border: 0; }
.settings-directory .settings-content { display: none; }
.server-directory-hero { position: relative; display: grid; justify-items: center; gap: 9px; padding: 12px 0 18px; }
.server-directory-hero strong { text-align: center; overflow-wrap: anywhere; }
.server-directory-icon { display: grid; place-items: center; width: 68px; height: 68px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; font-size: 1.65rem; font-weight: 750; }
.server-icon-edit { position: absolute; top: 6px; inset-inline-start: calc(50% + 15px); width: 31px; height: 31px; border-radius: 50%; color: var(--text); background: var(--card); border: 1px solid var(--line); }
.server-icon-edit svg { width: 15px; height: 15px; }

dialog.server-sheet { width: min(560px,calc(100vw - 22px)); max-width: none; max-height: min(840px,calc(100dvh - 24px)); padding: 0; background: var(--side); border-color: var(--line); border-radius: 24px; }
.server-sheet > .dialog-head { position: sticky; top: 0; z-index: 2; margin: 0; padding: 8px 16px; background: color-mix(in srgb, var(--side) 92%, transparent); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.server-menu-banner { height: clamp(110px,30vw,198px); background: radial-gradient(ellipse at top, color-mix(in srgb,var(--accent) 65%,var(--side)), var(--side)); }
.server-menu-banner-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.server-menu-body { padding: 0 14px 24px; }
.server-sheet-hero { justify-items: start; padding-bottom: 8px; margin-top: -28px; }
.server-sheet-hero .server-directory-icon { border: 4px solid var(--side); width: 74px; height: 74px; }
.server-sheet-hero .server-icon-edit { inset-inline-start: 56px; }
.server-sheet-hero strong { font-size: 1.4rem; text-align: start; }
.server-menu-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--soft); font-size: .83rem; }
.server-online::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #38ac75; margin-inline-end: 5px; }
.server-menu-description { margin-block: 9px; color: var(--soft); }
.server-menu-shortcuts { display: grid; grid-template-columns: repeat(auto-fit,minmax(65px,1fr)); gap: 5px; margin: 20px 0 16px; }
.server-menu-shortcut, .profile-dock-button { display: grid; justify-items: center; align-content: start; gap: 6px; font-size: .78rem; padding: 4px; }
.server-menu-shortcut svg { width: 42px; height: 42px; padding: 10px; background: var(--card); border-radius: 13px; }
.server-menu-body > .menu-list-section, .server-browse > .menu-list-section { margin-bottom: 12px; }
.server-menu-switches .pref { display: flex; justify-content: space-between; flex-direction: row-reverse; align-items: center; gap: 10px; padding: 9px 12px; min-height: 48px; margin: 0; }
.server-menu-switches .pref + .pref { border-top: 1px solid var(--line); }
.server-menu-switches input { appearance: none; width: 38px; height: 22px; flex: 0 0 auto; background: var(--line); border-radius: 99px; position: relative; cursor: pointer; }
.server-menu-switches input::after { content: ''; position: absolute; width: 16px; height: 16px; inset-inline-start: 3px; top: 3px; background: white; border-radius: 50%; }
.server-menu-switches input:checked { background: var(--accent); }
.server-menu-switches input:checked::after { inset-inline-start: auto; inset-inline-end: 3px; }
.server-sheet-emoji { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }
.server-sheet-emoji .custom-emoji { width: 25px; height: 25px; }
.server-emoji-preview .server-media-image { height: 130px; }
.server-insights { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.server-insights .list-card { margin: 0; }
.server-insights strong { display: block; font-size: 1.3rem; }
.settings-diagnostics { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; white-space: pre-wrap; }
.profile-shortcut-dock { grid-column: 1 / -1; justify-self: center; display: flex; justify-content: space-around; gap: 12px; padding: 7px 12px; border-radius: 20px; background: #332923ee; border: 1px solid #ffffff24; backdrop-filter: blur(18px); color: #fff; }
.profile-dock-button { min-width: 64px; }
.profile-voice-card > strong { display: block; margin-top: 8px; }
.profile-voice-card .primary { display: flex; justify-content: center; align-items: center; gap: 7px; width: 100%; margin-top: 11px; }
@media (max-width: 670px) {
  dialog.server-sheet { width: 100%; margin: auto 0 0; border-radius: 24px 24px 0 0; max-height: calc(100dvh - 24px); }
  dialog.grouped-settings { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .grouped-settings .settings-grid { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
  .grouped-settings.settings-detail .settings-nav { display: none; }
  .grouped-settings .settings-tab { min-height: 51px; padding-inline: 13px; }
  dialog.profile-window { width: 100%; max-height: calc(100dvh - 14px); margin: auto 0 0; border-radius: 24px 24px 0 0; color: #f6f0ed; }
  .member-profile { padding: 0 0 10px; gap: 0; }
  .member-profile-identity { border: 0; border-radius: 0; }
  .member-profile-banner { height: clamp(155px,43vw,235px); }
  .member-profile-info { padding: 0 14px 14px; }
  .member-profile-info > .avatar { width: 76px; height: 76px; margin-top: -38px; }
  .member-profile-actions > .primary { flex: 1; min-height: 42px; }
  .member-profile-desktop-about { display: none; }
  .member-profile-board { padding: 0 14px 12px; }
  .member-profile-tabs { justify-content: space-between; gap: 5px; }
  .profile-tab { flex: 1; font-size: .84rem; }
  .profile-shortcut-dock { position: sticky; bottom: 8px; z-index: 1; }
}
@media (min-width: 671px) {
  .member-profile-main-about { display: none; }
}

.mobile-account-bar { display: none; }
.favorites-rail svg, .mobile-account-button svg { width: 20px; height: 20px; }
.chat-title-button { min-width: 0; max-width: 46%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text); padding: 4px 2px; text-align: start; font: inherit; font-weight: 700; background: transparent; border: 0; }
.chat-title-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.favorites-panel, .favorites-list, .conversation-detail-list { display: grid; gap: 10px; }
.favorite-entry { display: flex; gap: 6px; align-items: center; }
.favorite-destination { flex: 1; min-width: 0; display: grid; grid-template-columns: 22px minmax(0,1fr); column-gap: 8px; }
.favorite-destination svg { width: 18px; grid-row: span 2; align-self: center; }
.favorite-destination small, .favorite-destination strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-details { display: grid; gap: 14px; }
.conversation-detail-head { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 10px 14px; }
.conversation-detail-head h3, .conversation-detail-head p { margin: 0; overflow-wrap: anywhere; }
.conversation-detail-head .channel-emblem { width: 52px; height: 52px; }
.conversation-detail-head .panel-actions { grid-column: 1 / -1; }
.conversation-detail-head [aria-pressed="true"] { color: var(--accent); background: var(--card); }
.conversation-detail-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-bottom: 1px solid var(--line); }
.conversation-detail-tabs .profile-tab { padding-inline: 4px; }
.conversation-detail-item { display: grid; gap: 7px; min-width: 0; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.conversation-detail-item p { margin: 0; overflow-wrap: anywhere; }
.conversation-detail-item small { color: var(--soft); }
.conversation-detail-item button { justify-self: start; }
.conversation-media-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,145px),1fr)); }
.conversation-media-grid .empty, .conversation-details-more { grid-column: 1 / -1; }
.conversation-detail-image { display: block; width: 100%; height: 128px; object-fit: cover; border-radius: 8px; }
.conversation-detail-url { color: var(--accent); overflow-wrap: anywhere; text-align: start; }
@media (max-width: 610px) {
  .layout { grid-template-rows: minmax(0,1fr) auto; }
  .mobile-account-bar {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: space-evenly;
    gap: 4px;
    padding: 3px 10px calc(3px + env(safe-area-inset-bottom, 0px));
    background: var(--side);
    border-block-start: 1px solid var(--line);
    z-index: 4;
  }
  .mobile-account-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 44px;
    padding: 4px clamp(5px,2vw,14px);
    border-radius: 999px;
    color: var(--text);
    background: var(--card);
    direction: rtl;
    font-size: .85rem;
    font-weight: 650;
  }
  .favorites-rail { display: none; }
  .mobile-account-avatar, .mobile-account-avatar .avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
  }
  .glass-interface .mobile-account-bar {
    background: var(--glass-surface);
    border-color: var(--glass-edge);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
  }
}

/* Profile studio and live cosmetic previews */
dialog.profile-studio-window, dialog.studio-picker-sheet {
  width: min(730px, calc(100vw - 22px)); max-width: none; max-height: calc(100dvh - 26px);
  background: var(--side); color: var(--text); border-color: var(--line); border-radius: 24px; padding: 0; overflow: auto;
}
.profile-studio-window > .dialog-head, .studio-sheet-header {
  position: sticky; top: 0; z-index: 3; background: var(--side); border-bottom: 1px solid var(--line);
  margin: 0; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.studio-sheet-header h2 { margin: 0; font-size: 1.17rem; }
.studio-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-bottom: 1px solid var(--line); padding-inline: 12px; background: var(--side); }
.studio-tab { min-height: 47px; padding: 8px; border-bottom: 3px solid transparent; color: var(--soft); font-weight: 650; }
.studio-tab[aria-pressed="true"] { color: var(--text); border-bottom-color: #7787ff; }
.studio-main, .studio-server { padding: 14px 16px 19px; }
.studio-main.custom-profile-theme { background: linear-gradient(160deg, color-mix(in srgb,var(--profile-primary) 40%,var(--side)),var(--side) 55%); }
.studio-profile-card {
  color: #fff7f2; border: 1px solid #ffffff26; border-radius: 18px; overflow: hidden;
  background: linear-gradient(155deg,#211611,#483024); position: relative;
}
.studio-profile-card.custom-profile-theme, .member-profile-identity.custom-profile-theme {
  background: linear-gradient(155deg, color-mix(in srgb,var(--profile-primary) 55%,#101017), color-mix(in srgb,var(--profile-accent) 36%,#18151c));
  color: #fff7f2;
}
.studio-profile-card .member-profile-banner { height: clamp(96px,26vw,158px); }
.studio-profile-card .member-profile-banner, .member-profile-identity .member-profile-banner { position: relative; }
.member-profile-banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--studio-effect, none); opacity: .8;
}
.studio-preview-body { padding: 0 14px 14px; position: relative; }
.studio-preview-body > .avatar { width: 68px; height: 68px; border-radius: 50%; margin-top: -28px; border: 3px solid #30221e; }
.studio-preview-body > strong { display: block; width: fit-content; max-width: 100%; overflow-wrap: anywhere; margin-top: 7px; font-size: 1.3rem; }
.studio-preview-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: #f3dfd5; font-size: .83rem; }
.studio-preview-body p { margin: 10px 0 0; }
.profile-badges-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0; }
.profile-badges-row:empty { display: none; }
.profile-badges-row span { display: grid; place-items: center; min-width: 24px; min-height: 24px; background: #ffffff17; border-radius: 6px; }
.studio-preview-tools { display: flex; gap: 5px; flex-wrap: wrap; margin: 10px 0; }
.studio-preview-tools button { padding: 5px 8px; min-height: 38px; }
.studio-fields { border: 1px solid var(--line); background: color-mix(in srgb,var(--card) 76%,transparent); border-radius: 17px; padding: 14px; }
.studio-fields h3 { margin: 17px 0 7px; font-size: .93rem; }
.studio-fields .field { margin-bottom: 12px; }
.studio-fields .dialog-input, .tag-selector .dialog-input, .tag-designer .dialog-input { background: var(--side); border-color: var(--line); border-radius: 12px; min-height: 43px; }
.studio-fields .studio-count { text-align: end; margin-block-start: 2px; }
.studio-theme-colors { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.studio-theme-colors .color-input { display: flex; flex-direction: column-reverse; padding: 8px; margin: 0; }
.studio-theme-colors input { width: 100%; height: 52px; }
.studio-choice-row {
  min-height: 54px; width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: var(--side); border: 1px solid var(--line); border-radius: 12px; text-align: start;
}
.studio-choice-value { display: flex; align-items: center; gap: 9px; min-width: 0; }
.studio-choice-row .studio-sample { width: 38px; height: 38px; font-size: 1.1rem; }
.studio-choice-row .studio-sample-avatar { width: 23px; height: 23px; }
.studio-choice-row .studio-frame-sample { width: 25px; height: 25px; }
.studio-choice-row .studio-plate-sample { height: 18px; }
.studio-save { display: block; margin-block-start: 12px; width: 100%; min-height: 44px; }
.studio-gallery, .tag-selector { padding: 15px; }
.studio-gallery-preview { max-width: 390px; margin-inline: auto; }
.studio-gallery-selection { display: block; text-align: center; margin: 12px 0; }
.studio-gallery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.studio-gallery-tile, .tag-swatch {
  min-height: 52px; border: 1px solid var(--line); background: var(--card); border-radius: 11px;
  display: grid; justify-items: center; align-content: center; gap: 4px; padding: 6px;
}
.studio-gallery-tile { min-height: 97px; font-size: .76rem; }
.studio-gallery-tile[aria-pressed="true"], .tag-swatch[aria-pressed="true"], .studio-badge-choices button[aria-pressed="true"] { border-color: #8390ff; box-shadow: inset 0 0 0 1px #8390ff; }
.studio-sample { display: grid; place-items: center; width: min(100%,72px); height: 49px; border-radius: 8px; background-color: #222431; color: #fff5ef; font-size: 1.55rem; flex: none; overflow: hidden; }
.studio-sample-avatar { width: 32px; height: 32px; border-radius: 50%; background: #30303c; }
.studio-frame-sample { width: 36px; height: 36px; border-radius: 6px; background: linear-gradient(#454451 40%,#25232e 41%); }
.studio-plate-sample { width: 82%; height: 27px; border-radius: 6px; }
.studio-avatar-cluster { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 115px; }
.studio-avatar-cluster .avatar { border-radius: 50%; }
.studio-avatar-cluster .avatar.large { width: 76px; height: 76px; }
.studio-name-strip { display: flex; gap: 10px; align-items: center; min-height: 61px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; }
.studio-sheet-apply, .tag-selector > .primary { width: 100%; margin-top: 13px; min-height: 44px; }
.studio-badge-choices { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin-bottom: 12px; }
.studio-badge-choices button { min-height: 45px; font-size: 1.15rem; }
.studio-server-editor > .studio-profile-card, .studio-server-editor > div:first-child { margin: 10px 0; }

.avatar-solar { outline: 2px solid #ffbd6e; outline-offset: 2px; box-shadow: 0 0 6px 2px #ffc674, 0 0 20px 4px #db592f; }
.avatar-moon { outline: 1px solid #f4efff; outline-offset: 3px; box-shadow: 0 3px 11px 3px #b7b5fa; }
.avatar-ocean { outline: 2px solid #60d6ff; outline-offset: 2px; box-shadow: 0 0 14px 2px #1476e0; }
.avatar-bloom { outline: 3px dotted #ffa9d4; outline-offset: 2px; box-shadow: 0 0 13px #dd569f; }
.studio-frame-sunset { border: 2px solid #d79763; box-shadow: inset 0 0 0 2px #6b3418, 0 0 10px #f7ac5640; }
.studio-frame-crystal { border: 2px solid #a5d2fd; box-shadow: inset 0 0 0 2px #496d8b, 0 0 10px #8bceff55; }
.studio-frame-bloom { border: 2px dashed #f0a0c6; box-shadow: 0 0 12px #f678a442; }
.studio-frame-orbit { border: 2px double #ba9bf6; box-shadow: 0 0 10px #9f7ae955; }
.studio-frame-ember { border: 2px solid #f27843; box-shadow: inset 0 0 0 2px #7a2b1d, 0 0 12px #ff7e4350; }
.studio-frame-midnight { border: 2px solid #8584b4; box-shadow: inset 0 0 0 2px #2e3155, 0 0 10px #c0c4ff38; }
.profile-aurora { --studio-effect: linear-gradient(130deg,#45dfc05c,transparent 48%,#bc7cfa65); }
.profile-ember { --studio-effect: radial-gradient(ellipse at 20% 100%,#ff782eaa,transparent 55%),radial-gradient(circle at 80% 25%,#ffc98766,transparent 25%); }
.profile-stars { --studio-effect: radial-gradient(circle at 17% 30%,#fff 0 1px,transparent 2px),radial-gradient(circle at 64% 21%,#fff 0 1px,transparent 2px),radial-gradient(circle at 85% 60%,#fff 0 1px,transparent 2px),radial-gradient(ellipse at 60% 0%,#bd9bfb66,transparent 72%); }
.profile-eclipse { --studio-effect: radial-gradient(circle at 60% 48%,#30181f 12%,#ffd48d 14%,#ff852a80 18%,transparent 45%); }
.profile-cloud { --studio-effect: radial-gradient(ellipse at 16% 72%,#fff8 0 12%,transparent 35%),radial-gradient(ellipse at 85% 14%,#daf6ffa0 0 15%,transparent 45%),linear-gradient(140deg,#4c92d96e,transparent); }
.profile-neon { --studio-effect: linear-gradient(140deg,transparent 35%,#ff679d95 46%,#fdf5ffcc 50%,#b94de57c 54%,transparent 66%); }
.profile-tide { --studio-effect: radial-gradient(ellipse at 100% 100%,#77f1d9bb,transparent 70%),linear-gradient(150deg,#184ab883,transparent 58%); }
.studio-sample[class*="profile-"], .profile-style-card[class*="profile-"] { background-image: var(--studio-effect, none); }
:is(.studio-name-strip,.studio-plate-sample,.nameplate:not(.gradient-name)).plate-solar { background: radial-gradient(circle at 87% 22%,#ffe0a9aa,transparent 24%),linear-gradient(110deg,#362012,#b84614); color: #fff0d9; }
:is(.studio-name-strip,.studio-plate-sample,.nameplate:not(.gradient-name)).plate-indigo { background: linear-gradient(150deg,#252646,#5052a6,#303066); color: #f1edff; }
:is(.studio-name-strip,.studio-plate-sample,.nameplate:not(.gradient-name)).plate-coral { background: linear-gradient(120deg,#713c5e,#bd6370); color: #fff2f0; }
:is(.studio-name-strip,.studio-plate-sample,.nameplate:not(.gradient-name)).plate-lagoon { background: linear-gradient(125deg,#153e53,#257c7a); color: #e8fff9; }
:is(.studio-name-strip,.studio-plate-sample).plate-glass { background: linear-gradient(115deg,#77809c66,#62678422); }
:is(.studio-name-strip,.studio-plate-sample).plate-gold { background: linear-gradient(115deg,#403221,#ab7d32); }
:is(.studio-name-strip,.studio-plate-sample).plate-violet { background: linear-gradient(115deg,#3d275b,#784bb3); }

.tag-selector-list { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; max-height: min(56dvh,440px); overflow-y: auto; }
.tag-selector-row { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: var(--card); text-align: start; }
.tag-selector-row + .tag-selector-row { border-top: 1px solid var(--line); }
.tag-selector-row[aria-pressed="true"] { background: color-mix(in srgb,var(--accent) 27%,var(--card)); }
.tag-selector-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tag-selector-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; background: var(--side); flex: none; }
.tag-selector-mark { width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--soft); flex: none; }
.tag-selector-row[aria-pressed="true"] .tag-selector-mark { border: 5px solid #8490ff; background: #fff; }
.tag-selector-list > p { margin: 0; padding: 10px; }
.tag-designer { display: grid; grid-template-columns: minmax(0,1fr) minmax(155px,.7fr); gap: 13px; align-items: start; }
.tag-designer h3 { margin: 10px 0 7px; font-size: .9rem; }
.tag-swatch-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; margin-bottom: 12px; }
.tag-swatch { min-width: 0; min-height: 39px; font-size: 1.17rem; }
.tag-color-swatch small { font-size: .62rem; overflow-wrap: anywhere; }
.tag-chat-preview { padding: 9px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); margin-bottom: 8px; }
.tag-preview-message { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 6px; }
.tag-preview-message p { flex-basis: 100%; margin: 0; color: var(--soft); font-size: .78rem; }
.tag-designer-preview .avatar, .tag-designer-preview strong { margin-inline-end: 4px; }
.server-tag.amber,.tag-ink-amber { color: #ffbb78; }
.server-tag.blue,.tag-ink-blue { color: #9bc7ff; }
.server-tag.violet,.tag-ink-violet { color: #dcabff; }
.server-tag.red,.tag-ink-red { color: #ff9f9f; }
.server-tag.pearl,.tag-ink-pearl { color: #fff0df; }
.tag-ink-mint { color: #8ce4bd; }.tag-ink-lilac { color: #c8b7ff; }.tag-ink-sand { color: #ecc898; }.tag-ink-rose { color: #f4aabe; }.tag-ink-slate { color: #a9bedc; }
.tag-color-sample { text-shadow: 0 0 6px currentColor; }
@media (max-width: 670px) {
  dialog.profile-studio-window, dialog.studio-picker-sheet { width: 100%; margin: auto 0 0; max-height: calc(100dvh - 14px); border-radius: 24px 24px 0 0; }
  dialog.profile-studio-window { height: calc(100dvh - 14px); }
  dialog.studio-picker-sheet { max-height: calc(100dvh - 52px); }
  .studio-sheet-header { padding-top: 15px; }
  .studio-sheet-header::before { content: ''; width: 34px; height: 3px; border-radius: 9px; background: var(--line); position: absolute; top: 5px; left: calc(50% - 17px); }
  .studio-main, .studio-server, .studio-gallery, .tag-selector { padding-inline: 11px; }
  .tag-designer { grid-template-columns: minmax(0,1fr); }
}
.nameplate.gradient-name:is(.plate-glass,.plate-gold,.plate-violet,.plate-solar,.plate-indigo,.plate-coral,.plate-lagoon) {
  background-image: var(--name-gradient), var(--gradient-plate, linear-gradient(110deg,#8c86ad37,#77758d15));
  background-clip: text,padding-box;
  -webkit-background-clip: text,padding-box;
}
.nameplate.plate-gold,.nameplate.plate-solar { --gradient-plate: linear-gradient(110deg,#c8963c38,#f2632838); }
.nameplate.plate-violet,.nameplate.plate-indigo { --gradient-plate: linear-gradient(110deg,#7167bb45,#773dbe38); }
.nameplate.plate-coral { --gradient-plate: linear-gradient(110deg,#b45d7d49,#e6989640); }
.nameplate.plate-lagoon { --gradient-plate: linear-gradient(110deg,#237f8740,#56c3b63e); }
.profile-window { --soft: #cfbdb2; --text: #fff4ed; --line: #ffffff29; }
.profile-window .profile-dock-button:hover, .profile-window .member-profile-actions .secondary:hover { color: #fff4ed; }
.profile-studio-window > .dialog-head { min-height: 55px; }
.studio-header-save { margin-inline-start: auto; min-height: 40px; padding-inline: 11px; border-radius: 9px; font-weight: 750; color: var(--text); background: color-mix(in srgb,var(--accent) 36%,var(--card)); }
.studio-header-save:disabled { opacity: .55; }
.profile-studio-window .studio-tabs { position: sticky; top: 55px; z-index: 2; }
.studio-main-preview { margin-bottom: 14px; }
.studio-main-preview .member-profile-banner { height: clamp(125px,34vw,210px); }
.studio-preview-portrait { display: flex; align-items: flex-start; gap: 8px; position: relative; margin-top: -29px; }
.studio-preview-portrait > .avatar { flex: none; width: 70px; height: 70px; border: 3px solid #30221e; border-radius: 50%; }
.studio-preview-portrait > .member-profile-bubble { margin: 33px 30px 0 0; font-size: .82rem; }
.studio-preview-tools { position: absolute; inset-block-start: 8px; inset-inline-end: 9px; z-index: 1; margin: 0; align-items: center; }
.studio-preview-tools .studio-preview-button, .studio-edit-image {
  display: inline-grid; place-items: center; min-height: 36px; padding: 5px 9px; color: #fff;
  background: #1d141be6; border: 1px solid #ffffff27; border-radius: 999px;
}
.studio-edit-image { min-width: 36px; padding: 5px; }
.studio-edit-image svg { width: 17px; height: 17px; }
.studio-preview-portrait .studio-edit-image { position: absolute; inset-inline-start: 46px; top: -2px; }
.studio-preview-tools button:hover, .studio-edit-image:hover { color: #fff; background: #34304c; }

/* Quiet surfaces and consistent navigation across the app. */
body[data-theme="default"]:not(.glass-interface) {
  --rail: #121419;
  --side: #191c22;
  --bg: #1d2027;
  --card: #242831;
  --line: #313640;
  --text: #edf0f5;
  --soft: #b4becd;
  --faint: #95a1b3;
}
body[data-accent="silver"] { --accent: #526985; }
body { --nav-selection: color-mix(in srgb, var(--accent) 34%, var(--side)); }
.layout .workspace, .layout .topbar, .layout .members-head {
  min-height: 58px;
  box-shadow: none;
}
.workspace, .topbar, .members-head { background: color-mix(in srgb, var(--side) 88%, var(--bg)); }
.workspace strong, .topbar :is(strong,.chat-title-button) { font-weight: 680; }
.workspace-logo { background: var(--card); color: var(--soft); }
.quick-search {
  min-height: 36px;
  margin: 10px;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--rail);
}
.quick-search span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.quick-search kbd { white-space: nowrap; }
.rail { padding-top: 12px; gap: 9px; }
.rail :is(.rail-btn,.brand) { border-radius: 13px; }
.rail .rail-btn:not(.active):not(:hover):not(.loading) { background: var(--card); }
.rail .rail-btn.active { background: var(--accent); }
.rail .rail-btn.active::after { width: 3px; height: 18px; }
.layout .channel-btn, .layout .tools button { min-height: 36px; border-radius: 8px; }
.channel-section { padding-block: 12px 4px; }
.category-toggle { min-height: 24px; }
.layout .channel-btn.active { color: var(--text); background: var(--nav-selection); }
.layout .channel-btn:hover, .layout .tools button:hover, .layout .icon-btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--soft) 10%, transparent);
}
.layout .profile { background: var(--side); min-height: 56px; }
.layout .composer { border-color: var(--line); border-radius: 13px; box-shadow: none; }
.composer:focus-within { border-color: var(--accent); }
.composer textarea { direction: revert; text-align: start; }
.message p, .message-text { color: var(--text); }
.friend-tabs { padding: 9px 16px; gap: 5px; }
.friend-tabs button { min-height: 34px; padding: 5px 10px; border-radius: 8px; color: var(--soft); }
.friend-tabs button:hover, .friend-tabs .active { background: var(--nav-selection); color: var(--text); }
.friend-tabs .add-friend { background: var(--accent); color: white; }
.friend-tabs .add-friend:hover, .friend-tabs .add-friend.active { background: color-mix(in srgb, var(--accent) 80%, #000); }
.friend-content { max-width: 920px; width: 100%; margin-inline: auto; padding: 22px clamp(12px,3vw,28px); }
.friend-empty { border: 1px solid var(--line); border-radius: 14px; background: var(--side); padding: 28px 12px; }
@media (hover: hover) and (pointer: fine) {
  .message .message-actions { opacity: 0; }
  .message:hover .message-actions, .message:focus-within .message-actions { opacity: 1; }
}
:is(#context-menu,.context-submenu) { padding: 5px; border-radius: 11px; box-shadow: 0 12px 28px #0005; }
.menu-item { min-height: 34px; border-radius: 6px; }
.menu-item:hover, .menu-item:focus-visible { background: var(--nav-selection); }

.settings-window { border-radius: 19px; }
.settings-window > .dialog-head { min-height: 59px; background: var(--side); }
.settings-window > .dialog-head h2 { font-size: 1.12rem; font-weight: 680; }
.settings-section { min-width: 0; }
.grouped-settings .settings-nav { padding: 15px 14px; }
.grouped-settings .settings-group-title { margin: 14px 5px 7px; font-weight: 650; }
.grouped-settings .settings-group { border-radius: 11px; }
.grouped-settings .settings-tab { padding: 7px 10px; gap: 8px; color: var(--text); min-height: 41px; }
.grouped-settings .settings-tab > svg { width: 17px; height: 17px; color: var(--soft); }
.grouped-settings .settings-tab:hover, .grouped-settings .settings-tab[aria-current] { background: var(--nav-selection); }
.settings-tab-label { min-width: 0; overflow-wrap: anywhere; }
.settings-directory .settings-nav {
  max-width: none;
  padding: 18px clamp(12px, 3vw, 30px);
  display: grid;
  align-content: start;
  align-items: start;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 6px 18px;
}
.settings-directory .settings-nav > :not(.settings-section) { grid-column: 1 / -1; }
.settings-filter {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 11px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--soft);
}
.settings-filter:focus-within { border-color: var(--accent); }
.settings-filter input { flex: 1; min-width: 0; border: 0; margin: 0; background: transparent; }
.settings-filter input:focus-visible { outline: none; }
.settings-content h2 { font-weight: 680; font-size: 1.38rem; }
.settings-logout { width: fit-content; border-radius: 9px; }
.language-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.language-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 45px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  text-align: start;
}
.language-choice:hover, .language-choice[aria-pressed="true"] { background: var(--nav-selection); border-color: var(--accent); }
.language-dot { flex: none; width: 15px; height: 15px; border: 1px solid var(--soft); border-radius: 50%; }
.language-choice[aria-pressed="true"] .language-dot { border: 4px solid var(--accent); background: var(--text); }
.gate-language {
  position: fixed;
  inset-block-start: max(10px,env(safe-area-inset-top));
  inset-inline-end: max(10px,env(safe-area-inset-right));
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--side);
  color: var(--text);
}
.gate-language select { max-width: 160px; min-height: 32px; font: inherit; color: inherit; background: var(--side); border: 0; }
html[dir="ltr"] :is(.settings-content,.member-profile-identity,.member-profile-board,.mobile-account-button) { direction: ltr; }
html[dir="rtl"] :is(.settings-content,.settings-filter) { direction: rtl; }
html[dir="ltr"] .settings-next svg { transform: rotate(-90deg); }
html[dir="rtl"] .settings-back svg { transform: rotate(-90deg); }
html[dir="ltr"] .settings-back svg { transform: rotate(90deg); }
@media (max-width: 670px) {
  .settings-directory .settings-nav { grid-template-columns: minmax(0,1fr); }
  .grouped-settings .settings-tab { min-height: 46px; }
}
@media (max-width: 610px) {
  .layout .topbar { min-height: 52px; }
  .mobile-account-bar { padding-top: 4px; }
  .mobile-account-button { background: transparent; border-radius: 10px; }
  .mobile-account-button:hover, .mobile-account-button:focus-visible { background: var(--nav-selection); }
  .gate { padding-block-start: 64px; }
}

.qr-sign-in {
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--side);
}
.qr-sign-in h3, .qr-sign-in p { margin: 0; }
.qr-sign-in h3 { font-size: 1rem; }
.qr-sign-in .settings-note { font-size: .86rem; }
.qr-sign-in-preview, .qr-approval-panel { display: grid; justify-items: center; gap: 10px; }
.qr-sign-in-preview:empty { display: none; }
.qr-sign-in-preview canvas { display: block; max-width: 100%; height: auto; border-radius: 10px; }
.qr-comparison {
  direction: ltr;
  padding: 5px 11px;
  border-radius: 8px;
  background: var(--rail);
  color: var(--text);
  font: 700 1.05rem/1.5 ui-monospace, monospace;
  letter-spacing: .15em;
}
.qr-account { color: var(--soft); overflow-wrap: anywhere; }
.qr-approval-panel .panel-actions { justify-content: center; }

/* The same editor and gallery controls adapt to the available viewport. */
dialog.profile-studio-window, dialog.studio-picker-sheet {
  --side: #242428;
  --card: #2c2c31;
  --line: #424249;
  --text: #f3f2f4;
  --soft: #b6b5bf;
  --accent: #6366ed;
  color-scheme: dark;
}
.profile-studio-window > .dialog-head {
  min-height: 60px;
  height: 60px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  justify-content: normal;
  border-bottom: 0;
}
.profile-studio-window > .dialog-head form { grid-column: 1; grid-row: 1; }
.profile-studio-window > .dialog-head h2 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.18rem; }
.profile-studio-window .studio-header-save {
  grid-column: 3;
  grid-row: 1;
  background: transparent;
  color: #a1aaff;
  margin: 0;
}
.profile-studio-window .studio-tabs { top: 60px; }
.studio-tab { min-height: 45px; font-size: .92rem; }
.studio-tab[aria-pressed="true"] { color: #a1aaff; }
.studio-main {
  --studio-primary: var(--profile-primary, #21120e);
  --studio-accent: var(--profile-accent, #8f5b35);
  background: #211610;
  background: linear-gradient(165deg, color-mix(in srgb, var(--studio-primary) 78%, #100a08), color-mix(in srgb, var(--studio-accent) 45%, #221b18));
  padding: 0 14px 22px;
}
.studio-main.custom-profile-theme {
  background: linear-gradient(165deg, color-mix(in srgb, var(--studio-primary) 78%, #100a08), color-mix(in srgb, var(--studio-accent) 45%, #221b18));
}
.studio-main-preview { margin: 0 -14px 10px; }
.studio-main-preview .studio-profile-card { border: 0; border-radius: 0; background: transparent; }
.studio-main-preview .member-profile-banner {
  height: clamp(138px,35vw,230px);
  background: radial-gradient(ellipse at 18% 10%,#c0824e50,transparent 55%),linear-gradient(135deg,#512518,#221015 74%);
}
.studio-main-preview .studio-preview-body { padding: 0 14px 12px; }
.studio-main-preview .studio-preview-portrait { min-height: 88px; margin-top: -34px; align-items: flex-start; }
.studio-main-preview .studio-preview-portrait > .avatar { width: 80px; height: 80px; border-color: #241713; }
.studio-main-preview .studio-preview-portrait > .member-profile-bubble {
  position: relative;
  max-width: min(75%, 450px);
  margin: 27px 0 0;
  padding: 10px 12px;
  background: #2c2c31;
  color: #f2eef3;
  border-radius: 15px;
  overflow-wrap: anywhere;
}
.studio-main-preview .studio-preview-portrait > .member-profile-bubble::before {
  position: absolute;
  inset-inline-start: -5px;
  top: -5px;
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: inherit;
}
.studio-main-preview .studio-edit-image { inset-inline-start: auto; }
.studio-main-preview .studio-preview-portrait .studio-edit-image { inset-inline-start: 53px; }
.studio-main-preview .studio-preview-body > strong { font-size: 1.5rem; margin-top: 3px; }
.studio-main-preview .member-profile-bio { display: none; }
.studio-main-preview .studio-preview-meta .profile-badges-row { margin: 0; }
.studio-main .studio-fields { background: #ffffff09; border: 0; padding: 14px; }
.studio-fields h3, .studio-fields .field > span { font-size: .94rem; font-weight: 650; color: #f2ece9; }
.studio-fields h3 { margin: 19px 0 8px; }
.studio-fields .field { position: relative; margin: 15px 0 0; }
.studio-fields .field:first-child { margin-top: 0; }
.studio-fields .dialog-input { background: #100c0d54; border-color: #ffffff27; min-height: 47px; }
.studio-fields textarea.dialog-input { min-height: 112px; padding-bottom: 23px; }
.studio-fields .studio-count { position: absolute; bottom: 7px; inset-inline-end: 12px; pointer-events: none; }
.studio-fields .field:has(.studio-clear-field) .dialog-input { padding-inline-end: 39px; }
.studio-clear-field { position: absolute; inset-inline-end: 7px; bottom: 5px; height: 36px; width: 32px; color: var(--soft); }
.studio-clear-field svg { width: 16px; height: 16px; }
.studio-choice-row { background: transparent; border-color: #ffffff40; min-height: 64px; padding-inline: 10px; color: var(--text); }
.studio-choice-row:hover { background: #ffffff0c; color: var(--text); }
.studio-name-sample { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 7px; background-color: #ffffff0d; font-size: 1.2rem; font-weight: 750; }
.studio-theme-colors { gap: 12px; }
.studio-theme-colors .color-input { background: transparent; padding: 0; border: 0; align-items: stretch; text-align: center; position: relative; gap: 3px; }
.studio-theme-colors .color-input input { border: 0; padding: 0; background: transparent; cursor: pointer; }
.studio-theme-colors input::-webkit-color-swatch-wrapper { padding: 0; }
.studio-theme-colors input::-webkit-color-swatch { border: 0; border-radius: 8px; }
.studio-theme-colors input::-moz-color-swatch { border: 0; border-radius: 8px; }
.studio-advanced { display: block; margin: 12px auto 0; color: var(--soft); min-height: 38px; }

dialog.studio-picker-sheet { width: min(600px, calc(100vw - 22px)); }
.studio-picker-sheet::backdrop { background: #000a; }
.studio-sheet-header { position: sticky; justify-content: center; border-bottom: 0; padding: 19px 44px 10px; min-height: 57px; text-align: center; }
.studio-sheet-header .icon-btn { position: absolute; inset-inline-end: 9px; top: 13px; }
.studio-gallery, .tag-selector { padding: 8px 14px 0; }
.studio-gallery-preview { max-width: 405px; }
.studio-gallery-preview > .studio-profile-card { width: min(100%, 268px); margin: auto; min-height: 242px; }
.studio-gallery-preview > .studio-profile-card .member-profile-banner { height: 108px; }
.studio-gallery-selection { margin: 11px 0 13px; font-size: 1.06rem; }
.studio-collection-title { font-size: .97rem; margin: 0 0 9px; font-weight: 600; }
.studio-gallery-grid { gap: 10px; }
.studio-gallery-tile { aspect-ratio: 1; min-height: 0; background: transparent; border: 2px solid #36363c; border-radius: 10px; position: relative; overflow: hidden; }
.studio-gallery-tile:not(.studio-gallery-none):not(.studio-gallery-browse) > span:last-child {
  position: absolute;
  inset: auto 0 0;
  padding: 3px 4px;
  color: #fff;
  background: #18181cd9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-gallery-tile .studio-sample { width: 100%; height: 100%; background-color: transparent; }
.studio-gallery-tile:not(.studio-gallery-none) .studio-sample { position: absolute; inset: 0; border-radius: 7px; }
.studio-gallery-tile .studio-plate-sample { width: 100%; height: 100%; }
.studio-gallery-tile .studio-sample-avatar { width: 52%; height: auto; aspect-ratio: 1; background: #242428; }
.studio-gallery-tile .studio-frame-sample { width: 67%; height: 70%; display: grid; place-items: center; }
.studio-mini-profile { display: block; width: 70%; height: 70%; border-radius: 6px; background:
  radial-gradient(circle at 24% 38%,#97939d 0 9%,transparent 10%),
  linear-gradient(#8b8795,#8b8795) 22% 65%/51% 6% no-repeat,
  linear-gradient(#8b8795,#8b8795) 22% 81%/37% 5% no-repeat,
  linear-gradient(#54525e 30%,#202029 31%); opacity: .58; }
.studio-gallery-none .studio-sample, .studio-gallery-browse svg { font-size: 2.1rem; color: var(--soft); }
.studio-gallery-none .studio-sample { width: auto; height: 35px; }
.studio-gallery-browse svg { width: 29px; height: 29px; }
.studio-avatar-cluster { min-height: 178px; gap: 20px; padding: 8px; }
.studio-avatar-cluster .avatar.large { width: clamp(91px,34vw,143px); height: clamp(91px,34vw,143px); }
.studio-avatar-variants { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.studio-avatar-variants .avatar { width: 33px; height: 33px; }
.studio-avatar-variants .member-profile-status { width: 11px; height: 11px; border-width: 2px; }
.studio-name-placeholder { position: relative; height: 35px; opacity: .55; }
.studio-name-placeholder::before, .studio-name-placeholder::after { content: ''; position: absolute; border-radius: 20px; background: #494951; }
.studio-name-placeholder::before { width: 26px; height: 26px; inset-inline-start: 9px; top: 5px; }
.studio-name-placeholder::after { width: 35%; height: 9px; inset-inline-start: 44px; top: 13px; }
.studio-name-placeholder:first-child, .studio-name-placeholder:last-child { opacity: .22; }
.studio-sheet-footer { position: sticky; bottom: 0; padding: 8px 0 max(8px,env(safe-area-inset-bottom)); background: var(--side); z-index: 1; }
.studio-sheet-footer .studio-sheet-apply { margin: 0; }
.tag-selector { padding-bottom: max(14px,env(safe-area-inset-bottom)); }
.tag-selector-search { display: flex; align-items: center; gap: 7px; padding: 0 11px; background: #1e1e24; border: 1px solid var(--line); border-radius: 11px; margin: 0 0 16px; color: var(--soft); }
.tag-selector-search .dialog-input { margin: 0; border: 0; background: transparent; }
.tag-selector-list { max-height: none; }
.tag-selector-row { min-height: 50px; }
.tag-selector-row[aria-pressed="true"] { background: #303036; }
.tag-selector-recovery { margin-top: 14px; }
.tag-selector-recovery h3 { margin: 0 0 7px; font-size: .94rem; }
.tag-recovery-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; }
.tag-recovery-row + .tag-recovery-row { margin-top: 6px; }
.tag-recovery-row button { margin-inline-start: auto; }

.tag-designer-input { position: relative; }
.tag-designer-input .dialog-input { padding-inline-start: 45px; font-weight: 750; font-size: 1.2rem; max-width: 192px; }
.tag-designer-input-badge { position: absolute; inset-inline-start: 10px; top: 7px; font-size: 1.1rem !important; pointer-events: none; }
.tag-designer .pref { display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; min-height: 44px; padding: 8px 10px; background: var(--card); border-radius: 9px; }
.tag-designer .pref input { width: 21px; height: 21px; accent-color: #6468ed; }
.tag-designer .tag-swatch { aspect-ratio: 1; border-radius: 7px; font-size: clamp(1rem,3vw,1.38rem); }
.tag-designer-preview .primary { width: 100%; margin-top: 9px; }
.tag-preview-profile { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
@media (min-width: 900px) {
  dialog.server-tag-window { width: min(1120px, calc(100vw - 28px)); }
  .server-tag-window .settings-grid { grid-template-columns: 215px minmax(0,1fr); }
  .server-tag-window .settings-view { max-width: none; }
  .tag-designer { direction: ltr; grid-template-columns: minmax(220px,1fr) minmax(200px,.8fr); gap: 22px; }
  .tag-designer-preview { position: sticky; top: 0; }
  html[dir="rtl"] .tag-designer > * { direction: rtl; }
}
@media (max-width: 670px) {
  dialog.profile-studio-window {
    width: 100%;
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 25px 25px 0 0;
    margin: auto 0 0;
  }
  dialog.studio-picker-sheet {
    width: 100%;
    height: calc(100dvh - 54px);
    max-height: calc(100dvh - 54px);
    border-radius: 23px 23px 0 0;
    margin: auto 0 0;
  }
}

.server-tag { gap: 3px; }
.tag-mark { display: inline-grid; place-items: center; flex: none; }
.tag-mark svg { width: 1.05em; height: 1.05em; }
.tag-swatch .tag-mark svg { width: 25px; height: 25px; }
.server-tag .tag-mark { color: inherit; filter: drop-shadow(0 0 3px currentColor); }

.profile-meteor { --studio-effect: repeating-linear-gradient(132deg, transparent 0 46px,#bbdfff 48px,transparent 50px 92px),radial-gradient(ellipse at 70% 24%,#414dcde0,transparent 62%); --studio-animation: studio-meteor 3.6s linear infinite; }
.profile-ribbons { --studio-effect: repeating-radial-gradient(ellipse at 38% 112%,transparent 0 23px,#35edc66e 25px,#bb86ffbd 30px,transparent 39px 56px); --studio-animation: studio-ribbon 5s ease-in-out infinite alternate; }
.profile-petals { --studio-effect: radial-gradient(ellipse at 16% 14%,#ffd4ea 0 2%,transparent 3%),radial-gradient(ellipse at 44% 72%,#ff72a5 0 3%,transparent 4%),radial-gradient(ellipse at 78% 27%,#ffadcf 0 2%,transparent 3%),radial-gradient(ellipse at 92% 76%,#ffa9d3 0 2%,transparent 3%),radial-gradient(ellipse at 50% 96%,#be416773,transparent 70%); --studio-animation: studio-petals 4.8s ease-in-out infinite alternate; }
.profile-prism { --studio-effect: conic-gradient(from 45deg at 72% 60%,#23c7f4a1,transparent,#ab65ecc2,#ffcc7bad,transparent,#23c7f4a1); --studio-animation: studio-prism 4.4s ease-in-out infinite alternate; }
.member-profile-banner::after { animation: var(--studio-animation, none); }
@keyframes studio-meteor { from { transform: translate(8%,-16%) scale(1.35); opacity: .3; } 50% { opacity: .9; } to { transform: translate(-8%,16%) scale(1.35); opacity: .3; } }
@keyframes studio-ribbon { from { transform: skewX(-12deg) scale(1.2); } to { transform: skewX(14deg) scale(1.42); opacity: .55; } }
@keyframes studio-petals { from { transform: translateY(-8%) scale(1.17); } to { transform: translate(5%,8%) rotate(7deg) scale(1.2); opacity: .5; } }
@keyframes studio-prism { from { transform: scale(1.13); filter: hue-rotate(0deg); } to { transform: scale(1.35); filter: hue-rotate(75deg); opacity: .52; } }
@media (prefers-reduced-motion: reduce) { .member-profile-banner::after { animation: none; } }

.private-group-panel { display: grid; gap: 14px; }
.private-group-head { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.private-group-banner { display: block; width: 100%; height: clamp(78px,22vw,148px); object-fit: cover; }
.private-group-summary { display: flex; gap: 10px; align-items: center; padding: 9px 12px; }
.private-group-summary h3 { margin: 0; flex: 1; overflow-wrap: anywhere; }
.private-group-settings { padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; }
.private-group-settings summary { cursor: pointer; }
.private-group-member { display: flex; gap: 9px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.private-group-person { display: flex; align-items: center; gap: 7px; text-align: start; }