/* Координаты взяты из фреймов Figma (1440px). top — от верха фрейма,
   left внутри .content — от x=273 макета; glow/фоны — от левого края окна. */

.hdr-crumb { top: 65px; left: 0; }
.hdr-title { top: 93px; left: 0; }
.footer-line { top: var(--fl); }
.footer-copy, .footer-legal, .footer-rights { top: calc(var(--fl) + 38px); }

/* ================= Overview ================= */
[data-view="overview"] { --h: 1613px; --fl: 1492px; }
.ov-glow { left: calc(var(--fx) - 43.5px); top: -1384.5px; }

.hero {
  top: 144px;
  left: 0;
  right: 0;
  height: 433px;
  border-radius: 22px;
  border: 0.5px solid rgba(215, 158, 255, 0.25); /* общая обводка hero + плашки статистики: полупрозрачная, едва видна */
  background: #fff padding-box; /* padding-box: белый фон не просвечивает сквозь полупрозрачную обводку */
  overflow: hidden;
}
.hero__bg { position: absolute; left: -3.33%; top: -273.5px; width: 105.77%; height: 831px; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(16, 19, 24, 0) 11.623%, rgba(8, 9, 12, 0.5) 84.869%); /* градиент лежит внутри отзеркаленного слоя */ }
.hero .badge { position: absolute; left: 39.5px; top: 39.5px; }
.hero__mark { right: 39.5px; top: 39.5px; width: 99px; height: 53px; }
.hero__mark img { left: -26.7%; top: -28.33%; width: 150.48%; height: 156.66%; }
.hero__title { position: absolute; left: 38px; top: 96.5px; width: 562px; font: 400 32px/normal var(--f-pirulen); letter-spacing: 1.6px; text-transform: uppercase; }
.hero__text { position: absolute; left: 39px; top: 203px; width: 520px; }
.hero .btn--ghost { position: absolute; left: 39.5px; top: 299.5px; }

/* Стеклянная плашка-продолжение hero: верх заходит под hero (под скругления), делится на три ячейки.
   Ячейки по ширине содержимого + одинаковый отступ 32.75px с каждой стороны; разделители — <i> */
