:root {
  --ink: #0A0F1E; --ink-2: #3D4663; --ink-3: #4F5B6E; --ink-4: #9BA5B4;
  --surface: #F4F6FB; --white: #FFFFFF;
  --accent: #1A3FAD; --accent-dark: #15328A; --accent-glow: rgba(26,63,173,0.16);
  --green: #12A150; --red: #D92D20; --red-bg: rgba(217,45,32,0.05);
  --border: rgba(10,15,30,0.09); --border-focus: rgba(26,63,173,0.45);
  --r: 12px; --r-lg: 20px; --r-xl: 28px;
  --ease: cubic-bezier(0.4,0,0.2,1); --t: 160ms;
  --shadow: 0 0 0 1px rgba(10,15,30,0.055), 0 4px 8px rgba(10,15,30,0.04), 0 20px 56px rgba(10,15,30,0.11);
  --shadow-btn: 0 1px 3px rgba(10,15,30,0.15), 0 6px 20px rgba(26,63,173,0.38);
  --fd: 'DM Sans', sans-serif; --fb: 'Instrument Sans', sans-serif;
}

.sb-form-wrap, .sb-form-wrap * { box-sizing: border-box; }
.sb-form-wrap, .sb-form-wrap input, .sb-form-wrap button,
.sb-form-wrap label, .sb-form-wrap span {
  font-family: var(--fb) !important;
  -webkit-font-smoothing: antialiased;
}
.sb-form-title, .sb-badge-free, .sb-slider-label, .sb-slider-value,
.sb-monthly-value, .sb-submit-btn, .sb-slider-input {
  font-family: var(--fd) !important;
}

.sb-form-wrap {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  max-width: 520px;
  margin: 0 auto;
  color: var(--ink);
  animation: sb-up 0.45s var(--ease) both;
}

@keyframes sb-up { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

/* Accent top bar */
.sb-form-wrap::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 35%, #4B7BF5 65%, transparent);
  z-index: 2;
}

/* ── Header ── */
.sb-form-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 28px 0;
}
.sb-form-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.sb-badge-free {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--green); background: rgba(18,161,80,.1);
  border-radius: 100px; padding: 3px 10px;
}

/* ── Body ── */
.sb-form-body { padding: 16px 28px 36px; }

/* ── Sliders ── */
.sb-slider-block { padding: 14px 0; border-bottom: 1px solid var(--border); }
.sb-slider-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; min-height: 30px;
}
.sb-slider-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.sb-slider-value-wrap {
  position: relative; display: flex; align-items: center; gap: 3px;
  cursor: text; height: 30px;
}
.sb-slider-value {
  font-size: 22px; font-weight: 800;
  color: var(--ink); letter-spacing: -.04em; line-height: 1;
  border-bottom: 1.5px dashed var(--ink-4); padding-bottom: 1px;
  white-space: nowrap; transition: border-color var(--t), color var(--t);
}
.sb-slider-value em { font-style:normal; font-size:12px; font-weight:600; color:var(--ink-3); margin-left:2px; }
.sb-slider-value-wrap:hover .sb-slider-value { border-bottom-color: var(--accent); color: var(--accent); }
.sb-slider-input {
  position:absolute; top:0; right:0; width:100%; height:100%;
  font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-.04em;
  background:transparent; border:none; border-bottom:2px solid var(--accent);
  outline:none; padding:0; line-height:1; text-align:right; opacity:0; pointer-events:none;
  -moz-appearance:textfield;
}
.sb-slider-input::-webkit-outer-spin-button,
.sb-slider-input::-webkit-inner-spin-button { -webkit-appearance:none; }
.sb-slider-unit { display:none; font-style:normal; font-size:12px; font-weight:600; color:var(--ink-3); }
.sb-slider-value-wrap.is-editing .sb-slider-value { opacity:0; }
.sb-slider-value-wrap.is-editing .sb-slider-input { opacity:1; pointer-events:auto; }
.sb-slider-value-wrap.is-editing .sb-slider-unit { display:block; }
.sb-slider-limits {
  display:flex; justify-content:space-between;
  margin-top:10px; font-size:10.5px; font-weight:500; color:var(--ink-4);
}

