@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #f3f6fb;
  --card: #ffffff;
  --line: #dbe3ef;
  --text: #0f172a;
  --muted: #60708a;
  --brand: #2563eb;
  --brand-2: #7c3aed;
  --ok: #0f766e;
  --radius: 20px;
  --shadow: 0 20px 50px rgba(24, 39, 75, 0.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--text); }
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(900px 500px at 0% -10%, #bfdbfe 0, transparent 58%),
    radial-gradient(900px 500px at 100% -10%, #ddd6fe 0, transparent 58%),
    var(--bg);
}

.wizard-wrap { width: min(1220px, 100%); margin: 0 auto; padding: 24px; }
.wizard { display: grid; grid-template-columns: 330px 1fr; gap: 18px; }
@media (max-width: 980px) { .wizard { grid-template-columns: 1fr; } }

.sidebar {
  background: linear-gradient(155deg, #0f172a, #1e293b 55%, #312e81);
  color: #fff;
  border-radius: 24px;
  padding: 24px;
  min-height: 640px;
  position: sticky;
  top: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.sidebar:after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  right: -80px;
  bottom: -80px;
  background: radial-gradient(circle, #60a5fa66 0, #ffffff00 68%);
}

.kicker { display:inline-block; font-size:12px; letter-spacing:.08em; text-transform: uppercase; background:#ffffff1a; border:1px solid #ffffff33; padding:6px 10px; border-radius:999px; }
.side-title { font-size: 28px; line-height: 1.1; margin: 14px 0 8px; font-weight: 800; letter-spacing: -.02em; }
.side-sub { font-size: 14px; color: #cbd5e1; line-height: 1.6; }

.steps { margin-top: 18px; display: grid; gap: 10px; }
.step {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; background: #ffffff12; border:1px solid #ffffff1e;
  font-size: 13px;
}
.step i {
  width: 24px; height: 24px; border-radius: 999px; display:inline-grid; place-items:center;
  background:#ffffff1f; font-style: normal; font-size: 12px; font-weight: 700;
}
.step.active { background: #ffffff26; border-color:#93c5fd66; }

.content {
  background: #ffffffc7;
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 24px;
}

.topbar { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.h1 { margin:0; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height:1.06; letter-spacing:-.03em; font-weight:800; }
.sub { margin-top: 8px; color: var(--muted); font-size: 14px; }
.progress { margin-top:14px; height: 10px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.progress > span { display:block; height:100%; border-radius:999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .35s ease; }

.card-grid { margin-top:20px; display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width: 840px){ .card-grid { grid-template-columns:1fr; } }
.block { background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:14px; }

label { display:block; font-size: 12px; font-weight: 700; letter-spacing:.02em; color:#334155; margin-bottom:6px; }
input, select, textarea { width:100%; border:1px solid #d4ddeb; border-radius:12px; background:white; padding:11px 12px; font: inherit; outline:none; transition:.2s; }
input:focus, select:focus, textarea:focus { border-color:#93c5fd; box-shadow:0 0 0 4px #dbeafe; }

.btn {
  appearance:none; border:0; border-radius:12px; padding:12px 18px; font-weight:700; cursor:pointer;
  background:linear-gradient(135deg,#111827,#334155); color:white; box-shadow: 0 10px 20px #0f172a2e;
}
.btn:hover { transform: translateY(-1px); }

.chips { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
@media (max-width: 840px){ .chips { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.chip input { display:none; }
.chip div { border:1px solid #e2e8f0; border-radius:12px; padding:11px; background:white; font-size:13px; font-weight:600; cursor:pointer; }
.chip input:checked + div { border-color:#1d4ed8; background:#eff6ff; color:#1e3a8a; }

.table { width:100%; border-collapse:collapse; margin-top:6px; }
.table th, .table td { padding:10px 8px; border-bottom:1px solid #edf2f7; text-align:left; font-size:13px; }
.table th { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#64748b; }

.fade-up { animation: fadeUp .38s ease both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(10px);} to { opacity:1; transform:translateY(0);} }