:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #667085;
  --paper: #f7f8ff;
  --surface: #ffffff;
  --line: #dde2f0;
  --field-surface: #eef1fa;
  --field-surface-strong: #e8ecf8;
  --field-border: #bec8e1;
  --field-focus: #fbfbff;
  --accent: #6c5ce7;
  --accent-dark: #5145cd;
  --deep: #274690;
  --coral: #ff6b6b;
  --cyan: #2ab7ca;
  --soft-green: #eaf8f3;
  --soft-amber: #fff4d6;
  --danger: #d63c4c;
  --shadow: 0 28px 75px rgba(54, 57, 116, .14);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 106.25%; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0, #f7f8ff 32rem, #f3f5fb 100%);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .65; }
[hidden] { display: none !important; }

.site-header, main, footer { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.site-header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: .9rem; font-weight: 850; letter-spacing: .09em; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: white; background: #11172f; box-shadow: 0 8px 20px rgba(17, 23, 47, .18); font-size: 1.1rem; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.test-badge, .status-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border: 1px solid #ded8ff; border-radius: 999px; color: var(--accent-dark); background: #f1efff; font-size: .72rem; font-weight: 800; }
.status-chip.success { color: #315f4d; background: var(--soft-green); }
.text-button { border: 0; padding: 8px; color: var(--muted); background: transparent; font-size: .9rem; font-weight: 700; }
.text-button:hover { color: var(--accent-dark); }

main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: start; min-height: calc(100vh - 162px); padding: 22px 0 72px; }
.intro { width: 100%; max-width: none; margin-inline: auto; text-align: left; animation: fade-in .35s ease; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr); gap: clamp(36px, 5vw, 70px); align-items: center; min-height: 500px; }
.hero-copy { padding: 34px 0; }
.eyebrow, .step-label { margin: 0 0 18px; color: var(--accent); font-size: .74rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.hero-copy .eyebrow { width: fit-content; padding: 8px 12px; border-radius: 999px; color: #5948dc; background: #eeeaff; letter-spacing: .1em; }
h1 { max-width: 11ch; margin: 0; font-family: "Segoe UI Variable Display", "Aptos Display", Inter, ui-sans-serif, system-ui, sans-serif; font-size: clamp(4.2rem, 6.6vw, 6.2rem); font-weight: 780; line-height: .9; letter-spacing: -.075em; text-wrap: balance; }
h1 span { color: transparent; background: linear-gradient(100deg, #6657ee 8%, #8357e8 48%, #ff6b72 96%); background-clip: text; -webkit-background-clip: text; }
.intro-copy { max-width: 39rem; margin: 26px 0 24px; color: var(--muted); font-size: 1.15rem; line-height: 1.65; }
.hero-visual { position: relative; min-height: 480px; overflow: hidden; border-radius: 34px; background: #0e1532; box-shadow: 0 32px 70px rgba(19, 27, 63, .26); isolation: isolate; }
.hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(5, 10, 31, .55)); pointer-events: none; }
.hero-visual img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center; }
.offer-card { position: absolute; z-index: 1; inset: auto 18px 18px; overflow: hidden; margin: 0; border: 1px solid rgba(255,255,255,.3); border-radius: 18px; color: white; background: rgba(10,16,43,.86); box-shadow: 0 16px 35px rgba(4,8,29,.32); backdrop-filter: blur(18px); text-align: left; }
.offer-price-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 13px 17px; }
.offer-price-row + .offer-price-row { border-top: 1px solid rgba(255,255,255,.13); }
.offer-price-row > div { display: grid; gap: 3px; min-width: 0; }
.offer-price-row span { color: #fff; font-size: .82rem; font-weight: 820; }
.offer-price-row small { color: rgba(255,255,255,.66); font-size: .72rem; line-height: 1.35; }
.offer-price-row strong { color: #fff; font-size: 1rem; white-space: nowrap; }
.offer-price-upgrade strong { font-size: .88rem; }
.offer-total { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 17px; color: rgba(255,255,255,.68); background: rgba(255,255,255,.055); font-size: .72rem; font-weight: 720; }
.offer-total strong { color: rgba(255,255,255,.86); font-size: .8rem; white-space: nowrap; }
.trust-row { width: min(100%, 620px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; color: #344054; font-size: .82rem; font-weight: 760; }
.trust-row span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.trust-row span::before { content: "✓"; flex: 0 0 auto; color: #169b79; }

.creator-card { position: relative; width: 100%; max-width: 1040px; min-height: 0; overflow: hidden; margin-inline: auto; padding: 0; border: 1px solid #e1e5f0; border-radius: 28px; background: #fff; box-shadow: 0 28px 70px rgba(17, 23, 47, .15); }
.creator-card::before { display: none; }
.flow-header { position: relative; overflow: hidden; padding: 34px clamp(28px, 4vw, 46px) 30px; color: white; background: #11172f; }
.flow-header::before { content: ""; position: absolute; width: 300px; height: 300px; top: -210px; right: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 102, 255, .75), rgba(255, 106, 116, .25) 42%, transparent 70%); pointer-events: none; }
.creator-card > form, .creator-card > .workspace, .creator-card > .result { padding: clamp(30px, 4vw, 46px); }
.card-heading, .workspace-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.card-heading h2, .workspace h2, .result h2 { margin: 0; font-family: "Segoe UI Variable Display", "Aptos Display", Inter, ui-sans-serif, system-ui, sans-serif; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 720; letter-spacing: -.045em; outline: none; }
.card-heading h2 { color: white; }
.step-label { margin-bottom: 8px; color: #a99cff; font-size: .7rem; }
.time-note { position: relative; color: #aeb7d8; font-size: .8rem; white-space: nowrap; }
.progress { position: relative; height: 6px; margin: 26px 0 0; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.13); }
.card-heading[hidden] + .progress { margin-top: 0; }
.progress span { display: block; width: 16.666%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8f7cff, #ff747a); box-shadow: 0 0 14px rgba(255, 116, 122, .45); transition: width .25s ease; }
.step, .workspace, .result { animation: fade-in .25s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.field-grid { display: grid; gap: 22px; }
.field-stack { display: grid; gap: 18px; align-content: start; }
.field-stack .field { margin-bottom: 0; }
.identity-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; margin-bottom: 28px; }
.identity-grid > :nth-child(1), .identity-grid > :nth-child(2) { grid-column: span 3; }
.identity-grid > :nth-child(3), .identity-grid > :nth-child(4), .identity-grid > :nth-child(5) { grid-column: span 2; }
.identity-grid > .field { margin-bottom: 0; }
.form-block { position: relative; overflow: hidden; margin-bottom: 20px; padding: 0; border: 1px solid #d2d9eb; border-radius: 20px; background: linear-gradient(145deg, #fbfcff 0%, #f1f3fb 100%); box-shadow: 0 12px 30px rgba(17, 23, 47, .065); }
.form-block::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--accent), var(--coral), var(--cyan)); }
.traits-block::before, .memory-block::before { background: linear-gradient(90deg, var(--accent), var(--coral), var(--cyan)); }
.form-block-title { display: flex; align-items: center; gap: 11px; margin: 0; padding: 17px 21px 15px; color: #fff; background: linear-gradient(135deg, #121831, #1a2344); border-bottom: 1px solid rgba(255,255,255,.08); }
.form-block-title span { min-width: 32px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #fff; background: rgba(108,92,231,.42); font-size: .66rem; font-weight: 850; letter-spacing: .05em; }
.traits-block .form-block-title span { color: #fff; background: rgba(255,101,112,.38); }
.memory-block .form-block-title span { color: #fff; background: rgba(50,194,207,.34); }
.form-block-title strong { color: #fff; font-size: .96rem; letter-spacing: -.01em; }
.form-block > .identity-grid, .form-block > .field { padding: 22px; }
.form-block .identity-grid { margin-bottom: 0; }
.form-block > .field:last-child { margin-bottom: 0; }
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { margin-bottom: 26px; }
label, legend { display: block; margin-bottom: 9px; color: #344054; font-size: .9rem; font-weight: 760; }
fieldset { min-width: 0; padding: 0; border: 0; }
.section-help, .workspace-copy { margin: -2px 0 16px; color: var(--muted); font-size: .86rem; line-height: 1.55; }
input[type="text"], input[type="number"], input[type="email"], input[type="password"], select, textarea { width: 100%; min-height: 56px; border: 1px solid var(--field-border); border-radius: 15px; padding: 14px 16px; color: var(--ink); background: linear-gradient(135deg, var(--field-surface-strong), var(--field-surface)); box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 1px 1px rgba(19,26,54,.025); outline: none; transition: border-color .15s, box-shadow .15s, background .15s, transform .15s; }
input::placeholder, textarea::placeholder { color: #71809d; opacity: 1; }
textarea { min-height: 124px; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); background: var(--field-focus); box-shadow: 0 0 0 4px rgba(108, 92, 231, .16), inset 0 1px 0 rgba(255,255,255,.94); }
.field-meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 7px; color: var(--muted); font-size: .76rem; }
.trait-question { margin: 0 0 12px; color: #344054; font-size: .9rem; font-weight: 760; }
.trait-suggestions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.trait-suggestions button { position: relative; min-width: 0; min-height: 42px; padding: 8px 10px; border: 1px solid #cad3e8; border-radius: 12px; color: #3f4761; background: linear-gradient(135deg, #f3f5fb, #edf0f9); font-size: .75rem; font-weight: 720; line-height: 1.2; text-align: center; transition: border-color .15s, color .15s, background .15s, box-shadow .15s; }
.trait-suggestions button:hover { border-color: #aaa0f8; background: #f7f6ff; }
.trait-suggestions button[aria-pressed="true"] { border-color: var(--accent); color: #4939ca; background: #eeebff; box-shadow: inset 0 0 0 1px var(--accent); }
.trait-suggestions button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.trait-suggestions button:focus-visible { outline: 3px solid rgba(108, 92, 231, .2); outline-offset: 2px; }
.own-trait-label { margin-top: 18px; }
.trait-help { display: block; margin-top: 7px; }
.field-error { min-height: 0; margin: 6px 0 0; color: var(--danger); font-size: .78rem; font-weight: 700; }
.field-error:empty { display: none; }
.optional { color: var(--muted); font-size: .75rem; font-weight: 500; }

.choice-grid, .text-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice, .source-choice { margin: 0; }
.choice { position: relative; }
.choice input { position: absolute; z-index: 1; top: 18px; left: 14px; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.source-choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span, .source-card { min-height: 72px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 12px 14px; border: 1px solid #cbd4e7; border-radius: 12px; background: linear-gradient(135deg, #f5f6fc, #eef1f9); box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 5px 14px rgba(28, 64, 75, .045); transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.choice span { padding-left: 44px; cursor: pointer; }
.source-card { min-height: 124px; position: relative; justify-content: flex-start; gap: 8px; padding: 18px; }
.choice span:hover, .source-card:hover { transform: translateY(-2px); border-color: #b8cbd1; box-shadow: 0 9px 18px rgba(28, 64, 75, .09); }
.choice input:focus-visible + span, .source-choice input:focus-visible + span { outline: 3px solid rgba(108, 92, 231, .22); }
.choice input:checked + span, .source-choice input:checked + span { border-color: var(--accent); background: #f4f2ff; color: var(--accent-dark); }
.choice:nth-child(1) span { border-left: 4px solid var(--coral); }
.choice:nth-child(2) span { border-left: 4px solid #f0a126; }
.choice:nth-child(3) span { border-left: 4px solid var(--accent); }
.choice:nth-child(4) span { border-left: 4px solid var(--cyan); }
.choice input:checked + span { border-color: var(--accent); background: #f4f2ff; box-shadow: 0 0 0 3px rgba(108, 92, 231, .12), 0 10px 22px rgba(54, 57, 116, .08); }
.choice small, .source-card small { color: var(--muted); font-size: .76rem; font-weight: 500; line-height: 1.45; }
.source-card em { align-self: flex-start; margin-top: auto; padding: 3px 7px; border-radius: 999px; color: var(--accent-dark); background: #e9e5ff; font-size: .66rem; font-style: normal; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.own-lyrics { padding: 16px; border: 1px solid #cfdee2; border-radius: 14px; background: #f4f9fa; }
.conditional-field { margin-top: -10px; padding: 16px; border: 1px dashed #b9cbd1; border-radius: 14px; background: #f6fafb; }
.mood-panel, .message-panel, .selection-panel { border: 1px solid transparent; border-radius: 16px; }
.mood-panel { padding: 16px; border-color: #cfeef2; border-left: 5px solid var(--cyan); background: #f4fcfd; }
.message-panel { padding: 16px; border-color: #ffd9d9; border-left: 5px solid var(--coral); background: #fff8f8; }
.message-context-grid { margin: 0; }
.message-context-grid .field { margin: 0; }
.selection-panel { margin-bottom: 22px; padding: 18px; border-color: #ded8ff; border-left: 5px solid var(--accent); background: #f8f7ff; }
.selection-panel .field { margin-bottom: 0; }
.mood-panel legend, .message-panel > label, .selection-panel label { color: var(--deep); }
.tone-step { display: grid; gap: 16px; }
/* Step two is a decision screen: distinct colour-coded groups make it much
   easier to scan on a phone than one long, grey list of selects. */
.tone-step .mood-panel, .tone-step .message-panel, .tone-step .selection-panel { margin: 0; padding: 19px; border-radius: 18px; }
.tone-step .mood-panel { border: 1px solid #d9d1ff; border-top: 4px solid #7866ed; background: linear-gradient(135deg, #f8f6ff, #f0edff); }
.tone-step .message-panel { border: 1px solid #ffd9b6; border-top: 4px solid #f49a54; background: linear-gradient(135deg, #fffaf4, #fff3e5); }
.tone-step .selection-panel { margin-bottom: 0; border: 1px solid #bfe8e8; border-top: 4px solid #22aaa7; background: linear-gradient(135deg, #f5ffff, #edfafa); }
.tone-step .mood-panel legend, .tone-step .message-panel > label, .tone-step .selection-panel label { color: #273b78; font-size: .96rem; font-weight: 850; letter-spacing: -.01em; }
.tone-step .choice-grid { gap: 11px; }
.tone-step .choice span { min-height: 82px; border: 1px solid rgba(109, 96, 189, .2); border-radius: 14px; background: rgba(255,255,255,.86); box-shadow: 0 5px 14px rgba(66, 55, 129, .055); }
.tone-step .choice:nth-child(n) span { border-left: 1px solid rgba(109, 96, 189, .2); }
.tone-step .choice input:checked + span { border-color: #735de8; color: #4736bc; background: linear-gradient(135deg, #fff, #eeeaff); box-shadow: 0 0 0 3px rgba(108, 92, 231, .14), 0 9px 18px rgba(82, 62, 177, .11); }
.tone-step .choice span:hover { transform: translateY(-1px); border-color: #a697f3; box-shadow: 0 8px 16px rgba(82, 62, 177, .1); }
.tone-step .message-context-grid, .tone-step .selection-panel { gap: 16px; }
.tone-step .selection-panel .field { margin-bottom: 0; }
.tone-step .conditional-field { grid-column: 1 / -1; margin: 0; }
.tone-step select { border-color: rgba(53, 71, 124, .18); background-color: rgba(255,255,255,.92); box-shadow: 0 2px 0 rgba(31, 48, 99, .025); }
.tone-step select:focus { border-color: #6854df; box-shadow: 0 0 0 4px rgba(104, 84, 223, .14); }
.policy-box { padding: 16px 18px; border-radius: 14px; color: #36524a; background: var(--soft-green); }
.policy-box strong { font-size: .88rem; }
.policy-box ul { margin: 8px 0 0; padding-left: 19px; color: #536862; font-size: .78rem; line-height: 1.6; }

.form-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.form-actions.align-right { justify-content: flex-end; }
.primary-button, .secondary-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; padding: 0 20px; font-weight: 800; }
.primary-button { border: 1px solid var(--accent); color: white; background: linear-gradient(135deg, var(--accent), #8b5cf6); box-shadow: 0 10px 24px rgba(108, 92, 231, .26); }
.primary-button:hover:not(:disabled) { border-color: var(--accent-dark); background: linear-gradient(135deg, var(--accent-dark), #7447df); transform: translateY(-1px); }
.secondary-button { border: 1px solid #cbd9de; color: var(--deep); background: white; }
.secondary-button:hover:not(:disabled) { border-color: #9fb9c1; background: #f1f7f8; }

.review { display: block; }
.order-summary-card { overflow: hidden; border: 1px solid #dfe3ef; border-radius: 22px; background: #fff; box-shadow: 0 14px 36px rgba(17,23,47,.075); }
.summary-card-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 24px; color: #fff; background: radial-gradient(circle at 88% 0, rgba(255,101,112,.18), transparent 33%), #11172f; }
.summary-card-head::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--accent), var(--coral), var(--cyan)); }
.summary-card-head span { display: block; color: #a99cff; font-size: .67rem; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.summary-card-head h3 { margin: 4px 0 0; color: #fff; font-size: 1.15rem; letter-spacing: -.02em; }
.summary-card-head small { color: #b8c0dc; font-size: .74rem; white-space: nowrap; }
.recipient-summary { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 22px 24px; border-bottom: 1px solid #e8eaf1; }
.recipient-avatar { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(145deg, var(--accent), #8b5cf6); box-shadow: 0 9px 20px rgba(108,92,231,.22); font-size: 1.25rem; font-weight: 850; }
.recipient-copy > span, .recipient-pronunciation span, .summary-section > span { display: block; color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .075em; }
.recipient-copy strong { display: block; margin-top: 2px; color: #171f38; font-size: 1.42rem; line-height: 1.2; }
.recipient-copy p { margin: 5px 0 0; color: #69728a; font-size: .8rem; }
.recipient-pronunciation { max-width: 230px; padding-left: 18px; border-left: 1px solid #e0e4ec; }
.recipient-pronunciation strong { display: block; margin-top: 4px; color: #303950; font-size: .8rem; line-height: 1.4; }
.summary-highlight-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; padding: 16px 24px; border-bottom: 1px solid #e8eaf1; background: #fbfcff; }
.summary-section { padding: 20px 24px; border-bottom: 1px solid #e8eaf1; }
.summary-section strong { display: block; margin-top: 6px; color: #202945; font-size: 1rem; line-height: 1.4; }
.summary-highlight-grid .summary-section { min-width: 0; padding: 16px; border: 1px solid #e2e5f0; border-radius: 15px; }
.summary-direction { background: linear-gradient(135deg, #eff6ff, #f9fbff); border-top: 3px solid #4e8edb !important; }
.summary-direction p { margin: 5px 0 0; color: #69728a; font-size: .78rem; line-height: 1.45; }
.summary-message { background: linear-gradient(135deg, #f8f2ff, #fffbff); border-top: 3px solid #8761dc !important; }
.summary-message q { display: block; margin-top: 8px; color: #30245a; font-size: 1rem; font-weight: 720; line-height: 1.5; }
.summary-message q::before, .summary-message q::after { color: var(--accent); }
.summary-memory-text { margin: 8px 0 0; color: #354057; font-size: .9rem; font-weight: 650; line-height: 1.55; }
.summary-foundation { position: relative; padding-left: 78px; background: #fff; }
.summary-foundation::before { content: "✦"; position: absolute; top: 22px; left: 24px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #2b766c; background: #dff6f0; font-size: 1rem; }
.summary-foundation small { display: block; margin-top: 6px; color: #758096; font-size: .76rem; line-height: 1.45; }
.summary-full-brief { background: linear-gradient(145deg, #f7f7ff, #fff); }
.summary-full-brief > span { color: #5645c6; }
.summary-detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }
.summary-detail { min-width: 0; padding: 13px; border: 1px solid #e1e3ef; border-radius: 12px; background: #fff; }
.summary-detail:first-child { color: #33217e; border-color: #d3c9ff; background: #f1eeff; }
.summary-detail span { display: block; color: #66718b; font-size: .68rem; font-weight: 800; letter-spacing: .03em; }
.summary-detail p { margin: 5px 0 0; color: #303a52; font-size: .84rem; font-weight: 620; line-height: 1.48; white-space: pre-line; }
.summary-meta-line { padding: 14px 24px 16px; color: #758096; background: #fbfcfd; font-size: .73rem; font-weight: 650; }
.checkout-panel { overflow: hidden; margin-top: 18px; border: 1px solid #dfe3ef; border-radius: 18px; background: #fff; }
.checkout-panel-title { display: flex; align-items: center; gap: 10px; padding: 15px 18px; color: #fff; background: linear-gradient(135deg, #121831, #1a2344); }
.checkout-panel-title span { min-width: 32px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(108,92,231,.42); font-size: .66rem; font-weight: 850; }
.checkout-panel-title strong { font-size: .92rem; }
.checkout-grid { display: grid; grid-template-columns: .85fr 1.35fr; gap: 16px; padding: 18px; }
.price-summary { margin: 0; padding: 18px; border: 1px solid #eadfff; border-radius: 14px; background: linear-gradient(145deg, #f8f6ff, #fff); }
.checkout-kicker { margin: 0 0 12px !important; color: var(--accent-dark) !important; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.price-summary > div, .upgrade-card > div { display: flex; justify-content: space-between; gap: 18px; }
.price-summary strong, .upgrade-card strong { white-space: nowrap; }
.price-summary p, .upgrade-card p { margin: 7px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.delivery-field { margin: 0; padding: 17px 18px; border: 1px solid #dce4ec; border-radius: 14px; background: #f8fafc; }
.delivery-field-title { display: block; color: #202945; font-size: .9rem; }
.delivery-contact-grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 12px; margin-top: 13px; }
.delivery-contact-grid .field { margin: 0; }
.delivery-contact-grid label { font-size: .78rem; }
.delivery-field .field-meta { margin-bottom: 0; line-height: 1.45; }
.approval-list { padding: 0 18px 18px; }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: 10px; margin-top: 11px; padding: 11px 13px; border: 1px solid #e5e8f0; border-radius: 12px; color: var(--muted); background: #fafbfc; font-size: .79rem; font-weight: 500; line-height: 1.45; }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.test-consent { color: #6d4a12; background: #fffbf3; border-color: #f0dfbd; }
.privacy-note { margin: 12px 2px 0; color: #668775; font-size: .76rem; font-weight: 700; }

.workspace-copy { margin-top: 16px; }
.creator-card > .lyrics-approval { padding: 0; }
.lyrics-approval > .workspace-head { align-items: center; padding: 30px clamp(28px, 4vw, 46px); color: #fff; background: radial-gradient(circle at 91% 0, rgba(255,101,112,.18), transparent 28%), #11172f; }
.lyrics-approval > .workspace-head h2 { color: #fff; }
.lyrics-approval > .workspace-head .step-label { color: #a99cff; }
.lyrics-approval > .workspace-head .status-chip { border-color: rgba(119,225,179,.35); color: #bff3d9; background: rgba(28,114,78,.25); }
.lyrics-approval-body { padding: 24px clamp(28px, 4vw, 46px) 36px; }
.lyrics-approval-body > .workspace-copy { max-width: 720px; margin: 0 0 20px; line-height: 1.55; }
.lyrics-review-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr); gap: 16px; align-items: start; }
.lyric-preview-card { overflow: hidden; border: 1px solid #dfe3ef; border-radius: 18px; background: #fff; box-shadow: 0 10px 26px rgba(17,23,47,.055); }
.lyric-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 20px; border-bottom: 1px solid #e6e9f1; background: #f8f9fc; }
.lyric-preview-head span, .panel-kicker { color: var(--accent); font-size: .67rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.lyric-preview-head h3 { margin: 3px 0 0; color: #202945; font-size: 1rem; }
.lyric-preview-head small { color: var(--muted); font-size: .74rem; white-space: nowrap; }
.lyrics-sheet { max-height: 360px; overflow: auto; padding: 22px; border: 1px solid #d5e2e6; border-radius: 14px; white-space: pre-wrap; color: #2c4147; background: #f7fbfc; font-family: Georgia, serif; font-size: 1rem; line-height: 1.7; }
.lyric-preview-card .lyrics-sheet { max-height: 430px; border: 0; border-radius: 0; background: #fff; }
.direct-edit-form { padding: 18px 20px 20px; }
.direct-edit-form textarea { min-height: 290px; margin-top: 2px; font-family: Georgia, serif; font-size: 1rem; line-height: 1.65; }
.direct-edit-meta { margin-top: 8px; }
.direct-edit-meta #direct-lyrics-count { font-variant-numeric: tabular-nums; font-weight: 750; transition: color .15s; }
.direct-edit-meta #direct-lyrics-count.is-near-limit { color: var(--danger); }
.direct-edit-form > p:not(.field-error) { margin: 8px 0 0; color: var(--muted); font-size: .74rem; line-height: 1.45; }
.direct-edit-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 14px; }
.direct-edit-actions .primary-button, .direct-edit-actions .secondary-button { min-height: 42px; padding-inline: 14px; font-size: .78rem; }
.lyrics-check-panel { padding: 20px; border: 1px solid #ded8ff; border-radius: 18px; background: linear-gradient(145deg, #f8f7ff, #fff); }
.lyrics-check-panel h3 { margin: 5px 0 16px; color: #202945; font-size: 1.08rem; }
.check-points { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.check-points li { display: grid; grid-template-columns: 24px 1fr; gap: 9px; align-items: center; color: #4f5872; font-size: .82rem; line-height: 1.35; }
.check-points li span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #246a52; background: #e3f5ec; font-size: .72rem; font-weight: 900; }
.full-lyrics-sheet { max-height: 520px; }
.revision-area { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e4e1f5; }
.revision-trigger { width: 100%; padding-inline: 14px; }
.text-edit-trigger { width: 100%; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 9px; border: 1px solid transparent; border-radius: 11px; color: var(--accent-dark); background: transparent; font-size: .8rem; font-weight: 780; }
.text-edit-trigger:hover { border-color: #ded8ff; background: #f2efff; }
.revision-count { margin-left: 4px; padding-left: 8px; border-left: 1px solid var(--line); color: var(--accent-dark); font-size: .72rem; }
.revision-form { margin-top: 12px; padding: 14px; border: 1px solid #d9e4e7; border-radius: 14px; background: #fff; }
.revision-form textarea { min-height: 90px; }
.inline-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.revision-used { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; border-radius: 12px; color: #315f4d; background: var(--soft-green); font-size: .82rem; }
.revision-used span { color: #536862; font-size: .75rem; }
.approval-actions { margin-top: 20px; padding-top: 20px; border-top: 1px solid #e7e9f1; }
.locked-order-note { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #536862; font-size: .78rem; font-weight: 750; }
.locked-order-note span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #246a52; background: #e3f5ec; }

.payment-processing { max-width: 900px; margin-inline: auto; text-align: center; }
.processing-visual { position: relative; width: 92px; height: 92px; display: grid; place-items: center; margin: 4px auto 20px; border-radius: 50%; background: #f1efff; }
.processing-visual::before { content: ""; position: absolute; inset: 7px; border: 6px solid #ded8ff; border-top-color: var(--accent); border-right-color: var(--coral); border-radius: 50%; animation: spin 1s linear infinite; }
.processing-visual::after { content: "♪"; position: relative; color: var(--accent-dark); font-size: 1.55rem; font-weight: 900; }
.payment-processing .step-label { margin-bottom: 8px; }
.payment-processing h2 { margin-bottom: 8px; }
.payment-summary { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; max-width: 560px; margin: 24px auto; padding: 18px; border: 1px solid #d9d3ff; border-radius: 16px; color: #344054; background: linear-gradient(145deg, #f8f7ff, #fff); text-align: left; }
.payment-summary > strong { color: var(--accent-dark); font-size: 1.2rem; }
.payment-summary small { grid-column: 1 / -1; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.processing-status { margin: 0; color: var(--muted); font-size: .92rem; }
.processing-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; text-align: left; }
.processing-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; align-items: center; min-height: 82px; padding: 14px; border: 1px solid #e1e5ef; border-radius: 14px; color: var(--muted); background: #fafbfe; }
.processing-steps li > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #69728a; background: #e9edf4; font-size: .76rem; font-weight: 850; }
.processing-steps li div { display: grid; gap: 3px; }
.processing-steps strong { color: #344054; font-size: .8rem; line-height: 1.25; }
.processing-steps small { font-size: .69rem; line-height: 1.35; }
.processing-steps li.active { border-color: #cfc7ff; background: #f8f7ff; box-shadow: 0 8px 22px rgba(108,92,231,.09); }
.processing-steps li.active > span { color: #fff; background: linear-gradient(145deg, var(--accent), #8b5cf6); }
.processing-steps li.done { border-color: #c7dfd4; background: #f3faf7; }
.processing-steps li.done > span { color: #fff; background: #56846f; }
.processing-note { margin: 16px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }

.demo-notice, .success-message { display: flex; flex-direction: column; gap: 4px; margin: 18px 0; padding: 15px 17px; border-radius: 14px; background: var(--soft-amber); }
.demo-notice span, .success-message span { color: #6c604b; font-size: .78rem; line-height: 1.45; }
.creator-card > .order-confirmation { padding: 0; }
.confirmation-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 32px clamp(28px, 4vw, 46px); color: #fff; background: radial-gradient(circle at 90% 0, rgba(50,194,207,.2), transparent 30%), radial-gradient(circle at 18% 100%, rgba(108,92,231,.28), transparent 35%), #11172f; }
.confirmation-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 18px; color: #11172f; background: linear-gradient(145deg, #c8ffe4, #78e4bd); box-shadow: 0 12px 28px rgba(67,220,161,.2); font-size: 1.35rem; font-weight: 900; }
.confirmation-copy .step-label { margin-bottom: 6px; color: #9f91ff; }
.confirmation-copy h2 { color: #fff; font-size: clamp(1.75rem, 3vw, 2.35rem); }
.confirmation-copy > p:last-child { margin: 9px 0 0; color: #b8c0dc; font-size: .9rem; }
.confirmation-hero .status-chip { border-color: rgba(119,225,179,.35); color: #c9f8e1; background: rgba(28,114,78,.24); }
.confirmation-body { padding: 24px clamp(28px, 4vw, 46px) 34px; }
.confirmation-priority { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 18px; border: 1px solid #bfe1d4; border-radius: 16px; color: #244f40; background: linear-gradient(145deg, #eaf8f3, #f7fcfa); }
.confirmation-priority-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: #4f8a73; font-weight: 900; }
.confirmation-priority strong { display: block; font-size: 1rem; }
.confirmation-priority p { margin: 4px 0 0; color: #536862; font-size: .82rem; line-height: 1.45; }
.confirmation-priority p strong { display: inline; font-size: inherit; }
.delivery-confirmation { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; margin-top: 12px; padding: 17px 18px; border: 1px solid #dcd7ff; border-radius: 16px; background: linear-gradient(145deg, #f8f7ff, #fff); }
.delivery-mail-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(145deg, var(--accent), #8b5cf6); font-size: 1.05rem; }
.delivery-confirmation div { min-width: 0; }
.delivery-confirmation small { display: block; color: var(--muted); font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.delivery-confirmation strong { display: block; margin-top: 2px; color: #202945; overflow-wrap: anywhere; }
.delivery-confirmation p { margin: 5px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.confirmation-next { margin-top: 20px; padding: 20px; border: 1px solid #dfe3ef; border-radius: 18px; background: #fff; }
.confirmation-next-head > span { color: var(--accent); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.confirmation-next-head h3 { margin: 4px 0 0; color: #202945; font-size: 1rem; }
.confirmation-next-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.confirmation-next-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; padding: 14px; border-radius: 13px; background: #f7f8fc; }
.confirmation-next-steps li > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: white; background: #202945; font-size: .72rem; font-weight: 850; }
.confirmation-next-steps li div { display: grid; gap: 4px; }
.confirmation-next-steps strong { color: #202945; font-size: .8rem; }
.confirmation-next-steps small { color: var(--muted); font-size: .7rem; line-height: 1.45; }
.test-mode-notice { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding: 14px 16px; border: 1px solid #eadbb8; border-radius: 13px; color: #665429; background: #fff9ec; }
.test-mode-notice strong { font-size: .8rem; }
.test-mode-notice span { color: #75684d; font-size: .74rem; line-height: 1.45; }
.confirmation-finish { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 18px; border-top: 1px solid #e7e9f1; }
.legal-link { align-self: flex-start; margin: -5px 0 3px 34px; padding: 0; border: 0; color: var(--accent-dark); background: transparent; font-size: .75rem; font-weight: 780; text-decoration: underline; text-underline-offset: 3px; }
.legal-link:hover { color: var(--deep); }
.full-delivery { text-align: left; }
.delivered-lyrics { overflow: hidden; margin-bottom: 18px; border: 1px solid #dfe3ef; border-radius: 20px; background: #fff; box-shadow: 0 12px 30px rgba(17,23,47,.065); }
.delivered-lyrics-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 20px; border-bottom: 1px solid #e6e9f1; background: #f8f9fc; }
.delivered-lyrics-head span { color: var(--accent); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.delivered-lyrics-head h3 { margin: 3px 0 0; color: #202945; font-size: 1rem; }
.delivered-lyrics-head .secondary-button { min-height: 40px; padding: 0 14px; font-size: .76rem; }
.delivered-lyrics pre { max-height: 420px; margin: 0; padding: 24px; overflow: auto; color: #17213d; background: #fff; font-family: Georgia, serif; font-size: .95rem; line-height: 1.75; white-space: pre-wrap; }
.delivery-feedback { overflow: hidden; border: 1px solid #dfe3ef; border-radius: 20px; background: #fff; box-shadow: 0 12px 30px rgba(17,23,47,.065); }
.delivery-feedback-head { padding: 20px 22px; color: white; background-image: linear-gradient(95deg, rgba(8,14,43,.96), rgba(24,31,77,.82)), url("assets/song-wave-hero.png"); background-position: center 62%; background-size: cover; }
.delivery-feedback-head > span { color: #b9adff; font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.delivery-feedback-head h3 { margin: 4px 0 5px; color: white; font-size: 1.1rem; }
.delivery-feedback-head p { margin: 0; color: #bdc4dc; font-size: .78rem; line-height: 1.45; }
.delivery-feedback form { padding: 20px 22px 22px; }
.feedback-type { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; border: 0; }
.feedback-type legend { grid-column: 1 / -1; margin-bottom: 9px; color: var(--deep); font-size: .8rem; font-weight: 800; }
.feedback-type label { position: relative; cursor: pointer; }
.feedback-type input { position: absolute; opacity: 0; pointer-events: none; }
.feedback-type label > span { min-height: 92px; display: flex; flex-direction: column; gap: 5px; padding: 15px 16px; border: 1px solid #dfe3ef; border-radius: 14px; color: #202945; background: #fafbfe; transition: border-color .15s, background .15s, box-shadow .15s; }
.feedback-type label b { font-size: .82rem; }
.feedback-type label small { color: var(--muted); font-size: .72rem; line-height: 1.45; }
.feedback-type input:checked + span { border-color: #9d8cff; background: #f7f5ff; box-shadow: 0 0 0 3px rgba(108,92,231,.09); }
.feedback-type input:focus-visible + span { outline: 3px solid rgba(108,92,231,.23); outline-offset: 2px; }
.feedback-message-field { margin-bottom: 14px; }
.feedback-policy { padding: 14px 16px; border-left: 4px solid #4f8a73; border-radius: 11px; color: #244f40; background: #f1faf6; }
.feedback-policy strong { font-size: .8rem; }
.feedback-policy p { margin: 4px 0 0; color: #536862; font-size: .74rem; line-height: 1.5; }
.delivery-feedback-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.feedback-success { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding: 14px 16px; border-radius: 12px; color: #315f4d; background: var(--soft-green); }
.feedback-success span { color: #536862; font-size: .76rem; }
.legal-dialog { width: min(760px, calc(100% - 32px)); max-height: min(84vh, 820px); padding: 0; overflow: hidden; border: 0; border-radius: 22px; color: var(--deep); background: #fff; box-shadow: 0 30px 80px rgba(9,14,38,.28); }
.legal-dialog::backdrop { background: rgba(9,14,38,.62); backdrop-filter: blur(4px); }
.legal-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; color: white; background: #11172f; }
.legal-dialog-head span { color: #a99cff; font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.legal-dialog-head h2 { margin: 4px 0 0; color: white; font-size: 1.35rem; }
.legal-dialog-head > button { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; color: white; background: rgba(255,255,255,.08); font-size: 1.4rem; }
.legal-dialog-body { max-height: calc(84vh - 150px); padding: 22px 24px; overflow: auto; }
.legal-dialog-body section + section { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e7e9f1; }
.legal-dialog-body h3 { margin: 0 0 6px; color: #202945; font-size: .9rem; }
.legal-dialog-body p { margin: 0; color: #57627a; font-size: .8rem; line-height: 1.65; }
.legal-provider address { margin: 10px 0 14px; color: #38445d; font-size: .8rem; font-style: normal; line-height: 1.6; }
.legal-provider dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.legal-provider dl > div { padding: 10px 12px; border-radius: 10px; background: #f6f7fb; }
.legal-provider dt { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.legal-provider dd { margin: 3px 0 0; color: #202945; font-size: .76rem; font-weight: 750; overflow-wrap: anywhere; }
.legal-provider a { color: var(--accent-dark); }
.legal-review-note { margin-top: 20px !important; padding: 14px 16px; border-radius: 12px; color: #6c604b !important; background: #fff8e9; }
.legal-dialog-actions { display: flex; justify-content: flex-end; padding: 14px 24px; border-top: 1px solid #e7e9f1; background: #fafbfe; }
.test-result-action { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e7e9f1; }
.test-result-action > span { color: var(--muted); font-size: .72rem; }

.result { text-align: left; }
.result-heading { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 22px; }
.result-icon { width: 64px; height: 64px; display: grid; place-items: center; margin: 0; border-radius: 20px; color: #11172f; background: linear-gradient(145deg, #c8ffe4, #78e4bd); font-size: 1.6rem; font-weight: 900; box-shadow: 0 14px 28px rgba(67,220,161,.2); }
.result-heading .eyebrow { margin: 0 0 5px; }
.result-heading h2 { margin-bottom: 7px; }
.result-heading div > p:last-child { margin: 0; color: var(--muted); line-height: 1.5; }
.delivery-audio-card { overflow: hidden; margin-bottom: 18px; border: 1px solid #dfe3ef; border-radius: 20px; background: #fff; box-shadow: 0 12px 30px rgba(17,23,47,.065); }
.delivery-audio-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 20px; border-bottom: 1px solid #e6e9f1; background: #f8f9fc; }
.delivery-audio-head span:not(.audio-format) { color: var(--accent); font-size: .67rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.delivery-audio-head h3 { margin: 3px 0 0; color: #202945; font-size: 1rem; }
.audio-format { color: var(--muted); font-size: .74rem; white-space: nowrap; }
.fake-player { display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center; margin-top: 22px; padding: 14px 16px; border-radius: 14px; color: white; background: var(--deep); }
.delivery-audio-card .fake-player { margin: 18px 20px 0; }
.fake-player button { width: 40px; height: 40px; border: 0; border-radius: 50%; color: var(--deep); background: white; }
.player-track { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.23); }
.player-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: #f08c72; transition: width .25s linear; }
.fake-player time { min-width: 78px; font-size: .73rem; font-variant-numeric: tabular-nums; }
.delivery-actions { display: flex; justify-content: flex-end; padding: 14px 20px 0; }
.download-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 12px; padding: 0 18px; color: #fff; background: linear-gradient(135deg, var(--accent), #8b5cf6); box-shadow: 0 10px 24px rgba(108,92,231,.22); font-size: .86rem; font-weight: 800; text-decoration: none; }
.download-button:hover { background: linear-gradient(135deg, var(--accent-dark), #7447df); transform: translateY(-1px); }
.simulation-label { margin: 14px 20px 18px; padding: 11px 13px; border-radius: 11px; color: #6c604b; background: #fff8e9; font-size: .72rem; line-height: 1.45; }
.upgrade-card { padding: 20px; border: 1px solid #e7d9be; border-radius: 16px; text-align: left; background: #fffdfa; }
.upgrade-card-head { margin-bottom: 14px; }
.upgrade-card-head span { color: #68738a; font-size: .76rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.upgrade-card-head strong { display: block; margin-top: 3px; color: var(--ink); font-size: 1.05rem; white-space: normal; }
.upgrade-card .field { display: grid; gap: 9px; }
.upgrade-card .field label { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 13px 14px; border: 1px solid #e1e4ec; border-radius: 11px; background: #fff; cursor: pointer; }
.upgrade-card .field input { width: auto; min-height: 0; margin: 3px 0 0; accent-color: var(--accent); }
.upgrade-card .field label:has(input:checked) { border-color: #8d7bfa; box-shadow: 0 0 0 3px rgba(108,92,231,.10); }
.upgrade-card .field span { display: grid; gap: 2px; }
.upgrade-card .field b { color: var(--ink); font-size: .92rem; }
.upgrade-card .field small { color: #647089; font-size: .78rem; line-height: 1.35; }
.upgrade-card .primary-button { width: 100%; margin-top: 15px; }
.success-message { color: #315f4d; background: var(--soft-green); text-align: left; }
.success-message span { color: #536862; }
.restart-link { margin-top: 12px; }

.sample-demos { display: grid; gap: 20px; margin: 30px 0 0; padding: 28px; border-radius: 28px; color: white; background: #11172f; box-shadow: 0 24px 55px rgba(17, 23, 47, .16); text-align: left; }
.sample-demos summary { min-height: 54px; display: flex; align-items: center; gap: 18px; padding: 0; border: 0; background: transparent; cursor: pointer; list-style: none; }
.sample-demos summary::-webkit-details-marker { display: none; }
.sample-demos summary::after { content: "−"; width: 36px; height: 36px; display: grid; place-items: center; margin-left: 4px; border-radius: 50%; color: white; background: rgba(255,255,255,.1); font-size: 1rem; font-weight: 900; }
.sample-demos:not([open]) summary::after { content: "+"; }
.sample-demos summary > span { display: grid; gap: 3px; }
.sample-demos summary small { color: #9ea8d2; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sample-demos summary strong { color: white; font-size: 1.25rem; letter-spacing: -.02em; }
.sample-demos summary em { margin-left: auto; color: #aeb7d8; font-size: .76rem; font-style: normal; }
.sample-demos > p { margin: 0; color: #8f9abd; font-size: .7rem; line-height: 1.45; }
.sample-demos[open] summary { margin-bottom: 0; }
.sample-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sample-track { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.055); box-shadow: none; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.sample-track:hover { transform: translateY(-2px); border-color: rgba(151,133,255,.42); background: rgba(255,255,255,.085); }
.sample-play { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #11172f; background: linear-gradient(145deg, #ffffff, #dcd6ff); box-shadow: 0 7px 18px rgba(0,0,0,.2); }
.sample-play span { font-size: .75rem; transform: translateX(1px); }
.sample-info { display: grid; grid-template-columns: 1fr; gap: 2px; min-width: 0; }
.sample-track b { overflow: hidden; color: white; font-size: .83rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.sample-track small { color: #aeb7d8; font-size: .7rem; }
.sample-track time { align-self: end; color: #aeb7d8; font-size: .66rem; font-variant-numeric: tabular-nums; }
.sample-progress { height: 3px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.15); }
.sample-progress span { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #8f7cff, #ff747a); transition: width .1s linear; }
.sample-track audio { display: none; }
.start-actions { width: min(100%, 540px); display: grid; justify-items: stretch; gap: 10px; margin: 28px auto 0; padding: 14px; border: 1px solid #e1e5ef; border-radius: 20px; background: #fff; box-shadow: 0 12px 30px rgba(17,23,47,.07); }
.start-button { width: 100%; min-height: 58px; padding-inline: 30px; border-radius: 14px; font-size: 1rem; }
.start-actions > span { padding: 0 8px 2px; color: var(--muted); font-size: .76rem; text-align: center; }

.quality-note { display: flex; flex-direction: column; gap: 4px; padding: 15px 17px; border-radius: 14px; color: #315f4d; background: var(--soft-green); }
.quality-note span { color: #536862; font-size: .78rem; line-height: 1.5; }
.full-brief-wizard { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 20px; margin-top: 24px; }
.full-brief-progress { min-height: 430px; padding: 24px 20px; overflow: hidden; border-radius: 20px; color: white; background-image: linear-gradient(165deg, rgba(8,14,43,.94) 10%, rgba(20,28,71,.87) 58%, rgba(54,29,69,.84)), url("assets/song-wave-hero.png"); background-position: center; background-size: cover; box-shadow: 0 18px 38px rgba(17,23,47,.18); }
.full-brief-progress-head { display: grid; gap: 3px; }
.full-brief-progress-head strong { color: #b9adff; font-size: .69rem; letter-spacing: .1em; text-transform: uppercase; }
.full-brief-progress-head span { color: white; font-size: 1.05rem; font-weight: 800; }
.full-brief-progress-track { height: 4px; margin: 17px 0 22px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.16); }
.full-brief-progress-track span { width: 25%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #9c8bff, #ff7b83); box-shadow: 0 0 15px rgba(255,123,131,.45); transition: width .25s ease; }
.full-brief-progress ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.full-brief-progress li { display: grid; grid-template-columns: 32px 1fr; gap: 0 10px; align-items: center; min-height: 56px; padding: 9px 10px; border: 1px solid transparent; border-radius: 13px; color: rgba(255,255,255,.52); transition: color .2s ease, background .2s ease, border-color .2s ease; }
.full-brief-progress li > span { grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; font-size: .62rem; font-weight: 850; }
.full-brief-progress li b { font-size: .78rem; }
.full-brief-progress li small { margin-top: 2px; color: inherit; font-size: .64rem; }
.full-brief-progress li.active { border-color: rgba(255,255,255,.16); color: white; background: rgba(255,255,255,.1); backdrop-filter: blur(5px); }
.full-brief-progress li.active > span { border-color: transparent; color: #11172f; background: white; }
.full-brief-progress li.done { color: rgba(255,255,255,.78); }
.full-brief-progress li.done > span { border-color: rgba(112,220,173,.5); color: transparent; background: rgba(69,167,125,.2); }
.full-brief-progress li.done > span::after { content: "✓"; color: #9ce2c3; font-size: .78rem; }
.full-brief-stage { min-width: 0; padding: 0; }
.full-brief textarea { min-height: 104px; }
.full-brief .two-columns > .field:only-child { grid-column: 1 / -1; }
.full-brief-block { --block-line: #d5dced; position: relative; overflow: hidden; margin: 0; padding: 0; border: 1px solid var(--block-line); border-radius: 20px; background: linear-gradient(145deg, #fafbff, #f0f3fb); box-shadow: 0 14px 34px rgba(17,23,47,.08); }
.full-brief-block-head { display: flex; align-items: center; gap: 13px; margin: 0; padding: 20px 22px; border-bottom: 1px solid #dce2ef; background: linear-gradient(180deg, #eef1f9, #e8ecf7); }
.full-brief-block-head > span { flex: 0 0 auto; width: 38px; height: 30px; display: grid; place-items: center; border-radius: 999px; color: white; background: #151c3e; font-size: .67rem; font-weight: 850; letter-spacing: .04em; }
.full-brief-block-head h3 { margin: 0; color: var(--deep); font-size: 1.05rem; }
.full-brief-block-head p { margin: 3px 0 0; color: var(--muted); font-size: .74rem; line-height: 1.4; }
.full-brief-block .field { margin-bottom: 0; }
.full-brief-block > .field { padding: 20px; }
.full-brief-block > .field + .field { margin: 0; padding-top: 20px; border-top: 1px solid var(--block-line); }
.full-brief-block select, .full-brief-block textarea { background: linear-gradient(135deg, var(--field-surface-strong), var(--field-surface)); }
.full-brief-details .field-grid { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
.full-brief-details .field-grid > .field { padding: 15px; border: 1px solid #d0d9ea; border-radius: 14px; background: linear-gradient(135deg, #f6f7fd, #eef1fa); }
.full-brief-details textarea { min-height: 150px; line-height: 1.6; }
.full-brief-details .field-grid > .full-brief-include { border-color: #bee1d2; border-left: 4px solid #43a77d; background: #f4fbf8; }
.full-brief-details .field-grid > .full-brief-avoid { border-color: #f1c5ca; border-left: 4px solid var(--danger); background: #fff6f7; }
.full-brief-include > label { color: #276b51; }
.full-brief-avoid > label { color: #b52f40; }
.full-brief-avoid .optional { color: #9e6269; }
.full-brief-include textarea { border-color: #c9dfd6; }
.full-brief-avoid textarea { border-color: #e8bcc2; }
.field-limit-count { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 750; }
.field-limit-count.is-near-limit { color: var(--danger); }
.full-brief-stage > .quality-note { margin-top: 14px; }
.full-brief-stage > .form-actions { margin-top: 16px; padding-top: 18px; border-top: 1px solid #e3e6ee; }
.full-brief-stage > .form-actions .primary-button { margin-left: auto; }
.full-direct-edit-form { margin-top: 14px; padding: 20px; border: 1px solid #dfe3ef; border-radius: 18px; background: #fff; }
.full-direct-edit-form textarea { min-height: 430px; }
.direct-edit-meta #full-direct-lyrics-count { font-variant-numeric: tabular-nums; font-weight: 750; transition: color .15s; }
.direct-edit-meta #full-direct-lyrics-count.is-near-limit { color: var(--danger); }
.full-text-edit-tools { margin-top: 14px; padding: 18px; border: 1px solid #ded8ff; border-radius: 17px; background: linear-gradient(145deg, #f8f7ff, #fff); }
.full-text-edit-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.full-text-edit-head span { display: block; color: var(--accent); font-size: .67rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.full-text-edit-head strong { display: block; margin-top: 3px; color: #202945; font-size: .9rem; }
.full-text-edit-head small { padding: 5px 8px; border-radius: 999px; color: var(--accent-dark); background: #ebe8ff; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.full-edit-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.full-edit-choice .secondary-button, .full-edit-choice .text-edit-trigger { width: 100%; min-height: 44px; margin: 0; }
.full-edit-choice .text-edit-trigger { border-color: #ded8ff; background: #fff; }
.full-revision { margin-top: 14px; }

.suno-package { display: grid; gap: 12px; margin: 20px 0; padding: 18px; border: 1px solid #bcd2cb; border-radius: 16px; text-align: left; background: #f3f8f5; }
.suno-package-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.suno-package-head span:first-child { color: #668775; font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.suno-package h3 { margin: 3px 0 0; font-family: Georgia, serif; font-size: 1.35rem; font-weight: 500; }
.package-field { padding: 13px 14px; border-radius: 12px; background: white; }
.package-field > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: .68rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.package-field p, .package-field pre { margin: 0; color: #334a50; font-size: .8rem; line-height: 1.55; }
.package-field pre { max-height: 230px; overflow: auto; white-space: pre-wrap; font-family: inherit; }
.advanced-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.advanced-options > div { padding: 9px 10px; border: 1px solid #dce7e4; border-radius: 10px; background: #f6faf9; }
.advanced-options dt { color: var(--muted); font-size: .68rem; font-weight: 750; }
.advanced-options dd { margin: 3px 0 0; color: var(--deep); font-size: .78rem; font-weight: 800; line-height: 1.35; }
.package-field .text-button { margin: 7px 0 -4px -8px; color: var(--accent-dark); font-size: .74rem; }
.copy-status { min-height: 1em; margin: 0; color: #315f4d; font-size: .75rem; }
.full-package { margin-top: 24px; }
.workflow-status { display: grid; grid-template-columns: 28px 1fr; gap: 11px; align-items: center; margin: 16px 0; padding: 13px 15px; border: 1px solid #e3c68c; border-radius: 13px; background: #fff8e9; text-align: left; }
.workflow-status div { display: flex; flex-direction: column; gap: 2px; }
.workflow-status strong { font-size: .84rem; }
.workflow-status small { color: var(--muted); font-size: .73rem; line-height: 1.4; }
.job-spinner { width: 22px; height: 22px; border: 3px solid #ead8b4; border-top-color: var(--accent); border-radius: 50%; animation: spin .9s linear infinite; }
.workflow-status.is-complete { border-color: #bcd2cb; background: #f3f8f5; }
.workflow-status.is-complete .job-spinner { border: 0; background: #668775; animation: none; }
.workflow-status.is-complete .job-spinner::after { content: "✓"; display: grid; place-items: center; height: 100%; color: white; font-size: .75rem; font-weight: 900; }
.workflow-status.is-queued { border-color: #cfd8ee; background: #f7f9fd; }
.workflow-status.is-queued .job-spinner { border: 0; background: #7382a6; animation: none; }
.workflow-status.is-queued .job-spinner::after { content: "✓"; display: grid; place-items: center; height: 100%; color: white; font-size: .75rem; font-weight: 900; }
.workflow-status.is-error { border-color: #e0b0a8; background: #fff3f1; }
.workflow-status.is-error .job-spinner { border: 0; background: var(--danger); animation: none; }
.workflow-status.is-error .job-spinner::after { content: "!"; display: grid; place-items: center; height: 100%; color: white; font-weight: 900; }
@keyframes spin { to { transform: rotate(360deg); } }

footer { min-height: 80px; display: grid; justify-items: center; gap: 10px; padding: 24px 0 28px; border-top: 1px solid rgba(190, 207, 213, .85); color: var(--muted); font-size: .82rem; text-align: center; }
.footer-meta { display: flex; align-items: center; justify-content: center; gap: 0; }
.footer-meta button { padding: 0; border: 0; color: var(--muted); background: transparent; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-meta button:hover { color: var(--deep); }

.checkout-legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; }
.checkout-legal-links a, .footer-meta a { color: inherit; font-weight: 800; text-underline-offset: .2em; }
.footer-meta a { padding: 0 10px; }
.footer-meta a + a { border-left: 1px solid #dbe0ea; }
.footer-meta a:hover { color: var(--deep); }
.full-submit-error:not(:empty) { margin: 1rem 0 0; padding: .85rem 1rem; border: 1px solid #ef9aa5; border-radius: .75rem; background: #fff2f4; }

.legal-page { min-height: 100vh; background: #f6f7fc; color: var(--ink, #111a35); }
.legal-page-main { width: min(920px, calc(100% - 2rem)); margin: 2rem auto 5rem; }
.legal-page-main > h1 { margin: .5rem 0 1.5rem; font-size: clamp(2.25rem, 6vw, 4.75rem); line-height: .98; }
.legal-page-card, .legal-draft-note { border: 1px solid #d8def0; border-radius: 1.25rem; background: #fff; box-shadow: 0 1.25rem 3rem rgba(21, 30, 65, .08); }
.legal-page-card { padding: clamp(1.25rem, 4vw, 2.5rem); }
.legal-draft-note { margin: 0 0 1.25rem; padding: 1rem 1.15rem; border-color: #e3b85f; background: #fff8e9; }
.legal-draft-note strong, .legal-draft-note p { display: block; margin: 0; }
.legal-draft-note p { margin-top: .25rem; }
.legal-copy section + section { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e1e5f2; }
.legal-copy h2, .legal-page-card h2 { margin: 0 0 .65rem; font-size: 1.25rem; }
.legal-copy p, .legal-page-card p, .legal-page-card address, .legal-contact-list { font-size: 1rem; line-height: 1.7; }
.legal-contact-list { margin: 1.5rem 0 0; }
.legal-contact-list div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: .65rem 0; border-top: 1px solid #e1e5f2; }
.legal-contact-list dt { color: #65708c; font-weight: 800; }
.legal-contact-list dd { margin: 0; }

@media (max-width: 940px) {
  main { gap: 28px; padding-top: 18px; }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 28px; min-height: 440px; }
  h1 { font-size: clamp(3.4rem, 8vw, 5rem); }
  .hero-visual { min-height: 420px; }
  .sample-grid { grid-template-columns: 1fr; }
  .creator-card { min-height: 0; }
  .full-brief-wizard { grid-template-columns: 220px minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .site-header, main, footer { width: min(100% - 24px, 1160px); }
  .site-header { min-height: 56px; }
  .brand { gap: 8px; font-size: .8rem; }
  .brand-mark { width: 32px; height: 32px; border-radius: 9px; }
  .header-actions { gap: 2px; }
  .header-actions .text-button { padding-inline: 4px; font-size: .78rem; }
  .header-actions .test-badge { display: none; }
  main { gap: 20px; padding: 12px 0 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 18px; min-height: 0; }
  .hero-copy { padding: 16px 0 4px; }
  .hero-copy .eyebrow { margin-bottom: 15px; padding: 7px 10px; font-size: .7rem; line-height: 1.35; }
  h1 { max-width: 12ch; font-size: clamp(3rem, 14vw, 4.1rem); line-height: .91; }
  .intro-copy { margin: 19px 0; font-size: .98rem; line-height: 1.55; }
  .hero-visual { min-height: 310px; border-radius: 24px; }
  .offer-card { inset: auto 12px 12px; border-radius: 15px; }
  .offer-price-row { gap: 12px; padding: 11px 13px; }
  .offer-price-row span { font-size: .78rem; }
  .offer-price-row small { font-size: .69rem; }
  .offer-price-row strong { font-size: .9rem; }
  .offer-price-upgrade strong { font-size: .78rem; }
  .offer-total { padding: 9px 13px; font-size: .68rem; }
  .offer-total strong { font-size: .73rem; }
  .trust-row { gap: 8px 12px; font-size: .76rem; }
  .sample-demos { gap: 12px; margin-top: 22px; padding: 16px; border-radius: 22px; }
  .sample-demos:not([open]) { padding-block: 12px; }
  .sample-demos summary { min-height: 44px; align-items: center; padding: 0; border: 0; background: transparent; }
  .sample-demos summary::after { display: grid; flex: 0 0 34px; margin-left: auto; }
  .sample-demos summary em { display: none; }
  .sample-demos summary strong { font-size: 1rem; }
  .sample-demos > p { font-size: .72rem; }
  .sample-grid { grid-template-columns: 1fr; gap: 8px; }
  .sample-track { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; min-height: 68px; padding: 10px 12px; border-radius: 14px; }
  .sample-track:hover { transform: none; }
  .sample-play { width: 36px; height: 36px; }
  .sample-info { gap: 1px; }
  .sample-track b { font-size: .84rem; }
  .sample-track small { font-size: .73rem; }
  .sample-track time { align-self: center; font-size: .7rem; }
  .sample-progress { margin-top: 5px; }
  .start-actions { width: 100%; gap: 9px; margin-top: 16px; padding: 11px; border-radius: 17px; }
  .start-button { width: 100%; min-width: 0; min-height: 54px; padding-inline: 14px; font-size: .9rem; }
  .start-actions > span { padding-inline: 4px; font-size: .76rem; line-height: 1.4; }
  .creator-card { padding: 0; border-radius: 24px; }
  .flow-header { padding: 26px 18px 22px; }
  .flow-header::before { width: 220px; height: 220px; top: -165px; right: -45px; }
  .card-heading h2 { font-size: 2rem; line-height: 1.05; }
  .creator-card > form, .creator-card > .workspace, .creator-card > .result { padding: 26px 18px 30px; }
  .identity-grid { gap: 20px; margin-bottom: 26px; }
  .form-block { margin-bottom: 16px; padding: 0; border-radius: 18px; }
  .form-block-title { margin: 0; padding: 16px 16px 14px; }
  .form-block > .identity-grid, .form-block > .field { padding: 18px 15px; }
  .form-block .identity-grid { margin-bottom: 0; }
  .trait-suggestions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .trait-suggestions button { min-height: 40px; padding: 7px 9px; font-size: .74rem; }
  .own-trait-label { margin-top: 16px; }
  input[type="text"], input[type="number"], input[type="email"], select, textarea { min-height: 54px; }
  .two-columns, .identity-grid, .choice-grid, .text-source-grid, .review, .checkout-grid { grid-template-columns: 1fr; }
  .tone-step .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tone-step .choice span { min-height: 88px; padding: 12px 10px 12px 38px; }
  .tone-step .choice input { top: 18px; left: 12px; }
  .checkout-grid { gap: 12px; padding: 14px; }
  .delivery-contact-grid { grid-template-columns: 1fr; }
  .approval-list { padding: 0 14px 14px; }
  .summary-card-head { padding: 19px 17px; }
  .summary-card-head small { display: none; }
  .recipient-summary { grid-template-columns: 48px minmax(0,1fr); gap: 13px; padding: 18px 17px; }
  .recipient-avatar { width: 46px; height: 46px; border-radius: 15px; font-size: 1.05rem; }
  .recipient-copy strong { font-size: 1.2rem; }
  .recipient-pronunciation { grid-column: 1 / -1; max-width: none; padding: 13px 0 0; border-top: 1px solid #e3e6ee; border-left: 0; }
  .summary-highlight-grid { grid-template-columns: 1fr; gap: 10px; padding: 14px 17px; }
  .summary-section { padding: 18px 17px; }
  .summary-highlight-grid .summary-section { padding: 15px; }
  .summary-foundation { padding-left: 68px; }
  .summary-foundation::before { left: 17px; }
  .summary-detail-list { grid-template-columns: 1fr; }
  .summary-meta-line { padding: 13px 17px 15px; }
  .identity-grid > * { grid-column: 1 !important; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .primary-button, .form-actions .secondary-button { width: 100%; }
  .approval-actions { align-items: stretch; }
  .locked-order-note { justify-content: center; padding: 8px 0; }
  .processing-steps { grid-template-columns: 1fr; margin-top: 22px; }
  .processing-steps li { min-height: 70px; }
  .processing-visual { width: 80px; height: 80px; }
  .time-note { display: none; }
  .workspace-head { flex-direction: column; gap: 10px; }
  .lyrics-approval > .workspace-head { align-items: flex-start; padding: 24px 18px; }
  .lyrics-approval-body { padding: 20px 18px 28px; }
  .lyrics-review-layout { grid-template-columns: 1fr; }
  .lyric-preview-head { padding: 14px 16px; }
  .lyric-preview-card .lyrics-sheet { max-height: none; padding: 18px 16px; }
  .lyrics-check-panel { padding: 17px 16px; }
  .direct-edit-actions { align-items: stretch; flex-direction: column; }
  .direct-edit-actions .primary-button, .direct-edit-actions .secondary-button, .direct-edit-actions .text-button { width: 100%; }
  .confirmation-hero { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 25px 18px; }
  .confirmation-icon { width: 48px; height: 48px; border-radius: 15px; }
  .confirmation-hero .status-chip { grid-column: 2; justify-self: start; }
  .confirmation-body { padding: 18px 18px 28px; }
  .confirmation-priority { padding: 16px; }
  .confirmation-next { padding: 16px; }
  .confirmation-next-steps { grid-template-columns: 1fr; }
  .confirmation-finish .secondary-button { width: 100%; }
  .delivered-lyrics-head { align-items: stretch; flex-direction: column; }
  .delivered-lyrics-head .secondary-button { width: 100%; }
  .delivered-lyrics pre { max-height: 360px; padding: 18px 16px; }
  .delivery-feedback form, .delivery-feedback-head { padding: 18px 16px; }
  .feedback-type { grid-template-columns: 1fr; }
  .feedback-type label > span { min-height: 0; }
  .delivery-feedback-actions { align-items: stretch; flex-direction: column-reverse; }
  .delivery-feedback-actions .primary-button, .delivery-feedback-actions .text-button { width: 100%; }
  .legal-dialog { width: calc(100% - 20px); max-height: 90vh; border-radius: 18px; }
  .legal-dialog-head, .legal-dialog-body, .legal-dialog-actions { padding-inline: 17px; }
  .legal-dialog-body { max-height: calc(90vh - 146px); }
  .legal-provider dl { grid-template-columns: 1fr; }
  .full-brief-wizard { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
  .full-brief-progress { min-height: 0; padding: 18px 16px 15px; border-radius: 17px; background-position: center 48%; }
  .full-brief-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .full-brief-progress-head span { font-size: .9rem; }
  .full-brief-progress-track { margin: 12px 0 13px; }
  .full-brief-progress ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .full-brief-progress li { display: grid; grid-template-columns: 1fr; justify-items: center; min-height: 52px; gap: 4px; padding: 7px 3px; text-align: center; }
  .full-brief-progress li > span { grid-row: auto; width: 24px; height: 24px; }
  .full-brief-progress li b { max-width: 100%; overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
  .full-brief-progress li small { display: none; }
  .full-brief-block { padding: 0; border-radius: 16px; }
  .full-brief-block-head { align-items: flex-start; margin: 0; padding: 15px 16px; }
  .full-brief-block > .field, .full-brief-details .field-grid { padding: 16px; }
  .full-edit-choice { grid-template-columns: 1fr; }
  .full-text-edit-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .full-direct-edit-form { padding: 16px; }
  .test-result-action { align-items: stretch; flex-direction: column; }
  .test-result-action .secondary-button { width: 100%; }
  .result-heading { grid-template-columns: 52px minmax(0, 1fr); gap: 13px; }
  .result-icon { width: 50px; height: 50px; border-radius: 16px; font-size: 1.25rem; }
  .delivery-audio-head { align-items: flex-start; flex-direction: column; gap: 7px; padding: 15px 16px; }
  .delivery-audio-card .fake-player { margin: 14px 14px 0; }
  .delivery-actions { padding: 12px 14px 0; }
  .download-button { width: 100%; }
  .price-summary > div, .upgrade-card > div { flex-direction: column; gap: 5px; }
  .fake-player { grid-template-columns: 42px 1fr; }
  .fake-player time { grid-column: 2; text-align: right; }
  .advanced-options { grid-template-columns: 1fr; }
  footer { min-height: 0; gap: 9px; padding: 18px 0 28px; line-height: 1.35; }
  .footer-brand { font-size: .76rem; font-weight: 750; letter-spacing: .01em; }
  footer .footer-meta { min-width: 0; flex-direction: row; align-items: center; justify-content: center; gap: 0; overflow-wrap: normal; }
  footer .footer-meta a { padding: 0 9px; font-size: .82rem; }
}

.operator-page { min-height: 100vh; background: linear-gradient(145deg, #f5f7ff, #fff 45%, #edf6f4); color: #101b3b; }
.operator-main { width: min(1060px, calc(100% - 40px)); margin: 0 auto; padding: 70px 0 100px; }
.operator-intro { max-width: 680px; margin-bottom: 30px; }
.operator-intro h1 { margin: 6px 0 12px; font-size: clamp(2.2rem, 5vw, 3.9rem); letter-spacing: -.055em; }
.operator-intro > p:last-child { max-width: 640px; color: #53617d; font-size: 1.05rem; line-height: 1.65; }
.operator-login, #operator-workspace { border: 1px solid #d9dff0; border-radius: 22px; background: #fff; box-shadow: 0 20px 48px rgba(30, 44, 88, .08); }
.operator-login { max-width: 650px; padding: 22px; }
.operator-login label { display: block; margin-bottom: 9px; font-weight: 800; }
.operator-login > div { display: flex; gap: 10px; }
.operator-login input { flex: 1; }
#operator-workspace { padding: 20px; }
.operator-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid #e5e9f3; }
.operator-toolbar div { display: grid; gap: 3px; }
.operator-toolbar strong { font-size: 1.05rem; }
.operator-toolbar span { color: #65718c; font-size: .88rem; }
.operator-jobs { display: grid; gap: 18px; margin-top: 20px; }
.operator-job { overflow: hidden; border: 1px solid #dce1ef; border-radius: 18px; background: #fbfcff; }
.operator-job > header { display: flex; justify-content: space-between; gap: 20px; padding: 22px; background: linear-gradient(100deg, #121a3d, #232957); color: #fff; }
.operator-job h2 { margin: 10px 0 4px; font-size: 1.35rem; }
.operator-job header p, .operator-job header time { margin: 0; color: #d7dcfa; font-size: .86rem; }
.operator-job header time { white-space: nowrap; }
.operator-status { display: inline-flex; padding: 5px 9px; border-radius: 99px; background: #e6e8ff; color: #3336a8; font-size: .78rem; font-weight: 850; }
.operator-status.generating { background: #fff1da; color: #9a5d00; }
.operator-status.quality_check { background: #ddf5ed; color: #167456; }
.operator-status.ready { background: #e5e1ff; color: #4d36ab; }
.operator-status.failed { background: #ffe1e4; color: #a12d3b; }
.operator-job > dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid #e5e9f3; }
.operator-job > dl div { padding: 15px 22px; }
.operator-job > dl div + div { border-left: 1px solid #e5e9f3; }
.operator-job dt { color: #6b7590; font-size: .78rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.operator-job dd { margin: 5px 0 0; font-weight: 750; }
.operator-job section { padding: 18px 22px 0; }
.operator-copy-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.operator-copy-head h3 { margin: 0; font-size: .92rem; }
.operator-job pre, .operator-job section p { max-height: 260px; overflow: auto; margin: 9px 0 0; padding: 14px; border: 1px solid #e0e5f1; border-radius: 12px; background: #fff; color: #24334e; font: .95rem/1.6 Georgia, serif; white-space: pre-wrap; }
.operator-job section p { font-family: inherit; }
.operator-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 20px 22px; }
.operator-quality-audio { display: grid; gap: 10px; }
.operator-quality-audio > .operator-copy-head > span { color: #66718c; font-size: .74rem; font-weight: 750; }
.operator-audio-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; padding: 13px 14px; border: 1px solid #dfe5f1; border-radius: 12px; background: #fff; }
.operator-audio-row > div { display: grid; gap: 3px; }
.operator-audio-row strong { font-size: .86rem; }
.operator-audio-row span { color: #66718c; font-size: .74rem; }
.operator-audio-row audio { width: 100%; min-width: 0; height: 38px; }
.operator-audio-row.is-unavailable::after { content: "Prüfdatei nicht verfügbar"; color: #a12d3b; font-size: .78rem; }
.operator-quality-panel { margin-top: 20px; padding: 20px 22px 0; border-top: 1px solid #e5e9f3; background: #f7fbf9; }
.operator-quality-panel .operator-copy-head { align-items: flex-start; }
.operator-quality-panel h3 { margin: 0; font-size: 1rem; }
.operator-quality-panel p { margin: 5px 0 0; color: #587168; font-size: .82rem; line-height: 1.45; }
.operator-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.operator-check { display: flex; align-items: flex-start; gap: 9px; min-height: 42px; padding: 10px 11px; border: 1px solid #d4e5de; border-radius: 10px; color: #25483b; background: #fff; font-size: .8rem; font-weight: 700; line-height: 1.35; }
.operator-check input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: #367d65; }
.operator-note { display: grid; gap: 7px; margin-top: 15px; color: #4b645b; font-size: .8rem; font-weight: 800; }
.operator-note textarea { min-height: 74px; padding: 10px 12px; border: 1px solid #d4e5de; border-radius: 10px; color: #24334e; font: inherit; resize: vertical; }
.operator-quality-panel .operator-actions { padding-inline: 0; }
.operator-fail-button { color: #9b3140; border-color: #e5bdc5; background: #fff7f8; }
.operator-delivery-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px; padding: 18px 22px; border-top: 1px solid #e5e9f3; background: #f3f0ff; }
.operator-delivery-panel > div { display: grid; gap: 4px; }
.operator-delivery-panel strong { color: #332283; font-size: .92rem; }
.operator-delivery-panel span { color: #5f6281; font-size: .78rem; }
.operator-delivery-panel.is-sent { background: #f1faf6; }
.operator-delivery-panel.is-sent strong { color: #236750; }
.operator-state-note { display: grid; gap: 4px; margin: 20px 22px; padding: 13px 14px; border: 1px solid #d8dfef; border-radius: 12px; color: #53617d; background: #f7f9fd; font-size: .82rem; line-height: 1.45; }
.operator-state-note.is-error { border-color: #efc4c9; color: #8b3140; background: #fff6f7; }
.operator-empty { display: grid; gap: 5px; padding: 48px 20px 28px; text-align: center; color: #63708d; }
.operator-empty strong { color: #162044; font-size: 1.1rem; }

@media (max-width: 680px) {
  .operator-main { width: min(100% - 28px, 1060px); padding-top: 40px; }
  .operator-login > div, .operator-toolbar, .operator-job > header, .operator-actions, .operator-delivery-panel { align-items: stretch; flex-direction: column; }
  .operator-login .primary-button, .operator-toolbar .secondary-button, .operator-actions > *, .operator-delivery-panel > button { width: 100%; }
  .operator-audio-row, .operator-check-grid { grid-template-columns: 1fr; }
  .operator-job > dl { grid-template-columns: 1fr; }
  .operator-job > dl div + div { border-top: 1px solid #e5e9f3; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}