/* ============================================================================
   ФАЙЛ: assets/css/home_v2.css
   НАЗНАЧЕНИЕ: НОВЫЙ интерфейс главной AllaParadise (body.ui-v2). Пишется с нуля:
     старый assets/css/home.css в новом виде НЕ подключается вообще.
   ГЛАВНОЕ ПРАВИЛО: на ПК (ширина ≥ 850 px, высота ≥ 520 px) страница = ровно один экран.
     - высота страницы задаётся от окна (100dvh), а не от содержимого;
     - базовый размер шрифта сцены считается от ВЫСОТЫ окна (и ширины) — всё внутри
       в em, поэтому при любом масштабе Windows / браузера / F11 пропорции одинаковые;
     - растягиваемые блоки (фото в центре, случайный снимок) занимают ОСТАТОК места;
     - js/home_v2.js проверяет, влезло ли, и при нехватке поджимает второстепенное.
   Совместимость: Windows 7 + Яндекс (Chrome 109): без color-mix, oklch, @container,
     вложенного CSS; у 100dvh стоит запасной 100vh.
   ВЕРСИЯ: 1.2.3-a40 (2026-10-09) — кнопка «Přehled webu» в пульте.
   1.2.2-a39 (2026-10-09) — «дыхание» фото и золотое сердце-застёжка.
   1.2.1-a36 (2026-10-09) — переключатели день/ночь и языки вынесены в общий templates/ap_toolbar.php.
   1.2.0-a35 (2026-10-09) — обсуждения списком в левой колонке, золотая кнопка «Správa webu»,
     языки и день/ночь в пульте, размытая подложка у случайного фото.
   1.1.0-a34 (2026-10-09) — подложка с искрами и точками как в старом виде; золотая рамка
     вокруг центра (border-image, углы не плющатся); пульт админа на весь экран без прокрутки.
     Было 1.0.0-a33 (2026-10-09) — новый файл.
   ============================================================================ */

/* ---------- Цвета (ночь по умолчанию) ---------- */
body.ui-v2 {
  --h2-bg: #0b0306;
  --h2-panel: rgba(30, 4, 14, 0.82);
  --h2-panel-2: rgba(52, 7, 24, 0.86);
  --h2-line: rgba(212, 175, 55, 0.34);
  --h2-line-strong: rgba(212, 175, 55, 0.75);
  --h2-gold: #e2bd52;
  --h2-gold-2: #f6dc8a;
  --h2-pink: #ff4f8f;
  --h2-pink-2: #c2185b;
  --h2-text: #f6e6da;
  --h2-dim: rgba(246, 230, 218, 0.68);
  --h2-row: rgba(255, 255, 255, 0.035);
  --h2-row-hover: rgba(255, 79, 143, 0.16);
  --h2-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  --h2-btn-text: #fff;
  --h2-gold-text: #2a1600;
}
html.theme-day body.ui-v2,
body.ui-v2.theme-day {
  --h2-bg: #fbeff3;
  --h2-panel: rgba(255, 251, 252, 0.9);
  --h2-panel-2: rgba(255, 238, 244, 0.95);
  --h2-line: rgba(167, 123, 22, 0.32);
  --h2-line-strong: rgba(154, 116, 0, 0.75);
  --h2-gold: #9a7400;
  --h2-gold-2: #b98f2e;
  --h2-pink: #c2185b;
  --h2-pink-2: #8a1b47;
  --h2-text: #4a1f30;
  --h2-dim: rgba(74, 31, 48, 0.72);
  --h2-row: rgba(255, 255, 255, 0.7);
  --h2-row-hover: rgba(244, 183, 204, 0.55);
  --h2-shadow: 0 12px 30px rgba(120, 60, 80, 0.16);
  --h2-btn-text: #fff;
  --h2-gold-text: #2a1600;
}

/* ---------- Страница и контейнер ---------- */
body.ui-v2 {
  display: block !important;
  background-color: var(--h2-bg);
  min-height: 0 !important;
}
body.ui-v2 > .container {
  width: calc(100% - 20px) !important;
  max-width: 2100px !important;
  margin: 10px auto !important;
  padding: 8px 16px 12px !important;
  display: flex !important;
  flex-direction: column;
  text-align: left;
  border-radius: 22px;
  border: 1.5px solid rgba(255, 101, 150, 0.6);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255, 64, 129, 0.10), transparent 60%),
    linear-gradient(150deg, rgba(48, 5, 20, 0.94), rgba(12, 1, 7, 0.96) 60%, rgba(32, 2, 13, 0.95));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: none !important;
}
html.theme-day body.ui-v2 > .container {
  border-color: rgba(194, 24, 91, 0.45);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255, 140, 180, 0.18), transparent 60%),
    linear-gradient(150deg, #fff9fb, #fdeef4 60%, #fbe6ee);
  box-shadow: 0 20px 50px rgba(120, 60, 80, 0.18), inset 0 1px 0 #fff;
}

