/* ДОРОЖЕ — кастомные стили поверх Tailwind */
:root {
  --primary: #1E40AF;
  --accent: #F97316;
  --success: #10B981;
}
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { background: #FAFAFA; }

.metric-num { font-family: 'Manrope', 'Inter', sans-serif; font-weight: 900; letter-spacing: -0.02em; }

/* Кнопки */
.btn { @apply inline-flex items-center justify-center gap-2 font-semibold rounded-btn transition-all duration-200; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #EA580C; transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(249,115,22,.5); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: #1D4ED8; }
.btn-ghost { background: transparent; color: var(--primary); border: 1px solid #E2E8F0; }
.btn-ghost:hover { background: #F8FAFC; }

/* Карточки */
.card { background: #fff; border: 1px solid #EEF2F7; border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: all .25s; }
.card-hover:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 18px 40px -16px rgba(15,23,42,.2); }

/* Анимации появления */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp .5s ease both; }
.stagger > * { animation: fadeUp .5s ease both; }
.stagger > *:nth-child(1) { animation-delay: .05s; }
.stagger > *:nth-child(2) { animation-delay: .12s; }
.stagger > *:nth-child(3) { animation-delay: .19s; }
.stagger > *:nth-child(4) { animation-delay: .26s; }
.stagger > *:nth-child(5) { animation-delay: .33s; }
.stagger > *:nth-child(6) { animation-delay: .40s; }

@keyframes pulseUp { 0% { transform: scale(1); } 50% { transform: scale(1.15); color: #10B981; } 100% { transform: scale(1); } }
.pulse-up { animation: pulseUp .6s ease; }

/* Поля ввода */
.input { @apply w-full px-3.5 py-2.5 rounded-btn border border-slate-200 text-ink bg-white outline-none transition; }
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(30,64,175,.12); }
.label { @apply block text-sm font-semibold text-slate-700 mb-1.5; }

/* Прогресс-бар */
.progress-track { background: #E2E8F0; border-radius: 99px; overflow: hidden; }
.progress-fill { background: linear-gradient(90deg, #1E40AF, #2563EB); height: 100%; transition: width .4s ease; }

/* Toast */
.toast { @apply px-4 py-3 rounded-btn shadow-lg text-sm font-medium text-white; animation: fadeUp .3s ease; }

/* Wizard nav active */
.wiz-step.active { background: #EFF6FF; color: var(--primary); font-weight: 700; }
.wiz-step.done { color: var(--success); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 8px; }

/* Gauge */
.gauge-wrap { position: relative; display: inline-flex; }

/* Tier card highlight */
.tier-pro { border: 2px solid var(--accent); position: relative; }
.tier-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; padding: 2px 14px; border-radius: 99px; font-size: 12px; font-weight: 700; }

.hidden-imp { display: none !important; }
.fmt-num { font-variant-numeric: tabular-nums; }

/* Separate visual identities for the main service and the broker marketplace. */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.04fr) minmax(440px,.96fr); background: #fff; }
.auth-story { position: relative; isolation: isolate; display: flex; min-height: 100vh; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(34px,5vw,72px); color: #fff; background: linear-gradient(145deg,#08152c,#152951 64%,#382071); }
.auth-story::after { position: absolute; z-index: -1; inset: 0; content: ''; background: radial-gradient(circle at 80% 10%,rgba(183,108,255,.34),transparent 34%); }
.auth-page--broker .auth-story { background: #09162f url('/static/broker-login-city.webp') center/cover no-repeat; }
.auth-page--broker .auth-story::after { background: linear-gradient(90deg,rgba(5,14,33,.96),rgba(13,27,59,.79) 55%,rgba(50,24,102,.58)); }
.auth-brand,.auth-mobile-brand { display: inline-flex; width: min(100%,270px); }
.auth-brand img,.auth-mobile-brand img { display: block; width: 100%; height: auto; }
.auth-page--service .auth-brand { padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.96); }
.auth-story__content { max-width: 720px; }
.auth-eyebrow { color: #c9ff4a; font-size: 12px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.auth-story h2 { max-width: 680px; margin: 18px 0 0; font-family: 'Manrope','Inter',sans-serif; font-size: clamp(40px,4.3vw,68px); font-weight: 850; line-height: 1.02; letter-spacing: -.045em; }
.auth-story__content > p { max-width: 660px; margin: 24px 0 0; color: #cbd5e6; font-size: 19px; line-height: 1.55; }
.auth-story ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; max-width: 720px; margin: 30px 0 0; padding: 0; list-style: none; }
.auth-story li { padding: 14px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; background: rgba(255,255,255,.08); font-size: 14px; font-weight: 700; backdrop-filter: blur(10px); }
.auth-story li::before { margin-right: 8px; color: #c9ff4a; content: '✓'; }
.auth-story__note { margin: 0; color: #91a0ba; font-size: 13px; }
.auth-form-panel { display: grid; min-height: 100vh; place-items: center; padding: 40px 28px; background: linear-gradient(180deg,#fff,#f8f9fc); }
.auth-form-card { width: min(100%,470px); }
.auth-mobile-brand { display: none; margin-bottom: 30px; }
.auth-mobile-brand img { filter: none !important; }
.auth-switch { display: block; margin-top: 28px; padding-top: 22px; border-top: 1px solid #e1e6ef; color: #6244c8; text-align: center; font-size: 13px; font-weight: 750; }
@media (max-width: 900px) { .auth-page { grid-template-columns: 1fr; } .auth-story { display: none; } .auth-mobile-brand { display: inline-flex; } .auth-form-panel { min-height: 100vh; } .auth-page--broker .auth-mobile-brand { padding: 10px; border-radius: 10px; background: #111d3b; } }


/* Questionnaire workspace v2 */
.questionnaire-page {
  --q-ink: #101a36;
  --q-muted: #60708b;
  --q-line: #c8d1df;
  --q-line-strong: #8c9ab0;
  --q-focus: #5267f8;
  --q-surface: #f5f7fb;
  --q-card: #ffffff;
  color: var(--q-ink);
}

.questionnaire-heading {
  display: block;
  max-width: 820px;
  scroll-margin-top: 5.5rem;
}
.questionnaire-heading .questionnaire-eyebrow {
  display: inline-flex;
  margin-bottom: .65rem;
  color: #9ce52e;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.questionnaire-heading h1 {
  display: block !important;
  margin: 0 !important;
  color: #fff !important;
  line-height: 1.1;
  opacity: 1 !important;
  visibility: visible !important;
}
.questionnaire-heading p {
  margin-top: .65rem;
  color: #aab6ca;
  font-size: .95rem;
  line-height: 1.6;
}

.questionnaire-progress,
.questionnaire-nav,
.questionnaire-form,
.questionnaire-aside .card {
  border: 1px solid rgba(209, 218, 231, .95);
  box-shadow: 0 18px 45px rgba(7, 18, 44, .12);
}
.questionnaire-progress { background: rgba(255,255,255,.97) !important; }
.questionnaire-progress span:first-child { color: var(--q-ink) !important; }

.questionnaire-nav {
  background: #f8fafc !important;
  padding: .75rem !important;
}
.questionnaire-nav-title {
  padding: .35rem .7rem .65rem;
  color: #738097;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.questionnaire-nav .wiz-step {
  width: 100%;
  min-height: 44px;
  color: #4a5870 !important;
}
.questionnaire-nav .wiz-step:hover { background: #eef2f8; color: var(--q-ink) !important; }
.questionnaire-nav .wiz-step.active {
  background: #e9edff !important;
  color: #3149bd !important;
  box-shadow: inset 3px 0 0 #5267f8;
}
.questionnaire-nav .wiz-step.done { color: #277453 !important; }

.questionnaire-form {
  min-height: 640px;
  background: var(--q-surface) !important;
  padding: clamp(1.25rem, 3vw, 2rem) !important;
}
.questionnaire-section-head {
  margin: -.15rem -.15rem 1.65rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #dce3ed;
}
.questionnaire-section-head > span {
  color: #5267f8;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.questionnaire-section-head h2 {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: .45rem;
  color: var(--q-ink);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 800;
}
.questionnaire-section-head h2 i { color: #5267f8; font-size: 1rem; }
.questionnaire-section-head p {
  margin-top: .4rem;
  color: var(--q-muted);
  font-size: .86rem;
}

.questionnaire-field {
  padding: 1rem;
  border: 1px solid #e0e6ef;
  border-radius: 14px;
  background: var(--q-card);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.questionnaire-field:focus-within {
  border-color: rgba(82,103,248,.7);
  box-shadow: 0 0 0 4px rgba(82,103,248,.1), 0 10px 26px rgba(30,51,112,.08);
  transform: translateY(-1px);
}
.questionnaire-page .label {
  display: block;
  margin-bottom: .5rem;
  color: #24324a !important;
  font-size: .84rem;
  font-weight: 750;
  letter-spacing: .005em;
}
.questionnaire-hint {
  display: block;
  margin: -.2rem 0 .6rem;
  color: #758299;
  font-size: .74rem;
  line-height: 1.45;
}
.questionnaire-hint i { color: #8798b3; margin-right: .25rem; }

.questionnaire-page .input {
  width: 100%;
  min-height: 48px;
  padding: .72rem .85rem !important;
  border: 1.5px solid var(--q-line) !important;
  border-radius: 10px !important;
  outline: none !important;
  background-color: #fff !important;
  color: var(--q-ink) !important;
  font-size: .94rem !important;
  font-weight: 500;
  opacity: 1 !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.03);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.questionnaire-page textarea.input { min-height: 112px; resize: vertical; }
.questionnaire-page .input:hover { border-color: var(--q-line-strong) !important; }
.questionnaire-page .input:focus {
  border-color: var(--q-focus) !important;
  box-shadow: 0 0 0 3px rgba(82,103,248,.16) !important;
}
.questionnaire-page .input::placeholder { color: #8b97aa !important; opacity: 1 !important; }
.questionnaire-page .input:disabled {
  background: #eef1f6 !important;
  color: #69758a !important;
  cursor: not-allowed;
}
.questionnaire-page select.input {
  cursor: pointer;
  color-scheme: light;
}
.questionnaire-page select.input:invalid,
.questionnaire-page select.input option[value=""] { color: #7b879b !important; }

.questionnaire-page .ms-chip {
  min-height: 38px;
  background: #fff;
  color: #46546b;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.questionnaire-page .ms-chip:hover { transform: translateY(-1px); border-color: #5267f8; }
.questionnaire-page .toggle { flex: 0 0 auto; }
.questionnaire-check {
  border-color: #d6deea !important;
  background: #fff;
  color: var(--q-ink);
}
.questionnaire-check:hover { border-color: #5267f8 !important; background: #f8f9ff !important; }
.questionnaire-page input[type="checkbox"] { accent-color: #5267f8; width: 18px; height: 18px; }
.questionnaire-page input[type="range"] { accent-color: #9ce52e; }

.monthly-detail-status {
  margin-top: .75rem;
  color: #68768d;
  font-size: .76rem;
  line-height: 1.45;
}
.monthly-detail-status.is-partial {
  padding: .65rem .75rem;
  border: 1px solid #f1bd77;
  border-radius: 9px;
  background: #fff7e8;
  color: #945516;
}
.monthly-detail-status.is-complete {
  color: #267253;
  font-weight: 650;
}

.questionnaire-aside .card { background: #fff; }
.questionnaire-aside .card:first-child {
  border-color: rgba(99,102,241,.55);
  background: linear-gradient(145deg,#334bc9,#5569ea) !important;
}
.questionnaire-actions {
  position: sticky;
  bottom: 0;
  z-index: 15;
  padding: .9rem;
  border: 1px solid rgba(210,219,232,.95);
  border-radius: 16px;
  background: rgba(248,250,252,.92);
  box-shadow: 0 -12px 30px rgba(7,18,44,.11);
  backdrop-filter: blur(14px);
}

@media (max-width: 1023px) {
  .questionnaire-layout { display: flex !important; flex-direction: column; }
  .questionnaire-form { order: 2 !important; min-height: auto; }
  .questionnaire-nav { order: 1 !important; overflow: hidden; }
  .questionnaire-aside { order: 3 !important; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .questionnaire-aside > :last-child { grid-column: 1 / -1; }
  .questionnaire-nav-title { display: none; }
  #wiz-nav { display: flex !important; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
  #wiz-nav .wiz-step { width: auto; min-width: 46px; justify-content: center; box-shadow: none; }
}
@media (max-width: 640px) {
  .questionnaire-page { margin: -.25rem; }
  .questionnaire-heading h1 { font-size: 1.7rem !important; }
  .questionnaire-progress { padding: .85rem !important; }
  .questionnaire-form { padding: 1rem !important; border-radius: 16px !important; }
  .questionnaire-field { padding: .85rem; }
  .questionnaire-aside { grid-template-columns: 1fr; }
  .questionnaire-aside > :last-child { grid-column: auto; }
  .questionnaire-actions { gap: .45rem; padding: .65rem; }
  .questionnaire-actions .btn { padding: .7rem .8rem !important; font-size: .78rem; }
  #btn-save-exit { max-width: 112px; line-height: 1.15; }
}
@media (prefers-reduced-motion: reduce) {
  .questionnaire-page *, .questionnaire-page *::before, .questionnaire-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}