/* ============================================================================
   POVOD · Страница-сюрприз: тематическое оформление и витрина.

   Устройство. Разметка страницы-сюрприза ОДНА для всех оформлений (см.
   surprise-themes.js): фото → заголовок → подзаголовок → таймер/винил → плеер →
   текст песни → подпись → футер. Тема не подменяет DOM, а переопределяет набор
   CSS-переменных на корневом элементе `.sp-page`. Поэтому новое оформление —
   это один блок переменных плюс, при желании, декоративный слой; отдельная
   HTML-страница под каждую тему не нужна.

   Состояний у каждой темы два — `.is-locked` (подарок ещё закрыт) и
   `.is-revealed` (открыт). Это те же переменные и та же структура, меняется
   только состав видимых блоков и насыщенность фона.

   Версионирование. Селектор темы содержит ВЕРСИЮ: `.sp-t-<id>-v<version>`.
   Блок версии неизменяем — редизайн оформления делается ДОБАВЛЕНИЕМ блока
   `.sp-t-<id>-v2`, а не правкой `-v1`. Поэтому уже подаренные страницы, у
   которых в БД сохранена version=1, продолжают рисоваться прежним блоком и не
   меняются. Правка существующего `-v1` = визуальное изменение чужого подарка.

   Фирменная виниловая пластинка остаётся из основного index.html: здесь она
   лишь перекрашивается под тему через локальные --grad135/--bg/--sp-vinyl-*.
   ========================================================================= */

