@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
  box-sizing: border-box;
    font-family: 'Montserrat';
}

:root {
  --bg: #0a0a0d;
  --secondary-bg: #17181c;
  --tertiary-bg: #202127;
  --text: #f5f5f7;
  --hint: #8b8d98;
  --link: #ff8a4d;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);

  --accent-1: #7c6cff;
  --accent-2: #8b5cf6;
  --accent-3: #d946ef;
  --accent-gradient: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 55%, var(--accent-3) 100%);
  --accent-glow: rgba(139, 92, 246, 0.35);

  --button: var(--accent-2);
  --button-text: #ffffff;

  --danger: #ff5c5c;
  --success: #34d17c;
  --info: #5e9fe8;

  --star-1: #ffe27a;
  --star-2: #ffb020;
  --star-3: #ff8a00;
  --star-gradient: linear-gradient(135deg, var(--star-1) 0%, var(--star-2) 55%, var(--star-3) 100%);
  --star-glow: rgba(255, 176, 32, 0.35);
  --star: #ffc94d;

  --radius: 20px;
  --radius-sm: 14px;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat';
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(900px circle at 100% -8%, rgba(139, 92, 246, 0.20), transparent 60%),
    radial-gradient(700px circle at -10% 20%, rgba(217, 70, 239, 0.12), transparent 55%),
    radial-gradient(650px circle at 40% 100%, rgba(91, 140, 255, 0.10), transparent 60%),
    var(--bg);
  min-height: 100vh;
}

::selection {
  background: var(--accent-2);
  color: #fff;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 13, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
}

.topbar-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  min-width: 0;
  letter-spacing: -0.01em;
}

.topbar-brand-icon {
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 0 8px var(--accent-glow));
  display: flex;
  align-items: center;
}

.topbar-brand-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.topbar-back {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--secondary-bg);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.topbar-back svg {
  width: 16px;
  height: 16px;
  display: block;
}

.topbar-back:active {
  background: var(--tertiary-bg);
  border-color: var(--border-strong);
  transform: scale(0.9);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex-shrink: 0;
}

.topbar-credits {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 13px;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  color: var(--star);
}

.topbar-credits-icon {
  font-size: 13px;
  line-height: 1;
  filter: none;
  display: inline-flex;
  align-items: center;
}

.topbar-credits-icon svg {
  width: 15px;
  height: 15px;
  display: block;
}

.topbar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tertiary-bg);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.topbar-avatar-fallback {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}

.topbar-add {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--secondary-bg);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

.topbar-add:active {
  background: var(--tertiary-bg);
}

.topbar-menu {
  position: absolute;
  top: 42px;
  right: 0;
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  min-width: 240px;
  max-width: calc(100vw - 24px);
  overflow: hidden;
  z-index: 60;
}

.topbar-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 13px 15px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.topbar-menu-item svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.topbar-menu-item:active {
  background: var(--tertiary-bg);
}

.topbar-menu-item[data-nav="create-song"] svg {
  color: var(--accent-2);
}

.topbar-menu-item[data-nav="balance"] svg {
  color: var(--star);
}

.topbar-menu-item[data-nav="referral"] svg {
  color: var(--info);
}

.topbar-menu-item[data-nav="history"] svg {
  color: var(--accent-1);
}

.topbar-menu-item[data-nav="admin"] svg {
  color: var(--danger);
}

.package-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.package-card {
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.package-card:active {
  transform: scale(0.99);
}

.package-credits {
  font-size: 20px;
  font-weight: 600;
  color: var(--star);
}

.package-credits span {
  font-size: 13px;
  font-weight: 500;
  color: var(--hint);
}

.package-price {
  font-size: 16px;
  font-weight: 500;
  color: var(--hint);
  margin-right: auto;
}

.package-card .pay-btn {
  width: auto;
  min-height: 40px;
  padding: 10px 22px;
  margin-top: 0;
}

.balance-note {
  text-align: center;
  margin-top: 18px;
}

/* ---- Tariff cards (pages/balance.php) ------------------------------------ */
.tariff-discount-banner {
  background: var(--accent-gradient);
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  box-shadow: 0 8px 20px var(--accent-glow);
}

/* ---- Balance hero + info card (pages/balance.php) ------------------------ */
.balance-hero-card {
  background:
    linear-gradient(160deg, rgba(79, 108, 255, 0.2), rgba(139, 92, 246, 0.05) 60%),
    var(--secondary-bg);
  border: 1px solid rgba(79, 108, 255, 0.35);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
}

.balance-hero-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--hint);
  margin-bottom: 10px;
}

.balance-hero-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.4;
}

.balance-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tertiary-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hint);
}

.balance-hero-pill strong {
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #6f8bff, #a76bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.balance-hero-pill svg {
  width: 18px;
  height: 18px;
}

.balance-info-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 22px;
}

.balance-info-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(79, 108, 255, 0.22), rgba(139, 92, 246, 0.16));
  color: #8fa2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.balance-info-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}

.balance-info-desc {
  font-size: 12px;
  font-weight: 400;
  color: var(--hint);
}

.balance-section-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 3px;
}

.balance-section-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: var(--hint);
  margin: 0 0 16px;
}

.package-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.package-card-price-block {
  text-align: right;
  flex-shrink: 0;
}

.package-card-credits {
  font-size: 12px;
  font-weight: 500;
  color: var(--hint);
  margin-top: 2px;
}

.package-card.package-card-hit {
  position: relative;
  border-color: rgba(79, 108, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(79, 108, 255, 0.55) inset, 0 10px 28px var(--accent-glow);
  overflow: hidden;
}

.package-card.package-card-hit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4f6bff, #8b5cf6, #d946ef);
}

.package-card-ribbon-hit {
  position: absolute;
  top: 14px;
  right: -32px;
  transform: rotate(40deg);
  background: linear-gradient(135deg, #4f6bff, #8b5cf6);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 36px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ---- Payment methods trust card + stats (pages/balance.php) -------------- */
.payment-methods-card {
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 18px;
}

.payment-methods-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--hint);
  margin-bottom: 10px;
}

.payment-methods-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.payment-method-pill {
  background: var(--tertiary-bg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

.payment-methods-secure {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--hint);
}

.balance-stats-card {
  background: linear-gradient(160deg, rgba(52, 209, 124, 0.16), rgba(52, 209, 124, 0.04) 60%), var(--secondary-bg);
  border: 1px solid rgba(52, 209, 124, 0.3);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 12px;
  text-align: center;
}

.balance-stats-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.4;
}

.balance-stats-title b {
  color: var(--success);
  font-weight: 600;
}

.balance-stats-grid {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.balance-stats-grid > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.balance-stats-grid strong {
  font-size: 16px;
  font-weight: 600;
  color: var(--success);
}

.balance-stats-grid span {
  font-size: 11px;
  font-weight: 400;
  color: var(--hint);
}

.balance-home-btn {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.package-list .package-card {
  position: relative;
  background:
    linear-gradient(160deg, rgba(139, 92, 246, 0.14), rgba(217, 70, 239, 0.05) 55%),
    var(--tertiary-bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  padding: 20px 20px 18px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.package-card-ribbon {
  /* Discount ribbon (e.g. "-20%") — mirrored to the opposite top-left
     corner from .package-card-ribbon-hit "Хит" so a package configured with
     both a discount and hit:true (see config.php tariff_packages) can show
     both ribbons at once without overlapping. */
  position: absolute;
  top: 14px;
  left: -32px;
  transform: rotate(-40deg);
  background: linear-gradient(135deg, #ff5f6d, #ff8a00);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 36px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.package-card-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  padding-right: 40px;
}

.package-card-desc {
  font-size: 12px;
  font-weight: 400;
  color: var(--hint);
  margin-bottom: 8px;
}

.package-card-prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.package-card-price-old {
  font-size: 13px;
  font-weight: 500;
  color: var(--hint);
  text-decoration: line-through;
}

.package-card-price-new {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}

.package-card-per-unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--star);
  margin-bottom: 14px;
}

.package-card .package-card-pay {
  width: 100%;
  min-height: 46px;
  margin-top: 0;
  padding: 10px 22px;
  background: linear-gradient(135deg, #4f6bff, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-weight: 500;
  box-shadow: 0 8px 18px var(--accent-glow);
}

.package-card .package-card-pay:active {
  transform: scale(0.98);
}

/* ---- Compact tariff rows (Базовый / PRO) --------------------------------- */
.tariff-compact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.tariff-compact-row:active {
  transform: scale(0.99);
}

.tariff-compact-row-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.tariff-compact-row-name {
  font-size: 17px;
  font-weight: 600;
}

.tariff-compact-row-desc {
  font-size: 13px;
  font-weight: 600;
  color: var(--hint);
}

.tariff-compact-row-price {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}

.tariff-compact-row-price svg {
  width: 16px;
  height: 16px;
  color: var(--hint);
  flex-shrink: 0;
}

/* ---- Payment method bottom sheet (СБП / Карта РФ) ------------------------ */
.payment-sheet-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: var(--tertiary-bg);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 16px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  margin-bottom: 10px;
}

.payment-sheet-item:active {
  transform: scale(0.99);
}

.payment-sheet-item.featured {
  border-color: var(--accent-1);
  box-shadow: 0 0 0 1px var(--accent-1) inset, 0 8px 20px var(--accent-glow);
}

.payment-sheet-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.payment-sheet-icon img {
  width: 24px;
  height: 24px;
  display: block;
}

/* ---- "Номинации" static info card (pages/charts.php) --------------------- */
.chart-nomination-card {
  border: 1px solid rgba(79, 108, 255, 0.3);
  background: linear-gradient(160deg, rgba(79, 108, 255, 0.12), rgba(139, 92, 246, 0.03) 65%), var(--secondary-bg);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 14px;
}

.chart-nomination-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 6px;
}

.chart-nomination-card p {
  margin: 0;
  color: var(--hint);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  /* Hard fix (v99): the floating bottom-nav is `position: fixed`, so page
     content needs guaranteed clearance from the bottom of the viewport, or
     the very last bit of scrollable content (submit buttons especially)
     ends up hidden underneath it. Some devices/in-app browsers (notably
     iPhone Pro Max models opened inside Instagram's/Telegram's in-app
     browser) report a much bigger env(safe-area-inset-bottom) than a plain
     Mobile Safari tab, and previously this padding was a single hardcoded
     112px that didn't grow with it at all — this always adds whatever the
     real safe-area inset is (falling back to a sane 24px on browsers that
     don't support env()) on top of a bigger base buffer, so there's always
     real breathing room below the nav on every device.
   */
  padding: 24px 16px calc(140px + env(safe-area-inset-bottom, 24px));
}

.header {
  text-align: center;
  margin-bottom: 18px;
  background:
    linear-gradient(160deg, rgba(139, 92, 246, 0.32), rgba(217, 70, 239, 0.16) 55%, rgba(91, 140, 255, 0.22)),
    var(--secondary-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 28px 20px 22px;
  box-shadow: 0 20px 50px rgba(139, 92, 246, 0.22);
}

.header .subtitle {
  max-width: 280px;
  margin-inline: auto;
}

.header-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 18px var(--accent-glow));
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-icon svg {
  width: 56px;
  height: 56px;
  display: block;
}

.header-brand {
  margin: 0 0 2px;
  color: var(--accent-1);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.header h1 {
  font-size: 22px;
  margin: 0 0 6px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.subtitle {
  margin: 0;
  color: var(--hint);
  font-size: 14px;
  line-height: 1.4;
}

.card {
  background:
    linear-gradient(180deg, rgba(139, 92, 246, 0.10), rgba(255, 255, 255, 0.015)),
    var(--secondary-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}

.field {
  margin-bottom: 18px;
}

.field:last-of-type {
  margin-bottom: 0;
}

label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.optional {
  font-weight: 400;
  color: var(--hint);
  font-size: 13px;
}

textarea,
input[type="text"],
select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 12px 14px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 44px;
}

textarea:focus,
input[type="text"]:focus,
select:focus {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

/* All textareas AND inputs are capped at 13px site-wide (set on the shared
   rule above too) — mobile Telegram WebViews render form fields noticeably
   larger than the declared font-size, so nothing here should ever exceed 13px. */
textarea {
  font-size: 13px;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--hint) 50%), linear-gradient(135deg, var(--hint) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--hint);
  text-align: right;
}

.hint-static {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--hint);
  line-height: 1.4;
}

.row {
  display: flex;
  gap: 12px;
}

.row .field {
  flex: 1;
  min-width: 0;
}

.segmented {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
  max-width: 320px;
}

.segment {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  padding: 9px 6px;
  border-radius: 9px;
  cursor: pointer;
  min-height: 36px;
  transition: background 0.15s ease, color 0.15s ease;
}

.segment.active {
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: 0 4px 16px var(--accent-glow);
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.chip.active {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px var(--accent-glow);
}

/* ---- "Свой текст" / "ИИ генерация" mode chips (страница создания песни) ---- */

.mode-chip-group {
  display: flex;
  gap: 10px;
}

.mode-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.mode-chip-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--tertiary-bg);
  color: var(--hint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mode-chip-icon svg {
  width: 18px;
  height: 18px;
}

.mode-chip-text {
  display: flex;
  flex-direction: column;
}

.mode-chip-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.mode-chip-sub {
  font-size: 11.5px;
  color: var(--hint);
  margin-top: 1px;
}

.mode-chip.active {
  background: var(--accent-gradient);
  border-color: transparent;
  box-shadow: 0 6px 18px var(--accent-glow);
}

.mode-chip.active .mode-chip-icon {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.mode-chip.active .mode-chip-title,
.mode-chip.active .mode-chip-sub {
  color: #fff;
}

.mode-chip:active {
  transform: scale(0.98);
}

input[type="range"] {
  width: 100%;
  accent-color: var(--accent-2);
  height: 32px;
}

.range-labels {
  display: flex;
  justify-content: space-between;
  color: var(--hint);
  font-size: 12px;
  margin-top: 2px;
}

.btn-primary,
.btn-secondary,
.btn-ghost {
  width: 100%;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  padding: 15px 16px;
  min-height: 50px;
  cursor: pointer;
  font-family: inherit;
  display: block;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.btn-primary {
  background: var(--accent-gradient);
  color: #ffffff;
  margin-top: 4px;
  box-shadow: 0 10px 26px var(--accent-glow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-primary:active {
  transform: scale(0.98);
  box-shadow: 0 6px 16px var(--accent-glow);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-secondary {
  background: var(--tertiary-bg);
  color: var(--text);
  margin-top: 10px;
  border: 1px solid var(--border);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  margin-top: 14px;
}

.hidden {
  display: none !important;
}

.song-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.song-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.song-play {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--accent-gradient);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 6px 16px var(--accent-glow);
}

.song-info {
  flex: 1;
  min-width: 0;
}

.song-title {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-sub {
  font-size: 12px;
  color: var(--hint);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.song-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--hint);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.song-icon-btn.active {
  color: #ffc451;
}

.song-icon-btn:active {
  background: var(--tertiary-bg);
}

.status-card {
  text-align: center;
}

.spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent-2);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---- Generation wave animation (create-song step 3) --------------------- */

.wave-loader {
  width: 100%;
  height: 92px;
  margin: 0 auto 16px;
  overflow: hidden;
  position: relative;
}

.wave-loader-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0 10px var(--accent-glow));
}

.wave-loader-track {
  animation: waveLoaderScroll 3.2s linear infinite;
}

.wave-loader-svg-back .wave-loader-track {
  animation-delay: -1.6s;
  opacity: 0.55;
}

.wave-loader-path {
  fill: none;
  stroke-linecap: round;
}

.wave-loader-path-glow {
  stroke-width: 14;
  opacity: 0.35;
  filter: blur(6px);
}

.wave-loader-path-mid {
  stroke-width: 6;
  opacity: 0.75;
}

.wave-loader-path-core {
  stroke-width: 2.4;
  opacity: 0.95;
}

@keyframes waveLoaderScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-300px); }
}

#status-text {
  font-weight: 500;
  margin: 0 0 14px;
}

.progress-track {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 4%;
  background: var(--accent-gradient);
  border-radius: 999px;
  transition: width 1.2s ease;
}

.status-card .hint {
  text-align: center;
  margin-top: 12px;
}

.result-card h2 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
}

