:root{
  --blue:#1b3a8f; --blue-dark:#152c6b; --accent:#2f6fed; --bg:#f4f6fb; --card:#fff;
  --ink:#1a2233; --muted:#6b7488; --line:#e3e8f2; --good:#1f9d57; --warn:#d98a00; --bad:#d23b3b;
  --shadow:0 1px 3px rgba(20,30,60,.08),0 8px 24px rgba(20,30,60,.06);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5}
button{font-family:inherit;cursor:pointer}

/* top bar */
.topbar{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;background:linear-gradient(90deg,var(--blue),var(--blue-dark));
  color:#fff;padding:10px 20px;position:sticky;top:0;z-index:20;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.logo{background:#fff;color:var(--blue);font-weight:800;border-radius:8px;padding:8px 10px;letter-spacing:1px;font-size:14px}
.title{font-weight:700;font-size:16px}
.subtitle{font-size:12px;opacity:.8}
.exam-tabs{display:flex;gap:6px;flex:1 1 320px;flex-wrap:wrap;min-width:0}
.exam-tabs button{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);
  padding:7px 12px;border-radius:20px;font-size:13px;white-space:nowrap}
.exam-tabs button.active{background:#fff;color:var(--blue);font-weight:700;border-color:#fff}
.exam-tabs button .b{opacity:.7;font-size:11px;margin-inline-start:6px}
.modes{display:flex;gap:4px;background:rgba(0,0,0,.15);padding:4px;border-radius:24px}
.modes button{background:transparent;color:#fff;border:0;padding:7px 16px;border-radius:20px;font-size:13px;font-weight:600}
.modes button.active{background:#fff;color:var(--blue)}

/* layout */
.layout{display:flex;align-items:flex-start;gap:20px;max-width:1200px;margin:20px auto;padding:0 20px}
.sidebar{width:260px;flex:none;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);position:sticky;top:78px}
.content{flex:1;min-width:0}

.search input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fbfcfe}
.search input:focus{outline:2px solid var(--accent);border-color:transparent}

.progress-box{margin:16px 0;padding:12px;background:#f7f9fd;border-radius:10px;border:1px solid var(--line)}
.progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:600}
.bar{height:8px;background:#e6ebf5;border-radius:6px;margin:6px 0;overflow:hidden}
.bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--good),#37c172);transition:width .3s}
.progress-sub{font-size:11px;color:var(--muted)}

.filter-group{margin-top:16px}
.filter-head{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin-bottom:8px}
.filter-group label{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 0;cursor:pointer}
.filter-group .cnt{margin-inline-start:auto;color:var(--muted);font-size:11px}
.filter-group .muted{font-size:10.5px;color:var(--muted);font-weight:400}
.hint{font-size:11px;color:var(--muted);margin:-4px 0 8px;line-height:1.35}
.section-list{max-height:260px;overflow:auto;margin:-2px}
.section-list .sec{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:7px;font-size:12.5px;cursor:pointer}
.section-list .sec:hover{background:#f0f4fc}
.section-list .sec.active{background:var(--accent);color:#fff}
.section-list .sec .n{opacity:.65;font-size:11px}
.reset{margin-top:16px;width:100%;background:#fff;border:1px solid var(--line);color:var(--bad);
  padding:8px;border-radius:8px;font-size:12px}
.reset:hover{background:#fff5f5;border-color:var(--bad)}

/* browse cards */
.list-meta{color:var(--muted);font-size:13px;margin:0 2px 12px}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;
  margin-bottom:10px;box-shadow:var(--shadow)}
.qcard .qrow{display:flex;gap:10px;align-items:flex-start}
.qcard .qnum{color:var(--muted);font-size:12px;font-weight:700;flex:none;min-width:30px;padding-top:2px}
/* min-width:0 lets the text column shrink & wrap inside the card instead of
   overflowing and pushing the status badge out of the box */
.qcard .qbody{flex:1;min-width:0}
.qcard .qtext{font-weight:600}
.qtext,.qcard .ans,.qcard .cite,.mc-opt,.flash .q,.flash .a,.mc-feedback{overflow-wrap:break-word;word-break:break-word}
.qcard .ans{margin-top:10px;padding:10px 12px;background:#f3f8f4;border-inline-start:3px solid var(--good);
  border-radius:8px;font-size:14px;display:none}
.qcard.open .ans{display:block}
.qcard .cite{margin-top:6px;font-size:12px;color:var(--muted);font-style:italic}
.qcard .actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.chip{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600}
.chip.high{background:#e6f6ec;color:var(--good)} .chip.medium{background:#fdf1dd;color:var(--warn)}
.chip.low{background:#fde9e9;color:var(--bad)} .chip.needs{background:#eef0f6;color:var(--muted)}
.chip.sec{background:#eaf0ff;color:var(--accent)}
.statusbadge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;margin-inline-start:auto}
.statusbadge.new{background:#eef0f6;color:var(--muted)} .statusbadge.learning{background:#fdf1dd;color:var(--warn)}
.statusbadge.known{background:#e6f6ec;color:var(--good)}
.btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:600}
.btn:hover{background:#f5f8ff} .btn.good{color:var(--good)} .btn.warn{color:var(--warn)} .btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.noans{color:var(--muted);font-size:13px;font-style:italic;margin-top:8px}

/* flashcards */
.cards-wrap{max-width:680px;margin:0 auto;text-align:center}
.flash{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:32px 28px;min-height:300px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.flash .meta{font-size:12px;color:var(--muted)}
.flash .q{font-size:20px;font-weight:700;line-height:1.4}
.flash .a{font-size:16px;background:#f3f8f4;border-radius:10px;padding:14px;border-inline-start:3px solid var(--good);text-align:start}
.flash .cite{font-size:12px;color:var(--muted);font-style:italic}
.flash-controls{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.flash-controls .big{padding:12px 22px;border-radius:10px;font-size:15px;font-weight:700}
/* multiple-choice (test) */
.mc-options{display:flex;flex-direction:column;gap:10px;margin-top:8px;text-align:start}
.mc-opt{border:1px solid var(--line);background:#fff;border-radius:10px;padding:13px 16px;font-size:15px;
  text-align:start;transition:.12s;line-height:1.4}
.mc-opt:not(:disabled):hover{border-color:var(--accent);background:#f5f8ff}
.mc-opt:disabled{cursor:default}
.mc-opt.correct{background:#e9f7ef;border-color:var(--good);color:#15633a;font-weight:600}
.mc-opt.wrong{background:#fdeaea;border-color:var(--bad);color:#9b2222}
.mc-feedback{margin-top:14px;padding:12px 14px;border-radius:10px;font-weight:700;text-align:start}
.mc-feedback.good{background:#e9f7ef;color:var(--good)} .mc-feedback.bad{background:#fdeaea;color:var(--bad)}
.mc-feedback .ans{font-weight:400;background:#f7f9fd;border-inline-start:3px solid var(--accent)}
.chip.doubt{background:#fdf1dd;color:var(--warn)}
.counter{margin-top:14px;color:var(--muted);font-size:13px}
.kbd{font-size:11px;color:var(--muted);margin-top:6px}

/* test */
.test-setup,.test-result{max-width:560px;margin:0 auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);text-align:center}
.test-setup h2{margin-top:0}
.test-setup .row{display:flex;gap:10px;justify-content:center;margin:14px 0;flex-wrap:wrap}
.test-setup .opt{border:1px solid var(--line);border-radius:8px;padding:8px 16px;font-weight:600}
.test-setup .opt.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.scorebig{font-size:44px;font-weight:800;color:var(--blue)}
.empty{text-align:center;color:var(--muted);padding:60px 20px}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;
  padding:10px 18px;border-radius:24px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:860px){
  .layout{flex-direction:column}.sidebar{width:100%;position:static}.brand{min-width:0}.subtitle{display:none}
  .exam-tabs{order:3;width:100%}.topbar{flex-wrap:wrap}
}