/* BioLine question bank components. Tokens are shared with the BioLine theme. */
:root {
	--mq-brand: #003D66; --mq-brand-ink: #002A47; --mq-brand-soft: rgba(0,61,102,.08);
	--mq-action: #2F7CE0; --mq-action2: #5AA2FF; --mq-pro: #FB8602; --mq-pro2: #FFA033;
	--mq-ok: #14A86B; --mq-ok-soft: rgba(20,168,107,.12); --mq-bad: #D93848; --mq-bad-soft: rgba(217,56,72,.10);
	--mq-bg: #F5F7FA; --mq-surface: #FFFFFF; --mq-surface2: #EDF1F5; --mq-line: #DFE5EC;
	--mq-ink: #141A26; --mq-text: #363B45; --mq-muted: #727782;
	--mq-shadow: 0 6px 24px rgba(10,30,50,.07); --mq-r: 12px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
	--mq-brand: #5AAEE8; --mq-brand-ink: #8CC6EF; --mq-brand-soft: rgba(90,174,232,.14);
	--mq-action: #4A92F0; --mq-action2: #73B2FF; --mq-pro: #FF9A1F; --mq-pro2: #FFB54D;
	--mq-ok: #2FCB8A; --mq-ok-soft: rgba(47,203,138,.14); --mq-bad: #FF6170; --mq-bad-soft: rgba(255,97,112,.14);
	--mq-bg: #12141A; --mq-surface: #1B1E26; --mq-surface2: #242832; --mq-line: #2E323D;
	--mq-ink: #F2F3F6; --mq-text: #C9CCD3; --mq-muted: #8A8F9A; --mq-shadow: 0 6px 24px rgba(0,0,0,.35); color-scheme: dark; } }
:root[data-theme="dark"] {
	--mq-brand: #5AAEE8; --mq-brand-ink: #8CC6EF; --mq-brand-soft: rgba(90,174,232,.14);
	--mq-action: #4A92F0; --mq-action2: #73B2FF; --mq-pro: #FF9A1F; --mq-pro2: #FFB54D;
	--mq-ok: #2FCB8A; --mq-ok-soft: rgba(47,203,138,.14); --mq-bad: #FF6170; --mq-bad-soft: rgba(255,97,112,.14);
	--mq-bg: #12141A; --mq-surface: #1B1E26; --mq-surface2: #242832; --mq-line: #2E323D;
	--mq-ink: #F2F3F6; --mq-text: #C9CCD3; --mq-muted: #8A8F9A; --mq-shadow: 0 6px 24px rgba(0,0,0,.35); color-scheme: dark; }

.mq-app, .mq-pricing, .mq-mgrid, .mq-sgrid { direction: rtl; color: var(--mq-text); font-variant-numeric: tabular-nums; }
.mq-app { display: flex; flex-direction: column; gap: 16px; }
.mq-app h2, .mq-app h3, .mq-pricing h3, .mq-mcard h3, .mq-h3 { color: var(--mq-ink); margin: 0; line-height: 1.4; }
.mq-i { width: 20px; height: 20px; flex: 0 0 auto; }
.mq-card { background: var(--mq-surface); border-radius: var(--mq-r); box-shadow: var(--mq-shadow); padding: 20px; }
.mq-stack { display: flex; flex-direction: column; gap: 16px; }
.mq-stack.sm { gap: 8px; }
.mq-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mq-row.between { justify-content: space-between; }
.mq-note { color: var(--mq-muted); font-size: 14px; margin: 0; }
.mq-note a, .mq-empty a { color: var(--mq-brand); }
.mq-err { color: var(--mq-bad); font-size: 13px; min-height: 1.4em; }
.mq-empty { text-align: center; color: var(--mq-muted); padding: 32px 20px; }
.mq-loading { color: var(--mq-muted); padding: 20px; text-align: center; }

.mq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 10px 18px; font: inherit; font-weight: 700; border: 0; cursor: pointer; text-decoration: none; transition: transform .15s; line-height: 1.5; }
.mq-btn:hover { transform: translateY(-1px); }
.mq-btn.sm { padding: 6px 12px; font-size: 14px; }
.mq-btn.primary { background: linear-gradient(45deg, var(--mq-action), var(--mq-action2)); color: #fff; }
.mq-btn.brand { background: var(--mq-brand); color: #fff; }
.mq-btn.pro { background: linear-gradient(45deg, var(--mq-pro), var(--mq-pro2)); color: #fff; }
.mq-btn.ghost { background: var(--mq-surface2); color: var(--mq-ink); }
.mq-btn.outline { border: 1.5px solid var(--mq-brand); color: var(--mq-brand); background: transparent; }
.mq-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.mq-btn:focus-visible, .mq-opt:focus-visible, .mq-seg button:focus-visible { outline: 3px solid var(--mq-action); outline-offset: 2px; }

/* filters */
.mq-filters { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 10px; align-items: end; }
@media (max-width: 820px) { .mq-filters { grid-template-columns: 1fr 1fr; } }
.mq-f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--mq-muted); font-weight: 600; }
.mq-f select, .mq-f input { font: inherit; font-size: 15px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--mq-line); background: var(--mq-surface); color: var(--mq-ink); width: 100%; box-sizing: border-box; }
.mq-list { display: flex; flex-direction: column; gap: 14px; }
.mq-more { text-align: center; }

/* question card */
.mq-qcard { background: var(--mq-surface); border-radius: var(--mq-r); box-shadow: var(--mq-shadow); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.mq-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.mq-tag { padding: 2px 10px; border-radius: 99px; background: var(--mq-surface2); color: var(--mq-muted); font-weight: 600; }
.mq-tag.b { background: var(--mq-brand-soft); color: var(--mq-brand-ink); }
.mq-qtext { color: var(--mq-ink); font-weight: 700; font-size: 16px; line-height: 1.8; }
.mq-opts { display: flex; flex-direction: column; gap: 8px; }
.mq-opt { position: relative; overflow: hidden; text-align: right; border: 1.5px solid var(--mq-line); background: var(--mq-surface); color: var(--mq-text); border-radius: 10px; padding: 10px 14px; display: flex; justify-content: space-between; gap: 10px; align-items: center; font: inherit; cursor: pointer; }
.mq-opt:hover:not([disabled]) { border-color: var(--mq-brand); }
.mq-opt > span { position: relative; }
.mq-opt .mq-bar { position: absolute; inset: 0 0 0 auto; background: var(--mq-surface2); transition: width .6s ease; }
.mq-opt .mq-pct { font-size: 13px; color: var(--mq-muted); font-weight: 700; }
.mq-opt.ok { border-color: var(--mq-ok); background: var(--mq-ok-soft); color: var(--mq-ok); font-weight: 700; }
.mq-opt.bad { border-color: var(--mq-bad); background: var(--mq-bad-soft); color: var(--mq-bad); }
.mq-opt.sel { border-color: var(--mq-action); background: rgba(47,124,224,.10); color: var(--mq-action); font-weight: 700; }
.mq-opt[disabled] { cursor: default; }
.mq-qfoot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
.mq-bm { border: 0; background: none; color: var(--mq-muted); display: flex; align-items: center; gap: 4px; font: inherit; font-size: 13px; cursor: pointer; }
.mq-bm.on { color: var(--mq-pro); }
.mq-explain { background: var(--mq-surface2); border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.mq-explain p { margin: 4px 0 0; }
.mq-locked { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px dashed var(--mq-pro); background: linear-gradient(270deg, rgba(255,138,0,.10), transparent); border-radius: 10px; padding: 10px 14px; font-size: 14px; }

/* exam */
.mq-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.mq-seg button { border: 1.5px solid var(--mq-line); background: var(--mq-surface); color: var(--mq-text); padding: 7px 14px; border-radius: 99px; font: inherit; font-weight: 600; cursor: pointer; }
.mq-seg button.on { border-color: var(--mq-brand); background: var(--mq-brand-soft); color: var(--mq-brand-ink); }
.mq-timer { font-weight: 800; color: var(--mq-brand); font-size: 20px; }
.mq-prog { height: 6px; border-radius: 99px; background: var(--mq-surface2); overflow: hidden; }
.mq-prog i { display: block; height: 100%; background: var(--mq-brand); transition: width .3s; }
.mq-report { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
@media (max-width: 600px) { .mq-report { grid-template-columns: 1fr; justify-items: center; } }
.mq-ring { width: 150px; height: 150px; }
.mq-ring text { fill: var(--mq-ink); font-weight: 800; font-family: inherit; }
.mq-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; width: 100%; }
.mq-stat { background: var(--mq-surface2); border-radius: 10px; padding: 12px 14px; }
.mq-stat b { display: block; font-size: 24px; color: var(--mq-ink); font-weight: 800; line-height: 1.4; }
.mq-stat span { color: var(--mq-muted); font-size: 13px; }
.mq-scroll { overflow-x: auto; }
.mq-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mq-table th { color: var(--mq-muted); text-align: right; padding: 6px; font-weight: 600; }
.mq-table td { border-top: 1px solid var(--mq-line); padding: 8px 6px; }

/* panel */
.mq-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 820px) { .mq-kpis { grid-template-columns: repeat(2, 1fr); } }
.mq-grid2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
@media (max-width: 820px) { .mq-grid2 { grid-template-columns: 1fr; } }
.mq-week { display: flex; gap: 6px; align-items: flex-end; height: 100px; margin-top: 12px; }
.mq-week div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; font-size: 11px; color: var(--mq-muted); }
.mq-week i { display: block; width: 100%; border-radius: 6px 6px 2px 2px; background: var(--mq-brand-soft); }
.mq-week i.today { background: var(--mq-brand); }
.mq-hist { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.mq-hist > div { border-bottom: 1px solid var(--mq-line); padding-bottom: 6px; }
.mq-ul { margin: 10px 0; padding-inline-start: 20px; }
.mq-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 99px; background: var(--mq-surface2); font-weight: 700; font-size: 14px; }
.mq-chip.pro { color: var(--mq-pro); }

/* login */
.mq-login { max-width: 400px; margin: 10px auto; width: 100%; display: flex; flex-direction: column; gap: 14px; text-align: center; box-sizing: border-box; }
.mq-login .mq-f { text-align: right; }
.mq-otp { text-align: center; letter-spacing: 8px; font-size: 20px !important; }
.mq-demo { background: var(--mq-brand-soft); color: var(--mq-brand-ink); border-radius: 10px; padding: 10px; font-size: 14px; }

/* pricing */
.mq-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
@media (max-width: 900px) { .mq-plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mq-plans { grid-template-columns: 1fr; } }
.mq-plan { background: var(--mq-surface); border-radius: var(--mq-r); box-shadow: var(--mq-shadow); padding: 20px; display: flex; flex-direction: column; gap: 8px; border: 2px solid transparent; position: relative; }
.mq-plan.best { border-color: var(--mq-pro); }
.mq-badge { position: absolute; top: -12px; right: 16px; background: var(--mq-pro); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 99px; }
.mq-price { font-size: 26px; font-weight: 800; color: var(--mq-ink); }
.mq-price small { font-size: 14px; color: var(--mq-muted); font-weight: 500; }
.mq-save { color: var(--mq-ok); font-size: 13px; font-weight: 700; }
.mq-per { color: var(--mq-muted); font-size: 13px; }
.mq-note-ok { background: var(--mq-ok-soft); color: var(--mq-ok); font-weight: 700; }
.mq-admin-hint { margin-top: 12px; font-size: 13px; color: var(--mq-muted); border: 1px dashed var(--mq-line); padding: 10px; border-radius: 10px; }

/* menu hub */
.mq-mgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 900px) { .mq-mgrid { grid-template-columns: repeat(2, 1fr); } }
.mq-mcard { background: var(--mq-surface); border-radius: var(--mq-r); box-shadow: var(--mq-shadow); padding: 18px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: transform .15s; }
.mq-mcard:hover { transform: translateY(-3px); }
.mq-mcard small { color: var(--mq-muted); font-size: 13px; line-height: 1.6; }
.mq-h3 { margin: 24px 0 12px; }
.mq-sgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 900px) { .mq-sgrid { grid-template-columns: repeat(3, 1fr); } }
.mq-scard { background: var(--mq-surface); border-radius: var(--mq-r); box-shadow: var(--mq-shadow); padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; color: inherit; }
.mq-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; }
.mq-scard .mq-ic { width: 38px; height: 38px; border-radius: 11px; }
.mq-mcard .mq-ic .mq-i { width: 26px; height: 26px; }
.mq-ic.red { background: var(--mq-brand-soft); color: var(--mq-brand); }
.mq-ic.blue { background: rgba(47,124,224,.12); color: var(--mq-action); }
.mq-ic.green { background: var(--mq-ok-soft); color: var(--mq-ok); }
.mq-ic.orange { background: rgba(255,138,0,.13); color: var(--mq-pro); }