.track {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 12px;
}

.track:last-child {
  margin-bottom: 0;
}

.track-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.track-cover {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.track-meta {
  min-width: 0;
}

.track-title {
  font-weight: 500;
  font-size: 15px;
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}

.track-tags {
  color: var(--hint);
  font-size: 12px;
  margin: 0;
}

audio {
  width: 100%;
  margin-bottom: 10px;
  height: 40px;
  border-radius: 10px;
}

.error-card {
  text-align: center;
}

.error-icon {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--danger);
}

.error-icon svg {
  width: 30px;
  height: 30px;
}

/* ---- Language select (flag dropdown) ------------------------------------ */

.lang-select {
  position: relative;
}

.lang-select-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tertiary-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 13px 14px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.lang-select-btn:active {
  background: var(--secondary-bg);
}

.lang-select-flag {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--border);
}

.lang-select-btn span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lang-select-chevron {
  color: var(--hint);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.lang-select.open .lang-select-chevron {
  transform: rotate(180deg);
}

.lang-select-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: var(--secondary-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  max-height: 260px;
  overflow-y: auto;
  z-index: 40;
  padding: 6px;
}

.lang-select-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--text);
  padding: 10px 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.lang-select-row:active {
  background: var(--tertiary-bg);
}

.lang-select-row span {
  flex: 1;
}

.lang-select-check {
  color: var(--accent-1);
  flex-shrink: 0;
  visibility: hidden;
}

.lang-select-row.active {
  background: var(--tertiary-bg);
}

.lang-select-row.active .lang-select-check {
  visibility: visible;
}

/* ---- Lyrics result card -------------------------------------------------- */

.lyrics-result-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--accent-1);
}

.lyrics-result-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.lyrics-result-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 14px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  margin-bottom: 14px;
}

.lyrics-result-use-btn {
  margin-bottom: 10px;
}

#error-text {
  color: var(--text);
  margin: 0;
}

/* ---- Shared system-message toast (cookie-banner style) ------------------ */

#toast-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
  padding: 0 16px;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  background: #101114;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  cursor: pointer;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.hide {
  opacity: 0;
  transform: translateY(-10px);
}

.toast-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.toast-text {
  flex: 1;
  min-width: 0;
}

.toast-blue .toast-icon { background: rgba(94, 159, 232, 0.16); }
.toast-red .toast-icon { background: rgba(255, 92, 92, 0.16); }
.toast-green .toast-icon { background: rgba(52, 209, 124, 0.16); }
.toast-orange .toast-icon { background: rgba(255, 138, 77, 0.18); }

.toast-blue { box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(94, 159, 232, 0.25) inset; }
.toast-red { box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 92, 92, 0.25) inset; }
.toast-green { box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(52, 209, 124, 0.25) inset; }
.toast-orange { box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 138, 77, 0.3) inset; }

/* ---- Signup bonus banner (promo-card style) ----------------------------- */

.bonus-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--accent-gradient);
  border: none;
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 0 16px 40px var(--accent-glow);
  position: relative;
  overflow: hidden;
}

.bonus-banner-title {
  margin: 0 0 2px;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
}

.bonus-banner-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
}

.bonus-banner-btn {
  width: auto;
  min-height: 40px;
  padding: 10px 18px;
  margin-top: 0;
  flex-shrink: 0;
  background: #101114;
  color: #fff;
  box-shadow: none;
}

.bonus-banner-btn:active {
  transform: scale(0.97);
}

/* ---- Landing page nav blocks -------------------------------------------- */

.nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 14px;
}

.nav-block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  min-height: 158px;
  background:
    linear-gradient(160deg, rgba(139, 92, 246, 0.12), rgba(217, 70, 239, 0.05) 60%),
    var(--secondary-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 16px 14px 40px 14px;
  margin-bottom: 0;
  text-decoration: none;
  color: var(--text);
  box-sizing: border-box;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.nav-block-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.nav-block-sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--hint);
  margin-top: 3px;
  line-height: 1.3;
}

.nav-block-price {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--star);
  background: rgba(255, 176, 32, 0.14);
  border: 1px solid rgba(255, 176, 32, 0.32);
  border-radius: 999px;
  padding: 4px 9px 4px 7px;
  line-height: 1.1;
}

.nav-block-price-value {
  color: var(--star);
  font-weight: 600;
}

.nav-block-price-coin {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.nav-block-price-coin svg {
  width: 12px;
  height: 12px;
  display: block;
}

.nav-block:active {
  transform: scale(0.98);
  border-color: var(--border-strong);
}

.nav-block-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--accent-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px var(--accent-glow);
}

.nav-block-icon svg {
  width: 21px;
  height: 21px;
}

.nav-block-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

/* ---- Stems history modal list ------------------------------------------- */

.stems-history-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--secondary-bg);
}

.stems-history-item-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.stems-history-stem-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.stems-history-stem-row:last-child {
  margin-bottom: 0;
}

.stems-history-stem-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--hint);
}

.stems-history-audio {
  width: 100%;
  height: 32px;
}

/* ---- "��о��дать кавер": custom audio-file upload control ----------------- */
.file-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.file-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent-gradient);
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 20px var(--accent-glow);
  user-select: none;
}

.file-drop-btn:active {
  transform: translateY(1px);
}

.file-drop-name {
  color: var(--hint);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

#audio-preview {
  width: 100%;
  margin-top: 10px;
  border-radius: var(--radius-sm);
}

/* ---- Floating bottom navigation ------------------------------------------ */

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 448px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 2px;
  background: rgba(23, 24, 28, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  padding: 8px 6px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55);
  z-index: 40;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  padding: 7px 2px 6px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--hint);
  transition: color 0.15s ease, background 0.15s ease;
  min-width: 0;
}

.bottom-nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
}

.bottom-nav-icon svg {
  width: 100%;
  height: 100%;
}

.bottom-nav-label {
  font-size: 9.8px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.bottom-nav-item.active {
  color: var(--accent-2);
  background: rgba(139, 92, 246, 0.12);
}

.bottom-nav-item.active .bottom-nav-icon {
  filter: drop-shadow(0 0 8px var(--accent-glow));
}

.bottom-nav-item:active {
  transform: scale(0.96);
}

/* ---- Чарты: rank badge + like button ---------------------------------- */

.chart-rank {
  width: 26px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--hint);
  flex-shrink: 0;
}

.chart-rank.top {
  color: #fff;
  background: var(--accent-gradient);
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: 0 4px 12px var(--accent-glow);
}

.song-like-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--hint);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
}

.song-like-btn.active {
  color: #ff5c8a;
  border-color: rgba(255, 92, 138, 0.4);
  background: rgba(255, 92, 138, 0.12);
}

.song-like-btn:active {
  transform: scale(0.96);
}

/* ---- Чарты: tabs (Эта неделя / Сегодня / Голосование) ------------- */

.chart-tabs {
  display: flex;
  gap: 8px;
  margin: 4px 0 18px;
}

.chart-tab {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--secondary-bg);
  color: var(--hint);
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.chart-tab.active {
  color: #fff;
  background: var(--accent-gradient);
  border-color: transparent;
  box-shadow: 0 6px 16px var(--accent-glow);
}

.chart-tab:active {
  transform: scale(0.97);
}

/* ---- Голосование: voting cards ------------------------------------- */

.voting-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0;
}

.voting-card {
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}

.voting-card-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--hint);
  margin-bottom: 10px;
}

.voting-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.voting-cover {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--accent-gradient);
  flex-shrink: 0;
}

.voting-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.voting-vote-btn {
  flex: 1;
  padding: 14px;
  border-radius: 999px;
  border: none;
  background: var(--accent-gradient);
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  box-shadow: 0 8px 20px var(--accent-glow);
  font-family: inherit;
}

.voting-vote-btn:active {
  transform: scale(0.97);
}

.voting-vote-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.voting-skip-btn {
  display: block;
  width: 100%;
  padding: 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--hint);
  font-weight: 500;
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
}

.voting-skip-btn:active {
  transform: scale(0.97);
}

.voting-skip-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---- "Мои тексты" banner (на странице "Мои песни") --------------------- */

.my-lyrics-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  text-decoration: none;
  color: var(--text);
}

.my-lyrics-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
  box-shadow: 0 6px 16px var(--accent-glow);
}

.my-lyrics-banner-icon.icon-lyrics {
  background: linear-gradient(135deg, var(--accent-2), var(--accent-1));
}

.my-lyrics-banner-icon.icon-voices {
  background: linear-gradient(135deg, #4f8cff, #2f6fe0);
  box-shadow: 0 6px 16px rgba(79, 140, 255, 0.35);
}

.my-lyrics-banner-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.my-lyrics-banner-title {
  font-size: 15px;
  font-weight: 500;
}

.my-lyrics-banner-sub {
  font-size: 12px;
  color: var(--hint);
  margin-top: 2px;
}

.my-lyrics-banner-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--hint);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-lyrics-banner:active {
  transform: scale(0.98);
}

/* ---- "Мои тексты" list ---------------------------------------------- */

.lyrics-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lyrics-item {
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.lyrics-item-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lyrics-toggle-btn {
  border: 1px solid var(--border);
  background: var(--tertiary-bg);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
}

.lyrics-toggle-btn:active {
  transform: scale(0.96);
}

.lyrics-item-body {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.lyrics-item-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 12px;
  max-height: 320px;
  overflow-y: auto;
}

.lyrics-item-actions {
  display: flex;
  gap: 8px;
}

.lyrics-action-btn {
  flex: 1;
  padding: 10px;
  font-size: 12.5px;
}

/* ---- Bottom-sheet action modal (\u041c\u043e\u0438 \u043f\u0435\u0441\u043d\u0438: \u22EE menu) ---- */

.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
  animation: sheet-fade-in 0.15s ease;
}

@keyframes sheet-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sheet-modal {
  width: 100%;
  max-width: 480px;
  background: var(--secondary-bg);
  border: 1px solid var(--border-strong);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: sheet-slide-up 0.2s ease;
}

@keyframes sheet-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--border-strong);
  margin: 4px auto 10px;
}

.sheet-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--hint);
  text-align: center;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 10px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.sheet-item:active {
  background: var(--tertiary-bg);
}

.sheet-item.danger {
  color: var(--danger);
}

.sheet-item-icon {
  font-size: 18px;
  width: 24px;
  flex-shrink: 0;
  text-align: center;
}

.sheet-item-label {
  flex: 1;
}

.sheet-cancel {
  margin-top: 8px;
  padding: 13px;
  border-radius: var(--radius-sm);
  background: var(--tertiary-bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.sheet-cancel:active {
  transform: scale(0.98);
}

/* ---- Floating mini-player (player-bar) ---------------------------------- */
.player-bar {
  position: fixed;
  left: 50%;
  bottom: 90px;
  bottom: calc(90px + env(safe-area-inset-bottom, 24px));
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 448px;
  z-index: 39;
  background: rgba(23, 24, 28, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  animation: playerBarIn 0.25s ease;
}

.player-bar.hidden {
  display: none !important;
}

@keyframes playerBarIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.player-bar-progress {
  width: 100%;
  height: 3px;
  background: var(--border);
  cursor: pointer;
}

.player-bar-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-gradient);
  transition: width 0.15s linear;
}

.player-bar-main {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.player-bar-art {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tertiary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hint);
}

.player-bar-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-bar-art img.hidden {
  display: none;
}

.player-bar-info {
  flex: 1;
  min-width: 0;
}

.player-bar-title {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-bar-sub {
  font-size: 11px;
  color: var(--hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.player-bar-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.player-bar-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.player-bar-btn svg {
  width: 18px;
  height: 18px;
}

.player-bar-btn:active {
  background: var(--tertiary-bg);
}

.player-bar-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.player-bar-btn-main {
  width: 40px;
  height: 40px;
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: 0 6px 16px var(--accent-glow);
}

.player-bar-btn-main svg {
  width: 20px;
  height: 20px;
}

.player-bar-btn-main.hidden,
.player-bar-btn svg.hidden {
  display: none;
}

.player-bar-close {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--hint);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  margin-left: 2px;
  font-size: 13px;
}

.player-bar-close:active {
  background: var(--tertiary-bg);
}


.referral-card {
  margin: 14px 0 92px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(139,92,246,0.16), rgba(22,24,29,0.96));
  box-shadow: 0 14px 36px rgba(0,0,0,0.22);
}
.referral-kicker { margin: 0 0 4px; color: var(--accent); font-weight: 600; font-size: 13px; }
.referral-card h2 { margin: 0 0 6px; font-size: 20px; }
.referral-sub { margin: 0; color: var(--hint); font-size: 13px; line-height: 1.35; }
.referral-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.referral-stats div { padding: 12px; border-radius: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.07); }
.referral-stats b { display: block; font-size: 22px; color: var(--text); }
.referral-stats span { color: var(--hint); font-size: 12px; }
.referral-link-row { display: flex; gap: 8px; }
.referral-link { min-width: 0; flex: 1; border: 1px solid var(--border); border-radius: 14px; background: var(--secondary-bg); color: var(--text); padding: 12px; font-size: 12px; }
.referral-copy { border: none; border-radius: 14px; padding: 0 12px; background: var(--tertiary-bg); color: var(--text); font-weight: 500; }
.referral-share { width: 100%; margin-top: 10px; }


/* Referral page */
.referral-page-card {
  margin: 18px 0 96px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(139,92,246,0.18), rgba(18,20,25,0.98) 58%);
  box-shadow: 0 16px 42px rgba(0,0,0,0.28);
}
.referral-page-icon { width: 58px; height: 58px; border-radius: 18px; display:flex; align-items:center; justify-content:center; background: var(--accent-gradient); font-size:28px; box-shadow:0 12px 28px var(--accent-glow); margin-bottom:16px; }
.referral-page-card h1 { margin:0 0 8px; font-size:26px; line-height:1.08; }
.referral-page-sub, .referral-note { color: var(--hint); line-height:1.45; }
.referral-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0; }
.referral-stats div { padding:14px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.referral-stats b { display:block; font-size:24px; color:var(--text); margin-bottom:3px; }
.referral-stats span { color:var(--hint); font-size:12px; }
.referral-link-row { display:flex; gap:8px; margin-top:8px; }
.referral-link { min-width:0; flex:1; border:1px solid var(--border); border-radius:15px; background:var(--secondary-bg); color:var(--text); padding:13px; font-size:13px; outline:none; }
.referral-copy { border:none; border-radius:15px; padding:0 13px; background:var(--tertiary-bg); color:var(--text); font-weight: 600; }
.referral-share { width:100%; margin-top:12px; }
.topbar-avatar, .topbar-avatar-fallback { cursor:pointer; }

.challenge-tabs{display:flex;gap:8px;margin:12px 0 16px;overflow-x:auto}.challenge-tab{border:1px solid var(--border);background:var(--secondary-bg);color:var(--text);border-radius:999px;padding:10px 12px;font-weight: 600;white-space:nowrap}.challenge-tab.active{background:var(--accent-gradient);border-color:transparent;color:#fff;box-shadow:0 8px 22px var(--accent-glow)}
.song-icon-btn.active{background:rgba(139,92,246,.18);color:var(--accent)}

.admin-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.admin-stats div{padding:14px;border-radius:18px;background:var(--secondary-bg);border:1px solid var(--border)}.admin-stats b{display:block;font-size:24px}.admin-stats span{color:var(--hint);font-size:12px}.admin-actions{display:grid;gap:10px}.admin-actions button{border:1px solid var(--border);border-radius:16px;background:var(--secondary-bg);color:var(--text);font-weight: 600;padding:14px;text-align:left}.admin-output{white-space:pre-wrap;margin:16px 0 90px;padding:14px;border-radius:16px;background:#0b0d10;color:#bfe3c8;font-size:12px;max-height:260px;overflow:auto}

.history-list{display:grid;gap:10px;margin-bottom:90px}.history-item{display:flex;justify-content:space-between;align-items:center;padding:14px;border-radius:16px;background:var(--secondary-bg);border:1px solid var(--border)}.history-item b{display:block}.history-item span{display:block;color:var(--hint);font-size:12px;margin-top:3px}.history-item strong.plus{color:#55e58b}.history-item strong.minus{color:#ff7d7d}.home-challenge-banner{margin:8px 0 14px}

/* v43 fixes */
.title-modal.hidden{display:none}.title-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center}.title-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}.title-modal-card{position:relative;width:calc(100% - 28px);max-width:420px;margin:0 14px 24px;padding:18px;border-radius:22px;background:var(--secondary-bg);border:1px solid var(--border);box-shadow:0 20px 60px rgba(0,0,0,.55)}.title-modal-card h2{margin:0 0 8px;font-size:20px}.title-modal-card p{margin:0 0 14px;color:var(--hint);line-height:1.35}.title-modal-card input{width:100%;box-sizing:border-box;border:1px solid var(--accent);border-radius:14px;background:var(--bg);color:var(--text);padding:14px;margin-bottom:7px;font-size:13px}.title-modal-card .btn-primary,.title-modal-card .sheet-cancel{width:100%;margin-top:10px}.challenge-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin:10px 0 14px;scrollbar-width:none}.challenge-tabs::-webkit-scrollbar{display:none}.challenge-tab{flex:0 0 auto;font-size:12px;padding:8px 10px;max-width:130px}.bottom-nav-icon{font-size:18px;line-height:1}.admin-section-title{font-size:17px;margin:18px 0 8px}.admin-output{max-height:210px}.song-play{font-size:13px;font-weight: 600}

/* v44 chip click hardening */
.chip,.segment,.mode-chip{pointer-events:auto;touch-action:manipulation;position:relative;z-index:2}.chip-group,.segmented,.mode-chip-group{position:relative;z-index:2}.bottom-nav{z-index:50}.card{position:relative;z-index:1}

/* v45 charts consolidation */
.charts-awards-info{margin:10px auto 14px;padding:10px 12px;border-radius:14px;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.25);color:var(--text);font-size:13px;line-height:1.35}.highlight-track{outline:2px solid var(--accent);box-shadow:0 0 0 6px rgba(139,92,246,.14)}

