:root{
  --navy:#0b1b3b; --navy-600:#1e3a8a; --navy-400:#3b82f6; --cyan:#06b6d4;
  --bg:#f5f6fa; --card:#ffffff; --border:#e5e7eb; --text:#0f172a;
}
.clara-wrap.navy{ max-width: 1000px; margin:26px auto; padding:0 16px; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--text); }
h2.title{ font-size:24px; margin:8px 0 14px; }
.progress{ display:flex; align-items:center; gap:8px; margin: 8px 0 14px; }
.progress .step{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#e2e8f0; color:#334155; font-weight:800; }
.progress .step.active{ background:var(--navy-400); color:#fff; }
.progress .step.done{ background:var(--navy-600); color:#fff; }
.progress .bar{ flex:1; height:4px; background:#e2e8f0; border-radius:999px; }
.chips{ margin:10px 0 14px; }
.chip{ display:inline-block; padding:8px 12px; border-radius:999px; border:1px solid var(--border); margin-right:8px; background:#fff; cursor:pointer; transition:.15s ease; }
.chip:hover{ background:#eef2ff; border-color:var(--navy-400); }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field.full{ grid-column:1/-1; }
.field input, .field select, .field textarea{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:#fff; outline:none; transition:.15s ease; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--navy-400); box-shadow:0 0 0 3px #e0e7ff; }
.actions{ margin-top:14px; }
.actions.split{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:12px; border:1px solid transparent; cursor:pointer; font-weight:700; text-decoration:none; transition:.15s ease; }
.btn.primary{ background:var(--navy-600); color:#fff; }
.btn.primary:hover{ background:#172554; }
.btn.secondary{ background:var(--cyan); color:#fff; }
.btn.ghost{ background:#fff; color:var(--text); border:1px solid var(--border); }
.muted{ opacity:.8; }
.step{ display:none; } .step.active{ display:block; }
.card-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.type-card{ display:block; cursor:pointer; background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 8px 20px rgba(11,27,59,.06); transition:.15s ease; padding:12px; }
.type-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(11,27,59,.10); border-color: var(--navy-400); }
.type-card input{ display:none; }
.type-title{ font-weight:800; color:var(--navy-600); margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.type-desc{ font-size:14px; min-height:38px; }
.type-example{ margin-top:6px; font-size:13px; background:#f1f5f9; padding:8px; border-radius:10px; }
.type-card.selected{ border-color: var(--navy-600); box-shadow: 0 12px 28px rgba(11,27,59,.15); }
.toolbar.hint{ display:flex; align-items:center; gap:12px; background:#eef2ff; border:1px solid #c7d2fe; border-radius:12px; padding:10px 12px; }
.toolbar .spacer{ flex:1; }
.cards{ display:flex; flex-direction:column; gap:14px; margin-top:14px; }
.card{ background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 8px 20px rgba(11,27,59,.06); }
.card .head{ display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--border); padding:10px 12px; background:linear-gradient(180deg,#fff,#f8fafc); }
.card .drag{ cursor:grab; user-select:none; color:var(--navy-600); font-weight:900; padding:0 6px; }
.card .wysi button{ border:1px solid var(--border); background:#fff; border-radius:8px; padding:6px 10px; cursor:pointer; margin-right:4px; }
.card .wysi input[type=color]{ width:36px; height:32px; border:1px solid var(--border); border-radius:8px; margin-right:6px; }
.card .type{ margin-left:auto; padding:8px 10px; border:1px solid var(--border); border-radius:10px; }
.card .actions button{ border:1px solid var(--border); background:#fff; border-radius:8px; padding:6px 10px; cursor:pointer; margin-left:4px; }
.card .body{ padding:12px 14px; }
.ce{ min-height:38px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; }
.ce:focus{ outline:none; border-color:var(--navy-400); box-shadow:0 0 0 3px #e0e7ff; }
.title-row{ margin-bottom:8px; }
.opts{ margin-top:10px; }
.opt{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.opt input[type=text]{ flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:10px; }
.opt .opt-del{ border:1px solid var(--border); background:#fff; border-radius:10px; padding:8px 12px; cursor:pointer; }
.opt-add{ border:1px solid var(--navy-400); color:var(--navy-600); background:#fff; border-radius:10px; padding:8px 12px; cursor:pointer; }
.opt-add:hover{ background:#eef2ff; }
.foot{ display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border); padding:10px 12px; border-bottom-left-radius:14px; border-bottom-right-radius:14px; }
.loader{ display:flex; align-items:center; gap:10px; margin:10px 0; }
.spinner{ width:18px; height:18px; border:3px solid var(--border); border-top-color:var(--navy-600); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }