/* =====================================================================
   MUSIGRAM — общая дизайн-система (тёмная/светлая темы через CSS-переменные)
   ===================================================================== */

* { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--color-gold-soft); }
html { color-scheme: dark; scroll-behavior:smooth; }
html[data-theme="light"] { color-scheme: light; }
body { font-feature-settings: "ss01"; background: var(--color-canvas); color: var(--color-ink); }
button:not(:disabled), [role="button"]:not([aria-disabled="true"]){ cursor:pointer; }
button:disabled{ cursor:not-allowed; }

/* --------------------------------------------------------------------
   ТОКЕНЫ ТЕМ
   -------------------------------------------------------------------- */
:root, [data-theme="dark"] {
  --color-canvas: #0B0D0F;
  --color-surface: #111417;
  --color-surface-2: #1D2227;
  --color-surface-3: #262B31;
  --color-ink: #F2EFE8;
  --color-ink-2: #BBB8B0;
  --color-ink-3: #858883;
  --color-ink-rgb: 242,239,232;
  --color-gold: #D3AA66;
  --color-gold-text: #D3AA66;
  --color-gold-strong: #DFBA78;
  --color-gold-hover: #DFBA78;
  --color-gold-pressed: #BE8F49;
  --color-gold-rgb: 211,170,102;
  --color-on-gold: #17120A;
  --color-cover-bg: #0D1013;
  --color-gold-soft: rgba(var(--color-gold-rgb),.09);
  --color-danger: #E5484D;
  --color-danger-rgb: 229,72,77;
  --color-mint: #6FCF97;
  --color-mint-rgb: 111,207,151;

  --border-hairline: rgba(255,255,255,.08);
  --border-hairline-strong: rgba(255,255,255,.16);
  --veil-soft: rgba(255,255,255,.04);
  --veil-medium: rgba(255,255,255,.08);
  --veil-gold: rgba(var(--color-gold-rgb),.11);
  --veil-black-soft: rgba(0,0,0,.2);
  --veil-black-medium: rgba(0,0,0,.32);
  --overlay-scrim: rgba(6,7,9,.72);

  --shadow-card: 0 24px 60px -24px rgba(0,0,0,.6);
  --shadow-gold-soft: 0 12px 32px -12px rgba(var(--color-gold-rgb),.28);
  --noise-opacity: .045;
}

[data-theme="light"] {
  --color-canvas: #F4EFE6;
  --color-surface: #FFFCF7;
  --color-surface-2: #ECE3D5;
  --color-surface-3: #E2D5C2;
  --color-ink: #241C13;
  --color-ink-2: #51483B;
  --color-ink-3: #71685B;
  --color-ink-rgb: 36,28,19;
  --color-gold: #C28A3A;
  --color-gold-text: #92591F;
  --color-gold-strong: #92591F;
  --color-gold-hover: #B6792C;
  --color-gold-pressed: #9C6122;
  --color-gold-rgb: 194,138,58;
  --color-on-gold: #211507;
  --color-cover-bg: #E8DDCA;
  --color-gold-soft: rgba(var(--color-gold-rgb),.14);
  --color-danger: #C8363B;
  --color-danger-rgb: 200,54,59;
  --color-mint: #2F9E63;
  --color-mint-rgb: 47,158,99;

  --border-hairline: rgba(var(--color-ink-rgb),.14);
  --border-hairline-strong: rgba(var(--color-ink-rgb),.23);
  --veil-soft: rgba(var(--color-ink-rgb),.045);
  --veil-medium: rgba(var(--color-ink-rgb),.075);
  --veil-gold: rgba(var(--color-gold-rgb),.13);
  --veil-black-soft: rgba(var(--color-ink-rgb),.07);
  --veil-black-medium: rgba(var(--color-ink-rgb),.11);
  --overlay-scrim: rgba(20,17,10,.5);

  --shadow-card: 0 24px 56px -30px rgba(var(--color-ink-rgb),.26);
  --shadow-gold-soft: 0 14px 34px -16px rgba(var(--color-gold-rgb),.34);
  --noise-opacity: .018;
}

