/* =====================================================================
   AudioHub — тёмная тема «Полночь»
   ===================================================================== */
:root {
  --bg: #050506;          /* основной фон */
  --bg-rail: #000000;     /* полоса серверов */
  --bg-side: #0b0b0d;     /* боковые панели */
  --bg-panel: #0f0f12;    /* карточки, окна */
  --bg-input: #121215;    /* поля ввода */
  --bg-hover: #17171b;
  --bg-active: #1f1f25;
  --border: #1c1c21;
  --border-2: #2a2a31;
  --text: #f2f3f5;
  --text-2: #c9cad1;
  --muted: #8b8d96;
  --faint: #5d5f68;
  --accent: #ffffff;
  --accent-2: #d4d4d8;
  --brand: linear-gradient(135deg, #ffffff, #d4d4d8);
  --green: #23a55a;
  --red: #f23f43;
  --yellow: #f0b232;
  --r: 10px;
  --r-lg: 16px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --chat-font: 15px;
  --shadow: 0 12px 40px rgba(0, 0, 0, .55), 0 0 0 1px var(--border-2);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text); overflow: hidden;
  font: 15px/1.4 "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; user-select: none;
}
input, textarea, .msg-text, .pc-body p, .selectable { user-select: text; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--text-2); text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.grow { flex: 1; }
.ic.green, small.green, span.green, b.green { color: var(--green) !important; }
.ic.red { color: var(--red) !important; }
.ic { flex: none; display: block; }
kbd { background: var(--bg-active); border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font: 11px/16px inherit; color: var(--text-2); }
::selection { background: rgba(255, 255, 255, .45); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #222228; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #2e2e36; }
::-webkit-scrollbar-track { background: transparent; }
body.no-anim *, body.no-anim *::before, body.no-anim *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative;
  height: 38px; padding: 0 16px; border-radius: 8px; font-weight: 600; font-size: 14px; white-space: nowrap;
  background: var(--bg-active); color: var(--text); transition: background .15s, transform .12s var(--spring), filter .15s, box-shadow .2s;
}
.btn:hover { background: #2a2a31; }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--brand); background-size: 160% 160%; color: #fff; box-shadow: 0 4px 18px rgba(255, 255, 255, .25); animation: gradShift 6s ease infinite; }
.btn.primary:hover { filter: brightness(1.12); box-shadow: 0 6px 24px rgba(255, 255, 255, .4); }
.btn.success { background: var(--green); color: #fff; }
.btn.success:hover { filter: brightness(1.1); }
.btn.danger { background: var(--red); color: #fff; }
.btn.danger:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; border: 1px solid var(--border-2); }
.btn.ghost:hover { background: var(--bg-hover); border-color: #3a3a44; }
.btn.danger-ghost { background: transparent; color: #ff7b7e; border: 1px solid rgba(242, 63, 67, .35); }
.btn.danger-ghost:hover { background: rgba(242, 63, 67, .12); }
.btn.danger-text { color: #ff7b7e; }
.btn.link-btn { background: transparent; color: var(--text-2); }
.btn.link-btn:hover { text-decoration: underline; background: transparent; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn.big { height: 46px; font-size: 15px; }
.btn.wide { width: 100%; }
.btn.icon-only { width: 38px; padding: 0; }
.btn.loading { color: transparent !important; pointer-events: none; }
.btn.loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.btn small { opacity: .7; font-weight: 400; }
.link { color: var(--text-2); cursor: pointer; }
.link.disabled { color: var(--muted); pointer-events: none; }

@keyframes gradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ripple { from { transform: scale(1); opacity: .6; } to { transform: scale(2.2); opacity: 0; } }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes slideRight { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes slideLeft { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { from { background-position: -300px 0; } to { background-position: 300px 0; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); } 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); } }
@keyframes flash { from { background: rgba(255, 255, 255, .25); } to { background: transparent; } }

/* ---------- поля ---------- */
.field { display: block; margin: 0 0 16px; }
.field > span, .field-title { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--text-2); margin-bottom: 8px; }
.field > span b { color: var(--red); }
.field-title { margin-top: 20px; }
.field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), .field textarea, .copy-row input {
  display: block; width: 100%; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--border); outline: none;
  background: var(--bg-input); color: var(--text); font-size: 15px; transition: border-color .15s, box-shadow .2s, background .15s; resize: vertical;
}
.field input:focus, .field textarea:focus, .copy-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); background: var(--bg-hover); }
.input-prefix { display: flex; align-items: center; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; transition: border-color .15s, box-shadow .2s; }
.input-prefix:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.input-prefix i { font-style: normal; color: var(--muted); padding-left: 12px; display: flex; }
.field .input-prefix input { border: 0 !important; box-shadow: none !important; background: transparent !important; padding-left: 6px; }
.hint { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; transition: color .2s; }
.hint.ok { color: var(--green); } .hint.bad { color: #ff7b7e; } .hint.right { text-align: right; }
.form-error { color: #ff7b7e; font-size: 14px; min-height: 20px; margin: 4px 0 8px; }
.form-error.shake { animation: shake .45s; }
.select { position: relative; display: flex; align-items: center; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; transition: border-color .15s; }
.select:hover { border-color: var(--border-2); }
.select > .ic:first-child { margin-left: 12px; color: var(--muted); }
.select > .ic:last-child { position: absolute; right: 12px; pointer-events: none; color: var(--muted); }
.select select { appearance: none; flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; padding: 11px 36px 11px 10px; font-size: 14px; cursor: pointer; }
.select select option { background: var(--bg-panel); }

/* переключатель */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch i { position: absolute; inset: 0; background: #3a3a43; border-radius: 24px; transition: background .2s; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .25s var(--spring); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { transform: translateX(20px); }

/* ползунок */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--accent) var(--p, 50%), #2c2c34 var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: transform .15s var(--spring); }
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.18); }
.range-row { display: flex; align-items: center; gap: 12px; }
.range-row span { width: 46px; text-align: right; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---------- аватары и статусы ---------- */
.av { position: relative; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; font-weight: 700; transition: box-shadow .15s; }
.av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.av > span { line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.av.speaking { box-shadow: 0 0 0 2px var(--bg-side), 0 0 0 4px var(--green); }
.av .st { position: absolute; right: -2px; bottom: -2px; width: var(--s); height: var(--s); border-radius: 50%; border: var(--b, 3px) solid var(--bg-side); background: #80848e; box-sizing: content-box; transform: translate(10%, 10%); transition: background .3s; }
.st-online { background: var(--green) !important; }
.st-idle { background: var(--yellow) !important; }
.st-dnd { background: var(--red) !important; }
.st-offline, .st-invisible { background: #80848e !important; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; }
.badge.pop { animation: popIn .35s var(--spring); }
.tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--bg-active); color: var(--text-2); display: inline-flex; gap: 4px; align-items: center; }

/* =====================================================================
   Экран загрузки и входа
   ===================================================================== */
.splash { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; background: var(--bg); z-index: 50; transition: opacity .4s; }
.splash.hidden { display: grid !important; opacity: 0; pointer-events: none; }
.splash-logo { width: 84px; height: 84px; animation: float 2.4s ease-in-out infinite; filter: drop-shadow(0 10px 30px rgba(255, 255, 255, .4)); }
.splash-bars { display: flex; gap: 5px; height: 26px; align-items: center; position: relative; }
.splash-bars i { width: 5px; height: 100%; border-radius: 3px; background: var(--brand); animation: eq 1s ease-in-out infinite; }
.splash-bars i:nth-child(2) { animation-delay: .1s; } .splash-bars i:nth-child(3) { animation-delay: .2s; }
.splash-bars i:nth-child(4) { animation-delay: .3s; } .splash-bars i:nth-child(5) { animation-delay: .4s; }
.splash-bars[data-msg]::after { content: attr(data-msg); position: absolute; top: 40px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--muted); font-size: 13px; }

.aurora { position: fixed; inset: 0; overflow: hidden; z-index: 0; opacity: 0; transition: opacity .6s; pointer-events: none; }
body.on-auth .aurora { opacity: 1; }
.aurora i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .32; animation: drift 18s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { background: #6d28d9; left: -15vmax; top: -20vmax; }
.aurora i:nth-child(2) { background: #0891b2; right: -20vmax; bottom: -25vmax; animation-delay: -6s; animation-duration: 22s; }
.aurora i:nth-child(3) { background: #be185d; left: 30vw; top: 40vh; width: 35vmax; height: 35vmax; opacity: .16; animation-delay: -12s; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(8vmax, 6vmax) scale(1.15); } }

.auth { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; z-index: 2; overflow-y: auto; }
.auth-card {
  width: 100%; max-width: 480px; padding: 32px; border-radius: var(--r-lg); position: relative;
  background: color-mix(in srgb, var(--bg-panel) 82%, transparent); backdrop-filter: blur(20px); border: 1px solid var(--border-2);
  box-shadow: 0 30px 80px rgba(0,0,0,.6); text-align: center;
}
.auth-card.swap { animation: scaleIn .35s var(--ease); }
.auth-card form { text-align: left; margin-top: 20px; }
.auth-card h1 { font-size: 24px; margin: 18px 0 6px; }
.auth-card .btn.big { width: 100%; margin-top: 8px; }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: .02em; }
.auth-logo { width: 44px; height: 44px; animation: float 3s ease-in-out infinite; filter: drop-shadow(0 6px 18px rgba(255, 255, 255, .45)); }
.auth .switch { all: unset; display: block; margin-top: 16px; font-size: 13px; color: var(--muted); }
.hl { color: var(--text); }
.steps { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.steps i { width: 36px; height: 4px; border-radius: 4px; background: var(--border-2); transition: background .4s; }
.steps i.on { background: var(--brand); }
.code-boxes { display: flex; gap: 8px; justify-content: space-between; }
.code-boxes input { width: 100% !important; height: 56px; text-align: center; font-size: 24px !important; font-weight: 700; padding: 0 !important; transition: transform .2s var(--spring), border-color .15s !important; }
.code-boxes input.filled { border-color: var(--accent) !important; animation: popIn .3s var(--spring); }
.code-boxes.bad input { border-color: var(--red) !important; animation: shake .4s; }

/* =====================================================================
   Раскладка
   ===================================================================== */
.app { position: fixed; inset: 0; display: flex; flex-direction: column; animation: fadeIn .4s; z-index: 1; }
.titlebar { height: 34px; flex: none; display: flex; align-items: center; justify-content: center; position: relative; background: var(--bg-rail); -webkit-app-region: drag; }
.tb-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.tb-title .ic { color: var(--muted); }
.tb-gicon { width: 18px; height: 18px; border-radius: 5px; overflow: hidden; display: grid; place-items: center; background: var(--bg-active); font-size: 8px; font-weight: 800; }
.tb-gicon img { width: 100%; height: 100%; object-fit: cover; }
.tb-actions { position: absolute; right: 10px; top: 0; height: 100%; display: flex; align-items: center; gap: 6px; -webkit-app-region: no-drag; }
.tb-download {
  display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 7px; font-size: 12px; font-weight: 700;
  color: #fff; background: var(--brand); background-size: 200% 200%; animation: gradShift 5s ease infinite; transition: transform .15s var(--spring), box-shadow .2s;
}
.tb-download:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255, 255, 255, .45); }
.tb-download .ic { transition: transform .3s var(--spring); }
.tb-download:hover .ic { transform: translateY(2px); }
.tb-download.pulse { animation: gradShift 5s ease infinite, glow 2s infinite; }

.layout { flex: 1; display: flex; min-height: 0; }
.rail { width: 72px; flex: none; background: var(--bg-rail); display: flex; flex-direction: column; align-items: center; padding: 4px 0 12px; overflow-y: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.side { width: 248px; flex: none; background: var(--bg-side); display: flex; flex-direction: column; border-top-left-radius: 12px; border: 1px solid var(--border); border-right: 0; border-bottom: 0; overflow: hidden; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); border-top: 1px solid var(--border); border-left: 1px solid var(--border); position: relative; }
.main.enter > * { animation: fadeIn .25s var(--ease); }
.aside { width: 260px; flex: none; background: var(--bg-side); border-left: 1px solid var(--border); border-top: 1px solid var(--border); overflow-y: auto; animation: slideLeft .3s var(--ease); }
.aside:has(.profile-panel) { width: 340px; }

/* ---------- полоса серверов ---------- */
.rail-item { position: relative; width: 72px; display: flex; justify-content: center; margin: 4px 0; flex: none; }
.rail-item .pill { position: absolute; left: 0; top: 50%; width: 4px; height: 0; margin-top: 0; border-radius: 0 4px 4px 0; background: #fff; transform: translateY(-50%); transition: height .25s var(--spring); }
.rail-item.unread .pill { height: 8px; }
.rail-item:hover .pill { height: 20px; }
.rail-item.active .pill { height: 40px; }
.rail-btn {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: var(--bg-panel); color: var(--text); font-weight: 700; transition: border-radius .25s var(--ease), background .2s, transform .15s var(--spring), color .2s;
}
.rail-btn img { width: 100%; height: 100%; object-fit: cover; }
.rail-btn .av { width: 48px !important; height: 48px !important; }
.rail-item:hover .rail-btn, .rail-item.active .rail-btn { border-radius: 16px; }
.rail-item:hover .rail-btn:not(.has-img):not(.home-btn) { background: var(--accent); color: #fff; }
.rail-item:active .rail-btn { transform: translateY(1px) scale(.95); }
.rail-item.active .rail-btn:not(.has-img):not(.home-btn) { background: var(--accent); color: #fff; }
.home-btn { background: var(--bg-hover); padding: 0; }
.home-btn img { width: 100%; height: 100%; transition: transform .3s var(--spring); }
.rail-item:hover .home-btn img { transform: scale(1.08) rotate(-4deg); }
.rail-btn.action { color: var(--green); background: var(--bg-panel); }
.rail-item:hover .rail-btn.action { background: var(--green) !important; color: #fff !important; }
.rail-item .badge { position: absolute; right: 10px; bottom: -2px; border: 3px solid var(--bg-rail); height: 22px; min-width: 22px; border-radius: 11px; }
.rail-voice { position: absolute; right: 12px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; border: 3px solid var(--bg-rail); box-sizing: content-box; animation: popIn .3s var(--spring); }
.rail-sep { width: 32px; height: 2px; border-radius: 1px; background: var(--border-2); margin: 4px 0; flex: none; }
.rail-guilds { display: contents; }
.rail-dm { animation: popIn .35s var(--spring); }

/* ---------- боковая панель ---------- */
.side-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.side-head { height: 48px; display: flex; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--border); flex: none; }
.search-btn { width: 100%; height: 30px; border-radius: 7px; background: var(--bg-input); border: 1px solid var(--border); color: var(--muted); font-size: 13px; text-align: left; padding: 0 10px; transition: border-color .15s, color .15s; }
.search-btn:hover { border-color: var(--border-2); color: var(--text-2); }
.side-scroll { flex: 1; overflow-y: auto; padding: 8px; scrollbar-width: thin; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 0 12px; height: 42px; border-radius: 8px; color: var(--muted); cursor: pointer; font-weight: 600; margin-bottom: 2px; transition: background .12s, color .12s; }
.nav-item:hover { background: var(--bg-hover); color: var(--text-2); text-decoration: none; }
.nav-item.active { background: var(--bg-active); color: var(--text); }
.nav-item .badge { margin-left: auto; }
.side-cat { display: flex; align-items: center; justify-content: space-between; padding: 18px 8px 6px 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); cursor: pointer; }
.side-cat:hover { color: var(--text-2); }
.side-cat > span { display: flex; align-items: center; gap: 2px; }
.side-cat .chev { transition: transform .2s var(--ease); }
.side-cat.collapsed .chev { transform: rotate(-90deg); }
.side-cat button { color: var(--muted); display: grid; place-items: center; border-radius: 4px; transition: color .15s, transform .2s var(--spring); }
.side-cat button:hover { color: var(--text); transform: rotate(90deg); }
.cat-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .25s var(--ease); }
.cat-body > * { min-height: 0; }
.side-cat.collapsed + .cat-body { display: none; }

.dm-item { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 8px; color: var(--muted); cursor: pointer; margin-bottom: 2px; position: relative; animation: slideRight .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms); transition: background .12s, color .12s; }
.dm-item:hover { background: var(--bg-hover); color: var(--text-2); }
.dm-item.active { background: var(--bg-active); color: var(--text); }
.dm-item.unread { color: var(--text); }
.dm-item.unread b { font-weight: 700; }
.dm-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dm-meta b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-meta small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; gap: 4px; align-items: center; }
.dm-close { opacity: 0; color: var(--muted); padding: 2px; border-radius: 4px; transition: opacity .12s; }
.dm-item:hover .dm-close { opacity: 1; }
.dm-close:hover { color: var(--text); }
.side-empty { padding: 20px 12px; text-align: center; color: var(--muted); font-size: 13px; }
.empty-art { display: flex; flex-direction: column; gap: 8px; margin: 0 auto 14px; width: 160px; }
.empty-art i { height: 34px; border-radius: 8px; background: linear-gradient(90deg, var(--bg-panel) 0, var(--bg-hover) 40%, var(--bg-panel) 80%); background-size: 600px 100%; animation: shimmer 2s linear infinite; }
.empty-art i:nth-child(2) { width: 80%; animation-delay: .2s; } .empty-art i:nth-child(3) { width: 60%; animation-delay: .4s; }

.guild-head { height: 48px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-weight: 700; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s; }
.guild-head:hover, .guild-head.open { background: var(--bg-hover); }
.guild-head .chev { transition: transform .25s var(--spring); }
.guild-head.open .chev { transform: rotate(180deg); }
.gh-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ch { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; border-radius: 6px; color: var(--muted); cursor: pointer; margin: 1px 0; position: relative; transition: background .12s, color .12s; }
.ch:hover { background: var(--bg-hover); color: var(--text-2); }
.ch.active { background: var(--bg-active); color: var(--text); }
.ch.unread { color: var(--text); font-weight: 600; }
.ch.unread::before { content: ""; position: absolute; left: -8px; width: 4px; height: 8px; border-radius: 0 4px 4px 0; background: #fff; animation: popIn .3s var(--spring); }
.ch-ic { color: var(--faint); }
.ch.active .ch-ic, .ch:hover .ch-ic { color: var(--muted); }
.ch-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-act { opacity: 0; color: var(--muted); display: grid; place-items: center; transition: opacity .12s, transform .3s var(--ease); }
.ch:hover .ch-act { opacity: 1; }
.ch-act:hover { color: var(--text); transform: rotate(60deg); }
.ch.voice.connected { color: var(--text); }
.ch.voice.connected .ch-ic { color: var(--green); }
.vc-members { padding: 2px 0 6px 30px; }
.vc-member { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 6px; color: var(--muted); font-size: 14px; cursor: pointer; animation: slideRight .25s var(--ease); transition: background .12s; }
.vc-member:hover { background: var(--bg-hover); color: var(--text-2); }
.vc-member > span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-icons { display: flex; gap: 3px; align-items: center; }
.live { background: var(--red); color: #fff; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 4px; letter-spacing: .03em; }

/* ---------- панель голосовой связи ---------- */
.voice-panel { flex: none; border-top: 1px solid var(--border); background: var(--bg-side); padding: 10px 8px 8px; animation: fadeUp .3s var(--ease); }
.vp-top { display: flex; align-items: center; gap: 6px; }
.vp-signal { width: 34px; height: 34px; border-radius: 8px; background: rgba(35, 165, 90, .12); display: grid; place-items: center; color: var(--green); flex: none; }
.vp-signal.q-connecting { color: var(--yellow); background: rgba(240, 178, 50, .12); animation: glow 1.5s infinite; }
.vp-signal.q-bad { color: var(--red); background: rgba(242, 63, 67, .12); }
.vp-signal .ic path { animation: none; }
.vp-signal.q-good .ic { animation: none; }
.vp-info { flex: 1; min-width: 0; cursor: pointer; }
.vp-info b { display: block; font-size: 13px; color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-info b.q-connecting { color: var(--yellow); } .vp-info b.q-bad { color: var(--red); }
.vp-info small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-info:hover small { text-decoration: underline; }
.vp-mini { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; color: var(--text-2); transition: background .12s, color .12s, transform .15s var(--spring); }
.vp-mini:hover { background: var(--bg-hover); color: var(--text); }
.vp-mini.on { color: var(--accent-2); }
.vp-mini.danger:hover { color: var(--red); }
.vp-mini:active { transform: scale(.9); }
.vp-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-top: 10px; }
.vp-btn { height: 34px; border-radius: 8px; background: var(--bg-panel); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-2); transition: background .15s, color .15s, transform .15s var(--spring), border-color .15s; }
.vp-btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-2); }
.vp-btn:active { transform: scale(.92); }
.vp-btn.on { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); color: #e4e4e7; }

