:root {
  --bg: #f4f4f4;
  --card-bg: #ffffff;
  --text: #111111;
  --line: #dfe0fb;
  --input-bg: #f5f5f5;
  --accent: #5e63f2;
  --accent-dark: #4f54e3;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  --radius-card: 22px;
  --radius-sm: 8px;
  --container: 1180px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: Inter, Arial, sans-serif; background: var(--bg); color: var(--text); }
.quiz-section { min-height: 100vh; padding: 48px 20px; display: flex; align-items: center; justify-content: center; }
.quiz-card { width: 100%; max-width: var(--container); background: var(--card-bg); border-radius: var(--radius-card); box-shadow: var(--shadow); overflow: hidden; position: relative; }
.quiz-progress { width: 100%; height: 6px; background: var(--line); }
.quiz-progress__line { height: 100%; width: 14.285%; background: linear-gradient(90deg, #6f73ff 0%, #5e63f2 100%); transition: width .25s ease; }
.quiz-form { width: 100%; }
.quiz-step { display: none; min-height: 640px; }
.quiz-step.is-active { display: block; }
.quiz-step__grid { display: grid; grid-template-columns: 1fr 440px; gap: 56px; min-height: 640px; padding: 48px 46px 40px; }
.quiz-step__left, .quiz-step__right { display: flex; flex-direction: column; }
.quiz-step__left { justify-content: space-between; min-width: 0; }
.quiz-step__right { justify-content: space-between; }
.quiz-step__content { max-width: 560px; }
.quiz-title { margin: 0; font-size: 44px; line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; }
.quiz-title--big { font-size: 56px; }
.quiz-text { margin: 24px 0 0; font-size: 18px; line-height: 1.6; color: #2f2f2f; }
.quiz-footer { margin-top: 32px; }
.quiz-counter { font-size: 22px; color: #9b9b9b; }
.quiz-fields { display: flex; flex-direction: column; gap: 24px; padding-top: 4px; }
.quiz-field { display: flex; flex-direction: column; gap: 12px; }
.quiz-label { font-size: 20px; line-height: 1.3; font-weight: 500; }
.quiz-input { width: 100%; height: 68px; border: 0; outline: none; background: var(--input-bg); border-radius: var(--radius-sm); padding: 0 20px; font-size: 24px; color: #111; transition: box-shadow .2s ease, background .2s ease; }
.quiz-input::placeholder { color: #b8b8b8; }
.quiz-input:focus { box-shadow: 0 0 0 2px rgba(94, 99, 242, .18); background: #f0f0f0; }
.quiz-options { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.quiz-option { display: flex; align-items: center; min-height: 74px; padding: 18px 22px; background: var(--input-bg); border-radius: var(--radius-sm); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.quiz-option:hover { background: #f0f0f0; }
.quiz-option input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; min-width: 24px; border: 2px solid #8d90f7; border-radius: 50%; margin: 0 18px 0 0; position: relative; background: transparent; }
.quiz-option input:checked::after { content: ""; position: absolute; inset: 4px; background: var(--accent); border-radius: 50%; }
.quiz-option span { font-size: 18px; line-height: 1.45; color: #232323; }
.quiz-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 36px; }
.quiz-actions--right { margin-top: 28px; }
.quiz-btn { height: 68px; border-radius: var(--radius-sm); border: 0; font-size: 18px; font-weight: 600; cursor: pointer; transition: all .2s ease; }
.quiz-btn--prev { width: 68px; background: #fff; color: #c1c5ff; border: 1px solid #e6e7fb; }
.quiz-btn--prev:hover:not(:disabled) { background: #f8f8ff; }
.quiz-btn--prev:disabled { opacity: .6; cursor: default; }
.quiz-btn--next, .quiz-btn--submit, .quiz-btn--restart { min-width: 180px; padding: 0 28px; color: #fff; background: linear-gradient(90deg, #6b70ff 0%, #565cf0 100%); box-shadow: 0 10px 25px rgba(94, 99, 242, .2); }
.quiz-btn--next:hover, .quiz-btn--submit:hover, .quiz-btn--restart:hover { background: linear-gradient(90deg, #6368fb 0%, #4d53e7 100%); transform: translateY(-1px); }
.quiz-success { padding: 60px 46px; }
.quiz-success__inner { max-width: 700px; }
.quiz-success h2 { font-size: 42px; margin: 0 0 16px; }
.quiz-success p { font-size: 22px; line-height: 1.6; margin: 0 0 28px; }
@media (max-width: 991px) {
  .quiz-section { padding: 24px 14px; }
  .quiz-step { min-height: auto; }
  .quiz-step__grid { grid-template-columns: 1fr; min-height: auto; padding: 28px 22px 24px; gap: 28px; }
  .quiz-step__left, .quiz-step__right { justify-content: flex-start; }
  .quiz-title, .quiz-title--big { font-size: 34px; }
  .quiz-text { font-size: 16px; }
  .quiz-counter { font-size: 18px; }
  .quiz-label { font-size: 17px; }
  .quiz-input { height: 60px; font-size: 20px; padding: 0 16px; }
  .quiz-option { min-height: 66px; padding: 16px 18px; }
  .quiz-option span { font-size: 16px; }
  .quiz-actions { justify-content: space-between; }
  .quiz-btn { height: 60px; }
  .quiz-btn--prev { width: 60px; }
  .quiz-btn--next, .quiz-btn--submit, .quiz-btn--restart { flex: 1; min-width: 0; }
}