/* ---- Плавный переход при смене темы: покрываем все элементы одним и тем же
   набором цветовых свойств, чтобы ничего не «дёргалось» вразнобой ---- */
*, *::before, *::after {
  transition-property: background-color, border-color, color, box-shadow, fill, stroke;
  transition-duration: .25s;
  transition-timing-function: ease;
}

/* --------------------------------------------------------------------
   ФОН / ТЕКСТУРА
   -------------------------------------------------------------------- */
.noise{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:var(--noise-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] body{
  background-image:
    radial-gradient(circle at 12% -8%, rgba(var(--color-gold-rgb),.11), transparent 34rem),
    linear-gradient(180deg, color-mix(in srgb, var(--color-canvas) 88%, var(--color-surface-2)), var(--color-canvas) 30rem);
  background-attachment:fixed;
}
:focus-visible{ outline:2px solid rgba(var(--color-gold-rgb),.7); outline-offset:2px; border-radius:8px; }
textarea{ scrollbar-width:thin; scrollbar-color:var(--border-hairline-strong) transparent; }
textarea::-webkit-scrollbar{ width:6px; }
textarea::-webkit-scrollbar-thumb{ background:var(--border-hairline-strong); border-radius:99px; }

.kicker{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--color-gold-text); }
.text-gold{ color:var(--color-gold-text) !important; }
h1, h2, h3{ text-wrap:balance; }
p, li{ text-wrap:pretty; }
.hairline{ border-color:var(--border-hairline); }
.hairline-strong{ border-color:var(--border-hairline-strong); }
.bg-veil-soft{ background-color:var(--veil-soft); }
.bg-veil-medium{ background-color:var(--veil-medium); }

/* --------------------------------------------------------------------
   ШАПКА / НАВИГАЦИЯ
   -------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  padding-top:env(safe-area-inset-top);
  background:color-mix(in srgb, var(--color-canvas) 82%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-hairline);
}
.logo-dot{ color:var(--color-gold-text); }
/* Знак «точка в кольце» — тот же мотив, что и в центре генеративных обложек
   (см. MUSIGRAM.drawArtwork в app.js), только вынесенный в логотип: одна фирменная
   деталь вместо отдельной случайной иконки. */
.site-logo{ display:inline-flex; align-items:center; gap:8px; }
.site-logo-mark{ width:22px; height:22px; flex:none; transition:transform .25s cubic-bezier(.2,.8,.2,1); }
a.site-logo:hover .site-logo-mark{ transform:scale(1.1) rotate(8deg); }
.nav-link{ font-size:14px; font-weight:600; color:var(--color-ink-2); transition:color .2s; padding:8px 2px; }
.nav-link:hover{ color:var(--color-ink); }
.nav-link.is-active{ color:var(--color-ink); }
.balance-chip{ display:inline-flex; align-items:center; gap:8px; border-radius:999px; border:1px solid var(--border-hairline);
  background:var(--color-surface); padding:8px 14px 8px 12px; transition:all .2s; }
.balance-chip:hover{ border-color:var(--border-hairline-strong); }
.balance-chip.balance-pulse{ animation:balancePulse .55s cubic-bezier(.2,.8,.2,1); }
@keyframes balancePulse{
  40%{ border-color:rgba(var(--color-gold-rgb),.7); background:var(--color-gold-soft); box-shadow:0 0 0 5px var(--color-gold-soft); }
}
.avatar-btn{ width:38px; height:38px; border-radius:999px; background:var(--color-surface-2); border:1px solid var(--border-hairline);
  display:grid; place-items:center; font-size:13px; font-weight:700; color:var(--color-ink-2); transition:all .2s; }
.avatar-btn:hover{ border-color:var(--border-hairline-strong); color:var(--color-ink); }

.account-menu{ position:absolute; top:calc(100% + 10px); right:0; z-index:20; width:236px; padding:8px;
  background:var(--color-surface); border:1px solid var(--border-hairline); border-radius:16px; box-shadow:var(--shadow-card); }