/* v48 single track page */
.single-track-card{margin:18px 0 90px;padding:20px;border-radius:26px;background:var(--secondary-bg);border:1px solid var(--border);text-align:center}.track-cover-large{width:220px;height:220px;margin:0 auto 18px;border-radius:24px;background:linear-gradient(135deg,rgba(139,92,246,.3),rgba(20,22,28,.9));background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-size:54px}.single-track-card h1{font-size:26px;margin:0 0 8px}.track-like-big{width:100%;margin-top:12px;border:1px solid rgba(255,70,130,.45);border-radius:16px;background:rgba(255,70,130,.12);color:#ff6a9c;font-weight: 600;padding:14px;font-size:17px}.track-like-big.active{background:rgba(255,70,130,.22)}.charts-link{display:block;margin-top:14px;color:var(--hint);text-decoration:none}

/* v49 track page player */
.single-track-card{margin-bottom:150px}.single-track-card .btn-primary{margin-top:8px}.song-item{cursor:pointer}.song-play,.song-like-btn{cursor:pointer}

/* v51 shared topbar menu */
.topbar-right{position:relative}.topbar-menu{z-index:200}.topbar-avatar,.topbar-avatar-fallback{cursor:pointer}

/* v52 track lyrics */
.track-lyrics{margin-top:18px;text-align:left;padding:16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--border)}.track-lyrics h2{margin:0 0 10px;font-size:18px}.track-lyrics pre{white-space:pre-wrap;word-break:break-word;margin:0;color:var(--text);font-family:inherit;line-height:1.5;font-size:14px}

/* v53 track bottom nav restore */
body:has(.single-track-card) .app{padding-bottom:calc(198px + env(safe-area-inset-bottom, 24px))}.single-track-card{margin-bottom:calc(170px + env(safe-area-inset-bottom, 24px))}

/* v55 admin logs */
#admin-action-output{color:#d7fbe1}#admin-boost-output{color:#bfe3ff}

/* v56 track share */
.track-actions-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.track-actions-row .track-like-big{margin-top:0}.track-share-big{border:1px solid rgba(139,92,246,.55);border-radius:16px;background:rgba(139,92,246,.14);color:#fff;font-weight: 600;padding:14px;font-size:15px}.track-share-big:active{transform:scale(.98)}
.track-share-big.active{background:rgba(139,92,246,.32);border-color:#8b5cf6}
.track-karaoke-words{display:flex;flex-wrap:wrap;gap:4px 6px;justify-content:center;max-height:320px;overflow-y:auto;padding:6px 2px}
.karaoke-word{font-size:16px;line-height:1.6;color:var(--hint);cursor:pointer;transition:color .15s ease,transform .15s ease}
.karaoke-word.active{color:#8b5cf6;font-weight: 600;transform:scale(1.08)}
.toggle-row{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.toggle-row input[type="checkbox"]{width:20px;height:20px;accent-color:#8b5cf6}
.mode-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}


/* v57 no native dialogs */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:1200;display:flex;align-items:flex-end;justify-content:center;padding:18px}.app-dialog{width:100%;max-width:420px;background:#171a22;border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.5)}.app-dialog-title{font-weight: 600;font-size:18px;margin-bottom:10px}.app-dialog-message{color:var(--hint);line-height:1.45;margin-bottom:14px}.app-dialog-input{width:100%;box-sizing:border-box;border:0;border-bottom:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:#fff;border-radius:12px 12px 0 0;padding:14px;font-size:13px;outline:none}.app-dialog-input:focus{border-bottom-color:#8b5cf6}.app-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.app-dialog-btn{border:0;border-radius:14px;padding:12px 16px;font-weight: 600}.app-dialog-btn.primary{background:linear-gradient(135deg,#8b5cf6,#c026d3);color:#fff}.app-dialog-btn.secondary{background:rgba(255,255,255,.08);color:#d9e2ef}

/* v58 charts winners */
.chart-winners{display:grid;gap:10px;margin:10px 0 16px}.chart-winner-card{border:1px solid rgba(139,92,246,.35);background:rgba(139,92,246,.08);border-radius:18px;padding:12px;color:#fff;display:grid;gap:6px}.chart-winner-card b{font-size:15px}.chart-winner-card span{color:var(--hint);font-size:13px}.chart-winner-card button{border:0;border-radius:12px;background:linear-gradient(135deg,#8b5cf6,#c026d3);color:#fff;font-weight: 600;padding:9px}

/* v60 contextual chart winner */
.chart-winners{margin:8px 0 12px}.chart-winner-card{padding:10px 12px;border-radius:16px}.chart-winner-card b{font-size:14px}.chart-winner-card span{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chart-winner-card button{padding:8px;font-size:13px}

/* v61 contextual chart winner */
.chart-winners{margin:8px 0 14px}.chart-winner-card{border:1px solid rgba(79,108,255,.35);background:linear-gradient(160deg,rgba(79,108,255,.12),rgba(139,92,246,.04) 65%),rgba(139,92,246,.03);border-radius:18px;padding:14px 16px;color:#fff;display:grid;gap:8px}.chart-winner-card b{font-size:14px;font-weight:500}.chart-winner-card span{font-size:12px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--hint)}.chart-winner-card button{border:0;border-radius:12px;background:linear-gradient(135deg,#4f6bff,#8b5cf6);color:#fff;font-weight:500;padding:9px;font-size:13px}

/* v62 referral milestones */
.referral-milestones{margin-top:16px;text-align:left}.referral-milestones h2{font-size:16px;margin:0 0 10px}.referral-milestone{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);margin-bottom:8px}.referral-milestone span{font-weight: 600}.referral-milestone b{font-size:12px;color:var(--hint);white-space:nowrap}.referral-milestone.done{border-color:rgba(52,209,124,.45);background:rgba(52,209,124,.10)}.referral-milestone.done b{color:#7cffb2}

/* v64 referral bottom nav fix */
.referral-page-card{margin-bottom:150px;}
body:has(.referral-page-card) .app{padding-bottom:calc(178px + env(safe-area-inset-bottom, 24px));}
body:has(.referral-page-card) .bottom-nav{bottom:calc(14px + env(safe-area-inset-bottom));}
body:has(.referral-page-card) .referral-milestones{padding-bottom:6px;}
@supports not selector(body:has(.referral-page-card)){
  .referral-page-card{margin-bottom:150px;}
}

/* v66 my songs filters */
.my-songs-filters{display:flex;gap:8px;overflow-x:auto;margin:12px 0 16px;padding:2px 0 8px;scrollbar-width:none}.my-songs-filters::-webkit-scrollbar{display:none}.my-songs-filter{flex:0 0 auto;border:1px solid var(--border);background:var(--secondary-bg);color:var(--hint);border-radius:999px;padding:9px 12px;font-weight:500;font-size:12px;white-space:nowrap}.my-songs-filter span{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:4px;border-radius:999px;background:rgba(255,255,255,.08);font-size:11px;color:var(--text)}.my-songs-filter.active{background:var(--accent-gradient);border-color:transparent;color:#fff;box-shadow:0 8px 22px var(--accent-glow)}.my-songs-filter.active span{background:rgba(255,255,255,.22)}.song-type-badge{font-size:10px;font-weight:500;border-radius:999px;padding:2px 6px;background:rgba(255,255,255,.08);color:var(--hint)}.song-type-badge.minus{background:rgba(255,150,40,.14);color:#ffb06a}.song-type-badge.vocal{background:rgba(150,120,255,.16);color:#b9a9ff}.song-type-badge.song{background:rgba(124,108,255,.18);color:#c9c2ff}

/* v67 my songs typed menu */
.sheet-item:disabled{opacity:.55;cursor:not-allowed}.sheet-item:disabled:active{transform:none}

/* v68 artist profile */
.artist-card{margin:18px 0 18px;padding:22px;border-radius:26px;border:1px solid var(--border);background:linear-gradient(145deg,rgba(139,92,246,.16),rgba(18,20,25,.98) 58%);text-align:center}.artist-avatar{width:86px;height:86px;border-radius:50%;margin:0 auto 14px;background:var(--accent-gradient);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-size:38px}.artist-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.artist-stats div{padding:13px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}.artist-stats b{display:block;font-size:22px}.artist-stats span{font-size:12px;color:var(--hint)}.artist-top{margin:12px 0}.section-title{font-size:18px;margin:16px 0 10px}.clickable-author{cursor:pointer;color:#b8c2d8;text-decoration:underline;text-decoration-color:rgba(255,255,255,.18);text-underline-offset:3px}


/* ==== визард создания песни: текст -> стиль и жанр -> генерация ==== */

.wizard-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 0 4px;
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.wizard-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tertiary-bg);
  color: var(--hint);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.wizard-step-label {
  font-size: 10.5px;
  color: var(--hint);
  font-weight: 500;
  white-space: nowrap;
}

.wizard-step.active .wizard-step-num {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px var(--accent-glow);
}

.wizard-step.active .wizard-step-label {
  color: var(--text);
}

.wizard-step.done .wizard-step-num {
  background: var(--tertiary-bg);
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.wizard-step-line {
  width: 22px;
  height: 2px;
  background: var(--border);
  flex-shrink: 0;
  margin-bottom: 15px;
}

.wizard-panel-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}

.wizard-nav-row {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.wizard-nav-row .btn-ghost,
.wizard-nav-row .btn-primary {
  margin-top: 0;
  flex: 1;
}

.btn-full {
  width: 100%;
}

/* ---- шаг 1: способ создания текста (ИИ / свой / сохранённые) ---- */

.mode-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.mode-card-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
}

.mode-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--tertiary-bg);
  color: var(--hint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mode-card-icon svg {
  width: 18px;
  height: 18px;
}

.mode-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: block;
}

.mode-card-sub {
  font-size: 11.5px;
  color: var(--hint);
  display: block;
  margin-top: 1px;
}

.mode-card-wide .mode-card-title,
.mode-card-wide .mode-card-sub {
  margin-left: 2px;
}

.mode-card.active {
  background: var(--accent-gradient);
  border-color: transparent;
  box-shadow: 0 6px 18px var(--accent-glow);
}

.mode-card.active .mode-card-icon {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.mode-card.active .mode-card-title,
.mode-card.active .mode-card-sub {
  color: #fff;
}

.mode-card:active {
  transform: scale(0.98);
}

/* ---- вставка структуры текста (интро/куплет/бридж/припев) ---- */

.insert-chip-group {
  margin-bottom: 10px;
}

.chip-insert {
  background: var(--tertiary-bg);
}

/* ---- шаг 2: тип вокала ---- */

.vocal-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.vocal-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 82px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.vocal-type-icon {
  font-size: 20px;
  line-height: 1;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vocal-type-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text);
  text-align: center;
}

.vocal-type-card.active {
  background: var(--accent-gradient);
  border-color: transparent;
  box-shadow: 0 6px 18px var(--accent-glow);
}

.vocal-type-card.active .vocal-type-label {
  color: #fff;
}

.vocal-type-card:active {
  transform: scale(0.98);
}

.vocal-type-card.disabled,
.vocal-type-card:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}


/* Lyrics wizard: theme chips (Создать текст песни) */
.chip.chip-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.chip-custom-input {
  margin-top: 8px;
}


/* Create-song / create-lyrics: topbar back-arrow abbreviation label */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.topbar-back-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Create-lyrics: clean page title replacing the old icon+subtitle header */
.page-title-clean {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 4px 0 20px;
  letter-spacing: -0.01em;
}

/* Create-lyrics: "Примеры запросов" example cards */
.examples-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.example-chip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  line-height: 1.35;
}
.example-chip:active {
  border-color: var(--accent-2);
  background: var(--tertiary-bg);
}
.example-chip-icon {
  flex-shrink: 0;
  color: var(--accent-1);
  font-size: 14px;
  line-height: 1.35;
}
.example-chip-text {
  flex: 1;
}

/* Home page: "Трек Дня" diamond-auction widget (unrelated to Charts) */
.totd-card {
  position: relative;
  background: var(--secondary-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  margin-bottom: 14px;
}
.totd-card:empty {
  display: none;
}
.totd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.totd-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent-1);
}
.totd-info-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--tertiary-bg);
  color: var(--hint);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.totd-body {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.totd-play-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--accent-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 6px 16px var(--accent-glow);
}
.totd-art {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--tertiary-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--hint);
}
.totd-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.totd-info {
  flex: 1;
  min-width: 0;
}
.totd-bid-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--tertiary-bg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
}
.totd-title {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.totd-author {
  font-size: 12px;
  color: var(--hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.totd-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}
.totd-bid-btn {
  flex: 1;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent-gradient);
  color: #fff;
  font-weight: 500;
  font-size: 13.5px;
  padding: 11px 14px;
  cursor: pointer;
}
.totd-bid-btn:active {
  transform: scale(0.98);
}
.totd-bid-btn-full {
  width: 100%;
  margin-top: 4px;
}
.totd-likes {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 10px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  color: var(--hint);
  font-weight: 500;
  flex-shrink: 0;
  cursor: pointer;
  line-height: 1;
}
.totd-like-icon {
  display: inline-flex;
  align-items: center;
}
.totd-likes.active {
  color: #ff5c8a;
  border-color: rgba(255, 92, 138, 0.4);
  background: rgba(255, 92, 138, 0.12);
}
.totd-likes:active {
  transform: scale(0.94);
}
.totd-empty-text {
  margin: 0 0 4px;
  font-size: 12.5px;
  color: var(--hint);
  line-height: 1.4;
}

/* "Трек Дня" info + bid modals (share .sheet-overlay / .sheet-modal) */
.totd-modal-title {
  font-size: 17px;
  font-weight: 600;
  margin: 4px 0 10px;
  text-align: left;
}
.totd-modal-sub {
  margin: 0 0 14px;
  color: var(--hint);
  font-size: 12.5px;
}
.totd-modal-text {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
}
.totd-info-modal .btn-primary {
  width: 100%;
  margin-top: 6px;
}
.totd-bid-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.totd-bid-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
}
.totd-bid-row span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
}
.totd-warning {
  background: rgba(255, 92, 92, 0.12);
  border: 1px solid rgba(255, 92, 92, 0.35);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 10px;
}
.totd-topup-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 14px;
  text-decoration: none;
  box-sizing: border-box;
}
.totd-songs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.totd-songs-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--hint);
}
.totd-bid-modal {
  max-height: 82vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.totd-fav-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--hint);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.totd-fav-toggle input {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin: 0;
  border-radius: 5px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg);
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.totd-fav-toggle input:checked {
  background: var(--accent-gradient);
  border-color: transparent;
}
.totd-fav-toggle input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.totd-fav-toggle:active input {
  transform: scale(0.94);
}
.totd-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  margin-bottom: 10px;
}
.totd-song-list {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.totd-song-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.totd-song-row:active {
  background: var(--tertiary-bg);
}
.totd-song-play {
  font-size: 12px;
  color: var(--hint);
  flex-shrink: 0;
}
.totd-song-name {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.totd-song-date {
  font-size: 11.5px;
  color: var(--hint);
  flex-shrink: 0;
}

/* ================= Мои голоса: voice list + cloning wizard ================= */

.voice-picker-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--accent-2);
  font-weight: 500;
  text-decoration: none;
}