/* ---------- панель пользователя ---------- */
.user-panel { flex: none; height: 56px; display: flex; align-items: center; gap: 2px; padding: 0 8px; background: var(--bg-side); border-top: 1px solid var(--border); }
.up-user { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; margin-left: -4px; border-radius: 8px; cursor: pointer; transition: background .12s; }
.up-user:hover { background: var(--bg-hover); }
.up-user .av .st { border-color: var(--border); }
.up-names { min-width: 0; line-height: 1.2; }
.up-names b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-names small { display: block; height: 16px; overflow: hidden; font-size: 12px; color: var(--muted); }
.up-roll { display: flex; flex-direction: column; transition: transform .3s var(--ease); }
.up-roll > span { display: block; height: 16px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-voice { color: var(--green); font-weight: 600; }
.up-user:hover .up-roll { transform: translateY(-16px); }
.up-btn { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; color: var(--text-2); flex: none; transition: background .12s, color .12s, transform .15s var(--spring); }
.up-btn:hover { background: var(--bg-hover); color: var(--text); }
.up-btn:active { transform: scale(.88); }
.up-btn.off { color: var(--red); background: rgba(242, 63, 67, .12); }
.up-btn.off .ic { animation: popIn .3s var(--spring); }
.up-btn.spin:hover .ic { transform: rotate(90deg); }
.up-btn.spin .ic { transition: transform .5s var(--ease); }

/* =====================================================================
   Основная область
   ===================================================================== */
.main-head { height: 48px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--border); }
.mh-title { display: flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
.mh-title.clickable { cursor: pointer; }
.mh-title .ic { color: var(--muted); }
.muted-ic { color: var(--faint) !important; }
.mh-sep { width: 1px; height: 24px; background: var(--border-2); margin: 0 6px; }
.hd-btn { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); transition: color .12s, background .12s, transform .15s var(--spring); }
.hd-btn:hover { color: var(--text); background: var(--bg-hover); }
.hd-btn.active { color: var(--text); }
.hd-btn:active { transform: scale(.9); }
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tab { height: 30px; padding: 0 12px; border-radius: 7px; color: var(--muted); font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; transition: background .12s, color .12s; white-space: nowrap; }
.tab:hover { background: var(--bg-hover); color: var(--text-2); }
.tab.active { background: var(--bg-active); color: var(--text); }
.tab.add { background: var(--green); color: #fff; }
.tab.add:hover { filter: brightness(1.1); background: var(--green); color: #fff; }
.tab.add.active { background: transparent; color: var(--green); }

/* ---------- друзья ---------- */
.friends { flex: 1; overflow-y: auto; padding: 16px 20px 20px 28px; }
.fr-search { display: flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; color: var(--muted); margin-bottom: 18px; transition: border-color .15s; }
.fr-search:focus-within { border-color: var(--accent); }
.fr-search input { flex: 1; background: transparent; border: 0; outline: 0; height: 36px; }
.fr-title { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: .02em; margin-bottom: 8px; }
.fr-row { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 10px; margin: 0 -10px; border-top: 1px solid var(--border); border-radius: 8px; cursor: pointer; animation: fadeUp .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); transition: background .12s; }
.fr-row:hover { background: var(--bg-hover); border-top-color: transparent; }
.fr-row:hover + .fr-row { border-top-color: transparent; }
.fr-row.removing { animation: fadeOut .25s forwards; }
@keyframes fadeOut { to { opacity: 0; transform: translateX(20px); } }
.fr-meta { flex: 1; min-width: 0; }
.fr-meta b { display: block; font-weight: 600; }
.fr-meta b .muted { font-weight: 400; font-size: 13px; opacity: 0; transition: opacity .15s; }
.fr-row:hover .fr-meta b .muted { opacity: 1; }
.fr-meta small { font-size: 13px; color: var(--muted); }
.fr-actions { display: flex; gap: 8px; }
.round-act { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-panel); display: grid; place-items: center; color: var(--text-2); transition: background .12s, color .12s, transform .2s var(--spring); }
.round-act:hover { color: var(--text); background: var(--bg-active); transform: scale(1.08); }
.round-act.ra-ok:hover { color: var(--green); }
.round-act.ra-no:hover { color: var(--red); }
.fr-empty, .empty-main { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; min-height: 60%; padding: 40px 20px; flex: 1; }
.fr-empty p { max-width: 380px; }
.float-art { position: relative; width: 130px; height: 130px; display: grid; place-items: center; color: var(--accent); }
.float-art > .ic { animation: float 3s ease-in-out infinite; position: relative; z-index: 1; filter: drop-shadow(0 8px 20px rgba(255, 255, 255, .5)); }
.float-art i { position: absolute; inset: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); animation: ripple 3s ease-out infinite; }
.float-art i:nth-child(3) { animation-delay: 1s; } .float-art i:nth-child(4) { animation-delay: 2s; }

.add-friend { max-width: 760px; }
.add-friend h2 { margin: 4px 0 6px; font-size: 18px; }
.af-form { display: flex; align-items: center; gap: 4px; margin-top: 16px; padding: 6px 6px 6px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; transition: border-color .2s, box-shadow .2s; }
.af-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }
.af-form.ok { border-color: var(--green); } .af-form.bad { border-color: var(--red); animation: shake .4s; }
.af-at { color: var(--muted); font-weight: 700; }
.af-form input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; height: 40px; font-size: 15px; }
.af-result { font-size: 14px; margin-top: 8px; min-height: 20px; }
.af-result.ok { color: var(--green); animation: fadeUp .3s; } .af-result.bad { color: #ff7b7e; }
.af-other { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.af-other h3 { font-size: 15px; margin: 0 0 12px; }
.af-card { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 16px; border-radius: 12px; background: var(--bg-panel); border: 1px solid var(--border); margin-bottom: 8px; transition: background .15s, border-color .15s, transform .2s var(--ease); }
.af-card:hover { background: var(--bg-hover); border-color: var(--border-2); transform: translateX(4px); }
.af-card > span:nth-child(2) { flex: 1; }
.af-card b { display: block; } .af-card small { color: var(--muted); font-size: 13px; }
.af-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; flex: none; }
.af-card > .ic:last-child { color: var(--muted); transition: transform .2s var(--spring); }
.af-card:hover > .ic:last-child { transform: translateX(3px); color: var(--text); }

/* ---------- чат ---------- */
.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 0 8px; font-size: var(--chat-font); }
.msg-loading { padding: 0 16px; }
.skel { display: flex; gap: 14px; padding: 10px 0; }
.skel > i { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.skel > div { flex: 1; }
.skel b { display: block; width: 140px; height: 12px; border-radius: 6px; margin: 4px 0 10px; }
.skel span { display: block; width: 70%; height: 12px; border-radius: 6px; }
.skel > i, .skel b, .skel span { background: linear-gradient(90deg, var(--bg-panel) 0, var(--bg-active) 40%, var(--bg-panel) 80%); background-size: 600px 100%; animation: shimmer 1.4s linear infinite; }
.skel:nth-child(2n) span { width: 45%; }
.welcome { padding: 16px 16px 8px; animation: fadeUp .4s var(--ease); }
.welcome h1 { font-size: 30px; margin: 10px 0 4px; }
.welcome h3 { margin: 0 0 10px; font-weight: 500; color: var(--text-2); }
.wl-ic { width: 68px; height: 68px; border-radius: 50%; background: var(--bg-active); display: grid; place-items: center; color: var(--text); }
.day-div { display: flex; align-items: center; gap: 8px; margin: 18px 16px 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.day-div::before, .day-div::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.msg { display: flex; gap: 14px; padding: 3px 48px 3px 16px; margin-top: 14px; position: relative; transition: background .1s; }
.msg.cont { margin-top: 0; padding-top: 1px; padding-bottom: 1px; }
.msg:hover { background: var(--bg-panel); }
.msg.new { animation: msgIn .35s var(--ease); }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); background: rgba(255, 255, 255, .08); } to { opacity: 1; transform: none; } }
.msg.removing { animation: msgOut .25s forwards; }
@keyframes msgOut { to { opacity: 0; height: 0; padding: 0; margin: 0; transform: translateX(-20px); } }
.msg.mentioned { background: rgba(240, 178, 50, .07); box-shadow: inset 2px 0 var(--yellow); }
.msg.mentioned:hover { background: rgba(240, 178, 50, .1); }
.msg.editing { background: rgba(255, 255, 255, .08); box-shadow: inset 2px 0 var(--accent); }
.msg-av { cursor: pointer; flex: none; margin-top: 2px; transition: transform .15s var(--spring); }
.msg-av:active { transform: translateY(1px); }
.msg-time-side { width: 40px; flex: none; font-size: 11px; color: var(--faint); text-align: center; line-height: 22px; opacity: 0; }
.msg:hover .msg-time-side { opacity: 1; }
.msg-body { flex: 1; min-width: 0; }
.msg-head { display: flex; align-items: baseline; gap: 8px; }
.msg-author { font-weight: 600; cursor: pointer; }
.msg-author:hover { text-decoration: underline; }
.crown-sm { color: var(--yellow); align-self: center; }
.msg-time { font-size: 12px; color: var(--faint); }
.msg-text { line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; color: #e6e7ea; }
.msg-text.flash { animation: flash 1s; }
.msg-text.jumbo { font-size: 40px; line-height: 1.2; }
.msg-text code { background: var(--bg-active); padding: 1px 5px; border-radius: 4px; font-family: Consolas, monospace; font-size: .88em; }
.msg-text pre.code { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 6px 0; font-family: Consolas, monospace; font-size: 13px; white-space: pre-wrap; }
.spoiler { background: #2c2c33; color: transparent; border-radius: 4px; cursor: pointer; transition: color .2s, background .2s; padding: 0 2px; }
.spoiler.shown { background: var(--bg-active); color: inherit; }
.mention { background: rgba(255, 255, 255, .2); color: #e4e4e7; border-radius: 4px; padding: 0 3px; font-weight: 600; cursor: pointer; }
.mention.me { background: rgba(240, 178, 50, .2); color: #fcd34d; }
.edited { font-size: 11px; color: var(--faint); margin-left: 4px; }
.msg-tools { position: absolute; right: 14px; top: -14px; display: flex; background: var(--bg-panel); border: 1px solid var(--border-2); border-radius: 8px; padding: 2px; opacity: 0; transform: translateY(4px) scale(.95); pointer-events: none; transition: opacity .12s, transform .15s var(--ease); box-shadow: 0 4px 14px rgba(0,0,0,.4); z-index: 2; }
.msg:hover .msg-tools { opacity: 1; transform: none; pointer-events: auto; }
.msg-tools button { width: 30px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); transition: background .1s, color .1s; }
.msg-tools button:hover { background: var(--bg-hover); color: var(--text); }
.msg-tools button.danger:hover { color: var(--red); }
.atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.att-img, .att-video { max-width: min(420px, 100%); max-height: 320px; border-radius: 10px; display: block; cursor: zoom-in; background: var(--bg-panel); transition: transform .2s var(--ease), box-shadow .2s; }
.att-img:hover { transform: scale(1.01); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.att-video { cursor: default; }
.att-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: min(420px, 100%); border-radius: 10px; background: var(--bg-panel); border: 1px solid var(--border); color: var(--text); transition: border-color .15s; }
.att-file:hover { border-color: var(--border-2); text-decoration: none; }
.att-file > .ic { color: var(--accent); }
.att-file b { display: block; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.att-file small { color: var(--muted); font-size: 12px; }
.att-file audio { width: 100%; height: 32px; margin-top: 6px; }
.att-dl { color: var(--muted); transition: color .15s, transform .2s var(--spring); }
.att-file:hover .att-dl { color: var(--text); transform: translateY(2px); }

.typing { height: 22px; padding: 0 16px; font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.typing b { font-weight: 700; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-2); animation: dotBounce 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dotBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

.composer { padding: 0 16px 20px; flex: none; }
.composer-row { display: flex; align-items: flex-end; gap: 4px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; padding: 6px; transition: border-color .2s, box-shadow .2s; }
.composer-row:focus-within { border-color: #33334a; box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); }
.composer textarea { flex: 1; resize: none; border: 0; background: transparent; outline: none; padding: 8px 6px; max-height: 220px; line-height: 1.4; font-size: var(--chat-font); }
.composer textarea::placeholder { color: var(--faint); }
.cp-btn { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); cursor: pointer; flex: none; transition: color .15s, transform .2s var(--spring); }
.cp-btn:hover { color: var(--text); transform: scale(1.1); }
.cp-btn[data-emoji]:hover .ic { animation: wiggle .4s; }
@keyframes wiggle { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.cp-send { width: 36px; height: 36px; border-radius: 9px; background: var(--brand); color: #fff; display: grid; place-items: center; flex: none; transition: transform .2s var(--spring), filter .15s; }
.cp-send:hover { filter: brightness(1.15); transform: scale(1.06); }
.cp-send:active { transform: scale(.9); }
.cp-send:active .ic { transform: translate(3px, -3px); }
.cp-send .ic { transition: transform .2s; }
.composer.readonly .composer-row { justify-content: center; padding: 14px; }
.ro-note { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; }
.edit-bar { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #e4e4e7; padding: 6px 10px; background: rgba(255, 255, 255, .1); border-radius: 10px 10px 0 0; margin-bottom: -4px; animation: fadeUp .2s; }
.edit-bar button { margin-left: auto; color: var(--text-2); font-size: 12px; display: flex; gap: 6px; align-items: center; }
.pending-files { display: flex; gap: 10px; flex-wrap: wrap; }
.pending-files:not(:empty) { padding: 10px; background: var(--bg-panel); border: 1px solid var(--border); border-bottom: 0; border-radius: 12px 12px 0 0; margin-bottom: -6px; }
.pf { width: 150px; background: var(--bg-panel); border-radius: 10px; padding: 8px; position: relative; animation: scaleIn .25s var(--spring); border: 1px solid var(--border); }
.pf img { width: 100%; height: 90px; object-fit: cover; border-radius: 6px; display: block; }
.pf-ic { height: 90px; display: grid; place-items: center; color: var(--accent); }
.pf-name { display: block; font-size: 12px; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-bar { display: block; height: 4px; background: var(--border-2); border-radius: 4px; margin-top: 6px; overflow: hidden; }
.pf-bar i { display: block; height: 100%; background: var(--brand); transition: width .2s; }
.pf-rm { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-active); border: 1px solid var(--border-2); color: var(--red); display: grid; place-items: center; transition: transform .2s var(--spring); }
.pf-rm:hover { transform: scale(1.15); }
.drop-zone { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 85%, transparent); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 5; }
.drop-zone > div { padding: 40px 60px; border: 2px dashed var(--accent); border-radius: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text); transform: scale(.9); transition: transform .25s var(--spring); background: rgba(255, 255, 255, .08); }
.drop-zone .ic { color: var(--accent); animation: float 1.5s ease-in-out infinite; }
.chat.dragging .drop-zone { opacity: 1; }
.chat.dragging .drop-zone > div { transform: none; }

/* ---------- голосовой канал ---------- */
.main-head.dark { background: #000; }
.stage { flex: 1; min-height: 0; background: #000; padding: 16px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.tiles { flex: 1; display: grid; gap: 10px; align-content: center; justify-content: center; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); overflow-y: auto; }
.tiles[data-count="1"] { grid-template-columns: minmax(0, 860px); }
.tiles[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 560px)); }
.tiles.has-screen { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); align-content: start; }
.tile { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--bg-panel); display: grid; place-items: center; outline: 2px solid transparent; outline-offset: -2px; animation: scaleIn .35s var(--spring); transition: outline-color .15s, transform .2s var(--ease); cursor: pointer; }
.tile.leaving { animation: tileOut .25s forwards; }
@keyframes tileOut { to { opacity: 0; transform: scale(.85); } }
.tile:hover { transform: translateY(-2px); }
.tile.speaking { outline-color: var(--green); box-shadow: 0 0 24px rgba(35, 165, 90, .25); }
.tile.speaking .av { animation: speakPulse 1s ease-in-out infinite; }
@keyframes speakPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(35, 165, 90, .6); } 50% { box-shadow: 0 0 0 10px rgba(35, 165, 90, 0); } }
.tile-bg { position: absolute; inset: 0; transition: opacity .3s; }
.tile .av { z-index: 1; }
.tile video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.tile.screen { grid-column: 1 / -1; aspect-ratio: auto; height: min(62vh, 100%); min-height: 280px; order: -1; }
.tile.screen video { object-fit: contain; }
.mirror { transform: scaleX(-1); }
.tile-label { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 5px; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); padding: 4px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; z-index: 2; max-width: calc(100% - 20px); }
.tile-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-full { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 8px; background: rgba(0,0,0,.6); display: grid; place-items: center; opacity: 0; transform: scale(.9); transition: opacity .15s, transform .15s; z-index: 2; }
.tile:hover .tile-full { opacity: 1; transform: none; }
.stage-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; animation: fadeUp .4s var(--ease); }
.stage-empty h2 { margin: 10px 0 0; }
.se-ring { position: relative; width: 110px; height: 110px; border-radius: 50%; background: var(--bg-panel); display: grid; place-items: center; color: var(--accent); }
.se-ring i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); animation: ripple 2.5s ease-out infinite; }
.se-ring i:nth-child(3) { animation-delay: 1.25s; }
.se-avs { display: flex; margin: 6px 0 12px; }
.se-avs .av { margin-left: -8px; box-shadow: 0 0 0 3px #000; animation: popIn .4s var(--spring) both; }
.stage-bar { flex: none; background: #000; display: flex; justify-content: center; padding: 0 0 18px; }
.stage-bar:empty { display: none; }
.cc { display: flex; gap: 10px; padding: 10px; border-radius: 18px; background: color-mix(in srgb, var(--bg-hover) 90%, transparent); border: 1px solid var(--border-2); backdrop-filter: blur(10px); animation: fadeUp .35s var(--spring); }
.cc-btn { width: 50px; height: 50px; border-radius: 50%; background: var(--bg-active); display: grid; place-items: center; color: var(--text); transition: background .15s, transform .2s var(--spring); }
.cc-btn:hover { background: #2c2c34; transform: translateY(-2px); }
.cc-btn:active { transform: scale(.9); }
.cc-btn.off { background: rgba(242, 63, 67, .2); color: #ff7b7e; }
.cc-btn.on { background: #fff; color: #000; }
.cc-btn.hang { background: var(--red); width: 64px; border-radius: 25px; }
.cc-btn.hang:hover { filter: brightness(1.1); background: var(--red); }

.dm-call { flex: none; background: #000; border-bottom: 1px solid var(--border); padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 12px; animation: callOpen .4s var(--ease); max-height: 55%; }
@keyframes callOpen { from { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } to { max-height: 55%; opacity: 1; } }
.dm-call .tiles { grid-template-columns: repeat(auto-fit, minmax(180px, 300px)); min-height: 140px; }
.dm-call .tiles[data-count="1"], .dm-call .tiles[data-count="2"] { grid-template-columns: repeat(auto-fit, minmax(180px, 300px)); }
.call-bar { display: flex; justify-content: center; }
.call-bar .cc { padding: 6px; gap: 8px; background: transparent; border: 0; }
.call-bar .cc-btn { width: 44px; height: 44px; }
.pill-btn { height: 42px; padding: 0 20px; border-radius: 21px; display: flex; align-items: center; gap: 8px; font-weight: 700; transition: transform .2s var(--spring), filter .15s; }
.pill-btn.join { background: var(--green); color: #fff; animation: glowGreen 1.8s infinite; }
@keyframes glowGreen { 0%, 100% { box-shadow: 0 0 0 0 rgba(35, 165, 90, .6); } 50% { box-shadow: 0 0 0 8px rgba(35, 165, 90, 0); } }
.pill-btn:hover { transform: scale(1.05); }

/* ---------- правая панель ---------- */
.members { padding: 12px 8px; }
.members h3 { font-size: 12px; text-transform: uppercase; font-weight: 700; color: var(--muted); margin: 14px 8px 6px; letter-spacing: .02em; }
.members h3:first-child { margin-top: 4px; }
.member { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; cursor: pointer; animation: slideLeft .3s var(--ease) both; animation-delay: calc(min(var(--i, 0), 20) * 20ms); transition: background .12s, opacity .2s; }
.member:hover { background: var(--bg-hover); }
.member.offline { opacity: .4; }
.member.offline:hover { opacity: 1; }
.m-meta { min-width: 0; }
.m-meta b { display: flex; align-items: center; gap: 4px; font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-meta small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crown { color: var(--yellow); display: inline-flex; }
.active-now { padding: 16px; }
.active-now h2 { font-size: 18px; margin: 0 0 14px; }
.an-card { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 12px; background: var(--bg-panel); border: 1px solid var(--border); margin-bottom: 8px; cursor: pointer; animation: fadeUp .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); transition: border-color .15s, transform .2s var(--ease); }
.an-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.an-card b { display: block; font-size: 14px; }
.an-card small { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.an-empty { text-align: center; padding: 20px 8px; }

/* ---------- карточка профиля ---------- */
.profile-panel, .profile-card { position: relative; background: var(--bg-panel); }
.profile-panel { min-height: 100%; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--bg-side)), var(--bg-side) 50%); }
.pc-banner { height: 120px; background-size: cover; background-position: center; }
.profile-pop .pc-banner { height: 105px; }
.pc-avatar { position: absolute; left: 16px; top: 64px; border-radius: 50%; padding: 6px; background: var(--bg-panel); animation: popIn .4s var(--spring); }
.profile-panel .pc-avatar { top: 72px; background: var(--bg-side); }
.pc-avatar .av .st { border-color: var(--bg-panel); right: 2px; bottom: 2px; }
.profile-panel .pc-avatar .av .st { border-color: var(--bg-side); }
.pc-bubble { position: absolute; left: 118px; top: 118px; max-width: calc(100% - 134px); background: var(--bg-active); border: 1px solid var(--border-2); border-radius: 16px; padding: 7px 12px; font-size: 13px; color: var(--text-2); animation: fadeUp .4s .1s var(--ease) both; display: flex; gap: 6px; align-items: center; }
.pc-bubble::before { content: ""; position: absolute; left: -6px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg-active); border: 1px solid var(--border-2); }
.pc-bubble.add { cursor: pointer; font-style: italic; transition: background .15s, color .15s; }
.pc-bubble.add:hover { background: #2a2a31; color: var(--text); }
.profile-panel .pc-bubble { left: 124px; top: 128px; }
.pc-body { padding: 56px 16px 16px; }
.profile-panel .pc-body { padding-top: 64px; }
.pc-body h2 { margin: 0; font-size: 20px; }
.pc-username { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text-2); font-size: 14px; margin-top: 2px; }
.pc-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.pc-st .dot { width: 8px; height: 8px; }
.pc-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.pc-section h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; color: var(--text-2); letter-spacing: .02em; }
.pc-section p { margin: 0; font-size: 14px; color: #dcdde2; white-space: pre-wrap; word-wrap: break-word; }
.pc-actions { display: flex; gap: 8px; margin-top: 16px; }
.pc-actions .btn.primary { flex: 1; }
.mutual { display: flex; flex-direction: column; gap: 4px; }
.mutual-g { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.mutual-g:hover { background: var(--bg-hover); }
.mg-icon { width: 24px; height: 24px; border-radius: 7px; overflow: hidden; background: var(--bg-active); display: grid; place-items: center; font-size: 9px; font-weight: 800; flex: none; }
.mg-icon img { width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   Всплывающие окна, меню, модальные окна
   ===================================================================== */
.popout { position: fixed; z-index: 60; border-radius: 12px; background: var(--bg-panel); box-shadow: var(--shadow); animation: popoutIn .18s var(--ease); overflow: visible; }
.popout.out { animation: popoutOut .15s forwards; }
@keyframes popoutIn { from { opacity: 0; transform: scale(.94) translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes popoutOut { to { opacity: 0; transform: scale(.96); } }
.profile-pop { width: 320px; overflow: hidden; }
.profile-pop .profile-card { border-radius: 12px; overflow: hidden; }
.me-pop { width: 320px; overflow: visible; }
.me-pop .profile-card { border-radius: 12px 12px 0 0; }
.me-menu { padding: 0 8px 8px; background: var(--bg-panel); border-radius: 0 0 12px 12px; }
.me-menu > .menu-item:first-child { margin-top: 0; }
.menu-pop { min-width: 220px; padding: 6px; }
.menu { display: flex; flex-direction: column; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; font-size: 14px; color: var(--text-2); position: relative; cursor: pointer; transition: background .1s, color .1s; }
.menu-item:hover { background: var(--accent); color: #fff; }
.menu-item.danger { color: #ff7b7e; }
.menu-item.danger:hover { background: var(--red); color: #fff; }
.menu-item > span { flex: 1; }
.menu-item small { display: block; font-size: 12px; opacity: .75; margin-top: 2px; white-space: normal; }
.menu-item.current { background: var(--bg-active); color: var(--text); }
.menu-sep { height: 1px; background: var(--border-2); margin: 4px 6px; }
.has-sub .submenu { position: absolute; left: calc(100% + 10px); top: -6px; width: 270px; padding: 6px; background: var(--bg-panel); border-radius: 10px; box-shadow: var(--shadow); opacity: 0; transform: translateX(-6px); pointer-events: none; transition: opacity .15s, transform .2s var(--ease); }
.has-sub::after { content: ""; position: absolute; left: 100%; top: 0; width: 14px; height: 100%; }
.me-pop .has-sub .submenu { top: auto; bottom: -6px; }
.has-sub:hover .submenu { opacity: 1; transform: none; pointer-events: auto; }
.submenu .menu-item { align-items: flex-start; color: var(--text-2); }
.submenu .menu-item .dot { margin-top: 5px; }

.tooltip { position: fixed; z-index: 100; background: var(--bg-active); color: var(--text); padding: 6px 10px; border-radius: 7px; font-size: 13px; font-weight: 600; pointer-events: none; opacity: 0; transform: scale(.92); transition: opacity .12s, transform .15s var(--spring); box-shadow: 0 6px 20px rgba(0,0,0,.5); white-space: nowrap; max-width: 300px; }
.tooltip.show { opacity: 1; transform: none; }

.toasts { position: fixed; top: 46px; left: 50%; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 12px; background: var(--bg-hover); border: 1px solid var(--border-2); box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: 14px; max-width: min(520px, 92vw); pointer-events: auto; cursor: pointer; animation: toastIn .4s var(--spring); }
.toast.out { animation: toastOut .3s forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-20px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px) scale(.95); } }
.toast-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, .2); color: #e4e4e7; flex: none; }
.toast-success .toast-ic { background: rgba(35, 165, 90, .2); color: #4ade80; }
.toast-error .toast-ic { background: rgba(242, 63, 67, .2); color: #ff7b7e; }

.modal-layer { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .75); display: grid; place-items: center; padding: 16px; animation: fadeIn .2s; backdrop-filter: blur(3px); }
.modal-layer.out { animation: fadeOut2 .2s forwards; }
.modal-layer.out .modal { animation: modalOut .2s forwards; }
@keyframes fadeOut2 { to { opacity: 0; } }
@keyframes modalOut { to { opacity: 0; transform: scale(.92); } }
.modal { width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--bg-panel); border-radius: var(--r-lg); border: 1px solid var(--border-2); box-shadow: 0 30px 80px rgba(0,0,0,.7); animation: modalIn .3s var(--spring); position: relative; }
@keyframes modalIn { from { opacity: 0; transform: scale(.88) translateY(10px); } to { opacity: 1; transform: none; } }
.modal.small { max-width: 420px; }
.modal-head { padding: 24px 24px 8px; position: relative; }
.modal-head.center { text-align: center; padding: 28px 40px 8px; }
.modal-head h2 { margin: 0 0 6px; font-size: 21px; }
.modal-head p { margin: 0; }
.modal-head .x { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); transition: color .15s, background .15s, transform .25s var(--ease); }
.modal-head .x:hover { color: var(--text); background: var(--bg-hover); transform: rotate(90deg); }
.modal-body { padding: 12px 24px 8px; }
.modal-body p { margin: 0 0 12px; }
.modal-foot { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 16px 24px; background: var(--bg-panel); border-top: 1px solid var(--border); margin-top: 12px; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.modal-foot.column { flex-direction: column; align-items: stretch; text-align: center; }
.modal-foot.column h3 { margin: 0 0 4px; font-size: 18px; }

.steps-wrap.in-right { animation: slideLeft .3s var(--ease); }
.steps-wrap.in-left { animation: slideRight .3s var(--ease); }
.tpl-list { max-height: 400px; overflow-y: auto; }
.tpl { width: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--bg-input); margin-bottom: 8px; text-align: left; animation: fadeUp .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms + 60ms); transition: background .15s, border-color .15s, transform .2s var(--ease); }
.tpl:hover { background: var(--bg-hover); border-color: var(--c); transform: translateX(3px); }
.tpl b { flex: 1; font-weight: 600; }
.tpl > .ic:last-child { color: var(--muted); }
.tpl-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--c); box-shadow: 0 4px 16px color-mix(in srgb, var(--c) 40%, transparent); transition: transform .3s var(--spring); }
.tpl:hover .tpl-ic { transform: rotate(-8deg) scale(1.08); }
.tpl-cap { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; margin: 14px 0 8px; }
.icon-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 84px; height: 84px; margin: 4px auto 20px; border-radius: 50%; border: 2px dashed #4a4a55; color: var(--text-2); position: relative; background-size: cover; background-position: center; transition: border-color .2s, transform .2s var(--spring), color .2s; flex: none; }
.icon-upload:hover { border-color: var(--accent); color: var(--text); transform: scale(1.05); }
.icon-upload.has { border: 0; }
.icon-upload small { font-size: 10px; font-weight: 800; }
.iu-plus { position: absolute; right: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; }
.join-examples { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: -6px; }
.join-examples span { font-size: 12px; padding: 3px 8px; border-radius: 6px; background: var(--bg-active); cursor: pointer; color: var(--text-2); transition: background .15s; }
.join-examples span:hover { background: var(--accent); color: #fff; }

.radio-cards { display: flex; flex-direction: column; gap: 8px; }
.radio-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--bg-input); border: 1px solid var(--border); cursor: pointer; transition: background .15s, border-color .15s; }
.radio-card:hover { background: var(--bg-hover); }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card:has(input:checked) { border-color: var(--accent); background: rgba(255, 255, 255, .08); }
.rc-ic { color: var(--muted); }
.radio-card:has(input:checked) .rc-ic { color: var(--text); }
.rc-text { flex: 1; }
.rc-text b { display: block; font-weight: 600; } .rc-text small { color: var(--muted); font-size: 13px; }
.rc-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #4a4a55; flex: none; position: relative; transition: border-color .15s; }
.rc-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .25s var(--spring); }
.radio-card:has(input:checked) .rc-dot { border-color: var(--accent); }
.radio-card:has(input:checked) .rc-dot::after { transform: scale(1); }
.radio-card.slim { padding: 10px 14px; }
.radio-card.slim .rc-dot { order: -1; }

.copy-row { display: flex; gap: 8px; margin-bottom: 14px; }
.copy-row input { flex: 1; }
.copy-row .btn.success { background: var(--green); }
.invite-list, .gs-members { max-height: 240px; overflow-y: auto; margin: 0 -8px; }
.inv-row, .gs-member { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; transition: background .12s; }
.inv-row:hover, .gs-member:hover { background: var(--bg-hover); }
.gs-member b { display: block; font-size: 14px; } .gs-member small { font-size: 12px; }
.gs-member.removing { animation: fadeOut .3s forwards; }
.gs-row { display: flex; gap: 20px; align-items: center; }
.gs-row .icon-upload { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 6px 10px; border-radius: 16px; background: var(--bg-active); font-size: 13px; transition: background .15s, transform .15s var(--spring); }
.chip:hover { background: var(--accent); transform: translateY(-1px); }

.quick { max-width: 560px; }
.qs { padding: 22px; }
.qs h2 { margin: 0 0 14px; font-size: 18px; }
.qs-input { display: flex; align-items: center; gap: 10px; background: var(--bg-input); border: 1px solid var(--border-2); border-radius: 10px; padding: 0 14px; color: var(--muted); }
.qs-input:focus-within { border-color: var(--accent); }
.qs-input input { flex: 1; height: 48px; background: transparent; border: 0; outline: 0; font-size: 17px; }
.qs-list { margin-top: 12px; max-height: 320px; overflow-y: auto; }
.qs-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; animation: fadeIn .15s; }
.qs-item.sel { background: var(--bg-active); }
.qs-item small { color: var(--muted); }
.qs-item .tag { margin-left: auto; }
.qs-g { width: 28px; height: 28px; border-radius: 8px; background: var(--bg-active); display: grid; place-items: center; overflow: hidden; font-size: 10px; font-weight: 800; flex: none; }
.qs-g img { width: 100%; height: 100%; object-fit: cover; }
.qs-empty { padding: 20px; text-align: center; font-size: 14px; }
.qs-tip { margin: 14px 0 0; }

.lightbox { background: transparent; border: 0; box-shadow: none; max-width: 92vw; overflow: visible; text-align: center; }
.lightbox img { max-width: 92vw; max-height: 84vh; border-radius: 10px; display: block; margin: 0 auto; box-shadow: 0 30px 80px rgba(0,0,0,.8); }
.lb-open { display: inline-block; margin-top: 10px; color: var(--text-2); font-size: 13px; }
.emoji-pop { padding: 8px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 36px); gap: 2px; }
.emoji-grid button { width: 36px; height: 36px; border-radius: 6px; font-size: 22px; transition: background .1s, transform .15s var(--spring); }
.emoji-grid button:hover { background: var(--bg-hover); transform: scale(1.2); }

