/* БАЗА */
:root{
  --brand:#134587;
  --brand-700:#0f3466;
  --text:#0b1220;
  --muted:#5b6575;
  --card:#ffffff;
  --shadow:0 10px 30px rgba(16,29,53,.12);
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  margin:0;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 15% -10%, #e6efff 0%, transparent 60%),
    radial-gradient(800px 600px at 110% 10%, #f0f7ff 0%, transparent 60%),
    linear-gradient(180deg, #f9fbff 0%, #f4f6fb 100%);
}

/* ЛОГО */
.logo-container{ text-align:center; padding:20px 16px 8px }
.logo{ max-width: 180px; height:auto; filter: drop-shadow(0 6px 20px rgba(19,69,135,.2)) }
@media (max-width:560px){
  .logo{ max-width: 150px }
}

/* КАРТОЧКА ФОРМЫ */
.survey-form{
  max-width: 860px;
  margin: 10px auto 40px;
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 24px 22px;
}
h1{
  text-align:center;
  color:var(--brand);
  margin:4px 0 8px;
  font-weight:800;
  letter-spacing:-.01em;
  font-size: 28px;
}
h2{
  margin: 14px 0 12px;
  color: var(--brand-700);
  font-size: 18px;
}
label{
  display:block; font-weight:600; margin: 10px 0 8px;
}
section{
  background:#fff;
  border:1px solid #e9eef8;
  border-radius: 16px;
  padding: 16px;
  margin-top: 16px;
}

/* ВВОДЫ */
.text-input, textarea{
  width:100%;
  padding: 12px 14px;
  border:1px solid #dfe4ee;
  border-radius: 10px;
  font: inherit;
  line-height:1.4;
  transition: box-shadow .15s ease, border-color .15s ease;
  background:#fff;
}
.text-input::placeholder, textarea::placeholder{ color:#9aa4b6 }
.text-input:focus, textarea:focus{
  outline:none; border-color:#cdd9f0; box-shadow:0 0 0 4px rgba(19,69,135,.08);
}
textarea{ min-height: 96px; resize: vertical }

/* СЛАЙДЕРЫ — корректная заливка трека без «двойной» полосы */
.slider{
  width:100%;
  appearance:none;
  height:36px;
  background: transparent; /* важно: без фона на input */
  --fill: 0%;               /* будет задаваться из JS */
}
/* Chrome/Safari/Edge */
.slider::-webkit-slider-runnable-track{
  height:10px; border-radius:999px;
  background:
    linear-gradient(var(--brand) 0 0) 0 / var(--fill) 100% no-repeat,
    #dfe8fb;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px; border-radius:50%;
  background:var(--brand);
  border:3px solid #fff;
  box-shadow:0 4px 12px rgba(19,69,135,.25);
  margin-top:-8px; /* выравниваем по центру трека (26/2 - 10/2 = 8) */
}

/* Firefox */
.slider::-moz-range-track{
  height:10px; border-radius:999px; background:#dfe8fb;
}
.slider::-moz-range-progress{
  height:10px; border-radius:999px; background:var(--brand);
}
.slider::-moz-range-thumb{
  width:26px; height:26px; border:0; border-radius:50%;
  background:var(--brand); box-shadow:0 4px 12px rgba(19,69,135,.25);
}

/* КНОПКА */
.submit-container{ text-align:center; margin-top: 20px }
.submit-btn{
  appearance:none; border:0; cursor:pointer;
  background:var(--brand); color:#fff; font-weight:700;
  padding: 14px 24px; border-radius: 999px; box-shadow: 0 12px 28px rgba(19,69,135,.28);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
  font-size: 16px;
}
.submit-btn:hover{ transform: translateY(-1px); box-shadow: 0 16px 32px rgba(19,69,135,.32) }
.submit-btn:active{ transform: translateY(0) }

/* МОБИЛЬНАЯ ТИПОГРАФИКА */
@media (max-width:560px){
  .survey-form{ padding: 18px 14px; margin: 8px 10px 28px; border-radius:16px }
  h1{ font-size: 22px }
  h2{ font-size: 16px }
  label{ font-size: 14px }
  .text-input, textarea{ font-size: 15px }
  .slider{ height: 40px }
  .submit-btn{ font-size: 15px; padding: 12px 20px }
}