:root{
  --bg:#f6f7fb;
  --bg2:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --line:#e5e7eb;
  --shadow: 0 10px 28px rgba(15,23,42,.08);
  --radius: 18px;

  /* Brand */
  --brand:#C7348B;
  --brandRgb: 199, 52, 139;
  --brandDeep:#8A1E5B;
  --brandSoft: rgba(var(--brandRgb), .10);
  --brandSoft2: rgba(var(--brandRgb), .06);
  --brandBorder: rgba(var(--brandRgb), .35);
  --brandBorderStrong: rgba(var(--brandRgb), .55);
  --focus: rgba(var(--brandRgb), .18);

  /* Status */
  --danger:#b91c1c;
  --warn:#b45309;
  --ok:#15803d;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(var(--brandRgb), .08), transparent 60%),
    radial-gradient(780px 520px at 82% 0%, rgba(var(--brandRgb), .05), transparent 60%),
    linear-gradient(180deg, var(--bg), #f3e7f1 40%, #f8fafc);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
  line-height:1.45;
}

a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 16px 64px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 16px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

.brand{
  display:flex;align-items:center;gap:12px;min-width:0;
}

.logo{
  width:36px;height:36px;border-radius:12px;
  background: linear-gradient(135deg, var(--brand), var(--brandDeep));
  box-shadow: 0 10px 18px rgba(15,23,42,.10);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight: bold;
  font-size: 14px;
  flex:0 0 auto;
}

.brand .titles{min-width:0}
.brand .titles .h{
  font-weight:800;font-size:14px;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand .titles .s{
  font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  border:1px solid var(--line);
  background: rgba(252, 248, 251, 0.9);
  color:var(--muted);
  font-size:12px;
}

.card{
  margin-top: 14px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.card .head{
  padding: 18px 18px 12px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(700px 260px at 18% 0%, var(--brandSoft), transparent 60%),
    rgba(255,255,255,.92);
}

.card .head h1{
  margin:0;
  font-size: 22px;
  letter-spacing: .2px;
}

.card .head p{
  margin: 8px 0 0 0;
  color: var(--muted);
  font-size: 13px;
}

.card .body{padding: 16px 18px 18px}

.stepper{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-top:10px;
}

.step{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:999px;
  border:1px solid var(--line);
  background: rgba(248,250,252,.95);
  font-size:12px;color:var(--muted);
}

.step .dot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(71,85,105,.25);
}

.step.active{
  color:var(--text);
  border-color: var(--brandBorder);
  background: var(--brandSoft2);
}

.step.active .dot{background: var(--brand)}

.step.done{
  color:var(--ok);
  border-color: rgba(21,128,61,.22);
}

.step.done .dot{background: var(--ok)}

.step.invalid{
  color:var(--warn);
  border-color: rgba(180,83,9,.18);
  background: rgba(252,251,248,.95);
}

.step.invalid .dot{background: var(--warn)}

.form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form.one{grid-template-columns: 1fr}

@media (max-width: 860px){
  .form{grid-template-columns: 1fr}
}

.field{
  display:flex;flex-direction:column;gap:6px;
}

.label{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  font-size: 12px;color: var(--text);
  font-weight: 700;
}

.hint{
  font-size: 11px;color: var(--muted);
  font-weight: 500;
}

.help{
  font-size: 12px; color: var(--muted);
}

.err{
  font-size: 12px;
  color: var(--danger);
  display:none;
}

.err.show{display:block}

.warn{
  font-size: 12px;
  color: var(--warn);
  display:none;
}

.warn.show{display:block}

input, select, textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--text);
  padding: 10px 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

textarea{min-height:92px;resize:vertical}

input:focus, select:focus, textarea:focus{
  border-color: var(--brandBorderStrong);
  box-shadow: 0 0 0 4px var(--focus);
}

input[readonly]{background:#f8fafc;color:#0f172a}
input:disabled{background:#f1f5f9;color:#64748b}

.row{
  display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;
}

.choice{
  flex: 1 1 220px;
  border:1px solid var(--line);
  background: rgba(252, 248, 251, 0.9);
  border-radius: 16px;
  padding: 12px;
  cursor:pointer;
  transition: .12s ease;
}

.choice:hover{border-color: var(--brandBorder)}

.choice.active{
  border-color: var(--brandBorderStrong);
  background: var(--brandSoft2);
}

.choice .t{font-weight:800}
.choice .d{color:var(--muted);font-size:12px;margin-top:4px}
.choice .pamts{color:var(--muted);font-size:14px;font-weight:bold;margin-top:4px}

.buttons{
  display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;
  margin-top: 14px;
}

.btn{
  appearance:none;border:none;cursor:pointer;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 800;
  letter-spacing:.2px;
  transition: transform .06s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}

.btn:active{transform: translateY(1px)}

.btn.primary{
  background: linear-gradient(135deg, var(--brand), var(--brandDeep));
  color:#fff;
}

.btn.ghost{
  background: #ffffff;
  color: var(--text);
  border:1px solid var(--line);
}

.btn.link{
  background: transparent;
  color: var(--brand);
  border:1px dashed var(--brandBorder);
}

.btn:disabled{opacity:.5;cursor:not-allowed}

.notice{
  border-radius: 16px;
  padding: 12px;
  border:1px solid var(--line);
  background: rgba(248,250,252,.95);
  color: var(--text);
}

.notice.ok{
  border-color: rgba(21,128,61,.18);
  background: rgba(21,128,61,.06);
}

.notice.warn{
  border-color: rgba(180,83,9,.18);
  background: rgba(180,83,9,.06);
}

.notice.error{
  border-color: rgba(185,28,28,.18);
  background: rgba(185,28,28,.06);
}

.modalBack{
  position:fixed;inset:0;
  background: rgba(15,23,42,.42);
  display:none;
  align-items:center;justify-content:center;
  padding: 18px;
  z-index:50;
}

.modalBack.show{display:flex}

.modal{
  width:min(720px, 100%);
  border-radius: 18px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.modal .mhead{
  padding: 14px 16px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}

.modal .mhead .h{font-weight:900}

.modal .mbody{padding: 14px 16px}

.small{font-size:12px;color:var(--muted)}

.form h4{
  grid-column: 1 / -1;
  margin-top: 4px;
  margin-bottom: 8px;
}

.form.card{
  padding: 16px;
  margin-top: 12px;
  box-shadow: 0 3px 5px rgba(15,23,42,.05);
}

.choice .t::first-letter{text-transform: capitalize}

#main > h2{margin-top: 0}

.err-summary{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(252,251,248,.95);
  border: 1px solid rgba(180,83,9,.18);
  color: var(--warn);
}

.err-summary .err-item{
  cursor: pointer;
  text-decoration: underline;
}

.field label.label{line-height: 22px}


/* ul, ol - smaller left padding on small screen */
ul, ol{padding-left: 10px}
@media (min-width: 600px){
  ul, ol{padding-left: 20px}
}

footer {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 32px;
}

.btn-sm{
  padding: 6px 10px;
  font-size: 12px;
}