/* Подложка как в старом виде: мерцающие искры + мелкие точки (не однотонный фон) */
body.ui-v2::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
  background-image:
    radial-gradient(circle, rgba(255, 192, 214, 0.75) 0 1px, transparent 1.9px),
    radial-gradient(circle, rgba(255, 224, 158, 0.58) 0 1px, transparent 1.9px);
  background-size: 170px 145px, 240px 210px;
}
body.ui-v2 > .container::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: url('/assets/decor/sparkles.png') center / cover no-repeat;
  opacity: .5; animation: h2Sparkle 6s ease-in-out infinite;
}
/* (контейнер изолирован — искры с z-index:-1 лежат над фоном, но под всем содержимым;
    у дочерних элементов position НЕ трогаем, иначе ломаются окна position:fixed) */
html.theme-day body.ui-v2::before { opacity: .35; }
html.theme-day body.ui-v2 > .container::before { opacity: .25; }
@keyframes h2Sparkle { 0%, 100% { opacity: .28; } 50% { opacity: .5; } }

/* Логотип-бабочка и верхняя строка (разметка — общая templates/header.php) */
body.ui-v2 > .container > img[src*="neon_butterfly"] {
  top: 6px !important; left: 14px !important; width: 44px !important;
}
body.ui-v2 .ap-topbar-row {
  flex: 0 0 auto;
  margin: 0 0 8px !important;
  padding: 2px 0 8px 60px !important;
  min-height: 46px;
  border-bottom: 1px solid var(--h2-line) !important;
  gap: 10px;
}
body.ui-v2 .ap-topbar-row .lang-selector { white-space: nowrap; font-weight: 700; }
body.ui-v2 .ap-auth-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .9rem;
  color: var(--h2-gold-2); border: 1.5px solid var(--h2-line-strong);
  background: linear-gradient(180deg, rgba(90, 14, 40, 0.9), rgba(30, 3, 14, 0.95));
}
html.theme-day body.ui-v2 .ap-auth-chip { color: #7a1e40; background: linear-gradient(180deg, #fff, #fde7ef); }
body.ui-v2 .ap-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 30px; margin-right: 8px; cursor: pointer; font-size: 16px;
  border: 1.5px solid var(--h2-line-strong); border-radius: 18px;
  background: linear-gradient(180deg, rgba(104, 12, 44, 0.9), rgba(25, 2, 12, 0.96)); color: #ffd66d;
}
html.theme-day body.ui-v2 .ap-theme-toggle { background: linear-gradient(180deg, #fff, #fde7ef); color: #9a7400; }

/* ---------- Сцена: три колонки ---------- */
body.ui-v2 .h2-stage {
  /* базовый размер: от высоты окна (минус шапка), но не больше, чем позволяет ширина */
  font-size: clamp(12px, min(calc((100vh - 90px) / 44), 1.06vw), 22px);
  font-size: clamp(12px, min(calc((100dvh - 90px) / 44), 1.06vw), 22px);
  color: var(--h2-text);
  line-height: 1.35;
  display: grid;
  grid-template-columns: minmax(190px, 16.5em) minmax(0, 1fr) minmax(220px, 19.5em);
  gap: 1em;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  z-index: 2;
}
body.ui-v2 .h2-col {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  overflow: hidden;
}

/* Общие карточки */
body.ui-v2 .h2-card {
  background: var(--h2-panel);
  border: 1px solid var(--h2-line);
  border-radius: 1em;
  padding: 0.75em;
  box-shadow: var(--h2-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.ui-v2 .h2-card-h {
  display: flex; align-items: center; justify-content: space-between; gap: .5em;
  font-family: 'Playfair Display', Georgia, serif; font-weight: 700;
  color: var(--h2-gold); font-size: 1.05em; margin: 0 0 .5em; list-style: none;
}
body.ui-v2 summary.h2-card-h { cursor: pointer; margin: 0; }
body.ui-v2 summary.h2-card-h::-webkit-details-marker { display: none; }
body.ui-v2 .h2-news[open] summary.h2-card-h { margin-bottom: .5em; }
body.ui-v2 .h2-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6em; height: 1.6em; padding: 0 .45em; border-radius: 999px;
  font-size: .78em; font-weight: 800; font-family: 'Segoe UI', sans-serif;
  color: #fff; background: var(--h2-pink-2); border: 1px solid var(--h2-pink);
}
body.ui-v2 .h2-badge-soft { background: transparent; color: var(--h2-gold); border-color: var(--h2-line-strong); }
body.ui-v2 .h2-muted { color: var(--h2-dim); font-style: italic; margin: 0; font-size: .9em; }
body.ui-v2 .h2-inline { display: inline; margin: 0; padding: 0; }

/* ---------- Кнопки (все заметные: заливка или рамка) ---------- */
body.ui-v2 .h2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  padding: .6em 1.3em; border-radius: 999px; cursor: pointer;
  font: 700 1em/1.15 'Segoe UI', sans-serif; letter-spacing: .03em;
  text-decoration: none; white-space: nowrap; color: var(--h2-btn-text);
  border: 1.5px solid var(--h2-line-strong);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
body.ui-v2 .h2-btn:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 6px 18px rgba(255, 64, 129, 0.35); }
body.ui-v2 .h2-btn:active { transform: translateY(1px); }
body.ui-v2 .h2-btn-like { background: linear-gradient(180deg, #5a0a28, #2a0212); }
body.ui-v2 .h2-btn-like b { color: var(--h2-gold-2); }
body.ui-v2 .h2-btn-about { background: linear-gradient(180deg, #e2457f, #a0164e); border-color: #ff9ab8; text-transform: uppercase; }
body.ui-v2 .h2-btn-gold { background: linear-gradient(180deg, #f6dc8a, #c99a2a); color: var(--h2-gold-text); border-color: #ffeeb0; }
body.ui-v2 .h2-btn-ok { background: linear-gradient(180deg, #2e7d32, #1b5e20); border-color: #81c784; padding: .45em .9em; }
body.ui-v2 .h2-btn-soft { background: rgba(212, 175, 55, 0.12); color: var(--h2-gold-2); }
html.theme-day body.ui-v2 .h2-btn-like { background: linear-gradient(180deg, #fff, #fde3ec); color: #8a1b47; border-color: #c2185b; }
html.theme-day body.ui-v2 .h2-btn-like b { color: #9a7400; }
html.theme-day body.ui-v2 .h2-btn-soft { color: #7a1e40; background: rgba(194, 24, 91, 0.08); }

/* ---------- Левая колонка: меню ---------- */
body.ui-v2 .h2-navcard { padding: .55em; }
@media (min-width: 850px) {
  body.ui-v2 .h2-navcard .side-nav {
    position: static !important; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important; max-width: none !important;
    opacity: 1 !important; transform: none !important; visibility: visible !important;
    display: flex !important; flex-direction: column !important; gap: .3em !important;
    padding: 0 !important; margin: 0 !important; overflow: visible !important;
    background: none !important; border: 0 !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
  }
  body.ui-v2 .h2-navcard .close-menu-btn { display: none !important; }
}
body.ui-v2 .h2-navcard .side-nav > a,
body.ui-v2 .h2-row {
  display: flex !important; align-items: center !important; gap: .55em !important;
  width: 100% !important; min-height: 2.3em; margin: 0 !important;
  padding: .3em .75em !important; box-sizing: border-box;
  font: 600 .95em/1.2 'Segoe UI', sans-serif !important; letter-spacing: .02em !important;
  color: var(--h2-text) !important; text-decoration: none !important; text-align: left;
  background: var(--h2-row) !important;
  border: 1px solid var(--h2-line) !important; border-left: 3px solid transparent !important;
  border-radius: .7em !important; cursor: pointer; transform: none !important;
  box-shadow: none !important; animation: none !important; text-shadow: none !important;
  transition: background .2s ease, border-color .2s ease;
}
body.ui-v2 .h2-navcard .side-nav > a:hover,
body.ui-v2 .h2-row:hover {
  background: var(--h2-row-hover) !important;
  border-color: var(--h2-line-strong) !important; border-left-color: var(--h2-gold) !important;
  padding-left: .75em !important;
}
body.ui-v2 .h2-navcard .side-nav > a.active-link { border-left-color: var(--h2-pink) !important; }
body.ui-v2 .h2-navcard .side-nav > a span { color: var(--h2-gold) !important; }
body.ui-v2 .h2-navcard .btn-contact-admin-pulse {
  border-left: 3px solid var(--h2-pink) !important; color: var(--h2-gold-2) !important; font-weight: 800 !important;
  background: linear-gradient(135deg, rgba(90, 10, 40, 0.55), rgba(30, 3, 14, 0.6)) !important;
}
html.theme-day body.ui-v2 .h2-navcard .btn-contact-admin-pulse { color: #8a1b47 !important; background: linear-gradient(135deg, #ffe2ec, #f7cbd9) !important; }
body.ui-v2 .h2-navcard .nav-divider { height: 1px; margin: .2em .4em !important; background: var(--h2-line) !important; opacity: .6; }
body.ui-v2 .h2-navcard .ap-user-logout-form { margin: 0 !important; }
body.ui-v2 .h2-navcard .ap-user-logout-btn {
  min-height: 2.3em; padding: .3em .75em !important; font-size: .95em !important; border-radius: .7em !important;
  background: var(--h2-row) !important; border: 1px solid var(--h2-line) !important; color: var(--h2-text) !important;
}
body.ui-v2 .h2-extras { display: flex; flex-direction: column; gap: .3em; padding: .55em; }
body.ui-v2 .h2-row { font-family: 'Segoe UI', sans-serif; }
body.ui-v2 button.h2-row { -webkit-appearance: none; appearance: none; }
body.ui-v2 .h2-row-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui-v2 .h2-ico { flex: 0 0 auto; width: 1.3em; text-align: center; }
body.ui-v2 .h2-chev { color: var(--h2-gold); font-weight: 900; }
/* «Správa webu» — главная кнопка админа: крупная, золотая, сразу видна */
body.ui-v2 .h2-admin-btn {
  flex: 0 0 auto; width: 100%; display: flex; align-items: center; gap: .6em;
  min-height: 3em; padding: .5em .9em; cursor: pointer; text-align: left;
  font: 800 1.05em/1.15 'Segoe UI', sans-serif; letter-spacing: .03em;
  color: #2a1600; border: 1.5px solid #ffeeb0; border-radius: .9em;
  background: linear-gradient(180deg, #f8e19a 0%, #e2bd52 45%, #b8862a 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 .4em 1.2em rgba(226, 189, 82, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
body.ui-v2 .h2-admin-btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 .5em 1.6em rgba(226, 189, 82, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
body.ui-v2 .h2-admin-ico { font-size: 1.25em; }
body.ui-v2 .h2-admin-t { flex: 1 1 auto; text-transform: uppercase; }
body.ui-v2 .h2-admin-btn .h2-chev { color: #5a3a00; font-size: 1.2em; }
body.ui-v2 .h2-admin-btn .h2-badge { background: #c2185b; border-color: #fff; }

/* Активные обсуждения — живой список в левой колонке */
body.ui-v2 .h2-discuss { flex: 1 1 8em; min-height: 6em; display: flex; flex-direction: column; overflow: hidden; padding: .6em; }
body.ui-v2 .h2-discuss-h { text-decoration: none; margin-bottom: .45em; font-size: .98em; }
body.ui-v2 .h2-discuss-h:hover span:first-child { text-decoration: underline; }
body.ui-v2 .h2-discuss-list { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: .35em; }
body.ui-v2 .h2-discuss .h2-post { margin: 0; padding: .35em .55em; flex: 0 0 auto; }
body.ui-v2 .h2-discuss .h2-post-p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ui-v2 .h2-discuss.h2-discuss-compact { flex: 0 0 auto; min-height: 0; }
body.ui-v2 .h2-discuss.h2-discuss-compact .h2-discuss-list { display: none; }
body.ui-v2 .h2-discuss-open { flex: 0 0 auto; margin-top: .45em; width: 100%; font-size: .85em; padding: .45em .8em; }
body.ui-v2 .h2-music-spacer { flex: 0 0 auto; height: 58px; margin-top: auto; }

/* ---------- Центр ---------- */
body.ui-v2 .h2-center {
  position: relative;
  align-items: center;
  text-align: center;
  padding: 1.7em 2.6em 1.6em;
  gap: .55em;
  border-radius: 1.4em;
  border: 0;
  background:
    radial-gradient(60% 55% at 50% 52%, rgba(255, 79, 143, 0.16), transparent 70%),
    rgba(40, 4, 17, 0.45);
  box-shadow: var(--h2-shadow), inset 0 0 40px rgba(212, 175, 55, 0.06);
}
/* Золотая рамка из старого вида (header-border2.png). Через border-image: углы с завитками
   НЕ растягиваются (в старом виде картинка растягивалась целиком и углы плющило). */
body.ui-v2 .h2-frame {
  position: absolute; inset: .25em; pointer-events: none; z-index: 0;
  border: 5.4em solid transparent;
  border-image: url('/header-border2.png') 1260 / 5.4em / 0 stretch;
  opacity: .82;
  filter: drop-shadow(0 0 .6em rgba(212, 175, 55, 0.28));
}
html.theme-day body.ui-v2 .h2-frame { opacity: .7; filter: none; }
body.ui-v2 .h2-frame-heart {
  position: absolute !important; top: .15em; left: 50%; transform: translateX(-50%);
  width: 1.9em; height: 1.6em; pointer-events: none; z-index: 2 !important;
  background: url('/assets/decor/heart_gem.png') center / contain no-repeat;
  filter: drop-shadow(0 0 .5em rgba(255, 80, 135, 0.55));
}
body.ui-v2 .h2-center > *:not(.h2-frame):not(.h2-frame-heart) { position: relative; z-index: 1; }

body.ui-v2 .h2-title { display: flex; align-items: center; justify-content: center; gap: .55em; flex: 0 0 auto; max-width: 100%; }
body.ui-v2 .h2-title h1 {
  margin: 0; padding: 0; border: 0;
  font: 900 2.35em/1.1 'Playfair Display', Georgia, serif; letter-spacing: .04em; text-transform: uppercase;
  color: var(--h2-gold);
  background: linear-gradient(180deg, #fff1bf 0%, #f0c95a 45%, #b8862a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
html.theme-day body.ui-v2 .h2-center { background: radial-gradient(60% 55% at 50% 52%, rgba(255, 140, 180, 0.18), transparent 70%), rgba(255, 255, 255, 0.45); }
html.theme-day body.ui-v2 .h2-title h1 {
  background: linear-gradient(180deg, #c9a227, #8a6400); -webkit-background-clip: text; background-clip: text;
  filter: none;
}
body.ui-v2 .h2-heart {
  flex: 0 0 auto; width: 1.5em; height: 1.5em;
  background: url('/assets/decor/heart_gem.png') center / contain no-repeat;
}
body.ui-v2 .h2-status {
  flex: 0 0 auto; margin: 0; max-width: 92%;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 1em; color: var(--h2-text);
}
body.ui-v2 .h2-status-l {
  display: inline-block; margin-right: .5em; padding: .05em .55em; border-radius: 999px;
  font-size: .78em; font-weight: 800; letter-spacing: .2em; vertical-align: .08em;
  color: var(--h2-gold); border: 1px solid var(--h2-line-strong);
}

body.ui-v2 .h2-hero {
  flex: 1 1 auto; min-height: 6em; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
body.ui-v2 .h2-hero-box {
  position: relative;
  width: var(--h2-ph, 18em); height: var(--h2-ph, 18em);
}
body.ui-v2 .h2-photo {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  padding: .45em;
  background: conic-gradient(from 210deg, #f6dc8a, #b8862a, #ffd9e6, #c99a2a, #f6dc8a);
  box-shadow: 0 0 0 .2em rgba(255, 79, 143, 0.35), 0 0 2.2em rgba(255, 79, 143, 0.45), 0 1em 2.5em rgba(0, 0, 0, 0.55);
}
body.ui-v2 .h2-photo img {
  width: 100%; height: 100%; display: block; border-radius: 50%;
  object-fit: cover; object-position: center top;
  filter: brightness(1.06) contrast(1.04);
  -webkit-user-drag: none; user-select: none;
}
/* a39: «дыхание» фото — мягкое свечение кольца и едва заметное приближение снимка ВНУТРИ круга.
   Из старого вида НЕ взято «парение» вверх-вниз с поворотом: оно дёргало соседние элементы и размывало фото. */
body.ui-v2 .h2-photo { animation: h2Glow 4s ease-in-out infinite; }
body.ui-v2 .h2-photo img { animation: h2Breathe 4s ease-in-out infinite; transform-origin: 50% 40%; }
@keyframes h2Glow {
  0%, 100% { box-shadow: 0 0 0 .2em rgba(255, 79, 143, 0.30), 0 0 1.6em rgba(255, 79, 143, 0.35), 0 1em 2.5em rgba(0, 0, 0, 0.55); }
  50%      { box-shadow: 0 0 0 .25em rgba(255, 120, 170, 0.45), 0 0 3em rgba(255, 79, 143, 0.60), 0 1em 2.5em rgba(0, 0, 0, 0.55); }
}
@keyframes h2Breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
/* Сердце-застёжка внизу кольца: картинка (не эмодзи — на Windows 7 эмодзи были квадратиками) */
body.ui-v2 .h2-clasp {
  position: absolute; left: 50%; bottom: -3%; width: 17%; height: 15%; z-index: 3; pointer-events: none;
  transform: translateX(-50%);
  background: url('/assets/decor/heart_gold.png') center / contain no-repeat;
  filter: drop-shadow(0 0 .5em rgba(255, 200, 90, 0.55)) drop-shadow(0 .2em .3em rgba(0, 0, 0, 0.5));
  animation: h2Clasp 2.4s ease-in-out infinite;
}
@keyframes h2Clasp { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  body.ui-v2 .h2-photo, body.ui-v2 .h2-photo img, body.ui-v2 .h2-clasp { animation: none; }
}

body.ui-v2 .h2-rose {
  position: absolute; bottom: -4%; width: 34%; height: 34%; z-index: 2; pointer-events: none;
  background: url('/assets/decor/rose_l.png') center / contain no-repeat;
  filter: drop-shadow(0 .4em .6em rgba(0, 0, 0, 0.5));
}
body.ui-v2 .h2-rose-l { left: -16%; }
body.ui-v2 .h2-rose-r { right: -16%; background-image: url('/assets/decor/rose_r.png'); }

body.ui-v2 .h2-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: .6em; }
body.ui-v2 .h2-like-form { margin: 0; }
body.ui-v2 .h2-audio { flex: 0 0 auto; width: min(100%, 22em); }
body.ui-v2 .h2-audio audio { width: 100%; height: 2.2em; display: block; }

/* ---------- Правая колонка ---------- */
body.ui-v2 .h2-random { flex: 1 1 9em; min-height: 6.5em; display: flex; flex-direction: column; }
body.ui-v2 .h2-random-img {
  flex: 1 1 auto; min-height: 0; position: relative; display: block;
  border-radius: .7em; overflow: hidden; border: 1px solid var(--h2-line);
  background: rgba(0, 0, 0, 0.35);
}
html.theme-day body.ui-v2 .h2-random-img { background: rgba(255, 255, 255, 0.6); }
body.ui-v2 .h2-random-img::before {
  content: ""; position: absolute; inset: -12px; background: var(--h2-rp) center / cover no-repeat;
  filter: blur(14px) brightness(.55) saturate(1.1);
}
body.ui-v2 .h2-random-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
body.ui-v2 .h2-random-img:hover { border-color: var(--h2-pink); }

body.ui-v2 .h2-news { flex: 0 1 auto; min-height: 2.9em; overflow: hidden; }
body.ui-v2 .h2-news-list { max-height: 13em; overflow-y: auto; padding-right: .2em; }
body.ui-v2 .h2-news-item + .h2-news-item { margin-top: .55em; padding-top: .55em; border-top: 1px dashed var(--h2-line); }
body.ui-v2 .h2-news-meta { display: flex; align-items: center; justify-content: space-between; gap: .5em; font-size: .78em; color: var(--h2-gold); }
body.ui-v2 .h2-news-del {
  cursor: pointer; font: 700 1em 'Segoe UI', sans-serif; padding: .1em .55em; border-radius: 999px;
  color: #fff; background: rgba(198, 40, 40, 0.75); border: 1px solid #ff8a80;
}
body.ui-v2 .h2-news-title { margin: .15em 0 .1em; font: 700 .95em/1.25 'Segoe UI', sans-serif; color: var(--h2-text); }
body.ui-v2 .h2-news-text {
  margin: 0; font-size: .85em; color: var(--h2-dim); white-space: pre-wrap;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}

body.ui-v2 .h2-vip {
  flex: 0 0 auto; position: relative; overflow: hidden; text-align: center;
  padding: .8em .8em 1em;
  border-color: rgba(255, 101, 150, 0.6);
  background: radial-gradient(90% 70% at 50% 0%, rgba(255, 79, 143, 0.25), transparent 70%), linear-gradient(180deg, #5a0c2a, #2a0313);
}
html.theme-day body.ui-v2 .h2-vip { background: radial-gradient(90% 70% at 50% 0%, rgba(255, 140, 180, 0.35), transparent 70%), linear-gradient(180deg, #fff, #fde3ec); }
body.ui-v2 .h2-vip > * { position: relative; z-index: 1; }
body.ui-v2 .h2-vip-rose {
  position: absolute; bottom: -.4em; width: 3.4em; height: 3.8em; z-index: 0; opacity: .9; pointer-events: none;
  background: url('/assets/roses/ap_rose_luxury_v2.png') center / contain no-repeat;
}
body.ui-v2 .h2-vip-rose.l { left: -.3em; }
body.ui-v2 .h2-vip-rose.r { right: -.3em; transform: scaleX(-1); }
body.ui-v2 .h2-vip-title { font: 900 1.45em/1.15 'Playfair Display', Georgia, serif; color: var(--h2-gold-2); letter-spacing: .06em; text-transform: uppercase; }
html.theme-day body.ui-v2 .h2-vip-title { color: #8a6400; }
body.ui-v2 .h2-vip-sub { font-size: .78em; letter-spacing: .3em; text-transform: uppercase; color: var(--h2-dim); margin: .2em 0 .6em; }
body.ui-v2 .h2-vip-ok { margin: 0 0 .5em; color: #7be08a; font-weight: 700; font-size: .9em; }
html.theme-day body.ui-v2 .h2-vip-ok { color: #2e7d32; }
body.ui-v2 .h2-vip-err { margin: 0 0 .5em; color: #ff8a80; font-weight: 700; font-size: .85em; }
body.ui-v2 .h2-vip-form { margin: 0; }
body.ui-v2 .h2-vip-manual { display: inline-block; margin-top: .5em; font-size: .78em; color: var(--h2-dim); text-decoration: underline dotted; }
body.ui-v2 .h2-vip-manual-box { margin-top: .5em; justify-content: center; gap: .5em; align-items: center; }
body.ui-v2 .h2-vip-manual-box[style*="flex"] { display: flex !important; }
body.ui-v2 .h2-input {
  width: 8em; padding: .45em .7em; border-radius: .6em; font-size: 1em;
  background: rgba(0, 0, 0, 0.55); color: #fff; border: 1px solid var(--h2-line-strong);
}
html.theme-day body.ui-v2 .h2-input { background: #fff; color: #4a1f30; }

/* ---------- Всплывающий список обсуждений ---------- */
body.ui-v2 .h2-pop {
  position: fixed; z-index: 9000; width: min(26em, 92vw); max-height: 72vh; overflow-y: auto;
  font-size: clamp(12px, min(calc((100vh - 90px) / 44), 1.06vw), 17px);
  padding: .8em; border-radius: 1em; color: var(--h2-text);
  background: linear-gradient(180deg, #2c0514, #13020a);
  border: 1.5px solid var(--h2-line-strong); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75);
}
html.theme-day body.ui-v2 .h2-pop { background: linear-gradient(180deg, #fff, #fdeef4); }
body.ui-v2 .h2-pop[hidden], body.ui-v2 .h2-drawer[hidden], body.ui-v2 .h2-drawer-veil[hidden] { display: none !important; }
body.ui-v2 .h2-pop-h, body.ui-v2 .h2-drawer-h { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-bottom: .6em; color: var(--h2-gold); font-family: 'Playfair Display', Georgia, serif; font-size: 1.05em; }
body.ui-v2 .h2-x {
  cursor: pointer; width: 2em; height: 2em; border-radius: 50%; font-size: .95em; font-weight: 800;
  color: var(--h2-text); background: rgba(255, 79, 143, 0.18); border: 1px solid var(--h2-pink);
}
body.ui-v2 .h2-pop-open { width: 100%; margin-bottom: .6em; }
body.ui-v2 .h2-post {
  display: block; padding: .5em .6em; margin-bottom: .4em; border-radius: .6em; text-decoration: none;
  background: var(--h2-row); border: 1px solid var(--h2-line);
}
body.ui-v2 .h2-post:hover { border-color: var(--h2-pink); background: var(--h2-row-hover); }
body.ui-v2 .h2-post-t { display: block; font-weight: 700; color: var(--h2-gold-2); }
html.theme-day body.ui-v2 .h2-post-t { color: #8a1b47; }
body.ui-v2 .h2-post-p { display: block; font-size: .88em; color: var(--h2-text); }
body.ui-v2 .h2-post-d { display: block; font-size: .75em; color: var(--h2-dim); margin-top: .15em; }

/* ---------- Выдвижная панель админа ---------- */
body.ui-v2 .h2-drawer-veil { position: fixed; inset: 0; z-index: 99988; background: rgba(0, 0, 0, 0.55); }
body.ui-v2 .h2-drawer {
  /* Пульт админа на весь экран */
  position: fixed; inset: 0; z-index: 99990;
  display: flex; flex-direction: column;
  padding: 12px 18px 14px; overflow-y: auto; text-align: left;
  font-size: clamp(12px, min(calc(100vh / 40), 1.1vw), 18px);
  font-size: clamp(12px, min(calc(100dvh / 40), 1.1vw), 18px);
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(255, 64, 129, 0.12), transparent 60%),
    linear-gradient(180deg, #22030f, #0d0106);
  color: var(--h2-text);
}
html.theme-day body.ui-v2 .h2-drawer { background: linear-gradient(180deg, #fff, #fdeef4); }
body.ui-v2.h2-drawer-on #hifi-player-wrapper { display: none !important; }
body.ui-v2 .h2-con-tb .ap-tb-langs a { font-size: 13px; padding: 5px 9px; }
body.ui-v2 .h2-con-hub { font-size: .7em; padding: .45em 1em; margin-right: auto; margin-left: 1em; }
body.ui-v2 .h2-con-tools { display: inline-flex; align-items: center; gap: .6em; font-family: 'Segoe UI', sans-serif; font-size: .8em; }
body.ui-v2 .h2-con-langs { display: inline-flex; gap: .25em; }
body.ui-v2 .h2-con-langs a {
  min-width: 2.6em; text-align: center; padding: .3em .55em; border-radius: 999px; text-decoration: none; font-weight: 800;
  color: var(--h2-text); background: var(--h2-row); border: 1.5px solid var(--h2-line-strong);
}
body.ui-v2 .h2-con-langs a.on, body.ui-v2 .h2-con-langs a:hover { background: linear-gradient(180deg, #f6dc8a, #c99a2a); color: #2a1600; border-color: #ffeeb0; }
body.ui-v2 .h2-con-theme {
  cursor: pointer; padding: .3em .8em; border-radius: 999px; font-weight: 700;
  color: #ffd66d; background: linear-gradient(180deg, rgba(104, 12, 44, 0.9), rgba(25, 2, 12, 0.96)); border: 1.5px solid var(--h2-line-strong);
}
html.theme-day body.ui-v2 .h2-con-theme { color: #9a7400; background: linear-gradient(180deg, #fff, #fde7ef); }
body.ui-v2 .h2-drawer-h { flex: 0 0 auto; font-size: 1.25em; padding-bottom: .4em; border-bottom: 1px solid var(--h2-line); }
body.ui-v2 .h2-drawer-b {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 24em); gap: 1em; align-items: start;
}
body.ui-v2 .h2-con-main .ac-menu {
  margin: 0 !important; max-width: none !important; padding: .8em 1em !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.ui-v2 .h2-con-main .ac-menu-title { font-size: .95em !important; margin-bottom: .7em !important; }
/* Кнопки сгруппированы скриптом в колонки .h2-sec */
body.ui-v2 .h2-con-main .ac-menu-grid.h2-secs {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(11.5em, 1fr)) !important; gap: .9em 1em !important;
}
body.ui-v2 .h2-sec { display: flex; flex-direction: column; gap: .45em; min-width: 0; }
body.ui-v2 .h2-sec .ac-menu-section-title { margin: 0 0 .1em !important; font-size: .78em !important; }
body.ui-v2 .h2-con-main .ac-menu-btn {
  min-height: 2.6em !important; padding: .45em .7em !important; font-size: .9em !important;
  justify-content: flex-start !important; text-align: left !important; border-radius: .7em !important;
  box-shadow: 0 2px 0 #000, 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}
html.theme-day body.ui-v2 .h2-con-main .ac-menu-btn { box-shadow: 0 2px 0 rgba(150, 60, 90, 0.25) !important; }
body.ui-v2 .h2-con-main .ac-menu-btn .cnt { margin-left: auto; }
body.ui-v2 .h2-con-side { display: flex; flex-direction: column; gap: .8em; min-width: 0; }
body.ui-v2 .h2-con-side .avp-panel { margin: 0 !important; max-width: none !important; padding: .8em 1em !important; }
body.ui-v2 .h2-con-side .avp-head .avp-title { font-size: 1.05em !important; }
body.ui-v2 .h2-con-side .avp-stat { min-width: 5.5em !important; padding: .5em .3em !important; }
body.ui-v2 .h2-con-side .avp-stat .num { font-size: 1.4em !important; }
body.ui-v2 .h2-con-side .avp-btn { padding: .45em .9em !important; font-size: .85em !important; }
@media (max-width: 849px) {
  body.ui-v2 .h2-drawer { font-size: 14px; padding: 10px; }
  body.ui-v2 .h2-drawer-b { grid-template-columns: 1fr; }
  body.ui-v2 .h2-con-side { order: -1; }
}
body.ui-v2 .h2-ui-switch { padding: .8em 1em; border-radius: 14px; border: 1px solid var(--h2-line-strong); background: rgba(212, 175, 55, 0.08); }
body.ui-v2 .h2-ui-h { font-weight: 800; color: var(--h2-gold); margin-bottom: 8px; }
body.ui-v2 .h2-ui-row { display: flex; align-items: center; justify-content: space-between; gap: .5em; flex-wrap: wrap; margin: .4em 0; font-size: .92em; }
body.ui-v2 .h2-seg {
  cursor: pointer; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .85rem;
  color: var(--h2-text); background: var(--h2-row); border: 1.5px solid var(--h2-line-strong);
}
body.ui-v2 .h2-seg.on { background: linear-gradient(180deg, #f6dc8a, #c99a2a); color: #2a1600; border-color: #ffeeb0; }
body.ui-v2 .h2-ui-note { font-size: .8rem; color: var(--h2-dim); margin-top: 6px; }

/* ---------- Музыка: кнопка в левый нижний угол (там под неё оставлено место) ---------- */
@media (min-width: 850px) {
  body.ui-v2 #hifi-player-wrapper { left: max(22px, calc((100vw - 2100px) / 2 + 22px)) !important; right: auto !important; bottom: 20px !important; }
  body.ui-v2 #hifi-toggle { width: 50px !important; height: 50px !important; font-size: 1.3rem !important; }
  body.ui-v2 #hifi-panel { left: 0 !important; right: auto !important; bottom: 62px !important; }
}

/* ============================================================================
   ПК: один экран (ширина ≥ 850 и высота ≥ 520)
   ============================================================================ */
@media (min-width: 850px) and (min-height: 520px) {
  body.ui-v2 > .container {
    height: calc(100vh - 20px);
    height: calc(100dvh - 20px);
    overflow: hidden;
  }
  body.ui-v2 .btn-to-top { display: none !important; }
}

/* Поджатие (ставит js/home_v2.js, только если не влезло) */
body.ui-v2 .h2-stage.h2-tight .h2-navcard .side-nav > a,
body.ui-v2 .h2-stage.h2-tight .h2-row,
body.ui-v2 .h2-stage.h2-tight .h2-navcard .ap-user-logout-btn { min-height: 2em; padding-top: .2em !important; padding-bottom: .2em !important; }
body.ui-v2 .h2-stage.h2-tight .h2-navcard .side-nav { gap: .2em !important; }
body.ui-v2 .h2-stage.h2-tight .h2-col { gap: .5em; }
body.ui-v2 .h2-stage.h2-tight .h2-news-list { max-height: 7em; }
body.ui-v2 .h2-stage.h2-tight .h2-vip-sub { display: none; }
body.ui-v2 .h2-stage.h2-tighter .h2-navcard .nav-divider { display: none; }
body.ui-v2 .h2-stage.h2-tighter .h2-news-text { -webkit-line-clamp: 2; }
body.ui-v2 .h2-stage.h2-tighter .h2-status { -webkit-line-clamp: 1; }
body.ui-v2 .h2-stage.h2-tighter .h2-music-spacer { height: 52px; }
body.ui-v2 .h2-stage.h2-tighter .h2-discuss { flex: 0 0 auto; min-height: 0; }
body.ui-v2 .h2-stage.h2-tighter .h2-discuss-list, body.ui-v2 .h2-stage.h2-tighter .h2-discuss-open { display: none; }
body.ui-v2 .h2-stage.h2-tighter .h2-discuss-h { margin: 0; }
body.ui-v2 .h2-stage.h2-scroll-cols .h2-col { overflow-y: auto; }

/* ============================================================================
   Узкий экран (телефон, планшет вертикально) — обычная лента с прокруткой
   ============================================================================ */
@media (max-width: 849px) {
  body.ui-v2 > .container { width: calc(100% - 14px) !important; padding: 8px 10px 20px !important; }
  body.ui-v2 .ap-topbar-row { padding-left: 52px !important; }
  body.ui-v2 .h2-stage { display: flex; flex-direction: column; font-size: 15px; gap: 12px; }
  body.ui-v2 .h2-col { overflow: visible; display: contents; }
  body.ui-v2 .h2-navcard { display: contents; }
  body.ui-v2 .h2-center { order: 1; display: flex; padding: 14px 10px 16px; }
  body.ui-v2 .h2-vip { order: 2; }
  body.ui-v2 .h2-extras { order: 3; }
  body.ui-v2 .h2-discuss { order: 3; flex: 0 0 auto; }
  body.ui-v2 .h2-discuss .h2-post:nth-child(n+4) { display: none !important; }
  body.ui-v2 .h2-news { order: 4; }
  body.ui-v2 .h2-random { order: 5; min-height: 260px; }
  body.ui-v2 .h2-admin-btn { order: 6; }
  body.ui-v2 .h2-music-spacer { display: none; }
  body.ui-v2 .h2-title h1 { font-size: 1.45em; white-space: normal; }
  body.ui-v2 .h2-frame, body.ui-v2 .h2-frame-heart { display: none !important; }
  /* Меню-шторка (.side-nav, z-index 1000) должна быть ВЫШЕ затемнения .mobile-overlay (z-index 90):
     поэтому сцена на телефоне не создаёт свой слой (иначе меню «еле просвечивает» сквозь затемнение) */
  body.ui-v2 .h2-stage { position: static; z-index: auto; }
  body.ui-v2 .h2-hero { min-height: 0; }
  body.ui-v2 .h2-hero-box { width: min(72vw, 300px); height: min(72vw, 300px); }
  body.ui-v2 .h2-news-list { max-height: none; }
}
/* Очень низкое окно на ПК (< 520 px): лента с прокруткой, без поджатия в один экран */
@media (min-width: 850px) and (max-height: 519px) {
  body.ui-v2 .h2-col { overflow: visible; }
  body.ui-v2 .h2-hero-box { width: 16em; height: 16em; }
}

@media (prefers-reduced-motion: reduce) {
  body.ui-v2 .h2-btn, body.ui-v2 .h2-row { transition: none; }
}