.account-menu-contact{ padding:8px 10px 10px; font-size:12px; color:var(--color-ink-3); border-bottom:1px solid var(--border-hairline); margin-bottom:6px; word-break:break-all; }
.account-menu-item{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:9px 10px; border-radius:10px;
  font-size:13.5px; font-weight:600; color:var(--color-ink); transition:background-color .15s; }
.account-menu-item:hover{ background:var(--veil-soft); }
.account-menu-item-danger{ color:var(--color-danger); }
.account-menu-item-danger:hover{ background:rgba(var(--color-danger-rgb),.1); }

.theme-toggle{ position:relative; width:44px; height:44px; border-radius:999px; border:1px solid var(--border-hairline);
  background:var(--color-surface); display:grid; place-items:center; color:var(--color-ink-2); transition:all .2s; flex:none; }
.theme-toggle:hover{ border-color:var(--border-hairline-strong); color:var(--color-gold); }
.theme-toggle .i-sun{ display:none; }
.theme-toggle .i-moon{ display:block; }
[data-theme="light"] .theme-toggle .i-sun{ display:block; }
[data-theme="light"] .theme-toggle .i-moon{ display:none; }

.mobile-menu{ position:fixed; inset:0; z-index:70; display:none; }
.mobile-menu.open{ display:block; }
.mobile-menu .scrim{ position:absolute; inset:0; background:var(--overlay-scrim); }
.mobile-menu .panel{ position:absolute; top:0; right:0; bottom:0; width:min(84vw,340px); background:var(--color-surface);
  border-left:1px solid var(--border-hairline); padding:20px; display:flex; flex-direction:column; gap:4px;
  animation:slideInR .3s cubic-bezier(.2,.8,.2,1); }
@keyframes slideInR{ from{ transform:translateX(24px); opacity:0;} to{ transform:none; opacity:1;} }
.mobile-menu .m-link{ padding:14px 6px; font-size:16px; font-weight:700; color:var(--color-ink); border-bottom:1px solid var(--border-hairline); }

/* --------------------------------------------------------------------
   КНОПКИ
   -------------------------------------------------------------------- */
.btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px;
  border-radius:14px; background:var(--color-gold); color:var(--color-on-gold); font-weight:700; font-size:15px; transition:all .2s;
  box-shadow:0 10px 26px -12px rgba(var(--color-gold-rgb),.5); white-space:nowrap; }
.btn-primary:hover{ background:var(--color-gold-hover); transform:translateY(-1px); box-shadow:0 14px 30px -12px rgba(var(--color-gold-rgb),.55); }
.btn-primary:active{ background:var(--color-gold-pressed); transform:scale(.98); }
.btn-primary:disabled{ opacity:.6; pointer-events:none; transform:none; }
.btn-primary.btn-lg{ padding:16px 30px; font-size:16px; border-radius:16px; }

.btn-ghost{ display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:14px;
  border:1px solid var(--border-hairline); color:var(--color-ink-2); font-weight:600; font-size:14px; transition:all .2s; background:transparent; }
.btn-ghost:hover{ color:var(--color-ink); background:var(--veil-soft); border-color:var(--border-hairline-strong); }
.btn-ghost:active{ transform:scale(.97); }
.btn-ghost:disabled{ opacity:.5; pointer-events:none; }

.btn-ghost-s{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:12px;
  border:1px solid var(--border-hairline); font-size:13.5px; font-weight:600; color:var(--color-ink);
  background:transparent; transition:all .2s; }
.btn-ghost-s:hover{ background:var(--veil-soft); border-color:var(--border-hairline-strong); }
.btn-ghost-s:active{ transform:scale(.97); }
.btn-ghost-s:disabled{ opacity:.75; pointer-events:none; }

.btn-danger-s{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:10px;
  border:1px solid rgba(var(--color-danger-rgb),.35); font-size:13px; font-weight:600; color:var(--color-danger); background:transparent; transition:all .2s; }
.btn-danger-s:hover{ background:rgba(var(--color-danger-rgb),.1); }

.btn-spinner{ width:15px; height:15px; border-radius:50%; flex:none;
  border:2px solid rgba(var(--color-ink-rgb),.15); border-top-color:var(--color-gold); animation:spin .7s linear infinite; }