/* noUiSlider */
.noUi-target { background:var(--surface); border:none; box-shadow:none; border-radius:99px; height:4px; }
.noUi-connect { background:linear-gradient(90deg, var(--accent), #4B7BF5); border-radius:99px; }
.noUi-horizontal .noUi-handle {
  width:24px !important; height:24px !important; top:-10px !important; right:-12px !important;
  border-radius:50%; background:linear-gradient(145deg,#fff,#f0f4ff);
  border:2.5px solid var(--accent) !important;
  box-shadow:0 0 0 4px var(--accent-glow), 0 2px 8px rgba(26,63,173,.25) !important;
  cursor:grab; transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.noUi-handle:active { cursor:grabbing; transform:scale(1.2) !important; box-shadow:0 0 0 8px var(--accent-glow) !important; }
.noUi-handle::before,.noUi-handle::after { display:none; }
@media (hover:none) and (pointer:coarse) {
  .noUi-horizontal .noUi-handle { width:36px !important; height:36px !important; top:-16px !important; right:-18px !important; }
  .noUi-target { height:6px; }
}

/* ── Monthly row ── */
.sb-monthly-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0 20px; border-bottom:1px solid var(--border);
}
.sb-monthly-label { font-size:13px; font-weight:500; color:var(--ink-2); }
.sb-monthly-value {
  font-size:32px; font-weight:800;
  color:var(--accent); letter-spacing:-.05em; line-height:1;
}
.sb-monthly-value em { font-style:normal; font-size:16px; font-weight:600; color:var(--accent); opacity:.7; margin-left:3px; }

/* ── Fields ── */
.sb-fields-section { padding-top:18px; display:flex; flex-direction:column; gap:10px; }
.sb-field { position:relative; }
.sb-input-wrap { position:relative; display:flex; align-items:center; }
.sb-input-wrap input {
  width:100%; height:50px; padding:0 46px 0 15px;
  border:1.5px solid var(--border); border-radius:var(--r);
  font-size:16px; font-weight:500; color:var(--ink); background:var(--white);
  outline:none; -webkit-appearance:none;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.sb-input-wrap input::placeholder { color:var(--ink-4); font-weight:400; }
.sb-input-wrap input:focus { border-color:var(--border-focus); box-shadow:0 0 0 4px var(--accent-glow); }
.sb-icon-right {
  position:absolute; right:0; top:0; bottom:0; width:44px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-4); pointer-events:none;
}
.sb-icon-right svg { display:block; width:16px; height:16px; }
.sb-field.is-valid .sb-input-wrap input { border-color:rgba(18,161,80,.35); }
.sb-field.is-valid .sb-icon-right { color:var(--green); }
.sb-field.is-error .sb-input-wrap input { border-color:rgba(217,45,32,.4); background:var(--red-bg); box-shadow:0 0 0 3px rgba(217,45,32,.08); }
.sb-field.is-error .sb-icon-right { color:var(--red); }
.sb-field-msg { font-size:11.5px; font-weight:500; color:var(--red); margin-top:5px; display:none; padding-left:2px; }
.sb-field.is-error .sb-field-msg { display:block; }
.sb-spin { animation:sb-rotate .75s linear infinite; transform-origin:center; }
@keyframes sb-rotate { to { transform:rotate(360deg); } }

/* Checkbox */
.sb-checkbox-label { display:flex; align-items:flex-start; gap:10px; cursor:pointer; user-select:none; }
.sb-checkbox-label input[type=checkbox] { position:absolute; opacity:0; width:0; height:0; }
.sb-checkbox-box {
  flex-shrink:0; width:19px; height:19px; border:1.5px solid var(--ink-4);
  border-radius:5px; background:var(--white); display:flex; align-items:center; justify-content:center;
  margin-top:1px; transition:all var(--t) var(--ease);
}
.sb-checkbox-label input:checked ~ .sb-checkbox-box { background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.sb-checkbox-label input:checked ~ .sb-checkbox-box::after { content:''; display:block; width:4px; height:8px; border:2px solid #fff; border-top:none; border-left:none; transform:rotate(45deg) translate(-1px,-1px); }
.sb-checkbox-text { font-size:12px; line-height:1.6; color:#4A5568; }
.sb-field.is-error .sb-checkbox-box { border-color:var(--red); }

/* Example */
.sb-example { font-size:11px; line-height:1.7; color:#4A5568; background:#EEF1FA; border-radius:var(--r); padding:11px 14px; }

/* ── Submit button ── */
.sb-submit-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:58px; margin-top:18px;
  font-size:17px; font-weight:800; letter-spacing:.01em;
  color:#fff; background:var(--accent); border:none; border-radius:var(--r);
  cursor:pointer; position:relative; overflow:hidden;
  box-shadow:var(--shadow-btn);
  transition:background var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.sb-submit-btn::before { content:''; position:absolute; inset:0; background:linear-gradient(160deg,rgba(255,255,255,.13) 0%,transparent 55%); pointer-events:none; }
.sb-submit-btn::after { content:''; position:absolute; inset:0; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%); transform:translateX(-120%); transition:transform .6s var(--ease); }
.sb-submit-btn:hover::after { transform:translateX(120%); }
.sb-submit-btn:hover { background:var(--accent-dark); transform:translateY(-2px); box-shadow:0 2px 6px rgba(10,15,30,.12),0 10px 30px rgba(26,63,173,.5); }
.sb-submit-btn:active { transform:translateY(0); }
.sb-submit-btn:disabled { opacity:1; cursor:not-allowed; background:var(--accent-dark); transform:none !important; box-shadow:0 1px 3px rgba(10,15,30,.15),0 4px 12px rgba(26,63,173,.25) !important; }
.sb-btn-arrow { transition:transform var(--t) var(--ease); display:inline-block; }
.sb-submit-btn:hover .sb-btn-arrow { transform:translateX(4px); }

/* ── Spinner ── */
.sb-btn-spinner {
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; flex-shrink:0;
}
.sb-btn-spinner::after {
  content:''; display:block; width:18px; height:18px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.2);
  border-top-color:#fff; border-right-color:rgba(255,255,255,.6);
  animation:sb-spin .7s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes sb-spin { to { transform:rotate(360deg); } }
.sb-loading-status { font-size:14px; font-weight:600; letter-spacing:.01em; color:rgba(255,255,255,.92); transition:opacity .25s ease; }

/* ── Trust strip ── */
.sb-trust-strip { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:14px; }
.sb-trust-item { font-size:11px; font-weight:600; color:#4F5B6E; }
.sb-trust-sep { width:3px; height:3px; border-radius:50%; background:var(--ink-4); }

/* ── Error ── */
.sb-form-error { padding:11px 14px; background:var(--red-bg); border:1px solid rgba(217,45,32,.18); border-radius:var(--r); font-size:13px; font-weight:500; color:var(--red); margin-top:10px; }

/* ── Mobile ── */
@media (max-width:480px) {
  .sb-form-header { padding:20px 20px 0; }
  .sb-form-body { padding:14px 20px 24px; }
  .sb-form-wrap { border-radius:var(--r-lg); }
  .sb-monthly-value { font-size:28px; font-weight:800; }
  .sb-submit-btn { font-size:16px; font-weight:800; height:56px; }
  .sb-slider-value { font-size:20px; font-weight:800; }
}

@supports (-webkit-touch-callout:none) {
  .sb-input-wrap input { font-size:16px; }
}