.noise-popout { width: 320px; }
.noise-pop { padding: 16px; }
.np-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.np-head b { font-size: 17px; }
.np-sub { display: block; margin: 14px 0 8px; }
.np-test { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bars { flex: 1; display: flex; gap: 3px; height: 26px; align-items: center; }
.bars i { flex: 1; height: 100%; border-radius: 2px; background: #2a2a31; transition: background .06s, transform .1s; }
.bars i.on { background: var(--green); }
.bars i.hot { background: var(--yellow); }
.bars.big { height: 34px; }

.download-modal { max-width: 460px; }
.dl { padding: 0 28px 24px; text-align: center; }
.dl-hero { position: relative; height: 170px; display: grid; place-items: center; margin: 0 -28px 8px; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, .35), transparent 65%); }
.dl-glow { position: absolute; width: 220px; height: 220px; border-radius: 50%; background: var(--brand); filter: blur(70px); opacity: .35; animation: float 4s ease-in-out infinite; }
.dl-logo { width: 92px; height: 92px; position: relative; animation: float 3s ease-in-out infinite; filter: drop-shadow(0 12px 30px rgba(0,0,0,.6)); }
.dl-eq { position: absolute; bottom: 16px; display: flex; gap: 4px; height: 24px; align-items: flex-end; }
.dl-eq i { width: 4px; height: 100%; border-radius: 2px; background: var(--brand); animation: eq 1.1s ease-in-out infinite; transform-origin: bottom; }
.dl-eq i:nth-child(odd) { animation-delay: .2s; } .dl-eq i:nth-child(3n) { animation-delay: .45s; }
.dl h2 { margin: 6px 0 8px; }
.dl-feats { list-style: none; padding: 0; margin: 16px 0 20px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.dl-feats li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--text-2); animation: slideRight .4s var(--ease) both; }
.dl-feats li:nth-child(2) { animation-delay: .08s; } .dl-feats li:nth-child(3) { animation-delay: .16s; }
.dl-feats .ic { color: var(--green); }
.dl .btn.link-btn { margin-top: 8px; }

.call-modal { max-width: 340px; background: linear-gradient(180deg, #121218, var(--bg-panel)); }
.call-in { padding: 32px 24px; text-align: center; }
.ci-av { position: relative; width: 96px; height: 96px; margin: 0 auto 14px; }
.ci-av .av { position: relative; z-index: 1; animation: ringShake 1.8s infinite; }
.ci-av i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--green); animation: ripple 1.8s ease-out infinite; }
.ci-av i:nth-child(3) { animation-delay: .9s; }
@keyframes ringShake { 0%, 50%, 100% { transform: rotate(0); } 5%, 15%, 25% { transform: rotate(-8deg); } 10%, 20% { transform: rotate(8deg); } }
.call-in h2 { margin: 0; }
.ci-btns { display: flex; justify-content: center; gap: 28px; margin-top: 24px; }
.round-btn { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; transition: transform .2s var(--spring), filter .15s; }
.round-btn:hover { transform: scale(1.1); filter: brightness(1.1); }
.round-btn.rb-accept { background: var(--green); animation: glowGreen 1.5s infinite; }
.round-btn.rb-decline { background: var(--red); }

.welcome-wrap { max-width: 500px; }
.welcome-modal { padding: 28px 24px 20px; text-align: center; }
.wm-art { position: relative; width: 100px; height: 100px; margin: 0 auto 10px; display: grid; place-items: center; }
.wm-art img { width: 76px; height: 76px; position: relative; z-index: 1; animation: float 3s ease-in-out infinite; }
.wm-art i { position: absolute; inset: 10px; border-radius: 30px; border: 2px solid rgba(255, 255, 255, .4); animation: ripple 3s ease-out infinite; }
.wm-art i:nth-child(3) { animation-delay: 1s; } .wm-art i:nth-child(4) { animation-delay: 2s; }
.wm-actions { margin-top: 18px; text-align: left; }
.wm-actions .af-card { animation: fadeUp .35s var(--ease) both; }
.wm-actions .af-card:nth-child(2) { animation-delay: .06s; } .wm-actions .af-card:nth-child(3) { animation-delay: .12s; } .wm-actions .af-card:nth-child(4) { animation-delay: .18s; }

/* =====================================================================
   Настройки
   ===================================================================== */