/* --- общие переменные (значения по умолчанию = классический стиль POVOD) --- */
.sp-page{
  --sp-bg:linear-gradient(180deg,#EFEAE0,#E6E0D2);
  --sp-decor-1:rgba(233,128,116,.20);
  --sp-decor-2:rgba(216,195,165,.34);
  --sp-ink:#2D2A26;
  --sp-ink-soft:#655F57;
  --sp-accent:#E85A4F;
  --sp-accent-2:#E98074;
  /* Акцент для МЕЛКОГО текста. Фирменный --sp-accent остаётся для плашек,
     градиентов и этикетки винила, где контраст текста ни при чём; для надписей
     11–15px нужен более тёмный вариант, иначе не набирается WCAG AA. */
  --sp-accent-text:#B23A31;
  --sp-on-accent:#fff;
  --sp-surface:rgba(252,251,246,.86);
  --sp-surface-2:#fff;
  --sp-border:rgba(141,141,138,.26);
  --sp-shadow:0 18px 44px rgba(120,90,60,.16);
  --sp-vinyl-a:#2D2A26;
  --sp-vinyl-b:#3a3630;
  --sp-hole:#EFEAE0;            /* «дырка» пластинки = непрозрачный фон темы */
  --sp-overlay:linear-gradient(180deg,rgba(20,16,12,.12) 0%,rgba(20,16,12,.58) 100%);
  --sp-radius:24px;
  --sp-display:'Inter',sans-serif;
  --sp-script:'Caveat',cursive;
  --sp-letter:-.5px;
  --sp-frame:none;

  position:relative;
  max-width:720px;
  margin:0 auto;
  padding:34px 20px 54px;
  border-radius:var(--sp-radius);
  background:var(--sp-bg);
  color:var(--sp-ink);
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
/* Локальные подмены глобальных переменных: винил и «дырка» пластинки красятся
   темой, а не фирменным коралловым градиентом главной страницы. */
.sp-page{ --grad135:linear-gradient(135deg,var(--sp-accent-2),var(--sp-accent)); }
.sp-page .vinyl{background:repeating-radial-gradient(circle at center,var(--sp-vinyl-a) 0 2px,var(--sp-vinyl-b) 2px 4px)}
.sp-page .vinyl .hole{background:var(--sp-hole)}
.sp-page .vinyl-wrap{width:min(268px,72vw);height:min(268px,72vw);margin:6px auto 22px}

/* --- декоративный слой темы (только CSS, без внешних картинок) ------------- */
.sp-decor{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sp-decor::before,.sp-decor::after{content:"";position:absolute;border-radius:50%;filter:blur(60px)}
.sp-decor::before{width:320px;height:320px;background:var(--sp-decor-1);top:-110px;left:-90px}
.sp-decor::after{width:280px;height:280px;background:var(--sp-decor-2);bottom:-120px;right:-80px}
.sp-shell{position:relative;z-index:1}

/* --- семантические блоки --------------------------------------------------- */
.sp-eyebrow{display:inline-block;font-size:11.5px;letter-spacing:2.4px;text-transform:uppercase;font-weight:700;
  color:var(--sp-accent-text);background:color-mix(in srgb,var(--sp-accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--sp-accent) 30%,transparent);border-radius:99px;padding:7px 16px;margin-bottom:14px}
.sp-heading{font-family:var(--sp-display);font-weight:900;font-size:clamp(26px,5.2vw,40px);line-height:1.1;
  letter-spacing:var(--sp-letter);color:var(--sp-ink);margin:0}
.sp-subtitle{color:var(--sp-ink-soft);font-size:15.5px;line-height:1.6;max-width:460px;margin:10px auto 0}
.sp-name{display:block;font-family:var(--sp-script);font-size:clamp(30px,6vw,44px);font-weight:700;
  color:var(--sp-accent-text);line-height:1.1;margin-bottom:4px}

.sp-meta{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:16px auto 0}
.sp-meta span{font-size:12.5px;font-weight:600;color:var(--sp-ink-soft);background:var(--sp-surface);
  border:1px solid var(--sp-border);border-radius:99px;padding:7px 14px}

/* Главное фото. Читаемость текста поверх любой фотографии обеспечивает
   тематический overlay, а не надежда на «удачный» снимок пользователя. */
.sp-photo{position:relative;margin:0 auto 22px;width:100%;max-width:520px;aspect-ratio:4/3;
  border-radius:var(--sp-radius);overflow:hidden;box-shadow:var(--sp-shadow);border:var(--sp-frame,none);background:var(--sp-surface)}
.sp-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:var(--sp-photo-pos,50% 50%)}
.sp-photo::after{content:"";position:absolute;inset:0;background:var(--sp-overlay);pointer-events:none}
.sp-photo .sp-photo-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px;
  color:#fff;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.sp-photo .sp-photo-cap .sp-name{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}

/* Закрытый подарок: конверт/коробка средствами CSS. */
.sp-locked-art{position:relative;width:min(232px,62vw);height:min(160px,44vw);margin:6px auto 22px}
.sp-locked-art .sp-env{position:absolute;inset:0;border-radius:14px;background:var(--sp-surface-2);
  border:1px solid var(--sp-border);box-shadow:var(--sp-shadow);overflow:hidden}
.sp-locked-art .sp-env::before{content:"";position:absolute;left:0;right:0;top:0;height:62%;
  background:linear-gradient(135deg,var(--sp-accent-2),var(--sp-accent));opacity:.92;
  clip-path:polygon(0 0,100% 0,50% 100%)}
.sp-locked-art .sp-seal{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--sp-accent-2),var(--sp-accent));
  color:var(--sp-on-accent);display:flex;align-items:center;justify-content:center;font-size:22px;
  box-shadow:0 10px 24px rgba(0,0,0,.22);border:2px solid rgba(255,255,255,.5)}
.sp-locked-art .sp-ribbon{position:absolute;left:50%;top:0;bottom:0;width:14px;transform:translateX(-50%);
  background:linear-gradient(180deg,var(--sp-accent-2),var(--sp-accent));opacity:.55}

.sp-countdown{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:22px auto 0}
.sp-countdown div{background:var(--sp-surface);border:1px solid var(--sp-border);border-radius:16px;
  padding:11px 0;width:72px;box-shadow:var(--sp-shadow)}
