/* Warm Neutral / Solar Accent. Decorative muted is not used for body copy. */
:root {
  --bg: #f8f8f5; --bg-alt: #f3f3ef; --surface: #fff;
  --ink: #17181c; --secondary: #5f636b; --muted: #68717e;
  --border: #e5e5df; --divider: #ecece7;
  --solar: #f4c542; --solar-hover: #e6b62f; --solar-soft: #fff5cf; --solar-faint: #fffae9;
  --blue: #3558f4; --blue-soft: #eef2ff;
  --success: #178a5b; --success-bg: #eaf7f1;
  --danger: #c83e4d; --danger-bg: #fcedef; --warning: #8a6412;

  /* Semantic colors: text on an accent is independent of the page text. */
  --surface-elevated: #fff; --surface-card: var(--surface);
  --input-bg: #fff; --input-text: var(--ink); --input-placeholder: #68717e;
  --control-border: #7e8796; --active-border: #93670c;
  --focus-ring: #3558f4; --focus-halo: #3558f426;
  --accent-surface: #fff6d6; --accent-text: #654808;
  --selected-surface: #fff6d6; --selected-text: #29220e; --selected-secondary: #65572d;
  --hover-surface: #f0f2f6; --button-primary: var(--solar); --button-primary-hover: var(--solar-hover);
  --button-primary-text: #29220e; --button-secondary: var(--surface-elevated); --button-secondary-text: var(--ink);
  --card-highlight: #ffffff80;
  /* Single source of dark palette values; both dark selectors below alias it. */
  --dark-bg: #15181e; --dark-bg-alt: #1b2029; --dark-surface: #242a35;
  --dark-ink: #f4f6fa; --dark-secondary: #c3cad6; --dark-muted: #acb6c6;
  --dark-border: #495467; --dark-divider: #3b4555; --dark-blue: #a4b5ff; --dark-blue-soft: #293650;
  --dark-solar-faint: #403820; --dark-danger-bg: #482a32; --dark-success-bg: #1e4038;
  --dark-surface-elevated: #2c3442; --dark-input-bg: #1c222d;
  --dark-control-border: #77859c; --dark-active-border: #f4c542;
  --dark-selected-text: #fff2c9; --dark-selected-secondary: #e1d6b5;
  --dark-hover-surface: #333d4d; --dark-focus-ring: #a4b5ff; --dark-focus-halo: #a4b5ff30;
  --dark-success: #7adbb0; --dark-danger: #ffa7b2; --dark-warning: #f2d47b;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --radius: 18px; --control-radius: 12px;
  --shadow: 0 12px 32px #17181c06; --transition: 160ms ease;
  --font: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  color: var(--ink); background: var(--bg); color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-padding-bottom: 160px; }
