:root {
  --bg: #f5f5f7;
  --card: #fff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --border: #d2d2d7;
  --accent: #0071e3;
  --pink: #ff2d8f;
  --danger: #b42318;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; background: radial-gradient(circle at top, #fff 0%, var(--bg) 55%); color: var(--text); }
.app { max-width: 1120px; margin: 28px auto; padding: 0 16px; display: grid; gap: 14px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: 0 8px 24px rgba(0,0,0,.05); }
.eyebrow { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
h1 { margin: 6px 0; font-size: 30px; }
h2 { margin: 0 0 6px; }
.sub { margin: 0 0 14px; color: var(--muted); }
.sub.tight { margin-bottom: 8px; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.step-pill { background: #eef4ff; color: #004a99; border-radius: 999px; padding: 8px 12px; font-weight: 600; }
.mainnav { display: flex; gap: 8px; }
.nav-btn { border: 1px solid var(--border); background:#fafafa; border-radius:999px; padding:10px 16px; font-weight:700; }
.nav-btn.active { background: linear-gradient(120deg,#ffe8f5,#e8f1ff); border-color:#ff9ecf; }
.stepper { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.step { border: 1px solid var(--border); background: #fafafa; border-radius: 999px; padding: 9px 10px; font-weight: 600; }
.step.active { background: #e7f1ff; border-color: #99c7ff; color: #004a99; }
.layout { display: grid; gap: 12px; }
.hidden { display: none; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field span { font-size: 14px; font-weight: 600; }
.field em { color: var(--accent); font-style: normal; }
input, select, textarea { border: 1px solid var(--border); border-radius: 12px; padding: 10px 11px; font-size: 15px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.actions.spaced { margin-bottom: 14px; }
button { border: 0; border-radius: 999px; padding: 10px 14px; font-weight: 600; cursor: pointer; }
button.primary { background: linear-gradient(120deg, var(--accent), var(--pink)); color: #fff; }
button.ghost { background: #ececf0; color: #1d1d1f; }
button:disabled { opacity: .45; cursor: not-allowed; }
.error { min-height: 20px; color: var(--danger); }
pre { background: #fafafa; border: 1px solid var(--border); border-radius: 12px; padding: 12px; white-space: pre-wrap; }
#preview-frame { width: 100%; min-height: 420px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.progress-wrap { margin-bottom: 12px; }
.progress { width: 100%; height: 10px; border-radius: 999px; background: #e9edf2; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #4c9cff, #0071e3); transition: width .25s ease; }
.module-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin-top:12px; }
.module-tile { border:1px solid var(--border); border-radius:14px; padding:12px; background:#fff; }
.module-tile h4{ margin:0 0 6px; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; background:#f1f5f9; font-size:12px; margin-right:6px; }
.preview-mini { margin-top:8px; border-radius:10px; padding:10px; background:linear-gradient(130deg,#f8fbff,#fff0f8); border:1px dashed #c8d8ef; font-size:12px; color:#425466; }
.module-tile{cursor:pointer}
.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:1000}
.modal.hidden{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(7,10,20,.55)}
.modal-card{position:relative;background:#fff;max-width:760px;width:92vw;max-height:85vh;overflow:auto;border-radius:16px;padding:16px;border:1px solid var(--border);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.modal-close{position:sticky;top:0;float:right}
@media (max-width: 900px) {
  .stepper { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; }
}