/* Shared visual foundation, preserved with the Warm Cards product. */
:root {
  --navy: #0d1b2a;
  --gold: #d4af37;
  --rose: #e98f8f;
  --cream: #fff7e6;
  --ink: #0d1b2a;
  font-family: Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
.app-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 52px 0 64px; }
.hero { max-width: 650px; margin-bottom: 32px; }
.eyebrow { margin: 0 0 8px; color: #9d7518; font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-family: Georgia, serif; font-size: clamp(2.3rem, 6vw, 4.5rem); line-height: 1; }
h2 { margin-bottom: 20px; font-family: Georgia, serif; font-size: 1.5rem; }
.hero > p:last-child { max-width: 560px; color: #4b5661; font-size: 1.05rem; line-height: 1.6; }
.editor-grid, .output-grid { display: grid; gap: 20px; }
.editor-grid { grid-template-columns: minmax(270px, .62fr) minmax(0, 1.38fr); }
.output-grid { grid-template-columns: 1fr; margin-top: 20px; }
.panel { border: 1px solid rgba(13, 27, 42, .14); border-radius: 20px; background: rgba(255,255,255,.44); padding: 24px; box-shadow: 0 12px 35px rgba(13,27,42,.05); }
.controls { display: flex; flex-direction: column; gap: 16px; }
label { display: grid; gap: 8px; font-size: .92rem; font-weight: 700; }
select, button { min-height: 46px; border-radius: 10px; font: inherit; }
select { padding: 0 12px; border: 1px solid rgba(13,27,42,.24); color: var(--navy); background: #fffdf8; }
button { border: 0; background: var(--navy); color: var(--cream); cursor: pointer; font-weight: 700; }
button:hover { background: #1a3047; }
.create-button { min-height: 56px; margin-top: 6px; background: var(--rose); color: var(--navy); box-shadow: 0 10px 20px rgba(233, 143, 143, .36); font-size: 1.05rem; }
.create-button:hover { background: #f0a2a2; }
.action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.secondary-button { min-height: 42px; border: 1px solid rgba(13, 27, 42, .2); background: transparent; color: var(--navy); font-size: .8rem; }
.secondary-button:hover { background: rgba(212, 175, 55, .14); }
.save-button { min-height: 42px; background: #d8d2c6; color: #777269; cursor: not-allowed; }
.save-button span { font-size: .7rem; font-weight: 400; }
.editor-settings { border-top: 1px solid rgba(13, 27, 42, .12); padding-top: 14px; }
.editor-settings summary { cursor: pointer; color: #5b6874; font-size: .88rem; }
.editor-settings-content { display: grid; gap: 10px; padding-top: 14px; }
.hint { margin: 0; color: #65717b; font-size: .82rem; line-height: 1.45; }
.result-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.status { border: 1px solid var(--gold); border-radius: 999px; padding: 7px 10px; color: #73540c; font-size: .68rem; font-weight: 700; letter-spacing: .07em; white-space: nowrap; }
.card-preview { --composer-text-color: var(--navy); --composer-font: Georgia, serif; --composer-font-size: clamp(1.4rem, 3.5vw, 2.15rem); --composer-overlay: transparent; position: relative; display: flex; min-height: 560px; margin-top: 6px; padding: 58px 52px 42px; overflow: hidden; border: 2px solid var(--gold); border-radius: 28px; flex-direction: column; justify-content: center; text-align: center; }
.card-preview::before { position: absolute; z-index: 1; inset: 0; background: var(--composer-overlay); content: ""; pointer-events: none; }
.card-preview::after { position: absolute; z-index: 1; right: -42px; bottom: -42px; width: 108px; height: 108px; border: 1px solid currentColor; border-radius: 50%; opacity: .28; content: ""; pointer-events: none; }
.card-preview[data-composition="top"] { justify-content: flex-start; }
.card-preview[data-composition="bottom"] { justify-content: flex-end; }
.card-preview[data-composition="right"] { align-items: flex-end; text-align: left; }
.card-preview[data-composition="right"] .card-category, .card-preview[data-composition="right"] .card-text, .card-preview[data-composition="right"] .card-signature { width: min(52%, 360px); }
.generated-image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.generated-image:not([hidden]) + .card-category { border-radius: 999px; background: rgba(13, 27, 42, .72); padding: 8px 12px; }
.style-gentle, .style-light, .style-romantic { background: var(--cream); color: var(--navy); }
.style-evening, .style-motivation { background: var(--navy); color: var(--cream); }
.style-romantic { border-color: var(--rose); }
.style-motivation { border-color: var(--gold); }
.card-category { position: relative; z-index: 2; margin-bottom: 26px; color: var(--gold); font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.card-text { position: relative; z-index: 2; margin-bottom: 32px; color: var(--composer-text-color); font-family: var(--composer-font); font-size: var(--composer-font-size); line-height: 1.35; }
.card-signature { position: relative; z-index: 2; margin-bottom: 0; color: var(--rose); font-family: "Playfair Display", Georgia, serif; font-size: 1.15rem; }
.logo-pending { position: absolute; right: 16px; bottom: 16px; left: 16px; color: inherit; font-size: .67rem; line-height: 1.3; opacity: .7; }
.generation-status { margin: 14px 0 0; color: #65717b; font-size: .84rem; line-height: 1.45; }
.developer-only { display: none; }
.developer-mode .developer-only { display: inline-flex; }
.output { min-height: 195px; }
.text-output, .prompt-output { margin-bottom: 0; line-height: 1.65; }
.prompt-output { color: #495663; font-size: .92rem; }
@media (max-width: 760px) { .app-shell { padding-top: 32px; } .editor-grid, .output-grid { grid-template-columns: 1fr; } .card-preview { min-height: 440px; padding: 38px 28px; } }