body { margin: 0; }
.signed-in { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
button, input, textarea, select { font: inherit; }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 13px 22px; border: 1px solid transparent;
  border-radius: var(--control-radius); background: var(--button-primary); color: var(--button-primary-text);
  font-size: 15px; font-weight: 650; line-height: 1.4; text-align: center;
  cursor: pointer; text-decoration: none; transition: background var(--transition), transform var(--transition), border-color var(--transition);
}
button:hover, .button:hover { background: var(--solar-hover); text-decoration: none; }
button:active, .button:active { transform: translateY(1px); }
.button-secondary, .secondary { background: var(--surface); color: var(--ink); border-color: #898d95; }
.button-secondary:hover, .secondary:hover { background: var(--bg-alt); border-color: var(--secondary); }
.button-danger { background: var(--danger-bg); color: #a62f3d; border-color: #dca4ab; }
.small { min-height: 44px; padding: 10px 16px; font-size: 14px; }
button:disabled, input:disabled, .button[aria-disabled="true"] { background: var(--bg-alt); color: var(--secondary); border-color: var(--border); cursor: not-allowed; transform: none; }
button[aria-busy="true"] { cursor: wait; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--blue); }
#main:focus { outline: none; }
.icon { width: 22px; height: 22px; flex-shrink: 0; vertical-align: middle; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.035em; margin: 0 0 16px; overflow-wrap: anywhere; }
h1 { font-size: clamp(32px, 4vw, 40px); font-weight: 750; }
h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 720; }
h3 { font-size: 20px; font-weight: 680; }
p { margin: 0 0 20px; overflow-wrap: anywhere; }
small { font-size: 14px; font-weight: 450; letter-spacing: 0; }
.lead { font-size: 17px; line-height: 1.65; color: var(--secondary); max-width: 570px; margin-bottom: 28px; }
.muted, .helptext { color: var(--secondary); font-size: 14px; }
.eyebrow { display: block; color: var(--secondary); font-size: 12px; font-weight: 700; letter-spacing: .105em; margin-bottom: 14px; }
.solar-dot, .credit-mark { display: inline-block; width: 8px; height: 8px; background: var(--solar); border-radius: 50%; }
.site-header { max-width: 1200px; margin: auto; padding: 20px 20px; padding-top: max(20px, env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); min-width: 0; line-height: 1; }
.brand span:last-child { overflow-wrap: anywhere; }
.brand:hover { text-decoration: none; }
.brand-logo { display: block; width: 220px; height: auto; max-height: 60px; object-fit: contain; object-position: left center; }
.brand-logo-dark, .brand-mark { display: none; }
.brand-mark { width: 40px; height: 40px; object-fit: contain; }
html[data-theme="dark"] .brand-logo-light { display: none; }
html[data-theme="dark"] .brand-logo-dark { display: block; }
html[data-theme="dark"] .brand-mark { content: url("brand/muzogram-mark-dark.png"); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) .brand-logo-light { display: none; }
  html:not([data-theme="light"]):not([data-theme="dark"]) .brand-logo-dark { display: block; }
  html:not([data-theme="light"]):not([data-theme="dark"]) .brand-mark { content: url("brand/muzogram-mark-dark.png"); }
}
.balance-pill { display: flex; align-items: center; gap: 7px; white-space: nowrap; min-height: 44px; border: 1px solid var(--border); background: var(--surface); padding: 10px 12px; color: var(--ink); font-size: 13px; font-weight: 650; border-radius: 12px; }
.desktop-nav { display: none; }
.container { max-width: 1200px; margin: auto; padding: 12px 20px 48px; }
.demo-notice { color: var(--secondary); background: var(--bg-alt); border-radius: 8px; padding: 8px 12px; font-size: 12px; margin-bottom: 24px; }
.footer { max-width: 1160px; margin: auto; border-top: 1px solid var(--border); padding: 30px 20px; display: flex; flex-direction: column; gap: 14px; color: var(--secondary); font-size: 13px; }
.footer-brand { font-size: 15px; }
.bottom-nav { position: fixed; z-index: 20; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
.bottom-nav a { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; min-height: 52px; color: var(--secondary); font-size: 12px; border-radius: 10px; text-decoration: none; position: relative; }
.bottom-nav a[aria-current] { color: var(--ink); font-weight: 750; background: var(--bg-alt); }
.bottom-nav a[aria-current]::before { content: ""; width: 20px; height: 3px; background: var(--solar); position: absolute; top: 0; border-radius: 2px; }
.hero { display: grid; gap: 40px; padding: 30px 0 44px; }
.hero h1 { font-size: clamp(36px, 5vw, 62px); line-height: 1.1; letter-spacing: -.055em; margin: 24px 0; }
.hero-underline { text-decoration: underline; text-decoration-color: var(--solar); text-decoration-thickness: 5px; text-underline-offset: 7px; }
.hero .lead { max-width: 470px; }
.hero-secondary { display: inline-flex; min-height: 44px; align-items: center; margin: 10px 0 0 16px; color: var(--secondary); font-size: 14px; }
.hero-note { font-size: 13px; color: var(--secondary); margin: 20px 0 0; }
.hero-preview { background: white; border: 1px solid var(--border); padding: 18px; border-radius: 20px; box-shadow: var(--shadow); align-self: center; }
.preview-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; letter-spacing: .09em; color: var(--secondary); margin: 0 0 16px; }
.preview-caption { padding: 22px 0 0; }
.preview-caption h2 { font-size: 23px; }
.preview-caption .eyebrow { font-size: 9px; margin-bottom: 9px; }
.preview-caption p { font-size: 13px; color: var(--secondary); margin-bottom: 16px; }
.preview-wave { border-top: 1px solid var(--divider); display: flex; align-items: center; gap: 16px; padding-top: 16px; font-size: 12px; color: var(--secondary); }
.preview-wave > span:first-child { font-size: 26px; color: var(--ink); }
.preview-wave > span:last-child { white-space: nowrap; }
.wave-bars { display: flex; flex: 1; align-items: center; justify-content: space-between; height: 32px; gap: 3px; }
.wave-bars i { width: 3px; height: 30%; border-radius: 2px; background: #7784aa; }
.wave-bars i:nth-child(3n) { height: 90%; }.wave-bars i:nth-child(4n) { height: 65%; }.wave-bars i:nth-child(5n) { height: 45%; }
.artwork { position: relative; isolation: isolate; overflow: hidden; min-width: 0; height: 210px; background: linear-gradient(135deg, #efd6c8, #e9b89e 55%, #ca9885); border-radius: 12px; }
.art-2 { background: linear-gradient(135deg, #a9b7df, #727db4 55%, #c8b8d5); }
.art-3 { background: linear-gradient(135deg, #ecd8cc, #dba7a0 65%, #ca8e83); }
.art-4 { background: linear-gradient(135deg, #b4d6cc, #82afba 55%, #66879d); }
.art-5 { background: linear-gradient(135deg, #dfbac4, #b17e96 60%, #dfbe94); }
.art-hero { height: 265px; background: linear-gradient(135deg, #eadbd1, #d7bbad 55%, #b59488); }
.art-orbit { position: absolute; width: 290px; height: 290px; border: 1px solid #fff7; border-radius: 50%; left: -75px; top: -100px; }
.art-orbit::after { content: ""; position: absolute; inset: 22px; border: 1px solid #fff5; border-radius: 50%; }
.art-disc { position: absolute; width: 200px; height: 200px; border-radius: 50%; top: 36px; right: 12%; background: repeating-radial-gradient(circle, #303238 0, #303238 2px, #393b41 3px, #393b41 4px); box-shadow: 12px 16px 22px #17181c15; transform: rotate(-18deg); }
.art-disc span { position: absolute; inset: 33%; border-radius: 50%; background: #e8d4bd; }
.art-disc span::after { content: ""; position: absolute; inset: 42%; border-radius: 50%; background: var(--ink); }
.art-2 .art-disc span { background: #b9c3e5; }.art-4 .art-disc span { background: #bedbd5; }
.art-caption { position: absolute; z-index: 2; left: 20px; bottom: 19px; color: #24252a; font-size: 9px; letter-spacing: .15em; line-height: 1.7; font-weight: 800; background: #ffffffc7; padding: 6px 9px; border-radius: 4px; }
.art-note { position: absolute; right: 18px; top: 12px; font-size: 28px; color: #252630; }
.section { padding: 42px 0; scroll-margin-top: 24px; }
.section-heading { max-width: 700px; margin-bottom: 28px; }.section-heading p { color: var(--secondary); }
.three-grid, .two-grid, .packages, .tracks, .occasion-grid { display: grid; gap: 18px; min-width: 0; }
.card, .surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; min-width: 0; }
.card p:last-child { margin-bottom: 0; }
.how-card { margin: 0; padding: 26px; }.how-card p { font-size: 15px; color: var(--secondary); }
.step-number { display: inline-block; font-size: 14px; letter-spacing: .06em; margin-bottom: 28px; padding-bottom: 8px; border-bottom: 3px solid var(--solar); }
.gift-section { display: grid; gap: 24px; }.occasion-grid { grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.occasion { padding: 20px 16px; background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.occasion:nth-child(odd) { border-right: 1px solid var(--border); }.occasion:nth-last-child(-n+2) { border-bottom: none; }
.occasion span { font-size: 10px; color: var(--secondary); letter-spacing: .08em; }.occasion h3 { font-size: 18px; margin: 20px 0 8px; }.occasion p { color: var(--secondary); font-size: 14px; margin: 0; }
.text-link, .back-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; }
.result-example { display: grid; gap: 30px; align-items: center; }.result-example > .artwork { height: 250px; }.result-example p { color: var(--secondary); }
.credit-explainer { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; padding: 28px; margin-top: 28px; }.credit-explainer p { max-width: 610px; color: var(--secondary); }
.faq { max-width: 800px; margin: auto; }.faq details { border-bottom: 1px solid var(--border); }.faq p { color: var(--secondary); padding: 0 0 20px; }
summary { min-height: 48px; padding: 14px 0; cursor: pointer; font-weight: 600; font-size: 15px; }
summary::marker { color: var(--secondary); }details[open] > summary { margin-bottom: 8px; }
.narrow, .wizard { max-width: 760px; margin: 28px auto; }.narrow { max-width: 520px; }.center { text-align: center; }
.start-page { display: grid; align-items: center; gap: 36px; padding: 34px 0; }.start-art { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }.start-art .artwork { height: 260px; }.start-art-caption { padding: 20px 8px 8px; font-size: 20px; font-weight: 650; line-height: 1.4; letter-spacing: -.02em; }
.stepper { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1.2fr; padding: 0 0 26px; margin: 0 0 32px; border-bottom: 1px solid var(--border); gap: 8px; }
.stepper li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--secondary); }
.stepper li > span { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; background: var(--bg-alt); border: 1px solid #b9bbc0; border-radius: 9px; font-size: 12px; }
.stepper [aria-current] { color: var(--ink); font-weight: 750; }.stepper [aria-current] > span { background: var(--solar); border-color: var(--warning); }
.step-long { display: none; }.form-stack label { font-weight: 600; font-size: 15px; display: block; margin-bottom: 8px; }
.field { margin-bottom: 24px; }.field:last-child { margin-bottom: 0; }
.form-stack input:not([type=radio]):not([type=checkbox]):not([type=hidden]), .form-stack textarea, .form-stack select, .input, .textarea, .select { display: block; width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #898d95; border-radius: var(--control-radius); background: var(--surface); color: var(--ink); font-size: 16px; }
.form-stack input:hover, .form-stack textarea:hover, .form-stack select:hover { border-color: var(--secondary); }
.form-stack [aria-invalid=true] { border-color: var(--danger)!important; background: #fffbfc!important; }
textarea { resize: vertical; line-height: 1.65; }textarea::placeholder, input::placeholder { color: var(--input-placeholder); opacity: 1; }
.form-stack .helptext { display: block; margin-top: 8px; font-size: 13px; }.helptext ul { padding-left: 20px; }.form-stack > .card > p { margin-bottom: 22px; }
.choice-field { padding: 0; border: 0; margin: 0 0 28px; min-width: 0; }.choice-field:last-child { margin-bottom: 0; }.choice-field legend { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.choice-field > div:not(.errorlist) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice-field label { position: relative; display: flex; gap: 9px; align-items: center; overflow-wrap: anywhere; height: 100%; min-height: 52px; padding: 12px; border: 1px solid #898d95; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 500; margin: 0; background: var(--surface); transition: background var(--transition), border-color var(--transition); }
.choice-field label:has(input:checked) { background: var(--solar-faint); border-color: var(--warning); box-shadow: inset 0 0 0 1px var(--solar); font-weight: 650; }
.choice-field label:has(input:checked)::after { content: "✓"; position: absolute; top: 2px; right: 6px; font-size: 10px; color: var(--ink); }
.choice-field label:hover { border-color: var(--ink); }.choice-field label:focus-within { outline: 3px solid var(--blue); }
input[type=radio] { accent-color: var(--ink); width: 17px; height: 17px; flex-shrink: 0; margin: 0; }
.source-tabs > div { grid-template-columns: 1fr!important; }.source-tabs label { padding: 16px; }
.privacy-note { margin-top: 14px; }.lyrics-help { display: flex; align-items: start; flex-wrap: wrap; justify-content: space-between; gap: 12px; }.lyrics-help p { margin: 0; }.character-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.advanced { padding-top: 10px; padding-bottom: 10px; }.advanced summary .muted, .developer-options summary .muted { display: block; font-size: 13px; font-weight: 400; margin-left: 20px; }.advanced[open] { padding-bottom: 24px; }.advanced .field:first-of-type { margin-top: 14px; }
.sticky-cta { position: sticky; z-index: 5; bottom: calc(76px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding: 14px 0; background: var(--bg); border-top: 1px solid var(--border); }
.sticky-cta > button, .sticky-cta > .button { margin: 0; }.sticky-cta > .muted { display: none; }.sticky-cta > button { flex: 1; }.sticky-cta .back-link { color: var(--secondary); padding-right: 8px; }.balance-caption { font-size: 12px; color: var(--secondary); }.balance-caption strong { color: var(--ink); font-size: 14px; white-space: nowrap; }
.alert, .notice { padding: 16px 20px; border-radius: 12px; background: var(--blue-soft); color: #304993; margin: 20px 0; font-size: 14px; border: 1px solid #c8d3f3; }
.errorlist { color: #a62f3d; background: var(--danger-bg); padding: 12px 16px 12px 30px; border-radius: 10px; font-size: 14px; }
.alert.error, .notice.error { color: #a62f3d; background: var(--danger-bg); border-color: #e6b6bd; }.alert.success, .notice.success { color: #146d49; background: var(--success-bg); border-color: #abcfbf; }.alert.warning { color: var(--warning); background: var(--solar-faint); border-color: #d9c89b; }
pre { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; font-size: 15px; }.lyrics { max-height: 280px; overflow: auto; color: var(--secondary); padding-right: 12px; }.variant { padding: 8px 0 18px; border-top: 1px solid var(--border); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }.chips span, .badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 6px; background: var(--bg-alt); color: var(--secondary); font-size: 12px; font-weight: 550; }
.review-title { display: flex; align-items: center; gap: 18px; }.review-title > .artwork { width: 80px; height: 80px; flex-shrink: 0; }.review-title .art-disc { width: 80px; height: 80px; top: 16px; right: -10px; }.review-title .art-caption, .review-title .art-note { display: none; }.review-title h2 { margin: 0; font-size: 24px; }.review-title .eyebrow { font-size: 10px; margin-bottom: 8px; }
.song-settings { display: grid; gap: 16px; margin: 26px 0; padding: 22px 0; border-block: 1px solid var(--divider); }.song-settings > div { display: flex; justify-content: space-between; gap: 16px; }.song-settings dt { color: var(--secondary); font-size: 14px; }.song-settings dd { margin: 0; font-size: 14px; font-weight: 650; }
.edit-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }.edit-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }.creation-cost { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 15px; }.creation-cost p { margin: 6px 0 0; }.cost-value { white-space: nowrap; }
.result-page { max-width: 960px; margin: 16px auto; }.result-heading { margin: 24px 0; }.status-box { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); margin: 24px 0; background: var(--surface); }.status-box p { color: var(--secondary); margin: 10px 0 0; max-width: 560px; }.status-box[data-generation-url] { text-align: center; padding: 40px 24px; }.status-box[data-generation-url] p { margin: 14px auto 0; }.status-box[data-generation-url] > strong { font-size: 14px; color: var(--secondary); }
.badge.status-completed { color: #146d49; background: var(--success-bg); }.badge.status-failed { color: #a62f3d; background: var(--danger-bg); }.badge.status-partial { color: var(--warning); background: var(--solar-faint); }.status-failed #generation-state { color: #a62f3d; }.status-completed #generation-state { color: #146d49; }
.music-loader { height: 58px; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 24px; }.music-loader i { width: 6px; height: 28px; border-radius: 4px; background: var(--ink); animation: sound 1.2s ease-in-out infinite alternate; }.music-loader i:nth-child(2) { animation-delay: -.3s; height: 42px; }.music-loader i:nth-child(3) { animation-delay: -.6s; height: 54px; background: var(--solar); }.music-loader i:nth-child(4) { animation-delay: -.9s; height: 42px; }
@keyframes sound { to { transform: scaleY(.4); } }
.track-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; padding: 10px; }.track-card > .artwork { height: 180px; }.track-body { padding: 20px 12px 6px; }.track-body h3 { font-size: 21px; }.track-body .eyebrow { margin-bottom: 8px; }
audio { display: block; width: 100%; min-width: 0; height: 44px; }
.track-actions, .result-footer, .library-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.download-link { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; font-size: 14px; }.download-link .icon { width: 18px; height: 18px; }
.overflow { position: relative; flex-shrink: 0; }.overflow > summary { list-style: none; width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center; border-radius: 10px; padding: 0; border: 1px solid var(--border); }.overflow > summary::-webkit-details-marker { display: none; }.overflow > summary:hover { background: var(--bg-alt); }.overflow[open] > summary { margin: 0; }.overflow > form { position: absolute; z-index: 10; right: 0; bottom: 50px; width: 230px; padding: 8px 14px; background: white; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.text-button { background: transparent; color: var(--secondary); border: 0; min-height: 44px; padding: 8px 0; font-size: 14px; text-align: left; }.text-button:hover { background: transparent; text-decoration: underline; }.danger { color: #a62f3d; }.result-footer { margin-top: 28px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin: 20px 0 32px; }.page-heading h1, .page-heading h2 { margin: 0; }.page-heading .lead { margin: 12px 0 0; }.page-heading h2 { font-size: 24px; }.page-heading h2 a { color: var(--ink); }.library-generation .page-heading { margin-top: 0; margin-bottom: 24px; }.library-generation .track-card > .artwork { height: 150px; }.library-actions { margin-top: 20px; }
.drafts { margin-bottom: 32px; }.drafts > h2 { font-size: 20px; }.draft-row { display: flex; align-items: center; gap: 16px; border: 1px dashed #898d95; border-radius: 14px; padding: 16px; margin-bottom: 12px; background: var(--surface); }.draft-row > div { flex: 1; min-width: 0; }.draft-row h3 { font-size: 16px; margin: 8px 0 0; }.draft-row .text-link { font-size: 13px; }.empty-state { padding: 44px 24px; }.empty-state p { color: var(--secondary); }.empty-art { width: 150px; margin: 0 auto 30px; }.empty-art .artwork { height: 130px; }.empty-art .art-disc { width: 115px; height: 115px; right: -10px; top: 24px; }.empty-art .art-caption { display: none; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 28px 0; }
.credits-page { max-width: 1000px; margin: 28px auto; }.wallet { display: grid; gap: 26px; padding: 30px; margin: 30px 0 40px; }.wallet-number { font-size: 64px; font-weight: 750; letter-spacing: -.055em; line-height: 1.2; display: block; }.wallet-number small { font-size: 16px; color: var(--secondary); }.wallet-description h2 { font-size: 22px; }.wallet-description p { font-size: 15px; color: var(--secondary); }.packages { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 20px; }.package { padding: 20px 16px; margin: 0; }.package h3 { font-size: 36px; margin: 22px 0 0; }.package p { color: var(--secondary); font-size: 14px; }.package button { width: 100%; font-size: 13px; padding: 10px 6px; }.developer-options { margin-bottom: 36px; }.developer-options form { border-top: 1px solid var(--divider); padding-top: 14px; }.developer-options form p { font-size: 13px; }.ledger-row { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--divider); font-size: 14px; }.ledger-row:first-child { padding-top: 0; }.ledger-row:last-child { border: 0; padding-bottom: 0; }.ledger-row > strong { white-space: nowrap; }.positive { color: #146d49; }
.profile-page h2 { overflow-wrap: anywhere; }.avatar { display: grid; place-items: center; width: 64px; height: 64px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 20px; margin-bottom: 24px; }.avatar .icon { width: 30px; height: 30px; }.profile-balance { border-block: 1px solid var(--divider); padding: 20px 0; margin: 24px 0; display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.auth-layout { max-width: 1060px; margin: 30px auto; display: grid; gap: 60px; }.auth-story { display: none; }.auth-form { max-width: 480px; width: 100%; margin: auto; }.auth-form > p { color: var(--secondary); }.auth-form .card { padding: 24px; }.auth-switch { font-size: 14px; text-align: center; }.auth-story h2 { font-size: 40px; line-height: 1.2; }.auth-story .artwork { margin-top: 36px; height: 280px; max-width: 350px; }
.full-width { width: 100%; }.spaced { margin-top: 20px; }.skip { position: absolute; top: -100px; }.skip:focus { top: 0; left: 12px; background: white; padding: 12px; z-index: 30; }[hidden] { display: none!important; }
@media (min-width: 600px) {
  .container { padding-inline: 28px; }.site-header { padding-inline: 28px; }.two-grid, .tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-tabs > div { grid-template-columns: 1fr 1fr!important; }.step-long { display: inline; }.stepper li { font-size: 14px; }.stepper li > span { width: 32px; height: 32px; }
  .sticky-cta > button { flex: 0 1 auto; min-width: 230px; }.sticky-cta > .muted { display: block; }.song-settings { grid-template-columns: repeat(3, minmax(0, 1fr)); }.song-settings > div { display: block; }.song-settings dd { margin-top: 6px; }
  .card { padding: 30px; }.track-card { padding: 10px; }.footer { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }.packages { grid-template-columns: repeat(4, minmax(0, 1fr)); }.package { padding: 20px 14px; }
}
@media (min-width: 900px) {
  .signed-in { padding-bottom: 0; }.bottom-nav { display: none; }.desktop-nav { display: flex; align-items: center; gap: 4px; }.desktop-nav a { display: inline-flex; align-items: center; gap: 7px; color: var(--secondary); font-size: 14px; padding: 10px 12px; min-height: 44px; border-radius: 10px; }.desktop-nav .icon { width: 18px; height: 18px; }.desktop-nav a[aria-current] { color: var(--ink); background: var(--solar); text-decoration: none; }.desktop-nav a:not([aria-current]):hover { text-decoration: none; background: var(--bg-alt); }
  .site-header { padding-block: 24px; }.hero { grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: center; padding: 52px 0 60px; }.hero-preview { padding: 22px; }.hero-secondary { margin-left: 18px; }.hero-note { margin-top: 24px; }.hero .eyebrow { font-size: 11px; }
  .section { padding-block: 56px; }.three-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.gift-section { grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }.occasion { padding: 26px; }.result-example { grid-template-columns: .85fr 1.15fr; gap: 70px; }.result-example > .artwork { height: 290px; }.result-example .art-disc { width: 280px; height: 280px; }.credit-explainer { padding: 36px; }
  .wizard { margin-top: 40px; }.sticky-cta { bottom: 0; }.start-page { grid-template-columns: 1.3fr 1fr; gap: 72px; max-width: 1040px; margin: 20px auto; padding-block: 60px; }.start-art .artwork { height: 300px; }
  .wallet { grid-template-columns: .8fr 1.2fr; align-items: center; gap: 48px; padding: 36px; }.wallet-description { border-left: 1px solid var(--border); padding-left: 40px; }
  .auth-layout { grid-template-columns: 1fr 1.1fr; align-items: start; margin-block: 50px; }.auth-story { display: block; padding-top: 30px; }
}
@media (max-width: 389px) {
  .site-header, .container { padding-inline: 16px; }.brand-logo { width: 190px; max-height: 52px; }.brand { gap: 8px; }.balance-pill { padding: 10px; }.hero-secondary { margin-left: 0; display: flex; }.card { padding: 20px; }.track-card { padding: 8px; }.track-body { padding-inline: 8px; }.review-cta button { font-size: 14px; padding-inline: 14px; }.draft-row { gap: 10px; padding: 12px; }.draft-row .text-link { font-size: 12px; }
}
@media (max-width: 359px) {
  .brand-logo { display: none; }
  .brand-mark { display: block; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; } }

/* Product polish: keep generated audio honest and the creation flow compact. */
.sound-accent { display: flex; align-items: center; gap: 8px; width: 106px; height: 42px; padding: 0 10px; border-radius: 10px; background: var(--bg-alt); border-left: 4px solid #d99f85; flex-shrink: 0; }
.sound-accent-2 { border-left-color: #7888c5; }.sound-icon { color: var(--ink); font-size: 20px; line-height: 1; }.sound-wave { display: flex; align-items: center; gap: 3px; height: 22px; }.sound-wave i { display: block; width: 3px; height: 9px; border-radius: 3px; background: #a5a9b4; }.sound-wave i:nth-child(2n) { height: 17px; }.sound-wave i:nth-child(3n) { height: 12px; }.sound-accent-2 .sound-wave i { background: #7784aa; }
.track-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.track-title-row h3 { margin-bottom: 0; }.track-card { padding: 20px; }.track-body { padding: 0; }.library-generation .track-card > .artwork { height: auto; }.library-generation .track-card { padding: 16px; }
.review-sound-mark, .empty-sound-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: var(--solar-faint); color: var(--ink); font-size: 30px; flex-shrink: 0; }.empty-sound-mark { margin: 0 auto 24px; }
.compact-field { position: relative; }.field-note { display: block; margin-top: -16px; color: var(--secondary); font-size: 12px; }.lyrics-card { margin-top: 0; }.lyrics-card textarea { min-height: 190px; }.lyrics-help { padding-top: 4px; }.lyrics-help code { padding: 2px 5px; border-radius: 4px; background: var(--bg-alt); color: var(--ink); font-size: 12px; }
.lyrics-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }.toolbar-button { min-height: 36px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--secondary); font-size: 12px; font-weight: 600; }.toolbar-button:hover, .toolbar-button:focus-visible { background: var(--solar-faint); border-color: var(--warning); color: var(--ink); }.stress-note { margin: -6px 0 12px; font-size: 12px; line-height: 1.45; }
.text-input-card, .lyrics-card { padding-block: 20px; }.text-input-card .field { margin-bottom: 18px; }.text-input-card .choice-field { margin-bottom: 20px; }.privacy-note { margin-bottom: 0; }
.compact-settings { padding-block: 22px; }.compact-settings .choice-field { margin-bottom: 22px; }.compact-settings .mood-field { margin-bottom: 20px; }.compact-settings .mood-field > div:not(.errorlist) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }.compact-settings .mood-field label { min-height: 42px; padding: 8px 10px; font-size: 13px; }.compact-settings .choice-field label { min-height: 46px; padding-block: 9px; }.compact-settings .choice-field:last-child { margin-bottom: 0; }
.advanced { margin-top: 12px; }.advanced summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.advanced summary .muted { margin-left: auto; }
.nav-create-form, .inline-create-form { display: inline-flex; margin: 0; }.nav-create-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--secondary); font-size: 14px; font-weight: 500; cursor: pointer; }.nav-create-button:hover, .nav-create-button[aria-current="page"] { background: var(--bg-alt); color: var(--ink); text-decoration: none; }.nav-create-button[aria-current="page"] {}.bottom-nav .nav-create-form { display: block; }.bottom-nav .nav-create-button { flex-direction: column; gap: 4px; width: 100%; min-height: 52px; padding: 0; font-size: 12px; }.text-link-button { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--blue); font: inherit; font-weight: 600; cursor: pointer; }.text-link-button:hover { background: transparent; text-decoration: underline; }.result-footer .inline-create-form { display: inline-flex; }
.step1-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border); }.step1-actions > button { min-width: 230px; }.step1-actions > .muted { margin-right: auto; }
.draft-row { border-style: solid; padding: 11px 14px; min-height: 62px; }.draft-row h3 { margin: 3px 0 0; }.draft-row .badge { padding-block: 3px; font-size: 11px; }
.library-generation { padding: 22px; }.library-generation .tracks { gap: 12px; }.library-generation .page-heading { margin-bottom: 16px; }.library-generation .library-actions { margin-top: 12px; }
.library-tools { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }.search-field { display: flex; align-items: center; gap: 8px; flex: 1; min-height: 46px; padding: 0 12px; border: 1px solid #898d95; border-radius: 10px; background: var(--surface); color: var(--secondary); }.search-field input { width: 100%; min-height: 42px; border: 0; outline: 0; background: transparent; color: var(--ink); }.sort-field select { min-height: 46px; padding: 0 10px; border: 1px solid #898d95; border-radius: 10px; background: var(--surface); color: var(--ink); }.library-tools .button { display: none; }.library-row { display: flex; align-items: center; gap: 14px; min-height: 78px; padding: 14px 16px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }.library-sound-tile { position: relative; display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 10px; background: var(--bg-alt); color: var(--ink); font-size: 20px; }.library-sound-tile span { position: absolute; bottom: 7px; left: 9px; width: 26px; height: 2px; background: var(--solar); }.library-main { min-width: 0; flex: 1; }.library-main h2 { margin: 0 0 4px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.library-main h2 a { color: var(--ink); }.library-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--secondary); font-size: 12px; }.library-meta .badge { padding: 2px 7px; }.library-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }.icon-button { display: inline-grid; place-items: center; width: 52px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--ink); }.icon-button:hover { background: var(--solar-faint); border-color: var(--warning); }.open-button { min-width: 88px; }.library-row .overflow > form { position: static; padding: 0; border: 0; box-shadow: none; width: auto; }.library-row .overflow-popover { position: absolute; right: 0; bottom: 50px; z-index: 10; display: flex; flex-direction: column; gap: 2px; width: 200px; padding: 7px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }.overflow-popover > a, .overflow-popover > form .text-button { display: flex; align-items: center; width: 100%; min-height: 40px; padding: 8px 10px; border-radius: 8px; color: var(--ink); font-size: 13px; text-decoration: none; }.overflow-popover > a:hover, .overflow-popover > form .text-button:hover { background: var(--bg-alt); text-decoration: none; }.menu-divider { height: 1px; margin: 5px 4px; background: var(--divider); }.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; }.required-mark { color: var(--secondary); font-weight: 500; }.step1-actions { position: static; }
@media (min-width: 600px) { .text-input-card, .lyrics-card { padding-block: 22px; }.lyrics-card textarea { min-height: 190px; max-height: 320px; }.compact-settings { padding: 24px; }.compact-settings .choice-field { margin-bottom: 18px; }.compact-settings .mood-field > div:not(.errorlist) { grid-template-columns: repeat(4, minmax(0, 1fr)); }.track-card { padding: 20px; } }
@media (max-width: 599px) { .sticky-cta { margin-top: 14px; }.sticky-cta > button { min-height: 50px; }.compact-settings .mood-field > div:not(.errorlist) { grid-template-columns: repeat(2, minmax(0, 1fr)); }.sound-accent { width: 90px; }.track-card { padding: 16px; }.track-title-row { align-items: flex-start; }.track-title-row .eyebrow { margin-bottom: 4px; }.track-title-row h3 { font-size: 18px; }.review-sound-mark { width: 56px; height: 56px; }.lyrics-card textarea { min-height: 170px; }.lyrics-toolbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }.toolbar-button { flex: 0 0 auto; } }
@media (max-width: 599px) { .step1-actions { display: block; }.step1-actions > .muted { display: block; margin: 0 0 8px; }.step1-actions > button { width: 100%; min-height: 52px; } }
@media (max-width: 599px) { .library-tools { flex-wrap: wrap; }.search-field { flex-basis: 100%; }.library-tools .button { display: inline-flex; flex: 1; }.sort-field { flex: 1; }.sort-field select { width: 100%; }.library-row { min-height: 88px; padding: 12px; gap: 10px; }.library-row-actions { gap: 4px; }.open-button { display: none; }.library-main h2 { font-size: 14px; }.library-meta { gap: 5px; font-size: 11px; }.library-row .overflow-popover { right: -4px; bottom: 48px; width: min(200px, calc(100vw - 32px)); } }
.library-main h2 a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field-note { margin-top: 6px; line-height: 1.4; }
[data-auto-stress] { white-space: nowrap; }

/* Story creation: quiet surfaces, compact navigation, one primary action. */
.site-header { min-height: 60px; padding-block: 10px; }
.balance-pill { padding: 8px 12px; min-height: 44px; text-decoration: none !important; }

.wizard { margin-top: 16px; }
.stepper { padding-bottom: 14px; margin-bottom: 28px; }
.stepper li { font-size: 13px; }
.stepper li > span { width: 28px; height: 28px; }
.stepper .step-complete > span { background: var(--bg-alt); border-color: var(--secondary); }
.story-field textarea { min-height: 230px; height: 230px; max-height: 420px; resize: vertical; }
.story-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.story-actions > button { min-height: 50px; }
.story-actions .button-primary { background: #F4C542; color: #17181C; }
.story-actions .button-primary:hover { background: #E6B62F; }
.voice-button { border-color: #D9D9D3; background: var(--surface); color: var(--ink); }
.voice-button:hover { background: var(--bg-alt); }
.voice-button.is-recording { border-color: var(--danger); color: #a62f3d; background: #FCEDEF; }
.voice-feedback { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; }
[data-voice-timer] { color: var(--secondary); font-variant-numeric: tabular-nums; }
.voice-note { margin-top: 8px; }
.recording-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: recording-pulse 1.5s ease-in-out infinite; }
@keyframes recording-pulse { 50% { box-shadow: 0 0 0 5px #c83e4d18; } }
.lyrics-loading { display: flex; gap: 20px; align-items: center; padding: 22px 0; }
.lyrics-loading h2 { font-size: 23px; margin: 0 0 8px; }
.lyrics-loading p { margin: 0; }
.story-wave { display: flex; align-items: center; gap: 5px; height: 44px; flex-shrink: 0; }
.story-wave i { display: block; width: 5px; height: 26px; border-radius: 4px; background: var(--solar); animation: story-sound 1.1s ease-in-out infinite alternate; }
.story-wave i:nth-child(2n) { animation-delay: -.5s; height: 40px; }
.story-wave i:nth-child(3n) { animation-delay: -.8s; }
@keyframes story-sound { to { transform: scaleY(.35); } }
#lyrics-results { scroll-margin-top: 24px; }
#lyrics-state { color: var(--secondary); font-size: 14px; }
#lyrics-state.has-error { color: var(--danger); }
.lyrics-variants { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.variant-card { min-width: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 18px; display: flex; flex-direction: column; transition: border-color .2s, background .2s; }
.variant-number { font-size: 13px; color: var(--secondary); }
.variant-card h3 { margin: 8px 0 12px; font-size: 20px; overflow-wrap: anywhere; }
.variant-preview { font-size: 14px; line-height: 1.65; margin: 0 0 16px; max-height: 185px; overflow: hidden; mask-image: linear-gradient(#000 75%, transparent); }
.variant-card.is-expanded .variant-preview { max-height: none; mask-image: none; }
.variant-actions { margin-top: auto; display: grid; gap: 8px; }
.variant-actions button { min-height: 44px; font-size: 14px; padding: 10px; }
.variant-card.is-selected { border: 2px solid #B5891C; padding: 17px; background: #FFFAE9; }
.lyrics-variants:not(:empty) { animation: variants-in .22s ease-out; }
@keyframes variants-in { from { opacity: .2; transform: translateY(4px); } }
@media (min-width: 768px) {
  .site-header { min-height: 68px; }
  .story-field textarea { min-height: 270px; height: 270px; }
  .story-actions { flex-direction: row; align-items: center; }
  .story-actions [value=lyrics] { margin-left: auto; }
  .lyrics-variants { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .recording-dot, .story-wave i, .lyrics-variants:not(:empty) { animation: none; }
}
.wizard-story > h1 { margin-top: 0; font-size: clamp(30px, 4vw, 38px); }
.wizard-story > .lead { margin-bottom: 24px; }

/* Public landing, authentication and app dashboard share these small primitives. */
.landing-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: clamp(32px, 7vw, 92px); align-items: center; padding: clamp(48px, 8vw, 96px) 0 72px; overflow: hidden; }
.landing-copy h1 { max-width: 700px; font-size: clamp(38px, 5.5vw, 68px); line-height: 1.04; margin: 20px 0 24px; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.landing-note { color: var(--secondary); font-size: 14px; margin: 18px 0 0; }
.landing-visual { position: relative; min-height: 390px; display: grid; place-items: center; }
.visual-glow { position: absolute; width: 80%; height: 70%; border-radius: 50%; background: radial-gradient(circle, #f4c54255 0, #d7e1ff44 50%, transparent 72%); filter: blur(10px); }
.visual-window { position: relative; z-index: 1; width: min(100%, 480px); padding: 14px; border: 1px solid #fff; border-radius: 24px; background: #ffffffd9; box-shadow: 0 24px 60px #17181c18; transform: rotate(2deg); }
.visual-window-bar { display: flex; align-items: center; gap: 6px; padding: 4px 6px 16px; color: var(--secondary); font-size: 12px; }.visual-window-bar span { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }.visual-window-bar small { margin-left: auto; }
.visual-story, .visual-result { border: 1px solid var(--border); border-radius: 15px; padding: 20px; background: var(--surface); }.visual-story p { font-size: 18px; margin: 0 0 18px; }.visual-line { height: 8px; margin-top: 8px; border-radius: 6px; background: var(--bg-alt); }.visual-line.short { width: 64%; }
.visual-result { display: flex; align-items: center; gap: 16px; margin-top: 12px; background: var(--solar-faint); }.visual-result .eyebrow { margin-bottom: 5px; font-size: 10px; }.visual-result strong { display: block; }.visual-disc { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(145deg, #17181c, #58617e); color: white; font-size: 26px; flex: 0 0 auto; }.visual-wave { display: flex; align-items: center; gap: 3px; height: 24px; margin-top: 10px; }.visual-wave i { width: 4px; height: 42%; border-radius: 4px; background: var(--solar); }.visual-wave i:nth-child(2n) { height: 80%; }.visual-wave i:nth-child(3n) { height: 58%; }
.visual-chip { position: absolute; z-index: 2; padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font-size: 12px; font-weight: 700; }.chip-one { left: 0; top: 16%; }.chip-two { right: 0; bottom: 16%; }
.landing-section { padding: 74px 0; }.landing-section + .landing-section { border-top: 1px solid var(--divider); }.landing-section .section-heading { max-width: 700px; margin-bottom: 28px; }.landing-three-grid, .capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.landing-card, .capability-card { min-width: 0; padding: 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }.landing-card p, .capability-card p { color: var(--secondary); margin: 0; }.landing-card h3, .capability-card h3 { margin-top: 14px; }.capability-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.capability-card > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--solar-faint); font-size: 20px; }.landing-use-cases { background: var(--bg-alt); margin-inline: -20px; padding-inline: 20px; }.use-case-list { display: flex; flex-wrap: wrap; gap: 10px; }.use-case-list span { padding: 12px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--secondary); }.seo-copy { max-width: 820px; }.seo-copy p { color: var(--secondary); font-size: 17px; }
.dashboard-hero { display: flex; justify-content: space-between; gap: 24px; align-items: end; padding: 42px 0 30px; }.dashboard-hero h1 { margin-bottom: 12px; }.dashboard-create { flex: 0 0 auto; }.dashboard-grid { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: 16px; }.dashboard-balance { background: linear-gradient(135deg, var(--solar-faint), var(--surface)); }.dashboard-balance strong { display: block; font-size: 40px; letter-spacing: -.05em; line-height: 1; margin: 8px 0 20px; }.dashboard-balance strong small { font-size: 14px; letter-spacing: 0; }.dashboard-balance p { color: var(--secondary); font-size: 14px; }.dashboard-quick h2 { margin-bottom: 16px; }.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.quick-action { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 14px; color: var(--ink); }.quick-action:hover { background: var(--bg-alt); text-decoration: none; }.quick-action > span:first-child { color: var(--warning); font-size: 24px; }.quick-action strong, .quick-action small { display: block; }.quick-action small { margin-top: 4px; color: var(--secondary); font-size: 12px; }.dashboard-section { padding-top: 54px; }.dashboard-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 18px; }.dashboard-section-heading h2 { margin-bottom: 0; }.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.project-card { color: var(--ink); transition: transform var(--transition), border-color var(--transition); }.project-card:hover { border-color: var(--solar); text-decoration: none; transform: translateY(-2px); }.project-card-mark, .track-mini-mark { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 12px; background: var(--solar-faint); }.project-card h3 { margin: 10px 0 6px; }.project-card p, .track-mini p { color: var(--secondary); font-size: 13px; margin: 0; }.track-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.track-mini { display: flex; gap: 14px; }.track-mini-mark { flex: 0 0 auto; margin: 0; }.track-mini-copy { min-width: 0; }.track-mini h3 { margin: 0 0 4px; font-size: 17px; }.track-mini audio { display: block; width: 100%; max-width: 320px; height: 34px; margin-top: 12px; }.empty-dashboard { display: flex; align-items: center; gap: 20px; justify-content: space-between; }.empty-dashboard h3, .empty-dashboard p { margin: 0; }.empty-dashboard p { color: var(--secondary); }
.auth-shell { display: grid; grid-template-columns: minmax(0, .9fr) minmax(340px, .75fr); gap: clamp(40px, 9vw, 120px); align-items: center; max-width: 1000px; margin: 0 auto; padding: 72px 0; }.auth-intro h1 { font-size: clamp(36px, 5vw, 56px); margin: 18px 0; }.auth-promise { display: flex; gap: 14px; align-items: center; max-width: 380px; padding: 16px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); }.auth-promise > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--solar); font-size: 22px; }.auth-promise p { margin: 0; }.auth-promise small { color: var(--secondary); }.auth-heading h2 { margin-bottom: 22px; }.social-login { display: grid; gap: 9px; }.social-login > .muted { margin: 0 0 4px; }.social-button { background: var(--surface); border-color: var(--border); justify-content: flex-start; }.social-button:hover { background: var(--blue-soft); border-color: #bdc8ff; }.social-telegram::before { content: "✈"; color: #2aabee; }.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--secondary); }.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--border); }.auth-divider span { font-size: 13px; }.auth-form-card { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }.auth-switch { margin: 18px 0 0; text-align: center; color: var(--secondary); font-size: 14px; }
@media (max-width: 767px) { .landing-hero { grid-template-columns: 1fr; padding-top: 36px; }.landing-visual { min-height: 330px; }.visual-chip { font-size: 11px; }.landing-three-grid, .capability-grid, .project-grid { grid-template-columns: 1fr; }.landing-section { padding-block: 52px; }.dashboard-hero { align-items: stretch; flex-direction: column; padding-top: 28px; }.dashboard-create { width: 100%; }.dashboard-grid { grid-template-columns: 1fr; }.quick-actions { grid-template-columns: 1fr; }.quick-action { flex-direction: row; align-items: center; }.track-mini-grid { grid-template-columns: 1fr; }.empty-dashboard { align-items: stretch; flex-direction: column; }.auth-shell { grid-template-columns: 1fr; gap: 28px; padding: 36px 0; }.auth-intro h1 { font-size: 38px; }.auth-intro .lead { margin-bottom: 18px; } }
@media (max-width: 389px) { .landing-hero { padding-top: 24px; }.landing-visual { transform: scale(.94); transform-origin: top center; min-height: 300px; margin-bottom: -20px; }.chip-one { left: -4px; }.chip-two { right: -4px; }.landing-actions .button { width: 100%; }.landing-use-cases { margin-inline: -16px; padding-inline: 16px; } }

/* Auth pages: one calm, restrained card instead of a split marketing panel. */
.auth-shell { position: relative; display: grid; place-items: start center; max-width: 100%; margin: 0 auto; padding: clamp(34px, 7vw, 72px) 0; }
.auth-card { width: min(100%, 520px); padding: clamp(24px, 5vw, 42px); border: 1px solid var(--border); border-radius: 24px; background: var(--surface); background: color-mix(in srgb, var(--surface) 94%, var(--blue-soft)); box-shadow: 0 18px 50px #17181c10; }
.auth-intro { text-align: center; }.auth-intro h1 { margin: 12px 0 10px; font-size: clamp(30px, 5vw, 42px); }.auth-intro .lead { max-width: 390px; margin: 0 auto 28px; font-size: 16px; }
.auth-form-content { width: 100%; }.auth-heading { text-align: center; }.auth-heading .eyebrow { margin-bottom: 7px; }.auth-heading h2 { margin-bottom: 20px; font-size: 21px; }
.social-login { width: 100%; }.social-login > .muted { text-align: center; }.social-button { width: 100%; min-height: 50px; justify-content: center; border-color: var(--border); }.social-button::before { width: 20px; text-align: center; }.social-telegram::before { content: "✈"; color: #2aabee; }
.auth-divider { margin: 22px 0; }.auth-form-card { padding: 0; border: 0; background: transparent; box-shadow: none; }.auth-form-card .field { margin-bottom: 18px; }.auth-form-card .field:last-of-type { margin-bottom: 20px; }.auth-form-card label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 700; }.auth-form-card input:not([type=hidden]) { width: 100%; min-height: 50px; font-size: 16px; }.auth-form-card .full-width { width: 100%; min-height: 52px; }.auth-form-card .errorlist, .auth-form-content > .errorlist { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--danger-bg); color: #a62f3d; font-size: 14px; list-style: none; overflow-wrap: anywhere; }
.auth-switch { margin: 20px 0 0; }.auth-shell .helptext { display: block; margin-top: 6px; }.auth-shell .cf-turnstile { margin: 0 auto 16px; max-width: 100%; overflow: hidden; }
@media (max-width: 767px) { .auth-shell { padding-block: 24px 44px; }.auth-card { border-radius: 20px; padding: 24px 20px; }.auth-intro .lead { margin-bottom: 24px; } }
@media (max-width: 359px) { .auth-card { padding-inline: 16px; }.auth-intro h1 { font-size: 30px; }.auth-form-card input:not([type=hidden]), .auth-form-card .full-width, .social-button { min-height: 48px; } }

/* Auth controls use the same dimensions and focus treatment as the product forms. */
.auth-page .site-header { padding-block: 14px; }.auth-page .container { padding-top: 0; padding-bottom: 28px; }.auth-page .footer { max-width: 760px; padding-block: 18px; border-top-color: var(--divider); font-size: 12px; }.auth-page .footer-brand { font-size: 14px; }
.auth-form-card.auth-form { display: grid; gap: 0; }.auth-field { min-width: 0; margin-bottom: 18px; }.auth-field > label { display: block; margin-bottom: 7px; color: var(--ink); font-size: 14px; font-weight: 700; }.auth-field input:not([type=hidden]) { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--control-radius); background: var(--surface); color: var(--ink); font-size: 16px; line-height: 1.35; transition: border-color var(--transition), box-shadow var(--transition); }.auth-field input:not([type=hidden]):hover { border-color: var(--secondary); }.auth-field input:not([type=hidden]):focus { border-color: var(--blue); box-shadow: 0 0 0 3px #3558f426; outline: 0; }.auth-field.has-error input:not([type=hidden]) { border-color: var(--danger); }.password-control { position: relative; }.password-control input { padding-right: 92px !important; }.password-toggle { position: absolute; right: 8px; top: 50%; min-height: 36px; padding: 6px 9px; border: 0; border-radius: 8px; background: transparent; color: var(--blue); font-size: 13px; font-weight: 700; transform: translateY(-50%); }.password-toggle:hover { background: var(--blue-soft); color: var(--ink); }.password-toggle:active { transform: translateY(-50%); }.field-errors { margin-top: 7px; color: #a62f3d; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }.field-errors .errorlist { margin: 0; padding: 0; background: transparent; color: inherit; list-style: none; }.field-help { margin-top: 7px; color: var(--secondary); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }.auth-form > .errorlist, .auth-form-card > .errorlist { margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; background: var(--danger-bg); color: #a62f3d; font-size: 14px; list-style: none; overflow-wrap: anywhere; }.auth-submit { margin-top: 2px; }.auth-social-label { margin: 0 0 10px; color: var(--secondary); font-size: 13px; text-align: center; }.social-login { gap: 10px; }.social-button { min-height: 50px; justify-content: center; border-color: var(--border); background: var(--surface); color: var(--ink); }.social-button::before { display: inline-grid; place-items: center; width: 20px; font-size: 17px; }.social-telegram::before { content: "✈"; color: #2aabee; }.social-max::before { content: "◈"; color: #7359e8; }.social-vk::before { content: "VK"; color: #2777f0; font-size: 11px; }.social-button:hover { background: var(--blue-soft); border-color: #bdc8ff; }.password-help { margin-top: 8px; color: var(--secondary); font-size: 12px; line-height: 1.45; }.password-help summary { display: inline-block; color: var(--blue); cursor: pointer; font-weight: 650; }.password-help > div { margin-top: 7px; padding: 8px 10px; border-radius: 9px; background: var(--bg-alt); }.password-help ul { margin: 0; padding-left: 18px; }.auth-card > .auth-switch { margin-top: 20px; }
@media (max-width: 767px) { .auth-page .footer { padding-inline: 16px; }.auth-card { width: 100%; }.auth-shell { padding-top: 22px; } }

/* Creation wizard: one soft product surface across all three steps. */
.wizard-shell { position: relative; max-width: 840px; margin-top: clamp(20px, 4vw, 42px); padding-bottom: 48px; }
.wizard-shell::before { content: ""; position: absolute; z-index: -1; top: 72px; left: 15%; width: 70%; height: 260px; border-radius: 50%; background: radial-gradient(circle, #f4c54222, transparent 70%); filter: blur(18px); pointer-events: none; }
.wizard-intro { max-width: 680px; margin: 0 auto 28px; text-align: center; }.wizard-intro h1 { margin: 8px 0 12px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.045em; }.wizard-intro .lead { max-width: 600px; margin: 0 auto; }
.wizard-card { border: 1px solid var(--border); border-radius: 22px; background: var(--surface-card); box-shadow: 0 14px 38px #17181c0a; }
.wizard-shell .stepper { position: relative; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0; margin: 0 auto 38px; border: 0; max-width: 650px; }.wizard-shell .stepper::before { content: ""; position: absolute; top: 17px; left: 14%; right: 14%; height: 2px; background: var(--border); }.wizard-shell .stepper li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--secondary); font-size: 12px; text-align: center; }.wizard-shell .stepper li > span { width: 34px; height: 34px; border: 1px solid var(--control-border); border-radius: 50%; background: var(--bg); color: var(--secondary); font-weight: 700; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); }.wizard-shell .stepper li[aria-current] { color: var(--ink); }.wizard-shell .stepper li[aria-current] > span { border-color: var(--solar); background: var(--solar); color: var(--ink); box-shadow: 0 0 0 5px #f4c54222; transform: translateY(-1px); }.wizard-shell .stepper li.step-complete > span { border-color: var(--success); background: var(--success-bg); color: var(--success); }.wizard-shell .stepper li.step-complete::after { content: "✓"; position: absolute; top: 8px; font-size: 12px; color: var(--success); }.wizard-shell .stepper li.step-complete > span { color: transparent; }
.wizard-shell .text-input-card { padding: clamp(20px, 4vw, 34px); }.wizard-shell .choice-field legend { margin-bottom: 14px; color: var(--ink); font-size: 14px; }.source-choice-grid { display: grid!important; grid-template-columns: repeat(2, minmax(0, 1fr))!important; gap: 12px!important; }.source-choice-grid .source-choice { display: flex; align-items: flex-start; gap: 12px; min-height: 94px; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(145deg, var(--surface), var(--bg-alt)); transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition); }.source-choice-grid .source-choice:hover { border-color: var(--active-border); box-shadow: 0 7px 18px #17181c0b; transform: translateY(-1px); }.source-choice-grid .source-choice:has(input:checked) { border-color: var(--solar); background: var(--solar-faint); box-shadow: inset 0 0 0 1px var(--solar), 0 8px 22px #f4c54218; }.source-choice-grid .source-choice input { width: 17px; height: 17px; margin: 2px 0 0; }.source-choice-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; background: var(--blue-soft); color: var(--blue); font-size: 18px; }.source-choice strong, .source-choice small { display: block; }.source-choice strong { font-size: 15px; }.source-choice small { margin-top: 4px; color: var(--secondary); font-size: 12px; line-height: 1.35; }.wizard-shell .story-field { margin-top: 30px; }.wizard-shell .story-field > label { font-size: 18px; }.wizard-shell .field-note { margin-top: 0; margin-bottom: 10px; color: var(--secondary); }.wizard-shell textarea, .wizard-shell input[type=text], .wizard-shell select { border-color: var(--border); border-radius: 14px; background: var(--input-bg); box-shadow: inset 0 1px 2px #17181c05; }.wizard-shell textarea:focus, .wizard-shell input[type=text]:focus, .wizard-shell select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px var(--focus-halo); outline: none; }.wizard-shell .story-actions { align-items: center; padding-top: 18px; border-top: 1px solid var(--divider); }.wizard-shell .voice-button { border-color: var(--border); background: var(--surface); }.wizard-shell .voice-button:hover { border-color: var(--focus-ring); background: var(--blue-soft); }.wizard-shell .lyrics-card { margin-top: 16px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface-card); box-shadow: 0 14px 38px #17181c0a; }.wizard-shell .lyrics-card textarea { min-height: 230px; }.wizard-shell .lyrics-toolbar { border-bottom: 1px solid var(--divider); padding-bottom: 12px; }.wizard-shell .toolbar-button { border-color: var(--border); border-radius: 10px; background: var(--bg-alt); }.wizard-shell .toolbar-button:hover { border-color: var(--solar); background: var(--solar-faint); }.wizard-shell .step1-actions { border-top: 0; padding-top: 22px; }.wizard-shell .step1-actions > button, .wizard-shell .sticky-cta > button, .wizard-shell .review-cta > button { box-shadow: 0 8px 18px #f4c5422e; }
.wizard-shell .settings-card { padding: clamp(20px, 4vw, 34px); }.wizard-shell .settings-card .choice-field { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--divider); }.wizard-shell .settings-card .choice-field:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }.wizard-shell .settings-card .choice-field label { border-color: var(--border); border-radius: 13px; background: var(--surface); }.wizard-shell .settings-card .choice-field label:hover { border-color: var(--active-border); }.wizard-shell .settings-card .choice-field label:has(input:checked) { border-color: var(--solar); background: var(--solar-faint); box-shadow: inset 0 0 0 1px var(--solar); }.wizard-shell .advanced { margin-top: 14px; border-color: var(--border); border-radius: 18px; box-shadow: none; }.wizard-shell .sticky-cta { border-top: 1px solid var(--divider); background: transparent; }
.wizard-shell .review-card { padding: clamp(20px, 4vw, 34px); }.wizard-shell .review-title { padding-bottom: 22px; border-bottom: 1px solid var(--divider); }.wizard-shell .review-title h2 { font-size: clamp(22px, 3vw, 28px); }.wizard-shell .creation-cost { margin-top: 22px; padding: 18px; border-radius: 14px; background: var(--solar-faint); }.wizard-shell .review-cta { margin-top: 14px; padding-top: 18px; }
@media (max-width: 599px) { .wizard-shell .stepper { margin-bottom: 28px; }.wizard-shell .stepper li { font-size: 11px; }.wizard-shell .stepper li > span { width: 30px; height: 30px; }.wizard-shell .stepper::before { top: 15px; left: 12%; right: 12%; }.source-choice-grid { grid-template-columns: 1fr!important; }.wizard-shell .story-actions { padding-top: 16px; }.wizard-shell .story-actions > button { width: 100%; }.wizard-shell .review-title { align-items: flex-start; }.wizard-shell .sticky-cta { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }.wizard-shell .sticky-cta > button { min-width: 0; }.wizard-shell .creation-cost { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .wizard-shell .stepper li > span, .source-choice-grid .source-choice { transition: none; transform: none!important; } }

/* Authenticated product shell: compact controls, soft account surfaces and an inbox. */
.header-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }.icon-button { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); color: var(--ink); font-size: 22px; cursor: pointer; }.icon-button:hover, .account-trigger:hover { border-color: var(--blue); background: var(--blue-soft); }.notification-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 1px 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; line-height: 16px; text-align: center; }.account-shell { position: relative; }.account-trigger { display: flex; align-items: center; gap: 8px; max-width: 220px; padding: 3px 8px 3px 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; }.account-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: var(--solar); color: var(--ink); font-size: 12px; font-weight: 800; }.account-avatar.large { width: 42px; height: 42px; }.account-avatar-xl { width: 68px; height: 68px; font-size: 22px; }.account-trigger-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }.account-chevron { color: var(--secondary); }.account-menu { position: absolute; z-index: 30; top: calc(100% + 10px); right: 0; width: 258px; padding: 10px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 45px #17181c22; }.account-menu[hidden], .notification-popover[hidden] { display: none; }.account-menu > a, .account-menu-logout { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }.account-menu > a:hover, .account-menu-logout:hover { background: var(--bg-alt); }.account-menu-identity { display: flex; align-items: center; gap: 10px; padding: 8px; }.account-menu-identity strong, .account-menu-identity small { display: block; overflow-wrap: anywhere; }.account-menu-identity small { margin-top: 2px; color: var(--secondary); font-size: 12px; }.account-menu-balance { margin: 2px 8px 8px; color: var(--secondary); font-size: 12px; }.theme-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 8px 0; padding: 8px; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }.theme-picker span { grid-column: 1 / -1; color: var(--secondary); font-size: 11px; }.theme-picker button { padding: 7px 3px; border: 1px solid transparent; border-radius: 8px; background: var(--bg-alt); color: var(--ink); font-size: 11px; cursor: pointer; }.theme-picker button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }.account-menu-logout, .danger-text { color: var(--danger); }.notification-popover { position: absolute; z-index: 29; top: 72px; right: max(16px, calc((100vw - 1200px) / 2)); width: min(360px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 45px #17181c22; }.notification-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 10px; }.notification-list { display: grid; gap: 4px; max-height: 360px; overflow: auto; }.notification-item { display: grid; gap: 4px; padding: 11px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }.notification-item:hover, .notification-item.is-unread { background: var(--blue-soft); }.notification-item span { color: var(--secondary); font-size: 12px; line-height: 1.4; }.notification-empty { padding: 22px 10px; color: var(--secondary); font-size: 13px; text-align: center; }.notification-footer { display: block; margin-top: 8px; padding: 9px; border-top: 1px solid var(--divider); color: var(--blue); font-size: 13px; text-align: center; }.account-page { max-width: 980px; margin: 0 auto; padding: 36px 0 64px; }.account-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }.account-page-heading h1 { margin: 8px 0; }.account-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 24px; }.surface-card { border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }.account-summary h2 { margin: 0 0 5px; }.account-summary p { margin: 0; }.account-summary-balance { display: grid; gap: 4px; min-width: 180px; text-align: right; }.account-summary-balance span { color: var(--secondary); font-size: 12px; }.account-summary-balance strong { font-size: 20px; }.account-summary-balance .text-link { font-size: 12px; }.account-columns { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 16px; margin-top: 16px; }.account-section { padding: 24px; }.account-section h2 { margin: 7px 0 8px; }.connection-list { display: grid; gap: 8px; margin-top: 20px; }.connection-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--border); border-radius: 13px; }.connection-row strong, .connection-row small { display: block; }.connection-row small { margin-top: 3px; color: var(--secondary); font-size: 12px; overflow-wrap: anywhere; }.connection-status { color: var(--success); font-size: 12px; font-weight: 700; }.provider-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); font-size: 13px; font-weight: 800; }.provider-telegram { color: #2aabee; }.provider-max { color: #7359e8; }.provider-vk { color: #2777f0; font-size: 9px; }.provider-local { background: var(--solar-faint); color: var(--ink); }.account-email-state { margin: 12px 0 20px; color: var(--secondary); }.account-email-form { margin-top: 18px; }.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }.account-actions form { margin-left: auto; }
html[data-theme="dark"] { color-scheme: dark; --bg: var(--dark-bg); --bg-alt: var(--dark-bg-alt); --surface: var(--dark-surface); --ink: var(--dark-ink); --secondary: var(--dark-secondary); --muted: var(--dark-muted); --border: var(--dark-border); --divider: var(--dark-divider); --blue: var(--dark-blue); --blue-soft: var(--dark-blue-soft); --solar-faint: var(--dark-solar-faint); --danger-bg: var(--dark-danger-bg); --success-bg: var(--dark-success-bg); --surface-elevated: var(--dark-surface-elevated); --input-bg: var(--dark-input-bg); --input-placeholder: var(--dark-muted); --control-border: var(--dark-control-border); --active-border: var(--dark-active-border); --accent-surface: var(--dark-solar-faint); --accent-text: var(--dark-selected-text); --selected-surface: var(--dark-solar-faint); --selected-text: var(--dark-selected-text); --selected-secondary: var(--dark-selected-secondary); --hover-surface: var(--dark-hover-surface); --focus-ring: var(--dark-focus-ring); --focus-halo: var(--dark-focus-halo); --success: var(--dark-success); --danger: var(--dark-danger); --warning: var(--dark-warning); --shadow: 0 14px 35px #00000030; --card-highlight: #ffffff12; }.auth-page html[data-theme="dark"] input, html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { color: var(--ink); }.auth-page html[data-theme="dark"] .auth-card, html[data-theme="dark"] .wizard-card, html[data-theme="dark"] .lyrics-card, html[data-theme="dark"] .card, html[data-theme="dark"] .surface-card { background: var(--surface); }.auth-page html[data-theme="dark"] .footer { border-color: var(--divider); }.auth-page .site-header { background: transparent; } html[data-theme="dark"] .wizard-shell textarea, html[data-theme="dark"] .wizard-shell input[type="text"], html[data-theme="dark"] .wizard-shell select { background: var(--surface); } html[data-theme="dark"] .visual-window, html[data-theme="dark"] .visual-story, html[data-theme="dark"] .visual-result { background: var(--surface); border-color: var(--border); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --bg: var(--dark-bg); --bg-alt: var(--dark-bg-alt); --surface: var(--dark-surface); --ink: var(--dark-ink); --secondary: var(--dark-secondary); --muted: var(--dark-muted); --border: var(--dark-border); --divider: var(--dark-divider); --blue: var(--dark-blue); --blue-soft: var(--dark-blue-soft); --solar-faint: var(--dark-solar-faint); --danger-bg: var(--dark-danger-bg); --success-bg: var(--dark-success-bg); --surface-elevated: var(--dark-surface-elevated); --input-bg: var(--dark-input-bg); --input-placeholder: var(--dark-muted); --control-border: var(--dark-control-border); --active-border: var(--dark-active-border); --accent-surface: var(--dark-solar-faint); --accent-text: var(--dark-selected-text); --selected-surface: var(--dark-solar-faint); --selected-text: var(--dark-selected-text); --selected-secondary: var(--dark-selected-secondary); --hover-surface: var(--dark-hover-surface); --focus-ring: var(--dark-focus-ring); --focus-halo: var(--dark-focus-halo); --success: var(--dark-success); --danger: var(--dark-danger); --warning: var(--dark-warning); --shadow: 0 14px 35px #00000030; --card-highlight: #ffffff12; } }
@media (min-width: 768px) { .desktop-nav .nav-profile { display: none; } }
@media (max-width: 767px) { .site-header { gap: 8px; }.account-trigger-name, .account-chevron { display: none; }.account-trigger { padding-right: 3px; }.header-tools { gap: 5px; }.balance-pill { font-size: 12px; }.notification-popover { top: 64px; right: 10px; }.account-page { padding-top: 24px; }.account-page-heading { align-items: stretch; flex-direction: column; }.account-page-heading .button { width: 100%; }.account-summary { grid-template-columns: auto minmax(0, 1fr); }.account-summary-balance { grid-column: 1 / -1; min-width: 0; padding-top: 14px; border-top: 1px solid var(--divider); text-align: left; }.account-columns { grid-template-columns: 1fr; }.account-section { padding: 18px; }.connection-row { grid-template-columns: auto minmax(0, 1fr) auto; }.connection-row .button, .connection-row form { grid-column: 2 / -1; }.connection-status { text-align: right; }.account-actions form { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .account-menu, .notification-popover, .account-trigger, .icon-button { transition: none!important; } }

/* Compact content cards and the shared product audio player. */
.project-card { min-height: 142px; padding: 16px 18px; }.project-card-mark { width: 32px; height: 32px; margin-bottom: 12px; border-radius: 10px; }.project-card h3 { margin: 8px 0 5px; font-size: 17px; }.project-card p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.project-card:focus-visible { outline: 3px solid #3558f455; outline-offset: 3px; }.track-mini { min-height: 142px; padding: 12px; gap: 11px; align-items: flex-start; }.track-mini-mark { width: 34px; height: 34px; margin-top: 2px; border-radius: 10px; }.track-mini h3 { font-size: 15px; }.account-section:target { border-color: var(--blue); box-shadow: 0 0 0 4px #3558f41a, var(--shadow); }.account-section:focus { outline: none; }.account-menu, .notification-popover { animation: shell-pop .16s ease-out; }@keyframes shell-pop { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) { .track-mini { min-height: 0; }.project-card { min-height: 126px; } }
@media (prefers-reduced-motion: reduce) { .project-card, .player-toggle, .account-menu, .notification-popover { transition: none; animation: none; } }


/* Account command center: theme tokens, compact hierarchy and touch-safe controls. */
.header-tools .notification-trigger { width: 44px; height: 44px; min-height: 44px; border-radius: 50%; background: transparent; border-color: transparent; color: var(--secondary); }
.header-tools .notification-trigger:hover, .header-tools .notification-trigger[aria-expanded=true], .account-trigger[aria-expanded=true] { background: var(--bg-alt); border-color: var(--border); color: var(--ink); }
.notification-badge { top: 0; right: -1px; height: 17px; min-width: 17px; padding: 0 4px; background: var(--ink); color: var(--surface); border: 2px solid var(--surface); font-size: 9px; line-height: 13px; }
.notification-badge[hidden], [data-mark-all-read][hidden] { display: none; }
.account-trigger { min-height: 44px; box-shadow: 0 2px 8px #00000005; }
.account-avatar { color: #30260e; background: linear-gradient(145deg, var(--solar-soft), var(--solar)); }
.account-menu { width: 304px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 104px); overflow-y: auto; padding: 12px; box-shadow: var(--shadow), 0 18px 48px #00000018; }
.account-menu-identity { padding: 8px 6px; align-items: center; }
.account-menu-identity > div { min-width: 0; }
.account-menu-identity strong { font-size: 15px; line-height: 1.4; }
.account-menu-identity small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-menu-balance { display: flex; align-items: center; gap: 8px; margin: 4px 6px 12px; font-size: 12px; }
.account-menu-balance .icon { width: 16px; height: 16px; }
.account-menu-links { display: grid; padding-top: 6px; border-top: 1px solid var(--divider); }
.account-menu-links a, .account-menu-logout { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px; border-radius: 10px; color: var(--ink); font-size: 13px; font-weight: 550; text-align: left; text-decoration: none; transition: background var(--transition); }
.account-menu-links .icon, .account-menu-logout .icon { width: 18px; height: 18px; color: var(--secondary); }
.account-menu-links a:hover { background: var(--bg-alt); }
.theme-picker { display: block; padding: 12px 0; margin: 8px 0 4px; }
.theme-picker > span { display: block; margin: 0 8px 8px; font-size: 11px; }
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; background: var(--bg-alt); border-radius: 12px; }
.theme-picker button { min-height: 44px; padding: 6px 2px; background: transparent; font-size: 11px; border-radius: 9px; transition: background var(--transition), box-shadow var(--transition); }
.theme-picker button[aria-pressed=true] { background: var(--surface); color: var(--ink); border-color: var(--border); box-shadow: 0 2px 5px #0000000d; }
.account-menu-logout { color: var(--secondary); justify-content: flex-start; }
.account-menu-logout:hover, .account-actions .danger-text:hover { background: var(--danger-bg); color: var(--ink); }
.notification-popover { width: min(400px, calc(100vw - 24px)); max-height: calc(100dvh - 104px); overflow-y: auto; padding: 14px; box-shadow: var(--shadow), 0 18px 48px #00000018; }
.notification-popover-head { align-items: center; gap: 8px; padding: 0 4px 10px; border-bottom: 1px solid var(--divider); }
.notification-popover-head h2 { margin: 0; font-size: 16px; letter-spacing: -.02em; }
.notification-popover-head .text-button { font-size: 11px; min-height: 44px; color: var(--secondary); white-space: nowrap; }
.notification-list { gap: 4px; max-height: none; padding-top: 8px; overflow: visible; }
.notification-item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 10px; width: 100%; min-height: 44px; padding: 12px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; font-weight: 400; transition: background 180ms ease; }
.notification-item:hover { text-decoration: none; background: var(--bg-alt); }
.notification-item.is-unread { background: var(--blue-soft); }
.notification-item.is-unread::after { content: ""; position: absolute; top: 15px; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.notification-item .notification-type { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--surface); color: var(--ink); }
.notification-type .icon { width: 18px; height: 18px; }
.notification-item .notification-copy { display: grid; gap: 4px; min-width: 0; padding-right: 5px; }
.notification-copy strong { font-size: 13px; color: var(--ink); line-height: 1.4; }
.notification-copy > span { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.notification-copy time { color: var(--secondary); font-size: 10px; margin-top: 3px; }
.notification-empty { display: grid; justify-items: center; gap: 10px; padding: 28px 16px; }
.notification-empty > .icon { box-sizing: content-box; width: 24px; height: 24px; padding: 14px; border-radius: 18px; background: var(--bg-alt); }
.notification-empty strong { font-size: 15px; color: var(--ink); }
.notification-empty p { margin: 0; font-size: 12px; }
.notification-feedback { margin: 8px 4px 0; font-size: 12px; color: var(--secondary); }
.notification-feedback:empty { display: none; }
.account-page { max-width: 1000px; padding-top: 28px; }
.account-page-heading { margin-bottom: 20px; }
.account-page-heading h1 { font-size: 32px; }
.account-page-heading .lead { font-size: 14px; color: var(--secondary); margin-bottom: 0; }
.account-summary { grid-template-columns: auto minmax(0, 1fr) auto; padding: 22px; background: linear-gradient(120deg, var(--surface), var(--bg-alt)); }
.account-summary-identity { min-width: 0; }
.account-summary h2 { font-size: 22px; }
.account-summary-identity p { color: var(--secondary); font-size: 13px; overflow-wrap: anywhere; }
.account-summary-identity > small { display: block; color: var(--secondary); font-size: 12px; margin-top: 6px; }
.account-summary-balance { min-width: 160px; padding: 10px 16px; border-radius: 14px; background: var(--surface); text-align: left; color: var(--ink); }
.account-summary-balance:hover { text-decoration: none; background: var(--solar-faint); }
.account-summary-balance strong { font-size: 28px; line-height: 1.3; }
.account-summary-balance strong small { font-size: 12px; font-weight: 500; }
.account-columns { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; }
.account-side { display: grid; gap: 16px; min-width: 0; }
.account-section { padding: 22px; min-width: 0; }
.account-section h2 { font-size: 21px; }
.account-section > .muted { font-size: 13px; line-height: 1.6; }
#connections { scroll-margin-top: 100px; }
.account-section:target { border-color: var(--solar); box-shadow: 0 0 0 3px var(--solar-faint), var(--shadow); }
.connection-list { margin-top: 18px; gap: 10px; }
.connection-row { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 14px 12px; gap: 12px; background: var(--bg-alt); border-color: transparent; transition: transform var(--transition), border-color var(--transition); }
.connection-row:has(a):hover, .connection-row:has(button):hover { border-color: var(--border); transform: translateY(-1px); }
.connection-copy { min-width: 0; }
.connection-copy strong { font-size: 14px; }
.connection-copy small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.connection-status { display: inline-block; margin-top: 7px; padding: 2px 7px; border-radius: 6px; color: var(--secondary); background: var(--surface); font-size: 10px; font-weight: 550; text-align: left; }
.is-connected .connection-status { background: var(--success-bg); color: var(--ink); }
.connection-note { color: var(--secondary); font-size: 11px; }
.connection-row .button { padding: 9px 10px; border-color: var(--border); background: var(--surface); color: var(--ink); font-size: 11px; min-height: 44px; }
.connection-row .button:hover { background: var(--solar-faint); }
.connection-row .provider-mark { width: 38px; height: 38px; border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 10px; }
.connection-row .provider-telegram .icon { width: 23px; height: 23px; }
.connection-row .provider-local { background: var(--solar-faint); }
.account-email-state { display: grid; gap: 6px; margin: 16px 0; font-size: 12px; overflow-wrap: anywhere; }
.account-email-state strong { color: var(--ink); font-weight: 600; }
.account-email-form { display: grid; gap: 10px; }.account-email-form label { font-size: 12px; margin: 0; }
.account-page input#email { width: 100%; min-width: 0; min-height: 46px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-alt); color: var(--ink); }
.account-email-form .button { min-height: 44px; padding: 10px; border-color: var(--border); font-size: 12px; }
.account-email-form .field-note { font-size: 11px; color: var(--secondary); margin: 0; }
.account-shortcuts { display: grid; padding: 8px; }
.account-shortcuts a { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px; border-radius: 12px; color: var(--ink); }
.account-shortcuts a:hover { text-decoration: none; background: var(--bg-alt); }
.account-shortcuts a > span { flex: 1; }
.account-shortcuts strong, .account-shortcuts small { display: block; }
.account-shortcuts strong { font-size: 13px; }
.account-shortcuts small { font-size: 11px; color: var(--secondary); margin-top: 3px; }
.account-shortcuts .icon { width: 18px; height: 18px; color: var(--secondary); }
.account-actions { padding: 12px 4px; border-top: 1px solid var(--divider); font-size: 12px; }
.account-actions .danger-text { color: var(--secondary); border-radius: 10px; padding: 10px; font-size: 12px; }
:is(.account-menu, .notification-popover, .account-page) :is(a, button, input):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 1023px) and (min-width: 768px) { .account-trigger-name, .account-chevron { display: none; }.account-trigger { padding-right: 3px; } }
@media (max-width: 767px) {
  .account-menu, .notification-popover { position: fixed; top: 72px; right: 12px; max-height: calc(100dvh - 160px - env(safe-area-inset-bottom)); }
  .account-menu { width: min(304px, calc(100vw - 24px)); }
  .account-columns { grid-template-columns: minmax(0, 1fr); }
  .account-summary { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .account-avatar-xl { width: 52px; height: 52px; font-size: 18px; }
  .account-summary h2 { font-size: 19px; }
  .account-summary-balance { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; border: 0; padding: 12px; }
  .account-summary-balance > span:first-child { display: none; }
  .account-summary-balance strong { font-size: 24px; }
  .account-summary-balance > span { font-size: 10px; }
  .account-section { padding: 18px; }
  .connection-row .button, .connection-row form { grid-column: auto; }
  .account-actions { align-items: flex-start; flex-direction: column; gap: 2px; }
}
@media (max-width: 359px) { .connection-row { gap: 8px; padding: 12px 8px; grid-template-columns: 32px minmax(0, 1fr); }.connection-row .provider-mark { width: 32px; height: 32px; }.connection-row .button, .connection-row form, .connection-note { grid-column: 2; justify-self: start; }.notification-popover { padding: 10px; }.notification-popover-head h2 { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .account-menu, .notification-popover, .connection-row, .theme-picker button, .notification-item { animation: none; transition: none; transform: none; } }

/* Shared audio surface: layout follows component width, including Mini App cards. */
.audio-player { --played: 0%; --buffered: 0%; container-type: inline-size; margin: 14px 0 8px; padding: 14px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(125deg, var(--surface), var(--bg-alt)); box-shadow: 0 4px 16px #17181c06, inset 0 1px 0 #ffffff18; transition: border-color 180ms ease, box-shadow 180ms ease; }
.audio-player audio { width: 100%; }
.audio-player audio[hidden], .player-controls[hidden] { display: none; }
.player-controls { display: grid; grid-template-columns: 52px minmax(0, 1fr) 44px; gap: 12px; align-items: center; }
.player-toggle { position: relative; width: 52px; min-height: 52px; padding: 0; border-radius: 50%; color: #29220d; background: linear-gradient(145deg, var(--solar-soft), var(--solar)); border: 1px solid var(--solar); box-shadow: 0 5px 14px #c89c2526, inset 0 1px 0 #ffffff70; transition: transform 180ms ease, box-shadow 180ms ease; }
.player-toggle:hover { background: var(--solar); box-shadow: 0 6px 18px #c89c2540; transform: translateY(-1px); }
.player-toggle:active { transform: scale(.94); }
.player-toggle .play-icon { margin-left: 3px; }
.player-toggle .pause-icon, .player-toggle[aria-pressed=true] .play-icon { display: none; }
.player-toggle[aria-pressed=true] .pause-icon { display: block; }
.player-timeline { min-width: 0; }
.player-heading { display: flex; align-items: baseline; gap: 8px; }
.player-title { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 700; color: var(--ink); }
.player-state { flex-shrink: 0; color: var(--secondary); font-size: 10px; }
.player-times { display: flex; justify-content: space-between; color: var(--secondary); font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1; }
.player-seek, .player-volume { appearance: none; -webkit-appearance: none; display: block; width: 100%; min-width: 0; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 8px; cursor: pointer; background: transparent; }
.player-seek::-webkit-slider-runnable-track { height: 5px; border-radius: 5px; background: linear-gradient(to right, var(--solar) var(--played), transparent var(--played)), linear-gradient(to right, var(--muted) var(--buffered), var(--border) var(--buffered)); }
.player-seek::-moz-range-track { height: 5px; border-radius: 5px; background: linear-gradient(to right, var(--solar) var(--played), transparent var(--played)), linear-gradient(to right, var(--muted) var(--buffered), var(--border) var(--buffered)); }
.player-volume::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--secondary) var(--volume, 100%), var(--border) var(--volume, 100%)); }
.player-volume::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--secondary) var(--volume, 100%), var(--border) var(--volume, 100%)); }
.player-seek::-webkit-slider-thumb, .player-volume::-webkit-slider-thumb { appearance: none; width: 13px; height: 13px; margin-top: -4px; border-radius: 50%; border: 2px solid var(--surface); background: var(--ink); box-shadow: 0 1px 5px #0003; transition: transform 160ms ease; }
.player-seek::-moz-range-thumb, .player-volume::-moz-range-thumb { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--surface); background: var(--ink); box-shadow: 0 1px 5px #0003; transition: transform 160ms ease; }
.player-seek:hover::-webkit-slider-thumb { transform: scale(1.2); }
.player-seek:hover::-moz-range-thumb { transform: scale(1.2); }
.player-seek:disabled { background: transparent; opacity: .5; cursor: default; }
.player-mute { width: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: transparent; color: var(--secondary); }
.player-mute:hover { background: var(--surface); color: var(--ink); }
.player-mute .icon { width: 20px; height: 20px; }
.volume-off, .player-mute[aria-pressed=true] .volume-waves { display: none; }
.player-mute[aria-pressed=true] .volume-off { display: block; }
.player-volume { display: none; }
.player-error { margin: 10px 0 0; color: var(--danger); font-size: 12px; }
.audio-player.is-playing { border-color: var(--solar); box-shadow: 0 4px 20px #c89c2512; }
.audio-player.is-loading .player-toggle::after { content: ""; position: absolute; inset: -5px; border: 2px solid transparent; border-top-color: var(--solar); border-radius: 50%; animation: player-spin 1s linear infinite; }
.audio-player :is(button, input):focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.track-mini-copy { flex: 1; }
.library-main .audio-player { margin-bottom: 0; }
@container (min-width: 420px) { .player-controls { grid-template-columns: 52px minmax(0, 1fr) 44px 64px; gap: 10px; }.player-volume { display: block; } }
@container (max-width: 260px) { .player-controls { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; }.player-toggle { width: 44px; min-height: 44px; }.player-state { display: none; } }
@keyframes player-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .audio-player, .audio-player *, .audio-player *::after { animation: none !important; transition: none !important; } }


/* Theme-correct creation states. No theme-specific component selectors needed. */
html .wizard-shell :is(.wizard-card, .lyrics-card, .advanced) { background: var(--surface-card); border-color: var(--border); }
.wizard-shell :is(h1, h2, h3, label, legend) { color: var(--ink); }
.wizard-shell :is(.muted, .lead, .field-note, .helptext, .required-mark, .balance-caption) { color: var(--secondary); }
.wizard-shell .source-choice { background: linear-gradient(145deg, var(--surface-elevated), var(--surface-card)); border-color: var(--control-border); box-shadow: inset 0 1px 0 var(--card-highlight); }
.wizard-shell .source-choice > span:last-child { min-width: 0; }
.wizard-shell .source-choice strong { color: var(--ink); line-height: 1.45; }
.wizard-shell .source-choice small { color: var(--secondary); line-height: 1.5; }
.wizard-shell .source-choice-icon { background: var(--blue-soft); color: var(--blue); }
.wizard-shell .source-choice:has(input:checked) { background: var(--selected-surface); border-color: var(--active-border); box-shadow: inset 0 0 0 1px var(--active-border), 0 5px 18px #0000000a; }
.wizard-shell .source-choice:has(input:checked) strong { color: var(--selected-text); }
.wizard-shell .source-choice:has(input:checked) small { color: var(--selected-secondary); }
.wizard-shell .source-choice:has(input:checked) .source-choice-icon { background: var(--surface-elevated); color: var(--accent-text); }
.wizard-shell .source-choice:has(input:checked)::after { color: var(--selected-text); }
.wizard-shell .source-choice:hover { background: var(--hover-surface); border-color: var(--active-border); }
.wizard-shell .source-choice:has(input:checked):hover { background: var(--selected-surface); }
.wizard-shell .source-choice:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
html .wizard-shell .form-stack .source-choice input:focus-visible { outline: none; box-shadow: none; }
.wizard-shell input[type=radio] { accent-color: var(--active-border); }
html .wizard-shell .form-stack :is(textarea, select, input:not([type=radio]):not([type=checkbox]):not([type=hidden])) { background: var(--input-bg); color: var(--input-text); border: 1px solid var(--control-border); caret-color: var(--input-text); }
html .wizard-shell .form-stack :is(textarea, select, input):hover { border-color: var(--active-border); }
html .wizard-shell .form-stack :is(textarea, select, input):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--focus-ring); box-shadow: 0 0 0 4px var(--focus-halo); }
.wizard-shell :is(textarea, input)::placeholder { color: var(--input-placeholder); opacity: 1; }
.wizard-shell .choice-field label { color: var(--ink); border-color: var(--control-border); }
.wizard-shell .choice-field label:has(input:checked) { color: var(--selected-text); border-color: var(--active-border); background-color: var(--selected-surface); }
.wizard-shell .settings-card .choice-field label:has(input:checked) { background: var(--selected-surface); }
.wizard-shell .choice-field label:focus-within { outline-color: var(--focus-ring); outline-offset: 3px; }
.wizard-shell .stepper li[aria-current] > span { color: var(--button-primary-text); }
.wizard-shell :is(.step1-actions > button, .sticky-cta > button, .review-cta > button, .button-primary) { background: var(--button-primary); color: var(--button-primary-text); }
.wizard-shell :is(.step1-actions > button, .sticky-cta > button, .review-cta > button, .button-primary):hover { background: var(--button-primary-hover); }
.wizard-shell :is(.button-secondary, .voice-button, .toolbar-button) { background: var(--button-secondary); color: var(--button-secondary-text); border-color: var(--control-border); }
.wizard-shell :is(.button-secondary, .voice-button, .toolbar-button):hover { background: var(--hover-surface); border-color: var(--active-border); }
.wizard-shell :is(button, .button):disabled { background: var(--bg-alt); color: var(--secondary); border-color: var(--border); }
.wizard-shell .creation-cost { background: var(--accent-surface); color: var(--accent-text); }
.wizard-shell .creation-cost :is(strong, small, span) { color: inherit; }
.wizard-shell :is(.errorlist, .alert.error, .field-errors) { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.wizard-shell .form-stack [aria-invalid=true] { background: var(--danger-bg)!important; color: var(--ink); }
.wizard-shell .alert:not(.error) { background: var(--blue-soft); color: var(--ink); border-color: var(--border); }
@media (prefers-reduced-motion: reduce) { .wizard-shell .source-choice, .wizard-shell .source-choice input { transition: none; transform: none; } }
.max-qr { display:grid; place-items:center; margin:1.25rem auto; padding:1rem; width:min(100%, 280px); aspect-ratio:1; background:#fff; border-radius:1rem; border:1px solid var(--border); }
.max-qr svg { display:block; width:100%; height:100%; }
.account-merge-page { padding-bottom: 48px; }
.account-merge-summary { margin: 22px 0 14px; padding: 18px; }
.account-merge-facts { display: grid; gap: 8px; margin: 0; padding-left: 20px; color: var(--ink); }
.account-merge-facts li::marker { color: var(--blue); }

/* Passwordless email flow: a calm, focused continuation of the auth card. */
.email-flow-shell { display: flex; width: 100%; min-width: 0; min-height: min(720px, calc(100vh - 180px)); align-items: flex-start; justify-content: center; padding-block: clamp(28px, 7vw, 72px); }
.flow-card { width: min(100%, 560px); max-width: 100%; min-width: 0; padding: clamp(24px, 5vw, 44px); }
.flow-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 20px; border: 1px solid var(--border); border-radius: 15px; background: var(--blue-soft); color: var(--blue); font-size: 22px; font-weight: 800; }
.flow-icon-success { background: var(--success-bg); color: var(--success); }
.flow-icon-provider { background: var(--solar-faint); color: var(--accent-text); font-size: 18px; }
.flow-heading { text-align: center; }.flow-heading .eyebrow { margin-bottom: 10px; }.flow-heading h1 { margin-bottom: 12px; font-size: clamp(28px, 5vw, 40px); }.flow-heading .lead { max-width: 440px; margin: 0 auto 26px; font-size: 15px; }
.flow-steps { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.flow-steps li { display: grid; min-width: 0; justify-items: center; gap: 6px; color: var(--secondary); font-size: 11px; }.flow-steps li > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--control-border); border-radius: 50%; background: var(--surface-elevated); color: var(--secondary); font-size: 12px; font-weight: 750; }.flow-steps li.is-current, .flow-steps li.is-complete { color: var(--ink); }.flow-steps li.is-current > span { border-color: var(--solar); background: var(--solar); color: var(--selected-text); box-shadow: 0 0 0 4px var(--solar-faint); }.flow-steps li.is-complete > span { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.flow-form { display: grid; gap: 0; }.flow-field { min-width: 0; margin-bottom: 18px; }.flow-field label { display: block; margin-bottom: 8px; color: var(--ink); font-size: 14px; font-weight: 700; }.flow-field label span { color: var(--secondary); font-weight: 500; }.flow-field input { display: block; width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--input-bg); color: var(--input-text); font-size: 16px; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); }.flow-field input::placeholder { color: var(--input-placeholder); opacity: 1; }.flow-field input:hover { border-color: var(--active-border); }.flow-field input:focus-visible { border-color: var(--focus-ring); outline: 0; box-shadow: 0 0 0 4px var(--focus-halo); }.flow-help { margin: 7px 0 0; color: var(--secondary); font-size: 12px; line-height: 1.45; }.flow-submit { min-height: 52px; }.otp-input { min-height: 66px!important; padding-inline: 16px!important; border-radius: 16px!important; font-size: clamp(28px, 8vw, 38px)!important; font-weight: 750; letter-spacing: .28em; line-height: 1; text-align: center; }.otp-input::placeholder { color: var(--secondary)!important; letter-spacing: .28em; opacity: .55!important; }
.flow-notice { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 22px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--bg-alt); }.flow-notice-neutral { background: var(--surface-elevated); }.flow-notice-mark { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 800; }.flow-notice p { margin: 1px 0 0; color: var(--secondary); font-size: 13px; line-height: 1.45; }.flow-error { margin: 0 0 18px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--border)); border-radius: 12px; background: var(--danger-bg); color: var(--danger); font-size: 13px; line-height: 1.45; }.flow-actions { display: grid; gap: 12px; }.flow-resend { display: flex; justify-content: center; margin-top: 16px; }.flow-text-action { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--blue); font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }.flow-text-action:hover { background: var(--blue-soft); text-decoration: none; }.flow-secondary { margin: 20px 0 0; color: var(--secondary); font-size: 13px; text-align: center; }.flow-secondary a { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }.flow-secondary a:hover { color: var(--ink); }
.flow-choice-grid { display: grid; gap: 12px; }.flow-choice { display: grid; gap: 13px; padding: 17px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-elevated); }.flow-choice-primary { border-color: var(--active-border); background: linear-gradient(145deg, var(--surface-elevated), var(--accent-surface)); }.flow-choice strong { color: var(--ink); font-size: 15px; }.flow-choice > span { margin-top: -7px; color: var(--secondary); font-size: 13px; line-height: 1.45; }.flow-choice .flow-field { margin-bottom: 0; }.flow-choice-secondary { align-content: start; }.flow-choice-secondary .button { margin-top: 2px; }
@media (max-width: 389px) { .email-flow-shell { padding-inline: 0; }.flow-card { padding: 22px 16px; border-radius: 20px; }.flow-heading .lead { font-size: 14px; }.flow-steps { margin-bottom: 24px; }.flow-steps li { font-size: 10px; }.otp-input { letter-spacing: .2em; }.otp-input::placeholder { letter-spacing: .2em; } }
@media (max-width: 767px) { .email-flow-shell { overflow-x: hidden; }.flow-card { width: calc(100vw - 40px); } }

/* Public continuation auth: the same methods are reusable on /login/ and in the modal. */
.web-auth-methods { display: grid; gap: 10px; }.web-auth-methods .social-button { min-height: 52px; justify-content: center; }.auth-method-icon { display: inline-grid; place-items: center; width: 20px; font-size: 17px; }.auth-section-label { margin: 0 0 10px; color: var(--secondary); font-size: 13px; text-align: center; }.auth-messenger { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--divider); }.auth-messenger-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.auth-messenger-actions .button { min-height: 48px; padding-inline: 12px; font-size: 13px; }.auth-messenger-actions .button span { font-size: 17px; }.auth-modal-fallback { margin: 20px 0 0; color: var(--secondary); font-size: 13px; text-align: center; }.auth-modal-fallback a { color: var(--blue); font-weight: 700; }.auth-page-shell { min-height: min(700px, calc(100vh - 170px)); }.auth-page-shell .auth-card { width: min(100%, 560px); }.auth-page-shell .auth-intro .lead { margin-bottom: 26px; }.auth-modal-open { overflow: hidden; }.auth-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; }.auth-modal[hidden] { display: none; }.auth-modal-backdrop { position: absolute; inset: 0; background: #10131acc; backdrop-filter: blur(8px); }.auth-modal-dialog { position: relative; z-index: 1; width: min(100%, 500px); max-height: min(720px, calc(100dvh - 40px)); overflow: auto; padding: clamp(24px, 5vw, 38px); border: 1px solid var(--border); border-radius: 24px; background: var(--surface); box-shadow: 0 28px 90px #00000042; }.auth-modal-dialog h2 { margin: 8px 0 10px; font-size: clamp(25px, 5vw, 32px); }.auth-modal-lead { margin-bottom: 24px; color: var(--secondary); font-size: 15px; line-height: 1.55; }.auth-modal-close { position: absolute; top: 12px; right: 12px; width: 38px; min-height: 38px; padding: 0; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-elevated); color: var(--secondary); font-size: 23px; line-height: 1; }.auth-modal-close:hover { background: var(--bg-alt); color: var(--ink); }.auth-modal-dialog .auth-messenger { margin-top: 22px; }.auth-modal-dialog .auth-messenger-actions { grid-template-columns: 1fr; }
@media (max-width: 599px) { .auth-modal { align-items: end; padding: 0; }.auth-modal-dialog { width: 100%; max-height: calc(100dvh - 16px); border-radius: 24px 24px 0 0; padding: 28px 20px calc(24px + env(safe-area-inset-bottom)); }.auth-page-shell { padding-block: 22px 44px; }.auth-page-shell .auth-card { width: 100%; }.auth-messenger-actions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .auth-modal-backdrop, .auth-modal-dialog { transition: none; } }