.btn-primary .btn-spinner{ border-color:rgba(var(--color-ink-rgb),.25); border-top-color:var(--color-on-gold); }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* --------------------------------------------------------------------
   КАРТОЧКИ / ПОВЕРХНОСТИ
   -------------------------------------------------------------------- */
.card{ border-radius:24px; border:1px solid var(--border-hairline); background:var(--color-surface); box-shadow:var(--shadow-card); }
.card-soft{ border-radius:18px; border:1px solid var(--border-hairline); background:var(--color-surface-2); }
[data-theme="light"] .card{ box-shadow:var(--shadow-card), inset 0 1px 0 color-mix(in srgb, var(--color-surface) 72%, transparent); }
[data-theme="light"] .card-soft{ background:color-mix(in srgb, var(--color-surface-2) 84%, var(--color-surface)); }
.card-hover{ transition:all .25s cubic-bezier(.2,.7,.3,1); }
.card-hover:hover{ transform:translateY(-3px); border-color:var(--border-hairline-strong); box-shadow:var(--shadow-card); }

.section-tint{
  border-block:1px solid var(--border-hairline);
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--color-gold-rgb),.1), transparent 25rem),
    color-mix(in srgb, var(--color-surface-2) 54%, transparent);
}
.reviews-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.review-card{
  min-width:0; min-height:238px; display:flex; flex-direction:column; padding:22px;
  border-radius:22px; border:1px solid var(--border-hairline);
  background:color-mix(in srgb, var(--color-surface) 92%, var(--color-gold-soft));
  box-shadow:0 18px 42px -34px rgba(var(--color-ink-rgb),.42);
}
.review-stars{ display:flex; align-items:center; gap:2px; color:var(--color-gold-text); }
.review-stars svg{ width:15px; height:15px; fill:currentColor; }
.review-quote{ margin-top:17px; color:var(--color-ink-2); font-size:14px; line-height:1.65; }
.review-person{ margin-top:auto; padding-top:20px; display:flex; align-items:center; gap:11px; }
.review-avatar{
  flex:none; width:38px; height:38px; border-radius:13px; display:grid; place-items:center;
  color:var(--color-gold-text); background:var(--color-gold-soft); border:1px solid rgba(var(--color-gold-rgb),.22);
  font-family:'Unbounded',sans-serif; font-size:12px; font-weight:700;
}
.prototype-note{
  display:flex; align-items:flex-start; justify-content:center; gap:7px; margin-top:18px;
  color:var(--color-ink-3); font-size:11.5px; line-height:1.55; text-align:left;
}
.prototype-note svg{ flex:none; width:14px; height:14px; margin-top:2px; }
.review-card.is-verified{ border-color:rgba(var(--color-mint-rgb),.28); }
.review-verified{ display:inline-flex; align-items:center; gap:5px; margin-top:8px; color:var(--color-mint); font-size:11px; font-weight:700; }
.review-verified svg{ width:13px; height:13px; }
.reviews-page-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.review-filter{ display:inline-flex; align-items:center; gap:6px; min-height:42px; padding:9px 14px; border-radius:999px;
  border:1px solid var(--border-hairline); color:var(--color-ink-2); font-size:13px; font-weight:700; transition:all .2s; }
.review-filter:hover{ color:var(--color-ink); border-color:var(--border-hairline-strong); }
.review-filter.active{ color:var(--color-on-gold); border-color:var(--color-gold); background:var(--color-gold); }
.star-picker{ display:flex; align-items:center; gap:4px; }
.star-choice{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:var(--color-ink-3);
  border:1px solid var(--border-hairline); background:var(--veil-soft); transition:all .18s; }
.star-choice svg{ width:21px; height:21px; }
.star-choice:hover, .star-choice.is-on{ color:var(--color-gold-text); border-color:rgba(var(--color-gold-rgb),.45); background:var(--color-gold-soft); }
.star-choice.is-on svg{ fill:currentColor; }
@media(max-width:1023px){ .reviews-page-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:1023px){ .reviews-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:639px){
  .reviews-grid{ grid-template-columns:1fr; gap:10px; }
  .reviews-page-grid{ grid-template-columns:1fr; gap:10px; }
  .review-card{ min-height:0; padding:19px; }
  .review-quote{ margin-top:13px; }
}