.settings-layer { position: fixed; inset: 0; z-index: 65; display: flex; background: var(--bg); opacity: 0; transform: scale(1.04); transition: opacity .25s, transform .3s var(--ease); }
.settings-layer.show { opacity: 1; transform: none; }
.settings-layer.out { opacity: 0; transform: scale(1.04); }
.set-side { width: 300px; flex: none; background: var(--bg-side); border-right: 1px solid var(--border); overflow-y: auto; display: flex; justify-content: flex-end; }
.set-side-inner { width: 100%; max-width: 280px; padding: 20px 10px 20px 16px; }
.set-me { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; cursor: pointer; margin-bottom: 12px; transition: background .15s; }
.set-me:hover { background: var(--bg-hover); }
.set-me b { display: block; } .set-me small { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 4px; }
.set-search { display: flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; color: var(--muted); margin-bottom: 12px; }
.set-search input { flex: 1; height: 34px; background: transparent; border: 0; outline: 0; }
.set-cap { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); padding: 14px 10px 6px; letter-spacing: .02em; }
.set-link { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--muted); font-weight: 500; text-align: left; margin-bottom: 2px; transition: background .12s, color .12s; }
.set-link:hover { background: var(--bg-hover); color: var(--text-2); }
.set-link.active { background: var(--bg-active); color: var(--text); }
.set-link.active .ic { color: var(--accent); }
.set-link.danger { color: #ff7b7e; }
.set-sep { height: 1px; background: var(--border); margin: 10px; }
.set-ver { font-size: 11px; color: var(--faint); padding: 10px; }
.set-main { flex: 1; overflow-y: auto; position: relative; }
.set-content { max-width: 760px; padding: 48px 40px 120px; }
.set-content.enter { animation: fadeUp .3s var(--ease); }
.set-content h1 { font-size: 22px; margin: 0 0 24px; }
.sec-title { font-size: 16px; margin: 32px 0 14px; padding-top: 24px; border-top: 1px solid var(--border); }
.set-content h1 + .sec-title, .set-content .notice + .sec-title { border-top: 0; padding-top: 0; margin-top: 0; }
.set-close { position: fixed; right: max(24px, calc(50vw - 640px)); top: 48px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); z-index: 2; }
.set-close .ic { width: 38px; height: 38px; padding: 8px; border: 2px solid var(--border-2); border-radius: 50%; transition: border-color .15s, color .15s, transform .3s var(--ease); }
.set-close:hover { color: var(--text); }
.set-close:hover .ic { border-color: var(--text-2); transform: rotate(90deg); }
.set-close small { font-size: 12px; font-weight: 700; }
/* панель несохранённых изменений: компактная «пилюля» справа внизу */
.save-bar { position: fixed; right: 28px; bottom: 24px; transform: translateY(160%) scale(.96); opacity: 0; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg-hover) 88%, transparent); backdrop-filter: blur(16px) saturate(1.2); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  z-index: 3; transition: transform .4s var(--spring), opacity .25s; max-width: calc(100vw - 32px); }
.save-bar.show { transform: none; opacity: 1; }
.save-bar .sb-dot { width: 10px; height: 10px; border-radius: 50%; background: #fbbf24; flex: none; box-shadow: 0 0 0 0 rgba(251, 191, 36, .6); animation: sbPing 1.8s ease-out infinite; }
@keyframes sbPing { 70%, 100% { box-shadow: 0 0 0 10px rgba(251, 191, 36, 0); } }
.save-bar .sb-text { display: flex; flex-direction: column; line-height: 1.2; margin-right: 6px; }
.save-bar .sb-text b { font-size: 14px; } .save-bar .sb-text small { font-size: 12px; color: var(--muted); }
.save-bar .btn { height: 36px; border-radius: 999px; padding: 0 14px; gap: 6px; font-weight: 700; }
.save-bar .sb-undo { background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.save-bar .sb-undo:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.save-bar .sb-save { background: #fff; color: #000; }
.save-bar .sb-save:hover { box-shadow: 0 6px 22px rgba(255, 255, 255, .2); }
.save-bar.nag { animation: sbNag .6s var(--spring); border-color: rgba(251, 191, 36, .6); box-shadow: 0 0 0 4px rgba(251, 191, 36, .15), 0 18px 50px rgba(0, 0, 0, .55); }
@keyframes sbNag { 25% { transform: translateY(-10px) scale(1.03); } 50% { transform: translateY(0) scale(1); } 70% { transform: translateY(-4px); } }
@media (max-width: 600px) { .save-bar { left: 12px; right: 12px; bottom: 12px; border-radius: 18px; } .save-bar .sb-text small { display: none; } }
.notice { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 10px; margin-bottom: 20px; font-size: 14px; }
.notice.warn { background: rgba(240, 178, 50, .1); border: 1px solid rgba(240, 178, 50, .3); color: #fcd34d; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.mic-test { display: flex; align-items: center; gap: 16px; margin: 6px 0 8px; }
.mic-test .btn { flex: none; }
.custom-proc { display: block; max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.custom-proc.open { max-height: 400px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.toggle-row b { display: block; font-weight: 600; } .toggle-row small { color: var(--muted); font-size: 13px; }
.gate-box { margin-top: 16px; transition: opacity .3s; }
.gate-box.dim { opacity: .4; pointer-events: none; }
.gate-meter { position: relative; height: 28px; border-radius: 8px; background: var(--bg-active); overflow: hidden; margin-bottom: 8px; }
.gm-level { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #3a3a44, #5a5a66); transition: width .06s linear, background .15s; }
.gm-level.open { background: linear-gradient(90deg, #1d7a46, var(--green)); }
.gate-meter input[type=range] { position: absolute; inset: 0; height: 100%; background: transparent; margin: 0; }
.gate-meter input[type=range]::-webkit-slider-thumb { width: 6px; height: 28px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.4); }
.cam-prev { position: relative; aspect-ratio: 16/9; border-radius: 10px; background: var(--bg-input); border: 1px solid var(--border); display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.cam-prev video { width: 100%; height: 100%; object-fit: cover; }
.cam-hint { position: absolute; bottom: 6px; font-size: 11px; color: var(--muted); background: rgba(0,0,0,.6); padding: 2px 8px; border-radius: 6px; }

.acc-card { border-radius: 14px; overflow: hidden; background: var(--bg-panel); border: 1px solid var(--border); }
.acc-banner { height: 100px; background-size: cover; background-position: center; }
.acc-top { display: flex; align-items: flex-end; gap: 16px; padding: 0 16px; margin-top: -36px; }
.acc-top .av { box-shadow: 0 0 0 6px var(--bg-panel); }
.acc-top .av .st { border-color: var(--bg-panel); }
.acc-top h2 { flex: 1; margin: 0 0 8px; font-size: 20px; }
.acc-top .btn { margin-bottom: 8px; }
.acc-fields { margin: 16px; padding: 16px; border-radius: 10px; background: var(--bg-side); display: flex; flex-direction: column; gap: 18px; }
.acc-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acc-field small { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.acc-field b { font-weight: 500; }
.pw-form { max-width: 420px; }
.prof-grid { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
.prof-preview { position: sticky; top: 0; }
.prof-preview .field-title { margin-top: 0; }
.profile-card.preview { border-radius: 14px; overflow: hidden; border: 1px solid var(--border-2); transition: box-shadow .3s; box-shadow: 0 10px 40px color-mix(in srgb, var(--accent) 20%, transparent); }
.preview-msg { margin: 0 -16px; padding: 4px 16px; }
.row-btns { display: flex; gap: 8px; align-items: center; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches button { width: 32px; height: 32px; border-radius: 9px; background: var(--c); position: relative; transition: transform .2s var(--spring); }
.swatches button:hover { transform: scale(1.12); }
.swatches button.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #fff; }
.swatches button.on::after { content: ""; position: absolute; left: 11px; top: 7px; width: 7px; height: 12px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.sw-custom { width: 32px; height: 32px; border-radius: 9px; border: 2px dashed #4a4a55; display: grid; place-items: center; color: var(--muted); cursor: pointer; position: relative; overflow: hidden; }
.sw-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.theme-cards { display: flex; gap: 12px; }
.theme-card { width: 180px; padding: 10px; border-radius: 12px; background: var(--bg-panel); border: 2px solid var(--border); }
.theme-card.on { border-color: var(--accent); }
.theme-card b { display: block; margin-top: 8px; } .theme-card small { color: var(--muted); font-size: 12px; }
.tc-prev { height: 70px; border-radius: 8px; background: var(--bg); display: flex; gap: 4px; padding: 6px; }
.tc-prev i { background: var(--bg-input); border-radius: 4px; flex: 1; }
.tc-prev i:first-child { flex: .3; background: #000; } .tc-prev i:last-child { flex: 2; background: var(--bg-panel); }
.sound-test { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* компактный режим */
body.compact .msg { margin-top: 4px; padding-top: 1px; padding-bottom: 1px; }
body.compact .msg-av .av { width: 28px !important; height: 28px !important; }
body.compact .msg-time-side { width: 28px; }

/* нет соединения */
body.offline .titlebar::after { content: "Нет соединения с сервером — переподключаемся…"; position: absolute; inset: 0; display: grid; place-items: center; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; animation: fadeIn .3s; z-index: 5; }

/* =====================================================================
   Телефоны и узкие окна
   ===================================================================== */
@media (max-width: 1100px) { .aside:has(.profile-panel) { width: 280px; } .aside { width: 220px; } }
@media (max-width: 900px) { .aside { display: none; } .prof-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .titlebar { justify-content: flex-start; padding-left: 12px; cursor: pointer; }
  .tb-title::before { content: "☰"; margin-right: 4px; color: var(--muted); }
  .tb-download span { display: none; }
  .rail, .side { position: fixed; top: 34px; bottom: 0; z-index: 20; transition: transform .3s var(--ease); }
  .rail { left: 0; transform: translateX(-100%); }
  .side { left: 72px; transform: translateX(calc(-100% - 72px)); border-radius: 0; width: min(300px, calc(100vw - 72px)); }
  .layout.side-open .rail, .layout.side-open .side { transform: none; }
  .layout.side-open::after { content: ""; position: fixed; inset: 34px 0 0; background: rgba(0,0,0,.6); z-index: 19; animation: fadeIn .2s; }
  .msg { padding-right: 16px; }
  .set-side { position: fixed; left: 0; top: 0; bottom: 0; width: 100%; z-index: 1; }
  .settings-layer .set-main { position: fixed; inset: 0; z-index: 2; background: var(--bg); }
  .set-content { padding: 70px 16px 120px; }
  .set-close { top: 14px; right: 14px; }
  .grid2 { grid-template-columns: 1fr; }
  .friends { padding: 12px 16px; }
  .fr-actions .round-act:nth-child(n+2) { display: none; }
  .cc-btn { width: 44px; height: 44px; }
}

/* программа для ПК: справа кнопки окна Windows */
body.desktop-app .tb-actions { right: 150px; }
body.desktop-app .titlebar button, body.desktop-app .titlebar a { -webkit-app-region: no-drag; }
body.desktop-app .settings-layer .set-close { top: 60px; }

/* режим рации */
.up-btn { position: relative; }
.up-btn.ptt { color: var(--muted); }
.up-btn.ptt.live { color: #fff; background: var(--green); box-shadow: 0 0 0 0 rgba(35, 165, 90, .6); animation: glowGreen 1.4s infinite; }
.ptt-key { position: absolute; right: -3px; bottom: -3px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 5px; background: var(--bg-active); border: 1px solid var(--border-2); color: var(--text-2); font-size: 9px; font-weight: 800; line-height: 13px; text-align: center; max-width: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-btn.live .ptt-key { background: #1d7a46; border-color: #2fbf6c; color: #fff; }
.key-bind { display: flex; align-items: center; gap: 12px; }
.key-btn { min-width: 170px; height: 44px; padding: 0 16px; border-radius: 10px; background: var(--bg-input); border: 1px solid var(--border-2); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: border-color .15s, box-shadow .2s, background .15s; }
.key-btn:hover { border-color: #3a3a44; background: var(--bg-hover); }
.key-btn.recording { border-color: var(--red); color: #ff7b7e; box-shadow: 0 0 0 3px rgba(242, 63, 67, .18); animation: recPulse 1s infinite; }
@keyframes recPulse { 50% { box-shadow: 0 0 0 6px rgba(242, 63, 67, .05); } }
.key-btn kbd { font-size: 14px; line-height: 22px; padding: 0 8px; }
.ptt-box { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .35s var(--ease), opacity .25s, margin .3s; }
.ptt-box.open { max-height: 420px; opacity: 1; margin-top: 14px; }
.ptt-test { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding: 6px 12px; border-radius: 8px; background: var(--bg-panel); border: 1px solid var(--border); transition: color .15s, border-color .15s, background .15s; }
body.ptt-on .ptt-test { color: #fff; background: rgba(35, 165, 90, .2); border-color: var(--green); }
.ptt-test i { width: 8px; height: 8px; border-radius: 50%; background: #4a4a55; transition: background .15s; }
body.ptt-on .ptt-test i { background: var(--green); }
.field > span .val { font-style: normal; color: var(--text); text-transform: none; }

/* =====================================================================
   Панель владельца
   ===================================================================== */
:root { --gold: #f5b942; }
.set-link.owner { color: var(--gold); }
.set-link.owner:hover { background: rgba(245, 185, 66, .1); color: #f4f4f5; }
.staff-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; color: #000000; background: linear-gradient(135deg, #f4f4f5, #d4d4d8); box-shadow: 0 4px 14px rgba(245, 165, 36, .3); animation: fadeUp .4s .15s var(--ease) both; }
.tag.gold { background: rgba(245, 185, 66, .15); color: var(--gold); }
.tag.red { background: rgba(242, 63, 67, .15); color: #ff7b7e; }
.ban-notice { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px 14px; margin-bottom: 18px; border-radius: 10px; background: rgba(242, 63, 67, .1); border: 1px solid rgba(242, 63, 67, .4); color: #ffb3b5; font-size: 14px; animation: shake .45s; }
.ban-notice .ic { color: var(--red); margin-top: 1px; }
.tiny-note { font-size: 11px; line-height: 1.4; margin: 12px 0 0; text-align: center; }

.pin { padding: 30px 24px 18px; text-align: center; }
.pin-ic { width: 70px; height: 70px; margin: 0 auto 10px; border-radius: 20px; display: grid; place-items: center; color: #000000; background: linear-gradient(135deg, #f4f4f5, #d4d4d8); box-shadow: 0 10px 30px rgba(245, 165, 36, .35); animation: float 3s ease-in-out infinite; }
.pin h2 { margin: 6px 0 2px; }
.pin-boxes { max-width: 240px; margin: 18px auto 6px; }
.pin-boxes input { height: 60px; }
.pin-boxes.ok input { border-color: var(--green) !important; background: rgba(35, 165, 90, .12) !important; animation: popIn .3s var(--spring); }

.admin-layer .set-side { background: var(--bg-side); }
.adm-brand { display: flex; align-items: center; gap: 12px; padding: 10px; margin-bottom: 14px; border-radius: 12px; background: linear-gradient(135deg, rgba(245, 185, 66, .14), rgba(245, 185, 66, .03)); border: 1px solid rgba(245, 185, 66, .25); color: var(--gold); }
.adm-brand b { display: block; color: var(--text); } .adm-brand small { color: var(--muted); font-size: 12px; }
.admin-layer .set-link.active .ic { color: var(--gold); }
.set-content.wide { max-width: 1000px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.stat { position: relative; padding: 16px; border-radius: 14px; background: var(--bg-panel); border: 1px solid var(--border); overflow: hidden; animation: fadeUp .4s var(--ease) both; transition: transform .2s var(--ease), border-color .2s; }
.stat:nth-child(2) { animation-delay: .05s; } .stat:nth-child(3) { animation-delay: .1s; } .stat:nth-child(4) { animation-delay: .15s; } .stat:nth-child(5) { animation-delay: .2s; } .stat:nth-child(6) { animation-delay: .25s; }
.stat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.stat::after { content: ""; position: absolute; right: -30px; top: -30px; width: 100px; height: 100px; border-radius: 50%; background: var(--c); opacity: .12; filter: blur(20px); }
.stat-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); margin-bottom: 12px; }
.stat small { display: block; color: var(--muted); font-size: 13px; }
.stat b { display: block; font-size: 30px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat em { font-style: normal; font-size: 12px; color: var(--text-2); }
.adm-search { display: flex; align-items: center; gap: 10px; background: var(--bg-input); border: 1px solid var(--border-2); border-radius: 10px; padding: 0 14px; color: var(--muted); margin-bottom: 14px; transition: border-color .15s; }
.adm-search:focus-within { border-color: var(--gold); }
.adm-search input { flex: 1; height: 44px; background: transparent; border: 0; outline: 0; font-size: 15px; }
.adm-count { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.adm-list { display: flex; flex-direction: column; gap: 6px; }
.adm-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 12px; background: var(--bg-panel); border: 1px solid var(--border); cursor: pointer; animation: fadeUp .3s var(--ease) both; animation-delay: calc(min(var(--i, 0), 20) * 20ms); transition: background .15s, border-color .15s, transform .2s var(--ease); }
.adm-row:hover { background: var(--bg-hover); border-color: var(--border-2); transform: translateX(3px); }
.adm-row.disabled { cursor: default; opacity: .55; } .adm-row.disabled:hover { transform: none; }
.ar-main { flex: 1; min-width: 0; }
.ar-main b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }
.ar-main small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-col { width: 96px; flex: none; }
.ar-col.wide { width: 120px; }
.ar-col small { display: block; font-size: 11px; color: var(--faint); text-transform: uppercase; font-weight: 700; }
.ar-col b { font-size: 14px; font-weight: 600; }
.ar-chev { color: var(--faint); transition: transform .2s var(--spring), color .15s; }
.adm-row:hover .ar-chev { transform: translateX(3px); color: var(--text); }
.ag-icon { width: 36px; height: 36px; border-radius: 11px; overflow: hidden; display: grid; place-items: center; background: var(--bg-active); font-weight: 800; font-size: 12px; flex: none; }
.ag-icon img { width: 100%; height: 100%; object-fit: cover; }
.ag-icon.big { width: 56px; height: 56px; border-radius: 16px; font-size: 18px; }
.ag-head { display: flex; gap: 14px; align-items: center; padding-right: 40px; }
.ag-ch { color: var(--muted); }
.adm-members { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-member { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 20px; background: var(--bg-panel); border: 1px solid var(--border); font-size: 13px; transition: border-color .15s; }
.adm-member:hover { border-color: var(--border-2); }
.adm-modal { max-width: 720px; }
.adm-user { position: relative; padding-bottom: 20px; }
.au-banner { height: 110px; background-size: cover; background-position: center; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.au-head { display: flex; align-items: flex-end; gap: 14px; padding: 0 24px; margin-top: -40px; }
.au-head .av { box-shadow: 0 0 0 6px var(--bg-panel); }
.au-names { flex: 1; padding-bottom: 6px; }
.au-names h2 { margin: 0; }
.au-head .x { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.45); }
.au-ban { display: flex; gap: 10px; margin: 16px 24px 0; padding: 12px 14px; border-radius: 10px; background: rgba(242, 63, 67, .1); border: 1px solid rgba(242, 63, 67, .35); color: #ffb3b5; }
.au-ban b { display: block; } .au-ban small { color: #ff9a9c; }
.au-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; margin: 18px 24px 0; padding: 16px; border-radius: 12px; background: var(--bg-side); border: 1px solid var(--border); }
.au-grid small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--faint); }
.au-grid b { font-weight: 500; font-size: 14px; word-break: break-all; }
.mono { font-family: Consolas, monospace; font-size: 12px !important; }
.au-sec { margin: 18px 24px 0; }
.modal-body .au-sec { margin: 18px 0 0; }
.au-sec h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; color: var(--text-2); }
.au-sec p { margin: 0; }
.au-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.mv-modal { max-width: 760px; }
.mv-list { max-height: 62vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; padding: 0 8px; }
.mv-msg { display: flex; gap: 12px; padding: 8px; border-radius: 8px; position: relative; transition: background .1s; }
.mv-msg:hover { background: var(--bg-hover); }
.mv-msg.removing { animation: msgOut .25s forwards; }
.mv-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.mv-head small { color: var(--faint); font-size: 12px; }
.mv-img { max-width: 260px; max-height: 180px; border-radius: 8px; margin-top: 6px; display: block; }
.mv-file { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; font-size: 13px; }
.mv-del { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.mv-msg:hover .mv-del { opacity: 1; }
.mv-del:hover { background: rgba(242, 63, 67, .15); color: var(--red); }
.mv-more { align-self: center; margin: 4px 0 10px; }
.mv-start { text-align: center; padding: 6px 0 10px; }
.chip.on { background: var(--accent); color: #fff; }
.audit { display: flex; flex-direction: column; gap: 4px; }
.au-item { display: grid; grid-template-columns: 150px 1fr; gap: 2px 14px; padding: 10px 14px; border-radius: 10px; background: var(--bg-panel); border: 1px solid var(--border); animation: fadeUp .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 15ms); }
.au-time { grid-row: span 3; color: var(--faint); font-size: 12px; padding-top: 2px; }
.au-target { color: var(--text-2); font-size: 13px; }
.au-item small { color: var(--muted); font-size: 12px; }
.announce { text-align: center; padding: 26px 22px 20px; }
.announce .an-ic { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: var(--brand); box-shadow: 0 10px 30px rgba(255, 255, 255, .35); animation: float 3s ease-in-out infinite; }
.announce h2 { margin: 6px 0 12px; }
.an-text { white-space: pre-wrap; text-align: left; padding: 14px; border-radius: 12px; background: var(--bg-input); border: 1px solid var(--border); margin-bottom: 16px; font-size: 15px; }
.announce.preview { border-radius: 14px; background: var(--bg-panel); border: 1px solid var(--border-2); max-width: 440px; }
.announce.preview .an-text { margin-bottom: 0; }
@media (max-width: 760px) { .ar-col { display: none; } .au-grid { grid-template-columns: 1fr; } }
.pin-boxes input { width: 100%; height: 60px; text-align: center; font-size: 26px; font-weight: 800; border-radius: 12px; border: 1px solid var(--border-2); background: var(--bg-input); color: var(--text); outline: none; transition: border-color .15s, box-shadow .2s, transform .2s var(--spring); }
.pin-boxes input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245, 185, 66, .2); }
.pin-boxes input.filled { border-color: var(--gold); animation: popIn .3s var(--spring); }
.mv-modal .modal-head h2 { display: flex; align-items: center; gap: 8px; padding-right: 36px; }
.modal-head p .ic { display: inline-block; vertical-align: -2px; }
.au-head { align-items: flex-start; }
.au-names { margin-top: 46px; padding-bottom: 0; }

/* =====================================================================
   AudioHub 3.0 — собственный стиль «Острова»
   Панели — отдельные карточки с отступами, свечение на фоне,
   значки-скруглённые квадраты, градиентные акценты, шрифт Manrope.
   ===================================================================== */
body { font-family: "Manrope", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; letter-spacing: -.005em; }
.app { background:
  radial-gradient(900px 500px at 0% 0%, rgba(255, 255, 255, .13), transparent 60%),
  radial-gradient(700px 500px at 100% 100%, rgba(255, 255, 255, .08), transparent 60%), #030304; }
.titlebar { background: transparent; }
.layout { gap: 8px; padding: 0 8px 8px 0; }
.side, .main, .aside { border-radius: 18px; border: 1px solid var(--border); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.side { background: color-mix(in srgb, var(--bg-panel) 92%, transparent); border-top-left-radius: 18px; }
.main { background: color-mix(in srgb, var(--bg) 96%, transparent); }
.aside { background: color-mix(in srgb, var(--bg-panel) 92%, transparent); }
.aside:has(.profile-panel) { overflow: hidden; }

/* полоса серверов: «док» со скруглёнными квадратами */
.rail { background: transparent; padding-top: 2px; }
.rail-btn { border-radius: 16px !important; background: var(--bg-hover); border: 1px solid var(--border-2); }
.rail-item:hover .rail-btn { transform: translateY(-2px); }
.rail-item .pill { width: 3px; border-radius: 3px; left: 3px; background: var(--brand); }
.rail-item.active .pill { height: 24px; }
.rail-item.active .rail-btn { box-shadow: 0 0 0 2px #030304, 0 0 0 4px #ffffff, 0 10px 26px rgba(255, 255, 255, .35); border-color: transparent; }
.rail-item.active .rail-btn:not(.has-img):not(.home-btn), .rail-item:hover .rail-btn:not(.has-img):not(.home-btn) { background: var(--brand) !important; }
.rail-sep { width: 28px; background: linear-gradient(90deg, transparent, #2a2a33, transparent); }
.rail-btn.action { color: var(--text-2); }
.rail-item:hover .rail-btn.action { background: var(--brand) !important; }

/* шапка сервера с баннером */
.guild-head { position: relative; height: auto; min-height: 92px; display: block; padding: 0; border-bottom: 0; overflow: hidden; }
.gh-banner { position: absolute; inset: 0 0 auto; height: 64px; background: var(--banner); opacity: .85; mask-image: linear-gradient(180deg, #000 30%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); transition: opacity .2s; }
.guild-head:hover .gh-banner { opacity: 1; }
.gh-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 34px 14px 0; }
.gh-icon { width: 34px; height: 34px; border-radius: 11px; overflow: hidden; display: grid; place-items: center; background: var(--bg-hover); border: 2px solid var(--border); font-weight: 800; font-size: 12px; flex: none; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.gh-icon img { width: 100%; height: 100%; object-fit: cover; }
.gh-name { flex: 1; font-weight: 800; font-size: 15px; }
.gh-muted { color: var(--muted); }
.gh-meta { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 14px 10px 58px; font-size: 12px; color: var(--muted); }
.gh-meta .dot { width: 7px; height: 7px; }
.guild-head:hover, .guild-head.open { background: transparent; }
.guild-head + .side-scroll { border-top: 1px solid var(--border); }

/* каналы */
.side-cat { padding-top: 16px; font-size: 11px; letter-spacing: .06em; }
.ch { height: 36px; border-radius: 10px; gap: 8px; }
.ch .ch-ic { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--bg-hover); color: var(--muted); position: relative; flex: none; transition: background .15s, color .15s; }
.ch:hover .ch-ic { background: var(--bg-active); color: var(--text-2); }
.ch.active { background: linear-gradient(90deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04)); }
.ch.active::after { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--brand); }
.ch.active .ch-ic { background: rgba(255, 255, 255, .25); color: #e4e4e7; }
.ch-lock { position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: 5px; background: var(--bg-panel); display: grid; place-items: center; color: var(--yellow); }
.ch-slow { color: var(--faint); display: grid; }
.vc-wrap { border-radius: 12px; margin: 2px 0; border: 1px solid transparent; transition: border-color .2s, background .2s; }
.vc-wrap.here { border-color: rgba(35, 165, 90, .35); background: rgba(35, 165, 90, .05); }
.vc-wrap.drop-over { border-color: #ffffff; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }
body.dragging-member .vc-wrap { border-style: dashed; border-color: #2a2a33; }
.ch.voice.connected .ch-ic { background: rgba(35, 165, 90, .2); color: var(--green); }
.vc-limit { display: inline-flex; border-radius: 7px; overflow: hidden; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vc-limit b { padding: 1px 5px; background: var(--bg-active); color: var(--text-2); }
.vc-limit i { font-style: normal; padding: 1px 5px; background: #26262e; color: var(--muted); }
.vc-limit.full b { background: rgba(242, 63, 67, .25); color: #ff9a9c; }
.vc-status { display: flex; align-items: center; gap: 6px; padding: 0 10px 4px 40px; font-size: 12px; color: var(--text-2); cursor: default; }
.vc-status[data-vcstatus] { cursor: pointer; }
.vc-status[data-vcstatus]:hover { color: var(--text); }
.vc-status.empty { color: var(--faint); }
.vc-members { padding: 0 6px 6px 30px; }
.vc-member { border-radius: 8px; }
.vc-member[draggable=true] { cursor: grab; }
.vc-member.dragging { opacity: .4; }
.vm-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; overflow: hidden; }
.vm-name small { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live { background: linear-gradient(135deg, #ff3b5c, #ff7a45); }

/* панели снизу — «плавающие» карточки */
.voice-panel { margin: 0 8px 6px; border: 1px solid rgba(35, 165, 90, .25); border-radius: 14px; background: linear-gradient(180deg, rgba(35, 165, 90, .08), rgba(11, 11, 14, .9)); }
.user-panel { margin: 0 8px 8px; height: 54px; border: 1px solid var(--border-2); border-radius: 14px; background: var(--bg-input); }
.vp-signal { border-radius: 10px; }

/* шапка, сообщения, поле ввода */
.main-head { border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); }
.mh-topic { color: var(--muted); font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.mh-slow { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: var(--muted); padding: 2px 8px; border-radius: 8px; background: var(--bg-hover); }
.msg { margin-left: 8px; margin-right: 8px; border-radius: 12px; padding-left: 10px; }
.msg:hover { background: var(--bg-panel); }
.msg-av .av { border-radius: 14px; }
.msg-av .av img { border-radius: 14px; }
.msg-role { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 6px; color: var(--rc); background: color-mix(in srgb, var(--rc) 14%, transparent); align-self: center; text-transform: uppercase; letter-spacing: .03em; }
.emoji { width: 1.45em; height: 1.45em; vertical-align: -.35em; object-fit: contain; }
.msg-text.jumbo .emoji { width: 48px; height: 48px; }
.msg-text.jumbo { font-size: 40px; }
.composer { padding: 0 18px 18px; }
.composer-row { border-radius: 18px; background: color-mix(in srgb, var(--bg-input) 95%, transparent); border: 1px solid var(--border-2); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.composer-row:focus-within { border-color: transparent; box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px rgba(255, 255, 255, .14), 0 10px 30px rgba(0,0,0,.35); }
.composer.slow .composer-row { opacity: .6; pointer-events: none; }
.composer.slow::after { content: attr(data-slow); display: block; text-align: center; font-size: 12px; color: var(--yellow); margin-top: 6px; }
.cp-send { border-radius: 12px; }

/* участники */
.members h3 { display: flex; align-items: center; gap: 6px; }
.role-dot { width: 8px; height: 8px; border-radius: 3px; }
.member { border-radius: 12px; }
.member .av { border-radius: 12px; }
.member .av img { border-radius: 12px; }
.member .av .st { border-color: var(--border); }
.m-game { display: flex !important; align-items: center; gap: 4px; color: var(--text-2) !important; }
.game-card { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06)); border: 1px solid rgba(255, 255, 255, .25); }
.gc-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: #fff; flex: none; animation: float 3s ease-in-out infinite; }
.game-card b { display: block; } .game-card small { color: var(--muted); font-size: 12px; }
.tile-game { position: static; flex-shrink: 0; margin-left: 4px; display: inline-flex; gap: 4px; align-items: center; font-style: normal; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, .35); backdrop-filter: blur(6px); }
.tile-label .tile-game span { overflow: visible; }
.se-status { padding: 6px 12px; border-radius: 10px; background: var(--bg-hover); border: 1px solid var(--border-2); font-size: 14px; }
.role-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.role-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 8px; font-size: 12px; font-weight: 700; background: var(--bg-hover); border: 1px solid var(--border-2); }
.role-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--rc); }
.role-chip button { display: grid; color: var(--muted); }
.role-chip button:hover { color: var(--red); }
.role-chip.add { width: 24px; padding: 0; justify-content: center; color: var(--muted); }
.role-chip.add:hover { color: var(--text); border-color: #ffffff; }

/* общие мелочи */
.icon-btn { width: 32px; height: 32px; border-radius: 8px; display: inline-grid; place-items: center; color: var(--muted); transition: background .12s, color .12s; }
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }
.icon-btn.danger:hover { color: var(--red); background: rgba(242, 63, 67, .12); }
.icon-btn:disabled { opacity: .3; pointer-events: none; }
.ic.flip { transform: rotate(180deg); }
.gold-ic { color: var(--gold); display: inline-block; vertical-align: -2px; }
.input-prefix.sm input { padding: 6px 4px !important; font-size: 14px !important; }
.input-prefix.sm i { padding: 0 6px; }

/* ===== настройки сервера ===== */
.gs-brand { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 12px; margin-bottom: 12px; border-radius: 14px; overflow: hidden; background: var(--bg-hover); border: 1px solid var(--border-2); }
.gs-brand::before { content: ""; position: absolute; inset: 0; background: var(--banner); opacity: .25; }
.gs-brand > * { position: relative; }
.gs-brand b { display: block; } .gs-brand small { color: var(--muted); font-size: 12px; }
.banner-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.banner-tile { aspect-ratio: 16/10; border-radius: 10px; border: 2px solid transparent; transition: transform .2s var(--spring), border-color .15s; }
.banner-tile:hover { transform: translateY(-2px); }
.banner-tile.on { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .4); }
.traits { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.trait { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; background: var(--bg-input); border: 1px solid var(--border); color: var(--muted); }
.trait:focus-within { border-color: var(--accent); }
.trait input { flex: 1; min-width: 0; height: 40px; background: transparent; border: 0; outline: 0; font-size: 14px; }
.guild-card { border-radius: 18px; overflow: hidden; background: var(--bg-input); border: 1px solid var(--border-2); box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.gc-banner { height: 110px; }
.gc-icon { width: 72px; height: 72px; margin: -36px 0 0 16px; border-radius: 20px; overflow: hidden; display: grid; place-items: center; background: var(--bg-hover); border: 4px solid var(--border); font-weight: 800; font-size: 20px; position: relative; }
.gc-icon img { width: 100%; height: 100%; object-fit: cover; }
.gc-body { padding: 8px 16px 16px; }
.gc-body h3 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 18px; }
.gc-verified { color: var(--text-2); }
.gc-stats { display: flex; gap: 12px; font-size: 13px; color: var(--text-2); margin: 4px 0; }
.gc-stats span { display: inline-flex; gap: 5px; align-items: center; }
.gc-stats .dot { width: 8px; height: 8px; }
.gc-body p { margin: 10px 0 0; font-size: 14px; color: #dcdde2; }
.gc-traits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gc-traits span { font-size: 12px; padding: 3px 9px; border-radius: 8px; background: var(--bg-active); border: 1px solid var(--border-2); }
.gs-table { border-radius: 14px; border: 1px solid var(--border-2); overflow: hidden; background: var(--bg-panel); }
.gs-thead, .gs-tr { display: grid; align-items: center; gap: 12px; padding: 10px 14px; }
.gs-thead { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--border-2); letter-spacing: .04em; }
.gs-tr { border-bottom: 1px solid var(--border); animation: fadeUp .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms); transition: background .12s; }
.gs-tr:last-child { border-bottom: 0; }
.gs-tr:hover { background: var(--bg-input); }
.emoji-table .gs-thead, .emoji-table .gs-tr { grid-template-columns: 70px 1fr 1fr 40px; }
.members-table .gs-thead, .members-table .gs-tr { grid-template-columns: minmax(180px, 1.6fr) 110px 110px 1.4fr 40px; }
.roles-table .gs-thead, .roles-table .gs-tr { grid-template-columns: 1fr 100px 170px; }
.gs-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gs-user b { display: block; font-weight: 700; } .gs-user small { color: var(--muted); font-size: 12px; }
.emoji-big { width: 36px; height: 36px; object-fit: contain; }
.emoji-upload { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0; }
.gs-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px; color: var(--faint); text-align: center; }
.role-default { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 14px; background: var(--bg-input); border: 1px solid var(--border-2); margin-bottom: 16px; color: var(--muted); }
.role-default b { display: block; color: var(--text); } .role-default small { font-size: 13px; }
.roles-bar { display: flex; gap: 10px; align-items: center; }
.roles-bar .adm-search { margin-bottom: 0; }
.role-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.role-shield { display: grid; }
.row-acts { display: flex; gap: 2px; justify-content: flex-end; }
.role-edit { display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
.re-list { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border-2); padding-right: 12px; max-height: 70vh; overflow-y: auto; }
.re-list .btn { justify-content: flex-start; margin-bottom: 8px; }
.re-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; text-align: left; color: var(--text-2); font-size: 14px; }
.re-item i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.re-item:hover { background: var(--bg-hover); } .re-item.on { background: var(--bg-active); color: var(--text); }
.re-main h1 { font-size: 18px; }
.role-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-2); margin-bottom: 18px; }
.role-tabs button { padding: 10px 14px; color: var(--muted); font-weight: 700; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.role-tabs button:hover { color: var(--text-2); }
.role-tabs button.on { color: var(--text); border-bottom-color: #ffffff; }
.role-colors { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.rc-big { width: 66px; height: 50px; border-radius: 10px; display: grid; place-items: center; background: #202027; border: 2px solid transparent; position: relative; cursor: pointer; color: #fff; }
.rc-big.on { border-color: #fff; }
.rc-big input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rc-grid { display: grid; grid-template-columns: repeat(10, 22px); gap: 6px; }
.rc-grid button { width: 22px; height: 22px; border-radius: 6px; border: 2px solid transparent; transition: transform .15s var(--spring); }
.rc-grid button:hover { transform: scale(1.15); }
.rc-grid button.on { border-color: #fff; }
.role-preview { margin-top: 18px; }
.rp-msg { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--bg-panel); border: 1px solid var(--border-2); }
.rp-msg b { display: block; } .rp-msg small { color: var(--text-2); }
.re-members { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.re-member { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.re-member:hover { background: var(--bg-hover); }
.re-member small { flex: 1; }
.re-foot { margin-top: 22px; display: flex; justify-content: flex-end; }
.ga-item { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--bg-panel); border: 1px solid var(--border); animation: fadeUp .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 15ms); }
.ga-item small { font-size: 12px; }

/* настройки канала */
.ch-modal { max-width: 860px; padding: 0; }
.ch-set { display: grid; grid-template-columns: 210px 1fr; min-height: 480px; }
.cs-side { padding: 18px 10px; background: var(--bg-side); border-right: 1px solid var(--border-2); border-radius: var(--r-lg) 0 0 var(--r-lg); }
.cs-title { display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 800; color: var(--muted); padding: 0 10px 12px; text-transform: uppercase; overflow: hidden; }
.cs-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-main { position: relative; padding: 24px 28px 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
.cs-main h2 { margin: 0 0 18px; }
.cs-main .x { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.cs-main .x:hover { color: var(--text); background: var(--bg-hover); }
.cs-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-2); }
.role-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--bg-input); border: 1px solid var(--border); cursor: pointer; font-size: 14px; text-transform: none; font-weight: 600; color: var(--text); }
.rp-item:has(input:checked) { border-color: #ffffff; background: rgba(255, 255, 255, .1); }
.rp-item i { width: 10px; height: 10px; border-radius: 50%; }
.nick-row { display: flex; gap: 14px; align-items: flex-end; }
.nick-row .field { margin-bottom: 0; }
.ep-scroll { max-height: 340px; overflow-y: auto; padding: 2px; }
.ep-cap { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--muted); padding: 8px 4px 4px; }
.emoji-grid button img { width: 26px; height: 26px; object-fit: contain; }
.game-now { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 16px; background: var(--bg-input); border: 1px solid var(--border-2); margin-bottom: 10px; color: var(--muted); }
.game-now.on { background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .08)); border-color: rgba(255, 255, 255, .35); color: var(--text); }
.gn-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--bg-hover); flex: none; }
.game-now.on .gn-ic { background: var(--brand); color: #fff; animation: float 3s ease-in-out infinite; }
.game-now small { display: block; font-size: 12px; color: var(--muted); } .game-now b { font-size: 17px; }
.win-list { max-height: 300px; overflow-y: auto; }
.win-list .adm-row { width: 100%; text-align: left; }
.win-list .adm-row.picked { border-color: #ffffff; background: rgba(255, 255, 255, .12); }
@media (max-width: 900px) { .role-edit { grid-template-columns: 1fr; } .re-list { display: none; } .ch-set { grid-template-columns: 1fr; } .cs-side { display: none; } .members-table .gs-thead, .members-table .gs-tr { grid-template-columns: 1fr 40px; } .members-table .gs-tr > span:nth-child(2), .members-table .gs-tr > span:nth-child(3), .members-table .gs-tr > span:nth-child(4), .members-table .gs-thead > span:nth-child(n+2):not(:last-child) { display: none; } }
@media (max-width: 760px) { .layout { padding: 0; gap: 0; } .side, .main, .aside { border-radius: 0; } }

/* компактная панель пользователя: имя не обрезается */
.user-panel { padding: 0 4px 0 8px; gap: 0; }
.user-panel .up-btn { width: 28px; height: 30px; }
.up-user { gap: 7px; padding-right: 2px; }
.up-names b { font-size: 13.5px; }
.voice-panel .vp-title, .voice-panel b { font-size: 13px; }

/* ===== Поддержать проект ===== */
.tb-actions { display: flex; align-items: center; gap: 8px; }
.tb-donate {
  display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 7px; font-size: 12px; font-weight: 700;
  color: #e4e4e7; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35); -webkit-app-region: no-drag;
  transition: transform .15s var(--spring), background .2s, color .2s, box-shadow .2s;
}
.tb-donate:hover { color: #fff; background: linear-gradient(135deg, #f4f4f5, #d4d4d8); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255, 255, 255, .45); }
.tb-donate .ic { animation: heartBeat 2.4s ease-in-out infinite; }
@keyframes heartBeat { 0%, 60%, 100% { transform: scale(1); } 10% { transform: scale(1.25); } 20% { transform: scale(.95); } 30% { transform: scale(1.15); } }
@media (max-width: 760px) { .tb-donate span { display: none; } }

.btn.donate-btn { color: #fff; background: linear-gradient(135deg, #f4f4f5, #d4d4d8); box-shadow: 0 6px 22px rgba(255, 255, 255, .35); text-decoration: none; }
.btn.donate-btn:hover { filter: brightness(1.1); box-shadow: 0 8px 28px rgba(255, 255, 255, .5); }

.modal.donate-modal { max-width: 440px; }
.donate { text-align: center; padding: 6px 6px 2px; }
.dn-hero { position: relative; height: 120px; display: grid; place-items: center; margin-bottom: 6px; }
.dn-heart { width: 92px; height: 92px; border-radius: 30px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #f4f4f5, #d4d4d8); box-shadow: 0 14px 40px rgba(255, 255, 255, .45); animation: popIn .5s var(--spring) both; }
.dn-heart .ic { animation: heartBeat 2s ease-in-out infinite; }
.dn-hero > i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #d4d4d8; opacity: 0; animation: dnFloat 3s ease-in infinite; }
.dn-hero > i:nth-child(2) { left: 30%; animation-delay: .2s; } .dn-hero > i:nth-child(3) { left: 62%; animation-delay: .9s; background: #d4d4d8; }
.dn-hero > i:nth-child(4) { left: 40%; animation-delay: 1.5s; width: 6px; height: 6px; } .dn-hero > i:nth-child(5) { left: 70%; animation-delay: 2.1s; }
.dn-hero > i:nth-child(6) { left: 24%; animation-delay: 2.6s; background: #d4d4d8; } .dn-hero > i:nth-child(7) { left: 55%; animation-delay: 1.2s; width: 5px; height: 5px; }
@keyframes dnFloat { 0% { bottom: 10px; opacity: 0; transform: scale(.6); } 20% { opacity: .9; } 100% { bottom: 112px; opacity: 0; transform: scale(1.1); } }
.donate h2 { margin: 4px 0 8px; }
.dn-text { margin: 0 auto 16px; max-width: 360px; line-height: 1.5; }
.dn-goal { text-align: left; padding: 12px 14px; border-radius: 12px; background: var(--bg-hover); border: 1px solid var(--border-2); margin-bottom: 14px; }
.dn-goal-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 8px; }
.dn-goal-top span { color: var(--text-2); white-space: nowrap; }
.dn-bar { height: 8px; border-radius: 6px; background: #1d1d25; overflow: hidden; margin-bottom: 6px; }
.dn-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #f4f4f5, #ff9a59); animation: dnGrow 1s var(--ease) both; transform-origin: left; }
@keyframes dnGrow { from { transform: scaleX(0); } }
.dn-perks { list-style: none; padding: 0; margin: 0 0 14px; text-align: left; display: grid; gap: 8px; }
.dn-perks li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.dn-perks .ic { color: var(--text-2); flex: none; }
.dn-wall { text-align: left; margin-bottom: 14px; }
.dn-wall small { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; }
.dn-wall div { display: flex; flex-wrap: wrap; gap: 6px; max-height: 84px; overflow: auto; }
.dn-wall span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: rgba(255, 255, 255, .1); color: #e4e4e7; }
.dn-thanks { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 700; color: #e4e4e7; margin-bottom: 10px; }
.donate .donate-btn { margin-bottom: 8px; }
.donate .small { font-size: 12px; margin: 4px 0 6px; }

.pc-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.supporter-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #f4f4f5, #d4d4d8); box-shadow: 0 4px 14px rgba(255, 255, 255, .3); animation: fadeUp .4s .2s var(--ease) both; }
.sup-heart { display: inline-flex; margin-left: 4px; color: #e4e4e7; vertical-align: -1px; }
.dn-admin-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.dn-admin-actions { display: flex; gap: 10px; margin-top: 6px; }
@media (max-width: 760px) { .dn-admin-row { grid-template-columns: 1fr; } }
.ai-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; color: var(--accent-ink, #fff); background: rgba(255,255,255,.08); }

/* =====================================================================
   AudioHub 4 — стиль «Студия»
   Тёплый графит + янтарный свет, как у ламповой аппаратуры.
   Серверы — в верхней «деке», профиль — справа сверху,
   сообщения — пузырями, говорящий подсвечивается янтарём.
   ===================================================================== */
:root {
  --bg: #020202;
  --bg-rail: #020202;
  --bg-side: #08080a;
  --bg-panel: #0c0c0e;
  --bg-input: #0f0f12;
  --bg-hover: #141417;
  --bg-active: #18181c;
  --border: #151518;
  --border-2: #222227;
  --text: #f3f3f5;
  --text-2: #cfcfd6;
  --muted: #8e8e99;
  --faint: #5c5c66;
  --accent: #ffffff;
  --accent-2: #d4d4d8;
  --brand: linear-gradient(135deg, #ffffff 0%, #e4e4e7 55%, #d4d4d8 100%);
  --on-brand: #000000;
  --glow: rgba(255, 255, 255, .35);
  --speak: #ffffff;
  --display: "Unbounded", "Manrope", "Segoe UI", system-ui, sans-serif;
  --shadow: 0 14px 44px rgba(0, 0, 0, .75), 0 0 0 1px var(--border-2);
}
::selection { background: rgba(255, 255, 255, .35); }
h1, h2, .gh-name, .welcome h1, .modal h2, .set-content h1, .dl h2, .donate h2, .empty-state h2, .stage-empty h2 { font-family: var(--display); letter-spacing: -.01em; font-weight: 700; }
h1 { font-size: 24px; } 

/* фон: тёплое свечение и лёгкое зерно */
.app { background:
  radial-gradient(1100px 520px at 12% -10%, rgba(255, 255, 255, .06), transparent 60%),
  radial-gradient(800px 600px at 110% 110%, rgba(255, 255, 255, .025), transparent 60%), #000000; }
.app::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .025; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.app > * { position: relative; z-index: 1; }

/* ---------- верхняя дека ---------- */
.titlebar.deck { height: 60px; justify-content: flex-start; gap: 10px; padding: 0 10px 0 12px; background: transparent; }
.deck .tb-title { display: none; }
.deck .tb-actions { position: static; height: auto; margin-left: auto; gap: 8px; }
body.desktop-app .deck { padding-right: 150px; }
body.desktop-app .deck .tb-actions { right: auto; }
.deck .rail { flex: 0 1 auto; min-width: 0; width: auto; height: 48px; flex-direction: row; align-items: center; gap: 4px; padding: 0 6px; overflow-x: auto; overflow-y: hidden;
  background: color-mix(in srgb, var(--bg-panel) 72%, transparent); border: 1px solid var(--border); border-radius: 18px; backdrop-filter: blur(14px); -webkit-app-region: no-drag; box-shadow: inset 0 1px rgba(255, 255, 255, .03); }
.deck .rail-guilds { display: contents; }
.deck .rail-item { width: auto; height: 40px; margin: 0; display: flex; align-items: center; justify-content: center; border-radius: 13px; padding: 0 2px; transition: background .2s, padding .3s var(--ease); }
.deck .rail-btn { width: 36px; height: 36px; border-radius: 12px !important; font-size: 12px; background: var(--bg-input); border: 1px solid var(--border-2); box-shadow: none !important; }
.deck .rail-btn .av { width: 36px !important; height: 36px !important; }
.deck .rail-item:hover .rail-btn { transform: translateY(-1px); }
.deck .rail-item .pill { left: 50%; top: auto; bottom: -5px; width: 0; height: 3px !important; margin: 0; border-radius: 3px; transform: translateX(-50%); background: var(--brand); transition: width .3s var(--spring); }
.deck .rail-item.unread .pill { width: 6px; }
.deck .rail-item:hover .pill { width: 12px; }
.deck .rail-item.active .pill { width: 0; }
/* активный сервер раскрывается в «чип» с названием */
.deck .rail-item.active[data-guild] { background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)); padding: 0 12px 0 2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.deck .rail-item.active[data-guild]::after { content: attr(data-tip); margin-left: 9px; font: 700 13px/1 var(--display); color: var(--text); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; animation: fadeIn .3s; }
.deck .rail-item.active .rail-btn:not(.has-img):not(.home-btn), .deck .rail-item:hover .rail-btn:not(.has-img):not(.home-btn) { background: var(--brand) !important; color: var(--on-brand) !important; border-color: transparent; }
.deck .rail-item.active[data-home] { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.deck .home-btn { background: var(--bg-side) !important; }
.deck .home-btn img { width: 100%; height: 100%; }
.deck .rail-sep { width: 1px; height: 22px; margin: 0 4px; background: #222227; }
.deck .rail-btn.action { color: var(--accent); background: transparent; border-style: dashed; }
.deck .rail-item:hover .rail-btn.action { background: var(--brand) !important; color: var(--on-brand) !important; border-color: transparent; }
.deck .rail-item .badge { right: -5px; top: -3px; bottom: auto; height: 18px; min-width: 18px; border: 2px solid #000000; font-size: 10px; }
.deck .rail-voice { right: -5px; bottom: -3px; width: 16px; height: 16px; border: 2px solid #000000; background: var(--speak); color: var(--on-brand); }

/* профиль — справа в деке */
.deck .user-panel { margin: 0; height: 48px; padding: 0 4px 0 4px; gap: 2px; background: color-mix(in srgb, var(--bg-panel) 72%, transparent); border: 1px solid var(--border); border-radius: 18px; backdrop-filter: blur(14px); -webkit-app-region: no-drag; flex: none; border-top: 1px solid var(--border); }
.deck .up-user { margin: 0; padding: 4px 10px 4px 4px; border-radius: 14px; max-width: 190px; }
.deck .up-user .av { width: 36px !important; height: 36px !important; }
.deck .user-panel .up-btn { width: 34px; height: 34px; border-radius: 11px; }
.deck .up-btn.off { color: #ff8a7a; background: rgba(255, 71, 87, .14); }
.tb-download, .tb-donate { height: 36px; border-radius: 13px; padding: 0 14px 0 12px; font-size: 13px; }
.tb-download { color: var(--on-brand); }
.me-pop.from-deck .has-sub .submenu { left: auto; right: calc(100% + 10px); top: -6px; bottom: auto; transform: translateX(6px); }
.me-pop.from-deck .has-sub:hover .submenu { transform: none; }

/* ---------- раскладка ---------- */
.layout { gap: 10px; padding: 0 10px 10px; }
.side, .main, .aside { border-radius: 24px; border: 1px solid var(--border); box-shadow: 0 18px 50px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .025); }
.side { width: 268px; background: color-mix(in srgb, var(--bg-side) 90%, transparent); border-top-left-radius: 24px; }
.main { background: color-mix(in srgb, var(--bg) 94%, transparent); border-top: 1px solid var(--border); border-left: 1px solid var(--border); overflow: hidden; }
.aside { width: 264px; background: color-mix(in srgb, var(--bg-side) 90%, transparent); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }

/* ---------- левая панель ---------- */
.guild-head .gh-banner { height: 78px; opacity: .9; }
.gh-name { font-size: 15px; font-weight: 700; }
.side-cat { padding: 18px 8px 6px 6px; font: 600 10.5px/1 var(--display); letter-spacing: .08em; color: var(--faint); }
.side-cat:hover { color: var(--muted); }
.ch { height: 38px; border-radius: 12px; padding: 0 8px; }
.ch .ch-ic { width: 26px; height: 26px; border-radius: 9px; background: var(--bg-input); }
.ch:hover { background: var(--bg-panel); }
.ch.active { background: linear-gradient(90deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .03)); color: var(--text); }
.ch.active::after { left: -1px; top: 10px; bottom: 10px; width: 3px; background: var(--brand); box-shadow: 0 0 12px var(--glow); }
.ch.active .ch-ic { background: var(--brand); color: var(--on-brand); }
.ch.unread::before { background: var(--accent); }
.ch.voice.connected .ch-ic { background: rgba(255, 255, 255, .22); color: var(--speak); }
.vc-wrap.here { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .05); }
.vc-wrap.drop-over { border-color: var(--accent); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }
.av.speaking { box-shadow: 0 0 0 2px var(--bg-side), 0 0 0 4px var(--speak), 0 0 14px rgba(255, 255, 255, .55); }
.side-search, .search-btn { border-radius: 12px !important; }

/* голосовая панель — «пульт» внизу */
.voice-panel { margin: 0 10px 10px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .25); background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(8, 8, 10, .95)); border-top: 1px solid rgba(255, 255, 255, .25); }
.vp-info b.q-good { color: var(--speak); }
.vp-signal.q-good { color: var(--speak); }

/* ---------- центр ---------- */
.main-head { height: 56px; padding: 0 14px 0 20px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 60%, transparent); }
.main-head h1, .main-head .mh-title { font-family: var(--display); font-size: 15px; font-weight: 700; }

/* сообщения — как в Discord: без рамок и пузырей, все слева с аватаркой */
.messages { padding: 18px 0 10px; }
.msg { margin: 16px 0 0; padding: 2px 48px 2px 16px; gap: 16px; background: transparent; align-items: flex-start; border-radius: 0; flex-direction: row; }
.msg.cont { margin-top: 0; padding-top: 1px; padding-bottom: 1px; }
.msg:hover { background: rgba(255, 255, 255, .03); }
.msg-av { margin: 2px 0 0; }
.msg-av .av, .msg-av .av img { border-radius: 50%; }
.msg.cont .msg-time-side { width: 40px; align-self: center; }
.msg-body { flex: 1; min-width: 0; max-width: none; background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.msg-head { gap: 8px; margin-bottom: 1px; }
.msg-author { font-size: 15px; font-weight: 700; }
.msg-time { font-size: 11.5px; }
.msg-text { color: #e8e8ec; line-height: 1.45; }
.msg.mentioned { background: rgba(240, 178, 50, .07); box-shadow: inset 2px 0 var(--yellow); }
.msg.mentioned:hover { background: rgba(240, 178, 50, .1); }
.msg.editing { background: rgba(255, 255, 255, .05); }
.msg-tools { top: -16px; border-radius: 10px; background: var(--bg-input); border-color: var(--border-2); }
.day-div span { font: 600 11px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 20px; background: var(--bg-panel); border: 1px solid var(--border); color: var(--muted); }
.day-div::before, .day-div::after { opacity: .35; }

/* поле ввода */
.composer { padding: 0 18px 18px; }
.composer-row { border-radius: 22px; background: color-mix(in srgb, var(--bg-panel) 96%, transparent); border: 1px solid var(--border-2); }
.composer-row:focus-within { box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px rgba(255, 255, 255, .12), 0 12px 30px rgba(0, 0, 0, .4); }
.cp-send { border-radius: 16px; background: var(--brand) !important; color: var(--on-brand) !important; }

/* ---------- голос и видео ---------- */
.stage { background: transparent; }
.tile { border-radius: 24px; background: radial-gradient(120% 120% at 50% 0%, #141417, #09090b); border: 1px solid var(--border); outline-offset: -1px; }
.tile.speaking { outline: 2px solid var(--speak); outline-color: var(--speak); box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 0 40px rgba(255, 255, 255, .28); }
.tile-label { border-radius: 12px; background: color-mix(in srgb, var(--bg) 72%, transparent); }
.tile-game { background: rgba(255, 255, 255, .3); }
.stage-bar, .call-bar { background: transparent; }
.stage-bar > *, .dm-call .call-bar > * { padding: 8px; border-radius: 26px; background: color-mix(in srgb, var(--bg-panel) 90%, transparent); border: 1px solid var(--border-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); backdrop-filter: blur(14px); }
.cc-btn { border-radius: 18px; background: var(--bg-hover); }
.cc-btn:hover { background: #26262b; }
.cc-btn.on { background: var(--brand); color: var(--on-brand); }
.cc-btn.hang { border-radius: 18px; }

/* звонок в личке: плитки помещаются в высоту, не наезжают */
.dm-call { background: transparent; max-height: none; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
.dm-call .tiles { flex: none; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 12px; height: auto; min-height: 0; overflow: visible; container-type: inline-size; }
.dm-call .tiles > .tile { flex: none; height: auto; aspect-ratio: 16 / 9; width: min(calc((100cqw - 12px * (var(--n, 2) - 1)) / var(--n, 2)), calc(clamp(150px, 32vh, 340px) * 16 / 9)); min-width: 0; }
.dm-call .tiles[data-count="1"] > .tile { --n: 1; }
.dm-call .tiles[data-count="3"] > .tile { --n: 3; }
.dm-call .tiles[data-count="4"] > .tile { --n: 4; }
.dm-call .tile { container-type: size; }
.dm-call .tile .av { width: min(80px, 46cqh) !important; height: min(80px, 46cqh) !important; font-size: min(30px, 17cqh) !important; }
.tiles { grid-auto-rows: auto; }

/* ---------- участники ---------- */
.members h3 { font: 600 10.5px/1 var(--display); letter-spacing: .08em; color: var(--faint); margin: 18px 8px 8px; }
.member { border-radius: 14px; padding: 6px 8px; }
.member:hover { background: var(--bg-panel); }
.m-game { color: var(--text-2) !important; }

/* ---------- кнопки и элементы ---------- */
.btn.primary, .btn.success.brand { color: var(--on-brand); font-weight: 800; }
.btn { border-radius: 12px; }
.switch input:checked + i { background: var(--brand); }
.switch input:checked + i::after { background: #fff8f0; }
.tab { border-radius: 11px; }
.tab.active { background: var(--bg-hover); color: var(--text); box-shadow: inset 0 0 0 1px #26262b; }
.tab.add { background: var(--brand); color: var(--on-brand); }
.tab.add:hover { background: var(--brand); color: var(--on-brand); }
.tab.add.active { background: transparent; color: var(--accent); }
.modal { border-radius: 24px; background: var(--bg-panel); }
.popout, .menu { border-radius: 16px; }
.toast { border-radius: 16px; }
.badge { background: #ff4757; }
.radio-card input:checked + .rc-dot, .rc-dot.on { border-color: var(--accent); }
.game-card { background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)); border-color: rgba(255, 255, 255, .28); }
.gc-ic { color: var(--on-brand); }
.staff-badge { color: #000000; }

/* ---------- телефон ---------- */
@media (max-width: 760px) {
  .titlebar.deck { height: 56px; padding: 0 8px; gap: 6px; }
  .deck .tb-title { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 14px; background: color-mix(in srgb, var(--bg-panel) 80%, transparent); border: 1px solid var(--border); font-size: 0; -webkit-app-region: no-drag; }
  .deck .tb-title > * { display: none; }
  .deck .tb-title::before { content: "☰"; font-size: 18px; margin: 0; color: var(--text-2); }
  .deck .rail { flex: 1; }
  .deck .rail-item.active[data-guild]::after { display: none; }
  .deck .rail-item.active[data-guild] { padding: 0 2px; }
  .deck .tb-actions { display: none; }
  .deck .up-names, .deck .user-panel .up-btn:not([data-settings]) { display: none; }
  .deck .user-panel { height: 44px; }
  .deck .up-user { padding: 3px; }
  .deck .rail { position: static; top: auto; bottom: auto; transform: none !important; z-index: auto; }
  .side { position: fixed; top: 56px; left: 0; bottom: 0; transform: translateX(-105%); width: min(320px, 88vw); border-radius: 0 24px 24px 0; }
  .layout.side-open .side { transform: none; }
  .layout.side-open::after { inset: 56px 0 0; }
  .layout { padding: 0 6px 6px; }
  .main { border-radius: 20px; }
}
.bars i { background: var(--bg-active); }
.bars i.on { background: linear-gradient(180deg, #d4d4d8, #ffffff); }
.bars i.hot { background: #ff4757; }
@media (max-width: 760px) { .side { background: var(--bg-side); box-shadow: 20px 0 60px rgba(0, 0, 0, .6); } }
.dm-call .tile-label { left: 8px; bottom: 8px; padding: 3px 8px; font-size: 12px; }

/* ===== свой баннер сервера ===== */
.banner-custom { margin-bottom: 10px; }
.bc-upload { width: 100%; height: 96px; border-radius: 14px; border: 1.5px dashed var(--border-2); background: rgba(255, 255, 255, .04); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-2); transition: border-color .2s, background .2s, transform .2s var(--spring); }
.bc-upload .ic { color: var(--accent); margin-bottom: 2px; }
.bc-upload small { color: var(--muted); font-size: 12px; }
.bc-upload:hover { border-color: var(--accent); background: rgba(255, 255, 255, .09); transform: translateY(-1px); }
.bc-upload.loading, .btn.loading { opacity: .6; pointer-events: none; }
.bc-preview { position: relative; height: 120px; border-radius: 14px; margin-bottom: 10px; border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .4); animation: scaleIn .3s var(--spring); }
.bc-tag { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 10px; font-size: 12px; font-weight: 800; color: #fff; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(6px); }
.gc-banner { background-size: cover; background-position: center; }
.guild-head.has-img .gh-banner { height: 112px; opacity: 1; mask-image: linear-gradient(180deg, #000 55%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); }
.guild-head.has-img .gh-row { padding-top: 70px; }
.guild-head.has-img .gh-name { text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.guild-head.has-img .gh-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(6, 6, 8, .55)); }

/* ===== чат внутри голосового канала ===== */
.vc-layout { flex: 1; min-height: 0; display: flex; position: relative; }
.vc-stage-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vc-chat { width: 0; flex: none; display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-left: 1px solid transparent; background: color-mix(in srgb, var(--bg-side) 70%, transparent); transition: width .3s var(--ease), border-color .3s; }
.vc-layout.chat-open .vc-chat { width: 360px; border-left-color: var(--border); }
.vc-chat > * { min-width: 360px; }
.vc-chat-head { flex: none; display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--border); font-size: 13px; }
.vc-chat-head .ic { color: var(--accent); }
.vc-chat-head .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-chat .chat { flex: 1; min-height: 0; }
.vc-chat .msg { padding-left: 12px; padding-right: 16px; }
.vc-chat .composer { padding: 0 12px 12px; }
.vc-welcome { padding: 18px 16px 6px; }
.vc-welcome h1 { font-size: 18px; margin: 10px 0 4px; }
.vc-welcome .wl-ic { width: 56px; height: 56px; }
.hd-btn { position: relative; }
.hd-badge { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ff4757; color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; animation: popIn .3s var(--spring); }
.vc-chat-badge { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: 9px; font-size: 11px; font-weight: 800; color: var(--on-brand); background: var(--brand); cursor: pointer; animation: popIn .3s var(--spring); flex: none; }
.vc-chat-badge:hover { filter: brightness(1.1); }
@media (max-width: 1000px) {
  .vc-layout.chat-open .vc-chat { position: absolute; right: 0; top: 0; bottom: 0; z-index: 5; width: min(380px, 100%); box-shadow: -20px 0 50px rgba(0, 0, 0, .55); background: var(--bg-side); }
  .vc-chat > * { min-width: 0; }
}

/* ===== тёмные рамки: без оранжевых и светлых обводок ===== */
:root { --border: #121215; --border-2: #1b1b20; --line: #16161a; }
.side, .main, .aside, .deck .rail, .deck .user-panel { border-color: var(--line) !important; }
.main-head, .vc-chat-head, .dm-call, .guild-head + .side-scroll { border-color: var(--line) !important; }
.vc-layout.chat-open .vc-chat { border-left-color: var(--line); }
.composer-row { border-color: var(--border); }
.composer-row:focus-within { border-color: var(--border-2); box-shadow: 0 0 0 3px rgba(255, 255, 255, .03), 0 12px 30px rgba(0, 0, 0, .45); }
.tile { border-color: var(--border); }
.tile.speaking { outline: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 0 36px rgba(255, 255, 255, .16); }
.av.speaking { box-shadow: 0 0 0 2px var(--bg-side), 0 0 0 3px rgba(255, 255, 255, .6); }
.vc-wrap.here { border-color: var(--border); background: rgba(255, 255, 255, .015); }
.voice-panel { border-color: var(--border) !important; background: var(--bg-panel); }
.deck .rail-item.active[data-guild], .deck .rail-item.active[data-home] { box-shadow: inset 0 0 0 1px #24242a; background: var(--bg-hover); }
.deck .rail-btn { border-color: var(--border); }
.deck .rail-btn.action { border-color: var(--border-2); }
.dm-call .tile, .stage-bar > *, .dm-call .call-bar > * { border-color: var(--border); }
.tile-label { border: 0; }
.modal, .popout, .menu, .toast { box-shadow: 0 16px 48px rgba(0, 0, 0, .8), 0 0 0 1px #1a1a1f; }
.field input, .field textarea, .select, .trait, .bc-upload { border-color: var(--border); }
.field input:focus, .field textarea:focus { border-color: var(--border-2); box-shadow: 0 0 0 3px rgba(255, 255, 255, .03); }
.radio-card { border-color: var(--border) !important; }
.radio-card:has(input:checked) { border-color: var(--border-2) !important; }
.day-div span { border-color: var(--border); }
.bc-preview { border-color: var(--border-2); box-shadow: none; }
.banner-tile.on { border-color: #e8e8ec; box-shadow: none; }
.radio-card:has(input:checked) { background: var(--bg-input); }

/* ===== пинг ===== */
.vp-signal { cursor: pointer; transition: transform .15s var(--spring), filter .15s; }
.vp-signal:hover { filter: brightness(1.25); transform: scale(1.06); }
.vp-info b[data-ping] { cursor: pointer; display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; }
.vp-info b[data-ping]:hover { text-decoration: underline; }
.vp-info { cursor: default; }
.vp-info small[data-gotovoice] { cursor: pointer; }
.vp-info:hover small { text-decoration: none; }
.vp-info small[data-gotovoice]:hover { text-decoration: underline; color: var(--text-2); }
.vp-ms { font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.vp-signal.q-mid { color: #f0b232; background: rgba(240, 178, 50, .12); }
.vp-info b.q-mid { color: #f0b232; }
.ping-popout { width: 330px; padding: 0; overflow: hidden; background: var(--bg-panel); }
.ping-pop .pp-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.ping-pop .pp-head .ic { color: var(--speak); }
.ping-pop .pp-head b { display: block; font-size: 14px; }
.ping-pop .pp-head small { display: block; font-size: 12px; color: var(--muted); }
.pp-body { padding: 0 16px 14px; }
.pp-graph { height: 96px; border-radius: 12px; background: var(--bg-side); border: 1px solid var(--border); overflow: hidden; margin-bottom: 12px; }
.pg-svg { width: 100%; height: 100%; display: block; }
.pg-grid { stroke: #1b1b20; stroke-width: 1; stroke-dasharray: 3 4; }
.pg-lbl { fill: #4c4c55; font-size: 9px; font-family: inherit; }
.pg-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke .3s; }
.pg-area { fill: rgba(255, 255, 255, .07); }
.pg-empty { height: 100%; display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.pp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 12px; }
.pp-stats > div { display: flex; flex-direction: column; gap: 1px; }
.pp-stats small { font-size: 11px; color: var(--muted); }
.pp-stats b { font-size: 14px; font-variant-numeric: tabular-nums; }
.pp-sub { font: 600 10px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 2px 0 8px; }
.pp-peers { border-top: 1px solid var(--border); padding-top: 10px; margin-bottom: 8px; display: grid; gap: 6px; max-height: 150px; overflow: auto; }
.pp-peer { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pp-peer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-peer b { font-variant-numeric: tabular-nums; font-size: 12px; }
.pp-state { font-style: normal; font-size: 12px; color: #f0b232; }
.pp-note { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }

/* ===== кнопки панелей без подсветки (как в Discord): только значок, лёгкий фон при наведении ===== */
.vp-signal, .vp-signal.q-good, .vp-signal.q-mid, .vp-signal.q-bad, .vp-signal.q-connecting { background: transparent !important; box-shadow: none; animation: none; }
.vp-signal:hover { transform: none; filter: none; background: var(--bg-hover) !important; }
.vp-btn, .vp-btn.on { background: var(--bg-input); border: 0; box-shadow: none; color: var(--text-2); }
.vp-btn:hover { background: var(--bg-hover); color: var(--text); }
.vp-btn.on { color: var(--text); }
.vp-mini, .vp-mini.on { background: transparent; color: var(--text-2); }
.vp-mini:hover { background: var(--bg-hover); }
.up-btn.off, .deck .up-btn.off { background: transparent !important; color: #ff5c6a; }
.up-btn.off:hover, .deck .up-btn.off:hover { background: var(--bg-hover) !important; }
.up-btn.ptt.live { background: transparent; box-shadow: none; animation: none; color: var(--speak); }
.vp-info b[data-ping]:hover { text-decoration: underline; }

/* ===== цвет связи по пингу: зелёный — хороший, оранжевый — средний, красный — большой ===== */
.vp-signal.q-good, .vp-info b.q-good, .pp-head .ic.q-good { color: #3ddc84 !important; }
.vp-signal.q-mid, .vp-info b.q-mid, .pp-head .ic.q-mid { color: #e4e4e7 !important; }
.vp-signal.q-bad, .vp-info b.q-bad, .pp-head .ic.q-bad { color: #ff4757 !important; }
.vp-signal.q-connecting, .vp-info b.q-connecting { color: #f0b232 !important; }
.vp-signal.q-good .ic { filter: drop-shadow(0 0 5px rgba(61, 220, 132, .55)); }
.vp-signal.q-mid .ic { filter: drop-shadow(0 0 6px rgba(255, 154, 46, .65)); }
.vp-signal.q-bad .ic { filter: drop-shadow(0 0 8px rgba(255, 71, 87, .8)); animation: sigPulse 1.2s ease-in-out infinite !important; }
.vp-info b.q-good { text-shadow: 0 0 12px rgba(61, 220, 132, .35); }
.vp-info b.q-mid { text-shadow: 0 0 12px rgba(255, 154, 46, .45); }
.vp-info b.q-bad { text-shadow: 0 0 14px rgba(255, 71, 87, .6); }
.voice-panel:has(.vp-signal.q-bad) { box-shadow: 0 0 0 1px rgba(255, 71, 87, .25), 0 0 26px rgba(255, 71, 87, .18); }
.voice-panel:has(.vp-signal.q-mid) { box-shadow: 0 0 22px rgba(255, 154, 46, .1); }
@keyframes sigPulse { 50% { filter: drop-shadow(0 0 2px rgba(255, 71, 87, .4)); opacity: .75; } }
.vp-info b[data-ping] { display: flex; min-width: 0; }
.vp-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-ms { flex: none; }

/* ===== кнопки без оранжевого свечения ===== */
.btn.primary, .btn.primary:hover, .btn.success, .btn.danger, .btn.donate-btn, .btn.donate-btn:hover,
.tb-download, .tb-download:hover, .tb-download.pulse, .tb-donate:hover,
.cp-send, .cp-send:hover, .cc-btn, .cc-btn:hover, .cc-btn.on, .tab.add,
.deck .rail-item .rail-btn, .rail-item.active .rail-btn, .rail-btn.action, .vp-btn, .up-btn,
.af-card, .af-card:hover, .round-act, .pill-btn, .gc-ic, .dn-heart, .ch.active .ch-ic { box-shadow: none !important; }
.tb-download.pulse { animation: none; }
.ch.active::after { box-shadow: none; }
.btn.primary:hover, .cp-send:hover, .tb-download:hover { filter: brightness(1.08); transform: none; }
.toggle-row.dim { opacity: .45; }

/* экран входа: тёмный фон с мягким янтарным светом вместо фиолетово-бирюзового */
.aurora { background: #000; }
.aurora i:nth-child(1) { background: #ffffff; opacity: .14; }
.aurora i:nth-child(2) { background: #27272a; opacity: .22; }
.aurora i:nth-child(3) { background: #d4d4d8; opacity: .05; }
.auth-card { background: color-mix(in srgb, var(--bg-side) 92%, transparent); border-color: var(--border); }
.auth-logo { filter: none; }

/* ===== производительность ===== */
/* градиент кнопок больше не «переливается» — это перерисовка каждый кадр */
.btn.primary, .tb-download, .tb-download.pulse, .cp-send, .deck .rail-item .rail-btn { animation: none !important; background-size: 100% 100% !important; }
/* фон экрана входа анимируется только на экране входа */
body:not(.on-auth) .aurora { display: none; }
/* облегчённый режим: окно в фоне, в трее, вы в игре — или «Всегда» в настройках */
body.lite *, body.lite *::before, body.lite *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.lite .app::before { display: none; }
body.lite-always .tile, body.lite-always .side, body.lite-always .main, body.lite-always .aside, body.lite-always .modal, body.lite-always .popout { box-shadow: none !important; }
body.lite-always .tile.speaking { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5) !important; }
body.lite-always .app { background: var(--bg-rail) !important; }

/* ползунки: всегда янтарные (не берут цвет профиля пользователя) */
input[type=range] { background: linear-gradient(90deg, #ffffff 0, #e4e4e7 var(--p, 50%), #24242a var(--p, 50%)) !important; }
.gate-meter input[type=range] { background: transparent !important; }
.upd-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--text-2); font-size: 14px; }
.modal-foot { flex-wrap: wrap; }

/* ===== Монохром: чёрный и белый. Цвет оставлен только там, где он что-то значит ===== */
/* пинг: зелёный — хороший, оранжевый — средний, красный — большой (как просили) */
.vp-signal.q-good, .vp-info b.q-good, .pp-head .ic.q-good { color: #3ddc84 !important; }
.vp-signal.q-mid, .vp-info b.q-mid, .pp-head .ic.q-mid { color: #ff9a2e !important; }
.vp-signal.q-bad, .vp-info b.q-bad, .pp-head .ic.q-bad { color: #ff4757 !important; }
.vp-signal.q-mid .ic { filter: drop-shadow(0 0 6px rgba(255, 154, 46, .65)); }
.vp-info b.q-mid { text-shadow: 0 0 12px rgba(255, 154, 46, .45); }
.pg-area { fill: rgba(255, 255, 255, .05); }
/* спокойнее подсветка выбранного */
.ch.active { background: var(--bg-hover) !important; }
.ch.active .ch-ic { background: #ffffff !important; color: #000 !important; }
.ch.active::after { background: #ffffff !important; }
.deck .rail-item.active[data-guild] { background: var(--bg-hover) !important; box-shadow: inset 0 0 0 1px #2a2a30 !important; }
.btn.primary, .tb-download, .cp-send, .tab.add, .cc-btn.on, .btn.donate-btn { background: #ffffff !important; color: #000 !important; }
.btn.primary:hover, .tb-download:hover, .cp-send:hover, .tab.add:hover { background: #e4e4e7 !important; filter: none; }
.tab.add.active { background: transparent !important; color: #fff !important; }
.tile.speaking { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 0 28px rgba(255, 255, 255, .08) !important; }
.av.speaking { box-shadow: 0 0 0 2px var(--bg-side), 0 0 0 3px #ffffff !important; }
.switch input:checked + i { background: #ffffff !important; }
.switch input:checked + i::after { background: #000 !important; }
input[type=range] { background: linear-gradient(90deg, #ffffff 0, #ffffff var(--p, 50%), #27272a var(--p, 50%)) !important; }
.gate-meter input[type=range] { background: transparent !important; }
.bars i.on { background: #ffffff !important; }
.radio-card input:checked + .rc-dot, .rc-dot.on { border-color: #fff !important; }
.rc-dot::after { background: #fff !important; }
a, .link, .link-btn.accent { color: #e4e4e7; }
.dn-heart, .supporter-badge { background: #ffffff !important; color: #000 !important; }
.sup-heart { color: #e4e4e7 !important; }
.app { background: var(--bg-rail) !important; }
.aurora i { background: #ffffff !important; opacity: .03 !important; }
.gc-ic { background: #ffffff !important; color: #000 !important; }
.game-card { background: var(--bg-input) !important; border-color: var(--border-2) !important; }
.vc-chat-head .ic, .ping-pop .pp-head .ic:not([class*="q-"]) { color: #fff; }
.vc-chat-badge { background: #ffffff !important; color: #000 !important; }
.ai-chip { color: #fff; }

/* ===== реакции ===== */
.reacts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.react { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--bg-hover); border: 1px solid var(--border-2); font-size: 14px; color: var(--text-2); transition: background .12s, border-color .12s, transform .15s var(--spring); }
.react b { font-size: 12px; font-variant-numeric: tabular-nums; }
.react .emoji { width: 18px; height: 18px; vertical-align: middle; }
.react:hover { background: var(--bg-active); border-color: var(--border-2); }
.react:active { transform: scale(.92); }
.react.on { background: #ffffff; border-color: #ffffff; color: #000; }
.react.add { color: var(--muted); opacity: 0; padding: 0 7px; gap: 1px; }
.react.add span { font-weight: 800; font-size: 12px; }
.msg:hover .react.add { opacity: 1; }
.rp-quick { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.rp-quick button { width: 36px; height: 36px; border-radius: 10px; font-size: 22px; transition: background .1s, transform .15s var(--spring); }
.rp-quick button:hover { background: var(--bg-active); transform: scale(1.15); }

/* ===== опросы ===== */
.poll { margin-top: 6px; width: min(440px, 100%); padding: 12px; border-radius: 14px; background: var(--bg-panel); border: 1px solid var(--border); }
.msg-body:has(> .poll) { min-width: min(440px, 100%); }
.poll-q { font-weight: 800; font-size: 15px; line-height: 1.35; }
.poll-sub { font-size: 12px; color: var(--muted); margin: 2px 0 10px; }
.poll-opt { position: relative; width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; margin-bottom: 6px; border-radius: 10px; background: var(--bg-hover); border: 1px solid var(--border-2); text-align: left; overflow: hidden; transition: border-color .15s, background .15s; }
.poll-opt:hover:not([disabled]) { border-color: #34343b; background: var(--bg-hover); }
.poll-opt[disabled] { cursor: default; }
.po-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, .08); transition: width .5s var(--ease); }
.poll-opt.on .po-bar { background: rgba(255, 255, 255, .16); }
.poll-opt.win { border-color: #3a3a42; }
.po-check { position: relative; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid #3a3a42; display: grid; place-items: center; color: #000; }
.po-check.sq { border-radius: 5px; }
.poll-opt.on .po-check { background: #fff; border-color: #fff; }
.po-text { position: relative; flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.po-pct { position: relative; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-2); }
.poll-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 4px; }
.poll-foot button { font-size: 12px; font-weight: 700; color: var(--text-2); }
.poll-foot button:hover { color: #fff; text-decoration: underline; }
.pq-opts { display: grid; gap: 6px; margin-bottom: 8px; }
.pq-row { display: flex; gap: 6px; align-items: center; }
.pq-row input { flex: 1; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--bg-input); border: 1px solid var(--border); outline: 0; color: var(--text); }
.pq-row input:focus { border-color: var(--border-2); }
.pq-multi { align-self: end; height: 44px; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); cursor: pointer; }
.check-row input { width: 16px; height: 16px; accent-color: #fff; }

/* ===== скрытые сообщения (блок / игнор) ===== */
.msg.hidden-msg { margin: 6px 14px 0; }
.hm { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 12px; background: var(--bg-panel); border: 1px dashed var(--border-2); font-size: 13px; color: var(--muted); }
.hm button { color: var(--text-2); font-weight: 700; font-size: 13px; }
.hm button:hover { text-decoration: underline; color: #fff; }
.pc-blocked { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; color: #ff7b85; background: rgba(255, 71, 87, .1); }
.pc-realname { font-size: 12px; color: var(--muted); margin-top: 4px; }
.pc-section h4 small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--faint); margin-left: 4px; }

/* меню: подсказка под пунктом, вложенные меню, недоступные пункты */
.menu-item > span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.menu-item small { font-size: 11.5px; color: var(--muted); font-weight: 500; margin-top: 1px; }
.menu-item .mi-arrow { margin-left: auto; color: var(--muted); }
.menu-item.disabled { opacity: .35; cursor: default; }

/* предпросмотр камеры */
.cam-confirm { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--bg-side); border: 1px solid var(--border); display: grid; place-items: center; margin-bottom: 12px; }
.cam-confirm video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.cc-wait { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; text-align: center; padding: 12px; }
.vc-chat .composer-row .cp-btn { width: 32px; }

/* ===== серверы — слева вертикальной колонкой ===== */
.layout > .rail { width: 76px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 12px; overflow-y: auto; overflow-x: hidden; background: transparent; scrollbar-width: none; }
.layout > .rail .rail-guilds { display: contents; }
.layout > .rail .rail-item { width: 76px; height: 50px; margin: 0; display: flex; align-items: center; justify-content: center; flex: none; }
.layout > .rail .rail-btn { width: 50px; height: 50px; border-radius: 16px !important; background: var(--bg-input); border: 1px solid var(--border); display: grid; place-items: center; overflow: hidden; font-weight: 800; font-size: 15px; color: #e4e4e7; transition: border-radius .2s var(--ease), background .15s, transform .15s var(--spring); }
.layout > .rail .rail-btn .av { width: 50px !important; height: 50px !important; }
.layout > .rail .rail-btn img { width: 100%; height: 100%; object-fit: cover; }
.layout > .rail .rail-item:hover .rail-btn { border-radius: 14px !important; transform: translateY(-1px); }
.layout > .rail .rail-item.active .rail-btn:not(.has-img):not(.home-btn) { background: #ffffff !important; color: #000 !important; border-color: #fff; }
.layout > .rail .rail-item:hover .rail-btn:not(.has-img):not(.home-btn):not(.action) { background: var(--bg-active); }
.layout > .rail .rail-item.active .rail-btn { box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff !important; }
.layout > .rail .rail-item .pill { position: absolute; left: 0; top: 50%; width: 4px; height: 0; border-radius: 0 4px 4px 0; background: #fff; transform: translateY(-50%); transition: height .25s var(--spring); }
.layout > .rail .rail-item.unread .pill { height: 8px; }
.layout > .rail .rail-item:hover .pill { height: 20px; }
.layout > .rail .rail-item.active .pill { height: 36px; }
.layout > .rail .home-btn { background: #000 !important; }
.layout > .rail .rail-sep { width: 32px; height: 1px; margin: 2px 0; background: #222227; flex: none; }
.layout > .rail .rail-btn.action { background: transparent; border: 1px dashed var(--border-2); color: #e4e4e7; }
.layout > .rail .rail-item:hover .rail-btn.action { background: #fff !important; color: #000 !important; border-color: #fff; }
.layout > .rail .rail-item .badge { position: absolute; right: 8px; bottom: -3px; top: auto; height: 20px; min-width: 20px; border: 3px solid #000; font-size: 10.5px; box-sizing: content-box; }
.layout > .rail .rail-voice { position: absolute; right: 9px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #000; background: #fff; color: #000; display: grid; place-items: center; }
.layout { padding-left: 0; }
.titlebar.deck { padding-left: 16px; }
@media (max-width: 760px) {
  .layout > .rail { position: fixed; top: 56px; bottom: 0; left: 0; z-index: 21; background: #000; transform: translateX(-100%); transition: transform .3s var(--ease); }
  .layout.side-open > .rail { transform: none; }
  .layout.side-open .side { left: 76px; width: min(300px, calc(100vw - 76px)); }
  .side { left: 76px; }
}
@media (max-width: 760px) { .side { transform: translateX(calc(-100% - 90px)); } .layout.side-open .side { transform: none; } }
@media (min-width: 761px) { .deck .tb-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--text); pointer-events: none; padding-left: 64px; } .deck .tb-title .tb-gicon { display: inline-grid; } }

/* ---------- 2FA ---------- */
.tfa-card{display:flex;align-items:center;gap:14px;margin-top:18px;padding:16px 18px;border-radius:14px;background:var(--bg-panel);border:1px solid var(--border);max-width:560px}
.tfa-ico{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--bg-hover);color:var(--muted)}
.tfa-card.on .tfa-ico{color:#fff;background:var(--bg-active);box-shadow:inset 0 0 0 1px #3a3a40}
.tfa-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tfa-text small{color:var(--muted);line-height:1.4}
#tfaCode{font-size:22px;letter-spacing:8px;text-align:center}
@media (max-width:600px){.tfa-card{flex-wrap:wrap}.tfa-card .btn{width:100%}}

/* ---------- напоминание о 2FA ---------- */
.tfa-bar{flex:none;display:flex;align-items:center;gap:12px;padding:8px 12px 8px 16px;margin:0 8px 6px;border-radius:12px;background:var(--bg-input);border:1px solid var(--border-2);font-size:13.5px;color:var(--text-2);animation:tfaIn .3s ease}
.tfa-bar.out{animation:tfaOut .25s ease forwards}
.tfa-bar-ico{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--bg-active);color:#fff}
.tfa-bar-text{flex:1;min-width:0;line-height:1.35}
.tfa-bar-text b{color:#fff}
.tfa-bar .btn{flex:none}
.tfa-bar-x{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:none;border:0;color:var(--muted);cursor:pointer}
.tfa-bar-x:hover{color:#fff;background:var(--bg-active)}
@keyframes tfaIn{from{opacity:0;transform:translateY(-6px)}}
@keyframes tfaOut{to{opacity:0;transform:translateY(-6px);margin-bottom:-44px}}
.set-dot{width:8px;height:8px;border-radius:50%;background:#fff;margin-left:auto;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.tfa-card.warn{border-color:#3a3a40}
.tfa-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:6px;background:#fff;color:#000;font-size:11px;font-weight:700;vertical-align:1px}
.tfa-card.pulse{animation:tfaPulse 1.2s ease 2}
@keyframes tfaPulse{50%{box-shadow:0 0 0 4px rgba(255,255,255,.18)}}
@media (max-width:700px){
  .tfa-bar{margin:0 6px 6px;padding:8px 8px 8px 10px;gap:8px;font-size:12.5px}
  .tfa-bar-text span,.tfa-bar-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tfa-bar-ico{display:none}
}
body.lite .tfa-bar,body.lite .tfa-card.pulse{animation:none}

/* ---------- свой цвет карточки профиля ---------- */
.profile-card.pc-custom, .profile-panel.pc-custom { background: linear-gradient(180deg, var(--card), var(--card-2)) !important; }
.pc-custom .pc-avatar .av .st, .profile-panel.pc-custom .pc-avatar .av .st { border-color: var(--card) !important; }
.pc-custom .pc-avatar .av { box-shadow: 0 0 0 6px var(--card); }
.pc-custom .pc-section { border-top-color: rgba(255, 255, 255, .12); }
.pc-custom .pc-bubble, .pc-custom .game-card, .pc-custom .preview-msg .msg-body { background: rgba(0, 0, 0, .28) !important; border-color: rgba(255, 255, 255, .1) !important; }
.pc-custom .pc-section p, .pc-custom .pc-username, .pc-custom .pc-section h4 { color: rgba(255, 255, 255, .82); }
.pc-custom.pc-light { color: #0b0b0d; }
.pc-custom.pc-light .pc-body h2, .pc-custom.pc-light .msg-text { color: #0b0b0d; }
.pc-custom.pc-light .pc-section p, .pc-custom.pc-light .pc-username, .pc-custom.pc-light .pc-section h4, .pc-custom.pc-light .msg-time { color: rgba(0, 0, 0, .68); }
.pc-custom.pc-light .pc-section { border-top-color: rgba(0, 0, 0, .12); }
.pc-custom.pc-light .pc-bubble, .pc-custom.pc-light .game-card, .pc-custom.pc-light .preview-msg .msg-body { background: rgba(255, 255, 255, .55) !important; border-color: rgba(0, 0, 0, .08) !important; color: #0b0b0d; }
.pc-custom.pc-light .supporter-badge { background: rgba(0, 0, 0, .08); color: #0b0b0d; }
.swatches .sw-default { background: var(--bg-input); box-shadow: inset 0 0 0 1px #2a2a30; color: var(--muted); display: grid; place-items: center; }
.swatches .sw-default.on::after { display: none; }
.sw-custom.on { border-style: solid; border-color: #fff; }

/* ---------- демонстрация экрана: крупная плитка + полоска участников ---------- */
.tiles.has-screen { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 10px; overflow: hidden; --thumb-h: 96px; }
.tiles.has-screen > .tile { flex: 0 0 auto; width: calc(var(--thumb-h) * 16 / 9); height: var(--thumb-h); aspect-ratio: auto; min-height: 0; order: 0; border-radius: 14px; }
.tiles.has-screen > .tile.featured { flex: 0 0 100%; width: 100%; order: -1; height: calc(100% - var(--thumb-h) - 10px); min-height: 200px; border-radius: 18px; background: #000; }
.tiles.has-screen[data-count="1"] > .tile.featured { height: 100%; }
.tile.screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; border-radius: 0; }
.tiles.has-screen > .tile:not(.featured) .av { width: 44px !important; height: 44px !important; font-size: 18px !important; }
.tiles.has-screen > .tile:not(.featured) .tile-label { font-size: 12px; }
/* в звонке в ЛС места меньше — экран фиксированной высоты, плитки под ним */
.dm-call .tiles.has-screen { display: flex; flex: none; container-type: normal; height: auto; --thumb-h: 84px; }
.dm-call .tiles.has-screen > .tile { min-width: 0; }
.dm-call .tiles.has-screen > .tile.featured { height: clamp(220px, 46vh, 600px); }
@media (max-width: 760px) { .tiles.has-screen { --thumb-h: 64px; } }

/* ---------- оверлей: выбор угла ---------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg-panel); border: 1px solid var(--border); }
.seg-btn { height: 32px; padding: 0 12px; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: 13px; transition: background .15s, color .15s; }
.seg-btn:hover { color: #fff; background: var(--bg-hover); }
.seg-btn.on { background: #fff; color: #000; }
.ov-corner { margin-top: 14px; }
.ov-corner.dim { opacity: .45; pointer-events: none; }
.upd-hint { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--bg-panel); border: 1px solid var(--border-2); max-width: 680px; }
.upd-hint .ic { margin-top: 2px; }
.upd-hint div { display: flex; flex-direction: column; gap: 3px; }
.upd-hint small { color: var(--muted); line-height: 1.45; }

/* ---------- меню: ползунок громкости и галочки ---------- */
.menu-slider { padding: 8px 10px 10px; }
.menu-slider small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: 6px; }
.menu-slider .ms-row { display: flex; align-items: center; gap: 10px; }
.menu-slider input { flex: 1; min-width: 150px; }
.menu-slider b { width: 42px; text-align: right; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.menu-item.has-check { padding-right: 10px; }
.mi-check { margin-left: auto; flex: none; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px #4a4a52; display: grid; place-items: center; color: transparent; transition: background .12s, box-shadow .12s; }
.mi-check.on { background: #fff; box-shadow: none; color: #000; }
.menu-item.danger .mi-check { box-shadow: inset 0 0 0 1.5px rgba(242, 63, 67, .55); }
.menu-item.danger .mi-check.on { background: #f23f43; color: #fff; }
.menu-pop .menu { max-height: min(80vh, 720px); overflow-y: auto; }
/* плитка/строка заглушённого мной или модератором */

/* ---------- карточка: «В голосовом чате» ---------- */
.pc-voice .pv-card { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .06); margin-bottom: 8px; }
.pc-voice .pv-ic { flex: none; border-radius: 12px; overflow: hidden; }
.pc-voice .pv-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-voice .pv-info b { display: flex; align-items: center; gap: 5px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-voice .pv-info small { color: var(--muted); font-size: 12px; }
.pc-voice .btn.wide { width: 100%; justify-content: center; }
.me-card .role-chip button { margin-left: 1px; }
/* значок сервера в «В голосовом чате»: всегда 40×40, картинка обрезается по квадрату */
.pc-voice .pv-ic { width: 40px; height: 40px; display: grid; place-items: center; background: var(--bg-active); color: #fff; font-weight: 700; }
.pc-voice .pv-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-voice .pv-ic .av { width: 40px !important; height: 40px !important; }

/* ---------- упоминания ---------- */
.mention.role { background: color-mix(in srgb, var(--rc) 22%, transparent); color: color-mix(in srgb, var(--rc) 75%, #fff); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.mention.role.dead { --rc: #6b6b73; }
.mention.everyone { background: rgba(250, 204, 21, .16); color: #fde68a; border-radius: 4px; padding: 0 3px; font-weight: 600; }
#composer, .composer { position: relative; }
.mention-ac { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); max-height: 340px; overflow-y: auto; z-index: 30; padding: 8px; border-radius: 14px;
  background: var(--bg-panel); border: 1px solid var(--border-2); box-shadow: 0 18px 50px rgba(0, 0, 0, .6); animation: fadeUp .16s var(--ease); }
.mention-ac .ac-head { padding: 6px 10px 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.mention-ac .ac-sep { height: 1px; background: var(--bg-active); margin: 6px 8px; }
.mention-ac .ac-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 9px; text-align: left; color: #e4e4e7; }
.mention-ac .ac-item b { font-weight: 600; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mention-ac .ac-item small { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 12px; }
.mention-ac .ac-item.on, .mention-ac .ac-item:hover { background: var(--bg-active); }

/* ---------- иконки ролей ---------- */
.role-icon { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-left: 4px; border-radius: 3px; flex: none; }
.role-chip .role-icon { width: 14px; height: 14px; margin: 0; }
.re-icon-row { display: flex; align-items: center; gap: 10px; }
.re-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-input); border: 1px dashed #2f2f36; display: grid; place-items: center; color: var(--muted); overflow: hidden; }
.re-icon img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- кланы ---------- */
.clan-tag { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px 0 4px; margin-left: 6px; border-radius: 6px; vertical-align: 1px;
  background: color-mix(in srgb, var(--cc) 16%, #111114); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc) 38%, transparent); color: var(--cc); font-size: 11px; font-weight: 800; letter-spacing: .03em; line-height: 1; cursor: default; }
.clan-tag b { color: #f4f4f5; font-weight: 800; }
.clan-tag .cb-img { border-radius: 3px; object-fit: cover; }
.clan-tag.big { height: 22px; font-size: 12.5px; padding: 0 8px 0 5px; margin-left: 0; }
.pc-username .clan-tag { margin-right: 4px; }
.clan-hero { display: flex; align-items: center; gap: 18px; padding: 20px; border-radius: 18px; margin: 16px 0 6px; background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 22%, #0b0b0d), #0b0b0d 70%); border: 1px solid color-mix(in srgb, var(--cc) 30%, #1c1c21); }
.ch-badge { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; color: var(--cc); background: color-mix(in srgb, var(--cc) 14%, #000); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc) 35%, transparent); flex: none; overflow: hidden; }
.ch-badge .cb-img { width: 100% !important; height: 100% !important; object-fit: cover; }
.ch-meta h2 { margin: 0 0 6px; font-size: 22px; }
.ch-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.clan-invite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: var(--bg-panel); border: 1px solid var(--border); max-width: 620px; }
.clan-invite > div { display: flex; flex-direction: column; margin-right: auto; }
.clan-invite small { color: var(--muted); font-size: 12px; }
.ci-code { font-size: 20px; letter-spacing: .14em; font-family: ui-monospace, Consolas, monospace; }
.clan-members { display: flex; flex-direction: column; gap: 4px; max-width: 620px; }
.cm-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; }
.cm-row:hover { background: var(--bg-panel); }
.cm-row > div:not(.av) { display: flex; flex-direction: column; margin-right: auto; }
.cm-row small { color: var(--muted); font-size: 12px; }
.clan-danger { margin-top: 26px; }
.clan-choice { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 16px; }
.cc-card { padding: 20px; border-radius: 18px; background: var(--bg-panel); border: 1px solid var(--border); }
.cc-card h3 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font-size: 17px; }
.clan-form { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; max-width: 620px; }
.cf-row { display: grid; grid-template-columns: 1fr 120px; gap: 12px; }
.cf-tag input { text-transform: none; font-weight: 800; letter-spacing: .06em; }
.cf-badges { display: flex; flex-wrap: wrap; gap: 8px; --cc: #a78bfa; }
.cf-badges button { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-input); color: var(--cc); box-shadow: inset 0 0 0 1px #24242a; transition: transform .15s, box-shadow .15s; }
.cf-badges button:hover { transform: translateY(-1px); }
.cf-badges button.on { box-shadow: inset 0 0 0 2px var(--cc); background: color-mix(in srgb, var(--cc) 12%, #121215); }
.cf-badges .cf-up { color: var(--muted); }
.cf-preview { margin: 8px 0 14px; }
.cj-found { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-input); margin: 4px 0 12px; }
@media (max-width: 860px) { .clan-choice { grid-template-columns: 1fr; } }
/* подменю статуса: «мостик» в обе стороны, задержка перед скрытием, открытие по клику */
.has-sub::before { content: ""; position: absolute; right: 100%; top: 0; width: 14px; height: 100%; }
.has-sub .submenu { transition: opacity .15s .25s, transform .2s var(--ease) .25s, visibility 0s .4s; visibility: hidden; pointer-events: auto; z-index: 5; }
.has-sub:hover .submenu, .has-sub.open .submenu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.has-sub .submenu::before { content: ""; position: absolute; top: 0; bottom: 0; left: -14px; right: -14px; z-index: -1; }
/* «Переподключиться» после вылета — в стиле AudioHub: чёрная плашка, белые акценты */
.vr-bar { background: linear-gradient(90deg, #111114, #0b0b0e); border-color: var(--border-2); color: var(--text-2); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.vr-bar .tfa-bar-ico { background: #fff; color: #000; box-shadow: 0 0 14px rgba(255, 255, 255, .25); }
.vr-bar .tfa-bar-text b { color: #fff; }
.vr-btn { flex: none; background: #fff !important; color: #000 !important; font-weight: 700; }
.vr-btn:hover { box-shadow: 0 6px 20px rgba(255, 255, 255, .18); transform: translateY(-1px); }
/* значок LIVE в стиле AudioHub: белая плашка, чёрный текст и пульсирующая красная точка */
.live-badge { display: inline-flex; align-items: center; gap: 4px; background: #fff; color: #000; font-size: 9.5px; font-weight: 900; letter-spacing: .06em; line-height: 1; padding: 3px 6px; border-radius: 6px; box-shadow: 0 0 10px rgba(255, 255, 255, .22); }
.live-badge::before { content: none; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); } 70% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
@media (prefers-reduced-motion: reduce) { .live-badge::before { animation: none; } }

/* ---------- меню своей карточки и кнопки чужой — в цвете карточки профиля ---------- */
.me-menu.pc-custom { background: var(--card-2); border-top: 1px solid rgba(255, 255, 255, .1); }
.me-menu.pc-custom > .menu-item, .me-menu.pc-custom > .menu-item > span { color: #fff; }
.me-menu.pc-custom > .menu-item:hover, .me-menu.pc-custom > .has-sub.open { background: rgba(255, 255, 255, .12); }
.me-menu.pc-custom > .menu-sep { background: rgba(255, 255, 255, .14); }
.me-menu.pc-custom.pc-light { border-top-color: rgba(0, 0, 0, .1); }
.me-menu.pc-custom.pc-light > .menu-item, .me-menu.pc-custom.pc-light > .menu-item > span, .me-menu.pc-custom.pc-light > .menu-item > svg { color: #0b0b0d; }
.me-menu.pc-custom.pc-light > .menu-item:hover, .me-menu.pc-custom.pc-light > .has-sub.open { background: rgba(0, 0, 0, .08); }
.me-menu.pc-custom.pc-light > .menu-sep { background: rgba(0, 0, 0, .12); }
.pc-custom .pc-actions .btn.ghost, .pc-custom .pc-bubble.add { background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .14) !important; color: #fff; }
.pc-custom .pc-actions .btn.ghost:hover, .pc-custom .pc-bubble.add:hover { background: rgba(255, 255, 255, .18) !important; }
.pc-custom.pc-light .pc-actions .btn.ghost, .pc-custom.pc-light .pc-bubble.add { background: rgba(0, 0, 0, .07) !important; border-color: rgba(0, 0, 0, .1) !important; color: #0b0b0d; }
.pc-custom .pc-actions .btn.primary { background: #fff; color: #000; }
.pc-custom.pc-light .pc-actions .btn.primary { background: #0b0b0d; color: #fff; }
.pc-custom .sup-badge { background: rgba(255, 255, 255, .1); }
.pc-custom.pc-light .sup-badge { background: rgba(0, 0, 0, .08); }
.dev-now { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--muted); }

/* ---------- окна «Выгнать», «Забанить», «Тайм-аут» ---------- */
.pn-modal .modal-head h2 { font-size: 22px; }
.pn-modal .modal-head p { margin: 8px 0 0; line-height: 1.5; }
.pn-body { padding-top: 6px; }
.pn-lbl { font-size: 15px; font-weight: 700; margin-bottom: 10px; color: var(--text); } .pn-lbl i { color: var(--red); font-style: normal; }
.pn-radios { display: flex; flex-direction: column; gap: 4px; }
.pn-radio { display: flex; align-items: center; gap: 14px; padding: 8px 2px; font-size: 15px; color: var(--text-2); cursor: pointer; }
.pn-radio input { position: absolute; opacity: 0; pointer-events: none; }
.pn-dot { width: 22px; height: 22px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--muted); transition: box-shadow .15s; }
.pn-radio input:checked + .pn-dot { box-shadow: inset 0 0 0 6px #fff; }
.pn-radio:hover .pn-dot { box-shadow: inset 0 0 0 2px var(--text); }
.pn-text { width: 100%; margin-top: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--bg-input); color: var(--text); font: inherit; font-size: 14px; resize: vertical; outline: none; }
.pn-text:focus { border-color: rgba(255, 255, 255, .4); }
.pn-text[hidden] { display: none; }
.pn-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pn-foot .btn { height: 46px; justify-content: center; font-size: 15px; }
.pn-foot .btn.danger { background: #d42d3a; color: #fff; border: 0; } .pn-foot .btn.danger:hover { background: #e03442; } .pn-foot .btn.danger:disabled { opacity: .5; }
.pn-durs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pn-dur input { position: absolute; opacity: 0; pointer-events: none; }
.pn-dur span { display: block; padding: 11px 6px; border-radius: 12px; text-align: center; font-weight: 700; font-size: 14px; background: var(--bg-input); border: 1px solid var(--border-2); cursor: pointer; }
.pn-dur input:checked + span { background: #fff; color: #000; border-color: #fff; }
.pn-now { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(240, 178, 50, .1); color: #fcd34d; font-size: 13.5px; font-weight: 700; }