/* DESIGN V2 (16): палитра карточек/чипов/кнопок = ВК-мини-апп (запрос владельца 2026-07-17).
   Токены ВК: рамка #575469 («обводка 37%»), фон карточек #1b1b25 («чуть-чуть серости»),
   ореол за рамками 0 0 18px rgba(255,145,75,.14), чипы на #15151d, активная рамка/пилюля — оранжевые.
   Блок ПОСЛЕ базовых v2-правил — переопределяет каскадом; откат = удалить блок. */
@media (min-width: 901px) {
  body.design-v2 {
    --dv2-line: #575469;
    --dv2-card-bg: #1b1b25;
    --dv2-card-glow: 0 0 18px rgba(255, 145, 75, 0.14);
    --dv2-chip-bg: #15151d;
  }
  /* Карточки контента: сероватый фон + рамка 37% + оранжевый ореол */
  body.design-v2 .dv2-mrow,
  body.design-v2 .dv2-song-card,
  body.design-v2 .dv2-poet-card,
  body.design-v2 .dv2-poem-card,
  body.design-v2 .dv2-trend,
  body.design-v2 .dv2-swipe-card,
  body.design-v2 .dv2-prof-card,
  body.design-v2 .dv2-shop-summary,
  body.design-v2 .dv2-shop-pack,
  body.design-v2 .dv2-shop-plan,
  body.design-v2 .dv2-cr-row,
  body.design-v2 .dv2-mine-status,
  body.design-v2 .dv2-ps-col .ptext-panel,
  body.design-v2 .dv2-ps-col .create-section,
  body.design-v2 .dv2-ps-col .create-adaptation,
  body.design-v2 .dv2-ps-col .create-notice,
  body.design-v2 .dv2-ps-col .create-immediate-card,
  body.design-v2 .dv2-ps-col #create-coverage-card,
  body.design-v2 .dv2-detail-col .detail-panel,
  body.design-v2 .dv2-detail-col .variant-card,
  body.design-v2 .dv2-detail-col .comment-item,
  body.design-v2 .dv2-detail-col .comments-panel,
  body.design-v2 .dv2-poems-empty {
    background: var(--dv2-card-bg);
    border-color: var(--dv2-line);
    box-shadow: var(--dv2-card-glow);
  }
  body.design-v2 .dv2-mrow:hover, body.design-v2 .dv2-song-card:hover, body.design-v2 .dv2-poet-card:hover { border-color: #6f6c85; }
  /* Играющая карточка: оранжевая рамка + тёплый фон (ВК .track-card.active) */
  body.design-v2 .dv2-mrow.active,
  body.design-v2 .dv2-song-card.active,
  body.design-v2 .dv2-trend.active,
  body.design-v2 .dv2-swipe-card.active {
    border-color: rgba(255, 138, 61, 0.5);
    background: #221c1e;
    box-shadow: 0 0 18px rgba(255, 145, 75, 0.22);
  }
  /* Свежая песня: зелёная рамка (ВК .track-card.new) — фон тоже с зелёным тоном */
  body.design-v2 .dv2-mrow.new { background: #1a231e; box-shadow: 0 0 18px rgba(34, 197, 94, 0.14); }
  /* Чипы и служебные кнопки: рамка 37% на #15151d */
  body.design-v2 .dv2-chip,
  body.design-v2 .dv2-mrow-tag,
  body.design-v2 .dv2-song-chip,
  body.design-v2 .dv2-seg,
  body.design-v2 .dv2-filter-btn,
  body.design-v2 .dv2-filter-switch,
  body.design-v2 .dv2-fav-counter,
  body.design-v2 .dv2-more-btn,
  body.design-v2 .dv2-swipe-nav,
  body.design-v2 .dv2-vbtn,
  body.design-v2 .dv2-detail-col .lyrics-action-btn,
  body.design-v2 .dv2-filter-chips .dv2-chip,
  body.design-v2 .dv2-poets-chiprow .dv2-chip {
    background: var(--dv2-chip-bg);
    border-color: var(--dv2-line);
  }
  /* Активные чипы/сегменты: оранжевые (ВК .filter-chip.active) — вместо фиолетового акцента */
  body.design-v2 .dv2-chip.active,
  body.design-v2 .dv2-seg button.active,
  body.design-v2 .dv2-genre-chip.active,
  body.design-v2 .dv2-filter-chips .dv2-chip.active {
    border-color: rgba(255, 138, 61, 0.65);
    color: #ffb273;
    background: rgba(255, 138, 61, 0.12);
  }
  /* Пилюля версии активная: оранжевая с тёмным глифом (ВК .tv-btn.active) */
  body.design-v2 .dv2-vbtn.active {
    background: #ff8a3d;
    border-color: #ff8a3d;
    color: #0b0b0f;
    box-shadow: 0 4px 12px rgba(255, 138, 61, 0.35);
  }
}

/* ── Колокольчик «новое в Ленте» (порт ВК vk-190: значения подбора владельца 07-16 дословно) ── */
.feed-bell {
  position: absolute; top: 2px; right: 4px;
  display: inline-flex; align-items: center; gap: 4px;
  background: #ef4444; color: #fff; border: 2px solid #0b0b10;
  border-radius: 999px; padding: 3px 10px 3px 8px;
  font-size: 17px; font-weight: 800; line-height: 1;
  transform-origin: 50% 0;
  animation: feedBellRing 3.2s ease-in-out infinite;
  pointer-events: none;
}
.feed-bell svg { width: 18px; height: 18px; display: block; }
.feed-bell-n { display: block; }
@keyframes feedBellRing {
  0%, 82%, 100% { transform: rotate(0); }
  86% { transform: rotate(9deg); }
  90% { transform: rotate(-7deg); }
  94% { transform: rotate(4deg); }
  97% { transform: rotate(-2deg); }
}
.feed-dot {
  position: absolute; top: -7px; left: -21px;
  width: 21px; height: 21px; border-radius: 50%;
  background: #ef4444; border: 1.5px solid #0b0b10; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transform-origin: 50% 0;
  animation: feedBellRing 3.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.feed-dot svg { width: 14px; height: 14px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .feed-bell, .feed-dot { animation: none; }
}
/* точка на пункте сайдбара v2 — прижата к иконке (у пункта свой паддинг слева) */
.dv2-nav-item .feed-dot { left: -10px; }
/* красный бейдж «колокольчик + число новых» справа от пункта «Лента» сайдбара v2 (владелец 07-19) */
.dv2-feed-navbadge { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; background: #ef4444; color: #fff; border-radius: 999px; padding: 2px 8px 2px 6px; font-size: 11.5px; font-weight: 800; line-height: 1.4; transform-origin: 50% 50%; animation: feedBellRing 3.2s ease-in-out infinite; }
.dv2-feed-navbadge svg { width: 12px; height: 12px; display: block; }
.dv2-feed-navbadge b { font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .dv2-feed-navbadge { animation: none; } }

/* DESIGN V2 (17): кнопка «Лента (песни пользователей)» на главной — порт hero-feed ВК */
@media (min-width: 901px) {
  body.design-v2 .dv2-cta-feed { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 12px; border: 1px solid var(--dv2-line, #575469); background: var(--dv2-chip-bg, #15151d); color: #e8e8ef; text-decoration: none; box-shadow: var(--dv2-card-glow, 0 0 18px rgba(255,145,75,.14)); }
  body.design-v2 .dv2-cta-feed:hover { border-color: #6f6c85; }
  body.design-v2 .dv2-cta-feed-text { display: flex; flex-direction: column; line-height: 1.2; }
  body.design-v2 .dv2-cta-feed-text b { font-size: 14.5px; font-weight: 600; }
  body.design-v2 .dv2-cta-feed-text i { font-style: normal; font-size: 11.5px; color: #9a9aa8; }
}

/* ── Плашка «N неопубликованных» на мобиле/v1 — копия ВК .gen-banner--pub ── */
.web-pub-feedbanner { margin: 0 0 14px; border: 1px solid rgba(255, 138, 61, 0.5); border-radius: 16px; background: rgba(255, 138, 61, 0.08); padding: 12px 14px; overflow: hidden; }
.web-pub-feedhead { display: flex; align-items: center; gap: 9px; }
.web-pub-feeddot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ff8a3d; box-shadow: 0 0 14px rgba(255, 138, 61, 0.5); }
.web-pub-feedtitle { flex: 1; min-width: 0; color: #f8fafc; font-size: 14px; font-weight: 900; }
.web-pub-feedactions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.web-pub-feedbtn { flex: 1 1 150px; min-height: 34px; padding: 0 12px; border: none; border-radius: 10px; background: #f59e0b; color: #141006; font-size: 12px; font-weight: 950; cursor: pointer; }
.web-pub-feedbtn:disabled { opacity: .6; cursor: default; }

/* Крупное число в попапе «Ваши песни ждут слушателей» (копия reward-блока ВК) */
.web-pub-count { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 2px 0 6px; }
.web-pub-count span { font-size: 13.5px; color: var(--muted); }
.web-pub-count b { font-size: 44px; line-height: 1; font-weight: 900; color: #ff8a3d; }

/* ── PNG-иконки владельца через CSS-mask (порт .mico из ВК-мини-аппа, 07-17) ── */
.mico { display: inline-block; flex: 0 0 auto; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; vertical-align: middle; }
.bottom-icon .mico, #music-menu .mico { display: block; }
.poems-drawer-nav .mico { margin-top: 1px; }

/* ── Мини-плеер = плеер приложения (ВК .mp-btn/.mp-play/.mp-seek дословно, 07-17) ──
   Кнопки 40px полупрозрачные БЕЗ рамок; кольцо на play — ТОЛЬКО при воспроизведении
   (сплошной оранжевый круг владелец забраковал 07-14). Полоса: 4px, оранжевая, головка 14px. */
.mini-player-action,
.mini-player-close {
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); color: #fff;
}
.mini-player-close:hover { color: #fff; border: none; background: rgba(255, 255, 255, 0.16); }
.mini-player-action.active { border: none; color: #f59e0b; background: rgba(255, 255, 255, 0.1); }
.mini-player-toggle {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: #fff;
  box-shadow: none; border: none;
}
.mini-player-toggle:hover { background: rgba(255, 255, 255, 0.18); }
.mini-player-toggle.playing {
  background: rgba(255, 138, 61, 0.16);
  border: 1.4px solid #ff8a3d;
  box-shadow: 0 0 8px rgba(255, 138, 61, 0.52);
  color: #fff;
}
.mini-player-toggle svg { color: inherit; }
#mini-player-seek {
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #ff8a3d var(--progress, 0%), #2a2a3a var(--progress, 0%));
  outline: none; accent-color: #ff8a3d;
}
#mini-player-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: #ff8a3d; border: none; cursor: pointer;
}
#mini-player-seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #ff8a3d; border: none; }
#mini-player-seek::-moz-range-track { height: 4px; border-radius: 2px; background: #2a2a3a; }
#mini-player-seek::-moz-range-progress { height: 4px; border-radius: 2px; background: #ff8a3d; }

/* ── Модалка «О треке» (порт ВК track-info) ── */
.track-info-headline { margin: 0 0 14px; font-size: 15px; font-weight: 800; color: var(--text); }
.track-info-block { margin: 0 0 12px; }
.track-info-block--sep { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 12px; margin-top: 12px; }
.track-info-label { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.track-info-value { font-size: 14.5px; font-weight: 600; color: var(--text); }
.track-info-secondary { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.track-info-ok { width: 100%; margin-top: 6px; }

/* DESIGN V2 (19): плеер-бар = кнопки/полоса приложения (запрос владельца 07-17) */
@media (min-width: 901px) {
  body.design-v2 .dv2-pl-controls button { color: #cfcfda; }
  body.design-v2 .dv2-pl-controls button:hover { color: #fff; }
  body.design-v2 .dv2-pl-controls button.on { color: #ff8a3d; }
  body.design-v2 .dv2-pl-play { background: rgba(255, 255, 255, 0.12) !important; color: #fff !important; }
  body.design-v2 .dv2-pl-play:hover { background: rgba(255, 255, 255, 0.2) !important; transform: scale(1.05); }
  body.design-v2 .dv2-pl-play.playing {
    background: rgba(255, 138, 61, 0.16) !important;
    color: #fff !important;
    border: 1.4px solid #ff8a3d;
    box-shadow: 0 0 10px rgba(255, 138, 61, 0.52);
  }
  body.design-v2 .dv2-pl-like.on { color: #ff8a3d; }
  body.design-v2 .dv2-pl-timeline input[type="range"] {
    height: 4px;
    background: linear-gradient(90deg, #ff8a3d var(--progress, 0%), #2a2a3a var(--progress, 0%));
  }
  body.design-v2 .dv2-pl-timeline input[type="range"]::-webkit-slider-thumb { width: 14px; height: 14px; background: #ff8a3d; opacity: 1; }
  body.design-v2 .dv2-pl-timeline input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #ff8a3d; border: none; }
  body.design-v2 .dv2-eq i { background: #ff8a3d; }
  body.design-v2 #dv2-volume { accent-color: #ff8a3d; }
  body.design-v2 #dv2-volume::-webkit-slider-thumb { background: #ff8a3d; }
}

/* ── Модалка полного стиха (десктоп v2, решение владельца 07-17) ── */
.web-poem-meta { margin: -4px 0 12px; font-size: 13px; color: var(--muted); }
/* Ридер стиха: ФИКСИРОВАННАЯ высота (владелец 07-19) — длинный текст скроллится внутри,
   модалка не растёт за экран и не «дышит» при переключении RU/EN. */
.web-poem-text { height: 56vh; overflow-y: auto; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: rgba(255, 255, 255, 0.03); font-family: "Spectral", Georgia, serif; font-size: 16px; line-height: 1.75; color: #e6e6ec; scrollbar-width: thin; scrollbar-color: #2e2e3a transparent; }
.web-poem-text::-webkit-scrollbar { width: 10px; }
.web-poem-text::-webkit-scrollbar-track { background: transparent; }
.web-poem-text::-webkit-scrollbar-thumb { background: #2e2e3a; border-radius: 5px; min-height: 56px; }
.web-poem-text::-webkit-scrollbar-thumb:hover { background: rgba(124, 108, 245, 0.6); }
.web-poem-text .pcard-full-note { margin-top: 12px; font-family: "Onest", system-ui, sans-serif; font-size: 12px; color: var(--muted); }