.badge{ display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--color-gold-text); border:1px solid rgba(var(--color-gold-rgb),.35);
  border-radius:999px; padding:5px 11px; }
[data-theme="light"] .badge{ border-color:rgba(var(--color-gold-rgb),.46); }
.badge-mint{ color:var(--color-mint); border-color:rgba(var(--color-mint-rgb),.35); }
.badge-solid{ background:var(--color-gold); color:var(--color-on-gold); border-color:transparent; }

.tag-chip{ display:inline-flex; align-items:center; font-size:12.5px; font-weight:600; color:var(--color-ink-2);
  background:var(--color-surface-2); border:1px solid var(--border-hairline); border-radius:999px; padding:5px 12px; }

/* --------------------------------------------------------------------
   ПОЛЯ ВВОДА
   -------------------------------------------------------------------- */
.field{ width:100%; padding:12px 16px; border-radius:14px; border:1px solid var(--border-hairline);
  background:var(--veil-soft); font-size:15px; color:var(--color-ink); outline:none; transition:all .2s; }
.field::placeholder{ color:var(--color-ink-3); opacity:.8; }
.field:focus{ border-color:rgba(var(--color-gold-rgb),.5); background:var(--color-surface-2); }
.field-error{ border-color:rgba(var(--color-danger-rgb),.6) !important; animation:shake .32s; }
.field-error-message{ margin-top:7px; color:var(--color-danger); font-size:12.5px; line-height:1.45; }
@keyframes shake{ 0%,100%{ transform:translateX(0);} 25%{ transform:translateX(-5px);} 75%{ transform:translateX(5px);} }

/* --------------------------------------------------------------------
   ТУМБЛЕР
   -------------------------------------------------------------------- */
.switch{ flex:none; width:46px; height:26px; border-radius:999px; background:var(--veil-medium);
  position:relative; transition:background-color .25s, border-color .25s; border:1px solid var(--border-hairline); }
.switch .knob{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:var(--color-ink-2); transition:all .25s cubic-bezier(.2,.9,.3,1.2); }
.switch.on{ background:var(--color-gold); border-color:var(--color-gold); }
.switch.on .knob{ transform:translateX(20px); background:var(--color-on-gold); }

/* --------------------------------------------------------------------
   ПЛЕЕР / ТРЕК-КАРТОЧКИ
   -------------------------------------------------------------------- */
.cover-wrap{ position:relative; border-radius:16px; overflow:hidden; background:var(--color-cover-bg); aspect-ratio:1/1; }
.cover-wrap canvas{ position:absolute; inset:0; width:100%; height:100%; }
.play-btn{ width:46px; height:46px; border-radius:999px; background:var(--color-gold); color:var(--color-on-gold); display:grid;
  place-items:center; flex:none; transition:all .2s; box-shadow:0 8px 22px -8px rgba(var(--color-gold-rgb),.55); }
.play-btn:hover{ background:var(--color-gold-hover); transform:scale(1.05); }
.play-btn:active{ transform:scale(.96); }
.play-btn.is-playing .i-play{ display:none; }
.play-btn:not(.is-playing) .i-pause{ display:none; }
.play-btn.sm{ width:44px; height:44px; }

.progress-track{ position:relative; height:5px; border-radius:99px; background:var(--veil-medium); overflow:hidden; cursor:pointer; }
.progress-fill{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--color-gold); border-radius:99px; }
.progress-lock{ position:absolute; inset:0 0 0 auto; width:0%; background:repeating-linear-gradient(135deg, var(--veil-black-medium) 0 6px, transparent 6px 12px); }
.fake-player .progress-track{ overflow:visible; touch-action:manipulation; }
.fake-player .progress-track::after{ content:""; position:absolute; inset:-20px 0; }

