.before-load,.before-load *{opacity:0!important;pointer-events:none!important;transition:none!important}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; transition: background-color 0.3s ease, border-color 0.3s ease; }
button, .nav-item, .sidebar-item, .app-header-btn, .app-header-avatar-placeholder, .post-action, .modal-btn, .auth-btn, .media-add-btn, .admin-grid > div, .design-card, .profile-avatar-wrap, .user-row, .ch-reactions span, .title-grid-btn, .poll-option { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
input, textarea { user-select: text; -webkit-user-select: text; }
/* Защита картинок */
img { -webkit-touch-callout: none; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; user-drag: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

:root {
  --purple: #7c3aed; --purple-dark: #4c1d95; --purple-light: #a78bfa;
  --bg: #f8fafc; --card: #ffffff; --text: #0f172a; --text2: #64748b;
  --text3: #94a3b8; --border: #e2e8f0; --danger: #ef4444;
  --radius: 16px; --radius-sm: 12px; --sidebar-w: 200px;
}
:root.dark {
  --bg: #0f0f1a; --card: #1a1a2e; --text: #f1f5f9; --text2: #94a3b8;
  --text3: #64748b; --border: #2d2d4a;
}

body { font-family: 'Inter', sans-serif; background: var(--bg); min-height: 100dvh; color: var(--text); display: flex; align-items: center; justify-content: center; overflow-x: hidden; overflow-y: auto; }
.loading { display:none !important; }
:root, :root.dark { color-scheme: light; } :root.dark { color-scheme: dark; }

/* SCREENS */
.screen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: clamp(14px, 3vh, 24px); background: linear-gradient(135deg, var(--bg) 0%, var(--card) 100%); z-index: 10000; }
.screen.active { display: flex; }

/* PIN-код отключён
.pin-logo { font-family: 'Unbounded', sans-serif; font-size: 72px; font-weight: 900; background: linear-gradient(135deg, var(--purple-light), #c084fc, var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; position:relative; display:inline-block; }
.pin-logo::after { content:''; display:block; width:60%; height:2px; margin:4px auto 0; background:linear-gradient(90deg,transparent,var(--purple-light),var(--purple),var(--purple-light),transparent); border-radius:2px; }
.pin-title { font-size: 13px; color: var(--text2); letter-spacing: 5px; text-transform: uppercase; margin-top: -4px; }
.pin-dots { display: flex; gap: clamp(10px, 2.5vw, 14px); }
.pin-dot { width: clamp(13px, 3vw, 16px); height: clamp(13px, 3vw, 16px); border-radius: 50%; border: 2px solid rgba(167,139,250,0.3); background: transparent; transition: all 0.2s; }
.pin-dot.filled { background: var(--purple-light); border-color: var(--purple-light); box-shadow: 0 0 12px rgba(167,139,250,0.4); }
.pin-dot.error  { background: var(--danger); border-color: var(--danger); box-shadow: 0 0 12px rgba(239,68,68,0.4); }
.pin-pad { display: grid; grid-template-columns: repeat(3, clamp(56px, 13vw, 72px)); gap: clamp(8px, 2vw, 12px); }
.pin-btn { width: clamp(56px, 13vw, 72px); height: clamp(56px, 13vw, 72px); background: rgba(255,255,255,0.06); border: 1.5px solid rgba(167,139,250,0.15); border-radius: 14px; color: var(--text); font-size: clamp(18px, 4vw, 22px); font-weight: 700; cursor: pointer; transition: all 0.12s; font-family: 'Unbounded', sans-serif; touch-action: manipulation; }
.pin-btn:active { background: rgba(167,139,250,0.2); transform: scale(0.94); border-color: var(--purple-light); }
.pin-btn.del { font-size: clamp(14px, 3vw, 17px); color: var(--text2); }
.pin-error { font-size: 12px; color: var(--danger); min-height: 18px; text-align: center; }
.pin-error:empty { opacity: 0; }
.pin-error.show { animation: errorPop 0.35s ease; } */

/* Лендинг перед входом/регистрацией */
#landingScreen { overflow:hidden; background:radial-gradient(ellipse at 30% 20%, #2a1a5e 0%, #0f0f1a 55%, #0a0a12 100%); }
/* Световые пятна фона. filter:blur(80px) убран намеренно: размытие такого размера
   браузер пересчитывал на КАЖДОМ кадре бесконечной анимации — именно оно топило
   слабые устройства. Мягкость теперь даёт сам градиент: вид тот же, цена — ноль.
   will-change превращает пятно в готовый слой, который дальше только сдвигается. */
#landingScreen::before, #landingScreen::after {
  content:''; position:absolute; border-radius:50%; z-index:0; pointer-events:none; will-change:transform;
}
#landingScreen::before { width:380px; height:380px; top:-120px; left:-120px; background:radial-gradient(circle, rgba(167,139,250,.95) 0%, rgba(167,139,250,.42) 45%, rgba(167,139,250,0) 100%); opacity:.35; animation:authBlobA 14s ease-in-out infinite; }
#landingScreen::after { width:340px; height:340px; bottom:-140px; right:-100px; background:radial-gradient(circle, rgba(192,132,252,.95) 0%, rgba(192,132,252,.4) 45%, rgba(192,132,252,0) 100%); opacity:.3; animation:authBlobB 16s ease-in-out infinite; }
@keyframes authBlobA { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(55px,35px) scale(1.18); } }
@keyframes authBlobB { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-45px,-40px) scale(1.12); } }

