/* ===== Деңгей тесті ===== */
.quiz{max-width:760px;margin-inline:auto;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.3rem,4vw,2.2rem);box-shadow:var(--shadow)}
.quiz[hidden],.quiz__screen[hidden]{display:none}

/* Бастау беті */
.quiz__intro{text-align:center}
.quiz__intro h3{font-size:clamp(1.3rem,3vw,1.7rem);margin-bottom:.6rem}
.quiz__intro p{color:var(--muted);max-width:52ch;margin:0 auto 1.3rem}
.quiz__facts{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:1.5rem}
.quiz__facts span{background:var(--gold-soft);color:var(--gold-3);border-radius:999px;padding:.4rem .9rem;font-size:.86rem;font-weight:600}

/* Прогресс */
.quiz__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.7rem;font-size:.86rem;color:var(--muted);font-weight:600}
.quiz__bar{height:8px;background:var(--beige);border-radius:999px;overflow:hidden;margin-bottom:1.4rem}
.quiz__fill{height:100%;width:0;background:var(--gold);border-radius:999px;transition:width .35s var(--ease)}

/* Сұрақ */
.quiz__section-tag{display:inline-block;background:var(--beige);color:var(--brown-2);border-radius:999px;padding:.25rem .8rem;font-size:.78rem;font-weight:700;margin-bottom:.8rem}
.quiz__passage{background:var(--cream);border-left:4px solid var(--gold);border-radius:var(--radius-sm);padding:1rem 1.2rem;margin-bottom:1.1rem;line-height:1.65}
.quiz__q{font-size:clamp(1.05rem,2.6vw,1.3rem);font-weight:700;margin-bottom:1rem;line-height:1.4}
.quiz__opts{display:grid;gap:.6rem;margin-bottom:1.3rem}
.quiz__opt{width:100%;text-align:left;font:inherit;color:var(--brown);background:var(--white);border:1.5px solid var(--beige-3);border-radius:var(--radius-sm);padding:.85rem 1.1rem;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.quiz__opt:hover{border-color:var(--gold);background:var(--cream)}
.quiz__opt.is-selected{border-color:var(--gold);background:var(--gold-soft);font-weight:700}
.quiz__nav{display:flex;justify-content:space-between;gap:.8rem}
.quiz__nav .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* Байланыс формасы */
.quiz__lead h3{margin-bottom:.5rem}
.quiz__lead p{color:var(--muted);margin-bottom:1.2rem}
.quiz__lead label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.9rem}
.quiz__lead input{display:block;width:100%;margin-top:.35rem;font:inherit;padding:.8rem 1rem;border:1.5px solid var(--beige-3);border-radius:var(--radius-sm);background:var(--white);color:var(--brown)}
.quiz__lead input.is-invalid{border-color:var(--warn)}
.quiz__err{color:var(--warn);font-size:.88rem;min-height:1.2em;margin:.2rem 0 .6rem}

/* Нәтиже */
.quiz__result h3{font-size:clamp(1.3rem,3vw,1.7rem);margin-bottom:.3rem}
.quiz__level{color:var(--gold-3);font-weight:800}
.quiz__scores{display:grid;gap:.9rem;margin:1.3rem 0}
.score__row{display:flex;justify-content:space-between;font-weight:700;font-size:.92rem;margin-bottom:.3rem}
.score__bar{height:10px;background:var(--beige);border-radius:999px;overflow:hidden}
.score__fill{height:100%;border-radius:999px;background:var(--ok)}
.score__fill.is-weak{background:var(--warn)}
.score__fill.is-mid{background:var(--gold)}
.quiz__advice{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem 1.2rem;margin-bottom:1.2rem}
.quiz__advice h4{margin-bottom:.4rem}
.quiz__advice ul{margin:.4rem 0 0;padding-left:1.1rem}
.quiz__advice li{margin-bottom:.35rem}
.quiz__rec{background:var(--brown);color:var(--cream);border-radius:var(--radius);padding:1.4rem 1.5rem;margin-bottom:1rem}
.quiz__rec small{display:block;color:var(--beige-3);font-weight:600;margin-bottom:.3rem}
.quiz__rec strong{display:block;font-size:1.25rem;margin-bottom:.4rem}
.quiz__rec p{color:var(--beige-2);margin-bottom:1rem}
.quiz__rec .price{font-weight:800;font-size:1.1rem;color:#fff}
.quiz__rec .price s{color:var(--beige-3);font-weight:500;margin-right:.4rem}
.quiz__again{display:block;margin:.8rem auto 0;background:none;border:0;font:inherit;color:var(--muted);text-decoration:underline;cursor:pointer}

@media (max-width:520px){
  .quiz__nav{flex-direction:column-reverse}
  .quiz__nav .btn{width:100%}
}