.voice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.voice-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.voice-card.clickable {
  cursor: pointer;
}

.voice-card-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.voice-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.voice-card-name {
  font-weight: 600;
  font-size: 15px;
}

.voice-card-sub {
  color: var(--hint);
  font-size: 12.5px;
}

.voice-card-status {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.voice-card-status-ready {
  background: rgba(52, 209, 124, 0.16);
  color: #34d17c;
}

.voice-card-status-pending {
  background: rgba(255, 178, 61, 0.16);
  color: #ffb23d;
}

.voice-card-status-failed {
  background: rgba(255, 90, 90, 0.16);
  color: #ff5a5a;
}

.voice-card-error {
  color: #ff8080;
  font-size: 12px;
}

.voice-card-delete {
  background: transparent;
  border: 0;
  color: var(--hint);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  flex-shrink: 0;
}

.voice-card-delete:active {
  color: #ff5a5a;
}

/* ---- Cloning wizard modal ---- */

.voice-wizard-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.voice-wizard-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  overflow-y: auto;
  background: #171a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px 22px 0 0;
  padding: 26px 20px 24px;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
}

.voice-wizard-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  color: #d9e2ef;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
}

.voice-wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.voice-wizard-step .field,
.voice-wizard-step .toggle-row {
  width: 100%;
  text-align: left;
}

.voice-wizard-step h2 {
  margin: 0;
  font-size: 19px;
}

.voice-wizard-icon {
  font-size: 40px;
  line-height: 1;
}

.voice-wizard-step-label {
  align-self: flex-start;
  color: var(--accent-2);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.voice-wizard-steps-list {
  width: 100%;
  text-align: left;
  margin: 0;
  padding-left: 20px;
  color: var(--text);
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.voice-wizard-warning {
  width: 100%;
  text-align: left;
  background: rgba(255, 178, 61, 0.12);
  color: #ffb23d;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
}

.voice-wizard-recorder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
}

.voice-record-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 0;
  background: var(--accent-gradient);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  box-shadow: 0 8px 24px var(--accent-glow);
  transition: transform 0.15s ease;
}

.voice-record-btn:active {
  transform: scale(0.96);
}

.voice-record-btn.recording {
  background: #ff5a5a;
  animation: voiceRecordPulse 1.2s ease-in-out infinite;
}

@keyframes voiceRecordPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 90, 0.5); }
  50% { box-shadow: 0 0 0 12px rgba(255, 90, 90, 0.12); }
}

.voice-record-timer {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--hint);
}

.voice-wizard-audio {
  width: 100%;
}

.voice-wizard-actions-row {
  width: 100%;
  display: flex;
  gap: 10px;
}

.voice-wizard-actions-row .btn-secondary,
.voice-wizard-actions-row .btn-primary {
  flex: 1;
}

.voice-wizard-phrase {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

.voice-wizard-spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent-2);
  animation: spin 0.9s linear infinite;
}

/* ---- шаг 2: "Своими словами" info callout ---- */

.simple-mode-callout {
  display: flex;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 12px;
}

.simple-mode-callout-icon {
  display: flex;
  align-items: center;
  color: var(--accent-2);
  flex-shrink: 0;
}

.simple-mode-callout-text strong {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}

.simple-mode-callout-text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hint);
}

.simple-mode-example {
  font-size: 12px;
  line-height: 1.5;
  color: var(--hint);
  margin: 0;
}

.simple-mode-example strong {
  color: var(--text);
}

/* ---- шаг 2: "Загрузить из созданных песен" + track picker modal ---- */

.track-picker-card {
  width: 100%;
  max-width: 420px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: #171a22;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.track-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.track-picker-head h2 {
  font-size: 17px;
  margin: 0;
}

.track-picker-close {
  background: rgba(255,255,255,.08);
  border: 0;
  color: #d9e2ef;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
}

.track-picker-search {
  margin-bottom: 0;
}

.track-picker-fav-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--hint);
}

.track-picker-fav-toggle input {
  width: auto;
  min-height: 0;
}

.track-picker-list {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.track-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.05);
  border-radius: 14px;
  padding: 10px 12px;
}

.track-picker-item-info {
  flex: 1;
  min-width: 0;
}

.track-picker-item-title {
  font-size: 13.5px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-picker-item-tags {
  font-size: 11.5px;
  color: #9aa5b1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.track-picker-item-pick {
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  background: linear-gradient(135deg,#8b5cf6,#c026d3);
  color: #fff;
  cursor: pointer;
}

.track-picker-more {
  margin-top: 10px;
}

/* ---- шаг 2: Сохранённые вокалисты (voice picker) ---- */

.voice-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.voice-picker-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.voice-picker-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.voice-picker-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.voice-picker-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-picker-sub {
  font-size: 11px;
  color: var(--hint);
}

.voice-picker-card.active {
  background: var(--accent-gradient);
  border-color: transparent;
  box-shadow: 0 6px 18px var(--accent-glow);
}

.voice-picker-card.active .voice-picker-name,
.voice-picker-card.active .voice-picker-sub {
  color: #fff;
}

.voice-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.voice-add-btn svg {
  flex-shrink: 0;
}

/* ---- Кавер: сводка "ТЕКСТ ВЫБРАН" на шаге 2 ---- */

.text-selected-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(52, 209, 124, 0.08);
  border: 1px solid rgba(52, 209, 124, 0.35);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.text-selected-box-icon {
  display: flex;
  align-items: center;
  margin-top: 1px;
  flex-shrink: 0;
  color: #34d17c;
}

.text-selected-box-body {
  min-width: 0;
}

.text-selected-box-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #34d17c;
  margin-bottom: 4px;
}

.text-selected-box-preview {
  font-size: 12.5px;
  color: var(--hint);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Кавер: "Свой голос" (мой голос / без клона / + новый) ---- */

.voice-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 4px;
  scrollbar-width: none;
}

.voice-chip-row::-webkit-scrollbar {
  display: none;
}

.voice-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}

.voice-chip.active {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px var(--accent-glow);
}

.voice-chip-new {
  color: var(--accent-2);
}

/* ---- Кавер: источник трека (сегмент + выбранный трек из библиотеки) ---- */

.cover-source-track {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 10px;
}

.cover-source-track-info {
  min-width: 0;
  flex: 1;
}

.cover-source-track-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cover-source-track-clear {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--hint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}

.voice-add-btn:active {
  transform: scale(0.98);
}


/* ---- Trim song & change pitch (local ffmpeg features) ---- */

.trim-free-badge,
.pitch-source-card .trim-free-badge {
  position: static;
  display: inline-flex;
  margin: 4px 0 10px;
}

.waveform-wrap {
  position: relative;
  width: 100%;
  height: 96px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-top: 6px;
  touch-action: none;
}

.waveform-canvas {
  display: block;
  width: 100%;
  height: 96px;
}

.trim-selection {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: rgba(124, 92, 255, 0.22);
  border-left: 2px solid var(--accent, #7c5cff);
  border-right: 2px solid var(--accent, #7c5cff);
  pointer-events: none;
}

.trim-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22px;
  margin-left: -11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  touch-action: none;
}

.trim-handle::before {
  content: "";
  width: 4px;
  height: 40px;
  border-radius: 3px;
  background: var(--accent, #7c5cff);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.trim-range-label {
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin: 12px 0 2px;
}

.trim-stepper-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 6px;
}

.trim-stepper {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.trim-stepper-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--hint);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.trim-stepper-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trim-stepper-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--secondary-bg);
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

.trim-stepper-btn:active {
  transform: scale(0.94);
  background: var(--accent-gradient);
  color: #fff;
  border-color: transparent;
}

