:root {
  --bg: #0d0d0f;
  --bg-2: #101011;
  --panel: #141416;
  --panel-2: #18181b;
  --panel-3: #1d1d21;
  --panel-hover: #222226;
  --line: rgba(255,255,255,.075);
  --line-strong: rgba(255,255,255,.13);
  --text: #f2f2f5;
  --muted: #8d8d99;
  --muted-2: #5d5d68;
  --accent: #8e76ff;
  --accent-2: #b3a5ff;
  --accent-dark: #5b45dd;
  --green: #58d6a1;
  --orange: #ffae62;
  --red: #ff6e7c;
  --blue: #68a6ff;
  --shadow: 0 24px 80px rgba(0,0,0,.42);
  --radius: 12px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); overflow: hidden; font-size: 13px; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 2px; }
input, textarea, select { color: var(--text); background: #0e0e10; border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; width: 100%; outline: none; transition: border .2s, box-shadow .2s; }
input:focus, textarea:focus, select:focus { border-color: rgba(142,118,255,.75); box-shadow: 0 0 0 3px rgba(142,118,255,.11); }
textarea { resize: vertical; min-height: 70px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #777 50%), linear-gradient(135deg, #777 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.hidden { display: none !important; }
.mobile-only { display: none !important; }
.desktop-titlebar { height: 34px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 500; border-bottom: 1px solid rgba(255,255,255,.065); background: #0a0a0c; -webkit-app-region: drag; user-select: none; }
.desktop-drag-region { min-width: 0; height: 100%; display: flex; align-items: center; gap: 8px; padding-left: 12px; }
.desktop-brand-mark { width: 23px; height: 23px; border-radius: 7px; font-size: 8px; box-shadow: none; }
.desktop-brand-mark .brand-pulse { width: 4px; height: 4px; left: -2px; top: -2px; box-shadow: 0 0 0 3px rgba(88,214,161,.11), 0 0 9px rgba(88,214,161,.45); }
.desktop-window-title { color: #ddd9ea; font-size: 10px; font-weight: 700; letter-spacing: -.01em; }
.desktop-window-subtitle { color: var(--muted-2); font-size: 9px; }
.desktop-window-actions { height: 100%; display: flex; align-items: stretch; -webkit-app-region: no-drag; }
.desktop-window-actions button { width: 46px; height: 100%; padding: 0; border: 0; background: transparent; color: #8f8d99; font-size: 16px; line-height: 1; }
.desktop-window-actions button:hover { color: #fff; background: rgba(255,255,255,.08); }
.desktop-window-actions button.desktop-close:hover { background: #c83f55; }
.boot-screen { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, rgba(91,69,221,.15), transparent 32%), var(--bg); }
.boot-card { display: grid; justify-items: center; gap: 12px; color: var(--muted); font-size: 10px; }
.boot-card .brand-mark { width: 48px; height: 48px; border-radius: 14px; }
.boot-spinner { width: 20px; height: 20px; border: 2px solid rgba(142,118,255,.22); border-top-color: var(--accent-2); border-radius: 50%; animation: boot-spin .8s linear infinite; }
@keyframes boot-spin { to { transform: rotate(360deg); } }

/* shared */
.eyebrow { color: var(--accent-2); font-size: 9px; letter-spacing: .21em; font-weight: 800; text-transform: uppercase; }
.mini-label { color: var(--muted-2); font-size: 9px; letter-spacing: .17em; font-weight: 800; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: #4e4e57; box-shadow: 0 0 0 3px rgba(78,78,87,.09); }
.status-dot.online { background: var(--green); box-shadow: 0 0 0 3px rgba(88,214,161,.11), 0 0 12px rgba(88,214,161,.45); }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; position: relative; border: 1px solid rgba(142,118,255,.46); border-radius: 10px; background: linear-gradient(145deg, #2b2450, #15131f 68%); color: #ded7ff; font-size: 11px; font-weight: 800; letter-spacing: -.08em; box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 8px 22px rgba(91,69,221,.17); }
.brand-mark-large { width: 56px; height: 56px; border-radius: 17px; font-size: 17px; margin: 0 0 21px; }
.brand-pulse { position: absolute; left: -2px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(88,214,161,.12), 0 0 16px rgba(88,214,161,.5); }
.btn { border: 0; border-radius: 8px; min-height: 38px; font-size: 11px; padding: 0 15px; display: inline-flex; gap: 10px; align-items: center; justify-content: center; color: var(--text); font-weight: 700; transition: transform .18s, background .18s, border .18s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--accent), #7059ee); box-shadow: 0 9px 22px rgba(91,69,221,.25); }
.btn-primary:hover { background: linear-gradient(135deg, #9d89ff, #785ff6); }
.btn-ghost { background: rgba(255,255,255,.045); border: 1px solid var(--line); color: #d0d0d7; }
.btn-ghost:hover { background: rgba(255,255,255,.09); border-color: var(--line-strong); }
.btn-danger { background: rgba(255,110,124,.12); color: #ff9da7; border: 1px solid rgba(255,110,124,.18); }
.btn-danger:hover { background: rgba(255,110,124,.2); }
.btn-voice { background: rgba(88,214,161,.13); border: 1px solid rgba(88,214,161,.24); color: #8de8c1; }
.btn-voice:hover { background: rgba(88,214,161,.21); }
.btn-small { min-height: 31px; padding: 0 11px; font-size: 11px; }
.btn-block { width: 100%; }
.icon-button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); transition: .18s; }
.icon-button:hover { color: var(--text); border-color: var(--line); background: rgba(255,255,255,.055); }
.icon-button.small { width: 27px; height: 27px; font-size: 13px; }
.icon-button.danger:hover { color: var(--red); border-color: rgba(255,110,124,.2); background: rgba(255,110,124,.09); }
.user-avatar { display: grid; place-items: center; border: 1px solid rgba(142,118,255,.48); border-radius: 50%; background: linear-gradient(145deg,#5545ae,#25203e); color: #eeeaff; font-weight: 800; }
.empty-state { color: var(--muted-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 200px; text-align: center; }
.empty-state.compact { min-height: 92px; font-size: 11px; }
.empty-icon { color: var(--accent); font-size: 25px; opacity: .7; }
.footer-spacer { flex: 1; }

/* auth */
.auth-screen { min-height: 100%; display: grid; place-items: center; position: relative; overflow: hidden; background: radial-gradient(circle at 17% 15%, rgba(104,77,231,.16), transparent 30%), radial-gradient(circle at 86% 88%, rgba(48,112,110,.1), transparent 28%), var(--bg); }
.auth-screen::before { content: ""; position: absolute; inset: 0; opacity: .23; background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(135deg, #000, transparent 74%); }
.auth-card { width: 405px; position: relative; z-index: 1; padding: 37px 39px 31px; border: 1px solid var(--line); border-radius: 18px; background: rgba(16,16,17,.88); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(24px); }
.auth-card h1 { max-width: 300px; margin: 13px 0 9px; font-size: 28px; line-height: 1.11; letter-spacing: -.055em; }
.auth-card > p { color: var(--muted); font-size: 12px; line-height: 1.65; max-width: 290px; margin: 0 0 24px; }
.auth-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.auth-tab { position: relative; padding: 0 0 11px; border: 0; background: transparent; color: var(--muted-2); font-size: 11px; font-weight: 700; }
.auth-tab.active { color: var(--text); }
.auth-tab.active::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; bottom: -1px; border-radius: 2px; background: var(--accent); }
.auth-form { display: grid; gap: 14px; }
.auth-form label, .modal-form label { display: grid; gap: 7px; color: #b4b4bf; font-size: 11px; font-weight: 600; }
.auth-form input { height: 43px; background: #0c0c0e; }
.auth-form .btn { margin-top: 5px; height: 44px; }
.btn-arrow { opacity: .75; font-size: 16px; }
.auth-foot { display: flex; align-items: center; gap: 7px; margin-top: 22px; color: var(--muted-2); font-size: 10px; }
.auth-side-copy { position: absolute; z-index: 1; left: max(60px, calc(50% - 620px)); bottom: 105px; display: grid; gap: 15px; color: var(--muted-2); }
.auth-side-copy > span { font-size: 9px; letter-spacing: .22em; font-weight: 800; color: var(--accent-2); }
.auth-side-copy strong { font-size: 24px; line-height: 1.12; letter-spacing: -.06em; }
.auth-side-copy em { color: var(--accent-2); font-style: normal; }
.auth-orbit { position: absolute; width: 480px; height: 480px; border: 1px solid rgba(142,118,255,.09); border-radius: 50%; transform: rotate(-26deg); }
.orbit-one { left: -260px; top: -220px; box-shadow: 0 0 80px rgba(91,69,221,.12), inset 0 0 80px rgba(91,69,221,.08); }
.orbit-two { right: -250px; bottom: -310px; border-color: rgba(88,214,161,.07); }

/* app shell */
.app-shell { display: grid; grid-template-columns: 68px 252px minmax(420px, 1fr) 242px; height: 100%; background: var(--bg); }
.server-rail { display: flex; flex-direction: column; justify-content: space-between; background: #0b0b0d; border-right: 1px solid var(--line); padding: 12px 9px 11px; }
.rail-top, .rail-bottom { display: flex; align-items: center; flex-direction: column; gap: 10px; }
.rail-top .brand-mark { margin-bottom: 5px; }
.rail-icon { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 13px; background: transparent; color: var(--muted-2); font-size: 19px; transition: .18s; }
.rail-icon:hover { color: var(--text); background: var(--panel-2); border-color: var(--line); }
.rail-icon.active { color: #eae6ff; background: linear-gradient(145deg, rgba(142,118,255,.26), rgba(142,118,255,.1)); border-color: rgba(142,118,255,.27); box-shadow: 0 8px 18px rgba(91,69,221,.12); }
.rail-divider { width: 29px; height: 1px; background: var(--line); margin: 1px 0; }
.server-rail-list { display: grid; gap: 9px; max-height: calc(100vh - 270px); overflow: auto; scrollbar-width: none; }
.server-rail-list::-webkit-scrollbar { display: none; }
.server-rail-item { width: 43px; height: 43px; display: grid; place-items: center; position: relative; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg,#25232a,#161619); color: #c8c3d0; font-weight: 800; transition: .2s; }
.server-rail-item:hover { color: #fff; border-color: rgba(142,118,255,.5); transform: translateY(-1px); }
.server-rail-item.active { border-color: var(--accent); background: linear-gradient(145deg,#6350ce,#2b235c); }
.server-rail-item::after { content: ""; position: absolute; right: -10px; width: 3px; height: 0; border-radius: 3px 0 0 3px; background: var(--accent); transition: height .2s; }
.server-rail-item.active::after { height: 22px; }
.server-rail-item small { position: absolute; bottom: -5px; right: -4px; min-width: 15px; height: 15px; display: grid; place-items: center; border: 2px solid #0b0b0d; border-radius: 10px; background: var(--green); color: #092117; font-size: 8px; }
.rail-add { border: 1px dashed rgba(142,118,255,.3); color: var(--accent-2); }
.rail-profile { width: 38px; height: 38px; font-size: 12px; }
.rail-logout { width: 33px; height: 30px; font-size: 16px; }
.server-sidebar { min-width: 0; display: flex; flex-direction: column; background: var(--bg-2); border-right: 1px solid var(--line); }
.server-sidebar-head { height: 69px; padding: 16px 14px 10px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.server-sidebar-head h2 { overflow: hidden; max-width: 185px; margin: 3px 0 0; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; letter-spacing: -.02em; }
.server-meta-line { display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 18px; color: var(--muted-2); font-size: 10px; }
.sidebar-search { margin: 8px 13px 15px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: #0c0c0e; color: var(--muted-2); }
.sidebar-search input { height: 31px; padding: 0; border: 0; background: transparent; font-size: 10px; box-shadow: none; }
.tree-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 15px 8px 18px; color: var(--muted-2); font-size: 9px; letter-spacing: .15em; font-weight: 800; }
.tree-heading button, .tiny-add { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 15px; }
.tree-heading button:hover, .tiny-add:hover { color: var(--accent-2); background: rgba(142,118,255,.11); }
.channel-tree { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 17px; scrollbar-width: thin; scrollbar-color: #303037 transparent; }
.channel-tree.empty-tree { padding: 0 15px; }
.channel-node { margin-bottom: 2px; }
.channel-row { display: flex; align-items: center; min-height: 35px; gap: 6px; position: relative; padding: 0 7px; border-radius: 7px; color: #a4a4af; cursor: pointer; user-select: none; transition: .15s; }
.channel-row:hover { color: var(--text); background: rgba(255,255,255,.045); }
.channel-row.active { color: #e9e5ff; background: rgba(142,118,255,.14); }
.channel-row.active::before { content: ""; position: absolute; left: -8px; width: 2px; height: 17px; border-radius: 0 3px 3px 0; background: var(--accent); }
.channel-caret { width: 14px; color: var(--muted-2); font-size: 11px; text-align: center; }
.channel-caret.empty { opacity: 0; }
.channel-glyph { width: 18px; color: var(--muted-2); font-size: 14px; }
.channel-row.active .channel-glyph { color: var(--accent-2); }
.channel-name { flex: 1; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.channel-count { color: var(--muted-2); font-size: 9px; }
.channel-actions { display: none; gap: 2px; }
.channel-row:hover .channel-actions { display: flex; }
.channel-action { width: 19px; height: 19px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 11px; }
.channel-action:hover { color: var(--accent-2); background: rgba(255,255,255,.08); }
.channel-row.has-talking { border: 1px solid rgba(104,166,255,.75); box-shadow: 0 0 0 2px rgba(104,166,255,.08), 0 0 14px rgba(104,166,255,.16); color: #e6f0ff; }
.channel-row.has-talking .channel-glyph, .channel-row.has-talking .channel-name { color: #a8caff; }
.channel-member-row { min-height: 30px; display: flex; align-items: center; gap: 7px; padding: 3px 7px 3px 16px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); transition: .15s; }
.channel-member-row:hover { color: var(--text); background: rgba(255,255,255,.04); }
.channel-member-row.talking { border-color: rgba(104,166,255,.86); background: rgba(104,166,255,.1); box-shadow: 0 0 0 2px rgba(104,166,255,.07), 0 0 15px rgba(104,166,255,.18); }
.channel-member-avatar { width: 21px; height: 21px; position: relative; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(142,118,255,.36); border-radius: 6px; background: linear-gradient(145deg,#4a3e91,#211d35); color: #e8e4ff; font-size: 8px; font-weight: 800; }
.channel-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tree-status-dot { width: 6px; height: 6px; position: absolute; right: -2px; bottom: -2px; border: 1px solid var(--bg-2); border-radius: 50%; background: var(--green); box-shadow: 0 0 7px rgba(88,214,161,.55); }
.channel-member-copy { min-width: 0; flex: 1; display: grid; gap: 1px; }
.channel-member-copy strong { overflow: hidden; color: #c8c6d1; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.channel-member-copy strong small { color: var(--accent-2); font-size: 8px; }
.channel-member-copy em { overflow: hidden; color: var(--muted-2); font-size: 7px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.channel-member-row.talking .channel-member-copy strong, .channel-member-row.talking .channel-member-copy em, .channel-member-device.talking { color: #91bcff; }
.channel-member-row.talking .channel-member-avatar { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(104,166,255,.13); }
.channel-member-row .channel-member-device { color: var(--muted-2); font-size: 10px; }
.channel-member-row .channel-member-device.muted { color: var(--red); }
.channel-member-tools { display: none; gap: 2px; margin-left: auto; }.channel-member-row:hover .channel-member-tools { display: flex; }.channel-member-tools button { width: 17px; height: 17px; padding: 0; border: 0; border-radius: 4px; color: var(--muted); background: transparent; font-size: 9px; }.channel-member-tools button:hover { color: var(--red); background: rgba(255,110,124,.11); }
.channel-children { margin-left: 17px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.045); }
.sidebar-bottom { padding: 11px 10px; border-top: 1px solid var(--line); }
.connection-card { min-height: 51px; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.025); }
.connection-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: rgba(88,214,161,.07); }
.connection-card > div:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.connection-card strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.connection-card small { overflow: hidden; color: var(--green); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.connection-card .icon-button { color: var(--muted-2); }

/* workspace */
.workspace { display: flex; min-width: 0; flex-direction: column; background: #111113; }
.workspace-header { height: 69px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 19px; border-bottom: 1px solid var(--line); background: rgba(17,17,19,.9); }
.channel-heading { min-width: 0; display: flex; align-items: center; gap: 11px; }
.hash-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: var(--accent-2); background: rgba(142,118,255,.12); font-size: 16px; }
.channel-heading h1 { overflow: hidden; max-width: 430px; margin: 0 0 3px; font-size: 14px; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.channel-heading p { overflow: hidden; max-width: 430px; margin: 0; color: var(--muted-2); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-actions { display: flex; align-items: center; gap: 5px; }
.header-action { min-width: 31px; height: 31px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 7px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font-size: 14px; }
.header-action:hover { color: var(--text); border-color: var(--line); background: rgba(255,255,255,.045); }
.header-action kbd { color: var(--muted-2); font-size: 8px; }
.shield-icon { font-size: 17px; color: var(--accent-2); }
.voice-banner { display: flex; align-items: center; gap: 12px; margin: 13px 17px 0; min-height: 54px; padding: 9px 12px; border: 1px solid rgba(88,214,161,.22); border-radius: 10px; background: linear-gradient(105deg, rgba(88,214,161,.1), rgba(88,214,161,.025)); }
.voice-banner > div:nth-child(2) { display: grid; gap: 3px; }
.voice-banner strong { font-size: 10px; }
.voice-banner small { color: var(--green); font-size: 9px; }
.voice-wave { display: flex; align-items: center; gap: 2px; width: 29px; height: 28px; padding: 0 5px; border-radius: 7px; background: rgba(88,214,161,.1); }
.voice-wave span { flex: 1; height: 7px; border-radius: 2px; background: var(--green); animation: wave 1.1s ease-in-out infinite alternate; }
.voice-wave span:nth-child(2) { height: 15px; animation-delay: -.4s; }.voice-wave span:nth-child(3) { height: 20px; animation-delay: -.8s; }.voice-wave span:nth-child(4) { height: 12px; animation-delay: -.5s; }.voice-wave span:nth-child(5) { height: 8px; animation-delay: -.2s; }
@keyframes wave { from { transform: scaleY(.55); opacity: .5; } to { transform: scaleY(1.1); opacity: 1; } }
.voice-banner-users { flex: 1; display: flex; justify-content: flex-end; }
.voice-banner-users .mini-avatar { margin-left: -5px; }
.voice-banner .btn { min-height: 29px; padding: 0 10px; font-size: 10px; }
.chat-view { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.welcome-panel { position: absolute; inset: 0; display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 30px; text-align: center; overflow: hidden; }
.welcome-glow { position: absolute; width: 410px; height: 230px; top: 13%; border-radius: 50%; background: rgba(111,87,235,.12); filter: blur(70px); }
.welcome-logo { position: relative; z-index: 1; margin-bottom: 23px; color: rgba(221,215,255,.9); font-size: 32px; font-weight: 800; letter-spacing: -.13em; text-shadow: 0 0 32px rgba(142,118,255,.28); }
.welcome-logo span { color: var(--green); font-size: 15px; vertical-align: 7px; margin-left: 3px; }
.welcome-panel h2 { position: relative; z-index: 1; margin: 12px 0 12px; font-size: 30px; line-height: 1.06; letter-spacing: -.07em; }
.welcome-panel h2 em { color: var(--accent-2); font-style: normal; }
.welcome-panel p { position: relative; z-index: 1; max-width: 405px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.welcome-chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 23px; }
.welcome-chips span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted-2); background: rgba(255,255,255,.025); font-size: 9px; }
.messages-list { height: 100%; overflow: auto; padding: 24px 21px 15px; scrollbar-width: thin; scrollbar-color: #303037 transparent; }
.message {
  display: flex;
  gap: 10px;
  margin: 8px 0 18px;
  padding: 5px 8px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.message:hover {
  background: rgba(255, 255, 255, .025);
}
.message-avatar { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(142,118,255,.25); border-radius: 10px; background: linear-gradient(145deg,#4d3e9c,#29213f); color: #e5e1ff; font-weight: 800; font-size: 11px; }
.message-body { min-width: 0; }
.message-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.message-author { color: #d9d6df; font-size: 11px; font-weight: 700; }
.message-time { color: var(--muted-2); font-size: 9px; }
.message-text { color: #b5b4be; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.voice-join-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 17px 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.025); }
.voice-join-status { display: flex; align-items: center; gap: 9px; }
.voice-status-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: var(--green); background: rgba(88,214,161,.1); font-size: 11px; }
.voice-join-status div { display: grid; gap: 3px; }.voice-join-status strong { font-size: 10px; }.voice-join-status small { color: var(--muted); font-size: 9px; }
.voice-join-strip .btn { min-height: 30px; padding: 0 11px; font-size: 10px; }
.composer { min-height: 54px; display: flex; align-items: center; gap: 8px; margin: 0 17px 7px; padding: 8px 9px; border-radius: 0px;  }
.composer input { height: 35px; flex: 1; padding: 0 4px; border: 0; background: transparent; box-shadow: none; font-size: 11px; }
.composer-tool { width: 25px; height: 28px; padding: 0; border: 0; color: var(--muted-2); background: transparent; font-size: 17px; }
.composer-tool:hover { color: var(--accent-2); }.send-button { width: 28px; height: 28px; border: 0; border-radius: 7px; color: #fff; background: var(--accent); font-weight: 800; font-size: 16px; }
.workspace-footer { min-height: 24px; display: flex; align-items: center; gap: 7px; padding: 0 19px 7px; color: var(--muted-2); font-size: 9px; }.footer-separator { color: #393940; }.lock-icon { color: var(--green); font-size: 13px; }

/* members */
.members-sidebar { min-width: 0; display: flex; flex-direction: column; background: var(--bg-2); border-left: 1px solid var(--line); }
.members-head { min-height: 69px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--line); }.members-head h3 { margin: 4px 0 0; font-size: 11px; }.count-pill { min-width: 22px; height: 20px; display: grid; place-items: center; border: 1px solid rgba(142,118,255,.25); border-radius: 7px; color: var(--accent-2); background: rgba(142,118,255,.09); font-size: 9px; font-weight: 800; }
.members-list { flex: 1; min-height: 0; overflow: auto; padding: 15px 10px; }.member-section-label { padding: 0 7px 8px; color: var(--muted-2); font-size: 9px; letter-spacing: .12em; font-weight: 800; }.member-row { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 5px 7px; border-radius: 7px; transition: .15s; }.member-row:hover { background: rgba(255,255,255,.045); }.member-avatar { width: 28px; height: 28px; position: relative; display: grid; place-items: center; border: 1px solid rgba(142,118,255,.22); border-radius: 9px; background: linear-gradient(145deg,#3b326d,#211e2f); color: #d7d1ff; font-size: 10px; font-weight: 800; }.member-avatar .status-dot { position: absolute; right: -2px; bottom: -2px; width: 8px; height: 8px; border: 2px solid var(--bg-2); }.member-info { min-width: 0; flex: 1; display: grid; gap: 3px; }.member-name { overflow: hidden; color: #c9c7cf; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.member-role { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.member-tools { display: none; }.member-row:hover .member-tools { display: flex; }.member-tool { width: 19px; height: 19px; padding: 0; border: 0; color: var(--muted); border-radius: 4px; background: transparent; font-size: 10px; }.member-tool:hover { color: var(--red); background: rgba(255,110,124,.1); }.members-foot { min-height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 9px; }
.mini-avatar { width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid #18201d; border-radius: 50%; color: #fff; background: #4b3f91; font-size: 8px; font-weight: 800; }

/* Denser Dismox room dashboard and room controls */
.welcome-panel { justify-content: flex-start; padding-top: 38px; overflow: auto; }
.welcome-panel h2 { margin-bottom: 8px; }
.room-dashboard-cards { width: min(760px, 100%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; position: relative; z-index: 1; margin-top: 24px; }
.room-card { min-height: 82px; display: grid; align-content: space-between; gap: 9px; padding: 11px; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.018)); transition: .18s; }
.room-card:hover { border-color: rgba(142,118,255,.36); transform: translateY(-2px); background: linear-gradient(145deg, rgba(142,118,255,.13), rgba(255,255,255,.025)); }
.room-card-head { display: flex; align-items: center; gap: 7px; min-width: 0; }.room-card-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: var(--accent-2); background: rgba(142,118,255,.12); font-size: 11px; }.room-card-name { overflow: hidden; color: #d4d1dc; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.room-card-foot { display: flex; align-items: center; justify-content: space-between; color: var(--muted-2); font-size: 8px; }.room-live { display: inline-flex; align-items: center; gap: 5px; color: var(--green); }.room-live .status-dot { width: 5px; height: 5px; }.room-card .room-join { border: 0; color: var(--accent-2); background: transparent; font-size: 8px; font-weight: 700; }
.command-center { width: min(760px, 100%); position: relative; z-index: 1; margin-top: 19px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(13,13,15,.62); text-align: left; }.command-center-head { display: flex; align-items: center; justify-content: space-between; padding: 0 3px 9px; color: var(--muted-2); font-size: 8px; letter-spacing: .17em; font-weight: 800; }.command-center-head small { color: var(--muted-2); font-size: 8px; letter-spacing: 0; font-weight: 500; }.command-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.command-grid button { min-height: 62px; display: grid; grid-template-columns: 27px 1fr; grid-template-rows: 1fr 1fr; align-items: center; column-gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: rgba(255,255,255,.025); text-align: left; transition: .18s; }.command-grid button:hover { border-color: rgba(142,118,255,.4); background: rgba(142,118,255,.09); }.command-grid button > span { grid-row: 1 / 3; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: var(--accent-2); background: rgba(142,118,255,.12); font-size: 13px; }.command-grid strong { align-self: end; font-size: 9px; }.command-grid small { align-self: start; color: var(--muted-2); font-size: 8px; }
.channel-intro { max-width: 700px; margin: 20px auto 0; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(135deg, rgba(142,118,255,.07), rgba(255,255,255,.018)); }.channel-intro-top { display: flex; align-items: center; gap: 11px; }.channel-intro-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--accent-2); background: rgba(142,118,255,.13); font-size: 16px; }.channel-intro h3 { margin: 0 0 4px; font-size: 12px; }.channel-intro p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }.channel-intro-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }.channel-intro-meta span { padding: 6px 8px; border-radius: 6px; color: var(--muted-2); background: rgba(255,255,255,.045); font-size: 8px; }.channel-intro-meta .live { color: var(--green); background: rgba(88,214,161,.08); }
.channel-row[draggable="true"] { cursor: grab; }.channel-row[draggable="true"]:active { cursor: grabbing; }.channel-row.dragging { opacity: .42; }.channel-row.drag-over { outline: 1px dashed var(--accent); background: rgba(142,118,255,.13); }
.members-head h3 { overflow: hidden; max-width: 160px; text-overflow: ellipsis; white-space: nowrap; }
.context-menu { position: fixed; z-index: 70; width: 204px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 10px; background: #171719; box-shadow: 0 18px 50px rgba(0,0,0,.5); }.context-heading { padding: 7px 9px 6px; color: var(--muted-2); font-size: 8px; letter-spacing: .15em; font-weight: 800; }.context-menu button { width: 100%; min-height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 9px; border: 0; border-radius: 6px; color: #c6c4cc; background: transparent; font-size: 10px; text-align: left; }.context-menu button:hover { color: #fff; background: rgba(142,118,255,.13); }.context-menu button span { width: 17px; color: var(--accent-2); font-size: 13px; text-align: center; }.context-menu .context-danger { color: #ff9da7; }.context-menu .context-danger span { color: var(--red); }.context-divider { height: 1px; margin: 5px 3px; background: var(--line); }

/* Permission center: denser cards, readable columns, stronger hierarchy */
.permissions-modal { max-width: 1030px; border-radius: 18px; background: #121214; }.permissions-modal .modal-head { padding: 24px 27px 19px; background: linear-gradient(120deg, rgba(142,118,255,.08), transparent 55%); }.permissions-modal .modal-head h2 { font-size: 21px; }.permissions-modal .permission-layout { height: 640px; grid-template-columns: 258px minmax(0, 1fr); }.permissions-modal .permission-groups { padding: 20px 14px; background: linear-gradient(180deg, #101012, #141416); }.permissions-modal .section-label { padding: 0 10px 10px; color: #6d6d79; }.permissions-modal .channel-group-label { margin-top: 27px; }.permissions-modal .group-item, .permissions-modal .fake-group { min-height: 43px; margin-bottom: 4px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; }.permissions-modal .group-item:hover, .permissions-modal .fake-group:hover { border-color: var(--line); background: rgba(255,255,255,.045); }.permissions-modal .group-item.active { border-color: rgba(142,118,255,.42); color: #eeeaff; background: linear-gradient(100deg, rgba(142,118,255,.19), rgba(142,118,255,.06)); box-shadow: inset 0 0 0 1px rgba(142,118,255,.06); }.permissions-modal .group-mark { width: 25px; height: 25px; border-radius: 8px; }.permissions-modal .permission-editor-head { padding: 22px 24px 17px; background: rgba(255,255,255,.012); }.permissions-modal .permission-editor-head h3 { font-size: 17px; }.permissions-modal .permission-search { margin: 16px 24px 0; border-radius: 9px; }.permissions-modal .permission-list { padding: 13px 24px; }.permissions-modal .permission-category { margin-top: 12px; padding: 0 2px 4px; }.permissions-modal .permission-row { grid-template-columns: minmax(245px, 1fr) 85px 80px 27px; min-height: 54px; padding: 0 4px; }.permissions-modal .permission-row:hover { border-radius: 8px; background: rgba(255,255,255,.025); }.permissions-modal .permission-label strong { font-size: 10px; }.permissions-modal .permission-key { color: #777581; font-size: 10px; font-weight: 800; text-align: center; }.permissions-modal .permission-editor-foot { padding: 10px 24px; background: rgba(255,255,255,.012); }

/* Live room cards and the selected-channel member surface */
.room-card { grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; min-height: 70px; gap: 9px; color: var(--text); cursor: pointer; }
.room-card-icon { grid-row: 1; }
.room-card-main { min-width: 0; display: grid; gap: 4px; }
.room-card-main strong { overflow: hidden; color: #d9d6e3; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.room-card-main small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.room-card-side { min-width: 28px; display: grid; gap: 3px; text-align: right; }
.room-card-side b { color: #d4d0e7; font-size: 10px; }
.room-card-side small { color: var(--muted-2); font-size: 8px; }
.room-card.is-live { border-color: rgba(88,214,161,.34); background: linear-gradient(145deg, rgba(88,214,161,.1), rgba(255,255,255,.02)); }
.room-card.is-live .room-card-icon { color: var(--green); background: rgba(88,214,161,.12); }
.dashboard-empty { width: 100%; padding: 19px; border: 1px dashed rgba(255,255,255,.12); border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.018); font-size: 10px; box-sizing: border-box; }
.channel-live-tag { margin-left: 5px; padding: 3px 5px; border-radius: 4px; color: var(--green); background: rgba(88,214,161,.1); font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.channel-intro { display: flex; align-items: flex-start; gap: 12px; }
.channel-intro > div:nth-child(2) { min-width: 0; }
.channel-intro strong { display: block; margin: 1px 0 5px; color: #e4e0ee; font-size: 12px; }
.channel-intro small { display: block; margin-top: 10px; color: var(--accent-2); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
.member-row.talking { background: rgba(88,214,161,.08); box-shadow: inset 2px 0 0 var(--green); }
.member-row.talking .member-avatar { border-color: rgba(88,214,161,.7); box-shadow: 0 0 0 3px rgba(88,214,161,.08); }
.member-row.talking .member-role { color: var(--green); }
#channel-group-list { min-height: 20px; }
.channel-group-delete { color: var(--orange) !important; }
.channel-detail-card { display: grid; gap: 10px; margin: 4px 2px; padding: 17px 13px; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(145deg, rgba(142,118,255,.08), rgba(255,255,255,.015)); }
.channel-detail-card .detail-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--accent-2); background: rgba(142,118,255,.13); font-size: 12px; font-weight: 800; }
.channel-detail-card strong { color: #dfdced; font-size: 11px; }
.channel-detail-card p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.detail-grid span { display: grid; gap: 2px; padding: 8px; border: 1px solid rgba(255,255,255,.06); border-radius: 7px; background: rgba(255,255,255,.025); }
.detail-grid b { color: #d7d2eb; font-size: 12px; }.detail-grid small { color: var(--muted-2); font-size: 8px; }.tree-hint { padding-top: 5px; border-top: 1px solid var(--line); color: var(--blue); font-size: 8px; line-height: 1.4; }

/* Fixed room type indicator */
.readonly-field { min-height: 38px; display: flex; align-items: center; padding: 0 11px; border: 1px solid rgba(104,166,255,.2); border-radius: 8px; color: #a8caff; background: rgba(104,166,255,.07); font-size: 10px; }

/* modals */
.modal-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.68); backdrop-filter: blur(9px); }
.modal { width: min(100%, 540px); max-height: min(780px, calc(100vh - 40px)); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 15px; background: #131315; box-shadow: var(--shadow); animation: modal-in .2s ease-out; }.modal-medium { max-width: 540px; }.modal-small { max-width: 390px; }.modal-wide { width: min(100%, 920px); max-width: 920px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; justify-content: space-between; gap: 20px; padding: 22px 23px 18px; border-bottom: 1px solid var(--line); }.modal-head h2 { margin: 5px 0 0; font-size: 19px; letter-spacing: -.04em; }.modal-head p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }.modal-close { width: 29px; height: 29px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: rgba(255,255,255,.035); font-size: 19px; line-height: 1; }.modal-close:hover { color: var(--text); background: rgba(255,255,255,.085); }
.modal-form { display: grid; gap: 14px; padding: 21px 23px 23px; }.modal-form small { color: var(--muted-2); font-size: 9px; font-weight: 400; }.optional { color: var(--muted-2); font-size: 9px; font-weight: 400; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.check-field { min-height: 65px; display: flex !important; align-items: center; align-content: center; grid-template-columns: auto 1fr !important; gap: 9px !important; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; }.check-field input { width: 15px; height: 15px; accent-color: var(--accent); }.check-field span { color: #b4b4bf; }.modal-foot { display: flex; align-items: center; gap: 9px; margin-top: 5px; padding-top: 15px; border-top: 1px solid var(--line); }
.permission-layout { height: 610px; display: grid; grid-template-columns: 215px 1fr; min-height: 0; }.permission-groups { overflow: auto; padding: 18px 11px; border-right: 1px solid var(--line); background: #111113; }.section-label { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 9px; color: var(--muted-2); font-size: 9px; letter-spacing: .13em; font-weight: 800; }.channel-group-label { margin-top: 24px; }.group-item, .fake-group { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 9px; border-radius: 7px; color: var(--muted); font-size: 10px; cursor: pointer; }.group-item:hover, .fake-group:hover { color: var(--text); background: rgba(255,255,255,.045); }.group-item.active { color: #e4dfff; background: rgba(142,118,255,.14); }.group-mark { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 6px; color: var(--accent-2); background: rgba(142,118,255,.12); font-size: 12px; }.group-mark.query { color: var(--orange); background: rgba(255,174,98,.1); }.group-mark.channel { color: var(--green); background: rgba(88,214,161,.1); }.group-item em { margin-left: auto; color: var(--muted-2); font-size: 8px; font-style: normal; }.permission-editor { min-width: 0; display: flex; flex-direction: column; }.permission-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 15px; border-bottom: 1px solid var(--line); }.permission-editor-head h3 { margin: 5px 0 4px; font-size: 16px; letter-spacing: -.04em; }.permission-editor-head p { margin: 0; color: var(--muted); font-size: 10px; }.permission-head-actions { display: flex; align-items: center; gap: 6px; }.permission-search { display: flex; align-items: center; gap: 8px; margin: 13px 20px 0; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted-2); background: #0e0e10; }.permission-search input { height: 32px; padding: 0; border: 0; box-shadow: none; background: transparent; font-size: 10px; }.permission-list { flex: 1; overflow: auto; padding: 12px 20px; scrollbar-width: thin; scrollbar-color: #303037 transparent; }.permission-category { margin: 10px 0 3px; color: var(--accent-2); font-size: 9px; letter-spacing: .14em; font-weight: 800; }.permission-row { display: grid; grid-template-columns: minmax(160px, 1fr) 75px 75px 55px; align-items: center; gap: 6px; min-height: 47px; border-bottom: 1px solid rgba(255,255,255,.04); }.permission-row:hover { background: rgba(255,255,255,.02); }.permission-label { min-width: 0; display: grid; gap: 3px; }.permission-label strong { overflow: hidden; color: #c5c3cb; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.permission-label small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.permission-value input { height: 28px; padding: 0 7px; text-align: center; font-size: 10px; }.permission-toggle { width: 35px; height: 20px; position: relative; border: 0; border-radius: 12px; background: #2b2b31; }.permission-toggle span { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #757580; transition: .2s; }.permission-toggle.active { background: rgba(142,118,255,.65); }.permission-toggle.active span { left: 18px; background: #fff; }.permission-type { color: var(--muted-2); font-size: 8px; text-align: center; text-transform: uppercase; }.permission-editor-foot { display: flex; align-items: center; gap: 13px; min-height: 50px; padding: 9px 20px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 9px; }.legend-dot { width: 6px; height: 6px; display: inline-block; margin-right: 3px; border-radius: 50%; }.legend-dot.bool { background: var(--green); }.legend-dot.power { background: var(--accent); }.legend-dot.integer { background: var(--orange); }.permission-editor-foot .btn { margin-left: auto; }
.settings-tabs { display: flex; gap: 17px; padding: 0 23px; border-bottom: 1px solid var(--line); }.settings-tab { padding: 14px 0 11px; position: relative; border: 0; color: var(--muted); background: transparent; font-size: 10px; font-weight: 700; }.settings-tab.active { color: var(--text); }.settings-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }.settings-panel { display: none; }.settings-panel.active { display: block; }.settings-danger { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid rgba(255,174,98,.15); border-radius: 8px; background: rgba(255,174,98,.045); }.settings-danger div { display: grid; gap: 3px; }.settings-danger strong { font-size: 11px; }.settings-danger small { color: var(--muted); font-size: 9px; }.toggle-switch { width: 38px; height: 22px; position: relative; padding: 0; border: 0; border-radius: 14px; background: #2d2d34; }.toggle-switch span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #777783; transition: .2s; }.toggle-switch.active { background: rgba(88,214,161,.55); }.toggle-switch.active span { left: 19px; background: #fff; }.query-intro { display: flex; align-items: center; gap: 11px; margin: 20px 23px 13px; }.query-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; color: var(--orange); background: rgba(255,174,98,.1); font-size: 17px; }.query-intro strong { font-size: 11px; }.query-intro p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }.token-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; padding: 0 23px; }.token-form input, .token-form select { height: 35px; padding: 0 9px; font-size: 10px; }.token-form .btn { min-height: 35px; font-size: 10px; white-space: nowrap; }.generated-token { display: flex; align-items: center; gap: 9px; margin: 12px 23px 0; padding: 9px; border: 1px solid rgba(88,214,161,.2); border-radius: 7px; background: rgba(88,214,161,.06); }.generated-token span { color: var(--green); font-size: 9px; }.generated-token code { flex: 1; overflow: hidden; color: #bdf3d9; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.query-terminal { margin: 18px 23px 23px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #0b0b0d; }.terminal-head { height: 28px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-bottom: 1px solid var(--line); background: #111113; }.terminal-head span { display: flex; gap: 4px; }.terminal-head i { width: 6px; height: 6px; display: block; border-radius: 50%; background: #5b5b65; }.terminal-head i:first-child { background: #ff6e7c; }.terminal-head i:nth-child(2) { background: #ffae62; }.terminal-head i:nth-child(3) { background: #58d6a1; }.terminal-head small { color: var(--muted-2); font-size: 8px; }.terminal-output { min-height: 100px; max-height: 175px; overflow: auto; padding: 11px; color: #8dddb8; font: 10px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }.terminal-input { display: flex; align-items: center; gap: 7px; border-top: 1px solid var(--line); padding: 0 10px; }.terminal-input span { color: var(--accent-2); font: 16px ui-monospace, monospace; }.terminal-input input { height: 32px; padding: 0; border: 0; box-shadow: none; background: transparent; color: #d4d0ff; font: 10px ui-monospace, monospace; }.terminal-input button { border: 0; background: transparent; color: var(--accent-2); font-size: 9px; font-weight: 700; }.audit-list { max-height: 430px; overflow: auto; padding: 15px 23px 23px; }.audit-row { display: flex; gap: 9px; padding: 10px 0; border-bottom: 1px solid var(--line); }.audit-dot { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--accent); }.audit-row div { min-width: 0; display: grid; gap: 3px; }.audit-row strong { font-size: 10px; }.audit-row small { color: var(--muted); font-size: 9px; }.audit-row time { margin-left: auto; color: var(--muted-2); font-size: 8px; white-space: nowrap; }

/* toast */
.toast-stack { position: fixed; z-index: 100; top: 17px; right: 18px; display: grid; gap: 8px; width: min(320px, calc(100% - 36px)); }.toast { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: #171719; box-shadow: 0 14px 35px rgba(0,0,0,.35); animation: toast-in .22s ease-out; }.toast::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }.toast.error::before { background: var(--red); box-shadow: 0 0 10px var(--red); }.toast span { color: #c9c7cf; font-size: 10px; line-height: 1.5; }.toast.out { opacity: 0; transform: translateX(10px); transition: .2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (max-width: 1120px) { .app-shell { grid-template-columns: 61px 225px minmax(360px, 1fr) 215px; }.members-sidebar { font-size: 11px; }.workspace-header { padding: 0 13px; }.messages-list { padding-left: 15px; padding-right: 15px; } }
@media (max-width: 900px) { .app-shell { grid-template-columns: 61px 225px minmax(0, 1fr); }.members-sidebar { position: fixed; z-index: 15; top: 0; right: 0; bottom: 0; width: 245px; transform: translateX(100%); transition: transform .25s; box-shadow: -18px 0 50px rgba(0,0,0,.45); }.members-sidebar.open { transform: none; }.mobile-only { display: grid !important; }.auth-side-copy { display: none; }.modal-wide { width: min(100%, 94vw); }.permission-layout { grid-template-columns: 180px 1fr; } }
@media (max-width: 650px) { body { font-size: 12px; }.app-shell { grid-template-columns: 56px minmax(0, 1fr); }.server-sidebar { position: fixed; z-index: 14; left: 56px; top: 0; bottom: 0; width: 245px; transform: translateX(-110%); transition: transform .25s; box-shadow: 18px 0 50px rgba(0,0,0,.35); }.server-sidebar.open { transform: none; }.server-rail { padding-left: 7px; padding-right: 6px; }.rail-icon, .server-rail-item { width: 39px; height: 39px; }.workspace-header { height: 62px; }.channel-heading p { max-width: 160px; }.workspace-actions .header-action:nth-child(2) { display: none; }.welcome-panel h2 { font-size: 26px; }.welcome-panel p { max-width: 300px; }.composer { margin-left: 10px; margin-right: 10px; }.voice-banner { margin-left: 10px; margin-right: 10px; }.voice-banner-users { display: none; }.workspace-footer { padding-left: 11px; padding-right: 11px; }.auth-card { width: min(405px, calc(100% - 34px)); padding: 30px 25px; }.permission-layout { display: block; height: min(650px, calc(100vh - 150px)); overflow: auto; }.permission-groups { height: 150px; border-right: 0; border-bottom: 1px solid var(--line); }.permission-group-list { display: flex; overflow: auto; gap: 5px; }.group-item { min-width: max-content; }.channel-group-label, .fake-group { display: none; }.permission-editor { height: 490px; }.permission-row { grid-template-columns: minmax(120px, 1fr) 52px 52px 43px; }.permission-editor-foot { flex-wrap: wrap; }.permission-editor-foot .btn { width: 100%; margin-left: 0; }.token-form { grid-template-columns: 1fr 1fr; }.token-form .btn { grid-column: 1 / -1; }.form-grid { grid-template-columns: 1fr; }.modal-head { padding-left: 17px; padding-right: 17px; }.modal-form { padding-left: 17px; padding-right: 17px; } }

@media (max-width: 900px) { .room-dashboard-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 650px) { .room-dashboard-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }.room-card { min-height: 64px; padding: 9px; }.room-card-main small { display: none; }.command-grid { grid-template-columns: 1fr; }.permissions-modal .permission-groups { height: 184px; }.permissions-modal .channel-group-label { display: flex; margin-top: 16px; }.permissions-modal #channel-group-list { display: flex; gap: 5px; overflow-x: auto; }.permissions-modal #channel-group-list .group-item { min-width: max-content; } }

/* Dismox channel-tree layout: the center is the long channel list, the right rail is server profile + chat. */
.app-shell { grid-template-columns: 68px 246px minmax(520px, 1fr) 356px; }
.server-sidebar { background: #101011; }
.sidebar-overview { flex: 1; min-height: 0; padding: 22px 17px; }
.sidebar-overview-label { margin-bottom: 10px; color: var(--muted-2); font-size: 8px; letter-spacing: .16em; font-weight: 800; }
.sidebar-overview-card { display: flex; align-items: center; gap: 9px; padding: 11px 10px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg, rgba(142,118,255,.1), rgba(255,255,255,.02)); }
.sidebar-overview-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--accent-2); background: rgba(142,118,255,.16); font-size: 13px; }
.sidebar-overview-card div { min-width: 0; display: grid; gap: 3px; }.sidebar-overview-card strong { color: #d9d6e5; font-size: 10px; }.sidebar-overview-card small { color: var(--muted-2); font-size: 8px; line-height: 1.35; }
.sidebar-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }.sidebar-overview-grid span { display: grid; gap: 3px; padding: 9px; border: 1px solid rgba(255,255,255,.06); border-radius: 8px; background: rgba(255,255,255,.025); }.sidebar-overview-grid b { color: #ddd9ee; font-size: 13px; }.sidebar-overview-grid small { color: var(--muted-2); font-size: 8px; }
.sidebar-overview-note { margin-top: 13px; padding: 10px; border-left: 2px solid rgba(142,118,255,.48); color: var(--muted-2); font-size: 8px; line-height: 1.55; }
.channel-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 22px 27px 0; background: radial-gradient(circle at 50% 0%, rgba(142,118,255,.055), transparent 45%); }
.channel-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 1px 18px; border-bottom: 1px solid var(--line); }.channel-stage-head > div:first-child { min-width: 0; display: grid; gap: 5px; }.channel-stage-head strong { overflow: hidden; color: #e8e5f0; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }.channel-stage-head small { color: var(--muted-2); font-size: 9px; }
.channel-stage-tools { display: flex; align-items: center; gap: 8px; }.channel-search { width: min(235px, 30vw); display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted-2); background: #0d0d0f; }.channel-search input { height: 32px; padding: 0; border: 0; box-shadow: none; background: transparent; font-size: 10px; }.channel-create-button { min-height: 33px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border: 1px solid rgba(142,118,255,.28); border-radius: 8px; color: #d9d3ff; background: rgba(142,118,255,.11); font-size: 10px; font-weight: 700; }.channel-create-button:hover { border-color: rgba(142,118,255,.6); background: rgba(142,118,255,.2); }
.channel-stage .tree-heading { padding: 17px 4px 9px; }.tree-heading-note { color: var(--muted-2); font-size: 8px; letter-spacing: .1em; font-weight: 600; }
.channel-stage .channel-tree { padding: 0 4px 25px; }.channel-stage .channel-row { min-height: 41px; gap: 8px; padding-right: 9px; border: 1px solid transparent; border-radius: 8px; }.channel-stage .channel-row:hover { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.045); }.channel-stage .channel-row.active { border-color: rgba(142,118,255,.25); background: linear-gradient(90deg, rgba(142,118,255,.17), rgba(142,118,255,.04)); }.channel-stage .channel-name { font-size: 12px; }.channel-stage .channel-glyph { width: 22px; font-size: 15px; }.channel-stage .channel-count { font-size: 10px; }.channel-stage .channel-children { margin-left: 24px; padding-left: 13px; border-left-color: rgba(142,118,255,.13); }.channel-stage .channel-member-row { min-height: 35px; padding-top: 5px; padding-bottom: 5px; padding-left: 22px; }.channel-stage .channel-member-copy strong { font-size: 10px; }.channel-stage .channel-member-copy em { font-size: 8px; }.channel-stage .channel-member-avatar { width: 24px; height: 24px; }
.workspace-footer { min-height: 28px; padding-bottom: 8px; }

.members-sidebar { background: #101011; }
.server-profile-panel { flex: 0 0 auto; border-bottom: 1px solid var(--line); }.server-banner { height: 148px; position: relative; overflow: hidden; background: #171329; }.server-banner-art { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 18% 24%, rgba(167,142,255,.56), transparent 26%), radial-gradient(circle at 84% 14%, rgba(77,173,255,.32), transparent 28%), linear-gradient(135deg, #242047 0%, #111117 55%, #172a34 100%); }.server-banner-art::before { content: attr(data-initials); color: rgba(255,255,255,.11); font-size: 105px; font-weight: 800; letter-spacing: -.11em; transform: rotate(-8deg); }.server-banner.has-cover .server-banner-art { background-position: center; background-size: cover; }.server-banner.has-cover .server-banner-art::before { display: none; }.server-banner-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,6,9,.02) 15%, rgba(6,6,9,.78) 100%); }.server-banner-content { position: absolute; right: 15px; bottom: 14px; left: 15px; display: flex; align-items: center; gap: 10px; }.server-profile-avatar { width: 39px; height: 39px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgb(77 77 77 / 65%); border-radius: 11px; color: #fff; background: linear-gradient(145deg, #7967e5, #30255d); box-shadow: 0 5px 18px rgba(0,0,0,.3); font-size: 12px; font-weight: 800; }.server-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }.server-banner-content > div:last-child { min-width: 0; display: grid; gap: 4px; }.server-banner-content strong { overflow: hidden; color: #fff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.server-banner-content small { color: rgba(255,255,255,.68); font-size: 8px; }
.server-profile-body { padding: 15px 14px 16px; }.server-profile-copy { display: grid; gap: 9px; }.server-profile-copy p { margin: 0; color: #a4a2af; font-size: 9px; line-height: 1.6; }.server-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }.server-stat-row span { display: grid; gap: 3px; padding: 8px 7px; border: 1px solid rgba(255,255,255,.06); border-radius: 7px; background: rgba(255,255,255,.025); }.server-stat-row b { color: #e4e0f2; font-size: 12px; }.server-stat-row small { color: var(--muted-2); font-size: 7px; }.server-profile-note { padding-top: 8px; border-top: 1px solid var(--line); color: var(--blue); font-size: 8px; line-height: 1.45; }
.server-connection-line { display: grid; gap: 5px; padding: 8px; border: 1px solid rgba(142,118,255,.16); border-radius: 7px; background: rgba(142,118,255,.05); }.server-connection-line span { color: var(--muted-2); font-size: 7px; letter-spacing: .12em; font-weight: 800; }.server-connection-line code { overflow: hidden; color: #aaa0df; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.right-chat-panel { min-height: 0; display: flex; flex: 1; flex-direction: column; }.right-chat-panel .members-head { min-height: 66px; align-items: center; padding: 11px 14px; }.right-chat-panel .members-head h3 { max-width: 235px; margin: 4px 0 3px; }.right-chat-panel .members-head small { overflow: hidden; display: block; max-width: 245px; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.right-chat-panel .messages-list { height: auto; flex: 1; min-height: 120px; padding: 15px 14px 10px; }.right-chat-empty { flex: 1; display: grid; place-items: center; align-content: center; gap: 7px; padding: 22px; color: var(--muted-2); text-align: center; }.right-chat-empty strong { color: #cbc7d9; font-size: 11px; }.right-chat-empty small { max-width: 190px; font-size: 8px; line-height: 1.5; }.right-chat-panel .voice-banner { margin: 9px 12px 0; min-height: 48px; padding: 7px 9px; }.right-chat-panel .voice-banner .btn { min-height: 26px; font-size: 8px; }.right-chat-panel .voice-join-strip { margin: 0 12px 8px; padding: 8px 9px; }.right-chat-panel .composer { margin: 0 12px 9px; min-height: 47px; padding: 6px 7px; }.right-chat-panel .composer input { font-size: 10px; }.members-foot { min-height: 32px; }

@media (max-width: 1250px) { .app-shell { grid-template-columns: 61px 225px minmax(420px, 1fr) 300px; }.channel-stage { padding-left: 21px; padding-right: 21px; }.channel-create-button span { display: none; } }
@media (max-width: 900px) { .app-shell { grid-template-columns: 61px minmax(0, 1fr); }.server-sidebar { position: fixed; z-index: 14; left: 61px; top: 0; bottom: 0; width: 246px; transform: translateX(-110%); transition: transform .25s; box-shadow: 18px 0 50px rgba(0,0,0,.4); }.server-sidebar.open { transform: none; }.channel-stage { padding-left: 17px; padding-right: 17px; }.members-sidebar { width: 320px; }.channel-stage-tools { gap: 5px; }.channel-search { width: 180px; } }
@media (max-width: 650px) { .app-shell { grid-template-columns: 56px minmax(0, 1fr); }.server-sidebar { left: 56px; width: 245px; }.channel-stage { padding: 15px 11px 0; }.channel-stage-head { align-items: flex-start; flex-direction: column; gap: 11px; padding-bottom: 13px; }.channel-stage-tools { width: 100%; }.channel-search { flex: 1; width: auto; }.channel-create-button { flex: 0 0 auto; }.channel-stage .tree-heading { padding-top: 13px; }.channel-stage .channel-row { min-height: 39px; }.members-sidebar { width: min(94vw, 340px); }.right-chat-panel .messages-list { padding-left: 11px; padding-right: 11px; }.server-banner { height: 135px; } }

/* Electron shell: the same interface fills a frameless Windows window while the web version stays unchanged. */
html.electron-shell body { background: #09090b; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; overflow: hidden; }
html.electron-shell .desktop-titlebar { border-radius: 15px 15px 0 0; }
html.electron-shell .auth-screen,
html.electron-shell .app-shell { border-radius: 0 0 15px 15px; }
html.electron-shell .boot-screen { top: 34px; right: 0; bottom: 0; left: 0; }
html.electron-shell .auth-screen,
html.electron-shell .app-shell { height: calc(100% - 34px); min-height: calc(100% - 34px); }
html.electron-shell .auth-screen { grid-template-columns: minmax(0, 1fr) minmax(365px, 440px); gap: clamp(30px, 7vw, 110px); padding: 28px clamp(28px, 7vw, 104px) 34px; place-items: center; background: radial-gradient(circle at 14% 18%, rgba(104,77,231,.22), transparent 34%), radial-gradient(circle at 80% 90%, rgba(48,112,110,.12), transparent 32%), #0b0b0d; }
html.electron-shell .auth-screen::after { content: ""; position: absolute; z-index: 0; left: 6%; top: 13%; width: 49%; height: 70%; border-radius: 45%; background: radial-gradient(circle at 35% 45%, rgba(94,72,215,.18), transparent 48%), linear-gradient(135deg, rgba(255,255,255,.025), transparent 65%); filter: blur(1px); pointer-events: none; }
html.electron-shell .auth-side-copy { position: relative; left: auto; bottom: auto; align-self: center; justify-self: start; margin-left: clamp(0px, 2vw, 30px); padding: 0; }
html.electron-shell .auth-side-copy strong { max-width: 380px; font-size: clamp(29px, 3.2vw, 45px); }
html.electron-shell .auth-card { width: 100%; max-width: 440px; justify-self: stretch; padding: 39px 36px 31px; background: rgba(16,16,17,.93); }
html.electron-shell .auth-card h1 { font-size: 31px; }
html.electron-shell .app-shell { overflow: hidden; }

/* Discover, Store and moderation surfaces */
.channel-stage .channel-tree { flex: 1 1 0; height: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3d3a49 transparent; }
.channel-stage .channel-tree::-webkit-scrollbar { width: 9px; }.channel-stage .channel-tree::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 9px; background: #34313f; background-clip: padding-box; }.channel-stage .channel-tree::-webkit-scrollbar-track { background: transparent; }
.channel-stage .channel-children { overflow: visible; }
.channel-member-row { cursor: context-menu; }.channel-member-row.talking { border-radius: 7px; background: rgba(83,157,255,.1); box-shadow: inset 2px 0 0 var(--blue); }.channel-member-row.talking .channel-member-avatar { border-color: rgba(104,166,255,.8); box-shadow: 0 0 0 3px rgba(104,166,255,.1); }
.channel-member-tools { display: none; gap: 3px; margin-left: auto; }.channel-member-row:hover .channel-member-tools { display: inline-flex; }.channel-member-tools button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; color: var(--muted); background: transparent; }.channel-member-tools button:hover { color: #fff; background: rgba(142,118,255,.18); }
.boost-badge, .discover-badge { display: inline-flex; align-items: center; padding: 2px 5px; border: 1px solid rgba(255,110,124,.4); border-radius: 4px; color: #ff9da7; background: rgba(255,110,124,.1); font-size: 7px; font-style: normal; letter-spacing: .06em; vertical-align: 2px; }.boost-badge.pro, .discover-badge.pro { border-color: rgba(255,65,83,.7); color: #ff5365; background: rgba(255,65,83,.15); }
.discover-view { flex: 1 1 0; min-height: 0; overflow: auto; padding: clamp(24px, 4vw, 54px) clamp(20px, 4vw, 58px) 42px; background: radial-gradient(circle at 70% 8%, rgba(115,84,255,.13), transparent 34%), radial-gradient(circle at 10% 90%, rgba(59,123,119,.08), transparent 35%); scrollbar-width: thin; scrollbar-color: #373346 transparent; }.discover-view::-webkit-scrollbar { width: 9px; }.discover-view::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 9px; background: #373346; background-clip: padding-box; }
.discover-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; max-width: 1050px; margin: 0 auto 32px; padding: 7px 0 18px; }.discover-hero h2 { margin: 10px 0 12px; color: #eeeaf7; font-size: clamp(29px, 4vw, 47px); line-height: .98; letter-spacing: -.08em; }.discover-hero h2 em { color: var(--accent-2); font-style: normal; }.discover-hero p { max-width: 480px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }.discover-orb { width: 125px; height: 125px; flex: 0 0 auto; display: grid; place-items: center; position: relative; border: 1px solid rgba(142,118,255,.28); border-radius: 37px; color: rgba(205,196,255,.84); background: radial-gradient(circle at 28% 25%, rgba(179,165,255,.34), transparent 30%), linear-gradient(145deg, rgba(142,118,255,.22), rgba(255,255,255,.025)); box-shadow: 0 0 55px rgba(103,79,228,.18); font-size: 45px; }.discover-orb::after { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 28px; }.discover-orb small { position: absolute; right: 13px; bottom: 12px; color: var(--green); font-size: 7px; letter-spacing: .14em; font-weight: 800; }
.discover-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; max-width: 1050px; margin: 0 auto 13px; }.discover-toolbar > div:first-child { display: grid; gap: 4px; }.discover-toolbar strong { color: #ded9eb; font-size: 14px; }.discover-toolbar small { color: var(--muted-2); font-size: 9px; }.discover-toolbar-actions { display: flex; gap: 7px; }.discover-server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; max-width: 1050px; margin: 0 auto; }.discover-server-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); transition: border .18s, transform .18s, background .18s; }.discover-server-card:hover { border-color: rgba(142,118,255,.48); transform: translateY(-3px); background: linear-gradient(145deg, rgba(142,118,255,.11), rgba(255,255,255,.02)); }.discover-card-cover { height: 100px; position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 22% 20%, rgba(179,165,255,.5), transparent 27%), linear-gradient(135deg, #252046, #111117 61%, #193031); background-position: center; background-size: cover; }.discover-card-initials { color: rgba(255,255,255,.13); font-size: 65px; font-weight: 900; letter-spacing: -.1em; transform: rotate(-8deg); }.discover-card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,10,.04), rgba(7,7,10,.66)); }.discover-card-body { padding: 13px; }.discover-card-title { display: flex; align-items: center; gap: 8px; min-width: 0; }.discover-card-title > div { min-width: 0; display: grid; gap: 3px; flex: 1; }.discover-card-title strong { overflow: hidden; color: #eeeaf6; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.discover-card-title small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.discover-card-icon { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(142,118,255,.38); border-radius: 9px; color: #e4ddff; background: linear-gradient(145deg,#6250c8,#2a214d); font-size: 9px; font-weight: 800; }.discover-card-icon img { width: 100%; height: 100%; object-fit: cover; }.discover-card-body p { display: -webkit-box; min-height: 29px; margin: 12px 0; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.discover-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--muted-2); font-size: 8px; }.discover-card-meta span { display: inline-flex; align-items: center; gap: 4px; }.discover-card-meta .status-dot { width: 5px; height: 5px; }.discover-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }.discover-card-foot code { color: #77728d; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; }.discover-card-foot .btn { white-space: nowrap; }.discover-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 55px 20px; border: 1px dashed rgba(255,255,255,.12); border-radius: 13px; color: var(--muted); text-align: center; }.discover-empty strong { color: #d8d3e4; font-size: 13px; }.discover-empty p { margin: 0 0 7px; font-size: 10px; }.discover-bottom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1050px; margin: 22px auto 0; }.discover-info-card { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); }.discover-info-card .info-card-icon { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--accent-2); background: rgba(142,118,255,.12); font-size: 15px; }.discover-info-card > div { min-width: 0; flex: 1; }.discover-info-card strong { color: #d9d4e6; font-size: 10px; }.discover-info-card p { margin: 4px 0 0; color: var(--muted-2); font-size: 8px; line-height: 1.5; }.discover-info-card code { color: #9890bf; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; }.boost-info .info-card-icon { color: #ff8e9a; background: rgba(255,110,124,.1); }
.store-modal { max-height: min(820px, calc(100vh - 26px)); overflow: auto; }.store-modal .modal-head { background: linear-gradient(120deg, rgba(255,75,94,.11), rgba(142,118,255,.06) 55%, transparent); }.store-plan-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 19px 23px 0; }.store-plan-tab { min-height: 73px; display: grid; align-content: center; gap: 5px; padding: 0 15px; border: 1px solid var(--line); border-radius: 0px; color: var(--muted); background: rgba(255,255,255,.02); text-align: left; }.store-plan-tab:hover { border-color: rgba(255,110,124,.38); }.store-plan-tab.active { border-color: rgba(255,110,124,.66); background: linear-gradient(135deg, rgba(255,110,124,.13), rgba(255,255,255,.025)); box-shadow: inset 0 0 0 1px rgba(255,110,124,.08); }.store-plan-tab span { color: #ff9ba4; font-size: 11px; }.store-plan-tab.pro span { color: #ff5266; }.store-plan-tab small { color: var(--muted-2); font-size: 9px; }.store-config { display: grid; grid-template-columns: 1fr 1fr 170px; align-items: end; gap: 11px; padding: 18px 23px; }.store-config label { display: grid; gap: 7px; color: #aaa7b4; font-size: 10px; font-weight: 700; }.store-total { min-height: 43px; display: grid; align-content: center; justify-items: end; gap: 2px; padding: 0 11px; border: 1px solid rgba(255,110,124,.2); border-radius: 9px; background: rgba(255,110,124,.06); }.store-total small { color: var(--muted-2); font-size: 8px; }.store-total strong { color: #ff9da7; font-size: 18px; letter-spacing: -.05em; }.store-total span { color: var(--muted-2); font-size: 8px; }.store-order-summary { display: flex; align-items: center; gap: 10px; margin: 0 23px 17px; padding: 12px; border: 1px solid var(--line); border-radius: 0px; background: rgba(255,255,255,.025); }.summary-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: #ff8d99; background: rgba(255,110,124,.1); }.store-order-summary > div { min-width: 0; flex: 1; }.store-order-summary strong { color: #dfdae8; font-size: 10px; }.store-order-summary p { margin: 4px 0 0; color: var(--muted-2); font-size: 8px; }.summary-accent { color: #ff9da7; font-size: 13px; }.btn-boost { font-size: 12px; min-height: 35px; padding: 0 13px; border: 1px solid rgba(255,110,124,.48); border-radius: 8px; color: #fff0f2; background: linear-gradient(135deg, #cc4655, #8e2939); font-weight: 800; }.btn-boost:hover { border-color: rgba(255,160,170,.8); background: linear-gradient(135deg, #e15a6a, #a53145); }.store-order-result { padding: 12px; border: 1px solid rgba(88,214,161,.28); border-radius: 0px; background: rgba(88,214,161,.06); }.store-order-result strong { color: #baf1d7; font-size: 10px; }.store-order-result p { margin: 6px 0 10px; color: var(--muted); font-size: 9px; line-height: 1.5; }.admin-order-area { margin: 0 23px 23px; padding-top: 14px; border-top: 1px solid var(--line); }.admin-order-area .section-label { margin-bottom: 8px; }.admin-order-row { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--line); }.admin-order-row > div { min-width: 0; flex: 1; display: grid; gap: 4px; }.admin-order-row strong { color: #ded9e9; font: 9px ui-monospace, monospace; }.admin-order-row small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.order-status { color: var(--green); font-size: 8px; }.profile-plan-badge { width: max-content; padding: 6px 8px; border: 1px solid rgba(255,110,124,.4); border-radius: 7px; color: #ff9da7; background: rgba(255,110,124,.1); font-size: 9px; font-weight: 800; }.profile-plan-badge.pro { border-color: rgba(255,65,83,.7); color: #ff5365; background: rgba(255,65,83,.14); }
.member-context-menu { min-width: 210px; }.context-menu#member-context-menu { width: 210px; }.context-menu#member-context-menu button[data-member-context-action="ban"] { color: #ffadb5; }.context-menu#member-context-menu button[data-member-context-action="ban"] span { color: var(--red); }
input[type="file"] { padding: 7px 9px; color: var(--muted-2); font-size: 9px; }
@media (max-width: 750px) { .discover-hero { align-items: flex-start; }.discover-orb { width: 88px; height: 88px; border-radius: 27px; font-size: 31px; }.discover-bottom-grid, .store-config { grid-template-columns: 1fr; }.store-total { justify-items: start; padding: 9px 11px; }.store-plan-tabs { padding-left: 17px; padding-right: 17px; }.store-config { padding-left: 17px; padding-right: 17px; }.store-order-summary, .store-order-result { margin-left: 17px; margin-right: 17px; }.admin-order-area { margin-left: 17px; margin-right: 17px; } }

/* v8 layout hardening: each long surface owns its scroll position. */
.app-shell { min-height: 0; }
.app-shell.browse-mode { grid-template-columns: 68px 246px minmax(0, 1fr); }
.members-sidebar.browse-hidden { display: none; }
.workspace, .server-sidebar, .members-sidebar { min-height: 0; }
.channel-stage { height: 0; min-height: 0; flex: 1 1 auto; }
.channel-stage .channel-tree { height: 0; max-height: none; min-height: 0; flex: 1 1 0; overflow-y: auto; }
.right-chat-panel { min-height: 0; overflow: hidden; }
.right-chat-panel { position: relative; }
.right-chat-panel .messages-list { height: 0; min-height: 0; max-height: none; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.right-chat-panel .messages-list::-webkit-scrollbar, .discover-view::-webkit-scrollbar, .store-view::-webkit-scrollbar { width: 9px; }
.right-chat-panel .messages-list::-webkit-scrollbar-thumb, .discover-view::-webkit-scrollbar-thumb, .store-view::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 9px; background: #373346; background-clip: padding-box; }

/* Discover directory */
.discover-page-shell, .store-page-shell { width: min(100%, 1120px); margin: 0 auto; }
.discover-hero { max-width: none; margin-bottom: 24px; padding-top: 9px; }
.discover-hero-copy { min-width: 0; }
.discover-hero h2 { font-size: clamp(32px, 4.4vw, 57px); }
.discover-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 23px; }
.discover-text-action { min-height: 38px; padding: 0 7px; border: 0; color: #c9c1ef; background: transparent; font-size: 11px; font-weight: 700; }
.discover-text-action:hover { color: #fff; }
.discover-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 720px; margin: 0 0 39px; }
.discover-stats article { min-height: 72px; display: grid; align-content: center; gap: 5px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.017)); }
.discover-stats strong { color: #f0edf8; font-size: 19px; letter-spacing: -.04em; }
.discover-stats small { color: var(--muted-2); font-size: 8px; letter-spacing: .12em; font-weight: 800; }
.discover-directory-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.discover-directory-head h3 { margin: 8px 0 6px; color: #e5e1ef; font-size: 18px; letter-spacing: -.045em; }
.discover-directory-head p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.discover-directory-tools { display: flex; align-items: center; gap: 8px; }
.discover-search { width: min(310px, 32vw); height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(15,15,18,.9); }
.discover-search input { height: 34px; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 10px; }
.discover-list-meta { display: flex; align-items: center; gap: 15px; margin: 0 0 10px; color: var(--muted-2); font-size: 8px; }
.discover-list-live { display: inline-flex; align-items: center; gap: 5px; }
.discover-list-live .status-dot { width: 5px; height: 5px; }
.discover-server-grid { max-width: none; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.discover-server-card { border-radius: 14px; }
.discover-card-cover { height: 116px; }
.discover-card-body { padding: 14px; }
.discover-card-foot .btn-primary { background: rgba(142,118,255,.14); border: 1px solid rgba(142,118,255,.36); box-shadow: none; color: #d9d2ff; }
.discover-card-foot .btn-primary:hover { background: rgba(142,118,255,.25); }
.discover-bottom-grid { max-width: none; margin-top: 28px; }

/* Store as a full page, with a purple Boost and red Boost Pro. */
.store-view { flex: 1 1 0; min-height: 0; overflow: auto; padding: clamp(25px, 4vw, 52px) clamp(20px, 4vw, 58px) 48px; background: radial-gradient(circle at 70% 4%, rgba(142,118,255,.16), transparent 33%), radial-gradient(circle at 7% 90%, rgba(88,214,161,.07), transparent 29%); scrollbar-width: thin; scrollbar-color: #373346 transparent; }
.store-page-hero { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.store-page-hero h2 { margin: 9px 0 11px; color: #eeeaf7; font-size: clamp(30px, 4vw, 52px); line-height: .99; letter-spacing: -.08em; }
.store-page-hero h2 em { color: var(--accent-2); font-style: normal; }
.store-page-hero p { max-width: 550px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.store-hero-badge { width: 145px; height: 145px; flex: 0 0 auto; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px solid rgba(142,118,255,.35); border-radius: 40px; background: radial-gradient(circle at 30% 22%, rgba(179,165,255,.38), transparent 31%), linear-gradient(145deg, rgba(142,118,255,.19), rgba(255,255,255,.025)); box-shadow: 0 0 58px rgba(103,79,228,.16); }
.store-hero-badge span { color: var(--accent-2); font-size: 30px; }
.store-hero-badge strong { color: #eeeaff; font-size: 12px; letter-spacing: .15em; }
.store-hero-badge small { color: var(--muted-2); font-size: 7px; letter-spacing: .14em; }
.store-page-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr); gap: 14px; align-items: start; }
.store-builder-card, .store-benefits { min-width: 0; border: 1px solid var(--line); border-radius: 5px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); }
.store-builder-card { padding: 20px 21px 19px; }
.store-section-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.store-section-heading h3, .store-benefits h3 { margin: 7px 0 0; color: #e1ddec; font-size: 16px; letter-spacing: -.04em; }
.store-secure-label { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 8px; white-space: nowrap; }
.store-secure-label .status-dot { width: 5px; height: 5px; }
.store-plan-tabs { padding: 0; }
.store-plan-tab { min-height: 90px; padding: 0 16px; gap: 5px; }
.store-plan-tab.active { border-color: rgba(142,118,255,.7); background: linear-gradient(135deg, rgba(142,118,255,.19), rgba(255,255,255,.025)); box-shadow: inset 0 0 0 1px rgba(142,118,255,.11), 0 8px 24px rgba(91,69,221,.08); }
.store-plan-tab.active span { color: var(--accent-2); }
.store-plan-tab strong { color: #ddd9eb; font-size: 11px; }
.store-plan-tab.pro:hover { border-color: rgba(255,65,83,.55); }
.store-plan-tab.pro.active { border-color: rgba(255,65,83,.78); background: linear-gradient(135deg, rgba(255,65,83,.15), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,65,83,.11), 0 8px 24px rgba(190,45,65,.08); }
.store-plan-tab.pro.active span { color: #ff5365; }
.store-config { grid-template-columns: 1fr 1fr 170px; padding: 18px 0 16px; }
.store-total { border-color: rgba(142,118,255,.25); background: rgba(142,118,255,.07); }
.store-total strong, .summary-accent { color: var(--accent-2); }
.store-order-summary { margin: 0 0 17px; }
.summary-icon { color: var(--accent-2); background: rgba(142,118,255,.12); }
.store-page-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px;}
.store-page-foot p { max-width: 360px; margin: 0; color: var(--muted-2); font-size: 8px; line-height: 1.55; }
.btn-boost { border-color: rgba(142,118,255,.53); color: #f2efff; background: linear-gradient(135deg, #7f69ef, #5540be); }
.btn-boost:hover { border-color: rgba(190,177,255,.85); background: linear-gradient(135deg, #987fff, #644bd9); }
.btn-boost.store-pro-action { border-color: rgba(255,65,83,.65); background: linear-gradient(135deg, #dc5060, #9a293c); }
.btn-boost.store-pro-action:hover { background: linear-gradient(135deg, #ef6877, #b83a50); }
.store-benefits { padding: 20px; }
.store-benefits > h3 { margin-bottom: 18px; }
.store-benefit-list { display: grid; gap: 14px; }
.store-benefit-list article { display: grid; grid-template-columns: 25px 1fr; gap: 9px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.store-benefit-list article > span { color: var(--accent-2); font: 9px ui-monospace, monospace; }
.store-benefit-list strong { color: #dcd8e8; font-size: 10px; }
.store-benefit-list p { margin: 4px 0 0; color: var(--muted-2); font-size: 8px; line-height: 1.5; }
.store-help-card { margin-top: 17px; padding: 12px; border: 1px solid rgba(142,118,255,.17); border-radius: 9px; background: rgba(142,118,255,.07); }
.store-help-card strong { color: #ded8ff; font-size: 10px; }
.store-help-card p { margin: 6px 0 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.store-help-card b { color: var(--accent-2); }
.store-view .admin-order-area { margin: 20px 0 0; padding: 17px 0 0; }
.boost-badge, .discover-badge { border-color: rgba(142,118,255,.42); color: var(--accent-2); background: rgba(142,118,255,.12); }
.boost-badge.pro, .discover-badge.pro { border-color: rgba(255,65,83,.7); color: #ff5365; background: rgba(255,65,83,.15); }

/* Moderation notifications and settings scroll. */
.moderation-notice-icon { width: 55px; height: 55px; display: grid; place-items: center; margin: 19px 23px 4px; border: 1px solid rgba(255,110,124,.28); border-radius: 16px; color: #ffabb3; background: rgba(255,110,124,.1); font-size: 24px; font-weight: 800; }
.moderation-notice-icon.poke { border-color: rgba(142,118,255,.35); color: var(--accent-2); background: rgba(142,118,255,.12); }
.moderation-notice-icon.ban { color: #ff8b98; background: rgba(255,65,83,.13); }
.moderation-notice-modal .modal-foot { margin: 15px 23px 21px; }
#settings-modal .settings-modal { display: flex; flex-direction: column; min-height: 0; }
#settings-modal .settings-tabs { flex: 0 0 auto; }
#settings-modal .settings-panel.active { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #373346 transparent; }
#settings-modal #settings-general .modal-form { min-height: max-content; }
#settings-modal .audit-list { max-height: none; flex: 1 1 auto; }

@media (max-width: 900px) {
  .app-shell.browse-mode { grid-template-columns: 61px 225px minmax(0, 1fr); }
  .store-page-layout { grid-template-columns: 1fr; }
}
@media (max-width: 750px) {
  .discover-directory-head, .store-page-hero { align-items: flex-start; flex-direction: column; }
  .discover-directory-tools, .discover-search { width: 100%; }
  .discover-directory-tools { align-items: stretch; }
  .discover-stats { margin-bottom: 28px; }
  .store-page-foot { align-items: stretch; flex-direction: column; }
  .store-page-foot .btn { width: 100%; }
}
@media (max-width: 650px) {
  .app-shell.browse-mode { grid-template-columns: 56px minmax(0, 1fr); }
  .discover-hero { flex-direction: column; }
  .discover-hero-actions { margin-top: 18px; }
  .discover-stats { gap: 6px; }
  .discover-stats article { min-height: 64px; padding: 0 9px; }
  .discover-stats strong { font-size: 15px; }
  .discover-stats small { font-size: 7px; letter-spacing: .07em; }
  .store-hero-badge { width: 96px; height: 96px; border-radius: 28px; }
  .store-hero-badge span { font-size: 22px; }
  .store-builder-card, .store-benefits { padding-left: 15px; padding-right: 15px; }
  .store-plan-tabs { grid-template-columns: 1fr; }
  .store-config { grid-template-columns: 1fr; }
  .store-total { justify-items: start; }
  .store-order-summary { margin-left: 0; margin-right: 0; }
  .settings-modal .modal-head, .moderation-notice-modal .modal-head { padding-left: 17px; padding-right: 17px; }
  .moderation-notice-icon { margin-left: 17px; }
  .moderation-notice-modal .modal-foot { margin-left: 17px; margin-right: 17px; }
}

/* v10 identity, media and interaction polish. */
.brand-mark { font-size: 15px; font-weight: 950; letter-spacing: -.13em; text-transform: none; }
.desktop-brand-mark { font-size: 11px; }
.brand-mark-large { font-size: 23px; }
.server-rail-item > span { overflow: hidden; display: grid; place-items: center; }
.server-rail-item > span img, .server-profile-avatar img, .connection-icon img, .user-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.connection-icon { overflow: hidden; }
.connection-icon img { border-radius: 10px; }
.rail-profile { overflow: hidden; padding: 0; }
.rail-profile.has-avatar-image { border-color: rgba(142,118,255,.7); }
.voice-control-icon { color: #bbb3db; font-size: 15px; line-height: 1; }
.voice-control-icon svg, .voice-status-icon svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.voice-status-icon svg { width: 17px; height: 17px; }
.voice-control-icon.active { color: #ff8794; border-color: rgba(255,65,83,.5); background: rgba(255,65,83,.11); }
.voice-join-status small b { color: var(--accent-2); font-weight: 900; }
.composer-locked { border-color: rgba(255,110,124,.22); background: rgba(255,110,124,.035); }
.composer-locked .send-button { opacity: .35; pointer-events: none; }
.form-hint { display: block; margin-top: 7px; color: var(--muted-2); font-size: 9px; line-height: 1.45; }
.message-avatar { overflow: hidden; }
.message-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.message { position: relative; }
.message.pinned { margin-left: -7px; padding-left: 7px; border-left: 2px solid #f09a45; border-radius: 2px 8px 8px 2px; background: linear-gradient(90deg, rgba(240,154,69,.11), transparent 72%); }
.message.pinned:hover { margin-left: -7px; padding-left: 7px; margin-right: -5px; }
.message-head { min-width: 0; }
.message-pin { width: 20px; height: 18px; display: grid; place-items: center; margin-left: auto; padding: 0; border: 1px solid transparent; border-radius: 5px; color: #777184; background: transparent; font-size: 11px; opacity: .2; }
.message:hover .message-pin, .message-pin:focus-visible { opacity: 1; }
.message-pin:hover { border-color: rgba(240,154,69,.35); color: #ffc27c; background: rgba(240,154,69,.11); }
.pinned .message-pin { color: #ffb66b; opacity: 1; }
.pinned-note { display: inline-flex; align-items: center; gap: 4px; color: #f4ad64; font-size: 8px; font-weight: 900; letter-spacing: .06em; }
.mini-avatar { overflow: hidden; }
.mini-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.mini-avatar.talking { border-color: rgba(88,214,161,.9); box-shadow: 0 0 0 2px rgba(88,214,161,.16); }
.store-plan-tab { grid-template-columns: 48px minmax(0, 1fr); align-items: center; }
.store-product-art { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 7px; color: #ddd6ff; font-size: 18px; font-weight: 900; }
.store-product-art.pro { border-color: rgba(255,65,83,.68); color: #ffd0d5; }
.store-product-copy { min-width: 0; display: grid; gap: 1px; }
.store-product-copy b { color: var(--accent-2); font-size: 10px; letter-spacing: .08em; }
.store-plan-tab.pro .store-product-copy b { color: #ff5365; }
.store-product-copy strong, .store-product-copy small { display: block; }
.store-plan-tab small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-config {  }
#settings-modal .settings-modal { height: min(860px, calc(100vh - 30px)); max-height: calc(100vh - 30px); overflow: hidden; }
#server-modal .modal, #channel-modal .modal, #join-modal .modal, #profile-modal .modal, #ban-modal .modal, #member-permission-modal .modal { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #373346 transparent; }

@media (max-width: 900px) {
  .store-config { grid-template-columns: 1fr 1fr; }
  .store-total { grid-column: 1 / -1; justify-items: start; padding: 9px 11px; }
}
@media (max-width: 750px) {
  .store-config { grid-template-columns: 1fr; }
  .store-total { grid-column: auto; }
}

/* v11 discover, rail and notification polish. */
.rail-icon, .server-rail-item, .rail-profile { position: relative; overflow: visible; }
.rail-icon svg { width: 19px; height: 19px; display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.rail-icon[data-tooltip]::before, .server-rail-item[data-tooltip]::before, .rail-profile[data-tooltip]::before { content: attr(data-tooltip); position: absolute; z-index: 90; left: calc(100% + 13px); top: 50%; width: max-content; max-width: 190px; padding: 7px 9px; border: 1px solid rgba(142,118,255,.27); border-radius: 7px; color: #eae7f5; background: #1a1920; box-shadow: 0 12px 30px rgba(0,0,0,.42); font-size: 9px; font-weight: 700; line-height: 1.2; pointer-events: none; opacity: 0; transform: translate(4px, -50%); transition: opacity .16s, transform .16s; }
.rail-icon[data-tooltip]:hover::before, .rail-icon[data-tooltip]:focus-visible::before, .server-rail-item[data-tooltip]:hover::before, .server-rail-item[data-tooltip]:focus-visible::before, .rail-profile[data-tooltip]:hover::before, .rail-profile[data-tooltip]:focus-visible::before { opacity: 1; transform: translate(0, -50%); }
.server-rail-list { width: 50px; padding: 2px 3px 6px; }
.server-rail-item { overflow: visible; border-color: rgba(255,255,255,.1); background: #151519; }
.server-rail-item > .server-rail-mark { width: 100%; height: 100%; overflow: hidden; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(circle at 30% 20%, rgba(177,160,255,.54), transparent 34%), linear-gradient(145deg, #40357f, #171523 76%); }
.server-rail-item > .server-rail-mark strong { color: #f3efff; font-size: 11px; letter-spacing: -.05em; }
.server-rail-item > .server-rail-mark img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.server-rail-item.active > .server-rail-mark { background: radial-gradient(circle at 28% 19%, rgba(218,209,255,.58), transparent 33%), linear-gradient(145deg, #7560df, #302561); }
.server-rail-item small { z-index: 2; }

.discover-hero { align-items: stretch; gap: 34px; margin-bottom: 22px; padding: 22px 25px 24px; border: 1px solid rgba(142,118,255,.14); border-radius: 17px; background: radial-gradient(circle at 82% 8%, rgba(142,118,255,.15), transparent 36%), linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.discover-hero-copy { flex: 1; padding: 4px 0 2px; }
.discover-hero h2 { max-width: 670px; margin-top: 12px; }
.discover-hero p { max-width: 570px; }
.discover-hero-panel { width: 250px; min-height: 205px; flex: 0 0 250px; display: grid; align-content: space-between; gap: 13px; position: relative; overflow: hidden; padding: 15px; border: 1px solid rgba(142,118,255,.3); border-radius: 16px; background: radial-gradient(circle at 24% 17%, rgba(174,157,255,.3), transparent 31%), linear-gradient(145deg, rgba(92,71,177,.31), rgba(18,18,24,.92) 70%); box-shadow: 0 18px 48px rgba(70,49,158,.17); }
.discover-hero-panel::after { content: ""; position: absolute; width: 150px; height: 150px; right: -54px; top: -67px; border: 1px solid rgba(200,191,255,.16); border-radius: 50%; box-shadow: 0 0 0 14px rgba(200,191,255,.035), 0 0 0 28px rgba(200,191,255,.025); }
.discover-panel-top { display: flex; align-items: center; justify-content: space-between; color: #aaa0e8; font-size: 8px; letter-spacing: .16em; font-weight: 900; }
.discover-panel-top .status-dot { width: 6px; height: 6px; }
.discover-panel-mark { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid rgba(188,176,255,.36); border-radius: 14px; color: #c8bdff; background: rgba(142,118,255,.15); font-size: 27px; box-shadow: 0 0 24px rgba(142,118,255,.13); }
.discover-panel-copy { display: grid; gap: 4px; position: relative; z-index: 1; }
.discover-panel-copy small { color: #9187bd; font-size: 8px; letter-spacing: .14em; font-weight: 800; }
.discover-panel-copy strong { color: #f1edff; font-size: 17px; letter-spacing: -.045em; }
.discover-panel-copy p { max-width: 190px; margin: 0; color: #aaa4bd; font-size: 9px; line-height: 1.45; }
.discover-panel-action { width: max-content; min-height: 28px; display: inline-flex; align-items: center; gap: 8px; position: relative; z-index: 1; padding: 0 10px; border: 1px solid rgba(142,118,255,.35); border-radius: 7px; color: #d9d1ff; background: rgba(142,118,255,.12); font-size: 9px; font-weight: 800; }
.discover-panel-action:hover { border-color: rgba(190,177,255,.72); background: rgba(142,118,255,.23); }
.discover-stats { max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 34px; }
.discover-stats article { min-height: 84px; position: relative; overflow: hidden; padding: 13px 15px; background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); }
.discover-stats article::after { content: ""; position: absolute; right: -23px; bottom: -32px; width: 75px; height: 75px; border: 1px solid rgba(142,118,255,.13); border-radius: 50%; }
.discover-stats strong { position: relative; z-index: 1; font-size: 20px; }
.discover-stats small { position: relative; z-index: 1; }
.discover-stats article > span { position: relative; z-index: 1; color: var(--muted-2); font-size: 8px; line-height: 1.35; }
.discover-stats .rights-stat { border-color: rgba(142,118,255,.29); background: linear-gradient(145deg, rgba(142,118,255,.13), rgba(255,255,255,.02)); }
.discover-stats .rights-stat strong { color: var(--accent-2); }
.discover-directory-head { margin-top: 3px; }
.discover-server-card { background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); box-shadow: 0 11px 24px rgba(0,0,0,.14); transition: transform .18s, border-color .18s, box-shadow .18s; }
.discover-server-card:hover { border-color: rgba(142,118,255,.34); box-shadow: 0 16px 31px rgba(0,0,0,.24); transform: translateY(-2px); }
.discover-card-cover { background-image: radial-gradient(circle at 25% 20%, rgba(142,118,255,.55), transparent 30%), linear-gradient(135deg, #28224b, #11151a 75%); }
.discover-card-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.07), transparent 62%); transform: translateX(-110%); transition: transform .45s; }
.discover-server-card:hover .discover-card-cover::after { transform: translateX(110%); }

.moderation-notice-icon.poke-message { width: auto; min-height: 92px; height: auto; display: grid; align-content: center; justify-items: start; gap: 8px; margin: 19px 23px 4px; padding: 15px 16px; border-color: rgba(142,118,255,.35); border-radius: 14px; text-align: left; }
.poke-message-label { color: #a99aff; font-size: 8px; letter-spacing: .16em; font-weight: 900; }
.poke-message strong { max-width: 100%; color: #f0ecff; font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.poke-compose-modal .modal-form { padding-top: 16px; }
.poke-compose-modal textarea { min-height: 96px; resize: vertical; }

@media (max-width: 900px) {
  .discover-hero-panel { width: 210px; flex-basis: 210px; }
  .discover-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .discover-hero { padding: 18px 16px; }
  .discover-hero-panel { width: 100%; min-height: 170px; flex-basis: auto; }
  .discover-stats article { min-height: 73px; }
  .moderation-notice-icon.poke-message { margin-left: 17px; margin-right: 17px; }
}

/* v14: focused roles, independent branding fields, room chat rules and search. */
html.electron-shell { background: transparent; }
html.electron-shell body { background: transparent; border-radius: 10px; overflow: hidden; }
html.electron-shell .boot-screen { border-radius: 10px; overflow: hidden; }
html.electron-shell .desktop-titlebar { border-radius: 10px 10px 0 0; }
html.electron-shell .app-shell, html.electron-shell .auth-screen { border-radius: 0 0 10px 10px; }
.desktop-drag-region { padding-left: 14px; }
.channel-edit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.channel-edit-grid label { min-width: 0; }
.channel-member-device { width: 18px; height: 18px; display: grid; flex: 0 0 18px; place-items: center; color: #85818f; }
.channel-member-device svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.channel-member-device.muted { color: var(--red); }
.channel-member-device.talking { color: var(--green); }
.channel-member-device.not-connected { color: var(--muted-2); opacity: .72; }
.permission-badges { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; vertical-align: -2px; }
.permission-badge { width: 14px; height: 14px; display: inline-grid; place-items: center; border: 1px solid rgba(142,118,255,.42); border-radius: 4px; color: #cfc4ff; background: rgba(142,118,255,.16); font-size: 8px; font-style: normal; line-height: 1; }
.channel-member-copy strong .boost-badge { margin-left: 3px; }
.asset-field { display: grid; gap: 7px; padding: 11px; border: 1px solid rgba(255,255,255,.055); border-radius: 9px; background: rgba(255,255,255,.018); }
.asset-field > label { padding: 0; }
.asset-clear-option { display: flex !important; align-items: center; gap: 8px; color: var(--muted-2) !important; font-size: 9px !important; font-weight: 500 !important; }
.asset-clear-option input { width: 15px; height: 15px; padding: 0; }
.permission-list-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; padding: 0 10px 12px; }
.permission-list-head small { color: var(--muted-2); font-size: 8px; }
.permissions-modal { width: min(1060px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: hidden; border-radius: 10px; }
.permissions-modal .modal-head { flex: 0 0 auto; }
.permissions-modal .permission-layout { height: min(690px, calc(100vh - 150px)); grid-template-columns: 245px minmax(0, 1fr); }
.permissions-modal .permission-groups { min-height: 0; overflow: hidden; padding: 19px 12px; }
.permissions-modal .permission-group-list { min-height: 0; height: calc(100% - 39px); overflow-y: auto; padding: 0 2px 12px; scrollbar-width: thin; scrollbar-color: #39344b transparent; }
.permissions-modal .group-item { min-height: 45px; margin-bottom: 5px; border: 1px solid transparent; border-radius: 8px; }
.permissions-modal .group-item.active { border-color: rgba(142,118,255,.45); background: linear-gradient(100deg, rgba(142,118,255,.2), rgba(142,118,255,.06)); }
.permissions-modal .group-item .group-mark { width: 28px; height: 28px; border-radius: 8px; font-size: 13px; }
.permission-editor-head { min-height: 82px; }
.selected-group-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
.selected-group-icon { width: 38px; height: 38px; display: grid; flex: 0 0 38px; place-items: center; padding: 0; border: 1px solid rgba(142,118,255,.4); border-radius: 11px; color: #d4caff; background: rgba(142,118,255,.16); font-size: 17px; }
.selected-group-icon:hover { border-color: var(--accent); background: rgba(142,118,255,.27); }
.permission-toolbar { display: flex; align-items: center; gap: 10px; min-height: 53px; }
.permissions-modal .permission-search { min-width: 0; flex: 1; margin: 13px 0 0 24px; }
.permission-count { margin: 13px 24px 0 0; color: var(--muted-2); font-size: 9px; white-space: nowrap; }
.permissions-modal .permission-list { padding-top: 9px; }
.permissions-modal .permission-editor-foot { flex: 0 0 auto; }
.global-search-modal { width: min(650px, calc(100vw - 28px)); max-height: min(720px, calc(100vh - 28px)); overflow: hidden; border-radius: 10px; }
.global-search-input { display: flex; align-items: center; gap: 9px; margin: 18px 22px 10px; padding: 0 11px; border: 1px solid rgba(142,118,255,.38); border-radius: 9px; background: #0e0e11; color: var(--muted); }
.global-search-input input { height: 42px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.global-search-input kbd { padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted-2); font-size: 8px; }
.global-search-results { min-height: 100px; max-height: 470px; overflow-y: auto; padding: 4px 22px 20px; scrollbar-width: thin; scrollbar-color: #39344b transparent; }
.global-search-result, .search-suggestion { width: 100%; display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 54px; padding: 7px 9px; border: 1px solid transparent; border-radius: 8px; color: var(--text); background: transparent; text-align: left; }
.global-search-result:hover { border-color: rgba(142,118,255,.28); background: rgba(142,118,255,.09); }
.search-result-icon, .search-suggestion > span { width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; color: var(--accent-2); background: rgba(142,118,255,.13); font-size: 12px; }
.search-result-icon img { width: 100%; height: 100%; object-fit: cover; }
.global-search-result > span:nth-child(2), .search-suggestion > div { min-width: 0; display: grid; gap: 3px; }
.global-search-result strong, .search-suggestion strong { overflow: hidden; color: #e2deed; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result small, .search-suggestion small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result em { color: var(--accent-2); font-size: 8px; font-style: normal; white-space: nowrap; }
.store-featured-strip { display: grid; grid-template-columns: minmax(0, 1.55fr) repeat(2, minmax(165px, .75fr)); gap: 11px; margin-bottom: 23px; }
.store-featured-main, .store-featured-product { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(140deg, rgba(142,118,255,.13), rgba(255,255,255,.025)); }
.store-featured-main { display: grid; grid-template-columns: minmax(105px, .72fr) 1fr; align-items: stretch; }
.store-featured-main > div:last-child { display: grid; align-content: center; gap: 5px; padding: 14px 16px; }
.store-featured-main h3 { margin: 0; color: #eeeaff; font-size: 17px; letter-spacing: -.05em; }
.store-featured-main p { margin: 0 0 5px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.store-featured-art, .store-product-image { display: grid; place-items: center; position: relative; overflow: hidden; }
.store-featured-art { min-height: 116px; background: radial-gradient(circle at 32% 27%, rgba(211,201,255,.56), transparent 22%), radial-gradient(circle at 80% 65%, rgba(142,118,255,.4), transparent 34%), linear-gradient(145deg, #483590, #171522 75%); }
.store-featured-art::after, .store-product-image::after { content: ''; position: absolute; width: 130px; height: 130px; right: -45px; top: -55px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 12px rgba(255,255,255,.035), 0 0 0 24px rgba(255,255,255,.025); }
.store-featured-art span { color: #ded7ff; font-size: 54px; filter: drop-shadow(0 0 17px rgba(197,185,255,.55)); }
.store-featured-product { display: grid; grid-template-rows: 93px 1fr; background: rgba(255,255,255,.025); }
.store-featured-product > div:last-child { display: grid; align-content: center; gap: 3px; padding: 9px 11px; }
.store-featured-product b { color: var(--accent-2); font-size: 9px; letter-spacing: .1em; }
.store-featured-product.pro b { color: #ff5b6c; }
.store-featured-product strong { color: #ded9ea; font-size: 10px; }
.store-featured-product small { color: var(--muted-2); font-size: 8px; }
.image-servers { background: radial-gradient(circle at 30% 20%, rgba(112,205,196,.42), transparent 24%), linear-gradient(145deg, #294c5b, #15151d 74%); }
.image-servers span { color: rgba(224,249,247,.85); font-size: 30px; font-weight: 900; letter-spacing: -.13em; }
.image-pro { background: radial-gradient(circle at 28% 22%, rgba(255,169,181,.54), transparent 23%), linear-gradient(145deg, #9b324b, #27141e 75%); }
.image-pro span { color: #ffdbe0; font-size: 31px; }
.store-plan-tab { min-height: 98px; }

@media (max-width: 820px) {
  .store-featured-strip { grid-template-columns: 1fr 1fr; }
  .store-featured-main { grid-column: 1 / -1; }
  .permissions-modal .permission-layout { grid-template-columns: 190px minmax(0, 1fr); }
}
@media (max-width: 650px) {
  .channel-edit-grid { grid-template-columns: 1fr; }
  .store-featured-strip { grid-template-columns: 1fr; }
  .store-featured-main { grid-column: auto; }
  .permissions-modal .permission-layout { display: block; height: min(700px, calc(100vh - 140px)); overflow: hidden; }
  .permissions-modal .permission-groups { height: 176px; border-right: 0; border-bottom: 1px solid var(--line); }
  .permissions-modal .permission-group-list { display: flex; height: 117px; gap: 5px; overflow-x: auto; }
  .permissions-modal .group-item { min-width: 145px; }
  .permissions-modal .permission-editor { height: calc(100% - 176px); }
  .permissions-modal .permission-search { margin-left: 17px; }
  .permission-count { margin-right: 17px; }
  .permissions-modal .permission-list { padding-left: 17px; padding-right: 17px; }
  .permissions-modal .permission-row { grid-template-columns: minmax(120px, 1fr) 42px 28px; }
  .permissions-modal .permission-type { display: none; }
  .global-search-results { padding-left: 15px; padding-right: 15px; }
}

/* v15: centered Store, image role icons and a real vertical permission list. */
.store-view { padding: clamp(28px, 5vw, 58px) 24px 52px; }
.store-page-shell { width: min(1100px, 100%); margin: 0 auto; }
.store-featured-strip { display: none; }
.store-page-hero { display: block; max-width: 820px; margin: 0 auto 31px; padding: 0 8px; text-align: center; }
.store-page-hero > div:first-child { display: grid; justify-items: center; }
.store-page-hero p { max-width: 650px; margin-left: auto; margin-right: auto; }
.store-hero-badge { display: none; }
.store-page-layout { display: block; width: min(100%, 950px); margin: 0 auto; }
.store-benefits { display: none; }
.store-builder-card { padding: 45px 35px 45px; box-shadow: 0 18px 48px rgba(0,0,0,.2); }
.store-section-heading { margin-bottom: 17px; }
.store-page-foot { align-items: center; }
.store-page-foot p { max-width: 420px; }
.store-view .admin-order-area { width: min(100%, 760px); margin: 22px auto 0; }

.role-icon-image { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.permission-badge img, .group-mark img, .selected-group-icon img, .group-icon-preview img { width: 16px; height: 16px; display: block; object-fit: cover; border-radius: 4px; }
.channel-member-badges, .message-role-badges { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.channel-member-badges { margin-left: auto; }
.message-role-badges { margin-left: auto; }
.channel-member-badges .permission-badge, .message-role-badges .permission-badge { margin-left: 0; }
.channel-member-tools { margin-left: 4px; }
.permission-badges { margin-left: 0; }
.permission-badge { width: 18px; height: 18px; padding: 2px; display: inline-grid; place-items: center; overflow: hidden; border-radius: 5px; }
.group-icon-editor { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 11px; }
.group-icon-preview { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(142,118,255,.48); border-radius: 14px; color: #ddd6ff; background: radial-gradient(circle at 30% 25%, rgba(196,188,255,.45), transparent 35%), linear-gradient(145deg, #5542a8, #211942); font-size: 20px; font-weight: 900; }
.group-icon-editor > label { min-width: 0; }

.permissions-modal { width: min(1140px, calc(100vw - 24px)); max-width: 1250px; }
.permissions-modal .permission-layout { height: min(720px, calc(100vh - 145px)); grid-template-columns: 276px minmax(0, 1fr); }
.permissions-modal .permission-groups { min-height: 0; overflow: hidden; }
.permissions-modal .permission-group-list { display: block; list-style: none; min-height: 0; height: calc(100% - 39px); margin: 0; padding: 0 3px 18px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #39344b transparent; }
.permissions-modal .permission-group-list > li { margin: 0; padding: 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.permissions-modal .permission-group-list > li:last-child { border-bottom: 0; }
.permissions-modal .group-item { width: 100%; min-height: 51px; margin: 0; padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; text-align: left; }
.permissions-modal .group-item:hover { border: 0; background: rgba(255,255,255,.045); }
.permissions-modal .group-item.active { border: 0; background: linear-gradient(100deg, rgba(142,118,255,.21), rgba(142,118,255,.06)); box-shadow: inset 3px 0 rgba(142,118,255,.9); }
.permissions-modal .group-item .group-mark { width: 30px; height: 30px; flex: 0 0 30px; overflow: hidden; }
.permission-groups-empty { border-bottom: 0 !important; }
.permissions-modal .permission-editor { min-height: 0; }
.permissions-modal .permission-list { height: 0; min-height: 0; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #39344b transparent; }
.selected-group-icon { overflow: hidden; padding: 6px; }

@media (max-width: 900px) {
  .permissions-modal .permission-layout { grid-template-columns: 210px minmax(0, 1fr); }
}
@media (max-width: 650px) {
  .store-view { padding-left: 14px; padding-right: 14px; }
  .store-builder-card { padding-left: 15px; padding-right: 15px; }
  .permissions-modal .permission-layout { display: block; height: min(720px, calc(100vh - 138px)); overflow: hidden; }
  .permissions-modal .permission-groups { height: 190px; border-right: 0; border-bottom: 1px solid var(--line); }
  .permissions-modal .permission-group-list { height: 132px; overflow-y: auto; overflow-x: hidden; }
  .permissions-modal .group-item { min-width: 0; }
  .permissions-modal .permission-editor { height: calc(100% - 190px); }
  .permissions-modal .permission-list { height: 0; }
}

/* v16: clean role marks, old-style Discover layout and neutral search focus. */
.permission-badge {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #cfc4ff;
}
.permission-badge img {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
  border-radius: 4px;
}
.channel-member-badges, .message-role-badges { gap: 5px; background: transparent; }
.global-search-input { border-color: var(--line); }
.global-search-input input:focus, .global-search-input input:focus-visible {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.global-search-result.no-icon { grid-template-columns: minmax(0, 1fr) auto; }
.global-search-result.no-icon > span { min-width: 0; display: grid; gap: 3px; grid-column: 1; }
.global-search-result.no-icon > em { grid-column: 2; }

.app-shell.discover-mode { grid-template-columns: minmax(0, 1fr); }
.app-shell.discover-mode > .server-rail,
.app-shell.discover-mode > .server-sidebar { display: none; }
.app-shell.discover-mode .workspace { min-width: 0; }
.app-shell.discover-mode .discover-view { padding: clamp(39px, 5vw, 53px) 24px 50px; }
.app-shell.discover-mode .discover-page-shell { width: min(1100px, 100%); }
.app-shell.discover-mode .discover-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 245px;
  align-items: start;
  gap: 38px;
  max-width: none;
  margin: 0;
  padding: 0 0 25px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.app-shell.discover-mode .discover-hero-copy { padding: 0; }
.app-shell.discover-mode .discover-hero h2 {
  max-width: 590px;
  margin: 11px 0 13px;
  font-size: clamp(43px, 4.7vw, 58px);
  line-height: .95;
}
.app-shell.discover-mode .discover-hero p { max-width: 650px; font-size: 10px; line-height: 1.7; }
.app-shell.discover-mode .discover-hero-actions { margin-top: 23px; }
.app-shell.discover-mode .discover-hero-panel {
  width: auto;
  min-height: 145px;
  padding: 8px 0 0 21px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.app-shell.discover-mode .discover-hero-panel::after { display: none; }
.app-shell.discover-mode .discover-panel-mark { width: 35px; height: 35px; border-radius: 10px; font-size: 17px; box-shadow: none; }
.app-shell.discover-mode .discover-panel-copy { gap: 3px; }
.app-shell.discover-mode .discover-panel-copy strong { font-size: 15px; }
.app-shell.discover-mode .discover-panel-rights-label { margin-top: 8px; }
.app-shell.discover-mode .discover-panel-copy p { max-width: 210px; font-size: 8px; }
.app-shell.discover-mode .discover-panel-action { min-height: 27px; margin-top: 5px; font-size: 8px; }
.app-shell.discover-mode .discover-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: none;
  gap: 0;
  margin: 0 0 34px;
  border-bottom: 1px solid var(--line);
}
.app-shell.discover-mode .discover-stats article {
  min-height: 86px;
  padding: 14px 15px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.app-shell.discover-mode .discover-stats article:first-child { padding-left: 14px; }
.app-shell.discover-mode .discover-stats article:last-child { border-right: 0; }
.app-shell.discover-mode .discover-stats article::after { display: none; }
.app-shell.discover-mode .discover-stats .rights-stat { background: transparent; border-color: var(--line); }
.app-shell.discover-mode .discover-directory-head { margin-top: 0; margin-bottom: 13px; }
.app-shell.discover-mode .discover-directory-head h3 { margin-top: 8px; font-size: 18px; }
.app-shell.discover-mode .discover-directory-head p { font-size: 9px; }
.app-shell.discover-mode .discover-search { width: min(310px, 34vw); }
.app-shell.discover-mode .discover-server-grid {
  max-width: none;
  grid-template-columns: repeat(auto-fill, minmax(300px, 316px));
  justify-content: start;
  gap: 12px;
}
.app-shell.discover-mode .discover-server-card { border-radius: 9px; }
.app-shell.discover-mode .discover-card-cover { height: 116px; }
.app-shell.discover-mode .discover-card-body { padding: 13px; }
.app-shell.discover-mode .discover-bottom-grid { display: none; }

@media (max-width: 800px) {
  .app-shell.discover-mode .discover-hero { grid-template-columns: 1fr; gap: 24px; }
  .app-shell.discover-mode .discover-hero-panel { min-height: 0; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .app-shell.discover-mode .discover-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell.discover-mode .discover-stats article { border-bottom: 1px solid var(--line); }
  .app-shell.discover-mode .discover-stats article:nth-child(2) { border-right: 0; }
  .app-shell.discover-mode .discover-stats article:nth-child(3) { border-bottom: 0; }
  .app-shell.discover-mode .discover-stats article:nth-child(4) { border-bottom: 0; border-right: 0; }
  .app-shell.discover-mode .discover-directory-head { align-items: start; flex-direction: column; }
  .app-shell.discover-mode .discover-directory-tools, .app-shell.discover-mode .discover-search { width: 100%; }
}
@media (max-width: 500px) {
  .app-shell.discover-mode .discover-view { padding-left: 17px; padding-right: 17px; }
  .app-shell.discover-mode .discover-hero h2 { font-size: 40px; }
  .app-shell.discover-mode .discover-stats { grid-template-columns: 1fr; }
  .app-shell.discover-mode .discover-stats article,
  .app-shell.discover-mode .discover-stats article:nth-child(2),
  .app-shell.discover-mode .discover-stats article:nth-child(3),
  .app-shell.discover-mode .discover-stats article:nth-child(4) { border-right: 0; border-bottom: 1px solid var(--line); }
  .app-shell.discover-mode .discover-stats article:last-child { border-bottom: 0; }
}

/* v17: full-width server view, lightweight return affordance and level-aware role list. */
.app-shell.server-mode { grid-template-columns: minmax(0, 1fr) 356px; }
.app-shell.server-mode > .server-rail,
.app-shell.server-mode > .server-sidebar { display: none; }
.app-shell.server-mode .workspace { min-width: 0; }
.app-shell.server-mode .channel-stage { padding-left: clamp(24px, 4vw, 52px); padding-right: clamp(24px, 4vw, 52px); }
.app-shell.server-mode .channel-stage-head,
.app-shell.server-mode .tree-heading,
.app-shell.server-mode .channel-tree { max-width: 1160px; margin-left: auto; margin-right: auto; }
.app-shell.server-mode .channel-stage-head { width: 100%; }
.app-shell.server-mode .tree-heading { width: 100%; }
.app-shell.server-mode .channel-tree { width: 100%; padding-left: 0; padding-right: 0; }
.back-to-discover { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 4px 0 0; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 700; }
.back-to-discover:hover { color: var(--text); }
.back-to-discover > span { color: inherit; }
.server-mode .channel-heading { flex: 1; }

.back-to-discover[data-tooltip], .permission-badge[data-tooltip] { position: relative; }
.back-to-discover[data-tooltip]::after, .permission-badge[data-tooltip]::after { content: attr(data-tooltip); position: absolute; z-index: 120; left: 50%; bottom: calc(100% + 7px); width: max-content; max-width: 190px; padding: 5px 7px; border: 1px solid var(--line-strong); border-radius: 5px; color: #e7e3f0; background: #17171a; box-shadow: 0 9px 22px rgba(0,0,0,.32); font-size: 8px; font-style: normal; font-weight: 600; line-height: 1.25; opacity: 0; pointer-events: none; transform: translate(-50%, 3px); transition: opacity .14s, transform .14s; white-space: nowrap; }
.back-to-discover[data-tooltip]::after { left: 0; transform: translateY(3px); }
.back-to-discover[data-tooltip]:hover::after, .permission-badge[data-tooltip]:hover::after { opacity: 1; transform: translate(-50%, 0); }
.back-to-discover[data-tooltip]:hover::after { transform: translateY(0); }

.permission-badge, .group-mark, .group-mark.query, .selected-group-icon, .group-icon-preview { border: 0; background: transparent; box-shadow: none; }
.selected-group-icon:hover { border: 0; background: transparent; }
.permission-badges { margin-left: auto; }
.group-item-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
.group-item-copy strong { overflow: hidden; color: inherit; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.group-item-copy small { color: var(--muted-2); font-size: 8px; }
.permissions-modal .group-item em { margin-left: 5px; }

@media (max-width: 900px) {
  .app-shell.server-mode { grid-template-columns: minmax(0, 1fr); }
  .app-shell.server-mode .channel-stage { padding-left: 17px; padding-right: 17px; }
  .app-shell.server-mode .members-sidebar { position: fixed; z-index: 15; top: 0; right: 0; bottom: 0; width: 320px; transform: translateX(100%); transition: transform .25s; box-shadow: -18px 0 50px rgba(0,0,0,.45); }
  .app-shell.server-mode .members-sidebar.open { transform: none; }
}

@media (max-width: 500px) {
  .app-shell.server-mode .members-sidebar { width: min(94vw, 340px); }
  .back-to-discover { font-size: 9px; }
  .back-to-discover > span { display: none; }
}

/* v18: only Discover and Store are menu-free; restore the normal server shell. */
.app-shell.store-mode { grid-template-columns: minmax(0, 1fr); }
.app-shell.store-mode > .server-rail,
.app-shell.store-mode > .server-sidebar { display: none; }
.app-shell.store-mode .workspace { min-width: 0; }

.app-shell.server-mode { grid-template-columns: 68px 246px minmax(520px, 1fr) 356px; }
.app-shell.server-mode > .server-rail,
.app-shell.server-mode > .server-sidebar { display: flex; }
.app-shell.server-mode .channel-stage { padding-left: 27px; padding-right: 27px; }
.app-shell.server-mode .channel-stage-head,
.app-shell.server-mode .tree-heading,
.app-shell.server-mode .channel-tree {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.app-shell.server-mode .channel-stage-head,
.app-shell.server-mode .tree-heading { width: auto; }
.app-shell.server-mode .channel-tree { width: auto; padding-left: 4px; padding-right: 4px; }

@media (max-width: 1250px) {
  .app-shell.server-mode { grid-template-columns: 61px 225px minmax(420px, 1fr) 300px; }
  .app-shell.server-mode .channel-stage { padding-left: 21px; padding-right: 21px; }
}

@media (max-width: 900px) {
  .app-shell.server-mode { grid-template-columns: 61px minmax(0, 1fr); }
  .app-shell.server-mode > .server-rail,
  .app-shell.server-mode > .server-sidebar { display: flex; }
  .app-shell.server-mode .server-sidebar {
    position: fixed;
    z-index: 14;
    left: 61px;
    top: 0;
    bottom: 0;
    width: 246px;
    transform: translateX(-110%);
    transition: transform .25s;
    box-shadow: 18px 0 50px rgba(0,0,0,.4);
  }
  .app-shell.server-mode .server-sidebar.open { transform: none; }
  .app-shell.server-mode .channel-stage { padding-left: 17px; padding-right: 17px; }
}

@media (max-width: 650px) {
  .app-shell.server-mode { grid-template-columns: 56px minmax(0, 1fr); }
  .app-shell.server-mode .server-sidebar { left: 56px; width: 245px; }
  .app-shell.server-mode .channel-stage { padding: 15px 11px 0; }
  .app-shell.server-mode .channel-stage-head,
  .app-shell.server-mode .tree-heading,
  .app-shell.server-mode .channel-tree { max-width: none; margin-left: 0; margin-right: 0; }
  .app-shell.server-mode .channel-tree { width: auto; padding-left: 4px; padding-right: 4px; }
}

/* v19: role icons use the Dismox tooltip instead of the browser's white title bubble. */
.permission-badge[data-tooltip] {
  position: relative;
  z-index: 1;
  overflow: visible;
  cursor: help;
  outline: none;
}
.permission-badge[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 140;
  left: 50%;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 210px;
  padding: 6px 8px;
  border: 1px solid rgba(142,118,255,.3);
  border-radius: 6px;
  color: #eeeaff;
  background: #1a1920;
  box-shadow: 0 10px 25px rgba(0,0,0,.42);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .14s, transform .14s;
  white-space: nowrap;
}
.permission-badge[data-tooltip]:hover,
.permission-badge[data-tooltip]:focus-visible { z-index: 20; }
.permission-badge[data-tooltip]:hover::after,
.permission-badge[data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.moderation-notice-icon.kick { border-color: rgba(255,174,98,.32); color: #ffc17e; background: rgba(255,174,98,.1); }

/* v20: rich member profiles and profile reporting. */
.channel-member-tools .member-profile-button { width: auto; min-width: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 7px; color: #cfc8ff; background: rgba(142,118,255,.1); }
.channel-member-tools .member-profile-button:hover { color: #fff; background: rgba(142,118,255,.22); }
.member-profile-button em { font-size: 7px; font-style: normal; font-weight: 800; }
.profile-trigger { cursor: pointer; transition: border-color .15s, transform .15s; }
.profile-trigger:hover { border-color: rgba(142,118,255,.75); transform: translateY(-1px); }
.profile-trigger-name { padding: 0; border: 0; color: #d9d6df; background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.profile-trigger-name:hover { color: var(--accent-2); }

.profile-editor-modal { max-height: min(820px, calc(100vh - 28px)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #39354b transparent; }
.profile-edit-grid, .profile-social-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }

.profile-showcase-modal { width: min(1040px, calc(100vw - 34px)); max-height: min(820px, calc(100vh - 30px)); position: relative; overflow-y: auto; border-color: rgba(142,118,255,.25); border-radius: 14px; background: #121216; box-shadow: 0 32px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(142,118,255,.05); scrollbar-width: thin; scrollbar-color: #3c3750 transparent; }
.profile-showcase-close { z-index: 4; position: absolute; top: 17px; right: 17px; color: rgba(255,255,255,.78); background: rgba(10,10,13,.56); backdrop-filter: blur(10px); }
.profile-showcase-banner { height: 188px; position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.06); background: radial-gradient(circle at 16% 15%, rgba(159,132,255,.54), transparent 28%), radial-gradient(circle at 82% 30%, rgba(63,139,255,.22), transparent 25%), linear-gradient(135deg, #2e2358, #14131d 56%, #18142d); background-position: center; background-size: cover; }
.profile-showcase-banner::before { content: "DISMOX"; position: absolute; right: 58px; bottom: 2px; color: rgba(255,255,255,.045); font-size: 82px; font-weight: 900; letter-spacing: -.07em; transform: rotate(-5deg); }
.profile-showcase-banner.has-image::before { display: none; }
.profile-showcase-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,6,9,.02), rgba(9,9,12,.72)); }
.profile-showcase-identity { min-height: 106px; display: flex; align-items: center; gap: 16px; padding: 0 28px 18px; border-bottom: 1px solid rgba(255,255,255,.06); }
.profile-showcase-avatar { width: 104px; height: 104px; display: grid; place-items: center; flex: 0 0 auto; margin-top: -48px; overflow: hidden; border: 5px solid #121216; border-radius: 28px; color: #fff; background: linear-gradient(145deg,#725ce1,#261d4c); box-shadow: 0 15px 34px rgba(0,0,0,.42); font-size: 28px; font-weight: 900; }
.profile-showcase-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-showcase-name { min-width: 0; flex: 1; display: grid; gap: 5px; padding-top: 13px; }
.profile-showcase-name h2 { overflow: hidden; margin: 0; color: #f3f0fa; font-size: 25px; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.profile-presence { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }
.profile-role-icons { display: inline-flex; align-items: center; margin-left: 5px; }
.profile-badge-list { display: inline-flex; align-items: center; gap: 5px; }
.profile-showcase-actions { display: flex; align-items: center; gap: 8px; padding-top: 14px; }
.profile-showcase-content { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 15px; padding: 19px 22px 23px; }
.profile-main-column, .profile-side-column { min-width: 0; display: grid; align-content: start; gap: 13px; }
.profile-info-block { min-width: 0; padding: 16px; border: 1px solid rgba(255,255,255,.065); border-radius: 11px; background: rgba(255,255,255,.018); }
.profile-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.profile-section-title span { color: #aca1e7; font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.profile-section-title small { color: var(--muted-2); font-size: 8px; }
#user-profile-bio { margin: 0; color: #b8b5c2; font-size: 11px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-social-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profile-social-list a { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid rgba(255,255,255,.055); border-radius: 8px; color: #d7d3e2; background: rgba(255,255,255,.02); text-decoration: none; }
.profile-social-list a:hover { border-color: rgba(142,118,255,.32); background: rgba(142,118,255,.08); }
.profile-social-list a > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #d8d0ff; background: rgba(142,118,255,.13); }
.profile-social-list strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.profile-social-list em { color: var(--muted-2); font-size: 7px; font-style: normal; }
.profile-server-grid { display: grid; gap: 8px; }
.profile-server-card { min-width: 0; min-height: 74px; position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 11px; overflow: hidden; padding: 11px; border: 1px solid rgba(255,255,255,.065); border-radius: 10px; color: #e5e1ed; background: #17171b; text-align: left; }
.profile-server-card:hover { border-color: rgba(142,118,255,.38); transform: translateY(-1px); }
.profile-server-cover { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(18,18,22,.92), rgba(18,18,22,.78)), var(--profile-cover); background-position: center; background-size: cover; opacity: .72; }
.profile-server-icon { width: 46px; height: 46px; z-index: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(176,160,255,.38); border-radius: 12px; color: #fff; background: linear-gradient(145deg,#5f4abd,#282044); font-size: 10px; font-weight: 900; }
.profile-server-icon img { width: 100%; height: 100%; object-fit: cover; }
.profile-server-copy { z-index: 1; min-width: 0; display: grid; gap: 5px; }
.profile-server-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profile-server-copy small { color: #8c8997; font-size: 8px; }
.profile-server-card > em { z-index: 1; color: #bcb1ff; font-size: 8px; font-style: normal; }
.profile-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.profile-stat-grid > span { min-width: 0; display: grid; gap: 4px; padding: 12px 9px; border: 1px solid rgba(142,118,255,.12); border-radius: 10px; background: rgba(142,118,255,.045); }
.profile-stat-grid b { color: #e8e3ff; font-size: 17px; }
.profile-stat-grid small { color: var(--muted-2); font-size: 7px; line-height: 1.3; }
.profile-report-block { max-height: 390px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #39344b transparent; }
.profile-report-list { display: grid; gap: 6px; }
.profile-report-item { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: start; gap: 9px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.profile-report-item:last-child { border-bottom: 0; }
.report-state { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #ffb45e; box-shadow: 0 0 8px rgba(255,180,94,.35); }
.report-state.closed { background: var(--green); }
.profile-report-item div { min-width: 0; }
.profile-report-item strong { color: #d8d3df; font-size: 9px; }
.profile-report-item p { margin: 4px 0; color: #9996a3; font-size: 8px; line-height: 1.45; overflow-wrap: anywhere; }
.profile-report-item small { color: var(--muted-2); font-size: 7px; }
.profile-report-item > em { color: #e3ad6a; font-size: 6px; font-style: normal; font-weight: 900; letter-spacing: .08em; }
.profile-clean-state { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--muted-2); text-align: center; }
.profile-clean-state > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(88,214,161,.25); border-radius: 12px; color: var(--green); background: rgba(88,214,161,.07); font-size: 16px; }
.profile-clean-state strong { color: #ccebdd; font-size: 10px; }
.profile-clean-state small { max-width: 210px; font-size: 8px; line-height: 1.5; }
.profile-empty-line { padding: 14px; border: 1px dashed rgba(255,255,255,.08); border-radius: 9px; color: var(--muted-2); font-size: 9px; text-align: center; }

@media (max-width: 820px) {
  .profile-showcase-content { grid-template-columns: 1fr; }
  .profile-showcase-banner { height: 145px; }
  .profile-showcase-identity { align-items: flex-start; flex-wrap: wrap; padding-left: 18px; padding-right: 18px; }
  .profile-showcase-avatar { width: 82px; height: 82px; margin-top: -35px; border-radius: 22px; }
  .profile-showcase-name h2 { font-size: 20px; }
  .profile-showcase-actions { width: 100%; padding-top: 0; }
  .profile-social-list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .profile-edit-grid, .profile-social-edit { grid-template-columns: 1fr; }
.profile-showcase-modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .profile-showcase-content { padding: 13px; }
  .profile-stat-grid { grid-template-columns: 1fr 1fr 1fr; }
  .profile-server-card { grid-template-columns: 40px minmax(0, 1fr); }
  .profile-server-card > em { display: none; }
  .member-profile-button em { display: none; }
  .channel-member-tools .member-profile-button { min-width: 22px; padding: 0; }
}

/* v21 — mentions, emoji and GIF composer */
.composer-mention-tool { color: #a996ff; font-size: 14px; font-weight: 900; }
.composer-gif-tool { width: 30px; border: 1px solid rgba(159,136,255,.32); border-radius: 6px; color: #bcaeff; font-size: 7px; font-weight: 900; letter-spacing: .06em; }
.composer-popover, .mention-popover { position: absolute; z-index: 24; right: 12px; bottom: 67px; width: min(360px, calc(100% - 24px)); overflow: hidden; border: 1px solid #2b2933; border-radius: 12px; background: #121216; box-shadow: 0 24px 65px rgba(0,0,0,.65); }
.composer-popover { height: min(440px, calc(100% - 90px)); min-height: 310px; display: flex; flex-direction: column; }
.composer-popover-head { min-height: 49px; display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; border-bottom: 1px solid rgba(255,255,255,.06); }
.composer-popover-head > span { color: #716d7d; font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.composer-tabs { display: flex; gap: 4px; }
.composer-tabs button { min-height: 30px; padding: 0 13px; border: 0; border-radius: 7px; color: #777482; background: transparent; font-size: 9px; font-weight: 800; }
.composer-tabs button.active { color: #fff; background: #29233d; }
.composer-search { height: 43px; display: flex; align-items: center; gap: 7px; margin: 10px 11px 7px; padding: 0 11px; border: 1px solid #292830; border-radius: 8px; background: #0c0c0f; }
.composer-search span { color: #777483; }
.composer-search input { width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; font-size: 10px; }
.composer-media-content { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 11px 12px; scrollbar-width: thin; scrollbar-color: #3c3750 transparent; }
.emoji-section { margin-top: 10px; }
.emoji-section h4, .premium-section-head h4 { margin: 0 0 8px; color: #85818f; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.emoji-grid button { aspect-ratio: 1; padding: 0; border: 0; border-radius: 7px; background: transparent; font-size: 21px; }
.emoji-grid button:hover { background: #24212f; transform: translateY(-1px); }
.premium-section { margin-top: 15px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.premium-section-head { display: flex; align-items: center; justify-content: space-between; }
.premium-section-head span { margin-bottom: 8px; padding: 3px 6px; border-radius: 4px; color: #c6b9ff; background: rgba(132,103,255,.14); font-size: 6px; font-weight: 900; letter-spacing: .12em; }
.premium-emoji-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.premium-emoji-grid button { min-width: 0; display: grid; place-items: center; gap: 3px; padding: 9px 3px 7px; border: 1px solid rgba(157,132,255,.2); border-radius: 9px; color: #ddd7f6; background: linear-gradient(145deg,rgba(132,103,255,.13),rgba(255,255,255,.02)); }
.premium-emoji-grid button b { font-size: 20px; }
.premium-emoji-grid button small { max-width: 100%; overflow: hidden; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.premium-emoji-grid button.locked { opacity: .36; filter: grayscale(.7); }
.gif-grid { columns: 2; column-gap: 7px; }
.gif-card { width: 100%; position: relative; overflow: hidden; display: block; margin: 0 0 7px; padding: 0; break-inside: avoid; border: 0; border-radius: 9px; background: #0a0a0d; }
.gif-card img { width: 100%; min-height: 82px; max-height: 170px; display: block; object-fit: cover; }
.gif-card > span { position: absolute; right: 0; bottom: 0; left: 0; padding: 18px 8px 7px; color: #fff; background: linear-gradient(transparent,rgba(0,0,0,.82)); font-size: 8px; font-weight: 700; text-align: left; }
.gif-card > em { position: absolute; top: 6px; right: 6px; padding: 3px 5px; border-radius: 4px; color: #fff; background: linear-gradient(135deg,#8d6cff,#e84c6d); font-size: 6px; font-style: normal; font-weight: 900; }
.gif-card.locked::after { content: 'BOOST'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(8,8,11,.67); backdrop-filter: blur(2px); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.media-loading { display: grid; min-height: 90px; place-items: center; color: #777482; font-size: 9px; text-align: center; }
.mention-popover { max-height: 330px; overflow-y: auto; padding: 7px; }
.mention-title { padding: 6px 7px 8px; color: #706c7b; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.mention-popover button { width: 100%; min-height: 45px; display: grid; grid-template-columns: 31px minmax(0,1fr) 20px; align-items: center; gap: 9px; padding: 6px 8px; border: 0; border-radius: 8px; color: #dbd8e4; background: transparent; text-align: left; }
.mention-popover button:hover { background: #211e2c; }
.mention-popover button > img, .mention-popover button > span { width: 30px; height: 30px; display: grid; place-items: center; object-fit: cover; border-radius: 9px; color: #fff; background: linear-gradient(145deg,#725ce1,#261d4c); font-size: 9px; font-weight: 800; }
.mention-popover button div { min-width: 0; display: grid; gap: 3px; }
.mention-popover button strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.mention-popover button small { color: #716e7a; font-size: 7px; }
.mention-popover button em { color: #9d89ff; font-size: 12px; font-style: normal; font-weight: 900; }
.message-mention { display: inline; margin: 0 1px; padding: 1px 4px; border: 0; border-radius: 4px; color: #c9bcff; background: rgba(126,98,255,.17); font: inherit; font-weight: 700; }
.message-mention:hover { color: #fff; background: rgba(126,98,255,.3); }
.premium-message-emoji { width: 37px; height: 30px; position: relative; display: inline-grid; place-items: center; margin: 0 3px; vertical-align: middle; border-radius: 8px; color: #fff; background: linear-gradient(145deg,#5f44cf,#241c48); box-shadow: inset 0 0 0 1px rgba(190,174,255,.28); }
.premium-message-emoji b { font-size: 17px; line-height: 1; }
.premium-message-emoji small { position: absolute; right: -3px; bottom: -3px; padding: 1px 3px; border-radius: 3px; color: #fff; background: #e84c6d; font-size: 4px; font-weight: 900; }
.message-gif { width: min(100%, 290px); position: relative; overflow: hidden; margin: 7px 0 2px; border-radius: 10px; background: #0a0a0c; }
.message-gif img { width: 100%; max-height: 260px; display: block; object-fit: cover; }
.message-gif figcaption { position: absolute; top: 7px; right: 7px; padding: 4px 6px; border-radius: 5px; color: #fff; background: linear-gradient(135deg,#8d6cff,#e84c6d); font-size: 6px; font-weight: 900; letter-spacing: .08em; }

@media (max-width: 650px) {
  .composer-popover, .mention-popover { right: 8px; bottom: 64px; width: min(360px, calc(100% - 16px)); }
  .emoji-grid { grid-template-columns: repeat(7, 1fr); }
}

/* v22 — full profile, social hub, billing and notification center */
.message-avatar { width: 34px; min-width: 34px; height: 34px; padding: 0 !important; border-radius: 11px; box-sizing: border-box; }
.message-avatar img { width: 100% !important; height: 100% !important; padding: 0; object-fit: cover; }
.message-body { flex: 1; }
.message-head { align-items: center; gap: 5px; }
.message-role-badges { margin-left: 3px !important; }
.message-role-badges .permission-badge { width: 16px; height: 16px; }
.message-pin { margin-left: auto; }

.app-shell.profile-mode { grid-template-columns: minmax(0, 1fr); }
.app-shell.profile-mode > .server-rail, .app-shell.profile-mode > .server-sidebar { display: none; }
.app-shell.profile-mode #search-chat, .app-shell.profile-mode #open-server-settings, .app-shell.profile-mode #open-permissions { display:none; }
.profile-view { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 26px clamp(18px,4vw,52px) 48px; background: radial-gradient(circle at 75% 2%,rgba(111,83,239,.14),transparent 30%),radial-gradient(circle at 8% 90%,rgba(41,124,112,.08),transparent 34%),#0f0f11; scrollbar-width: thin; scrollbar-color: #373346 transparent; }
.profile-page-shell { width: min(1120px,100%); margin: 0 auto; }
.profile-page-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; color: #716c7f; font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.profile-page-topbar button { padding: 6px 0; border: 0; color: #aaa4b8; background: transparent; font-size: 9px; }
.profile-page-topbar button:hover { color: #fff; }
.profile-page-card { width: 100%; max-height: none; overflow: hidden; border: 1px solid rgba(142,118,255,.22); box-shadow: 0 28px 80px rgba(0,0,0,.35); }
.profile-page-tabs { display: flex; gap: 3px; padding: 0 22px; border-bottom: 1px solid rgba(255,255,255,.06); }
.profile-page-tabs button { min-height: 43px; padding: 0 13px; border: 0; border-bottom: 2px solid transparent; color: #787481; background: transparent; font-size: 9px; font-weight: 800; }
.profile-page-tabs button.active { border-bottom-color: #8e76ff; color: #eeeaff; }
.profile-tab-panel { display: none; }
.profile-tab-panel.active { display: block; }
.profile-servers-feature { padding: 17px; }
.profile-server-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.profile-server-card { min-height: 188px; display: flex; align-items: stretch; flex-direction: column; gap: 0; padding: 0; border-radius: 12px; background: #151519; }
.profile-server-cover { height: 88px; position: relative; inset: auto; display: flex; align-items: flex-start; justify-content: flex-end; padding: 10px; background-image: linear-gradient(180deg,rgba(8,8,12,.04),rgba(8,8,12,.64)),var(--profile-cover); background-position:center; background-size:cover; opacity: 1; }
.profile-server-cover::before { content:'DISMOX'; position:absolute; left:14px; bottom:8px; color:rgba(255,255,255,.1); font-size:28px; font-weight:900; letter-spacing:-.08em; }
.profile-server-cover i { z-index:1; padding:4px 6px; border-radius:5px; color:#d8d0ff; background:rgba(13,12,18,.72); backdrop-filter:blur(8px); font-size:6px; font-style:normal; font-weight:900; letter-spacing:.09em; }
.profile-server-card-body { min-width:0; display:grid; grid-template-columns:43px minmax(0,1fr); align-items:center; gap:10px; padding:11px 12px 8px; }
.profile-server-icon { width:43px; height:43px; }
.profile-server-copy small { overflow:hidden; display:-webkit-box; line-height:1.4; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.profile-server-card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding:8px 12px 11px; border-top:1px solid rgba(255,255,255,.055); }
.profile-server-card-foot small { color:#696675; font-size:7px; font-weight:900; letter-spacing:.09em; }
.profile-server-card-foot em { color:#bcb1ff; font-size:8px; font-style:normal; }

.social-hub { min-height:520px; display:grid; grid-template-columns:320px minmax(0,1fr); }
.social-hub > aside { padding:20px; border-right:1px solid rgba(255,255,255,.06); }
.pending-title { margin-top:22px; }
.friend-list { display:grid; gap:6px; }
.friend-row { min-width:0; display:grid; grid-template-columns:37px minmax(0,1fr) auto; align-items:center; gap:9px; padding:8px; border:1px solid transparent; border-radius:9px; background:rgba(255,255,255,.02); }
.friend-row:hover { border-color:rgba(142,118,255,.18); background:rgba(142,118,255,.055); }
.friend-avatar { width:36px; height:36px; display:grid; place-items:center; overflow:hidden; padding:0; border:1px solid rgba(142,118,255,.28); border-radius:10px; color:#fff; background:#30255d; font-size:9px; font-weight:900; }
.friend-avatar img { width:100%; height:100%; object-fit:cover; }
.friend-row > div { min-width:0; display:grid; gap:3px; }
.friend-row strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.friend-row small { color:#777482; font-size:7px; }
.friend-row > span { display:flex; gap:4px; }
.friend-row > span button { min-height:25px; padding:0 7px; border:1px solid #34313e; border-radius:6px; color:#bbb4d2; background:#19181d; font-size:7px; font-weight:800; }
.dm-panel { min-width:0; min-height:0; padding:20px; }
.dm-empty { height:100%; min-height:300px; display:grid; place-items:center; align-content:center; gap:8px; color:#777482; text-align:center; }
.dm-empty span { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(142,118,255,.22); border-radius:15px; color:#b9abff; background:rgba(142,118,255,.08); font-size:18px; }
.dm-empty strong { color:#dcd7e7; font-size:12px; }.dm-empty p { max-width:300px; margin:0; font-size:9px; line-height:1.6; }
#dm-conversation { height:480px; display:flex; flex-direction:column; border:1px solid rgba(255,255,255,.06); border-radius:12px; overflow:hidden; background:#101013; }
.dm-head { min-height:62px; display:flex; align-items:center; gap:10px; padding:10px 13px; border-bottom:1px solid rgba(255,255,255,.06); }
#dm-user-avatar { width:38px; height:38px; display:grid; place-items:center; overflow:hidden; padding:0; border:1px solid rgba(142,118,255,.3); border-radius:11px; color:#fff; background:#30255d; font-size:9px; font-weight:900; }
#dm-user-avatar img { width:100%; height:100%; object-fit:cover; }.dm-head > div { display:grid; gap:3px; }.dm-head strong { font-size:11px; }.dm-head small { color:#777482; font-size:8px; }
.dm-message-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:7px; padding:15px; }
.dm-message { max-width:75%; align-self:flex-start; padding:9px 11px; border:1px solid #292730; border-radius:5px 11px 11px; background:#19191d; }
.dm-message.mine { align-self:flex-end; border-color:rgba(142,118,255,.28); border-radius:11px 5px 11px 11px; background:rgba(112,84,235,.16); }
.dm-message p { margin:0; color:#d0ccd8; font-size:10px; line-height:1.55; white-space:pre-wrap; }.dm-message small { display:block; margin-top:4px; color:#676473; font-size:6px; text-align:right; }
.dm-form { display:flex; gap:8px; padding:10px; border-top:1px solid rgba(255,255,255,.06); }.dm-form input { flex:1; border:1px solid #2b2933; background:#0c0c0f; }

.invoice-page-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:25px 25px 18px; }.invoice-page-head h3 { margin:7px 0 5px; font-size:18px; }.invoice-page-head p { margin:0; color:#85818f; font-size:9px; }
.invoice-list { display:grid; gap:9px; padding:0 25px 28px; }
.invoice-card { display:grid; grid-template-columns:43px minmax(0,1fr) auto; align-items:center; gap:13px; padding:14px; border:1px solid rgba(255,255,255,.065); border-radius:11px; background:rgba(255,255,255,.018); }
.invoice-mark { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(142,118,255,.22); border-radius:11px; color:#b6a9ff; background:rgba(142,118,255,.08); font-size:15px; }
.invoice-card > div:nth-child(2) { min-width:0; }.invoice-title { display:flex; align-items:center; gap:8px; }.invoice-title strong { font-size:11px; }.invoice-card p { margin:5px 0; color:#8b8794; font-size:8px; }.invoice-card small { color:#666370; font:7px ui-monospace,monospace; }.invoice-card > b { color:#e2dcff; font-size:12px; }
.order-status.pending { color:#ffbd70; }.order-status.approved { color:#69dda9; }.order-status.rejected { color:#ff7b89; }
.invoice-empty { display:grid; place-items:center; gap:8px; padding:70px 20px; border:1px dashed rgba(255,255,255,.08); border-radius:12px; color:#777482; text-align:center; }.invoice-empty span { font-size:22px; }.invoice-empty strong { color:#d4d0db; }.invoice-empty p { margin:0; font-size:9px; }

.notification-center { position:relative; }
.notification-trigger { position:relative; }.notification-trigger b { min-width:17px; height:17px; position:absolute; top:-3px; right:-3px; display:grid; place-items:center; padding:0 3px; border:2px solid #111113; border-radius:8px; color:#fff; background:#2b2b2b; font-size:8px; }
.notification-dropdown { width:360px; max-height:min(560px,calc(100vh - 90px)); position:absolute; z-index:50; top:40px; right:0; overflow:hidden; border:1px solid #302d38; border-radius:12px; background:#121216; box-shadow:0 25px 70px rgba(0,0,0,.7); }
.notification-dropdown-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px; border-bottom:1px solid rgba(255,255,255,.06); }.notification-dropdown-head > div { display:grid; gap:3px; }.notification-dropdown-head strong { font-size:11px; }.notification-dropdown-head small { color:#716e7a; font-size:7px; }.notification-dropdown-head button { padding:0; border:0; color:#9f91e9; background:transparent; font-size:7px; }
.notification-list { max-height:470px; overflow-y:auto; padding:6px; }.notification-item { width:100%; display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; padding:10px; border:0; border-radius:9px; color:#d5d1dc; background:transparent; text-align:left; }.notification-item:hover { background:rgba(255,255,255,.04); }.notification-item.unread { background:rgba(125,96,245,.08); }.notification-item > span { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; color:#b9acff; background:rgba(142,118,255,.12); }.notification-item > div { min-width:0; }.notification-item strong { display:block; font-size:9px; }.notification-item p { margin:4px 0; overflow:hidden; color:#8b8794; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }.notification-item small { color:#625f6b; font-size:6px; }.notification-empty { padding:40px 15px; color:#777482; font-size:9px; text-align:center; }

@media (max-width:800px) { .profile-server-grid { grid-template-columns:1fr; }.social-hub { grid-template-columns:1fr; }.social-hub > aside { border-right:0; border-bottom:1px solid rgba(255,255,255,.06); }.notification-dropdown { width:min(360px,calc(100vw - 24px)); }.profile-showcase-actions { width:100%; flex-wrap:wrap; }.invoice-card { grid-template-columns:38px minmax(0,1fr); }.invoice-card > b { grid-column:2; }.profile-page-tabs { overflow-x:auto; } }

/* v23 — premium profile, standalone social/billing and scoped voice activity */
.channel-member-row.talking { border-color:transparent !important; background:transparent !important; box-shadow:none !important; }
.channel-member-row.talking .channel-member-copy strong,
.channel-member-row.talking .channel-member-copy em,
.channel-member-row.talking .channel-member-avatar { color:inherit; border-color:inherit; box-shadow:none; }
.channel-member-device.talking { color:#47dc9a !important; filter:drop-shadow(0 0 5px rgba(71,220,154,.24)); }
.message-mention { font-size:9px !important; line-height:1.35 !important; vertical-align:baseline; }
.workspace-header { z-index:70; overflow:visible; }
.workspace-actions { align-items:center; gap:3px; }
.header-action { width:29px; height:29px; display:grid; place-items:center; padding:0; border:1px solid transparent; border-radius:7px; color:#858091; background:transparent; font-size:13px; }
.header-action:hover { border-color:#302c3b; color:#ece8f5; background:#18171c; }
.header-action > svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.header-action[data-tooltip],.channel-member-tools button[data-tooltip],.channel-member-device[data-tooltip] { position:relative; }
.header-action[data-tooltip]::after,.channel-member-tools button[data-tooltip]::after,.channel-member-device[data-tooltip]::after { content:attr(data-tooltip); width:max-content; max-width:190px; position:absolute; z-index:180; top:calc(100% + 8px); left:50%; padding:6px 8px; border:1px solid #302d38; border-radius:6px; color:#e9e5f1; background:#17171b; box-shadow:0 10px 28px rgba(0,0,0,.48); font-size:8px; font-weight:700; line-height:1.2; opacity:0; pointer-events:none; transform:translate(-50%,-3px); transition:.14s ease; white-space:nowrap; }
.header-action[data-tooltip]:hover::after,.header-action[data-tooltip]:focus-visible::after,.channel-member-tools button[data-tooltip]:hover::after,.channel-member-tools button[data-tooltip]:focus-visible::after,.channel-member-device[data-tooltip]:hover::after { opacity:1; transform:translate(-50%,0); }
.channel-member-tools button[data-tooltip]::after,.channel-member-device[data-tooltip]::after { top:auto; right:0; bottom:calc(100% + 7px); left:auto; transform:translateY(3px); }
.channel-member-tools button[data-tooltip]:hover::after,.channel-member-tools button[data-tooltip]:focus-visible::after,.channel-member-device[data-tooltip]:hover::after { transform:translateY(0); }
.channel-member-tools button svg { width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.8; }

.standalone-page-topbar { display:flex; align-items:center; justify-content:space-between; margin:0 auto 14px; color:#716c7f; font-size:7px; font-weight:900; letter-spacing:.14em; }
.standalone-page-topbar button { padding:6px 0; border:0; color:#aaa4b8; background:transparent; font-size:9px; }
.standalone-page-topbar button:hover { color:#fff; }

.app-shell.account-mode { grid-template-columns:minmax(0,1fr); }
.app-shell.account-mode > .server-rail,.app-shell.account-mode > .server-sidebar { display:none; }
.app-shell.account-mode #search-chat,.app-shell.account-mode #open-server-settings,.app-shell.account-mode #open-permissions { display:none; }
.account-view { flex:1 1 0; min-height:0; overflow-y:auto; padding:26px clamp(18px,4vw,52px) 48px; background:radial-gradient(circle at 80% 0,rgba(111,83,239,.13),transparent 31%),#0e0e10; }
.account-page-shell { width:min(1320px,100%); margin:0 auto; }
.account-page-head { min-height:145px; display:flex; align-items:flex-end; padding:28px 32px; border:1px solid #292633; border-bottom:0; background:linear-gradient(115deg,#18151f 0%,#111116 52%,#17132a 100%); }
.account-page-head h2 { margin:7px 0 6px; font-size:27px; letter-spacing:-.04em; }
.account-page-head p { margin:0; color:#8a8593; font-size:9px; }
.account-page-shell .social-hub,.account-surface { }

.profile-view { background:radial-gradient(circle at 76% 0,rgba(87,68,187,.16),transparent 32%),radial-gradient(circle at 6% 82%,rgba(41,124,112,.08),transparent 30%),#0d0d0f; }
.profile-page-shell { width:min(1260px,100%); }
.profile-page-card { position:relative; overflow:visible; border-color:#2c2838; border-radius:16px; background:#111115; box-shadow:0 34px 100px rgba(0,0,0,.5); }
.profile-showcase-banner { height:230px; border-radius:16px 16px 0 0; background-color:#171421; background-image:linear-gradient(105deg,rgba(103,73,217,.72),rgba(17,17,22,.22) 42%,rgba(19,39,72,.5)),var(--profile-banner); }
.profile-showcase-banner::after { content:'DISMOX'; position:absolute; right:32px; bottom:10px; color:rgba(255,255,255,.045); font-size:68px; font-weight:950; letter-spacing:-.09em; }
.profile-showcase-identity { min-height:116px; display:grid; grid-template-columns:130px minmax(0,1fr) auto; align-items:center; gap:18px; padding:0 27px 0 31px; border-bottom:1px solid rgba(255,255,255,.06); }
.profile-showcase-avatar { width:112px; height:112px; align-self:start; transform:translateY(-38px); overflow:hidden; border:7px solid #111115; border-radius:28px; background:linear-gradient(145deg,#7656dc,#30256c); box-shadow:0 18px 38px rgba(0,0,0,.48),0 0 0 1px rgba(142,118,255,.3); font-size:30px; }
.profile-showcase-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-showcase-name h2 { margin:5px 0 7px; font-size:24px; letter-spacing:-.035em; }
.profile-showcase-content { grid-template-columns:minmax(0,1.55fr) minmax(260px,.72fr); gap:15px; padding:20px; }
.profile-info-block { border-color:#292630; border-radius:10px; background:#151519; }
.profile-main-column,.profile-side-column { gap:12px; }
.profile-stat-grid span { min-height:70px; border-radius:9px; background:#17151d; }
.profile-server-card { border-radius:9px; }
.profile-showcase-actions .btn { min-height:32px; border-radius:7px; }

@media (max-width:760px) {
  .profile-showcase-identity { grid-template-columns:88px minmax(0,1fr); padding:0 18px 16px; }
  .profile-showcase-avatar { width:82px; height:82px; border-radius:22px; }
  .profile-showcase-actions { grid-column:1/-1; }
  .profile-showcase-content { grid-template-columns:1fr; padding:13px; }
  .account-page-head { padding:22px 18px; }
}

/* v25 — private calling, refined messages and profile */
.channel-row.has-talking,.channel-stage .channel-row.has-talking { border-color:transparent !important; box-shadow:none !important; color:inherit; }
.channel-row.has-talking .channel-glyph,.channel-row.has-talking .channel-name { color:inherit; }
.channel-stage .channel-row.active { border-color:transparent !important; box-shadow:none !important; background:rgba(255,255,255,.045) !important; }
.channel-row.active::before { background:#7c6ae7; opacity:.7; }

.account-page-shell .social-hub { min-height:610px; grid-template-columns:285px minmax(0,1fr); }
.account-page-shell .dm-panel { padding:16px; background:#0f0f12; }
#dm-conversation { height:575px; border:1px solid #292730; border-radius:14px; background:radial-gradient(circle at 100% 0,rgba(111,83,239,.07),transparent 30%),#101013; box-shadow:0 18px 50px rgba(0,0,0,.2); }
.dm-head { min-height:72px; padding:12px 15px; background:rgba(255,255,255,.012); }
#dm-user-avatar { width:43px; height:43px; border-radius:13px; }
.dm-head strong { font-size:12px; }.dm-head small { font-size:7px; }
.dm-head-actions { display:flex !important; flex-direction:row !important; gap:6px !important; margin-left:auto; }
.dm-head-actions button { width:32px; height:32px; display:grid; place-items:center; position:relative; padding:0; border:1px solid #302d38; border-radius:8px; color:#aaa3ba; background:#18171c; }
.dm-head-actions button:hover { color:#fff; border-color:#514573; background:#211d2d; }
.dm-head-actions svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.dm-message-list { gap:10px; padding:22px 18px; background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px); background-size:100% 42px; }
.dm-message { max-width:67%; padding:10px 12px; border-color:#2a2830; border-radius:4px 12px 12px 12px; background:#19191e; box-shadow:0 6px 18px rgba(0,0,0,.16); }
.dm-message.mine { border-color:#403663; border-radius:12px 4px 12px 12px; background:#241d3d; }
.dm-message p { font-size:10px; }.dm-form { margin:0 10px 10px; padding:7px; border:1px solid #2b2933; border-radius:10px; background:#0b0b0e; }
.dm-form input { min-height:35px; border:0; background:transparent; }.dm-form input:focus { box-shadow:none; }
.dm-form .send-button { width:35px; height:35px; border-radius:8px; }
.direct-call-strip { display:flex; align-items:center; gap:10px; margin:10px 12px 0; padding:9px 11px; border:1px solid rgba(69,211,145,.25); border-radius:9px; background:rgba(29,117,79,.09); }
.direct-call-strip.hidden { display:none; }.call-pulse { width:9px; height:9px; border-radius:50%; background:#45d391; box-shadow:0 0 0 5px rgba(69,211,145,.09); animation:callPulse 1.4s infinite; }
.direct-call-strip > div { display:grid; gap:2px; }.direct-call-strip strong { font-size:9px; }.direct-call-strip small { color:#65ce9e; font-size:7px; }.direct-call-strip button { margin-left:auto; padding:7px 9px; border:1px solid rgba(255,91,111,.3); border-radius:7px; color:#ff8796; background:rgba(143,35,51,.13); font-size:7px; font-weight:800; }
@keyframes callPulse { 50% { box-shadow:0 0 0 9px rgba(69,211,145,0); } }

.incoming-call-modal { display:grid; justify-items:center; gap:8px; padding:30px !important; text-align:center; }
.incoming-call-modal h2 { margin:4px 0 0; }.incoming-call-modal p { margin:0 0 12px; color:#85818f; font-size:9px; }
.incoming-call-avatar { width:86px; height:86px; display:grid; place-items:center; overflow:hidden; margin-bottom:8px; border:6px solid #1d1b25; border-radius:27px; color:#fff; background:#493692; box-shadow:0 18px 42px rgba(0,0,0,.4); font-size:24px; font-weight:900; }
.incoming-call-avatar img { width:100%; height:100%; object-fit:cover; }.incoming-call-actions { display:flex; gap:18px; }.call-action { width:48px; height:48px; display:grid; place-items:center; position:relative; border:0; border-radius:15px; color:#fff; font-size:22px; }.call-action.reject { background:#b9364d; }.call-action.accept { background:#258d61; }.call-action svg { width:20px; fill:none; stroke:currentColor; stroke-width:1.8; }

.profile-page-card { background:linear-gradient(180deg,#121117,#101014); }
.profile-showcase-banner { height:255px; }
.profile-showcase-identity { min-height:132px; padding-left:38px; padding-right:38px; }
.profile-showcase-avatar { width:126px; height:126px; border-radius:34px; transform:translateY(-43px); }
.profile-about-block { min-height:120px; position:relative; overflow:hidden; }
.profile-about-block::after { content:'N'; position:absolute; right:18px; bottom:-35px; color:rgba(142,118,255,.035); font-size:120px; font-weight:950; }
.profile-info-block { padding:19px; }
.profile-section-title { margin-bottom:13px; }
.profile-social-list { grid-template-columns:repeat(2,minmax(0,1fr)); }

.dm-head-actions button[data-tooltip]::after,.call-action[data-tooltip]::after { content:attr(data-tooltip); position:absolute; z-index:200; right:0; bottom:calc(100% + 7px); width:max-content; padding:6px 8px; border:1px solid #302d38; border-radius:6px; color:#eeeaf5; background:#17171b; font-size:8px; opacity:0; pointer-events:none; transform:translateY(3px); transition:.14s; }
.dm-head-actions button[data-tooltip]:hover::after,.call-action[data-tooltip]:hover::after { opacity:1; transform:translateY(0); }

@media(max-width:800px) { .account-page-shell .social-hub { grid-template-columns:1fr; }.account-page-shell .social-hub>aside { max-height:240px; overflow:auto; }.profile-showcase-banner { height:175px; }.profile-showcase-identity { padding-left:18px; padding-right:18px; }.profile-showcase-avatar { width:88px; height:88px; border-radius:23px; } }

/* v26 — call stage and compact desktop scrollbars */
.outgoing-call-modal { display:grid; justify-items:center; gap:9px; padding:32px !important; text-align:center; }
.outgoing-call-modal h2 { margin:4px 0 0; }.outgoing-call-modal p { margin:0 0 13px; color:#8f8999; font-size:10px; }
.outgoing-call-rings { width:128px; height:110px; position:relative; display:grid; place-items:center; }
.outgoing-call-rings .incoming-call-avatar { z-index:2; margin:0; }
.outgoing-call-rings>i { position:absolute; width:92px; height:92px; border:1px solid rgba(142,118,255,.25); border-radius:31px; animation:outgoingRing 1.8s ease-out infinite; }
.outgoing-call-rings>i:last-child { animation-delay:.65s; }
@keyframes outgoingRing { from{opacity:.8;transform:scale(.75)} to{opacity:0;transform:scale(1.45)} }

.direct-call-stage { min-height:285px; display:grid; place-items:center; align-content:center; gap:25px; margin:10px 12px 0; border:1px solid #292735; border-radius:13px; background:radial-gradient(circle at 25% 35%,rgba(105,78,222,.18),transparent 30%),radial-gradient(circle at 75% 35%,rgba(35,130,104,.12),transparent 29%),#121116; overflow:hidden; }
.direct-call-stage.hidden { display:none; }.call-stage-people { width:min(570px,90%); display:grid; grid-template-columns:1fr minmax(100px,170px) 1fr; align-items:center; }
.call-person { display:grid; justify-items:center; gap:7px; }.call-person-avatar { width:104px; height:104px; display:grid; place-items:center; overflow:hidden; border:5px solid #1b1922; border-radius:50%; color:#fff; background:#493792; box-shadow:0 18px 45px rgba(0,0,0,.4),0 0 0 1px rgba(142,118,255,.25); font-size:25px; font-weight:900; }
.call-person-avatar img { width:100%; height:100%; object-fit:cover; }.call-person strong { font-size:11px; }.call-person small { color:#5ed9a1; font-size:7px; }
.call-link { display:flex; align-items:center; gap:8px; color:#777183; font-size:6px; font-weight:900; letter-spacing:.12em; }.call-link i { height:1px; flex:1; background:linear-gradient(90deg,transparent,#51466e); }.call-link i:last-child { transform:scaleX(-1); }
.call-stage-controls { display:flex; gap:9px; }.call-stage-controls button { width:42px; height:42px; display:grid; place-items:center; position:relative; padding:0; border:1px solid #34313e; border-radius:13px; color:#c6c0d0; background:#1b1a20; }
.call-stage-controls button:hover,.call-stage-controls button.active { color:#fff; border-color:#5b4b86; background:#2a2340; }.call-stage-controls button.hangup { border-color:rgba(232,77,98,.35); color:#fff; background:#b7374c; }.call-stage-controls svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.call-stage-controls button[data-tooltip]::after { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 7px); left:50%; width:max-content; padding:6px 8px; border:1px solid #302d38; border-radius:6px; color:#eeeaf5; background:#17171b; font-size:8px; opacity:0; pointer-events:none; transform:translate(-50%,3px); transition:.14s; }.call-stage-controls button:hover::after { opacity:1; transform:translate(-50%,0); }
.dm-call-log { width:max-content; max-width:82%; align-self:center; display:flex; align-items:center; gap:9px; padding:8px 12px; border:1px solid #2c2932; border-radius:8px; color:#aaa4b1; background:#151519; }.dm-call-log>span { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; color:#ff8997; background:rgba(203,61,81,.11); }.dm-call-log>div { display:grid; gap:3px; }.dm-call-log strong { color:#d3ced9; font-size:8px; }.dm-call-log small { color:#706b78; font-size:7px; }
.dm-message-list { scrollbar-width:thin; scrollbar-color:#302d39 transparent; }.dm-message-list::-webkit-scrollbar { width:7px; }.dm-message-list::-webkit-scrollbar-track { background:transparent; }.dm-message-list::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:8px; background:#373340; background-clip:padding-box; }
.account-view { scrollbar-width:thin; scrollbar-color:#2c2934 transparent; }.account-view::-webkit-scrollbar { width:7px; }.account-view::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:8px; background:#34303d; background-clip:padding-box; }
.server-rail-item { width:46px; height:46px; }.server-rail-item>.server-rail-mark { border-radius:11px; }.server-rail-art { transform:scale(1.12); transform-origin:center; }
.right-chat-panel .channel-intro { display:none !important; }
@media(max-width:700px){.direct-call-stage{min-height:245px}.call-stage-people{grid-template-columns:1fr 60px 1fr}.call-person-avatar{width:74px;height:74px}.call-link span{display:none}}

/* v27 — conversation notifications, open call surface and member moving */
.notification-list { display:grid; gap:8px; padding:10px; }
.notification-item { position:relative; padding:11px 12px; border:1px solid rgba(255,255,255,.055); border-radius:10px; background:#17161b; box-shadow:0 5px 18px rgba(0,0,0,.14); }
.notification-item:hover { border-color:rgba(142,118,255,.22); background:#1b1921; }
.notification-item.unread { border-color:rgba(142,118,255,.2); background:linear-gradient(100deg,rgba(126,96,244,.12),rgba(255,255,255,.018)); }
.notification-item.unread::before { content:''; width:3px; position:absolute; inset:10px auto 10px 0; border-radius:0 4px 4px 0; background:#8e76ff; }
.notification-item + .notification-item { margin-top:0; }

.account-page-shell .social-hub { grid-template-columns:300px minmax(0,1fr); gap:14px; border:0; background:transparent; box-shadow:none; }
.account-page-shell .social-hub > aside { border:1px solid #292633; border-radius:13px; background:#131217; box-shadow:0 18px 45px rgba(0,0,0,.18); }
.account-page-shell .dm-panel { padding:0; border:1px solid #292633; border-radius:13px; background:#111014; box-shadow:0 22px 55px rgba(0,0,0,.22); overflow:hidden; }
#dm-conversation { height:610px; border:0; border-radius:0; background:linear-gradient(180deg,#121116,#0f0f12); }
.dm-head { min-height:70px; padding:11px 16px; background:rgba(255,255,255,.012); }
.dm-message-list { gap:11px; padding:20px 18px; }
.dm-message { padding:10px 13px; border-color:rgba(255,255,255,.07); border-radius:6px 14px 14px; background:#1a191e; box-shadow:0 8px 22px rgba(0,0,0,.12); }
.dm-message.mine { border-color:rgba(142,118,255,.24); border-radius:14px 6px 14px 14px; background:linear-gradient(135deg,rgba(113,82,229,.28),rgba(75,55,146,.22)); }
.dm-form { margin:0 12px 12px; padding:8px; border:1px solid #292731; border-radius:11px; background:#0c0c0f; }
.dm-form input { border:0; background:transparent; }

.direct-call-stage { min-height:280px; margin:0 18px; border:0; border-bottom:1px solid rgba(255,255,255,.055); border-radius:0; background:transparent; overflow:visible; }
.call-person-avatar { box-shadow:0 15px 40px rgba(0,0,0,.32),0 0 0 1px rgba(142,118,255,.22); }
.channel-member-row.can-move { cursor:grab; }
.channel-member-row.dragging-member { opacity:.38; cursor:grabbing; }
.channel-row.member-drag-over { border-color:rgba(92,221,164,.5)!important; background:rgba(62,188,132,.1)!important; box-shadow:inset 3px 0 0 #55d9a1!important; }

.server-rail-item { width:42px; height:42px; }
.server-rail-item > .server-rail-mark { padding:2px; border-radius:11px; background:#111015; box-sizing:border-box; }
.server-rail-art { width:100%; height:100%; border-radius:8px; object-fit:cover; transform:none; }

@media(max-width:800px){.account-page-shell .social-hub{grid-template-columns:1fr;gap:10px}.account-page-shell .social-hub>aside{border:1px solid #292633}.account-page-shell .dm-panel{min-height:520px}#dm-conversation{height:560px}}

/* v28 — news center, premium direct messages and viewport-safe tooltips */
.app-shell.news-mode { grid-template-columns:minmax(0,1fr); }
.app-shell.news-mode > .server-rail,.app-shell.news-mode > .server-sidebar { display:none; }
.news-view { flex:1 1 0; min-height:0; overflow-y:auto; padding:34px clamp(20px,4vw,58px) 52px; background:radial-gradient(circle at 77% 4%,rgba(105,76,225,.14),transparent 30%),radial-gradient(circle at 8% 90%,rgba(37,131,108,.07),transparent 30%),#0e0e10; scrollbar-width:thin; scrollbar-color:#34303d transparent; }
.news-page-shell { width:min(1120px,100%); margin:auto; }
.news-hero { min-height:245px; display:flex; align-items:center; justify-content:space-between; gap:35px; position:relative; overflow:hidden; padding:38px 44px; border:1px solid #2b2835; border-radius:18px; background:linear-gradient(118deg,#17141f 0%,#111115 50%,#17132b 100%); box-shadow:0 28px 75px rgba(0,0,0,.3); }
.news-hero::after { content:'DISMOX'; position:absolute; right:105px; bottom:-22px; color:rgba(255,255,255,.025); font-size:92px; font-weight:950; letter-spacing:-.09em; transform:rotate(-5deg); }
.news-hero h2 { margin:10px 0 12px; font-size:clamp(34px,4vw,52px); line-height:.94; letter-spacing:-.055em; }.news-hero h2 em { color:#9c87ff; font-style:normal; }.news-hero p { max-width:590px; margin:0; color:#8b8694; font-size:10px; line-height:1.7; }
.news-hero-mark { width:126px; height:126px; z-index:1; flex:0 0 auto; display:grid; place-items:center; align-content:center; gap:4px; border:1px solid rgba(142,118,255,.35); border-radius:34px; background:radial-gradient(circle at 30% 20%,rgba(187,170,255,.25),transparent 35%),#211a3b; box-shadow:0 20px 50px rgba(70,48,157,.32); }.news-hero-mark span { color:#fff; font-size:40px; font-weight:950; line-height:1; }.news-hero-mark small { color:#aea0f7; font-size:7px; font-weight:900; letter-spacing:.13em; }
.news-filter-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:28px 4px 16px; }.news-filter-row>div:first-child { display:grid; gap:4px; }.news-filter-row strong { font-size:15px; }.news-filter-row small { color:#77727f; font-size:8px; }.news-filter-chips { display:flex; gap:6px; }.news-filter-chips button { padding:7px 10px; border:1px solid #2c2934; border-radius:7px; color:#898491; background:#151519; font-size:8px; }.news-filter-chips button.active { border-color:rgba(142,118,255,.4); color:#e7e1ff; background:rgba(120,90,237,.13); }
.news-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:14px; }.news-featured,.news-item { border:1px solid #292631; background:#131317; }.news-featured { overflow:hidden; border-radius:15px; }.news-cover { height:225px; position:relative; overflow:hidden; background:radial-gradient(circle at 20% 30%,rgba(151,120,255,.5),transparent 25%),linear-gradient(125deg,#22184d,#111119 58%,#15334b); }.news-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(7,7,10,.72)); }.news-cover-symbol { position:absolute; right:34px; bottom:-34px; color:rgba(255,255,255,.08); font-size:190px; font-weight:950; line-height:1; transform:rotate(-8deg); }.news-label { position:absolute; z-index:2; top:17px; left:17px; padding:6px 8px; border:1px solid rgba(255,255,255,.16); border-radius:6px; color:#fff; background:rgba(13,12,19,.52); backdrop-filter:blur(9px); font-size:7px; font-weight:900; letter-spacing:.12em; }.news-card-body { padding:22px; }.news-meta { display:flex; align-items:center; gap:9px; color:#6e6977; font-size:7px; }.news-meta span { color:#9d88ff; font-weight:900; letter-spacing:.1em; }.news-card-body h3,.news-item h3 { margin:10px 0 7px; color:#eeeaf3; font-size:19px; line-height:1.15; letter-spacing:-.03em; }.news-card-body p,.news-item p { margin:0; color:#8b8693; font-size:9px; line-height:1.65; }.news-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:17px; }.news-tags span { padding:5px 7px; border-radius:5px; color:#a99bec; background:rgba(142,118,255,.09); font-size:7px; }
.news-feed { display:grid; gap:10px; }.news-item { min-height:126px; display:grid; grid-template-columns:44px minmax(0,1fr); gap:13px; padding:17px; border-radius:13px; transition:.18s; }.news-item:hover { border-color:rgba(142,118,255,.28); transform:translateY(-2px); }.news-item-icon { width:43px; height:43px; display:grid; place-items:center; border-radius:12px; color:#c5b9ff; background:rgba(121,88,238,.15); font-size:15px; }.news-item-icon.green { color:#70e1ae; background:rgba(51,185,128,.12); }.news-item-icon.red { color:#ff8b98; background:rgba(221,70,91,.12); }.news-item h3 { margin:8px 0 5px; font-size:13px; }
.news-filtered-out { display:none!important; }
.news-layout:has(.news-featured.news-filtered-out) .news-feed { grid-column:1/-1; grid-template-columns:repeat(3,minmax(0,1fr)); }
.news-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:14px; padding:15px 18px; border:1px solid #292631; border-radius:12px; background:#131317; }.news-footer>div { display:grid; grid-template-columns:auto auto; align-items:center; gap:3px 8px; }.news-footer small { grid-column:2; color:#77727f; font-size:8px; }.news-footer .btn svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.7; }

.discover-hero-actions .btn-news { display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(142,118,255,.32); color:#d9d1ff; background:rgba(113,83,223,.1); }.discover-hero-actions .btn-news:hover { border-color:#806ae7; color:#fff; background:rgba(113,83,223,.19); }.discover-hero-actions .btn-news svg,.discover-text-action svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; }.discover-text-action { display:inline-flex; align-items:center; gap:6px; }

.server-rail-item { width:44px; height:44px; padding:0; border-radius:12px; background:transparent; }
.server-rail-item > .server-rail-mark { width:100%; height:100%; padding:0; overflow:hidden; border-radius:11px; background:#111015; }
.server-rail-item > .server-rail-mark .server-rail-art { width:100%; height:100%; padding:2px; border-radius:10px; object-fit:contain; background:#0d0d10; box-sizing:border-box; transform:none; }

.account-view { padding-top:22px; }.account-page-shell { width:min(1360px,100%); }
.account-page-shell .social-hub { min-height:690px; grid-template-columns:310px minmax(0,1fr); gap:12px; }
.dm-sidebar { padding:0!important; overflow:hidden; }.dm-sidebar-head { min-height:76px; display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.055); background:linear-gradient(125deg,rgba(115,83,226,.11),transparent 62%); }.dm-sidebar-head>div { display:grid; gap:4px; }.dm-sidebar-head span { color:#9784f2; font-size:7px; font-weight:900; letter-spacing:.14em; }.dm-sidebar-head strong { font-size:15px; }.dm-sidebar-head>b { min-width:25px; height:25px; display:grid; place-items:center; border:1px solid rgba(142,118,255,.26); border-radius:8px; color:#c8bdff; background:rgba(142,118,255,.09); font-size:9px; }
.friend-search { height:36px; display:flex; align-items:center; gap:8px; margin:13px 13px 8px; padding:0 11px; border:0px solid #292631; border-radius:9px; background:#0d0d10; }.friend-search svg { width:13px; height:13px; fill:none; stroke:#77727f; stroke-width:1.7; }.friend-search input { width:100%; border:0; outline:0; color:#d8d4de; background:transparent; font-size:9px; }.dm-sidebar .profile-section-title { margin:17px 14px 8px; }.dm-sidebar .friend-list { gap:5px; padding:0 10px; }.friend-row { min-height:55px; padding:8px 9px; border-radius:10px; background:transparent; }.friend-row:hover { background:rgba(255,255,255,.035); }.friend-row:has([data-open-dm]) { cursor:pointer; }.friend-avatar { width:38px; height:38px; border-radius:12px; }.friend-row>span button { min-height:27px; border-color:transparent; color:#a99beb; background:rgba(142,118,255,.08); }
.account-page-shell .dm-panel { border-radius:14px; background:#101013; }.dm-empty { background:radial-gradient(circle at 50% 43%,rgba(118,87,231,.1),transparent 23%); }.dm-empty-orbit { width:110px; height:75px; position:relative; display:grid; place-items:center; }.dm-empty-orbit span { width:52px; height:52px; z-index:2; border-radius:17px; background:linear-gradient(145deg,#5e48be,#282044); box-shadow:0 17px 38px rgba(63,44,146,.35); }.dm-empty-orbit i { position:absolute; width:74px; height:74px; border:1px solid rgba(142,118,255,.13); border-radius:24px; transform:rotate(18deg); }.dm-empty-orbit i:last-child { transform:rotate(-18deg); }.dm-empty>strong { margin-top:7px; color:#ece8f2; font-size:16px; }.dm-empty>p { max-width:360px; color:#827d8a; }
#dm-conversation { height:690px; background:radial-gradient(circle at 92% 4%,rgba(111,83,239,.06),transparent 25%),#101013; }.dm-head { min-height:82px; padding:13px 18px; }.dm-person-copy { display:grid!important; gap:2px!important; }.dm-person-copy strong { font-size:14px; }.dm-online-line { display:flex; align-items:center; gap:5px; color:#5bd69e; font-size:6px; font-weight:900; letter-spacing:.12em; }.dm-online-line i { width:5px; height:5px; border-radius:50%; background:#55dda2; box-shadow:0 0 0 3px rgba(85,221,162,.08); }.dm-security-line { display:flex; align-items:center; justify-content:center; gap:6px; padding:6px 12px; border-bottom:1px solid rgba(255,255,255,.04); color:#6f6a77; background:rgba(255,255,255,.008); font-size:7px; }.dm-security-line span { color:#8f7aef; }.dm-message-list { gap:12px; padding:22px 22px 26px; background-image:none; }.dm-message { min-width:64px; max-width:62%; padding:11px 13px; border:0; border-radius:5px 15px 15px; background:#1b1a1f; box-shadow:none; }.dm-message.mine { border:0; border-radius:15px 5px 15px 15px; background:linear-gradient(135deg,#312654,#241c40); }.dm-message p { color:#ddd8e4; font-size:10px; }.dm-message small { margin-top:6px; opacity:.8; }.dm-form { margin:0 14px 14px; padding:6px 7px; border-color:#302d38; border-radius:12px; background:#0b0b0e; }.dm-attach { width:34px; height:34px; position:relative; border:0; border-radius:9px; color:#938ca0; background:#18171c; font-size:17px; }.dm-attach:hover { color:#fff; background:#25212f; }

.dm-head-actions button[data-tooltip]::after { top:calc(100% + 8px); right:0; bottom:auto; transform:translateY(-3px); }.dm-head-actions button[data-tooltip]:hover::after { opacity:1; transform:translateY(0); }
.dm-attach[data-tooltip]::after { content:attr(data-tooltip); width:max-content; position:absolute; z-index:220; left:0; bottom:calc(100% + 8px); padding:6px 8px; border:1px solid #302d38; border-radius:6px; color:#eeeaf5; background:#17171b; font-size:8px; opacity:0; pointer-events:none; transform:translateY(3px); transition:.14s; }.dm-attach[data-tooltip]:hover::after { opacity:1; transform:translateY(0); }
.back-to-discover[data-tooltip]::after { top:calc(100% + 7px); bottom:auto; left:0; transform:translateY(-3px); }.back-to-discover[data-tooltip]:hover::after { transform:translateY(0); }

@media(max-width:850px){.news-layout{grid-template-columns:1fr}.news-layout:has(.news-featured.news-filtered-out) .news-feed{grid-template-columns:1fr}.news-hero{padding:28px}.news-hero-mark{width:95px;height:95px;border-radius:26px}.account-page-shell .social-hub{grid-template-columns:1fr}.dm-sidebar{max-height:260px!important}.news-filter-row{align-items:flex-start;flex-direction:column}}

/* v29 — stable modal layer, profile wall and editorial news */
.modal-backdrop { z-index:500; padding:clamp(14px,3vh,28px); isolation:isolate; }
.modal-backdrop>.modal { position:relative; z-index:1; margin:auto; }
#settings-modal .settings-modal { width:min(620px,calc(100vw - 32px)); height:min(820px,calc(100vh - 42px)); max-height:calc(100vh - 42px); }
#permissions-modal .permissions-modal { width:min(1180px,calc(100vw - 32px)); height:min(820px,calc(100vh - 42px)); max-height:calc(100vh - 42px); display:flex; flex-direction:column; }
#permissions-modal .permission-layout { flex:1 1 auto; height:auto; min-height:0; }
#permissions-modal .permission-editor,#permissions-modal .permission-groups { min-height:0; }
body:has(.modal-backdrop:not(.hidden)) .workspace-header { z-index:1; }

.profile-showcase-banner::after { display:none!important; content:none!important; }
.notification-list { scrollbar-width:thin; scrollbar-color:#4b4658 transparent; scrollbar-gutter:stable; }
.notification-list::-webkit-scrollbar { width:8px; }
.notification-list::-webkit-scrollbar-track { margin:8px 0; background:transparent; }
.notification-list::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:10px; background:#4b4658; background-clip:padding-box; }
.notification-list::-webkit-scrollbar-thumb:hover { background:#655d78; background-clip:padding-box; }
.notification-dropdown { overflow:hidden; }.notification-item { margin-right:1px; }

.profile-showcase-content { align-items:start; }
.profile-main-column { min-width:0; }
.profile-wall { overflow:hidden; border:1px solid #2a2732; border-radius:13px; background:#141418; }
.profile-wall-head { min-height:67px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 17px; border-bottom:1px solid rgba(255,255,255,.055); background:linear-gradient(110deg,rgba(117,84,231,.09),transparent 55%); }
.profile-wall-head>div { display:grid; gap:4px; }.profile-wall-head span { color:#9783f1; font-size:7px; font-weight:900; letter-spacing:.14em; }.profile-wall-head strong { color:#ece8f2; font-size:15px; }.profile-wall-head small { color:#706c78; font-size:8px; }
.profile-post-composer { display:grid; grid-template-columns:42px minmax(0,1fr); gap:11px; padding:15px 16px; border-bottom:1px solid rgba(255,255,255,.055); background:#111115; }.profile-post-composer.hidden { display:none; }.profile-post-avatar { width:42px; height:42px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(142,118,255,.28); border-radius:13px; color:#fff; background:linear-gradient(145deg,#634dbe,#282044); font-size:11px; font-weight:900; }.profile-post-avatar img { width:100%; height:100%; object-fit:cover; }.profile-post-composer>div:last-child { min-width:0; }.profile-post-composer textarea { width:100%; min-height:70px; resize:vertical; padding:10px 11px; border:0; outline:0; color:#ddd9e4; background:transparent; font:10px/1.6 Inter,system-ui,sans-serif; }.profile-post-composer footer { display:flex; align-items:center; justify-content:space-between; padding-top:8px; border-top:1px solid rgba(255,255,255,.045); }.profile-post-composer footer span { color:#6f6b77; font-size:7px; }.profile-post-composer footer b { color:#9e90e3; }
.profile-post-list { display:grid; }.profile-post { display:grid; grid-template-columns:42px minmax(0,1fr); gap:11px; padding:17px 16px; border-bottom:1px solid rgba(255,255,255,.05); transition:.15s; }.profile-post:last-child { border-bottom:0; }.profile-post:hover { background:rgba(255,255,255,.014); }.profile-post-content { min-width:0; }.profile-post-content>header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.profile-post-content>header>div { display:flex; align-items:center; gap:6px; min-width:0; }.profile-post-content header strong { color:#ece8f1; font-size:10px; }.profile-post-content header span,.profile-post-content time { color:#706c79; font-size:7px; }.profile-post-content p { margin:9px 0 12px; color:#cac6d1; font-size:10px; line-height:1.65; white-space:pre-wrap; word-break:break-word; }.profile-post-content footer { display:flex; align-items:center; gap:13px; }.profile-like-button,.profile-post-delete { display:flex; align-items:center; gap:5px; padding:4px 7px; border:0; border-radius:6px; color:#77727f; background:transparent; font-size:8px; }.profile-like-button span { font-size:13px; }.profile-like-button:hover,.profile-like-button.liked { color:#ff6e89; background:rgba(255,77,111,.08); }.profile-post-delete { margin-left:auto; }.profile-post-delete:hover { color:#ff7b89; background:rgba(255,77,99,.08); }.profile-wall-empty { min-height:170px; display:grid; place-items:center; align-content:center; gap:7px; padding:25px; color:#716d79; text-align:center; }.profile-wall-empty>span { width:39px; height:39px; display:grid; place-items:center; border-radius:12px; color:#9d8af7; background:rgba(142,118,255,.09); }.profile-wall-empty strong { color:#c9c4d0; font-size:10px; }.profile-wall-empty p { margin:0; font-size:8px; }

.news-view { background:linear-gradient(180deg,#0d0d10,#101014 50%,#0d0d0f); }
.news-page-shell { width:min(1180px,100%); }
.news-hero { min-height:300px; align-items:flex-end; padding:46px 50px; border-color:#302a3e; border-radius:20px; background:radial-gradient(circle at 82% 20%,rgba(76,124,205,.22),transparent 25%),radial-gradient(circle at 15% 0,rgba(135,91,255,.28),transparent 31%),linear-gradient(120deg,#17131f,#101015 58%,#111c28); box-shadow:0 35px 100px rgba(0,0,0,.38); }
.news-hero::before { content:'RELEASE NOTES'; position:absolute; top:34px; right:43px; color:rgba(255,255,255,.05); font-size:11px; font-weight:900; letter-spacing:.35em; }.news-hero::after { right:35px; bottom:-35px; color:rgba(255,255,255,.035); font-size:126px; }.news-hero h2 { max-width:680px; font-size:clamp(42px,5.2vw,67px); }.news-hero p { max-width:610px; font-size:11px; }.news-hero-mark { width:auto; height:auto; display:flex; align-items:center; gap:9px; margin-bottom:5px; padding:10px 13px; border-radius:10px; background:rgba(13,13,19,.6); box-shadow:none; backdrop-filter:blur(12px); }.news-hero-mark span { font-size:17px; }.news-hero-mark small { font-size:6px; }
.news-filter-row { padding:34px 2px 17px; }.news-filter-row strong { font-size:18px; }.news-layout { grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr); gap:16px; }.news-featured { border-radius:17px; background:#141419; }.news-cover { height:280px; background:radial-gradient(circle at 22% 22%,rgba(158,118,255,.56),transparent 22%),radial-gradient(circle at 76% 66%,rgba(42,139,172,.24),transparent 27%),linear-gradient(130deg,#261653,#111119 60%,#102634); }.news-cover::before { content:''; position:absolute; width:260px; height:260px; right:70px; top:35px; border:1px solid rgba(255,255,255,.08); border-radius:50%; box-shadow:0 0 0 34px rgba(255,255,255,.025),0 0 0 68px rgba(255,255,255,.012); }.news-card-body { padding:27px; }.news-card-body h3 { max-width:650px; font-size:24px; }.news-card-body p { max-width:700px; font-size:10px; }.news-feed { gap:12px; }.news-item { min-height:145px; align-items:start; padding:20px; border-radius:15px; background:linear-gradient(145deg,#16161b,#121216); }.news-item h3 { font-size:15px; }.news-item p { font-size:9px; }

@media(max-width:760px){.modal-backdrop{padding:8px}#settings-modal .settings-modal,#permissions-modal .permissions-modal{width:calc(100vw - 16px);height:calc(100vh - 16px);max-height:calc(100vh - 16px)}.profile-post{grid-template-columns:36px minmax(0,1fr)}.profile-post-avatar{width:36px;height:36px}.news-hero{min-height:260px;align-items:flex-start;flex-direction:column;padding:30px 24px}.news-hero-mark{margin-top:auto}.news-layout{grid-template-columns:1fr}.news-cover{height:210px}}
.admin-view{min-height:100%;overflow:auto;background:radial-gradient(circle at 75% 0,rgba(113,78,255,.12),transparent 38%),#0b0b0e}.admin-shell{width:min(1440px,calc(100% - 64px));margin:auto;padding:26px 0 70px}.admin-command-head{display:flex;align-items:flex-end;justify-content:space-between;padding:42px;border:1px solid #292535;border-radius:24px;background:linear-gradient(135deg,#17131f,#0f1015);box-shadow:0 30px 80px #0007}.admin-command-head h2{font-size:clamp(34px,5vw,62px);margin:8px 0}.admin-command-head p{color:#92909d;font-size:15px}.admin-role-chip{padding:12px 18px;border:1px solid #7659d8;border-radius:99px;color:#bcaaff;background:#7454ff18;font-weight:800;letter-spacing:.12em}.admin-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}.admin-stat-grid article{padding:22px;border:1px solid #282630;border-radius:16px;background:#111116}.admin-stat-grid small{display:block;color:#777386;font-weight:800;letter-spacing:.13em}.admin-stat-grid b{display:block;margin-top:8px;font-size:26px}.admin-workspace{display:grid;grid-template-columns:220px 1fr;min-height:600px;border:1px solid #292733;border-radius:22px;overflow:hidden;background:#101014}.admin-nav{padding:18px;border-right:1px solid #25232d;background:#0d0d11}.admin-nav button{display:block;width:100%;padding:13px 14px;margin:3px 0;border:0;border-radius:10px;background:transparent;color:#8e8b99;text-align:left;font-weight:700}.admin-nav button:hover,.admin-nav button.active{background:#7454ff1f;color:#fff}.admin-panel-content{padding:28px;overflow:auto}.admin-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.admin-section-head h3{font-size:26px;margin:0 0 5px}.admin-section-head p{margin:0;color:#817e8b}.admin-list,.admin-table{display:grid;gap:9px}.admin-list article,.admin-table>div{display:grid;grid-template-columns:110px 1fr auto auto;align-items:center;gap:14px;padding:15px;border:1px solid #292733;border-radius:14px;background:#15151b}.admin-list small,.admin-table span{display:block;color:#777584;margin-top:5px}.admin-list button,.admin-table button{border:1px solid #34313f;border-radius:9px;background:#1c1b23;color:#ddd;padding:9px 12px}.admin-list button.danger{color:#ff7185}.admin-type{font-size:9px;font-weight:900;letter-spacing:.1em;color:#a991ff}.admin-table select,.admin-products input,.admin-editor input,.admin-editor select,.admin-editor textarea{border:1px solid #302d39;border-radius:10px;background:#0d0d11;color:#fff;padding:11px}.admin-products{display:grid;gap:12px}.admin-products form{display:grid;grid-template-columns:1fr 130px 2fr auto auto;gap:10px;padding:16px;border:1px solid #292733;border-radius:14px}.admin-editor{padding:20px;margin-bottom:20px;border:1px solid #654bd0;border-radius:16px;background:#15131d}.admin-form-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px}.admin-form-grid label{display:grid;gap:7px;color:#aaa6b5;font-weight:700}.admin-form-grid .wide{grid-column:1/-1}.admin-form-grid textarea{min-height:85px;resize:vertical}.admin-form-grid .check{display:flex;align-items:center}.news-hero-pro{position:relative;overflow:hidden}.news-hero-pills{display:flex;gap:8px;margin-top:20px}.news-hero-pills span{padding:8px 12px;border:1px solid #342d48;border-radius:99px;color:#aaa0c7;background:#ffffff05}.news-hero-orbit{width:180px;height:180px;border:1px solid #5e48af;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 60px #7454ff26,0 0 80px #7454ff18}.news-hero-orbit b{font-size:72px;color:#a990ff}.news-hero-orbit span{position:absolute;margin-top:220px;font-size:11px;letter-spacing:.25em;color:#736b87}.news-author{display:flex;align-items:center;gap:10px;margin-top:22px}.news-author>.avatar,.news-author>.channel-avatar{width:34px;height:34px}.news-author small,.news-byline{display:block;color:#777386}.news-layout{gap:16px}.news-item{border-radius:16px!important;margin-bottom:10px!important}@media(max-width:900px){.admin-shell{width:calc(100% - 24px)}.admin-command-head{padding:25px}.admin-workspace{grid-template-columns:1fr}.admin-nav{display:flex;overflow:auto;border-right:0;border-bottom:1px solid #25232d}.admin-nav button{white-space:nowrap}.admin-stat-grid{grid-template-columns:repeat(2,1fr)}.admin-products form{grid-template-columns:1fr}.admin-form-grid{grid-template-columns:1fr}.admin-form-grid .wide{grid-column:auto}}
.forum-head{display:flex;align-items:flex-end;justify-content:space-between;padding:50px 54px;border:1px solid #24232b;border-radius:22px 22px 0 0;background:radial-gradient(circle at 82% 20%,#765cff24,transparent 35%),linear-gradient(135deg,#15141b,#0d0e12)}.forum-head h2{font-size:clamp(38px,5vw,68px);line-height:.98;margin:12px 0 18px;letter-spacing:-.05em}.forum-head h2 em{font-style:normal;color:#9880ff}.forum-head p{font-size:16px;color:#92909e}.forum-toolbar{display:flex;align-items:center;gap:6px;padding:14px 18px;border:1px solid #24232b;border-top:0;background:#111116;position:sticky;top:0;z-index:3}.forum-toolbar>button{border:0;border-radius:9px;padding:10px 14px;background:transparent;color:#8d8998;font-weight:750}.forum-toolbar>button.active{background:#fff;color:#111}.forum-toolbar label{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:300px;border:1px solid #2c2a34;border-radius:10px;padding:0 12px;background:#0b0b0e}.forum-toolbar input{width:100%;padding:11px 0;border:0;outline:0;background:transparent;color:#fff}.forum-surface{display:grid;grid-template-columns:330px 1fr;min-height:620px;border:1px solid #24232b;border-top:0;border-radius:0 0 22px 22px;overflow:hidden;background:#0d0d10}.forum-categories{padding:22px;border-right:1px solid #24232b;background:#101015}.forum-side-title{font-size:11px;letter-spacing:.16em;color:#6f6b7d;font-weight:900;margin:0 8px 12px}.forum-categories>button{width:100%;display:grid;grid-template-columns:42px 1fr auto;gap:11px;align-items:center;text-align:left;border:0;border-radius:12px;padding:12px 10px;background:transparent;color:#fff}.forum-categories>button:hover{background:#ffffff07}.forum-categories>button>span{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--accent) 16%,transparent);font-size:18px}.forum-categories b{display:block;font-size:14px}.forum-categories small{display:block;margin-top:4px;color:#73707e;line-height:1.35}.forum-categories em{font-style:normal;color:#777383}.forum-rules{margin-top:24px;padding:17px;border:1px solid #292632;border-radius:14px;background:#15131c}.forum-rules p{color:#777383;line-height:1.6;font-size:13px}.forum-feed{padding:26px 30px}.forum-feed-head{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid #232229}.forum-feed-head span{font-size:11px;color:#8d78ec;font-weight:900;letter-spacing:.15em}.forum-feed-head h3{margin:6px 0 0;font-size:24px}.forum-feed-head>b{color:#777383}.forum-topic-row{display:grid;grid-template-columns:3px 44px 1fr auto;gap:14px;align-items:center;padding:18px 8px;border-bottom:1px solid #1f1e24;cursor:pointer;transition:.18s}.forum-topic-row:hover{padding-left:14px;background:#ffffff03}.forum-topic-row>i{width:3px;height:32px;border-radius:9px}.forum-user-avatar,.forum-topic-row button,.forum-post button,.forum-comments button{border:0;background:transparent;color:inherit;padding:0}.forum-user-avatar .avatar,.forum-topic-row .avatar{width:42px;height:42px}.forum-topic-title{font-size:15px;font-weight:800;margin-bottom:7px}.forum-topic-row small,.forum-topic-row small button{color:#777382}.forum-topic-row small button:hover,.forum-detail button:hover{color:#a991ff}.forum-topic-stats{display:flex;gap:12px;color:#777382;font-size:12px}.forum-detail{grid-column:1/-1;width:min(980px,100%);margin:0 auto;padding:28px}.forum-back{border:0;background:transparent;color:#9a8ddb;font-weight:800;margin-bottom:18px}.forum-post,.forum-comments{border:1px solid #292733;border-radius:18px;background:#121217;overflow:hidden}.forum-post>header{display:flex;gap:15px;padding:24px;border-bottom:1px solid #25232c}.forum-post>header .avatar{width:52px;height:52px}.forum-post h2{margin:0 0 8px;font-size:26px}.forum-post header p{margin:0;color:#797684}.forum-post-body{padding:32px 28px;min-height:150px;font-size:16px;line-height:1.8;color:#d3d0da}.forum-post>footer{display:flex;gap:14px;align-items:center;padding:15px 24px;border-top:1px solid #25232c;color:#797684}.forum-post>footer button{padding:9px 13px;border:1px solid #302d39;border-radius:9px}.forum-post>footer button.liked{color:#ff6983;border-color:#6b3340;background:#ff526014}.forum-comments{margin-top:14px;padding:24px}.forum-comments>article{display:flex;gap:12px;padding:18px 0;border-bottom:1px solid #222128}.forum-comments .avatar{width:38px;height:38px}.forum-comments article>div{flex:1}.forum-comments header{display:flex;justify-content:space-between}.forum-comments p{line-height:1.65;color:#c3c0ca}.forum-comments time{font-size:12px;color:#6d6977}.forum-comments form,.forum-compose form{display:grid;gap:12px;margin-top:22px}.forum-comments textarea,.forum-compose input,.forum-compose select,.forum-compose textarea{width:100%;box-sizing:border-box;border:1px solid #302d39;border-radius:11px;background:#0b0b0e;color:#fff;padding:14px;outline:none}.forum-comments textarea{min-height:90px}.forum-compose{grid-column:1/-1;width:min(820px,100%);margin:auto;padding:36px}.forum-compose h2{font-size:34px}.forum-compose label{display:grid;gap:8px;color:#aaa6b4;font-weight:750}.forum-compose textarea{min-height:260px;resize:vertical}.admin-user-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.admin-user-card{padding:18px;border:1px solid #292733;border-radius:16px;background:#141419}.admin-user-card>header{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid #25232b}.admin-user-card>header .avatar{width:45px;height:45px}.admin-user-card>header div{flex:1}.admin-user-card small{display:block;color:#777382;margin-top:4px}.admin-user-card header>button:last-child{border:0;background:transparent;color:#a993ff}.admin-permission-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.admin-permission-grid label{padding:10px;border:1px solid #292733;border-radius:9px;background:#0e0e12;color:#b5b1bd}.admin-master-note{margin-top:16px;padding:14px;border-radius:10px;background:#765cff18;color:#b7a8ff}.admin-server-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.admin-server-grid>article{overflow:hidden;border:1px solid #292733;border-radius:17px;background:#141419}.admin-server-cover{height:105px;background:linear-gradient(135deg,#29213e,#101117);background-size:cover;background-position:center}.admin-server-grid header{display:flex;align-items:center;gap:11px;padding:0 15px;margin-top:-21px}.admin-server-icon{width:50px;height:50px;display:grid;place-items:center;border:4px solid #141419;border-radius:15px;background:#30265a;font-weight:900}.admin-server-icon img{width:100%;height:100%;object-fit:cover;border-radius:11px}.admin-server-grid h4{margin:24px 0 3px}.admin-server-grid header button{border:0;background:transparent;color:#888391;padding:0}.admin-server-grid header>span{margin:24px 0 0 auto;font-size:11px}.admin-server-grid header>span.online{color:#38dfa5}.admin-server-grid header>span.offline{color:#ff7287}.admin-server-metrics{display:grid;grid-template-columns:repeat(3,1fr);margin:17px 15px;border:1px solid #282630;border-radius:11px}.admin-server-metrics span{padding:11px;text-align:center;color:#777382;font-size:11px}.admin-server-metrics b{display:block;color:#fff;font-size:15px}.admin-server-grid footer{display:flex;gap:8px;padding:0 15px 16px}.admin-server-grid footer button{flex:1;padding:10px;border:1px solid #302d39;border-radius:9px;background:#1a1920;color:#ddd}.admin-server-grid footer .danger{color:#ff7185}.admin-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.admin-product-grid>form{display:grid;grid-template-columns:170px 1fr;gap:18px;padding:18px;border:1px solid #292733;border-radius:17px;background:#141419}.admin-product-preview{}.admin-product-preview span{font-size:55px}.admin-product-preview img{width:100%;height:100%;object-fit:cover}.admin-product-fields{display:grid;grid-template-columns:1fr 110px;gap:10px}.admin-product-fields label{display:grid;gap:6px;color:#8e8999;font-size:12px;font-weight:750}.admin-product-fields .wide{grid-column:1/-1}.admin-product-fields textarea{min-height:75px;resize:vertical}.upload-label{padding:11px;border:1px dashed #494158;border-radius:10px}.store-product-art.has-image{padding:0;overflow:hidden}.store-product-art.has-image img{width:100%;height:100%;object-fit:cover}@media(max-width:1050px){.forum-surface{grid-template-columns:1fr}.forum-categories{border-right:0;border-bottom:1px solid #24232b}.admin-user-grid,.admin-server-grid,.admin-product-grid{grid-template-columns:1fr}.admin-product-grid>form{grid-template-columns:1fr}.forum-head{padding:32px}.forum-toolbar label{min-width:160px}.forum-topic-stats{display:none}}

/* v48 — ortak onay penceresi, araç ipuçları ve konuşma göstergesi. */
.action-confirm{padding:26px;display:grid;grid-template-columns:46px minmax(0,1fr);gap:17px}.action-confirm-icon{width:46px;height:46px;display:grid;place-items:center;border:1px solid #ff677952;border-radius:13px;color:#ff8191;background:#ae2d4121;font-size:20px;font-weight:900}.action-confirm-copy span{color:#9b84ff;font-size:8px;font-weight:900;letter-spacing:.16em}.action-confirm-copy h2{margin:7px 0 8px;color:#f2eff6;font-size:20px;letter-spacing:-.03em}.action-confirm-copy p{margin:0;color:#918c99;font-size:10px;line-height:1.65}.action-confirm-buttons{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;padding-top:8px}.action-confirm-buttons .danger{border-color:#ff54695c;color:#fff;background:#b93349}
[data-tooltip]{position:relative}[data-tooltip]::after{content:attr(data-tooltip);position:absolute;z-index:500;left:50%;bottom:calc(100% + 8px);width:max-content;max-width:190px;padding:7px 9px;border:1px solid #36323e;border-radius:7px;color:#eeeaf4;background:#17171b;box-shadow:0 10px 28px #00000059;font-size:8px;font-weight:700;line-height:1.35;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,4px);transition:opacity .15s,transform .15s,visibility .15s}[data-tooltip]:hover::after,[data-tooltip]:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0)}.channel-actions [data-tooltip]:last-child::after{right:0;left:auto;transform:translateY(4px)}.channel-actions [data-tooltip]:last-child:hover::after,.channel-actions [data-tooltip]:last-child:focus-visible::after{transform:translateY(0)}
.call-voice-waves{height:15px;display:flex;align-items:center;justify-content:center;gap:3px;opacity:.28}.call-voice-waves i{width:3px;height:4px;border-radius:4px;background:#55dda3;transform-origin:center}.call-person.speaking .call-person-avatar{border-color:#55dda3;box-shadow:0 0 0 4px #55dda31c,0 18px 45px #00000059}.call-person.speaking .call-voice-waves{opacity:1}.call-person.speaking .call-voice-waves i{animation:dismoxVoiceWave .64s ease-in-out infinite alternate}.call-person.speaking .call-voice-waves i:nth-child(2){animation-delay:-.42s}.call-person.speaking .call-voice-waves i:nth-child(3){animation-delay:-.18s}.call-person.speaking .call-voice-waves i:nth-child(4){animation-delay:-.52s}@keyframes dismoxVoiceWave{to{height:14px}}

/* v49 — tooltip yönleri, geri düğmeleri ve Dismox son rötuşları. */
@media(min-width:701px){#back-to-discover{display:none!important}}
.dm-mobile-back{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;padding:0;border:1px solid #393346;border-radius:9px;color:#d9d1ff;background:#1b1823;font-size:15px;font-weight:800;box-shadow:inset 0 1px #ffffff0a}.dm-mobile-back:hover{border-color:#6958a5;color:#fff;background:#272034}
.server-rail [data-tooltip]::after{display:none!important}
.workspace-actions .header-action[data-tooltip]::after{top:calc(100% + 8px)!important;bottom:auto!important;transform:translate(-50%,-3px)!important}.workspace-actions .header-action[data-tooltip]:hover::after,.workspace-actions .header-action[data-tooltip]:focus-visible::after{transform:translate(-50%,0)!important}.workspace-actions>*:last-child .header-action[data-tooltip]::after,.workspace-actions>.header-action:last-child[data-tooltip]::after{right:0!important;left:auto!important;transform:translateY(-3px)!important}.workspace-actions>*:last-child .header-action[data-tooltip]:hover::after,.workspace-actions>.header-action:last-child[data-tooltip]:hover::after{transform:translateY(0)!important}
.channel-actions [data-tooltip]::after{top:calc(100% + 7px)!important;right:auto!important;bottom:auto!important;left:50%!important;transform:translate(-50%,-3px)!important}.channel-actions [data-tooltip]:hover::after,.channel-actions [data-tooltip]:focus-visible::after{transform:translate(-50%,0)!important}.channel-actions [data-tooltip]:last-child::after{right:0!important;left:auto!important;transform:translateY(-3px)!important}.channel-actions [data-tooltip]:last-child:hover::after{transform:translateY(0)!important}
.action-confirm{border-color:#393542;background:radial-gradient(circle at 0 0,#41273542,transparent 38%),#141417}.action-confirm-icon{border-radius:14px;box-shadow:inset 0 1px #ffffff0b}.action-confirm-buttons .btn{min-width:96px}
.dm-online-line.offline{color:#77727f}.dm-online-line.offline i{background:#66616d;box-shadow:none}.friend-presence{display:flex!important;align-items:center;gap:5px}.friend-presence i{width:5px;height:5px;border-radius:50%;background:#66616d}.friend-presence.online{color:#54d8a0}.friend-presence.online i{background:#54d8a0;box-shadow:0 0 0 3px #54d8a012}

/* v52 — Journal ölçüleri, yeni özel sohbet ve canlı ses şeridi. */
.news-view,.account-view{padding:26px clamp(18px,4vw,52px) 52px;background:radial-gradient(circle at 78% 0,rgba(105,76,225,.09),transparent 31%),#0d0d10}
.news-page-shell,.journal-page-shell{width:min(1380px,100%);margin:0 auto}
.section-page-head{min-height:112px;box-sizing:border-box}
.section-page-head h2{font-size:27px}
.journal-page-shell .social-hub,.journal-page-shell .invoice-surface{margin-top:18px}
#social-view .social-hub{height:min(700px,calc(100dvh - 245px));min-height:540px;grid-template-columns:340px minmax(0,1fr);gap:0;overflow:hidden;border:1px solid #24232b;border-radius:16px;background:#0e0f13;box-shadow:0 28px 75px #0007}
#social-view .dm-sidebar{height:100%;display:flex;flex-direction:column;border:0;border-right:1px solid #24242b;border-radius:0;background:linear-gradient(180deg,#111219,#0d0e12);box-shadow:none}
#social-view .dm-sidebar-head{min-height:82px;padding:17px 20px;background:linear-gradient(130deg,rgba(126,92,235,.10),transparent 64%)}
#social-view .friend-search{flex:0 0 40px;margin:14px 15px 9px}
#social-view .dm-sidebar .profile-section-title{flex:0 0 auto;margin:16px 16px 8px}
#social-view .friend-list{flex:0 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;padding:0 11px 5px;scrollbar-width:thin;scrollbar-color:#363143 transparent}
#social-view #friend-list{flex:1 1 auto}
#social-view .friend-row{min-height:62px;position:relative;padding:8px 10px;border-radius:11px}
#social-view .friend-row:has([data-open-dm]):hover{background:#1a1923}
#social-view .friend-row:has([data-open-dm])::before{content:'';width:2px;height:0;position:absolute;left:0;border-radius:2px;background:#8e76ff;transition:height .18s}
#social-view .friend-row:has([data-open-dm]):hover::before{height:30px}
#social-view .dm-panel{height:100%;min-height:0;border:0;border-radius:0;background:radial-gradient(circle at 78% 18%,rgba(92,69,170,.12),transparent 30%),#101116;box-shadow:none}
#social-view #dm-empty,#social-view #dm-conversation{height:100%}
#social-view #dm-conversation{border:0;background:transparent}
#social-view .dm-head{min-height:76px;padding:12px 22px;background:#111219e8;backdrop-filter:blur(12px)}
#social-view .dm-security-line{padding:7px 14px;background:#0d0e12b8}
@media(min-width:701px){#social-view .dm-mobile-back{display:none!important}}
.dm-message-list{gap:13px;padding:22px 36px 26px!important;background:linear-gradient(180deg,rgba(126,95,226,.045),transparent 34%)!important}
.dm-message-row{width:100%;display:flex;align-items:flex-end;gap:9px}
.dm-message-row.mine{flex-direction:row-reverse}
.dm-message-avatar{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;overflow:hidden;border:1px solid #403657;border-radius:9px;color:#cfc4ff;background:#211b31;font-size:8px;font-weight:900}
.dm-message-avatar img{width:100%;height:100%;object-fit:cover}
.dm-message-row .dm-message{min-width:82px;max-width:min(66%,620px);align-self:auto;margin:0;padding:11px 14px;border:1px solid #292d37;border-radius:14px 14px 14px 5px;background:#1a1d24}
.dm-message-row .dm-message.mine{border-color:#51416f;border-radius:14px 14px 5px 14px;background:linear-gradient(135deg,#49366d,#32264d)}
.dm-message-row .dm-message p{font-size:11px;line-height:1.52}
.dm-message-row .dm-message small{font-size:7px}
#social-view .dm-form{min-height:52px;margin:0 20px 16px;padding:6px 7px;border-color:#31343d;background:#0c0d11}
#social-view .dm-form input{font-size:11px}
.direct-call-stage{min-height:112px!important;display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0!important;padding:13px 22px;border:0!important;border-bottom:1px solid #292936!important;border-radius:0!important;background:linear-gradient(90deg,rgba(91,67,180,.22),rgba(18,18,24,.96) 52%,rgba(42,138,104,.12))!important}
.direct-call-stage.hidden{display:none!important}
.call-stage-people{width:auto;flex:1;display:flex;align-items:center;justify-content:flex-start;gap:24px}
.call-person{display:grid;grid-template-columns:48px auto;grid-template-rows:auto auto auto;align-items:center;justify-items:start;column-gap:10px;row-gap:2px}
.call-person-avatar{grid-row:1/4;width:48px;height:48px;border-width:3px;font-size:13px}
.call-person .call-voice-waves{grid-column:2;height:11px;justify-content:flex-start}
.call-person .call-voice-waves i{width:2px}
.call-person strong{grid-column:2;font-size:10px}.call-person small{grid-column:2;font-size:7px}
.call-link{min-width:88px}.call-link i{width:24px}.call-link span{font-size:6px;letter-spacing:.16em}
.call-stage-controls{flex:0 0 auto}.call-stage-controls button{width:38px;height:38px;border-radius:11px}
.call-person.speaking .call-person-avatar{box-shadow:0 0 0 4px #55dda31a,0 0 26px #55dda326}
.invoice-surface{min-height:340px;}
.invoice-surface .invoice-list{height:100%;padding:0}
.invoice-surface .invoice-empty{min-height:290px}

/* v53 — referans özel sohbet, eşit Journal ölçüleri ve yetkili kanal araçları. */
#news-view,#invoices-view{padding:26px clamp(18px,4vw,52px) 52px!important}
#news-view .news-page-shell,#invoices-view .journal-page-shell{width:min(1380px,100%)!important;margin:0 auto!important}
#news-view .standalone-page-topbar,#invoices-view .standalone-page-topbar{min-height:48px!important;margin:0 0 14px!important;padding:7px 0!important}
#news-view .pulse-page-head,#invoices-view .section-page-head{min-height:112px!important;display:flex!important;align-items:flex-end!important;margin:0!important;padding:18px 2px 23px!important;}
#news-view .pulse-page-head h2,#invoices-view .section-page-head h2{margin:6px 0 5px!important;font-size:27px!important;line-height:1.05!important}
#news-view .pulse-page-head p,#invoices-view .section-page-head p{margin:0!important;font-size:9px!important;line-height:1.55!important}
#news-view .pulse-surface,#invoices-view .invoice-surface{margin-top:0px!important}

.app-shell.social-mode .workspace{height:100dvh!important;overflow:hidden!important;background:#0d1017!important}
#social-view{height:calc(100dvh - 69px)!important;overflow:hidden!important;padding:0!important;background:#0d1017!important}
#social-view .account-page-shell{width:100%!important;max-width:none!important;height:100%!important;margin:0!important;padding:0!important}
#social-view .standalone-page-topbar,#social-view .section-page-head{display:none!important}
#social-view .social-hub{width:100%!important;height:100%!important;min-height:0!important;margin:0!important;grid-template-columns:360px minmax(0,1fr)!important;border:0!important;border-radius:0!important;background:#0d1017!important;box-shadow:none!important}
#social-view .dm-sidebar{background:linear-gradient(180deg,#11141c,#0c0f15)!important}
#social-view .dm-sidebar-head{min-height:84px!important;padding:18px 22px!important;border-bottom:1px solid #232733!important;background:#11141c!important}
#social-view .dm-sidebar-head span{color:#8e7ad9!important;font-size:7px!important;letter-spacing:.16em!important}
#social-view .dm-sidebar-head strong{margin-top:5px!important;color:#f2f0f6!important;font-size:18px!important}
#social-view .friend-search{height:42px!important;margin:13px 18px 14px!important;border-radius:0!important;background:transparent!important}
#social-view .friend-row{min-height:68px!important;margin:3px 0!important;padding:9px 12px!important;border-radius:0!important}
#social-view .friend-row:has([data-open-dm]):hover,#social-view .friend-row.active{background:#1b1a29!important}
#social-view .dm-panel{background:radial-gradient(circle at 78% 17%,rgba(105,78,196,.14),transparent 35%),#0d1017!important}
#social-view .dm-head{min-height:68px!important;padding:10px 28px!important;border-bottom:1px solid #252936!important;background:#10131b!important}
#social-view .dm-security-line{order:8;margin-top:auto;padding:10px 36px!important;border-top:1px solid #202430!important;color:#827a9b!important;background:#0c0f15!important;text-align:left!important}
#social-view #dm-conversation{display:flex!important;flex-direction:column!important}
#social-view #dm-conversation.hidden{display:none!important}
#social-view .dm-message-list{flex:1 1 auto!important;min-height:0!important;overflow:auto!important;padding:18px 34px 24px!important;background:linear-gradient(180deg,rgba(111,82,211,.055),transparent 32%)!important}
#social-view .dm-message-row{align-items:flex-end!important}
#social-view .dm-message-row .dm-message{max-width:min(62%,560px)!important;padding:11px 14px!important;border-color:#303642!important;background:#1a1f28!important}
#social-view .dm-message-row .dm-message.mine{border-color:#5b497e!important;background:linear-gradient(135deg,#554079,#3b2d58)!important}
#social-view .dm-form{order:9;min-height:58px!important;margin:0 28px 12px!important;padding:7px 8px!important;border-color:#303642!important;border-radius:0!important;background:#0d1017!important}
#social-view .dm-form input{font-size:11px!important}
#social-view .direct-call-strip{flex:0 0 auto!important}
#social-view .direct-call-stage{flex:0 0 116px!important;min-height:116px!important}
.channel-row:not(:hover) .channel-actions{display:none}
.channel-row:hover .channel-actions,.channel-row:focus-within .channel-actions{display:flex}

/* v54 — sıkı sohbet listesi, başlık istek menüsü ve ortalanmış arama kartı. */
#social-view .social-hub{grid-template-columns:292px minmax(0,1fr)!important}
#social-view .dm-sidebar-head{position:relative!important;overflow:visible!important;padding:15px 16px!important}
#social-view .dm-sidebar-head>div:first-child{min-width:0!important}
#social-view .dm-sidebar-head strong{font-size:16px!important}
#social-view .dm-sidebar-tools{display:flex!important;align-items:center!important;gap:6px!important}
#social-view .dm-sidebar-tools>#friend-count-badge{min-width:24px;height:24px;display:grid;place-items:center;border:1px solid #443967;border-radius:7px;color:#c8bdff;background:#211b32;font-size:8px}
#social-view .friend-request-toggle{height:30px;display:flex;align-items:center;gap:5px;padding:0 8px;border:1px solid #30303a;border-radius:8px;color:#9690a2;background:#171920;font-size:7px;font-weight:800}
#social-view .friend-request-toggle span{min-width:16px;place-items:center;border-radius:5px;font-size:7px;letter-spacing:0!important}
#social-view .friend-request-toggle i{font-size:9px;font-style:normal;transition:transform .18s}
#social-view .friend-request-toggle:hover,#social-view .friend-request-toggle.active{border-color:#5d4d88;color:#f0ecff;background:#242033}
#social-view .friend-request-toggle.active i{transform:rotate(180deg)}
#social-view .friend-request-toggle.has-items span{color:#fff;background:#775ce6}
#social-view .friend-request-popover{width:270px;max-height:390px;position:absolute;z-index:90;top:calc(100% - 8px);right:12px;overflow:hidden;border:1px solid #393345;border-radius:12px;background:#12141b;box-shadow:0 22px 60px #000b}
#social-view .friend-request-popover.hidden{display:none!important}
#social-view .friend-request-popover>header{min-height:57px;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #282a34;background:linear-gradient(135deg,#1c1828,#14161d)}
#social-view .friend-request-popover>header>div{display:grid;gap:3px}
#social-view .friend-request-popover>header span{font-size:6px!important}
#social-view .friend-request-popover>header strong{margin:0!important;font-size:11px!important}
#social-view .friend-request-popover>header button{width:27px;height:27px;padding:0;border:1px solid #34313c;border-radius:7px;color:#9993a1;background:#191a20}
#social-view .friend-request-popover .friend-list{max-height:330px!important;display:grid!important;grid-auto-rows:max-content!important;align-content:start!important;gap:4px!important;overflow-y:auto!important;padding:8px!important}
#social-view .friend-request-popover .friend-row{min-height:54px!important;margin:0!important;padding:7px!important;border-radius:8px!important}
#social-view .friend-request-popover .friend-row>span{flex-wrap:wrap;justify-content:flex-end}
#social-view .dm-sidebar>.profile-section-title{margin:12px 16px 7px!important}
#social-view .dm-sidebar>#friend-list{flex:1 1 auto!important;display:grid!important;grid-auto-rows:max-content!important;align-content:start!important;gap:3px!important;overflow-y:auto!important;padding:0 8px 12px!important}
#social-view .dm-sidebar>#friend-list .friend-row{width:100%!important;min-height:57px!important;height:57px!important;margin:0!important;padding:7px 9px!important;border-radius:9px!important}
#social-view .dm-sidebar>#friend-list .friend-avatar{width:36px!important;height:36px!important;border-radius:10px!important}
#social-view .dm-sidebar>#friend-list .friend-row>span button{min-width:48px!important;min-height:27px!important}

#social-view .direct-call-stage{width:min(650px,calc(100% - 56px))!important;min-height:210px!important;flex:0 0 210px!important;align-self:center!important;display:grid!important;grid-template-rows:1fr auto!important;place-items:center!important;gap:15px!important;margin:18px auto 8px!important;padding:25px 30px 18px!important;border:1px solid #373047!important;border-radius:22px!important;background:radial-gradient(circle at 18% 18%,rgba(126,91,235,.24),transparent 32%),radial-gradient(circle at 84% 82%,rgba(48,180,136,.14),transparent 30%),linear-gradient(145deg,#181521,#10151c)!important;box-shadow:0 24px 65px #0008,inset 0 1px #ffffff0a!important}
#social-view .direct-call-stage.hidden{display:none!important}

/* v2.6 private media, locked rooms and channel notes */
#social-view .direct-call-stage{width:100%!important;min-height:150px!important;flex:0 0 150px!important;margin:0!important;padding:18px 34px!important;border:0!important;border-radius:0!important;background:linear-gradient(90deg,rgba(117,83,225,.16),rgba(17,19,27,.18) 48%,rgba(45,184,137,.10))!important;box-shadow:inset 0 -1px #292d38,inset 0 1px #252936!important}
#social-view .call-stage-people{justify-content:center!important;gap:34px!important;width:min(620px,100%)!important;margin:auto!important}
#social-view .call-stage-controls{position:absolute!important;right:34px!important;top:50%!important;transform:translateY(-50%)!important}
.dm-inbox-title>div{display:flex;align-items:center;gap:12px}.dm-inbox-title #dm-page-back{border:0;background:transparent;color:#aaa4bd;font-size:11px;padding:3px 0;cursor:pointer}.dm-inbox-title #dm-page-back:hover{color:#fff}
#social-view .friend-list{display:flex!important;flex-direction:column!important;gap:4px!important}#social-view .friend-row{width:100%!important;min-height:54px!important;padding:8px 10px!important;margin:0!important;display:grid!important;grid-template-columns:38px minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important}#social-view .friend-row>div{min-width:0!important}#social-view .friend-row strong,#social-view .friend-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#social-view .dm-form{position:relative!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) 42px!important;gap:8px!important;padding:12px 16px!important;border-top:1px solid #272b35!important;background:#0d1017!important}.dm-media-actions{display:flex;gap:6px}.dm-media-actions button{min-width:38px;height:38px;border:1px solid #303544;border-radius:10px;background:#171a23;color:#bdb6d7;font-size:11px;font-weight:800}.dm-media-actions button:last-child{font-size:20px}.dm-media-popover{left:18px!important;right:auto!important;bottom:68px!important;width:min(390px,calc(100% - 36px))!important}.custom-emoji-section img,.premium-emoji-grid img,.custom-message-emoji{width:30px;height:30px;object-fit:contain}.custom-message-emoji{display:inline-block;vertical-align:middle;margin:0 2px}
.channel-lock{display:inline-grid;place-items:center;margin-left:5px;color:#a58dff;font-size:10px}.channel-note-message{margin:16px 18px!important;padding:18px 20px!important;border:1px solid #514373!important;border-left:3px solid #8a6cff!important;border-radius:14px!important;background:linear-gradient(110deg,rgba(104,75,192,.20),rgba(17,19,26,.92))!important}.channel-note-icon{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:10px;background:#7459d7;color:#fff;font-weight:900}.channel-note-label{color:#a98fff;font-size:9px;font-weight:900;letter-spacing:.18em;margin-bottom:5px}.channel-note-message .message-text{font-size:11px;line-height:1.6;color:#e9e6f2}.channel-note-message .message-pin{display:none}
.admin-media-form{display:grid;grid-template-columns:130px 1fr 150px 1.2fr auto;gap:12px;align-items:end;padding:18px;border:1px solid #2c2c37;border-radius:14px;background:#111116}.admin-media-form label{display:grid;gap:7px;color:#9690a8;font-size:10px;font-weight:800;letter-spacing:.08em}.admin-media-form input,.admin-media-form select{height:40px;border:1px solid #343341;border-radius:9px;background:#0c0c11;color:#eee;padding:0 11px}.admin-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:16px}.admin-media-grid article{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;padding:12px;border:1px solid #2c2c37;border-radius:12px;background:#111116}.admin-media-preview{display:grid;place-items:center;width:52px;height:52px;border-radius:10px;background:#191823}.admin-media-preview img{max-width:44px;max-height:44px}.admin-media-grid small{display:block;margin-top:4px;color:#777185;font-size:9px}.admin-media-grid .danger{border:1px solid #61303b;border-radius:8px;background:#27151a;color:#ff778f;padding:8px 10px}
#social-view .call-stage-people{width:min(460px,100%)!important;display:grid!important;grid-template-columns:1fr 90px 1fr!important;align-items:center!important;justify-content:center!important;gap:12px!important}
#social-view .call-person{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto auto auto!important;justify-items:center!important;gap:4px!important}
#social-view .call-person-avatar{grid-row:auto!important;width:66px!important;height:66px!important;border:4px solid #211c2b!important;font-size:16px!important;box-shadow:0 0 0 1px #6a56a866,0 15px 35px #0007!important}
#social-view .call-person .call-voice-waves,#social-view .call-person strong,#social-view .call-person small{grid-column:auto!important}
#social-view .call-person .call-voice-waves{height:13px!important;justify-content:center!important}
#social-view .call-link{min-width:0!important;display:grid!important;grid-template-columns:1fr!important;justify-items:center!important;gap:7px!important;color:#9386c8!important}
#social-view .call-link::before{content:'✦';width:30px;height:30px;display:grid;place-items:center;border:1px solid #4b4066;border-radius:50%;color:#ad99ff;background:#211b31;font-size:10px}
#social-view .call-link i{width:52px!important;background:linear-gradient(90deg,transparent,#6f5ba6,transparent)!important}
#social-view .call-link i:last-child{display:none!important}
#social-view .call-stage-controls{display:flex!important;justify-content:center!important;gap:8px!important}
#social-view .call-stage-controls button{width:38px!important;height:38px!important;border-radius:50%!important}
#social-view .direct-call-stage{position:relative!important}

/* v2.6.1 final private-call layout */
#social-view .direct-call-stage{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:100%!important;height:auto!important;min-height:184px!important;flex:0 0 184px!important;gap:14px!important;margin:0!important;padding:18px 24px!important;border:0!important;border-bottom:1px solid #272b35!important;border-radius:0!important;background:radial-gradient(circle at 50% 15%,rgba(118,87,225,.16),transparent 46%),linear-gradient(90deg,#11121b,#121722 50%,#101a1d)!important;box-shadow:none!important}
#social-view .direct-call-stage .call-stage-people{display:flex!important;align-items:center!important;justify-content:center!important;width:auto!important;max-width:100%!important;gap:28px!important;margin:0 auto!important}
#social-view .direct-call-stage .call-person{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:92px!important;gap:3px!important}
#social-view .direct-call-stage .call-person-avatar{width:58px!important;height:58px!important;border:3px solid #252032!important;box-shadow:0 0 0 1px #735ac9,0 10px 24px #0007!important}
#social-view .direct-call-stage .call-link{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:74px!important;min-width:74px!important;gap:6px!important}
#social-view .direct-call-stage .call-link i{display:block!important;width:60px!important;height:1px!important}.direct-call-stage .call-link i:last-child{display:none!important}
#social-view .direct-call-stage .call-link::before{width:28px!important;height:28px!important}
#social-view .direct-call-stage .call-stage-controls{position:static!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;transform:none!important;margin:0 auto!important}
#social-view .direct-call-stage .call-stage-controls button{width:38px!important;height:38px!important;border-radius:12px!important;background:#191b24!important;border:1px solid #313440!important}
#social-view .direct-call-stage .call-stage-controls .hangup{width:46px!important;background:#c83c56!important;border-color:#d54a63!important}
.dm-inbox-title>div{display:flex!important;align-items:center!important;gap:10px!important;white-space:nowrap}.dm-inbox-title #dm-page-back{display:grid!important;place-items:center!important;flex:0 0 32px!important;width:32px!important;height:32px!important;padding:0!important;border:1px solid #323441!important;border-radius:9px!important;background:#181a22!important;color:#d7d3e3!important}.dm-inbox-title #dm-page-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.dm-inbox-title #dm-page-back:hover{border-color:#7058c9!important;background:#211c31!important;color:#fff!important}.dm-inbox-title strong{font-size:17px!important;line-height:1!important;white-space:nowrap!important}
.channel-lock{flex:0 0 16px!important;width:16px!important;height:16px!important;margin:0 2px 0 1px!important;color:#b29aff!important}.channel-lock svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* v2.6.2 — reliable room entry, refined call controls and DM request placement. */
#social-view .direct-call-stage{min-height:206px!important;flex-basis:206px!important;padding:22px 28px!important;gap:17px!important}
#social-view .direct-call-stage .call-stage-people{gap:38px!important}
#social-view .direct-call-stage .call-person{width:106px!important}
#social-view .direct-call-stage .call-person-avatar{width:66px!important;height:66px!important;transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease!important}
#social-view .direct-call-stage .call-stage-controls button,
#social-view .direct-call-stage .call-stage-controls .hangup{width:38px!important;height:38px!important;min-width:38px!important;padding:0!important;border-radius:11px!important}
#social-view .direct-call-stage .call-stage-controls .hangup{background:#c83c56!important;border-color:#d54a63!important}
#social-view .direct-call-stage .call-stage-controls svg{width:17px!important;height:17px!important}
#social-view .call-person.speaking .call-person-avatar{border-color:#55dda3!important;box-shadow:0 0 0 4px rgba(85,221,163,.13),0 0 30px rgba(85,221,163,.26),0 12px 28px rgba(0,0,0,.5)!important;animation:dismoxSpeakingRing .82s ease-in-out infinite alternate!important}
#social-view .call-person.speaking .call-voice-waves{opacity:1!important}
#social-view .call-person.speaking .call-voice-waves i{animation:dismoxVoiceWave .64s ease-in-out infinite alternate!important}
@keyframes dismoxSpeakingRing{from{transform:scale(1);filter:brightness(1)}to{transform:scale(1.045);filter:brightness(1.12)}}

#social-view .dm-sidebar{position:relative!important}
#social-view .dm-sidebar-head .dm-sidebar-tools{margin-left:auto!important}
#social-view .friend-search + .friend-request-toggle{width:calc(100% - 24px)!important;min-height:36px!important;display:grid!important;grid-template-columns:18px minmax(0,1fr) auto 14px!important;align-items:center!important;gap:8px!important;margin:0 12px 10px!important;padding:0 11px!important;border:1px solid #292c37!important;border-radius:9px!important;color:#aaa6b8!important;background:#13161e!important;text-align:left!important}
#social-view .friend-search + .friend-request-toggle:hover,
#social-view .friend-search + .friend-request-toggle.active{border-color:#5c4b91!important;color:#eeeaff!important;background:#1b1827!important}
#social-view .friend-search + .friend-request-toggle svg{width:17px!important;height:17px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important}
#social-view .friend-search + .friend-request-toggle>span{font-size:9px!important;font-weight:800!important}
#social-view .friend-search + .friend-request-toggle>b{min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px;border:1px solid #4b3c72;border-radius:6px;color:#c9bcff;background:#211b31;font-size:8px}
#social-view .friend-search + .friend-request-toggle>i{text-align:center;font-style:normal}
#social-view .friend-request-toggle + .friend-request-popover{top:150px!important;right:12px!important;left:12px!important;width:auto!important;z-index:80!important}

.custom-emoji-section img,
.premium-emoji-grid img,
.custom-message-emoji{width:16px!important;height:16px!important;max-width:16px!important;max-height:16px!important;object-fit:contain!important}
.channel-note-message{margin:0!important;padding:13px 16px!important;border:0!important;border-bottom:1px solid #292b35!important;border-left:3px solid #8064e9!important;border-radius:0!important;background:linear-gradient(90deg,rgba(104,75,192,.16),rgba(17,19,26,.35) 60%,transparent)!important;box-shadow:none!important}
.channel-note-icon{flex-basis:28px!important;width:28px!important;height:28px!important;border-radius:8px!important}