@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ════════════════════════════════════════════════════════════════════════
   DEFAULT THEME — "Midnight"
   ════════════════════════════════════════════════════════════════════════ */
:root, body[data-theme="midnight"], body[data-theme="dark"] {
  --rail-bg:    #040511;
  --sidebar-bg: #060714;
  --chat-bg:    #070817;
  --input-bg:   #12142b;
  --dark-bg:    #040511;
  --hover-bg:   rgba(255,255,255,.05);
  --active-bg:  rgba(255,255,255,.08);
  --text:       #D2D5DB;
  --muted:      #7c8088;
  --header:     #F2F3F5;
  --brand:      #6b7cff;
  --brand-hv:   #5868e6;
  --green:      #23A55A;
  --yellow:     #F0B232;
  --red:        #ED4245;
  --separator:  rgba(255,255,255,.04);

  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-pop:  cubic-bezier(.32, .72, .48, 1.04);

  --ease-menu-open:  cubic-bezier(.32, .72, .48, 1.04);
  --ease-menu-close: cubic-bezier(.2, .8, .6, 1);
  --shadow-md: var(--ds-shadow-2);
  --shadow-lg: var(--ds-shadow-3);
  --ring-brand: 0 0 0 3px rgba(107,124,255,.22);
}

/* ────────── OBSIDIAN ────────── */
body[data-theme="obsidian"] {
  --rail-bg:    #000000;
  --sidebar-bg: #070707;
  --chat-bg:    #0c0c0c;
  --input-bg:   #1a1a1a;
  --dark-bg:    #000000;
  --hover-bg:   rgba(255,255,255,.06);
  --active-bg:  rgba(255,255,255,.10);
  --text:       #d8d8d8;
  --muted:      #888;
  --header:     #fff;
  --brand:      #5a6470;
  --brand-hv:   #4a5460;
  --separator:  rgba(255,255,255,.05);
  --ring-brand: 0 0 0 3px rgba(90,100,112,.4);
}

/* ────────── TWILIGHT ────────── */
body[data-theme="twilight"] {
  --rail-bg:    linear-gradient(180deg, #14081f 0%, #20102f 100%);
  --sidebar-bg: linear-gradient(180deg, #1c0e2c 0%, #261339 100%);
  --chat-bg:    linear-gradient(180deg, #1d1330 0%, #251a3d 100%);
  --input-bg:   rgba(255,255,255,.06);
  --dark-bg:    #170a26;
  --hover-bg:   rgba(168,127,255,.08);
  --active-bg:  rgba(168,127,255,.14);
  --text:       #e3dafa;
  --muted:      #9183b0;
  --header:     #f5f0ff;
  --brand:      #a87fff;
  --brand-hv:   #8a5fe6;
  --separator:  rgba(168,127,255,.1);
  --ring-brand: 0 0 0 3px rgba(168,127,255,.25);
}

/* ────────── OCEAN ────────── */
body[data-theme="ocean"] {
  --rail-bg:    linear-gradient(180deg, #04101f 0%, #082035 100%);
  --sidebar-bg: linear-gradient(180deg, #061a2c 0%, #0b2841 100%);
  --chat-bg:    linear-gradient(180deg, #082035 0%, #0e2c4c 100%);
  --input-bg:   rgba(120,190,255,.08);
  --dark-bg:    #04101f;
  --hover-bg:   rgba(120,190,255,.08);
  --active-bg:  rgba(120,190,255,.14);
  --text:       #d4e6f5;
  --muted:      #7d96b0;
  --header:     #eaf4ff;
  --brand:      #36c5f0;
  --brand-hv:   #1aa3d0;
  --separator:  rgba(120,190,255,.1);
  --ring-brand: 0 0 0 3px rgba(54,197,240,.24);
}

/* ────────── NEBULA ────────── */
body[data-theme="nebula"] {
  --rail-bg:    linear-gradient(180deg, #150216 0%, #2a0a2e 100%);
  --sidebar-bg: linear-gradient(180deg, #1c0820 0%, #340e3a 100%);
  --chat-bg:    linear-gradient(135deg, #1f0a22 0%, #3a1042 50%, #2a0a2e 100%);
  --input-bg:   rgba(255,127,200,.06);
  --dark-bg:    #15021a;
  --hover-bg:   rgba(255,127,200,.08);
  --active-bg:  rgba(255,127,200,.14);
  --text:       #f0d6e8;
  --muted:      #b08aa0;
  --header:     #ffe8f5;
  --brand:      #ff4ed8;
  --brand-hv:   #d937b3;
  --separator:  rgba(255,127,200,.1);
  --ring-brand: 0 0 0 3px rgba(255,78,216,.22);
}

/* ────────── FOREST ────────── */
body[data-theme="forest"] {
  --rail-bg:    linear-gradient(180deg, #061410 0%, #0c2018 100%);
  --sidebar-bg: linear-gradient(180deg, #0a1c14 0%, #112c1f 100%);
  --chat-bg:    linear-gradient(180deg, #0c2018 0%, #14301f 100%);
  --input-bg:   rgba(120,220,160,.06);
  --dark-bg:    #061410;
  --hover-bg:   rgba(120,220,160,.07);
  --active-bg:  rgba(120,220,160,.13);
  --text:       #d4ecdb;
  --muted:      #7a9a86;
  --header:     #eaf7ee;
  --brand:      #4ade80;
  --brand-hv:   #22c55e;
  --separator:  rgba(120,220,160,.1);
  --ring-brand: 0 0 0 3px rgba(74,222,128,.22);
}

/* ────────── SUNSET ────────── */
body[data-theme="sunset"] {
  --rail-bg:    linear-gradient(180deg, #170808 0%, #281310 100%);
  --sidebar-bg: linear-gradient(180deg, #1f0c0a 0%, #341812 100%);
  --chat-bg:    linear-gradient(135deg, #1f0c0a 0%, #3a1d12 50%, #2e1a18 100%);
  --input-bg:   rgba(255,170,100,.07);
  --dark-bg:    #170808;
  --hover-bg:   rgba(255,170,100,.08);
  --active-bg:  rgba(255,170,100,.14);
  --text:       #f3dcc8;
  --muted:      #ad8c70;
  --header:     #fff0dc;
  --brand:      #ff8a3d;
  --brand-hv:   #e0701f;
  --separator:  rgba(255,170,100,.1);
  --ring-brand: 0 0 0 3px rgba(255,138,61,.25);
}

/* ────────── AURORA ────────── */
body[data-theme="aurora"] {
  --rail-bg:    linear-gradient(160deg, #020a1a 0%, #0a1a2e 60%, #0d2540 100%);
  --sidebar-bg: linear-gradient(170deg, #061224 0%, #0a2540 50%, #122d50 100%);
  --chat-bg:    linear-gradient(150deg, #051528 0%, #0a2540 35%, #163a55 70%, #2a3a78 100%);
  --input-bg:   rgba(120,200,220,.07);
  --dark-bg:    #020a1a;
  --hover-bg:   rgba(94,234,212,.08);
  --active-bg:  rgba(94,234,212,.14);
  --text:       #d4ecf0;
  --muted:      #7a96ae;
  --header:     #eaf7ff;
  --brand:      #5eead4;
  --brand-hv:   #2dd4bf;
  --separator:  rgba(120,200,220,.1);
  --ring-brand: 0 0 0 3px rgba(94,234,212,.24);
}

/* ────────── VOLCANO ────────── */
body[data-theme="volcano"] {
  --rail-bg:    linear-gradient(180deg, #1a0606 0%, #2a0a08 100%);
  --sidebar-bg: linear-gradient(180deg, #200808 0%, #3a1410 100%);
  --chat-bg:    linear-gradient(135deg, #1a0606 0%, #3a1410 40%, #5a1a14 100%);
  --input-bg:   rgba(255,140,80,.08);
  --dark-bg:    #1a0606;
  --hover-bg:   rgba(255,140,80,.08);
  --active-bg:  rgba(255,140,80,.14);
  --text:       #f3d4c0;
  --muted:      #b0826a;
  --header:     #ffece0;
  --brand:      #ff6b35;
  --brand-hv:   #e0531c;
  --separator:  rgba(255,140,80,.12);
  --ring-brand: 0 0 0 3px rgba(255,107,53,.24);
}

/* ────────── MINT ────────── */
body[data-theme="mint"] {
  --rail-bg:    linear-gradient(180deg, #04141a 0%, #0a2024 100%);
  --sidebar-bg: linear-gradient(180deg, #061a20 0%, #0d2d30 100%);
  --chat-bg:    linear-gradient(180deg, #082024 0%, #0e3035 100%);
  --input-bg:   rgba(94,234,212,.07);
  --dark-bg:    #04141a;
  --hover-bg:   rgba(94,234,212,.08);
  --active-bg:  rgba(94,234,212,.14);
  --text:       #d4f0ea;
  --muted:      #7aa49a;
  --header:     #eaf9f4;
  --brand:      #5eead4;
  --brand-hv:   #2dd4bf;
  --separator:  rgba(94,234,212,.1);
  --ring-brand: 0 0 0 3px rgba(94,234,212,.22);
}

/* ────────── ROSEWOOD ────────── */
body[data-theme="rosewood"] {
  --rail-bg:    linear-gradient(180deg, #160810 0%, #2a0e1a 100%);
  --sidebar-bg: linear-gradient(180deg, #1d0a14 0%, #341022 100%);
  --chat-bg:    linear-gradient(180deg, #1f0c16 0%, #2e1422 100%);
  --input-bg:   rgba(255,130,170,.07);
  --dark-bg:    #160810;
  --hover-bg:   rgba(255,130,170,.07);
  --active-bg:  rgba(255,130,170,.13);
  --text:       #f1d4e2;
  --muted:      #b08498;
  --header:     #ffe5ee;
  --brand:      #ff5a8c;
  --brand-hv:   #db3f70;
  --separator:  rgba(255,130,170,.1);
  --ring-brand: 0 0 0 3px rgba(255,90,140,.22);
}

html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Open Sans','gg sans','Noto Sans',Whitney,'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif;
  background: var(--rail-bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.375;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.selectable { user-select: text; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24); background-clip: padding-box; }

/* ─── Keyboard focus ring ─── */
button:focus-visible, input:focus-visible, textarea:focus-visible,
a:focus-visible, select:focus-visible, [contenteditable]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-radius: 4px;
}

/* ─── Native form controls ─── */
:root { color-scheme: dark; }
body[data-theme="light"] { color-scheme: light; }
/* Native <select> — appearance reset + custom chevron so it reads as a
   designed control, not the OS default. One rule upgrades every select. */
select {
  -webkit-appearance: none; appearance: none;
  background-color: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c8088' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px 12px;
  color: var(--text);
  border: 1px solid var(--separator);
  border-radius: var(--ds-radius-s, 10px);
  padding: 8px 34px 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
}
select:hover { border-color: rgba(255,255,255,.18); background-color: var(--active-bg); }
select:focus, select:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring-brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7cff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
select:disabled { opacity: .5; cursor: not-allowed; }

select option, optgroup {
  background-color: var(--dark-bg);
  color: var(--text);
}
/* Light theme — dark chevron on light field */
body[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Brand-tinted native checkboxes / radios everywhere (was per-component only) */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }

/* ════════════════════════════
   TITLE BAR
════════════════════════════ */
.app-titlebar {
  height: 32px;
  display: flex;
  align-items: center;
  background: var(--rail-bg);
  -webkit-app-region: drag;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--separator);
}
.tb-drag { height: 100%; }
/* Left cluster: back/forward + streamer indicator */
.tb-left { display: flex; align-items: center; gap: 2px; padding-left: 8px; -webkit-app-region: no-drag; }
.tb-navbtn {
  width: 30px; height: 24px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--muted); cursor: pointer; border-radius: 7px;
  transition: background .12s, color .12s;
}
.tb-navbtn:hover:not(:disabled) { background: rgba(255,255,255,.08); color: var(--header); }
.tb-navbtn:active:not(:disabled) { transform: scale(.92); }
.tb-navbtn:disabled { opacity: .3; cursor: default; }
.tb-streamer {
  display: none; align-items: center; gap: 5px; margin-left: 8px;
  background: rgba(132,71,216,.92); color: #fff; padding: 3px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap;
  -webkit-app-region: no-drag;
}
body.streamer-mode .tb-streamer { display: inline-flex; }
/* Center: current page icon + name (drag region) */
.tb-center { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
.tb-ctx { display: inline-flex; align-items: center; gap: 8px; max-width: 70%; pointer-events: none; }
.tb-ctx-ico { display: inline-flex; align-items: center; flex: none; }
.tb-ctx-ico img, .tb-ctx-ico .avatar, .tb-ctx-ico canvas { width: 18px !important; height: 18px !important; border-radius: 6px; object-fit: cover; display: block; }
.tb-ctx-ico svg { width: 16px; height: 16px; color: var(--muted); }
.tb-ctx-letter { width: 18px; height: 18px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.tb-ctx-name { font-size: 13px; font-weight: 700; color: var(--header); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Halo breadcrumb + palette button — hidden in the classic look; skin.css reveals
   them under body.skin-halo (and hides the centered .tb-ctx, keeping .tb-center
   as a flex:1 spacer so the controls stay pinned right). */
.tb-breadcrumb { display: none; align-items: center; gap: 6px; padding-left: 6px; min-width: 0; -webkit-app-region: drag; }
.tb-bread-ico { display: inline-flex; align-items: center; flex: none; }
.tb-bread-ico img, .tb-bread-ico .avatar, .tb-bread-ico canvas { width: 18px !important; height: 18px !important; border-radius: 6px; object-fit: cover; display: block; }
/* Home/DM/Keşfet gibi sayfalarda ikon bir SVG'dir; renk verilmezse currentColor
   koyu kalıp görünmez oluyordu (sunucu ikonu <img> olduğu için görünüyordu).
   Klasik .tb-ctx-ico svg gibi açık bir renk ver → ikon HER sayfada görünür. */
.tb-bread-ico svg { width: 16px; height: 16px; color: var(--header); }
.tb-bread-name { font-size: 13px; font-weight: 700; color: var(--header); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.tb-bread-sep { color: var(--muted); font-size: 13px; flex: none; }
.tb-bread-channel { color: var(--muted); font-weight: 600; }
.tb-palette-btn { display: none; align-items: center; justify-content: center; width: 38px; height: 32px; border: none; background: transparent; color: var(--muted); cursor: pointer; -webkit-app-region: no-drag; transition: color .12s, background .12s; }
.tb-palette-btn:hover { color: var(--header); background: rgba(255,255,255,.06); }
/* Notifications + Admin relocated into the titlebar (shown in both looks) */
.tb-action-btn { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 34px; height: 32px; border: none; background: transparent; color: var(--muted); cursor: pointer; -webkit-app-region: no-drag; transition: color .12s, background .12s; border-radius: 8px; }
.tb-action-btn:hover { color: var(--header); background: rgba(255,255,255,.06); }
.tb-action-btn svg { width: 17px; height: 17px; }
.tb-bell-badge { position: absolute; top: 2px; right: 0; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: #ED4245; color: #fff; font-size: 9px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; box-sizing: border-box; pointer-events: none; }
.tb-controls {
  display: flex;
  -webkit-app-region: no-drag;
}
.tb-btn {
  width: 46px; height: 32px;
  background: none; border: none;
  color: var(--muted); font-size: 14px;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s;
}
.tb-btn:hover         { background: rgba(255,255,255,.08); color: var(--header); }
.tb-btn.close:hover   { background: var(--red); color: #fff; }

/* ════════════════════════════
   APP LAYOUT
════════════════════════════ */
#app {
  display: flex;
  height: 100vh;
  height: 100dvh;          /* dvh avoids the iOS Safari address-bar jump */
  padding-top: 32px;
  overflow: hidden;
}

html.web .tb-controls { display: none !important; }   /* web has no native min/max/close */

/* Mobile nav-drawer toggle + scrim (only shown via the <=800px block below) */
#m-menu { display: none; position: fixed; top: 8px; left: 10px; z-index: 320;
  width: 38px; height: 38px; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--rail-bg) 78%, transparent); color: var(--header);
  border: 1px solid rgba(255,255,255,.10); border-radius: 11px; cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .12s, background .15s; }
#m-menu:active { transform: scale(.92); }
#m-scrim { display: none; position: fixed; inset: 0; z-index: 290;
  background: rgba(2,3,10,.55); opacity: 0; pointer-events: none;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transition: opacity .26s; }
/* Mobile-only info sheet + pins pane — hidden everywhere by default; the
   @media(max-width:900px) block shows them when body.msheet is active. */
#m-sheet, #m-pins { display: none; }

/* Mobile bottom nav (lives at the bottom of the slide-in drawer) */
#m-bottomnav { display: none; align-items: stretch; flex-shrink: 0; gap: 4px;
  background: var(--rail-bg); border-top: 1px solid var(--separator);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
#m-bottomnav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer; color: var(--muted); font-size: 10px; font-weight: 600;
  padding: 7px 0; border-radius: 10px; transition: color .12s, background .12s; }
#m-bottomnav button:active { transform: scale(.96); }
#m-bottomnav button:hover { color: var(--text); }
#m-bottomnav .mbn-ic { width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ════════════════════════════
   SERVER RAIL
════════════════════════════ */
#server-rail {

  width: var(--rail-w, 72px); min-width: var(--rail-w, 72px);
  background: var(--rail-bg);
  display: flex; flex-direction: column;
  align-items: center;
  padding: 12px 0 8px;
  gap: 8px;
  overflow-y: auto; overflow-x: visible;
  scrollbar-width: none;
  transition: width .2s var(--ease), min-width .2s var(--ease), padding .2s var(--ease);
  z-index: 20;
}
#server-rail::-webkit-scrollbar { display: none; }

.server-icon {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--sidebar-bg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 20px; font-weight: 700;
  color: var(--text);
  transition: border-radius .15s, background .15s, color .15s, transform .1s;
  flex-shrink: 0; overflow: visible;
}
.server-icon:hover        { border-radius: 16px; background: var(--brand); color: #fff; transform: translateY(-1px); }
.server-icon.active       { border-radius: 16px; color: #fff; }

.server-icon.home-icon,
.server-icon.home-icon:hover,
.server-icon.home-icon.active { border-radius: 50%; background: transparent; }
.home-logo {
  width: 100%; height: 100%; object-fit: contain;
  padding: 7px; display: block; pointer-events: none;
}
.server-icon.add-btn      { color: var(--green); }
.server-icon.add-btn:hover { background: var(--green); color: #fff; }

.server-pip {
  position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 8px; background: #fff; border-radius: 0 4px 4px 0;
  transition: height .15s; height: 0; pointer-events: none;
}
.server-icon:hover .server-pip { height: 20px; }
.server-icon.active .server-pip { height: 40px; }

.server-icon.has-unread .server-pip { height: 8px; }
.server-icon.has-unread:hover .server-pip { height: 20px; }

.srv-mention-badge {
  position: absolute; bottom: -4px; right: -4px;
  min-width: 18px; height: 18px;
  background: var(--red); border-radius: 9px;
  border: 3px solid var(--rail-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff; padding: 0 4px;
  line-height: 1; pointer-events: none; z-index: 3;
  box-sizing: border-box;
}

.srv-voice-badge {
  position: absolute; top: -3px; right: -3px;
  display: flex; align-items: center; gap: 2px;
  height: 16px; padding: 0 4px 0 3px;
  background: var(--green, #23a55a); color: #fff;
  border: 2px solid var(--rail-bg); border-radius: 9px;
  font-size: 9px; font-weight: 800; line-height: 1;
  pointer-events: none; z-index: 4;
}
.srv-voice-badge.is-live { background: #f23f43; }
.srv-voice-badge svg { width: 9px; height: 9px; }
.srv-voice-badge span { margin-top: -1px; }

/* Server-icon voice hover card */
#srv-voice-card {
  position: fixed; z-index: 9000;
  min-width: 200px; max-width: 280px;
  background: var(--dark-bg, #111214); color: var(--text);
  border: 1px solid var(--separator);
  border-radius: 10px; padding: 10px 12px;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.5));
  pointer-events: none;
}
#srv-voice-card .svc-head {
  font-size: 14px; font-weight: 800; color: var(--header);
  margin-bottom: 8px;
}
#srv-voice-card .svc-sect-title {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
  margin: 8px 0 4px;
}
#srv-voice-card .svc-row {
  display: flex; align-items: center; gap: 8px; padding: 2px 0;
}
#srv-voice-card .svc-row .av-img,
#srv-voice-card .svc-row .av-initials { flex-shrink: 0; }
#srv-voice-card .svc-name {
  flex: 1; min-width: 0; font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#srv-voice-card .svc-live {
  font-size: 9px; font-weight: 800; color: #fff; background: #f23f43;
  padding: 1px 5px; border-radius: 4px; letter-spacing: .03em; flex-shrink: 0;
}
#srv-voice-card .vu-game {
  width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; background: #0b0b0f; font-size: 12px;
}
#srv-voice-card .vu-game img { width: 100%; height: 100%; object-fit: contain; display: block; }
#srv-voice-card .vu-game.vu-game-emoji { background: transparent; }

.server-separator { width: 32px; height: 2px; background: var(--separator); border-radius: 1px; flex-shrink: 0; }

/* DM bubble */
.dm-bubble {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--sidebar-bg);
  flex-shrink: 0;
  cursor: pointer;
  overflow: visible;
  display: flex; align-items: center; justify-content: center;
  transition: border-radius .15s, transform .1s;
}
.dm-bubble:hover { border-radius: 16px; transform: translateY(-1px); }
.dm-bubble .dm-bubble-av { width: 48px; height: 48px; border-radius: inherit; overflow: hidden; pointer-events: none; }
.dm-bubble .dm-bubble-av img,
.dm-bubble .dm-bubble-av .av-img { width: 48px; height: 48px; border-radius: inherit; object-fit: cover; display: block; }
.dm-bubble .dm-bubble-av .av-initials { width: 48px !important; height: 48px !important; font-size: 20px !important; border-radius: inherit; }
.dm-bubble-badge {
  position: absolute; bottom: -4px; right: -4px;
  min-width: 20px; height: 20px;
  background: var(--red); border-radius: 10px;
  border: 3px solid var(--rail-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; padding: 0 5px;
  pointer-events: none;
}
@keyframes dm-bubble-bounce {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.dm-bubble-bounce { animation: dm-bubble-bounce .35s var(--ease-pop); }

/* Mention bubble */
.dm-bubble--mention .dm-bubble-at {
  position: absolute;
  left: -4px; top: -4px;
  width: 18px; height: 18px;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--rail-bg);
  pointer-events: none;
}

/* ════════════════════════════
   SIDEBAR
════════════════════════════ */
#sidebar {
  width: var(--sidebar-w, 240px); min-width: var(--sidebar-w, 240px);
  background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: width .2s var(--ease), min-width .2s var(--ease);
}

#sidebar-header {
  height: 48px;
  display: flex; align-items: center;
  padding: 0 16px;
  font-size: 15px; font-weight: 700; color: var(--header);
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(4,4,5,.2), 0 1.5px 0 rgba(6,6,7,.05);
  flex-shrink: 0; justify-content: space-between;
  transition: background .1s; z-index: 5;
}
#sidebar-header:hover { background: var(--hover-bg); }
.server-name-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#sidebar-header.has-banner {
  height: 135px;
  align-items: flex-end;
  padding: 0 12px 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  position: relative;

  transition: none;
}
#sidebar-header.has-banner:hover { background-color: transparent; }

#sidebar-header.has-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(0,0,0,0)   0%,
              rgba(0,0,0,.10) 40%,
              rgba(0,0,0,.70) 100%);
  pointer-events: none;
}
#sidebar-header.has-banner .server-name-text,
#sidebar-header.has-banner svg {
  position: relative; z-index: 1;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}

/* Server dropdown */
.server-dropdown {
  display: none;   /* opened via inline display:block — never visible by default */
  position: absolute; top: 52px; left: 8px; right: 8px;
  background: var(--sidebar-bg); border: 1px solid var(--separator); border-radius: 4px;
  padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.5);
  z-index: 200; animation: chordPopMenu .14s var(--ease-menu-open);
}
@keyframes ddFade { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.sd-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 8px 10px; border-radius: 4px;
  font-size: 14px; cursor: pointer; color: var(--text);
  transition: background .08s;
}
.sd-item .sd-icon { display: flex; align-items: center; flex: none; }
.sd-item .sd-icon img { width: 18px; height: 18px; object-fit: contain; opacity: .8; }
.sd-item:hover .sd-icon img { opacity: 1; }
.sd-item:hover { background: var(--brand); color: #fff; }
.sd-item.danger:hover { background: var(--red); }
.sd-sep { height: 1px; background: var(--separator); margin: 4px 0; }

/* Channel list */
#channel-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0 16px; }

.channel-category { margin-top: 8px; }
.channel-category.uncategorized { margin-top: 4px; }
.category-header {
  display: flex; align-items: center;
  padding: 0 8px; height: 28px;
  cursor: pointer; color: var(--muted);
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  gap: 4px; border-radius: 4px; margin: 0 4px;
  transition: color .08s;
}
.category-header:hover { color: var(--header); }
.cat-arrow { width: 12px; height: 12px; flex-shrink: 0; transition: transform .15s; display: flex; align-items: center; justify-content: center; }
.category-header.collapsed .cat-arrow { transform: rotate(-90deg); }
.cat-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-add {
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  border-radius: 3px; opacity: 0; transition: opacity .1s, color .1s; color: var(--muted);
}
.category-header:hover .cat-add { opacity: 1; }
.cat-add:hover { color: var(--header); }

.channel-items { overflow: hidden; }

.channel-item {
  display: flex; align-items: center;
  height: 34px; border-radius: 4px;
  cursor: pointer; color: var(--muted);
  font-size: 15px; font-weight: 500;
  gap: 6px; position: relative;
  margin: 1px 8px; padding: 0 8px;
  transition: background .08s, color .08s;
}
.channel-item:hover         { background: var(--hover-bg); color: var(--text); }
.channel-item.active        { background: var(--active-bg); color: var(--header); }
.channel-item[draggable="true"] { cursor: grab; }
.channel-item.dragging      { opacity: .4; }
.channel-item.ch-drop-before { box-shadow: inset 0 2px 0 var(--brand); }
.channel-item.ch-drop-after  { box-shadow: inset 0 -2px 0 var(--brand); }
.category-header[draggable="true"] { cursor: grab; }
.category-header.dragging        { opacity: .4; }
.category-header.cat-drop-target { background: var(--hover-bg); box-shadow: inset 0 0 0 2px var(--brand); }
.category-header.cat-drop-before { box-shadow: inset 0 2px 0 var(--brand); }
.category-header.cat-drop-after  { box-shadow: inset 0 -2px 0 var(--brand); }

.channel-item.has-unread    { color: var(--header); font-weight: 700; }
.channel-item.has-unread .ch-name { color: var(--header); }
.channel-item.has-unread::before {
  content:''; position:absolute; left:-8px; top:50%; transform:translateY(-50%);
  width:4px; height:8px; background:#fff; border-radius:0 4px 4px 0;
}
.ch-icon { width:20px; height:20px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:inherit; }
.ch-icon-img { width:20px; height:20px; object-fit:contain; opacity:.8; }
.channel-item.active .ch-icon-img, .channel-item:hover .ch-icon-img { opacity:1; }
.ch-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-actions { display:none; gap:2px; align-items:center; }
.channel-item:hover .ch-actions { display:flex; }
.ch-act-btn {
  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  border-radius:3px; color:var(--muted); transition:color .08s, background .08s;
}
.ch-act-btn:hover { color:var(--header); background:rgba(255,255,255,.1); }

/* Voice users under voice channel */
.voice-user-row {
  display:flex; align-items:center; height:26px; gap:8px;
  padding:0 8px; margin:1px 8px 1px 36px;
  border-radius:4px; cursor:pointer; color:var(--muted); font-size:13px;
  transition:background .08s, color .08s;
}
.voice-user-row .vu-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.voice-user-row .vu-badges {
  display:flex; align-items:center; gap:4px; flex-shrink:0;
}

.voice-user-row .vu-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; color:var(--muted);
}
.voice-user-row .vu-badge.vu-badge-srv { color:var(--red); }
.voice-user-row .vu-badge.vu-badge-cam  { color:var(--green, #23a55a); }
.voice-user-row .vu-badge.vu-badge-live { color:#f23f43; }
.voice-user-row .vu-badge svg { width:14px; height:14px; }
.voice-user-row:hover { background:var(--hover-bg); color:var(--text); }

.voice-user-row .vu-game {
  width:16px; height:16px; border-radius:3px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden; background:#0b0b0f; font-size:11px; line-height:1;
}
.voice-user-row .vu-game img { width:100%; height:100%; object-fit:contain; display:block; }
.voice-user-row .vu-game.vu-game-emoji { background:transparent; }
.vu-av {
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; color:#fff; flex-shrink:0;
}

/* ── User panel ── */
#user-panel {
  height:52px; background:var(--dark-bg);
  display:flex; align-items:center; padding:0 8px; gap:4px; flex-shrink:0;
}
.up-av-wrap { position:relative; width:32px; height:32px; flex-shrink:0; cursor:pointer; }
.up-av {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:#fff;
}
.status-dot {
  position:absolute; bottom:-2px; right:-2px; width:10px; height:10px;
  border-radius:50%; border:2px solid var(--dark-bg);
}
.status-dot.online  { background:var(--green); }
.status-dot.idle    { background:var(--yellow); }
.status-dot.dnd     { background:var(--red); }
.status-dot.offline { background:#747F8D; }

.up-info-wrap {
  flex:1; padding:2px 4px; border-radius:4px; cursor:pointer; min-width:0;
  transition:background .08s;
}
.up-info-wrap:hover { background:var(--hover-bg); }
.up-name { font-size:13px; font-weight:600; color:var(--header); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.2; }
.up-tag  { font-size:11px; color:var(--muted); line-height:1.2; }

.up-controls { display:flex; gap:2px; }
.uc-btn { position: relative; }
.uc-bell-badge { position:absolute; top:-1px; right:-1px; background:var(--red); color:#fff; font-size:9px; font-weight:700; min-width:14px; height:14px; padding:0 3px; border-radius:7px; display:flex; align-items:center; justify-content:center; line-height:1; pointer-events:none; }
.up-status { font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.2; }
.uc-btn {
  width:32px; height:32px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--muted); background:none; border:none;
  transition:background .08s, color .08s; font-family:inherit;
}
.uc-btn:hover           { background:var(--hover-bg); color:var(--header); }
.uc-btn.toggled         { color:var(--red); }
.uc-btn.toggled:hover   { color:var(--red); }

/* ════════════════════════════
   CHAT
════════════════════════════ */

#main-col {
  flex:1; display:flex; flex-direction:column;
  min-width:0; overflow:hidden;
}
#main-row {
  flex:1; display:flex;
  min-height:0; min-width:0;
}
#chat {
  flex:1; display:flex; flex-direction:column;
  background:var(--chat-bg); overflow:hidden; min-width:0;
}

#chat-header {
  height:48px; display:flex; align-items:center;
  padding:0 16px; gap:8px; flex-shrink:0;
  box-shadow:0 1px 0 rgba(4,4,5,.2);
  background:var(--chat-bg); z-index:10;
}
.chat-header-icon { color:var(--muted); flex-shrink:0; display:flex; }
#chat-channel-name { font-size:15px; font-weight:700; color:var(--header); flex-shrink:0; }
.chat-header-divider { width:1px; height:24px; background:var(--separator); flex-shrink:0; }
#chat-channel-topic { font-size:14px; color:var(--muted); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; cursor:pointer; }
#chat-channel-topic:hover { color:var(--text); }
.chat-header-tools { display:flex; align-items:center; gap:4px; flex-shrink:0; }
/* Header title block: name (+ mobile chevron) over a subline (member count /
   status / topic). Row on desktop (≈ inline), column on mobile. */
.ch-titlewrap { display:flex; align-items:center; gap:8px; min-width:0; }
.ch-name-line { display:flex; align-items:center; gap:4px; min-width:0; }
.ch-chevron { color:var(--muted); font-size:16px; display:none; flex-shrink:0; }
.ch-sub { font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.m-menu-badge { position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 4px;
  background:var(--red); color:#fff; font-size:10px; font-weight:700; border-radius:9px;
  display:flex; align-items:center; justify-content:center; line-height:1; border:2px solid var(--chat-bg); pointer-events:none; }
.header-tool-btn { width:24px; height:24px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); border-radius:4px; transition:color .08s; }
.header-tool-btn:hover { color:var(--header); }
.header-tool-btn.active { color:var(--header); }
.header-search-bar { background:var(--rail-bg); border-radius:6px; padding:0 10px; height:28px; display:flex; align-items:center; gap:6px; width:240px; transition:width .18s var(--ease, ease); }
.header-search-bar:focus-within { width:340px; box-shadow:0 0 0 1.5px var(--brand); }
.header-search-bar input { background:none; border:none; outline:none; color:var(--text); font-size:13.5px; width:100%; font-family:inherit; cursor:text; }
.header-search-bar input::placeholder { color:var(--muted); overflow:hidden; text-overflow:ellipsis; }

/* ── Voice Panel ── */
#voice-bar {
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-top: 1px solid rgba(255,255,255,.06);
}

.vc-panel { padding: 6px 8px 4px; }

.vc-panel-top {
  background: rgba(0,0,0,.2);
  border-radius: 6px 6px 0 0;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vc-panel-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

/* Signal bars animation */
.vc-signal-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.vc-bar {
  width: 3px;
  background: var(--green);
  border-radius: 1px;
  animation: vcPulse 1.4s ease-in-out infinite;
}
.vc-bar1 { height: 5px;  animation-delay: 0s; }
.vc-bar2 { height: 9px;  animation-delay: .2s; }
.vc-bar3 { height: 13px; animation-delay: .4s; }
@keyframes vcPulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .45; }
}

.vc-panel-text { flex: 1; min-width: 0; }
.vc-connected-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  line-height: 1.2;
}
.vc-channel-name {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

/* Control buttons row */
.vc-panel-controls {
  display: flex;
  gap: 0;
  padding: 2px 0;
  background: rgba(0,0,0,.2);
  border-radius: 0 0 6px 6px;
  border-top: 1px solid rgba(255,255,255,.04);
}

.vc-pc-btn {
  flex: 1;
  height: 44px;
  background: none; border: none;
  cursor: pointer;
  color: var(--muted);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  border-radius: 4px;
  transition: color .1s, background .1s;
  font-family: inherit;
}
.vc-pc-btn:hover { color: var(--text); background: var(--hover-bg); }
.vc-pc-btn.muted {
  color: var(--red);
  background: rgba(237,66,69,.12);
}
.vc-pc-btn.muted:hover { background: rgba(237,66,69,.22); }
.vc-pc-btn.active {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 18%, transparent);
}
.vc-pc-btn.active:hover { background: color-mix(in srgb, var(--brand) 28%, transparent); }
.vc-pc-btn.vc-pc-leave { color: var(--red); }
.vc-pc-btn.vc-pc-leave:hover { color: #fff; background: rgba(237,66,69,.18); }

.vc-pc-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
}

/* ── Voice settings tab helpers ── */
.fm-section-h3 {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.vf-range-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vf-range-icon { font-size: 16px; flex-shrink: 0; }
.vf-range-val {
  min-width: 44px;
  text-align: right;
  color: var(--header);
  font-size: 13px;
  font-weight: 600;
}
.vf-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ── Toggle switch ── */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px; height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-switch input { display: none; }
.toggle-slider {
  position: absolute; inset: 0;
  background: rgba(255,255,255,.15);
  border-radius: 12px;
  transition: background .2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.toggle-switch input:checked + .toggle-slider { background: var(--green); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* ── Voice Channel View ── */
/* ── Voice channel full view ── */
.vc-view {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
}
.vc-view-top {
  text-align: center; padding: 20px 24px 12px; flex-shrink: 0;
}
.vc-view-title {
  font-size: 20px; font-weight: 700; color: var(--header); margin-bottom: 3px;
}
.vc-view-subtitle { font-size: 12px; color: var(--muted); }

.vc-participants-grid {
  display: flex; flex-wrap: wrap;
  gap: 12px; justify-content: center; align-items: flex-start;
  flex: 1; width: 100%; overflow-y: auto;
  padding: 12px 20px;
  align-content: flex-start;
}
.vc-empty-msg { color: var(--muted); font-size: 15px; margin-top: 16px; width: 100%; text-align: center; }

/* Not-joined / empty voice landing */
.vc-view-empty { align-items: center; justify-content: center; }
.vc-hero {
  margin: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; text-align: center; padding: 24px;
}
.vc-hero-av {
  width: 80px; height: 80px; border-radius: 50%;
  object-fit: cover; margin-bottom: 6px;
}
.vc-hero-glyph {
  width: 80px; height: 80px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--hover-bg); color: var(--header);
  font-size: 34px; margin-bottom: 6px;
}
.vc-hero-glyph svg { width: 38px; height: 38px; }
.vc-hero-title { font-size: 22px; font-weight: 800; color: var(--header); }
.vc-hero-sub { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.vc-hero-join {
  padding: 10px 22px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--brand); color: #fff;
  font-size: 15px; font-weight: 700; font-family: inherit;
  transition: filter .12s, transform .08s;
}
.vc-hero-join:hover { filter: brightness(1.08); }
.vc-hero-join:active { transform: scale(.97); }

/* Rectangular participant cards */
.vc-card {
  position: relative;
  width: 220px; height: 160px;
  background: #18191c;
  border-radius: 8px; overflow: hidden;
  border: 2px solid transparent;
  transition: border-color .15s, box-shadow .15s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vc-card.vc-speaking {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(35,165,90,.22);
}
.vc-card-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.vc-card-avatar {
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.vc-card-footer {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  padding: 20px 8px 6px;
  display: flex; align-items: center; justify-content: space-between;
}
.vc-card-name {
  font-size: 12px; font-weight: 600; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 160px;
}
.vc-card-badges { display:flex; align-items:center; gap:6px; flex-shrink:0; }

.vc-card-mic-off,
.vc-card-deaf    { color: rgba(255,255,255,.55); display:flex; align-items:center; }
.vc-card-mic-off.is-srv,
.vc-card-deaf.is-srv { color: var(--red); }
.vc-card-mic-off svg,
.vc-card-deaf svg { width:14px; height:14px; }

.vc-card-stop-watch {
  background: rgba(0,0,0,.55); color: #fff;
  border: none; cursor: pointer;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 12px; line-height: 1; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
  flex-shrink: 0;
}
.vc-card-stop-watch:hover { background: var(--red); }

/* Voice channel action buttons */
.vc-view-actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 8px 20px 10px; flex-shrink: 0;
}
.vc-view-btn {
  padding: 8px 18px;
  border-radius: 6px; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit;
  background: var(--hover-bg); color: var(--text);
  transition: background .1s, color .1s;
}
.vc-view-btn:hover { background: rgba(255,255,255,.15); color: var(--header); }
.vc-view-btn.primary { background: var(--brand); color: #fff; }
.vc-view-btn.primary:hover { background: var(--brand-hv); }

/* In-channel control bar */
.vc-controls {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 20px; flex-shrink: 0;
  background: var(--dark-bg);
  border-top: 1px solid rgba(255,255,255,.06);
}
.vc-ctrl-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--hover-bg); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s;
}
.vc-ctrl-btn:hover { background: rgba(255,255,255,.18); color: var(--header); }
.vc-ctrl-btn.active { background: color-mix(in srgb, var(--brand) 25%, transparent); color: var(--brand); }
.vc-ctrl-btn.muted  { color: var(--red); }
.vc-ctrl-btn svg { width: 18px; height: 18px; }
.vc-ctrl-disconnect {
  width: 40px; height: 40px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s;
}
.vc-ctrl-disconnect:hover { background: #c0392b; }
.vc-ctrl-disconnect svg { width: 18px; height: 18px; }

.vc-stream-overlay {
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(rgba(15,15,18,.6), rgba(15,15,18,.85));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  border-radius: 6px;
  padding: 16px;
}
.vc-stream-thumb {
  display: flex; align-items: center; justify-content: center;
  opacity: .9;
}
.vc-stream-thumb .av-img,
.vc-stream-thumb .av-initials {
  width: 56px !important; height: 56px !important; font-size: 22px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.vc-stream-broadcaster {
  color: #fff; font-size: 13px; font-weight: 600;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
  max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vc-watch-btn {
  padding: 8px 22px; border-radius: 20px;
  border: none; background: var(--brand);
  color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  font-family: inherit;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 45%, transparent);
}
.vc-watch-btn:hover  { background: var(--brand-hv); transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 60%, transparent); }
.vc-watch-btn:active { transform: scale(.97); }

.vc-ctrl-stop-stream {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px;
  border: none; border-radius: 20px; cursor: pointer;
  background: rgba(237,66,69,.18); color: var(--red);
  font-size: 13px; font-weight: 600; font-family: inherit;
  transition: background .12s, color .12s, transform .08s;
}
.vc-ctrl-stop-stream svg { width: 16px; height: 16px; }
.vc-ctrl-stop-stream:hover  { background: var(--red); color: #fff; }
.vc-ctrl-stop-stream:active { transform: scale(.97); }

.vc-card.vc-card-zoomed {
  position: fixed !important;

  top: 48px !important;

  left: 328px !important;

  right: 16px !important;

  bottom: 96px !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important; max-height: none !important;
  min-width: 0 !important;  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  z-index: 800 !important;
  border: 2px solid var(--brand) !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.6) !important;
  background: #18191c !important;
  overflow: hidden !important;
}
.vc-card.vc-card-zoomed .vc-card-video {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: contain !important; background: #000;
}
.vc-card.vc-card-zoomed .vc-card-avatar {
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) scale(2) !important;
  transform-origin: center !important;
}
.vc-card.vc-card-zoomed .vc-card-footer { padding: 32px 16px 16px; }
.vc-card.vc-card-zoomed .vc-card-name { font-size: 16px; max-width: none; }

@media (max-width: 1100px) {
  .vc-card.vc-card-zoomed {
    top: 48px !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 96px !important;
  }
}

body.in-vc-view #vc-local-camera,
body.in-vc-view #vc-local-camera-label,
body.in-vc-view #vc-local-screen,
body.in-vc-view #vc-local-screen-label,
body.in-vc-view [id^="vc-video-"] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   VOICE TAM EKRAN MODE
   ══════════════════════════════════════════════════════════════════════ */
.vc-view { position: relative; }

.vc-fs-btn {
  position: absolute; right: 18px; bottom: 84px; z-index: 825;
  display: flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px;
  border: none; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--sidebar-bg) 72%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--ds-stroke-strong, rgba(255,255,255,.12));
  color: var(--text);
  font-size: 13px; font-weight: 600; font-family: inherit;
  box-shadow: var(--ds-shadow-2, 0 6px 18px rgba(0,0,0,.4));
  transition: background .12s, color .12s, transform .08s, opacity .25s var(--ease, ease);
}
.vc-fs-btn:hover  { background: var(--hover-bg); color: var(--header); transform: translateY(-1px); }
.vc-fs-btn:active { transform: scale(.97); }
.vc-fs-btn svg { flex-shrink: 0; }

/* ── Stage 1 ── */
body.vc-fullscreen #titlebar,
body.vc-fullscreen #server-rail,
body.vc-fullscreen #left-col,
body.vc-fullscreen #chat-header,
body.vc-fullscreen #member-list,
body.vc-fullscreen #msg-search-panel { display: none !important; }
body.vc-fullscreen #app { padding-top: 0 !important; }
body.vc-fullscreen #messages { background: var(--dark-bg); padding: 0 !important; }
body.vc-fullscreen .vc-view { background: var(--dark-bg); }
body.vc-fullscreen .vc-view-actions { display: none; }

body.vc-fullscreen .vc-view-top {
  position: fixed; top: 12px; left: 16px; z-index: 820;
  text-align: left; padding: 0;
  transition: opacity .25s var(--ease, ease);
}
body.vc-fullscreen .vc-view-title { font-size: 15px; }
body.vc-fullscreen .vc-view-subtitle { display: none; }

body.vc-fullscreen .vc-controls {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  margin: 0; z-index: 830;
  transition: opacity .25s var(--ease, ease);
}
body.vc-fullscreen .vc-fs-btn { bottom: 26px; right: 22px; }
body.vc-fullscreen .vc-participants-grid { padding: 16px; gap: 14px; align-content: center; }

/* ── Stage 2 ── */
body.vc-fullscreen .vc-participants-grid .vc-card.vc-card-zoomed {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important; height: auto !important;
  margin: 0 !important; order: 0 !important; flex: none !important;
  border: none !important; border-radius: 0 !important;
  box-shadow: none !important;
  background: #000 !important;
  z-index: 760 !important;
}
body.vc-fullscreen .vc-participants-grid .vc-card.vc-card-zoomed .vc-card-video {
  object-fit: contain !important;
}

/* ── Filmstrip Overlay ── */
body.vc-fullscreen.vc-strip .vc-participants-grid {
  position: fixed !important; left: 0 !important; right: 0 !important;
  bottom: 80px !important; top: auto !important;
  height: 92px !important; padding: 0 12px !important; margin: 0 !important;
  flex-direction: row !important; flex-wrap: nowrap !important;
  justify-content: center !important; align-items: center !important;
  gap: 8px !important; z-index: 770 !important;
  overflow-x: auto !important; overflow-y: hidden !important;
  background: transparent !important;
  transition: opacity .25s var(--ease, ease);
}
body.vc-fullscreen.vc-strip .vc-participants-grid::-webkit-scrollbar { height: 0; }
body.vc-fullscreen.vc-strip .vc-card:not(.vc-card-zoomed) {
  width: 150px !important; height: 84px !important; min-width: 150px !important;
  flex: 0 0 auto !important; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
}

/* ── Auto-hide ── */
body.vc-idle.vc-fullscreen .vc-controls,
body.vc-idle.vc-fullscreen .vc-fs-btn,
body.vc-idle.vc-fullscreen .vc-view-top,

body.vc-idle.vc-fullscreen.vc-strip .vc-card:not(.vc-card-zoomed) {
  opacity: 0 !important; pointer-events: none !important;
}
body.vc-idle.vc-fullscreen { cursor: none; }

/* ─── Messages ─── */
#messages {
  flex:1; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column;
  padding-bottom:8px;

}

#messages.friends-view { padding-bottom: 0; }
#messages.friends-view .messages-inner { margin-top: 0; }
.messages-inner {
  display:flex; flex-direction:column;
  margin-top: auto;
}

.channel-welcome { padding:24px 16px 20px; border-bottom:1px solid var(--separator); margin-bottom:8px; }
.welcome-hash {
  width:68px; height:68px; border-radius:50%;
  background:linear-gradient(135deg, var(--brand) 0%, #eb459e 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:40px; font-weight:900; color:#fff; margin-bottom:16px;
}
.welcome-title { font-size:28px; font-weight:800; color:var(--header); margin-bottom:8px; }
.welcome-desc  { font-size:15px; color:var(--muted); }

.date-divider  { display:flex; align-items:center; padding:12px 16px 4px; gap:8px; }
.date-line     { flex:1; height:1px; background:var(--separator); }
.date-label    { font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap; }

/* Message groups */
.msg-group { position:relative; padding:2px 0; border-radius:6px; transition:background .12s var(--ease); }

.msg-group:hover { background:color-mix(in srgb, var(--text) 4%, transparent); }

.msg-first { display:flex; align-items:flex-start; padding:4px 16px 2px; margin-top:14px; gap:16px; }
.msg-avatar {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; color:#fff; cursor:pointer;
  margin-top:2px; transition:opacity .1s, transform .1s;
}
.msg-avatar:hover { opacity:.85; transform:scale(1.05); }

.msg-body     { flex:1; min-width:0; }
.msg-meta     { display:flex; align-items:baseline; gap:8px; margin-bottom:2px; }
.msg-author   { font-size:15px; font-weight:600; cursor:pointer; line-height:1.375; }
.msg-author:hover { text-decoration:underline; }
.msg-ts       { font-size:11px; color:var(--muted); line-height:1.375; user-select:none; }
.msg-edited   { font-size:11px; color:var(--muted); margin-left:4px; }

.msg-crosspost-badge { display:inline-flex; align-items:center; height:15px; padding:0 5px; background:var(--brand); color:#fff; font-size:10px; font-weight:700; letter-spacing:.4px; border-radius:4px; text-transform:uppercase; align-self:center; }
.msg-xp-chan { font-size:12px; color:var(--muted); font-weight:500; }

.msg-cont { padding:2px 16px 2px 72px; position:relative; }
.msg-side-ts { position:absolute; left:20px; top:50%; transform:translateY(-50%); font-size:10px; color:var(--muted); opacity:0; user-select:none; white-space:nowrap; pointer-events:none; transition:opacity .1s; }
.msg-group:hover .msg-side-ts { opacity:1; }

.msg-text { font-size:15px; color:var(--text); line-height:1.375; word-break:break-word; white-space:pre-wrap; }
/* Markdown */
.md-h1 { display:inline-block; font-size:24px; font-weight:700; color:var(--header); line-height:1.25; margin:6px 0 2px; }
.md-h2 { display:inline-block; font-size:20px; font-weight:700; color:var(--header); line-height:1.25; margin:6px 0 2px; }
.md-h3 { display:inline-block; font-size:16px; font-weight:700; color:var(--header); line-height:1.25; margin:6px 0 2px; }
.md-subtext { display:inline-block; font-size:12px; color:var(--muted); }
.md-quote {
  display:inline-block; padding-left:10px; color:var(--header);
  border-left:4px solid var(--separator);
}
.md-spoiler {
  background:var(--input-bg); color:transparent; border-radius:3px; padding:0 2px; cursor:pointer;
  transition:color .1s;
  text-shadow: none;
}
.md-spoiler.revealed { background:var(--active-bg); color:var(--text); cursor:default; }
.code-block {
  display:block; background:var(--input-bg); border:1px solid var(--separator);
  border-radius:4px; padding:8px 10px; margin:4px 0;
  font-family:ui-monospace, Consolas, monospace; font-size:13px;
  white-space:pre-wrap; word-break:break-word; max-width:100%;
}
.msg-text.selectable { user-select:text; }
.msg-text.emoji-only { font-size:36px; line-height:1.2; }
.msg-text a { color:#00AFF4; text-decoration:none; }
.msg-text a:hover { text-decoration:underline; }

.mention {
  background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand);
  padding: 1px 4px; border-radius: 3px; cursor: pointer;
  font-weight: 600; transition: background .1s, color .1s;
}
.mention:hover { background: var(--brand); color: #fff; }
.mention-everyone {
  background: rgba(250,168,26,.25); color: #faa81a;
}
.mention-everyone:hover { background: rgba(250,168,26,.5); color: var(--header); }

.msg-group.mentioned {
  background: rgba(250,168,26,.07);
  position: relative;
  padding-left: 6px;
}
.msg-group.mentioned::before {
  content: '';
  position: absolute;
  left: 0; top: 2px; bottom: 2px;
  width: 3px;
  border-radius: 2px;
  background: #faa81a;
}
.code-inline { background:var(--input-bg); border:1px solid var(--separator); padding:1px 6px; border-radius:3px; font-family:'Consolas','Cascadia Code','Monaco',monospace; font-size:87.5%; }
.code-block  { background:var(--input-bg); border:1px solid var(--separator); padding:12px 14px; border-radius:4px; font-family:'Consolas','Cascadia Code','Monaco',monospace; font-size:14px; margin-top:4px; overflow-x:auto; border-left:4px solid var(--brand); white-space:pre; }

/* Reactions */
.msg-reactions { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.reaction {
  display:flex; align-items:center; gap:5px;
  background:var(--hover-bg); border:1px solid var(--separator);
  border-radius:12px; padding:3px 9px; font-size:13px; cursor:pointer;
  transition:background .1s,border-color .1s,transform .08s; user-select:none;
}
.reaction:hover { background:color-mix(in srgb, var(--brand) 24%, transparent); border-color:var(--brand); }
.reaction:active { transform:scale(.94); }
.reaction.me    { background:color-mix(in srgb, var(--brand) 30%, transparent); border-color:var(--brand); }
.reaction-count { font-size:13px; font-weight:600; color:var(--text); }

.msg-toolbar {
  position:absolute; right:14px; top:-18px; display:none;
  background:var(--sidebar-bg); border:1px solid var(--ds-stroke-strong, var(--separator));
  border-radius:var(--ds-radius-m, 12px); box-shadow:var(--ds-shadow-3, 0 6px 18px rgba(0,0,0,.4));
  z-index:100; padding:3px; gap:1px;
}
.msg-group:hover .msg-toolbar { display:flex; animation:toolPop .14s var(--ease-menu-open); }
@keyframes toolPop { from{opacity:0;transform:translateY(4px) scale(.96)} to{opacity:1;transform:none} }
.msg-tool {
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); cursor:pointer; font-size:16px; border-radius:var(--ds-radius-s, 9px);
  transition:background .12s var(--ease), color .12s var(--ease), transform .1s var(--ease-out);
}
.msg-tool:hover  { background:var(--hover-bg); color:var(--header); }
.msg-tool:active { transform:scale(.88); }

.msg-tool-shift { display: none; }
body.shift-down .msg-group:hover .msg-toolbar .msg-tool-shift { display: flex; }
body.shift-down .msg-group:hover .msg-toolbar { box-shadow: var(--ds-shadow-3, 0 6px 18px rgba(0,0,0,.4)), 0 0 0 1px var(--brand); }

/* Typing */
#typing-indicator { padding:2px 16px 6px; font-size:13px; color:var(--muted); min-height:28px; display:flex; align-items:center; gap:6px; flex-shrink:0; }
.typing-dots { display:flex; gap:3px; align-items:center; }
.typing-dot  { width:5px; height:5px; border-radius:50%; background:var(--muted); animation:bounce 1.2s infinite ease-in-out; }
.typing-dot:nth-child(2) { animation-delay:.18s; }
.typing-dot:nth-child(3) { animation-delay:.36s; }
@keyframes bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} }

/* ─── Input ─── */
#input-area { padding:0 16px 24px; flex-shrink:0; }
.input-wrapper { background:var(--input-bg); border-radius:8px; display:flex; align-items:flex-end; min-height:44px; position:relative; }
.msg-char-counter {
  position: absolute; bottom: 4px; right: 8px;
  font-size: 11px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  background: var(--input-bg);
  padding: 0 4px; border-radius: 4px;
  user-select: none;
  z-index: 1;
}
.msg-char-counter.msg-char-warn { color: #f0b232; }
.msg-char-counter.msg-char-over { color: var(--red); font-weight: 700; }
#input-area.input-disabled .input-wrapper { opacity: .55; cursor: not-allowed; }
#input-area.input-disabled #message-input { cursor: not-allowed; color: var(--muted); }
#input-area.input-disabled .input-btn { pointer-events: none; opacity: .5; }
#input-area.input-disabled #message-input::placeholder { color: var(--muted); font-style: italic; }
.input-btn { width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:var(--muted); cursor:pointer; flex-shrink:0; border-radius:4px; background:none; border:none; font-family:inherit; transition:color .1s; }
.input-btn:hover { color:var(--header); }
.send-btn:hover  { color:var(--brand); }
.input-mention-hl {
  background:color-mix(in srgb, var(--brand) 25%, transparent); border-radius:3px; color:transparent;
}
#message-input { display:block; width:100%; background:transparent; border:none; outline:none; color:var(--text); font-size:15px; padding:11px 0; font-family:inherit; line-height:1.375; resize:none; max-height:300px; overflow-y:auto; position:relative; z-index:1; }
#message-input::placeholder { color:var(--muted); }
.input-tools { display:flex; align-items:center; padding-right:4px; }

/* ─── Announcement follow bar ─── */
.announce-follow-bar {
  display:flex; align-items:center; gap:12px;
  background:var(--input-bg); border-radius:8px;
  padding:14px 16px; min-height:44px;
}
.afb-ico  { color:var(--brand); flex-shrink:0; }
.afb-text { flex:1; font-size:14px; color:var(--muted); }
.afb-btn {
  flex-shrink:0; background:var(--brand); color:#fff; border:none;
  padding:8px 18px; border-radius:8px; font-size:14px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:filter .12s, transform .06s;
}
.afb-btn:hover  { filter:brightness(1.1); }
.afb-btn:active { transform:translateY(1px); }
/* Header "Takip Et" pill */
.header-follow-btn {
  background:var(--brand); color:#fff; border:none;
  padding:5px 14px; border-radius:8px; font-size:13px; font-weight:600;
  cursor:pointer; font-family:inherit; margin-right:4px; transition:filter .12s;
}
.header-follow-btn:hover { filter:brightness(1.1); }
/* Follow/unfollow manager */
.fa-follow-list { display:flex; flex-direction:column; gap:6px; }
.fa-follow-row  { display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--input-bg); border-radius:8px; }
.fa-follow-info { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.fa-follow-srv  { font-size:13px; font-weight:600; color:var(--header); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fa-follow-ch   { font-size:12px; color:var(--muted); }
.fa-unfollow-btn {
  flex-shrink:0; background:transparent; color:var(--red); border:1px solid var(--red);
  padding:5px 12px; border-radius:6px; font-size:12px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:background .12s, color .12s;
}
.fa-unfollow-btn:hover    { background:var(--red); color:#fff; }
.fa-unfollow-btn:disabled { opacity:.6; cursor:default; }
.fa-sep { height:1px; background:rgba(255,255,255,.06); margin:14px 0 4px; }

/* ════════════════════════════
   MEMBER LIST
════════════════════════════ */
#member-list { width:var(--member-w,240px); min-width:var(--member-w,240px); background:var(--sidebar-bg); overflow-y:auto; padding:8px; transition:width .2s, min-width .2s, opacity .2s; }
#member-list.hidden { width:0; min-width:0; opacity:0; padding:0; overflow:hidden; }

/* ── Draggable panel resizers ── */
.col-resizer { position: fixed; width: 8px; z-index: 50; cursor: col-resize; display: none; }
.col-resizer::before { content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:2px; background:transparent; border-radius:2px; transition:background .12s; }
.col-resizer:hover::before, .col-resizer.dragging::before { background: var(--brand); }
body.resizing-x { cursor: col-resize !important; user-select: none !important; }

body.resizing-x #sidebar, body.resizing-x #left-col, body.resizing-x #member-list { transition: none !important; }

/* ── Blocking ── */
.dm-blocked-error {
  margin: 8px 16px; padding: 9px 13px; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: #f15a5a;
  background: rgba(237,66,69,.08); border: 1px solid rgba(237,66,69,.28);
  display: flex; align-items: center; gap: 8px;
}
.ucc-btn.is-blocked { color: #f15a5a; }

/* ── Channel info / media panel ── */
#channel-info {
  width: 300px; min-width: 300px; background: var(--sidebar-bg);
  display: flex; flex-direction: column; overflow: hidden;
  transition: width .2s, min-width .2s, opacity .2s;
}
#channel-info.hidden { width: 0; min-width: 0; opacity: 0; overflow: hidden; }
.ci-head { display: flex; align-items: center; gap: 8px; padding: 16px 16px 8px; flex-shrink: 0; }
.ci-hash { color: var(--muted); font-size: 20px; font-weight: 600; line-height: 1; }
.ci-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; color: var(--header); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-close { width: 28px; height: 28px; border: none; background: none; color: var(--muted); border-radius: 6px; cursor: pointer; font-size: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background .1s, color .1s; }
.ci-close:hover { background: var(--hover-bg); color: var(--header); }
.ci-topic { padding: 0 16px 14px; font-size: 13px; color: var(--muted); line-height: 1.45; border-bottom: 1px solid var(--separator); }
.ci-tabs { display: flex; gap: 2px; padding: 8px 10px; flex-shrink: 0; border-bottom: 1px solid var(--separator); }
.ci-tab { flex: 1; padding: 7px 6px; border: none; background: none; cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; font-family: inherit; border-radius: var(--ds-radius-s, 8px); transition: background .12s, color .12s; display: flex; align-items: center; justify-content: center; gap: 5px; }
.ci-tab:hover { background: var(--hover-bg); color: var(--text); }
.ci-tab.active { background: var(--active-bg, var(--hover-bg)); color: var(--header); }
.ci-tab span { font-size: 11px; opacity: .7; }
.ci-body { flex: 1; overflow-y: auto; padding: 12px; }
.ci-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 40px 12px; }
.ci-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ci-media-cell { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--input-bg, #0b0b14); }
.ci-media-cell img, .ci-media-cell video { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .12s; }
.ci-media-cell:hover img, .ci-media-cell:hover video { opacity: .82; }
.ci-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; text-shadow: 0 1px 5px rgba(0,0,0,.6); pointer-events: none; }
.ci-list { display: flex; flex-direction: column; gap: 4px; }
.ci-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--ds-radius-s, 8px); text-decoration: none; color: var(--text); transition: background .12s; }
.ci-row:hover { background: var(--hover-bg); }
.ci-row-ico { flex-shrink: 0; font-size: 16px; line-height: 1; }
.ci-row-txt { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-section-title { padding:16px 8px 4px; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; user-select:none; }
.member-item { display:flex; align-items:center; padding:4px 8px; height:42px; border-radius:4px; cursor:pointer; gap:10px; transition:background .08s; }
.member-item:hover { background:var(--hover-bg); }

.m-av-wrap { position:relative; display:inline-block; flex-shrink:0; line-height:0; }
.m-av { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; }
.m-status { position:absolute; bottom:0; right:0; width:12px; height:12px; border-radius:50%; border:2px solid var(--sidebar-bg); box-sizing:content-box; }
.m-status.online  { background:var(--green); }
.m-status.idle    { background:var(--yellow); }
.m-status.dnd     { background:var(--red); }
.m-status.offline { background:#747F8D; }
.m-info { flex:1; min-width:0; }

.m-name { font-size:15px; font-weight:600; color:var(--header); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.25; transition:color .08s; }
.member-item:hover .m-name { color:var(--header); }
.m-sub  { font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.2; }
.member-item.dimmed .m-name { color:var(--muted); }
.member-item.dimmed .m-av   { opacity:.5; }
.m-sub { line-height:1.2; }

/* ════════════════════════════
   DM PROFILE PANEL
════════════════════════════ */
.dm-profile-panel { display:flex; flex-direction:column; height:100%; min-height:0; }
.dpp-scroll { flex:1; overflow-y:auto; min-height:0; }
.dpp-banner { height:88px; flex-shrink:0; }
.dpp-av-wrap { padding:0 14px; margin-top:-40px; margin-bottom:6px; }
.dpp-av-border { position:relative; display:inline-block;
  border:6px solid var(--sidebar-bg); border-radius:50%; background:var(--sidebar-bg); }
.dpp-av-border img, .dpp-av-border .av-img { width:76px; height:76px; border-radius:50%; object-fit:cover; display:block; }
.dpp-av-border .av-initials { width:76px !important; height:76px !important; font-size:30px !important; }
.dpp-body { padding:4px 16px 16px; }
.dpp-display-name { font-size:20px; font-weight:700; color:var(--header); line-height:1.2; }
.dpp-username-row { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:2px; }
.dpp-username { font-size:13px; color:var(--muted); }
.dpp-badges-inline { display:inline-flex; align-items:center; gap:4px; }
.dpp-badges-inline > * { transform: scale(0.85); transform-origin: left center; }
.dpp-section { margin-top:14px; padding-top:14px; border-top:1px solid var(--separator); }
.dpp-section-title { font-size:12px; font-weight:700; color:var(--header); text-transform:none;
  letter-spacing:0; margin-bottom:4px; }
.dpp-bio { font-size:13px; color:var(--text); line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.dpp-date-val { font-size:13px; color:var(--text); }
.dpp-add-btn { width:100%; padding:8px; border-radius:4px; border:none; background:var(--brand);
  color:#fff; font-size:13px; font-weight:600; cursor:pointer; transition:background .1s; }
.dpp-add-btn:hover { background:var(--brand-hv); }
.dpp-view-full {
  flex-shrink:0; margin:0; padding:12px 16px;
  background:var(--sidebar-bg); border:none; border-top:1px solid var(--separator);
  color:var(--brand); font-size:13px; font-weight:600; cursor:pointer;
  text-align:center; transition:background .1s;
}
.dpp-view-full:hover { background:var(--hover-bg); }

/* ════════════════════════════
   ADMIN: BADGE LIST ROW + DRAG HANDLE
════════════════════════════ */
.badge-row[draggable="true"] { cursor: grab; }
.badge-row.dragging          { opacity: .4; }
.badge-row .badge-drag {
  width: 18px; text-align: center; color: var(--muted);
  font-size: 18px; letter-spacing: -2px; user-select: none;
  cursor: grab;
}
.badge-row .badge-drag:hover { color: var(--text); }

/* ════════════════════════════
   AVATAR CROP MODAL
════════════════════════════ */
.crop-modal { max-width: 360px; }
.crop-viewport {
  position: relative; overflow: hidden;
  background: #000;
  border-radius: 4px;
  margin: 0 auto 12px;
  user-select: none;
  -webkit-user-drag: none;
}
.crop-viewport #crop-img {
  position: absolute; cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  max-width: none;
}
.crop-viewport .crop-mask {
  position: absolute; inset: 0;
  pointer-events: none;

  /* closest-side → the clear circle radius = viewport half-width (the inscribed
     circle), so the bright area lines up exactly with the ring and the saved crop. */
  background:
    radial-gradient(circle closest-side at center,
      transparent 0,
      transparent 99%,
      rgba(0,0,0,.62) 100%);
}
.crop-viewport .crop-mask::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.85) inset;
}
/* Rectangular (banner) crop — the whole viewport is the crop, framed by a ring */
.crop-viewport.rect .crop-frame {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
}
.crop-controls { display: flex; align-items: center; gap: 12px; margin: 12px 0 16px; }
.crop-controls span { font-size: 13px; color: var(--muted); flex-shrink: 0; }
.crop-controls input[type="range"] { flex: 1; }

/* ════════════════════════════
   JUMP TO PRESENT BUTTON
════════════════════════════ */
.jump-to-present-btn {
  position: absolute;
  bottom: 100px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: var(--brand); color: #fff;
  border: none; border-radius: 16px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  z-index: 50;
  animation: fadeIn .12s ease;
  transition: background .1s;
}
.jump-to-present-btn:hover { background: var(--brand-hv); }

/* ════════════════════════════
   MESSAGE LINKS
════════════════════════════ */
.msg-link { color: #00aff4; text-decoration: none; cursor: pointer; word-break: break-all; }
.msg-link:hover { text-decoration: underline; }

/* ════════════════════════════
   IMAGE LIGHTBOX
════════════════════════════ */
.img-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .15s ease;
  overflow: hidden;
}
.img-lb-img {
  max-width: 90vw; max-height: 88vh;
  object-fit: contain;
  cursor: grab;
  transition: transform .08s ease-out;
  user-select: none; -webkit-user-drag: none;
}
.img-lb-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: none; color: #fff;
  font-size: 18px; cursor: pointer; transition: background .1s;
}
.img-lb-close:hover { background: rgba(255,255,255,.2); }
.img-lb-bar {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; background: rgba(30,31,34,.9);
  padding: 6px; border-radius: 24px;
}
.img-lb-btn {
  min-width: 40px; height: 36px; padding: 0 12px;
  background: transparent; border: none;
  border-radius: 18px; color: #fff; font-size: 16px; font-weight: 700;
  cursor: pointer; transition: background .1s;
}
.img-lb-btn:hover { background: rgba(255,255,255,.12); }

/* ════════════════════════════
   INVITE EMBED
════════════════════════════ */
/* ════════════════════════════
   INVITE MODAL
════════════════════════════ */
.invite-modal-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--input-bg); border: 1px solid var(--separator);
  border-radius: 4px; padding: 7px 10px;
  margin: 8px 0 10px;
}
.invite-modal-search svg { color: var(--muted); flex-shrink: 0; }
.invite-modal-search input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-family: inherit; font-size: 13px;
}
.invite-friend-list {
  max-height: 280px; overflow-y: auto;
  margin-bottom: 12px;
  border-radius: 4px;
}
.invite-friend-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; border-radius: 4px;
  transition: background .08s;
}
.invite-friend-row:hover { background: var(--hover-bg); }
.invite-friend-info { flex: 1; min-width: 0; }
.invite-friend-name { font-size: 14px; font-weight: 600; color: var(--header); }
.invite-friend-sub  { font-size: 12px; color: var(--muted); }
.invite-send-btn {
  padding: 6px 16px;
  background: transparent; color: var(--brand);
  border: 1px solid var(--brand); border-radius: 4px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: background .1s, color .1s;
  flex-shrink: 0;
}
.invite-send-btn:hover { background: var(--brand); color: #fff; }
.invite-send-btn.sent {
  background: var(--hover-bg); color: var(--muted); border-color: transparent;
  cursor: default;
}
.invite-send-btn:disabled { opacity: .7; }
.invite-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0 10px;
  font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em;
}
.invite-divider::before, .invite-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--separator);
}
.invite-field-wrap {
  display: flex; align-items: stretch;
  background: var(--input-bg); border-radius: 4px; overflow: hidden;
}
.invite-field-input {
  flex: 1; background: transparent; border: none; outline: none;
  padding: 10px 12px;
  color: var(--text); font-family: monospace; font-size: 13px;
}
.invite-field-input.invite-code-input {
  font-size: 17px; font-weight: 700; letter-spacing: 2px; text-align: center;
}
.invite-copy-icon-btn {
  background: var(--dark-bg); color: var(--text);
  border: none; padding: 0 14px;
  font-size: 16px; cursor: pointer;
  transition: background .1s, color .1s;
  font-family: inherit;
}
.invite-copy-icon-btn:hover { background: var(--brand); color: #fff; }

.invite-embed {
  background: var(--input-bg);
  border-radius: 4px;
  padding: 14px 16px;
  margin-top: 6px;
  max-width: 432px;
  width: 432px;
  border-left: 4px solid var(--brand);
  box-sizing: border-box;
  overflow: hidden;
}

/* Banner present → flush it to the very top of the card (no header above it,
   no top padding) so it doesn't overlap the "SOHBET DAVETİ" label. */
.invite-embed.has-banner { padding-top: 0; }
.invite-embed.has-banner .invite-embed-header { display: none; }
.invite-embed-banner {
  position: relative;
  height: 132px;
  margin: 0 -16px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Gentle fade into the card so the avatar + name stay legible below. */
.invite-embed-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 55%, var(--input-bg));
}

.invite-embed-row.has-banner {
  margin-top: 12px;
  align-items: flex-end;
}
.invite-embed-row.has-banner .invite-embed-icon {
  width: 64px; height: 64px;
  margin-top: -38px;
  border: 6px solid var(--input-bg);
  border-radius: 18px;
  background: var(--input-bg);
  box-sizing: content-box;
  flex-shrink: 0;
}

.invite-embed-row.has-banner .invite-embed-info { padding-bottom: 2px; }
.invite-embed-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.invite-embed-loading,
.invite-embed-empty {
  font-size: 13px;
  color: var(--muted);
  padding: 6px 0;
}
.invite-embed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.invite-embed-icon {
  width: 50px; height: 50px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--brand);
}
.invite-embed-icon-letter {
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #fff;
}
.invite-embed-info { flex: 1; min-width: 0; }
.invite-embed-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--header);
  word-break: break-word;
  line-height: 1.25;
}
.invite-embed-stats {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}
.invite-embed-stat { display:inline-flex; align-items:center; gap:6px; }
.ies-dot { width: 8px; height: 8px; border-radius: 50%; }
.ies-dot.online { background: #23a55a; }
.ies-dot.total  { background: #80848e; }
.invite-embed-created {
  font-size: 12px; color: var(--muted); margin-top: 2px;
}
.invite-embed-btn {
  width: 100%;
  padding: 9px 16px;
  background: #248046;
  color: #fff; border: none; border-radius: 4px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background .1s;
}
.invite-embed-btn:hover { background: #1a6334; }
.invite-embed-btn.joined { background: var(--input-bg); color: var(--text); }
.invite-embed-btn.joined:hover { background: var(--active-bg); }
.invite-embed-btn:disabled { opacity: .6; cursor: wait; }
.invite-embed-invalid { border-left-color: var(--red); opacity: .85; }

/* ════════════════════════════
   CONTEXT MENU
════════════════════════════ */

.ctx-menu { position:fixed; background:var(--sidebar-bg); border:1px solid var(--separator); border-radius:4px; padding:4px; min-width:210px; box-shadow:0 8px 24px rgba(0,0,0,.5); z-index:9999; animation:ctxIn .08s ease; }
@keyframes ctxIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
.ctx-item { display:flex; align-items:center; padding:8px 10px; border-radius:3px; font-size:14px; cursor:pointer; color:var(--text); gap:8px; transition:background .08s; user-select:none; }
.ctx-item:hover       { background:var(--brand); color:#fff; }
.ctx-item.danger:hover{ background:var(--red); }
.ctx-item .ctx-sc     { margin-left:auto; font-size:12px; color:var(--muted); }
.ctx-item:hover .ctx-sc { color:rgba(255,255,255,.6); }
.ctx-item-ico { display:flex; align-items:center; justify-content:center; width:18px; height:18px; flex:none; color:var(--muted); }
.ctx-item-ico svg { width:18px; height:18px; display:block; }
.ctx-item:hover .ctx-item-ico { color:#fff; }
.ctx-item.danger .ctx-item-ico { color:var(--red); }
.ctx-item.danger:hover .ctx-item-ico { color:#fff; }
.ctx-item-main { flex:1; min-width:0; }
.ctx-item-label { font-size:14px; }
.ctx-item-sub   { font-size:11px; color:var(--muted); margin-top:1px; }
.ctx-item:hover .ctx-item-sub { color:rgba(255,255,255,.7); }
.ctx-check { color:var(--brand); font-weight:700; margin-left:auto; padding-left:8px; }
.ctx-item:hover .ctx-check { color:#fff; }

.ctx-toggle {
  margin-left:auto; flex-shrink:0;
  width:18px; height:18px; border-radius:4px;
  background:transparent; border:2px solid var(--separator);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:900; color:transparent; line-height:1;
  transition:background .12s, border-color .12s, color .12s;
}
.ctx-toggle.on {
  background:var(--brand); border-color:var(--brand); color:#fff;
}
.ctx-item:hover .ctx-toggle    { border-color:rgba(255,255,255,.55); }
.ctx-item:hover .ctx-toggle.on { background:#fff; border-color:#fff; color:var(--brand); }

.ctx-item.ctx-slider-item {
  flex-direction:column; align-items:stretch; gap:6px;
  cursor:default; padding:10px 12px;
}
.ctx-item.ctx-slider-item:hover { background:transparent; color:var(--text); }
.ctx-slider-head {
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; font-weight:600; color:var(--header);
}
.ctx-slider-val   { color:var(--muted); font-variant-numeric:tabular-nums; }
.ctx-slider-input {
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:2px; outline:none;
  background:var(--active-bg); cursor:pointer;
}
.ctx-slider-input::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:none; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  transition:background .14s var(--ease), transform .12s var(--ease-out), box-shadow .14s var(--ease);
}
.ctx-slider-input::-webkit-slider-thumb:hover { background:var(--brand); transform:scale(1.18); box-shadow:0 2px 10px rgba(107,124,255,.5); }
.ctx-slider-input:active::-webkit-slider-thumb { transform:scale(1.08); }
.ctx-arrow { margin-left:auto; padding-left:8px; font-size:10px; color:var(--muted); }
.ctx-item:hover .ctx-arrow { color:#fff; }
.ctx-item.has-submenu .ctx-arrow { color:var(--muted); }
.ctx-sep              { height:1px; background:var(--separator); margin:4px 0; }

/* ════════════════════════════
   TOOLTIP
════════════════════════════ */
.tooltip { position:fixed; background:#111214; color:#fff; padding:8px 14px; border-radius:8px; font-size:14px; font-weight:600; pointer-events:none; z-index:9999; white-space:nowrap; box-shadow:0 8px 20px rgba(0,0,0,.5); opacity:0; transition:opacity .1s; }
.tooltip.visible { opacity:1; }
.tooltip::before { content:''; position:absolute; left:-5px; top:50%; transform:translateY(-50%); border:5px solid transparent; border-right-color:#111214; border-left:none; }

/* ════════════════════════════
   TOAST
════════════════════════════ */
#toast-container { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:10800; pointer-events:none; }
.toast { background:var(--sidebar-bg); border:1px solid var(--separator); border-radius:8px; padding:12px 20px; font-size:14px; font-weight:500; color:var(--header); box-shadow:0 8px 24px rgba(0,0,0,.4); animation:toastIn .25s ease; white-space:nowrap; }
.toast.out { animation:toastOut .16s var(--ease-menu-close) forwards; }
@keyframes toastIn  { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes toastOut { from{opacity:1} to{opacity:0;transform:translateY(-8px)} }

/* ════════════════════════════
   EMOJI PICKER
════════════════════════════ */
.emoji-picker { position:fixed; background:var(--sidebar-bg); border:1px solid var(--separator); border-radius:var(--ds-radius-m, 12px); padding:10px 12px 12px; box-shadow:var(--ds-shadow-3, 0 8px 24px rgba(0,0,0,.4)); z-index:5000; width:340px; animation: chordPopMenu .14s var(--ease-menu-open); transform-origin: bottom center; }
.e-btn { width:32px; height:32px; border-radius:4px; border:none; background:none; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .08s; }
.e-btn:hover { background:var(--hover-bg); }

/* ════════════════════════════
   MODAL
════════════════════════════ */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:8000; display:flex; align-items:center; justify-content:center; animation:fadeIn .2s var(--ease); backdrop-filter:blur(3px); }

.modal-overlay.chord-confirm-overlay { z-index: 9500; }
.modal-overlay.crop-modal-overlay    { z-index: 9500; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal { background:var(--sidebar-bg); border-radius:12px; padding:32px; width:100%; max-width:460px; max-height:calc(100dvh - 24px); overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.5); animation:modalIn .2s var(--ease-menu-open); }

@keyframes modalIn { from{opacity:0;transform:scale(.94) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal h2 { font-size:20px; font-weight:800; color:var(--header); margin-bottom:8px; }
.modal p  { font-size:14px; color:var(--muted); margin-bottom:24px; }
.modal-field { margin-bottom:16px; }
.modal-field label { display:block; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; margin-bottom:6px; }
.modal-field input, .modal-field select {
  width:100%; background-color:var(--input-bg); border:1px solid rgba(255,255,255,.08);
  border-radius:6px; padding:10px 14px; color:var(--text); font-size:15px;
  font-family:inherit; outline:none; transition:border-color .15s;
}
.modal-field input:focus, .modal-field select:focus { border-color:var(--brand); }
.modal-field select option { background-color:var(--dark-bg); }
.modal-btns { display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.modal-btn { padding:10px 20px; border-radius:4px; font-size:14px; font-weight:600; cursor:pointer; border:none; font-family:inherit; transition:background .1s, transform .1s; }
.modal-btn.primary { background:var(--brand); color:#fff; }
.modal-btn.primary:hover { background:var(--brand-hv); }
.modal-btn.secondary { background:var(--hover-bg); color:var(--text); }
.modal-btn.secondary:hover { background:var(--active-bg); }
.modal-btn:active { transform:scale(.97); }

/* ════════════════════════════
   SCREEN-SHARE PICKER
════════════════════════════ */
.ssp-overlay { position:fixed; inset:0; background:rgba(0,0,0,.78); z-index:9999; display:flex; align-items:center; justify-content:center; animation:fadeIn .15s ease; backdrop-filter:blur(3px); }
.ssp-modal { background:var(--sidebar-bg); border-radius:14px; width:760px; max-width:94vw; max-height:86vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.06); animation:modalIn .15s ease; }
.ssp-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px 14px; }
.ssp-head h3 { margin:0; color:var(--header); font-size:17px; font-weight:800; letter-spacing:.01em; }
.ssp-x { background:none; border:none; color:var(--muted); font-size:22px; line-height:1; cursor:pointer; width:30px; height:30px; border-radius:6px; transition:color .1s, background .1s; }
.ssp-x:hover { color:var(--header); background:var(--hover-bg); }
.ssp-tabs { display:flex; gap:4px; padding:0 22px; border-bottom:1px solid var(--separator); }
.ssp-tab { appearance:none; background:none; border:none; font-family:inherit; font-size:14px; font-weight:600; color:var(--muted); padding:10px 4px; margin-right:18px; cursor:pointer; position:relative; transition:color .1s; }
.ssp-tab:hover { color:var(--text); }
.ssp-tab.active { color:var(--header); }
.ssp-tab.active::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px 2px 0 0; background:var(--brand); }
.ssp-body { flex:1; overflow-y:auto; padding:18px 22px; min-height:200px; }
.ssp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:12px; }
.ssp-item { cursor:pointer; border:2px solid transparent; border-radius:10px; overflow:hidden; background:var(--rail-bg); display:flex; flex-direction:column; transition:border-color .12s, transform .12s, box-shadow .12s; }
.ssp-item:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.35); }
.ssp-item.selected { border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
.ssp-thumb { width:100%; aspect-ratio:16/9; object-fit:contain; background:#000; display:block; }
.ssp-name-row { display:flex; align-items:center; gap:7px; padding:8px 10px; min-width:0; }
.ssp-icon { width:16px; height:16px; flex-shrink:0; border-radius:3px; object-fit:contain; }
.ssp-name { font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ssp-empty { color:var(--muted); text-align:center; padding:48px 0; font-size:14px; }
.ssp-settings { padding:14px 22px; border-top:1px solid var(--separator); background:var(--dark-bg); display:flex; flex-direction:column; gap:12px; }
.ssp-set-label { font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--muted); text-transform:uppercase; }
.ssp-pills { display:flex; gap:8px; flex-wrap:wrap; }
.ssp-pill { appearance:none; font-family:inherit; background:var(--input-bg); border:1px solid transparent; color:var(--text); padding:7px 14px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; transition:background .1s, border-color .1s, color .1s; display:flex; flex-direction:column; align-items:flex-start; gap:1px; }
.ssp-pill small { font-size:10px; font-weight:500; color:var(--muted); }
.ssp-pill:hover { background:var(--active-bg); }
.ssp-pill.active { background:var(--brand); border-color:var(--brand); color:#fff; }
.ssp-pill.active small { color:rgba(255,255,255,.8); }
.ssp-pill:disabled { opacity:.4; cursor:not-allowed; }
.ssp-custom { display:flex; flex-direction:column; gap:10px; padding-top:2px; }
.ssp-custom.hidden { display:none; }
.ssp-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ssp-row > .ssp-set-label { min-width:78px; }
.ssp-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:2px; }
.ssp-toggle-row .ssp-tlabel { font-size:13px; color:var(--text); font-weight:500; display:flex; align-items:center; gap:8px; }
.ssp-switch { position:relative; width:38px; height:22px; flex-shrink:0; }
.ssp-switch input { opacity:0; width:0; height:0; }
.ssp-switch .ssp-track { position:absolute; inset:0; background:var(--input-bg); border-radius:22px; transition:background .15s; }
.ssp-switch .ssp-track::before { content:''; position:absolute; left:3px; top:3px; width:16px; height:16px; background:#fff; border-radius:50%; transition:transform .15s; }
.ssp-switch input:checked + .ssp-track { background:var(--brand); }
.ssp-switch input:checked + .ssp-track::before { transform:translateX(16px); }
.ssp-foot { display:flex; align-items:center; gap:12px; padding:14px 22px; border-top:1px solid var(--separator); }
.ssp-summary { font-size:13px; color:var(--muted); font-weight:600; }
.ssp-summary b { color:var(--text); font-weight:700; }
.ssp-foot .ssp-spacer { flex:1; }
.ssp-btn { padding:9px 22px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; border:none; font-family:inherit; transition:background .1s, transform .08s; }
.ssp-btn:active { transform:scale(.97); }
.ssp-btn.secondary { background:var(--hover-bg); color:var(--text); }
.ssp-btn.secondary:hover { background:var(--active-bg); }
.ssp-btn.primary { background:var(--brand); color:#fff; }
.ssp-btn.primary:hover { background:var(--brand-hv); }
.ssp-btn.primary:disabled { opacity:.45; cursor:not-allowed; }

/* ════════════════════════════
   ANIMATIONS
════════════════════════════ */
@keyframes msgIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
.msg-first, .msg-cont { animation:msgIn .12s ease; }

.msg-skel-wrap { padding-top:16px; }
.msg-skel { display:flex; gap:16px; padding:9px 20px; align-items:flex-start; }
.skel-av { width:40px; height:40px; border-radius:50%; flex-shrink:0; }
.skel-col { display:flex; flex-direction:column; gap:8px; padding-top:3px; flex:1; min-width:0; }
.skel-line { height:12px; border-radius:7px; }
.skel-name { width:140px; height:14px; }
.skel-av, .skel-line {
  background:linear-gradient(90deg, var(--input-bg) 25%, rgba(255,255,255,.08) 37%, var(--input-bg) 63%);
  background-size:400% 100%;
  animation:skelShimmer 1.4s ease infinite;
}
@keyframes skelShimmer { 0%{background-position:100% 0} 100%{background-position:0 0} }

/* ════════════════════════════
   RESPONSIVE
════════════════════════════ */
@media (max-width:1100px) { #member-list, #channel-info { display:none; } }

/* ════════════════════════════
   AVATAR HELPERS
════════════════════════════ */
.av-img {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.av-initials {
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; flex-shrink: 0;
  line-height: 1;
}

/* ════════════════════════════
   FULL-SCREEN MODAL
════════════════════════════ */
/* ── App Loading Overlay ── */
#app-loader {
  position: fixed; inset: 0; z-index: 99999;
  background: #070817;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .35s ease, visibility .35s ease;
}
#app-loader.hide { opacity: 0; visibility: hidden; }
.al-content { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.al-logo { animation: al-pulse 1.8s ease-in-out infinite; }
@keyframes al-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.92);opacity:.7} }
.al-dots { display: flex; gap: 8px; }
.al-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); display: block;
  animation: al-bounce .9s ease-in-out infinite;
}
.al-dots span:nth-child(2) { animation-delay: .15s; }
.al-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes al-bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-10px)} }

/* ── Full Modal ── */
.full-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .2s cubic-bezier(.4,0,.2,1);
  backdrop-filter: blur(3px);
}
.full-modal .fm-panel { animation: modalIn .24s var(--ease-menu-open); }
.fm-panel {
  display: flex;
  width: min(1080px, calc(100vw - 16px));
  height: min(720px, calc(100vh - 16px));
  border-radius: 8px; overflow: hidden; position: relative;

  background: var(--sidebar-bg);
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
}
.fm-sidebar {
  width: 218px; min-width: 180px;
  background: var(--sidebar-bg);
  padding: 60px 8px 20px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}
.fm-section-title {
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 10px 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fm-nav { display: flex; flex-direction: column; gap: 2px; }
.fm-nav-item {
  padding: 8px 10px; border-radius: 4px;
  font-size: 14px; font-weight: 500; color: var(--text);
  cursor: pointer; transition: background .08s, color .08s;
  user-select: none;
}
.fm-nav-item:hover  { background: var(--hover-bg); color: var(--header); }
.fm-nav-item.active { background: var(--active-bg); color: var(--header); font-weight: 600; }
.fm-nav-item.danger       { color: var(--red); }
.fm-nav-item.danger:hover { background: rgba(237,66,69,.15); color: var(--red); }
.fm-nav-sep { height: 1px; background: var(--separator); margin: 8px 4px; }

.fm-content {
  flex: 1; background: var(--chat-bg);
  overflow-y: auto; padding: 60px 40px 40px;
  min-width: 0; display: flex; flex-direction: column;
}
.fm-tab { max-width: 600px; }

.fm-content:not(#admin-fm-content) > .fm-tab:not(.fm-tab-roles) {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.fm-tab-roles {
  max-width: none; flex: 1;
  overflow: hidden; min-height: 0;
}

.fm-content:has(> .fm-tab-roles:not([style*="none"])) {
  padding: 0;
  overflow: hidden;
}
.fm-field { margin-bottom: 20px; }
.fm-field label {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; color: var(--muted);
  text-transform: uppercase; margin-bottom: 6px;
}
.fm-field input, .fm-field select, .fm-field textarea {
  width: 100%; background-color: var(--input-bg);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px; padding: 10px 14px;
  color: var(--text); font-size: 15px;
  font-family: inherit; outline: none;
  transition: border-color .15s;
}
.fm-field input:focus, .fm-field select:focus, .fm-field textarea:focus { border-color: var(--brand); }
.fm-field select option { background-color: var(--dark-bg); }
.fm-hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.fm-btns { display: flex; gap: 8px; margin-top: 8px; }
.fm-save-btn {
  padding: 10px 20px; background: var(--brand); color: #fff;
  border: none; border-radius: 4px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background .1s, transform .08s;
}
.fm-save-btn:hover  { background: var(--brand-hv); }
.fm-save-btn:active { transform: scale(.97); }
.fm-upload-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; background: var(--hover-bg); color: var(--text);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--ds-radius-s, 9px);
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .12s, color .12s, border-color .12s;
}
.fm-upload-btn svg { flex: none; color: var(--muted); }
.fm-upload-btn:hover { background: var(--active-bg); color: var(--header); border-color: rgba(255,255,255,.2); }
.fm-upload-btn:hover svg { color: var(--text); }
.fm-remove-btn {
  display: inline-flex; align-items: center;
  padding: 9px 15px; background: transparent; color: var(--muted);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--ds-radius-s, 9px);
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .12s, color .12s, border-color .12s;
}
.fm-remove-btn:hover { background: rgba(237,66,69,.15); color: var(--red); border-color: var(--red); }
.fm-close {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px;
  background: rgba(255,255,255,.08); border: none; border-radius: 50%;
  color: var(--muted); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s; z-index: 10;
}
.fm-close:hover { background: rgba(255,255,255,.16); color: var(--header); }
/* Mobile-only affordances — hidden everywhere by default; shown in @media(800). */
.fm-back { display: none; }
.qs-close { display: none; }

/* ════════════════════════════
   HOME / DM SIDEBAR
════════════════════════════ */
.home-friends-btn {
  display: flex; align-items: center;
  height: 36px; border-radius: 4px;
  padding: 0 8px; margin: 4px 8px;
  cursor: pointer; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--muted);
  transition: background .08s, color .08s;
  position: relative;
}
.home-friends-btn:hover  { background: var(--hover-bg); color: var(--text); }
.home-friends-btn.active { background: var(--active-bg); color: var(--header); }

.home-dm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 4px;
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.home-new-dm {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 3px; color: var(--muted);
  transition: color .08s;
}
.home-new-dm:hover { color: var(--header); }

.home-dm-search-inp {
  width: 100%; background: var(--input-bg);
  border: none; border-radius: 4px;
  color: var(--header); font-size: 13px; font-weight: 500;
  padding: 5px 10px; outline: none; cursor: text;
  font-family: inherit;
}
.home-dm-search-inp::placeholder { color: var(--muted); font-weight: 400; }
.home-dm-search-inp:focus { box-shadow: 0 0 0 2px var(--brand); }

.dm-item {
  display: flex; align-items: center;
  height: 42px; border-radius: 4px;
  padding: 0 8px; margin: 1px 8px;
  cursor: pointer; gap: 10px;
  transition: background .08s;
  position: relative;
}
.dm-item:hover  { background: var(--hover-bg); }
.dm-item.active { background: var(--active-bg); }
.dm-item-info { flex: 1; min-width: 0; }
.dm-name { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.dm-item.active .dm-name { color: var(--header); }
.dm-sub  { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.dm-close-btn {
  display: none; width: 20px; height: 20px; flex-shrink: 0;
  align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; color: var(--muted);
  cursor: pointer; border-radius: 50%; transition: color .1s, background .1s;
}
.dm-item:hover .dm-close-btn { display: flex; }
.dm-close-btn:hover { color: var(--header); background: var(--hover-bg); }

/* ════════════════════════════
   HOME HEADER TABS
════════════════════════════ */
.home-tabs { display: flex; align-items: center; gap: 4px; }
.home-tab {
  padding: 4px 12px; border-radius: 4px;
  background: none; border: none;
  font-size: 14px; font-weight: 500; color: var(--muted);
  cursor: pointer; font-family: inherit;
  transition: background .08s, color .08s;
  display: flex; align-items: center; gap: 6px;
}
.home-tab:hover  { background: var(--hover-bg); color: var(--text); }
.home-tab.active { background: var(--active-bg); color: var(--header); font-weight: 600; }
.home-tab-add { color: var(--green); }
.home-tab-add:hover  { background: rgba(35,165,90,.15); color: var(--green); }
.home-tab-add.active { background: rgba(35,165,90,.2); color: var(--green); }

/* ════════════════════════════
   FRIENDS PAGE CONTENT
════════════════════════════ */
.friends-page { padding: 8px 0; }
.friends-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 64px 32px; gap: 12px; color: var(--muted);
}
.fe-icon { font-size: 64px; }
.fe-text { font-size: 16px; font-weight: 500; }

.friends-section-title {
  padding: 16px 16px 4px;
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
  user-select: none;
}

.friend-item {
  display: flex; align-items: center;
  padding: 8px 16px; gap: 12px;
  height: 62px; border-radius: 8px;
  margin: 1px 8px;
  cursor: pointer; border-top: 1px solid transparent;
  transition: background .08s, border-color .08s;
}
.friend-item:hover { background: var(--hover-bg); border-color: var(--separator); }
.friend-item.clickable { cursor: pointer; }
.fi-info { flex: 1; min-width: 0; }
.fi-name { font-size: 15px; font-weight: 600; color: var(--header); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.fi-sub  { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.fi-actions { display: flex; gap: 8px; align-items: center; }
.fi-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--input-bg); border: none;
  color: var(--muted); font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s; font-family: inherit;
}
.fi-btn:hover          { background: var(--hover-bg); color: var(--header); }
.fi-btn.accept         { color: var(--green); }
.fi-btn.accept:hover   { background: rgba(35,165,90,.2); color: var(--green); }
.fi-btn.decline        { color: var(--red); }
.fi-btn.decline:hover  { background: rgba(237,66,69,.2); color: var(--red); }
.fi-btn.dm-btn:hover   { background: color-mix(in srgb, var(--brand) 20%, transparent); color: var(--brand); }

/* ════════════════════════════
   ADD FRIEND SECTION
════════════════════════════ */
.add-friend-section { padding: 20px 16px; }
.add-friend-section h3 { font-size: 20px; font-weight: 800; color: var(--header); margin-bottom: 6px; }
.add-friend-section p  { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.add-friend-form {
  display: flex; gap: 0;
  background: var(--dark-bg);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; overflow: hidden;
  padding: 4px;
}
.add-friend-form input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: 15px; padding: 8px 12px;
  font-family: inherit;
}
.add-friend-form input::placeholder { color: var(--muted); }
.af-btn {
  padding: 8px 16px; background: var(--brand); color: #fff;
  border: none; border-radius: 4px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: background .1s;
}
.af-btn:hover { background: var(--brand-hv); }

/* ════════════════════════════
   PENDING BADGE
════════════════════════════ */
.pending-badge {
  min-width: 16px; height: 16px;
  background: var(--red); border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
  padding: 0 4px; line-height: 1;
}

/* ════════════════════════════
   PROFILE MODAL CARD
════════════════════════════ */
.profile-card {
  background: var(--sidebar-bg);
  border-radius: 8px; overflow: hidden;
  margin-bottom: 24px;
}
.pf-banner-btn {
  padding: 6px 12px; background: rgba(0,0,0,.5); color: #fff;
  border: none; border-radius: 4px; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; backdrop-filter: blur(4px);
  transition: background .1s;
}
.pf-banner-btn:hover { background: rgba(0,0,0,.7); }
.pf-avatar-wrap {
  position: relative; display: inline-block;
  margin: -28px 0 8px 16px;
}
.pf-avatar-wrap { cursor: pointer; }
.pf-av-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5); border-radius: 50%;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
  pointer-events: none;
}
.pf-avatar-wrap:hover .pf-av-overlay { opacity: 1; }
.pf-banner-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.4);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
  cursor: pointer;
  border-radius: inherit;
}

.pf-edit-popup {
  position: fixed; z-index: 9700;
  min-width: 160px;
  background: var(--sidebar-bg); border: 1px solid var(--separator); border-radius: 6px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  animation: ctxIn .08s ease;
}
.pf-edit-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 4px;
  font-size: 14px; color: var(--text);
  cursor: pointer; transition: background .08s, color .08s;
  user-select: none;
}
.pf-edit-item:hover { background: var(--brand); color: #fff; }
.pf-edit-item.danger { color: var(--red); }
.pf-edit-item.danger:hover { background: var(--red); color: #fff; }
.pf-edit-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }

/* ════════════════════════════
   SERVER SETTINGS MEMBER LIST
════════════════════════════ */
.ms-list { display: flex; flex-direction: column; gap: 4px; }
.ms-row {
  display: flex; align-items: center;
  padding: 8px 12px; gap: 12px;
  border-radius: 8px; background: var(--sidebar-bg);
}
.ms-info { flex: 1; min-width: 0; }
.ms-name { font-size: 14px; font-weight: 600; color: var(--header); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-role-label { font-size: 12px; color: var(--muted); }
.ms-actions { display: flex; gap: 8px; align-items: center; }
.ms-role-select {
  background-color: var(--input-bg); color: var(--text);
  border: 1px solid rgba(255,255,255,.1); border-radius: 4px;
  padding: 4px 8px; font-size: 13px;
  font-family: inherit; cursor: pointer; outline: none;
}
.ms-role-select option { background-color: var(--dark-bg); }
.ms-kick {
  padding: 4px 12px; background: rgba(237,66,69,.15); color: var(--red);
  border: 1px solid rgba(237,66,69,.3); border-radius: 4px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: background .1s;
}
.ms-kick:hover { background: var(--red); color: #fff; }
.ms-owner { font-size: 18px; }

/* ════════════════════════════
   SERVER AVATAR SECTION
════════════════════════════ */
.sv-avatar-section { display: flex; gap: 18px; align-items: center; margin-bottom: 22px; }
.sv-av-preview {
  width: 84px; height: 84px; border-radius: 20px;
  background: var(--brand); overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative; cursor: pointer; border: none; padding: 0;
  transition: transform .12s, box-shadow .15s;
}
.sv-av-preview:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.sv-av-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-av-letter { font-size: 38px; font-weight: 800; color: #fff; }
.sv-av-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5); color: #fff; opacity: 0; transition: opacity .15s;
}
.sv-av-preview:hover .sv-av-overlay { opacity: 1; }
.sv-av-controls { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.sv-av-btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.sv-av-controls .fm-hint { margin: 0; }

/* ════════════════════════════
   INVITE BOX
════════════════════════════ */
.invite-box {
  display: flex; gap: 8px; align-items: center;
  background: var(--dark-bg); border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; padding: 12px 16px; margin-top: 12px;
}
.invite-code-display {
  flex: 1; font-size: 16px; font-weight: 700;
  color: var(--header); font-family: 'Consolas','Cascadia Code',monospace;
  letter-spacing: .08em;
}

/* ════════════════════════════
   DANGER ZONE
════════════════════════════ */
.dz-card {
  background: var(--sidebar-bg);
  border: 1px solid rgba(237,66,69,.2);
  border-radius: 8px; overflow: hidden;
}
.dz-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; gap: 16px; border-bottom: 1px solid var(--separator);
}
.dz-item:last-child { border-bottom: none; }
.dz-item p { font-size: 14px; color: var(--muted); max-width: 360px; }
.dz-btn {
  padding: 8px 20px; border-radius: 4px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: inherit; border: none; white-space: nowrap;
  transition: background .1s, transform .08s; flex-shrink: 0;
}
.dz-btn:active { transform: scale(.97); }
.dz-btn.leave  { background: rgba(240,178,50,.15); color: var(--yellow); border: 1px solid rgba(240,178,50,.3); }
.dz-btn.leave:hover  { background: var(--yellow); color: #000; }
.dz-btn.delete { background: rgba(237,66,69,.15); color: var(--red); border: 1px solid rgba(237,66,69,.3); }
.dz-btn.delete:hover { background: var(--red); color: #fff; }
.err-btns  { display: flex; gap: 12px; margin-top: 8px; }
.btn-retry, .btn-logout {
  padding: 10px 24px; border-radius: 4px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  border: none; font-family: inherit; transition: background .1s;
}
.btn-retry  { background: var(--brand); color: #fff; }
.btn-retry:hover  { background: var(--brand-hv); }
.btn-logout { background: var(--hover-bg); color: var(--text); }
.btn-logout:hover { background: var(--active-bg); }

/* ════════════════════════════
   BADGE PILLS
════════════════════════════ */
.badge-row {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.badge-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: color-mix(in srgb, var(--brand) 25%, transparent); color: var(--header);
  border: 1px solid rgba(88,101,242,.4);
}

/* ════════════════════════════
   USER CARD POPUP
════════════════════════════ */
.user-card-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0, 0, 0, .55);
  animation: fadeIn .15s ease;
}

.admin-error-row {
  background: var(--input-bg);
  border: 1px solid var(--separator);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 13px;
}
.admin-error-row .aer-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px; flex-wrap: wrap;
}
.admin-error-row .aer-kind {
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 4px;
  background: var(--red); color: #fff; letter-spacing: .04em; text-transform: uppercase;
}
.admin-error-row .aer-version,
.admin-error-row .aer-user,
.admin-error-row .aer-time { font-size: 11px; color: var(--muted); }
.admin-error-row .aer-user { color: var(--brand); font-weight: 600; }
.admin-error-row .aer-del {
  margin-left: auto;
  background: transparent; border: 1px solid var(--separator); color: var(--muted);
  border-radius: 50%; width: 22px; height: 22px;
  font-size: 12px; cursor: pointer; transition: background .1s, color .1s;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.admin-error-row .aer-del:hover { background: var(--red); color: #fff; border-color: var(--red); }
.admin-error-row .aer-msg {
  color: var(--text); font-family: ui-monospace, Consolas, monospace;
  font-size: 12px; line-height: 1.5; word-break: break-word;
}
.admin-error-row .aer-loc {
  margin-top: 4px; font-size: 11px; color: var(--muted);
  font-family: ui-monospace, Consolas, monospace;
}
.admin-error-row .aer-stack { margin-top: 6px; }
.admin-error-row .aer-stack summary {
  cursor: pointer; font-size: 11px; color: var(--muted);
  user-select: none;
}
.admin-error-row .aer-stack pre {
  background: var(--dark-bg); border-radius: 4px;
  padding: 8px 10px; margin: 6px 0 0;
  font-size: 11px; max-height: 200px; overflow: auto;
  font-family: ui-monospace, Consolas, monospace;
  white-space: pre-wrap; word-break: break-word; color: var(--text);
}
.user-card {
  position: fixed; z-index: 9999;
  width: 340px; border-radius: 10px; overflow: hidden;
  background: var(--dark-bg); box-shadow: 0 8px 32px rgba(0,0,0,.6);
  animation: ucPopIn .18s var(--ease-menu-open);
  transform-origin: top left;
  max-height: 80vh; display: flex; flex-direction: column;
}
@keyframes ucPopIn {
  from { opacity: 0; transform: scale(.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.uc-server-roles {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.uc-role-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 2px 6px 2px 4px;
  border-radius: 10px; border: 1px solid transparent;
  white-space: nowrap; cursor: default;
}
.uc-role-tag-x {
  cursor: pointer; font-size: 13px; opacity: .6;
  margin-left: 1px; line-height: 1;
}
.uc-role-tag-x:hover { opacity: 1; color: var(--red); }

.uc-social { display: flex; flex-wrap: wrap; gap: 6px; }
.uc-social-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; text-decoration: none;
  padding: 5px 10px; border-radius: 20px;
  background: var(--hover-bg); border: 1px solid var(--separator);
  color: var(--text);
  cursor: pointer; transition: background .1s, transform .08s;
  user-select: none;
}
.uc-social-link:hover { background: var(--active-bg); color: var(--header); transform: translateY(-1px); }
.uc-sl-icon {
  width: 14px; height: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.uc-sl-icon svg { width: 14px; height: 14px; }
.uc-sl-text {
  max-width: 90px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ════════════════════════════
   ADMIN PANEL — STATS
════════════════════════════ */
.stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px; margin-bottom: 24px;
}
.stat-card {
  background: var(--sidebar-bg); border-radius: 8px;
  padding: 20px 24px;
  border: 1px solid var(--separator);
}
.stat-num {
  font-size: 32px; font-weight: 900;
  color: var(--header); line-height: 1;
}
.stat-label {
  font-size: 13px; color: var(--muted);
  margin-top: 4px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}

/* ════════════════════════════
   ADMIN PANEL — REPORTS
════════════════════════════ */
.admin-report-row {
  background: var(--sidebar-bg); border-radius: 8px;
  padding: 14px 16px; margin-bottom: 10px;
  border: 1px solid var(--separator);
}
.ar-meta {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.ar-type {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 2px 8px; border-radius: 10px;
  background: rgba(88,101,242,.2); color: var(--brand);
}
.ar-status {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 2px 8px; border-radius: 10px;
}
.ar-status.open     { background: rgba(237,66,69,.2); color: var(--red); }
.ar-status.resolved { background: rgba(35,165,90,.2); color: var(--green); }
.ar-status.dismissed { background: rgba(149,155,164,.15); color: var(--muted); }
.ar-date { font-size: 12px; color: var(--muted); margin-left: auto; }
.ar-body {
  font-size: 13px; color: var(--text);
  margin-bottom: 10px; line-height: 1.5;
}
.ar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ════════════════════════════
   ROLES SPLIT PANEL
════════════════════════════ */
.roles-split {
  display: flex; height: 100%; overflow: hidden;
}
.roles-left-panel {
  width: 268px; flex-shrink: 0;
  border-right: 1px solid var(--separator);
  overflow-y: auto; padding: 20px 10px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.roles-everyone-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px; border-radius: 6px;
  background: var(--input-bg); border: 1px solid var(--separator);
  cursor: pointer; margin-bottom: 6px;
  transition: background .1s;
}
.roles-everyone-row:hover, .roles-everyone-row.active { background: var(--active-bg); }
.roles-ev-icon {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(88,101,242,.2); color: var(--brand);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.roles-ev-title { font-size: 13px; font-weight: 700; color: var(--header); }
.roles-ev-sub   { font-size: 11px; color: var(--muted); margin-top: 1px; }
.roles-toolbar {
  display: flex; gap: 6px; align-items: center; margin-bottom: 6px;
  flex-wrap: nowrap; min-width: 0;
}
.roles-search-wrap {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  background: var(--input-bg); border: 1px solid var(--separator);
  border-radius: 4px; padding: 5px 8px;
}
.roles-search-inp {
  border: none; background: none; color: var(--text); font-family: inherit;
  font-size: 12px; outline: none; flex: 1; min-width: 0;
}
.roles-search-inp::placeholder { color: var(--muted); }
.roles-create-btn {
  font-size: 12px; font-weight: 700; padding: 5px 10px;
  border-radius: 4px; border: none; background: var(--brand);
  color: #fff; cursor: pointer; white-space: nowrap;
  flex-shrink: 0;
  transition: background .1s;
}
.roles-create-btn:hover { background: var(--brand-hv); }
.roles-count-label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  letter-spacing: .06em; padding: 4px 4px 2px;
}
.roles-list-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px; border-radius: 4px; cursor: pointer;
  transition: background .1s;
  user-select: none;
}
.roles-list-item:hover { background: var(--hover-bg); }
.roles-list-item.active { background: var(--active-bg); }
.roles-list-item[draggable="true"] { cursor: grab; }
.roles-list-item[draggable="true"]:active { cursor: grabbing; }
.roles-list-item.dragging { opacity: .4; background: var(--active-bg); }
.role-dot-sm {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.roles-list-name { flex: 1; font-size: 13px; color: var(--text); }
.roles-list-count {
  font-size: 11px; color: var(--muted); margin-right: 2px;
}

/* Right panel — role editor */
.roles-right-panel {
  flex: 1; overflow-y: auto; padding: 24px 28px;
  display: flex; flex-direction: column;
  min-width: 0;
}

.roles-right-panel .re-header { padding-right: 48px; }
.role-editor-placeholder {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.re-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  padding-bottom: 16px; border-bottom: 1px solid var(--separator);
}
.re-shield-icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.re-label { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.re-title { font-size: 15px; font-weight: 700; color: var(--header); }
.re-delete-btn {
  padding: 6px; border-radius: 4px; border: none;
  background: rgba(237,66,69,.15); color: var(--red);
  cursor: pointer; display: flex; align-items: center;
  transition: background .1s;
}
.re-delete-btn:hover { background: var(--red); color: #fff; }
.re-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--separator); margin-bottom: 20px;
}
.re-tab {
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  color: var(--muted); background: none; border: none;
  cursor: pointer;
  transition: color .1s; font-family: inherit;
}
.re-tab:hover { color: var(--text); }

.re-tab.active { color: var(--header); }
.re-content { display: flex; flex-direction: column; gap: 0; }
.re-member-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--separator); font-size: 14px;
}
.re-member-row:last-child { border-bottom: none; }

/* ════════════════════════════
   CHANNEL PERMISSION OVERWRITES
════════════════════════════ */
.chp-split {
  display: flex; gap: 0; border: 1px solid var(--separator); border-radius: 8px;
  overflow: hidden; min-height: 300px;
}
.chp-left {
  width: 180px; flex-shrink: 0; border-right: 1px solid var(--separator);
  overflow-y: auto; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.chp-role-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 4px; cursor: pointer;
  font-size: 13px; color: var(--text); transition: background .1s;
}
.chp-role-item:hover { background: var(--hover-bg); }
.chp-role-item.active { background: var(--active-bg); color: var(--header); font-weight: 600; }
.chp-right {
  flex: 1; overflow-y: auto; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 0;
}
.chp-perm-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--separator); gap: 12px;
}
.chp-perm-row:last-child { border-bottom: none; }
.chp-perm-info { flex: 1; }
.chp-perm-name { font-size: 13px; font-weight: 600; color: var(--header); }
.chp-perm-desc { font-size: 11px; color: var(--muted); margin-top: 1px; }
.chp-tog-group {
  display: flex; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--separator); flex-shrink: 0;
}
.chp-tog {
  width: 28px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: none; background: var(--input-bg); cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--muted);
  transition: background .1s, color .1s; font-family: inherit;
  border-right: 1px solid var(--separator);
}
.chp-tog:last-child { border-right: none; }
.chp-tog:hover { background: var(--hover-bg); }
.chp-tog.allow.active  { background: rgba(87,242,135,.2); color: #57f287; }
.chp-tog.neutral.active{ background: rgba(79,84,92,.4);   color: var(--muted); }
.chp-tog.deny.active   { background: rgba(237,66,69,.2);  color: var(--red); }

/* ════════════════════════════
   ROLE LIST ITEMS
════════════════════════════ */
.role-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  background: var(--sidebar-bg); margin-bottom: 4px;
  border: 1px solid var(--separator);
  cursor: default;
}
.role-item:hover { background: var(--hover-bg); }

/* ════════════════════════════
   PERMISSION CHECKBOXES
════════════════════════════ */
.perm-check-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--separator); gap: 12px;
}
.perm-check-row:last-child { border-bottom: none; }
.perm-check-info { flex: 1; }
.perm-check-name {
  font-size: 14px; font-weight: 600; color: var(--header);
  margin-bottom: 2px;
}
.perm-check-desc {
  font-size: 12px; color: var(--muted); line-height: 1.4;
}
.perm-checkbox {
  width: 20px; height: 20px; border-radius: 4px;
  border: 2px solid var(--muted); background: transparent;
  cursor: pointer; flex-shrink: 0; appearance: none;
  -webkit-appearance: none; position: relative;
  transition: background .1s, border-color .1s;
  margin-top: 2px;
}
.perm-checkbox:checked {
  background: var(--brand); border-color: var(--brand);
}
.perm-checkbox:checked::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff; font-weight: 700;
}

/* ════════════════════════════
   APPEARANCE SETTINGS
════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────────
   THEME PICKER
   ───────────────────────────────────────────────────────────────────── */
/* ── Live theme preview ── */
.theme-preview {
  display: grid; grid-template-columns: 54px 134px 1fr; height: 184px;
  border-radius: 14px; overflow: hidden; margin-bottom: 18px;
  border: 1px solid var(--ds-stroke-strong, var(--separator));
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: background .25s var(--ease);
}
.tp-rail { background: var(--rail-bg); display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 13px 0; }
.tp-rail-ico { width: 30px; height: 30px; border-radius: 50%; background: var(--sidebar-bg); box-shadow: inset 0 0 0 1px var(--separator); transition: background .25s var(--ease), border-radius .25s; }
.tp-rail-ico.act { background: var(--brand); border-radius: 11px; }
.tp-side { background: var(--sidebar-bg); padding: 13px 10px; border-right: 1px solid var(--separator); }
.tp-side-h { font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin: 4px 4px 7px; }
.tp-ch { font-size: 12px; color: var(--muted); padding: 4px 8px; border-radius: 6px; margin-bottom: 2px; }
.tp-ch.act { background: var(--active-bg, var(--hover-bg)); color: var(--header); }
.tp-chat { background: var(--chat-bg); display: flex; flex-direction: column; }
.tp-chat-top { padding: 9px 13px; border-bottom: 1px solid var(--separator); font-size: 12px; font-weight: 700; color: var(--header); }
.tp-msg { display: flex; gap: 9px; padding: 11px 13px 0; }
.tp-av { width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 50%, #b58bff)); }
.tp-av.b2 { background: var(--green, #23a55a); }
.tp-b { flex: 1; min-width: 0; }
.tp-nm { font-size: 11px; font-weight: 700; color: var(--header); margin-bottom: 5px; }
.tp-ln { height: 7px; border-radius: 4px; background: var(--text); opacity: .22; }
.tp-input { margin: auto 13px 13px; height: 28px; border-radius: 9px; background: var(--input-bg, var(--sidebar-bg)); border: 1px solid var(--separator); }

@media (max-width: 720px) {
  .theme-preview { grid-template-columns: 48px 1fr; height: 160px; }
  .theme-preview .tp-side { display: none; }
}
@media (max-width: 460px) {
  .theme-preview { height: 144px; }
  .tp-chat-top { font-size: 11px; }
  .tp-msg { padding: 9px 11px 0; }
}

.theme-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  max-width: 720px;
}
.theme-opt {

  display: block;
  cursor: pointer;
  flex: 0 0 auto;
}
.theme-opt input[type="radio"] { display: none; }

.theme-opt-swatch {
  display: block;
  position: relative;
  width: 56px; height: 56px;
  border-radius: 10px;

  background: var(--swatch-bg, #2b2d31);
  background-size: cover;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -2px 4px rgba(0,0,0,.32),
    0 3px 8px rgba(0,0,0,.4);
  outline: 3px solid transparent;
  outline-offset: 2px;
  transition: outline-color .15s, transform .12s var(--ease-out),
              box-shadow .15s;
}
.theme-opt:hover .theme-opt-swatch {
  transform: translateY(-2px) scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -2px 4px rgba(0,0,0,.35),
    0 8px 18px rgba(0,0,0,.55);
}

.theme-opt-swatch::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(155deg,
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,0)   42%,
    rgba(0,0,0,0)         58%,
    rgba(0,0,0,.22)       100%);
  pointer-events: none;
}

/* Active state */
.theme-opt.active .theme-opt-swatch {
  outline-color: var(--brand);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -2px 4px rgba(0,0,0,.35),
    0 0 0 4px color-mix(in srgb, var(--brand) 30%, transparent),
    0 6px 16px rgba(0,0,0,.5);
}
.theme-opt.active .theme-opt-swatch::after {
  content: '';
  position: absolute;
  right: -4px; bottom: -4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M6.5 11L3 7.5l1-1L6.5 9l5.5-5.5 1 1z'/></svg>")
    center / 14px 14px no-repeat;
  box-shadow: 0 2px 6px rgba(0,0,0,.6);
  border: 2px solid var(--sidebar-bg);
}
.font-size-row {
  display: flex; align-items: center; gap: 12px; margin-top: 8px;
}
.font-size-row input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none; height: 16px;
  background: transparent; cursor: pointer; outline: none;
}
/* --fill (set by _paintRange) drives the filled portion so it reaches 100% at
   max — native accent-color leaves a half-thumb gap at the right. */
.font-size-row input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--brand) var(--fill, 100%), var(--input-bg) var(--fill, 100%));
}
.font-size-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5px;
  border-radius: 50%; background: var(--brand); border: 2px solid var(--sidebar-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,.4); cursor: pointer;
}
.font-size-row input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--brand) var(--fill, 100%), var(--input-bg) var(--fill, 100%));
}
.font-size-row input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--brand);
  border: 2px solid var(--sidebar-bg); cursor: pointer;
}
.font-size-row span {
  font-size: 13px; color: var(--muted); min-width: 36px;
}

/* ════════════════════════════
   COMPACT MESSAGE MODE
════════════════════════════ */
body[data-msg-display="compact"] .msg-first {
  margin-top: 2px;
}
body[data-msg-display="compact"] .msg-avatar {
  display: none;
}
body[data-msg-display="compact"] .msg-cont {
  padding-left: 16px;
}

/* ════════════════════════════
   LIGHT THEME OVERRIDES
════════════════════════════ */
body[data-theme="light"] {
  --rail-bg:    #E3E5E8;
  --sidebar-bg: #EBEDEF;
  --chat-bg:    #FFFFFF;
  --input-bg:   #E9EAEC;
  --dark-bg:    #F2F3F5;
  --hover-bg:   rgba(6,6,7,.06);
  --active-bg:  rgba(6,6,7,.1);
  --text:       #2E3338;
  --muted:      #5C6370;
  --header:     #060607;
  --separator:  rgba(6,6,7,.12);
}
body[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(6,6,7,.18);
}
body[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(6,6,7,.3);
}

.re-toggle {
  width: 40px; height: 22px; border-radius: 11px;
  background: var(--muted); border: none; cursor: pointer;
  position: relative; transition: background .15s; flex-shrink: 0;
}
.re-toggle.on { background: var(--brand); }
.re-toggle::after {
  content: ''; position: absolute;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px;
  transition: left .15s;
}
.re-toggle.on::after { left: 21px; }

/* ════════════════════════════
   USER STATUS POPUP
════════════════════════════ */
.user-popup {
  position: fixed;
  z-index: 9500;
  background: var(--dark-bg);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  padding: 8px;
  min-width: 220px;
  animation: chordPopMenu .14s var(--ease-menu-open);
}
.up-popup-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; margin-bottom: 4px;
}
.up-popup-av-wrap { position: relative; flex-shrink: 0; }
.up-popup-name {
  font-size: 15px; font-weight: 700; color: var(--header);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.up-popup-tag { font-size: 12px; color: var(--muted); }
.up-popup-sep {
  height: 1px; background: var(--separator);
  margin: 4px 0;
}
.up-popup-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  padding: 6px 8px 2px;
}
.up-popup-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; border-radius: 4px;
  font-size: 14px; color: var(--text); cursor: pointer;
  transition: background .08s;
}
.up-popup-item:hover { background: var(--hover-bg); }
.up-popup-item.active { color: var(--header); font-weight: 600; }
.up-popup-item.danger { color: var(--red); }
.up-popup-item.danger:hover { background: rgba(237,66,69,.15); }
.up-popup-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}

/* ════════════════════════════
   ADD SERVER MODAL
════════════════════════════ */
.asrv-big-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 16px; border-radius: 8px;
  background: var(--hover-bg); border: 1px solid var(--separator);
  cursor: pointer; font-family: inherit; color: var(--text);
  transition: background .12s, border-color .12s;
  text-align: left;
}
.asrv-big-btn:hover {
  background: var(--active-bg); border-color: var(--brand);
}

/* ════════════════════════════
   MEMBER ROLE TAGS
════════════════════════════ */
.ms-roles-row {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px;
}
.ms-role-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; padding: 1px 6px;
  border-radius: 10px; border: 1px solid transparent;
  white-space: nowrap;
}
.ms-role-tag-x {
  cursor: pointer; font-size: 13px; line-height: 1;
  margin-left: 1px; opacity: .7;
}
.ms-role-tag-x:hover { opacity: 1; }
.ms-role-add {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px dashed var(--muted); background: transparent;
  color: var(--muted); cursor: pointer; font-size: 18px;
  line-height: 1; display: flex; align-items: center;
  justify-content: center; transition: border-color .1s, color .1s;
  flex-shrink: 0;
}
.ms-role-add:hover { border-color: var(--brand); color: var(--brand); }

/* ════════════════════════════
   ROLE TOGGLE
════════════════════════════ */
.role-toggle-row:hover { background: var(--hover-bg) !important; }
.role-toggle-row.has-role { background: var(--active-bg) !important; }

/* ════════════════════════════
   ADMIN DETAIL PANEL
════════════════════════════ */

#admin-fm-content:has(> #admin-detail-panel:not([style*="none"])) {
  padding: 0;
  overflow: hidden;
}
#admin-detail-panel {

  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}
.adp-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--separator);
  flex-shrink: 0; background: var(--chat-bg);
}
.adp-back-btn {
  background: var(--hover-bg); border: 1px solid var(--separator);
  color: var(--text); font-family: inherit; font-size: 13px;
  padding: 5px 12px; border-radius: 4px; cursor: pointer;
  transition: background .1s, color .1s; flex-shrink: 0; white-space: nowrap;
}
.adp-back-btn:hover { background: var(--active-bg); color: var(--header); }
.adp-title {
  font-size: 15px; font-weight: 700; color: var(--header); flex: 1;
}
.adp-body {
  flex: 1; overflow-y: auto;
  padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
.adp-section {
  background: var(--sidebar-bg); border: 1px solid var(--separator);
  border-radius: 8px; padding: 14px 16px;
}
.adp-section-title {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.adp-user-row {
  display: flex; align-items: flex-start; gap: 12px;
}
.adp-user-info { flex: 1; min-width: 0; }
.adp-user-name {
  font-size: 15px; font-weight: 700; color: var(--header);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adp-user-meta {
  font-size: 12px; color: var(--muted); margin-top: 3px;
  line-height: 1.4; user-select: text;
}
.adp-report-info {
  font-size: 13px; color: var(--text);
  line-height: 1.6; display: flex; flex-direction: column; gap: 5px;
  user-select: text;
}
.adp-messages {
  display: flex; flex-direction: column; gap: 6px;
}
.adp-msg {
  background: var(--chat-bg); border-radius: 6px;
  padding: 8px 10px; border: 1px solid transparent;
}
.adp-msg.reported {
  border-color: rgba(237,66,69,.5);
  background: rgba(237,66,69,.06);
}
.adp-msg-header {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px;
  flex-wrap: wrap;
}
.adp-msg-author {
  font-size: 13px; font-weight: 700; color: var(--header);
}
.adp-msg-time { font-size: 11px; color: var(--muted); }
.adp-msg-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 1px 6px; border-radius: 10px;
  background: rgba(237,66,69,.2); color: var(--red);
}
.adp-msg-content {
  font-size: 13px; color: var(--text);
  line-height: 1.5; user-select: text; word-break: break-word;
}
.adp-actions { }
.adp-action-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 700px) {
  .adp-action-row { grid-template-columns: 1fr; }
}
.adp-action-group {
  display: flex; flex-direction: column; gap: 6px;
}

label.fm-field-label {
  display: block; font-size: 11px; color: var(--muted);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 4px;
}
.adp-input {
  width: 100%; padding: 8px 10px;
  background: var(--input-bg); border: 1px solid var(--separator);
  border-radius: 4px; color: var(--text);
  font-family: inherit; font-size: 13px; outline: none;
  transition: border-color .15s;
}
.adp-input:focus { border-color: var(--brand); }
.adp-select {
  width: 100%; padding: 8px 10px;
  background-color: var(--input-bg); border: 1px solid var(--separator);
  border-radius: 4px; color: var(--text);
  font-family: inherit; font-size: 13px; outline: none; cursor: pointer;
  transition: border-color .15s;
}
.adp-select:focus { border-color: var(--brand); }
.adp-select option { background-color: var(--dark-bg); }

/* ════════════════════════════
   REPLY BAR
════════════════════════════ */
.reply-bar {
  display: none;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--brand) 8%, var(--input-bg));
  border-radius: var(--ds-radius-m, 12px) var(--ds-radius-m, 12px) 0 0;
  padding: 7px 12px;
  margin: 0 16px;
  border-left: 3px solid var(--brand);
  font-size: 13px;
  flex-shrink: 0;
}
.reply-bar-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  min-width: 0;
}
.reply-bar-label {
  color: var(--header);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reply-bar-preview {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reply-cancel-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  padding: 2px 6px;
  border-radius: var(--ds-radius-s, 8px);
  line-height: 1;
  flex-shrink: 0;
  transition: color .12s var(--ease), background .12s var(--ease);
}
.reply-cancel-btn:hover { color: var(--header); background: var(--hover-bg); }

/* ════════════════════════════════════════
   REPLY QUOTE
════════════════════════════════════════ */
.msg-reply-quote {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  margin: 12px 0 1px 72px;
  padding: 0 8px 0 2px;
  max-width: calc(100% - 84px); min-width: 0;
  cursor: pointer;
  font-size: 13px; line-height: 1.3;
  transition: color .12s var(--ease);
}

.msg-reply-quote::before {
  content: '';
  position: absolute; left: -38px; top: 50%; bottom: -9px; width: 36px;
  border-left: 2px solid color-mix(in srgb, var(--muted) 55%, transparent);
  border-top: 2px solid color-mix(in srgb, var(--muted) 55%, transparent);
  border-top-left-radius: 8px;
  pointer-events: none;
}
.msg-reply-quote:hover::before { border-color: var(--muted); }

.msg-group:has(.msg-reply-quote) .msg-first { margin-top: 0; }
.mrq-av { flex-shrink: 0; display: inline-flex; line-height: 0; pointer-events: none; }
.mrq-av .av-img, .mrq-av .av-initials { width: 16px; height: 16px; border-radius: 50%; }
.mrq-author {
  font-size: 13px; font-weight: 600; color: var(--header);
  white-space: nowrap; flex-shrink: 0;
}
.mrq-preview {
  font-size: 13px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.msg-reply-quote:hover .mrq-preview { color: var(--text); }
.mrq-att { font-style: italic; opacity: .85; }
/* Mentions inside a reply-quote: flat (no pill bg) + non-interactive so a click
   anywhere on the quote jumps to the original message instead of opening a card. */
.mrq-preview .mention { background: transparent !important; padding: 0; pointer-events: none; }
.mrq-preview .custom-emoji { width: 1.15em; height: 1.15em; vertical-align: -3px; }

/* ════════════════════════════════════════
   REACTION PILLS
════════════════════════════════════════ */
.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid var(--ds-stroke, rgba(255,255,255,.08));
  border-radius: var(--ds-radius-s, 9px);
  padding: 2px 9px;
  font-size: 14px;
  cursor: pointer;
  transition: background .12s var(--ease), border-color .12s var(--ease), transform .1s var(--ease-out);
  user-select: none;
  line-height: 1.4;
}

.reaction-pill:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); border-color: var(--ds-stroke-accent, var(--brand)); }
.reaction-pill.mine  { background: color-mix(in srgb, var(--brand) 28%, transparent); border-color: var(--brand); }
.reaction-pill:active { transform: scale(.92); }
.reaction-count { font-size: 12px; font-weight: 600; color: var(--text); }

/* ════════════════════════════════════════
   REACTION PICKER POPUP
════════════════════════════════════════ */
.reaction-picker-popup {
  position: fixed;
  background: var(--sidebar-bg);
  border: 1px solid var(--ds-stroke-strong, rgba(255,255,255,.1));
  border-radius: var(--ds-radius-m, 12px);
  padding: 6px 8px;
  display: flex;
  gap: 4px;
  box-shadow: var(--ds-shadow-3, 0 8px 24px rgba(0,0,0,.5));
  z-index: 6000;
  animation: toolPop .14s var(--ease-menu-open);
}
.rp-btn {
  width: 34px; height: 34px;
  border: none; background: none;
  border-radius: var(--ds-radius-s, 9px);
  font-size: 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s var(--ease), transform .1s var(--ease-out);
}
.rp-btn:hover { background: var(--hover-bg); transform: scale(1.22); }

/* ════════════════════════════════════════
   LOAD MORE BUTTON
════════════════════════════════════════ */
.load-more-row {
  display: flex;
  justify-content: center;
  padding: 12px 0 8px;
}
.load-more-btn {
  background: var(--input-bg);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 18px;
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.load-more-btn:hover { background: var(--hover-bg); border-color: var(--brand); }

/* ════════════════════════════════════════
   INLINE EDIT TEXTAREA
════════════════════════════════════════ */
.inline-edit-textarea {
  width: 100%;
  background: var(--dark-bg);
  border: 1px solid var(--brand);
  border-radius: 6px;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  line-height: 1.375;
  padding: 6px 10px;
  resize: none;
  outline: none;
  box-sizing: border-box;
  min-height: 36px;
}
.inline-edit-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  display: flex;
  gap: 10px;
}
.inline-edit-hint kbd {
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  padding: 0 4px;
  font-family: inherit;
  font-size: 10px;
}

/* ════════════════════════════════════════
   MESSAGE HIGHLIGHT
════════════════════════════════════════ */
@keyframes msgHighlight {
  0%   { background: rgba(250,166,26,.3); }
  100% { background: transparent; }
}
.msg-highlight { animation: msgHighlight 1.5s ease-out forwards; border-radius: 4px; }

/* ════════════════════════════════════════
   ATTACHMENT / IMAGE
════════════════════════════════════════ */
.msg-attachment { margin-top: 6px; }
.msg-img {
  max-width: 400px;
  max-height: 300px;
  border-radius: 6px;
  cursor: pointer;
  display: block;
  object-fit: contain;
  transition: opacity .1s;
}
.msg-img:hover { opacity: .9; }

/* Video player */
.msg-video-wrap { max-width: 520px; }
.msg-video {
  max-width: 520px;
  max-height: 340px;
  width: 100%;
  border-radius: 8px;
  display: block;
  background: #000;
  outline: none;
}
.msg-video::-webkit-media-controls-panel {
  background: linear-gradient(transparent, rgba(0,0,0,.7));
}

/* Audio player */
.msg-audio-wrap { max-width: 400px; }
.msg-audio {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  outline: none;
}

.msg-file { display: flex; align-items: center; }
.msg-file-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--input-bg);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  transition: background .1s, border-color .1s;
}
.msg-file-link:hover { background: var(--hover-bg); border-color: var(--brand); color: var(--header); }

/* ════════════════════════════════════════
   UNREAD BADGE
════════════════════════════════════════ */
.dm-unread-badge {
  min-width: 18px;
  height: 18px;
  background: var(--red);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  flex-shrink: 0;
  margin-right: 4px;
}

/* ════════════════════════════════════════
   @ MENTION DROPDOWN
════════════════════════════════════════ */
.mention-dropdown {
  position: fixed;
  background: var(--sidebar-bg);
  border: 1px solid var(--separator);
  border-radius: 8px;
  box-shadow: 0 -8px 24px rgba(0,0,0,.5);
  z-index: 5500;
  overflow: hidden;
  min-width: 240px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
}
.mention-dd-item { transition: background .08s; }
.mention-dd-item.mdd-active,
.mention-dd-item:hover { background: var(--hover-bg) !important; }
.mdd-role-dot {
  width: 14px; height: 14px; border-radius: 50%;
  flex-shrink: 0;
}
.mdd-at {
  font-size: 13px; font-weight: 700; color: var(--brand);
  flex-shrink: 0; width: 14px; text-align: center;
}
.mdd-name { font-size: 13px; font-weight: 600; color: var(--header); flex: 1; }
.mdd-desc { font-size: 11px; color: var(--muted); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }

/* ── "/" slash komut menüsü v2 (bot grupları + Sık Kullanılan + param çipleri) ── */
.slash-dd { max-height: 380px; }
.slash-dd-sec {
  padding: 8px 12px 4px; font-size: 11px; font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase; color: var(--muted);
}
.slash-dd-bot {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px 4px; margin-top: 2px;
  font-size: 12px; font-weight: 800; color: var(--header);
  border-top: 1px solid var(--separator);
}
.slash-dd-bot:first-child { border-top: none; margin-top: 0; }
.sdd-item { display: flex; align-items: center; gap: 9px; padding: 6px 12px; cursor: pointer; }
.sdd-av { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-block; }
.sdd-av-letter {
  background: var(--brand); color: #fff; font-weight: 800; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.sdd-main { flex: 1; min-width: 0; }
.sdd-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sdd-cmd { font-size: 13.5px; font-weight: 700; color: var(--header); }
.sdd-sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdd-chip {
  font-size: 10.5px; font-weight: 700; color: var(--text);
  background: var(--hover-bg); border: 1px solid var(--separator);
  border-radius: 4px; padding: 1px 6px;
}
.sdd-opt { font-size: 10.5px; color: var(--muted); }
.sdd-right { font-size: 11px; color: var(--muted); margin-left: auto; flex-shrink: 0; }

/* Parametre ipucu çubuğu — composer'ın hemen üstü */
#slash-hintbar {
  position: fixed; z-index: 5490; display: none;
  background: var(--sidebar-bg); border: 1px solid var(--separator);
  border-radius: 8px; padding: 7px 11px;
  box-shadow: 0 -8px 24px rgba(0,0,0,.5);
}
.shb-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.shb-chip {
  font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--hover-bg); border: 1px solid var(--separator);
  border-radius: 4px; padding: 2px 7px; transition: all .12s;
}
.shb-chip.active { color: #fff; background: var(--brand); border-color: var(--brand); }
.shb-chip.done { color: var(--header); border-color: color-mix(in srgb, var(--green, #23A55A) 55%, transparent); }
.shb-chip.req { border-color: color-mix(in srgb, var(--red, #ED4245) 65%, transparent); color: var(--red, #ED4245); }
.shb-desc { font-size: 11.5px; color: var(--muted); margin-left: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shb-desc b { color: var(--header); }

/* ── Slash KUTU MODU (composer içi parametre kutuları) ── */
#slash-composer {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; padding: 4px 2px; cursor: text; min-height: 24px;
}
.scx-cmd {
  font-size: 14px; font-weight: 800; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border-radius: 6px; padding: 2px 8px; flex-shrink: 0;
}
.scx-boxes { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scx-box {
  display: inline-flex; align-items: stretch; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--separator); transition: border-color .12s, box-shadow .12s;
}
.scx-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent); }
.scx-box.req-empty { border-color: var(--red, #ED4245); box-shadow: 0 0 0 1px color-mix(in srgb, var(--red, #ED4245) 45%, transparent); }
.scx-box label {
  font-size: 12px; font-weight: 700; color: var(--text);
  background: var(--hover-bg); padding: 3px 8px; display: flex; align-items: center;
  border-right: 1px solid var(--separator); cursor: text;
}
.scx-box input {
  border: none; outline: none; background: transparent; color: var(--header);
  font-size: 13px; padding: 3px 8px; min-width: 4ch; max-width: 60ch;
  font-family: inherit;
}
.scx-box input::placeholder { color: var(--muted); opacity: .55; font-size: 12px; }
.scx-add {
  border: 1px dashed var(--separator); background: transparent; color: var(--muted);
  font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 3px 9px;
  cursor: pointer; flex-shrink: 0; transition: all .12s;
}
.scx-add:hover { color: var(--header); border-color: var(--brand); }

/* SEÇENEKLER paneli — eklenmemiş opsiyonel parametreler */
#scx-menu {
  position: fixed; z-index: 5510;
  background: var(--sidebar-bg); border: 1px solid var(--separator);
  border-radius: 8px; padding: 4px 0; box-shadow: 0 -8px 24px rgba(0,0,0,.5);
  max-height: 260px; overflow-y: auto;
}
.scx-menu-head {
  padding: 7px 12px 4px; font-size: 11px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase; color: var(--muted);
}
.scx-menu-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 7px 12px; cursor: pointer;
}
.scx-menu-row:hover { background: var(--hover-bg); }
.scx-menu-name { font-size: 13px; font-weight: 700; color: var(--header); }
.scx-menu-desc { font-size: 11.5px; color: var(--muted); margin-left: auto; text-align: right; }

/* Sistem satırında vurgulu /komut */
.msg-sys-cmd {
  color: var(--brand); font-weight: 700;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-radius: 4px; padding: 0 4px;
}

/* ── Selection formatting toolbar ── */
.fmt-bar {
  position: fixed; z-index: 6000; display: none;
  align-items: center; gap: 1px;
  background: var(--rail-bg); border: 1px solid var(--separator);
  border-radius: 9px; padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.fmt-btn {
  min-width: 30px; height: 28px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 6px;
  color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: inherit; line-height: 1; transition: background .1s, color .1s;
}
.fmt-btn:hover { background: var(--hover-bg); color: var(--header); }
.fmt-btn.fb-i { font-style: italic; }
.fmt-btn.fb-u { text-decoration: underline; }
.fmt-btn.fb-s { text-decoration: line-through; }
.fmt-btn.fb-c { font-family: ui-monospace, monospace; font-size: 12px; }

/* ════════════════════════════════════════
   GROUP DM ITEMS
════════════════════════════════════════ */
.gdm-item .gdm-avatar {
  border-radius: 30% !important;
  font-size: 13px;
}

/* ════════════════════════════════════════════════════════════════════════
   MODERN POLISH LAYER
   ════════════════════════════════════════════════════════════════════════ */


.input-wrapper { transition: box-shadow .15s var(--ease); }
.input-wrapper:focus-within { box-shadow: 0 0 0 1.5px rgba(88,101,242,.55); }

.modal-field input:focus, .modal-field select:focus,
.fm-field input:focus, .fm-field select:focus, .fm-field textarea:focus,
.add-friend-form input:focus, .roles-search-inp:focus, .home-dm-search-inp:focus,
.invite-modal-search input:focus, .invite-field-input:focus,
.adp-input:focus, .adp-select:focus, .ms-role-select:focus {
  border-color: var(--brand);
  box-shadow: var(--ring-brand);
}

.input-btn:active, .send-btn:active, .vc-view-btn:active, .vc-pc-btn:active,
.vc-ctrl-btn:active, .uc-btn:active,
.tb-btn:active, .load-more-btn:active, .fi-btn:active, .af-btn:active,
.home-friends-btn:active, .home-new-dm:active, .roles-create-btn:active{ transform: scale(.95); }

.modal-btn, .vc-view-btn, .ssp-btn, .fm-save-btn, .af-btn, .roles-create-btn {
  transition: background .12s var(--ease), color .12s var(--ease),
              border-color .12s var(--ease), transform .08s var(--ease),
              box-shadow .15s var(--ease);
}
.modal-btn.primary:hover, .vc-view-btn.primary:hover, .fm-save-btn:hover,
.ssp-btn:hover, .roles-create-btn:hover, .af-btn:hover {
  box-shadow: 0 4px 14px rgba(88,101,242,.35);
}

.ctx-menu, .user-popup, .server-dropdown, .reaction-picker-popup,
.mention-dropdown, .user-card, .pf-edit-popup, .emoji-picker {
  box-shadow: var(--shadow-lg);
}

/* ════════════════════════════════════════════════════════════════════════
   DM / GROUP-DM CALL PANEL
   ════════════════════════════════════════════════════════════════════════ */
#dm-call-panel {
  flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--chat-bg);
  border-bottom: 1px solid var(--separator);
  height: 50%; max-height: 50%;
  position: relative;
}

#dm-call-panel.dm-call-preview { height: auto; max-height: 55%; }
.dm-call-preview .cjp {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
}
.cjp-pulse {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  background: var(--green, #23A55A);
  box-shadow: 0 0 0 0 rgba(35,165,90,.6);
  animation: cjpPulse 1.6s ease-out infinite;
}
@keyframes cjpPulse {
  0%   { box-shadow: 0 0 0 0 rgba(35,165,90,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(35,165,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(35,165,90,0); }
}
.cjp-text { flex: 1; min-width: 0; }
.cjp-title { font-size: 14px; font-weight: 600; color: var(--header); }
.cjp-sub   { font-size: 12px; color: var(--muted); margin-top: 1px; }
/* ── Call PREVIEW ── */
.cpv-head { display:flex; align-items:center; gap:8px; padding:12px 16px 6px; font-size:13px; color:var(--muted); }
.cpv-grid { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-content:flex-start; padding:6px 16px 10px; overflow-y:auto; flex:1; min-height:0; }
.cpv-tile {
  width:150px; height:84px; border-radius:10px; background:var(--input-bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  position:relative; cursor:pointer; transition:background .12s, transform .06s;
}
.cpv-tile:hover  { background:rgba(255,255,255,.06); }
.cpv-tile:active { transform:scale(.98); }
.cpv-av > * { width:48px !important; height:48px !important; border-radius:50% !important; object-fit:cover; }
.cpv-name { font-size:12px; color:var(--header); max-width:138px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cpv-watch {
  display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.12);
  border:none; color:#fff; padding:6px 14px; border-radius:8px; font-size:13px;
  font-weight:600; cursor:pointer; font-family:inherit; pointer-events:none;
}
.cpv-watch svg { width:16px; height:16px; }
.cpv-empty { color:var(--muted); font-size:14px; padding:20px; }
.cpv-actions { display:flex; gap:16px; justify-content:center; padding:8px 0 16px; flex-shrink:0; }
.cpv-btn {
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff; transition:filter .12s, transform .06s;
}
.cpv-btn svg { width:22px; height:22px; }
.cpv-video { background:var(--brand); }
.cpv-call  { background:#23a55a; }
.cpv-btn:hover  { filter:brightness(1.12); }
.cpv-btn:active { transform:translateY(1px); }
/* ── Group-call ringing row ── */
.call-ring-row {
  flex-shrink: 0;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--separator);
  background: var(--chat-bg);
}
.crm-head {
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  color: var(--muted); text-transform: uppercase; margin-bottom: 10px; text-align: center;
}
.crm-tiles {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: flex-start; justify-content: center;
  max-height: 168px; overflow-y: auto;
}
.crm-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; }
.crm-av {
  width: 56px; height: 56px; border-radius: 50%; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.crm-av > * { width: 56px !important; height: 56px !important; border-radius: 50% !important; object-fit: cover; }
.crm-tile.ringing { opacity: .92; }
.crm-tile.ringing .crm-av {
  box-shadow: 0 0 0 0 rgba(107,124,255,.6);
  animation: crmRing 1.4s ease-out infinite;
}
.crm-tile.ringing .crm-av::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--brand); opacity: .85;
}
@keyframes crmRing {
  0%   { box-shadow: 0 0 0 0 rgba(107,124,255,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(107,124,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(107,124,255,0); }
}
.crm-tile.joined .crm-av::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--green, #23A55A);
}
.crm-name {
  font-size: 12px; color: var(--header); max-width: 72px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}
.call-grid {
  flex: 1; min-height: 0;
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
  background: var(--chat-bg);
}
.call-empty { color: var(--muted); font-size: 14px; }

.call-card {
  position: relative;
  width: 280px; height: 158px;
  border-radius: 12px; overflow: hidden;
  background: var(--rail-bg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  border: 2px solid transparent;
  transition: border-color .12s;
}
.call-card.speaking { border-color: var(--green); }
.call-card-video {
  width: 100%; height: 100%; object-fit: cover; background: #000; display: block;
}
.call-card .vc-card-avatar {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.call-card-footer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  padding: 16px 10px 6px;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
}
.call-card-name {
  font-size: 12px; font-weight: 600; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.call-card-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Screen-share card watch overlay */
.call-screen-card .call-stream-overlay {
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(rgba(15,15,18,.6), rgba(15,15,18,.85));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 12px;
}
.call-stream-name { color: #fff; font-size: 12px; font-weight: 600; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.call-watch-btn {
  padding: 7px 18px; border-radius: 18px; border: none;
  background: var(--brand); color: #fff; font-weight: 700; font-size: 12px;
  cursor: pointer; font-family: inherit; transition: background .12s, transform .1s;
  box-shadow: 0 4px 12px rgba(88,101,242,.4);
}
.call-watch-btn:hover  { background: var(--brand-hv); transform: translateY(-1px); }
.call-watch-btn:active { transform: scale(.97); }
.call-stop-watch {
  background: rgba(0,0,0,.55); color: #fff; border: none; cursor: pointer;
  width: 22px; height: 22px; border-radius: 50%; font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .12s; font-family: inherit;
}
.call-stop-watch:hover { background: var(--red); }

/* Control bar */
.call-controls {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px; background: rgba(0,0,0,.35);
}
.call-ctrl {
  width: 48px; height: 48px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(255,255,255,.1); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, transform .08s, color .12s;
}
.call-ctrl:hover  { background: rgba(255,255,255,.2); }
.call-ctrl:active { transform: scale(.92); }
.call-ctrl svg { width: 20px; height: 20px; }
.call-ctrl.off     { background: #fff; color: #000; }
.call-ctrl.active  { background: rgba(88,101,242,.35); color: #fff; }
.call-ctrl.call-hangup { background: var(--red); }
.call-ctrl.call-hangup:hover { background: #c0392b; }

/* ══════════════════════════════════════════════════════════════════════
   DM/GDM CALL THEATER
   ══════════════════════════════ */

.call-fs-btn, .call-chat-toggle {
  position: absolute; z-index: 30; bottom: 20px;
  display: flex; align-items: center;
  height: 38px;
  border: 1px solid var(--ds-stroke-strong, rgba(255,255,255,.14));
  border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--sidebar-bg) 72%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  color: var(--text); font-size: 13px; font-weight: 600; font-family: inherit;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
  transition: background .12s, color .12s, transform .08s, opacity .25s var(--ease, ease);
}
.call-fs-btn:hover, .call-chat-toggle:hover { background: var(--hover-bg); color: var(--header); transform: translateY(-1px); }
.call-fs-btn:active, .call-chat-toggle:active { transform: scale(.97); }
.call-fs-btn svg, .call-chat-toggle svg { flex-shrink: 0; }
/* "Gizle" button */
.call-chat-toggle { left: 16px; width: 38px; justify-content: center; padding: 0; }
/* "Tam Ekran" button */
.call-fs-btn { right: 16px; padding: 0 10px; justify-content: center; }
.call-fs-btn span {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; margin-left: 0;
  transition: max-width .18s var(--ease, ease), opacity .15s var(--ease, ease), margin-left .18s var(--ease, ease);
}
.call-fs-btn:hover span { max-width: 96px; opacity: 1; margin-left: 7px; }

body.call-chat-hidden #messages,
body.call-chat-hidden #typing-indicator,
body.call-chat-hidden #input-area { display: none !important; }
body.call-chat-hidden #dm-call-panel { height: auto; max-height: none; flex: 1; }

.call-card.call-card-zoomed {
  position: absolute !important;
  top: 12px !important; left: 12px !important; right: 12px !important; bottom: 84px !important;
  width: auto !important; height: auto !important;
  z-index: 20 !important;
  border: 2px solid var(--brand) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.6) !important;
}
.call-card.call-card-zoomed .call-card-video { object-fit: contain !important; }

/* ── Fullscreen theater ── */
body.call-fullscreen #titlebar,
body.call-fullscreen #server-rail,
body.call-fullscreen #left-col,
body.call-fullscreen #chat-header,
body.call-fullscreen #member-list,
body.call-fullscreen #msg-search-panel,
body.call-fullscreen #messages,
body.call-fullscreen #typing-indicator,
body.call-fullscreen #input-area { display: none !important; }
body.call-fullscreen #app { padding-top: 0 !important; }
body.call-fullscreen #dm-call-panel {
  position: fixed; inset: 0; z-index: 700;
  max-height: none; height: 100vh; border: none;
}
body.call-fullscreen .call-grid { flex: 1; }
body.call-fullscreen .call-controls {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: transparent; z-index: 730;
  transition: opacity .25s var(--ease, ease);
}

body.call-fullscreen .call-fs-btn { bottom: 26px; right: 22px; z-index: 740; }
body.call-fullscreen .call-chat-toggle { display: none; }

body.call-fullscreen.call-zoom .call-card.call-card-zoomed {
  position: fixed !important; inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important; height: auto !important; margin: 0 !important;
  border: none !important; border-radius: 0 !important; box-shadow: none !important;
  background: #000 !important; z-index: 710 !important;
}
body.call-fullscreen.call-zoom .call-card.call-card-zoomed .call-card-video { object-fit: contain !important; }

body.call-fullscreen.call-strip .call-grid {
  position: fixed !important; left: 0 !important; right: 0 !important;
  bottom: 78px !important; top: auto !important; height: 92px !important;
  flex-direction: row !important; flex-wrap: nowrap !important;
  justify-content: center !important; align-items: center !important;
  gap: 8px !important; padding: 0 12px !important;
  overflow-x: auto !important; overflow-y: hidden !important;
  background: transparent !important; z-index: 720 !important;
  transition: opacity .25s var(--ease, ease);
}
body.call-fullscreen.call-strip .call-grid::-webkit-scrollbar { height: 0; }
body.call-fullscreen.call-strip .call-card:not(.call-card-zoomed) {
  width: 150px !important; height: 84px !important; min-width: 150px !important;
  flex: 0 0 auto !important; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
}

body.vc-idle.call-fullscreen .call-controls,
body.vc-idle.call-fullscreen .call-fs-btn,
body.vc-idle.call-fullscreen.call-strip .call-card:not(.call-card-zoomed) {
  opacity: 0 !important; pointer-events: none !important;
}
body.vc-idle.call-fullscreen { cursor: none; }

/* Header call buttons */
.header-call-btn {
  width: 36px; height: 36px; border-radius: 8px;
  border: none; cursor: pointer; background: none;
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s, transform .08s;
}
.header-call-btn:hover  { background: var(--hover-bg); color: var(--header); }
.header-call-btn:active { transform: scale(.9); }
.header-call-btn.active { color: var(--green); }

/* Incoming-call banner */
.incoming-call-banner {
  position: fixed; top: 44px; right: 16px; z-index: 10600; /* above lightbox(10000)/join-flow(10050) — calls rang invisibly behind them */
  width: 320px; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--sidebar-bg);
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.08);
  animation: chordRiseDown .24s var(--ease-out);
}
@keyframes chordRiseDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes chordRise {
  from { opacity: 0; transform: translate(-50%, -45%) scale(.94); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes chordRiseAnchored {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.incoming-call-banner .ic-avatar { flex-shrink: 0; }
.incoming-call-banner .ic-info { flex: 1; min-width: 0; }
.incoming-call-banner .ic-name { font-size: 14px; font-weight: 700; color: var(--header); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.incoming-call-banner .ic-sub  { font-size: 12px; color: var(--muted); margin-top: 1px; }
.incoming-call-banner .ic-actions { display: flex; gap: 8px; flex-shrink: 0; }
.incoming-call-banner .ic-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: none; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .08s, filter .12s;
}
.incoming-call-banner .ic-btn:active { transform: scale(.9); }
.incoming-call-banner .ic-accept { background: var(--green); animation: icPulse 1.4s ease-in-out infinite; }
.incoming-call-banner .ic-decline { background: var(--red); }
@keyframes icPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(35,165,90,.5); }
  50%     { box-shadow: 0 0 0 8px rgba(35,165,90,0); }
}

/* ════════════════════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════════════════════ */
.badge-icon-preview {
  width: 56px; height: 56px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--rail-bg); border-radius: 8px;
  border: 1px solid rgba(255,255,255,.06);
}
.badge-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.badge-row .badge-drag { font-size: 18px; color: var(--muted); cursor: grab; padding: 0 4px; user-select: none; }
.badge-icon-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  cursor: pointer; transition: transform .12s, background .12s;
}
.badge-icon-wrap:hover { background: rgba(255,255,255,.06); transform: translateY(-1px); }
.badge-icon-wrap img { max-width: 22px; max-height: 22px; object-fit: contain; display: block; }

/* Floating tooltip */
.badge-tooltip {
  position: fixed; z-index: 10500;
  min-width: 220px; max-width: 280px;
  background: var(--rail-bg);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  pointer-events: none;

  transform-origin: 50% 100%;
  animation: chordRiseAnchored .14s var(--ease-out);
}
.badge-tooltip-icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 25%, transparent) 0%, transparent 70%);
  border-radius: 50%;
  margin-bottom: 2px;
}
.badge-tooltip-icon img { max-width: 56px; max-height: 56px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.badge-tooltip-name { font-size: 16px; font-weight: 800; color: var(--header); text-align: center; }
.badge-tooltip-desc { font-size: 12px; color: var(--text); text-align: center; line-height: 1.4; }
.badge-tooltip-since { font-size: 11px; color: var(--muted); text-align: center; margin-top: 4px; }

/* ════════════════════════════════════════════════════════════════════════
   STORE
   ════════════════════════════════════════════════════════════════════════ */
.wallet-pill {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 12px; border-radius: 15px;
  background: linear-gradient(135deg, rgba(88,101,242,.18), rgba(235,69,158,.18));
  color: var(--header); font-size: 13px; font-weight: 700;
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;                          /* Kristal yükleme penceresini açar */
}
.wallet-pill svg { color: var(--brand); }   /* Kristal — altın coin yerine marka tonu */

.price-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 10px;
  background: rgba(240,178,50,.14); color: #F0B232;
  font-weight: 700; font-size: 12px;
}
.price-chip svg { width: 12px; height: 12px; }

.store-loading,
.store-empty { text-align: center; color: var(--muted); padding: 48px; font-size: 14px; }


.store-history-btn {
  background: none; border: 1px solid rgba(255,255,255,.1);
  color: var(--text); padding: 8px 18px; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-family: inherit; transition: background .12s, border-color .12s;
}
.store-history-btn:hover { background: var(--hover-bg); border-color: var(--brand); }

.store-history-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.store-history-table th, .store-history-table td {
  padding: 10px 8px; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.store-history-table th { color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }

/* ════════════════════════════════════════════════════════════════════════
   SERVER BOOST GAUGE + MODAL
   ════════════════════════════════════════════════════════════════════════ */

.app-icon {
  display: inline-block;
  vertical-align: middle;
  -webkit-text-fill-color: initial;
  color: initial;
  -webkit-background-clip: initial;
          background-clip: initial;
  background: none;
  text-shadow: none;
  line-height: 1;
  margin-left: 2px;
}
.app-icon-img { object-fit: contain; }

/* Sidebar boost gauge */
.boost-gauge { margin: 6px 8px 4px; }
.boost-pill {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 6px;
  background: var(--input-bg);
  border: 1px solid var(--ds-stroke);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
  color: var(--text);
  position: relative;
  overflow: hidden;
}

.boost-pill::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, rgba(132,71,216,.55), rgba(182,117,255,.65));
  transition: width .45s var(--ease-out, ease);
  pointer-events: none;
}

.boost-pill > * { position: relative; z-index: 1; }
.boost-pill:hover { background: var(--hover-bg); }
.boost-pill-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  background: linear-gradient(135deg, #B675FF 0%, #8447D8 100%);
  color: #fff;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(132,71,216,.4);
}
.boost-pill-tag svg { width: 11px; height: 11px; }
.boost-pill-count {
  flex: 1; min-width: 0;
  text-align: right;
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.boost-pill-chev {
  color: var(--muted);
  font-size: 14px; font-weight: 700;
  line-height: 1;
  margin-left: -2px;
}

/* Server banner */
.server-banner {
  width: 100%;
  height: 120px;
  background-size: cover;
  background-position: center;
  background-color: var(--input-bg);
}

/* Server settings — boost perk widgets */
.sv-perk-locked {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 20px;
  padding: 14px;
  background: rgba(132,71,216,.08);
  border: 1px dashed rgba(182,117,255,.30);
  border-radius: 10px;
}
.sv-perk-locked-ico {
  color: #B675FF;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: rgba(182,117,255,.15);
  border-radius: 8px;
  flex-shrink: 0;
}
.sv-perk-locked-ico svg { width: 16px; height: 16px; }
.sv-perk-locked strong { color: var(--header); font-size: 13px; font-weight: 700; }
.sv-perk-locked .fm-hint { margin-top: 4px; }

.sv-banner-row {
  display: flex; gap: 14px; align-items: center;
}
.sv-banner-preview {
  width: 240px; height: 90px;
  background: var(--input-bg);
  background-size: cover; background-position: center;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sv-banner-empty {
  color: var(--muted);
  font-size: 12px;
}

.sv-vanity-row {
  display: flex; align-items: center;
  background: var(--input-bg);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;
  overflow: hidden;
}
.sv-vanity-prefix {
  padding: 8px 10px;
  background: rgba(132,71,216,.20);
  color: #B675FF;
  font-size: 13px; font-weight: 600;
  border-right: 1px solid rgba(255,255,255,.08);
}
.sv-vanity-row input {
  flex: 1;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  color: var(--text);
  font-family: inherit; font-size: 13px;
  outline: none;
}
.sv-vanity-row:focus-within { border-color: var(--brand); }

/* ════════════════════════════════════════════════════════════════════
   MODERN ROLE STYLE PICKER (Katı / Gradyan / Holografik)
   ════════════════════════════════════════════════════════════════════ */
.rs-section { margin-bottom: 18px; }
.rs-section-h {
  font-size: 13px; color: var(--header); font-weight: 700;
  margin-bottom: 8px;
}
.rs-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.rs-mode {
  position: relative;
  background: var(--input-bg);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 12px 10px 8px;
  cursor: pointer;
  font-family: inherit;
  display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  transition: border-color .12s, background .12s, transform .08s;
  color: var(--text);
  text-align: center;
}
.rs-mode:hover:not(.rs-locked) { background: var(--hover-bg); }
.rs-mode.is-active {
  border-color: #B675FF;
  background: rgba(182,117,255,.08);
}
.rs-mode.is-active::after {
  content: '';
  position: absolute; top: 6px; right: 8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #B675FF
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.rs-mode.rs-locked {
  cursor: not-allowed;
  opacity: .65;
}

.rs-mode-preview {
  border-radius: 8px;
  padding: 16px 8px;
  font-weight: 800; font-size: 14px;
  white-space: nowrap; overflow: hidden;
  background: var(--input-bg);
  border: 1px solid var(--separator);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.rs-mode-preview img, .rs-mode-preview .av-initials { flex-shrink: 0; }
.rs-prev-name { overflow: hidden; text-overflow: ellipsis; }
.rs-prev-solid .rs-prev-name { color: var(--c, #B675FF); }
.rs-prev-grad .rs-prev-name {
  background: linear-gradient(90deg, var(--c1, #B675FF), var(--c2, #FF66C4));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@keyframes rsHoloShift { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
.rs-prev-holo .rs-prev-name {
  background: linear-gradient(90deg, #67E8F9, #A78BFA, #FB7185, #FBBF24, #67E8F9);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: rsHoloShift 4s linear infinite;
}
.rs-mode-name {
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--text);
}
.rs-lock-pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 800;
  padding: 1px 6px;
  background: rgba(182,117,255,.20);
  color: #B675FF;
  border-radius: 999px;
}
.rs-lock-pill svg { width: 9px; height: 9px; }

.rs-unlock-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
}
.rs-unlock-banner strong { color: var(--header); font-size: 13px; }
.rs-unlock-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: #fff; color: #1a0d2c;
  border: 0; border-radius: 999px;
  font-size: 12px; font-weight: 700; font-family: inherit;
  cursor: pointer;
  transition: filter .12s, transform .08s;
}
.rs-unlock-btn:hover { filter: brightness(.95); }
.rs-unlock-btn svg { width: 12px; height: 12px; color: #8447D8; }

/* Preset color swatch grid */
.rs-swatches {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.rs-swatch {
  position: relative;
  width: 100%; aspect-ratio: 1;
  border: 0; border-radius: 6px;
  cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .08s, box-shadow .12s;
}
.rs-swatch:hover { transform: scale(1.10); }
.rs-swatch.is-active {
  box-shadow: 0 0 0 2px var(--chat-bg, #1a1c23), 0 0 0 4px #fff;
}
.rs-swatch svg { width: 14px; height: 14px; }
.rs-swatch-custom {
  background: linear-gradient(135deg, #ff6363, #ffae57, #ffd96b, #87e69b, #69c4ff, #ad7bff, #ff6dd9);
  color: #fff; font-weight: 800; font-size: 16px;
}
.rs-swatch-custom input[type="color"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
}

/* Gradient stop pickers + live preview row */
.rs-grad-pickers {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(132,71,216,.06);
  border: 1px solid rgba(182,117,255,.18);
  border-radius: 8px;
}
.rs-grad-pickers label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.rs-grad-pickers input[type="color"] {
  width: 40px; height: 30px; border: 0; cursor: pointer;
  border-radius: 4px;
}
.rs-grad-live {
  flex: 1; min-width: 100px;
  padding: 6px 10px;
  font-size: 15px; font-weight: 800;
  border: 1px dashed rgba(255,255,255,.10);
  border-radius: 6px;
  text-align: center;
}

@media (max-width: 640px) {
  .rs-mode-grid { grid-template-columns: 1fr 1fr; }
  .rs-mode:nth-child(3) { grid-column: 1 / -1; }
  .rs-swatches { grid-template-columns: repeat(8, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════
   SERVER BOOST VIEW
   ════════════════════════════════════════════════════════════════════ */
.boost-view-overlay {
  position: fixed; inset: 0;

  background: rgba(0,0,0,.82);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9100;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .15s ease;
}
.boost-view-panel {
  position: relative;
  width: min(1160px, calc(100vw - 24px));
  height: min(760px, calc(100vh - 24px));

  background: var(--chat-bg, #1a1c23);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 320px;
  box-shadow: 0 30px 60px rgba(0,0,0,.55);
  isolation: isolate;
}
.boost-view-close {
  position: absolute; top: 12px; right: 14px;
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: rgba(0,0,0,.30); color: #fff;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  z-index: 5;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, transform .08s;
}
.boost-view-close:hover { background: rgba(0,0,0,.50); }

.boost-view-main {
  padding: 24px 28px 32px;
  overflow-y: auto;

  background: var(--chat-bg, #1a1c23);
  color: var(--text);
}
.bv-title {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 24px;
}
.bv-title-ico { color: #B675FF; display: inline-flex; }
.bv-title-ico svg { width: 22px; height: 22px; }
.bv-title h2 { margin: 0; font-size: 22px; color: var(--header); font-weight: 700; }

.bv-section { margin-bottom: 32px; }
.bv-h3 { font-size: 18px; color: var(--header); font-weight: 700; margin: 0 0 4px; }
.bv-p  { font-size: 13px; color: var(--muted); margin: 0 0 14px; line-height: 1.5; }

/* ── Level cards ── */
.bv-level-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, 1fr);
}
.bv-level-card {
  position: relative;
  background: var(--input-bg);
  border-radius: 10px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.04);
}
.bv-level-card.reached {
  background: linear-gradient(180deg, rgba(132,71,216,.10), var(--input-bg) 60%);
  border-color: rgba(182,117,255,.30);
}
.bv-level-track {
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: rgba(255,255,255,.08);
}
.bv-level-track-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF66C4, #B675FF, #6E66FF);
  transition: width .3s ease;
}
.bv-level-head {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0 10px;
}
.bv-level-badge {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #B675FF;
}
.bv-level-badge svg { width: 18px; height: 18px; }
.bv-level-name {
  font-size: 15px; font-weight: 700; color: var(--header);
}
.bv-perk-list {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 5px;
}
.bv-perk-list li {
  font-size: 12px; color: var(--text);
  padding-left: 4px;
  position: relative;
  line-height: 1.4;
}
.bv-perk-list li::before {
  content: '•';
  color: #B675FF;
  font-weight: 700;
  margin-right: 6px;
}
.bv-level-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--muted); font-weight: 600;
}
.bv-level-need {
  display: inline-flex; align-items: center; gap: 4px;
  color: #B675FF;
}
.bv-level-need svg { width: 12px; height: 12px; }
.bv-pill-active {
  background: rgba(35,165,90,.20);
  color: #2BC265;
  font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
}

/* ── Ek Avantaj cards ── */
.bv-perk-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.bv-perk-card {
  position: relative;
  background: var(--input-bg);
  border-radius: 10px;
  padding: 16px 14px;
  border: 1px solid rgba(255,255,255,.04);
  display: flex; flex-direction: column; gap: 6px;
  min-height: 200px;
}
.bv-perk-tag {
  position: absolute; top: 10px; right: 10px;
  background: linear-gradient(135deg, #5865F2, #8447D8);
  color: #fff;
  font-size: 9px; font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: .08em;
}
.bv-perk-art {
  align-self: center;
  width: 64px; height: 64px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(132,71,216,.20), rgba(255,102,196,.12));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  margin: 6px 0 10px;
}
.bv-perk-art svg { width: 36px; height: 36px; }
.bv-perk-title {
  font-size: 14px; color: var(--header); font-weight: 700;
}
.bv-perk-desc {
  font-size: 12px; color: var(--muted); line-height: 1.4;
  flex: 1;
}
.bv-perk-need {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: #B675FF; font-weight: 600;
  margin-top: 6px;
}
.bv-perk-need svg { width: 12px; height: 12px; }

/* ── Right aside: CTA + activity ── */
.boost-view-side {
  background: var(--sidebar-bg);
  padding: 24px 18px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  border-left: 1px solid rgba(255,255,255,.04);
}
.bv-side-card {
  background: var(--input-bg);
  border-radius: 10px;
  padding: 14px 14px 16px;
  border: 1px solid rgba(255,255,255,.04);
}
.bv-side-cta {
  background: linear-gradient(160deg, rgba(132,71,216,.18), rgba(255,102,196,.08));
  border-color: rgba(182,117,255,.30);
}
.bv-cta-head {
  font-size: 15px; font-weight: 700; color: var(--header);
  margin-bottom: 6px;
}
.bv-cta-text {
  font-size: 12px; color: var(--muted); line-height: 1.5;
  margin: 0 0 10px;
}

.bv-cta-badge-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: rgba(0,0,0,.20);
  border: 1px solid color-mix(in srgb, var(--bc, #F47FFF) 30%, transparent);
  border-radius: 10px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.bv-cta-badge-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--bc, #F47FFF) 18%, transparent), transparent 60%);
  pointer-events: none;
}
.bv-cta-badge-icon {
  width: 56px; height: 56px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bc, #F47FFF) 18%, transparent);
  font-size: 32px;
  color: var(--bc, #F47FFF);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--bc, #F47FFF) 40%, transparent));
}
.bv-cta-badge-info { flex: 1; min-width: 0; position: relative; }
.bv-cta-badge-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--header);
}
.bv-cta-badge-name > span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 130px;
}
.bv-cta-badge-inline {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.bv-cta-badge-inline > * { width: 16px; height: 16px; font-size: 14px; }
.bv-cta-badge-sub {
  font-size: 11px; color: var(--muted);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bv-cta-btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px;
  border: 0; border-radius: 8px;
  background: linear-gradient(135deg, #8447D8, #B675FF);
  color: #fff;
  font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer;
  transition: filter .12s, transform .08s;
}
.bv-cta-btn:hover  { filter: brightness(1.10); }
.bv-cta-btn:active { transform: scale(.98); }
.bv-cta-btn.is-free {
  background: linear-gradient(135deg, #23a55a, #1f8a4d);
}
.bv-cta-btn svg { width: 14px; height: 14px; }

.bv-side-h {
  font-size: 11px; font-weight: 700; color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 8px;
}
.bv-activity-list {
  display: flex; flex-direction: column; gap: 4px;
}
.bv-activity-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--text);
  padding: 4px 0;
}
.bv-activity-row svg { color: #B675FF; width: 12px; height: 12px; flex-shrink: 0; }
.bv-act-name { font-weight: 700; color: var(--header); }
.bv-act-action { color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-act-date { color: var(--muted); font-size: 11px; flex-shrink: 0; }

@media (max-width: 900px) {
  .boost-view-panel {
    grid-template-columns: 1fr;
    height: min(820px, calc(100vh - 24px));
  }
  .boost-view-side {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.04);
  }
  .bv-level-grid { grid-template-columns: 1fr; }
}
.boost-my-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--input-bg); border-radius: 6px; margin-top: 4px;
  font-size: 13px;
}
.boost-my-row > span:first-child { flex: 1; font-weight: 600; }
.boost-remove-btn {
  background: var(--red); color: #fff; border: none; cursor: pointer;
  padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700;
  font-family: inherit;
}
.boost-remove-btn:hover { filter: brightness(1.1); }
/* Muted "Kalıcı" / "🔒 N gün sonra taşınabilir" state when no action is available */
.boost-locked-note {
  color: var(--muted); font-size: 11px; font-weight: 600;
  padding: 4px 8px; border-radius: 4px; background: rgba(255,255,255,.04);
  white-space: nowrap;
}
/* Premium transfer button — violet (matches Premium 💎), distinct from the red recall */
.boost-transfer-btn {
  background: var(--brand); color: #fff; border: none; cursor: pointer;
  padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700;
  font-family: inherit; white-space: nowrap;
}
.boost-transfer-btn:hover { filter: brightness(1.1); }

/* ── Premium-boost transfer picker (server list inside the modal) ── */
.btr-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; margin-bottom: 14px; }
.btr-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 1px solid var(--border, rgba(255,255,255,.08));
  background: var(--input-bg); border-radius: var(--ds-radius-10, 10px);
  cursor: pointer; font-family: inherit; text-align: left; color: var(--text);
  transition: background .1s, border-color .1s;
}
.btr-row:hover { background: var(--hover-bg); border-color: var(--brand); }
.btr-ico { flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; font-weight: 700; font-size: 14px; }
.btr-ico-img { width: 32px; height: 32px; object-fit: cover; }
.btr-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btr-go { flex: none; color: var(--brand); display: inline-flex; opacity: .7; }
.btr-row:hover .btr-go { opacity: 1; }
.admin-shop-kind { font-size: 10px; background: var(--brand); color: #fff; padding: 1px 6px; border-radius: 10px; text-transform: uppercase; font-weight: 700; }
.admin-shop-inactive { font-size: 10px; background: var(--muted); color: #fff; padding: 1px 6px; border-radius: 10px; text-transform: uppercase; font-weight: 700; }

/* ── Admin shop CRUD ── */
.adm-shop-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.adm-shop-card {
  background: var(--input-bg);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.adm-shop-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 14px;
}
.adm-shop-card-info { flex: 1; min-width: 0; }
.adm-shop-card-name {
  font-size: 14px; font-weight: 700; color: var(--header);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.adm-shop-card-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.adm-shop-card-body {
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.10);
  display: flex; flex-direction: column; gap: 12px;
}

.adm-shop-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.adm-shop-grid label,
.adm-shop-card-body .ase-wide {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.adm-shop-grid input[type="text"],
.adm-shop-grid input[type="number"],
.adm-shop-grid select,
.ase-wide textarea,
.ase-wide input,
.ase-feat-row select,
.ase-feat-row input,
.ase-row-2 input,
.ase-row-2 select {
  padding: 8px 10px;
  background: var(--dark-bg);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  border-radius: 6px;
  font-family: inherit; font-size: 13px;
  outline: none;
  text-transform: none; font-weight: 500; letter-spacing: 0;
}
.adm-shop-grid input:focus,
.adm-shop-grid select:focus,
.ase-wide textarea:focus,
.ase-feat-row input:focus,
.ase-row-2 input:focus,
.ase-row-2 select:focus {
  border-color: var(--brand);
}
.ase-active-wrap {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  text-transform: none !important;
  font-size: 13px !important;
  color: var(--text) !important;
  font-weight: 500 !important;
}
.ase-active-wrap input { width: 16px; height: 16px; accent-color: var(--brand); }

.ase-row-2 {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.ase-row-2 label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.ase-row-2 input[type="color"] {
  height: 36px; padding: 2px; cursor: pointer;
}

/* Features editor */
.ase-features {
  background: rgba(255,255,255,.03);
  padding: 10px;
  border-radius: 8px;
  border: 1px dashed rgba(255,255,255,.10);
}
.ase-features-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.ase-features-head strong {
  font-size: 11px; color: var(--header); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.ase-feat-list { display: flex; flex-direction: column; gap: 6px; }
.ase-feat-row {
  display: grid;
  grid-template-columns: 140px 1fr 30px;
  gap: 8px; align-items: center;
}
.ase-feat-del {
  background: rgba(237,66,69,.16); color: var(--red);
  border: 1px solid rgba(237,66,69,.30);
  cursor: pointer;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  border-radius: 6px;
  transition: filter .12s;
}
.ase-feat-del:hover { filter: brightness(1.1); }

.ase-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ── Sunucu Takviyesi dropdown entry ── */
.sd-item.sd-boost {
  display: flex; align-items: center; justify-content: space-between;
  color: #F47FFF; font-weight: 600;
}
.sd-item.sd-boost:hover { background: linear-gradient(90deg, rgba(244,127,255,.25), rgba(88,101,242,.18)); color: #fff; }
.sd-item.sd-boost .sd-icon { display: flex; align-items: center; color: inherit; }

/* ════════════════════════════════════════════════════════════════════════
   SERVER SETTINGS — SYSTEM MESSAGES TAB
   ════════════════════════════════════════════════════════════════════════ */
.sys-msg-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--separator);
}
.sys-msg-row:last-of-type { border-bottom: none; }
.sys-msg-label { flex: 1; font-size: 14px; color: var(--text); }

.sys-msg-switch {
  position: relative; width: 44px; height: 24px; flex-shrink: 0;
  cursor: pointer;
}
.sys-msg-switch input { opacity: 0; width: 0; height: 0; }
.sys-switch-track {
  position: absolute; inset: 0;
  background: var(--muted); border-radius: 12px;
  transition: background .15s;
}
.sys-switch-track::before {
  content: ''; position: absolute;
  left: 3px; top: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%;
  transition: transform .15s;
}
.sys-msg-switch input:checked + .sys-switch-track { background: var(--brand); }
.sys-msg-switch input:checked + .sys-switch-track::before { transform: translateX(20px); }
.sys-msg-switch input:disabled + .sys-switch-track { opacity: .5; cursor: not-allowed; }

.sv-sys-select {
  width: 100%; padding: 10px 12px;
  background-color: var(--input-bg);
  border: 1px solid rgba(255,255,255,.08); border-radius: 6px;
  color: var(--text); font-family: inherit; font-size: 14px;
  cursor: pointer; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.sv-sys-select:hover  { border-color: rgba(255,255,255,.2); }
.sv-sys-select:focus  { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(88,101,242,.20); }
.sv-sys-select option { background-color: var(--dark-bg); }

/* ════════════════════════════════════════════════════════════════════════
   SYSTEM MESSAGES
   ════════════════════════════════════════════════════════════════════════ */
.msg-system {
  display: block;
  padding: 4px 20px;
  color: var(--text);
  font-size: 14px; line-height: 1.5;
}
.msg-system:hover { background: rgba(255,255,255,.02); }
.msg-system-row { display: flex; align-items: baseline; gap: 12px; }
.msg-system-arrow { font-size: 18px; font-weight: 700; flex-shrink: 0; line-height: 1; transform: translateY(2px); }
.msg-system-text { flex: 1; min-width: 0; }

.sys-react {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity .1s;
}
.msg-system:hover .sys-react { opacity: 1; }
.sys-react:hover { color: var(--header); background: var(--hover-bg); }

.msg-system .msg-reactions { margin: 4px 0 2px 30px; }
.msg-system-name { font-weight: 700; cursor: pointer; }
.msg-system-name:hover { text-decoration: underline; }
.msg-system-body { color: var(--text); }
.msg-system-ts {
  color: var(--muted); font-size: 12px;
  margin-left: 8px; font-variant-numeric: tabular-nums;
}
.msg-system[data-kind="system_boost"] {
  background: linear-gradient(90deg, rgba(244,127,255,.07), transparent 60%);
}

/* ════════════════════════════════════════════════════════════════════════
   BOOST SERVER PICKER
   ════════════════════════════════════════════════════════════════════════ */
.boost-srv-search {
  width: 100%; padding: 10px 14px;
  background: var(--input-bg);
  border: 1px solid rgba(255,255,255,.08); border-radius: 8px;
  color: var(--text); font-family: inherit; font-size: 14px;
  outline: none; margin-bottom: 12px;
  transition: border-color .12s, box-shadow .12s;
}
.boost-srv-search:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(88,101,242,.20);
}
.boost-srv-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 380px; overflow-y: auto;
}
.boost-srv-empty { text-align: center; padding: 32px; color: var(--muted); font-size: 13px; }
.boost-srv-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--input-bg);
  transition: background .12s, transform .08s;
}
.boost-srv-row:hover { background: var(--hover-bg); }
.boost-srv-icon {
  width: 44px; height: 44px; border-radius: 50%;
  flex-shrink: 0; object-fit: cover; display: flex;
  align-items: center; justify-content: center;
}
.boost-srv-icon-letter { color: #fff; font-weight: 800; font-size: 18px; }
.boost-srv-info { flex: 1; min-width: 0; }
.boost-srv-name { font-size: 15px; font-weight: 700; color: var(--header); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boost-srv-meta { font-size: 12px; color: var(--muted); margin-top: 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.boost-srv-count { color: #F47FFF; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.boost-srv-count svg { width: 13px; height: 13px; }
.boost-srv-count-empty { color: var(--muted); }
.boost-srv-level { color: var(--header); font-weight: 600; }

.boost-srv-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  background: rgba(244,127,255,.15); color: #F47FFF;
  border: 1px solid rgba(244,127,255,.4);
  cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600;
  transition: background .12s, color .12s, transform .08s;
}
.boost-srv-btn:hover  { background: rgba(244,127,255,.3); color: #fff; }
.boost-srv-btn:active { transform: scale(.97); }
.boost-srv-btn svg { width: 14px; height: 14px; }

/* DM in-chat call system message */
.dm-call-msg {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 16px; padding: 10px 14px;
  background: rgba(88,101,242,.08); border-radius: 8px;
  border-left: 3px solid var(--green);
}
.dm-call-msg.ended { border-left-color: var(--muted); background: rgba(255,255,255,.03); }
.dm-call-icon { font-size: 20px; }
.dm-call-info { flex: 1; min-width: 0; }
.dm-call-title { font-size: 14px; font-weight: 600; color: var(--header); }
.dm-call-dur { font-size: 12px; color: var(--muted); margin-top: 1px; font-variant-numeric: tabular-nums; }
.dm-call-join-btn {
  border: none; background: var(--green); color: #fff; cursor: pointer;
  padding: 6px 16px; border-radius: 6px; font-size: 13px; font-weight: 600;
}
.dm-call-join-btn:hover { filter: brightness(1.1); }

/* ════════════════════════════════════════════════════════════════════
   ACTIVITY CARDS + OAUTH CONNECTIONS
   ════════════════════════════════════════════════════════════════════ */

.user-activity {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px;
  background: var(--input-bg);
  border-radius: 8px;
  margin-top: 6px;
}
.user-activity + .user-activity { margin-top: 6px; }
.user-activity .act-icon-wrap {
  flex-shrink: 0; width: 36px; height: 36px;
  border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}

.user-activity .act-art { width: 36px; height: 36px; object-fit: contain; display: block; background: #0b0b0f; }
.user-activity .act-art-fallback {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #000));
  color: #fff;
}

.user-activity .act-icon-spot { background: transparent; }
.user-activity .act-icon-spot svg { width: 32px; height: 32px; }
.user-activity .act-text { flex: 1; min-width: 0; }
.user-activity .act-kicker {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}

.user-activity .act-title {
  font-size: 14px; font-weight: 600; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.user-activity .act-sub {
  font-size: 12px; color: var(--muted); opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-activity--spotify {
  border-left: 3px solid #1DB954;
}
.user-activity--game {
  border-left: 3px solid var(--brand);
}

.act-progress {
  margin-top: 6px;
  display: flex; flex-direction: column; gap: 3px;
}
.act-progress-bar {
  position: relative;
  height: 4px; border-radius: 2px;
  background: color-mix(in srgb, var(--muted) 30%, transparent);
  overflow: hidden;
}
.act-progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: #1DB954;
  transition: width .9s linear;
}
.act-progress-times {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--muted); opacity: .8;
}

.act-actions {
  display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
}
.act-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter .12s, transform .1s, background .12s;
}
.act-btn:hover  { transform: translateY(-1px); filter: brightness(1.08); }
.act-btn:active { transform: translateY(0); }
.act-btn-spotify {
  background: #1DB954; color: #fff;
}
.act-btn-spotify .act-btn-ico svg { width: 14px; height: 14px; display: block; }
.act-btn-listen {
  background: transparent; color: var(--text);
  border-color: var(--separator);
}
.act-btn-listen:hover { background: var(--hover-bg); }

.conn-chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.conn-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--input-bg);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: 12px; font-weight: 600;
  border: 1px solid var(--separator);
  transition: background .12s, transform .1s;
}
.conn-chip:hover { background: var(--hover-bg); transform: translateY(-1px); }
.conn-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--brand)); }
.conn-chip-handle { color: var(--header); }
.conn-chip-verified { color: #23A55A; font-weight: 800; margin-left: 2px; }

.oauth-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.oauth-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--input-bg);
  border-radius: 8px;
}
.oauth-row.connected { border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); }
.oauth-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.oauth-info { flex: 1; min-width: 0; }
.oauth-label {
  font-size: 14px; font-weight: 600; color: var(--header);
  display: flex; align-items: center; gap: 6px;
}
.oauth-verified { font-size: 11px; color: var(--green); font-weight: 700; }
.oauth-handle { font-size: 12px; color: var(--muted); margin-top: 2px; }
.oauth-btn {
  padding: 6px 14px; border-radius: 6px;
  font-size: 12px; font-weight: 700;
  border: none; cursor: pointer;
  transition: background .12s, transform .1s;
}
.oauth-btn--connect { background: var(--brand); color: #fff; }
.oauth-btn--connect:hover { background: var(--brand-hv); }
.oauth-btn--disconnect {
  background: transparent;
  color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 50%, transparent);
}
.oauth-btn--disconnect:hover { background: color-mix(in srgb, var(--red) 15%, transparent); }

/* ─────────────────────────────────────────────────────────────────────
   SETTINGS MODAL — SIDEBAR EXTRAS
   ───────────────────────────────────────────────────────────────────── */

.fm-nav-group-title {
  font-size: 11px; font-weight: 800;
  color: #c2c8d2;            /* brighter than --muted so sections stand out */
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 16px 10px 5px;
  margin-top: 4px;
  border-top: 1px solid var(--separator);
  white-space: nowrap;
}
.fm-sidebar .fm-nav:first-of-type + .fm-nav-group-title {
  margin-top: 0;
}

.fm-footer {
  margin-top: auto;
  padding: 12px 10px 4px;
  border-top: 1px solid var(--separator);
  font-size: 10px;
  color: var(--muted);
  line-height: 1.5;
}
.fm-footer-line {
  display: flex; justify-content: space-between;
  font-variant-numeric: tabular-nums;
}
.fm-footer-app { font-weight: 700; color: var(--text); }
.fm-footer-dim { opacity: .65; }

.ap-section { margin-bottom: 28px; }
.ap-section-title {
  font-size: 12px; font-weight: 800;
  color: var(--header);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--separator);
}
.ap-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--separator);
}
.ap-row:last-child { border-bottom: none; }
.ap-row-info { flex: 1; min-width: 0; }
.ap-row-title { font-size: 14px; font-weight: 600; color: var(--header); }
.ap-row-desc  { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }

/* Kayıtlı Oyunlar */
.games-current { margin-top: 8px; }
.games-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.games-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--input-bg);
  border-radius: 8px;
  transition: opacity .15s;
}
.games-row--current {
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  background: color-mix(in srgb, var(--brand) 8%, var(--input-bg));
}
.games-row.is-ignored { opacity: .5; }
.games-icon {
  flex-shrink: 0; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: var(--rail-bg);
  border-radius: 6px;
}
.games-info { flex: 1; min-width: 0; }
.games-name { font-size: 14px; font-weight: 600; color: var(--header); }
.games-sub  { font-size: 11px; color: var(--muted); margin-top: 2px; }
.games-empty {
  padding: 16px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  background: var(--input-bg);
  border-radius: 8px;
}

.oauth-icon {
  flex-shrink: 0; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
}
.oauth-icon svg { width: 18px; height: 18px; }

.conn-chip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
}
.conn-chip-icon svg { width: 14px; height: 14px; }

/* ════════════════════════════════════════════════════════════════════
   USER PROFILE CARD V2
   ════════════════════════════════════════════════════════════════════ */

.user-card-v2 {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 48px));
  background: var(--chat-bg);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.4);
  z-index: 9600;
  animation: chordRise .22s var(--ease-out);
}
.user-card-v2 .ucp-close {
  position: absolute; top: 14px; right: 14px;
  z-index: 3;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  color: #fff; font-size: 16px;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, transform .1s;
}
.user-card-v2 .ucp-close:hover { background: rgba(0,0,0,.75); transform: scale(1.08); }

.user-card-v2 .ucp-banner {

  position: absolute;
  top: 0; left: 0;
  width: 320px;
  height: 120px;
  z-index: 1;
  border-top-left-radius: 12px;
}

.user-card-v2 .ucp-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: blur(80px) saturate(1.4);
  opacity: 0.14;
  transform: scale(1.15);
  pointer-events: none;
}

.user-card-v2 .ucp-body {
  flex: 1; display: flex;
  min-height: 0;
  position: relative;
  z-index: 2;

}

.user-card-v2 .ucp-left {
  width: 320px; flex-shrink: 0;

  padding: 176px 20px 20px;
  overflow-y: auto;
  border-right: 1px solid var(--separator);
  background: color-mix(in srgb, var(--sidebar-bg) 97%, transparent);
}
.user-card-v2 .ucp-right {
  background: color-mix(in srgb, var(--chat-bg) 96%, transparent);
}
.user-card-v2 .ucp-avatar-wrap {

  position: absolute;
  left: 20px;
  top: 76px;
  z-index: 3;
  width: 92px; height: 92px;
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--sidebar-bg);
}
.user-card-v2 .ucp-avatar-wrap .av-img,
.user-card-v2 .ucp-avatar-wrap .av-initials {
  width: 92px !important; height: 92px !important;
  border-radius: 50% !important;
  font-size: 36px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.user-card-v2 .ucp-avatar-wrap .m-status {
  position: absolute; right: -2px; bottom: -2px;
  width: 22px; height: 22px;
  border: 4px solid var(--sidebar-bg);
  border-radius: 50%;
}
.user-card-v2 .ucp-name {
  font-size: 20px; font-weight: 800; color: var(--header);
  line-height: 1.2;
  word-break: break-word;
}
.user-card-v2 .ucp-handle-row {

  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  height: 20px;
  margin-top: 6px;
}
.user-card-v2 .ucp-handle {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  height: 100%;
  line-height: 1;
}

.user-card-v2 .ucp-badges-inline {
  display: flex;
  align-items: center;
  height: 100%;
  line-height: 0;

  transform: translateY(-2px);
}
.user-card-v2 .ucp-badges-inline .badge-row { gap: 3px; align-items: center; }
.user-card-v2 .ucp-badges-inline .badge-icon-wrap {
  width: 20px; height: 20px; border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
}
.user-card-v2 .ucp-badges-inline .badge-icon-wrap img {
  max-width: 20px; max-height: 20px; display: block;
}
.user-card-v2 .ucp-badges-inline .badge-icon-wrap span {
  font-size: 15px; line-height: 1;
}

.user-card-v2 .ucp-actions {
  display: flex; gap: 8px;
  margin-top: 14px;
}
.user-card-v2 .ucp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background .12s, transform .1s, box-shadow .15s;
}
.user-card-v2 .ucp-btn.primary {
  flex: 1;
  background: var(--brand);
  color: #fff;
}
.user-card-v2 .ucp-btn.primary:hover {
  background: var(--brand-hv);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent);
}
.user-card-v2 .ucp-btn.icon {
  width: 38px; padding: 8px;
  background: var(--input-bg);
  color: var(--muted);
}
.user-card-v2 .ucp-btn.icon:hover { color: var(--header); background: var(--hover-bg); }
.user-card-v2 .ucp-btn svg { width: 16px; height: 16px; }

.user-card-v2 .ucp-section { margin-top: 18px; }
.user-card-v2 .ucp-section-title {
  font-size: 11px; font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.ucp-conn-list { display: flex; flex-direction: column; gap: 6px; }
.ucp-conn-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--input-bg);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--separator);
  transition: background .12s, transform .1s, border-color .12s;
}
.ucp-conn-row:hover {
  background: var(--hover-bg);
  border-color: color-mix(in srgb, var(--brand) 50%, transparent);
  transform: translateY(-1px);
}
.ucp-conn-icon {
  flex-shrink: 0; width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
}
.ucp-conn-icon svg { width: 18px; height: 18px; }
.ucp-conn-handle {
  flex: 1; min-width: 0;
  color: var(--header);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ucp-conn-arrow {
  color: var(--muted);
  font-size: 14px;
  transition: transform .15s, color .15s;
}
.ucp-conn-row:hover .ucp-conn-arrow {
  color: var(--brand);
  transform: translate(2px, -2px);
}

.ucp-dates { display: flex; flex-direction: column; gap: 10px; }
.ucp-date-label {
  font-size: 10px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 2px;
}
.ucp-date-val {
  font-size: 13px; color: var(--header);
  font-variant-numeric: tabular-nums;
}

.ucp-since-stack { display: flex; flex-direction: column; gap: 6px; }
.ucp-since-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--input-bg);
  border-radius: 6px;
}
.ucp-since-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}
.ucp-since-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ucp-since-label {
  font-size: 10px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.ucp-since-val {
  font-size: 12px; font-weight: 600;
  color: var(--header);
  font-variant-numeric: tabular-nums;
}

.user-card-v2 .ucp-right {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.user-card-v2 .ucp-tabs {
  display: flex; gap: 4px;
  padding: 14px 20px 0;
  border-bottom: 1px solid var(--separator);
  background: var(--chat-bg);
  flex-shrink: 0;
}
.user-card-v2 .ucp-tab {
  padding: 10px 12px;
  background: none; border: none;
  color: var(--muted);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: color .12s;
  position: relative;
  white-space: nowrap;
}
.user-card-v2 .ucp-tab:hover { color: var(--header); }

.user-card-v2 .ucp-tab.active { color: var(--header); }

.user-card-v2 .ucp-tab-body {
  flex: 1; min-height: 0;
  padding: 20px;
  overflow-y: auto;
}
.user-card-v2 .ucp-tab-body .ucp-section { margin-top: 0; margin-bottom: 22px; }
.user-card-v2 .ucp-bio {
  font-size: 14px; color: var(--text); line-height: 1.5;
  background: var(--input-bg);
  padding: 12px 14px;
  border-radius: 8px;
  word-break: break-word;
  white-space: pre-wrap;
}

.ucp-act-large .user-activity {
  padding: 16px;
  gap: 16px;
}

.ucp-act-large .user-activity .act-icon-wrap,
.ucp-act-large .user-activity .act-art,
.ucp-act-large .user-activity .act-art-fallback {
  width: 72px; height: 72px;
}
.ucp-act-large .user-activity .act-title    { font-size: 16px; }
.ucp-act-large .user-activity .act-sub      { font-size: 13px; }
.ucp-act-large .user-activity .act-art-fallback { font-size: 32px; }
.ucp-act-large .user-activity .act-icon-spot svg { width: 56px; height: 56px; }

.ucp-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.ucp-empty > div + div { margin-top: 8px; }

.ucp-list { display: flex; flex-direction: column; gap: 4px; }
.ucp-list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
}
.ucp-list-row:hover { background: var(--hover-bg); }
.ucp-list-info { flex: 1; min-width: 0; }
.ucp-list-name {
  font-size: 14px; font-weight: 600; color: var(--header);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ucp-list-sub {
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ucp-server-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  color: #fff;
}

#user-card-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 9500;
  animation: chordFade .18s var(--ease-out);
}
@keyframes chordFade { from { opacity: 0 } to { opacity: 1 } }

/* ════════════════════════════════════════════════════════════════════
   USER PROFILE — COMPACT POPUP
   ════════════════════════════════════════════════════════════════════ */

.user-card-compact {
  position: fixed;
  z-index: 9600;
  width: 320px;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--sidebar-bg);
  border: 1px solid var(--separator);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);

  animation: chordRiseAnchored .18s var(--ease-menu-open);
  transform-origin: top left;
}

.user-card-compact .ucc-banner {

  height: 120px; flex-shrink: 0;
  background-color: var(--brand);
  background-position: center !important;
  background-size: cover !important;
}

.user-card-compact .ucc-avatar-wrap {
  position: relative;
  width: 80px; height: 80px;
  margin: -38px 0 0 14px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .12s;
  box-shadow: 0 0 0 6px var(--sidebar-bg);
}
.user-card-compact .ucc-avatar-wrap:hover { transform: scale(1.04); }
.user-card-compact .ucc-avatar-wrap .av-img,
.user-card-compact .ucc-avatar-wrap .av-initials {
  width: 80px !important; height: 80px !important;
  border-radius: 50% !important;
  font-size: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.user-card-compact .ucc-avatar-wrap .m-status {
  position: absolute; right: -2px; bottom: -2px;
  width: 18px; height: 18px;
  border: 4px solid var(--sidebar-bg);
  border-radius: 50%;
}

.user-card-compact .ucc-body {
  padding: 10px 14px 14px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  min-height: 0;
}

.user-card-compact .ucc-name {
  font-size: 18px; font-weight: 800;
  line-height: 1.2;
  word-break: break-word;
  color: var(--header);
}
.user-card-compact .ucc-handle-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  height: 19px;
  margin-top: 6px;
}
.user-card-compact .ucc-handle {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  height: 100%;
  line-height: 1;
}
.user-card-compact .ucc-badges-inline {
  display: flex;
  align-items: center;
  height: 100%;
  line-height: 0;
  transform: translateY(-2px);
}
.user-card-compact .ucc-badges-inline .badge-row { gap: 3px; align-items: center; }
.user-card-compact .ucc-badges-inline .badge-icon-wrap {
  width: 17px; height: 17px; border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
}
.user-card-compact .ucc-badges-inline .badge-icon-wrap img {
  max-width: 15px; max-height: 15px; display: block;
}
.user-card-compact .ucc-badges-inline .badge-icon-wrap span {
  font-size: 12px; line-height: 1;
}

/* Action buttons row */
.ucc-actions { display: flex; gap: 6px; margin-top: 10px; }
.ucc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; border: none;
  transition: background .12s, transform .1s;
}
.ucc-btn.primary {
  flex: 1;
  background: var(--brand); color: #fff;
}
.ucc-btn.primary:hover { background: var(--brand-hv); }
.ucc-btn.icon {
  width: 32px; padding: 6px;
  background: var(--input-bg); color: var(--muted);
}
.ucc-btn.icon:hover { color: var(--header); background: var(--hover-bg); }
.ucc-btn svg { width: 14px; height: 14px; }

/* Sections */
.ucc-section { margin-top: 12px; }
.ucc-section-title {
  font-size: 10px; font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.ucc-bio {
  font-size: 13px; color: var(--text); line-height: 1.5;
  background: var(--input-bg);
  padding: 8px 10px;
  border-radius: 6px;
  word-break: break-word;
  white-space: pre-wrap;
  max-height: 100px;
  overflow-y: auto;
}

/* Compact connection pill strip */
.ucc-conn-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.ucc-conn-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--input-bg);
  border: 1px solid var(--separator);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: var(--header);
  text-decoration: none;
  transition: background .12s, transform .1s, border-color .12s;
}
.ucc-conn-pill:hover {
  background: var(--hover-bg);
  border-color: color-mix(in srgb, var(--brand) 50%, transparent);
  transform: translateY(-1px);
}
.ucc-conn-icon { display: inline-flex; width: 14px; height: 14px; }
.ucc-conn-icon svg { width: 14px; height: 14px; }
.ucc-conn-handle { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ucc-view-full {
  margin-top: 14px;
  padding: 8px;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--separator);
  border-radius: 6px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ucc-view-full:hover {
  background: var(--hover-bg);
  color: var(--header);
  border-color: color-mix(in srgb, var(--brand) 50%, transparent);
}

.user-card-compact .user-activity {
  padding: 8px 10px;
}
.user-card-compact .user-activity .act-icon-wrap,
.user-card-compact .user-activity .act-art,
.user-card-compact .user-activity .act-art-fallback {
  width: 32px; height: 32px;
}
.user-card-compact .user-activity .act-art-fallback { font-size: 16px; }
.user-card-compact .user-activity .act-title { font-size: 13px; }
.user-card-compact .user-activity .act-sub { font-size: 11px; }
.user-card-compact .user-activity .act-icon-spot svg { width: 28px; height: 28px; }

.user-card-compact .user-activity .act-progress,
.user-card-compact .user-activity .act-actions { display: none; }

/* ════════════════════════════════════════════════════════════════════
   PROFILE CARD V2 FIXES
   ════════════════════════════════════════════════════════════════════ */

.user-card-v2 .ucp-name {
  color: var(--header);
}

#user-card-backdrop {
  z-index: 9500;
}

/* ════════════════════════════════════════════════════════════════════
   PROFILIM TAB
   ════════════════════════════════════════════════════════════════════ */

.pf-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 880px) {
  .pf-split { grid-template-columns: 1fr; }
}

.pf-edit-col { min-width: 0; }
.pf-edit-col textarea {
  width: 100%;
  resize: vertical;
  background: var(--input-bg);
  border: 1px solid var(--separator);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.pf-preview-col { display: flex; flex-direction: column; gap: 8px; }
.fm-field-label-top {
  font-size: 11px; font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.pf-preview-card {
  background: var(--sidebar-bg);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  position: relative;
}

.pf-preview-banner {
  width: 100%;
  height: 120px;
  position: relative;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.pf-preview-avatar {

  position: absolute;
  left: 16px;
  top: 78px;
  z-index: 2;
  width: 84px; height: 84px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  box-shadow: 0 0 0 5px var(--sidebar-bg);
}
.pf-preview-avatar #pf-avatar-preview,
.pf-preview-avatar .av-img,
.pf-preview-avatar .av-initials {
  width: 84px !important; height: 84px !important;
  border-radius: 50% !important;
  font-size: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.pf-preview-body {
  padding: 52px 16px 16px;
}
.pf-preview-name {
  font-size: 18px; font-weight: 800;
  color: var(--header);
  line-height: 1.2;
  word-break: break-word;
}

.pf-preview-handle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  height: 18px;
  margin-top: 4px;
}
.pf-preview-handle {
  font-size: 12px; color: var(--muted);
  display: flex;
  align-items: center;
  height: 100%;
  line-height: 1;
}
.pf-preview-badges-inline {
  display: flex;
  align-items: center;
  height: 100%;
  line-height: 0;
  transform: translateY(-2px);
}
.pf-preview-badges-inline .badge-row { gap: 3px; align-items: center; }
.pf-preview-badges-inline .badge-icon-wrap {
  width: 16px; height: 16px; border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pf-preview-badges-inline .badge-icon-wrap img { max-width: 16px; max-height: 16px; display: block; }
.pf-preview-badges-inline .badge-icon-wrap span { font-size: 11px; line-height: 1; }

.pf-preview-section { margin-top: 12px; }
.pf-preview-section-title {
  font-size: 10px; font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.pf-preview-bio {
  font-size: 13px; color: var(--text); line-height: 1.5;
  background: var(--input-bg);
  padding: 8px 10px;
  border-radius: 6px;
  word-break: break-word;
  white-space: pre-wrap;
  max-height: 100px;
  overflow-y: auto;
}

/* Admin → İkonlar tablosu */
.icons-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px;
  background: var(--input-bg);
  border-radius: 8px;
  margin-bottom: 8px;
}
.icons-preview {
  flex-shrink: 0; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sidebar-bg);
  border-radius: 6px;
  font-size: 22px;
}
.icons-meta { flex: 1; min-width: 0; }
.icons-label {
  font-size: 14px; font-weight: 600; color: var(--header);
}
.icons-key {
  font-size: 11px; color: var(--muted);
  font-family: 'Consolas','Monaco',monospace;
  margin-top: 2px;
}
.icons-controls {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}

.icons-size-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px;
}
.icons-size-label {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.icons-size {
  flex: 1;
  height: 4px;
  accent-color: var(--brand);
  cursor: pointer;
}
.icons-size-val {
  font-size: 11px; color: var(--muted);
  font-family: ui-monospace, Consolas, monospace;
  min-width: 40px; text-align: right;
}

.icons-preview > * {
  transform: scale(var(--icon-scale, 1));
  transition: transform .08s var(--ease-out);
}
.icons-input {
  width: 110px;
  padding: 6px 10px;
  background: var(--sidebar-bg);
  border: 1px solid var(--separator);
  border-radius: 6px;
  color: var(--text);
  font-size: 16px;
  text-align: center;
}
.icons-upload, .icons-clear {
  width: 32px; height: 32px;
  padding: 0; font-size: 14px;
}
.icons-save {
  padding: 6px 12px;
  font-size: 12px;
}

.icons-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

.actchip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--muted);
  margin-top: 1px;
  max-width: 100%;
  line-height: 1.2;
  overflow: hidden;
}
.actchip-img {
  width: 14px; height: 14px;
  border-radius: 3px;
  object-fit: contain;
  background: #0b0b0f;
  flex-shrink: 0;
}
.actchip-emoji {
  font-size: 12px;
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.actchip-spot-icon {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.actchip-spot-icon svg { width: 14px; height: 14px; display: block; }
.actchip-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted);
}
.actchip-game .actchip-text,
.actchip-spotify .actchip-text { color: var(--muted); }

.member-item .m-info { display: flex; flex-direction: column; min-width: 0; gap: 1px; }

/* ════════════════════════════════════════════════════════════════════
   MOTION POLISH LAYER
   ════════════════════════════════════════════════════════════════════ */

.fm-save-btn, .fm-upload-btn, .fm-remove-btn,
.modal-btn, .dz-btn, .bv-cta-btn,
.boost-pill,
.fi-btn, .rs-unlock-btn,
.act-btn {
  transition:
    background .14s var(--ease),
    color      .14s var(--ease),
    transform  .08s var(--ease-out),
    box-shadow .14s var(--ease),
    filter     .12s var(--ease);
}
.fm-save-btn:active, .fm-upload-btn:active, .fm-remove-btn:active,
.modal-btn:active,    .dz-btn:active,        .bv-cta-btn:active,
.boost-pill:active,
.fi-btn:active,       .rs-unlock-btn:active,
.act-btn:active       { transform: scale(.96); }

.rail-server, .dm-item, .member-item, .channel-item,
.home-friends-btn, .ucp-tab, .re-tab,
.fm-nav-item, .sd-item,
.bv-side-card, .bv-perk-card, .bv-level-card {
  transition:
    background-color .12s var(--ease),
    color            .12s var(--ease),
    transform        .14s var(--ease-out),
    border-color     .14s var(--ease);
}

.dm-item:hover:not(.active),
.member-item:hover { background-color: var(--hover-bg); }

.ch-icon, .m-status, .actchip svg, .app-icon,
.msg-tool, .header-call-btn, .ucc-btn svg, .ucp-btn svg {
  transition: color .12s var(--ease), opacity .12s var(--ease), transform .1s var(--ease-out);
}

.m-status { transition: background-color .14s var(--ease), box-shadow .14s var(--ease); }

input, textarea, select {
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease), background-color .12s var(--ease);
}
input:focus, textarea:focus, select:focus { box-shadow: var(--ring-brand); }

.header-search-bar input:focus,
.cp-search input:focus,
.sve-name-inp:focus,
.add-friend-form input:focus,
.roles-search-inp:focus,
.invite-modal-search input:focus,
.sv-vanity-row input:focus { box-shadow: none; }

.add-friend-form:focus-within,
.roles-search-wrap:focus-within,
.invite-modal-search:focus-within,
.sv-vanity-row:focus-within {
  border-color: var(--brand);
  box-shadow: var(--ring-brand);
}

.re-tab, .ucp-tab {
  position: relative;
}
.re-tab::after, .ucp-tab::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  background: var(--brand);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s var(--ease-out);
}
.re-tab.active::after, .ucp-tab.active::after { transform: scaleX(1); }

.toast { transition: opacity .2s var(--ease), transform .2s var(--ease); }

.dropdown, .ctx-menu, .server-dropdown{
  transform-origin: top center;
  animation: chordPopMenu .14s var(--ease-menu-open);
}
@keyframes chordPopMenu {
  from { opacity: 0; transform: translateY(-4px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);  }
}

.fm-nav-item {
  position: relative;
  overflow: hidden;
}
.fm-nav-item::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--brand);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .2s var(--ease-out);
}
.fm-nav-item.active::before { transform: scaleY(1); }

.rs-swatch.is-active svg,
.rs-mode.is-active::after { animation: chordCheckPop .26s var(--ease-menu-open); }
@keyframes chordCheckPop {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

.member-item { animation: chordMemberIn .22s var(--ease-out) both; }
@keyframes chordMemberIn {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

.dm-item, .channel-item {
  animation: chordRowIn .18s var(--ease-out) both;
}
@keyframes chordRowIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.actchip { transition: opacity .18s var(--ease); }

/* ──────────────────────────────────────────────────────────────
   IN-APP UPDATE BANNER
   ────────────────────────────────────────────────────────────── */
.chord-update-banner {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 9700;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px 12px 16px;
  background: linear-gradient(135deg, #5865F2 0%, #8447D8 100%);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(132,71,216,.45),
              0 4px 12px rgba(0,0,0,.4);
  max-width: 380px;
  font-family: inherit;
  animation: cubSlideIn .35s var(--ease-menu-open);
}
@keyframes cubSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.cub-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.cub-icon svg { animation: cubSpin 2.4s linear infinite; }
@keyframes cubSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.cub-text { flex: 1; min-width: 0; }
.cub-title {
  font-size: 14px; font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
}
.cub-sub {
  font-size: 12px;
  opacity: .85;
  margin-top: 2px;
}
.cub-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer;
  transition: filter .12s, transform .08s;
}
.cub-btn:active { transform: scale(.96); }
.cub-btn-primary {
  background: #fff;
  color: #5865F2;
}
.cub-btn-primary:hover  { filter: brightness(.96); }
.cub-btn-primary:disabled { opacity: .7; cursor: progress; }
.cub-close {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, transform .08s;
}
.cub-close:hover  { background: rgba(255,255,255,.22); }
.cub-close:active { transform: scale(.9); }

/* ════════════════════════════════════════════════════════════════════
   STREAMER MODE
   ════════════════════════════════════════════════════════════════════ */

body.streamer-hide-personal .streamer-hide,
body.streamer-hide-personal #pf-email,
body.streamer-hide-personal #pf-email-mask,
body.streamer-hide-personal #pf-phone,
body.streamer-hide-personal #pf-phone-mask,
body.streamer-hide-personal .oauth-handle,
body.streamer-hide-invites #invite-display,
body.streamer-hide-invites #sv-invite-display,
body.streamer-hide-invites .invite-embed-name,
body.streamer-hide-invites .sv-vanity-row input {
  filter: blur(6px);
  user-select: none;
  position: relative;
  transition: filter .15s ease;
}
body.streamer-hide-personal .streamer-hide:hover,
body.streamer-hide-invites #invite-display:hover{
  filter: blur(0);
}

/* Yayıncı Modu göstergesi artık titlebar'ın solunda (#tb-streamer) — eski
   sağ-üst sabit pill kaldırıldı (pencere kontrolleri/arama kutusuyla çakışıyordu). */

/* ════════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ════════════════════════════════════════════════════════════════════ */

body.a11y-underline-links .msg-link,
body.a11y-underline-links .a11y-pv-link { text-decoration: underline; }

body.a11y-reduce-motion *,
body.a11y-reduce-motion *::before,
body.a11y-reduce-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* Accessibility tab — live preview card */
.a11y-preview {
  border: 1px solid var(--ds-stroke, var(--separator));
  border-radius: var(--ds-radius-m, 10px);
  background: var(--chat-bg);
  padding: 14px 16px;
}
.a11y-pv-row { display: flex; gap: 14px; align-items: flex-start; }
.a11y-pv-av img, .a11y-pv-av .av-initials { width: 40px; height: 40px; border-radius: 50%; }
.a11y-pv-body { flex: 1; min-width: 0; }
.a11y-pv-head { margin-bottom: 2px; }
.a11y-pv-name { font-weight: 700; color: var(--header); }
.a11y-pv-ts   { font-size: 11px; color: var(--muted); margin-left: 6px; }
.a11y-pv-text { color: var(--text); line-height: 1.4; }
.a11y-pv-link { color: var(--brand, #5865F2); text-decoration: none; cursor: pointer; }
.a11y-pv-link:hover { text-decoration: underline; }

body[data-msg-display="compact"] .a11y-pv-text { line-height: 1.25; }

/* Accessibility tab — radio group */
.a11y-radio-group { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.a11y-radio {
  display: flex; align-items: center; gap: 11px;
  cursor: pointer; color: var(--text); font-size: 14px; font-weight: 500;
}
.a11y-radio input { position: absolute; opacity: 0; pointer-events: none; }
.a11y-radio-dot {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--muted);
  transition: border-color .12s var(--ease, ease), box-shadow .12s var(--ease, ease);
  position: relative;
}
.a11y-radio input:checked + .a11y-radio-dot {
  border-color: var(--brand, #5865F2);
}
.a11y-radio input:checked + .a11y-radio-dot::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--brand, #5865F2);
}
.a11y-radio:hover .a11y-radio-dot { border-color: var(--header); }

/* ════════════════════════════════════════════════════════════════════
   REVEAL FIELD
   ════════════════════════════════════════════════════════════════════ */
.reveal-field {
  position: relative;
  display: flex;
}
.reveal-field > input {
  flex: 1;
  padding-right: 44px;
  background: var(--input-bg);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 10px 44px 10px 14px;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  outline: none;
}
.reveal-field #pf-email-mask,
.reveal-field #pf-phone-mask {
  font-family: monospace;
  letter-spacing: 4px;
  color: var(--muted);
  cursor: default;
}
.reveal-field .reveal-real { display: none; }
.reveal-field .reveal-real.is-shown { display: block; }
.reveal-field .reveal-real.is-shown + #pf-email-mask,
.reveal-field .reveal-real.is-shown + #pf-phone-mask { display: none; }

.reveal-field > input:not(.reveal-real):not([style*="display: none"]) ~ .reveal-real { display: none; }
.reveal-field {
  display: grid;
  grid-template-columns: 1fr;
}
.reveal-field > input { grid-column: 1; grid-row: 1; }
.reveal-btn {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: background .12s;
}
.reveal-btn:hover { background: var(--hover-bg); }

/* ════════════════════════════════════════════════════════════════════
   WISHLIST BATCH
   ════════════════════════════════════════════════════════════════════ */

.wl-page { padding: 24px 28px 32px; overflow-y: auto; max-height: 100%; }
.wl-title { font-size: 22px; color: var(--header); font-weight: 800; margin: 0 0 6px; }
.wl-sub { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.wl-section-h { font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 12px 0 8px; }
.wl-loading, .wl-empty {
  text-align: center; color: var(--muted);
  padding: 60px 20px; font-size: 14px;
}
.wl-empty-icon { font-size: 48px; margin-bottom: 12px; }
.wl-empty h2 { color: var(--header); font-size: 18px; margin: 0 0 8px; font-weight: 700; }
.wl-empty p { font-size: 13px; line-height: 1.5; }

.wl-list { display: flex; flex-direction: column; gap: 10px; }
.wl-card {
  background: var(--input-bg);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .12s var(--ease-out), border-color .14s var(--ease);
}
.wl-card:hover { transform: translateY(-1px); border-color: var(--brand); }
.wl-card-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--muted); font-weight: 600;
}
.wl-card-where { color: #B675FF; font-weight: 700; }
.wl-card-when  { font-family: ui-monospace, Consolas, monospace; opacity: .8; }
.wl-card-body { display: flex; flex-direction: column; gap: 4px; }
.wl-card-author { font-size: 13px; font-weight: 700; }
.wl-card-text {
  font-size: 14px; color: var(--text);
  line-height: 1.45;
  word-break: break-word;
}
.wl-card-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 4px;
}
.wl-card-jump, .wl-card-remove {
  padding: 6px 12px;
  border: 0; border-radius: 6px;
  font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: filter .12s, transform .08s;
}
.wl-card-jump  { background: var(--brand); color: #fff; }
.wl-card-remove{ background: rgba(237,66,69,.16); color: var(--red); }
.wl-card-jump:hover, .wl-card-remove:hover { filter: brightness(1.1); }
.wl-card-jump:active, .wl-card-remove:active { transform: scale(.96); }

.wl-rem-card.is-fired { opacity: .65; }
.wl-rem-card.is-pending .wl-card-where { color: #F0B232; }

/* Reminder picker modal */
.rem-presets {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.rem-preset {
  padding: 10px 14px;
  background: var(--input-bg); color: var(--text);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: border-color .14s, background .14s, transform .08s;
}
.rem-preset:hover { border-color: var(--brand); background: var(--hover-bg); }
.rem-preset:active { transform: scale(.97); }

/* Edit history modal */
.edit-hist-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 60vh; overflow-y: auto;
}
.edit-hist-row {
  background: var(--input-bg);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 8px;
  padding: 10px 12px;
}
.edit-hist-row.edit-hist-current {
  border-color: rgba(132,71,216,.40);
  background: rgba(132,71,216,.08);
}
.edit-hist-head {
  font-size: 11px; color: var(--muted); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 6px;
  font-family: ui-monospace, Consolas, monospace;
}
.edit-hist-row.edit-hist-current .edit-hist-head { color: #B675FF; }
.edit-hist-body {
  font-size: 14px; color: var(--text);
  line-height: 1.4; white-space: pre-wrap; word-break: break-word;
}

/* User-note textarea */
.ucp-note {
  width: 100%;
  padding: 10px 12px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  resize: vertical;
  min-height: 60px;
  transition: border-color .14s var(--ease);
}
.ucp-note:focus { border-color: var(--brand); outline: none; }
.ucp-note-status {
  font-size: 11px; color: var(--muted);
  margin-top: 4px; min-height: 14px;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════
   ✦ DESIGN SYSTEM 2.0
   ════════════════════════════════════════════════════════════════════ */

:root, body {

  --ds-accent:        var(--brand);
  --accent-soft:      color-mix(in srgb, var(--brand) 16%, transparent);
  --ds-accent-soft:   color-mix(in srgb, var(--brand) 16%, transparent);
  --ds-accent-ring:   color-mix(in srgb, var(--brand) 38%, transparent);
  --ds-grad:          linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 55%, #c26bff) 100%);
  /* Surface elevation steps */
  --ds-surface-1:     color-mix(in srgb, #ffffff 3%,  transparent);
  --ds-surface-2:     color-mix(in srgb, #ffffff 5%,  transparent);
  --ds-surface-3:     color-mix(in srgb, #ffffff 8%,  transparent);
  --ds-stroke:        color-mix(in srgb, #ffffff 7%,  transparent);
  --ds-stroke-strong: color-mix(in srgb, #ffffff 12%, transparent);
  --ds-stroke-accent: color-mix(in srgb, var(--brand) 30%, transparent);

  --ds-radius-s: 10px;
  --ds-radius-m: 14px;
  --ds-radius-l: 20px;
  --ds-shadow-0: 0 1px 3px rgba(0,0,0,.15);
  --ds-shadow-1: 0 2px 8px rgba(0,0,0,.25);
  --ds-shadow-2: 0 8px 24px rgba(0,0,0,.35);
  --ds-shadow-3: 0 16px 48px rgba(0,0,0,.45);
}

body[data-theme="light"] {
  --ds-surface-1:     color-mix(in srgb, #060607 4%,  transparent);
  --ds-surface-2:     color-mix(in srgb, #060607 6%,  transparent);
  --ds-surface-3:     color-mix(in srgb, #060607 9%,  transparent);
  --ds-stroke:        color-mix(in srgb, #060607 10%, transparent);
  --ds-stroke-strong: color-mix(in srgb, #060607 16%, transparent);
  --ds-shadow-0: 0 1px 3px rgba(0,0,0,.06);
  --ds-shadow-1: 0 2px 8px rgba(0,0,0,.10);
  --ds-shadow-2: 0 8px 24px rgba(0,0,0,.14);
  --ds-shadow-3: 0 16px 48px rgba(0,0,0,.18);
}

body[data-theme="light"] *::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, #060607 18%, transparent);
  background-clip: padding-box;
  border: 2px solid transparent;
}
body[data-theme="light"] *::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, #060607 30%, transparent);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* ── Typography polish ─────────────────────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ds-accent-ring); color: #fff; }

.friends-section-title, .home-dm-header span:first-child,
.cat-name, .ucc-section-title, .ucp-section-title,
.fm-nav-group-title, .pf-preview-section-title {
  letter-spacing: .08em;
  font-weight: 700;
}

/* ── Slim overlay scrollbars ────────────────────────────── */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, #ffffff 14%, transparent);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, #ffffff 24%, transparent);
  background-clip: padding-box;
  border: 2px solid transparent;
}
*::-webkit-scrollbar-corner { background: transparent; }

/* ── Server rail ───────────────────────────────── */
#server-rail { padding: 14px 0 10px; gap: 10px; }
.server-icon {
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px var(--ds-stroke);
  transition: border-radius .28s var(--ease-menu-open),
              background .18s var(--ease),
              color .18s var(--ease),
              transform .18s var(--ease-out),
              box-shadow .18s var(--ease);
}
.server-icon:hover {
  border-radius: 14px;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 35%, transparent);
}
.server-icon.active {
  border-radius: 14px;
  box-shadow: 0 0 0 2px var(--ds-accent-ring), 0 6px 16px color-mix(in srgb, var(--brand) 28%, transparent);
}
.server-icon img { border-radius: inherit; }
.server-pip { border-radius: 0 6px 6px 0; background: var(--ds-grad); width: 5px; left: -14px; }
.server-separator { width: 24px; background: var(--ds-stroke-strong); }
.dm-bubble { border-radius: 24px; }
.dm-bubble:hover { border-radius: 14px; }

/* ── Sidebar + channel list ────────────────────────────────────────── */
#sidebar { border-right: 1px solid var(--ds-stroke); }
.channel-item {
  margin: 1px 8px;
  border-radius: var(--ds-radius-s);
  position: relative;
  transition: background .14s var(--ease), color .14s var(--ease), padding-left .18s var(--ease-out);
}
.channel-item:hover { padding-left: 14px; }
.channel-item.active { background: var(--ds-accent-soft); }

.channel-item.muted .ch-name,
.channel-item.muted .ch-icon { opacity: .4; }
.channel-item.muted:hover .ch-name { opacity: .65; }

.cat-settings {
  display: none;
  margin-left: auto;
  margin-right: 2px;
  cursor: pointer;
  color: var(--muted);
  width: 16px; height: 16px;
  align-items: center; justify-content: center;
}
.category-header:hover .cat-settings { display: inline-flex; }
.cat-settings:hover { color: var(--header); }
.category-header:hover .cat-settings + .cat-add { margin-left: 2px; }

/* ── Custom status text ── */
.m-custom-status {
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 1px;
}

/* ══ Message search ══════════════════════════════════ */
/* Suggestion / filter dropdown */
#msg-search-dd {
  position: fixed;
  z-index: 8600;
  width: 380px;
  max-height: 440px;
  overflow-y: auto;
  background: var(--sidebar-bg);
  border: 1px solid var(--separator);
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.5));
  padding: 8px;
}
.msd-sect {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 8px 4px;
  user-select: none;
}
.msd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
}
.msd-item:hover { background: var(--hover-bg); }
.msd-item svg { flex-shrink: 0; }
.msd-glyph {
  width: 18px; text-align: center;
  font-size: 15px; font-weight: 700;
  flex-shrink: 0;
}
.msd-av { flex-shrink: 0; line-height: 0; }
.msd-text { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.msd-text b { font-size: 13.5px; color: var(--header); font-weight: 600; }
.msd-text span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.msd-chname { color: var(--header); }
.msd-empty { padding: 8px 10px; font-size: 13px; color: var(--muted); }

/* Header search bar */
#header-search-clear {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  padding: 0 2px;
  flex-shrink: 0;
}
#header-search-clear:hover { color: var(--header); }

/* Docked results panel */
#msg-search-panel {
  width: 420px; min-width: 420px;
  background: var(--sidebar-bg);
  border-left: 1px solid var(--separator);
  display: flex; flex-direction: column;
  min-height: 0;
}
/* DM message-search results */
#dm-search-panel {
  position: fixed; z-index: 8500;
  width: 380px; max-height: 60vh; overflow-y: auto;
  background: var(--sidebar-bg);
  border: 1px solid var(--separator);
  border-radius: var(--ds-radius-m, 10px);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.5));
  padding: 8px;
}
#dm-search-panel .msr-head {
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  color: var(--muted); padding: 4px 8px 8px;
}
#dm-search-panel .msr-item { padding: 8px 10px; border-radius: 6px; cursor: pointer; }
#dm-search-panel .msr-item:hover { background: var(--hover-bg); }
#dm-search-panel .msr-meta { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
#dm-search-panel .msr-meta b { color: var(--header); font-weight: 600; }
#dm-search-panel .msr-text {
  font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.msr-top {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--separator);
  flex-shrink: 0;
}
.msr-count { font-size: 14.5px; font-weight: 700; color: var(--header); flex: 1; }
.msr-sort, .msr-close {
  border: 0; border-radius: 6px;
  background: var(--hover-bg);
  color: var(--text);
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  padding: 5px 10px;
  cursor: pointer;
}
.msr-sort:hover, .msr-close:hover { background: var(--input-bg); color: var(--header); }
.msr-close { padding: 5px 9px; }
.msr-list { flex: 1; overflow-y: auto; padding: 10px 12px 16px; }
.msr-group {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 2px 6px;
}
.msr-group:first-child { padding-top: 4px; }
.msr-group-ch { font-size: 13px; font-weight: 700; color: var(--header); }
.msr-group-cat { margin-left: auto; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.msr-card {
  display: flex; gap: 10px;
  padding: 10px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: var(--ds-surface-1, var(--hover-bg));
  border: 1px solid var(--ds-stroke, transparent);
  cursor: pointer;
  transition: border-color .1s, background .1s;
}
.msr-card:hover { border-color: var(--brand); background: var(--hover-bg); }
.msr-av { flex-shrink: 0; line-height: 0; }
.msr-body { min-width: 0; flex: 1; }
.msr-meta {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 2px;
}
.msr-meta b { font-size: 14px; color: var(--header); font-weight: 600; }
.msr-ts { font-size: 11px; color: var(--muted); }
.msr-text {
  font-size: 13.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.msr-att { font-size: 11.5px; color: var(--muted); }
mark.msr-hl {
  background: rgba(240,178,50,.45);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
.msr-none { color: var(--muted); font-size: 13.5px; text-align: center; padding: 32px 16px; }

/* ── Pinned messages popover ── */
#pins-pop {
  position: fixed;
  z-index: 8600;
  width: 400px;
  max-height: 480px;
  display: flex; flex-direction: column;
  background: var(--sidebar-bg);
  border: 1px solid var(--separator);
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.5));
  overflow: hidden;
}
.pins-head {
  padding: 12px 14px;
  font-size: 14px; font-weight: 700;
  color: var(--header);
  border-bottom: 1px solid var(--separator);
  flex-shrink: 0;
}
.pins-list { flex: 1; overflow-y: auto; padding: 8px; }
.pins-empty {
  color: var(--muted); font-size: 13.5px;
  text-align: center; padding: 28px 14px;
}
.pins-empty span { font-size: 12px; }
.pin-card {
  position: relative;
  display: flex; gap: 10px;
  padding: 10px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: var(--ds-surface-1, var(--hover-bg));
  border: 1px solid var(--ds-stroke, transparent);
  cursor: pointer;
}
.pin-card:hover { border-color: var(--brand); }
.pin-av { flex-shrink: 0; line-height: 0; }
.pin-body { min-width: 0; flex: 1; }
.pin-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.pin-meta b { font-size: 13.5px; color: var(--header); font-weight: 600; }
.pin-meta span { font-size: 11px; color: var(--muted); }
.pin-text {
  font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.pin-unpin {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--muted);
  font-size: 11px; cursor: pointer;
  visibility: hidden;
}
.pin-card:hover .pin-unpin { visibility: visible; }
.pin-unpin:hover { background: var(--red); color: #fff; }

.msg-system[data-kind="system_pin"] { cursor: pointer; }
.msg-system[data-kind="system_pin"]:hover .msg-system-body { color: var(--header); }

/* ── Edit history ── */
.edit-hist-row.edit-hist-clickable { cursor: pointer; transition: background .1s, border-color .1s; }
.edit-hist-row.edit-hist-clickable:hover { background: var(--hover-bg); border-color: var(--brand); }
.edit-hist-revert {
  float: right;
  font-size: 11px; font-weight: 700;
  color: var(--brand);
  opacity: 0;
  transition: opacity .1s;
}
.edit-hist-row.edit-hist-clickable:hover .edit-hist-revert { opacity: 1; }

.header-search-bar input:focus-visible,
.cp-search input:focus-visible,
.sve-name-inp:focus-visible,
.add-friend-form input:focus-visible,
.roles-search-wrap input:focus-visible,
.invite-modal-search input:focus-visible,
.sv-vanity-row input:focus-visible,
.input-wrapper input:focus-visible,
#message-input:focus-visible {
  outline: none;
}

@keyframes msgJumpFlash { 0%,60% { background: var(--ds-accent-soft); } 100% { background: transparent; } }
.msg-jump-highlight { animation: msgJumpFlash 2.2s var(--ease, ease); border-radius: var(--ds-radius-s); }

/* ── Custom emoji ── */
.custom-emoji {
  width: 22px; height: 22px;
  vertical-align: -5px;
  object-fit: contain;
  display: inline-block;
}
.ep-custom-btn img { width: 26px; height: 26px; object-fit: contain; pointer-events: none; }

/* ── Voice session elapsed-time badge ── */
.ch-voice-timer {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--green, #23a55a);
  flex-shrink: 0;
  padding-right: 2px;
}

.channel-item:hover .ch-voice-timer { display: none; }

/* ── Server rail drag-to-reorder indicators ── */
.server-icon.dragging { opacity: .4; }
.server-icon.srv-drop-before { box-shadow: 0 -3px 0 0 var(--brand); }
.server-icon.srv-drop-after  { box-shadow: 0 3px 0 0 var(--brand); }

/* ── Davetler tab ── */
.inv-table-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr .7fr .8fr 28px;
  gap: 8px;
  padding: 6px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  color: var(--muted);
  border-bottom: 1px solid var(--separator);
}
.inv-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr .7fr .8fr 28px;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--separator) 50%, transparent);
  font-size: 13px;
}
.inv-row:hover { background: var(--ds-surface-1); border-radius: var(--ds-radius-s); }
.inv-creator { display: flex; align-items: center; gap: 8px; color: var(--header); font-weight: 600; min-width: 0; }
.inv-creator span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-code { font-family: 'Consolas', monospace; color: var(--text); }
.inv-uses, .inv-expiry { color: var(--muted); }
.inv-revoke {
  width: 24px; height: 24px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--muted);
  cursor: pointer; font-size: 12px;
}
.inv-revoke:hover { background: var(--red); color: #fff; }

/* ── Role editor: toggle rows ── */
.re-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid color-mix(in srgb, var(--separator) 60%, transparent);
}

.re-toggle-title { font-size: 14px; font-weight: 600; color: var(--header); line-height: 1.35; }

/* ── Role color row ── */
.rs-color-row { display: flex; gap: 10px; margin-top: 10px; align-items: stretch; }
.rs-custom-tile {
  flex: 0 0 150px;
  min-height: 64px;
  border-radius: 12px;
  border: 1px solid var(--ds-stroke-strong);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  position: relative;
}
.rs-eyedrop {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.25);
  transition: transform .12s var(--ease-out), background .14s var(--ease);
  position: relative;
  overflow: hidden;
}
.rs-eyedrop:hover { transform: scale(1.1); background: rgba(0,0,0,.65); }
.rs-eyedrop input[type="color"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
}
.rs-swatch-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.rs-swatch-grid .rs-swatch {
  width: 100%; height: 28px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s var(--ease-out), box-shadow .12s var(--ease);
  padding: 0;
}
.rs-swatch-grid .rs-swatch:hover { transform: scale(1.06); }
.rs-swatch-grid .rs-swatch.is-active { box-shadow: 0 0 0 2px var(--header); }
.rs-swatch-grid .rs-swatch svg { width: 14px; height: 14px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.rs-holo-note {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(103,232,249,.12), rgba(167,139,250,.12), rgba(251,113,133,.12));
  border: 1px solid var(--ds-stroke);
  font-size: 13px; color: var(--text);
}

/* ── Denetim Kaydı rows ── */
.audit-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--separator) 50%, transparent);
}
.audit-ico { font-size: 15px; width: 22px; text-align: center; flex-shrink: 0; padding-top: 3px; display: flex; justify-content: center; }
.audit-ico img { width: 20px; height: 20px; object-fit: contain; opacity: .9; }
.audit-dot { color: var(--muted); }
.audit-av { flex-shrink: 0; }
.audit-body { flex: 1; min-width: 0; }
.audit-line { font-size: 13.5px; color: var(--text); line-height: 1.4; }
.audit-line b { color: var(--header); }
.audit-detail { color: var(--muted); font-size: 12.5px; }
.audit-time { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.channel-item.active::after {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 3px;
  background: var(--ds-grad);
}
.cat-row { margin-top: 10px; }

/* ── Chat header ───────────────────────────────────── */
#chat-header {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--dark-bg) 55%, transparent);
  border-bottom: 1px solid var(--ds-stroke);
  box-shadow: none;
}

/* ── Composer ──────────────────────────────────────── */
#input-area {
  margin: 0 14px 14px;
  border-radius: var(--ds-radius-l);
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-stroke);
  box-shadow: var(--ds-shadow-1);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
#input-area:focus-within {
  border-color: var(--ds-accent-ring);
  box-shadow: 0 0 0 3px var(--ds-accent-soft), var(--ds-shadow-1);
}
#message-input { background: transparent; }

/* ── Messages ─────────────────────────────── */
.msg-group { border-radius: var(--ds-radius-s); }
.msg-group:hover { background: var(--ds-surface-1); }
.msg-toolbar {
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--sidebar-bg) 80%, transparent);
  border: 1px solid var(--ds-stroke-strong);
}

/* ── Member list + user panel ──────────────────────────────────────── */
.member-item { margin: 1px 8px; border-radius: var(--ds-radius-s); }
.m-status { box-shadow: 0 0 0 3px var(--sidebar-bg); }
/* ── Bottom-left DOCK ──────────────────────────────── */
#left-col {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;

  --rail-w: 72px;

  --sidebar-w: var(--sidebar-w-open, 240px);
  width: calc(var(--rail-w) + var(--sidebar-w));
  transition: width .2s var(--ease);
}
#left-top {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#left-dock {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: var(--rail-bg);
  border-top: 1px solid var(--ds-stroke);
  overflow: hidden;
  transition: width .2s var(--ease), padding .2s var(--ease);
}
#user-panel {
  margin: 0;
  border-radius: var(--ds-radius-m);
  background: color-mix(in srgb, var(--sidebar-bg) 82%, transparent);
  border: 1px solid var(--ds-stroke-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}

#user-panel .status-dot { border-color: var(--sidebar-bg); }

#left-dock #voice-bar { margin: 0; flex-shrink: 0; }

@media (max-width: 900px) {
  #titlebar { display: none; }   /* mobile uses its own header, not the desktop bar */
  #app { padding-top: 0; }
  /* Left column (rail + sidebar + dock) becomes a slide-in drawer. */
  /* Full-screen nav drawer: rail (66px) + the channel/DM list filling the rest
     as a normal full-width page. Close by picking a channel/DM or swiping left. */
  #left-col {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 300;
    --rail-w: 66px !important; --sidebar-w: calc(100vw - 66px) !important;
    width: 100vw !important;
    transform: translateX(-100%);
    transition: transform .28s var(--ease, cubic-bezier(.22,.61,.36,1));
    box-shadow: 0 0 64px rgba(0,0,0,.62);
  }
  body.mnav #left-col { transform: translateX(0); }
  /* Quick switcher ("git…") → full-screen page on mobile */
  .qs-overlay { padding: 0; align-items: stretch; background: var(--chat-bg); }
  .qs-box { width: 100vw; max-width: none; height: 100dvh; max-height: none; border: none; border-radius: 0;
    padding-top: env(safe-area-inset-top); }
  .qs-input-wrap { padding: 16px 16px; }
  .qs-results { padding: 8px calc(8px + env(safe-area-inset-bottom)); }
  .qs-close { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; flex-shrink: 0; }
  /* Guarantee the sidebar fills the full-width drawer (rail 66px + the rest) */
  #sidebar { width: var(--sidebar-w) !important; min-width: var(--sidebar-w) !important; }
  /* Touch-comfortable rows + softer active pill (classic-mobile spacing) */
  .channel-item { height: 42px; border-radius: 8px; }
  .channel-item .ch-icon { transform: scale(1.05); }
  #channel-list { padding: 4px 8px; }
  .home-friends-btn, .dm-item, .gdm-item { min-height: 44px; }
  body.nav-expanded .rail-label { display: none; }
  #main-col, #page-view { width: 100%; }
  #m-menu { display: flex; }
  #m-scrim { display: block; }
  body.mnav #m-scrim { opacity: 1; pointer-events: auto; }
  #chat-header { padding-left: 52px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  #chat-header::-webkit-scrollbar { display: none; }
  #chat-header .chat-header-divider { display: none; }
  /* Header search → hidden on mobile (classic-mobile keeps search on its own
     surface); frees room so the pins/info/members buttons stay on-screen. */
  .header-search-bar { display: none; }
  /* Long channel names ellipsize instead of shoving the tool buttons off-screen. */
  #chat-channel-name { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Stacked title (name over subline) + tap chevron on mobile headers */
  .ch-titlewrap { flex-direction: column; align-items: flex-start; gap: 0; justify-content: center; }
  .ch-name-line { flex-shrink: 1; max-width: 100%; }
  .ch-chevron { display: inline; }
  .ch-sub { flex: none; font-size: 12px; line-height: 1.3; max-width: 100%; }
  .header-collapse-btn { display: none !important; }
  /* never let a persisted sidebar-collapse zero the drawer's channel list */
  body.sidebar-collapsed #left-col { --sidebar-w: calc(100vw - 66px) !important; }
  body.sidebar-collapsed #sidebar { width: var(--sidebar-w) !important; min-width: var(--sidebar-w) !important; }
  /* keep the hamburger off the rail's home icon while the drawer is open */
  body.mnav #m-menu { opacity: 0; pointer-events: none; }
  /* emoji / GIF picker fits the screen */
  .chord-picker { width: calc(100vw - 16px) !important; height: min(60dvh, 460px) !important;
    left: 8px !important; right: auto !important; top: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important; }
  /* full profile card → full-screen, stacked */
  .user-card-v2 { width: 100vw !important; height: 100dvh !important; left: 0 !important; top: 0 !important;
    transform: none !important; border-radius: 0 !important; max-width: none !important; }
  .user-card-v2 .ucp-body { flex-direction: column; overflow-y: auto; }
  .user-card-v2 .ucp-left { width: 100%; flex-shrink: 1; border-right: none; }
  .user-card-v2 .ucp-banner { width: 100%; }
  /* Profile action row → wide primary + round icon buttons (classic-mobile) */
  .user-card-v2 .ucp-actions { gap: 10px; align-items: center; }
  .user-card-v2 .ucp-btn.primary { flex: 1; min-width: 0; padding: 12px 16px; font-size: 15px; justify-content: center; }
  .user-card-v2 .ucp-btn.icon { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; padding: 0; }
  /* Header tool/call buttons + composer buttons → round, tappable */
  .header-tool-btn, .header-call-btn { width: 38px; height: 38px; border-radius: 50%; }
  .header-tool-btn:active, .header-call-btn:active { background: var(--hover-bg); }
  .input-btn { width: 40px; height: 40px; border-radius: 50%; }
  .input-btn:active { background: var(--ds-surface-2); }
  /* tall dialogs scroll instead of overflowing the viewport */
  .modal-overlay { align-items: flex-start; padding: 12px; overflow-y: auto; }
  /* Settings → mobile DRILL-DOWN: a full-screen list of sections; tap one →
     that section fills the screen with a Back button (.full-modal.fm-detail). */
  .fm-panel { width: 100vw; height: 100dvh; max-width: none; border-radius: 0; flex-direction: column; }
  .fm-sidebar { width: 100%; min-width: 0; flex-direction: column; overflow-y: auto;
    padding: calc(14px + env(safe-area-inset-top)) 8px calc(12px + env(safe-area-inset-bottom)); gap: 2px; box-shadow: none; }
  .fm-nav { flex-direction: column; gap: 2px; }
  .fm-nav-item { white-space: normal; padding: 15px 14px; font-size: 16px; border-radius: 12px;
    display: flex; align-items: center; justify-content: space-between; }
  .fm-nav-item::after { content: '›'; color: var(--muted); font-size: 20px; line-height: 1; margin-left: 8px; }
  .fm-nav-item.danger::after { color: var(--red); }
  .fm-section-title { padding: 14px 12px 6px; }
  /* Roomier settings text on mobile (touch screens, not tiny print) */
  .fm-content { font-size: 15px; }
  .fm-field label, .fm-field-label-top, .fm-section-h3 { font-size: 13px; }
  .fm-hint { font-size: 13px; }
  .fm-field input, .fm-field select, .fm-field textarea { font-size: 16px; padding: 12px 14px; }
  .fm-tab h2 { font-size: 22px; }
  .fm-tab h3 { font-size: 17px; }
  .font-size-row span { font-size: 14px; min-width: 42px; }
  .fm-nav-sep { display: none; }
  .fm-close { top: calc(12px + env(safe-area-inset-top)) !important; right: 12px !important; }
  .fm-content { display: none; padding: calc(58px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); }
  .full-modal.fm-detail .fm-sidebar { display: none; }
  .full-modal.fm-detail .fm-content { display: flex; }
  .full-modal.fm-detail .fm-content:has(> .fm-tab-roles:not([style*="none"])) { padding: calc(58px + env(safe-area-inset-top)) 0 0; overflow: hidden; }
  .full-modal.fm-detail .fm-back { display: inline-flex; position: absolute; z-index: 11;
    top: calc(10px + env(safe-area-inset-top)); left: 10px; align-items: center; gap: 4px;
    height: 38px; padding: 0 14px 0 8px; border: none; border-radius: 999px;
    background: var(--ds-surface-2); color: var(--header); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
  .full-modal.fm-detail .fm-back:active { background: var(--ds-surface-3); }
  .modal { padding: 22px 20px; }
  /* Every context menu → a bottom action sheet (long-press a message, etc.) */
  .ctx-menu { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important; min-width: 0 !important; max-height: 72dvh; overflow-y: auto;
    padding: 8px 8px calc(10px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; border: none;
    box-shadow: 0 -10px 30px rgba(0,0,0,.5), 0 0 0 100vmax rgba(2,3,10,.5);
    animation: sheetUp .22s var(--ease, cubic-bezier(.22,.61,.36,1)); }
  .ctx-menu .ctx-item { padding: 13px 14px; font-size: 15.5px; border-radius: 10px; }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .reaction-picker-popup { left: 50% !important; right: auto !important; top: auto !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important; transform: translateX(-50%) !important;
    flex-wrap: wrap; max-width: calc(100vw - 24px); justify-content: center; }
  /* Member list + channel-info → right slide-in drawers.
     Members: tap the channel name or the people icon. Info (media/links): tap
     the info icon. Mutually exclusive — opening one closes the other. */
  #member-list, #channel-info { display: flex !important; position: fixed; right: 0; top: 0; bottom: 0; z-index: 300;
    width: min(82vw, 320px) !important; min-width: 0 !important; opacity: 1 !important;
    transform: translateX(100%); transition: transform .28s var(--ease, cubic-bezier(.22,.61,.36,1));
    box-shadow: 0 0 64px rgba(0,0,0,.62); padding: 10px; }
  #channel-info { padding: 0; }
  body.mmem #member-list, body.minfo #channel-info { transform: translateX(0); }
  body.mmem #m-scrim, body.minfo #m-scrim { opacity: 1; pointer-events: auto; }

  /* ── Unified tabbed info sheet (tap channel/group name) ──
     Üyeler / Medya / Sabitlemeler / Bağlantılar as a full-screen tabbed view.
     Reuses #member-list (members), #channel-info (media/links), #m-pins (pins). */
  body.msheet #m-sheet {
    display: flex; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; z-index: 342;
    background: var(--sidebar-bg); border-bottom: 1px solid var(--ds-stroke);
    padding-top: env(safe-area-inset-top);
  }
  #m-sheet .msh-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px; height: 52px; box-sizing: border-box; }
  #m-sheet-back { width: 38px; height: 38px; border-radius: 50%; background: none; border: none; color: var(--header); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
  #m-sheet-back:active { background: var(--hover-bg); }
  #m-sheet .msh-titles { display: flex; flex-direction: column; min-width: 0; }
  #m-sheet-title { font-size: 16px; font-weight: 800; color: var(--header); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #m-sheet-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #m-sheet-tabs { display: flex; gap: 4px; padding: 0 8px 8px; overflow-x: auto; scrollbar-width: none; }
  #m-sheet-tabs::-webkit-scrollbar { display: none; }
  .msh-tab { flex: 0 0 auto; background: none; border: none; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .14s var(--ease), color .14s var(--ease); }
  .msh-tab.active { color: #fff; background: var(--ds-grad); }
  body.msheet #member-list, body.msheet #channel-info, body.msheet #m-pins {
    display: none !important; position: fixed !important; left: 0; right: 0;
    top: var(--msh-h, 96px); bottom: 0; width: 100vw !important; max-width: none !important;
    min-width: 0 !important; transform: none !important; box-shadow: none; z-index: 341; opacity: 1 !important;
    overflow-y: auto; padding: 8px 8px calc(10px + env(safe-area-inset-bottom)); background: var(--chat-bg);
  }
  body.msheet.mt-uye #member-list { display: flex !important; flex-direction: column; }
  body.msheet.mt-med #channel-info, body.msheet.mt-lnk #channel-info { display: flex !important; flex-direction: column; }
  body.msheet.mt-pin #m-pins { display: flex !important; flex-direction: column; }
  body.msheet #channel-info .ci-head, body.msheet #channel-info .ci-tabs { display: none !important; }
  /* Profile card is the drawer bottom (classic-mobile) → hide the 3-button nav;
     home = rail home button, notifications = card bell, profile = tap the card. */
  #m-bottomnav { display: none; }
  #user-panel { height: auto; min-height: 56px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); align-items: center; }
  #user-panel #uc-mic, #user-panel #uc-head { display: none; }
  #user-panel .uc-btn { width: 38px; height: 38px; }
  /* Server-settings role editor → stack (was a fixed 268px 2-col) */
  .roles-split { flex-direction: column; height: auto; overflow: visible; }
  .roles-left-panel { width: 100% !important; border-right: none; border-bottom: 1px solid var(--separator); max-height: 42vh; }
  .roles-right-panel { width: 100%; padding: 18px 14px; }
  /* Message-search result surfaces fit the screen */
  #msg-search-dd, #dm-search-panel { width: calc(100vw - 16px) !important; left: 8px !important; right: 8px !important; max-height: 60dvh; }
  #msg-search-panel { width: 100% !important; min-width: 0 !important; }
  /* Pins popover + invite embed + crop viewport never exceed the viewport */
  #pins-pop { width: calc(100vw - 16px) !important; max-width: none; left: 8px !important; right: 8px !important; max-height: 70dvh; }
  .invite-embed { width: 100% !important; max-width: 100% !important; }
  .crop-viewport { max-width: 100%; }
  /* Channel-info opens as a right drawer (body.minfo) — keep its toggle live. */
}

/* ── Manual channel-sidebar collapse ── */

body.sidebar-collapsed #left-col { --sidebar-w: 0px; }
body.sidebar-collapsed #sidebar  { width: 0; min-width: 0; }

body.sidebar-collapsed:not(.nav-expanded) #left-dock  { padding: 6px; }
body.sidebar-collapsed:not(.nav-expanded) #user-panel { padding: 0; justify-content: center; }
body.sidebar-collapsed:not(.nav-expanded) #user-panel .up-info-wrap,
body.sidebar-collapsed:not(.nav-expanded) #user-panel .up-controls { display: none; }
body.sidebar-collapsed:not(.nav-expanded) #left-dock #voice-bar { display: none !important; }
.header-collapse-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: none; background: none; cursor: pointer;
  color: var(--muted); border-radius: 6px; margin-right: 6px; flex-shrink: 0;
  transition: color .12s, background .12s;
}
.header-collapse-btn:hover { color: var(--header); background: var(--hover-bg); }
body.sidebar-collapsed .header-collapse-btn { color: var(--header); }

/* ── VOICE 2.0 ───────────── */
.vc-card {
  width: 280px; height: 158px;
  border-radius: var(--ds-radius-l);
  background:
    radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--brand) 10%, transparent) 0%, transparent 60%),
    color-mix(in srgb, #000 35%, var(--sidebar-bg));
  border: 1px solid var(--ds-stroke);
  box-shadow: var(--ds-shadow-1);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.vc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ds-shadow-2);
  border-color: var(--ds-stroke-strong);
}
@keyframes dsSpeakPulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--green), 0 0 18px color-mix(in srgb, var(--green) 45%, transparent), var(--ds-shadow-1); }
  50%      { box-shadow: 0 0 0 3px var(--green), 0 0 30px color-mix(in srgb, var(--green) 65%, transparent), var(--ds-shadow-1); }
}
.vc-card.vc-speaking {
  border-color: transparent;
  animation: dsSpeakPulse 1.6s var(--ease) infinite;
}
.vc-card-footer {
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  padding: 26px 12px 9px;
}
.vc-card-name {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.vc-controls {
  align-self: center;
  margin: 0 auto 18px;
  padding: 10px 14px;
  gap: 10px;
  width: fit-content;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sidebar-bg) 72%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--ds-stroke-strong);
  box-shadow: var(--ds-shadow-2);
  animation: dsBarUp .35s var(--ease-out);
}
@keyframes dsBarUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vc-ctrl-btn {
  width: 46px; height: 46px;
  background: var(--ds-surface-3);
  transition: background .16s var(--ease), color .16s var(--ease),
              transform .14s var(--ease-out), box-shadow .16s var(--ease);
}
.vc-ctrl-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-1);
}
.vc-ctrl-btn.active {
  background: var(--ds-accent-soft);
  box-shadow: 0 0 0 1.5px var(--ds-accent-ring);
}
.vc-ctrl-btn.muted {
  background: color-mix(in srgb, var(--red) 18%, transparent);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--red) 40%, transparent);
}
.vc-ctrl-btn svg { width: 20px; height: 20px; }
.vc-ctrl-disconnect {
  width: 52px; height: 46px;
  border-radius: 999px;
  background: var(--red);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--red) 45%, transparent);
  transition: background .16s var(--ease), transform .14s var(--ease-out), box-shadow .16s var(--ease);
}
.vc-ctrl-disconnect:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--red) 60%, transparent);
}
.vc-stream-overlay {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: color-mix(in srgb, #0b0c10 62%, transparent);
  border-radius: inherit;
}
.vc-watch-btn {
  background: var(--ds-grad) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 40%, transparent);
  transition: transform .15s var(--ease-out), box-shadow .18s var(--ease);
}
.vc-watch-btn:hover { transform: translateY(-2px) scale(1.03); }

.call-grid .call-card {
  border-radius: var(--ds-radius-l);
  border: 1px solid var(--ds-stroke);
  box-shadow: var(--ds-shadow-1);
}
.call-grid .call-card.speaking { animation: dsSpeakPulse 1.6s var(--ease) infinite; }
.call-controls {
  align-self: center;
  margin: 6px auto 12px;
  width: fit-content;
  padding: 10px 14px;
  gap: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sidebar-bg) 72%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--ds-stroke-strong);
  box-shadow: var(--ds-shadow-2);
}
.call-ctrl {
  width: 46px; height: 46px;
  background: var(--ds-surface-3);
  transition: transform .14s var(--ease-out), box-shadow .16s var(--ease), background .16s var(--ease);
}
.call-ctrl:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-1); }

/* ── Modals / popups ─────────────────────────── */
.modal, .fm-panel, .user-card-compact, .user-card-v2, .boost-view-panel {
  border: 1px solid var(--ds-stroke);
}
.server-dropdown, .ctx-menu, .dropdown{
  border-radius: var(--ds-radius-m);
  border: 1px solid var(--ds-stroke-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--ds-shadow-3);
}

/* ── Friends / home content cards ──────────────────────────────────── */
.friend-item {
  border-radius: var(--ds-radius-m);
  border: 1px solid transparent;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease-out);
}
.friend-item:hover {
  border-color: var(--ds-stroke);
  transform: translateX(2px);
}
.dm-item { border-radius: var(--ds-radius-s); margin: 1px 8px; }
.home-friends-btn { border-radius: var(--ds-radius-s); margin: 1px 8px; }

/* ── Focus visibility ──────────────────────────────── */
button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ds-accent-ring);
  outline-offset: 2px;
}

/* ── View-level entry motion ──────── */
@keyframes dsViewIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.messages-inner, .friends-page, .st-page, .wl-page {
  animation: dsViewIn .28s var(--ease-out);
}

/* ════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM 2.1
   ════════════════════════════════════════════════════════════════════ */

/* ── COMPOSER FIX ────────────────────────────────── */
#input-area { padding: 2px 10px; }
@media (max-width:900px){ #input-area{ padding-bottom: calc(2px + env(safe-area-inset-bottom)); } }
.input-wrapper {
  background: transparent;
  border-radius: 0;
}
.input-wrapper:focus-within { box-shadow: none; }
#input-area :is(input, textarea):focus {
  box-shadow: none !important;
  outline: none !important;
}
.input-btn { border-radius: 10px; }
.input-btn:hover { background: var(--ds-surface-2); }
.send-btn:hover { color: var(--ds-accent); }

/* ── VOICE FOCUS MODE ── */
.vc-card.vc-card-zoomed {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: calc(100% - 124px) !important;
  flex: 0 0 auto !important;
  order: -1;
  margin: 0 !important;
  border-radius: var(--ds-radius-l) !important;
  border: 1px solid var(--ds-stroke-strong) !important;
  box-shadow: var(--ds-shadow-2) !important;
  background: #0b0c10 !important;
  z-index: 1 !important;
  overflow: hidden !important;
}
.vc-card.vc-card-zoomed:hover { transform: none; }

.vc-participants-grid:has(.vc-card-zoomed) {
  overflow-y: auto;
  align-content: flex-start;
  gap: 10px;
}
.vc-participants-grid:has(.vc-card-zoomed) .vc-card:not(.vc-card-zoomed) {
  width: 168px; height: 95px;
}
.vc-participants-grid:has(.vc-card-zoomed) .vc-card:not(.vc-card-zoomed) .vc-card-avatar img,
.vc-participants-grid:has(.vc-card-zoomed) .vc-card:not(.vc-card-zoomed) .vc-card-avatar .av-initials {
  width: 44px !important; height: 44px !important; font-size: 17px !important;
}
.vc-participants-grid:has(.vc-card-zoomed) .vc-card:not(.vc-card-zoomed) .vc-card-name {
  font-size: 11px;
}

.vc-participants-grid:has(.vc-card-zoomed) .vc-card-zoomed:only-child {
  height: 100% !important;
}

body.in-vc-view #member-list { display: none !important; }

/* ── Voice view header ── */
.vc-view-top { padding: 18px 24px 8px; }
.vc-view-title { font-size: 18px; letter-spacing: .01em; }
.vc-view-subtitle {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-stroke);
  font-size: 11px;
  letter-spacing: .03em;
}
.vc-view-btn {
  border-radius: 999px;
  padding: 9px 20px;
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-stroke);
  transition: background .15s var(--ease), transform .14s var(--ease-out), box-shadow .16s var(--ease);
}
.vc-view-btn:hover { transform: translateY(-1px); box-shadow: var(--ds-shadow-1); }
.vc-view-btn.primary {
  background: var(--ds-grad);
  border-color: transparent;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 35%, transparent);
}

/* ── Voice bar ──────────── */
#voice-bar {
  margin: 0 8px;
  border-radius: var(--ds-radius-m);
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-stroke);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── Settings full-modal ────── */
.fm-panel { border-radius: var(--ds-radius-l); }
.fm-sidebar { border-right: 1px solid var(--ds-stroke); }
.fm-nav-item {
  border-radius: var(--ds-radius-s);
  margin: 1px 8px;
  transition: background .14s var(--ease), color .14s var(--ease), padding-left .16s var(--ease-out);
}
.fm-nav-item:hover { padding-left: 14px; }
.fm-nav-item.active { background: var(--ds-accent-soft); }
.fm-field input, .fm-field select, .fm-field textarea {
  border-radius: var(--ds-radius-s);
  background-color: var(--ds-surface-2);
  border: 1px solid var(--ds-stroke);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.fm-field input:focus, .fm-field select:focus, .fm-field textarea:focus {
  border-color: var(--ds-accent-ring);
  box-shadow: 0 0 0 3px var(--ds-accent-soft);
}
.fm-save-btn {
  background: var(--ds-grad);
  border-radius: 999px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 30%, transparent);
}
.fm-save-btn:hover { filter: brightness(1.08); }

/* ════════════════════════════════════════════════════════════════════
   IN-APP SURFACE POLISH — settings · profile · store · shared controls
   Brings the legacy surfaces onto the shared --ds-* token system: soft
   radii, tinted shadows, eased transitions, keyboard focus rings, and
   real active-states. Additive overrides — layout rules stay untouched.
   ════════════════════════════════════════════════════════════════════ */

/* Settings — panel depth, secondary controls, press + focus feedback */
.fm-panel { box-shadow: var(--ds-shadow-3); }
.fm-upload-btn, .fm-remove-btn {
  border-radius: var(--ds-radius-s);
  border: 1px solid var(--ds-stroke);
  transition: background .14s var(--ease), color .14s var(--ease),
              border-color .14s var(--ease), transform .1s var(--ease);
}
.fm-save-btn:active, .fm-upload-btn:active, .fm-remove-btn:active { transform: scale(.97); }
.fm-close {
  background: var(--ds-surface-2);
  transition: background .14s var(--ease), color .14s var(--ease), transform .12s var(--ease-out);
}
.fm-close:hover { background: var(--ds-surface-3); transform: scale(1.06); }
.fm-nav-item:focus-visible,
.fm-upload-btn:focus-visible, .fm-remove-btn:focus-visible,
.fm-save-btn:focus-visible, .fm-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ds-accent-ring);
}

/* Profile card (user-card-v2) — soft frame, gradient primary, real tab indicator */
.user-card-v2 {
  border-radius: var(--ds-radius-l);
  box-shadow: var(--ds-shadow-3), inset 0 0 0 1px var(--ds-stroke);
}
.user-card-v2 .ucp-banner { border-top-left-radius: var(--ds-radius-l); }
.user-card-v2 .ucp-btn {
  border-radius: var(--ds-radius-s);
  transition: background .14s var(--ease), color .14s var(--ease),
              transform .1s var(--ease), box-shadow .15s var(--ease), filter .14s var(--ease);
}
.user-card-v2 .ucp-btn.primary { background: var(--ds-grad); }
.user-card-v2 .ucp-btn.primary:hover {
  background: var(--ds-grad);
  filter: brightness(1.06);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 32%, transparent);
}
.user-card-v2 .ucp-btn:active { transform: scale(.97); }
.user-card-v2 .ucp-btn.icon { background: var(--ds-surface-2); }
.user-card-v2 .ucp-bio, .ucp-conn-row { border-radius: var(--ds-radius-s); }
.user-card-v2 .ucp-tab::after {
  content: ''; position: absolute;
  left: 12px; right: 12px; bottom: -1px; height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--ds-grad);
  opacity: 0; transform: scaleX(.4);
  transition: opacity .16s var(--ease), transform .16s var(--ease-out);
}
.user-card-v2 .ucp-tab.active::after { opacity: 1; transform: scaleX(1); }
.user-card-v2 .ucp-btn:focus-visible,
.user-card-v2 .ucp-close:focus-visible,
.user-card-v2 .ucp-tab:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--ds-accent-ring);
}
/* profile-editor live preview (settings → Profil) */
.pf-preview-card { border-radius: var(--ds-radius-m); box-shadow: var(--ds-shadow-1); }
.pf-preview-bio { border-radius: var(--ds-radius-s); }

/* Store — token-ize the history button */
.store-history-btn {
  border-radius: var(--ds-radius-s);
  border: 1px solid var(--ds-stroke);
  transition: background .14s var(--ease), border-color .14s var(--ease), transform .1s var(--ease);
}
.store-history-btn:hover { border-color: var(--ds-stroke-accent); transform: translateY(-1px); }
.store-history-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ds-accent-ring); }
.store-history-table th, .store-history-table td { border-bottom-color: var(--ds-stroke); }

/* ── Notification inbox ─────────────────────────────────────────────── */
#m-bottomnav button { position: relative; }
.mbn-badge { position: absolute; top: 3px; left: 50%; transform: translateX(5px);
  background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; line-height: 1; }
.ntf-page .ntf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ntf-clear { background: var(--ds-surface-2); border: 1px solid var(--ds-stroke); color: var(--text);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; font-family: inherit; cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease); }
.ntf-clear:hover { background: var(--ds-surface-3); border-color: var(--ds-stroke-accent); }
.ntf-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 10px; }
.ntf-tab { background: none; border: none; color: var(--muted); font-family: inherit;
  font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: 999px; cursor: pointer;
  transition: background .14s var(--ease), color .14s var(--ease); }
.ntf-tab:hover { color: var(--header); background: var(--hover-bg); }
.ntf-tab.active { color: #fff; background: var(--ds-grad); }
.ntf-list { display: flex; flex-direction: column; gap: 3px; }
.ntf-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  border-radius: var(--ds-radius-m); cursor: pointer; position: relative;
  transition: background .14s var(--ease); }
.ntf-row:hover { background: var(--hover-bg); }
.ntf-row.unread { background: var(--ds-accent-soft); }
.ntf-row.unread:hover { background: color-mix(in srgb, var(--brand) 20%, transparent); }
.ntf-av { flex-shrink: 0; }
.ntf-av .av-img, .ntf-av .av-initials { width: 36px; height: 36px; border-radius: 50%; }
.ntf-ico-badge { width: 36px; height: 36px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; background: var(--ds-surface-2); font-size: 16px; }
.ntf-main { flex: 1; min-width: 0; }
.ntf-title { font-size: 14px; color: var(--text); line-height: 1.45; }
.ntf-title b { color: var(--header); font-weight: 600; }
.ntf-loc { color: var(--brand); font-weight: 600; }
.ntf-when { color: var(--muted); font-size: 12px; margin-left: 6px; white-space: nowrap; }
.ntf-preview { font-size: 13px; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ntf-preview .mention { background: transparent !important; padding: 0; pointer-events: none; }
.ntf-preview .custom-emoji { width: 1.1em; height: 1.1em; vertical-align: -2px; }
.ntf-dot { position: absolute; right: 12px; top: 16px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--brand); }

/* ── Modal buttons ───────────────────────── */
.modal { border-radius: var(--ds-radius-l); }
.modal-btn { border-radius: 999px; }
.modal-btn.primary {
  background: var(--ds-grad);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 30%, transparent);
}

/* ── Toast ──────────────────────────────────────────── */
.toast {
  border-radius: 999px;
  background: color-mix(in srgb, var(--sidebar-bg) 80%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--ds-stroke-strong);
  box-shadow: var(--ds-shadow-2);
}

/* ── Home tabs ───────── */
.home-tab {
  border-radius: 999px;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.home-tab.active {
  background: var(--ds-accent-soft);
  box-shadow: inset 0 0 0 1px var(--ds-accent-ring);
}

/* ── Channel welcome block ────────────────── */
.welcome-hash {
  background: var(--ds-grad) !important;
  border-radius: 22px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--brand) 30%, transparent);
  color: #fff;
}

.welcome-hash:has(img, .av-initials) {
  background: none !important;
  box-shadow: none;
}

/* ── Typing indicator ──────────────── */
#typing-indicator { padding: 2px 24px 6px; }

/* ── CHORD PiP ─────────────── */
#chord-pip {
  position: fixed;
  bottom: 16px; right: 16px;
  width: 288px; height: 162px;
  border-radius: var(--ds-radius-m);
  overflow: hidden;
  background: #0b0c10;
  border: 1px solid var(--ds-stroke-strong);
  box-shadow: var(--ds-shadow-3);
  z-index: 950;
  cursor: grab;
  display: none;
  transition: top .22s var(--ease-out), left .22s var(--ease-out),
              right .22s var(--ease-out), bottom .22s var(--ease-out),
              box-shadow .2s var(--ease);
  user-select: none;
}
#chord-pip.pip-dragging { transition: none; cursor: grabbing; box-shadow: 0 0 0 2px var(--ds-accent-ring), var(--ds-shadow-3); }
#chord-pip video { width: 100%; height: 100%; object-fit: contain; background: #000; pointer-events: none; }
#chord-pip .pip-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  background: linear-gradient(rgba(0,0,0,.75), transparent);
  opacity: 0;
  transition: opacity .18s var(--ease);
}
#chord-pip:hover .pip-top { opacity: 1; }
#chord-pip .pip-label {
  font-size: 11px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 180px;
}
#chord-pip .pip-actions { display: flex; gap: 6px; }
#chord-pip .pip-btn {
  width: 26px; height: 26px;
  border: 0; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff;
  cursor: pointer; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .14s var(--ease), transform .12s var(--ease-out);
}
#chord-pip .pip-btn:hover { background: var(--brand); transform: scale(1.08); }
#chord-pip .pip-btn-stop:hover { background: var(--red); }

#vc-local-screen, #vc-local-camera,
#vc-local-screen-label, #vc-local-camera-label { display: none !important; }

body.app-unfocused :is(
  .vc-bar, .typing-dot, .skel-av, .skel-line,
  .al-logo, .al-dots span, .rs-prev-holo .rs-prev-name, .cub-icon svg,
  .vc-card.vc-speaking, .call-grid .call-card.speaking,
  [style*="nameGradientFlow"]
) {
  animation-play-state: paused !important;
}

/* ── Stream-settings popover ── */
#stream-settings-pop {
  position: fixed; z-index: 9600;
  width: 220px;
  padding: 14px;
  border-radius: var(--ds-radius-m);
  background: color-mix(in srgb, var(--sidebar-bg) 88%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ds-stroke-strong);
  box-shadow: var(--ds-shadow-3);
  animation: chordPopMenu .16s var(--ease-menu-open);
}
#stream-settings-pop .ssp-title {
  font-size: 13px; font-weight: 800; color: var(--header);
  margin-bottom: 10px;
}
#stream-settings-pop .ssp-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  font-size: 12px; color: var(--muted); font-weight: 600;
  margin-bottom: 8px;
}
#stream-settings-pop select {
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-stroke);
  border-radius: var(--ds-radius-s);
  color: var(--text);
  padding: 5px 8px;
  font-family: inherit; font-size: 12px;
  outline: none;
}
#stream-settings-pop .ssp-apply {
  width: 100%;
  margin-top: 6px;
  padding: 8px;
  border: 0; border-radius: 999px;
  background: var(--ds-grad); color: #fff;
  font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer;
  transition: filter .14s var(--ease), transform .12s var(--ease-out);
}
#stream-settings-pop .ssp-apply:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ════════════════════════════════════════════════════════════════════════
   RICH COMPOSER + ":" EMOJI TYPEAHEAD + EMOJI SETTINGS TABLE
   ════════════════════════════════════════════════════════════════════════ */

#message-input {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-height: 22px;
  cursor: text;
  outline: none;
}
#message-input:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}
#message-input.ce-disabled { cursor: not-allowed; color: var(--muted); }
#input-area.input-disabled #message-input:empty::before { font-style: italic; }

img.ce-emoji {
  width: 22px; height: 22px;
  vertical-align: -5px;
  object-fit: contain;
  display: inline-block;
  margin: 0 1px;
  user-select: none;
}

/* ── ":" emoji typeahead ── */
.emoji-typeahead { max-height: 340px; }
.eta-head {
  padding: 8px 12px 6px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted);
  user-select: none;
}
.eta-item {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 12px;
  cursor: pointer;
}
.eta-emo {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  object-fit: contain;
  flex-shrink: 0;
}
img.eta-emo { object-fit: contain; }

/* ── Server settings → Emoji tab ── */
.sv-emoji-actions { margin: 14px 0 10px; }
.sv-emoji-upload-btn {
  background: var(--brand); color: #fff;
  border: 0; border-radius: 6px;
  padding: 9px 18px;
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: filter .12s;
}
.sv-emoji-upload-btn:hover { filter: brightness(1.1); }
.sv-emoji-upload-btn:disabled { opacity: .5; cursor: not-allowed; }
.sv-emoji-sect {
  margin: 0 0 2px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted);
}
.sv-emoji-table {
  border: 1px solid var(--ds-stroke, var(--separator));
  border-radius: 8px;
  overflow: hidden;
  background: var(--ds-surface-1, var(--sidebar-bg));
}
.sve-head, .sve-row {
  display: grid;
  grid-template-columns: 56px minmax(0,1fr) 200px 36px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}
.sve-head {
  padding: 10px 12px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted);
  border-bottom: 1px solid var(--ds-stroke, var(--separator));
  user-select: none;
}
.sve-row { border-bottom: 1px solid var(--ds-stroke, var(--separator)); }
.sve-row:last-child { border-bottom: 0; }
.sve-row:hover { background: var(--hover-bg); }
.sve-img img { width: 32px; height: 32px; object-fit: contain; display: block; }
.sve-name { display: flex; align-items: center; min-width: 0; }
.sve-colon { color: var(--muted); font-size: 14px; user-select: none; }
.sve-name-inp {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text);
  font-size: 14px; font-family: inherit;
  padding: 4px 2px;
  min-width: 3ch; max-width: 100%;
}
.sve-name-inp:hover:not([readonly]) { border-color: var(--ds-stroke-strong, var(--separator)); }
.sve-name-inp:focus { background: var(--input-bg); border-color: var(--brand); outline: none; }
.sve-name-inp[readonly] { cursor: default; }
.sve-by {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
  font-size: 13.5px; color: var(--text);
}
.sve-by .av-initials {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-weight: 700; flex-shrink: 0;
}
.sve-by-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sve-del {
  width: 24px; height: 24px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--muted);
  cursor: pointer; font-size: 12px;
  visibility: hidden;
}
.sve-row:hover .sve-del { visibility: visible; }
.sve-del:hover { background: var(--red); color: #fff; }

.fm-tab.sve-dropping {
  outline: 2px dashed var(--brand);
  outline-offset: -6px;
  border-radius: 10px;
}

/* ════════════════════════════════════════════════════════════════════════
   UNIFIED EXPRESSION PICKER — GIF'ler | Emoji
   ════════════════════════════════════════════════════════════════════════ */
.chord-picker {
  position: fixed;
  z-index: 5000;
  width: 432px;
  height: 508px;
  display: none;
  flex-direction: column;
  background: var(--sidebar-bg);
  border: 1px solid var(--separator);
  border-radius: 12px;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.45));
  overflow: hidden;
}
.cp-tabs {
  display: flex; gap: 6px;
  padding: 12px 14px 10px;
  flex-shrink: 0;
}
.cp-tab {
  border: 0; border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 14px; font-weight: 700; font-family: inherit;
  padding: 5px 12px;
  cursor: pointer;
  transition: background .1s, color .1s;
}
.cp-tab:hover { color: var(--header); background: var(--hover-bg); }
.cp-tab.active { color: var(--header); background: var(--hover-bg); }
.cp-body {
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 0;
  padding: 0 14px 12px;
}

.cp-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--input-bg);
  border: 1px solid var(--separator);
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.cp-search:focus-within { border-color: var(--brand); }
.cp-search-ico { font-size: 13px; opacity: .7; flex-shrink: 0; }
.cp-search input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: var(--text); font-size: 14px; font-family: inherit;
}
.cp-search input::placeholder { color: var(--muted); }
.cpg-back {
  border: 0; background: transparent;
  color: var(--muted); font-size: 22px; line-height: 1;
  cursor: pointer; padding: 0 4px; flex-shrink: 0;
}
.cpg-back:hover { color: var(--header); }

/* ── GIF home: category tiles ── */
.cpg-tiles {
  flex: 1; min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: start;
  padding-bottom: 4px;
}
.cpg-tile {
  position: relative;
  height: 104px;
  border-radius: 10px;
  background-color: var(--hover-bg);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cpg-tile::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  transition: background .12s;
}
.cpg-tile:hover::before { background: rgba(0,0,0,.25); }
.cpg-tile span {
  position: relative; z-index: 1;
  color: #fff; font-size: 14.5px; font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  text-align: center; padding: 0 8px;
}
.cpg-tile-fav::before  { background: linear-gradient(135deg, rgba(88,101,242,.78), rgba(88,101,242,.45)); }
.cpg-tile-fav:hover::before { background: linear-gradient(135deg, rgba(88,101,242,.6), rgba(88,101,242,.35)); }
.cpg-error {
  color: var(--red);
  font-size: 13px; text-align: center;
  padding: 8px 0 10px;
}
.cpg-error span { color: var(--muted); font-size: 11.5px; }

/* ── GIF results: 2-col masonry ── */
.cpg-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted);
  padding: 0 2px 8px;
  flex-shrink: 0;
}
.cpg-grid {
  flex: 1; min-height: 0;
  overflow-y: auto;
  column-count: 2;
  column-gap: 8px;
  padding-bottom: 4px;
}
.cpg-cell {
  position: relative;
  break-inside: avoid;
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--hover-bg);
}
.cpg-cell img { width: 100%; display: block; }
.cpg-cell:hover { outline: 2px solid var(--brand); outline-offset: -2px; }
.cpg-star {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px;
  border: 0; border-radius: 6px;
  background: rgba(0,0,0,.55);
  color: #fff; font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .1s;
}
.cpg-cell:hover .cpg-star { opacity: 1; }
.cpg-star.faved { color: #f0b232; opacity: 1; }
.cpg-note {
  column-span: all;
  color: var(--muted); font-size: 13.5px;
  text-align: center; padding: 28px 0;
}

/* ── Emoji tab: rail + sections + preview bar ── */
.cpe-main {
  flex: 1; min-height: 0;
  display: flex; gap: 8px;
}
.cpe-rail {
  width: 40px; flex-shrink: 0;
  overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 2px 0;
  scrollbar-width: none;
}
.cpe-rail::-webkit-scrollbar { display: none; }
.cpe-rail-btn {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 0; border-radius: 8px;
  background: transparent;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  transition: background .1s;
}
.cpe-rail-btn:hover { background: var(--hover-bg); }
.cpe-rail-btn.active { background: var(--hover-bg); box-shadow: inset 0 0 0 1.5px var(--brand); }
.cpe-rail-sv {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.cpe-scroll {
  flex: 1; min-width: 0;
  overflow-y: auto;
  padding-right: 2px;
  position: relative;
}
.cpe-sect-head {
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 10px 2px 6px;
  position: sticky; top: 0;
  background: var(--sidebar-bg);
  z-index: 1;
}
.cpe-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
}
.cpe-e {
  aspect-ratio: 1;
  border: 0; border-radius: 7px;
  background: transparent;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background .08s;
  overflow: hidden;
}
.cpe-e:hover { background: var(--hover-bg); }
.cpe-e img { width: 28px; height: 28px; object-fit: contain; pointer-events: none; }
.cpe-preview {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--separator);
  margin-top: 8px;
  padding: 9px 2px 0;
  min-height: 44px;
}
.cpe-prev-hint { color: var(--muted); font-size: 13px; }
.cpe-prev-img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.cpe-prev-uni { font-size: 26px; line-height: 1; flex-shrink: 0; }
.cpe-prev-text { display: flex; flex-direction: column; min-width: 0; }
.cpe-prev-text b { font-size: 13.5px; color: var(--header); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpe-prev-text span { font-size: 11.5px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   MOTION & SHAPE 2.0
   ════════════════════════════════════════════════════════════════════ */

/* ── Shape normalizer ── */
.ctx-menu, .server-dropdown,
.mention-dropdown, .emoji-picker, .reaction-picker-popup, .user-popup,
.pf-edit-popup, #msg-search-dd, #dm-search-panel, #pins-pop,
.user-card, .user-card-compact, .badge-tooltip { border-radius: var(--ds-radius-m); }
.tooltip, .msg-toolbar { border-radius: var(--ds-radius-s); }
.modal, .user-card-v2, .full-modal .fm-panel, .chord-picker { border-radius: var(--ds-radius-l); }

/* ── Shadow normalizer ── */
.ctx-menu, .server-dropdown, .mention-dropdown, .emoji-picker,
.reaction-picker-popup, .user-popup, .user-card, .user-card-compact,
.badge-tooltip, .incoming-call-banner, #msg-search-dd, #dm-search-panel,
#pins-pop, .chord-picker { box-shadow: var(--ds-shadow-2); }
.modal, .user-card-v2, .full-modal .fm-panel { box-shadow: var(--ds-shadow-3); }
.tooltip, .msg-toolbar { box-shadow: var(--ds-shadow-1); }

/* ── Overlay enter animations ── */
.mention-dropdown, #msg-search-dd, .emoji-picker {
  transform-origin: top center;
  animation: chordPopMenu .14s var(--ease-menu-open);
}
#dm-search-panel, #pins-pop {
  transform-origin: top center;
  animation: chordPopMenu .16s var(--ease-menu-open);
}
.chord-picker {
  transform-origin: bottom center;
  animation: chordPopMenu .16s var(--ease-menu-open);
}

/* ── Exit keyframes ── */
@keyframes ctxMenuOut    { from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(.97)} }
@keyframes popMenuOut    { from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(-4px) scale(.97)} }
@keyframes modalOut      { from{opacity:1;transform:scale(1) translateY(0)} to{opacity:0;transform:scale(.96) translateY(8px)} }
@keyframes overlayFadeOut{ from{opacity:1} to{opacity:0} }
@keyframes riseOut       { from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(6px) scale(.97)} }

/* ── Per-overlay exit classes ── */
.ctx-menu.ctx-out { animation: ctxMenuOut .14s var(--ease-menu-close) forwards; }
.server-dropdown.dd-out, .mention-dropdown.dd-out,
#msg-search-dd.dd-out, #dm-search-panel.dd-out,
.chord-picker.dd-out { animation: popMenuOut .14s var(--ease-menu-close) forwards; }
#pins-pop.pop-out { animation: popMenuOut .15s var(--ease-menu-close) forwards; }
.modal-overlay.modal-out { animation: overlayFadeOut .16s var(--ease-menu-close) forwards; }
.modal-overlay.modal-out .modal { animation: modalOut .16s var(--ease-menu-close) forwards; }
.full-modal.fm-out { animation: overlayFadeOut .18s var(--ease-menu-close) forwards; }
.full-modal.fm-out .fm-panel { animation: modalOut .18s var(--ease-menu-close) forwards; }

.boost-view-panel { animation: modalIn .24s var(--ease-menu-open); }
.boost-view-overlay.bv-out { animation: overlayFadeOut .18s var(--ease-menu-close) forwards; }
.boost-view-overlay.bv-out .boost-view-panel { animation: modalOut .18s var(--ease-menu-close) forwards; }

@keyframes nameGradientFlow { to { background-position: 200% center; } }

/* ── Create-channel dialog ─────────────── */
.cc-section-label { font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; margin-bottom:8px; }
.cc-types { display:flex; flex-direction:column; gap:8px; }
.cc-type { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--ds-radius-m); background:var(--input-bg); border:1px solid var(--separator); cursor:pointer; transition:background .12s var(--ease), border-color .12s var(--ease); }
.cc-type:hover { background:var(--ds-surface-2); }
.cc-type input { display:none; }
.cc-type-ico { width:28px; height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.cc-type-ico img { width:26px; height:26px; object-fit:contain; opacity:.85; }
.cc-type-body { flex:1; min-width:0; }
.cc-type-name { display:block; font-weight:600; color:var(--header); font-size:15px; }
.cc-type-desc { display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.cc-type-radio { width:20px; height:20px; border-radius:50%; border:2px solid var(--muted); flex-shrink:0; position:relative; transition:border-color .12s; }
.cc-type input:checked ~ .cc-type-radio { border-color:var(--brand); }
.cc-type input:checked ~ .cc-type-radio::after { content:''; position:absolute; inset:3px; border-radius:50%; background:var(--brand); }
.cc-type:has(input:checked) { border-color:var(--brand); background:var(--ds-accent-soft); }
.cc-private { display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:16px; border-top:1px solid var(--separator); }
.cc-private-info { flex:1; min-width:0; }
.cc-private-title { font-weight:600; color:var(--header); font-size:14px; }
.cc-private-desc { font-size:12px; color:var(--muted); margin-top:2px; }

/* ── Classic PNG control icons ── */
.ui-ico { width:20px; height:20px; object-fit:contain; vertical-align:middle; pointer-events:none; }
.ui-badge-ico { width:14px; height:14px; object-fit:contain; vertical-align:middle; pointer-events:none; }

.ui-off { filter: grayscale(1) brightness(1.8); }
.call-ctrl.off .ui-ico { filter: brightness(.35); }
/* ── Settings-menu nav icons ── */
.fm-nav-ico { width:22px; height:22px; object-fit:contain; margin-right:10px; vertical-align:-6px; opacity:.85; }
.fm-nav-item.active .fm-nav-ico, .fm-nav-item:hover .fm-nav-ico { opacity:1; }

/* ── Keybinds (Tuş Atamaları) settings rows ────────────────────────── */
.kb-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--separator); }
.kb-row:last-child { border-bottom: none; }
.kb-action {
  flex: 1; min-width: 0; background-color: var(--input-bg); color: var(--text);
  border: 1px solid var(--separator); border-radius: var(--ds-radius-s);
  padding: 8px 10px; font-size: 14px; font-family: inherit; outline: none; cursor: pointer;
}
.kb-action:focus { border-color: var(--ds-stroke-accent, var(--brand)); }
.kb-info { flex: 1; min-width: 0; }
.kb-label { font-weight: 600; color: var(--header); font-size: 14px; }
.kb-desc  { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kb-combo {
  min-width: 130px; text-align: center; padding: 7px 12px;
  border-radius: var(--ds-radius-s); background: var(--input-bg);
  border: 1px solid var(--separator); font-size: 13px; font-weight: 600;
  color: var(--text); font-family: ui-monospace, monospace; white-space: nowrap;
}
.kb-combo.empty { color: var(--muted); font-style: italic; font-weight: 500; font-family: inherit; }
.kb-combo.capturing {
  border-color: var(--brand); color: var(--brand); box-shadow: var(--ring-brand);
  font-family: inherit; font-size: 12px; font-style: normal;
}
.kb-clear {
  background: none; border: none; cursor: pointer; font-size: 15px;
  opacity: .7; padding: 4px 6px; border-radius: var(--ds-radius-s); line-height: 1;
}
.kb-clear:hover:not(:disabled) { opacity: 1; background: var(--hover-bg); }
.kb-clear:disabled { opacity: .3; cursor: default; }

/* ── Keşfet rail button ── */
.server-icon.explore-btn img { filter: none; opacity: .85; transition: opacity .15s; }
.server-icon.explore-btn:hover img,
.server-icon.explore-btn.active img { opacity: 1; }

/* ── Server program badges ── */
.srv-flag-badge { width: 22px; height: 22px; vertical-align: middle; margin-left: 6px; position: relative; top: -1px; }
.srv-flag-badge.lg { width: 26px; height: 26px; vertical-align: middle; }

#tooltip .srv-tip-name { vertical-align: middle; }
.srv-tip-badge { width: 18px; height: 18px; vertical-align: middle; margin-left: 6px; }

/* ── Faz 1: "Sunucular" named-server-list panel ── */
.server-icon.nav-btn { color: var(--muted); }
.server-icon.nav-btn:hover, .server-icon.nav-btn.active { color: var(--header); }

/* ── Faz 1: EXPANDABLE NAV ──────────────────────── */
.si-glyph   { display: contents; }
.rail-label { display: none; }

body.nav-expanded #left-col    { --rail-w: 300px; }
body.nav-expanded #server-rail {
  align-items: stretch;
  padding: 12px 12px 10px;
}
body.nav-expanded #server-rail .server-separator { width: auto; margin: 4px 10px; }

body.nav-expanded #server-rail .server-icon {
  width: 100%; height: auto; min-height: 52px;
  flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px;
  padding: 6px 10px; border-radius: 10px;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible;
}
body.nav-expanded #server-rail .server-icon:hover  { background: var(--hover-bg) !important; }
body.nav-expanded #server-rail .server-icon.active { background: var(--brand)    !important; }

body.nav-expanded #server-rail .si-glyph {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--sidebar-bg);
  box-shadow: inset 0 0 0 1px var(--ds-stroke);
  overflow: hidden;
  font-size: 20px; font-weight: 700; color: var(--text);
}
body.nav-expanded #server-rail .si-glyph img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

body.nav-expanded #server-rail .home-icon .si-glyph     { background: transparent; box-shadow: none; }
body.nav-expanded #server-rail .home-icon .si-glyph img  { border-radius: 0; object-fit: contain; }
body.nav-expanded #server-rail .add-btn   .si-glyph     { color: var(--green); }
body.nav-expanded #server-rail .nav-btn    .si-glyph,
body.nav-expanded #server-rail .explore-btn .si-glyph    { color: var(--muted); }

body.nav-expanded .rail-label {
  display: flex; flex-direction: column; justify-content: center;
  flex: 1; min-width: 0; line-height: 1.25; gap: 1px;
}
.rail-name {
  font-size: 15px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 5px; min-width: 0;
}

.rail-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-flag { width: 16px; height: 16px; flex-shrink: 0; }
.rail-sub {
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.nav-expanded #server-rail .server-icon.has-unread .rail-name { color: var(--header); }

body.nav-expanded #server-rail .server-icon.active .rail-name { color: #fff; }
body.nav-expanded #server-rail .server-icon.active .rail-sub  { color: rgba(255,255,255,.72); }

body.nav-expanded #server-rail .server-pip,
body.nav-expanded #server-rail .srv-mention-badge,
body.nav-expanded #server-rail .srv-voice-badge { display: none; }

body.nav-dragging #server-rail,
body.nav-dragging #left-col,
body.nav-dragging #sidebar { transition: none !important; }
body.nav-dragging #server-rail { align-items: flex-start; padding-left: 14px; cursor: ew-resize; }

#server-rail { cursor: ew-resize; }
#server-rail .server-icon, #server-rail .dm-bubble { cursor: pointer; }

body.nav-expanded #server-rail .dm-bubble { align-self: flex-start; margin-left: 10px; }

/* ── Faz 2: Global Quick Switcher (Ctrl+K) ──────────────────────────────────── */
.qs-overlay {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
  background: rgba(4, 4, 12, .55); backdrop-filter: blur(3px);
  animation: qsFade .12s var(--ease, ease);
}
@keyframes qsFade { from { opacity: 0; } to { opacity: 1; } }
.qs-box {
  width: 100%; max-width: 560px; max-height: 60vh;
  display: flex; flex-direction: column;
  background: var(--sidebar-bg, #12142b);
  border: 1px solid var(--ds-stroke-strong, var(--separator));
  border-radius: var(--ds-radius-l, 14px);
  box-shadow: var(--ds-shadow-lg, 0 24px 64px rgba(0,0,0,.6));
  overflow: hidden;
  animation: qsPop .14s var(--ease-menu-open, ease);
}
@keyframes qsPop { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
.qs-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--separator);
  color: var(--muted);
}
.qs-input-wrap input {
  flex: 1; border: none; background: none; outline: none;
  font-size: 16px; color: var(--text); font-family: inherit;
}
.qs-input-wrap input::placeholder { color: var(--muted); }
.qs-results { overflow-y: auto; padding: 8px; flex: 1; }
.qs-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.qs-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--ds-radius-s, 8px); cursor: pointer;
}
.qs-item.sel { background: var(--brand); }
.qs-item.sel .qs-name { color: #fff; }
.qs-item.sel .qs-sub  { color: rgba(255,255,255,.7); }
.qs-ico {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
}
.qs-ico-glyph { background: var(--hover-bg); color: var(--muted); font-size: 15px; }
.qs-name { flex: 1; min-width: 0; color: var(--text); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-sub  { color: var(--muted); font-size: 12px; flex-shrink: 0; padding-left: 10px; max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-foot {
  display: flex; gap: 16px; padding: 8px 16px;
  border-top: 1px solid var(--separator); color: var(--muted); font-size: 11px;
}
.qs-foot kbd {
  display: inline-block; min-width: 16px; padding: 1px 5px; margin: 0 1px;
  background: var(--hover-bg); border-radius: 4px; font-family: inherit; font-size: 11px;
}

/* ── Sunucularım / Keşfet PAGE (#page-view) ─────────────────────────────────── */
#page-view { display: none; flex: 1; min-width: 0; flex-direction: column; background: var(--chat-bg, var(--bg)); }
body.page-view #page-view { display: flex; }
body.page-view #main-col  { display: none; }
body.page-view #left-col  { --sidebar-w: 0px; }
body.page-view #sidebar   { width: 0; min-width: 0; }

body.page-view:not(.nav-expanded) #left-dock  { padding: 6px; }
body.page-view:not(.nav-expanded) #user-panel { padding: 0; justify-content: center; }
body.page-view:not(.nav-expanded) #user-panel .up-info-wrap,
body.page-view:not(.nav-expanded) #user-panel .up-controls { display: none; }
body.page-view:not(.nav-expanded) #left-dock #voice-bar { display: none !important; }

.sp-head {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 24px; border-bottom: 1px solid var(--separator); flex-shrink: 0;
}
.sp-tabs { display: flex; gap: 4px; }
.sp-tab {
  padding: 7px 16px; border: none; border-radius: var(--ds-radius-m, 10px);
  background: none; color: var(--muted); font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: background .12s, color .12s;
}
.sp-tab:hover   { color: var(--text); background: var(--hover-bg); }
.sp-tab.active  { color: #fff; background: var(--brand); }
.sp-search {
  display: flex; align-items: center; gap: 8px; flex: 1; max-width: 340px; margin-left: auto;
  padding: 8px 14px; border-radius: var(--ds-radius-m, 10px);
  background: var(--input-bg, var(--sidebar-bg)); color: var(--muted);
}
.sp-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; color: var(--text); font-size: 14px; font-family: inherit; }
.sp-search input::placeholder { color: var(--muted); }
.sp-body  { flex: 1; overflow-y: auto; padding: 22px 24px 40px; }
.sp-empty { color: var(--muted); font-size: 15px; padding: 56px 12px; text-align: center; }

.msp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px;
}
.msp-card {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border-radius: var(--ds-radius-m, 12px);
  background: var(--sidebar-bg); border: 1px solid var(--ds-stroke, transparent);
  cursor: pointer; transition: background .12s, border-color .12s, transform .1s;
}
.msp-card:hover { background: var(--hover-bg); border-color: var(--ds-stroke-strong, var(--separator)); transform: translateY(-1px); }
.msp-ico { width: 46px; height: 46px; border-radius: 28%; object-fit: cover; flex-shrink: 0; }
.msp-ico-letter { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 18px; }
.msp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.msp-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 15px; font-weight: 700; color: var(--header); }
.msp-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msp-flag { width: 16px; height: 16px; flex-shrink: 0; }
.msp-stats { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--muted); }
.msp-stat  { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.msp-dot   { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.msp-dot.on { background: var(--green, #23a55a); }
.disc-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.disc-card {
  background: var(--card-bg, rgba(255,255,255,.03));
  border: 1px solid var(--border, rgba(255,255,255,.06));
  border-radius: var(--ds-radius-l, 20px);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.disc-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.32); }
.disc-card-banner { height: 84px; background-size: cover; background-position: center; }
.disc-card-body { padding: 0 16px 16px; position: relative; }
.disc-card-icon {
  width: 56px; height: 56px; border-radius: 18px; object-fit: cover;
  margin-top: -28px; border: 5px solid var(--bg-secondary, #12142b);
  background: var(--bg-tertiary, #060714); display: block;
}
.disc-card-icon-text {
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #fff;
}
.disc-card-name {
  font-size: 16px; font-weight: 700; color: var(--header);
  margin-top: 10px; display: flex; align-items: center; gap: 2px;
}
.disc-badge { width: 22px; height: 22px; vertical-align: middle; }
.disc-card-desc {
  font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.4;
  min-height: 36px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.disc-card-meta {
  font-size: 12px; color: var(--muted); margin-top: 10px;
  display: flex; align-items: center; gap: 6px;
}
.disc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green, #23A55A); }
.disc-join {
  margin-top: 14px; width: 100%; padding: 9px 0;
  border: none; border-radius: var(--ds-radius-m, 14px);
  background: var(--green, #23A55A); color: #fff; font-weight: 600; font-size: 14px;
  cursor: pointer; transition: filter .15s, background .15s;
}
.disc-join:hover:not(:disabled) { filter: brightness(1.08); }
.disc-join:disabled { opacity: .6; cursor: default; }
.disc-join.joined { background: var(--hover-bg, rgba(255,255,255,.08)); color: var(--text); }

/* ── Keşfet category chip bar (Faz 2) ── */
.disc-cats {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px;
}
.disc-chip {
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  background: var(--card-bg, rgba(255,255,255,.03));
  color: var(--muted); font-size: 13px; font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
.disc-chip:hover { background: var(--hover-bg, rgba(255,255,255,.07)); color: var(--text); }
.disc-chip.active {
  background: var(--brand, #6b7cff); color: #fff;
  border-color: transparent;
}
/* Category tag on a discovery card */
.disc-card-cat {
  display: inline-block; margin-top: 8px; padding: 3px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: .02em; color: var(--brand, #6b7cff);
  background: var(--accent-soft, rgba(107,124,255,.14));
}

/* ── Community section card + Keşfet editor (Faz 0/2) ── */
.sv-comm-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border-radius: var(--ds-radius-m, 14px);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  background: var(--card-bg, rgba(255,255,255,.03));
}
.sv-comm-card-ico {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand, #6b7cff); background: var(--accent-soft, rgba(107,124,255,.14));
}
.sv-comm-card-body { flex: 1; min-width: 0; }
.sv-comm-card-body strong { display: block; color: var(--header, #fff); font-size: 15px; }
.sv-comm-card-body .fm-hint { margin-top: 2px; }
.sv-comm-enable {
  flex: none; padding: 9px 18px; border: none; cursor: pointer;
  border-radius: var(--ds-radius-m, 12px); font-weight: 700; font-size: 14px;
  background: var(--brand, #6b7cff); color: #fff;
  transition: filter .15s, transform .1s;
}
.sv-comm-enable:hover { filter: brightness(1.08); }
.sv-comm-enable:active { transform: scale(.98); }
.sv-comm-disable {
  margin-top: 14px; padding: 8px 16px; cursor: pointer;
  border-radius: var(--ds-radius-m, 12px); font-weight: 600; font-size: 13px;
  background: transparent; color: var(--red, #ED4245);
  border: 1px solid color-mix(in srgb, var(--red, #ED4245) 50%, transparent);
  transition: background .15s;
}
.sv-comm-disable:hover { background: color-mix(in srgb, var(--red, #ED4245) 12%, transparent); }
.sv-disc-editor textarea {
  width: 100%; resize: vertical; min-height: 64px;
  background: var(--input-bg, #060714); color: var(--text);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: var(--ds-radius-s, 10px); padding: 10px 12px;
  font-family: inherit; font-size: 14px; outline: none;
  transition: border-color .15s;
}
.sv-disc-editor textarea:focus { border-color: var(--brand, #6b7cff); }

/* ── Topluluğu Aç sihirbazı (Faz 0) ── */
.cw-steps { display: flex; gap: 7px; margin: 4px 0 18px; }
.cw-dot {
  width: 28px; height: 4px; border-radius: 999px;
  background: var(--border, rgba(255,255,255,.12)); transition: background .2s;
}
.cw-dot.done, .cw-dot.active { background: var(--brand, #6b7cff); }
.cw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cw-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text); line-height: 1.45; }
.cw-list li strong { color: var(--header, #fff); }
.cw-li-ico { flex: none; margin-top: 2px; color: var(--brand, #6b7cff); }
.cw-pane .modal-field { margin-bottom: 0; }

/* ── Kurallar editörü (Faz 1) ── */
.sv-rules-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.sv-rule-row { display: flex; align-items: center; gap: 8px; }
.sv-rule-inp {
  flex: 1; min-width: 0;
  background: var(--input-bg, #060714); color: var(--text);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: var(--ds-radius-s, 10px); padding: 9px 12px;
  font-family: inherit; font-size: 14px; outline: none; transition: border-color .15s;
}
.sv-rule-inp:focus { border-color: var(--brand, #6b7cff); }
.sv-rule-del {
  flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; border-radius: var(--ds-radius-s, 10px);
  background: transparent; color: var(--muted); transition: background .15s, color .15s;
}
.sv-rule-del:hover { background: color-mix(in srgb, var(--red, #ED4245) 14%, transparent); color: var(--red, #ED4245); }
.sv-rule-add {
  align-self: flex-start; margin-top: 4px; padding: 7px 14px; cursor: pointer;
  border-radius: var(--ds-radius-m, 12px); font-weight: 600; font-size: 13px;
  background: var(--hover-bg, rgba(255,255,255,.06)); color: var(--text);
  border: 1px solid var(--border, rgba(255,255,255,.08)); transition: background .15s;
}
.sv-rule-add:hover { background: var(--accent-soft, rgba(107,124,255,.14)); }

/* "Beklemede" tag in the member list */
.m-pending-tag {
  font-size: 11px; font-weight: 600; color: #f0b232;
  margin-top: 1px;
}

/* ── Rules gate (composer bar reuses .announce-follow-bar) + acceptance modal ── */
.rules-gate-bar .afb-ico { color: #f0b232; }
.rg-wrap .rg-rules {
  margin: 4px 0 16px; padding-left: 22px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 46vh; overflow-y: auto;
}
.rg-wrap .rg-rules li { font-size: 14px; line-height: 1.45; color: var(--text); }
.rg-check {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 14px; color: var(--text); margin: 4px 0 4px;
  user-select: none;
}
.rg-check input { width: 17px; height: 17px; accent-color: var(--brand, #6b7cff); cursor: pointer; }

/* ── Onboarding member flow (Faz 3) ── */
.onb-wrap { max-height: 70vh; overflow-y: auto; }
.onb-q { margin-bottom: 18px; }
.onb-q-title { font-size: 15px; font-weight: 700; color: var(--header, #fff); margin-bottom: 10px; }
.onb-req { color: var(--red, #ED4245); }
.onb-opts { display: flex; flex-direction: column; gap: 8px; }
.onb-opt {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 12px 14px; cursor: pointer;
  background: var(--card-bg, rgba(255,255,255,.03)); color: var(--text);
  border: 1.5px solid var(--border, rgba(255,255,255,.08));
  border-radius: var(--ds-radius-m, 14px); transition: border-color .15s, background .15s;
}
.onb-opt:hover { background: var(--hover-bg, rgba(255,255,255,.06)); }
.onb-opt.on { border-color: var(--brand, #6b7cff); background: var(--accent-soft, rgba(107,124,255,.12)); }
.onb-opt-emoji { font-size: 22px; line-height: 1; flex: none; }
.onb-opt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.onb-opt-title { font-weight: 600; font-size: 14px; }
.onb-opt-desc { font-size: 12px; color: var(--muted); }
.onb-opt-check {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border, rgba(255,255,255,.18)); transition: border-color .15s, background .15s;
}
.onb-opt.on .onb-opt-check {
  border-color: var(--brand, #6b7cff); background: var(--brand, #6b7cff)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ── Onboarding editor (settings) ── */
.onb-edit-q {
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: var(--ds-radius-m, 14px); padding: 14px; margin-bottom: 14px;
  background: var(--card-bg, rgba(255,255,255,.02));
}
.onb-edit-q-head { display: flex; gap: 8px; align-items: center; }
.onb-q-title-inp, .onb-opt-title-inp, .onb-opt-emoji-inp {
  background: var(--input-bg, #060714); color: var(--text);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: var(--ds-radius-s, 10px); padding: 9px 12px;
  font-family: inherit; font-size: 14px; outline: none; transition: border-color .15s;
}
.onb-q-title-inp { width: 100%; font-weight: 600; }
.onb-q-title-inp:focus, .onb-opt-title-inp:focus, .onb-opt-emoji-inp:focus { border-color: var(--brand, #6b7cff); }
.onb-q-del, .onb-opt-del {
  flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; border-radius: var(--ds-radius-s, 10px);
  background: transparent; color: var(--muted); transition: background .15s, color .15s;
}
.onb-q-del:hover, .onb-opt-del:hover { background: color-mix(in srgb, var(--red, #ED4245) 14%, transparent); color: var(--red, #ED4245); }
.onb-edit-q-flags { display: flex; gap: 16px; margin: 10px 0; }
.onb-mini { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.onb-mini input { accent-color: var(--brand, #6b7cff); }
.onb-edit-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.onb-edit-opt { display: flex; gap: 8px; align-items: stretch; }
.onb-opt-emoji-inp { width: 52px; text-align: center; flex: none; }
.onb-opt-title-inp { flex: 1; min-width: 0; }
.onb-add-opt, .onb-add-q {
  cursor: pointer; padding: 7px 14px; font-weight: 600; font-size: 13px;
  border-radius: var(--ds-radius-m, 12px); border: 1px solid var(--border, rgba(255,255,255,.08));
  background: var(--hover-bg, rgba(255,255,255,.06)); color: var(--text); transition: background .15s;
}
.onb-add-opt:hover, .onb-add-q:hover { background: var(--accent-soft, rgba(107,124,255,.14)); }
.onb-add-q { display: block; margin-top: 6px; }
.ws-hero-av {
  width: 76px; height: 76px; border-radius: 24px; object-fit: cover;
  border: 1px solid var(--border, rgba(255,255,255,.08));
}
.ws-ch-emoji { font-size: 22px; line-height: 1; flex: none; display: inline-flex; color: var(--muted); }
.ws-ch-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ws-ch-name { font-weight: 700; font-size: 14px; }

/* Welcome editor rows (reuse onb input/del styles) */
.sv-welcome-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.sv-welcome-row { display: flex; gap: 8px; align-items: center; }
.sv-welcome-row .wc-emoji { width: 52px; text-align: center; flex: none; }
.sv-welcome-row .wc-channel { flex: none; width: 150px; }
.sv-welcome-row .wc-label { flex: 1; min-width: 0; }

/* ── classic-style Community overview (Topluluk tab) ── */
.comm-banner {
  position: relative; display: flex; gap: 14px; align-items: flex-start;
  padding: 18px; margin-bottom: 18px; border-radius: var(--ds-radius-l, 18px);
  background: linear-gradient(135deg, var(--accent-soft, rgba(107,124,255,.14)), transparent 70%), var(--card-bg, rgba(255,255,255,.03));
  border: 1px solid var(--border, rgba(255,255,255,.08));
}
.comm-banner-ico {
  flex: none; width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand, #6b7cff); background: var(--accent-soft, rgba(107,124,255,.16));
}
.comm-banner-body { flex: 1; min-width: 0; }
.comm-banner-body strong { display: block; color: var(--header, #fff); font-size: 16px; margin-bottom: 4px; }
.comm-banner-body p { font-size: 13px; color: var(--muted); margin: 0 0 12px; line-height: 1.45; }
.comm-banner-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.comm-banner-btn {
  padding: 8px 14px; cursor: pointer; font-weight: 600; font-size: 13px;
  border-radius: var(--ds-radius-m, 12px); border: 1px solid var(--border, rgba(255,255,255,.1));
  background: var(--hover-bg, rgba(255,255,255,.06)); color: var(--text); transition: background .15s, filter .15s;
}
.comm-banner-btn:hover { background: var(--accent-soft, rgba(107,124,255,.14)); }
.comm-banner-btn.primary { background: var(--brand, #6b7cff); color: #fff; border-color: transparent; }
.comm-banner-btn.primary:hover { filter: brightness(1.08); }
.comm-banner-x {
  position: absolute; top: 12px; right: 12px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: none; background: transparent; color: var(--muted); border-radius: 8px; transition: background .15s, color .15s;
}
.comm-banner-x:hover { background: var(--hover-bg, rgba(255,255,255,.08)); color: var(--text); }
.comm-row {
  display: flex; align-items: center; gap: 18px; padding: 16px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
}
.comm-row-info { flex: 1; min-width: 0; }
.comm-row-label { font-size: 14px; font-weight: 600; color: var(--header, #fff); margin-bottom: 3px; }
.comm-row-desc { font-size: 12px; color: var(--muted); line-height: 1.45; }
.comm-row-select { flex: none; width: 220px; }

/* ── Onboarding landing cards + question editor (classic-style) ── */
.onb-card {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  border-radius: var(--ds-radius-m, 14px); margin-bottom: 12px;
  background: var(--card-bg, rgba(255,255,255,.03)); border: 1px solid var(--border, rgba(255,255,255,.08));
}
.onb-card-soon { opacity: .6; }
.onb-card-ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand, #6b7cff); background: var(--accent-soft, rgba(107,124,255,.14));
}
.onb-card-body { flex: 1; min-width: 0; }
.onb-card-body strong { display: block; color: var(--header, #fff); font-size: 15px; }
.onb-card-body .fm-hint { margin-top: 2px; }
.onb-card-btn {
  flex: none; padding: 8px 14px; cursor: pointer; font-weight: 600; font-size: 13px;
  border-radius: var(--ds-radius-m, 12px); border: none;
  background: var(--brand, #6b7cff); color: #fff; transition: filter .15s;
}
.onb-card-btn:hover:not(:disabled) { filter: brightness(1.08); }
.onb-card-btn:disabled { background: var(--hover-bg, rgba(255,255,255,.06)); color: var(--muted); cursor: default; }
.fm-subback {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px;
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 13px; font-weight: 600; font-family: inherit; padding: 4px 0;
}
.fm-subback:hover { color: var(--text); }
.onb-q-num { font-size: 13px; font-weight: 700; color: var(--muted); flex: 1; }
.onb-ans-head { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .03em; margin: 12px 0 8px; }
.onb-savebar {
  display: flex; align-items: center; gap: 12px; justify-content: flex-end;
  position: sticky; bottom: 0; margin-top: 16px; padding: 12px 0;
}
.onb-savebar-text { margin-right: auto; color: #f0b232; font-size: 13px; font-weight: 600; }
.onb-link {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--brand, #6b7cff); font-weight: 600; font-size: inherit; font-family: inherit;
}
.onb-link:hover { text-decoration: underline; }
.onb-sub { animation: fm-sub-in .18s ease; }
@keyframes fm-sub-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Answer chips in a question card ── */
.onb-ans-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.onb-ans-chip {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  padding: 11px 13px; border-radius: var(--ds-radius-m, 12px); color: var(--text);
  background: var(--input-bg, #060714); border: 1px solid var(--border, rgba(255,255,255,.08));
  transition: background .14s, border-color .14s;
}
.onb-ans-chip:hover { background: var(--hover-bg, rgba(255,255,255,.05)); border-color: var(--brand, #6b7cff); }
.onb-ans-emoji { font-size: 18px; line-height: 1; flex: none; display: inline-flex; width: 22px; justify-content: center; color: var(--muted); }
.onb-ans-text { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-ans-meta { flex: none; font-size: 11px; font-weight: 700; color: var(--brand, #6b7cff); background: var(--accent-soft, rgba(107,124,255,.14)); padding: 2px 8px; border-radius: 999px; }
.onb-ans-edit { flex: none; display: inline-flex; color: var(--muted); opacity: 0; transition: opacity .14s; }
.onb-ans-chip:hover .onb-ans-edit { opacity: 1; }
.onb-add-opt { display: inline-flex; align-items: center; gap: 6px; }

/* ── Answer editor modal ── */
.ans-wrap { display: flex; flex-direction: column; }
.ans-eyebrow { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; text-transform: none; }
.ans-title { font-size: 20px; font-weight: 800; color: var(--header, #fff); margin: 2px 0 18px; }
.ans-sec { padding: 16px 0; border-top: 1px solid var(--border, rgba(255,255,255,.06)); }
.ans-sec:first-of-type { border-top: none; padding-top: 0; }
.ans-label { font-size: 14px; font-weight: 700; color: var(--header, #fff); margin-bottom: 10px; }
.ans-req { color: var(--red, #ED4245); }
.ans-input {
  width: 100%; margin-bottom: 8px;
  background: var(--input-bg, #060714); color: var(--text);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: var(--ds-radius-s, 10px); padding: 11px 13px;
  font-family: inherit; font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.ans-input:last-child { margin-bottom: 0; }
.ans-input:focus { border-color: var(--brand, #6b7cff); box-shadow: 0 0 0 3px var(--accent-soft, rgba(107,124,255,.18)); }
.ans-hint { font-size: 12px; color: var(--muted); margin: 8px 0 0; line-height: 1.4; }
.ans-emoji-input {
  width: 56px; height: 44px; text-align: center; font-size: 22px;
  background: var(--input-bg, #060714); color: var(--text);
  border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: var(--ds-radius-s, 10px);
  outline: none; transition: border-color .15s;
}
.ans-emoji-input:focus { border-color: var(--brand, #6b7cff); }
.ans-remove { margin-right: auto; background: none; border: none; cursor: pointer; color: var(--red, #ED4245); font-weight: 600; font-size: 14px; font-family: inherit; padding: 8px 4px; }
.ans-remove:hover { text-decoration: underline; }

/* ── Custom multi-select role picker (.rms) ── */
.rms { position: relative; }
.rms-control {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; cursor: text;
  min-height: 44px; padding: 7px 10px;
  background: var(--input-bg, #060714);
  border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: var(--ds-radius-s, 10px);
  transition: border-color .15s, box-shadow .15s;
}
.rms-control:focus-within { border-color: var(--brand, #6b7cff); box-shadow: 0 0 0 3px var(--accent-soft, rgba(107,124,255,.18)); }
.rms-chips { display: contents; }
.rms-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 9px;
  border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--hover-bg, rgba(255,255,255,.08)); border: 1px solid var(--border, rgba(255,255,255,.1));
}
.rms-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.rms-chip-x { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 2px; border-radius: 4px; }
.rms-chip-x:hover { color: var(--text); background: rgba(255,255,255,.1); }
.rms-input { flex: 1; min-width: 80px; background: none; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 14px; padding: 4px 2px; }
.rms-input::placeholder { color: var(--muted); }
.rms-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  max-height: 230px; overflow-y: auto; padding: 6px;
  background: var(--card-bg, #12142b); border: 1px solid var(--border, rgba(255,255,255,.12));
  border-radius: var(--ds-radius-m, 12px); box-shadow: 0 16px 44px rgba(0,0,0,.5);
}
.rms-menu-title { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; padding: 6px 8px 4px; }
.rms-opt {
  display: flex; align-items: center; gap: 9px; padding: 9px 8px; cursor: pointer;
  border-radius: var(--ds-radius-s, 8px); font-size: 14px; color: var(--text); transition: background .12s;
}
.rms-opt:hover { background: var(--accent-soft, rgba(107,124,255,.16)); }
.rms-empty { padding: 12px 8px; font-size: 13px; color: var(--muted); }

/* ── Custom single-select dropdown (.csel) ── */
.comm-row-select { flex: none; width: 240px; }
.csel { position: relative; }
.csel-control {
  display: flex; align-items: center; gap: 8px; width: 100%; cursor: pointer;
  padding: 10px 12px; text-align: left;
  background: var(--input-bg, #060714); color: var(--text);
  border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: var(--ds-radius-s, 10px);
  font-family: inherit; font-size: 14px; transition: border-color .15s, box-shadow .15s;
}
.csel-control:hover { border-color: rgba(255,255,255,.2); }
.csel-control.open { border-color: var(--brand, #6b7cff); box-shadow: 0 0 0 3px var(--accent-soft, rgba(107,124,255,.18)); }
.csel-control:disabled { opacity: .55; cursor: default; }
.csel-value { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.csel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-ph { color: var(--muted); }
.csel-ico { flex: none; color: var(--muted); }
.csel-chev { flex: none; display: inline-flex; color: var(--muted); transition: transform .15s; }
.csel-control.open .csel-chev { transform: rotate(180deg); }
.csel-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  max-height: 260px; overflow-y: auto; padding: 6px;
  background: var(--card-bg, #12142b); border: 1px solid var(--border, rgba(255,255,255,.12));
  border-radius: var(--ds-radius-m, 12px); box-shadow: 0 16px 44px rgba(0,0,0,.5);
}
.csel-opt {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; cursor: pointer;
  border-radius: var(--ds-radius-s, 8px); font-size: 14px; color: var(--text); transition: background .12s;
}
.csel-opt:hover { background: var(--accent-soft, rgba(107,124,255,.16)); }
.csel-opt.on { color: #fff; }
.csel-opt .csel-label { flex: 1; }
.csel-check { flex: none; color: var(--brand, #6b7cff); display: inline-flex; }
@media (max-width: 640px) { .comm-row-select { width: 100%; } .comm-row { flex-direction: column; align-items: stretch; } }

/* ── Yasaklananlar listesi ── */
.sv-bans-list { display: flex; flex-direction: column; gap: 8px; }
.ban-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: var(--ds-radius-m, 14px);
  background: var(--card-bg, rgba(255,255,255,.03)); border: 1px solid var(--border, rgba(255,255,255,.08));
}
.ban-info { flex: 1; min-width: 0; }
.ban-name { font-size: 14px; font-weight: 700; color: var(--header, #fff); }
.ban-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 1px; }
.ban-meta strong { color: var(--text); font-weight: 600; }
.ban-dot { opacity: .6; }
.ban-reason { font-size: 13px; color: var(--text); margin-top: 4px; line-height: 1.4; }
.ban-noreason { color: var(--muted); font-style: italic; }
.ban-unban {
  flex: none; padding: 8px 14px; cursor: pointer; font-weight: 600; font-size: 13px;
  border-radius: var(--ds-radius-m, 12px); border: 1px solid color-mix(in srgb, var(--brand, #6b7cff) 50%, transparent);
  background: transparent; color: var(--brand, #6b7cff); transition: background .15s;
}
.ban-unban:hover:not(:disabled) { background: var(--accent-soft, rgba(107,124,255,.14)); }
.ban-unban:disabled { opacity: .6; cursor: default; }

/* ══ Full-screen member JOIN FLOW (welcome → questions → rules) ══ */
.jf-overlay {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  animation: jf-in .28s ease;
}
@keyframes jf-in { from { opacity: 0; } to { opacity: 1; } }
.jf-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.jf-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 0%, rgba(7,8,23,.55), rgba(7,8,23,.86) 70%, rgba(7,8,23,.95));
  backdrop-filter: blur(2px);
}
.jf-content {
  position: relative; z-index: 1; width: 100%; max-width: 760px;
  padding: 24px; max-height: 100vh; overflow-y: auto;
  display: flex; align-items: center; justify-content: center;
}
/* Welcome step */
.jf-welcome { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.jf-server-ico {
  width: 104px; height: 104px; border-radius: 32px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 46px; font-weight: 800; color: #fff; margin-bottom: 14px;
  background: linear-gradient(135deg, var(--brand, #6b7cff), #3b2f7a);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.jf-server-ico img { width: 100%; height: 100%; object-fit: cover; }
.jf-eyebrow { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.78); }
.jf-bigtitle { font-size: 34px; font-weight: 800; color: #fff; letter-spacing: -.5px; margin: 2px 0 10px; text-wrap: balance; }
.jf-desc { font-size: 15px; color: rgba(255,255,255,.72); max-width: 46ch; line-height: 1.55; margin: 0 0 8px; }
.jf-wchannels { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 420px; margin: 10px 0 6px; }
.jf-wchannel {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  padding: 12px 14px; border-radius: 14px; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  transition: background .15s, border-color .15s, transform .1s;
}
.jf-wchannel:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.jf-wc-emoji { font-size: 20px; display: inline-flex; color: rgba(255,255,255,.7); }
.jf-wc-name { display: block; font-weight: 700; font-size: 14px; }
.jf-wc-label { display: block; font-size: 12px; color: rgba(255,255,255,.6); }
/* Primary button (shared) */
.jf-primary {
  padding: 12px 26px; border: none; cursor: pointer; border-radius: 999px;
  background: #fff; color: #1a1b2e; font-weight: 700; font-size: 15px; font-family: inherit;
  transition: transform .1s, box-shadow .15s, opacity .15s;
}
.jf-primary:hover:not(:disabled) { box-shadow: 0 8px 24px rgba(255,255,255,.2); transform: translateY(-1px); }
.jf-primary:active:not(:disabled) { transform: scale(.98); }
.jf-primary:disabled { opacity: .45; cursor: default; }
.jf-primary-lg { margin-top: 16px; padding: 14px 40px; font-size: 16px; }
.jf-skip { margin-top: 12px; background: none; border: none; color: rgba(255,255,255,.6); cursor: pointer; font-size: 13px; font-family: inherit; }
.jf-skip:hover { color: #fff; }
/* Question + rules card */
.jf-card {
  width: 100%; background: rgba(15,16,30,.72); border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px; padding: 30px; box-shadow: 0 24px 70px rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
}
.jf-step-label { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.62); letter-spacing: .02em; }
.jf-dot { opacity: .5; margin: 0 2px; }
.jf-req { color: #f0b232; }
.jf-card-title { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.3px; margin: 8px 0 22px; text-wrap: balance; }
.jf-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.jf-opt {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  padding: 16px; border-radius: 16px; color: #fff;
  background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.12);
  transition: background .15s, border-color .15s, transform .1s;
}
.jf-opt:hover { background: rgba(255,255,255,.1); }
.jf-opt.on { border-color: var(--brand, #6b7cff); background: rgba(107,124,255,.2); }
.jf-opt-emoji { font-size: 26px; flex: none; line-height: 1; }
.jf-opt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jf-opt-title { font-weight: 700; font-size: 15px; }
.jf-opt-desc { font-size: 12px; color: rgba(255,255,255,.6); }
.jf-nav { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.jf-back { background: none; border: none; color: rgba(255,255,255,.7); cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit; padding: 8px 4px; }
.jf-back:hover { color: #fff; }
.jf-nav-hint { margin-left: auto; font-size: 12px; color: rgba(255,255,255,.5); text-align: right; max-width: 50%; }
.jf-rules { margin: 0 0 4px; padding-left: 22px; display: flex; flex-direction: column; gap: 14px; max-height: 46vh; overflow-y: auto; }
.jf-rules li { color: rgba(255,255,255,.88); font-size: 14px; line-height: 1.5; padding-left: 4px; }
.jf-rules li::marker { color: rgba(255,255,255,.5); font-weight: 700; }
@media (max-width: 640px) {
  .jf-options { grid-template-columns: 1fr; }
  .jf-bigtitle { font-size: 27px; }
  .jf-card { padding: 22px; }
  .jf-card-title { font-size: 22px; }
}

/* ── Admin → Sunucular ── */
.adm-srv-row { align-items: center; }
.adm-srv-flags { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.adm-flag {
  display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.adm-flag input { cursor: pointer; }

/* ── In-chat GIF favorite ── */
.msg-gif-wrap { position: relative; display: inline-block; max-width: 100%; }
.msg-gif-fav {
  position: absolute; top: 8px; left: 8px;
  width: 30px; height: 30px; border: none; border-radius: 9px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 16px; line-height: 1;
  cursor: pointer; opacity: 0; transform: scale(.85);
  transition: opacity .12s, transform .12s, background .12s, color .12s;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.msg-gif-wrap:hover .msg-gif-fav { opacity: 1; transform: scale(1); }
.msg-gif-fav:hover { background: rgba(0,0,0,.78); }
.msg-gif-fav.faved { opacity: 1; color: #fadb5e; }

/* ── #channel mentions in chat ── */
.channel-mention { cursor: pointer; }
.channel-mention:hover:not(.disabled) { text-decoration: underline; }
.channel-mention.disabled { cursor: default; opacity: .75; }

/* ════════════════════════════════════════════════════════════════════════
   FORM-CONTROL CONSISTENCY PASS  (kept at end of file so it wins on source
   order). Many descendant select rules set `background:` shorthand, which
   silently wipes the chevron the base `select` rule paints — re-assert the
   chevron + right gutter + token radius + brand focus ring for all of them.
   ════════════════════════════════════════════════════════════════════════ */
.modal-field select, .fm-field select, .ms-role-select,
.adp-select, .sv-sys-select, .kb-action {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c8088' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  padding-right: 34px;
  border-radius: var(--ds-radius-s);
  transition: border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.modal-field select:focus, .fm-field select:focus, .ms-role-select:focus,
.adp-select:focus, .sv-sys-select:focus, .kb-action:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring-brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7cff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
body[data-theme="light"] .modal-field select,
body[data-theme="light"] .fm-field select,
body[data-theme="light"] .ms-role-select,
body[data-theme="light"] .adp-select,
body[data-theme="light"] .sv-sys-select,
body[data-theme="light"] .kb-action {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ── Tactile press feedback on primary interactive controls ──
   A small scale-down on press makes every button feel physical. Transition is
   re-declared as a superset so the press (and hover/colour shifts) all ease. */
.modal-btn, .fm-save-btn, .bv-cta-btn, .boost-remove-btn, .boost-transfer-btn,
.btr-row, .ssp-pill, .rs-unlock-btn, .fm-upload-btn,
.jf-primary, .jf-primary-lg, .jf-skip, .csel-control {
  transition: transform .12s var(--ease-out), filter .15s var(--ease),
              background-color .15s var(--ease), border-color .15s var(--ease),
              box-shadow .15s var(--ease), color .15s var(--ease);
}
.modal-btn:active, .fm-save-btn:active, .bv-cta-btn:active, .boost-remove-btn:active,
.boost-transfer-btn:active, .btr-row:active, .ssp-pill:active, .rs-unlock-btn:active,
.fm-upload-btn:active, .jf-primary:active, .jf-primary-lg:active, .jf-skip:active,
.csel-control:active {
  transform: scale(.97);
}
.modal-btn:disabled, .fm-save-btn:disabled, .bv-cta-btn:disabled { transform: none; }
.dpp-banner.is-empty { background: var(--input-bg); }
.role-toggle-row { background: var(--input-bg); border-radius: 6px; transition: background .1s; }

/* ════════════════════════════════════════════════════════════════════════════
   STORE (Halo design) — hero banner + category chips + product cards with a
   gradient top, feature checklist, price and a full-width buy button. Theme-aware
   via tokens so it works in every theme; the Halo skin adds glass on top.
   ════════════════════════════════════════════════════════════════════════════ */
.st-page { padding: 28px 26px 60px; }
.st-wrap { max-width: 1080px; margin: 0 auto; }

.st-hero {
  position: relative; overflow: hidden;
  border-radius: 26px; padding: 38px 40px; margin-bottom: 22px;
  background: linear-gradient(120deg, #6b7cff 0%, #a855f7 48%, #ec4899 100%);
}
.st-hero-orb1 { position: absolute; right: -40px; top: -40px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.14); filter: blur(8px); pointer-events: none; }
.st-hero-orb2 { position: absolute; right: 80px; bottom: -70px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.1); pointer-events: none; }
.st-hero-inner { position: relative; max-width: 560px; }
.st-hero-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 34px; font-weight: 800; color: #fff; line-height: 1.1; letter-spacing: -.5px; }
.st-hero-sub { font-size: 15px; color: rgba(255,255,255,.9); margin-top: 12px; line-height: 1.55; }

.st-status { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.st-status-pill { padding: 8px 14px; border-radius: 999px; background: var(--input-bg); border: 1px solid var(--separator); font-size: 13px; font-weight: 600; color: var(--header); }

.st-cats { display: flex; gap: 9px; margin-bottom: 24px; overflow-x: auto; padding-bottom: 2px; }
.st-cat { padding: 8px 16px; border-radius: 999px; background: var(--input-bg); color: var(--muted); font-weight: 700; font-size: 13.5px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; font-family: inherit; transition: background .14s, color .14s, filter .14s; }
.st-cat:hover { color: var(--header); filter: brightness(1.08); }
.st-cat.active { background: var(--brand); color: #fff; }

.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; }
.st-card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--chat-bg); border: 1px solid var(--separator); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.st-card-top { position: relative; height: 130px; overflow: hidden; display: flex; align-items: flex-end; padding: 16px 18px; }
.st-card-orb1 { position: absolute; right: -20px; top: -24px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.16); }
.st-card-orb2 { position: absolute; right: 34px; bottom: -30px; width: 70px; height: 70px; border-radius: 50%; background: rgba(255,255,255,.12); }
.st-card-tag { position: absolute; top: 14px; left: 18px; padding: 5px 11px; border-radius: 999px; background: rgba(0,0,0,.32); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .3px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.st-card-name { position: relative; font-family: 'Bricolage Grotesque', sans-serif; font-size: 21px; font-weight: 800; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.st-card-body { flex: 1; display: flex; flex-direction: column; padding: 18px; }
.st-card-desc { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin-bottom: 14px; }
.st-feats { display: flex; flex-direction: column; gap: 9px; flex: 1; }
.st-feat { display: flex; align-items: flex-start; gap: 9px; }
.st-feat-check { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #23A55A; }
.st-feat span { font-size: 13.5px; color: var(--text); line-height: 1.4; }
.st-owned { font-size: 12.5px; color: #23A55A; font-weight: 700; margin-top: 12px; }
.st-price { display: flex; align-items: baseline; gap: 5px; margin: 18px 0 14px; }
.st-price b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px; font-weight: 800; color: var(--header); }
.st-per { font-size: 13px; color: var(--muted); }
.st-buy { width: 100%; padding: 12px; border-radius: 12px; font-size: 14.5px; font-weight: 800; color: #fff; background: var(--brand); border: none; cursor: pointer; font-family: inherit; box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 40%, transparent); transition: transform .12s, filter .12s; }
.st-buy:hover { transform: translateY(-1px); filter: brightness(1.08); }
.st-buy:active { transform: scale(.98); }
.st-info { width: 100%; margin-top: 8px; padding: 7px; background: none; border: none; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: color .12s; }
.st-info:hover { color: var(--text); }
.st-history { margin-top: 28px; display: flex; justify-content: center; }

/* ── Discover (Halo) refinements: find-hero + overlapping squircle icon + stats ── */
.dfind-hero { text-align: center; max-width: 540px; margin: 6px auto 22px; }
.dfind-hero-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 30px; font-weight: 800; color: var(--header); letter-spacing: -.6px; }
.dfind-hero-sub { color: var(--muted); margin-top: 6px; line-height: 1.5; }
.disc-card-banner { position: relative; }
.disc-card-banner .disc-card-icon {
  position: absolute; left: 14px; bottom: -22px; margin-top: 0;
  width: 50px; height: 50px; border-radius: 16px;
  border: 4px solid var(--sidebar-bg);
}
.disc-card-body { padding-top: 30px; }
.disc-card-meta { gap: 14px; flex-wrap: wrap; }
.disc-stat { display: flex; align-items: center; gap: 5px; }
.disc-card-meta .disc-dot { width: 8px; height: 8px; background: var(--muted); }
.disc-card-meta .disc-dot-on { background: var(--green, #23A55A); }

/* ── Theme picker → Halo reference: gradient-top cards with a name + check ── */
.theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; max-width: 560px; }
.theme-opt { border-radius: 14px; overflow: hidden; border: 2px solid var(--separator); background: var(--input-bg); cursor: pointer; display: block; flex: initial; transition: transform .18s var(--ease-out), border-color .18s; }
.theme-opt:hover { transform: translateY(-2px); }
.theme-opt.active { border-color: var(--brand); }
.theme-opt-swatch { display: block; width: auto; height: 72px; border-radius: 0; outline: none !important; box-shadow: none !important; transform: none !important; }
.theme-opt-swatch::before { border-radius: 0; }
.theme-opt:hover .theme-opt-swatch { transform: none !important; box-shadow: none !important; }
.theme-opt.active .theme-opt-swatch::after { display: none; }
.theme-opt-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 12px; font-weight: 700; color: var(--header); font-size: 13.5px; }
.theme-opt-tick { width: 16px; height: 16px; color: var(--brand); flex: none; }

/* ── BOT rozeti (mesaj yazarı + üye listesi) ── */
.bot-tag {
  display: inline-block; vertical-align: middle;
  margin-left: 5px; padding: 0 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .3px; line-height: 16px;
  border-radius: 4px; background: var(--brand, #5865f2); color: #fff;
  text-transform: uppercase;
}

/* ── GELİŞTİRİCİ PORTALI ── */
.dev-apps-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dev-app-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--input-bg, #12142b); border: 1px solid var(--sep, rgba(255,255,255,.08)); margin-bottom: 8px; }
.dev-app-av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 17px; color: #fff; background: linear-gradient(135deg, var(--brand, #5865f2), #9a6bff); }
.dev-app-av.lg { width: 52px; height: 52px; font-size: 22px; }
.dev-app-info { flex: 1; min-width: 0; }
.dev-app-name { font-weight: 700; color: var(--header); }
.dev-app-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.dev-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.dev-back { background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; margin-bottom: 14px; }
.dev-back:hover { color: var(--header); }
.dev-token-fresh { border: 1px solid color-mix(in srgb, var(--yellow, #F0B232) 45%, transparent); background: color-mix(in srgb, var(--yellow, #F0B232) 10%, transparent); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.dev-token-fresh-title { font-weight: 800; color: var(--header); font-size: 14px; }
.dev-token-fresh-sub { font-size: 12.5px; color: var(--muted); margin: 4px 0 10px; line-height: 1.5; }
.dev-token-row { display: flex; align-items: center; gap: 8px; }
.dev-token-val { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: ui-monospace, monospace; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; background: var(--input-bg, #12142b); border: 1px solid var(--sep, rgba(255,255,255,.08)); color: var(--text); }
.dev-srv-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dev-srv-chip { padding: 4px 10px; border-radius: 999px; background: var(--input-bg, #12142b); border: 1px solid var(--sep, rgba(255,255,255,.08)); font-size: 12.5px; color: var(--text); }
.dev-srv-pick { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; margin-bottom: 12px; }
.dev-srv-pick-row { text-align: left; padding: 11px 13px; border-radius: 10px; background: var(--input-bg, #12142b); border: 1px solid var(--sep, rgba(255,255,255,.08)); color: var(--header); font-weight: 600; font-size: 14px; cursor: pointer; }
.dev-srv-pick-row:hover { border-color: var(--brand, #5865f2); }
.dev-docs { font-size: 14px; line-height: 1.65; color: var(--text); }
.dev-docs h3 { font-size: 15px; color: var(--header); margin: 20px 0 8px; }
.dev-docs p { color: var(--muted); margin-bottom: 8px; }
.dev-docs ul { padding-left: 18px; color: var(--muted); display: flex; flex-direction: column; gap: 5px; }
.dev-docs code { font-family: ui-monospace, monospace; font-size: 12.5px; background: var(--input-bg, #12142b); padding: 1px 5px; border-radius: 4px; }
.dev-ep { width: 100%; border-collapse: collapse; margin: 4px 0; }
.dev-ep td { padding: 6px 10px; border-bottom: 1px solid var(--sep, rgba(255,255,255,.06)); font-size: 13px; vertical-align: top; }
.dev-ep td:first-child { width: 48px; color: var(--brand, #5865f2); font-weight: 700; }
.dev-code { background: var(--input-bg, #12142b); border: 1px solid var(--sep, rgba(255,255,255,.08)); border-radius: 10px; padding: 12px 14px; overflow-x: auto; font-family: ui-monospace, monospace; font-size: 12.5px; line-height: 1.6; color: var(--text); white-space: pre; }

/* ── Bot yetki menüsü (ekleme akışı) ── */
.botperm-presets { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.botperm-preset { flex: 1; min-width: 130px; text-align: left; padding: 10px 12px; border-radius: 11px; background: var(--input-bg, #12142b); border: 1px solid var(--sep, rgba(255,255,255,.08)); color: var(--header); font-weight: 700; font-size: 13.5px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.botperm-preset span { font-weight: 500; font-size: 11.5px; color: var(--muted); }
.botperm-preset:hover { border-color: var(--brand, #5865f2); }
.botperm-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.botperm-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--input-bg, #12142b); border: 1px solid var(--sep, rgba(255,255,255,.08)); cursor: pointer; }
.botperm-row .botperm-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.botperm-row .botperm-txt b { color: var(--header); font-size: 14px; }
.botperm-row .botperm-txt span { color: var(--muted); font-size: 12px; }
.botperm-check { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 2px solid var(--sep, rgba(255,255,255,.15)); display: grid; place-items: center; transition: all .12s; }
.botperm-row.on { border-color: var(--brand, #5865f2); }
.botperm-row.on .botperm-check { background: var(--brand, #5865f2); border-color: var(--brand, #5865f2); }
.botperm-row.on .botperm-check::after { content: ''; width: 6px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translateY(-1px); }
.botperm-row.shadowed { opacity: .5; }
.re-managed-lock { display: inline-flex; align-items: center; }

/* ── Bot embed kartları ── */
.msg-embed { margin: 4px 0 2px; max-width: 520px; border-left: 4px solid var(--brand, #5865f2); border-radius: 4px; background: var(--input-bg, #12142b); padding: 10px 14px; }
.emb-main { display: flex; gap: 12px; }
.emb-content { flex: 1; min-width: 0; }
.emb-author { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.emb-title { display: block; font-size: 15px; font-weight: 700; color: var(--header); margin-bottom: 4px; }
a.emb-title:hover { text-decoration: underline; color: var(--brand, #5865f2); }
.emb-desc { font-size: 13.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.emb-fields { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.emb-field { min-width: 100%; }
.emb-field.inline { min-width: 150px; flex: 1; }
.emb-field-name { font-size: 12.5px; font-weight: 700; color: var(--header); margin-bottom: 1px; }
.emb-field-val { font-size: 13px; color: var(--text); }
.emb-thumb { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; flex: none; }
.emb-image { margin-top: 10px; max-width: 100%; max-height: 300px; border-radius: 8px; }
.emb-footer { margin-top: 8px; font-size: 11.5px; color: var(--muted); }

/* ── Bot component'leri (buton / dropdown) ── */
.msg-components { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px; max-width: 520px; }
.msg-comp-row { display: flex; flex-wrap: wrap; gap: 8px; }
.msg-comp-btn { padding: 8px 16px; border-radius: 8px; border: none; font-size: 13.5px; font-weight: 600; cursor: pointer; color: #fff; background: #4e5058; transition: filter .12s, opacity .12s; text-decoration: none; display: inline-flex; align-items: center; }
.msg-comp-btn:hover { filter: brightness(1.1); }
.msg-comp-btn.primary { background: var(--brand, #5865f2); }
.msg-comp-btn.success { background: #248046; }
.msg-comp-btn.danger { background: #da373c; }
.msg-comp-btn.link { background: #4e5058; }
.msg-comp-btn.msc-busy { opacity: .5; pointer-events: none; }
.msc-select { position: relative; min-width: 240px; max-width: 400px; padding: 9px 12px; border-radius: 8px; background: var(--input-bg, #12142b); border: 1px solid var(--sep, rgba(255,255,255,.1)); cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.msc-select-label { flex: 1; }
.msc-menu { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--sidebar-bg, #0b0d20); border: 1px solid var(--sep, rgba(255,255,255,.1)); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4); overflow: hidden; max-height: 260px; overflow-y: auto; }
.msc-select.open .msc-menu { display: block; }
.msc-opt { padding: 9px 12px; cursor: pointer; font-size: 13.5px; color: var(--text); display: flex; flex-direction: column; gap: 1px; }
.msc-opt span { font-size: 12px; color: var(--muted); }
.msc-opt:hover { background: var(--hover, rgba(255,255,255,.06)); }