.mq-toast { position: fixed; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 9999; background: var(--mq-ink); color: var(--mq-surface); padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 14px; box-shadow: var(--mq-shadow); max-width: calc(100% - 32px); }
.mq-toast[hidden] { display: none; }
[hidden].mq-list, .mq-app [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .mq-app *, .mq-mcard { transition: none !important; } }

/* step-by-step bank: grade, chapter and lesson pickers */
.mq-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--mq-muted); margin-bottom: 8px; }
.mq-crumbs a { color: var(--mq-action); text-decoration: none; }
.mq-crumbs b { color: var(--mq-ink); font-weight: 600; }
.mq-h2 { font-size: 20px; margin: 4px 0 14px !important; }
.mq-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.mq-steps.big { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .mq-steps.big { gap: 8px; } .mq-steps.big .mq-step { padding: 16px 6px; } .mq-steps.big .mq-step b { font-size: 14px; } }
.mq-step { font: inherit; text-align: right; cursor: pointer; border: 1px solid var(--mq-line); background: var(--mq-surface); color: var(--mq-ink); border-radius: var(--mq-r); box-shadow: var(--mq-shadow); padding: 16px; display: flex; flex-direction: column; gap: 6px; transition: transform .15s, border-color .15s; }
.mq-step:hover, .mq-step:focus-visible { transform: translateY(-2px); border-color: var(--mq-brand); outline: none; }
.mq-step b { font-size: 16px; line-height: 1.6; }
.mq-step small { color: var(--mq-muted); font-size: 13px; }
.mq-steps.big .mq-step { align-items: center; text-align: center; padding: 24px 16px; }
.mq-steps.big .mq-ic { width: 56px; height: 56px; font-size: 20px; font-weight: 800; display: grid; place-items: center; }
.mq-pager { margin-top: 16px; }
.mq-qcard.tf .mq-opts { flex-direction: row; }
.mq-qcard.tf .mq-opt { flex: 1; justify-content: center; text-align: center; }