: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;
}

/* 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: #f9b821;
  box-shadow: 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-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: 1px; 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); }
.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; }
.main-auth-card strong { color: #fff; }
.main-auth-back {
  border: 0;
  background: transparent;
  color: #ff7a00;
  font: inherit;
  font-weight: 700;
  margin: 14px auto 0;
  padding: 8px 14px;
  cursor: pointer;
}
.main-auth-back:hover,
.main-auth-back:focus-visible { text-shadow: 0 0 14px rgba(255, 122, 0, .75); }
.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 { 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) 48px; 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 > .compact-action, .details-card > .inline-voice-recorder { grid-column: 1 / 3; }
.details-card textarea { min-height: 118px; padding: 14px 48px 14px 14px; resize: vertical; border-radius: 16px; font: inherit; line-height: 1.45; }
.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; }
.music-error { margin-top: 14px; padding: 18px; border: 1px solid color-mix(in srgb, #d85848 55%, var(--line)); border-radius: 19px; background: color-mix(in srgb, #d85848 8%, var(--card)); }
.music-error > b { font-size: 18px; }
.music-error p { margin: 7px 0 14px; color: var(--muted); line-height: 1.45; }
.music-error button { width: 100%; }
.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); }
.approved-cover { position: relative; aspect-ratio: 1.52; overflow: hidden; border-radius: 18px; background: radial-gradient(circle at 50% 45%, #ffc965, #ff8a00 66%, #dc5f00); }
.approved-cover::before, .approved-cover::after { content: '♪  ✦  ♡'; position: absolute; z-index: 2; color: white; font-size: 24px; letter-spacing: 22px; opacity: .75; }
.approved-cover::before { left: 17px; top: 15px; }
.approved-cover::after { right: -5px; bottom: 12px; transform: rotate(-9deg); }
.approved-cover img { position: absolute; z-index: 1; width: 76%; height: auto; left: 12%; top: -10%; border-radius: 50%; mix-blend-mode: normal; filter: drop-shadow(0 12px 18px rgba(92, 35, 0, .28)); }
.approved-song-cover { position: relative; overflow: hidden; aspect-ratio: 1.42; border-radius: 18px; background: #ffb34d; }
.approved-song-cover img { position: absolute; max-width: none; width: 390%; height: auto; left: -64.5%; top: -119%; }
[data-theme="dark"] .approved-song-cover img { left: -222.5%; }
.result-song-cover { width: 100%; }
.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; }
.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; }

/* 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. */
@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);
  }
}

[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; }
.approved-song-cover { border-radius: 17px; }
.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-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 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 .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);
  }
}
.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: 66px;
  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; }

/* 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: 62px; }
  .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 .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,
.result-footer {
  min-height: 160px;
  margin-inline: -24px;
}
.songs-footer::before,
.result-footer::before {
  transform: scale(1.55);
  transform-origin: center bottom;
}
.songs-footer { flex: 1 0 160px; margin-bottom: -22px; }
.result-footer { margin-top: 14px; 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 .result-footer {
  background: linear-gradient(180deg, rgba(3, 9, 12, 0) 0%, rgba(3, 9, 12, .78) 26%, #03090c 58%);
}
.restyled-shell .flow-screen:has(> .result-footer) { overflow: hidden; }

.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 .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, .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,
html[data-theme="light"] .restyled-shell .result-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; }
}