.landing-particles { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
/* Свечение частицы — градиентом, а не box-shadow: тень с размытием перерисовывалась
   каждый кадр полёта, градиент рисуется один раз и дальше только едет. */
.landing-particle { position:absolute; width:4px; height:4px; border-radius:50%; background:radial-gradient(circle, rgba(220,202,255,.95) 0%, rgba(167,139,250,.45) 45%, rgba(167,139,250,0) 100%); opacity:0; animation:lpFloat linear infinite; }
@keyframes lpFloat { 0%{ transform:translateY(0); opacity:0; } 10%{ opacity:.8; } 90%{ opacity:.5; } 100%{ transform:translateY(-100vh); opacity:0; } }

/* Облегчённый режим для слабых устройств  
   Класс .low-perf на <html> ставит authgate.js (телефоны и маломощные ПК).
   Убираем всё, что пересчитывается каждый кадр, — внешний вид остаётся узнаваемым */
/* на слабом устройстве частицы не летят: тихие точки без движения стоят почти ничего */
.low-perf .landing-particle { animation:none; opacity:.45; }
.low-perf .landing-ring { animation:none; }
/* пятна фона на слабом устройстве стоят на месте: вид тот же, но кадры не тратятся */
.low-perf #landingScreen::before,
.low-perf #landingScreen::after { animation:none; }
.low-perf .landing-title,
.low-perf .landing-headline { filter:none; }

/* Пользователь включил в системе «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  .landing-particle { display:none; }
  .landing-ring { animation:none; }
  .landing-header,
  .landing-title,
  .landing-headline,
  .landing-sub,
  .landing-feats,
  .landing-legal,
  .landing-copy,
  .landing-stage { animation:none !important; opacity:1 !important; }
}

.landing-header { position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; gap:12px; opacity:0; animation:lpFadeDown .6s ease .1s both; }
.landing-header-logo { font-family:'Unbounded', sans-serif; font-size:20px; font-weight:900; color:#fff; letter-spacing:.5px; }
.landing-header-btns { display:flex; gap:8px; }
.landing-header-btns .auth-btn { width:auto; padding:9px 16px; font-size:13px; }

.landing-hero { position:relative; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.landing-wrap { position:relative; z-index:1; width:100%; max-width:920px; display:flex; flex-direction:column; align-items:center; gap:8px; padding:70px 28px 28px; }
.landing-text { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
/* filter:drop-shadow убран намеренно: куб вращается, силуэт меняется каждый кадр,
   и браузер пересчитывал размытую тень 60 раз в секунду — главная причина лагов на телефонах.
   Объём под кубом теперь даёт .landing-ring (обычный градиент, считается бесплатно) */
.landing-stage { width:170px; height:170px; margin:0 auto 4px; -webkit-perspective:320px; perspective:320px; touch-action:none; cursor:grab; opacity:0; animation:lpCubeIn .7s cubic-bezier(.34,1.56,.64,1) .15s both; }
.landing-stage:active { cursor:grabbing; }
/* will-change: каждая грань становится готовым слоем. Без этого браузер заново
   рисовал градиенты, рамки и блики шести граней на каждом кадре вращения —
   теперь они рисуются один раз, а дальше только поворачиваются. */
.landing-cube { width:100%; height:100%; position:relative; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; will-change:transform; }
.lcube-face { position:absolute; width:170px; height:170px; display:flex; align-items:center; justify-content:center; font-family:'Unbounded', sans-serif; font-size:38px; font-weight:900; color:#fff; letter-spacing:1px; border:2px solid rgba(0,0,0,.45); -webkit-backface-visibility:hidden; backface-visibility:hidden; overflow:hidden; will-change:transform; }
.lcube-face::after { content:''; position:absolute; inset:0; background:linear-gradient(115deg, rgba(255,255,255,.4) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.35) 100%); pointer-events:none; }
.lcube-front { transform:translateZ(85px); background:linear-gradient(145deg, #e9d5ff, #9333ea); }
.lcube-back  { transform:rotateY(180deg) translateZ(85px); background:linear-gradient(145deg, #4c1d95, #1e0a3c); }
.lcube-right { transform:rotateY(90deg) translateZ(85px); background:linear-gradient(145deg, #5b21b6, #2e1065); }
.lcube-left  { transform:rotateY(-90deg) translateZ(85px); background:linear-gradient(145deg, #5b21b6, #2e1065); }
.lcube-top   { transform:rotateX(90deg) translateZ(85px); background:linear-gradient(145deg, #faf5ff, #e9d5ff); }
.lcube-bottom{ transform:rotateX(-90deg) translateZ(85px); background:linear-gradient(145deg, #2e1065, #150530); }
/* filter:blur(6px) убран: он пересчитывался на каждой смене масштаба, а фон и так мягкий градиент.
   Мягкость теперь даёт сама трёхступенчатая растяжка — вид тот же, цена нулевая */
.landing-ring { position:absolute; left:50%; bottom:6px; width:150px; height:34px; margin-left:-75px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(124,58,237,.62), rgba(124,58,237,.2) 45%, transparent 72%); animation:lpRing 3.4s ease-in-out infinite; z-index:-1; will-change:transform, opacity; }
@keyframes lpRing { 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:.85; transform:scale(1.12); } }
@keyframes lpFadeDown { from{ opacity:0; transform:translateY(-16px); } to{ opacity:1; transform:translateY(0); } }
@keyframes lpFadeUp { from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }
@keyframes lpCubeIn { from{ opacity:0; transform:scale(.4) rotate(-20deg); } to{ opacity:1; transform:scale(1) rotate(0); } }
.landing-title { font-family:'Unbounded', sans-serif; font-size:44px; font-weight:900; letter-spacing:1px; line-height:1; opacity:0; animation:lpFadeUp .6s ease .3s both;
  background:linear-gradient(135deg, #c4b5fd, #a78bfa 40%, #7c3aed); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter:drop-shadow(0 0 24px rgba(167,139,250,.5)); }
.landing-headline { font-family:'Unbounded', sans-serif; font-size:19px; font-weight:800; line-height:1.3; max-width:320px; margin-top:6px; opacity:0; animation:lpFadeUp .6s ease .35s both;
  background:linear-gradient(90deg, #e9d5ff, #c084fc 50%, #7c3aed); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
/* официальный текст на экране входа */
.landing-sub { font-size:13.5px; line-height:1.62; color:var(--text2); max-width:430px; margin-top:10px; opacity:0; animation:lpFadeUp .6s ease .4s both; }
.landing-feats { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:12px; opacity:0; animation:lpFadeUp .6s ease .45s both; }
.landing-feat { font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:30px; white-space:nowrap;
  background:rgba(167,139,250,.12); border:1px solid rgba(167,139,250,.28); color:var(--purple-light); }
.landing-legal { font-size:11.5px; line-height:1.65; color:var(--text3); max-width:430px; margin-top:14px; opacity:0; animation:lpFadeUp .6s ease .5s both; }
.landing-copy { font-size:11px; color:var(--text3); margin-top:8px; opacity:0; animation:lpFadeUp .6s ease .55s both; }
.landing-copy b { color:var(--text2); font-weight:600; }
/* авторизован: в шапке вместо «Войти/Регистрация» — аватар, ведёт обратно в ШГ */
.landing-me { width:40px; height:40px; border-radius:50%; overflow:hidden; flex-shrink:0; text-decoration:none;
  display:flex; align-items:center; justify-content:center; font-family:'Unbounded', sans-serif; font-weight:800; font-size:16px; color:#fff;
  background:linear-gradient(135deg, var(--purple-light), var(--purple)); border:2px solid rgba(255,255,255,.28);
  box-shadow:0 6px 18px rgba(124,58,237,.45); transition:transform .18s ease, box-shadow .18s ease; }
.landing-me img { width:100%; height:100%; object-fit:cover; display:block; }
.landing-me:hover { transform:translateY(-2px) scale(1.05); box-shadow:0 10px 26px rgba(124,58,237,.6); }
#landingScreen .auth-btn-primary { box-shadow:0 8px 24px rgba(124,58,237,.4); transition:transform .18s ease, box-shadow .18s ease, opacity .2s; }
#landingScreen .auth-btn:not(.auth-btn-primary) { background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.15); transition:transform .18s ease, background .18s ease, opacity .2s; }
#landingScreen .auth-btn:hover { transform:translateY(-2px) scale(1.03); }
#landingScreen .auth-btn-primary:hover { box-shadow:0 12px 30px rgba(124,58,237,.55); }
#landingScreen .auth-btn:not(.auth-btn-primary):hover { background:rgba(255,255,255,.14); }
.backlink { align-self:flex-start; margin-bottom:-6px; }

@media (min-width: 768px) {
  .landing-header { padding:20px 40px; }
  .landing-wrap { flex-direction:row; justify-content:space-between; gap:40px; padding:70px 60px 28px; }
  .landing-text { align-items:flex-start; text-align:left; order:1; flex:1 1 380px; }
  .landing-headline { text-align:left; max-width:400px; font-size:26px; }
  .landing-feats { justify-content:flex-start; }
  .landing-sub, .landing-legal { max-width:460px; }
  .landing-stage { order:2; width:260px; height:260px; margin:0; flex:0 0 auto; perspective:480px; }
  .lcube-face { width:260px; height:260px; font-size:58px; }
  .lcube-front, .lcube-back, .lcube-right, .lcube-left, .lcube-top, .lcube-bottom { transform:none; }
  .lcube-front { transform:translateZ(130px); }
  .lcube-back  { transform:rotateY(180deg) translateZ(130px); }
  .lcube-right { transform:rotateY(90deg) translateZ(130px); }
  .lcube-left  { transform:rotateY(-90deg) translateZ(130px); }
  .lcube-top   { transform:rotateX(90deg) translateZ(130px); }
  .lcube-bottom{ transform:rotateX(-90deg) translateZ(130px); }
  .landing-ring { width:220px; height:48px; margin-left:-110px; }
  .landing-title { font-size:64px; }
}

.auth-box { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 0 24px; }
.auth-logo { font-family: 'Unbounded', sans-serif; font-size: 56px; font-weight: 900; background: linear-gradient(135deg, var(--purple-light), #c084fc, var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; position:relative; display:inline-block; }
.auth-logo::after { content:''; display:block; width:50%; height:2px; margin:3px auto 0; background:linear-gradient(90deg,transparent,var(--purple-light),var(--purple),var(--purple-light),transparent); border-radius:2px; }
.auth-subtitle { font-size: 14px; color: var(--text2); margin-top: -8px; margin-bottom: 4px; }
.auth-input { width: 100%; padding: 14px 16px; font-size: 15px; font-family: 'Inter', sans-serif; border: 1.5px solid var(--border); border-radius: var(--radius-sm); outline: none; color: var(--text); background: var(--card); transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; }
.auth-input:focus { border-color: var(--purple-light); box-shadow: 0 0 0 3px rgba(167,139,250,0.15); }
.auth-input::placeholder { color: var(--text3); }
.auth-input-wrap { position: relative; width: 100%; }
.auth-input-wrap .auth-input { padding-right: 44px; }
.auth-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 4px; touch-action: manipulation; color: var(--text2); line-height: 1; }
.auth-eye svg { transition: transform 0.25s ease, opacity 0.2s ease; display: block; }
.auth-eye:active svg { transform: scale(0.8); }
.auth-btn { width: 100%; padding: 14px; border: none; border-radius: 50px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; transition: transform 0.1s, opacity 0.2s; touch-action: manipulation; }
.auth-btn:active { transform: scale(0.97); }
.auth-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.auth-btn-primary { background: linear-gradient(135deg, var(--purple), #6d28d9); color: #fff; }
.auth-link { font-size: 13px; color: var(--purple-light); cursor: pointer; text-decoration: none; font-weight: 500; transition: opacity 0.2s; }
.auth-error { width: 100%; font-size: 12px; color: var(--danger); text-align: center; min-height: 18px; }
.auth-error:empty { opacity: 0; }
.auth-error.show { animation: errorPop 0.35s ease; }

/* SUCCESS */
#successOverlay { position: fixed; inset: 0; z-index: 99999; background: linear-gradient(135deg, var(--bg) 0%, var(--card) 100%); display: none; align-items: center; justify-content: center; flex-direction: column; gap: 20px; }
#successOverlay.active { display: flex; }
.success-circle { width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), #6d28d9); display: flex; align-items: center; justify-content: center; animation: successPop 0.6s cubic-bezier(0.34,1.56,0.64,1) both; }
.success-circle svg { width: 44px; height: 44px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.success-circle svg polyline { animation: checkDraw 0.5s 0.3s ease both; }
.success-text { font-family: 'Unbounded', sans-serif; font-size: 22px; font-weight: 700; animation: fadeIn 0.5s 0.4s ease both; background: linear-gradient(135deg, var(--purple-light), #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.success-sub { font-size: 13px; color: var(--text2); animation: fadeIn 0.5s 0.6s ease both; }
@keyframes successPop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes checkDraw { 0% { stroke-dashoffset: 30; stroke-dasharray: 30; } 100% { stroke-dashoffset: 0; } }

/* PROFILE SETUP (after reg) */
#setupScreen {
  position: fixed; inset: 0; z-index: 99999;
  background: linear-gradient(135deg, var(--bg) 0%, var(--card) 100%);
  display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: 16px; padding: 24px;
}
#setupScreen.active { display: flex; }
.setup-box { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.setup-title { font-family: 'Unbounded', sans-serif; font-size: 18px; font-weight: 700; color: var(--text); text-align: center; }
.setup-desc { font-size: 13px; color: var(--text2); text-align: center; margin-bottom: 4px; }
.setup-input { width: 100%; padding: 14px 16px; font-size: 15px; font-family: 'Inter', sans-serif; border: 1.5px solid var(--border); border-radius: var(--radius-sm); outline: none; color: var(--text); background: var(--card); transition: border-color 0.2s; -webkit-appearance: none; }
.setup-input:focus { border-color: var(--purple-light); }
.setup-input::placeholder { color: var(--text3); }
.setup-input-wrap { width: 100%; display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--card); transition: border-color 0.2s; }
.setup-input-wrap:focus-within { border-color: var(--purple-light); }
.setup-input-prefix { padding: 14px 0 14px 16px; font-size: 15px; color: var(--text2); font-weight: 600; white-space: nowrap; }
.setup-input-wrap .setup-input { border: none; padding-left: 4px; background: transparent; }
.setup-input-wrap .setup-input:focus { box-shadow: none; }

.force-uname-ok { color:#22c55e; }
.force-uname-error { color:#ef4444; }
.force-uname-checking { color:var(--text3); }
/* APP */
#app { display: none; height: 100dvh; width: 100%; flex-direction: column; background: var(--bg); z-index: 9000; }
#app.active { display: flex; }

.app-body { display: flex; flex: 1; overflow: hidden; min-height: 0; }

/* HEADER */
.app-header { height: 52px; background: var(--card); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; flex-shrink: 0; }
.app-header-logo { font-family: 'Unbounded', sans-serif; font-size: 13px; font-weight: 700; display:inline-flex; align-items:center; gap:6px; }
.app-header-logo .logotext { font-family:'Unbounded',sans-serif; background: linear-gradient(135deg, var(--purple-light), #c084fc, var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position:relative; transition:opacity .25s ease; }
.app-header-logo .logotext::after { content:''; display:block; width:100%; height:2px; margin-top:2px; background:linear-gradient(90deg,var(--purple-light),var(--purple),var(--purple-light)); border-radius:2px; }
.app-header-version { font-family: 'Inter', sans-serif; font-size: 9px; color: var(--text3); font-weight: 400; background: none; -webkit-text-fill-color: var(--text3); }
.app-header-right { display: flex; gap: 10px; align-items: center; }
.app-header-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,0.05); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background 0.2s, transform 0.2s; touch-action: manipulation; position:relative; }
.app-header-btn:active { background: rgba(255,255,255,0.12); }
.app-header-btn:hover { transform: scale(1.15); }
.app-header-avatar-placeholder { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; background: rgba(167,139,250,0.2); color: var(--purple-light); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; border: 2px solid var(--purple); transition: transform 0.2s ease; }
.app-header-avatar-placeholder:hover { transform: scale(1.15); }

/* SIDEBAR */
.sidebar { width: var(--sidebar-w); background: var(--card); border-right: 1px solid var(--border); display: none; flex-direction: column; padding: 12px 0; flex-shrink: 0; }
.sidebar-item { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: none; border: none; cursor: pointer; color: var(--text); font-size: 13px; font-family: 'Inter', sans-serif; touch-action: manipulation; text-align: left; }
.sidebar-item:hover { background: rgba(167,139,250,0.08); }
.sidebar-item:active { background: rgba(167,139,250,0.15); }
.sidebar-item .nav-icon { font-size: 18px; }
.sidebar-item.active { color: var(--purple-light); background: rgba(167,139,250,0.1); border-right: 3px solid var(--purple); }

/* CONTENT AREA */
.app-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 80px; }
.app-content::-webkit-scrollbar { width: 3px; }
.app-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* POST */
.post { background: var(--card); border-radius: var(--radius); margin: 8px 12px; padding: 16px; animation: fadeIn 0.35s ease; border: 1px solid var(--border); transition: box-shadow 0.4s ease; }
.post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.post-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, rgba(167,139,250,0.2), rgba(124,58,237,0.2)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--purple-light); }
.post-author { font-weight: 600; font-size: 13px; }
.post-user { font-size: 10px; color: var(--text3); margin-top: 1px; }
.post-time { font-size: 10px; color: var(--text2); margin-top: 2px; }
.post-text { font-size: 14px; line-height: 1.6; color: var(--text); word-break: break-word; white-space: pre-wrap; }
.post-actions { display: flex; gap: 32px; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--border); }
.post-action { display: flex; align-items: center; gap: 6px; font-size: 18px; color: var(--text2); cursor: pointer; background: none; border: none; font-family: 'Inter', sans-serif; transition: color 0.2s; touch-action: manipulation; padding: 4px 2px; }
.post-action:active { transform: scale(0.92); }
.post-action.liked { color: var(--danger); }
.post-action span { font-size: 14px; }

.new-post-bar { margin: 8px 12px; background: var(--card); border-radius: var(--radius); padding: 12px 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: background 0.2s; border: 1px solid var(--border); }
.new-post-bar:active { background: rgba(255,255,255,0.03); }
.new-post-bar-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: rgba(167,139,250,0.2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--purple-light); }
.new-post-bar-text { color: var(--text3); font-size: 13px; flex: 1; }

/* BOTTOM NAV (mobile) */
.bottom-nav { height: 60px; background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-evenly; flex-shrink: 0; position: fixed; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); left: 10px; right: 10px; z-index: 100; border-radius: 20px; box-shadow: 0 6px 22px rgba(0,0,0,0.16); }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; color: var(--text); font-size: 9px; font-family: 'Inter', sans-serif; touch-action: manipulation; min-width: 48px; padding: 4px 0; }
.nav-item .nav-icon { font-size: 20px; line-height: 1; }
.nav-item.active { color: var(--purple-light); }
.nav-item .nav-icon svg, .sidebar-item .nav-icon svg, .nav-item .nav-icon, .sidebar-item .nav-icon { transition: transform 0.18s ease; }
.nav-item.active .nav-icon svg, .sidebar-item.active .nav-icon svg { transform: scale(1.22); }
.nav-item { transition: color 0.15s ease, background 0.15s ease; }
.nav-item.drag-hover { color: var(--purple-light); background: rgba(124,58,237,0.13); border-radius: 14px; }
.nav-item.drag-hover .nav-icon svg { transform: scale(1.28); }
/* При муте недоступные кнопки навигации выглядят серыми */
.nav-item.muted-off, .sidebar-item.muted-off { opacity: 0.45; filter: grayscale(1); }

/* MODAL */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 15000; display: none; align-items: flex-end; justify-content: center; backdrop-filter: blur(4px); }
.modal-overlay.active { display: flex; }
.modal-content { background: var(--card); border-radius: var(--radius) var(--radius) 0 0; width: 100%; max-width: 500px; max-height: 80vh; overflow-y: auto; padding: 24px 20px; }
.modal-overlay.active .modal-content { animation: slideUp 0.3s ease; }
#createChannelModal { align-items:center !important; justify-content:center !important; }
#createChannelModal .modal-content { animation: fadeIn 0.2s ease !important; border-radius:16px !important; max-height:90vh; overflow-y:auto; }
#chatProfileModal { align-items:center !important; justify-content:center !important; }
#chatProfileModal .modal-content { animation: fadeIn 0.2s ease !important; border-radius:18px !important; max-width:360px; max-height:85vh; }
.chat-profile-cat-row { display:flex; align-items:center; justify-content:space-between; padding:11px 4px; border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.15s; border-radius:8px; }
.chat-profile-cat-row:last-child { border-bottom:none; }
.chat-profile-cat-row:hover { background:rgba(167,139,250,0.08); }
.chat-profile-cat-left { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text); }
.chat-profile-cat-count { font-size:13px; color:var(--text3); display:flex; align-items:center; gap:6px; }
.chat-cat-item:hover { background:rgba(167,139,250,0.08); }
.chat-cat-thumb { transition:opacity 0.15s; }
.chat-cat-thumb:hover { opacity:0.8; }

/* Поиск по переписке (кнопка «Поиск» в меню чата).
   Полоса поиска встаёт на место поля ввода, список совпадений всплывает над ней. */
.chat-search-list { position:absolute; left:0; right:0; bottom:100%; margin-bottom:6px; max-height:46vh; overflow-y:auto; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:0 8px 28px rgba(0,0,0,0.35); padding:4px 6px; z-index:30; animation:fadeIn 0.15s ease; }
.chat-search-row { padding:10px 8px; border-bottom:1px solid var(--border); cursor:pointer; border-radius:8px; transition:background 0.15s; }
.chat-search-row:hover { background:rgba(167,139,250,0.08); }
.chat-search-row:last-child { border-bottom:none; }
.chat-search-txt { font-size:13px; color:var(--text); word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.chat-search-txt mark { background:rgba(167,139,250,0.35); color:inherit; border-radius:3px; padding:0 1px; }
.chat-search-meta { font-size:11px; color:var(--text3); margin-top:3px; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-title { font-size: 17px; font-weight: 700; margin-bottom: 14px; text-align: center; }
.modal-textarea { width: 100%; min-height: 110px; padding: 14px; font-size: 14px; font-family: 'Inter', sans-serif; border: 1.5px solid var(--border); border-radius: var(--radius-sm); outline: none; resize: vertical; background: var(--card); color: var(--text); transition: border-color 0.2s; line-height: 1.5; }
.modal-textarea:focus { border-color: var(--purple-light); }
.modal-textarea::placeholder { color: var(--text3); }
.modal-count { text-align: right; font-size: 10px; color: var(--text3); margin-top: 4px; }
.modal-btn { width: 100%; padding: 13px; margin-top: 10px; background: linear-gradient(135deg, var(--purple), #6d28d9); color: #fff; border: none; border-radius: 50px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; transition: transform 0.2s ease; touch-action: manipulation; }
.modal-btn:active { transform: scale(0.97); }
.modal-btn:hover { transform: scale(1.05); }
.sub-btn{ transition: background-color .25s ease, color .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1); align-self:flex-start; }
.sub-btn.pop{ animation: subBtnPop .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes subBtnPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.15); } 100%{ transform:scale(1); } }
.sub-btn.sub-flash{ animation: subBtnFlash .7s ease; }
@keyframes subBtnFlash{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.9); }
  60%{ box-shadow:0 0 0 8px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
body.energy-save .sub-btn.pop, body.energy-save .sub-btn.sub-flash{ animation:none!important; }
.touch-hover { transform: scale(1.05) !important; }
.notif-switch { position:relative; display:inline-block; width:44px; height:24px; cursor:pointer; flex-shrink:0; }
.notif-switch input { opacity:0; width:0; height:0; }
.notif-switch .track { position:absolute; inset:0; background:#555; border-radius:24px; transition:background 0.3s; }
.notif-switch .knob { position:absolute; left:2px; top:2px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform 0.3s; }
.notif-switch input:checked + .track { background:#22c55e; }
.notif-switch input:checked + .track + .knob { transform:translateX(20px); }
.chat-unread { min-width:20px; height:20px; border-radius:10px; background:var(--danger); border:2px solid var(--card); font-size:10px; font-weight:700; color:#fff; display:flex; align-items:center; justify-content:center; padding:0 4px; box-sizing:border-box; }
html, body { touch-action: manipulation; }
body { overflow-x:hidden; }
@keyframes coinSpin { from{transform:rotateY(0deg)} to{transform:rotateY(360deg)} }
@keyframes coinGlow { 0%,100%{box-shadow:0 0 20px rgba(168,85,247,0.45),0 0 55px rgba(124,58,237,0.2)} 50%{box-shadow:0 0 40px rgba(168,85,247,0.8),0 0 90px rgba(124,58,237,0.45)} }
.post-media-item img, .post-media-item video { touch-action:manipulation; -webkit-user-select:none; user-select:none; }
.modal-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.modal-btn-ghost { background: transparent; color: var(--text2); margin-top: 2px; }

/* PROFILE */
.profile-card { text-align: center; padding: 32px 16px 20px; background: var(--design-card-bg, var(--card)); margin: 8px 12px; border-radius: var(--radius); border: 1px solid var(--design-card-border, var(--border)); }
.profile-avatar-wrap { width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 14px; position: relative; cursor: pointer; border: 3px solid var(--design-avatar-border, transparent); }
.profile-avatar-big { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, rgba(167,139,250,0.2), rgba(124,58,237,0.3)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 38px; color: var(--purple-light); border: 3px solid var(--purple); transition: filter 0.2s; }
.profile-avatar-overlay { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; font-size: 36px; color: #fff; border: 3px solid var(--purple); }
.profile-avatar-wrap:hover .profile-avatar-overlay, .profile-avatar-wrap:active .profile-avatar-overlay { opacity: 1; }
.profile-name { font-size: 22px; font-weight: 700; }
.profile-username { font-size: 13px; color: var(--text3); margin-top: 2px; }
.profile-bio { font-size: 13px; color: var(--text2); margin-top: 8px; padding: 0 20px; max-width: 500px; margin-left: auto; margin-right: auto; word-break: break-word; white-space: pre-wrap; }
.profile-stats { display: flex; justify-content: center; gap: 36px; margin-top: 16px; }
.profile-stat { text-align: center; }
.profile-stat-num { font-size: 20px; font-weight: 700; }
.profile-stat-label { font-size: 11px; color: var(--text2); margin-top: 2px; }

/* SECTOR Z */
.sz-panel {
  margin-top: 14px; max-width: 420px; margin-left: auto; margin-right: auto;
  border-radius: 12px; overflow: hidden; position: relative;
  background: linear-gradient(135deg, #221536, #1a1a2e 60%, #241a3f);
  border: 1px solid rgba(167,139,250,0.4);
  box-shadow: 0 0 0 1px rgba(167,139,250,0.1), 0 6px 18px -8px rgba(124,58,237,0.4);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sz-panel:hover { border-color: rgba(167,139,250,0.75); box-shadow: 0 0 0 1px rgba(167,139,250,0.25), 0 8px 22px -8px rgba(124,58,237,0.55); }
.sz-panel::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(167,139,250,0.18), transparent);
  animation: szShine 3.2s ease-in-out infinite; pointer-events: none; z-index: 0;
}
@keyframes szShine { 0% { left: -100%; } 55%, 100% { left: 100%; } }
.sz-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 14px; cursor: pointer; user-select: none;
  position: relative; z-index: 1;
}
.sz-title {
  font-family: 'Unbounded', sans-serif; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  background: linear-gradient(135deg, #e9d5ff, #a78bfa, #7c3aed);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sz-arrow { color: #a78bfa; flex-shrink: 0; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.sz-panel.sz-open .sz-arrow { transform: rotate(180deg); }
.sz-body { position: relative; z-index: 1; max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
.sz-panel.sz-open .sz-body { max-height: 220px; }
.sz-inner { text-align: left; padding: 2px 14px 15px; }
.sz-nick-label { font-size: 10px; letter-spacing: 1.2px; color: rgba(255,255,255,0.5); text-transform: uppercase; }
.sz-nick-value { font-size: 16px; font-weight: 700; color: #f1f5f9; margin-top: 2px; }
.sz-lvl { margin-top: 10px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.75); }
.sz-lvl-value { color: #a78bfa; font-weight: 800; font-size: 15px; margin-left: 2px; }
.sz-squares { display: flex; gap: 10px; margin-top: 12px; }
.sz-square {
  flex: 1; aspect-ratio: 1; max-width: 64px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; color: var(--purple-light); cursor: pointer;
  background: var(--card);
  border: 1.5px solid var(--purple-light);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sz-square:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 0 0 1px var(--purple-light), 0 8px 18px -6px rgba(124,58,237,0.5); }

.profile-device { text-align: center; font-size: 10px; color: var(--text3); padding: 16px 12px 12px; }

/* SEARCH */
.search-input { width: 100%; padding: 12px 16px; font-size: 14px; font-family: 'Inter', sans-serif; border: 1.5px solid var(--border); border-radius: var(--radius-sm); outline: none; color: var(--text); background: var(--card); transition: border-color 0.2s; -webkit-appearance: none; }
.search-input:focus { border-color: var(--purple-light); }
.search-input::placeholder { color: var(--text3); }
.user-row { background: var(--card); border-radius: var(--radius-sm); margin: 0 12px 6px; padding: 12px 14px; display: flex; align-items: center; gap: 2px; cursor: pointer; transition: background 0.2s; border: 1px solid var(--border); }
.user-row:active { background: rgba(255,255,255,0.03); }
/* список чатов: плоские строки, разделённые линиями (не карточки) */
.user-row.ms-row { background: transparent; border: none; border-bottom: 1px solid transparent; border-radius: 0; margin: 0 12px !important; max-width: none !important; padding: 12px 6px; }
.user-row.ms-row.ms-line { border-bottom: 1px solid var(--border); }
.user-row.ms-row:active { background: rgba(255,255,255,0.04); }
.user-row.ms-row:last-child { border-bottom: none; }

.empty-state { text-align: center; padding: 50px 24px; color: var(--text2); }
.empty-state-icon { font-size: 40px; margin-bottom: 10px; }
.empty-state-text { font-size: 13px; }

/* ANIMATIONS */
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-12px); } }
@keyframes marquee { 0% { transform: translateX(0); } 10% { transform: translateX(0); } 75% { transform: translateX(calc(-100% + 160px)); } 85% { transform: translateX(calc(-100% + 160px)); } 100% { transform: translateX(0); } }
.audio-name-wrap { overflow:hidden; white-space:nowrap; flex:1; }
.audio-name { display:inline-block; white-space:nowrap; width:auto; }
.audio-name-wrap .audio-name { overflow:hidden; text-overflow:ellipsis; max-width:140px; }
.audio-name-wrap:hover .audio-name { overflow:hidden; text-overflow:ellipsis; animation:none; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }
@keyframes errorPop { 0%{opacity:0;transform:translateY(-6px) scale(0.95)} 50%{transform:translateY(2px) scale(1.02)} 100%{opacity:1;transform:translateY(0) scale(1)} }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(20px); } }
.shake { animation: shake 0.35s ease; }
.anim-in { animation: fadeIn 0.1s ease; }
.status-anim { animation: statusIn 0.25s ease; display:inline-block; }
@keyframes statusIn { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform: translateY(0); } }
.act-cached * { animation: none !important; }
.anim-stagger { animation: fadeIn 0.4s ease both; }
@keyframes pageFade { from { opacity:0.3; } to { opacity:1; } }
#appContent.page-in { animation: pageFade 0.18s ease; }
.gift-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; max-width:420px; margin:0 auto; padding:0 12px; box-sizing:border-box; }
@media (min-width: 900px) { .gift-grid { grid-template-columns:repeat(8,1fr); max-width:1280px; padding:0 24px; } }

/* COMMENTS PAGE */
.cmt-page-title { font-size:15px; font-weight:600; color:var(--text); padding:12px 16px; background:var(--card); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; flex-shrink:0; position:relative; z-index:20; }
.chat-ctx-menu { position:absolute; top:100%; right:8px; z-index:1000; min-width:230px; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:0 14px 38px rgba(0,0,0,0.45); overflow:hidden; transform-origin:top right; max-height:0; transform:translateY(-6px) scaleY(0.85); pointer-events:none; transition:max-height .24s ease, transform .24s cubic-bezier(0.16,1,0.3,1); }
.chat-ctx-menu.open { max-height:300px; transform:translateY(6px) scaleY(1); pointer-events:auto; }
.chat-ctx-item { display:flex; align-items:center; gap:10px; width:100%; padding:13px 16px; background:var(--card); border:none; color:var(--text); font-size:13.5px; font-weight:600; cursor:pointer; text-align:left; transition:background .15s; font-family:inherit; }
.chat-ctx-item:hover { background:rgba(128,128,145,0.14); }
.chat-ctx-item svg { flex-shrink:0; color:var(--text2); }
.chat-ctx-item + .chat-ctx-item { border-top:1px solid var(--border); }
.chat-ctx-item.danger { color:#ef4444; }
.chat-ctx-item.danger svg { color:#ef4444; }
.chat-ctx-item.danger:hover { background:rgba(239,68,68,0.1); }
.cmt-page-title button { background:none; border:none; color:var(--text); font-size:18px; cursor:pointer; padding:4px; }
.cmt-input-row { display:flex; gap:8px; padding:12px 16px 20px; background:var(--card); border-top:1px solid var(--border); flex-shrink:0; }
.cmt-page-title.anim-in, .cmt-input-row.anim-in, .cmt-item.anim-in { animation: fadeIn 0.3s ease both; }
.cmt-input-row input, .cmt-input-row textarea { flex:1; padding:11px 14px; font-size:14px; font-family:Inter,sans-serif; border:1.5px solid var(--border); border-radius:12px; outline:none; color:var(--text); background:var(--bg); }
.cmt-input-row input:focus, .cmt-input-row textarea:focus { border-color:var(--purple-light); }
.cmt-input-row input::placeholder, .cmt-input-row textarea::placeholder { color:var(--text3); }
.cmt-input-row button { width:42px; height:42px; border-radius:50%; border:none; background:var(--purple); color:#fff; font-size:17px; cursor:pointer; flex-shrink:0; }
.cmt-input-row button:disabled { opacity:0.4; cursor:not-allowed; }
.cmt-item { padding:10px 16px; border-bottom:1px solid var(--border); display:flex; gap:10px; transition:box-shadow 0.4s ease; }
.cmt-item.highlight { box-shadow:0 0 0 3px var(--purple-light); border-radius:8px; }
.chat-msg { transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.4s ease; }
.chat-msg .audio-item { width:450px!important; max-width:100%!important; }
.chat-msg.highlight { box-shadow:0 0 0 3px var(--purple-light) !important; }
.cmt-item-avatar { width:32px; height:32px; border-radius:50%; flex-shrink:0; }
.cmt-item-body { flex:1; min-width:0; }
.cmt-item-author { font-size:13px; font-weight:600; color:var(--text); }
.cmt-item-text { font-size:13px; color:var(--text2); margin-top:2px; line-height:1.4; word-break:break-word; }
.cmt-item-time { font-size:10px; color:var(--text3); margin-top:2px; }
.cmt-item-actions { display:flex; gap:12px; margin-top:6px; }
.cmt-item-action { background:none; border:none; color:var(--text3); cursor:pointer; font-size:15px; display:flex; align-items:center; gap:3px; padding:3px; touch-action:manipulation; transition:color 0.15s; }
.cmt-item-action:active { transform:scale(0.9); }
.cmt-item-action.liked { color:var(--danger); }
.cmt-item-action span { font-size:11px; color:var(--text3); margin-left:1px; }
.cmt-empty { text-align:center; padding:40px 20px; color:var(--text2); font-size:13px; }
.cmt-pinned { background:rgba(29,155,240,0.05); border-left:2px solid #1d9bf0; }

/* CONTEXT MENU */
.ctx-menu { position:fixed; z-index:30000; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:4px; min-width:160px; box-shadow:0 8px 32px rgba(0,0,0,0.3); visibility:hidden; opacity:0; transform:scale(0.95); transition:opacity 0.12s ease,transform 0.12s ease,visibility 0.12s; }
.ctx-menu.active { visibility:visible; opacity:1; transform:scale(1); }
.ctx-item { display:flex; align-items:center; gap:8px; padding:10px 14px; border:none; background:none; color:var(--text); font-size:13px; width:100%; text-align:left; cursor:pointer; border-radius:8px; font-family:Inter,sans-serif; transition:background 0.15s; }
.ctx-item:hover { background:rgba(167,139,250,0.1); }
.ctx-item.danger { color:var(--danger); }

/* VERIFIED BADGE */
/* Значок целиком нарисован фоном (розетка с градиентом, блик сверху, белая галочка), символ «✓» внутри
   оставлен только для копирования текста и скрыт. Поверх раз в несколько секунд пробегает блик. */
.ver-badge, .ver-badge-grey { position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:22px; width:22px; height:22px; font-size:0; color:transparent; -webkit-text-fill-color:transparent; vertical-align:middle; margin-left:3px; flex-shrink:0; line-height:1;
  background-repeat:no-repeat; background-position:center; background-size:contain; transition:transform .2s cubic-bezier(.34,1.56,.64,1), filter .2s ease; }
.ver-badge { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='5' y1='2' x2='19' y2='22' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%236fd3ff'/%3E%3Cstop offset='.5' stop-color='%231d9bf0'/%3E%3Cstop offset='1' stop-color='%232f5bea'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='12' y1='1' x2='12' y2='13' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8.29 3.04Q12 -1.7 15.71 3.04Q21.69 2.31 20.96 8.29Q25.7 12 20.96 15.71Q21.69 21.69 15.71 20.96Q12 25.7 8.29 20.96Q2.31 21.69 3.04 15.71Q-1.7 12 3.04 8.29Q2.31 2.31 8.29 3.04z' fill='url(%23g)'/%3E%3Cpath d='M8.29 3.04Q12 -1.7 15.71 3.04Q21.69 2.31 20.96 8.29Q25.7 12 20.96 15.71Q21.69 21.69 15.71 20.96Q12 25.7 8.29 20.96Q2.31 21.69 3.04 15.71Q-1.7 12 3.04 8.29Q2.31 2.31 8.29 3.04z' fill='url(%23h)'/%3E%3Cpath d='M7.6 12.5l2.9 2.9 5.9-6.3' fill='none' stroke='%23000' stroke-opacity='.18' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' transform='translate(0 .7)'/%3E%3Cpath d='M7.6 12.5l2.9 2.9 5.9-6.3' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ver-badge-grey { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='5' y1='2' x2='19' y2='22' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23e5e7eb'/%3E%3Cstop offset='.5' stop-color='%239ca3af'/%3E%3Cstop offset='1' stop-color='%235b6472'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='12' y1='1' x2='12' y2='13' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8.29 3.04Q12 -1.7 15.71 3.04Q21.69 2.31 20.96 8.29Q25.7 12 20.96 15.71Q21.69 21.69 15.71 20.96Q12 25.7 8.29 20.96Q2.31 21.69 3.04 15.71Q-1.7 12 3.04 8.29Q2.31 2.31 8.29 3.04z' fill='url(%23g)'/%3E%3Cpath d='M8.29 3.04Q12 -1.7 15.71 3.04Q21.69 2.31 20.96 8.29Q25.7 12 20.96 15.71Q21.69 21.69 15.71 20.96Q12 25.7 8.29 20.96Q2.31 21.69 3.04 15.71Q-1.7 12 3.04 8.29Q2.31 2.31 8.29 3.04z' fill='url(%23h)'/%3E%3Cpath d='M7.6 12.5l2.9 2.9 5.9-6.3' fill='none' stroke='%23000' stroke-opacity='.18' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' transform='translate(0 .7)'/%3E%3Cpath d='M7.6 12.5l2.9 2.9 5.9-6.3' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ver-badge:hover, .ver-badge-grey:hover { transform:scale(1.18) rotate(-6deg); }
/* значок ШГ PLUS — правее галочек, без рамки, с градиентной анимацией */
.plus-badge { display:inline-flex; align-items:center; vertical-align:middle; margin-left:4px; flex-shrink:0; }
.plus-badge svg { display:block; animation:shimmerStroke 4s linear infinite; }
.plus-lock { animation:shimmerStroke 4s linear infinite; }
/* настройки поста: кнопка, сводка, окно, соавторы */
.post-set-btn { margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:20px; border:1.5px solid var(--border); background:transparent; color:var(--text2); font:600 12px 'Inter',sans-serif; cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease, transform .15s ease; touch-action:manipulation; }
.post-set-btn svg { transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.post-set-btn:hover { border-color:var(--purple-light); color:var(--purple-light); }
.post-set-btn:hover svg { transform:rotate(90deg); }
.post-set-btn:active { transform:scale(.95); }
.post-set-btn.on { border-color:var(--purple-light); color:var(--purple-light); background:rgba(167,139,250,.1); }
.post-set-sum { flex-wrap:wrap; gap:6px; margin:8px 0 2px; }
.post-set-chip { padding:5px 10px; border-radius:20px; background:rgba(167,139,250,.14); color:var(--purple-light); font-size:11.5px; font-weight:600; cursor:pointer; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; animation:plusFeatIn .3s cubic-bezier(.22,1,.36,1) both; }
/* окно настроек открывается поверх окна создания поста */
#postSettingsModal { z-index:15001; }
.post-set { text-align:left; }
.post-set .modal-title { text-align:center; }
.post-set .post-paid-row, .post-set .as-row, .post-co { margin:0 0 10px; padding:12px; border-radius:14px; background:rgba(167,139,250,.07); }
.post-set .as-row { padding:10px 12px; }
.post-co-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.post-co-add { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:20px; border:1px solid var(--border); background:var(--card); color:var(--text); font:600 12.5px 'Inter',sans-serif; cursor:pointer; transition:border-color .2s ease, transform .15s ease; }
.post-co-add:hover { border-color:var(--purple-light); }
.post-co-add:active { transform:scale(.95); }
.post-co-add.lock { color:var(--purple-light); border-color:rgba(167,139,250,.4); }
.post-co-add.lock svg { width:14px; height:14px; }
.post-co-note { font-size:12px; color:var(--text3); margin-top:8px; }
.post-co-cnt { font-size:12px; font-weight:600; color:var(--text3); margin-left:4px; }
/* пост, открытый из уведомления: мягкая подсветка, гаснет сама */
.post-focus { animation:postFocus 2.6s ease both; }
@keyframes postFocus { 0% { box-shadow:0 0 0 0 rgba(139,92,246,0); } 12% { box-shadow:0 0 0 3px rgba(139,92,246,.85), 0 0 26px rgba(139,92,246,.45); } 70% { box-shadow:0 0 0 3px rgba(139,92,246,.6), 0 0 18px rgba(139,92,246,.3); } 100% { box-shadow:0 0 0 0 rgba(139,92,246,0); } }
@media (prefers-reduced-motion:reduce) { .post-focus { animation:none; outline:2px solid var(--purple-light); } }
/* соавторы в шапке поста */
/* список авторов может быть длинным — разрешаем перенос, иначе он уезжает за карточку */
.co-tag { font-weight:600; color:var(--purple-light); cursor:pointer; white-space:normal; }
.co-tag .co-nm { display:inline-block; max-width:120px; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; }
/* имя вместе со своими значками; «и ещё N» — отдельно, с отступом, чтобы не липло к имени */
.co-who { white-space:nowrap; vertical-align:bottom; }
.co-rest { margin-left:5px; }
/* аватарки авторов, сложенные в квадратик */
.co-avs { position:relative; display:inline-block; width:38px; height:38px; flex-shrink:0; cursor:pointer; }
/* без обводки-рамки: только сами аватарки. background оставлен, чтобы сквозь
   полупрозрачные кружки-заглушки не просвечивала аватарка под ними */
.co-av { position:absolute; display:flex; border-radius:50%; background:var(--card); transition:transform .22s cubic-bezier(.34,1.56,.64,1); }
.co-av > img, .co-av > div { width:100% !important; height:100% !important; font-size:10px !important; }
.co-av-more { width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#3b82f6,#7c3aed); color:#fff; font-size:9px; font-weight:700; }
.co-avs:hover .co-av:nth-child(1) { transform:translate(-1.5px,-1.5px); }
.co-avs:hover .co-av:nth-child(2) { transform:translate(1.5px,-1.5px); }
.co-avs:hover .co-av:nth-child(3) { transform:translate(-1.5px,1.5px); }
.co-avs:hover .co-av:nth-child(4), .co-avs:hover .co-av:nth-child(2):last-child { transform:translate(1.5px,1.5px); }
@media (prefers-reduced-motion:reduce) { .co-av { transition:none; } }
.co-tag:hover { text-decoration:underline; }
.co-tag.wait { color:var(--text3); font-weight:500; font-size:.88em; }
@media (prefers-reduced-motion:reduce) { .post-set-chip { animation:none; } .post-set-btn svg { transition:none; } }
/* автоответ (ШГ PLUS): экран настройки и пометка в чате */
.ar-field { position:relative; margin-top:4px; }
.ar-text { min-height:92px; resize:vertical; line-height:1.45; padding-bottom:24px; font-family:inherit; display:block; }
.ar-count { position:absolute; right:12px; bottom:16px; font-size:10px; color:var(--text3); pointer-events:none; }
.ar-hint { font-size:12px; color:var(--text2); line-height:1.5; margin:10px 0 4px; }
.ar-sect { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid var(--border); font-size:14px; font-weight:700; }
.ar-add { display:inline-flex; align-items:center; gap:5px; padding:7px 12px; border-radius:10px; border:1px solid rgba(167,139,250,.35); background:rgba(167,139,250,.1); color:var(--purple-light); font-size:12px; font-weight:600; cursor:pointer; transition:transform .15s ease, background .15s ease; }
.ar-add:hover { background:rgba(167,139,250,.18); }
.ar-add:active { transform:scale(.95); }
.ar-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; animation:plusFeatIn .3s cubic-bezier(.22,1,.36,1) both; }
.ar-row-main { display:flex; align-items:center; gap:10px; min-width:0; cursor:pointer; }
.ar-empty { font-size:12px; color:var(--text3); text-align:center; padding:16px 0 6px; }
.ar-tag { display:flex; align-items:center; gap:4px; font-size:10px; font-weight:600; letter-spacing:.02em; opacity:.75; margin-bottom:3px; }
/* возможности ШГ PLUS — компактные карточки в два столбца */
.plus-feats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0 2px; margin-bottom:12px; }
.plus-feat { text-align:left; padding:10px; border-radius:14px; background:var(--bg); border:1px solid var(--border); min-width:0;
  animation:plusFeatIn .35s cubic-bezier(.22,1,.36,1) both; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.plus-feat:hover { transform:translateY(-2px); border-color:rgba(167,139,250,.5); box-shadow:0 6px 18px rgba(124,58,237,.16); }
.plus-feat-ic { width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; box-shadow:0 4px 12px rgba(59,130,246,.25); }
.plus-feat-title { font-size:12.5px; font-weight:700; color:var(--text); line-height:1.25; overflow-wrap:anywhere; }
.plus-feat-desc { font-size:11px; color:var(--text3); margin-top:3px; line-height:1.35; overflow-wrap:anywhere; }
@keyframes plusFeatIn { from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .plus-feat { animation:none; transition:none; } }
/* значок ШГ PLUS в чужом профиле — нажимается, открывает окно о подписке */
.plus-badge-btn { cursor:pointer; border-radius:8px; outline:none; -webkit-tap-highlight-color:transparent; transition:transform .28s cubic-bezier(.34,1.56,.64,1), filter .28s ease; }
.plus-badge-btn:hover, .plus-badge-btn:focus-visible { transform:scale(1.25) rotate(10deg); filter:drop-shadow(0 0 7px rgba(167,139,250,.95)); }
.plus-badge-btn:active { transform:scale(.9); }
.plus-owner { text-align:center; max-width:340px; animation:plusOwnerIn .32s cubic-bezier(.34,1.4,.64,1) both; }
.plus-owner-ic { width:96px; height:96px; margin:4px auto 14px; border-radius:28px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 25%,rgba(96,165,250,.28),rgba(124,58,237,.16) 60%,rgba(124,58,237,.05)); border:1px solid rgba(167,139,250,.35);
  animation:plusOwnerGlow 2.6s ease-in-out infinite; }
.plus-owner-ic svg { animation:shimmerStroke 4s linear infinite, plusOwnerFloat 3.2s ease-in-out infinite; }
.plus-owner-title { font-size:17px; font-weight:700; line-height:1.35; margin-bottom:8px; overflow-wrap:anywhere; }
.plus-owner-brand { background:linear-gradient(90deg,#60a5fa,#a78bfa,#7c3aed,#a78bfa,#60a5fa); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:shimmer 4s linear infinite; white-space:nowrap; }
.plus-owner-text { font-size:13px; color:var(--text2); line-height:1.45; margin-bottom:16px; }
.plus-owner-btn { background:linear-gradient(90deg,#3b82f6,#8b5cf6,#7c3aed); color:#fff; border:none; font-weight:700; box-shadow:0 6px 18px rgba(124,58,237,.35); }
.plus-owner-mine { display:flex; align-items:center; justify-content:center; gap:7px; padding:11px 12px; margin-bottom:6px; border-radius:12px; font-size:13px; font-weight:600; color:var(--purple-light); background:rgba(167,139,250,.1); border:1px solid rgba(167,139,250,.22); }
@keyframes plusOwnerIn { from { opacity:0; transform:translateY(14px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes plusOwnerGlow { 0%,100% { box-shadow:0 0 0 rgba(139,92,246,0); } 50% { box-shadow:0 0 26px rgba(139,92,246,.45); } }
@keyframes plusOwnerFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@media (prefers-reduced-motion:reduce) { .plus-owner, .plus-owner-ic, .plus-owner-ic svg { animation:none; } .plus-badge-btn { transition:none; } }
.plus-name { background:linear-gradient(90deg,#60a5fa,#a78bfa,#7c3aed,#a78bfa,#60a5fa); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:shimmer 4s linear infinite; }
.plus-name .plus-badge { -webkit-text-fill-color:#fff; }

/* TITLES */
.title-badge { display:inline-flex; align-items:center; padding:3px 10px; font-size:11px; font-weight:600; border-radius:6px; margin-top:6px; line-height:1.4; letter-spacing:0.3px; white-space:nowrap; }
.title-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; max-width:400px; margin:0 auto; }
.title-grid-btn { display:flex; align-items:center; justify-content:center; padding:18px 8px; font-size:13px; font-weight:600; border-radius:6px; cursor:pointer; border:2px solid transparent; transition:opacity 0.15s,transform 0.1s; font-family:'Inter',sans-serif; touch-action:manipulation; min-height:52px; }
.title-grid-btn:active { transform:scale(0.96); }

/* OFFLINE DOT */
@keyframes dotWave { 0%,100%{opacity:0.3;transform:scale(0.6)} 50%{opacity:1;transform:scale(1.4);color:#fbbf24} }
.dot-wave { display:inline-flex; align-items:center; gap:2px; margin-left:4px; vertical-align:middle; }
.dot-wave span { display:inline-block; width:5px; height:5px; border-radius:50%; background:currentColor; animation:dotWave 1.2s ease infinite; }
.dot-wave span:nth-child(2) { animation-delay:0.15s; }
.dot-wave span:nth-child(3) { animation-delay:0.3s; }
.cooldown-bar { animation:cooldownIn 0.4s ease; margin:8px 12px; background:var(--card); border-radius:var(--radius); border:1px solid var(--border); }
@keyframes cooldownIn { from{opacity:0;transform:translateY(-8px)} to{opacity:0.9;transform:translateY(0)} }

/* TOAST */
.toast { position: fixed; bottom: 80px; left: 50%; z-index: 99999; transform: translateX(-50%); background: var(--card); color: var(--text); padding: 12px 24px; border-radius: 50px; font-size: 13px; font-weight: 500; border: 1px solid var(--border); pointer-events: none; animation: toastIn 0.3s ease; box-shadow: 0 4px 24px rgba(0,0,0,0.3); }
.toast.hide { animation: toastOut 0.25s ease forwards; }

/* RESPONSIVE */
@media (min-width: 768px) {
  .sidebar { display: flex; }
  .bottom-nav { display: none; }
  .app-content { padding-bottom: 12px; }
  .post { margin: 8px auto; max-width: 600px; }
  .new-post-bar, .cooldown-bar { max-width: 600px; margin: 8px auto; }
  .user-row { max-width: 588px; margin: 0 auto 6px; }
  .empty-state { max-width: 600px; margin: 0 auto; }
  .search-input { max-width: 588px; margin: 0 auto; display: block; }
  #searchResults { max-width: 600px; margin: 0 auto; }
  .profile-card { max-width: 700px; margin: 8px auto; }
  .profile-device { max-width: 700px; margin: 0 auto; }
}
@media (min-width: 1200px) {
  .profile-card { max-width: none; margin: 8px 24px; border-radius: var(--radius); }
  .profile-device { max-width: none; margin: 0 24px; }
  .post { max-width: none; margin: 8px 24px; }
  .new-post-bar { max-width: none; margin: 8px 24px; }
  .user-row { max-width: none; margin: 0 24px 6px; }
  .empty-state { max-width: none; margin: 0 24px; }
  .search-input { max-width: none; margin: 0 24px; display: block; }
  #searchResults { max-width: none; margin: 0 24px; }
}
.dev-toggle { position:relative; display:inline-block; width:44px; height:24px; cursor:pointer; }
.dev-toggle input { opacity:0; width:0; height:0; position:absolute; }
.dev-toggle-bg { position:absolute; inset:0; background:var(--border); border-radius:12px; transition:0.3s; }
.dev-toggle input:checked + .dev-toggle-bg { background:var(--purple); }
.dev-toggle-slider { position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; transition:0.3s; }
.dev-toggle input:checked + .dev-toggle-bg + .dev-toggle-slider { transform:translateX(20px); }

/* Админ-панель: сетка */
.admin-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:500px; margin:0 auto; }
.admin-grid > div { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:14px 8px; text-align:center; }
.admin-grid .admin-grid-icon { font-size:clamp(28px,6vw,40px); color:#fff; width:clamp(44px,10vw,64px); height:clamp(44px,10vw,64px); border-radius:14px; display:flex; align-items:center; justify-content:center; margin:0 auto; }
@media (max-width: 550px) { .admin-grid { gap:5px; } .admin-grid > div { padding:10px 4px; border-radius:14px; } .admin-grid .admin-grid-icon { width:38px; height:38px; border-radius:10px; font-size:22px; } }

/* Онлайн-точка */
@keyframes onlinePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.7;transform:scale(1.1)} }
.online-dot { position:absolute; bottom:0; right:0; width:10px; height:10px; border-radius:50%; background:#22c55e; border:2px solid var(--card); animation:onlinePulse 2s ease-in-out infinite; transition:opacity 0.6s ease, visibility 0.6s ease; }
.online-dot.offline { opacity:0; visibility:hidden; animation:none; }
/* ШГ PLUS — градиентный онлайн-статус: не переключается рывком, а плавно перетекает из зелёного */
.online-dot::after{ content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:linear-gradient(90deg,#7c3aed,#3b82f6,#a855f7,#3b82f6,#7c3aed); background-size:300% 100%;
  opacity:0; transition:opacity .5s ease; }
.online-dot.plus::after{ opacity:1; } /* градиент статичный — без перелива */
.online-dot.plus{ animation:onlinePulse 2s ease-in-out infinite; } /* пульсация как у зелёной точки */
.online-dot.plus.offline{ animation:none !important; }
.online-dot.plus.offline::after{ opacity:0; }
.online-profile-status.plus { background:linear-gradient(90deg,#7c3aed,#3b82f6,#a855f7,#3b82f6,#7c3aed) !important; background-size:300% 100% !important; animation:onlinePulse 2s ease-in-out infinite !important; }
.avatar-wrap { position:relative; display:inline-block; flex-shrink:0; }

/* Статус в сети в профиле */
.online-profile-status { display:flex; align-items:center; justify-content:center; gap:4px; margin-top:6px; opacity:0; visibility:hidden; transition:opacity 0.6s ease, visibility 0.6s ease; }
.online-profile-status.online { opacity:1; visibility:visible; }

/* Непрочитанные сообщения */
.msg-unread-badge { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#ef4444; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1; box-shadow:0 1px 3px rgba(0,0,0,0.3); }

/* Медиа в постах */
.post-media { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
/* компактная сетка при 2+ медиа */
.media-grid-compact { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:6px; max-width:270px; }
.media-grid-compact[data-n="2"], .media-grid-compact[data-n="4"] { grid-template-columns:repeat(2,1fr); }
.media-grid-compact .post-media-item { width:100%; aspect-ratio:1; border-radius:8px; }
.media-grid-compact .post-media-item img, .media-grid-compact .post-media-item video { width:100%; height:100%; max-height:none; object-fit:cover; border-radius:8px; }
.media-grid-compact .post-media-item .vid-play { width:26px; height:26px; border-width:1.5px; }
.media-grid-compact .post-media-item .vid-play::after { border-left-width:8px; border-top-width:5px; border-bottom-width:5px; }
.media-grid-compact .post-media-item:has(audio) { grid-column:1 / -1; aspect-ratio:auto; }
.chat-msg .media-grid-compact, .cmt-item .media-grid-compact { max-width:210px; }
.post-media-item { border-radius:12px; overflow:hidden; cursor:pointer; max-width:100%; flex-shrink:0; }
.post-media-item { position:relative; }
.post-media-item img, .post-media-item video { display:block; max-width:100%; max-height:400px; object-fit:contain; border-radius:12px; background:#000; }
.post-media-item .vid-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,0.55); border:2px solid rgba(255,255,255,0.7); cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; transition:opacity 0.3s; }
.post-media-item .vid-play::after { content:''; display:block; width:0; height:0; border-left:13px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent; margin-left:3px; }

@media (max-width:768px){.channel-input-wrap{padding-bottom:70px!important}}
/* Полноэкранный просмотр */
.media-viewer { position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,0.92); display:none; align-items:center; justify-content:center; flex-direction:column; backdrop-filter:blur(8px); touch-action:none; }
.media-viewer.active { display:flex; }
.media-viewer-close { position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.15); border:none; color:#fff; font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10; }
.media-viewer-content { max-width:90vw; max-height:80vh; display:flex; align-items:center; justify-content:center; }
.media-viewer-content img, .media-viewer-content video { max-width:100%; max-height:80vh; border-radius:8px; object-fit:contain; }
.media-viewer-download { margin-top:16px; padding:10px 24px; border-radius:50px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:#fff; font-size:13px; cursor:pointer; font-family:'Inter',sans-serif; }
#mvStrip { display:flex; gap:6px; margin-top:14px; max-width:94vw; overflow-x:auto; padding:2px 4px 4px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
#mvStrip::-webkit-scrollbar { height:5px; }
#mvStrip::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.3); border-radius:3px; }
#mvStrip .mv-thumb { width:52px; height:52px; flex-shrink:0; border-radius:8px; overflow:hidden; cursor:pointer; opacity:0.5; border:2px solid transparent; transition:opacity .15s, border-color .15s; }
#mvStrip .mv-thumb.active { opacity:1; border-color:#fff; }
#mvStrip .mv-thumb img, #mvStrip .mv-thumb video { width:100%; height:100%; object-fit:cover; display:block; }

/* Мобильные отступы в скроллах */
@media (max-width:767px){
  #appContent > *:last-child { margin-bottom: 16px; }
  [style*="overflow-x:auto"] { padding: 0 0 8px 4px; }
  [style*="overflow-x:auto"] > *:last-child { margin-right: 16px; }
}

/* Кнопка + для медиа */
.media-add-btn { width:38px; height:38px; border-radius:50%; border:1.5px dashed var(--border); background:transparent; color:var(--text3); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; transition:all 0.2s; touch-action:manipulation; }
.media-add-btn:hover, .media-add-btn:active { background:rgba(167,139,250,0.1); border-color:var(--purple-light); color:var(--purple-light); }
/* ── СТИКЕРЫ ── */
.stk-btn { width:38px; height:38px; border-radius:50%; border:1.5px dashed var(--border); background:transparent; color:var(--text3); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s; touch-action:manipulation; }
.stk-btn:hover, .stk-btn:active { background:rgba(167,139,250,0.1); border-color:var(--purple-light); color:var(--purple-light); }
.stk-overlay { position:fixed; inset:0; z-index:16000; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px); display:flex; align-items:flex-end; justify-content:center; animation:fadeIn .18s ease; }
.stk-sheet { background:var(--card); width:100%; max-width:480px; border-radius:18px 18px 0 0; padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px)); max-height:80vh; overflow-y:auto; animation:slideUp .22s cubic-bezier(.2,.85,.3,1); }
@media (min-width:560px){ .stk-overlay { align-items:center; } .stk-sheet { border-radius:18px; } }
.stk-tab { flex:1; padding:8px; font-size:12px; font-weight:700; border:none; border-radius:9px; cursor:pointer; background:transparent; color:var(--text2); font-family:inherit; }
.stk-tab.stk-tab-on { background:var(--purple); color:#fff; }
.stk-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.stk-cell { aspect-ratio:1; border-radius:12px; background:rgba(128,128,128,0.08); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:6px; transition:transform .12s ease, background .12s ease; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.stk-cell:hover { background:rgba(167,139,250,0.14); transform:scale(1.05); }
.stk-cell img, .stk-cell video { max-width:100%; max-height:100%; object-fit:contain; }
.sticker-wrap { display:inline-block; }
.sticker-img { width:132px; height:132px; max-width:52vw; object-fit:contain; cursor:pointer; background:transparent; }
.stk-more-row { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:2px; padding:12px 0; color:var(--purple-light); }
/* удалённый стикер: на его месте заглушка с крестиком, открывать нечего */
.sticker-img[data-gone] { cursor:default; opacity:.9; }
.stk-check { animation:stkPop .4s cubic-bezier(.2,1.4,.4,1) both; }
.stk-just-saved { animation:stkFlash .5s ease; }
@keyframes stkPop { 0%{transform:scale(0) rotate(-30deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes stkFlash { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)} 100%{box-shadow:0 0 0 14px rgba(34,197,94,0)} }
.media-preview-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; background:transparent !important; }
.media-preview-item { width:70px; height:70px; border-radius:10px; overflow:hidden; position:relative; flex-shrink:0; background:transparent !important; }
.media-preview-item img, .media-preview-item video { width:100%; height:100%; object-fit:cover; background:transparent !important; }
.media-preview-del { position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,0.6); border:none; color:#fff; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; z-index:2; }
/* кружок загрузки превью медиа */
.mp-spinner { width:22px; height:22px; border:3px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%; animation:mpSpin 0.8s linear infinite; }
@keyframes mpSpin { to { transform:rotate(360deg); } }

/* Поповер добавления (файл / опрос) */
.post-media-menu { position:absolute; bottom:calc(100% + 8px); left:0; z-index:20; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.25); padding:6px; min-width:180px; animation:menuFade 0.15s ease; transition:opacity 0.16s ease, transform 0.16s ease; }
.post-media-menu.closing { opacity:0; transform:translateY(6px); }
.post-media-menu-item { display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:8px; font-size:13px; color:var(--text); cursor:pointer; transition:background 0.1s; white-space:nowrap; }
.post-media-menu-item:hover { background:rgba(167,139,250,0.1); color:var(--purple-light); }
@keyframes menuFade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* Опрос */
.poll-block { margin-top:10px; padding:12px; background:rgba(167,139,250,0.06); border:1px solid var(--border); border-radius:12px; animation:pollFade 0.2s ease; }
.poll-question { font-weight:600; font-size:14px; margin-bottom:10px; word-break:break-word; }
.poll-option { display:flex; align-items:center; gap:8px; padding:8px 10px; margin-bottom:6px; background:var(--card); border:1px solid var(--border); border-radius:10px; cursor:pointer; transition:all 0.15s; }
.poll-option:hover { border-color:var(--purple-light); background:rgba(167,139,250,0.08); }
.poll-option.selected { border-color:var(--purple-light); background:rgba(167,139,250,0.12); }
.poll-option-hit { transition:transform 0.12s; }
.poll-option-hit:active { transform:scale(0.98); }
.poll-option-photo { width:38px; height:38px; border-radius:8px; object-fit:cover; flex-shrink:0; border:1px solid var(--purple-light); box-shadow:0 0 0 2px rgba(167,139,250,0.15); }
.poll-bar { height:6px; border-radius:3px; background:rgba(167,139,250,0.15); margin-top:6px; overflow:hidden; }
.poll-bar-fill { height:100%; border-radius:3px; background:var(--purple-light); }
@keyframes pollFade { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
.poll-result { font-size:12px; font-weight:600; color:var(--purple-light); }
.poll-total { margin-top:8px; font-size:11px; color:var(--text3); text-align:center; }
.poll-total-row { margin-top:8px; text-align:center; }
.poll-total-btn { display:inline-block; font-size:11px; color:var(--purple-light); cursor:pointer; padding:5px 12px; border:1px solid var(--border); border-radius:14px; transition:all 0.15s; background:var(--card); }
.poll-total-btn:hover { border-color:var(--purple-light); background:rgba(167,139,250,0.08); }
.poll-anon-badge { display:inline-block; margin-left:6px; font-size:10px; font-weight:600; color:var(--text3); background:rgba(167,139,250,0.08); border:1px solid var(--border); border-radius:8px; padding:1px 7px; vertical-align:middle; }

/* Редактор вариантов опроса */
.poll-option-editor { border:1px dashed rgba(167,139,250,0.35); border-radius:10px; padding:8px; margin-bottom:8px; transition:border-color 0.2s; }
.poll-option-editor.has-photo { border-color:var(--purple-light); border-style:solid; }
.poll-option-photo-box { margin-top:6px; }
.poll-photo-remove { position:relative; width:56px; height:56px; cursor:pointer; border-radius:8px; }
.poll-photo-remove img { width:56px; height:56px; border-radius:8px; object-fit:cover; border:2px solid var(--purple-light); box-shadow:0 0 0 3px rgba(167,139,250,0.15); display:block; }
.poll-photo-remove::after { content:''; position:absolute; inset:0; border-radius:8px; background:rgba(0,0,0,0); transition:background 0.2s; }
.poll-photo-remove:hover::after, .poll-photo-remove:active::after { background:rgba(0,0,0,0.45); }
.poll-photo-x { position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,0.65); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,0.35); z-index:2; }

/* Кружки выбора правильного ответа (викторина) */
.poll-quiz-circle { width:26px; height:26px; border-radius:50%; border:2px solid var(--border); background:transparent; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:0; transition:all 0.2s; }
.poll-quiz-circle:hover { border-color:var(--purple-light); }
.poll-quiz-circle.selected { border-color:#22c55e; background:rgba(34,197,94,0.12); }
.poll-quiz-check { color:#22c55e; font-size:15px; font-weight:800; line-height:1; animation:checkPop 0.25s ease; }
@keyframes checkPop { 0%{transform:scale(0);opacity:0} 60%{transform:scale(1.25)} 100%{transform:scale(1);opacity:1} }

/* Викторина: правильный/неправильный ответ */
.poll-option.ok { border-color:#22c55e; background:rgba(34,197,94,0.08); }
.poll-option.bad { border-color:#ef4444; background:rgba(239,68,68,0.08); }
.poll-bar-fill.ok { background:#22c55e; }
.poll-bar-fill.bad { background:#ef4444; }
.poll-result.ok { color:#22c55e; }
.poll-result.bad { color:#ef4444; }
.poll-mark { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex-shrink:0; font-size:14px; font-weight:800; line-height:1; }
.poll-mark.ok { color:#22c55e; animation:checkPop 0.3s ease; }
.poll-mark.bad { color:#ef4444; animation:checkPop 0.3s ease; }

/* Secret rarity */
.secret-name { background:var(--secret-grad,linear-gradient(180deg,#fef08a,#ca8a04)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-weight:800; }
.exclusive-name { color:#a855f7 !important; font-weight:900; -webkit-text-fill-color:#a855f7 !important; text-shadow:-0.5px -0.5px 0 #fff,0.5px -0.5px 0 #fff,-0.5px 0.5px 0 #fff,0.5px 0.5px 0 #fff; animation:exclusiveShake 0.3s ease-in-out infinite; display:inline-block; background:none !important; }
@keyframes exclusiveShake { 0%{transform:translate(-0.5px,-0.5px) rotate(-0.5deg)} 25%{transform:translate(0.5px,-0.5px) rotate(0.5deg)} 50%{transform:translate(-0.5px,0.5px) rotate(-0.3deg)} 75%{transform:translate(0.5px,0.5px) rotate(0.3deg)} 100%{transform:translate(-0.5px,-0.5px) rotate(-0.5deg)} }
@keyframes shimmer { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes shimmerStroke { 0%{stroke:#a78bfa} 20%{stroke:#8b5cf6} 40%{stroke:#3b82f6} 60%{stroke:#6366f1} 80%{stroke:#a78bfa} 100%{stroke:#a78bfa} }
.watermark { position:absolute; bottom:8px; right:12px; font-size:32px; font-weight:900; background:var(--watermark-grad,linear-gradient(180deg,#fef08a,#ca8a04)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; opacity:0.6; pointer-events:none; z-index:0; line-height:1; white-space:nowrap; }
.watermark-exclusive { position:absolute; bottom:8px; right:12px; font-size:32px; font-weight:900; color:#000; -webkit-text-stroke:1.5px #fff; text-stroke:1.5px #fff; animation:exclusiveShake 0.3s ease-in-out infinite; opacity:1; pointer-events:none; z-index:0; line-height:1; white-space:nowrap; text-shadow:0 0 4px rgba(255,255,255,0.5); }



/* Архив: анимированные точки */
.archive-dots span{display:inline-block;animation:archiveDot 1.4s infinite;font-size:18px;font-weight:900;color:var(--purple-light);margin-left:1px}@keyframes archiveDot{0%,20%{opacity:0}50%{opacity:1}100%{opacity:0}}.archive-dots span:nth-child(2){animation-delay:0.2s}.archive-dots span:nth-child(3){animation-delay:0.4s}

#callMuteBtn:hover{filter:brightness(1.15)}
#callMuteBtn .mic-slash{transform-origin:center;animation:micSlashIn 0.25s ease-out}
@keyframes micSlashIn{from{opacity:0;transform:scale(0.3) rotate(-25deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes micSlashOut{from{opacity:1;transform:scale(1) rotate(0deg)}to{opacity:0;transform:scale(0.3) rotate(25deg)}}
@keyframes callGrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* режим выбора в центре активности: размываем навигацию и хедер */
body.act-selecting .app-header,
body.act-selecting .sidebar,
body.act-selecting .bottom-nav { filter: blur(5px); opacity:0.55; transition:filter 0.25s ease, opacity 0.25s ease; pointer-events:none; }

/* режим выбора: размываем также кнопку «Выбрать/Отмена», панель удаления остаётся чёткой */
body.act-selecting #actSelectBtn { filter: blur(5px); opacity:0.55; pointer-events:none; }

/* Тумблер скрытия подарка */
.gift-hide-toggle{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;vertical-align:middle}
.gift-hide-toggle input{opacity:0;width:0;height:0;position:absolute}
.gift-hide-slider{position:absolute;inset:0;background:rgba(120,120,120,0.35);border:1px solid var(--border);border-radius:24px;cursor:pointer;transition:background 0.3s ease}
.gift-hide-slider::before{content:'';position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform 0.3s ease}
.gift-hide-toggle input:checked+.gift-hide-slider{background:var(--purple);border-color:var(--purple)}
.gift-hide-toggle input:checked+.gift-hide-slider::before{transform:translateX(18px)}

@keyframes giftEyeSwap{0%{transform:scale(0.4);opacity:0}60%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}

.post.highlight { box-shadow:0 0 0 3px var(--purple-light); border-radius:12px; }

@keyframes reactPop{0%{transform:scale(0.6)}55%{transform:scale(1.3)}100%{transform:scale(1)}}
.react-pop{animation:reactPop 0.35s ease}

@keyframes reactOut{to{transform:scale(0.4);opacity:0}}
.react-out{animation:reactOut 0.15s ease forwards}

@keyframes emojiIn{0%{transform:scale(0.3);opacity:0}100%{transform:scale(1);opacity:1}}

@keyframes frozenShake{
  0%,100%{transform:translateX(-50%) rotate(0)}
  10%{transform:translateX(-50%) translate(-4px,2px) rotate(-3deg)}
  20%{transform:translateX(-50%) translate(4px,-2px) rotate(3deg)}
  30%{transform:translateX(-50%) translate(-5px,-1px) rotate(-4deg)}
  40%{transform:translateX(-50%) translate(5px,1px) rotate(4deg)}
  50%{transform:translateX(-50%) translate(-3px,2px) rotate(-2deg)}
  60%{transform:translateX(-50%) translate(3px,-2px) rotate(2deg)}
  70%{transform:translateX(-50%) translate(-4px,-1px) rotate(-3deg)}
  80%{transform:translateX(-50%) translate(4px,1px) rotate(3deg)}
  90%{transform:translateX(-50%) translate(-2px,2px) rotate(-1deg)}
}
html.frozen-red{--purple:#ef4444;--purple-light:#fca5a5;--purple-dark:#991b1b;--bg:#17090a;--card:#2a1215;--text:#fecaca;--text2:#f87171;--text3:#b91c1c;--border:#7f1d1d;--danger:#dc2626;}
html.frozen-red body{background:linear-gradient(180deg,#1a0a0a,#2a1215)}

@keyframes exclShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.5px)}75%{transform:translateX(1.5px)}}

/* Вкладки ленты: мои рекомендации / моя лента */
.feed-tabs{display:flex;gap:8px;margin:10px 12px 4px;justify-content:center}
@media(min-width:600px){.feed-tabs{max-width:600px;margin:10px auto 4px}}
.feed-tab{flex:1;max-width:240px;padding:10px 12px;border:1.5px solid var(--border);border-radius:50px;background:var(--card);color:var(--text2);font-size:12px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;transition:all 0.2s ease;touch-action:manipulation;white-space:nowrap}
.feed-tab.active{background:linear-gradient(135deg,var(--purple),#6d28d9);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(124,58,237,0.35)}
.feed-tab:active{transform:scale(0.97)}

/* Выбор интересов (предпочтений) */
.int-grid{scrollbar-width:thin}
.int-chip{padding:10px 16px;border:1.5px solid var(--border);border-radius:50px;background:var(--card);color:var(--text);font-size:13px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;transition:all 0.2s ease;touch-action:manipulation}
.int-chip:active{transform:scale(0.94)}
.int-chip.active{background:linear-gradient(135deg,var(--purple),#6d28d9);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(124,58,237,0.35)}
.int-counter{font-size:14px;font-weight:600;color:var(--text2)}

/* ЗАСТАВКА-ЗАГРУЗКА */
#shgSplash{
  position:fixed;inset:0;z-index:99998;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  animation:shgSplashIn 0.9s ease;
}
#shgSplash img{max-width:50vw;max-height:50vh;object-fit:contain}
#shgSplash.out{opacity:0;transition:opacity 0.6s ease}
@keyframes shgSplashIn{from{opacity:0}to{opacity:1}}
/* заставка видна и пока приложение скрыто классом before-load */
html.before-load #shgSplash,
html.before-load #shgSplash *{opacity:1!important;pointer-events:none!important}

.d3{display:inline-flex;gap:3px;margin-left:2px;vertical-align:middle}
.d3 span{width:4px;height:4px;border-radius:50%;background:currentColor;animation:dotBlink 1.2s infinite}
.d3 span:nth-child(2){animation-delay:.2s}
.d3 span:nth-child(3){animation-delay:.4s}
@keyframes dotBlink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.nav-item{margin:4px 2px;border-radius:16px}
@media (max-width:767px){ .ldr-tabs{flex-wrap:wrap} .ldr-tabs .auth-btn{flex:1 1 auto;min-width:calc(33.333% - 10px);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:8px 10px} }

@media (max-width:767px){
  .ldr-tabs .auth-btn{flex:1 1 calc(33.333% - 10px);min-width:calc(33.333% - 10px);min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 4px;font-size:12px;text-align:center}
  .ldr-tabs .auth-btn svg{width:19px!important;height:19px!important;margin:0 auto 1px!important}
}

.app-header-right .app-header-btn{width:36px;height:36px;border-radius:50%;background:rgba(128,128,128,0.16);display:inline-flex;align-items:center;justify-content:center;margin-left:6px;position:relative}

#appContent .profile-card div[style*="flex-wrap:wrap"]:has(> .modal-btn){display:grid;grid-template-columns:1fr 1fr;gap:8px}
#appContent .profile-card div[style*="flex-wrap:wrap"]:has(> .modal-btn) .modal-btn{width:100%;border-radius:50px;min-height:42px;display:inline-flex;align-items:center;justify-content:center}

#appContent .profile-card div[style*="flex-wrap:wrap"]:has(> .modal-btn) .modal-btn svg{margin-right:7px;width:18px;height:18px;flex-shrink:0}

.backrow{width:100%!important;flex:0 0 100%!important;grid-column:1/-1;display:block!important}

#appContent .profile-card div:has(> .modal-btn.backrow){display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
.backrow{grid-column:1/-1}

#appContent .profile-card div:has(> .modal-btn.backrow){display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
#appContent .profile-card div:has(> .modal-btn):has(> .modal-btn:nth-of-type(2)):not(:has(> div:not(.modal-btn))){display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
#appContent .profile-card div[style*="grid-template-columns"] .modal-btn, #appContent .profile-card div:has(> .modal-btn):has(> .modal-btn:nth-of-type(2)) .modal-btn{width:100%;border-radius:50px;min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-align:center}
.backrow{grid-column:1/-1;width:100%!important}

#appContent .profile-card div:has(> .modal-btn:nth-of-type(2)):not(:has(> .profile-name,.profile-stat,.profile-card)){display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
#appContent .profile-card div:has(> .modal-btn:nth-of-type(2)) .modal-btn{width:100%;border-radius:50px;min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-align:center}
.backrow{grid-column:1/-1;width:100%!important}

#appContent .profile-card div:has(> .modal-btn:nth-of-type(2)) .modal-btn:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 4px);justify-self:center;margin-left:auto;margin-right:auto}
@media (min-width:768px){
  #appContent .profile-card div:has(> .modal-btn:nth-of-type(2)){max-width:50%;margin-left:auto;margin-right:auto}
}


/* === кнопки профиля: нечётная/одиночная — по центру, ширина как колонка === */
#appContent .profile-card div:has(> .modal-btn:nth-of-type(2)) .modal-btn:not(.backrow):last-child:nth-child(odd){grid-column:1/-1!important;width:calc(50% - 4px)!important;justify-self:center!important;margin-left:auto!important;margin-right:auto!important}
#appContent .profile-card div:has(> .modal-btn.backrow) > .modal-btn:first-child:nth-last-child(2){grid-column:1/-1!important;width:calc(50% - 4px)!important;justify-self:center!important;margin-left:auto!important;margin-right:auto!important}

/* === чекбоксы согласия при регистрации === */
.auth-ck{display:flex;flex-direction:column;gap:7px;width:100%;margin:10px 0 2px}
.reg-ck{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--text2);cursor:pointer;user-select:none;line-height:1.45;text-align:left}
.reg-ck input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.reg-ck-box{flex:0 0 18px;width:18px;height:18px;margin-top:1px;border:2px solid rgba(167,139,250,0.55);border-radius:6px;background:transparent;display:flex;align-items:center;justify-content:center;transition:border-color .16s ease,background .16s ease}
.reg-ck-box svg{opacity:0;transform:scale(.4);transition:opacity .16s ease,transform .16s ease}
.reg-ck input:checked + .reg-ck-box{background:var(--purple);border-color:var(--purple)}
.reg-ck input:checked + .reg-ck-box svg{opacity:1;transform:scale(1)}
.reg-ck-txt{flex:1;min-width:0}
.reg-ck-err .reg-ck-box{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.15)}
.reg-ck-err{animation:regCkShake .3s ease}
@keyframes regCkShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

/* [2026-09-05] Пузыри чатов и комментариев: плавные округлые углы + отступ снизу */

/* Личные сообщения (личка) — полностью скруглённые пузыри, без острого «хвостика»,
   с воздухом снизу между сообщениями (подарки не трогаем) */
.chat-msg:not([data-gift="1"]){
  border-radius:18px !important;
  /* только вертикальные отступы; margin-left у своих остаётся auto (пузыри справа) */
  margin-top:4px;
  margin-bottom:14px !important;
}

/* Комментарии (в ленте и в каналах — общий класс .cmt-item):
   убираем разделительные линии, делаем карточку со скруглением и отступом снизу */
.cmt-item{
  border-bottom:none;
  border-radius:16px;
  margin:6px 4px 12px;
  background:var(--card);
  border:1px solid var(--border);
}
.cmt-item.highlight{ border-radius:16px; }

/* [2026-09-05] Поле ввода = ЕДИНАЯ плавающая скруглённая панель
       (личка + комментарии: класс .cmt-input-row и поле канала #chCmtInputRow) */
/* Панель ввода: единая высота и положение во всех местах (личка, лента, каналы) */
.cmt-input-row:not(.cmt-cooldown),
#chCmtInputRow{
  margin:8px 10px 22px !important;
  padding:5px 5px 5px 10px !important;
  gap:6px;
  border-radius:26px;
  background:var(--card);
  border:1px solid rgba(167,139,250,0.4);
  box-shadow:0 8px 26px rgba(124,58,237,0.30), 0 2px 10px rgba(124,58,237,0.14);
  align-items:center;
  min-height:50px;
}
/* текстовое поле «утапливаем» в панель: без своей рамки и фона, одинакового размера */
.cmt-input-row:not(.cmt-cooldown) input,
.cmt-input-row:not(.cmt-cooldown) textarea,
#chCmtInputRow input,
#chCmtInputRow textarea{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:18px !important;
  padding:12px 10px !important;
  font-size:14px;
}
.cmt-input-row:not(.cmt-cooldown) input:focus,
.cmt-input-row:not(.cmt-cooldown) textarea:focus,
#chCmtInputRow input:focus,
#chCmtInputRow textarea:focus{ border:none; background:transparent; }
/* «+» и кнопка отправки — одинаковые круглые во всех полях ввода */
.cmt-input-row:not(.cmt-cooldown) button,
#chCmtInputRow button{
  width:38px;height:38px;border-radius:50%;padding:0;margin:0;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cmt-input-row:not(.cmt-cooldown) .media-add-btn,
#chCmtInputRow .media-add-btn{ width:38px;height:38px;flex-shrink:0; }
/* на мобильных под панелью плавающая нижняя навигация (~70px) — единый зазор снизу */
@media (max-width:768px){
  .cmt-input-row:not(.cmt-cooldown),
  #chCmtInputRow{ margin:8px 10px calc(72px + env(safe-area-inset-bottom,0px)) !important; }
  .cmt-input-row.cmt-cooldown{ margin-bottom:calc(72px + env(safe-area-inset-bottom,0px)) !important; }
}

/* [2026-09-16] Предпросмотр — НАД панелью ввода, отдельной карточкой  
   Вложение и панель ответа показываются над полем ввода. Раньше они висели
   в пустоте: во всю ширину экрана, без фона, у самого края — на телефоне это
   выглядело сломанным. Теперь это аккуратная карточка в ширине панели ввода,
   вставшая прямо над ней (и в личке, и в комментариях, и в каналах). */
#chatMediaPreview, #cmtMediaPreview, #chCmtMediaPreview{
  margin:8px 10px 0 !important;
  padding:8px 10px !important;
  background:var(--card) !important;
  border:1px solid var(--border);
  border-radius:18px;
  box-sizing:border-box;
}
#chatReplyPreview, #cmtReplyPreview, #chCmtReplyPreview{
  margin:8px 10px 0 !important;
  border-radius:16px;
  border-top:none !important;
  box-sizing:border-box;
}


/* [2026-09-16] Многострочный ввод сообщения  
   Текст длиннее строки переносится, поле подрастает (до ~4 строк), дальше
   включается вертикальная прокрутка. Раньше поле было однострочным и длинный
   текст уезжал вправо, оставаясь невидимым. */
.cmt-input-row textarea, #chCmtInputRow textarea{
  resize:none; line-height:1.35; max-height:96px; overflow-y:hidden;
  font-family:Inter,sans-serif;
}
/* на узких экранах поле сжимается первым — кнопки остаются на своих местах */
.cmt-input-row input, .cmt-input-row textarea,
#chCmtInputRow input, #chCmtInputRow textarea{ min-width:0; }

/* индикатор «в сети» — в 2 раза больше (в списке контактов и в шапке открытого чата) */
.user-row .online-dot,
.cmt-page-title .online-dot{ width:20px; height:20px; border-width:3px; }

/* Ползунок громкости */
.vol-slider{ -webkit-appearance:none; appearance:none; height:6px; background:transparent; outline:none; touch-action:none; --vol:100%; }
.vol-slider::-webkit-slider-runnable-track{
  height:6px; border-radius:6px;
  background:
    linear-gradient(90deg,#6d28d9,#8b5cf6,#a78bfa,#c4b5fd) left center / var(--vol) 100% no-repeat,
    rgba(128,128,145,.32);
}
.vol-slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; margin-top:-4px; border-radius:50%;
  background:#fff; cursor:pointer; box-shadow:0 0 0 3px rgba(167,139,250,.5), 0 1px 4px rgba(0,0,0,.4);
}
.vol-slider::-moz-range-track{ height:6px; border-radius:6px; background:rgba(128,128,145,.32); }
.vol-slider::-moz-range-progress{
  height:6px; border-radius:6px;
  background:linear-gradient(90deg,#6d28d9,#8b5cf6,#a78bfa,#c4b5fd);
}
.vol-slider::-moz-range-thumb{
  width:14px; height:14px; border:none; border-radius:50%;
  background:#fff; cursor:pointer; box-shadow:0 0 0 3px rgba(167,139,250,.5);
}

/* Энергосбережение — переливающиеся градиенты становятся статичными */
body.energy-save .plus-name,
body.energy-save .plus-badge svg,
body.energy-save .plus-lock,
body.energy-save .online-dot.plus,
body.energy-save .online-profile-status.plus,
body.energy-save .title-badge,
body.energy-save [style*="shimmer"]{
  animation:none!important;
  background-position:0 0!important;
}
/* значок ШГ PLUS — статичный градиент вместо цвета темы */
body.energy-save .plus-badge svg{ stroke:url(#plusBadgeGrad)!important; }

/* Статус сообщения — одна галочка (отправлено) / две внахлёст (прочитано), со сменой анимацией */
.msg-check-wrap{ position:relative; display:inline-block; width:17px; height:11px; vertical-align:-2px; }
.mc-tick{ position:absolute; top:0; left:0; fill:none; stroke:rgba(255,255,255,.55); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:stroke .3s ease, opacity .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.mc-tick1{ left:3px; }
.mc-tick2{ left:0; opacity:0; transform:translateX(6px); }
.msg-check-wrap.read .mc-tick{ stroke:#fff; }
.msg-check-wrap.read .mc-tick2{ opacity:1; transform:translateX(0); }
.msg-check-wrap.pop .mc-tick2{ animation:mcSlideIn .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes mcSlideIn{
  0%{ opacity:0; transform:translateX(6px); }
  100%{ opacity:1; transform:translateX(0); }
}
body.energy-save .mc-tick{ transition:stroke .15s ease!important; }
body.energy-save .msg-check-wrap.pop .mc-tick2{ animation:none!important; }


/* Отправленное сообщение «вылетает» на своё место */
@keyframes msgFlyIn{ 0%{opacity:0;transform:translateY(40px) scale(.9)} 60%{opacity:1} 100%{opacity:1;transform:translateY(0) scale(1)} }
.chat-msg.msg-fly-in{ animation:msgFlyIn .3s cubic-bezier(.2,.85,.3,1) both; }
#chatMsgList{ overflow-x:hidden; }

/* Перетаскивание своих оформлений */
.design-card{ transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, opacity .18s ease; will-change:transform; }
.design-card.dragging{ opacity:.92; transform:scale(1.02); box-shadow:0 12px 34px rgba(0,0,0,.4); z-index:20; cursor:grabbing; }

/* Кнопка подписки в посте: зелёный плюс ⇄ крестик */
.sub-ico-btn{
  position:relative;height:30px;padding:0 11px 0 0;margin-left:auto;flex-shrink:0;align-self:center;
  border:none;border-radius:15px;cursor:pointer;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:flex-start;
  background:rgba(34,197,94,0.14);color:#22c55e;
  -webkit-tap-highlight-color:transparent;outline:none;
  transition:background-color .3s ease,color .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1);
}
.sub-ico-btn:active{ transform:scale(.9); }
.sub-ico-btn .sub-ico-i{
  position:absolute;left:0;top:0;width:30px;height:100%;
  display:flex;align-items:center;justify-content:center;
  transition:transform .32s cubic-bezier(.34,1.4,.5,1),opacity .2s ease;
}
.sub-ico-btn .sub-ico-x{ transform:rotate(-90deg) scale(.3);opacity:0; }
/* подпись справа от иконки: видна та, что соответствует состоянию (.on) */
.sub-ico-btn .sub-ico-t{
  margin-left:36px;font-size:11px;font-weight:700;line-height:30px;white-space:nowrap;
}
.sub-ico-btn .sub-ico-t-x{ display:none; }
.sub-ico-btn.on .sub-ico-t-plus{ display:none; }
.sub-ico-btn.on .sub-ico-t-x{ display:inline; }
/* подписан: такой же прозрачный фон, только красный, и красный крестик */
.sub-ico-btn.on,
.sub-ico-btn.on:hover,
.sub-ico-btn.on:focus,
.sub-ico-btn.on:active{
  background:rgba(239,68,68,0.14);color:#ef4444;
  box-shadow:none;
}
.sub-ico-btn.on .sub-ico-plus{ transform:rotate(90deg) scale(.3);opacity:0; }
.sub-ico-btn.on .sub-ico-x{ transform:rotate(0deg) scale(1);opacity:1; }
/* зелёная вспышка-рамка — только в момент подписки */
.sub-ico-btn.sub-flash{ animation:subIcoFlash .7s ease; }
@keyframes subIcoFlash{
  0%{ background:rgba(34,197,94,.30); box-shadow:0 0 0 0 rgba(34,197,94,.85), inset 0 0 0 1px rgba(34,197,94,.9); }
  55%{ background:rgba(239,68,68,.45); box-shadow:0 0 0 9px rgba(34,197,94,0), inset 0 0 0 1px rgba(239,68,68,.35); }
  100%{ background:rgba(239,68,68,.14); box-shadow:0 0 0 0 rgba(34,197,94,0), inset 0 0 0 0 rgba(239,68,68,0); }
}
body.energy-save .sub-ico-btn .sub-ico-i{ transition:none; }
/* у кнопок подписки нет «роста» от hover/touch-hover: на телефоне hover залипает
   и после анимации кнопка ещё раз увеличивалась */
.sub-btn:hover{ transform:none; }
.sub-btn.touch-hover{ transform:none!important; }


/* Поиск по чатам в мессенджере */
@keyframes msSearchIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes msRowIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}
.ms-search-anim { animation: msSearchIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both; }
.ms-search-anim:focus { outline: none; box-shadow: 0 0 0 2px rgba(167,139,250,0.35); }

/* Статус прочтения в списке чатов — цвета под тему (в чате они белые, для пузыря) */
.ms-check .mc-tick{ stroke: var(--text3); }
.ms-check .msg-check-wrap.read .mc-tick{ stroke: var(--purple-light); }

/* Панель архива, открывающаяся свайпом влево */
/* Появления панели как CSS-анимации НЕТ намеренно: прозрачность и сдвиг выставляет JS
   прямо по позиции пальца, поэтому проиграться дважды она не может.
   Подпрыгивает только иконка — ровно один раз, когда панель впервые показалась. */
.ms-arch-panel{ position:absolute; right:0; width:104px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:linear-gradient(135deg,var(--purple),#6d28d9); color:#fff; font-size:10px; font-weight:700; border-radius:14px; z-index:0; overflow:hidden; opacity:0; pointer-events:none; }
.ms-arch-panel.on svg{ animation:msArchPop .35s cubic-bezier(.34,1.56,.64,1) both; }
.ms-arch-panel.go{ transition:transform .25s cubic-bezier(.22,1,.36,1); }
/* панель уходит плавно и когда строка уехала в архив, и когда просто вернулась на место */
@keyframes msArchOut{ from{ opacity:1; } to{ opacity:0; } }
.ms-arch-panel.out{ animation:msArchOut .2s ease forwards; }
@keyframes msArchPop{ 0%{ transform:scale(.5) rotate(-25deg); } 100%{ transform:scale(1) rotate(0); } }

/* Заголовки разделов «Контакты» / «Каналы» в общем списке мессенджера */
.ms-sect{ padding:12px 4px 6px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text3); animation:msRowIn .25s ease both; }
.ms-sect:first-child{ padding-top:2px; }

/* Подпрыгивание выбранной кнопки «Старый / Новый» в настройках */
@keyframes msModePop { 0% { transform: scale(0.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* Строки чатов и каналов в мессенджере — ПЛОСКИЕ, без скруглений (в т.ч. на телефонах).
   !important стоит намеренно: базовый .user-row — карточка со скруглением, и он перебивал .ms-row. */
.user-row.ms-row, .user-row.ms-row.ms-line, .user-row.ms-row:active {
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y; /* вертикальный скролл — браузеру, горизонтальный жест — нам (свайп в архив) */
}

/* Экран бана: свечка */
.ban-candle{display:block;margin:0 auto 4px;filter:drop-shadow(0 0 18px rgba(251,191,36,.35))}
.ban-flame{transform-origin:36px 32px;animation:banFlicker 2.4s ease-in-out infinite}
@keyframes banFlicker{0%,100%{transform:scale(1,1) rotate(0)}30%{transform:scale(.94,1.05) rotate(-2deg)}60%{transform:scale(1.03,.96) rotate(2deg)}80%{transform:scale(.97,1.03) rotate(-1deg)}}
@media (prefers-reduced-motion:reduce){.ban-flame{animation:none}}

/* Второй экран бана */
.ban2-screen{background:#000!important;color:#fff;text-align:center;padding:24px;gap:18px}
.ban2-screen img{width:min(56vw,300px);height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}
.ban2-text{font-size:16px;font-weight:600;line-height:1.55;max-width:360px;color:#f3f0fa}

/* Форматирование текста */
.fmt-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:rgba(127,127,127,.16);padding:1px 5px;border-radius:5px;word-break:break-word}
.fmt-pre{display:block;margin:6px 0;padding:8px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;line-height:1.45;white-space:pre-wrap;word-break:break-word;background:rgba(127,127,127,.14);border-radius:8px;overflow-x:auto}
/* Спойлер: мерцающие частицы (три слоя точек плывут в разные стороны), при открытии —
   разлетаются и гаснут. --sp-a регистрируем через @property, чтобы прозрачность частиц
   плавно анимировалась; где @property нет, спойлер просто открывается без перехода. */
@property --sp-a{syntax:'<number>';inherits:true;initial-value:1}
.fmt-spoiler{--sp-a:1;--sp-c:var(--text);border-radius:4px;cursor:pointer;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background-color:rgba(127,127,127,calc(.2*var(--sp-a)));
  /* пять слоёв с попарно взаимно простыми шагами — узор почти не повторяется и не выглядит сеткой */
  background-image:
    radial-gradient(circle,color-mix(in srgb,var(--sp-c) calc(var(--sp-a)*80%),transparent) .5px,transparent 1px),
    radial-gradient(circle,color-mix(in srgb,var(--sp-c) calc(var(--sp-a)*55%),transparent) .4px,transparent .9px),
    radial-gradient(circle,color-mix(in srgb,var(--sp-c) calc(var(--sp-a)*90%),transparent) .65px,transparent 1.15px),
    radial-gradient(circle,color-mix(in srgb,var(--sp-c) calc(var(--sp-a)*45%),transparent) .35px,transparent .8px),
    radial-gradient(circle,color-mix(in srgb,var(--sp-c) calc(var(--sp-a)*70%),transparent) .5px,transparent .95px);
  background-size:9px 7px,13px 11px,17px 13px,23px 19px,29px 17px;
  animation:fmtSpoil 4s linear infinite,fmtSpoilTwinkle 1.7s ease-in-out infinite alternate;
  transition:--sp-a .55s ease,color .5s ease .12s,background-size .55s ease}
.my-msg .fmt-spoiler{--sp-c:#fff}
.fmt-spoiler:not(.shown) *{visibility:hidden}
.fmt-spoiler.shown{--sp-a:0;color:inherit;background-size:27px 21px,39px 33px,51px 39px,69px 57px,87px 51px;cursor:text;animation-play-state:paused}
/* сдвиг каждого слоя кратен его шагу — цикл бесшовный; слои плывут в разные стороны */
@keyframes fmtSpoil{
  from{background-position:0 0,3px 5px,7px 2px,11px 9px,5px 13px}
  to{background-position:18px -14px,-10px 16px,24px 15px,-12px -10px,34px -4px}}
@keyframes fmtSpoilTwinkle{from{filter:brightness(1)}to{filter:brightness(1.35)}}
@media (prefers-reduced-motion:reduce){.fmt-spoiler{animation:none}}

.fmt-bar{position:fixed;z-index:100000;display:none;align-items:center;gap:2px;padding:4px;border-radius:12px;background:var(--card);color:var(--text);border:1px solid var(--border);box-shadow:0 8px 28px rgba(0,0,0,.22);font-size:13px;user-select:none;-webkit-user-select:none;animation:fmtBarIn .14s ease}
.fmt-bar.show{display:flex}
.fmt-bar.open{flex-direction:column;align-items:stretch;min-width:210px;padding:6px}
.fmt-bar button{appearance:none;border:0;background:none;color:inherit;font:inherit;padding:8px 11px;border-radius:8px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px;-webkit-tap-highlight-color:transparent}
.fmt-bar button:hover,.fmt-bar button:focus-visible{background:rgba(167,139,250,.14);outline:none}
.fmt-bar:not(.open) button+button{border-left:1px solid var(--border);border-radius:0 8px 8px 0}
.fmt-bar-more{padding:8px 8px!important;color:var(--purple-light)!important}
.fmt-bar.open button{justify-content:space-between;font-size:14px;padding:9px 10px}
.fmt-bar-back{color:var(--text2)!important;justify-content:flex-start!important;font-size:13px!important;border-bottom:1px solid var(--border)!important;border-radius:8px 8px 0 0!important;margin-bottom:2px}
.fmt-kbd{font-size:11px;color:var(--text3);font-family:inherit;margin-left:16px}
.fmt-spoiler-demo{border-radius:4px;padding:0 4px;background-color:rgba(127,127,127,.2);background-image:radial-gradient(circle,color-mix(in srgb,var(--text) 55%,transparent) .8px,transparent 1.4px),radial-gradient(circle,color-mix(in srgb,var(--text) 35%,transparent) .6px,transparent 1.2px);background-size:7px 6px,11px 9px;animation:fmtSpoil 3s linear infinite}
@media (pointer:coarse){.fmt-kbd{display:none}.fmt-bar button{padding:10px 12px}}
@keyframes fmtBarIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ===================== Группы ===================== */
.grp-ava{border-radius:50%;object-fit:cover;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:'Inter',sans-serif;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

/* «Создать»: две карточки-варианта */
.create-choice{display:flex;flex-direction:column;gap:10px;max-width:340px;margin:4px auto 0}
.create-opt{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:16px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;text-align:left;font:inherit;transition:transform .15s,border-color .2s,background .2s;-webkit-tap-highlight-color:transparent}
.create-opt:hover{border-color:var(--purple-light);background:rgba(167,139,250,.07)}
.create-opt:active{transform:scale(.98)}
.create-opt-ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.create-opt-ico.ch{background:linear-gradient(135deg,#8b5cf6,#6d28d9);box-shadow:0 6px 18px rgba(124,58,237,.35)}
.create-opt-ico.gr{background:linear-gradient(135deg,#ec4899,#8b5cf6);box-shadow:0 6px 18px rgba(236,72,153,.3)}
.create-opt b{display:block;font-size:15px;font-weight:700}
.create-opt span span{display:block;font-size:12.5px;color:var(--text2);margin-top:2px;line-height:1.35}
.create-opt-arrow{margin-left:auto;color:var(--text3);flex-shrink:0}

/* модалки групп */
.grp-modal{text-align:left;max-height:88vh;overflow-y:auto}
.grp-modal .modal-title{text-align:center}
.grp-input{width:100%;box-sizing:border-box;padding:12px 14px;margin:0 0 8px;font:14px 'Inter',sans-serif;color:var(--text);background:var(--bg);border:1.5px solid var(--border);border-radius:12px;outline:none;transition:border-color .2s}
.grp-input:focus{border-color:var(--purple-light)}
.grp-create-top{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.grp-create-fields{flex:1;min-width:0}
.grp-create-fields .grp-input:last-child{margin-bottom:0}
.grp-ava-pick{width:76px;height:76px;border-radius:50%;flex-shrink:0;border:2px dashed rgba(167,139,250,.55);background:rgba(167,139,250,.08);color:var(--purple-light);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;padding:0;transition:background .2s,transform .15s}
.grp-ava-pick:hover{background:rgba(167,139,250,.16)}
.grp-ava-pick:active{transform:scale(.96)}
.grp-ava-pick img{width:100%;height:100%;object-fit:cover}
.grp-sect-title{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);margin:10px 2px 8px}
.grp-count-pill{font-size:11px;letter-spacing:0;color:#fff;background:var(--purple);border-radius:10px;padding:1px 7px;min-width:8px;text-align:center}
.grp-count-pill:empty{display:none}
.grp-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.grp-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 3px;border-radius:20px;background:rgba(167,139,250,.14);font-size:12.5px;font-weight:600;animation:grpPop .18s ease}
.grp-chip button{width:20px;height:20px;border-radius:50%;border:0;background:rgba(127,127,127,.2);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.grp-pick-list{max-height:min(42vh,330px);overflow-y:auto;margin:0 -6px 10px;padding:0 6px}
.grp-pick-row{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:12px;cursor:pointer;transition:background .15s}
.grp-pick-row:hover{background:rgba(167,139,250,.07)}
.grp-pick-row input{position:absolute;opacity:0;pointer-events:none}
.grp-pick-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.grp-pick-txt b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp-pick-txt i{font-style:normal;font-size:12px;color:var(--text3)}
.grp-pick-box{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .18s}
.grp-pick-box svg{opacity:0;transform:scale(.5);transition:all .18s}
.grp-pick-row input:checked~.grp-pick-box{background:var(--purple);border-color:var(--purple)}
.grp-pick-row input:checked~.grp-pick-box svg{opacity:1;transform:none}
.grp-pick-row input:focus-visible~.grp-pick-box{box-shadow:0 0 0 3px rgba(167,139,250,.35)}
.grp-pick-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:22px 12px 16px;color:var(--text2);font-size:14px;font-weight:600}
.grp-pick-empty svg{color:var(--purple-light);opacity:.8}
.grp-pick-empty span{font-size:12.5px;font-weight:400;color:var(--text3);max-width:260px;line-height:1.45}

/* строка группы в списке чатов */
.grp-row{cursor:pointer;position:relative;display:flex;align-items:center;gap:10px}
.grp-row-body{flex:1;min-width:0;text-align:left;padding-right:52px}
.grp-row-name{display:flex!important;align-items:center;gap:5px;max-width:100%;white-space:nowrap;overflow:hidden}
.grp-row-ico{color:var(--purple-light);display:inline-flex;flex-shrink:0}
.grp-row-title{overflow:hidden;text-overflow:ellipsis}
.grp-row-sub{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp-row-time{position:absolute;right:12px;top:14px;font-size:11px;color:var(--text3)}
.grp-unread{position:absolute;right:12px;bottom:9px;min-width:18px;height:18px;border-radius:9px;background:#ef4444;color:#fff;font-size:11px;font-weight:600;align-items:center;justify-content:center;padding:0 5px;box-sizing:border-box}
.grp-unread.muted{background:#9ca3af}

/* шапка группы */
.grp-head{gap:6px!important}
.grp-head-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer;border-radius:12px;padding:2px 4px;margin:-2px 0}
.grp-head-txt{display:flex;flex-direction:column;min-width:0}
.grp-head-name{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp-head-sub{font-size:12px;font-weight:500;color:var(--text3)}
.grp-head-btn{width:36px;height:36px;border-radius:50%!important;display:flex;align-items:center;justify-content:center;color:var(--text2)!important;flex-shrink:0}

/* лента сообщений */
.grp-list{flex:1;overflow-y:auto;padding:8px 10px 4px;overscroll-behavior:contain}
.grp-msg{display:flex;align-items:flex-start;gap:8px;margin:2px 0}
.grp-msg.first{margin-top:10px}
.grp-msg.mine{justify-content:flex-end}
.grp-msg-ava{width:32px;flex-shrink:0;cursor:pointer}
.grp-bubble{position:relative;max-width:min(76%,520px);padding:7px 12px 6px;border-radius:18px;background:var(--card);border:1px solid var(--border);word-break:break-word;cursor:pointer;transition:transform .15s,box-shadow .3s;-webkit-tap-highlight-color:transparent}
.grp-msg:not(.mine).first .grp-bubble{border-top-left-radius:6px}
.grp-msg.mine .grp-bubble{background:var(--purple);color:#fff;border-color:transparent}
.grp-msg.mine.first .grp-bubble{border-top-right-radius:6px}
.grp-msg.sticker .grp-bubble{background:transparent;border-color:transparent;padding:0}
.grp-msg.sticker .grp-meta{display:inline-block;background:rgba(0,0,0,.35);color:#fff;border-radius:8px;padding:1px 6px;opacity:1}
.grp-bubble.pressed{transform:scale(.97)}
.grp-bubble.highlight{box-shadow:0 0 0 3px var(--purple-light)}
.grp-author-row{display:flex;align-items:baseline;gap:10px;margin-bottom:2px;max-width:260px;min-width:0}
.grp-author{font-size:12.5px;font-weight:700;cursor:pointer;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp-tag{margin-left:auto;flex-shrink:0;max-width:120px;font-size:11px;font-weight:500;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp-tag:empty{display:none}
.grp-tag.own{display:block;max-width:none;margin:0 0 2px;text-align:right;color:rgba(255,255,255,.75)}
.grp-tag.own:empty{display:none}
.grp-msg.sticker .grp-tag.own{color:var(--text3)}
.grp-text{font-size:14px;line-height:1.42}
.grp-bubble .media-grid-compact,.grp-bubble .media-grid{max-width:240px}
.grp-bubble .grp-text:not(:first-child){margin-top:4px}
.grp-meta{font-size:10.5px;opacity:.6;text-align:right;margin-top:2px;white-space:nowrap}
.grp-reply{display:flex;flex-direction:column;padding:4px 8px;margin:2px 0 5px;border-left:3px solid var(--purple-light);border-radius:6px;background:rgba(167,139,250,.13);font-size:12px;cursor:pointer;max-width:260px}
.grp-msg.mine .grp-reply{background:rgba(255,255,255,.16);border-left-color:#fff}
.grp-reply b{font-size:11.5px;color:var(--purple-light)}
.grp-msg.mine .grp-reply b{color:#fff}
.grp-reply span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.grp-reply-gone{font-style:italic;opacity:.7;cursor:default}
.grp-sys{text-align:center;margin:12px 0}
.grp-sys span{display:inline-block;font-size:11.5px;color:var(--text3);background:rgba(128,128,145,.14);padding:5px 12px;border-radius:12px;max-width:82%;line-height:1.4}
.grp-in{animation:grpIn .22s ease-out}
.grp-out{animation:grpOut .22s ease-in forwards}
@keyframes grpIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes grpOut{to{opacity:0;transform:scale(.94);height:0;margin:0}}
@keyframes grpPop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}

/* поле ввода: ответ и превью */
.grp-replybar{display:flex;align-items:center;gap:10px;margin:8px 10px 0;padding:8px 10px;background:var(--card);border:1px solid var(--border);border-radius:16px;animation:grpIn .18s ease-out}
.grp-replybar-ico{color:var(--purple-light);display:flex}
.grp-replybar-txt{flex:1;min-width:0;display:flex;flex-direction:column;border-left:2px solid var(--purple-light);padding-left:8px}
.grp-replybar-txt b{font-size:12px;color:var(--purple-light)}
.grp-replybar-txt span{font-size:12.5px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp-replybar button{width:28px;height:28px;border-radius:50%;border:0;background:rgba(127,127,127,.15);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer}
#grpMediaPreview{margin:8px 10px 0!important;padding:8px 10px!important;background:var(--card)!important;border:1px solid var(--border);border-radius:18px;box-sizing:border-box}
#grpPreview{margin:8px 10px 0;padding:8px 12px;background:var(--card);border:1px solid var(--border);border-radius:14px;font-size:14px;line-height:1.42;word-break:break-word;overflow:hidden}
#grpComposerRow #grpSendBtn{display:flex;align-items:center;justify-content:center}

/* меню сообщения / участника */
.grp-menu-wrap{position:fixed;inset:0;z-index:16000}
.grp-menu{position:fixed;min-width:190px;padding:6px;border-radius:14px;background:var(--card);border:1px solid var(--border);box-shadow:0 12px 36px rgba(0,0,0,.25);animation:grpPop .14s ease-out;transform-origin:top left}
.grp-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:none;color:var(--text);font:500 14px 'Inter',sans-serif;cursor:pointer;text-align:left}
.grp-menu button:hover{background:rgba(167,139,250,.1)}
.grp-menu button svg{color:var(--text2);flex-shrink:0}
.grp-menu button.danger,.grp-menu button.danger svg{color:#ef4444}

/* «О группе» */
.grp-info{text-align:center;padding:22px 16px 16px!important}
.grp-info-ava{position:relative;width:96px;height:96px;margin:0 auto 12px}
.grp-info-ava .grp-ava{box-shadow:0 10px 30px rgba(124,58,237,.3)}
.grp-info-ava.can-edit{cursor:pointer}
.grp-info-cam{position:absolute;right:-2px;bottom:-2px;width:32px;height:32px;border-radius:50%;background:var(--purple);color:#fff;display:flex;align-items:center;justify-content:center;border:3px solid var(--card)}
.grp-info-cam svg{width:15px;height:15px}
.grp-info-name{font-size:20px;font-weight:800;line-height:1.25;word-break:break-word}
.grp-info-sub{font-size:13px;color:var(--text3);margin-top:3px}
.grp-info-desc{font-size:14px;color:var(--text2);margin:10px auto 0;max-width:420px;line-height:1.45;word-break:break-word}
.grp-actions{display:flex;justify-content:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.grp-actions button{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:88px;padding:10px 12px;border-radius:14px;border:0;background:rgba(167,139,250,.1);color:var(--purple-light);font:600 12px 'Inter',sans-serif;cursor:pointer;transition:background .2s,transform .15s}
.grp-actions button:hover{background:rgba(167,139,250,.18)}
.grp-actions button:active{transform:scale(.96)}
.grp-actions button span{color:var(--text)}
.grp-members{padding:14px 10px 8px!important}
.grp-members .grp-sect-title{padding:0 6px}
.grp-member{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:12px;cursor:pointer;transition:background .15s}
.grp-member:hover{background:rgba(167,139,250,.06)}
.grp-member-txt{flex:1;min-width:0;display:flex;flex-direction:column;text-align:left}
.grp-member-txt b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp-member-txt i{font-style:normal;font-size:12px;color:var(--text3)}
.grp-role{font-size:11px;font-weight:700;color:var(--purple-light);background:rgba(167,139,250,.12);padding:3px 8px;border-radius:8px;flex-shrink:0}
.grp-role.owner{color:#d97706;background:rgba(245,158,11,.14)}
.grp-role{max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp-role.plain{color:var(--text2);background:rgba(127,127,127,.12)}
.grp-tag-field{position:relative;margin-bottom:8px}
.grp-tag-field .grp-input{padding-right:52px;margin:0}
.grp-tag-field span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--text3);pointer-events:none}
.grp-member-more{width:32px;height:32px;border-radius:50%;border:0;background:none;color:var(--text3);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.grp-member-more:hover{background:rgba(127,127,127,.12)}
.grp-danger{padding:6px!important}
.grp-danger button{display:flex;align-items:center;gap:12px;width:100%;padding:13px 12px;border:0;border-radius:12px;background:none;color:#ef4444;font:600 14px 'Inter',sans-serif;cursor:pointer;text-align:left}
.grp-danger button:hover{background:rgba(239,68,68,.08)}
.grp-danger button+button{border-top:1px solid var(--border);border-radius:0 0 12px 12px}
@media (prefers-reduced-motion:reduce){.grp-in,.grp-out,.grp-chip,.grp-menu,.grp-replybar{animation:none}}

/* Обрезка аватарки: масштаб */
#cropArea{cursor:grab}
#cropArea:active{cursor:grabbing}
#cropBgWrap{touch-action:none}
.crop-zoom{display:flex;align-items:center;gap:10px;width:240px;margin:0 0 12px}
.crop-zoom button{width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.crop-zoom button:hover{background:rgba(255,255,255,.18)}
.crop-zoom input{flex:1;accent-color:var(--purple-light);cursor:pointer}
.crop-hint-touch{display:none}
@media (pointer:coarse){.crop-hint-mouse{display:none}.crop-hint-touch{display:inline}}

/* Группы: реакции, закреплённые, права, медленный режим */
.grp-rxs{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 1px}
.grp-rx{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 6px;border-radius:12px;border:1px solid transparent;background:rgba(167,139,250,.14);color:inherit;font:600 12px 'Inter',sans-serif;line-height:20px;cursor:pointer;transition:transform .12s,background .2s}
.grp-rx:active{transform:scale(.92)}
.grp-rx.mine{background:rgba(167,139,250,.28);border-color:var(--purple-light)}
.grp-msg.mine .grp-rx{background:rgba(255,255,255,.18);color:#fff}
.grp-msg.mine .grp-rx.mine{background:rgba(255,255,255,.34);border-color:rgba(255,255,255,.8)}
.grp-bubble.grp-mention{box-shadow:inset 3px 0 0 var(--purple-light);background:linear-gradient(90deg,rgba(167,139,250,.12),var(--card) 60%)}
.grp-pin-mark{opacity:.8}
.grp-sys span.can-del{cursor:pointer}
.grp-sys span.can-del:hover{background:rgba(128,128,145,.24)}
.grp-new-sep{display:flex;align-items:center;gap:10px;margin:14px 4px;color:var(--purple-light);font-size:11.5px;font-weight:700}
.grp-new-sep::before,.grp-new-sep::after{content:'';flex:1;height:1px;background:rgba(167,139,250,.35)}
.grp-head-sub.typing{color:var(--purple-light)}
.grp-head-sub .d3{margin-left:2px}

.grp-pinbar{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 14px;background:var(--card);border-bottom:1px solid var(--border);cursor:pointer;flex-shrink:0;animation:grpIn .2s ease-out}
.grp-pinbar:hover{background:rgba(167,139,250,.05)}
.grp-pin-segs{display:flex;flex-direction:column;gap:2px;align-self:stretch;justify-content:center}
.grp-pin-segs i{display:block;width:3px;flex:1;max-height:14px;min-height:5px;border-radius:2px;background:rgba(167,139,250,.3)}
.grp-pin-segs i.on{background:var(--purple-light)}
.grp-pin-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.grp-pin-txt b{font-size:12px;color:var(--purple-light)}
.grp-pin-txt span{font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp-pin-x{width:28px;height:28px;border-radius:50%;border:0;background:none;color:var(--text3);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.grp-pin-x:hover{background:rgba(127,127,127,.14)}
.grp-pin-ico{color:var(--text3);display:flex}

.grp-readonly{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 16px calc(78px + env(safe-area-inset-bottom,0px));color:var(--text3);font-size:13px}

.grp-menu-rx{display:flex;gap:2px;padding:2px 2px 6px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.grp-menu .grp-menu-rx button{width:34px;height:34px;padding:0;justify-content:center;font-size:20px;border-radius:50%;transition:transform .12s}
.grp-menu .grp-menu-rx button:hover{transform:scale(1.18);background:rgba(167,139,250,.12)}
.grp-menu .grp-menu-rx button.on{background:rgba(167,139,250,.24)}

.grp-info-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px}
.grp-info-chips span{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text2);background:rgba(127,127,127,.1);padding:4px 10px;border-radius:10px}
.grp-info-chips svg{width:13px;height:13px}
.grp-settings{padding:14px 14px 12px!important}
.grp-settings .grp-sect-title svg{width:14px;height:14px}
.grp-settings-hint{font-size:12px;color:var(--text3);margin:0 2px 8px}
.grp-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 2px;cursor:pointer;font-size:14px;border-bottom:1px solid var(--border)}
.grp-toggle:last-of-type{border-bottom:0}
.grp-toggle input{position:absolute;opacity:0;pointer-events:none}
.grp-toggle i{position:relative;width:42px;height:24px;border-radius:12px;background:rgba(127,127,127,.3);flex-shrink:0;transition:background .2s}
.grp-toggle i::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.grp-toggle input:checked+i{background:var(--purple)}
.grp-toggle input:checked+i::after{transform:translateX(18px)}
.grp-toggle input:focus-visible+i{box-shadow:0 0 0 3px rgba(167,139,250,.35)}
.grp-slow{display:flex;flex-wrap:wrap;gap:6px}
.grp-slow button{padding:7px 12px;border-radius:10px;border:1px solid var(--border);background:none;color:var(--text);font:600 12.5px 'Inter',sans-serif;cursor:pointer;transition:all .15s}
.grp-slow button:hover{border-color:var(--purple-light)}
.grp-slow button.on{background:var(--purple);border-color:var(--purple);color:#fff}
.grp-danger button svg{flex-shrink:0}
.grp-settings{text-align:left}
.grp-modal .grp-settings{padding:0!important}
.grp-sys span.can-del{cursor:context-menu}
/* Пункты меню «⋮» лежат внутри шапки, и правило «.cmt-page-title button» (18px, отступ 4px)
   перебивало их собственный стиль — в личке и в группах. Возвращаем задуманный вид. */
.cmt-page-title .chat-ctx-item{font-size:13.5px;padding:9px 14px;gap:9px;background:var(--card);color:var(--text);border-radius:0;white-space:nowrap}
/* меню по ширине пунктов, а не растянутое на 230px */
.cmt-page-title .chat-ctx-menu{min-width:0;width:max-content;max-width:calc(100vw - 24px)}
.cmt-page-title .chat-ctx-item:hover{background:rgba(128,128,145,0.14)}
.cmt-page-title .chat-ctx-item.danger{color:#ef4444}
.cmt-page-title .chat-ctx-item.danger:hover{background:rgba(239,68,68,0.1)}
.cmt-page-title .chat-ctx-item + .chat-ctx-item{border-top:1px solid var(--border)}
/* «О группе»: красная только «Удалить группу», остальные действия — обычным цветом */
.grp-danger button{color:var(--text)}
.grp-danger button svg{color:var(--text2)}
.grp-danger button:hover{background:rgba(128,128,145,0.1)}
.grp-danger button.danger,.grp-danger button.danger svg{color:#ef4444}
.grp-danger button.danger:hover{background:rgba(239,68,68,0.08)}
#grpHeadMenu .chat-ctx-item svg{width:16px;height:16px}

/* «Данная группа недоступна» и чёрный список */
.grp-unavail{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center}
.grp-unavail-ico{width:76px;height:76px;border-radius:50%;background:rgba(167,139,250,.12);color:var(--purple-light);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.grp-unavail b{font-size:17px}
.grp-unavail span{font-size:13px;color:var(--text3)}
.grp-ban-row{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:12px}
.grp-ban-row .grp-pick-txt i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grp-ban-un{flex-shrink:0;padding:7px 12px;border-radius:10px;border:1px solid var(--border);background:none;color:var(--text);font:600 12.5px 'Inter',sans-serif;cursor:pointer}
.grp-ban-un:hover{border-color:var(--purple-light);color:var(--purple-light)}

/* чёрный список в настройках группы */
.grp-settings .grp-sect-title svg{width:14px;height:14px}
.grp-bans-list{max-height:min(30vh,240px);margin-bottom:4px}
.grp-bans-empty{font-size:13px;color:var(--text3);padding:6px 2px 8px}
.grp-ban-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:4px 0 6px;padding:10px 12px;border-radius:12px;border:1.5px dashed rgba(239,68,68,.45);background:none;color:#ef4444;font:600 13.5px 'Inter',sans-serif;cursor:pointer;transition:background .15s}
.grp-ban-add:hover{background:rgba(239,68,68,.07)}
.grp-ban-add svg{width:16px;height:16px}

/* «Внести в чёрный список»: разделы */
.grp-ban-pick{max-height:min(46vh,380px)}
.grp-ban-sect{margin-bottom:6px}
.grp-ban-sect .grp-sect-title{margin:8px 6px 4px}
.grp-ban-sect .grp-bans-empty{padding:2px 8px 8px}

/* «Опубликовать от лица» */
.as-btn{width:38px!important;height:38px!important;border-radius:50%!important;padding:0!important;flex-shrink:0;border:1.5px solid var(--border)!important;background:transparent!important;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:visible}
.as-btn.on{border-color:var(--purple-light)!important;box-shadow:0 0 0 2px rgba(167,139,250,.25)}
.as-btn > img,.as-btn > div,.as-btn > span{pointer-events:none}
.as-ch-ph{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,rgba(167,139,250,.25),rgba(124,58,237,.35));flex-shrink:0}
.as-row{align-items:center;justify-content:space-between;gap:10px;margin:4px 0 10px;padding:8px 10px;border-radius:12px;background:rgba(167,139,250,.07)}
.as-row-lbl{font-size:12.5px;color:var(--text2);font-weight:600}
.as-row-btn{display:flex;align-items:center;gap:7px;max-width:62%;padding:5px 8px 5px 5px;border-radius:20px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;font:600 13px 'Inter',sans-serif}
.as-row-btn.on{border-color:var(--purple-light)}
.as-row-btn b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.as-row-btn svg{flex-shrink:0;color:var(--text3)}
.as-menu-title{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);padding:6px 12px 4px}
.as-item{min-width:230px;gap:10px!important}
.as-item-txt{display:flex;flex-direction:column;min-width:0;text-align:left}
.as-item-txt b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.as-item-txt i{font-style:normal;font-size:11.5px;color:var(--text3)}
/* кнопка «от лица» компактнее, чтобы поле ввода не сжималось; подпись в окне поста — в одну строку */
.as-btn{width:34px!important;height:34px!important;align-self:center}
.as-btn > img,.as-btn > div,.as-btn > span{width:26px!important;height:26px!important;font-size:11px!important}
.as-row-lbl{white-space:nowrap}
.as-row-btn{max-width:58%}

/* ── «О канале» ── */
.ch-info-ava{width:96px;height:96px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(167,139,250,.25),rgba(124,58,237,.35));color:var(--purple-light);box-shadow:0 10px 30px rgba(124,58,237,.3)}
.ch-info-ava img{width:100%;height:100%;object-fit:cover}
.ch-dev-owner{display:inline-flex;align-items:center;gap:5px;font-size:11px;opacity:.7}
.ch-dev-owner svg{width:12px;height:12px}
.ch-uname{display:flex;align-items:center;gap:6px}
.ch-uname span{font-size:16px;font-weight:600;color:var(--text3);margin-bottom:8px}
.ch-uname .grp-input{flex:1}
.ch-hint-ico{display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.ch-hint-ico svg{width:14px;height:14px;flex-shrink:0;margin-top:2px}
.ch-toggle{text-align:left}
.ch-tg-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ch-tg-txt b{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600}
.ch-tg-txt b svg{width:16px;height:16px;color:var(--text2);flex-shrink:0}
.ch-tg-txt small{font-size:12px;color:var(--text3)}
.ch-react-grid{display:flex;flex-wrap:wrap;gap:4px}
.ch-react-pick{font-size:20px;cursor:pointer;padding:3px 5px;border-radius:8px;transition:background .15s}
.ch-nav button span{flex:1}
.ch-nav button em{font-style:normal;font-size:13px;font-weight:600;color:var(--text3)}
.ch-nav button>svg:last-child{color:var(--text3)}
.grp-danger.ch-nav button+button{border-radius:0}
.grp-ban-row{text-align:left}
.achv-pct{font-size:12px;font-weight:700;color:var(--purple-light);background:rgba(167,139,250,.14);padding:5px 10px;border-radius:10px;white-space:nowrap;cursor:default}

/* ── платные посты ── */
.paid-lock{margin:8px 0 4px;padding:18px 14px;border-radius:14px;border:1.5px dashed rgba(167,139,250,.45);background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(167,139,250,.04));text-align:center;cursor:default}
.paid-lock-ico{width:42px;height:42px;border-radius:50%;margin:0 auto 8px;background:rgba(167,139,250,.16);color:var(--purple-light);display:flex;align-items:center;justify-content:center}
.paid-lock-ico svg{width:20px;height:20px}
.paid-lock-title{font-size:15px;font-weight:700}
.paid-lock-sub{font-size:12.5px;color:var(--text3);margin-top:3px}
.paid-lock-btn{margin-top:12px;padding:10px 18px;border:0;border-radius:12px;background:var(--purple);color:#fff;font:700 13.5px 'Inter',sans-serif;cursor:pointer;box-shadow:0 4px 14px rgba(124,58,237,.35)}
.paid-lock-btn:hover{filter:brightness(1.08)}
/* вторая кнопка на замке у владельца: покупка рядом с бесплатным раскрытием */
.paid-lock-btn-alt{background:rgba(124,58,237,.16);color:var(--purple-light);box-shadow:none}
/* модератор: содержимое закрыто, но покупка со скидкой — говорим об этом прямо */
.paid-mod-note{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:9px;font-size:11.5px;font-weight:700;color:#fbbf24;background:rgba(251,191,36,.13);border:1px solid rgba(251,191,36,.28)}
.paid-old-price{font-size:12px;color:var(--text3);text-decoration:line-through;margin-top:5px}
/* «наверх» в ленте: въезжает снизу с пружинкой, исчезает так же */
#feedTopBtn{position:fixed;right:14px;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:9990;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--purple-light);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35);opacity:0;transform:translateY(18px) scale(.6);transition:opacity .22s ease,transform .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
#feedTopBtn.show{opacity:1;transform:none;pointer-events:auto}
#feedTopBtn:active{transform:scale(.88)}
/* громкость собеседника в модалке звонка */
.call-vol-row{display:flex;align-items:center;gap:9px;margin:18px auto 0;max-width:260px;color:var(--text3)}
.call-vol-row input[type=range]{flex:1;accent-color:var(--purple-light);cursor:pointer}
.call-vol-row span{font-size:11px;min-width:40px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text2)}
.paid-chip{display:inline-flex;align-items:center;gap:5px;margin:6px 0 2px;padding:3px 9px;border-radius:9px;font-size:11.5px;font-weight:600;color:var(--purple-light);background:rgba(167,139,250,.12)}
.post-paid-row{margin:8px 0 4px;text-align:left}
.post-paid-lbl{display:flex;flex-direction:column;gap:2px}
.post-paid-lbl b{font-size:14px;font-weight:600}
.post-paid-lbl small{font-size:11.5px;color:var(--text3)}
.post-paid-price{display:flex;align-items:center;gap:8px;margin:6px 0 2px}
.post-paid-price input{width:110px;padding:9px 12px;border-radius:10px;border:1.5px solid var(--border);background:var(--bg);color:var(--text);font:600 14px 'Inter',sans-serif}
.post-paid-price input:focus{outline:none;border-color:var(--purple-light)}
.post-paid-price span{font-size:12px;color:var(--text3)}
/* анимация покупки: тряска и открытие замка, растворение карточки, проявление содержимого */
@keyframes paidShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
@keyframes paidPop{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1.15)}}
@keyframes paidFade{0%{opacity:1;transform:scale(1);filter:blur(0)}100%{opacity:0;transform:scale(.96);filter:blur(4px)}}
@keyframes paidSpent{0%{opacity:0;transform:translate(-50%,6px)}25%{opacity:1;transform:translate(-50%,-4px)}100%{opacity:0;transform:translate(-50%,-34px)}}
@keyframes paidIn{0%{opacity:0;transform:translateY(8px);filter:blur(3px)}100%{opacity:1;transform:none;filter:none}}
@keyframes paidGlow{0%{box-shadow:0 0 0 0 rgba(167,139,250,.55)}100%{box-shadow:0 0 0 14px rgba(167,139,250,0)}}
.paid-lock{position:relative}
.paid-lock.unlocking{pointer-events:none;animation:paidFade .45s ease .3s forwards}
.paid-lock.unlocking .paid-lock-ico{animation:paidShake .32s ease,paidPop .3s ease .3s forwards;background:rgba(34,197,94,.18);color:#22c55e}
.paid-lock.unlocking .paid-lock-btn{opacity:.6}
.paid-spent{position:absolute;left:50%;top:6px;font-weight:800;font-size:15px;color:#ef4444;pointer-events:none;animation:paidSpent .9s ease forwards;white-space:nowrap}
.paid-revealed{animation:paidIn .45s ease both;border-radius:14px}
.paid-revealed .paid-chip{animation:paidGlow .9s ease .15s}
.paid-reveal-in{animation:paidIn .45s ease both}

/* ── сортировка ленты ── */
.feed-sort-bar{display:flex;justify-content:flex-start;margin:2px 12px 8px}
.feed-sort-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text);font:600 12.5px 'Inter',sans-serif;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.04);transition:border-color .2s,box-shadow .2s,transform .15s}
.feed-sort-btn:hover{border-color:rgba(167,139,250,.6);box-shadow:0 4px 16px rgba(124,58,237,.14)}
.feed-sort-btn:active{transform:scale(.97)}
.feed-sort-ico{display:inline-flex;color:var(--purple-light)}
.feed-sort-ico svg{width:15px;height:15px}
.feed-sort-caret{color:var(--text3);transition:transform .25s ease}
.feed-sort-btn.open .feed-sort-caret{transform:rotate(180deg)}
.feed-sort-btn.switching .feed-sort-ico,.feed-sort-btn.switching .feed-sort-lbl{animation:feedSortSwap .35s ease}
@keyframes feedSortSwap{0%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:none}}
.feed-sort-item{display:flex;align-items:center;gap:10px;width:100%}
.feed-sort-item svg{flex-shrink:0;color:var(--text2)}
.feed-sort-item span{flex:1;text-align:left}
.feed-sort-item.on{color:var(--purple-light);font-weight:700}
.feed-sort-item.on svg{color:var(--purple-light)}
.feed-sort-check{margin-left:auto}
.post.feed-sort-out{transition:opacity .18s ease,transform .18s ease;opacity:0;transform:translateY(6px) scale(.99)}
.post.feed-sort-in{animation:feedSortIn .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes feedSortIn{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
#actList>.feed-sort-bar{margin:0 0 8px;justify-content:flex-end}
#actList>.feed-sort-out{transition:opacity .18s ease,transform .18s ease;opacity:0;transform:translateY(6px)}
#actList>.feed-sort-in{animation:feedSortIn .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 45ms)}

/* ── редактор фото перед отправкой (media-editor.js) ──
   Полноэкранный оверлей выше модалок приложения. Всегда тёмный: на фото важна
   не тема сайта, а то, чтобы картинка читалась. */
.me-root{position:fixed;inset:0;z-index:25000;background:rgba(8,8,14,.97);display:flex;flex-direction:column;touch-action:none;-webkit-user-select:none;user-select:none;color:#f1f5f9}
.me-top{display:flex;align-items:center;gap:8px;flex-shrink:0;padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top,0px));border-bottom:1px solid rgba(255,255,255,.08)}
.me-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:0;border-radius:10px;color:#e5e7eb;font:600 13px 'Inter',sans-serif;padding:8px 12px;cursor:pointer}
.me-btn:disabled{opacity:.35;cursor:default}
.me-icon{padding:8px}
.me-done{margin-left:auto;background:linear-gradient(135deg,var(--purple),#6d28d9);border:0;border-radius:10px;color:#fff;font:700 13.5px 'Inter',sans-serif;padding:9px 18px;cursor:pointer;box-shadow:0 4px 14px rgba(124,58,237,.35)}
.me-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px}
.me-canvas{touch-action:none;display:block;border-radius:6px;box-shadow:0 8px 30px rgba(0,0,0,.5);cursor:crosshair}
.me-bottom{flex-shrink:0;border-top:1px solid rgba(255,255,255,.08);padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px))}
.me-tools{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.me-tools::-webkit-scrollbar{display:none}
.me-tool{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:58px;background:rgba(255,255,255,.06);border:1px solid transparent;border-radius:12px;color:#cbd5e1;font:600 10.5px 'Inter',sans-serif;padding:7px 9px;cursor:pointer}
.me-tool.on{background:rgba(167,139,250,.18);border-color:rgba(167,139,250,.55);color:#e9e2ff}
.me-act{flex:0 0 auto;align-self:center}
.me-sub{min-height:4px}
.me-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.me-ratios{gap:6px}
.me-chip{background:rgba(255,255,255,.08);border:1px solid transparent;border-radius:999px;color:#e5e7eb;font:600 12px 'Inter',sans-serif;padding:7px 12px;cursor:pointer}
.me-chip.on{background:rgba(167,139,250,.2);border-color:rgba(167,139,250,.6)}
.me-chip-go{background:linear-gradient(135deg,var(--purple),#6d28d9);color:#fff;box-shadow:0 4px 14px rgba(124,58,237,.3)}
.me-colors{gap:9px}
.me-color{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.35);cursor:pointer;padding:0;transition:transform .15s ease}
.me-color.on{border-color:#fff;transform:scale(1.14)}
.me-slabel{font:600 11.5px 'Inter',sans-serif;color:#94a3b8}
.me-range{flex:1;min-width:130px;accent-color:var(--purple-light);cursor:pointer}
.me-text{flex:1;min-width:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:10px;color:#f1f5f9;font:500 14px 'Inter',sans-serif;padding:10px 12px;outline:none}
.me-text:focus{border-color:rgba(167,139,250,.6)}
.me-hint{font:500 11.5px 'Inter',sans-serif;color:#94a3b8;margin-top:6px}
/* карандаш на превью прикреплённого фото */
.media-preview-edit{position:absolute;right:4px;bottom:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(17,17,27,.72);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;backdrop-filter:blur(3px)}
.media-preview-edit:active{transform:scale(.9)}
/* разделы панели редактора: кадрирование, рисование, замазать, текст */
.me-sections{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
.me-sections::-webkit-scrollbar{display:none}
.me-sect{flex:0 0 auto;background:rgba(255,255,255,.06);border:1px solid transparent;border-radius:999px;color:#cbd5e1;font:600 12.5px 'Inter',sans-serif;padding:8px 14px;cursor:pointer}
.me-sect.on{background:rgba(167,139,250,.2);border-color:rgba(167,139,250,.55);color:#e9e2ff}

/* ── ежедневный квест: анимации ── */
.quest-card{position:relative;overflow:visible;transition:box-shadow .3s ease}
.quest-fill{position:relative;overflow:hidden;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.quest-fill::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);opacity:0}
.quest-fill.quest-shine::after{animation:questShine .9s ease}
@keyframes questShine{0%{left:-40%;opacity:1}100%{left:110%;opacity:0}}
.quest-count.quest-bump{animation:questBump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes questBump{0%{transform:translateY(-50%) scale(1)}40%{transform:translateY(-50%) scale(1.35);color:var(--purple-light)}100%{transform:translateY(-50%) scale(1)}}
.quest-r-rare{box-shadow:0 0 0 0 rgba(59,130,246,.0);animation:questGlowBlue 3s ease-in-out infinite}
@keyframes questGlowBlue{0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,0)}50%{box-shadow:0 0 18px 0 rgba(59,130,246,.28)}}
.quest-r-secret{animation:questGlowGold 2.6s ease-in-out infinite}
@keyframes questGlowGold{0%,100%{box-shadow:0 0 0 0 rgba(234,179,8,0)}50%{box-shadow:0 0 22px 2px rgba(234,179,8,.35)}}
.quest-r-exclusive{animation:questGlowViolet 2.2s ease-in-out infinite}
@keyframes questGlowViolet{0%,100%{box-shadow:0 0 6px 0 rgba(168,85,247,.2)}50%{box-shadow:0 0 26px 4px rgba(168,85,247,.45)}}
.quest-claim{animation:questClaimPulse 1.6s ease-in-out infinite}
@keyframes questClaimPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5);transform:scale(1)}50%{box-shadow:0 0 0 10px rgba(34,197,94,0);transform:scale(1.04)}}
.quest-celebrate{animation:questPop .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes questPop{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
.quest-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:5}
.quest-burst i{position:absolute;width:7px;height:7px;border-radius:2px;left:-3px;top:-3px;animation:questParticle 1.1s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes questParticle{0%{transform:translate(0,0) rotate(0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(260deg) scale(.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.quest-r-rare,.quest-r-secret,.quest-r-exclusive,.quest-claim{animation:none}}

/* ── перелив в иконках навигации: полоса проходит один раз и плавно гаснет ── */
.nav-icon .nav-glow{position:absolute;left:0;top:0;pointer-events:none;opacity:0;animation:navGlow 1.7s ease both;filter:drop-shadow(0 0 3px rgba(139,92,246,.45))}
@keyframes navGlow{0%{opacity:0}12%{opacity:1}70%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.nav-icon .nav-glow{display:none}}