:root {
  --brand: #1d3557;
  --brand-2: #457b9d;
  --accent: #e9c46a;
  --ok: #2a9d8f;
  --bad: #e63946;
  --bg: #f4f6f9;
}
body { background: var(--bg); }
[lang="or"], .lang-or { font-family: "Noto Sans Oriya", system-ui, sans-serif; }
.app-navbar { background: var(--brand); }
.page-wrap { max-width: 1200px; margin: 0 auto; }
.page-wrap.is-narrow { max-width: 440px; }
.page-wrap.is-medium { max-width: 900px; }

.set-card { border-top: 4px solid var(--brand-2); }
.quick-link:hover { background: #fffdf5; }

.stat-tile { background: #fff; border-radius: .6rem; padding: .8rem 1rem; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.stat-tile .stat-num { font-size: 1.6rem; font-weight: 700; color: var(--brand); }
.stat-tile .stat-label { font-size: .8rem; color: #6c757d; }
.stat-tile.ok { border-bottom: 4px solid var(--ok); }
.stat-tile.bad { border-bottom: 4px solid var(--bad); }
.stat-tile.highlight { border-left: 4px solid var(--accent); }

/* Question pieces (shared) */
.q-stem p:last-child { margin-bottom: .5rem; }
.q-statements { list-style: none; padding-left: .25rem; margin-bottom: .75rem; }
.q-statements li { margin-bottom: .25rem; }
.q-roman { display: inline-block; min-width: 2.2rem; color: #495057; }
.q-table { background: #fff; font-size: .92rem; }
.q-table th { background: #eef2f7; }
.q-code { background: #1e1e2e; color: #e6e6f0; padding: .75rem 1rem; border-radius: .4rem; font-size: .85rem; white-space: pre; overflow-x: auto; }
.q-figure, .q-svg svg { max-width: 100%; height: auto; }
.q-figure svg { max-width: 300px; width: 100%; height: auto; background: #fff; }
.q-svg svg { max-width: 160px; vertical-align: middle; background: #fff; }
.q-options { display: grid; gap: .5rem; margin-top: .5rem; }
.q-option { display: flex; gap: .5rem; align-items: flex-start; background: #fff; border: 1px solid #dee2e6; border-radius: .5rem;
  padding: .6rem .8rem; cursor: pointer; text-align: left; width: 100%; }
.q-option:hover { border-color: var(--brand-2); }
.q-option input { margin-top: .3rem; }
.q-option:has(input:checked) { border-color: var(--brand-2); background: #e8f1f8; }
.q-opt-no { font-weight: 600; color: #495057; }
.q-option.is-key { border-color: var(--ok); background: #e3f5f2; }
.q-option.is-wrong { border-color: var(--bad); background: #fdecee; }
.q-option:disabled { opacity: 1; cursor: default; color: inherit; }
.q-options-review { list-style: none; padding: 0; margin: .5rem 0; }
.q-options-review li { padding: .35rem .6rem; border-radius: .4rem; margin-bottom: .2rem; }
.q-options-review li.is-key { background: #e3f5f2; }
.q-options-review li.is-wrong { background: #fdecee; }
.q-explain { background: #fffbea; border-left: 4px solid var(--accent); padding: .5rem .8rem; border-radius: .3rem; font-size: .92rem; }
.q-explain p:last-child { margin-bottom: 0; }
.lang-or { display: none; }

/* Result list */
.answer-item summary { cursor: pointer; list-style: none; }
.answer-item summary::-webkit-details-marker { display: none; }
.status-dot { width: .8rem; height: .8rem; border-radius: 50%; flex: none; }
.status-dot.right { background: var(--ok); }
.status-dot.wrong { background: var(--bad); }
.status-dot.skipped { background: #adb5bd; }
.practice-q.cleared { border-left: 4px solid var(--ok); }

/* Bars (progress) */
.bar-row { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr 6rem; gap: .6rem; align-items: center; margin-bottom: .45rem; font-size: .9rem; }
.bar-track { background: #e9ecef; border-radius: 1rem; height: .7rem; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 1rem; }
.bar-fill.low { background: var(--bad); }
.bar-fill.mid { background: var(--accent); }
.bar-fill.high { background: var(--ok); }
.bar-value { text-align: right; }
@media (max-width: 575px) { .bar-row { grid-template-columns: 1fr 4.5rem; } .bar-track { grid-column: 1 / -1; grid-row: 2; } }

/* Syllabus & strategy */
.syl-part { background: var(--brand); color: #fff; padding: .35rem 1rem; font-weight: 600; font-size: .85rem; letter-spacing: .05em; }
.syl-text { font-size: .92rem; }
.strategy-doc h1 { font-size: 1.5rem; }
.strategy-doc h2 { font-size: 1.2rem; margin-top: 1.5rem; }
.strategy-doc table { width: 100%; background: #fff; margin-bottom: 1rem; font-size: .9rem; }
.strategy-doc th, .strategy-doc td { border: 1px solid #dee2e6; padding: .35rem .5rem; }
.strategy-doc code { background: #eef2f7; padding: 0 .25rem; border-radius: .2rem; }
.cov-ok { background: #e3f5f2; }
.cov-bad { background: #fdecee; font-weight: 700; }
.topic-chip { display: inline-block; border: 1px solid #ced4da; border-radius: 1rem; padding: 0 .5rem; margin: .1rem; background: #fff; }
.topic-chip.empty { border-style: dashed; color: #adb5bd; }

/* ---------- CBT test screen ---------- */
.cbt-body { background: #fff; }
.cbt { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.cbt-head { display: flex; align-items: center; gap: .6rem; background: var(--brand); color: #fff; padding: .5rem .8rem; }
.cbt-title { margin-right: auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbt-timer { font-variant-numeric: tabular-nums; font-weight: 700; background: rgba(255,255,255,.12); padding: .2rem .6rem; border-radius: .4rem; }
.cbt-timer.warn { background: var(--accent); color: #000; }
.cbt-timer.danger { background: var(--bad); color: #fff; }
.cbt-tabs { display: flex; overflow-x: auto; background: #eef2f7; border-bottom: 1px solid #dee2e6; }
.cbt-tab { border: 0; background: none; padding: .5rem .9rem; white-space: nowrap; font-size: .9rem; border-bottom: 3px solid transparent; }
.cbt-tab.active { border-bottom-color: var(--brand-2); font-weight: 600; }
.cbt-main { flex: 1; display: flex; min-height: 0; position: relative; }
.cbt-question { flex: 1; overflow-y: auto; padding: 1rem; }
.q-head { display: flex; justify-content: space-between; border-bottom: 1px solid #dee2e6; padding-bottom: .4rem; margin-bottom: .6rem; }
.q-no { font-weight: 700; }
.cbt-palette { width: 300px; overflow-y: auto; border-left: 1px solid #dee2e6; padding: .75rem; background: #f8f9fa; }
.palette-legend { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .5rem; font-size: .75rem; margin-bottom: .6rem; }
.palette-label { font-size: .8rem; font-weight: 600; margin: .5rem 0 .25rem; }
.palette-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; }
.pal-btn, .pal-dot { border: 1px solid #adb5bd; background: #fff; font-size: .78rem; padding: .25rem 0; border-radius: .3rem; }
.pal-dot { display: inline-block; width: .9rem; height: .9rem; padding: 0; margin-right: .25rem; vertical-align: -2px; }
.pal-btn.not-visited, .pal-dot.not-visited { background: #fff; }
.pal-btn.not-answered, .pal-dot.not-answered { background: var(--bad); border-color: var(--bad); color: #fff; }
.pal-btn.answered, .pal-dot.answered { background: var(--ok); border-color: var(--ok); color: #fff; }
.pal-btn.marked, .pal-dot.marked { background: #6f42c1; border-color: #6f42c1; color: #fff; border-radius: 50%; }
.pal-btn.answered-marked, .pal-dot.answered-marked { background: #6f42c1; border-color: var(--ok); color: #fff; border-radius: 50%; box-shadow: inset 0 -4px 0 var(--ok); }
.pal-btn.current { outline: 3px solid var(--accent); outline-offset: 1px; }
.cbt-foot { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem .8rem; border-top: 1px solid #dee2e6; background: #f8f9fa; }
.cbt.show-or .lang-or { display: block; }
.cbt.show-or .q-option .lang-or { display: inline; }
.cbt.show-or .lang-en.has-or { display: none; }
.cbt-toast { position: fixed; left: 50%; bottom: 4.5rem; transform: translateX(-50%); background: #212529; color: #fff;
  padding: .5rem 1rem; border-radius: .4rem; z-index: 2000; font-size: .9rem; }
@media (max-width: 991px) {
  .cbt-palette { position: absolute; right: 0; top: 0; bottom: 0; transform: translateX(100%); transition: transform .2s; z-index: 10; box-shadow: -4px 0 12px rgba(0,0,0,.15); width: min(320px, 88vw); }
  .cbt-palette.open { transform: none; }
  .cbt-foot .btn { font-size: .85rem; padding: .35rem .6rem; }
}
.cbt-body main, .cbt-body .page-wrap { max-width: none; padding: 0; }
.cbt { overflow: hidden; }
.cbt-timer { white-space: nowrap; }
.cbt-tabs { scrollbar-width: none; }
.cbt-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 575px) {
  .cbt-head { gap: .4rem; padding: .45rem .6rem; }
  .cbt-foot { flex-wrap: nowrap; overflow-x: auto; }
  .cbt-foot .btn { white-space: nowrap; }
}