.track-card{ border-radius:20px; border:1px solid var(--border-hairline); background:var(--color-surface); padding:16px;
  transition:all .25s cubic-bezier(.2,.7,.3,1); }
.track-card:hover{ border-color:var(--border-hairline-strong); box-shadow:var(--shadow-card); transform:translateY(-2px); }

/* --------------------------------------------------------------------
   КОРЗИНА (переиспользуется в «Мои треки» и в истории диалогов create.html)
   -------------------------------------------------------------------- */
.trash-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:14px;
  border:1px solid var(--border-hairline); background:var(--color-surface-2); flex-wrap:wrap; }
.trash-item-title{ font-size:13.5px; font-weight:700; color:var(--color-ink); overflow:hidden; text-overflow:ellipsis; }
.trash-item-meta{ font-size:11.5px; color:var(--color-ink-3); margin-top:2px; }
.trash-item-actions{ flex:none; display:flex; gap:8px; }

.version-tab{ font-family:'JetBrains Mono',monospace; font-size:11px; padding:6px 11px; border-radius:8px; color:var(--color-ink-3);
  border:1px solid transparent; transition:all .2s; }
.version-tab.active{ color:var(--color-gold); background:var(--color-gold-soft); border-color:rgba(var(--color-gold-rgb),.3); }

.wave-bar{ width:2px; height:20px; border-radius:2px; background:rgba(var(--color-gold-rgb),.55); transform-origin:bottom; transform:scaleY(.15); }

/* --------------------------------------------------------------------
   МОДАЛКИ
   -------------------------------------------------------------------- */
.modal-root{ position:fixed; inset:0; z-index:80; display:none; }
.modal-root.open{ display:flex; overflow-y:auto; padding:24px 16px; }
.modal-root .scrim{ position:fixed; inset:0; background:var(--overlay-scrim); backdrop-filter:blur(3px); animation:fadeIn .2s ease; }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
.modal-panel{ position:relative; z-index:1; flex:none; margin:auto; width:min(92vw,540px);
  background:var(--color-surface); border:1px solid var(--border-hairline); border-radius:24px; box-shadow:var(--shadow-card);
  animation:modalIn .28s cubic-bezier(.2,.85,.25,1); }
.modal-panel.modal-wide{ width:min(94vw,880px); }
@keyframes modalIn{ from{ opacity:0; transform:translateY(18px) scale(.98);} to{ opacity:1; transform:none;} }
.modal-close{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:var(--color-ink-3);
  border:1px solid transparent; transition:all .2s; }
.modal-close:hover{ color:var(--color-ink); background:var(--veil-soft); border-color:var(--border-hairline); }

/* --------------------------------------------------------------------
   ПАКЕТЫ БАЛАНСА
   -------------------------------------------------------------------- */
.pack-card{ position:relative; text-align:left; border-radius:18px; border:1.5px solid var(--border-hairline); background:var(--color-surface-2);
  padding:16px 18px; transition:all .2s; cursor:pointer; }
.pack-card:hover{ border-color:rgba(var(--color-gold-rgb),.45); }
.pack-card.selected{ border-color:var(--color-gold); background:var(--color-gold-soft); box-shadow:var(--shadow-gold-soft); }
.pack-card .pack-badge{ position:absolute; top:-10px; right:14px; }

.pay-tab{ flex:1; text-align:center; padding:10px 8px; border-radius:10px; font-size:13.5px; font-weight:700; color:var(--color-ink-3); transition:all .2s; }
.pay-tab.active{ color:var(--color-ink); background:var(--color-surface); box-shadow:0 2px 8px rgba(0,0,0,.12); }

/* --------------------------------------------------------------------
   ТОСТЫ
   -------------------------------------------------------------------- */
.toast{ display:flex; align-items:center; gap:10px; background:var(--color-surface-3); border:1px solid var(--border-hairline-strong);
  color:var(--color-ink); font-size:13.5px; font-weight:600; padding:12px 18px; border-radius:14px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.45); max-width:min(92vw,480px);
  animation:toastIn .35s cubic-bezier(.2,.9,.3,1.2); }