.sp-countdown .sp-num{font-family:var(--sp-display);font-size:23px;font-weight:800;color:var(--sp-accent-text);
  font-variant-numeric:tabular-nums}
.sp-countdown .sp-lbl{font-size:11px;color:var(--sp-ink-soft);margin-top:3px}
.sp-when{margin-top:14px;font-size:13.5px;color:var(--sp-ink-soft)}

.sp-lyrics{max-width:480px;margin:24px auto 0;text-align:left;background:var(--sp-surface-2);
  border:1px solid var(--sp-border);border-radius:18px;padding:22px 26px;box-shadow:var(--sp-shadow)}
.sp-lyrics .sp-lyrics-h{font-size:11.5px;letter-spacing:2px;text-transform:uppercase;font-weight:700;
  color:var(--sp-accent-text);margin-bottom:12px;text-align:center}
.sp-lyrics .sp-lyrics-b{font-size:15px;line-height:1.95;color:var(--sp-ink);white-space:pre-line;text-align:center}

.sp-signature{margin:24px auto 0;max-width:460px;background:var(--sp-surface);border:1px solid var(--sp-border);
  border-radius:18px;padding:20px 24px;font-style:italic;color:var(--sp-ink);line-height:1.6;
  box-shadow:var(--sp-shadow);white-space:pre-line}
.sp-signature .sp-from{display:block;margin-top:10px;font-style:normal;font-weight:700;color:var(--sp-accent-text);font-size:14px}

.sp-foot{margin-top:34px;color:var(--sp-ink-soft);font-size:12.5px;opacity:.85}
.sp-outro{margin:26px auto 0;max-width:460px;padding:20px;border-radius:18px;background:var(--sp-surface);
  border:1px dashed var(--sp-border)}
.sp-outro p{font-size:14.5px;color:var(--sp-ink-soft);margin-bottom:12px;line-height:1.5}

/* Плеер внутри страницы-сюрприза наследует тему. */
.sp-page .player{background:var(--sp-surface);border-color:var(--sp-border);box-shadow:var(--sp-shadow);
  max-width:480px;margin:22px auto 0}
.sp-page .pl-info .t1,.sp-page .pl-time,.sp-page .pl-state{color:var(--sp-ink)}
.sp-page .pl-time,.sp-page .pl-state{color:var(--sp-ink-soft)}
.sp-page .pl-wave.bg i{background:color-mix(in srgb,var(--sp-ink) 26%,transparent)}
.sp-page .pl-fill .pl-wave.fg i{background:var(--sp-accent)}
.sp-page .pl-knob{background:var(--sp-accent)}
.sp-page .ghost{color:var(--sp-accent-text);background:var(--sp-surface-2);border-color:var(--sp-border)}
.sp-page .cta{background:linear-gradient(90deg,var(--sp-accent-2),var(--sp-accent));color:var(--sp-on-accent)}

.sp-page .sp-back{position:absolute;left:14px;top:14px;z-index:3}

/* ===========================================================================
   ТЕМЫ
   ======================================================================== */

