:root{
  --alx-card:#ffffff;
  --alx-card-2:#fafafa;
  --alx-text:#0f172a;
  --alx-sub:#475569;
  --alx-accent:#2376ba;
  --alx-accent-2:#1d6094;
  --alx-border:#e2e8f0;
  --alx-shadow:0 8px 24px rgba(2,6,23,.08);
}

.alx-quiz{
  color:var(--alx-text);
  background:linear-gradient(180deg, var(--alx-card), var(--alx-card-2));
  border:1px solid var(--alx-border);
  border-radius:16px;
  padding:22px;
  max-width:820px;
  margin:24px auto;
  box-shadow:var(--alx-shadow);
  position:relative;
  overflow:hidden;
}

.alx-quiz__title{ margin:0 0 6px; font-size:24px; line-height:1.2; }
.alx-quiz__desc{ margin:0 0 12px; color:var(--alx-sub); }

.alx-progress{
  position:relative; height:8px;
  background:#f1f5f9; border:1px solid var(--alx-border);
  border-radius:999px; overflow:hidden; margin:10px 0 16px;
}
.alx-progress__bar{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--alx-accent), var(--alx-accent-2));
  transition:width .35s ease;
}

.alx-question{
  background:#fff; border:1px solid var(--alx-border); border-radius:14px;
  padding:16px; transform:translateY(8px); opacity:0; animation:alx-fade-in .25s ease forwards;
}
.alx-question__text{ font-size:18px; margin:0 0 8px; }
.alx-help{ margin:0 0 12px; color:var(--alx-sub); font-size:14px; }

.alx-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.alx-btn-opt{
  padding:12px 14px; border:1px solid var(--alx-border); border-radius:10px;
  background:#ffffff; color:var(--alx-text); font-weight:600;
  transition:transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  cursor:pointer; text-align:left;
}
.alx-btn-opt:hover{ transform:translateY(-1px); border-color:#cbd5e1; background:#f8fafc; box-shadow:0 2px 10px rgba(15,23,42,.06); }
.alx-btn-opt img{ display:block; margin-bottom:6px; border-radius:8px; border:1px solid #e2e8f0; max-height:48px; max-width:100%; }

.alx-nav{ display:flex; gap:10px; margin-top:16px; justify-content:flex-end; flex-wrap:wrap; }
.alx-btn{
  position:relative; padding:10px 16px; border:1px solid var(--alx-border);
  border-radius:12px; background:#f8fafc; color:var(--alx-text); cursor:pointer; transition:.2s;
}
.alx-btn--primary{ background:linear-gradient(180deg, var(--alx-accent), var(--alx-accent-2)); border-color:transparent; color:#fff; }

 /* ФИНАЛЬНАЯ ФОРМА — аккуратная сетка */
.alx-form{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:center; margin-top:8px;
}
.alx-form__row{ width:100%; }
.alx-form input[type="text"], .alx-form input[type="tel"], .alx-input{
  width:100%; padding:10px 12px; border:1px solid var(--alx-border); border-radius:10px; background:#fff; min-height:42px;
}
.alx-consent{
  grid-column:1 / -1;
  display:flex; gap:10px; align-items:center; line-height:1.2;
}
.alx-consent input[type="checkbox"]{ width:16px; height:16px; }
.alx-form__actions{
  grid-column:1 / -1; display:flex; gap:10px; justify-content:flex-end;
}

@keyframes alx-fade-in{ to{opacity:1; transform:none;} }

@media (max-width:640px){
  .alx-grid{ grid-template-columns:1fr; }
  .alx-form{ grid-template-columns:1fr; }
  .alx-form__actions{ justify-content:stretch; }
}