.toast svg{ width:16px; height:16px; color:var(--color-gold); flex:none; }
.toast-out{ opacity:0; transform:translateY(8px); transition:all .3s; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) scale(.96);} to{ opacity:1; transform:none;} }

/* --------------------------------------------------------------------
   ЭКВАЛАЙЗЕР / АНИМАЦИИ ОБЩЕГО НАЗНАЧЕНИЯ
   -------------------------------------------------------------------- */
.eq{ overflow:hidden; }
.eq span{ width:4px; border-radius:99px; background:var(--color-gold); animation:eq 1s ease-in-out infinite alternate; }
@keyframes eq{ from{ height:22%; opacity:.5; } to{ height:100%; opacity:1; } }

.pulse-gold{ animation:pulseGold .8s ease; display:inline-block; }
@keyframes pulseGold{ 30%{ transform:scale(1.2); color:var(--color-gold-hover); } }

@keyframes pop{ from{ transform:scale(0);} to{ transform:scale(1);} }

.enter-up{ animation:enterUp .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes enterUp{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; } }
.enter-from-right{ animation:enterR .46s cubic-bezier(.22,.85,.25,1) both; }
.enter-from-left { animation:enterL .46s cubic-bezier(.22,.85,.25,1) both; }
@keyframes enterR{ from{ opacity:0; transform:translateX(56px);} to{ opacity:1; transform:none;} }
@keyframes enterL{ from{ opacity:0; transform:translateX(-56px);} to{ opacity:1; transform:none;} }
.exit-to-left { animation:exitL .21s ease-in both; }
.exit-to-right{ animation:exitR .21s ease-in both; }
@keyframes exitL{ to{ opacity:0; transform:translateX(-36px);} }
@keyframes exitR{ to{ opacity:0; transform:translateX(36px);} }
.art-in{ animation:artIn .6s cubic-bezier(.2,.8,.2,1); }
@keyframes artIn{ from{ opacity:0; transform:scale(1.06);} to{ opacity:1; transform:scale(1);} }

/* --------------------------------------------------------------------
   ФУТЕР
   -------------------------------------------------------------------- */
.site-footer{ border-top:1px solid var(--border-hairline); background:var(--color-surface); }
.footer-link{ color:var(--color-ink-3); font-size:13.5px; transition:color .2s; }
.footer-link:hover{ color:var(--color-ink); }
.pay-icon{ display:inline-flex; align-items:center; justify-content:center; height:26px; padding:0 9px; border-radius:6px;
  border:1px solid var(--border-hairline); font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.03em; color:var(--color-ink-3); }

/* --------------------------------------------------------------------
   FAQ / АККОРДЕОН
   -------------------------------------------------------------------- */
.faq-item{ border-bottom:1px solid var(--border-hairline); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 2px; text-align:left; font-weight:700; font-size:15.5px; color:var(--color-ink); }
.faq-q .chev{ flex:none; transition:transform .25s, color .25s; color:var(--color-ink-3); }
.faq-item.open .faq-q .chev{ transform:rotate(180deg); color:var(--color-gold); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a-inner{ padding:0 2px 20px; color:var(--color-ink-2); font-size:14.5px; line-height:1.65; max-width:68ch; }

/* --------------------------------------------------------------------
   ПРОЧЕЕ
   -------------------------------------------------------------------- */
.step{ display:none; }
.step.active{ display:block; }
.mini-icon{ flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--veil-medium); color:var(--color-ink-3); }
.divider-v{ width:1px; align-self:stretch; background:var(--border-hairline); }
.skeleton{ background:linear-gradient(90deg, var(--veil-soft) 25%, var(--veil-medium) 37%, var(--veil-soft) 63%); background-size:400% 100%; animation:skel 1.4s ease infinite; }
@keyframes skel{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

@media (max-width:767px){
  .hide-mobile{ display:none !important; }
  input.field:not(.text-lg), textarea.field, .composer-input{ font-size:16px !important; }
  .btn-ghost-s{ min-height:44px; }
}
@media (min-width:768px){
  .hide-desktop{ display:none !important; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}