/* День рождения — тёплый коралл, праздничный свет. */
.sp-t-birthday_warm-v1{
  --sp-bg:linear-gradient(180deg,#FDF3E7,#F7E3D2);
  --sp-decor-1:rgba(232,90,79,.24);--sp-decor-2:rgba(255,196,120,.36);
  --sp-accent:#E85A4F;--sp-accent-2:#F0906C;--sp-accent-text:#B03A30;
  --sp-ink:#3A2A24;--sp-ink-soft:#6f5a4d;
  --sp-surface:rgba(255,252,247,.9);--sp-surface-2:#FFFDF9;
  --sp-border:rgba(232,90,79,.22);
  --sp-vinyl-a:#31241F;--sp-vinyl-b:#40302A;
  --sp-overlay:linear-gradient(180deg,rgba(58,42,36,.08) 0%,rgba(58,42,36,.58) 100%);
  --sp-hole:#FDF3E7;
}
/* Конфетти — чистый CSS, без внешних ассетов. */
.sp-t-birthday_warm-v1 .sp-decor{
  background-image:
    radial-gradient(circle,rgba(232,90,79,.5) 2.5px,transparent 3px),
    radial-gradient(circle,rgba(255,180,110,.5) 2px,transparent 2.5px);
  background-size:112px 132px,88px 104px;
  background-position:0 0,44px 52px;
  opacity:.55;
}

/* Свадьба — айвори и шампань, тонкая рамка. */
.sp-t-wedding_ivory-v1{
  --sp-bg:linear-gradient(180deg,#FCFAF5,#F3EDE0);
  --sp-decor-1:rgba(201,162,39,.16);--sp-decor-2:rgba(224,210,186,.5);
  --sp-accent:#B08D32;--sp-accent-2:#D9BE72;--sp-accent-text:#7E6115;
  --sp-ink:#3B3529;--sp-ink-soft:#6b6353;
  --sp-surface:rgba(255,253,248,.92);--sp-surface-2:#FFFEFA;
  --sp-border:rgba(176,141,50,.3);
  --sp-vinyl-a:#3A3428;--sp-vinyl-b:#4A4233;
  --sp-overlay:linear-gradient(180deg,rgba(59,53,41,.06) 0%,rgba(59,53,41,.5) 100%);
  --sp-frame:1px solid rgba(176,141,50,.42);
  --sp-letter:-.2px;
  --sp-hole:#FCFAF5;
}
.sp-t-wedding_ivory-v1 .sp-shell{padding:10px}
.sp-t-wedding_ivory-v1 .sp-decor{border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(176,141,50,.34),inset 0 0 0 9px rgba(255,255,255,.5),inset 0 0 0 10px rgba(176,141,50,.18)}
.sp-t-wedding_ivory-v1 .sp-heading{font-weight:700;letter-spacing:.4px}

/* Любимому человеку — розовое золото и бордо. */
.sp-t-love_rose-v1{
  --sp-bg:linear-gradient(180deg,#FDF0EF,#F6DCDC);
  --sp-decor-1:rgba(176,48,82,.22);--sp-decor-2:rgba(240,170,170,.42);
  --sp-accent:#B03052;--sp-accent-2:#DE7A8C;--sp-accent-text:#A32A4A;
  --sp-ink:#3A2028;--sp-ink-soft:#74545e;
  --sp-surface:rgba(255,250,250,.9);--sp-surface-2:#FFFCFC;
  --sp-border:rgba(176,48,82,.22);
  --sp-vinyl-a:#2C1A20;--sp-vinyl-b:#3C242C;
  --sp-overlay:linear-gradient(180deg,rgba(58,32,40,.1) 0%,rgba(58,32,40,.6) 100%);
  --sp-hole:#FDF0EF;
}
.sp-t-love_rose-v1 .sp-decor::before{border-radius:0;filter:blur(40px)}

/* Юбилей — глубокий тёмный фон и золото. */
.sp-t-anniversary_gold-v1{
  --sp-bg:radial-gradient(120% 90% at 50% 0%,#332C24 0%,#1E1A16 70%);
  --sp-decor-1:rgba(212,175,90,.22);--sp-decor-2:rgba(212,175,90,.12);
  --sp-accent:#D4AF5A;--sp-accent-2:#F0D391;--sp-accent-text:#DCBB6E;
  --sp-on-accent:#2A2114;
  --sp-ink:#F5EDDC;--sp-ink-soft:#bdae94;
  --sp-surface:rgba(255,255,255,.07);--sp-surface-2:rgba(255,255,255,.1);
  --sp-border:rgba(212,175,90,.34);
  --sp-shadow:0 18px 44px rgba(0,0,0,.44);
  --sp-vinyl-a:#15120E;--sp-vinyl-b:#241E16;
  --sp-overlay:linear-gradient(180deg,rgba(12,10,8,.2) 0%,rgba(12,10,8,.7) 100%);
  --sp-frame:1px solid rgba(212,175,90,.4);
  --sp-hole:#241F1A;
}
.sp-t-anniversary_gold-v1 .sp-decor{
  background-image:linear-gradient(90deg,transparent 49.6%,rgba(212,175,90,.25) 50%,transparent 50.4%);
  background-size:180px 100%;opacity:.5}
.sp-t-anniversary_gold-v1 .sp-lyrics,
.sp-t-anniversary_gold-v1 .sp-signature{backdrop-filter:blur(6px)}

/* Маме и близким — тёплая бумага, домашний свет. */
.sp-t-family_warm-v1{
  --sp-bg:linear-gradient(180deg,#FBF5EA,#F1E6D3);
  --sp-decor-1:rgba(194,112,61,.16);--sp-decor-2:rgba(226,201,163,.5);
  --sp-accent:#C2703D;--sp-accent-2:#E0A06A;--sp-accent-text:#8F5122;
  --sp-ink:#3B3128;--sp-ink-soft:#6c5e50;
  --sp-surface:rgba(255,252,246,.92);--sp-surface-2:#FFFCF6;
  --sp-border:rgba(194,112,61,.24);
  --sp-vinyl-a:#33291F;--sp-vinyl-b:#42362A;
  --sp-overlay:linear-gradient(180deg,rgba(59,49,40,.08) 0%,rgba(59,49,40,.55) 100%);
  --sp-hole:#FBF5EA;
}
/* Фактура бумаги: мягкая штриховка вместо фотографии-текстуры. */
.sp-t-family_warm-v1 .sp-decor{
  background-image:repeating-linear-gradient(45deg,rgba(194,112,61,.06) 0 2px,transparent 2px 7px);
  opacity:.9}
.sp-t-family_warm-v1 .sp-photo{border-radius:10px;padding:10px 10px 34px;background:#fff}
.sp-t-family_warm-v1 .sp-photo img{border-radius:4px}

/* Защитнику — хаки, графит, латунь. Стилизация, а не военная атрибутика:
   без погон, знаков различия и конкретных званий. */
.sp-t-defender_khaki-v1{
  --sp-bg:linear-gradient(180deg,#333629,#24261F);
  --sp-decor-1:rgba(184,147,74,.16);--sp-decor-2:rgba(120,130,98,.24);
  --sp-accent:#C9A44F;--sp-accent-2:#E3C57E;--sp-accent-text:#D2AF62;
  --sp-on-accent:#241F14;
  --sp-ink:#EFEBDD;--sp-ink-soft:#b3b199;
  --sp-surface:rgba(255,255,255,.07);--sp-surface-2:rgba(255,255,255,.1);
  --sp-border:rgba(201,164,79,.34);
  --sp-shadow:0 18px 44px rgba(0,0,0,.42);
  --sp-vinyl-a:#14160F;--sp-vinyl-b:#22251A;
  --sp-overlay:linear-gradient(180deg,rgba(12,14,9,.18) 0%,rgba(12,14,9,.68) 100%);
  --sp-frame:1px solid rgba(201,164,79,.38);
  --sp-letter:.2px;
  --sp-hole:#2B2E25;
}
/* Тканевая фактура + тонкие латунные линии и угловые акценты. */
.sp-t-defender_khaki-v1 .sp-decor{
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.05) 0 1px,transparent 1px 4px);
}
.sp-t-defender_khaki-v1 .sp-shell::before,
.sp-t-defender_khaki-v1 .sp-shell::after{content:"";position:absolute;width:52px;height:52px;pointer-events:none;opacity:.75}
.sp-t-defender_khaki-v1 .sp-shell::before{top:-10px;left:-6px;border-top:2px solid var(--sp-accent);border-left:2px solid var(--sp-accent);
  clip-path:polygon(0 0,100% 0,0 100%)}
.sp-t-defender_khaki-v1 .sp-shell::after{bottom:-10px;right:-6px;border-bottom:2px solid var(--sp-accent);border-right:2px solid var(--sp-accent);
  clip-path:polygon(100% 0,100% 100%,0 100%)}
.sp-t-defender_khaki-v1 .sp-eyebrow{letter-spacing:3px}
.sp-t-defender_khaki-v1 .sp-locked-art .sp-seal{border-color:rgba(201,164,79,.7)}

/* Классическое оформление (совместимость со страницами, созданными до тем):
   повторяет прежний кремовый вид POVOD. */
.sp-t-classic_v1-v1{
  --sp-bg:linear-gradient(180deg,#EFEAE0,#E7E1D3);
  --sp-accent:#E85A4F;--sp-accent-2:#E98074;--sp-accent-text:#B23A31;
  --sp-ink:#2D2A26;
  --sp-hole:#EFEAE0;
}

/* --- состояния ------------------------------------------------------------- */
.sp-page.is-locked .sp-heading{font-size:clamp(23px,4.4vw,33px)}
.sp-page.is-revealed{animation:sp-reveal .7s ease}
@keyframes sp-reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* --- публичная страница: убираем «магазин» вокруг подарка ------------------ */
body.sp-public{padding-top:0}
body.sp-public .site-header,
body.sp-public .support-fab,
body.sp-public .support-pop,
body.sp-public #gift .site-foot,
body.sp-public #gift footer.proto{display:none !important}
body.sp-public #gift .wrap{padding:0 12px}
body.sp-public #gift .gift{padding:18px 0 40px}

/* ===========================================================================
   ВИТРИНА (переход «Страница-сюрприз» с главной)
   ======================================================================== */
.spx{text-align:left;max-width:1060px;margin:0 auto}
.spx-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:38px;align-items:center;padding:26px 0 12px}
.spx-hero h1{font-family:'Inter',sans-serif;font-weight:900;font-size:clamp(30px,4.6vw,50px);line-height:1.06;letter-spacing:-1.2px}
.spx-hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.spx-lead{margin-top:18px;font-size:16.5px;line-height:1.6;color:var(--muted);max-width:480px}
.spx-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.spx-note{margin-top:14px;font-size:13px;color:var(--muted);max-width:440px}
.spx-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--red);border:1px solid var(--line);background:rgba(232,90,79,.06);
  border-radius:99px;padding:8px 16px;margin-bottom:18px}

/* Макет телефона с настоящей структурой страницы-сюрприза. */
.spx-phone{position:relative;width:min(310px,86vw);margin:0 auto;padding:12px;border-radius:38px;
  background:linear-gradient(160deg,#3a332c,#221d18);box-shadow:0 30px 70px rgba(60,42,26,.34)}
.spx-phone::before{content:"";position:absolute;left:50%;top:20px;transform:translateX(-50%);width:74px;height:5px;
  border-radius:99px;background:rgba(255,255,255,.22);z-index:3}
.spx-screen{border-radius:28px;overflow:hidden;height:560px;overflow-y:auto;scrollbar-width:none;background:#fff}
.spx-screen::-webkit-scrollbar{display:none}
.spx-screen .sp-page{max-width:none;border-radius:0;padding:38px 16px 26px;min-height:100%}
.spx-screen .sp-page .vinyl-wrap{width:150px;height:150px;margin:2px auto 14px}
.spx-screen .sp-heading{font-size:22px}
.spx-screen .sp-name{font-size:26px}
.spx-screen .sp-subtitle{font-size:12.5px;margin-top:7px}
.spx-screen .sp-countdown div{width:52px;padding:8px 0}
.spx-screen .sp-countdown .sp-num{font-size:17px}
.spx-screen .sp-countdown .sp-lbl{font-size:9.5px}
.spx-screen .sp-photo{max-width:none;aspect-ratio:5/4;margin-bottom:14px}
.spx-screen .sp-signature{font-size:12.5px;padding:13px 15px;margin-top:14px}
.spx-screen .sp-eyebrow{font-size:9.5px;padding:5px 11px;margin-bottom:10px}
.spx-screen .sp-foot{font-size:10.5px;margin-top:18px}
.spx-screen .sp-locked-art{width:150px;height:104px;margin-bottom:14px}
.spx-demo-player{display:flex;align-items:center;gap:11px;margin:14px auto 0;max-width:260px;padding:11px 13px;
  border-radius:16px;background:var(--sp-surface);border:1px solid var(--sp-border);box-shadow:var(--sp-shadow)}
.spx-demo-player .spx-play{width:38px;height:38px;min-width:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--sp-accent-2),var(--sp-accent));color:var(--sp-on-accent);
  display:flex;align-items:center;justify-content:center;font-size:13px}
.spx-demo-player .spx-bars{flex:1;display:flex;align-items:flex-end;gap:2px;height:24px}
.spx-demo-player .spx-bars i{flex:1;border-radius:2px;background:var(--sp-accent);opacity:.55}
.spx-demo-player .spx-dur{font-size:11px;color:var(--sp-ink-soft);font-variant-numeric:tabular-nums}
.spx-caption{margin-top:12px;text-align:center;font-size:12px;color:var(--muted)}

/* Каталог оформлений. */
.spx-sec{margin-top:64px;scroll-margin-top:92px}
.spx-sec-label{font-size:12.5px;letter-spacing:3px;text-transform:uppercase;color:var(--red);font-weight:700;text-align:center}
.spx-sec h2{text-align:center;font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(24px,3.4vw,36px);
  letter-spacing:-.5px;margin:8px 0 6px}
.spx-sec-sub{text-align:center;color:var(--muted);font-size:15px;max-width:560px;margin:0 auto 26px;line-height:1.55}
.spx-catalog{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:30px;align-items:start}
.spx-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.spx-card{position:relative;display:block;width:100%;text-align:left;cursor:pointer;padding:0;overflow:hidden;
  border-radius:20px;border:1.5px solid var(--line);background:var(--card);box-shadow:var(--shadow-sm);
  transition:transform .2s,box-shadow .2s,border-color .2s;font:inherit;color:inherit}
.spx-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.spx-card[aria-selected="true"]{border-color:var(--red);box-shadow:0 0 0 3px rgba(232,90,79,.18),var(--shadow)}
.spx-card:focus-visible{outline:3px solid rgba(232,90,79,.6);outline-offset:2px}
.spx-swatch{height:92px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.spx-swatch .spx-disc{width:52px;height:52px;border-radius:50%;
  background:repeating-radial-gradient(circle at center,rgba(0,0,0,.72) 0 2px,rgba(0,0,0,.55) 2px 4px);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(0,0,0,.28)}
.spx-swatch .spx-disc i{width:18px;height:18px;border-radius:50%;display:block}
.spx-card-body{padding:13px 15px 15px}
.spx-card-title{font-weight:800;font-size:15.5px;color:var(--ink)}
.spx-card-sub{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.45}
.spx-preview-col{position:sticky;top:92px}
.spx-states{display:inline-flex;gap:4px;background:rgba(216,195,165,.3);border-radius:12px;padding:4px;margin:0 auto 14px;
  width:auto}
.spx-states button{border:none;background:transparent;font:inherit;font-weight:700;font-size:13px;color:var(--muted);
  padding:8px 16px;border-radius:9px;cursor:pointer;transition:.2s}
.spx-states button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.spx-states-wrap{text-align:center}

.spx-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.spx-step{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px 20px;box-shadow:var(--shadow-sm)}
.spx-step .spx-n{width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.spx-step h4{font-size:16.5px;font-weight:800;margin-bottom:6px}
.spx-step p{font-size:13.5px;color:var(--muted);line-height:1.55}

.spx-final{margin:64px auto 0;text-align:center;background:var(--card);border:1px solid var(--line);
  border-radius:24px;padding:34px 26px;box-shadow:var(--shadow-sm)}
.spx-final h2{font-size:clamp(22px,3vw,32px);font-weight:900;letter-spacing:-.5px}
.spx-final p{color:var(--muted);font-size:15px;max-width:520px;margin:10px auto 20px;line-height:1.6}

@media(max-width:900px){
  .spx-hero{grid-template-columns:1fr;gap:26px;text-align:center}
  .spx-lead,.spx-note{margin-left:auto;margin-right:auto}
  .spx-actions{justify-content:center}
  .spx-catalog{grid-template-columns:1fr;gap:20px}
  .spx-preview-col{position:static;order:-1}
  /* На узком экране карточки листаются свайпом со scroll-snap. */
  .spx-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:4px 2px 12px;margin:0 -12px;scroll-padding-left:12px;-webkit-overflow-scrolling:touch}
  .spx-strip::before,.spx-strip::after{content:"";flex:0 0 10px}
  .spx-card{flex:0 0 min(232px,72vw);scroll-snap-align:center}
}
@media(max-width:560px){
  .spx-hero{padding-top:10px}
  .spx-sec{margin-top:46px}
  .spx-actions .cta,.spx-actions .ghost{width:100%;justify-content:center}
}

/* ===========================================================================
   Редактор владельца: выбор темы, фото и кадра
   ======================================================================== */
/* Глобальное правило index.html `input,textarea{width:100%;padding:13px 15px}`
   написано для текстовых полей, но применяется и к radio/file. В списке песен
   переключатель из-за него занимал всю строку (280px на 390px экрана), плееру
   не оставалось места, и карточка уезжала за край с горизонтальной прокруткой.
   Возвращаем этим двум полям их естественные размеры. */
.sp-pick label > input[type="radio"]{width:18px;height:18px;min-width:18px;flex:none;
  margin:13px 0 0;padding:0;accent-color:var(--red)}
.spe-file{position:absolute;width:1px;height:1px;padding:0;border:0;margin:0;
  opacity:0;pointer-events:none;overflow:hidden}
.spe-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin-top:8px}
.spe-theme{cursor:pointer;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
  padding:0;font:inherit;color:inherit;text-align:left;transition:.18s}
.spe-theme[aria-pressed="true"]{border-color:var(--red);box-shadow:0 0 0 2px rgba(232,90,79,.16)}
.spe-theme:focus-visible{outline:3px solid rgba(232,90,79,.55);outline-offset:2px}
.spe-theme .spe-sw{height:44px}
.spe-theme .spe-name{padding:8px 10px;font-size:12.5px;font-weight:700}
.spe-hint{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.45}
.spe-reco{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:8px}
.spe-photo-row{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-top:8px}
.spe-photo-box{position:relative;width:186px;height:140px;border-radius:14px;overflow:hidden;flex:none;
  border:1px dashed var(--line);background:rgba(255,255,255,.6);display:flex;align-items:center;
  justify-content:center;color:var(--muted);font-size:12.5px;text-align:center;padding:10px}
.spe-photo-box img{width:100%;height:100%;object-fit:cover;object-position:var(--spe-pos,50% 50%)}
.spe-photo-actions{display:flex;flex-direction:column;gap:8px;flex:1;min-width:190px}
.spe-photo-actions .ghost.sm{justify-content:center}
.spe-crop{margin-top:10px;display:none}
.spe-crop.on{display:block}
.spe-crop label{font-size:12.5px;font-weight:600;margin:8px 0 3px;display:block}
.spe-crop input[type=range]{width:100%;accent-color:var(--red)}
.spe-live{margin-top:10px}
.spe-live .spx-phone{width:230px;padding:9px;border-radius:28px}
.spe-live .spx-screen{height:390px;border-radius:20px}
.spe-busy{font-size:13px;color:var(--muted);margin-top:6px}

/* --- уважение к настройкам движения --------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .sp-page.is-revealed{animation:none}
  .sp-page .vinyl{animation:none !important}
  .spx-card:hover{transform:none}
  .sp-page *{transition:none !important}
}