.trim-stepper-value {
  min-width: 52px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.pitch-semitone-grid {
  grid-template-columns: repeat(5, 1fr);
}

.pitch-semitone-grid .vocal-type-card {
  min-height: 56px;
}

.pitch-semitone-grid .vocal-type-label {
  font-size: 15px;
}

/* v96 referral page redesign: smaller fonts, tidier layout, no wrapping milestone rows */
.referral-page-card {
  padding: 20px 18px;
}
.referral-page-icon {
  width: 50px;
  height: 50px;
  font-size: 22px;
  margin-bottom: 14px;
}
.referral-page-card h1 {
  font-size: 19px;
  line-height: 1.25;
  font-weight: 600;
}
.referral-page-sub {
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 4px;
}
.referral-note {
  font-size: 12px;
  line-height: 1.4;
}
.referral-stats {
  gap: 10px;
  margin: 16px 0;
}
.referral-stats div {
  padding: 12px;
  border-radius: 16px;
}
.referral-stats b {
  font-size: 20px;
  margin-bottom: 2px;
}
.referral-stats span {
  font-size: 11.5px;
}
.field-label {
  font-size: 12.5px;
}
.referral-link {
  font-size: 12.5px;
  padding: 12px;
}
.referral-copy {
  font-size: 13px;
}
.referral-share {
  font-size: 14px;
  padding: 13px;
}
.referral-milestones h2 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--hint);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
}
.referral-milestone {
  padding: 12px 14px;
  border-radius: 15px;
  gap: 8px;
}
.referral-milestone span {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.referral-milestone b {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.referral-milestone.done b {
  background: rgba(52, 209, 124, 0.16);
}
/* v97 history page redesign */
.history-page .header{padding-bottom:10px}
.history-page .header-icon{width:38px;height:38px;font-size:18px}
.history-page .header h1{font-size:16px}
.history-page .subtitle{font-size:12px}
.history-page .header-deco-line{display:block;width:100%;height:5px;margin-top:8px}
.history-list{display:grid;gap:0;margin-bottom:90px}
.history-item{display:flex;align-items:center;gap:10px;padding:11px 4px}
.hi-sep{height:5px;display:flex;align-items:center}
.hi-sep svg{width:100%;height:1px;display:block}
.hi-icon{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.hi-create{background:rgba(124,108,255,0.16);color:#a89bff}
.hi-refund{background:rgba(85,229,139,0.14);color:#55e58b}
.hi-bonus{background:rgba(96,165,250,0.15);color:#7db8ff}
.hi-topup{background:rgba(85,229,139,0.14);color:#55e58b}
.hi-award{background:rgba(255,178,32,0.16);color:#ffc857}
.hi-bid{background:rgba(217,70,239,0.15);color:#e08fff}
.hi-body{flex:1 1 auto;min-width:0}
.hi-body b{display:block;font-size:13px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hi-body span{display:block;color:var(--hint);font-size:11px;margin-top:2px}
.history-item strong{flex:0 0 auto;font-size:14px;font-weight:700}
.history-item strong.plus{color:#55e58b}
.history-item strong.minus{color:#ff7d7d}
/* v97 main page: "ПЕСНИ AI" / "ФОТО AI" section dividers + photo feature card */
.section-divider{display:flex;align-items:center;gap:10px;margin:20px 2px 12px}
.section-divider-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border-strong) 50%,transparent)}
.section-divider-label{font-size:11px;font-weight:700;letter-spacing:0.14em;color:var(--hint);text-transform:uppercase;white-space:nowrap}
.section-divider-ai{background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.photo-feature-card{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;background:linear-gradient(160deg,rgba(139,92,246,0.14),rgba(217,70,239,0.06) 65%),var(--secondary-bg);border:1px solid var(--border-strong);border-radius:var(--radius);padding:14px;text-decoration:none;color:var(--text);box-shadow:0 10px 26px rgba(0,0,0,0.3);transition:transform 0.15s ease}
.photo-feature-card:active{transform:scale(0.98)}
.photo-feature-icon{flex:0 0 auto;width:48px;height:48px;border-radius:14px;background:var(--accent-gradient);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px var(--accent-glow)}
.photo-feature-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.photo-feature-title{font-size:14.5px;font-weight:600;line-height:1.25}
.photo-feature-sub{font-size:11.5px;color:var(--hint);line-height:1.3}
.photo-feature-price{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:500;color:var(--star);background:rgba(255,176,32,0.14);border:1px solid rgba(255,176,32,0.32);border-radius:999px;padding:5px 10px 5px 8px}
/* v97 "Фото с ИИ" page: source toggle/preview, upload zone, aspect chips, model card, result view */
.photo-no-source-toggle{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--bg);cursor:pointer;margin-bottom:10px}
.photo-no-source-toggle input{margin-top:2px;width:16px;height:16px;flex:0 0 auto;accent-color:var(--accent-2)}
.photo-no-source-text{display:flex;flex-direction:column;gap:2px;font-size:13px}
.photo-no-source-text span{color:var(--hint);font-size:11.5px;font-weight:400}
.photo-source-preview{position:relative;margin-bottom:10px;border-radius:16px;overflow:hidden;border:1px solid var(--border)}
.photo-source-preview img{display:block;width:100%;max-height:220px;object-fit:cover}
.photo-source-remove{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,0.6);color:#fff;border:none;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer}
.photo-source-preview-label{position:absolute;left:10px;bottom:8px;background:rgba(0,0,0,0.55);color:#fff;font-size:11px;padding:4px 9px;border-radius:999px}
.file-drop-zone{border:1.5px dashed var(--border-strong);border-radius:16px;background:var(--bg)}
.file-drop-zone-inner{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 14px;cursor:pointer;text-align:center}
.file-drop-zone-icon{width:44px;height:44px;border-radius:13px;background:rgba(139,92,246,0.14);color:var(--accent-2);display:flex;align-items:center;justify-content:center}
.file-drop-zone-title{font-size:14px;font-weight:600}
.file-drop-zone-hint{font-size:11.5px;color:var(--hint)}
.chip-aspect{display:inline-flex;align-items:center;gap:6px}
.photo-model-card{display:flex;align-items:center;gap:10px;padding:12px;border:1.5px solid var(--accent-2);border-radius:16px;background:rgba(139,92,246,0.08)}
.photo-model-radio{width:18px;height:18px;border-radius:50%;border:5px solid var(--accent-2);flex:0 0 auto;box-sizing:border-box;background:var(--bg)}
.photo-model-body{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.photo-model-title{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.photo-model-badge{font-size:9.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:#fff;background:var(--accent-gradient);border-radius:999px;padding:2px 7px}
.photo-model-sub{font-size:11.5px;color:var(--hint)}
.photo-model-price{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--star);background:rgba(255,176,32,0.14);border:1px solid rgba(255,176,32,0.32);border-radius:999px;padding:5px 10px}
.photo-result-img{display:block;width:100%;border-radius:18px;margin-bottom:14px;border:1px solid var(--border)}
.photo-result-actions{display:flex;flex-direction:column}
.photo-result-action{display:flex;align-items:center;gap:12px;padding:13px 4px;border:none;background:none;color:var(--text);text-decoration:none;text-align:left;cursor:pointer;border-bottom:1px solid var(--border)}
.photo-result-action:last-child{border-bottom:none}
.photo-result-action-icon{width:36px;height:36px;border-radius:11px;background:rgba(139,92,246,0.14);color:var(--accent-2);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.photo-result-action-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.photo-result-action-body b{font-size:13.5px;font-weight:600}
.photo-result-action-body span{font-size:11.5px;color:var(--hint)}
/* v97 "Фото" gallery page */
.photos-create-btn{margin-bottom:16px}
.photos-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:90px}
.photo-grid-item{position:relative;display:block;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--secondary-bg);border:1px solid var(--border)}
.photo-grid-item img{width:100%;height:100%;object-fit:cover;display:block}
.photo-grid-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:28px;opacity:0.5}
.photo-grid-badge{position:absolute;left:6px;bottom:6px;font-size:10px;font-weight:600;color:#fff;background:rgba(0,0,0,0.65);border-radius:999px;padding:3px 8px}

/* ---- v98: "Демо-песня" free-first-song onboarding -------------------- */

.demo-promo-card{grid-column:1 / -1;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;box-sizing:border-box;background:linear-gradient(150deg,#7c3aed,#a855f7 55%,#d946ef);border:none;border-radius:var(--radius);padding:18px 20px;text-decoration:none;color:#fff;box-shadow:0 14px 34px rgba(124,58,237,0.4);overflow:hidden}
.demo-promo-card:active{transform:scale(0.98)}
.demo-promo-badge{position:absolute;top:14px;right:14px;background:#ff8a00;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:0.04em;padding:4px 10px;border-radius:999px;box-shadow:0 4px 10px rgba(255,138,0,0.4)}
.demo-promo-icon{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.demo-promo-title{font-size:16px;font-weight:700;line-height:1.25;max-width:80%}
.demo-promo-sub{font-size:12.5px;color:rgba(255,255,255,0.88)}

.discount-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:linear-gradient(120deg,#ff8a00,#ff5c5c);border:none;border-radius:var(--radius);padding:16px 18px;margin-bottom:18px;box-shadow:0 14px 34px rgba(255,90,60,0.35);position:relative;overflow:hidden}
.discount-banner-title{margin:0 0 2px;font-weight:700;font-size:14.5px;color:#fff}
.discount-banner-sub{margin:0;color:rgba(255,255,255,0.92);font-size:12px}
.discount-banner-sub strong{font-variant-numeric:tabular-nums}
.discount-banner-btn{width:auto;min-height:38px;padding:9px 16px;margin-top:0;flex-shrink:0;background:#101114;color:#fff;box-shadow:none;text-decoration:none;display:inline-flex;align-items:center;border-radius:999px;font-size:13px}
.discount-banner-btn:active{transform:scale(0.97)}

.song-demo-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.song-demo-badge{font-size:10.5px;font-weight:600;color:#ff8a00;background:rgba(255,138,0,0.14);border:1px solid rgba(255,138,0,0.32);border-radius:999px;padding:3px 9px}
.song-demo-link{font-size:11px;font-weight:600;color:var(--accent-2);text-decoration:none}

/* Discounted-price display on pages/balance.php when a demo-discount window is active */
.package-card-price-demo-old{text-decoration:line-through;color:var(--hint);font-size:12px;margin-right:4px}


/* === Trekero AI Photo Studio / diamond currency ========================= */
.topbar-credits{background:linear-gradient(135deg,rgba(44,210,255,.12),rgba(124,86,255,.16));border-color:rgba(103,207,255,.26);color:#d8f8ff;box-shadow:inset 0 0 18px rgba(78,174,255,.06),0 0 18px rgba(91,89,255,.08)}
.topbar-credits-icon{background:transparent!important;box-shadow:none!important;width:20px;height:20px}
.topbar-credits-icon svg{width:20px;height:20px;filter:drop-shadow(0 0 5px rgba(74,218,255,.62))}
.nav-block-price-coin img,.photo-model-price img,.photo-btn-cost img{display:block;width:16px;height:16px;filter:drop-shadow(0 0 6px rgba(75,219,255,.52))}

.photo-studio-page{--photo-cyan:#5ae9ff;--photo-blue:#526dff;--photo-violet:#a75cff;--photo-panel:rgba(13,14,28,.82);--photo-line:rgba(145,177,255,.18);background:#070811;color:#f7f8ff;min-height:100vh;overflow-x:hidden}
.photo-studio-page .topbar{background:rgba(7,8,17,.74);border-bottom:1px solid rgba(139,164,255,.12);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.photo-studio-page .topbar-back,.photo-studio-page .topbar-add{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.1);color:#f5f7ff}
.photo-studio-page .topbar-menu{background:rgba(15,16,31,.96);border-color:rgba(142,164,255,.18);box-shadow:0 20px 56px rgba(0,0,0,.55)}
.photo-studio-page .topbar-menu-item{color:#edf0ff}
.photo-ambient{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% -10%,rgba(60,90,255,.16),transparent 42%),linear-gradient(#080915,#070811)}
.photo-ambient::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(119,132,211,.038) 1px,transparent 1px),linear-gradient(90deg,rgba(119,132,211,.038) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,#000 0%,transparent 78%)}
.photo-ambient-lines{position:absolute;inset:0;width:100%;height:100%;opacity:.62}
.photo-ambient-lines path{fill:none;stroke:url(#lineGlow);stroke-width:.9;stroke-dasharray:8 11;animation:photoLineFlow 18s linear infinite}
.photo-ambient-lines path:nth-child(2){animation-duration:25s;animation-direction:reverse}.photo-ambient-lines path:nth-child(3){animation-duration:21s}.photo-ambient-lines path:nth-child(4){animation-duration:30s;animation-direction:reverse}
.photo-orb{position:absolute;border-radius:50%;filter:blur(18px);opacity:.34;animation:photoOrbFloat 10s ease-in-out infinite alternate}
.photo-orb-a{width:230px;height:230px;background:rgba(36,202,255,.2);right:-125px;top:160px}.photo-orb-b{width:270px;height:270px;background:rgba(165,68,255,.18);left:-160px;top:520px;animation-delay:-4s}
.photo-noise{position:absolute;inset:0;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}
@keyframes photoLineFlow{to{stroke-dashoffset:-380}}@keyframes photoOrbFloat{to{transform:translate3d(20px,-28px,0) scale(1.08)}}
.photo-studio-app{position:relative;z-index:1;padding-top:18px;padding-bottom:116px;max-width:620px}
.photo-studio-hero{padding:24px 3px 30px;text-align:left;position:relative}
.photo-hero-mark{width:52px;height:52px;margin-bottom:19px;filter:drop-shadow(0 0 20px rgba(89,120,255,.26))}.photo-hero-mark svg{width:100%;height:100%;display:block}
.photo-eyebrow,.photo-section-kicker{font-size:10px;line-height:1.2;font-weight:800;letter-spacing:.18em;color:#75eaff;text-transform:uppercase}
.photo-studio-hero h1,.photo-library-hero h1{font-size:clamp(31px,9vw,46px);line-height:1.02;letter-spacing:-.045em;margin:9px 0 15px;font-weight:760;color:#fff}
.photo-studio-hero h1 span,.photo-library-hero h1 span{background:linear-gradient(100deg,#e7fbff 0%,#7eeaff 36%,#8e87ff 70%,#dc86ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.photo-studio-hero>p,.photo-library-hero>p{font-size:14px;line-height:1.6;color:rgba(234,238,255,.64);margin:0;max-width:520px}
.photo-hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.photo-hero-meta span{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:650;color:rgba(237,242,255,.76);padding:6px 9px;border:1px solid rgba(139,166,255,.16);border-radius:8px;background:rgba(255,255,255,.03)}.photo-hero-meta i{width:6px;height:6px;border-radius:50%;background:#5cf4bd;box-shadow:0 0 8px #5cf4bd}
.photo-studio-card{position:relative;border:1px solid var(--photo-line);border-radius:22px;padding:18px;background:linear-gradient(155deg,rgba(22,24,45,.92),rgba(10,11,23,.88));box-shadow:0 22px 60px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.055);overflow:hidden;margin-bottom:26px}
.photo-studio-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(95,231,255,.04),transparent 34%,transparent 70%,rgba(164,83,255,.05))}
.photo-card-head{position:relative;display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}.photo-step{display:grid;place-items:center;flex:0 0 32px;height:26px;border:1px solid rgba(94,226,255,.26);border-radius:8px;background:rgba(72,204,255,.07);font-size:10px;font-weight:800;letter-spacing:.1em;color:#6ee9ff}.photo-card-head h2{font-size:15px;line-height:1.25;margin:0 0 3px;color:#fff}.photo-card-head p{font-size:11.5px;line-height:1.4;margin:0;color:rgba(225,232,255,.48)}.photo-card-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(134,161,255,.17),transparent);margin:20px -2px}
.photo-studio-page .field>label:not(.photo-no-source-toggle){font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-weight:750;color:rgba(226,233,255,.58);margin-bottom:8px}
.photo-no-source-toggle{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid rgba(135,155,235,.14);border-radius:12px;background:rgba(255,255,255,.025);cursor:pointer;margin-bottom:10px}.photo-no-source-toggle input{position:absolute;opacity:0;pointer-events:none}.photo-toggle-control{position:relative;width:34px;height:19px;flex:0 0 auto;border-radius:10px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.08);transition:.2s}.photo-toggle-control span{position:absolute;width:13px;height:13px;border-radius:50%;top:2px;left:2px;background:#9298ac;transition:.2s}.photo-no-source-toggle input:checked+.photo-toggle-control{background:linear-gradient(90deg,#3ebfe9,#6b69ff)}.photo-no-source-toggle input:checked+.photo-toggle-control span{transform:translateX(15px);background:#fff;box-shadow:0 0 10px rgba(255,255,255,.7)}
.photo-no-source-text{display:flex;flex-direction:column;gap:1px}.photo-no-source-text b{font-size:12px;color:#eef1ff}.photo-no-source-text span{font-size:10.5px;color:rgba(224,231,255,.46)}
.photo-upload-zone{border:1px dashed rgba(101,218,255,.28)!important;border-radius:16px!important;background:linear-gradient(135deg,rgba(63,206,255,.045),rgba(111,80,255,.05))!important;transition:.2s}.photo-upload-zone:active{transform:scale(.99);border-color:rgba(99,226,255,.55)!important}.photo-upload-zone .file-drop-zone-inner{min-height:126px}.photo-upload-zone .file-drop-zone-icon{width:42px;height:42px;border-radius:13px;color:#7beaff;background:rgba(72,210,255,.08);border:1px solid rgba(94,223,255,.2);box-shadow:0 0 24px rgba(57,191,255,.09)}.photo-upload-zone .file-drop-zone-title{color:#f4f6ff;font-size:13px}.photo-upload-zone .file-drop-zone-hint{color:rgba(220,228,255,.42)}
.photo-source-preview{border-color:rgba(96,221,255,.22);box-shadow:0 0 28px rgba(52,172,255,.08)}.photo-source-remove{width:32px;height:32px;background:rgba(8,9,18,.74);border:1px solid rgba(255,255,255,.16);color:#fff;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}.photo-source-preview-label{background:rgba(8,9,18,.72);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.photo-prompt-field textarea{min-height:190px;resize:vertical;color:#f2f5ff;background:rgba(5,6,14,.58);border:1px solid rgba(140,161,234,.18);border-radius:14px;padding:13px 13px 40px;line-height:1.52;font-size:13px;box-shadow:inset 0 1px 10px rgba(0,0,0,.18);transition:border-color .2s,box-shadow .2s}.photo-prompt-field textarea:focus{outline:none;border-color:rgba(83,225,255,.55);box-shadow:0 0 0 3px rgba(74,209,255,.07),inset 0 1px 10px rgba(0,0,0,.18)}.photo-prompt-field textarea::placeholder{color:rgba(210,219,248,.3)}.photo-prompt-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px}.photo-prompt-status{font-size:10.5px;color:#78deff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:72%}.photo-prompt-footer .hint{font-size:10px;color:rgba(218,226,255,.38)}
.photo-aspect-group{display:grid!important;grid-template-columns:repeat(5,1fr);gap:7px}.photo-aspect-group .chip{min-width:0!important;height:38px;padding:0!important;border-radius:10px!important;border:1px solid rgba(138,158,232,.15)!important;background:rgba(255,255,255,.026)!important;color:rgba(233,238,255,.62)!important;font-size:11px!important}.photo-aspect-group .chip.active{color:#fff!important;border-color:rgba(89,226,255,.55)!important;background:linear-gradient(135deg,rgba(55,196,240,.14),rgba(109,88,255,.16))!important;box-shadow:0 0 18px rgba(64,196,255,.08)}
.photo-model-card{margin-top:14px;border:1px solid rgba(130,155,244,.17)!important;border-radius:14px!important;background:rgba(255,255,255,.028)!important;padding:12px!important}.photo-model-glyph{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:11px;color:#80eaff;background:linear-gradient(140deg,rgba(57,205,255,.12),rgba(123,80,255,.15));border:1px solid rgba(99,215,255,.18)}.photo-model-title{color:#f2f4ff}.photo-model-badge{background:rgba(82,224,195,.1)!important;border:1px solid rgba(86,229,197,.25);color:#79efcf!important;border-radius:6px!important}.photo-model-price{color:#e6faff!important;background:rgba(68,199,255,.07)!important;border-color:rgba(93,217,255,.16)!important;border-radius:9px!important}.photo-model-price img{width:18px;height:18px}
.photo-generate-btn{position:relative;margin-top:15px!important;width:100%;height:52px;border:0!important;border-radius:14px!important;background:linear-gradient(100deg,#26bfdc 0%,#556dff 48%,#9958ef 100%)!important;box-shadow:0 10px 32px rgba(80,88,255,.27),0 0 28px rgba(61,207,255,.12)!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;overflow:hidden}.photo-generate-btn:active{transform:translateY(1px) scale(.995)}.photo-btn-shine{position:absolute;inset:-80% -30%;background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.2) 50%,transparent 58%);transform:translateX(-65%);animation:photoBtnShine 4.5s ease-in-out infinite}.photo-btn-cost{position:absolute;right:13px;display:flex;align-items:center;gap:4px;padding:5px 7px;border-radius:8px;background:rgba(5,8,25,.22);font-size:11px}.photo-btn-cost img{width:17px;height:17px}@keyframes photoBtnShine{0%,62%{transform:translateX(-70%)}82%,100%{transform:translateX(70%)}}
.photo-processing-art{position:relative;width:86px;height:86px;margin:8px auto 18px;display:grid;place-items:center}.photo-processing-art span{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent,#58e5ff,#7f6fff,#b95dff,transparent);animation:photoSpin 2.3s linear infinite;filter:blur(.3px)}.photo-processing-art span::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#101223}.photo-processing-art svg{position:relative;z-index:1;width:45px;height:45px;fill:none;stroke:#bcf5ff;stroke-width:1.3;opacity:.9}@keyframes photoSpin{to{transform:rotate(360deg)}}.photo-studio-card.status-card{text-align:center;padding:28px 20px}.photo-studio-card.status-card h2{margin:0 0 18px;color:#fff;font-size:18px}.photo-studio-page .progress-track{background:rgba(255,255,255,.07);height:7px;border:1px solid rgba(255,255,255,.05)}.photo-studio-page .progress-fill{background:linear-gradient(90deg,#4de7ff,#686dff,#ba5cff);box-shadow:0 0 14px rgba(92,166,255,.48)}.photo-studio-card .btn-secondary{border-color:rgba(137,159,239,.19);color:#eef1ff;background:rgba(255,255,255,.035)}
.photo-result-img{border-color:rgba(104,216,255,.2);box-shadow:0 14px 34px rgba(0,0,0,.35)}.photo-result-action{color:#eef1ff;border-color:rgba(136,156,229,.12)}.photo-result-action-icon{background:linear-gradient(140deg,rgba(63,210,255,.1),rgba(126,83,255,.15));border:1px solid rgba(104,215,255,.14);color:#79e8ff}.photo-result-action-body span{color:rgba(223,230,255,.48)}.photo-error-mark{width:48px;height:48px;display:grid;place-items:center;margin:0 auto 10px;border-radius:14px;color:#ff9f9f;background:rgba(255,93,112,.08);border:1px solid rgba(255,113,127,.15)}
.photo-template-section{margin-top:35px;margin-bottom:10px}.photo-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}.photo-section-head h2{margin:4px 0 2px;font-size:21px;letter-spacing:-.02em;color:#fff}.photo-section-head p{margin:0;font-size:11.5px;color:rgba(222,229,255,.48)}.photo-section-head>a{font-size:11px;color:#77eaff;text-decoration:none;padding:7px 0;white-space:nowrap}
.photo-template-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,78%);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:1px 1px 10px;scrollbar-width:none}.photo-template-rail::-webkit-scrollbar{display:none}.photo-template-card{display:flex;flex-direction:column;padding:0;border:1px solid rgba(139,162,245,.16);border-radius:17px;background:rgba(17,19,36,.88);overflow:hidden;color:#fff;text-align:left;text-decoration:none;scroll-snap-align:start;box-shadow:0 14px 36px rgba(0,0,0,.24);transition:transform .2s,border-color .2s,box-shadow .2s}.photo-template-card:active{transform:scale(.985)}.photo-template-card.selected{border-color:rgba(83,230,255,.58);box-shadow:0 0 0 2px rgba(83,218,255,.07),0 16px 38px rgba(36,100,255,.2)}.photo-template-visual{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#10111d}.photo-template-visual img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .4s}.photo-template-card:hover .photo-template-visual img{transform:scale(1.025)}.photo-template-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 46%,rgba(5,6,14,.82) 100%)}.photo-template-use{position:absolute;left:10px;bottom:10px;padding:7px 9px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(10,11,22,.65);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:10px;font-weight:700;color:#f4fbff}.photo-template-format{position:absolute;right:10px;top:10px;padding:5px 7px;border-radius:7px;background:rgba(8,9,18,.65);border:1px solid rgba(255,255,255,.14);font-size:9.5px;color:#fff}.photo-template-info{display:flex;flex-direction:column;gap:3px;padding:12px}.photo-template-info b{font-size:13px;line-height:1.3}.photo-template-info span{font-size:10.5px;color:rgba(220,228,255,.5)}
.photo-library-hero{padding:34px 2px 28px}.photo-library-create{display:inline-flex;align-items:center;gap:8px;margin-top:19px;padding:11px 14px;border:1px solid rgba(91,224,255,.25);border-radius:12px;background:linear-gradient(135deg,rgba(56,206,255,.08),rgba(105,83,255,.1));color:#eafcff;text-decoration:none;font-size:12px;font-weight:650}.photo-library-create svg{color:#72e8ff}.photo-template-library{margin-top:9px}.photo-template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.photo-template-card-large .photo-template-visual{aspect-ratio:3/4}.photo-template-card-large .photo-template-use{font-size:9px;left:8px;bottom:8px}.photo-template-card-large .photo-template-info{padding:11px 10px 12px}.photo-template-card-large .photo-template-info b{font-size:12px}
.photo-studio-page .bottom-nav{background:rgba(8,9,18,.84);border-top-color:rgba(137,157,230,.13);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
@media (min-width:600px){.photo-studio-card{padding:24px}.photo-template-rail{grid-auto-columns:minmax(250px,46%)}.photo-template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:360px){.photo-studio-hero h1,.photo-library-hero h1{font-size:29px}.photo-studio-card{padding:15px}.photo-aspect-group{gap:5px}.photo-aspect-group .chip{font-size:10px}.photo-model-sub{display:none}.photo-btn-cost{right:9px}}
@media (prefers-reduced-motion:reduce){.photo-ambient-lines path,.photo-orb,.photo-btn-shine,.photo-processing-art span{animation:none!important}.photo-template-visual img{transition:none}}


/* === Trekero Visual System v2 — music pages ============================== */
.visual-v2:not(.photo-studio-page){--bg:#070811;--secondary-bg:rgba(17,19,36,.86);--tertiary-bg:rgba(29,32,57,.9);--text:#f6f8ff;--hint:rgba(225,231,255,.53);--border:rgba(139,163,244,.13);--border-strong:rgba(139,170,255,.22);--link:#6fe8ff;--accent-1:#37d8ef;--accent-2:#5d70ff;--accent-3:#b05cff;--accent-gradient:linear-gradient(105deg,#2bc5df 0%,#5970ff 50%,#a65af1 100%);--accent-glow:rgba(78,105,255,.28);background:#070811;color:#f6f8ff;overflow-x:hidden}
.global-ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 52% -12%,rgba(59,88,255,.17),transparent 43%),linear-gradient(#080914,#070811)}
.global-ambient::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(119,132,211,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(119,132,211,.035) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,#000,transparent 82%)}
.global-ambient svg{position:absolute;inset:0;width:100%;height:100%;opacity:.58}.global-ambient path{fill:none;stroke:url(#globalLineGlow);stroke-width:.85;stroke-dasharray:8 11;animation:globalLineFlow 22s linear infinite}.global-ambient path:nth-child(2){animation-duration:29s;animation-direction:reverse}.global-ambient path:nth-child(3){animation-duration:25s}.global-ambient path:nth-child(4){animation-duration:32s;animation-direction:reverse}
.global-orb{position:absolute;border-radius:50%;filter:blur(20px);opacity:.32;animation:globalOrbFloat 11s ease-in-out infinite alternate}.global-orb-a{width:240px;height:240px;right:-135px;top:140px;background:rgba(40,204,255,.2)}.global-orb-b{width:290px;height:290px;left:-175px;top:580px;background:rgba(170,66,255,.18);animation-delay:-4s}.global-noise{position:absolute;inset:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}
@keyframes globalLineFlow{to{stroke-dashoffset:-420}}@keyframes globalOrbFloat{to{transform:translate3d(23px,-30px,0) scale(1.08)}}
.visual-v2:not(.photo-studio-page)>.topbar,.visual-v2:not(.photo-studio-page)>.app,.visual-v2:not(.photo-studio-page)>.bottom-nav,.visual-v2:not(.photo-studio-page)>.player-bar{position:relative;z-index:2}
.visual-v2:not(.photo-studio-page)>.topbar{position:sticky;top:0;z-index:50;background:rgba(7,8,17,.73);border-bottom:1px solid rgba(139,164,255,.12);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 10px 40px rgba(0,0,0,.12)}
.visual-v2:not(.photo-studio-page) .topbar-inner{max-width:600px}.visual-v2:not(.photo-studio-page) .topbar-back,.visual-v2:not(.photo-studio-page) .topbar-add{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1);color:#f5f7ff}.visual-v2:not(.photo-studio-page) .topbar-menu{background:rgba(14,16,31,.96);border-color:rgba(141,165,255,.18);box-shadow:0 20px 60px rgba(0,0,0,.6)}.visual-v2:not(.photo-studio-page) .topbar-menu-item:active{background:rgba(92,113,255,.12)}
.visual-v2:not(.photo-studio-page) .app{max-width:600px;padding-top:18px;padding-bottom:118px}.visual-v2:not(.photo-studio-page) .header{text-align:left;padding:22px 2px 25px}.visual-v2:not(.photo-studio-page) .header-icon{width:52px;height:52px;border-radius:15px;margin:0 0 18px;background:linear-gradient(145deg,rgba(52,211,242,.13),rgba(119,81,255,.17));border:1px solid rgba(90,224,255,.29);color:#bdf8ff;box-shadow:0 0 28px rgba(59,193,255,.11);display:grid;place-items:center}.visual-v2:not(.photo-studio-page) .header-icon svg{width:34px;height:34px;filter:drop-shadow(0 0 10px rgba(81,220,255,.28))}.visual-v2:not(.photo-studio-page) .header-brand{font-size:10px;line-height:1.2;font-weight:800;letter-spacing:.18em;color:#73eaff;text-transform:uppercase;margin-bottom:7px}.visual-v2:not(.photo-studio-page) .header h1{font-family:'Montserrat',Arial,sans-serif;font-size:clamp(28px,8vw,43px);line-height:1.04;letter-spacing:-.045em;text-align:left;margin:0 0 12px;background:linear-gradient(100deg,#fff 0%,#9af1ff 42%,#938bff 73%,#da82ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.visual-v2:not(.photo-studio-page) .header .subtitle{font-size:13.5px;line-height:1.58;text-align:left;color:rgba(228,234,255,.58);max-width:520px;margin:0}
.visual-v2:not(.photo-studio-page) .card,.visual-v2:not(.photo-studio-page) .artist-card,.visual-v2:not(.photo-studio-page) .referral-page-card,.visual-v2:not(.photo-studio-page) .single-track-card{position:relative;background:linear-gradient(150deg,rgba(23,26,48,.93),rgba(10,11,23,.9));border:1px solid rgba(139,164,255,.18);border-radius:22px;box-shadow:0 22px 58px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.045);overflow:hidden}.visual-v2:not(.photo-studio-page) .card::before,.visual-v2:not(.photo-studio-page) .artist-card::before,.visual-v2:not(.photo-studio-page) .referral-page-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(83,229,255,.035),transparent 33%,transparent 70%,rgba(171,83,255,.045))}
.visual-v2:not(.photo-studio-page) input:not([type=checkbox]):not([type=radio]):not([type=file]),.visual-v2:not(.photo-studio-page) textarea,.visual-v2:not(.photo-studio-page) select{background:rgba(5,6,14,.58);color:#f2f5ff;border:1px solid rgba(140,161,234,.18);border-radius:13px;box-shadow:inset 0 1px 10px rgba(0,0,0,.17)}.visual-v2:not(.photo-studio-page) input:focus,.visual-v2:not(.photo-studio-page) textarea:focus,.visual-v2:not(.photo-studio-page) select:focus{border-color:rgba(82,225,255,.55);box-shadow:0 0 0 3px rgba(74,209,255,.07),inset 0 1px 10px rgba(0,0,0,.17);outline:0}.visual-v2:not(.photo-studio-page) input::placeholder,.visual-v2:not(.photo-studio-page) textarea::placeholder{color:rgba(211,220,249,.29)}
.visual-v2:not(.photo-studio-page) .btn-primary{position:relative;background:linear-gradient(100deg,#27bfdc,#566eff 52%,#9d58ed)!important;border:1px solid rgba(157,213,255,.13)!important;border-radius:14px!important;box-shadow:0 10px 30px rgba(76,88,255,.25),0 0 24px rgba(56,206,255,.1)!important;overflow:hidden}.visual-v2:not(.photo-studio-page) .btn-primary::after{content:"";position:absolute;inset:-90% -35%;background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.18) 50%,transparent 58%);transform:translateX(-65%);animation:globalBtnShine 4.8s ease-in-out infinite;pointer-events:none}.visual-v2:not(.photo-studio-page) .btn-secondary,.visual-v2:not(.photo-studio-page) .btn-ghost{background:rgba(255,255,255,.035);border-color:rgba(140,163,244,.18);color:#eef2ff;border-radius:13px}.visual-v2:not(.photo-studio-page) .chip,.visual-v2:not(.photo-studio-page) .segment,.visual-v2:not(.photo-studio-page) .mode-chip{background:rgba(255,255,255,.028);border-color:rgba(136,157,234,.16);color:rgba(235,239,255,.66);border-radius:10px}.visual-v2:not(.photo-studio-page) .chip.active,.visual-v2:not(.photo-studio-page) .segment.active,.visual-v2:not(.photo-studio-page) .mode-chip.active{color:#fff;border-color:rgba(86,226,255,.5);background:linear-gradient(135deg,rgba(54,197,241,.13),rgba(111,87,255,.16));box-shadow:0 0 18px rgba(57,190,255,.08)}@keyframes globalBtnShine{0%,63%{transform:translateX(-70%)}83%,100%{transform:translateX(70%)}}
.visual-v2:not(.photo-studio-page) .wizard-steps{background:rgba(14,16,31,.64);border:1px solid rgba(137,159,239,.13);border-radius:16px;padding:11px}.visual-v2:not(.photo-studio-page) .wizard-step-num{background:rgba(255,255,255,.045);border:1px solid rgba(136,159,240,.16)}.visual-v2:not(.photo-studio-page) .wizard-step.active .wizard-step-num,.visual-v2:not(.photo-studio-page) .wizard-step.done .wizard-step-num{background:linear-gradient(135deg,#35cde8,#6471ff);box-shadow:0 0 18px rgba(67,194,255,.2)}.visual-v2:not(.photo-studio-page) .wizard-step-line{background:linear-gradient(90deg,rgba(76,223,255,.16),rgba(124,101,255,.24))}.visual-v2:not(.photo-studio-page) .mode-card{background:rgba(255,255,255,.025);border-color:rgba(139,162,239,.14);border-radius:15px}.visual-v2:not(.photo-studio-page) .mode-card.active{border-color:rgba(87,227,255,.52);background:linear-gradient(145deg,rgba(56,203,243,.1),rgba(111,84,255,.13));box-shadow:0 0 24px rgba(55,179,255,.08)}.visual-v2:not(.photo-studio-page) .mode-card-icon{background:linear-gradient(145deg,rgba(58,209,244,.11),rgba(117,82,255,.16));color:#7deaff}
.visual-v2:not(.photo-studio-page) .section-divider-line{background:linear-gradient(90deg,transparent,rgba(96,216,255,.38),rgba(132,92,255,.28),transparent)}.visual-v2:not(.photo-studio-page) .section-divider-label{color:rgba(232,237,255,.6);letter-spacing:.16em}.visual-v2:not(.photo-studio-page) .section-divider-ai{color:#72eaff}
.visual-v2:not(.photo-studio-page) .nav-block{min-height:164px;background:linear-gradient(150deg,rgba(24,27,50,.94),rgba(10,11,23,.9));border-color:rgba(139,165,255,.17);box-shadow:0 18px 42px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.035);overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}.visual-v2:not(.photo-studio-page) .nav-block::before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-65px;top:-70px;background:radial-gradient(circle,rgba(64,207,255,.18),transparent 67%);transition:transform .35s}.visual-v2:not(.photo-studio-page) .nav-block:hover::before{transform:scale(1.35)}.visual-v2:not(.photo-studio-page) .nav-block:active{border-color:rgba(85,224,255,.36);box-shadow:0 8px 24px rgba(0,0,0,.3)}.visual-v2:not(.photo-studio-page) .nav-block-icon{position:relative;background:linear-gradient(145deg,rgba(52,207,241,.14),rgba(118,80,255,.19));border:1px solid rgba(94,219,255,.2);color:#bdf8ff;box-shadow:0 0 24px rgba(57,188,255,.1)}.visual-v2:not(.photo-studio-page) .nav-block-icon::after{content:"";position:absolute;inset:-5px;border:1px solid rgba(80,218,255,.12);border-radius:17px;animation:musicIconPulse 3s ease-in-out infinite}.visual-v2:not(.photo-studio-page) .nav-block-label{font-weight:650}.visual-v2:not(.photo-studio-page) .nav-block-sub{color:rgba(222,229,255,.47)}@keyframes musicIconPulse{0%,100%{opacity:.25;transform:scale(.94)}50%{opacity:.75;transform:scale(1.04)}}
/* Diamond prices: removes the old yellow/orange pill completely. */
.nav-block-price,.photo-feature-price{color:#e1faff!important;background:linear-gradient(135deg,rgba(48,205,243,.09),rgba(106,88,255,.12))!important;border:1px solid rgba(83,219,255,.22)!important;border-radius:9px!important;box-shadow:0 0 18px rgba(60,180,255,.07);padding:5px 8px!important}.nav-block-price-value{color:#e8fbff!important}.nav-block-price-coin img{width:17px!important;height:17px!important}.package-card-credits,.package-credits{color:#78e9ff!important}.balance-hero-pill{background:linear-gradient(135deg,rgba(47,201,241,.08),rgba(104,85,255,.11))!important;border-color:rgba(87,220,255,.2)!important}.balance-diamond-icon{filter:drop-shadow(0 0 7px rgba(70,216,255,.55))}
.visual-v2:not(.photo-studio-page) .photo-feature-card{background:linear-gradient(145deg,rgba(24,27,50,.94),rgba(10,11,23,.9));border-color:rgba(139,165,255,.17);box-shadow:0 18px 42px rgba(0,0,0,.25)}.visual-v2:not(.photo-studio-page) .photo-feature-icon{background:linear-gradient(145deg,rgba(52,207,241,.14),rgba(118,80,255,.19));border:1px solid rgba(94,219,255,.2);color:#bdf8ff;box-shadow:0 0 24px rgba(57,188,255,.1)}
.visual-v2:not(.photo-studio-page) .song-list{gap:9px}.visual-v2:not(.photo-studio-page) .song-item{position:relative;background:linear-gradient(140deg,rgba(21,24,45,.91),rgba(11,12,24,.9));border:1px solid rgba(136,160,239,.14);border-radius:16px;box-shadow:0 10px 28px rgba(0,0,0,.2);overflow:visible}.visual-v2:not(.photo-studio-page) .song-item::after{content:"";position:absolute;left:56px;right:14px;bottom:6px;height:1px;background:linear-gradient(90deg,rgba(70,223,255,.16),transparent)}.visual-v2:not(.photo-studio-page) .song-play{position:relative;isolation:isolate;background:linear-gradient(135deg,#31cbe5,#6370ff)!important;border:1px solid rgba(190,246,255,.26)!important;box-shadow:0 0 18px rgba(59,177,255,.18)}.visual-v2:not(.photo-studio-page) .song-play::before{content:"";position:absolute;inset:-5px;border-radius:inherit;border:1px solid rgba(84,220,255,.2);opacity:.35}.visual-v2:not(.photo-studio-page) .song-play.is-playing::before{animation:songRingPulse 1.25s ease-out infinite}.visual-v2:not(.photo-studio-page) .song-play.is-playing{box-shadow:0 0 26px rgba(74,193,255,.42)}@keyframes songRingPulse{0%{opacity:.8;transform:scale(.86)}100%{opacity:0;transform:scale(1.35)}}
.visual-v2:not(.photo-studio-page) .player-bar{position:fixed;z-index:60;background:rgba(12,14,29,.92);border:1px solid rgba(121,171,255,.23);box-shadow:0 18px 55px rgba(0,0,0,.62),0 0 32px rgba(75,95,255,.14);backdrop-filter:blur(21px);-webkit-backdrop-filter:blur(21px)}.visual-v2:not(.photo-studio-page) .player-bar-progress{background:rgba(255,255,255,.05)}.visual-v2:not(.photo-studio-page) .player-bar-progress-fill{background:linear-gradient(90deg,#48e3f9,#6372ff,#c05cff);box-shadow:0 0 12px rgba(81,192,255,.5)}.visual-v2:not(.photo-studio-page) .player-bar-art{position:relative;overflow:visible;background:linear-gradient(145deg,rgba(51,207,241,.13),rgba(118,81,255,.19));border:1px solid rgba(91,218,255,.2)}.visual-v2:not(.photo-studio-page) .player-bar-art::before{content:"";position:absolute;inset:-5px;border-radius:15px;border:1px solid rgba(89,221,255,.18);opacity:.2}.visual-v2:not(.photo-studio-page) .player-bar.is-playing .player-bar-art::before{animation:playerPulse 1.5s ease-out infinite}.visual-v2:not(.photo-studio-page) .player-bar-art::after{content:"";position:absolute;left:6px;right:6px;bottom:6px;height:11px;background:repeating-linear-gradient(90deg,#73eaff 0 2px,transparent 2px 5px);mask-image:linear-gradient(to top,#000 0 35%,transparent 100%);opacity:0}.visual-v2:not(.photo-studio-page) .player-bar.is-playing .player-bar-art::after{opacity:.85;animation:eqBars .65s steps(4,end) infinite alternate}.visual-v2:not(.photo-studio-page) .player-bar-btn-main{background:linear-gradient(135deg,#2ec9e2,#6370ff);box-shadow:0 0 22px rgba(74,174,255,.27)}@keyframes playerPulse{0%{opacity:.75;transform:scale(.92)}100%{opacity:0;transform:scale(1.25)}}@keyframes eqBars{0%{height:6px;transform:scaleY(.55)}40%{height:15px;transform:scaleY(1.1)}100%{height:10px;transform:scaleY(.75)}}
.visual-v2:not(.photo-studio-page) .bottom-nav{position:fixed;z-index:55;background:rgba(9,10,21,.84);border-color:rgba(137,159,232,.15);box-shadow:0 18px 52px rgba(0,0,0,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.visual-v2:not(.photo-studio-page) .bottom-nav-item.active{color:#75eaff;background:linear-gradient(135deg,rgba(51,201,239,.09),rgba(107,86,255,.12))}.visual-v2:not(.photo-studio-page) .bottom-nav-item.active .bottom-nav-icon{filter:drop-shadow(0 0 8px rgba(78,216,255,.45))}
.visual-v2:not(.photo-studio-page) .balance-hero-card,.visual-v2:not(.photo-studio-page) .balance-info-card,.visual-v2:not(.photo-studio-page) .package-card,.visual-v2:not(.photo-studio-page) .payment-methods-card,.visual-v2:not(.photo-studio-page) .history-item,.visual-v2:not(.photo-studio-page) .admin-stats>div,.visual-v2:not(.photo-studio-page) .admin-output,.visual-v2:not(.photo-studio-page) .referral-stats>div{background:linear-gradient(145deg,rgba(21,24,45,.9),rgba(10,11,23,.88));border-color:rgba(138,162,241,.15);box-shadow:0 12px 34px rgba(0,0,0,.22)}.visual-v2:not(.photo-studio-page) .discount-banner{background:linear-gradient(110deg,rgba(41,190,221,.18),rgba(91,103,255,.2),rgba(165,82,239,.18));border:1px solid rgba(103,203,255,.22);box-shadow:0 12px 34px rgba(58,82,255,.12)}
.visual-v2:not(.photo-studio-page) .file-drop-btn svg,.visual-v2:not(.photo-studio-page) .error-icon svg,.visual-v2:not(.photo-studio-page) .referral-page-icon svg{width:22px;height:22px}.visual-v2:not(.photo-studio-page) .file-drop-btn{background:linear-gradient(135deg,rgba(47,200,232,.14),rgba(103,84,255,.16));border:1px solid rgba(86,220,255,.22);box-shadow:0 0 22px rgba(61,184,255,.08);color:#effcff}.visual-v2:not(.photo-studio-page) .error-icon{display:grid;place-items:center;width:50px;height:50px;margin:0 auto 12px;border-radius:14px;color:#ff9baf;background:rgba(255,82,111,.08);border:1px solid rgba(255,106,130,.16)}
.visual-v2:not(.photo-studio-page) .audio-waveform,.visual-v2:not(.photo-studio-page) .trim-waveform,.visual-v2:not(.photo-studio-page) canvas{filter:drop-shadow(0 0 10px rgba(71,191,255,.12))}
@media (max-width:380px){.visual-v2:not(.photo-studio-page) .app{padding-left:14px;padding-right:14px}.visual-v2:not(.photo-studio-page) .header h1{font-size:29px}.visual-v2:not(.photo-studio-page) .nav-grid{gap:8px}.visual-v2:not(.photo-studio-page) .nav-block{min-height:158px;padding-left:12px;padding-right:12px}}
@media (prefers-reduced-motion:reduce){.global-ambient path,.global-orb,.visual-v2:not(.photo-studio-page) .btn-primary::after,.visual-v2:not(.photo-studio-page) .nav-block-icon::after,.visual-v2:not(.photo-studio-page) .song-play::before,.visual-v2:not(.photo-studio-page) .player-bar-art::before,.visual-v2:not(.photo-studio-page) .player-bar-art::after{animation:none!important}}

.visual-v2:not(.photo-studio-page) .topbar-brand>span:first-child svg{display:block;width:22px;height:22px;color:#7ceaff;filter:drop-shadow(0 0 8px rgba(75,217,255,.35))}
#photo-prompt{scroll-margin-top:118px}.photo-prompt-field.template-applied textarea{animation:templatePromptGlow 1.65s ease-out}@keyframes templatePromptGlow{0%{border-color:rgba(83,232,255,.95);box-shadow:0 0 0 3px rgba(78,219,255,.16),0 0 36px rgba(80,111,255,.28)}65%{border-color:rgba(153,98,255,.72);box-shadow:0 0 0 3px rgba(142,87,255,.09),0 0 22px rgba(129,83,255,.16)}100%{border-color:rgba(140,161,234,.18);box-shadow:inset 0 1px 10px rgba(0,0,0,.17)}}
@media (prefers-reduced-motion:reduce){.photo-prompt-field.template-applied textarea{animation:none;outline:2px solid rgba(83,232,255,.55)}}


/* === Homepage precision pass: compact logo, Track of the Day, top menu === */
.visual-v2:not(.photo-studio-page) .home-brand-hero{position:relative;isolation:isolate;overflow:hidden;margin:0 0 14px;padding:15px 16px 16px;min-height:0;text-align:left;border:1px solid rgba(120,169,255,.22);border-radius:19px;background:linear-gradient(125deg,rgba(20,24,47,.94),rgba(17,18,37,.91) 58%,rgba(29,20,48,.88));box-shadow:0 16px 44px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.045)}
.visual-v2:not(.photo-studio-page) .home-brand-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 88% 8%,rgba(66,209,245,.09),transparent 34%),radial-gradient(circle at 58% 120%,rgba(139,77,255,.14),transparent 50%)}
.home-brand-pattern{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.78}.home-brand-content{position:relative;z-index:1;max-width:440px}.home-brand-lockup{display:flex;align-items:center;gap:10px;margin-bottom:12px}.home-brand-logo{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:rgba(84,208,255,.06);border:1px solid rgba(89,220,255,.18);box-shadow:0 0 22px rgba(67,186,255,.1)}.home-brand-logo svg{display:block;width:28px;height:28px;filter:drop-shadow(0 0 8px rgba(79,207,255,.24))}.home-brand-name{display:flex;flex-direction:column;gap:2px;min-width:0}.home-brand-name b{font-size:10.5px;line-height:1.1;letter-spacing:.16em;color:#9bf1ff}.home-brand-name small{font-size:8px;line-height:1.1;letter-spacing:.12em;color:rgba(224,232,255,.42)}
.visual-v2:not(.photo-studio-page) .home-brand-hero h1{margin:0 0 6px;font-size:22px;line-height:1.08;letter-spacing:-.035em;white-space:normal;background:linear-gradient(100deg,#f9fcff,#9cf2ff 45%,#a595ff 78%,#db83ff);-webkit-background-clip:text;background-clip:text;color:transparent}.visual-v2:not(.photo-studio-page) .home-brand-hero .subtitle{margin:0;max-width:360px;font-size:11.5px;line-height:1.48;color:rgba(224,231,255,.54);text-align:left}

.visual-v2:not(.photo-studio-page) .topbar-menu{top:47px;right:0;width:276px;min-width:0;padding:7px;border:1px solid rgba(130,169,255,.19);border-radius:18px;background:linear-gradient(145deg,rgba(15,18,35,.98),rgba(9,10,22,.98));box-shadow:0 24px 70px rgba(0,0,0,.64),0 0 28px rgba(67,86,255,.09);overflow:hidden}
.topbar-menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 9px 10px;margin-bottom:3px;border-bottom:1px solid rgba(138,160,234,.1)}.topbar-menu-head span{font-size:10px;font-weight:750;letter-spacing:.06em;color:rgba(237,241,255,.68)}.topbar-menu-head small{font-size:7.5px;font-weight:800;letter-spacing:.16em;color:#6ee8ff}
.visual-v2:not(.photo-studio-page) .topbar-menu-item{min-height:43px;padding:6px 8px;gap:10px;border-radius:11px;font-size:11.5px;font-weight:620;line-height:1.2;color:rgba(242,245,255,.88);transition:background .16s,color .16s,transform .16s}.visual-v2:not(.photo-studio-page) .topbar-menu-item svg{box-sizing:content-box;width:15px;height:15px;flex:0 0 15px;padding:7px;border-radius:9px;color:#83e9ff!important;background:linear-gradient(145deg,rgba(50,202,239,.085),rgba(103,83,255,.11));border:1px solid rgba(95,213,255,.13);filter:none!important}.visual-v2:not(.photo-studio-page) .topbar-menu-item[data-nav] svg{color:#83e9ff!important}.visual-v2:not(.photo-studio-page) .topbar-menu-item:hover,.visual-v2:not(.photo-studio-page) .topbar-menu-item:active{background:linear-gradient(90deg,rgba(50,205,239,.07),rgba(102,83,255,.09));color:#fff;transform:translateX(1px)}.visual-v2:not(.photo-studio-page) .topbar-menu-item[data-nav="report-issue"]{margin-top:4px;padding-top:8px;border-top:1px solid rgba(138,160,234,.1);border-radius:0 0 11px 11px}.visual-v2:not(.photo-studio-page) .topbar-add svg{display:block;width:17px;height:17px;color:#c9f8ff}

.visual-v2:not(.photo-studio-page) .totd-card{position:relative;overflow:hidden;margin:0 0 16px;padding:14px;border:1px solid rgba(125,162,244,.18);border-radius:19px;background:linear-gradient(145deg,rgba(18,21,41,.94),rgba(9,10,22,.91));box-shadow:0 16px 42px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.035)}.visual-v2:not(.photo-studio-page) .totd-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 88% 15%,rgba(67,217,255,.085),transparent 31%),linear-gradient(120deg,transparent 0 56%,rgba(126,84,255,.045) 56% 57%,transparent 57% 100%)}.visual-v2:not(.photo-studio-page) .totd-card::after{content:"";position:absolute;width:130px;height:130px;right:-78px;bottom:-88px;border:1px solid rgba(96,222,255,.12);border-radius:50%;box-shadow:0 0 0 18px rgba(96,222,255,.025),0 0 0 38px rgba(126,87,255,.018);pointer-events:none}
.totd-head{position:relative;z-index:1;margin:0 0 12px}.totd-heading{display:flex;align-items:center;gap:9px;min-width:0}.totd-heading>span:last-child{display:flex;flex-direction:column;gap:1px}.totd-heading b{font-size:10.5px;line-height:1.15;letter-spacing:.11em;text-transform:uppercase;color:#8deeff}.totd-heading small{font-size:8.5px;line-height:1.2;color:rgba(222,229,255,.4)}.totd-mark{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:10px;color:#7deaff;background:linear-gradient(145deg,rgba(52,207,241,.1),rgba(116,81,255,.14));border:1px solid rgba(91,218,255,.16)}.totd-info-btn{width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.025);border-color:rgba(135,160,239,.14);color:rgba(223,231,255,.52)}.totd-info-btn svg{display:block}
.totd-body{position:relative;z-index:1;display:grid;grid-template-columns:66px minmax(0,1fr);align-items:center;gap:12px;padding:10px;border:1px solid rgba(134,157,235,.11);border-radius:15px;background:rgba(255,255,255,.022)}.totd-art{position:relative;width:66px;height:66px;border-radius:14px;border:1px solid rgba(133,164,247,.14);background:linear-gradient(145deg,rgba(49,199,236,.1),rgba(111,82,255,.13));box-shadow:0 8px 22px rgba(0,0,0,.25);overflow:hidden}.totd-art::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,6,15,.32),transparent 55%);pointer-events:none}.totd-play-btn{position:absolute;right:5px;bottom:5px;z-index:2;width:28px;height:28px;border:1px solid rgba(225,251,255,.25);background:linear-gradient(135deg,#2cc8e2,#6670ff);box-shadow:0 5px 14px rgba(54,126,255,.3)}.totd-play-btn svg{width:12px;height:12px}.totd-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.totd-title{width:100%;font-size:13px;font-weight:680;line-height:1.25;color:#f6f8ff}.totd-author{width:100%;margin-top:3px;font-size:10.5px;color:rgba(224,231,255,.47)}.totd-bid-pill{order:3;margin:8px 0 0;padding:4px 7px;border-radius:8px;gap:5px;background:linear-gradient(135deg,rgba(48,204,241,.07),rgba(105,87,255,.1));border-color:rgba(86,220,255,.17);font-size:9px;font-weight:550;color:rgba(229,238,255,.58)}.totd-bid-pill b{font-size:10.5px;color:#eefbff}.totd-bid-pill svg{width:13px;height:13px;filter:drop-shadow(0 0 5px rgba(103,118,255,.38))}
.totd-footer{position:relative;z-index:1;margin-top:10px;gap:8px}.totd-bid-btn{min-height:40px;padding:9px 13px;border-radius:12px;background:linear-gradient(100deg,#29bfdc,#596fff 54%,#9f58eb);font-size:11.5px;font-weight:680;box-shadow:0 8px 24px rgba(72,86,255,.18)}.totd-likes{height:40px;padding:0 12px;border-radius:12px;background:rgba(255,255,255,.025);border-color:rgba(135,157,232,.14);font-size:11px;color:rgba(226,233,255,.58)}.totd-likes.active{color:#ff789d;border-color:rgba(255,105,148,.28);background:rgba(255,92,138,.075)}.totd-empty-state{position:relative;z-index:1;padding:11px;border:1px solid rgba(134,157,235,.11);border-radius:15px;background:rgba(255,255,255,.02)}.totd-empty-text{margin:0 0 10px;font-size:10.5px;line-height:1.45;color:rgba(223,230,255,.48)}
@media (min-width:560px){.visual-v2:not(.photo-studio-page) .home-brand-hero{padding:17px 19px 18px}.visual-v2:not(.photo-studio-page) .home-brand-hero h1{font-size:25px}.totd-body{grid-template-columns:72px minmax(0,1fr)}.totd-art{width:72px;height:72px}}
@media (max-width:360px){.visual-v2:not(.photo-studio-page) .home-brand-hero{padding:13px 14px 14px}.home-brand-lockup{margin-bottom:10px}.visual-v2:not(.photo-studio-page) .home-brand-hero h1{font-size:20px}.visual-v2:not(.photo-studio-page) .home-brand-hero .subtitle{font-size:10.5px}.visual-v2:not(.photo-studio-page) .topbar-menu{width:min(264px,calc(100vw - 24px));right:-2px}.totd-body{grid-template-columns:60px minmax(0,1fr);gap:10px}.totd-art{width:60px;height:60px}}


/* === Track picker modal hotfix =========================================== */
body.track-picker-open{overflow:hidden!important;overscroll-behavior:none}
.visual-v2:not(.photo-studio-page)>.modal-overlay,
#track-picker-modal.modal-overlay{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  z-index:5000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))!important;
  margin:0!important;
  background:rgba(3,5,13,.78)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  isolation:isolate;
}
#track-picker-modal.modal-overlay.hidden{display:none!important}
#track-picker-modal .track-picker-card{
  position:relative!important;
  width:min(100%,460px)!important;
  max-width:460px!important;
  max-height:min(760px,calc(100dvh - 32px))!important;
  margin:0!important;
  padding:18px!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border:1px solid rgba(133,166,248,.22)!important;
  border-radius:22px!important;
  background:linear-gradient(150deg,rgba(22,25,47,.985),rgba(9,11,24,.985))!important;
  box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 40px rgba(67,90,255,.12)!important;
}
#track-picker-modal .track-picker-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 90% 0,rgba(71,218,255,.1),transparent 31%),radial-gradient(circle at 8% 100%,rgba(153,75,255,.09),transparent 36%)}
#track-picker-modal .track-picker-head{flex:0 0 auto;margin-bottom:13px}
#track-picker-modal .track-picker-head h2{font-size:19px;letter-spacing:-.025em}
#track-picker-modal .track-picker-close{width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(143,164,235,.14);background:rgba(255,255,255,.045);color:#dff8ff}
#track-picker-modal .track-picker-search{flex:0 0 auto;margin-bottom:11px!important;background:rgba(4,6,15,.7)!important;border-color:rgba(132,159,242,.2)!important}
#track-picker-modal .track-picker-fav-toggle{flex:0 0 auto;margin-bottom:11px}
#track-picker-modal .track-picker-list{flex:1 1 auto;min-height:100px;max-height:none!important;overflow-y:auto!important;overscroll-behavior:contain;padding-right:5px;margin-right:-5px;scrollbar-width:thin;scrollbar-color:rgba(118,143,222,.5) transparent}
#track-picker-modal .track-picker-list::-webkit-scrollbar{width:5px}#track-picker-modal .track-picker-list::-webkit-scrollbar-thumb{background:rgba(118,143,222,.45);border-radius:9px}
#track-picker-modal .track-picker-item{background:rgba(255,255,255,.038);border:1px solid rgba(137,158,232,.1);border-radius:14px;margin-bottom:8px;padding:11px 10px}
#track-picker-modal .track-picker-item-pick{min-width:88px;border-radius:11px;background:linear-gradient(110deg,#35bedb,#6070ff 57%,#a457e9);font-size:11.5px;box-shadow:0 6px 18px rgba(71,93,255,.2)}
#track-picker-modal .track-picker-more{flex:0 0 auto;margin-top:8px}
#track-picker-modal+.bottom-nav,.track-picker-open .bottom-nav{pointer-events:none}
@media(max-width:480px){#track-picker-modal.modal-overlay{align-items:flex-end!important;padding:12px 10px max(10px,env(safe-area-inset-bottom))!important}#track-picker-modal .track-picker-card{width:100%!important;max-height:min(82dvh,720px)!important;border-radius:22px 22px 16px 16px!important;padding:16px!important}#track-picker-modal .track-picker-head h2{font-size:18px}#track-picker-modal .track-picker-item-pick{min-width:82px;padding:9px 12px}}

@media(max-width:480px){#track-picker-modal.modal-overlay{align-items:center!important}}


/* secondary compact heroes */
.visual-v2:not(.photo-studio-page) .page-brand-hero{position:relative;isolation:isolate;overflow:hidden;margin:0 0 14px;padding:15px 16px 16px;min-height:0;text-align:left;border:1px solid rgba(120,169,255,.22);border-radius:19px;background:linear-gradient(125deg,rgba(20,24,47,.94),rgba(17,18,37,.91) 58%,rgba(29,20,48,.88));box-shadow:0 16px 44px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.045)}
.visual-v2:not(.photo-studio-page) .page-brand-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 88% 8%,rgba(66,209,245,.09),transparent 34%),radial-gradient(circle at 58% 120%,rgba(139,77,255,.14),transparent 50%)}
.page-brand-pattern{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.76}.page-brand-content{position:relative;z-index:1;max-width:470px}.page-brand-lockup{display:flex;align-items:center;gap:10px;margin-bottom:11px}.page-brand-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:12px;color:#9bf2ff;background:linear-gradient(145deg,rgba(52,207,241,.1),rgba(116,81,255,.14));border:1px solid rgba(91,218,255,.18)}.page-brand-icon svg{width:22px;height:22px}.page-brand-name{display:flex;flex-direction:column;gap:2px}.page-brand-name b{font-size:9.5px;letter-spacing:.14em;color:#9bf1ff}.page-brand-name small{font-size:7.5px;letter-spacing:.11em;color:rgba(224,232,255,.42)}
.visual-v2:not(.photo-studio-page) .page-brand-hero h1{margin:0 0 6px;font-size:22px;line-height:1.08;letter-spacing:-.035em;background:linear-gradient(100deg,#f9fcff,#9cf2ff 45%,#a595ff 78%,#db83ff);-webkit-background-clip:text;background-clip:text;color:transparent}.visual-v2:not(.photo-studio-page) .page-brand-hero .subtitle{margin:0;max-width:390px;font-size:11.5px;line-height:1.48;color:rgba(224,231,255,.54);text-align:left}.topbar-brand-compact span{font-size:13px;white-space:nowrap}
.visual-v2:not(.photo-studio-page) .history-page .history-list{display:grid;gap:8px;margin-top:2px;margin-bottom:90px}.visual-v2:not(.photo-studio-page) .history-page .hi-sep{display:none}.visual-v2:not(.photo-studio-page) .history-page .history-item{min-height:62px;box-sizing:border-box;gap:11px;padding:11px 12px;border-radius:16px}.visual-v2:not(.photo-studio-page) .history-page .hi-icon{width:36px;height:36px;flex-basis:36px;border-radius:11px}.visual-v2:not(.photo-studio-page) .history-page .hi-body b{font-size:12.5px}.visual-v2:not(.photo-studio-page) .history-page .hi-body span{font-size:10.5px;margin-top:3px}.visual-v2:not(.photo-studio-page) .history-page .history-item strong{min-width:29px;padding-left:5px;text-align:right;font-size:13.5px}
.visual-v2:not(.photo-studio-page) .charts-page .chart-nomination-card{margin:0 0 12px;padding:11px 12px;border-radius:15px;background:linear-gradient(145deg,rgba(21,24,45,.72),rgba(10,11,23,.7));border:1px solid rgba(138,162,241,.13);box-shadow:none}.charts-page .chart-nomination-title{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#8deeff}.charts-page .chart-nomination-card p{margin-top:4px;font-size:10.5px;line-height:1.4;color:rgba(224,231,255,.46)}
.chart-winners{display:block;margin:0 0 13px}.visual-v2:not(.photo-studio-page) .chart-winner-card{position:relative;overflow:hidden;display:block;padding:13px;border:1px solid rgba(125,162,244,.18);border-radius:18px;background:linear-gradient(145deg,rgba(18,21,41,.94),rgba(9,10,22,.91));box-shadow:0 14px 38px rgba(0,0,0,.24)}.chart-winner-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}.chart-winner-head>span:last-child{display:flex;flex-direction:column}.chart-winner-head b{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8deeff}.chart-winner-head small{font-size:8.5px;color:rgba(222,229,255,.4)}.chart-winner-mark{display:grid;place-items:center;width:29px;height:29px;border-radius:9px;color:#7deaff;background:rgba(71,180,255,.09);border:1px solid rgba(91,218,255,.16)}.chart-winner-mark svg{width:16px;height:16px}.chart-winner-body{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:11px;padding:9px;border:1px solid rgba(134,157,235,.1);border-radius:14px;background:rgba(255,255,255,.02)}.chart-winner-art{position:relative;display:grid;place-items:center;width:58px;height:58px;overflow:hidden;border-radius:13px;color:#c5f0ff;background:linear-gradient(145deg,rgba(49,199,236,.1),rgba(111,82,255,.14));border:1px solid rgba(133,164,247,.14)}.chart-winner-art>img{width:100%;height:100%;object-fit:cover}.chart-winner-art>svg{width:27px;height:27px}.chart-winner-play{position:absolute!important;right:4px;bottom:4px;width:27px!important;height:27px!important;min-width:27px!important;padding:0!important;border-radius:9px!important;background:linear-gradient(135deg,#2cc8e2,#6670ff)!important;color:#fff!important}.chart-winner-info{min-width:0}.chart-winner-info strong,.chart-winner-info span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chart-winner-info strong{font-size:12.5px;color:#f6f8ff}.chart-winner-info span{margin-top:4px;font-size:10px;color:rgba(224,231,255,.47)}.visual-v2:not(.photo-studio-page) .chart-winner-open{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:8px;padding:8px 10px;border:1px solid rgba(99,211,255,.15);border-radius:11px;background:linear-gradient(90deg,rgba(43,191,220,.075),rgba(95,105,255,.1));color:rgba(225,245,255,.78);font-size:10.5px}.chart-winner-open svg{width:13px;height:13px}.chart-winner-empty{display:flex;flex-direction:column;gap:3px;padding:6px}.chart-winner-empty span{font-size:11px;color:#9deeff}.chart-winner-empty small{font-size:9.5px;color:rgba(224,231,255,.44)}
@media(max-width:360px){.visual-v2:not(.photo-studio-page) .page-brand-hero{padding:13px 14px 14px}.visual-v2:not(.photo-studio-page) .page-brand-hero h1{font-size:20px}.visual-v2:not(.photo-studio-page) .page-brand-hero .subtitle{font-size:10.5px}}


/* Topbar balance opens tariffs */
.topbar-credits[role="link"]{cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease}
.topbar-credits[role="link"]:active{transform:scale(.96);border-color:rgba(93,224,255,.42);background:rgba(61,178,255,.12)}
.topbar-credits[role="link"]:focus-visible{outline:2px solid rgba(95,224,255,.78);outline-offset:3px;box-shadow:0 0 0 5px rgba(82,194,255,.09)}

/* Create-song SVG icon system: bright, monochrome and emoji-free. */
.vocal-type-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:#68e9ff;filter:drop-shadow(0 0 7px rgba(78,220,255,.48))}
.vocal-type-card:nth-child(2n) .vocal-type-icon svg{color:#9b8cff;filter:drop-shadow(0 0 7px rgba(135,104,255,.48))}
.vocal-type-card:nth-child(3n) .vocal-type-icon svg{color:#d875ff;filter:drop-shadow(0 0 7px rgba(204,91,255,.42))}
.vocal-type-card.active .vocal-type-icon svg{color:#fff;filter:drop-shadow(0 0 9px rgba(255,255,255,.66))}
.voice-picker-icon svg{width:22px;height:22px;fill:none;stroke:#70e8ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px rgba(73,215,255,.5))}
.voice-picker-card.active .voice-picker-icon svg{stroke:#fff;filter:drop-shadow(0 0 9px rgba(255,255,255,.66))}
.error-icon svg{width:42px;height:42px;fill:rgba(255,92,125,.1);stroke:#ff708f;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px rgba(255,76,124,.34))}

/* Photo parameter cards: consistent centered layout and actual aspect outlines. */
.photo-studio-page .photo-aspect-group{align-items:stretch;gap:8px}
.photo-studio-page .photo-aspect-group .chip.chip-aspect{display:flex!important;align-items:center;justify-content:center;gap:7px;height:52px;padding:8px 5px!important;line-height:1;font-size:12px!important;white-space:nowrap}
.aspect-ratio-icon{display:block;width:22px;height:22px;flex:0 0 22px;color:#8bb8d8}
.chip-aspect.active .aspect-ratio-icon{color:#6ceaff;filter:drop-shadow(0 0 5px rgba(71,215,255,.35))}
.photo-studio-page .photo-model-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:16px!important}
.photo-studio-page .photo-model-glyph{width:42px;height:42px;justify-self:center}
.photo-studio-page .photo-model-title{line-height:1.4;font-size:14px;gap:6px}
.photo-studio-page .photo-model-sub{line-height:1.5;margin-top:3px}
.photo-studio-page .photo-model-price{justify-content:center;align-self:center;min-width:50px;padding:8px;white-space:nowrap}
@media(max-width:400px){.photo-studio-page .photo-aspect-group .chip.chip-aspect{flex-direction:column;gap:5px;height:62px;font-size:11px!important}.photo-studio-page .photo-model-card{grid-template-columns:36px minmax(0,1fr) auto;gap:8px;padding:12px!important}.photo-studio-page .photo-model-glyph{width:36px;height:36px}.photo-studio-page .photo-model-title{font-size:13px}}
.demo-subscription-overlay{position:fixed;inset:0;z-index:20000;background:rgba(5,8,20,.84);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;padding:20px}
.demo-subscription-dialog{box-sizing:border-box;width:min(100%,420px);max-height:90dvh;overflow:auto;padding:26px;border-radius:24px;border:1px solid rgba(104,223,255,.3);background:linear-gradient(150deg,#172436,#19172c);color:#eef6ff;box-shadow:0 0 60px rgba(80,170,255,.14);text-align:center}
.demo-subscription-dialog h2{font-size:22px;margin:16px 0 12px}.demo-subscription-dialog p{line-height:1.55;color:#aebdd0;font-size:14px}.demo-subscription-dialog .btn-primary,.demo-subscription-dialog .btn-secondary{display:flex;width:100%;justify-content:center;box-sizing:border-box;margin-top:12px;text-decoration:none}.demo-subscription-mark{width:56px;height:56px;border-radius:17px;display:grid;place-items:center;margin:auto;color:#74e9ff;background:rgba(86,197,255,.12)}.demo-subscription-mark svg{width:30px;height:30px}.demo-check-status{min-height:44px}

/* Locked demo: orange badge, understated purchase control, disabled menu items. */
.song-demo-row{display:flex;align-items:flex-start;gap:7px;flex-wrap:wrap;margin-top:7px}
.song-demo-badge{color:#ffb35e!important;background:rgba(255,143,42,.12)!important;border-color:rgba(255,162,63,.4)!important;font-size:10px;font-weight:650;line-height:1.4;padding:3px 8px}
.song-demo-unlock{display:inline-flex;align-items:center;justify-content:flex-start;gap:5px;border:1px solid rgba(105,214,255,.22);background:rgba(74,180,232,.07);color:#a7e8ff;border-radius:8px;padding:6px 8px;max-width:100%;font-family:inherit;font-size:10px;line-height:1.35;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
.song-demo-unlock svg{width:14px;height:14px;flex:0 0 14px}.song-demo-unlock:hover{background:rgba(74,180,232,.14);border-color:rgba(105,214,255,.5)}.song-demo-unlock:disabled{opacity:.5;cursor:wait}
.sheet-item:disabled{color:#778197!important;opacity:.42!important;background:transparent!important;pointer-events:none}.sheet-item:disabled .sheet-item-label,.sheet-item:disabled .sheet-item-icon{color:#778197!important}