/* ============================================================
   Topic-wise Mock Tests - modern, compact, mobile-first
   ============================================================ */
.min-w-0 { min-width:0; }
.tw-wrap { padding-top:1rem; padding-bottom:2.5rem; }
@media (min-width:768px){ .tw-wrap { padding-top:1.5rem; } }

/* ---- compact page header ---- */
.tw-head { background:linear-gradient(135deg,#eff6ff 0%,#eef2ff 100%); border:1px solid #dbe6fb; border-radius:1.1rem; padding:.95rem 1rem; margin:.75rem 0 1.1rem; }
.tw-head-main { display:flex; gap:.8rem; align-items:flex-start; }
.tw-head-icon { flex:0 0 42px; height:42px; border-radius:12px; background:linear-gradient(135deg,#2563eb,#4f46e5); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.2rem; box-shadow:0 4px 12px rgba(37,99,235,.25); }
.tw-eyebrow { font-size:.68rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#4f46e5; line-height:1.2; margin-bottom:.15rem; }
.tw-head h1 { font-size:1.2rem; font-weight:700; margin:0; line-height:1.3; color:#0f172a; overflow-wrap:anywhere; }
.tw-head p { margin:.25rem 0 0; font-size:.86rem; color:#475569; line-height:1.5; }
@media (min-width:768px){ .tw-head { padding:1.15rem 1.3rem; } .tw-head h1 { font-size:1.45rem; } .tw-head-icon { flex-basis:48px; height:48px; font-size:1.35rem; } }

/* ---- small stat pills ---- */
.tw-stats { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; }
.tw-stat { display:inline-flex; align-items:center; gap:.35rem; background:#fff; border:1px solid #e2e8f0; border-radius:999px; padding:.22rem .7rem; font-size:.78rem; color:#475569; white-space:nowrap; }
.tw-stat i { color:#2563eb; font-size:.85rem; }
.tw-stat b { color:#0f172a; font-weight:700; }

/* ---- section titles ---- */
.tw-title { font-size:1.02rem; font-weight:700; margin:0 0 .75rem; display:flex; align-items:center; gap:.45rem; color:#0f172a; }
.tw-title::before { content:""; width:4px; height:1.05em; border-radius:4px; background:linear-gradient(#2563eb,#4f46e5); }

/* ---- subject cards ---- */
.subject-card { display:flex; gap:.8rem; align-items:center; background:#fff; border:1px solid #e8edf5; border-radius:1rem; padding:.85rem; height:100%; text-decoration:none; color:inherit; transition:.18s; }
.subject-card:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(37,99,235,.1); border-color:#bfdbfe; color:inherit; }
.subject-icon { flex:0 0 46px; width:46px; height:46px; border-radius:13px; background:#eff6ff; color:#2563eb; display:flex; align-items:center; justify-content:center; font-size:1.3rem; position:relative; }
.subject-no { position:absolute; top:-6px; left:-6px; background:#2563eb; color:#fff; font-size:.6rem; font-weight:700; border-radius:999px; padding:1px 5px; }
.subject-card h2, .subject-card h3 { font-size:.98rem; font-weight:700; margin:0; line-height:1.3; }
.subject-card p { font-size:.78rem; color:#64748b; margin:.15rem 0 .35rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.subject-meta { font-size:.74rem; color:#64748b; display:flex; flex-wrap:wrap; gap:.15rem .7rem; }
.subject-go { margin-left:auto; color:#94a3b8; flex:0 0 auto; }
.subject-card:hover .subject-go { color:#2563eb; }

/* ---- chapter rows ---- */
.chapter-row { display:flex; align-items:center; gap:.75rem; background:#fff; border:1px solid #e8edf5; border-radius:.95rem; padding:.7rem .85rem; text-decoration:none; color:inherit; transition:.15s; }
.chapter-row:hover { border-color:#93c5fd; background:#f8fbff; color:inherit; }
.chapter-no { flex:0 0 34px; height:34px; border-radius:10px; background:#eff6ff; color:#2563eb; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:.85rem; }
.chapter-row h2, .chapter-row h3 { font-size:.95rem; font-weight:600; margin:0; line-height:1.35; overflow-wrap:anywhere; }
.chapter-row small { color:#64748b; font-size:.76rem; }
.chapter-row .bi-chevron-right { margin-left:auto; color:#94a3b8; flex:0 0 auto; }

/* ---- test cards ---- */
.test-card { background:#fff; border:1px solid #e8edf5; border-radius:1rem; padding:.95rem; height:100%; display:flex; flex-direction:column; transition:.18s; }
.test-card:hover { box-shadow:0 8px 22px rgba(37,99,235,.09); border-color:#bfdbfe; }
.test-card-top { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.test-badge { font-size:.65rem; font-weight:700; padding:.15rem .5rem; border-radius:999px; background:#dcfce7; color:#15803d; }
.test-card h2, .test-card h3 { font-size:.93rem; font-weight:600; line-height:1.4; margin:0 0 .5rem; overflow-wrap:anywhere; }
.test-pills { display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.75rem; }
.test-pills span { font-size:.72rem; background:#f1f5f9; color:#475569; border-radius:999px; padding:.12rem .55rem; }
.test-card .btn { margin-top:auto; }

/* ---- test page ---- */
.tw-start-card { background:#fff; border:1px solid #e8edf5; border-radius:1.1rem; padding:1rem; margin-bottom:1rem; }
.tw-start-card .btn-start { background:linear-gradient(135deg,#2563eb,#4f46e5); border:0; color:#fff; font-weight:600; border-radius:.9rem; padding:.7rem 1.4rem; box-shadow:0 6px 16px rgba(37,99,235,.28); width:100%; }
.tw-start-card .btn-start:hover { filter:brightness(1.06); color:#fff; }
@media (min-width:576px){ .tw-start-card .btn-start { width:auto; min-width:240px; } }
.tw-facts { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; margin-bottom:.9rem; }
@media (min-width:576px){ .tw-facts { grid-template-columns:repeat(4,1fr); } }
.tw-fact { background:#f8fafc; border:1px solid #eef2f7; border-radius:.8rem; padding:.55rem .65rem; text-align:center; }
.tw-fact i { color:#2563eb; }
.tw-fact b { display:block; font-size:.95rem; color:#0f172a; line-height:1.3; }
.tw-fact span { font-size:.7rem; color:#64748b; }

.tw-side-card { background:#fff; border:1px solid #e8edf5; border-radius:1.1rem; padding:1rem; margin-bottom:.9rem; }
.tw-side-card h2 { font-size:.9rem; font-weight:700; margin:0 0 .7rem; }
.tw-test-links { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.4rem; }
.tw-test-links a { display:flex; align-items:center; gap:.4rem; font-size:.8rem; padding:.45rem .6rem; border-radius:.7rem; border:1px solid #e2e8f0; color:#334155; text-decoration:none; line-height:1.25; min-width:0; }
.tw-test-links a span { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.tw-test-links a:hover { border-color:#93c5fd; background:#f8fbff; }
.tw-test-links a.on { background:#2563eb; border-color:#2563eb; color:#fff; }
.tw-test-links a em { font-style:normal; flex:0 0 22px; height:22px; border-radius:7px; background:#eff6ff; color:#2563eb; font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.tw-test-links a.on em { background:rgba(255,255,255,.22); color:#fff; }
.tw-link-card { display:flex; align-items:center; gap:.7rem; background:#fff; border:1px solid #e8edf5; border-radius:.95rem; padding:.7rem .85rem; text-decoration:none; color:#0f172a; margin-bottom:.55rem; font-size:.88rem; font-weight:600; transition:.15s; }
.tw-link-card i.lead { flex:0 0 34px; height:34px; border-radius:10px; background:#eff6ff; color:#2563eb; display:flex; align-items:center; justify-content:center; }
.tw-link-card i.go { margin-left:auto; color:#94a3b8; }
.tw-link-card:hover { border-color:#93c5fd; background:#f8fbff; color:#0f172a; }
.tw-nav-btns { display:flex; justify-content:space-between; gap:.5rem; margin-top:1rem; }
.tw-nav-btns .btn { border-radius:.8rem; font-size:.85rem; }

/* ---- article + custom html ---- */
.topic-article { background:#fff; border:1px solid #e8edf5; border-radius:1.1rem; padding:1.1rem; overflow-wrap:anywhere; }
@media (min-width:768px){ .topic-article { padding:1.6rem 1.9rem; } }
.rich-content .ql-align-center, .topic-article .ql-align-center { text-align:center; }
.rich-content .ql-align-right, .topic-article .ql-align-right { text-align:right; }
.rich-content .ql-align-justify, .topic-article .ql-align-justify { text-align:justify; }
.topic-article img { max-width:100%; height:auto; border-radius:.6rem; }
.topic-article table { width:100%; border-collapse:collapse; display:block; overflow-x:auto; }
.topic-article table td, .topic-article table th { border:1px solid #e2e8f0; padding:.45rem .6rem; }
.topic-article iframe, .topic-custom-html iframe { max-width:100%; }
.topic-custom-html { max-width:100%; overflow-x:auto; }
.topic-custom-html img, .topic-custom-html video { max-width:100%; height:auto; }
.topic-chip { display:inline-flex; align-items:center; gap:.35rem; background:#f1f5f9; border-radius:999px; padding:.3rem .8rem; font-size:.82rem; color:#334155; }

/* ---------- Test engine (full-screen, mobile friendly) ---------- */
#examApp { position:fixed; inset:0; z-index:2000; background:#f1f5f9; display:none; flex-direction:column; }
#examApp.show { display:flex; }
.ex-top { background:#fff; border-bottom:1px solid #e2e8f0; padding:.55rem .9rem; display:flex; align-items:center; gap:.6rem; }
.ex-title { font-weight:600; font-size:.92rem; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ex-timer { font-variant-numeric:tabular-nums; font-weight:700; background:#eff6ff; color:#1d4ed8; padding:.3rem .7rem; border-radius:999px; font-size:.9rem; white-space:nowrap; }
.ex-timer.warn { background:#fee2e2; color:#b91c1c; }
.ex-body { flex:1; display:flex; min-height:0; }
.ex-main { flex:1; overflow-y:auto; padding:1rem; }
.ex-card { max-width:820px; margin:0 auto; background:#fff; border-radius:1.1rem; padding:1.2rem; border:1px solid #e2e8f0; }
.ex-qno { font-size:.8rem; color:#64748b; font-weight:600; margin-bottom:.5rem; display:flex; justify-content:space-between; }
.ex-qtext { font-size:1.05rem; font-weight:500; margin-bottom:1rem; white-space:pre-wrap; }
.ex-qimg { max-width:100%; max-height:320px; border-radius:.6rem; border:1px solid #e2e8f0; margin-bottom:1rem; }
.ex-opt { display:flex; gap:.7rem; align-items:flex-start; width:100%; text-align:left; background:#fff; border:2px solid #e2e8f0; border-radius:.9rem; padding:.75rem .9rem; margin-bottom:.6rem; cursor:pointer; transition:.12s; }
.ex-opt:hover { border-color:#93c5fd; }
.ex-opt.sel { border-color:#2563eb; background:#eff6ff; }
.ex-opt .k { flex:0 0 28px; height:28px; border-radius:50%; background:#f1f5f9; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
.ex-opt.sel .k { background:#2563eb; color:#fff; }
.ex-opt img { max-width:100%; max-height:140px; display:block; margin-top:.4rem; border-radius:.5rem; }
.ex-bottom { background:#fff; border-top:1px solid #e2e8f0; padding:.6rem .9rem; display:flex; gap:.5rem; align-items:center; justify-content:space-between; }
.ex-pal { width:270px; background:#fff; border-left:1px solid #e2e8f0; padding:1rem; overflow-y:auto; }
.ex-pal-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:.45rem; }
.ex-pb { aspect-ratio:1; border-radius:.6rem; border:1px solid #cbd5e1; background:#fff; font-size:.8rem; font-weight:600; cursor:pointer; padding:0; }
.ex-pb.ans { background:#16a34a; color:#fff; border-color:#16a34a; }
.ex-pb.mark { background:#f59e0b; color:#fff; border-color:#f59e0b; }
.ex-pb.cur { outline:3px solid #2563eb; outline-offset:1px; }
.ex-legend span { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:4px; vertical-align:-1px; }
@media (max-width:820px){
  .ex-pal { position:fixed; right:0; top:0; bottom:0; transform:translateX(100%); transition:.2s; z-index:2100; box-shadow:-8px 0 30px rgba(0,0,0,.15); }
  .ex-pal.open { transform:none; }
  .ex-main { padding:.7rem; }
  .ex-card { padding:1rem; }
}

/* ---------- Result ---------- */
.res-score { background:linear-gradient(135deg,#2563eb,#4f46e5); color:#fff; border-radius:1.4rem; padding:1.6rem; text-align:center; }
.res-score .big { font-size:3rem; font-weight:800; line-height:1.1; }
.res-box { background:#fff; border:1px solid #eef0f4; border-radius:1rem; padding:.9rem; text-align:center; height:100%; }
.res-box .n { font-size:1.4rem; font-weight:700; }
.rv-card { background:#fff; border:1px solid #eef0f4; border-radius:1.1rem; padding:1.1rem; margin-bottom:1rem; }
.rv-opt { border:1.5px solid #e2e8f0; border-radius:.75rem; padding:.55rem .8rem; margin-bottom:.45rem; font-size:.92rem; }
.rv-opt.ok { background:#dcfce7; border-color:#22c55e; }
.rv-opt.bad { background:#fee2e2; border-color:#ef4444; }
.rv-opt img { max-width:100%; max-height:130px; display:block; margin-top:.35rem; border-radius:.4rem; }
.rv-exp { background:#f8fafc; border-left:4px solid #2563eb; border-radius:.5rem; padding:.7rem .9rem; font-size:.9rem; margin-top:.7rem; }
.rv-exp img { max-width:100%; border-radius:.5rem; margin-top:.5rem; }