:root {
  /* Фоны — charcoal / obsidian (CAMP) */
  --bg-app: #0c0c0e;
  --bg-rail: #0a0a0c;
  --bg-sidebar: #141416;
  --bg-chat: #1a1a1d;
  --skel: #2c2d32;
  --bg-mod: #161618;
  --bg-input: #1e1e22;
  --bg-hover: #242220;
  --bg-active: #2e2a26;
  --bg-user: #101012;
  --bg-accent: #3a3028;
  --bg-floating: #080808;
  --line: #1a1614;
  --line-soft: #2e2824;

  /* Текст — тёплый крем */
  --text: #fff3e0;
  --text-normal: #e8dcc8;
  --text-muted: #9a8f82;
  --text-link: #ff9a3c;
  --interactive: #c4b8a8;
  --interactive-hover: #e8dcc8;
  --interactive-active: #fff8ef;

  /* Бренд — ember orange / fire yellow */
  --accent: #ff6a1a;
  --accent-brand: #e64a19;
  --accent-brand-hover: #ff6a1a;
  --accent-gold: #ffb300;
  --ember-glow: 0 0 14px rgba(255, 106, 26, .45);

  /* Статусы (Discord) */
  --green: #23a55a;
  --yellow: #f0b232;
  --red: #f23f43;
  --offline: #80848e;

  /* Радиусы — чуть острее */
  --radius-xs: 6px;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-round: 50%;

  /* Тени */
  --elevation-low: 0 1px 0 rgba(0, 0, 0, .35);
  --elevation-medium: 0 4px 8px rgba(0, 0, 0, .35);
  --elevation-high: 0 8px 28px rgba(0, 0, 0, .55);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, .65);

  /* Скроллбары */
  --scrollbar-thumb: #1a1614;
  --scrollbar-auto-thumb: #0c0c0e;
  --scrollbar-auto-track: #141416;

  /* Типографика — system first (googleapis часто режут RU ISP) */
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-code: Consolas, "Andale Mono WT", monospace;
  --display: Impact, "Arial Narrow", "Segoe UI", system-ui, sans-serif;

  /* Геометрия */
  --header-h: 48px;
  --rail-w: 72px;
  --side-w: 320px;
  --member-w: 288px;
  --user-h: 56px;

  --camp-ease: cubic-bezier(.22, 1, .36, 1);
  --camp-dur: .18s;
  --camp-dur-enter: .32s;
  --camp-dur-hover: .15s;
}

* { box-sizing: border-box; }
html {
  height: 100%;
  height: 100dvh;
  margin: 0;
  /* Lock rem base — Discord-ish standard density (not compact, not fat) */
  font-size: 16px;
}
html, body {
  height: 100%;
  height: 100dvh;
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
}

/*
 * Electron Desktop: 100dvh can track the full monitor (incl. under the taskbar)
 * when a frameless window was maximized past workArea. Prefer the window's
 * content box so .shell-bottom (nick / mic / phones) stays above the taskbar.
 */
html.electron,
html.electron body,
body.electron {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden;
}
body.electron #app,
body.electron .shell,
body.electron .auth {
  height: 100% !important;
  max-height: 100% !important;
}

/* Тонкие тёмные скроллбары (Discord-like) — никогда не OS light-gray */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--sf-scroll, #1a1b1e) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: var(--sf-scroll, #1a1b1e);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--sf-abyss, #111214);
  background-clip: padding-box;
}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

/* Убрать нативные стрелки number (бусты и прочие поля) */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
::selection { background: rgba(230, 74, 25, .45); }
body {
  font-family: var(--font);
  font-size: 16px;
  color: var(--text);
  background: var(--bg-app);
  overflow: hidden; /* app scroll lives in panes (.messages / .auth / settings) */
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}
/* Electron: custom titlebar (HTML controls scale with zoomFactor) */
body.electron {
  padding-top: 32px;
}
body.electron .titlebar-drag {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  z-index: 20000;
  -webkit-app-region: drag;
  background: var(--bg-app);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: stretch;
  pointer-events: auto;
}
body.electron .titlebar-drag::after {
  content: "CAMP";
  position: absolute;
  left: 12px;
  top: 0;
  height: 32px;
  line-height: 32px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-gold);
  letter-spacing: 0.14em;
  text-shadow: 0 0 10px rgba(255, 106, 26, .35);
  pointer-events: none;
}
body.electron .titlebar-controls {
  margin-left: auto;
  display: flex;
  align-items: stretch;
  height: 100%;
  -webkit-app-region: no-drag;
  z-index: 1;
}
body.electron .titlebar-btn {
  width: 46px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-normal, #e8dcc8);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-app-region: no-drag;
  flex-shrink: 0;
}
body.electron .titlebar-btn svg {
  width: 10px;
  height: 10px;
  display: block;
  pointer-events: none;
}
body.electron .titlebar-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
body.electron .titlebar-btn.titlebar-close:hover {
  background: #e81123;
  color: #fff;
}
/* Stream true-fullscreen: hide custom titlebar so video fills the monitor */
body.electron.stream-fs-open {
  padding-top: 0;
}
body.electron.stream-fs-open .titlebar-drag {
  display: none !important;
}
body.electron button,
body.electron a,
body.electron input,
body.electron select,
body.electron textarea,
body.electron .icon-btn,
body.electron .rail-btn,
body.electron .chan,
body.electron .dm-chan,
body.electron .friend-row,
body.electron .member,
body.electron .voice-user,
body.electron .settings-close,
body.electron .chan-scroll,
body.electron .titlebar-btn,
body.electron .upd-ready-bar {
  -webkit-app-region: no-drag;
}
button, input, textarea, select { font: inherit; color: inherit; }
button {
  cursor: pointer;
  border: 0;
  background: var(--accent-brand);
  color: #fff;
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  font-weight: 500;
}
button:disabled { opacity: 0.45; cursor: default; }
button.ghost {
  background: transparent;
  color: var(--text-muted);
}
button.ghost:hover { color: var(--text); background: var(--bg-hover); }
button.danger { background: var(--red); }
input, textarea, select {
  width: 100%;
  background: var(--bg-input);
  border: none;
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  outline: none;
/* checkbox-11042 */
}
input[type="checkbox"],
input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  padding: 0 !important;
  margin: 0;
  accent-color: var(--accent-brand, #e64a19);
  flex-shrink: 0;
  background: transparent;
  border-radius: 8px;
}
label.check-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  text-transform: none !important;
  font-weight: 500;
  color: var(--text-normal);
  cursor: pointer;
  width: auto;
  grid-template-columns: none !important;
}
/* restore block after injected close — keep original props below */
input[data-camp-restore], textarea, select {
  /* noop anchor */
}
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), textarea, select {
  width: 100%;
  background: var(--bg-input);
  border: none;
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  outline: none;
  color: var(--text);
}
textarea { resize: vertical; min-height: 80px; }
#app {
  height: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* Touch panes: body is overflow:hidden — these must scroll on phone/WebView */
.messages,
.chan-scroll,
.members,
.friends-page,
.friends-activity,
.vstage,
.auth,
.modal-backdrop.fullscreen .settings-content,
.modal-backdrop.fullscreen .modal-nav {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* ===== Auth (Discord-like comfortable — not postage stamp) ===== */
.auth {
  height: 100%;
  max-height: 100%;
  max-height: 100dvh;
  min-height: 0;
  display: grid;
  place-items: start center;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  padding: max(0.75rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(214,69,58,.22), transparent 55%),
    radial-gradient(700px 400px at 90% 10%, rgba(240,180,41,.1), transparent 50%),
    linear-gradient(160deg, var(--sf-scroll, #1a1b1e) 0%, var(--sf-abyss, #111214) 60%, var(--sf-app3, #0b0c0e) 100%);
}
@media (min-height: 900px) {
  .auth {
    place-items: center;
    align-content: center;
    padding: max(1.25rem, env(safe-area-inset-top, 0px)) 1.5rem max(1.5rem, env(safe-area-inset-bottom, 0px));
  }
}
.auth-shell {
  width: min(920px, 100%);
  max-height: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: stretch;
}
.auth-shell.has-qr {
  grid-template-columns: minmax(280px, 1fr) minmax(240px, 320px);
}
/* Register = same shell size as login (two columns + QR). Only pack extra fields. */
.auth-shell.auth-mode-register {
  width: min(920px, 100%);
}
.auth-shell.auth-mode-register.has-qr {
  grid-template-columns: minmax(280px, 1fr) minmax(240px, 320px);
}
.auth-shell.auth-mode-register .authform {
  gap: 0.55rem;
}
.auth-shell.auth-mode-register .auth-reg-extra {
  gap: 0.45rem;
}
.auth-shell.auth-mode-register .auth-err:empty {
  display: none;
}
@media (max-width: 820px) {
  .auth-shell.has-qr {
    grid-template-columns: 1fr;
  }
  .auth-qr-panel {
    order: -1;
  }
}
.auth-card {
  width: 100%;
  min-width: 0;
  background: var(--bg-mod);
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  padding: 1.75rem 1.75rem;
  box-shadow: var(--shadow-modal), 0 0 32px rgba(255, 106, 26, .08);
  text-align: center;
  font-size: 16px;
}
@media (max-height: 820px) {
  .auth-card {
    padding: 1.15rem 1.25rem;
  }
  .auth-logo {
    width: 72px !important;
    height: 72px !important;
    margin-bottom: 0.55rem !important;
  }
  .brand {
    font-size: 2.4rem !important;
    margin-bottom: 0.25rem !important;
  }
  .auth-sub {
    margin-bottom: 0.75rem !important;
    font-size: 0.9rem !important;
  }
  .auth-tabs {
    margin-bottom: 0.65rem !important;
  }
  .auth-tabs button {
    padding: 0.5rem 0.7rem !important;
    font-size: 14px !important;
  }
  .authform {
    gap: 0.55rem !important;
  }
  .auth-reg-extra {
    gap: 0.45rem !important;
  }
  .auth-oauth {
    gap: 6px !important;
    margin-bottom: 8px !important;
  }
  .auth-oauth-btn {
    padding: 10px 12px !important;
  }
  .auth-qr-box {
    width: 160px !important;
    height: 160px !important;
  }
  .auth-desktop {
    margin-top: 0.5rem !important;
  }
}
.auth-qr-panel {
  background: var(--bg-mod);
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-modal), 0 0 32px rgba(255, 106, 26, .06);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .65rem;
}
.auth-qr-panel h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}
.auth-qr-sub,
.auth-qr-note,
.auth-qr-status {
  margin: 0;
  color: var(--text-muted);
  font-size: .9rem;
  line-height: 1.35;
  max-width: 26ch;
}
.auth-qr-status {
  color: var(--accent-gold, #ffb300);
  font-weight: 600;
}
.auth-qr-box {
  position: relative;
  width: 220px;
  height: 220px;
  margin: .35rem 0;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  box-sizing: border-box;
}
.auth-qr-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.auth-qr-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(17, 18, 20, .72);
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  font-size: .95rem;
}
/* display:grid выше перебивает UA [hidden] — без этого оверлей «Обновляем код…» всегда поверх QR */
.auth-qr-overlay[hidden] {
  display: none !important;
}
.auth-apk-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: 0;
  margin-left: 0;
}
.auth-dl-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--accent-gold, #ffb300);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
}
.auth-dl-link:hover {
  color: var(--accent-brand-hover, #ff6a1a);
  text-decoration: underline;
}
.auth-dl-ico,
.auth-dl-svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: inherit;
}
.auth-dl-sep {
  color: rgba(255, 179, 0, 0.45);
  font-weight: 600;
  user-select: none;
}
.auth-qr-mobile-actions {
  margin: .85rem 0 0;
}
.auth-qr-scan-modal {
  width: min(420px, 94vw);
}
.auth-qr-scan-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin: .75rem 0;
}
.auth-qr-scan-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.auth-qr-manual {
  width: 100%;
  margin-bottom: .75rem;
}
.auth-logo {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 1.15rem;
  object-fit: contain;
  background: var(--sf-abyss, #111214);
  box-shadow: var(--ember-glow), 0 4px 22px rgba(0, 0, 0, .55);
}
.authform, .auth-tabs, .auth-hint, .auth-err { text-align: left; }
.brand {
  font-family: var(--display);
  font-size: 3.75rem;
  letter-spacing: .04em;
  line-height: .9;
  margin: 0 0 .5rem;
}
.brand span { color: var(--accent-brand); }
.brand.camp-solo {
  color: var(--accent-gold);
  text-shadow: 0 0 18px rgba(255, 106, 26, .4);
  letter-spacing: .18em;
}
.auth-sub { color: var(--text-muted); margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.35; }
.auth-tabs { display: flex; gap: .5rem; margin-bottom: 1.15rem; }
.auth-tabs button {
  flex: 1;
  background: var(--sf-deep, #1e1f22);
  color: var(--text-muted);
  padding: 0.7rem 0.9rem;
  font-size: 15px;
  font-weight: 600;
}
.auth-tabs button.on { background: var(--accent-brand); color: #fff; }
.auth-oauth {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
}
.auth-oauth[hidden] {
  display: none !important;
  margin: 0 !important;
}
.auth-oauth-btn {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}
.auth-oauth-btn[hidden] { display: none !important; }
.auth-oauth-yandex { background: #fff; color: #000; }
.auth-oauth-vk { background: #0077ff; color: #fff; }
/* Google: светлая кнопка с фирменной «G». Иконка слева, подпись по центру. */
.auth-oauth-google {
  background: #fff;
  color: #1f1f1f;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.auth-oauth-google:hover { background: #f4f5f7; }
.auth-oauth-google:active { background: #eaecef; }
.auth-oauth-google .auth-oauth-svg {
  flex: 0 0 auto;
  display: block;
}
.auth-or {
  text-align: center;
  margin: 4px 0 0;
  color: #949ba4;
  font-size: 12px;
  text-transform: lowercase;
}
.auth-oauth-email-label { margin: 0 0 4px; text-align: center; }
/* Стикер в сообщении — всегда крупный, как отдельный смайл (~160px),
 * и с текстом, и без: display:block выносит его на свою строку. */
.msg-camp-sticker {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: contain;
  object-position: left center;
  margin: 4px 0 2px;
  border-radius: 8px;
}
.msg-sticker-block { margin-top: 2px; }
.msg-sticker-missing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #949ba4;
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}
.appearance-card.locked { opacity: 0.45; }
.authform { display: grid; gap: 0.95rem; }
.auth-reg-extra { display: grid; gap: 0.75rem; }
/* display:grid перебивает UA [hidden] — иначе DOB/капча/галочки видны на «Вход» */
.auth-reg-extra[hidden] { display: none !important; }
.auth-dob-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #b5bac1;
  text-transform: uppercase;
}
.auth-dob-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 8px;
}
.auth-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.4;
  color: #dbdee1;
  cursor: pointer;
}
.auth-check input {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.auth-check a { color: #00a8fc; text-decoration: none; }
.auth-check a:hover { text-decoration: underline; }
.auth-check-opt { color: #b5bac1; }
.auth-captcha, .auth-smartcaptcha { min-height: 0; }
.authform input:not([type="checkbox"]):not([type="radio"]),
.authform select,
.authform textarea {
  padding: 0.85rem 1rem;
  font-size: 16px;
  min-height: 44px;
  border-radius: 9px;
}
.authform > button[type="submit"],
.authform > button:not(.ghost):not([data-tab]) {
  padding: 0.85rem 1rem;
  font-size: 16px;
  font-weight: 600;
  min-height: 44px;
}
.auth-err { color: #ff8d85; min-height: 1.25em; font-size: .95rem; }
.auth-hint { color: var(--text-muted); font-size: .85rem; margin: 0; }
.fatal-card .auth-hint { text-align: center; }
.auth-hint a, .auth-links a {
  color: var(--accent-gold, #ffb300);
  text-decoration: none;
}
.auth-hint a:hover, .auth-links a:hover { text-decoration: underline; }
.auth-links { margin: .45rem 0 0; font-size: .95rem; text-align: left; }
.auth-links a, a.auth-forgot {
  text-transform: none !important;
  font-variant: normal !important;
  font-weight: 600;
}
a.auth-forgot::first-letter { text-transform: uppercase !important; }
.auth-desktop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem .55rem;
  margin: 1.15rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: .9rem;
  text-align: center;
  line-height: 1.35;
}
.auth-desktop a {
  color: var(--accent-gold, #ffb300);
  text-decoration: none;
  font-weight: 600;
}
.auth-desktop a:hover { text-decoration: underline; }
.auth-desktop-note { color: var(--text-muted); font-weight: 500; }
.code-input {
  text-align: center;
  font-size: 30px;
  letter-spacing: .45em;
  font-variant-numeric: tabular-nums;
}
.authform .ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--text-muted);
  padding: 0.7rem 0.9rem;
  font-size: 15px;
  min-height: 40px;
}
.authform .ghost:disabled { opacity: .5; cursor: default; }

/* ===== Shell ===== */
.shell {
  height: 100%;
  max-height: 100%;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: var(--rail-w) var(--side-w) 1fr var(--member-w);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "rail side main members"
    "bottom bottom main members";
  background: var(--bg-app);
}
.shell.no-members,
.shell.home-mode.no-members {
  grid-template-columns: var(--rail-w) var(--side-w) 1fr;
  grid-template-areas:
    "rail side main"
    "bottom bottom main";
}
.shell.home-mode:not(.no-members) {
  grid-template-columns: var(--rail-w) var(--side-w) 1fr minmax(280px, 340px);
  grid-template-areas:
    "rail side main members"
    "bottom bottom main members";
}

.dm-profile-panel {
  padding: 0 !important;
  background: var(--sf-panel, #2b2d31);
}
.dm-prof {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.dm-prof-banner {
  height: 120px;
  flex-shrink: 0;
  background: var(--sf-btn, #4e5058);
}
.dm-prof-av {
  position: relative;
  width: 80px;
  height: 80px;
  margin: -40px 16px 0;
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--sf-panel, #2b2d31);
  z-index: 1;
}
.dm-prof-av .avatar,
.dm-prof-av .av {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50%;
}
.dm-prof-av .status-dot {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 16px;
  height: 16px;
  border: 3px solid var(--ln-panel, #2b2d31);
}
.dm-prof-body {
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dm-prof-nick {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dm-prof-tag {
  color: #b5bac1;
  font-size: 14px;
  margin-top: -4px;
}
.dm-prof-mutual { margin-top: 4px; }
.dm-prof-mutual .pop-mutual-btn {
  width: 100%;
  justify-content: flex-start;
}
.dm-prof-full {
  margin-top: 8px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--sf-btn, #4e5058);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.dm-prof-full:hover { background: #5c5e66; }
.dm-prof-body .sec-h {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #b5bac1;
}
.dm-prof-body .up-since {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dm-prof-body .up-about {
  color: #dbdee1;
  font-size: 14px;
}
.shell > .rail { grid-area: rail; }
.shell > .sidebar { grid-area: side; }
.shell > .main,
.shell > .search-results { grid-area: main; }
.shell > .members,
.shell > [data-members-panel] { grid-area: members; }
.shell > .shell-bottom {
  grid-area: bottom;
  align-self: stretch;
  z-index: 8;
}

/* Discord-like: voice + user strip spans under rail + channel sidebar */
.shell-bottom {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  flex-shrink: 0;
  /* Как у Лолки: без своей подложки. Полоса тянется под рейл+сайдбар, поэтому фон —
   * продолжение двух колонок (рейл | сайдбар), а карточки — только в колонке сайдбара. */
  background: linear-gradient(90deg, var(--bg-rail) 0 var(--rail-w), var(--bg-sidebar) var(--rail-w) 100%);
  border-top: 0;
  padding-left: var(--rail-w);
  position: relative;
  z-index: 8;
  /* Не даём сайдбару/рейлу закрасить панель войса */
  isolation: isolate;
}

.rail {
  background: var(--bg-rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: visible;
  /* Discord-like: wheel scroll, no visible scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rail::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.rail-btn {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-chat);
  color: var(--text-normal);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .85rem;
  transition: border-radius .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
  position: relative;
  padding: 0;
  overflow: visible;
  box-shadow: 0 0 0 0 transparent;
}
.rail-btn:hover, .rail-btn.on {
  border-radius: 22px;
  background: var(--accent-brand);
  color: #fff;
}
/* Discord: left pill + rim (white / ember) around icon */
.rail-btn:hover {
  box-shadow: 0 0 0 2px rgba(255, 243, 224, 0.95), 0 0 10px rgba(255, 106, 26, 0.28);
}
.rail-btn.on,
.rail-btn.on:hover {
  box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(255, 106, 26, 0.35);
}
.rail-btn.home.on { background: transparent; }
.rail-btn .pill {
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 0;
  opacity: 0;
  background: #fff;
  border-radius: 0 8px 8px 0;
  transition: height .15s ease, opacity .15s ease;
  pointer-events: none;
  z-index: 2;
}
.rail-btn:hover .pill { height: 20px; opacity: 1; }
.rail-btn.on .pill,
.rail-btn.on:hover .pill { height: 40px; opacity: 1; }
.rail-btn .rail-icon {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  object-position: center;
  display: block;
  pointer-events: none;
  background: transparent;
  box-sizing: border-box;
  padding: 4px;
  transform: none;
  max-width: 100%;
  max-height: 100%;
}
/* Гильдии: Discord-style — фото/эмблем заполняет круг (cover), без letterbox. */
.rail-btn:not(.gem):not(.home):not(.add) > .rail-icon {
  transform: none;
  object-fit: cover;
  padding: 0;
}
/* Home/ЛС: полный Photoroom-эмблем (кольцо+шипы+огонь), без зелёной подложки. */
.rail-btn.home > .rail-icon,
.rail-btn.home > .rail-icon.camp-logo {
  object-fit: contain;
  object-position: center;
  padding: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
/* Zeroed/missing logo в†’ never show broken-image icon; show CAMP letters */
.rail-btn.home > .rail-icon.logo-missing,
.rail-btn.home > .rail-icon.camp-logo.logo-missing {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #f2f3f5;
  background: #d6453a;
  object-fit: unset;
  content: none;
}
.rail-btn.home > .rail-icon.logo-missing::after {
  content: "CAMP";
}
.rail-btn:has(.rail-icon):not(.rail-folder-btn) {
  background: var(--sf-abyss, #111214);
  overflow: visible;
  padding: 0;
}
.rail-btn:has(.rail-icon):not(.rail-folder-btn):hover,
.rail-btn:has(.rail-icon):not(.rail-folder-btn).on {
  background: var(--sf-abyss, #111214);
}
.rail-btn.home:has(.rail-icon) {
  background: #0b0b0c;
  overflow: visible;
  border-radius: 50%;
}
.rail-btn.home:has(.rail-icon):hover,
.rail-btn.home:has(.rail-icon).on {
  background: #0b0b0c;
  border-radius: 22px;
}
.rail-btn:has(.rail-icon)::after {
  content: none;
}
/* Буква-аватар без иконки — оранжевый круг, без серой подложки */
.rail-btn:has(.rail-letters):not(.rail-folder-btn) {
  background: var(--accent-brand, #e64a19);
  color: #fff;
  overflow: visible;
}
.rail-btn:has(.rail-letters):not(.rail-folder-btn):hover,
.rail-btn:has(.rail-letters):not(.rail-folder-btn).on {
  background: var(--accent-brand, #e64a19);
}
.rail-sep {
  width: 32px;
  height: 2px;
  background: var(--line);
  border-radius: 3px;
  margin: .15rem 0;
}
.rail-folder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 56px;
  position: relative;
  flex-shrink: 0;
  overflow: visible;
}
.rail-folder.is-open {
  background: color-mix(in srgb, var(--folder-color, #23a559) 16%, var(--sf-abyss, #111214));
  border-radius: 24px;
  padding: 6px 0 12px;
  box-shadow: inset 0 0 0 2px var(--folder-color, #23a559);
  overflow: visible;
}
.rail-btn.rail-folder-btn {
  border-radius: 22px;
  background: var(--folder-color, var(--sf-panel, #2b2d31));
  color: #fff;
  overflow: hidden;
}
.rail-btn.rail-folder-btn:hover,
.rail-btn.rail-folder-btn.on {
  border-radius: 22px;
  background: var(--folder-color, var(--sf-panel, #2b2d31));
  color: #fff;
}
.rail-folder.is-open > .rail-folder-btn,
.rail-folder.is-open > .rail-btn.in-folder {
  width: 40px;
  height: 40px;
}
.rail-folder-svg {
  width: 26px;
  height: 26px;
  display: block;
  pointer-events: none;
}
.rail-folder.is-open .rail-folder-svg {
  width: 22px;
  height: 22px;
}
.rail-folder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  width: 40px;
  height: 40px;
  pointer-events: none;
}
.rail-folder-cell,
.rail-folder-cell .rail-icon,
.rail-folder-cell .rail-letters {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  object-fit: cover;
  font-size: 9px;
  padding: 0;
  display: grid;
  place-items: center;
  image-rendering: -webkit-optimize-contrast;
}
.rail-btn.rail-drop-onto,
.rail-sep.rail-drop-onto {
  box-shadow: 0 0 0 2px #23a559, 0 0 10px rgba(35, 165, 89, .35);
  border-radius: 20px;
}
.rail-btn.rail-dragging {
  opacity: 1 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 50% !important;
}
.rail-btn.rail-dragging .pill,
.rail-btn.rail-dragging .rail-badge,
.rail-btn.rail-dragging .rail-act-badge,
.rail-btn.rail-dragging .rail-live-dot,
.rail-btn.rail-dragging .rail-icon,
.rail-btn.rail-dragging .rail-letters,
.rail-btn.rail-dragging .rail-folder-grid,
.rail-btn.rail-dragging .rail-folder-svg {
  visibility: hidden !important;
}
.rail-btn.rail-dragging::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #121316;
  box-shadow: inset 0 3px 12px rgba(0,0,0,.72);
  border: 2px dashed rgba(255,255,255,.14);
  pointer-events: none;
  z-index: 3;
}
.rail-btn.rail-folder-btn.rail-dragging::after { border-radius: 22px; }
.rail-btn.rail-drop-onto {
  box-shadow: 0 0 0 2px #23a559, 0 0 10px rgba(35, 165, 89, .35);
}
.rail-btn.rail-drop-before::before,
.rail-btn.rail-drop-after::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 3px;
  border-radius: 6px;
  background: #23a559;
  z-index: 3;
}
.rail-btn.rail-drop-before::before { top: -6px; }
.rail-btn.rail-drop-after::after { bottom: -6px; }
.folder-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
}
.folder-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  padding: 0;
  background: var(--dot, var(--sf-btn, #4e5058));
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.folder-color-dot.on {
  border-color: #fff;
}
.folder-srv-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow: auto;
}
.folder-srv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.folder-srv-row .rail-icon,
.folder-srv-row .rail-letters {
  width: 22px;
  height: 22px;
  border-radius: 10px;
  font-size: 9px;
  object-fit: cover;
  display: grid;
  place-items: center;
}

.sidebar {
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  /* bottom bars live in .shell-bottom now */
}
.sidebar-head {
  height: var(--header-h);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: .45rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.sidebar-head:hover { background: var(--bg-hover); }
/* DM title: plain label, not a fake button */
.sidebar-head.sidebar-head-static {
  cursor: default;
  pointer-events: none;
}
.sidebar-head.sidebar-head-static:hover { background: transparent; }
.sidebar-head-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-head-bell {
  display: inline-flex;
  color: var(--text-muted);
  opacity: .7;
  flex-shrink: 0;
}
.sidebar-head-bell svg { width: 16px; height: 16px; display: block; }
.sidebar-head.muted .sidebar-head-bell { color: var(--accent-brand); opacity: 1; filter: drop-shadow(0 0 4px rgba(255,106,26,.45)); }
.sidebar-head .chev { color: var(--text-muted); font-size: .75rem; margin-left: auto; flex-shrink: 0; }
.modal-body a { color: var(--accent-brand); text-decoration: underline; }
.modal-body a:hover { color: var(--accent-brand-hover); }
.ctx-menu button.ctx-section,
.ctx-menu button:disabled.ctx-section {
  opacity: .7;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: default;
  pointer-events: none;
}
.sidebar-boost {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 1rem 8px;
  font-size: .78rem;
  font-weight: 600;
  color: #dbdee1;
  flex-shrink: 0;
  user-select: none;
  border-bottom: 1px solid rgba(0,0,0,.15);
  cursor: pointer;
  border-radius: 0;
}
.sidebar-boost.need-boosts {
  margin: 6px 10px 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border-bottom: 0;
  background: rgba(244, 127, 255, .08);
  color: #dbdee1;
  justify-content: space-between;
  gap: 8px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sidebar-boost-wave {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--boost-fill, 0%);
  max-width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  /* Fade the right edge like a sound decay — no hard clip */
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 calc(100% - 36px),
    rgba(0, 0, 0, 0.55) calc(100% - 16px),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 calc(100% - 36px),
    rgba(0, 0, 0, 0.55) calc(100% - 16px),
    transparent 100%
  );
  /* No width transition — remount looked like a fill "update"/restart */
  background: linear-gradient(
    180deg,
    rgba(244, 127, 255, 0.1) 0%,
    rgba(140, 50, 180, 0.28) 55%,
    rgba(90, 30, 130, 0.4) 100%
  );
}
.sidebar-boost-wave-svg {
  position: absolute;
  left: 0;
  bottom: -8%;
  width: 200%;
  height: 155%;
  display: block;
  will-change: transform;
  animation: sidebar-boost-wave-drift 8s linear infinite;
  animation-play-state: running;
}
/* Do NOT touch animation on hover/active/focus — that made the fill look like a restart */
.sidebar-boost-wave-svg.layer-2 {
  bottom: -4%;
  height: 170%;
  opacity: 0.9;
  animation-duration: 12s;
  animation-direction: reverse;
  animation-name: sidebar-boost-wave-drift-b;
}
.sidebar-boost-wave-svg.layer-3 {
  bottom: 0;
  height: 130%;
  opacity: 0.75;
  animation-duration: 5.5s;
  animation-name: sidebar-boost-wave-drift-c;
}
@keyframes sidebar-boost-wave-drift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes sidebar-boost-wave-drift-b {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes sidebar-boost-wave-drift-c {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-boost-wave-svg {
    animation: none !important;
  }
}
.sidebar-boost-need,
.sidebar-boost-right {
  position: relative;
  z-index: 1;
}
.sidebar-boost-need { font-weight: 600; font-size: .82rem; color: #dbdee1; }
.sidebar-boost-right {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #dbdee1;
  font-weight: 700;
  font-size: .78rem;
  white-space: nowrap;
}
.sidebar-boost.need-boosts:hover {
  background: rgba(244, 127, 255, .14);
  color: #fff;
}
.sidebar-boost:hover {
  color: #ffb3ff;
  background: rgba(244, 127, 255, .06);
}
.sidebar-boost-gem {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(230, 74, 25, .5));
}
.sidebar-boost-count { letter-spacing: .02em; }
.sidebar-boost-hint {
  margin-left: auto;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(244, 127, 255, .55);
}
.sidebar-boost:hover .sidebar-boost-hint { color: #ffb3ff; }
.boost-panel .boost-rubies {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #f47fff;
  font-weight: 600;
  margin: 4px 0 2px;
}
.chan-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* left 0 so unread pill can sit on the edge (Discord); rows pad themselves */
  padding: .5rem .35rem .75rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--sf-scroll, #1a1b1e) transparent;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.chan-scroll::-webkit-scrollbar { width: 8px; }
.chan-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.chan-scroll::-webkit-scrollbar-thumb {
  background: var(--sf-scroll, #1a1b1e);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 40px;
}
.chan-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--sf-abyss, #111214);
  background-clip: padding-box;
}
.cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .25rem;
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .55rem .2rem .15rem 8px;
  cursor: pointer;
  user-select: none;
}
.cat:hover { color: var(--text); }
.cat-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .35rem;
  background: transparent;
  color: inherit;
  padding: .15rem .2rem;
  border: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.cat-name { flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-chev { flex-shrink: 0; opacity: .75; font-size: .7rem; }
.cat-line {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255,255,255,.08);
  min-width: 8px;
}
.cat.collapsed .cat-chev { opacity: 1; }
.cat-add {
  background: transparent;
  color: var(--text-muted);
  padding: 0 .2rem;
  display: none;
  line-height: 0;
  flex-shrink: 0;
}
.cat:hover .cat-add { display: block; }
.cat-add:hover { color: var(--text); }
.voice-cat-peek {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .5rem .35rem .7rem;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
}
.voice-cat-peek:hover { background: var(--bg-hover); color: var(--text); }
.voice-cat-peek .ico { opacity: .7; font-size: .85rem; }
.voice-cat-peek-avs { display: inline-flex; align-items: center; }
.voice-cat-peek-av { margin-left: -6px; }
.voice-cat-peek-av:first-child { margin-left: 0; }
.voice-cat-peek-av .avatar { width: 20px; height: 20px; border: 2px solid var(--bg-sidebar, var(--ln-panel, #2b2d31)); }
.vc-elapsed {
  margin-left: auto;
  color: #3ba55d;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 3.6em;
  text-align: right;
}
.vc-limit {
  margin-left: auto;
  color: var(--text-muted);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.06);
  padding: 1px 6px;
  border-radius: 999px;
  flex-shrink: 0;
}
.chan-row:hover .vc-elapsed,
.chan-row:hover .vc-limit {
  display: none;
}
.chan .chan-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.chan .chan-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  overflow: hidden;
}
.chan .chan-vc-status {
  display: block;
  max-width: 100%;
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted, #949ba4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}
.chan .chan-vc-status.empty {
  color: #b5bac1;
  font-style: italic;
}
.chan .chan-vc-status[data-vc-status] {
  cursor: pointer;
}
.chan .chan-vc-status[data-vc-status]:hover {
  text-decoration: underline;
  color: #dbdee1;
}
.vc-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 8px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b5bac1;
  font-size: 12px;
  cursor: pointer;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vc-status-btn.empty { font-style: italic; }
.vc-status-btn:hover { color: #fff; text-decoration: underline; }
.view-as-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: #e64a19;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  z-index: 4;
}
.view-as-banner .ghost {
  color: #fff;
  border-color: rgba(255,255,255,.45);
  flex-shrink: 0;
  font-weight: 600;
}
.mentions-float {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 64px;
  z-index: 8;
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  background: #e64a19;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.notify-toast.mention {
  border-left: 3px solid #e64a19;
}
.notify-toast.mention .notify-toast-top span {
  color: #e64a19;
  font-weight: 700;
}
.msg-flash {
  animation: msgFlash 1.4s ease;
}
@keyframes msgFlash {
  0%, 100% { background: transparent; }
  30% { background: rgba(230,74,25,.22); }
}
.roles-list-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.roles-drag-hint {
  color: var(--muted, #949ba4);
  font-size: 12px;
  font-weight: 500;
}
.stream-zoom-dock {
  position: absolute;
  right: 14px;
  bottom: 18px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.stream-zoom-dock > * { pointer-events: auto; }
.stream-zoom-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.stream-nav {
  position: relative;
  width: 176px;
  height: 99px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sf-app3, #0b0c0e);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
  cursor: crosshair;
  flex-shrink: 0;
}
.stream-nav[hidden] { display: none !important; }
.stream-nav-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  pointer-events: none;
}
.stream-nav-box {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 6px;
  background: rgba(88, 101, 242, 0.18);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  cursor: grab;
  pointer-events: none;
}
.stream-nav:active .stream-nav-box { cursor: grabbing; }
.stream-zoom-loupe {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  border: 0;
  background: rgba(15, 15, 18, 0.82);
  color: #c9cdfb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  flex-shrink: 0;
}
.stream-zoom-loupe svg {
  display: block;
  margin: 0;
}
.stream-zoom-loupe:hover { background: rgba(30, 31, 36, 0.95); }
.stream-zoom-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px 0 6px;
  border-radius: 16px;
  background: rgba(15, 15, 18, 0.88);
  box-shadow: 0 4px 18px rgba(0,0,0,.5);
  color: #fff;
}
.stream-zoom-bar[hidden] { display: none !important; }
.stream-zoom-ico {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #c9cdfb;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  border-radius: 10px;
}
.stream-zoom-ico:hover { background: rgba(255,255,255,.06); }
.stream-zoom-range {
  -webkit-appearance: none;
  appearance: none;
  width: 132px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  outline: none;
  cursor: pointer;
}
.stream-zoom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #b5b9f3;
  border: 0;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
  cursor: grab;
}
.stream-zoom-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #b5b9f3;
  border: 0;
  cursor: grab;
}
.stream-zoom-pct {
  min-width: 42px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: #f2f3f5;
  font-variant-numeric: tabular-nums;
}
.vtile.stream-zoomed { cursor: grab; }
.vtile.stream-zoomed:active { cursor: grabbing; }
.vtile video.stream-zoomed {
  pointer-events: none;
  will-change: transform;
}
.vtile.stream-fs .stream-zoom-dock {
  right: 22px;
  bottom: 28px;
  z-index: 9700;
}
.vtile.stream-fs .stream-nav {
  width: 220px;
  height: 124px;
}
.vtile.stream-fs .stream-zoom-loupe,
.vtile.stream-fs .stream-zoom-bar {
  height: 44px;
}
.vtile.stream-fs .stream-zoom-loupe { width: 44px; }
.vtile.stream-fs .stream-zoom-range { width: 160px; }
.shop-lolka-grid,
.discovery-lolka-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 12px 16px 24px;
}
.shop-lolka-card,
.discovery-lolka-card {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
.shop-lolka-preview {
  height: 140px;
  display: grid;
  place-items: center;
  font-size: 42px;
  background: linear-gradient(160deg, var(--sf-scroll, #1a1b1e), var(--sf-panel, #2b2d31));
}
.shop-lolka-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 12px 0;
}
.shop-lolka-price { font-weight: 700; margin-top: 4px; }
.shop-lolka-btn,
.discovery-lolka-btn {
  margin: 12px;
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  background: #3ba55d;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.shop-lolka-btn:hover,
.discovery-lolka-btn:hover { filter: brightness(1.08); }
.discovery-lolka-banner { height: 108px; background: var(--sf-panel, #2b2d31); position: relative; overflow: hidden; }
/* Живая FURY-сцена с лисом в баннере карточки Путешествий */
.discovery-lolka-banner canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Имя + настоящая пилюля тега сообщества (как у участников) */
.discovery-lolka-namerow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.discovery-lolka-namerow b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; }
.discovery-lolka-namerow .utag.clan-tag { margin-left: 0; flex-shrink: 0; }
/* Особенности сообщества — те же чипы .srv-tag, что в превью настроек */
.discovery-lolka-tags { display: flex; flex-wrap: wrap; gap: 4px; }
/* Кнопка прижата к низу — карточки в ряду одной высоты */
.discovery-lolka-card .discovery-lolka-body { flex: 1; }
.discovery-lolka-card .discovery-lolka-btn { margin: 14px 0; margin-top: auto; padding-top: 11px; padding-bottom: 11px; }
.discovery-lolka-card .discovery-lolka-body > .hint { line-height: 1.4; }
.discovery-lolka-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: -32px 14px 0;
  background: #111;
  border: 4px solid var(--ln-deep, #1e1f22);
  overflow: hidden;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.35rem;
  /* Кружок ПОВЕРХ баннера (баннер position:relative красился сверху и
   * прятал аватар) — как в Discord: наполовину на нижнем крае баннера. */
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}
.discovery-lolka-icon img { width: 100%; height: 100%; object-fit: cover; }
.discovery-lolka-body { padding: 10px 14px 0; display: flex; flex-direction: column; gap: 8px; }
.discovery-lolka-stats { font-size: 12px; color: #b5bac1; display: flex; align-items: center; gap: 6px; }
.discovery-lolka-stats .on-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #3ba55d; display: inline-block;
}
.ui-sound-row.lolka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ui-sound-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.ui-sound-links .linkish {
  background: none;
  border: 0;
  padding: 0;
  color: #00a8fc;
  cursor: pointer;
  font-size: 13px;
}
.ui-sound-links .linkish.danger-text { color: #f23f43; }
.modal-backdrop.fullscreen .modal-nav {
  padding: 16px 8px 16px 28px;
  align-items: stretch;
}
.modal-backdrop.fullscreen .modal-nav button {
  margin-bottom: 10px;
  padding: 12px 14px;
  min-height: 42px;
}
.modal-backdrop.fullscreen .switch-row,
.modal-backdrop.fullscreen .settings-sec > label.switch-row {
  padding: 14px 0;
  margin: 2px 0;
}
.rail-compass { display: block; }
.dev-vol-pop {
  position: fixed;
  z-index: 12000;
  min-width: 240px;
  padding: 8px 0;
}
.dev-vol-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 14px 2px;
  font-size: 12px;
  color: var(--muted, #949ba4);
}
.dev-vol-pop .vol-slider {
  /* Ползунок вылезал за правый край меню: ширина считалась от content-box,
   * а рамка/бегунок добавлялись сверху. Фиксируем border-box и auto-ширину. */
  display: block;
  box-sizing: border-box;
  width: auto;
  margin: 4px 14px 10px;
}
.mentions-float:hover { filter: brightness(1.06); }
.sidebar { position: relative; }
.reaction { position: relative; }
.reaction .reaction-x {
  display: none;
  margin-left: 4px;
  opacity: .85;
  font-size: 11px;
}
.reaction:hover .reaction-x { display: inline; }
.reaction-clear { opacity: .7; }
.rail-btn.muted-guild { opacity: .72; }
.rail-act-badge {
  position: absolute;
  right: -2px;
  top: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sf-abyss, #111214);
  border: 2px solid var(--bg-rail, var(--ln-deep, #1e1f22));
  display: grid;
  place-items: center;
  color: #fff;
  z-index: 3;
  box-shadow: 0 2px 0 0 #ed4245;
}
.rail-act-badge svg { width: 11px; height: 11px; display: block; }
.rail-act-badge.stream { color: #fff; }
.rail-act-badge.voice { color: #fff; }
.rail-live-dot { display: none; }
/* Метка «в сообществе идёт событие» — слева на иконке, в стиле rail-act-badge */
.rail-ev-badge {
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  padding: 0 5px;
  border-radius: 14px;
  background: var(--sf-abyss, #111214);
  border: 2px solid var(--bg-rail, var(--ln-deep, #1e1f22));
  color: var(--accent, #e9642e);
  line-height: 1;
  z-index: 4;
  cursor: pointer;
  pointer-events: auto;
  max-width: 40px;
  overflow: hidden;
}
.rail-ev-badge:hover { color: #fff; background: var(--accent, #e9642e); }
.rail-ev-ico { display: grid; place-items: center; }
.rail-ev-badge svg { width: 11px; height: 11px; display: block; }
.rail-ev-n {
  font-size: 10px;
  font-weight: 700;
  color: var(--text, #dbdee1);
  letter-spacing: 0;
}
.rail-ev-badge:hover .rail-ev-n { color: #fff; }
.rail-btn.rail-dragging .rail-ev-badge { display: none; }
.rail-guild-tip {
  position: fixed;
  z-index: 9000;
  min-width: 220px;
  max-width: 280px;
  background: var(--sf-abyss, #111214);
  border: 1px solid var(--ln-edge2, #3f4147);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  color: #dbdee1;
  pointer-events: auto;
}
.rail-guild-tip.right::before,
.rail-guild-tip.below::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--sf-abyss, #111214);
  border-left: 1px solid var(--ln-edge2, #3f4147);
  border-bottom: 1px solid var(--ln-edge2, #3f4147);
}
.rail-guild-tip.right::before {
  left: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.rail-guild-tip.below::before {
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(135deg);
}
.rail-tip-head { font-size: 14px; margin-bottom: 4px; }
.rail-tip-mute { font-size: 12px; color: #f0b232; margin-bottom: 8px; }
.rail-tip-mute.off { color: var(--text-muted, #949ba4); }
.rail-tip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.rail-tip-row.empty { opacity: .7; }
.rail-tip-ico { width: 18px; display: inline-flex; color: var(--text-muted); flex-shrink: 0; }
.rail-tip-ico svg { width: 16px; height: 16px; }
.rail-tip-avs { display: inline-flex; align-items: center; flex: 1; min-width: 0; }
.rail-tip-av { margin-left: -6px; }
.rail-tip-av:first-child { margin-left: 0; }
.rail-tip-av .avatar { width: 22px; height: 22px; border: 2px solid var(--ln-abyss, #111214); }
.rail-tip-more {
  margin-left: 4px;
  background: var(--sf-panel, #2b2d31);
  color: #dbdee1;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
}
.rail-tip-time {
  margin-left: auto;
  color: #3ba55d;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.chan-scroll.chan-dnd-active .chan-row,
.chan-scroll.chan-dnd-active .cat {
  cursor: grabbing;
}
.chan-row.chan-draggable,
.cat.chan-draggable {
  cursor: grab;
}
.chan-row.chan-dragging,
.cat.chan-dragging {
  opacity: 0.45;
}
.chan-drop-before {
  box-shadow: inset 0 2px 0 0 var(--accent-brand);
}
.chan-drop-after {
  box-shadow: inset 0 -2px 0 0 var(--accent-brand);
}
.cat.chan-drop-into {
  background: rgba(230, 74, 25, 0.18) !important;
  border-radius: 8px;
}
.chan-row {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 0;
}
.chan-row .chan {
  flex: 1 1 auto;
  min-width: 0;
  width: auto; /* width:100% ломал ellipsis и давал наезд на виджеты */
  max-width: 100%;
}
.chan-gear {
  position: absolute;
  right: .3rem;
  background: transparent;
  color: var(--text-muted);
  padding: .15rem;
  display: none;
  line-height: 0;
  z-index: 3;
}
.chan-gear svg { width: 14px; height: 14px; }
.chan-row:hover .chan-gear { display: block; }
.chan-gear:hover { color: var(--text); }
/* In-flow (not absolute): name ellipsis shrinks — no overlap on «ОНЛАЙН: 0/24» */
.chan-vc-actions {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  flex: 0 0 auto;
  position: static;
  margin-right: .2rem;
  z-index: 2;
  background: transparent;
  pointer-events: none;
}
.chan-vc-actions .chan-vc-btn { pointer-events: auto; }
.chan-row:hover .chan-vc-actions,
.chan-row:focus-within .chan-vc-actions { display: inline-flex; }
/* Text gear still absolute — reserve space only then */
.chan-row:has(> .chan-gear):hover .chan,
.chan-row:has(> .chan-gear):focus-within .chan {
  padding-right: 2.1rem;
}
.chan-vc-btn {
  background: transparent;
  color: var(--text-muted);
  padding: .2rem;
  line-height: 0;
  border-radius: 8px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chan-vc-btn svg { width: 14px; height: 14px; }
.chan-vc-btn:hover { color: var(--text); background: rgba(255,255,255,.06); }
.voice-user .vu-name {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.vu-nick-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  flex-wrap: nowrap;
  overflow: hidden;
}
.vu-nick-row .vu-live-badge {
  margin-left: 2px;
}
.vu-nick-row .flag-ic.live {
  margin-left: 0;
  flex-shrink: 0;
}
.vu-live-badge {
  display: inline-flex;
  align-items: center;
  background: #ed4245;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 6px;
  line-height: 1.1;
  flex-shrink: 0;
}
.vu-live-badge.clickable {
  cursor: pointer;
}
.vu-live-badge.clickable:hover {
  filter: brightness(1.08);
}
/* Own LIVE seat: badge is enough — no yellow frame around the row */
.voice-user.is-live,
.voice-user.is-self-live {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent;
}
.voice-user.is-self-live:hover {
  background: var(--bg-hover);
}
.chan {
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text-muted);
  padding: .42rem .6rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: .94rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.chan .ico { opacity: .7; width: 1.1em; text-align: center; flex-shrink: 0; }
.chan .chan-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chan .vc-limit,
.chan .vc-elapsed,
.chan .chan-mute-ico,
.chan .mention-badge {
  flex-shrink: 0;
}
.chan:hover { background: var(--bg-hover); color: var(--text); }
.chan.on { background: var(--bg-active); color: #fff; }
.chan.unread {
  color: #f2f3f5;
  font-weight: 600;
}
.chan.unread .ico { opacity: 1; color: #f2f3f5; }
.chan.unread .chan-name { color: #f2f3f5; font-weight: 600; }
.chan-row {
  position: relative;
  padding-left: 8px;
}
.chan-unread-pill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: #f2f3f5;
  border-radius: 0 8px 8px 0;
  pointer-events: none;
  z-index: 2;
}
.mention-badge {
  margin-left: auto;
  flex-shrink: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 12px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.rail-btn .rail-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 12px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 4px var(--bg-rail);
  z-index: 2;
}
.chan { position: relative; }
.voice-nest {
  margin: .1rem 0 .35rem 1.55rem;
  display: grid;
  gap: .2rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.voice-user.voice-user-draggable { cursor: grab; }
.voice-user.voice-dragging { opacity: .55; cursor: grabbing; }
.voice-chan-wrap.voice-drop-target {
  outline: 2px solid var(--accent-brand, #d6453a);
  outline-offset: 1px;
  border-radius: 10px;
  background: rgba(214, 69, 58, 0.08);
}
body.camp-voice-dnd .chan-row { pointer-events: none; }
body.camp-voice-dnd .voice-chan-wrap { pointer-events: auto; }
.voice-user {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .32rem .45rem;
  border-radius: 8px;
  font-size: .85rem;
  color: var(--text);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.voice-user:hover { background: var(--bg-hover); }
.voice-user.speaking { color: var(--text); }
/* Discord-like: green ring only while speaking (not while merely connected) */
.voice-user .avatar {
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow .12s ease-out;
}
.voice-user.speaking .avatar {
  box-shadow:
    0 0 0 2.5px var(--green),
    0 0 10px rgba(35, 165, 90, .7);
}
.userpanel-av.speaking .avatar {
  box-shadow:
    0 0 0 2.5px var(--green),
    0 0 12px rgba(35, 165, 90, .75);
}
/* Game icon sits on the nick line (not centered on nick+activity). */
.voice-user .flags {
  margin-left: auto;
  margin-top: 1px;
  display: flex;
  gap: .3rem;
  align-items: flex-start;
  flex-shrink: 0;
}
.voice-user .flags .vu-game-ico { margin-left: 2px; }
.voice-user.ghost {
  opacity: 0.55;
  filter: grayscale(0.25);
}
.voice-user .vu-ghost-tag {
  font-size: 10px;
  font-weight: 500;
  color: #f0b232;
  white-space: nowrap;
}
.flag-ic { display: inline-flex; line-height: 0; color: var(--text-muted); }
.flag-ic.danger { color: var(--red); }
.flag-ic.ok { color: var(--green); }
.flag-ic.live { color: var(--accent-gold); }
.flag-ic.live.clickable {
  cursor: pointer;
  border-radius: 8px;
  padding: 1px;
}
.flag-ic.live.clickable:hover {
  background: rgba(240, 178, 50, 0.16);
  color: #ffd56a;
}

/* Web-only: «скачайте приложение» popup above userpanel (never in Desktop/Android) */
.web-dl-pop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 8px 8px 6px;
  padding: 20px 16px 14px;
  border-radius: 22px;
  flex-shrink: 0;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(240, 140, 50, 0.22);
  background:
    radial-gradient(ellipse 90% 70% at 50% 18%, rgba(255, 140, 40, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 15% 90%, rgba(180, 60, 20, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse 60% 45% at 90% 80%, rgba(255, 100, 30, 0.12) 0%, transparent 45%),
    linear-gradient(165deg, #2a1c14 0%, #1a1410 42%, #121214 100%);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 190, 120, 0.08);
}
.web-dl-pop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 28%, rgba(255, 180, 80, 0.55), transparent),
    radial-gradient(1px 1px at 28% 62%, rgba(255, 140, 50, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 48% 22%, rgba(255, 200, 100, 0.45), transparent),
    radial-gradient(1px 1px at 68% 48%, rgba(255, 120, 40, 0.35), transparent),
    radial-gradient(1.5px 1.5px at 82% 30%, rgba(255, 170, 70, 0.4), transparent),
    radial-gradient(1px 1px at 88% 70%, rgba(255, 100, 30, 0.3), transparent),
    radial-gradient(1px 1px at 38% 78%, rgba(255, 160, 60, 0.35), transparent);
}
.web-dl-pop > * { position: relative; z-index: 1; }
.web-dl-pop-x {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #c9b8a8;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 10px;
  padding: 0;
}
.web-dl-pop-x:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.web-dl-pop-logo {
  width: 112px;
  height: 112px;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  margin-top: 2px;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(255, 120, 40, 0.25));
}
.web-dl-pop-title {
  margin: 0;
  padding: 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: #f5ebe0;
  line-height: 1.3;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.web-dl-pop-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 160, 70, 0.28);
  background: linear-gradient(180deg, #3a2a20 0%, #2a1f18 100%);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  box-shadow: inset 0 1px 0 rgba(255, 200, 120, 0.1);
}
.web-dl-pop-btn:hover {
  background: linear-gradient(180deg, #4a3426 0%, #32251c 100%);
  border-color: rgba(255, 170, 80, 0.45);
  color: #fff;
  box-shadow: 0 0 16px rgba(255, 120, 40, 0.18), inset 0 1px 0 rgba(255, 200, 120, 0.14);
}
/* legacy class kept for CSS hide rules / mobile */
.web-dl-app { display: none !important; }
body.electron .web-dl-pop,
body.camp-android .web-dl-pop,
html.camp-android .web-dl-pop,
body.mobile-ui .web-dl-pop { display: none !important; }
@media (max-width: 900px) {
  .web-dl-pop { display: none !important; }
}

.userpanel {
  height: var(--user-h);
  min-height: var(--user-h);
  background: transparent /* Алекс: серую заливку не просил — только стиль как у Лолки: скругление, без подложки */; /* как у Лолки: карточка светлее сайдбара */
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: 0 .55rem 0 .6rem;
  flex-shrink: 0;
  /* Вставная карточка, а не полоса во всю ширину: отступ от краёв + скругление (как у Лолки) */
  width: auto;
  margin: 4px 8px 8px;
  border-radius: 12px;
  border: 0;
  box-sizing: border-box;
}
.userpanel .up-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
}
.userpanel .up-ctrl {
  display: inline-flex;
  align-items: stretch;
  border-radius: 8px;
  background: transparent;
}
.userpanel .up-ctrl:hover {
  background: var(--bg-hover, rgba(255,255,255,.06));
}
.userpanel .up-ctrl .icon-btn {
  border-radius: 8px 0 0 8px;
}
.userpanel .up-ctrl .up-chev {
  width: 18px;
  min-width: 18px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  pointer-events: auto;
}
.userpanel .up-ctrl .up-chev:hover { color: var(--text); }
.userpanel .up-ctrl .up-chev svg { width: 10px; height: 10px; display: block; }
.userpanel .up-ctrl .icon-btn.on + .up-chev,
.userpanel .up-ctrl:has(.icon-btn.on) { color: var(--red); }
.userpanel .up-ctrl.is-pop {
  animation: up-ctrl-pop .22s var(--camp-ease, cubic-bezier(.22, 1, .36, 1));
}
.userpanel .up-ctrl.is-pop .icon-btn svg {
  animation: up-ctrl-icon-pop .22s var(--camp-ease, cubic-bezier(.22, 1, .36, 1));
}
@keyframes up-ctrl-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes up-ctrl-icon-pop {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.08); opacity: .9; }
  100% { transform: scale(1); opacity: 1; }
}
.userpanel .up-settings {
  margin-left: 2px;
}
.userpanel-av {
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 50%;
}
.userpanel-av:hover { filter: brightness(1.08); }
.userpanel-av .status-dot {
  cursor: pointer;
  z-index: 2;
  --dot-ring: var(--bg-user, #101012);
}
.userpanel .who {
  flex: 1;
  min-width: 0;
  line-height: 1.15;
  cursor: pointer;
  border-radius: 8px;
  padding: 2px 2px 2px 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.userpanel .who:hover { background: rgba(255,255,255,.04); }
/* Name row: nick + badges + clan tag stay inline next to avatar (not stacked).
   Do NOT use `.who span { display:block }` — that made .uname/.priv-badge block
   and pushed the nick up into the channel list. */
.userpanel .who b {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  font-size: .85rem;
  font-weight: 600;
  overflow: hidden;
}
.userpanel .who b .uname {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.userpanel .who b .uname-fx {
  min-width: 0;
  overflow: hidden;
}
.userpanel .who b .uname.holo,
.userpanel .who b .uname.grad {
  overflow: visible;
  text-overflow: clip;
}
.userpanel .who b .priv-badge,
.userpanel .who b .gem-badge,
.userpanel .who b .boost-badge-wrap {
  flex-shrink: 0;
}
.userpanel .who .user-tag-mini {
  color: var(--text-muted);
  font-size: .7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 100%;
}
.userpanel .who .utag,
.userpanel .who .clan-tag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: 1px;
}
.utag.clan-tag {
  /* Discord-like: neutral grey pill; chosen colour tints only the icon */
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.07);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #dbdee1;
  text-transform: uppercase;
}
.utag.clan-tag.holo {
  border-color: transparent;
  background: linear-gradient(90deg,#4aa3ff,#7af0ff,#eb459e,#ffb86c,#4aa3ff);
  background-size: 280% 100%;
  color: #111;
  animation: boost-nick-flow 2.8s linear infinite;
}
.userpanel .icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  display: grid;
  place-items: center;
  transition: color var(--camp-dur-hover, .15s) ease, background var(--camp-dur-hover, .15s) ease;
}
.userpanel .icon-btn svg { width: 18px; height: 18px; }
.userpanel .icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.userpanel .icon-btn.on { color: var(--red); }
.userpanel .icon-btn.on:hover { color: var(--red); }
.src-quality {
  display: grid;
  gap: .35rem;
  margin-bottom: .75rem;
  font-size: .88rem;
  color: var(--text);
}
.src-quality span { font-weight: 600; }
.src-quality select {
  width: 100%;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--bg-hover);
  border-radius: 10px;
  padding: .45rem .6rem;
  font: inherit;
}
.src-quality-hint { margin: -.35rem 0 .85rem; }
.src-share-audio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 .35rem;
  font-size: 13px;
  color: var(--text, #dbdee1);
  cursor: pointer;
  user-select: none;
}
.src-share-audio input { width: 16px; height: 16px; accent-color: var(--accent, #e64a19); }
.src-share-audio-hint { margin: 0 0 .85rem; }
.web-stream-panel {
  margin-top: .25rem;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.web-stream-panel .hint { margin: 0 0 .45rem; }
.web-stream-panel .hint:last-of-type { margin-bottom: 0; }
.web-stream-panel .invite-actions button,
.web-stream-panel .invite-actions button.primary {
  min-width: 160px;
  padding: 10px 16px;
  font-weight: 600;
  background: var(--accent-brand, var(--accent-brand));
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
.web-stream-panel .invite-actions button:hover {
  filter: brightness(1.08);
}
html.theme-light .web-stream-panel,
body.theme-light .web-stream-panel {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
.src-grid-wrap {
  max-height: min(52vh, 420px);
  overflow: auto;
  margin: 0 0 .75rem;
  padding-right: 2px;
}
.src-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .6rem;
}
.src-grid .sec {
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.src-item {
  background: var(--bg-input);
  border-radius: 12px;
  padding: .4rem;
  display: grid;
  gap: .35rem;
  text-align: left;
  border: 2px solid transparent;
}
.src-item:hover { border-color: var(--accent-brand); background: var(--bg-hover); }
.src-item img.src-thumb,
.src-item > img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 8px;
  background: var(--sf-scroll, #1a1b1e);
}
/* Neutral placeholder — never show Windows red/flat failed BitBlt thumbs */
.src-ph {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  background: linear-gradient(160deg, #2a2b30 0%, var(--sf-scroll, #1a1b1e) 55%, #141516 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.src-ph-ico {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 12px;
  background: transparent;
}
.src-ph-letter {
  font-size: 1.45rem;
  font-weight: 700;
  color: #9a9ca3;
  letter-spacing: .02em;
  user-select: none;
}
.src-item.no-thumb .src-ph { border: 1px solid rgba(255, 255, 255, 0.04); }
.src-item span {
  font-size: .78rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.userpanel .icon-btn.live { color: var(--green); }

/* Desktop: update ready — compact bar above voice-conn / userpanel (sidebar width) */
.upd-ready-bar {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .65rem;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-top: 1px solid rgba(230, 74, 25, .4);
  background: rgba(230, 74, 25, .14);
  color: #ff9a3c;
  font: 600 12px/1.25 "Segoe UI", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  -webkit-app-region: no-drag;
}
.upd-ready-bar:hover {
  background: rgba(230, 74, 25, .26);
  color: #ffb36a;
}
.upd-ready-bar:active {
  background: rgba(230, 74, 25, .34);
}
.upd-ready-bar--busy {
  cursor: default;
  pointer-events: none;
  color: #c4b8a8;
  border-top-color: rgba(196, 184, 168, .35);
  background: rgba(255, 243, 224, .06);
}
.upd-ready-bar--busy .upd-ready-ico {
  color: #9a8f82;
}
.upd-ready-bar--fade {
  animation: upd-ready-fade 3.5s ease forwards;
}
@keyframes upd-ready-fade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}
.upd-ready-bar .upd-ready-ico {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-brand);
}
.upd-ready-bar .upd-ready-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-conn-stack {
  display: flex;
  flex-direction: column;
  /* Блок «Голосовая связь» + ряд кнопок — одна вставная карточка со скруглением */
  width: auto;
  margin: 0 8px 4px;
  border-radius: 12px;
  border: 0;
  overflow: hidden;
  flex-shrink: 0;
  /* Как у Лолки: карточка светлее сайдбара, без рамки; color-mix — чтобы и светлая тема жила */
  background: transparent /* Алекс: серую заливку не просил — только стиль как у Лолки: скругление, без подложки */;
}
.voice-conn {
  background: transparent;
  border-bottom: 0;
  padding: .6rem .8rem .35rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  box-sizing: border-box;
}
.vc-media-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 2px;
  padding: 4px 8px 8px;
  gap: 6px;
  border-bottom: 0;
  background: transparent;
}
.vc-media-btn {
  flex: 1;
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.06); /* залитая плитка, как у Лолки */
  color: var(--text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.vc-media-btn svg { width: 18px; height: 18px; }
.vc-media-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }
.vc-media-btn.on { color: var(--text); background: rgba(255,255,255,.14); } /* включённая плитка заметно светлее базовой .06 */
.vc-media-btn.on.live { color: var(--green); }
.vc-media-btn.stub,
.vc-media-btn:disabled {
  opacity: .35;
  cursor: default;
}
.voice-conn .vc-info { flex: 1; min-width: 0; }
.voice-conn .vc-status {
  color: var(--green);
  font-size: .82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.voice-conn.vc-reconnecting .vc-status {
  color: var(--yellow, #faa61a);
}
.voice-conn.vc-reconnecting .vc-signal {
  color: var(--yellow, #faa61a);
}
.voice-conn.vc-disconnected .vc-status {
  color: var(--red, #ed4245);
}
.voice-conn.vc-disconnected .vc-signal {
  color: var(--red, #ed4245);
}
.voice-conn .vc-ping {
  color: var(--text-muted);
  font-weight: 500;
  font-size: .72rem;
  margin-left: auto;
}
.vc-signal { display: inline-flex; line-height: 0; color: var(--green); cursor: help; }
.vc-signal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.vc-signal.good { color: var(--green); }
.vc-signal.mid { color: var(--yellow); }
.vc-signal.bad { color: var(--red); }
/* Столбики сигнала гаснут по качеству пинга (mid: верхний, bad: два верхних) */
.vc-signal svg rect { transition: opacity 0.25s; }
.vc-signal.mid svg rect:nth-child(3) { opacity: 0.28; }
.vc-signal.bad svg rect:nth-child(2),
.vc-signal.bad svg rect:nth-child(3) { opacity: 0.28; }
.vc-signal-tip {
  position: fixed;
  z-index: 9000;
  min-width: 140px;
  max-width: 240px;
  background: var(--sf-abyss, #111214);
  border: 1px solid var(--ln-edge2, #3f4147);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  color: #dbdee1;
  font-size: 12px;
  line-height: 1.45;
  pointer-events: auto;
}
.vc-signal-tip-row {
  display: block;
  white-space: nowrap;
}
.vc-signal-tip-row + .vc-signal-tip-row {
  margin-top: 2px;
}
.vc-signal-tip.below::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--sf-abyss, #111214);
  border-left: 1px solid var(--ln-edge2, #3f4147);
  border-top: 1px solid var(--ln-edge2, #3f4147);
  transform: translateX(-50%) rotate(45deg);
}
.vc-signal-tip:not(.below)::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--sf-abyss, #111214);
  border-right: 1px solid var(--ln-edge2, #3f4147);
  border-bottom: 1px solid var(--ln-edge2, #3f4147);
  transform: translateX(-50%) rotate(45deg);
}
.voice-conn .vc-sub {
  color: var(--text-muted);
  font-size: .72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.voice-conn .vc-sub:hover { color: var(--text); text-decoration: underline; }
.voice-conn .vc-actions {
  display: flex;
  align-items: center;
  gap: .15rem;
  flex-shrink: 0;
}
.voice-conn .ns-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  display: grid;
  place-items: center;
}
.voice-conn .ns-btn svg { width: 18px; height: 18px; }
.voice-conn .ns-btn:hover { background: var(--bg-hover); color: var(--text); }
.voice-conn .ns-btn.ns-on { color: var(--green); }
.voice-conn .ns-btn.ns-on:hover { color: var(--green); }
.voice-conn .ns-btn.ns-off { color: var(--text-muted); opacity: .75; }
.voice-conn .ns-btn.ns-off:hover { color: var(--text); opacity: 1; }
.voice-conn .vc-disc {
  background: transparent;
  color: var(--text-muted);
  padding: .4rem;
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.voice-conn .vc-disc:hover { background: var(--bg-hover); color: var(--red); }

/* ===== Main ===== */
.main {
  background: var(--bg-chat);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  position: relative;
}
.main-head {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 0 1rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
  flex-shrink: 0;
  z-index: 2;
}
.main-head .title {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.main-head .title > span:last-child,
.main-head .title .chan-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.main-head .title .hash { color: var(--text-muted); font-weight: 500; font-size: 1.25rem; flex-shrink: 0; }
.main-head .title .vc-chat-tag {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--bg-hover, rgba(255,255,255,.06));
  vertical-align: middle;
}
.main-head .topic {
  color: var(--text-muted);
  font-size: .85rem;
  border-left: 1px solid var(--ln-edge2, #3f4147);
  padding-left: .75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.main-head .tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: .35rem;
  flex-shrink: 0;
  min-width: 0;
}
.main-head .tools button {
  background: transparent;
  color: var(--text-muted);
  padding: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 8px;
  line-height: 0;
}
.main-head .tools button svg { width: 20px; height: 20px; }
.main-head .tools button:hover { color: var(--text); }
.main-head .tools .search-box {
  flex-shrink: 1;
  align-self: center;
  height: 28px;
  line-height: 28px;
  margin: 0;
}

.chat-log {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.chat-old-bar {
  /* Пилюля по центру, как в Discord — не на всю ширину */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  width: auto;
  max-width: min(80%, 480px);
  padding: 0 18px;
  bottom: calc(100% + 8px);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  /* нейтральная пилюля: не выглядит как «новое сообщение» */
  background: rgba(18, 18, 21, 0.94);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  user-select: none;
  box-sizing: border-box;
  gap: 6px;
  backdrop-filter: blur(6px);
}
.chat-old-bar[hidden] { display: none !important; }
.chat-old-bar:hover { background: rgba(34, 32, 30, 0.96); border-color: var(--text-muted); }
.chat-old-bar-txt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.chat-old-bar-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 1 auto;
  border: 0;
  margin: 0;
  padding: 8px 6px;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}
.chat-old-bar-go:hover { background: transparent; }
.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem 0 .5rem;
  /* Тонкий тёмный — без толстого OS light-gray поверх аватаров */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--sf-scroll, #1a1b1e) transparent;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.messages:hover {
  scrollbar-color: var(--sf-abyss, #111214) transparent;
}
.messages::-webkit-scrollbar { width: 8px; }
.messages::-webkit-scrollbar-track { background: transparent; }
.messages::-webkit-scrollbar-thumb {
  background: var(--sf-scroll, #1a1b1e);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 32px;
}
.messages:hover::-webkit-scrollbar-thumb {
  background: var(--sf-abyss, #111214);
  background-clip: padding-box;
}
.messages::-webkit-scrollbar-thumb:hover {
  background: #0a0a0b;
  background-clip: padding-box;
}
.msg {
  display: grid;
  grid-template-columns: 56px 1fr;
  padding: 0.125rem 1rem 0.125rem 0;
  position: relative;
  min-height: 0;
  align-items: start;
}
.msg:hover { background: rgba(0,0,0,.06); }
/* Discord-like: first-in-group gets breathing room; consecutive stay tight */
.msg:not(.grouped) {
  margin-top: var(--msg-group-gap, 1.0625rem);
  padding-top: 0.25rem;
  padding-bottom: 0.125rem;
}
.day-divider + .msg:not(.grouped),
.chan-welcome + .msg:not(.grouped),
.chan-loading + .msg:not(.grouped) {
  margin-top: 0.35rem;
}
.msg.grouped {
  margin-top: 0;
  padding-top: 0.0625rem;
  padding-bottom: 0.0625rem;
}
/* Critical: do NOT keep a 40px hidden avatar — it forced ~40px gaps between short lines */
.msg.grouped .avatar-col {
  visibility: visible;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 0.2rem;
  padding-right: 0.35rem;
  min-height: 0;
}
.msg.grouped .avatar-col .avatar {
  display: none !important;
}
.msg.grouped .msg-meta { display: none; }
.msg-gutter-time {
  /* Always reserve space — display:none on hover caused message jump */
  visibility: hidden;
  color: var(--text-muted);
  font-size: 0.625rem;
  line-height: 1.375rem;
  font-weight: 500;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  min-height: 1.375rem;
}
.msg.grouped .msg-gutter-time { visibility: hidden; }
.msg.grouped:hover .msg-gutter-time { visibility: visible; }
.msg .avatar-col {
  display: flex;
  justify-content: center;
  padding-top: .2rem;
  min-height: 0;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  color: #fff;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Absolute fill — grid/intrinsic img size раньше оставлял цветной «серп» вокруг фото */
.avatar .avatar-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  border-radius: 0;
  display: block;
  pointer-events: none;
  z-index: 1;
}
.avatar .avatar-media.is-broken { display: none !important; }
.avatar .avatar-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  pointer-events: none;
  font: inherit;
  color: inherit;
}
.avatar.sm { width: 32px; height: 32px; font-size: .7rem; }
.avatar.xs { width: 24px; height: 24px; font-size: .55rem; }
/* Presence dots: content-box so border ring never eats the colored disc
   (global *{box-sizing:border-box} + 12px+3px border made ::after inset collapse). */
.status-dot {
  --dot-ring: #232428;
  --dot-color: #23a55a;
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-sizing: content-box;
  border: 3px solid var(--dot-ring);
  background: transparent;
  pointer-events: auto;
  z-index: 2;
}
.status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--dot-color);
  -webkit-mask: none;
  mask: none;
}
.status-dot.online { --dot-color: #23a55a; }
.status-dot.idle { --dot-color: #f0b232; }
.status-dot.idle::after {
  border-radius: 0;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><mask id="m"><circle cx=".5" cy=".5" r=".5" fill="white"/><circle cx=".25" cy=".25" r=".375" fill="black"/></mask><rect width="1" height="1" fill="white" mask="url(%23m)"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><mask id="m"><circle cx=".5" cy=".5" r=".5" fill="white"/><circle cx=".25" cy=".25" r=".375" fill="black"/></mask><rect width="1" height="1" fill="white" mask="url(%23m)"/></svg>') center / contain no-repeat;
}
.status-dot.dnd { --dot-color: #f23f43; }
.status-dot.dnd::after {
  border-radius: 0;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><mask id="m"><circle cx=".5" cy=".5" r=".5" fill="white"/><rect x=".125" y=".375" width=".75" height=".25" rx=".125" fill="black"/></mask><rect width="1" height="1" fill="white" mask="url(%23m)"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><mask id="m"><circle cx=".5" cy=".5" r=".5" fill="white"/><rect x=".125" y=".375" width=".75" height=".25" rx=".125" fill="black"/></mask><rect width="1" height="1" fill="white" mask="url(%23m)"/></svg>') center / contain no-repeat;
}
.status-dot.offline { --dot-color: #80848e; }
.status-dot.offline::after {
  border-radius: 0;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><mask id="m"><circle cx=".5" cy=".5" r=".5" fill="white"/><circle cx=".5" cy=".5" r=".25" fill="black"/></mask><rect width="1" height="1" fill="white" mask="url(%23m)"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><mask id="m"><circle cx=".5" cy=".5" r=".5" fill="white"/><circle cx=".5" cy=".5" r=".25" fill="black"/></mask><rect width="1" height="1" fill="white" mask="url(%23m)"/></svg>') center / contain no-repeat;
}
.status-dot.inline {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: .5rem;
  --dot-ring: transparent;
  border-color: transparent;
  flex-shrink: 0;
}
.msg-meta {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .1rem;
}
.msg-meta b { font-size: var(--chat-font-size, 1rem); font-weight: 500; }
.msg-meta b:hover { text-decoration: underline; cursor: pointer; }
.msg-meta time { color: var(--text-muted); font-size: calc(var(--chat-font-size, 16px) * 0.72); }
.msg-meta .edited { color: var(--text-muted); font-size: calc(var(--chat-font-size, 16px) * 0.68); }
.msg-webhook-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--accent-brand);
  vertical-align: middle;
  line-height: 1.4;
}
.msg-bot-badge,
.member-bot-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--accent-brand);
  vertical-align: middle;
  line-height: 1.4;
}
.member-bot-badge {
  margin-left: 4px;
  flex-shrink: 0;
}
.mention.mention-role {
  border-radius: 6px;
  padding: 0 2px;
  font-weight: 500;
  cursor: pointer;
  color: var(--role-color, var(--accent-brand));
  background: color-mix(in srgb, var(--role-color, var(--accent-brand)) 22%, transparent);
}
.msg-body .mention.mention-role,
.discord-embed .mention.mention-role,
.discord-embed-desc .mention.mention-role {
  cursor: pointer;
  color: var(--role-color, var(--accent-brand));
  background: color-mix(in srgb, var(--role-color, var(--accent-brand)) 22%, transparent);
}
.msg-body .mention.mention-role:hover,
.discord-embed .mention.mention-role:hover,
.discord-embed-desc .mention.mention-role:hover {
  color: #fff;
  background: color-mix(in srgb, var(--role-color, var(--accent-brand)) 50%, transparent);
}
.role-mention-pop {
  position: fixed;
  z-index: 5100;
  min-width: 220px;
  max-width: 280px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  background: var(--sf-raised, #313338);
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,.45);
  padding: 8px 4px 6px;
}
.role-mention-pop-head {
  padding: 4px 10px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #dbdee1;
}
.role-mention-pop-list {
  overflow: auto;
  max-height: 260px;
}
.role-mention-pop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  color: #b5bac1;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.role-mention-pop-row:hover { background: rgba(255,255,255,.06); color: #dbdee1; }
.role-mention-pop-row .avatar { width: 16px; height: 16px; font-size: 8px; flex-shrink: 0; }
.role-mention-pop-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.role-mention-pop-row .priv-emoji.crown { font-size: 12px; line-height: 1; }
.role-mention-pop-empty { padding: 6px 10px 8px; color: #949ba4; font-size: 13px; }
.cs-webhook-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.cs-webhook-meta { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cs-webhook-url {
  width: 100%;
  font-size: 12px;
  font-family: ui-monospace, monospace;
  background: var(--bg-secondary, var(--sf-panel, #2b2d31));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 8px;
  color: var(--text-muted);
  padding: 6px 8px;
}
.cs-webhook-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.msg-body {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.375;
  font-size: var(--chat-font-size, 1rem);
  color: var(--text-normal);
}
.msg-body.deleted { color: var(--text-muted); font-style: italic; }
.msg-body a { color: var(--text-link); }
.msg-body code {
  background: var(--bg-app);
  padding: .1rem .3rem;
  border-radius: 6px;
  font-size: .85em;
  font-family: var(--font-code);
  border: 1px solid rgba(0,0,0,.2);
}
.msg-body pre {
  background: var(--bg-sidebar);
  padding: .6rem .75rem;
  border-radius: 8px;
  overflow: auto;
  margin: .35rem 0;
  border: 1px solid var(--line);
}
.msg-body pre code { background: none; padding: 0; }
.msg-body .spoiler {
  background: var(--sf-deep, #1e1f22);
  color: transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: color .1s;
}
.msg-body .spoiler.revealed { color: var(--text); background: var(--sf-btn, #4e5058); }
.msg-spoiler-media {
  position: relative;
  display: inline-block;
  max-width: min(420px, 100%);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  vertical-align: top;
}
.msg-spoiler-media .msg-media,
.msg-spoiler-media .msg-img,
.msg-spoiler-media .msg-video,
.msg-spoiler-media .msg-file {
  filter: blur(28px);
  transform: scale(1.06);
  pointer-events: none;
  user-select: none;
}
.msg-spoiler-media .msg-spoiler-label {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--sf-abyss, #111214);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
  pointer-events: none;
}
.msg-spoiler-media.revealed {
  cursor: default;
}
.msg-spoiler-media.revealed .msg-media,
.msg-spoiler-media.revealed .msg-img,
.msg-spoiler-media.revealed .msg-video,
.msg-spoiler-media.revealed .msg-file {
  filter: none;
  transform: none;
  pointer-events: auto;
}
.msg-spoiler-media.revealed .msg-spoiler-label { display: none; }
.msg-body .mention {
  background: rgba(214,69,58,.3);
  color: #f9c1bc;
  border-radius: 6px;
  padding: 0 .2rem;
  font-weight: 500;
}
/* Lolka MentionBadge rootClickable:hover — brand fill + white */
.msg-body .mention.mention-channel,
.discord-embed .mention.mention-channel,
.discord-embed-desc .mention.mention-channel,
.discord-embed-field-value .mention.mention-channel {
  cursor: pointer;
  background: #252641;
  color: #a9baff;
  border-radius: 6px;
  padding: 0 2px;
  font-weight: 500;
  text-decoration: none;
}
.msg-body .mention.mention-channel:hover,
.msg-body .mention.mention-channel:focus-visible,
.discord-embed .mention.mention-channel:hover,
.discord-embed .mention.mention-channel:focus-visible,
.discord-embed-desc .mention.mention-channel:hover,
.discord-embed-desc .mention.mention-channel:focus-visible,
.discord-embed-field-value .mention.mention-channel:hover,
.discord-embed-field-value .mention.mention-channel:focus-visible {
  background: #5374e0;
  color: #fff;
}
.msg-body .mention[data-mention-user] {
  cursor: pointer;
}
.msg-body .mention[data-mention-user]:hover {
  text-decoration: underline;
  filter: brightness(1.08);
}
.msg-body .mention[data-me] {
  background: rgba(240,178,50,.28);
  color: #f8e3a3;
}
.reply-ref {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: var(--text-muted);
  font-size: .78rem;
  margin-bottom: .15rem;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
}
.reply-ref:hover { color: var(--text); }
.reply-ref .line {
  width: 2rem;
  height: 8px;
  border-left: 2px solid var(--ln-btn, #4e5058);
  border-top: 2px solid var(--ln-btn, #4e5058);
  border-radius: 8px 0 0 0;
  margin-left: .5rem;
  flex-shrink: 0;
}
.msg-forward {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  padding: 2px 0;
  color: #b5bac1;
  font-size: 12px;
  font-weight: 600;
}
.msg-forward-ico {
  display: grid;
  place-items: center;
  color: #949ba4;
}
.msg-forward-ico svg { width: 14px; height: 14px; }
.forward-pick-modal .modal-body { display: grid; gap: 10px; }
.forward-pick-list {
  max-height: 320px;
  overflow: auto;
  display: grid;
  gap: 4px;
}
.forward-pick-row {
  text-align: left;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  padding: .55rem .7rem;
  cursor: pointer;
  font: inherit;
}
.forward-pick-row:hover { background: var(--bg-hover, var(--sf-panel, #2b2d31)); }
.msg-actions {
  position: absolute;
  right: 1rem;
  top: -16px;
  display: none;
  align-items: center;
  gap: 0;
  background: rgba(43, 45, 49, 0.92);
  border: none;
  border-radius: 12px;
  overflow: hidden;
  z-index: 5;
  pointer-events: auto;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.35);
}
.msg:hover .msg-actions { display: flex; }
/* привязка прокрутки включена ниже — см. блок про плавность */
.msg-actions button {
  background: transparent;
  color: #b5bac1;
  padding: 4px 8px;
  border: 0;
  border-radius: 0;
  font-size: .85rem;
  min-width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  transition: background .12s ease, color .12s ease;
}
.msg-actions button:hover { background: rgba(255,255,255,.08); color: #f2f3f5; }
.msg-actions button svg { width: 18px; height: 18px; display: block; }
.msg-actions button.msg-del-btn { color: #ed4245; }
.msg-actions button.msg-del-btn:hover { background: rgba(237,66,69,.15); color: #ed4245; }

.composer-wrap {
  position: relative;
  padding: 0 1rem 1.1rem;
  flex-shrink: 0;
}
.composer-reply {
  background: var(--bg-input);
  border-radius: 12px 12px 0 0;
  padding: .45rem .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--ln-panel, #2b2d31);
}
.composer-reply button { margin-left: auto; padding: .2rem .4rem; }
/* Discord-like staged attachments above «Написать в #…» */
.composer-attach-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px 8px;
  background: var(--bg-input);
  border-bottom: 1px solid var(--ln-panel, #2b2d31);
}
.composer-wrap > .composer-attach-strip:first-child {
  border-radius: 12px 12px 0 0;
}
.composer-reply + .composer-attach-strip {
  border-radius: 0;
}
.composer-attach-card {
  position: relative;
  width: 160px;
  background: var(--sf-panel, #2b2d31);
  border: 1px solid var(--ln-deep, #1e1f22);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.composer-attach-toolbar {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .65);
}
.composer-attach-tool {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #dbdee1;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.composer-attach-tool svg { width: 16px; height: 16px; display: block; }
.composer-attach-tool:hover { background: rgba(255,255,255,.08); color: #fff; }
.composer-attach-tool.composer-attach-rm,
button.composer-attach-tool.composer-attach-rm {
  background: transparent !important;
  color: #f23f43 !important;
}
.composer-attach-tool.composer-attach-rm:hover,
button.composer-attach-tool.composer-attach-rm:hover {
  background: rgba(242, 63, 67, .18) !important;
  color: #ff6b6e !important;
}
.composer-attach-thumb {
  width: 100%;
  height: 96px;
  object-fit: cover;
  background: #000;
  display: block;
}
.composer-attach-fileico {
  height: 96px;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  background: var(--sf-deep, #1e1f22);
}
.composer-attach-fileico svg { width: 28px; height: 28px; }
.composer-attach-meta {
  padding: 6px 8px 8px;
  display: grid;
  gap: 1px;
  min-width: 0;
}
.composer-attach-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-attach-size {
  font-size: 11px;
  color: var(--text-muted);
}
.composer-attach-spoiler {
  position: absolute;
  inset: 0 0 40px 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.55);
  z-index: 2;
  pointer-events: none;
}
.composer-attach-spoiler span {
  background: var(--sf-abyss, #111214);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 6px 10px;
  border-radius: 999px;
}
.composer-attach-alt {
  position: absolute;
  left: 8px;
  bottom: 42px;
  z-index: 2;
  background: #fff;
  color: #111;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 6px;
}
.composer-attach-progress {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 4px;
  border-radius: 6px;
  background: var(--sf-deep, #1e1f22);
  overflow: hidden;
  z-index: 4;
}
.composer-attach-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent-brand);
  border-radius: 6px;
}
.composer-attach-card.is-uploading .composer-attach-toolbar { opacity: .55; }
.composer-attach-x {
  display: none;
}
.composer {
  background: var(--bg-input);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: .15rem;
  padding: .35rem .45rem;
  min-height: 44px;
}
.composer.has-reply,
.composer.has-attach { border-radius: 0 0 12px 12px; }
.composer-input {
  position: relative;
  flex: 1;
  min-width: 0;
  align-self: center;
}
.composer textarea {
  background: transparent;
  border: 0;
  padding: .4rem .35rem;
  min-height: 22px;
  max-height: 200px;
  resize: none;
  line-height: 1.375;
  width: 100%;
  min-width: 0;
  display: block;
}
.composer-ph {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: .4rem .35rem;
  color: var(--text-muted);
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.375;
}
.composer-ph[hidden] { display: none !important; }
.composer-voice-live {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 0 6px;
  pointer-events: none;
}
.composer-voice-live[hidden] { display: none !important; }
.composer-voice-time {
  flex-shrink: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #ed4245;
  min-width: 36px;
}
.composer-voice-wave {
  flex: 1;
  width: 100%;
  height: 36px;
  display: block;
}
.composer.is-voice-rec .composer-input { min-height: 36px; }
.composer.is-voice-rec textarea,
.composer.is-voice-rec .composer-ph,
.composer.is-voice-rec [data-gif],
.composer.is-voice-rec [data-emoji],
.composer.is-voice-rec [data-attach] {
  display: none !important;
}
.composer .emoji-btn[hidden],
.composer [data-voice-cancel][hidden],
.composer:not(.is-voice-rec) [data-voice-cancel] {
  display: none !important;
}
.composer .voice-rec-btn.on,
.composer .voice-rec-btn.on:hover { color: #ed4245; }
.msg-voice {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(320px, 100%);
  margin: 4px 0;
  padding: 6px 10px 6px 6px;
  background: var(--sf-panel, #2b2d31);
  border-radius: 26px;
  --voice-p: 0;
}
.msg-voice-play {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--accent-brand);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
}
.msg-voice-play:hover { background: #4752c4; }
.msg-voice-play svg { width: 16px; height: 16px; }
.msg-voice-wave {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  overflow: hidden;
}
.msg-voice-wave i {
  flex: 1;
  min-width: 2px;
  border-radius: 3px;
  background: #72767d;
  height: 28%;
}
.msg-voice-wave i:nth-child(3n) { height: 70%; }
.msg-voice-wave i:nth-child(4n) { height: 46%; }
.msg-voice-wave i:nth-child(5n) { height: 90%; }
.msg-voice-wave::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--voice-p) * 100%);
  background: rgba(237, 66, 69, .35);
  pointer-events: none;
}
.msg-voice-time {
  flex-shrink: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: #b5bac1;
  min-width: 34px;
}
.msg-voice audio { display: none; }
.composer .send {
  background: transparent;
  color: #a39a94;
  width: 32px;
  height: 32px;
  padding: 0;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  align-self: center;
}
.composer .send:hover { color: var(--text, #f2ebe6); }
.composer .send svg { width: 20px; height: 20px; display: block; }
.typing {
  height: 22px;
  padding: 0 1.2rem;
  color: var(--text-muted);
  font-size: .78rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  visibility: hidden;
}
.typing.is-active {
  visibility: visible;
}
.typing-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 2px;
  height: 1em;
  flex-shrink: 0;
}
.typing-dots span {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  animation: typing-dot-wave 1.05s ease-in-out infinite;
}
.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-dot-wave {
  0%, 60%, 100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2.5px);
  }
}

/* ===== Members ===== */
.members {
  background: var(--sf-panel, #2b2d31);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 8px 24px;
  min-height: 0;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--sf-scroll, #1a1b1e) transparent;
}
.members:hover {
  scrollbar-color: var(--sf-abyss, #111214) transparent;
}
.members::-webkit-scrollbar { width: 8px; }
.members::-webkit-scrollbar-track { background: transparent; }
.members::-webkit-scrollbar-thumb {
  background: var(--sf-scroll, #1a1b1e);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 32px;
}
.members:hover::-webkit-scrollbar-thumb {
  background: var(--sf-abyss, #111214);
  background-clip: padding-box;
}
.members::-webkit-scrollbar-thumb:hover {
  background: #0a0a0b;
  background-clip: padding-box;
}
.members .sec {
  color: #949ba4;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 24px 8px 4px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.members .sec.role-sec {
  /* Discord hoist header: role color on letters only — 👑 stays gold */
  opacity: 0.9;
}
.members .sec .name-emoji {
  color: revert !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
  font-variant-emoji: emoji;
  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  text-transform: none;
}
.member {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  height: auto;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: #949ba4;
}
.member:hover { background: var(--sf-raised2, #35373c); }
.member:hover .status-dot { --dot-ring: #35373c; }
.member.offline { opacity: .3; }
.member.timed-out .uname,
.voice-user.timed-out .uname,
.uname.timed-out-name {
  color: var(--text-muted) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-muted) !important;
  animation: none !important;
}
.member.timed-out .status-dot,
.voice-user.timed-out .status-dot {
  display: none;
}
.member.timed-out .av-wrap::after,
.voice-user.timed-out .av-wrap::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  z-index: 3;
  box-shadow: 0 0 0 2px var(--sf-panel, #2b2d31);
  background: var(--sf-abyss, #111214) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f0b232'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 10.59V7h-2v6.41l4.29 4.3 1.42-1.42L13 12.59z'/></svg>") center / 10px 10px no-repeat;
}
.composer-timeout {
  text-align: center;
}
.member .av-wrap { position: relative; width: 32px; height: 32px; flex-shrink: 0; }
.member .av-wrap .avatar.sm { width: 32px; height: 32px; }
.member .status-dot {
  --dot-ring: #2b2d31;
  width: 10px;
  height: 10px;
  border-width: 3px;
  right: -2px;
  bottom: -2px;
}
.member .meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
  gap: 1px;
  line-height: 1.2;
}
.member-name-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: inherit;
  width: 100%;
}
.member-name-row .nick-inline-name {
  flex: 0 1 auto;
  min-width: 0;
}
.member-name-row .nick-inline-core {
  flex: 0 1 auto;
  gap: 2px;
  justify-content: flex-start;
}
/* nick → [boost?] → tag (core); game icon separate far right */
.nick-inline-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
}
.nick-inline-core {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 3px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.nick-inline-game {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 6px;
}
.nick-inline-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Voice: nick shrinks; ruby/boost/tag hug the nick — never stretch across the row */
.vu-nick .nick-inline-row {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
  justify-content: flex-start;
}
.vu-nick .nick-inline-core {
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  gap: 2px;
  justify-content: flex-start;
  overflow: hidden;
}
.vu-nick .nick-inline-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vu-nick .nick-inline-core .gem-badge,
.vu-nick .nick-inline-core .boost-badge-wrap,
.vu-nick .nick-inline-core .utag.clan-tag {
  margin-left: 0;
}
/* Members list: never show trailing game icon — name + badges + tag only */
.members .member .nick-inline-game,
.members .member .row-game-ico,
.members .member .vu-game-ico {
  display: none !important;
}
.userpanel .who b,
.userpanel .who .nick-inline-row,
.userpanel .who .nick-inline-name {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nick-inline-name .uname,
.nick-inline-name .uname-fx,
.nick-inline-name .uname-line {
  display: block;
  min-width: 0 !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nick-inline-name .uname.holo,
.nick-inline-name .uname.grad,
.nick-inline-name .uname-fx .uname.holo,
.nick-inline-name .uname-fx .uname.grad {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.nick-inline-row .boost-badge-wrap,
.nick-inline-row .boost-badge,
.nick-inline-row .utag.clan-tag,
.nick-inline-row .row-game-ico,
.nick-inline-row .vu-game-ico,
.nick-inline-row .member-bot-badge,
.nick-inline-row .vu-inline-flag,
.nick-inline-core .utag.clan-tag,
.nick-inline-core .boost-badge-wrap,
.nick-inline-core .vu-inline-flag {
  flex: 0 0 auto;
  flex-shrink: 0;
}
.vu-inline-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-left: 1px;
}
.vu-inline-flag svg {
  width: 14px;
  height: 14px;
  display: block;
}
.user-popout .uname-row .utag.clan-tag {
  margin-left: 0;
  flex-shrink: 0;
}
.member-name-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  /* Keep room for ≥8 name chars + badges; game icon yields first */
  min-width: 8ch;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
}
.member-row-trail,
.vu-tag-trail,
.profile-tag-trail {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  flex: 0 0 auto;
  margin-left: auto;
  max-width: 34%;
}
.member-row-trail .utag.clan-tag,
.vu-tag-trail .utag.clan-tag,
.profile-tag-trail .utag.clan-tag {
  flex-shrink: 0;
}
/* Spacer: push game icon right, but collapse when name+badges need space */
.member-game-gap,
.vu-game-gap,
.friend-game-gap,
.activity-game-gap {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: 56px;
}
.row-game-ico,
.member-name-row .row-game-ico,
.friend-name-row .row-game-ico {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  object-fit: contain;
  object-position: center;
  background: var(--sf-app2, #0c0c0e);
  flex: 0 0 22px;
  min-width: 0;
  margin-left: 2px;
  image-rendering: -webkit-optimize-contrast;
}
.friend-name-row,
.activity-name-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  max-width: 100%;
  min-width: 0;
}
.activity-game-icon.sm {
  width: 18px;
  height: 18px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--sf-deep, #1e1f22);
}
.member-name-row .uname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Owner: ≥8 visible chars before ellipsis, even with badges/game icon */
  min-width: 8ch;
  flex: 1 1 auto;
  font-weight: 500;
}
.member-name-row .uname-fx {
  overflow: hidden;
  min-width: 8ch;
  flex: 1 1 auto;
}
.member-name-row .uname.holo,
.member-name-row .uname.grad {
  overflow: visible;
  text-overflow: clip;
}
.member-name-row .priv-badge,
.member-name-row .gem-badge,
.member-name-row .utag,
.member-name-row .boost-badge-wrap {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
}
.member-name-row .priv-badge {
  margin-left: 2px;
  font-size: 11px;
}
.member-name-row .priv-badge .priv-ico {
  width: 12px;
  height: 12px;
}
.member-name-row .gem-badge {
  width: 12px;
  height: 12px;
  margin-left: 2px;
  vertical-align: middle;
}
.member-name-row .boost-badge-wrap .boost-badge,
.member-name-row svg.boost-badge {
  width: 12px;
  height: 12px;
}
.priv-badge .role-dot,
i.role-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
}
.member-sub {
  font-size: 12px;
  color: #949ba4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  font-weight: 400;
}
.member-sub.custom-status { color: #b5bac1; }
.member .role-admin .member-name-row .uname:not(.holo):not(.grad) { color: var(--accent-gold); }

/* ===== UI density: cozy (default) vs compact — must be obvious ===== */
body.density-cozy .member,
body:not(.density-compact) .member {
  min-height: 48px;
  padding: 8px 10px;
  gap: 10px;
}
body.density-cozy .member .av-wrap,
body:not(.density-compact) .member .av-wrap {
  width: 36px;
  height: 36px;
}
body.density-cozy .member .av-wrap .avatar.sm,
body:not(.density-compact) .member .av-wrap .avatar.sm {
  width: 36px;
  height: 36px;
}
body.density-cozy .member-name-row,
body:not(.density-compact) .member-name-row { font-size: 13.5px; }
body.density-cozy .member-sub,
body:not(.density-compact) .member-sub { font-size: 12px; margin-top: 2px; }
/* Cozy chat: Discord-ish grouping (base .msg rules above) */
body.density-cozy .msg:not(.grouped),
body:not(.density-compact) .msg:not(.grouped) {
  margin-top: var(--msg-group-gap, 1.0625rem);
  padding-top: 0.25rem;
  padding-bottom: 0.125rem;
}
body.density-cozy .msg.grouped,
body:not(.density-compact) .msg.grouped {
  margin-top: 0;
  padding-top: 0.0625rem;
  padding-bottom: 0.0625rem;
}
body.density-cozy .chan,
body:not(.density-compact) .chan {
  padding: 0.48rem 0.6rem;
  font-size: 0.96rem;
}
body.density-cozy .voice-user,
body:not(.density-compact) .voice-user {
  padding: 0.4rem 0.5rem;
  gap: 0.6rem;
}
body.density-cozy .friend-row,
body:not(.density-compact) .friend-row {
  padding: 0.85rem 0.85rem;
  gap: 0.85rem;
}
body.density-cozy .cat,
body:not(.density-compact) .cat {
  padding: 0.55rem 0.5rem 0.25rem;
  margin-top: 0.35rem;
}

body.density-compact .member {
  min-height: 26px;
  padding: 1px 6px;
  gap: 6px;
}
body.density-compact .member .av-wrap {
  width: 22px;
  height: 22px;
}
body.density-compact .member .av-wrap .avatar.sm {
  width: 22px;
  height: 22px;
  font-size: 0.55rem;
}
body.density-compact .member .status-dot {
  width: 8px;
  height: 8px;
  border-width: 2px;
}
body.density-compact .member-name-row { font-size: 12px; }
body.density-compact .member-sub {
  font-size: 10px;
  line-height: 1.1;
  margin-top: 0;
}
body.density-compact .msg {
  padding-top: 0.04rem;
  padding-bottom: 0.04rem;
  grid-template-columns: 44px 1fr;
}
body.density-compact .msg:not(.grouped) {
  margin-top: 0.08rem;
  padding-top: 0.12rem;
}
body.density-compact .msg .avatar-col { padding-top: 0.05rem; }
body.density-compact .msg .avatar { width: 28px; height: 28px; font-size: 0.65rem; }
body.density-compact .msg-meta { margin-bottom: 0; font-size: calc(var(--chat-font-size, 16px) * 0.85); }
body.density-compact .chan {
  padding: 0.14rem 0.45rem;
  font-size: 0.86rem;
  gap: 0.3rem;
}
body.density-compact .voice-user {
  padding: 0.05rem 0.25rem;
  gap: 0.28rem;
  font-size: 0.78rem;
}
body.density-compact .voice-nest { gap: 0; margin: 0 0 0.1rem 1.4rem; }
body.density-compact .friend-row {
  padding: 0.28rem 0.55rem;
  gap: 0.45rem;
}
body.density-compact .friend-row .actions button {
  padding: 0.25rem 0.5rem;
  font-size: 0.78rem;
}
body.density-compact .cat {
  padding: 0.28rem 0.4rem 0.1rem;
  margin-top: 0.1rem;
  font-size: 0.68rem;
}

/* ===== User profile popout ===== */
.user-popout {
  position: fixed;
  z-index: 5000;
  width: min(320px, calc(100vw - 16px));
  background: var(--sf-abyss, #111214);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0,0,0,.45);
  animation: popout-in var(--camp-dur-enter, .46s) var(--camp-ease, cubic-bezier(.16, 1, .3, 1));
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}
.user-popout.has-adr {
  box-shadow:
    0 0 0 2px #ff6a1a,
    0 0 22px rgba(255, 106, 26, .38),
    0 12px 24px rgba(0,0,0,.45);
}
.user-profile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5200;
  background: rgba(0, 0, 0, .72);
  display: grid;
  place-items: center;
  padding: 24px;
}
.user-popout.user-profile-modal {
  --up-theme: #2b1d28;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: min(900px, calc(100vw - 32px));
  height: min(860px, calc(100vh - 24px));
  max-height: min(860px, calc(100vh - 24px));
  overflow: hidden !important;
  overflow-y: hidden !important;
  display: flex;
  flex-direction: column;
  background: #0c0a0e;
  border-radius: 20px;
  box-shadow: 0 16px 64px rgba(0,0,0,.65);
  isolation: isolate;
}
.user-profile-modal.has-adr {
  box-shadow:
    0 0 0 2px #e64a19,
    0 0 28px rgba(230, 74, 25, .32),
    0 16px 64px rgba(0,0,0,.65);
}
.user-profile-modal .up-shell-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.user-profile-modal .up-shell-banner {
  position: absolute;
  inset: -22%;
  background-size: cover;
  background-position: center top;
  filter: blur(68px) saturate(1.45);
  transform: scale(1.18);
  opacity: .88;
}
.user-profile-modal .up-shell-dim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,6,10,.08) 0%, rgba(8,6,10,.28) 52%, rgba(8,6,10,.48) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--up-theme) 28%, transparent) 0%, transparent 70%);
}
.user-profile-modal .up-cols {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(320px, 38%) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
.user-profile-modal .up-left {
  background: color-mix(in srgb, var(--up-theme) 18%, rgba(10,8,12,.36));
  border-right: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.user-profile-modal .banner {
  height: 128px;
  flex-shrink: 0;
}
.user-profile-modal .up-identity {
  display: block;
  padding: 0 16px 10px;
  margin-top: -42px;
  position: relative;
  z-index: 2;
}
.user-profile-modal .up-identity .avatar-wrap {
  margin: 0;
  width: 84px;
  height: 84px;
  position: relative;
  overflow: visible;
}
.user-profile-modal .up-identity .avatar-wrap .avatar {
  width: 84px;
  height: 84px;
  font-size: 1.7rem;
  border-width: 7px;
  border-color: color-mix(in srgb, var(--up-theme) 42%, #141018);
}
.user-profile-modal .up-identity .avatar-wrap .status-dot {
  --dot-ring: color-mix(in srgb, var(--up-theme) 42%, #141018);
}
.user-profile-modal .up-identity h3.nick {
  margin: 12px 0 2px;
  font-size: 20px;
  line-height: 1.2;
  word-break: break-word;
  color: #fff;
}
.user-profile-modal .up-identity h3.nick .uname,
.user-profile-modal .up-identity h3.nick .uname-line,
.user-profile-modal .up-identity h3.nick .uname-fx {
  font-size: inherit;
  font-weight: inherit;
}
.user-profile-modal .up-identity h3.nick .uname:not(.grad):not(.holo):not(.neon):not(.xenon) {
  color: #fff;
  -webkit-text-fill-color: #fff;
}
/* Adrenaline/role .grad|.holo — стили из displayNameHtml / .uname.grad, не трогаем */
.user-profile-modal .up-identity .uname-row {
  margin-bottom: 10px;
}
.user-profile-modal .up-about {
  margin: 4px 0 0;
  color: #dbdee1;
  font-size: 14px;
  line-height: 1.35;
  word-break: break-word;
  overflow: visible;
  white-space: pre-wrap;
}
.user-profile-modal .up-div {
  height: 1px;
  margin: 14px 0 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22) 12%, rgba(255,255,255,.22) 88%, transparent);
  position: relative;
}
.user-profile-modal .up-div::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3px 0 0 -3px;
  border: 1px solid rgba(255,255,255,.35);
  transform: rotate(45deg);
  background: rgba(12,10,14,.55);
}
.user-profile-modal .up-left-body {
  padding: 0 16px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.user-profile-modal .sec-h {
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #b5bac1;
  font-size: 11px;
  font-weight: 700;
  margin: 14px 0 8px;
}
.user-profile-modal .up-right {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: color-mix(in srgb, var(--up-theme) 8%, rgba(8,8,12,.18));
  overflow: hidden;
}
.user-profile-modal .up-right::after {
  content: "";
  position: absolute;
  inset: 18% 8% 8%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.08) 0%, transparent 68%);
  pointer-events: none;
}
.user-profile-modal .up-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 6;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.user-profile-modal .up-close:hover { background: rgba(0, 0, 0, .35); }
.user-profile-modal .up-tabs,
.user-profile-modal .up-tab-body {
  position: relative;
  z-index: 1;
}
.up-since {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-bottom: 4px;
}
.up-since-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #dbdee1;
  font-size: 14px;
}
.up-since-ico {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--sf-panel, #2b2d31);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  image-rendering: auto;
}
.up-since-ico:not(.letter) {
  padding: 2px;
  box-sizing: border-box;
}
.up-friend-btn {
  flex: 1 1 auto;
  gap: 6px;
  background: #23a559 !important;
  color: #fff !important;
  border: 0;
  border-radius: 8px;
}
.up-friend-btn:disabled { opacity: .65; }
.up-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  min-height: 280px;
  padding: 24px 16px;
  color: #dbdee1;
}
.up-empty b { font-size: 15px; color: #dbdee1; font-weight: 500; }
.up-empty p { margin: 0; color: #b5bac1; font-size: 14px; max-width: 22rem; line-height: 1.4; }
@media (max-width: 720px) {
  .user-popout.user-profile-modal {
    width: calc(100vw - 16px);
    height: min(94vh, 860px);
    max-height: 94vh;
  }
  .user-profile-modal .up-cols {
    grid-template-columns: 1fr;
    overflow: auto;
  }
  .up-right { min-height: 280px; }
}
.up-tabs {
  display: flex;
  gap: 0;
  padding: 16px 40px 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.up-tabs::-webkit-scrollbar { display: none; }
.up-tabs button {
  background: transparent;
  color: #b5bac1;
  padding: 8px 10px;
  border-radius: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.up-tabs button + button {
  border-left: 1px solid rgba(255,255,255,.1);
}
.up-tabs button.on {
  color: #fff;
  border-bottom-color: #fff;
}
.up-tab-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.user-profile-modal .up-tab-body:has(.up-board) {
  overflow: hidden;
  padding-bottom: 12px;
}
.up-board {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.up-board-card {
  background: color-mix(in srgb, var(--up-theme, #2b1d28) 24%, rgba(10, 8, 12, .52));
  border: 1px solid color-mix(in srgb, var(--up-theme, #2b1d28) 32%, transparent);
  border-radius: 12px;
  padding: 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.user-profile-modal .up-board-card {
  background: color-mix(in srgb, var(--up-theme) 26%, rgba(10, 8, 12, .48));
  border-color: color-mix(in srgb, var(--up-theme) 36%, transparent);
}
.up-board-h {
  margin-bottom: 12px;
  color: #fff;
  flex-shrink: 0;
}
.up-game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.up-game-grid.scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  padding-bottom: 8px;
  scrollbar-gutter: stable;
  align-content: start;
}
.up-game-grid.scroll::-webkit-scrollbar {
  width: 8px;
}
.up-game-grid.scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 12px;
}
.up-game-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #dbdee1;
  text-decoration: none;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.up-game-card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  /* Discord/Blizzard covers are often wider — bias up so faces/logo stay in frame */
  object-position: center 22%;
  border-radius: 10px;
  background: var(--sf-deep, #1e1f22);
}
.up-game-card span {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.up-list { overflow: hidden; display: flex; flex-direction: column; gap: 4px; max-height: 100%; }
.delete-msg-modal { width: min(440px, 96vw) !important; grid-template-columns: 1fr !important; }
.del-msg-preview {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: var(--sf-deep, #1e1f22);
  border: 1px solid rgba(255,255,255,.06);
}
.del-msg-meta { min-width: 0; flex: 1; }
.del-msg-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.del-msg-body { color: #dbdee1; white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.del-msg-hint { margin-top: 10px; }
.del-tip { color: #3ba55d; font-weight: 800; letter-spacing: .04em; }
.delete-msg-modal .danger,
.modal-footer .danger {
  background: #da373c !important;
  color: #fff !important;
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 600;
}
.delete-msg-modal .danger:hover { background: #a12828 !important; }
.up-actions {
  display: flex;
  gap: 6px;
  margin: 10px 0;
  align-items: center;
}
.up-actions > button {
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
}
.up-msg-btn {
  flex: 1 1 auto;
  gap: 6px;
  background: var(--accent-brand) !important;
  color: #fff !important;
  border-radius: 8px;
  font-weight: 600;
}
.up-actions .btn-brand {
  flex: 1 1 auto;
  padding: 0 12px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  line-height: 1 !important;
}
.up-actions > button.ghost {
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  padding: 0;
}
.up-vol {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
}
.up-vol input[type="range"] { flex: 1; }
.up-note {
  width: 100%;
  min-height: 56px;
  resize: vertical;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  color: #dbdee1;
  padding: 8px;
  font: inherit;
}
.up-list {
  display: grid;
  gap: 4px;
  align-content: start;
  justify-items: stretch;
}
.up-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  color: #dbdee1;
  width: 100%;
  height: auto;
  min-height: 0;
  align-self: start;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
}
.up-list-row:hover { background: rgba(255,255,255,.08); }
.up-tabs [data-tab="servers"]:hover { background: rgba(255,255,255,.06); }
.up-list-row .hint { display: block; font-size: 12px; }
.up-srv-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--sf-deep, #1e1f22);
  display: grid;
  place-items: center;
  font-weight: 700;
}
.up-activity:not(.neat) {
  display: grid;
  gap: 16px;
  justify-items: center;
  align-content: start;
  align-items: start;
  text-align: center;
  padding: 24px 8px;
  color: #dbdee1;
}
/* Discord-like activity blocks */
.up-activity.neat {
  width: 100%;
  max-width: 520px;
  justify-items: stretch;
  text-align: left;
  gap: 10px;
  padding: 8px 4px 24px;
}
.up-activity.neat .up-act-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #b5bac1;
  margin: 6px 2px 8px;
}
.up-act-blocks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.up-act-block {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  min-height: 56px;
  border-radius: 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-decoration: none;
  color: #f2f3f5;
  transition: background .12s ease;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: inherit;
}
.up-act-block:hover { background: rgba(255,255,255,.06); }
.up-act-block.live {
  box-shadow: inset 0 0 0 1px rgba(255,106,26,.28);
}
.up-act-block-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
  object-position: center;
  background: var(--sf-deep, #1e1f22);
  image-rendering: -webkit-optimize-contrast;
  flex-shrink: 0;
}
.clan-tag-pick-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
select.clan-tag-pick {
  width: 100%;
  max-width: 360px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--ln-deep, #1e1f22);
  background: var(--sf-deep, #1e1f22);
  color: #f2f3f5;
  font: inherit;
}

/* ── «Какой тег показывать»: свой список вместо нативного select ─────────────
   В каждой строке — иконка сообщества, название и НАСТОЯЩАЯ пилюля тега
   (.utag.clan-tag из serverTagPillHtml). Сообщества без тега видно, но выбрать
   нельзя: показывать рядом с ником было бы нечего. */
.clan-tag-pick-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  max-width: 380px;
}
.clan-pick-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--line-soft, #2e2824);
  background: var(--bg-input, #1e1e22);
  color: var(--text-normal, #e8dcc8);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.clan-pick-btn:hover { border-color: var(--accent, #ff6a1a); }
.clan-pick-cur {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.clan-pick-caret { flex: 0 0 auto; opacity: .7; }
.clan-pick-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 268px;
  overflow-y: auto;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--line-soft, #2e2824);
  background: var(--bg-floating, #080808);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}
.clan-pick-menu[hidden] { display: none !important; }
.clan-pick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 5px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-normal, #e8dcc8);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.clan-pick-row:hover { background: var(--bg-hover, #242220); }
.clan-pick-row.on { background: var(--bg-active, #2e2a26); }
.clan-pick-row.off { cursor: default; opacity: .5; }
.clan-pick-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.clan-pick-name.none { color: var(--text-muted, #9a8f82); }
.clan-pick-note {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-muted, #9a8f82);
  white-space: nowrap;
}
.clan-pick-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  overflow: hidden;
  /* фикс. тёмная подложка: буквы в .rail-letters всегда белые, на светлой теме
     они бы пропали на кремовом фоне */
  background: #2b2d31;
}
.clan-pick-ico.none {
  font-size: 12px;
  color: var(--text-muted, #9a8f82);
  background: transparent;
}
.clan-pick-ico .rail-icon,
.clan-pick-ico .rail-letters {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  font-size: 9px;
  object-fit: cover;
  display: grid;
  place-items: center;
}
.clan-pick-btn .utag.clan-tag,
.clan-pick-row .utag.clan-tag { flex: 0 0 auto; }
.up-act-block-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.up-act-block-body b {
  font-size: 15px;
  font-weight: 700;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.up-act-block-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #b5bac1;
}
.up-act-dot { opacity: .55; }
.up-act-pad { opacity: .75; flex-shrink: 0; }
.up-act-block-more {
  color: #949ba4;
  font-size: 18px;
  line-height: 1;
  padding: 4px;
  align-self: start;
}
.msg-camp-emoji {
  width: 1.55em;
  height: 1.55em;
  vertical-align: -0.35em;
  display: inline-block;
  object-fit: contain;
}
/* Эмодзи, чью картинку не нашли (нет во flags и в кэшах): маленькая честная
 * заглушка вместо сырого кода :s_имя: — имя видно в title при наведении. */
.msg-emoji-missing {
  width: 1.55em;
  height: 1.55em;
  vertical-align: -0.35em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  color: #949ba4;
  font-size: 0.8em;
  font-weight: 700;
  cursor: help;
}
.msg-twemoji {
  width: 1.375em;
  height: 1.375em;
  vertical-align: -0.2em;
  display: inline-block;
  object-fit: contain;
}
.msg-body.is-jumbo-emoji {
  font-size: 3rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em;
}
.msg-body.is-jumbo-emoji .msg-twemoji,
.msg-body.is-jumbo-emoji .msg-twemoji.is-jumbo {
  width: 48px !important;
  height: 48px !important;
  vertical-align: bottom;
}
.msg-body.is-jumbo-emoji .msg-camp-emoji {
  width: 48px !important;
  height: 48px !important;
  vertical-align: bottom;
}

/* Юникод-эмодзи в тексте сообщения: обёртка ради клика по нему.
 * Никакой геометрии не добавляем — только курсор. */
.msg-uemoji {
  cursor: pointer;
}
.msg-body .msg-twemoji,
.msg-body .msg-camp-emoji,
.msg-body .msg-emoji-missing {
  cursor: pointer;
}

/* Карточка эмодзи по клику (позиционируется скриптом — как .reaction-tip
 * и .stream-viewers-tip: fixed + прижим к краям экрана). */
.emoji-card {
  position: fixed;
  z-index: 130;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 200px;
  max-width: 320px;
  padding: 12px;
  background: var(--sf-abyss, #111214);
  border: 1px solid var(--ln-panel, #2b2d31);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  color: #dbdee1;
  font-size: 13px;
  line-height: 1.35;
}
.emoji-card-big {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}
.emoji-card-big img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.emoji-card-glyph {
  font-size: 40px;
  line-height: 1;
  font-variant-emoji: emoji;
}
.emoji-card-body {
  min-width: 0;
  padding-top: 2px;
}
.emoji-card-name {
  color: #f2f3f5;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.emoji-card-note {
  margin-top: 4px;
  color: #949ba4;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.emoji-card-note + .emoji-card-note { margin-top: 2px; }
body.theme-light .emoji-card { background: #fff; border-color: #d7d9dc; color: #313338; }
body.theme-light .emoji-card-name { color: #060607; }
body.theme-light .emoji-card-note { color: #5c5e66; }
.emoji-cell.img {
  padding: 2px;
}
.emoji-cell.img img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}
.emoji-preview .em img {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}
.emoji-grid.camp .emoji-cell { width: 40px; height: 40px; }
.main-head-stack { display: flex; flex-direction: column; min-width: 0; }
.thread-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border, var(--ln-deep, #1e1f22));
  background: var(--bg-secondary, var(--sf-panel, #2b2d31));
  color: var(--text-muted, #949ba4);
  font-size: .9rem;
}
.thread-bar-title { font-weight: 600; color: var(--text, #dbdee1); }
.thread-bar-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.thread-bar-started {
  font-size: .72rem;
  font-weight: 500;
  color: var(--text-muted, #949ba4);
}
.thread-priv-banner {
  padding: 8px 16px;
  font-size: .82rem;
  color: #b5bac1;
  background: var(--sf-deep, #1e1f22);
  border-bottom: 1px solid var(--ln-abyss, #111214);
}
.thread-bar-archived {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #f0b429;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.ticket-archived-banner {
  color: #f0b429;
}
.members.members-ticket {
  display: flex;
  flex-direction: column;
}
.members.members-ticket .ticket-priv-note {
  margin-top: auto;
}
.friends-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 48px 24px;
  color: var(--text-muted, #949ba4);
}
.friends-empty-art {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--sf-deep, #1e1f22);
  display: grid;
  place-items: center;
  color: #b5bac1;
  margin-bottom: 4px;
}
.friends-empty-art svg { width: 32px; height: 32px; }
.friends-empty h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--text, #f2f3f5);
  font-weight: 700;
}
.friends-empty p {
  margin: 0;
  max-width: 320px;
  line-height: 1.4;
  font-size: .9rem;
}
.composer-locked {
  margin: 0 16px 24px;
  padding: 12px 16px;
  background: var(--sf-panel, #2b2d31);
  border-radius: 12px;
  color: #949ba4;
  font-size: .9rem;
  text-align: center;
}
/* ===== GIF picker (Discord-style: categories + masonry) ===== */
.gif-pop {
  position: fixed;
  z-index: 1200;
  width: min(424px, 94vw);
  height: min(460px, calc(100vh - 96px));
  display: flex;
  flex-direction: column;
  background: var(--sf-panel, #2b2d31);
  border: 1px solid var(--ln-deep, #1e1f22);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  animation: popout-in var(--camp-dur-enter, .46s) var(--camp-ease, cubic-bezier(.16, 1, .3, 1));
  overflow: hidden;
  padding: 0;
}
.gif-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 8px;
  flex-shrink: 0;
}
.gif-back {
  background: transparent;
  border: 0;
  color: #b5bac1;
  font-size: 1.5rem;
  line-height: 1;
  padding: 2px 8px;
  cursor: pointer;
  border-radius: 8px;
}
.gif-back:hover { color: #f2f3f5; background: var(--sf-raised3, #383a40); }
.gif-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--sf-deep, #1e1f22);
  border-radius: 12px;
  padding: 0 10px;
  color: #949ba4;
}
.gif-search-ico { display: grid; place-items: center; }
.gif-search-ico svg { width: 16px; height: 16px; }
.gif-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: #dbdee1;
  padding: 8px 0;
  font-size: .9rem;
}
.gif-search input:focus { outline: none; }
.gif-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 12px;
}
.gif-hint-pad { padding: 24px 12px; text-align: center; }
/* Category cards — 2 columns, cover gif + dark overlay + label */
.gif-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.gif-cat-card {
  position: relative;
  height: 96px;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--sf-deep, #1e1f22);
  padding: 0;
}
.gif-cat-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.55);
  transition: filter .1s ease;
}
.gif-cat-card:hover img { filter: brightness(.75); }
.gif-cat-card:hover { box-shadow: inset 0 0 0 2px var(--brand, #eb6123); }
.gif-cat-label {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
}
/* Results — 2-col masonry of previews */
.gif-masonry { display: flex; gap: 8px; align-items: flex-start; }
.gif-col { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gif-cell {
  border: 0;
  padding: 0;
  background: var(--sf-deep, #1e1f22);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  width: 100%;
  position: relative;
}
.gif-cell img,
.gif-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-cell:hover { box-shadow: inset 0 0 0 2px var(--brand, #eb6123); }
.gif-cell:hover img,
.gif-cell:hover video { opacity: .9; }
.gif-powered {
  margin: 0;
  padding: 6px 10px 8px;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #949ba4;
  text-align: right;
}
/* Unconfigured / URL fallback */
.gif-na {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 16px;
  text-align: center;
}
.gif-na-ico { font-size: 2rem; }
.gif-url-row { display: flex; gap: 6px; width: 100%; }
.gif-url-row input {
  flex: 1;
  min-width: 0;
  background: var(--sf-deep, #1e1f22);
  border: 0;
  border-radius: 8px;
  color: #dbdee1;
  padding: 9px 10px;
}
.gif-url-row input:focus { outline: none; }
/* Кнопка не должна растягиваться на всю строку и душить поле ввода */
.gif-url-row > button { flex: 0 0 auto; width: auto; white-space: nowrap; }
/* ===== Threads popout (Discord-style, anchored to header button) ===== */
.threads-pop {
  position: fixed;
  z-index: 1200;
  width: min(540px, calc(100vw - 24px));
  max-height: min(600px, calc(100vh - 80px));
  display: flex;
  flex-direction: column;
  background: var(--bg-floating, var(--sf-panel, #2b2d31));
  color: var(--text, #f2f3f5);
  border: 1px solid var(--line, var(--ln-deep, #1e1f22));
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  animation: popout-in var(--camp-dur-enter, .46s) var(--camp-ease, cubic-bezier(.16, 1, .3, 1));
  overflow: hidden;
}
.threads-pop-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line, var(--ln-deep, #1e1f22));
  background: var(--bg-floating, var(--sf-panel, #2b2d31));
  flex-shrink: 0;
}
.threads-pop-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text, #f2f3f5);
  font-size: 1rem;
  white-space: nowrap;
}
.threads-pop-title .threads-ico { color: #b5bac1; display: grid; place-items: center; }
.threads-pop-title .threads-ico svg { width: 20px; height: 20px; }
.threads-pop-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  justify-content: flex-end;
}
.threads-pop .threads-search {
  flex: 1;
  min-width: 0;
  max-width: 240px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-input, var(--sf-deep, #1e1f22));
  border-radius: 8px;
  padding: 0 8px;
  color: var(--text-muted, #949ba4);
}
.threads-pop .threads-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.threads-pop .threads-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--text, #dbdee1);
  padding: 7px 0;
  font-size: .85rem;
}
.threads-pop .threads-search input:focus { outline: none; }
.threads-create-btn { white-space: nowrap; padding: 7px 14px; font-size: .85rem; }
.threads-x {
  color: #b5bac1;
  background: transparent;
  border: 0;
  font-size: 1rem;
  padding: 4px 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.threads-x:hover { color: #f2f3f5; }
.threads-pop-body {
  overflow-y: auto;
  padding: 8px;
  min-height: 180px;
}
.threads-loading { padding: 24px; text-align: center; }
.threads-sec-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #949ba4;
  padding: 8px 8px 4px;
}
.threads-list { display: flex; flex-direction: column; gap: 2px; }
.threads-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--bg-hover, var(--sf-raised, #313338));
  color: inherit;
  cursor: pointer;
}
.threads-row:hover { background: var(--bg-active, var(--sf-raised3, #383a40)); }
.threads-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.threads-row b {
  font-size: .95rem;
  color: var(--text, #f2f3f5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.threads-row-meta { font-size: .78rem; color: var(--text-muted, #949ba4); }
.threads-row-del {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #949ba4;
  display: none;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.threads-row:hover .threads-row-del { display: grid; }
.threads-row-del:hover {
  color: #fff;
  background: rgba(242, 63, 67, .24);
}
.threads-row-del svg { width: 16px; height: 16px; }
.threads-row-go { color: #949ba4; font-size: 1.2rem; flex-shrink: 0; }
.threads-empty {
  text-align: center;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.threads-empty h3 { margin: 0; color: var(--text, #f2f3f5); }
.threads-empty .hint { max-width: 320px; color: var(--text-muted); }
.threads-empty .btn-brand { margin-top: 8px; }
.threads-empty-art {
  width: 68px;
  height: 68px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--sf-deep, #1e1f22);
  display: grid;
  place-items: center;
  color: #949ba4;
}
.threads-empty-art svg { width: 32px; height: 32px; }
.threads-create { padding: 4px 8px 8px; }
.threads-create-field { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.threads-create-field span {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #949ba4;
}
.threads-create-field input {
  background: var(--sf-deep, #1e1f22);
  border: 0;
  border-radius: 8px;
  color: #dbdee1;
  padding: 10px;
  font-size: .95rem;
}
.threads-create-field input:focus { outline: none; box-shadow: 0 0 0 2px rgba(235,97,35,.35); }
.threads-create-field input:disabled { opacity: .6; }
.invite-custom-field { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.invite-custom-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--sf-deep, #1e1f22);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--ln-scroll, #1a1b1e);
}
.invite-custom-prefix {
  flex-shrink: 0;
  padding: 10px 0 10px 10px;
  color: #949ba4;
  font-size: .85rem;
  white-space: nowrap;
  user-select: none;
}
.invite-custom-row input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: #dbdee1;
  padding: 10px 10px 10px 2px;
  font-size: .95rem;
}
.invite-custom-row input:focus { outline: none; }
.invite-custom-row input[readonly] { color: #949ba4; }
.threads-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px;
}
.sb-pop { width: min(360px, 94vw); padding: 10px; }

/* Discord-style soundboard panel */
.sb-panel {
  position: fixed;
  z-index: 25000;
  width: min(432px, calc(100vw - 16px));
  max-height: min(520px, calc(100vh - 16px));
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--bg-float, var(--sf-deep, #1e1f22));
  border: 1px solid var(--line, var(--ln-panel, #2b2d31));
  box-shadow: 0 18px 48px rgba(0,0,0,.5);
  overflow: hidden;
  color: #dbdee1;
  animation: popout-in .16s ease-out;
}
.sb-panel-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 8px;
  flex-shrink: 0;
}
.sb-panel-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 10px;
  height: 34px;
  border-radius: 8px;
  background: var(--sf-abyss, #111214);
  border: 1px solid var(--ln-scroll, #1a1b1e);
}
.sb-panel-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #dbdee1;
  font: inherit;
  font-size: 14px;
}
.sb-panel-search input:focus { outline: none; }
.sb-panel-search input::placeholder { color: #949ba4; }
.sb-panel-search-ico {
  display: inline-flex;
  color: #949ba4;
  flex-shrink: 0;
}
.sb-panel-search-ico svg { width: 16px; height: 16px; }
.sb-panel-vol {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 0;
  border-radius: 8px;
  background: var(--sf-abyss, #111214);
  color: #b5bac1;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.sb-panel-vol:hover { background: var(--sf-panel, #2b2d31); color: #fff; }
.sb-panel-vol svg { width: 18px; height: 18px; }
.sb-panel-body {
  display: flex;
  min-height: 0;
  flex: 1;
  border-top: 1px solid var(--ln-panel, #2b2d31);
}
.sb-panel-rail {
  width: 52px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  background: var(--sf-abyss, #111214);
  border-right: 1px solid var(--ln-panel, #2b2d31);
  overflow-y: auto;
}
.sb-rail-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 20px;
  padding: 0;
  background: var(--sf-panel, #2b2d31);
  color: #dbdee1;
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.sb-rail-btn:hover { background: var(--sf-raised2, #35373c); }
.sb-rail-btn.on {
  background: var(--sf-edge3, #404249);
  box-shadow: inset 0 0 0 2px #5865f2;
}
.sb-rail-ico {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.sb-rail-letters,
.sb-rail-note {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.sb-rail-note { font-size: 16px; }
.sb-panel-main {
  flex: 1;
  min-width: 0;
  padding: 10px 12px 12px;
  overflow-y: auto;
}
.sb-panel-cat {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f2f3f5;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: default;
}
.sb-panel-cat span { color: #949ba4; font-size: 12px; }
.sb-panel-add {
  width: 100%;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 2px dashed var(--ln-edge2, #3f4147);
  border-radius: 12px;
  background: transparent;
  color: #949ba4;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.sb-panel-add:hover {
  border-color: #5865f2;
  color: #dbdee1;
  background: rgba(88,101,242,.08);
}
.sb-panel-nitro {
  width: 100%;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #342047, #1f213b 52%, #3a2418);
}
.sb-panel-nitro b { display: block; font-size: 14px; }
.sb-panel-nitro span { display: block; margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.75); }
.sb-panel-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #949ba4;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
}
.sb-panel-section-head em { margin-left: auto; font-style: normal; font-size: 10px; }
.sb-panel-section:not(.open) .sb-panel-sounds { display: none; }
.sb-panel-section:not(.open) .sb-panel-section-head em { transform: rotate(-90deg); }
.sb-panel-sounds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.sb-sound-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: var(--sf-panel, #2b2d31);
  color: #dbdee1;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}
.sb-sound-chip:hover { background: var(--bg-2, var(--sf-raised2, #35373c)); }
.sb-sound-chip.playing {
  background: var(--sf-edge3, #404249);
  box-shadow: inset 0 0 0 1px #23a559;
}
.sb-chip-ico { flex-shrink: 0; font-size: 15px; line-height: 1; }
.sb-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-panel-empty {
  grid-column: 1 / -1;
  margin: 8px 0;
  text-align: center;
}
.rail-drag-ghost {
  position: fixed;
  left: -9999px;
  top: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  opacity: .92;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.45));
}
.rail-drag-ghost .rail-icon,
.rail-drag-ghost img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.rail-drag-ghost .rail-letters {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: var(--accent-brand, #e64a19);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
.sb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.sb-cell {
  position: relative;
  border: 0;
  border-radius: 12px;
  padding: 12px 8px;
  background: var(--sf-deep, #1e1f22);
  color: #dbdee1;
  cursor: pointer;
  font-size: .8rem;
  min-height: 86px;
  overflow: hidden;
}
.sb-cell:hover { background: var(--sf-raised2, #35373c); }
.sb-cell .sb-ico { display: block; font-size: 1.4rem; margin-bottom: 4px; }
.sb-cell .sb-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-cell.sb-selected,
.sb-cell.sb-playing {
  outline: 2px solid var(--green, #23a55a);
  box-shadow: 0 0 14px rgba(35, 165, 90, .25);
}
.sb-hover-acts {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease-out;
}
.sb-cell:hover .sb-hover-acts {
  opacity: 1;
  pointer-events: auto;
}
.sb-act,
.sb-del {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.sb-act svg { width: 14px; height: 14px; }
.sb-del {
  margin-left: auto;
  font-size: 13px;
}
.sb-act:hover,
.sb-del:hover { background: var(--sf-edge2, #3f4147); }
.sb-cell.is-fav [data-sb-fav] { color: var(--accent-gold, #ffb300); }
.sb-fav-row {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ln-panel, #2b2d31);
}
.sb-section-title {
  margin: 0 0 6px;
  color: #949ba4;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.sb-footer-nitro,
.sb-footer-add {
  width: 100%;
  margin-top: 10px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
}
.sb-footer-nitro {
  padding: 12px;
  text-align: left;
  color: #fff;
  background:
    radial-gradient(circle at 15% 0, rgba(255,106,26,.35), transparent 42%),
    linear-gradient(135deg, #342047, #1f213b 52%, #3a2418);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.sb-footer-nitro b,
.sb-footer-nitro span,
.sb-footer-nitro em { display: block; }
.sb-footer-nitro span {
  margin-top: 3px;
  color: rgba(255,255,255,.78);
  font-size: .8rem;
}
.sb-footer-nitro em {
  margin-top: 8px;
  color: var(--accent-gold, #ffb300);
  font-style: normal;
  font-weight: 800;
}
.sb-footer-add {
  padding: 10px 12px;
  background: var(--green, #23a55a);
  color: #fff;
  font-weight: 800;
}
.sb-vol-menu {
  position: fixed;
  z-index: 25000;
  width: 230px;
  padding: 12px;
  border-radius: 12px;
  background: var(--sf-abyss, #111214);
  border: 1px solid var(--ln-panel, #2b2d31);
  box-shadow: var(--elevation-high);
  color: #dbdee1;
}
.sb-vol-menu label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: .82rem;
}
.sb-vol-menu input { width: 100%; }
.sb-vol-menu .danger {
  width: 100%;
  margin-top: 10px;
  border: 0;
  border-radius: 10px;
  padding: 8px;
  background: rgba(242,63,67,.16);
  color: #ffb3b5;
  cursor: pointer;
}
.sys-thread-link {
  border: 0;
  background: transparent;
  color: var(--text-link);
  padding: 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.sys-thread-link:hover { text-decoration: underline; }
.main-head .tools button.on { color: var(--text); }
@keyframes popout-in {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
.user-popout .banner {
  position: relative;
  height: 90px;
  background: var(--sf-btn, #4e5058);
  background-size: cover;
  background-position: center;
}
.user-profile-modal .banner {
  height: 120px;
}
.pop-banner-btns {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.pop-ico-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .48);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.pop-ico-btn:hover { background: rgba(0, 0, 0, .68); }
.pop-ico-btn svg { width: 18px; height: 18px; }
.user-popout .avatar-wrap {
  position: relative;
  display: block;
  margin: -40px 0 0 16px;
  width: 80px;
  height: 80px;
  z-index: 2;
  overflow: visible;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
}
.user-popout:not(.user-profile-modal) .avatar-wrap .avatar-dim {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  z-index: 1;
  transition: background .12s ease;
}
.user-popout:not(.user-profile-modal) .avatar-wrap:hover .avatar-dim {
  background: rgba(0, 0, 0, .38);
}
.user-popout .avatar-wrap .avatar {
  width: 80px;
  height: 80px;
  font-size: 1.7rem;
  border: 6px solid var(--ln-abyss, #111214);
  box-sizing: border-box;
}
.user-popout .avatar-wrap .status-dot {
  --dot-ring: #111214;
  width: 16px;
  height: 16px;
  border-width: 4px;
  right: 2px;
  bottom: 2px;
  z-index: 2;
}
/* Discord-like custom status «облачко» — horizontal, ≤25 chars */
.user-popout .status-bubble {
  position: absolute;
  left: calc(100% + 10px);
  top: auto;
  bottom: 6px;
  width: max-content;
  max-width: min(220px, 25ch);
  background: var(--sf-abyss, #111214);
  border: 1px solid var(--ln-edge2, #3f4147);
  border-radius: 20px;
  padding: 6px 10px;
  color: #dbdee1;
  font-size: 13px;
  line-height: 1.3;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  white-space: nowrap;
  overflow: visible;
}
.user-popout .status-bubble-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 25ch;
  word-break: normal;
  writing-mode: horizontal-tb;
}
.user-popout .status-bubble-tail {
  position: absolute;
  left: -5px;
  top: auto;
  bottom: 10px;
  width: 10px;
  height: 10px;
  background: var(--sf-abyss, #111214);
  border-left: 1px solid var(--ln-edge2, #3f4147);
  border-bottom: 1px solid var(--ln-edge2, #3f4147);
  transform: rotate(45deg);
}
.user-popout .body { padding: 6px 16px 16px; }
.user-popout .nick {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #f2f3f5;
  line-height: 1.25;
  position: relative;
  z-index: 1;
}
.user-popout h3.nick .uname,
.user-popout h3.nick .uname-line {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}
.user-popout h3.nick .uname:not(.grad):not(.holo):not(.neon):not(.xenon),
.user-popout h3.nick .uname-line:not(.grad):not(.holo) {
  color: inherit;
}
.user-popout .uname-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.user-popout .uname-row .uname {
  font-size: 14px;
  font-weight: 500;
  color: #b5bac1;
  margin: 0;
}
.user-popout .uname-row .uname-copy {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
}
.user-popout .uname-row .uname-copy:hover {
  color: #fff;
  text-decoration: underline;
}
.user-popout .uname { font-size: 14px; color: #dbdee1; margin-top: 2px; }
.pop-mutual {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: #b5bac1;
  font-size: 14px;
}
.pop-mutual-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #b5bac1;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.pop-mutual-btn:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}
.pop-mutual img,
.pop-mutual .letter,
.pop-mutual-btn img,
.pop-mutual-btn .letter {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--sf-panel, #2b2d31);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}
.pop-playing {
  background: var(--sf-panel, #2b2d31);
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0 4px;
}
.pop-playing-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #b5bac1;
  margin-bottom: 8px;
}
.pop-playing-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pop-playing-row img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: contain;
  object-position: center;
  background: var(--sf-deep, #1e1f22);
  flex-shrink: 0;
  image-rendering: auto;
}
.pop-playing-body b {
  display: block;
  color: #f2f3f5;
  font-size: 14px;
}
.pop-playing-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  color: #23a55a;
  font-size: 12px;
  font-weight: 600;
}
.pop-cta {
  width: 100%;
  margin-top: 14px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: var(--accent-brand);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.pop-cta:hover { filter: brightness(1.08); }
.pop-cta.secondary { background: var(--sf-btn, #4e5058); }
.pop-cta:disabled { opacity: .6; cursor: default; filter: none; }
.up-icon-btn {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #dbdee1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.up-icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.up-icon-btn svg { width: 18px; height: 18px; }
.user-profile-modal .up-icon-btn {
  background: transparent;
  color: #b5bac1;
}
.user-profile-modal .up-icon-btn:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.user-profile-modal .adr-status-block.on.pop-adr {
  border: 1px solid #f23f43;
  background: linear-gradient(180deg, rgba(90, 22, 28, .92), rgba(32, 18, 20, .96));
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0 0 14px;
}
.user-popout .pop-head-row { margin-top: 0; }
.user-popout .custom-status {
  margin: 6px 0 0;
  font-size: 14px;
  color: #949ba4;
  word-break: break-word;
}
.user-popout .sep {
  height: 1px;
  background: var(--sf-edge2, #3f4147);
  margin: 12px 0;
}
.user-popout .sec-h {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #f2f3f5;
  margin: 0 0 8px;
}
.user-popout .roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  padding-top: 4px;
}
.user-popout .role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(50% - 3px);
  flex: 0 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--role-c, #99aab5) 16%, transparent);
  font-size: 12px;
  font-weight: 500;
  color: #f2f3f5;
  line-height: 1.2;
}
.user-profile-modal .role-chip {
  border-color: transparent;
  box-shadow: none;
  outline: none;
}
.user-popout .role-chip-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--role-c, #99aab5);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.user-popout .role-chip i:not(.role-chip-dot),
.user-popout .role-chip .role-dot { display: none; }
.user-popout .role-chip.adr { color: #f2f3f5; }
.user-popout .role-chip-name {
  min-width: 0;
  color: #f2f3f5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-popout .role-chip-x {
  margin-left: 2px;
  border: 0;
  background: transparent;
  color: #b5bac1;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  flex-shrink: 0;
}
.user-popout .role-chip-x:hover { color: #fff; }
.user-popout .role-chip-add {
  width: auto;
  height: auto;
  max-width: none;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  padding: 4px 8px;
  font-size: 0;
  line-height: 0;
  color: #b5bac1;
  cursor: pointer;
  border: 1px dashed rgba(255,255,255,.22);
  background: transparent;
}
.user-popout .role-chip-add svg { display: block; }
.user-popout .role-chip-add:hover { color: #fff; background: transparent; }
.role-picker {
  margin-top: 8px;
  width: 240px;
  max-width: 100%;
  background: var(--sf-abyss, #111214);
  border: 1px solid var(--ln-deep, #1e1f22);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  padding: 8px;
  z-index: 40;
}
.role-picker input {
  width: 100%;
  box-sizing: border-box;
  background: var(--sf-deep, #1e1f22);
  border: 1px solid var(--accent-brand);
  border-radius: 8px;
  color: #dbdee1;
  padding: 6px 8px;
  font-size: 13px;
}
.role-picker-list { max-height: 220px; overflow: auto; margin-top: 6px; }
.role-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  color: #dbdee1;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
}
.role-picker-item:hover { background: var(--sf-panel, #2b2d31); }
.role-picker-item i { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.guild-skel { padding: 10px 8px 16px; }
.guild-skel-cat,
.guild-skel-row,
.guild-skel-av {
  display: block;
  background: var(--skel, var(--sf-skel2, #2c2d32));
  border-radius: 8px;
  animation: chat-skel-pulse 1.65s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.guild-skel-cat { height: 8px; margin: 16px 8px 8px; }
.guild-skel-row { height: 12px; margin: 10px 10px 10px 18px; }
.guild-skel.mem { padding: 12px 10px; }
.guild-skel-mem { display: flex; align-items: center; gap: 8px; margin: 10px 4px; }
.guild-skel-av { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.guild-skel-mem .guild-skel-row { margin: 0; flex: 1; }
.user-popout .member-since { font-size: 14px; color: #dbdee1; }
.user-popout .pop-dm-row {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 12px;
}
.user-popout .dm-input {
  width: 100%;
  height: 40px;
  margin-top: 0;
  padding: 0 40px 0 12px;
  border-radius: 12px;
  border: 1px solid var(--ln-edge2, #3f4147);
  background: var(--sf-raised, #313338);
  color: #dbdee1;
  font-size: 14px;
  box-sizing: border-box;
}
.user-popout .dm-input::placeholder { color: #949ba4; }
.user-popout .pop-dm-emoji {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #b5bac1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.user-popout .pop-dm-emoji:hover { color: #dbdee1; background: rgba(255,255,255,.06); }
.user-popout .pop-dm-emoji svg { width: 20px; height: 20px; display: block; }
.user-popout .actions,
.user-popout .pop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  align-items: stretch;
}
.user-popout .actions button,
.user-popout .pop-actions button {
  flex: 1 1 calc(50% - 6px);
  min-width: calc(50% - 6px);
  height: auto;
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
  text-align: center;
  word-break: break-word;
  hyphens: auto;
}
.user-popout .actions button.secondary,
.user-popout .pop-actions button.secondary { background: var(--sf-btn, #4e5058); }
.user-popout .actions button.secondary:hover,
.user-popout .pop-actions button.secondary:hover { background: #6d6f78; }
.user-popout select { width: 100%; margin: 0 0 4px; }
.user-popout .adr-status-block.compact { margin: 0 0 4px; padding: 8px 10px; }
.user-popout .pop-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.user-popout .pop-head-text {
  min-width: 0;
  flex: 1 1 auto;
}
.user-popout .pop-fav-games-row,
.profile-preview-card .pop-fav-games-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 2px;
  flex-wrap: wrap;
  min-width: 0;
}
.user-popout .pop-fav-games-label,
.profile-preview-card .pop-fav-games-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
.user-popout .pop-fav-games,
.profile-preview-card .pop-fav-games {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.user-popout .pop-fav-game-link,
.profile-preview-card .pop-fav-game-link {
  display: inline-flex;
  line-height: 0;
  border-radius: 6px;
  transition: transform .12s ease, opacity .12s ease;
}
.user-popout .pop-fav-game-link:hover,
.profile-preview-card .pop-fav-game-link:hover {
  transform: translateY(-1px);
  opacity: .92;
}
/* Match VC / member-list game icons (16px), not the old 48px bottom block */
.user-popout .pop-fav-game-ico,
.profile-preview-card .pop-fav-game-ico {
  width: 16px;
  height: 16px;
  border-radius: 6px;
  object-fit: contain;
  background: var(--sf-app2, #0c0c0e);
  flex-shrink: 0;
}
.user-popout .fav-games { display: none; }
.user-popout .fav-game-ico { display: none; }
.user-popout .integ-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.user-popout .integ-ico {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 1px solid var(--ln-edge2, #3f4147);
  background: var(--sf-panel, #2b2d31);
  color: #dbdee1;
  text-decoration: none;
  overflow: hidden;
  line-height: 0;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.user-popout .integ-ico svg {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  overflow: visible;
}
/* Brand hover like furydayz.ru social strip */
.user-popout .integ-ico[data-integ="steam"] { color: #fff; }
.user-popout .integ-ico[data-integ="youtube"] { color: #ff3b3b; }
.user-popout .integ-ico[data-integ="vk"] { color: #4c9ce2; }
.user-popout .integ-ico[data-integ="battlenet"] { color: #00aeff; }
.user-popout .integ-ico[data-integ="lesta"] { color: #f0a030; }
.user-popout .integ-ico[data-integ="vkplay"] { color: #8b7cff; }
.user-popout .integ-ico:hover {
  background: var(--sf-scroll, #1a1b1e);
  box-shadow: 0 0 0 1px currentColor, 0 0 12px color-mix(in srgb, currentColor 45%, transparent);
}
.user-popout .integ-ico[data-integ="steam"]:hover {
  color: #fff;
  border-color: #66c0f4;
  box-shadow: 0 0 0 1px #66c0f4, 0 0 14px rgba(102, 192, 244, .45);
}
.user-popout .integ-ico[data-integ="youtube"]:hover {
  color: #ff0000;
  border-color: #ff0000;
}
.user-popout .integ-ico[data-integ="vk"]:hover {
  color: #0077ff;
  border-color: #0077ff;
}
.user-popout .integ-ico[data-integ="battlenet"]:hover {
  color: #00aeff;
  border-color: #00aeff;
}
.user-popout .integ-ico[data-integ="lesta"]:hover {
  color: #ff8a1f;
  border-color: #ff8a1f;
}
.user-popout .integ-ico[data-integ="vkplay"]:hover {
  color: #a78bfa;
  border-color: #a78bfa;
}
.fav-games-picked {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  max-height: 160px;
  overflow-y: auto;
  padding-right: 4px;
}
.fav-pick em.fav-store {
  font-style: normal;
  opacity: 0.55;
  font-size: 10px;
  margin-left: 4px;
}
.fav-games-search-wrap {
  position: relative;
  margin-top: 12px;
}
.fav-games-search-wrap input[type="search"] {
  width: 100%;
  box-sizing: border-box;
}
.fav-games-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  max-height: 220px;
  overflow: auto;
  padding: 4px 0;
}
.fav-games-suggest[hidden] { display: none !important; }
.fav-search-hint { margin-top: 6px !important; min-height: 1.2em; }
.fav-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border-radius: 10px;
  border: 1px solid var(--ln-edge2, #3f4147);
  background: var(--sf-panel, #2b2d31);
  color: #dbdee1;
  font-size: 12px;
  cursor: pointer;
}
.fav-pick img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
}
.fav-pick.on {
  border-color: var(--accent-brand);
  background: #3c4280;
}
.fav-pick:hover { filter: brightness(1.08); }
.integ-fields { display: flex; flex-direction: column; gap: 12px; }
.integ-field { display: flex; flex-direction: column; gap: 6px; }
.integ-field-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #dbdee1;
  font-size: 13px;
}
.integ-field-label svg {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #b5bac1;
  transition: color .15s, filter .15s;
}
.integ-field:hover .integ-field-label svg { color: #fff; filter: drop-shadow(0 0 4px rgba(255,255,255,.25)); }
.integ-field:has(input[name="integ-steam"]:focus) .integ-field-label svg,
.integ-field:hover:has(input[name="integ-steam"]) .integ-field-label svg { color: #66c0f4; filter: drop-shadow(0 0 5px rgba(102,192,244,.5)); }
.integ-field:hover:has(input[name="integ-youtube"]) .integ-field-label svg { color: #ff0000; filter: drop-shadow(0 0 5px rgba(255,0,0,.45)); }
.integ-field:hover:has(input[name="integ-vk"]) .integ-field-label svg { color: #0077ff; filter: drop-shadow(0 0 5px rgba(0,119,255,.45)); }
.integ-field:hover:has(input[name="integ-battlenet"]) .integ-field-label svg { color: #00aeff; filter: drop-shadow(0 0 5px rgba(0,174,255,.45)); }
.integ-field:hover:has(input[name="integ-lesta"]) .integ-field-label svg { color: #ff8a1f; filter: drop-shadow(0 0 5px rgba(255,138,31,.45)); }
.integ-field:hover:has(input[name="integ-vkplay"]) .integ-field-label svg { color: #a78bfa; filter: drop-shadow(0 0 5px rgba(167,139,250,.45)); }
.integ-field input {
  width: 100%;
  box-sizing: border-box;
}
.msg .avatar-col { cursor: pointer; }
.msg-meta b[data-user] { cursor: pointer; }
.msg-meta b[data-user]:hover { text-decoration: underline; }


.avatar.game-avatar {
  background-size: cover;
  background-position: center;
  background-color: #111 !important;
  color: transparent !important;
  font-size: 0 !important;
}
/* Always show Discord-like status dots — even while playing */
.member-sub.playing,
.playing-sub { color: #3ba55d !important; }
.vu-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.vu-game {
  font-size: 10px;
  font-weight: 500;
  color: #3ba55d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}
.friends-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 0;
  min-height: 100%;
}
.friends-main { min-width: 0; padding-right: 8px; }
.friends-activity {
  border-left: 1px solid var(--ln-edge2, #3f4147);
  padding: 1.25rem 1rem;
  overflow: auto;
}
.friends-activity h3 {
  margin: 0 0 1rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.activity-row {
  display: flex;
  gap: .65rem;
  align-items: center;
  padding: .55rem .4rem;
  border-radius: 10px;
  cursor: pointer;
}
.activity-row:hover { background: var(--bg-hover); }
.activity-row .meta { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.activity-row .meta b { font-size: .92rem; }
.account-email-bind[hidden] { display: none !important; }
@media (max-width: 980px) {
  .friends-layout { grid-template-columns: 1fr; }
  .friends-activity { border-left: 0; border-top: 1px solid var(--ln-edge2, #3f4147); }
}

/* ===== Home / Friends ===== */
.friends-page {
  flex: 1;
  overflow: auto;
  padding: 1.25rem 1.5rem;
}
.friends-page h2 { margin: 0 0 1rem; font-size: 1.25rem; }
.home-tabs { display: flex; gap: .4rem; margin-bottom: 1rem; }
.home-tabs button {
  background: transparent;
  color: var(--text-muted);
  padding: .4rem .75rem;
  border-radius: 8px;
}
.home-tabs button.on { background: var(--bg-active); color: #fff; }
.friend-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .5rem;
  border-top: 1px solid rgba(255,255,255,.06);
  margin: 0 2px;
}
.friend-row:hover { background: var(--bg-hover); border-radius: 12px; }
.friend-row .meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.friend-row .friend-name-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #f2f3f5;
  font-size: 15px;
  font-weight: 600;
}
.friend-row .friend-sub {
  color: #949ba4;
  font-size: 13px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.friend-row .actions { margin-left: auto; display: flex; gap: .35rem; align-items: center; opacity: 0; transition: opacity .12s ease; }
.friend-row:hover .actions,
.friend-row:focus-within .actions,
.friend-row.pending-row .actions { opacity: 1; }
.friend-row .actions button {
  background: var(--bg-sidebar);
  color: var(--text);
  padding: .4rem .7rem;
  font-size: .85rem;
}
.friends-list-label {
  margin: 8px 8px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #949ba4;
}

/* Discord-like home DM sidebar */
.home-find-wrap {
  padding: 10px 10px 8px;
  flex-shrink: 0;
}
.home-find-btn {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  background: var(--sf-deep, #1e1f22);
  color: #949ba4;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.home-find-btn:hover { color: #dbdee1; }
.home-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: calc(100% - 16px);
  margin: 0 8px 2px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #949ba4;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  overflow: visible;
}
.home-nav-item:hover { background: var(--bg-hover); color: #dbdee1; }
.home-nav-item.on { background: var(--bg-active); color: #fff; }
.home-nav-lab {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: visible;
}
.shop-decor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.shop-decor-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.shop-decor-preview {
  height: 96px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: rgba(0,0,0,.25);
}
.home-nav-ico {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: .9;
}
.home-nav-ico svg { width: 22px; height: 22px; }
.home-dm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 10px 6px;
  padding: 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #949ba4;
}
.home-dm-add {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #949ba4;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.home-dm-add:hover { color: #fff; background: rgba(255,255,255,.06); }
.home-dm-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  position: relative;
  min-height: 42px;
}
.home-dm-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  text-align: left;
  gap: 1px;
}
.home-dm-name {
  color: #dbdee1;
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-dm-row.on .home-dm-name { color: #fff; }
.home-dm-sub {
  color: #949ba4;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-dm-close {
  display: none;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 8px;
  color: #b5bac1;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
}
.home-dm-row:hover .home-dm-close { display: block; }
.home-dm-row:hover .home-dm-close:hover { color: #fff; background: rgba(0,0,0,.25); }
.find-conv-list { display: flex; flex-direction: column; gap: 2px; max-height: min(50vh, 360px); overflow: auto; margin-top: 10px; }
.find-conv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 8px 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.find-conv-row:hover { background: var(--bg-hover, var(--sf-panel, #2b2d31)); }
.find-conv-meta { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.find-conv-meta b { color: #f2f3f5; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.friend-row .friend-pending-wait {
  color: var(--text-muted);
  font-size: .85rem;
  padding: 0 .25rem;
}
.add-friend {
  display: flex;
  gap: .5rem;
  max-width: 480px;
  margin-bottom: 1.25rem;
}

/* ===== Voice stage ===== */
.voice-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.main.vc-split {
  flex-direction: row;
  align-items: stretch;
}
.main.vc-split > .voice-wrap {
  flex: 1 1 auto;
  min-width: 0;
}
.vc-text-dock {
  width: 360px;
  flex: 0 0 360px;
  min-width: 280px;
  max-width: 42vw;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--sf-deep, #1e1f22);
  border-left: 1px solid rgba(0, 0, 0, 0.45);
}
.vc-text-dock-head {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.65rem 0 1rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
  flex-shrink: 0;
}
.vc-text-dock-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.vc-text-dock-ico {
  color: var(--text-muted);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.vc-text-dock-ico svg { width: 18px; height: 18px; }
.vc-text-dock-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
}
.vc-text-dock-tools {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex-shrink: 0;
}
.vc-text-dock-tools button {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.vc-text-dock-tools button:hover { color: var(--text); background: rgba(255,255,255,.06); }
.vc-text-dock-tools svg { width: 20px; height: 20px; }
.vc-dock-msgs { flex: 1; min-height: 0; }
.vc-dock-welcome { padding: 4.2rem 1.35rem 1.4rem; }
.vc-dock-welcome h2 {
  font-size: 1.32rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.vc-dock-welcome p {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-muted);
}
.vc-dock-setup {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--sf-panel, #2b2d31);
  color: var(--text);
  padding: 0.42rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}
.vc-dock-setup:hover { background: var(--sf-raised2, #35373c); }
.vc-dock-setup svg { width: 15px; height: 15px; }
.vc-text-dock .composer-wrap { padding: 0 0.75rem 0.85rem; }
.vc-text-dock .chat-old-bar { left: 50%; right: auto; }
.vc-text-dock .composer .send { display: none; }
@media (max-width: 1180px) {
  .vc-text-dock {
    width: 300px;
    flex-basis: 300px;
    min-width: 240px;
  }
}
.vstage {
  flex: 1;
  overflow: auto;
  padding: 1rem;
  display: flex;
  background: var(--bg-app, #000);
}
.vgrid {
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: .75rem;
  width: 100%;
  max-width: 1200px;
  align-items: center;
}
.vgrid.many { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vgrid.multi-stream {
  /* Discord-подобная сетка демок: 2+ в ряд, 16:9, скругления, по центру */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 10px;
  align-content: center;
  justify-content: center;
  max-width: 1500px;
}
.vgrid.multi-stream .vtile[data-stream-tile] {
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}
.vgrid.multi-stream .vtile[data-stream-tile] video {
  object-fit: contain;
  background: #000;
}
.vtile.stream-invite {
  cursor: pointer;
  outline: 1px solid rgba(240, 178, 50, 0.35);
}
.vtile.stream-invite:hover {
  outline-color: rgba(240, 178, 50, 0.7);
}
/* Discord-like opt-in: frozen first frame + connect CTA */
.vtile.stream-preview {
  outline: 1px solid rgba(237, 66, 69, 0.45);
  background: #0b0b0d;
}
.vtile.stream-preview:hover {
  outline-color: rgba(237, 66, 69, 0.85);
}
.vtile.stream-preview .stream-preview-bg {
  position: absolute;
  inset: -12px;
  z-index: 0;
  background-color: var(--sf-abyss, #111214);
  background-size: cover;
  background-position: center;
  filter: blur(22px) brightness(0.45) saturate(1.05);
  transform: scale(1.08);
  pointer-events: none;
}
.vtile.stream-preview video.stream-preview-video {
  z-index: 1;
  object-fit: cover;
  filter: blur(22px) brightness(0.45);
  transform: scale(1.12);
  pointer-events: none;
}
.vtile.stream-preview video.stream-preview-video.frozen {
  opacity: 0;
  visibility: hidden;
}
.vtile.stream-preview .vtile-avatar {
  position: relative;
  z-index: 1;
  opacity: 0.35;
}
.vtile.stream-preview .vtile-stream-hud {
  z-index: 3;
}
.stream-connect-btn {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 999px;
  padding: 0.65rem 1.15rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  background: var(--accent-brand);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, transform 0.12s ease;
}
.stream-connect-btn:hover {
  background: #4752c4;
  transform: translate(-50%, -50%) scale(1.03);
}
.stream-connect-btn:active {
  transform: translate(-50%, -50%) scale(0.98);
}
/* Discord-like own-stream PiP: clean video; head/foot slide in on hover */
.stream-own-pip {
  position: fixed;
  z-index: 9400;
  width: min(300px, calc(100vw - 24px));
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  user-select: none;
  touch-action: none;
}
.stream-own-pip-vid-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--sf-app3, #0b0c0e);
  border-radius: 12px;
  overflow: hidden;
  cursor: grab;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.stream-own-pip-vid-wrap:active { cursor: grabbing; }
.stream-own-pip-vid-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  pointer-events: none;
}
.stream-own-pip-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 70%, transparent 100%);
  transform: translateY(-110%);
  opacity: 0;
  transition: transform 0.26s cubic-bezier(0.34, 1.12, 0.64, 1), opacity 0.2s ease;
  pointer-events: none;
}
.stream-own-pip-foot {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 70%, transparent 100%);
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.26s cubic-bezier(0.34, 1.12, 0.64, 1), opacity 0.2s ease;
  pointer-events: none;
}
.stream-own-pip:hover .stream-own-pip-head,
.stream-own-pip:hover .stream-own-pip-foot,
.stream-own-pip.pip-hovered .stream-own-pip-head,
.stream-own-pip.pip-hovered .stream-own-pip-foot {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.stream-own-pip-back {
  border: 0;
  background: transparent;
  color: #f2f3f5;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.stream-own-pip-back:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.stream-own-pip-chan {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #f2f3f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stream-own-pip-fs-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.12s ease, transform 0.2s ease;
  cursor: pointer;
  padding: 0;
  pointer-events: none;
}
.stream-own-pip:hover .stream-own-pip-fs-center,
.stream-own-pip.pip-hovered .stream-own-pip-fs-center {
  opacity: 1;
  pointer-events: auto;
}
.stream-own-pip-fs-center:hover { background: rgba(0, 0, 0, 0.72); transform: translate(-50%, -50%) scale(1.04); }
.stream-own-pip-fs-center svg { width: 28px; height: 28px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6)); }
.stream-own-pip-live {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 3;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 8px;
  color: #fff;
  background: #e03e3e;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.34, 1.1, 0.64, 1);
}
.stream-own-pip:hover .stream-own-pip-live,
.stream-own-pip.pip-hovered .stream-own-pip-live {
  opacity: 1;
  transform: translateY(0);
}
.stream-own-pip-name {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #f2f3f5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stream-own-pip-actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  margin-left: auto;
}
.stream-own-pip-btn {
  border: 0;
  background: transparent;
  color: #f2f3f5;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.stream-own-pip-btn + .stream-own-pip-btn { margin-left: 2px; }
.stream-own-pip-btn svg { width: 16px; height: 16px; }
.stream-own-pip-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.stream-own-pip-btn.danger:hover { background: rgba(237, 66, 69, 0.45); }
.stream-own-pip-fs {
  position: fixed;
  inset: 0;
  z-index: 9800;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stream-own-pip-fs video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.stream-own-pip-fs-hud {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  pointer-events: none;
}
.stream-own-pip-fs-close {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 3;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.stream-own-pip-fs-close:hover { background: rgba(255, 255, 255, 0.15); }
body.stream-pip-fs-open { overflow: hidden; }
@media (max-width: 640px) {
  .stream-own-pip {
    width: min(260px, calc(100vw - 16px));
  }
}

.vtile {
  position: relative;
  background: var(--bg-sidebar);
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/9;
  /* Subtle "in channel" frame — NOT transmit. Speaking uses avatar glow. */
  border: 2px solid rgba(255, 255, 255, .06);
  display: grid;
  place-items: center;
  transition: border-color .12s ease-out, box-shadow .12s ease-out;
}
.vtile.speaking {
  border-color: rgba(35, 165, 90, .45);
  box-shadow: 0 0 0 1px rgba(35, 165, 90, .25);
}
.vtile video {
  /* absolute fill — grid+place-items collapsed % size → black “empty” LIVE tile */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  z-index: 0;
}
.vtile-avatar .avatar {
  width: 80px;
  height: 80px;
  font-size: 1.6rem;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow .12s ease-out;
}
.vtile.speaking .vtile-avatar .avatar {
  box-shadow:
    0 0 0 3px var(--green),
    0 0 16px rgba(35, 165, 90, .65);
}
.vtile-name {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  background: rgba(0,0,0,.75);
  padding: .28rem .6rem;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 500;
  display: flex;
  gap: .35rem;
  align-items: center;
}
.vstage-empty {
  margin: auto;
  text-align: center;
  color: var(--text-muted);
}
.vstage-empty h2 {
  font-family: var(--display);
  font-size: 2.6rem;
  letter-spacing: .04em;
  margin: 0 0 .3rem;
  color: var(--text);
}
.vstage-empty p { margin: 0; }
.vbar {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1rem 1.1rem;
  background: var(--bg-user, #000);
}
.vbtn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-active, var(--sf-panel, #2b2d31));
  color: var(--text, #fff);
  display: grid;
  place-items: center;
  padding: 0;
  transition: background .12s;
}
.vbtn:hover { background: var(--bg-hover, #3a3d44); }
.vbtn.off { background: #fff; color: #0f0f10; }
.vbtn.active { background: #fff; color: #0f0f10; }
.vbtn.live { background: var(--accent-gold); color: #0f0f10; }
.vbtn.hangup { background: var(--red); }
.vbtn.hangup:hover { background: #d8373b; }
.vjoin {
  background: var(--green);
  color: #fff;
  padding: .8rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
}
.vjoin:hover { background: #1e9e50; }
.mic-meter {
  height: 6px;
  background: var(--sf-deep, #1e1f22);
  border-radius: 99px;
  overflow: hidden;
  margin: 0 auto 1rem;
  max-width: 240px;
}
.mic-meter-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--green), var(--accent-gold), var(--accent-brand));
}

/* Сегментная шкала теста микрофона (настройки) — на всю ширину */
.mic-test-meter {
  position: relative;
  display: flex;
  gap: 2px;
  height: 22px;
  width: 100%;
  max-width: 100%;
  align-items: stretch;
  margin-top: 8px;
}
.mic-test-meter i {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 6px;
  background: var(--sf-btn, #4e5058);
}
.mic-test-meter i.on { background: #23a55a; }
.mic-test-meter i.on.hot { background: #f0b232; }
.mic-test-meter i.below { opacity: 0.35; } /* ниже порога — приглушено */

/* Риска порога чувствительности */
.mic-test-meter .vad-tick {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 4px rgba(0,0,0,.6);
  pointer-events: none;
  transition: left .05s linear;
}

.mic-test-btn { justify-self: start; }
.mic-test-btn.testing { background: var(--red); }
.role-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto auto;
  gap: .4rem;
  align-items: center;
}
.role-row input[type="color"] {
  padding: 0;
  height: 36px;
  cursor: pointer;
}

/* Color picker: общий input { background/padding } перекрывал swatch — казалось, цвет «не меняется» */
.modal-body input[type="color"],
.role-color-row input[type="color"],
.settings-content input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 48px !important;
  min-width: 48px;
  max-width: 48px;
  height: 36px;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: transparent !important;
  cursor: pointer;
  overflow: hidden;
  flex: none;
  color-scheme: dark;
}
.modal-body input[type="color"]::-webkit-color-swatch-wrapper,
.role-color-row input[type="color"]::-webkit-color-swatch-wrapper,
.settings-content input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.modal-body input[type="color"]::-webkit-color-swatch,
.role-color-row input[type="color"]::-webkit-color-swatch,
.settings-content input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}
.role-color-field .role-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.role-color-preview {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 0;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
  padding: 0;
  cursor: pointer;
  background: #e91e63;
}
.role-color-preview:hover {
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 1px;
}
.role-color-pencil {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 11px;
  height: 11px;
  color: #fff;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 1px 1px rgba(0,0,0,.7));
  pointer-events: none;
}
.role-color2-row {
  width: 100%;
  margin-top: 10px;
  align-items: center;
}
.camp-color-pop {
  position: fixed;
  z-index: 240;
  width: 220px;
  padding: 12px;
  border-radius: 12px;
  background: var(--sf-deep, #1e1f22);
  border: 1px solid var(--ln-panel, #2b2d31);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.camp-color-sv {
  position: relative;
  width: 100%;
  height: 148px;
  border-radius: 8px;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, hsl(var(--hue, 120), 100%, 50%));
  cursor: crosshair;
  touch-action: none;
  overflow: hidden;
}
.camp-color-sv-thumb {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.55);
  background: transparent;
  pointer-events: none;
}
.camp-color-hue {
  position: relative;
  width: 100%;
  height: 12px;
  border-radius: 10px;
  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  cursor: pointer;
  touch-action: none;
}
.camp-color-hue-thumb {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 18px;
  margin-left: -4px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.45);
  transform: translateY(-50%);
  pointer-events: none;
}
.camp-color-hex {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--sf-abyss, #111214);
  border: 1px solid var(--ln-abyss, #111214);
  color: #b5bac1;
  font-size: 14px;
}
.camp-color-hex span { flex: none; user-select: none; }
.camp-color-hex input[data-hex] {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #dbdee1;
  font: 14px/1 ui-sans-serif, system-ui, sans-serif;
  text-transform: lowercase;
  letter-spacing: .02em;
}
.role-color-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
}
.role-color-preset {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 0;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.role-color-preset.on::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M6.2 11.4 2.8 8l1.1-1.1 2.3 2.3 5.9-5.9L13.2 4z'/></svg>") center/14px no-repeat;
  filter: drop-shadow(0 0 1px #000);
}
.role-color-row input[data-rcolor-hex] {
  width: 7.5rem !important;
  min-width: 7.5rem;
  flex: 0 0 auto;
  font-family: ui-monospace, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ===== Modals ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  display: grid;
  place-items: center;
  z-index: 100;
  padding: 1rem;
  animation: modal-fade-in var(--camp-dur-enter, .46s) var(--camp-ease, cubic-bezier(.16, 1, .3, 1));
}
.modal-backdrop:not(.fullscreen) .modal {
  animation: modal-scale-in var(--camp-dur-enter, .46s) var(--camp-ease, cubic-bezier(.16, 1, .3, 1));
}
@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modal-scale-in {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}
.modal {
  width: min(740px, 100%);
  max-height: min(86vh, 720px);
  background: var(--bg-mod);
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: minmax(0, 1fr); /* ряд не выше модалки; при малом контенте — по контенту */
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
}
.modal.narrow { width: min(440px, 100%); grid-template-columns: 1fr; }
/* Simple dialogs (head/body/footer, no sidebar nav) must NOT use the 200px|1fr settings grid */
.modal:has(> .modal-head) {
  width: min(440px, 100%);
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line-soft, var(--ln-deep, #1e1f22));
}
.modal-head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text, #fff);
}
.modal:has(> .modal-head) > .modal-body {
  flex: unset;
}
.modal-nav {
  background: var(--bg-sidebar, var(--sf-deep, #1e1f22));
  padding: 1rem .6rem;
  overflow: auto;
}
.modal-nav h3 {
  margin: 0 .5rem .5rem;
  font-size: .72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.modal-nav button {
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text-muted);
  padding: .45rem .6rem;
  border-radius: 8px;
  margin-bottom: .15rem;
}
.modal-nav button.on, .modal-nav button:hover {
  background: var(--bg-active);
  color: #fff;
}
.modal-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-chat);
}
.modal-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ln-deep, #1e1f22);
}
.modal-panel header h2 { margin: 0; font-size: 1.15rem; }
.modal-body {
  padding: 1.25rem;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0; /* КЛЮЧ: разрешает flex-ребёнку сжиматься, включает скролл */
  display: grid;
  gap: .9rem;
  flex: 1;
}
.modal-body label[hidden] { display: none; } /* иначе display:grid перебивает [hidden] */
.modal-body label {
  display: grid;
  gap: .35rem;
  font-size: .85rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.modal-body label.check {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .6rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  font-weight: 500;
}
.modal-body .hint { margin: 0; color: var(--text-muted); font-size: .8rem; font-weight: 400; text-transform: none; }
.modal-footer {
  padding: .85rem 1.25rem;
  background: var(--bg-sidebar);
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
}

/* Подсказка «ниже есть ещё» */
.scroll-hint {
  position: sticky;
  bottom: -1.25rem;               /* прижать к краю скролл-порта, погасив padding .modal-body */
  height: 44px;
  margin-top: -44px;              /* не занимает места в потоке */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  background: linear-gradient(180deg, rgba(49,51,56,0), var(--bg-chat) 85%);
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity .2s;
}
.scroll-hint::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid #b5bac1;
  border-bottom: 2px solid #b5bac1;
  transform: rotate(45deg);
  animation: hint-bob 1.6s ease-in-out infinite;
}
@keyframes hint-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 3px; }
}
.scroll-hint.hidden { opacity: 0; }

/* ===== Misc ===== */
.ctx-menu {
  position: fixed;
  /* Above .vtile.stream-fs (9600) and Electron titlebar (20000) — ПКМ в fullscreen */
  z-index: 30100;
  background: var(--sf-abyss, #111214);
  border: 1px solid rgba(0,0,0,.4);
  border-radius: 8px;
  padding: 6px 8px;
  min-width: 240px;
  max-width: 420px;
  box-shadow: 0 8px 16px rgba(0,0,0,.24);
  animation: popout-in var(--camp-dur-enter, .46s) var(--camp-ease, cubic-bezier(.16, 1, .3, 1));
  /* scroll only when JS adds .ctx-scroll (menu taller than viewport) */
  overscroll-behavior: contain;
  pointer-events: auto;
  -webkit-app-region: no-drag;
}
.ctx-menu button {
  width: 100%;
  text-align: left;
  background: transparent;
  color: #b5bac1;
  padding: 6px 8px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  display: flex;
  align-items: center;
  margin: 2px 0;
  min-height: 32px;
  white-space: nowrap;
}
.ctx-menu.ctx-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ctx-menu button:hover { background: var(--accent-brand); color: #fff; }
.ctx-menu button.danger { color: #f23f43; }
.ctx-menu button.danger:hover { background: #f23f43; color: #fff; }
.ctx-menu.role-assign-menu { min-width: 260px; max-width: 340px; }
.ctx-menu.role-assign-menu .role-assign-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #dbdee1;
}
.ctx-menu.role-assign-menu .role-assign-item:hover {
  background: #4752c4;
  color: inherit;
}
.ctx-menu.role-assign-menu .role-assign-check {
  width: 16px;
  flex: 0 0 16px;
  color: #23a559;
  text-align: center;
  font-weight: 700;
}
.ctx-menu.role-assign-menu .role-assign-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  text-align: left;
}
.ctx-menu.role-assign-menu .role-assign-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-left: auto;
  flex: 0 0 12px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}
.ctx-menu.role-assign-menu .role-assign-dot.holo {
  background: linear-gradient(90deg, #4aa3ff, #7af0ff, #eb459e, #ffb86c);
}
.ctx-menu.role-assign-menu .role-assign-clear { color: #dbdee1; }
.ctx-menu.role-assign-menu .role-assign-item:hover .role-assign-dot { filter: none; }
.ctx-sep { height: 1px; background: rgba(78,80,88,.48); margin: 6px 8px; }
.ctx-vol {
  padding: .45rem .65rem;
  display: grid;
  gap: .35rem;
  font-size: .82rem;
  color: var(--text-muted);
}
.ctx-vol input[type="range"] {
  --thumb-w: 10px;
  --vol-fill: linear-gradient(
    to right,
    var(--accent-brand, #e64a19) 0 var(--vol, 50%),
    #3f4147 var(--vol, 50%) 100%
  );
  width: 170px;
  height: 8px;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--vol-fill);
  outline: none;
  cursor: pointer;
}
.ctx-vol input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 8px;
  background: var(--vol-fill);
}
.ctx-vol input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb-w, 10px);
  height: 24px;
  margin-top: -8px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 3px 1px rgba(0, 0, 0, .05);
  cursor: pointer;
  /* Keep thumb fully inside the track; at-max flush to the right edge */
  box-sizing: border-box;
}
.ctx-vol input[type="range"].at-max::-webkit-slider-thumb {
  /* Nudge so the white handle visually meets the orange bar end */
  transform: translateX(0);
}
.ctx-vol input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 8px;
  background: var(--sf-edge2, #3f4147);
}
.ctx-vol input[type="range"]::-moz-range-progress {
  height: 8px;
  border-radius: 8px;
  background: var(--accent-brand, #e64a19);
}
.ctx-vol input[type="range"]::-moz-range-thumb {
  width: var(--thumb-w, 10px);
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 3px 1px rgba(0, 0, 0, .05);
  cursor: pointer;
  box-sizing: border-box;
}
.ctx-menu button.ctx-has-sub {
  position: relative;
}
.ctx-menu .ctx-caret {
  margin-left: auto;
  color: #949ba4;
  font-size: 12px;
}
.ctx-menu .ctx-sub {
  position: absolute;
  left: calc(100% + 4px);
  top: -6px;
  z-index: 1;
}
.vtile-stream-vol {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 42px;
  z-index: 2;
  background: rgba(0, 0, 0, .78);
  border-radius: 12px;
  padding: .4rem .55rem;
  display: grid;
  gap: .25rem;
  font-size: .75rem;
  color: var(--text-muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
}
.vtile:hover .vtile-stream-vol,
.vtile.focus .vtile-stream-vol {
  opacity: 1;
  pointer-events: auto;
}
.vtile-stream-vol input[type="range"] {
  --vol-fill: linear-gradient(
    to right,
    var(--accent-brand, #e64a19) 0 var(--vol, 50%),
    #3f4147 var(--vol, 50%) 100%
  );
  width: 100%;
  height: 8px;
  margin: 0;
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--vol-fill);
  outline: none;
  cursor: pointer;
}
.vtile-stream-vol input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 8px;
  background: var(--vol-fill);
}
.vtile-stream-vol input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 18px;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.ban-list { display: grid; gap: .5rem; margin-top: .75rem; }
.ban-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .65rem;
  background: var(--bg-mod, var(--sf-panel, #2b2d31));
  border-radius: 12px;
}
.ban-row .meta { flex: 1; min-width: 0; }
.ban-row .meta b { display: block; font-size: .92rem; }
.ban-row .meta span { display: block; font-size: .78rem; color: var(--text-muted); }
.vtile-stream-vol b { color: var(--text); font-weight: 600; }
/* ===== Реакции ===== */
.reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.reaction {
  background: var(--sf-panel, #2b2d31);
  border: 1px solid transparent;
  color: var(--text);
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.reaction b {
  font-size: 13px;
  font-weight: 600;
  color: #b5bac1;
}
.reaction:hover { border-color: var(--ln-btn, #4e5058); background: var(--sf-raised2, #35373c); }
.reaction:active { transform: scale(.92); }
.reaction.mine {
  background: rgba(214, 69, 58, .15);
  border-color: var(--accent-brand);
}
.reaction.mine:hover { background: rgba(214, 69, 58, .25); }
.reaction.mine b { color: var(--text); }
.reaction.add {
  color: #b5bac1;
  padding: 2px 6px;
  font-size: 14px;
  opacity: 0;
  transition: opacity .1s;
}
.msg:hover .reaction.add, .reactions:hover .reaction.add { opacity: 1; }
.reaction.add:hover { color: #dbdee1; }

/* ===== Эмодзи-пикер ===== */
.emoji-pop {
  width: 540px;
  max-width: min(540px, calc(100vw - 24px));
  max-height: min(630px, calc(100vh - 80px));
  display: flex;
  flex-direction: column;
  background: var(--bg-floating, var(--sf-panel, #2b2d31));
  color: var(--text);
  border: 1px solid var(--line, var(--ln-deep, #1e1f22));
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
  padding: 0;
  overflow: hidden;
}
.emoji-search {
  padding: 8px 8px 4px;
  flex-shrink: 0;
}
.emoji-search input {
  height: 30px;
  padding: 0 8px;
  background: var(--bg-input, var(--sf-deep, #1e1f22));
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  width: 100%;
  border: none;
}
.emoji-search input::placeholder { color: #87898c; }
.emoji-tabs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
  padding: 2px 6px 6px;
  border-bottom: 1px solid var(--ln-deep, #1e1f22);
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.emoji-tabs::-webkit-scrollbar { display: none; }
.emoji-tabs button {
  flex: 0 0 auto;
  width: 32px;
  height: 28px;
  padding: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1;
  display: grid;
  place-items: center;
  opacity: .55;
}
.emoji-tabs button:hover { background: var(--bg-hover); opacity: 1; }
.emoji-tabs button.on { background: var(--bg-active, var(--sf-edge3, #404249)); opacity: 1; }
.emoji-scroll {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb, var(--sf-scroll, #1a1b1e)) transparent;
}
.emoji-cat {
  display: block;
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
}
.emoji-cat-title {
  position: sticky;
  top: 0;
  background: var(--bg-floating, var(--sf-panel, #2b2d31));
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 8px 4px;
  z-index: 1;
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 0;
  padding: 0 6px 4px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.emoji-grid .emoji-cell {
  width: 100%;
  max-width: 44px;
  justify-self: center;
}
.emoji-cell {
  background: transparent;
  padding: 0;
  width: 44px;
  height: 44px;
  font-size: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
}
.emoji-cell:hover {
  background: var(--sf-edge3, #404249);
}
.emoji-preview {
  height: 52px;
  flex-shrink: 0;
  background: var(--bg-user, var(--sf-base, #232428));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--text, #dbdee1);
}
.emoji-preview .em { font-size: 34px; line-height: 1; }
.emoji-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ===== Пикер в раскладке Discord: вкладки сверху, рейл слева ===== */
.emoji-pop.dpick { width: 460px; max-width: min(460px, calc(100vw - 24px)); }
.dpick-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 8px 0;
  flex-shrink: 0;
}
.dpick-tabs button {
  flex: 1 1 0;
  height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted, #b5bac1);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dpick-tabs button:hover { background: var(--bg-hover, rgba(255, 255, 255, .06)); color: var(--text, #dbdee1); }
.dpick-tabs button.on {
  background: var(--bg-active, var(--sf-edge3, #404249));
  color: var(--text, #fff);
}
.dpick-tabs button.soon { opacity: .55; cursor: default; }
.dpick-tabs button.soon:hover { background: transparent; color: var(--text-muted, #b5bac1); }
.dpick-tab-soon {
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 12px;
  background: var(--sf-edge3, #404249);
  color: var(--text-muted, #b5bac1);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
}
.emoji-search { position: relative; }
.emoji-search-ico {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: #87898c;
  pointer-events: none;
}
.emoji-search-ico svg { width: 15px; height: 15px; display: block; }
/* Специфичность выше общего input:not(...) — иначе лупа наезжает на текст */
.emoji-pop .emoji-search input:not([type="checkbox"]) { padding: 0 8px 0 30px; }
.dpick-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
}
.dpick-main[hidden] { display: none; }
.dpick-rail {
  flex: 0 0 48px;
  width: 48px;
  padding: 4px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  border-right: 1px solid var(--ln-deep, #1e1f22);
  background: var(--sf-base, #232428);
}
.dpick-rail::-webkit-scrollbar { display: none; }
.dpick-rail-btn {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sf-raised, #313338);
  color: var(--text-muted, #b5bac1);
  display: grid;
  place-items: center;
  cursor: pointer;
  overflow: visible;
}
.dpick-rail-btn:hover { background: var(--sf-edge3, #404249); color: var(--text, #dbdee1); border-radius: 30%; }
.dpick-rail-btn.on {
  background: var(--sf-edge3, #404249);
  color: var(--text, #fff);
  border-radius: 30%;
  box-shadow: inset 0 0 0 2px var(--accent, #e9642e);
}
.dpick-rail-btn.locked { opacity: .55; }
.dpick-rail-img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}
/* Иконки категорий — обычные эмодзи-символы: у них свои боковые отступы в
 * шрифте, из-за чего в круге они съезжали влево. Даём глифу весь круг,
 * жёсткую высоту строки и центр по обеим осям. */
.dpick-rail-glyph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}
.dpick-rail-glyph img, .dpick-rail-glyph svg { width: 20px; height: 20px; display: block; margin: auto; }
.dpick-rail-glyph svg { display: block; }
.dpick-rail-letters { font-size: 11px; font-weight: 700; letter-spacing: 0; }
.dpick-rail-lock {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sf-abyss, #111214);
  color: var(--text-muted, #b5bac1);
  display: grid;
  place-items: center;
}
.dpick-rail-lock svg { display: block; }
.dpick-locked-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 10px 12px;
  color: var(--text-muted, #b5bac1);
  font-size: 12px;
}
.dpick-locked-hint svg { flex: 0 0 auto; }
.emoji-cat-title {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.emoji-cat-caret { font-size: 9px; transition: transform .12s; }
.emoji-cat.collapsed .emoji-cat-caret { transform: rotate(-90deg); }
.emoji-cat.collapsed .emoji-grid { display: none; }
.emoji-grid.stickers {
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 4px;
  padding: 4px 8px 8px;
}
.emoji-grid.stickers .emoji-cell {
  width: 100%;
  max-width: none;
  height: 88px;
}
.emoji-grid.stickers .emoji-cell img { width: 76px; height: 76px; object-fit: contain; }
.emoji-preview-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.emoji-preview-txt b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emoji-preview-txt i {
  font-style: normal;
  font-size: 11px;
  color: var(--text-muted, #b5bac1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emoji-preview[hidden] { display: none; }
.emoji-pop .dpick-gif {
  flex: 1 1 auto;
  min-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.emoji-pop .dpick-gif[hidden] { display: none; }
/* Светлая тема — вкладки и рейл пикера */
html.theme-light .dpick-rail,
body.theme-light .dpick-rail { background: #efe6d8 !important; border-right-color: #ddd2c4 !important; }
html.theme-light .dpick-rail-btn,
body.theme-light .dpick-rail-btn { background: #e2d6c6 !important; }
html.theme-light .dpick-tabs button.on,
body.theme-light .dpick-tabs button.on { background: #e2d6c6 !important; }
.chan-welcome {
  padding: 2rem 1rem 1rem 1.1rem;
}
.chan-loading {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: .95rem;
}
.messages.is-skel {
  overflow: hidden;
}
.chat-skel {
  padding: 1.15rem 1rem 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  pointer-events: none;
  user-select: none;
}
.chat-skel-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.chat-skel-av,
.chat-skel-bar,
.chat-skel-media {
  background: var(--skel, var(--sf-skel2, #2c2d32));
  animation: chat-skel-pulse 1.65s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.chat-skel-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chat-skel-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
  min-width: 0;
}
.chat-skel-bar {
  display: block;
  height: 16px;
  max-width: 100%;
  border-radius: 12px;
}
.chat-skel-name {
  height: 16px;
  margin-bottom: 2px;
}
.chat-skel-media {
  display: block;
  height: 128px;
  max-width: min(240px, 72%);
  border-radius: 12px;
  margin-top: 4px;
}
@keyframes chat-skel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-skel-av,
  .chat-skel-bar,
  .chat-skel-media { animation: none; }
}
.chan-welcome-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #41434a;
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  color: #fff;
  margin-bottom: .6rem;
}
/* DM welcome: peer avatar (Discord-like), not a giant @ */
.chan-welcome-avatar {
  width: 80px;
  height: 80px;
  margin-bottom: .85rem;
  flex-shrink: 0;
  overflow: visible;
}
.chan-welcome-avatar .avatar,
.chan-welcome-avatar .avatar.xl,
.chan-welcome-avatar .avatar.lg {
  width: 80px !important;
  height: 80px !important;
  font-size: 1.75rem !important;
  border-radius: 50%;
}
.chan-welcome h2 {
  margin: 0 0 .25rem;
  font-size: 1.6rem;
  line-height: 1.25;
  clear: both;
  position: relative;
  z-index: 1;
}
.chan-welcome p { margin: 0; color: var(--text-muted); }

/* Channel permission overwrites (Discord-like) */
.ow-editor {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  min-height: 320px;
}
.ow-targets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid rgba(255,255,255,.06);
  padding-right: 10px;
  max-height: 55vh;
  overflow-y: auto;
}
.ow-hint { margin: 0 0 8px; font-size: 12px; }
.ow-target {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.ow-target i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ow-target.on { background: rgba(255,255,255,.06); color: var(--text-normal, #dbdee1); }
.ow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #23a55a;
  margin-left: auto;
}
.ow-detail { min-width: 0; }
.ow-title { margin: 0 0 10px; font-size: 16px; }
.ow-cols {
  display: grid;
  grid-template-columns: 1fr 28px 28px 28px;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-align: center;
}
.ow-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.ow-tri { display: flex; gap: 4px; }
.ow-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--sf-panel, #2b2d31);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 13px;
}
.ow-btn.on { color: #fff; border-color: transparent; }
.ow-btn.allow.on { background: #23a55a; }
.ow-btn.deny.on { background: #da373c; }
.ow-btn.on:not(.allow):not(.deny) { background: var(--sf-btn, #4e5058); }
.ow-clear { margin-top: 12px; }
.ow-add-mem { margin-top: 8px; }
.day-divider {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .8rem 1rem .4rem;
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 600;
}
.day-divider::before, .day-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sf-edge2, #3f4147);
}
.msg.mention-me {
  background: rgba(240, 178, 50, .08);
  box-shadow: inset 2px 0 0 var(--yellow);
}
.msg.mention-me:hover { background: rgba(240, 178, 50, .1); }
.msg-body .mention[data-me="1"] {
  background: rgba(88,101,242,.5);
  color: #fff;
  font-weight: 500;
}
.msg-img {
  display: block;
  max-width: min(520px, 100%);
  max-height: 350px;
  border-radius: 12px;
  margin-top: .3rem;
  cursor: zoom-in;
  background: var(--sf-deep, #1e1f22);
}
.msg-img-dead {
  display: inline-flex;
  align-items: center;
  margin-top: .35rem;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--sf-panel, #2b2d31);
  color: #949ba4;
  font-size: 13px;
  border: 1px solid var(--ln-deep, #1e1f22);
}
.msg-video {
  display: block;
  max-width: min(550px, 100%);
  max-height: 400px;
  border-radius: 12px;
  margin-top: .35rem;
  background: #000;
  outline: none;
}
.camp-vplayer {
  position: relative;
  display: inline-block;
  max-width: min(550px, 100%);
  margin-top: .3rem;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
.camp-vplayer .msg-video {
  margin: 0;
  max-width: 100%;
  width: 100%;
  max-height: 400px;
  border-radius: 0;
  cursor: pointer;
}
.ctx-menu.ctx-sheet {
  background: var(--sf-abyss, #111214);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.camp-vplayer-dl { display: none !important; }
.game-sheet { overflow-x: hidden; }
.camp-vplayer-ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 10px 12px 8px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.85) 100%);
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
/* Как Discord: панель видна на паузе / hover / fullscreen */
.camp-vplayer:not(.is-playing) .camp-vplayer-ui,
.camp-vplayer:hover .camp-vplayer-ui,
.camp-vplayer.is-fs .camp-vplayer-ui,
.camp-vplayer:focus-within .camp-vplayer-ui {
  opacity: 1;
  pointer-events: auto;
}
.camp-vplayer-overlay {
  display: block;
  max-width: min(92vw, 960px);
  width: 100%;
  margin: 0;
}
.camp-vplayer-overlay .msg-video {
  max-height: min(78vh, 720px);
}
.camp-vplayer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
}
.camp-vplayer-btn {
  width: 28px;
  height: 28px;
  border: 0;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.camp-vplayer-btn:hover { background: rgba(255,255,255,.1); }
.camp-vplayer-btn svg { width: 18px; height: 18px; display: block; }
.camp-vplayer-vol {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.camp-vplayer-vol-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  width: 28px;
  height: 96px;
  padding: 10px 0;
  border-radius: 12px;
  background: rgba(17,18,20,.96);
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.camp-vplayer-vol:hover .camp-vplayer-vol-pop,
.camp-vplayer-vol:focus-within .camp-vplayer-vol-pop {
  display: flex;
}
.camp-vplayer-vol-range {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 14px;
  height: 76px;
  margin: 0;
  padding: 0;
  accent-color: #fff;
  cursor: pointer;
}
.camp-vplayer-time {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
  user-select: none;
}
.camp-vplayer-spacer { flex: 1 1 auto; }
.camp-vplayer-scrub {
  position: relative;
  height: 16px;
  margin-top: 2px;
  cursor: pointer;
  touch-action: none;
}
.camp-vplayer-scrub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 6px;
  background: rgba(255,255,255,.28);
}
.camp-vplayer-buf,
.camp-vplayer-prog {
  position: absolute;
  left: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 6px;
  width: 0%;
  pointer-events: none;
}
.camp-vplayer-buf { background: rgba(255,255,255,.45); }
.camp-vplayer-prog { background: #fff; }
.camp-vplayer-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.camp-vplayer.is-fs {
  max-width: none;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #000;
}
.camp-vplayer.is-fs .msg-video {
  max-height: none;
  height: 100%;
  object-fit: contain;
}
.camp-vplayer.is-fs .camp-vplayer-ui { opacity: 1; pointer-events: auto; }
.msg-media {
  position: relative;
  display: inline-block;
  max-width: min(550px, 100%);
  margin-top: .3rem;
}
.msg-media .msg-img,
.msg-media .msg-video {
  margin-top: 0;
  max-width: 100%;
}
.msg-media-dl {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 2;
}
.msg-media:hover .msg-media-dl { opacity: 1; }
.msg-media-dl:hover { background: rgba(0,0,0,.75); color: #fff; }
.msg-media-dl svg { width: 16px; height: 16px; }
.msg-file {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  max-width: min(420px, 100%);
  margin-top: .3rem;
  padding: .5rem .75rem;
  background: var(--bg-mod, var(--sf-deep, #1e1f22));
  border: 1px solid var(--line, #2a2b30);
  border-radius: 12px;
  color: var(--text-link, #4aa8e8);
  text-decoration: none;
  word-break: break-all;
}
.msg-file:hover { background: var(--bg-hover, #26272c); }
.msg-file-ico { font-size: 1.1rem; }
.composer-attach-video {
  object-fit: cover;
  background: #000;
}
/* markdown blocks */
.msg-body .md-h {
  margin: .55em 0 .25em;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
.msg-body h1.md-h { font-size: 1.35em; }
.msg-body h2.md-h { font-size: 1.2em; }
.msg-body h3.md-h { font-size: 1.08em; }
.msg-body .md-quote {
  margin: .35em 0;
  padding: .15em .75em;
  border-left: 3px solid var(--accent, #e64a19);
  color: var(--text-muted);
}
.msg-body .md-ul {
  margin: .35em 0 .35em 1.1em;
  padding: 0;
  list-style: disc;
}
.msg-body .md-ul li { margin: .15em 0; }
.live-badge {
  background: #ed4245;
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .18rem .45rem;
  border-radius: 8px;
  line-height: 1.15;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.live-badge.clickable {
  cursor: pointer;
}
.live-badge.clickable:hover {
  filter: brightness(1.08);
}
/* Invite people */
.invite-people-modal {
  width: min(440px, 96vw) !important;
  grid-template-columns: 1fr !important;
}
.invite-people-modal .modal-panel { width: 100%; min-width: 0; }
.invite-head-text { min-width: 0; flex: 1; }
.invite-people-body {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  max-height: min(70vh, 560px);
}
.invite-land { margin: 2px 0 0; text-transform: none; font-weight: 400; letter-spacing: 0; }
.invite-search { position: relative; display: block; }
.invite-search input,
.invite-people-modal .invite-search input[type="search"] {
  width: 100% !important;
  padding: 10px 12px 10px 40px !important;
  box-sizing: border-box !important;
  text-transform: none !important;
  font-weight: 500;
  letter-spacing: 0;
}
.invite-search-ico {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); line-height: 0; pointer-events: none;
}
.invite-search-ico svg { width: 16px; height: 16px; }
.invite-friend-list {
  flex: 1; min-height: 120px; max-height: 240px; overflow: auto;
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px 0;
}
.invite-friend-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px;
  min-width: 0;
}
.invite-friend-row:hover { background: rgba(255,255,255,.04); }
.invite-friend-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
  overflow: hidden;
}
.invite-friend-name,
.invite-friend-tag {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invite-friend-meta b { font-size: 14px; color: var(--text); font-weight: 600; }
.invite-friend-vc { color: #23a55a; font-size: 12px; }
.invite-friend-btn { flex-shrink: 0; white-space: nowrap; }
.invite-link-box {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 12px; margin-top: 4px;
}
.invite-link-row { display: flex; gap: 8px; align-items: stretch; }
.invite-link-row input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  font-size: 13px;
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0;
}
.invite-link-row [data-copy],
.invite-link-row .btn-brand { flex-shrink: 0; white-space: nowrap; }
.invite-exp-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
button.linkish, .linkish {
  background: none; border: 0; color: #00a8fc; padding: 0; cursor: pointer; font: inherit;
}
button.linkish:hover { text-decoration: underline; }
.invite-settings-modal label { display: block; margin-bottom: 12px; }
.invite-settings-modal label.switch-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--text-normal, #dbdee1) !important;
  margin-bottom: 4px;
}
.invite-settings-modal select { width: 100%; margin-top: 6px; }
.invite-role-field { display: grid; gap: .35rem; margin-bottom: 12px; }
.invite-role-label {
  font-size: .85rem; color: var(--text-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em;
}
.invite-role-picker { position: relative; }
.invite-role-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--sf-deep, #1e1f22); color: #fff; text-align: left;
}
.invite-role-btn .chev { margin-left: auto; color: var(--text-muted); }
.invite-role-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.invite-role-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: 5; background: var(--sf-abyss, #111214); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); padding: 4px;
  max-height: 220px; overflow: auto;
}
.invite-role-opt {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  background: transparent; color: #fff; text-align: left;
}
.invite-role-opt:hover, .invite-role-opt.on { background: rgba(88,101,242,.35); }
.btn-brand {
  background: var(--accent-brand, #e64a19) !important;
  color: #fff !important;
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
}
.btn-brand:hover { background: var(--accent-brand-hover, #ff6a1a) !important; }
.family-center { display: flex; flex-direction: column; gap: 16px; }
.family-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px;
}
.family-title { margin: 0 0 6px; font-size: 1.35rem; color: #fff; }
.family-tabs {
  display: flex; gap: 4px; margin-top: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.family-tabs button {
  background: transparent; color: var(--text-muted);
  padding: 10px 12px; border-radius: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.family-tabs button.on { color: #fff; border-bottom-color: var(--accent-brand); }
.family-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin-bottom: 8px;
}
.family-card {
  background: rgba(255,255,255,.04); border-radius: 12px; padding: 14px;
}
.family-card b { display: block; color: #fff; margin-bottom: 6px; font-size: 13px; }
.family-card p { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.family-list { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.family-li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.family-li b { color: #fff; font-size: 14px; }
.family-li span { color: var(--text-muted); font-size: 12px; }
.family-li.priv b { color: #ed4245; }
.family-connect-h {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px;
}
.family-empty { text-align: center; padding: 28px 12px; }
.family-empty-art { font-size: 42px; margin-bottom: 10px; }
.family-actions .btn-brand { margin: 0; }
.family-link-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.family-link-row .av-wrap {
  position: relative; width: 32px; height: 32px; flex-shrink: 0;
  align-self: center; margin: 0; line-height: normal;
  overflow: hidden; border-radius: 50%;
}
.family-link-row .av-wrap .avatar,
.family-link-row .av-wrap .avatar.sm {
  width: 32px; height: 32px; margin: 0; display: flex;
  align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  font-size: 0.7rem; line-height: 1; font-weight: 700;
}
.family-link-row .avatar .avatar-media {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; z-index: 1;
}
.family-link-row .avatar .avatar-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 0; font-size: inherit; line-height: 1;
}
.family-link-row.pending { opacity: .85; }
.family-link-meta { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.family-link-meta b {
  color: #fff; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.family-link-meta .hint {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.family-unlink {
  flex-shrink: 0;
  margin-left: auto;
  background: transparent !important;
  color: #ed4245 !important;
  border: 0;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.family-unlink:hover {
  background: rgba(237, 66, 69, 0.14) !important;
  color: #fff !important;
}
.family-link-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.family-link-box { background: rgba(255,255,255,.03); border-radius: 12px; padding: 12px; }
.family-code-big {
  font-size: 28px; font-weight: 800; letter-spacing: .18em;
  color: #fff; text-align: center; padding: 12px 0 4px; font-family: monospace;
}
.family-code-in { display: flex; gap: 8px; }
.family-code-in input {
  flex: 1; text-transform: uppercase; letter-spacing: .12em;
  font-family: monospace; font-size: 15px; text-align: center;
}
.family-act-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-bottom: 8px;
}
.family-act-card {
  background: rgba(255,255,255,.04); border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.family-act-n { color: #fff; font-size: 16px; font-weight: 700; }
.family-people { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.family-person {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.04); border-radius: 999px; padding: 4px 10px 4px 4px;
  font-size: 13px; color: var(--text-normal);
  max-width: 220px;
}
.family-person > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.family-guilds {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  margin-top: 10px;
  align-items: flex-start;
}
.family-guild {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 84px;
  max-width: 84px;
  min-width: 0;
  background: transparent;
  padding: 0;
}
.family-guild-ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
  flex-shrink: 0;
  background: rgba(255,255,255,.06);
  box-sizing: border-box;
}
.family-guild-name {
  display: block;
  width: 100%;
  font-size: 12px;
  line-height: 1.25;
  color: var(--text-normal);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.family-days { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0 10px; }
.family-day {
  min-width: 38px; padding: 6px 0; border-radius: 10px;
  background: rgba(255,255,255,.05); color: var(--text-muted); font-size: 12px;
}
.family-day.on { background: var(--accent-brand); color: #fff; }
.family-st-times { display: flex; gap: 12px; }
.family-st-times label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.family-blocked {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--sf-app2, #0c0c0e); z-index: 9999;
}
.family-blocked-card {
  max-width: 380px; padding: 28px; text-align: center;
  background: var(--sf-mod2, #161618); border: 1px solid var(--ln-warm, #2e2824); border-radius: 20px;
}
.family-blocked-card h2 { color: #ffb300; margin: 0 0 10px; }
.family-blocked-card p { color: #9a8f82; }
/* Account Standing */
.standing-center { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.standing-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 20px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.06);
}
.standing-card-av { flex-shrink: 0; width: 64px; height: 64px; }
.standing-card-av .avatar, .standing-card-av .av { width: 64px !important; height: 64px !important; border-radius: 50%; }
.standing-card-copy { min-width: 0; flex: 1; }
.standing-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px;
}
.standing-title { margin: 0 0 6px; font-size: 1.45rem; color: #fff; font-weight: 800; }
.standing-title.good { color: #23a55a; }
.standing-title.limited { color: #f0b232; }
.standing-title.highly_limited { color: #f0b232; }
.standing-title.at_risk { color: #f23f43; }
.standing-title.suspended { color: #f23f43; }
.standing-meter {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 4px 0 8px;
  position: relative;
}
.standing-meter::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 14px;
  height: 2px;
  background: var(--sf-edge2, #3f4147);
  z-index: 0;
}
.standing-step {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; min-width: 0; position: relative; z-index: 1;
}
.standing-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
  background: transparent; color: #949ba4;
  border: 2px solid var(--ln-btn, #4e5058);
}
.standing-step.on .standing-dot {
  background: #23a55a; color: #fff; border-color: #23a55a;
}
.standing-step.on[data-level="limited"] .standing-dot,
.standing-step.on[data-level="highly_limited"] .standing-dot {
  background: #f0b232; border-color: #f0b232; color: #111;
}
.standing-step.on[data-level="at_risk"] .standing-dot,
.standing-step.on[data-level="suspended"] .standing-dot {
  background: #f23f43; border-color: #f23f43; color: #fff;
}
.standing-step.past .standing-dot { border-color: #23a55a; color: #23a55a; background: transparent; }
.standing-step-lab {
  font-size: 11px; line-height: 1.25; color: var(--text-muted);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.standing-step.on .standing-step-lab { color: #fff; font-weight: 600; }
.standing-box {
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
  color: #dbdee1;
  font-size: 14px;
  text-align: center;
}
.standing-restr {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: rgba(242, 63, 67, .08); border: 1px solid rgba(242, 63, 67, .25);
}
.standing-restr b { display: block; margin-bottom: 6px; color: #fff; }
.standing-restr ul { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: 13px; }
.standing-viol {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.standing-viol b { color: #fff; font-size: 14px; }
.standing-none { margin-top: 4px; }
@media (max-width: 720px) {
  .standing-meter { grid-template-columns: 1fr; }
  .standing-meter::before { display: none; }
  .standing-step { flex-direction: row; justify-content: flex-start; gap: 10px; text-align: left; }
  .standing-step-lab { -webkit-line-clamp: 1; }
}
@media (max-width: 720px) {
  .family-cards { grid-template-columns: 1fr; }
  .family-link-actions { grid-template-columns: 1fr; }
}
/* Create community wizard */
.create-wizard-modal { width: min(440px, 100%); }
.create-tpl-sec {
  margin: 14px 0 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
}
.create-tpl-row {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px; border-radius: 12px;
  background: rgba(255,255,255,.04); color: var(--text); text-align: left;
}
.create-tpl-row:hover { background: rgba(255,255,255,.07); }
.create-tpl-ico { font-size: 22px; width: 28px; text-align: center; }
.create-tpl-row .chev { margin-left: auto; color: var(--text-muted); }
.create-icon-wrap { display: flex; justify-content: center; margin: 12px 0 16px; }
.create-icon-btn {
  width: 96px; height: 96px; border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.35); background: transparent;
  color: var(--text); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; font-size: 11px;
}
.create-icon-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.create-join-foot { width: 100%; text-align: center; }
/* Discord-like stream overlay: LIVE + nick over video */
.vtile-stream-hud {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-width: calc(100% - 56px);
  padding: .35rem .65rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, .78);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  -webkit-app-region: no-drag;
}
.vtile-stream-nick {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.vtile.focus {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  min-height: min(62vh, 560px);
  order: -1;
}
.vtile-disc-btn {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;
  border: 0;
  border-radius: 10px;
  padding: 0.35rem 0.55rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.62);
  cursor: pointer;
  opacity: 0.92;
  -webkit-app-region: no-drag;
}
.vtile-disc-btn:hover {
  background: rgba(218, 55, 55, 0.9);
}
.vtile.stream-fs .vtile-disc-btn {
  left: 16px;
  bottom: 16px;
  z-index: 30200;
  font-size: 0.85rem;
  padding: 0.45rem 0.75rem;
}
/* Stream fullscreen (Discord-like expand) */
.vtile-fs-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 12px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  line-height: 0;
  cursor: pointer;
  opacity: .92;
  transition: background .12s, opacity .12s;
  -webkit-app-region: no-drag;
  box-sizing: border-box;
}
.vtile-fs-btn svg {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
}
.vtile-fs-btn:hover {
  background: rgba(230, 74, 25, .9);
  opacity: 1;
}
.vtile.stream-fs {
  position: fixed !important;
  inset: 0;
  z-index: 9600;
  width: 100vw;
  height: 100vh;
  max-width: none;
  aspect-ratio: auto;
  min-height: 100vh;
  border-radius: 0;
  border: none;
  margin: 0;
  grid-column: auto;
  order: 0;
  background: #000;
  /* CSS/Electron fullscreen — не Element.requestFullscreen (ломает ПКМ/ctx на body) */
  pointer-events: auto;
}
.vtile[data-stream-tile] video {
  /* Клики/ПКМ идут на .vtile → openUserCtxMenu; кнопка FS сама pointer-events:auto */
  pointer-events: none;
  object-fit: contain;
}
.vtile.stream-fs video {
  object-fit: contain;
}
.vtile.stream-fs .vtile-stream-vol {
  opacity: 1;
  pointer-events: auto;
  left: 16px;
  right: auto;
  bottom: 20px;
  width: min(280px, 70vw);
}
.vtile.stream-fs .vtile-name,
.vtile.stream-fs .vtile-stream-hud {
  left: 20px;
  top: 20px;
  bottom: auto;
  right: auto;
  max-width: min(520px, calc(100% - 72px));
  z-index: 5;
  font-size: 1rem;
  padding: .45rem .75rem;
}
.vtile.stream-fs .live-badge {
  font-size: .78rem;
  padding: .22rem .5rem;
}
.vtile.stream-fs .vtile-fs-btn {
  /* Край экрана справа (не к центру / стикерам) */
  top: 12px;
  right: 8px;
  width: 44px;
  height: 44px;
  background: rgba(230, 74, 25, .9);
  z-index: 6;
  pointer-events: auto;
}
body.electron .vtile.stream-fs .vtile-fs-btn {
  top: 12px;
  right: 8px;
}
body.stream-fs-open .toast {
  z-index: 12010;
}
.vtile.stream-fs .vtile-fs-btn svg {
  width: 22px;
  height: 22px;
}
body.stream-fs-open {
  overflow: hidden;
}
.composer .attach, .composer .emoji-btn {
  background: transparent;
  color: #b5bac1;
  width: 32px;
  height: 32px;
  padding: 0;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  align-self: center;
  line-height: 0;
  font: inherit;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  outline: none;
  transition: color var(--camp-dur-hover, .15s) ease, background var(--camp-dur-hover, .15s) ease;
}
.composer .attach svg, .composer .emoji-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}
.composer .emoji-btn-gif svg { width: 20px; height: 20px; }
.composer .emoji-btn-poll svg { width: 20px; height: 20px; }
.composer .attach:hover, .composer .emoji-btn:hover { color: #f2f3f5; background: transparent; }
.composer .attach:focus-visible, .composer .emoji-btn:focus-visible {
  color: #f2f3f5;
  background: rgba(255,255,255,.06);
}
/* Discord-like emoji: outline → random yellow/red face on hover */
.composer .emoji-btn-face .emoji-swap {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}
.composer .emoji-btn-face .emoji-ico-default,
.composer .emoji-btn-face .emoji-ico-hover {
  grid-area: 1 / 1;
  transition: opacity .12s ease, transform .12s var(--camp-ease, cubic-bezier(.22, 1, .36, 1));
}
.composer .emoji-btn-face .emoji-ico-hover {
  opacity: 0;
  transform: scale(.86);
  pointer-events: none;
}
.composer .emoji-btn-face:hover .emoji-ico-default,
.composer .emoji-btn-face:focus-visible .emoji-ico-default {
  opacity: 0;
  transform: scale(.9);
}
.composer .emoji-btn-face:hover .emoji-ico-hover,
.composer .emoji-btn-face:focus-visible .emoji-ico-hover {
  opacity: 1;
  transform: scale(1);
}
.composer .emoji-btn-face:hover,
.composer .emoji-btn-face:focus-visible {
  color: inherit;
  background: transparent;
}
.sidebar-quick-ico svg {
  stroke-width: 1.5;
}
.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background: var(--sf-abyss, #111214);
  border-left: 3px solid var(--accent-brand);
  padding: .75rem 1rem;
  border-radius: 10px;
  z-index: 300;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  max-width: 320px;
}
.toast-undo {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 420px;
  padding: .7rem .85rem .7rem 1rem;
  border-left-color: #f23f43;
  z-index: 400;
}
.toast-undo-text { flex: 1; font-size: 14px; line-height: 1.35; }
.toast-undo-btn {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--accent-brand, #e64a19);
  font: 700 13px/1 var(--font);
  text-transform: uppercase;
  letter-spacing: .03em;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
}
.toast-undo-btn:hover { background: rgba(230,74,25,.12); }
.search-box {
  width: 144px;
  height: 24px;
  padding: 0 8px;
  background: var(--bg-rail, var(--sf-deep, #1e1f22));
  border: none;
  border-radius: 8px;
  color: #dbdee1;
  font: 500 14px/24px var(--font);
  transition: width .25s ease;
  max-width: none;
}
.search-box::placeholder { color: #949ba4; }
.search-box:focus { width: 240px; outline: none; }

.drop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.drop-box {
  pointer-events: none;
  border: 3px dashed var(--accent-brand);
  border-radius: 20px;
  background: var(--bg-sidebar);
  padding: 2.5rem 3.5rem;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
.drop-box .drop-ico { font-size: 2.5rem; margin-bottom: .5rem; }
.drop-box h3 { margin: 0 0 .35rem; font-size: 1.15rem; }
.drop-box p { margin: 0; color: var(--text-muted); font-size: .85rem; }

.vc-status.reconnecting span:first-child { color: var(--yellow); }

@media (max-width: 1100px) {
  .shell, .shell.no-members { grid-template-columns: var(--rail-w) var(--side-w) 1fr; }
  .members:not(.members-mobile-overlay) { display: none; }
  .search-results {
    position: fixed;
    top: 48px;
    right: 0;
    bottom: 0;
    z-index: 55;
    box-shadow: -8px 0 16px rgba(0,0,0,.24);
  }
}

/* Discord-mobile: one primary pane (not crushed desktop columns) */
.mobile-nav-btn {
  display: none;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-normal, #e8dcc8);
  font-size: 28px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.mobile-nav-btn:hover { background: var(--bg-hover); color: #fff; }
.mobile-nav-btn { position: relative; }
.mobile-nav-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 12px;
  background: #ed4245;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}
/* Discord-mobile home header — must override .sidebar-head height:row */
.sidebar-head.home-mobile-head {
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px;
  padding: 14px 12px 12px !important;
  cursor: default !important;
  pointer-events: auto !important;
  box-shadow: none !important;
}
.sidebar-head.home-mobile-head:hover { background: transparent !important; }
.home-mobile-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.home-mobile-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.15;
}
.home-mobile-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.home-mob-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 0;
  border-radius: 26px;
  background: rgba(255,255,255,.07);
  color: var(--text-normal, #e8dcc8);
  cursor: pointer;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.home-mob-act svg { width: 18px; height: 18px; display: block; }
.home-mob-search { width: 40px; padding: 0; }
.home-mob-friends { flex: 1; min-width: 0; }
.home-mob-plus {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--brand, #f0a030);
  color: #1a120c;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.mobile-only-bell { display: none !important; }
.qr-scan-hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  margin-bottom: 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(240,160,48,.14), rgba(0,0,0,.2));
  border: 1px solid rgba(240,160,48,.35);
}
.qr-scan-hero b { font-size: 16px; color: #fff; }
.qr-scan-hero .hint { margin: 0; }
.qr-scan-hero button { align-self: stretch; min-height: 44px; font-weight: 700; }
.settings-qr-nav {
  margin: 4px 8px 10px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(240,160,48,.22), rgba(240,160,48,.08)) !important;
  border: 1px solid rgba(240,160,48,.4) !important;
  color: #ffc46a !important;
  font-weight: 700 !important;
  min-height: 42px !important;
}

@media (max-width: 900px) {
  body.mobile-ui .mobile-only-bell,
  body.camp-android .mobile-only-bell {
    display: inline-flex !important;
  }
  /* Discord-like bottom bar: nick readable; hide mic/deaf unless in voice */
  body.mobile-ui .userpanel,
  body.camp-android .userpanel {
    gap: 8px;
    padding: 8px 10px;
  }
  body.mobile-ui .userpanel .who,
  body.camp-android .userpanel .who {
    flex: 1;
    min-width: 0;
  }
  body.mobile-ui .userpanel .who b .uname,
  body.camp-android .userpanel .who b .uname {
    max-width: none;
    font-size: 14px;
  }
  body.mobile-ui .userpanel .who b .priv-badge,
  body.mobile-ui .userpanel .who b .gem-badge,
  body.mobile-ui .userpanel .who b .boost-badge-wrap,
  body.camp-android .userpanel .who b .priv-badge,
  body.camp-android .userpanel .who b .gem-badge,
  body.camp-android .userpanel .who b .boost-badge-wrap {
    display: none !important;
  }
  body.mobile-ui .shell:not(.in-voice) .userpanel .up-ctrl,
  body.camp-android .shell:not(.in-voice) .userpanel .up-ctrl {
    display: none !important;
  }
  body.mobile-ui .userpanel .up-chev,
  body.camp-android .userpanel .up-chev {
    display: none !important;
  }
  body.mobile-ui .chan-scroll > .cat:first-child,
  body.camp-android .chan-scroll > .cat:first-child {
    /* avoid «ДРУЗЬЯ» colliding under broken header */
    margin-top: 4px;
  }
}

@media (max-width: 900px) {
  body.mobile-ui {
    overflow: hidden;
  }
  .shell.mobile-ui,
  .shell.mobile-ui.home-mode,
  .shell.mobile-ui.no-members {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "main"
      "bottom";
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
    /* iPhone «На экран Домой» (status bar поверх страницы, viewport-fit=cover):
     * шапка и панели не уезжают под часы и «чёлку»; в обычном Safari env() = 0 */
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  /* Discord-like: list pane keeps rail+channels even in home (DM list) */
  .shell.mobile-ui.home-mode[data-mobile-pane="list"],
  .shell.mobile-ui.home-mode.mobile-pane-list {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
      "rail side"
      "bottom bottom";
  }
  .shell.mobile-ui > .rail,
  .shell.mobile-ui > .sidebar {
    display: none !important;
  }
  .shell.mobile-ui > .main,
  .shell.mobile-ui > .search-results {
    grid-area: main;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }
  .shell.mobile-ui > .shell-bottom {
    grid-area: bottom;
    padding-left: 0; /* на телефоне рейла слева нет */
    background: var(--bg-sidebar);
  }
  .shell.mobile-ui > .members:not(.members-mobile-overlay) {
    display: none !important;
  }

  /* Channel / DM list pane: thin guild rail + full sidebar */
  .shell.mobile-ui[data-mobile-pane="list"],
  .shell.mobile-ui.mobile-pane-list {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "rail side"
      "bottom bottom";
  }
  .shell.mobile-ui[data-mobile-pane="list"] > .rail,
  .shell.mobile-ui.mobile-pane-list > .rail {
    display: flex !important;
    flex-direction: column;
    grid-area: rail;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 8px 0;
    gap: 8px;
    max-height: none;
  }
  .shell.mobile-ui[data-mobile-pane="list"] > .sidebar,
  .shell.mobile-ui.mobile-pane-list > .sidebar {
    display: flex !important;
    grid-area: side;
    max-height: none;
    min-height: 0;
    overflow: hidden;
  }
  .shell.mobile-ui[data-mobile-pane="list"] > .main,
  .shell.mobile-ui.mobile-pane-list > .main {
    display: none !important;
  }

  /* Chat / voice / friends pane: full-width main only */
  .shell.mobile-ui[data-mobile-pane="chat"] > .main,
  .shell.mobile-ui.mobile-pane-chat > .main {
    display: flex !important;
  }

  .mobile-nav-btn { display: inline-flex; }

  .main-head .search-box {
    max-width: 96px;
    font-size: 13px;
  }
  .main-head .topic { display: none; }

  .chan-scroll,
  .messages,
  .friends-page,
  .vstage {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  .friends-page {
    flex: 1;
    min-height: 0;
  }

  .members-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 79;
    background: rgba(0, 0, 0, 0.5);
  }
  .members.members-mobile-overlay {
    display: block !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(300px, 88vw);
    z-index: 80;
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .modal { grid-template-columns: 1fr; }
  .modal-nav { display: flex; flex-direction: column; gap: .25rem; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; max-height: min(34vh, 260px); }
  .modal-backdrop.fullscreen .settings-content {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* Auth: always stack QR under form on phone */
  .auth-shell.has-qr {
    grid-template-columns: 1fr;
  }
  .auth-qr-panel { order: -1; }

  /* ---- 1.12.20 mobile readability: larger type + tap targets ---- */
  :root {
    --user-h: 64px;
    --header-h: 52px;
    --chat-font-size: 16px;
  }
  .shell.mobile-ui > .shell-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .shell.mobile-ui > .shell-bottom .web-dl-app,
  .shell.mobile-ui > .shell-bottom .web-dl-pop { display: none !important; }
  .chan-item,
  .channel-item,
  .dm-item,
  .friend-row,
  .side .item {
    min-height: 44px;
    font-size: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .chan-scroll .cat {
    font-size: 12px;
    padding: 10px 12px 6px;
  }
  .sidebar-head {
    min-height: 52px;
    font-size: 16px;
  }
  .main-head {
    min-height: var(--header-h);
  }
  .main-head .title {
    font-size: 17px;
  }
  .msg {
    padding: 6px 12px;
  }
  .msg .avatar {
    width: 40px;
    height: 40px;
  }
  .msg-meta b {
    font-size: 15px;
  }
  .msg-body {
    font-size: 16px !important;
    line-height: 1.45;
  }
  .composer {
    min-height: 48px;
    padding: 6px 8px;
  }
  .composer textarea {
    font-size: 15px !important;
    line-height: 1.4;
    min-height: 28px;
    padding: 8px 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .composer textarea:focus {
    white-space: pre-wrap;
    overflow-y: auto;
    text-overflow: clip;
  }
  .composer textarea::placeholder {
    font-size: 13px;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.85;
  }
  .composer .send,
  .composer .attach,
  .composer button.icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
  .userpanel {
    height: var(--user-h);
    min-height: var(--user-h);
    gap: 8px;
    padding: 0 10px;
  }
  .userpanel .who b {
    font-size: 15px;
  }
  .userpanel .who .user-tag-mini,
  .userpanel .who .utag {
    font-size: 12px;
  }
  .userpanel .icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
  .userpanel .icon-btn svg {
    width: 22px;
    height: 22px;
  }
  .rail-btn {
    width: 52px;
    height: 52px;
    min-width: 52px;
  }
  .mobile-nav-btn {
    min-width: 44px;
    min-height: 44px;
    font-size: 22px;
  }
  .members.members-mobile-overlay {
    width: min(320px, 92vw);
    font-size: 15px;
  }
  .members .member-row,
  .members .member {
    min-height: 48px;
    padding: 10px 12px;
  }
  .member-name-row {
    font-size: 15px !important;
  }
  .modal-backdrop.fullscreen .settings-content,
  .modal-body,
  .auth {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overflow-y: auto;
  }
  .modal-nav button,
  .modal-nav .nav-item,
  .settings-nav button {
    min-height: 44px;
    font-size: 15px;
    padding: 10px 12px;
  }
  .modal-panel header h2 {
    font-size: 1.25rem;
  }
  .auth input,
  .auth select,
  .auth button.primary,
  .auth button[type="submit"],
  .auth .btn,
  .auth-card input,
  .auth-card button {
    min-height: 48px;
    font-size: 16px !important;
  }
  .auth-sub,
  .auth-hint,
  .auth-links {
    font-size: 15px;
  }
  .friends-page h2 {
    font-size: 1.35rem;
  }
  .friends-tabs button,
  .friends-page .tab {
    min-height: 44px;
    font-size: 15px;
    padding: 10px 14px;
  }
}

@media (max-width: 900px) {
  /* ---- Телефон: навигация к каналам/сообществам и шапка чата ----
   * С телефона было не найти список каналов: «‹» тонкая и мелкая, заголовок канала
   * схлопывался до «#▮.», поиск «Искать «Fu» обрезался краем экрана.
   * Теперь: крупная кнопка «≡» 44px, заголовок не уже 72px, инструменты без зазоров,
   * поиск — иконка-лупа, по тапу раскрывается на всю шапку. Только .shell.mobile-ui. */
  .shell.mobile-ui .main-head {
    position: relative;
    padding: 0 8px 0 6px;
    gap: 6px;
  }
  .shell.mobile-ui .mobile-nav-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin-right: 2px;
    border-radius: var(--radius-md, 10px);
    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
    color: var(--text, #e8dcc8);
    font-size: 0;
  }
  .shell.mobile-ui .mobile-nav-btn svg {
    width: 22px;
    height: 22px;
  }
  .shell.mobile-ui .main-head .title {
    min-width: 72px;
    font-size: 16px;
  }
  .shell.mobile-ui .main-head .tools {
    gap: 0;
    flex-shrink: 0;
  }
  .shell.mobile-ui .main-head .tools button {
    width: 36px;
    height: 44px;
  }
  .shell.mobile-ui .main-head .tools .search-box {
    width: 36px;
    max-width: 36px;
    height: 36px;
    padding: 0;
    margin: 0 0 0 2px;
    color: transparent;
    caret-color: transparent;
    border-radius: var(--radius-md, 10px);
    /* !important: body.theme-light input { background: … !important } иначе стирает лупу */
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949ba4' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    transition: none;
  }
  body.theme-light .shell.mobile-ui .main-head .tools .search-box {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b5248' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") !important;
  }
  .shell.mobile-ui .main-head .tools .search-box::placeholder { color: transparent; }
  .shell.mobile-ui .main-head .tools .search-box:focus {
    position: absolute;
    left: 6px;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    max-width: none;
    height: 40px;
    padding: 0 12px 0 38px;
    z-index: 3;
    color: var(--text, #e8dcc8);
    caret-color: auto;
    background-color: var(--bg-rail, var(--sf-deep, #1e1f22)) !important;
    background-position: 10px center !important;
  }
  .shell.mobile-ui .main-head .tools .search-box:focus::placeholder { color: #949ba4; }

  /* Голосовой канал в списке: тап по строке всегда = войти. Подпись статуса не перехватывает
   * тап (на десктопе клик по ней открывает редактор статуса), пустое «Выбери статус» не показываем. */
  .shell.mobile-ui .chan .chan-vc-status { pointer-events: none; }
  .shell.mobile-ui .chan .chan-vc-status.empty { display: none; }
}
@media (max-width: 480px) {
  /* Узкий телефон: закладки убираем из шапки, чтобы название канала читалось */
  .shell.mobile-ui .main-head .tools [data-bookmarks] { display: none; }
}

@media (max-width: 900px) {
  /* ---- Телефон: остальные находки осмотра мобильного вида ----
   * 1) Регистрация: .auth-shell.auth-mode-register.has-qr (три класса) перебивало мобильное
   *    «одна колонка» — форма регистрации уезжала за правый край экрана. */
  .auth-shell.has-qr,
  .auth-shell.auth-mode-register.has-qr {
    grid-template-columns: 1fr;
  }
  /* 2) Голосовой канал: заголовок в одну строку (не на две), пустой «Выбрать статус» в шапке не показываем */
  .shell.mobile-ui .main-head .title { white-space: nowrap; }
  .shell.mobile-ui .main-head .vc-status-btn.empty { display: none; }
  .shell.mobile-ui .main-head .vc-status-btn { max-width: 30%; }
  /* 3) Всплывашки закреплённых/закладок/веток — по ширине экрана, а не за левый край (были 420px от кнопки) */
  body.mobile-ui .pins-pop,
  body.mobile-ui .threads-pop {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none;
  }
  /* 4) Подвал модалки непрозрачный и поверх тела: текст просвечивал под кнопками «Отмена/Создать».
   *    У «Создать канал» тело специально overflow: visible и z-index: 2 (выпадашка категории на
   *    десктопе) — на телефоне тело должно скроллиться, а подвал быть сверху. */
  body.mobile-ui .modal-panel .modal-footer {
    position: relative;
    z-index: 3;
    background: var(--bg-sidebar);
  }
  body.mobile-ui .create-channel-modal .modal-panel { overflow: hidden; }
  body.mobile-ui .create-channel-modal .modal-body {
    overflow-y: auto;
    z-index: auto;
  }
  /* 5) Клавиатура: поле ввода не выше трети экрана; при наборе прячем «опрос» и «голосовое» —
   *    текст получает ширину, эмодзи и «отправить» остаются */
  .shell.mobile-ui .composer textarea:focus {
    max-height: 132px;
    max-height: 30dvh;
  }
  .shell.mobile-ui .composer:focus-within [data-poll],
  .shell.mobile-ui .composer:focus-within [data-voice-rec] { display: none; }
  /* 6) Тап-цели не меньше 40px: кнопки «голосовое/опрос/эмодзи» в поле ввода и
   *    «шумодав»/«отключиться» в панели голосовой связи были 31–32px */
  .shell.mobile-ui .composer .emoji-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
  .shell.mobile-ui .shell-bottom .ns-btn,
  .shell.mobile-ui .shell-bottom .vc-disc {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
}
@media (max-width: 600px) {
  /* Телефон: панель «войди через приложение на телефоне и отсканируй QR» на самом телефоне
   * не нужна и была ПЕРВОЙ — форма входа уезжала под экран */
  .auth-qr-panel { display: none; }
}

/* Legacy narrow fallback if JS class missing — still avoid 3-col crush */
@media (max-width: 760px) {
  .shell:not(.mobile-ui),
  .shell.home-mode:not(.mobile-ui),
  .shell.no-members:not(.mobile-ui) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "rail"
      "side"
      "main"
      "bottom";
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
  }
  .shell:not(.mobile-ui) > .members,
  .shell:not(.mobile-ui) > [data-members-panel] {
    display: none !important;
  }
  .shell:not(.mobile-ui) > .rail {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .5rem;
    gap: .4rem;
    touch-action: pan-x;
  }
  .shell:not(.mobile-ui) > .sidebar {
    max-height: min(36vh, 280px);
    min-height: 0;
    overflow: hidden;
  }
}

/* ---- Boot / Connecting (Discord-style + fox runner) ---- */
.boot-loader {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--sf-deep, #1e1f22);
  padding: 2rem 1.5rem 1.25rem;
  box-sizing: border-box;
  position: relative;
}
.boot-loader.boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(30, 31, 34, 0.96);
  animation: boot-fade-in var(--camp-dur-enter, .46s) var(--camp-ease, cubic-bezier(.16, 1, .3, 1));
}
@keyframes boot-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.boot-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  flex: 1;
  justify-content: center;
  width: 100%;
  max-width: 560px;
}
.boot-canvas {
  width: min(520px, 94vw);
  height: auto;
  aspect-ratio: 520 / 210;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 10px;
  border: 1px solid var(--ln-warm, #2e2824);
  background: var(--sf-app2, #0c0c0e);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .45), 0 0 24px rgba(255, 106, 26, .12);
}
.boot-logo {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto .25rem;
  border-radius: 50%;
  object-fit: contain;
  background: var(--sf-abyss, #111214);
  box-shadow: var(--ember-glow);
}
.boot-brand {
  font-family: var(--display);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  letter-spacing: .2em;
  color: var(--accent-gold);
  line-height: 1;
  margin-top: .15rem;
  text-shadow: 0 0 20px rgba(255, 106, 26, .45);
}
.boot-brand span { color: var(--accent); }
/* Kill leftover fire overlay from older Setup (injected style). */
#fv-update-overlay .fv-upd-brand,
#fv-update-overlay .fv-upd-brand::after {
  animation: none !important;
}
#fv-update-overlay .fv-upd-brand::after {
  content: none !important;
  display: none !important;
}
#fv-update-overlay .fv-upd-brand {
  font-family: var(--display);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: .2em;
  line-height: 1;
  margin: 0 0 .9rem;
  padding-bottom: 0;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: #ffb300 !important;
  -webkit-text-fill-color: #ffb300 !important;
  text-shadow: 0 0 18px rgba(255, 106, 26, .45) !important;
}
.boot-status {
  margin: 0;
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.boot-bar {
  width: min(280px, 70vw);
  height: 4px;
  background: var(--sf-warm, #2e2824);
  border-radius: 6px;
  overflow: hidden;
  opacity: .85;
}
.boot-bar i {
  display: block;
  height: 100%;
  width: 2%;
  background: var(--accent-brand);
  border-radius: 6px;
  transition: width .28s ease;
}
.boot-tips {
  width: min(420px, 92vw);
  text-align: center;
  margin-top: 2.5rem;
  min-height: 4.5rem;
}
.boot-tips-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: #949ba4;
  margin-bottom: .55rem;
  text-transform: uppercase;
}
.boot-tips-text {
  margin: 0;
  color: #dbdee1;
  font-size: .95rem;
  line-height: 1.45;
  transition: opacity .35s ease;
}
.boot-tips-text.is-fading { opacity: 0; }
.boot-footer {
  margin-top: 1.75rem;
  font-size: .8rem;
  color: #6d6f78;
  text-decoration: none;
  transition: color .15s ease;
}
.boot-footer:hover { color: #b5bac1; text-decoration: underline; }

/* Phone: compact fox scene + larger status */
@media (max-width: 900px) {
  .boot-loader {
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.1rem, env(safe-area-inset-bottom));
    gap: 0;
  }
  .boot-main {
    gap: 0.65rem;
    max-width: 100%;
  }
  .boot-canvas {
    width: min(340px, 92vw);
    aspect-ratio: 340 / 150;
    border-radius: 12px;
  }
  .boot-logo {
    width: 56px;
    height: 56px;
  }
  .boot-brand {
    font-size: 1.65rem;
    letter-spacing: 0.2em;
  }
  .boot-status {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-align: center;
    padding: 0 0.5rem;
  }
  .boot-tips {
    margin-top: 1.35rem;
    min-height: 3.5rem;
    width: min(340px, 92vw);
  }
  .boot-tips-text { font-size: 0.88rem; }
  .boot-footer { margin-top: 1.1rem; font-size: 0.75rem; }
  .boot-loader.boot-overlay .boot-tips { display: none; }
  .boot-loader.boot-overlay .boot-footer { display: none; }
}
body.camp-android .boot-canvas,
body.mobile-ui .boot-canvas {
  width: min(340px, 92vw);
  aspect-ratio: 340 / 150;
}

/* ---- Adrenaline ---- */
.rail-btn.gem { background: #2b1a22; }
.rail-btn.gem:hover, .rail-btn.gem.on { background: #c43a3a; }
.gem-badge { width: 16px; height: 16px; margin-left: 4px; vertical-align: -3px; }
.gem-badge.adr-gem { filter: drop-shadow(0 0 3px rgba(196,58,58,.75)); }
.boost-badge-wrap {
  display: inline-flex;
  margin-left: 3px;
  vertical-align: -3px;
  color: #e64a19;
  line-height: 0;
}
.boost-badge-wrap .boost-badge,
svg.boost-badge,
img.boost-badge {
  width: 14px;
  height: 14px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(230, 74, 25, .55));
}
.role-chip.boost-chip {
  color: #ff73fa;
  gap: 4px;
}
.role-chip.boost-chip svg { width: 12px; height: 12px; }
/* @ mention autocomplete above composer */
.mention-picker {
  background: var(--sf-abyss, #111214);
  border: 1px solid var(--ln-panel, #2b2d31);
  border-radius: 12px;
  margin-bottom: 6px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  padding: 4px;
  display: grid;
  gap: 2px;
}
.mention-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 6px 8px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}
.mention-pick:hover,
.mention-pick.on {
  background: var(--bg-active, var(--sf-edge3, #404249));
}
.mention-pick-av { display: grid; place-items: center; flex-shrink: 0; }
.mention-pick-role,
.mention-pick-special {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-weight: 700;
  flex-shrink: 0;
}
.mention-pick-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.mention-pick-text b {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-pick-text small {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.priv-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  font-size: 12px;
  line-height: 1;
  vertical-align: middle;
  font-weight: 700;
}
.priv-badge .priv-ico {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.priv-badge .priv-emoji {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  font-style: normal;
  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.priv-badge.owner,
.priv-badge.owner .priv-emoji,
.priv-emoji.crown {
  color: unset !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  filter: none !important;
  animation: none !important;
  font-variant-emoji: emoji;
  forced-color-adjust: none;
}
.priv-badge.mod { color: #ed4245; font-size: 13px; }
.priv-badge.role { font-size: 0; margin-left: 4px; }
.role-chip.owner-chip .role-chip-emoji {
  font-size: 13px;
  line-height: 1;
  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.utag { margin-left: 4px; padding: 0 5px; border-radius: 8px; background: #2a2d31; font-size: 10px; color: var(--text-muted); }
.uname { font-weight: 600; }
.msg-author,
.msg-author .uname,
.msg-meta [data-user],
.avatar-col,
.vu-name,
.vu-name .uname {
  cursor: pointer;
}
.vu-name {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voice-user .avatar { cursor: pointer; flex-shrink: 0; }
.user-tag, .user-tag-line .user-tag {
  font-family: ui-monospace, Consolas, monospace;
  color: #b5bac1;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
}
.user-tag-line { margin: .35rem 0; }
.user-tag-mini {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.account-tag-box {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--sf-panel, #2b2d31);
  text-align: left;
}
.account-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.account-tag-row .user-tag { font-size: 1.15rem; color: #fff; }
.adr-status-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  margin: 8px 0 12px;
  text-align: left;
  border: 1px solid var(--ln-edge, #3a3d42);
}
.adr-status-block.on {
  border-color: #c43a3a;
  background: linear-gradient(135deg, rgba(196,58,58,.18), rgba(43,45,49,.9));
}
.adr-status-block.off { background: var(--sf-panel, #2b2d31); opacity: .92; }
.adr-status-block img.dim { opacity: .35; filter: grayscale(1); }
.adr-status-block b { display: block; }
.adr-status-block span { color: var(--text-muted); font-size: 12px; }
.adr-status.on {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #f23f43;
  font-weight: 600;
  font-size: 12px;
}
.adr-status.on img { width: 14px; height: 14px; }
.adr-for { margin-top: 8px; }
.adr-for-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 12px;
  margin-top: 4px;
  cursor: pointer;
  font-size: 13px;
}
.adr-gift-wrap { display: block; margin-top: 8px; }
.adr-gift-wrap[hidden] { display: none !important; }
.adr-gift-wrap input { width: 100%; }
.adr-card { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--ln-edge, #3a3d42); border-radius: 12px; margin-bottom: 8px; text-align: left; cursor: pointer; }
.adr-card.active { border-color: #c43a3a; box-shadow: 0 0 0 1px rgba(196,58,58,.35); }
.adr-card.on { border-color: var(--accent-brand); background: rgba(230,74,25,.1); box-shadow: 0 0 12px rgba(255,106,26,.2); }
.adr-card .hint { display: block; margin-top: 4px; }
.adr-card select, .adr-card input[type="number"] { cursor: auto; }
.adr-perks { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--sf-panel, #2b2d31); text-align: left; }
.adr-perks h4 { margin: 0 0 8px; }

/* Adrenaline / Boost purchase — Discord-like cards, no stray radios */
.adr-buy-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.adr-buy-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.adr-buy-card:hover {
  border-color: rgba(230,74,25,.35);
  background: rgba(230,74,25,.06);
}
.adr-buy-card.on {
  border-color: var(--accent-brand, #e64a19);
  background: rgba(230,74,25,.12);
  box-shadow: 0 0 0 1px rgba(230,74,25,.25);
}
.adr-buy-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adr-buy-body b { font-size: 15px; }
.adr-buy-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.adr-buy-head img { flex: 0 0 auto; }
.adr-buy-head > div { min-width: 0; flex: 1; }
.adr-voice-perk {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #ffb086;
  text-align: left;
}
.adr-plans {
  display: grid;
  gap: 8px;
  margin: 8px 0 2px;
}
.adr-plan {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid var(--line-soft, var(--ln-edge2, #3f4147));
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.adr-plan:hover { border-color: rgba(230, 74, 25, 0.45); }
.adr-plan.on {
  border-color: var(--accent-brand, #e64a19);
  background: rgba(230, 74, 25, 0.12);
  box-shadow: 0 0 0 1px rgba(230, 74, 25, 0.3);
}
.adr-plan-name { font-weight: 700; }
.adr-plan-price { font-weight: 800; color: #ffb086; white-space: nowrap; }
.adr-plan-badge {
  position: absolute;
  top: -8px;
  right: 10px;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  background: #23a55a;
  border-radius: 999px;
  padding: 2px 8px;
}
.adr-seg {
  display: inline-flex;
  margin-top: 6px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  gap: 2px;
  width: fit-content;
  pointer-events: auto;
}
.adr-seg-btn {
  border: none;
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
  padding: 7px 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1.2;
  min-width: 6.5rem;
  transition: background .12s ease, color .12s ease;
}
.adr-seg-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,.08);
}
.adr-seg-btn.on {
  background: var(--accent-brand, #e64a19);
  color: #fff;
}
.adr-gift-wrap {
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.06);
}
.adr-gift-wrap[hidden] { display: none !important; }
.file-pick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.file-pick-row input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.adr-gift-wrap label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: none;
  font-weight: 500;
}
.adr-gift-wrap input {
  display: block;
  width: 100%;
  margin-top: 4px;
}
.adr-cta-boost {
  background: linear-gradient(135deg, #f47fff, #e64a19) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.adr-qty-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}
.adr-qty-btn {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--sf-deep, #1e1f22);
  color: #dbdee1;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.adr-qty-btn:hover { background: var(--sf-panel, #2b2d31); color: #fff; }
.adr-qty-wrap input[type="number"],
.adr-qty-wrap input[data-boost-qty] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  box-sizing: border-box;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
  padding-right: 10px;
}
.adr-qty-wrap input::-webkit-inner-spin-button,
.adr-qty-wrap input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.adr-qty-price {
  flex: 0 0 auto;
  pointer-events: none;
  user-select: none;
  color: #949ba4;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.9;
  min-width: 3.2rem;
  text-align: right;
}
.adr-field {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: none;
  font-weight: 500;
}
.adr-field select,
.adr-field input[type="number"] {
  display: block;
  width: 100%;
  max-width: 220px;
  margin-top: 4px;
  cursor: auto;
}
.adr-email { display: block; margin-top: 12px; }
.adr-modal-lolka .adr-buy-grid { margin-top: 6px; }
.adr-modal-lolka .adr-buy-card {
  flex-direction: column;
  gap: 0;
  padding: 16px;
}
.adr-modal-lolka .adr-buy-body { width: 100%; gap: 10px; }
.adr-modal-lolka .adr-plans { margin: 2px 0 0; }
.adr-modal-lolka .adr-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  box-sizing: border-box;
}
.adr-modal-lolka .adr-seg-btn { min-width: 0; width: 100%; }
.adr-modal-lolka .adr-email {
  margin-top: 4px;
  width: 100%;
  text-align: left;
}
.adr-modal-lolka .adr-email input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
}
.adr-modal-lolka .modal-footer {
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  gap: 8px;
  padding: 12px 16px 16px;
}
.adr-modal-lolka .modal-footer button {
  width: 100%;
  margin: 0;
  min-height: 42px;
  border-radius: 16px;
}
.adr-modal-lolka .modal-footer .ghost {
  background: rgba(255,255,255,.06);
  color: #fff;
}
.srv-overview-grid {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 240px);
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1rem;
}
@media (max-width: 820px) {
  .srv-overview-grid { grid-template-columns: 1fr; }
}
.srv-overview-form label { display: block; margin-bottom: .65rem; }
.srv-overview-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 72px;
}
.srv-preview-card {
  background: var(--sf-deep, #1e1f22);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
}
.srv-preview-banner { height: 72px; background: var(--sf-deep, #1e1f22); }
.srv-preview-body { padding: 12px 14px 14px; position: relative; }
.srv-preview-icon { margin-top: -28px; margin-bottom: 8px; }
.srv-preview-icon-img,
.srv-preview-icon img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--ln-deep, #1e1f22);
  background: var(--sf-abyss, #111214);
  display: grid;
  place-items: center;
  font-weight: 700;
}
.srv-preview-name { display: block; font-size: 16px; margin: 0 0 6px; color: #f2f3f5; }
.srv-preview-desc {
  margin: 0 0 8px;
  font-size: 12px;
  color: #b5bac1;
  line-height: 1.35;
  max-height: 3.6em;
  overflow: hidden;
}
.srv-preview-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.srv-tag {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 8px;
  background: var(--sf-panel, #2b2d31);
  color: #dbdee1;
}
.srv-icon-row {
  display: flex;
  gap: 14px;
  align-items: center;
}
.srv-icon-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: var(--sf-abyss, #111214);
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
img.srv-icon-preview {
  transform: none;
  object-fit: cover;
  padding: 0;
  background: var(--sf-abyss, #111214);
}
.srv-icon-preview.placeholder {
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  background: var(--accent-brand, #e64a19);
  transform: none;
  padding: 0;
  box-shadow: none;
}
.roles-list-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  padding: 4px 10px 8px;
}
.roles-add { margin-top: 8px; width: 100%; }
.role-hoist-tag {
  margin-left: auto;
  font-size: 11px;
  opacity: .6;
}
.role-members-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.role-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(0,0,0,.25);
  font-size: 13px;
}
.pay-qr { text-align: center; }
.pay-qr img { border-radius: 12px; background: #fff; padding: 8px; max-width: 100%; height: auto; }
.pay-box { text-align: left; }
.adr-fns-wait {
  text-align: center;
  padding: 28px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.adr-fns-spin {
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  border: 3px solid var(--line, rgba(255,255,255,.12));
  border-top-color: var(--accent-brand, #e64a19);
  border-radius: 50%;
  animation: adr-fns-spin 1s linear infinite;
}
.adr-fns-label {
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 13px;
}
.adr-fns-clock {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 36px;
  letter-spacing: .04em;
  color: var(--text);
}
.adr-fns-warn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 700;
  color: #f23f43;
  border: 2px solid rgba(242, 63, 67, .45);
  margin-bottom: 6px;
}
@keyframes adr-fns-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
body.theme-light .adr-fns-spin {
  border-color: var(--line);
  border-top-color: var(--accent-brand, #e64a19);
}
.pay-amount { margin: 0 0 12px; text-align: center; }
.pay-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.pay-method {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--ln-edge, #3a3d42);
  border-radius: 12px;
  background: var(--sf-deep, #1e1f22);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.pay-method span { color: var(--text-muted); font-size: 12px; }
.pay-method.on {
  border-color: #c43a3a;
  background: rgba(196, 58, 58, 0.12);
  box-shadow: 0 0 0 1px rgba(196, 58, 58, 0.35);
}
.pay-phone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: var(--sf-deep, #1e1f22);
  border: 1px solid var(--ln-edge, #3a3d42);
  margin: 8px 0;
}
.pay-phone {
  display: block;
  font-size: 18px;
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.boost-panel { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--bg-mod, var(--sf-panel, #2b2d31)); color: var(--text); margin: 10px 0; text-align: left; border: 1px solid var(--line-soft, transparent); }
.boost-bar { height: 8px; border-radius: 8px; background: var(--bg-input, var(--sf-deep, #1e1f22)); margin-top: 6px; overflow: hidden; }
.boost-fill { height: 100%; border-radius: 8px; background: linear-gradient(90deg, #b33939, #ff6b6b); transition: width .3s; }
.modal.narrow { width: min(480px, 96vw); }
.modal.narrow .modal-nav { display: none; }

.rail-btn.add {
  background: var(--sf-raised, #313338);
  color: #23a55a;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
}
.rail-btn.add:hover {
  background: #23a55a;
  color: #fff;
  border-radius: 22px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 8px rgba(35, 165, 90, 0.35);
}
.rail-btn.gem:hover,
.rail-btn.gem.on {
  box-shadow: 0 0 0 2px rgba(255, 200, 200, 0.75), 0 0 10px rgba(196, 58, 58, 0.35);
}
.rail-letters {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
}

/* ===== Pins ===== */
.pins-pop {
  position: fixed;
  width: 420px;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  background: var(--sf-panel, #2b2d31);
  border: 1px solid var(--ln-deep, #1e1f22);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  z-index: 90;
  overflow: hidden;
}
.pins-head {
  padding: 12px 16px;
  font-weight: 700;
  font-size: 15px;
  color: #f2f3f5;
  border-bottom: 1px solid var(--ln-deep, #1e1f22);
  background: var(--sf-deep, #1e1f22);
}
.pins-list { overflow-y: auto; padding: 8px; }
.pins-empty {
  padding: 32px 16px;
  text-align: center;
  color: #949ba4;
  font-size: 14px;
  line-height: 1.6;
}
.pins-empty span { font-size: 12px; color: #6d6f78; }
.pin-chan {
  font-size: 11px;
  color: #949ba4;
  margin: 0 0 4px;
}
.msg-bm-btn.on { color: var(--accent, #f0b429); }
.pin-card {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 10px;
  margin-bottom: 8px;
  background: var(--sf-raised, #313338);
  border: 1px solid var(--ln-edge2, #3f4147);
  border-radius: 12px;
}
.pin-card .pin-body { min-width: 0; flex: 1; }
.pin-meta { display: flex; gap: 8px; align-items: baseline; }
.pin-meta b { font-size: 14px; color: #f2f3f5; }
.pin-meta time { font-size: 11px; color: #949ba4; }
.pin-text {
  font-size: 13px;
  color: #dbdee1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.pin-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
}
.pin-card:hover .pin-actions { opacity: 1; }
.pin-jump,
.pin-unpin {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--bg-input, var(--sf-deep, #1e1f22));
  color: var(--text-normal, #dbdee1);
  border: 1px solid var(--line-soft, transparent);
  cursor: pointer;
}
.pin-unpin {
  padding: 2px 7px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-muted, #949ba4);
}
.pin-unpin:hover {
  background: rgba(242, 63, 67, 0.18);
  color: #f23f43;
  border-color: rgba(242, 63, 67, 0.35);
}
.system-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 4px 24px;
  font-size: 14px;
  color: var(--text-muted, #949ba4);
  cursor: default;
  position: relative;
}
.system-msg .sys-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--text-muted, #949ba4);
  flex-shrink: 0;
}
.system-msg .sys-icon svg { width: 16px; height: 16px; display: block; }
.system-msg .sys-body { flex: 1; min-width: 0; }
.system-msg b { color: var(--text, #f2f3f5); }
.system-msg time { font-size: 11px; margin-left: 4px; }
.system-msg:hover { background: rgba(2, 2, 2, 0.06); }
.system-msg .sys-dismiss {
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.55;
  border: 0;
  background: transparent;
  color: var(--text-muted, #949ba4);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 8px;
}
.system-msg:hover .sys-dismiss,
.system-msg .sys-dismiss:focus-visible { opacity: 1; }
.system-msg .sys-dismiss:hover {
  background: rgba(242, 63, 67, 0.16);
  color: #f23f43;
}
/* ===== Вовлечённость: приветствия и бусты (kind='system') ===== */
.engagement-msg { align-items: flex-start; }
.engagement-msg .sys-icon { margin-top: 3px; }
.eng-welcome-msg .sys-join-arrow {
  color: var(--green, #23a55a);
  font-weight: 700;
  font-size: 15px;
  line-height: 16px;
}
.eng-boost-msg .sys-icon img { display: block; }
.engagement-msg .eng-sys-line { display: block; min-width: 0; }
.eng-wave-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line, var(--ln-edge, #3a3d42));
  border-radius: 12px;
  background: var(--bg-mod, var(--sf-panel, #2b2d31));
  color: var(--text, #f2f3f5);
  font-size: 13px;
  cursor: pointer;
}
.eng-wave-btn:hover { border-color: var(--text-muted, #949ba4); }
.eng-wave-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 8px;
  background: rgba(240, 178, 50, 0.25);
}
.eng-soon-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-mod, var(--sf-panel, #2b2d31));
  border: 1px dashed var(--line, var(--ln-edge, #3a3d42));
  color: var(--text-muted, #949ba4);
  vertical-align: middle;
}
.pin-flash { animation: pinFlash 1.8s ease-out; }
@keyframes pinFlash {
  0%, 40% { background: rgba(214, 69, 58, 0.18); }
  100% { background: transparent; }
}

/* ===== Link embeds ===== */
.embed {
  display: block;
  max-width: 432px;
  margin-top: 8px;
  background: var(--sf-panel, #2b2d31);
  border-left: 4px solid var(--accent-brand);
  border-radius: 8px;
  text-decoration: none;
  overflow: hidden;
}
.embed-inner { padding: 8px 16px 16px 12px; }
.embed-site  { font-size: 12px; color: #b5bac1; margin-top: 8px; }
.embed-title { font-size: 16px; font-weight: 600; color: #00a8fc; margin-top: 4px; }
.embed:hover .embed-title { text-decoration: underline; }
.embed-desc  { font-size: 14px; line-height: 1.3; color: #dbdee1; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.embed-img   { max-width: 400px; max-height: 300px; border-radius: 8px; margin-top: 16px; display: block; }
.embed-video { max-width: 432px; margin-top: 8px; border-radius: 8px; overflow: hidden;
  aspect-ratio: 16 / 9; background: #000; }
.embed-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ===== Discord rich embeds (flags.embeds) ===== */
.discord-embed {
  display: grid;
  max-width: 520px;
  margin-top: 8px;
  background: var(--sf-panel, #2b2d31);
  border-left: 4px solid var(--accent-brand);
  border-radius: 8px;
  overflow: hidden;
}
.discord-embed-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px 12px 12px;
}
.discord-embed-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.discord-embed-top.has-thumb {
  grid-template-columns: minmax(0, 1fr) 80px;
}
.discord-embed-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.discord-embed-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #f2f3f5;
}
.discord-embed-author img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.discord-embed-title {
  font-size: 16px;
  font-weight: 600;
  color: #00a8fc;
  text-decoration: none;
  line-height: 1.25;
}
a.discord-embed-title:hover { text-decoration: underline; }
.discord-embed-desc {
  font-size: 14px;
  line-height: 1.375;
  color: #dbdee1;
  white-space: pre-wrap;
  word-break: break-word;
}
.discord-embed-desc .md-h { margin: 0.35em 0; }
.discord-embed-desc p { margin: 0; }
.discord-embed-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.discord-embed-field { min-width: 0; }
.discord-embed-field:not(.is-inline) { grid-column: 1 / -1; }
.discord-embed-field-name {
  font-size: 12px;
  font-weight: 700;
  color: #f2f3f5;
  margin-bottom: 2px;
}
.discord-embed-field-value {
  font-size: 14px;
  line-height: 1.375;
  color: #dbdee1;
  white-space: pre-wrap;
  word-break: break-word;
}
.discord-embed-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  cursor: zoom-in;
}
.discord-embed-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  cursor: zoom-in;
  align-self: start;
}
.discord-embed-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #b5bac1;
}
.discord-embed-footer img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
}
.discord-embed.boost-thanks-embed {
  width: fit-content;
  max-width: min(520px, 100%);
  border-left-color: #9b84ec;
}
.discord-embed.boost-thanks-embed .discord-embed-inner {
  padding: 8px 16px 8px 12px;
  gap: 0;
}
.discord-embed.boost-thanks-embed .discord-embed-desc {
  white-space: normal;
}
.discord-embed .mention,
.discord-embed-desc .mention {
  background: rgba(88, 101, 242, 0.3);
  color: #c9cdfb;
  border-radius: 6px;
  padding: 0 2px;
  font-weight: 500;
}
.discord-embed .mention[data-mention-user] {
  cursor: pointer;
}
.discord-embed .mention[data-mention-user]:hover {
  background: rgba(88, 101, 242, 0.45);
}
.mention-channel {
  cursor: pointer;
}
.discord-ts {
  background: var(--sf-edge2, #3f4147);
  border-radius: 6px;
  padding: 0 2px;
  color: #dbdee1;
  cursor: default;
}
/* ===== Search results ===== */
.search-results {
  width: 380px;
  min-width: 340px;
  background: var(--sf-panel, #2b2d31);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.search-results .sr-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ln-deep, #1e1f22);
}
.search-results .sr-head h3 {
  margin: 0;
  font: 600 16px var(--font);
  color: #f2f3f5;
  flex: 1;
}
.search-results .sr-close {
  background: none;
  border: none;
  color: #949ba4;
  font-size: 18px;
  cursor: pointer;
}
.search-results .sr-close:hover { color: #dbdee1; }
.search-results .sr-scroll { flex: 1; overflow-y: auto; padding-bottom: 16px; }
.search-results .sr-group {
  padding: 16px 8px 4px;
  font: 600 14px var(--font);
  color: #949ba4;
}
.search-results .sr-card {
  position: relative;
  margin: 4px 8px;
  padding: 8px;
  background: var(--sf-raised, #313338);
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}
.search-results .sr-card:hover { border-color: var(--ln-edge3, #404249); }
.search-results .sr-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.search-results .sr-meta .avatar { width: 24px; height: 24px; font-size: 11px; }
.search-results .sr-meta b { font: 500 14px var(--font); color: #f2f3f5; }
.search-results .sr-meta time { font-size: 12px; color: #949ba4; }
.search-results .sr-body {
  font-size: 14px;
  color: #dbdee1;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.search-results .sr-jump {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  padding: 2px 8px;
  background: var(--sf-panel, #2b2d31);
  border: none;
  border-radius: 6px;
  font: 500 12px var(--font);
  color: #dbdee1;
  cursor: pointer;
}
.search-results .sr-card:hover .sr-jump { display: block; }
.search-results .sr-jump:hover { background: var(--sf-edge3, #404249); }
.search-results .sr-empty {
  padding: 40px 16px;
  text-align: center;
  color: #949ba4;
  font-size: 14px;
}
mark.search-hit {
  background: rgba(214,69,58,.3);
  color: #f9c1bc;
  border-radius: 6px;
  padding: 0 1px;
}
/* убрано: правило перебивало живую подсветку и шло 2.5s против таймера 2.2s */
@keyframes msg-jump-flash {
  0%, 40% { background: rgba(214,69,58,.15); }
  100%    { background: transparent; }
}
@media (max-width: 1100px) {
  .search-results {
    position: fixed;
    top: 48px;
    right: 0;
    bottom: 0;
    z-index: 55;
    box-shadow: -8px 0 16px rgba(0,0,0,.24);
  }
}

/* ===== Channel mute ===== */
.chan.muted { color: var(--muted, #72767d); opacity: 0.6; }
.chan-mute-ico { margin-left: auto; font-size: 11px; opacity: 0.7; }

/* ===== Settings card — same shell size as game sheet ===== */
.modal-backdrop.fullscreen {
  padding: 12px;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modal-fade-in var(--camp-dur-enter, .46s) var(--camp-ease, cubic-bezier(.16, 1, .3, 1));
}
.modal-backdrop.fullscreen .modal {
  width: min(1280px, calc(100vw - 16px));
  height: min(calc(100vh - 16px), 880px);
  max-height: min(calc(100vh - 16px), 880px);
  border-radius: 20px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  display: flex;
  background: var(--bg-chat);
  overflow: hidden;
  animation: modal-scale-in var(--camp-dur-enter, .46s) var(--camp-ease, cubic-bezier(.16, 1, .3, 1));
}
.modal-backdrop.fullscreen .modal-nav {
  flex: 0 0 232px;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px 10px 20px 12px;
  overflow-y: auto;
}
.modal-backdrop.fullscreen .modal-nav > * { width: 100%; max-width: 100%; }
.modal-backdrop.fullscreen .modal-nav h3 {
  margin: 0;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}
.modal-backdrop.fullscreen .modal-nav h3:not(:first-child) {
  margin-top: 18px;
}
.modal-backdrop.fullscreen .modal-nav button {
  padding: 10px 12px;
  min-height: 38px;
  border-radius: 10px;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-muted, #b5bac1);
  background: transparent;
  text-align: left;
  box-sizing: border-box;
}
.modal-backdrop.fullscreen .modal-nav button:hover { background: var(--bg-hover); color: var(--text, #dbdee1); }
.modal-backdrop.fullscreen .modal-nav button.on    { background: var(--bg-active); color: var(--text, #fff); }
.modal-nav .nav-sep { height: 1px; background: var(--line-soft, #3b3d44); margin: 8px 10px; border: 0; }
.modal-backdrop.fullscreen .modal-panel {
  flex: 1 1 800px;
  flex-direction: row;
  background: var(--bg-chat);
  position: relative; /* крестик ESC лежит поверх, а не отдельной колонкой */
  overflow: hidden; /* scroll lives in .settings-content */
  min-height: 0;
  display: flex;
}
.modal-backdrop.fullscreen .settings-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-backdrop.fullscreen .settings-main > header.settings-panel-header {
  flex-shrink: 0;
  padding: 20px 72px 8px 32px; /* справа место под крестик ESC */
  margin: 0;
  border: 0;
  background: var(--bg-chat);
  z-index: 2;
}
.modal-backdrop.fullscreen .settings-content {
  /* Рабочее поле тянется до колонки закрытия — справа больше не пустыня */
  max-width: none;
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
  padding: 16px 20px 32px 28px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--sf-scroll, #1a1b1e) transparent;
}
.modal-backdrop.fullscreen .channel-settings-modal .settings-content > header {
  padding: 0 0 12px;
  margin: 0;
  border: 0;
  flex-shrink: 0;
}
.modal-backdrop.fullscreen .channel-settings-modal .settings-content > header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.family-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.family-actions .secondary {
  margin: 0 !important;
}
.modal-backdrop.fullscreen .settings-content::-webkit-scrollbar { width: 8px; }
.modal-backdrop.fullscreen .settings-content::-webkit-scrollbar-track { background: transparent; }
.modal-backdrop.fullscreen .settings-content::-webkit-scrollbar-thumb {
  background: var(--sf-scroll, #1a1b1e);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.modal-backdrop.fullscreen .settings-content::-webkit-scrollbar-thumb:hover {
  background: var(--sf-abyss, #111214);
  background-clip: padding-box;
}
.modal-backdrop.fullscreen .modal-nav {
  scrollbar-width: thin;
  scrollbar-color: var(--sf-scroll, #1a1b1e) transparent;
}
.modal-backdrop.fullscreen .modal-nav::-webkit-scrollbar { width: 8px; }
.modal-backdrop.fullscreen .modal-nav::-webkit-scrollbar-track { background: transparent; }
.modal-backdrop.fullscreen .modal-nav::-webkit-scrollbar-thumb {
  background: var(--sf-scroll, #1a1b1e);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.modal-backdrop.fullscreen .modal-panel header {
  padding: 0;
  border-bottom: 0;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.modal-backdrop.fullscreen .modal-panel header h2 { font-size: 20px; font-weight: 600; }
.modal-backdrop.fullscreen .modal-body {
  padding: 0 4px 0 0;
  overflow: visible;
  flex: 0 0 auto; /* grow with content; parent .settings-content scrolls */
  min-height: 0;
}
.modal-backdrop.fullscreen .modal-footer {
  background: transparent;
  padding: 20px 0 0;
  justify-content: flex-start;
  gap: 8px;
  flex-shrink: 0;
  position: static;
  margin-top: 1.25rem;
}
.modal-backdrop.fullscreen .modal-footer[hidden] {
  display: none !important;
}
.modal-backdrop.fullscreen .modal-footer.voice-live {
  display: none !important;
}
.modal-backdrop.fullscreen .modal-footer [data-save][hidden] {
  display: none !important;
}
/* Алекс: прокрутка у самого правого края, фон до края. Колонка крестика больше не
 * отнимает ширину — она поверх контента; клики проходят только по самой кнопке. */
.settings-close-col { position: absolute; top: 0; right: 0; width: 56px; padding-top: 20px; z-index: 3; pointer-events: none; }
.settings-close-col .settings-close { pointer-events: auto; }
.settings-close {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #b5bac1;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.settings-close .x-ring {
  width: 36px;
  height: 36px;
  border: 2px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}
.settings-close .x-label { font-size: 13px; font-weight: 600; }
.settings-close:hover { color: #dbdee1; }

/* Mobile sticky exit — desktop X col hidden on narrow; bar always tappable */
.settings-mobile-bar {
  display: none;
}
.settings-mobile-close {
  display: none;
}
.settings-mobile-close--inheader {
  display: none;
}

@media (max-width: 800px) {
  .modal-backdrop.fullscreen {
    padding: 0;
    display: block;
    background: var(--bg-app, var(--sf-abyss, #111214));
  }
  .modal-backdrop.fullscreen .modal,
  .modal-backdrop.fullscreen .modal.settings-modal {
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }
  .settings-mobile-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 120;
    min-height: 52px;
    padding: max(10px, env(safe-area-inset-top, 0px)) 12px 10px;
    background: var(--bg-panel, var(--sf-deep, #1e1f22));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  }
  .settings-mobile-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .settings-mobile-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 121;
    -webkit-tap-highlight-color: transparent;
  }
  .settings-mobile-close:active {
    background: rgba(255, 106, 26, 0.35);
  }
  .settings-mobile-x {
    font-size: 18px;
    line-height: 1;
  }
  .settings-mobile-close-label {
    font-size: 14px;
  }
  .settings-mobile-close--inheader {
    display: none !important; /* top bar is enough; avoid double X */
  }
  .modal-backdrop.fullscreen .modal-nav,
  .modal-backdrop.fullscreen .modal-nav[data-settings-nav] {
    flex: 0 0 auto;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 8px 10px;
    gap: 2px;
    overflow-x: hidden !important;
    overflow-y: auto;
    max-height: min(34vh, 260px);
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    border-bottom: 2px solid rgba(255, 106, 26, 0.28);
    background: rgba(12, 12, 14, 0.55);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  }
  .modal-backdrop.fullscreen .modal-panel,
  .modal-backdrop.fullscreen .settings-main {
    background: rgba(18, 18, 22, 0.42);
  }
  .modal-backdrop.fullscreen .settings-content {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
  }
  .modal-backdrop.fullscreen .modal-nav > * {
    width: 100% !important;
    white-space: normal;
  }
  .modal-backdrop.fullscreen .modal-nav h3,
  .modal-backdrop.fullscreen .modal-nav .nav-group-label {
    margin: 8px 4px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
  }
  .modal-backdrop.fullscreen .modal-nav button {
    min-height: 44px;
    text-align: left;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 15px;
  }
  .modal-backdrop.fullscreen .modal-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .modal-backdrop.fullscreen .settings-main {
    min-width: 0;
    width: 100%;
  }
  /* Title lives in .settings-mobile-bar — hide scrolling duplicate */
  .modal-backdrop.fullscreen .settings-main > header.settings-panel-header {
    display: none !important;
  }
  .modal-backdrop.fullscreen .settings-content {
    min-width: 0;
    max-width: none;
    padding: 12px 14px max(40px, env(safe-area-inset-bottom, 0px));
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  .family-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    width: 100%;
  }
  .family-actions .secondary,
  .family-actions button {
    width: 100% !important;
    margin: 0 !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .settings-close-col {
    display: none !important; /* replaced by .settings-mobile-bar */
  }

  /* Account card — no clipped «Редактировать профиль» */
  .account-card-top {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .account-card-top .ghost[data-goto-profile],
  .account-card-top > .ghost {
    margin-left: 0;
    width: 100%;
    min-height: 44px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
  }
  .account-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .account-row > .ghost {
    min-height: 40px;
  }
  .profile-edit-layout {
    grid-template-columns: 1fr;
  }
  .members-mobile-head {
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 5;
    padding: max(10px, env(safe-area-inset-top, 0px)) 12px 10px;
    background: var(--bg-panel, var(--sf-panel, #2b2d31));
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .members-mobile-head button {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
  }
}

/* 1.12.21 mobile settings exit + vertical nav */
@media (max-width: 900px) {
  body.mobile-ui .settings-mobile-bar,
  body.camp-android .settings-mobile-bar {
    display: flex;
  }
}


/* ===== Voice settings sections / switches / volume ===== */
.settings-sec {
  margin: 0 0 1.25rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.settings-sec:last-of-type { border-bottom: 0; }
.settings-sec h4,
.settings-sec-label {
  margin: 0 0 .55rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-muted, #b5bac1);
}
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
}
/* Перебиваем .modal-body label { display:grid; uppercase } — иначе тумблеры «невидимы» */
.modal-body label.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-normal, #dbdee1);
  cursor: pointer;
}
.switch-text { font-size: 14px; color: var(--text-normal, #dbdee1); }
.limiter-block { margin: 4px 0 10px; padding-left: 0; }
.limiter-block .hint { margin-top: 6px; }
.switch {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  display: inline-block;
}
.switch input {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}
.switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: #80848e;
  transition: background .15s ease;
  cursor: pointer;
}
.switch-slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: left .15s ease;
}
.switch input:checked + .switch-slider { background: #23a55a; }
.switch input:checked + .switch-slider::before { left: 19px; }

.vol-row { margin: .55rem 0 .85rem; }
.vol-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.vol-slider,
.vad-full {
  width: 100%;
  accent-color: var(--accent-brand);
  height: 6px;
  cursor: pointer;
}
.mic-test-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.mic-test-row .mic-test-meter {
  flex: 1;
  min-width: 0;
}
.vad-manual-block { margin-top: 10px; }

/* ===== Account rows / profile editor ===== */
.account-card {
  background: var(--bg-mod, var(--sf-panel, #2b2d31));
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}
.account-banner {
  height: 120px;
  background: #e64a19;
  background-size: cover;
  background-position: center;
}
.account-card-body { padding: 16px; }
.account-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.account-card-top .account-card-id { min-width: 0; flex: 1; }
.account-card-top .account-dn { font-weight: 600; font-size: 16px; color: #fff; }
.account-card-top .ghost { margin-left: auto; flex-shrink: 0; }
.account-rows { display: flex; flex-direction: column; gap: 2px; }
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0,0,0,.15);
}
.account-row .hint { display: block; font-size: 11px; text-transform: uppercase; margin-bottom: 2px; }
.account-row b { font-weight: 500; color: #fff; }

.profile-edit-layout {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 300px);
  gap: 20px;
  align-items: start;
  padding-bottom: 24px;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.profile-edit-form {
  min-width: 0;
  overflow: visible;
}
.profile-edit-form .settings-sec {
  position: relative;
  z-index: 1;
  overflow: visible;
}
.profile-edit-form .settings-sec:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
/* Adrenaline nick look — Discord-like rows, no clipped color bar / chevron junk */
.nick-look-sec {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nick-look-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
}
.nick-look-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nick-look-row input[type="color"],
.profile-edit-form input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 48px !important;
  min-width: 48px;
  max-width: 48px;
  height: 36px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  flex: 0 0 48px;
}
.nick-look-row input[type="color"]::-webkit-color-swatch-wrapper,
.profile-edit-form input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.nick-look-row input[type="color"]::-webkit-color-swatch,
.profile-edit-form input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}
.nick-look-field {
  display: grid !important;
  gap: .35rem;
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text-muted);
}
.nick-look-field .hint-inline {
  text-transform: none;
  font-weight: 400;
  font-size: .7rem;
  opacity: .75;
}
.nick-look-field input[type="text"],
.nick-look-field input:not([type="color"]) {
  width: 100%;
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0;
}
/* ── Палитра цвета ника: 8 готовых цветов всем + «мультиколор» по Adrenaline ──
   Плитки те же, что у баннера сообщества (.banner-color-grid/.bc-tile) —
   тут только различия: чуть ниже плитка и замок на девятой без подписки. */
.nick-color-grid { margin-top: 2px; }
.nick-color-grid .nc-tile { height: 40px; }
.nc-tile.nc-custom.locked { cursor: pointer; }
.nc-tile.nc-custom.locked .nc-lock { opacity: .95; }
.nc-tile.nc-custom.locked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(0, 0, 0, .38);
  pointer-events: none;
}
.nc-locked-hint { margin: 0; }
.nick-custom-panel {
  display: grid;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-mod, rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .08);
}
.nick-custom-panel[hidden] { display: none !important; }
.nick-custom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nick-grad-pair { display: flex; align-items: center; gap: 8px; }
.nick-look-reset { align-self: flex-start; }
.nick-look-reset[hidden] { display: none !important; }

/* Hide legacy scroll-hint chevron (was clipping bottom of profile form) */
.modal-backdrop.fullscreen .scroll-hint { display: none !important; }
@media (max-width: 900px) {
  .profile-edit-layout { grid-template-columns: 1fr; }
}
.profile-edit-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 72px;
}
.profile-preview-card {
  background: var(--bg-mod, var(--sf-panel, #2b2d31));
  border-radius: 12px;
  overflow: hidden;
  position: sticky;
  top: 12px;
}
.pp-banner {
  height: 120px;
  background: linear-gradient(135deg, #3a1a0a, #e64a19 55%, #ffb300);
  background-size: cover;
  background-position: center;
}

/* Banner crop modal (profile) */
.banner-crop-bd {
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
}
.banner-crop-modal {
  width: min(560px, calc(100vw - 24px));
  background: var(--bg-mod, var(--sf-panel, #2b2d31));
  border-radius: 20px;
  padding: 16px 18px 18px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
.banner-crop-modal h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}
.banner-crop-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 2.5 / 1;
  margin: 12px 0;
  overflow: hidden;
  border-radius: 12px;
  background: #111;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.banner-crop-viewport:active { cursor: grabbing; }
.banner-crop-viewport img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  pointer-events: none;
  transform-origin: center center;
}
.banner-crop-tools {
  margin-bottom: 12px;
}
.banner-crop-tools label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.banner-crop-tools input[type="range"] { flex: 1; }
.banner-crop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.pp-avatar-wrap {
  position: relative;
  margin: -40px 16px 0;
  width: 72px;
  height: 72px;
  z-index: 2;
  overflow: visible;
}
.pp-avatar {
  margin: 0;
  width: 72px;
  height: 72px;
  border: 6px solid var(--bg-mod, var(--ln-panel, #2b2d31));
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
}
.pp-avatar .av-stack,
.pp-avatar .avatar { width: 100%; height: 100%; display: block; }
.pp-avatar .av-stack .avatar { width: 100%; height: 100%; }
.pp-avatar .game-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  border: 2px solid var(--bg-sidebar, var(--ln-side2, #141416));
  object-fit: contain;
  background: var(--sf-app2, #0c0c0e);
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
  image-rendering: auto;
}
.pp-status-bubble {
  position: absolute;
  left: calc(100% + 8px);
  top: auto;
  bottom: 4px;
  max-width: 25ch;
  padding: 5px 9px;
  background: var(--sf-abyss, #111214);
  border: 1px solid var(--ln-edge2, #3f4147);
  border-radius: 16px;
  color: #dbdee1;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: visible;
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
  z-index: 3;
}
.pp-status-bubble .status-bubble-text {
  display: block;
  max-width: 25ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-status-bubble .status-bubble-tail {
  position: absolute;
  left: -5px;
  top: auto;
  bottom: 10px;
  width: 10px;
  height: 10px;
  background: var(--sf-abyss, #111214);
  border-left: 1px solid var(--ln-edge2, #3f4147);
  border-bottom: 1px solid var(--ln-edge2, #3f4147);
  transform: rotate(45deg);
}
.pp-body { padding: 6px 16px 16px; }
.pp-nick { font-size: 18px; font-weight: 700; line-height: 1.25; }
.pp-tag { font-size: 13px; color: var(--text-muted); margin: 2px 0 8px; }

/* ===== Adrenaline showcase ===== */
.adr-modal { width: min(560px, 100%) !important; }
.adr-showcase { margin-bottom: 14px; }
.adr-showcase-h {
  margin: 12px 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
}
.adr-feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.adr-feat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.adr-feat:hover {
  transform: translateY(-1px);
  border-color: rgba(196,58,58,.45);
  background: rgba(196,58,58,.08);
}
.adr-feat b { font-size: 13px; color: #fff; }
.adr-feat > span:not(.adr-feat-ico) { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.adr-feat-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 2px;
  color: #f2a4a4;
  flex-shrink: 0;
}
.adr-feat-ico img,
.adr-feat-svg {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}
.adr-feat:hover .adr-feat-ico { color: #ffb4b4; }
.adr-boost-note { margin: 0 0 8px; }
.adr-boost-table {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
  font-size: 12px;
  margin-bottom: 12px;
}
.adr-boost-row {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, .7fr);
  gap: 4px;
  padding: 8px 10px;
  border-top: 1px solid rgba(255,255,255,.05);
  align-items: center;
}
.adr-boost-row:first-child { border-top: 0; }
.adr-boost-row.head {
  background: rgba(0,0,0,.25);
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .04em;
}
.adr-boost-row span:first-child { color: var(--text-normal); }
.adr-card { transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.adr-card:hover { transform: translateY(-1px); }

/* ===== Role permissions ===== */
.perm-list {
  margin: 4px 0 12px;
  border-left: 2px solid var(--bg-tertiary, var(--ln-deep2, #202225));
  padding-left: 12px;
}
.perm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.perm-group-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin: 14px 0 6px;
}
.perm-group-title:first-child { margin-top: 0; }
.perm-name { font-size: 14px; font-weight: 500; }
.perm-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pswitch {
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: 20px;
  background: #80848e;
  border: none;
  padding: 0;
  position: relative;
  cursor: pointer;
  transition: background .15s ease;
}
.pswitch.on { background: #23a55a; }
.pswitch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: left .15s ease;
}
.pswitch.on .pswitch-knob { left: 19px; }

/* ===== Roles editor (server settings) ===== */
.roles-editor {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  min-height: 360px;
}
.roles-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid rgba(255,255,255,.06);
  padding-right: 12px;
  max-height: 60vh;
  overflow-y: auto;
}
.role-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.role-pick i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.role-pick:hover { background: var(--bg-hover); color: var(--text); }
.role-pick.on { background: var(--bg-active); color: #fff; }
.roles-detail { min-width: 0; }
.role-detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.danger-text { color: #f23f43 !important; }
.perm-list.flat {
  border-left: none;
  padding-left: 0;
  margin: 0;
}
/* Channel settings = fullscreen modal-full (same shell as server/user settings) */
.channel-settings-modal {
  width: 100% !important;
  max-width: none !important;
}
.channel-settings-body {
  display: flex !important;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 100%;
  padding: 0 !important;
  overflow: visible !important;
}
.channel-settings-body .settings-sec {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
}
.channel-settings-body .settings-sec h4 {
  margin: 0 0 .85rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.channel-settings-body .cs-field {
  display: grid;
  gap: .4rem;
  margin-bottom: 1rem;
  width: 100%;
}
.channel-settings-body .cs-field:last-child { margin-bottom: 0; }
.channel-settings-body .cs-label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.channel-settings-body input[type="text"],
.channel-settings-body input[type="number"],
.channel-settings-body input:not([type]),
.channel-settings-body select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--sf-deep, #1e1f22);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  padding: .65rem .75rem;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.channel-settings-body input:focus,
.channel-settings-body select:focus {
  outline: none;
  border-color: rgba(255, 106, 26, .55);
  box-shadow: 0 0 0 1px rgba(255, 106, 26, .25);
}
.channel-settings-body .cs-bitrate-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}
.channel-settings-body .cs-bitrate-val {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.channel-settings-body .cs-range {
  width: 100%;
  margin: .15rem 0 0;
  accent-color: var(--accent-brand);
  height: 1.4rem;
}
.channel-settings-body .cs-range-scale {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: -.1rem;
}
.channel-settings-body .hint,
.channel-settings-body .cs-hint-block {
  margin: .2rem 0 0;
  font-size: .84rem;
  line-height: 1.4;
  color: var(--text-muted);
  text-transform: none;
  font-weight: 400;
}
.channel-settings-body .cs-danger-zone {
  margin-top: 0;
  padding: 1rem;
  border: 1px solid rgba(242, 63, 67, .35);
  border-radius: 12px;
  background: rgba(242, 63, 67, .06);
}
.channel-settings-body .ghost-danger {
  background: transparent;
  border: 1px solid rgba(242, 63, 67, .55);
  color: #f23f43;
  width: auto;
  min-width: 180px;
  padding: .6rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  margin-top: .75rem;
}
.channel-settings-body .ghost-danger:hover {
  background: rgba(242, 63, 67, .14);
}
.modal-backdrop.fullscreen .channel-settings-footer {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center;
  gap: .65rem;
  width: 100%;
  margin-top: 1.5rem;
  padding: 1rem 0 0 !important;
  border-top: 1px solid rgba(255,255,255,.08);
  background: transparent !important;
}
.channel-settings-footer[hidden] { display: none !important; }
.channel-settings-footer .primary {
  background: var(--accent-brand);
  color: #fff;
  font-weight: 600;
  padding: .55rem 1.15rem;
  border-radius: 8px;
  border: 0;
  box-shadow: var(--ember-glow);
}
.channel-settings-footer .primary:hover { background: var(--accent-brand-hover); }
.channel-settings-footer .ghost {
  background: transparent;
  color: var(--text);
  padding: .55rem 1rem;
  border-radius: 8px;
}
@media (max-width: 720px) {
  .roles-editor { grid-template-columns: 1fr; }
  .roles-list {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding-right: 0;
    padding-bottom: 10px;
    max-height: 160px;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ===== Create channel: category hint + select z-index ===== */
.create-channel-modal .modal-panel { overflow: visible; }
.create-channel-modal .modal-body { overflow: visible; position: relative; z-index: 2; }
.create-channel-modal .modal-footer { position: relative; z-index: 1; }
.create-channel-modal .cat-label { display: grid; gap: .35rem; }
.create-channel-modal .cat-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: .78rem;
  color: var(--text-muted);
  margin: 0;
}
.create-channel-modal .cat-select {
  position: relative;
  z-index: 5;
}

/* ===== 1.10.6: rubies modal, settings extras, server banner ===== */
.modal-backdrop.modal-full,
.modal-backdrop.fullscreen.modal-full {
  /* alias — same as .fullscreen */
}
.rubies-modal .modal-body { max-height: min(70vh, 640px); }
.rubies-hero {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(244,127,255,.12), rgba(43,45,49,.95));
  border: 1px solid rgba(244,127,255,.25);
  text-align: left;
}
.rubies-hero b { display: block; font-size: 1.05rem; }
.rubies-hero .hint { margin: 2px 0 0; }
.keybind-list { display: grid; gap: 8px; margin: 8px 0 16px; }
.keybind-list-disabled { opacity: 0.72; }
.keybind-list-disabled .kbd[data-rebind] { cursor: not-allowed; }
.keybind-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--sf-panel, #2b2d31);
  text-align: left;
}
.keybind-row b { display: block; font-size: 14px; }
.keybind-row .hint { margin: 2px 0 0; }
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--sf-deep, #1e1f22);
  border: 1px solid var(--ln-edge, #3a3d42);
  box-shadow: inset 0 -2px 0 #111;
  font: 600 12px ui-monospace, Consolas, monospace;
  color: #dbdee1;
}
.kbd.recording { border-color: var(--accent-brand); color: #ffb300; }
.settings-soon {
  padding: 24px 16px;
  border-radius: 12px;
  background: var(--bg-mod, var(--sf-panel, #2b2d31));
  color: var(--text);
  text-align: left;
  border: 1px dashed var(--line, var(--ln-edge, #3a3d42));
}
.settings-soon h4 { margin: 0 0 8px; }
.invite-box {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: var(--bg-mod, var(--sf-panel, #2b2d31));
  color: var(--text);
  text-align: left;
  border: 1px solid var(--line-soft, transparent);
}
.invite-box .invite-code,
.invite-box .invite-link {
  font: 600 .95rem ui-monospace, Consolas, monospace;
  letter-spacing: .02em;
  color: var(--text, #fff);
  word-break: break-all;
  user-select: all;
}
.invite-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.invite-list { display: grid; gap: 8px; margin-top: 8px; }
.invite-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-input, var(--sf-deep, #1e1f22));
  color: var(--text);
  text-align: left;
}
.invite-row .invite-link { font-size: .85rem; color: var(--text, #dbdee1); }
.invite-row-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.invite-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.srv-banner-preview {
  width: 100%;
  max-width: 420px;
  height: 120px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--sf-deep, #1e1f22);
  display: block;
  margin-bottom: 8px;
}
.srv-banner-preview.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
}
.appearance-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.appearance-cards.theme-cards {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.appearance-card {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--ln-edge, #3a3d42);
  background: var(--sf-panel, #2b2d31);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 500;
  width: 100%;
}
.appearance-card.on {
  border-color: var(--accent-brand);
  box-shadow: 0 0 0 1px rgba(230,74,25,.35);
}
.appearance-card b { display: block; margin: 0; font-size: 15px; }
.appearance-card .hint { margin: 0; }
.dens-preview {
  background: #1a1b1e;
  border: 1px solid #3a3d42;
  border-radius: 10px;
  padding: 8px;
  display: grid;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.dens-preview-compact {
  gap: 2px;
  padding: 6px;
}
.dens-prev-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.dens-preview-compact .dens-prev-row { gap: 5px; }
.dens-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(145deg, #e64a19, #ffb300);
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.dens-preview-compact .dens-av {
  width: 16px;
  height: 16px;
}
.dens-lines {
  flex: 1 1 auto;
  min-width: 48px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.dens-preview-compact .dens-lines { gap: 2px; }
.dens-lines .dens-bar,
.dens-lines i {
  display: block !important;
  height: 7px !important;
  border-radius: 6px;
  background: var(--sf-btn, #4e5058) !important;
  width: 88% !important;
  min-height: 4px;
  flex: 0 0 auto;
  opacity: 1 !important;
  visibility: visible !important;
}
.dens-lines .dens-bar.short,
.dens-lines i.short {
  width: 55% !important;
  height: 5px !important;
  background: var(--sf-edge, #3a3d42) !important;
}
.dens-preview-compact .dens-lines .dens-bar,
.dens-preview-compact .dens-lines i { height: 4px !important; }
.dens-preview-compact .dens-lines .dens-bar.short,
.dens-preview-compact .dens-lines i.short { height: 3px !important; width: 42% !important; }
.nav-group-label {
  margin: 10px 0 4px;
  padding: 6px 10px 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #949ba4;
}


/* camp-11042 */
body.density-cozy .member, html[data-density="cozy"] .member {
  min-height: 52px !important; padding: 10px 10px !important; gap: 12px !important;
}
body.density-cozy .member .av-wrap, body.density-cozy .member .av-wrap .avatar.sm,
html[data-density="cozy"] .member .av-wrap, html[data-density="cozy"] .member .av-wrap .avatar.sm {
  width: 40px !important; height: 40px !important;
}
body.density-cozy .chan, html[data-density="cozy"] .chan {
  padding: 0.55rem 0.65rem !important; font-size: 1rem !important;
}
/* Discord-like message grouping (kill old sparse !important) */
body.density-cozy .msg:not(.grouped), html[data-density="cozy"] .msg:not(.grouped) {
  margin-top: var(--msg-group-gap, 1.0625rem) !important; padding-top: 0.25rem !important; padding-bottom: 0.125rem !important;
}
body.density-cozy .msg.grouped, html[data-density="cozy"] .msg.grouped {
  margin-top: 0 !important; padding-top: 0.0625rem !important; padding-bottom: 0.0625rem !important;
}
body.density-cozy .msg.grouped .avatar-col .avatar,
html[data-density="cozy"] .msg.grouped .avatar-col .avatar {
  display: none !important;
}
body.density-compact .member, html[data-density="compact"] .member {
  min-height: 24px !important; padding: 0 6px !important; gap: 6px !important;
}
body.density-compact .member .av-wrap, body.density-compact .member .av-wrap .avatar.sm,
html[data-density="compact"] .member .av-wrap, html[data-density="compact"] .member .av-wrap .avatar.sm {
  width: 20px !important; height: 20px !important;
}
body.density-compact .chan, html[data-density="compact"] .chan {
  padding: 0.08rem 0.4rem !important; font-size: 0.84rem !important;
}
body.density-compact .msg:not(.grouped), html[data-density="compact"] .msg:not(.grouped) {
  margin-top: 0.75rem !important; padding-top: 0.18rem !important; padding-bottom: 0.06rem !important;
}
body.density-compact .msg.grouped, html[data-density="compact"] .msg.grouped {
  margin-top: 0 !important; padding-top: 0.02rem !important; padding-bottom: 0.02rem !important;
}
body.density-compact .msg.grouped .avatar-col .avatar,
html[data-density="compact"] .msg.grouped .avatar-col .avatar {
  display: none !important;
}
html.theme-light,
body.theme-light {
  color-scheme: light;
  --bg-app:#f4f0ea; --bg-rail:#ebe4da; --bg-sidebar:#f7f3ee; --bg-chat:#fffaf4; --bg-mod:#fff;
  --skel:#e4d8cc;
  --bg-input:#f0e8de; --bg-hover:#ebe3d8; --bg-active:#e2d6c6; --bg-user:#efe7dc; --bg-accent:#f0dcc8;
  --bg-floating:#fff; --line:#ddd2c4; --line-soft:#e5dbcf;
  --text:#1a1410; --text-normal:#2a221c; --text-muted:#6e6258; --text-link:#c2410c;
  --interactive:#5c5046; --interactive-hover:#2a221c; --interactive-active:#1a1410;
  --scrollbar-thumb:#c9bdb0; --scrollbar-auto-thumb:#b9ada0; --scrollbar-auto-track:#efe7dc;
  color:var(--text); background:var(--bg-app);
}
/* High-contrast must not force cream-on-cream when light theme is on */
body.theme-light.a11y-high-contrast,
html.theme-light body.a11y-high-contrast {
  --text: #1a1410;
  --text-normal: #1a1410;
  --text-muted: #5c5046;
  --bg-app: #f4f0ea;
  --bg-sidebar: #f7f3ee;
  --bg-hover: #ebe3d8;
  --line: #ddd2c4;
}
html.theme-dark,
body.theme-dark { color-scheme: dark; }
body.theme-light .auth {
  background: radial-gradient(900px 500px at 15% 0%, rgba(214,69,58,.12), transparent 55%),
    linear-gradient(160deg, #f7f1e8 0%, #efe6da 60%, #e8dfd2 100%);
}
body.theme-light #app,
body.theme-light .shell,
body.theme-light .shell-bottom { background: var(--bg-app) !important; color: var(--text) !important; }
body.theme-light .rail { background: var(--bg-rail) !important; color: var(--text) !important; }
body.theme-light .sidebar,
body.theme-light .members,
body.theme-light .userpanel { background: var(--bg-sidebar) !important; color: var(--text) !important; border-color: var(--line); }
body.theme-light .main,
body.theme-light .friends-page,
body.theme-light .friends-main { background: var(--bg-chat) !important; color: var(--text-normal) !important; }
body.theme-light .modal-backdrop.fullscreen .modal,
body.theme-light .modal-backdrop.fullscreen .modal-panel,
body.theme-light .modal-backdrop.fullscreen .settings-main,
body.theme-light .modal-backdrop.fullscreen .settings-main > header.settings-panel-header,
body.theme-light .modal-backdrop.fullscreen .settings-content {
  background: var(--bg-chat) !important;
  color: var(--text) !important;
}
body.theme-light .modal-nav,
body.theme-light .modal-backdrop.fullscreen .modal-nav {
  background: var(--bg-sidebar) !important;
  color: var(--text) !important;
  border-right: 1px solid var(--line);
}
body.theme-light .members .sec { color: var(--text-muted) !important; }
body.theme-light .member { color: var(--text-muted) !important; }
body.theme-light .member:hover { background: var(--bg-hover) !important; }
body.theme-light .member:hover .member-name-row { color: var(--text) !important; }
body.theme-light .member .status-dot { --dot-ring: var(--bg-sidebar); }
body.theme-light .member:hover .status-dot { --dot-ring: var(--bg-hover); }
body.theme-light .chan { color: var(--text-muted) !important; }
body.theme-light .chan:hover { background: var(--bg-hover); color: var(--text) !important; }
body.theme-light .chan.on { background: var(--bg-active); color: var(--text) !important; }
body.theme-light .chan.unread { color: var(--text) !important; }
body.theme-light .voice-user { color: var(--text) !important; }
body.theme-light .voice-user:hover { background: var(--bg-hover) !important; }
body.theme-light .msg:hover { background: rgba(0,0,0,.04); }
body.theme-light .msg,
body.theme-light .msg .msg-body,
body.theme-light .msg-body,
body.theme-light .msg-text,
body.theme-light .msg-author,
body.theme-light .msg-meta,
body.theme-light .msg-meta b,
body.theme-light .messages,
body.theme-light .main-head .title,
body.theme-light .main-head .topic,
body.theme-light .sidebar-head,
body.theme-light .friends-page h2,
body.theme-light .settings-panel-header h2,
body.theme-light .modal-panel header h2,
body.theme-light .modal-backdrop.fullscreen .channel-settings-modal .settings-content > header h2 {
  color: var(--text-normal) !important;
}
body.theme-light .msg-meta time,
body.theme-light .msg-meta .edited { color: var(--text-muted) !important; }
body.theme-light .composer,
body.theme-light .composer textarea,
body.theme-light input,
body.theme-light select,
body.theme-light textarea,
body.theme-light .settings-content select,
body.theme-light .settings-content input:not([type="color"]) {
  background: var(--bg-input) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body.theme-light .modal-nav button,
body.theme-light .modal-backdrop.fullscreen .modal-nav button,
body.theme-light .modal-nav h3 { color: var(--text-muted) !important; }
body.theme-light .modal-nav button.on,
body.theme-light .modal-nav button:hover,
body.theme-light .modal-backdrop.fullscreen .modal-nav button.on,
body.theme-light .modal-backdrop.fullscreen .modal-nav button:hover { color: var(--text) !important; background: var(--bg-hover) !important; }
body.theme-light .modal-panel header { border-bottom-color: var(--line); }
body.theme-light .modal-backdrop:not(.fullscreen) { background: rgba(40, 30, 20, 0.45); }
body.theme-light .modal { background: var(--bg-mod); color: var(--text); }
body.theme-light .appearance-card {
  background:#f7f3ee !important;
  border-color:#d4c8ba !important;
  color:#1a1410 !important;
}
body.theme-light .appearance-card .hint { color: var(--text-muted) !important; }
body.theme-light .appearance-card.on { border-color: var(--accent-brand) !important; box-shadow: 0 0 0 1px var(--accent-brand); }
body.theme-light .hint,
body.theme-light .settings-label,
body.theme-light .settings-sec,
body.theme-light .settings-sec label,
body.theme-light .switch-row,
body.theme-light .keybind-row,
body.theme-light .keybind-row b { color: var(--text) !important; }
body.theme-light .settings-sec h4 { color: var(--text) !important; }
body.theme-light .settings-content { color: var(--text) !important; }
body.theme-light .settings-content > .hint,
body.theme-light .settings-content .settings-sec > .hint,
body.theme-light .settings-label { color: var(--text-muted) !important; }
body.theme-light .settings-content h2,
body.theme-light .settings-content h3,
body.theme-light .settings-content h4,
body.theme-light .settings-content b { color: var(--text) !important; }
body.theme-light .invite-box,
body.theme-light .invite-box p,
body.theme-light .invite-box .hint,
body.theme-light .invite-box span,
body.theme-light .invite-custom-field,
body.theme-light .boost-panel,
body.theme-light .boost-panel .hint,
body.theme-light .settings-soon,
body.theme-light .settings-soon .hint {
  color: var(--text) !important;
}
body.theme-light .invite-box .hint,
body.theme-light .boost-panel .hint,
body.theme-light .settings-soon .hint { color: var(--text-muted) !important; }
body.theme-light .userpanel .who:hover { background: rgba(0,0,0,.05); }
body.theme-light .userpanel .who b,
body.theme-light .userpanel .who span { color: var(--text) !important; }
body.theme-light .titlebar-drag { background: var(--bg-app) !important; border-bottom-color: var(--line); }
body.theme-light .titlebar-btn { color: var(--text-muted); }
body.theme-light .titlebar-btn:hover { background: rgba(0,0,0,.08); color: var(--text); }
body.theme-light .rail-btn { color: var(--text-muted); }
body.theme-light .home-tabs button { color: var(--text-muted); }
body.theme-light .home-tabs button.on { background: var(--bg-active); color: var(--text); }
body.theme-light .friend-row { color: var(--text); }
body.theme-light .friend-row:hover { background: var(--bg-hover); }
body.theme-light .msg-actions {
  background: var(--bg-floating);
  border-color: var(--line);
  color: var(--text-muted);
}
body.theme-light .msg-actions button { color: var(--text-muted); }
body.theme-light .msg-actions button:hover { background: var(--bg-hover); color: var(--text); }
body.theme-light .pins-pop,
body.theme-light .ctx-menu {
  background: var(--bg-floating) !important;
  color: var(--text) !important;
  border-color: var(--line);
}
body.theme-light .ctx-menu button { color: var(--text) !important; }
body.theme-light .system-msg:hover { background: rgba(0,0,0,.04); }
body.theme-light .kbd { color: var(--text) !important; background: var(--bg-input) !important; }
body.theme-light button.primary,
body.theme-light .vjoin,
body.theme-light .vu-live-badge { color: #fff !important; }
body.theme-light * {
  scrollbar-color: #c9bdb0 transparent;
}
body.theme-light ::-webkit-scrollbar-thumb {
  background: #c9bdb0;
}
body.theme-light ::-webkit-scrollbar-thumb:hover {
  background: #b9ada0;
}
body.theme-light .chan-scroll,
body.theme-light .messages,
body.theme-light .settings-content,
body.theme-light .modal-backdrop.fullscreen .settings-content {
  scrollbar-color: #c9bdb0 transparent !important;
}
.adr-feat-aa {
  background: linear-gradient(90deg, #ffb300, #e64a19);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1.1rem;
}
.adr-settings-perks { margin-top: 8px; }
.adr-settings-perks h4 { margin-bottom: 10px; }
.theme-swatch { height:52px; border-radius:10px; border:1px solid rgba(0,0,0,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.theme-swatch-dark {
  background:
    linear-gradient(135deg, var(--sf-app2, #0c0c0e) 0%, var(--sf-chat2, #1a1a1d) 55%, #e64a19 100%);
}
.theme-swatch-light {
  background:
    linear-gradient(135deg, #fffaf4 0%, #f4f0ea 45%, #ffb300 100%);
  border-color: #d4c8ba;
}
body.theme-light .theme-swatch-dark { border-color: #2a221c; }
body.theme-light .theme-swatch-light { border-color: var(--accent-brand); }

/* Mini shell previews — always show real light vs dark (not empty boxes) */
.theme-preview {
  display: grid;
  grid-template-columns: 10px 22px 1fr;
  gap: 3px;
  height: 56px;
  min-height: 56px;
  width: 100%;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.2);
  padding: 5px;
  box-sizing: border-box;
}
.theme-preview .tp-rail,
.theme-preview .tp-side,
.theme-preview .tp-main {
  display: block;
  border-radius: 6px;
  min-height: 100%;
}
.theme-preview-dark {
  background: #0c0c0e;
  border-color: #3a3028;
}
.theme-preview-dark .tp-rail { background: #0a0a0c; }
.theme-preview-dark .tp-side { background: #141416; }
.theme-preview-dark .tp-main {
  background: linear-gradient(160deg, #1a1a1d 40%, #3a2418 100%);
  box-shadow: inset 0 0 0 1px rgba(230,74,25,.35);
}
.theme-preview-light {
  background: #efe7dc;
  border-color: #d4c8ba;
}
.theme-preview-light .tp-rail { background: #ebe4da; }
.theme-preview-light .tp-side { background: #f7f3ee; }
.theme-preview-light .tp-main {
  background: linear-gradient(160deg, #fffaf4 35%, #ffe0a8 100%);
  box-shadow: inset 0 0 0 1px rgba(255,179,0,.45);
}
/* Steam-like QR login confirm (mobile) */
.qr-confirm-modal {
  width: min(420px, 94vw) !important;
  max-height: min(92vh, 720px);
  grid-template-columns: 1fr !important;
  background: #1b1b1f !important;
  overflow: auto;
}
.qr-confirm-map {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #0e0e12;
  overflow: hidden;
}
.qr-confirm-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(.15) contrast(1.05);
}
.qr-confirm-map-fallback {
  height: 100%;
  display: grid;
  place-items: center;
  color: #9a8f82;
  font-size: 14px;
  padding: 16px;
  text-align: center;
}
.qr-confirm-card {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qr-confirm-lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: #e8dcc8;
}
.qr-confirm-meta {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #121216;
  border: 1px solid rgba(255,255,255,.06);
}
.qr-confirm-meta li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 4px 0;
  color: #9a8f82;
}
.qr-confirm-meta b { color: #e8dcc8; font-weight: 600; text-align: right; }
.qr-confirm-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #c4b8a8;
  cursor: pointer;
  user-select: none;
}
.qr-confirm-ask {
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 700;
  color: #fff3e0;
}
.qr-confirm-go {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--accent-brand, #e64a19);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.qr-confirm-go:hover { background: var(--accent-brand-hover, #ff6a1a); }
.qr-confirm-go:disabled { opacity: .6; cursor: wait; }
.qr-confirm-cancel { width: 100%; min-height: 40px; }

.notify-toasts {
  position: fixed; right: 16px; bottom: 56px; z-index: 12000;
  display: flex; flex-direction: column; gap: 10px; width: min(340px, calc(100vw - 24px));
  pointer-events: none;
}
body.electron .notify-toasts { bottom: 64px; }
.notify-toast {
  pointer-events: auto; display: flex; gap: 10px; align-items: flex-start;
  text-align: left; width: 100%; padding: 12px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06); background: var(--sf-deep, #1e1f22);
  color: #dbdee1; box-shadow: 0 12px 32px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(12px); transition: .18s ease;
  cursor: pointer; font: inherit;
}
.notify-toast.in { opacity: 1; transform: none; }
.notify-toast.out { opacity: 0; transform: translateY(8px); }
.notify-toast-av { flex-shrink: 0; }
.notify-toast-av .avatar { width: 40px; height: 40px; flex-shrink: 0; overflow: hidden; }
.notify-toast-av .avatar .avatar-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.notify-toast-body { min-width: 0; flex: 1; }
.notify-toast-top { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:#b5bac1; }
.notify-toast-top b { color:#f2f3f5; font-size:14px; }
.notify-toast-text { margin-top:4px; font-size:13px; color:#dbdee1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.voice-overlay {
  position: fixed; top: 48px; left: 16px; z-index: 11000;
  min-width: 160px; max-width: 240px; padding: 8px;
  background: rgba(0,0,0,.55); border-radius: 12px; backdrop-filter: blur(6px);
  pointer-events: none;
}
body.electron .voice-overlay { top: 44px; }
.voice-overlay-row { display:flex; align-items:center; gap:8px; padding:4px; color:#fff; font-size:13px; font-weight:600; }
.voice-overlay-row .avatar { width:24px; height:24px; }
.voice-overlay-idle { color:rgba(255,255,255,.55); font-size:12px; padding:4px 6px; }

/* ---- Игровой оверлей: виджет на классах .ovl-* (превью в настройках = вид в окне оверлея) ---- */
.ovl-preview {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-height: 96px; padding: 14px; margin: 0 0 12px; border-radius: 16px;
  /* тёмный «экран игры», чтобы плашки читались как поверх окна */
  background: linear-gradient(135deg, #2c3037 0%, #16181c 100%);
}
.ovl-row { display: flex; align-items: center; gap: 8px; }
.ovl-av {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  background: #444; color: #fff; font: 700 12px/1 system-ui, sans-serif;
  box-shadow: 0 0 0 2px transparent; transition: box-shadow .12s;
}
.ovl-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ovl-sm .ovl-av { width: 24px; height: 24px; font-size: 10px; }
.ovl-lg .ovl-av { width: 40px; height: 40px; font-size: 14px; }
/* держать превью и страницу оверлея (desktop/main.js) в синхроне */
.ovl-row:not(.speaking) { opacity: .72; }
/* тёмный зазор, чтобы кольцо читалось и на оранжевом аватаре; лёгкое свечение — чтобы было видно сразу */
.ovl-row.speaking .ovl-av { box-shadow: 0 0 0 2px rgba(0,0,0,.55), 0 0 0 4px #ff6a1a, 0 0 10px rgba(255,106,26,.55); }
/* плашка «В ЭФИРЕ» у стримящего — акцент CAMP */
.ovl-live {
  flex-shrink: 0; padding: 1px 5px; border-radius: 6px; background: #ff6a1a;
  color: #fff; font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: .02em; white-space: nowrap;
}
.ovl-name {
  display: inline-flex; align-items: center; gap: 6px; max-width: 180px; min-width: 0;
  padding: 3px 8px; border-radius: 10px; background: rgba(0,0,0,.6);
  color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden;
}
/* ellipsis на вложенном span: на flex-контейнере .ovl-name он не срабатывает */
.ovl-name-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovl-name-ico { padding: 3px 5px; }
.ovl-ic { width: 14px; height: 14px; flex-shrink: 0; color: rgba(255,255,255,.7); }
.ovl-empty { color: rgba(255,255,255,.5); font-size: 12px; padding: 2px 4px; }
.overlay-key-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.overlay-edit-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.overlay-edit-bar .hint { margin: 0; }
.settings-callout.warn {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(255,106,26,.5); background: rgba(255,106,26,.1);
  border-radius: 12px; padding: 10px 12px; margin: 0 0 16px; max-width: 720px; font-size: .88rem;
}
.settings-callout.warn .callout-i { background: var(--accent, #ff6a1a); }

.activity-game-icon {
  width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex-shrink: 0;
  background: var(--sf-deep, #1e1f22);
}
.activity-game-icon.placeholder { display:inline-block; }
.activity-row.hist .playing-sub { color: #949ba4; }
.friends-activity .sec { margin: 12px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #949ba4; }

/* activity badge — never replace avatar */
.av-stack { position: relative; display: inline-block; width: auto; height: auto; flex-shrink: 0; line-height: 0; }
.av-stack .avatar { display: block; }
.game-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 14px;
  height: 14px;
  border-radius: 8px;
  border: 2px solid var(--bg-sidebar, var(--ln-side2, #141416));
  object-fit: cover;
  background: #111;
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.av-stack:has(.avatar.xs) .game-badge { width: 16px; height: 16px; }
.member .av-wrap .av-stack .game-badge { width: 18px; height: 18px; }
.av-wrap { position: relative; }
.dm-av,
.vu-av,
.friend-av {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
}
.friend-av { width: 40px; height: 40px; }
.dm-av .status-dot,
.vu-av .status-dot {
  width: 8px;
  height: 8px;
  border-width: 2px;
  right: -1px;
  bottom: -1px;
  --dot-ring: var(--bg-sidebar, #141416);
}
.dm-chan .dm-av { margin-right: 2px; }
.friend-av .status-dot {
  width: 12px;
  height: 12px;
  border-width: 3px;
  right: -1px;
  bottom: -1px;
  --dot-ring: var(--bg-app, #0c0c0e);
}
.userpanel-av .status-dot {
  --dot-ring: var(--bg-user, #101012);
  width: 10px;
  height: 10px;
  border-width: 3px;
}
.vu-name {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-width: 0;
  line-height: 1.2;
  gap: 1px;
}
.vu-nick {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 3px;
  flex: 1 1 0 !important;
  min-width: 0;
  max-width: 100%;
  width: auto !important;
  overflow: hidden;
}
.vu-nick .nick-inline-row {
  width: auto;
  max-width: 100%;
  min-width: 0;
  justify-content: flex-start;
}
.vu-nick .nick-inline-core {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100%;
  min-width: 0;
  gap: 2px;
  justify-content: flex-start;
  overflow: hidden;
}
.vu-nick .nick-inline-name {
  flex: 0 1 auto !important;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Tag + boost crystal: tight to nick (kill global .utag/.boost margin that looks like a gap) */
.vu-nick .priv-badge,
.vu-nick .utag,
.vu-nick .gem-badge,
.vu-nick .boost-badge-wrap,
.vu-nick .nick-inline-core .utag.clan-tag,
.vu-nick .nick-inline-core .boost-badge-wrap,
.vu-nick .nick-inline-core .priv-badge,
.vu-nick .nick-inline-core .gem-badge {
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-left: 2px !important;
}
.vu-nick .priv-badge { font-size: 11px; }
.vu-nick .priv-badge .priv-ico { width: 12px; height: 12px; }
.vu-nick .gem-badge { width: 12px; height: 12px; }
.vu-game {
  font-size: 10px !important;
  font-weight: 500;
  color: #3ba55d !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
.activity-row.live {
  display: flex;
  align-items: center;
  gap: 8px;
}
.activity-row.live .activity-game-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
}
.avatar.game-avatar { /* legacy unused */ }

.vu-game-ico {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  object-fit: contain;
  object-position: center;
  background: var(--sf-app2, #0c0c0e);
  flex-shrink: 0;
  margin-left: 0;
  image-rendering: -webkit-optimize-contrast;
  cursor: pointer;
}
.row-game-ico {
  cursor: pointer;
}
.game-now-pop {
  position: fixed;
  z-index: 240;
  width: 240px;
  padding: 12px;
  border-radius: 12px;
  background: var(--sf-abyss, #111214);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: #dbdee1;
  pointer-events: auto;
}
.game-now-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #b5bac1;
  margin-bottom: 10px;
}
.game-now-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.game-now-row img {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: contain;
  background: var(--sf-deep, #1e1f22);
  flex-shrink: 0;
}
.game-now-body b {
  display: block;
  color: #f2f3f5;
  font-size: 14px;
  font-weight: 650;
}
.game-now-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: #23a55a;
  font-size: 12px;
  font-weight: 600;
}
.game-now-time svg {
  width: 12px;
  height: 12px;
  display: block;
}
.game-now-steam {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  height: 36px;
  border-radius: 8px;
  background: var(--sf-panel, #2b2d31);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}
.game-now-steam:hover { background: var(--sf-raised2, #35373c); color: #fff; }
.game-now-steam svg { width: 16px; height: 16px; flex-shrink: 0; }

.game-sheet-back {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: rgba(0, 0, 0, .78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.game-sheet-back.gs-busy::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 321;
  background: rgba(0, 0, 0, .25);
  pointer-events: none;
}
.gs-load-err { margin: 10px 0 0; text-align: center; }
.game-sheet {
  width: min(1420px, calc(100vw - 16px));
  height: min(calc(100vh - 16px), 880px);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background-color: var(--sf-abyss, #111214);
  background-image: var(--gs-banner, none);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  color: #dbdee1;
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
  overflow: hidden;
  position: relative;
}
.game-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(17,18,20,.28) 0%, rgba(17,18,20,.78) 22%, var(--sf-abyss, #111214) 46%);
  pointer-events: none;
}
.game-sheet > * { position: relative; z-index: 1; }
.game-sheet.gs-load {
  align-items: center;
  justify-content: center;
  padding: 48px;
}
.gs-hero {
  flex-shrink: 0;
  position: relative;
  background: transparent;
  min-height: 108px;
}
.gs-hero::after { display: none; }
.gs-hero > * { position: relative; z-index: 1; }
.gs-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 12px;
}
.gs-title-row { display: flex; gap: 12px; align-items: center; min-width: 0; }
.gs-ico { width: 44px; height: 44px; border-radius: 16px; object-fit: contain; background: var(--sf-app2, #0c0c0e); flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.gs-head h2 { margin: 0; font-size: 22px; font-weight: 800; color: #fff; line-height: 1.15; }
.gs-genres { margin: 3px 0 0; color: #b5bac1; font-size: 13px; }
.gs-rank {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: #f0b232;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.gs-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.gs-add {
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.gs-add:hover { background: rgba(255,255,255,.08); }
.gs-icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
  backdrop-filter: blur(6px);
}
.gs-icon-btn svg {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.gs-icon-btn:hover { background: rgba(255,255,255,.08); }
.gs-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.gs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  height: 100%;
  padding: 0 16px 14px;
}
.gs-main {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.gs-main::-webkit-scrollbar { width: 6px; }
.gs-main::-webkit-scrollbar-thumb { background: var(--sf-edge2, #3f4147); border-radius: 12px; }
.gs-stage {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(52vh, 520px);
  min-height: 240px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.gs-stage > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-stage .gs-yt {
  width: 100%;
  height: 100%;
  background: #000;
}
.gs-stage .gs-yt iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.gs-stage .camp-vplayer.gs-vplayer {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  display: block;
  border-radius: 12px;
  background: #000;
}
.gs-stage .gs-vplayer .msg-video {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  margin: 0;
}
.gs-stage .gs-vplayer .camp-vplayer-ui { opacity: 1; pointer-events: auto; }
.gs-stage .gs-vplayer.is-fs .msg-video { object-fit: contain; }
.gs-thumbs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-top: 8px;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.gs-thumbs::-webkit-scrollbar { display: none; }
.gs-thumb {
  position: relative;
  flex: 0 0 84px;
  height: 48px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: var(--sf-deep, #1e1f22);
  cursor: pointer;
}
.gs-thumb.on { border-color: #fff; }
.gs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  text-shadow: 0 1px 4px #000;
  font-size: 11px;
  pointer-events: none;
}
.gs-sum {
  margin: 10px 0 0;
  line-height: 1.4;
  color: #dbdee1;
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gs-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 8px;
}
.gs-sec-head h3,
.gs-sim-wrap h3 {
  margin: 0;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #b5bac1;
  font-weight: 700;
}
.gs-sec-more {
  font-size: 12px;
  color: #b5bac1;
  text-decoration: none;
  white-space: nowrap;
}
.gs-sec-more:hover { color: #fff; text-decoration: underline; }
.gs-car-track {
  display: flex;
  gap: 8px;
  overflow-x: hidden;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.gs-car-track.gs-thumbs-track {
  gap: 6px;
  padding: 0 2px 2px;
}
.gs-car-track.gs-thumbs-track .gs-thumb {
  flex: 0 0 84px;
  height: 48px;
}
.gs-carousel { position: relative; margin-top: 8px; }
.gs-carousel.gs-thumbs-car { margin-top: 8px; }
.gs-carousel.gs-thumbs-car .gs-car-btn {
  width: 28px;
  height: 28px;
}
.gs-carousel.gs-thumbs-car .gs-car-btn svg {
  width: 14px;
  height: 14px;
}
.gs-carousel.gs-thumbs-car .gs-car-prev { left: 2px; }
.gs-carousel.gs-thumbs-car .gs-car-next { right: 2px; }
.gs-car-track::-webkit-scrollbar { display: none; }
.gs-car-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(17,18,20,.92);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.gs-car-btn svg {
  display: block;
  width: 18px;
  height: 18px;
}
.gs-car-prev { left: 4px; }
.gs-car-next { right: 4px; }
.gs-car-btn:hover:not(:disabled) { background: var(--sf-raised2, #35373c); }
.gs-car-btn:disabled { opacity: 0; pointer-events: none; }
.gs-carousel.gs-car-start .gs-car-prev { opacity: 0; pointer-events: none; }
.gs-carousel.gs-car-end .gs-car-next { opacity: 0; pointer-events: none; }
.gs-dlc-wrap,
.gs-sim-wrap,
.gs-news-wrap { margin-top: 12px; }
.gs-dlc {
  flex: 0 0 148px;
  height: 168px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sf-deep, #1e1f22);
  position: relative;
  text-decoration: none;
  color: #fff;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.gs-dlc:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  filter: brightness(1.06);
}
.gs-dlc img {
  width: 100%;
  height: 92px;
  object-fit: cover;
  display: block;
}
.gs-dlc-type {
  display: block;
  padding: 8px 8px 0;
  font-size: 10px;
  color: #b5bac1;
}
.gs-dlc b {
  padding: 2px 8px 0;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gs-dlc em {
  display: block;
  padding: 4px 8px 8px;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.gs-sim {
  flex: 0 0 120px;
  width: 120px;
  height: 180px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sf-deep, #1e1f22);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.gs-sim.land {
  flex: 0 0 184px;
  width: 184px;
  height: 86px;
}
.gs-carousel.gs-car-fill .gs-sims .gs-sim {
  flex: 0 0 120px;
  min-width: 120px;
  max-width: 120px;
  height: 180px;
  aspect-ratio: auto;
}
.gs-carousel.gs-car-fill .gs-sims .gs-sim.land {
  flex: 0 0 184px;
  min-width: 184px;
  max-width: 184px;
  height: 86px;
}
.gs-sim img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.gs-sim.land img {
  object-fit: cover;
  object-position: center 28%;
}
.gs-sim-wrap .gs-carousel {
  margin-top: 8px;
}
.gs-sim-wrap .gs-car-btn {
  opacity: 1;
  pointer-events: auto;
}
.dens-preview-cozy .dens-av {
  width: 40px;
  height: 40px;
}
.dens-preview-cozy .dens-prev-row {
  min-height: 44px;
}
.dens-preview-cozy .dens-lines {
  min-width: 64px;
}
.dens-preview-cozy .dens-lines .dens-bar {
  height: 8px !important;
}
.dens-preview-cozy .dens-lines .dens-bar.short {
  height: 6px !important;
}
.user-profile-modal .integ-row,
.dm-prof .integ-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 4px;
}
.user-profile-modal .integ-ico,
.dm-prof .integ-ico {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  color: #dbdee1;
}
.user-profile-modal .integ-ico svg,
.dm-prof .integ-ico svg {
  width: 18px;
  height: 18px;
}
.gs-sim:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  filter: brightness(1.08);
}
.gs-news {
  flex: 0 0 220px;
  height: 210px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sf-deep, #1e1f22);
  position: relative;
  text-decoration: none;
  color: #fff;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.gs-news:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  filter: brightness(1.06);
}
.gs-news img {
  width: 100%;
  height: 112px;
  object-fit: cover;
  display: block;
  background: var(--sf-panel, #2b2d31);
}
.gs-news-tag {
  display: block;
  padding: 8px 10px 0;
  font-size: 11px;
  font-weight: 700;
  color: #5865f2;
}
.gs-news b {
  padding: 4px 10px 0;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gs-news em {
  margin-top: auto;
  padding: 6px 10px 10px;
  font-style: normal;
  font-size: 11px;
  color: #b5bac1;
}
.gs-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}
.gs-side::-webkit-scrollbar { width: 6px; }
.gs-side::-webkit-scrollbar-thumb { background: var(--sf-edge2, #3f4147); border-radius: 12px; }
.gs-steam {
  height: 40px;
  border-radius: 12px;
  background: var(--sf-panel, #2b2d31);
  color: #fff;
  display: grid;
  place-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.gs-steam:hover { background: var(--sf-raised2, #35373c); color: #fff; }
.gs-steam svg { width: 20px; height: 20px; }
.gs-block {
  background: var(--sf-deep, #1e1f22);
  border-radius: 12px;
  padding: 10px 12px;
  flex-shrink: 0;
}
.gs-block h4 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #b5bac1;
}
.gs-block-reviews { padding: 0; overflow: hidden; }
.gs-block-reviews h4 { padding: 10px 12px 6px; margin: 0; }
.gs-rev-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid rgba(255,255,255,.06);
  transition: background .12s ease;
  min-width: 0;
}
.gs-rev-row:hover { background: rgba(255,255,255,.06); }
.gs-rev-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  color: #dbdee1;
  font-size: 12px;
}
.gs-rev-left svg { width: 16px; height: 16px; flex-shrink: 0; }
.gs-rev-left em {
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gs-rev-right {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
  max-width: none;
  text-align: right;
  min-width: 0;
}
.gs-rev-right b {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.gs-rev-right b.good { color: #57f287; }
.gs-rev-right b.warn { color: #faa61a; }
.gs-rev-right i {
  font-style: normal;
  color: #b5bac1;
  font-size: 11px;
  flex-shrink: 0;
}
.gs-oc-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #faa61a;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.gs-kv {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 5px 0;
  font-size: 12px;
}
.gs-kv span { color: #b5bac1; flex-shrink: 0; }
.gs-kv b {
  color: #fff;
  font-weight: 650;
  text-align: right;
  line-height: 1.3;
}
.gs-kv b.gs-plat {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 18px;
}
.gs-kv-links { align-items: center; }
.gs-kv-links b.gs-socs {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
}
.gs-socs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.gs-soc {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  background: var(--sf-panel, #2b2d31);
  color: #fff;
  display: grid;
  place-items: center;
}
.gs-soc:hover { background: var(--sf-raised2, #35373c); color: #fff; }
.gs-src {
  margin: 0;
  font-size: 10px;
  color: #87898c;
  flex-shrink: 0;
}
@media (max-width: 860px) {
  .game-sheet { height: min(92vh, 760px); }
  .gs-grid { grid-template-columns: 1fr; }
  .gs-side { max-height: 220px; }
  .gs-head { flex-direction: column; align-items: stretch; }
  .gs-stage { height: 210px; }
}
.voice-user .flags {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  flex-shrink: 0;
}
.voice-user .flags .vu-tag-trail {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}
.voice-user .flags .vu-game-ico { align-self: flex-start; }

/* ---- DM 1:1 calls (Discord-like) ---- */
.avatar.lg { width: 80px; height: 80px; font-size: 1.6rem; }
.avatar.xl { width: 120px; height: 120px; font-size: 2.2rem; }

.dm-call-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--sf-abyss, #111214);
}
.dm-call-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: #b5bac1;
  font-size: 13px;
  border-bottom: 1px solid var(--ln-deep, #1e1f22);
}
.dm-call-banner b { color: #f2f3f5; font-weight: 600; }
.dm-call-banner-spacer { flex: 1; }
.dm-call-chat-btn {
  font-size: 12px !important;
  color: #dbdee1 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dm-call-mini-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  background: var(--sf-deep, #1e1f22);
  border-bottom: 1px solid var(--ln-panel, #2b2d31);
  color: #b5bac1;
  font-size: 13px;
  flex-shrink: 0;
}
.dm-call-mini-bar b { color: #f2f3f5; }
.dm-call-vstage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.dm-call-grid { max-width: 900px; width: 100%; }
.dm-call-ringing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px;
}
.dm-call-ring-av .avatar,
.dm-call-incoming-av .avatar {
  box-shadow: 0 0 0 4px rgba(230, 74, 25, 0.35);
  animation: dm-call-pulse 1.6s ease-in-out infinite;
}
@keyframes dm-call-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(230, 74, 25, 0.25); }
  50% { box-shadow: 0 0 0 12px rgba(230, 74, 25, 0.08); }
}
.dm-call-ring-name {
  font-size: 22px;
  font-weight: 700;
  color: #f2f3f5;
}
.dm-call-ring-status {
  color: #b5bac1;
  font-size: 14px;
}

.dm-call-incoming {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  -webkit-app-region: no-drag;
}
.dm-call-incoming-card {
  width: min(360px, 92vw);
  background: var(--sf-deep, #1e1f22);
  border-radius: 20px;
  padding: 28px 24px 22px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
.dm-call-incoming-av { display: flex; justify-content: center; margin-bottom: 14px; }
.dm-call-incoming-name {
  font-size: 20px;
  font-weight: 700;
  color: #f2f3f5;
  margin-bottom: 4px;
}
.dm-call-incoming-sub {
  color: #b5bac1;
  font-size: 14px;
  margin-bottom: 22px;
}
.dm-call-incoming-actions {
  display: flex;
  justify-content: center;
  gap: 28px;
}
.dm-call-decline,
.dm-call-accept {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.dm-call-decline { background: #ed4245; }
.dm-call-decline:hover { background: #c03537; }
.dm-call-accept { background: #3ba55d; }
.dm-call-accept:hover { background: #2d7d46; }

/* ===== Accessibility / Discord settings parity (1.11.0 — real GIF freeze in JS) ===== */
:root { --chat-font-size: 16px; --ui-saturation: 1; }
.messages .msg-body,
.messages .msg-meta,
.composer textarea,
.chan-welcome p { font-size: var(--chat-font-size) !important; }
body.a11y-underline-links .msg-body a { text-decoration: underline; }
body.a11y-high-contrast:not(.theme-light) {
  --text: #fff8ef;
  --text-normal: #fff3e0;
  --text-muted: #c4b8a8;
  --line: #4a3c30;
  --bg-hover: #3a3028;
  --bg-app: #0a0a0c;
  --bg-sidebar: #121214;
}
body.a11y-no-role-colors .member-name-row,
body.a11y-no-role-colors .member-name-row .uname,
body.a11y-no-role-colors .uname,
body.a11y-no-role-colors .msg-author .uname,
body.a11y-no-role-colors .msg-meta b {
  color: var(--text-normal) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-normal) !important;
}
body.a11y-desaturate .shell,
body.a11y-desaturate .modal,
body.a11y-desaturate .user-popout,
body.a11y-desaturate .ctx-menu {
  filter: saturate(var(--ui-saturation));
}
body.a11y-desaturate .shell .msg-img,
body.a11y-desaturate .shell video,
body.a11y-desaturate .shell .avatar,
body.a11y-desaturate .shell .pop-fav-game-ico,
body.a11y-desaturate .shell .rail-icon {
  filter: saturate(calc(1 / max(var(--ui-saturation), 0.01)));
}
body.a11y-reduce-motion *,
body.a11y-reduce-motion *::before,
body.a11y-reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
.msg-img-caption {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 8px;
  max-width: 100%;
  word-break: break-all;
}
.msg.selected {
  background: rgba(255, 106, 26, 0.12) !important;
  box-shadow: inset 2px 0 0 var(--accent);
}
/* Multi-select (ПКМ → Выбрать): no highlight on plain click */
.messages.msg-select-mode .msg-actions { display: none !important; }
.messages.msg-select-mode .msg { padding-right: 44px; }
.msg-pick {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  margin: 0;
  cursor: pointer;
  z-index: 3;
  display: none;
}
.messages.msg-select-mode .msg-pick { display: block; }
.msg-pick input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.msg-pick-box {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #b5bac1;
  border-radius: 8px;
  background: var(--sf-deep, #1e1f22);
  box-sizing: border-box;
  animation: msg-pick-shake .55s ease-in-out infinite;
}
.msg-pick input:checked + .msg-pick-box {
  background: var(--accent, #e64a19);
  border-color: var(--accent, #e64a19);
  animation: none;
  position: relative;
}
.msg-pick input:checked + .msg-pick-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@keyframes msg-pick-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-1.5px) rotate(-6deg); }
  40% { transform: translateX(1.5px) rotate(6deg); }
  60% { transform: translateX(-1px) rotate(-3deg); }
  80% { transform: translateX(1px) rotate(3deg); }
}
.msg-select-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 16px;
  background: var(--bg-secondary, var(--sf-base, #232428));
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.msg-select-count {
  color: var(--text-muted);
  font-size: 13px;
  margin-right: auto;
}
.msg-select-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.settings-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
  font-size: 14px;
  color: var(--text-normal);
}
.settings-label input[type="range"],
input[type="range"].settings-range {
  --thumb-w: 16px;
  --range-rest: rgba(255, 255, 255, 0.16);
  --vol-fill: linear-gradient(
    to right,
    var(--accent-brand, #e64a19) 0 var(--vol, 50%),
    var(--range-rest) var(--vol, 50%) 100%
  );
  width: 100%;
  height: 8px;
  margin: 6px 0 2px;
  padding: 0;
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--vol-fill);
  outline: none;
  cursor: pointer;
}
.settings-label input[type="range"]::-webkit-slider-runnable-track,
input[type="range"].settings-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 8px;
  background: var(--vol-fill);
}
.settings-label input[type="range"]::-webkit-slider-thumb,
input[type="range"].settings-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb-w, 16px);
  height: 16px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  cursor: pointer;
}
.settings-label input[type="range"]::-moz-range-track,
input[type="range"].settings-range::-moz-range-track { height: 8px; border-radius: 8px; background: var(--range-rest); }
.settings-label input[type="range"]::-moz-range-progress,
input[type="range"].settings-range::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--accent-brand, #e64a19); }
.settings-label input[type="range"]::-moz-range-thumb,
input[type="range"].settings-range::-moz-range-thumb { width: var(--thumb-w, 16px); height: 16px; border: 0; border-radius: 50%; background: #fff; }
body.theme-light .settings-label input[type="range"],
body.theme-light input[type="range"].settings-range { --range-rest: rgba(0, 0, 0, 0.16); }
.settings-label select {
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 8px 10px;
}
.kbd-overlay {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
}
.kbd-overlay .kbd-overlay-modal {
  width: min(640px, 94vw);
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--sf-panel, #2b2d31);
  border: 1px solid var(--ln-deep, #1e1f22);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.kbd-overlay .kbd-overlay-modal > header {
  flex-shrink: 0;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kbd-overlay .kbd-overlay-modal > header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}
.kbd-overlay-body {
  padding: 8px 16px 8px;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--sf-scroll, #1a1b1e) transparent;
}
.kbd-overlay-body::-webkit-scrollbar { width: 8px; }
.kbd-overlay-body::-webkit-scrollbar-thumb {
  background: var(--sf-scroll, #1a1b1e);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.kbd-cat {
  margin: 18px 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #949ba4;
}
.kbd-cat:first-child { margin-top: 4px; }
.kbd-overlay-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 15px;
  color: #dbdee1;
}
.kbd-caps { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; }
.keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--sf-deep, #1e1f22);
  border: 1px solid var(--ln-edge2, #3f4147);
  box-shadow: 0 2px 0 var(--sf-abyss, #111214);
  font-size: 12px;
  font-weight: 600;
  color: #f2f3f5;
  font-family: var(--font);
}
.keycap-sep { color: var(--text-muted); font-size: 12px; margin: 0 2px; }
.kbd-overlay-foot {
  flex-shrink: 0;
  padding: 10px 16px 14px;
  margin: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  color: #949ba4;
}

/* Streamer mode — hide tags / invites / personal */
body.streamer-hide-personal .user-tag-mini,
body.streamer-hide-personal .user-tag,
body.streamer-hide-personal .streamer-tag,
body.streamer-hide-personal .utag,
body.streamer-hide-personal .streamer-personal,
body.streamer-hide-personal [data-email-show],
body.streamer-hide-personal .up-note,
body.streamer-hide-personal input[name="bindEmail"] {
  filter: blur(6px);
  user-select: none;
}
/* Размытый тег/хендл не кликается — иначе копирование и тост */
body.streamer-hide-personal .user-tag,
body.streamer-hide-personal .streamer-tag,
body.streamer-hide-personal [data-copy-handle] { pointer-events: none; }
body.streamer-hide-invites [data-invite-code],
body.streamer-hide-invites .invite-code,
body.streamer-hide-invites .invite-url,
body.streamer-hide-invites .invite-link { filter: blur(8px); user-select: none; pointer-events: none; }
/* Реальные элементы приглашений: поле ссылки, код в таблице, свой адрес и кастомный код */
body.streamer-hide-invites [data-inv-url],
body.streamer-hide-invites [data-bp-vanity],
body.streamer-hide-invites input[name="customCode"] { filter: blur(8px); user-select: none; }
body.streamer-hide-invites .invite-code-cell { filter: blur(8px); user-select: none; pointer-events: none; }
#app.has-streamer-banner {
  display: flex;
  flex-direction: column;
}
#app.has-streamer-banner .shell {
  flex: 1 1 auto;
  height: auto;
  max-height: none;
}
/* Компактная плашка: одна тонкая строка, содержимое собрано по центру.
 * Не распирает окно, не наезжает на заголовок окна и на панель поиска —
 * живёт в потоке над .shell и занимает ровно свою высоту. */
.streamer-banner {
  flex: none;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 5px 10px;
  background: var(--bg-app, #111214);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.streamer-banner-in {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 3px 4px 3px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-brand) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-brand) 42%, transparent);
  color: var(--text-normal, #e8dcc8);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.streamer-banner-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-brand) 22%, transparent);
}
.streamer-banner-txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Чип с программой, из-за которой режим включился сам (OBS, Bandicam...) */
.streamer-banner-src {
  flex: none;
  max-width: 30vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-brand) 26%, transparent);
  font-size: 12px;
  font-weight: 700;
}
.streamer-banner-off {
  flex: none;
  border: 0;
  border-radius: 999px;
  background: var(--accent-brand);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  cursor: pointer;
}
.streamer-banner-off:hover { filter: brightness(1.08); }
.streamer-banner-off:focus-visible { outline: 2px solid var(--accent-brand); outline-offset: 2px; }
.streamer-auto-note {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.4;
}
.switch-text.has-hint {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.switch-text.has-hint b { font-weight: 600; }
.switch-text.has-hint small {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted, #949ba4);
  line-height: 1.35;
}
.streamer-sec .switch-row { padding: 12px 0; }
@media (max-width: 720px) {
  .streamer-banner { padding: 4px 6px; }
  .streamer-banner-in { font-size: 12px; padding-left: 10px; gap: 6px; }
  /* Узкое окно: чип программы прячем, кнопка «Отключить» важнее */
  .streamer-banner-src { display: none; }
}
.role-pick .role-drag {
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: -2px;
  margin-right: 2px;
  cursor: grab;
}
.role-pick.dragging { opacity: 0.5; }
.role-pick.drag-over { outline: 1px dashed var(--accent); }
.member-roles-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.member-roles-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.member-roles-checks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 46px;
  max-width: 420px;
}
.role-member-switch {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.role-member-switch .switch-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  text-transform: none;
  font-weight: 500;
}
.role-member-switch .switch-text i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.role-member-switch.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.role-member-switch.is-locked .switch {
  pointer-events: none;
}
.role-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-normal);
  cursor: pointer;
}
.role-check i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* ---- CAMP 1.12.0 Discord settings dump ---- */
.session-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 6px 0;
  background: rgba(0,0,0,.22);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
}
/* Current = same card as others (badge only). No orange/red "error" border. */
.session-row.current {
  border-color: rgba(255,255,255,.06);
  box-shadow: none;
}
.session-row.selected {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  box-shadow: none;
}
.session-ico {
  font-size: 22px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5865f2;
}
.session-ico svg { display: block; }
.session-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.session-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(88, 101, 242, .22);
  color: #c9cdfb;
}
/* Per-row action: always visible text, never blank red box (ghost+danger = red on red) */
.session-revoke,
.session-action-btn {
  flex-shrink: 0;
  margin: 0;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(242, 63, 67, 0.55);
  background: transparent;
  color: #f23f43 !important;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.2;
  min-height: 32px;
}
.session-revoke:hover,
.session-action-btn:hover:not(:disabled) {
  background: rgba(242, 63, 67, 0.14);
  color: #ff6b6b !important;
}
.session-action-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.devices-actions [data-revoke-selected]:disabled {
  opacity: .45;
  cursor: not-allowed;
}
body.theme-light .session-row {
  background: rgba(0,0,0,.04);
  border-color: var(--line);
}
body.theme-light .session-row.selected {
  border-color: var(--accent-brand);
  background: rgba(230, 74, 25, 0.08);
  box-shadow: 0 0 0 1px rgba(230, 74, 25, 0.25);
}
body.theme-light .session-badge {
  background: rgba(88, 101, 242, .14);
  color: #4338ca;
}
body.theme-light .session-action-btn {
  border-color: rgba(200, 50, 50, 0.55);
  color: #b91c1c !important;
}
body.theme-light .session-action-btn:hover:not(:disabled) {
  background: rgba(185, 28, 28, 0.1);
  color: #991b1b !important;
}
body.theme-light .toast {
  background: #fffaf4;
  color: #1a1410;
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(40, 30, 20, 0.12);
}
.settings-related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.settings-related-chip {
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(230, 74, 25, 0.4);
  background: linear-gradient(180deg, rgba(230, 74, 25, 0.18), rgba(230, 74, 25, 0.08));
  color: #ffc29a;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.settings-related-chip:hover {
  border-color: rgba(255, 160, 90, 0.65);
  background: linear-gradient(180deg, rgba(230, 74, 25, 0.28), rgba(230, 74, 25, 0.14));
  color: #ffe0c8;
}
.settings-panel-hero {
  margin: 0 0 16px;
}
.settings-panel-hero h3 {
  margin: 0 0 6px;
  font-size: 20px;
}
.settings-panel-boosts .boosts-hero h3 { color: #ffb38a; }
.boosts-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 36px 22px; margin-bottom: 14px;
  border: 1px solid rgba(235, 69, 158, .28); border-radius: 20px;
  background: transparent;
}
.boosts-empty-ico {
  width: 56px; height: 56px; display: grid; place-items: center;
  color: #6d6f78; opacity: 1;
}
.boosts-empty-ico svg { width: 40px; height: 40px; stroke-width: 1.5; }
.boosts-empty b { color: #fff; font-size: 16px; font-weight: 700; }
.boosts-empty .hint { margin: 0; max-width: 28em; color: #b5bac1; font-size: 13px; line-height: 1.35; }
.boosts-have {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 16px; margin-bottom: 14px; border-radius: 16px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.boosts-have-wave {
  position: absolute;
  inset: 0 auto 0 0;
  width: 72%;
  max-width: 100%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 0% 50%, rgba(201, 160, 255, 0.35), transparent 62%),
    linear-gradient(90deg, rgba(140, 80, 220, 0.28), rgba(140, 80, 220, 0.12) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 58%, rgba(0,0,0,.45) 78%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 58%, rgba(0,0,0,.45) 78%, transparent 100%);
}
.boosts-have > *:not(.boosts-have-wave) { position: relative; z-index: 1; }
.boosts-have-n {
  font-size: 36px; font-weight: 800; color: #c9a0ff; line-height: 1.1;
}
.boosts-have-lab { color: #fff; font-weight: 600; margin: 4px 0 4px; }
.boosts-have-exp {
  margin: 0 0 10px;
  color: #c9a0ff;
  font-size: 13px;
  font-weight: 600;
}
.settings-panel-gifts .gifts-hero h3 { color: #c9cdfb; }
.media-filter-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 4px 0;
  border-radius: 12px;
  overflow: hidden;
}
.media-filter-wrap.is-blurred:not(.is-revealed) img,
.media-filter-wrap.is-blurred:not(.is-revealed) video,
.media-filter-wrap.is-blurred:not(.is-revealed) iframe {
  filter: blur(28px);
  transform: scale(1.05);
  pointer-events: none;
  user-select: none;
}
.media-filter-reveal,
.media-filter-placeholder {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(0,0,0,.45);
  color: var(--text-normal);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.media-filter-wrap.is-blurred:not(.is-revealed) .media-filter-reveal {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  width: auto;
  z-index: 2;
  backdrop-filter: blur(2px);
}
.media-filter-wrap.is-blocked .media-filter-placeholder {
  margin-top: 0;
}
.settings-radio-stack { display: flex; flex-direction: column; gap: 8px; }
.settings-radio-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid transparent;
  cursor: pointer;
}
.settings-radio-card.on { border-color: rgba(230,74,25,.5); background: rgba(230,74,25,.08); }
.settings-radio-card input { margin-top: 3px; }
.settings-radio-card .src-body,
.settings-radio-card > span { display: flex; flex-direction: column; gap: 2px; }
.settings-subh { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.filter-level { display: block; margin: 8px 0; }
.filter-level-select { width: 100%; margin-top: 4px; }
.adr-hub-hero { margin-bottom: 12px; }
.adr-hub-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dev-id-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  flex-wrap: wrap;
}
.dev-id-row code {
  flex: 1;
  min-width: 120px;
  padding: 4px 8px;
  background: rgba(0,0,0,.35);
  border-radius: 8px;
  font-size: 12px;
  word-break: break-all;
}
.hint-list { margin: 8px 0 12px 18px; color: var(--text-muted); line-height: 1.45; }
body.a11y-no-anim-emoji .emoji-cell,
body.a11y-no-anim-emoji .emoji-pop .emoji-cell,
body.a11y-no-anim-emoji .reaction {
  animation: none !important;
  transition: none !important;
}
body.a11y-no-anim-emoji .emoji-cell:hover,
body.a11y-no-anim-emoji .emoji-pop .emoji-cell:hover {
  transform: none !important;
}
body.a11y-sticker-never img.msg-gif,
body.a11y-sticker-never .tenor-embed img,
body.a11y-sticker-never img[data-tenor] {
  /* still frames applied via JS; keep pointer for interact mode */
}
body.a11y-show-toggle-labels .switch-row::after {
  content: attr(data-onoff);
}
body.a11y-legacy-composer .composer textarea {
  border-radius: 0;
  min-height: 44px;
}

/* ===== 1.12.7 Adrenaline nitro-ish cards + camera test ===== */
.adr-nitro-hero { margin: 0 0 16px; }
.adr-nitro-hero h3 { margin: 0 0 6px; font-size: 20px; }
.adr-nitro-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin: 12px 0;
  border-radius: 20px;
  border: 1px solid rgba(230, 74, 25, 0.35);
  background: linear-gradient(135deg, rgba(230,74,25,.14), rgba(20,16,14,.9) 55%, rgba(40,28,22,.95));
  cursor: pointer;
  transition: border-color .15s, transform .12s;
}
.adr-nitro-card:hover {
  border-color: rgba(255, 179, 0, 0.55);
  transform: translateY(-1px);
}
.adr-nitro-card-ico {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 28px;
}
.adr-nitro-card-body { flex: 1; min-width: 0; }
.adr-nitro-card-body b { display: block; font-size: 15px; margin-bottom: 2px; }
.adr-nitro-card-go { color: var(--accent-gold, #ffb300); font-weight: 600; white-space: nowrap; }
.adr-gift-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 8px 0;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.adr-gift-meta { flex: 1; min-width: 0; }
.adr-gift-meta b { display: block; margin-bottom: 2px; }
.adr-gift-amt { font-weight: 700; color: var(--accent-gold, #ffb300); }
.cam-test-sec .cam-test-box { display: grid; gap: 10px; margin-top: 8px; }
.cam-test-box {
  background: transparent !important;
}
.cam-test-box video[data-cam-preview] {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 16 / 9;
  background: transparent;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  object-fit: cover;
  transform: scaleX(-1);
}
.cam-device-label { text-transform: none !important; letter-spacing: 0 !important; }
.cam-test-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
body.electron.density-compact .member,
html[data-density="compact"] body.electron .member {
  min-height: 26px;
  padding: 1px 6px;
}
body.electron.density-compact .chan,
html[data-density="compact"] body.electron .chan {
  padding: 0.14rem 0.45rem;
  font-size: 0.86rem;
}
body.electron.density-compact .msg:not(.grouped),
html[data-density="compact"] body.electron .msg:not(.grouped) {
  margin-top: 0.08rem;
}


/* === 1.12.42 leftovers: keep cam/vc chrome clean, settings are a solid card now === */
.cam-test-box,
.cam-test-box video[data-cam-preview] {
  background: transparent !important;
  box-shadow: none !important;
}
.chan-vc-actions,
.chan-vc-actions button {
  background: transparent !important;
  box-shadow: none !important;
}

/* Sidebar: Discord-like need-boosts + ruby link */
.sidebar-boost.need-boosts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 10px 4px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  border-bottom: 0;
  background: rgba(255,255,255,.06);
  color: var(--text, #dbdee1);
}
.sidebar-boost.need-boosts:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.sidebar-boost-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 8px 8px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-muted, #b5bac1);
  font-size: .9rem;
  font-weight: 500;
  user-select: none;
}
.sidebar-boost-link:hover {
  background: var(--bg-hover, rgba(255,255,255,.06));
  color: var(--text, #dbdee1);
}
.sidebar-boost-link img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}
.sidebar-quick {
  display: flex;
  flex-direction: column;
  margin: 2px 8px 8px;
  padding: 0;
}
.sidebar-quick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 3px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #a39a94;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
  user-select: none;
}
.sidebar-quick-item:hover {
  background: var(--bg-hover, rgba(255,255,255,.06));
  color: var(--text, #dbdee1);
}
.sidebar-quick-item.on {
  background: var(--bg-active, rgba(255,255,255,.08));
  color: var(--text, #fff);
}
.sidebar-quick-ico {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.sidebar-quick-ico svg {
  width: 18px;
  height: 18px;
  display: block;
}
html.theme-light .sidebar-quick-item,
body.theme-light .sidebar-quick-item { color: #4a4038; }
html.theme-light .sidebar-quick-item:hover,
body.theme-light .sidebar-quick-item:hover { color: #1a1410; }
.ctx-menu button > span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ctx-menu button .ctx-ico {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.ctx-menu button .ctx-ico svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* CAMP server boosts page (Discord-like, our copy) */
.boost-guild-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 1.25rem;
  align-items: start;
}
.boost-guild-lead { margin: 0 0 1rem; line-height: 1.45; }
.boost-lvl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin-bottom: .5rem;
}
.boost-lvl-card {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
  padding: .85rem .75rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-height: 100%;
}
.boost-lvl-card.on {
  border-color: rgba(244,127,255,.45);
  background: rgba(244,127,255,.08);
}
.boost-lvl-gem { opacity: .55; }
.boost-lvl-card.on .boost-lvl-gem { opacity: 1; }
.boost-lvl-card ul {
  margin: 0;
  padding-left: 1.05rem;
  color: var(--muted, #b5bac1);
  font-size: .8rem;
  line-height: 1.4;
  flex: 1;
}
.boost-lvl-need {
  color: #f47fff;
  font-size: .78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.boost-extra-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
}
.boost-extra-card {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
  padding: .7rem .75rem;
}
.boost-extra-card b { display: block; margin-bottom: .25rem; }
.boost-extra-card .hint { margin: 0 0 .4rem; font-size: .78rem; line-height: 1.35; }
.boost-extra-need {
  font-size: .75rem;
  color: #f47fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.boost-guild-side {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  position: sticky;
  top: 0;
}
.boost-stat-row {
  display: flex;
  gap: .5rem;
  justify-content: space-around;
  padding: .85rem .4rem;
  border-radius: 20px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.06);
}
.boost-stat { text-align: center; }
.boost-stat b {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  color: #f47fff;
  line-height: 1.1;
}
.boost-stat span {
  font-size: .7rem;
  color: var(--muted, #949ba4);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.boost-gift-btn {
  width: 100%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .45rem;
}
.boost-recent {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.12);
  padding: .75rem .85rem;
}
.boost-recent h4 {
  margin: 0 0 .45rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted, #949ba4);
}
.boost-recent .hint { margin: 0; }
@media (max-width: 900px) {
  .boost-guild-page { grid-template-columns: 1fr; }
  .boost-lvl-grid, .boost-extra-grid { grid-template-columns: 1fr; }
}

/* Settings window follows cozy / compact density */
html[data-density="compact"] .modal-backdrop.fullscreen .modal-nav {
  padding: 40px 4px 40px 14px;
}
html[data-density="compact"] .modal-backdrop.fullscreen .modal-nav button {
  padding: 4px 8px;
  font-size: 14px;
  margin-bottom: 1px;
}
html[data-density="compact"] .modal-backdrop.fullscreen .settings-content {
  padding: 40px 20px 28px 28px;
}
html[data-density="compact"] .modal-backdrop.fullscreen .settings-content h2,
html[data-density="compact"] .modal-backdrop.fullscreen .settings-content h3,
html[data-density="compact"] .modal-backdrop.fullscreen .settings-content h4 {
  margin-top: .55rem;
  margin-bottom: .3rem;
}
html[data-density="compact"] .modal-backdrop.fullscreen .settings-sec,
html[data-density="compact"] .modal-backdrop.fullscreen .pref-row,
html[data-density="compact"] .modal-backdrop.fullscreen .form-row,
html[data-density="compact"] .modal-backdrop.fullscreen .switch-row {
  margin-bottom: .45rem;
}
html[data-density="compact"] .modal-backdrop.fullscreen .density-card,
html[data-density="compact"] .modal-backdrop.fullscreen [data-dens] {
  padding: .5rem .65rem;
  min-height: 58px;
}
html[data-density="cozy"] .modal-backdrop.fullscreen .modal-nav {
  padding: 60px 8px 60px 22px;
}
html[data-density="cozy"] .modal-backdrop.fullscreen .modal-nav button {
  padding: 8px 12px;
  font-size: 16px;
  margin-bottom: 3px;
}
html[data-density="cozy"] .modal-backdrop.fullscreen .settings-content {
  padding: 60px 32px 48px 44px;
}
html[data-density="cozy"] .modal-backdrop.fullscreen .settings-content h2,
html[data-density="cozy"] .modal-backdrop.fullscreen .settings-content h3,
html[data-density="cozy"] .modal-backdrop.fullscreen .settings-content h4 {
  margin-top: 1rem;
  margin-bottom: .55rem;
}
html[data-density="cozy"] .modal-backdrop.fullscreen .settings-sec,
html[data-density="cozy"] .modal-backdrop.fullscreen .pref-row,
html[data-density="cozy"] .modal-backdrop.fullscreen .switch-row {
  margin-bottom: .85rem;
}
html[data-density="cozy"] .modal-backdrop.fullscreen .density-card,
html[data-density="cozy"] .modal-backdrop.fullscreen [data-dens] {
  padding: .85rem 1rem;
  min-height: 84px;
}
/* === 1.12.43: create channel/category, audit, confirm, game covers === */
.disc-create .create-type-h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted, #949ba4);
  margin: 0 0 8px;
}
.disc-create .create-type-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.disc-create .create-type {
  display: grid;
  grid-template-columns: 40px 1fr 22px;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color: var(--text, #dbdee1);
  cursor: pointer;
}
.disc-create .create-type.on {
  border-color: var(--accent, #f07a3a);
  background: rgba(240,122,58,.12);
}
.disc-create .create-type .ct-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: rgba(255,255,255,.06);
}
.disc-create .create-type .ct-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.disc-create .create-type .ct-meta b {
  font-size: 15px;
  font-weight: 600;
}
.disc-create .create-type .ct-meta span {
  font-size: 12px;
  color: var(--text-muted, #b5bac1);
  line-height: 1.3;
  white-space: normal;
}
.disc-create .create-type .ct-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #80848e;
  display: inline-block;
}
.disc-create .create-type.on .ct-radio {
  border-color: var(--accent, #f07a3a);
  box-shadow: inset 0 0 0 3px var(--accent, #f07a3a);
}
.disc-create .create-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  text-transform: none;
  letter-spacing: 0;
}
.disc-create .create-field-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted, #949ba4);
}
.disc-create .create-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--sf-deep, #1e1f22);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 0 8px 0 12px;
  min-height: 42px;
}
.disc-create .create-input-wrap input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.disc-create .create-hash {
  color: var(--text-muted);
  flex-shrink: 0;
}
.disc-create .create-emoji {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.disc-create .create-emoji:hover {
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.disc-create .create-private {
  margin-top: 4px;
}
.camp-confirm-modal .camp-confirm-text {
  margin: 0;
  line-height: 1.45;
  color: var(--text, #dbdee1);
  font-size: 15px;
}
.camp-confirm-modal .modal-footer .danger {
  background: #da373c;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
}
.camp-confirm-modal .modal-footer .danger:hover { filter: brightness(1.08); }

/* VC full / info alert — Discord layout, CAMP brand OK */
.camp-alert-modal {
  width: min(440px, 94vw);
}
.camp-alert-modal .modal-panel {
  background: var(--sf-raised, #313338);
  border-radius: 12px;
  overflow: hidden;
}
.camp-alert-modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 0;
}
.camp-alert-modal header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #f2f3f5;
}
.camp-alert-modal .modal-body {
  padding: 12px 16px 8px;
}
.camp-alert-modal .camp-confirm-text {
  margin: 0;
  line-height: 1.45;
  color: #dbdee1;
  font-size: 15px;
}
.camp-alert-footer {
  display: flex;
  padding: 16px;
  background: var(--sf-panel, #2b2d31);
}
.camp-alert-footer .camp-alert-ok {
  flex: 1;
  width: 100%;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
}

.up-game-card.cover {
  transition: transform .58s cubic-bezier(.16, 1, .3, 1), box-shadow .58s cubic-bezier(.16, 1, .3, 1);
  transform-origin: center bottom;
}
.up-game-card.cover:hover {
  transform: translateY(-8px);
  z-index: 2;
}
.up-game-card.cover:hover img {
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
.up-act-playing.iconish,
.up-act-recent.iconish {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.06);
}
.up-act-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--sf-app2, #0c0c0e);
}

.camp-audit .audit-lead { margin: 0 0 14px; }
.camp-audit .audit-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.camp-audit .audit-filters label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}
.camp-audit .audit-filters select {
  width: 100%;
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
  padding: 8px 10px;
}
.camp-audit .audit-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.camp-audit .audit-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.06);
}
.camp-audit .audit-meta { min-width: 0; }
.camp-audit .audit-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  color: var(--text);
}
.camp-audit .audit-action { color: #f2a65a; font-weight: 600; }
.camp-audit .audit-target { color: var(--text-muted); }
.camp-audit .audit-meta time {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.camp-audit .audit-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(240,122,58,.14);
  color: #ffb38a;
  white-space: nowrap;
}
.camp-audit .audit-row[data-act="member_kick"] .audit-pill,
.camp-audit .audit-row[data-act="member_ban"] .audit-pill {
  background: rgba(218,55,60,.18);
  color: #ff8b8f;
}
@media (max-width: 720px) {
  .camp-audit .audit-filters { grid-template-columns: 1fr; }
  .camp-audit .audit-pill { display: none; }
}

/* === 1.12.44: solo boosts modal + gem anim + activity === */
.shell.members-dir-mode > .main{background:var(--sf-deep, #1e1f22);overflow:auto}
.memdir-page{display:flex;flex-direction:column;flex:1;min-height:0;padding:0 8px 16px}
.memdir{display:flex;flex-direction:column;flex:1;min-height:0;color:#dbdee1;padding:8px 16px 16px}
.memdir-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:8px 0 16px}
.memdir-head h2{margin:0;font-size:20px;font-weight:700;color:#f2f3f5}
.memdir-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.memdir-search{display:flex;align-items:center;gap:8px;background:var(--sf-deep, #1e1f22);border:1px solid var(--ln-edge2, #3f4147);border-radius:8px;padding:0 10px;min-width:320px;flex:1 1 280px;max-width:420px}
.memdir-search span{color:#b5bac1;font-size:16px}
.memdir-search input{flex:1;border:0;background:transparent;color:#dbdee1;font:inherit;padding:8px 0;outline:none}
.memdir-btn{border:0;border-radius:8px;background:var(--sf-raised, #313338);color:#dbdee1;padding:8px 12px;font:inherit;cursor:pointer}
.memdir-btn:hover{background:var(--sf-edge2, #3f4147);color:#fff}
.memdir-btn.ghost{background:transparent}
.memdir-btn:disabled{opacity:.4;cursor:default}
.memdir-table-wrap{overflow:auto;border:1px solid var(--ln-edge2, #3f4147);border-radius:12px;background:var(--sf-panel, #2b2d31)}
.memdir-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.memdir-table th,.memdir-table td{
  text-align:left;padding:7px 12px;vertical-align:middle;color:#dbdee1;
  border:0;border-bottom:1px solid var(--ln-edge2, #3f4147);box-sizing:border-box;
}
.memdir-table th{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#b5bac1;font-weight:600;white-space:nowrap;cursor:default}
.memdir-th-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;padding:0;cursor:pointer}
.memdir-th-btn:hover,.memdir-th.is-on .memdir-th-btn{color:#fff}
.memdir-th.is-on .memdir-fico{color:var(--accent-brand)}
.memdir-fico{opacity:.7}
.memdir-pop{position:fixed;z-index:80;min-width:240px;max-width:320px;max-height:min(70vh,420px);overflow:auto;background:var(--sf-abyss, #111214);border:1px solid var(--ln-edge2, #3f4147);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.45);padding:6px;color:#dbdee1}
.memdir-pop-h{padding:8px 10px 4px;font-size:12px;color:#b5bac1;font-weight:600}
.memdir-pop-search{padding:6px}
.memdir-pop-search input{width:100%;box-sizing:border-box;border:1px solid var(--ln-edge2, #3f4147);border-radius:8px;background:var(--sf-deep, #1e1f22);color:#dbdee1;padding:7px 8px;font:inherit}
.memdir-pop-list{display:flex;flex-direction:column}
.memdir-pop-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:14px}
.memdir-pop-row:hover{background:var(--sf-panel, #2b2d31)}
.memdir-pop-caret{margin-left:auto;color:#b5bac1}
.memdir-pop-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.memdir-pop-custom{display:none;flex-direction:column;gap:8px;padding:8px 10px 10px;border-top:1px solid var(--ln-edge2, #3f4147)}
.memdir-pop-custom.on{display:flex}
.memdir-pop-custom label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#b5bac1}
.memdir-pop-custom input{border:1px solid var(--ln-edge2, #3f4147);border-radius:8px;background:var(--sf-deep, #1e1f22);color:#dbdee1;padding:6px}
.memdir-row:hover,.memdir-row.on{background:var(--sf-raised, #313338)}
.memdir-row.is-focus{outline:1px solid var(--accent-brand);outline-offset:-1px}
.memdir-check{width:36px}
.memdir-who{display:flex;align-items:center;gap:10px;min-width:160px}
.memdir-who b{display:block;font-size:14px;font-weight:600;color:#f2f3f5}
.memdir-who small{display:block;color:#b5bac1;font-size:12px}
.memdir-join .memdir-link{color:#00a8fc;font-family:ui-monospace,Consolas,monospace;font-size:12px}
.memdir-table tbody tr:last-child td{border-bottom:0}
.memdir-roles-inner,.memdir-signals-inner{
  /* одна строка, как в Discord — без вертикальной «толщины» */
  display:flex;align-items:center;gap:5px;flex-wrap:nowrap;min-height:22px;overflow:hidden;
}
.memdir-role{
  display:inline-flex;align-items:center;gap:5px;padding:1px 6px 1px 5px;border-radius:8px;
  background:var(--sf-deep, #1e1f22);border:1px solid color-mix(in srgb, var(--role,#99aab5) 65%, var(--ln-deep, #1e1f22));
  color:var(--role,#dbdee1);font-size:11px;line-height:16px;font-weight:600;max-width:140px;
  flex:0 1 auto;min-width:0;white-space:nowrap;
}
.memdir-role .name-emoji{font-size:12px;line-height:1}
.memdir-role-more{flex:0 0 auto;color:#b5bac1;border-color:var(--ln-edge2, #3f4147);cursor:default}
.memdir-role-dot{
  width:10px;height:10px;border-radius:50%;flex:0 0 10px;
  background:var(--role,#99aab5);box-shadow:0 0 0 1px rgba(0,0,0,.35);
}
.memdir-role-dot.holo{background:linear-gradient(90deg,#4aa3ff,#7af0ff,#eb459e,#ffb86c)}
.memdir-role-name,.memdir-role .role-name-live{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.memdir-plus{
  box-sizing:border-box;width:22px;height:22px;padding:0;margin:0;border:0;border-radius:8px;
  background:var(--sf-edge2, #3f4147);color:#dbdee1;cursor:pointer;flex:0 0 22px;
  display:inline-flex;align-items:center;justify-content:center;line-height:0;font-size:0;
}
.memdir-plus svg{display:block}
.memdir-muted{color:#6d6f78;display:inline-flex;align-items:center;height:22px;line-height:1}
.memdir-signals{white-space:nowrap}
.memdir-signals .memdir-muted,.memdir-sig{display:inline-flex;align-items:center;justify-content:center;min-width:1.2em;height:22px;line-height:1}
.memdir-acts{white-space:nowrap;text-align:right}
.memdir-ico{width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:#b5bac1;cursor:pointer;vertical-align:middle}
.memdir-ico:hover{background:var(--sf-edge2, #3f4147);color:#fff}
.memdir-ico svg{width:16px;height:16px;display:block;margin:auto}
.memdir-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 4px 0;color:#b5bac1;font-size:13px}
.memdir-count{display:flex;align-items:center;gap:8px}
.memdir-count select{background:var(--sf-deep, #1e1f22);color:#dbdee1;border:1px solid var(--ln-edge2, #3f4147);border-radius:8px;padding:4px 8px}
.memdir-pager{display:flex;align-items:center;gap:4px}
.memdir-pg{
  box-sizing:border-box;width:32px;height:32px;min-width:32px;padding:0;border:0;border-radius:50%;
  background:transparent;color:#dbdee1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font:600 13px/1 var(--font, inherit);font-variant-numeric:tabular-nums;
}
.memdir-pg.on{background:var(--accent-brand);color:#fff}
.memdir-settings-body{padding-top:0}
.boosts-page{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;padding:0;background:var(--bg-chat);user-select:none}
.shell.boosts-mode > .main{background:var(--bg-chat)}
.boosts-page .boosts-page-back{align-self:flex-start;margin:12px 16px 0;padding:8px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;font:inherit;z-index:2}
.boosts-page .boosts-page-back:hover{background:var(--bg-active)}
.boost-page-full{max-width:1200px;margin:0 auto;width:100%}
.boost-cta-row{display:flex;gap:12px;margin:16px 0}
.boost-apply-btn{flex:1}
.boost-gift-btn{flex:1}

.boost-lolka{display:grid;grid-template-columns:minmax(0,1fr) 300px;flex:1;min-height:0;width:100%;height:100%;background:var(--bg-app)}
.boost-lolka-main{overflow:auto;padding:22px 28px 40px;min-width:0}
.boost-lolka-title{margin:0 0 20px;font-size:1.45rem;font-weight:800;letter-spacing:.01em;color:var(--text);display:flex;align-items:center;gap:10px}
.boost-lolka-title .boost-lolka-rocket{width:26px;height:26px;margin:0;filter:none;color:var(--text-muted)}
.boost-lolka-sec{margin:18px 0 0;font-size:1.05rem;font-weight:800;letter-spacing:0;text-transform:none;color:var(--text)}
.boost-lolka-lead{margin:4px 0 14px;font-size:.8rem;line-height:1.4;color:var(--text-muted)}
.boost-lolka-levels,.boost-lolka-extras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:8px;overflow:visible;padding:10px 4px 18px}
.boost-lolka-card{display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:14px 14px 12px;border-radius:20px;background:var(--bg-mod);border:1px solid var(--line-soft);cursor:pointer;min-height:0;position:relative;z-index:0;transform:translateY(0);transition:transform .58s cubic-bezier(.16,1,.3,1),box-shadow .58s cubic-bezier(.16,1,.3,1),background .5s cubic-bezier(.16,1,.3,1),border-color .5s cubic-bezier(.16,1,.3,1)}
.boost-lolka-card:hover{background:var(--bg-hover);transform:translateY(-8px);z-index:4;border-color:var(--line);box-shadow:0 2px 6px rgba(0,0,0,.12),0 22px 48px rgba(0,0,0,.42),0 0 0 1px var(--line-soft)}
.boost-lolka-card-head{display:flex;align-items:center;margin:0 0 12px}
.boost-lolka-rkt{width:36px;height:36px;border-radius:50%;background:var(--bg-active);display:grid;place-items:center;flex-shrink:0;z-index:1}
.boost-lolka-card.on .boost-lolka-rkt,
.boost-lolka-card-head.on .boost-lolka-rkt{background:#eb459e}
.boost-lolka-rkt .boost-lolka-rocket{width:20px;height:20px;margin:0;filter:none}
.boost-lolka-card-bar{position:relative;flex:1;height:5px;margin-left:0;border-radius:0;background:var(--bg-input);overflow:visible}
.boost-lolka-card-bar .fill{position:relative;display:block;height:100%;background:transparent;border-radius:0;min-width:0}
.boost-lolka-card-bar .fill::after{content:none}
.boost-lolka-card.on .boost-lolka-card-bar .fill,
.boost-lolka-card-head.on .boost-lolka-card-bar .fill{background:#eb459e;min-width:10px}
.boost-lolka-card.on .boost-lolka-card-bar .fill::after,
.boost-lolka-card-head.on .boost-lolka-card-bar .fill::after{content:"";position:absolute;right:-3px;top:50%;width:7px;height:7px;background:#eb459e;transform:translateY(-50%) rotate(45deg)}
.boost-lolka-rocket{display:block;margin:0 auto 10px;filter:none}
.boost-lolka-rocket.emoji3d{filter:drop-shadow(0 8px 16px rgba(235,69,158,.28))}
.boost-lolka-card h3{margin:0 0 10px;font-size:1.05rem;font-weight:800;color:var(--text)}
.boost-lolka-perks{list-style:none;margin:0 0 8px;padding:0;width:100%;text-align:left;display:flex;flex-direction:column;gap:7px}
.boost-lolka-perks li{display:flex;align-items:flex-start;gap:8px;font-size:.78rem;color:var(--text-normal);line-height:1.3}
.boost-lolka-pico{flex-shrink:0;width:16px;height:16px;margin-top:1px;color:var(--text-muted)}
.boost-lolka-pico svg{width:16px;height:16px;display:block}
.boost-pico-live{display:block;position:relative;width:16px;height:16px;border-radius:50%;overflow:hidden;background:var(--sf-panel, #2b2d31);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.boost-pico-live img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:auto}
.boost-pico-live.anim-banner{border-radius:6px;height:11px;margin-top:3px}
.boost-pico-live.gif-icon b{position:absolute;right:-1px;bottom:-1px;z-index:1;font-size:5px;font-weight:900;line-height:1;letter-spacing:0;padding:1px 2px;border-radius:6px;background:#eb459e;color:#fff}
.boost-perk-ico .boost-pico-live{width:22px;height:22px}
.boost-perk-ico .boost-pico-live.anim-banner{width:22px;height:14px;margin-top:4px}
.boost-lolka-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:10px}
.boost-lolka-cost,
.boost-need-meta{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;color:#8b8f96}
.boost-need-meta.on,
.boost-lolka-cost.on{color:#eb459e}
.boost-need-meta .boost-lolka-rocket,
.boost-lolka-cost .boost-lolka-rocket{width:16px;height:16px;margin:0;flex-shrink:0;filter:none}
.boost-need-meta.on .boost-lolka-rocket,
.boost-lolka-cost.on .boost-lolka-rocket,
.boost-lolka-rocket.outline.is-on{filter:drop-shadow(0 0 4px rgba(235,69,158,.95)) drop-shadow(0 0 10px rgba(235,69,158,.45))}
.boost-lolka-ok{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;color:#23a55a}
.boost-lolka-ok i{width:16px;height:16px;border-radius:50%;background:#23a55a;color:#fff;font-style:normal;font-size:11px;display:inline-flex;align-items:center;justify-content:center}
.boost-lolka-go{border:0;background:transparent;padding:0;font:inherit;font-size:.82rem;font-weight:700;color:#eb459e;cursor:pointer}
.boost-lolka-go:hover{color:#ff73c7}
.boost-lolka-act{margin-top:auto;width:100%;border:0;border-radius:12px;padding:11px 14px;font:inherit;font-weight:700;font-size:.92rem;color:#fff;background:#eb459e;cursor:pointer}
.boost-lolka-act:hover:not(:disabled){background:#f047c2}
.boost-lolka-act:disabled{opacity:.55;cursor:default}
.boost-lolka-rail{overflow:auto;padding:22px 18px 28px;background:var(--bg-mod);border-left:1px solid var(--line);display:flex;flex-direction:column;align-items:stretch}
.boost-lolka-cta-box{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 14px 16px;border:1px solid #eb459e;border-radius:20px;margin-bottom:4px}
.boost-lolka-art{margin:4px 0 12px;overflow:visible}
.boost-lolka-art .boost-lolka-rocket{width:88px;height:88px;overflow:visible}
.boost-lolka-art .boost-lolka-rocket.emoji3d{animation:boost-rkt-fly 1.35s ease-in-out infinite}
.boost-lolka-art .boost-rkt-flame{
  transform-box:fill-box;
  transform-origin:50% 8%;
  animation:boost-rkt-flame .22s ease-in-out infinite alternate;
}
.boost-lolka-art .boost-rkt-flame-inner{
  transform-box:fill-box;
  transform-origin:50% 12%;
  animation:boost-rkt-flame-inner .16s ease-in-out infinite alternate;
}
.boost-lolka-art .boost-rkt-flame-core{
  transform-box:fill-box;
  transform-origin:50% 20%;
  animation:boost-rkt-flame-core .12s ease-in-out infinite alternate;
}
@keyframes boost-rkt-fly{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(3px,-4px)}
}
@keyframes boost-rkt-flame{
  0%{transform:scaleX(1.1) scaleY(.72)}
  100%{transform:scaleX(.84) scaleY(1.32)}
}
@keyframes boost-rkt-flame-inner{
  0%{transform:scaleX(.92) scaleY(.68);opacity:.82}
  100%{transform:scaleX(1.08) scaleY(1.38);opacity:1}
}
@keyframes boost-rkt-flame-core{
  0%{transform:scale(.75,.6);opacity:.65}
  100%{transform:scale(1.15,1.45);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .boost-lolka-art .boost-lolka-rocket.emoji3d,
  .boost-lolka-art .boost-rkt-flame,
  .boost-lolka-art .boost-rkt-flame-inner,
  .boost-lolka-art .boost-rkt-flame-core{animation:none !important}
}
.boost-lolka-become{margin:0 0 8px;font-size:1.05rem;font-weight:800;color:#eb459e}
.boost-lolka-rail-lead{margin:0 0 16px;font-size:.78rem;line-height:1.4;color:var(--text-normal)}
.boost-lolka-cta{width:100%;border:0;border-radius:26px;padding:12px 16px;font:inherit;font-weight:800;font-size:.95rem;color:#fff;background:#eb459e;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.boost-lolka-cta .boost-lolka-rocket{width:18px;height:18px;margin:0;filter:none}
.boost-lolka-cta:hover{background:#f047c2}
.boost-lolka-gift{width:100%;margin-top:10px;border:0;background:transparent;color:var(--text-muted);font:inherit;font-size:.8rem;cursor:pointer;text-decoration:underline}
.boost-lolka-gift:hover{color:var(--text)}
.boost-lolka-buy{width:100%;margin-top:10px;border:1px solid #eb459e;border-radius:26px;padding:10px 16px;font:inherit;font-weight:800;font-size:.9rem;color:#fff;background:transparent;cursor:pointer}
.boost-lolka-buy:hover{background:rgba(235,69,158,.18);color:#fff}
.gs-store-btn{display:block;width:100%;box-sizing:border-box;text-align:center;margin:0 0 8px;padding:11px 12px;border-radius:12px;background:var(--sf-panel, #2b2d31);color:#fff!important;text-decoration:none;font-weight:750;font-size:.9rem}
.gs-store-btn:hover{background:var(--sf-raised2, #35373c);filter:brightness(1.05)}
.gs-dlc-empty{margin:4px 2px 0;opacity:.78;font-size:.85rem}
.boost-lolka-recent{padding-top:16px}
.boost-lolka-recent h3{margin:0 0 12px;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.boost-lolka-feed-row{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:.82rem;line-height:1.25}
.boost-lolka-feed-rkt{width:16px;height:16px;flex-shrink:0;display:grid;place-items:center}
.boost-lolka-feed-rkt .boost-lolka-rocket{width:16px;height:16px;margin:0;filter:none}
.boost-lolka-feed-who{font-weight:800;color:#eb459e;flex-shrink:0}
.boost-lolka-feed-who.me{background:linear-gradient(90deg,#4aa3ff,#7af0ff,#eb459e,#ffb86c,#4aa3ff);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:boost-nick-flow 2.8s linear infinite}
.boost-lolka-feed-act{color:var(--text-muted)}
.boost-lolka-feed-row time{margin-left:auto;color:var(--text-muted);font-size:.75rem;flex-shrink:0}
.boost-nick-flow{font-size:1.45rem;font-weight:800;letter-spacing:.02em;line-height:1.2;border:0;padding:0;background:linear-gradient(90deg,#4aa3ff,#7af0ff,#eb459e,#ffb86c,#4aa3ff);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 12px rgba(80,180,255,.4));animation:boost-nick-flow 2.8s linear infinite}
/* Бесшовный цикл переливов: конец кадра = целое число периодов плитки S/(S-100). Для 280% период 155.5556%, берём два — тот же темп. Другой background-size → элемент задаёт --flow-end сам. */
@keyframes boost-nick-flow{0%{background-position:0% 50%}100%{background-position:var(--flow-end,311.1111%) 50%}}
.boost-lolka-extras{align-items:stretch}
.boost-lolka .boost-extra-card.camp.lolka{display:flex;flex-direction:column;height:100%;background:var(--bg-mod);border:1px solid var(--line-soft);border-radius:20px;padding:0;gap:0;overflow:hidden;cursor:pointer;position:relative;z-index:0;transform:translateY(0);transition:transform .58s cubic-bezier(.16,1,.3,1),box-shadow .58s cubic-bezier(.16,1,.3,1),background .5s cubic-bezier(.16,1,.3,1),border-color .5s cubic-bezier(.16,1,.3,1)}
.boost-lolka .boost-extra-card.camp.lolka:hover{background:var(--bg-hover);transform:translateY(-8px);z-index:4;border-color:var(--line);box-shadow:0 2px 6px rgba(0,0,0,.12),0 22px 48px rgba(0,0,0,.42),0 0 0 1px var(--line-soft)}
.boost-lolka .boost-extra-stage.lolka{height:148px;min-height:148px;flex-shrink:0;border:0;border-radius:0;background:var(--sf-app3, #0b0c0e);display:flex;align-items:center;justify-content:center;overflow:hidden}
.lolka-pills.stack{position:relative;width:156px;height:88px}
.lolka-pills.stack .lolka-pill.blue{position:absolute;top:2px;left:28px;z-index:2;animation:lolka-float-a 3.1s ease-in-out infinite}
.lolka-pills.stack .lolka-pill.pink{position:absolute;top:44px;left:0;z-index:1;animation:lolka-float-b 3.5s ease-in-out infinite .35s}
.lolka-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 15px 8px 11px;border-radius:999px;color:#fff;font-weight:800;font-size:.9rem;letter-spacing:.04em;line-height:1;border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 22px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.32);transition:none !important}
.lolka-pill.blue{background:linear-gradient(180deg,#5b9fff 0%,#3b82f6 55%,#2563eb 100%)}
.lolka-pill.pink{background:linear-gradient(180deg,#ff7ac4 0%,#ec4899 55%,#db2777 100%)}
.lolka-pill.red{background:linear-gradient(180deg,#ff5d78 0%,#e11d48 60%,#be123c 100%)}
.lolka-pill.navy{background:linear-gradient(180deg,#4b6fa8 0%,#2d4a7a 60%,#1e355c 100%)}
.lolka-pill.green{background:linear-gradient(180deg,#3d8f4a 0%,#1f6b2c 60%,#145220 100%)}
.lolka-pill.gray{background:linear-gradient(180deg,#6b7280 0%,#4b5563 60%,#374151 100%)}
.lolka-pill b{font:inherit;padding:0;color:#fff}
.lolka-pill-ico{width:17px;height:17px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.lolka-px{display:block;flex-shrink:0;image-rendering:pixelated}
.lolka-badge-cycle{position:relative;width:148px;height:44px}
.lolka-badge-cycle .lolka-pill{position:absolute;left:50%;top:50%;opacity:0;animation:lolka-badge-swap 8s ease-in-out infinite}
.lolka-badge-cycle .lolka-pill:nth-child(1){animation-delay:0s}
.lolka-badge-cycle .lolka-pill:nth-child(2){animation-delay:-2s}
.lolka-badge-cycle .lolka-pill:nth-child(3){animation-delay:-4s}
.lolka-badge-cycle .lolka-pill:nth-child(4){animation-delay:-6s}
.lolka-style-name{font-size:1.7rem;font-weight:800;letter-spacing:.01em;background:linear-gradient(90deg,#4aa3ff,#7af0ff,#5cff6a,#ffb86c,#eb459e,#4aa3ff);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgba(80,255,140,.45));animation:boost-nick-flow 2.8s linear infinite}
.lolka-extra-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.boost-lolka .boost-extra-card.camp.lolka b{padding:0;font-size:1rem;color:var(--text)}
.boost-lolka .boost-extra-card.camp.lolka .hint{padding:0;margin:0;color:var(--text-muted);font-size:.8rem;line-height:1.35;min-height:2.55em}
.lolka-extra-meta{display:flex;align-items:center;gap:6px;color:var(--text-normal);font-size:.82rem;margin:4px 0 6px}
.lolka-extra-meta .boost-need-meta{margin-right:auto}
.lolka-lock{margin-left:auto;color:#b5bac1;flex-shrink:0}
.lolka-extra-cta{width:100%;margin-top:auto;border:0;border-radius:26px;padding:11px 14px;font:inherit;font-weight:700;font-size:.92rem;color:#fff;background:#eb459e;cursor:pointer}
.lolka-extra-cta:hover:not(.locked):not(.on){background:#f047c2}
.lolka-extra-cta.locked{background:#4a303c;color:#c48aa4}
.lolka-extra-body > .boost-lolka-ok{margin-top:auto;align-self:flex-end;padding:4px 0}
.camp-tag-demo.flat{perspective:none;transform-style:flat;flex-direction:row;gap:12px;justify-content:center}
@keyframes lolka-float-a{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes lolka-float-b{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes lolka-badge-swap{
  0%{opacity:0;transform:translate(-50%,-42%) scale(.94)}
  6%,20%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  26%,100%{opacity:0;transform:translate(-50%,-60%) scale(.94)}
}
@keyframes lolka-green-pulse{
  0%,100%{text-shadow:0 0 8px #3dff7a,0 0 20px rgba(60,255,120,.55)}
  50%{text-shadow:0 0 14px #6fff9a,0 0 32px rgba(80,255,140,.9)}
}
body.a11y-reduce-motion .lolka-pills .lolka-pill,
body.a11y-reduce-motion .lolka-style-name,
body.a11y-reduce-motion .lolka-badge-cycle .lolka-pill,
body.a11y-reduce-motion .boost-lolka-art .boost-lolka-rocket.emoji3d,
body.a11y-reduce-motion .boost-lolka-art .boost-rkt-flame,
body.a11y-reduce-motion .boost-lolka-art .boost-rkt-flame-inner,
body.a11y-reduce-motion .boost-lolka-art .boost-rkt-flame-core{animation:none !important}
body.a11y-reduce-motion .lolka-badge-cycle .lolka-pill{opacity:0}
body.a11y-reduce-motion .lolka-badge-cycle .lolka-pill:first-child{opacity:1;transform:translate(-50%,-50%)}
/* Folk wallpaper lives on body::before — boosts used to paint Discord grey over it. */
html.theme-folk .boosts-page,
html.theme-folk .shell.boosts-mode > .main,
html.theme-folk .boost-lolka,
html.theme-folk .boost-lolka-main,
html.theme-folk .boost-lolka-rail,
html.theme-folk .boost-lolka .boost-extra-stage.styles.rich.bare,
body.theme-folk .boosts-page,
body.theme-folk .boost-lolka,
body.theme-folk .boost-lolka-rail {
  background: transparent !important;
  background-image: none !important;
}
html.theme-folk .boost-extra-stage.lolka,
body.theme-folk .boost-extra-stage.lolka {
  background: #0b0c0e !important;
}
html.theme-folk .boost-lolka-card,
html.theme-folk .boost-lolka .boost-extra-card.camp,
body.theme-folk .boost-lolka-card,
body.theme-folk .boost-lolka .boost-extra-card.camp {
  background: color-mix(in srgb, var(--bg-mod) 72%, transparent);
}
html.theme-folk .boost-lolka-card:hover,
html.theme-folk .boost-lolka .boost-extra-card.camp:hover,
body.theme-folk .boost-lolka-card:hover,
body.theme-folk .boost-lolka .boost-extra-card.camp:hover {
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
}
@media (max-width: 1100px) {
  .boost-lolka-levels,.boost-lolka-extras{grid-template-columns:1fr}
}
@media (max-width: 980px) {
  .boost-lolka{grid-template-columns:1fr;overflow:auto}
  .boost-lolka-main,.boost-lolka-rail{overflow:visible}
  .boost-lolka-rail{border-left:0;border-top:1px solid var(--line)}
}

.boosts-solo-backdrop {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.boosts-solo-modal {
  width: min(1080px, 96vw) !important;
  max-width: 1080px !important;
  max-height: min(90vh, 920px);
  border-radius: 20px !important;
  overflow: hidden;
  background: rgba(22, 22, 26, 0.92) !important;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  display: block !important;
  grid-template-columns: none !important;
}
.boosts-solo-modal .modal-panel {
  display: block;
  background: transparent !important;
  position: relative;
  max-height: min(90vh, 920px);
  overflow: hidden;
}
.boosts-solo-x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
}
.boosts-solo-body {
  padding: 28px 36px 36px;
  max-height: min(90vh, 920px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.boost-solo-page { max-width: 100%; }
.boost-solo-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 40px 8px 0;
  flex-wrap: wrap;
}
.boost-solo-head h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.35rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.boost-stat-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 14px;
}
.boost-stat-card {
  border-radius: 20px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.07);
  padding: 16px 14px;
  text-align: center;
}
.boost-stat-card b {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  color: #f47fff;
  line-height: 1.1;
}
.boost-stat-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  font-size: .78rem;
  color: var(--text-muted, #949ba4);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.boost-gift-btn.wide {
  width: 100%;
  margin: 0 0 18px;
  padding: .85rem 1rem;
  font-size: 1rem;
}
.boost-recent-block {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.14);
  padding: 14px 16px 10px;
  margin-bottom: 22px;
}
.boost-recent-block h3,
.boost-sec-h {
  margin: 0 0 10px;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted, #949ba4);
}
.boost-sec-h { margin-top: 8px; }
.boost-act-list { display: flex; flex-direction: column; gap: 8px; }
.boost-act-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 2px;
}
.boost-act-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.boost-act-meta time {
  font-size: 12px;
  color: var(--text-muted);
}
.boost-gem-anim {
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(244,127,255,.45));
  animation: boost-gem-float 2.8s ease-in-out infinite;
}
.boost-gem-anim.head { animation-duration: 2.2s; }
.boost-gem-anim.dim {
  filter: grayscale(.35) brightness(.85);
  opacity: .7;
  animation: none;
}
.boost-gem-anim.on {
  animation: boost-gem-pulse 1.6s ease-in-out infinite;
}
@keyframes boost-gem-float {
  0%, 100% { transform: translateY(0) rotate(-2deg) scale(1); }
  50% { transform: translateY(-3px) rotate(2deg) scale(1.06); }
}
@keyframes boost-gem-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(244,127,255,.35)); }
  50% { transform: scale(1.12); filter: drop-shadow(0 0 12px rgba(244,127,255,.7)); }
}
.boost-gem-expired {
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.boost-gem-expired img {
  width: 22px;
  height: 22px;
  filter: grayscale(1) brightness(.7);
  animation: none !important;
  opacity: .85;
}
.boost-gem-expired i {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid #ed4245;
  pointer-events: none;
}
.boost-gem-expired i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  height: 2px;
  background: #ed4245;
  transform: translate(-50%, -50%) rotate(-40deg);
  border-radius: 6px;
}
.boost-solo-page .boost-lvl-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.boost-solo-page .boost-extra-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 820px) {
  .boosts-solo-body { padding: 20px 16px 24px; }
  .boost-stat-cards,
  .boost-solo-page .boost-lvl-grid,
  .boost-solo-page .boost-extra-grid {
    grid-template-columns: 1fr;
  }
}

/* === 1.12.45: friends Discord-like + profile activity === */
.friends-headbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.friends-head-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #fff;
  margin-right: 4px;
}
.friends-head-title svg { opacity: .9; }
.friends-headbar .home-tabs { margin: 0; flex: 1 1 auto; }
.friends-search{display:flex;align-items:center;gap:8px;padding:6px 12px;margin-bottom:6px}
.friends-search input{flex:1;background:var(--sf-deep, #1e1f22);border:1px solid var(--ln-deep, #1e1f22);border-radius:12px;padding:7px 12px;color:var(--text,#e3e5e8);font:inherit;outline:none;font-size:13px}
.friends-search input:focus{border-color:var(--accent,#ff6a1a)}
.friends-search-count{font-size:12px;color:#949ba4;min-width:0;white-space:nowrap}
.friends-add-btn {
  margin-left: auto;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  background: #248046;
  box-shadow: none;
  transition: background .15s ease, filter .15s ease;
  animation: none;
}
.friends-add-btn:hover {
  filter: none;
  transform: none;
  background: #1a6334;
  box-shadow: none;
  animation: none;
}
.friends-add-btn:active { transform: none; background: #165b2f; }
.friends-add-btn.on,
.friends-add-btn.solid {
  animation: none;
  background: #248046;
}
.friends-add-btn.on:hover,
.friends-add-btn.solid:hover { background: #1a6334; }
@keyframes friends-add-pulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: none; }
}
.friend-ico-btn {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, .25) !important;
  color: var(--text-muted, #b5bac1) !important;
  border: 0;
  cursor: pointer;
  opacity: .92;
}
.friend-ico-btn:hover {
  color: #fff !important;
  background: rgba(0, 0, 0, .4) !important;
  opacity: 1;
}
.friend-ico-btn svg { width: 18px; height: 18px; }

.friends-activity-empty {
  padding: 16px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  text-align: center;
}
.friends-activity-empty b {
  display: block;
  color: #fff;
  font-size: 15px;
  margin-bottom: 6px;
}
.friends-activity-empty p {
  margin: 0;
  color: #949ba4;
  font-size: 13px;
  line-height: 1.4;
}
.activity-live,
.activity-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.activity-card {
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.06);
  padding: 10px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.activity-card:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
}
.activity-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.activity-card-head .meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.activity-card-head .meta b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activity-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.activity-card-art {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  background: var(--sf-app2, #0c0c0e);
  display: block;
}

.up-tabs .up-tab-ico {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
}
.up-tabs .up-tab-ico .up-tab-n {
  font-size: 12px;
  font-weight: 700;
  min-width: 1ch;
}
.up-act-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.up-act-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
  text-decoration: none;
  color: inherit;
}
.up-act-card:hover { background: rgba(255,255,255,.05); }
/* === 1.12.46: boost level / extras modals (Discord-like, CAMP) === */
button.boost-lvl-card,
button.boost-extra-card {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s, background .15s, transform .12s;
}
button.boost-lvl-card:hover,
button.boost-extra-card:hover {
  border-color: rgba(244,127,255,.55);
  background: rgba(244,127,255,.1);
  transform: translateY(-1px);
}
.boost-lvl-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  margin: 4px 0 8px;
}
.boost-lvl-mini-perk {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .78rem;
  line-height: 1.3;
  color: var(--muted, #b5bac1);
}
.boost-lvl-mini-perk .boost-perk-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #949ba4;
  margin-top: 1px;
}
.boost-lvl-mini-perk .boost-perk-ico svg { width: 16px; height: 16px; display: block; }
.boost-extra-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  color: #949ba4;
}
.boost-extra-top svg { width: 22px; height: 22px; }
.boost-extra-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.boost-solo-page .boost-extra-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .boost-extra-grid.four,
  .boost-solo-page .boost-extra-grid.four { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .boost-extra-grid.four,
  .boost-solo-page .boost-extra-grid.four { grid-template-columns: 1fr !important; }
}

.boost-lvl-backdrop {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.62) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 12000;
}
.boost-lvl-modal {
  width: min(520px, 94vw) !important;
  max-width: 520px !important;
  max-height: min(92vh, 860px);
  border-radius: 20px !important;
  overflow: hidden;
  user-select: none;
  background: var(--sf-deep, #1e1f22) !important;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 28px 90px rgba(0,0,0,.65);
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  grid-template-columns: none !important;
}
.boost-lvl-hero {
  position: relative;
  padding: 28px 24px 18px;
  text-align: center;
  background: linear-gradient(180deg, #3a1f4a 0%, var(--sf-deep, #1e1f22) 100%);
}
.boost-lvl-hero.lv-2 {
  background: linear-gradient(180deg, #4a1f3a 0%, var(--sf-deep, #1e1f22) 100%);
}
.boost-lvl-hero.lv-3 {
  background: linear-gradient(180deg, #4a2f1a 0%, var(--sf-deep, #1e1f22) 100%);
}
.boost-lvl-hero.extra.tag {
  background: linear-gradient(180deg, #1f274a 0%, var(--sf-deep, #1e1f22) 100%);
}
.boost-lvl-hero.extra.badges {
  background: linear-gradient(180deg, #1f3a2a 0%, var(--sf-deep, #1e1f22) 100%);
}
.boost-lvl-hero.extra.styles {
  background: linear-gradient(180deg, #3a1f4a 0%, var(--sf-deep, #1e1f22) 100%);
}
.boost-lvl-hero.extra.banner {
  background: linear-gradient(180deg, #1a2f4a 0%, var(--sf-deep, #1e1f22) 100%);
}
.boost-lvl-x {
  position: absolute !important;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  color: #b5bac1 !important;
}
.boost-lvl-hero-gem {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
.boost-lvl-hero-gem img { width: 88px; height: 88px; }
.boost-lvl-hero h2 {
  margin: 0 0 6px;
  font-size: 1.45rem;
  font-weight: 800;
  color: #fff;
}
.boost-lvl-needline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #f47fff;
  font-weight: 700;
  font-size: .95rem;
}
.boost-lvl-body {
  padding: 8px 22px 22px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.boost-perk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin: 8px 0 16px;
}
.boost-perk-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .86rem;
  line-height: 1.35;
  color: #dbdee1;
}
.boost-perk-ico {
  color: #949ba4;
  flex-shrink: 0;
  display: inline-flex;
  margin-top: 1px;
}
.boost-perk-ico svg { display: block; }
.boost-lvl-enable {
  width: 100%;
  margin-top: 14px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: .85rem 1rem !important;
  font-size: 1rem !important;
}
.boost-extra-lead { margin: 0 0 12px; text-align: center; }

.boost-visual-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.blv-card {
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.06);
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 96px;
}
.blv-card.wide { grid-column: span 1; }
.blv-card > span {
  font-size: .68rem;
  color: #949ba4;
  text-align: center;
  line-height: 1.25;
}
.blv-anim-icon {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ff7a59, #f47fff 55%, #7b5cff);
  animation: blv-icon-bob 2.2s ease-in-out infinite;
  overflow: hidden;
}
.blv-anim-icon.gif::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35), transparent 70%);
  animation: blv-shine 2.4s linear infinite;
}
.blv-guild {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  object-fit: cover;
  z-index: 1;
}
.blv-guild.letter {
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.25);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
}
.blv-ring {
  position: absolute;
  inset: -3px;
  border-radius: 24px;
  border: 2px solid rgba(255,255,255,.45);
  animation: blv-ring-pulse 1.8s ease-out infinite;
  pointer-events: none;
}
.blv-gif-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  z-index: 2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 5px;
  border-radius: 8px;
  background: #f47fff;
  color: var(--tx-deep, #1e1f22);
}
.blv-emoji-row {
  display: flex;
  gap: 4px;
  height: 36px;
  align-items: center;
}
.blv-emoji-row i {
  width: 22px;
  height: 22px;
  border-radius: 10px;
  display: block;
  animation: blv-emoji-bounce 1.6s ease-in-out infinite;
}
.blv-emoji-row i:nth-child(1) { background: radial-gradient(circle at 30% 30%, #ffe66d, #f0a500); animation-delay: 0s; }
.blv-emoji-row i:nth-child(2) { background: radial-gradient(circle at 30% 30%, #ff8a65, #e53935); animation-delay: .1s; }
.blv-emoji-row i:nth-child(3) { background: radial-gradient(circle at 30% 30%, #ffb74d, #ef6c00); animation-delay: .2s; }
.blv-emoji-row i:nth-child(4) { background: radial-gradient(circle at 30% 30%, #ce93d8, #8e24aa); animation-delay: .3s; }
.blv-emoji-row i:nth-child(5) { background: radial-gradient(circle at 30% 30%, #90caf9, #1e88e5); animation-delay: .4s; }
.blv-stream {
  min-width: 64px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--sf-panel, #2b2d31), var(--sf-deep, #1e1f22));
  border: 1px solid rgba(244,127,255,.35);
  color: #f47fff;
  font-weight: 800;
  font-size: .95rem;
  text-align: center;
}
.blv-banner,
.blv-banner-preview {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, #ff7a59, #f47fff 45%, #5b8dff);
}
.blv-banner.soft {
  background:
    linear-gradient(105deg, #3a1f4a, #f47fff55 40%, #1a2f4a);
}
.blv-banner.anim,
.blv-banner-preview.anim {
  background: linear-gradient(120deg, #ff7a59, #f47fff, #7b5cff, #ff7a59);
  background-size: 300% 100%;
  animation: blv-banner-flow 3.5s linear infinite;
}
.blv-banner .blv-gif-badge { right: 4px; bottom: 4px; }
.blv-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
.blv-roles.big { gap: 8px; margin-bottom: 8px; }
.blv-role {
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
}
.blv-role.g1 { background: linear-gradient(90deg, #ff7a59, #f47fff); }
.blv-role.g2 { background: linear-gradient(90deg, #5b8dff, #a78bfa); }
.blv-role.g3 { background: linear-gradient(90deg, #34d399, #fbbf24); color: #111; }
.blv-role.anim {
  background-size: 200% 100%; --flow-end: 200%;
  animation: blv-banner-flow 2.8s linear infinite;
  font-size: .85rem;
  padding: 6px 12px;
}
.blv-vanity {
  font-size: .72rem;
  color: #b5bac1;
  padding: 8px;
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  word-break: break-all;
}
.blv-vanity b { color: #f47fff; }
.boost-extra-visual { margin: 4px 0 8px; }
.blv-tag-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.06);
}
.blv-nick { font-weight: 700; color: #fff; }
.blv-nick.grad {
  background: linear-gradient(90deg, #ff7a59, #f47fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.blv-clan-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 8px;
  background: var(--sf-panel, #2b2d31);
  color: #dbdee1;
  border: 1px solid rgba(255,255,255,.12);
}
.blv-clan-tag.pink {
  background: rgba(244,127,255,.18);
  color: #f47fff;
  border-color: rgba(244,127,255,.45);
}
.blv-badge-packs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.blv-pack {
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.07);
  padding: 12px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.blv-pack span { font-size: 1.25rem; letter-spacing: 2px; }
.blv-pack b { font-size: .78rem; color: #fff; }
.blv-pack small {
  position: absolute;
  top: 6px;
  right: 8px;
  color: #f47fff;
  font-weight: 800;
}
.blv-banner-preview {
  height: 88px;
  margin-bottom: 8px;
}
@keyframes blv-icon-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.04); }
}
@keyframes blv-ring-pulse {
  0% { opacity: .8; transform: scale(.95); }
  100% { opacity: 0; transform: scale(1.15); }
}
@keyframes blv-shine {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
@keyframes blv-emoji-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes blv-banner-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: var(--flow-end, 150%) 50%; }
}
@media (max-width: 480px) {
  .boost-perk-grid { grid-template-columns: 1fr; }
  .boost-visual-strip { grid-template-columns: 1fr; }
  .blv-badge-packs { grid-template-columns: 1fr; }
}

/* === 1.12.47: CAMP rubies, manual levels, extras showcases === */
.boost-gem-anim.camp-ruby {
  filter: drop-shadow(0 0 6px rgba(230, 74, 25, .55));
}
.boost-gem-anim.camp-ruby.lv-1 { filter: drop-shadow(0 0 4px rgba(230, 74, 25, .4)); }
.boost-gem-anim.camp-ruby.lv-2 { filter: drop-shadow(0 0 8px rgba(255, 179, 0, .45)); }
.boost-gem-anim.camp-ruby.lv-3 {
  filter: drop-shadow(0 0 14px rgba(255, 106, 26, .7));
}
.boost-lvl-card.camp .boost-lvl-gem {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 64px;
  opacity: 1;
}
.boost-lvl-card.camp .boost-lvl-gem.sz-1 { min-height: 40px; }
.boost-lvl-card.camp .boost-lvl-gem.sz-2 { min-height: 52px; }
.boost-lvl-card.camp .boost-lvl-gem.sz-3 { min-height: 72px; }
.boost-lvl-card.camp.on {
  border-color: rgba(255, 106, 26, .55);
  background: rgba(230, 74, 25, .1);
}
.boost-lvl-hero.camp {
  background: linear-gradient(180deg, #3a1a0c 0%, var(--sf-deep, #1e1f22) 100%) !important;
}
.boost-lvl-hero.camp.lv-2 {
  background: linear-gradient(180deg, #3a2208 0%, var(--sf-deep, #1e1f22) 100%) !important;
}
.boost-lvl-hero.camp.lv-3 {
  background: linear-gradient(180deg, #4a1408 0%, var(--sf-deep, #1e1f22) 100%) !important;
}
.boost-lvl-hero.extra.camp.tag {
  background: linear-gradient(180deg, #2a1a08 0%, var(--sf-deep, #1e1f22) 100%) !important;
}
.boost-lvl-hero.extra.camp.badges {
  background: linear-gradient(180deg, #2a1208 0%, var(--sf-deep, #1e1f22) 100%) !important;
}
.boost-lvl-hero.extra.camp.styles {
  background: linear-gradient(180deg, #2a160c 0%, var(--sf-deep, #1e1f22) 100%) !important;
}
.boost-lvl-needline { color: var(--accent, #ff6a1a) !important; }
.boost-stat-card b { color: var(--accent, #ff6a1a) !important; }
.boost-lvl-need { color: var(--accent, #ff6a1a) !important; }
.btn-brand.danger-soft {
  background: #4a1f1f !important;
  border: 1px solid rgba(237, 66, 69, .55);
  color: #ffb4b4 !important;
}
.btn-brand.danger-soft:hover { background: #5c2828 !important; }
.boost-manual-hint { margin: -4px 0 12px; font-size: .82rem; }
.boost-learn-flash {
  animation: boost-learn-flash .9s ease;
}
@keyframes boost-learn-flash {
  0%, 100% { color: var(--text-muted, #949ba4); }
  40% { color: var(--accent-gold, #ffb300); text-shadow: 0 0 12px rgba(255, 179, 0, .45); }
}

.blv-anim-icon.plain {
  background: var(--sf-panel, #2b2d31) !important;
  border: 1px solid rgba(255,255,255,.08);
  animation: none;
}
.blv-anim-icon.plain::after { display: none; }
.blv-guild.spin {
  animation: blv-spin 4.5s linear infinite;
}
@keyframes blv-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.blv-card.center-low {
  justify-content: flex-end;
  padding-bottom: 12px;
}
.blv-card.center-low > :first-child {
  margin-top: auto;
  margin-bottom: 8px;
}
.blv-emoji-row.real {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 40px;
}
.blv-emoji-slot {
  width: 28px;
  height: 28px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .08);
  box-sizing: border-box;
  flex: 0 0 auto;
  animation: blv-emoji-bounce 1.6s ease-in-out infinite;
}
/* Нет своих эмодзи — стандартные жёлтые смайлы вместо пустых квадратов */
.blv-emoji-slot.native {
  font-size: 18px;
  line-height: 1;
  background: transparent;
  border-color: transparent;
}
.blv-emoji-row.real .blv-emoji-slot:nth-child(2) { animation-delay: .08s; }
.blv-emoji-row.real .blv-emoji-slot:nth-child(3) { animation-delay: .16s; }
.blv-emoji-row.real .blv-emoji-slot:nth-child(4) { animation-delay: .24s; }
.blv-emoji-row.real .blv-emoji-slot:nth-child(5) { animation-delay: .32s; }
.blv-emoji-slot img,
.blv-emoji-row.real img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
/* Плитка «Стили ролей» — живой рендер имён, как в редакторе ролей */
.blv-roles.styles-live {
  flex-direction: column;
  gap: 3px;
  align-items: center;
  max-width: 100%;
}
.blv-role-live {
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.35;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blv-role-live .role-name-live { vertical-align: baseline; }
.blv-banner-img {
  width: 100%;
  height: 72px;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  display: block;
  border: 1px solid rgba(255,255,255,.08);
}
.blv-banner-frame {
  position: relative;
  width: 100%;
}
.blv-banner-frame .blv-gif-badge {
  right: 4px;
  bottom: 4px;
  background: var(--accent, #ff6a1a);
  color: #1a0f0a;
}
.blv-gif-badge {
  background: var(--accent, #ff6a1a) !important;
  color: #1a0f0a !important;
}
.blv-stream {
  border-color: rgba(255, 106, 26, .45) !important;
  color: var(--accent-gold, #ffb300) !important;
}
.blv-vanity b { color: var(--accent, #ff6a1a) !important; }

/* Role styles: Chrome / Matte / Neon / Xenon (video 03-38) */
.blv-role.chrome {
  --shine-x: 42%;
  --shine-y: 35%;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(115deg,
      #7a7a7a 0%, #cfcfcf 22%, #ffffff 38%, #a8a8a8 52%, #6e6e6e 68%, #d4d4d4 82%, #8f8f8f 100%);
  color: #1a1a1a !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -2px 4px rgba(0,0,0,.25),
    0 2px 8px rgba(0,0,0,.35);
}
.blv-role.chrome::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at var(--shine-x) var(--shine-y),
    rgba(255,255,255,.85) 0%, rgba(255,255,255,.25) 18%, transparent 42%);
  pointer-events: none;
  mix-blend-mode: soft-light;
}
/* Превью «Улучшенные стили ролей»: градиент/голограмма живьём, как в настройках */
.blv-role.gradlive,
.blv-role.hololive {
  /* только переливающийся текст, без подложки и рамки — как имя в настройках сообщества */
  background: none;
  border: none;
  box-shadow: none;
  text-shadow: none;
  filter: none;
  padding-left: 0;
  padding-right: 0;
}
.blv-role .rs-livetext {
  display: inline-block;
  --flow-end: 220%;
  animation: blv-banner-flow 2.8s linear infinite;
}
.blv-role.hololive .rs-livetext { --flow-end: 280%; animation-duration: 3.6s; }
.blv-role.matte {
  background: #2a221e;
  color: #e8a84a !important;
  border: 1px solid #4a4038;
  box-shadow: none;
  text-shadow: none;
  filter: none;
}
.blv-role.neon {
  --shine-x: 50%;
  --shine-y: 50%;
  background: #120a06;
  color: #ff6a1a !important;
  text-shadow: 0 0 6px #ff6a1a, 0 0 16px rgba(255,106,26,.9);
  border: 1px solid #ff6a1a;
  box-shadow: 0 0 14px rgba(255,106,26,.55), inset 0 0 10px rgba(255,106,26,.15);
}
/* Freon (key still xenon): cool blue — distinct from orange Neon */
.blv-role.chrome.style-live {
  background-size: 240% 100%;
  animation: role-chrome-flow 2.6s linear infinite;
}
.blv-role.neon.style-live {
  animation: role-neon-pulse 1.8s ease-in-out infinite;
}
.blv-role.xenon {
  --shine-x: 45%;
  --shine-y: 40%;
  position: relative;
  overflow: hidden;
  background: #061018;
  color: #5ec8ff !important;
  text-shadow: 0 0 8px #3aa8ff, 0 0 20px rgba(60, 170, 255, .75);
  border: 1px solid #3aa8ff;
  box-shadow: 0 0 18px rgba(50, 160, 255, .55), inset 0 0 12px rgba(40, 140, 255, .22);
}
.blv-role.xenon.style-live {
  animation: role-xenon-pulse 2.2s ease-in-out infinite;
}
@keyframes role-chrome-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: var(--flow-end, 171.4286%) 50%; }
}
@keyframes role-neon-pulse {
  0%, 100% { text-shadow: 0 0 6px #ff6a1a, 0 0 16px rgba(255,106,26,.7); }
  50% { text-shadow: 0 0 12px #ffb300, 0 0 28px rgba(255,180,40,.95); }
}
@keyframes role-xenon-pulse {
  0%, 100% { text-shadow: 0 0 8px #3aa8ff, 0 0 18px rgba(60,170,255,.7); }
  50% { text-shadow: 0 0 14px #7af0ff, 0 0 30px rgba(120,220,255,.95); }
}
.blv-role.xenon::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at var(--shine-x) var(--shine-y),
    rgba(120, 210, 255, .75) 0%, transparent 40%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.blv-role.xl {
  font-size: 1.05rem;
  padding: 8px 16px;
  min-width: 140px;
  text-align: center;
}
.blv-role.sm { font-size: .7rem; padding: 3px 8px; }
.blv-style-showcase { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.blv-style-row { display: flex; justify-content: center; }

/* 3D-ish tag stage (CAMP) */
.blv-tag-3d-stage {
  display: flex;
  justify-content: center;
  gap: 18px;
  perspective: 600px;
  min-height: 110px;
  align-items: center;
  margin-bottom: 10px;
}
.blv-tag-3d {
  position: relative;
  padding: 14px 22px;
  border-radius: 16px;
  font-weight: 900;
  letter-spacing: .08em;
  transform: rotateY(-18deg) rotateX(8deg);
  animation: blv-tag-turn 3.6s ease-in-out infinite;
  box-shadow: 10px 14px 0 rgba(0,0,0,.35), 0 0 24px rgba(255,106,26,.25);
}
.blv-tag-3d.gold { animation-delay: .4s; transform: rotateY(18deg) rotateX(8deg); }
.blv-tag-3d.ember {
  background: linear-gradient(145deg, #ff6a1a, #b71c1c);
  color: #fff8ef;
  border: 2px solid #ffb300;
}
.blv-tag-3d.gold {
  background: linear-gradient(145deg, #ffb300, #e64a19);
  color: #1a0f0a;
  border: 2px solid #fff3e0;
}
.blv-tag-3d.sm {
  padding: 8px 12px;
  font-size: .78rem;
  animation-duration: 4s;
}
.blv-tag-3d b { position: relative; z-index: 1; }
.blv-tag-3d i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35), transparent 70%);
  animation: blv-shine 2.4s linear infinite;
}
@keyframes blv-tag-turn {
  0%, 100% { transform: rotateY(-18deg) rotateX(8deg) translateY(0); }
  50% { transform: rotateY(-8deg) rotateX(4deg) translateY(-6px); }
}
.blv-tag-3d.gold {
  animation-name: blv-tag-turn-r;
}
@keyframes blv-tag-turn-r {
  0%, 100% { transform: rotateY(18deg) rotateX(8deg) translateY(0); }
  50% { transform: rotateY(8deg) rotateX(4deg) translateY(-6px); }
}
.blv-tag-chat {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}
.blv-clan-tag.ember {
  background: rgba(230, 74, 25, .25);
  color: #ff6a1a;
  border-color: rgba(255,106,26,.5);
}
.blv-clan-tag.gold {
  background: rgba(255, 179, 0, .2);
  color: #ffb300;
  border-color: rgba(255,179,0,.5);
}

.blv-badge-showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.blv-pack-card {
  border-radius: 20px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
  padding: 10px 8px;
  text-align: center;
  position: relative;
}
.blv-pack-card small {
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--accent, #ff6a1a);
  font-weight: 800;
}
.blv-pack-art {
  height: 64px;
  border-radius: 16px;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
}
.blv-pack-art.mini { height: 40px; width: 48px; display: inline-block; margin: 0 2px; }
.blv-pack-art.pets {
  background:
    radial-gradient(circle at 30% 40%, #ffb300 0 8px, transparent 9px),
    radial-gradient(circle at 70% 45%, #ff6a1a 0 10px, transparent 11px),
    radial-gradient(circle at 50% 70%, #e64a19 0 7px, transparent 8px),
    #2a1a10;
}
.blv-pack-art.raid {
  background:
    linear-gradient(135deg, transparent 40%, #ff6a1a 41% 59%, transparent 60%),
    linear-gradient(45deg, transparent 40%, #ffb300 41% 59%, transparent 60%),
    #1a100c;
  animation: blv-raid-pulse 2s ease-in-out infinite;
}
.blv-pack-art.ember {
  background:
    radial-gradient(circle at 50% 80%, #ff6a1a, transparent 55%),
    radial-gradient(circle at 30% 60%, #ffb30088, transparent 40%),
    #140c08;
}
@keyframes blv-raid-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}

.boost-extra-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.boost-extra-card.camp {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  cursor: pointer;
  text-align: left;
  overflow: visible;
}
.boost-extra-card.camp.on {
  border-color: rgba(255,106,26,.5);
  background: rgba(230,74,25,.08);
}
.boost-extra-stage {
  min-height: 88px;
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
}
.boost-extra-act {
  width: 100%;
  margin-top: auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .85rem !important;
  padding: .55rem .7rem !important;
}
@media (max-width: 820px) {
  .boost-extra-grid.three { grid-template-columns: 1fr !important; }
  .blv-badge-showcase { grid-template-columns: 1fr; }
}

/* === 1.12.48: distinct ruby models + Discord-like extra modals === */
.boost-gem-anim.camp-ruby.model {
  object-fit: contain;
  image-rendering: auto;
}
.boost-lvl-card.camp .boost-lvl-gem {
  /* same card slot — different SVG compositions read as S/M/L */
  min-height: 72px !important;
  align-items: center !important;
}

/* === 1.12.49: user PNG rubies + 3D turntable + centered level cards === */
.boost-gem-anim.camp-ruby.ico {
  object-fit: contain;
  filter:
    drop-shadow(0 1px 0 rgba(255,180,120,.35))
    drop-shadow(0 3px 4px rgba(80, 0, 10, .65))
    drop-shadow(0 0 6px rgba(255, 50, 60, .55));
  animation: boost-gem-float 2.8s ease-in-out infinite;
}
.boost-perk-ico {
  color: #b5bac1 !important;
  opacity: .95;
}
.boost-perk-ico svg { display: block; }
.ruby-3d {
  --ruby-size: 100px;
  width: var(--ruby-size);
  height: calc(var(--ruby-size) * 1.08);
  margin: 0 auto;
  perspective: 900px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  display: grid;
  place-items: center;
}
.ruby-3d-orbit.look {
  transition: none;
}
.ruby-3d-glow,
.ruby-3d-floor,
.ruby-3d-shine,
.ruby-3d-img.back {
  display: none !important;
}
.ruby-3d-orbit {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
}
.ruby-3d:hover .ruby-3d-orbit {
  will-change: transform, filter;
}
.ruby-3d-img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  pointer-events: none;
  grid-area: 1 / 1;
}
.ruby-3d-img.back {
  transform: translateZ(-10px) scale(1.04);
  filter: blur(.4px) brightness(.45) saturate(1.2);
  opacity: .55;
}
.ruby-3d-img.front {
  transform: translateZ(12px);
  filter: none;
}
@keyframes ruby-shine-sweep {
  0%, 100% { opacity: .45; transform: translateZ(18px) translateX(-6%) rotate(-8deg); }
  50% { opacity: .8; transform: translateZ(18px) translateX(6%) rotate(6deg); }
}
.boost-lvl-card.camp.centered {
  align-items: center;
  text-align: center;
  padding: 1rem .85rem .85rem;
}
.boost-lvl-card.camp.centered > b {
  width: 100%;
  text-align: center;
  margin-top: 4px;
}
.boost-lvl-card.camp.centered .boost-lvl-gem {
  width: 100%;
  min-height: 120px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.boost-lvl-card.camp.centered .boost-lvl-need {
  justify-content: center;
  width: 100%;
}
.boost-lvl-mini.cols {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  width: 100%;
  text-align: left;
  margin: 8px 0 10px;
}
.boost-lvl-mini.cols .boost-lvl-mini-perk {
  font-size: .76rem;
  justify-content: flex-start;
}
.boost-perk-grid.center {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.boost-lvl-hero-gem {
  display: flex;
  justify-content: center;
  min-height: 140px;
  align-items: center;
}
.boost-lvl-hero-gem .ruby-3d {
  --ruby-size: 140px;
}

/* === 1.12.52: Discord extruded clan tags (screen 1 volume), texts FURY / HL3 === */
.camp-tag-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  perspective: 1100px;
  transform-style: preserve-3d;
}
.camp-tag-demo.sm {
  flex-direction: row;
  gap: 20px;
  justify-content: center;
}
.ds-clan-tag {
  --tag-d: 22px;
  --tag-r: 14px;
  position: relative;
  display: inline-block;
  transform-style: preserve-3d;
  transform: rotateX(28deg) rotateY(-32deg) rotateZ(-4deg);
  filter: drop-shadow(18px 26px 22px rgba(0,0,0,.65));
  user-select: none;
}
.ds-clan-tag.outline {
  transform: rotateX(26deg) rotateY(28deg) rotateZ(3deg);
  filter: drop-shadow(-14px 26px 22px rgba(0,0,0,.65));
}
/* Flat 2D Discord-style pills (owner video) */
.ds-clan-tag.flat,
.ds-clan-tag.flat.outline,
.ds-clan-tag.flat.sm,
.camp-tag-demo .ds-clan-tag.flat,
.camp-tag-demo.sm .ds-clan-tag.flat {
  transform: none !important;
  transform-style: flat;
  animation: none !important;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .45));
}
.ds-clan-tag.flat .ds-clan-depth,
.ds-clan-tag.flat .ds-clan-rim {
  display: none !important;
}
.ds-clan-tag.flat .ds-clan-face {
  transform: none;
  gap: 8px;
  padding: 8px 12px 8px 10px;
}
.ds-clan-tag.flat .ds-clan-txt {
  font-size: 1.05rem;
  letter-spacing: .08em;
  text-shadow: none;
}
.ds-clan-tag.flat.fill .ds-clan-face {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 0 rgba(0,0,0,.25);
}
.ds-clan-tag.flat.fill .ds-clan-face::before,
.ds-clan-tag.flat.fill .ds-clan-face::after {
  display: none;
}
.utag.clan-tag.has-ico {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 5px;
  font-size: 11px;
  font-weight: 700;
}
.utag.clan-tag .clan-tag-ico,
.utag.clan-tag img.clan-tag-ico {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
.clan-card .clan-card-title .utag.clan-tag .clan-tag-ico {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
}
.clan-card-pills .ds-clan-ico-img,
.ds-clan-tag.flat .ds-clan-ico-img,
.blv-tag-float .ds-clan-ico-img,
.boost-chat-head .ds-clan-tag img {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
button.utag.clan-tag {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.2;
}
button.utag.clan-tag:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.2);
}
.clan-card {
  position: fixed;
  z-index: 5400;
  width: min(340px, calc(100vw - 16px));
  background: var(--sf-abyss, #111214);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
  color: #dbdee1;
}
.clan-card-banner {
  height: 120px;
  background: var(--sf-panel, #2b2d31);
}
.clan-card-ico-wrap {
  margin: -40px 16px 0;
  width: 80px;
  height: 80px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--sf-deep, #1e1f22);
  box-shadow: 0 0 0 6px var(--sf-abyss, #111214);
}
.clan-card-ico {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.clan-card-ico.letter {
  display: grid;
  place-items: center;
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  background: var(--sf-edge2, #3f4147);
}
.clan-card-body {
  padding: 12px 16px 16px;
}
.clan-card-title {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
}
.clan-card-title b {
  font-size: 16px;
  color: #fff;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clan-card-title .utag.clan-tag {
  flex-shrink: 0;
}
.clan-card-stats,
.clan-card-founded {
  margin-top: 6px;
  font-size: 12px;
  color: #b5bac1;
}
.clan-card-desc {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #dbdee1;
}
.clan-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.clan-card-tags span {
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--sf-panel, #2b2d31);
  font-size: 12px;
}
.clan-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.clan-card-pill {
  display: inline-flex;
  align-items: center;
  cursor: default;
}
.clan-card-pill.on .ds-clan-face {
  box-shadow: inset 0 0 0 2px #23a55a, inset 0 1px 0 rgba(255,255,255,.22);
}
.clan-card-pills .ds-clan-tag.flat .ds-clan-face {
  padding: 7px 12px 7px 9px;
  gap: 7px;
  border-radius: 16px;
  background: var(--sf-panel, #2b2d31);
}
.clan-card-pills .ds-clan-ico-img {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
}
.clan-card-pills .ds-clan-txt {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.clan-card-use {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: #248046;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.clan-card-use:hover {
  filter: brightness(1.08);
}
.clan-card-use:disabled {
  opacity: 0.65;
  cursor: default;
  filter: none;
}
html.theme-light .clan-card,
body.theme-light .clan-card {
  background: #fff;
  color: #1a1410;
}
html.theme-light .clan-card-title b,
body.theme-light .clan-card-title b {
  color: #1a1410;
}
html.theme-light .clan-card-ico-wrap,
body.theme-light .clan-card-ico-wrap {
  box-shadow: 0 0 0 6px #fff;
}
.ds-clan-ico-tint {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-block;
  background-color: var(--tag-ico-c, #fff);
  -webkit-mask-image: var(--ico);
  mask-image: var(--ico);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  image-rendering: pixelated;
}
.ds-clan-ico-tint.swatch {
  width: 18px;
  height: 18px;
}
.ds-clan-tag.live .ds-clan-face,
.ds-clan-tag.live.orig-ico .ds-clan-face,
.ds-clan-tag.live:not([style*="--tag-c"]) .ds-clan-face {
  /* Grey like Discord — colour applies to the icon only */
  background: linear-gradient(165deg, #4a4d55 0%, #3a3d44 55%, #2e3036 100%) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
.boost-tag-pack-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  max-height: 72px;
  overflow: auto;
}
.boost-tag-pack-tabs:empty { display: none; }
.boost-tag-pack-tab {
  border: 1px solid var(--line-soft, var(--ln-edge2, #3f4147));
  background: var(--sf-deep, #1e1f22);
  color: var(--text-muted, #b5bac1);
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
}
.boost-tag-pack-tab.on {
  color: #fff;
  border-color: #f26522;
  background: rgba(242, 101, 34, .18);
}
.boost-tag-ico.hidden { display: none !important; }
.boost-tag-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-height: none;
  overflow: hidden;
  padding: 2px;
  width: 100%;
  box-sizing: border-box;
}
.boost-tag-ico {
  aspect-ratio: 1;
  border-radius: 16px;
  border: 2px solid transparent;
  background: rgba(0,0,0,.35);
  padding: 4px !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.boost-tag-ico img,
.boost-extra-pane.live .boost-tag-ico img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  object-position: center center;
  flex: 1 1 auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.boost-color-swatch {
  background: var(--sf-scroll, #1a1b1e) !important;
  border: 2px solid color-mix(in srgb, var(--swatch, #555) 55%, var(--ln-panel, #2b2d31));
  display: grid !important;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  overflow: hidden;
}
.boost-color-swatch.on {
  border-color: var(--swatch, #f26522) !important;
  box-shadow: 0 0 0 1px var(--swatch, #f26522);
}
.boost-color-swatch.orig {
  background: var(--sf-panel, #2b2d31) !important;
}
.boost-color-swatch .ds-clan-ico-tint.swatch {
  width: 20px;
  height: 20px;
}
.boost-color-swatch img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.ipack-ico-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: auto;
  background: transparent;
}
.settings-sec[data-clan-tag-sec] .boost-tag-letters {
  margin-top: 8px;
}
.settings-sec[data-clan-tag-sec] .switch-row {
  margin: 10px 0 12px;
}
.boost-tag-letters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  font-size: .78rem;
  font-weight: 700;
  color: #949ba4;
}
.boost-tag-letters input {
  width: 100%;
  max-width: 220px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 800;
  text-align: center;
  font-size: 1.15rem;
  color: #fff;
  background: var(--sf-panel, #2b2d31);
  border: 1px solid var(--ln-edge2, #3f4147);
  border-bottom: 3px solid #f26522;
  border-radius: 16px;
  padding: 10px 12px 8px;
  outline: none;
  box-sizing: border-box;
}
.boost-tag-letters input:focus {
  border-color: #f26522;
  box-shadow: 0 0 0 3px rgba(242, 101, 34, .22);
}
.blv-vanity-how {
  margin: 6px 0 0;
  font-size: .72rem;
  line-height: 1.35;
  max-width: 100%;
}
.ds-clan-depth,
.ds-clan-rim {
  position: absolute;
  inset: 0;
  border-radius: var(--tag-r);
  pointer-events: none;
  transform-style: preserve-3d;
}
.ds-clan-depth {
  z-index: 1;
  box-shadow:
    0 var(--tag-d) 0 0 var(--tag-body-0, #5a1808),
    0 calc(var(--tag-d) * .85) 0 0 var(--tag-body-1, #6e1e0a),
    0 calc(var(--tag-d) * .7) 0 0 var(--tag-body-2, #83250c),
    0 calc(var(--tag-d) * .55) 0 0 var(--tag-body-3, #982c10),
    0 calc(var(--tag-d) * .4) 0 0 var(--tag-body-4, #ad3414),
    0 calc(var(--tag-d) * .25) 0 0 var(--tag-body-5, #c23c18),
    0 calc(var(--tag-d) * .12) 0 0 var(--tag-body-6, #d4451c);
}
.ds-clan-tag.fill {
  --tag-body-0: #3a1006;
  --tag-body-1: #4a1408;
  --tag-body-2: #5c1a0a;
  --tag-body-3: #70200c;
  --tag-body-4: #8a2810;
  --tag-body-5: #a83214;
  --tag-body-6: #c43c18;
}
.ds-clan-tag.outline {
  --tag-body-0: #2a0e06;
  --tag-body-1: #3d160a;
  --tag-body-2: #541e0e;
  --tag-body-3: #6e2812;
  --tag-body-4: #8a3418;
  --tag-body-5: #b0441c;
  --tag-body-6: #e05a22;
}
.ds-clan-rim {
  z-index: 2;
  transform-origin: right center;
  transform: translateZ(1px) rotateY(90deg) translateZ(calc(var(--tag-d) * -.15));
  width: var(--tag-d);
  left: auto;
  right: calc(var(--tag-d) * -.35);
  top: 2px;
  bottom: 2px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--tag-rim-hi, #ff8a40), var(--tag-rim-lo, #6a220c));
  box-shadow: inset -2px 0 4px rgba(0,0,0,.35);
}
.ds-clan-tag.fill .ds-clan-rim {
  --tag-rim-hi: #ff9a4a;
  --tag-rim-lo: #7a280e;
}
.ds-clan-tag.outline .ds-clan-rim {
  --tag-rim-hi: #ffb06a;
  --tag-rim-lo: #ff6a28;
  box-shadow:
    inset -2px 0 4px rgba(0,0,0,.35),
    0 0 14px rgba(255,90,30,.45);
}
.ds-clan-face {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 16px;
  border-radius: var(--tag-r);
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1;
  transform: translateZ(2px);
}
.ds-clan-tag.fill .ds-clan-face {
  background:
    linear-gradient(165deg, #ffc078 0%, #ff8a3a 28%, #f25a18 68%, #d84412 100%);
  border: 1.5px solid rgba(255, 220, 160, .75);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.42),
    inset 0 -5px 8px rgba(90, 20, 0, .4),
    inset 3px 0 0 rgba(255,255,255,.14),
    0 0 0 1px rgba(120, 40, 10, .35);
}
.ds-clan-tag.fill .ds-clan-face::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(120deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.12) 28%, transparent 48%),
    linear-gradient(180deg, transparent 55%, rgba(80,15,0,.18) 100%);
  pointer-events: none;
}
.ds-clan-tag.fill .ds-clan-face::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 2px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,.55);
  filter: blur(.4px);
  pointer-events: none;
}
.ds-clan-tag.outline .ds-clan-face {
  background: linear-gradient(180deg, #1c181c 0%, #0e0c10 100%);
  border: 3px solid #ff6a28;
  box-shadow:
    inset 0 0 0 1px rgba(255,140,70,.35),
    inset 0 2px 0 rgba(255,120,50,.18),
    0 0 22px rgba(255,80,30,.4),
    0 0 0 1px rgba(255,100,40,.25);
}
.ds-clan-txt {
  font-size: 1.4rem;
  font-family: "gg sans", "Segoe UI", system-ui, sans-serif;
  position: relative;
  z-index: 1;
}
.ds-clan-tag.fill .ds-clan-txt,
.ds-clan-tag.outline .ds-clan-txt {
  color: #ffe6a8;
  text-shadow: 0 2px 0 rgba(60, 15, 0, .45), 0 0 12px rgba(255,180,80,.2);
}
.ds-clan-ico {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-size: 28px 28px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.45));
}
.ds-clan-ico.sword {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='crispEdges' viewBox='0 0 16 16'%3E%3Crect x='12' y='0' width='3' height='2' fill='%23fff6d0'/%3E%3Crect x='11' y='1' width='4' height='2' fill='%23ffe08a'/%3E%3Crect x='5' y='3' width='9' height='2' fill='%23ffc44a'/%3E%3Crect x='4' y='5' width='8' height='2' fill='%23ff9a3c'/%3E%3Crect x='3' y='7' width='7' height='2' fill='%23f07828'/%3E%3Crect x='2' y='9' width='5' height='2' fill='%23d86018'/%3E%3Crect x='1' y='11' width='4' height='2' fill='%236e4a32'/%3E%3Crect x='0' y='13' width='3' height='3' fill='%23e64a19'/%3E%3Crect x='3' y='12' width='2' height='2' fill='%23553a28'/%3E%3C/svg%3E");
}
.ds-clan-ico.shield {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='crispEdges' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff7a2a' d='M3 1h10v2H3zm-1 2h12v2H2zm0 2h12v3H2zm1 3h10v2H3zm1 2h8v2H4zm1 2h6v2H5z'/%3E%3Cpath fill='%23121014' d='M4 3h8v2H4zm-1 2h10v3H3zm1 3h8v2H4zm1 2h6v2H5z'/%3E%3C/svg%3E");
}
.ds-clan-tag.float {
  animation: ds-clan-bob 3.4s ease-in-out infinite;
}
.ds-clan-tag.outline.float { animation-delay: .45s; animation-name: ds-clan-bob-r; }
@keyframes ds-clan-bob {
  0%, 100% { transform: rotateX(28deg) rotateY(-32deg) rotateZ(-4deg) translateY(0); }
  50% { transform: rotateX(22deg) rotateY(-22deg) rotateZ(-2deg) translateY(-12px); }
}
@keyframes ds-clan-bob-r {
  0%, 100% { transform: rotateX(26deg) rotateY(28deg) rotateZ(3deg) translateY(0); }
  50% { transform: rotateX(20deg) rotateY(18deg) rotateZ(2deg) translateY(-12px); }
}
.ds-clan-tag.sm {
  --tag-d: 10px;
  --tag-r: 10px;
  transform: none !important;
  animation: none !important;
  filter: drop-shadow(5px 8px 10px rgba(0,0,0,.5));
}
.ds-clan-tag.sm .ds-clan-face {
  padding: 5px 10px 5px 7px;
  gap: 6px;
}
.ds-clan-tag.sm .ds-clan-txt { font-size: .8rem; }
.ds-clan-tag.sm .ds-clan-ico { width: 32px; height: 32px; background-size: 32px 32px; }
.ds-clan-ico-img,
.ds-clan-tag .ds-clan-ico-img,
.ds-clan-tag.live .ds-clan-ico-img,
.ds-clan-tag.sm .ds-clan-ico-img {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.ds-clan-tag.sm .ds-clan-rim { display: none; }
.ds-clan-tag.live {
  display: inline-block;
  vertical-align: middle;
  transform: none !important;
  animation: none !important;
}
.camp-tag-demo.sm .ds-clan-tag { --tag-d: 14px; }
.camp-tag-demo.sm .ds-clan-tag.fill:not(.flat) {
  transform: rotateX(22deg) rotateY(-24deg) rotateZ(-3deg) !important;
  animation: ds-clan-bob-sm 2.8s ease-in-out infinite !important;
}
.camp-tag-demo.sm .ds-clan-tag.outline:not(.flat) {
  transform: rotateX(22deg) rotateY(20deg) rotateZ(2deg) !important;
  animation: ds-clan-bob-sm-r 2.8s ease-in-out infinite .3s !important;
}
@keyframes ds-clan-bob-sm {
  0%, 100% { transform: rotateX(22deg) rotateY(-24deg) rotateZ(-3deg) translateY(0); }
  50% { transform: rotateX(16deg) rotateY(-14deg) rotateZ(-1deg) translateY(-8px); }
}
@keyframes ds-clan-bob-sm-r {
  0%, 100% { transform: rotateX(22deg) rotateY(20deg) rotateZ(2deg) translateY(0); }
  50% { transform: rotateX(16deg) rotateY(12deg) rotateZ(1deg) translateY(-8px); }
}

.boost-extra-stage.tag.rich {
  background:
    radial-gradient(ellipse at 50% 15%, rgba(255,100,40,.22), transparent 55%),
    #0e0c10;
  padding: 28px 14px 36px;
  min-height: 158px;
  overflow: visible;
}
.blv-tag-float .camp-tag-demo {
  min-height: 170px;
  justify-content: center;
  padding-top: 8px;
}
.boost-extra-pane.art {
  background:
    radial-gradient(ellipse 90% 70% at 50% 10%, rgba(255,90,40,.35), transparent 65%),
    linear-gradient(180deg, #1a1018 0%, #121018 100%) !important;
}
.boost-lvl-modal.wide {
  width: min(720px, 96vw) !important;
  max-width: 720px !important;
}
.boost-lvl-modal.wide.packs {
  width: min(760px, 96vw) !important;
  max-width: 760px !important;
  max-height: 86vh;
}
.boost-lvl-modal.wide.packs .boost-lvl-body.flush {
  max-height: 86vh;
  overflow: auto;
}
.boost-lvl-body.flush {
  padding: 0 0 18px !important;
}
.boost-lvl-modal.wide .boost-lvl-x {
  z-index: 5;
  background: rgba(0,0,0,.35);
}
.boost-extra-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 340px;
}
.boost-extra-pane {
  padding: 22px 20px 12px;
  display: flex;
  flex-direction: column;
}
.boost-extra-pane.art {
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255,106,26,.4), transparent 70%),
    linear-gradient(180deg, #2a140a 0%, #1a1210 100%);
  border-right: 1px solid rgba(255,255,255,.06);
  text-align: center;
  align-items: center;
}
.boost-extra-pane.art h3 {
  margin: 12px 0 6px;
  font-size: 1.35rem;
  color: #fff;
}
.boost-extra-pane.live {
  background: var(--sf-deep, #1e1f22);
}
/* «Тег сервера»: заголовок и превью чата держим одним блоком по центру левой
 * колонки — превью встало вниз, на место убранной пилюли-дубля. */
.boost-extra-split.tag .boost-extra-pane.art { justify-content: center; }
.boost-tag-art-preview {
  width: 100%;
  max-width: 320px;
  margin: 34px auto 0;
  text-align: left;
}
.boost-tag-art-preview .boost-chat-preview { margin-bottom: 0; }
.boost-extra-pane.styles-hero {
  background:
    radial-gradient(circle at 40% 35%, rgba(255,106,26,.45), transparent 55%),
    #140c08;
}
.blv-tag-float {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  min-height: 130px;
  perspective: 700px;
  margin-top: 8px;
}
/* Герой-пилюля в буст-экстре «Тег сервера» — тот же боевой .utag.clan-tag,
 * только крупнее (стиль/цвета не меняем — это настоящий вид тега) */
.blv-tag-float .utag.clan-tag {
  margin-left: 0;
  font-size: 18px;
  padding: 7px 16px 7px 11px;
  gap: 9px;
  border-radius: 16px;
}
.blv-tag-float .utag.clan-tag .clan-tag-ico {
  width: 34px;
  height: 34px;
  max-width: 34px;
  max-height: 34px;
}
.blv-tag-3d.float {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: blv-tag-bob 2.8s ease-in-out infinite;
}
.blv-tag-3d.float img {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.blv-tag-3d.gold.float { animation-delay: .35s; }
@keyframes blv-tag-bob {
  0%, 100% { transform: rotateY(-16deg) rotateX(8deg) translateY(0) scale(1); }
  50% { transform: rotateY(-6deg) rotateX(4deg) translateY(-10px) scale(1.04); }
}
.blv-tag-3d.gold.float {
  animation-name: blv-tag-bob-r;
}
@keyframes blv-tag-bob-r {
  0%, 100% { transform: rotateY(16deg) rotateX(8deg) translateY(0) scale(1); }
  50% { transform: rotateY(6deg) rotateX(4deg) translateY(-10px) scale(1.04); }
}
.boost-chat-preview {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 14px;
  align-items: flex-start;
}
.boost-chat-av-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}
.boost-chat-av-wrap .avatar,
.boost-chat-av-wrap .av,
.boost-chat-av-wrap img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  object-fit: cover;
}
.boost-chat-av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e64a19, #ffb300);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #1a0f0a;
  flex-shrink: 0;
}
.boost-chat-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.boost-chat-head .ds-clan-tag,
.boost-chat-head .ds-clan-face {
  max-width: 100%;
}
.boost-chat-head b { color: #fff; }
.boost-chat-msg { color: #dbdee1; font-size: .92rem; }
.blv-clan-tag.live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.blv-clan-tag.live img { width: 14px; height: 14px; }
.boost-pane-label {
  margin: 0 0 8px;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #949ba4;
}
.boost-tag-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}
.boost-tag-ico.on {
  border-color: var(--accent, #ff6a1a);
  box-shadow: 0 0 0 2px rgba(255,106,26,.25);
}
.boost-tag-ico:hover { background: rgba(255,255,255,.05); }

.blv-badge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 22px 20px 8px;
}
.ipack-shop { padding-bottom: 8px; }
.ipack-shop.is-preview > .ipack-grid,
.ipack-shop.is-preview > .hint,
.ipack-grid[hidden] {
  display: none !important;
}
.ipack-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 22px 18px 8px;
}
.ipack-card {
  background: var(--sf-base, #232428);
  border-radius: 22px;
  padding: 16px 16px 14px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease, border-color .2s ease;
  transform-origin: center bottom;
}
.ipack-card:hover {
  transform: translateY(-8px);
  z-index: 2;
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 14px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(231,62,140,.4);
}
.ipack-card.on {
  box-shadow: 0 0 0 1px rgba(231,62,140,.45);
}
.ipack-card.on:hover {
  box-shadow: 0 14px 32px rgba(0,0,0,.5), 0 0 0 2px rgba(231,62,140,.55);
}
.ipack-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 18px 16px;
  text-align: center;
}
.ipack-page-back {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 12px;
}
.ipack-page h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}
.ipack-page .ipack-go { max-width: 320px; }
.ipack-page .ipack-preview-grid { width: 100%; }
.ipack-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 4px 0 2px;
}
.ipack-preview-ico {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  background: rgba(0,0,0,.28);
  border-radius: 16px;
  padding: 8px;
  box-sizing: border-box;
  overflow: hidden;
}
.ipack-art {
  min-height: 86px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  padding: 4px 8px 2px;
  pointer-events: none;
  user-select: none;
}
.ipack-ico {
  width: 32px;
  height: 32px;
  object-fit: contain;
  object-position: center;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.ipack-card h3 {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.ipack-cost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #b5bac1;
  font-size: 13px;
}
.ipack-go {
  width: 100%;
  margin-top: 4px;
  border: 0;
  border-radius: 12px;
  background: #e73e8c;
  color: #fff;
  font: inherit;
  font-weight: 700;
  padding: 10px 12px;
  cursor: pointer;
}
.ipack-go:hover { filter: brightness(1.08); }
.ipack-go.is-on {
  background: #3ba55d;
  cursor: pointer;
}
.camp-media-overlay {
  position: fixed;
  inset: 0;
  z-index: 240;
  background: rgba(0,0,0,.78);
  display: grid;
  place-items: center;
}
.camp-media-tools {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  z-index: 2;
  height: 40px;
  padding: 0;
  margin: 0;
}
body.electron .camp-media-tools {
  /* Below custom titlebar (32px) — иначе кнопки влезают в шапку окна */
  top: calc(32px + 14px);
  right: 16px;
}
.camp-media-btn {
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  line-height: 0;
  vertical-align: middle;
  cursor: pointer;
  box-sizing: border-box;
}
.camp-media-btn svg {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}
.camp-media-btn:hover { background: rgba(255,255,255,.14); }
.camp-media-stage {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  cursor: zoom-out;
}
.camp-media-el {
  max-width: 88vw;
  max-height: 86vh;
  border-radius: 8px;
  transform-origin: center center;
  transition: transform .15s ease;
  user-select: none;
}
.camp-media-overlay.is-zoom .camp-media-stage { cursor: zoom-in; }
.camp-media-overlay.is-zoom .camp-media-el { cursor: zoom-out; }
/* Стрелки перелистывания — вид как у карусели магазина игр (.gs-car-btn) */
.camp-media-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 18, 20, 0.92);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.camp-media-nav svg { display: block; width: 22px; height: 22px; }
.camp-media-nav:hover:not(:disabled) { background: var(--sf-raised2, #35373c); }
/* Увеличенная зона клика: промах на пару десятков пикселей всё равно попадает
 * в стрелку, а не в тёмный фон (клик по фону закрывает просмотрщик). */
.camp-media-nav::after { content: ""; position: absolute; inset: -20px; }
/* Стрелка на краю галереи: видимая, но приглушённая. Раньше была opacity:0 +
 * pointer-events:none — клик «сквозь» невидимую кнопку падал в оверлей и
 * ЗАКРЫВАЛ просмотрщик (казалось, что «картинка не меняется»). */
.camp-media-nav:disabled { opacity: 0.25; cursor: default; }
.camp-media-nav.prev { left: 18px; }
.camp-media-nav.next { right: 18px; }
.camp-media-count {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 4;
  background: rgba(17, 18, 20, 0.85);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: 999px;
  pointer-events: none;
}
img.msg-img, img.embed-img, img.discord-embed-image, img[data-zoom] { cursor: zoom-in; }
.blv-pack-card.rich {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.28);
  border-radius: 20px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  color: inherit;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.blv-pack-card.rich:hover {
  border-color: rgba(255,106,26,.45);
  background: rgba(230,74,25,.08);
}
.blv-pack-img {
  width: 100%;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.blv-pack-cost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--accent, #ff6a1a);
  font-weight: 800;
  font-size: .82rem;
}
.boost-extra-visual.badges-modal .hint.warn {
  color: #ffb300;
  text-align: center;
  padding: 0 16px 4px;
}

.blv-style-hero {
  min-height: 120px;
  display: grid;
  place-items: center;
  margin-top: 20px;
}
.blv-role.hero-name {
  font-size: 1.6rem !important;
  padding: 10px 22px !important;
}
.blv-role.inline {
  display: inline;
  padding: 0 4px;
  border-radius: 8px;
  font-size: inherit;
}
.boost-style-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.boost-style-opt {
  border: 2px solid transparent;
  border-radius: 16px;
  background: rgba(0,0,0,.25);
  padding: 10px;
  cursor: pointer;
}
.boost-style-opt.on {
  border-color: var(--accent, #ff6a1a);
  background: rgba(230,74,25,.1);
}
.boost-style-opt .blv-role { width: 100%; text-align: center; display: block; }

.boost-extra-stage.rich {
  min-height: 110px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,106,26,.25), transparent 65%),
    rgba(0,0,0,.35);
}
.boost-extra-stage.tag.rich { gap: 14px; }
.boost-extra-stage.badges.rich img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.4));
}
.boost-badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.boost-badge-medal {
  position: relative;
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.45));
}
.boost-badge-plate {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(165deg, #ffc078 0%, #f25a18 58%, #a82810 100%);
  border: 2px solid rgba(255, 220, 160, .65);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.42),
    inset 0 -5px 8px rgba(80, 10, 0, .4);
}
.boost-badge-plate::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 4px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,.5);
  filter: blur(.3px);
}
.boost-badge-medal img {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.boost-badge-medal.animals .boost-badge-plate {
  background: linear-gradient(165deg, #d4b48a 0%, #8a5a2c 58%, #3a2414 100%);
}
.boost-badge-medal.flex .boost-badge-plate {
  background: linear-gradient(165deg, #ffb0e0 0%, #eb459e 58%, #8a1858 100%);
  border-color: rgba(255, 190, 230, .7);
}
.boost-badge-medal.ember .boost-badge-plate {
  background: linear-gradient(165deg, #ffb36a 0%, #e64a19 58%, #7a1808 100%);
}
.boost-badge-medal.bugs .boost-badge-plate {
  background: linear-gradient(165deg, #d4e06a 0%, #7a9a22 58%, #3a4a0c 100%);
  border-color: rgba(230, 240, 160, .65);
}
.blv-pack-card.rich .boost-badge-medal {
  margin: 4px auto 2px;
}
.boost-extra-stage.styles.rich .pulse-name {
  font-size: 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.boost-lvl-modal.extra.camp .boost-lvl-enable {
  margin: 8px 18px 0;
  width: calc(100% - 36px);
}
.boost-tag-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 16px;
}
.boost-tag-actions .boost-lvl-enable {
  margin-top: 8px;
}
@media (max-width: 640px) {
  .boost-extra-split { grid-template-columns: 1fr; }
  .boost-extra-pane.art { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
  .boost-tag-icon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .blv-badge-grid { grid-template-columns: 1fr; }
  .ipack-grid { grid-template-columns: 1fr; }
}

/* ===== Light theme completeness (1.12.77) — last so it wins over hardcodes ===== */
html.theme-light .msg-body,
body.theme-light .msg-body {
  color: #2a221c !important;
}
html.theme-light .msg-body a,
body.theme-light .msg-body a { color: #c2410c !important; }
html.theme-light .msg-body .mention,
body.theme-light .msg-body .mention {
  background: rgba(196, 65, 12, 0.18) !important;
  color: #9a3412 !important;
}
html.theme-light .msg-body .mention[data-me],
body.theme-light .msg-body .mention[data-me] {
  background: rgba(180, 120, 20, 0.22) !important;
  color: #7a4e00 !important;
}
html.theme-light .msg-meta,
html.theme-light .msg-meta b,
html.theme-light .msg-author,
html.theme-light .msg-author .uname,
body.theme-light .msg-meta,
body.theme-light .msg-meta b,
body.theme-light .msg-author { color: #1a1410 !important; }
html.theme-light .msg-meta time,
html.theme-light .msg-meta .edited,
body.theme-light .msg-meta time,
body.theme-light .msg-meta .edited { color: #6e6258 !important; }
html.theme-light .msg.mention-me,
body.theme-light .msg.mention-me { background: rgba(240, 178, 50, 0.12) !important; }

html.theme-light .sidebar,
html.theme-light .chan-scroll,
body.theme-light .sidebar,
body.theme-light .chan-scroll { background: #f7f3ee !important; color: #1a1410 !important; }
html.theme-light .sidebar-head,
html.theme-light .sidebar-head-name,
html.theme-light .cat,
html.theme-light .cat-toggle,
html.theme-light .chan,
html.theme-light .voice-user,
html.theme-light .vu-nick,
html.theme-light .vu-name,
body.theme-light .sidebar-head,
body.theme-light .sidebar-head-name,
body.theme-light .cat,
body.theme-light .chan,
body.theme-light .voice-user,
body.theme-light .vu-nick { color: #5c5046 !important; }
html.theme-light .chan.on,
html.theme-light .chan:hover,
html.theme-light .cat:hover,
html.theme-light .chan.unread,
body.theme-light .chan.on,
body.theme-light .chan:hover,
body.theme-light .cat:hover,
body.theme-light .chan.unread { color: #1a1410 !important; }
html.theme-light .sidebar-boost,
html.theme-light .sidebar-boost-need,
html.theme-light .sidebar-boost-right,
html.theme-light .sidebar-boost-count,
html.theme-light .sidebar-quick-item,
body.theme-light .sidebar-boost,
body.theme-light .sidebar-boost-need,
body.theme-light .sidebar-boost-right,
body.theme-light .sidebar-quick-item { color: #1a1410 !important; }

html.theme-light .rail,
body.theme-light .rail { background: #ebe4da !important; }
html.theme-light .userpanel,
html.theme-light .shell-bottom,
html.theme-light .voice-conn,
html.theme-light .voice-conn-stack,
html.theme-light .vc-media-row,
body.theme-light .userpanel,
body.theme-light .shell-bottom,
body.theme-light .voice-conn,
body.theme-light .voice-conn-stack,
body.theme-light .vc-media-row { background: #efe7dc !important; color: #1a1410 !important; border-color: #d4c8ba !important; }
/* Светлая тема: у .shell-bottom нет своей подложки — продолжение рейла и сайдбара */
html.theme-light .shell-bottom,
body.theme-light .shell-bottom { background: linear-gradient(90deg, #ebe4da 0 var(--rail-w), var(--bg-sidebar, #f7f3ee) var(--rail-w) 100%) !important; }
html.theme-light .vc-media-btn,
html.theme-light .voice-conn .ns-btn,
html.theme-light .voice-conn .vc-disc,
html.theme-light .userpanel .icon-btn,
body.theme-light .vc-media-btn,
body.theme-light .voice-conn .ns-btn,
body.theme-light .voice-conn .vc-disc,
body.theme-light .userpanel .icon-btn { color: #5c5046 !important; }
html.theme-light .vc-media-btn:hover:not(:disabled),
html.theme-light .voice-conn .ns-btn:hover,
body.theme-light .vc-media-btn:hover:not(:disabled),
body.theme-light .voice-conn .ns-btn:hover { background: #e2d6c6 !important; color: #1a1410 !important; }
html.theme-light .vc-media-btn.on,
body.theme-light .vc-media-btn.on { background: #e2d6c6 !important; color: #1a1410 !important; }
html.theme-light .vc-media-btn.on.live,
body.theme-light .vc-media-btn.on.live { color: #16a34a !important; }
html.theme-light .userpanel .who b,
html.theme-light .userpanel .who span,
html.theme-light .voice-conn,
html.theme-light .voice-conn .vc-sub,
body.theme-light .userpanel .who b,
body.theme-light .userpanel .who span,
body.theme-light .voice-conn .vc-sub { color: #1a1410 !important; }

html.theme-light .main,
html.theme-light .main-head,
html.theme-light .messages,
html.theme-light .composer,
body.theme-light .main,
body.theme-light .main-head,
body.theme-light .messages { background: #fffaf4 !important; color: #2a221c !important; }
html.theme-light .main-head .title,
html.theme-light .main-head .topic,
html.theme-light .main-head .tools button,
body.theme-light .main-head .title,
body.theme-light .main-head .topic,
body.theme-light .main-head .tools button { color: #1a1410 !important; }

html.theme-light .vstage,
html.theme-light .vbar,
html.theme-light .voice-wrap,
body.theme-light .vstage,
body.theme-light .vbar,
body.theme-light .voice-wrap { background: #ebe4da !important; }
html.theme-light .vtile,
body.theme-light .vtile {
  background: #f7f3ee !important;
  border-color: #d4c8ba !important;
  color: #1a1410 !important;
}
html.theme-light .vtile-name,
html.theme-light .vtile-stream-nick,
body.theme-light .vtile-name,
body.theme-light .vtile-stream-nick { color: #1a1410 !important; }
html.theme-light .vbtn:not(.hangup):not(.off):not(.active):not(.live),
body.theme-light .vbtn:not(.hangup):not(.off):not(.active):not(.live) {
  background: #d4c8ba !important;
  color: #1a1410 !important;
}

html.theme-light .threads-pop,
html.theme-light .threads-pop-head,
html.theme-light .emoji-pop,
html.theme-light .gif-pop,
html.theme-light .pins-pop,
html.theme-light .ctx-menu,
html.theme-light .user-popout,
body.theme-light .threads-pop,
body.theme-light .threads-pop-head,
body.theme-light .emoji-pop,
body.theme-light .gif-pop,
body.theme-light .pins-pop,
body.theme-light .ctx-menu,
body.theme-light .user-popout {
  background: #ffffff !important;
  color: #1a1410 !important;
  border-color: #ddd2c4 !important;
}
html.theme-light .threads-pop-title,
html.theme-light .threads-empty h3,
html.theme-light .threads-row b,
html.theme-light .threads-empty .hint,
html.theme-light .threads-row-meta,
html.theme-light .threads-sec-label,
html.theme-light .threads-x,
body.theme-light .threads-pop-title,
body.theme-light .threads-empty h3,
body.theme-light .threads-row b { color: #1a1410 !important; }
html.theme-light .threads-empty .hint,
html.theme-light .threads-row-meta,
html.theme-light .threads-sec-label,
html.theme-light .threads-x,
body.theme-light .threads-empty .hint,
body.theme-light .threads-row-meta,
body.theme-light .threads-sec-label,
body.theme-light .threads-x { color: #6e6258 !important; }
html.theme-light .threads-row,
body.theme-light .threads-row { background: #f0e8de !important; }
html.theme-light .threads-row:hover,
body.theme-light .threads-row:hover { background: #e2d6c6 !important; }
html.theme-light .threads-pop .threads-search,
html.theme-light .threads-create-field input,
html.theme-light .emoji-search input,
body.theme-light .threads-pop .threads-search,
body.theme-light .threads-create-field input,
body.theme-light .emoji-search input {
  background: #f0e8de !important;
  color: #1a1410 !important;
}
html.theme-light .emoji-cat-title,
html.theme-light .emoji-preview,
body.theme-light .emoji-cat-title,
body.theme-light .emoji-preview {
  background: #f7f3ee !important;
  color: #5c5046 !important;
}
html.theme-light .emoji-tabs,
body.theme-light .emoji-tabs { border-bottom-color: #ddd2c4 !important; }
html.theme-light .emoji-tabs button.on,
html.theme-light .emoji-cell:hover,
body.theme-light .emoji-tabs button.on,
body.theme-light .emoji-cell:hover { background: #e2d6c6 !important; }

html.theme-light .invite-box,
html.theme-light .invite-row,
html.theme-light .boost-panel,
html.theme-light .settings-soon,
html.theme-light .boost-lvl-card,
html.theme-light .boost-extra-card,
html.theme-light .boost-stat-row,
html.theme-light .boost-guild-page,
body.theme-light .invite-box,
body.theme-light .invite-row,
body.theme-light .boost-panel,
body.theme-light .settings-soon,
body.theme-light .boost-lvl-card,
body.theme-light .boost-extra-card,
body.theme-light .boost-stat-row {
  background: #f0e8de !important;
  color: #1a1410 !important;
  border-color: #d4c8ba !important;
}
html.theme-light .invite-box .hint,
html.theme-light .invite-row-meta,
html.theme-light .boost-panel .hint,
html.theme-light .boost-lvl-card ul,
html.theme-light .boost-extra-card .hint,
html.theme-light .boost-stat span,
html.theme-light .boost-guild-lead,
body.theme-light .invite-box .hint,
body.theme-light .invite-row-meta,
body.theme-light .boost-panel .hint,
body.theme-light .boost-lvl-card ul,
body.theme-light .boost-extra-card .hint,
body.theme-light .boost-stat span,
body.theme-light .boost-guild-lead { color: #5c5046 !important; }
html.theme-light .invite-box h4,
html.theme-light .invite-code,
html.theme-light .invite-link,
html.theme-light .boost-extra-card b,
html.theme-light .boost-stat b,
body.theme-light .invite-box h4,
body.theme-light .invite-code,
body.theme-light .invite-link,
body.theme-light .boost-extra-card b { color: #1a1410 !important; }
html.theme-light .invite-custom-field input,
html.theme-light .invite-custom-row input,
body.theme-light .invite-custom-field input,
body.theme-light .invite-custom-row input {
  background: #fffaf4 !important;
  color: #1a1410 !important;
  border-color: #d4c8ba !important;
}

html.theme-light .modal:not(.settings-modal),
html.theme-light .modal-backdrop:not(.fullscreen) .modal,
body.theme-light .modal:not(.settings-modal),
body.theme-light .modal-backdrop:not(.fullscreen) .modal {
  background: #ffffff !important;
  color: #1a1410 !important;
}
html.theme-light .modal .hint,
body.theme-light .modal .hint { color: #6e6258 !important; }

html.theme-light .members,
body.theme-light .members { background: #f7f3ee !important; }
html.theme-light .member,
html.theme-light .member-name-row,
body.theme-light .member,
body.theme-light .member-name-row { color: #5c5046 !important; }
html.theme-light .member:hover .member-name-row,
body.theme-light .member:hover .member-name-row { color: #1a1410 !important; }

html.theme-light .composer textarea,
html.theme-light .composer,
body.theme-light .composer textarea,
body.theme-light .composer {
  background: #f0e8de !important;
  color: #1a1410 !important;
  border-color: #d4c8ba !important;
}

html.theme-light .settings-soon,
body.theme-light .settings-soon {
  background: #f0e8de !important;
  border-color: #d4c8ba !important;
  color: #1a1410 !important;
}
html.theme-light .boost-stat-card,
html.theme-light .boost-lvl-card,
html.theme-light .boost-extra-card,
html.theme-light .boost-stat-row,
html.theme-light .boost-activity,
html.theme-light .boost-activity-row,
html.theme-light .boost-solo-page,
body.theme-light .boost-stat-card,
body.theme-light .boost-lvl-card,
body.theme-light .boost-extra-card,
body.theme-light .boost-stat-row,
body.theme-light .boost-activity,
body.theme-light .boost-activity-row {
  background: #f0e8de !important;
  border-color: #d4c8ba !important;
  color: #1a1410 !important;
}
html.theme-light .boost-stat-card span,
html.theme-light .boost-lvl-card ul,
html.theme-light .boost-extra-card .hint,
html.theme-light .boost-activity-row,
html.theme-light .boost-activity-row span,
html.theme-light .boost-guild-lead,
html.theme-light .boost-extra-card small,
body.theme-light .boost-stat-card span,
body.theme-light .boost-lvl-card ul,
body.theme-light .boost-extra-card .hint,
body.theme-light .boost-activity-row,
body.theme-light .boost-activity-row span,
body.theme-light .boost-guild-lead { color: #5c5046 !important; }
html.theme-light .boost-stat-card b,
html.theme-light .boost-extra-card b,
html.theme-light .boost-extra-top,
body.theme-light .boost-stat-card b,
body.theme-light .boost-extra-card b,
body.theme-light .boost-extra-top { color: #1a1410 !important; }
html.theme-light .invite-prefix,
html.theme-light .invite-custom-prefix,
html.theme-light .invite-custom-field > span,
body.theme-light .invite-prefix,
body.theme-light .invite-custom-prefix,
body.theme-light .invite-custom-field > span {
  background: #e2d6c6 !important;
  color: #5c5046 !important;
}
html.theme-light .chan.on,
body.theme-light .chan.on { color: #1a1410 !important; }
html.theme-light .sidebar-boost-need,
html.theme-light .sidebar-boost-right,
html.theme-light .sidebar-boost-count,
html.theme-light .sidebar-head-name,
body.theme-light .sidebar-boost-need,
body.theme-light .sidebar-boost-right,
body.theme-light .sidebar-boost-count,
body.theme-light .sidebar-head-name { color: #1a1410 !important; }
html.theme-light .messages .msg-body,
html.theme-light .messages .msg-body *,
body.theme-light .messages .msg-body,
body.theme-light .messages .msg-body *:not(.mention):not(a):not(code):not(.spoiler) {
  color: #2a221c !important;
}
html.theme-light .messages .msg-body .mention,
body.theme-light .messages .msg-body .mention {
  background: rgba(196, 65, 12, 0.18) !important;
  color: #9a3412 !important;
}
html.theme-light .messages .msg-body a,
body.theme-light .messages .msg-body a { color: #c2410c !important; }


/* ===== Folk Russian themes 1.12.90 — beat theme-light cream, sharp wallpaper ===== */
body.theme-khokhloma,
html.theme-khokhloma {
  --folk-img: url("assets/themes/khokhloma.webp?v=1.12.107");
  --folk-glass: rgba(12, 6, 3, 0.32);
  --folk-glass-strong: rgba(10, 5, 2, 0.72);
  --folk-glass-soft: rgba(8, 4, 2, 0.18);
  --folk-hover: #fff3d0;
  --folk-hover-text: #1a0c04;
  --folk-hover-sub: #5a3010;
  --folk-text: #fff6e8;
  --folk-muted: #e0c090;
  --folk-ink-shadow: 0 1px 2px rgba(0,0,0,.85);
}
body.theme-gzhel,
html.theme-gzhel {
  --folk-img: url("assets/themes/gzhel.webp?v=1.12.107");
  --folk-glass: rgba(230, 242, 252, 0.36);
  --folk-glass-strong: rgba(245, 250, 255, 0.78);
  --folk-glass-soft: rgba(255, 255, 255, 0.22);
  --folk-hover: #1a3a66;
  --folk-hover-text: #ffffff;
  --folk-hover-sub: #c8ddf5;
  --folk-text: #0c243f;
  --folk-muted: #3d6288;
  --folk-ink-shadow: 0 1px 1px rgba(255,255,255,.65);
}
body.theme-polkhov,
html.theme-polkhov {
  --folk-img: url("assets/themes/polkhov.webp?v=1.12.107");
  --folk-glass: rgba(14, 10, 4, 0.32);
  --folk-glass-strong: rgba(12, 8, 3, 0.72);
  --folk-glass-soft: rgba(10, 6, 2, 0.18);
  --folk-hover: #fff3d0;
  --folk-hover-text: #1a0c04;
  --folk-hover-sub: #5a3010;
  --folk-text: #fff8e7;
  --folk-muted: #e0b870;
  --folk-ink-shadow: 0 1px 2px rgba(0,0,0,.85);
}
body.theme-gorodets,
html.theme-gorodets {
  --folk-img: url("assets/themes/gorodets.webp?v=1.12.107");
  --folk-glass: rgba(255, 246, 220, 0.36);
  --folk-glass-strong: rgba(255, 250, 235, 0.8);
  --folk-glass-soft: rgba(255, 248, 230, 0.22);
  --folk-hover: #7a1420;
  --folk-hover-text: #fff8e8;
  --folk-hover-sub: #ffd0b0;
  --folk-text: #3a1408;
  --folk-muted: #7a3a18;
  --folk-ink-shadow: 0 1px 1px rgba(255,255,255,.55);
}
body.theme-mezen,
html.theme-mezen {
  --folk-img: url("assets/themes/mezen.webp?v=1.12.107");
  --folk-glass: rgba(250, 244, 232, 0.38);
  --folk-glass-strong: rgba(255, 252, 245, 0.82);
  --folk-glass-soft: rgba(255, 250, 240, 0.24);
  --folk-hover: #6a1010;
  --folk-hover-text: #fff8f0;
  --folk-hover-sub: #ffd0c0;
  --folk-text: #1a0c08;
  --folk-muted: #6a2818;
  --folk-ink-shadow: 0 1px 1px rgba(255,255,255,.5);
}
body.theme-vologda,
html.theme-vologda {
  --folk-img: url("assets/themes/vologda.webp?v=1.12.107");
  --folk-glass: rgba(8, 16, 40, 0.34);
  --folk-glass-strong: rgba(6, 12, 32, 0.74);
  --folk-glass-soft: rgba(4, 10, 28, 0.18);
  --folk-hover: #e8f0ff;
  --folk-hover-text: #0a1430;
  --folk-hover-sub: #2a4070;
  --folk-text: #f2f6ff;
  --folk-muted: #a8b8d8;
  --folk-ink-shadow: 0 1px 2px rgba(0,0,0,.8);
}

/* Wallpaper layer: fixed element, NOT background-attachment:fixed (Electron smear) */
html.theme-khokhloma body::before,
html.theme-gzhel body::before,
html.theme-polkhov body::before,
html.theme-gorodets body::before,
html.theme-mezen body::before,
html.theme-vologda body::before,
body.theme-khokhloma::before,
body.theme-gzhel::before,
body.theme-polkhov::before,
body.theme-gorodets::before,
body.theme-mezen::before,
body.theme-vologda::before {
  content: "";
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-color: #111 !important;
  background-image: var(--folk-img) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}
html.theme-khokhloma body::after,
html.theme-gzhel body::after,
html.theme-polkhov body::after,
html.theme-gorodets body::after,
html.theme-mezen body::after,
html.theme-vologda body::after,
body.theme-khokhloma::after,
body.theme-gzhel::after,
body.theme-polkhov::after,
body.theme-gorodets::after,
body.theme-mezen::after,
body.theme-vologda::after {
  content: "";
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
body.theme-khokhloma::after { background: rgba(6, 3, 1, 0.12) !important; }
body.theme-gzhel::after { background: rgba(255, 255, 255, 0.06) !important; }
body.theme-polkhov::after { background: rgba(8, 5, 2, 0.1) !important; }
body.theme-gorodets::after { background: rgba(255, 240, 200, 0.08) !important; }
body.theme-mezen::after { background: rgba(255, 250, 240, 0.06) !important; }
body.theme-vologda::after { background: rgba(4, 8, 24, 0.14) !important; }

/* Beat theme-light cream (specificity html.theme-X.theme-light …) */
html.theme-khokhloma.theme-light #app,
html.theme-gzhel.theme-light #app,
html.theme-polkhov.theme-light #app,
html.theme-gorodets.theme-light #app,
html.theme-mezen.theme-light #app,
html.theme-vologda.theme-light #app,
html.theme-khokhloma.theme-dark #app,
html.theme-gzhel.theme-dark #app,
html.theme-polkhov.theme-dark #app,
html.theme-gorodets.theme-dark #app,
html.theme-mezen.theme-dark #app,
html.theme-vologda.theme-dark #app,
html.theme-khokhloma.theme-light .shell,
html.theme-gzhel.theme-light .shell,
html.theme-polkhov.theme-light .shell,
html.theme-gorodets.theme-light .shell,
html.theme-mezen.theme-light .shell,
html.theme-vologda.theme-light .shell,
html.theme-khokhloma.theme-dark .shell,
html.theme-gzhel.theme-dark .shell,
html.theme-polkhov.theme-dark .shell,
html.theme-gorodets.theme-dark .shell,
html.theme-mezen.theme-dark .shell,
html.theme-vologda.theme-dark .shell,
html.theme-khokhloma.theme-light .auth,
html.theme-gzhel.theme-light .auth,
html.theme-polkhov.theme-light .auth,
html.theme-gorodets.theme-light .auth,
html.theme-mezen.theme-light .auth,
html.theme-vologda.theme-light .auth,
html.theme-khokhloma.theme-light .main,
html.theme-gzhel.theme-light .main,
html.theme-polkhov.theme-light .main,
html.theme-gorodets.theme-light .main,
html.theme-mezen.theme-light .main,
html.theme-vologda.theme-light .main,
html.theme-khokhloma.theme-dark .main,
html.theme-gzhel.theme-dark .main,
html.theme-polkhov.theme-dark .main,
html.theme-gorodets.theme-dark .main,
html.theme-mezen.theme-dark .main,
html.theme-vologda.theme-dark .main,
html.theme-khokhloma.theme-light .friends-page,
html.theme-gzhel.theme-light .friends-page,
html.theme-polkhov.theme-light .friends-page,
html.theme-gorodets.theme-light .friends-page,
html.theme-mezen.theme-light .friends-page,
html.theme-vologda.theme-light .friends-page,
html.theme-khokhloma.theme-light .friends-main,
html.theme-gzhel.theme-light .friends-main,
html.theme-polkhov.theme-light .friends-main,
html.theme-gorodets.theme-light .friends-main,
html.theme-mezen.theme-light .friends-main,
html.theme-vologda.theme-light .friends-main,
html.theme-khokhloma.theme-light .vstage,
html.theme-gzhel.theme-light .vstage,
html.theme-polkhov.theme-light .vstage,
html.theme-gorodets.theme-light .vstage,
html.theme-mezen.theme-light .vstage,
html.theme-vologda.theme-light .vstage,
html.theme-khokhloma.theme-dark .vstage,
html.theme-gzhel.theme-dark .vstage,
html.theme-polkhov.theme-dark .vstage,
html.theme-gorodets.theme-dark .vstage,
html.theme-mezen.theme-dark .vstage,
html.theme-vologda.theme-dark .vstage,
html.theme-khokhloma.theme-light .voice-wrap,
html.theme-gzhel.theme-light .voice-wrap,
html.theme-polkhov.theme-light .voice-wrap,
html.theme-gorodets.theme-light .voice-wrap,
html.theme-mezen.theme-light .voice-wrap,
html.theme-vologda.theme-light .voice-wrap,
html.theme-khokhloma.theme-dark .voice-wrap,
html.theme-gzhel.theme-dark .voice-wrap,
html.theme-polkhov.theme-dark .voice-wrap,
html.theme-gorodets.theme-dark .voice-wrap,
html.theme-mezen.theme-dark .voice-wrap,
html.theme-vologda.theme-dark .voice-wrap,
body.theme-khokhloma #app,
body.theme-gzhel #app,
body.theme-polkhov #app,
body.theme-gorodets #app,
body.theme-mezen #app,
body.theme-vologda #app,
body.theme-khokhloma .shell,
body.theme-gzhel .shell,
body.theme-polkhov .shell,
body.theme-gorodets .shell,
body.theme-mezen .shell,
body.theme-vologda .shell,
body.theme-khokhloma .auth,
body.theme-gzhel .auth,
body.theme-polkhov .auth,
body.theme-gorodets .auth,
body.theme-mezen .auth,
body.theme-vologda .auth,
body.theme-khokhloma .main,
body.theme-gzhel .main,
body.theme-polkhov .main,
body.theme-gorodets .main,
body.theme-mezen .main,
body.theme-vologda .main,
body.theme-khokhloma .friends-page,
body.theme-gzhel .friends-page,
body.theme-polkhov .friends-page,
body.theme-gorodets .friends-page,
body.theme-mezen .friends-page,
body.theme-vologda .friends-page,
body.theme-khokhloma .friends-main,
body.theme-gzhel .friends-main,
body.theme-polkhov .friends-main,
body.theme-gorodets .friends-main,
body.theme-mezen .friends-main,
body.theme-vologda .friends-main,
body.theme-khokhloma .vstage,
body.theme-gzhel .vstage,
body.theme-polkhov .vstage,
body.theme-gorodets .vstage,
body.theme-mezen .vstage,
body.theme-vologda .vstage,
body.theme-khokhloma .voice-wrap,
body.theme-gzhel .voice-wrap,
body.theme-polkhov .voice-wrap,
body.theme-gorodets .voice-wrap,
body.theme-mezen .voice-wrap,
body.theme-vologda .voice-wrap {
  background: transparent !important;
  background-image: none !important;
  position: relative;
  z-index: 1;
}

html.theme-khokhloma.theme-light .rail,
html.theme-gzhel.theme-light .rail,
html.theme-polkhov.theme-light .rail,
html.theme-gorodets.theme-light .rail,
html.theme-mezen.theme-light .rail,
html.theme-vologda.theme-light .rail,
html.theme-khokhloma.theme-dark .rail,
html.theme-gzhel.theme-dark .rail,
html.theme-polkhov.theme-dark .rail,
html.theme-gorodets.theme-dark .rail,
html.theme-mezen.theme-dark .rail,
html.theme-vologda.theme-dark .rail,
html.theme-khokhloma.theme-light .sidebar,
html.theme-gzhel.theme-light .sidebar,
html.theme-polkhov.theme-light .sidebar,
html.theme-gorodets.theme-light .sidebar,
html.theme-mezen.theme-light .sidebar,
html.theme-vologda.theme-light .sidebar,
html.theme-khokhloma.theme-dark .sidebar,
html.theme-gzhel.theme-dark .sidebar,
html.theme-polkhov.theme-dark .sidebar,
html.theme-gorodets.theme-dark .sidebar,
html.theme-mezen.theme-dark .sidebar,
html.theme-vologda.theme-dark .sidebar,
html.theme-khokhloma.theme-light .chan-scroll,
html.theme-gzhel.theme-light .chan-scroll,
html.theme-polkhov.theme-light .chan-scroll,
html.theme-gorodets.theme-light .chan-scroll,
html.theme-mezen.theme-light .chan-scroll,
html.theme-vologda.theme-light .chan-scroll,
html.theme-khokhloma.theme-dark .chan-scroll,
html.theme-gzhel.theme-dark .chan-scroll,
html.theme-polkhov.theme-dark .chan-scroll,
html.theme-gorodets.theme-dark .chan-scroll,
html.theme-mezen.theme-dark .chan-scroll,
html.theme-vologda.theme-dark .chan-scroll,
html.theme-khokhloma.theme-light .members,
html.theme-gzhel.theme-light .members,
html.theme-polkhov.theme-light .members,
html.theme-gorodets.theme-light .members,
html.theme-mezen.theme-light .members,
html.theme-vologda.theme-light .members,
html.theme-khokhloma.theme-dark .members,
html.theme-gzhel.theme-dark .members,
html.theme-polkhov.theme-dark .members,
html.theme-gorodets.theme-dark .members,
html.theme-mezen.theme-dark .members,
html.theme-vologda.theme-dark .members,
html.theme-khokhloma.theme-light .userpanel,
html.theme-gzhel.theme-light .userpanel,
html.theme-polkhov.theme-light .userpanel,
html.theme-gorodets.theme-light .userpanel,
html.theme-mezen.theme-light .userpanel,
html.theme-vologda.theme-light .userpanel,
html.theme-khokhloma.theme-dark .userpanel,
html.theme-gzhel.theme-dark .userpanel,
html.theme-polkhov.theme-dark .userpanel,
html.theme-gorodets.theme-dark .userpanel,
html.theme-mezen.theme-dark .userpanel,
html.theme-vologda.theme-dark .userpanel,
html.theme-khokhloma.theme-light .shell-bottom,
html.theme-gzhel.theme-light .shell-bottom,
html.theme-polkhov.theme-light .shell-bottom,
html.theme-gorodets.theme-light .shell-bottom,
html.theme-mezen.theme-light .shell-bottom,
html.theme-vologda.theme-light .shell-bottom,
html.theme-khokhloma.theme-dark .shell-bottom,
html.theme-gzhel.theme-dark .shell-bottom,
html.theme-polkhov.theme-dark .shell-bottom,
html.theme-gorodets.theme-dark .shell-bottom,
html.theme-mezen.theme-dark .shell-bottom,
html.theme-vologda.theme-dark .shell-bottom,
html.theme-khokhloma.theme-light .voice-conn,
html.theme-gzhel.theme-light .voice-conn,
html.theme-polkhov.theme-light .voice-conn,
html.theme-gorodets.theme-light .voice-conn,
html.theme-mezen.theme-light .voice-conn,
html.theme-vologda.theme-light .voice-conn,
html.theme-khokhloma.theme-dark .voice-conn,
html.theme-gzhel.theme-dark .voice-conn,
html.theme-polkhov.theme-dark .voice-conn,
html.theme-gorodets.theme-dark .voice-conn,
html.theme-mezen.theme-dark .voice-conn,
html.theme-vologda.theme-dark .voice-conn,
html.theme-khokhloma.theme-light .voice-conn-stack,
html.theme-gzhel.theme-light .voice-conn-stack,
html.theme-polkhov.theme-light .voice-conn-stack,
html.theme-gorodets.theme-light .voice-conn-stack,
html.theme-mezen.theme-light .voice-conn-stack,
html.theme-vologda.theme-light .voice-conn-stack,
html.theme-khokhloma.theme-dark .voice-conn-stack,
html.theme-gzhel.theme-dark .voice-conn-stack,
html.theme-polkhov.theme-dark .voice-conn-stack,
html.theme-gorodets.theme-dark .voice-conn-stack,
html.theme-mezen.theme-dark .voice-conn-stack,
html.theme-vologda.theme-dark .voice-conn-stack,
html.theme-khokhloma.theme-light .vc-media-row,
html.theme-gzhel.theme-light .vc-media-row,
html.theme-polkhov.theme-light .vc-media-row,
html.theme-gorodets.theme-light .vc-media-row,
html.theme-mezen.theme-light .vc-media-row,
html.theme-vologda.theme-light .vc-media-row,
html.theme-khokhloma.theme-dark .vc-media-row,
html.theme-gzhel.theme-dark .vc-media-row,
html.theme-polkhov.theme-dark .vc-media-row,
html.theme-gorodets.theme-dark .vc-media-row,
html.theme-mezen.theme-dark .vc-media-row,
html.theme-vologda.theme-dark .vc-media-row,
html.theme-khokhloma.theme-light .vbar,
html.theme-gzhel.theme-light .vbar,
html.theme-polkhov.theme-light .vbar,
html.theme-gorodets.theme-light .vbar,
html.theme-mezen.theme-light .vbar,
html.theme-vologda.theme-light .vbar,
html.theme-khokhloma.theme-dark .vbar,
html.theme-gzhel.theme-dark .vbar,
html.theme-polkhov.theme-dark .vbar,
html.theme-gorodets.theme-dark .vbar,
html.theme-mezen.theme-dark .vbar,
html.theme-vologda.theme-dark .vbar,
html.theme-khokhloma.theme-light .main-head,
html.theme-gzhel.theme-light .main-head,
html.theme-polkhov.theme-light .main-head,
html.theme-gorodets.theme-light .main-head,
html.theme-mezen.theme-light .main-head,
html.theme-vologda.theme-light .main-head,
html.theme-khokhloma.theme-dark .main-head,
html.theme-gzhel.theme-dark .main-head,
html.theme-polkhov.theme-dark .main-head,
html.theme-gorodets.theme-dark .main-head,
html.theme-mezen.theme-dark .main-head,
html.theme-vologda.theme-dark .main-head,
body.theme-khokhloma .rail,
body.theme-gzhel .rail,
body.theme-polkhov .rail,
body.theme-gorodets .rail,
body.theme-mezen .rail,
body.theme-vologda .rail,
body.theme-khokhloma .sidebar,
body.theme-gzhel .sidebar,
body.theme-polkhov .sidebar,
body.theme-gorodets .sidebar,
body.theme-mezen .sidebar,
body.theme-vologda .sidebar,
body.theme-khokhloma .chan-scroll,
body.theme-gzhel .chan-scroll,
body.theme-polkhov .chan-scroll,
body.theme-gorodets .chan-scroll,
body.theme-mezen .chan-scroll,
body.theme-vologda .chan-scroll,
body.theme-khokhloma .members,
body.theme-gzhel .members,
body.theme-polkhov .members,
body.theme-gorodets .members,
body.theme-mezen .members,
body.theme-vologda .members,
body.theme-khokhloma .userpanel,
body.theme-gzhel .userpanel,
body.theme-polkhov .userpanel,
body.theme-gorodets .userpanel,
body.theme-mezen .userpanel,
body.theme-vologda .userpanel,
body.theme-khokhloma .shell-bottom,
body.theme-gzhel .shell-bottom,
body.theme-polkhov .shell-bottom,
body.theme-gorodets .shell-bottom,
body.theme-mezen .shell-bottom,
body.theme-vologda .shell-bottom,
body.theme-khokhloma .voice-conn,
body.theme-gzhel .voice-conn,
body.theme-polkhov .voice-conn,
body.theme-gorodets .voice-conn,
body.theme-mezen .voice-conn,
body.theme-vologda .voice-conn,
body.theme-khokhloma .voice-conn-stack,
body.theme-gzhel .voice-conn-stack,
body.theme-polkhov .voice-conn-stack,
body.theme-gorodets .voice-conn-stack,
body.theme-mezen .voice-conn-stack,
body.theme-vologda .voice-conn-stack,
body.theme-khokhloma .vc-media-row,
body.theme-gzhel .vc-media-row,
body.theme-polkhov .vc-media-row,
body.theme-gorodets .vc-media-row,
body.theme-mezen .vc-media-row,
body.theme-vologda .vc-media-row,
body.theme-khokhloma .vbar,
body.theme-gzhel .vbar,
body.theme-polkhov .vbar,
body.theme-gorodets .vbar,
body.theme-mezen .vbar,
body.theme-vologda .vbar,
body.theme-khokhloma .main-head,
body.theme-gzhel .main-head,
body.theme-polkhov .main-head,
body.theme-gorodets .main-head,
body.theme-mezen .main-head,
body.theme-vologda .main-head {
  background: var(--folk-glass) !important;
  background-image: none !important;
  color: var(--folk-text) !important;
  border-color: color-mix(in srgb, var(--folk-text) 18%, transparent) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Chat denser — readability only */
html.theme-khokhloma.theme-light .messages,
html.theme-gzhel.theme-light .messages,
html.theme-polkhov.theme-light .messages,
html.theme-gorodets.theme-light .messages,
html.theme-mezen.theme-light .messages,
html.theme-vologda.theme-light .messages,
html.theme-khokhloma.theme-dark .messages,
html.theme-gzhel.theme-dark .messages,
html.theme-polkhov.theme-dark .messages,
html.theme-gorodets.theme-dark .messages,
html.theme-mezen.theme-dark .messages,
html.theme-vologda.theme-dark .messages,
html.theme-khokhloma.theme-light .composer,
html.theme-gzhel.theme-light .composer,
html.theme-polkhov.theme-light .composer,
html.theme-gorodets.theme-light .composer,
html.theme-mezen.theme-light .composer,
html.theme-vologda.theme-light .composer,
html.theme-khokhloma.theme-dark .composer,
html.theme-gzhel.theme-dark .composer,
html.theme-polkhov.theme-dark .composer,
html.theme-gorodets.theme-dark .composer,
html.theme-mezen.theme-dark .composer,
html.theme-vologda.theme-dark .composer,
body.theme-khokhloma .messages,
body.theme-gzhel .messages,
body.theme-polkhov .messages,
body.theme-gorodets .messages,
body.theme-mezen .messages,
body.theme-vologda .messages,
body.theme-khokhloma .composer,
body.theme-gzhel .composer,
body.theme-polkhov .composer,
body.theme-gorodets .composer,
body.theme-mezen .composer,
body.theme-vologda .composer {
  background: var(--folk-glass-strong) !important;
  background-image: none !important;
  color: var(--folk-text) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.theme-khokhloma.theme-light .vtile,
html.theme-gzhel.theme-light .vtile,
html.theme-polkhov.theme-light .vtile,
html.theme-gorodets.theme-light .vtile,
html.theme-mezen.theme-light .vtile,
html.theme-vologda.theme-light .vtile,
html.theme-khokhloma.theme-dark .vtile,
html.theme-gzhel.theme-dark .vtile,
html.theme-polkhov.theme-dark .vtile,
html.theme-gorodets.theme-dark .vtile,
html.theme-mezen.theme-dark .vtile,
html.theme-vologda.theme-dark .vtile,
html.theme-khokhloma.theme-light .vstage-empty,
html.theme-gzhel.theme-light .vstage-empty,
html.theme-polkhov.theme-light .vstage-empty,
html.theme-gorodets.theme-light .vstage-empty,
html.theme-mezen.theme-light .vstage-empty,
html.theme-vologda.theme-light .vstage-empty,
html.theme-khokhloma.theme-dark .vstage-empty,
html.theme-gzhel.theme-dark .vstage-empty,
html.theme-polkhov.theme-dark .vstage-empty,
html.theme-gorodets.theme-dark .vstage-empty,
html.theme-mezen.theme-dark .vstage-empty,
html.theme-vologda.theme-dark .vstage-empty,
body.theme-khokhloma .vtile,
body.theme-gzhel .vtile,
body.theme-polkhov .vtile,
body.theme-gorodets .vtile,
body.theme-mezen .vtile,
body.theme-vologda .vtile,
body.theme-khokhloma .vstage-empty,
body.theme-gzhel .vstage-empty,
body.theme-polkhov .vstage-empty,
body.theme-gorodets .vstage-empty,
body.theme-mezen .vstage-empty,
body.theme-vologda .vstage-empty {
  background: var(--folk-glass-soft) !important;
  background-image: none !important;
  color: var(--folk-text) !important;
  border-color: color-mix(in srgb, var(--accent-gold, var(--accent-brand)) 40%, transparent) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Hover on people — solid bright pill (avatar + nick + id) */
html.theme-khokhloma .member:hover,
html.theme-gzhel .member:hover,
html.theme-polkhov .member:hover,
html.theme-gorodets .member:hover,
html.theme-mezen .member:hover,
html.theme-vologda .member:hover,
html.theme-khokhloma .voice-user:hover,
html.theme-gzhel .voice-user:hover,
html.theme-polkhov .voice-user:hover,
html.theme-gorodets .voice-user:hover,
html.theme-mezen .voice-user:hover,
html.theme-vologda .voice-user:hover,
body.theme-khokhloma .member:hover,
body.theme-gzhel .member:hover,
body.theme-polkhov .member:hover,
body.theme-gorodets .member:hover,
body.theme-mezen .member:hover,
body.theme-vologda .member:hover,
body.theme-khokhloma .voice-user:hover,
body.theme-gzhel .voice-user:hover,
body.theme-polkhov .voice-user:hover,
body.theme-gorodets .voice-user:hover,
body.theme-mezen .voice-user:hover,
body.theme-vologda .voice-user:hover,
html.theme-khokhloma.theme-light .member:hover,
html.theme-gzhel.theme-light .member:hover,
html.theme-gorodets.theme-light .member:hover,
html.theme-mezen.theme-light .member:hover,
body.theme-khokhloma.theme-light .member:hover,
body.theme-gzhel.theme-light .member:hover,
body.theme-gorodets.theme-light .member:hover,
body.theme-mezen.theme-light .member:hover {
  background: var(--folk-hover) !important;
  color: var(--folk-hover-text) !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-gold, var(--accent-brand)) 80%, #fff),
    0 6px 18px rgba(0, 0, 0, 0.55) !important;
  border-radius: 12px !important;
}
html.theme-khokhloma .member:hover .member-name-row,
html.theme-gzhel .member:hover .member-name-row,
html.theme-polkhov .member:hover .member-name-row,
html.theme-gorodets .member:hover .member-name-row,
html.theme-mezen .member:hover .member-name-row,
html.theme-vologda .member:hover .member-name-row,
html.theme-khokhloma .member:hover .member-name-row .uname,
html.theme-gzhel .member:hover .member-name-row .uname,
html.theme-polkhov .member:hover .member-name-row .uname,
html.theme-gorodets .member:hover .member-name-row .uname,
html.theme-mezen .member:hover .member-name-row .uname,
html.theme-vologda .member:hover .member-name-row .uname,
html.theme-khokhloma .member:hover .meta,
html.theme-gzhel .member:hover .meta,
html.theme-polkhov .member:hover .meta,
html.theme-gorodets .member:hover .meta,
html.theme-mezen .member:hover .meta,
html.theme-vologda .member:hover .meta,
html.theme-khokhloma .voice-user:hover .vu-nick,
html.theme-gzhel .voice-user:hover .vu-nick,
html.theme-polkhov .voice-user:hover .vu-nick,
html.theme-gorodets .voice-user:hover .vu-nick,
html.theme-mezen .voice-user:hover .vu-nick,
html.theme-vologda .voice-user:hover .vu-nick,
html.theme-khokhloma .voice-user:hover .vu-name,
html.theme-gzhel .voice-user:hover .vu-name,
html.theme-polkhov .voice-user:hover .vu-name,
html.theme-gorodets .voice-user:hover .vu-name,
html.theme-mezen .voice-user:hover .vu-name,
html.theme-vologda .voice-user:hover .vu-name,
body.theme-khokhloma .member:hover .member-name-row,
body.theme-gzhel .member:hover .member-name-row,
body.theme-polkhov .member:hover .member-name-row,
body.theme-gorodets .member:hover .member-name-row,
body.theme-mezen .member:hover .member-name-row,
body.theme-vologda .member:hover .member-name-row,
body.theme-khokhloma .member:hover .member-name-row .uname,
body.theme-gzhel .member:hover .member-name-row .uname,
body.theme-polkhov .member:hover .member-name-row .uname,
body.theme-gorodets .member:hover .member-name-row .uname,
body.theme-mezen .member:hover .member-name-row .uname,
body.theme-vologda .member:hover .member-name-row .uname,
body.theme-khokhloma .member:hover .meta,
body.theme-gzhel .member:hover .meta,
body.theme-polkhov .member:hover .meta,
body.theme-gorodets .member:hover .meta,
body.theme-mezen .member:hover .meta,
body.theme-vologda .member:hover .meta,
body.theme-khokhloma .voice-user:hover .vu-nick,
body.theme-gzhel .voice-user:hover .vu-nick,
body.theme-polkhov .voice-user:hover .vu-nick,
body.theme-gorodets .voice-user:hover .vu-nick,
body.theme-mezen .voice-user:hover .vu-nick,
body.theme-vologda .voice-user:hover .vu-nick,
body.theme-khokhloma .voice-user:hover .vu-name,
body.theme-gzhel .voice-user:hover .vu-name,
body.theme-polkhov .voice-user:hover .vu-name,
body.theme-gorodets .voice-user:hover .vu-name,
body.theme-mezen .voice-user:hover .vu-name,
body.theme-vologda .voice-user:hover .vu-name {
  color: var(--folk-hover-text) !important;
  text-shadow: none !important;
  filter: none !important;
  font-weight: 700 !important;
}
html.theme-khokhloma .member:hover .member-sub,
html.theme-gzhel .member:hover .member-sub,
html.theme-polkhov .member:hover .member-sub,
html.theme-gorodets .member:hover .member-sub,
html.theme-mezen .member:hover .member-sub,
html.theme-vologda .member:hover .member-sub,
body.theme-khokhloma .member:hover .member-sub,
body.theme-gzhel .member:hover .member-sub,
body.theme-polkhov .member:hover .member-sub,
body.theme-gorodets .member:hover .member-sub,
body.theme-mezen .member:hover .member-sub,
body.theme-vologda .member:hover .member-sub {
  color: var(--folk-hover-sub) !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}
html.theme-khokhloma .member:hover .avatar,
html.theme-gzhel .member:hover .avatar,
html.theme-polkhov .member:hover .avatar,
html.theme-gorodets .member:hover .avatar,
html.theme-mezen .member:hover .avatar,
html.theme-vologda .member:hover .avatar,
html.theme-khokhloma .voice-user:hover .avatar,
html.theme-gzhel .voice-user:hover .avatar,
html.theme-polkhov .voice-user:hover .avatar,
html.theme-gorodets .voice-user:hover .avatar,
html.theme-mezen .voice-user:hover .avatar,
html.theme-vologda .voice-user:hover .avatar,
body.theme-khokhloma .member:hover .avatar,
body.theme-gzhel .member:hover .avatar,
body.theme-polkhov .member:hover .avatar,
body.theme-gorodets .member:hover .avatar,
body.theme-mezen .member:hover .avatar,
body.theme-vologda .member:hover .avatar,
body.theme-khokhloma .voice-user:hover .avatar,
body.theme-gzhel .voice-user:hover .avatar,
body.theme-polkhov .voice-user:hover .avatar,
body.theme-gorodets .voice-user:hover .avatar,
body.theme-mezen .voice-user:hover .avatar,
body.theme-vologda .voice-user:hover .avatar {
  filter: brightness(1.2) contrast(1.08) !important;
  box-shadow: 0 0 0 2px var(--folk-hover-text), 0 0 12px rgba(255, 220, 120, 0.75) !important;
  opacity: 1 !important;
}
html.theme-khokhloma .member:hover .status-dot,
html.theme-gzhel .member:hover .status-dot,
html.theme-polkhov .member:hover .status-dot,
html.theme-gorodets .member:hover .status-dot,
html.theme-mezen .member:hover .status-dot,
html.theme-vologda .member:hover .status-dot,
body.theme-khokhloma .member:hover .status-dot,
body.theme-gzhel .member:hover .status-dot,
body.theme-polkhov .member:hover .status-dot,
body.theme-gorodets .member:hover .status-dot,
body.theme-mezen .member:hover .status-dot,
body.theme-vologda .member:hover .status-dot {
  --dot-ring: var(--folk-hover) !important;
}

html.theme-khokhloma.theme-light .modal-backdrop.fullscreen .modal,
html.theme-gzhel.theme-light .modal-backdrop.fullscreen .modal,
html.theme-polkhov.theme-light .modal-backdrop.fullscreen .modal,
html.theme-gorodets.theme-light .modal-backdrop.fullscreen .modal,
html.theme-mezen.theme-light .modal-backdrop.fullscreen .modal,
html.theme-vologda.theme-light .modal-backdrop.fullscreen .modal,
html.theme-khokhloma.theme-dark .modal-backdrop.fullscreen .modal,
html.theme-gzhel.theme-dark .modal-backdrop.fullscreen .modal,
html.theme-polkhov.theme-dark .modal-backdrop.fullscreen .modal,
html.theme-gorodets.theme-dark .modal-backdrop.fullscreen .modal,
html.theme-mezen.theme-dark .modal-backdrop.fullscreen .modal,
html.theme-vologda.theme-dark .modal-backdrop.fullscreen .modal,
html.theme-khokhloma.theme-light .modal-nav,
html.theme-gzhel.theme-light .modal-nav,
html.theme-polkhov.theme-light .modal-nav,
html.theme-gorodets.theme-light .modal-nav,
html.theme-mezen.theme-light .modal-nav,
html.theme-vologda.theme-light .modal-nav,
html.theme-khokhloma.theme-dark .modal-nav,
html.theme-gzhel.theme-dark .modal-nav,
html.theme-polkhov.theme-dark .modal-nav,
html.theme-gorodets.theme-dark .modal-nav,
html.theme-mezen.theme-dark .modal-nav,
html.theme-vologda.theme-dark .modal-nav,
html.theme-khokhloma.theme-light .settings-content,
html.theme-gzhel.theme-light .settings-content,
html.theme-polkhov.theme-light .settings-content,
html.theme-gorodets.theme-light .settings-content,
html.theme-mezen.theme-light .settings-content,
html.theme-vologda.theme-light .settings-content,
html.theme-khokhloma.theme-dark .settings-content,
html.theme-gzhel.theme-dark .settings-content,
html.theme-polkhov.theme-dark .settings-content,
html.theme-gorodets.theme-dark .settings-content,
html.theme-mezen.theme-dark .settings-content,
html.theme-vologda.theme-dark .settings-content,
body.theme-khokhloma .modal-backdrop.fullscreen .modal,
body.theme-gzhel .modal-backdrop.fullscreen .modal,
body.theme-polkhov .modal-backdrop.fullscreen .modal,
body.theme-gorodets .modal-backdrop.fullscreen .modal,
body.theme-mezen .modal-backdrop.fullscreen .modal,
body.theme-vologda .modal-backdrop.fullscreen .modal,
body.theme-khokhloma .modal-nav,
body.theme-gzhel .modal-nav,
body.theme-polkhov .modal-nav,
body.theme-gorodets .modal-nav,
body.theme-mezen .modal-nav,
body.theme-vologda .modal-nav,
body.theme-khokhloma .settings-content,
body.theme-gzhel .settings-content,
body.theme-polkhov .settings-content,
body.theme-gorodets .settings-content,
body.theme-mezen .settings-content,
body.theme-vologda .settings-content {
  background: var(--folk-glass-strong) !important;
  background-image: none !important;
  color: var(--folk-text) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.theme-khokhloma .chan,
body.theme-khokhloma .cat,
body.theme-khokhloma .member,
body.theme-khokhloma .voice-user,
body.theme-khokhloma .vu-nick,
body.theme-khokhloma .vu-name,
body.theme-khokhloma .sidebar-head-name,
body.theme-khokhloma .userpanel .who b,
body.theme-khokhloma .main-head .title,
body.theme-khokhloma .vtile-name,
body.theme-polkhov .chan,
body.theme-polkhov .cat,
body.theme-polkhov .member,
body.theme-polkhov .voice-user,
body.theme-polkhov .vu-nick,
body.theme-polkhov .vu-name,
body.theme-polkhov .sidebar-head-name,
body.theme-polkhov .userpanel .who b,
body.theme-polkhov .main-head .title,
body.theme-polkhov .vtile-name,
body.theme-vologda .chan,
body.theme-vologda .cat,
body.theme-vologda .member,
body.theme-vologda .voice-user,
body.theme-vologda .vu-nick,
body.theme-vologda .vu-name,
body.theme-vologda .sidebar-head-name,
body.theme-vologda .userpanel .who b,
body.theme-vologda .main-head .title,
body.theme-vologda .vtile-name {
  color: var(--folk-text) !important;
  text-shadow: var(--folk-ink-shadow);
}
body.theme-khokhloma .cat,
body.theme-polkhov .cat,
body.theme-vologda .cat { color: var(--folk-muted) !important; }
body.theme-khokhloma .chan.on,
body.theme-khokhloma .chan:hover,
body.theme-polkhov .chan.on,
body.theme-polkhov .chan:hover,
body.theme-vologda .chan.on,
body.theme-vologda .chan:hover {
  color: #fffaf0 !important;
  background: rgba(255, 200, 80, 0.18) !important;
}
body.theme-khokhloma .messages .msg-body,
body.theme-khokhloma .messages .msg-body *:not(.mention):not(a):not(code):not(.spoiler),
body.theme-polkhov .messages .msg-body,
body.theme-polkhov .messages .msg-body *:not(.mention):not(a):not(code):not(.spoiler),
body.theme-vologda .messages .msg-body,
body.theme-vologda .messages .msg-body *:not(.mention):not(a):not(code):not(.spoiler) {
  color: var(--folk-text) !important;
}

body.theme-gzhel .chan,
body.theme-gzhel .cat,
body.theme-gzhel .member,
body.theme-gzhel .sidebar-head-name,
body.theme-gzhel .userpanel .who b,
body.theme-gzhel .main-head .title,
body.theme-gzhel .vtile-name,
body.theme-gorodets .chan,
body.theme-gorodets .cat,
body.theme-gorodets .member,
body.theme-gorodets .sidebar-head-name,
body.theme-gorodets .userpanel .who b,
body.theme-gorodets .main-head .title,
body.theme-gorodets .vtile-name,
body.theme-mezen .chan,
body.theme-mezen .cat,
body.theme-mezen .member,
body.theme-mezen .sidebar-head-name,
body.theme-mezen .userpanel .who b,
body.theme-mezen .main-head .title,
body.theme-mezen .vtile-name {
  color: var(--folk-text) !important;
  text-shadow: var(--folk-ink-shadow);
}
body.theme-gzhel .chan.on,
body.theme-gzhel .chan:hover {
  color: #0a1e36 !important;
  background: rgba(30, 77, 140, 0.14) !important;
}
body.theme-gorodets .chan.on,
body.theme-gorodets .chan:hover {
  color: #2a0c04 !important;
  background: rgba(196, 30, 58, 0.14) !important;
}
body.theme-mezen .chan.on,
body.theme-mezen .chan:hover {
  color: #1a0804 !important;
  background: rgba(160, 20, 20, 0.14) !important;
}
body.theme-gzhel .messages .msg-body,
body.theme-gzhel .messages .msg-body *:not(.mention):not(a):not(code):not(.spoiler),
body.theme-gorodets .messages .msg-body,
body.theme-gorodets .messages .msg-body *:not(.mention):not(a):not(code):not(.spoiler),
body.theme-mezen .messages .msg-body,
body.theme-mezen .messages .msg-body *:not(.mention):not(a):not(code):not(.spoiler) {
  color: var(--folk-text) !important;
}

body.theme-khokhloma .brand span,
body.theme-polkhov .brand span,
body.theme-vologda .brand span { color: var(--accent-gold); }

.theme-preview-khokhloma,
.theme-preview-gzhel,
.theme-preview-polkhov,
.theme-preview-gorodets,
.theme-preview-mezen,
.theme-preview-vologda {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.theme-preview-khokhloma {
  background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.3)), url("assets/themes/khokhloma-thumb.webp?v=1.12.107") !important;
  border-color: #5a2814;
}
.theme-preview-gzhel {
  background-image: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.3)), url("assets/themes/gzhel-thumb.webp?v=1.12.107") !important;
  border-color: #b7cde4;
}
.theme-preview-polkhov {
  background-image: linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.28)), url("assets/themes/polkhov-thumb.webp?v=1.12.107") !important;
  border-color: #5a4020;
}
.theme-preview-gorodets {
  background-image: linear-gradient(rgba(255,240,200,.15), rgba(255,220,160,.25)), url("assets/themes/gorodets-thumb.webp?v=1.12.107") !important;
  border-color: #c41e3a;
}
.theme-preview-mezen {
  background-image: linear-gradient(rgba(255,250,240,.15), rgba(255,240,220,.25)), url("assets/themes/mezen-thumb.webp?v=1.12.107") !important;
  border-color: #8b1a1a;
}
.theme-preview-vologda {
  background-image: linear-gradient(rgba(0,0,20,.2), rgba(0,0,30,.3)), url("assets/themes/vologda-thumb.webp?v=1.12.107") !important;
  border-color: #4a6aa8;
}
.theme-preview-khokhloma .tp-rail,
.theme-preview-khokhloma .tp-side,
.theme-preview-khokhloma .tp-main,
.theme-preview-polkhov .tp-rail,
.theme-preview-polkhov .tp-side,
.theme-preview-polkhov .tp-main,
.theme-preview-vologda .tp-rail,
.theme-preview-vologda .tp-side,
.theme-preview-vologda .tp-main {
  background: rgba(0, 0, 0, 0.3) !important;
}
.theme-preview-gzhel .tp-rail,
.theme-preview-gzhel .tp-side,
.theme-preview-gzhel .tp-main,
.theme-preview-gorodets .tp-rail,
.theme-preview-gorodets .tp-side,
.theme-preview-gorodets .tp-main,
.theme-preview-mezen .tp-rail,
.theme-preview-mezen .tp-side,
.theme-preview-mezen .tp-main {
  background: rgba(255, 255, 255, 0.35) !important;
}

.chan-ticket-nest {
  width: calc(100% - 8px);
  margin: 0 4px 1px 8px;
  text-align: left;
  background: transparent;
  color: var(--text-muted);
  padding: .28rem .45rem .28rem .15rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: .88rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  position: relative;
}
/* Discord-like └ branch from parent channel */
.chan-ticket-nest .ticket-branch {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  position: relative;
  margin-right: 2px;
}
.chan-ticket-nest .ticket-branch::before {
  content: "";
  position: absolute;
  left: 8px;
  top: -10px;
  bottom: 50%;
  width: 0;
  border-left: 2px solid var(--ln-edge2, #3f4147);
}
.chan-ticket-nest .ticket-branch::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 10px;
  height: 0;
  border-top: 2px solid var(--ln-edge2, #3f4147);
  border-radius: 0 0 0 6px;
}
.chan-ticket-nest .chan-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chan-ticket-nest:hover { background: var(--bg-hover); color: var(--text); }
.chan-ticket-nest.on { background: var(--bg-active); color: #fff; }
.ticket-priv-note {
  margin: 10px 12px 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--sf-deep, #1e1f22);
  border: 1px solid var(--ln-edge2, #3f4147);
  color: #dbdee1;
  font-size: .78rem;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ticket-priv-note b {
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #f2f3f5;
}
.msg.thread-member-add-msg .sys-body { color: #949ba4; }
.msg-components{margin-top:8px;display:flex;flex-direction:column;gap:6px;max-width:560px}.msg-components-row{display:flex;flex-wrap:wrap;gap:6px}.msg-comp-btn{border:0;border-radius:6px;padding:6px 12px;font-size:.82rem;font-weight:500;cursor:pointer;color:#fff;background:var(--sf-btn, #4e5058)}.msg-comp-btn:hover{filter:brightness(1.08)}.msg-comp-btn:disabled{opacity:.55;cursor:wait}.msg-comp-btn.primary{background:var(--accent-brand)}.msg-comp-btn.success{background:#248046}.msg-comp-btn.danger{background:#da373c}.msg-comp-btn.warning{background:#e67e22}.msg-comp-btn.secondary{background:var(--sf-btn, #4e5058)}

/* Premium motion: smooth short hovers; longer ease only on enter animations */
body:not(.a11y-reduce-motion) .shell *:not(input):not(textarea):not(select):not(video):not(audio),
body:not(.a11y-reduce-motion) .modal-backdrop *:not(input):not(textarea):not(select),
body:not(.a11y-reduce-motion) .boost-lolka *:not(input):not(textarea):not(select) {
  transition-timing-function: var(--camp-ease, cubic-bezier(.22, 1, .36, 1));
}
body:not(.a11y-reduce-motion) :is(
  .chan, .chan-row, .chan-vc-btn, .chan-gear, .cat, .rail-btn, .rail-btn .pill,
  .member, .friend-row, .friend-ico-btn, .activity-card, .up-game-card,
  .sidebar-boost, .sidebar-head, .userpanel .icon-btn, .userpanel .up-ctrl,
  .userpanel .who, .userpanel-av, .composer .attach, .composer .emoji-btn, .composer .send,
  .msg-actions button, .tools button, .vc-text-dock-tools button, .web-dl-app,
  .src-item, .adr-card, .adr-cta, .boost-lolka-card, .boost-extra-card, .boost-lolka-cta,
  .boost-lolka-go, .boost-lolka-gift, button.ghost, .friends-add-btn, .msg-comp-btn,
  .reaction, .emoji-btn, .attach, .send, .upd-ready-bar, .vc-media-btn
) {
  transition-property: transform, box-shadow, background, background-color, color, border-color, filter, opacity;
  transition-duration: var(--camp-dur-hover, .15s);
  transition-timing-function: ease;
}
body:not(.a11y-reduce-motion) :is(
  .chan, .chan-row, .rail-btn, .member, .friend-row, .activity-card,
  .up-game-card, .boost-lolka-card, .boost-extra-card, .adr-card, .src-item,
  .friends-add-btn, .sidebar-boost
):active {
  transition-duration: .1s;
}

/* Tag color grid + role styles (Discord-like) */
.boost-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 36px);
  gap: 8px;
  margin-top: 8px;
}
.boost-color-swatch {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: var(--swatch, #888);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.boost-color-swatch.on {
  border-color: #f0c14b;
  box-shadow: 0 0 0 1px #f0c14b;
}
.boost-color-swatch.holo {
  background: linear-gradient(135deg, #4aa3ff, #7af0ff 30%, #eb459e 65%, #ffb86c);
  background-size: 180% 180%; --flow-end: 225%;
  animation: boost-nick-flow 2.4s linear infinite;
}
.boost-color-swatch.holo::after {
  content: "↻";
  position: absolute;
  right: 2px;
  bottom: 0;
  font-size: 11px;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}
.boost-color-swatch.custom {
  background: var(--sf-panel, #2b2d31);
  color: #ddd;
  font-size: 16px;
}
.boost-color-swatch img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
}
.role-style-tabs {
  display: flex;
  gap: 8px;
  margin: 8px 0 12px;
}
.role-style-tab {
  flex: 1;
  border: 2px solid var(--line-soft, var(--ln-edge2, #3f4147));
  background: var(--sf-deep, #1e1f22);
  color: var(--text);
  border-radius: 16px;
  padding: 10px 8px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: .82rem;
}
.role-style-tab.on {
  border-color: var(--accent, var(--accent-brand));
  background: rgba(88, 101, 242, .12);
}
.role-style-tab .demo {
  display: block;
  margin-top: 6px;
  font-size: .95rem;
}
.role-style-magic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--sf-deep, #1e1f22);
  border: 1px solid var(--line-soft);
  margin-bottom: 12px;
}
.role-style-magic p { margin: 0; font-size: .8rem; color: var(--text-muted); line-height: 1.35; }
.boost-unlock-glow {
  position: relative;
  border: 0;
  border-radius: 26px;
  padding: 9px 14px;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--sf-deep, #1e1f22);
  cursor: pointer;
  isolation: isolate;
}
.boost-unlock-glow::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, #4aa3ff, #7af0ff, #eb459e, #ffb86c, #4aa3ff);
  background-size: 280% 100%;
  animation: boost-nick-flow 2.4s linear infinite;
  z-index: -1;
}
.boost-unlock-glow::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: var(--sf-deep, #1e1f22);
  z-index: -1;
}
.uname-fx {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  vertical-align: bottom;
  filter: drop-shadow(0 0 8px rgba(80, 180, 255, 0.35));
}
.role-nick.grad,
.uname.grad,
.role-name-live.grad {
  display: inline-block;
  max-width: 100%;
  background: linear-gradient(90deg, var(--role-c1, #ff7a59), var(--role-c2, #f47fff), var(--role-c1, #ff7a59));
  background-size: 220% 100%; --flow-end: 366.6667%;
  /* repeat! no-repeat let the gradient scroll out → letters "erased" mid-loop */
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
  animation: boost-nick-flow 2.8s linear infinite;
}
.role-nick.holo,
.uname.holo,
.role-name-live.holo,
.blv-role.holo {
  display: inline-block;
  max-width: 100%;
  background: linear-gradient(90deg, #4aa3ff, #7af0ff, #eb459e, #ffb86c, #4aa3ff);
  background-size: 280% 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
  animation: boost-nick-flow 2.8s linear infinite;
}
.role-nick.neon,
.uname.neon,
.role-name-live.neon {
  text-shadow: 0 0 6px var(--role-c1, #4ae05a), 0 0 16px var(--role-c1, #4ae05a);
}
.role-nick.xenon,
.uname.xenon,
.role-name-live.xenon {
  display: inline-block;
  max-width: 100%;
  background: linear-gradient(90deg, #7af0ff, #e8f6ff, #4aa3ff, #a4c8ff, #7af0ff);
  background-size: 260% 100%; --flow-end: 325%;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 7px rgba(90, 180, 255, 0.55)) !important;
  animation: boost-nick-flow 3.2s linear infinite;
}
.role-style-preview {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--sf-abyss, #111214);
  font-size: .9rem;
}
.uname-line { display: inline; }
.name-emoji {
  display: inline;
  font-variant-emoji: emoji;
  color: CanvasText;
  -webkit-text-fill-color: initial;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  filter: none !important;
  animation: none !important;
}
.ds-clan-tag.fill .ds-clan-face::before {
  animation: tag-gloss-sweep 2.8s ease-in-out infinite;
}
@keyframes tag-gloss-sweep {
  0% { transform: translateX(-30%); opacity: .35; }
  50% { transform: translateX(20%); opacity: .7; }
  100% { transform: translateX(-30%); opacity: .35; }
}
.settings-sec a.primary {
  display: inline-flex;
  align-items: center;
  background: var(--accent-brand);
  color: #fff;
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  font-weight: 500;
}
.settings-sec a.primary:hover { background: var(--accent-brand-hover); color: #fff; }
.settings-sec [data-dev-apps] input { max-width: 320px; margin: 8px 0; }

.shell.devportal-mode > .main { background: var(--bg-chat); overflow: auto; }
.devportal-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 28px 48px;
  max-width: 920px;
}
.devportal-page .boosts-page-back {
  align-self: flex-start;
  margin: 12px 0 8px;
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font: inherit;
}
.devportal-page .boosts-page-back:hover { background: var(--bg-active); }
.devportal-h { margin: 8px 0 6px; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.devportal-lead { color: var(--text-muted); max-width: 640px; margin: 0 0 14px; }
.devportal-page a.primary {
  display: inline-flex;
  align-items: center;
  background: var(--accent-brand);
  color: #fff;
  border-radius: 12px;
  padding: 0.55rem 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.devportal-page a.primary:hover { background: var(--accent-brand-hover); color: #fff; }
.devportal-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 22px;
}
.devportal-card {
  display: block;
  text-align: left;
  background: var(--bg-mod);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  padding: 16px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  min-height: 148px;
}
.devportal-card:hover { border-color: var(--line); background: var(--bg-hover); }
.devportal-card svg { width: 28px; height: 28px; margin-bottom: 10px; color: #ff6a1a; }
.devportal-card b { display: block; font-size: 16px; margin-bottom: 6px; color: var(--text); }
.devportal-card span { color: var(--text-muted); font-size: 13px; line-height: 1.4; }
.devportal-soon {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--bg-active);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 2px 6px;
  font-style: normal;
  font-weight: 700;
}
.devportal-page .settings-sec { margin-top: 8px; }
.devportal-page .settings-sec input,
.devportal-page .settings-sec select { max-width: 360px; margin: 6px 0 10px; display: block; }
@media (max-width: 820px) {
  .devportal-cards { grid-template-columns: 1fr; }
  .devportal-page { padding: 0 16px 36px; }
}

/* ===== Adrenaline Fans (Lolka-style landing) ===== */
.shell.adr-fans-mode{
  overflow-x:hidden;
  max-width:100%;
}
.shell.adr-fans-mode > .main{
  position:relative;
  background:#120c0e;
  min-height:0;min-width:0;max-width:100%;
  overflow-x:visible;
  overflow-y:auto;
  isolation:isolate;
}
.shell.adr-fans-mode > .main::before{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -8%, rgba(255,90,40,.68) 0%, transparent 58%),
    radial-gradient(95% 70% at 4% 28%, rgba(196,58,58,.52) 0%, transparent 55%),
    radial-gradient(85% 60% at 96% 18%, rgba(235,97,35,.42) 0%, transparent 52%),
    radial-gradient(80% 55% at 50% 100%, rgba(80,24,12,.55) 0%, transparent 62%),
    #120c0e;
}
.adr-fans-page{
  position:relative;z-index:1;
  display:flex;flex-direction:column;flex:1;min-height:100%;
  width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  overflow:visible;
  padding:0 0 48px;
  user-select:none;
  background:transparent;
}
.adr-fans-page > .adr-fans-sky{
  position:absolute;inset:0;z-index:0;
  overflow:visible;pointer-events:none !important;
}
.adr-fans-page > .adr-fans,
.adr-fans-page > .adr-fans-bottom{position:relative;z-index:1}
.adr-fans-page .boosts-page-back{align-self:flex-start;margin:12px 16px 0;z-index:2;position:relative}
.adr-fans{
  position:relative;z-index:1;
  width:100%;min-width:0;margin:0 auto;
  padding:8px 0 0;box-sizing:border-box;
  overflow:visible;
}
.adr-fans-hero{
  position:relative;overflow:visible;border:0;border-radius:0;padding:72px 28px 48px;
  margin:0;text-align:center;background:transparent;
  min-height:min(62vh,560px);display:flex;flex-direction:column;justify-content:center;
}
.adr-fans-sky{
  position:absolute;inset:0;z-index:0;overflow:visible;
  pointer-events:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-user-drag:none;
}
.adr-hero-glow{
  position:absolute;width:340px;height:340px;border-radius:50%;
  filter:blur(80px);opacity:.62;pointer-events:none;
}
.adr-hero-glow.a{left:4%;top:-40px;background:#c43a3a}
.adr-hero-glow.b{right:2%;top:8%;background:#eb6123}
.adr-hero-glow.c{left:38%;top:18%;width:420px;height:220px;background:#ff6a1a;opacity:.28}
.adr-float{
  position:absolute;display:block;
  pointer-events:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-user-drag:none;
  will-change:transform;
}
.adr-float::before,.adr-float::after{
  content:"";position:absolute;inset:0;
  background:var(--adr-art) center / contain no-repeat;
  pointer-events:none;
}
.adr-float::before{inset:-10%;filter:blur(14px);opacity:.55}
.adr-float.ruby{width:86px;aspect-ratio:1}
.adr-float.ruby.a{
  left:3%;top:10%;width:108px;
  filter:blur(2.2px);
  animation:adr-ruby-a 5.2s ease-in-out infinite;
}
.adr-float.ruby.b{
  left:8%;top:48%;width:58px;
  filter:blur(3.6px);
  animation:adr-ruby-b 4.4s ease-in-out infinite;
}
.adr-float.ruby.c{
  right:16%;top:6%;width:64px;
  filter:blur(4.2px);
  animation:adr-ruby-c 6s ease-in-out infinite;
}
.adr-float.ruby.d{
  right:4%;top:58%;width:46px;
  filter:blur(5px);
  animation:adr-ruby-d 5.6s ease-in-out infinite;
}
.adr-float.fox{
  right:5%;top:34%;width:132px;aspect-ratio:205/108;
  filter:blur(2.6px);
  animation:adr-fox-float 4.8s ease-in-out infinite;
}
@keyframes adr-ruby-a{
  0%,100%{transform:translate(0,0) rotate(-18deg)}
  50%{transform:translate(18px,-22px) rotate(-4deg)}
}
@keyframes adr-ruby-b{
  0%,100%{transform:translate(0,0) rotate(16deg)}
  50%{transform:translate(-20px,16px) rotate(28deg)}
}
@keyframes adr-ruby-c{
  0%,100%{transform:translate(0,0) rotate(8deg) scale(1)}
  50%{transform:translate(14px,-18px) rotate(-10deg) scale(1.08)}
}
@keyframes adr-ruby-d{
  0%,100%{transform:translate(0,0) rotate(-12deg)}
  50%{transform:translate(-12px,20px) rotate(10deg)}
}
@keyframes adr-fox-float{
  0%,100%{transform:translate(0,0) rotate(6deg)}
  50%{transform:translate(-18px,-14px) rotate(-2deg)}
}
.adr-hero-title{
  position:relative;margin:0 auto;max-width:720px;
  font-size:clamp(28px,5vw,48px);line-height:1.08;font-weight:800;font-style:italic;
  text-transform:uppercase;color:#fff;
  text-shadow:0 2px 22px rgba(0,0,0,.55),0 0 28px rgba(255,106,26,.28);
}
.adr-hero-sub{
  position:relative;margin:14px auto 0;max-width:520px;font-size:14px;line-height:1.45;color:#b5bbc4;
}
.adr-fans-cta{position:relative;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:22px 0 0}
/* Lolka-style CTAs: white subscribe with heart, outline gift with icon */
.adr-fans-sub{
  display:inline-flex;align-items:center;gap:8px;
  border:0;border-radius:16px;padding:12px 24px;font:inherit;font-weight:800;font-size:15px;
  color:var(--tx-abyss, #111214);background:#fff;cursor:pointer;
}
.adr-fans-sub:hover{background:#f2f3f5}
.adr-fans-sub svg{stroke:var(--tx-abyss, #111214)}
.adr-fans-gift{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:12px 24px;
  font:inherit;font-weight:800;font-size:15px;color:#fff;background:rgba(0,0,0,.25);cursor:pointer;
}
.adr-fans-gift:hover{background:rgba(255,255,255,.08)}
.adr-fans-gift-top{
  position:absolute;top:14px;right:18px;z-index:8;
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:8px 14px;
  font:inherit;font-weight:700;font-size:13px;color:#fff;background:rgba(0,0,0,.35);cursor:pointer;
}
.adr-fans-gift-top:hover{background:rgba(255,255,255,.1)}
.adr-fans-lead{margin:0 auto 22px;max-width:520px;font-size:15px;color:#c4b8a8;text-align:center}
.adr-lolka-best h2,.adr-fans-compare h2{
  margin:8px 0 22px;font-size:clamp(22px,3.2vw,36px);font-weight:800;font-style:italic;
  text-transform:uppercase;text-align:center;color:#fff;
  text-shadow:0 2px 18px rgba(255,106,26,.28);
}
.adr-lolka-best{display:flex;flex-direction:column;gap:16px;margin-bottom:28px;max-width:1120px;min-width:0;margin-left:auto;margin-right:auto;padding:0 28px;overflow:visible}
.adr-lolka-card{
  background:var(--sf-deep, #1e1f22);border-radius:22px;padding:28px 32px;cursor:pointer;
  border:1px solid rgba(255,255,255,.04);
}
.adr-lolka-card.hero{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;
}
.adr-lolka-copy b,.adr-lolka-card > b{
  display:block;margin:0 0 10px;
  font-size:clamp(22px,2.6vw,32px);font-weight:800;line-height:1.15;color:#fff;
}
.adr-lolka-copy p,.adr-lolka-card > p{
  margin:0;font-size:15px;line-height:1.45;color:#dbdee1;max-width:420px;
}
.adr-lolka-previews{display:flex;gap:16px;align-items:flex-start}
/* Mini Discord popouts — same markup as user-popout, scaled for Adrenaline hero */
.adr-lolka-previews .adr-mini-popout{
  position:relative;width:220px;flex-shrink:0;pointer-events:none;
  animation:none;z-index:1;
}
.adr-lolka-previews .adr-mini-popout .banner{height:52px}
.adr-lolka-previews .adr-mini-popout .avatar-wrap{
  margin:-30px 0 0 12px;width:56px;height:56px;cursor:default;
}
.adr-lolka-previews .adr-mini-popout .avatar-wrap .avatar{
  width:56px;height:56px;font-size:1.15rem;border-width:4px;
}
.adr-lolka-previews .adr-mini-popout .avatar-wrap .status-dot{
  width:12px;height:12px;border-width:3px;right:1px;bottom:1px;
}
.adr-lolka-previews .adr-mini-popout .body{padding:2px 12px 12px}
.adr-lolka-previews .adr-mini-popout .nick{margin:0 0 2px;font-size:15px;line-height:1.2}
.adr-lolka-previews .adr-mini-popout .uname-row{font-size:12px;margin-bottom:0}
.adr-mini-demo-btn{
  display:block;margin-top:8px;font-style:normal;text-align:center;border-radius:10px;
  padding:7px 8px;font-size:12px;font-weight:600;color:#fff;background:#248046;
}
/* legacy Lolka flat cards (unused) */
.adr-lolka-card.hero .adr-mini-card{width:210px}
.adr-lolka-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.adr-mini-card{
  width:168px;border-radius:22px;overflow:hidden;position:relative;
  padding:0 12px 12px;box-sizing:border-box;
}
.adr-mini-card.light{background:#c9c4a8;color:#1a1a14}
.adr-mini-card.glow{
  background:#12343a;color:#fff;
  box-shadow:0 0 0 2px #3de0ff,0 0 22px rgba(61,224,255,.45);
}
.adr-mini-banner{
  height:72px;margin:0 -12px 0;background-size:cover;background-position:center;
}
.adr-mini-av{
  width:48px;height:48px;margin:-24px 0 8px;position:relative;
}
.adr-mini-av .avatar{
  width:48px;height:48px;border-radius:50%;
}
.adr-mini-av .avatar-media,.adr-mini-av > img{
  width:48px;height:48px;border-radius:50%;object-fit:cover;
}
.adr-mini-card.light .adr-mini-av .avatar,
.adr-mini-card.light .adr-mini-av img{border-color:#c9c4a8}
.adr-mini-card.glow .adr-mini-av img{border:3px solid #12343a;background:#0b1c1f}
.adr-mini-dot{
  position:absolute;right:1px;bottom:1px;width:12px;height:12px;border-radius:50%;
  background:#23a55a;border:2px solid var(--ln-deep, #1e1f22);
}
.adr-mini-card.light .adr-mini-dot{border-color:#c9c4a8}
.adr-mini-card.glow .adr-mini-dot{border-color:#12343a}
.adr-mini-card b{display:block;font-size:14px;font-weight:800;margin:0}
.adr-mini-card span{display:block;font-size:12px;opacity:.72;margin:2px 0 10px}
.adr-mini-card em{
  display:block;font-style:normal;text-align:center;border-radius:12px;
  padding:8px 6px;font-size:12px;font-weight:700;color:#fff;
}
.adr-mini-card.light em{background:#2f4a32}
.adr-mini-card.glow em{background:#1a3a48}
.adr-fans-cards{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:28px;
}
.adr-fans-card{
  display:flex;flex-direction:column;border-radius:20px;overflow:hidden;cursor:pointer;
  background:var(--bg-mod);border:1px solid var(--line-soft);
  transform:translateY(0);
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s,border-color .3s;
}
.adr-fans-card:hover{
  transform:translateY(-6px);z-index:2;border-color:rgba(255,106,26,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.adr-fans-art{
  min-height:168px;height:auto;background:var(--sf-app3, #0b0c0e);display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;padding:12px;
}
.adr-fans-art.profile{min-height:200px;align-items:flex-end;justify-content:flex-start;padding:0 14px 12px;gap:8px;flex-wrap:wrap}
.adr-fans-banner{
  position:absolute;inset:0 0 42px 0;
  background:linear-gradient(90deg,#c43a3a,#eb6123 50%,#ffb86c);
}
.adr-fans-av{position:relative;z-index:1;margin-right:8px}
.adr-fans-av .avatar{width:52px;height:52px;border:3px solid var(--ln-app3, #0b0c0e)}
.adr-fans-ruby{position:absolute;right:-6px;bottom:-2px;width:18px;height:18px}
.adr-fans-nickflow{
  position:relative;z-index:1;font-size:1.05rem;font-weight:800;
  background:linear-gradient(90deg,#ff6a1a,#ffd24a,#ff6a1a);
  background-size:220% 100%; --flow-end: 366.6667%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:boost-nick-flow 2.8s linear infinite;
}
.adr-fans-nickflow.xl{font-size:1.7rem}
.adr-fans-art.stat{flex-direction:column;gap:2px;color:#fff}
.adr-fans-art.stat em{font-style:normal;font-size:42px;font-weight:800;line-height:1;color:#ff6a1a}
.adr-fans-art.stat span{font-size:13px;font-weight:700;color:#dbdee1}
.adr-fans-art.boosts{gap:8px}
.adr-fans-art.boosts .boost-lolka-rocket{width:64px;height:64px}
.adr-fans-art.emoji .blv-emoji-row{transform:scale(1.35)}
.adr-fans-art.sb b{font-size:42px;color:#ff6a1a}
.adr-fans-sb-wave{
  position:absolute;inset:auto 10% 28%;height:36px;border-radius:40px;
  background:linear-gradient(90deg,transparent,#ff6a1a66,transparent);
  animation:adr-fans-wave 1.6s ease-in-out infinite;
}
@keyframes adr-fans-wave{0%,100%{transform:scaleX(.7);opacity:.4}50%{transform:scaleX(1);opacity:1}}
.adr-fans-demo-btn{
  position:relative;z-index:1;display:block;width:100%;margin-top:8px;
  border-radius:12px;padding:8px 10px;text-align:center;
  background:var(--sf-panel, #2b2d31);color:#fff;font-size:13px;font-weight:700;
}
.adr-fans-card-body{padding:16px 18px 18px}
.adr-fans-card-body b{
  display:block;margin-bottom:8px;
  font-size:clamp(18px,2.1vw,26px);font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.15;color:#fff;
  text-shadow:0 2px 16px rgba(255,106,26,.3);
}
.adr-fans-card-body p{margin:0;font-size:14px;line-height:1.45;color:#c4b8a8}
/* Frame lives on a 3-col wrap. Inner grid is NOT a sibling of the frame,
   otherwise the frame occupies col-3 cells and pushes Adrenaline values down. */
.adr-cmp-wrap{
  --adr-cmp-cols: minmax(0,1.45fr) minmax(0,.82fr) minmax(0,.95fr);
  position:relative;
  display:grid;
  grid-template-columns:var(--adr-cmp-cols);
  max-width:820px;width:100%;min-width:0;margin:8px auto 16px;padding-top:14px;
  overflow:hidden;box-sizing:border-box;
}
.adr-cmp-grid{
  grid-column:1 / -1;grid-row:1;
  position:relative;z-index:1;
  display:grid;grid-template-columns:var(--adr-cmp-cols);align-items:stretch;
  margin:0;
}
.adr-cmp-paid-bg{
  grid-column:3;grid-row:1;
  position:relative;z-index:0;
  pointer-events:none;align-self:stretch;
  margin:0 4px;
  border:1px solid rgba(255,106,26,.55);
  border-radius:22px;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255,106,26,.38) 0%, transparent 58%),
    rgba(255,106,26,.04);
  box-shadow:0 0 28px rgba(255,106,26,.16);
}
.adr-cmp-ideal{
  position:absolute;left:50%;top:-11px;transform:translateX(-50%);
  background:#ff6a1a;color:#fff;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;white-space:nowrap;font-style:normal;
}
.adr-cmp-cell{
  position:relative;z-index:1;min-width:0;
  display:flex;align-items:center;justify-content:center;
  min-height:52px;padding:10px 8px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:14px;font-weight:700;
}
.adr-cmp-cell.paid{grid-column:3;justify-content:center;padding-left:12px;padding-right:12px}
.adr-cmp-cell.free{grid-column:2;justify-content:center}
.adr-cmp-cell.feat{grid-column:1;justify-content:flex-start;gap:10px;font-weight:600;color:#fff}
.adr-cmp-cell.feat i{font-style:normal;width:22px;text-align:center;flex:0 0 22px}
.adr-cmp-cell.head{
  border-top:0;min-height:72px;padding:22px 10px 14px;
  flex-direction:column;justify-content:flex-end;text-align:center;
  font-size:15px;font-weight:800;color:#fff;
}
.adr-cmp-cell.head.feat{align-items:flex-start;text-align:left;padding-left:8px;color:#c4b8a8;font-size:14px}
.adr-cmp-cell.head small{display:block;margin-top:4px;font-size:13px;font-weight:700;color:#c4b8a8}
.adr-cmp-cell.head.paid small{color:#ffb086}
.adr-fans-yes{color:#fff;font-weight:800;font-size:16px}
.adr-cmp-cell.paid .adr-fans-yes{color:#ffe7d6}
.adr-fans-no{color:rgba(255,255,255,.72);font-weight:700}
.adr-fans-val{color:#fff;font-weight:800}
.adr-fans-bottom{
  position:relative;
  flex-shrink:0;
  width:100%;
  max-width:100%;
  margin:52px 0 0;
  padding:56px 28px 72px;
  text-align:center;
  box-sizing:border-box;
  background:transparent;
  border-top:0;
}
.adr-fans-bottom-fox{
  display:block;
  width:min(220px,52vw);
  height:auto;
  margin:0 auto 18px;
  image-rendering:auto;
  filter:drop-shadow(0 12px 28px rgba(255,106,26,.34));
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  background:transparent;
  animation:adr-fox-orbit 5.5s linear infinite;
  will-change:transform;
}
@keyframes adr-fox-orbit{
  from{transform:rotate(0deg) translateX(7px) rotate(0deg)}
  to{transform:rotate(360deg) translateX(7px) rotate(-360deg)}
}
.adr-fans-bottom-title{
  margin:0 auto 26px;
  max-width:680px;
  font-size:clamp(30px,5vw,44px);
  line-height:1.05;
  font-weight:900;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.adr-fans-bottom-cta{margin:0;justify-content:center}
html.theme-folk .adr-fans-bottom,
body.theme-folk .adr-fans-bottom{background:color-mix(in srgb,#0b0c0e 88%,var(--bg-app))}
html.theme-folk .adr-fans-page,
html.theme-folk .shell.adr-fans-mode > .main,
body.theme-folk .adr-fans-page{background:transparent !important}
html.theme-folk .adr-fans-card,
html.theme-folk .adr-lolka-card,
body.theme-folk .adr-fans-card,
body.theme-folk .adr-lolka-card{background:color-mix(in srgb, var(--bg-mod) 72%, transparent)}
@media (prefers-reduced-motion:reduce){
  .adr-fans-nickflow,.adr-fans-sb-wave,.adr-float,.adr-fans-bottom-fox{animation:none !important}
}
body.a11y-reduce-motion .adr-float,
body.a11y-reduce-motion .adr-fans-bottom-fox{animation:none !important}
@media (max-width:820px){
  .adr-fans{padding:0 16px}
  .adr-fans-hero{padding:48px 8px 28px;min-height:auto}
  .adr-float.ruby.a{width:64px;left:0;top:6%}
  .adr-float.ruby.b{width:40px;left:2%;top:52%}
  .adr-float.ruby.c,.adr-float.ruby.d{display:none}
  .adr-float.fox{width:88px;right:0;top:42%}
  .adr-fans-cards,.adr-lolka-pair,.adr-lolka-card.hero{grid-template-columns:1fr}
  .adr-lolka-previews{justify-content:center;flex-wrap:wrap}
  .adr-cmp-wrap{--adr-cmp-cols:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,.85fr)}
  .adr-cmp-cell.feat span{font-size:12px}
  .adr-cmp-cell.head{font-size:12px;min-height:64px;padding-top:18px}
  .adr-fans-bottom{margin-top:36px;padding:44px 16px 56px}
  .adr-fans-bottom-fox{width:min(220px,72vw)}
  .adr-fans-bottom-title{font-size:clamp(24px,7vw,34px)}
}

/* ===== Birthday gift (Adrenaline style, game-sheet size) ===== */
.birthday-sheet-back{
  position:fixed;inset:0;z-index:330;
  background:rgba(0,0,0,.78);
  display:flex;align-items:center;justify-content:center;
  padding:12px;
  animation:modal-fade-in var(--camp-dur-enter,.46s) var(--camp-ease,cubic-bezier(.16,1,.3,1));
}
.birthday-sheet{
  position:relative;
  width:min(920px,calc(100vw - 16px));
  height:min(calc(100vh - 16px),640px);
  max-height:92vh;
  display:flex;flex-direction:column;
  border-radius:20px;
  background:var(--sf-abyss, #111214);
  color:#dbdee1;
  box-shadow:0 16px 48px rgba(0,0,0,.55);
  overflow:hidden;
}
.birthday-sheet-sky{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.birthday-sheet-x{
  position:absolute;top:12px;right:12px;z-index:3;
  width:36px;height:36px;border-radius:12px;
}
.birthday-sheet-body{
  position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;
  padding:28px 24px 32px;overflow:auto;
}
.birthday-sheet-inner{
  width:min(520px,100%);text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;
}
.birthday-sheet-fox{
  width:min(180px,42vw);height:auto;margin:0 0 4px;
  background:transparent;
  filter:drop-shadow(0 12px 28px rgba(255,106,26,.34));
  animation:adr-fox-orbit 5.5s linear infinite;
}
.birthday-sheet-kicker{
  display:inline-flex;align-items:center;gap:8px;margin:0;
  padding:4px 12px;border-radius:999px;
  background:rgba(196,58,58,.16);border:1px solid rgba(196,58,58,.35);
  color:#f2a4a4;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.birthday-sheet-inner h2{
  margin:6px 0 0;font-size:clamp(28px,5vw,36px);font-weight:900;color:#fff;line-height:1.1;
  text-shadow:0 2px 24px rgba(196,58,58,.35);
}
.birthday-sheet-name{
  margin:0;width:100%;max-width:100%;padding:0 12px;box-sizing:border-box;
  line-height:1.35;text-align:center;
}
.birthday-sheet-dn{
  display:block;
  font-size:18px;font-weight:700;color:#ff8a4c;
  max-width:25ch;margin:0 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.birthday-sheet-tag{
  display:block;margin-top:4px;font-size:14px;font-weight:600;color:#ffb07a;opacity:.92;
  max-width:25ch;margin-left:auto;margin-right:auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.birthday-sheet-lead{
  margin:0;max-width:440px;color:#b5bac1;font-size:15px;line-height:1.45;
}
.birthday-gift-card{
  width:100%;margin:8px 0 4px;padding:16px 18px;border-radius:16px;text-align:center;
  background:linear-gradient(135deg,rgba(196,58,58,.14),rgba(255,106,26,.08));
  border:1px solid rgba(196,58,58,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.birthday-gift-card b{display:block;font-size:15px;color:#fff;margin-bottom:6px;text-align:center}
.birthday-gift-card p{margin:0 0 8px;font-size:13px;color:#dbdee1;line-height:1.4;text-align:center}
.birthday-gift-card .hint{font-size:12px;color:#949ba4;display:block;text-align:center}
.adr-gift-row-bday{align-items:center}
.adr-gift-row-bday .btn-brand{flex-shrink:0;margin-left:12px}
.birthday-sheet-cta{
  margin-top:8px;min-width:220px;padding:12px 22px;border:0;border-radius:12px;
  background:linear-gradient(180deg,#e04a4a 0%,#b92f2f 100%);
  color:#fff;font-size:15px;font-weight:800;cursor:pointer;
  box-shadow:0 4px 18px rgba(196,58,58,.42);
  transition:transform .15s ease,filter .15s ease;
}
.birthday-sheet-cta:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.06)}
.birthday-sheet-cta:disabled{opacity:.65;cursor:wait}
.birthday-sheet-done .birthday-sheet-gem{
  filter:drop-shadow(0 8px 24px rgba(196,58,58,.45));
  animation:birthday-gem-pop .6s var(--camp-ease,cubic-bezier(.16,1,.3,1));
}
@keyframes birthday-gem-pop{
  from{transform:scale(.7);opacity:0}
  to{transform:scale(1);opacity:1}
}
.auth-dob-gate-title{
  margin:8px 0 0;font-size:1.15rem;font-weight:800;color:var(--text,#fff);
}
@media (prefers-reduced-motion:reduce){
  .birthday-sheet-fox{animation:none !important}
}
body.a11y-reduce-motion .birthday-sheet-fox{animation:none !important}
@media (max-width:640px){
  .birthday-sheet{height:auto;min-height:min(92vh,640px)}
  .birthday-sheet-body{padding:20px 16px 24px}
}

/* Holo/grad must beat theme/hover color. Crown never inherits paint. */
body:not(.a11y-no-role-colors) .uname.holo,
body:not(.a11y-no-role-colors) .uname.grad,
body:not(.a11y-no-role-colors) .role-name-live.holo,
body:not(.a11y-no-role-colors) .role-name-live.grad,
body:not(.a11y-no-role-colors) .role-nick.holo,
body:not(.a11y-no-role-colors) .role-nick.grad,
body:not(.a11y-no-role-colors) .blv-role.holo,
html[class] body:not(.a11y-no-role-colors) .member:hover .uname.holo,
html[class] body:not(.a11y-no-role-colors) .member:hover .uname.grad,
html[class] body:not(.a11y-no-role-colors) .member:hover .member-name-row .uname.holo,
html[class] body:not(.a11y-no-role-colors) .member:hover .member-name-row .uname.grad,
html[class] body:not(.a11y-no-role-colors) .voice-user .uname.holo,
html[class] body:not(.a11y-no-role-colors) .voice-user .uname.grad,
html[class] body:not(.a11y-no-role-colors) .voice-user .vu-nick .uname.holo,
html[class] body:not(.a11y-no-role-colors) .voice-user .vu-nick .uname.grad,
html[class] body:not(.a11y-no-role-colors) .voice-user:hover .uname.holo,
html[class] body:not(.a11y-no-role-colors) .voice-user:hover .uname.grad,
html[class] body:not(.a11y-no-role-colors) .voice-user:hover .vu-nick .uname.holo,
html[class] body:not(.a11y-no-role-colors) .voice-user:hover .vu-nick .uname.grad {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.priv-badge.owner,
.priv-badge.owner .priv-emoji,
.priv-emoji.crown,
html[class] .priv-badge.owner,
html[class] .priv-emoji.crown,
.member:hover .priv-badge.owner,
.member:hover .priv-emoji.crown,
.voice-user:hover .priv-badge.owner,
.voice-user:hover .priv-emoji.crown {
  color: unset !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
  font-variant-emoji: emoji;
}
html.theme-light .ctx-menu.role-assign-menu button.role-assign-item,
body.theme-light .ctx-menu.role-assign-menu button.role-assign-item,
html.theme-light .ctx-menu.role-assign-menu button.role-assign-item:hover,
body.theme-light .ctx-menu.role-assign-menu button.role-assign-item:hover {
  color: inherit !important;
}

.msg-poll {
  margin-top: 8px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.msg-poll-q { font-weight: 650; color: var(--text); }
.msg-poll-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--bg-input);
  color: var(--text-normal);
  border-radius: var(--radius);
  padding: 8px 10px;
  cursor: pointer;
  overflow: hidden;
}
.msg-poll-opt.on { border-color: var(--accent-brand); }
.msg-poll-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--accent-brand) 22%, transparent);
  pointer-events: none;
}
.msg-poll-txt { position: relative; flex: 1; }
.msg-poll-n { position: relative; color: var(--text-muted); font-size: .85rem; }
.msg-poll-foot { color: var(--text-muted); font-size: .8rem; }
.forum-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.forum-wrap .main-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.forum-list { overflow: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.forum-post {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-sidebar);
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.forum-post:hover { background: var(--bg-hover); }
.server-event {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}




/* settings outline icons + mem activity + invite landing */
.modal-backdrop.fullscreen .modal-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
}
.settings-nav-ico {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: .85;
}
.settings-nav-ico svg { width: 18px; height: 18px; display: block; }
.modal-nav button.on .settings-nav-ico { opacity: 1; }

.mem-act-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 4px 6px;
  padding: 0 4px;
}
.mem-act-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #949ba4;
}
.mem-act-toggle {
  border: 0;
  background: transparent;
  color: #b5bac1;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 8px;
}
.mem-act-toggle:hover { color: #fff; background: rgba(255,255,255,.06); }
.mem-act-list { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.mem-act-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 6px 8px;
  background: rgba(0,0,0,.18);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.mem-act-row:hover { background: var(--bg-hover, var(--sf-raised2, #35373c)); }
.mem-act-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 1px;
}
.mem-act-meta b {
  color: #f2f3f5;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mem-act-meta span {
  color: #949ba4;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mem-act-ico {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}
.mem-act-empty { margin: 4px 8px 8px; font-size: 12px; }

.invite-landing {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(8,8,10,.72), rgba(8,8,10,.88)),
    var(--inv-banner, none);
  background-size: cover;
  background-position: center;
}
.invite-landing-card {
  width: min(420px, 100%);
  border-radius: 20px;
  background: var(--sf-raised, #313338);
  padding: 28px 24px 20px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
  position: relative;
  overflow: hidden;
}
.invite-landing-kicker {
  margin: 0 0 14px;
  color: #b5bac1;
  font-size: 14px;
}
.invite-landing-ico {
  width: 80px;
  height: 80px;
  border-radius: 26px;
  object-fit: cover;
  margin: 0 auto 12px;
  display: block;
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}
.invite-landing-card h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 22px;
}
.invite-landing-stats {
  display: flex;
  justify-content: center;
  gap: 16px;
  color: #b5bac1;
  font-size: 13px;
  margin-bottom: 18px;
}
.invite-landing-stats i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #80848e;
  margin-right: 6px;
}
.invite-landing-stats i.on { background: #23a55a; }
.invite-landing-cta {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: #5865f2;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.invite-landing-cta:hover { filter: brightness(1.06); }
.invite-landing-x {
  margin-top: 10px;
  width: 100%;
}

/* === 1.12.310 boost inventory + similar covers === */
.boosts-assigned { margin-top: 16px; }
.boosts-assigned h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #b5bac1; }
.boosts-assigned-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
}
.boosts-assigned-meta { min-width: 0; display: grid; gap: 2px; }
.boosts-assigned-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boosts-assigned .btn-ghost {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #f2a4ff;
  cursor: pointer;
  font-weight: 600;
}
.boosts-assigned .btn-ghost:hover { text-decoration: underline; }


/* === CAMP 1.12.343 QA === */
.modal-backdrop.fullscreen .modal-nav,
.modal-backdrop.fullscreen .modal-nav[data-settings-nav] {
  flex: 0 0 280px !important;
  width: 280px !important;
  max-width: 280px !important;
  padding: 20px 8px 24px 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}
.modal-backdrop.fullscreen .modal-nav::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
.modal-backdrop.fullscreen .modal-nav button {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 10px !important;
  padding: 12px 10px !important;
  min-height: 44px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  box-sizing: border-box;
}
.modal-backdrop.fullscreen .modal-nav button .settings-nav-lab,
.modal-backdrop.fullscreen .modal-nav button > span:last-child {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.modal-backdrop.fullscreen .modal-nav h3 {
  margin: 18px 6px 10px !important;
  padding: 0 4px !important;
}
html[data-density="compact"] .modal-backdrop.fullscreen .modal-nav button,
html[data-density="cozy"] .modal-backdrop.fullscreen .modal-nav button {
  margin-bottom: 10px !important;
  padding: 12px 10px !important;
  min-height: 44px !important;
}

.mentions-float {
  bottom: 6px !important;
  left: 8px !important;
  right: 8px !important;
  z-index: 20 !important;
}
.sidebar { position: relative; }

.vc-speaker-ico { color: #949ba4; display: block; }
.chan.on .vc-speaker-ico,
.chan:hover .vc-speaker-ico { color: #dbdee1; }
.rail-compass { color: #dbdee1; }

.shop-lolka-preview {
  height: 168px !important;
  padding: 0 !important;
  overflow: hidden;
  position: relative;
  background: var(--sf-deep, #1e1f22);
}
.shop-lolka-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.friends-headbar .home-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px !important;
}
.friends-headbar .home-tabs button {
  padding: 8px 12px !important;
  margin: 0 !important;
}

.vc-status-modal .modal-panel { min-width: min(420px, 92vw); }
.vc-status-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 12px 0 6px;
  font-weight: 600;
}
.vc-status-input-row input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-input, var(--sf-deep, #1e1f22));
  color: var(--text);
}

.boost-extra-split.lolka-styles {
  grid-template-columns: 1.05fr 1fr;
  min-height: 360px;
}
.lolka-styles-brand {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
}
.lolka-style-preview-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 20px;
  background: rgba(0,0,0,.28);
  margin-bottom: 16px;
}
.lolka-style-preview-card .boost-chat-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lolka-style-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lolka-style-btns .boost-style-opt {
  border: 1px solid rgba(255,106,26,.35);
  background: rgba(255,255,255,.04);
  color: #ff9a5a;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
}
.lolka-style-btns .boost-style-opt.on {
  border-color: #ff6a1a;
  box-shadow: 0 0 0 1px #ff6a1a inset;
  color: #fff;
  background: rgba(255,106,26,.12);
}


/* === CAMP 1.12.347 === */
/* Mentions: flush to bottom of channel sidebar (above voice/user bar) */
.mentions-float {
  bottom: 6px !important;
  left: 8px !important;
  right: 8px !important;
  z-index: 20 !important;
}
/* Community settings: modest narrow nav (not 280, not 156 — middle) */
.modal-backdrop.fullscreen[data-server-settings] .modal-nav,
[data-server-settings] .modal-nav {
  flex: 0 0 200px !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  padding: 16px 8px 20px 10px !important;
  box-sizing: border-box !important;
}
.modal-backdrop.fullscreen[data-server-settings] .modal-nav button,
[data-server-settings] .modal-nav button {
  font-size: 14px !important;
  min-height: 34px !important;
  padding: 8px 10px !important;
  margin: 0 0 4px !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}
.modal-backdrop.fullscreen[data-server-settings] .modal-nav h3,
.modal-backdrop.fullscreen[data-server-settings] .modal-nav .nav-group-label,
[data-server-settings] .modal-nav h3,
[data-server-settings] .modal-nav .nav-group-label {
  font-size: 11px !important;
  padding: 6px 10px !important;
  margin: 12px 4px 6px !important;
}
.modal-backdrop.fullscreen[data-server-settings] .modal-nav .nav-sep,
[data-server-settings] .modal-nav .nav-sep {
  margin: 8px 8px !important;
}

/* Lolka-style Discord import (Xenon JSON) */
.discord-import-lolka {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 520px;
}
.discord-import-lolka .di-lead {
  margin: 0;
  color: #dbdee1;
  font-size: 14px;
  line-height: 1.45;
}
.discord-import-lolka .di-howto {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 14px 16px;
}
.discord-import-lolka .di-howto b {
  display: block;
  margin-bottom: 8px;
  color: #f2f3f5;
  font-size: 14px;
}
.discord-import-lolka .di-howto ol {
  margin: 0;
  padding-left: 1.2em;
  color: #b5bac1;
  font-size: 14px;
  line-height: 1.55;
}
.discord-import-lolka .di-howto a {
  color: #00a8fc;
  text-decoration: none;
}
.discord-import-lolka .di-howto a:hover { text-decoration: underline; }
.discord-import-lolka .di-pick-json {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--sf-panel, #2b2d31);
  color: #f2f3f5;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.discord-import-lolka .di-pick-json:hover { background: var(--sf-raised2, #35373c); }
.discord-import-lolka .di-file-name { margin: 0; }
.discord-import-lolka .srv-import-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.discord-import-lolka .srv-import-counts > div {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
}
.discord-import-lolka .srv-import-counts b {
  display: block;
  font-size: 18px;
  color: #fff;
}
.discord-import-lolka .srv-import-counts span {
  font-size: 12px;
  color: #b5bac1;
}

/* Community settings: same shell as user settings (1280×880 fullscreen card) */
.modal-backdrop.fullscreen[data-server-settings] {
  padding: 12px !important;
  align-items: center !important;
  justify-content: center !important;
}
.modal-backdrop.fullscreen[data-server-settings] .modal {
  width: min(1280px, calc(100vw - 16px)) !important;
  max-width: min(1280px, calc(100vw - 16px)) !important;
  min-width: 0 !important;
  height: min(calc(100vh - 16px), 880px) !important;
  max-height: min(calc(100vh - 16px), 880px) !important;
  margin: 0 !important;
  border-radius: 20px !important;
}

/* Channel settings: size of main pane (user red box) — right of channel list */
.modal-backdrop[data-channel-settings] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  background: rgba(0, 0, 0, 0.78) !important;
}
.modal-backdrop[data-channel-settings] .channel-settings-modal.compact-settings,
.modal-backdrop[data-channel-settings] .modal.channel-settings-modal {
  width: min(1100px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  min-width: 0 !important;
  height: min(calc(100vh - 24px), 820px) !important;
  max-height: min(calc(100vh - 24px), 820px) !important;
  display: flex !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: var(--bg-chat) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55) !important;
}
.modal-backdrop[data-channel-settings] .modal-nav {
  flex: 0 0 218px !important;
  width: 218px !important;
  max-width: 218px !important;
  padding: 44px 8px 16px 16px !important;
  background: var(--bg-sidebar) !important;
  overflow-y: auto !important;
}
.modal-backdrop[data-channel-settings] .modal-panel {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
/* Колонка контента как в Discord: ~740px возле нава, справа — пустота */
.modal-backdrop[data-channel-settings] .settings-content {
  flex: 0 1 740px !important;
  min-width: 0 !important;
  max-width: 740px !important;
}
.modal-backdrop[data-channel-settings] .settings-content {
  padding: 20px 28px 16px !important;
  /* Колонка: заголовок, растущее скроллящееся тело, футер прижат к низу.
   * Раньше скроллилась вся колонка — полоса «Сохранить» липла к полям,
   * а под ней зияла пустота до низа панели. */
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.modal-backdrop[data-channel-settings] .channel-settings-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
.modal-backdrop[data-channel-settings] .channel-settings-footer {
  flex: 0 0 auto !important;
  margin-top: auto !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 12px !important;
}
@media (min-width: 801px) {
  /* На десктопе закрывает колонка ✕ справа; мобильный бар не нужен.
   * На узких экранах колонка скрыта — бар с ✕ обязан остаться. */
  .modal-backdrop[data-channel-settings] .settings-mobile-bar {
    display: none !important;
  }
}
/* Панель канала: контент и колонка ✕ — в ряд, крестик в правом верхнем углу,
 * как во всех остальных настройках (раньше падал под контент, вниз). */
.modal-backdrop[data-channel-settings] .modal-panel {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  min-height: 0 !important;
}
.modal-backdrop[data-channel-settings] .settings-close-col {
  flex: 0 0 56px !important;
  width: 56px !important;
  padding: 12px 10px 0 0 !important;
  align-self: flex-start !important;
}
.vu-game.playing-sub,
.member-sub.playing,
.friend-sub.playing-sub,
.user-tag-mini.playing-sub,
.playing-sub {
  color: #3ba55d !important;
  font-weight: 500;
}
.shop-lolka-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shop-lolka-fallback {
  font-size: 42px;
  opacity: .35;
}
/* Activity may fill panel; mutual friends/servers stay top-aligned (not vertically centered). */
.up-tab-body .up-activity {
  min-height: 100%;
}
.up-tab-body .up-list {
  min-height: 0;
  align-content: start;
  align-items: stretch;
}

/* CAMP 1.12.347 badge-line */

.chan .mention-badge.mention-count {
  margin-left: auto !important;
  align-self: center;
  flex: 0 0 auto !important;
  order: 99;
}
.chan-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.up-act-rich {
  color: #b5d08a !important;
  font-size: 13px;
  font-weight: 500;
  margin-top: 2px;
  line-height: 1.3;
}
.up-act-rich.muted { color: #949ba4 !important; font-weight: 400; font-size: 12px; }
.up-act-now {
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.28);
}
.up-act-now-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #3ba55d;
  margin-bottom: 10px;
}
.up-act-now-row { display: flex; gap: 12px; align-items: flex-start; }
.up-act-now-ico { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.up-act-now-body b { display: block; font-size: 16px; color: #f2f3f5; }
.rail-btn .rail-badge {
  bottom: -6px !important;
  right: -4px !important;
}

/* ---- CAMP Activities — Discord «In The Park» ---- */
.camp-act-stage.camp-act-park {
  position: relative;
  flex: 1;
  min-height: 480px;
  border-radius: 20px;
  overflow: hidden;
  background: #0a1218;
}
.camp-act-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.camp-act-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.camp-act-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  pointer-events: none;
}
.camp-act-overlay button,
.camp-act-pick-card,
.camp-act-text-btn,
.camp-act-icon-btn {
  pointer-events: auto;
}
.camp-act-overlay.lobby {
  background: linear-gradient(180deg, rgba(10,18,24,.15) 0%, rgba(10,18,24,.55) 55%, rgba(10,18,24,.75) 100%);
}
.camp-act-overlay.playing {
  background: linear-gradient(180deg, transparent 0%, transparent 55%, rgba(10,18,24,.65) 100%);
  justify-content: flex-end;
  padding-bottom: 72px;
}
.camp-act-logo {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .28em;
  color: rgba(255,255,255,.75);
  margin-bottom: 8px;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.camp-act-park-title {
  margin: 0 0 12px;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0,0,0,.55), 0 0 40px rgba(87,242,135,.15);
  line-height: 1.05;
}
.camp-act-park-sub,
.camp-act-park-status {
  margin: 0 0 20px;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  max-width: 420px;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.camp-act-park-status.play {
  margin: 8px 0 0;
  font-weight: 600;
  color: #57f287;
}
.camp-act-park-btn {
  min-width: 200px;
  padding: 14px 28px;
  border: none;
  border-radius: 20px;
  background: rgba(87,242,135,.22);
  border: 2px solid rgba(87,242,135,.55);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.camp-act-park-btn:hover:not(:disabled) {
  background: rgba(87,242,135,.35);
  transform: translateY(-1px);
}
.camp-act-park-btn:disabled { opacity: .65; cursor: default; }
.camp-act-pick-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 8px 0 20px;
}
.camp-act-pick-card {
  width: 180px;
  padding: 24px 16px;
  border-radius: 22px;
  border: 2px solid rgba(255,255,255,.2);
  background: rgba(20,32,40,.55);
  backdrop-filter: blur(12px);
  color: #fff;
  cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s;
}
.camp-act-pick-card:hover {
  transform: translateY(-3px);
  border-color: rgba(87,242,135,.6);
  background: rgba(30,48,58,.7);
}
.camp-act-pick-card.checkers:hover { border-color: rgba(230,126,34,.7); }
.camp-act-pick-card.chess:hover { border-color: rgba(155,89,182,.7); }
.camp-act-pick-card.fruit:hover { border-color: rgba(255,106,26,.75); }
/* Fruit Ninja: холст поверх парка, HUD сверху, лезвие — на холсте */
.fruit-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; z-index: 1; }
.fruit-layer { position: fixed; z-index: 40; overflow: hidden; border-radius: 12px; background: #000; }
.fruit-layer[hidden] { display: none; }
.fruit-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; background: #1b0f07; }
.camp-act-overlay.fruit-playing { pointer-events: none; }
.camp-act-overlay.fruit-playing { justify-content: flex-start; }
.fruit-hud {
  position: absolute; top: 14px; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center; gap: 14px; pointer-events: none;
}
.fruit-hud span {
  padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.5); color: #fff;
  font-weight: 700; font-size: 14px; letter-spacing: .02em;
}
.fruit-hud .fruit-hud-score { font-size: 18px; }
.fruit-hud .fruit-hud-mode { color: rgba(255,255,255,.75); font-weight: 600; }
.fruit-hud .fruit-hud-lives i { font-style: normal; color: rgba(255,255,255,.35); margin: 0 2px; font-size: 18px; }
.fruit-hud .fruit-hud-lives i.lost { color: #ff3b3b; text-shadow: 0 0 8px rgba(255,59,59,.7); }
.fruit-modes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 4px 0 12px; pointer-events: auto; }
.fruit-mode-btn {
  min-width: 150px; padding: 12px 14px; border-radius: 16px; border: 2px solid rgba(255,255,255,.2);
  background: rgba(20,32,40,.55); color: #fff; cursor: pointer; text-align: center; backdrop-filter: blur(10px);
}
.fruit-mode-btn b { display: block; font-size: 14px; letter-spacing: .04em; }
.fruit-mode-btn small { color: rgba(255,255,255,.65); font-size: 12px; }
.fruit-mode-btn.on { border-color: #ff6a1a; background: rgba(255,106,26,.18); }
.camp-act-pick-ico { display: block; font-size: 36px; margin-bottom: 10px; }
.camp-act-pick-card b { display: block; font-size: 13px; letter-spacing: .08em; margin-bottom: 6px; }
.camp-act-pick-card small { color: rgba(255,255,255,.65); font-size: 13px; }
.camp-act-tip {
  margin: 0 0 6px;
  padding: 10px 16px;
  max-width: 480px;
  border-radius: 16px;
  background: rgba(0,0,0,.45);
  color: rgba(255,255,255,.85);
  font-size: 13px;
  line-height: 1.4;
}
.camp-act-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, transparent 100%);
}
.camp-act-participants { display: flex; gap: 8px; }
.camp-act-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #5865f2;
  border: 2px solid rgba(255,255,255,.25);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.camp-act-bar-actions { display: flex; gap: 8px; align-items: center; }
.camp-act-text-btn,
.camp-act-icon-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  border-radius: 12px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}
.camp-act-icon-btn { width: 32px; height: 32px; padding: 0; }
.camp-act-conn-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 8px 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(87,242,135,.08);
  border: 1px solid rgba(87,242,135,.18);
}
.camp-act-conn-ico { font-size: 22px; }
.camp-act-conn-text b { display: block; font-size: 13px; }
.camp-act-conn-text span { font-size: 11px; color: var(--text-muted); }
.vc-media-btn.on[data-vc-act] { color: #57f287; }
.vu-game.camp-act-sub { color: #57f287; }
.camp-act-pop { min-width: 240px; padding: 6px; }

/* events sheet */
.events-sheet-modal,
.events-wizard-modal,
/* Окно вопроса должно быть по размеру текста, а не во весь экран:
 * старое правило растягивало его до 920x640 и внутри зияла пустота. */
.camp-confirm-modal {
  width: min(440px, calc(100vw - 32px)) !important;
  height: auto !important;
  max-height: 88vh;
}
.camp-confirm-modal .modal-panel { height: auto; }
.camp-confirm-modal .modal-body { padding-bottom: 4px; }
/* Окна событий — простые диалоги без левой навигации: базовая .modal — сетка
 * 200px|1fr для настроек, и панель событий попадала в узкую левую колонку, а
 * справа зияла пустота (фото Алекса 04.09.2026). Одна колонка, нормальная ширина. */
.events-sheet-modal,
.events-wizard-modal {
  grid-template-columns: 1fr !important;
  width: min(560px, calc(100vw - 32px)) !important;
}
.events-sheet-backdrop .modal-panel,
.events-wizard-backdrop .modal-panel {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  min-width: 0;
}
.ev-wizard-tab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-wizard-body h2 { font-size: 22px; }
@media (min-width: 521px) {
  .ev-voice-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
}
.events-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: none;
}
.events-sheet-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
  font-weight: 700;
  font-size: 16px;
}
.events-sheet-ico { display: grid; place-items: center; color: #b5bac1; }
.events-sheet-ico svg { width: 20px; height: 20px; }
.ev-create-head {
  margin-left: 4px;
  padding: 4px 12px;
  font-size: 13px;
  min-height: 28px;
}
.events-sheet-x { flex-shrink: 0; }
.events-sheet-body { overflow: auto; padding: 0 16px 16px; }
.events-empty { padding: 28px 8px; }
.events-list { display: flex; flex-direction: column; gap: 12px; }
.ev-card {
  background: var(--sf-panel, #2b2d31);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ev-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.ev-card-when {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.ev-cal-ico { color: #949cf7; display: grid; place-items: center; }
.ev-starts-in { color: #949cf7; font-size: 12px; font-weight: 600; }
.ev-when-pill {
  font-size: 11px;
  color: #b5bac1;
  background: var(--sf-deep, #1e1f22);
  border-radius: 999px;
  padding: 2px 8px;
}
.ev-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ev-creator-av { width: 20px !important; height: 20px !important; font-size: 10px !important; }
.ev-rsvp-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--sf-deep, #1e1f22);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  color: #b5bac1;
}
.ev-rsvp-pill.on { color: #57f287; }
.ev-card-title { margin: 0; font-size: 16px; line-height: 1.25; word-break: break-word; }
.ev-card-desc {
  margin: 0;
  font-size: 13px;
  color: #b5bac1;
  line-height: 1.35;
  word-break: break-word;
}
.ev-card-foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.ev-card-loc {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #dbdee1;
}
.ev-ch-name { font-weight: 600; }
.ev-card-online {
  color: #b5bac1;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .02em;
}
.ev-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ev-more-btn, .ev-copy-btn, .ev-rsvp-btn {
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
.ev-more-btn {
  width: 32px;
  height: 32px;
  background: var(--sf-deep, #1e1f22);
  color: #dbdee1;
}
.ev-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sf-deep, #1e1f22);
  color: #dbdee1;
  padding: 6px 10px;
}
.ev-rsvp-btn {
  background: #248046;
  color: #fff;
  padding: 6px 14px;
  font-weight: 600;
  margin-left: auto;
}
.ev-rsvp-btn.on { background: #1a6334; }
.ev-wizard-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ev-wizard-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #949ba4;
  font: inherit;
  font-size: 12px;
  padding: 12px 6px;
  cursor: default;
}
.ev-wizard-tab.on { color: #f2f3f5; border-bottom-color: #5865f2; }
.ev-wizard-tab.done { color: #b5bac1; }
.ev-wizard-body { overflow: auto; padding: 16px; }
.ev-wizard-body h2 { margin: 0 0 6px; font-size: 20px; }
.ev-wizard-foot { justify-content: space-between; }
.ev-wizard-foot-right { display: flex; gap: 8px; margin-left: auto; }
.ev-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  color: #b5bac1;
}
.ev-field b { color: #f23f43; font-weight: 700; }
.ev-field input, .ev-field select, .ev-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--sf-deep, #1e1f22);
  border: 1px solid var(--ln-deep, #1e1f22);
  border-radius: 8px;
  color: #dbdee1;
  padding: 10px;
  font: inherit;
  font-weight: 400;
}
.ev-field input:focus, .ev-field select:focus, .ev-field textarea:focus {
  border-color: #5865f2;
  outline: none;
}
.ev-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ev-voice-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ev-voice-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--sf-panel, #2b2d31);
  border: 1px solid transparent;
  border-radius: 12px;
  color: #dbdee1;
  padding: 10px 12px;
  cursor: pointer;
  font: inherit;
}
.ev-voice-pick.on { border-color: #5865f2; background: rgba(88,101,242,.12); }
.ev-cover-row { margin-top: 8px; }
.ev-cover-btn[disabled] { opacity: .45; cursor: not-allowed; }
.ev-step-preview [data-ev-preview] { margin-bottom: 14px; }
.ev-created-by { margin-top: 8px; }
@media (max-width: 520px) {
  .ev-field-row { grid-template-columns: 1fr; }
  .ev-rsvp-btn { margin-left: 0; width: 100%; }
  .ev-copy-btn { flex: 1; justify-content: center; }
}

/* Birthday week — tint only while gift modal is open (not whole Adrenaline page) */
body.camp-birthday-theme.birthday-sheet-open #app {
  position: relative;
}
body.camp-birthday-theme.birthday-sheet-open #app::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  background:
    radial-gradient(ellipse 55% 35% at 12% 0%, rgba(196, 58, 58, .14), transparent 65%),
    radial-gradient(ellipse 45% 30% at 88% 8%, rgba(255, 106, 26, .1), transparent 60%);
}
body.camp-birthday-theme .birthday-sheet-back { z-index: 10050; }

/* Voice debug overlay (Ctrl+Shift+V) */
.camp-voice-debug{
  position:fixed;right:12px;bottom:72px;z-index:12000;
  width:min(320px,calc(100vw - 24px));
  background:var(--sf-abyss, #111214);border:1px solid var(--ln-edge2, #3f4147);border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.55);font:12px/1.45 ui-monospace,Consolas,monospace;
  color:#dbdee1;pointer-events:auto;
}
.camp-voice-debug-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px;border-bottom:1px solid var(--ln-panel, #2b2d31);font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.04em;color:#faa61a;
}
.camp-voice-debug-head button{
  border:0;background:transparent;color:#b5bac1;cursor:pointer;font-size:16px;line-height:1;
}
.camp-voice-debug pre{margin:0;padding:10px;white-space:pre-wrap;word-break:break-word;max-height:40vh;overflow:auto}

/* ===== CAMP marketing landing (Discord layout, CAMP ember palette) ===== */
.camp-mkt {
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  color: #fff7ed;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255, 120, 40, 0.35), transparent 55%),
    radial-gradient(800px 500px at 10% 40%, rgba(180, 50, 20, 0.18), transparent 50%),
    radial-gradient(700px 420px at 90% 30%, rgba(255, 160, 60, 0.12), transparent 45%),
    linear-gradient(180deg, #2a160e 0%, #14110f 42%, #0c0b0a 100%);
  font-family: "Segoe UI Variable", "Segoe UI", "Trebuchet MS", sans-serif;
}
.camp-mkt-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px clamp(16px, 4vw, 48px);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(10px);
  background: rgba(20, 12, 8, 0.35);
}
.camp-mkt-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 18px;
}
.camp-mkt-brand img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 120, 40, 0.35));
}
.camp-mkt-login {
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  background: #fff;
  color: #1a120c;
  font-weight: 700;
  cursor: pointer;
}
.camp-mkt-login:hover { filter: brightness(0.96); }
.camp-mkt-hero {
  text-align: center;
  padding: 28px clamp(16px, 4vw, 48px) 64px;
  max-width: 980px;
  margin: 0 auto;
}
.camp-mkt-cast {
  position: relative;
  height: clamp(220px, 38vw, 360px);
  margin: 0 auto 28px;
  max-width: 760px;
}
.camp-mkt-logo-hero {
  position: absolute;
  left: 50%;
  top: 42%;
  width: clamp(140px, 22vw, 220px);
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 3;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.55)) drop-shadow(0 0 28px rgba(255,120,40,.3));
}
.camp-mkt-fox {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.45));
  image-rendering: auto;
}
.camp-mkt-fox-l { left: 4%; bottom: 8%; width: clamp(72px, 14vw, 130px); z-index: 2; transform: rotate(-6deg); }
.camp-mkt-fox-c { left: 50%; bottom: 0; width: clamp(90px, 16vw, 150px); z-index: 4; transform: translateX(-50%); }
.camp-mkt-fox-r { right: 6%; top: 8%; width: clamp(70px, 13vw, 120px); z-index: 2; transform: rotate(8deg); }
.camp-mkt-ember {
  position: absolute;
  inset: auto 10% 0;
  height: 40%;
  background: radial-gradient(ellipse at center, rgba(255,120,40,.35), transparent 70%);
  filter: blur(8px);
  z-index: 1;
}
.camp-mkt-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 900;
  color: #fff;
}
.camp-mkt-lead {
  margin: 0 auto 22px;
  max-width: 640px;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.5;
  color: rgba(255, 236, 214, 0.92);
}
.camp-mkt-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.camp-mkt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 0;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}
.camp-mkt-btn-light { background: #fff; color: #1a120c; }
.camp-mkt-btn-light:hover { filter: brightness(0.96); color: #1a120c; }
.camp-mkt-btn-dark {
  background: rgba(20, 12, 8, 0.55);
  color: #fff;
  border: 1px solid rgba(255, 170, 90, 0.35);
}
.camp-mkt-btn-dark:hover { background: rgba(40, 24, 14, 0.75); color: #fff; }
.camp-mkt-feat { padding: 28px clamp(16px, 4vw, 48px); }
.camp-mkt-feat-a { background: transparent; }
.camp-mkt-feat-b { background: rgba(255, 120, 40, 0.06); }
.camp-mkt-feat-card {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 28px;
  align-items: center;
  background: rgba(24, 16, 12, 0.55);
  border: 1px solid rgba(255, 150, 70, 0.18);
  border-radius: 28px;
  padding: clamp(18px, 3vw, 36px);
  backdrop-filter: blur(8px);
}
.camp-mkt-feat-card.reverse { direction: rtl; }
.camp-mkt-feat-card.reverse > * { direction: ltr; }
.camp-mkt-feat-viz {
  min-height: 220px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,140,50,.28), transparent 60%),
    linear-gradient(160deg, #3a2418, #1a120e);
}
.camp-mkt-feat-viz img {
  width: min(70%, 220px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.4));
}
.camp-mkt-feat-viz-warm {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,170,60,.35), transparent 55%),
    linear-gradient(160deg, #4a2a14, #1c100a);
}
.camp-mkt-feat-copy h2 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.1;
  text-transform: uppercase;
  font-weight: 900;
}
.camp-mkt-feat-copy p {
  margin: 0;
  color: rgba(255, 236, 214, 0.9);
  font-size: 16px;
  line-height: 1.55;
}
.camp-mkt-bottom {
  text-align: center;
  padding: 72px clamp(16px, 4vw, 48px) 56px;
}
.camp-mkt-bottom h2 {
  margin: 0 0 22px;
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  text-transform: uppercase;
  font-weight: 900;
  line-height: 1.1;
}
.camp-mkt-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 28px 16px 40px;
  color: rgba(255, 220, 190, 0.7);
  font-size: 13px;
}
.camp-mkt-foot a { color: #ffb36a; text-decoration: none; }
.camp-mkt-foot a:hover { text-decoration: underline; }
.auth-back-mkt { margin: 0 0 8px; }
.auth-back-mkt .ghost {
  border: 0;
  background: transparent;
  color: #c9b8a8;
  cursor: pointer;
  font-size: 13px;
}
.auth-back-mkt .ghost:hover { color: #fff; }
@media (max-width: 820px) {
  .camp-mkt-feat-card,
  .camp-mkt-feat-card.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
}
body.electron .camp-mkt,
body.camp-android .camp-mkt { display: none !important; }

/* Свёртка длинных сообщений */
.msg-collapse-wrap.is-collapsed { max-height: 232px; overflow: hidden; position: relative; }
.msg-collapse-wrap.is-collapsed::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
  background: linear-gradient(180deg, transparent, var(--bg-chat, var(--sf-chat2, #1a1a1d)));
  pointer-events: none;
}
.msg-collapse-btn {
  display: inline-block; margin-top: 2px; padding: 0; border: 0; background: transparent;
  color: var(--text-link); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.msg-collapse-btn:hover { text-decoration: underline; }

/* Гайд новичка: прожектор */
.camp-guide-ov{position:fixed;inset:0;z-index:12000;background:transparent;pointer-events:none;}
.camp-guide{pointer-events:auto;}
.camp-guide-mask{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;}
.camp-guide-hint{margin:-6px 0 12px;font-size:13px;color:var(--accent,#e9642e);}
.camp-guide .cg-retry{background:var(--bg-2,#2c2c31);color:var(--text,#ececf1);}
.camp-guide .cg-skipstep{background:transparent;color:var(--muted,#9a9aa3);}
.camp-guide-spot{position:fixed;border-radius:20px;box-shadow:0 0 0 200vmax rgba(8,8,10,.64);outline:2px solid var(--accent,#e9642e);outline-offset:2px;pointer-events:none;transition:left .28s ease,top .28s ease,width .28s ease,height .28s ease;animation:campGuidePulse 1.6s ease-in-out infinite;}
@keyframes campGuidePulse{0%,100%{outline-color:var(--accent,#e9642e)}50%{outline-color:rgba(233,100,46,.35)}}
.camp-guide{position:fixed;width:min(92vw,340px);background:var(--bg-float,#232327);border:1px solid var(--line,#3a3a40);border-radius:22px;padding:18px 20px 14px;box-shadow:0 18px 60px rgba(0,0,0,.5);transition:left .28s ease,top .28s ease;}
.camp-guide.center{left:50% !important;top:50% !important;transform:translate(-50%,-50%);width:min(92vw,470px);}
.camp-guide-step{font-size:12px;color:var(--muted,#9a9aa3);letter-spacing:.04em;margin-bottom:8px;}
.camp-guide h3{margin:0 0 10px;font-size:19px;}
.camp-guide p{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--text-soft,#cfcfd6);white-space:pre-line;}
.camp-guide-row{display:flex;gap:10px;align-items:center;}
.camp-guide-row .spacer{flex:1;}
.camp-guide button{border:0;border-radius:12px;padding:9px 16px;cursor:pointer;font-weight:600;font-size:13.5px;}
.camp-guide .cg-skip{background:transparent;color:var(--muted,#9a9aa3);}
.camp-guide .cg-back{background:var(--bg-2,#2c2c31);color:var(--text,#ececf1);}
.camp-guide .cg-next{background:var(--accent,#e9642e);color:#fff;}
.camp-guide-dots{display:flex;gap:6px;margin:0 0 14px;}
.camp-guide-dots i{width:7px;height:7px;border-radius:50%;background:var(--line,#3a3a40);}
.camp-guide-dots i.on{background:var(--accent,#e9642e);}

/* Групповые ЛС */
.dm-group-av { position: relative; width: 32px; height: 32px; display: inline-block; }
.dm-group-av .dm-group-part { position: absolute; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; }
.dm-group-av .dm-group-part img, .dm-group-av .dm-group-part .avatar { width: 100%; height: 100%; border-radius: 50%; }
.dm-group-av .dm-group-part.p0 { left: 0; top: 0; z-index: 2; box-shadow: 0 0 0 2px var(--bg, var(--sf-chat2, #1a1a1d)); }
.dm-group-av .dm-group-part.p1 { right: 0; bottom: 0; z-index: 1; box-shadow: 0 0 0 2px var(--bg, var(--sf-chat2, #1a1a1d)); }
.dm-group-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-2, #2c2c31); font-weight: 700; }
.group-pick-list { max-height: 46vh; overflow-y: auto; margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.group-pick-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; cursor: pointer; }
.group-pick-row:hover { background: var(--bg-2, #2c2c31); }
.group-pick-row input { accent-color: var(--accent, #e9642e); width: 16px; height: 16px; }
.group-pick-name { font-size: 14px; }

/* ---- Саундбар: сетка карточек (наш стиль, без дискордовской палитры) ---- */
.sb-panel-sounds {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  padding: 4px 2px 8px;
}
.sb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 92px;
  padding: 12px 8px 10px;
  border: 1px solid var(--line, #33333a);
  border-radius: 20px;
  background: var(--bg-2, #26262b);
  color: var(--text, #ececf1);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.sb-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent, #e9642e);
  background: var(--bg-3, #2e2e34);
}
.sb-card:active { transform: translateY(0); }
.sb-card-ico { font-size: 26px; line-height: 1; }
.sb-card-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-soft, #c9c9d2);
}
.sb-card-fav {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 13px;
  color: var(--muted, #8a8a93);
  opacity: 0;
  transition: opacity .12s ease;
}
.sb-card:hover .sb-card-fav, .sb-card.is-fav .sb-card-fav { opacity: 1; }
.sb-card.is-fav .sb-card-fav { color: var(--accent, #e9642e); }
/* играющая карточка: рамка бренда + живой эквалайзер */
.sb-card.playing {
  border-color: var(--accent, #e9642e);
  box-shadow: 0 0 0 1px var(--accent, #e9642e), 0 8px 22px rgba(233, 100, 46, .22);
}
.sb-card-eq {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  gap: 2px;
  align-items: flex-end;
  height: 10px;
}
.sb-card.playing .sb-card-eq { display: flex; }
.sb-card-eq i {
  width: 3px;
  height: 4px;
  border-radius: 6px;
  background: var(--accent, #e9642e);
  animation: sbEq .6s ease-in-out infinite;
}
.sb-card-eq i:nth-child(2) { animation-delay: .15s; }
.sb-card-eq i:nth-child(3) { animation-delay: .3s; }
@keyframes sbEq { 0%,100% { height: 4px; } 50% { height: 10px; } }
@media (max-width: 520px) {
  .sb-panel-sounds { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .sb-card { min-height: 82px; }
  .sb-card-ico { font-size: 22px; }
}

/* Иерархия ролей: замок и блокировка правок */
.role-pick.role-locked { opacity: .62; cursor: default; }
.role-pick.role-locked:hover { background: transparent; }
.role-lock { margin-left: auto; font-size: 12px; opacity: .8; }
.role-lock-banner {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 10px 12px;
  border: 1px solid var(--line, #3a3a40); border-left: 3px solid var(--accent, #e9642e);
  border-radius: 12px; background: var(--bg-2, #26262b);
  color: var(--text-soft, #c9c9d2); font-size: 13px; line-height: 1.45;
}
.is-locked { opacity: .55; cursor: not-allowed !important; }

/* Саундбар как Discord: секции стопкой, заголовок-подпись */
.sb-panel-section-head.static {
  cursor: default; padding: 10px 4px 6px; font-size: 11px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #8a8a93);
}
.sb-panel-add {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  margin: 2px 2px 6px; padding: 7px 12px; border: 1px dashed var(--line, #3a3a40);
  border-radius: 16px; background: transparent; color: var(--text-soft, #c9c9d2);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.sb-panel-add:hover { border-color: var(--accent, #e9642e); color: var(--accent, #e9642e); }

/* Загрузка звука в саундбар */
.sb-up-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sb-up-play {
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent, #e9642e); color: #fff; font-size: 16px;
}
.sb-up-file { min-width: 0; }
.sb-up-file b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-up-emoji { width: 84px; text-align: center; font-size: 18px; }
.danger-text { color: #e0737f; }

/* Саундбар в настройках сервера: сетка карточек */
.sbset-actions { display: flex; gap: 10px; align-items: center; margin: 10px 0 14px; }
.sbset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.sbset-card { position: relative; }
.sbset-del {
  position: absolute; top: 4px; right: 6px; width: 20px; height: 20px;
  display: grid; place-items: center; border-radius: 10px;
  color: var(--muted, #8a8a93); font-size: 12px; opacity: 0; transition: opacity .12s ease;
}
.sbset-card:hover .sbset-del { opacity: 1; }
.sbset-del:hover { background: rgba(224,115,127,.16); color: #e0737f; }

/* Глазик у пароля */
.pw-field { position: relative; display: block; }
.pw-field input { width: 100%; padding-right: 42px; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  color: var(--muted, #8a8a93); font-size: 15px; line-height: 1;
}
.pw-eye:hover { color: var(--text, #ececf1); background: rgba(255,255,255,.06); }
.pw-eye.on { color: var(--accent, #e9642e); }

/* Кнопки гайда не вылезают за карточку */
.camp-guide-row { flex-wrap: wrap; row-gap: 8px; }
.camp-guide-row .spacer { flex: 1 1 auto; min-width: 0; }
.camp-guide button { white-space: nowrap; }
.camp-guide .cg-next, .camp-guide .cg-retry { flex: 0 1 auto; }

/* Саундбар: компактные плитки как в Discord (значок слева, имя справа) */
.sb-panel-sounds { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important; }
.sb-card {
  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 9px 10px !important;
  border-radius: 16px !important;
  text-align: left;
}
.sb-card-ico { font-size: 16px !important; flex: none; }
.sb-card-name { flex: 1 1 auto; text-align: left; font-size: 12.5px; }
.sb-card-fav { position: static !important; margin-left: auto; opacity: 0; }
.sb-card-eq { position: static !important; transform: none !important; height: 12px; }
.sb-card.playing .sb-card-eq { display: flex; }

/* Эмодзи на Linux: в системе часто НЕТ шрифта эмодзи — все значки становятся
 * квадратиками. Возим свой Noto Color Emoji и ставим его запасным во всех
 * шрифтовых стеках (Windows/macOS используют системный и файл не качают). */
@font-face {
  font-family: "CAMP Emoji";
  src: url("fonts/NotoColorEmoji.ttf") format("truetype");
  font-display: swap;
  unicode-range: U+1F000-1FAFF, U+2190-21FF, U+2300-23FF, U+2460-24FF,
                 U+25A0-27BF, U+2B00-2BFF, U+FE0F, U+200D, U+E000-F8FF;
}
/* Флаги — отдельный шрифт ПЕРВЫМ в списке: системный Segoe рисует их
 * прямоугольниками с буквами («MQ» вместо флага), поэтому для диапазона
 * флаговых символов берём наш встроенный шрифт. */
@font-face {
  font-family: "CAMP Flags";
  src: url("fonts/NotoColorEmoji.ttf") format("truetype");
  font-display: swap;
  unicode-range: U+1F1E6-1F1FF;
}
:root { --font-emoji: "CAMP Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "CAMP Emoji"; }
body, button, input, textarea, select { font-family: inherit; }
body { font-family: var(--font-ui, ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif), var(--font-emoji); }
/* «inherit» в списке шрифтов недопустим — правило целиком не работало.
 * Пишем полный стек, иначе эмодзи в этих местах брались из системного шрифта. */
.sb-card-ico, .emoji, .msg-emoji, .rail-letters, .dm-group-ic, .camp-guide h3,
.sb-up-emoji, .vc-actions button, .ctx-menu, .chan, .home-dm-name, .msg-body,
.emoji-cell, .sb-card-name, .sb-rail-letters, .flag-ic {
  font-family: var(--font-ui, ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif), var(--font-emoji);
}

/* ================= Саундбар: раскладка один в один с Discord =================
 * панель шире, слева узкий рельс серверов, сверху длинный поиск + громкость,
 * дальше сворачиваемые секции и сетка из трёх крупных плиток в ряд. */
.sb-panel {
  width: min(820px, calc(100vw - 24px)) !important;
  max-height: min(620px, calc(100vh - 24px)) !important;
}
.sb-panel-top { gap: 10px; padding: 14px 14px 10px; }
.sb-panel-search {
  flex: 1 1 auto;
  height: 42px;
  border-radius: 12px;
  background: var(--bg-1, #1a1a1e);
  border: 1px solid var(--line, #33333a);
  padding: 0 12px;
}
.sb-panel-search input { font-size: 14.5px; }
.sb-panel-search-ico { order: 2; margin-left: auto; opacity: .7; }
.sb-panel-vol { width: 42px; height: 42px; border-radius: 12px; }
.sb-panel-body { gap: 0; }
.sb-panel-rail { width: 64px; padding: 8px 10px; gap: 8px; }
.sb-rail-btn { width: 44px; height: 44px; border-radius: 20px; }
.sb-panel-main { padding: 4px 16px 16px; }

/* заголовок секции: значок + НАЗВАНИЕ + шеврон */
.sb-sec { margin-top: 10px; }
.sb-sec-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 2px; border: 0; background: transparent; cursor: pointer;
  color: var(--muted, #8a8a93); font: inherit; font-size: 12px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.sb-sec-ico { font-size: 15px; }
.sb-sec-name { text-align: left; }
.sb-sec-chev { margin-left: 6px; font-style: normal; transition: transform .15s ease; }
.sb-sec:not(.open) .sb-sec-chev { transform: rotate(-90deg); }
.sb-sec:not(.open) .sb-panel-sounds { display: none !important; }

/* сетка: ровно три плитки в ряд, как у Discord */
.sb-panel-sounds {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 2px 0 6px !important;
}
.sb-card {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: var(--bg-2, var(--sf-base, #232428)) !important;
  transform: none !important;
}
.sb-card:hover { background: var(--bg-3, #2b2c31) !important; border-color: var(--line, #3a3a42) !important; }
.sb-card-ico { font-size: 22px !important; line-height: 1; }
.sb-card-name {
  flex: 0 1 auto; text-align: left; font-size: 15px; font-weight: 600;
  color: var(--text, #ececf1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-card-fav {
  position: absolute !important; top: 3px; right: 6px; margin: 0 !important;
  font-size: 12px; opacity: 0;
}
.sb-card:hover .sb-card-fav, .sb-card.is-fav .sb-card-fav { opacity: 1; }
.sb-card.playing {
  border-color: var(--accent, #e9642e) !important;
  box-shadow: none !important;
  background: var(--bg-3, #2b2c31) !important;
}
/* никаких вечных полосок: эквалайзер убран совсем */
.sb-card-eq { display: none !important; }
/* плитка «+ Добавить звук» */
.sb-add-card {
  background: transparent !important;
  border: 1px dashed var(--line, #3a3a42) !important;
  color: var(--text-soft, #c9c9d2) !important;
  font-size: 14px !important; font-weight: 600 !important;
  justify-content: center !important;
}
.sb-add-card:hover { border-color: var(--accent, #e9642e) !important; color: var(--accent, #e9642e) !important; }
@media (max-width: 640px) {
  .sb-panel-sounds { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Саундбар — панель имеет класс ctx-menu, из-за чего .ctx-menu button:hover
 * красил ЗАГОЛОВКИ секций и ПЛИТКИ в сплошной оранжевый. Гасим это здесь:
 * у саундбара свои hover-состояния. */
.sb-panel .sb-sec-head:hover { background: transparent !important; color: var(--text, #ececf1) !important; }
.sb-panel .sb-card:hover { color: var(--text, #ececf1) !important; }
.sb-panel .sb-card:hover .sb-card-name { color: var(--text, #ececf1) !important; }
.sb-panel .sb-add-card:hover { background: transparent !important; color: var(--accent, #e9642e) !important; }
.sb-panel .sb-rail-btn:hover { color: var(--text, #ececf1) !important; }

/* Имена звуков не обрезаем до «Гор»/«Бон»: даём перенос на 2 строки */
.sb-card { height: auto !important; min-height: 46px !important; padding: 7px 10px !important; }
.sb-card-name {
  white-space: normal !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.15; font-size: 14px;
}

/* ==========================================================================
 * САУНДБАР — финальное оформление. Тонкие линии, приглушённые поверхности,
 * воздух между блоками. Ничего толстого: рамок нет, фон плиток — лёгкая
 * подсветка белым, акцент только у играющего звука.
 * ========================================================================== */
.sb-panel {
  /* .ctx-menu зажимал панель max-width:420px — от этого всё было тесным,
   * а названия звуков резались. Снимаем ограничение именно тут. */
  width: min(760px, calc(100vw - 24px)) !important;
  max-width: min(760px, calc(100vw - 24px)) !important;
  min-width: 0 !important;
  padding: 0 !important;
  max-height: min(600px, calc(100vh - 24px)) !important;
  border-radius: 22px !important;
  background: #17171a !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55) !important;
  overflow: hidden !important;
}
/* верхняя строка: поиск во всю ширину + громкость */
.sb-panel .sb-panel-top {
  padding: 14px 16px 12px !important;
  gap: 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
}
.sb-panel .sb-panel-search {
  flex: 1 1 auto !important;
  height: 38px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid transparent !important;
  padding: 0 12px !important;
  transition: background .15s ease, border-color .15s ease;
}
.sb-panel .sb-panel-search:focus-within {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(233, 100, 46, .45) !important;
}
.sb-panel .sb-panel-search input {
  font-size: 14px !important;
  color: #e6e6ec !important;
  letter-spacing: .005em;
}
.sb-panel .sb-panel-search input::placeholder { color: #6f6f7a !important; }
.sb-panel .sb-panel-search-ico { order: 2 !important; margin-left: auto !important; opacity: .45 !important; }
.sb-panel .sb-panel-vol {
  width: 38px !important; height: 38px !important;
  border-radius: 16px !important; background: transparent !important;
  color: #8a8a93 !important;
}
.sb-panel .sb-panel-vol:hover { background: rgba(255, 255, 255, .06) !important; color: #e6e6ec !important; }

/* левый рельс серверов */
.sb-panel .sb-panel-rail {
  width: 60px !important; padding: 12px 10px !important; gap: 10px !important;
  background: rgba(0, 0, 0, .22) !important;
  border-right: 1px solid rgba(255, 255, 255, .05) !important;
}
.sb-panel .sb-rail-btn {
  width: 40px !important; height: 40px !important;
  border-radius: 22px !important; background: rgba(255, 255, 255, .05) !important;
  border: 0 !important; color: #b9b9c2 !important; transition: all .15s ease;
}
.sb-panel .sb-rail-btn:hover { background: rgba(255, 255, 255, .09) !important; border-radius: 20px !important; }
.sb-panel .sb-rail-btn.on {
  background: rgba(233, 100, 46, .16) !important;
  box-shadow: inset 0 0 0 1px rgba(233, 100, 46, .55) !important;
  border-radius: 20px !important; color: #ff8a4d !important;
}

/* тело и секции */
.sb-panel .sb-panel-main { padding: 6px 16px 16px !important; }
.sb-panel .sb-sec { margin: 0 !important; }
.sb-panel .sb-sec-head {
  padding: 16px 2px 9px !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .07em !important; color: #6f6f7a !important;
  gap: 7px !important; background: transparent !important;
}
.sb-panel .sb-sec-head:hover { color: #9a9aa4 !important; background: transparent !important; }
.sb-panel .sb-sec-ico { font-size: 12px !important; opacity: .8; }
.sb-panel .sb-sec-chev { font-size: 9px !important; opacity: .5 !important; margin-left: 4px !important; }

/* сетка плиток */
.sb-panel .sb-panel-sounds {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 0 !important;
}
.sb-panel .sb-card {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .045) !important;
  color: #d5d5dd !important;
  transition: background .13s ease, box-shadow .13s ease, transform .13s ease !important;
  transform: none !important;
}
.sb-panel .sb-card:hover {
  background: rgba(255, 255, 255, .085) !important;
  color: #f2f2f6 !important;
  transform: none !important;
}
.sb-panel .sb-card:active { background: rgba(255, 255, 255, .11) !important; }
.sb-panel .sb-card-ico { font-size: 18px !important; line-height: 1 !important; flex: none !important; }
.sb-panel .sb-card-name {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: .002em !important;
  color: inherit !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-height: 1.2 !important;
}
.sb-panel .sb-card.playing {
  background: rgba(233, 100, 46, .13) !important;
  box-shadow: inset 0 0 0 1px rgba(233, 100, 46, .6) !important;
  color: #ffb083 !important;
}
.sb-panel .sb-card-fav {
  position: absolute !important; top: 3px !important; right: 6px !important;
  font-size: 10px !important; color: #6f6f7a !important; opacity: 0 !important;
  transition: opacity .13s ease;
}
.sb-panel .sb-card:hover .sb-card-fav { opacity: .8 !important; }
.sb-panel .sb-card.is-fav .sb-card-fav { opacity: 1 !important; color: #ff8a4d !important; }
.sb-panel .sb-card-eq { display: none !important; }
.sb-panel .sb-add-card {
  background: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1) !important;
  color: #7e7e88 !important;
  font-size: 13px !important; font-weight: 500 !important;
}
.sb-panel .sb-add-card:hover {
  box-shadow: inset 0 0 0 1px rgba(233, 100, 46, .5) !important;
  color: #ff8a4d !important; background: rgba(233, 100, 46, .06) !important;
}
.sb-panel .sb-panel-empty { padding: 22px 4px !important; text-align: center !important; color: #6f6f7a !important; }
.sb-panel .sb-panel-nitro { border-radius: 16px !important; }
@media (max-width: 640px) {
  .sb-panel .sb-panel-sounds { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* та же эстетика на вкладке настроек сервера */
.sbset-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 8px !important; }
.sbset-card {
  height: 44px !important; min-height: 44px !important;
  border: 0 !important; border-radius: 16px !important;
  background: rgba(255, 255, 255, .045) !important;
  color: #d5d5dd !important;
}
.sbset-card:hover { background: rgba(255, 255, 255, .085) !important; }
.sbset-card.playing { background: rgba(233, 100, 46, .13) !important; box-shadow: inset 0 0 0 1px rgba(233, 100, 46, .6) !important; }

/* Саундбар — финальная подгонка под Discord: узкая высокая панель,
 * лупа слева, содержимое плитки прижато влево, рельс с круглыми аватарами. */
.sb-panel {
  width: min(520px, calc(100vw - 24px)) !important;
  max-width: min(520px, calc(100vw - 24px)) !important;
  max-height: min(560px, calc(100vh - 24px)) !important;
}
.sb-panel .sb-panel-search-ico { order: 0 !important; margin-left: 0 !important; margin-right: 8px !important; }
.sb-panel .sb-panel-search input { order: 1 !important; }
.sb-panel .sb-panel-sounds { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important; }
.sb-panel .sb-card {
  justify-content: flex-start !important;
  height: 40px !important; min-height: 40px !important;
  padding: 0 10px !important; gap: 8px !important;
  border-radius: 12px !important;
}
.sb-panel .sb-card-ico { font-size: 16px !important; }
.sb-panel .sb-card-name { font-size: 13px !important; text-align: left !important; }
.sb-panel .sb-panel-rail { width: 56px !important; padding: 10px 8px !important; gap: 8px !important; }
.sb-panel .sb-rail-btn { width: 40px !important; height: 40px !important; border-radius: 50% !important; font-size: 15px !important; }
.sb-panel .sb-rail-btn.on { border-radius: 22px !important; }
.sb-panel .sb-rail-ico { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sb-panel .sb-sec-head { padding: 14px 2px 8px !important; }

/* Плитка звука: покой -> значок и имя; наведение -> громкость, ▶, звезда
 * (ровно как на скриншотах Discord). */
.sb-panel .sb-card { position: relative !important; overflow: visible !important; }
.sb-panel .sb-card-vol,
.sb-panel .sb-card-play { display: none; }
.sb-panel .sb-card-vol {
  width: 18px; height: 18px; flex: none; color: #9a9aa4; opacity: .9;
}
.sb-panel .sb-card-vol svg { width: 16px; height: 16px; }
.sb-panel .sb-card-play { font-size: 11px; color: #ff8a4d; flex: none; }
.sb-panel .sb-card:hover .sb-card-vol { display: inline-flex; align-items: center; }
.sb-panel .sb-card:hover .sb-card-play { display: inline-block; }
.sb-panel .sb-card:hover .sb-card-ico { opacity: .85; }
/* подсказка с названием под плиткой */
.sb-panel .sb-card-tip {
  position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
  padding: 4px 9px; border-radius: 10px; background: #0f0f12; color: #e6e6ec;
  font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .12s ease; z-index: 5; box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.sb-panel .sb-card:hover .sb-card-tip { opacity: 1; }

/* Модалка загрузки звука — по образцу Discord: волна, поле файла, имя+эмодзи, громкость */
.sb-up-body { display: flex; flex-direction: column; gap: 6px; }
.sb-up-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a8a93; margin-top: 8px; }
.sb-up-label .req, .sb-up-grid .req { color: #e0737f; }
.sb-up-wave {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 88px; padding: 8px 10px; border-radius: 16px;
  background: rgba(255,255,255,.045); overflow: hidden;
}
.sb-up-play {
  width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-size: 12px;
}
.sb-up-play:hover { background: var(--accent, #e9642e); }
.sb-up-dur { position: absolute; left: 12px; bottom: 6px; font-size: 11px; color: #ff8a4d; }
.sb-up-canvas { flex: 1 1 auto; width: 100%; height: 72px; }
.sb-up-head { position: absolute; top: 8px; bottom: 8px; width: 2px; background: var(--accent, #e9642e); left: 0; transition: left .1s linear; }
.sb-up-file-row {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-radius: 12px; background: rgba(255,255,255,.045); font-size: 13.5px;
}
.sb-up-file-row b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-up-file-row .hint { margin-left: auto; white-space: nowrap; }
.sb-up-grid { display: grid; grid-template-columns: 1fr 160px; gap: 10px; }
.sb-up-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a8a93; }
.sb-up-grid .input { text-transform: none; font-weight: 400; letter-spacing: 0; }
.sb-up-vol { width: 100%; accent-color: var(--accent, #e9642e); }

/* ===== Саундбар: геометрия как на видео Discord — высокая панель, мелкие
 * плитки, тонкая прокрутка внутри, разделы не сжимаются. ===== */
.sb-panel {
  max-height: min(74vh, 760px) !important;
}
.sb-panel .sb-panel-body { min-height: 0 !important; flex: 1 1 auto !important; }
.sb-panel .sb-panel-main {
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
  padding: 4px 14px 14px !important;
}
.sb-panel .sb-panel-main::-webkit-scrollbar { width: 8px; }
.sb-panel .sb-panel-main::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16); border-radius: 12px; border: 2px solid transparent; background-clip: content-box;
}
.sb-panel .sb-panel-main::-webkit-scrollbar-track { background: transparent; }
.sb-panel .sb-panel-rail { overflow-y: auto; scrollbar-width: none; }
.sb-panel .sb-panel-rail::-webkit-scrollbar { display: none; }
.sb-panel .sb-card {
  height: 34px !important; min-height: 34px !important;
  padding: 0 9px !important; gap: 7px !important; border-radius: 12px !important;
}
.sb-panel .sb-card-ico { font-size: 15px !important; }
.sb-panel .sb-card-name { font-size: 12.5px !important; }
.sb-panel .sb-panel-sounds { gap: 6px !important; }
.sb-panel .sb-sec-head { padding: 12px 2px 6px !important; font-size: 10.5px !important; }

/* ===== Живые кнопки голосовой панели: видео, стрим, активности, звуки =====
 * У Discord они «отзываются» — иконка чуть подпрыгивает, фон мягко наливается. */
.vc-media-btn {
  transition: background .16s ease, color .16s ease, transform .12s ease;
  position: relative;
  overflow: hidden;
}
.vc-media-btn svg { transition: transform .18s cubic-bezier(.34, 1.56, .64, 1); }
.vc-media-btn:hover:not(:disabled) svg { transform: translateY(-1px) scale(1.12); }
.vc-media-btn:active:not(:disabled) { transform: scale(.94); }
.vc-media-btn:active:not(:disabled) svg { transform: scale(.96); }
/* камера — лёгкий наклон, как «включаю запись» */
.vc-media-btn[data-vc-cam]:hover:not(:disabled) svg { transform: rotate(-7deg) scale(1.12); }
/* демонстрация — иконка «выезжает» вверх */
.vc-media-btn[data-vc-stream]:hover:not(:disabled) svg { transform: translateY(-2px) scale(1.1); }
/* активности — покачивание */
.vc-media-btn[data-vc-act]:hover:not(:disabled) svg { animation: vcWiggle .5s ease; }
@keyframes vcWiggle {
  0%, 100% { transform: rotate(0) scale(1.1); }
  30% { transform: rotate(-9deg) scale(1.12); }
  65% { transform: rotate(7deg) scale(1.12); }
}
/* саундбар — нотка подпрыгивает */
.vc-media-btn[data-vc-sb]:hover:not(:disabled) svg { animation: vcNote .55s ease; }
@keyframes vcNote {
  0% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-3px) rotate(-10deg); }
  70% { transform: translateY(0) rotate(6deg); }
  100% { transform: translateY(0) rotate(0); }
}
/* включённое состояние: мягкая пульсация, чтобы было видно «идёт» */
.vc-media-btn.on { background: rgba(255, 255, 255, .07); }
.vc-media-btn.on.live { animation: vcLive 2.2s ease-in-out infinite; }
@keyframes vcLive {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(233, 100, 46, .35); }
  50% { box-shadow: inset 0 0 0 1px rgba(233, 100, 46, .75); }
}

/* Подсказка над кнопкой — как в Discord */
.camp-tip {
  position: fixed; z-index: 40000; pointer-events: none;
  padding: 6px 10px; border-radius: 12px;
  background: #0b0b0e; color: #e8e8ee;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
  animation: campTipIn .12s ease-out;
}
@keyframes campTipIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* Плитка звука: при наведении значок ЗАМЕНЯЕТСЯ на ▶ (как на фото Discord),
 * а регулятор громкости и звезда лежат по краям и НЕ двигают подпись. */
.sb-panel .sb-card { justify-content: center !important; padding: 0 26px !important; }
.sb-panel .sb-card-ico,
.sb-panel .sb-card-play {
  width: 18px; text-align: center; flex: none;
}
.sb-panel .sb-card-play { display: none; font-size: 12px; color: #ff8a4d; }
.sb-panel .sb-card:hover .sb-card-ico { display: none !important; }
.sb-panel .sb-card:hover .sb-card-play { display: inline-block !important; }
.sb-panel .sb-card-vol {
  position: absolute !important; left: 7px; top: 50%; transform: translateY(-50%);
  display: none; width: 16px; height: 16px; color: #9a9aa4;
}
.sb-panel .sb-card:hover .sb-card-vol { display: inline-flex !important; align-items: center; }
.sb-panel .sb-card-fav { right: 7px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 11px !important; }

/* Микрофон, наушники и шестерёнка — та же живая отдача, что у кнопок панели */
.userpanel [data-m],
.userpanel [data-d],
.userpanel .up-settings {
  transition: background .16s ease, color .16s ease, transform .12s ease;
}
.userpanel [data-m] svg,
.userpanel [data-d] svg,
.userpanel .up-settings svg { transition: transform .18s cubic-bezier(.34, 1.56, .64, 1); }
.userpanel [data-m]:hover svg { transform: translateY(-1px) scale(1.12); }
.userpanel [data-d]:hover svg { transform: translateY(-1px) scale(1.12); }
.userpanel .up-settings:hover svg { animation: upGear 1.1s linear; }
@keyframes upGear { from { transform: rotate(0); } to { transform: rotate(180deg); } }
.userpanel [data-m]:active,
.userpanel [data-d]:active,
.userpanel .up-settings:active { transform: scale(.92); }

/* Предпросмотр в окне загрузки: бегунок и волна не должны ловить клики —
 * из-за этого кнопка воспроизведения не срабатывала. */
.sb-up-head, .sb-up-canvas { pointer-events: none !important; }
.sb-up-play { position: relative; z-index: 2; }
/* Громкость панели: только ползунок, ничего лишнего */
.sb-vol-menu.sb-vol-only { min-width: 220px; }
.sb-vol-menu.sb-vol-only button { display: none; }

/* Значок слева от названия — ПРОСЛУШАТЬ ТОЛЬКО СЕБЕ. Подсвечивается при
 * наведении именно на него, чтобы было понятно, что это отдельная кнопка. */
.sb-panel .sb-card-prev {
  position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  display: none; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 10px;
  color: #9a9aa4; cursor: pointer;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.sb-panel .sb-card-prev svg { width: 15px; height: 15px; }
.sb-panel .sb-card:hover .sb-card-prev { display: inline-flex; }
.sb-panel .sb-card-prev:hover {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  transform: translateY(-50%) scale(1.12);
}
.sb-panel .sb-card.previewing .sb-card-prev { color: #ff8a4d; background: rgba(233, 100, 46, .18); }
/* Звезда тоже подсвечивается отдельно */
.sb-panel .sb-card-fav {
  width: 20px; height: 20px; display: inline-flex !important;
  align-items: center; justify-content: center; border-radius: 10px;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.sb-panel .sb-card-fav:hover { background: rgba(255, 255, 255, .16); color: #ffd166 !important; transform: translateY(-50%) scale(1.12); }

/* Наведение на плитку — как на фото Discord: содержимое гаснет, а поверх
 * ПО ЦЕНТРУ появляется крупный белый треугольник воспроизведения. */
.sb-panel .sb-card:hover .sb-card-ico {
  display: inline-block !important;
  opacity: .28 !important;
}
.sb-panel .sb-card:hover .sb-card-name { opacity: .28 !important; }
.sb-panel .sb-card-play {
  position: absolute !important;
  left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: none !important;
  width: 22px !important; height: 22px !important;
  color: #fff !important;
  pointer-events: none;
  z-index: 3;
}
.sb-panel .sb-card-play svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.sb-panel .sb-card:hover .sb-card-play { display: block !important; }
/* прослушка и звезда остаются яркими поверх приглушённого содержимого */
.sb-panel .sb-card-prev, .sb-panel .sb-card-fav { z-index: 4; opacity: 1 !important; }

/* Окно громкости звуковой панели: строго ПОВЕРХ самой панели (у неё z-index
 * 25000 — раньше окошко пряталось под ней) и в едином стиле. */
.sb-vol-menu {
  z-index: 30500 !important;
  border-radius: 20px !important;
  background: #17171a !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.6) !important;
  padding: 14px !important;
}
.sb-vol-menu label span { font-size: 12px; color: #8a8a93; letter-spacing: .02em; }
.sb-vol-menu label b { color: #e6e6ec; }
.sb-vol-menu input[type="range"] { accent-color: var(--accent, #e9642e); margin-top: 10px; }

/* Иконка игры кликабельна: подсветка, чтобы было видно, что это кнопка */
.mem-act-ico[data-act-open], .up-act-block-ico[data-act-open] {
  cursor: pointer;
  border-radius: 12px;
  transition: transform .13s ease, box-shadow .13s ease, filter .13s ease;
}
.mem-act-ico[data-act-open]:hover, .up-act-block-ico[data-act-open]:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px rgba(233, 100, 46, .55);
  filter: brightness(1.08);
}

/* Демонстрация экрана: при наведении стрелка «отправляет» — уезжает вверх-вправо
 * и возвращается, как в Discord. Сам монитор неподвижен. */
.vc-media-btn[data-vc-stream]:hover:not(:disabled) svg { transform: none !important; }
.vc-media-btn[data-vc-stream] svg { overflow: hidden; }
.vc-media-btn[data-vc-stream] .sc-arrow {
  transform-origin: 11px 10px;
  transition: transform .18s ease;
}
.vc-media-btn[data-vc-stream]:hover:not(:disabled) .sc-arrow { animation: scShare .9s ease-in-out infinite; }
/* Стрелка ЖИВЁТ ВНУТРИ монитора: прежняя анимация уводила её на 2.2px вверх
 * с поворотом, кончики вылезали за рамку экрана и торчали «рожками» над
 * кнопкой (владелец: «что за рожки у демки»). Двигаем чуть-чуть и только
 * вправо-вниз, внутрь корпуса; вылет за viewBox невозможен. */
@keyframes scShare {
  0%   { transform: translate(0, 0); opacity: 1; }
  45%  { transform: translate(1.1px, 0.6px); opacity: .55; }
  55%  { transform: translate(-0.6px, 0); opacity: .4; }
  100% { transform: translate(0, 0); opacity: 1; }
}
/* идёт трансляция — стрелка мягко пульсирует и без наведения */
.vc-media-btn[data-vc-stream].on .sc-arrow { animation: scShare 1.8s ease-in-out infinite; }

/* ===== Голосовое сообщение: настоящая волна, заливка ТОЛЬКО по столбикам ===== */
.msg-voice-wave { position: relative; height: 26px; overflow: visible !important; }
.msg-voice-wave::after { content: none !important; } /* убрали прямоугольную заливку */
.msg-voice-wave .mvw {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 2px;
}
.msg-voice-wave .mvw i {
  flex: 1; min-width: 2px;
  border-radius: 999px;            /* скруглённые столбики, а не квадраты */
  background: #6f7178;
  height: 30%;
  transition: height .18s ease;
}
/* верхний слой — «проигранная» часть, подрезается по прогрессу */
.msg-voice-wave .mvw.fill {
  clip-path: inset(0 calc(100% - var(--voice-p, 0) * 100%) 0 0);
}
.msg-voice-wave .mvw.fill i { background: var(--accent, #e9642e); }
.msg-voice-wave:hover .mvw.base i { background: #82858d; }

/* ===== Тег роли: не выше строки ника ===== */
.vu-nick-row .role-tag, .vu-nick-row .clan-tag, .up-name-row .role-tag,
.nick-tag, .msg-role-tag {
  height: 16px !important;
  line-height: 16px !important;
  padding: 0 6px !important;
  font-size: 10.5px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle;
}
.nick-tag img, .role-tag img, .clan-tag img { height: 11px !important; width: auto !important; }

/* Тег клана рядом с ником — ровно по высоте строки ника, и всплывающее окно
 * тега такое же компактное (раньше тег торчал выше и ниже ника). */
.utag.clan-tag {
  height: 17px !important;
  min-height: 0 !important;
  line-height: 17px !important;
  padding: 0 6px 0 4px !important;
  font-size: 10.5px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  vertical-align: middle !important;
}
.utag.clan-tag .clan-tag-ico { height: 12px !important; width: auto !important; }
.utag.clan-tag span { line-height: 1 !important; }
/* карточка тега при наведении — тоже компактнее */
.clan-card-pills .clan-card-pill { height: 20px !important; line-height: 20px !important; font-size: 11px !important; padding: 0 8px !important; }
.clan-card-pills .ds-clan-ico-img { height: 13px !important; width: auto !important; }

/* Заливка волны — плавная, без рывков (двигаем каждый кадр + лёгкое сглаживание) */
.msg-voice-wave .mvw.fill { transition: clip-path .06s linear; }

/* Карточка сообщества: тег рядом с названием не должен наезжать на кнопку */
.clan-card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clan-card-title .utag.clan-tag { flex: none; margin: 0 !important; }
.clan-card-pills { margin: 10px 0 12px !important; }
.clan-card-pills .clan-card-pill {
  height: 22px !important; line-height: 22px !important;
  font-size: 11.5px !important; padding: 0 9px !important;
  border-radius: 10px !important; display: inline-flex !important; align-items: center !important;
}
.clan-card-pills .ds-clan-face { display: inline-flex !important; align-items: center !important; gap: 5px !important; }
.clan-card-pills .ds-clan-ico-img { height: 14px !important; width: auto !important; }
.clan-card-use { margin-top: 4px !important; position: relative; z-index: 1; }

/* Заливка волны: без ступенек — сглаживаем переход между кадрами */
.msg-voice-wave .mvw.fill { transition: clip-path .12s linear !important; will-change: clip-path; }
/* Пока играет — лёгкое «дыхание» столбиков, как на записи */
.msg-voice-play.on ~ .msg-voice-wave .mvw i { animation: mvwBreath 1.4s ease-in-out infinite; }
.msg-voice-play.on ~ .msg-voice-wave .mvw i:nth-child(2n) { animation-delay: .18s; }
.msg-voice-play.on ~ .msg-voice-wave .mvw i:nth-child(3n) { animation-delay: .36s; }
@keyframes mvwBreath { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.12); } }

/* Подпись вложения в окне удаления */
.del-msg-body .del-att {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; margin: 2px 4px 2px 0;
  border-radius: 12px; background: rgba(255,255,255,.06);
  font-size: 13px; color: var(--text-soft, #c9c9d2);
}

/* Карточка сообщества: тег рядом с названием — чуть крупнее (второй,
 * дублирующий тег над кнопкой убран из разметки). */
.clan-card-title .utag.clan-tag {
  height: 21px !important;
  line-height: 21px !important;
  font-size: 12px !important;
  padding: 0 8px 0 6px !important;
  border-radius: 10px !important;
  gap: 5px !important;
}
.clan-card-title .utag.clan-tag .clan-tag-ico { height: 15px !important; }
.clan-card-use { margin-top: 12px !important; }

/* Значок воспроизведения на превью — своя фигура, одинаковая на всех системах.
 * Раньше это был системный эмодзи: Windows рисовал его синим квадратом. */
.gs-play svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.65)); }
.gs-play { font-size: 0 !important; }
.sb-up-play svg { width: 12px; height: 12px; }
.sb-up-play { display: grid; place-items: center; }

/* Тег сообщества — сразу за названием, а не у правого края.
 * Причина была в том, что название растягивалось на всю строку (flex:1)
 * и отжимало тег вправо. */
.clan-card-title { justify-content: flex-start !important; flex-wrap: nowrap !important; }
.clan-card-title b { flex: 0 1 auto !important; }
.clan-card-title .utag.clan-tag { margin-right: auto !important; }

/* Строка ответа — кликабельная, ведёт к исходному сообщению */
.reply-ref.is-link { cursor: pointer; border-radius: 10px; padding: 1px 4px; margin-left: -4px; transition: background .12s ease; }
.reply-ref.is-link:hover { background: rgba(255,255,255,.06); }
.reply-ref.is-link:hover b { text-decoration: underline; }
/* Подсветка найденного сообщения — мягкая вспышка, как в Discord */
.msg-jump, .pin-flash {
  animation: msgJumpFlash 2.2s ease-out;
  border-radius: 10px;
}
@keyframes msgJumpFlash {
  0%   { background: rgba(233, 100, 46, .26); box-shadow: inset 3px 0 0 var(--accent, #e9642e); }
  70%  { background: rgba(233, 100, 46, .16); box-shadow: inset 3px 0 0 var(--accent, #e9642e); }
  100% { background: transparent; box-shadow: none; }
}

/* Аватарки сообществ в рельсе саундбара — чётче: рисуем с запасом по плотности
 * и без «мыла» при уменьшении. */
.sb-panel .sb-rail-ico {
  width: 40px; height: 40px; object-fit: cover; border-radius: 50%;
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Выбор отрезка звука на волне: затемняем лишнее, тянем рамки */
.sb-trim { position: absolute; inset: 8px 10px; pointer-events: none; }
.sb-trim-shade {
  position: absolute; top: 0; bottom: 0;
  background: rgba(10, 10, 12, .66);
  border-radius: 10px;
}
.sb-trim-shade.left { left: 0; width: 0; }
.sb-trim-shade.right { right: 0; width: 0; }
.sb-trim-handle {
  position: absolute; top: -4px; bottom: -4px; width: 12px;
  margin-left: -6px; pointer-events: auto; cursor: ew-resize;
  display: flex; align-items: center; justify-content: center;
}
.sb-trim-handle::before {
  content: ""; width: 3px; height: 100%;
  background: var(--accent, #e9642e); border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5);
}
.sb-trim-handle::after {
  content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent, #e9642e); box-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.sb-trim-handle:hover::after { transform: scale(1.15); }
.sb-trim-hint { margin: 6px 0 2px !important; font-size: 12px; }
.sb-trim-hint b { color: var(--accent, #e9642e); }

/* Рельс саундбара: содержимое кнопки строго по центру.
 * Аватарки уезжали вправо (картинка шире кнопки), а буквы — влево
 * (лишние отступы у span). */
.sb-panel .sb-rail-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative;
}
.sb-panel .sb-rail-btn > * { margin: 0 !important; }
.sb-panel .sb-rail-ico {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important; border-radius: inherit !important;
}
.sb-panel .sb-rail-letters,
.sb-panel .sb-rail-note {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important; height: 100% !important;
  line-height: 1 !important; text-align: center !important;
  letter-spacing: 0 !important;
}

/* Пока длинная песня разбирается — видно, что идёт работа, а не «висит» */
.sb-up-wave.is-loading { position: relative; }
.sb-up-wave.is-loading::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent, var(--brand, #5865f2), transparent);
  animation: sbUpScan 1.1s linear infinite;
}
@keyframes sbUpScan { 0% { transform: translateX(-40%); } 100% { transform: translateX(40%); } }
.sb-trim-hint b { font-variant-numeric: tabular-nums; }

/* Громкость в плеере: панелька примыкает к динамику — щели, из-за которой
 * ползунок «убегал», больше нет. Пока тянешь — держим открытой. */
.camp-vplayer-vol { padding: 0 2px; }
.camp-vplayer-vol-pop {
  bottom: 100%;
  padding: 0 0 14px; /* нижние 14px — невидимый мостик до кнопки динамика */
  height: 110px;
  background: transparent;
  box-shadow: none;
}
.camp-vplayer-vol-pop::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 28px;
  height: calc(100% - 14px);
  border-radius: 12px;
  background: rgba(17,18,20,.96);
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  z-index: -1;
}
.camp-vplayer-vol.is-open .camp-vplayer-vol-pop { display: flex; }
.camp-vplayer-vol-range { position: relative; z-index: 1; }

/* Саундбар: значки и карточки только нажимаются — ни перетащить, ни выделить. */
.sb-panel,
.sb-panel * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.sb-panel img,
.sb-panel .sb-rail-ico,
.sb-panel .sb-card-ico {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
.sb-panel input,
.sb-panel input * {
  -webkit-user-select: text;
  user-select: text;
}

/* Громкость в плеере: по самому ползунку видно уровень.
 * Раньше дорожка была одинаково белой и «в самом низу» = «мут» не читалось. */
.camp-vplayer-vol-range {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  --vp-fill: 100%;
}
.camp-vplayer-vol-range::-webkit-slider-runnable-track {
  width: 4px;
  border-radius: 6px;
  background: linear-gradient(
    to top,
    #fff 0 var(--vp-fill),
    rgba(255, 255, 255, .22) var(--vp-fill) 100%
  );
}
.camp-vplayer-vol-range::-moz-range-track {
  width: 4px;
  border-radius: 6px;
  background: linear-gradient(
    to top,
    #fff 0 var(--vp-fill),
    rgba(255, 255, 255, .22) var(--vp-fill) 100%
  );
}
.camp-vplayer-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-left: -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
  transition: background .12s ease, transform .12s ease;
}
.camp-vplayer-vol-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.camp-vplayer-vol-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
/* Ноль = звук выключен: дорожка пустая, точка красная */
.camp-vplayer-vol-range.is-muted::-webkit-slider-thumb { background: var(--red, #f23f43); }
.camp-vplayer-vol-range.is-muted::-moz-range-thumb { background: var(--red, #f23f43); }

/* ===== Окно «Добавить звук»: аккуратная сетка, ничего не вылезает =====
 * Раньше холст волны имел жёсткие 620px и распирал модалку — правый край
 * контента уезжал за панель. */
.sb-up-modal { width: min(540px, 94vw); }
.sb-up-modal .modal-body { overflow-x: hidden; }
.sb-up-body { gap: 2px; }
.sb-up-body > * { min-width: 0; max-width: 100%; }
.sb-up-label { margin-top: 12px; }
.sb-up-label:first-child { margin-top: 0; }

.sb-up-wave {
  display: block;
  height: 96px;
  padding: 0;
  gap: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .045);
  overflow: hidden;
  touch-action: none;
}
.sb-up-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  display: block;
}
.sb-up-head {
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, .85);
  opacity: .8;
}

/* Выделение: рамка с двумя ручками, тянется целиком */
.sb-trim { inset: 0; }
.sb-trim-shade {
  background: rgba(8, 8, 10, .58);
  border-radius: 0;
  backdrop-filter: saturate(.5);
}
.sb-trim-sel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  pointer-events: auto;
  cursor: grab;
  border: 1.5px solid var(--accent, #e9642e);
  border-radius: 14px;
  background: rgba(233, 100, 46, .10);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.sb-trim-sel.is-drag { cursor: grabbing; background: rgba(233, 100, 46, .16); }
.sb-trim-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  pointer-events: auto;
}
.sb-trim-handle.start { left: -9px; }
.sb-trim-handle.end { right: -9px; left: auto; }
.sb-trim-handle::before {
  content: "";
  width: 6px;
  height: 38px;
  border-radius: 6px;
  background: var(--accent, #e9642e);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}
.sb-trim-handle::after { content: none; }
.sb-trim-handle:hover::before { filter: brightness(1.12); }

/* Строка под волной: проиграть · длина отрывка · длина трека */
.sb-up-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.sb-up-play {
  position: static;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
}
.sb-up-len {
  color: var(--accent, #e9642e);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sb-up-dur {
  position: static;
  margin-left: auto;
  color: var(--muted, #949ba4);
  font-size: 12px;
  white-space: nowrap;
}
.sb-trim-hint {
  margin: 6px 0 0 !important;
  color: var(--muted, #949ba4);
  font-size: 12px;
  line-height: 1.45;
}

/* Поля «название» и «значок» — подпись одной строкой, поля не распирают окно */
.sb-up-grid { grid-template-columns: minmax(0, 1fr) 88px; align-items: end; }
.sb-up-grid label { min-width: 0; }
.sb-up-grid .input { min-width: 0; width: 100%; }
.sb-up-cap { display: block; }
.sb-up-emoji { width: 100%; }
.sb-up-vol { max-width: 100%; }
.sb-up-file-row { min-width: 0; }

/* Настоящая причина «уехавшего вправо» окна: колонка модалки — 1fr, а её
 * минимум считается по содержимому. Длинное имя файла в одну строку
 * растягивало колонку до 700px, и всё правее панели обрезалось. */
.modal.narrow { grid-template-columns: minmax(0, 1fr); }
.sb-up-file-row > * { min-width: 0; }
.sb-up-file-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-up-body .input { max-width: 100%; }

/* Бегунок проигрывания — только пока слушаем, иначе он торчал полоской слева */
.sb-up-head { opacity: 0; transition: opacity .15s ease, left .1s linear; }
.sb-up-wave.is-playing .sb-up-head { opacity: .85; }
/* Короткий отрывок на длинном треке: ручки не должны налезать друг на друга */
.sb-trim-sel { min-width: 26px; }

/* ===== Настройки папки: фото, палитра, список сообществ ===== */
.folder-modal { width: min(520px, 94vw); }
.folder-body > * { min-width: 0; }
.folder-sec-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8a8a93;
  margin: 16px 0 8px;
}
.folder-srv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.folder-srv-head b { font-size: 12px; font-weight: 700; color: var(--muted, #949ba4); text-transform: none; letter-spacing: 0; }
.folder-srv-head b.warn { color: var(--red, #f23f43); }

/* Лицо папки + название рядом */
.folder-face-row { display: flex; gap: 14px; align-items: flex-start; margin-top: 12px; }
.folder-face-prev {
  width: 76px; height: 76px; flex: none;
  border-radius: 26px;
  background: var(--sf-base, #232428);
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--folder-color, var(--tx-btn, #4e5058));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.folder-face-prev svg { width: 34px; height: 34px; }
.folder-face-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.folder-face-side { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.folder-name-lab { margin: 0; }
.folder-name-lab input { width: 100%; }
.folder-face-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.folder-face-btns button { padding: 7px 12px; border-radius: 12px; font-size: 13px; }
.folder-photo-hint { margin: 0 !important; font-size: 11.5px; }

/* Палитра: кружки крупнее + свой цвет системной пипеткой */
.folder-color-row { gap: 10px; margin: 0 0 4px; align-items: center; }
.folder-color-dot { width: 26px; height: 26px; cursor: pointer; transition: transform .12s ease; }
.folder-color-dot:hover { transform: scale(1.12); }
.folder-color-dot.on { border-color: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.12); }
.folder-color-custom {
  position: relative;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  background: conic-gradient(#f23f43, #e67e22, #fee75c, #23a559, #3498db, #9b59b6, #eb459e, #f23f43);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}
.folder-color-custom input[type="color"] {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; padding: 0; border: 0;
}
.folder-color-plus {
  font-size: 15px; font-weight: 800; color: #fff; line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none;
}

/* Список сообществ: строки-карточки с галочкой справа */
.folder-srv-list { gap: 4px; max-height: 260px; padding-right: 2px; }
.folder-srv-row {
  position: relative;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 16px;
  font-size: 14px;
  background: transparent;
  transition: background .12s ease;
}
.folder-srv-row:hover { background: rgba(255,255,255,.045); }
.folder-srv-row.on { background: rgba(255,255,255,.07); }
.folder-srv-ico { width: 30px; height: 30px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--sf-base, #232428); }
.folder-srv-ico .rail-icon,
.folder-srv-ico img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.folder-srv-ico .rail-letters { font-size: 12px; font-weight: 800; }
.folder-srv-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-srv-row input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.folder-srv-check {
  width: 20px; height: 20px; flex: none; border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22);
  transition: background .12s ease, box-shadow .12s ease;
}
.folder-srv-row.on .folder-srv-check {
  background: var(--accent, #e9642e);
  box-shadow: inset 0 0 0 2px var(--accent, #e9642e);
}
.folder-srv-row.on .folder-srv-check::after {
  content: "";
  display: block;
  width: 5px; height: 10px;
  margin: 3px auto 0;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Фото папки в самом рельсе */
.rail-folder-photo { display: block; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; }
.rail-folder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Круглая маска в окне кадрирования (аватарка) */
.banner-crop-modal.is-round .banner-crop-viewport { border-radius: 20px; }
.crop-round-mask {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.55) inset;
  border-radius: 50%;
}

/* .modal-body label — это grid + CAPS для полей настроек; строкам списка
 * сообществ это ломало вид, возвращаем обычную строку. */
.folder-body .folder-srv-row {
  display: flex;
  grid-template-columns: none;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.folder-body .folder-srv-name {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 14px;
  color: var(--text, #dbdee1);
}
.folder-body .folder-color-custom {
  display: grid;
  grid-template-columns: none;
  gap: 0;
}

/* ===== Окно «Добавить звук»: мелочи, которые бросались в глаза ===== */
/* Треугольник в круглой кнопке зрительно смещён вправо — сдвигаем на пиксель */
.sb-up-play svg { margin-left: 1.5px; }
.sb-up-play { display: grid; place-items: center; }

/* Кнопки внизу: «Отмена» слева, «Загрузить» в правом углу, с воздухом */
.sb-up-modal .modal-panel footer,
.sb-up-modal footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 18px;
}
.sb-up-modal footer .btn-brand { margin-left: auto; }

/* Значок звука — кнопка с выбранным смайликом */
.sb-up-emoji {
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  padding: 0;
  height: 38px;
}
.sb-up-emoji:hover { background: rgba(255, 255, 255, .07); }

/* ===== Плитка звука: смайлик вплотную к названию, длинное имя — многоточием ===== */
.sb-panel .sb-card { gap: 5px !important; }
.sb-panel .sb-card-ico { width: auto !important; margin-right: 0 !important; }
.sb-panel .sb-card-name {
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Громкость в плеере: панелька примыкает к динамику вплотную ===== */
.camp-vplayer-vol-pop { padding: 0 0 4px; height: 100px; }
.camp-vplayer-vol-pop::before { height: calc(100% - 4px); }

/* ===== Закрытые звуки (чужое сообщество без Адреналина) ===== */
.sb-panel .sb-card.is-locked { opacity: .55; }
.sb-panel .sb-card.is-locked:hover { opacity: .8; border-color: var(--accent, #e9642e); }
.sb-panel .sb-card.is-locked .sb-card-play { display: none !important; }
.sb-panel .sb-card-lock {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 13px;
  height: 13px;
  color: var(--accent, #e9642e);
  z-index: 5;
  pointer-events: none;
}
.sb-panel .sb-card-lock svg { width: 100%; height: 100%; display: block; }

/* ===== Окно «звук по Адреналину» ===== */
.sb-adr-bd { z-index: 30800; }
.sb-adr-modal {
  position: relative;
  width: min(420px, 94vw);
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg-mod, var(--sf-base, #232428));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .6);
  text-align: center;
}
.sb-adr-hero {
  height: 200px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(233, 100, 46, .55) 0%, rgba(233, 100, 46, .12) 55%, transparent 100%),
    linear-gradient(180deg, #2a1a12 0%, #201a17 100%);
}
.sb-adr-hero img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .5));
}
.sb-adr-body { padding: 20px 24px 22px; }
.sb-adr-body h2 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
}
.sb-adr-body p {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted, #949ba4);
}
.sb-adr-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sb-adr-actions button { padding: 10px 16px; border-radius: 16px; font-size: 13.5px; font-weight: 700; }
.sb-adr-x {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 0;
  color: #fff;
  background: rgba(0, 0, 0, .35);
}
.sb-adr-x:hover { background: rgba(0, 0, 0, .55); }

/* Кружок «в голосовом» на папке резался: у кнопки папки overflow:hidden, а
 * значок специально висит на 2px за краем. Обрезку переносим на само лицо. */
.rail-btn.rail-folder-btn { overflow: visible; }
.rail-folder-grid,
.rail-folder-photo,
.rail-folder-btn > svg {
  border-radius: inherit;
  overflow: hidden;
}
.rail-folder-btn .rail-act-badge,
.rail-folder-btn .rail-badge { z-index: 4; }

/* Кнопки предложения — в один ряд, длинная подпись ужимается */
.sb-adr-actions { flex-wrap: nowrap; }
.sb-adr-actions button { min-width: 0; white-space: nowrap; }
.sb-adr-hero img { width: 158px; height: 158px; }

/* Кнопка значка должна выглядеть как поле, а не как оранжевая кнопка */
.sb-up-body button.sb-up-emoji {
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line, #33333a);
  color: var(--text, #dbdee1);
  box-shadow: none;
  font-weight: 400;
}
.sb-up-body button.sb-up-emoji:hover {
  background: rgba(255, 255, 255, .08);
  border-color: var(--accent, #e9642e);
}

/* ===== Своя палитра (нативный выбор цвета в оболочке не открывается) ===== */
.camp-colorpop {
  position: fixed;
  z-index: 31000;
  width: 232px;
  padding: 10px;
  border-radius: 20px;
  background: var(--bg-floating, var(--sf-panel, #2b2d31));
  border: 1px solid var(--line, var(--ln-deep, #1e1f22));
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
  display: flex;
  flex-direction: column;
  gap: 10px;
  user-select: none;
}
.ccp-sv {
  position: relative;
  height: 132px;
  border-radius: 12px;
  cursor: crosshair;
  touch-action: none;
}
.ccp-hue {
  position: relative;
  height: 14px;
  border-radius: 12px;
  cursor: pointer;
  touch-action: none;
  background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.ccp-hue { height: 132px; width: 14px; position: absolute; right: 10px; top: 10px; }
.ccp-sv { margin-right: 22px; }
.ccp-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  pointer-events: none;
}
.ccp-hue .ccp-dot { left: 50%; width: 16px; height: 6px; border-radius: 6px; margin: -3px 0 0 -8px; }
.ccp-row { display: flex; align-items: center; gap: 8px; }
.ccp-prev { width: 26px; height: 26px; flex: none; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.ccp-hex { flex: 1 1 auto; min-width: 0; height: 30px; font-size: 13px; text-transform: uppercase; }
.ccp-ok { padding: 6px 12px; border-radius: 12px; font-size: 13px; }

/* Кружок «свой цвет» */
.folder-color-custom {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  padding: 0;
  border: 2px solid transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  background:
    radial-gradient(circle at 50% 50%, var(--dot, transparent) 0 45%, transparent 46%),
    conic-gradient(#f23f43, #e67e22, #fee75c, #23a559, #3498db, #9b59b6, #eb459e, #f23f43);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
}
.folder-color-custom.on { border-color: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.12); }
.folder-color-custom:hover { transform: scale(1.12); }

/* Строка сообщества — теперь кнопка, а не label с чекбоксом */
.folder-body button.folder-srv-row {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--text, #dbdee1);
  font: inherit;
  cursor: pointer;
}
.folder-body button.folder-srv-row:hover { background: rgba(255, 255, 255, .045); }
.folder-body button.folder-srv-row.on { background: rgba(255, 255, 255, .07); }

/* Мостик под щелью между пунктом и его подменю — курсор больше не «выпадает» */
.ctx-menu .ctx-sub::before {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: -8px;
  bottom: -8px;
  z-index: -1;
}

/* ===== «О голосовом звонке»: график задержки и отладка ===== */
.vc-status [data-vc-link-text] { cursor: pointer; }
.vc-status [data-vc-link-text]:hover { text-decoration: underline; }
.vc-signal { cursor: pointer; }
.vcnet-pane {
  position: fixed;
  z-index: 26000;
  width: 320px;
  padding: 14px 14px 12px;
  border-radius: 20px;
  background: var(--bg-floating, var(--sf-base, #232428));
  border: 1px solid var(--line, var(--ln-deep, #1e1f22));
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vcnet-graph {
  height: 96px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  padding: 2px;
}
.vcnet-graph canvas { width: 100%; height: 100%; display: block; }
.vcnet-host { font-size: 15px; font-weight: 800; color: #fff; }
.vcnet-lines { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 700; color: var(--text, #dbdee1); }
.vcnet-hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted, #949ba4); }
.vcnet-actions { display: flex; gap: 8px; }
.vcnet-actions button { flex: 1 1 0; padding: 8px 10px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.vcnet-secure {
  margin-top: 2px;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(35, 165, 89, .12);
  color: #46c46e;
  font-size: 12.5px;
  font-weight: 600;
}
.vcnet-secure::before { content: "🔒 "; }

/* Живой баннер сообщества */
.clan-card-banner.fox-banner { padding: 0; overflow: hidden; }
.clan-card-banner.fox-banner canvas { width: 100%; height: 100%; display: block; }
.srv-banner-live { position: relative; overflow: hidden; }
.srv-banner-live canvas { width: 100%; height: 100%; display: block; }

/* Анимация камеры и шумодава — как у остальных кнопок панели */
.vc-media-btn[data-vc-cam]:hover:not(:disabled) svg { animation: vcCamPeek .55s ease; }
@keyframes vcCamPeek {
  0% { transform: none; }
  35% { transform: translateX(1.5px) scale(1.06); }
  70% { transform: translateX(-1px) scale(1.02); }
  100% { transform: none; }
}
.vc-actions .ns-btn:hover:not(:disabled) svg { animation: vcNoise .7s ease; }
@keyframes vcNoise {
  0% { transform: none; }
  30% { transform: scaleY(1.25); }
  60% { transform: scaleY(.85); }
  100% { transform: none; }
}
.vc-disc:hover:not(:disabled) svg { animation: vcHangup .5s ease; }
@keyframes vcHangup {
  0% { transform: none; }
  40% { transform: rotate(-16deg); }
  100% { transform: none; }
}

/* ===== Обрезка: рамки по краям окна, волну можно листать ===== */
.sb-up-wave { cursor: grab; }
.sb-up-wave.is-pan { cursor: grabbing; }
.sb-trim-sel { min-width: 34px; border-radius: 16px; }
.sb-trim-handle { width: 22px; }
.sb-trim-handle.start { left: -11px; }
.sb-trim-handle.end { right: -11px; }
.sb-trim-handle::before {
  width: 8px;
  height: 46px;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
/* насечки на рамке — сразу видно, что за неё тянут */
.sb-trim-handle::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 16px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .35);
  box-shadow: 3px 0 0 rgba(0, 0, 0, .35), -3px 0 0 rgba(0, 0, 0, .35);
}

/* Полоска всего трека под волной */
.sb-up-mini {
  position: relative;
  height: 30px;
  margin-top: 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
}
.sb-up-mini canvas { width: 100%; height: 100%; display: block; }
.sb-up-mini-win {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 4px;
  border-radius: 10px;
  background: rgba(233, 100, 46, .28);
  box-shadow: inset 0 0 0 1.5px var(--accent, #e9642e);
  pointer-events: none;
}

/* Значок звука: наша прозрачная рожица, пока смайлик не выбран */
.sb-up-body button.sb-up-emoji.is-empty { color: var(--muted, #949ba4); }
.sb-up-body button.sb-up-emoji.is-empty:hover { color: var(--text, #dbdee1); }
.sb-up-body button.sb-up-emoji svg { width: 22px; height: 22px; display: block; }

/* Громкость звука: своя дорожка — заливка доходит ровно до бегунка */
.sb-up-vol {
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  background: transparent;
}
.sb-up-vol::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(
    to right,
    var(--accent, #e9642e) 0 var(--vol-fill, 100%),
    rgba(255, 255, 255, .16) var(--vol-fill, 100%) 100%
  );
}
.sb-up-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.sb-up-vol::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .16); }
.sb-up-vol::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--accent, #e9642e); }
.sb-up-vol::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }

/* Кружок «без цвета» — показываем, что это мозаика из иконок */
.folder-color-dot.is-mosaic {
  background:
    linear-gradient(135deg, var(--sf-btn, #4e5058) 0 50%, #6b6d76 50% 100%);
  position: relative;
}
.folder-color-dot.is-mosaic::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.55) 0 45%, transparent 45% 55%, rgba(255,255,255,.55) 55% 100%),
    linear-gradient(0deg, rgba(255,255,255,.55) 0 45%, transparent 45% 55%, rgba(255,255,255,.55) 55% 100%);
  background-blend-mode: multiply;
  opacity: .8;
}

/* Шумодав: волна должна быть заметной */
.vc-actions .ns-btn:hover:not(:disabled) svg { animation: vcNoiseBig .9s ease-in-out; }
@keyframes vcNoiseBig {
  0% { transform: scaleY(1); }
  20% { transform: scaleY(1.55); }
  40% { transform: scaleY(.7); }
  60% { transform: scaleY(1.35); }
  80% { transform: scaleY(.85); }
  100% { transform: scaleY(1); }
}
.vc-actions .ns-btn svg { transform-origin: center; }

/* «О голосовом звонке»: значок сети оживает при наведении на всю строку */
.voice-conn .vc-status:hover .vc-signal svg,
.vc-signal:hover svg { animation: vcSignalWave 1.1s ease-in-out infinite; }
@keyframes vcSignalWave {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-1px) scale(1.08); }
  60% { transform: translateY(0) scale(.97); }
  100% { transform: translateY(0) scale(1); }
}
.voice-conn .vc-status:hover [data-vc-link-text] { text-decoration: underline; }

/* Баннер сообщества над списком каналов */
.sidebar-banner {
  position: relative;
  height: 120px;
  /* Карточка с отступом и скруглением; лиса и градиент режутся по углам (overflow) */
  margin: 8px 8px 0;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  flex: none;
}
.sidebar-banner canvas { width: 100%; height: 100%; display: block; }
.sidebar-banner-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46px;
  background: linear-gradient(180deg, transparent, var(--bg-sidebar, var(--sf-deep, #1e1f22)));
  pointer-events: none;
}
.sidebar-banner + .sidebar-head {
  margin-top: -12px;
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Треугольник в круглой кнопке: у него узкий кончик справа, поэтому по
 * геометрии он кажется левее центра — сдвигаем вправо на глаз. */
.sb-up-play { display: flex !important; align-items: center; justify-content: center; padding: 0; }
.sb-up-play svg { margin-left: 1px !important; width: 13px !important; height: 13px !important; }

/* Тег сообщества чуть крупнее — иначе значка тега не разглядеть */
.utag.clan-tag { font-size: 11.5px !important; padding: 2px 6px !important; }
.utag.clan-tag .clan-tag-ico { height: 15px !important; }
.nick-tag img, .role-tag img, .clan-tag img { height: 14px !important; }
.clan-card-title .utag.clan-tag .clan-tag-ico { height: 18px !important; }

/* Свои смайлики (в том числе анимированные) — картинкой везде, где раньше был текст */
.sb-emoji-img { width: 18px; height: 18px; object-fit: contain; display: inline-block; vertical-align: -3px; }
.sb-emoji-img.big { width: 24px; height: 24px; vertical-align: -5px; }
.sb-panel .sb-card-ico .sb-emoji-img { width: 17px; height: 17px; }
.sb-up-body button.sb-up-emoji .sb-emoji-img { width: 24px; height: 24px; }

/* Разделы саундбара идут одним списком — считаем отступы от самой панели */
.sb-panel .sb-panel-main { position: relative; scroll-behavior: smooth; }
.sb-sec { scroll-margin-top: 8px; }

/* ===== Плашка «Пошумите с Adrenaline» — внизу панели, как у дискорда =====
 * ВАЖНО: у .sb-panel position:fixed — трогать его нельзя, иначе панель
 * перестаёт открываться (уезжает в конец страницы). */
.sb-adr-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  background: linear-gradient(90deg, rgba(233, 100, 46, .10), rgba(233, 100, 46, .02));
  flex: none;
}
.sb-adr-bar-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  color: var(--muted, #949ba4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-adr-bar-text b { color: var(--accent, #e9642e); font-weight: 800; }
.sb-adr-bar-gem { display: flex; align-items: center; flex: none; }
.sb-adr-bar-gem img { width: 18px; height: 18px; }
.sb-adr-bar-btn {
  flex: none;
  padding: 7px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--accent, #e9642e);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.sb-adr-bar-btn:hover { filter: brightness(1.08); }

/* ===== Закрытые звуки: замок по центру и своя подложка ===== */
.sb-panel .sb-card.is-locked {
  opacity: 1;
  background: repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, .022) 0 8px,
      rgba(255, 255, 255, .05) 8px 16px
    ),
    #202126 !important;
  border-color: rgba(255, 255, 255, .07) !important;
  cursor: pointer;
}
.sb-panel .sb-card.is-locked:hover {
  border-color: var(--accent, #e9642e) !important;
  transform: none;
}
.sb-panel .sb-card.is-locked .sb-card-ico,
.sb-panel .sb-card.is-locked .sb-card-name { opacity: .35 !important; }
.sb-panel .sb-card.is-locked .sb-card-prev,
.sb-panel .sb-card.is-locked .sb-card-fav { display: none !important; }
/* сам замок — крупный, ровно по центру плитки */
.sb-panel .sb-card-lock {
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  color: #fff;
  opacity: .92;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .6));
}
.sb-panel .sb-card.is-locked:hover .sb-card-lock { color: var(--accent, #e9642e); }

/* Панель саундбара красит все кнопки внутри себя — плашке нужен приоритет */
.sb-panel .sb-adr-bar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 14px !important;
  border-top: 1px solid rgba(255, 255, 255, .07) !important;
  background: linear-gradient(90deg, rgba(233, 100, 46, .13), rgba(233, 100, 46, .03)) !important;
}
.sb-panel .sb-adr-bar-text {
  display: block !important;
  color: var(--text, #dbdee1) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}
.sb-panel .sb-adr-bar-text b { color: var(--accent, #e9642e) !important; }
.sb-panel .sb-adr-bar-btn {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px 15px !important;
  border-radius: 14px !important;
  background: var(--accent, #e9642e) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: 0 !important;
  box-shadow: none !important;
  justify-content: center !important;
}
.sb-panel .sb-adr-bar-btn:hover { filter: brightness(1.08); background: var(--accent, #e9642e) !important; }

/* Закрытая плитка должна читаться сразу — не «чуть темнее», а явно другая */
.sb-panel .sb-card.is-locked {
  background:
    repeating-linear-gradient(135deg, rgba(233,100,46,.05) 0 9px, rgba(233,100,46,.12) 9px 18px),
    #191a1f !important;
  box-shadow: inset 0 0 0 1px rgba(233, 100, 46, .22);
}
.sb-panel .sb-card.is-locked .sb-card-name { opacity: .3 !important; }
.sb-panel .sb-card.is-locked .sb-card-ico { opacity: .22 !important; }

/* Поиск в саундбаре: одна рамка, а не «окошко в окошке».
 * Системный вид у input[type=search] давал вторую рамку и свой фон. */
.sb-panel .sb-panel-search input,
.sb-panel .sb-panel-search input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: auto !important;
}
.sb-panel .sb-panel-search input::-webkit-search-decoration,
.sb-panel .sb-panel-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.sb-panel .sb-panel-search {
  border: 1px solid var(--line, #33333a) !important;
  background: var(--bg-1, #1a1a1e) !important;
  box-shadow: none !important;
}
.sb-panel .sb-panel-search:focus-within { border-color: var(--accent, #e9642e) !important; }

/* Меню устройств: не шире экрана, длинные названия переносятся */
.dev-vol-pop {
  max-width: min(420px, calc(100vw - 16px)) !important;
  box-sizing: border-box;
}
.dev-vol-pop .ctx-item {
  white-space: normal;
  line-height: 1.35;
  text-align: left;
  word-break: break-word;
}

/* Ползунок громкости выхода: своя дорожка — заливка доходит ровно до бегунка */
.dev-vol-pop .vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: calc(100% - 28px);
  margin: 6px 14px 10px;
  height: 18px;
  background: transparent;
}
.dev-vol-pop .vol-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(
    to right,
    var(--accent, #e9642e) 0 var(--dv-fill, 50%),
    rgba(255, 255, 255, .16) var(--dv-fill, 50%) 100%
  );
}
.dev-vol-pop .vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.dev-vol-pop .vol-slider::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255,255,255,.16); }
.dev-vol-pop .vol-slider::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--accent, #e9642e); }
.dev-vol-pop .vol-slider::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }

/* ===== Закрытые звуки — как на видео дискорда =====
 * Разделы, которые тебе недоступны, лежат в одном цветном блоке с круглым
 * замком по верхнему краю. Плитки внутри читаемые, просто не нажимаются. */
.sb-locked-wrap {
  position: relative;
  margin: 18px -14px 8px;
  padding: 16px 14px 10px;
  background: linear-gradient(160deg, rgba(233, 100, 46, .38), rgba(150, 60, 200, .30) 55%, rgba(60, 60, 120, .26));
  border-top: 1px solid rgba(255, 255, 255, .10);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sb-locked-badge {
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sf-deep, #1e1f22);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  color: #fff;
}
.sb-locked-badge svg { width: 15px; height: 15px; display: block; }
.sb-locked-wrap .sb-sec-head { opacity: .95; }
.sb-locked-wrap .sb-sec-name { color: #fff !important; }

/* Плитка закрытого звука: читаемая, с замком поверх значка */
.sb-panel .sb-card.is-locked {
  background: rgba(15, 16, 20, .55) !important;
  box-shadow: none;
  border-color: rgba(255, 255, 255, .10) !important;
  cursor: pointer;
}
.sb-panel .sb-card.is-locked:hover { background: rgba(15, 16, 20, .72) !important; }
.sb-panel .sb-card.is-locked .sb-card-name { opacity: .75 !important; }
.sb-panel .sb-card.is-locked .sb-card-ico { opacity: .5 !important; }
/* прослушать себе можно всем — кнопка остаётся */
.sb-panel .sb-card.is-locked .sb-card-prev { display: none; }
.sb-panel .sb-card.is-locked:hover .sb-card-prev { display: inline-flex !important; }
.sb-panel .sb-card.is-locked .sb-card-fav { display: inline-flex !important; }
/* замок — маленьким значком поверх смайлика, как у дискорда */
.sb-panel .sb-card-lock {
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  color: #fff;
  opacity: .95;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .75));
  z-index: 3;
}
.sb-panel .sb-card.is-locked:hover .sb-card-lock { opacity: 1; }

/* Плашка внизу — со свечением по краю, как у дискорда */
.sb-panel .sb-adr-bar {
  position: relative;
  margin: 0;
  background: #1b1c20 !important;
  border-top: 0 !important;
  box-shadow: inset 0 0 0 1.5px transparent;
}
.sb-panel .sb-adr-bar::before {
  content: "";
  position: absolute;
  inset: 6px 10px;
  border-radius: 20px;
  padding: 1.5px;
  background: linear-gradient(90deg, var(--accent, #e9642e), #b45cff 55%, #4aa3ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.sb-panel .sb-adr-bar { padding: 16px 24px !important; }

/* Замок стоит на месте смайлика — ничего не перекрывает */
.sb-panel .sb-card-lock {
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  color: #fff;
  opacity: .9;
  filter: none;
}
.sb-panel .sb-card-lock svg { width: 100%; height: 100%; display: block; }
.sb-panel .sb-card.is-locked .sb-card-ico { opacity: 1 !important; }
.sb-panel .sb-card.is-locked:hover .sb-card-ico { display: inline-flex !important; }

/* Громкость звуковой панели — своя дорожка, заливка ровно до бегунка */
.sb-vol-menu input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  background: transparent;
}
.sb-vol-menu input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(
    to right,
    var(--accent, #e9642e) 0 var(--sbv-fill, 100%),
    rgba(255, 255, 255, .16) var(--sbv-fill, 100%) 100%
  );
}
.sb-vol-menu input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.sb-vol-menu input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255,255,255,.16); }
.sb-vol-menu input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--accent, #e9642e); }
.sb-vol-menu input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }

/* Закрытый звук вне общего блока (например, в избранном) — помечаем той же
 * заливкой, чтобы он выглядел закрытым везде, а не только в своём разделе. */
.sb-panel .sb-card.is-locked {
  background:
    linear-gradient(135deg, rgba(233, 100, 46, .30), rgba(150, 60, 200, .26) 60%, rgba(60, 60, 120, .22)),
    rgba(15, 16, 20, .55) !important;
}
.sb-panel .sb-card.is-locked:hover {
  background:
    linear-gradient(135deg, rgba(233, 100, 46, .42), rgba(150, 60, 200, .34) 60%, rgba(60, 60, 120, .28)),
    rgba(15, 16, 20, .6) !important;
}
/* внутри общего цветного блока подложка не нужна — там уже градиент */
.sb-locked-wrap .sb-card.is-locked {
  background: rgba(15, 16, 20, .55) !important;
}
.sb-locked-wrap .sb-card.is-locked:hover { background: rgba(15, 16, 20, .72) !important; }

/* Замок — маленьким значком в углу смайлика (смайлик виден, как у дискорда) */
.sb-panel .sb-card.is-locked .sb-card-ico { position: relative; display: inline-flex; align-items: center; }
.sb-panel .sb-card.is-locked .sb-card-ico > :first-child { opacity: .55; }
.sb-panel .sb-card-lock {
  position: absolute;
  right: -6px;
  bottom: -5px;
  width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #16171b;
  border-radius: 50%;
  padding: 1.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.sb-panel .sb-card-lock svg { width: 100%; height: 100%; display: block; }

/* Старая подпись внутри плитки больше не нужна — её заменила общая подсказка */
.sb-panel .sb-card-tip { display: none !important; }

/* Высота шапки окна про Адреналин */
.sb-adr-hero { height: 200px; }

/* ===== Плавность чата =====
 * Раньше у списка сообщений стояло overflow-anchor: none — браузеру было
 * запрещено держать точку чтения. Любая картинка, догрузившаяся выше, или
 * подросшее сообщение сдвигали содержимое, и чат «дёргался» под руками.
 * Проверено замером: без привязки строка уезжает, с привязкой остаётся на месте. */
.messages { overflow-anchor: auto; }
/* Эти элементы не должны становиться якорем — они сами появляются и исчезают */
.messages .typing-row,
.messages .chat-skel,
.messages .msg-jump-bar,
.messages .chat-old-bar { overflow-anchor: none; }

/* ===================== ПЛАВНОСТЬ =====================
 * Одно правило на весь файл: двигаем и масштабируем, а не меняем размеры и
 * координаты. Размер и left/top заставляют браузер пересчитывать раскладку
 * каждый кадр, transform и opacity — нет. Отсюда и берётся «дёрганность». */

/* Полоска активного сообщества в рельсе (самая частая интеракция в приложении) */
.rail-btn .pill {
  height: 40px !important;
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition: transform .15s var(--camp-ease, cubic-bezier(.22, 1, .36, 1)), opacity .15s ease !important;
}
.rail-btn:hover .pill { height: 40px !important; transform: translateY(-50%) scaleY(.5); opacity: 1; }
.rail-btn.on .pill,
.rail-btn.on:hover .pill { height: 40px !important; transform: translateY(-50%) scaleY(1); opacity: 1; }

/* Тумблеры настроек */
.switch .switch-slider::before,
.pswitch .pswitch-knob {
  transition: transform .15s var(--camp-ease, cubic-bezier(.22, 1, .36, 1)) !important;
}
.switch input:checked + .switch-slider::before { left: 3px !important; transform: translateX(16px); }
.pswitch.on .pswitch-knob { left: 3px !important; transform: translateX(16px); }

/* Волна голосового сообщения: 80 столбиков не должны анимировать высоту —
 * форму задаёт JS одним проходом, переход тут только мешал. */
.msg-voice-wave .mvw i { transition: none !important; }
/* «Дыхание» оставляем только на нижнем слое: верхний подрезан и его не видно */
.msg-voice-play.on ~ .msg-voice-wave .mvw.fill i { animation: none !important; }
/* Тяжёлый слой композитора держим только во время проигрывания */
.msg-voice-wave .mvw.fill { will-change: auto !important; }
.msg-voice-play.on ~ .msg-voice-wave .mvw.fill { will-change: clip-path; }

/* Эквалайзер на плитке звука */
.sb-card-eq i { height: 10px !important; transform-origin: bottom; }
@keyframes sbEq { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

/* Прожектор обучения: четыре свойства раскладки сразу + тень во весь экран */
.camp-guide-spot {
  transition: opacity .2s ease !important;
  will-change: opacity;
}

/* Мягче и одинаково: единая шкала времени для всего приложения */
:root {
  --camp-dur-fast: .12s;
  --camp-ease-io: cubic-bezier(.4, 0, .2, 1);
}

/* Уважение к системной настройке «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Поле ввода в нашем окне вместо системного prompt() */
.camp-prompt-input { width: 100%; margin-top: 10px; }

/* Живой баннер в настройках сообщества */
.srv-banner-preview.live { position: relative; overflow: hidden; padding: 0; }
.srv-banner-preview.live canvas { width: 100%; height: 100%; display: block; }

/* Быстрые реакции и «…» в панели действий сообщения */
.msg-actions .msg-quick-react {
  font-size: 15px;
  line-height: 1;
  padding: 4px 6px;
  min-width: 28px;
  border-radius: 10px;
}
.msg-actions .msg-quick-react:hover { background: rgba(255, 255, 255, .10); transform: scale(1.12); }
.msg-actions .msg-more-btn svg { display: block; }
.msg-actions .msg-del-btn { color: #f0777f; }
.msg-actions .msg-del-btn:hover { background: rgba(240, 119, 127, .14); color: #ff8b93; }

/* Граница прочитанного: красная полоса с меткой «НОВОЕ» */
.new-divider {
  position: relative;
  height: 0;
  margin: 14px 0 6px;
  border-top: 1px solid var(--red, #f23f43);
  overflow-anchor: none;
}
.new-divider span {
  position: absolute;
  right: 12px;
  top: -9px;
  padding: 2px 7px;
  border-radius: 8px 8px 0 8px;
  background: var(--red, #f23f43);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.4;
}

/* Плашка «N новых сообщений» над чатом */
.new-msgs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 16px;
  background: var(--accent, #e9642e);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  flex: none;
  z-index: 3;
}
.new-msgs-bar button {
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 10px;
  opacity: .95;
}
.new-msgs-bar button:hover { background: rgba(0, 0, 0, .18); opacity: 1; }

/* Ряд частых реакций сверху меню сообщения — как в дискорде */
.ctx-react-row {
  display: flex;
  gap: 6px;
  padding: 6px 8px 4px;
}
.ctx-react-btn {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s ease, transform .12s ease;
}
.ctx-react-btn:hover { background: rgba(255, 255, 255, .12); transform: scale(1.1); }
.ctx-react-btn.plus { color: var(--muted, #949ba4); }
.ctx-react-btn.plus svg { width: 22px; height: 22px; }
.ctx-react-btn.plus:hover { color: #fff; }

/* Приглашение: живая сцена на весь экран позади карточки */
.invite-landing-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.invite-landing > .invite-landing-card { position: relative; z-index: 1; }
.invite-landing {
  background:
    linear-gradient(180deg, rgba(8, 8, 10, .38), rgba(8, 8, 10, .66)),
    var(--inv-banner, none);
  background-size: cover;
  background-position: center;
}

/* ===== Раскрытая демка — как у лолки: главный кадр + лента снизу ===== */
.vgrid.has-focus {
  display: flex !important;
  flex-wrap: wrap;
  align-content: stretch;
  /* База .vgrid центрирует элементы (align-items: center) — во флекс-строке
   * это запрещает плитке тянуться, и раскрытый кадр схлопывался до 4px
   * (у видео внутри высота абсолютная, своей у него нет). */
  align-items: stretch;
  gap: 10px;
  overflow-y: auto;
}
.vgrid.has-focus .vtile.focus {
  order: 0;
  /* Вся высота минус лента (96) и зазор (10): фокусу — всё свободное место,
   * а не «поровну между строками», как делит align-content. */
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  height: calc(100% - 106px);
  aspect-ratio: auto;
  animation: tileFocusIn .22s var(--camp-ease, cubic-bezier(.22, 1, .36, 1));
}
@keyframes tileFocusIn {
  from { transform: scale(.985); opacity: .85; }
  to { transform: none; opacity: 1; }
}
/* остальные — маленькой полоской снизу */
.vgrid.has-focus .vtile:not(.focus) {
  order: 1;
  flex: 0 0 auto;
  width: 168px;
  min-height: 0;
  height: 96px;
  aspect-ratio: auto;
}
.vgrid.has-focus .vtile:not(.focus) .vu-nick-row { font-size: 11px; }
/* раскрытый кадр занимает всё оставшееся место по высоте */
.vgrid.has-focus { height: 100%; }
.vgrid.has-focus .vtile.focus video { object-fit: contain; }

/* Буквенная иконка на карточке приглашения */
.invite-landing-ico.letters {
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
  background: var(--accent, #e9642e);
}

/* Выбор «в приложении / в браузере» на карточке приглашения */
.invite-landing-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.invite-landing-choice button { width: 100%; }

/* ---- Автомод: список правил и редактор (тёмный + оранжевый, контурные чипы) ---- */
.automod-rules { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.automod-rule {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line, #33302b);
  border-radius: 16px; background: rgba(255, 255, 255, 0.02);
}
.automod-rule > div:first-child { min-width: 0; }
.automod-rule .hint { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.automod-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.am-tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(244, 168, 61, 0.45); color: var(--brand, #f4a83d);
  background: rgba(244, 168, 61, 0.08); white-space: nowrap;
}
.automod-rule-side { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.automod-rule-side .am-edit { padding: 4px 9px; line-height: 1; }
.automod-add { margin-top: 4px; }
[data-am-modal] textarea { resize: vertical; min-height: 84px; }
[data-am-modal] .am-sub { margin-left: 26px; }
.modal-backdrop[data-am-modal] .modal-body label.switch-row {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 10px; margin: 8px 0; cursor: pointer;
}
.modal-backdrop[data-am-modal] .modal-body label.switch-row span { flex: 0 1 auto; text-align: left; }

/* ---- Пауза приглашений ---- */
.inv-pause-btn { align-self: flex-start; color: #e57373; border-color: rgba(229, 115, 115, 0.4); }
.inv-pause-btn.paused { color: var(--brand, #f4a83d); border-color: rgba(244, 168, 61, 0.45); }
.inv-paused-note {
  margin: 6px 0 0; padding: 8px 12px; border-radius: 12px; font-size: 13px;
  color: var(--brand, #f4a83d); background: rgba(244, 168, 61, 0.08);
  border: 1px solid rgba(244, 168, 61, 0.35);
}
.invite-landing-paused { color: #e5a973; font-size: 13px; margin: 4px 0 8px; }
.invite-landing-cta[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---- Участники роли: поиск, добавление, снятие (как у Discord) ---- */
.role-members-mini { position: relative; display: flex; flex-direction: column; gap: 6px; }
.role-members-bar { display: flex; gap: 8px; margin-bottom: 4px; }
.role-members-bar input[type="search"] { flex: 1; min-width: 0; }
.role-member-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 12px; background: rgba(255, 255, 255, 0.02);
}
.role-member-row .role-member-name { font-weight: 600; }
.role-member-row .hint { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-member-x { padding: 2px 8px; line-height: 1; color: var(--muted, #999); }
.role-member-x:hover { color: #e57373; border-color: rgba(229, 115, 115, 0.4); }
.role-add-pop {
  position: absolute; top: 40px; left: 0; right: 0; z-index: 30;
  background: var(--panel, #201d19); border: 1px solid var(--line, #33302b);
  border-radius: 16px; padding: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.role-add-pop input { width: 100%; margin-bottom: 6px; }
.role-add-list { max-height: 220px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.role-add-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: 0; background: transparent; border-radius: 12px;
  color: inherit; text-align: left; cursor: pointer;
}
.role-add-item:hover { background: rgba(244, 168, 61, 0.1); }

/* ---- Редактор вопросов адаптации ---- */
.ob-prompts { display: flex; flex-direction: column; gap: 12px; }
.ob-q-card {
  border: 1px solid var(--line, #33302b); border-radius: 20px;
  padding: 12px; background: rgba(255, 255, 255, 0.02);
  display: flex; flex-direction: column; gap: 8px;
}
.ob-q-head { display: flex; align-items: center; justify-content: space-between; }
.ob-q-num { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand, #f4a83d); }
.ob-q-del, .ob-a-del { padding: 2px 8px; line-height: 1; color: var(--muted, #999); }
.ob-q-del:hover, .ob-a-del:hover { color: #e57373; border-color: rgba(229, 115, 115, 0.4); }
.ob-q-title { width: 100%; }
.ob-answers { display: flex; flex-direction: column; gap: 6px; }
.ob-a-row { display: flex; align-items: center; gap: 6px; }
.ob-a-row input.ob-a-emoji { width: 52px; flex: 0 0 52px; text-align: center; }
.ob-a-row input.ob-a-title { flex: 1 1 auto; width: auto; min-width: 0; }
.ob-a-row select.ob-a-role {
  flex: 0 1 220px; width: 220px; min-width: 180px;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.ob-q-flags { display: flex; gap: 18px; flex-wrap: wrap; }
.ob-q-flags .switch-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ob-a-add, .ob-q-add { align-self: flex-start; }

/* ---- Интеграция: карточки ботов сообщества ---- */
.int-bot-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line, #33302b); border-radius: 16px;
  background: rgba(255, 255, 255, 0.02); margin-bottom: 8px;
}
.int-bot-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.int-bot-meta .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.int-bot-badge {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px;
  background: var(--brand, #f4a83d); color: #1b1712; vertical-align: 2px;
}

/* ---- «Удалить сообщество» внизу сайдбара настроек — как у Discord ---- */
/* Специфичность выше, чем у .modal-backdrop.fullscreen .modal-nav button */
.modal-nav button.nav-danger,
.modal-backdrop.fullscreen .modal-nav button.nav-danger {
  color: #e57373;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.modal-nav button.nav-danger:hover,
.modal-backdrop.fullscreen .modal-nav button.nav-danger:hover {
  background: rgba(229, 115, 115, 0.12);
  color: #ef9a9a;
}
.nav-danger-ico { font-size: 12px; opacity: 0.9; }
.clan-locked-preview { opacity: 0.55; pointer-events: none; margin: 10px 0; }

/* ---- Особенности сообщества: чипы как у Discord, в нашем стиле ---- */
.feat-field { margin: 8px 0; }
.feat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.feat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px; font-size: 13px;
  border: 1px solid rgba(244, 168, 61, 0.45); color: var(--brand, #f4a83d);
  background: rgba(244, 168, 61, 0.08);
}
.feat-chip .feat-x {
  border: 0; background: transparent; color: inherit; cursor: pointer;
  padding: 0 2px; font-size: 12px; opacity: 0.7; line-height: 1;
}
.feat-chip .feat-x:hover { opacity: 1; }
.feat-add-row { display: flex; gap: 8px; }
.feat-add-row input { flex: 1; min-width: 0; }
.feat-field > .settings-label {
  text-transform: uppercase; font-size: 12px; letter-spacing: 0.03em;
  color: var(--muted, #9a8f82); font-weight: 600;
}

/* ---- Эмодзи: кнопка-первым, пустое состояние, дроп-зона ---- */
.emoji-upload-btn { align-self: flex-start; margin: 6px 0 2px; }
.emoji-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 36px 12px; text-align: center;
}
.emoji-empty-face { font-size: 44px; filter: grayscale(0.6); opacity: 0.8; }
.emoji-empty b { letter-spacing: 0.12em; color: var(--muted, #9a8f82); }
.settings-sec.emoji-drop {
  outline: 2px dashed rgba(244, 168, 61, 0.6); outline-offset: -6px; border-radius: 20px;
}

/* ---- Безопасность: строка тумблера — заголовок и описание раздельно ---- */
.safety-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; }
.safety-row .switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.safety-row .switch-text b { font-weight: 600; }
.safety-row .switch { flex: 0 0 auto; }

/* ---- Участники: таблица скроллится внутри модала, не вылезая ---- */
.memdir-settings-body { overflow-x: hidden; }
.memdir-settings-body .memdir.is-embedded { max-width: 100%; min-width: 0; }
.memdir .memdir-table-wrap { max-width: 100%; }

/* ---- Участники: панель массовых действий ---- */
.memdir-bulk[hidden] { display: none; }
.memdir-bulk {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin: 8px 0; border-radius: 16px;
  border: 1px solid rgba(244, 168, 61, 0.45); background: rgba(244, 168, 61, 0.08);
}
.memdir-bulk b { color: var(--brand, #f4a83d); }
.memdir-bulk .spacer { flex: 1; }
.memdir-bulk button { padding: 4px 12px; }

/* ---- Настройки канала: крестик в правом верхнем углу, как во всех настройках.
       Панель не флексилась (нет .fullscreen) — ✕ падал под контент. ---- */
.modal-backdrop[data-channel-settings] .modal-panel {
  display: flex !important;
  flex-direction: row !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.modal-backdrop[data-channel-settings] .settings-close-col {
  width: 56px !important;
  flex: 0 0 56px !important;
  padding: 12px 10px 0 0 !important;
}

/* ---- Голос и видео: ползунок громкости звуковой панели ---- */
.vol-row { display: flex; align-items: center; gap: 12px; }
.vol-row span { flex: 0 0 auto; }
.vol-row input[type="range"] { flex: 1; min-width: 0; }
.vol-row b { flex: 0 0 44px; text-align: right; color: var(--brand, #f4a83d); }


/* ---- Спойлеры: режим «показывать всегда» ---- */
body.a11y-spoiler-open .msg-body .spoiler { color: var(--text); background: var(--sf-btn, #4e5058); cursor: auto; }
body.a11y-spoiler-open .msg-spoiler-media .msg-media,
body.a11y-spoiler-open .msg-spoiler-media .msg-img,
body.a11y-spoiler-open .msg-spoiler-media .msg-video,
body.a11y-spoiler-open .msg-spoiler-media .msg-file {
  filter: none; transform: none; pointer-events: auto; user-select: auto;
}
body.a11y-spoiler-open .msg-spoiler-media { cursor: auto; }
body.a11y-spoiler-open .msg-spoiler-label { display: none; }

/* ---- Пилюли выбора отступа групп ---- */
.gap-pills { display: flex; gap: 8px; }
.gap-pill {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line, #33302b);
  background: transparent; color: var(--muted, #9a8f82); cursor: pointer;
}
.gap-pill.on { border-color: rgba(244, 168, 61, 0.6); color: var(--brand, #f4a83d); background: rgba(244, 168, 61, 0.08); }

/* ---- Подразделы вкладки в сайдбаре настроек ---- */
.settings-subnav { display: flex; flex-direction: column; margin: 2px 0 6px 14px; border-left: 2px solid rgba(244, 168, 61, 0.35); }
.subnav-item {
  text-align: left; background: transparent; border: 0; cursor: pointer;
  padding: 4px 10px; font-size: 12.5px; color: var(--muted, #9a8f82);
}
.subnav-item:hover { color: var(--brand, #f4a83d); }

/* ---- Бейджи на плитке стрима: зрители и «нет звука» ---- */
.vtile-stream-hud .stream-viewers {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  flex: 0 0 auto;
  opacity: .92;
}
.vtile-stream-hud .stream-viewers svg {
  width: 14px;
  height: 14px;
}
.vtile-stream-hud .stream-viewers[hidden],
.vtile-stream-hud .stream-noaudio[hidden] {
  display: none;
}
.vtile-stream-hud .stream-noaudio {
  flex: 0 0 auto;
  font-size: .82rem;
  opacity: .95;
}
/* Подсказка «кто смотрит демку» на «глазике» (позиционируется скриптом).
 * У всей плашки pointer-events:none — возвращаем их только «глазику»,
 * иначе наведение до него не доходит. Клик так же уходит на плитку. */
.vtile-stream-hud .stream-viewers { cursor: default; pointer-events: auto; }
.stream-viewers-tip {
  position: fixed;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 168px;
  max-width: 260px;
  padding: 10px 12px;
  background: var(--sf-abyss, #111214);
  border: 1px solid var(--ln-panel, #2b2d31);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  color: #dbdee1;
  font-size: 13px;
  line-height: 1.35;
  pointer-events: none;
}
.stream-viewers-tip .svt-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #949ba4;
}
.stream-viewers-tip .svt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.stream-viewers-tip .svt-row .avatar {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}
.stream-viewers-tip .svt-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f2f3f5;
}
.stream-viewers-tip .svt-more { color: #949ba4; font-size: 12px; }
body.theme-light .stream-viewers-tip { background: #fff; border-color: #d7d9dc; color: #313338; }
body.theme-light .stream-viewers-tip .svt-name { color: #060607; }

/* GIF-баннер сообщества: свой слой композитинга, чтобы анимация
 * не перерисовывала сайдбар и чат (жалоба «чат дёргается»). */
.sidebar-banner {
  contain: layout paint;
  transform: translateZ(0);
}

/* Настройки канала/категории на узких экранах: нав ужимается, контент — вся ширина */
@media (max-width: 800px) {
  .modal-backdrop[data-channel-settings] .modal-nav {
    flex: 0 0 132px !important;
    width: 132px !important;
    max-width: 132px !important;
    padding: 16px 6px 12px 8px !important;
  }
  .modal-backdrop[data-channel-settings] .settings-content {
    flex: 1 1 auto !important;
    max-width: none !important;
    padding: 14px 12px 10px !important;
  }
  .modal-backdrop[data-channel-settings] .settings-close-col {
    flex: 0 0 40px !important;
    width: 40px !important;
    padding: 8px 6px 0 0 !important;
  }
}

/* ---- Профиль сервера → «Игры»: обложки как в Discord ---- */
.srv-games-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: .5rem;
}
.srv-game-tile {
  position: relative;
  width: 104px;
  cursor: default;
}
.srv-game-tile img,
.srv-game-cover-ph {
  width: 104px;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  display: block;
}
.srv-game-cover-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}
.srv-game-tile.addable { cursor: pointer; }
.srv-game-tile.addable:hover img { outline: 2px solid var(--brand, #ff5722); }
.srv-game-name {
  display: block;
  font-size: .74rem;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
}
.srv-game-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #4e5df1;
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.srv-game-x {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 0;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  display: none;
}
.srv-game-x:hover { background: rgba(0, 0, 0, .85); }
.srv-game-tile:hover .srv-game-x { display: flex; }
.srv-game-count {
  position: absolute;
  bottom: 26px;
  right: 6px;
  background: rgba(0, 0, 0, .7);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: .72rem;
  color: #fff;
}
.srv-game-search-wrap { position: relative; max-width: 380px; }
.srv-game-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  background: var(--bg-float, #1a1a1e);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.srv-game-results[hidden] { display: none; }
.srv-game-result {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: none;
  border: 0;
  color: var(--text, #ddd);
  cursor: pointer;
  text-align: left;
  font-size: .85rem;
}
.srv-game-result:hover { background: rgba(255, 255, 255, .06); }
.srv-game-result img {
  width: 46px;
  height: 21px;
  object-fit: cover;
  border-radius: 8px;
}

/* ---- Тег сообщества: раскладка как в Discord ---- */
.clan-intro { max-width: 640px; }
.boost-unlock-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #121214;
  border: 0;
  border-radius: 26px;
  padding: 9px 16px;
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  position: relative;
  margin: 6px 0 2px;
  box-shadow: 0 0 18px 4px rgba(120, 90, 255, .35), 0 0 30px 8px rgba(255, 90, 40, .18);
}
.boost-unlock-pill .pill-gem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #121214;
}
.clan-tag-layout {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin-top: .6rem;
}
.clan-tag-main { flex: 1 1 380px; min-width: 0; }
.clan-tag-main.locked { opacity: .55; pointer-events: none; }
.clan-name-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}
.clan-name-preview {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, .28);
  border-radius: 16px;
  padding: 8px 12px;
}
.clan-name-ico { width: 30px; height: 30px; }
.clan-name-preview input {
  width: 110px;
  background: none;
  border: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text, #dbdee1);
  text-transform: uppercase;
}
.clan-name-preview input:focus { outline: none; }
.clan-name-hint { flex: 1 1 180px; min-width: 160px; }
/* (устаревшая обрезка по пикселям убрана — режем по элементам ниже) */
.clan-icons-toggle {
  background: none;
  border: 0;
  color: var(--accent, #ff5722);
  cursor: pointer;
  padding: 4px 0 10px;
  font-size: .82rem;
}
.clan-chat-panel {
  overflow: hidden;
  flex: 0 0 300px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ccp-row { display: flex; gap: 10px; align-items: flex-start; }
.ccp-row.dim { opacity: .42; }
.ccp-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: 0 0 34px;
}
.ccp-av.me {
  background: var(--brand, #ff5722);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.ccp-body { display: flex; flex-direction: column; min-width: 0; font-size: .84rem; }
.ccp-body b { font-size: .86rem; }
.ccp-head { display: inline-flex; align-items: center; gap: 6px; }
.ccp-body span { color: var(--text-muted, #949ba4); }
.ccp-head + span { color: var(--text, #dbdee1); }
@media (max-width: 900px) {
  .clan-chat-panel { display: none; }
}

/* ---- Роли: режим списка как в Discord ---- */
.roles-editor.list-mode { display: block !important; max-height: none; }
.roles-editor.list-mode .roles-detail { display: none; }
.roles-editor.list-mode .roles-list {
  border-right: 0;
  max-height: none;
  width: 100%;
  max-width: 760px;
}
.roles-desc { margin: 0 0 .8rem; }
.roles-default-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, .045);
  border: 0;
  border-radius: 16px;
  padding: 12px 14px;
  color: var(--text, #dbdee1);
  cursor: pointer;
  margin-bottom: .9rem;
}
.roles-default-card:hover { background: rgba(255, 255, 255, .08); }
.roles-default-card .rdc-ico {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
}
.roles-default-card .rdc-ico svg { width: 20px; height: 20px; }
.roles-default-card .rdc-meta { display: flex; flex-direction: column; min-width: 0; }
.roles-default-card .chev { margin-left: auto; color: var(--text-muted); font-size: 20px; }
.roles-search-row { display: flex; gap: 10px; margin-bottom: .5rem; }
.roles-search-row input { flex: 1 1 auto; min-width: 0; }
.roles-order-hint { margin: 0 0 .7rem; }
.roles-table-head {
  display: grid;
  grid-template-columns: 1fr 120px 76px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  padding: 0 6px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.role-lrow {
  display: grid;
  grid-template-columns: 34px 1fr 86px 34px 34px;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  border-radius: 10px;
}
.role-lrow:hover { background: rgba(255, 255, 255, .05); }
.role-lrow.dragging { opacity: .5; }
.role-lrow.drag-over { outline: 1px dashed rgba(255, 255, 255, .3); }
.role-lrow-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, .55);
}
.role-lrow-av svg { width: 15px; height: 15px; }
.role-lrow-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-lrow-count { color: var(--text-muted); font-size: .85rem; text-align: right; }
.role-lrow-count .rl-man { font-size: .75rem; opacity: .8; }
.role-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  border: 0;
  background: rgba(255, 255, 255, .06);
  color: var(--text, #dbdee1);
  cursor: pointer;
  font-size: 13px;
}
.role-icon-btn:hover { background: rgba(255, 255, 255, .12); }
.roles-back { margin-bottom: .5rem; }

/* ---- Стикеры: лестница бустов как в Discord ---- */
.st-boost-banner {
  border-radius: 16px;
  background: linear-gradient(100deg, #b3401f, #7d2ee8);
  color: #fff;
  text-align: center;
  padding: 22px 18px;
  margin-bottom: 1.1rem;
}
.st-boost-banner h3 { margin: 0 0 6px; font-size: 1.05rem; }
.st-boost-banner p {
  margin: 0 auto 12px;
  max-width: 460px;
  font-size: .84rem;
  line-height: 1.4;
  opacity: .95;
}
.st-banner-btns { display: flex; gap: 10px; justify-content: center; }
.st-banner-btns button {
  background: #fff;
  color: #17181c;
  border: 0;
  border-radius: 10px;
  padding: 8px 16px;
  font-weight: 700;
  cursor: pointer;
  font-size: .85rem;
}
.st-timeline { display: flex; flex-direction: column; }
.st-node {
  display: flex;
  gap: 14px;
  position: relative;
  padding: 0 0 22px 4px;
}
.st-node::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 18px;
  bottom: 0;
  width: 2px;
  background: var(--sf-btn, #4e5058);
}
.st-node:last-child::before { display: none; }
.st-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sf-btn, #4e5058);
  flex: 0 0 16px;
  margin-top: 2px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
}
.st-dot.on { background: #eb459e; }
.st-node-body { flex: 1 1 auto; min-width: 0; }
.st-node.status .st-node-body b { display: block; margin-bottom: 2px; }
.st-slot-card,
.st-lv-card {
  background: rgba(255, 255, 255, .04);
  border-radius: 16px;
  padding: 12px 14px;
}
.st-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.st-card-head > div { display: flex; flex-direction: column; }
.st-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
}
.st-slot-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  display: flex;
  align-items: center;
  justify-content: center;
}
.st-slot-tile img { max-width: 76%; max-height: 76%; object-fit: contain; }
.st-slot-tile.placeholder { color: #5c5e66; }
.st-tile-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  border: 0;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: none;
}
.st-slot-tile:hover .st-tile-x { display: block; }
.st-lv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, .04);
  margin: -12px -14px 12px;
  padding: 10px 14px;
  border-radius: 16px 16px 0 0;
}
.st-lv-lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: .84rem;
}
.st-lv-lock svg { width: 14px; height: 14px; }
.st-lv-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 0 6px;
  color: #5c5e66;
}
.st-buy-btn {
  background: #248046;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 7px 16px;
  font-weight: 700;
  cursor: pointer;
  font-size: .84rem;
}
.st-buy-btn:hover { background: #2d9c56; }

/* ---- «Добавить эмодзи» — модалка с кропом ---- */
.emoji-crop-bd { z-index: 1200; }
.emoji-crop-modal {
  display: flex;
  width: min(780px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  border-radius: 16px;
  overflow: hidden;
  background: #333239;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .55);
}
.emoji-crop-left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 18px 16px;
}
.ec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ec-head b { font-size: 1rem; }
.ec-ico-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #b5bac1;
  font-size: 15px;
  cursor: pointer;
}
.ec-ico-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.ec-crop-zone {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}
.ec-viewport {
  position: relative;
  width: 240px;
  height: 240px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 8px;
  cursor: grab;
  background: var(--sf-base, #232428);
}
.ec-viewport img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  user-select: none;
  pointer-events: none;
}
.ec-drag-hint { text-align: center; margin: 8px 0; }
.ec-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #3c3d44;
  border-radius: 12px;
  padding: 6px 12px;
}
.ec-toolbar input[type="range"] {
  flex: 1 1 auto;
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  min-width: 0;
  background: transparent;
  cursor: pointer;
}
.ec-toolbar input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(
    to right,
    var(--accent, #e9642e) 0,
    var(--accent, #e9642e) var(--ec-zoom-fill, 0%),
    rgba(255, 255, 255, .16) var(--ec-zoom-fill, 0%),
    rgba(255, 255, 255, .16) 100%
  );
}
.ec-toolbar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}
.ec-toolbar input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .16); }
.ec-toolbar input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--accent, #e9642e); }
.ec-toolbar input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.ec-toolbar input[type="range"]:disabled { opacity: .45; cursor: default; }
.ec-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, .15); }
/* «−» и «+» — настоящие кнопки шага масштаба, а не декоративные значки */
.ec-zoom-ico {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #b5bac1;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ec-zoom-ico:hover:not(:disabled) { background: rgba(255, 255, 255, .1); color: #fff; }
.ec-zoom-ico:disabled { opacity: .4; cursor: default; }
.emoji-crop-side {
  flex: 0 0 232px;
  background: #393a40;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ec-side-h { font-size: .9rem; }
.ec-previews { display: flex; gap: 12px; }
.ec-prev-tile {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  background: #323339;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ec-prev-tile > img { width: 84px; height: 84px; object-fit: contain; }
.ec-react-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #46474e;
  border-radius: 12px;
  padding: 4px 8px;
}
.ec-react-pill img { width: 22px; height: 22px; object-fit: contain; }
.ec-label { font-size: .78rem; font-weight: 700; margin-top: 6px; }
.ec-req { color: #f23f43; }
.ec-name-wrap { position: relative; }
.ec-name-wrap input { width: 100%; padding-right: 34px; }
/* Крестик очистки: без padding и с grid-центровкой, иначе общий padding кнопок
 * раздувал круг в кривой овал 29×20 и уводил знак вправо от центра. */
.ec-name-x {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #ddd;
  font-size: 10px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-sizing: border-box;
}
.ec-name-x:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.ec-srv-select { position: relative; }
.ec-srv-btn,
.ec-srv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: #34353c;
  border: 0;
  border-radius: 12px;
  padding: 7px 10px;
  color: var(--text, #dbdee1);
  cursor: pointer;
  font-size: .85rem;
  text-align: left;
}
.ec-srv-row { border-radius: 0; background: transparent; }
.ec-srv-row:hover { background: rgba(255, 255, 255, .07); }
.ec-srv-ico {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 24px;
}
.ec-srv-ico.letters {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand, #ff5722);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}
.ec-srv-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-srv-slots { color: var(--text-muted); font-size: .78rem; }
.ec-srv-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #26272b;
  border-radius: 12px;
  overflow: hidden;
  z-index: 30;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.ec-srv-menu[hidden] { display: none; }
.ec-spacer { flex: 1 1 auto; }
.ec-finish { width: 100%; }
.ec-finish:disabled { opacity: .45; cursor: default; }

/* ---- Бонусы буста ---- */
.bp-section {
  display: flex;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.bp-section.full { display: block; }
.bp-text { flex: 1 1 auto; min-width: 0; }
.bp-head-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.bp-head-row .switch { margin-left: auto; }
.bp-media { flex: 0 0 260px; }
.boost-lvl-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, .45);
  border-radius: 16px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.boost-unlock-glow.light {
  background: #fff;
  color: #060607;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 0 16px 4px rgba(120, 90, 255, .35), 0 0 28px 8px rgba(255, 90, 40, .2);
}
.boost-unlock-glow.light .pill-gem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #121214;
}
.bp-dropzone {
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.bp-dropzone.dim { cursor: default; opacity: .5; }
.bp-dropzone img { width: 100%; height: 100%; object-fit: cover; }
.bp-drop-ico { font-size: 26px; opacity: .5; }
.bp-mock {
  border-radius: 16px;
  background: rgba(0, 0, 0, .35);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bp-mock-banner {
  height: 46px;
  border-radius: 10px;
  background: linear-gradient(120deg, #b3401f, #e97c39);
}
.bp-mock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .07);
  border-radius: 10px;
  padding: 5px 8px;
  font-size: .72rem;
  color: var(--text-muted);
  position: relative;
  overflow: hidden;
}
.bp-mock-bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(235, 69, 158, .35);
}
.bp-mock-line {
  height: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
}
.bp-mock-line.short { width: 60%; }
.vanity-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.vanity-row input { width: 160px; }

/* ---- Настройка безопасности: хаб ---- */
.safety-hub {
  background: rgba(255, 255, 255, .035);
  border-radius: 16px;
  max-width: 720px;
}
.safety-hub-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
.safety-hub-row + .safety-hub-row { border-top: 1px solid rgba(255, 255, 255, .06); }
.safety-hub-ic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  flex: 0 0 40px;
}
.safety-hub-ic.am { background: linear-gradient(135deg, #5865f2, #b845c1); }
.safety-hub-ic.perms { background: linear-gradient(#f5586c, #ef4160); }
.safety-hub-txt { display: flex; flex-direction: column; min-width: 0; }
.safety-hub-row .ghost { margin-left: auto; }

/* ---- Приглашения: таблица как в Discord ---- */
.invite-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: .8rem;
}
.invite-eyebrow {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  max-width: 170px;
  line-height: 1.4;
  padding-top: 6px;
}
.invite-top-btns { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.inv-pause-btn2 {
  background: rgba(255, 255, 255, .08);
  border: 0;
  border-radius: 12px;
  padding: 8px 16px;
  color: #f26d6d;
  font-weight: 600;
  cursor: pointer;
}
.inv-pause-btn2:hover { background: rgba(255, 255, 255, .13); }
.invite-table-wrap { overflow-x: auto; }
.invite-table-head,
.invite-trow {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) 1fr .8fr 1fr .9fr 34px;
  gap: 8px;
  align-items: center;
  min-width: 620px;
}
.invite-table-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #dbdee1);
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.invite-trow {
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.invite-inviter { display: flex; align-items: center; gap: 10px; min-width: 0; }
.invite-inviter-meta { display: flex; flex-direction: column; min-width: 0; }
.invite-inviter-meta b { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-src { font-size: 11px; color: var(--text-muted); }
.invite-code-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  cursor: pointer;
}
.invite-code-cell:hover { text-decoration: underline; }
.invite-uses, .invite-cd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.invite-revoke {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
}
.invite-trow:hover .invite-revoke { opacity: 1; }
.invite-revoke:hover { background: rgba(255, 255, 255, .1); color: #f26d6d; }

/* ---- Доступ ---- */
.srv-access-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: rgba(255, 255, 255, .03);
  border-radius: 16px;
  padding: 5px;
  margin: .8rem 0 1rem;
  max-width: 700px;
}
.srv-access-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text, #dbdee1);
  cursor: pointer;
}
.srv-access-card .hint { font-size: .76rem; line-height: 1.35; }
.srv-access-card.on {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
}
.srv-access-card:disabled { cursor: default; opacity: .7; }
.sac-ico { font-size: 20px; }
.rules-dim { opacity: .45; pointer-events: none; }
.acc-rules-list { display: flex; flex-direction: column; gap: 8px; margin: .5rem 0; max-width: 700px; }
.acc-rule-row { display: flex; gap: 6px; align-items: center; }
.acc-rule-row input { flex: 1 1 auto; }
.acc-rule-x {
  border: 0;
  background: rgba(255, 255, 255, .07);
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: 10px;
  cursor: pointer;
}
.acc-rule-add { display: block; margin: 0 auto .8rem; }
.acc-samples { display: flex; flex-direction: column; gap: 8px; margin-top: .5rem; max-width: 700px; }
.acc-sample {
  text-align: left;
  background: rgba(255, 255, 255, .045);
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.acc-sample:hover { background: rgba(255, 255, 255, .08); color: var(--text); }

/* ---- Интеграция: карточки как в Discord ---- */
.int-feature-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  margin-bottom: 10px;
  max-width: 720px;
}
.int-feature-row.clickable { cursor: pointer; }
.int-feature-row.clickable:hover { background: rgba(255, 255, 255, .07); }
.int-feat-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .08);
  font-size: 18px;
  flex: 0 0 40px;
}
.int-feat-ico.twitch { background: #9146ff; }
.int-feat-ico.youtube { background: #f00; }
.int-feat-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.int-feat-right { color: var(--text-muted); }
.int-feat-right .chev { font-size: 20px; }
.int-soon {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: 3px 8px;
}
.int-bot-row.card {
  border: 0;
  background: rgba(255, 255, 255, .04);
  border-radius: 16px;
  padding: 14px 16px;
  align-items: flex-start;
  max-width: 720px;
}
.int-bot-chips { display: flex; gap: 6px; margin-top: 6px; }
.int-chip {
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  padding: 3px 9px;
  background: rgba(255, 255, 255, .04);
}

/* ---- Адаптация: хаб ---- */
.ob-hub-links { margin: .2rem 0 .8rem; }
.ob-hub-links .linkish { color: #4ea8de; background: none; border: 0; cursor: pointer; padding: 0; }
.ob-hub-card {
  background: rgba(255, 255, 255, .035);
  border-radius: 16px;
  max-width: 720px;
  overflow: hidden;
}
.ob-hub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, .25);
}
.ob-hub-head > div { display: flex; flex-direction: column; }
.ob-hub-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.ob-hub-ico {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  display: grid;
  place-items: center;
  font-weight: 700;
  flex: 0 0 38px;
}
.ob-hub-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ob-hub-badge {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 10px;
  padding: 3px 8px;
}
.ob-hub-badge.warn { color: #f0b232; background: rgba(240, 178, 50, .12); }
.ob-amber { color: #f0b232; font-weight: 700; }
.ob-chan-list { display: flex; flex-direction: column; gap: 4px; max-width: 560px; }

/* ---- Обзор сообщества ---- */
.com-welcome {
  position: relative;
  background: rgba(255, 255, 255, .05);
  border-radius: 16px;
  padding: 14px 40px 14px 16px;
  margin-bottom: 1.1rem;
  max-width: 720px;
}
.com-welcome-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.com-welcome-x:hover { background: rgba(255, 255, 255, .08); }
.com-welcome-row { display: flex; gap: 12px; align-items: flex-start; }
.com-welcome-ico {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  display: grid;
  place-items: center;
  font-size: 22px;
  flex: 0 0 44px;
}
.com-row {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  max-width: 720px;
}
.com-row-txt { flex: 1 1 auto; min-width: 0; max-width: 60%; }
.com-row-txt textarea { width: 100%; margin-top: 8px; max-width: none; }
.com-row-txt:only-child { max-width: none; }
.com-row-ctl { flex: 0 0 210px; }
.com-row-ctl select { width: 100%; }

/* ---- Аналитика / Шаблон / бейджи нава ---- */
.modal-nav button.nav-flex { display: flex; align-items: center; }
.nav-badge-txt {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nav-badge-txt[hidden] { display: none; }
.settings-callout.info {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(88, 101, 242, .55);
  background: rgba(88, 101, 242, .12);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 12px 0 24px;
  max-width: 720px;
  font-size: .88rem;
}
.callout-i {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #5865f2;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  display: grid;
  place-items: center;
  flex: 0 0 17px;
}
.analytics-card {
  background: rgba(255, 255, 255, .04);
  border-radius: 16px;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  text-align: center;
}
.analytics-art { font-size: 52px; }
.tpl-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  background: rgba(0, 0, 0, .3);
  border-radius: 16px;
  padding: 16px 20px;
  max-width: 720px;
  margin: 12px 0;
}
.tpl-col { display: flex; flex-direction: column; gap: 10px; }
.tpl-col > b { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }
.tpl-row { display: flex; align-items: flex-start; gap: 8px; font-size: .88rem; }
.tpl-dot {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  color: #fff;
  font-style: normal;
  font-size: 11px;
  display: grid;
  place-items: center;
  flex: 0 0 19px;
}
.tpl-dot.ok { background: #23a55a; }
.tpl-dot.no { background: #f23f43; }
@media (max-width: 700px) { .tpl-card { grid-template-columns: 1fr; } }

/* ---- Правки кривизны по скринам 30.08 ---- */
/* Тег: свёрнутый грид — без пак-табов; какие значки видны решают правила .mini в конце файла */
.clan-icon-wrap.collapsed { max-height: none; overflow: visible; }
.clan-icon-wrap.collapsed [data-tag-packs],
.clan-icon-wrap.collapsed .boost-tag-pack-tabs { display: none; }
/* Тег в чат-превью: не давать чипу разрывать строку и вылезать из панели */
.clan-chat-panel .ccp-head { flex-wrap: wrap; row-gap: 2px; }
.clan-chat-panel .ds-clan-tag { font-size: 11px; max-width: 96px; overflow: hidden; }
.clan-chat-panel .ds-clan-tag .ds-clan-ico-img { width: 14px; height: 14px; }
/* Роли: кнопка не переносится, силуэт и счётчик серые */
.roles-search-row .btn-brand { white-space: nowrap; }
.role-lrow-av svg { display: block; }
.role-lrow-count { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.role-lrow-count .rl-man { filter: grayscale(1); opacity: .55; font-size: .8rem; }
/* Бонусы буста: белая пилюля без кислотной анимированной рамки */
.boost-unlock-glow.light::before,
.boost-unlock-glow.light::after { display: none !important; content: none !important; }
.boost-unlock-glow.light {
  background: #fff !important;
  color: #060607 !important;
  border: 0 !important;
  animation: none !important;
  box-shadow: 0 0 14px 3px rgba(120, 90, 255, .28), 0 0 24px 6px rgba(255, 90, 40, .16) !important;
}
/* Адаптация: бейдж одной строкой */
.ob-hub-badge { white-space: nowrap; }
/* Доступ: разделители тонкие, в ширину контента */
[data-access-sec] hr.nav-sep {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
  max-width: 700px;
  margin: 18px 0;
  background: none;
  height: 0;
}
/* Приглашения: пауза-кнопка темнее */
.inv-pause-btn2 { background: rgba(255, 255, 255, .055); }
.inv-pause-btn2:hover { background: rgba(255, 255, 255, .1); }
/* Обзор: чекбокс «Показать в Путешествиях» рядом с текстом, а не через всю ширину */
.srv-overview-form label.switch-row { justify-content: flex-start; gap: 10px; }
/* Дропзоны бонусов: без эмодзи-рамки */
.bp-drop-ico { font-size: 0; }
.bp-drop-ico::before {
  content: "";
  display: block;
  width: 34px;
  height: 28px;
  border: 2px dashed rgba(255, 255, 255, .25);
  border-radius: 10px;
}

/* ---- Превью профиля сообщества (как карточка сервера в Discord) ---- */
.srv-preview-card.sticky { position: sticky; top: 8px; }
.srv-preview-namerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.srv-preview-namerow .ds-clan-tag { font-size: 11px; }
.srv-preview-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.srv-preview-meta.muted { font-size: .74rem; }
.pv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #80848e;
  display: inline-block;
}
.pv-dot.on { background: #23a55a; }
.srv-tag.game { background: rgba(255, 255, 255, .08); }

/* Горизонтальная обложка-фолбэк заполняет вертикальный тайл */
.srv-game-tile img.hdr { object-fit: cover; object-position: center; }

/* ===== Редактор роли как в Discord: шапка, вкладки, карточки стилей, значок роли ===== */
.roles-elist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 8px;
}
.roles-back-up {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font: inherit;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .05em;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
}
.roles-back-up:hover { color: var(--text); background: var(--bg-hover); }
.roles-add-mini {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px 4px;
  border-radius: 8px;
}
.roles-add-mini:hover { color: var(--text); background: var(--bg-hover); }
.role-pick .role-icon-img { margin-left: auto; }
.roles-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.roles-detail-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.role-more-btn { font-size: 1.05rem; }
.role-tabbar {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  margin-bottom: 14px;
  overflow-x: auto;
}
.role-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 8px 2px 9px;
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
}
.role-tab:hover { color: var(--text); }
.role-tab.on {
  color: var(--accent, var(--accent-brand));
  border-bottom-color: var(--accent, var(--accent-brand));
}
.role-tab-members { margin-left: auto; }
.role-tab-pane[hidden] { display: none; }
.req { color: #f23f43; margin-left: 3px; }
.role-sec-div { height: 1px; background: rgba(255, 255, 255, .07); margin: 14px 0; }
.role-name-lab { display: block; }
/* Карточки стилей роли с мини-чатом */
.role-style-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 12px;
}
.role-style-card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--line-soft, var(--ln-edge2, #3f4147));
  background: var(--sf-deep, #1e1f22);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font: inherit;
}
.role-style-card.on { border-color: var(--accent, var(--accent-brand)); }
.role-style-card.locked { opacity: .45; }
.role-style-card .rsc-chat { display: block; padding: 10px 10px 8px; pointer-events: none; }
.role-style-card .rsc-label {
  display: block;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  padding: 6px 4px;
  background: rgba(255, 255, 255, .04);
  border-top: 1px solid rgba(255, 255, 255, .05);
  color: var(--text-muted);
}
.role-style-card.on .rsc-label { color: var(--text); }
/* Мини-чат в карточках и большом превью */
.rcp-row { display: flex; gap: 8px; padding: 6px 8px; border-radius: 10px; align-items: flex-start; }
.role-style-card .rcp-row { padding: 0; }
.rcp-body { min-width: 0; display: block; }
.rcp-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rcp-name {
  font-weight: 600;
  font-size: .86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 9rem;
}
.rcp-time { font-size: .68rem; color: var(--text-muted); flex: none; }
.rcp-msg {
  display: block;
  font-size: .82rem;
  color: var(--text);
  opacity: .9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.role-chat-preview {
  border: 1px solid rgba(255, 255, 255, .08);
  background: var(--sf-abyss, #111214);
  border-radius: 12px;
  padding: 6px;
  margin: 8px 0 4px;
}
.role-chat-preview .rcp-row:nth-child(even) { background: rgba(255, 255, 255, .035); }
.role-style-magic .rsm-text b { display: block; font-size: .85rem; }
.role-style-magic .rsm-text .hint { margin: 2px 0 0; }
/* Цвет роли: большие плитки «По умолчанию» и «Пользовательский» + 20 пресетов */
.role-color-grid { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; flex-wrap: wrap; }
.role-color-big {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
  padding: 0;
  flex: none;
}
.role-color-big:hover { outline: 2px solid rgba(255, 255, 255, .35); outline-offset: 1px; }
.role-color-big .rcb-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: .55rem;
  font-weight: 700;
  color: rgba(0, 0, 0, .65);
  padding: 1px 2px;
  text-align: center;
  background: rgba(255, 255, 255, .25);
  border-radius: 0 0 10px 10px;
}
.role-color-big.on::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M6.2 11.4 2.8 8l1.1-1.1 2.3 2.3 5.9-5.9L13.2 4z'/></svg>") center/18px no-repeat;
  filter: drop-shadow(0 0 1px #000);
}
.role-color-big .role-color-pencil { width: 14px; height: 14px; right: 4px; bottom: 4px; }
.role-color-presets.grid20 {
  display: grid;
  grid-template-columns: repeat(10, 28px);
  gap: 6px;
  width: auto;
  margin-top: 0;
  flex: 1;
  min-width: 0;
}
/* Значок роли */
.role-lvl-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--sf-abyss, #111214);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--text-muted);
  border-radius: 16px;
  font-size: .62rem;
  font-weight: 800;
  padding: 2px 7px;
  vertical-align: middle;
  margin-left: 6px;
  letter-spacing: .03em;
}
.role-icon-field.locked .role-icon-tile,
.role-icon-field.locked .role-icon-btns { opacity: .55; }
.role-icon-row { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.role-icon-tile {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: var(--sf-deep, #1e1f22);
  border: 1px dashed rgba(255, 255, 255, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex: none;
  overflow: hidden;
}
.role-icon-tile img { width: 100%; height: 100%; object-fit: contain; }
.role-icon-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.role-emoji-pop {
  position: absolute;
  left: 92px;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(8, 34px);
  gap: 4px;
  padding: 8px;
  background: var(--sf-deep, #1e1f22);
  border: 1px solid var(--ln-panel, #2b2d31);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  max-height: 200px;
  overflow-y: auto;
}
.role-emoji-pop .hint { grid-column: 1 / -1; margin: 0; }
.rep-cell { width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; padding: 3px; }
.rep-cell:hover { background: var(--bg-hover); }
.rep-cell img { width: 100%; height: 100%; object-fit: contain; }
/* Значок роли рядом с именем в списках */
.role-icon-img { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-left: 4px; flex: none; }
.role-lrow-name .role-icon-img { vertical-align: -2px; }
/* Поиск по правам */
.perm-search-row { margin-bottom: 8px; }
.perm-search-row input {
  width: 100%;
  box-sizing: border-box;
  background: var(--sf-deep, #1e1f22);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  padding: .55rem .7rem;
  font-size: .92rem;
}
/* Привязанные роли — честная заглушка */
.role-links-stub h4 {
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin: 0 0 6px;
}
/* Сверка 30.08: .perm-item{display:flex} перебивает UA [hidden] — «Поиск по правам» не прятал строки */
.perm-item[hidden] { display: none !important; }
.perm-group-title[hidden] { display: none !important; }
/* Ярлык + звёздочка/плашка «УР. 2» в одну строку (грид .modal-body label и флекс-колонка .settings-label растаскивали их по строкам) */
.role-lab-line { display: inline-flex; align-items: center; min-width: 0; }
@media (max-width: 720px) {
  .role-style-cards { grid-template-columns: 1fr; }
  .role-color-presets.grid20 { grid-template-columns: repeat(5, 28px); }
}

/* ---- Пачка фиксов по скринам (2-я волна) ---- */
/* Тег в превью и панелях — компактный, не гигант */
.srv-preview-namerow .ds-clan-tag,
.clan-chat-panel .ds-clan-tag {
  font-size: 10px !important;
  padding: 1px 6px !important;
  max-height: 18px;
  border-radius: 9px !important;
  transform: none !important;
}
.srv-preview-namerow .ds-clan-tag .ds-clan-ico-img,
.clan-chat-panel .ds-clan-tag .ds-clan-ico-img {
  width: 12px !important;
  height: 12px !important;
}
.srv-preview-namerow .ds-clan-tag .ds-clan-txt,
.clan-chat-panel .ds-clan-tag .ds-clan-txt {
  font-size: 10px !important;
}
/* Аватар зрителя в превью тега */
.ccp-av.live-av { background: none; width: auto; height: auto; flex: 0 0 auto; }
.ccp-av.live-av img, .ccp-av.live-av .av { width: 34px; height: 34px; border-radius: 50%; }
/* Белая пилюля буста: перелив на ховере */
.boost-unlock-pill:hover,
.boost-unlock-glow.light:hover {
  box-shadow:
    0 0 10px 2px rgba(88, 101, 242, .8),
    0 0 22px 6px rgba(235, 69, 158, .55),
    0 0 34px 10px rgba(255, 140, 40, .4) !important;
  transition: box-shadow .25s;
}
.boost-unlock-pill, .boost-unlock-glow.light { transition: box-shadow .25s; }
/* Плитки значков тега — прозрачные, только сам значок */
.boost-tag-ico {
  background: transparent !important;
  border-color: transparent !important;
}
.boost-tag-ico.on { border-color: var(--brand, #ff5722) !important; }
.boost-tag-ico:hover { background: rgba(255, 255, 255, .05) !important; }
/* Роли: строки компактнее, кнопки ровнее */
.role-lrow {
  padding: 4px 6px;
  min-height: 40px;
  grid-template-columns: 30px 1fr 76px 30px 30px;
}
.role-lrow-av { width: 24px; height: 24px; flex: 0 0 24px; }
.role-icon-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}
/* Превью-баннер: канвас лисы заполняет */
.srv-preview-banner { position: relative; overflow: hidden; }
.srv-preview-banner canvas { width: 100%; height: 100%; display: block; }

/* Саундборд: жёсткий потолок, дальше — скролл и рейл сообществ */
.sb-panel { max-height: min(440px, calc(100vh - 120px)) !important; height: min(440px, calc(100vh - 120px)); }
.sb-panel-body { overflow: hidden; }
.sb-panel-body > .sb-panel-main,
.sb-panel-scroll,
.sb-panel-body > div:not(.sb-panel-rail) {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}

/* События: одна колонка, без пустой правой зоны и плавающего ✕ */
.events-sheet-modal { display: block !important; background: var(--bg-float, var(--sf-deep, #1e1f22)) !important; }
.events-sheet-backdrop .modal-panel { width: 100%; height: auto; }
.events-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.events-sheet-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.events-sheet-body { padding: 14px; }
.events-empty { text-align: center; padding: 18px 0 10px; }

/* ── Палитра цвета баннера в «Профиле сообщества»: плитки-градиенты + пипетка ── */
.banner-color-field { position: relative; }
.banner-color-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(56px, 90px));
  gap: 8px;
  margin-top: 6px;
}
.bc-tile {
  position: relative;
  height: 48px;
  border-radius: 16px;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.bc-tile:hover:not(:disabled) { transform: translateY(-1px); }
.bc-tile:disabled { cursor: default; opacity: .55; }
.bc-tile.sel { border-color: var(--brand); }
.bc-tile .bc-check {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.bc-tile.sel .bc-check { display: flex; }
.bc-tile.bc-custom {
  background:
    linear-gradient(rgba(30, 31, 34, .55), rgba(30, 31, 34, .55)),
    conic-gradient(#ef4444, #f59e0b, #4ade80, #60a5fa, #a78bfa, #ef4444);
  color: #fff;
}
.bc-tile.bc-custom .bc-eyedrop {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  pointer-events: none;
}
/* Нативный color-picker спрятан: его открывает плитка-пипетка */
.bc-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---- Тег сообщества: паки значков (правки 30.08) ---- */
/* Свёрнутый пикер: превью бесплатных паков — дефолтная «Аркада» первой, «Россия» второй
   (по 8 значков каждого, класс .mini ставит app.js); выбранный значок виден всегда */
.clan-icon-wrap.collapsed .boost-tag-ico { display: none !important; }
.clan-icon-wrap.collapsed .boost-tag-ico.mini,
.clan-icon-wrap.collapsed .boost-tag-ico.on { display: flex !important; }
/* Развёрнутый пикер: таб-переключатели паков видны и скроллятся, ничего не прячем навсегда */
.clan-icon-wrap:not(.collapsed) .boost-tag-pack-tabs { display: flex; max-height: 96px; }
.boost-tag-pack-tab { display: inline-flex; align-items: center; gap: 4px; }
.boost-tag-pack-tab.locked { opacity: .78; }
.boost-tag-pack-tab .tag-pack-lock { flex: 0 0 auto; }
/* Залоченные значки: приглушены, замок в углу, честный курсор */
.boost-tag-ico { position: relative; }
.boost-tag-ico.locked { cursor: not-allowed; }
.boost-tag-ico.locked .boost-tag-ico-img { opacity: .38; filter: grayscale(.55); }
.boost-tag-ico .tag-ico-lock {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .72);
  color: #e8e9ec;
  pointer-events: none;
}
.boost-tag-ico .tag-ico-lock .tag-pack-lock.sm { width: 9px; height: 9px; }

/* ---- Карточка «Путешествия» в профиле сообщества (заявка на модерацию) ---- */
.discovery-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line, #3a3c42);
  border-radius: 16px;
  background: var(--card, var(--sf-base, #232428));
}
.discovery-card .disc-info { flex: 1 1 220px; min-width: 0; }
.discovery-card .disc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--text, #ececf1);
  margin-bottom: 4px;
}
.discovery-card .disc-info .hint { margin: 0; }
.discovery-card .disc-info .disc-note { margin-top: 6px; color: var(--muted, #949ba4); }
.discovery-card .disc-action { flex-shrink: 0; }
.discovery-card .disc-action button {
  padding: 10px 18px;
  font-weight: 600;
  white-space: nowrap;
}
.discovery-card .disc-action button:disabled { opacity: .55; cursor: not-allowed; }
.disc-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.disc-badge.ok {
  color: #3ba55d;
  border: 1px solid rgba(59, 165, 93, .5);
  background: rgba(59, 165, 93, .12);
}
.disc-badge.wait {
  color: var(--brand, #eb6123);
  border: 1px solid rgba(235, 97, 35, .5);
  background: rgba(235, 97, 35, .12);
}
@media (max-width: 640px) {
  .discovery-card { flex-direction: column; align-items: stretch; }
  .discovery-card .disc-action button { width: 100%; }
}

/* ==== Бусты сервера: раскладка страницы (фикс 2026-08-30) ====
 * Контейнер по центру (макс. 1200px), правая колонка в потоке грида,
 * фон = фон приложения (--bg-chat), без горизонтального скролла. */
.boosts-page{overflow-y:auto;overflow-x:hidden}
.boosts-page .boost-lolka{height:auto;min-height:0;max-width:none;margin:0;width:100%;background:var(--bg-chat);align-items:start;column-gap:32px;padding:0 32px 48px 24px}
.boosts-page .boost-lolka-main{overflow:visible;padding:22px 0 12px}
.boosts-page .boost-lolka-rail{overflow:visible;background:transparent;border-left:0;padding:74px 0 28px;min-width:0}
@media (max-width: 980px){
  .boosts-page .boost-lolka{grid-template-columns:1fr;column-gap:0}
  .boosts-page .boost-lolka-rail{border-top:1px solid var(--line);padding-top:18px}
}
/* Узкие карточки уровней (напр. 1280px): «Активировать» переносится на
 * вторую строку вместо обрезки краем карточки. На широких — как было. */
.boosts-page .boost-lolka-foot{flex-wrap:wrap;row-gap:4px}

/* ===== Мозаика вложений: несколько фото одним сообщением (как в Discord).
 * Сетку собирает applyAttachmentGrid() в app.js: .msg-att-grid > .msg-att-cell. ===== */
.msg-att-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  max-width: min(550px, 100%);
  margin-top: .3rem;
}
.msg-att-grid[data-n="2"] { grid-auto-rows: 275px; }
.msg-att-grid[data-n="3"],
.msg-att-grid[data-n="4"],
.msg-att-grid[data-n="many"] { grid-auto-rows: 180px; }
/* 3 фото: первое — высокое слева, два — справа друг над другом */
.msg-att-grid[data-n="3"] .msg-att-cell:first-child { grid-row: span 2; }
/* 5+ и нечётное: последнее фото — во всю ширину ряда */
.msg-att-grid[data-n="many"] .msg-att-cell:last-child:nth-child(odd) { grid-column: span 2; }
.msg-att-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg-tertiary, rgba(0,0,0,.2));
}
.msg-att-cell .msg-media,
.msg-att-cell .msg-spoiler-media,
.msg-att-cell .media-filter-wrap {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
}
.msg-att-cell .msg-img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.msg-att-cell .msg-img-dead {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
/* В узких поповерах (закладки/пины) мозаика компактнее */
.pin-text .msg-att-grid { max-width: 100%; }
.pin-text .msg-att-grid[data-n] { grid-auto-rows: 90px; }

/* Доступ: тумблеры не у дальнего края модалки, а сразу за колонкой текста (как в Discord) */
[data-access-sec] .switch-row { max-width: 720px; }
[data-access-sec] > .hint { max-width: 660px; }

/* Тултип реакции как в Discord: крупная эмодзи + кто добавил */
.reaction-tip {
  position: fixed;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 300px;
  padding: 10px 12px;
  background: var(--sf-abyss, #111214);
  border: 1px solid var(--ln-panel, #2b2d31);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  color: #dbdee1;
  font-size: 13px;
  line-height: 1.35;
  pointer-events: none;
}
.reaction-tip-emoji { font-size: 38px; line-height: 1; flex: 0 0 auto; }
.reaction-tip-img { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.reaction-tip-text b { color: #f2f3f5; }
.reaction-tip-mini { font-variant-emoji: emoji; }
body.theme-light .reaction-tip { background: #fff; border-color: #d7d9dc; color: #313338; }
body.theme-light .reaction-tip-text b { color: #060607; }

/* =====================================================================
 * КОСМЕТИКА: рамка аватара (deco) и неймплейт (nameplate)
 * Рамка живёт ВНУТРИ .avatar и вылезает за его край на --deco-scale.
 * Ассеты рисуются под отверстие 1/1.2 от холста — не трогать без ассетов.
 * ===================================================================== */
:root { --deco-scale: 1.2; }

/* .avatar режет содержимое (overflow:hidden) — для рамки снимаем обрезку
   и круглим само фото/инициалы, чтобы аватар остался кругом. */
.avatar.has-deco { overflow: visible; }
.avatar.has-deco > .avatar-media,
.avatar.has-deco > .avatar-fallback { border-radius: 50%; }

.avatar-deco {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% * var(--deco-scale));
  height: calc(100% * var(--deco-scale));
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

/* Обёртки аватара местами режут по краю — рамке нужно вылезать наружу */
.av-wrap:has(.avatar.has-deco),
.avatar-col:has(.avatar.has-deco),
.avatar-wrap:has(.avatar.has-deco),
.vtile-avatar:has(.avatar.has-deco),
.userpanel-av:has(.avatar.has-deco),
.pp-avatar:has(.avatar.has-deco),
.dm-prof-av:has(.avatar.has-deco),
.standing-card-av:has(.avatar.has-deco),
.chan-welcome-avatar:has(.avatar.has-deco) { overflow: visible; }

/* ---- Неймплейт: подложка под именем ---- */
.nameplate-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  /* Плашка показывается ЦЕЛИКОМ. Была обрезка cover+left: ассет 640×64 (10:1),
   * а строка участника ~5:1 — правая треть с декором просто не влезала
   * («гифка улетела вправо»). fill вписывает весь рисунок: цвет под ником,
   * декор справа от него — как в образце. */
  object-fit: fill;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Строка участника: подложка на всю строку, содержимое — поверх.
   Обрезку НЕ включаем, иначе срежет рамку аватара. */
.member.has-nameplate { position: relative; color: #fff; }
.member.has-nameplate > .nameplate-bg { border-radius: 8px; }
.member.has-nameplate > .av-wrap,
.member.has-nameplate > .meta { position: relative; z-index: 1; }
/* подсветку наведения даёт сама подложка — фоном её не перебиваем */
.member.has-nameplate:hover { background: transparent; box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .07); }
.member.has-nameplate .member-name-row .nick-inline-name { text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.member.has-nameplate .member-sub { color: rgba(255, 255, 255, .82); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }

/* Карточка профиля: подложка только под ником */
.nick-plate { position: relative; }
/* -16px — ровно паддинг .user-popout .body, чтобы подложка шла от края до края */
.nick-plate.has-nameplate {
  margin: 0 -16px 2px;
  padding: 5px 16px;
  border-radius: 10px;
  overflow: hidden;
}
.nick-plate > .nick { position: relative; z-index: 1; margin: 0; }
.nick-plate.has-nameplate > .nick { text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }

/* «Уменьшить анимацию»: страховка — гасим любые CSS-переходы на косметике
   (сама подмена animated→static делается в JS, cosmeticMotion()). */
body.a11y-reduce-motion .avatar-deco,
body.a11y-reduce-motion .nameplate-bg,
body.a11y-reduce-motion .profile-effect { animation: none !important; transition: none !important; }

/* ---- Эффект профиля: слой поверх ВСЕЙ карточки ----
   Ассет 640×400 с прозрачной серединой: рамка по краям, декор сверху и снизу.
   Растягиваем на всю карточку (object-fit: fill) — так рамка эффекта совпадает
   с краями карточки; cover срезал бы её. Клики и текст не трогаем:
   pointer-events: none на всём слое. */
.profile-fx {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 4;
}
.profile-effect {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: fill;
}

/* Мини-профиль и модалка уже позиционированы (fixed / relative) — слой ложится
   по их краям. Кликам он не мешает: pointer-events:none, поднимать содержимое
   z-индексом не нужно.
   Большая модалка: слой выше .up-shell-bg (z-index 0) и .up-cols (z-index 1). */
.user-profile-modal .profile-fx { z-index: 3; }
/* Карточка-превью в настройках профиля */
.profile-preview-card { position: relative; }

/* ===================== ВИТРИНА МАГАЗИНА ===================== */
.shop-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 14px 0 4px;
  border-bottom: 1px solid var(--bg-modifier-accent, var(--ln-edge2, #3f4147));
  padding-bottom: 8px;
}
.shop-tab {
  background: none;
  border: 0;
  color: var(--text-muted, #949ba4);
  font-size: 14px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.shop-tab:hover { background: rgba(255, 255, 255, .06); color: var(--header-primary, #f2f3f5); }
.shop-tab.on { background: rgba(244, 168, 61, .14); color: var(--brand, #f4a83d); }

.shop-body { padding-top: 12px; }
.shop-h {
  margin: 16px 0 10px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted, #949ba4);
}
.shop-h:first-child { margin-top: 4px; }
.shop-empty { padding: 26px 4px; text-align: center; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 12px;
}
.shop-grid-bundles { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
/* Неймплейты вытянутые (640×64) — им нужна ширина, иначе тема не видна */
.shop-grid-plates { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.shop-grid-plates .shop-prev { height: 92px; }
.shop-grid-plates .shop-plate-row { padding: 9px 12px; width: calc(100% - 16px); }
/* Эффект профиля: примерка — макет карточки, ему нужна и ширина, и высота */
.shop-grid-effects { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
.shop-grid-effects .shop-prev { height: 168px; }

.shop-card {
  background: var(--bg-secondary, var(--sf-panel, #2b2d31));
  border: 1px solid var(--bg-modifier-accent, var(--ln-edge2, #3f4147));
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shop-card:hover { border-color: rgba(244, 168, 61, .5); }

/* Превью: рамка вылезает за круг аватара — обрезку не включаем */
.shop-prev {
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0, 0, 0, .22);
  overflow: visible;
}
.shop-prev.try-on { background: rgba(0, 0, 0, .28); }
.shop-prev-img { max-width: 96px; max-height: 96px; object-fit: contain; }

/* Примерка неймплейта: своё имя на подложке */
.shop-plate-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  width: calc(100% - 20px);
  overflow: hidden;
}
.shop-plate-name {
  position: relative;
  z-index: 1;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-plate-row > .avatar { position: relative; z-index: 1; }

/* Примерка эффекта профиля: мини-макет карточки — баннер, свой аватар, своё имя */
.shop-fx-prev { padding: 8px; }
.shop-fx-card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 96px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-secondary, var(--sf-panel, #2b2d31));
  display: flex;
  flex-direction: column;
}
.shop-fx-banner {
  height: 38%;
  min-height: 26px;
  flex: 0 0 auto;
  background: var(--brand, #f4a83d);
  background-size: cover;
  background-position: center;
}
.shop-fx-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  min-width: 0;
}
.shop-fx-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--header-primary, #f2f3f5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* «Моя косметика»: макет уже, чем в витрине — задаём размер явно */
.shop-mine-fx { width: 190px; height: 118px; }

/* Коллаж набора: рамка и значок сверху, неймплейт широкой полосой снизу.
   Тремя равными колонками неймплейт 640×64 сплющивался в нечитаемую нитку 7px. */
.shop-bundle-collage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 6px 10px;
  padding: 10px 12px;
  align-content: center;
  height: auto;
  min-height: 132px;
}
.shop-bundle-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-bundle-cell img { max-width: 100%; object-fit: contain; }
.shop-bundle-cell-deco { grid-area: 1 / 1 / 2 / 2; }
.shop-bundle-cell-deco img { width: 78px; height: 78px; }
/* Набор = рамка + неймплейт + эффект: эффект занимает правую верхнюю клетку.
   Значок в набор не входит (продаётся отдельно), но правило оставлено — в
   catalog.json набор можно собрать и вручную. */
.shop-bundle-cell-effect { grid-area: 1 / 2 / 2 / 3; }
.shop-bundle-cell-effect img { width: 100%; height: auto; border-radius: 9px; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.shop-bundle-cell-badge { grid-area: 1 / 2 / 2 / 3; }
.shop-bundle-cell-badge img { width: 54px; height: 54px; }
.shop-bundle-cell-nameplate { grid-area: 2 / 1 / 3 / 3; }
.shop-bundle-cell-nameplate img {
  width: 100%;
  height: auto;
  border-radius: 9px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.shop-card-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shop-card-name {
  font-size: 14px;
  color: var(--header-primary, #f2f3f5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-card-kind { font-size: 12px; color: var(--text-muted, #949ba4); }

.shop-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  flex-wrap: wrap;
}
.shop-price { font-weight: 700; color: var(--header-primary, #f2f3f5); font-size: 14px; }
.shop-bundle-save { font-weight: 600; color: var(--brand, #f4a83d); font-size: 12px; }
.shop-owned { font-size: 12px; font-weight: 600; color: var(--green, #23a55a); }

.shop-btn {
  border: 0;
  border-radius: 10px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-modifier-accent, var(--sf-btn, #4e5058));
  color: #fff;
}
.shop-btn:hover { filter: brightness(1.12); }
.shop-btn.btn-brand { background: var(--brand, #f4a83d); color: #1a1206; }

/* «Моя косметика» в настройках профиля */
.shop-mine { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.shop-mine-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.shop-mine-lab { font-size: 12px; color: var(--text-muted, #949ba4); }

body.theme-light .shop-card { background: #f7f7f8; border-color: #e0e1e4; }
body.theme-light .shop-prev { background: rgba(0, 0, 0, .06); }
body.theme-light .shop-card-name,
body.theme-light .shop-price { color: #313338; }
/* Макет карточки профиля в примерке эффекта — светлая тема */
body.theme-light .shop-fx-card { background: #fff; }
body.theme-light .shop-fx-name { color: #313338; }

/* ===================== ПРЕДПРОСМОТР ПРЕДМЕТА / НАБОРА =====================
   Клик по карточке витрины (и по надетому предмету в «Моей косметике»)
   открывает окно: слева крупное превью и покупка, справа живой мок с
   данными зрителя. */

/* Карточка теперь кликабельна — показываем это курсором и рамкой фокуса */
.shop-card { cursor: pointer; }
.shop-card:focus-visible { outline: 2px solid var(--brand, #f4a83d); outline-offset: 2px; }
.shop-mine-prev { display: inline-block; cursor: pointer; border-radius: 12px; }
.shop-mine-prev:focus-visible { outline: 2px solid var(--brand, #f4a83d); outline-offset: 3px; }

.cosm-prev-modal { width: min(790px, 100%); max-height: min(88vh, 780px); grid-template-columns: 1fr; }
.cosm-prev-body {
  display: grid;
  grid-template-columns: minmax(0, 286px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 760px) {
  .cosm-prev-body { grid-template-columns: minmax(0, 1fr); }
}

/* ---- левая колонка: превью, миниатюры, цена ---- */
.cosm-prev-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cosm-prev-hero {
  height: 188px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(0, 0, 0, .26);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cosm-prev-hero-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cosm-prev-hero-deco .cosm-prev-hero-img { max-width: 164px; max-height: 164px; }
.cosm-prev-hero-badge .cosm-prev-hero-img { max-width: 128px; max-height: 128px; }
.cosm-prev-hero-nameplate .cosm-prev-hero-img { width: 100%; border-radius: 10px; }

.cosm-prev-name { font-size: 16px; font-weight: 700; color: var(--header-primary, #f2f3f5); }
.cosm-prev-count { font-size: 12px; color: var(--text-muted, #949ba4); margin-top: -6px; }

.cosm-prev-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.cosm-prev-thumb {
  flex: 1 1 0;
  min-width: 74px;
  max-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(0, 0, 0, .24);
  cursor: pointer;
}
.cosm-prev-thumb img { width: 100%; height: 40px; object-fit: contain; }
.cosm-prev-thumb-kind {
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
  color: var(--text-muted, #949ba4);
}
.cosm-prev-thumb:hover { border-color: rgba(244, 168, 61, .45); }
.cosm-prev-thumb.on { border-color: var(--brand, #f4a83d); background: rgba(244, 168, 61, .12); }
.cosm-prev-thumb.on .cosm-prev-thumb-kind { color: var(--brand, #f4a83d); }

.cosm-prev-cap { font-size: 13px; color: var(--text-muted, #949ba4); }
.cosm-prev-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.cosm-prev-foot-mine {
  border-top: 1px solid var(--bg-modifier-accent, var(--ln-edge2, #3f4147));
  padding-top: 8px;
}
.cosm-prev-foot-lab {
  font-size: 12px;
  color: var(--text-muted, #949ba4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- правая колонка: живой мок ---- */
.cosm-prev-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Мок держим в реальных пропорциях: растянутая на всю колонку карточка профиля
   и строка участника на 500px выглядели бы не так, как в самом приложении. */
.cosm-prev-mock { align-self: flex-start; width: 100%; }
.cosm-prev-mock-lab {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted, #949ba4);
}

/* мок карточки профиля — рамка аватара и эффект профиля */
.cosm-mock-card {
  position: relative;
  max-width: 348px;
  min-height: 246px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-secondary, var(--sf-panel, #2b2d31));
  border: 1px solid var(--bg-modifier-accent, var(--ln-edge2, #3f4147));
}
.cosm-mock-banner { height: 88px; background-size: cover; background-position: center; }
.cosm-mock-body {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.cosm-mock-av { margin: -34px 0 8px; overflow: visible; }
.cosm-mock-name { font-size: 18px; font-weight: 700; color: var(--header-primary, #f2f3f5); }
.cosm-mock-tag { font-size: 13px; color: var(--text-muted, #949ba4); }
.cosm-mock-btn {
  margin-top: 12px;
  padding: 7px 14px;
  border-radius: 10px;
  background: var(--brand, #f4a83d);
  color: #1a1206;
  font-size: 13px;
  font-weight: 600;
  cursor: default;
  user-select: none;
}

/* мок списка участников — неймплейт ложится ПОД имя, соседи-заглушки */
.cosm-mock-members {
  max-width: 300px;
  padding: 8px;
  border-radius: 16px;
  background: var(--bg-secondary, var(--sf-panel, #2b2d31));
  border: 1px solid var(--bg-modifier-accent, var(--ln-edge2, #3f4147));
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cosm-mock-members .member { cursor: default; }
.cosm-mock-stub { opacity: .5; }
.cosm-mock-stub-av {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
}
.cosm-mock-stub-bar {
  display: block;
  width: 96px;
  height: 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .13);
}

/* мок строки чата — значок рядом с именем */
.cosm-mock-chat {
  max-width: 460px;
  padding: 12px;
  border-radius: 16px;
  background: var(--bg-chat, #171718);
  border: 1px solid var(--bg-modifier-accent, var(--ln-edge2, #3f4147));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cosm-mock-msg { display: flex; align-items: flex-start; gap: 12px; }
.cosm-mock-msg-body { min-width: 0; }
.cosm-mock-msg-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cosm-mock-badge { width: 20px; height: 20px; object-fit: contain; }
.cosm-mock-time { font-size: 11px; color: var(--text-muted, #949ba4); }
.cosm-mock-msg-text { margin-top: 2px; font-size: 14px; color: var(--text, #dbdee1); }
.cosm-mock-note { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* светлая тема */
body.theme-light .cosm-prev-hero,
body.theme-light .cosm-prev-thumb { background: rgba(0, 0, 0, .06); }
body.theme-light .cosm-mock-card,
body.theme-light .cosm-mock-members,
body.theme-light .cosm-mock-chat { background: #fff; border-color: #e0e1e4; }
body.theme-light .cosm-prev-name,
body.theme-light .cosm-mock-name { color: #313338; }
body.theme-light .cosm-mock-stub-av,
body.theme-light .cosm-mock-stub-bar { background: rgba(0, 0, 0, .12); }
body.theme-light .cosm-mock-msg-text { color: #313338; }

/* Фокус на аватарной плитке (без видео): крупная ава по центру, не «чёрный кадр» */
.vgrid.has-focus .vtile.focus:not(:has(video)) {
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05), transparent 70%), var(--bg-chat, #171718);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vgrid.has-focus .vtile.focus:not(:has(video)) .avatar {
  width: 128px;
  height: 128px;
  font-size: 44px;
}

/* Магазин как страница в ЛС (та же вёрстка, что была в настройках) */
.shop-page .shop-page-panel { padding: 20px 24px 40px; max-width: 1100px; margin: 0 auto; overflow-y: auto; height: 100%; }

/* =========================================================================
 * Тема «Чёрный лак» (onyx) — фирменный премиальный чёрный CAMP.
 *
 * Идея владельца: «новый мерседес, и в нём видно отражение».
 *   1. Глубокий чёрный, а не серый — слои идут едва заметным шагом.
 *   2. Лаковый блик — очень слабый вертикальный градиент сверху вниз
 *      в чистый чёрный (отражение неба на капоте, а не подсветка).
 *   3. Хромированная кромка — световой кант 1px сверху и почти невидимая
 *      тёмная линия снизу (фаска), на наведении кант ярче.
 *   4. Строгость — чёрный, белый текст, приглушённый серый; оранжевый
 *      только как подсветка приборов.
 *   5. Тени мягкие и широкие.
 *
 * Палитра живёт в app.js (UI_THEME_ONYX_VARS) — здесь только свет.
 * ========================================================================= */

body.theme-onyx,
html.theme-onyx {
  /* Лак: сверху едва светлее, вниз — в чистый чёрный. Без резких переходов. */
  --lacquer: linear-gradient(
    180deg,
    rgba(255, 255, 255, .042) 0%,
    rgba(255, 255, 255, .024) 16%,
    rgba(255, 255, 255, .012) 36%,
    rgba(255, 255, 255, .005) 60%,
    rgba(255, 255, 255, .001) 84%,
    rgba(255, 255, 255, 0) 100%
  );
  /* Блик на карточке/модалке короче — поверхность меньше */
  --lacquer-card: linear-gradient(
    180deg,
    rgba(255, 255, 255, .050) 0%,
    rgba(255, 255, 255, .022) 30%,
    rgba(255, 255, 255, .007) 62%,
    rgba(255, 255, 255, .001) 86%,
    rgba(255, 255, 255, 0) 100%
  );
  /* Шапка — самый заметный блик: она узкая, ей нужен весь градиент */
  --lacquer-head: linear-gradient(
    180deg,
    rgba(255, 255, 255, .062) 0%,
    rgba(255, 255, 255, .026) 42%,
    rgba(255, 255, 255, .008) 74%,
    rgba(255, 255, 255, 0) 100%
  );
  /* Фаска: световой кант сверху + почти невидимая тёмная линия снизу */
  --bevel: inset 0 1px 0 rgba(255, 255, 255, .065), inset 0 -1px 0 rgba(0, 0, 0, .55);
  --bevel-hi: inset 0 1px 0 rgba(255, 255, 255, .11), inset 0 -1px 0 rgba(0, 0, 0, .55);
  --bevel-edge: inset 0 0 0 1px rgba(255, 255, 255, .045);
  /* Тени — мягкие и широкие */
  --lift: 0 8px 24px rgba(0, 0, 0, .55);
  --lift-lg: 0 24px 64px rgba(0, 0, 0, .72);
}

/* --- 1. Глубокий чёрный: убираем «серый лист» под приложением ------------ */
body.theme-onyx,
body.theme-onyx #app,
body.theme-onyx .shell,
body.theme-onyx .auth { background-color: var(--bg-app); }

/* Хардкоженная дискордовская панель участников → наш слой сайдбара */
body.theme-onyx .members,
body.theme-onyx [data-members-panel] { background-color: var(--bg-sidebar); }

/* --- 2. Лаковый блик на крупных поверхностях ----------------------------- */
body.theme-onyx .rail,
body.theme-onyx .sidebar,
body.theme-onyx .members,
body.theme-onyx [data-members-panel],
body.theme-onyx .main,
body.theme-onyx .friends-page,
body.theme-onyx .friends-main,
body.theme-onyx .friends-activity,
body.theme-onyx .search-results,
body.theme-onyx .shell-bottom,
body.theme-onyx .boost-lolka,
body.theme-onyx .boost-lolka-main,
body.theme-onyx .boost-guild-page,
body.theme-onyx .shop-page {
  background-image: var(--lacquer);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 340px;
  /* scroll (по умолчанию), а не local: отражение держится у верха панели
     и не уезжает вместе с содержимым при прокрутке */
  background-attachment: scroll;
}

/* Модалки и панели настроек — свой, более короткий блик */
body.theme-onyx .modal,
body.theme-onyx .modal-nav,
body.theme-onyx .modal-panel,
body.theme-onyx .modal-backdrop.fullscreen .modal,
body.theme-onyx .modal-backdrop.fullscreen .settings-main,
body.theme-onyx .modal-backdrop.fullscreen .settings-content,
body.theme-onyx .settings-main,
body.theme-onyx .user-popout,
body.theme-onyx .ctx-menu {
  background-image: var(--lacquer-card);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 220px;
}

/* Шапки — самый читаемый блик + фаска под ним */
body.theme-onyx .main-head,
body.theme-onyx .sidebar-head,
body.theme-onyx .modal-panel > header,
body.theme-onyx .settings-panel-header,
body.theme-onyx .modal-backdrop.fullscreen .settings-main > header.settings-panel-header {
  background-image: var(--lacquer-head);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 0 rgba(0, 0, 0, .75);
}
/* Ховер шапки сайдбара не должен съедать блик */
body.theme-onyx .sidebar-head:hover { background-color: var(--bg-hover); }

/* --- 3. Хромированная кромка на карточках, поповерах, модалках ----------- */
body.theme-onyx .modal,
body.theme-onyx .user-popout,
body.theme-onyx .ctx-menu,
body.theme-onyx .appearance-card,
body.theme-onyx .adr-card,
body.theme-onyx .boost-panel,
body.theme-onyx .boost-lolka-card,
body.theme-onyx .boost-lvl-card,
body.theme-onyx .boost-extra-card,
body.theme-onyx .shop-decor-card,
body.theme-onyx .composer,
body.theme-onyx .friends-activity {
  box-shadow: var(--bevel), var(--lift);
}
body.theme-onyx .modal,
body.theme-onyx .modal-backdrop.fullscreen .modal { box-shadow: var(--bevel), var(--lift-lg); }

body.theme-onyx .appearance-card:hover,
body.theme-onyx .adr-card:hover,
body.theme-onyx .boost-lolka-card:hover,
body.theme-onyx .boost-lvl-card:hover,
body.theme-onyx .boost-extra-card:hover,
body.theme-onyx .shop-decor-card:hover,
body.theme-onyx .composer:focus-within { box-shadow: var(--bevel-hi), var(--lift); }

/* Кант вокруг карточек-кнопок: 1px света вместо серой рамки */
body.theme-onyx .appearance-card,
body.theme-onyx .adr-card,
body.theme-onyx .boost-lolka-card,
body.theme-onyx .boost-lvl-card,
body.theme-onyx .boost-extra-card,
body.theme-onyx .shop-decor-card { border-color: rgba(255, 255, 255, .07); }
body.theme-onyx .appearance-card:hover,
body.theme-onyx .adr-card:hover,
body.theme-onyx .boost-lolka-card:hover,
body.theme-onyx .boost-lvl-card:hover,
body.theme-onyx .boost-extra-card:hover,
body.theme-onyx .shop-decor-card:hover { border-color: rgba(255, 255, 255, .12); }
/* Выбранная карточка — тонкая оранжевая подсветка приборов, без заливки */
body.theme-onyx .appearance-card.on {
  border-color: var(--accent-brand);
  box-shadow: var(--bevel), 0 0 0 1px rgba(255, 106, 26, .30), var(--lift);
}

/* Разделители между слоями — фаска, а не серая линия */
body.theme-onyx .rail,
body.theme-onyx .sidebar,
body.theme-onyx .members,
body.theme-onyx [data-members-panel] { border-right: 0; }
body.theme-onyx .sidebar { box-shadow: inset -1px 0 0 rgba(0, 0, 0, .75), inset 1px 0 0 rgba(255, 255, 255, .035); }
body.theme-onyx .members,
body.theme-onyx [data-members-panel] { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .05); }
body.theme-onyx .rail { box-shadow: inset -1px 0 0 rgba(0, 0, 0, .7); }
/* Стык «сайдбар | чат»: тёмная линия и сразу за ней световой кант — фаска */
body.theme-onyx .main,
body.theme-onyx .search-results { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .05); }
body.theme-onyx .shell-bottom {
  border-top: 0;
  box-shadow: none; /* подложки-полосы больше нет — и тени под неё тоже */
  /* Групповое правило лака выше красило сплошную полосу под рейл+сайдбар (та самая
   * «подложка»). Здесь — продолжение двух колонок, тонированное хвостовым стопом лака. */
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0 100%), linear-gradient(90deg, var(--bg-rail) 0 var(--rail-w), var(--bg-sidebar) var(--rail-w) 100%);
}

/* Поля ввода утоплены в лак: тёмная фаска сверху, световая снизу */
body.theme-onyx .composer,
body.theme-onyx input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
body.theme-onyx textarea,
body.theme-onyx select {
  background-color: var(--bg-input);
  border-color: rgba(255, 255, 255, .06);
}
body.theme-onyx input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus,
body.theme-onyx textarea:focus,
body.theme-onyx select:focus { border-color: rgba(255, 255, 255, .14); }

/* --- 4. Строгость: неактивные иконки и разделители не тонут в чёрном ----- */
body.theme-onyx .settings-sec { border-bottom-color: rgba(255, 255, 255, .055); }
body.theme-onyx .ctx-sep { background: rgba(255, 255, 255, .07); }
body.theme-onyx .chan { color: var(--text-muted); }
body.theme-onyx .chan:hover { background: var(--bg-hover); color: var(--text-normal); }
body.theme-onyx .chan.on { background: var(--bg-active); color: var(--text); }
body.theme-onyx .chan.on { box-shadow: var(--bevel); }
body.theme-onyx .member:hover,
body.theme-onyx .voice-user:hover { background: var(--bg-hover); }

/*
 * Кольцо статуса «вырезает» точку из своей поверхности — значит оно
 * обязано совпасть с фоном под ней, иначе на чёрном получится серый ореол.
 * (Эти значения задаются как --dot-ring и в базе захардкожены.)
 */
body.theme-onyx .status-dot { --dot-ring: var(--bg-sidebar); }
body.theme-onyx .member .status-dot { --dot-ring: var(--bg-sidebar); }
body.theme-onyx .member:hover .status-dot { --dot-ring: var(--bg-hover); }
body.theme-onyx .user-popout .avatar-wrap .status-dot { --dot-ring: var(--bg-floating); }
body.theme-onyx .userpanel-av .status-dot { --dot-ring: var(--bg-user); }
body.theme-onyx .voice-user .status-dot { --dot-ring: var(--bg-sidebar); }
body.theme-onyx .voice-user:hover .status-dot { --dot-ring: var(--bg-hover); }
body.theme-onyx .msg .status-dot,
body.theme-onyx .messages .status-dot { --dot-ring: var(--bg-chat); }

/*
 * Единственное место, где --brand падает на «дискордовский» синий:
 * полоска загрузки в звуковой панели. На чёрном лаке она обязана быть
 * нашей подсветкой приборов, а не чужим цветом.
 */
body.theme-onyx .sb-up-wave.is-loading::after {
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* Незалитая часть громкости — тоже кромка, а не серая полоса */
body.theme-onyx .ctx-vol input[type="range"],
body.theme-onyx .vtile-stream-vol input[type="range"] {
  --vol-fill: linear-gradient(
    to right,
    var(--accent-brand) 0 var(--vol, 50%),
    rgba(255, 255, 255, .10) var(--vol, 50%) 100%
  );
}

/* Гайд новичка — плавающая карточка: тот же лак и фаска, а не серый блок */
body.theme-onyx .camp-guide {
  background-color: var(--bg-floating);
  background-image: var(--lacquer-card);
  background-repeat: no-repeat;
  background-size: 100% 170px;
  border-color: rgba(255, 255, 255, .075);
  box-shadow: var(--bevel), var(--lift-lg);
}
body.theme-onyx .camp-guide .cg-back,
body.theme-onyx .camp-guide .cg-retry { box-shadow: var(--bevel); }

/* --- 5. Скроллбары: хром на чёрном, а не «дискордовский» серый ----------- */
body.theme-onyx * { scrollbar-color: #212127 transparent; }
body.theme-onyx ::-webkit-scrollbar-thumb { background: #212127; }
body.theme-onyx ::-webkit-scrollbar-thumb:hover { background: #2f2f37; }

/* --- Превью темы в настройках (реальная палитра «Чёрного лака») ---------- */
.theme-preview-onyx {
  background: #0a0a0b;
  border-color: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
.theme-preview-onyx .tp-rail {
  background: linear-gradient(180deg, #1b1b1f 0%, #0e0e10 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
}
.theme-preview-onyx .tp-side {
  background: linear-gradient(180deg, #232329 0%, #111113 68%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.theme-preview-onyx .tp-main {
  background: linear-gradient(180deg, #2a2a31 0%, #101012 46%, #0a0a0b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .05);
}

/* ---- Реакции: ссылка «и ещё N человек» в подсказке + окно «Реакции» ---- */
.reaction-tip { pointer-events: auto; }
.reaction-tip-more { color: var(--accent, #e9642e); font-weight: 600; text-decoration: none; }
.reaction-tip-more:hover { text-decoration: underline; }
.modal.rxm { width: min(560px, 94vw); padding: 0; overflow: hidden; }
.modal.rxm .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line, #1e1f22); }
.modal.rxm .modal-head h2 { margin: 0; font-size: 18px; }
.rxm-body { display: grid; grid-template-columns: 96px 1fr; min-height: 260px; max-height: 60vh; }
.rxm-left { display: flex; flex-direction: column; gap: 4px; padding: 8px; overflow-y: auto; border-right: 1px solid var(--line, #1e1f22); background: var(--bg-sidebar, #232428); }
.rxm-chip { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 12px; background: transparent; color: var(--text-muted, #b5bac1); cursor: pointer; font: inherit; }
.rxm-chip:hover { background: var(--bg-hover, #313338); color: var(--text, #dbdee1); }
.rxm-chip.on { background: var(--bg-hover, #404249); color: var(--text, #fff); }
.rxm-ico { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.rxm-ico-emoji { display: grid; place-items: center; font-size: 18px; line-height: 1; }
.rxm-right { overflow-y: auto; padding: 8px 6px; }
.rxm-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.rxm-row:hover { background: var(--bg-hover, #313338); }
.rxm-who { min-width: 0; }
.rxm-name { font-weight: 600; color: var(--text, #f2f3f5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rxm-handle { font-size: 12px; color: var(--text-muted, #949ba4); }

/* ---- Ресайз панели каналов: ручка на правой кромке .sidebar ---- */
.sidebar { position: relative; }
.side-resizer { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 5; }
.side-resizer-pill { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 14px; height: 44px; border-radius: 12px; background: var(--bg-hover, #404249); color: var(--text, #dbdee1); display: grid; place-items: center; font-size: 9px; letter-spacing: -1px; opacity: 0; transition: opacity .12s; pointer-events: none; user-select: none; }
.side-resizer:hover .side-resizer-pill, .side-resizer.dragging .side-resizer-pill { opacity: 1; }
.side-resizer:hover::before, .side-resizer.dragging::before { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: var(--accent, #e9642e); opacity: .6; }
body.side-resizing, body.side-resizing * { cursor: col-resize !important; user-select: none !important; }
@media (max-width: 900px) { .side-resizer { display: none; } }

/* ===== Низ без шва (04.09.2026) ===== */
/* Алекс: «главная панель — отдельный виджет ПОВЕРХ сообщества, а полоса
 * (граница рейл|сайдбар) проходит ЗА виджетом, а не по нему».
 * Рейл и сайдбар занимают обе строки сетки и лежат ПОД карточками до самого
 * низа — их граница тянется на всю высоту окна. Полоса .shell-bottom ничего
 * не красит; карточки (.voice-conn-stack, .userpanel) — непрозрачные виджеты
 * от левого края (как у Лолки), с заливкой в стиле темы, но отличимой от фона.
 * Список каналов не прячется под карточками: отступ снизу = высоте полосы
 * (--shell-bottom-h выставляет app.js через ResizeObserver).
 * Мобильная раскладка (.mobile-ui) живёт по своим правилам и не трогается. */
.shell:not(.mobile-ui) > .rail {
  grid-row: 1 / -1;
  grid-column: rail-start / rail-end;
  padding-bottom: calc(12px + var(--shell-bottom-h, 0px));
}
.shell:not(.mobile-ui) > .sidebar {
  grid-row: 1 / -1;
  grid-column: side-start / side-end;
  padding-bottom: var(--shell-bottom-h, 0px);
  box-sizing: border-box;
}
.shell:not(.mobile-ui) > .shell-bottom {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-top: 0 !important;
  padding-left: 0; /* виджет от самого левого края */
}
/* Виджет: цвет темы, но не фон. Тёмные темы — чуть светлее сайдбара, светлая —
 * чуть темнее (примесь цвета текста); onyx — лаковая карточка. Непрозрачный,
 * иначе полоса «просвечивала» бы сквозь него. */
.shell:not(.mobile-ui) > .shell-bottom .voice-conn-stack,
.shell:not(.mobile-ui) > .shell-bottom .userpanel {
  background: color-mix(in srgb, var(--text, #fff) 8%, var(--bg-sidebar, #141416));
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 4px 14px rgba(0, 0, 0, .28);
}
body.theme-onyx .shell:not(.mobile-ui) > .shell-bottom .voice-conn-stack,
body.theme-onyx .shell:not(.mobile-ui) > .shell-bottom .userpanel {
  background: var(--lacquer-card, color-mix(in srgb, #fff 8%, var(--bg-sidebar, #141416)));
  background-color: color-mix(in srgb, #fff 6%, var(--bg-sidebar, #111113));
}
body.theme-khokhloma .shell:not(.mobile-ui) > .shell-bottom .voice-conn-stack,
body.theme-gzhel .shell:not(.mobile-ui) > .shell-bottom .voice-conn-stack,
body.theme-polkhov .shell:not(.mobile-ui) > .shell-bottom .voice-conn-stack,
body.theme-gorodets .shell:not(.mobile-ui) > .shell-bottom .voice-conn-stack,
body.theme-mezen .shell:not(.mobile-ui) > .shell-bottom .voice-conn-stack,
body.theme-vologda .shell:not(.mobile-ui) > .shell-bottom .voice-conn-stack,
body.theme-khokhloma .shell:not(.mobile-ui) > .shell-bottom .userpanel,
body.theme-gzhel .shell:not(.mobile-ui) > .shell-bottom .userpanel,
body.theme-polkhov .shell:not(.mobile-ui) > .shell-bottom .userpanel,
body.theme-gorodets .shell:not(.mobile-ui) > .shell-bottom .userpanel,
body.theme-mezen .shell:not(.mobile-ui) > .shell-bottom .userpanel,
body.theme-vologda .shell:not(.mobile-ui) > .shell-bottom .userpanel {
  /* народные темы: сайдбар — стекло над обоями; виджет — то же стекло, но плотнее */
  background: color-mix(in srgb, var(--folk-text, #fff) 12%, var(--bg-sidebar, #141416)) !important;
}

/* ===== Демка окна: «Окно свёрнуто» (04.09.2026) ===== */
/* Блюр поверх последнего кадра + надпись; лежит сразу после <video>, z-index 0 —
 * HUD/кнопки, добавленные позже, остаются сверху и кликабельны (pointer-events: none). */
.stream-veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  background: rgba(10, 10, 12, .45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
}
.stream-veil[hidden] { display: none !important; }
.stream-own-pip-vid-wrap .stream-veil { font-size: 12px; }
/* превью-плитка: видео там z-index 1, HUD 3, кнопка «Смотреть» 4 — плашка между видео и HUD */
.vtile.stream-preview .stream-veil { z-index: 2; }
.stream-own-pip-fs .stream-veil { z-index: 1; }

/* ===== Голос: тихая подсказка и честное состояние звука (04.09.2026) ===== */
/* «Микрофон выключен — тебя не слышно», «звук не уходит». Строка в панели
 * голоса вместо всплывашки: видно тому, кто говорит, и никому не мешает. */
.vc-hint {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
  color: #ffb27a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vc-hint[hidden] { display: none !important; }
.voice-conn.vc-audio-broken .vc-hint { color: #ff8a6a; }
.voice-conn.vc-audio-broken [data-vc-link-text] { color: #ff8a6a; }
body.theme-light .vc-hint { color: #b4560c; }
body.theme-light .voice-conn.vc-audio-broken .vc-hint,
body.theme-light .voice-conn.vc-audio-broken [data-vc-link-text] { color: #c0392b; }

/* Каталог активностей — окно по центру, как в Discord (Алекс, 06.09.2026) */
.act-launch-backdrop { position: fixed; inset: 0; z-index: 9300; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); }
.act-launch { width: min(440px, calc(100vw - 32px)); max-height: min(82vh, 720px); overflow: auto; background: var(--bg-mod, #111214); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.5); }
.act-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: var(--sf-deep, #1e1f22); color: rgba(255,255,255,.55); }
.act-search:focus-within { border-color: #ff6a1a; }
.act-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: #f2f3f5; font: inherit; }
.act-sec h4 { margin: 16px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,.7); }
.act-recent { display: flex; gap: 8px; flex-wrap: wrap; }
.act-recent-btn { position: relative; width: 96px; height: 54px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: var(--sf-panel, #2b2d31); padding: 0; cursor: pointer; overflow: hidden; }
.act-recent-btn:hover { border-color: #ff6a1a; }
.act-recent-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: 11px; font-weight: 700; color: #fff; text-align: left; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* карточка активности CAMP в профиле */
.pop-camp-act .pop-act-ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 8px; background: rgba(255,255,255,.08); font-size: 22px; flex: 0 0 auto; }
.pop-camp-act img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.pop-act-size { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 999px;
  background: var(--accent, #ff6a1a); color: #fff; font-size: 11px; font-weight: 700; }

/* число игроков на странице игры, превью в шапке и переключатель режима */
.act-page-players { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; vertical-align: middle;
  background: rgba(255,255,255,.10); color: var(--muted, #b5bac1); font-size: 11px; font-weight: 700; }
.act-page-hero { position: relative; overflow: hidden; }
.act-page-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.act-modes { display: flex; gap: 6px; margin: 0 0 10px; }
.act-mode { flex: 1; padding: 8px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--muted, #b5bac1); font: inherit; font-weight: 600; font-size: 13px; }
.act-mode:hover { background: rgba(255,255,255,.06); color: #f2f3f5; }
.act-mode.on { background: var(--accent, #ff6a1a); border-color: transparent; color: #fff; }

/* метка числа игроков и видео-превью на карточке активности */
.act-card { position: relative; }
.act-card-players { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 3px 8px; border-radius: 999px;
  background: rgba(0,0,0,.62); color: #f2f3f5; font-size: 11px; font-weight: 700; line-height: 1.4; pointer-events: none; }
.act-card-video { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover;
  opacity: 0; transition: opacity .18s; pointer-events: none; }
.act-card:hover .act-card-video { opacity: 1; }
.act-card { display: flex; flex-direction: column; padding: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; background: var(--sf-panel, #2b2d31); color: #f2f3f5; cursor: pointer; text-align: left; transition: transform .12s, border-color .12s; }
.act-card:hover { transform: translateY(-2px); border-color: #ff6a1a; }
.act-card-cover { display: grid; place-items: center; aspect-ratio: 16 / 9; width: 100%; }
.act-card-cover i { font-style: normal; font-size: 44px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.act-card-foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.act-card-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--sf-deep, #1e1f22); font-size: 15px; flex-shrink: 0; }
.act-card-text { min-width: 0; display: flex; flex-direction: column; }
.act-card-text b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-card-text small { font-size: 11px; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .act-grid { grid-template-columns: 1fr; } }

/* Лобби Fruit Ninja: до четырёх игроков, цвет слота = цвет лезвия в игре */
.fruit-lobby { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 6px 0 14px; pointer-events: auto; }
.fruit-lobby-slot { width: 118px; padding: 12px 8px; border-radius: 14px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12); text-align: center; color: #f2f3f5; }
.fruit-lobby-slot.free { border-style: dashed; color: rgba(255,255,255,.45); display: grid; place-items: center; font-size: 13px; min-height: 96px; }
.fruit-lobby-ava { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 8px; display: grid; place-items: center; font-weight: 800; font-size: 20px; color: #1a0f08; }
.fruit-lobby-slot b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fruit-lobby-slot small { display: block; font-size: 11px; color: #ff6a1a; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.fruit-mode-btn.on { border-color: #ff6a1a; box-shadow: 0 0 0 1px #ff6a1a inset; }

/* Активность в ЛС: сцена над перепиской */
.dm-act-stage { position: relative; flex: 0 0 auto; height: min(56vh, 520px); margin: 8px 12px 0; display: flex; }
.dm-act-stage .camp-act-stage.camp-act-park { min-height: 0; flex: 1; }
@media (max-width: 720px) { .dm-act-stage { height: 48vh; margin: 6px 6px 0; } }

/* Лобби активности: контент бывает выше сцены (режимы + катка + кнопка) — прокрутка вместо обрезки,
 * и запас снизу, чтобы «НАЧАТЬ» не уезжала под нижнюю панель «Выйти/✕» (lobby: прокрутка) */
.camp-act-overlay.lobby { justify-content: flex-start; overflow-y: auto; padding: 18px 24px 84px; pointer-events: auto; scrollbar-width: thin; }
.camp-act-overlay.lobby > * { flex-shrink: 0; }

/* iframe-игры (Fruit Ninja, Прыг-лис, Wordle): вместо парка — тёмная сцена с размытой обложкой игры */
.camp-act-stage.camp-act-frame { background: #15171a; }
.camp-act-stage.camp-act-frame .camp-act-canvas { background-size: cover; background-position: center; filter: blur(14px) brightness(.45); transform: scale(1.06); }
.camp-act-stage.camp-act-frame .camp-act-overlay.lobby { background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)); }

/* Страница игры, выбор друга, «одному», телефон, плитка (активности v2, 06.09.2026) */
.act-page { padding: 0; overflow: hidden; }
.act-page-back { position: absolute; z-index: 2; margin: 12px; padding: 6px 10px; border: 0; border-radius: 8px; background: rgba(0,0,0,.55); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.act-page-hero { position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; display: grid; place-items: center; }
.act-page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, var(--bg-mod, #111214) 100%); }
.act-page-ico { display: none; }
.act-page-body { padding: 0 16px 16px; }
.act-page-body h2 { margin: 6px 0 4px; font-size: 20px; }
.act-page-desc { margin: 0 0 12px; color: rgba(255,255,255,.7); font-size: 13px; line-height: 1.4; }
.act-page-btns { display: flex; gap: 8px; }
.act-btn { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: var(--sf-panel, #2b2d31); color: #f2f3f5; font: inherit; font-weight: 700; cursor: pointer; }
.act-btn.primary { background: #ff6a1a; border-color: #ff6a1a; color: #1a0f08; }
.act-btn.ghost { background: transparent; border-color: transparent; color: rgba(255,255,255,.55); font-weight: 600; }
.act-btn.small { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; border-color: #ff6a1a; }
.act-btn[disabled] { opacity: .6; cursor: not-allowed; }
.act-btn.primary[disabled] { background: #3a3c42; border-color: transparent; color: rgba(255,255,255,.5); }
.act-solo-btn { width: 100%; margin-top: 6px; }
.act-hint { margin: 8px 0 0; font-size: 12px; color: rgba(255,255,255,.55); text-align: center; }
.act-list { display: flex; flex-direction: column; gap: 6px; }
.act-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--sf-deep, #1e1f22); color: #f2f3f5; text-align: left; border: 1px solid transparent; }
button.act-row { cursor: pointer; font: inherit; width: 100%; }
button.act-row:hover { border-color: #ff6a1a; }
.act-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.act-row-text b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-row-text small { font-size: 11px; color: rgba(255,255,255,.55); }
.act-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #1a0f08; flex-shrink: 0; }
.act-score { font-weight: 800; color: #ff6a1a; }
.act-muted { color: rgba(255,255,255,.5); font-size: 12px; }
.act-picker h3 { margin: 4px 0 10px; font-size: 16px; }
.act-picker .act-list { margin-top: 10px; max-height: 50vh; overflow: auto; }
/* сообщение-приглашение */
.msg.activity-invite .sys-body { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg.activity-invite.over .act-invite-play { opacity: .5; border-color: rgba(255,255,255,.2); }
/* строка игры под названием голосового канала */
.chan .chan-vc-game { color: #ff6a1a; font-weight: 600; }
/* плитка игры в сцене: отступы и рамка как у плитки демки */
.vstage > .camp-act-stage.camp-act-frame { margin: 0; border-radius: 16px; border: 2px solid rgba(255,255,255,.08); min-height: 0; } /* .vstage уже даёт 16px */
.fruit-layer { border-radius: 16px; }
/* «одному»: панель поверх содержимого там, где я сейчас */
.priv-act-panel { position: fixed; z-index: 39; display: flex; background: rgba(0,0,0,.35); } /* ниже слоя игры (40) */
.priv-act-panel > .camp-act-stage { flex: 1; margin: 16px; border-radius: 16px; min-height: 0; border: 2px solid rgba(255,255,255,.08); }
/* телефон: игра на весь экран с полоской сверху */
.fruit-layer.mobile { border-radius: 0; display: flex; flex-direction: column; z-index: 60; }
.fruit-layer.mobile .fruit-frame { position: relative; flex: 1; }
.fruit-mobile-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #15171a; color: #f2f3f5; }
.fruit-mobile-exit { border: 0; background: rgba(255,255,255,.08); color: #fff; padding: 6px 10px; border-radius: 8px; font: inherit; font-weight: 700; }
.fruit-mobile-title { flex: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fruit-mobile-people { display: flex; gap: 4px; }