:root {
  --bg:#f7f9fc; --ink:#0c1426; --muted:#5b6b85; --line:#dde4ef;
  --accent:#2e6cf0; --accent-2:#7e51f5; --ok:#10a07a; --warn:#c98a16; --err:#d2453a;
  --panel:#fff;
}
*,*::before,*::after { box-sizing:border-box }
html,body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:14px 24px; background:var(--panel); border-bottom:1px solid var(--line) }
.brand { display:flex; align-items:center; gap:12px }
.ring { width:28px; height:28px; border-radius:50%; background:conic-gradient(from 200deg,var(--accent),var(--accent-2),var(--accent)); box-shadow:inset 0 0 0 6px var(--panel) }
.brand-name { font-weight:700; letter-spacing:.2px }
.brand-sub { font-size:12px; color:var(--muted) }
.meta { font-size:12px; color:var(--muted) }

main { display:grid; grid-template-columns:240px 1fr; gap:32px; max-width:1100px; margin:32px auto; padding:0 24px }
.progress ol { list-style:none; padding:0; margin:0 }
.progress li { padding:9px 12px; border-left:2px solid var(--line); color:var(--muted); font-size:14px; cursor:pointer }
.progress li.active { color:var(--accent); border-left-color:var(--accent); font-weight:600; background:#eef3ff }
.progress li.done { color:var(--ok) }
.progress li.done::before { content:"✓ "; color:var(--ok) }

.form-area { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:28px 32px; min-height:480px }
h2 { font-size:22px; margin:0 0 4px }
h3 { font-size:14px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-top:24px }
.hint { color:var(--muted); font-size:13px; margin-top:4px }

.grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; margin-top:18px }
.grid label.span2 { grid-column: span 2 }
label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink) }
label.full { grid-column: span 2 }
input, select, textarea { padding:10px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; background:#fff; color:var(--ink) }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(46,108,240,.15) }
fieldset { border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-top:18px }
legend { padding:0 6px; font-size:13px; color:var(--muted) }
.radio { flex-direction:row; align-items:center; gap:8px }
.checkbox { flex-direction:row; align-items:flex-start; gap:8px; font-size:14px }
.conditional { display:none }
.conditional.visible { display:grid }

.bottombar { position:sticky; bottom:0; background:var(--panel); border-top:1px solid var(--line); padding:14px 24px; display:flex; justify-content:space-between; align-items:center }
.autosave { font-size:12px; color:var(--muted) }
button { font:inherit; padding:10px 18px; border-radius:10px; border:1px solid var(--line); cursor:pointer; background:#fff }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600 }
button.ghost { background:transparent; color:var(--accent); border-color:var(--accent) }
.review { background:#0c1426; color:#cfe1ff; padding:14px; border-radius:10px; max-height:360px; overflow:auto; font-size:12px }
.rows .row-card { border:1px solid var(--line); border-radius:10px; padding:12px; margin-top:10px }
@media (max-width: 800px) {
  main { grid-template-columns: 1fr; padding:0 12px }
  .progress ol { display:flex; overflow:auto; gap:6px }
  .progress li { border-left:0; border-bottom:2px solid var(--line); padding:6px 10px; white-space:nowrap }
  .grid { grid-template-columns: 1fr }
  .grid label.span2 { grid-column: span 1 }
  label.full { grid-column: span 1 }
}