@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Manrope:wght@400;600;700;800&display=swap');

:root {
  --bg: #fff7f8;
  --surface: #ffffff;
  --surface-soft: #fff0f4;
  --ink: #2a1b22;
  --muted: #77636b;
  --line: #efd7df;
  --rose: #df4774;
  --rose-dark: #b72f59;
  --wine: #7b2344;
  --sage: #34776f;
  --sage-soft: #e4f3ef;
  --gold: #b77a2b;
  --shadow: 0 22px 70px rgba(94, 35, 56, 0.14);
  --shadow-soft: 0 12px 34px rgba(94, 35, 56, 0.1);
  color-scheme: light;
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(223, 71, 116, 0.14), transparent 28rem),
    radial-gradient(circle at 90% 15%, rgba(52, 119, 111, 0.1), transparent 24rem),
    linear-gradient(135deg, #fff7f8 0%, #fffdf8 58%, #f5fffc 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
a { color: inherit; }
button, input, textarea, select { font: inherit; }

.app-shell { width: min(1160px, 100%); margin: 0 auto; padding: 16px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0 22px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: var(--wine); color: #fff; font-weight: 800; }
.brand strong { display: block; font-family: 'Cormorant Garamond', serif; font-size: 23px; line-height: 1; }
.brand small { display: block; color: var(--muted); font-size: 12px; }
.top-actions { display: flex; gap: 10px; color: var(--muted); font-size: 14px; font-weight: 700; }
.top-actions a { min-height: 36px; display: inline-flex; align-items: center; border-radius: 8px; padding: 0 8px; text-decoration: none; }
.recipient-view .top-actions { display: none; }

.creator-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 22px; align-items: start; }
.result-layout, .quest-layout, .manage-layout { min-height: calc(100vh - 110px); display: grid; place-items: center; }
.visual-panel, .work-panel, .result-card, .quest-card, .manage-card { background: rgba(255,255,255,0.88); border: 1px solid rgba(239,215,223,0.9); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.visual-panel { position: sticky; top: 16px; }
.visual-panel img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.visual-caption { padding: 20px; background: linear-gradient(135deg, rgba(255,240,244,0.96), rgba(228,243,239,0.86)); }
.visual-caption span, .eyebrow { color: var(--rose-dark); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.visual-caption strong { display: block; margin-top: 8px; line-height: 1.38; }
.work-panel, .result-card, .quest-card, .manage-card { padding: clamp(20px, 4vw, 34px); }
.result-card, .quest-card { width: min(720px, 100%); }
.manage-card { width: min(860px, 100%); }
.admin-card { width: min(980px, 100%); }

.stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 26px; font-size: 13px; }
.stepper span { min-height: 42px; padding: 11px 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: #fff; text-align: center; }
.stepper .active { color: #fff; border-color: var(--wine); background: var(--wine); }
.section-heading { margin-bottom: 22px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, .quest-title { font-family: 'Cormorant Garamond', serif; letter-spacing: 0; line-height: 0.98; }
h1 { margin-bottom: 12px; font-size: clamp(42px, 6vw, 72px); }
h2 { margin-bottom: 10px; font-size: clamp(34px, 4vw, 48px); }
h3 { font-size: 20px; }
p, .muted { color: var(--muted); line-height: 1.55; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 7px; margin-bottom: 15px; }
.field span, .copy-field span { color: var(--muted); font-size: 14px; font-weight: 800; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); min-height: 50px; padding: 13px 14px; outline: none; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(223, 71, 116, 0.12); }
.error { min-height: 18px; color: var(--rose-dark); font-size: 13px; }

.primary-btn, .secondary-btn, .ghost-btn, .chip, .copy-field button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border: 0; border-radius: 12px; padding: 12px 17px; cursor: pointer; text-decoration: none; font-weight: 850; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.primary-btn { background: var(--rose); color: #fff; box-shadow: 0 12px 26px rgba(223,71,116,0.24); }
.secondary-btn { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.ghost-btn { background: rgba(255,255,255,0.68); color: var(--wine); }
.primary-btn:disabled { cursor: not-allowed; opacity: 0.48; box-shadow: none; }
.primary-btn:hover, .secondary-btn:hover, .ghost-btn:hover, .chip:hover, .copy-field button:hover { transform: translateY(-1px); }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.form-screen { display: none; }
.form-screen.active { display: block; animation: rise 220ms ease; }
.toggle-row, .privacy-check { display: grid; gap: 12px; }
.toggle-row label, .privacy-check, .self-time { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); line-height: 1.4; }
.toggle-row input, .privacy-check input, .self-time input { width: 18px; min-height: 18px; margin-top: 2px; accent-color: var(--rose); }
.phone-preview { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: linear-gradient(180deg, #fff, #fff3f6); }
.phone-preview .mini-title { font-family: 'Cormorant Garamond', serif; font-size: 34px; line-height: 1; margin-bottom: 12px; }
.copy-field { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 16px 0; }
.copy-field span { grid-column: 1 / -1; }
.copy-field input { min-width: 0; }
.copy-field button { background: var(--sage); color: #fff; }

.quest-card { position: relative; isolation: isolate; }
.quest-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(255,240,244,0.94), rgba(228,243,239,0.74)); }
.quest-progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; color: var(--muted); font-size: 13px; }
.progress-line { flex: 1; height: 8px; overflow: hidden; border-radius: 999px; background: #f2dde5; }
.progress-line span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--rose), var(--sage)); }
.quest-hero { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 18px; align-items: center; margin-bottom: 18px; }
.quest-hero img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.quest-title { font-size: clamp(40px, 6vw, 64px); margin-bottom: 12px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.chip { border: 1px solid var(--line); background: #fff; color: var(--ink); min-height: 56px; text-align: center; line-height: 1.2; }
.chip.selected { border-color: var(--sage); background: var(--sage-soft); color: #173f3a; }
.playful-row {
  align-items: center;
}

.avoid-btn {
  position: relative;
  transition: transform 180ms ease, opacity 180ms ease, background 180ms ease;
  will-change: transform;
}

.runaway-panel {
  overflow: visible;
}

.time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.summary-list, .admin-list { display: grid; gap: 10px; margin: 18px 0; }
.summary-row { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.summary-row span:first-child { color: var(--muted); }
.admin-item { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,0.76); }
.empty-state { padding: 18px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); background: rgba(255,255,255,0.64); }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }
@media (max-width: 840px) { .creator-layout, .quest-hero { grid-template-columns: 1fr; } .visual-panel { position: static; } .visual-panel img { aspect-ratio: 16 / 9; } }
@media (max-width: 560px) {
  .app-shell { padding: 0; }
  .topbar { position: sticky; top: 0; z-index: 20; padding: 10px 12px; border-bottom: 1px solid rgba(239,215,223,0.82); background: rgba(255,247,248,0.94); backdrop-filter: blur(14px); }
  .brand small { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .field-grid, .choice-grid, .time-grid, .copy-field { grid-template-columns: 1fr; }
  .creator-layout { padding: 0 10px 16px; gap: 10px; }
  .visual-panel, .work-panel, .result-card, .quest-card, .manage-card { border-radius: 16px; box-shadow: var(--shadow-soft); }
  .work-panel, .result-card, .manage-card { padding: 18px; }
  .quest-layout { min-height: calc(100dvh - 64px); align-items: stretch; }
  .quest-card { width: 100%; min-height: calc(100dvh - 64px); border: 0; border-radius: 0; box-shadow: none; padding: 18px; }
  .quest-title { font-size: clamp(38px, 12vw, 52px); }
  h1 { font-size: clamp(40px, 13vw, 56px); }
  h2 { font-size: clamp(32px, 10vw, 44px); }
  .button-row > *, .primary-btn, .secondary-btn, .ghost-btn, .chip { width: 100%; }
  .summary-row { display: grid; grid-template-columns: 1fr; gap: 4px; }
}