.aq-progress {
  margin: 8px 0 26px; padding: 18px 20px; border: 1px solid var(--stroke); border-radius: 14px;
  background: var(--bg-card);
}
.aq-progress h2 { margin: 0 0 4px; font-family: var(--font-logo); font-weight: 700; font-size: 17px; }
.aq-sub { margin: 0 0 12px; color: var(--text-muted); font-size: 12.5px; line-height: 1.55; }
.aq-nums { display: flex; flex-wrap: wrap; gap: 8px; }
.aq-num {
  font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--stroke); background: rgba(255, 255, 255, .03);
}
.aq-paths-title { margin: 15px 0 7px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-cosmos); }
.aq-paths { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.aq-paths li {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px;
  padding: 5px 10px; border-radius: 8px; border: 1px solid var(--stroke);
}
.aq-path-id { color: var(--text-muted); }
.aq-path-n { font-weight: 700; font-variant-numeric: tabular-nums; }


.aq-read {
  margin: 22px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 12.5px;
  border: 1px dashed var(--stroke); color: var(--text-muted);
}
.aq-read.is-done { border-style: solid; border-color: rgba(64, 200, 140, .45); color: #7ee0b0; }


.aq-door {
  box-sizing: border-box; width: calc(100% - 40px); max-width: var(--page-max, 100%); margin: 0 auto 28px;
  padding: 14px 18px; border: 1px solid var(--stroke); border-radius: 12px; background: var(--bg-card);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
}
.aq-door p { margin: 0; flex: 1 1 280px; min-width: 0; color: var(--text-muted); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.aq-door-cta {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 700; text-decoration: none;
  color: var(--text-primary); border: 1px solid var(--color-cosmos);
}
.aq-door-cta:hover { background: rgba(124, 77, 255, .14); }


.aq-quiz {
  margin: 26px 0 0; padding: 20px; border: 1px solid var(--stroke); border-radius: 14px;
  background: var(--bg-card);
}
.aq-quiz-head h2 { margin: 0 0 4px; font-family: var(--font-logo); font-weight: 700; font-size: 18px; }
.aq-quiz-head .ac-enbadge { display: inline-block; margin-bottom: 7px; }

.aq-items { list-style: none; margin: 4px 0 0; padding: 0; counter-reset: aqitem; }
.aq-item { padding: 15px 0; border-top: 1px solid var(--stroke); }
.aq-item:first-child { border-top: 0; }
.aq-q { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; font-weight: 600; }
.aq-q::before { counter-increment: aqitem; content: counter(aqitem) ". "; color: var(--color-cosmos); font-weight: 800; }

.aq-item.is-practice { border-inline-start: 2px solid var(--color-cosmos); padding-inline-start: 13px; }
.aq-practice-tag {
  display: inline-block; margin-bottom: 7px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--color-cosmos);
}
.aq-open {
  display: inline-block; margin: 0 0 10px; font-size: 12.5px; font-weight: 600; text-decoration: none;
  color: var(--text-primary); border: 1px solid var(--color-cosmos); border-radius: 9px; padding: 7px 13px;
}
.aq-open:hover { background: rgba(124, 77, 255, .18); }

.aq-opts { display: flex; flex-direction: column; gap: 7px; }
.aq-opt {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 10px 13px; border: 1px solid var(--stroke); border-radius: 10px;
  font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere;
}
.aq-opt:hover { border-color: var(--text-muted); }
.aq-opt input { margin: 3px 0 0; flex-shrink: 0; accent-color: var(--color-cosmos); }
.aq-opt.is-picked { border-color: var(--color-cosmos); background: rgba(124, 77, 255, .1); }
.aq-opt.is-right { border-color: rgba(64, 200, 140, .55); background: rgba(64, 200, 140, .1); }
.aq-right-tag { margin-inline-start: auto; font-size: 10.5px; color: #7ee0b0; white-space: nowrap; }

.aq-msg { margin: 13px 0 0; padding: 10px 13px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; border: 1px solid var(--stroke); color: var(--text-muted); }
.aq-msg.is-bad { border-color: rgba(240, 120, 120, .45); color: #f0a0a0; }

.aq-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin-top: 16px; }
.aq-submit {
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; color: #120c22;
  border: 0; border-radius: 10px; padding: 10px 19px; background: var(--accent-grad);
}
.aq-submit:disabled { opacity: .45; cursor: default; }
.aq-left { font-size: 11.5px; color: var(--text-muted); }
.aq-verdict { margin-top: 16px; font-size: 14px; font-weight: 700; }
.aq-verdict.is-pass { color: #7ee0b0; }


@media (max-width: 560px) {
  .aq-progress, .aq-quiz { padding: 15px 14px; border-radius: 12px; }
  .aq-door { width: calc(100% - 28px); padding: 13px 14px; }
  .aq-door-cta { flex: 1 1 100%; text-align: center; }
  .aq-nums { flex-direction: column; align-items: flex-start; }
  .aq-num { width: 100%; box-sizing: border-box; }
  .aq-q { font-size: 14px; }
  .aq-opt { font-size: 13px; padding: 9px 11px; }
  .aq-right-tag { margin-inline-start: 0; flex-basis: 100%; }
  .aq-foot { flex-direction: column; align-items: stretch; }
  .aq-submit { width: 100%; }
  .aq-left { text-align: center; }
}





[dir="rtl"] .aq-quiz.aq-en .aq-q,
[dir="rtl"] .aq-quiz.aq-en .aq-opt { direction: ltr; text-align: left; }