/* ==========================================================================
   Nova Records — студия: лендинг, дашборд, статистика, управление релизом
   Подключается после app.css и использует его токены.
   ========================================================================== */

/* ── Общие эффекты ─────────────────────────────────────────────────────── */

[data-spot] { position: relative; isolation: isolate; }
[data-spot]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, -40%), rgba(167, 139, 250, 0.16), transparent 42%);
  opacity: 0; transition: opacity 0.35s;
}
@media (hover: hover) and (pointer: fine) {
  [data-spot]:hover::after { opacity: 1; }
}
.rv { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0ms); }
.rv.is-in { opacity: 1; transform: none; }
[data-magnet] { transition: transform 0.25s var(--ease), box-shadow 0.25s, background 0.25s; }

/* ── Шапка гостя ───────────────────────────────────────────────────────── */

.lp-nav {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 22px;
  padding: calc(14px + var(--safe-t)) clamp(16px, 4vw, 48px) 14px; transition: background 0.35s, border-color 0.35s, padding 0.35s;
  border-bottom: 1px solid transparent;
}
.lp-nav.is-solid {
  background: rgba(8, 6, 15, 0.72); border-color: var(--line);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  padding-top: calc(10px + var(--safe-t)); padding-bottom: 10px;
}
.lp-nav .brand { padding: 0; }
.lp-nav .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
.lp-nav .brand-name { font-size: 16px; }
.lp-nav nav { display: flex; gap: 4px; margin: 0 auto; }
.lp-nav nav a { padding: 8px 14px; border-radius: 11px; color: var(--muted); font-weight: 700; font-size: 14px; transition: color 0.2s, background 0.2s; }
.lp-nav nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.app.is-guest .main { padding-top: calc(86px + var(--safe-t)); }

/* ── Первый экран ──────────────────────────────────────────────────────── */

.login-title { font-size: clamp(38px, 4.6vw, 62px); }
.login-title .br-d { display: inline; }
.rot { display: inline-block; height: 1.02em; overflow: hidden; vertical-align: bottom; }
.rot-track { display: flex; flex-direction: column; animation: rot 13s var(--ease) infinite; }
.rot-track span {
  display: block; height: 1.02em; line-height: 1.02; white-space: nowrap;
  background: var(--grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradMove 6s ease infinite;
}
@keyframes rot {
  0%, 13% { transform: translateY(0); }
  16%, 29% { transform: translateY(-1.02em); }
  32%, 45% { transform: translateY(-2.04em); }
  48%, 61% { transform: translateY(-3.06em); }
  64%, 77% { transform: translateY(-4.08em); }
  80%, 93% { transform: translateY(-5.1em); }
  100% { transform: translateY(-6.12em); }
}
.hero-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; list-style: none; }
.hero-trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: #ddd6ff; }
.hero-trust svg { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: rgba(61, 255, 168, 0.16); color: var(--green); flex: none; }

.login-art { isolation: isolate; }
.float-card {
  position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 16px;
  background: rgba(20, 16, 38, 0.72); border: 1px solid var(--line-2);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.8); animation: floatCard 6s ease-in-out infinite;
}
.float-card b { font: 700 15px/1.2 var(--f-display); }
.float-card small { color: var(--muted); font-size: 12px; font-weight: 600; }
.float-card .pill { align-self: flex-start; height: 22px; font-size: 11px; }
.float-card--a { left: -4%; bottom: 10%; }
.float-card--b { right: 0; top: 4%; animation-delay: -3s; }
.float-card--b b { font-size: 22px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.float-card--b .eq { position: absolute; right: 14px; bottom: 14px; height: 18px; }
@keyframes floatCard { 50% { transform: translateY(-12px); } }

/* ── Секции лендинга ───────────────────────────────────────────────────── */

.lp { max-width: 1150px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.lp-sec { padding: clamp(56px, 9vw, 110px) 0 0; scroll-margin-top: 80px; }
.lp-head { max-width: 760px; margin-bottom: 34px; }
.lp-head h2 { font: 800 clamp(30px, 4.4vw, 54px)/1.03 var(--f-display); letter-spacing: -0.04em; margin: 10px 0 0; }
.lp-head p { margin: 16px 0 0; color: var(--muted); font-size: 17.5px; line-height: 1.55; max-width: 640px; }

.lp-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 40px; border-radius: var(--r-xl); overflow: hidden;
  background: var(--line); border: 1px solid var(--line);
}
.lp-stat { padding: 26px 24px; background: rgba(13, 10, 24, 0.86); display: flex; flex-direction: column; gap: 6px; }
.lp-stat > b { font: 800 clamp(34px, 4vw, 48px)/1 var(--f-display); letter-spacing: -0.04em; background: var(--grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradMove 6s ease infinite; }
.lp-stat > span { font-weight: 800; font-size: 15px; }
.lp-stat p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }

.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; }
.lp-steps::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 47px; height: 2px; z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.5), rgba(255, 79, 216, 0.5), transparent);
}
.lp-step { position: relative; z-index: 1; padding: 24px 22px; border-radius: var(--r-lg); background: rgba(16, 13, 30, 0.82); border: 1px solid var(--line); }
.lp-step-n { position: absolute; right: 18px; top: 16px; font: 800 13px var(--f-display); color: var(--dim); letter-spacing: 0.06em; }
.lp-step-ic {
  width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 18px;
  background: var(--grad); box-shadow: 0 12px 30px -10px rgba(255, 79, 216, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3); color: #fff;
}
.lp-step-ic svg { width: 22px; height: 22px; }
.lp-step b { display: block; font: 700 18px/1.25 var(--f-display); margin-bottom: 8px; }
.lp-step p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }

.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bento-card {
  display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r-lg); min-height: 260px; overflow: hidden;
  background: linear-gradient(180deg, rgba(22, 18, 40, 0.86), rgba(12, 10, 22, 0.86)); border: 1px solid var(--line);
  transition: border-color 0.3s, transform 0.4s var(--ease);
}
.bento-card:hover { border-color: rgba(167, 139, 250, 0.35); }
.bento-card--wide { grid-column: span 2; }
.bento-top { display: flex; align-items: center; gap: 12px; }
.bento-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(124, 92, 255, 0.18); color: #d8ccff; flex: none; box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.3); }
.bento-ic svg { width: 19px; height: 19px; }
.bento-top b { font: 700 18px/1.25 var(--f-display); letter-spacing: -0.01em; }
.bento-card p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; max-width: 520px; }
.bento-art { margin-top: auto; padding-top: 14px; }
.bento-chart { width: 100%; height: 96px; }
.bento-line { stroke-dasharray: 4000; stroke-dashoffset: 4000; }
.is-in .bento-line { animation: draw 2.2s var(--ease) 0.3s forwards; }
.bento-bars { display: flex; flex-direction: column; gap: 9px; }
.bento-bars div { display: grid; grid-template-columns: 82px 1fr 38px; gap: 10px; align-items: center; font-size: 12.5px; font-weight: 700; }
.bento-bars span { color: var(--muted); }
.bento-bars i { display: block; height: 8px; border-radius: 8px; background: var(--grad); width: 0; transition: width 1.4s var(--ease) 0.3s; }
.is-in .bento-bars i { width: var(--w); }
.bento-bars b { text-align: right; font-variant-numeric: tabular-nums; }
.bento-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bento-steps span { font-size: 11.5px; font-weight: 700; color: var(--dim); display: flex; flex-direction: column; gap: 8px; }
.bento-steps i { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); }
.bento-steps .on { color: var(--text); }
.bento-steps .on i { background: var(--grad); box-shadow: 0 0 14px rgba(255, 79, 216, 0.5); }
.bento-steps .now i { animation: pulseBar 1.4s infinite; }
.bento-links { display: flex; flex-wrap: wrap; gap: 6px; }
.bento-links span {
  padding: 7px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 800; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2);
  opacity: 0; transform: translateY(8px) scale(0.9); transition: opacity 0.5s var(--ease), transform 0.6s var(--spring); transition-delay: calc(var(--i) * 90ms + 200ms);
}
.is-in .bento-links span { opacity: 1; transform: none; }
.bento-chat { display: flex; flex-direction: column; gap: 8px; }
.bento-chat p { margin: 0; padding: 9px 13px; border-radius: 14px; font-size: 13px; max-width: 88%; line-height: 1.4; }
.bento-chat .me { align-self: flex-end; background: linear-gradient(120deg, rgba(124, 92, 255, 0.55), rgba(255, 79, 216, 0.4)); border-bottom-right-radius: 4px; }
.bento-chat .op { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-2); border-bottom-left-radius: 4px; color: #e7e2ff; }
.bento-count { display: flex; gap: 8px; }
.bento-count div { flex: 1; padding: 12px 6px; border-radius: 14px; text-align: center; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); }
.bento-count b { display: block; font: 800 26px/1 var(--f-display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bento-count small { color: var(--dim); font-size: 11px; font-weight: 700; }
.bento-pitch { display: flex; flex-wrap: wrap; gap: 8px; }
.bento-pitch span { padding: 9px 14px; border-radius: 99px; font-weight: 800; font-size: 13px; background: rgba(255, 79, 216, 0.1); border: 1px solid rgba(255, 79, 216, 0.3); color: #ffd6f5; }
.bento-diff { display: flex; flex-direction: column; gap: 6px; font: 700 15px var(--f-display); }
.bento-diff s { color: var(--red); opacity: 0.75; text-decoration-thickness: 2px; }
.bento-diff b { color: var(--green); }

.lp-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.lp-price {
  display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--r-lg);
  background: rgba(16, 13, 30, 0.82); border: 1px solid var(--line);
}
.lp-price.is-hot { background: linear-gradient(165deg, rgba(124, 92, 255, 0.3), rgba(18, 14, 36, 0.9) 50%, rgba(255, 79, 216, 0.16)); border-color: transparent; transform: translateY(-8px); }
.lp-price.is-hot.rv:not(.is-in) { transform: translateY(26px); }
.lp-price-flag { position: absolute; right: 18px; top: 18px; padding: 5px 10px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: var(--grad); color: #fff; }
.lp-price .pill { align-self: flex-start; }
.lp-price > b { font: 700 22px/1.2 var(--f-display); margin-top: 6px; }
.lp-price-sum { display: flex; align-items: baseline; gap: 8px; }
.lp-price-sum span { font: 800 clamp(38px, 4vw, 50px)/1 var(--f-display); letter-spacing: -0.04em; }
.lp-price-sum small { color: var(--muted); font-weight: 700; }
.lp-price ul { list-style: none; margin: 8px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-price li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: #e4defc; }
.lp-price li svg { width: 18px; height: 18px; flex: none; color: var(--green); margin-top: 1px; }
.lp-price .btn { margin-top: auto; }
.lp-guarantee { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 14px 18px; border-radius: 16px; font-size: 14px; color: #b9ffe0; background: rgba(61, 255, 168, 0.06); border: 1px solid rgba(61, 255, 168, 0.18); }
.lp-guarantee svg { width: 18px; height: 18px; color: var(--green); flex: none; }

.lp-marquee { display: flex; flex-direction: column; gap: 12px; margin: 0 calc(50% - 50vw); }
.lp-mq { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.lp-mq-track { display: flex; gap: 12px; width: max-content; animation: marquee 60s linear infinite; }
.lp-mq--rev .lp-mq-track { animation-direction: reverse; animation-duration: 70s; }
.lp-mq-track span {
  padding: 16px 24px; border-radius: 18px; font: 700 16px var(--f-display); letter-spacing: -0.01em; white-space: nowrap;
  background: rgba(20, 16, 36, 0.8); border: 1px solid var(--line-2); color: #e9e4ff;
}
.lp-mq:hover .lp-mq-track { animation-play-state: paused; }

.lp-vf {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 30px; align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: var(--r-xl);
  background: linear-gradient(125deg, rgba(62, 232, 255, 0.12), rgba(18, 14, 36, 0.86) 42%, rgba(255, 79, 216, 0.16)); border: 1px solid rgba(167, 139, 250, 0.32);
}
.lp-vf h2 { font: 800 clamp(28px, 3.6vw, 44px)/1.05 var(--f-display); letter-spacing: -0.04em; margin: 10px 0 0; }
.lp-vf p { color: var(--muted); font-size: 16.5px; line-height: 1.55; margin: 14px 0 0; }
.lp-vf .btn { margin-top: 24px; }
.lp-vf-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.faq-item { border-radius: 20px; background: rgba(16, 13, 30, 0.82); border: 1px solid var(--line); transition: border-color 0.3s, background 0.3s; }
.faq-item[open] { border-color: rgba(167, 139, 250, 0.35); background: rgba(24, 19, 46, 0.86); }
.faq-item summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; font-weight: 800; font-size: 15.5px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span { flex: 1; }
.faq-item summary i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); flex: none; transition: transform 0.35s var(--spring), background 0.3s; }
.faq-item summary i svg { width: 16px; height: 16px; }
.faq-item[open] summary i { transform: rotate(45deg); background: var(--grad); }
.faq-a { padding: 0 20px 18px; }
.faq-a p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.faq-item[open] .faq-a { animation: faqIn 0.4s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }

.lp-cta {
  position: relative; overflow: hidden; text-align: center; padding: clamp(40px, 6vw, 80px) 20px; border-radius: var(--r-xl);
  background: radial-gradient(800px 360px at 50% 120%, rgba(255, 79, 216, 0.28), transparent 60%), linear-gradient(160deg, rgba(124, 92, 255, 0.26), rgba(14, 11, 26, 0.9) 55%);
  border: 1px solid rgba(167, 139, 250, 0.32);
}
.lp-cta h2 { font: 800 clamp(32px, 5vw, 62px)/1.02 var(--f-display); letter-spacing: -0.045em; margin: 10px 0 0; position: relative; }
.lp-cta p { position: relative; color: var(--muted); font-size: 17px; max-width: 560px; margin: 16px auto 0; }
.lp-cta .btn { position: relative; margin-top: 28px; }
.lp-cta .kicker { position: relative; }
.lp-cta-eq { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; display: flex; align-items: flex-end; gap: 6px; padding: 0 6px; opacity: 0.22; pointer-events: none; }
.lp-cta-eq i { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(0deg, transparent, #a78bfa 40%, #ff4fd8); transform-origin: bottom; animation: hcBar 1.8s ease-in-out infinite; animation-delay: var(--d); }

.lp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 48px 0 10px; margin-top: 60px; border-top: 1px solid var(--line); }
.lp-foot .brand { padding: 0; }
.lp-foot nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.lp-foot nav a { color: var(--muted); font-weight: 700; font-size: 14px; }
.lp-foot nav a:hover { color: var(--text); }
.lp-foot small { width: 100%; color: var(--dim); font-size: 12.5px; }

.lp-sticky { display: none; }

/* ── Адаптив лендинга ──────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-steps::before { display: none; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-card--wide { grid-column: span 2; }
}
@media (max-width: 960px) {
  .lp-nav nav { display: none; }
  .lp-nav .btn { margin-left: auto; }
}
@media (max-width: 860px) {
  .app.is-guest .main { padding: calc(74px + var(--safe-t)) 16px calc(110px + var(--safe-b)); }
  .lp-nav { padding: calc(10px + var(--safe-t)) 14px 10px; background: rgba(8, 6, 15, 0.72); border-color: var(--line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
  .lp-nav .brand-name span { display: none; }
  .login-title .br-d { display: none; }
  .hero-trust { justify-content: center; gap: 8px 14px; order: 2; }
  .hero-trust li { font-size: 13px; }
  .float-card { display: none; }
  .lp-stats { grid-template-columns: 1fr 1fr; margin-top: 28px; border-radius: 24px; }
  .lp-stat { padding: 18px 16px; }
  .lp-stat > b { font-size: 30px; white-space: nowrap; }
  .lp-stat p { display: none; }
  .lp-head { margin-bottom: 22px; }
  .lp-head p { font-size: 15.5px; }
  .lp-steps, .bento, .lp-prices, .lp-vf, .lp-vf-list, .faq { grid-template-columns: 1fr; }
  .bento-card--wide { grid-column: auto; }
  .bento-card { min-height: 0; padding: 20px; }
  .lp-step { padding: 20px; }
  .lp-price.is-hot { transform: none; }
  .lp-mq-track span { padding: 12px 18px; font-size: 14px; }
  .lp-vf .btn, .lp-cta .btn { width: 100%; }
  .lp-foot { flex-direction: column; align-items: flex-start; }
  .lp-sticky {
    display: block; position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; padding: 12px 14px calc(12px + var(--safe-b));
    background: linear-gradient(180deg, transparent, rgba(7, 6, 13, 0.92) 30%); transform: translateY(120%); transition: transform 0.45s var(--ease);
  }
  .lp-sticky.is-on { transform: none; }
}

/* ==========================================================================
   Кабинет
   ========================================================================== */

.nav-sep { margin: 8px 12px; }

/* ── Дашборд ───────────────────────────────────────────────────────────── */

.dash-hero {
  position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(26px, 4vw, 46px);
  display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 30px; align-items: center;
  background:
    radial-gradient(700px 320px at 92% 120%, rgba(255, 181, 71, 0.22), transparent 60%),
    radial-gradient(600px 300px at 0% -20%, rgba(124, 92, 255, 0.42), transparent 60%),
    linear-gradient(130deg, rgba(36, 26, 72, 0.9), rgba(16, 13, 30, 0.86) 50%, rgba(56, 18, 58, 0.7));
  border: 1px solid var(--line-2);
}
.dash-hero-copy { position: relative; z-index: 1; }
.dash-hero-art { position: relative; justify-self: center; width: min(250px, 100%); }
.dash-hero-art .vinyl { width: 100%; }
.dash-hero-art .note-float { position: absolute; font-size: 26px; animation: floatNote 5s ease-in-out infinite; filter: drop-shadow(0 6px 14px rgba(255, 79, 216, 0.6)); }

.attn { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.attn-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px;
  background: rgba(255, 181, 71, 0.07); border: 1px solid rgba(255, 181, 71, 0.25); transition: transform 0.25s var(--ease), border-color 0.25s;
}
.attn-item:hover { transform: translateY(-2px); border-color: rgba(255, 181, 71, 0.45); }
.attn-item--bad { background: rgba(255, 92, 122, 0.07); border-color: rgba(255, 92, 122, 0.28); }
.attn-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: rgba(255, 181, 71, 0.16); color: var(--amber); }
.attn-item--bad .attn-ic { background: rgba(255, 92, 122, 0.16); color: var(--red); }
.attn-ic svg { width: 19px; height: 19px; }
.attn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.attn-main b { font-size: 15px; }
.attn-main small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.kpi {
  position: relative; overflow: hidden; padding: 20px; border-radius: var(--r); min-height: 118px;
  background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px;
}
.kpi--main { background: linear-gradient(150deg, rgba(124, 92, 255, 0.26), rgba(20, 16, 38, 0.8) 60%); border-color: rgba(167, 139, 250, 0.3); }
.kpi-l { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.kpi-v { font: 700 30px/1.15 var(--f-display); letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi-v--txt { font-size: 20px; line-height: 1.25; margin-top: 8px; }
.kpi-s { color: var(--dim); font-size: 12.5px; font-weight: 600; margin-top: auto; }
.kpi-link { display: inline-flex; align-items: center; gap: 4px; color: var(--v2); }
.kpi-link svg { width: 14px; height: 14px; }
.kpi-spark { position: absolute; right: 14px; bottom: 14px; width: 42%; height: 40px; opacity: 0.9; }
.spark { width: 100%; height: 100%; overflow: visible; }
.spark path { fill: none; stroke: #ff8ae2; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 4px 8px rgba(255, 79, 216, 0.5)); }
.trend { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 12px; font-weight: 800; margin-top: 6px; }
.trend.up { color: var(--green); background: rgba(61, 255, 168, 0.12); }
.trend.down { color: var(--red); background: rgba(255, 92, 122, 0.12); }

.dash-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; margin-top: 16px; align-items: stretch; }
.dash-grid > .card { margin: 0; }
.pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pipe-step {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); transition: transform 0.25s var(--spring), border-color 0.25s;
}
.pipe-step:hover { transform: translateY(-3px); border-color: var(--line-2); }
.pipe-step b { font: 700 26px/1 var(--f-display); }
.pipe-step span { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.25; }
.pipe-step::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--dim); opacity: 0.5; }
.pipe-step--sent::before { background: var(--v2); opacity: 1; }
.pipe-step--stores::before { background: var(--cyan); opacity: 1; }
.pipe-step--live::before { background: var(--green); opacity: 1; box-shadow: 0 0 12px var(--green); }
.quick { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.quick-a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; transition: background 0.2s; }
.quick-a:hover { background: rgba(255, 255, 255, 0.05); }
.quick-a > svg { width: 36px; height: 36px; padding: 9px; border-radius: 11px; background: rgba(124, 92, 255, 0.16); color: #d8ccff; flex: none; }
.quick-a span { display: flex; flex-direction: column; }
.quick-a b { font-size: 14px; }
.quick-a small { color: var(--dim); font-size: 12.5px; }
.tips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tip-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--r); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); transition: transform 0.3s var(--ease), border-color 0.3s; }
.tip-card:hover { transform: translateY(-4px); border-color: rgba(167, 139, 250, 0.35); }
.tip-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--grad); color: #fff; margin-bottom: 6px; box-shadow: 0 10px 24px -10px rgba(255, 79, 216, 0.8); }
.tip-ic svg { width: 20px; height: 20px; }
.tip-card b { font-size: 15px; }
.tip-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.empty--flat { padding: 40px 20px; border-style: dashed; }
.empty--flat p { margin: 0 auto; }

/* ── Вкладки ───────────────────────────────────────────────────────────── */

