.quiz-hero{padding-bottom:20px}
.quiz-sec{padding-top:24px}
.quiz{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--shadow)}
.q-progress{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.q-progress span{display:block;height:100%;width:0;background:var(--blue);transition:width .3s;margin-right:0}
.q-count{color:var(--muted);font-size:14px;margin:14px 0 4px}
.q-title{text-align:right;font-size:27px;margin-bottom:20px}
.q-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.q-opt{display:flex;align-items:center;gap:12px;text-align:right;border:1.5px solid var(--line2);background:#fff;border-radius:14px;padding:14px 16px;font-size:17px;cursor:pointer;transition:border-color .15s,background .15s,transform .15s;color:var(--ink)}
.q-opt:hover{border-color:var(--blue);background:var(--blue-soft);transform:translateY(-1px)}
.q-opt .em{font-size:24px;line-height:1;flex:none;width:32px;text-align:center}
.q-opt small{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.q-back{margin-top:18px;background:none;border:0;color:var(--muted);cursor:pointer;font-size:15px}
.q-back[disabled]{visibility:hidden}
.result{max-width:960px;margin:0 auto}
.result>h2{text-align:right;font-size:34px;margin-bottom:18px}
.r-grid{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow)}
.r-visual{background:var(--stage);border-radius:18px;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.r-visual svg{width:80%;height:80%}
.r-items{display:grid;gap:14px}
.r-item span{font-size:13.5px;color:var(--muted)}
.r-item b{display:block;font-family:var(--head);font-size:22px;color:var(--ink);margin:2px 0}
.r-item p{color:var(--text);line-height:1.65}
.r-actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 40px}
.r-lead{margin-top:10px}
.fade-in{animation:qf .35s ease}
@keyframes qf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:700px){
  .quiz{padding:20px 16px;border-radius:18px}
  .q-options{grid-template-columns:1fr}
  .q-title{font-size:22px}
  .r-grid{grid-template-columns:1fr}
  .r-visual{max-width:220px;margin:0 auto;width:100%}
  .result>h2{font-size:26px}
}