.lqs-page { max-width: 900px; margin: 0 auto; padding: 2px 20px 110px; color: #17223c; }
.lqs-page * { box-sizing: border-box; }
.lqs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lqs-toolbar h1 { margin: 0; font-size: 1.1rem; font-weight: 800; line-height: 1.35; color: #17223c; }
.lqs-topic { font-size: .8rem; font-weight: 500; color: #54657a; }
.lqs-toolbar a, .lqs-profile { display: inline-flex; align-items: center; gap: 8px; padding: 12px; min-height: 44px; color: #435874; font-style: normal; }
.lqs-scores { display: flex; gap: 18px; padding: 7px 12px; margin: 4px 0 12px; border: 1px solid #ddd6ef; border-radius: 10px; background: #f4f0ff; }
.lqs-scores > div { display: inline-flex; align-items: baseline; gap: 7px; }
.lqs-scores span { font-size: .78rem; color: #54657a; }
.lqs-scores strong { font-size: 1rem; color: #17223c; }
.lqs-card { padding: 26px; border: 1px solid #dce5ef; border-radius: 20px; background: #fff; box-shadow: 0 8px 28px #10244708; margin-bottom: 16px; }
.lqs-card h2 { font-size: 1.25rem; color: #132745; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.lqs-card p, .lqs-card li { line-height: 1.65; }
.lqs-rules ul { padding-left: 22px; margin-bottom: 24px; }
.lqs-rules li { margin-bottom: 10px; }
.lqs-primary { width: 100%; min-height: 54px; padding: 12px 16px; border: 1px solid #e2bf42; border-radius: 13px; background: #ffe06b; color: #0b2347; font-weight: 750; box-shadow: 0 3px 0 #c8a833; }
.lqs-question.lq-question-card { padding: 0; overflow: hidden; border: 1px solid #dfe5ee; border-radius: 24px; background: #fff; box-shadow: 0 16px 42px #1024471c; }
.lqs-question .lq-question-media { width: 100%; aspect-ratio: 16 / 9; max-height: 240px; background: #dfe7f2; overflow: hidden; }
.lqs-question .lq-question-image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.lqs-question .lq-question-body { padding: 18px 22px 22px; }
.lqs-question .responsive-h { margin: 0 0 17px; color: #17223c; font-size: clamp(1.18rem, 3vw, 1.6rem); font-weight: 850; line-height: 1.28; }
.lqs-options { display: grid; gap: 9px; }
.lqs-options .answer-btn { position: relative; display: flex; align-items: center; width: 100%; text-align: left; padding: 12px 48px 12px 16px; min-height: 54px; border: 1px solid #dfe5ee; border-radius: 15px; color: #17223c; background: #fff; font: inherit; overflow-wrap: anywhere; }
.lqs-options .responsive-p { color: inherit; font-size: clamp(.98rem, 2.4vw, 1.09rem); font-weight: 680; line-height: 1.34; }
.lqs-options .answer-btn:not(:disabled):hover { background: #f8fbff; border-color: #9eb1ce; }
.lqs-options .answer-btn:disabled { cursor: default; opacity: 1; }
.lqs-options .answer-btn.answer-correct { border-color: #9bd0aa; background: #edf8f0; color: #204f32; }
.lqs-options .answer-btn.answer-wrong { border-color: #efa5aa; background: #fff0f1; color: #7f2e34; }
.lqs-options .answer-correct::after, .lqs-options .answer-wrong::after { position: absolute; right: 14px; top: 50%; display: inline-flex; width: 27px; height: 27px; align-items: center; justify-content: center; transform: translateY(-50%); border-radius: 50%; color: #fff; font-size: .9rem; font-weight: 900; }
.lqs-options .answer-correct::after { content: '✓'; background: #338454; }
.lqs-options .answer-wrong::after { content: '×'; background: #b94349; }
.lqs-question .lq-next-button { margin-top: 12px; border-radius: 15px; font-weight: 850; }
.lqs-page button { cursor: pointer; }
.lqs-page button:focus-visible, .lqs-page a:focus-visible { outline: 3px solid #ad5309; outline-offset: 3px; }
.lqs-award { padding: 8px 12px; background: #fff3cf; border-radius: 10px; }
.lqs-summary { text-align: center; }
@media (max-width: 575px) {
  .lqs-page { padding: 2px 12px 105px; }
  .lqs-toolbar h1 { font-size: 1rem; }
  .lqs-topic { display: none; }
  .lqs-card { padding: 20px 16px; border-radius: 16px; }
  .lqs-scores { justify-content: space-between; gap: 6px; }
  .lqs-scores span { font-size: .73rem; }
  .lqs-question .lq-question-media { max-height: 180px; }
  .lqs-question .lq-question-body { padding: 15px 15px 19px; }
  .lqs-options .answer-btn { min-height: 50px; padding: 10px 44px 10px 14px; border-radius: 13px; }
}