.tabs { display: flex; gap: 4px; margin: 20px 0 16px; padding: 4px; border-radius: 16px; background: rgba(8, 6, 16, 0.55); box-shadow: inset 0 0 0 1px var(--line-2); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab-l { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 12px; font-weight: 700; font-size: 14px; color: var(--muted); white-space: nowrap; transition: color 0.2s, background 0.25s; }
.tab-l svg { width: 17px; height: 17px; }
.tab-l:hover { color: var(--text); }
.tab-l.is-on { color: #fff; background: linear-gradient(120deg, rgba(124, 92, 255, 0.7), rgba(255, 79, 216, 0.5)); box-shadow: 0 6px 20px -6px rgba(255, 79, 216, 0.7); }

/* ── Статистика ────────────────────────────────────────────────────────── */

.st-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; padding: 14px; }
.st-bar .select-btn { max-width: 360px; min-height: 46px; }
.st-row { margin-top: 16px; }
.st-card { margin: 0; container-type: inline-size; }
.st-aud { grid-template-columns: 1.35fr 1fr 1fr; }
.grid.st-row > .card { margin: 0; }
.st-gap { height: 22px; }
.st-legend { display: flex; gap: 14px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.st-legend span { display: inline-flex; align-items: center; gap: 6px; }
.st-legend i, .xchart-tip i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.d1 { background: linear-gradient(90deg, #7c5cff, #ff4fd8); }
.d2 { background: #3ee8ff; }

.xchart { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 6px 10px; }
.xchart > script { display: none; }
.xchart-y { grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--dim); text-align: right; padding: 2px 0 4px; font-variant-numeric: tabular-nums; }
.xchart-plot { position: relative; height: 240px; touch-action: pan-y; cursor: crosshair; }
.xchart-plot svg { width: 100%; height: 100%; overflow: visible; display: block; }
.xchart-grid line { stroke: rgba(255, 255, 255, 0.06); stroke-dasharray: 4 6; }
.xchart-line { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4000; stroke-dashoffset: 4000; animation: draw 1.8s var(--ease) forwards; filter: drop-shadow(0 6px 12px rgba(255, 79, 216, 0.35)); }
.xchart-line2 { fill: none; stroke: #3ee8ff; stroke-width: 1.6; stroke-opacity: 0.75; stroke-dasharray: 5 5; }
.xchart-area { opacity: 0; animation: areaIn 1s var(--ease) 0.4s forwards; }
@keyframes areaIn { to { opacity: 1; } }
.xchart-x { grid-column: 2; position: relative; height: 18px; font-size: 11px; font-weight: 700; color: var(--dim); }
.xchart-x span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.xchart-x span:first-child { transform: none; }
.xchart-x span:last-child { transform: translateX(-100%); }
.xchart-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.4), transparent); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.xchart-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 79, 216, 0.4), 0 0 18px #ff4fd8; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.xchart-tip {
  position: absolute; top: -8px; transform: translate(-50%, -100%); padding: 10px 12px; border-radius: 12px; min-width: 140px;
  background: rgba(23, 19, 42, 0.95); box-shadow: var(--shadow), inset 0 0 0 1px var(--line-2); font-size: 12.5px; pointer-events: none;
  display: flex; flex-direction: column; gap: 3px; opacity: 0; transition: opacity 0.2s; z-index: 3; white-space: nowrap;
}
.xchart-tip b { font-size: 12px; color: var(--muted); }
.xchart-tip span { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.xchart.is-hover .xchart-cross, .xchart.is-hover .xchart-dot, .xchart.is-hover .xchart-tip { opacity: 1; }

.donut { display: grid; grid-template-columns: 170px 1fr; gap: 22px; align-items: center; }
.donut-ring { position: relative; width: 170px; aspect-ratio: 1; }
.donut-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-ring circle[style] { opacity: 0; transition: opacity 0.6s var(--ease); transition-delay: calc(var(--i) * 90ms); }
.donut.is-in .donut-ring circle[style] { opacity: 1; }
.donut-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-mid b { font: 700 20px/1.1 var(--f-display); }
.donut-mid small { color: var(--dim); font-size: 11px; font-weight: 700; }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.donut-legend li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.donut-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.donut-legend span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e7e2ff; }
.donut-legend b { font-variant-numeric: tabular-nums; }
.bar-row span small { font-weight: 700; margin-left: 4px; }

.cols { display: flex; align-items: flex-end; gap: 8px; height: 170px; }
.col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.col-bar { flex: 1; width: 100%; display: flex; align-items: flex-end; border-radius: 10px; background: rgba(255, 255, 255, 0.04); overflow: hidden; }
.col-bar i { display: block; width: 100%; height: 0; border-radius: 10px; background: linear-gradient(0deg, #7c5cff, #ff4fd8); transition: height 1.1s var(--ease); }
.col-v { font-size: 11.5px; font-weight: 800; color: #e7e2ff; }
.col-n { font-size: 10.5px; font-weight: 700; color: var(--dim); white-space: nowrap; letter-spacing: -0.02em; }
.gsplit-bar { display: flex; height: 14px; border-radius: 10px; overflow: hidden; gap: 3px; }
.gsplit-bar i { display: block; height: 100%; border-radius: 4px; }
.gsplit-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 13px; color: var(--muted); font-weight: 600; }
.gsplit-leg span { display: inline-flex; align-items: center; gap: 7px; }
.gsplit-leg i { width: 10px; height: 10px; border-radius: 3px; }
.gsplit-leg b { color: var(--text); }

.tbl { display: flex; flex-direction: column; }
.tbl-h, .tbl-r { display: grid; align-items: center; gap: 14px; padding: 10px 8px; }
.tbl-h { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--line); }
.tbl-r { border-bottom: 1px solid var(--line); border-radius: 12px; text-align: left; width: 100%; transition: background 0.2s; }
.tbl-r:last-child { border-bottom: 0; }
.tbl-r:hover:not([disabled]) { background: rgba(255, 255, 255, 0.04); }
.tbl-r[disabled] { cursor: default; }
.tbl--tracks .tbl-h, .tbl--tracks .tbl-r { grid-template-columns: 32px minmax(0, 1fr) 190px 110px 20px; }
.tbl--rels .tbl-h, .tbl--rels .tbl-r { grid-template-columns: minmax(0, 1fr) 150px 110px 150px 20px; }
.tbl--earn .tbl-h, .tbl--earn .tbl-r { grid-template-columns: minmax(0, 1fr) 140px 140px 150px; }
.tbl-n { font: 700 15px var(--f-display); color: var(--dim); }
.tbl-r:nth-child(2) .tbl-n, .tbl-r:nth-child(3) .tbl-n, .tbl-r:nth-child(4) .tbl-n { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tbl-main { display: flex; flex-direction: column; min-width: 0; }
.tbl-main b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-main small { color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-main--cover { flex-direction: row; align-items: center; gap: 12px; }
.tbl-main--cover > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.tbl-cover { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, #251e47, #120f22); color: var(--dim); }
.tbl-cover img { width: 100%; height: 100%; object-fit: cover; }
.tbl-cover svg { width: 22px; height: 22px; }
.tbl-num { display: flex; flex-direction: column; gap: 4px; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; }
.tbl-num small { font-size: 11.5px; }
.tbl-bar { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.tbl-bar i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 4px; transition: width 1s var(--ease); }
.tbl-go { color: var(--dim); }
.tbl-go svg { width: 16px; height: 16px; }
.c-green { color: var(--green); }
.state { font-size: 11px; font-weight: 800; }
.state--paid { color: var(--green); }
.state--partial { color: var(--amber); }
.state--unpaid { color: var(--dim); }
.tag--btn { gap: 6px; cursor: pointer; transition: background 0.2s; }
.tag--btn:hover { background: rgba(124, 92, 255, 0.32); }
.tag--btn svg { width: 13px; height: 13px; }
.tag--e { background: rgba(255, 92, 122, 0.2); color: #ffc2cd; height: 20px; padding: 0 6px; font-size: 11px; vertical-align: 2px; }
.st-sheet { padding: 0 8px 8px; }
.st-sheet .kpis { margin-top: 0; }

/* ── Доходы ────────────────────────────────────────────────────────────── */

.money-hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: stretch; padding: clamp(22px, 3.5vw, 36px); border-radius: var(--r-xl);
  background: radial-gradient(600px 260px at 0% 0%, rgba(61, 255, 168, 0.14), transparent 60%), linear-gradient(140deg, rgba(30, 24, 60, 0.9), rgba(14, 11, 26, 0.86));
  border: 1px solid var(--line-2);
}
.money-main { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.money-main > span { color: var(--muted); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.money-main > b { font: 800 clamp(36px, 5vw, 56px)/1 var(--f-display); letter-spacing: -0.04em; background: linear-gradient(100deg, #b9ffe0, #3dffa8 50%, #3ee8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.money-main .btn { margin-top: 12px; }
.money-side { display: grid; grid-template-rows: repeat(3, 1fr); gap: 1px; border-radius: 18px; overflow: hidden; background: var(--line); }
.money-side div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: rgba(12, 10, 22, 0.8); }
.money-side span { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.money-side b { font: 700 17px var(--f-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-sum { display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none; }
.rep-sum::-webkit-details-marker { display: none; }
.rep-sum > svg { width: 18px; height: 18px; color: var(--dim); transition: transform 0.3s; }
.rep[open] .rep-sum > svg { transform: rotate(180deg); }
.rep-q { display: flex; flex-direction: column; }
.rep-q b { font: 700 16px var(--f-display); }
.rep-q small { color: var(--dim); font-size: 12.5px; }
.rep-total { font: 700 18px var(--f-display); font-variant-numeric: tabular-nums; }
.rep-body { margin-top: 18px; }

.wd { padding: 4px 8px 8px; }
.wd-sum { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 18px; background: rgba(61, 255, 168, 0.06); border: 1px solid rgba(61, 255, 168, 0.18); }
.wd-sum span { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.wd-sum b { font: 800 32px/1.05 var(--f-display); }
.wd-sum small { color: var(--dim); font-size: 12.5px; }
.wd-methods { display: flex; flex-wrap: wrap; gap: 8px; }
.wd-methods--col { flex-direction: column; }
.wd-m {
  padding: 11px 16px; border-radius: 13px; font-weight: 700; font-size: 14px; color: var(--muted); text-align: left;
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line-2); transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}
.wd-m:hover { color: var(--text); }
.wd-m.is-on { color: #fff; background: linear-gradient(120deg, rgba(124, 92, 255, 0.45), rgba(255, 79, 216, 0.3)); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.6); }

/* ── Управление релизом ────────────────────────────────────────────────── */

.acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.act {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border-radius: var(--r); text-align: left; min-height: 150px;
  background: var(--card); border: 1px solid var(--line); transition: transform 0.3s var(--ease), border-color 0.3s, opacity 0.3s;
}
.act:hover:not(.is-off) { transform: translateY(-4px); border-color: rgba(167, 139, 250, 0.4); }
.act-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(124, 92, 255, 0.18); color: #d8ccff; margin-bottom: 6px; box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.3); }
.act-ic svg { width: 19px; height: 19px; }
.act b { font: 700 15.5px/1.25 var(--f-display); }
.act p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.act small { margin-top: auto; padding-top: 6px; color: var(--dim); font-size: 12px; font-weight: 700; }
.act.is-off { opacity: 0.5; cursor: not-allowed; }
.act--primary { background: linear-gradient(150deg, rgba(124, 92, 255, 0.32), rgba(20, 16, 38, 0.86) 60%, rgba(255, 79, 216, 0.16)); border-color: rgba(167, 139, 250, 0.45); }
.act--primary .act-ic { background: var(--grad); color: #fff; box-shadow: 0 10px 24px -10px rgba(255, 79, 216, 0.8); }
.act--danger .act-ic { background: rgba(255, 92, 122, 0.14); color: var(--red); box-shadow: inset 0 0 0 1px rgba(255, 92, 122, 0.3); }
.act--danger:hover:not(.is-off) { border-color: rgba(255, 92, 122, 0.4); }

.rqs { display: flex; flex-direction: column; gap: 10px; }
.rq { display: flex; gap: 14px; padding: 16px; border-radius: var(--r); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); animation: pageIn 0.45s var(--ease) backwards; }
.page .rqs > .rq { background: var(--card); }
.rq-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; background: rgba(124, 92, 255, 0.16); color: #d8ccff; }
.rq--takedown .rq-ic { background: rgba(255, 92, 122, 0.14); color: var(--red); }
.rq--withdrawal .rq-ic { background: rgba(61, 255, 168, 0.12); color: var(--green); }
.rq--pitch .rq-ic { background: rgba(255, 79, 216, 0.14); color: #ffb8f0; }
.rq-ic svg { width: 19px; height: 19px; }
.rq-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rq-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rq-top b { font: 700 15px var(--f-display); }
.rq-rel { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--v2); }
.rq-rel svg { width: 15px; height: 15px; }
.rq-sum { margin: 0; padding-left: 18px; color: #ddd6ff; font-size: 13.5px; display: flex; flex-direction: column; gap: 2px; }
.rq-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: 13px; color: #e7e2ff; background: rgba(255, 255, 255, 0.04); }
.rq-note svg { width: 16px; height: 16px; flex: none; color: var(--v2); margin-top: 1px; }
.rq time { color: var(--dim); font-size: 12px; }
.chips-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cf { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 12px; font-weight: 700; font-size: 13.5px; color: var(--muted); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line-2); transition: color 0.2s, background 0.2s; }
.cf:hover { color: var(--text); }
.cf.is-on { color: #fff; background: linear-gradient(120deg, rgba(124, 92, 255, 0.5), rgba(255, 79, 216, 0.32)); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.5); }
.cf i { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); }

.ed { padding: 0 8px 8px; }
.ed-sec { display: block; margin: 0 0 14px; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.ed-sec > .label { margin-bottom: 12px; }
.ed-sec .field .hint { font-weight: 700; color: var(--muted); }
.ed-track summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.ed-track summary::-webkit-details-marker { display: none; }
.ed-track summary b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-track summary > svg { width: 18px; height: 18px; color: var(--dim); transition: transform 0.3s; }
.ed-track[open] summary > svg { transform: rotate(180deg); }
.ed-file { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.ed-file b { display: block; font-size: 14px; }
.ed-file .hint { margin: 2px 0 8px; }
.ed-file .btn { cursor: pointer; }
.ed-cover { width: 78px; height: 78px; border-radius: 14px; overflow: hidden; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, #251e47, #120f22); color: var(--dim); }
.ed-cover img { width: 100%; height: 100%; object-fit: cover; }
.ed-cover svg { width: 30px; height: 30px; }
.ed-cover--round { border-radius: 50%; }
.ed-file--audio { padding-top: 14px; border-top: 1px solid var(--line); }
.pitch-hero { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 14px; padding: 16px; border-radius: 18px; background: linear-gradient(130deg, rgba(255, 79, 216, 0.14), rgba(124, 92, 255, 0.12)); border: 1px solid rgba(255, 79, 216, 0.25); }
.pitch-hero > span { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--grad); color: #fff; }
.pitch-hero > span svg { width: 20px; height: 20px; }
.pitch-hero b { font: 700 16px var(--f-display); }
.pitch-hero p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* ── Адаптив кабинета ──────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid { grid-template-columns: 1fr; }
  .acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-aud { grid-template-columns: 1fr 1fr; }
  .st-aud > :first-child { grid-column: 1 / -1; }
  .tbl--rels .tbl-h, .tbl--rels .tbl-r { grid-template-columns: minmax(0, 1fr) 130px 100px 20px; }
  .tbl--rels .hide-s:nth-child(4) { display: none; }
}
@media (max-width: 860px) {
  .dash-hero { grid-template-columns: 1fr; padding: 24px 20px; border-radius: 28px; }
  .dash-hero-art { display: none; }
  .dash-hero .row-wrap .btn-lg { flex: 1 1 100%; }
  .kpis { gap: 10px; }
  .kpi { padding: 16px; min-height: 104px; }
  .kpi-v { font-size: 24px; }
  .kpi-v--txt { font-size: 16px; }
  .kpi-spark { width: 38%; height: 30px; right: 10px; bottom: 10px; }
  .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tips, .acts, .st-aud { grid-template-columns: 1fr; }
  .act { min-height: 0; }
  .tabs { width: 100%; }
  .tab-l { flex: 1; justify-content: center; padding: 0 10px; font-size: 13px; }
  .tab-l svg { display: none; }
  .st-bar { padding: 12px; }
  .st-bar .select-btn { max-width: none; }
  .st-bar .seg { width: 100%; }
  .st-bar .seg button { flex: 1; padding: 0 4px; font-size: 12.5px; white-space: nowrap; }
  .xchart-plot { height: 180px; }
  .xchart-y { display: none; }
  .xchart { grid-template-columns: 1fr; }
  .xchart-x { grid-column: 1; }
  .donut { grid-template-columns: 1fr; justify-items: center; }
  .donut-legend { width: 100%; }
  .cols { height: 150px; gap: 5px; }
  .hide-s { display: none !important; }
  .tbl--tracks .tbl-h, .tbl--tracks .tbl-r { grid-template-columns: 26px minmax(0, 1fr) 96px 16px; gap: 10px; }
  .tbl--rels .tbl-h, .tbl--rels .tbl-r { grid-template-columns: minmax(0, 1fr) 90px 16px; gap: 10px; }
  .tbl--earn .tbl-h, .tbl--earn .tbl-r { grid-template-columns: minmax(0, 1fr) 96px 104px; gap: 10px; }
  .tbl-cover { width: 38px; height: 38px; }
  .money-hero { grid-template-columns: 1fr; border-radius: 28px; }
  .money-main .btn { width: 100%; }
  .page-head > .btn { width: 100%; }
  .rq { padding: 14px; gap: 12px; }
  .rq-ic { width: 36px; height: 36px; }
  .attn-item { flex-wrap: wrap; padding: 14px; }
  .attn-main small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .attn-item .btn { margin-left: 52px; }
}

/* Узкие карточки: правила в конце файла, чтобы перебить базовые */
@container (max-width: 440px) {
  .donut { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .donut-ring { width: 160px; }
  .donut-legend { width: 100%; }
}
@container (max-width: 380px) {
  .bar-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .bar-row .bar-track { grid-column: 1 / -1; grid-row: 2; height: 8px; }
}

/* Релизы на маленьких телефонах — две колонки, одна только на совсем узких */
@media (max-width: 380px) {
  .rel-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 330px) {
  .rel-grid, .kpis { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Рамка браузера и Telegram
   Safari и Chrome: html и шапка одного цвета — полоса над шапкой не «отрывается».
   Фон уходит под адресную строку, а к нижнему краю ничего плоского не прилипает,
   поэтому низ браузера остаётся прозрачным (как в AstroFlow).
   ========================================================================== */

html.is-ios { background: var(--bg); background-color: var(--bg); background-image: none; overflow-x: clip; }
html.is-ios body { background: transparent !important; background-image: none !important; overflow-x: clip; }

@media (max-width: 1180px) {
  html {
    min-height: 100%;
    background: var(--bg); background-color: var(--bg); background-image: none;
    overflow-x: clip; overflow-y: auto;
  }
  body { background: transparent !important; background-image: none !important; overflow-x: clip; overflow-y: visible; position: static; }
  .bg {
    top: 0; bottom: calc(-1 * max(220px, env(safe-area-inset-bottom, 0px) + 160px)); height: auto;
    min-height: calc(100lvh + max(220px, env(safe-area-inset-bottom, 0px) + 160px));
  }
}

@media (max-width: 860px) {
  /* Шапки: сверху сплошной цвет фона под системной строкой, ниже — стекло того же оттенка */
  .topbar, .lp-nav {
    background: linear-gradient(180deg, var(--bg) 0, var(--bg) var(--safe-t), rgba(7, 6, 13, 0.9) calc(var(--safe-t) + 1px), rgba(7, 6, 13, 0.78));
    border-bottom-color: var(--line);
  }
  /* Липкая кнопка лендинга и панель мастера парят над низом, а не прилипают к краю */
  .lp-sticky {
    left: 12px; right: 12px; bottom: calc(10px + var(--safe-b)); padding: 0; background: none;
    transform: translateY(calc(100% + 30px + var(--safe-b)));
  }
  .lp-sticky .btn { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.85), 0 10px 30px -10px rgba(255, 79, 216, 0.7); }
  .wz-bar {
    left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); padding: 10px; border-radius: 22px;
    background: rgba(18, 15, 33, 0.86); border: 1px solid var(--line-2);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.85);
  }
  .app.in-wizard .main { padding-bottom: calc(120px + var(--safe-b)); }
}

/* Telegram на компьютере: полноэкранная ПК-версия, сверху место под кнопки Telegram */
html.in-tg-desk.tg-full .main { padding-top: calc(34px + var(--tg-content-top, 0px) + var(--tg-safe-top, 0px)); }
html.in-tg-desk.tg-full .side { padding-top: calc(22px + var(--tg-content-top, 0px) + var(--tg-safe-top, 0px)); }
html.in-tg-desk.tg-full .lp-nav { padding-top: calc(14px + var(--tg-content-top, 0px) + var(--tg-safe-top, 0px)); }
html.in-tg-desk.tg-full .app.is-guest .main { padding-top: calc(86px + var(--tg-content-top, 0px) + var(--tg-safe-top, 0px)); }
/* Telegram на телефоне: свой системный отступ снизу, если он есть */
html.in-tg:not(.in-tg-desk) .tabbar { bottom: calc(10px + max(var(--safe-b), var(--tg-safe-bottom, 0px))); }

/* ==========================================================================
   Логотип, иконка баланса «струны»
   ========================================================================== */

.brand-mark { background: none; box-shadow: none; padding: 0; overflow: visible; }
.brand-mark .logo { width: 100%; height: 100%; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6)); }
.logo { display: block; overflow: visible; }
.logo-shine { transform-origin: 24px 24px; animation: spin 6s linear infinite; }
.brand:hover .logo-shine { animation-duration: 1.6s; }
.brand-word b { font-weight: 700; background: linear-gradient(100deg, #c4b5ff, #ff7ae3 60%, #ffc27a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-name > span:not(.brand-word) { display: block; font: 600 10.5px/1.4 var(--f-text); color: var(--dim); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 3px; }
.brand-name .brand-word, .topbar .brand-name .brand-word, .lp-nav .brand-name .brand-word { display: inline; font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; margin: 0; }
.lockup-row { display: inline-flex; align-items: center; gap: 14px; }
.lockup-mark { width: clamp(44px, 4.4vw, 58px); aspect-ratio: 1; flex: none; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)); }
.lockup-mark .logo { width: 100%; height: 100%; }

.ic-strings { overflow: visible; }
.str-pluck { transform-box: fill-box; transform-origin: center; animation: pluck 2.4s ease-in-out infinite; }
@keyframes pluck {
  0%, 52%, 100% { transform: scaleX(1); }
  60% { transform: scaleX(-0.9); } 68% { transform: scaleX(0.7); } 76% { transform: scaleX(-0.45); } 84% { transform: scaleX(0.25); }
}
.bal-chip i svg { width: 16px; height: 16px; color: #fff; stroke-width: 2.2; }
.balance-label { display: flex; align-items: center; gap: 7px; }
.balance-label svg { width: 15px; height: 15px; color: #ffb8f0; }
.lp-stat > b i { font-style: normal; }

/* ==========================================================================
   Первый экран на телефоне: обложка и пластинка с проигрывателем целиком в кадре
   ========================================================================== */

@media (max-width: 860px) {
  .login-lockup { display: none; }
  .login-title { order: 1; margin-top: 6px; }
  .login-art { order: 2; padding: 10px 0 14px; display: flex; justify-content: center; width: 100%; }
  .login-text, .login .note { order: 3; }
  .hero-trust { order: 4; }
  .login-actions { order: 5; margin-top: 20px; }
  .marquee { order: 6; }
  /* Группа «обложка + пластинка + тонарм» шире обложки примерно на 55% — сдвигаем, чтобы центр был по экрану */
  .login-art .sleeve { width: min(52vw, 250px); max-width: none; margin-right: min(28vw, 136px); }
  .login-art .sleeve.is-out .vinyl { transform: translateX(52%); }
  .login-title { font-size: clamp(25px, 8.6vw, 40px); }
  .float-card--a { display: flex; left: auto; right: 0; bottom: 2px; padding: 9px 12px; border-radius: 14px; }
  .float-card--a small { display: none; }
  .float-card--a b { font-size: 13px; }
  .hc-name { font-size: clamp(15px, 4.6vw, 22px); }

  /* Карточка релиза: пластинка выезжает вправо — сдвигаем группу, чтобы она была по центру */
  .rel-hero .sleeve { max-width: none; width: min(56vw, 220px); margin-right: min(12vw, 48px); }
  .lockup-mark { width: 44px; }
}
@media (max-width: 360px) {
  .login-art .sleeve { width: 50vw; margin-right: 27vw; }
  .float-card--a { display: none; }
}

/* ПК: группа «обложка + пластинка + тонарм» шире обложки на ~55% — подгоняем под колонку, чтобы ничего не обрезалось */
html { overflow-x: clip; }
@media (min-width: 861px) {
  .login-art { padding-right: 0; }
  .login-art .sleeve { width: min(380px, 60%); max-width: none; margin-right: min(210px, 33%); }
}
@media (min-width: 861px) {
  .login-art { padding-top: 34px; padding-bottom: 44px; }
  .float-card--a { left: 0; bottom: 0; }
  .float-card--b { top: 0; right: 2%; }
}

/* Ничего не распирает колонки: длинные шапки карточек переносятся, элементы сетки сжимаются */
.grid > *, .dash-grid > *, .kpis > * { min-width: 0; }
.xchart-tip { left: 50%; }
@media (max-width: 860px) {
  .card-head { flex-wrap: wrap; row-gap: 10px; }
  .card-head > div { min-width: 0; flex: 1 1 180px; }
}

/* ==========================================================================
   Проигрыватель на первом экране: тонарм, знак Vision Flow на лейбле
   ========================================================================== */

.tonearm { filter: drop-shadow(3px 7px 6px rgba(0, 0, 0, 0.5)); }
.ta-arm { transform-box: view-box; transform-origin: 214px 124px; animation: taTrack 7s ease-in-out infinite; }
@keyframes taTrack { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-1.6deg); } }
.ta-glow { transform-box: view-box; transform-origin: 214px 124px; animation: spin 9s linear infinite; opacity: 0.85; }
.ta-led { animation: taLed 1.8s ease-in-out infinite; }
@keyframes taLed { 50% { opacity: 0.35; } }
.ta-rpm { fill: rgba(255, 255, 255, 0.55); font: 700 5px var(--f-text); letter-spacing: 0.04em; }

.vinyl-peek .vinyl-label { display: grid; place-items: center; }
.vinyl-peek .vinyl-label .label-mark {
  position: relative; z-index: 1; width: 70%; height: 70%;
  filter: drop-shadow(0 1px 2px rgba(40, 0, 50, 0.45));
}
.vinyl-peek .vinyl-label::after { inset: 46.5%; z-index: 2; }

@media (min-width: 861px) {
  .login-art .sleeve { margin-right: min(230px, 36%); }
}
@media (max-width: 860px) {
  .login-art .sleeve { margin-right: min(31vw, 150px); }
}
@media (max-width: 360px) {
  .login-art .sleeve { width: 49vw; margin-right: 30vw; }
}

/* ==========================================================================
   «Как это работает»: таймлайн с узлами и живыми мини-демо
   ========================================================================== */

.lp-flow { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lp-flow::before, .lp-flow::after {
  content: ""; position: absolute; left: 3%; right: 3%; top: 26px; height: 2px; border-radius: 2px;
}
.lp-flow::before { background: rgba(255, 255, 255, 0.08); }
.lp-flow::after {
  background: linear-gradient(90deg, #7c5cff, #ff4fd8 60%, #ffb547); box-shadow: 0 0 16px rgba(255, 79, 216, 0.7);
  transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(.65, 0, .35, 1) .2s;
}
.lp-flow.is-in::after { transform: scaleX(1); }
.lp-flow-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.lp-flow-node {
  position: relative; z-index: 1; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: #0d0a18; border: 1px solid var(--line-2); transition: border-color .4s, box-shadow .4s, transform .5s var(--spring);
  transition-delay: calc(.35s + var(--i) * .42s);
}
.lp-flow-node b { font: 800 15px var(--f-display); color: var(--dim); transition: color .4s; transition-delay: inherit; }
.lp-flow.is-in .lp-flow-node { border-color: transparent; transform: scale(1.06);
  box-shadow: 0 0 0 2px rgba(255, 79, 216, 0.7), 0 0 26px rgba(255, 79, 216, 0.55), inset 0 0 18px rgba(124, 92, 255, 0.45); }
.lp-flow.is-in .lp-flow-node b { color: #fff; }
.lp-flow-node::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(255, 79, 216, 0.4); opacity: 0; }
.lp-flow.is-in .lp-flow-node::after { animation: ring 2.6s ease-out infinite; animation-delay: calc(1s + var(--i) * .42s); }

.lp-flow-card {
  position: relative; width: 100%; flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, rgba(26, 21, 48, 0.86), rgba(12, 10, 22, 0.9)); border: 1px solid var(--line);
  opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .8s var(--ease), border-color .3s;
  transition-delay: calc(.25s + var(--i) * .14s);
}
.lp-flow-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #7c5cff, #ff4fd8, #ffb547, transparent); opacity: .8;
}
.lp-flow.is-in .lp-flow-card { opacity: 1; transform: none; }
.lp-flow-card:hover { border-color: rgba(167, 139, 250, 0.4); }
.lp-flow-top { display: flex; align-items: center; gap: 12px; }
.lp-flow-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; color: #fff;
  background: var(--grad); box-shadow: 0 10px 24px -10px rgba(255, 79, 216, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.lp-flow-ic svg { width: 20px; height: 20px; }
.lp-flow-top b { font: 700 17px/1.25 var(--f-display); letter-spacing: -0.01em; }
.lp-flow-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Мини-демо */
.sd { margin-top: auto; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); font-size: 12.5px; }
.sd small { display: block; color: var(--dim); font-size: 11px; font-weight: 700; }
.sd em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 800; background: rgba(255, 255, 255, 0.06); color: #e7e2ff; }
.sd em.ok { color: var(--green); background: rgba(61, 255, 168, 0.1); }
.sd-form { display: flex; flex-direction: column; gap: 9px; }
.sd-field { display: block; padding: 8px 10px; border-radius: 10px; background: rgba(8, 6, 16, 0.6); border: 1px solid rgba(167, 139, 250, 0.45); box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.14); }
.sd-type { display: inline-block; font-weight: 800; font-size: 13px; overflow: hidden; white-space: nowrap; width: 0; border-right: 2px solid #ff4fd8; vertical-align: bottom; }
.lp-flow.is-in .sd-type { animation: sdType 3.4s steps(14) 1s infinite, sdCaret .8s step-end infinite; }
@keyframes sdType { 0% { width: 0; } 45%, 85% { width: 8.2em; } 100% { width: 0; } }
@keyframes sdCaret { 50% { border-color: transparent; } }
.sd-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-up { display: flex; align-items: center; gap: 10px; }
.sd-cover { width: 42px; height: 42px; border-radius: 10px; flex: none; background: conic-gradient(from 200deg, #7c5cff, #ff4fd8, #ffb547, #7c5cff); box-shadow: 0 6px 16px -6px rgba(255, 79, 216, 0.7); }
.sd-file { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sd-file b { font-size: 12.5px; }
.sd-bar { display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 4px; }
.sd-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--grad); }
.lp-flow.is-in .sd-bar i { animation: sdUp 3.2s var(--ease) 1.3s infinite; }
@keyframes sdUp { 0% { width: 0; } 60%, 90% { width: 100%; } 100% { width: 100%; opacity: 0; } }
.sd-pay { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sd-pay b { font: 800 18px var(--f-display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sd-coin { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--grad); color: #fff; box-shadow: 0 8px 20px -8px rgba(255, 79, 216, 0.9); }
.sd-coin svg { width: 18px; height: 18px; stroke-width: 2.2; }
.lp-flow.is-in .sd-coin { animation: sdCoin 2.6s ease-in-out 1.7s infinite; }
@keyframes sdCoin { 0%, 70%, 100% { transform: rotateY(0); } 85% { transform: rotateY(180deg); } }
.sd-pay .ok { margin-left: auto; }
.sd-live { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-live em i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); transition: background .3s, box-shadow .3s; }
.lp-flow.is-in .sd-live em i { animation: sdLive 4s ease-in-out infinite; animation-delay: calc(2s + var(--i) * .35s); }
@keyframes sdLive { 0%, 8% { background: var(--dim); box-shadow: none; } 15%, 85% { background: var(--green); box-shadow: 0 0 10px var(--green); } 100% { background: var(--dim); } }

@media (max-width: 1100px) {
  .lp-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .lp-flow::before, .lp-flow::after { display: none; }
}
@media (max-width: 860px) {
  /* Телефон: вертикальный таймлайн, линия слева */
  .lp-flow { grid-template-columns: 1fr; gap: 14px; padding-left: 66px; }
  .lp-flow::before, .lp-flow::after { display: block; left: 26px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; }
  .lp-flow::after { transform: scaleY(0); transform-origin: top; }
  .lp-flow.is-in::after { transform: scaleY(1); }
  .lp-flow-step { display: block; }
  .lp-flow-node { position: absolute; left: -66px; top: 14px; width: 52px; height: 52px; }
  .lp-flow-card { padding: 18px; }
}
.lp-flow.rv { opacity: 1; transform: none; }

/* ==========================================================================
   Курсор: точка + градиентное кольцо, обнимает кнопки, ноты при движении
   ========================================================================== */

.nc { position: fixed; inset: 0; z-index: 200; pointer-events: none; contain: strict; }
.nc-ring, .nc-dot { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .25s ease; will-change: transform; }
.nc.is-on .nc-ring, .nc.is-on .nc-dot { opacity: 1; }
.nc.is-out .nc-ring, .nc.is-out .nc-dot, .nc.is-text .nc-ring, .nc.is-text .nc-dot { opacity: 0; }
.nc-ring { width: 34px; height: 34px; border-radius: 17px; contain: layout style; }
.nc-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
  background: conic-gradient(from var(--ang), #9a7bff, #ff4fd8, #ffb547, #3ee8ff, #9a7bff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: angSpin 3s linear infinite;
}
.nc-ring i { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 50%, rgba(255, 79, 216, 0.14), transparent 70%); opacity: 0; transition: opacity .3s, background .3s; }
.nc.is-hot .nc-ring i { opacity: 1; }
.nc.is-snap .nc-ring i { opacity: 1; background: linear-gradient(120deg, rgba(124, 92, 255, 0.14), rgba(255, 79, 216, 0.1)); box-shadow: 0 0 24px -4px rgba(255, 79, 216, 0.55); }
.nc.is-snap .nc-ring::before { padding: 1.4px; }
.nc-ring { transition: opacity .25s ease, scale .25s cubic-bezier(.34, 1.56, .64, 1); }
.nc.is-down .nc-ring { scale: .86; }
.nc-dot { width: 0; height: 0; }
.nc-dot::before {
  content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1.5px rgba(7, 6, 13, 0.55), 0 0 12px 2px rgba(255, 79, 216, 0.95), 0 0 26px 6px rgba(124, 92, 255, 0.45);
  transition: scale .25s cubic-bezier(.34, 1.56, .64, 1);
}
.nc.is-hot .nc-dot::before, .nc.is-snap .nc-dot::before { scale: .55; }
.nc.is-down .nc-dot::before { scale: 1.6; }
.nc-note {
  position: absolute; margin: -9px 0 0 -6px; font: 800 15px Manrope, "Segoe UI Symbol", sans-serif; scale: var(--s);
  background: linear-gradient(120deg, #c4b5ff, #ff4fd8 60%, #ffb547); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: hue-rotate(var(--h)) drop-shadow(0 0 6px rgba(255, 79, 216, 0.6)); animation: ncNote .9s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes ncNote {
  from { transform: translate(0, 0) rotate(0); opacity: .95; }
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; }
}
/* Старый курсор отключён */
.cx { display: none !important; }

/* ==========================================================================
   Обычный курсор + музыкальный след (заменяет кольцо и точку)
   ========================================================================== */

.nc { display: none !important; }
html.cx-on, html.cx-on body, html.cx-on body * { cursor: auto; }
.nt { position: fixed; inset: 0; z-index: 200; pointer-events: none; contain: strict; overflow: hidden; }
.nt-note, .nt-eq, .nt-wave { position: absolute; will-change: transform, opacity; }
.nt-note {
  margin: -10px 0 0 -6px; font: 800 16px/1 Manrope, "Segoe UI Symbol", sans-serif;
  background: linear-gradient(120deg, #c4b5ff, #ff4fd8 55%, #ffb547); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: hue-rotate(var(--h)) drop-shadow(0 0 6px rgba(255, 79, 216, 0.55)); animation: ntFly 1.05s cubic-bezier(.2, .7, .3, 1) forwards;
}
.nt-eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; margin: -7px 0 0 -6px; animation: ntFly 1.05s cubic-bezier(.2, .7, .3, 1) forwards; }
.nt-eq i { width: 3px; border-radius: 2px; background: linear-gradient(0deg, #7c5cff, #ff4fd8); box-shadow: 0 0 6px rgba(255, 79, 216, 0.6); animation: ntEq .45s ease-in-out infinite alternate; }
.nt-eq i:nth-child(2) { animation-delay: -.15s; } .nt-eq i:nth-child(3) { animation-delay: -.3s; }
@keyframes ntEq { from { height: 25%; } to { height: 100%; } }
@keyframes ntFly {
  0% { transform: translate(0, 0) scale(calc(var(--s) * .4)) rotate(0); opacity: 0; }
  15% { opacity: .95; transform: translate(calc(var(--mx) * .15), calc(var(--my) * .15)) scale(var(--s)) rotate(calc(var(--r) * .2)); }
  100% { transform: translate(var(--mx), var(--my)) scale(calc(var(--s) * .8)) rotate(var(--r)); opacity: 0; }
}
.nt-wave { width: 0; height: 0; }
.nt-wave::before, .nt-wave::after {
  content: ""; position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(255, 79, 216, 0.75); animation: ntWave .7s ease-out forwards;
}
.nt-wave::after { border-color: rgba(167, 139, 250, 0.6); animation-delay: .12s; opacity: 0; }
@keyframes ntWave { from { transform: scale(.2); opacity: 1; } to { transform: scale(2); opacity: 0; } }

/* След курсора из инструментов: один холст поверх страницы */
.nt { display: none !important; }
.nt-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 200; pointer-events: none; }

/* ==========================================================================
   Плавная прокрутка: без размытия под карточками и без перерисовки фона каждый кадр.
   Анимированный фон под backdrop-filter заставлял браузер заново размывать каждую карточку на каждом кадре.
   ========================================================================== */

.card, .float-card, .rel-cover .pill, .hc-top span, .sup-day span, .is-them .sup-bubble, .toast {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.card { background: rgba(17, 14, 31, 0.92); }
.float-card { background: rgba(20, 16, 38, 0.94); }
.rel-cover .pill { background: rgba(10, 8, 20, 0.82); }
.toast { background: rgba(23, 19, 42, 0.97); }
/* Пятна фона мягкие уже за счёт radial-gradient — дорогой filter: blur не нужен */
.bg-blob { filter: none; will-change: transform; }
.bg-grain { animation: none; }
.bg-grid { animation: none; }
/* Стекло оставляем только у фиксированных панелей, и полегче */
.side { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
@media (max-width: 860px) {
  .topbar, .lp-nav { backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); }
  .tabbar { backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); }
}
#fx { will-change: transform; }

/* ==========================================================================
   Лендинг слайдами: свой вход у каждого раздела, точки-навигация справа
   Переходы на transition: класс .is-in снимается при уходе — анимация повторяется при возврате.
   ========================================================================== */

.lp-slide { scroll-margin-top: 0; }
.lp-slide .rv { opacity: 1; transform: none; transition: none; }

/* Заголовок слайда — «шторка» слева направо */
.lp-slide .lp-head.rv { clip-path: inset(0 100% 0 0); transform: translateX(-24px); transition: clip-path 1s cubic-bezier(.77, 0, .18, 1), transform 1s cubic-bezier(.22, 1, .36, 1); }
.lp-slide .lp-head.rv.is-in { clip-path: inset(0 -20px 0 0); transform: none; }

/* flow: карточки шагов поднимаются по очереди (основа уже есть у .lp-flow) */

/* zoom: карточки «возможностей» влетают с поворотом — нечётные слева, чётные справа */
.lp-slide[data-fx="zoom"] .bento { perspective: 1400px; }
.lp-slide[data-fx="zoom"] .bento-card.rv {
  opacity: 0; transform: translateX(-60px) rotateY(24deg) scale(.86); transform-origin: left center;
  transition: opacity .7s ease, transform 1s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--n, 0) * 70ms);
}
.lp-slide[data-fx="zoom"] .bento-card.rv:nth-child(even) { transform: translateX(60px) rotateY(-24deg) scale(.86); transform-origin: right center; }
.lp-slide[data-fx="zoom"] .bento-card.rv.is-in { opacity: 1; transform: none; }
.lp-slide[data-fx="zoom"] .bento-card:nth-child(1) { --n: 1; } .lp-slide[data-fx="zoom"] .bento-card:nth-child(2) { --n: 2; }
.lp-slide[data-fx="zoom"] .bento-card:nth-child(3) { --n: 3; } .lp-slide[data-fx="zoom"] .bento-card:nth-child(4) { --n: 4; }
.lp-slide[data-fx="zoom"] .bento-card:nth-child(5) { --n: 5; } .lp-slide[data-fx="zoom"] .bento-card:nth-child(6) { --n: 6; }
.lp-slide[data-fx="zoom"] .bento-card:nth-child(7) { --n: 7; } .lp-slide[data-fx="zoom"] .bento-card:nth-child(8) { --n: 8; }

/* fan: тарифы раскрываются веером, средний падает сверху */
.lp-slide[data-fx="fan"] .lp-price.rv { opacity: 0; transition: opacity .6s ease, transform 1.1s cubic-bezier(.34, 1.4, .64, 1); }
.lp-slide[data-fx="fan"] .lp-price.rv:nth-child(1) { transform: translate(120px, 80px) rotate(-16deg) scale(.88); transform-origin: bottom right; }
.lp-slide[data-fx="fan"] .lp-price.rv:nth-child(2) { transform: translateY(-90px) scale(.9); transition-delay: .12s; }
.lp-slide[data-fx="fan"] .lp-price.rv:nth-child(3) { transform: translate(-120px, 80px) rotate(16deg) scale(.88); transform-origin: bottom left; transition-delay: .06s; }
.lp-slide[data-fx="fan"] .lp-price.rv.is-in { opacity: 1; transform: none; }
.lp-slide[data-fx="fan"] .lp-price.is-hot.rv.is-in { transform: translateY(-8px); }
.lp-slide[data-fx="fan"] .lp-guarantee.rv { opacity: 0; transform: scaleX(.6); transition: opacity .6s ease .5s, transform .8s cubic-bezier(.22, 1, .36, 1) .5s; }
.lp-slide[data-fx="fan"] .lp-guarantee.rv.is-in { opacity: 1; transform: none; }

/* sweep: строки площадок въезжают навстречу друг другу */
.lp-slide[data-fx="sweep"] .lp-marquee.rv .lp-mq { opacity: 0; transition: opacity .6s ease, transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.lp-slide[data-fx="sweep"] .lp-marquee.rv .lp-mq:first-child { transform: translateX(-40%); }
.lp-slide[data-fx="sweep"] .lp-marquee.rv .lp-mq:last-child { transform: translateX(40%); transition-delay: .12s; }
.lp-slide[data-fx="sweep"] .lp-marquee.rv.is-in .lp-mq { opacity: 1; transform: none; }

/* split: блок Vision Flow раскрывается круглой диафрагмой, пункты выпрыгивают */
.lp-slide[data-fx="split"] .lp-vf.rv { clip-path: circle(0% at 50% 50%); transition: clip-path 1.2s cubic-bezier(.77, 0, .18, 1); }
.lp-slide[data-fx="split"] .lp-vf.rv.is-in { clip-path: circle(150% at 50% 50%); }
.lp-slide[data-fx="split"] .lp-vf .vf-item { opacity: 0; transform: scale(.7) translateY(20px); transition: opacity .5s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.lp-slide[data-fx="split"] .lp-vf.is-in .vf-item { opacity: 1; transform: none; }
.lp-slide[data-fx="split"] .lp-vf.is-in .vf-item:nth-child(1) { transition-delay: .55s; } .lp-slide[data-fx="split"] .lp-vf.is-in .vf-item:nth-child(2) { transition-delay: .65s; }
.lp-slide[data-fx="split"] .lp-vf.is-in .vf-item:nth-child(3) { transition-delay: .75s; } .lp-slide[data-fx="split"] .lp-vf.is-in .vf-item:nth-child(4) { transition-delay: .85s; }

/* cascade: вопросы падают каскадом, раскрываясь сверху */
.lp-slide[data-fx="cascade"] .faq { perspective: 1200px; }
.lp-slide[data-fx="cascade"] .faq-item.rv { opacity: 0; transform: rotateX(-70deg) translateY(-20px); transform-origin: top center;
  transition: opacity .5s ease, transform .8s cubic-bezier(.34, 1.3, .64, 1); transition-delay: calc(var(--d, 0ms) * 1.6); }
.lp-slide[data-fx="cascade"] .faq-item.rv.is-in { opacity: 1; transform: none; }

/* burst: финальный призыв «взрывается» из центра */
.lp-slide[data-fx="burst"] .lp-cta.rv { opacity: 0; transform: scale(.7) rotate(-3deg); transition: opacity .6s ease, transform 1.1s cubic-bezier(.34, 1.56, .64, 1); }
.lp-slide[data-fx="burst"] .lp-cta.rv.is-in { opacity: 1; transform: none; }
.lp-slide[data-fx="burst"] .lp-cta.rv.is-in::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 79, 216, 0.7); animation: ctaBurst 1.2s ease-out .35s both;
}
@keyframes ctaBurst { from { transform: scale(.2); opacity: 1; } to { transform: scale(26); opacity: 0; } }

/* Точки-навигация по слайдам */
.lp-dots { position: fixed; z-index: 48; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; }
.lp-dots button { position: relative; width: 10px; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.22); transition: height .35s var(--ease), background .35s; }
.lp-dots button.is-on { height: 30px; background: linear-gradient(180deg, #9a7bff, #ff4fd8, #ffb547); box-shadow: 0 0 14px rgba(255, 79, 216, 0.7); }
.lp-dots button span {
  position: absolute; right: 22px; top: 50%; transform: translate(6px, -50%); white-space: nowrap; padding: 5px 10px; border-radius: 9px;
  font: 700 12px var(--f-text); color: #fff; background: rgba(23, 19, 42, 0.95); box-shadow: inset 0 0 0 1px var(--line-2);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease);
}
.lp-dots button:hover span { opacity: 1; transform: translate(0, -50%); }
html:not(:has(.app.is-guest)) .lp-dots { display: none; }

@media (min-width: 861px) {
  .lp-slide { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 96px 0 48px; scroll-snap-align: start; }
  html:has(.lp-ready) { scroll-snap-type: y proximity; }
}
@media (max-width: 860px) {
  .lp-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-slide .rv, .lp-slide .rv * { transition: none !important; clip-path: none !important; opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Обложка v2: знак Vision Flow в круговом спектре, голографическая плёнка
   ========================================================================== */

.hero-cover--v2 { background: #0b0718; }
.hero-cover--v2 .hc-mesh--a { width: 80%; height: 80%; left: -25%; top: -25%; }
.hero-cover--v2 .hc-mesh--b { width: 70%; height: 70%; right: -25%; top: 30%; }
.hc2-rings {
  position: absolute; z-index: 1; left: 50%; top: 46%; width: 82%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 7px);
  -webkit-mask: radial-gradient(circle, transparent 0 36%, #000 37% 70%, transparent 71%); mask: radial-gradient(circle, transparent 0 36%, #000 37% 70%, transparent 71%);
}
.hc2-rings::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; animation: spin 7s linear infinite;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 255, 255, 0.35) 80%, transparent 90%);
}
.hc2-spectrum { position: absolute; z-index: 2; left: 50%; top: 46%; width: 86%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.hc2-spectrum i { position: absolute; left: 50%; top: 0; width: 1.7%; height: 50%; margin-left: -0.85%; transform-origin: 50% 100%; transform: rotate(var(--a)); }
.hc2-spectrum i::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 74%; height: calc(var(--h) * 0.3); border-radius: 4px;
  background: linear-gradient(0deg, #9a7bff, #ff4fd8 60%, #ffc06a); box-shadow: 0 0 8px rgba(255, 79, 216, 0.7);
  transform-origin: 50% 100%; animation: hc2Ray 1.3s ease-in-out infinite; animation-delay: var(--d);
}
@keyframes hc2Ray { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
.hc2-mark {
  position: absolute; z-index: 3; left: 50%; top: 46%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 79, 216, 0.45), rgba(124, 92, 255, 0.25) 45%, transparent 70%);
  animation: hc2Pulse 2.6s ease-in-out infinite;
}
.hc2-mark svg { width: 74%; height: 74%; filter: drop-shadow(0 0 10px rgba(255, 120, 220, 0.9)) drop-shadow(0 0 22px rgba(124, 92, 255, 0.7)); }
@keyframes hc2Pulse { 50% { transform: translate(-50%, -50%) scale(1.06); } }
.hc2-title { position: absolute; z-index: 4; left: 6%; right: 6%; bottom: 6%; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.hc2-title b { font: 800 clamp(15px, 2.2vw, 22px)/1 var(--f-display); letter-spacing: 0.02em; color: #fff; text-shadow: 0 2px 16px rgba(255, 79, 216, 0.6); }
.hc2-title small { font: 700 clamp(8px, 1vw, 10px) var(--f-text); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.hc2-foil {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: screen; background-size: 260% 100%;
  background-image: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.16) 44%, rgba(120, 220, 255, 0.18) 50%, rgba(255, 120, 220, 0.16) 56%, transparent 70%);
  animation: hc2Foil 5.5s linear infinite;
}
@keyframes hc2Foil { from { background-position: 130% 0; } to { background-position: -130% 0; } }

/* Плашка «Неоновые ночи»: компактная, в одну строку, лишь касается края обложки */
.float-card--a { flex-direction: row; align-items: center; gap: 10px; padding: 9px 14px 9px 12px; border-radius: 14px; }
.fc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); flex: none; animation: pulseDot 1.6s infinite; }
.fc-txt { display: flex; flex-direction: column; gap: 1px; }
.fc-txt b { font: 700 13.5px/1.2 var(--f-display); }
.fc-txt small { font-size: 11px; color: var(--muted); }
@media (min-width: 861px) {
  .float-card--a { left: 2%; bottom: 4px; }
}
@media (max-width: 860px) {
  .float-card--a { padding: 7px 11px; gap: 8px; }
  .fc-txt small { display: none; }
}
.hc2-title b { white-space: nowrap; font-size: clamp(11px, 1.8vw, 22px); }
@media (min-width: 861px) { .float-card--a { bottom: -18px; left: 0; } .login-art { padding-bottom: 56px; } }
.lp-dots { transition: opacity .35s ease; }
.lp-dots.is-hero { opacity: 0; pointer-events: none; }

/* ==========================================================================
   Обложка v3 «Сверхновая»: ядро звезды, орбиты, звёздная пыль, горизонт-эквалайзер, хромированное NOVA
   ========================================================================== */

.hero-cover--v3 { background: radial-gradient(120% 90% at 50% 38%, #2a0f4d 0%, #120826 45%, #07040f 100%); }
.hero-cover--v3 .hc-mesh--a { width: 70%; height: 70%; left: -30%; top: -30%; opacity: .7; }
.hero-cover--v3 .hc-mesh--b { width: 64%; height: 64%; right: -30%; top: 20%; opacity: .55; }
.hero-cover--v3 .hc-mesh--c { opacity: .35; }
.hc3-stars {
  position: absolute; inset: 0; z-index: 1; opacity: .8;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 72%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 76% 22%, #ffe6fb, transparent), radial-gradient(1px 1px at 88% 58%, #fff, transparent),
    radial-gradient(1px 1px at 60% 12%, #fff, transparent), radial-gradient(1.3px 1.3px at 40% 30%, #d9ccff, transparent),
    radial-gradient(1px 1px at 18% 48%, #fff, transparent), radial-gradient(1px 1px at 92% 34%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 70% 64%, #fff, transparent), radial-gradient(1px 1px at 8% 66%, #ffd7f3, transparent);
  animation: hc3Twinkle 3.2s ease-in-out infinite alternate;
}
@keyframes hc3Twinkle { to { opacity: .35; } }
.hc3-orbit {
  position: absolute; z-index: 2; left: 50%; top: 40%; aspect-ratio: 1; border-radius: 50%;
  border: 1.2px solid rgba(255, 255, 255, 0.28); transform: translate(-50%, -50%) rotate(-18deg) scaleY(.3);
}
.hc3-orbit--a { width: 74%; }
.hc3-orbit--b { width: 96%; border-color: rgba(255, 180, 240, 0.16); transform: translate(-50%, -50%) rotate(14deg) scaleY(.26); }
.hc3-orbit i { position: absolute; inset: 0; border-radius: 50%; animation: spin 7s linear infinite; }
.hc3-orbit--b i { animation-duration: 11s; animation-direction: reverse; }
.hc3-orbit i::before {
  content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #ffb0ec 55%, #9a7bff); box-shadow: 0 0 12px rgba(255, 150, 230, 0.9);
}
.hc3-orbit--b i::before { width: 8px; height: 8px; margin-left: -4px; top: -4px; background: radial-gradient(circle at 35% 35%, #fff, #7fe3ff 60%, #3e7bff); box-shadow: 0 0 10px rgba(120, 220, 255, 0.9); }
.hc3-core {
  position: absolute; z-index: 3; left: 50%; top: 40%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #fff 0 7%, #ffe3f8 12%, rgba(255, 95, 224, 0.9) 24%, rgba(140, 92, 255, 0.5) 42%, transparent 68%);
  filter: drop-shadow(0 0 18px rgba(255, 79, 216, 0.8)); animation: hc3Core 3s ease-in-out infinite;
}
@keyframes hc3Core { 50% { transform: translate(-50%, -50%) scale(1.08); } }
.hc3-core::before, .hc3-core i {
  content: ""; position: absolute; inset: -18%; display: block;
  clip-path: polygon(50% 0, 54% 46%, 100% 50%, 54% 54%, 50% 100%, 46% 54%, 0 50%, 46% 46%);
  background: radial-gradient(circle, #fff 0 18%, rgba(255, 210, 245, 0.9) 34%, rgba(255, 120, 220, 0) 70%);
  animation: spin 16s linear infinite;
}
.hc3-core i { inset: 4%; transform: rotate(45deg); opacity: .7; animation: hc3Spin2 22s linear infinite reverse; }
@keyframes hc3Spin2 { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }
.hc3-flare { position: absolute; z-index: 4; left: 50%; top: 40%; width: 118%; height: 2px; transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(255, 220, 248, 0.15) 20%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 220, 248, 0.15) 80%, transparent);
  animation: hc3Flare 4s ease-in-out infinite; }
.hc3-flare::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 2400%; transform: translate(-50%, -50%) scaleY(.035);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.9), transparent); }
@keyframes hc3Flare { 50% { opacity: .55; transform: translate(-50%, -50%) scaleX(.85); } }
.hc3-top { left: 4%; right: 4%; display: flex; justify-content: space-between; }
.hc3-title { position: absolute; z-index: 5; left: 0; right: 0; bottom: 21%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hc3-title b {
  font: 800 clamp(26px, 4.6vw, 50px)/0.95 var(--f-display); letter-spacing: 0.16em; padding-left: 0.16em;
  background: linear-gradient(180deg, #ffffff 0%, #ffe3f7 38%, #b9a4ff 62%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 14px rgba(255, 79, 216, 0.55));
}
.hc3-title small { font: 700 clamp(8px, 1.1vw, 11px) var(--f-text); letter-spacing: 0.62em; padding-left: 0.62em; color: rgba(255, 255, 255, 0.78); }
.hc3-wave { position: absolute; z-index: 4; left: 7%; right: 7%; bottom: 6%; height: 11%; display: flex; align-items: flex-end; gap: 2%; }
.hc3-wave i { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: linear-gradient(0deg, rgba(124, 92, 255, 0.4), #ff6ae2 60%, #ffd29a);
  transform-origin: bottom; animation: hcBar 1.5s ease-in-out infinite; animation-delay: var(--d); box-shadow: 0 0 8px rgba(255, 79, 216, 0.5); }
.hc3-wave::after { content: ""; position: absolute; left: -8%; right: -8%; bottom: -2px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); }

/* Реалистичный тонарм: вращение вокруг оси (222, 38), справа место под подставку, микролифт и кнопки */
.ta-arm { transform-origin: 222px 38px; animation: taTrack2 8s ease-in-out infinite; }
@keyframes taTrack2 { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-0.9deg); } }
.ta-rpm { font: 800 3.6px var(--f-text); fill: rgba(255, 255, 255, 0.8); letter-spacing: 0; }
@media (min-width: 861px) {
  .login-art .sleeve { width: min(370px, 57%); margin-right: min(255px, 39%); }
}
@media (max-width: 860px) {
  .login-art .sleeve { width: min(50vw, 240px); margin-right: min(34vw, 165px); }
}
@media (max-width: 360px) {
  .login-art .sleeve { width: 47vw; margin-right: 33vw; }
}

/* Корпус проигрывателя: под пластинкой и тонармом, уходит под обложку */
.vinyl-peek .plinth { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; z-index: 0;
  filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.7)); }
.vinyl-peek .vinyl-rotor { z-index: 1; }
.vinyl-peek .tonearm { z-index: 3; }
.pl-brandmark { font: 800 7px var(--f-display); letter-spacing: 0.32em; fill: rgba(255, 255, 255, 0.22); }
/* Плашка-пример «Релиз вышел»: на телефоне без подписи непонятна — скрываем */
@media (max-width: 860px) { .float-card--a { display: none !important; } }

/* ==========================================================================
   Плашки на первом экране: прослушивания выше проигрывателя, трек — мини-плеер
   ========================================================================== */

@media (min-width: 861px) {
  .float-card--b { top: -34px; right: 0; }
  .login-art { padding-top: 56px; }
  .float-card--a.fc-player { left: -4%; bottom: 14px; }
}
.fc-player { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; width: 272px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(34, 26, 62, 0.97), rgba(18, 14, 34, 0.97)); border: 1px solid rgba(167, 139, 250, 0.32);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 79, 216, 0.08), 0 10px 30px -12px rgba(255, 79, 216, 0.45); }
.fcp-art { position: relative; width: 48px; height: 48px; border-radius: 12px; flex: none; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #fff 0 6%, #ff6ae2 16%, #7c5cff 42%, #1a0d33 72%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.fcp-art i { position: absolute; right: -14px; top: 6px; width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle, #ff4fd8 0 16%, #111 17% 22%, transparent 23%), repeating-radial-gradient(circle, #0b0a10 0 1px, #1f1b2a 1.2px 2.2px);
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.6); animation: spin 2.4s linear infinite; }
.fcp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fcp-top { display: flex; align-items: center; gap: 8px; }
.fcp-top b { font: 700 13.5px/1.2 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcp-top em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 7px; border-radius: 99px;
  font-size: 10.5px; font-weight: 800; color: var(--green); background: rgba(61, 255, 168, 0.12); flex: none; }
.fcp-top em i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulseDot 1.6s infinite; }
.fcp-main > small { font-size: 11px; color: var(--muted); }
.fcp-bar { position: relative; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-top: 4px; }
.fcp-bar i { position: absolute; inset: 0 auto 0 0; width: 38%; border-radius: 4px; background: var(--grad); box-shadow: 0 0 10px rgba(255, 79, 216, 0.7); animation: fcpProg 9s linear infinite; }
@keyframes fcpProg { from { width: 8%; } to { width: 100%; } }
.fcp-time { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }
.fcp-plats { display: flex; gap: 3px; }
.fcp-plats i { font-style: normal; height: 15px; min-width: 15px; padding: 0 4px; border-radius: 6px; display: grid; place-items: center;
  font-size: 8.5px; font-weight: 800; color: #fff; background: rgba(255, 255, 255, 0.1); }
.fcp-plats i:nth-child(1) { background: #ffcc00; color: #1a1300; } .fcp-plats i:nth-child(2) { background: #2787f5; } .fcp-plats i:nth-child(3) { background: #1db954; color: #04140a; }
.fcp-play { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff;
  background: var(--grad); box-shadow: 0 8px 20px -6px rgba(255, 79, 216, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.fcp-play svg { width: 14px; height: 14px; }

/* Гарантия под тарифами: спокойная строка по центру вместо зелёной полосы */
.lp-guarantee {
  width: max-content; max-width: 100%; margin: 22px auto 0; padding: 8px 16px 8px 12px; border-radius: 99px; gap: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--muted); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2);
}
.lp-guarantee svg { width: 16px; height: 16px; color: var(--v2); }

/* Слайды по высоте содержимого: без пустот сверху и снизу у коротких блоков */
@media (min-width: 861px) {
  .lp-slide { min-height: 0; display: block; padding: clamp(72px, 8vw, 112px) 0 0; scroll-snap-align: none; }
  html:has(.lp-ready) { scroll-snap-type: none; }
}

/* Плашка-плеер шире, название и подпись в одну строку */
.fc-player { width: 312px; }
.fcp-top b { overflow: visible; }
.fcp-main > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Верхнее меню гостя: все разделы, активный подсвечен */
.lp-nav nav a { position: relative; white-space: nowrap; }
.lp-nav nav a.is-on { color: #fff; background: rgba(124, 92, 255, 0.16); }
.lp-nav nav a.is-on::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 2px; height: 2px; border-radius: 2px; background: var(--grad); }
@media (max-width: 1240px) and (min-width: 961px) { .lp-nav nav a { padding: 8px 9px; font-size: 13px; } .lp-nav { gap: 14px; } }

/* Safari обрезает SVG с CSS-фильтром по его рамке: детали тонарма за пластинкой пропадали.
   Тени рисуются внутри SVG, CSS-фильтры у проигрывателя не используем. */
.tonearm, .vinyl-peek .tonearm, .vinyl-peek .plinth { filter: none !important; }
.vinyl-peek .plinth, .vinyl-peek .tonearm { overflow: visible; }

/* ==========================================================================
   Телефон: бургер-меню в логотипе, без липкой кнопки, низ страницы не чёрный
   ========================================================================== */

.lp-sticky { display: none !important; }
.lp-brand { background: none; border: 0; color: inherit; cursor: pointer; text-align: left; padding: 0; }
.lp-brand-mark { position: relative; display: inline-flex; }
.lp-burger { display: none; }
.lp-menu { display: none; }

@media (max-width: 960px) {
  .lp-burger {
    position: absolute; right: -5px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2.2px; background: var(--grad); box-shadow: 0 0 0 2px #0b0915, 0 4px 10px rgba(255, 79, 216, 0.6);
  }
  .lp-burger span { display: block; width: 9px; height: 1.6px; border-radius: 2px; background: #fff; transition: transform .3s var(--spring), opacity .2s; }
  .lp-nav.is-menu .lp-burger span:nth-child(1) { transform: translateY(3.8px) rotate(45deg); }
  .lp-nav.is-menu .lp-burger span:nth-child(2) { opacity: 0; }
  .lp-nav.is-menu .lp-burger span:nth-child(3) { transform: translateY(-3.8px) rotate(-45deg); }
  .lp-menu {
    display: flex; flex-direction: column; gap: 6px; position: absolute; left: 10px; right: 10px; top: calc(100% + 8px); padding: 10px;
    border-radius: 22px; background: rgba(17, 13, 32, 0.98); border: 1px solid var(--line-2); box-shadow: 0 30px 60px -16px rgba(0, 0, 0, 0.9);
    opacity: 0; transform: translateY(-10px) scale(.98); transform-origin: top center; pointer-events: none; transition: opacity .25s ease, transform .35s var(--ease);
  }
  .lp-nav.is-menu .lp-menu { opacity: 1; transform: none; pointer-events: auto; }
  .lp-menu a {
    display: flex; align-items: center; gap: 12px; padding: 14px 14px; border-radius: 14px; font-weight: 700; font-size: 16px; color: #ece8ff;
    background: rgba(255, 255, 255, 0.03); opacity: 0; transform: translateX(-12px); transition: opacity .3s ease, transform .4s var(--ease), background .2s;
    transition-delay: calc(var(--i) * 35ms);
  }
  .lp-menu a span { font: 800 11px var(--f-display); color: var(--v2); width: 22px; }
  .lp-menu a svg { width: 16px; height: 16px; margin-left: auto; color: var(--dim); }
  .lp-menu a:active { background: rgba(124, 92, 255, 0.18); }
  .lp-menu .btn { margin-top: 4px; opacity: 0; transform: translateY(8px); transition: opacity .3s ease .25s, transform .4s var(--ease) .25s; }
  .lp-nav.is-menu .lp-menu a, .lp-nav.is-menu .lp-menu .btn { opacity: 1; transform: none; }
  .app.is-guest .main { padding-bottom: calc(24px + var(--safe-b)); }
}

/* В конце страницы под панелью браузера — фиолетовое свечение, а не сплошной чёрный */
.lp-foot { position: relative; isolation: isolate; padding-bottom: calc(40px + var(--safe-b)); }
.lp-foot::after {
  content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; transform: translateX(-50%); top: -40px; bottom: calc(-140px - var(--safe-b)); pointer-events: none;
  background: radial-gradient(70% 70% at 50% 100%, rgba(124, 92, 255, 0.34), rgba(255, 79, 216, 0.12) 45%, transparent 75%);
}
@media (max-width: 1180px) {
  html { background: #07060d linear-gradient(180deg, #07060d 0%, #07060d 70%, #150a2b 92%, #24103d 100%) no-repeat; background-color: #07060d; }
}

/* ==========================================================================
   Мобильное меню на весь экран: раскрывается кругом от логотипа
   ========================================================================== */

@media (max-width: 960px) {
  html.lp-menu-open, html.lp-menu-open body { overflow: hidden; }
  .lp-nav { isolation: isolate; }
  .lp-menu {
    position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; gap: 0;
    padding: calc(84px + var(--safe-t)) 18px calc(22px + var(--safe-b)); border: 0; border-radius: 0; overflow-y: auto; overscroll-behavior: contain;
    background: radial-gradient(120% 70% at 0% 0%, #2a1453 0%, #120a26 45%, #07060d 100%);
    box-shadow: none; opacity: 1; transform: none; pointer-events: none;
    clip-path: circle(0px at 34px calc(34px + var(--safe-t))); transition: clip-path .6s cubic-bezier(.77, 0, .18, 1);
  }
  .lp-nav.is-menu .lp-menu { clip-path: circle(160% at 34px calc(34px + var(--safe-t))); pointer-events: auto; }
  .lp-menu-glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
  .lp-menu-glow--a { width: 90vw; height: 90vw; right: -40vw; top: 18%; background: radial-gradient(circle, rgba(255, 79, 216, 0.28), transparent 65%); }
  .lp-menu-glow--b { width: 80vw; height: 80vw; left: -30vw; bottom: -10%; background: radial-gradient(circle, rgba(62, 232, 255, 0.14), transparent 65%); }
  .lp-menu-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--v2); margin: 4px 4px 12px; opacity: 0; transition: opacity .4s ease .2s; }
  .lp-nav.is-menu .lp-menu-kicker { opacity: 1; }
  .lp-menu-list { display: flex; flex-direction: column; gap: 8px; }
  .lp-menu a {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 18px; color: #fff; font-size: 15px;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.07);
    opacity: 0; transform: translateX(-28px); transition: opacity .4s ease, transform .55s var(--ease), border-color .2s, background .2s;
    transition-delay: calc(.12s + var(--i) * 55ms);
  }
  .lp-menu a:active { transform: scale(.98); }
  .lp-menu a.is-on { border-color: rgba(255, 79, 216, 0.5); background: linear-gradient(120deg, rgba(124, 92, 255, 0.28), rgba(255, 79, 216, 0.12)); }
  .lp-menu-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; color: #fff;
    background: var(--grad); box-shadow: 0 10px 24px -10px rgba(255, 79, 216, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
  .lp-menu-ic svg { width: 21px; height: 21px; }
  .lp-menu-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .lp-menu-txt b { font: 700 17px/1.2 var(--f-display); letter-spacing: -0.01em; }
  .lp-menu-txt small { font-size: 12.5px; font-weight: 600; color: var(--muted); }
  .lp-menu-n { font: 800 12px var(--f-display); color: var(--dim); }
  .lp-menu a.is-on .lp-menu-n { color: #ff9be9; }
  .lp-menu a span:first-child + span { width: auto; }
  .lp-menu a svg { margin-left: 0; color: #fff; }
  .lp-menu-foot { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; align-items: stretch; gap: 14px;
    opacity: 0; transform: translateY(16px); transition: opacity .45s ease .45s, transform .6s var(--ease) .45s; }
  .lp-menu-foot small { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
  .lp-menu-eq { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 26px; }
  .lp-menu-eq i { width: 4px; border-radius: 3px; background: linear-gradient(0deg, #7c5cff, #ff4fd8); animation: plEq 1s ease-in-out infinite; animation-delay: var(--d); }
  .lp-nav.is-menu .lp-menu a, .lp-nav.is-menu .lp-menu-foot { opacity: 1; transform: none; }
  .lp-nav.is-menu { background: linear-gradient(180deg, #1d0f3c 0%, rgba(29, 15, 60, 0.94) 100%); border-color: rgba(255, 255, 255, 0.06); }
}

/* ==========================================================================
   Мобильное меню v3: минимализм — крупные названия списком, без карточек и иконок
   ========================================================================== */

@media (max-width: 960px) {
  .lp-menu {
    padding: calc(92px + var(--safe-t)) 24px calc(26px + var(--safe-b));
    background: radial-gradient(90% 50% at 0% 0%, rgba(124, 92, 255, 0.22), transparent 70%), #07060d;
  }
  .lp-menu-glow, .lp-menu-kicker, .lp-menu-ic, .lp-menu-txt small, .lp-menu-eq { display: none !important; }
  .lp-menu-list { gap: 0; }
  .lp-menu a {
    gap: 14px; align-items: baseline; padding: 15px 2px; border-radius: 0; background: none; border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07); transform: translateY(14px);
  }
  .lp-menu a.is-on { background: none; border-color: rgba(255, 255, 255, 0.07); }
  .lp-menu a:active { transform: none; opacity: .7; }
  .lp-menu-n { order: -1; width: 24px; font: 700 12px var(--f-text); color: var(--dim); letter-spacing: 0.04em; }
  .lp-menu-txt b { font: 700 26px/1.1 var(--f-display); letter-spacing: -0.03em; color: #f4f1ff; }
  .lp-menu a.is-on .lp-menu-txt b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .lp-menu a.is-on .lp-menu-n { color: #ff8ae2; }
  .lp-menu-foot { gap: 12px; }
  .lp-menu-foot small { letter-spacing: 0.18em; }
  .lp-nav.is-menu { background: #07060d; border-color: transparent; }
}
/* backdrop-filter у шапки делает её рамкой для fixed-меню — пока меню открыто, размытие выключаем */
@media (max-width: 960px) {
  .lp-nav.is-menu { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
/* Линия таймлайна строго по центру кружков (кружок: центр 26px, линия 2px → left 25px) */
@media (max-width: 860px) {
  .lp-flow::before, .lp-flow::after { left: 25px; }
}

/* ==========================================================================
   Обложка v4 «Горизонт»: полосатое солнце над неоновой сеткой, хромированное NOVA.
   Крупные простые формы — читается и на телефоне, где обложка шириной ~180px.
   ========================================================================== */
.hero-cover--v4 { background: #0a0518; --hz: 63%; }
.hc4-sky {
  position: absolute; left: 0; right: 0; top: 0; height: var(--hz); overflow: hidden; z-index: 1;
  background:
    radial-gradient(60% 55% at 50% 100%, rgba(255, 110, 170, 0.55), transparent 70%),
    linear-gradient(180deg, #06031a 0%, #170a3a 38%, #4a1272 72%, #b02c86 100%);
}
.hc4-sky .hc3-stars { bottom: 30%; }
.hc4-sun {
  position: absolute; z-index: 2; left: 50%; bottom: 0; width: 54%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, 50%);
  background: linear-gradient(180deg, #fff1a8 0%, #ffc164 22%, #ff7a6b 46%, #ff3fa4 68%, #b43cff 100%);
  -webkit-mask: linear-gradient(180deg, #000 0 44%, transparent 44% 47%, #000 47% 53%, transparent 53% 57%, #000 57% 62%, transparent 62% 67.5%, #000 67.5% 72%, transparent 72% 79%, #000 79%);
          mask: linear-gradient(180deg, #000 0 44%, transparent 44% 47%, #000 47% 53%, transparent 53% 57%, #000 57% 62%, transparent 62% 67.5%, #000 67.5% 72%, transparent 72% 79%, #000 79%);
  animation: hc4Sun 6s ease-in-out infinite;
}
@keyframes hc4Sun { 50% { transform: translate(-50%, 47%); filter: brightness(1.12); } }
.hc4-hills {
  position: absolute; z-index: 3; left: -2%; right: -2%; bottom: 0; height: 17%;
  background: linear-gradient(180deg, #3a0f5e, #1a0733);
  clip-path: polygon(0 100%, 0 62%, 9% 34%, 17% 58%, 26% 22%, 35% 64%, 41% 80%, 59% 80%, 66% 52%, 74% 18%, 83% 50%, 91% 30%, 100% 56%, 100% 100%);
}
.hc4-shoot {
  position: absolute; z-index: 2; left: 14%; top: 18%; width: 22%; height: 1.5px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, #fff); transform: rotate(-24deg);
  animation: hc4Shoot 7s ease-in infinite 1.2s;
}
.hc4-shoot--b { left: 58%; top: 10%; width: 16%; animation-delay: 4.6s; }
@keyframes hc4Shoot {
  0% { opacity: 0; transform: rotate(-24deg) translateX(-30%); }
  4% { opacity: 1; }
  12%, 100% { opacity: 0; transform: rotate(-24deg) translateX(120%); }
}
.hc4-floor {
  position: absolute; left: 0; right: 0; top: var(--hz); bottom: 0; overflow: hidden; z-index: 1;
  perspective: 80px; perspective-origin: 50% 0;
  background: linear-gradient(180deg, #2a0a4a 0%, #0c0520 70%);
}
.hc4-floor i {
  position: absolute; left: -70%; right: -70%; top: 0; height: 260%; transform-origin: 50% 0; transform: rotateX(58deg);
  background-image:
    linear-gradient(90deg, rgba(255, 92, 210, 0.85) 0 1.4px, transparent 1.4px),
    linear-gradient(180deg, rgba(255, 92, 210, 0.85) 0 1.4px, transparent 1.4px);
  background-size: 5% 100%, 100% 22px;
  animation: hc4Grid 1.1s linear infinite;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 14%);
          mask: linear-gradient(180deg, transparent 0, #000 14%);
}
@keyframes hc4Grid { to { background-position: 0 0, 0 22px; } }
.hc4-horizon {
  position: absolute; z-index: 3; left: 0; right: 0; top: var(--hz); height: 2px; transform: translateY(-1px);
  background: linear-gradient(90deg, transparent, #ffb3e6 20%, #fff 50%, #ffb3e6 80%, transparent);
  box-shadow: 0 0 12px 2px rgba(255, 79, 216, 0.8);
}
.hc4-top { left: 4%; right: 4%; top: 4%; display: flex; justify-content: space-between; }
.hc4-title {
  position: absolute; z-index: 5; left: 0; right: 0; top: 13.5%; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.hc4-title b {
  font: 800 clamp(30px, 5.2vw, 56px)/0.95 var(--f-display); letter-spacing: 0.14em; padding-left: 0.14em;
  background: linear-gradient(180deg, #ffffff 0%, #e9e2ff 44%, #8f6dff 50%, #ffd2f2 56%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(60, 10, 90, 0.9)) drop-shadow(0 0 16px rgba(255, 79, 216, 0.55));
}
.hc4-title small { font: 700 clamp(7.5px, 1.05vw, 11px) var(--f-text); letter-spacing: 0.62em; padding-left: 0.62em; color: #fff; text-shadow: 0 1px 6px rgba(20, 4, 40, 0.9); }
@media (max-width: 860px) {
  .hc4-title b { font-size: clamp(24px, 8vw, 40px); }
  .hc4-floor i { background-size: 6.5% 100%, 100% 16px; }
  @keyframes hc4Grid { to { background-position: 0 0, 0 16px; } }
}
@media (prefers-reduced-motion: reduce) { .hc4-floor i, .hc4-sun, .hc4-shoot { animation: none; } }

/* Обложка v4.1: хромированное NOVA в духе 80-х + неоновая подпись Records, отражение солнца, бороздки как у пластинки */
.hc4-title { top: 11%; gap: 0; }
.hc4-title b {
  font-style: italic; transform: skewX(-6deg); letter-spacing: 0.1em; padding-left: 0.1em;
  background: linear-gradient(180deg, #f4fbff 0%, #bfe3ff 30%, #ffffff 47%, #2b1446 50%, #6b2a7a 56%, #ff9ad5 78%, #ffe6b0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1.5px 0 #1a0630) drop-shadow(0 0 1px rgba(255, 255, 255, 0.6)) drop-shadow(0 6px 14px rgba(255, 79, 216, 0.5));
}
.hc4-title em {
  font: 400 clamp(26px, 4.6vw, 50px)/1 "Mr Dafoe", "Segoe Script", "Brush Script MT", cursive; font-style: normal;
  margin-top: -0.42em; margin-left: 28%; transform: rotate(-8deg); color: #fff;
  text-shadow: 0 0 2px #fff, 0 0 8px #ff4fd8, 0 0 18px #ff4fd8, 0 2px 3px rgba(20, 4, 40, 0.9);
  animation: hc4Neon 4.5s ease-in-out infinite;
}
@keyframes hc4Neon { 0%, 46%, 50%, 100% { opacity: 1; } 48% { opacity: .55; } }
.hc4-sun::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 3px, rgba(120, 20, 90, 0.18) 3px 4px);
}
.hc4-reflect {
  position: absolute; z-index: 0; left: 50%; top: 0; width: 60%; height: 55%; transform: translateX(-50%);
  background:
    repeating-linear-gradient(180deg, rgba(255, 150, 190, 0.5) 0 2px, transparent 2px 6px),
    radial-gradient(50% 100% at 50% 0, rgba(255, 120, 180, 0.65), transparent 75%);
  -webkit-mask: radial-gradient(50% 100% at 50% 0, #000 30%, transparent 75%);
          mask: radial-gradient(50% 100% at 50% 0, #000 30%, transparent 75%);
}
.hc4-floor i { z-index: 1; }
@media (max-width: 860px) {
  .hc4-title em { font-size: clamp(22px, 7.4vw, 36px); }
}

/* Пункты под текстом героя: своя иконка вместо одинаковых зелёных галочек */
.hero-trust li { gap: 8px; color: #e4ddff; }
.hero-trust svg { width: 18px; height: 18px; padding: 0; border-radius: 0; background: none; color: #c4a8ff; flex: none; }
.hero-trust li:nth-child(2) svg { color: #ff8fe0; }
.hero-trust li:nth-child(3) svg { color: #ffc27a; }
.hero-trust li:nth-child(4) svg { color: #8fd8ff; }

/* Серверный текст главной (для поисковиков и без JS); скрипты заменяют его лендингом */
.ssr { max-width: 760px; margin: 0 auto; padding: calc(40px + var(--safe-t, 0px)) 16px 60px; color: #cfc8ee; }
.ssr h1 { font: 700 clamp(26px, 4.4vw, 40px)/1.15 var(--f-display); letter-spacing: -0.03em; color: #fff; }
.ssr h2 { font: 700 22px/1.3 var(--f-display); color: #fff; margin-top: 34px; }
.ssr h3 { font-size: 17px; color: #fff; margin: 18px 0 4px; }
.ssr a { color: #ffb0ec; }
.boot + .ssr { margin-top: -40px; }

/* Ссылки на гайды в подвале лендинга */
.lp-foot .lp-foot-guides { flex-basis: 100%; order: 3; gap: 4px 16px; }
.lp-foot .lp-foot-guides a { color: var(--dim); font-weight: 600; font-size: 13px; }
.lp-foot .lp-foot-guides a:hover { color: #fff; }

/* Мини-плеер: обложка трека «Неоновые ночи» — ночной город под неоновой луной (SVG в разметке) */
.fcp-art { background: #0d0620; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 6px 16px -6px rgba(255, 79, 216, 0.6); }
.fcp-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Двойной скролл на широких экранах: overflow-x:hidden делал body отдельным контейнером прокрутки.
   clip обрезает по горизонтали, не создавая второй полосы — прокручивается только страница. */
body { overflow-x: clip; overflow-y: visible; }
/* Мини-плеер: прогресс ведёт JS, кнопка кликабельна, эквалайзер «Вышел» замирает на паузе */
.fcp-bar i { animation: none; width: 38%; transition: width .25s linear; }
.fcp-play { border: 0; padding: 0; cursor: pointer; font: inherit; transition: transform .2s var(--spring, ease), filter .2s; }
.fcp-play:hover { transform: scale(1.08); filter: brightness(1.1); }
.fcp-play:active { transform: scale(.94); }
.fcp-play svg { margin-left: 0; }
.fc-player:not(.is-playing) .fcp-top em i { animation-play-state: paused; opacity: .5; }

/* Большая обложка: вместо бегущего блика — искры, поднимающиеся от горизонта, и дышащий ореол солнца */
.hc4-sparks { position: absolute; inset: 0 0 37% 0; z-index: 4; pointer-events: none; overflow: hidden; }
.hc4-sparks i {
  position: absolute; left: var(--x); bottom: 0; width: var(--s); height: var(--s); border-radius: 50%;
  background: #ffe6f6; box-shadow: 0 0 6px 1px rgba(255, 120, 220, 0.9); opacity: 0;
  animation: hc4Spark var(--t) ease-out infinite; animation-delay: var(--d);
}
@keyframes hc4Spark {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: .8; }
  100% { transform: translate(10px, -150px) scale(.2); opacity: 0; }
}
.hc4-sparks i:nth-child(even) { animation-name: hc4Spark2; background: #d8f6ff; box-shadow: 0 0 6px 1px rgba(120, 220, 255, 0.85); }
@keyframes hc4Spark2 {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: .7; }
  100% { transform: translate(-12px, -130px) scale(.2); opacity: 0; }
}
.hc4-sky::after {
  content: ""; position: absolute; z-index: 1; left: 50%; bottom: 0; width: 90%; aspect-ratio: 2 / 1; transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 100%, rgba(255, 170, 120, 0.55), rgba(255, 79, 216, 0.25) 45%, transparent 72%);
  animation: hc4Halo 5s ease-in-out infinite;
}
@keyframes hc4Halo { 50% { opacity: .55; transform: translateX(-50%) scale(1.06); } }
.hc4-vignette { position: absolute; inset: 0; z-index: 5; pointer-events: none; box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.55); border-radius: inherit; }
@media (prefers-reduced-motion: reduce) { .hc4-sparks i, .hc4-sky::after { animation: none; } }

/* ==========================================================================
   Блок «ИИ-музыка»: Suno, Mureka, Lyria — карточки с живыми волнами, три шага, CTA в бота
   ========================================================================== */
.lp-ai { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-ai-card {
  position: relative; overflow: hidden; padding: 22px; border-radius: 22px; display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(160deg, hsla(var(--h), 90%, 60%, 0.16), rgba(16, 13, 30, 0.96) 55%);
  border: 1px solid hsla(var(--h), 90%, 70%, 0.28);
}
.lp-ai-card::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, hsla(var(--h), 95%, 65%, 0.35), transparent 70%); pointer-events: none;
}
.lp-ai-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lp-ai-logo { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(135deg, hsl(var(--h), 85%, 62%), hsl(calc(var(--h) + 40), 90%, 60%)); box-shadow: 0 8px 20px -8px hsla(var(--h), 90%, 60%, 0.9); }
.lp-ai-logo svg { width: 19px; height: 19px; }
.lp-ai-top b { font: 700 21px var(--f-display); letter-spacing: -0.03em; }
.lp-ai-top em { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; color: hsl(var(--h), 95%, 82%); background: hsla(var(--h), 90%, 60%, 0.16); }
.lp-ai-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.lp-ai-wave { margin-top: auto; height: 38px; display: flex; align-items: center; gap: 3px; }
.lp-ai-wave i { flex: 1; height: var(--v); border-radius: 3px; background: linear-gradient(180deg, hsl(var(--h), 95%, 75%), hsl(calc(var(--h) + 40), 90%, 60%));
  opacity: .85; transform-origin: center; animation: lpAiWave 1.3s ease-in-out infinite; animation-delay: var(--d); }
@keyframes lpAiWave { 50% { transform: scaleY(.35); opacity: .5; } }
.lp-ai-flow { list-style: none; counter-reset: aiflow; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-ai-flow li { counter-increment: aiflow; position: relative; padding: 16px 16px 16px 58px; border-radius: 18px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.lp-ai-flow li::before { content: counter(aiflow); position: absolute; left: 16px; top: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 800 13px var(--f-display); color: #fff; background: var(--grad); box-shadow: 0 6px 16px -6px rgba(255, 79, 216, 0.8); }
.lp-ai-flow b { font-size: 15px; }
.lp-ai-flow span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.lp-ai-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.lp-ai-soon { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #d9ccff; }
.lp-ai-soon i { width: 8px; height: 8px; border-radius: 50%; background: #ffb547; box-shadow: 0 0 10px #ffb547; animation: pulseDot 1.6s infinite; }
@media (max-width: 860px) {
  .lp-ai, .lp-ai-flow { grid-template-columns: 1fr; }
  .lp-ai-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .lp-ai-soon { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .lp-ai-wave i { animation: none; } }




/* Мобильный мини-плеер «Сейчас играет»: плашка под проигрывателем, заходит на низ обложки */
@media (max-width: 860px) {
  .login-art { flex-direction: column; align-items: center; }
  .login-art .float-card--a.fc-player {
    display: flex !important; position: relative; left: auto; right: auto; bottom: auto; top: auto;
    width: min(360px, 94%); margin: -22px auto 0; z-index: 6; padding: 9px 10px 9px 9px; gap: 11px; border-radius: 18px;
    animation: none; transform: none;
  }
  .login-art .fc-player .fcp-main > small { display: block; font-size: 11px; }
  .login-art .fc-player .fcp-top b { font-size: 13.5px; }
  .login-art .fc-player .fcp-art { width: 46px; height: 46px; }
  .login-art .fc-player .fcp-play { width: 38px; height: 38px; }
}

/* ==========================================================================
   Блок философии: компактная цитата + переключатель «Профи / Любителям» + живая переписка
   ========================================================================== */
.lp-why {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center; gap: clamp(22px, 4vw, 52px); padding: clamp(24px, 4vw, 44px); border-radius: 28px;
  background: radial-gradient(70% 90% at 100% 0%, rgba(255, 79, 216, 0.14), transparent 60%), linear-gradient(160deg, rgba(124, 92, 255, 0.12), rgba(14, 11, 26, 0.96) 55%);
  border: 1px solid rgba(167, 139, 250, 0.22);
}
.lp-why-quote { margin: 0; font: 800 clamp(22px, 2.7vw, 34px)/1.15 var(--f-display); letter-spacing: -0.035em; color: #fff; }
.lp-why-text { margin: 14px 0 0; max-width: 480px; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.lp-why-switch { margin-top: 22px; }
.lp-why-switch input { position: absolute; opacity: 0; pointer-events: none; }
.lp-why-tabs { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: rgba(8, 6, 16, 0.6); box-shadow: inset 0 0 0 1px var(--line-2); }
.lp-why-tabs label { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: 11px;
  font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer; transition: color .25s; white-space: nowrap; }
.lp-why-tabs label svg { width: 16px; height: 16px; }
.lp-why-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 11px; background: var(--grad);
  box-shadow: 0 8px 22px -8px rgba(255, 79, 216, 0.85); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
#lpWhyFun:checked ~ .lp-why-tabs .lp-why-pill { transform: translateX(100%); }
#lpWhyPro:checked ~ .lp-why-tabs label[for="lpWhyPro"], #lpWhyFun:checked ~ .lp-why-tabs label[for="lpWhyFun"] { color: #fff; }
#lpWhyPro:focus-visible ~ .lp-why-tabs label[for="lpWhyPro"], #lpWhyFun:focus-visible ~ .lp-why-tabs label[for="lpWhyFun"] { outline: 2px solid #ff8fe0; outline-offset: 2px; }
.lp-why-panes { position: relative; margin-top: 14px; min-height: 76px; }
.lp-why-pane { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; position: absolute; inset: 0 0 auto 0;
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .3s, transform .35s; }
.lp-why-pane li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #e4ddff; }
.lp-why-pane li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--grad); box-shadow: 0 0 8px rgba(255, 79, 216, 0.8); }
#lpWhyPro:checked ~ .lp-why-panes .lp-why-pane--pro, #lpWhyFun:checked ~ .lp-why-panes .lp-why-pane--fun { opacity: 1; transform: none; pointer-events: auto; }

/* Переписка: сценка проигрывается по кругу, 10 секунд */
.lp-why-chat { position: relative; max-width: 360px; justify-self: center; width: 100%; border-radius: 24px; overflow: hidden;
  background: linear-gradient(180deg, rgba(22, 17, 40, 0.98), rgba(12, 10, 22, 0.98)); border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 79, 216, 0.06); transform: rotate(1.5deg); }
.lpc-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.02); }
.lpc-ava { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 800 14px var(--f-display); color: #fff; background: linear-gradient(135deg, #3ec6ff, #7c5cff); }
.lpc-head b { display: block; font-size: 14px; }
.lpc-head small { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.lpc-head small i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.lpc-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 20px; min-height: 206px; }
.lpc-out { align-self: flex-end; }
.lpc-in { align-self: flex-start; }
.lpc-msg { position: relative; max-width: 82%; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.35; color: #fff; }
.lpc-msg.lpc-out { background: linear-gradient(135deg, #7c5cff, #c64fe6); border-bottom-right-radius: 5px; }
.lpc-msg.lpc-in { background: rgba(255, 255, 255, 0.08); border-bottom-left-radius: 5px; }
.lpc-card { display: flex; align-items: center; gap: 10px; width: 82%; padding: 8px; border-radius: 16px; border-bottom-right-radius: 5px;
  background: rgba(124, 92, 255, 0.18); border: 1px solid rgba(167, 139, 250, 0.3); }
.lpc-art { position: relative; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; flex: none; }
.lpc-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lpc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lpc-meta b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpc-meta small { font-size: 11.5px; color: #b6f0c9; }
.lpc-play { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #04140a; background: #1ed760; }
.lpc-play svg { width: 13px; height: 13px; }
.lpc-typing { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 16px; border-bottom-left-radius: 5px; background: rgba(255, 255, 255, 0.08); }
.lpc-typing i { width: 6px; height: 6px; border-radius: 50%; background: #cfc8ee; animation: lpcDot 1s ease-in-out infinite; }
.lpc-typing i:nth-child(2) { animation-delay: .15s; }
.lpc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes lpcDot { 50% { transform: translateY(-4px); opacity: .5; } }
.lpc-react { position: absolute; right: -8px; bottom: -10px; font-size: 14px; padding: 2px 5px; border-radius: 99px; background: #241c3d; border: 1px solid rgba(255, 255, 255, 0.12); }

/* Печатает → ответ: оба лежат в одной ячейке сетки, поэтому сообщения не прыгают */
.lpc-reply { display: grid; align-self: flex-start; max-width: 82%; }
.lpc-reply > * { grid-area: 1 / 1; align-self: start; justify-self: start; }
.lpc-reply .lpc-msg { max-width: none; }

.lpc-1, .lpc-2, .lpc-3, .lpc-4, .lpc-react { opacity: 0; }
.lp-why.is-in .lpc-1 { animation: lpcA 10s ease-out infinite; }
.lp-why.is-in .lpc-2 { animation: lpcB 10s ease-out infinite; }
.lp-why.is-in .lpc-3 { animation: lpcT 10s ease-out infinite; }
.lp-why.is-in .lpc-4 { animation: lpcC 10s ease-out infinite; }
.lp-why.is-in .lpc-react { animation: lpcR 10s ease-out infinite; }
@keyframes lpcA { 0%, 4% { opacity: 0; transform: translateY(10px) scale(.96); } 8%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes lpcB { 0%, 14% { opacity: 0; transform: translateY(10px) scale(.96); } 19%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes lpcT { 0%, 28% { opacity: 0; transform: translateY(8px); } 31%, 45% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; } }
@keyframes lpcC { 0%, 47% { opacity: 0; transform: translateY(10px) scale(.96); } 52%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes lpcR { 0%, 60% { opacity: 0; transform: scale(.2); } 64% { opacity: 1; transform: scale(1.25); } 67%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }

@media (max-width: 860px) {
  .lp-why { grid-template-columns: 1fr; }
  .lp-why-chat { transform: none; max-width: 400px; }
}
@media (max-width: 420px) {
  .lp-why-tabs { display: grid; width: 100%; }
  .lp-why-tabs label { padding: 9px 8px; font-size: 13px; }
  .lp-why-pane { grid-template-columns: 1fr; }
  .lp-why-panes { min-height: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .lpc-1, .lpc-2, .lpc-4, .lpc-react { opacity: 1 !important; animation: none !important; }
  .lpc-3 { display: none; }
}

/* Подвал: свечение больше не тянется ниже страницы (давало ~140px пустоты), отступ снизу меньше.
   Низ на iPhone закрывает фон html, поэтому продлевать свечение не нужно. */
.lp-foot { padding-bottom: calc(22px + var(--safe-b)); }
.lp-foot::after { bottom: 0; }

/* Обложка v4: в Safari 3D-сетка пола ломает скругление родителя — углы становились прозрачными.
   Маска и clip-path по тому же радиусу держат края ровными во всех браузерах. */
.hero-cover--v4 { --cr: 22px; border-radius: var(--cr); }
.hero-cover--v4 .hc4-sky { clip-path: inset(0 round var(--cr) var(--cr) 0 0); }
.hero-cover--v4 .hc4-floor {
  clip-path: inset(0 round 0 0 var(--cr) var(--cr));
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  transform: translateZ(0);
}
.hero-cover--v4 .hc4-sparks { clip-path: inset(0 round var(--cr) var(--cr) 0 0); }

/* ==========================================================================
   Кнопка «Наверх»: круг с кольцом прогресса прокрутки, появляется после первого экрана
   ========================================================================== */
.to-top {
  position: fixed; z-index: 60; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(22px + var(--safe-b, 0px));
  width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  display: grid; place-items: center; background: rgba(16, 12, 30, 0.92);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(167, 139, 250, 0.25), 0 8px 26px -10px rgba(255, 79, 216, 0.55);
  opacity: 0; transform: translateY(18px) scale(.8); pointer-events: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg.to-top-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top-ring circle { fill: none; stroke-width: 3; }
.to-top-ring .tt-bg { stroke: rgba(255, 255, 255, 0.08); }
.to-top-ring .tt-bar { stroke: url(#ttGrad); stroke-linecap: round; stroke-dasharray: 150.8; stroke-dashoffset: calc(150.8 - 150.8 * var(--p, 0)); transition: stroke-dashoffset .15s linear; }
.to-top-arrow { position: relative; width: 20px; height: 20px; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.to-top:hover { box-shadow: 0 18px 34px -12px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 143, 224, 0.5), 0 10px 32px -8px rgba(255, 79, 216, 0.8); }
.to-top:hover .to-top-arrow { transform: translateY(-3px); }
.to-top:active { transform: scale(.92); }
.to-top:focus-visible { outline: 2px solid #ff8fe0; outline-offset: 3px; }
.to-top.is-fly .to-top-arrow { animation: toTopFly .55s ease-in forwards; }
@keyframes toTopFly { 0% { transform: none; } 45% { transform: translateY(4px); } 100% { transform: translateY(-34px); opacity: 0; } }
html.lp-menu-open .to-top { opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .to-top { width: 46px; height: 46px; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(16px + var(--safe-b, 0px)); } }
@media (prefers-reduced-motion: reduce) { .to-top, .to-top-arrow, .to-top-ring .tt-bar { transition: none; } .to-top.is-fly .to-top-arrow { animation: none; } }

/* Низ на iPhone: тяжёлые тени нижних панелей (20px вниз, размытие 50px) уходили под адресную строку
   и давали тёмную полосу. Тени короткие и почти без смещения вниз — под строкой остаётся чистый фон. */
@media (max-width: 860px) {
  .tabbar { box-shadow: 0 -6px 22px -14px rgba(0, 0, 0, 0.7), 0 4px 14px -10px rgba(0, 0, 0, 0.55), inset 0 0 0 1px var(--line-2); }
  .wz-bar { box-shadow: 0 -6px 22px -14px rgba(0, 0, 0, 0.7), 0 4px 14px -10px rgba(0, 0, 0, 0.55); }
  .tab-fab { box-shadow: 0 6px 18px -6px rgba(255, 79, 216, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
  .to-top { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(167, 139, 250, 0.25), 0 4px 18px -8px rgba(255, 79, 216, 0.5); }
}

/* ==========================================================================
   Блок «Почему Nova Records»: шесть карточек-преимуществ, у роялти — крупная цифра
   ========================================================================== */
.lp-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-perk {
  position: relative; overflow: hidden; padding: 22px; border-radius: 22px; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(160deg, rgba(124, 92, 255, 0.1), rgba(16, 13, 30, 0.96) 60%); border: 1px solid var(--line);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), border-color .3s;
}
.lp-perk:hover { transform: translateY(-4px); border-color: rgba(255, 79, 216, 0.4); }
.lp-perk::after {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; border-radius: 2px; background: var(--grad);
  transform: scaleX(.18); transform-origin: left; transition: transform .5s ease;
}
.lp-perk:hover::after { transform: scaleX(1); }
.lp-perk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; }
.lp-perk-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #fff; flex: none;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.3); }
.lp-perk-ic svg { width: 20px; height: 20px; }
.lp-perk-big { font: 800 clamp(30px, 3.4vw, 40px)/1 var(--f-display); letter-spacing: -0.04em; }
.lp-perk-t { font: 700 18px/1.25 var(--f-display); letter-spacing: -0.02em; }
.lp-perk p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.lp-perk:nth-child(2) { background: radial-gradient(90% 80% at 100% 0%, rgba(255, 79, 216, 0.2), transparent 60%), linear-gradient(160deg, rgba(124, 92, 255, 0.14), rgba(16, 13, 30, 0.96) 60%); border-color: rgba(255, 79, 216, 0.3); }
.lp-perk:nth-child(2) .lp-perk-ic { background: var(--grad); box-shadow: 0 8px 22px -8px rgba(255, 79, 216, 0.8); }
@media (max-width: 960px) { .lp-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .lp-perks { grid-template-columns: 1fr; gap: 10px; }
  .lp-perk { padding: 18px; }
}

/* Иконка баланса: медиатор на струнах, нижняя струна мелко вибрирует */
.ic-strings .str-vib { animation: strVib 2.6s ease-in-out infinite; }
@keyframes strVib { 0%, 60%, 100% { transform: none; } 64% { transform: translateY(.7px); } 68% { transform: translateY(-.6px); } 72% { transform: translateY(.4px); } 76% { transform: translateY(-.2px); } }
@media (prefers-reduced-motion: reduce) { .ic-strings .str-vib { animation: none; } }

/* Иконка баланса — нейрон: ядро мягко пульсирует, как сигнал */
.ic-neuron { overflow: visible; }
.ic-neuron .neu-core { transform-box: fill-box; transform-origin: center; animation: neuPulse 2.4s ease-in-out infinite; }
@keyframes neuPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.82); } }
@media (prefers-reduced-motion: reduce) { .ic-neuron .neu-core { animation: none; } }
/* Нейрон: по аксону бежит импульс */
.ic-neuron .neu-axon { stroke-dasharray: 2.2 1.4; animation: neuAxon 1.6s linear infinite; }
@keyframes neuAxon { to { stroke-dashoffset: -7.2; } }
@media (prefers-reduced-motion: reduce) { .ic-neuron .neu-axon { animation: none; } }

/* ==========================================================================
   Кабинет на телефоне: в браузере — бургер в логотипе (как на главной), в Telegram — нижняя панель
   ========================================================================== */
.cab-brand { background: none; border: 0; color: inherit; cursor: pointer; text-align: left; padding: 0; font: inherit; display: inline-flex; align-items: center; }
.cab-brand-mark { position: relative; display: inline-flex; }
.cab-burger { display: none; }
.cab-menu { display: none; }

@media (max-width: 860px) {
  html:not(.in-tg) .cab-burger {
    position: absolute; right: -5px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2.2px; background: var(--grad); box-shadow: 0 0 0 2px #0b0915, 0 4px 10px rgba(255, 79, 216, 0.6);
  }
  .cab-burger span { display: block; width: 9px; height: 1.6px; border-radius: 2px; background: #fff; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .2s; }
  html.cab-menu-open .cab-burger span:nth-child(1) { transform: translateY(3.8px) rotate(45deg); }
  html.cab-menu-open .cab-burger span:nth-child(2) { opacity: 0; }
  html.cab-menu-open .cab-burger span:nth-child(3) { transform: translateY(-3.8px) rotate(-45deg); }

  /* Нижняя панель — только в Telegram; в браузере навигация в бургере */
  html:not(.in-tg) .tabbar { display: none; }
  html:not(.in-tg) .main { padding-bottom: calc(36px + var(--safe-b)); }
  html:not(.in-tg) .app.in-wizard .main { padding-bottom: calc(120px + var(--safe-b)); }

  html:not(.in-tg) .cab-menu {
    display: block; position: fixed; inset: 0; z-index: 29; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(76px + var(--safe-t)) 22px calc(22px + var(--safe-b));
    background: radial-gradient(90% 50% at 0% 0%, rgba(124, 92, 255, 0.22), transparent 70%), radial-gradient(70% 40% at 100% 100%, rgba(255, 79, 216, 0.12), transparent 70%), #07060d;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s ease, transform .35s ease, visibility 0s linear .35s;
  }
  html:not(.in-tg) .cab-menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .35s ease; }
  html.cab-menu-open:not(.in-tg) { overflow: hidden; }
  html.cab-menu-open:not(.in-tg) .topbar { background: #07060d; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 31; }
}
.cab-menu-in { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; min-height: 100%; }
.cab-menu-top { display: flex; gap: 10px; align-items: stretch; }
.cab-menu-bal { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; color: #fff;
  background: linear-gradient(120deg, rgba(124, 92, 255, 0.24), rgba(255, 79, 216, 0.12)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.cab-menu-bal i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); flex: none; }
.cab-menu-bal i svg { width: 18px; height: 18px; }
.cab-menu-bal b { display: block; font: 700 18px var(--f-display); letter-spacing: -0.02em; }
.cab-menu-bal small { font-size: 11.5px; color: var(--muted); }
.cab-menu-new { flex: none; border-radius: 18px; padding: 0 16px; }
.cab-menu-list { display: flex; flex-direction: column; }
.cab-menu-list a {
  display: flex; align-items: center; gap: 14px; padding: 13px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: #f4f1ff;
  opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.cab-menu.is-open .cab-menu-list a { opacity: 1; transform: none; transition-delay: calc(var(--i) * 35ms); }
.cab-menu-n { width: 24px; flex: none; font: 700 12px var(--f-text); color: var(--dim); }
.cab-menu-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cab-menu-txt b { font: 700 22px/1.1 var(--f-display); letter-spacing: -0.03em; }
.cab-menu-txt small { font-size: 12.5px; color: var(--muted); }
.cab-menu-list a.is-on .cab-menu-txt b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cab-menu-list a.is-on .cab-menu-n { color: #ff8fe0; }
.cab-menu-count { font-style: normal; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 99px; display: grid; place-items: center;
  font: 700 12px var(--f-text); background: rgba(255, 255, 255, 0.1); color: #fff; }
.cab-menu-count.is-hot { background: var(--grad); box-shadow: 0 0 14px rgba(255, 79, 216, 0.6); }
.cab-menu-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.cab-menu-user { display: flex; align-items: center; gap: 10px; color: #fff; }
.cab-menu-user b { display: block; font-size: 14.5px; }
.cab-menu-user small { font-size: 12px; color: var(--muted); }

/* ==========================================================================
   Нижняя панель (Telegram на телефоне): активная вкладка — светящаяся «таблетка», кнопка «+» аккуратнее
   ========================================================================== */
@media (max-width: 860px) {
  .tab { gap: 3px; padding: 6px 0 7px; }
  .tab::before {
    content: ""; position: absolute; top: 4px; left: 50%; width: 50px; height: 30px; margin-left: -25px; border-radius: 13px;
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.42), rgba(255, 79, 216, 0.28)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    opacity: 0; transform: scale(.6); transition: opacity .25s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
  }
  .tab svg { position: relative; z-index: 1; width: 22px; height: 22px; margin-top: 4px; }
  .tab span { position: relative; z-index: 1; }
  .tab.is-active::before { opacity: 1; transform: none; }
  .tab.is-active::after { display: none; }
  .tab.is-active svg { transform: none; color: #fff; filter: none; }
  .tab.is-active span { color: #fff; }
  .tab:active svg { transform: scale(.88); }
  .tab-fab { width: 56px; height: 56px; margin-top: -26px; border-radius: 20px; }
  .tab-fab::before { inset: -5px; border-radius: 24px; border-width: 1px; }
  .tab-fab::after { content: ""; position: absolute; inset: 1px; border-radius: 19px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 45%); pointer-events: none; }
  .tab-dot { top: 6px !important; right: calc(50% - 20px) !important; z-index: 2; }
}

/* Монета баланса: подложка-кружок не нужна, у монеты свой цвет; лёгкое свечение и редкий отблеск */
.coin-wrap { background: none !important; box-shadow: none !important; padding: 0 !important; overflow: visible; }
.coin { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 6px rgba(255, 79, 216, 0.45)); }
.coin-shine { animation: coinShine 4.8s ease-in-out infinite; }
@keyframes coinShine { 0%, 62% { transform: translateX(0); } 84%, 100% { transform: translateX(52px); } }
.bal-chip i.coin-wrap { width: 28px; height: 28px; }
.cab-menu-bal i.coin-wrap { width: 36px; height: 36px; }
.balance-label .coin { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; margin-right: 6px; filter: none; }
.sd-coin.coin-wrap .coin { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .coin-shine { animation: none; } }

/* Требует внимания (главная кабинета): карточка в стиле сайта — обложка с выглядывающей пластинкой,
   название и статус как в списке релизов, комментарий модератора обычным текстом */
.attn { display: flex; flex-direction: column; gap: 10px; }
.attn2 {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 14px 16px 14px 14px; border-radius: var(--r); color: var(--text); background: var(--card); border: 1px solid var(--line);
  transition: border-color .25s, transform .25s;
}
.attn2:hover { border-color: var(--line-2); }
.attn2-art { position: relative; width: 74px; height: 56px; flex: none; }
.attn2-vinyl {
  position: absolute; left: 18px; top: 3px; width: 50px; height: 50px; border-radius: 50%;
  background: radial-gradient(circle, #ff4fd8 0 15%, #111 16% 19%, transparent 20%), repeating-radial-gradient(circle, #0b0a10 0 1px, #1d1928 1.3px 2.3px);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.05); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.attn2:hover .attn2-vinyl { transform: translateX(8px) rotate(40deg); }
.attn2-cover { position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  background: #1a1530; color: var(--dim); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.attn2-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attn2-cover svg { width: 24px; height: 24px; }
.attn2-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.attn2-top { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.attn2-top b { font: 700 16px/1.2 var(--f-display); letter-spacing: -0.02em; }
.attn2-note { font-size: 14px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.attn2-note span { color: var(--text); font-weight: 600; }
.attn2-btn { white-space: nowrap; }
@media (max-width: 560px) {
  .attn2 { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px; }
  .attn2-art { width: 64px; height: 50px; }
  .attn2-cover { width: 50px; height: 50px; }
  .attn2-vinyl { left: 16px; width: 44px; height: 44px; }
  .attn2-btn { grid-column: 1 / -1; width: 100%; }
}

/* ==========================================================================
   Первый экран кабинета: конверт с обложкой, из него выезжает пластинка, вокруг — площадки
   ========================================================================== */
.dh-stage { position: relative; width: min(340px, 100%); height: 250px; justify-self: center; }
.dh-sleeve { position: absolute; z-index: 2; left: 0; top: 22px; width: 200px; height: 200px; border-radius: 18px; transform: rotate(-4deg);
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.dh-sleeve .sleeve-cover { border-radius: 18px; }
.dh-own img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dh-vinyl { position: absolute; z-index: 1; left: 82px; top: 30px; width: 186px; height: 186px; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 17%, #0d0b14 17.5%), repeating-radial-gradient(circle, #0a0910 0 1.2px, #1c1828 1.6px 2.8px);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  animation: spin 6s linear infinite; }
.dh-vinyl::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 30deg, transparent 0 12%, rgba(255, 255, 255, 0.12) 16%, transparent 22% 62%, rgba(255, 255, 255, 0.08) 66%, transparent 72%); }
.dh-vinyl i { position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #0d0b14 0 9%, transparent 10%), linear-gradient(135deg, #9a7bff, #ff4fd8 60%, #ffb547); }
.dh-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 99px; white-space: nowrap;
  font: 700 12px var(--f-text); color: #fff; background: rgba(20, 16, 38, 0.92); border: 1px solid var(--line-2);
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.9); animation: dhFloat 5s ease-in-out infinite; }
.dh-chip i { width: 8px; height: 8px; border-radius: 50%; }
.dh-chip--0 { right: 0; top: 4px; } .dh-chip--0 i { background: #ffcc00; box-shadow: 0 0 8px #ffcc00; }
.dh-chip--1 { right: -6px; top: 92px; animation-delay: -1.3s; } .dh-chip--1 i { background: #2787f5; box-shadow: 0 0 8px #2787f5; }
.dh-chip--2 { right: 18px; bottom: 6px; animation-delay: -2.6s; } .dh-chip--2 i { background: #1ed760; box-shadow: 0 0 8px #1ed760; }
.dh-chip--3 { left: 6px; bottom: -6px; animation-delay: -3.9s; } .dh-chip--3 i { background: #fa57c1; box-shadow: 0 0 8px #fa57c1; }
@keyframes dhFloat { 50% { transform: translateY(-6px); } }
.dh-prices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.dh-price { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.dh-price small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.dh-price b { display: inline-flex; align-items: center; gap: 6px; font: 700 16px var(--f-display); letter-spacing: -0.02em; }
.dh-price b svg { width: 16px; height: 16px; color: #ff8fe0; }
@media (prefers-reduced-motion: reduce) { .dh-vinyl, .dh-chip { animation: none; } }

/* Демо-режим админа: плавающая плашка сверху, чтобы не перепутать тестовые данные с настоящими */
.demo-banner {
  position: fixed; z-index: 70; left: 50%; top: calc(12px + var(--safe-t, 0px)); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 12px; padding: 7px 8px 7px 14px; border-radius: 99px; white-space: nowrap;
  font-size: 13px; color: #fff; background: rgba(20, 16, 38, 0.95); border: 1px solid rgba(255, 79, 216, 0.45);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.9), 0 0 24px -8px rgba(255, 79, 216, 0.6);
}
.demo-banner span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.demo-banner b { color: #fff; }
.demo-banner i { width: 8px; height: 8px; border-radius: 50%; background: #ff4fd8; box-shadow: 0 0 10px #ff4fd8; animation: pulseDot 1.6s infinite; }
.demo-banner button { border: 0; cursor: pointer; padding: 6px 12px; border-radius: 99px; font: 700 12.5px var(--f-text); color: #fff; background: rgba(255, 255, 255, 0.1); }
.demo-banner button:hover { background: rgba(255, 255, 255, 0.18); }
@media (max-width: 860px) {
  .demo-banner { top: calc(70px + var(--safe-t, 0px)); font-size: 12px; max-width: calc(100vw - 24px); }
  .demo-banner span { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 420px) { .demo-banner span { max-width: 52vw; } }
.demo-card .card-head { align-items: center; }

/* ==========================================================================
   Студия ИИ: генерация музыки Suno, Mureka, Lyria
   ========================================================================== */
.studio { max-width: 1240px; }
.st-hero {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px;
  padding: clamp(24px, 4vw, 40px); border-radius: 30px; margin-bottom: 18px;
  background: radial-gradient(80% 120% at 0% 0%, rgba(124, 92, 255, 0.28), transparent 60%), radial-gradient(60% 100% at 100% 100%, rgba(255, 79, 216, 0.18), transparent 60%), var(--card);
  border: 1px solid rgba(167, 139, 250, 0.25);
}
.st-hero-bg { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 62%; display: flex; align-items: flex-end; gap: 3px; padding: 0 18px; opacity: .35;
  -webkit-mask: linear-gradient(180deg, transparent, #000 70%); mask: linear-gradient(180deg, transparent, #000 70%); }
.st-hero-bg i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #ff6ae2, #7c5cff);
  transform-origin: bottom; animation: stWave 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -0.07s); }
@keyframes stWave { 50% { transform: scaleY(.4); } }
.st-title { margin: 8px 0 0; font: 800 clamp(30px, 4.4vw, 52px)/1.05 var(--f-display); letter-spacing: -0.04em; }
.st-hero .sub { max-width: 620px; margin-top: 12px; }
.st-bal { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 99px; color: #fff; align-self: start;
  background: rgba(10, 8, 20, 0.6); border: 1px solid var(--line-2); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.9); }
.st-bal i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); }
.st-bal i svg { width: 19px; height: 19px; }
.st-bal b { display: block; font: 700 18px var(--f-display); letter-spacing: -0.02em; line-height: 1.1; }
.st-bal small { font-size: 11.5px; color: var(--muted); }
.st-off { grid-column: 1 / -1; margin: 0; }

.st-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 18px; align-items: start; }
.st-history { position: sticky; top: 18px; }

/* Модели */
.st-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.st-model {
  position: relative; overflow: hidden; text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 20px; cursor: pointer;
  color: var(--text); font: inherit; background: var(--card); border: 1px solid var(--line); transition: border-color .25s, transform .25s, box-shadow .25s;
}
.st-model::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .3s;
  background: radial-gradient(90% 90% at 100% 0%, hsla(var(--h), 95%, 62%, 0.28), transparent 65%); }
.st-model > * { position: relative; z-index: 1; }
.st-model:hover { transform: translateY(-2px); border-color: var(--line-2); }
.st-model.is-on { border-color: hsla(var(--h), 95%, 70%, 0.65); box-shadow: 0 16px 34px -18px hsla(var(--h), 95%, 55%, 0.8), inset 0 0 0 1px hsla(var(--h), 95%, 70%, 0.25); }
.st-model.is-on::before { opacity: 1; }
.st-model-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.st-model-top b { font: 700 20px var(--f-display); letter-spacing: -0.03em; }
.st-model-top em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; color: hsl(var(--h), 95%, 80%); white-space: nowrap; }
.st-model-txt { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.st-model-price { display: inline-flex; align-items: center; gap: 5px; font: 700 14px var(--f-display); margin-top: auto; }
.st-model-price i { width: 16px; height: 16px; color: hsl(var(--h), 95%, 78%); display: inline-grid; }
.st-model-price i svg { width: 16px; height: 16px; }
.st-model-price small { font: 600 12px var(--f-text); color: var(--muted); }
.st-model-eq { position: absolute; right: 14px; bottom: 16px; display: flex; align-items: flex-end; gap: 2px; height: 16px; opacity: 0; transition: opacity .3s; }
.st-model-eq i { width: 3px; border-radius: 2px; background: hsl(var(--h), 95%, 72%); animation: plEq 0.9s ease-in-out infinite; }
.st-model-eq i:nth-child(1) { height: 60%; } .st-model-eq i:nth-child(2) { height: 100%; animation-delay: -.3s; } .st-model-eq i:nth-child(3) { height: 45%; animation-delay: -.6s; } .st-model-eq i:nth-child(4) { height: 80%; animation-delay: -.15s; }
.st-model.is-on .st-model-eq { opacity: 1; }

/* Карточка конструктора */
.st-card { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.st-modes { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 16px; background: rgba(8, 6, 16, 0.6); box-shadow: inset 0 0 0 1px var(--line-2); }
.st-modes-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 12px; background: var(--grad);
  box-shadow: 0 8px 22px -8px rgba(255, 79, 216, 0.85); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.st-modes button { position: relative; z-index: 1; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 10px 8px; border-radius: 12px;
  font: 700 14px var(--f-text); display: flex; flex-direction: column; align-items: center; gap: 1px; transition: color .25s; }
.st-modes button small { font-size: 11px; font-weight: 600; opacity: .75; }
.st-modes button.is-on { color: #fff; }
.st-field { display: flex; flex-direction: column; gap: 8px; }
.st-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.st-field-head b { font-size: 14.5px; }
.st-count { font-size: 11.5px; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }
.st-count.is-over { color: #ff7b93; }
.st-area { resize: vertical; min-height: 110px; line-height: 1.5; }
.st-lyrics { min-height: 220px; font-family: var(--f-text); }
.st-ideas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.st-ideas button { border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--muted); border-radius: 99px; padding: 6px 11px; cursor: pointer;
  font: 600 12.5px var(--f-text); transition: color .2s, border-color .2s, background .2s; }
.st-ideas button:hover { color: #fff; border-color: rgba(255, 79, 216, 0.45); background: rgba(255, 79, 216, 0.08); }
.st-ideas .st-dice { color: #fff; background: linear-gradient(120deg, rgba(124, 92, 255, 0.35), rgba(255, 79, 216, 0.25)); border-color: rgba(167, 139, 250, 0.4); }
.st-hint { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.st-hint svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #b9a4ff; }
.st-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.st-row .label { margin: 0; }
.st-two { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 14px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-chip { border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--muted); border-radius: 12px; padding: 8px 12px; cursor: pointer;
  font: 700 13px var(--f-text); transition: all .2s; }
.st-chip:hover { color: #fff; border-color: var(--line-2); }
.st-chip.is-on { color: #fff; border-color: transparent; background: linear-gradient(120deg, rgba(124, 92, 255, 0.55), rgba(255, 79, 216, 0.4)); box-shadow: 0 6px 16px -8px rgba(255, 79, 216, 0.8); }
.st-chip--sm { padding: 6px 10px; font-size: 12px; border-radius: 10px; }
.st-style-chips { margin-top: -6px; }
.st-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.st-tags button { border: 1px dashed rgba(167, 139, 250, 0.45); background: rgba(124, 92, 255, 0.08); color: #d6caff; border-radius: 8px; padding: 4px 9px; cursor: pointer; font: 700 11.5px var(--f-text); }
.st-tags button:hover { background: rgba(124, 92, 255, 0.2); color: #fff; }
.st-seg { display: inline-grid; grid-auto-flow: column; padding: 3px; border-radius: 12px; background: rgba(8, 6, 16, 0.6); box-shadow: inset 0 0 0 1px var(--line-2); }
.st-seg button { border: 0; background: none; color: var(--muted); padding: 7px 12px; border-radius: 9px; cursor: pointer; font: 700 13px var(--f-text); }
.st-seg button.is-on { color: #fff; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.st-more { border-radius: 16px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); }
.st-more summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font-weight: 700; font-size: 14px; }
.st-more summary::-webkit-details-marker { display: none; }
.st-more summary svg { width: 16px; height: 16px; color: #ff8fe0; }
.st-more summary small { margin-left: auto; font-weight: 600; font-size: 11.5px; color: var(--dim); }
.st-more[open] summary { border-bottom: 1px solid var(--line); }
.st-more > .input, .st-more > .st-adv { margin: 12px 14px 14px; width: calc(100% - 28px); }
.st-adv { display: flex; flex-direction: column; gap: 16px; }
.st-adv .st-more { background: none; }
.st-slider { display: flex; flex-direction: column; gap: 6px; }
.st-slider span { display: flex; justify-content: space-between; font-size: 13.5px; }
.st-slider em { font-style: normal; font-weight: 800; color: #ffb0ec; font-variant-numeric: tabular-nums; }
.st-slider small { font-size: 11.5px; color: var(--dim); }
.st-slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); outline: none; }
.st-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 79, 216, 0.45), 0 4px 12px rgba(0, 0, 0, 0.6); cursor: pointer; }
.st-slider input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 79, 216, 0.45); cursor: pointer; }
.st-variety { display: flex; gap: 6px; margin-top: 8px; }
.st-variety button { flex: 1; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.03); cursor: pointer; display: grid; place-items: center; }
.st-variety button i { width: calc(6px + var(--k) * 5px); height: calc(6px + var(--k) * 3px); border-radius: 3px; background: var(--dim); transition: background .2s; }
.st-variety button.is-on { border-color: transparent; background: linear-gradient(120deg, rgba(124, 92, 255, 0.5), rgba(255, 79, 216, 0.35)); }
.st-variety button.is-on i { background: #fff; }
.st-variety-txt { display: block; margin-top: 6px; font-size: 12px; color: #d9ccff; font-weight: 700; }
.st-sub { font-size: 12px; color: var(--dim); }

/* Референсы */
.st-refs { display: flex; flex-wrap: wrap; gap: 8px; }
.st-ref, .st-ref-add { position: relative; width: 74px; height: 74px; border-radius: 14px; overflow: hidden; flex: none; }
.st-ref { background: #1a1530 center/cover no-repeat; border: 1px solid var(--line-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; }
.st-ref i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; }
.st-ref i svg { width: 13px; height: 13px; }
.st-ref small { font-size: 9.5px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-ref > button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: rgba(10, 8, 20, 0.8); color: #fff; }
.st-ref > button svg { width: 12px; height: 12px; }
.st-ref-bar { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.5); overflow: hidden; }
.st-ref-bar b { display: block; height: 100%; background: var(--grad); transition: width .2s; }
.st-ref-add { border: 1.5px dashed rgba(167, 139, 250, 0.45); background: rgba(124, 92, 255, 0.06); color: #d6caff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 700 11.5px var(--f-text); }
.st-ref-add svg { width: 20px; height: 20px; }
.st-ref-add:hover { background: rgba(124, 92, 255, 0.14); }

/* Низ: количество, цена, кнопка */
.st-foot { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.st-qty, .st-sum { display: flex; flex-direction: column; gap: 4px; }
.st-qty small, .st-sum small { font-size: 11.5px; color: var(--dim); }
.st-sum span { font-size: 12px; color: var(--muted); font-weight: 700; }
.st-sum b { display: inline-flex; align-items: center; gap: 6px; font: 800 24px var(--f-display); letter-spacing: -0.03em; }
.st-sum b i { width: 20px; height: 20px; display: inline-grid; color: #ff8fe0; }
.st-sum b i svg { width: 20px; height: 20px; }
.st-stepper { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(8, 6, 16, 0.6); box-shadow: inset 0 0 0 1px var(--line-2); }
.st-stepper button { width: 32px; height: 32px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, 0.06); color: #fff; font: 700 18px var(--f-text); cursor: pointer; line-height: 1; }
.st-stepper button:disabled { opacity: .35; cursor: default; }
.st-stepper b { min-width: 26px; text-align: center; font: 700 16px var(--f-display); }
.st-go { justify-self: end; min-width: 200px; position: relative; overflow: hidden; }
.st-go::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: stShine 3.2s ease-in-out infinite; }
@keyframes stShine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
.st-go:disabled::after { display: none; }

/* История */
.st-history .h2 { margin: 0; }
.st-hist-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.st-filter { display: inline-flex; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(8, 6, 16, 0.6); box-shadow: inset 0 0 0 1px var(--line-2); }
.st-filter button { border: 0; background: none; color: var(--muted); padding: 6px 11px; border-radius: 9px; cursor: pointer; font: 700 12.5px var(--f-text); white-space: nowrap; }
.st-filter button.is-on { color: #fff; background: rgba(255, 255, 255, 0.12); }
.st-list { display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.st-item { padding: 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.st-item-head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.st-badge { font-weight: 800; font-size: 11.5px; padding: 3px 9px; border-radius: 99px; color: hsl(var(--h), 95%, 85%); background: hsla(var(--h), 90%, 60%, 0.16); }
.st-meta { color: var(--muted); font-weight: 600; }
.st-time { margin-left: auto; color: var(--dim); font-weight: 600; white-space: nowrap; }
.st-prompt { margin: 0; font-size: 13px; color: #d9d2fb; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-work { display: flex; align-items: center; gap: 12px; }
.st-work-eq { display: flex; align-items: center; gap: 3px; height: 30px; }
.st-work-eq i { width: 4px; height: 100%; border-radius: 3px; background: linear-gradient(180deg, #ff6ae2, #7c5cff); animation: stWorkEq 1s ease-in-out infinite; animation-delay: var(--d); }
@keyframes stWorkEq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.st-work-txt { display: flex; flex-direction: column; }
.st-work-txt b { font-size: 14px; }
.st-work-txt small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.st-work-bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); overflow: hidden; position: relative; }
.st-work-bar i { position: absolute; top: 0; bottom: 0; width: 35%; border-radius: 4px; background: var(--grad); animation: stIndet 1.6s ease-in-out infinite; }
@keyframes stIndet { 0% { left: -35%; } 100% { left: 100%; } }
.st-item.is-work { border-color: rgba(167, 139, 250, 0.32); }
.st-fail { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 92, 122, 0.07); border: 1px solid rgba(255, 92, 122, 0.2); }
.st-fail b { font-size: 13.5px; color: #ffb3c1; }
.st-fail span { font-size: 13px; color: var(--muted); }
.st-fail em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--green); }
.st-fail em svg { width: 14px; height: 14px; }
.st-item.is-fail > .btn { align-self: flex-start; }
.st-tracks { display: flex; flex-direction: column; gap: 8px; }
.st-track { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; background: rgba(255, 255, 255, 0.025); border: 1px solid transparent; transition: border-color .2s, background .2s; }
.st-track.is-playing { border-color: rgba(255, 79, 216, 0.4); background: rgba(255, 79, 216, 0.06); }
.st-cover { position: relative; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; flex: none;
  background: linear-gradient(135deg, #3a1d6e, #b03fa8) center/cover no-repeat; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.9); }
.st-play { position: absolute; inset: 0; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: rgba(8, 6, 16, 0.32); transition: background .2s; }
.st-play:hover { background: rgba(8, 6, 16, 0.55); }
.st-play svg { width: 20px; height: 20px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7)); }
.st-play .st-pause { display: none; }
.st-track.is-playing .st-play > svg { display: none; }
.st-track.is-playing .st-play .st-pause { display: grid; }
.st-play:disabled { cursor: default; opacity: .6; }
.st-track-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-track-main b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-track-main small { font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-track-act { display: flex; align-items: center; gap: 6px; }
.st-icon-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.st-icon-btn:hover { color: #fff; border-color: var(--line-2); }
.st-icon-btn svg { width: 16px; height: 16px; }
.st-release svg { width: 15px; height: 15px; }
.st-lyr { grid-column: 1 / -1; margin: 2px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(8, 6, 16, 0.55); white-space: pre-wrap; font: 500 13px/1.55 var(--f-text); color: #e4ddff; max-height: 260px; overflow: auto; }
.st-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 38px 18px; border-radius: 22px; border: 1px dashed var(--line-2); }
.st-empty b { font-size: 15px; }
.st-empty p { margin: 0; font-size: 13px; color: var(--muted); max-width: 300px; }
.st-empty-disc { width: 84px; height: 84px; border-radius: 50%; margin-bottom: 8px; position: relative; animation: spin 7s linear infinite;
  background: radial-gradient(circle, transparent 0 17%, #0d0b14 17.5%), repeating-radial-gradient(circle, #0a0910 0 1.2px, #1c1828 1.6px 2.8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.st-empty-disc i { position: absolute; left: 50%; top: 50%; width: 32%; height: 32%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--grad); }

@media (max-width: 1320px) { .st-grid { grid-template-columns: 1fr; } .st-history { position: static; } .st-list { max-height: none; overflow: visible; } }
.st-model-top { flex-wrap: wrap; row-gap: 2px; }
@media (max-width: 720px) {
  .st-hero { grid-template-columns: 1fr; padding: 22px 18px; border-radius: 24px; }
  .st-bal { justify-self: start; }
  .st-models { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .st-model { padding: 12px 10px; gap: 6px; border-radius: 16px; align-items: center; text-align: center; }
  .st-model-top { justify-content: center; }
  .st-model-top b { font-size: 16px; }
  .st-model-top em, .st-model-txt, .st-model-eq { display: none; }
  .st-model-price { margin-top: 0; font-size: 13px; }
  .st-model-price small { display: none; }
  .st-model-note { display: block !important; }
  .st-card { padding: 16px; }
  .st-foot { grid-template-columns: 1fr 1fr; }
  .st-go { grid-column: 1 / -1; justify-self: stretch; width: 100%; }
  .st-two { grid-template-columns: 1fr; }
  .st-track { grid-template-columns: auto minmax(0, 1fr); }
  .st-track-act { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .st-hero-bg i, .st-work-eq i, .st-work-bar i, .st-go::after, .st-empty-disc, .st-model-eq i { animation: none; } }

/* Описание выбранной модели — одной строкой под карточками (на телефоне карточки компактные) */
.st-model-note { display: none; margin: -4px 2px 12px; font-size: 12.5px; color: var(--muted); }
.st-model-note b { color: #fff; }

/* Оптическое выравнивание несимметричных значков во всех кнопках сайта:
   треугольник «play» визуально тяжелее слева — сдвиг вправо, самолётик «отправить» — влево и вниз */
.ic-play { transform: translateX(8%); }
.ic-send { transform: translate(-6%, 6%); }

/* Мозг на балансе крупнее: в карточке баланса — в своём кружке, в шапке и меню — почти во весь кружок */
.balance-label { gap: 9px; }
.balance-label svg.ic-brain { width: 26px; height: 26px; padding: 4px; border-radius: 50%; color: #fff; background: var(--grad);
  box-shadow: 0 6px 14px -6px rgba(255, 79, 216, 0.8); stroke-width: 2; }
.bal-chip i svg.ic-brain { width: 21px; height: 21px; stroke-width: 2; }
.cab-menu-bal i svg.ic-brain { width: 24px; height: 24px; }
.sd-coin svg.ic-brain { width: 24px; height: 24px; stroke-width: 2; }
.st-bal i svg.ic-brain { width: 25px; height: 25px; }
.st-model-price i svg.ic-brain, .st-sum b i svg.ic-brain { width: 20px; height: 20px; }
.dh-price b svg.ic-brain { width: 19px; height: 19px; }

/* Аватар: буква-подложка, фото поверх (если загрузилось) */
.avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* ── Студия: детали ─────────────────────────────────────────────────── */
/* Подсветка за курсором на карточках моделей и конструкторе */
.st-model[data-spot]::after, .st-card[data-spot]::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s;
  background: radial-gradient(240px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, 0.07), transparent 60%);
}
.st-model:hover::after, .st-card:hover::after { opacity: 1; }
.st-card { position: relative; }
.st-card > * { position: relative; z-index: 1; }
/* Значок модели */
.st-model-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(135deg, hsl(var(--h), 85%, 62%), hsl(calc(var(--h) + 45), 90%, 58%)); box-shadow: 0 8px 18px -8px hsla(var(--h), 90%, 55%, 0.9);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.st-model-ico svg { width: 20px; height: 20px; }
.st-model.is-on .st-model-ico { transform: rotate(-8deg) scale(1.06); }
/* Рецепт трека */
.st-recipe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: -4px; }
.st-recipe span { font-size: 12px; font-weight: 700; color: #e4ddff; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.st-recipe span:first-child { color: #fff; background: linear-gradient(120deg, rgba(124, 92, 255, 0.4), rgba(255, 79, 216, 0.28)); border-color: transparent; }
.st-recipe kbd { margin-left: auto; font: 700 11px var(--f-text); color: var(--dim); padding: 3px 7px; border-radius: 7px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, 0.3); }
@media (hover: none) { .st-recipe kbd { display: none; } }
/* Кубик идеи */
.st-dice.is-roll { animation: stRoll .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes stRoll { 0% { transform: rotate(0) scale(1); } 40% { transform: rotate(-200deg) scale(1.15); } 100% { transform: rotate(-360deg) scale(1); } }
/* Ноты из кнопки */
.st-note { position: fixed; z-index: 120; pointer-events: none; font: 700 22px/1 var(--f-display); text-shadow: 0 0 12px currentColor;
  transform: translate(-50%, -50%); opacity: 0; animation: stNote 1.4s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes stNote {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(1.1); }
}
/* Трек в работе: крутится пластинка, этапы сменяются */
.st-work-disc { width: 46px; height: 46px; border-radius: 50%; flex: none; position: relative; animation: spin 2.2s linear infinite;
  background: radial-gradient(circle, transparent 0 17%, #0d0b14 17.5%), repeating-radial-gradient(circle, #0a0910 0 1px, #1c1828 1.4px 2.4px);
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.35), 0 0 22px -4px rgba(255, 79, 216, 0.6); }
.st-work-disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 15%, rgba(255, 255, 255, 0.14) 20%, transparent 26%); }
.st-work-disc i { position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--grad); }
.st-work-txt { flex: 1; min-width: 0; }
.st-work-txt b.is-swap { animation: stSwap .5s ease; }
@keyframes stSwap { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
.st-work .st-work-eq { height: 24px; }
/* Готовые треки: прогресс, эквалайзер у играющего, метка «Новый» */
.st-prog { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; margin-top: 5px; opacity: 0; transition: opacity .3s; }
.st-prog i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .25s linear; }
.st-track.is-playing .st-prog { opacity: 1; }
.st-mini-eq { display: none; vertical-align: middle; margin-left: 7px; gap: 2px; height: 11px; align-items: flex-end; }
.st-mini-eq i { width: 3px; border-radius: 2px; background: #ff8fe0; animation: plEq .8s ease-in-out infinite; }
.st-mini-eq i:nth-child(1) { height: 60%; } .st-mini-eq i:nth-child(2) { height: 100%; animation-delay: -.25s; } .st-mini-eq i:nth-child(3) { height: 45%; animation-delay: -.5s; }
.st-track.is-playing .st-mini-eq { display: inline-flex; }
.st-item { position: relative; }
.st-item.is-new { border-color: rgba(61, 255, 168, 0.45); animation: stNew 1.6s ease-in-out 3; }
@keyframes stNew { 50% { box-shadow: 0 0 0 4px rgba(61, 255, 168, 0.12), 0 0 30px -6px rgba(61, 255, 168, 0.5); } }
.st-new { position: absolute; top: -9px; right: 14px; z-index: 2; font: 800 10.5px var(--f-text); letter-spacing: .04em; text-transform: uppercase; color: #04140a;
  padding: 3px 9px; border-radius: 99px; background: var(--green); box-shadow: 0 6px 16px -6px rgba(61, 255, 168, 0.8); }
@media (max-width: 720px) { .st-model-ico { width: 32px; height: 32px; border-radius: 10px; } .st-model-ico svg { width: 17px; height: 17px; } }
@media (prefers-reduced-motion: reduce) { .st-work-disc, .st-mini-eq i, .st-item.is-new { animation: none; } }

/* ── Студия: загрузка, библиотека «Мои треки», плеер ─────────────────── */
/* Загрузка с процентами */
.st-load { min-height: min(68vh, 620px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.st-load-disc { position: relative; width: 150px; height: 150px; }
.st-load-disc svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.st-load-disc circle { fill: none; stroke-width: 4; }
.st-load-track { stroke: rgba(255, 255, 255, 0.07); }
.st-load-bar { stroke: #ff4fd8; stroke-linecap: round; transition: stroke-dashoffset .3s ease; filter: drop-shadow(0 0 6px rgba(255, 79, 216, 0.75)); }
.st-load-vinyl { position: absolute; inset: 16px; border-radius: 50%; animation: spin 2.2s linear infinite;
  background: radial-gradient(circle, transparent 0 27%, #0d0b14 27.5%), repeating-radial-gradient(circle, #0a0910 0 1.2px, #1c1828 1.5px 2.6px);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.st-load-vinyl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 14%, rgba(255, 255, 255, 0.14) 18%, transparent 24%); }
.st-load-vinyl i { position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--grad); }
.st-load-num { display: flex; align-items: flex-start; gap: 3px; font: 800 44px/1 var(--f-display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #c4b5ff, #ff4fd8 55%, #ffb547); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-load-num span { font-size: .45em; margin-top: .25em; }
.st-load-txt { font-weight: 700; font-size: 14px; color: var(--muted); min-height: 20px; }
.st-load-txt.is-swap { animation: stSwap .45s ease; }
.st-load-eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.st-load-eq i { width: 3px; border-radius: 2px; background: linear-gradient(0deg, #7c5cff, #ff4fd8); animation: plEq 1s ease-in-out infinite; animation-delay: var(--d); }
.studio.is-in { animation: stIn .45s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes stIn { from { opacity: 0; transform: translateY(10px); } }

/* Шапка: баланс и кнопка библиотеки */
.st-hero-side { display: flex; flex-direction: column; align-items: stretch; gap: 10px; align-self: start; }
.st-lib-btn { display: flex; align-items: center; gap: 11px; padding: 9px 14px 9px 9px; border-radius: 20px; cursor: pointer; text-align: left; color: #fff; font: inherit;
  background: rgba(10, 8, 20, 0.6); border: 1px solid var(--line-2); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.9); transition: border-color .2s, transform .2s; }
.st-lib-btn:hover { border-color: rgba(255, 79, 216, 0.5); transform: translateY(-1px); }
.st-lib-btn > span:nth-child(2) { flex: 1; min-width: 0; }
.st-lib-btn b { display: block; font: 700 15px var(--f-display); letter-spacing: -0.01em; }
.st-lib-btn small { font-size: 11.5px; color: var(--muted); }
.st-lib-btn > svg { width: 16px; height: 16px; color: var(--dim); }
.st-lib-ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.55), rgba(255, 79, 216, 0.45)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.st-lib-ico svg { width: 18px; height: 18px; }

/* Колонка «Мои треки» — без внутренней прокрутки */
.st-list { max-height: none; overflow: visible; padding-right: 0; }
.st-all-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); color: #fff; cursor: pointer;
  padding: 7px 10px 7px 13px; border-radius: 12px; font: 700 13px var(--f-text); transition: border-color .2s, background .2s; }
.st-all-btn:hover { border-color: rgba(255, 79, 216, 0.5); background: rgba(255, 79, 216, 0.08); }
.st-all-btn b { min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--grad); font-size: 11.5px; text-align: center; }
.st-all-btn svg { width: 14px; height: 14px; color: var(--dim); }
.st-recent { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.st-sublabel { font-size: 12px; font-weight: 700; color: var(--dim); padding: 2px 4px 0; }
.st-more-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px 12px 12px; border-radius: 20px; cursor: pointer; text-align: left; color: #fff; font: inherit;
  background: linear-gradient(120deg, rgba(124, 92, 255, 0.16), rgba(255, 79, 216, 0.1)); border: 1px solid rgba(167, 139, 250, 0.3); transition: border-color .2s, transform .2s; }
.st-more-btn:hover { border-color: rgba(255, 79, 216, 0.55); transform: translateY(-1px); }
.st-more-btn > span:nth-child(2) { flex: 1; min-width: 0; }
.st-more-btn b { display: block; font-size: 14.5px; }
.st-more-btn small { font-size: 12px; color: var(--muted); }
.st-more-btn > svg { width: 16px; height: 16px; color: var(--dim); }
.st-more-stack { display: flex; flex: none; padding-left: 10px; }
.st-more-stack i { width: 38px; height: 38px; margin-left: -10px; border-radius: 11px; background: #1b1628 center/cover; box-shadow: 0 0 0 2px #120f20, 0 6px 14px -6px rgba(0, 0, 0, 0.8); }
.st-more-stack i:nth-child(2) { transform: rotate(4deg); } .st-more-stack i:nth-child(3) { transform: rotate(9deg); }

/* Строка трека */
.st-track { position: relative; }
.st-track.is-new { border-color: rgba(61, 255, 168, 0.4); animation: stNew 1.6s ease-in-out 3; }
.st-track-main b { display: flex; align-items: center; gap: 6px; min-width: 0; }
.st-track-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-var { flex: none; font: 800 10.5px var(--f-text); font-style: normal; color: var(--muted); padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); }
.st-badge--xs { flex: none; font-style: normal; font-size: 10px; padding: 1px 7px; }
.st-new-chip { flex: none; font: 800 10px var(--f-text); font-style: normal; text-transform: uppercase; letter-spacing: .04em; color: #04140a; padding: 2px 6px; border-radius: 6px; background: var(--green); }
.st-mini-eq { margin-left: 2px; }
.st-prog { position: relative; height: 4px; margin-top: 7px; opacity: 1; cursor: pointer; background: rgba(255, 255, 255, 0.07); touch-action: none; }
.st-prog::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
.st-prog i { transition: none; }
.st-track:not(.is-playing) .st-prog { opacity: .55; }
.st-track:not(.is-playing):hover .st-prog { opacity: 1; }
.st-icon-btn.is-on { color: #fff; border-color: rgba(255, 79, 216, 0.5); background: rgba(255, 79, 216, 0.1); }
.st-icon-btn svg { width: 17px; height: 17px; }

/* Окно «Мои треки» */
.st-lib-layer .sheet { width: min(860px, 100%); max-height: min(88dvh, 860px); }
.st-lib-layer .sheet-head .h3 { font-size: 22px; }
.st-lib { display: flex; flex-direction: column; gap: 6px; }
.st-lib-tools { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 2px 8px 12px; margin: 0 -14px; padding-left: 22px; padding-right: 22px;
  background: linear-gradient(180deg, #16122a 75%, rgba(22, 18, 42, 0)); }
.st-lib-search { position: relative; flex: 1 1 280px; display: block; }
.st-lib-search svg { position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--dim); pointer-events: none; }
.st-lib-search .input { padding-left: 42px; min-height: 44px; }
.st-lib-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-lib-chips .st-chip small { margin-left: 6px; font-size: 11px; color: var(--dim); font-weight: 700; }
.st-lib-chips .st-chip.is-on small { color: rgba(255, 255, 255, 0.75); }
.st-lib-list { display: flex; flex-direction: column; gap: 6px; padding: 0 8px 8px; }
.st-lib-day { position: sticky; top: 58px; z-index: 2; align-self: flex-start; margin: 10px 0 2px; padding: 4px 11px; border-radius: 99px; font-size: 12px; font-weight: 800; color: #e4ddff;
  background: rgba(22, 18, 42, 0.9); border: 1px solid var(--line-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.st-lib-day:first-child { margin-top: 2px; }
.st-lib-work { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(124, 92, 255, 0.1); border: 1px solid rgba(167, 139, 250, 0.3); }
.st-lib-work .st-work-disc { width: 38px; height: 38px; }
.st-lib-work b { display: block; font-size: 14px; }
.st-lib-work small { font-size: 12px; color: var(--muted); }
.st-empty--lib { margin-top: 10px; }
html.st-dock-on .st-lib-layer .sheet-body { padding-bottom: 110px; }

/* Плеер-док */
.st-dock { position: fixed; z-index: 85; left: calc(var(--side-w) + clamp(18px, 4vw, 56px)); right: clamp(18px, 4vw, 56px); bottom: calc(14px + var(--safe-b));
  max-width: 1100px; margin: 0 auto; border-radius: 22px; overflow: hidden; opacity: 0; transform: translateY(24px) scale(.98); pointer-events: none;
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
  background: rgba(16, 13, 30, 0.88); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(167, 139, 250, 0.28); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.03) inset; }
.st-dock.is-on { opacity: 1; transform: none; pointer-events: auto; }
html.st-dock-on .main { padding-bottom: calc(130px + var(--safe-b)); }
html.st-dock-on .to-top { bottom: calc(118px + var(--safe-b)); }
.st-dock-seek { position: relative; height: 30px; margin: 0 14px; cursor: pointer; touch-action: none; outline: none; }
.st-dock-wave { position: absolute; inset: 6px 0 2px; display: flex; align-items: center; gap: 2px; pointer-events: none; }
.st-dock-wave i { flex: 1; min-width: 1px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); }
.st-dock-fill { clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.st-dock-fill i { background: linear-gradient(180deg, #ff8fe0, #8b6bff); box-shadow: 0 0 8px rgba(255, 79, 216, 0.45); }
.st-dock-seek::after { content: ""; position: absolute; top: 4px; bottom: 0; left: var(--p, 0%); width: 2px; margin-left: -1px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px #ff4fd8; }
.st-dock-tip { position: absolute; top: -26px; transform: translateX(-50%); padding: 3px 7px; border-radius: 7px; font: 700 11px var(--f-text); color: #fff; background: #000; opacity: 0; pointer-events: none; transition: opacity .15s; white-space: nowrap; }
.st-dock-seek:hover .st-dock-tip { opacity: 1; }
.st-dock-seek:focus-visible { box-shadow: 0 0 0 2px rgba(255, 79, 216, 0.6); border-radius: 8px; }
.st-dock-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 4px 14px 12px; }
.st-dock-cover { position: relative; width: 48px; height: 48px; border-radius: 50%; background: #1b1628 center/cover; flex: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08), 0 8px 18px -8px rgba(0, 0, 0, 0.9); animation: spin 6s linear infinite; animation-play-state: paused; }
.st-dock-cover i { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: 50%; background: #100d1e; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }
.st-dock.is-playing .st-dock-cover { animation-play-state: running; }
.st-dock-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-dock-meta b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-dock-meta small { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-dock-ctl { display: flex; align-items: center; gap: 4px; }
.st-dbtn { position: relative; width: 38px; height: 38px; border-radius: 12px; border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: color .15s, background .15s, transform .15s; }
.st-dbtn:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.st-dbtn:active { transform: scale(.92); }
.st-dbtn svg { width: 20px; height: 20px; }
.st-dbtn--main { width: 48px; height: 48px; border-radius: 50%; color: #fff; background: var(--grad); box-shadow: 0 10px 24px -8px rgba(255, 79, 216, 0.8); }
.st-dbtn--main:hover { background: var(--grad); filter: brightness(1.08); }
.st-dbtn--main svg { width: 22px; height: 22px; }
.st-dbtn--sm { width: 34px; height: 34px; }
.st-dbtn--sm svg { width: 18px; height: 18px; }
.st-dbtn.is-on { color: #ff8fe0; }
.st-dbtn em { position: absolute; right: 3px; bottom: 3px; display: none; font: 800 9px var(--f-text); font-style: normal; color: #fff; background: #ff4fd8; border-radius: 4px; padding: 0 3px; }
.st-dbtn.is-one em { display: block; }
.st-dbtn[hidden] { display: none; }
.st-dock-time { font: 700 12.5px var(--f-text); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-dock-time i { font-style: normal; margin: 0 4px; color: var(--dim); }
.st-dock-x { display: flex; align-items: center; gap: 2px; }
.st-dock-vol { display: flex; align-items: center; }
.st-dock-vol input { width: 0; opacity: 0; transition: width .25s, opacity .25s; accent-color: #ff4fd8; }
.st-dock-vol:hover input, .st-dock-vol:focus-within input { width: 84px; opacity: 1; margin: 0 6px 0 2px; }
.st-dock-lyr { margin: 0 14px 14px; max-height: 34vh; overflow: auto; padding: 14px 16px; border-radius: 14px; background: rgba(0, 0, 0, 0.35); white-space: pre-wrap; font: 500 13.5px/1.6 var(--f-text); color: #e4ddff; }

@media (max-width: 1100px) { .st-dock-time { display: none; } .st-dock-row { grid-template-columns: auto minmax(0, 1fr) auto auto; } }
@media (max-width: 860px) {
  .st-hero-side { flex-direction: row; flex-wrap: wrap; }
  .st-lib-btn { flex: 1 1 200px; }
  .st-dock { left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); border-radius: 20px; }
  html.in-tg:not(.in-tg-desk) .st-dock { bottom: calc(var(--tab-h) + 20px + max(var(--safe-b), var(--tg-safe-bottom, 0px))); }
  html.st-dock-on .main { padding-bottom: calc(120px + var(--safe-b)); }
  html.in-tg.st-dock-on:not(.in-tg-desk) .main { padding-bottom: calc(var(--tab-h) + 130px + var(--safe-b)); }
  .st-dbtn--hide-s, .st-dock-vol, .st-dock-x [data-d=dl], .st-dock-x [data-d=repeat] { display: none; }
  .st-dock-row { gap: 8px; padding: 2px 10px 10px; }
  .st-dock-seek { margin: 0 10px; height: 26px; }
  .st-dock-cover { width: 42px; height: 42px; }
  .st-dbtn--main { width: 44px; height: 44px; }
  .st-lib-layer .sheet { max-height: 92dvh; }
  .st-lib-tools { padding-left: 18px; padding-right: 18px; }
  .st-lib-day { top: 112px; }
}
@media (max-width: 420px) { .st-dock-x [data-d=lyrics] { display: none; } .st-dock-ctl [data-d=prev] { display: none; } }
@media (prefers-reduced-motion: reduce) { .st-load-vinyl, .st-load-eq i, .st-dock-cover, .studio.is-in { animation: none; } }

/* ── Студия: режимы с готовым треком ─────────────────────────────────── */
.st-kind { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 20px;
  background: rgba(8, 6, 16, 0.6); box-shadow: inset 0 0 0 1px var(--line-2); }
.st-kind-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 16px;
  background: linear-gradient(120deg, rgba(124, 92, 255, 0.55), rgba(255, 79, 216, 0.4)); box-shadow: 0 10px 24px -12px rgba(255, 79, 216, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: transform .45s cubic-bezier(.34, 1.4, .64, 1); }
.st-kind button { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: 0; background: none; color: var(--muted); cursor: pointer; text-align: left; border-radius: 16px; font: inherit; transition: color .2s; }
.st-kind button.is-on { color: #fff; }
.st-kind button > svg { width: 22px; height: 22px; flex: none; }
.st-kind b { display: block; font-size: 14.5px; }
.st-kind small { display: block; font-size: 11.5px; opacity: .8; }

.st-tools { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.st-tools-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.st-tools-label { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .02em; }
.st-tools-label i { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--h), 90%, 66%); box-shadow: 0 0 10px hsl(var(--h), 90%, 60%); }
.st-tool { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 11px; padding: 11px 12px; border-radius: 16px; cursor: pointer; text-align: left; color: #fff; font: inherit;
  background: var(--card); border: 1px solid var(--line); transition: border-color .2s, background .2s, transform .2s; }
.st-tool:hover { border-color: var(--line-2); transform: translateY(-1px); }
.st-tool.is-on { border-color: rgba(255, 79, 216, 0.55); background: linear-gradient(140deg, rgba(124, 92, 255, 0.16), rgba(255, 79, 216, 0.08)); box-shadow: 0 12px 26px -16px rgba(255, 79, 216, 0.8); }
.st-tool-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(135deg, hsl(var(--h), 80%, 58%), hsl(calc(var(--h) + 40), 85%, 55%)); box-shadow: 0 8px 18px -9px hsla(var(--h), 90%, 55%, 0.9); }
.st-tool-ico svg { width: 19px; height: 19px; }
.st-tool-ico--lg { width: 46px; height: 46px; border-radius: 14px; }
.st-tool-ico--lg svg { width: 23px; height: 23px; }
.st-tool-txt b { display: block; font-size: 13.5px; }
.st-tool-txt small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.st-tool-price { position: absolute; top: 9px; right: 10px; display: inline-flex; align-items: center; gap: 3px; font: 700 11px var(--f-text); color: var(--dim); }
.st-tool-price i { display: inline-grid; } .st-tool-price svg { width: 12px; height: 12px; }
.st-tool .st-tool-txt { padding-right: 34px; }
.st-tools-hint { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); }
.st-tools-hint svg { width: 16px; height: 16px; flex: none; }

.st-tool-card { display: flex; flex-direction: column; gap: 16px; }
.st-tool-head { display: flex; align-items: flex-start; gap: 13px; }
.st-tool-head b { display: block; font: 700 18px var(--f-display); letter-spacing: -0.02em; }
.st-tool-head small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); line-height: 1.45; max-width: 560px; }
.st-steps { display: flex; align-items: center; gap: 8px; }
.st-step { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--dim); white-space: nowrap; }
.st-step i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 11px var(--f-text); font-style: normal; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line-2); }
.st-step i svg { width: 12px; height: 12px; }
.st-step.is-on { color: #fff; } .st-step.is-on i { background: var(--grad); box-shadow: none; }
.st-step.is-done { color: #b8f5d6; } .st-step.is-done i { background: rgba(61, 255, 168, 0.18); color: var(--green); box-shadow: inset 0 0 0 1px rgba(61, 255, 168, 0.4); }
.st-step-line { flex: 1; height: 1px; min-width: 14px; background: var(--line-2); }

.st-srcs { display: grid; gap: 10px; }
.st-srcs--two { grid-template-columns: 1fr 1fr; }
.st-src { display: flex; flex-direction: column; gap: 8px; }
.st-src-label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.st-src-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.st-src-btn { display: flex; align-items: center; gap: 11px; padding: 14px; border-radius: 16px; cursor: pointer; text-align: left; color: #fff; font: inherit;
  background: rgba(255, 255, 255, 0.025); border: 1.5px dashed rgba(167, 139, 250, 0.35); transition: border-color .2s, background .2s; }
.st-src-btn:hover { border-color: rgba(255, 79, 216, 0.6); background: rgba(255, 79, 216, 0.06); }
.st-src-btn > svg { width: 22px; height: 22px; flex: none; color: #d6c9ff; }
.st-src-btn b { display: block; font-size: 13.5px; }
.st-src-btn small { display: block; font-size: 11.5px; color: var(--dim); }
.st-src-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); }
.st-src-play { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; display: grid; place-items: center; background: var(--grad); box-shadow: 0 8px 18px -8px rgba(255, 79, 216, 0.8); }
.st-src-play:disabled { opacity: .5; cursor: default; }
.st-src-play svg { width: 18px; height: 18px; }
.st-src-play .st-pause { display: none; }
.st-src.is-playing .st-src-play > svg { display: none; }
.st-src.is-playing .st-src-play .st-pause { display: grid; }
.st-src-meta { min-width: 0; }
.st-src-meta b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-src-meta small { font-size: 12px; color: var(--dim); }
.st-src-meta em { font-style: normal; color: #ff8fe0; font-weight: 700; }
.st-src-bar { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.st-src-bar i { display: block; height: 100%; background: var(--grad); transition: width .2s; }

/* Волна с отметкой продолжения или выделением фрагмента */
.st-tl { position: relative; height: 64px; border-radius: 14px; cursor: pointer; touch-action: none; user-select: none; overflow: hidden;
  background: rgba(8, 6, 16, 0.55); box-shadow: inset 0 0 0 1px var(--line); }
.st-tl-wave { position: absolute; inset: 8px 8px; display: flex; align-items: center; gap: 2px; pointer-events: none; }
.st-tl-wave i { flex: 1; min-width: 1px; border-radius: 2px; background: rgba(214, 201, 255, 0.4); }
.st-tl--point .st-tl-cut { position: absolute; top: 0; bottom: 0; left: var(--at); right: 0; background: repeating-linear-gradient(135deg, rgba(255, 79, 216, 0.16) 0 6px, rgba(255, 79, 216, 0.06) 6px 12px); border-left: 1px solid rgba(255, 79, 216, 0.4); pointer-events: none; }
.st-tl-mark { position: absolute; top: 0; bottom: 0; left: var(--at); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px #ff4fd8; pointer-events: none; }
.st-tl-mark i { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 79, 216, 0.5), 0 4px 10px rgba(0, 0, 0, 0.6); }
.st-tl-sel { position: absolute; top: 0; bottom: 0; left: var(--s); right: calc(100% - var(--e)); border-radius: 10px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 79, 216, 0.28), rgba(124, 92, 255, 0.22)); box-shadow: inset 0 0 0 2px rgba(255, 143, 224, 0.9), 0 0 24px -6px rgba(255, 79, 216, 0.8); }
.st-tl-h { position: absolute; top: 50%; width: 10px; height: 30px; border-radius: 6px; background: #fff; transform: translateY(-50%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.st-tl-h[data-h=start] { left: -5px; } .st-tl-h[data-h=end] { right: -5px; }
.st-tl-head { position: absolute; top: 4px; bottom: 4px; left: 0; width: 2px; background: #8fd8ff; box-shadow: 0 0 8px #8fd8ff; opacity: 0; pointer-events: none; transition: opacity .2s; }
.st-src.is-playing .st-tl-head { opacity: 1; }
.st-tl-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 12.5px; }
.st-tl-info b { color: #fff; font-size: 13.5px; }
.st-tl-info span { color: var(--dim); }

.st-opt { font-style: normal; font-weight: 600; font-size: 11.5px; color: var(--dim); margin-left: 6px; }
.st-qty-note { font-size: 13px; font-weight: 700; color: #e4ddff; }

/* Стемы */
.st-stems { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-stem { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 4px 12px; padding: 14px; border-radius: 18px; cursor: pointer; text-align: left; color: #fff; font: inherit;
  background: var(--card); border: 1px solid var(--line); transition: border-color .2s, background .2s; }
.st-stem.is-on { border-color: rgba(255, 79, 216, 0.55); background: linear-gradient(140deg, rgba(124, 92, 255, 0.16), rgba(255, 79, 216, 0.08)); }
.st-stem-bars { grid-row: 1 / 3; display: flex; align-items: flex-end; gap: 3px; height: 40px; width: 46px; }
.st-stem-bars i { flex: 1; height: var(--h); border-radius: 3px; background: linear-gradient(0deg, hsl(calc(260 + var(--i) * 22), 85%, 62%), hsl(calc(300 + var(--i) * 22), 90%, 70%)); }
.st-stem.is-on .st-stem-bars i { animation: stWave 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.2s); transform-origin: bottom; }
.st-stem b { display: block; font-size: 14px; }
.st-stem small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.st-stem em { grid-column: 2; font-style: normal; display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 13px; }
.st-stem em i { display: inline-grid; } .st-stem em svg { width: 14px; height: 14px; }

/* Метка режима у трека и меню режимов */
.st-tool-chip { flex: none; font: 700 10px var(--f-text); font-style: normal; color: #d6c9ff; padding: 1px 6px; border-radius: 6px; background: rgba(124, 92, 255, 0.18); }
.st-tmenu { display: flex; flex-direction: column; gap: 6px; padding: 0 8px 8px; }
.st-tmenu-btn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px; border-radius: 15px; cursor: pointer; text-align: left; color: #fff; font: inherit;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); transition: border-color .2s, background .2s; }
.st-tmenu-btn:hover { border-color: rgba(255, 79, 216, 0.5); background: rgba(255, 79, 216, 0.06); }
.st-tmenu-btn b { display: block; font-size: 14px; }
.st-tmenu-btn small { display: block; font-size: 12px; color: var(--muted); }
.st-tmenu-btn > svg { width: 16px; height: 16px; color: var(--dim); }

@media (max-width: 720px) {
  .st-kind button { padding: 10px; gap: 8px; }
  .st-kind small { display: none; }
  .st-tools-group { grid-template-columns: 1fr 1fr; }
  .st-tool { grid-template-columns: 1fr; gap: 8px; padding: 11px; }
  .st-tool .st-tool-txt { padding-right: 0; }
  .st-tool-txt small { display: none; }
  .st-srcs--two, .st-stems { grid-template-columns: 1fr; }
  .st-steps .st-step:not(.is-on):not(.is-done) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .st-stem.is-on .st-stem-bars i { animation: none; } }
.st-tools-row { display: flex; gap: 6px; margin: 0 0 14px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 92%, transparent); mask: linear-gradient(90deg, #000 92%, transparent); }
.st-tools-row::-webkit-scrollbar { display: none; }
.st-tool-pill { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 7px; border-radius: 99px; cursor: pointer; color: var(--muted); font: 700 12.5px var(--f-text);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); transition: color .2s, border-color .2s, background .2s; }
.st-tool-pill i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, hsl(var(--h), 80%, 58%), hsl(calc(var(--h) + 40), 85%, 55%)); }
.st-tool-pill i svg { width: 13px; height: 13px; }
.st-tool-pill:hover { color: #fff; border-color: var(--line-2); }
.st-tool-pill.is-on { color: #fff; border-color: rgba(255, 79, 216, 0.6); background: rgba(255, 79, 216, 0.12); }
/* строка режимов не должна распирать колонку */
.st-compose, .st-history { min-width: 0; }
.st-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
@media (max-width: 1320px) { .st-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Нейроны: число, потом мозг высотой с цифры ─────────────────────── */
.neu { display: inline-flex; align-items: center; gap: .14em; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1; vertical-align: -0.06em; }
.neu > .neu-i { all: unset; display: inline-flex; flex: none; width: 1.18em; height: 1.18em; margin: -0.2em -0.1em -0.2em -0.02em; color: #ff9be6;
  filter: drop-shadow(0 0 .18em rgba(255, 79, 216, 0.45)); transform: translateY(-0.02em); }
.neu > .neu-i svg, .neu > .neu-i svg.ic-brain { width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; background: none !important; border-radius: 0 !important; stroke-width: 2.1; }
/* старые кружки под мозгом больше не нужны */
.bal-chip { padding: 0 15px !important; gap: 0 !important; font-size: 15px; }
.cab-menu-bal b, .st-bal b { display: block; }
.st-bal { padding: 10px 18px; }
.st-bal b { font-size: 20px; }
.balance-value { align-items: center; }
.balance-value .neu { font-size: 1em; }
.balance-label { gap: 0; }
.st-model-price, .st-tool-price, .st-stem em, .st-sum b, .dh-price b { display: inline-flex; align-items: center; }
.st-model-price small { margin-left: 6px; }
.st-sum b .neu > .neu-i { width: 1.14em; height: 1.14em; }

/* Аватар из Telegram — крупнее */
.avatar { width: 40px; height: 40px; font-size: 16px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 6px 16px -8px rgba(0, 0, 0, 0.8); }
.user-mini .avatar { width: 44px; height: 44px; }
.cab-menu-user .avatar { width: 48px; height: 48px; font-size: 18px; }
@media (max-width: 860px) { .topbar .avatar { width: 42px; height: 42px; } }

/* Хранение 3 месяца */
.st-keep { display: flex; align-items: center; gap: 7px; margin: -4px 0 12px; font-size: 12.5px; color: var(--muted); }
.st-keep svg { width: 15px; height: 15px; flex: none; color: #b9a4ff; }
.st-lib-note { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 12px; font-size: 12.5px; color: #e4ddff;
  background: rgba(124, 92, 255, 0.12); border: 1px solid rgba(167, 139, 250, 0.25); }
.st-lib-note svg { width: 16px; height: 16px; flex: none; color: #ff9be6; }
.st-left-chip { flex: none; font: 700 10px var(--f-text); font-style: normal; color: #ffd28f; padding: 1px 6px; border-radius: 6px; background: rgba(255, 181, 71, 0.14); }
.st-track.is-gone { opacity: .62; }
.st-track.is-gone .st-cover { filter: grayscale(1) brightness(.6); display: grid; place-items: center; }
.st-gone-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); color: #fff; }
.st-gone-ico svg { width: 14px; height: 14px; }
.st-track.is-gone .st-track-main small { color: #ffb4b4; }
/* .neu наследует шрифт родителя — правила вида «.st-sum span» его не трогают */
span.neu.neu { font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; margin: 0; padding: 0; display: inline-flex; background: none; border: 0; }

/* ── Плей и пауза: треугольник оптически по центру ─────────────────────
   В иконке треугольник уже правее центра (рамка 8–20.4 из 24), а центр тяжести — на 12.
   Оптический центр между ними: сдвигаем на −4%, а не вправо. */
.ic-play { transform: translateX(-4%) !important; }

/* Кнопка на обложке трека: круглая стеклянная, ровно в центре */
.st-play { background: rgba(8, 6, 16, 0.18); }
.st-play:hover { background: rgba(8, 6, 16, 0.38); }
.st-play::before { content: ""; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%;
  background: rgba(14, 11, 26, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 6px 16px -6px rgba(0, 0, 0, 0.8); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background .2s; }
.st-play:hover::before { transform: scale(1.08); background: rgba(14, 11, 26, 0.7); }
.st-play > svg, .st-play .st-pause { position: relative; z-index: 1; }
.st-play svg { width: 15px; height: 15px; filter: none; }
.st-play .st-pause { place-items: center; }
.st-play .st-pause svg { width: 14px; height: 14px; }
.st-track.is-playing .st-play { background: rgba(8, 6, 16, 0.3); }
.st-track.is-playing .st-play::before { background: var(--grad); box-shadow: 0 0 0 3px rgba(255, 79, 216, 0.25), 0 8px 18px -6px rgba(255, 79, 216, 0.8); animation: stPlayPulse 1.8s ease-in-out infinite; }
@keyframes stPlayPulse { 50% { box-shadow: 0 0 0 6px rgba(255, 79, 216, 0.12), 0 8px 18px -6px rgba(255, 79, 216, 0.8); } }
.st-play:active::before { transform: scale(.92); }
/* Источник в режимах и главная кнопка плеера — те же размеры значков */
.st-src-play svg, .st-dbtn--main svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .st-track.is-playing .st-play::before { animation: none; } }
/* В кабинете без подсветки за курсором — только на главной */
.app:not(.is-guest) [data-spot]::after { display: none !important; }

/* Подсказки в стиле сайта (вместо системных title) */
.nr-tip { position: fixed; left: 0; top: 0; z-index: 200; max-width: 260px; padding: 8px 12px; border-radius: 12px; pointer-events: none;
  font: 600 12.5px/1.4 var(--f-text); color: #f5f3ff; letter-spacing: .01em;
  background: linear-gradient(180deg, rgba(36, 28, 62, 0.97), rgba(22, 17, 40, 0.97)); border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.85), 0 0 22px -10px rgba(255, 79, 216, 0.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; translate: 0 4px; transition: opacity .16s ease, translate .2s cubic-bezier(.2, .8, .2, 1); }
.nr-tip.is-below { translate: 0 -4px; }
.nr-tip.is-on { opacity: 1; translate: 0 0; }
.nr-tip::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -5px; width: 9px; height: 9px; margin-left: -5px; transform: rotate(45deg);
  background: rgba(22, 17, 40, 0.97); border-right: 1px solid rgba(167, 139, 250, 0.35); border-bottom: 1px solid rgba(167, 139, 250, 0.35); }
.nr-tip.is-below::after { bottom: auto; top: -5px; border: 0; border-left: 1px solid rgba(167, 139, 250, 0.35); border-top: 1px solid rgba(167, 139, 250, 0.35); background: rgba(36, 28, 62, 0.97); }
@media (prefers-reduced-motion: reduce) { .nr-tip { transition: none; } }

/* ── Плеер v2: управление всегда по центру, большое окно с текстом ──── */
.st-dock-row { grid-template-columns: minmax(0, 1fr) minmax(0, 520px) minmax(0, 1fr) !important; gap: 18px; padding: 10px 14px !important; align-items: center; }
.st-dock-who { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 4px 8px 4px 4px; border: 0; border-radius: 16px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .2s; }
.st-dock-who:hover { background: rgba(255, 255, 255, 0.05); }
.st-dock-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.st-dock-ctl { justify-content: center; }
.st-dock-line { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; gap: 10px; width: 100%; font: 700 11.5px var(--f-text); color: var(--muted); font-variant-numeric: tabular-nums; }
.st-dock-line > span:first-child { text-align: right; }
.st-dock-line .st-dock-seek { margin: 0; height: 22px; }
.st-dock-line .st-dock-wave { inset: 3px 0; }
.st-dock-line .st-dock-seek::after { top: 2px; bottom: 2px; }
.st-dock-x { justify-self: end; }
.st-dock-time, .st-dock-lyr { display: none !important; }

@media (max-width: 1100px) { .st-dock-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, auto) !important; } .st-dock-line { min-width: 280px; } }
@media (max-width: 860px) {
  .st-dock-row { grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px; padding: 12px 10px 10px !important; }
  .st-dock .st-dock-line { position: absolute; left: 0; right: 0; top: 0; display: block; min-width: 0; }
  .st-dock .st-dock-line > span { display: none; }
  .st-dock .st-dock-line .st-dock-seek { height: 10px; margin: 0 14px; }
  .st-dock .st-dock-line .st-dock-wave { display: none; }
  .st-dock .st-dock-line .st-dock-seek::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
  .st-dock .st-dock-line .st-dock-seek::after { top: 4px; bottom: auto; height: 3px; left: 0; width: var(--p, 0%); margin: 0; background: var(--grad); box-shadow: none; }
  .st-dock-x { display: none; }
  .st-dock-who { padding: 2px; }
}

/* Большое окно плеера */
.st-full { position: fixed; inset: 0; z-index: 95; display: flex; color: #fff; opacity: 0; visibility: hidden; transform: translateY(24px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1), visibility 0s .4s; background: #0a0814; overflow: hidden; }
.st-full.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1); }
html.st-full-open { overflow: hidden; }
html.st-full-open .st-dock { opacity: 0; pointer-events: none; }
.st-full-bg { position: absolute; inset: -10%; background: #1a1430 center/cover; filter: blur(80px) saturate(160%) brightness(.7); opacity: .42; transform: scale(1.1); }
.st-full::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(90% 70% at 20% 0%, rgba(124, 92, 255, 0.25), transparent 60%), linear-gradient(180deg, rgba(10, 8, 20, 0.6), rgba(10, 8, 20, 0.96)); }
.st-full-close { position: absolute; z-index: 3; top: calc(16px + var(--safe-t, 0px)); left: 50%; transform: translateX(-50%); width: 56px; height: 34px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.st-full-close svg { width: 20px; height: 20px; }
.st-full-close:hover { background: rgba(255, 255, 255, 0.14); }
.st-full-body { position: relative; z-index: 1; width: min(1120px, 100%); margin: 0 auto; padding: calc(70px + var(--safe-t, 0px)) 28px calc(28px + var(--safe-b, 0px));
  display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 40px; align-items: stretch; height: 100%; }
.st-full.no-lyr .st-full-body { grid-template-columns: minmax(0, 520px); justify-content: center; }
.st-full.no-lyr .st-full-lyr { display: none; }
.st-full-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 0; }
.st-full-art { position: relative; width: min(320px, 70vw); aspect-ratio: 1; margin-right: 60px; }
.st-full-cover { position: absolute; inset: 0; z-index: 1; border-radius: 22px; background: #1b1628 center/cover; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.st-full-vinyl { position: absolute; top: 4%; bottom: 4%; left: 22%; aspect-ratio: 1; border-radius: 50%; transition: left .6s cubic-bezier(.2, .8, .2, 1);
  background: radial-gradient(circle, transparent 0 15%, #0d0b14 15.5%), repeating-radial-gradient(circle, #0a0910 0 1.2px, #1c1828 1.5px 2.6px);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.9); animation: spin 4s linear infinite; animation-play-state: paused; }
.st-full-vinyl i { position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--grad); }
.st-full.is-playing .st-full-vinyl { left: 34%; animation-play-state: running; }
.st-full-meta { text-align: center; max-width: 100%; }
.st-full-meta b { display: block; font: 800 clamp(20px, 2.4vw, 28px)/1.2 var(--f-display); letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-full-meta small { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.st-full-line { max-width: 440px; }
.st-full-line .st-dock-seek { height: 34px; }
.st-full-ctl { display: flex; align-items: center; justify-content: center; gap: 8px; }
.st-full-ctl .st-dbtn--main { width: 64px; height: 64px; }
.st-full-ctl .st-dbtn--main svg { width: 24px; height: 24px; }
.st-full-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.st-full-acts .btn svg { width: 17px; height: 17px; }
.st-full-lyr { display: flex; flex-direction: column; min-height: 0; border-radius: 26px; background: rgba(10, 8, 20, 0.45); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.st-full-lyr-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px 24px; }
.st-full-lyr-head b { font: 700 13px var(--f-text); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.st-full-lyr-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 24px 28px; scrollbar-width: thin;
  -webkit-mask: linear-gradient(180deg, transparent, #000 18px, #000 calc(100% - 28px), transparent); mask: linear-gradient(180deg, transparent, #000 18px, #000 calc(100% - 28px), transparent); }
.st-full-lyr-body p { margin: 0; font: 600 clamp(16px, 1.5vw, 19px)/1.65 var(--f-text); color: #f1edff; }
.st-lyr-sec { display: inline-block; margin: 14px 0 6px; padding: 3px 10px; border-radius: 99px; font: 800 10.5px var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: #ffb8f0; background: rgba(255, 79, 216, 0.14); }
.st-lyr-sec:first-child { margin-top: 2px; }
.st-lyr-gap { display: block; height: 10px; }
.st-full-nolyr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; color: var(--muted); text-align: center; }
.st-full-nolyr svg { width: 28px; height: 28px; }

@media (max-width: 860px) {
  .st-full { overflow-y: auto; }
  .st-full-body { display: flex; flex-direction: column; height: auto; min-height: 100%; gap: 22px; padding: calc(64px + var(--safe-t, 0px)) 18px calc(24px + var(--safe-b, 0px)); }
  .st-full-art { width: min(250px, 62vw); margin-right: 46px; }
  .st-full-lyr { min-height: 260px; }
  .st-full-lyr-body { overflow: visible; -webkit-mask: none; mask: none; }
  .st-full-ctl .st-dock-vol, .st-full-ctl [data-d=repeat] { display: none; }
  .st-full-acts .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .st-full, .st-full-vinyl { transition: none; animation: none; } }

.st-full-close { position: fixed; }
.st-full-main { flex: none; }
.st-full-bg, .st-full::before { position: fixed; }
/* Пластинка за обложкой: бороздки, блик, ободок и наклейка с обложкой трека */
.st-full-vinyl { top: 3%; bottom: 3%; left: 26%;
  background:
    radial-gradient(circle, transparent 0 33%, rgba(0, 0, 0, 0.55) 33.5% 35%, transparent 35.5%),
    repeating-radial-gradient(circle, #15121f 0 1.1px, #2a2540 1.5px 2.3px, #1a1626 2.7px 3.4px),
    #15121f;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.9), inset 0 0 0 3px rgba(255, 255, 255, 0.07), inset 0 0 0 7px #0d0b14; }
.st-full-vinyl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(255, 255, 255, 0.22) 12%, transparent 18% 50%, rgba(255, 255, 255, 0.14) 56%, transparent 62%); }
.st-full-vinyl i { width: 36%; height: 36%; background: #2a2045 center/cover; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(255, 255, 255, 0.08); }
.st-full-vinyl i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12%; height: 12%; transform: translate(-50%, -50%); border-radius: 50%; background: #0a0814; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.25); }
.st-full.is-playing .st-full-vinyl { left: 44%; }
.st-full-art { margin-right: 90px; }
@media (max-width: 860px) { .st-full-art { margin-right: 70px; } }

/* ── Производительность: пауза анимаций вне экрана, лёгкое размытие на телефонах ── */
.anim-off, .anim-off *, .anim-off::before, .anim-off::after, .anim-off *::before, .anim-off *::after { animation-play-state: paused !important; }
html.st-full-open #view *, html.st-full-open #view *::before, html.st-full-open #view *::after { animation-play-state: paused !important; }
@media (max-width: 860px) {
  /* backdrop-filter — самое горячее на мобильных GPU: оставляем лёгкое размытие только там, где оно видно */
  .topbar { backdrop-filter: blur(10px) saturate(130%) !important; -webkit-backdrop-filter: blur(10px) saturate(130%) !important; }
  .tabbar { backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; }
  .st-dock { backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; background: rgba(16, 13, 30, 0.94) !important; }
  .overlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(4, 3, 9, 0.78) !important; }
  .st-lib-day, .st-full-lyr, .st-play::before, .nr-tip, .st-full-close { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .st-full-bg { filter: blur(40px) brightness(.7) !important; }
  /* декоративные бесконечные анимации на телефоне не нужны */
  .st-hero-bg i, .st-model-eq i { animation: none !important; }
}

/* ── Телефон: кабинет без перекрытий и обрезаний ─────────────────────── */
.demo-banner em { font-style: normal; }
.st-lib-btn small em { font-style: normal; }
@media (max-width: 860px) {
  /* Демо — маленькая пилюля в правом нижнем углу, не закрывает заголовки */
  .demo-banner { top: auto !important; left: auto; right: calc(12px + env(safe-area-inset-right, 0px)); transform: none;
    bottom: calc(14px + var(--safe-b, 0px)); max-width: none; gap: 8px; padding: 5px 5px 5px 11px; font-size: 12px; }
  .demo-banner em { display: none; }
  .demo-banner span { max-width: none !important; overflow: visible; }
  .demo-banner button { padding: 5px 10px; font-size: 12px; }
  html.in-tg:not(.in-tg-desk) .demo-banner { bottom: calc(var(--tab-h) + 22px + max(var(--safe-b), var(--tg-safe-bottom, 0px))); }
  html.st-dock-on .demo-banner { bottom: calc(96px + var(--safe-b, 0px)); }
  html.in-tg.st-dock-on:not(.in-tg-desk) .demo-banner { bottom: calc(var(--tab-h) + 104px + max(var(--safe-b), var(--tg-safe-bottom, 0px))); }
  html.st-full-open .demo-banner { display: none; }
}

@media (max-width: 560px) {
  /* Мастер: карточки типа релиза — компактная пластинка, название в одну строку */
  .type { grid-template-columns: 64px 1fr !important; gap: 2px 14px !important; padding: 16px !important; }
  .type-art { width: 64px !important; height: 64px !important; }
  .type-art .vinyl { width: 52px !important; }
  .type-art .vinyl:nth-child(2) { left: 8px !important; top: 6px !important; }
  .type-art .vinyl:nth-child(3) { left: 16px !important; top: 12px !important; }
  .type-title { font-size: 18px !important; }
  .type p { font-size: 13px; line-height: 1.4; }
  .type .tag { font-size: 11px; }

  /* Плитки на главной: суммы не переносятся */
  .kpi-v { font-size: clamp(17px, 5.6vw, 22px) !important; white-space: nowrap; }

  /* Студия: шапка — баланс и «Мои треки» одинаковыми половинками */
  .st-hero-side { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .st-hero-side > * { min-width: 0; }
  .st-bal { justify-content: flex-start; padding: 10px 12px; border-radius: 18px; }
  .st-bal b { font-size: 18px; }
  .st-bal small, .st-lib-btn small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .st-lib-btn { padding: 8px 10px 8px 8px; gap: 9px; }
  .st-lib-btn > svg, .st-lib-keep { display: none; }
  .st-lib-ico { width: 32px; height: 32px; }

  /* Переключатель «Новый трек / С готовым треком» в одну строку */
  .st-kind button { padding: 10px 8px; gap: 7px; justify-content: center; }
  .st-kind button > svg { width: 18px; height: 18px; }
  .st-kind b { font-size: 13px; white-space: nowrap; }

  /* Строки треков: название целиком, метки ниже */
  .st-track-main b { flex-wrap: wrap; row-gap: 3px; }
  .st-track-title { flex: 1 1 100%; }
  .st-lib .st-badge--xs { display: none; }
  .st-track-main small { margin-top: 1px; }

  /* Источник для режимов: две компактные кнопки рядом */
  .st-src-actions { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .st-src-btn { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 12px 8px; }
  .st-src-btn small { display: none; }
  .st-src-btn b { font-size: 13px; }
  .st-srcs--two { gap: 14px; }
}
@media (max-width: 360px) {
  .st-kind button > svg { display: none; }
  .st-kind b { font-size: 12.5px; }
  .st-hero-side { grid-template-columns: 1fr; }
}
/* Демо-плашка и на компьютере в углу — не закрывает заголовки страниц */
@media (min-width: 861px) {
  .demo-banner { top: auto; left: auto; transform: none; right: 24px; bottom: 20px; }
  html.st-dock-on .demo-banner { bottom: 120px; }
  html.st-full-open .demo-banner { display: none; }
}
@media (max-width: 560px) { .st-lib-btn b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .st-lib-btn > span:nth-child(2) { min-width: 0; } }
@media (max-width: 560px) { .st-full-meta b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 21px; } }
/* Чат поддержки не уходит под плеер */
html.st-dock-on .sup { height: calc(100dvh - 34px - 48px - 96px); }
@media (max-width: 860px) {
  html.st-dock-on .sup { height: calc(100dvh - 74px - var(--safe-t) - var(--tab-h) - 30px - var(--safe-b) - 70px); }
  html.st-dock-on:not(.in-tg) .sup { height: calc(100dvh - 74px - var(--safe-t) - 100px - var(--safe-b)); }
}
/* Узкие телефоны: логотип в одну строку, без подписи */
@media (max-width: 380px) {
  .topbar .brand-name > span:not(.brand-word) { display: none; }
  .topbar .brand-name { white-space: nowrap; font-size: 14px; }
  .topbar .bal-chip { padding: 0 11px !important; font-size: 14px; }
}
@media (max-width: 340px) { .topbar .brand-name { display: none; } }

/* Плашка баланса в шапке: градиентная рамка, число с мозгом, кнопка пополнения */
.topbar a.bal-chip { display: inline-flex; align-items: center; height: 40px; padding: 0 4px 0 14px !important; gap: 10px !important; border-radius: 99px; color: #fff;
  font: 700 15px var(--f-display) !important; letter-spacing: -0.01em; border: 1px solid transparent;
  background: linear-gradient(180deg, #1b1533, #120e24) padding-box, linear-gradient(120deg, rgba(167, 139, 250, 0.75), rgba(255, 79, 216, 0.75) 55%, rgba(255, 181, 71, 0.55)) border-box !important;
  box-shadow: 0 10px 24px -14px rgba(255, 79, 216, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; transition: transform .2s, box-shadow .2s; }
.topbar a.bal-chip:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -14px rgba(255, 79, 216, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; }
.bal-chip-val { display: inline-flex; align-items: center; }
.bal-chip-add { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--grad); box-shadow: 0 4px 12px -4px rgba(255, 79, 216, 0.85);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.bal-chip-add svg { width: 15px; height: 15px; color: #fff; stroke-width: 2.6; }
.topbar a.bal-chip:hover .bal-chip-add { transform: rotate(90deg); }
@media (max-width: 860px) { .topbar a.bal-chip { height: 38px; padding: 0 4px 0 12px !important; gap: 8px !important; font-size: 14px !important; } .bal-chip-add { width: 28px; height: 28px; } }
@media (max-width: 360px) { .bal-chip-add { display: none; } .topbar a.bal-chip { padding: 0 12px !important; } }

/* ── Запуски: карточки отправки, анимация старта ───────────────────── */
.st-go { position: relative; }
.st-go-count { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center;
  font: 800 11.5px var(--f-text); font-style: normal; color: #1a0d24; background: #fff; box-shadow: 0 4px 12px -4px rgba(255, 79, 216, 0.9); animation: stCountPop .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes stCountPop { from { transform: scale(.3); } }
.st-go-ring { position: fixed; z-index: 120; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(255, 143, 224, 0.9); box-shadow: 0 0 24px rgba(255, 79, 216, 0.8); animation: stRing .85s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes stRing { to { transform: scale(14); opacity: 0; border-width: 1px; } }
.st-fly { position: fixed; z-index: 121; width: 54px; height: 54px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 0 17%, #0d0b14 17.5%), repeating-radial-gradient(circle, #0a0910 0 1.2px, #2a2540 1.5px 2.6px);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12), 0 0 30px hsla(var(--h), 90%, 60%, 0.9), 0 14px 30px -10px rgba(0, 0, 0, 0.8); }
.st-fly i { position: absolute; left: 50%; top: 50%; width: 36%; height: 36%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--grad); }

.st-launch { position: relative; overflow: hidden; border-color: hsla(var(--h, 300), 85%, 65%, 0.45) !important;
  background: linear-gradient(120deg, hsla(var(--h, 300), 80%, 55%, 0.14), rgba(124, 92, 255, 0.08)), var(--card) !important; animation: stLaunchIn .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes stLaunchIn { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
.st-launch.is-hit { animation: stLaunchHit .7s ease; }
@keyframes stLaunchHit { 30% { box-shadow: 0 0 0 4px rgba(255, 143, 224, 0.25), 0 0 40px -6px rgba(255, 79, 216, 0.9); transform: scale(1.015); } }
.st-launch-row { display: flex; align-items: center; gap: 12px; }
.st-launch-orb { position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; }
.st-launch-orb i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: hsl(var(--h, 300), 90%, 70%); border-right-color: rgba(124, 92, 255, 0.8); animation: spin 1.1s linear infinite; }
.st-launch-orb i:nth-child(2) { inset: 6px; animation-duration: 1.6s; animation-direction: reverse; border-top-color: #ffc27a; border-right-color: transparent; }
.st-launch-orb i:nth-child(3) { inset: 12px; animation-duration: .9s; border-top-color: #8fd8ff; border-right-color: transparent; }
.st-launch-orb b { position: relative; width: 16px; height: 16px; color: #fff; display: grid; place-items: center; animation: stOrbPulse 1.2s ease-in-out infinite; }
.st-launch-orb b svg { width: 16px; height: 16px; }
@keyframes stOrbPulse { 50% { transform: scale(1.25); filter: drop-shadow(0 0 8px #ff8fe0); } }
.st-launch-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.st-launch-txt b { font-size: 14.5px; }
.st-launch-txt b.is-swap { animation: stSwap .45s ease; }
.st-launch-txt small { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-launch-cost { flex: none; font: 700 13px var(--f-display); color: #ffd1f3; }
.st-launch-bar { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.st-launch-bar i { display: block; height: 100%; width: 40%; border-radius: 3px; background: linear-gradient(90deg, transparent, hsl(var(--h, 300), 90%, 70%), #ffc27a, transparent); animation: stLaunchBar 1.1s ease-in-out infinite; }
@keyframes stLaunchBar { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.st-launch.is-error { border-color: rgba(255, 107, 107, 0.45) !important; background: rgba(255, 80, 80, 0.06) !important; }
.st-launch-x { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #ffb4b4; background: rgba(255, 80, 80, 0.14); }
.st-launch-x svg { width: 16px; height: 16px; }
.st-launch-acts { display: flex; gap: 8px; }
.st-item.is-launched { animation: stJustLaunched 1.2s cubic-bezier(.2, .8, .2, 1); border-color: rgba(255, 143, 224, 0.5); }
@keyframes stJustLaunched { 0% { opacity: 0; transform: translateY(-8px) scale(.98); box-shadow: 0 0 0 0 rgba(255, 79, 216, 0); } 40% { opacity: 1; box-shadow: 0 0 0 4px rgba(255, 79, 216, 0.18), 0 0 36px -6px rgba(255, 79, 216, 0.8); } }

/* Плеер: заметно, что раскрывается */
.st-dock-open { flex: none; display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 4px 9px 4px 6px; border-radius: 99px; color: #ffd1f3;
  font: 700 11px var(--f-text); background: rgba(255, 79, 216, 0.12); border: 1px solid rgba(255, 143, 224, 0.3); transition: background .2s, transform .2s; }
.st-dock-open svg { width: 14px; height: 14px; transform: rotate(180deg); animation: stOpenNudge 2.4s ease-in-out infinite; }
.st-dock-open em { font-style: normal; }
.st-dock-who:hover .st-dock-open { background: rgba(255, 79, 216, 0.22); transform: translateY(-1px); }
@keyframes stOpenNudge { 0%, 70%, 100% { transform: rotate(180deg) translateY(0); } 80% { transform: rotate(180deg) translateY(3px); } 90% { transform: rotate(180deg) translateY(0); } }
.st-dock-hint { position: absolute; left: 14px; bottom: calc(100% + 10px); display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 14px; border: 0; cursor: pointer;
  font: 700 12.5px var(--f-text); color: #fff; background: linear-gradient(120deg, #7c5cff, #ff4fd8); box-shadow: 0 12px 30px -10px rgba(255, 79, 216, 0.9);
  animation: stHintIn .45s cubic-bezier(.34, 1.56, .64, 1); transition: opacity .5s, transform .5s; }
.st-dock-hint svg { width: 14px; height: 14px; transform: rotate(180deg); }
.st-dock-hint::after { content: ""; position: absolute; left: 28px; bottom: -6px; width: 12px; height: 12px; transform: rotate(45deg); background: #a259f0; }
.st-dock-hint.is-out { opacity: 0; transform: translateY(6px); }
@keyframes stHintIn { from { opacity: 0; transform: translateY(10px) scale(.9); } }
@media (max-width: 860px) { .st-dock-open em { display: none; } .st-dock-open { padding: 5px; } }
@media (prefers-reduced-motion: reduce) { .st-launch-orb i, .st-launch-orb b, .st-launch-bar i, .st-dock-open svg, .st-item.is-launched, .st-launch { animation: none; } }
/* Сумма в карточке оплаты на главной: градиент на самом числе — на телефоне (Safari) родительский
   background-clip:text не прокрашивает вложенный inline-flex, и число было прозрачным */
.sd-pay b { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #fff !important; }
.sd-pay b .neu { color: #ffb3ef; text-shadow: 0 0 18px rgba(255, 79, 216, 0.45); }

/* Шапка гостя на телефоне не прилипает: полупрозрачная полоса поверх контента в браузере Telegram смотрится грязно */
@media (max-width: 860px) {
  .lp-nav:not(.is-menu), .lp-nav.is-solid:not(.is-menu) { position: absolute; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Окно входа на компьютере: QR для телефона + Telegram Desktop / Web */
.overlay:has(.tgq) { padding: 16px; place-items: center; }
.sheet:has(.tgq) { width: min(420px, 100%); max-height: calc(100dvh - 32px); border-radius: 28px; border-bottom: 1px solid var(--line-2, var(--line)); }
.sheet:has(.tgq) .sheet-grab { display: none; }
.tgq { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 4px 4px 6px; text-align: center; }
.tgq-code { position: relative; width: 216px; height: 216px; padding: 16px; border-radius: 24px; background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 50px -18px rgba(124, 92, 255, 0.85), 0 10px 40px -20px rgba(255, 79, 216, 0.8); animation: tgqIn .45s cubic-bezier(.2, .8, .2, 1); }
.tgq-qr, .tgq-qr svg { display: block; width: 100%; height: 100%; }
.tgq-qr svg { shape-rendering: crispEdges; }
.tgq-logo { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #7c5cff, #ff4fd8); box-shadow: 0 0 0 5px #fff; }
.tgq-logo svg { width: 20px; height: 20px; margin-left: -2px; }
@keyframes tgqIn { from { opacity: 0; transform: scale(.94); } }
.tgq-steps { margin: 0; padding: 0; list-style: none; counter-reset: tgq; display: flex; flex-direction: column; gap: 8px; align-self: stretch; text-align: left; }
.tgq-steps li { counter-increment: tgq; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.tgq-steps li::before { content: counter(tgq); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--f-text); color: #fff; background: rgba(124, 92, 255, 0.22); border: 1px solid rgba(160, 130, 255, 0.35); }
.tgq-steps b { color: var(--text); }
.tgq-or { align-self: stretch; display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); }
.tgq-or::before, .tgq-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tgq-btns { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tgq-btns .btn { justify-content: center; }
.tgq-btns .btn-ghost { border: 1px solid var(--line-2, rgba(255, 255, 255, 0.14)); background: rgba(255, 255, 255, 0.04); }
.tgq-btns .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.tgq-wait { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.tgq-wait i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #5ee6a8; box-shadow: 0 0 0 0 rgba(94, 230, 168, 0.6); animation: tgqPulse 1.6s ease-out infinite; }
@keyframes tgqPulse { to { box-shadow: 0 0 0 10px rgba(94, 230, 168, 0); } }
@media (prefers-reduced-motion: reduce) { .tgq-code, .tgq-wait i { animation: none; } }

/* Шаги на телефоне: линия начинается из центра первого кружка, а не торчит точкой над «01» */
@media (max-width: 860px) {
  .lp-flow::before, .lp-flow::after { top: 40px; }
}

/* ==========================================================================
   Биллинг: баланс, цены и история списком (суммы больше не ломаются в столбик)
   ========================================================================== */
.bill-hero { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px 20px; padding: 24px; border-radius: var(--r-lg);
  background: var(--card-solid); border: 1px solid var(--line); }
.bill-bal { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bill-bal b { font: 800 clamp(30px, 6vw, 40px)/1 var(--f-display); letter-spacing: -0.03em; white-space: nowrap; }
.bill-bal b small { font: 600 14px var(--f-text); color: var(--muted); letter-spacing: 0; }
.bill-prices { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.bill-prices li { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); font-weight: 800; font-size: 15px; }
.bill-prices li span:first-child { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
@media (max-width: 400px) { .bill-prices li { padding: 10px; } .bill-prices li span:first-child { font-size: 11px; } }
.bill-hist { margin: 0; padding: 0; list-style: none; }
.bill-hist li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bill-hist li:last-child { border-bottom: 0; }
.bill-hist-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bill-hist-t b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.bill-hist-t small { font-size: 12px; color: var(--dim); }
.bill-hist-a { flex: none; white-space: nowrap; font-weight: 800; font-size: 15px; }
.bill-hist-a.is-plus { color: var(--green); }
@media (max-width: 520px) {
  .bill-hero { grid-template-columns: 1fr; padding: 20px; }
  .bill-hero .btn { width: 100%; }
}

/* Статистика: длинное название площадки переносится, а не обрезается */
.kpi-v--txt { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* ==========================================================================
   Кабинет на телефоне: спокойнее и понятнее.
   Градиент остаётся только у главной кнопки, прогресса и плеера; карточки — ровные,
   заголовки — белые, активные переключатели — светлая плашка, фон — без шума.
   ========================================================================== */
@media (max-width: 860px) {
  body:has(.app:not(.is-guest)) .bg-blob--b,
  body:has(.app:not(.is-guest)) .bg-blob--c,
  body:has(.app:not(.is-guest)) .bg-grid,
  body:has(.app:not(.is-guest)) .bg > :not([class]) { display: none; }
  body:has(.app:not(.is-guest)) .bg-blob--a { opacity: 0.35; }

  .app:not(.is-guest) {
    --card: #13111a; --card-2: #191721; --card-solid: #13111a;
    --line: rgba(255, 255, 255, 0.07); --line-2: rgba(255, 255, 255, 0.12);
  }
  /* Ровные карточки без фиолетового отлива и свечения */
  .app:not(.is-guest) .main :is(.card, .kpi, .kpi--main, .hero, .dash-hero, .st-hero, .st-card, .sup-head, .bill-hero) {
    background: #13111a; background-image: none; border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .app:not(.is-guest) .main :is(.dash-hero, .st-hero, .hero)::before,
  .app:not(.is-guest) .main :is(.dash-hero, .st-hero, .hero)::after { display: none; }

  /* Заголовки и цифры — белые, без радужного текста */
  .app:not(.is-guest) .main :is(.grad-text, .tbl-n, .sup-author) {
    background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; animation: none;
  }
  .app:not(.is-guest) .main .sup-author { color: var(--muted); }
  .app:not(.is-guest) .main .page-head .kicker,
  .app:not(.is-guest) .main :is(.dash-hero, .st-hero) .kicker { display: none; }
  .app:not(.is-guest) .main .h1 { font-size: 28px; }
  .app:not(.is-guest) .main .page-head { margin-bottom: 18px; }

  /* Активный пункт переключателей — светлая плашка, а не ещё один градиент */
  .app:not(.is-guest) .main :is(.seg-pill, .st-kind-pill, .st-modes-pill) { background: rgba(255, 255, 255, 0.14); box-shadow: none; }
  .app:not(.is-guest) .main :is(.tab-l.is-on, .st-chip.is-on) { background: rgba(255, 255, 255, 0.14); background-image: none; box-shadow: none; color: #fff; border-color: transparent; }

  /* Иконки-плашки и мелкие кнопки — нейтральные */
  .app:not(.is-guest) .main :is(.tip-ic, .st-lib-ico, .st-dice, .st-more-btn) { background: rgba(255, 255, 255, 0.08); box-shadow: none; color: #fff; }
  .topbar .cab-burger { background: rgba(255, 255, 255, 0.14); box-shadow: 0 0 0 2px #0b0915; }

  /* Главная кнопка: тот же градиент, но без радуги и тяжёлого свечения */
  .app:not(.is-guest) .main .btn-primary { background: linear-gradient(120deg, #7c5cff, #e14fe0); box-shadow: 0 8px 22px -12px rgba(225, 79, 224, 0.8); }
  .app:not(.is-guest) .main .btn-primary::after { display: none; }
}

/* ==========================================================================
   Лендинг на телефоне: короче и спокойнее.
   Длинные колонки карточек (возможности, тарифы, преимущества) — горизонтальная лента со свайпом;
   фон без сетки и лишних пятен; заголовки разделов белые, градиент — только в первом экране.
   ========================================================================== */
@media (max-width: 860px) {
  body:has(.app.is-guest) .bg-blob--c,
  body:has(.app.is-guest) .bg-grid,
  body:has(.app.is-guest) .bg > :not([class]) { display: none; }
  body:has(.app.is-guest) .bg-blob--b { opacity: 0.16; }

  .app.is-guest :is(.bento, .lp-prices, .lp-perks) {
    display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-left: -16px; margin-right: -16px; padding: 4px 16px 16px; scroll-padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .app.is-guest :is(.bento, .lp-prices, .lp-perks)::-webkit-scrollbar { display: none; }
  .app.is-guest :is(.bento, .lp-prices, .lp-perks) > * { flex: 0 0 min(84%, 340px); scroll-snap-align: start; grid-column: auto; min-width: 0; }
  .app.is-guest .lp-perks > * { flex-basis: min(72%, 280px); }

  /* Заголовки разделов — белые: акцент цветом только в главном заголовке */
  .app.is-guest .lp :is(.grad-text, .lp-stat > b, .bento-count b) {
    background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; animation: none;
  }
}

/* ==========================================================================
   Поддержка на телефоне: чат на весь экран, как в мессенджере.
   Без карточки с отступами, компактная шапка в одну строку, крупнее сообщения и поле ввода.
   ========================================================================== */
@media (max-width: 860px) {
  .app:not(.is-guest) .main:has(.sup-page) { padding-bottom: 0; }
  .sup-page { margin: 0 -14px; }
  /* В браузере нижней панели нет — чат до низа экрана; в Telegram оставляем место под панель */
  .sup { height: calc(100dvh - 74px - var(--safe-t)); min-height: 0; gap: 0; }
  html.in-tg:not(.in-tg-desk) .sup { height: calc(100dvh - 74px - var(--safe-t) - var(--tab-h) - 18px - max(var(--safe-b), var(--tg-safe-bottom, 0px))); }
  html.st-dock-on .sup { height: calc(100dvh - 74px - var(--safe-t) - 92px); }

  .app:not(.is-guest) .main .sup-chat.card { border-radius: 0; border-width: 1px 0 0; background: #0e0c14; }
  .app:not(.is-guest) .main .sup-head { padding: 10px 14px; gap: 10px; background: #13111a; border: 0; border-bottom: 1px solid var(--line); }
  .sup-head-ava .sup-ava { width: 36px; height: 36px; border-radius: 12px; }
  .sup-head-text b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sup-head-text small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .sup-feed { padding: 8px 12px 10px; gap: 4px; }
  .sup-day { margin: 10px 0 8px; }
  .sup-day span { background: #1c1926; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sup-bubble { max-width: 86%; font-size: 15.5px; line-height: 1.45; padding: 9px 13px 7px; }
  .is-me .sup-bubble { background: #5a3fe0; box-shadow: none; }
  .is-them .sup-bubble { background: #1c1926; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sup-img { max-width: 100%; max-height: 240px; object-fit: cover; }

  .sup-compose { padding: 8px 10px calc(8px + var(--safe-b)); background: #13111a; }
  html.in-tg:not(.in-tg-desk) .sup-compose { padding-bottom: 8px; }
  .sup-send { width: 44px; height: 44px; flex: none; }
}

/* Меню-бургер: баланс уже есть в шапке, здесь только главная кнопка на всю ширину */
.cab-menu-top .cab-menu-new { flex: 1; justify-content: center; min-height: 50px; }

/* Профиль: баланс — плашка с мозгом и кнопкой пополнения */
.acc-bal { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 14px 14px 16px; border-radius: 20px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 106, 226, 0.16), transparent 55%), #1a1724; border: 1px solid rgba(255, 143, 224, 0.18); }
.acc-bal-ic { position: relative; width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center; color: #ffb3ef;
  background: linear-gradient(145deg, rgba(255, 106, 226, 0.22), rgba(124, 92, 255, 0.18)); box-shadow: inset 0 0 0 1px rgba(255, 143, 224, 0.28), 0 10px 24px -14px rgba(255, 79, 216, 0.9); }
.acc-bal-ic svg { width: 30px; height: 30px; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(255, 106, 226, 0.55)); animation: accBrain 3.2s ease-in-out infinite; }
@keyframes accBrain { 50% { transform: scale(1.06); filter: drop-shadow(0 0 10px rgba(255, 106, 226, 0.8)); } }
.acc-bal-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc-bal-t small { font-size: 12px; font-weight: 700; color: var(--muted); }
.acc-bal-t b { display: flex; align-items: baseline; gap: 6px; font: 800 24px/1.1 var(--f-display); letter-spacing: -0.02em; color: #fff; white-space: nowrap; }
.acc-bal-t em { font: 600 13px var(--f-text); font-style: normal; color: var(--muted); letter-spacing: 0; }
.acc-bal-add { flex: none; }
@media (max-width: 400px) { .acc-bal { flex-wrap: wrap; } .acc-bal-add { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .acc-bal-ic svg { animation: none; } }

/* ==========================================================================
   Студия на телефоне: выбранная вкладка видна сразу; режимы «С готовым треком» — понятный список
   ========================================================================== */
@media (max-width: 860px) {
  /* Выбранный пункт переключателей — плотная светлая плашка, невыбранный — приглушён */
  .app:not(.is-guest) .main :is(.seg-pill, .st-kind-pill, .st-modes-pill) {
    background: #3a3550; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 6px 16px -8px rgba(0, 0, 0, 0.8);
  }
  .app:not(.is-guest) .main .st-kind button { color: var(--dim); transition: color .25s; }
  .app:not(.is-guest) .main .st-kind button.is-on { color: #fff; }
  .app:not(.is-guest) .main .st-kind button.is-on > svg { color: #ff8fe0; }

  /* Режимы — строки: иконка, название с подсказкой, цена справа */
  .st-tools-group { grid-template-columns: 1fr; gap: 6px; }
  .st-tool { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 11px 12px; border-radius: 16px; }
  .st-tool .st-tool-ico { width: 40px; height: 40px; border-radius: 12px; }
  .st-tool .st-tool-txt { padding-right: 0; }
  .st-tool-txt b { font-size: 14.5px; }
  .st-tool-txt small { display: block; font-size: 12px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .st-tool-price { position: static; align-self: center; padding: 4px 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); color: #e9e4ff; font-size: 12px; }
  .st-tool-price svg { width: 13px; height: 13px; }
  .st-tool:hover { transform: none; }
}

/* ==========================================================================
   Студия на телефоне: верх без эквалайзера, баланс и «Мои треки» — две ровные плитки
   ========================================================================== */
@media (max-width: 860px) {
  .app:not(.is-guest) .main .st-hero { padding: 20px 16px 16px; border-radius: 24px; }
  .app:not(.is-guest) .main .st-hero-bg { display: none; }
  .app:not(.is-guest) .main .st-title { font-size: 26px; line-height: 1.08; }
  .app:not(.is-guest) .main .st-hero .sub { font-size: 14px; margin-top: 8px; }
  .app:not(.is-guest) .main .st-hero-side { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; width: 100%; }
  .app:not(.is-guest) .main :is(.st-bal, .st-lib-btn) {
    min-width: 0; min-height: 66px; margin: 0; padding: 12px; border-radius: 16px; display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: none; text-align: left;
  }
  .app:not(.is-guest) .main .st-bal b { font: 800 21px/1.05 var(--f-display); white-space: nowrap; }
  .app:not(.is-guest) .main :is(.st-bal, .st-lib-btn) small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; }
  .app:not(.is-guest) .main .st-lib-btn > span:not(.st-lib-ico) { min-width: 0; flex: 1; }
  .app:not(.is-guest) .main .st-lib-btn b { display: block; font: 700 15px/1.15 var(--f-text); white-space: nowrap; }
  .app:not(.is-guest) .main .st-lib-btn .st-lib-keep { display: none; }
  .app:not(.is-guest) .main .st-lib-btn > svg { width: 16px; height: 16px; flex: none; color: var(--dim); }
  .app:not(.is-guest) .main .st-lib-ico { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center;
    background: linear-gradient(145deg, rgba(124, 92, 255, 0.35), rgba(255, 79, 216, 0.25)); color: #fff; }
}

/* Студия на телефоне: итог и кнопка «Создать» прилипают к низу экрана, пока видна форма */
@media (max-width: 860px) {
  .app:not(.is-guest) .main .st-card:has(.st-foot) { overflow: visible; }
  .app:not(.is-guest) .main .st-foot {
    position: sticky; z-index: 6; bottom: calc(10px + var(--safe-b));
    grid-template-columns: 1fr auto; gap: 10px 12px; margin: 4px -6px 0; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px;
    background: rgba(22, 19, 31, 0.96); box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, 0.9);
  }
  html.in-tg:not(.in-tg-desk) .app:not(.is-guest) .main .st-foot { bottom: calc(var(--tab-h) + 22px + max(var(--safe-b), var(--tg-safe-bottom, 0px))); }
  html.st-dock-on .app:not(.is-guest) .main .st-foot { bottom: 100px; }
  .app:not(.is-guest) .main .st-foot .st-qty { display: flex; align-items: center; gap: 10px; }
  .app:not(.is-guest) .main .st-foot .st-qty > small { display: none; }
  .app:not(.is-guest) .main .st-foot .st-sum { text-align: right; }
  .app:not(.is-guest) .main .st-foot .st-sum > span { display: none; }
  .app:not(.is-guest) .main .st-foot .st-go { grid-column: 1 / -1; width: 100%; }
  .app:not(.is-guest) .main .st-recipe kbd { display: none; }
}
@media (max-width: 860px) {
  /* Прилипший итог — одна строка: счётчик · цена · кнопка */
  .app:not(.is-guest) .main .st-foot { grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; padding: 8px; border-radius: 18px; }
  .app:not(.is-guest) .main .st-foot .st-qty > .label,
  .app:not(.is-guest) .main .st-foot .st-sum > small { display: none; }
  .app:not(.is-guest) .main .st-foot .st-qty .st-qty-note { display: block; font-size: 12px; }
  .app:not(.is-guest) .main .st-foot .st-stepper button { width: 32px; height: 36px; }
  .app:not(.is-guest) .main .st-foot .st-sum b { font-size: 18px; }
  .app:not(.is-guest) .main .st-foot .st-go { grid-column: auto; min-height: 48px; padding: 0 12px; font-size: 15px; }
  .app:not(.is-guest) .main .st-lib-btn small { white-space: normal; line-height: 1.25; }
}
@media (max-width: 860px) {
  .app:not(.is-guest) .main .st-foot .st-go { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 860px) {
  .app:not(.is-guest) .main .st-foot .st-go > svg { display: none; }
  .app:not(.is-guest) .main .st-foot .st-go { font-size: 14.5px; }
}

/* ==========================================================================
   Оригинальные логотипы моделей: Suno — круг, Mureka — скруглённый квадрат, Lyria — знак DeepMind
   ========================================================================== */
.st-logo { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.st-logo--suno { border-radius: 50%; }
.st-logo--mureka { border-radius: 24%; }
.st-logo--lyria { width: 78%; height: 78%; image-rendering: auto; }
.st-model-ico.st-model-ico--logo { background: none; box-shadow: none; padding: 0; display: grid; place-items: center; overflow: visible; }
.st-model-ico--logo .st-logo--lyria { padding: 0; border-radius: 0; }
.st-model-ico--logo:has(.st-logo--lyria) { background: #fff; border-radius: 30%; }
.st-model.is-on .st-model-ico--logo .st-logo { filter: drop-shadow(0 6px 14px hsla(var(--h), 90%, 60%, 0.55)); }
.st-logo--xs { display: inline-block; width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.st-logo--xs.st-logo--lyria { width: 16px; height: 16px; background: #fff; border-radius: 4px; padding: 1.5px; }
.st-tools-label { display: inline-flex; align-items: center; gap: 7px; }
.st-badge--logo { display: inline-flex; align-items: center; gap: 6px; }

/* Lyria: официальный векторный значок (синий) — на светлой плитке, как у Google */
.st-logo--lyria { width: 100%; height: 100%; background: #fff; border-radius: 24%; padding: 0; image-rendering: auto; }
.st-model-ico--logo:has(.st-logo--lyria) { background: none; border-radius: 0; }
.st-logo--xs.st-logo--lyria { width: 16px; height: 16px; padding: 0; border-radius: 4px; }

/* Lyria: звезда Gemini — прозрачная, без плитки */
.st-logo--lyria, .st-logo--xs.st-logo--lyria { background: none; border-radius: 0; padding: 0; }
.st-model-ico--logo .st-logo--lyria { width: 88%; height: 88%; }

/* ==========================================================================
   «Мои треки» в правой колонке на компьютере: строка в два этажа.
   Сверху обложка, название и метки (переносятся, а не обрезаются); снизу кнопки, «Выпустить» справа.
   ========================================================================== */
.st-history { container-type: inline-size; container-name: sthist; }
@media (min-width: 861px) {
  @container sthist (max-width: 760px) {
    .st-track { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; column-gap: 12px; row-gap: 8px; padding: 10px; }
    .st-track > .st-cover { grid-row: 1 / span 2; width: 56px; height: 56px; align-self: start; }
    .st-track-main { grid-column: 2; }
    .st-track-main b { flex-wrap: wrap; row-gap: 4px; white-space: normal; }
    .st-track-title { flex: 0 1 auto; max-width: 100%; }
    .st-track-main small { white-space: nowrap; }
    .st-track-act { grid-column: 2; justify-content: flex-start; flex-wrap: nowrap; }
    .st-track-act .st-release { margin-left: auto; }
    .st-track-act .st-icon-btn { width: 36px; height: 36px; }
  }
}

/* Подсказки «?»: одна (стилизованная, из core.js), без второй CSS-подложки; знак ровно по центру кружка */
.tip { letter-spacing: 0; text-indent: 0; line-height: 1; font-family: var(--f-text); padding: 0; vertical-align: middle; }
.tip:hover::after, .tip:focus::after { content: none; display: none; }

/* Маркировка ИИ в треке — как в форме Sonar: выбор и строка-пояснение */
.wz-ai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; align-items: center; }
.wz-ai .field { margin: 0; }
.wz-ai .label:empty { display: none; }
.wz-ai-note { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 14px; border-radius: 14px; font-size: 13px; line-height: 1.45; color: var(--muted);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.wz-ai-note svg { width: 17px; height: 17px; flex: none; color: var(--v2); }
@media (max-width: 720px) { .wz-ai { grid-template-columns: 1fr; } }

/* Поля текста: аккуратный уголок растягивания и полоса прокрутки без «квадрата» в углу */
.textarea, .st-area { scrollbar-width: thin; scrollbar-color: rgba(255, 143, 224, 0.6) transparent; }
.textarea::-webkit-scrollbar, .st-area::-webkit-scrollbar { width: 6px; }
.textarea::-webkit-scrollbar-thumb, .st-area::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(255, 143, 224, 0.55); }
.textarea::-webkit-scrollbar-track, .st-area::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.textarea::-webkit-scrollbar-corner, .st-area::-webkit-scrollbar-corner { background: transparent; }
.textarea::-webkit-resizer, .st-area::-webkit-resizer { background: transparent; border: 0; }

/* Пояснение под подписью поля */
.field-help { margin: -2px 0 8px; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ==========================================================================
   Широкий монитор (html.nr-wide ставит скрипт в <head>): всё крупнее через zoom (--nr-z),
   лендинг ещё и шире (--nr-ww). Внутри zoom единицы vh/dvh тоже растут — высоты делим на --nr-z.
   ========================================================================== */
html.nr-wide .app, html.nr-wide .st-dock { zoom: var(--nr-z); }
html.nr-wide .app { min-height: calc(100dvh / var(--nr-z)); }
html.nr-wide .side { height: calc(100dvh / var(--nr-z)); }
html.nr-wide .login { min-height: calc(100dvh / var(--nr-z) - 120px); }
html.nr-wide .sup { height: calc(100dvh / var(--nr-z) - 82px); }
html.nr-wide.st-dock-on .sup { height: calc(100dvh / var(--nr-z) - 178px); }
html.nr-wide .st-list { max-height: calc(100vh / var(--nr-z) - 120px); }
/* Лендинг на 21:9 / 32:9 — шире, чтобы не было пустых полей по бокам */
html.nr-wide .app.is-guest :is(.lp, .land, .login) { max-width: var(--nr-ww); }
html.nr-wide #preload { zoom: var(--nr-z); }
/* Шапка лендинга — по ширине контента, а не по краям огромного экрана */
html.nr-wide .app.is-guest .lp-nav {
  padding-left: max(32px, calc((100vw / var(--nr-z) - var(--nr-ww)) / 2));
  padding-right: max(32px, calc((100vw / var(--nr-z) - var(--nr-ww)) / 2));
}

/* Android: у Яндекс Браузера, Samsung Internet и браузера Xiaomi своя кнопка «наверх» в правом нижнем углу —
   нашу ставим слева, чтобы они не наезжали друг на друга */
html.is-android .to-top { right: auto; left: calc(16px + env(safe-area-inset-left, 0px)); }

/* ==========================================================================
   Лендинг на телефоне: точки слайдов справа (компактные, по тапу — переход) и быстрее появление блоков
   ========================================================================== */
@media (max-width: 860px) {
  .lp-dots { display: flex; right: calc(6px + env(safe-area-inset-right, 0px)); gap: 9px; padding: 8px 5px; border-radius: 99px;
    background: rgba(10, 8, 18, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .lp-dots button { width: 6px; height: 6px; }
  .lp-dots button.is-on { height: 18px; }
  /* увеличенная зона нажатия, сама точка остаётся маленькой */
  .lp-dots button::before { content: ""; position: absolute; inset: -6px -10px; }
  .lp-dots button span { display: none; }
  html.lp-menu-open .lp-dots { opacity: 0; pointer-events: none; }

  /* Появление: короче и почти без задержек между карточками — контент не «догружается» по секунде */
  .lp-slide .rv, .lp-slide .rv * { transition-duration: .45s !important; }
  .lp-slide .rv, .lp-slide .rv .vf-item, .lp-slide .rv .lp-mq { transition-delay: 0s !important; }
}

/* ==========================================================================
   Блоки отделены друг от друга, а не сплошная масса
   ========================================================================== */
/* Кабинет на телефоне: карточки на тон светлее фона, заметная рамка, блик сверху и мягкая тень */
@media (max-width: 860px) {
  .app:not(.is-guest) .main :is(.card, .kpi, .kpi--main, .hero, .dash-hero, .st-hero, .st-card, .bill-hero, .attn2) {
    background: linear-gradient(180deg, #1b1826 0%, #15131e 100%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 26px -20px rgba(0, 0, 0, 0.95);
  }
  /* Главный блок страницы — тонкая цветная линия сверху */
  .app:not(.is-guest) .main :is(.dash-hero, .st-hero, .bill-hero) { position: relative; overflow: hidden; }
  .app:not(.is-guest) .main :is(.dash-hero, .st-hero, .bill-hero)::before {
    content: ""; display: block; position: absolute; inset: 0 22px auto 22px; width: auto; height: 2px; border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, transparent, #8b6dff 20%, #ff5fdc 80%, transparent); opacity: 1;
    transform: none; filter: none; animation: none; pointer-events: none;
  }
  /* «Требуют внимания»: полоска слева цветом статуса */
  .app:not(.is-guest) .main .attn2 { position: relative; overflow: hidden; }
  .app:not(.is-guest) .main .attn2::after { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: #ffb547; }
  .app:not(.is-guest) .main .attn2:has(.pill--bad)::after { background: #ff5c7a; }
  /* Больше воздуха между блоками */
  .app:not(.is-guest) .main .page > * + * { margin-top: 16px; }
  .app:not(.is-guest) .main .attn { display: flex; flex-direction: column; gap: 12px; }
}

/* Лендинг: тонкая градиентная линия между разделами */
.app.is-guest .lp-sec { position: relative; }
.app.is-guest .lp-sec + .lp-sec::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.35) 30%, rgba(255, 79, 216, 0.35) 70%, transparent);
}
/* На телефоне каждый второй раздел — на чуть заметной подложке во всю ширину */
@media (max-width: 860px) {
  .app.is-guest .lp-sec { padding-bottom: 48px; }
  .app.is-guest .lp-sec:nth-of-type(even) {
    margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px;
    background: linear-gradient(180deg, rgba(124, 92, 255, 0.05), rgba(255, 255, 255, 0.015) 40%, rgba(255, 79, 216, 0.04));
  }
}

/* Точки слайдов на телефоне: по касанию раскрываются в панель с названиями — выбирать легко, можно вести пальцем */
@media (max-width: 860px) {
  .lp-dots { touch-action: none; transition: opacity .35s ease, padding .3s var(--ease), gap .3s var(--ease), background .3s, box-shadow .3s; }
  .lp-dots button { transition: height .3s var(--ease), width .3s var(--ease), background .25s, padding .3s var(--ease); }
  .lp-dots.is-open {
    gap: 2px; padding: 8px; border-radius: 22px; align-items: stretch;
    background: rgba(16, 13, 28, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 20px 50px -14px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
  .lp-dots.is-open button {
    width: auto; height: 38px; min-width: 168px; padding: 0 14px 0 26px; border-radius: 12px; background: transparent;
    display: flex; align-items: center; text-align: left; box-shadow: none;
  }
  .lp-dots.is-open button::after { content: ""; position: absolute; left: 11px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
  .lp-dots.is-open button span {
    display: block; position: static; opacity: 1; transform: none; padding: 0; background: none; box-shadow: none; border: 0;
    font: 700 14px/1 var(--f-text); color: var(--muted); white-space: nowrap; pointer-events: none;
  }
  .lp-dots.is-open button.is-on { background: rgba(124, 92, 255, 0.16); }
  .lp-dots.is-open button.is-on::after { background: linear-gradient(180deg, #9a7bff, #ff4fd8); box-shadow: 0 0 8px rgba(255, 79, 216, 0.8); }
  .lp-dots.is-open button.is-on span { color: #fff; }
  .lp-dots.is-open button.is-hover { background: linear-gradient(90deg, rgba(124, 92, 255, 0.45), rgba(255, 79, 216, 0.35)); }
  .lp-dots.is-open button.is-hover span { color: #fff; }
  .lp-dots.is-open button.is-hover::after { background: #fff; }
  /* пока панель открыта — она поверх всего и видна даже на первом экране */
  .lp-dots.is-open.is-hero { opacity: 1; pointer-events: auto; }
  html.lp-dots-open .to-top { opacity: 0; pointer-events: none; }
}

/* Android: у браузеров (Яндекс, Samsung, Xiaomi) своя кнопка «наверх» — нашу не показываем. На iPhone остаётся. */
html.is-android .to-top { display: none !important; }

/* Лендинг на телефоне — без полосы прокрутки (листают пальцем, справа навигация по слайдам). В кабинете полоса остаётся. */
@media (max-width: 860px) {
  html:has(.app.is-guest), html:has(.app.is-guest) body { scrollbar-width: none; }
  html:has(.app.is-guest)::-webkit-scrollbar, html:has(.app.is-guest) body::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; }
}

/* Телефон: точки слайдов видны и на первом экране (чуть бледнее), чтобы навигация не «пропадала» */
@media (max-width: 860px) {
  .lp-dots.is-hero { opacity: .7; pointer-events: auto; }
}

/* ==========================================================================
   Плавность меню и панели слайдов на телефоне: анимируем только opacity и transform
   (их считает видеокарта), без круга-маски, без анимации размеров и без размытия фона
   ========================================================================== */
@media (max-width: 960px) {
  /* Меню лендинга: вместо расширяющегося круга — быстрое появление со сдвигом */
  .lp-menu {
    clip-path: none !important; opacity: 0; transform: translate3d(0, -12px, 0); visibility: hidden;
    transition: opacity .22s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .28s;
    will-change: opacity, transform; contain: layout paint;
  }
  .lp-nav.is-menu .lp-menu { opacity: 1; transform: none; visibility: visible; transition: opacity .22s ease, transform .28s cubic-bezier(.22, 1, .36, 1); }
  .lp-menu a, .lp-menu-foot { transition: opacity .2s ease, transform .26s cubic-bezier(.22, 1, .36, 1) !important; transition-delay: calc(var(--i, 0) * 18ms) !important; }
}
@media (max-width: 860px) {
  /* Меню кабинета: отдельный слой, короче и без задержек по 35 мс на каждый пункт */
  html:not(.in-tg) .cab-menu { will-change: opacity, transform; contain: layout paint; transition: opacity .2s ease, transform .26s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .26s; }
  html:not(.in-tg) .cab-menu.is-open { transition: opacity .2s ease, transform .26s cubic-bezier(.22, 1, .36, 1); }
  .cab-menu-list a { transition: opacity .2s ease, transform .26s cubic-bezier(.22, 1, .36, 1); }
  .cab-menu.is-open .cab-menu-list a { transition-delay: calc(var(--i) * 15ms); }

  /* Панель слайдов: без анимации размеров у кнопок и без размытия; раскрытие — появление со сдвигом */
  .lp-dots, .lp-dots.is-open { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: opacity .2s ease !important; }
  .lp-dots button { transition: background .15s ease !important; }
  .lp-dots { background: rgba(10, 8, 18, 0.72); }
  .lp-dots.is-open { background: rgba(16, 13, 28, 0.97); animation: dotsOpen .2s cubic-bezier(.22, 1, .36, 1); will-change: transform, opacity; }
  @keyframes dotsOpen { from { opacity: 0; transform: translate3d(12px, -50%, 0) scale(.96); } to { opacity: 1; transform: translate3d(0, -50%, 0); } }
}
@media (max-width: 860px) {
  /* раскрытая панель всегда полностью видна (на первом экране точки бледнее, панель — нет) */
  .lp-dots.is-open { opacity: 1 !important; pointer-events: auto !important; }
  @keyframes dotsOpen { from { transform: translate3d(14px, -50%, 0) scale(.95); } to { transform: translate3d(0, -50%, 0); } }
}
@media (max-width: 860px) {
  /* без серой вспышки: при раскрытии кнопки сразу прозрачные (серые точки не «перетекают» в широкие строки) */
  .lp-dots.is-open button, .lp-dots.is-open button::after { transition: none !important; }
}