.hero { z-index: 1; }
.stats-bar {
  left: 0; right: 0; top: 555px; height: 126px; /* видимая часть 577–681: по 24px над и под цифрами */
  border-radius: 0 0 22px 22px;
  border: 0.5px solid rgba(215, 158, 255, 0.25);
  background: rgba(255, 255, 255, 0.08); /* ярче обычного стекла */
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.25);
  backdrop-filter: blur(24px) saturate(180%) brightness(1.25);
  /* Часть под hero (верхние 22px) скрыта маской целиком: в углах остаётся только то, что снаружи
     его скруглений. Ничто не лежит под hero — при появлении нечему просвечивать */
  -webkit-mask: linear-gradient(#000 0 0) 0 22px / 100% calc(100% - 22px) no-repeat,
                radial-gradient(circle at 100% 0, transparent 21.5px, #000 22px) 0 0 / 22px 22px no-repeat,
                radial-gradient(circle at 0 0, transparent 21.5px, #000 22px) 100% 0 / 22px 22px no-repeat;
  mask: linear-gradient(#000 0 0) 0 22px / 100% calc(100% - 22px) no-repeat,
        radial-gradient(circle at 100% 0, transparent 21.5px, #000 22px) 0 0 / 22px 22px no-repeat,
        radial-gradient(circle at 0 0, transparent 21.5px, #000 22px) 100% 0 / 22px 22px no-repeat;
}
.stats-bar.glass::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.07) 100%); }
/* Hero и плашка статистики появляются как одно целое: одинаково, без filter: blur на входе
   (filter отключает стекло, и плашка «проявлялась» бы только в конце анимации) */
.hero[data-anim], [data-anim-follow] { filter: none; }
.stats-bar i { position: absolute; top: 22px; bottom: 0; width: 0.5px; background: rgba(215, 158, 255, 0.25); }
.stats-bar i:first-child { left: 352.75px; }
.stats-bar i:last-child { left: 721.45px; }
.stat { top: 594px; height: 69px; z-index: 1; }
.stat--1 { left: 25.75px; }
.stat--2 { left: 378.5px; }
.stat--3 { left: 742.2px; }
.stat > * { position: absolute; }
.stat > .stat__lead { position: static; display: contents; } /* обёртка цифры для мобильной раскладки; на десктопе не влияет */
.stat__lead > * { position: absolute; }
/* Сами ячейки без фона и рамки — стекло даёт общая плашка */
.stat.glass { background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.stat.glass::before { display: none; }
.stat__yrs { font: 400 14px/normal var(--f-pirulen); letter-spacing: 0.7px; text-transform: uppercase; color: var(--accent-soft); }
/* В Pirulen нет кириллицы — на русской версии его тексты набраны Unbounded SemiBold */
html[lang="ru"] .hero__title, html[lang="ru"] .stat__yrs { font-family: "Unbounded", var(--f-verano); font-weight: 600; }
html[lang="ru"] .hero__title { font-size: 30px; } /* Unbounded шире Pirulen: при 32px заголовок уходит в 3 строки и наезжает на текст */
.stat__txt { font-size: 14px; letter-spacing: 0.7px; white-space: nowrap; }
.stat__txt b { display: block; font-weight: 900; }
.stat__txt span { display: block; margin-top: 6px; opacity: 0.5; }
.stat--1 .stat__num { left: 7px; top: 7px; }
.stat--1 .stat__yrs { left: 55.16px; top: 46px; }
.stat--1 .stat__txt { left: 108.5px; top: 14px; }
.stat--2 .stat__num { left: 7px; top: 7px; }
.stat--2 .stat__yrs { left: 68px; top: 46px; }
.stat--2 .stat__txt { left: 121.5px; top: 14px; }
.stat--3 .stat__num { left: 12px; top: 8px; }
.stat--3 .stat__pct { left: 96.5px; top: 41.5px; }
.stat--3 .stat__txt { left: 141px; top: 14px; }

.ov-form { top: 782px; }

/* ================= Mixing & Mastering ================= */
[data-view="mixing"] { --h: 3282px; --fl: 3161px; }
.mx-glow-1 { left: calc(var(--fx) - 275px); top: -597px; }
.mx-glow-2 { left: calc(var(--fx) + 392px); top: 944px; }

.mx-head { top: 144px; left: 0; width: 600px; font: 300 48px/normal var(--f-onest); letter-spacing: 2.4px; }
/* Fet визуально мельче Onest — подгоняем по пропорции из формы (Fet 74 / Onest 64) */
.mx-head .t-fet { font-size: 1.3em; letter-spacing: 0.5px; line-height: 0; } /* как на About: строчные Fet ниже, чем у Onest */
.mx-text { top: 298px; left: 0; width: 685px; white-space: pre-wrap; }
.mx-discuss { top: 391px; right: 0; width: 306px; }
.mx-badge { top: 532px; left: 0; }

.price {
  top: 575px;
  width: 427px;
  height: 430px;
  padding: 24px 24px 27px;
  border-radius: 22px;
  background: var(--glass-bg-soft);
  display: flex;
  flex-direction: column;
}
.price--1 { left: 0; }
.price--2 { left: 467px; }
.price__name { font: 900 28px/normal var(--f-verano); letter-spacing: 1.4px; }
.price__sub { margin-top: 10px; opacity: 0.5; }
.price__line { margin-top: 24px; }
.price__list { position: relative; margin-top: 24px; /* было 31: список стал длиннее, освобождаем место над ценой */ padding-left: 28px; list-style: none; }
.price__list li span { opacity: 0.5; }
.price__list .price__more { opacity: 0.3; } /* «…and more» — серая строка без стрелки */
.price--2 .price__list { width: 368px; }
.price__list li { position: relative; }
.price__list li img { position: absolute; left: -28px; top: 6.32px; }
.price__cost { display: flex; align-items: flex-start; gap: 6px; margin-top: auto; }
/* Цены: на EN — SVG из макета ($), на RU — текст в рублях тем же шрифтом, что и остальные Pirulen-тексты RU */
.price__ru { display: none; font: 600 26px/22px "Unbounded", var(--f-verano); letter-spacing: 1px; color: #fff; }
html[lang="ru"] .price__en { display: none; }
html[lang="ru"] .price__ru { display: block; }
.price__cost span { margin-top: 3px; font-size: 16px; letter-spacing: 0.8px; opacity: 0.5; }
.price__foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 26px; }
.price__num { font: 400 28px/normal var(--f-pirulen); letter-spacing: 1.4px; color: var(--accent); opacity: 0.5; }

.mx-custom-text { top: 885px; right: -1.5px; width: 213px; text-align: center; opacity: 0.5; --o: 0.5; white-space: pre-wrap; }
.mx-custom-btn { top: 961px; right: 0; width: 210px; }

/* Work samples — сцена 1127px, центрируется в колонке */
.stage { left: 50%; width: 1127px; transform: translateX(-50%); }
.samples { top: 1151px; height: 530px; }
.samples__title { position: absolute; left: 455px; top: 0; font: 900 28px/normal var(--f-verano); letter-spacing: 1.4px; white-space: nowrap; }
.carousel { position: absolute; inset: 0; }
.slide {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--hh);
  border-radius: 20px;
  overflow: hidden;
  z-index: var(--z);
  transition: left 0.7s var(--ease-out), top 0.7s var(--ease-out), width 0.7s var(--ease-out), height 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out), opacity 0.35s;
}
.slide img { position: absolute; }
.slide img.cover { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(0, 0, 0, var(--dim)); transition: background-color 0.7s var(--ease-out); pointer-events: none; }
.slide.is-main { box-shadow: 0 4px 100px rgba(199, 112, 249, 0.27); cursor: pointer; }
.slide.is-jump { transition: none; opacity: 0; }
.slide__play {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity var(--t-hover);
}
.slide.is-main:hover .slide__play, .slide.is-playing .slide__play { opacity: 1; }
.slide__play i { display: block; width: 0; height: 0; margin-left: 4px; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.slide.is-playing .slide__play i { width: 14px; height: 18px; margin: 0; border: 0; border-left: 4px solid #fff; border-right: 4px solid #fff; }
.carousel__arrow { position: absolute; top: 224px; z-index: 10; border-radius: 50%; }
.carousel__arrow:hover { filter: brightness(1.6); box-shadow: 0 0 24px rgba(199, 112, 249, 0.35); }
.carousel__arrow--prev { left: 249px; }
.carousel__arrow--next { left: 803px; }
.carousel__caption { position: absolute; top: 491px; left: 0; right: 0; height: 34px; font: 900 28px/normal var(--f-verano); letter-spacing: 1.4px; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 32px; }
.carousel__name, .carousel__genre { position: static; }
.carousel__sep { flex: none; margin: 0 -16px; transform: rotate(90deg); } /* 33px линия поворачивается и занимает 1px в ряду */

.how-title { top: 1776px; left: 0; }
.how-sub { top: 1813px; left: 0; white-space: nowrap; opacity: 0.5; --o: 0.5; }
.how { top: 1776px; height: 526px; }
.how > * { position: absolute; }
.step { width: 427px; height: 120px; border-radius: 16px; border: 0.5px solid var(--accent-line); overflow: hidden; }
.step__bg { position: absolute; inset: 0; overflow: hidden; border-radius: 16px; }
.step__bg img { position: absolute; }
.step__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8); }
.step > :not(.step__bg) { position: absolute; }
.step__num { left: 23px; top: 33px; }
.step__tag { left: 23px; top: 70px; font: 900 14px/normal var(--f-verano); letter-spacing: 0.7px; color: var(--accent-soft); white-space: nowrap; }
.step__title { left: 104px; top: 23px; font: 900 14px/normal var(--f-verano); letter-spacing: 0.7px; white-space: nowrap; }
.step__text { left: 104px; top: 46px; width: 285px; opacity: 0.5; }
.step--2 .step__tag, .step--3 .step__tag { top: 71px; }
.step--2 .step__title, .step--2 .step__text, .step--3 .step__title, .step--3 .step__text { left: 124px; }
.step--3 .step__num { left: 24px; }
.step--1 { left: 0; top: 96px; }
.step--1 .step__bg img { left: -4.56%; top: -96.67%; width: 109.11%; height: 270.72%; }
.step--2 { left: 313px; top: 251px; }
.step--2 .step__bg img { left: -4.08%; top: -142.32%; width: 108.24%; height: 268.54%; }
.step--3 { left: 701px; top: 406px; }
.step--3 .step__bg img { left: -7.33%; top: -161.67%; width: 114.66%; height: 284.49%; }
.how-note {
  left: 753px; top: 96px; width: 347px; height: 120px;
  padding: 15px;
  border-radius: 10px;
  background: var(--glass-bg);
  border: 1px solid #434343;
}
.how-note__t { padding-left: 20px; white-space: nowrap; }
.how-note__dot { position: absolute; left: 15px; top: 20px; }
.how-note__d { margin-top: 14px; width: 315px; opacity: 0.5; }
.how-arrow-1 { left: 455px; top: 151px; width: 98.435px; height: 75.367px; }
.how-arrow-1 img { position: absolute; left: 0; top: -0.106px; }
.how-arrow-2 { left: 513.51px; top: 388.57px; width: 115.618px; height: 123.287px; display: grid; place-items: center; }
.how-arrow-2 > div { position: relative; width: 98.435px; height: 75.367px; flex: none; transform: rotate(58.6deg) scaleY(-1); }
.how-arrow-2 img { position: absolute; left: 0; top: -0.106px; }

.mx-form { top: 2451px; }

/* ================= Beat store ================= */
[data-view="beats"] { --h: 2032px; --fl: 1911px; }
.bs-glow-1 { left: calc(var(--fx) - 110px); top: 1020px; }
.bs-glow-2 { left: calc(var(--fx) + 473px); top: 37px; }
.bs-text { top: 130px; left: 0; width: 520px; opacity: 0.5; --o: 0.5; }
.bs-badge { top: 139px; right: 0; }
.bs-player { top: 212px; left: 0; right: 0; height: 924px; border-radius: 22px; background: var(--glass-bg-soft); overflow: hidden; }
.bs-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.bs-form { top: 1201px; }

/* ================= Plugins ================= */
[data-view="plugins"] { --h: max(788px, calc(100vh / var(--zoom))); --fl: calc(var(--h) - 121px); }
.pl-glow-1 { left: calc(var(--fx) + 811px); top: -535px; }
.pl-glow-2 { left: calc(var(--fx) - 300px); top: 191px; }
.center-x { left: 50%; transform: translateX(-50%); }
.pl-icon { top: 253px; margin-left: -0.2px; }
.pl-title { top: 300px; font: 800 36px/normal var(--f-onest); letter-spacing: 1.8px; white-space: nowrap; }
.pl-sub { top: 358px; text-align: center; white-space: nowrap; opacity: 0.5; --o: 0.5; }
.pl-notify { top: 413px; display: flex; flex-wrap: wrap; gap: 16px; }
.pl-notify .consent { flex: 1 0 100%; contain: inline-size; margin-top: -4px; text-align: left; } /* contain: строка согласия не расширяет форму, переносится по её ширине */
.pl-notify .ts-box, .pl-notify .form-error { flex: 1 0 100%; order: 3; contain: inline-size; text-align: left; }
.pl-notify .field__control { width: 235px; height: auto; border: 0.5px solid rgba(255, 255, 255, 0.5); }
.pl-notify .field__control::placeholder { color: rgba(255, 255, 255, 0.5); }
.pl-notify .field__control:hover { border-color: #fff; }
.socials { top: 536px; /* было 490: под формой появилась строка согласия */ width: 109.468px; height: 21px; }
.socials img { position: absolute; inset: 0; transition: filter var(--t-hover); }
.socials a { position: absolute; top: -4px; height: 29px; border-radius: 6px; }
.socials a:hover { background: rgba(255, 255, 255, 0.12); }
.socials a:nth-of-type(1) { left: -4px; width: 26px; }
.socials a:nth-of-type(2) { left: 41px; width: 28px; }
.socials a:nth-of-type(3) { left: 88px; width: 26px; }

/* ================= About / Contacts ================= */
[data-view="about"] { --h: 3043px; --fl: 2923px; } /* +88: две строки контактов (TikTok, BeatStars) */
.ab-hero { left: calc(var(--fx) + 129px); top: -24px; width: 1392px; height: 873.875px; }
.ab-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Края фото мягко уходят в чёрный, чтобы не было обреза на любой ширине */
.ab-hero { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%), linear-gradient(180deg, #000 70%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%), linear-gradient(180deg, #000 70%, transparent 100%); mask-composite: intersect; }
.ab-rect { left: calc(var(--fx) - 34.1px); top: 520px; }
.ab-glow-r { left: calc(var(--fx) + 686px); top: 804px; }
.ab-glow-l { left: calc(var(--fx) - 347px); top: 605px; }
.ab-glow-h { left: calc(var(--fx) + 356px); top: -127px; }
.ab-glow-b { left: calc(var(--fx) + 687px); top: 2105px; }
.ab-c { left: calc(50% + 6.5px); transform: translateX(-50%); }
.ab-brand { top: 174.7px; display: flex; }
.ab-brand .crop { position: relative; width: 71.96px; height: 37.69px; } /* ×2.5 от макета */
.ab-brand .crop img { left: -26.19%; top: -28.33%; width: 147.62%; height: 156.66%; }
.ab-h { font: 300 48px/normal var(--f-onest); letter-spacing: 2.4px; text-align: center; white-space: nowrap; }
/* У Fet строчные буквы ~в 1.5 раза ниже, чем у Onest — увеличиваем, чтобы слова выглядели одного размера */
.ab-h .t-fet { font-size: 1.3em; letter-spacing: 0.5px; line-height: 0.8; }
.ab-h1, .ab-h2 { font-size: 42px; letter-spacing: 2.1px; } /* hero чуть меньше */
.ab-h1 { top: 238px; }
.ab-h2 { top: 300px; }
.ab-lead { top: 391px; width: 681px; text-align: center; }
.ab-notes { left: -82.57px; top: 618.24px; width: 692.147px; height: 577.511px; display: grid; place-items: center; }
.ab-notes .crop { position: relative; width: 681px; height: 564px; transform: rotate(-1.15deg); }
.ab-notes .crop img { left: -0.14%; top: 0; width: 212.22%; height: 107.51%; }
.ab-sq-2 { left: 619px; top: 701px; }
.ab-work { top: 878px; left: 583px; width: 539px; }
.ab-note { font: 400 24px/normal var(--f-fet); letter-spacing: 0.6px; color: var(--accent); }
.ab-work-note { top: 926px; left: 582px; width: 543px; }
.ab-h3 { top: 1263px; text-transform: capitalize; }
.ab-h4 { top: 1324px; text-transform: capitalize; }
/* По-русски заголовки пишутся как предложение, без заглавной в каждом слове */
html[lang="ru"] .ab-h3, html[lang="ru"] .ab-h4, html[lang="ru"] .feedback__t1, html[lang="ru"] .feedback__t2 { text-transform: none; }
.ab-sq-1 { left: 188px; top: 1324px; }
.ab-song { top: 1503px; left: 17px; width: 389px; white-space: pre-wrap; }
.ab-goal { top: 1597px; left: 17px; width: 389px; }
.ab-goal-note { top: 1645px; left: 17px; width: 437px; }
.ab-covers { left: 487px; top: 1447px; width: 635px; height: 310px; }
.ab-covers img { left: -13.7%; top: -15.12%; width: 131.2%; height: 115.28%; }
/* Контакты по центру относительно формы ниже (она стоит от 17px до −6px) */
.ab-contacts-t { top: 1843px; left: 335.5px; font-weight: 900; white-space: nowrap; }
.contacts { top: 1883px; left: 335.5px; width: 452px; display: flex; flex-direction: column; gap: 16px; }
.contact-row { position: relative; display: flex; justify-content: space-between; height: 28px; }
.contact-row span { opacity: 0.5; }
.contact-row a:hover { color: var(--accent); }
.contact-row img { position: absolute; left: 0; top: 27.5px; }
.ab-form { top: 2213px; left: 17px; right: 6px; height: 643px; } /* +40 под галочку согласия */
.ab-form .feedback__crumb { top: 69.6px; } /* позиции текста как при прежней высоте 603 */
.ab-form .feedback__t1 { top: 108.2px; }
.ab-form .feedback__t2 { top: 174.4px; }
.ab-form .feedback__text { top: 291.4px; }

/* ================= Mini player (Work samples) ================= */
.slide.is-playing .slide__play { opacity: 1; }
.player {
  position: fixed;
  z-index: 30;
  bottom: 24px;
  /* по центру контентной колонки, как .content */
  left: calc(var(--sidebar-w) + max(28px, (100% - var(--sidebar-w) - var(--content-max) - 12px) / 2) + min(var(--content-max), 100% - var(--sidebar-w) - 68px) / 2);
  transform: translateX(-50%);
  width: 1000px;
  height: 76px;
  padding: 0 18px 0 14px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 22px;
  border: 0.5px solid var(--accent-line);
  background: rgba(11, 6, 17, 0.72);
  animation: player-in 0.6s var(--ease-out);
}
.player[hidden] { display: none; }
@keyframes player-in { from { opacity: 0; filter: blur(8px); translate: 0 24px; } }
.player__cover { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; flex: none; }
.player__meta { width: 150px; flex: none; display: flex; flex-direction: column; gap: 3px; white-space: nowrap; overflow: hidden; }
.player__meta b { font: 900 14px/normal var(--f-verano); letter-spacing: 0.7px; overflow: hidden; text-overflow: ellipsis; }
.player__meta span { font-size: 12px; letter-spacing: 0.6px; opacity: 0.5; overflow: hidden; text-overflow: ellipsis; }

.player__ctrls { display: flex; align-items: center; gap: 8px; flex: none; }
.player__btn {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid #838383;
  background: rgba(0, 0, 0, 0.09);
  transition: background-color var(--t-hover), border-color var(--t-hover), box-shadow var(--t-hover);
}
.player__btn:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }
.player__btn--main { width: 40px; height: 40px; border: 0; background: var(--accent); }
.player__btn--main:hover { background: #fff; box-shadow: 0 0 24px rgba(199, 112, 249, 0.45); }
.player__btn i { display: block; }
.ic-play { width: 0; height: 0; margin-left: 3px; border-left: 12px solid #000; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.player__btn--main.is-playing .ic-play { width: 11px; height: 13px; margin: 0; border: 0; border-left: 3.5px solid #000; border-right: 3.5px solid #000; }
.player__btn svg { display: block; }

.player__time { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.6px; font-variant-numeric: tabular-nums; }
.player__time span { opacity: 0.5; width: 30px; text-align: center; }
.player__time .range { flex: 1; min-width: 0; }

/* Ползунки: тонкая полоса, заполненная часть — акцентом */
.range { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; cursor: pointer; --p: 0%;
  background: linear-gradient(90deg, var(--accent) var(--p), rgba(255, 255, 255, 0.14) var(--p)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(199, 112, 249, 0.7); transition: transform var(--t-hover); }
.range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(199, 112, 249, 0.7); }
.range:hover::-webkit-slider-thumb { transform: scale(1.25); }
.range:focus-visible { outline: 1px solid var(--accent-border); outline-offset: 4px; }

/* Before / After — слайдер в стиле RU/EN */
.ab { position: relative; flex: none; display: flex; width: 168px; height: 39px; border-radius: 11px; border: 1px solid var(--glass-border); cursor: pointer; }
.ab__thumb { position: absolute; left: 0; top: 0; width: 83px; height: 37px; border-radius: 10px; background: rgba(199, 112, 249, 0.28); border: 1px solid var(--glass-border); translate: 83px 0; transition: translate 0.45s var(--ease-out), background-color var(--t-hover); }
.ab.is-before .ab__thumb { translate: 0 0; }
.ab__opt { position: relative; flex: 1; display: grid; place-items: center; font: 900 12px/normal var(--f-verano); letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.5; transition: opacity var(--t-hover); }
.ab:not(.is-before) .ab__opt:last-of-type, .ab.is-before .ab__opt:first-of-type { opacity: 1; color: var(--accent-soft); }
.ab:hover .ab__thumb { background: rgba(199, 112, 249, 0.42); }

.player__vol { flex: none; display: flex; align-items: center; gap: 8px; width: 120px; }
.player__vol .range { flex: 1; min-width: 0; width: 100%; }
.ic-vol { position: relative; flex: none; width: 6px; height: 8px; background: #fff; opacity: 0.6; margin-right: 6px; }
.ic-vol::after { content: ""; position: absolute; left: 2px; top: -4px; border-right: 8px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.player__close { flex: none; width: 28px; height: 28px; border-radius: 50%; font-size: 20px; line-height: 1; opacity: 0.5; transition: opacity var(--t-hover), background-color var(--t-hover); }
.player__close:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }