:root {
  color-scheme: light;
  --accent: #ff7a00;
  --accent-soft: #fff0e1;
  --accent-glow: #ffaf38;
  --bg: #fff6ea;
  --bg-pattern: rgba(255, 126, 27, .09);
  --card: rgba(255, 255, 255, .92);
  --card-solid: #fff;
  --card-muted: #fff8f0;
  --line: #f0dfce;
  --text: #111827;
  --muted: #49617a;
  --shadow: 0 12px 36px rgba(110, 65, 22, .11);
  --header: rgba(255, 255, 255, .88);
  --flow-bg: #edf8ff;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Two-version generation choice. */
.premium-page-menu.is-disabled { opacity: .42; cursor: default; }
.generation-visual-screen .generation-steps li { min-height: 62px; }
.generation-choice-note {
  margin: 14px 4px 2px;
  color: var(--muted);
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
}
.generation-variants {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.generation-variant {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.generation-variant-heading { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.generation-variant-heading b { font-size: 16px; }
.generation-variant-heading small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.variant-player-controls { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 9px; align-items: center; min-width: 0; }
.variant-play {
  width: 38px;
  height: 38px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: white;
  background: linear-gradient(135deg, var(--accent), #ff9d18);
  font-size: 12px;
}
.variant-timeline { min-width: 0; }
.variant-timeline input { width: 100%; accent-color: var(--accent); }
.variant-timeline div { display: flex; justify-content: space-between; margin-top: -2px; color: var(--muted); font-size: 10px; }
.variant-select {
  grid-row: 1 / span 2;
  grid-column: 2;
  min-width: 76px;
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid var(--accent);
  border-radius: 13px;
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 800;
}
.variant-select:hover, .variant-select:focus-visible { color: white; background: var(--accent); }
.variant-loading { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.variant-loading .voice-spinner { width: 20px; height: 20px; }
.variant-retry { padding: 4px 0; color: var(--accent); background: transparent; text-align: left; }
.generation-visual-screen .music-generation-hero.choice-ready { min-height: 210px; padding-top: 20px; }
.generation-visual-screen .music-generation-hero.choice-ready .music-orbit { transform: scale(.76); margin-bottom: -12px; }

html[data-theme="light"] .generation-variant {
  border-color: #dccfc2;
  background: #fffdfa;
  box-shadow: 0 8px 22px rgba(78, 53, 33, .08);
}

@media (max-width: 420px) {
  .generation-variant { gap: 7px 9px; padding: 10px; }
  .variant-select { min-width: 70px; padding-inline: 8px; }
  .generation-variant-heading { gap: 5px; }
  .generation-variant-heading small { font-size: 10px; }
}

/* Home voice capture and PECHKA MUSIC transcript review. */
.coded-home-shell .coded-home-footer .home-voice-button.recording {
  z-index: 20;
  border-color: rgba(255, 122, 0, .94);
  background: rgba(95, 39, 6, .42);
  box-shadow: 0 0 15px rgba(255, 122, 0, .62), 0 0 30px rgba(249, 184, 33, .24);
  animation: pechka-home-mic-pulse 1.08s ease-in-out infinite;
}
.coded-home-shell .coded-home-footer .home-voice-button.recording::before {
  content: '';
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(252, 217, 116, .72);
  border-radius: 50%;
  pointer-events: none;
  animation: pechka-home-mic-ring 1.08s ease-out infinite;
}
@keyframes pechka-home-mic-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.12); filter: brightness(1.22); }
}
@keyframes pechka-home-mic-ring {
  0% { opacity: .82; transform: scale(.88); }
  75%, 100% { opacity: 0; transform: scale(1.2); }
}

.voice-dialog.pechka-review {
  width: min(100%, 520px);
  padding: 22px;
  border: 1px solid rgba(255, 122, 0, .42);
  color: #fff;
  background: linear-gradient(150deg, #0c2028, #07131a 58%, #03090c);
  box-shadow: 0 28px 78px rgba(0, 0, 0, .68), 0 0 32px rgba(255, 122, 0, .16);
}
.voice-dialog.pechka-review .transcript-brand-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}
.voice-dialog.pechka-review .transcript-brand-heading .brand-avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border: 0;
  box-shadow: 0 0 18px rgba(255, 122, 0, .42);
}
.voice-dialog.pechka-review h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 5.5vw, 27px);
  letter-spacing: -.025em;
}
.voice-dialog.pechka-review > p {
  margin: 12px 0 17px;
  color: #c7cdd1;
  line-height: 1.45;
}
.voice-dialog.pechka-review textarea {
  min-height: 150px;
  border-color: rgba(125, 133, 138, .42);
  color: #fff;
  background: #07131a;
  caret-color: #ff7a00;
}
.voice-dialog.pechka-review textarea:focus {
  border-color: #ff7a00;
  box-shadow: 0 0 0 3px rgba(255, 122, 0, .16), 0 0 18px rgba(255, 122, 0, .12);
}
.voice-dialog.pechka-review .text-button { color: #ff7a00; }
.voice-dialog.pechka-review .secondary-button {
  min-width: 0;
  padding-inline: 10px;
  border-color: rgba(255, 122, 0, .3);
  color: #fff;
  background: #07131a;
}

.voice-dialog.pechka-voice-error {
  width: min(100%, 508px);
  padding: 22px;
  border: 1px solid rgba(255, 122, 0, .42);
  color: #fff;
  text-align: center;
  background: linear-gradient(150deg, #0c2028, #07131a 58%, #03090c);
  box-shadow: 0 28px 78px rgba(0, 0, 0, .68), 0 0 32px rgba(255, 122, 0, .16);
}
.voice-dialog.pechka-voice-error .dialog-icon.error {
  margin: 0 auto 14px;
  color: #fff;
  background: linear-gradient(145deg, #e97409, #ff7a00);
  box-shadow: 0 0 20px rgba(255, 122, 0, .42);
}
.voice-dialog.pechka-voice-error h2 { color: #fff; }
.voice-dialog.pechka-voice-error > p { color: #c7cdd1; }
.voice-dialog.pechka-voice-error .primary-button {
  border-color: #ff7a00;
  color: #fff;
  background: linear-gradient(135deg, #e97409, #ff7a00);
  box-shadow: 0 0 18px rgba(255, 122, 0, .28);
}
.voice-dialog.pechka-voice-error .primary-button:hover,
.voice-dialog.pechka-voice-error .primary-button:focus-visible {
  outline: none;
  border-color: #f9b821;
  box-shadow: 0 0 20px rgba(255, 122, 0, .4);
}
.voice-dialog.pechka-review .primary-button {
  min-width: 0;
  padding-inline: 10px;
  border-color: #ff7a00;
  color: #fff;
  background: linear-gradient(135deg, #e97409, #ff7a00);
  box-shadow: 0 0 18px rgba(255, 122, 0, .28);
}
.voice-dialog.pechka-review .secondary-button:hover,
.voice-dialog.pechka-review .secondary-button:focus-visible,
.voice-dialog.pechka-review .primary-button:hover,
.voice-dialog.pechka-review .primary-button:focus-visible,
.voice-dialog.pechka-review .text-button:hover,
.voice-dialog.pechka-review .text-button:focus-visible {
  outline: none;
  border-color: #ff7a00;
  box-shadow: 0 0 0 1px rgba(255, 122, 0, .18), 0 0 20px rgba(255, 122, 0, .4);
}

@media (max-width: 430px) {
  .dialog-scrim:has(.pechka-review),
  .dialog-scrim:has(.pechka-voice-error) { padding: 14px; }
  .voice-dialog.pechka-review,
  .voice-dialog.pechka-voice-error { padding: 18px; border-radius: 22px; }
  .voice-dialog.pechka-review .dialog-actions { grid-template-columns: 1fr 1.25fr; gap: 8px; }
}

/* Code-built start page based only on the approved PECHKA MUSIC dark reference. */
.coded-home-shell {
  --home-bg: #03090c;
  --home-surface: #07131a;
  --home-card: #0c2028;
  --home-line: rgba(132, 169, 183, .3);
  --home-text: #fff;
  --home-muted: #c7cdd1;
  --home-orange: #ff8500;
  --home-gold: #ffbd32;
  width: min(100%, 480px);
  color: var(--home-text);
  background: var(--home-bg);
  box-shadow: 0 0 70px rgba(0, 0, 0, .5);
}
.coded-home-shell main { min-height: 100svh; padding: 0 14px 12px; background: var(--home-bg); }
.coded-home-shell .menu-scrim { background: rgba(0, 0, 0, .46); }
.coded-home-shell .popover-menu { top: max(62px, calc(env(safe-area-inset-top) + 18px)); right: max(14px, calc((100vw - 480px) / 2 + 14px)); left: auto; color: var(--home-text); border-color: rgba(255, 122, 0, .34); background: rgba(7, 19, 26, .97); }
.coded-home-shell .popover-menu button:hover { background: rgba(255, 122, 0, .12); }

.coded-home-hero {
  position: relative;
  min-height: 220px;
  margin: 0 -14px;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 18px 14px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 122, 0, .22), transparent 31%),
    radial-gradient(ellipse at 4% 70%, rgba(95, 39, 6, .66), transparent 43%),
    radial-gradient(ellipse at 96% 72%, rgba(95, 39, 6, .66), transparent 43%),
    #03090c;
}
.coded-home-hero::before,
.coded-home-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -18%;
  width: 136%;
  height: 118px;
  border-radius: 48%;
  border-top: 1px solid rgba(255, 122, 0, .68);
  background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 12px, rgba(255, 122, 0, .14) 13px 14px, transparent 15px 21px);
  filter: drop-shadow(0 0 8px rgba(255, 122, 0, .25));
}
.coded-home-hero::before { top: 54px; transform: rotate(-8deg); }
.coded-home-hero::after { top: 113px; transform: rotate(7deg) scaleY(-1); opacity: .7; }
.coded-home-menu {
  position: absolute;
  z-index: 6;
  top: 5px;
  right: 5px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--home-orange);
  background: transparent;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.coded-home-menu svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.coded-home-menu:hover,
.coded-home-menu:focus-visible { transform: scale(1.05); border-color: rgba(255, 122, 0, .78); background: rgba(95, 39, 6, .36); box-shadow: 0 0 18px rgba(255, 122, 0, .42); outline: none; }
.coded-home-token { position: absolute; z-index: 3; top: 19px; left: 50%; transform: translateX(-50%); }
.coded-home-token .brand-avatar { width: 126px; height: 126px; transform: translateY(3px); border: 0; border-radius: 50%; box-shadow: 0 0 10px #ff8500, 0 0 32px rgba(255, 133, 0, .64); }
.coded-wave { position: absolute; z-index: 2; top: 66px; left: 50%; width: min(78%, 365px); height: 60px; display: flex; align-items: center; justify-content: space-between; transform: translateX(-50%); filter: drop-shadow(0 0 5px rgba(255, 133, 0, .72)); }
.coded-wave i { width: 3px; height: 10px; border-radius: 4px; background: linear-gradient(#fcd974, #ff7a00); }
.coded-wave i:nth-child(2), .coded-wave i:nth-child(22) { height: 18px; }
.coded-wave i:nth-child(3), .coded-wave i:nth-child(21) { height: 30px; }
.coded-wave i:nth-child(4), .coded-wave i:nth-child(20) { height: 48px; }
.coded-wave i:nth-child(5), .coded-wave i:nth-child(19) { height: 66px; }
.coded-wave i:nth-child(6), .coded-wave i:nth-child(18) { height: 42px; }
.coded-wave i:nth-child(7), .coded-wave i:nth-child(17) { height: 24px; }
.coded-wave i:nth-child(8), .coded-wave i:nth-child(16) { height: 14px; }
.coded-wave i:nth-child(n+9):nth-child(-n+15) { opacity: 0; }
.coded-home-brand { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; text-align: center; }
.coded-home-brand b { font-size: clamp(25px, 7vw, 33px); line-height: 1; letter-spacing: -.035em; }
.coded-home-brand span { margin-top: 4px; color: var(--home-muted); font-size: 14px; }
.coded-note { position: absolute; z-index: 2; color: var(--home-orange); font-family: Georgia, serif; line-height: 1; filter: drop-shadow(0 0 6px rgba(255, 122, 0, .55)); }
.coded-note-one { top: 43px; left: 9%; font-size: 34px; transform: rotate(-10deg); }
.coded-note-two { top: 46px; right: 10%; font-size: 37px; transform: rotate(9deg); }
.coded-note-three { top: 22px; left: 18%; color: var(--home-gold); font-size: 22px; }

.coded-home-shell .coded-welcome { margin: 0; padding: 13px 18px 12px; border: 1px solid var(--home-line); border-radius: 19px; color: var(--home-text); background: linear-gradient(135deg, rgba(12, 32, 40, .94), rgba(5, 17, 23, .96)); box-shadow: inset 0 1px rgba(255, 255, 255, .02); backdrop-filter: none; }
.coded-home-shell .coded-welcome h1 { margin: 0; color: var(--home-text); font-size: clamp(25px, 6.8vw, 32px); line-height: 1.02; letter-spacing: -.04em; }
.coded-home-shell .coded-welcome h1 span { position: relative; display: inline-block; font-size: .78em; }
.coded-home-shell .coded-welcome p { margin: 3px 0 0; color: var(--home-muted); font-size: 14px; line-height: 1.35; }
.coded-brand-spark { position: absolute; top: 50%; left: 100%; width: min(2.84em, 58px); height: min(2.84em, 58px); display: block; margin-left: .52em; object-fit: contain; transform: translateY(-50%); filter: drop-shadow(0 0 9px rgba(255, 133, 0, .76)); }

.coded-home-actions { gap: 8px; margin-top: 9px; }
.coded-home-shell .coded-home-actions .action-card {
  min-height: 62px;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  padding: 8px 13px;
  border: 1px solid var(--home-line);
  border-radius: 20px;
  color: var(--home-text);
  background: linear-gradient(135deg, rgba(10, 28, 36, .96), rgba(5, 18, 24, .96));
  box-shadow: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.coded-home-shell .coded-home-actions .action-card:hover,
.coded-home-shell .coded-home-actions .action-card:focus-visible {
  transform: scale(1.012);
  border-color: var(--home-orange);
  background: linear-gradient(135deg, rgba(45, 24, 10, .96), rgba(10, 24, 29, .97));
  box-shadow: 0 0 0 1px rgba(255, 122, 0, .25), 0 0 21px rgba(255, 122, 0, .17);
  outline: none;
}
.coded-home-shell .coded-home-actions .action-card > .icon:first-child { width: 33px; height: 33px; color: var(--home-orange); }
.coded-home-shell .coded-home-actions .action-card > .icon:last-child { color: #ffad42; }
.coded-home-shell .coded-home-actions .action-card b { color: var(--home-text); font-size: 16px; }
.coded-home-shell .coded-home-actions .action-card small { margin-top: 2px; color: var(--home-muted); font-size: 12px; line-height: 1.2; }
.coded-star { color: var(--home-orange); font-size: 37px; line-height: 1; text-shadow: 0 0 13px rgba(255, 133, 0, .6); }

.coded-home-shell .coded-benefits { margin: 20px 0 10px; gap: 0; }
.coded-home-shell .coded-benefits div { padding: 0 5px; border-color: rgba(132, 169, 183, .24); }
.coded-home-shell .coded-benefits .icon { width: 30px; height: 30px; margin-bottom: 5px; color: var(--home-orange); filter: drop-shadow(0 0 4px rgba(255, 122, 0, .42)); }
.coded-home-shell .coded-benefits span { color: #f2f2f2; font-size: clamp(10px, 2.8vw, 12px); }
.coded-equalizer { width: 31px; height: 30px; margin: 0 auto 5px; display: flex; align-items: center; justify-content: center; gap: 3px; }
.coded-equalizer i { width: 3px; border-radius: 3px; background: var(--home-orange); box-shadow: 0 0 4px rgba(255, 122, 0, .45); }
.coded-equalizer i:nth-child(1), .coded-equalizer i:nth-child(5) { height: 12px; }
.coded-equalizer i:nth-child(2), .coded-equalizer i:nth-child(4) { height: 23px; }
.coded-equalizer i:nth-child(3) { height: 30px; }

.coded-home-shell .coded-home-footer { position: relative; z-index: 3; min-height: 88px; margin: 0 -14px -12px; padding: 5px 76px 14px 20px; overflow: visible; isolation: isolate; align-items: center; justify-content: center; gap: 3px; background:
  radial-gradient(ellipse at 0 100%, rgba(95, 39, 6, .64), transparent 44%),
  radial-gradient(ellipse at 100% 100%, rgba(95, 39, 6, .64), transparent 44%),
  repeating-radial-gradient(ellipse at 50% 118%, transparent 0 15px, rgba(255, 122, 0, .12) 16px 17px, transparent 18px 25px);
}
.coded-home-shell .coded-home-footer strong { position: relative; color: var(--home-orange); font-family: "Segoe Print", "Comic Sans MS", cursive; font-size: clamp(17px, 4.7vw, 22px); font-weight: 600; font-style: italic; line-height: 1.15; transform: rotate(-1deg); }
.coded-home-shell .coded-home-footer strong::after { content: ''; position: absolute; left: 12%; right: 0; bottom: -4px; height: 2px; border-radius: 50%; background: linear-gradient(90deg, var(--home-orange), var(--home-gold), transparent); transform: rotate(-1deg); }
.coded-home-shell .coded-home-footer > span:not(.coded-voice-arrow) { margin-top: 7px; color: #e8ecee; font-family: "Segoe Print", "Comic Sans MS", cursive; font-size: 11px; line-height: 1.35; transform: rotate(-1deg); }
.coded-home-shell .coded-voice-arrow { position: absolute; right: 55px; bottom: 8px; width: 48px; height: 32px; margin: 0; color: var(--home-orange); transform: rotate(-4deg); filter: drop-shadow(0 0 3px rgba(255, 133, 0, .42)); }
.coded-home-shell .coded-voice-arrow svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.coded-home-shell .coded-arrow-heart {
  position: absolute; right: 12px; bottom: 31px; width: 27px; height: 25px; margin: 0;
  color: #f9b821; transform: rotate(7deg); filter: drop-shadow(0 0 5px rgba(249,184,33,.62));
}
.coded-home-shell .coded-arrow-heart svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.35; stroke-linecap: round; stroke-linejoin: round; }
.coded-home-shell .coded-home-footer .home-voice-button { position: absolute; z-index: 20; right: 12px; bottom: 47px; width: 46px; height: 46px; min-height: 0; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%; color: var(--home-orange); background: transparent; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.coded-home-shell .coded-home-footer .home-voice-button svg { width: 31px; height: 31px; }
.coded-home-shell .home-recording-meta { position: absolute; z-index: 20; right: 16px; bottom: 4px; width: 68px; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; transform: none; pointer-events: none; }
.coded-home-shell .home-recording-meta b { color: #fff; font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums; }
.coded-home-shell .home-recording-meta small { color: rgba(199, 205, 209, .78); font-size: 9px; line-height: 1.1; white-space: nowrap; }
.coded-home-shell .coded-home-footer .home-voice-button:hover,
.coded-home-shell .coded-home-footer .home-voice-button:focus-visible { transform: scale(1.06); border-color: rgba(255, 122, 0, .85); background: rgba(95, 39, 6, .32); box-shadow: 0 0 20px rgba(255, 122, 0, .5); outline: none; }
.coded-home-shell .coded-home-actions .action-card:active,
.coded-home-shell .coded-home-menu:active,
.coded-home-shell .coded-home-footer .home-voice-button:active { transform: scale(.985); filter: brightness(1.12); }

@media (max-width: 380px) {
  .coded-home-shell main { padding-inline: 11px; }
  .coded-home-hero { min-height: 202px; margin-inline: -11px; }
  .coded-home-token { top: 17px; }
  .coded-home-token .brand-avatar { width: 114px; height: 114px; }
  .coded-wave { top: 58px; width: 82%; height: 54px; }
  .coded-home-brand b { font-size: 26px; }
  .coded-home-shell .coded-welcome { padding: 11px 15px; }
  .coded-home-shell .coded-home-actions .action-card { min-height: 58px; padding: 7px 11px; }
  .coded-home-shell .coded-home-actions .action-card b { font-size: 15px; }
  .coded-home-shell .coded-home-actions .action-card small { font-size: 11px; }
  .coded-home-shell .coded-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: 17px 8px; }
  .coded-home-shell .coded-benefits div:nth-child(2) { border-right: 1px solid rgba(132, 169, 183, .24); }
  .coded-home-shell .coded-home-footer { min-height: 82px; margin-inline: -11px; }
  .coded-home-shell .coded-voice-arrow { right: 43px; }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #ff851b;
  --accent-soft: rgba(130, 68, 17, .34);
  --accent-glow: #ffc46c;
  --bg: #071d29;
  --bg-pattern: rgba(255, 138, 31, .08);
  --card: rgba(11, 36, 47, .92);
  --card-solid: #0c2530;
  --card-muted: #0a202a;
  --line: #24414c;
  --text: #f7fafc;
  --muted: #b7c4cb;
  --shadow: 0 16px 42px rgba(0, 0, 0, .32);
  --header: rgba(5, 24, 34, .9);
  --flow-bg: #071d29;
}

* { box-sizing: border-box; }
html { min-height: 100%; overflow-x: clip; background: var(--bg); }
body {
  min-width: 300px;
  min-height: 100%;
  overflow-x: clip;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 8%, var(--bg-pattern) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 25%, var(--bg-pattern) 0 3px, transparent 4px),
    linear-gradient(150deg, var(--bg), color-mix(in srgb, var(--bg) 88%, var(--accent) 12%));
  background-size: 42px 42px, 68px 68px, auto;
  -webkit-tap-highlight-color: transparent;
}
html.max-mobile-webview,
body.max-mobile-webview {
  overscroll-behavior-y: none;
}
body.max-mobile-webview #app,
body.max-mobile-webview .app-shell {
  min-height: 100dvh;
}
button { font: inherit; }
button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 2px; }
.access-shell { min-height: 100svh; display: grid; place-items: center; padding: calc(24px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom)); }
.access-card { width: min(100%, 430px); padding: 30px 24px; border: 1px solid var(--line); border-radius: 28px; background: var(--card); box-shadow: var(--shadow); text-align: center; backdrop-filter: blur(18px); }
.access-card > .brand-avatar { width: 88px; height: 88px; margin-bottom: 18px; border: 2px solid color-mix(in srgb, var(--accent) 52%, transparent); }
.main-auth-card strong { color: var(--text); }
.main-auth-back {
  margin-top: 14px;
  border: 0;
  color: var(--accent);
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.main-auth-back:hover,
.main-auth-back:focus-visible { text-shadow: 0 0 14px rgba(255, 122, 0, .75); }
.main-auth-page { grid-template-rows: minmax(148px, 1fr) auto; }
.main-auth-page .main-auth-card {
  width: 100%;
  padding: clamp(16px, 2.5vh, 24px) clamp(18px, 4.5vw, 26px);
  align-items: stretch;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(255, 138, 31, .72);
  background: radial-gradient(circle at 50% 0, rgba(255, 122, 0, .1), transparent 36%), linear-gradient(155deg, rgba(10, 27, 34, .98), rgba(3, 11, 15, .99));
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 0 32px rgba(255, 122, 0, .13), 0 20px 55px rgba(0, 0, 0, .42);
}
.main-auth-icon {
  width: clamp(48px, 7.5vh, 62px);
  height: clamp(48px, 7.5vh, 62px);
  margin: 0 auto clamp(8px, 1.2vh, 12px);
  display: grid;
  place-items: center;
  color: #fff;
  border: 2px solid #ff850d;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 143, 31, .22), rgba(41, 18, 3, .3));
  box-shadow: 0 0 8px #ffd36a, 0 0 24px rgba(255, 113, 0, .65);
}
.main-auth-icon .icon { width: 48%; height: 48%; }
.main-auth-card h1 { margin: 0; font-size: clamp(26px, 4.35vh, 36px); line-height: 1.04; letter-spacing: -.035em; }
.main-auth-card .main-auth-copy { margin: clamp(7px, 1vh, 10px) auto clamp(12px, 1.8vh, 17px); max-width: 390px; color: #d4dce2; font-size: clamp(14px, 2.25vh, 18px); line-height: 1.35; }
.main-auth-field { display: grid; gap: 6px; color: #dce3e7; font-size: 12px; font-weight: 800; text-align: left; }
.main-auth-field .access-input { min-height: 50px; border-color: rgba(255, 138, 31, .42); background: rgba(0, 0, 0, .28); }
.main-auth-field .access-input:focus { border-color: #ff850d; box-shadow: 0 0 0 3px rgba(255, 122, 0, .12), 0 0 17px rgba(255, 122, 0, .12); outline: none; }
.main-auth-card .access-error { margin: 10px 0 0; padding: 9px 11px; color: #ffb8ae; font-size: 12px; line-height: 1.4; text-align: center; border: 1px solid rgba(255, 91, 70, .34); border-radius: 11px; background: rgba(95, 17, 11, .22); }
.main-auth-card .main-auth-submit { width: 100%; margin-top: 13px; border: 0; }
.main-auth-card .main-auth-submit:disabled { opacity: .62; cursor: wait; }
.main-auth-card .main-auth-back { margin-top: 9px; min-height: 32px; }
.app-loading-shell { min-height: 100svh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 42%, rgba(255,112,0,.1), transparent 32%), radial-gradient(circle at 50% 50%, #061922 0, #020b10 52%, #010609 100%); color: #fff7ef; overflow: hidden; }
.app-loading-card { width: min(100%, 360px); display: grid; justify-items: center; gap: 10px; text-align: center; }
.app-loading-card .eyebrow { margin: 0; color: var(--accent); font-weight: 800; letter-spacing: .12em; }
.app-loading-card h1 { margin: 0; font-size: clamp(28px, 8vw, 40px); line-height: 1.05; letter-spacing: -.035em; }
.app-loading-card > p:last-child { margin: 0; color: rgba(255,247,239,.66); }
.app-loading-card .app-loading-pulsator { width: min(340px, 90vw); aspect-ratio: 1.28; margin: -20px 0 -18px; }
.app-loading-card .app-loading-pulsator .track-pulsator-rings { width: 76%; }
.app-loading-card .app-loading-pulsator .track-pulsator-core { width: 31%; max-width: 104px; }
.brand-lockup { display: block; width: min(100%, 300px); aspect-ratio: 1; margin: -18px auto -24px; object-fit: contain; border-radius: 24px; }
.access-card h1 { margin: 0; font-size: clamp(30px, 9vw, 42px); line-height: 1; letter-spacing: -.045em; }
.access-card > p:not(.eyebrow):not(.access-error):not(.access-hint) { margin: 14px auto 22px; max-width: 330px; color: var(--muted); line-height: 1.5; }
.access-label { display: block; margin: 20px 2px 7px; font-size: 13px; font-weight: 750; text-align: left; }
.access-input { width: 100%; min-height: 52px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 16px; color: var(--text); background: var(--card-solid); font: inherit; }
.access-input:focus { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.access-submit { width: 100%; min-height: 52px; margin-top: 14px; }
.access-error { margin: 10px 2px 0; color: #c53f2f; font-size: 13px; text-align: left; }
.access-hint { margin: 13px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.access-loader { width: 34px; height: 34px; margin: 24px auto 4px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: access-spin .75s linear infinite; }
@keyframes access-spin { to { transform: rotate(360deg); } }
.app-shell { width: min(100%, 540px); min-height: 100svh; margin: 0 auto; position: relative; overflow-x: clip; background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: 0 0 80px rgba(0,0,0,.08); }
main { min-width: 0; padding: 0 16px calc(28px + env(safe-area-inset-bottom)); }
.app-header { position: sticky; z-index: 50; top: 0; height: calc(68px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0; display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; border-bottom: 1px solid var(--line); background: var(--header); backdrop-filter: blur(18px); }
.icon-button, .brand-button, .popover-menu button { border: 0; color: inherit; background: transparent; cursor: pointer; }
.icon-button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; }
.icon-button:hover { background: var(--accent-soft); }
.icon-button svg { width: 27px; height: 27px; stroke: var(--accent); fill: var(--accent); }
.back-button svg { fill: none; stroke: var(--muted); stroke-width: 2.2; }
.is-hidden { visibility: hidden; }
.brand-button { justify-self: start; display: flex; gap: 10px; align-items: center; padding: 4px; text-align: left; border-radius: 12px; }
.brand-button > span:last-child { display: flex; flex-direction: column; line-height: 1.08; }
.brand-button strong { font-size: 18px; letter-spacing: .02em; }
.brand-button small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.brand-avatar { width: 40px; height: 40px; flex: 0 0 auto; object-fit: cover; border-radius: 50%; background: #0a0a0a; box-shadow: 0 3px 12px rgba(0,0,0,.18); }
.menu-scrim { position: fixed; z-index: 60; inset: 0; background: rgba(0,0,0,.18); backdrop-filter: blur(2px); }
.popover-menu { position: fixed; z-index: 70; top: calc(58px + env(safe-area-inset-top)); left: max(16px, calc(50% + 20px)); width: min(288px, calc(100vw - 32px)); padding: 9px; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--card-solid) 94%, transparent); box-shadow: 0 22px 60px rgba(0,0,0,.25); backdrop-filter: blur(22px); animation: menu-in .18s ease-out; }
.popover-menu button { width: 100%; min-height: 50px; display: flex; align-items: center; gap: 13px; padding: 9px 12px; border-radius: 12px; font-weight: 650; text-align: left; }
.popover-menu button:hover { background: var(--accent-soft); }
.popover-menu .icon { color: var(--accent); }
.popover-menu hr { margin: 6px 8px; border: 0; border-top: 1px solid var(--line); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
.icon { width: 28px; height: 28px; flex: 0 0 auto; display: inline-grid; place-items: center; color: var(--accent); }
.icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero { position: relative; overflow: hidden; margin: 0 -16px; }
.home-hero { min-height: 310px; padding: 24px 20px; background: radial-gradient(circle at 50% 62%, rgba(255,151,41,.25), transparent 43%); }
.hero-brand { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; }
.hero-brand .brand-avatar { width: 66px; height: 66px; border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.hero-brand > div { display: flex; flex-direction: column; }
.hero-brand b { font-size: clamp(28px, 8vw, 38px); letter-spacing: -.04em; }
.hero-brand span { color: var(--muted); font-size: 15px; }
.hero-token { position: absolute; z-index: 1; inset: 82px 0 0; display: grid; place-items: center; }
.hero-token .brand-avatar { width: 172px; height: 172px; border: 0; box-shadow: 0 0 44px rgba(255,122,0,.32); }
.sound-wave { position: absolute; z-index: -1; width: min(92%, 480px); height: 82px; opacity: .8; background: repeating-linear-gradient(90deg, transparent 0 8px, var(--accent) 9px 12px, transparent 13px 19px); clip-path: polygon(0 45%,5% 38%,10% 48%,15% 24%,20% 42%,25% 12%,30% 38%,35% 20%,40% 44%,45% 8%,50% 40%,55% 8%,60% 44%,65% 20%,70% 38%,75% 12%,80% 42%,85% 24%,90% 48%,95% 38%,100% 45%,100% 55%,95% 62%,90% 52%,85% 76%,80% 58%,75% 88%,70% 62%,65% 80%,60% 56%,55% 92%,50% 60%,45% 92%,40% 56%,35% 80%,30% 62%,25% 88%,20% 58%,15% 76%,10% 52%,5% 62%,0 55%); }
.float-note { position: absolute; z-index: 2; color: var(--accent); font-weight: 900; opacity: .8; }
.note-one { left: 7%; bottom: 55px; font-size: 33px; transform: rotate(-12deg); }
.note-two { right: 5%; top: 20px; font-size: 26px; transform: rotate(12deg); }
.note-three { left: 45%; top: 90px; font-size: 25px; }
.welcome-card { position: relative; z-index: 5; margin-top: -24px; padding: 22px; border: 1px solid var(--line); border-radius: 26px; background: var(--card); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.eyebrow { margin: 0 0 7px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, p { overflow-wrap: anywhere; }
.welcome-card h1 { margin: 0; font-size: clamp(31px, 8vw, 43px); line-height: .98; letter-spacing: -.045em; }
.welcome-card h1 span { font-size: .68em; line-height: 1.15; }
.welcome-card > p:last-child { margin: 15px 0 0; color: var(--muted); line-height: 1.5; }
.primary-actions { display: grid; gap: 11px; margin-top: 16px; }
.action-card { width: 100%; min-width: 0; min-height: 92px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 22px; color: var(--text); background: var(--card); box-shadow: 0 5px 18px rgba(0,0,0,.04); text-align: left; cursor: pointer; }
.action-card.featured { border-color: var(--accent); background: linear-gradient(110deg, var(--card), var(--accent-soft)); }
.action-card:not(:disabled):hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.action-card:not(:disabled):focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.action-card > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.action-card b { font-size: 18px; }
.action-card small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 24px 0; }
.benefits div { min-width: 0; padding: 0 4px; text-align: center; border-right: 1px solid var(--line); }
.benefits div:last-child { border: 0; }
.benefits .icon { width: 32px; height: 32px; margin: 0 auto 7px; }
.benefits span { color: var(--muted); font-size: clamp(10px, 2.8vw, 13px); line-height: 1.25; }
.brand-footer { margin: 24px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--accent); text-align: center; }
.brand-footer strong { font-family: Georgia, serif; font-style: italic; font-size: 20px; }
.brand-footer span { color: var(--muted); font-size: 12px; }
.home-voice-button { min-height: 46px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--accent); border-radius: 24px; color: var(--accent); background: var(--card); font-weight: 750; cursor: pointer; }
.home-voice-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-voice-button span { color: inherit; font-size: 13px; }
.page-intro { margin: 18px 0; padding: 18px; display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.page-intro h1, .page-hero h1 { margin: 0; font-size: clamp(28px, 8vw, 40px); letter-spacing: -.04em; line-height: 1; }
.page-intro p:last-child, .page-hero p:last-child { margin: 9px 0 0; color: var(--muted); line-height: 1.4; }
.mini-avatar .brand-avatar { width: 48px; height: 48px; }
.compact-action { min-height: 74px; margin: 12px 0; }
.status-dot { width: 27px; height: 27px; display: grid !important; place-items: center; border-radius: 50%; color: white; background: var(--accent); }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.choice { min-height: 68px; padding: 10px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 17px; color: var(--text); background: var(--card); text-align: left; cursor: pointer; }
.choice:hover, .choice.selected { border-color: var(--accent); background: var(--accent-soft); }
.choice .icon { width: 25px; height: 25px; }
.choice span:last-child { font-weight: 700; font-size: 14px; }
.stage-boundary, .tip-card { margin: 16px 0; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: 17px; color: var(--muted); background: color-mix(in srgb, var(--accent-soft) 45%, var(--card)); font-size: 13px; line-height: 1.45; }
.bottom-actions { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; padding: 12px 0 max(12px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 20%); }
.primary-button, .secondary-button { min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 17px; font-weight: 750; cursor: pointer; }
.primary-button { border: 0; color: white; background: linear-gradient(135deg, var(--accent), #ff8c18); }
.primary-button:disabled { opacity: .46; cursor: not-allowed; }
.secondary-button { border: 1px solid var(--line); color: var(--text); background: var(--card); }
.primary-button .icon, .secondary-button .icon { width: 20px; height: 20px; }
.page-hero { min-height: 190px; margin: 0 -16px 18px; padding: 32px 22px 24px; position: relative; overflow: hidden; display: flex; align-items: center; background: radial-gradient(circle at 90% 30%, var(--accent-soft), transparent 53%); }
.page-hero > div:first-child { position: relative; z-index: 2; width: 68%; }
.page-token { position: absolute; right: 12px; bottom: 18px; width: 125px; height: 125px; display: grid; place-items: center; border-radius: 50%; box-shadow: 0 0 35px color-mix(in srgb, var(--accent) 28%, transparent); }
.page-token .brand-avatar { width: 116px; height: 116px; }
.empty-state { min-height: 260px; padding: 36px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 24px; background: var(--card); text-align: center; }
.empty-state .icon { width: 58px; height: 58px; }
.empty-state h2 { margin: 17px 0 6px; }
.empty-state p { max-width: 360px; margin: 0; color: var(--muted); line-height: 1.5; }
.single-back { margin: 18px 0 0; }
.single-back button { width: 100%; }
.neutral-list { display: grid; gap: 10px; }
.neutral-list > div { min-height: 82px; padding: 15px; display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: 19px; background: var(--card); }
.neutral-list span { display: flex; flex: 1; flex-direction: column; gap: 5px; }
.neutral-list small { color: var(--muted); }
.neutral-list em { color: var(--muted); font-size: 25px; font-style: normal; }
.steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.steps li { min-height: 62px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--card); }
.steps li > button, .steps li > div { width: 100%; min-height: 62px; display: grid; grid-template-columns: 34px 32px minmax(0, 1fr) 25px; align-items: center; gap: 10px; padding: 10px 13px; border: 0; color: var(--text); background: transparent; text-align: left; }
.steps li > button { cursor: pointer; }
.steps li.available:hover { border-color: var(--accent); background: var(--accent-soft); }
.steps li > button > span:first-child, .steps li > div > span:first-child { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-weight: 800; }
.steps p { margin: 0; color: var(--muted); }
.steps small { color: var(--muted); font-size: 10px; }
.faq-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.faq-item { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--card); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.faq-item > button { width: 100%; min-height: 62px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 25px; align-items: center; gap: 11px; padding: 10px 13px; border: 0; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.faq-number { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-weight: 800; }
.faq-question { color: var(--text); font-size: 13px; font-weight: 750; line-height: 1.32; }
.faq-item > button > .icon:last-child { width: 22px; height: 22px; color: var(--accent); }
.faq-answer { margin: 0 13px 0 58px; padding: 0 25px 13px 0; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.faq-answer p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.48; }
.faq-item:hover, .faq-item:focus-within, .faq-item.open { border-color: var(--accent); background: var(--accent-soft); }
.tip-card { display: flex; gap: 12px; align-items: flex-start; }
.tip-card p { margin: 0; }
.tip-card a, .support-feedback a { color: var(--accent); font-weight: 800; overflow-wrap: anywhere; }
.support-list { display: grid; gap: 9px; }
.support-list button { min-height: 72px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 22px; gap: 3px 12px; align-items: center; padding: 12px 16px; border: 1px solid var(--line); border-radius: 18px; color: var(--text); background: var(--card); text-align: left; }
.support-list button { cursor: pointer; }
.support-list button:hover { border-color: var(--accent); background: var(--accent-soft); }
.support-list .icon:last-child { width: 22px; height: 22px; color: var(--muted); }
.support-list span { font-weight: 700; }
.support-list small { color: var(--muted); }
.support-action { margin-top: 10px; }
.support-form { display: grid; gap: 14px; padding: 17px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.support-form label { display: grid; gap: 7px; font-weight: 700; }
.support-form label > span small { color: var(--muted); font-weight: 500; }
.support-form select, .support-form textarea, .support-form input { width: 100%; border: 1px solid var(--line); border-radius: 15px; color: var(--text); background: var(--card-solid); font: inherit; }
.support-form select, .support-form input { min-height: 50px; padding: 10px 13px; }
.support-form textarea { min-height: 132px; padding: 13px; resize: vertical; line-height: 1.45; }
.support-form select:focus, .support-form textarea:focus, .support-form input:focus { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--accent) 15%, transparent); }
.support-context { display: flex; gap: 11px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--card-muted); }
.support-context span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.support-context small { color: var(--muted); line-height: 1.35; }
.support-form-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; }
.support-feedback { margin: 13px 0; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--accent-soft) 45%, var(--card)); }
.support-feedback.success { border-color: #44a66e; }
.support-feedback.error { border-color: #d45a4d; }
.support-feedback p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.document-list { display: grid; gap: 9px; }
.document-list button, .document-list a { min-height: 64px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 22px; gap: 11px; align-items: center; padding: 11px 14px; border: 1px solid var(--line); border-radius: 17px; color: var(--text); background: var(--card); text-align: left; cursor: pointer; text-decoration: none; }
.document-list button:hover, .document-list a:hover { border-color: var(--accent); background: var(--accent-soft); }
.document-list button .icon:last-child, .document-list a .icon:last-child { width: 21px; height: 21px; color: var(--muted); }
.document-list span { display: flex; flex-direction: column; gap: 3px; font-weight: 700; }
.document-list small { color: var(--muted); font-weight: 500; }
.document-list .unavailable { opacity: .68; }
.legal-consent { margin: 18px 0 4px; padding: 14px; display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; border: 1px solid var(--line); border-radius: 17px; background: var(--card); cursor: pointer; }
.legal-consent:has(input:disabled) { cursor: wait; }
.legal-consent input { position: absolute; opacity: 0; }
.legal-consent > span { width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid var(--accent); border-radius: 6px; color: white; }
.legal-consent input:checked + span, .legal-consent.accepted > span { background: var(--accent); }
.legal-consent p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.legal-consent a { color: var(--accent); font-weight: 700; }
.legal-consent small { display: block; margin-top: 5px; color: #c53f2f; }
.legal-consent.error { border-color: #d45a4d; }
.action-card:disabled, .home-voice-button:disabled { opacity: .48; cursor: not-allowed; }
.result-support { width: 100%; margin-top: 8px; color: var(--muted); }
.settings-card { margin: 12px 0; padding: 15px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.settings-card h2 { margin: 0 0 13px; display: flex; align-items: center; gap: 8px; font-size: 17px; }
.settings-card h2 .icon { width: 24px; height: 24px; }
.theme-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.theme-picker button { min-height: 58px; display: flex; gap: 9px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 16px; color: var(--text); background: var(--card-muted); cursor: pointer; }
.theme-picker button.selected { border-color: var(--accent); background: var(--accent-soft); }
.theme-picker i { width: 18px; height: 18px; border: 2px solid var(--line); border-radius: 50%; }
.theme-picker button.selected i { border: 5px solid var(--accent); }
.moon { color: var(--accent); font-size: 29px; line-height: 0; }
.setting-row { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); }
.setting-row:first-of-type { border-top: 0; }
.setting-row > span { display: flex; flex-direction: column; gap: 3px; }
.setting-row small { color: var(--muted); }
.setting-row.disabled { opacity: .65; }
.switch { width: 51px; height: 29px; flex: 0 0 auto; padding: 3px; border: 0; border-radius: 20px; background: #aeb8bd; }
.switch i { display: block; width: 23px; height: 23px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.25); }
.switch.on { background: var(--accent); }
.switch.on i { margin-left: 22px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.flow-screen { min-height: calc(100svh - 68px); margin: 0 -16px; padding: 18px 16px 104px; background: var(--flow-bg); background-image: radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--accent) 13%, transparent) 0 2px, transparent 3px), radial-gradient(circle at 85% 32%, color-mix(in srgb, #3aaeff 12%, transparent) 0 2px, transparent 3px); background-size: 48px 48px, 64px 64px; }
.flow-intro { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; align-items: start; margin-bottom: 14px; }
.flow-avatar .brand-avatar { width: 48px; height: 48px; }
.flow-message { position: relative; padding: 15px 17px; border: 1px solid var(--line); border-radius: 20px 20px 20px 7px; background: var(--card); box-shadow: 0 5px 18px rgba(21, 72, 100, .08); }
.flow-message h1 { margin: 2px 0 7px; font-size: clamp(22px, 6vw, 30px); line-height: 1.08; letter-spacing: -.025em; }
.flow-message p { margin: 0; color: var(--muted); line-height: 1.4; }
.flow-progress { color: var(--accent); font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.compact-action.selected { box-shadow: inset 0 0 0 1px var(--accent); }
.choice { position: relative; }
.flow-input-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 13px; align-items: center; }
.flow-input-row .inline-voice-recorder { grid-column: 1 / 3; }
.flow-input-row label { min-width: 0; }
.flow-input-row input, .details-card textarea { width: 100%; border: 1px solid color-mix(in srgb, #5aaee4 50%, var(--line)); color: var(--text); background: var(--card); outline: none; }
.flow-input-row input { height: 52px; padding: 0 17px; border-radius: 28px; }
.flow-input-row input:focus, .details-card textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.flow-input-row input::placeholder, .details-card textarea::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); }
.mic-button { width: 46px; height: 46px; display: grid; place-items: center; padding: 8px; border: 0; border-radius: 50%; color: var(--accent); background: transparent; cursor: pointer; }
.mic-button:disabled { color: var(--muted); cursor: not-allowed; opacity: .45; }
.mic-button.recording { color: white; background: #e54838; box-shadow: 0 0 0 7px color-mix(in srgb, #e54838 20%, transparent); animation: mic-pulse 1.25s ease-in-out infinite; }
.mic-button svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 13px color-mix(in srgb, #e54838 5%, transparent); } }
.flow-actions { margin-inline: -1px; background: linear-gradient(transparent, var(--flow-bg) 22%); }
.details-card { position: relative; margin-top: 12px; padding: 18px; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px 12px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.details-card > .icon { width: 32px; height: 32px; }
.details-card h2 { margin: 0 0 5px; font-size: 18px; }
.details-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.details-card label { grid-column: 1 / 3; }
.details-card.instrumental-details { border-color: color-mix(in srgb, var(--accent) 46%, var(--line)); }
.instrumental-details-note { grid-column: 1 / 3; padding: 7px 0 1px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.final-instrumental-note { display: grid; gap: 5px; margin-top: 18px; padding: 16px; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.final-instrumental-note b { color: var(--text); font-size: 17px; }
.final-instrumental-note span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.details-card > .compact-action, .details-card > .inline-voice-recorder { grid-column: 1 / 3; }
.details-card textarea { min-height: 118px; padding: 14px; resize: vertical; border-radius: 16px; font: inherit; line-height: 1.45; }
.vocal-style-block { margin-top: 16px; }
.vocal-style-block h2 { margin: 0; color: var(--text); font-size: 18px; line-height: 1.2; text-align: center; }
.vocal-style-block.disabled { opacity: .46; }
.vocal-style-block.disabled button { cursor: not-allowed; }
.details-mic { position: absolute; right: 20px; bottom: 23px; }
.ready-hero { padding: 24px 19px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 24px; background: linear-gradient(135deg, var(--card), var(--accent-soft)); text-align: center; box-shadow: var(--shadow); }
.ready-hero > .icon { width: 50px; height: 50px; }
.ready-hero h1 { margin: 5px 0 10px; font-size: clamp(29px, 8vw, 39px); line-height: 1; letter-spacing: -.04em; }
.ready-hero p:last-child { margin: 0; color: var(--muted); line-height: 1.45; }
.song-summary { display: grid; gap: 8px; margin-top: 14px; }
.song-summary button { min-height: 66px; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 17px; color: var(--text); background: var(--card); text-align: left; cursor: pointer; }
.song-summary button:hover { border-color: var(--accent); }
.song-summary button > span:first-child { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.song-summary small { color: var(--muted); }
.song-summary b { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.song-summary .icon { width: 23px; height: 23px; }
.reset-draft { width: 100%; }
.assistant-note { display: grid; grid-template-columns: 50px 1fr; gap: 11px; align-items: start; margin-bottom: 14px; }
.assistant-avatar .brand-avatar { width: 48px; height: 48px; }
.assistant-note > div:last-child { padding: 13px 15px; border: 1px solid var(--line); border-radius: 19px 19px 19px 7px; background: var(--card); box-shadow: 0 5px 18px rgba(21, 72, 100, .08); }
.assistant-note h1 { margin: 0 0 5px; font-size: 18px; }
.assistant-note p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.lyrics-card, .final-song-card { padding: 17px; border: 1.5px solid color-mix(in srgb, var(--accent) 70%, var(--line)); border-radius: 21px; background: var(--card); box-shadow: var(--shadow); }
.lyrics-card > header, .final-song-card > header { display: flex; align-items: center; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.lyrics-card header > .icon, .final-song-card header > .icon { width: 28px; height: 28px; color: var(--accent); }
.lyrics-card h2, .final-song-card h2 { flex: 1; margin: 0; font-size: 20px; }
.lyrics-pencil { width: 38px; height: 38px; display: grid; place-items: center; padding: 7px; border: 0; color: var(--accent); background: transparent; cursor: pointer; }
.lyrics-pencil .icon { width: 26px; height: 26px; }
.lyrics-copy { margin: 0; padding: 16px 2px 9px; max-height: 52svh; overflow: auto; white-space: pre-wrap; color: var(--text); background: transparent; font: inherit; line-height: 1.62; }
.lyrics-card footer { margin-top: 8px; padding-top: 11px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.lyrics-editor { width: 100%; min-height: 52svh; margin-top: 14px; padding: 13px; resize: vertical; border: 1px solid var(--accent); border-radius: 15px; color: var(--text); background: var(--card-muted); font: inherit; line-height: 1.55; outline: none; }
.lyrics-edit-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 9px; margin-top: 10px; }
.lyrics-command { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; margin-top: 13px; }
.lyrics-command label { min-width: 0; }
.lyrics-command .inline-voice-recorder { grid-column: 1 / 3; }
.lyrics-command textarea { width: 100%; min-height: 54px; max-height: 150px; padding: 14px 16px; resize: vertical; border: 1px solid color-mix(in srgb, #5aaee4 50%, var(--line)); border-radius: 20px; color: var(--text); background: var(--card); font: inherit; line-height: 1.4; outline: none; }
.lyrics-command textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.lyrics-command-submit { grid-column: 1 / 3; width: 100%; }
.final-song-card dl { margin: 8px 0 14px; }
.final-song-card dl .final-parameter { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.final-song-card dl .final-parameter > span:first-child { min-width: 0; flex: 1; display: grid; grid-template-columns: minmax(95px, .8fr) 1.4fr; gap: 9px; }
.final-song-card dl .final-parameter > .icon { width: 20px; height: 20px; color: var(--accent); }
.final-song-card dl .final-parameter:hover { color: var(--accent); }
.final-song-card dl .final-parameter > .icon { transition: transform .16s ease; }
.final-song-card dl .final-parameter:hover > .icon,
.final-song-card dl .final-parameter:focus-visible > .icon { transform: scale(1.1); }
.final-song-card dt { color: var(--muted); }
.final-song-card dd { margin: 0; font-weight: 750; }
.final-song-card h3 { display: flex; align-items: center; gap: 8px; margin: 15px 0 0; font-size: 17px; }
.final-song-card h3 .icon { width: 24px; height: 24px; color: var(--accent); }
.final-text-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.final-text-actions button { min-height: 46px; font-size: 13px; }
.final-copy { max-height: 35svh; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--card-muted); }
.final-slogan { display: grid; place-items: center; gap: 3px; padding: 16px 0 2px; color: var(--muted); }
.final-slogan b { color: var(--accent); font-size: 23px; font-style: italic; }
.boundary-card { padding: 28px 20px; border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line)); border-radius: 25px; background: linear-gradient(145deg, var(--card), var(--accent-soft)); text-align: center; box-shadow: var(--shadow); }
.boundary-card .brand-avatar { width: 78px; height: 78px; }
.boundary-card h1 { margin: 5px 0 10px; font-size: clamp(28px, 8vw, 39px); line-height: 1.05; }
.boundary-card p:last-child, .lyrics-empty p { color: var(--muted); line-height: 1.5; }
.lyrics-empty { padding: 28px 20px; border-radius: 22px; background: var(--card); text-align: center; }
.music-generation-hero { padding: 12px 12px 20px; text-align: center; }
.music-orbit { position: relative; width: 178px; height: 178px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, var(--card)) 0 35%, color-mix(in srgb, var(--accent) 12%, transparent) 36% 58%, transparent 59%); box-shadow: 0 0 55px color-mix(in srgb, var(--accent) 28%, transparent); }
.music-orbit::before, .music-orbit::after { content: ''; position: absolute; inset: 20px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 50%; animation: music-ring 2.4s ease-in-out infinite; }
.music-orbit::after { inset: 5px; animation-delay: .8s; }
.music-orbit .brand-avatar { width: 108px; height: 108px; z-index: 1; filter: drop-shadow(0 8px 16px rgba(0,0,0,.2)); }
.music-note { position: absolute; z-index: 2; right: 18px; bottom: 25px; width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--accent); font-size: 27px; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent); }
@keyframes music-ring { 50% { transform: scale(1.08); opacity: .42; } }
.music-generation-hero h1 { margin: 0 0 7px; font-size: clamp(29px, 8vw, 40px); line-height: 1.05; letter-spacing: -.04em; }
.music-generation-hero p { max-width: 390px; margin: 0 auto; color: var(--muted); line-height: 1.45; }
.generation-steps { display: grid; gap: 0; margin: 0; padding: 18px; list-style: none; border: 1px solid var(--line); border-radius: 23px; background: var(--card); box-shadow: var(--shadow); }
.generation-steps li { position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 12px; min-height: 74px; }
.generation-steps li:not(:last-child)::after { content: ''; position: absolute; left: 20px; top: 43px; bottom: 3px; border-left: 2px dashed var(--line); }
.generation-steps li > span { position: relative; z-index: 1; width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; color: white; font-weight: 900; }
.generation-steps li.done > span { border-color: var(--accent); background: var(--accent); }
.generation-steps li.active > span { border-color: var(--accent); box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 13%, transparent); }
.generation-steps li.active > span i { width: 14px; height: 14px; border: 3px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: voice-spin .8s linear infinite; }
.generation-steps li div { padding-top: 2px; }
.generation-steps b, .generation-steps small { display: block; }
.generation-steps b { margin-bottom: 4px; font-size: 17px; }
.generation-steps small { color: var(--muted); line-height: 1.35; }
.generation-wait { display: flex; justify-content: center; gap: 12px; align-items: center; padding: 20px 8px 4px; color: var(--muted); }
.generation-wait > span { color: var(--accent); font-size: 26px; }
.generation-wait b, .generation-wait small { display: block; }
.generation-wait small { margin-top: 3px; }
.result-loading { min-height: 58svh; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; }
.result-loading h1, .result-loading p { margin: 0; }
.result-loading p { color: var(--muted); }
.result-ready-note { display: grid; grid-template-columns: 45px 1fr; gap: 12px; align-items: center; margin-bottom: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.result-ready-note > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--accent); font-size: 23px; font-weight: 900; }
.result-ready-note h1 { margin: 0 0 4px; font-size: 21px; }
.result-ready-note p { margin: 0; color: var(--accent); font-weight: 650; }
.locked-song-card { padding: 12px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius: 25px; background: var(--card); box-shadow: var(--shadow); }
.song-heading { display: flex; gap: 12px; align-items: start; padding: 12px 3px 9px; }
.song-heading > div { min-width: 0; flex: 1; }
.song-heading h2 { margin: 0 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 21px; }
.song-heading p { margin: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.song-heading > span { color: var(--accent); font-size: 27px; line-height: 1; }
.locked-song-card audio { display: none; }
.preview-controls { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 11px; align-items: center; padding: 3px 1px 5px; }
.preview-play { width: 54px; height: 54px; display: grid; place-items: center; padding: 0 0 0 3px; border: 0; border-radius: 50%; color: white; background: linear-gradient(145deg, #ff9a16, #ff6500); box-shadow: 0 7px 17px rgba(255, 111, 0, .3); font-size: 22px; cursor: pointer; }
.preview-timeline { position: relative; min-width: 0; }
.preview-timeline input { width: 100%; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.preview-timeline > i { position: absolute; left: calc(100% - 4px); top: -2px; width: 18px; height: 25px; pointer-events: none; }
.preview-timeline > i::before { content: '🔒'; position: absolute; right: 0; top: -8px; font-style: normal; font-size: 17px; }
.preview-timeline > div { display: grid; grid-template-columns: 1fr auto 1fr; margin-top: -2px; color: var(--muted); font-size: 12px; }
.preview-timeline > div b { color: var(--accent); font-weight: 700; }
.preview-timeline > div span:last-child { text-align: right; }
.preview-state { min-height: 64px; display: flex; gap: 11px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 15px; background: var(--card-muted); }
.preview-state > div { min-width: 0; flex: 1; }
.preview-state b, .preview-state small { display: block; }
.preview-state small { margin-top: 3px; color: var(--muted); }
.preview-state.error > span { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: white; background: #d85848; font-weight: 900; }
.preview-state .secondary-button { width: auto; min-height: 42px; padding: 0 13px; }
.locked-explanation { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start; margin-top: 13px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.locked-explanation > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); font-size: 23px; }
.locked-explanation b { display: block; margin-bottom: 4px; }
.locked-explanation p { margin: 0; color: var(--muted); line-height: 1.42; }
.locked-explanation.entitled { border-color: color-mix(in srgb, #25a46f 55%, var(--line)); }
.locked-explanation.entitled > span { color: white; background: #25a46f; font-weight: 900; }
.paywall-actions { display: grid; gap: 10px; margin-top: 13px; }
.unlock-button { min-height: 58px; font-size: 16px; box-shadow: 0 10px 25px rgba(255, 111, 0, .25); }
.packages-button { min-height: 56px; }
.packages-button .icon { margin-left: auto; }
.locked-footnote { margin: 13px 0 0; color: var(--muted); text-align: center; font-size: 12px; }
.paywall-dialog .dialog-icon { font-size: 21px; }
.unlocked-song-card audio { display: none; }
.full-timeline > i { display: none; }
.full-timeline > div { grid-template-columns: auto 1fr auto; }
.unlocked-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 13px; }
.unlocked-actions .secondary-button {
  min-height: 54px; padding: 0 10px;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .12s ease;
}
.unlocked-actions .secondary-button:hover,
.unlocked-actions .secondary-button:focus-visible { border-color: var(--accent); outline: none; }
.unlocked-actions .secondary-button.selected {
  border-color: var(--accent);
  background: rgba(40, 42, 35, .948);
  background: color-mix(in srgb, var(--accent) 11%, var(--card));
  box-shadow: 0 0 0 1px rgba(255, 122, 0, .32), 0 0 18px rgba(255, 122, 0, .14);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 14%, transparent);
}
.unlocked-actions .secondary-button:active { transform: scale(.99); }
.result-track-navigation { margin-top: 8px; }
.result-track-navigation .secondary-button:disabled { opacity: .46; cursor: not-allowed; }
.result-action-notice {
  margin: 8px 4px 0;
  color: #ff8a20;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}
.my-songs-note { margin-bottom: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 18px; color: var(--muted); background: var(--card); line-height: 1.42; }
.songs-list { display: grid; gap: 10px; }
.song-list-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: var(--card); box-shadow: var(--shadow); }
.song-open { width: 100%; display: grid; grid-template-columns: 82px minmax(0, 1fr) 20px; gap: 11px; align-items: center; padding: 9px 62px 9px 9px; border: 0; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.song-open > span { min-width: 0; }
.song-open b, .song-open small, .song-open em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-open b { font-size: 15px; }
.song-open small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.song-open em { margin-top: 4px; color: var(--accent); font-size: 11px; font-style: normal; font-weight: 750; }
.song-open > .icon { color: var(--accent); }
.song-thumbnail { width: 82px; border-radius: 13px; }
.song-list-play { position: absolute; z-index: 2; right: 31px; top: 50%; width: 40px; height: 40px; display: grid; place-items: center; transform: translateY(-50%); border: 0; border-radius: 50%; color: white; background: var(--accent); cursor: pointer; }
.song-list-play:disabled { color: var(--muted); background: var(--card-muted); cursor: default; }
.songs-signature { margin: 18px 0 5px; color: var(--accent); text-align: center; font-weight: 750; }
.balance-card { display: flex; align-items: center; gap: 15px; margin-bottom: 13px; padding: 18px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.balance-card > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-soft); }
.balance-card .icon { width: 28px; height: 28px; }
.balance-card div { display: flex; flex: 1; align-items: baseline; justify-content: space-between; gap: 12px; }
.balance-card small { color: var(--muted); font-weight: 700; }
.balance-card b { color: var(--accent); font-size: 34px; line-height: 1; }
.billing-section { margin-top: 13px; padding: 15px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.billing-section h2 { margin: 0 0 11px; font-size: 18px; }
.billing-history-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.billing-history-row:first-of-type { border-top: 0; }
.billing-history-row span { min-width: 0; flex: 1; }
.billing-history-row b, .billing-history-row small, .billing-empty b, .billing-empty small { display: block; }
.billing-history-row small, .billing-empty small { margin-top: 4px; color: var(--muted); line-height: 1.4; }
.billing-history-row em { white-space: nowrap; color: var(--text); font-style: normal; font-weight: 800; }
.billing-empty { padding: 13px; border-radius: 15px; background: var(--card-muted); }
.package-options { display: grid; gap: 9px; }
.package-option { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; color: var(--text); background: var(--card-muted); text-align: left; cursor: pointer; }
.package-option:not(:disabled):hover, .package-option:not(:disabled):focus-visible { border-color: var(--accent); }
.package-option span { min-width: 0; flex: 1; }
.package-option b, .package-option small { display: block; }
.package-option small { margin-top: 4px; color: var(--muted); line-height: 1.35; }
.package-option em { white-space: nowrap; color: var(--accent); font-size: 18px; font-style: normal; font-weight: 850; }
.package-option:disabled { opacity: .55; cursor: not-allowed; }
.setting-legal-link { margin: 12px 0 0; font-size: 13px; }
.setting-legal-link a { color: var(--accent); }
.inline-voice-recorder { min-height: 54px; display: grid; grid-template-columns: 38px minmax(70px, 1fr) auto auto 38px; align-items: center; gap: 7px; padding: 6px; border: 1px solid var(--accent); border-radius: 28px; background: var(--card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
.inline-voice-recorder button { height: 38px; border: 0; border-radius: 20px; color: var(--text); background: var(--card-muted); font-weight: 800; cursor: pointer; }
.inline-voice-recorder .voice-stop { display: flex; align-items: center; gap: 5px; padding: 0 10px; color: white; background: #25a46f; }
.inline-voice-recorder .voice-stop span { width: 10px; height: 10px; border-radius: 2px; background: white; }
.inline-voice-recorder .voice-quick { color: white; background: var(--accent); font-size: 21px; }
.inline-voice-recorder > b { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.live-wave { height: 30px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 2px; overflow: hidden; }
.live-wave i { width: 2px; height: 5px; flex: 0 0 2px; border-radius: 2px; background: var(--accent); transition: height .08s linear; }
.voice-status { margin: 0 0 13px; min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: 0 5px 18px rgba(21, 72, 100, .07); color: var(--muted); font-size: 13px; }
.voice-status span:nth-child(2) { flex: 1; font-weight: 700; color: var(--text); }
.voice-status small { display: none; }
.recording-status { border-color: color-mix(in srgb, #e54838 55%, var(--line)); }
.recording-status > i { width: 11px; height: 11px; flex: 0 0 auto; border-radius: 50%; background: #e54838; animation: recording-dot 1s ease-in-out infinite; }
.recording-status > b { color: #e54838; font-variant-numeric: tabular-nums; }
@keyframes recording-dot { 50% { opacity: .25; } }
.voice-spinner { width: 20px; height: 20px; flex: 0 0 auto !important; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: voice-spin .8s linear infinite; }
@keyframes voice-spin { to { transform: rotate(360deg); } }
.success-status { border-color: color-mix(in srgb, #25a46f 45%, var(--line)); }
.success-status > span:first-child { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: white; background: #25a46f; font-weight: 900; }
.dialog-scrim { position: fixed; z-index: 100; inset: 0; display: grid; place-items: end center; padding: 18px max(16px, calc((100vw - 540px) / 2 + 16px)) max(18px, env(safe-area-inset-bottom)); background: rgba(0, 12, 18, .58); backdrop-filter: blur(7px); }
.voice-dialog { width: min(100%, 508px); padding: 23px; border: 1px solid var(--line); border-radius: 25px; color: var(--text); background: var(--card-solid); box-shadow: 0 25px 70px rgba(0,0,0,.35); animation: dialog-in .2s ease-out; }
.transcript-dialog { width: min(100%, 620px); }
.transcript-dialog textarea { min-height: 190px; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(18px); } }
.dialog-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 50%; color: white; background: var(--accent); font-size: 24px; font-weight: 900; }
.dialog-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.dialog-icon.success { background: #25a46f; }
.dialog-icon.error { background: #d85848; }
.voice-dialog h2 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.voice-dialog > p { margin: 9px 0 17px; color: var(--muted); line-height: 1.45; }
.voice-dialog textarea { width: 100%; min-height: 132px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; color: var(--text); background: var(--card-muted); resize: vertical; font: inherit; line-height: 1.45; outline: none; }
.voice-dialog textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.dialog-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 9px; margin-top: 17px; }
.dialog-actions.single { grid-template-columns: 1fr; }
.text-button { margin-top: 8px; padding: 8px 2px; border: 0; color: var(--accent); background: transparent; font-weight: 750; cursor: pointer; }
.inline-voice-retry {
  display: block;
  width: max-content;
  margin: 6px 0 0 auto;
  padding: 5px 2px;
  color: #ff7a00;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
}
.inline-voice-retry:hover,
.inline-voice-retry:focus-visible { color: #ff9a35; text-decoration: underline; text-underline-offset: 3px; }
.home-assistant-dialog .inline-voice-retry {
  margin: -10px auto 14px 0;
  padding: 2px;
  font-size: 18px;
  line-height: 1.2;
}

/* AR-01.1 — approved PECHKA MUSIC visual architecture */
:root {
  --accent: #ff7100;
  --accent-soft: #fff0df;
  --accent-glow: #ffb23d;
  --bg: #fffaf4;
  --bg-pattern: rgba(255, 113, 0, .09);
  --card: rgba(255, 255, 255, .94);
  --card-solid: #fff;
  --card-muted: #fffaf5;
  --line: #eadfd5;
  --text: #07142f;
  --muted: #3567a4;
  --shadow: 0 12px 34px rgba(105, 54, 12, .1);
  --header: rgba(255, 255, 255, .94);
  --flow-bg: #fffaf4;
}
:root[data-theme="dark"] {
  --accent: #ff8400;
  --accent-soft: rgba(137, 70, 8, .3);
  --accent-glow: #ffc35d;
  --bg: #021720;
  --bg-pattern: rgba(255, 132, 0, .1);
  --card: rgba(6, 28, 38, .93);
  --card-solid: #071f29;
  --card-muted: #061b25;
  --line: #1b3b48;
  --text: #f8fafc;
  --muted: #c4d0d6;
  --shadow: 0 16px 42px rgba(0, 0, 0, .34);
  --header: rgba(3, 22, 31, .95);
  --flow-bg: #021720;
}
body {
  background:
    radial-gradient(ellipse at 50% -8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
    repeating-radial-gradient(ellipse at 50% 118%, transparent 0 55px, color-mix(in srgb, var(--accent) 5%, transparent) 56px 57px, transparent 58px 76px),
    var(--bg);
}
.app-shell { width: min(100%, 500px); background: color-mix(in srgb, var(--bg) 97%, transparent); }
.app-header { height: calc(68px + env(safe-area-inset-top)); grid-template-columns: 44px minmax(0, 1fr) 44px; border-color: color-mix(in srgb, var(--line) 78%, transparent); box-shadow: 0 3px 18px rgba(0,0,0,.04); }
.brand-button { min-width: 0; gap: 9px; }
.brand-button .brand-avatar { width: 42px; height: 42px; border: 1px solid var(--accent); box-shadow: 0 0 13px color-mix(in srgb, var(--accent) 34%, transparent); }
.brand-button strong { overflow: hidden; font-size: clamp(15px, 4.4vw, 18px); letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.brand-button small { font-size: 12px; }
.icon-button:hover, .popover-menu button:hover { background: var(--accent-soft); }

.home-hero {
  min-height: 260px;
  padding: 0;
  background:
    radial-gradient(circle at 50% 43%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 34%),
    repeating-radial-gradient(ellipse at 50% 88%, transparent 0 23px, color-mix(in srgb, var(--accent) 11%, transparent) 24px 25px, transparent 26px 42px);
}
.hero-token { inset: 9px 0 58px; }
.hero-token .brand-avatar { width: 158px; height: 158px; box-shadow: 0 0 42px color-mix(in srgb, var(--accent) 48%, transparent); }
.hero-token .sound-wave { width: min(94%, 470px); height: 84px; opacity: .95; }
.hero-brand { position: absolute; z-index: 4; inset: auto 14px 14px; justify-content: center; text-align: center; }
.hero-brand > .brand-avatar { display: none; }
.hero-brand > div { align-items: center; }
.hero-brand b { font-size: clamp(28px, 8vw, 36px); line-height: 1; letter-spacing: -.035em; }
.hero-brand span { margin-top: 5px; color: var(--muted); font-size: 16px; }
.float-note { text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); }
.note-one { left: 8%; bottom: 74px; }
.note-two { right: 7%; top: 28px; }
.note-three { left: 85%; top: 118px; }
.welcome-card { margin-top: 0; padding: 20px 22px; border-radius: 23px; }
.welcome-card .eyebrow { display: none; }
.welcome-card h1 { font-size: clamp(31px, 8.2vw, 39px); line-height: 1.05; }
.welcome-card h1 span { font-size: .78em; line-height: 1.15; }
.welcome-card > p:last-child { margin-top: 12px; font-size: 16px; }
.primary-actions { gap: 11px; margin-top: 13px; }
.action-card { min-height: 88px; border-radius: 20px; box-shadow: none; transition: border-color .16s, box-shadow .16s, transform .16s, background .16s; }
.action-card:not(:disabled):hover,
.action-card:not(:disabled):focus-visible,
.action-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 26px color-mix(in srgb, var(--accent) 15%, transparent); background: linear-gradient(110deg, var(--card), color-mix(in srgb, var(--accent-soft) 72%, var(--card))); }
.action-card.featured { border-color: var(--line); background: var(--card); }
.action-card.featured:not(:disabled):hover,
.action-card.featured:not(:disabled):focus-visible { border-color: var(--accent); background: linear-gradient(110deg, var(--card), var(--accent-soft)); }
.action-card b { font-size: 18px; }
.benefits { margin: 22px 0 18px; }
.benefits .icon { color: var(--accent); }
.brand-footer { position: relative; margin: 18px -16px -28px; padding: 10px 18px 27px; overflow: hidden; }
.brand-footer::before { content: ''; position: absolute; z-index: -1; inset: 0; background: repeating-radial-gradient(ellipse at 50% 105%, transparent 0 28px, color-mix(in srgb, var(--accent) 10%, transparent) 29px 30px, transparent 31px 45px); }
.brand-footer strong { font-size: 22px; }

/* Disabled rollback archive: visual experiments after stable ar011-r2. */
/* MAX Production maintenance scene r2. Scoped to the maintenance screen only. */
.maintenance-page {
  width: min(100%, 560px);
  height: 100svh;
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(148px, 1fr) auto auto;
  align-content: stretch;
  gap: clamp(8px, 1.45vh, 13px);
  padding: max(8px, env(safe-area-inset-top)) clamp(10px, 3.5vw, 18px) max(8px, env(safe-area-inset-bottom));
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 17%, rgba(255, 122, 0, .28), transparent 30%),
    radial-gradient(circle at 50% 63%, rgba(255, 122, 0, .08), transparent 42%),
    linear-gradient(180deg, #020608 0%, #061116 47%, #020608 100%);
}

.maintenance-page::before,
.maintenance-page::after {
  left: -26%;
  width: 152%;
  height: clamp(105px, 18vh, 165px);
  border-color: rgba(255, 122, 0, .34);
  filter: drop-shadow(0 0 8px rgba(255, 122, 0, .25));
}

.maintenance-page::before { top: clamp(74px, 13vh, 126px); }
.maintenance-page::after { bottom: clamp(48px, 8vh, 78px); }

.maintenance-brand {
  position: relative;
  display: flex;
  min-height: 0;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  isolation: isolate;
}

.maintenance-brand::before,
.maintenance-brand::after {
  content: '';
  position: absolute;
  z-index: -2;
  top: 48%;
  width: 44%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 122, 0, .85));
  box-shadow: 0 -9px 0 rgba(255, 122, 0, .42), 0 9px 0 rgba(255, 122, 0, .42);
}

.maintenance-brand::before { left: 0; }
.maintenance-brand::after { right: 0; transform: scaleX(-1); }

.maintenance-brand .pechka-emblem {
  z-index: 2;
  width: clamp(92px, 15.8vh, 146px);
  height: clamp(92px, 15.8vh, 146px);
  flex: 0 0 auto;
  box-shadow: 0 0 8px #ffd36a, 0 0 28px #ff7100, 0 0 58px rgba(255, 113, 0, .46);
}

.maintenance-brand-copy {
  z-index: 3;
  margin-top: clamp(7px, 1.05vh, 11px);
}

.maintenance-brand-copy > strong {
  font-size: clamp(25px, 4.7vh, 39px);
  line-height: 1;
  letter-spacing: -.045em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .92);
}

.maintenance-brand-copy > p {
  margin-top: clamp(3px, .65vh, 7px);
  font-size: clamp(13px, 2.45vh, 19px);
  color: #c7cdd1;
}

.maintenance-brand .maintenance-wave {
  position: absolute;
  z-index: -1;
  top: 44%;
  left: 50%;
  width: min(88%, 470px);
  height: clamp(38px, 7vh, 65px);
  margin: 0;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  opacity: .9;
}

.maintenance-brand .maintenance-wave i {
  width: clamp(2px, .7vw, 4px);
  height: 32%;
  box-shadow: 0 0 9px #ff7a00;
}

.maintenance-brand .maintenance-wave i:nth-of-type(2),
.maintenance-brand .maintenance-wave i:nth-of-type(8) { height: 48%; }
.maintenance-brand .maintenance-wave i:nth-of-type(3),
.maintenance-brand .maintenance-wave i:nth-of-type(7) { height: 72%; }
.maintenance-brand .maintenance-wave i:nth-of-type(4),
.maintenance-brand .maintenance-wave i:nth-of-type(6) { height: 95%; }
.maintenance-brand .maintenance-wave i:nth-of-type(5) { height: 56%; }

.maintenance-note {
  position: absolute;
  z-index: 2;
  color: #ff8a00;
  font-size: clamp(24px, 4.7vh, 38px);
  line-height: 1;
  text-shadow: 0 0 15px rgba(255, 122, 0, .8);
}
.maintenance-note-left { left: 7%; top: 21%; transform: rotate(-8deg); }
.maintenance-note-right { right: 7%; top: 23%; transform: rotate(7deg); }

.maintenance-card {
  display: flex;
  min-height: 0;
  padding: clamp(12px, 2vh, 18px) clamp(14px, 4vw, 22px);
  flex-direction: column;
  justify-content: center;
  border-radius: clamp(20px, 5vw, 28px);
}

.maintenance-card .branded-alert-icon {
  width: clamp(48px, 7.7vh, 66px);
  height: clamp(48px, 7.7vh, 66px);
  margin-bottom: clamp(7px, 1vh, 11px);
}

.maintenance-card .branded-alert-icon span { font-size: clamp(32px, 5.2vh, 43px); }
.maintenance-card h1 { font-size: clamp(25px, 4.35vh, 36px); line-height: 1.04; }
.maintenance-card > p {
  margin-top: clamp(7px, 1vh, 10px);
  font-size: clamp(14px, 2.45vh, 19px);
  line-height: 1.3;
}

.maintenance-thanks {
  width: 82%;
  margin: clamp(8px, 1.3vh, 12px) auto clamp(7px, 1.1vh, 10px);
  padding-top: clamp(7px, 1vh, 10px);
  font-size: clamp(13px, 2.1vh, 16px);
}

.maintenance-button { min-height: clamp(42px, 6.2vh, 52px); font-size: clamp(16px, 2.6vh, 20px); }

.maintenance-countdown-card {
  min-height: clamp(58px, 9.2vh, 82px);
  padding: clamp(7px, 1.15vh, 11px) 12px;
  border-radius: clamp(17px, 4.5vw, 22px);
}
.maintenance-countdown-card span { font-size: clamp(10px, 1.65vh, 12px); }
.maintenance-countdown-card strong { margin-top: 3px; font-size: clamp(25px, 4.4vh, 37px); }

@media (max-height: 650px) {
  .maintenance-page {
    grid-template-rows: minmax(126px, 1fr) auto auto;
    gap: 6px;
    padding-block: max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-bottom));
  }
  .maintenance-brand .pechka-emblem { width: 88px; height: 88px; }
  .maintenance-brand-copy { margin-top: 4px; }
  .maintenance-brand-copy > strong { font-size: 24px; }
  .maintenance-brand-copy > p { margin-top: 2px; font-size: 13px; }
  .maintenance-note { font-size: 23px; }
  .maintenance-card { padding-block: 9px; }
  .maintenance-card .branded-alert-icon { width: 44px; height: 44px; margin-bottom: 5px; border-width: 2px; }
  .maintenance-card .branded-alert-icon span { font-size: 30px; }
  .maintenance-card h1 { font-size: 24px; }
  .maintenance-card > p { margin-top: 5px; font-size: 13.5px; line-height: 1.23; }
  .maintenance-thanks { margin-block: 6px 5px; padding-top: 5px; font-size: 12.5px; }
  .maintenance-button { min-height: 38px; font-size: 16px; }
  .maintenance-countdown-card { min-height: 54px; padding-block: 6px; }
  .maintenance-countdown-card strong { margin-top: 1px; font-size: 24px; }
}

@media (max-width: 370px) {
  .maintenance-page { padding-inline: 8px; }
  .maintenance-note-left { left: 5%; }
  .maintenance-note-right { right: 5%; }
  .maintenance-card h1 { font-size: 24px; }
}

@media not all {
/* AR-01.1 home fidelity pass — scoped to the approved start-page composition */
.home-hero {
  min-height: 256px;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 39%, color-mix(in srgb, var(--accent) 27%, transparent), transparent 31%),
    radial-gradient(ellipse at 12% 92%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 36%),
    radial-gradient(ellipse at 88% 91%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 36%),
    var(--bg);
}
.home-hero::before,
.home-hero::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.home-hero::before { inset: 0; background: repeating-radial-gradient(ellipse at 50% 76%, transparent 0 31px, color-mix(in srgb, var(--accent) 13%, transparent) 32px 33px, transparent 34px 50px); opacity: .72; }
.home-hero::after { left: -12%; right: -12%; bottom: -49px; height: 116px; border-radius: 50%; background:
  repeating-radial-gradient(ellipse at 50% 100%, transparent 0 17px, color-mix(in srgb, var(--accent) 22%, transparent) 18px 19px, transparent 20px 30px),
  linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 10%, transparent)); transform: rotate(-2deg); opacity: .8; }
[data-theme="dark"] .home-hero { background:
  radial-gradient(circle at 50% 39%, rgba(255, 125, 0, .28), transparent 31%),
  radial-gradient(ellipse at 12% 92%, rgba(255, 117, 0, .22), transparent 37%),
  radial-gradient(ellipse at 88% 91%, rgba(255, 117, 0, .22), transparent 37%),
  #061921; }
.hero-token { inset: 10px 0 59px; }
.hero-token .brand-avatar { width: 151px; height: 151px; box-shadow: 0 0 13px #ff7100, 0 0 38px rgba(255, 113, 0, .45); }
.hero-token .sound-wave { width: min(86%, 465px); height: 76px; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 65%, transparent)); }
.hero-brand { bottom: 14px; }
.hero-brand b { font-size: clamp(28px, 7.5vw, 35px); }
.hero-brand span { margin-top: 4px; font-size: 16px; }
.note-one { left: 8%; bottom: 62px; font-size: 29px; }
.note-two { right: 7%; top: 23px; font-size: 28px; }
.note-three { left: 87%; top: 121px; font-size: 23px; }
.note-four { left: 15%; top: 32px; font-size: 22px; transform: rotate(-9deg); }
.note-five { right: 18%; bottom: 48px; font-size: 17px; }
.welcome-card { margin-top: 12px; padding: 20px 22px 19px; border-radius: 22px; box-shadow: 0 9px 26px rgba(52, 24, 4, .08); }
.welcome-card h1 { font-size: clamp(32px, 7.9vw, 38px); line-height: 1.03; }
.welcome-card h1 span { font-size: .79em; line-height: 1.16; }
.welcome-card > p:last-child { max-width: 430px; margin-top: 11px; font-size: 16px; line-height: 1.43; }
.primary-actions { gap: 12px; margin-top: 12px; }
.primary-actions .action-card { min-height: 87px; padding: 13px 17px; border-radius: 18px; grid-template-columns: 48px minmax(0, 1fr) 24px; }
.primary-actions .action-card b { font-size: 18px; }
.primary-actions .action-card small { font-size: 14px; line-height: 1.28; }
.primary-actions .home-assistant-cta { border-color: var(--line); background: var(--card); box-shadow: none; }
[data-theme="dark"] .primary-actions .home-assistant-cta { border-color: var(--line); background: var(--card); box-shadow: none; }
.home-assistant-cta > .icon:first-child { width: 45px; height: 45px; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 58%, transparent)); }
.home-assistant-cta > .icon:first-child svg { display: block; }
.home-assistant-cta > .icon:first-child::before { content: none; }
.primary-actions .action-card > .icon:last-child { color: #7892b8; }
.primary-actions .home-assistant-cta > .icon:last-child { color: var(--accent); }
.benefits { margin: 20px 0 16px; gap: 0; }
.benefits div { padding: 0 7px; }
.benefits .icon { width: 35px; height: 35px; margin-bottom: 5px; }
.benefits span { color: var(--muted); font-size: clamp(11px, 2.8vw, 13px); }
[data-theme="dark"] .benefits div > span:last-child { color: #f3f6f8; }
.brand-footer { min-height: 130px; margin-top: 11px; padding: 12px 18px 25px; gap: 6px; }
.brand-footer::before { background:
  radial-gradient(ellipse at 10% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 44%),
  radial-gradient(ellipse at 90% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 44%),
  repeating-radial-gradient(ellipse at 50% 112%, transparent 0 27px, color-mix(in srgb, var(--accent) 12%, transparent) 28px 29px, transparent 30px 44px); }
.brand-footer strong { display: flex; align-items: center; gap: 8px; color: var(--accent); font-family: "Segoe Print", "Comic Sans MS", cursive; font-size: clamp(20px, 5.2vw, 25px); font-weight: 500; }
.brand-footer strong > span { color: inherit; font-size: inherit; }
.footer-voice-line { display: flex; align-items: center; justify-content: center; gap: 9px; }
.footer-voice-line > span { color: var(--muted); font-family: "Segoe Print", "Comic Sans MS", cursive; font-size: 12px; line-height: 1.45; transform: rotate(-1deg); }
[data-theme="dark"] .footer-voice-line > span { color: #e7edf0; }
.home-voice-button { width: 44px; height: 49px; min-height: 0; padding: 0; border: 0; border-radius: 0; color: var(--accent); background: transparent; }
.home-voice-button svg { width: 34px; height: 34px; }

/* Start page visual benchmark: approved warm DARK reference. */
[data-theme="dark"] .home-shell {
  --home-bg: #03090c;
  --home-deep: #07131a;
  --home-card: #0c2028;
  --home-text: #ffffff;
  --home-secondary: #c7cdd1;
  --home-muted: #7d858a;
  --home-orange: #ff7a00;
  --home-orange-2: #e97409;
  --home-gold: #f9b821;
  --home-highlight: #fcd974;
  --home-glow: #5f2706;
  color: var(--home-text);
  background: var(--home-bg);
}
[data-theme="dark"] body.home-active {
  background:
    radial-gradient(ellipse at 50% 10%, rgba(95,39,6,.28), transparent 37%),
    repeating-radial-gradient(ellipse at 50% 112%, transparent 0 82px, rgba(249,184,33,.055) 83px 84px, transparent 85px 118px),
    #03090c;
}
[data-theme="dark"] .home-shell main {
  min-height: calc(100svh - 68px - env(safe-area-inset-top));
  background:
    radial-gradient(ellipse at 50% 8%, rgba(95,39,6,.32), transparent 35%),
    linear-gradient(180deg, #03090c 0%, #050d11 68%, #03090c 100%);
}
.home-shell .app-header {
  border-bottom-color: rgba(249,184,33,.12);
}
[data-theme="dark"] .home-shell .app-header {
  color: var(--home-text);
  background: rgba(7,19,26,.97);
  box-shadow: 0 5px 24px rgba(0,0,0,.28);
}
[data-theme="dark"] .home-shell .brand-button .brand-avatar {
  border-color: var(--home-orange);
  box-shadow: 0 0 4px var(--home-highlight), 0 0 13px rgba(255,122,0,.7);
}
[data-theme="dark"] .home-shell .brand-button strong { color: var(--home-text); }
[data-theme="dark"] .home-shell .brand-button small { color: var(--home-secondary); }
[data-theme="dark"] .home-shell .back-button svg { stroke: var(--home-secondary); }
[data-theme="dark"] .home-shell .menu-button svg {
  fill: none;
  stroke: var(--home-orange);
  stroke-width: 2.1;
  filter: drop-shadow(0 0 5px rgba(255,122,0,.28));
}
.home-shell .home-hero { margin-top: 0; }
.home-shell .popover-menu { top: calc(58px + env(safe-area-inset-top)); right: max(16px, calc((100vw - 540px) / 2 + 16px)); left: auto; }
[data-theme="dark"] .home-shell .home-hero {
  min-height: 272px;
  background:
    radial-gradient(circle at 50% 39%, rgba(249,184,33,.17) 0, rgba(95,39,6,.26) 23%, transparent 39%),
    radial-gradient(ellipse at 12% 89%, rgba(233,116,9,.25), transparent 38%),
    radial-gradient(ellipse at 88% 88%, rgba(255,122,0,.23), transparent 38%),
    linear-gradient(180deg, #03090c, #071016 72%, #03090c);
}
[data-theme="dark"] .home-shell .home-hero::before {
  background:
    repeating-radial-gradient(ellipse at 50% 77%, transparent 0 30px, rgba(249,184,33,.13) 31px 32px, transparent 33px 49px),
    linear-gradient(116deg, transparent 0 37%, rgba(255,122,0,.08) 38%, transparent 39% 61%, rgba(255,122,0,.08) 62%, transparent 63%);
  opacity: 1;
}
[data-theme="dark"] .home-shell .home-hero::after {
  left: -18%; right: -18%; bottom: -23px; height: 145px; opacity: 1; transform: rotate(-1deg);
  background:
    radial-gradient(ellipse at 20% 100%, transparent 0 38%, rgba(249,184,33,.3) 38.5%, transparent 39.5% 45%, rgba(233,116,9,.17) 45.5%, transparent 47%),
    radial-gradient(ellipse at 75% 105%, transparent 0 36%, rgba(255,122,0,.27) 36.5%, transparent 38% 44%, rgba(249,184,33,.14) 44.5%, transparent 46%),
    linear-gradient(180deg, transparent, rgba(95,39,6,.2));
  filter: drop-shadow(0 -2px 7px rgba(255,122,0,.16));
}
[data-theme="dark"] .home-shell .hero-token { inset: 10px 0 67px; }
[data-theme="dark"] .home-shell .hero-token .brand-avatar { position: relative; z-index: 2; width: 154px; height: 154px; box-shadow: 0 0 5px var(--home-highlight), 0 0 18px var(--home-orange), 0 0 48px rgba(255,122,0,.44); }
[data-theme="dark"] .home-shell .hero-token .sound-wave { z-index: 1; width: min(92%, 496px); height: 91px; overflow: visible; color: var(--home-orange); background: none; clip-path: none; filter: drop-shadow(0 0 3px rgba(252,217,116,.72)) drop-shadow(0 0 9px rgba(255,122,0,.48)); opacity: 1; }
[data-theme="dark"] .home-shell .hero-brand { bottom: 16px; }
[data-theme="dark"] .home-shell .hero-brand b { color: var(--home-text); font-size: clamp(29px, 7.4vw, 36px); text-shadow: 0 2px 14px rgba(0,0,0,.72); }
[data-theme="dark"] .home-shell .hero-brand span { color: var(--home-secondary); }
[data-theme="dark"] .home-shell .float-note,
[data-theme="dark"] .home-shell .decorative-spark { color: var(--home-orange); opacity: 1; filter: drop-shadow(0 0 6px rgba(249,184,33,.42)); }
.home-shell .float-note,
.home-shell .decorative-spark { position: absolute; z-index: 2; display: block; }
.home-shell .float-note svg,
.home-shell .decorative-spark svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.home-shell .solid-shape { fill: currentColor; stroke: none; }
[data-theme="dark"] .home-shell .note-one { left: 7%; bottom: 73px; }
[data-theme="dark"] .home-shell .note-two { right: 8%; top: 31px; }
[data-theme="dark"] .home-shell .note-three { left: 87%; top: 132px; color: var(--home-gold); }
[data-theme="dark"] .home-shell .note-four { left: 14%; top: 43px; }
[data-theme="dark"] .home-shell .note-five { right: 18%; bottom: 51px; color: var(--home-highlight); }
.home-shell .note-one { width: 28px; height: 37px; transform: rotate(-13deg); }
.home-shell .note-two { width: 25px; height: 33px; transform: rotate(11deg); }
.home-shell .note-three { width: 18px; height: 18px; }
.home-shell .note-four { width: 22px; height: 29px; transform: rotate(-8deg); }
.home-shell .note-five { width: 13px; height: 13px; }
[data-theme="dark"] .home-shell .welcome-card {
  margin-top: 13px;
  padding: 20px 22px;
  border: 1px solid rgba(199,205,209,.14);
  color: var(--home-text);
  background: linear-gradient(145deg, rgba(12,32,40,.96), rgba(7,19,26,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 16px 38px rgba(0,0,0,.28);
}
[data-theme="dark"] .home-shell .welcome-card h1 { color: var(--home-text); }
[data-theme="dark"] .home-shell .welcome-card > p:last-child { color: var(--home-secondary); }
.home-shell .heading-spark { position: relative; top: .08em; width: .72em; height: .72em; display: inline-flex; margin-left: .08em; color: var(--home-gold); filter: drop-shadow(0 0 5px rgba(249,184,33,.5)); }
[data-theme="dark"] .home-shell .primary-actions .action-card,
[data-theme="dark"] .home-shell .primary-actions .home-assistant-cta {
  border: 1px solid rgba(199,205,209,.16);
  color: var(--home-text);
  background: linear-gradient(135deg, rgba(12,32,40,.98), rgba(7,19,26,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018), 0 10px 26px rgba(0,0,0,.19);
}
[data-theme="dark"] .home-shell .primary-actions .action-card small { color: var(--home-secondary); }
[data-theme="dark"] .home-shell .primary-actions .action-card > .icon:first-child,
[data-theme="dark"] .home-shell .primary-actions .action-card > .icon:last-child { color: var(--home-orange); }
[data-theme="dark"] .home-shell .home-assistant-cta > .icon:first-child { filter: none; }
[data-theme="dark"] .home-shell .home-assistant-cta > .icon:first-child { filter: drop-shadow(0 0 7px rgba(255,122,0,.28)); }
.home-shell .home-assistant-cta > .icon:first-child svg { display: block; }
.home-shell .home-assistant-cta > .icon:first-child::before { content: none; }
[data-theme="dark"] .home-shell .primary-actions .action-card:not(:disabled):hover,
[data-theme="dark"] .home-shell .primary-actions .action-card:not(:disabled):focus-visible,
[data-theme="dark"] .home-shell .primary-actions .action-card:not(:disabled):active {
  border-color: var(--home-orange);
  background: linear-gradient(110deg, rgba(95,39,6,.84), rgba(12,32,40,.98));
  box-shadow: 0 0 0 1px rgba(249,184,33,.55), inset 0 0 30px rgba(255,122,0,.08), 0 0 24px rgba(255,122,0,.16);
}
[data-theme="dark"] .home-shell .benefits { margin-top: 23px; }
[data-theme="dark"] .home-shell .benefits div { border-color: rgba(199,205,209,.14); }
[data-theme="dark"] .home-shell .benefits .icon { color: var(--home-orange); filter: drop-shadow(0 0 5px rgba(255,122,0,.22)); }
[data-theme="dark"] .home-shell .benefits div > span:last-child { color: var(--home-secondary); }
[data-theme="dark"] .home-shell .brand-footer {
  min-height: 155px;
  margin-top: 10px;
  color: var(--home-orange);
  background:
    radial-gradient(ellipse at 9% 110%, rgba(95,39,6,.45), transparent 48%),
    radial-gradient(ellipse at 91% 108%, rgba(95,39,6,.42), transparent 49%);
}
[data-theme="dark"] .home-shell .brand-footer::before {
  background:
    radial-gradient(ellipse at 16% 116%, transparent 0 39%, rgba(249,184,33,.24) 39.5%, transparent 41% 47%, rgba(233,116,9,.15) 47.5%, transparent 49%),
    radial-gradient(ellipse at 84% 112%, transparent 0 37%, rgba(255,122,0,.23) 37.5%, transparent 39% 46%, rgba(249,184,33,.13) 46.5%, transparent 48%);
}
[data-theme="dark"] .home-shell .brand-footer strong { position: relative; color: var(--home-orange); text-shadow: 0 0 11px rgba(255,122,0,.23); }
[data-theme="dark"] .home-shell .brand-footer strong > .icon { width: 34px; height: 34px; color: var(--home-orange); filter: drop-shadow(0 0 6px rgba(255,122,0,.25)); }
[data-theme="dark"] .home-shell .brand-footer strong > .icon svg { fill: none; stroke: currentColor; }
[data-theme="dark"] .home-shell .brand-footer strong > span:last-child { color: var(--home-orange); font-size: inherit; }
[data-theme="dark"] .home-shell .brand-footer strong::after { content: ''; position: absolute; left: 35px; right: -4px; bottom: -5px; height: 9px; border-bottom: 2px solid var(--home-orange); border-radius: 50%; transform: rotate(-2deg); }
[data-theme="dark"] .home-shell .footer-voice-line { position: relative; margin-top: 8px; }
[data-theme="dark"] .home-shell .footer-voice-line::after { content: ''; position: absolute; right: 31px; bottom: -4px; width: 32px; height: 20px; border-right: 2px solid var(--home-orange); border-bottom: 2px solid var(--home-orange); border-radius: 0 0 24px 0; transform: rotate(-11deg); opacity: .9; }
[data-theme="dark"] .home-shell .footer-voice-line > span { color: var(--home-secondary); }
[data-theme="dark"] .home-shell .home-voice-button { position: relative; z-index: 1; color: var(--home-orange); filter: drop-shadow(0 0 6px rgba(255,122,0,.25)); }

@media (max-width: 390px) {
  [data-theme="dark"] .home-shell .home-hero { min-height: 260px; }
  [data-theme="dark"] .home-shell .hero-token { inset: 8px 0 64px; }
  [data-theme="dark"] .home-shell .hero-token .brand-avatar { width: 142px; height: 142px; }
  .home-shell .welcome-card { padding-inline: 18px; }
  .home-shell .primary-actions .action-card { padding-inline: 13px; }
  .home-shell .benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; }
  .home-shell .benefits div:nth-child(2) { border-right: 1px solid var(--line); }
  .home-shell .benefits div { padding-inline: 3px; }
  .home-shell .benefits span { font-size: 11px; }
  .home-shell .brand-footer strong { font-size: 19px; }
}
@media (min-width: 700px) {
  .home-shell { min-height: calc(100svh - 48px); }
  .home-shell .popover-menu { top: calc(82px + env(safe-area-inset-top)); }
  [data-theme="dark"] .home-shell .home-hero { min-height: 280px; }
}

/* The approved start screen is used directly as the visual source of truth. */
.reference-home {
  position: relative;
  width: calc(100% + 32px);
  aspect-ratio: 516 / 880;
  margin: 0 -16px calc(-28px - env(safe-area-inset-bottom));
  overflow: hidden;
  background: #03090c;
}
.reference-home > img {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 271.318%;
  max-width: none;
  height: auto;
  display: block;
  transform: translate(-53.857%, -13.677%);
  transform-origin: 0 0;
  user-select: none;
  pointer-events: none;
}
.reference-hotspot {
  position: absolute;
  z-index: 2;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  color: transparent;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.reference-hotspot:focus-visible {
  outline: 3px solid #ff7a00;
  outline-offset: -3px;
}
.reference-burger {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  border: 1px solid transparent;
  color: #ff7a00;
  background: rgba(3,9,12,.28);
  backdrop-filter: blur(5px);
}
.reference-burger svg { fill: none; stroke: currentColor; stroke-width: 2.1; }
.reference-assistant {
  left: 3.7%;
  top: 48.6%;
  width: 91.8%;
  height: 12.1%;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  padding: 10px 17px;
  border: 1px solid #1b3b48;
  color: #fff;
  background: linear-gradient(135deg, #0c2028, #07131a);
  box-shadow: 0 0 0 5px #03090c, inset 0 1px 0 rgba(255,255,255,.025);
  text-align: left;
  backdrop-filter: none;
}
.reference-assistant > .icon:first-child { width: 43px; height: 43px; color: #ff7a00; filter: drop-shadow(0 0 5px rgba(255,122,0,.2)); }
.reference-assistant > .icon:first-child svg { fill: currentColor; stroke: none; }
.reference-assistant > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.reference-assistant b { color: #fff; font-size: clamp(15px, 4.4vw, 20px); line-height: 1.05; }
.reference-assistant small { color: #c7cdd1; font-size: clamp(11px, 3.1vw, 15px); line-height: 1.25; }
.reference-assistant > .icon:last-child { width: 24px; height: 24px; color: #7892b8; }
.reference-manual { left: 3.7%; top: 62%; width: 91.8%; height: 10%; }
.reference-microphone {
  left: 81.5%;
  top: 87.5%;
  width: 15%;
  height: 9%;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transition: background .16s ease, backdrop-filter .16s ease, filter .16s ease;
}
.reference-microphone:focus-visible { outline: 0; }

@media (hover: hover) and (pointer: fine) {
  .reference-assistant:hover {
    background: linear-gradient(135deg, #0c2028, #07131a);
    box-shadow: 0 0 0 5px #03090c, inset 0 0 0 2px #ff7a00, 0 0 20px rgba(255,122,0,.3);
    backdrop-filter: none;
  }
  .reference-manual:hover {
    box-shadow: inset 0 0 0 2px #ff7a00, 0 0 20px rgba(255,122,0,.26);
    background: rgba(95,39,6,.12);
  }
  .reference-microphone:hover {
    border: 0;
    box-shadow: none;
    background: radial-gradient(circle, rgba(252,217,116,.16) 0, rgba(255,122,0,.06) 42%, transparent 72%);
    backdrop-filter: brightness(1.2) saturate(1.22);
    filter: drop-shadow(0 0 7px rgba(255,122,0,.38));
  }
  .reference-burger:hover {
    border-color: rgba(255,122,0,.72);
    color: #fcd974;
    background: rgba(95,39,6,.58);
    box-shadow: 0 0 17px rgba(255,122,0,.35);
  }
}

/* r40: compact generation progress and PECHKA MUSIC variant palette */
.generation-visual-screen .music-generation-hero,
.generation-visual-screen .music-generation-hero.choice-ready {
  min-height: 224px;
  margin: 0 -16px;
  padding: 10px 18px 13px;
  justify-content: flex-start;
  background: radial-gradient(circle at 50% 31%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 35%);
}
.generation-visual-screen .music-orbit,
.generation-visual-screen .music-generation-hero.choice-ready .music-orbit {
  width: 140px;
  height: 140px;
  margin: -2px auto 7px;
  transform: none;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}
.generation-visual-screen .music-orbit .brand-avatar,
.generation-visual-screen .music-generation-hero.choice-ready .music-orbit .brand-avatar {
  width: 102px;
  height: 102px;
  z-index: 3;
  border: 1px solid rgba(255, 145, 39, .76);
  box-shadow: 0 0 12px rgba(255, 145, 39, .76), 0 0 30px rgba(255, 122, 0, .38);
}
.generation-visual-screen .music-orbit::before,
.generation-visual-screen .music-orbit::after {
  inset: 18px;
  z-index: 1;
  border: 1px solid rgba(255, 142, 47, .58);
  box-shadow: 0 0 13px rgba(255, 122, 0, .18);
  animation: pechka-generation-wave 2.45s ease-out infinite;
}
.generation-visual-screen .music-orbit::after {
  inset: 8px;
  animation-delay: 1.2s;
}
@keyframes pechka-generation-wave {
  0% { transform: scale(.76); opacity: 0; }
  22% { opacity: .72; }
  100% { transform: scale(1.16); opacity: 0; }
}
.generation-visual-screen .music-generation-hero h1 {
  margin-bottom: 5px;
  font-size: clamp(27px, 7.2vw, 33px);
}
.generation-visual-screen .music-generation-hero p {
  max-width: 360px;
  font-size: 13px;
  line-height: 1.34;
}
.generation-visual-screen .generation-steps {
  margin-top: 0;
  padding: 13px 15px 9px;
  border-radius: 21px;
}
.generation-visual-screen .generation-steps li {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 11px;
  min-height: 54px;
}
.generation-visual-screen .generation-steps li:not(:last-child)::after {
  left: 17px;
  top: 37px;
  bottom: 2px;
  border-left: 1px dashed rgba(255, 138, 32, .43);
}
.generation-visual-screen .generation-steps li > span {
  width: 36px;
  height: 36px;
  border-width: 1.5px;
  color: var(--accent-glow);
  background: rgba(4, 13, 17, .56);
}
.generation-visual-screen .generation-steps li.done > span {
  border-color: rgba(255, 145, 39, .92);
  color: #ffb04a;
  background: rgba(104, 47, 9, .24);
  box-shadow: inset 0 0 12px rgba(255, 122, 0, .08), 0 0 12px rgba(255, 122, 0, .3);
  font-size: 20px;
  font-weight: 800;
}
.generation-visual-screen .generation-steps li.active > span {
  border-color: rgba(255, 145, 39, .94);
  background: rgba(104, 47, 9, .16);
  box-shadow: 0 0 0 5px rgba(255, 122, 0, .07), 0 0 16px rgba(255, 122, 0, .3);
}
.generation-steps li.active > span .generation-step-pulse {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(255, 145, 39, .88);
  animation: generation-indicator-pulse 1.25s ease-in-out infinite;
}
@keyframes generation-indicator-pulse {
  50% { transform: scale(.58); opacity: .46; }
}
.generation-visual-screen .generation-steps li div {
  min-width: 0;
  padding-top: 0;
  align-self: start;
}
.generation-visual-screen .generation-steps b {
  margin: 0;
  font-size: 16px;
  line-height: 1.18;
}
.generation-step-done,
.generation-step-stopped {
  margin-top: 2px;
  font-size: 15px;
}
.generation-step-done { color: #d8dde0 !important; }
.generation-step-dots {
  height: 13px;
  display: flex !important;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}
.generation-step-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 7px rgba(255, 145, 39, .7);
  animation: generation-dot 1.35s ease-in-out infinite;
}
.generation-step-dots i:nth-child(2) { animation-delay: .18s; }
.generation-step-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes generation-dot {
  0%, 65%, 100% { opacity: .18; transform: translateY(0) scale(.78); }
  25% { opacity: 1; transform: translateY(-1px) scale(1); }
}
.generation-choice-note {
  margin: 10px 8px 0;
  font-size: 13px;
}
.generation-variants { gap: 9px; margin-top: 10px; }
.generation-variant {
  gap: 7px 11px;
  padding: 10px 12px;
  border-color: rgba(255, 122, 0, .5);
  background:
    radial-gradient(circle at 16% 22%, rgba(255, 122, 0, .075), transparent 34%),
    linear-gradient(145deg, rgba(7, 22, 28, .98), rgba(3, 12, 16, .99));
  box-shadow: inset 0 1px 0 rgba(255, 213, 168, .035), 0 0 16px rgba(255, 122, 0, .1);
}
.generation-variant-heading b { color: #fff; }
.generation-variant-heading small,
.variant-timeline div { color: #aeb8bd; }
.variant-player-controls { grid-template-columns: 44px minmax(0, 1fr); gap: 9px; }
.variant-play {
  width: 44px;
  height: 44px;
  padding: 0 0 0 3px;
  border-color: #ff8b22;
  color: #fff;
  background: linear-gradient(145deg, #c75608, #ff8514);
  box-shadow: 0 0 14px rgba(255, 122, 0, .3);
  font-size: 20px;
  cursor: pointer;
}
.variant-timeline input { accent-color: #ff7a00; }
.variant-select {
  border-color: #ff7a00;
  color: #ff8b22;
  background: rgba(95, 39, 6, .18);
}
.variant-select:hover,
.variant-select:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, #bc4d03, #e97715);
  box-shadow: 0 0 14px rgba(255, 122, 0, .24);
  outline: none;
}
html[data-theme="light"] .generation-visual-screen .generation-steps li > span { background: rgba(255, 253, 250, .9); }
html[data-theme="light"] .generation-visual-screen .generation-steps li.done > span {
  color: #c94f00;
  background: #fff5eb;
}
html[data-theme="light"] .generation-step-done { color: #63717a !important; }
html[data-theme="light"] .generation-variant {
  border-color: rgba(201, 79, 0, .46);
  background: linear-gradient(145deg, #fffdfa, #fff3e8);
  box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(110, 65, 22, .09);
}
html[data-theme="light"] .generation-variant-heading b { color: var(--text); }
html[data-theme="light"] .generation-variant-heading small,
html[data-theme="light"] .variant-timeline div { color: var(--muted); }
html[data-theme="light"] .variant-select { background: #fff7ef; }

@media (max-width: 380px) {
  .generation-visual-screen .music-generation-hero,
  .generation-visual-screen .music-generation-hero.choice-ready { min-height: 212px; padding-inline: 12px; }
  .generation-visual-screen .music-orbit,
  .generation-visual-screen .music-generation-hero.choice-ready .music-orbit { width: 130px; height: 130px; }
  .generation-visual-screen .music-generation-hero h1 { font-size: 27px; }
  .generation-visual-screen .generation-steps { padding-inline: 12px; }
  .generation-variant { padding: 9px; }
  .variant-select { min-width: 68px; }
}

[data-theme="dark"] .home-shell:has(.reference-home) main {
  min-height: 0;
  background: #03090c;
}
}

.flow-screen,
.plans-screen { position: relative; min-height: calc(100svh - 68px); margin: 0 -16px; padding: 18px 16px 104px; overflow: hidden; background: var(--flow-bg); }
.flow-screen::before,
.plans-screen::before { content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: repeating-radial-gradient(ellipse at 50% 110%, transparent 0 62px, color-mix(in srgb, var(--accent) 7%, transparent) 63px 64px, transparent 65px 86px); opacity: .9; }
.flow-screen > *, .plans-screen > * { position: relative; z-index: 1; }
.flow-intro, .page-intro { border-radius: 22px; }
.choice { min-height: 70px; border-radius: 18px; transition: border-color .16s, box-shadow .16s, background .16s; }
.choice:hover, .choice:focus-visible, .choice.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 22px color-mix(in srgb, var(--accent) 12%, transparent); background: color-mix(in srgb, var(--accent-soft) 72%, var(--card)); }
.primary-button { background: linear-gradient(135deg, #ff9b19, #ff6500); box-shadow: 0 7px 20px rgba(255, 111, 0, .22); }
.primary-button:not(:disabled):hover { filter: brightness(1.04); transform: translateY(-1px); }
.secondary-button:hover, .secondary-button:focus-visible { border-color: var(--accent); }

.plans-screen { padding-top: 0; }
.plans-intro { position: relative; min-height: 188px; margin: 0 -16px 15px; padding: 31px 155px 22px 22px; overflow: hidden; display: flex; align-items: center; background:
  radial-gradient(circle at 82% 48%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 28%),
  repeating-radial-gradient(ellipse at 50% 98%, transparent 0 28px, color-mix(in srgb, var(--accent) 9%, transparent) 29px 30px, transparent 31px 46px); }
.plans-intro h1 { margin: 0; font-size: clamp(27px, 7.5vw, 36px); line-height: 1.02; letter-spacing: -.035em; }
.plans-intro p { margin: 10px 0 8px; color: var(--muted); line-height: 1.42; }
.plans-intro small { color: var(--accent); font-weight: 750; }
.plans-token { position: absolute; right: 16px; top: 27px; width: 126px; height: 126px; display: grid; place-items: center; }
.plans-token .brand-avatar { width: 116px; height: 116px; box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 45%, transparent); }
.mini-wave { position: absolute; z-index: -1; width: 172px; height: 60px; background: repeating-linear-gradient(90deg, transparent 0 6px, var(--accent) 7px 9px, transparent 10px 14px); clip-path: polygon(0 45%,10% 30%,20% 46%,30% 14%,40% 42%,50% 5%,60% 42%,70% 14%,80% 46%,90% 30%,100% 45%,100% 55%,90% 70%,80% 54%,70% 86%,60% 58%,50% 95%,40% 58%,30% 86%,20% 54%,10% 70%,0 55%); opacity: .65; }
.package-options { gap: 10px; }
.package-option { position: relative; min-height: 82px; padding: 13px 14px; border-radius: 19px; background: var(--card); transition: border-color .16s, box-shadow .16s, background .16s; }
.package-option:not(:disabled):hover,
.package-option:not(:disabled):focus-visible,
.package-option.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 24px color-mix(in srgb, var(--accent) 15%, transparent); background: linear-gradient(105deg, var(--card), color-mix(in srgb, var(--accent-soft) 72%, var(--card))); }
.package-option .package-symbol { width: 42px; height: 42px; min-width: 42px; display: grid; place-items: center; flex: 0 0 42px; color: var(--accent); }
.package-symbol .icon { width: 38px; height: 38px; }
.package-option .package-copy { min-width: 78px; display: block !important; flex: 1 1 auto; }
.package-copy b { font-size: 19px; white-space: nowrap; }
.package-copy .package-benefit {
  display: grid; gap: 1px; margin-top: 4px; color: var(--muted);
  font-family: "Segoe Print", "Comic Sans MS", cursive; font-size: 10px; font-style: italic; line-height: 1.15;
}
.package-benefit-line { display: block; white-space: nowrap; }
.package-benefit-line strong {
  display: inline; color: var(--accent); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px; font-style: normal; font-weight: 850;
}
.package-option .package-badge { min-width: auto; padding: 6px 9px; flex: 0 0 auto; border-radius: 15px; color: #261200; background: linear-gradient(135deg, #ffb22d, #ff7600); font-size: 11px; font-weight: 850; }
.package-option em { color: var(--text); font-size: 20px; }
.package-option > .icon:last-child { width: 22px; color: var(--accent); }
.plans-tip { display: flex; align-items: center; gap: 10px; margin: 14px 0; padding: 11px 14px; border: 1px solid var(--line); border-radius: 19px; background: var(--card); }
.plans-tip p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.billing-history { margin: 14px 0; padding: 13px 15px; border: 1px solid var(--line); border-radius: 17px; background: var(--card); }
.billing-history summary { color: var(--muted); font-weight: 750; cursor: pointer; }
.billing-history > div { margin-top: 10px; }
.plans-actions { position: sticky; z-index: 5 !important; bottom: 0; display: grid; grid-template-columns: .9fr 1.2fr; gap: 10px; padding: 14px 0 max(12px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--flow-bg) 25%); }
.plans-actions button { min-height: 58px; font-size: 17px; }

.generation-visual-screen { padding-top: 0; }
.generation-visual-screen::after { content: '♪  ✦  ♡  ♫'; position: absolute; z-index: 0; inset: 30px 0 auto; color: var(--accent); font-size: 25px; letter-spacing: 45px; text-align: center; opacity: .7; }
.generation-visual-screen .music-generation-hero { min-height: 330px; margin: 0 -16px; padding: 36px 18px 20px; display: flex; flex-direction: column; justify-content: end; background: radial-gradient(circle at 50% 39%, color-mix(in srgb, var(--accent) 23%, transparent), transparent 31%); }
.generation-visual-screen .music-orbit { width: 214px; height: 214px; margin-bottom: 20px; }
.generation-visual-screen .music-orbit .brand-avatar { width: 138px; height: 138px; }
.generation-visual-screen .music-generation-hero h1 { font-size: clamp(31px, 8.2vw, 39px); }
.generation-visual-screen .generation-steps { margin-top: -2px; padding: 20px; border-radius: 24px; }
.generation-visual-screen .generation-wait { margin: 7px -16px -104px; padding: 25px 16px 118px; background: repeating-radial-gradient(ellipse at 50% 110%, transparent 0 29px, color-mix(in srgb, var(--accent) 10%, transparent) 30px 31px, transparent 32px 47px); }

.result-visual-screen { padding-top: 16px; }
.result-ready-note { border-radius: 21px; }
.result-ready-note h1 { font-size: 20px; }
.locked-song-card { border-radius: 23px; }
.unlocked-actions .secondary-button { border-radius: 18px; }
.result-support { display: block; margin: 12px auto 0; }
.songs-signature { margin: 20px -16px -104px; padding: 16px 16px 120px; background: repeating-radial-gradient(ellipse at 50% 110%, transparent 0 29px, color-mix(in srgb, var(--accent) 10%, transparent) 30px 31px, transparent 32px 47px); font-family: Georgia, serif; font-size: 22px; font-style: italic; }
.locked-explanation { border-radius: 19px; }
.unlock-button { border-radius: 18px; }
.packages-button { border-color: color-mix(in srgb, var(--accent) 64%, var(--line)); }

@media (max-width: 390px) {
  .plans-intro { min-height: 175px; padding-right: 132px; }
  .plans-token { right: 6px; width: 116px; }
  .plans-token .brand-avatar { width: 104px; height: 104px; }
  .package-option { gap: 8px; padding-inline: 10px; }
  .package-badge { display: none; }
}
@media (max-width: 370px) {
  main { padding-inline: 11px; }
  .hero, .page-hero { margin-inline: -11px; }
  .choice-grid { grid-template-columns: 1fr; }
  .benefits { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .benefits div:nth-child(2) { border-right: 0; }
  .popover-menu { left: 16px; }
}
@media (min-width: 700px) {
  body { padding: 24px 0; }
  .app-shell { min-height: calc(100svh - 48px); border-radius: 28px; overflow: clip; }
  .app-header { top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Disabled rollback archive: unified/reference experiments after stable ar011-r2. */
@media not all {
/* Unified PECHKA MUSIC visual system — derived from the approved start screen. */
:root {
  --accent: #ff7a00;
  --accent-soft: rgba(255, 122, 0, .12);
  --accent-glow: #f9b821;
  --bg: #fff8ef;
  --bg-pattern: rgba(233, 116, 9, .09);
  --card: rgba(255, 255, 255, .95);
  --card-solid: #fffaf5;
  --card-muted: #fff1e2;
  --line: #efd2b4;
  --text: #261408;
  --muted: #735b4c;
  --shadow: 0 14px 38px rgba(95, 39, 6, .13);
  --header: rgba(255, 250, 245, .95);
  --flow-bg: #fff8ef;
}

:root[data-theme="dark"] {
  --accent: #ff7a00;
  --accent-soft: rgba(95, 39, 6, .55);
  --accent-glow: #f9b821;
  --bg: #03090c;
  --bg-pattern: rgba(249, 184, 33, .065);
  --card: rgba(12, 32, 40, .94);
  --card-solid: #07131a;
  --card-muted: #091a21;
  --line: rgba(199, 205, 209, .17);
  --text: #ffffff;
  --muted: #c7cdd1;
  --shadow: 0 18px 46px rgba(0, 0, 0, .38), 0 0 24px rgba(95, 39, 6, .08);
  --header: rgba(3, 9, 12, .96);
  --flow-bg: #03090c;
}

body {
  background:
    radial-gradient(ellipse at 50% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 39%),
    radial-gradient(circle at 10% 24%, var(--bg-pattern) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 42%, var(--bg-pattern) 0 2px, transparent 3px),
    repeating-radial-gradient(ellipse at 50% 115%, transparent 0 70px, color-mix(in srgb, var(--accent-glow) 7%, transparent) 71px 72px, transparent 73px 99px),
    var(--bg);
  background-size: auto, 53px 53px, 71px 71px, auto, auto;
}

.app-shell:not(.home-shell) {
  border-inline: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, var(--accent) 4%), var(--bg) 42%),
    var(--bg);
}

.app-header {
  border-bottom-color: color-mix(in srgb, var(--accent) 20%, var(--line));
  background: var(--header);
  box-shadow: 0 7px 25px rgba(0, 0, 0, .16);
}
.brand-button .brand-avatar {
  border: 1px solid var(--accent);
  box-shadow: 0 0 5px color-mix(in srgb, #fcd974 55%, transparent), 0 0 15px color-mix(in srgb, var(--accent) 54%, transparent);
}
.brand-button strong { color: var(--text); }
.brand-button small { color: var(--muted); }
.back-button svg { stroke: var(--muted); }
.menu-button svg { fill: none; stroke: var(--accent); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 35%, transparent)); }

.popover-menu {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  background: color-mix(in srgb, var(--card-solid) 96%, transparent);
  box-shadow: 0 24px 66px rgba(0, 0, 0, .48), 0 0 28px color-mix(in srgb, var(--accent) 10%, transparent);
}
.popover-menu button:hover { color: var(--text); background: color-mix(in srgb, var(--accent-soft) 72%, var(--card)); }

.flow-screen,
.plans-screen {
  background:
    radial-gradient(ellipse at 50% -4%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 30%),
    radial-gradient(ellipse at 0 68%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 33%),
    radial-gradient(ellipse at 100% 80%, color-mix(in srgb, var(--accent-glow) 6%, transparent), transparent 35%),
    var(--flow-bg);
}
.flow-screen::before,
.plans-screen::before {
  background:
    repeating-radial-gradient(ellipse at 50% 112%, transparent 0 47px, color-mix(in srgb, var(--accent-glow) 10%, transparent) 48px 49px, transparent 50px 69px),
    linear-gradient(118deg, transparent 0 42%, color-mix(in srgb, var(--accent) 4%, transparent) 43%, transparent 44% 66%, color-mix(in srgb, var(--accent) 4%, transparent) 67%, transparent 68%);
}
.flow-screen::after,
.plans-screen::after {
  content: '♪   ✦   ♫';
  position: absolute;
  z-index: 0;
  right: -8px;
  bottom: 74px;
  color: var(--accent);
  font-size: 19px;
  letter-spacing: 14px;
  opacity: .22;
  transform: rotate(-8deg);
  pointer-events: none;
}

.page-hero,
.plans-intro {
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  background:
    radial-gradient(circle at 82% 43%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 27%),
    repeating-radial-gradient(ellipse at 50% 105%, transparent 0 27px, color-mix(in srgb, var(--accent-glow) 13%, transparent) 28px 29px, transparent 30px 45px),
    linear-gradient(180deg, color-mix(in srgb, var(--card-solid) 82%, var(--bg)), var(--bg));
}
.page-hero::before,
.plans-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 46%, color-mix(in srgb, var(--accent) 7%, transparent) 47%, transparent 48% 68%, color-mix(in srgb, var(--accent-glow) 6%, transparent) 69%, transparent 70%);
}
.page-token,
.plans-token { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 34%, transparent)); }
.page-token .brand-avatar,
.plans-token .brand-avatar { border: 1px solid var(--accent); box-shadow: 0 0 6px #fcd974, 0 0 27px color-mix(in srgb, var(--accent) 58%, transparent); }

.access-card,
.page-intro,
.flow-message,
.assistant-note > div:last-child,
.welcome-card,
.details-card,
.ready-hero,
.lyrics-card,
.final-song-card,
.boundary-card,
.generation-steps,
.result-ready-note,
.locked-song-card,
.locked-explanation,
.my-songs-note,
.song-list-card,
.balance-card,
.billing-section,
.billing-history,
.plans-tip,
.settings-card,
.support-form,
.support-context,
.support-feedback,
.legal-consent,
.empty-state,
.voice-status,
.preview-state,
.tip-card,
.stage-boundary {
  border-color: var(--line);
  background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--card-solid) 88%, var(--accent) 12%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), var(--shadow);
}

.choice,
.action-card,
.steps li,
.support-list button,
.document-list button,
.document-list a,
.theme-picker button,
.song-summary button,
.package-option,
.secondary-button,
.inline-voice-recorder button {
  border-color: var(--line);
  color: var(--text);
  background: linear-gradient(135deg, var(--card), var(--card-solid));
}
.choice:hover,
.choice:focus-visible,
.choice.selected,
.action-card:not(:disabled):hover,
.steps li.available:hover,
.support-list button:hover,
.document-list button:hover,
.document-list a:hover,
.theme-picker button.selected,
.song-summary button:hover,
.package-option:not(:disabled):hover,
.package-option:not(:disabled):focus-visible,
.package-option.selected,
.secondary-button:hover,
.secondary-button:focus-visible {
  border-color: var(--accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--card) 90%, var(--accent) 10%), color-mix(in srgb, var(--card-solid) 78%, var(--accent) 22%));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 78%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 19%, transparent);
}

.primary-button,
.preview-play,
.song-list-play {
  color: #fff;
  background: linear-gradient(135deg, #f9b821 0%, #ff7a00 48%, #e97409 100%);
  box-shadow: 0 8px 24px rgba(255, 122, 0, .3), inset 0 1px 0 rgba(252, 217, 116, .5);
}
.primary-button:not(:disabled):hover,
.preview-play:hover,
.song-list-play:not(:disabled):hover { filter: brightness(1.08); box-shadow: 0 9px 28px rgba(255, 122, 0, .42), 0 0 15px rgba(249, 184, 33, .2); }

.flow-input-row input,
.details-card textarea,
.lyrics-command textarea,
.lyrics-editor,
.support-form select,
.support-form textarea,
.support-form input,
.voice-dialog textarea,
.access-input {
  border-color: var(--line);
  color: var(--text);
  background: var(--card-solid);
  box-shadow: inset 0 1px 8px rgba(0, 0, 0, .12);
}
.flow-input-row input:focus,
.details-card textarea:focus,
.lyrics-command textarea:focus,
.lyrics-editor:focus,
.support-form select:focus,
.support-form textarea:focus,
.support-form input:focus,
.voice-dialog textarea:focus,
.access-input:focus {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 17%, transparent), inset 0 1px 8px rgba(0,0,0,.1);
}

.flow-message,
.assistant-note > div:last-child { border-radius: 20px 20px 20px 7px; }
.flow-avatar .brand-avatar,
.assistant-avatar .brand-avatar { border: 1px solid var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 44%, transparent); }
.flow-progress,
.eyebrow,
.final-slogan b,
.songs-signature,
.package-option em { color: var(--accent); }
.flow-message p,
.assistant-note p,
.details-card p,
.music-generation-hero p,
.generation-steps small,
.song-heading p,
.locked-explanation p,
.my-songs-note,
.support-form small,
.document-list small { color: var(--muted); }

.music-generation-hero {
  background:
    radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 34%),
    repeating-radial-gradient(ellipse at 50% 102%, transparent 0 28px, color-mix(in srgb, var(--accent-glow) 11%, transparent) 29px 30px, transparent 31px 47px);
}
.music-orbit { box-shadow: 0 0 8px #fcd974, 0 0 34px rgba(255,122,0,.54), 0 0 70px rgba(95,39,6,.42); }
.music-orbit .brand-avatar { border: 1px solid var(--accent); }
.generation-steps li.active > span { border-color: var(--accent-glow); box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 13%, transparent), 0 0 19px color-mix(in srgb, var(--accent) 35%, transparent); }

.locked-song-card,
.song-list-card { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.preview-timeline input { accent-color: var(--accent); }
.locked-explanation > span,
.balance-card > span { color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 82%, var(--card)); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 15%, transparent); }
.song-open:hover { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }

.settings-card h2,
.billing-section h2,
.lyrics-card h2,
.final-song-card h2 { color: var(--text); }
.switch { background: color-mix(in srgb, var(--muted) 54%, var(--card-solid)); cursor: pointer; }
.switch.on { background: linear-gradient(135deg, var(--accent-glow), var(--accent)); box-shadow: 0 0 13px color-mix(in srgb, var(--accent) 32%, transparent); }
.setting-row { border-top-color: var(--line); }

.dialog-scrim { background: rgba(3, 9, 12, .72); }
.voice-dialog {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  background: linear-gradient(150deg, var(--card-solid), color-mix(in srgb, var(--card-solid) 90%, var(--accent) 10%));
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 34px color-mix(in srgb, var(--accent) 12%, transparent);
}
.dialog-icon { background: linear-gradient(135deg, var(--accent-glow), var(--accent)); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 32%, transparent); }

.access-shell { background: radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 40%); }
.access-card { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.brand-lockup { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 25%, transparent)); }

* { scrollbar-color: color-mix(in srgb, var(--accent) 74%, var(--card)) var(--bg); }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--bg); }
*::-webkit-scrollbar-thumb { border: 2px solid var(--bg); border-radius: 10px; background: color-mix(in srgb, var(--accent) 74%, var(--card)); }

@media (max-width: 390px) {
  .page-hero { min-height: 175px; }
  .page-token { opacity: .9; transform: scale(.92); transform-origin: right bottom; }
}
}

/* PECHKA MUSIC branded service states. */
.maintenance-page {
  position: relative;
  width: min(100%, 480px);
  height: 100svh;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 14px max(10px, env(safe-area-inset-bottom));
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 13%, rgba(255, 122, 0, .2), transparent 29%),
    radial-gradient(circle at 50% 58%, rgba(255, 122, 0, .08), transparent 36%),
    linear-gradient(180deg, #02070a, #040b0e 58%, #010405);
}
.maintenance-page::before,
.maintenance-page::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -35%;
  width: 170%;
  height: 180px;
  border: 1px solid rgba(255, 122, 0, .52);
  border-radius: 50%;
  filter: drop-shadow(0 0 8px rgba(255, 122, 0, .42));
  transform: rotate(-7deg);
}
.maintenance-page::before { top: 105px; }
.maintenance-page::after { bottom: 65px; transform: rotate(8deg); }
.maintenance-brand {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-height: 82px;
  padding-inline: 7px 3px;
  text-align: left;
}
.pechka-emblem {
  position: relative;
  width: 78px;
  height: 78px;
  overflow: hidden;
  border-radius: 50%;
  background: #050505;
  box-shadow: 0 0 6px #ffd36a, 0 0 22px #ff7100, 0 0 45px rgba(255, 113, 0, .34);
}
.pechka-emblem img {
  position: absolute;
  top: -18.5%;
  left: 50%;
  width: 167%;
  max-width: none;
  transform: translateX(-50%);
}
.maintenance-brand-copy { min-width: 0; }
.maintenance-brand-copy > strong { display: block; font-size: clamp(22px, 6.6vw, 30px); line-height: 1.04; letter-spacing: -.035em; white-space: nowrap; }
.maintenance-brand-copy > p { margin: 3px 0 0; color: #c8d1d8; font-size: clamp(13px, 3.9vw, 17px); }
.maintenance-wave { height: 23px; display: flex; align-items: center; justify-content: flex-start; gap: 3px; margin: 2px 0 0; color: #ff9a08; }
.maintenance-wave i { width: 3px; height: 6px; border-radius: 4px; background: currentColor; box-shadow: 0 0 7px currentColor; }
.maintenance-wave i:nth-of-type(2), .maintenance-wave i:nth-of-type(8) { height: 10px; }
.maintenance-wave i:nth-of-type(3), .maintenance-wave i:nth-of-type(7) { height: 15px; }
.maintenance-wave i:nth-of-type(4), .maintenance-wave i:nth-of-type(6) { height: 20px; }
.maintenance-wave i:nth-of-type(5) { height: 24px; }
.maintenance-wave span { margin-inline: 4px; font-size: 19px; }
.maintenance-card,
.maintenance-countdown-card {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 139, 18, .9);
  background: linear-gradient(150deg, rgba(12, 22, 26, .97), rgba(2, 7, 9, .98));
  box-shadow: 0 0 25px rgba(255, 113, 0, .2), inset 0 0 30px rgba(255, 113, 0, .04);
}
.maintenance-card { display: flex; min-height: 0; flex-direction: column; justify-content: center; padding: 14px 16px; border-radius: 24px; }
.branded-alert-icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  border: 3px solid #ff8a00;
  border-radius: 50%;
  background: #080b0d;
  box-shadow: 0 0 8px #ffd36a, 0 0 25px rgba(255, 113, 0, .64), inset 0 0 21px rgba(255, 113, 0, .13);
}
.branded-alert-icon span { color: #fff; font-size: 40px; font-weight: 900; line-height: 1; text-shadow: 0 0 9px #ff7100; }
.maintenance-card h1 { margin: 0; font-size: clamp(26px, 7.5vw, 36px); line-height: 1.03; letter-spacing: -.04em; }
.maintenance-card > p { margin: 9px auto 0; color: #d4dce2; font-size: clamp(15px, 4.25vw, 19px); line-height: 1.32; }
.maintenance-thanks { width: 78%; margin: 12px auto 10px; padding-top: 10px; border-top: 1px solid rgba(255, 122, 0, .38); color: #c7d0d7; font-size: 15px; }
.maintenance-button,
.voice-dialog.pechka-voice-error .primary-button {
  width: 100%;
  min-height: 48px;
  border: 1px solid #ffc349;
  border-radius: 30px;
  color: #fff;
  background: linear-gradient(135deg, #ffa600, #ff6300);
  box-shadow: 0 0 9px #ffb22a, 0 0 25px rgba(255, 104, 0, .5);
  font: inherit;
  font-size: 18px;
  font-weight: 850;
  text-transform: none;
  cursor: pointer;
}
.maintenance-countdown-card { margin: 0; padding: 10px 12px; border-radius: 19px; }
.maintenance-countdown-card span { display: block; color: #c9d2d9; }
.maintenance-countdown-card span { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.maintenance-countdown-card strong { display: block; margin: 4px 0 0; color: #ff9a08; font-size: clamp(26px, 8.4vw, 38px); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(255, 122, 0, .55); }

.dialog-scrim.branded-error-scrim { place-items: center; padding-block: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-bottom)); background: rgba(1, 6, 9, .84); }
.voice-dialog.pechka-voice-error.microphone-disconnected {
  padding: 27px 22px 23px;
  border-color: rgba(255, 139, 18, .9);
  border-radius: 28px;
  background: linear-gradient(150deg, rgba(12, 22, 26, .99), rgba(2, 7, 9, .99));
  box-shadow: 0 0 29px rgba(255, 113, 0, .25), inset 0 0 30px rgba(255, 113, 0, .04);
}
.voice-dialog.pechka-voice-error .branded-alert-icon { margin-bottom: 20px; }
.voice-dialog.pechka-voice-error.microphone-disconnected h2 { font-size: clamp(28px, 7.8vw, 39px); line-height: 1.06; }
.voice-dialog.pechka-voice-error.microphone-disconnected > p { margin: 17px auto 23px; max-width: 420px; color: #d4dce2; font-size: clamp(17px, 4.8vw, 21px); line-height: 1.45; }
.voice-dialog.pechka-voice-error.microphone-disconnected .dialog-actions { padding-top: 21px; border-top: 1px solid rgba(255, 122, 0, .38); }

@media (max-width: 390px) {
  .maintenance-page { gap: 8px; padding-top: max(8px, env(safe-area-inset-top)); padding-inline: 10px; }
  .maintenance-brand { grid-template-columns: 72px minmax(0, 1fr); min-height: 72px; gap: 10px; padding-inline: 5px 0; }
  .pechka-emblem { width: 68px; height: 68px; }
  .maintenance-card { padding: 12px 14px; border-radius: 22px; }
  .branded-alert-icon { width: 54px; height: 54px; margin-bottom: 8px; }
  .branded-alert-icon span { font-size: 36px; }
  .maintenance-thanks { margin-block: 10px 8px; padding-top: 8px; }
  .maintenance-button,
  .voice-dialog.pechka-voice-error .primary-button { min-height: 46px; font-size: 17px; }
  .voice-dialog.pechka-voice-error.microphone-disconnected { padding: 23px 17px 19px; }
}

@media (max-height: 620px) {
  .maintenance-page { gap: 6px; padding-block: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-bottom)); }
  .maintenance-brand { grid-template-columns: 62px minmax(0, 1fr); min-height: 62px; }
  .pechka-emblem { width: 58px; height: 58px; }
  .maintenance-brand-copy > strong { font-size: 21px; }
  .maintenance-brand-copy > p { margin-top: 1px; font-size: 13px; }
  .maintenance-wave { height: 18px; margin-top: 0; transform: scale(.82); transform-origin: left center; }
  .maintenance-card { padding-block: 9px; }
  .branded-alert-icon { width: 46px; height: 46px; margin-bottom: 6px; border-width: 2px; }
  .branded-alert-icon span { font-size: 31px; }
  .maintenance-card h1 { font-size: 25px; }
  .maintenance-card > p { margin-top: 6px; font-size: 14px; line-height: 1.25; }
  .maintenance-thanks { margin-block: 7px 6px; padding-top: 6px; font-size: 13px; }
  .maintenance-button { min-height: 40px; font-size: 16px; }
  .maintenance-countdown-card { padding-block: 7px; }
  .maintenance-countdown-card strong { margin-top: 2px; font-size: 25px; }
}

@media not all {

/* Start screen v2: the single approved portrait reference is rendered intact. */
.reference-home {
  width: calc(100% + 32px);
  aspect-ratio: 941 / 1672;
  margin: 0 -16px calc(-28px - env(safe-area-inset-bottom));
  overflow: hidden;
  background: #03090c;
}
.reference-home > img {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: fill;
  transform: none;
}
.reference-hotspot,
.reference-burger {
  border: 1px solid transparent;
  color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, backdrop-filter .16s ease;
  touch-action: manipulation;
}
.reference-assistant {
  left: 4.45%;
  top: 48.25%;
  width: 91.1%;
  height: 10.72%;
  display: block;
  padding: 0;
  border-radius: 3.9vw;
}
.reference-manual {
  left: 4.45%;
  top: 60.23%;
  width: 91.1%;
  height: 9.33%;
  border-radius: 3.9vw;
}
.reference-burger {
  top: 1.2%;
  right: 2.85%;
  width: 9%;
  height: 5.1%;
  border-radius: 50%;
}
.reference-microphone {
  left: 82.7%;
  top: 87.05%;
  width: 12.8%;
  height: 7.2%;
  border-radius: 50%;
}
.reference-hotspot:focus-visible,
.reference-burger:focus-visible {
  border-color: #ff7a00;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(255,122,0,.74), 0 0 22px rgba(255,122,0,.38);
}
.reference-assistant:active,
.reference-manual:active {
  transform: scale(.988);
  border-color: #ff7a00;
  background: rgba(95,39,6,.13);
  box-shadow: inset 0 0 0 1px rgba(252,217,116,.5), 0 0 22px rgba(255,122,0,.38);
  backdrop-filter: brightness(1.08) saturate(1.08);
}
.reference-burger:active {
  transform: scale(1.06);
  background: radial-gradient(circle, rgba(252,217,116,.2), rgba(255,122,0,.11) 48%, transparent 73%);
  box-shadow: 0 0 19px rgba(255,122,0,.42);
  backdrop-filter: brightness(1.12) saturate(1.12);
}
.reference-microphone:active {
  transform: scale(1.06);
  background: radial-gradient(circle, rgba(252,217,116,.2), rgba(255,122,0,.1) 45%, transparent 72%);
  box-shadow: 0 0 22px rgba(255,122,0,.4);
  backdrop-filter: brightness(1.14) saturate(1.14);
}

@media (hover: hover) and (pointer: fine) {
  .reference-assistant:hover,
  .reference-manual:hover {
    transform: scale(1.012);
    border-color: #ff7a00;
    background: rgba(95,39,6,.1);
    box-shadow: inset 0 0 0 1px rgba(252,217,116,.52), 0 0 23px rgba(255,122,0,.4);
    backdrop-filter: brightness(1.08) saturate(1.08);
  }
  .reference-burger:hover {
    transform: translateY(1px) scale(1.08);
    border-color: transparent;
    background: radial-gradient(circle, rgba(252,217,116,.2), rgba(255,122,0,.1) 48%, transparent 74%);
    box-shadow: 0 0 20px rgba(255,122,0,.42);
    backdrop-filter: brightness(1.13) saturate(1.14);
  }
  .reference-microphone:hover {
    transform: translate(1px, -2px) scale(1.07);
    border: 1px solid transparent;
    background: radial-gradient(circle, rgba(252,217,116,.22), rgba(255,122,0,.1) 44%, transparent 72%);
    box-shadow: 0 0 24px rgba(255,122,0,.42);
    backdrop-filter: brightness(1.15) saturate(1.16);
    filter: none;
  }
}

/* The same motion language is reused by interactive controls on inner screens. */
@media (hover: hover) and (pointer: fine) {
  .choice:hover,
  .action-card:not(:disabled):hover,
  .package-option:not(:disabled):hover,
  .support-list button:hover,
  .document-list button:hover,
  .document-list a:hover,
  .song-summary button:hover,
  .song-list-card:hover {
    transform: scale(1.012);
  }
  .icon-button:hover,
  .mic-button:not(:disabled):hover,
  .lyrics-pencil:hover,
  .preview-play:hover,
  .song-list-play:not(:disabled):hover {
    transform: scale(1.07);
    box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 38%, transparent);
  }
}
.choice:active,
.action-card:not(:disabled):active,
.package-option:not(:disabled):active,
.support-list button:active,
.document-list button:active,
.song-summary button:active { transform: scale(.988); }

/* Occasion step: approved reference with a live recording control. */
.app-shell:has(.occasion-reference) .app-header { display: none; }
.app-shell:has(.occasion-reference) main {
  min-height: 0;
  padding: 0;
  background: #03090c;
}
.occasion-reference {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 941 / 1672;
  overflow: hidden;
  background: #03090c;
}
.occasion-reference > img {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}
.occasion-burger-hotspot,
.occasion-assistant-hotspot,
.occasion-choice-hotspot,
.occasion-mic-hotspot,
.occasion-back-hotspot,
.occasion-next-hotspot {
  position: absolute;
  z-index: 2;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  color: transparent;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  outline: 0;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.occasion-burger-hotspot {
  top: 1.2%; right: 2.85%; width: 9%; height: 5.1%;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  color: #ff7a00;
}
.occasion-burger-hotspot svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 2.2; }
.occasion-assistant-hotspot {
  left: 5.1%; top: 30.14%; width: 89.8%; height: 7.42%;
  display: grid; grid-template-columns: 11% minmax(0, 1fr) 7%; align-items: center; gap: 3%;
  padding: 1.2% 3.3%; border: 1px solid #1b3b48; border-radius: 3.2vw;
  color: #fff; background: linear-gradient(135deg, #07131a, #0c2028);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  text-align: left;
}
.occasion-assistant-hotspot > .icon:first-child {
  width: 100%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  color: #f9b821; background: #03090c; box-shadow: 0 0 10px rgba(255,122,0,.42);
}
.occasion-assistant-hotspot > .icon:first-child svg { width: 72%; height: 72%; fill: none; stroke: currentColor; }
.occasion-assistant-hotspot > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.occasion-assistant-hotspot b { color: #fff; font-size: clamp(13px, 3.65vw, 20px); line-height: 1.05; }
.occasion-assistant-hotspot small { overflow: hidden; color: #c7cdd1; font-size: clamp(8px, 2.45vw, 14px); line-height: 1.18; white-space: nowrap; text-overflow: ellipsis; }
.occasion-assistant-hotspot > .icon:last-child { width: 100%; color: #ff7a00; }
.occasion-choice-hotspot {
  width: 44.15%; height: 5.46%;
  display: grid; grid-template-columns: 22% minmax(0, 1fr); align-items: center; gap: 5%;
  padding: .8% 3%; border: 1px solid #1b3b48; border-radius: 2.5vw;
  color: #fff; background: linear-gradient(135deg, #07131a, #0c2028);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  text-align: left;
}
.occasion-choice-hotspot .icon { width: 100%; height: 76%; color: #ff7a00; }
.occasion-choice-hotspot .icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; }
.occasion-choice-hotspot > span { color: #fff; font-size: clamp(9px, 2.7vw, 16px); line-height: 1.12; }
.occasion-choice-1  { left: 5.1%;  top: 38.46%; }
.occasion-choice-2  { left: 50.8%; top: 38.46%; }
.occasion-choice-3  { left: 5.1%;  top: 44.62%; }
.occasion-choice-4  { left: 50.8%; top: 44.62%; }
.occasion-choice-5  { left: 5.1%;  top: 50.78%; }
.occasion-choice-6  { left: 50.8%; top: 50.78%; }
.occasion-choice-7  { left: 5.1%;  top: 56.94%; }
.occasion-choice-8  { left: 50.8%; top: 56.94%; }
.occasion-choice-9  { left: 5.1%;  top: 63.10%; }
.occasion-choice-10 { left: 50.8%; top: 63.10%; }
.occasion-choice-11 { left: 5.1%;  top: 69.26%; }
.occasion-choice-12 { left: 50.8%; top: 69.26%; }
.occasion-choice-hotspot.selected {
  border-color: #1b3b48;
  background: linear-gradient(135deg, #07131a, #0c2028);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.occasion-burger-hotspot:focus,
.occasion-assistant-hotspot:focus,
.occasion-choice-hotspot:focus,
.occasion-mic-hotspot:focus,
.occasion-back-hotspot:focus,
.occasion-next-hotspot:focus { outline: 0; }
.occasion-assistant-hotspot:focus-visible,
.occasion-choice-hotspot:focus-visible,
.occasion-back-hotspot:focus-visible {
  transform: scale(1.012);
  border-color: #ff7a00;
  background: linear-gradient(135deg, #0c2028, #07131a);
  box-shadow: inset 0 0 0 1px rgba(252,217,116,.48), 0 0 22px rgba(255,122,0,.38);
}
.occasion-next-hotspot:not(:disabled):focus-visible {
  transform: scale(1.012);
  border-color: #fcd974;
  background: linear-gradient(135deg, #b74705, #ff7a00);
  box-shadow: inset 0 0 0 1px rgba(252,217,116,.5), 0 0 22px rgba(255,122,0,.42);
}
.occasion-burger-hotspot:focus-visible,
.occasion-mic-hotspot:not(:disabled):focus-visible {
  outline: 0;
  border: 0;
  background: radial-gradient(circle, rgba(252,217,116,.2), rgba(255,122,0,.1) 48%, transparent 74%);
  box-shadow: 0 0 20px rgba(255,122,0,.42);
}
.occasion-input-row,
.occasion-recording-row {
  position: absolute;
  z-index: 3;
  left: 5.1%;
  top: 76.08%;
  width: 89.8%;
  height: 5.15%;
}
.occasion-recording-row {
  top: 75.42%;
  height: 5.82%;
}
.occasion-input-row label {
  position: absolute;
  inset: 0 10.4% 0 0;
  display: block;
}
.occasion-input-row input {
  width: 100%;
  height: 100%;
  padding: 0 3.7%;
  border: 1px solid #1b3b48;
  border-radius: 999px;
  color: #fff;
  background: rgba(3, 15, 21, .96);
  box-shadow: inset 0 1px 9px rgba(0,0,0,.3);
  outline: 0;
  font: inherit;
  font-size: clamp(14px, 3.1vw, 18px);
}
.occasion-input-row input::placeholder { color: #627995; opacity: 1; }
.occasion-input-row input:focus {
  border-color: #ff7a00;
  box-shadow: 0 0 0 1px #ff7a00, 0 0 20px rgba(255,122,0,.28), inset 0 1px 9px rgba(0,0,0,.3);
}
.occasion-mic-hotspot {
  right: -.4%; top: -8%; width: 10.2%; height: 116%;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  color: #ff7a00; background: #03090c;
}
.occasion-mic-hotspot svg { width: 70%; height: 70%; fill: none; stroke: currentColor; stroke-width: 1.9; }
.occasion-back-hotspot,
.occasion-next-hotspot {
  display: flex; align-items: center; justify-content: center; gap: 6%;
  padding: 0 4%; border-radius: 2.4vw; color: #fff;
  font-size: clamp(11px, 3vw, 17px);
}
.occasion-back-hotspot { left: 5.4%; top: 81.94%; width: 43.9%; height: 4.95%; border: 1px solid #1b3b48; background: linear-gradient(135deg, #07131a, #0c2028); }
.occasion-next-hotspot { left: 50.7%; top: 81.94%; width: 44%; height: 4.95%; border: 1px solid #ff7a00; background: linear-gradient(135deg, #9f3d05, #e65f08); }
.occasion-back-hotspot .icon,
.occasion-next-hotspot .icon { width: 16%; color: currentColor; }
.occasion-back-hotspot svg,
.occasion-next-hotspot svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.occasion-next-hotspot:disabled,
.occasion-back-hotspot:disabled,
.occasion-mic-hotspot:disabled { cursor: not-allowed; }
.occasion-next-hotspot:disabled { opacity: .72; }
.occasion-reference > .voice-status {
  position: absolute;
  z-index: 5;
  left: 7%;
  right: 7%;
  top: 72.6%;
  margin: 0;
  border-color: rgba(255,122,0,.42);
  background: rgba(7,19,26,.96);
  box-shadow: 0 0 19px rgba(255,122,0,.2);
}

.occasion-recording-row .inline-voice-recorder {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(32px, 9%, 46px) minmax(64px, 1fr) clamp(34px, 10%, 48px) clamp(32px, 9%, 46px) clamp(32px, 9%, 46px);
  gap: clamp(3px, .8vw, 6px);
  padding: clamp(3px, .65vw, 6px);
  border: 1px solid #1b3b48;
  border-radius: 999px;
  background: rgba(3,15,21,.97);
  box-shadow: inset 0 1px 7px rgba(0,0,0,.3), 0 0 18px rgba(255,122,0,.08);
}
.occasion-recording-row .inline-voice-recorder button {
  width: min(100%, 42px);
  height: auto;
  aspect-ratio: 1;
  justify-self: center;
  min-width: 0;
  padding: 0;
  border: 1px solid #ff7a00;
  border-radius: 50%;
  color: #ff7a00;
  background: rgba(95,39,6,.28);
  box-shadow: 0 0 10px rgba(255,122,0,.18);
  font-size: clamp(20px, 4.5vw, 28px);
  line-height: 1;
}
.occasion-recording-row .live-wave { min-width: 0; gap: 2px; height: 68%; overflow: hidden; }
.occasion-recording-row .live-wave i {
  width: 2px;
  flex-basis: 2px;
  background: #ff7a00;
  box-shadow: 0 0 5px rgba(255,122,0,.65);
}
.occasion-recording-row [data-recording-time] {
  display: grid;
  height: 72%;
  place-items: center;
  align-self: center;
  border-left: 1px solid #26363e;
  color: #c7cdd1;
  font-size: clamp(11px, 2.65vw, 15px);
  font-weight: 500;
}
.occasion-recording-row .inline-voice-recorder .voice-stop {
  display: grid;
  place-items: center;
  color: transparent;
  background: rgba(95,39,6,.3);
  font-size: 0;
}
.occasion-recording-row .voice-stop span {
  width: clamp(7px, 28%, 11px);
  aspect-ratio: 1;
  height: auto;
  display: block;
  border-radius: 1px;
  background: #ff7a00;
  box-shadow: 0 0 7px rgba(255,122,0,.55);
}
.occasion-recording-row .inline-voice-recorder .voice-quick {
  color: #2b1302;
  background: linear-gradient(145deg, #f9b821, #ff7a00 64%, #e97409);
  box-shadow: 0 0 16px rgba(255,122,0,.45), inset 0 1px 0 rgba(252,217,116,.55);
}

.occasion-assistant-hotspot:active,
.occasion-choice-hotspot:active,
.occasion-back-hotspot:active,
.occasion-next-hotspot:not(:disabled):active { transform: scale(.988); }
.occasion-burger-hotspot:active,
.occasion-mic-hotspot:not(:disabled):active { transform: scale(1.06); }
.occasion-burger-hotspot:active {
  border: 0;
  background: radial-gradient(circle, rgba(252,217,116,.2), rgba(255,122,0,.11) 48%, transparent 73%);
  box-shadow: 0 0 19px rgba(255,122,0,.42);
}

@media (hover: hover) and (pointer: fine) {
  .occasion-assistant-hotspot:hover,
  .occasion-choice-hotspot:hover,
  .occasion-back-hotspot:hover {
    transform: scale(1.012);
    border-color: #ff7a00;
    background: linear-gradient(135deg, #0c2028, #07131a);
    box-shadow: inset 0 0 0 1px rgba(252,217,116,.48), 0 0 22px rgba(255,122,0,.38);
  }
  .occasion-next-hotspot:not(:disabled):hover {
    transform: scale(1.012);
    border-color: #fcd974;
    background: linear-gradient(135deg, #b74705, #ff7a00);
    box-shadow: inset 0 0 0 1px rgba(252,217,116,.5), 0 0 22px rgba(255,122,0,.42);
  }
  .occasion-mic-hotspot:not(:disabled):hover,
  .occasion-recording-row .inline-voice-recorder button:hover {
    transform: scale(1.07);
    border-color: #ff7a00;
    background-color: rgba(95,39,6,.36);
    box-shadow: 0 0 20px rgba(255,122,0,.42);
  }
  .occasion-burger-hotspot:hover {
    transform: translateY(1px) scale(1.08);
    border: 0;
    background: radial-gradient(circle, rgba(252,217,116,.2), rgba(255,122,0,.1) 48%, transparent 74%);
    box-shadow: 0 0 20px rgba(255,122,0,.42);
  }
}

@media (max-width: 370px) {
  .occasion-recording-row .inline-voice-recorder {
    grid-template-columns: 32px minmax(52px, 1fr) 34px 32px 32px;
    gap: 3px;
  }
}
}

/* Code-built occasion step based on the approved PECHKA MUSIC dark reference. */
.occasion-premium-shell {
  --occasion-bg: #03090c;
  --occasion-surface: #07131a;
  --occasion-card: #0c2028;
  --occasion-line: rgba(92, 130, 145, .48);
  --occasion-orange: #ff7a00;
  --occasion-gold: #f9b821;
  --occasion-glow: #fcd974;
  --occasion-muted: #c7cdd1;
  width: min(100%, 480px);
  color: #fff;
  background: var(--occasion-bg);
  box-shadow: 0 0 70px rgba(0, 0, 0, .55);
}
.occasion-premium-shell main {
  min-height: 100svh;
  padding: 0;
  background: var(--occasion-bg);
}
.occasion-premium-shell .menu-scrim { background: rgba(0, 0, 0, .55); }
.occasion-premium-shell .popover-menu {
  top: max(62px, calc(env(safe-area-inset-top) + 18px));
  right: max(14px, calc((100vw - 480px) / 2 + 14px));
  left: auto;
  color: #fff;
  border-color: rgba(255, 122, 0, .4);
  background: rgba(7, 19, 26, .98);
}
.occasion-premium-shell .popover-menu button:hover { background: rgba(255, 122, 0, .13); }

.occasion-premium {
  position: relative;
  min-height: 100svh;
  padding: 0 16px max(22px, env(safe-area-inset-bottom));
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 22%, rgba(95, 39, 6, .22), transparent 31%),
    linear-gradient(180deg, #03090c, #041016 48%, #03090c);
}
.occasion-premium::before,
.occasion-premium::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: -18%;
  width: 136%;
  height: 180px;
  pointer-events: none;
  opacity: .72;
  background:
    repeating-radial-gradient(ellipse at 50% 105%, transparent 0 18px, rgba(255, 122, 0, .17) 19px 20px, transparent 21px 31px),
    radial-gradient(ellipse at 50% 100%, rgba(95, 39, 6, .62), transparent 66%);
}
.occasion-premium::before { top: 155px; transform: rotate(-4deg); }
.occasion-premium::after { bottom: -34px; transform: rotate(3deg); }
.occasion-premium > * { position: relative; z-index: 1; }

.occasion-premium-hero {
  position: relative;
  min-height: 218px;
  margin: 0 -16px 9px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 33%, rgba(255, 122, 0, .18), transparent 31%),
    radial-gradient(ellipse at 8% 76%, rgba(95, 39, 6, .65), transparent 48%),
    radial-gradient(ellipse at 92% 71%, rgba(95, 39, 6, .7), transparent 48%);
}
.occasion-premium-hero::before,
.occasion-premium-hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: -15%;
  width: 130%;
  height: 126px;
  border-radius: 50%;
  border-top: 1px solid rgba(255, 122, 0, .38);
  box-shadow: 0 -7px 22px rgba(255, 122, 0, .16);
  transform: rotate(-7deg);
}
.occasion-premium-hero::before { top: 65px; }
.occasion-premium-hero::after { top: 101px; transform: rotate(7deg); opacity: .62; }
.occasion-premium-menu {
  position: absolute;
  z-index: 6;
  top: max(16px, env(safe-area-inset-top));
  right: 14px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--occasion-orange);
  background: transparent;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.occasion-premium-menu svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.occasion-premium-token {
  position: absolute;
  z-index: 3;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
}
.occasion-premium-token .brand-avatar {
  width: 118px;
  height: 118px;
  border: 0;
  box-shadow: 0 0 12px rgba(252, 217, 116, .82), 0 0 42px rgba(255, 122, 0, .62), 0 0 74px rgba(95, 39, 6, .45);
}
.occasion-premium-wave {
  position: absolute;
  z-index: 2;
  top: 43px;
  left: 50%;
  width: 86%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 5px rgba(255, 122, 0, .7));
}
.occasion-premium-wave i {
  width: 3px;
  height: var(--wave);
  max-height: 56px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--occasion-glow), var(--occasion-orange));
}
.occasion-note {
  position: absolute;
  z-index: 4;
  color: var(--occasion-orange);
  text-shadow: 0 0 10px rgba(255, 122, 0, .65);
}
.occasion-note-one { top: 46px; left: 8%; font-size: 31px; transform: rotate(-10deg); }
.occasion-note-two { top: 49px; right: 8%; font-size: 34px; transform: rotate(8deg); }
.occasion-note-three { top: 16px; left: 14%; color: var(--occasion-gold); font-size: 20px; }
.occasion-premium-copy {
  position: absolute;
  z-index: 5;
  right: 18px;
  bottom: 5px;
  left: 18px;
  text-align: center;
}
.occasion-premium-copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 7.4vw, 36px);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .75);
}
.occasion-premium-copy p {
  margin: 5px 0 0;
  color: var(--occasion-muted);
  font-size: clamp(14px, 3.6vw, 18px);
  line-height: 1.33;
}

.occasion-premium .voice-status { margin: 10px 0; border-color: rgba(255, 122, 0, .34); color: #fff; background: rgba(7, 19, 26, .95); }
.occasion-premium-assistant {
  width: 100%;
  min-height: 82px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border: 1px solid var(--occasion-line);
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, rgba(12, 32, 40, .94), rgba(7, 19, 26, .98));
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.occasion-assistant-spark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #020608;
  box-shadow: 0 0 14px rgba(255, 122, 0, .32);
}
.occasion-assistant-spark img { width: 45px; height: 45px; object-fit: contain; }
.occasion-premium-assistant > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.occasion-premium-assistant b { color: #fff; font-size: 19px; }
.occasion-premium-assistant small { color: var(--occasion-muted); font-size: 13px; line-height: 1.25; }
.occasion-premium-assistant > .icon { width: 25px; height: 25px; color: var(--occasion-orange); }
.occasion-assistant-prompt-cycle {
  position: relative;
  top: 3px;
  display: block;
  min-height: 2.5em;
  overflow: hidden;
  opacity: 1;
  transition: opacity .5s ease;
}
.occasion-assistant-prompt-cycle.is-fading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .occasion-assistant-prompt-cycle { transition: none; }
}

.occasion-premium-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.occasion-premium-choice {
  min-width: 0;
  min-height: 66px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid var(--occasion-line);
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, rgba(12, 32, 40, .9), rgba(7, 19, 26, .97));
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.occasion-choice-icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--occasion-orange); filter: drop-shadow(0 0 4px rgba(255, 122, 0, .35)); }
.occasion-choice-icon .icon,
.occasion-choice-icon svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.occasion-premium-choice > span:nth-child(2) { min-width: 0; color: #fff; font-size: 14px; font-weight: 650; line-height: 1.18; }
.occasion-premium-choice.selected {
  border-color: var(--occasion-orange);
  background: linear-gradient(135deg, rgba(95, 39, 6, .38), rgba(12, 32, 40, .95));
  box-shadow: inset 0 0 0 1px rgba(252, 217, 116, .36), 0 0 19px rgba(255, 122, 0, .24);
}

.occasion-premium-input,
.occasion-premium-recorder {
  min-height: 50px;
  margin-top: 7px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px;
  align-items: center;
  gap: 8px;
}
.occasion-premium-input { grid-template-columns: minmax(0, 1fr); }
.occasion-premium-input label { min-width: 0; height: 48px; }
.occasion-premium-input input {
  width: 100%;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--occasion-line);
  border-radius: 28px;
  color: #fff;
  background: rgba(7, 19, 26, .96);
  outline: none;
  font: inherit;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.occasion-premium-input input::placeholder { color: #7d858a; opacity: 1; }
.occasion-premium-input input:focus { border-color: var(--occasion-orange); box-shadow: 0 0 18px rgba(255, 122, 0, .28); }
.occasion-premium-input .occasion-premium-mic {
  width: 48px;
  height: 48px;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--occasion-orange);
  background: transparent;
  box-shadow: none;
}
.occasion-premium-input .occasion-premium-mic svg { width: 31px; height: 31px; }
.occasion-premium-recorder { display: block; }
.occasion-premium-recorder .inline-voice-recorder {
  width: 100%;
  min-height: 50px;
  grid-template-columns: 42px minmax(92px, 1fr) 46px 42px 42px;
  gap: 4px;
  padding: 4px;
  border-color: rgba(255, 122, 0, .42);
  background: rgba(7, 19, 26, .98);
  box-shadow: inset 0 0 0 1px rgba(249, 184, 33, .08), 0 0 16px rgba(255, 122, 0, .12);
}
.occasion-premium-recorder .inline-voice-recorder button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 122, 0, .26);
  border-radius: 50%;
  color: var(--occasion-orange);
  background: rgba(95, 39, 6, .14);
  box-shadow: inset 0 0 7px rgba(255, 122, 0, .035);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease;
}
.occasion-premium-recorder .inline-voice-recorder [data-action="voice-record-cancel"] {
  position: relative;
  top: 0;
  left: 3px;
  font-size: 0;
  font-weight: 900;
  line-height: 1;
  padding: 0;
  text-shadow: 0 0 5px rgba(255, 122, 0, .34);
}
.occasion-premium-recorder .inline-voice-recorder [data-action="voice-record-cancel"]::before {
  content: '×';
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  transform: translate(-50%, calc(-50% - 5px));
}
.microphone-permission {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.microphone-permission p { margin: 0; color: var(--muted); line-height: 1.45; }
.microphone-permission .secondary-button {
  min-height: 46px;
  border-color: rgba(255, 122, 0, .46);
  color: var(--text);
  background: rgba(95, 39, 6, .2);
}
.microphone-permission .secondary-button:hover,
.microphone-permission .secondary-button:focus-visible {
  border-color: #ff7a00;
  box-shadow: 0 0 14px rgba(255, 122, 0, .28);
}
.occasion-premium-recorder .inline-voice-recorder > b {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(199, 205, 209, .28);
  color: #c7cdd1;
  text-align: center;
  font-size: 12px;
}
.occasion-premium-recorder .inline-voice-recorder .voice-stop {
  position: relative;
  top: 0;
  justify-content: center;
  gap: 0;
  padding: 0;
  color: var(--occasion-orange);
  background: rgba(95, 39, 6, .14);
  font-size: 0;
}
.occasion-premium-recorder .inline-voice-recorder .voice-stop span {
  position: relative;
  top: 5px;
  left: -.5px;
  width: 15px;
  height: 15px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 6px rgba(255, 122, 0, .52);
}
.occasion-premium-recorder .inline-voice-recorder .voice-quick {
  position: relative;
  top: 0;
  color: #fff;
  background: rgba(95, 39, 6, .14);
  border-color: rgba(255, 122, 0, .26);
  box-shadow: inset 0 0 7px rgba(255, 122, 0, .035);
  font-size: 0;
  line-height: 1;
}
.occasion-premium-recorder .inline-voice-recorder .voice-quick::before {
  content: '↑';
  display: block;
  color: currentColor;
  font-family: Arial Black, Arial, sans-serif;
  font-size: 29px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(2px) scaleY(.78);
  clip-path: inset(0 0 3px 0);
  -webkit-text-stroke: 1.2px currentColor;
  text-shadow: 0 0 5px rgba(255, 255, 255, .22);
}
.occasion-premium-recorder .inline-voice-recorder button:hover,
.occasion-premium-recorder .inline-voice-recorder button:focus-visible {
  transform: scale(1.012);
  border-color: var(--occasion-orange);
  box-shadow: inset 0 0 0 1px rgba(252, 217, 116, .36), 0 0 21px rgba(255, 122, 0, .38);
  outline: none;
}
.occasion-premium-recorder .inline-voice-recorder button:active { transform: scale(.985); }
.occasion-premium-recorder .live-wave {
  width: 100%;
  margin: 0 7px 0 4px;
  justify-content: space-between;
  gap: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.occasion-premium-recorder .live-wave i {
  width: 1px;
  min-width: 1px;
  max-width: 1px;
  flex: 0 1 1px;
  background: var(--occasion-orange);
  box-shadow: 0 0 4px rgba(255, 122, 0, .5);
  transition: height .13s ease-out;
}

.occasion-premium-actions { display: grid; grid-template-columns: 1fr 1.08fr; gap: 10px; margin-top: 7px; }
.occasion-premium-actions button {
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 18px;
  color: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}
.occasion-premium-actions .icon { width: 24px; height: 24px; }
.occasion-back,
.occasion-next {
  border: 1px solid var(--occasion-line);
  background: rgba(7, 19, 26, .48);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, .015);
}
.occasion-next:not(:disabled) {
  border-color: var(--occasion-orange);
  background: linear-gradient(135deg, rgba(166, 64, 5, .62), rgba(233, 101, 8, .68) 62%, rgba(255, 122, 0, .72));
  box-shadow: 0 0 18px rgba(255, 122, 0, .18);
}
.occasion-premium-actions button:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
.occasion-premium-actions .occasion-next:disabled { opacity: 1; }
.occasion-premium-actions.genre-refine-visible { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, .9fr); gap: 7px; }
.occasion-premium-actions .genre-refine {
  border: 1px solid rgba(132, 169, 183, .3);
  color: #d7dde0;
  background: rgba(7, 19, 26, .64);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
}
.occasion-premium-actions.genre-refine-entering .genre-refine { animation: genre-refine-appear .24s ease-out both; }
.occasion-premium-actions.genre-refine-entering .occasion-back { animation: genre-back-shift .24s ease-out both; }
.occasion-premium-actions.genre-refine-entering .occasion-next { animation: genre-next-shift .24s ease-out both; }
@keyframes genre-refine-appear { from { opacity: 0; transform: scaleX(.72); } to { opacity: 1; transform: scaleX(1); } }
@keyframes genre-back-shift { from { transform: translateX(11px); } to { transform: translateX(0); } }
@keyframes genre-next-shift { from { transform: translateX(-11px); } to { transform: translateX(0); } }
.occasion-premium-footer { min-height: 126px; margin: 0 -16px -22px; display: flex; align-items: flex-end; justify-content: space-around; padding: 0 32px 25px; color: var(--occasion-orange); font-size: 34px; text-shadow: 0 0 9px rgba(255, 122, 0, .52); }
.occasion-premium-footer span:nth-child(2) { margin-bottom: 24px; color: var(--occasion-gold); font-size: 22px; }

.occasion-premium-menu:focus-visible,
.occasion-premium-assistant:focus-visible,
.occasion-premium-choice:focus-visible,
.occasion-premium-actions button:focus-visible,
.occasion-premium-mic:focus-visible {
  outline: none;
  border-color: var(--occasion-orange);
  box-shadow: 0 0 21px rgba(255, 122, 0, .42);
}
.occasion-premium-menu:active,
.occasion-premium-input .occasion-premium-mic:active { transform: scale(1.06); }
.occasion-premium-assistant:active,
.occasion-premium-choice:active,
.occasion-premium-actions button:not(:disabled):active { transform: scale(.985); }

@media (hover: hover) and (pointer: fine) {
  .occasion-premium-menu:hover,
  .occasion-premium-input .occasion-premium-mic:not(:disabled):hover {
    transform: scale(1.08);
    border-color: rgba(255, 122, 0, .78);
    background: rgba(95, 39, 6, .34);
    box-shadow: 0 0 21px rgba(255, 122, 0, .43);
  }
  .occasion-premium-assistant:hover,
  .occasion-premium-choice:hover,
  .occasion-back:hover,
  .occasion-next:not(:disabled):hover {
    transform: scale(1.012);
    border-color: var(--occasion-orange);
    box-shadow: inset 0 0 0 1px rgba(252, 217, 116, .36), 0 0 21px rgba(255, 122, 0, .38);
  }
  .occasion-premium-actions .genre-refine:hover {
    border-color: var(--occasion-orange);
    box-shadow: inset 0 0 0 1px rgba(252, 217, 116, .36), 0 0 21px rgba(255, 122, 0, .38);
  }
  .occasion-next:not(:disabled):hover { filter: brightness(1.12); }
}

@media (max-width: 380px) {
  .occasion-premium { padding-inline: 11px; }
  .occasion-premium-hero { min-height: 205px; margin-inline: -11px; }
  .occasion-premium-token { top: 6px; }
  .occasion-premium-token .brand-avatar { width: 108px; height: 108px; }
  .occasion-premium-wave { top: 39px; width: 89%; height: 54px; }
  .occasion-premium-copy { bottom: 4px; }
  .occasion-premium-copy h1 { font-size: 27px; }
  .occasion-premium-copy p { font-size: 13px; }
  .occasion-premium-assistant { min-height: 72px; grid-template-columns: 49px minmax(0, 1fr) 21px; gap: 9px; padding: 9px 11px; }
  .occasion-assistant-spark { width: 46px; height: 46px; }
  .occasion-assistant-spark img { width: 39px; height: 39px; }
  .occasion-premium-assistant b { font-size: 17px; }
  .occasion-premium-assistant small { font-size: 11px; }
  .occasion-premium-grid { gap: 7px; margin-top: 9px; }
  .occasion-premium-choice { min-height: 59px; grid-template-columns: 31px minmax(0, 1fr) auto; gap: 6px; padding: 7px 8px; border-radius: 16px; }
  .occasion-choice-icon { width: 30px; height: 30px; }
  .occasion-choice-icon .icon,
  .occasion-choice-icon svg { width: 27px; height: 27px; }
  .occasion-premium-choice > span:nth-child(2) { font-size: 12px; }
  .occasion-premium-input,
  .occasion-premium-recorder { margin-top: 6px; }
  .occasion-premium-actions { margin-top: 6px; }
  .occasion-premium-actions.genre-refine-visible { gap: 5px; }
  .occasion-premium-actions.genre-refine-visible button { gap: 4px; padding-inline: 5px; font-size: 13px; }
  .occasion-premium-actions.genre-refine-visible .icon { width: 19px; height: 19px; }
  .occasion-premium-footer { min-height: 103px; }
  .occasion-premium-recorder .inline-voice-recorder { min-height: 48px; grid-template-columns: 39px minmax(74px, 1fr) 42px 37px 37px; gap: 3px; padding: 4px; }
  .occasion-premium-recorder .inline-voice-recorder button { width: 34px; height: 34px; }
}

/* AR-01.1 full visual pass — all remaining user screens reuse the approved
   start/occasion language while keeping the existing runtime contracts. */
.restyled-shell {
  --accent: #ff7a00;
  --accent-soft: rgba(95, 39, 6, .34);
  --accent-glow: #f9b821;
  --bg: #03090c;
  --flow-bg: #03090c;
  --card: rgba(12, 32, 40, .94);
  --card-solid: #07131a;
  --card-muted: #091a21;
  --line: rgba(132, 169, 183, .3);
  --text: #fff;
  --muted: #c7cdd1;
  --shadow: inset 0 1px rgba(255, 255, 255, .025), 0 16px 40px rgba(0, 0, 0, .3);
  width: min(100%, 540px);
  color: var(--text);
  background: #03090c;
  border-inline: 1px solid rgba(255, 122, 0, .1);
  box-shadow: 0 0 70px rgba(0, 0, 0, .5);
}
.restyled-shell main {
  min-height: 100svh;
  padding: 0 16px calc(28px + env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 0 52%, rgba(95, 39, 6, .2), transparent 38%),
    radial-gradient(ellipse at 100% 76%, rgba(95, 39, 6, .16), transparent 40%),
    #03090c;
}
.restyled-shell .flow-screen,
.restyled-shell .plans-screen {
  min-height: 100svh;
  margin: 0 -16px;
  padding: 0 16px 104px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 0 56%, rgba(95, 39, 6, .2), transparent 36%),
    radial-gradient(ellipse at 100% 82%, rgba(95, 39, 6, .16), transparent 38%),
    #03090c;
}
.restyled-shell .flow-screen::before,
.restyled-shell .plans-screen::before {
  background: repeating-radial-gradient(ellipse at 50% 110%, transparent 0 46px, rgba(255, 122, 0, .1) 47px 48px, transparent 49px 68px);
}
.restyled-shell .flow-screen::after,
.restyled-shell .plans-screen::after { color: #ff7a00; }

.premium-page-hero {
  position: relative;
  min-height: 226px;
  margin: 0 -16px 14px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(circle at 50% 33%, rgba(255, 122, 0, .25), transparent 29%),
    radial-gradient(ellipse at 0 80%, rgba(95, 39, 6, .55), transparent 45%),
    radial-gradient(ellipse at 100% 80%, rgba(95, 39, 6, .55), transparent 45%),
    #03090c;
}
.premium-page-hero::before,
.premium-page-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -14%;
  width: 128%;
  height: 118px;
  border-radius: 48%;
  border-top: 1px solid rgba(255, 122, 0, .68);
  background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 12px, rgba(255, 122, 0, .14) 13px 14px, transparent 15px 21px);
  filter: drop-shadow(0 0 8px rgba(255, 122, 0, .25));
}
.premium-page-hero::before { top: 65px; transform: rotate(-7deg); }
.premium-page-hero::after { top: 105px; opacity: .65; transform: rotate(7deg); }
.premium-page-menu {
  position: absolute;
  z-index: 8;
  top: max(16px, env(safe-area-inset-top));
  right: 14px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  color: #ff7a00;
  background: transparent;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.premium-page-menu svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.premium-page-token { position: absolute; z-index: 4; top: 7px; left: 50%; transform: translateX(-50%); }
.premium-page-token .brand-avatar {
  width: 118px;
  height: 118px;
  border: 0;
  box-shadow: 0 0 12px rgba(252, 217, 116, .82), 0 0 42px rgba(255, 122, 0, .62), 0 0 74px rgba(95, 39, 6, .45);
}
.premium-page-wave {
  position: absolute;
  z-index: 3;
  top: 43px;
  left: 50%;
  width: 86%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 5px rgba(255, 122, 0, .7));
}
.premium-page-wave i { width: 3px; height: var(--wave); max-height: 56px; border-radius: 4px; background: linear-gradient(#fcd974, #ff7a00); }
.premium-page-note { position: absolute; z-index: 5; color: #ff7a00; line-height: 1; text-shadow: 0 0 10px rgba(255, 122, 0, .65); }
.premium-page-note-one { top: 46px; left: 8%; font-size: 31px; transform: rotate(-10deg); }
.premium-page-note-two { top: 49px; right: 8%; font-size: 34px; transform: rotate(8deg); }
.premium-page-note-three { top: 16px; left: 14%; color: #f9b821; font-size: 20px; }
.premium-page-copy { position: absolute; z-index: 6; right: 18px; bottom: 8px; left: 18px; text-align: center; }
.premium-page-copy > span { display: block; margin-bottom: 3px; color: #ff9a32; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.premium-page-copy h1 { margin: 0; color: #fff; font-size: clamp(27px, 7.2vw, 36px); line-height: 1.02; letter-spacing: -.035em; text-shadow: 0 2px 8px rgba(0, 0, 0, .75); }
.premium-page-copy p { max-width: 470px; margin: 5px auto 0; color: #c7cdd1; font-size: clamp(13px, 3.4vw, 17px); line-height: 1.3; }

.restyled-shell .menu-scrim { background: rgba(0, 0, 0, .55); }
.restyled-shell .popover-menu {
  top: max(62px, calc(env(safe-area-inset-top) + 18px));
  right: max(14px, calc((100vw - 540px) / 2 + 14px));
  left: auto;
  color: #fff;
  border-color: rgba(255, 122, 0, .34);
  background: rgba(7, 19, 26, .98);
  box-shadow: 0 24px 66px rgba(0, 0, 0, .55), 0 0 28px rgba(255, 122, 0, .12);
}
.restyled-shell .popover-menu button:hover { background: rgba(255, 122, 0, .13); }

.restyled-shell .action-card,
.restyled-shell .choice,
.restyled-shell .details-card,
.restyled-shell .lyrics-card,
.restyled-shell .final-song-card,
.restyled-shell .generation-steps,
.restyled-shell .result-ready-note,
.restyled-shell .locked-song-card,
.restyled-shell .locked-explanation,
.restyled-shell .my-songs-note,
.restyled-shell .song-list-card,
.restyled-shell .plans-tip,
.restyled-shell .billing-history,
.restyled-shell .steps li,
.restyled-shell .faq-item,
.restyled-shell .support-list button,
.restyled-shell .support-form,
.restyled-shell .support-context,
.restyled-shell .settings-card,
.restyled-shell .document-list button,
.restyled-shell .document-list a,
.restyled-shell .tip-card,
.restyled-shell .empty-state,
.restyled-shell .legal-consent,
.restyled-shell .welcome-card,
.restyled-shell .preview-state,
.restyled-shell .voice-status {
  border-color: rgba(132, 169, 183, .3);
  color: #fff;
  background: linear-gradient(135deg, rgba(12, 32, 40, .94), rgba(7, 19, 26, .98));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 12px 32px rgba(0, 0, 0, .22);
}
.restyled-shell .action-card.featured { border-color: rgba(255, 122, 0, .55); }
.restyled-shell .choice { min-height: 66px; border-radius: 18px; }
.restyled-shell .choice:hover,
.restyled-shell .choice:focus-visible,
.restyled-shell .choice.selected,
.restyled-shell .action-card:not(:disabled):hover,
.restyled-shell .steps li.available:hover,
.restyled-shell .faq-item:hover,
.restyled-shell .faq-item:focus-within,
.restyled-shell .faq-item.open,
.restyled-shell .support-list button:hover,
.restyled-shell .document-list button:hover,
.restyled-shell .document-list a:hover,
.restyled-shell .theme-picker button.selected,
.restyled-shell .package-option:not(:disabled):hover,
.restyled-shell .package-option:not(:disabled):focus-visible,
.restyled-shell .package-option.selected,
.restyled-shell .single-back .secondary-button:hover,
.restyled-shell .single-back .secondary-button:focus-visible {
  border-color: #ff7a00;
  color: #fff;
  background: linear-gradient(135deg, rgba(95, 39, 6, .38), rgba(12, 32, 40, .96));
  box-shadow: inset 0 0 0 1px rgba(252, 217, 116, .28), 0 0 19px rgba(255, 122, 0, .22);
}
.restyled-shell .choice .icon,
.restyled-shell .support-list .icon,
.restyled-shell .document-list .icon,
.restyled-shell .steps .icon { color: #ff7a00; }
.restyled-shell .faq-question { color: #fff; }
.restyled-shell .faq-answer { border-top-color: rgba(199, 205, 209, .18); }
.restyled-shell .faq-answer p { color: #aeb8bd; }

@media (max-width: 699px) {
  .faq-item > button { min-height: 60px; grid-template-columns: 32px minmax(0, 1fr) 23px; gap: 9px; padding: 10px 12px; }
  .faq-answer { margin-left: 53px; padding-right: 12px; }
}
.restyled-shell .action-card small,
.restyled-shell .choice small,
.restyled-shell .details-card p,
.restyled-shell .my-songs-note,
.restyled-shell .support-form small,
.restyled-shell .document-list small,
.restyled-shell .tip-card,
.restyled-shell .locked-explanation p,
.restyled-shell .music-generation-hero p { color: #c7cdd1; }

.restyled-shell .package-option,
.restyled-shell .theme-picker button,
.restyled-shell .secondary-button {
  border-color: rgba(132, 169, 183, .3);
  color: #fff;
  background: rgba(7, 19, 26, .64);
}
.restyled-shell .package-option { border-radius: 18px; }
.restyled-shell .flow-input-row input,
.restyled-shell .details-card textarea,
.restyled-shell .lyrics-command textarea,
.restyled-shell .lyrics-editor,
.restyled-shell .support-form select,
.restyled-shell .support-form textarea,
.restyled-shell .support-form input,
.restyled-shell .access-input {
  border-color: rgba(132, 169, 183, .3);
  color: #fff;
  background: rgba(7, 19, 26, .97);
  caret-color: #ff7a00;
}
.restyled-shell input::placeholder,
.restyled-shell textarea::placeholder { color: #7d858a; opacity: 1; }
.restyled-shell .flow-input-row input:focus,
.restyled-shell .details-card textarea:focus,
.restyled-shell .lyrics-command textarea:focus,
.restyled-shell .lyrics-editor:focus,
.restyled-shell .support-form select:focus,
.restyled-shell .support-form textarea:focus,
.restyled-shell .support-form input:focus {
  border-color: #ff7a00;
  outline: 0;
  box-shadow: 0 0 18px rgba(255, 122, 0, .28);
}
.restyled-shell .flow-input-row { margin-top: 9px; }
.restyled-shell .mic-button { color: #ff7a00; background: transparent; border-color: transparent; box-shadow: none; }
.restyled-shell .mic-button:hover,
.restyled-shell .mic-button:focus-visible { border-color: #ff7a00; background: rgba(95, 39, 6, .28); box-shadow: 0 0 18px rgba(255, 122, 0, .34); }

.restyled-shell .inline-voice-recorder {
  width: 100%;
  min-height: 50px;
  grid-template-columns: 42px minmax(76px, 1fr) 46px 42px 42px;
  gap: 4px;
  padding: 4px;
  border-color: rgba(255, 122, 0, .42);
  color: #fff;
  background: rgba(7, 19, 26, .98);
  box-shadow: inset 0 0 0 1px rgba(249, 184, 33, .08), 0 0 16px rgba(255, 122, 0, .12);
}
.restyled-shell .inline-voice-recorder button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 122, 0, .26);
  border-radius: 50%;
  color: #ff7a00;
  background: rgba(95, 39, 6, .14);
  box-shadow: inset 0 0 7px rgba(255, 122, 0, .035);
}
.restyled-shell .inline-voice-recorder [data-action="voice-record-cancel"] { position: relative; font-size: 0; }
.restyled-shell .inline-voice-recorder [data-action="voice-record-cancel"]::before { content: '×'; position: absolute; top: 50%; left: 50%; font-size: 34px; line-height: 1; transform: translate(-50%, calc(-50% - 4px)); }
.restyled-shell .inline-voice-recorder > b { min-height: 30px; display: flex; align-items: center; justify-content: center; border-left: 1px solid rgba(199, 205, 209, .28); color: #c7cdd1; font-size: 12px; }
.restyled-shell .inline-voice-recorder .voice-stop { padding: 0; color: #ff7a00; background: rgba(95, 39, 6, .14); font-size: 0; }
.restyled-shell .inline-voice-recorder .voice-stop span { width: 15px; height: 15px; border-radius: 2px; background: currentColor; box-shadow: 0 0 6px rgba(255, 122, 0, .52); }
.restyled-shell .inline-voice-recorder .voice-quick { position: relative; color: #fff; background: rgba(95, 39, 6, .14); font-size: 0; }
.restyled-shell .inline-voice-recorder .voice-quick::before { content: '↑'; display: block; font-family: Arial Black, Arial, sans-serif; font-size: 29px; line-height: 1; transform: translateY(2px) scaleY(.78); clip-path: inset(0 0 3px 0); -webkit-text-stroke: 1.2px currentColor; }
.restyled-shell .inline-voice-recorder .live-wave { width: 100%; margin: 0 6px 0 3px; justify-content: space-between; gap: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.restyled-shell .inline-voice-recorder .live-wave i { width: 1px; min-width: 1px; max-width: 1px; flex: 0 1 1px; background: #ff7a00; box-shadow: 0 0 4px rgba(255, 122, 0, .5); }

.restyled-shell .bottom-actions,
.restyled-shell .plans-actions { gap: 10px; padding-top: 10px; background: linear-gradient(transparent, rgba(3, 9, 12, .98) 24%); }
.restyled-shell .bottom-actions button,
.restyled-shell .plans-actions button,
.restyled-shell .single-back button { min-height: 48px; border-radius: 18px; }
.restyled-shell .bottom-actions .primary-button,
.restyled-shell .plans-actions .primary-button { border: 1px solid #ff7a00; background: linear-gradient(135deg, rgba(166, 64, 5, .7), rgba(255, 122, 0, .82)); }
.restyled-shell .single-back { margin-bottom: 8px; }
.restyled-shell .songs-signature { color: #ff7a00; background-color: transparent; }
.restyled-shell .result-ready-note > span,
.restyled-shell .locked-explanation > span { color: #ff7a00; background: rgba(95, 39, 6, .28); }

/* Information surfaces stay visually quieter than cards that perform an action. */
:is(
  .coded-welcome,
  .page-intro,
  .stage-boundary,
  .tip-card,
  .empty-state,
  .lyrics-empty,
  .generation-steps,
  .result-ready-note,
  .locked-explanation,
  .my-songs-note,
  .billing-empty,
  .plans-tip,
  .support-context,
  .support-feedback,
  .voice-status,
  .preview-state
) ,
.restyled-shell :is(
  .page-intro,
  .stage-boundary,
  .tip-card,
  .empty-state,
  .lyrics-empty,
  .generation-steps,
  .result-ready-note,
  .locked-explanation,
  .my-songs-note,
  .billing-empty,
  .plans-tip,
  .support-context,
  .support-feedback,
  .voice-status,
  .preview-state
) {
  position: relative;
  border-color: transparent;
  background: color-mix(in srgb, var(--card) 52%, transparent);
  box-shadow: 0 0 18px rgba(132, 169, 183, .035);
  backdrop-filter: blur(8px);
}
:is(
  .coded-welcome,
  .page-intro,
  .stage-boundary,
  .tip-card,
  .empty-state,
  .lyrics-empty,
  .generation-steps,
  .result-ready-note,
  .locked-explanation,
  .my-songs-note,
  .billing-empty,
  .plans-tip,
  .support-context,
  .support-feedback,
  .voice-status,
  .preview-state
)::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -1px;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 2%, rgba(132, 169, 183, .22) 14% 43%, transparent 52% 61%, rgba(132, 169, 183, .16) 72% 89%, transparent 98%) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(132, 169, 183, .2), rgba(132, 169, 183, .11) 48%, transparent 91%) left / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(132, 169, 183, .18), rgba(132, 169, 183, .08) 54%, transparent 88%) right / 1px 100% no-repeat;
  filter: blur(.35px);
  pointer-events: none;
}
.coded-home-shell .coded-welcome { border-color: transparent; background: rgba(7, 19, 26, .52); }

@media (hover: hover) and (pointer: fine) {
  .premium-page-menu:hover,
  .premium-page-menu:focus-visible { transform: scale(1.08); border-color: rgba(255, 122, 0, .78); background: rgba(95, 39, 6, .34); box-shadow: 0 0 21px rgba(255, 122, 0, .43); outline: none; }
  .restyled-shell .inline-voice-recorder button:hover,
  .restyled-shell .inline-voice-recorder button:focus-visible { transform: scale(1.012); border-color: #ff7a00; box-shadow: 0 0 21px rgba(255, 122, 0, .38); outline: none; }
}

@media (max-width: 430px) {
  .premium-page-hero { min-height: 214px; }
  .premium-page-copy h1 { font-size: clamp(26px, 7.2vw, 32px); }
  .premium-page-copy p { font-size: 13px; }
}
@media (max-width: 380px) {
  .restyled-shell main { padding-inline: 11px; }
  .restyled-shell .flow-screen,
  .restyled-shell .plans-screen { margin-inline: -11px; padding-inline: 11px; }
  .premium-page-hero { min-height: 205px; margin-inline: -11px; }
  .premium-page-token { top: 6px; }
  .premium-page-token .brand-avatar { width: 108px; height: 108px; }
  .premium-page-wave { top: 39px; width: 89%; height: 54px; }
  .premium-page-copy { bottom: 6px; }
  .premium-page-copy > span { font-size: 10px; }
  .premium-page-copy h1 { font-size: 27px; }
  .premium-page-copy p { font-size: 12px; }
  .restyled-shell .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .restyled-shell .choice { min-height: 59px; gap: 6px; padding: 7px 8px; }
  .restyled-shell .choice .icon { width: 25px; height: 25px; }
  .restyled-shell .choice span:last-child { font-size: 12px; line-height: 1.18; }
  .restyled-shell .inline-voice-recorder { grid-template-columns: 38px minmax(62px, 1fr) 39px 36px 36px; gap: 3px; }
  .restyled-shell .inline-voice-recorder button { width: 33px; height: 33px; }
  .restyled-shell .final-song-card dl .final-parameter > span:first-child { grid-template-columns: minmax(80px, .8fr) 1.3fr; }
}

/* AR-01.2 — one visual contract for every Song Flow screen.
   Home owns the hero; occasion owns assistant, choices, recorder and navigation. */
.coded-home-shell,
.occasion-premium-shell,
.restyled-shell {
  width: min(100%, 480px);
  border-inline: 0;
}
.restyled-shell {
  --occasion-line: rgba(92, 130, 145, .48);
  --occasion-orange: #ff7a00;
  --occasion-gold: #f9b821;
  --occasion-muted: #c7cdd1;
}
.occasion-premium,
.restyled-shell .flow-screen {
  background: #03090c;
}
.premium-page-hero {
  min-height: 220px;
  margin-bottom: 9px;
  background: #03090c;
}
.premium-page-hero::before,
.premium-page-hero::after {
  left: -18%;
  width: 136%;
  height: 118px;
  border-radius: 48%;
  border-top-color: rgba(255, 122, 0, .68);
  background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 12px, rgba(255, 122, 0, .14) 13px 14px, transparent 15px 21px);
  filter: none;
}
.premium-page-hero::before { top: 54px; transform: rotate(-8deg); }
.premium-page-hero::after { top: 113px; transform: rotate(7deg) scaleY(-1); opacity: .7; }
.premium-page-menu {
  top: 5px;
  right: 5px;
  width: 44px;
  height: 44px;
}
.premium-page-menu svg { width: 29px; height: 29px; }
.premium-page-token { top: 19px; }
.premium-page-token .brand-avatar {
  width: 126px;
  height: 126px;
  box-shadow: 0 0 10px #ff8500, 0 0 32px rgba(255, 133, 0, .64);
}
.premium-page-wave {
  top: 66px;
  width: min(78%, 365px);
  height: 60px;
  filter: drop-shadow(0 0 5px rgba(255, 133, 0, .72));
}
.premium-page-note-one { top: 43px; left: 9%; font-size: 34px; }
.premium-page-note-two { top: 46px; right: 10%; font-size: 37px; }
.premium-page-note-three { top: 22px; left: 18%; font-size: 22px; }
.premium-page-copy { bottom: 10px; }
.premium-page-copy h1 { font-size: clamp(27px, 7vw, 34px); }
.premium-page-copy p { margin-top: 3px; }

.flow-assistant-card,
.restyled-shell .flow-assistant-card {
  width: 100%;
  min-height: 82px;
  grid-template-columns: 58px minmax(0, 1fr) 25px;
  gap: 12px;
  padding: 11px 16px;
  border: 1px solid var(--occasion-line, rgba(92, 130, 145, .48));
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, rgba(12, 32, 40, .94), rgba(7, 19, 26, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}
@media (hover: hover) and (pointer: fine) {
  .restyled-shell .flow-assistant-card:hover {
    transform: scale(1.012);
    border-color: var(--occasion-orange);
    box-shadow: inset 0 0 0 1px rgba(252, 217, 116, .36), 0 0 21px rgba(255, 122, 0, .38);
  }
}

/* r83 — discrete expanding semicircles with progressively wider sound-wave spacing. */
.songs-library-screen::after {
  --library-expanding-echoes:
    radial-gradient(ellipse 126px 54px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .052) calc(100% - .65px), rgba(255, 151, 42, .052) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 152px 82px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .049) calc(100% - .65px), rgba(255, 151, 42, .049) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 182px 116px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .046) calc(100% - .65px), rgba(255, 151, 42, .046) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 216px 156px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .043) calc(100% - .65px), rgba(255, 151, 42, .043) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 255px 203px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .04) calc(100% - .65px), rgba(255, 151, 42, .04) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 300px 258px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .038) calc(100% - .65px), rgba(255, 151, 42, .038) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 351px 322px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .036) calc(100% - .65px), rgba(255, 151, 42, .036) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 408px 396px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .034) calc(100% - .65px), rgba(255, 151, 42, .034) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 472px 482px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .032) calc(100% - .65px), rgba(255, 151, 42, .032) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 544px 580px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .03) calc(100% - .65px), rgba(255, 151, 42, .03) calc(100% - .15px), transparent 100%);
}
html[data-theme="light"] .songs-library-screen::after {
  --library-expanding-echoes-light:
    radial-gradient(ellipse 126px 54px at 50% 0, transparent calc(100% - 1px), rgba(151, 83, 28, .038) calc(100% - .65px), rgba(151, 83, 28, .038) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 152px 82px at 50% 0, transparent calc(100% - 1px), rgba(151, 83, 28, .036) calc(100% - .65px), rgba(151, 83, 28, .036) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 182px 116px at 50% 0, transparent calc(100% - 1px), rgba(151, 83, 28, .034) calc(100% - .65px), rgba(151, 83, 28, .034) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 216px 156px at 50% 0, transparent calc(100% - 1px), rgba(151, 83, 28, .032) calc(100% - .65px), rgba(151, 83, 28, .032) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 255px 203px at 50% 0, transparent calc(100% - 1px), rgba(151, 83, 28, .03) calc(100% - .65px), rgba(151, 83, 28, .03) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 300px 258px at 50% 0, transparent calc(100% - 1px), rgba(151, 83, 28, .028) calc(100% - .65px), rgba(151, 83, 28, .028) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 351px 322px at 50% 0, transparent calc(100% - 1px), rgba(151, 83, 28, .026) calc(100% - .65px), rgba(151, 83, 28, .026) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 408px 396px at 50% 0, transparent calc(100% - 1px), rgba(151, 83, 28, .024) calc(100% - .65px), rgba(151, 83, 28, .024) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 472px 482px at 50% 0, transparent calc(100% - 1px), rgba(151, 83, 28, .022) calc(100% - .65px), rgba(151, 83, 28, .022) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 544px 580px at 50% 0, transparent calc(100% - 1px), rgba(151, 83, 28, .02) calc(100% - .65px), rgba(151, 83, 28, .02) calc(100% - .15px), transparent 100%);
}
.restyled-shell .choice {
  min-height: 66px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 18px;
}
.restyled-shell .choice > .icon:first-child { width: 31px; height: 31px; }

.flow-voice-recorder {
  min-height: 50px;
  margin-top: 7px;
  display: block;
}
.flow-voice-recorder .inline-voice-recorder,
.restyled-shell .flow-voice-recorder .inline-voice-recorder {
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: 42px minmax(92px, 1fr) 46px 42px 42px;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 122, 0, .42);
  border-radius: 28px;
  background: rgba(7, 19, 26, .98);
  box-shadow: inset 0 0 0 1px rgba(249, 184, 33, .08), 0 0 16px rgba(255, 122, 0, .12);
}
.flow-voice-recorder .inline-voice-recorder button,
.restyled-shell .flow-voice-recorder .inline-voice-recorder button {
  position: relative;
  inset: auto;
  width: 36px;
  height: 36px;
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 122, 0, .26);
  border-radius: 50%;
  color: #ff7a00;
  background: rgba(95, 39, 6, .14);
}
.flow-voice-recorder .inline-voice-recorder [data-action="voice-record-cancel"],
.restyled-shell .flow-voice-recorder .inline-voice-recorder [data-action="voice-record-cancel"] {
  position: relative;
  top: 0;
  left: 3px;
}
.flow-voice-recorder .inline-voice-recorder [data-action="voice-record-cancel"]::before,
.restyled-shell .flow-voice-recorder .inline-voice-recorder [data-action="voice-record-cancel"]::before {
  transform: translate(-50%, calc(-50% - 5px));
}
.flow-voice-recorder .inline-voice-recorder .voice-stop,
.restyled-shell .flow-voice-recorder .inline-voice-recorder .voice-stop {
  position: relative;
  top: 0;
}
.flow-voice-recorder .inline-voice-recorder .voice-stop span,
.restyled-shell .flow-voice-recorder .inline-voice-recorder .voice-stop span {
  position: relative;
  top: 5px;
  left: -.5px;
  width: 15px;
  height: 15px;
  margin: 0;
}
.flow-voice-recorder .inline-voice-recorder .voice-quick,
.restyled-shell .flow-voice-recorder .inline-voice-recorder .voice-quick {
  position: relative;
  top: 0;
  color: #ff7a00;
}
.flow-voice-recorder .inline-voice-recorder .voice-quick::before,
.restyled-shell .flow-voice-recorder .inline-voice-recorder .voice-quick::before {
  transform: translateY(2px) scaleY(.78);
}
.flow-voice-recorder .inline-voice-recorder > b {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(199, 205, 209, .28);
  color: #c7cdd1;
  font-size: 12px;
}
.flow-voice-recorder .live-wave {
  width: 100%;
  margin: 0 7px 0 4px;
  justify-content: space-between;
  gap: 0;
}
.flow-voice-recorder .live-wave i {
  width: 1px;
  min-width: 1px;
  max-width: 1px;
  flex: 0 1 1px;
  background: #ff7a00;
  box-shadow: 0 0 4px rgba(255, 122, 0, .5);
}

.flow-step-actions { margin-top: 7px; }
.flow-premium-footer {
  min-height: 126px;
  margin: 0 -16px -22px;
  padding: 0 32px 25px;
  background:
    radial-gradient(ellipse at 0 100%, rgba(95, 39, 6, .5), transparent 44%),
    radial-gradient(ellipse at 100% 100%, rgba(95, 39, 6, .5), transparent 44%),
    repeating-radial-gradient(ellipse at 50% 118%, transparent 0 18px, rgba(255, 122, 0, .13) 19px 20px, transparent 21px 31px);
}

@media (max-width: 380px) {
  .premium-page-hero { min-height: 202px; }
  .premium-page-token { top: 17px; }
  .premium-page-token .brand-avatar { width: 114px; height: 114px; }
  .premium-page-wave { top: 58px; width: 82%; height: 54px; }
  .premium-page-copy { bottom: 8px; }
  .premium-page-copy h1 { font-size: 26px; }
  .flow-assistant-card,
  .restyled-shell .flow-assistant-card { min-height: 72px; grid-template-columns: 49px minmax(0, 1fr) 21px; gap: 9px; padding: 9px 11px; }
  .restyled-shell .choice { min-height: 59px; grid-template-columns: 31px minmax(0, 1fr) auto; gap: 6px; padding: 7px 8px; }
  .flow-voice-recorder .inline-voice-recorder,
  .restyled-shell .flow-voice-recorder .inline-voice-recorder { grid-template-columns: 39px minmax(74px, 1fr) 42px 37px 37px; gap: 3px; }
  .flow-voice-recorder .inline-voice-recorder button,
  .restyled-shell .flow-voice-recorder .inline-voice-recorder button { width: 34px; height: 34px; }
  .flow-premium-footer { min-height: 103px; margin-inline: -11px; }
}

/* AR-01.3 — one compact header contract for every internal user screen.
   The approved burger remains owned by the existing premium-page-menu rules. */
.premium-page-hero {
  width: auto;
  height: 128px;
  min-height: 128px;
  margin-bottom: 9px;
  background: #03090c;
}
.premium-page-hero::before,
.premium-page-hero::after {
  left: -12%;
  width: 124%;
  height: 88px;
  border-top-color: rgba(255, 122, 0, .48);
  background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 12px, rgba(255, 122, 0, .1) 13px 14px, transparent 15px 22px);
  filter: none;
}
.premium-page-hero::before { top: 25px; transform: rotate(-6deg); opacity: .82; }
.premium-page-hero::after { top: 61px; transform: rotate(6deg) scaleY(-1); opacity: .48; }
.premium-page-token {
  top: 22px;
  left: 16px;
  transform: none;
}
.premium-page-token .brand-avatar {
  width: 76px;
  height: 76px;
  box-shadow: 0 0 7px #ff8500, 0 0 20px rgba(255, 133, 0, .58);
}
.premium-page-wave { display: none; }
.premium-page-note-one {
  top: 99px;
  left: 37px;
  font-size: 21px;
  transform: rotate(-10deg);
}
.premium-page-note-two {
  top: 72px;
  right: 13px;
  font-size: 25px;
  transform: rotate(8deg);
}
.premium-page-note-three {
  top: 5px;
  left: 18px;
  font-size: 17px;
}
.premium-page-copy {
  top: 15px;
  right: 58px;
  bottom: auto;
  left: 104px;
  height: 104px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}
.premium-page-copy > span {
  margin-bottom: 2px;
  font-size: 9px;
  line-height: 1.1;
}
.premium-page-copy h1 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: clamp(20px, 5.6vw, 25px);
  line-height: 1.04;
  letter-spacing: -.025em;
}
.premium-page-copy p {
  display: -webkit-box;
  max-width: none;
  margin: 4px 0 0;
  overflow: hidden;
  color: #c7cdd1;
  font-size: clamp(11px, 3.15vw, 13px);
  line-height: 1.22;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (max-width: 380px) {
  .premium-page-hero { height: 128px; min-height: 128px; }
  .premium-page-token { top: 22px; left: 16px; }
  .premium-page-token .brand-avatar { width: 76px; height: 76px; }
  .premium-page-copy { top: 15px; right: 58px; bottom: auto; left: 104px; height: 104px; }
  .premium-page-copy h1 { font-size: clamp(20px, 5.6vw, 25px); }
  .premium-page-copy p { font-size: clamp(11px, 3.15vw, 13px); }
}

/* AR-01.4 — details mobile correction and the approved selection-page ending. */
.details-card > .flow-assistant-card { grid-column: 1 / -1; }
.details-card > .flow-input-row { grid-column: 1 / -1; }

.flow-assistant-card + .choice-grid { margin-top: 12px; }

.restyled-shell .flow-screen:has(> .flow-premium-footer) {
  min-height: 0;
  height: auto;
  display: block;
  padding-bottom: max(22px, env(safe-area-inset-bottom));
}
.restyled-shell .flow-screen:has(> .flow-premium-footer) > .flow-premium-footer {
  height: auto;
  min-height: 126px;
  flex: none;
}

/* AR-01.9 — MAX/Android must not expose the generic page pattern below Song Flow. */
@media (max-width: 699px) {
  body.pechka-internal-flow {
    background: #03090c;
  }
}

/* AR-01.5 — one artifact-free ending for selection and input flow screens. */
body:has(.restyled-shell .flow-premium-footer),
.restyled-shell:has(.flow-premium-footer),
.restyled-shell main:has(.flow-premium-footer) { background: #03090c; }
.restyled-shell:has(.flow-premium-footer),
.restyled-shell main:has(.flow-premium-footer) {
  min-height: 0;
  height: auto;
}
.restyled-shell main:has(.flow-premium-footer) {
  padding-bottom: 0;
}
.restyled-shell .flow-premium-footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 108%, rgba(95, 39, 6, .3), transparent 72%),
    linear-gradient(180deg, #03090c 0%, #02070a 54%, #03090c 100%);
}
.restyled-shell .flow-premium-footer::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 126px;
  background:
    radial-gradient(ellipse at 0 100%, rgba(95, 39, 6, .5), transparent 44%),
    radial-gradient(ellipse at 100% 100%, rgba(95, 39, 6, .5), transparent 44%),
    repeating-radial-gradient(ellipse at 50% 118%, transparent 0 18px, rgba(255, 122, 0, .13) 19px 20px, transparent 21px 31px);
  pointer-events: none;
}
.restyled-shell .flow-premium-footer > span { position: relative; z-index: 1; }

.restyled-shell .details-card textarea {
  padding-right: 14px;
  resize: none;
  scrollbar-width: thin;
  scrollbar-color: #ff7a00 transparent;
}
.restyled-shell .details-card textarea::-webkit-scrollbar { width: 5px; }
.restyled-shell .details-card textarea::-webkit-scrollbar-track {
  margin-block: 10px;
  background: transparent;
}
.restyled-shell .details-card textarea::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(#f9b821, #ff7a00);
  box-shadow: 0 0 5px rgba(255, 122, 0, .4);
}
.restyled-shell .details-card textarea::-webkit-scrollbar-corner { background: transparent; }
.restyled-shell .details-mic { right: 29px; bottom: 23px; }

/* AR-01.6 — one branded scrollbar for every user-owned internal scroll area. */
.restyled-shell :is(textarea, .lyrics-copy) {
  scrollbar-width: thin;
  scrollbar-color: #ff7a00 transparent;
}
.restyled-shell :is(textarea, .lyrics-copy)::-webkit-scrollbar { width: 5px; height: 5px; }
.restyled-shell :is(textarea, .lyrics-copy)::-webkit-scrollbar-track {
  margin-block: 10px;
  background: transparent;
}
.restyled-shell :is(textarea, .lyrics-copy)::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(#f9b821, #ff7a00);
  box-shadow: 0 0 5px rgba(255, 122, 0, .4);
}
.restyled-shell :is(textarea, .lyrics-copy)::-webkit-scrollbar-corner { background: transparent; }

/* MAX TEST r93 — query editor scrollbar stays inside the field and uses the brand accent. */
.app-overlay-root .home-assistant-field textarea {
  padding-right: 17px;
  scrollbar-width: thin;
  scrollbar-color: #ff7a00 transparent;
}
.app-overlay-root .home-assistant-field textarea::-webkit-scrollbar { width: 5px; }
.app-overlay-root .home-assistant-field textarea::-webkit-scrollbar-track {
  margin-block: 11px;
  background: transparent;
}
.app-overlay-root .home-assistant-field textarea::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(#f9b821, #ff7a00);
  box-shadow: 0 0 5px rgba(255, 122, 0, .4);
}
.app-overlay-root .home-assistant-field textarea::-webkit-scrollbar-corner { background: transparent; }

.app-overlay-root .payment-redirect-dialog {
  width: min(100%, 390px);
  margin: auto;
  text-align: left;
}
.app-overlay-root .purchase-dialog.payment-redirect-dialog .purchase-brand {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}
.app-overlay-root .purchase-dialog.payment-redirect-dialog > h2 { text-align: center; }
.app-overlay-root .payment-redirect-dialog .dialog-actions { margin-top: 18px; }

/* AR-01.7 — compact final card: content starts immediately and ends at its actions. */
.restyled-shell .final-song-card dl { margin: 0 0 10px; }
.restyled-shell .final-song-card h3 {
  min-height: 38px;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 0;
}
.restyled-shell .lyrics-editor-card > header { padding-bottom: 8px; }
.restyled-shell .lyrics-editor-card .lyrics-editor { margin-top: 10px; }
.restyled-shell .final-lyrics-open {
  flex: 1;
  min-height: 38px;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
}
.restyled-shell .final-lyrics-open:hover,
.restyled-shell .final-lyrics-open:focus-visible { color: #ff9a32; outline: 0; }
.restyled-shell .final-lyrics-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.restyled-shell .final-lyrics-actions button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 5px;
  border: 0;
  border-radius: 0;
  color: #ff7a00;
  background: transparent;
  cursor: pointer;
  transition: transform .16s ease;
}
.restyled-shell .final-lyrics-actions .icon { width: 22px; height: 22px; }
.restyled-shell .final-lyrics-actions button:hover,
.restyled-shell .final-lyrics-actions button:focus-visible {
  transform: scale(1.1);
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
}
.restyled-shell .final-lyrics-actions button:disabled { opacity: .5; cursor: wait; }
.restyled-shell .final-song-card .final-unrefined-value {
  color: #fff;
  font-family: inherit;
  font-size: 1.18em;
  font-weight: 700;
  line-height: 1;
  padding-left: 7px;
}
.restyled-shell .final-song-card .final-parameter:hover .final-unrefined-value,
.restyled-shell .final-song-card .final-parameter:focus-visible .final-unrefined-value,
.restyled-shell .final-song-card .final-parameter:active .final-unrefined-value {
  color: #ff7a00;
}
.restyled-shell .final-copy { padding-right: 12px; }
body:has(.restyled-shell .final-song-card),
.restyled-shell:has(.final-song-card),
.restyled-shell main:has(.final-song-card) { background: #03090c; }
.restyled-shell:has(.final-song-card),
.restyled-shell main:has(.final-song-card) { min-height: 0; }
.restyled-shell main:has(.final-song-card) { padding-bottom: 0; }
.restyled-shell .flow-screen:has(.final-song-card) {
  min-height: 0;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.restyled-shell .flow-screen:has(.final-song-card)::after { display: none; }
.restyled-shell .flow-screen:has(.final-song-card) > .bottom-actions {
  position: static;
  padding-bottom: 0;
}

@media (max-width: 699px) {
  body.pechka-internal-flow {
    min-height: 0;
    overscroll-behavior-y: none;
  }
  body.pechka-internal-flow .restyled-shell.internal-flow-shell,
  body.pechka-internal-flow .restyled-shell.internal-flow-shell main {
    min-height: 0;
    height: auto;
    background: #03090c;
  }
  body.pechka-internal-flow .restyled-shell.internal-flow-shell main { padding-bottom: 0; }
  body.pechka-internal-flow .restyled-shell.internal-flow-shell .flow-screen {
    min-height: 0;
    height: auto;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
  }
  body.pechka-internal-flow .restyled-shell .flow-screen-with-footer {
    display: block;
  }
  body.pechka-internal-flow .restyled-shell .flow-screen-with-footer > .flow-premium-footer {
    height: auto;
    min-height: 126px;
    flex: none;
  }
  body.pechka-internal-flow .restyled-shell .final-flow-screen {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  body.pechka-internal-flow .restyled-shell .final-flow-screen::after { display: none; }
  body.pechka-internal-flow .restyled-shell .final-flow-screen > .bottom-actions {
    position: static;
    padding-bottom: 0;
  }
  .restyled-shell .final-copy {
    max-height: 250px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.pechka-internal-flow .restyled-shell .lyrics-flow-screen .lyrics-editor {
    min-height: 420px;
    max-height: none;
    overflow-y: hidden;
    resize: none;
  }
}

@media (max-width: 380px) {
  .details-card {
    margin-top: 9px;
    padding: 14px;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px 10px;
  }
  .details-card > .icon { width: 28px; height: 28px; }
  .details-card h2 { font-size: 17px; line-height: 1.15; }
  .details-card p { font-size: 12px; line-height: 1.32; }
  .details-card textarea { min-height: 104px; padding-right: 14px; }
  .details-mic { right: 25px; bottom: 19px; }
  .flow-assistant-card + .choice-grid { margin-top: 9px; }
  .restyled-shell .flow-screen:has(> .flow-premium-footer) > .flow-premium-footer { min-height: 103px; }
  body.pechka-internal-flow .restyled-shell .flow-screen-with-footer > .flow-premium-footer { min-height: 103px; }
  .restyled-shell .flow-premium-footer::before { height: 103px; }
  .restyled-shell .final-copy { max-height: 230px; }
}

/* R91 — focused result, packages and personal library polish. */
.restyled-shell .result-ready-note {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 13px;
  padding: 14px;
  background: rgba(7, 19, 26, .56);
}
.restyled-shell .result-ready-note > .result-ready-logo {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 1px solid rgba(255, 122, 0, .42);
  border-radius: 50%;
  color: inherit;
  background: rgba(3, 9, 12, .72);
  box-shadow: 0 0 16px rgba(255, 122, 0, .26);
}
.restyled-shell .result-ready-logo .brand-avatar { width: 50px; height: 50px; }
.restyled-shell .result-ready-note h1 { margin: 0 0 5px; color: #fff; font-size: 20px; line-height: 1.12; }
.restyled-shell .result-ready-note p { margin: 0; color: #c7cdd1; font-size: 13px; font-weight: 500; line-height: 1.35; }

.restyled-shell .preview-play {
  border: 1px solid rgba(255, 142, 47, .9);
  color: #fff;
  background: rgba(255, 122, 0, .48);
  box-shadow: inset 0 1px 0 rgba(255, 224, 191, .28), 0 0 18px rgba(255, 122, 0, .42);
  font-size: 27px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}
.restyled-shell .preview-play:hover { background: rgba(255, 122, 0, .58); }
.restyled-shell .preview-timeline > i { right: 7px; left: auto; }

.restyled-shell .locked-explanation.payment-pending {
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  border-color: rgba(132, 169, 183, .2);
  background: rgba(7, 19, 26, .42);
  box-shadow: 0 0 15px rgba(132, 169, 183, .025);
}
.restyled-shell .locked-explanation.payment-pending > span {
  width: 46px;
  height: 46px;
  color: #ff8a20;
  background: rgba(95, 39, 6, .22);
  box-shadow: 0 0 17px rgba(255, 122, 0, .18);
}
.restyled-shell .locked-explanation.payment-pending > span .icon { width: 28px; height: 28px; }
.restyled-shell .locked-explanation.payment-not-completed {
  border-color: rgba(255, 122, 0, .24);
  background: rgba(56, 27, 8, .26);
}
.restyled-shell .locked-explanation.payment-not-completed > span {
  color: #ff9a45;
  background: rgba(95, 39, 6, .24);
}
.restyled-shell .payment-check-button { min-height: 52px; }
.restyled-shell .payment-status-dialog { width: min(360px, calc(100vw - 32px)); }
.restyled-shell .payment-status-dialog .dialog-icon .icon { width: 30px; height: 30px; }
.restyled-shell .payment-status-dialog .voice-spinner { width: 18px; height: 18px; }
.restyled-shell .paywall-actions .packages-button:only-child {
  min-height: 52px;
  border-color: rgba(255, 122, 0, .72);
  background: rgba(95, 39, 6, .24);
  box-shadow: 0 0 17px rgba(255, 122, 0, .15);
}
.restyled-shell .paywall-actions .packages-button:only-child:hover,
.restyled-shell .paywall-actions .packages-button:only-child:focus-visible {
  background: rgba(95, 39, 6, .36);
  box-shadow: 0 0 21px rgba(255, 122, 0, .25);
}

.restyled-shell .plans-tip,
.restyled-shell .my-songs-note {
  background: rgba(7, 19, 26, .48);
  box-shadow: 0 0 15px rgba(132, 169, 183, .025);
}
.restyled-shell .plans-tip .icon { flex: 0 0 auto; color: #ff7a00; }
.restyled-shell .settings-card:has([data-action="toggle-ready-notifications"]) .setting-row + .setting-row {
  margin-top: 5px;
  padding-top: 5px;
}
.restyled-shell .settings-card:has([data-action="toggle-voice"]) .microphone-permission {
  margin-top: 12px;
  padding-top: 14px;
}
body:has(.restyled-shell .plans-screen),
.restyled-shell:has(.plans-screen),
.restyled-shell main:has(.plans-screen) { min-height: 0; }
.restyled-shell main:has(.plans-screen) { padding-bottom: 0; }
.restyled-shell .plans-screen { min-height: 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); overflow: hidden; }

.app-shell.restyled-shell:has(.songs-library-screen),
.songs-library-screen,
.songs-library-screen > .premium-page-hero { overflow: visible; }
.songs-library-screen { min-height: 100svh; display: flex; flex-direction: column; }
.songs-library-screen .premium-page-hero:has(.songs-count-panel) .premium-page-copy { right: 154px; }
.songs-library-screen .premium-page-hero:has(.songs-count-panel) .premium-page-note-two { display: none; }
.songs-mobile-subtitle-break { display: none; }
.songs-count-panel {
  position: absolute;
  z-index: 5;
  top: 35px;
  right: 52px;
  width: 102px;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}
.songs-count-badge {
  min-width: 66px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 122, 0, .38);
  border-radius: 16px;
  color: #fff;
  background: rgba(7, 19, 26, .78);
  box-shadow: 0 0 16px rgba(255, 122, 0, .16);
}
.songs-count-badge > .icon { width: 20px; height: 20px; color: #ff7a00; }
.songs-count-badge b { min-width: 24px; color: #fff; font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums; }
.songs-count-panel > small { max-width: 102px; color: #9ca5aa; font-size: 8px; line-height: 1.18; }
.songs-library-screen .song-open { grid-template-columns: 82px minmax(0, 1fr); }
.restyled-shell .song-list-play {
  border: 1px solid rgba(255, 142, 47, .9);
  color: #fff;
  background: rgba(255, 122, 0, .48);
  box-shadow: inset 0 1px 0 rgba(255, 224, 191, .28), 0 0 18px rgba(255, 122, 0, .42);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}
.restyled-shell .song-list-play:not(:disabled):hover { background: rgba(255, 122, 0, .58); }
.songs-library-screen .song-list-play { right: 16px; }
.songs-carousel { display: grid; gap: 12px; }
.songs-carousel .songs-list { min-height: 100px; }
.songs-carousel-controls {
  display: grid;
  grid-template-columns: 52px minmax(64px, 1fr) 52px;
  gap: 12px;
  align-items: center;
  max-width: 238px;
  margin: 0 auto 12px;
}
.songs-carousel-controls button {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 122, 0, .62);
  border-radius: 18px;
  color: #ff7a00;
  background: rgba(7, 19, 26, .72);
  box-shadow: 0 0 15px rgba(255, 122, 0, .12);
  cursor: pointer;
}
.songs-carousel-controls button .icon { width: 25px; height: 25px; }
.songs-carousel-controls button:not(:disabled):hover,
.songs-carousel-controls button:not(:disabled):focus-visible { background: rgba(95, 39, 6, .3); box-shadow: 0 0 20px rgba(255, 122, 0, .3); }
.songs-carousel-controls button:disabled { opacity: .34; cursor: default; }
.songs-carousel-controls > span { display: flex; align-items: baseline; justify-content: center; gap: 4px; color: #fff; }
.songs-carousel-controls > span b { font-size: 19px; }
.songs-carousel-controls > span small { color: #c7cdd1; font-size: 12px; }
.songs-library-screen > .single-back { margin-bottom: 0; }
.songs-library-screen > .flow-premium-footer { margin-top: 0; }
.songs-footer {
  min-height: 160px;
  margin-inline: -24px;
}
.songs-footer::before {
  transform: scale(1.55);
  transform-origin: center bottom;
}
.songs-footer { flex: 1 0 160px; margin-bottom: -22px; }
.restyled-shell .premium-page-hero + :is(.support-contact-note, .documents-info-note) { margin-top: -6px; }
.restyled-shell .documents-info-note { margin-bottom: 10px; padding: 10px 14px; align-items: center; }
.restyled-shell :is(.support-contact-note, .support-context-note, .settings-service-note, .documents-info-note) {
  border-color: transparent;
  color: rgba(199, 205, 209, .72);
  background: rgba(7, 19, 26, .26);
  box-shadow: 0 0 14px rgba(132, 169, 183, .018);
}
.restyled-shell :is(.support-contact-note, .support-context-note, .settings-service-note, .documents-info-note)::before { opacity: .5; }

.restyled-shell .choice[data-choice-value="Инструментальная классика"] > span:last-child { font-size: 13px; }

@media (max-width: 699px) {
  .songs-count-panel { top: 39px; }
  .songs-mobile-subtitle-break { display: block; }
  .restyled-shell .choice[data-choice-value="Инструментальная классика"] > span:last-child { font-size: 11px; }
}

@media (max-width: 380px) {
  .restyled-shell .result-ready-note { grid-template-columns: 50px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .restyled-shell .result-ready-note > .result-ready-logo { width: 48px; height: 48px; }
  .restyled-shell .result-ready-logo .brand-avatar { width: 44px; height: 44px; }
  .restyled-shell .result-ready-note h1 { font-size: 18px; }
  .songs-count-panel { top: 37px; right: 47px; width: 96px; }
  .songs-count-badge { min-width: 62px; min-height: 47px; padding-inline: 8px; }
  .songs-count-badge b { font-size: 25px; }
  .songs-library-screen .premium-page-hero:has(.songs-count-panel) .premium-page-copy { right: 145px; }
}

/* R113 — complete light theme. Dark-theme rules above stay untouched. */
html[data-theme="light"] {
  color-scheme: light;
  --accent: #c94f00;
  --accent-soft: #fbe4d1;
  --accent-glow: #e98225;
  --bg: #f7f1e9;
  --bg-pattern: rgba(201, 79, 0, .075);
  --card: rgba(255, 252, 248, .96);
  --card-solid: #fffdfa;
  --card-muted: #f3ebe2;
  --line: #d8c9bc;
  --text: #201b18;
  --muted: #6d625b;
  --shadow: 0 14px 34px rgba(69, 49, 35, .11);
  --header: rgba(255, 252, 248, .96);
  --flow-bg: #f7f1e9;
  background: var(--bg);
}
html[data-theme="light"] body {
  color: var(--text);
  background:
    radial-gradient(circle at 12% 8%, var(--bg-pattern) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 25%, var(--bg-pattern) 0 3px, transparent 4px),
    linear-gradient(150deg, #f9f4ed, #f4ece3);
}

/* Home. */
html[data-theme="light"] .coded-home-shell {
  --home-bg: #f7f1e9;
  --home-surface: #fffdfa;
  --home-card: #fffaf4;
  --home-line: rgba(118, 95, 80, .28);
  --home-text: #201b18;
  --home-muted: #6d625b;
  --home-orange: #c94f00;
  --home-gold: #df7a20;
  color: var(--home-text);
  background: var(--home-bg);
  box-shadow: 0 0 54px rgba(69, 49, 35, .12);
}
html[data-theme="light"] .coded-home-shell main { background: var(--home-bg); }
html[data-theme="light"] .coded-home-hero {
  background:
    radial-gradient(circle at 50% 38%, rgba(225, 104, 17, .16), transparent 31%),
    radial-gradient(ellipse at 4% 70%, rgba(225, 104, 17, .09), transparent 43%),
    radial-gradient(ellipse at 96% 72%, rgba(225, 104, 17, .09), transparent 43%),
    #f7f1e9;
}
html[data-theme="light"] .coded-home-hero::before,
html[data-theme="light"] .coded-home-hero::after {
  border-top-color: rgba(201, 79, 0, .38);
  background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 12px, rgba(201, 79, 0, .09) 13px 14px, transparent 15px 21px);
  filter: none;
}
html[data-theme="light"] .coded-home-shell .coded-welcome,
html[data-theme="light"] .coded-home-shell .coded-home-actions .action-card {
  border-color: var(--home-line);
  color: var(--home-text);
  background: rgba(255, 253, 250, .94);
  box-shadow: 0 10px 25px rgba(69, 49, 35, .08);
}
html[data-theme="light"] .coded-home-shell .coded-home-actions .action-card:hover,
html[data-theme="light"] .coded-home-shell .coded-home-actions .action-card:focus-visible {
  border-color: var(--home-orange);
  background: #fff4e9;
  box-shadow: 0 0 0 1px rgba(201, 79, 0, .2), 0 0 20px rgba(201, 79, 0, .12);
}
html[data-theme="light"] .coded-home-shell .coded-benefits span,
html[data-theme="light"] .coded-home-shell .coded-home-footer > span:not(.coded-voice-arrow),
html[data-theme="light"] .coded-home-shell .home-recording-meta b { color: var(--home-muted); }
html[data-theme="light"] .coded-home-shell .coded-benefits .icon { color: var(--home-orange); }
html[data-theme="light"] .coded-home-shell .home-recording-meta small { color: #81766f; }
html[data-theme="light"] .coded-home-shell .coded-home-footer {
  background:
    radial-gradient(ellipse at 0 100%, rgba(225, 104, 17, .11), transparent 44%),
    radial-gradient(ellipse at 100% 100%, rgba(225, 104, 17, .11), transparent 44%),
    repeating-radial-gradient(ellipse at 50% 118%, transparent 0 15px, rgba(201, 79, 0, .08) 16px 17px, transparent 18px 25px);
}
html[data-theme="light"] .coded-home-shell .popover-menu {
  color: var(--home-text);
  border-color: rgba(201, 79, 0, .3);
  background: rgba(255, 253, 250, .98);
  box-shadow: var(--shadow);
}
html[data-theme="light"] .coded-home-shell .popover-menu button:hover { background: #fbe4d1; }
html[data-theme="light"] .coded-home-menu:hover,
html[data-theme="light"] .coded-home-menu:focus-visible,
html[data-theme="light"] .coded-home-shell .coded-home-footer .home-voice-button:hover,
html[data-theme="light"] .coded-home-shell .coded-home-footer .home-voice-button:focus-visible {
  background: rgba(201, 79, 0, .1);
}

/* First Song Flow screen. */
html[data-theme="light"] .occasion-premium-shell {
  --occasion-bg: #f7f1e9;
  --occasion-surface: #fffdfa;
  --occasion-card: #fffaf4;
  --occasion-line: rgba(118, 95, 80, .3);
  --occasion-orange: #c94f00;
  --occasion-gold: #df7a20;
  --occasion-glow: #e98225;
  --occasion-muted: #6d625b;
  color: var(--text);
  background: var(--occasion-bg);
  box-shadow: 0 0 54px rgba(69, 49, 35, .12);
}
html[data-theme="light"] .occasion-premium-shell main,
html[data-theme="light"] .occasion-premium,
html[data-theme="light"] .occasion-premium-content {
  color: var(--text);
  background-color: var(--occasion-bg);
}
html[data-theme="light"] .occasion-premium-hero {
  color: var(--text);
  background:
    radial-gradient(circle at 50% 33%, rgba(225, 104, 17, .14), transparent 31%),
    radial-gradient(ellipse at 8% 76%, rgba(225, 104, 17, .08), transparent 48%),
    radial-gradient(ellipse at 92% 71%, rgba(225, 104, 17, .08), transparent 48%),
    #f7f1e9;
}
html[data-theme="light"] .occasion-premium-copy h1,
html[data-theme="light"] .occasion-premium-assistant b,
html[data-theme="light"] .occasion-premium-choice > span:nth-child(2) { color: var(--text); text-shadow: none; }
html[data-theme="light"] .occasion-premium-copy p { color: var(--muted); }
html[data-theme="light"] .occasion-premium-assistant,
html[data-theme="light"] .occasion-premium-choice,
html[data-theme="light"] .occasion-premium-input input,
html[data-theme="light"] .occasion-premium-recorder .inline-voice-recorder,
html[data-theme="light"] .occasion-premium .voice-status {
  border-color: var(--line);
  color: var(--text);
  background: rgba(255, 253, 250, .96);
  box-shadow: 0 10px 25px rgba(69, 49, 35, .08);
}
html[data-theme="light"] .occasion-premium-choice:hover,
html[data-theme="light"] .occasion-premium-choice:focus-visible,
html[data-theme="light"] .occasion-premium-choice.selected {
  border-color: var(--accent);
  background: #fff2e6;
  box-shadow: 0 0 0 1px rgba(201, 79, 0, .18), 0 0 18px rgba(201, 79, 0, .11);
}
html[data-theme="light"] .occasion-premium-input input::placeholder { color: #81766f; }
html[data-theme="light"] .occasion-premium-footer {
  background:
    radial-gradient(ellipse at 0 100%, rgba(225, 104, 17, .1), transparent 44%),
    radial-gradient(ellipse at 100% 100%, rgba(225, 104, 17, .1), transparent 44%),
    repeating-radial-gradient(ellipse at 50% 118%, transparent 0 18px, rgba(201, 79, 0, .08) 19px 20px, transparent 21px 31px);
}
html[data-theme="light"] .occasion-premium-shell .popover-menu {
  color: var(--text);
  border-color: rgba(201, 79, 0, .3);
  background: rgba(255, 253, 250, .98);
}

/* Internal pages, Song Flow, commerce, documents, support and settings. */
html[data-theme="light"] .restyled-shell {
  --accent: #c94f00;
  --accent-soft: #fbe4d1;
  --accent-glow: #e98225;
  --bg: #f7f1e9;
  --flow-bg: #f7f1e9;
  --card: rgba(255, 252, 248, .96);
  --card-solid: #fffdfa;
  --card-muted: #f3ebe2;
  --line: #d8c9bc;
  --text: #201b18;
  --muted: #6d625b;
  --shadow: 0 14px 34px rgba(69, 49, 35, .11);
  --occasion-line: rgba(118, 95, 80, .3);
  --occasion-orange: #c94f00;
  --occasion-gold: #df7a20;
  --occasion-muted: #6d625b;
  color: var(--text);
  background: var(--bg);
  border-inline-color: rgba(201, 79, 0, .08);
  box-shadow: 0 0 54px rgba(69, 49, 35, .12);
}
html[data-theme="light"] .restyled-shell main,
html[data-theme="light"] .restyled-shell .flow-screen,
html[data-theme="light"] .restyled-shell .plans-screen,
html[data-theme="light"] body.pechka-internal-flow .restyled-shell.internal-flow-shell,
html[data-theme="light"] body.pechka-internal-flow .restyled-shell.internal-flow-shell main {
  color: var(--text);
  background:
    radial-gradient(ellipse at 0 56%, rgba(225, 104, 17, .075), transparent 36%),
    radial-gradient(ellipse at 100% 82%, rgba(225, 104, 17, .06), transparent 38%),
    var(--bg);
}
html[data-theme="light"] body.pechka-internal-flow { background: var(--bg); }
html[data-theme="light"] .premium-page-hero {
  color: var(--text);
  background:
    radial-gradient(circle at 50% 33%, rgba(225, 104, 17, .15), transparent 29%),
    radial-gradient(ellipse at 0 80%, rgba(225, 104, 17, .09), transparent 45%),
    radial-gradient(ellipse at 100% 80%, rgba(225, 104, 17, .09), transparent 45%),
    #f7f1e9;
}
html[data-theme="light"] .premium-page-hero::before,
html[data-theme="light"] .premium-page-hero::after {
  border-top-color: rgba(201, 79, 0, .34);
  background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 12px, rgba(201, 79, 0, .08) 13px 14px, transparent 15px 22px);
  filter: none;
}
html[data-theme="light"] .premium-page-copy h1 { color: var(--text); text-shadow: none; }
html[data-theme="light"] .premium-page-copy p { color: var(--muted); }
html[data-theme="light"] .premium-page-copy > span,
html[data-theme="light"] .premium-page-menu,
html[data-theme="light"] .premium-page-note { color: var(--accent); }
html[data-theme="light"] .restyled-shell .popover-menu {
  color: var(--text);
  border-color: rgba(201, 79, 0, .3);
  background: rgba(255, 253, 250, .98);
  box-shadow: var(--shadow);
}
html[data-theme="light"] .restyled-shell .popover-menu button { color: var(--text); }
html[data-theme="light"] .restyled-shell .popover-menu button:hover { background: var(--accent-soft); }
html[data-theme="light"] .restyled-shell :is(
  .action-card, .choice, .details-card, .lyrics-card, .final-song-card,
  .generation-steps, .result-ready-note, .locked-song-card, .locked-explanation,
  .my-songs-note, .song-list-card, .plans-tip, .billing-history, .steps li,
  .faq-item, .support-list button, .support-form, .support-context,
  .settings-card, .document-list button, .document-list a, .tip-card,
  .empty-state, .legal-consent, .welcome-card, .preview-state, .voice-status
) {
  border-color: var(--line);
  color: var(--text);
  background: linear-gradient(135deg, rgba(255, 253, 250, .98), rgba(249, 242, 234, .98));
  box-shadow: 0 10px 28px rgba(69, 49, 35, .09);
}
html[data-theme="light"] .restyled-shell :is(
  .choice:hover, .choice:focus-visible, .choice.selected,
  .action-card:not(:disabled):hover, .steps li.available:hover,
  .faq-item:hover, .faq-item:focus-within, .faq-item.open, .support-list button:hover,
  .document-list button:hover, .document-list a:hover,
  .theme-picker button.selected, .package-option:not(:disabled):hover,
  .package-option:not(:disabled):focus-visible, .package-option.selected,
  .single-back .secondary-button:hover, .single-back .secondary-button:focus-visible
) {
  border-color: var(--accent);
  color: var(--text);
  background: linear-gradient(135deg, #fff7ef, #f9e4d2);
  box-shadow: 0 0 0 1px rgba(201, 79, 0, .2), 0 0 20px rgba(201, 79, 0, .12);
}
html[data-theme="light"] .restyled-shell :is(.action-card small, .choice small, .details-card p, .my-songs-note, .support-form small, .document-list small, .tip-card, .locked-explanation p, .music-generation-hero p),
html[data-theme="light"] .restyled-shell .faq-answer p { color: var(--muted); }
html[data-theme="light"] .restyled-shell .faq-question,
html[data-theme="light"] .restyled-shell :is(.settings-card h2, .billing-section h2, .lyrics-card h2, .final-song-card h2) { color: var(--text); }
html[data-theme="light"] .restyled-shell .faq-answer { border-top-color: var(--line); }
html[data-theme="light"] .restyled-shell :is(.package-option, .theme-picker button, .secondary-button) {
  border-color: var(--line);
  color: var(--text);
  background: var(--card-solid);
}
html[data-theme="light"] .restyled-shell :is(
  .flow-input-row input, .details-card textarea, .lyrics-command textarea,
  .lyrics-editor, .support-form select, .support-form textarea,
  .support-form input, .access-input
) {
  border-color: var(--line);
  color: var(--text);
  background: var(--card-solid);
  caret-color: var(--accent);
  box-shadow: inset 0 1px 6px rgba(69, 49, 35, .07);
}
html[data-theme="light"] .restyled-shell input::placeholder,
html[data-theme="light"] .restyled-shell textarea::placeholder { color: #81766f; }
html[data-theme="light"] .restyled-shell .mic-button:hover,
html[data-theme="light"] .restyled-shell .mic-button:focus-visible { background: rgba(201, 79, 0, .1); }
html[data-theme="light"] .restyled-shell .inline-voice-recorder {
  color: var(--text);
  background: var(--card-solid);
  border-color: rgba(201, 79, 0, .36);
}
html[data-theme="light"] .restyled-shell .inline-voice-recorder button,
html[data-theme="light"] .restyled-shell .inline-voice-recorder .voice-stop,
html[data-theme="light"] .restyled-shell .inline-voice-recorder .voice-quick {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(201, 79, 0, .26);
}
html[data-theme="light"] .restyled-shell .inline-voice-recorder > b { color: var(--muted); border-left-color: var(--line); }
html[data-theme="light"] .restyled-shell .bottom-actions,
html[data-theme="light"] .restyled-shell .plans-actions { background: linear-gradient(transparent, rgba(247, 241, 233, .98) 24%); }
html[data-theme="light"] .restyled-shell .result-ready-note,
html[data-theme="light"] .restyled-shell .locked-explanation.payment-pending,
html[data-theme="light"] .restyled-shell :is(.plans-tip, .my-songs-note),
html[data-theme="light"] .restyled-shell :is(.support-contact-note, .support-context-note, .settings-service-note, .documents-info-note) {
  color: var(--muted);
  background: rgba(245, 237, 228, .72);
  box-shadow: 0 0 14px rgba(69, 49, 35, .035);
}
html[data-theme="light"] .restyled-shell .result-ready-note h1 { color: var(--text); }
html[data-theme="light"] .restyled-shell .result-ready-note p { color: var(--muted); }
html[data-theme="light"] .restyled-shell .result-ready-note > .result-ready-logo {
  background: var(--card-solid);
  border-color: rgba(201, 79, 0, .34);
}
html[data-theme="light"] .songs-count-badge {
  color: var(--text);
  background: rgba(255, 253, 250, .9);
  border-color: rgba(201, 79, 0, .32);
}
html[data-theme="light"] .songs-count-badge b,
html[data-theme="light"] .songs-carousel-controls > span { color: var(--text); }
html[data-theme="light"] .songs-count-panel > small,
html[data-theme="light"] .songs-carousel-controls > span small { color: var(--muted); }
html[data-theme="light"] .songs-carousel-controls button {
  color: var(--accent);
  background: var(--card-solid);
  border-color: rgba(201, 79, 0, .42);
}
html[data-theme="light"] .songs-carousel-controls button:not(:disabled):hover,
html[data-theme="light"] .songs-carousel-controls button:not(:disabled):focus-visible { background: var(--accent-soft); }
html[data-theme="light"] .restyled-shell .flow-premium-footer {
  background:
    radial-gradient(ellipse at 50% 108%, rgba(225, 104, 17, .09), transparent 72%),
    linear-gradient(180deg, rgba(247, 241, 233, 0), #f7f1e9 58%);
}
html[data-theme="light"] .restyled-shell .flow-premium-footer::before {
  background:
    radial-gradient(ellipse at 0 100%, rgba(225, 104, 17, .1), transparent 44%),
    radial-gradient(ellipse at 100% 100%, rgba(225, 104, 17, .1), transparent 44%),
    repeating-radial-gradient(ellipse at 50% 118%, transparent 0 18px, rgba(201, 79, 0, .08) 19px 20px, transparent 21px 31px);
}
html[data-theme="light"] .restyled-shell .final-lyrics-open,
html[data-theme="light"] .restyled-shell .final-song-card .final-unrefined-value { color: var(--text); }
html[data-theme="light"] body:has(.restyled-shell .flow-premium-footer),
html[data-theme="light"] .restyled-shell:has(.flow-premium-footer),
html[data-theme="light"] .restyled-shell main:has(.flow-premium-footer),
html[data-theme="light"] body:has(.restyled-shell .final-song-card),
html[data-theme="light"] .restyled-shell:has(.final-song-card),
html[data-theme="light"] .restyled-shell main:has(.final-song-card) { background: var(--bg); }

/* Dialogs and exceptional states. */
html[data-theme="light"] .dialog-scrim { background: rgba(42, 33, 27, .42); }
html[data-theme="light"] .voice-dialog,
html[data-theme="light"] .voice-dialog.pechka-review,
html[data-theme="light"] .voice-dialog.pechka-voice-error {
  color: var(--text);
  border-color: rgba(201, 79, 0, .32);
  background: linear-gradient(150deg, #fffdfa, #f7eee5);
  box-shadow: 0 28px 70px rgba(42, 33, 27, .28), 0 0 25px rgba(201, 79, 0, .1);
}
html[data-theme="light"] .voice-dialog.pechka-review h2,
html[data-theme="light"] .voice-dialog.pechka-voice-error h2 { color: var(--text); }
html[data-theme="light"] .voice-dialog.pechka-review > p,
html[data-theme="light"] .voice-dialog.pechka-voice-error > p { color: var(--muted); }
html[data-theme="light"] .voice-dialog.pechka-review textarea,
html[data-theme="light"] .voice-dialog.pechka-voice-error textarea {
  color: var(--text);
  border-color: var(--line);
  background: var(--card-solid);
}
html[data-theme="light"] .voice-dialog.pechka-review .secondary-button {
  color: var(--text);
  border-color: var(--line);
  background: var(--card-solid);
}
html[data-theme="light"] .maintenance-shell {
  color: var(--text);
  background:
    radial-gradient(circle at 50% 13%, rgba(225, 104, 17, .13), transparent 29%),
    linear-gradient(180deg, #f9f4ed, #f4ece3);
}
html[data-theme="light"] .maintenance-card,
html[data-theme="light"] .voice-dialog.pechka-voice-error.microphone-disconnected {
  color: var(--text);
  background: linear-gradient(150deg, #fffdfa, #f7eee5);
  box-shadow: 0 22px 60px rgba(69, 49, 35, .16);
}
html[data-theme="light"] .maintenance-brand-copy > p,
html[data-theme="light"] .maintenance-card > p,
html[data-theme="light"] .maintenance-thanks,
html[data-theme="light"] .maintenance-countdown-card span,
html[data-theme="light"] .voice-dialog.pechka-voice-error.microphone-disconnected > p { color: var(--muted); }

@media (max-width: 699px) {
  html[data-theme="light"] body.pechka-internal-flow,
  html[data-theme="light"] body.pechka-internal-flow .restyled-shell.internal-flow-shell,
  html[data-theme="light"] body.pechka-internal-flow .restyled-shell.internal-flow-shell main { background: var(--bg); }
}

/* R114 — shared referral flow. */
.referral-entry {
  width: 100%; min-height: 64px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 22px;
  align-items: center; gap: 11px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 20px;
  color: var(--text); text-align: left; background: var(--card); box-shadow: 0 8px 24px rgba(0, 0, 0, .11); cursor: pointer;
}
.referral-entry > .icon:first-child { width: 30px; height: 30px; color: var(--accent); }
.referral-entry > .icon:last-child { width: 22px; height: 22px; color: var(--accent); }
.referral-entry > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.referral-entry b { font-size: 16px; line-height: 1.15; }
.referral-entry small { color: var(--muted); font-size: 11px; line-height: 1.3; }
.referral-entry:hover, .referral-entry:focus-visible {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--card-solid));
  box-shadow: 0 0 21px color-mix(in srgb, var(--accent) 23%, transparent); outline: none;
}
.songs-referral-entry { margin: 2px 0 13px; }
.plans-referral-entry { margin: 13px 0 0; }
.referral-scrim {
  z-index: 120; width: auto; align-items: center; justify-items: center; overflow-y: auto;
  padding-block: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-bottom));
}
.referral-dialog { position: relative; max-height: calc(100svh - 32px); overflow-y: auto; }
.referral-close {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 0; color: var(--muted); background: transparent;
  font: 500 25px/1 system-ui; cursor: pointer; transition: color .16s ease, transform .16s ease;
}
.referral-close:hover, .referral-close:focus-visible { color: var(--accent); transform: scale(1.12); outline: none; }
.referral-dialog > p { padding-right: 26px; }
.referral-reward {
  display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 12px;
  margin: 0 0 15px; padding: 12px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 18px; background: color-mix(in srgb, var(--accent) 8%, var(--card-muted));
}
.referral-reward > span {
  width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--accent-glow), var(--accent)); font-size: 20px; font-weight: 900;
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 30%, transparent);
}
.referral-reward p { margin: 0; display: grid; gap: 4px; }
.referral-reward b { font-size: 14px; line-height: 1.28; }
.referral-reward small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.referral-link { display: grid; gap: 7px; }
.referral-link > span:first-child { color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .045em; }
.referral-link > span:last-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.referral-link input {
  min-width: 0; height: 46px; padding: 0 12px; border: 1px solid var(--line); border-right: 0;
  border-radius: 14px 0 0 14px; color: var(--text); background: var(--card-muted); font: 500 12px/1.2 system-ui; outline: none;
}
.referral-link button {
  min-width: 105px; border: 1px solid var(--accent); border-radius: 0 14px 14px 0; color: #fff;
  background: var(--accent); font-weight: 800; cursor: pointer;
}
.referral-link button:hover, .referral-link button:focus-visible { filter: brightness(1.1); outline: none; }
.referral-shares { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 13px; }
.referral-shares button {
  min-width: 0; min-height: 54px; display: grid; place-items: center; align-content: center; gap: 2px;
  padding: 7px 4px; border: 1px solid var(--line); border-radius: 15px; color: var(--text); background: var(--card-muted); cursor: pointer;
}
.referral-shares button:hover, .referral-shares button:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.referral-shares b { font-size: 12px; }
.referral-shares small { color: var(--muted); font-size: 9px; }
.referral-shares .icon { width: 21px; height: 21px; color: var(--accent); }
.referral-status { display: flex; justify-content: space-between; gap: 12px; margin-top: 13px; color: var(--muted); font-size: 11px; }
.referral-status b { color: var(--text); font-size: 13px; }
.referral-feedback { margin: 10px 0 0 !important; padding: 9px 11px !important; border-radius: 12px; font-size: 11px; }
.referral-feedback.error { color: #ffb3a8; background: rgba(216, 88, 72, .13); }
.referral-loading { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 12px; }
.referral-loading p, .referral-error p { margin: 0; color: var(--muted); }
.referral-error { display: grid; gap: 10px; }
.referral-error .secondary-button { min-height: 48px; }
html[data-theme="light"] .referral-entry,
html[data-theme="light"] .referral-reward,
html[data-theme="light"] .referral-shares button,
html[data-theme="light"] .referral-link input { color: var(--text); background: var(--card-solid); border-color: var(--line); }
html[data-theme="light"] .referral-close { color: var(--muted); background: transparent; border-color: transparent; }
html[data-theme="light"] .referral-reward { background: color-mix(in srgb, var(--accent) 7%, var(--card-solid)); }
html[data-theme="light"] .referral-link button { color: #fff; background: var(--accent); border-color: var(--accent); }
html[data-theme="light"] .referral-feedback.error { color: #8b2d20; background: #fbe5e1; }
@media (max-width: 380px) {
  .referral-dialog { padding: 18px 15px; }
  .referral-shares { grid-template-columns: repeat(2, 1fr); }
  .referral-shares button { min-height: 47px; }
}

/* R116 — final referral offer and compact shared surfaces. */
.referral-discount-banner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  margin: 0 0 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 62%, var(--line));
  border-radius: 19px; color: var(--text); background: linear-gradient(125deg, color-mix(in srgb, var(--accent) 20%, var(--card-solid)), var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 15%, transparent);
}
.referral-discount-banner > strong { color: var(--accent); font-size: clamp(30px, 8vw, 42px); line-height: .9; letter-spacing: -.055em; }
.referral-discount-banner > span { min-width: 0; display: grid; gap: 2px; }
.referral-discount-banner > span b { font-size: 15px; }
.referral-discount-banner > span small { color: var(--muted); font-size: 11px; }
.referral-discount-banner time {
  min-width: 78px; padding: 8px 9px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 13px; color: var(--text); background: color-mix(in srgb, var(--bg) 68%, transparent);
  font: 850 14px/1.05 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: center;
}
.package-option .package-price { min-width: 84px; display: grid; justify-items: end; gap: 2px; line-height: 1.02; }
.package-option .package-price del { color: var(--muted); font-size: 11px; font-weight: 650; text-decoration-thickness: 1px; }
.package-option .package-price strong { color: var(--accent); font-size: 18px; white-space: nowrap; }
.songs-referral-entry,
.plans-referral-entry {
  min-height: 55px; grid-template-columns: 32px minmax(0, 1fr) 20px; gap: 9px;
  padding: 9px 13px; border-style: dashed; border-color: var(--accent);
  background: color-mix(in srgb, var(--card) 58%, transparent); box-shadow: none;
}
.plans-referral-entry { margin-top: 12px; }
:is(.songs-referral-entry, .plans-referral-entry) > .icon:first-child { width: 25px; height: 25px; }
:is(.songs-referral-entry, .plans-referral-entry) b { color: var(--text); font-size: 14px; }
:is(.songs-referral-entry, .plans-referral-entry) small { font-size: 10px; }
.referral-dialog {
  width: min(calc(100% - 2px), 410px); max-width: 410px; margin: auto; padding: 18px;
  border-color: var(--accent);
}
.referral-brand-head {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 13px;
  min-height: 92px; margin: -2px 38px 13px -3px;
}
.referral-brand-token { display: grid; place-items: center; }
.referral-brand-token .brand-avatar {
  width: 82px; height: 82px; border-color: var(--accent);
  box-shadow: 0 0 8px #fcd974, 0 0 25px color-mix(in srgb, var(--accent) 49%, transparent);
}
.referral-brand-head > div:last-child { min-width: 0; }
.referral-brand-head span { color: var(--accent); font-size: 10px; font-weight: 850; letter-spacing: .11em; }
.referral-brand-head h2 { margin: 2px 0 3px; font-size: 24px; line-height: 1; }
.referral-brand-head p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.3; }
.referral-reward { grid-template-columns: 48px minmax(0, 1fr); gap: 11px; padding: 11px; }
.referral-reward > .referral-reward-gift { width: 46px; height: 46px; }
.referral-reward-gift .icon { width: 26px; height: 26px; color: #fff; }
.referral-reward b { font-size: 13px; }
.referral-status { padding-inline: 9px; }
.referral-status span:first-child { transform: translateX(5px); }
.referral-status span:last-child { transform: translateX(-11px); text-align: right; }
html[data-theme="light"] .referral-discount-banner {
  background: linear-gradient(125deg, color-mix(in srgb, var(--accent) 10%, var(--card-solid)), var(--card-solid));
}
html[data-theme="light"] .songs-referral-entry,
html[data-theme="light"] .plans-referral-entry {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--card-solid) 76%, transparent);
}
html[data-theme="light"] .voice-dialog.referral-dialog { border-color: var(--accent); }
.songs-footer {
  min-height: 96px;
  flex: 0 0 96px;
}
.songs-footer::before {
  height: 96px;
  transform: scale(1.28);
}
@media (max-width: 380px) {
  .referral-discount-banner { grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; }
  .referral-discount-banner time { grid-column: 2; justify-self: start; min-width: 86px; }
  .referral-brand-head { grid-template-columns: 72px minmax(0, 1fr); margin-right: 34px; }
  .referral-brand-token .brand-avatar { width: 70px; height: 70px; }
  .referral-brand-head h2 { font-size: 21px; }
  .package-option .package-price { min-width: 77px; }
  .package-option .package-price strong { font-size: 16px; }
}

/* Final cascade: MAX Production maintenance scene r2. */
.maintenance-page {
  width: min(100%, 560px);
  height: 100svh;
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: clamp(190px, 32vh, 300px) auto auto;
  align-content: center;
  gap: clamp(8px, 1.45vh, 13px);
  padding: max(8px, env(safe-area-inset-top)) clamp(10px, 3.5vw, 18px) max(8px, env(safe-area-inset-bottom));
  overflow: hidden;
  background: radial-gradient(circle at 50% 17%, rgba(255,122,0,.28), transparent 30%), radial-gradient(circle at 50% 63%, rgba(255,122,0,.08), transparent 42%), linear-gradient(180deg,#020608 0%,#061116 47%,#020608 100%);
}
.maintenance-page::before,.maintenance-page::after { left:-26%; width:152%; height:clamp(105px,18vh,165px); border-color:rgba(255,122,0,.34); filter:drop-shadow(0 0 8px rgba(255,122,0,.25)); }
.maintenance-page::before { top:clamp(74px,13vh,126px); }
.maintenance-page::after { bottom:clamp(48px,8vh,78px); }
.maintenance-brand {
  position:relative; display:flex; min-height:0; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:0; text-align:center; isolation:isolate;
}
.maintenance-brand::before,.maintenance-brand::after { content:''; position:absolute; z-index:-2; top:48%; width:44%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,122,0,.85)); box-shadow:0 -9px 0 rgba(255,122,0,.42),0 9px 0 rgba(255,122,0,.42); }
.maintenance-brand::before { left:0; }
.maintenance-brand::after { right:0; transform:scaleX(-1); }
.maintenance-brand .pechka-emblem { z-index:2; width:clamp(92px,15.8vh,146px); height:clamp(92px,15.8vh,146px); flex:0 0 auto; box-shadow:0 0 8px #ffd36a,0 0 28px #ff7100,0 0 58px rgba(255,113,0,.46); }
.maintenance-brand-copy { z-index:3; margin-top:clamp(7px,1.05vh,11px); }
.maintenance-brand-copy>strong { font-size:clamp(25px,4.7vh,39px); line-height:1; letter-spacing:-.045em; text-shadow:0 2px 12px rgba(0,0,0,.92); }
.maintenance-brand-copy>p { margin-top:clamp(3px,.65vh,7px); font-size:clamp(13px,2.45vh,19px); color:#c7cdd1; }
.maintenance-brand .maintenance-wave { position:absolute; z-index:-1; top:44%; left:50%; width:min(88%,470px); height:clamp(38px,7vh,65px); margin:0; transform:translate(-50%,-50%); display:flex; justify-content:space-between; opacity:.9; }
.maintenance-brand .maintenance-wave i { width:clamp(2px,.7vw,4px); height:32%; box-shadow:0 0 9px #ff7a00; }
.maintenance-brand .maintenance-wave i:nth-of-type(2),.maintenance-brand .maintenance-wave i:nth-of-type(8) { height:48%; }
.maintenance-brand .maintenance-wave i:nth-of-type(3),.maintenance-brand .maintenance-wave i:nth-of-type(7) { height:72%; }
.maintenance-brand .maintenance-wave i:nth-of-type(4),.maintenance-brand .maintenance-wave i:nth-of-type(6) { height:95%; }
.maintenance-brand .maintenance-wave i:nth-of-type(5) { height:56%; }
.maintenance-note { position:absolute; z-index:2; color:#ff8a00; font-size:clamp(24px,4.7vh,38px); line-height:1; text-shadow:0 0 15px rgba(255,122,0,.8); }
.maintenance-note-left { left:7%; top:21%; transform:rotate(-8deg); }
.maintenance-note-right { right:7%; top:23%; transform:rotate(7deg); }
.maintenance-card { display:flex; min-height:0; padding:clamp(12px,2vh,18px) clamp(14px,4vw,22px); flex-direction:column; justify-content:center; border-radius:clamp(20px,5vw,28px); }
.maintenance-card .branded-alert-icon { width:clamp(48px,7.7vh,66px); height:clamp(48px,7.7vh,66px); margin-bottom:clamp(7px,1vh,11px); }
.maintenance-card .branded-alert-icon span { font-size:clamp(32px,5.2vh,43px); }
.maintenance-card h1 { font-size:clamp(25px,4.35vh,36px); line-height:1.04; }
.maintenance-card>p { margin-top:clamp(7px,1vh,10px); font-size:clamp(14px,2.45vh,19px); line-height:1.3; }
.maintenance-thanks { width:82%; margin:clamp(8px,1.3vh,12px) auto clamp(7px,1.1vh,10px); padding-top:clamp(7px,1vh,10px); font-size:clamp(13px,2.1vh,16px); }
.maintenance-button { min-height:clamp(42px,6.2vh,52px); font-size:clamp(16px,2.6vh,20px); }
.maintenance-countdown-card { min-height:clamp(58px,9.2vh,82px); padding:clamp(7px,1.15vh,11px) 12px; border-radius:clamp(17px,4.5vw,22px); }
.maintenance-countdown-card span { font-size:clamp(10px,1.65vh,12px); }
.maintenance-countdown-card strong { margin-top:3px; font-size:clamp(25px,4.4vh,37px); }
@media (max-height:650px) {
  .maintenance-page { grid-template-rows:clamp(126px,27vh,170px) auto auto; gap:6px; padding-block:max(5px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-bottom)); }
  .maintenance-brand .pechka-emblem { width:88px; height:88px; }
  .maintenance-brand-copy { margin-top:4px; }
  .maintenance-brand-copy>strong { font-size:24px; }
  .maintenance-brand-copy>p { margin-top:2px; font-size:13px; }
  .maintenance-note { font-size:23px; }
  .maintenance-card { padding-block:9px; }
  .maintenance-card .branded-alert-icon { width:44px; height:44px; margin-bottom:5px; border-width:2px; }
  .maintenance-card .branded-alert-icon span { font-size:30px; }
  .maintenance-card h1 { font-size:24px; }
  .maintenance-card>p { margin-top:5px; font-size:13.5px; line-height:1.23; }
  .maintenance-thanks { margin-block:6px 5px; padding-top:5px; font-size:12.5px; }
  .maintenance-button { min-height:38px; font-size:16px; }
  .maintenance-countdown-card { min-height:54px; padding-block:6px; }
  .maintenance-countdown-card strong { margin-top:1px; font-size:24px; }
}
@media (max-width:370px) {
  .maintenance-page { padding-inline:8px; }
  .maintenance-note-left { left:5%; }
  .maintenance-note-right { right:5%; }
  .maintenance-card h1 { font-size:24px; }
}

/* MAX Production visual polish r5: scoped to the three approved surfaces. */
.maintenance-page {
  --maintenance-gap: clamp(10px, 1.8vh, 16px);
  box-sizing: border-box;
  grid-template-rows: clamp(210px, 34vh, 310px) minmax(0, 1fr) auto;
  align-content: stretch;
  gap: var(--maintenance-gap);
  padding-bottom: max(var(--maintenance-gap), env(safe-area-inset-bottom));
}
.maintenance-brand {
  border-radius: clamp(22px, 5vw, 32px);
  background:
    radial-gradient(circle at 50% 42%, rgba(255,122,0,.2), transparent 37%),
    repeating-radial-gradient(ellipse at 50% 112%, transparent 0 22px, rgba(255,122,0,.11) 23px 24px, transparent 25px 37px);
}
.maintenance-brand .pechka-emblem {
  width: clamp(116px, 18.5vh, 166px);
  height: clamp(116px, 18.5vh, 166px);
}
.maintenance-brand-copy { margin-top: clamp(8px, 1.2vh, 12px); }
.maintenance-brand-copy>strong { font-size: clamp(29px, 5.2vh, 43px); }
.maintenance-brand-copy>p { font-size: clamp(14px, 2.5vh, 20px); }
.maintenance-brand .maintenance-wave { top: 42%; width: min(94%, 500px); }
.maintenance-countdown-card {
  width: calc(100% + 12px);
  margin-inline: -6px;
  justify-self: center;
  box-sizing: border-box;
}
.package-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 84px 22px;
  align-items: center;
  column-gap: 12px;
}
.package-option .package-symbol { grid-column: 1; }
.package-option .package-copy { grid-column: 2; }
.package-option .package-badge { position: absolute; right: 122px; }
.package-option .package-price {
  grid-column: 3; width: 84px; min-width: 84px; justify-self: end;
  display: grid; align-items: center; justify-items: end; font-style: normal;
}
.package-option > .icon:last-child {
  grid-column: 4; width: 22px; height: 22px; justify-self: end; flex: none;
}
@media (max-width:430px) {
  .package-option { grid-template-columns: 42px minmax(0, 1fr) 77px 22px; column-gap: 8px; }
  .package-option .package-price { width: 77px; min-width: 77px; }
}
@media (max-height:650px) {
  .maintenance-page { --maintenance-gap: 7px; grid-template-rows: clamp(138px, 28vh, 176px) minmax(0, 1fr) auto; }
  .maintenance-brand .pechka-emblem { width: 92px; height: 92px; }
  .maintenance-brand-copy>strong { font-size: 25px; }
  .maintenance-brand-copy>p { font-size: 13px; }
}

/* MAX Production maintenance header r6: mirrors the accepted PECHKA MUSIC hero, without a burger. */
.maintenance-brand {
  display: block;
  overflow: hidden;
  isolation: isolate;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(249,184,33,.2), rgba(95,39,6,.22) 26%, transparent 44%),
    repeating-radial-gradient(ellipse at 50% 88%, transparent 0 29px, rgba(249,184,33,.13) 30px 31px, transparent 32px 47px),
    linear-gradient(180deg, #03090c, #071016 72%, #03090c);
}
.maintenance-brand::before,
.maintenance-brand::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -17%;
  width: 134%;
  height: 116px;
  border: 0;
  border-top: 1px solid rgba(255,122,0,.68);
  border-radius: 48%;
  background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 12px, rgba(255,122,0,.13) 13px 14px, transparent 15px 21px);
  filter: drop-shadow(0 0 8px rgba(255,122,0,.25));
  box-shadow: none;
}
.maintenance-brand::before { top: 54px; transform: rotate(-8deg); }
.maintenance-brand::after { top: 112px; right: auto; transform: rotate(7deg) scaleY(-1); opacity: .7; }
.maintenance-brand .pechka-emblem {
  position: absolute;
  z-index: 3;
  top: clamp(8px, 1.5vh, 15px);
  left: 50%;
  width: clamp(126px, 19vh, 166px);
  height: clamp(126px, 19vh, 166px);
  transform: translateX(-50%);
  box-shadow: 0 0 6px #fcd974, 0 0 20px #ff7a00, 0 0 49px rgba(255,122,0,.5);
}
.maintenance-brand .maintenance-wave {
  position: absolute;
  z-index: 2;
  top: clamp(64px, 10vh, 86px);
  left: 50%;
  width: min(92%, 500px);
  height: clamp(58px, 9vh, 78px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  opacity: 1;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 3px rgba(252,217,116,.72)) drop-shadow(0 0 9px rgba(255,122,0,.48));
}
.maintenance-brand .maintenance-wave i { width: 3px; height: 9px; border-radius: 4px; background: linear-gradient(#fcd974,#ff7a00); box-shadow: none; }
.maintenance-brand .maintenance-wave i:nth-child(2), .maintenance-brand .maintenance-wave i:nth-child(22) { height: 17px; }
.maintenance-brand .maintenance-wave i:nth-child(3), .maintenance-brand .maintenance-wave i:nth-child(21) { height: 29px; }
.maintenance-brand .maintenance-wave i:nth-child(4), .maintenance-brand .maintenance-wave i:nth-child(20) { height: 44px; }
.maintenance-brand .maintenance-wave i:nth-child(5), .maintenance-brand .maintenance-wave i:nth-child(19) { height: 62px; }
.maintenance-brand .maintenance-wave i:nth-child(6), .maintenance-brand .maintenance-wave i:nth-child(18) { height: 40px; }
.maintenance-brand .maintenance-wave i:nth-child(7), .maintenance-brand .maintenance-wave i:nth-child(17) { height: 24px; }
.maintenance-brand .maintenance-wave i:nth-child(8), .maintenance-brand .maintenance-wave i:nth-child(16) { height: 14px; }
.maintenance-brand .maintenance-wave i:nth-child(n+9):nth-child(-n+15) { opacity: 0; }
.maintenance-brand-copy {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: clamp(8px, 1.4vh, 14px);
  left: 12px;
  margin: 0;
  text-align: center;
}
.maintenance-brand-copy>strong { display: block; color: #fff; font-size: clamp(29px, 5.2vh, 43px); line-height: 1; letter-spacing: -.04em; white-space: nowrap; text-shadow: 0 2px 14px rgba(0,0,0,.78); }
.maintenance-brand-copy>p { margin: 5px 0 0; color: #c7cdd1; font-size: clamp(14px, 2.5vh, 20px); }
.maintenance-note { z-index: 4; color: #ff8500; filter: drop-shadow(0 0 6px rgba(249,184,33,.48)); }
.maintenance-note-left { top: 25%; left: 8%; transform: rotate(-10deg); }
.maintenance-note-right { top: 27%; right: 8%; transform: rotate(9deg); }
.maintenance-spark { position: absolute; z-index: 4; top: 9%; left: 14%; color: #f9b821; font-size: clamp(18px, 3.4vh, 27px); line-height: 1; filter: drop-shadow(0 0 7px rgba(249,184,33,.72)); }
@media (max-height:650px) {
  .maintenance-brand .pechka-emblem { top: 4px; width: 94px; height: 94px; }
  .maintenance-brand .maintenance-wave { top: 42px; height: 50px; }
  .maintenance-brand-copy { bottom: 4px; }
  .maintenance-brand-copy>strong { font-size: 24px; }
  .maintenance-brand-copy>p { margin-top: 2px; font-size: 13px; }
  .maintenance-note { font-size: 21px; }
  .maintenance-spark { top: 6%; font-size: 18px; }
}

/* Purchase confirmation and unavailable-payment UX. */
.restyled-shell .locked-purchase-entry {
  width: 100%; grid-template-columns: 46px minmax(0, 1fr) 22px; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .12s ease;
}
.restyled-shell .locked-purchase-entry > .icon:last-child { align-self: center; color: var(--accent); }
.restyled-shell .locked-purchase-entry:hover,
.restyled-shell .locked-purchase-entry:focus-visible {
  border-color: var(--accent); outline: none;
  background: color-mix(in srgb, var(--accent) 10%, rgba(7, 19, 26, .58));
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 22%, transparent);
}
.restyled-shell .locked-purchase-entry:active { transform: scale(.99); }

.purchase-scrim,
.payment-unavailable-scrim {
  z-index: 130; place-items: center; overflow-y: auto;
  padding-block: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .84);
}
.purchase-dialog,
.payment-unavailable-dialog,
.trial-unlock-success-dialog {
  position: relative; width: min(calc(100% - 2px), 430px); max-height: calc(100svh - 32px); overflow-y: auto;
  padding: 22px; border-color: var(--accent); color: #f7f8fa;
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 122, 0, .11), transparent 34%),
    linear-gradient(145deg, #04151b, #020b10 72%);
  box-shadow: 0 0 0 1px rgba(255, 122, 0, .22), 0 0 34px rgba(255, 122, 0, .18), 0 28px 80px rgba(0, 0, 0, .62);
}
.purchase-brand {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 13px;
  margin: -4px 0 14px;
}
.purchase-brand > span { display: grid; place-items: center; }
.purchase-brand .brand-avatar {
  width: 70px; height: 70px; border-color: var(--accent);
  box-shadow: 0 0 8px #fcd974, 0 0 24px rgba(255, 122, 0, .45);
}
.purchase-brand > div { min-width: 0; display: grid; gap: 2px; }
.purchase-brand b { color: var(--accent); font-size: 22px; line-height: 1; letter-spacing: .035em; }
.purchase-brand small { color: #b7c9e8; font-size: 13px; }
.purchase-dialog > h2,
.payment-unavailable-dialog > h2,
.trial-unlock-success-dialog > h2 { color: #fff; font-size: clamp(28px, 7.8vw, 38px); line-height: 1.05; }
.generation-failure-dialog { text-align: center; }
.generation-failure-logo { display: grid; place-items: center; margin: 0 auto 16px; }
.generation-failure-logo .brand-avatar { width: 76px; height: 76px; }
.generation-failure-dialog > p { color: #aeb6bd; }
.purchase-caption { margin: 18px 0 8px !important; color: #b7c9e8 !important; font-size: 14px; }
.purchase-package-card {
  display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: center; gap: 15px;
  padding: 15px; border: 1px solid rgba(255, 122, 0, .52); border-radius: 21px;
  background: linear-gradient(105deg, rgba(255, 122, 0, .12), rgba(255, 255, 255, .025));
  box-shadow: inset 0 0 22px rgba(255, 122, 0, .06);
}
.purchase-package-card > .icon {
  width: 62px; height: 62px; padding: 15px; border-radius: 50%; color: var(--accent);
  background: rgba(255, 122, 0, .18); filter: drop-shadow(0 0 9px rgba(255, 122, 0, .48));
}
.purchase-package-card > div { min-width: 0; display: grid; gap: 3px; }
.purchase-package-card b { color: #fff; font-size: 23px; line-height: 1.1; }
.purchase-package-card strong { color: var(--accent); font-size: 30px; line-height: 1.05; }
.purchase-package-card small { color: #b7c9e8; font-size: 14px; }
.purchase-unlock-note { margin: 15px 6px 0 !important; color: #eef2f4 !important; font-size: 15px; line-height: 1.5 !important; }
.purchase-unlock-note b { color: #fff; }
.purchase-terms {
  margin: 16px 0 0 !important; padding-top: 15px; border-top: 1px solid rgba(183, 201, 232, .28);
  color: #aabbd7 !important; font-size: 13px; line-height: 1.48 !important;
}
.purchase-terms a { color: var(--accent); text-underline-offset: 3px; }
.purchase-terms a:hover,
.purchase-terms a:focus-visible { color: #ffad61; outline: none; }
.purchase-actions { display: grid; gap: 9px; margin-top: 16px; }
.purchase-actions button { min-height: 54px; font-size: 16px; }
.purchase-actions .primary-button,
.payment-unavailable-dialog .primary-button {
  border: 1px solid #ff8a20; color: #fff;
  background: linear-gradient(135deg, #9d4d13, #c9762c);
  box-shadow: inset 0 1px 0 rgba(255, 224, 191, .22), 0 8px 22px rgba(255, 122, 0, .2);
}
.trial-unlock-success-dialog {
  width: min(calc(100% - 2px), 390px); text-align: center;
}
.trial-unlock-success-dialog .purchase-brand { text-align: left; }
.trial-unlock-success-icon {
  width: 70px; height: 70px; display: grid; place-items: center; margin: 8px auto 17px;
  border: 4px solid var(--accent); border-radius: 50%; color: #fff;
  background: var(--accent); box-shadow: 0 0 22px rgba(255, 122, 0, .34);
  font-size: 42px; font-weight: 850; line-height: 1;
}
.trial-unlock-success-dialog > p {
  max-width: 330px; margin: 15px auto 0; color: #e2e7ea; font-size: 17px; line-height: 1.42;
}
.trial-unlock-success-dialog .dialog-actions { margin-top: 20px; }
.trial-unlock-success-dialog .primary-button {
  min-height: 54px; border: 1px solid #ff8a20; color: #fff; font-size: 18px;
  background: linear-gradient(135deg, #9d4d13, #c9762c);
  box-shadow: inset 0 1px 0 rgba(255, 224, 191, .22), 0 8px 22px rgba(255, 122, 0, .2);
}
.trial-unlock-success-dialog button:hover,
.trial-unlock-success-dialog button:focus-visible { filter: brightness(1.14); outline: none; box-shadow: 0 0 21px rgba(255, 122, 0, .28); }
.trial-unlock-success-dialog button:active { transform: scale(.99); }
.song-unlocked-dialog .trial-unlock-success-icon {
  position: relative;
  width: 78px; height: 78px; margin: 10px auto 19px;
  border: 2px solid #ff9b2f; color: #fff;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 153, 43, .19), transparent 31%),
    linear-gradient(145deg, #10191c, #03090c 72%);
  box-shadow:
    inset 0 0 0 5px rgba(255, 122, 0, .08),
    inset 0 0 19px rgba(255, 122, 0, .14),
    0 0 0 6px rgba(255, 122, 0, .07),
    0 0 14px rgba(255, 178, 69, .88),
    0 0 34px rgba(255, 122, 0, .48);
  font-size: 45px; font-weight: 900;
  text-shadow: 0 0 11px rgba(255, 255, 255, .28);
}
.song-unlocked-dialog .trial-unlock-success-icon::before,
.song-unlocked-dialog .trial-unlock-success-icon::after {
  content: ""; position: absolute; pointer-events: none; border-radius: 50%;
}
.song-unlocked-dialog .trial-unlock-success-icon::before {
  inset: -7px; border: 1px solid rgba(255, 122, 0, .42);
}
.song-unlocked-dialog .trial-unlock-success-icon::after {
  width: 9px; height: 9px; top: 8px; right: 9px;
  background: #ffd47a; box-shadow: 0 0 11px #ff7a00;
}
.song-unlocked-dialog .primary-button {
  border-color: #ff9d37;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .15), transparent 38%),
    linear-gradient(135deg, #e66b08, #ff8a13 58%, #c95500);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 219, .48),
    inset 0 -5px 10px rgba(111, 39, 0, .16),
    0 9px 24px rgba(255, 122, 0, .29),
    0 0 18px rgba(255, 122, 0, .13);
}
.song-unlocked-dialog .primary-button:hover,
.song-unlocked-dialog .primary-button:focus-visible {
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 240, 219, .55), 0 0 25px rgba(255, 122, 0, .42);
}
.purchase-actions .secondary-button { border-color: #8594a3; color: #fff; background: rgba(4, 18, 24, .68); }
.purchase-actions button:hover,
.purchase-actions button:focus-visible,
.payment-unavailable-dialog button:hover,
.payment-unavailable-dialog button:focus-visible { filter: brightness(1.14); outline: none; box-shadow: 0 0 21px rgba(255, 122, 0, .28); }
.purchase-actions button:active,
.payment-unavailable-dialog button:active { transform: scale(.99); }

.payment-unavailable-dialog { width: min(calc(100% - 2px), 390px); text-align: center; }
.payment-unavailable-dialog .purchase-brand { margin-right: 30px; text-align: left; }
.payment-unavailable-close {
  position: absolute; z-index: 2; top: 12px; right: 13px; width: 38px; height: 38px;
  padding: 0; border: 0; color: #fff; background: transparent; font: 300 34px/1 system-ui; cursor: pointer;
}
.payment-unavailable-icon {
  width: 70px; height: 70px; display: grid; place-items: center; margin: 8px auto 17px;
  border: 4px solid var(--accent); border-radius: 50%; color: var(--accent);
  background: rgba(255, 122, 0, .13); box-shadow: 0 0 22px rgba(255, 122, 0, .34);
  font-size: 45px; font-weight: 850; line-height: 1;
}
.payment-unavailable-dialog > p {
  max-width: 330px; margin: 15px auto 0; color: #e2e7ea; font-size: 17px; line-height: 1.42;
}
.payment-unavailable-dialog .payment-unavailable-note {
  margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(183, 201, 232, .28);
  color: #b7c2ca; font-size: 13px;
}
.payment-unavailable-dialog .dialog-actions { margin-top: 15px; }
.payment-unavailable-dialog .primary-button { min-height: 54px; font-size: 18px; }

html[data-theme="light"] .purchase-dialog,
html[data-theme="light"] .payment-unavailable-dialog,
html[data-theme="light"] .trial-unlock-success-dialog { color: #f7f8fa; }

@media (max-width: 380px) {
  .purchase-dialog, .payment-unavailable-dialog, .trial-unlock-success-dialog { padding: 18px 15px; }
  .purchase-brand { grid-template-columns: 62px minmax(0, 1fr); gap: 10px; }
  .purchase-brand .brand-avatar { width: 60px; height: 60px; }
  .purchase-brand b { font-size: 19px; }
  .purchase-dialog > h2, .payment-unavailable-dialog > h2, .trial-unlock-success-dialog > h2 { font-size: 28px; }
  .purchase-package-card { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 13px; }
  .purchase-package-card > .icon { width: 54px; height: 54px; padding: 13px; }
  .purchase-package-card b { font-size: 20px; }
  .purchase-package-card strong { font-size: 27px; }
}

/* Paywall dialogs are viewport overlays, never children of a scrolling screen. */
html.pechka-paywall-open,
body.pechka-paywall-open {
  overflow: hidden;
  overscroll-behavior: none;
}
.app-overlay-root {
  position: fixed;
  z-index: 1000;
  inset: 0;
  pointer-events: none;
  isolation: isolate;
}
.app-overlay-root > .dialog-scrim {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: auto;
}
.app-overlay-root > .purchase-scrim {
  overflow: hidden;
  padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
}
.app-overlay-root .purchase-dialog {
  width: min(100%, 380px);
  max-height: calc(100dvh - 20px);
  overflow: hidden;
  padding: 17px;
}
.app-overlay-root .purchase-dialog .purchase-brand {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  margin: -2px 0 10px;
}
.app-overlay-root .purchase-dialog .purchase-brand .brand-avatar { width: 50px; height: 50px; }
.app-overlay-root .purchase-dialog .purchase-brand b { font-size: 18px; }
.app-overlay-root .purchase-dialog .purchase-brand small { font-size: 11px; }
.app-overlay-root .purchase-dialog > h2 { font-size: clamp(25px, 7vw, 30px); }
.app-overlay-root .purchase-caption { margin: 12px 0 6px !important; font-size: 12px; }
.app-overlay-root .purchase-package-card {
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 13px;
  border-radius: 18px;
}
.app-overlay-root .purchase-package-card > .icon { width: 50px; height: 50px; padding: 12px; }
.app-overlay-root .purchase-package-card b { font-size: 19px; }
.app-overlay-root .purchase-package-card strong { font-size: 26px; }
.app-overlay-root .purchase-package-card small { font-size: 12px; }
.app-overlay-root .purchase-unlock-note { margin: 10px 3px 0 !important; font-size: 13px; line-height: 1.35 !important; }
.app-overlay-root .purchase-terms {
  margin: 11px 0 0 !important;
  padding-top: 10px;
  font-size: 11px;
  line-height: 1.38 !important;
}
.app-overlay-root .purchase-actions { gap: 7px; margin-top: 11px; }
.app-overlay-root .purchase-actions button { min-height: 46px; font-size: 14px; }

@media (max-height: 650px) {
  .app-overlay-root .purchase-dialog { padding: 13px 15px; }
  .app-overlay-root .purchase-dialog .purchase-brand {
    grid-template-columns: 42px minmax(0, 1fr);
    margin-bottom: 7px;
  }
  .app-overlay-root .purchase-dialog .purchase-brand .brand-avatar { width: 40px; height: 40px; }
  .app-overlay-root .purchase-dialog .purchase-brand b { font-size: 16px; }
  .app-overlay-root .purchase-dialog > h2 { font-size: 23px; }
  .app-overlay-root .purchase-caption { margin-top: 8px !important; }
  .app-overlay-root .purchase-package-card { grid-template-columns: 46px minmax(0, 1fr); padding-block: 8px; }
  .app-overlay-root .purchase-package-card > .icon { width: 42px; height: 42px; padding: 10px; }
  .app-overlay-root .purchase-package-card b { font-size: 17px; }
  .app-overlay-root .purchase-package-card strong { font-size: 23px; }
  .app-overlay-root .purchase-terms { margin-top: 8px !important; padding-top: 8px; }
  .app-overlay-root .purchase-actions { margin-top: 8px; }
  .app-overlay-root .purchase-actions button { min-height: 42px; }
}

/* Light theme: purchase dialogs use the same warm neutral palette as commerce screens. */
html[data-theme="light"] .purchase-scrim,
html[data-theme="light"] .payment-unavailable-scrim {
  background: rgba(42, 33, 27, .46);
}
html[data-theme="light"] .purchase-dialog,
html[data-theme="light"] .payment-unavailable-dialog,
html[data-theme="light"] .trial-unlock-success-dialog {
  color: var(--text);
  border-color: rgba(201, 79, 0, .72);
  background:
    radial-gradient(circle at 50% 14%, rgba(225, 104, 17, .09), transparent 35%),
    linear-gradient(145deg, #fffdfa, #f7eee5 76%);
  box-shadow: 0 0 0 1px rgba(201, 79, 0, .12), 0 0 28px rgba(201, 79, 0, .12), 0 28px 70px rgba(42, 33, 27, .27);
}
html[data-theme="light"] .purchase-brand b { color: var(--accent); }
html[data-theme="light"] .purchase-brand small { color: var(--muted); }
html[data-theme="light"] .purchase-dialog > h2,
html[data-theme="light"] .payment-unavailable-dialog > h2,
html[data-theme="light"] .trial-unlock-success-dialog > h2 { color: var(--text); }
html[data-theme="light"] .purchase-caption { color: var(--muted) !important; }
html[data-theme="light"] .purchase-package-card {
  border-color: rgba(201, 79, 0, .52);
  background: linear-gradient(105deg, #fff2e6, #fffdfa);
  box-shadow: inset 0 0 20px rgba(201, 79, 0, .045);
}
html[data-theme="light"] .purchase-package-card > .icon {
  color: var(--accent);
  background: rgba(225, 104, 17, .12);
  filter: drop-shadow(0 0 7px rgba(201, 79, 0, .2));
}
html[data-theme="light"] .purchase-package-card b { color: var(--accent); }
html[data-theme="light"] .purchase-package-card strong { color: var(--text); }
html[data-theme="light"] .purchase-package-card small { color: var(--muted); }
html[data-theme="light"] .purchase-unlock-note { color: var(--text) !important; }
html[data-theme="light"] .purchase-unlock-note b { color: var(--text); }
html[data-theme="light"] .purchase-terms {
  color: var(--muted) !important;
  border-top-color: var(--line);
}
html[data-theme="light"] .purchase-terms a { color: var(--accent); }
html[data-theme="light"] .purchase-terms a:hover,
html[data-theme="light"] .purchase-terms a:focus-visible { color: #a94000; }
html[data-theme="light"] .purchase-actions .primary-button,
html[data-theme="light"] .payment-unavailable-dialog .primary-button,
html[data-theme="light"] .trial-unlock-success-dialog .primary-button {
  border-color: #d7620e;
  color: #fff;
  background: linear-gradient(135deg, #b94b00, #df7a20);
  box-shadow: inset 0 1px 0 rgba(255, 240, 224, .32), 0 8px 20px rgba(201, 79, 0, .18);
}
html[data-theme="light"] .purchase-actions .primary-button .icon { color: #fff; }
html[data-theme="light"] .purchase-actions .secondary-button {
  border-color: #bcaea2;
  color: var(--text);
  background: #fffdfa;
}
html[data-theme="light"] .purchase-actions .secondary-button .icon { color: var(--accent); }
html[data-theme="light"] .purchase-actions .secondary-button:hover,
html[data-theme="light"] .purchase-actions .secondary-button:focus-visible {
  border-color: var(--accent);
  background: #fff2e6;
  box-shadow: 0 0 18px rgba(201, 79, 0, .14);
}
html[data-theme="light"] .payment-unavailable-close { color: var(--muted); }
html[data-theme="light"] .payment-unavailable-close:hover,
html[data-theme="light"] .payment-unavailable-close:focus-visible { color: var(--accent); }
html[data-theme="light"] .payment-unavailable-icon {
  color: var(--accent);
  border-color: var(--accent);
  background: #fff1e2;
  box-shadow: 0 0 20px rgba(201, 79, 0, .2);
}
html[data-theme="light"] .payment-unavailable-dialog > p { color: var(--text); }
html[data-theme="light"] .trial-unlock-success-dialog > p { color: var(--text); }
html[data-theme="light"] .generation-failure-dialog {
  color: #f7f8fa;
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 122, 0, .11), transparent 34%),
    linear-gradient(145deg, #04151b, #020b10 72%);
}
html[data-theme="light"] .generation-failure-dialog > h2 { color: #fff; }
html[data-theme="light"] .generation-failure-dialog > p { color: #aeb6bd; }
html[data-theme="light"] .trial-unlock-success-icon {
  color: #fff; border-color: var(--accent); background: var(--accent);
  box-shadow: 0 0 20px rgba(201, 79, 0, .2);
}
html[data-theme="light"] .song-unlocked-dialog .trial-unlock-success-icon {
  color: #fff; border-color: #e97818;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 153, 43, .2), transparent 31%),
    linear-gradient(145deg, #192226, #071014 72%);
  box-shadow: inset 0 0 0 5px rgba(255, 122, 0, .08), 0 0 0 6px rgba(225, 104, 17, .07), 0 0 18px rgba(201, 79, 0, .35);
}
html[data-theme="light"] .payment-unavailable-dialog .payment-unavailable-note {
  color: var(--muted);
  border-top-color: var(--line);
}

/* Home assistant idea dialog reuses the approved PECHKA MUSIC modal shell. */
.app-overlay-root .home-assistant-dialog { width: min(100%, 560px); text-align: left; }
.home-assistant-dialog > h2 { max-width: 410px; margin-bottom: 7px; }
.home-assistant-field { display: grid; gap: 7px; }
.home-assistant-field > span { color: #98a4ab; font-size: 13px; font-weight: 500; line-height: 1.34; }
.home-assistant-field textarea {
  width: 100%; min-height: 168px; padding: 14px 18px 20px; resize: none;
  border: 1px solid rgba(255, 122, 0, .48); border-radius: 17px;
  color: #f7f8fa; background: rgba(2, 11, 16, .72); caret-color: var(--accent);
  font: inherit; font-size: 14px; line-height: 1.48; outline: none;
  box-shadow: inset 0 0 20px rgba(255, 122, 0, .035);
}
.home-assistant-field textarea::placeholder {
  color: #93a3ae;
  opacity: 1;
  font-style: italic;
  font-weight: 400;
}
.home-assistant-counter {
  display: block;
  margin: 2px 4px 0;
  color: #7f8a91;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  text-align: right;
}
.home-assistant-options {
  display: grid;
  width: 100%;
  min-height: 0 !important;
  gap: 8px;
  margin-top: 9px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.home-assistant-categories {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.home-assistant-options .occasion-premium-choice {
  min-height: 48px;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 15px;
}
.home-assistant-options .home-assistant-category {
  min-width: 0;
  min-height: 46px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 18px minmax(17px, auto);
  place-items: center;
  gap: 1px;
  padding: 3px 2px;
  border-radius: 12px;
  text-align: center;
}
.home-assistant-options .home-assistant-category .occasion-choice-icon { width: 18px; height: 18px; }
.home-assistant-options .home-assistant-category .occasion-choice-icon :is(.icon, svg) { width: 17px; height: 17px; }
.home-assistant-options .home-assistant-category > span:nth-child(2) {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: #f7f8fa;
  font-size: 9px;
  font-weight: 760;
  line-height: 1.08;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.home-assistant-options .occasion-choice-icon { width: 28px; height: 28px; }
.home-assistant-options .occasion-choice-icon :is(.icon, svg) { width: 24px; height: 24px; }
.home-assistant-options .occasion-premium-choice > span:nth-child(2) { font-size: 12px; }
.home-assistant-options .occasion-premium-choice.home-assistant-category > span:nth-child(2) {
  font-size: 9px;
  line-height: 1.05;
}
.home-assistant-choice-overlay {
  position: fixed;
  z-index: 1400;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  background: rgba(1, 5, 7, .66);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}
.home-assistant-choice-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
}
.home-assistant-choice-popover {
  position: relative;
  z-index: 1;
  width: min(100%, 370px);
  min-height: 0 !important;
  max-height: calc(100dvh - 28px);
  padding: 13px;
  overflow: hidden;
  border: 1px solid rgba(255, 122, 0, .72);
  border-radius: 21px;
  background:
    radial-gradient(circle at 20% 0, rgba(255, 122, 0, .12), transparent 34%),
    linear-gradient(145deg, rgba(10, 24, 29, .99), rgba(3, 10, 13, .99));
  box-shadow: inset 0 1px 0 rgba(255, 223, 184, .08), 0 0 30px rgba(255, 122, 0, .2), 0 24px 70px rgba(0, 0, 0, .58);
}
.home-assistant-choice-popover > header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.home-assistant-choice-popover > header .occasion-choice-icon { width: 30px; height: 30px; }
.home-assistant-choice-popover > header b { color: #fff; font-size: 16px; line-height: 1.1; }
.home-assistant-choice-close {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 122, 0, .32);
  border-radius: 50%;
  color: #ff9a28;
  background: rgba(3, 12, 16, .78);
}
.home-assistant-choice-close::before,
.home-assistant-choice-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 2.5px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 7px rgba(255, 122, 0, .34);
  transform-origin: center;
}
.home-assistant-choice-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.home-assistant-choice-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.home-assistant-choice-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  max-height: min(58dvh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.home-assistant-options .home-assistant-option {
  min-height: 44px;
  grid-template-columns: 25px minmax(0, 1fr) !important;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 13px;
  text-align: left;
}
.home-assistant-options .home-assistant-option .occasion-choice-icon { width: 25px; height: 25px; }
.home-assistant-options .home-assistant-option .occasion-choice-icon :is(.icon, svg) { width: 21px; height: 21px; }
.home-assistant-options .home-assistant-option > span:nth-child(2) { font-size: 11px; line-height: 1.12; }
.home-assistant-dialog {
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.home-assistant-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 122, 0, .14), inset 0 0 20px rgba(255, 122, 0, .04); }
.home-assistant-error { margin: 10px 2px 0 !important; color: #ffb06a !important; font-size: 13px; line-height: 1.4 !important; }
.home-assistant-dialog .dialog-actions { grid-template-columns: .8fr 1.35fr; }

html[data-theme="light"] .home-assistant-field > span { color: var(--muted); }
html[data-theme="light"] .home-assistant-field textarea {
  color: var(--text); border-color: rgba(201, 79, 0, .42); background: #fffdfa;
  box-shadow: inset 0 0 18px rgba(201, 79, 0, .025);
}
html[data-theme="light"] .home-assistant-field textarea::placeholder { color: var(--muted); }
html[data-theme="light"] .home-assistant-counter { color: var(--muted); }
html[data-theme="light"] .home-assistant-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201, 79, 0, .12); }
html[data-theme="light"] .home-assistant-error { color: #a94000 !important; }

@media (max-height: 650px) {
  .home-assistant-dialog > h2 { margin-bottom: 5px; }
  .home-assistant-field textarea { min-height: 82px; }
}

@media (max-width: 600px) {
  .app-overlay-root .home-assistant-dialog { padding: 14px 15px; }
  .app-overlay-root .home-assistant-dialog .purchase-brand { margin-bottom: 7px; }
  .app-overlay-root .home-assistant-dialog > h2 { margin-bottom: 6px; font-size: clamp(23px, 7vw, 27px); line-height: 1.08; }
  .home-assistant-field textarea { min-height: 96px; }
  .home-assistant-dialog .dialog-actions { gap: 8px; margin-top: 11px; }
  .home-assistant-dialog .dialog-actions button { min-height: 44px; }
  .home-assistant-options .home-assistant-category { min-height: 44px; padding: 2px; }
  .home-assistant-options .home-assistant-option { min-height: 43px; padding: 6px 7px; }
}

@media (max-width: 600px) and (max-height: 650px) {
  .app-overlay-root > .home-assistant-scrim { padding-block: 8px; }
  .app-overlay-root .home-assistant-dialog { max-height: calc(100dvh - 16px); padding-block: 11px; overflow-y: auto; }
  .app-overlay-root .home-assistant-dialog .purchase-brand { grid-template-columns: 40px minmax(0, 1fr); }
  .app-overlay-root .home-assistant-dialog .purchase-brand .brand-avatar { width: 40px; height: 40px; }
  .home-assistant-field textarea { min-height: 76px; padding: 5px 14px 7px; }
}

/* r39: song titles, compact library card and full-song controls */
.unlocked-song-heading {
  align-items: center;
  min-height: 49px;
}
.unlocked-song-heading h2 { margin-bottom: 0; }
.song-title-edit {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.song-title-edit .icon { width: 23px; height: 23px; }
.song-title-edit:hover,
.song-title-edit:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: 0 0 15px color-mix(in srgb, var(--accent) 17%, transparent);
  outline: none;
}
.unlocked-actions .secondary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.unlocked-actions .secondary-button .icon {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  color: var(--accent);
  stroke-width: 2.15;
}
.unlocked-actions .secondary-button > span { min-width: 0; }
.song-rename-dialog { width: min(390px, calc(100vw - 28px)); }
.song-rename-dialog > h2 { margin: 23px 0 15px; text-align: left; }
.song-rename-field { display: grid; gap: 7px; text-align: left; }
.song-rename-field > span { color: var(--muted); font-size: 13px; font-weight: 700; }
.song-rename-field input {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--text);
  background: var(--card-muted);
  font: inherit;
  font-weight: 700;
  outline: none;
}
.song-rename-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.song-rename-error { margin: 8px 0 0 !important; color: #d85848 !important; text-align: left; font-size: 13px; }
.song-rename-dialog .dialog-actions { margin-top: 17px; }

.songs-library-screen .song-list-card { border-radius: 17px; }
.songs-library-screen .song-open {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 9px;
  min-height: 88px;
  padding: 7px 58px 7px 7px;
}
.songs-library-screen .song-thumbnail { width: 72px; border-radius: 12px; }
.songs-library-screen .song-open b { font-size: 14px; line-height: 1.22; }
.songs-library-screen .song-open small { margin-top: 3px; font-size: 10.5px; }
.songs-library-screen .song-open em { margin-top: 3px; font-size: 10.5px; }
.songs-library-screen .song-list-play {
  right: 10px;
  top: 46%;
  width: 43px;
  height: 43px;
  padding-left: 3px;
  font-size: 21px;
}
.songs-carousel .songs-list { min-height: 88px; }

html[data-theme="light"] .song-rename-field input { background: #fffdfa; }
html[data-theme="light"] .song-title-edit { color: var(--accent); }

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .unlocked-actions .secondary-button:hover,
  html[data-theme="light"] .unlocked-actions .secondary-button:focus-visible {
    border-color: var(--accent);
    background: #fff2e6;
    box-shadow: 0 0 0 1px rgba(201, 79, 0, .12), 0 0 18px rgba(201, 79, 0, .16);
  }
}

/* Keep the compact generation composition last in the cascade. */
.generation-visual-screen .music-generation-hero,
.generation-visual-screen .music-generation-hero.choice-ready {
  min-height: 224px;
  margin: 0 -16px;
  padding: 10px 18px 13px;
  justify-content: flex-start;
  background: radial-gradient(circle at 50% 31%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 35%);
}
.generation-visual-screen .music-orbit,
.generation-visual-screen .music-generation-hero.choice-ready .music-orbit {
  width: 140px;
  height: 140px;
  margin: -2px auto 7px;
  transform: none;
}
.generation-visual-screen .music-orbit .brand-avatar,
.generation-visual-screen .music-generation-hero.choice-ready .music-orbit .brand-avatar {
  width: 102px;
  height: 102px;
}
.generation-visual-screen .music-generation-hero h1 { font-size: clamp(27px, 7.2vw, 33px); }
.generation-visual-screen .generation-steps { margin-top: 0; padding: 13px 15px 9px; border-radius: 21px; }

@media (max-width: 380px) {
  .generation-visual-screen .music-generation-hero,
  .generation-visual-screen .music-generation-hero.choice-ready { min-height: 212px; padding-inline: 12px; }
  .generation-visual-screen .music-orbit,
  .generation-visual-screen .music-generation-hero.choice-ready .music-orbit { width: 130px; height: 130px; }
  .generation-visual-screen .music-generation-hero h1 { font-size: 27px; }
}

/* r41: visible functional motion in MAX WebView and premium progress controls. */
.generation-visual-screen .music-orbit .brand-avatar {
  transform-origin: center;
  animation: pechka-logo-breathe 1.85s ease-in-out infinite;
  will-change: transform, filter;
}
.generation-visual-screen .music-orbit::before,
.generation-visual-screen .music-orbit::after {
  border-width: 2px;
  animation: pechka-generation-wave-visible 2.2s cubic-bezier(.2, .62, .32, 1) infinite;
  will-change: transform, opacity;
}
.generation-visual-screen .music-orbit::after { animation-delay: 1.05s; }
@keyframes pechka-logo-breathe {
  0%, 100% { transform: scale(.93); filter: brightness(.94) drop-shadow(0 0 7px rgba(255, 122, 0, .52)); }
  50% { transform: scale(1.08); filter: brightness(1.14) drop-shadow(0 0 19px rgba(255, 153, 47, .92)); }
}
@keyframes pechka-generation-wave-visible {
  0% { transform: scale(.68); opacity: 0; }
  18% { opacity: .92; }
  72% { opacity: .38; }
  100% { transform: scale(1.42); opacity: 0; }
}

.generation-step-dots {
  min-width: 32px;
  height: 14px;
  display: flex !important;
  align-items: center;
  gap: 4px;
  visibility: visible !important;
  opacity: 1 !important;
}
.generation-step-dots i {
  width: 6px;
  height: 6px;
  display: block;
  flex: 0 0 6px;
  opacity: 0;
  transform: scale(.72);
  border-radius: 50%;
  background: #ff8618;
  box-shadow: 0 0 8px rgba(255, 134, 24, .82);
  animation-duration: 1.8s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}
.generation-step-dots i:nth-child(1) { animation-name: generation-dot-one; }
.generation-step-dots i:nth-child(2) { animation-name: generation-dot-two; animation-delay: 0s; }
.generation-step-dots i:nth-child(3) { animation-name: generation-dot-three; animation-delay: 0s; }
@keyframes generation-dot-one {
  0%, 11%, 72%, 100% { opacity: 0; transform: scale(.72); }
  12%, 71% { opacity: 1; transform: scale(1); }
}
@keyframes generation-dot-two {
  0%, 29%, 72%, 100% { opacity: 0; transform: scale(.72); }
  30%, 71% { opacity: 1; transform: scale(1); }
}
@keyframes generation-dot-three {
  0%, 47%, 72%, 100% { opacity: 0; transform: scale(.72); }
  48%, 71% { opacity: 1; transform: scale(1); }
}

.restyled-shell .generation-visual-screen .generation-steps li > span {
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255, 139, 31, .72);
  background: linear-gradient(145deg, rgba(43, 28, 17, .88), rgba(8, 20, 25, .98));
  box-shadow: inset 0 1px 2px rgba(255, 222, 187, .16), inset 0 -7px 12px rgba(0, 0, 0, .22), 0 0 10px rgba(255, 122, 0, .14);
}
.restyled-shell .generation-visual-screen .generation-steps li > span::before {
  content: '';
  position: absolute;
  inset: 3px 5px auto;
  height: 34%;
  border-radius: 50%;
  background: linear-gradient(rgba(255, 235, 213, .2), transparent);
  pointer-events: none;
}
.restyled-shell .generation-visual-screen .generation-steps li.done > span {
  border-color: #ff8618;
  color: #ffd09a;
  background: radial-gradient(circle at 38% 30%, rgba(255, 143, 32, .31), transparent 42%), linear-gradient(145deg, #5a2609, #21150f 72%);
  box-shadow: inset 0 1px 2px rgba(255, 229, 198, .24), inset 0 -8px 13px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 122, 0, .18), 0 0 15px rgba(255, 122, 0, .34);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72), 0 0 7px rgba(255, 190, 112, .45);
}
.restyled-shell .generation-visual-screen .generation-steps li.active > span {
  border-color: #ff982f;
  background: radial-gradient(circle at 42% 35%, rgba(255, 143, 32, .18), transparent 46%), linear-gradient(145deg, #352013, #09171c 74%);
  box-shadow: inset 0 1px 2px rgba(255, 229, 198, .18), inset 0 -7px 12px rgba(0, 0, 0, .26), 0 0 0 4px rgba(255, 122, 0, .07), 0 0 17px rgba(255, 122, 0, .42);
}
html[data-theme="light"] .restyled-shell .generation-visual-screen .generation-steps li > span {
  border-color: rgba(205, 82, 0, .72);
  background: linear-gradient(145deg, #fffdf9, #ead9ca);
  box-shadow: inset 0 1px 2px #fff, inset 0 -6px 11px rgba(121, 65, 24, .12), 0 0 10px rgba(201, 79, 0, .12);
}
html[data-theme="light"] .restyled-shell .generation-visual-screen .generation-steps li.done > span {
  border-color: #db620d;
  color: #fff8ef;
  background: radial-gradient(circle at 36% 28%, #f59a48, transparent 39%), linear-gradient(145deg, #d96715, #9f3b00 76%);
  box-shadow: inset 0 1px 2px rgba(255, 245, 232, .72), inset 0 -8px 12px rgba(103, 38, 0, .18), 0 0 0 1px rgba(201, 79, 0, .15), 0 0 13px rgba(201, 79, 0, .24);
}
html[data-theme="light"] .restyled-shell .generation-visual-screen .generation-steps li.active > span {
  border-color: #d85d08;
  background: radial-gradient(circle at 38% 28%, #fff, transparent 42%), linear-gradient(145deg, #fff7ef, #e8d4c2 76%);
  box-shadow: inset 0 1px 2px #fff, inset 0 -7px 11px rgba(121, 65, 24, .12), 0 0 0 4px rgba(201, 79, 0, .06), 0 0 14px rgba(201, 79, 0, .25);
}

.generation-variant .variant-player-controls { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; }
.generation-variant .variant-play {
  position: relative;
  width: 54px;
  height: 54px;
  padding: 0 0 1px 5px;
  border: 2px solid #ff9b36;
  color: #fff;
  background: radial-gradient(circle at 35% 27%, #ffc16d, transparent 25%), linear-gradient(145deg, #f28a28, #b44200 76%);
  box-shadow: inset 0 2px 3px rgba(255, 237, 214, .45), inset 0 -9px 14px rgba(101, 34, 0, .25), 0 0 0 1px rgba(255, 122, 0, .18), 0 7px 16px rgba(121, 45, 0, .27), 0 0 16px rgba(255, 122, 0, .28);
  font-size: 32px;
  line-height: 1;
  text-shadow: 0 2px 3px rgba(83, 28, 0, .38);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.generation-variant .variant-play:hover,
.generation-variant .variant-play:focus-visible {
  transform: scale(1.05);
  filter: brightness(1.08);
  box-shadow: inset 0 2px 3px rgba(255, 237, 214, .52), inset 0 -9px 14px rgba(101, 34, 0, .22), 0 0 0 1px rgba(255, 122, 0, .2), 0 8px 18px rgba(121, 45, 0, .3), 0 0 21px rgba(255, 122, 0, .4);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .generation-visual-screen .music-orbit .brand-avatar {
    animation-duration: 1.85s !important;
    animation-iteration-count: infinite !important;
  }
  .generation-visual-screen .music-orbit::before,
  .generation-visual-screen .music-orbit::after {
    animation-duration: 2.2s !important;
    animation-iteration-count: infinite !important;
  }
  .generation-step-dots i {
    animation-duration: 1.8s !important;
    animation-iteration-count: infinite !important;
  }
}

@media (max-width: 380px) {
  .generation-variant .variant-player-controls { grid-template-columns: 50px minmax(0, 1fr); gap: 8px; }
  .generation-variant .variant-play { width: 50px; height: 50px; font-size: 29px; }
}

.pechka-play-control {
  --playback-glyph-size: 22px;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 2px solid #ff9b36;
  color: #fff;
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 229, 190, .82) 0 5%, rgba(255, 167, 75, .48) 17%, transparent 36%),
    linear-gradient(145deg, #f28a28 0%, #d05a08 52%, #9e3500 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 237, 214, .48),
    inset 0 -9px 14px rgba(101, 34, 0, .28),
    0 0 0 1px rgba(255, 122, 0, .16),
    0 7px 16px rgba(121, 45, 0, .27),
    0 0 16px rgba(255, 122, 0, .28);
  text-shadow: none;
  transition: filter .14s ease, box-shadow .14s ease;
}

.pechka-play-control::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 3px;
  border: 1px solid rgba(255, 223, 188, .2);
  border-radius: inherit;
  pointer-events: none;
}

.pechka-play-control .playback-glyph {
  position: relative;
  display: block;
  width: var(--playback-glyph-size);
  height: var(--playback-glyph-size);
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(77, 24, 0, .38));
}

.pechka-play-control .playback-glyph::before {
  content: '';
  position: absolute;
  left: 57.5%;
  top: 50%;
  width: 74%;
  height: 88%;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translate(-50%, -50%);
}

.pechka-play-control.is-paused .playback-glyph::before {
  left: 50%;
  width: 56%;
  height: 70%;
  background: linear-gradient(90deg, #fff 0 32%, transparent 32% 68%, #fff 68% 100%);
  clip-path: none;
}

.preview-play.pechka-play-control { --playback-glyph-size: 23px; }
.generation-variant .variant-play.pechka-play-control {
  --playback-glyph-size: 24px;
  padding: 0;
}
.songs-library-screen .song-list-play.pechka-play-control {
  --playback-glyph-size: 18px;
  position: absolute;
  padding: 0;
}

.pechka-play-control:not(:disabled):hover,
.pechka-play-control:not(:disabled):focus-visible {
  filter: brightness(1.08);
  box-shadow:
    inset 0 2px 3px rgba(255, 237, 214, .55),
    inset 0 -9px 14px rgba(101, 34, 0, .23),
    0 0 0 1px rgba(255, 122, 0, .22),
    0 8px 18px rgba(121, 45, 0, .31),
    0 0 21px rgba(255, 122, 0, .42);
  outline: none;
}

.pechka-play-control:disabled {
  border-color: var(--line);
  color: var(--muted);
  background: linear-gradient(145deg, var(--card-muted), color-mix(in srgb, var(--card-muted) 78%, #7c7169 22%));
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .14);
  cursor: default;
  filter: none;
}

.pechka-play-control:disabled .playback-glyph::before { background: currentColor; }

/* Payment pending: premium PECHKA MUSIC status dialog. Scoped to this state only. */
.payment-pending-status-scrim {
  z-index: 130;
  place-items: center;
  overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .84);
}
.restyled-shell .payment-pending-status-dialog,
.payment-pending-status-dialog {
  position: relative;
  width: min(390px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 22px;
  border: 1px solid rgba(255, 122, 0, .74);
  border-radius: 27px;
  color: #f7f8fa;
  text-align: left;
  background:
    radial-gradient(circle at 18% 2%, rgba(255, 122, 0, .19), transparent 35%),
    linear-gradient(145deg, #061a22, #020b10 74%);
  box-shadow: 0 0 0 1px rgba(255, 122, 0, .18), 0 0 34px rgba(255, 122, 0, .2), 0 28px 80px rgba(0, 0, 0, .64);
}
.payment-pending-status-dialog .purchase-brand {
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 11px;
  margin: -2px 0 18px;
}
.payment-pending-status-dialog .purchase-brand .brand-avatar { width: 52px; height: 52px; }
.payment-pending-status-dialog .purchase-brand b { font-size: 18px; }
.payment-pending-status-dialog .purchase-brand small { font-size: 11px; }
.payment-pending-status-mark {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  margin: 0 0 17px;
  border: 1px solid rgba(255, 122, 0, .55);
  border-radius: 22px;
  color: var(--accent);
  background: linear-gradient(145deg, rgba(255, 122, 0, .2), rgba(255, 122, 0, .06));
  box-shadow: inset 0 1px 0 rgba(255, 220, 187, .14), 0 0 24px rgba(255, 122, 0, .18);
}
.payment-pending-status-mark .icon { width: 32px; height: 32px; }
.payment-pending-status-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.payment-pending-status-dialog > h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 8vw, 35px);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.payment-pending-status-dialog > p {
  margin: 15px 0 0;
  color: #e5eaed;
  font-size: 17px;
  line-height: 1.45;
}
.payment-pending-status-dialog .payment-pending-status-note {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid rgba(183, 201, 232, .24);
  color: #aebdc7;
  font-size: 14px;
  line-height: 1.45;
}
.payment-pending-status-dialog .dialog-actions {
  grid-template-columns: .82fr 1.3fr;
  gap: 10px;
  margin-top: 18px;
}
.payment-pending-status-dialog .dialog-actions.single { grid-template-columns: 1fr; }
.payment-pending-status-dialog .dialog-actions button {
  min-height: 56px;
  padding-inline: 14px;
  border-radius: 18px;
  font-size: 16px;
  line-height: 1.16;
}
.payment-pending-status-dialog .primary-button {
  border: 1px solid #ff8a20;
  color: #fff;
  background: linear-gradient(135deg, #ff9a16, #ff6509);
  box-shadow: inset 0 1px 0 rgba(255, 239, 211, .34), 0 10px 24px rgba(255, 122, 0, .24);
}
.payment-pending-status-dialog .secondary-button {
  border: 1px solid rgba(138, 158, 172, .55);
  color: #fff;
  background: rgba(4, 18, 24, .72);
}
.payment-pending-status-dialog button:hover,
.payment-pending-status-dialog button:focus-visible {
  filter: brightness(1.1);
  outline: none;
  box-shadow: 0 0 21px rgba(255, 122, 0, .27);
}
.payment-pending-status-dialog button:active { transform: scale(.99); }

html[data-theme="light"] .payment-pending-status-scrim { background: rgba(42, 33, 27, .46); }
html[data-theme="light"] .payment-pending-status-dialog {
  color: var(--text);
  border-color: rgba(201, 79, 0, .72);
  background:
    radial-gradient(circle at 18% 2%, rgba(225, 104, 17, .11), transparent 35%),
    linear-gradient(145deg, #fffdfa, #f7eee5 76%);
  box-shadow: 0 0 0 1px rgba(201, 79, 0, .12), 0 0 28px rgba(201, 79, 0, .13), 0 28px 70px rgba(42, 33, 27, .27);
}
html[data-theme="light"] .payment-pending-status-mark {
  color: var(--accent);
  border-color: rgba(201, 79, 0, .48);
  background: linear-gradient(145deg, #fff1e2, #fffaf5);
  box-shadow: inset 0 1px 0 #fff, 0 0 20px rgba(201, 79, 0, .16);
}
html[data-theme="light"] .payment-pending-status-dialog > h2,
html[data-theme="light"] .payment-pending-status-dialog > p { color: var(--text); }
html[data-theme="light"] .payment-pending-status-dialog .payment-pending-status-note {
  color: var(--muted);
  border-top-color: var(--line);
}
html[data-theme="light"] .payment-pending-status-dialog .primary-button {
  border-color: #d7620e;
  color: #fff;
  background: linear-gradient(135deg, #d7600b, #ed8425);
  box-shadow: inset 0 1px 0 rgba(255, 240, 224, .34), 0 8px 20px rgba(201, 79, 0, .18);
}
html[data-theme="light"] .payment-pending-status-dialog .secondary-button {
  border-color: #bcaea2;
  color: var(--text);
  background: #fffdfa;
}

@media (max-width: 380px) {
  .restyled-shell .payment-pending-status-dialog,
  .payment-pending-status-dialog { padding: 19px 17px; }
  .payment-pending-status-dialog > h2 { font-size: 29px; }
  .payment-pending-status-dialog .dialog-actions { gap: 8px; }
  .payment-pending-status-dialog .dialog-actions button { padding-inline: 10px; font-size: 15px; }
}

@media (max-height: 650px) {
  .payment-pending-status-dialog { padding-block: 16px; }
  .payment-pending-status-dialog .purchase-brand { margin-bottom: 11px; }
  .payment-pending-status-mark { width: 54px; height: 54px; margin-bottom: 11px; border-radius: 18px; }
  .payment-pending-status-mark .icon { width: 27px; height: 27px; }
  .payment-pending-status-dialog > h2 { font-size: 27px; }
  .payment-pending-status-dialog > p { margin-top: 11px; font-size: 15px; }
  .payment-pending-status-dialog .payment-pending-status-note { margin-top: 11px; padding-top: 10px; font-size: 13px; }
  .payment-pending-status-dialog .dialog-actions { margin-top: 12px; }
  .payment-pending-status-dialog .dialog-actions button { min-height: 50px; }
}
.result-action-confirm {
  width: 100%;
  margin-top: 0.85rem;
}
.result-action-confirm:has(.result-action-loading-dots) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.result-action-loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 28px;
}
.result-action-loading-dots i {
  width: 6px;
  height: 6px;
}

.settings-actions {
  margin-top: 1.25rem;
}
/* r62 shared, audio-reactive PECHKA MUSIC track pulsator */
.track-pulsator {
  --energy: 0;
  --bass: 0;
  --beat: 0;
  --pulsator-fullscreen-bg: #020d13;
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1.58;
  overflow: visible;
  border: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
}
.track-pulsator canvas { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; display: block; -webkit-mask-image: radial-gradient(ellipse at center, #000 0 66%, rgba(0,0,0,.88) 76%, transparent 100%); mask-image: radial-gradient(ellipse at center, #000 0 66%, rgba(0,0,0,.88) 76%, transparent 100%); }
.track-pulsator-rings,
.track-pulsator-core { pointer-events: none; }
.track-pulsator-rings { position: absolute; z-index: 1; inset: 50% auto auto 50%; width: min(52%, 226px); aspect-ratio: 1; transform: translate(-50%, -50%) scale(calc(1 + var(--energy) * .06 + var(--beat) * .1)); transition: transform 90ms linear; }
.track-pulsator-rings i { position: absolute; inset: 15%; border: 1px solid rgba(255,135,18,.78); border-radius: 50%; opacity: 0; box-shadow: 0 0 calc(8px + var(--energy) * 25px) rgba(255,105,0,.46), inset 0 0 12px rgba(255,145,28,.12); animation: pechka-sound-ring 2.85s cubic-bezier(.18,.55,.3,1) infinite; }
.track-pulsator-rings i:nth-child(2) { animation-delay: .95s; }
.track-pulsator-rings i:nth-child(3) { animation-delay: 1.9s; }
.track-pulsator-core { position: absolute; z-index: 2; left: 50%; top: 50%; width: min(21%, 86px); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; transform: translate(-50%, -50%) scale(calc(1 + var(--energy) * .07 + var(--beat) * .1)); border: 1px solid rgba(255,152,32,.72); border-radius: 50%; background: radial-gradient(circle, rgba(255,112,0,.23), rgba(2,15,22,.92) 68%); box-shadow: inset 0 0 18px rgba(255,122,0,.18), 0 0 calc(14px + var(--energy) * 30px) rgba(255,112,0,.5); transition: transform 90ms linear; }
.track-pulsator-core img { width: 88%; height: 88%; border-radius: 50%; clip-path: circle(49% at 50% 50%); object-fit: cover; filter: drop-shadow(0 0 8px rgba(255,132,18,.72)); }
@keyframes pechka-sound-ring {
  0% { opacity: 0; transform: scale(.42); }
  12% { opacity: calc(.34 + var(--energy) * .34); }
  72% { opacity: calc(.1 + var(--energy) * .13); }
  100% { opacity: 0; transform: scale(1.72); }
}
.track-pulsator-fullscreen { position: absolute; z-index: 4; right: 10px; top: 10px; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,151,34,.5); border-radius: 13px; color: #fff; background: rgba(2,15,22,.7); backdrop-filter: blur(10px); cursor: pointer; }
.track-pulsator-fullscreen svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.track-pulsator-fullscreen .fullscreen-exit-icon { display: none; }
.track-pulsator-fullscreen .fullscreen-enter-icon { display: block; }
.track-pulsator-fullscreen:hover,
.track-pulsator-fullscreen:focus-visible { border-color: var(--accent); outline: none; box-shadow: 0 0 18px rgba(255,122,0,.28); }
.track-pulsator-compact { width: 76px; min-width: 76px; aspect-ratio: 1; border-radius: 18px; }
.track-pulsator-compact .track-pulsator-rings { width: 64%; }
.track-pulsator-compact .track-pulsator-core { width: 35%; }
.song-thumbnail { flex: 0 0 76px; }
.generation-track-pulsator { width: 214px; aspect-ratio: 1; margin: 0 auto 20px; border-radius: 50%; }
.generation-track-pulsator .track-pulsator-rings { width: 80%; }
.generation-track-pulsator .track-pulsator-core { width: 42%; }
.music-generation-hero.choice-ready .generation-track-pulsator { width: 158px; margin-bottom: -2px; }
.result-track-pulsator { margin-bottom: 10px; }
.track-pulsator:fullscreen,
.track-pulsator:-webkit-full-screen,
.track-pulsator.pulsator-fullscreen-active { position: fixed !important; z-index: 2147483646 !important; inset: 0 !important; width: 100dvw !important; height: 100dvh !important; max-width: none !important; margin: 0 !important; padding: 0 !important; aspect-ratio: auto; border: 0; border-radius: 0; background: var(--pulsator-fullscreen-bg); box-shadow: none; }
.track-pulsator.pulsator-fullscreen-active .track-pulsator-fullscreen { z-index: 2147483647; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); width: 50px; height: 50px; border-radius: 16px; background: rgba(2,15,22,.82); }
.track-pulsator.pulsator-fullscreen-active .fullscreen-enter-icon { display: none; }
.track-pulsator.pulsator-fullscreen-active .fullscreen-exit-icon { display: block; }
.track-pulsator:fullscreen .track-pulsator-rings,
.track-pulsator:-webkit-full-screen .track-pulsator-rings,
.track-pulsator.pulsator-fullscreen-active .track-pulsator-rings { width: min(68vw, 68vh); }
.track-pulsator:fullscreen .track-pulsator-core,
.track-pulsator:-webkit-full-screen .track-pulsator-core,
.track-pulsator.pulsator-fullscreen-active .track-pulsator-core { width: min(23vw, 23vh); max-width: 180px; }
.track-pulsator::backdrop { background: var(--pulsator-fullscreen-bg); }
html.pulsator-overlay-open,
html.pulsator-overlay-open body { overflow: hidden !important; overscroll-behavior: none; background: #020d13; }
html.pulsator-overlay-open body * { visibility: hidden !important; }
html.pulsator-overlay-open .pulsator-fullscreen-active,
html.pulsator-overlay-open .pulsator-fullscreen-active * { visibility: visible !important; }

.restyled-shell .result-visual-screen > .locked-song-card.unlocked-song-card {
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none;
}
.restyled-shell .result-visual-screen > .unlocked-song-card > :is(.result-track-pulsator, .unlocked-song-heading, .full-controls) {
  background: transparent;
  background-image: none;
  box-shadow: none;
}
.unlocked-song-heading { position: relative; z-index: 3; margin-top: -12px; padding: 0 2px 1px; }
.unlocked-song-heading h2 { font-size: clamp(22px, 6vw, 30px); }
.unlocked-song-card .full-controls { margin-top: -2px; padding: 0 2px; }
.result-track-pulsator { margin-bottom: 0; }
.restyled-shell .result-track-navigation { width: calc(100% - 32px); max-width: 640px; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px auto 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.result-track-navigation button { min-height: 56px; border-radius: 18px; box-shadow: none; }
.result-track-navigation button + button { border-left: 0; }
.unlocked-actions { width: calc(100% - 16px); max-width: 656px; margin: 14px auto 0; }
.unlocked-actions .secondary-button { min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 5px; flex-direction: column; padding: 8px 10px; text-align: center; font-size: 13px; line-height: 1.12; }
.unlocked-actions .secondary-button .icon { width: 24px; height: 24px; color: var(--accent); }
.unlocked-actions .secondary-button > span:last-child { width: 100%; overflow: visible; text-align: center; }
.result-action-confirm { width: calc((100% - 18px) / 2); max-width: 327px; min-height: 50px; margin: 12px auto 0; padding-inline: 10px; font-size: 13px; }
.restyled-shell .songs-library-screen .song-list-card { border-color: rgba(255, 122, 0, .72); background: transparent; background-image: none; box-shadow: none; }
.restyled-shell .songs-library-screen .my-songs-note {
  margin: -11px 2px 11px;
  padding: 0 6px;
  border: 0;
  border-radius: 0;
  color: #e99a55;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(9.5px, 2.7vw, 10.5px);
  font-weight: 500;
  line-height: 1.48;
  transform: rotate(-.25deg);
}
.restyled-shell .songs-library-screen .my-songs-note span { display: block; white-space: nowrap; }
.result-lower-actions { position: relative; min-height: 64px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; margin-top: 14px; }
.result-lower-actions .result-support { grid-column: 2; margin: 0; justify-self: center; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.song-delete-icon { grid-column: 3; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #b94a46; background: transparent; cursor: pointer; }
.song-delete-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.song-delete-icon:hover,
.song-delete-icon:focus-visible { outline: none; background: rgba(185,74,70,.09); box-shadow: 0 0 18px rgba(185,74,70,.18); }

.song-delete-scrim { backdrop-filter: blur(14px); background: rgba(0,8,12,.76); }
.song-delete-dialog { max-width: 430px; padding: 23px; overflow: hidden; text-align: center; border: 1px solid color-mix(in srgb, var(--accent) 70%, #12c7e5 20%); border-radius: 26px; background: radial-gradient(circle at 50% 38%, rgba(255,69,40,.08), transparent 34%), radial-gradient(circle at 14% 0, rgba(255,122,0,.13), transparent 36%), linear-gradient(155deg, #071d27, #031018 78%); box-shadow: 0 0 0 1px rgba(255,122,0,.12), 0 0 34px rgba(255,122,0,.18), 0 28px 80px rgba(0,0,0,.58); }
.song-delete-dialog .purchase-brand { text-align: left; }
.song-delete-symbol { width: 88px; height: 88px; display: grid; place-items: center; margin: 18px auto 14px; border: 1px solid rgba(255,62,48,.7); border-radius: 50%; color: #ff302f; background: radial-gradient(circle, rgba(255,48,47,.18), rgba(2,14,20,.92) 67%); box-shadow: 0 0 27px rgba(255,48,47,.3), 0 0 0 10px rgba(255,122,0,.045); }
.song-delete-symbol svg { width: 43px; height: 43px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.song-delete-dialog h2 { margin: 0; color: #fff; font-size: clamp(30px, 8vw, 40px); }
.song-delete-dialog > p { margin: 12px 0 0; color: #bdcbd2; line-height: 1.5; }
.song-delete-dialog .dialog-actions { margin-top: 22px; }
.song-delete-dialog .dialog-actions button { min-height: 57px; }
.danger-button { border: 1px solid #ff5b32; border-radius: 17px; color: #fff; background: linear-gradient(135deg, #c91414, #f24616); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 24px rgba(220,36,20,.23); font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
.danger-button:hover,
.danger-button:focus-visible { outline: none; filter: brightness(1.08); box-shadow: 0 0 22px rgba(255,55,38,.32); }
.song-delete-error { padding: 10px 12px; border: 1px solid rgba(255,70,55,.55); border-radius: 13px; color: #ffb2aa !important; background: rgba(160,20,17,.16); }

html[data-theme="light"] .track-pulsator { --pulsator-fullscreen-bg: #f7f1e9; border: 0; background: transparent; box-shadow: none; }
html[data-theme="light"] .restyled-shell .songs-library-screen .my-songs-note { color: #a94e18; background: transparent !important; background-image: none !important; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="light"] .restyled-shell .songs-library-screen .song-list-card { border-color: rgba(201, 79, 0, .58); background: transparent; background-image: none; box-shadow: none; }
html[data-theme="light"] .song-delete-icon { color: #a5413d; }
html[data-theme="light"] .track-pulsator:fullscreen,
html[data-theme="light"] .track-pulsator:-webkit-full-screen,
html[data-theme="light"] .track-pulsator.pulsator-fullscreen-active { color-scheme: light; background: #f7f1e9 !important; background-color: #f7f1e9 !important; }
html[data-theme="light"].pulsator-overlay-open,
html[data-theme="light"].pulsator-overlay-open body { background: #f7f1e9; }
html[data-theme="light"] .track-pulsator:fullscreen .track-pulsator-fullscreen,
html[data-theme="light"] .track-pulsator:-webkit-full-screen .track-pulsator-fullscreen,
html[data-theme="light"] .track-pulsator.pulsator-fullscreen-active .track-pulsator-fullscreen { color: #2d221b; border-color: rgba(201,79,0,.44); background: rgba(255,250,244,.88); box-shadow: 0 0 18px rgba(201,79,0,.15); }
html[data-theme="light"] .song-delete-dialog { border-color: rgba(201,79,0,.68); background: radial-gradient(circle at 50% 38%, rgba(255,69,40,.07), transparent 34%), linear-gradient(150deg, #fffdf9, #f8eee6); }
html[data-theme="light"] .song-delete-dialog h2 { color: var(--text); }
html[data-theme="light"] .song-delete-dialog > p { color: var(--muted); }
html[data-theme="light"] .song-delete-dialog .secondary-button { color: var(--text); background: #fffdf9; }

@media (max-width: 390px) {
  .track-pulsator { border-radius: 17px; }
  .track-pulsator-fullscreen { width: 38px; height: 38px; right: 8px; top: 8px; }
  .track-pulsator-compact { width: 66px; min-width: 66px; border-radius: 15px; }
  .song-thumbnail { flex-basis: 66px; }
  .generation-track-pulsator { width: 184px; }
  .music-generation-hero.choice-ready .generation-track-pulsator { width: 138px; }
  .restyled-shell .result-track-navigation { width: calc(100% - 24px); gap: 8px; }
  .unlocked-actions { width: calc(100% - 12px); gap: 8px; }
  .result-track-navigation button { min-height: 54px; padding-inline: 10px; }
  .unlocked-actions .secondary-button { min-height: 56px; padding-inline: 7px; font-size: 12.5px; }
  .result-action-confirm { width: calc((100% - 18px) / 2); min-height: 48px; }
  .song-delete-dialog { padding: 20px 17px; }
  .song-delete-symbol { width: 76px; height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .track-pulsator-rings,
  .track-pulsator-core { transition: none; }
}

/* r76 — application-wide PECHKA MUSIC premium visual system.
   Visual cascade only: layout, navigation and product behavior remain unchanged. */
:root[data-theme="dark"] {
  --accent: #ff7a00;
  --accent-soft: rgba(255, 122, 0, .12);
  --accent-glow: #ffc45f;
  --bg: #03080a;
  --bg-pattern: rgba(255, 151, 39, .07);
  --card: rgba(8, 18, 22, .9);
  --card-solid: #081419;
  --card-muted: #0b171c;
  --line: rgba(255, 214, 166, .16);
  --text: #fff8f1;
  --muted: #c8beb5;
  --header: rgba(3, 9, 12, .88);
  --flow-bg: #03080a;
  --shadow: 0 18px 46px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 248, 239, .025);
}

:root:not([data-theme="dark"]),
:root[data-theme="light"] {
  --accent: #c94f00;
  --accent-soft: rgba(201, 79, 0, .1);
  --accent-glow: #e98225;
  --bg: #f7f1e9;
  --bg-pattern: rgba(201, 79, 0, .055);
  --card: rgba(255, 253, 249, .92);
  --card-solid: #fffdfa;
  --card-muted: #f4ebe1;
  --line: rgba(112, 78, 55, .2);
  --text: #271d17;
  --muted: #74675e;
  --header: rgba(255, 252, 247, .88);
  --flow-bg: #f7f1e9;
  --shadow: 0 16px 38px rgba(86, 54, 31, .11), inset 0 1px 0 rgba(255, 255, 255, .86);
}

html,
body { background-color: var(--bg); }
body {
  color: var(--text);
  background-image:
    radial-gradient(circle at 50% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 35%),
    radial-gradient(ellipse at 0 62%, color-mix(in srgb, var(--accent-glow) 5%, transparent), transparent 42%),
    radial-gradient(ellipse at 100% 82%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 97%, var(--accent) 3%), var(--bg));
  background-size: auto;
}

.app-shell,
.restyled-shell,
.occasion-premium-shell {
  color: var(--text);
  background-color: color-mix(in srgb, var(--bg) 97%, transparent);
  box-shadow: 0 0 72px rgba(0, 0, 0, .16);
}
:root[data-theme="dark"] :is(.restyled-shell, .occasion-premium-shell) {
  --occasion-bg: #03080a;
  --occasion-surface: #081419;
  --occasion-card: rgba(8, 18, 22, .92);
  --occasion-line: rgba(255, 214, 166, .17);
  --occasion-orange: #ff7a00;
  --occasion-gold: #ffc45f;
  --occasion-glow: #ff9a28;
  --occasion-muted: #c8beb5;
}
html[data-theme="light"] :is(.restyled-shell, .occasion-premium-shell) {
  --occasion-bg: #f7f1e9;
  --occasion-surface: #fffdfa;
  --occasion-card: rgba(255, 253, 249, .94);
  --occasion-line: rgba(112, 78, 55, .21);
  --occasion-orange: #c94f00;
  --occasion-gold: #df7a20;
  --occasion-glow: #e98225;
  --occasion-muted: #74675e;
}

.app-header {
  border-bottom-color: color-mix(in srgb, var(--accent) 16%, var(--line));
  background: color-mix(in srgb, var(--header) 94%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  backdrop-filter: blur(22px) saturate(1.08);
}
.brand-avatar {
  box-shadow: 0 0 0 1px rgba(255, 184, 82, .24), 0 5px 18px rgba(0, 0, 0, .28), 0 0 18px rgba(255, 122, 0, .11);
}
.icon,
.premium-page-menu,
.coded-home-menu { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 20%, transparent)); }

.restyled-shell :is(
  .page-intro, .flow-message, .assistant-note > div:last-child, .welcome-card,
  .details-card, .ready-hero, .lyrics-card, .final-song-card, .boundary-card,
  .generation-steps, .result-ready-note, .locked-explanation, .balance-card,
  .billing-section, .billing-history, .plans-tip, .settings-card, .support-form,
  .support-context, .support-feedback, .legal-consent, .empty-state,
  .voice-status, .preview-state, .tip-card, .stage-boundary, .faq-item
) {
  border-color: color-mix(in srgb, var(--accent) 15%, var(--line));
  background:
    radial-gradient(circle at 10% 0, color-mix(in srgb, var(--accent) 6%, transparent), transparent 35%),
    linear-gradient(145deg, color-mix(in srgb, var(--card) 96%, var(--accent) 4%), var(--card-solid));
  box-shadow: var(--shadow);
}
:root[data-theme="dark"] .restyled-shell :is(
  .details-card, .lyrics-card, .final-song-card, .generation-steps,
  .locked-explanation, .billing-section, .settings-card, .support-form,
  .support-context, .legal-consent, .empty-state, .faq-item
) { box-shadow: 0 14px 38px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 242, 228, .025); }

:is(.choice, .action-card, .steps li, .support-list button,
  .document-list button, .document-list a, .theme-picker button,
  .song-summary button, .package-option, .secondary-button,
  .inline-voice-recorder button, .occasion-premium-choice,
  .referral-entry) {
  border-color: color-mix(in srgb, var(--accent) 13%, var(--line));
  color: var(--text);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--card) 97%, var(--accent) 3%), var(--card-solid));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent), 0 8px 24px rgba(0, 0, 0, .08);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
:is(.choice, .action-card, .steps li.available, .support-list button,
  .document-list button, .document-list a, .theme-picker button,
  .song-summary button, .package-option:not(:disabled), .secondary-button,
  .occasion-premium-choice, .referral-entry):is(:hover, :focus-visible),
:is(.choice, .action-card, .theme-picker button, .package-option, .occasion-premium-choice).selected {
  border-color: color-mix(in srgb, var(--accent) 82%, var(--accent-glow));
  background:
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--accent-glow) 10%, transparent), transparent 35%),
    linear-gradient(145deg, color-mix(in srgb, var(--card) 90%, var(--accent) 10%), color-mix(in srgb, var(--card-solid) 91%, var(--accent) 9%));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 10px 28px rgba(0, 0, 0, .13), 0 0 20px color-mix(in srgb, var(--accent) 15%, transparent);
  outline: none;
}
@media (hover: hover) and (pointer: fine) {
  :is(.choice, .action-card, .steps li.available, .support-list button,
    .document-list button, .document-list a, .theme-picker button,
    .package-option:not(:disabled), .secondary-button,
    .occasion-premium-choice, .referral-entry):hover { transform: translateY(-1px); }
}

:is(.primary-button, .preview-play, .song-list-play, .variant-play) {
  border: 1px solid rgba(255, 193, 91, .66);
  color: #fff;
  background: linear-gradient(145deg, #ffad2e 0%, #f87800 45%, #c94f00 100%);
  box-shadow: inset 0 1px 0 rgba(255, 245, 225, .42), inset 0 -5px 12px rgba(107, 40, 0, .16), 0 9px 24px rgba(255, 103, 0, .25), 0 0 16px rgba(255, 151, 34, .12);
  text-shadow: 0 1px 2px rgba(70, 26, 0, .25);
  transition: filter .18s ease, box-shadow .18s ease, transform .18s ease;
}
:is(.primary-button, .preview-play, .song-list-play, .variant-play):not(:disabled):is(:hover, :focus-visible) {
  filter: brightness(1.06) saturate(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 248, 232, .5), 0 11px 28px rgba(255, 103, 0, .32), 0 0 22px rgba(255, 171, 47, .2);
  outline: none;
}
:is(.primary-button, .preview-play, .song-list-play, .variant-play):not(:disabled):active { transform: translateY(1px) scale(.99); }
:is(.primary-button, .secondary-button, .choice, .action-card, .package-option):disabled {
  filter: saturate(.58);
  box-shadow: none;
}

:is(.flow-input-row input, .details-card textarea, .lyrics-command textarea,
  .lyrics-editor, .support-form select, .support-form textarea,
  .support-form input, .voice-dialog textarea, .access-input,
  .occasion-premium-input input, .song-rename-field input,
  .home-assistant-field textarea) {
  border-color: color-mix(in srgb, var(--accent) 12%, var(--line));
  color: var(--text);
  background: color-mix(in srgb, var(--card-solid) 97%, var(--accent) 3%);
  box-shadow: inset 0 2px 9px rgba(0, 0, 0, .09), 0 1px 0 color-mix(in srgb, white 4%, transparent);
}
:is(.flow-input-row input, .details-card textarea, .lyrics-command textarea,
  .lyrics-editor, .support-form select, .support-form textarea,
  .support-form input, .voice-dialog textarea, .access-input,
  .occasion-premium-input input, .song-rename-field input,
  .home-assistant-field textarea):focus {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent), inset 0 2px 8px rgba(0, 0, 0, .07), 0 0 16px color-mix(in srgb, var(--accent) 9%, transparent);
}

.premium-page-hero,
.occasion-premium-hero,
.coded-home-hero,
.music-generation-hero {
  border-bottom-color: color-mix(in srgb, var(--accent) 22%, transparent);
  filter: saturate(1.02);
}
.premium-page-copy h1,
.occasion-premium-copy h1,
.coded-home-brand b,
.music-generation-hero h1 { letter-spacing: -.035em; }
.premium-page-copy h1,
.occasion-premium-copy h1,
.music-generation-hero h1 { text-shadow: 0 2px 16px rgba(0, 0, 0, .18); }

.generation-visual-screen .generation-steps {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  background:
    radial-gradient(circle at 13% 9%, rgba(255, 148, 35, .075), transparent 34%),
    linear-gradient(155deg, color-mix(in srgb, var(--card) 97%, var(--accent) 3%), var(--card-solid));
  box-shadow: 0 16px 40px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 240, 222, .03);
}
.generation-visual-screen .generation-steps li:not(:last-child)::after {
  border-left-color: color-mix(in srgb, var(--accent) 46%, var(--line));
}
.generation-visual-screen .generation-steps li > span {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  color: var(--accent-glow);
  background: radial-gradient(circle at 35% 28%, rgba(255, 188, 92, .09), color-mix(in srgb, var(--card-solid) 96%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 225, 183, .08);
}
.generation-visual-screen .generation-steps li.done > span,
.generation-visual-screen .generation-steps li.active > span {
  border-color: #ff9b28;
  background: radial-gradient(circle at 35% 27%, rgba(255, 201, 118, .2), rgba(105, 43, 4, .27) 58%, rgba(8, 15, 18, .8));
  box-shadow: inset 0 1px 0 rgba(255, 225, 183, .18), 0 0 16px rgba(255, 122, 0, .3), 0 0 0 4px rgba(255, 122, 0, .045);
}
.generation-variant {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 155, 40, .09), transparent 35%),
    linear-gradient(145deg, color-mix(in srgb, var(--card) 97%, var(--accent) 3%), var(--card-solid));
  box-shadow: inset 0 1px 0 rgba(255, 232, 202, .04), 0 12px 30px rgba(0, 0, 0, .2), 0 0 16px rgba(255, 122, 0, .07);
}
.variant-select {
  border-color: color-mix(in srgb, var(--accent) 86%, var(--accent-glow));
  color: var(--accent-glow);
  background: color-mix(in srgb, var(--accent) 9%, var(--card-solid));
  box-shadow: inset 0 1px 0 rgba(255, 221, 175, .06);
}

.preview-play,
.full-play,
.song-list-play,
.variant-play {
  position: relative;
  isolation: isolate;
}
.full-play {
  border-color: rgba(255, 176, 67, .68);
  background: radial-gradient(circle at 35% 28%, #c16a24, #935019 62%, #6c320c);
  box-shadow: inset 0 1px 0 rgba(255, 226, 189, .34), inset 0 -7px 14px rgba(58, 20, 0, .2), 0 0 0 6px rgba(255, 122, 0, .045), 0 0 23px rgba(255, 122, 0, .25);
}
.full-play:is(:hover, :focus-visible) {
  border-color: #ffb348;
  box-shadow: inset 0 1px 0 rgba(255, 232, 200, .42), 0 0 0 7px rgba(255, 122, 0, .055), 0 0 28px rgba(255, 122, 0, .34);
  outline: none;
}

.songs-library-screen .song-list-card {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--accent-glow)) !important;
  background: transparent !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 8%, transparent) !important;
}
.songs-library-screen .song-list-card:is(:hover, :focus-within) {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 14%, transparent) !important;
}
.songs-count-badge,
.songs-carousel-controls button {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--card-solid) 92%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent), 0 8px 20px rgba(0, 0, 0, .1);
}

.popover-menu,
.voice-dialog,
.purchase-dialog,
.payment-unavailable-dialog,
.trial-unlock-success-dialog,
.song-delete-dialog {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  background:
    radial-gradient(circle at 15% 0, color-mix(in srgb, var(--accent) 10%, transparent), transparent 35%),
    linear-gradient(150deg, color-mix(in srgb, var(--card-solid) 95%, var(--accent) 5%), var(--bg));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 9%, transparent), 0 26px 76px rgba(0, 0, 0, .45), 0 0 28px color-mix(in srgb, var(--accent) 12%, transparent);
}
.dialog-scrim,
.song-delete-scrim { background: rgba(1, 5, 7, .72); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); }
.song-delete-dialog { border-color: color-mix(in srgb, var(--accent) 62%, #ad332c 38%); }

.track-pulsator-core {
  border-color: rgba(255, 184, 72, .76);
  background: radial-gradient(circle, rgba(255, 129, 12, .2), rgba(4, 10, 12, .94) 68%);
  box-shadow: inset 0 0 20px rgba(255, 138, 22, .18), 0 0 calc(15px + var(--energy) * 30px) rgba(255, 112, 0, .48), 0 0 0 1px rgba(255, 214, 136, .12);
}
.track-pulsator-rings i { border-color: rgba(255, 157, 34, .7); }
.track-pulsator-fullscreen {
  border-color: rgba(255, 162, 42, .56);
  background: color-mix(in srgb, var(--card-solid) 80%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 233, 202, .05), 0 8px 22px rgba(0, 0, 0, .2);
}

.app-loading-shell {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 126, 10, .11), transparent 29%),
    radial-gradient(circle at 50% 50%, #090f11 0, #03080a 57%, #010304 100%);
}
.app-loading-card .eyebrow { color: #ff9b28; text-shadow: 0 0 12px rgba(255, 122, 0, .22); }

html[data-theme="light"] body {
  background-image:
    radial-gradient(circle at 50% -8%, rgba(225, 104, 17, .1), transparent 35%),
    radial-gradient(ellipse at 0 62%, rgba(201, 79, 0, .035), transparent 42%),
    radial-gradient(ellipse at 100% 82%, rgba(223, 122, 32, .035), transparent 46%),
    linear-gradient(180deg, #fbf7f1, #f7f1e9);
}
html[data-theme="light"] :is(.app-shell, .restyled-shell, .occasion-premium-shell) {
  background-color: rgba(247, 241, 233, .96);
  box-shadow: 0 0 64px rgba(75, 45, 24, .1);
}
html[data-theme="light"] .app-header { box-shadow: 0 8px 24px rgba(86, 54, 31, .075); }
html[data-theme="light"] .premium-page-copy h1,
html[data-theme="light"] .occasion-premium-copy h1,
html[data-theme="light"] .music-generation-hero h1 { text-shadow: none; }
html[data-theme="light"] .restyled-shell :is(
  .page-intro, .flow-message, .assistant-note > div:last-child, .welcome-card,
  .details-card, .ready-hero, .lyrics-card, .final-song-card,
  .generation-steps, .locked-explanation, .balance-card, .billing-section,
  .billing-history, .plans-tip, .settings-card, .support-form, .support-context,
  .support-feedback, .legal-consent, .empty-state, .voice-status,
  .preview-state, .tip-card, .stage-boundary, .faq-item
) {
  border-color: color-mix(in srgb, var(--accent) 14%, var(--line));
  background:
    radial-gradient(circle at 10% 0, rgba(225, 104, 17, .04), transparent 34%),
    linear-gradient(145deg, rgba(255, 253, 249, .97), rgba(249, 242, 234, .97));
  box-shadow: 0 14px 34px rgba(86, 54, 31, .09), inset 0 1px 0 rgba(255, 255, 255, .92);
}
html[data-theme="light"] :is(.choice, .action-card, .steps li,
  .support-list button, .document-list button, .document-list a,
  .theme-picker button, .song-summary button, .package-option,
  .secondary-button, .occasion-premium-choice, .referral-entry) {
  background: linear-gradient(145deg, #fffdfa, #f9f2ea);
  box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(86, 54, 31, .07);
}
html[data-theme="light"] .generation-visual-screen .generation-steps {
  background: radial-gradient(circle at 13% 9%, rgba(225, 104, 17, .06), transparent 34%), linear-gradient(155deg, #fffdfa, #f8eee5);
  box-shadow: 0 14px 34px rgba(86, 54, 31, .1), inset 0 1px 0 #fff;
}
html[data-theme="light"] .generation-visual-screen .generation-steps li > span {
  color: #c94f00;
  background: radial-gradient(circle at 35% 28%, #fff, #f8eee5);
}
html[data-theme="light"] .generation-visual-screen .generation-steps li.done > span,
html[data-theme="light"] .generation-visual-screen .generation-steps li.active > span {
  color: #b94700;
  background: radial-gradient(circle at 35% 27%, #fff8ef, #f3d6bb);
  box-shadow: inset 0 1px 0 #fff, 0 0 14px rgba(201, 79, 0, .18), 0 0 0 4px rgba(201, 79, 0, .035);
}

/* MAX TEST r98 — compact referral offer and manual QA fixes. */
.referral-discount-banner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 9px 13px 10px;
}
.referral-discount-top,
.referral-discount-bottom { display: flex; align-items: center; min-width: 0; }
.referral-discount-top { gap: 12px; }
.referral-discount-top > strong {
  color: var(--accent);
  font-size: clamp(40px, 10vw, 52px);
  line-height: .84;
  letter-spacing: -.065em;
}
.referral-discount-top > b { font-size: 16px; line-height: 1.1; }
.referral-discount-bottom { justify-content: space-between; gap: 12px; }
.referral-discount-bottom > small { color: var(--muted); font-size: 11px; }
.referral-discount-bottom > time {
  min-width: 88px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg) 68%, transparent);
  font: 850 13px/1.05 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: center;
}
.plans-referral-entry {
  min-height: 64px;
  border-style: solid;
  border-width: 1.5px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, var(--card)), var(--card));
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 13%, transparent);
}
.plans-referral-entry b { color: var(--accent); font-size: 16px; }
.plans-referral-entry small { font-size: 11px; }

.restyled-shell .payment-pending-status-dialog,
.payment-pending-status-dialog { text-align: center; }
.payment-pending-status-dialog .purchase-brand {
  width: fit-content;
  margin-inline: auto;
  text-align: left;
}
.payment-pending-status-mark { margin-inline: auto; }
.payment-pending-status-dialog .dialog-actions { width: 100%; }

.restyled-shell .result-visual-screen > .locked-song-card {
  background: transparent !important;
  background-image: none !important;
}

.generation-visual-screen .music-generation-hero,
.generation-visual-screen .music-generation-hero.choice-ready {
  min-height: 195px;
  padding-top: 0;
}
.generation-visual-screen .music-orbit,
.generation-visual-screen .music-generation-hero.choice-ready .music-orbit {
  width: 124px;
  height: 124px;
  margin: -14px auto 1px;
}
.generation-visual-screen .music-orbit .brand-avatar,
.generation-visual-screen .music-generation-hero.choice-ready .music-orbit .brand-avatar {
  width: 90px;
  height: 90px;
}
@media (max-width: 380px) {
  .generation-visual-screen .music-generation-hero,
  .generation-visual-screen .music-generation-hero.choice-ready { min-height: 188px; padding-top: 0; }
  .generation-visual-screen .music-orbit,
  .generation-visual-screen .music-generation-hero.choice-ready .music-orbit { width: 118px; height: 118px; }
}
html[data-theme="light"] .generation-variant {
  background: radial-gradient(circle at 12% 10%, rgba(225, 104, 17, .055), transparent 35%), linear-gradient(145deg, #fffdfa, #fff4e9);
  box-shadow: inset 0 1px 0 #fff, 0 11px 26px rgba(86, 54, 31, .085);
}
html[data-theme="light"] .full-play {
  color: #fff;
  background: radial-gradient(circle at 35% 28%, #efa55e, #c66c25 62%, #9e4b10);
  box-shadow: inset 0 1px 0 rgba(255, 248, 234, .55), inset 0 -7px 14px rgba(110, 47, 0, .12), 0 0 0 6px rgba(201, 79, 0, .035), 0 0 20px rgba(201, 79, 0, .16);
}
html[data-theme="light"] :is(.popover-menu, .voice-dialog, .purchase-dialog,
  .payment-unavailable-dialog, .trial-unlock-success-dialog, .song-delete-dialog) {
  background: radial-gradient(circle at 15% 0, rgba(225, 104, 17, .07), transparent 35%), linear-gradient(150deg, #fffdfa, #f7eee5);
  box-shadow: 0 0 0 1px rgba(201, 79, 0, .07), 0 24px 68px rgba(70, 43, 24, .24), 0 0 24px rgba(201, 79, 0, .08);
}
html[data-theme="light"] :is(.dialog-scrim, .song-delete-scrim) { background: rgba(49, 36, 27, .42); }
html[data-theme="light"] .track-pulsator-core {
  background: radial-gradient(circle, rgba(225, 104, 17, .14), rgba(255, 252, 247, .94) 70%);
}

@media (prefers-reduced-motion: reduce) {
  :is(.choice, .action-card, .steps li, .support-list button,
    .document-list button, .document-list a, .theme-picker button,
    .package-option, .primary-button, .secondary-button, .variant-play) { transition: none; }
}

/* r77 — stable MAX mobile viewport and platform-consistent surfaces. */
html,
body,
#app { min-height: 100%; }
html:has(.app-loading-shell),
body:has(.app-loading-shell),
#app:has(.app-loading-shell) {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: #03080a !important;
}
#app:has(.app-loading-shell) {
  position: fixed;
  inset: 0;
}
.app-loading-shell {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100vh;
  height: 100%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 126, 10, .11), transparent 29%),
    radial-gradient(circle at 50% 50%, #090f11 0, #03080a 57%, #010304 100%);
}
@supports (height: 100dvh) {
  html:has(.app-loading-shell),
  body:has(.app-loading-shell),
  #app:has(.app-loading-shell),
  .app-loading-shell { min-height: 100dvh; height: 100dvh; }
}

@media (max-width: 699px) {
  html[data-theme="dark"] body.max-mobile-webview :is(.restyled-shell, .occasion-premium-shell) {
    --line: rgba(255, 179, 86, .2);
    --occasion-line: rgba(255, 179, 86, .2);
  }
  html[data-theme="dark"] body.max-mobile-webview :is(
    .occasion-premium-assistant, .occasion-premium-choice, .occasion-premium-input input,
    .choice, .action-card, .secondary-button, .theme-picker button, .package-option,
    .support-list button, .document-list button, .document-list a,
    .song-summary button, .songs-carousel-controls button, .referral-entry
  ) {
    border-color: rgba(255, 169, 65, .24) !important;
    box-shadow: inset 0 1px 0 rgba(255, 220, 174, .025), 0 8px 22px rgba(0, 0, 0, .12);
  }
  html[data-theme="dark"] body.max-mobile-webview :is(
    .occasion-premium-choice.selected, .choice.selected, .action-card.selected,
    .theme-picker button.selected, .package-option.selected
  ) {
    border-color: #ff7a00 !important;
    box-shadow: 0 0 0 1px rgba(255, 122, 0, .16), 0 0 18px rgba(255, 122, 0, .16);
  }
  html[data-theme="dark"] body.max-mobile-webview .occasion-premium-input input:focus,
  html[data-theme="dark"] body.max-mobile-webview :is(.choice, .action-card, .secondary-button):focus-visible {
    border-color: #ff7a00 !important;
  }
}

.restyled-shell .songs-library-screen .my-songs-note,
html[data-theme="light"] .restyled-shell .songs-library-screen .my-songs-note {
  width: 100%;
  max-width: 100%;
  margin: -7px auto 12px;
  padding: 0 14px;
  border: 0 !important;
  border-radius: 0;
  outline: 0;
  color: #aaa39d;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(10.5px, 2.85vw, 11.5px);
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  transform: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.restyled-shell .songs-library-screen .my-songs-note::before,
.restyled-shell .songs-library-screen .my-songs-note::after { display: none !important; content: none !important; }
.restyled-shell .songs-library-screen .my-songs-note span {
  display: block;
  width: 100%;
  white-space: normal;
  text-align: center;
}
html[data-theme="light"] .restyled-shell .songs-library-screen .my-songs-note { color: #756f69; }

.app-shell.restyled-shell:has(.songs-library-screen),
.restyled-shell main:has(.songs-library-screen),
.songs-library-screen {
  min-height: 100vh;
  height: auto;
  background-color: #03080a;
}
@supports (min-height: 100dvh) {
  .app-shell.restyled-shell:has(.songs-library-screen),
  .restyled-shell main:has(.songs-library-screen),
  .songs-library-screen { min-height: 100dvh; }
}
.restyled-shell main:has(.songs-library-screen) { padding-bottom: 0; }
.songs-library-screen { overflow: visible; }
.songs-library-screen > .songs-footer {
  position: relative;
  isolation: isolate;
  flex: 1 0 220px;
  min-height: 220px;
  margin-top: -4px;
  margin-bottom: calc(-34px - env(safe-area-inset-bottom));
  padding-bottom: calc(34px + env(safe-area-inset-bottom));
  overflow: hidden;
  background:
    linear-gradient(180deg, #03080a 0, rgba(3, 8, 10, .9) 16%, rgba(3, 8, 10, .32) 40%, transparent 67%),
    radial-gradient(ellipse at 50% 108%, rgba(95, 39, 6, .34), transparent 74%),
    #03080a;
}
.songs-library-screen > .songs-footer::before {
  z-index: 0;
  inset: 28px -28px -30px;
  height: auto;
  opacity: .92;
  filter: blur(1.5px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.34) 18%, #000 42%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.34) 18%, #000 42%);
}
.songs-library-screen > .songs-footer::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: -24px;
  right: -34px;
  left: -34px;
  height: 92px;
  background: linear-gradient(180deg, #03080a 8%, rgba(3, 8, 10, .88) 36%, transparent 100%);
  filter: blur(14px);
  pointer-events: none;
}
.songs-library-screen > .songs-footer > span { position: relative; z-index: 1; }

html[data-theme="light"] :is(
  .app-shell.restyled-shell:has(.songs-library-screen),
  .restyled-shell main:has(.songs-library-screen),
  .songs-library-screen
) { background-color: #f7f1e9; }
html[data-theme="light"] .songs-library-screen > .songs-footer {
  background:
    linear-gradient(180deg, #f7f1e9 0, rgba(247, 241, 233, .9) 16%, rgba(247, 241, 233, .3) 40%, transparent 67%),
    radial-gradient(ellipse at 50% 108%, rgba(225, 104, 17, .11), transparent 74%),
    #f7f1e9;
}
html[data-theme="light"] .songs-library-screen > .songs-footer::after {
  background: linear-gradient(180deg, #f7f1e9 8%, rgba(247, 241, 233, .88) 36%, transparent 100%);
}

/* r78 — My Songs uses one true background; generation Select is neutral and dimensional. */
.songs-library-screen {
  position: relative;
  isolation: isolate;
  padding-bottom: calc(102px + env(safe-area-inset-bottom));
  background: #03080a !important;
}
.songs-library-screen::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 128px;
  right: -22px;
  bottom: 0;
  left: -22px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 93%, rgba(255, 122, 0, .2) 0, rgba(113, 48, 7, .1) 24%, transparent 54%),
    repeating-radial-gradient(ellipse at 50% 96%, transparent 0 38px, rgba(255, 145, 28, .13) 40px 42px, transparent 44px 65px),
    linear-gradient(80deg, transparent 0 17%, rgba(255, 122, 0, .055) 17.3% 17.6%, transparent 18% 43%, rgba(255, 190, 81, .045) 43.3% 43.6%, transparent 44% 73%, rgba(255, 122, 0, .05) 73.3% 73.6%, transparent 74%),
    linear-gradient(180deg, #03080a 0, #03080a 16%, rgba(5, 11, 13, .98) 46%, #020608 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.2) 4%, #000 13%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.2) 4%, #000 13%, #000 100%);
}
.songs-library-screen::after {
  content: '♪   ♡   ✦   ♫';
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: calc(34px + env(safe-area-inset-bottom));
  left: 0;
  color: rgba(255, 126, 8, .82);
  font: 500 clamp(20px, 5.6vw, 27px)/1 Georgia, serif;
  letter-spacing: clamp(9px, 4vw, 20px);
  text-align: center;
  text-shadow: 0 0 12px rgba(255, 122, 0, .42);
  pointer-events: none;
}
.songs-library-screen > * {
  position: relative;
  z-index: 1;
}
.songs-library-screen > .songs-footer { display: none !important; }
.app-shell.restyled-shell:has(.songs-library-screen),
.restyled-shell main:has(.songs-library-screen) {
  background: #03080a !important;
}

.generation-variant .variant-select {
  position: relative;
  min-height: 40px;
  overflow: hidden;
  border: 1px solid rgba(255, 250, 244, .68);
  border-radius: 14px;
  color: #fffaf5;
  background:
    radial-gradient(circle at 30% 0, rgba(255, 255, 255, .08), transparent 42%),
    linear-gradient(145deg, rgba(20, 27, 29, .96), rgba(6, 13, 16, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -5px 12px rgba(0, 0, 0, .2),
    0 8px 20px rgba(0, 0, 0, .24),
    0 0 15px rgba(255, 122, 0, .08);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.generation-variant .variant-select::before {
  content: '';
  position: absolute;
  top: 1px;
  right: 9px;
  left: 9px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  pointer-events: none;
}
.generation-variant .variant-select:is(:hover, :focus-visible) {
  border-color: #fffaf5;
  color: #fff;
  background:
    radial-gradient(circle at 30% 0, rgba(255, 255, 255, .11), transparent 42%),
    linear-gradient(145deg, rgba(30, 31, 29, .98), rgba(11, 15, 16, .99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .17),
    0 9px 22px rgba(0, 0, 0, .28),
    0 0 18px rgba(255, 122, 0, .15);
  outline: none;
}
.generation-variant .variant-select:active { transform: translateY(1px) scale(.99); }
.generation-variant.variant-pending {
  opacity: .62;
  filter: saturate(.42);
}
.generation-variant .variant-select:disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, .58);
  border-color: rgba(255, 255, 255, .2);
  background: linear-gradient(145deg, rgba(31, 37, 39, .82), rgba(11, 17, 19, .9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: none;
}

html[data-theme="light"] .songs-library-screen {
  background: #f7f1e9 !important;
}
html[data-theme="light"] .songs-library-screen::before {
  background:
    radial-gradient(ellipse at 50% 93%, rgba(225, 104, 17, .13) 0, rgba(225, 104, 17, .05) 25%, transparent 54%),
    repeating-radial-gradient(ellipse at 50% 96%, transparent 0 38px, rgba(201, 79, 0, .09) 40px 42px, transparent 44px 65px),
    linear-gradient(80deg, transparent 0 17%, rgba(201, 79, 0, .035) 17.3% 17.6%, transparent 18% 43%, rgba(223, 122, 32, .03) 43.3% 43.6%, transparent 44% 73%, rgba(201, 79, 0, .035) 73.3% 73.6%, transparent 74%),
    linear-gradient(180deg, #f7f1e9 0, #f7f1e9 17%, #fbf7f1 48%, #f5ede4 100%);
}

/* r81 — compact, low-contrast sound-funnel echoes on the approved r80 surface. */
.songs-library-screen::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  z-index: 0;
  top: 142px;
  right: 34px;
  left: 34px;
  height: 330px;
  background: repeating-radial-gradient(
    ellipse 94% 66% at 50% -14%,
    transparent 0 43px,
    rgba(255, 151, 42, .032) 44px 45px,
    transparent 46px 72px
  );
  filter: blur(.35px);
  -webkit-mask-image:
    radial-gradient(ellipse at 50% 28%, #000 0 48%, transparent 78%),
    linear-gradient(180deg, transparent 0, #000 17%, #000 68%, transparent 100%);
  mask-image:
    radial-gradient(ellipse at 50% 28%, #000 0 48%, transparent 78%),
    linear-gradient(180deg, transparent 0, #000 17%, #000 68%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
}
html[data-theme="light"] .songs-library-screen::after {
  background: repeating-radial-gradient(
    ellipse 94% 66% at 50% -14%,
    transparent 0 43px,
    rgba(151, 83, 28, .026) 44px 45px,
    transparent 46px 72px
  );
}
html[data-theme="light"] .songs-library-screen::after {
  color: rgba(201, 79, 0, .7);
  text-shadow: 0 0 10px rgba(201, 79, 0, .16);
}
html[data-theme="light"] :is(
  .app-shell.restyled-shell:has(.songs-library-screen),
  .restyled-shell main:has(.songs-library-screen)
) { background: #f7f1e9 !important; }
html[data-theme="light"] .generation-variant .variant-select {
  border-color: rgba(96, 70, 52, .34);
  color: #3a2a20;
  background:
    radial-gradient(circle at 30% 0, #fff, transparent 44%),
    linear-gradient(145deg, #fffdfa, #f4ece3);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -4px 10px rgba(110, 73, 44, .05),
    0 8px 18px rgba(86, 54, 31, .11),
    0 0 13px rgba(201, 79, 0, .055);
  text-shadow: none;
}
html[data-theme="light"] .generation-variant .variant-select:is(:hover, :focus-visible) {
  border-color: rgba(201, 79, 0, .52);
  color: #2a1c14;
  background: linear-gradient(145deg, #fff, #f8eee5);
  box-shadow: inset 0 1px 0 #fff, 0 9px 21px rgba(86, 54, 31, .14), 0 0 16px rgba(201, 79, 0, .09);
}

/* r79 — diffuse library atmosphere and branded orange Select outline. */
.songs-library-screen::before {
  top: 118px;
  right: -38px;
  bottom: -38px;
  left: -38px;
  background:
    radial-gradient(ellipse at 8% 22%, rgba(255, 122, 0, .105) 0, rgba(116, 45, 3, .055) 29%, transparent 58%),
    radial-gradient(ellipse at 94% 52%, rgba(255, 153, 47, .085) 0, rgba(108, 43, 5, .045) 30%, transparent 59%),
    radial-gradient(ellipse at 28% 96%, rgba(176, 69, 4, .16) 0, rgba(75, 28, 2, .075) 34%, transparent 64%),
    linear-gradient(168deg, #03080a 0%, #05090a 36%, #080806 67%, #030607 100%);
  filter: blur(24px);
  transform: scale(1.04);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.28) 5%, #000 15%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.28) 5%, #000 15%, #000 100%);
}
.songs-library-screen::after { content: none !important; display: none !important; }

.generation-variant .variant-select {
  border-color: #ff7a00;
  font-weight: 600;
}
.generation-variant .variant-select:is(:hover, :focus-visible) { border-color: #ff941f; }

html[data-theme="light"] .songs-library-screen::before {
  background:
    radial-gradient(ellipse at 8% 22%, rgba(225, 104, 17, .095) 0, rgba(225, 104, 17, .035) 31%, transparent 59%),
    radial-gradient(ellipse at 94% 52%, rgba(242, 139, 42, .075) 0, rgba(201, 79, 0, .025) 32%, transparent 61%),
    radial-gradient(ellipse at 28% 96%, rgba(201, 79, 0, .105) 0, rgba(201, 79, 0, .035) 36%, transparent 66%),
    linear-gradient(168deg, #f7f1e9 0%, #fbf7f1 38%, #f8eee4 70%, #f7f1e9 100%);
}
html[data-theme="light"] .generation-variant .variant-select {
  border-color: #d85a00;
  font-weight: 600;
}
html[data-theme="light"] .generation-variant .variant-select:is(:hover, :focus-visible) { border-color: #c94f00; }

/* r80 — restrained amber, predominantly soft graphite library surface. */
.songs-library-screen { background: #050a0c !important; }
.songs-library-screen::before {
  background:
    radial-gradient(ellipse at 7% 24%, rgba(255, 122, 0, .028) 0, rgba(116, 45, 3, .014) 30%, transparent 58%),
    radial-gradient(ellipse at 96% 54%, rgba(255, 153, 47, .022) 0, rgba(108, 43, 5, .011) 31%, transparent 60%),
    radial-gradient(ellipse at 28% 102%, rgba(176, 69, 4, .04) 0, rgba(75, 28, 2, .018) 35%, transparent 66%),
    linear-gradient(168deg, #050a0c 0%, #070c0e 38%, #080b0c 69%, #04090b 100%);
  filter: blur(30px);
}
html[data-theme="light"] .songs-library-screen { background: #f8f3ec !important; }
html[data-theme="light"] .songs-library-screen::before {
  background:
    radial-gradient(ellipse at 7% 24%, rgba(225, 104, 17, .026) 0, rgba(225, 104, 17, .01) 31%, transparent 59%),
    radial-gradient(ellipse at 96% 54%, rgba(242, 139, 42, .02) 0, rgba(201, 79, 0, .008) 32%, transparent 61%),
    radial-gradient(ellipse at 28% 102%, rgba(201, 79, 0, .032) 0, rgba(201, 79, 0, .011) 36%, transparent 66%),
    linear-gradient(168deg, #f8f3ec 0%, #fbf8f3 39%, #f7f1ea 71%, #f8f3ec 100%);
}
.songs-library-screen::after { content: '' !important; display: block !important; }

/* r82 — full-height restrained echoes and platform-stable dark mobile surfaces. */
.songs-library-screen::after {
  top: 142px;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: auto;
  background: repeating-radial-gradient(
    ellipse 160px 62px at 50% 0,
    transparent 0 43px,
    rgba(255, 151, 42, .045) 44px 45px,
    transparent 46px 72px
  );
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 7%, #000 92%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 7%, #000 92%, transparent 100%);
}
html[data-theme="light"] .songs-library-screen::after {
  background: repeating-radial-gradient(
    ellipse 160px 62px at 50% 0,
    transparent 0 43px,
    rgba(151, 83, 28, .035) 44px 45px,
    transparent 46px 72px
  );
}

@media (max-width: 699px) {
  html[data-theme="dark"] .songs-library-screen .song-list-card {
    border-color: rgba(255, 122, 0, .72) !important;
    background: transparent !important;
    box-shadow: 0 0 18px rgba(255, 122, 0, .08) !important;
  }
  html[data-theme="dark"] .songs-count-badge {
    border-color: rgba(255, 122, 0, .38) !important;
    background: rgba(7, 19, 26, .78) !important;
    box-shadow: 0 0 16px rgba(255, 122, 0, .16) !important;
  }
  html[data-theme="dark"] .restyled-shell .preview-state {
    border-color: rgba(255, 169, 65, .2) !important;
    background: linear-gradient(135deg, rgba(12, 32, 40, .7), rgba(7, 19, 26, .84)) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16) !important;
  }
  html[data-theme="dark"] .restyled-shell .preview-state::before {
    content: none !important;
    display: none !important;
  }
}

/* r83 final cascade: replace the r82 constant-step field with the discrete arc geometry above. */
.songs-library-screen::after { background: var(--library-expanding-echoes); }
html[data-theme="light"] .songs-library-screen::after { background: var(--library-expanding-echoes-light); }

/* r84 — premium pearl light-theme benchmark for My Songs; dark r83 remains unchanged. */
html[data-theme="light"] .songs-library-screen {
  background: linear-gradient(155deg, #fffaf5 0%, #f8f0e7 39%, #f2e6da 72%, #fbf6f0 100%) !important;
}
html[data-theme="light"] .songs-library-screen::before {
  background:
    radial-gradient(ellipse at 7% 23%, rgba(225, 104, 17, .055) 0, rgba(201, 79, 0, .022) 31%, transparent 60%),
    radial-gradient(ellipse at 95% 52%, rgba(223, 122, 32, .045) 0, rgba(201, 79, 0, .017) 33%, transparent 62%),
    radial-gradient(ellipse at 27% 101%, rgba(201, 79, 0, .07) 0, rgba(151, 83, 28, .025) 37%, transparent 67%),
    linear-gradient(168deg, #fffaf5 0%, #faf3eb 38%, #f3e8dd 70%, #faf5ef 100%);
  filter: blur(34px);
}
html[data-theme="light"] .songs-library-screen::after {
  --library-expanding-echoes-light:
    radial-gradient(ellipse 126px 54px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .11) calc(100% - .65px), rgba(154, 76, 22, .11) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 152px 82px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .105) calc(100% - .65px), rgba(154, 76, 22, .105) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 182px 116px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .098) calc(100% - .65px), rgba(154, 76, 22, .098) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 216px 156px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .091) calc(100% - .65px), rgba(154, 76, 22, .091) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 255px 203px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .084) calc(100% - .65px), rgba(154, 76, 22, .084) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 300px 258px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .077) calc(100% - .65px), rgba(154, 76, 22, .077) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 351px 322px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .07) calc(100% - .65px), rgba(154, 76, 22, .07) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 408px 396px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .064) calc(100% - .65px), rgba(154, 76, 22, .064) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 472px 482px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .058) calc(100% - .65px), rgba(154, 76, 22, .058) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 544px 580px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .052) calc(100% - .65px), rgba(154, 76, 22, .052) calc(100% - .15px), transparent 100%);
  background: var(--library-expanding-echoes-light);
}

/* r85 — the approved My Songs surface is the single global page background. */
:is(.coded-home-shell, .restyled-shell, .occasion-premium-shell):not(.songs-library-shell) > main {
  --pechka-page-bg-start: 226px;
  --pechka-page-echoes:
    radial-gradient(ellipse 126px 54px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .052) calc(100% - .65px), rgba(255, 151, 42, .052) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 152px 82px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .049) calc(100% - .65px), rgba(255, 151, 42, .049) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 182px 116px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .046) calc(100% - .65px), rgba(255, 151, 42, .046) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 216px 156px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .043) calc(100% - .65px), rgba(255, 151, 42, .043) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 255px 203px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .04) calc(100% - .65px), rgba(255, 151, 42, .04) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 300px 258px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .038) calc(100% - .65px), rgba(255, 151, 42, .038) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 351px 322px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .036) calc(100% - .65px), rgba(255, 151, 42, .036) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 408px 396px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .034) calc(100% - .65px), rgba(255, 151, 42, .034) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 472px 482px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .032) calc(100% - .65px), rgba(255, 151, 42, .032) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 544px 580px at 50% 0, transparent calc(100% - 1px), rgba(255, 151, 42, .03) calc(100% - .65px), rgba(255, 151, 42, .03) calc(100% - .15px), transparent 100%);
  position: relative;
  isolation: isolate;
  background: #050a0c !important;
}
.coded-home-shell:not(.songs-library-shell) > main { --pechka-page-bg-start: 220px; }
.occasion-premium-shell:not(.songs-library-shell) > main { --pechka-page-bg-start: 218px; }

:is(.coded-home-shell, .restyled-shell, .occasion-premium-shell):not(.songs-library-shell) > main::before,
:is(.coded-home-shell, .restyled-shell, .occasion-premium-shell):not(.songs-library-shell) > main::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: var(--pechka-page-bg-start);
  right: 12px;
  bottom: 0;
  left: 12px;
  pointer-events: none;
}
:is(.coded-home-shell, .restyled-shell, .occasion-premium-shell):not(.songs-library-shell) > main::before {
  right: -38px;
  bottom: -38px;
  left: -38px;
  background:
    radial-gradient(ellipse at 7% 24%, rgba(255, 122, 0, .028) 0, rgba(116, 45, 3, .014) 30%, transparent 58%),
    radial-gradient(ellipse at 96% 54%, rgba(255, 153, 47, .022) 0, rgba(108, 43, 5, .011) 31%, transparent 60%),
    radial-gradient(ellipse at 28% 102%, rgba(176, 69, 4, .04) 0, rgba(75, 28, 2, .018) 35%, transparent 66%),
    linear-gradient(168deg, #050a0c 0%, #070c0e 38%, #080b0c 69%, #04090b 100%);
  filter: blur(30px);
  transform: scale(1.04);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .28) 5%, #000 15%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .28) 5%, #000 15%, #000 100%);
}
:is(.coded-home-shell, .restyled-shell, .occasion-premium-shell):not(.songs-library-shell) > main::after {
  background: var(--pechka-page-echoes);
  filter: blur(.35px);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 7%, #000 92%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 7%, #000 92%, transparent 100%);
}
:is(.coded-home-shell, .restyled-shell, .occasion-premium-shell):not(.songs-library-shell) > main > * {
  position: relative;
  z-index: 1;
}

/* Remove only obsolete per-screen underlays; thematic heroes retain their own artwork. */
.restyled-shell:not(.songs-library-shell) > main > :is(.flow-screen, .plans-screen),
.occasion-premium-shell:not(.songs-library-shell) > main > :is(.occasion-premium, .occasion-premium-content) {
  background: transparent !important;
  background-image: none !important;
}
.restyled-shell:not(.songs-library-shell) > main > :is(.flow-screen, .plans-screen)::before,
.restyled-shell:not(.songs-library-shell) > main > :is(.flow-screen, .plans-screen)::after,
.occasion-premium-shell:not(.songs-library-shell) > main > .occasion-premium::before,
.occasion-premium-shell:not(.songs-library-shell) > main > .occasion-premium::after {
  content: none !important;
  display: none !important;
}

html[data-theme="light"] :is(.coded-home-shell, .restyled-shell, .occasion-premium-shell):not(.songs-library-shell) > main {
  --pechka-page-echoes:
    radial-gradient(ellipse 126px 54px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .11) calc(100% - .65px), rgba(154, 76, 22, .11) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 152px 82px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .105) calc(100% - .65px), rgba(154, 76, 22, .105) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 182px 116px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .098) calc(100% - .65px), rgba(154, 76, 22, .098) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 216px 156px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .091) calc(100% - .65px), rgba(154, 76, 22, .091) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 255px 203px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .084) calc(100% - .65px), rgba(154, 76, 22, .084) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 300px 258px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .077) calc(100% - .65px), rgba(154, 76, 22, .077) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 351px 322px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .07) calc(100% - .65px), rgba(154, 76, 22, .07) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 408px 396px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .064) calc(100% - .65px), rgba(154, 76, 22, .064) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 472px 482px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .058) calc(100% - .65px), rgba(154, 76, 22, .058) calc(100% - .15px), transparent 100%),
    radial-gradient(ellipse 544px 580px at 50% 0, transparent calc(100% - 1px), rgba(154, 76, 22, .052) calc(100% - .65px), rgba(154, 76, 22, .052) calc(100% - .15px), transparent 100%);
  background: linear-gradient(155deg, #fffaf5 0%, #f8f0e7 39%, #f2e6da 72%, #fbf6f0 100%) !important;
}
html[data-theme="light"] :is(.coded-home-shell, .restyled-shell, .occasion-premium-shell):not(.songs-library-shell) > main::before {
  background:
    radial-gradient(ellipse at 7% 23%, rgba(225, 104, 17, .055) 0, rgba(201, 79, 0, .022) 31%, transparent 60%),
    radial-gradient(ellipse at 95% 52%, rgba(223, 122, 32, .045) 0, rgba(201, 79, 0, .017) 33%, transparent 62%),
    radial-gradient(ellipse at 27% 101%, rgba(201, 79, 0, .07) 0, rgba(151, 83, 28, .025) 37%, transparent 67%),
    linear-gradient(168deg, #fffaf5 0%, #faf3eb 38%, #f3e8dd 70%, #faf5ef 100%);
  filter: blur(34px);
}

/* r86 — decorative background layers never enlarge the document scroll area. */
:is(.coded-home-shell, .restyled-shell, .occasion-premium-shell) > main {
  min-height: 100svh;
  min-height: 100dvh;
  overflow: visible;
}
@media (min-width: 700px) {
  :is(.coded-home-shell, .restyled-shell, .occasion-premium-shell) > main {
    min-height: calc(100svh - 48px);
    min-height: calc(100dvh - 48px);
  }
}

/* r87 — page content owns page height; only the background paint is clipped. */
:is(.coded-home-shell, .restyled-shell, .occasion-premium-shell):not(.songs-library-shell) > main::before,
:is(.coded-home-shell, .restyled-shell, .occasion-premium-shell):not(.songs-library-shell) > main::after,
.songs-library-screen::before,
.songs-library-screen::after {
  contain: paint;
  clip-path: inset(0);
}
:is(.coded-home-shell, .restyled-shell, .occasion-premium-shell):not(.songs-library-shell) > main::before,
.songs-library-screen::before {
  right: 0;
  bottom: 0;
  left: 0;
  transform: none;
  background-position: center;
  background-size: calc(100% + 76px) calc(100% + 76px);
}

/* r88 — Android/MAX compatibility without relational selectors or color mixing. */
html.app-loading-active,
html.app-loading-active body,
html.app-loading-active #app {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: #03080a !important;
}
html.app-loading-active #app {
  position: fixed;
  inset: 0;
}
@supports (height: 100dvh) {
  html.app-loading-active,
  html.app-loading-active body,
  html.app-loading-active #app { min-height: 100dvh; height: 100dvh; }
}

/* r114 — one approved loading surface for slow transitions in MAX TEST. */
html.global-loading-active,
html.global-loading-active body {
  overflow: hidden;
}
.global-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: rgba(1, 5, 7, .68);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  touch-action: none;
}
.pechka-loading-indicator {
  display: grid;
  justify-items: center;
  gap: 16px;
}
.pechka-loading-logo {
  width: clamp(84px, 24vw, 116px);
  height: auto;
  border-radius: 50%;
  filter: drop-shadow(0 0 11px rgba(255, 122, 0, .7)) drop-shadow(0 0 28px rgba(255, 122, 0, .38));
  animation: pechka-loading-pulse 1.35s ease-in-out infinite;
}
.pechka-loading-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 12px;
}
.pechka-loading-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff9a27;
  box-shadow: 0 0 12px rgba(255, 122, 0, .62);
  opacity: .2;
  transform: scale(.72);
  animation: pechka-loading-dot 1.2s ease-in-out infinite;
}
.pechka-loading-dots i:nth-child(2) {
  animation-delay: .2s;
}
.pechka-loading-dots i:nth-child(3) { animation-delay: .4s; }
.app-loading-shell .pechka-loading-indicator {
  position: absolute;
  inset: 0;
  align-content: center;
}
@keyframes pechka-loading-pulse {
  0%, 100% { transform: scale(.94); opacity: .82; }
  50% { transform: scale(1.06); opacity: 1; }
}
@keyframes pechka-loading-dot {
  0%, 60%, 100% { opacity: .2; transform: scale(.72); }
  30% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pechka-loading-logo { animation: none; }
  .pechka-loading-dots i { animation-duration: 2.4s; }
}

/* r115 — premium referral surfaces and a lighter graphite fullscreen player. */
.voice-dialog.referral-dialog {
  border-color: rgba(255, 139, 28, .72);
  background:
    radial-gradient(circle at 18% 4%, rgba(255, 139, 28, .13), transparent 34%),
    linear-gradient(145deg, rgba(13, 20, 22, .98), rgba(5, 10, 12, .99));
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 203, .1),
    inset 0 0 34px rgba(255, 122, 0, .035),
    0 26px 70px rgba(0, 0, 0, .58),
    0 0 34px rgba(255, 108, 0, .1);
}
.referral-reward {
  grid-template-columns: 64px minmax(0, 1fr);
  border-color: rgba(255, 151, 48, .38);
  background:
    linear-gradient(135deg, rgba(255, 137, 25, .1), rgba(8, 18, 21, .92) 62%),
    var(--card-muted);
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 210, .08),
    0 12px 28px rgba(0, 0, 0, .25);
}
.referral-reward > span,
.referral-reward > .referral-reward-gift {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 0;
  color: var(--accent);
  background: transparent;
  box-shadow: none;
}
.referral-reward-gift .icon {
  width: 42px;
  height: 42px;
  color: var(--accent);
  filter: drop-shadow(0 5px 8px rgba(255, 108, 0, .3));
}
.referral-link > span:last-child {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .2));
}
.referral-link input {
  border-color: rgba(255, 166, 76, .27);
  background: linear-gradient(180deg, rgba(10, 23, 27, .96), rgba(5, 15, 18, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), inset 0 -8px 18px rgba(0, 0, 0, .12);
}
.referral-link button {
  border-color: #f67908;
  background: linear-gradient(180deg, #ff942d 0%, #ee6d08 55%, #d95a00 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 228, .48),
    inset 0 -2px 0 rgba(125, 42, 0, .22),
    0 4px 0 #963b00,
    0 10px 20px rgba(176, 66, 0, .28);
  transform: translateY(-2px);
  transition: filter .16s ease, transform .12s ease, box-shadow .12s ease;
}
.referral-link button:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 228, .35),
    inset 0 -1px 0 rgba(125, 42, 0, .2),
    0 1px 0 #963b00,
    0 5px 12px rgba(176, 66, 0, .22);
}
.referral-shares button {
  border-color: rgba(255, 164, 72, .22);
  background: linear-gradient(145deg, rgba(13, 27, 31, .96), rgba(6, 15, 18, .98));
  box-shadow: inset 0 1px 0 rgba(255, 241, 224, .05), 0 8px 18px rgba(0, 0, 0, .18);
}
html[data-theme="light"] .voice-dialog.referral-dialog {
  border-color: rgba(201, 79, 0, .65);
  background:
    radial-gradient(circle at 18% 4%, rgba(230, 116, 28, .11), transparent 34%),
    linear-gradient(145deg, #fffdf9, #f8efe5);
  box-shadow: inset 0 1px 0 #fff, 0 24px 65px rgba(88, 50, 24, .22), 0 0 28px rgba(201, 79, 0, .08);
}

/* WEB r102 — one responsive PECHKA MUSIC voice-input contract. */
.app-voice-overlay-root {
  position: fixed;
  z-index: 1200;
  inset: 0;
  pointer-events: none;
  isolation: isolate;
}
.app-voice-overlay-root > .dialog-scrim {
  position: absolute;
  z-index: 0;
  inset: 0;
  place-items: center;
  overflow-y: auto;
  padding: max(18px, env(safe-area-inset-top)) max(16px, calc((100vw - 540px) / 2 + 16px)) max(18px, env(safe-area-inset-bottom));
  pointer-events: auto;
  background: rgba(1, 5, 7, .82);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}
.app-voice-overlay-root .voice-dialog {
  width: min(100%, 508px);
  max-height: calc(100dvh - max(36px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  overflow-y: auto;
  border-color: rgba(255, 145, 34, .5);
  color: #fff;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 142, 27, .1), transparent 34%),
    linear-gradient(150deg, #0c2028, #07131a 58%, #03090c);
  box-shadow: 0 0 0 1px rgba(255, 122, 0, .08), 0 28px 78px rgba(0, 0, 0, .68), 0 0 34px rgba(255, 122, 0, .17);
}
.pechka-voice-permission .dialog-icon {
  color: #ff9b28;
  border: 1px solid rgba(255, 161, 48, .52);
  background: radial-gradient(circle at 36% 28%, rgba(255, 181, 73, .17), rgba(44, 20, 5, .66) 58%, rgba(5, 12, 15, .94));
  box-shadow: inset 0 1px 0 rgba(255, 225, 183, .14), 0 0 20px rgba(255, 122, 0, .24);
}
.app-voice-overlay-root .voice-dialog > p { color: #c7cdd1; }
.app-voice-overlay-root .voice-dialog .secondary-button {
  color: #fff;
  border-color: rgba(255, 122, 0, .3);
  background: linear-gradient(145deg, rgba(8, 24, 31, .98), rgba(3, 12, 16, .98));
}
.app-voice-overlay-root .voice-dialog .primary-button {
  border-color: rgba(255, 193, 91, .66);
  color: #fff;
  background: linear-gradient(145deg, #ffad2e 0%, #f87800 45%, #c94f00 100%);
  box-shadow: inset 0 1px 0 rgba(255, 245, 225, .42), 0 9px 24px rgba(255, 103, 0, .25), 0 0 16px rgba(255, 151, 34, .12);
}
.app-voice-overlay-root .voice-dialog .primary-button:disabled {
  opacity: .48;
  filter: saturate(.55);
  box-shadow: none;
}
.voice-dialog.pechka-review .transcript-status {
  margin: 7px 2px 0;
  color: #ffb06a;
  font-size: 12px;
  line-height: 1.35;
}
.voice-dialog.pechka-review .transcript-status.is-ready { color: #9eabb2; }

/* WEB r112 — wider Simple/review dialogs and direct voice submission. */
.app-voice-overlay-root .voice-dialog.pechka-review {
  width: min(100%, 560px);
  border-color: rgba(255, 138, 32, .58);
  color: #f7f8fa;
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 122, 0, .11), transparent 34%),
    linear-gradient(145deg, #04151b, #020b10 72%);
  box-shadow: 0 0 0 1px rgba(255, 122, 0, .22), 0 0 34px rgba(255, 122, 0, .18), 0 28px 80px rgba(0, 0, 0, .62);
}
.app-voice-overlay-root .voice-dialog.pechka-review > p {
  color: #98a4ab;
  font-weight: 500;
}
.app-voice-overlay-root .voice-dialog.pechka-review textarea {
  min-height: 168px;
  border-color: rgba(255, 122, 0, .48);
  color: #f7f8fa;
  background: rgba(2, 11, 16, .72);
  caret-color: #ff7a00;
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  line-height: 1.48;
  box-shadow: inset 0 0 20px rgba(255, 122, 0, .035);
}
.app-voice-overlay-root .voice-dialog.pechka-review textarea:focus {
  border-color: #ff7a00;
  box-shadow: 0 0 0 3px rgba(255, 122, 0, .14), inset 0 0 20px rgba(255, 122, 0, .04);
}
.app-voice-overlay-root .voice-dialog.pechka-review .secondary-button {
  border-color: rgba(255, 122, 0, .3);
  background: linear-gradient(145deg, #10191c, #03090c 72%);
}
.app-voice-overlay-root .voice-dialog.pechka-review .secondary-button:is(:hover, :focus-visible) {
  border-color: #ff7a00;
  box-shadow: 0 0 0 1px rgba(255, 122, 0, .18), 0 0 20px rgba(255, 122, 0, .4);
  outline: none;
}

.flow-input-row {
  grid-template-columns: minmax(0, 1fr) 48px;
}
.flow-input-row.flow-voice-recorder { grid-template-columns: minmax(0, 1fr); }
.occasion-premium-input { grid-template-columns: minmax(0, 1fr) 48px; }
.occasion-premium-input .occasion-premium-mic { justify-self: end; }

/* One visual contract for every WEB dictation entry point. */
:is(
  .flow-input-row,
  .occasion-premium-input,
  .details-story-input,
  .home-assistant-input-shell
) .mic-button {
  width: 46px;
  height: 46px;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  color: #ff9428;
  border: 1px solid rgba(255, 151, 48, .48);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 187, 91, .18), transparent 36%),
    linear-gradient(145deg, rgba(45, 25, 12, .96), rgba(5, 17, 22, .98) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 226, 185, .12), 0 0 14px rgba(255, 122, 0, .16);
  transition: transform .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
:is(
  .flow-input-row,
  .occasion-premium-input,
  .details-story-input,
  .home-assistant-input-shell
) .mic-button svg {
  width: 28px;
  height: 28px;
}
:is(
  .flow-input-row,
  .occasion-premium-input,
  .details-story-input,
  .home-assistant-input-shell
) .mic-button:not(:disabled):is(:hover, :focus-visible) {
  color: #ff9428;
  border-color: rgba(255, 122, 0, .96);
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 122, 0, .2), transparent 38%),
    linear-gradient(145deg, rgba(70, 29, 6, .98), rgba(6, 20, 26, .98) 74%);
  box-shadow: inset 0 1px 0 rgba(255, 166, 76, .16), 0 0 0 1px rgba(255, 122, 0, .22), 0 0 18px rgba(255, 122, 0, .38);
  outline: none;
  transform: translateY(-1px) scale(1.025);
}
:is(
  .flow-input-row,
  .occasion-premium-input,
  .details-story-input,
  .home-assistant-input-shell
) .mic-button.recording {
  color: #ff9428;
  border-color: rgba(255, 122, 0, .96);
  background: linear-gradient(145deg, rgba(78, 31, 5, .98), rgba(6, 20, 26, .98) 74%);
  box-shadow: 0 0 0 1px rgba(255, 122, 0, .24), 0 0 18px rgba(255, 122, 0, .42);
}
:is(
  .flow-input-row,
  .occasion-premium-input,
  .details-story-input,
  .home-assistant-input-shell
) .mic-button:not(:disabled):active { transform: scale(.97); }
:is(
  .flow-input-row,
  .occasion-premium-input,
  .details-story-input,
  .home-assistant-input-shell
) .mic-button:disabled {
  color: #8e8177;
  border-color: rgba(154, 124, 96, .24);
  background: rgba(15, 24, 28, .82);
  box-shadow: none;
  opacity: .58;
}
.details-story-input { position: relative; }
.restyled-shell .details-story-input .manual-flow-entry { padding-right: 76px; padding-bottom: 82px; }
.restyled-shell .details-story-input .details-mic {
  top: auto;
  right: 14px;
  bottom: 31px;
  width: 46px;
  height: 46px;
}

.home-assistant-input-shell {
  position: relative;
  display: block;
  min-width: 0;
}
.home-assistant-input-shell .home-assistant-mic {
  position: absolute;
  z-index: 2;
  top: auto;
  right: 18px;
  bottom: 14px;
}
.home-assistant-input-shell textarea { padding-right: 82px; padding-bottom: 70px; }
.simple-voice-recorder { margin-top: 10px; }
.simple-voice-processing,
.home-voice-processing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 13px;
  border: 1px solid rgba(255, 122, 0, .3);
  border-radius: 18px;
  color: #d8dfe3;
  background: rgba(6, 19, 25, .96);
  box-shadow: 0 0 17px rgba(255, 122, 0, .11);
  font-size: 13px;
}

.coded-home-shell .coded-home-footer {
  margin-top: 8px;
  margin-bottom: 0;
  padding-right: 100px;
  padding-bottom: 16px;
  overflow: hidden;
  background: none;
}
.coded-home-shell .coded-home-footer::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -18px 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 0 100%, rgba(95, 39, 6, .64), transparent 44%),
    radial-gradient(ellipse at 100% 100%, rgba(95, 39, 6, .64), transparent 44%),
    repeating-radial-gradient(ellipse at 50% 118%, transparent 0 15px, rgba(255, 122, 0, .12) 16px 17px, transparent 18px 25px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
}
.coded-home-shell .coded-home-footer .home-voice-button { right: 27px; bottom: 39px; }
.coded-home-shell .coded-voice-arrow { right: 70px; bottom: 7px; }
.coded-home-shell .home-voice-recorder,
.coded-home-shell .home-voice-processing {
  position: absolute;
  z-index: 20;
  right: 18px;
  bottom: 20px;
  left: 18px;
  width: auto;
  max-width: none;
  margin: 0;
}
.coded-home-shell .home-voice-recorder .inline-voice-recorder {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.coded-home-shell .home-voice-processing { bottom: 4px; }

.inline-voice-recorder {
  max-width: 100%;
  min-width: 0;
  min-height: 52px;
  grid-template-columns: 42px minmax(62px, 1fr) 44px 40px 40px;
  gap: 4px;
  padding: 4px;
  border-color: rgba(255, 151, 48, .46);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 0, rgba(255, 157, 52, .08), transparent 38%),
    linear-gradient(145deg, rgba(10, 28, 35, .99), rgba(3, 13, 17, .99));
  box-shadow: inset 0 1px 0 rgba(255, 226, 185, .08), inset 0 -8px 20px rgba(0, 0, 0, .18), 0 0 18px rgba(255, 122, 0, .14);
}
.inline-voice-recorder button {
  width: 36px;
  height: 36px;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 0;
  color: #ff9428;
  border: 1px solid rgba(255, 151, 48, .13);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.inline-voice-recorder button:is(:hover, :focus-visible) {
  border-color: rgba(255, 122, 0, .96);
  background: linear-gradient(145deg, rgba(91, 35, 6, .72), rgba(11, 27, 33, .94));
  box-shadow: inset 0 1px 0 rgba(255, 166, 76, .14), 0 0 0 1px rgba(255, 122, 0, .18), 0 0 17px rgba(255, 122, 0, .36);
  outline: none;
  transform: none;
}
.inline-voice-recorder button:active { transform: none; }
.inline-voice-recorder .live-wave {
  min-width: 0;
  overflow: hidden;
}
.inline-voice-recorder .live-wave i {
  background: linear-gradient(180deg, #ffc064, #ff7a00);
  box-shadow: 0 0 4px rgba(255, 122, 0, .46);
}
.inline-voice-recorder > b {
  color: #d0d7db;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.inline-voice-recorder .voice-stop,
.inline-voice-recorder .voice-quick {
  color: #ff9428;
  background: transparent;
}
.inline-voice-recorder button,
.flow-voice-recorder .inline-voice-recorder button,
.restyled-shell .inline-voice-recorder button {
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  padding: 0;
  font-size: 0;
  line-height: 0;
}
.inline-voice-recorder button::before,
.flow-voice-recorder .inline-voice-recorder button::before,
.restyled-shell .inline-voice-recorder button::before { content: none !important; }
.inline-voice-recorder .voice-control-icon {
  display: block;
  width: 21px;
  height: 21px;
  margin: 0;
  overflow: visible;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.inline-voice-recorder .voice-control-cancel { stroke-width: 3.2; }
.inline-voice-recorder .voice-control-stop {
  width: 19px;
  height: 19px;
  fill: currentColor;
  stroke: none;
  filter: drop-shadow(0 0 4px rgba(255, 122, 0, .45));
}
.inline-voice-recorder .voice-control-send {
  width: 23px;
  height: 23px;
  stroke-width: 2.8;
}

html.voice-recording-locked [data-recording-locked="true"] {
  opacity: .44 !important;
  cursor: not-allowed !important;
  filter: saturate(.55) !important;
}

@media (max-width: 380px) {
  .coded-home-shell .coded-home-footer { padding-right: 92px; }
  .coded-home-shell .coded-home-footer .home-voice-button { right: 22px; }
  .coded-home-shell .coded-voice-arrow { right: 61px; }
  .coded-home-shell .home-voice-recorder,
  .coded-home-shell .home-voice-processing { right: 10px; left: 10px; }
  .flow-voice-recorder .inline-voice-recorder,
  .restyled-shell .flow-voice-recorder .inline-voice-recorder,
  .coded-home-shell .home-voice-recorder .inline-voice-recorder {
    grid-template-columns: 35px minmax(48px, 1fr) 37px 33px 33px;
    gap: 2px;
    padding: 4px 3px;
  }
  .flow-voice-recorder .inline-voice-recorder button,
  .restyled-shell .flow-voice-recorder .inline-voice-recorder button,
  .coded-home-shell .home-voice-recorder .inline-voice-recorder button {
    width: 31px;
    height: 31px;
  }
  .live-wave { gap: 1px; }
}

@media (max-width: 430px) {
  .app-voice-overlay-root > .dialog-scrim { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  .app-voice-overlay-root .voice-dialog { padding: 18px; border-radius: 22px; }
  .voice-dialog.pechka-review textarea { min-height: 132px; }
}
html[data-theme="light"] .referral-reward {
  border-color: rgba(201, 79, 0, .28);
  background: linear-gradient(135deg, rgba(230, 116, 28, .1), rgba(255, 253, 249, .96) 64%);
  box-shadow: inset 0 1px 0 #fff, 0 10px 24px rgba(91, 55, 28, .1);
}
html[data-theme="light"] .referral-reward-gift .icon { color: #c94f00; filter: drop-shadow(0 4px 7px rgba(201, 79, 0, .2)); }
html[data-theme="light"] .referral-link input {
  border-color: rgba(201, 79, 0, .25);
  background: linear-gradient(180deg, #fff, #f8f0e8);
  box-shadow: inset 0 1px 2px rgba(92, 54, 25, .07);
}
html[data-theme="light"] .referral-shares button {
  border-color: rgba(201, 79, 0, .2);
  background: linear-gradient(145deg, #fff, #f7eee5);
  box-shadow: inset 0 1px 0 #fff, 0 8px 16px rgba(91, 55, 28, .09);
}
.track-pulsator { --pulsator-fullscreen-bg: #050a0c; }
.track-pulsator:fullscreen,
.track-pulsator:-webkit-full-screen,
.track-pulsator.pulsator-fullscreen-active {
  background: #050a0c !important;
  background-color: #050a0c !important;
}
.track-pulsator:fullscreen .track-pulsator-core,
.track-pulsator:-webkit-full-screen .track-pulsator-core,
.track-pulsator.pulsator-fullscreen-active .track-pulsator-core {
  background: radial-gradient(circle, rgba(255, 112, 0, .21), rgba(7, 11, 13, .96) 68%);
  box-shadow: inset 0 0 15px rgba(255, 122, 0, .16), 0 0 calc(10px + var(--energy) * 20px) rgba(255, 112, 0, .42);
}
.track-pulsator.pulsator-fullscreen-active .track-pulsator-fullscreen {
  background: rgba(7, 11, 13, .88);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.pulsator-overlay-open,
html.pulsator-overlay-open body { background: #050a0c; }

/* r116 — premium icons scoped only to the first manual Song Flow card. */
.occasion-options-step .occasion-choice-icon {
  position: relative;
  isolation: isolate;
  color: #ff8614;
  filter: none;
}
.occasion-options-step .occasion-choice-icon::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: 45%;
  background: radial-gradient(circle, rgba(255, 177, 72, .16), rgba(255, 108, 0, .045) 48%, transparent 72%);
  transform: scale(1.18);
}
.occasion-options-step .occasion-choice-icon > :is(.icon, svg) {
  position: relative;
  z-index: 1;
  color: #ff8614;
  stroke-width: 1.85;
  filter:
    drop-shadow(0 1px 0 rgba(107, 35, 0, .95))
    drop-shadow(0 0 3px rgba(255, 177, 72, .55))
    drop-shadow(0 4px 6px rgba(0, 0, 0, .24));
}
.occasion-options-step .occasion-premium-choice.selected .occasion-choice-icon > :is(.icon, svg),
.occasion-options-step .occasion-premium-choice:hover .occasion-choice-icon > :is(.icon, svg),
.occasion-options-step .occasion-premium-choice:focus-visible .occasion-choice-icon > :is(.icon, svg) {
  color: #ffa13b;
  filter:
    drop-shadow(0 1px 0 rgba(107, 35, 0, .9))
    drop-shadow(0 0 5px rgba(255, 162, 48, .8))
    drop-shadow(0 5px 7px rgba(0, 0, 0, .25));
}
html[data-theme="light"] .occasion-options-step .occasion-choice-icon > :is(.icon, svg) {
  color: #d85b00;
  filter:
    drop-shadow(0 1px 0 rgba(255, 214, 176, .95))
    drop-shadow(0 0 3px rgba(201, 79, 0, .2))
    drop-shadow(0 3px 5px rgba(99, 55, 22, .15));
}
html[data-theme="light"] .occasion-options-step .occasion-choice-icon::before {
  background: radial-gradient(circle, rgba(230, 116, 28, .12), rgba(230, 116, 28, .035) 50%, transparent 72%);
}

.app-shell.restyled-shell.songs-library-shell,
.songs-library-shell > main {
  background: #050a0c !important;
}
html[data-theme="light"] .app-shell.restyled-shell.songs-library-shell,
html[data-theme="light"] .songs-library-shell > main {
  background: #f8f3ec !important;
}

@media (max-width: 699px) {
html[data-theme="dark"] body :is(
    .generation-steps, .generation-variant, .preview-state, .locked-explanation,
    .result-ready-note, .final-song-card, .details-card, .lyrics-card,
    .flow-message, .voice-status, .tip-card, .stage-boundary,
    .purchase-dialog, .payment-unavailable-dialog, .voice-dialog
  ) {
    border-color: rgba(255, 169, 65, .24) !important;
  }
  html[data-theme="dark"] body :is(
    .choice, .action-card, .secondary-button, .theme-picker button,
    .package-option, .support-list button, .document-list button,
    .document-list a, .song-summary button, .songs-carousel-controls button,
    .referral-entry, .occasion-premium-assistant, .occasion-premium-choice,
    .occasion-premium-input input
  ) {
    border-color: rgba(255, 169, 65, .24) !important;
  }
  html[data-theme="dark"] body :is(
    .choice.selected, .action-card.selected, .theme-picker button.selected,
    .package-option.selected, .occasion-premium-choice.selected,
    .unlocked-actions .secondary-button.selected
  ) {
    border-color: #ff7a00 !important;
  }
  html[data-theme="dark"] body .generation-steps li > span {
    border-color: rgba(255, 155, 40, .5) !important;
  }
  html[data-theme="dark"] body .generation-steps li:not(:last-child)::after {
    border-left-color: rgba(255, 155, 40, .38) !important;
  }
  html[data-theme="dark"] body :is(.purchase-dialog, .payment-unavailable-dialog) {
    border-color: rgba(255, 138, 32, .58) !important;
  }
}

/* FAQ interaction must win over the narrow-viewport surface border contract. */
.app-shell.restyled-shell .faq-item:is(:hover, :focus-within, .open) {
  border-color: color-mix(in srgb, var(--accent) 82%, var(--accent-glow)) !important;
  background:
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--accent-glow) 10%, transparent), transparent 35%),
    linear-gradient(145deg, color-mix(in srgb, var(--card) 90%, var(--accent) 10%), color-mix(in srgb, var(--card-solid) 91%, var(--accent) 9%));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 10px 28px rgba(0, 0, 0, .13), 0 0 20px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* r89 — one literal warm border contract for every dark mobile surface. */
@media (max-width: 699px) {
  html[data-theme="dark"] body :is(
    .page-intro, .flow-message, .assistant-note > div:last-child, .welcome-card,
    .details-card, .ready-hero, .lyrics-card, .final-song-card,
    .generation-steps, .locked-explanation, .balance-card, .billing-section,
    .billing-history, .plans-tip, .settings-card, .support-form,
    .support-context, .support-feedback, .legal-consent, .empty-state,
    .voice-status, .preview-state, .tip-card, .stage-boundary, .faq-item,
    .support-contact-note, .support-context-note, .settings-service-note,
    .documents-info-note
  ) {
    border-color: rgba(255, 169, 65, .24) !important;
  }
  html[data-theme="dark"] body :is(
    .support-form select, .support-form textarea, .support-form input,
    .lyrics-editor, .details-card textarea, .flow-input-row input,
    .access-input, .song-rename-field input
  ) {
    border-color: rgba(255, 169, 65, .22) !important;
  }

  .app-shell.restyled-shell .faq-item.open,
  .app-shell.restyled-shell .faq-item:focus-within {
    border-color: #ff7a00 !important;
    outline: none !important;
  }
  .app-shell.restyled-shell .faq-item > button:focus,
  .app-shell.restyled-shell .faq-item > button:focus-visible {
    outline: none !important;
  }
}
.final-title-editor {
  display: grid;
  gap: .45rem;
  padding: 1rem 1rem 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
.final-title-editor span { color: var(--muted); font-size: .82rem; }
.final-title-editor input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
  border-radius: 14px;
  background: var(--card-solid);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  padding: .8rem .9rem;
  outline: none;
}
.final-title-editor input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

.lyrics-work-scrim {
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.lyrics-work-dialog {
  width: min(100%, 360px);
  min-height: 0;
  display: grid;
  justify-items: center;
  gap: .75rem;
  padding: 1.35rem 1.15rem 1.45rem;
  text-align: center;
}
.lyrics-work-dialog .lyrics-work-pulsator {
  width: 132px;
  height: 96px;
  min-height: 96px;
  margin: -.2rem auto 0;
}
.lyrics-work-dialog .track-pulsator-core {
  width: 58px;
  height: 58px;
}
.lyrics-work-dialog h2 {
  margin: 0;
  max-width: 290px;
  font-size: clamp(1.15rem, 5vw, 1.45rem);
  line-height: 1.25;
}

/* r109: every manual Song Flow option uses the established occasion-card visual. */
.restyled-shell .manual-flow-choice {
  border-color: var(--occasion-line);
  color: #fff;
  background: linear-gradient(135deg, rgba(12, 32, 40, .9), rgba(7, 19, 26, .97));
  box-shadow: none;
}
.restyled-shell .manual-flow-choice.selected,
.unlocked-actions .secondary-button.selected,
.restyled-shell .manual-flow-choice:hover,
.restyled-shell .manual-flow-choice:focus-visible {
  border-color: var(--occasion-orange);
  background: linear-gradient(135deg, rgba(95, 39, 6, .38), rgba(12, 32, 40, .95));
  box-shadow: inset 0 0 0 1px rgba(252, 217, 116, .36), 0 0 19px rgba(255, 122, 0, .24);
}

/* r110 — complete two-line hints in every manual Song Flow free-input field. */
.restyled-shell .flow-input-row .manual-flow-entry,
.occasion-premium-input .manual-flow-entry {
  display: block;
  width: 100%;
  height: 52px;
  min-height: 52px;
  padding: 16px 17px;
  overflow-y: hidden;
  resize: none;
  border: 1px solid rgba(132, 169, 183, .3);
  border-radius: 28px;
  color: #fff;
  background: rgba(7, 19, 26, .97);
  caret-color: #ff7a00;
  outline: 0;
  font: inherit;
  line-height: 1.2;
  white-space: pre-wrap;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.restyled-shell .flow-input-row label,
.occasion-premium-input label { position: relative; min-height: 52px; height: auto; }
.restyled-shell .flow-input-row .manual-flow-entry::placeholder,
.occasion-premium-input .manual-flow-entry::placeholder {
  color: transparent;
  opacity: 0;
}
.manual-flow-placeholder {
  position: absolute;
  z-index: 1;
  inset: 17px 18px auto;
  display: none;
  overflow: hidden;
  color: #7d858a;
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;
  white-space: pre-line;
  pointer-events: none;
}
.manual-flow-entry:placeholder-shown + .manual-flow-placeholder { display: block; }
.manual-flow-large-hint .manual-flow-placeholder {
  font-size: 15px;
  line-height: 18px;
}
.vocal-style-custom-input { margin-top: 10px; }
.vocal-style-block.disabled .vocal-style-custom-input { pointer-events: none; }
.details-story-input { margin-top: 18px; }
.details-story-input label { position: relative; display: block; }
.restyled-shell .details-story-input .manual-flow-entry {
  display: block;
  width: 100%;
  min-height: 220px;
  padding: 20px;
  resize: vertical;
  border: 1px solid rgba(255, 169, 65, .28);
  border-radius: 24px;
  color: var(--text);
  background: rgba(7, 19, 26, .97);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, .18), 0 12px 30px rgba(0, 0, 0, .16);
  caret-color: #ff7a00;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.restyled-shell .details-story-input .manual-flow-entry::placeholder { color: transparent; opacity: 0; }
.details-story-input .manual-flow-placeholder {
  position: absolute;
  inset: 20px;
  display: none;
  align-items: flex-start;
  color: #8f989e;
  font-size: 16px;
  line-height: 1.5;
  white-space: normal;
  pointer-events: none;
}
.details-story-input .manual-flow-entry:placeholder-shown + .manual-flow-placeholder { display: block; }
.details-character-limit {
  display: block;
  margin: 7px 8px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
}
.restyled-shell .details-story-input .manual-flow-entry:focus {
  border-color: #ff7a00;
  outline: 0;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, .16), 0 0 20px rgba(255, 122, 0, .26);
}
html[data-theme="light"] .restyled-shell .details-story-input .manual-flow-entry {
  border-color: var(--line);
  color: var(--text);
  background: rgba(255, 253, 250, .96);
  box-shadow: inset 0 2px 10px rgba(69, 49, 35, .04), 0 12px 28px rgba(69, 49, 35, .09);
}
html[data-theme="light"] .details-story-input .manual-flow-placeholder { color: #81766f; }
.restyled-shell .flow-input-row .manual-flow-entry:focus,
.occasion-premium-input .manual-flow-entry:focus {
  border-color: #ff7a00;
  box-shadow: 0 0 18px rgba(255, 122, 0, .28);
}
html[data-theme="light"] .restyled-shell .flow-input-row .manual-flow-entry,
html[data-theme="light"] .occasion-premium-input .manual-flow-entry {
  border-color: var(--line);
  color: var(--text);
  background: rgba(255, 253, 250, .96);
  box-shadow: 0 10px 25px rgba(69, 49, 35, .08);
}
html[data-theme="light"] .manual-flow-placeholder { color: #81766f; }
@media (max-width: 699px) {
  html[data-theme="dark"] body .restyled-shell .flow-input-row .manual-flow-entry,
  html[data-theme="dark"] body .occasion-premium-input .manual-flow-entry {
    border-color: rgba(255, 169, 65, .24) !important;
  }
}

/* r120 — keep manual Song Flow surfaces on one approved visual contract. */
:is(.occasion-premium-shell, .restyled-shell) {
  min-height: 100svh;
  min-height: 100dvh;
}
:is(.occasion-premium-shell, .restyled-shell) > main {
  min-height: 100svh !important;
  min-height: 100dvh !important;
  display: flex;
  flex-direction: column;
}
.occasion-premium-shell > main > .occasion-premium,
.restyled-shell > main > .flow-screen-with-footer {
  width: 100%;
  flex: 1 0 auto;
}

.occasion-premium-actions .genre-refine {
  border: 1px solid var(--occasion-line);
  color: #fff;
  background: rgba(7, 19, 26, .48);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, .015);
}

.restyled-shell .manual-flow-choice {
  border-color: color-mix(in srgb, #ff7a00 13%, rgba(255, 214, 166, .16));
  color: #fff8f1;
  background: linear-gradient(145deg, color-mix(in srgb, rgba(8, 18, 22, .9) 97%, #ff7a00 3%), #081419);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent), 0 8px 24px rgba(0, 0, 0, .08);
}
.restyled-shell .manual-flow-choice.selected,
.unlocked-actions .secondary-button.selected,
.restyled-shell .manual-flow-choice:hover,
.restyled-shell .manual-flow-choice:focus-visible {
  border-color: color-mix(in srgb, #ff7a00 82%, #ff9a28);
  background:
    radial-gradient(circle at 12% 0, color-mix(in srgb, #ff9a28 10%, transparent), transparent 35%),
    linear-gradient(145deg, color-mix(in srgb, rgba(8, 18, 22, .9) 90%, #ff7a00 10%), color-mix(in srgb, #081419 91%, #ff7a00 9%));
  box-shadow: 0 0 0 1px color-mix(in srgb, #ff7a00 22%, transparent), 0 10px 28px rgba(0, 0, 0, .13), 0 0 20px color-mix(in srgb, #ff7a00 15%, transparent);
}
html[data-theme="light"] .restyled-shell .manual-flow-choice {
  border-color: rgba(112, 78, 55, .2);
  color: #271d17;
  background: linear-gradient(145deg, #fffdfa, #f9f2ea);
}
html[data-theme="light"] .restyled-shell .manual-flow-choice.selected,
html[data-theme="light"] .unlocked-actions .secondary-button.selected,
html[data-theme="light"] .restyled-shell .manual-flow-choice:hover,
html[data-theme="light"] .restyled-shell .manual-flow-choice:focus-visible {
  border-color: #c94f00;
  background: #fff2e6;
  box-shadow: 0 0 0 1px rgba(201, 79, 0, .18), 0 0 18px rgba(201, 79, 0, .11);
}

/* r133: the Genre selected-card visual applies independently of the screen shell. */
.occasion-premium-choice.selected,
.unlocked-actions .secondary-button.selected {
  border-color: #ff7a00 !important;
  background: linear-gradient(135deg, rgba(95, 39, 6, .38), rgba(12, 32, 40, .95)) !important;
  box-shadow: inset 0 0 0 1px rgba(252, 217, 116, .36), 0 0 19px rgba(255, 122, 0, .24) !important;
}
@supports (color: color-mix(in srgb, white 50%, black)) {
  .occasion-premium-choice.selected,
  .unlocked-actions .secondary-button.selected {
    border-color: color-mix(in srgb, #ff7a00 82%, #ff9a28) !important;
    background:
      radial-gradient(circle at 12% 0, color-mix(in srgb, #ff9a28 10%, transparent), transparent 35%),
      linear-gradient(145deg, color-mix(in srgb, rgba(8, 18, 22, .9) 90%, #ff7a00 10%), color-mix(in srgb, #081419 91%, #ff7a00 9%)) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, #ff7a00 22%, transparent), 0 10px 28px rgba(0, 0, 0, .13), 0 0 20px color-mix(in srgb, #ff7a00 15%, transparent) !important;
  }
}

/* r122 — approved referral and plans affordances. */
.referral-link > span:last-child {
  overflow: hidden;
  border-radius: 14px;
  filter: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
}
.referral-link button {
  color: rgba(255, 250, 244, .92);
  border-color: rgba(255, 151, 55, .72);
  background: linear-gradient(180deg, #f68a25 0%, #e96a09 58%, #d85800 100%);
  box-shadow: inset 0 1px 0 rgba(255, 246, 232, .32), inset 0 -1px 0 rgba(117, 39, 0, .13);
  transform: none;
  text-shadow: 0 1px 1px rgba(87, 28, 0, .2);
}
.referral-link button:hover,
.referral-link button:focus-visible {
  filter: brightness(1.035);
  box-shadow: inset 0 1px 0 rgba(255, 248, 236, .4), 0 0 14px rgba(255, 122, 0, .14);
}
.referral-link button:active {
  transform: scale(.985);
  box-shadow: inset 0 1px 0 rgba(255, 246, 232, .24), inset 0 2px 5px rgba(104, 34, 0, .15);
}

.referral-shares button:is(:hover, :focus-visible, :active) {
  border-color: var(--accent);
  color: var(--text);
  background:
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--accent-glow) 10%, transparent), transparent 35%),
    linear-gradient(145deg, color-mix(in srgb, var(--card) 90%, var(--accent) 10%), color-mix(in srgb, var(--card-solid) 91%, var(--accent) 9%));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 14%, transparent);
  outline: none;
}
.referral-shares button:active { transform: scale(.985); }

.plans-screen .plans-referral-entry,
html[data-theme="light"] .plans-screen .plans-referral-entry {
  min-height: 82px;
  margin: 9px 0 2px;
  padding: 9px 8px;
  grid-template-columns: 58px minmax(0, 1fr) 24px;
  gap: 10px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}
.plans-referral-entry > .icon:first-child,
:is(.songs-referral-entry, .plans-referral-entry).plans-referral-entry > .icon:first-child {
  width: 50px;
  height: 50px;
  color: var(--accent);
  filter: drop-shadow(0 5px 8px color-mix(in srgb, var(--accent) 27%, transparent));
}
.plans-referral-entry > span:nth-child(2) {
  justify-items: start;
  padding-left: 16px;
  text-align: left;
}
.plans-referral-entry b,
:is(.songs-referral-entry, .plans-referral-entry).plans-referral-entry b {
  color: #fff8f1;
  font-size: 19px;
  line-height: 1.12;
}
.plans-referral-entry small,
:is(.songs-referral-entry, .plans-referral-entry).plans-referral-entry small {
  max-width: 245px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}
.plans-referral-entry > .icon:last-child { color: var(--accent); }
.plans-screen .plans-referral-entry:hover,
.plans-screen .plans-referral-entry:focus-visible {
  border: 0;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%);
  box-shadow: none;
  outline: none;
}
html[data-theme="light"] .plans-screen .plans-referral-entry b { color: var(--text); }
@media (max-width: 699px) {
  html[data-theme="dark"] body.max-mobile-webview .plans-screen .plans-referral-entry {
    box-shadow: none;
  }
}

.plans-screen .billing-history {
  margin: 3px 0 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}
.plans-screen .billing-history summary {
  width: fit-content;
  margin: 0 auto;
  padding: 7px 3px 5px;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  color: var(--accent);
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 750;
  text-align: center;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  list-style: none;
  cursor: pointer;
  transition: transform .16s ease, color .16s ease, text-shadow .16s ease;
}
.plans-screen .billing-history summary::-webkit-details-marker { display: none; }
.plans-screen .billing-history summary::marker { content: ''; }
.plans-screen .billing-history summary:hover,
.plans-screen .billing-history summary:focus-visible {
  color: var(--accent-glow);
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 24%, transparent);
  transform: scale(1.035);
  outline: none;
}
.plans-screen .billing-history > div { margin-top: 9px; }

/* r128 — one continuous branded canvas without the decorative lower cap. */
.flow-premium-footer { display: none !important; }

.occasion-premium {
  min-height: 100svh;
  min-height: 100dvh;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.restyled-shell .flow-screen.flow-screen-with-footer,
body.pechka-internal-flow .restyled-shell .flow-screen-with-footer {
  min-height: 100svh;
  min-height: 100dvh;
  padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}

html,
body {
  width: 100%;
  min-height: 100%;
  background:
    radial-gradient(ellipse at 50% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 39%),
    repeating-radial-gradient(ellipse at 50% 112%, transparent 0 82px, color-mix(in srgb, var(--accent-glow) 7%, transparent) 83px 84px, transparent 85px 118px),
    var(--bg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

html { scrollbar-color: var(--accent) transparent; }
html::-webkit-scrollbar-track { background: transparent; }
#app { width: 100%; min-height: 100svh; min-height: 100dvh; }

/* r135: approved first-screen welcome styling only. */
.coded-home-shell .coded-welcome {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  text-align: center;
}

.coded-home-shell .coded-welcome::before {
  content: none;
  display: none;
}

.coded-home-shell .coded-welcome h1 {
  color: var(--home-orange);
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-weight: 600;
  letter-spacing: -.02em;
}

.coded-home-shell .coded-welcome h1 span { color: inherit; }

.coded-home-shell .coded-welcome p {
  margin-inline: auto;
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-weight: 500;
}

/* r137: blend only the lower edge of the home hero into the page background. */
.coded-home-shell .coded-home-hero {
  z-index: 2;
  box-shadow: 0 24px 28px -18px rgba(3, 9, 12, .98);
  background:
    linear-gradient(180deg, transparent 78%, #050a0c 100%),
    radial-gradient(circle at 50% 38%, rgba(255, 122, 0, .22), transparent 31%),
    radial-gradient(ellipse at 4% 70%, rgba(95, 39, 6, .66), transparent 43%),
    radial-gradient(ellipse at 96% 72%, rgba(95, 39, 6, .66), transparent 43%),
    #03090c;
}

html[data-theme="light"] .coded-home-shell .coded-home-hero {
  box-shadow: 0 24px 28px -18px rgba(255, 250, 245, .98);
  background:
    linear-gradient(180deg, transparent 78%, #fffaf5 100%),
    radial-gradient(circle at 50% 38%, rgba(225, 104, 17, .16), transparent 31%),
    radial-gradient(ellipse at 4% 70%, rgba(225, 104, 17, .09), transparent 43%),
    radial-gradient(ellipse at 96% 72%, rgba(225, 104, 17, .09), transparent 43%),
    #f7f1e9;
}

/* r138: softly fade only the lower decorative arc at the hero's left edge. */
.coded-home-shell .coded-home-hero::after {
  -webkit-mask-image: linear-gradient(90deg, transparent 0 12%, rgba(0, 0, 0, .18) 16%, #000 27% 100%);
  mask-image: linear-gradient(90deg, transparent 0 12%, rgba(0, 0, 0, .18) 16%, #000 27% 100%);
}

/* r139: deterministic Cyrillic handwriting fallback for Android/MAX WebView. */
@font-face {
  font-family: "Pechka Welcome Hand";
  src:
    local("Segoe Print"),
    url("/assets/fonts/MarckScript-Regular.ttf?v=max-test-mobile-hand-font-20261017-r139") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.coded-home-shell .coded-welcome h1,
.coded-home-shell .coded-welcome p {
  font-family: "Pechka Welcome Hand", cursive;
}

/* r140: improve only mobile welcome-copy readability. */
@media (max-width: 600px) {
  .coded-home-shell .coded-welcome h1 {
    font-size: 32px;
  }

  .coded-home-shell .coded-welcome h1 span {
    font-size: .9em;
  }

  .coded-home-shell .coded-welcome p {
    font-size: 17px;
  }
}

/* r143: compact animated hero copy on the first screen only. */
.coded-home-shell .coded-welcome {
  margin-top: -5px;
  padding: 8px 10px 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  text-align: center;
}

html[data-theme="light"] .coded-home-shell .coded-welcome {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.coded-home-shell .home-hero-phrase {
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--home-orange);
  font-family: "Pechka Welcome Hand", cursive;
  font-size: clamp(21px, 5.8vw, 27px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 1;
  transform: translateY(0);
  text-shadow: 0 1px 12px rgba(255, 122, 0, .22);
  transition: opacity .46s ease, transform .46s ease;
  will-change: opacity, transform;
}

.coded-home-shell .home-hero-phrase.is-leaving {
  opacity: 0;
  transform: translateY(-5px);
}

.coded-home-shell .home-hero-phrase.is-entering {
  opacity: 0;
  transform: translateY(5px);
}

.coded-home-shell .coded-welcome p {
  margin: 0;
  color: var(--home-muted);
  font-family: "Pechka Welcome Hand", cursive;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .12);
}

html[data-theme="light"] .coded-home-shell .coded-welcome p { text-shadow: none; }

html[data-theme="light"] .coded-home-shell .home-hero-phrase {
  text-shadow: 0 1px 10px rgba(201, 79, 0, .12);
}

@media (max-width: 600px) {
  .coded-home-shell .coded-welcome p { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .coded-home-shell .home-hero-phrase { transition: opacity .2s linear; transform: none; }
  .coded-home-shell .home-hero-phrase.is-leaving,
  .coded-home-shell .home-hero-phrase.is-entering { transform: none; }
}

/* r158: internal Song Flow uses the same direct geometry as the approved recipient step. */
.restyled-shell.internal-flow-shell > main { padding-inline: 0; }
.restyled-shell.internal-flow-shell > main > .flow-screen {
  width: 100%;
  margin-inline: 0;
  padding-inline: 16px;
}
@media (max-width: 380px) {
  .restyled-shell.internal-flow-shell > main > .flow-screen { padding-inline: 11px; }
}

:root[data-theme="dark"] :is(
  .occasion-premium-choice,
  .restyled-shell .manual-flow-choice,
  .restyled-shell .choice
):not(.selected):not(:hover):not(:focus-visible),
:root[data-theme="dark"] .restyled-shell .final-song-card {
  background: linear-gradient(135deg, rgba(10, 28, 36, .96), rgba(5, 18, 24, .96));
}

/* r202: visual account entry and future cross-platform account screen. */
.popover-menu .account-menu-card {
  min-height: 74px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 122, 0, .34);
  background: linear-gradient(135deg, rgba(255, 122, 0, .12), rgba(12, 32, 40, .86));
}
.popover-menu .account-menu-card:hover { border-color: rgba(255, 154, 50, .72); }
.account-menu-avatar,
.account-status-avatar,
.settings-account-icon,
.account-link-icon {
  display: grid;
  place-items: center;
  color: #ff8a1d;
  border: 1px solid rgba(255, 122, 0, .4);
  background: rgba(255, 122, 0, .09);
  box-shadow: inset 0 0 18px rgba(255, 122, 0, .06);
}
.account-menu-avatar { width: 44px; height: 44px; border-radius: 14px; }
.account-menu-avatar .icon { width: 23px; height: 23px; }
.account-menu-copy { min-width: 0; display: grid; gap: 3px; }
.account-menu-copy strong { overflow: hidden; color: #fff; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-copy small { overflow: hidden; color: #8fa1a9; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-action { color: #ff9a32; font-size: 10px; font-weight: 800; }
.popover-menu .account-menu-divider { margin-block: 8px 5px; }

.settings-account-entry {
  width: 100%;
  min-height: 76px;
  margin: 0 0 14px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-align: left;
  border: 1px solid rgba(255, 122, 0, .42);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(63, 33, 12, .5), rgba(7, 19, 26, .98));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
}
.settings-account-entry:hover { border-color: #ff7a00; }
.settings-account-entry > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.settings-account-entry b { font-size: 15px; }
.settings-account-entry small { color: #95a4aa; font-size: 11px; }
.settings-account-entry > .icon { color: #ff8a1d; }
.settings-account-icon { width: 46px; height: 46px; border-radius: 15px; }
.settings-account-icon .icon { width: 24px; height: 24px; }

.account-screen { padding-bottom: 6px; }
.account-status-card,
.account-benefits-card,
.account-connect-card {
  margin: 12px 0;
  padding: 16px;
  color: #fff;
  border: 1px solid rgba(132, 169, 183, .3);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(12, 32, 40, .96), rgba(7, 19, 26, .99));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 12px 32px rgba(0, 0, 0, .22);
}
.account-status-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 13px;
  border-color: rgba(255, 122, 0, .48);
  background: radial-gradient(circle at 10% 20%, rgba(255, 122, 0, .14), transparent 46%), linear-gradient(135deg, rgba(21, 41, 47, .98), rgba(7, 19, 26, .99));
}
.account-status-identity { display: grid; justify-items: center; gap: 5px; }
.account-status-avatar { width: 58px; height: 58px; border-radius: 19px; }
.account-status-avatar .icon { width: 30px; height: 30px; }
.account-status-copy { min-width: 0; }
.account-status-copy > span { color: #90a0a7; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.account-status-copy h2 { margin: 4px 0 5px; font-size: clamp(14px, 4.1vw, 17px); line-height: 1.16; letter-spacing: -.015em; overflow-wrap: anywhere; }
.account-status-copy p { margin: 0; color: #c1cbd0; font-size: 11px; }
.account-status-copy p i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #ff8a1d; box-shadow: 0 0 8px rgba(255, 122, 0, .8); }
.account-name-edit { width: 34px; height: 34px; display: grid; place-items: center; align-self: start; color: #ff8a1d; border: 1px solid rgba(255, 122, 0, .3); border-radius: 11px; background: rgba(255, 122, 0, .07); cursor: pointer; }
.account-name-edit .icon { width: 18px; height: 18px; }
.account-name-edit:hover,
.account-name-edit:focus-visible { border-color: #ff8a1d; background: rgba(255, 122, 0, .14); box-shadow: 0 0 16px rgba(255, 122, 0, .18); outline: none; }
.account-status-badge { padding: 5px 8px; color: #ff9a32; font-size: 9px; font-weight: 900; letter-spacing: .08em; border: 1px solid rgba(255, 122, 0, .3); border-radius: 999px; background: rgba(255, 122, 0, .08); }

.account-benefits-card h2,
.account-connect-card h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 17px; }
.account-benefits-card h2 .icon { width: 23px; height: 23px; color: #ff8a1d; }
.account-benefits-card ul { margin: 15px 0 0; padding: 0; display: grid; gap: 14px; list-style: none; }
.account-benefits-card li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.account-benefits-card li > span { width: 28px; height: 28px; display: grid; place-items: center; color: #07131a; font-size: 14px; font-weight: 900; border-radius: 9px; background: linear-gradient(135deg, #ffc04e, #ff7200); }
.account-benefits-card li div { display: grid; gap: 3px; }
.account-benefits-card li b { font-size: 13px; }
.account-benefits-card li small { color: #96a6ad; font-size: 11px; line-height: 1.45; }

.account-connect-card { border-color: rgba(255, 122, 0, .38); }
.account-connect-heading { margin-bottom: 15px; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center; }
.account-connect-heading p { margin: 4px 0 0; color: #9aa8ae; font-size: 11px; line-height: 1.4; }
.account-link-icon { width: 46px; height: 46px; border-radius: 15px; }
.account-link-icon .icon { width: 24px; height: 24px; }
.account-provider {
  width: 100%;
  min-height: 50px;
  margin-top: 9px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  color: #fff;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
}
.account-provider:disabled { cursor: default; opacity: .82; }
.account-provider > span { width: 30px; height: 30px; display: grid; place-items: center; color: #ff8a1d; border-radius: 10px; background: rgba(255, 122, 0, .1); }
.account-provider > span .icon { width: 17px; height: 17px; }
.account-provider b { font-size: 13px; }
.account-provider small { padding: 3px 7px; color: #ff9a32; font-size: 9px; font-weight: 800; border-radius: 999px; background: rgba(255, 122, 0, .09); }
.account-provider-web > span,
.account-provider-telegram > span,
.account-provider-android > span { color: #fff; background: rgba(255, 122, 0, .1); }
.account-provider.connected small { color: #73e1bd; background: rgba(24, 200, 146, .12); }
.account-provider.is-static { cursor: default; }
.account-provider.actionable { cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.account-provider.actionable:hover,
.account-provider.actionable:focus-visible { border-color: rgba(255, 138, 29, .62); background: rgba(255, 122, 0, .08); outline: none; transform: translateY(-1px); }
.account-preview-divider { height: 27px; display: flex; align-items: center; gap: 10px; color: #6f8189; font-size: 10px; }
.account-preview-divider::before,
.account-preview-divider::after { content: ''; height: 1px; flex: 1; background: rgba(255, 255, 255, .08); }
.account-email-preview { display: grid; gap: 10px; }
.account-email-preview label { display: grid; gap: 6px; color: #acb9be; font-size: 10px; }
.account-email-preview input { width: 100%; height: 44px; padding: 0 12px; color: #fff; border: 1px solid rgba(255, 255, 255, .1); border-radius: 13px; background: rgba(0, 0, 0, .19); }
.account-email-preview input:disabled { opacity: .72; }
.account-email-preview .primary-button { margin-top: 2px; }
.account-email-preview > p { margin: 0; color: #87979e; font-size: 11px; text-align: center; }
.account-email-preview > p span { color: #ff8a1d; font-weight: 700; }
.account-stage-note { margin: 14px 0 0; padding-top: 12px; color: #72858d; font-size: 10px; line-height: 1.5; text-align: center; border-top: 1px solid rgba(255, 255, 255, .07); }
.account-connected-card { border-color: rgba(255, 122, 0, .58); }
.account-delete-link { width: max-content; margin: 13px auto 0; padding: 6px 11px; display: block; color: #ff7464; font: inherit; font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; border: 0; background: transparent; cursor: pointer; }
.account-delete-link:hover,
.account-delete-link:focus-visible { color: #ff9a8e; outline: none; }
.account-linked-management { margin-top: 13px; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
.account-linked-management > span { min-width: 0; display: grid; gap: 3px; }
.account-linked-management small { color: #82949c; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.account-linked-management b { overflow-wrap: anywhere; font-size: 12px; }
.account-linked-management .account-delete-link { flex: 0 0 auto; margin: 0; font-size: 10px; }
.account-linked-email { padding: 14px; display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 7px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 15px; background: rgba(0, 0, 0, .16); }
.account-linked-email-label { display: block; color: #82949c; font-size: 10px; font-weight: 700; letter-spacing: .07em; line-height: 1.2; text-transform: uppercase; }
.account-linked-email-value { display: block; min-width: 0; overflow-wrap: anywhere; font-size: 14px; line-height: 1.3; }
.account-linked-email-note { display: block; margin-top: 2px; color: #91a1a8; font-size: 11px; line-height: 1.5; }
.account-code-sent { margin: 0; color: #a9b6bb; font-size: 11px; line-height: 1.5; text-align: center; }
.account-change-email { min-height: 34px; color: #ff9a32; font-size: 11px; font-weight: 800; border: 0; background: transparent; }
.account-auth-feedback { margin: 12px 0 0; padding: 10px 12px; font-size: 11px; line-height: 1.45; border-radius: 12px; }
.account-auth-feedback.error { color: #ffb7ae; border: 1px solid rgba(255, 91, 70, .35); background: rgba(95, 17, 11, .22); }
.account-auth-feedback.success { color: #a9ecd6; border: 1px solid rgba(24, 200, 146, .3); background: rgba(9, 81, 59, .2); }
.account-loading { min-height: 110px; display: grid; place-items: center; align-content: center; gap: 12px; color: #98a7ad; font-size: 12px; }
.account-loading p { margin: 0; }

.account-link-dialog { position: relative; max-width: 390px; border-color: rgba(255, 122, 0, .5); }
.account-link-dialog > p { width: 100%; margin: 0 0 16px; color: #bdc6ca; font-size: 13px; line-height: 1.55; text-align: center; }
.account-link-dialog > p b { color: #fff; overflow-wrap: anywhere; }
.account-link-dialog h2 { margin-bottom: 8px; text-align: center; }
.account-link-close { position: absolute; top: 12px; right: 14px; width: 28px; height: 28px; display: grid; place-items: center; color: #aebbc0; font-size: 24px; line-height: 1; border: 0; border-radius: 7px; background: transparent; cursor: pointer; transition: color .18s ease, text-shadow .18s ease, background .18s ease; }
.account-link-close:hover,
.account-link-close:focus-visible { color: #ff9b32; background: rgba(255, 122, 0, .08); text-shadow: 0 0 12px rgba(255, 122, 0, .9); outline: none; }
.account-link-platform-icon { width: 54px; height: 54px; margin: 2px auto 10px; display: grid; place-items: center; color: #fff; border-radius: 17px; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }
.account-link-platform-icon .icon { width: 28px; height: 28px; }
.account-link-platform-web { color: #fff; border: 1px solid rgba(255, 138, 29, .5); background: radial-gradient(circle at 35% 30%, rgba(255, 153, 45, .24), transparent 48%), linear-gradient(145deg, #172329, #08151b); box-shadow: 0 0 20px rgba(255, 122, 0, .2), inset 0 1px rgba(255, 255, 255, .05); }
.account-link-dialog .account-email-preview { width: 100%; }
.account-name-dialog { position: relative; max-width: 390px; border-color: rgba(255, 122, 0, .5); }
.account-name-dialog h2 { margin-bottom: 8px; text-align: center; }
.account-name-dialog > p { width: 100%; margin: 0 0 15px; color: #bdc6ca; font-size: 12px; line-height: 1.5; text-align: center; }
.account-name-field { width: 100%; margin-bottom: 14px; display: grid; gap: 7px; color: #aebbc0; font-size: 11px; text-align: left; }
.account-name-field input { width: 100%; height: 48px; padding: 0 13px; color: #fff; font-size: 16px; font-weight: 750; border: 1px solid rgba(255, 122, 0, .32); border-radius: 14px; background: rgba(0, 0, 0, .23); }
.account-name-field input:focus { border-color: #ff8a1d; box-shadow: 0 0 0 3px rgba(255, 122, 0, .1); outline: none; }
.account-name-field input:disabled { opacity: .65; }

.account-delete-dialog { border-color: rgba(255, 76, 61, .38); }
.account-delete-symbol { width: 58px; height: 58px; margin: 2px auto 12px; display: grid; place-items: center; color: #fff; font-size: 34px; font-weight: 900; line-height: 1; border: 2px solid #ff4f3d; border-radius: 50%; background: radial-gradient(circle, rgba(255, 79, 61, .22), rgba(95, 13, 8, .18)); box-shadow: 0 0 22px rgba(255, 57, 40, .28); }
.account-delete-dialog h2 { text-align: center; }
.account-delete-dialog > p { width: 100%; margin: 0 0 16px; color: #bdc6ca; font-size: 13px; line-height: 1.55; text-align: left; }
.account-delete-code-field { margin: 0 0 14px; display: grid; gap: 7px; color: #aebbc0; font-size: 11px; text-align: left; }
.account-delete-code-field input { width: 100%; height: 50px; color: #fff; font-size: 21px; font-weight: 900; letter-spacing: .28em; text-align: center; border: 1px solid rgba(255, 79, 61, .34); border-radius: 14px; background: rgba(0, 0, 0, .23); }
.account-delete-code-field input:focus { outline: none; border-color: #ff5b46; box-shadow: 0 0 0 3px rgba(255, 79, 61, .1); }
.account-delete-error { padding: 9px 11px; color: #ffc0b8 !important; font-size: 11px !important; border: 1px solid rgba(255, 91, 70, .34); border-radius: 11px; background: rgba(95, 17, 11, .24); }

html[data-theme="light"] .account-menu-copy strong,
html[data-theme="light"] .settings-account-entry,
html[data-theme="light"] .account-status-card,
html[data-theme="light"] .account-benefits-card,
html[data-theme="light"] .account-connect-card,
html[data-theme="light"] .account-provider { color: #142027; }
html[data-theme="light"] .popover-menu .account-menu-card,
html[data-theme="light"] .settings-account-entry,
html[data-theme="light"] .account-status-card,
html[data-theme="light"] .account-benefits-card,
html[data-theme="light"] .account-connect-card { background: linear-gradient(135deg, #fff8f0, #f3f8fa); }
html[data-theme="light"] .account-menu-copy small,
html[data-theme="light"] .settings-account-entry small,
html[data-theme="light"] .account-status-copy p,
html[data-theme="light"] .account-benefits-card li small,
html[data-theme="light"] .account-connect-heading p { color: #63747c; }
html[data-theme="light"] .account-email-preview input { color: #142027; background: #fff; }
html[data-theme="light"] .account-link-dialog > p { color: #63747c; }
html[data-theme="light"] .account-name-dialog > p,
html[data-theme="light"] .account-name-field { color: #63747c; }
html[data-theme="light"] .account-name-field input { color: #142027; background: #fff; }
html[data-theme="light"] .account-link-dialog > p b { color: #142027; }
html[data-theme="light"] .account-link-close { color: #63747c; background: transparent; }
html[data-theme="light"] .account-linked-email { background: #fff; }
html[data-theme="light"] .account-linked-email small,
html[data-theme="light"] .account-code-sent { color: #63747c; }

@media (max-width: 380px) {
  .account-status-card { grid-template-columns: 52px minmax(0, 1fr) 32px; }
  .account-status-avatar { width: 52px; height: 52px; }
  .account-menu-action { display: none; }
  .popover-menu .account-menu-card { grid-template-columns: 44px minmax(0, 1fr); }
}
.generation-live-status {
  max-width: 430px;
  margin: 8px auto 0;
  color: var(--muted);
  font-size: clamp(16px, 4.3vw, 19px);
  line-height: 1.45;
  text-align: center;
}