:root {
  --bg: #f5f1e8;
  --paper: #fffdf8;
  --ink: #263238;
  --muted: #687078;
  --brand: #b43b2a;
  --brand-dark: #7d271d;
  --accent: #1f6f78;
  --line: #e2d8c8;
  --ok: #2d6a4f;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(circle at top left, #fff7e1 0, var(--bg) 38rem);
  color: var(--ink);
  line-height: 1.5;
}

.hero {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 .65rem; }
h1 { font-size: clamp(2rem, 5vw, 4rem); color: var(--brand-dark); }
.lead { max-width: 65rem; font-size: 1.15rem; margin: 0; }
.eyebrow { color: var(--accent); text-transform: uppercase; font-weight: 800; letter-spacing: .08em; margin: 0 0 .5rem; font-size: .82rem; }

.grid {
  display: grid;
  grid-template-columns: minmax(22rem, 1.05fr) minmax(22rem, .95fr);
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 3rem) 2rem;
}

.card {
  background: color-mix(in srgb, var(--paper) 94%, white);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: 0 10px 28px rgba(38,50,56,.08);
  padding: 1.2rem;
}

label, legend { font-weight: 700; }
label { display: block; margin: .85rem 0; }
input, select, textarea {
  width: 100%;
  margin-top: .3rem;
  border: 1px solid #cfc6b8;
  border-radius: .65rem;
  padding: .7rem .75rem;
  font: inherit;
  background: #fff;
  color: var(--ink);
}
textarea { resize: vertical; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
fieldset {
  border: 1px solid var(--line);
  border-radius: .8rem;
  margin: 1rem 0;
  padding: .7rem .9rem;
}
fieldset label { font-weight: 500; margin: .45rem 0; display: flex; gap: .5rem; align-items: flex-start; }
fieldset input { width: auto; margin-top: .25rem; }

button {
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  padding: .75rem 1rem;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(180,59,42,.25);
}
button:hover { filter: brightness(.96); }
.secondary { background: var(--accent); box-shadow: 0 5px 14px rgba(31,111,120,.20); }
.ghost { background: transparent; color: var(--brand-dark); border: 1px solid var(--line); box-shadow: none; }
.actions, .output-head { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; align-items: center; }

.preview {
  background: #fff;
  border: 1px dashed #cfc6b8;
  border-radius: .8rem;
  padding: 1rem;
  min-height: 18rem;
  white-space: normal;
}
.preview h3 { color: var(--brand-dark); }
.preview ul { padding-left: 1.2rem; }
.badge { display: inline-block; background: #e6f1f2; color: #114c54; padding: .15rem .45rem; border-radius: .45rem; margin: .1rem; font-size: .9rem; }
.muted { color: var(--muted); }
.callout { border-left: 4px solid var(--ok); padding-left: .75rem; background: #f0f7f3; padding-top: .4rem; padding-bottom: .4rem; }

footer { padding: 0 clamp(1rem, 4vw, 3rem) 2rem; color: var(--muted); }

@media (max-width: 900px) {
  .grid, .two { grid-template-columns: 1fr; }
  .hero { flex-direction: column; }
}

@media print {
  body { background: white; }
  .form-card, .hero button, #copyBtn, footer { display: none; }
  .grid { display: block; padding: 0; }
  .card { border: 0; box-shadow: none; }
  .preview { border: 0; }
}