:root{
  --bg:#f4f6fa;
  --panel:#ffffff;
  --line:#e3e8f0;
  --ink:#1f2937;
  --ink-2:#4b5563;
  --ink-3:#8a94a6;
  --brand:#2563eb;
  --brand-soft:#eef3ff;
  --star:#f59e0b;
  --ok:#16a34a;
  --ok-soft:#eaf7ef;
  --bad:#dc2626;
  --bad-soft:#fdeeee;
  --warn:#b45309;
  --warn-soft:#fdf4e3;
  --radius:12px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 6px 20px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:15px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
b{color:#111827;font-weight:600}

/* ---------- top ---------- */
.topbar{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  padding:14px 22px;background:var(--panel);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30;
}
.brand{display:flex;gap:12px;align-items:center}
.logo{
  width:40px;height:40px;border-radius:11px;flex:0 0 auto;
  background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;letter-spacing:1px;
}
.brand-text h1{margin:0;font-size:17px;line-height:1.35}
.brand-text .sub{margin:2px 0 0;font-size:12px;color:var(--ink-3)}
.modes{display:flex;gap:6px;background:#eef1f7;padding:4px;border-radius:10px}
.modes button{
  border:0;background:transparent;padding:7px 16px;border-radius:8px;
  font-size:14px;color:var(--ink-2);cursor:pointer;transition:.15s;
}
.modes button:hover{color:var(--ink)}
.modes button.active{background:var(--panel);color:var(--brand);font-weight:600;box-shadow:0 1px 3px rgba(16,24,40,.1)}

/* ---------- chapters ---------- */
.chapters{
  display:flex;flex-wrap:wrap;gap:8px;padding:14px 22px 0;
}
.chapters button{
  border:1px solid var(--line);background:var(--panel);border-radius:10px;
  padding:8px 14px;cursor:pointer;text-align:left;transition:.15s;font-size:14px;color:var(--ink-2);
}
.chapters button:hover{border-color:#c8d3e6}
.chapters button.active{border-color:var(--brand);background:var(--brand-soft);color:var(--brand);font-weight:600}
.chapters .cbar{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
.chapters button.active .cbar{color:#5b7fd4}

/* ---------- filter bar ---------- */
.filterbar{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  padding:12px 22px;margin-top:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--panel);position:sticky;top:69px;z-index:20;
}
.group{display:flex;gap:6px;align-items:center}
.group.right{margin-left:auto}
.lb{font-size:12px;color:var(--ink-3)}
.filterbar button{
  border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 11px;
  font-size:13px;color:var(--ink-2);cursor:pointer;transition:.15s;
}
.filterbar button:hover{border-color:#c8d3e6}
.filterbar button.active{background:var(--brand);border-color:var(--brand);color:#fff}
.filterbar button.ghost{background:transparent}
.stat{font-size:12px;color:var(--ink-3)}

/* ---------- layout ---------- */
.layout{
  display:grid;grid-template-columns:272px minmax(0,1fr);gap:20px;
  padding:20px 22px 40px;align-items:start;
}
.sidebar{
  position:sticky;top:132px;max-height:calc(100vh - 150px);overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px;
  box-shadow:var(--shadow);
}
.sidebar h3{margin:2px 0 10px;font-size:13px;color:var(--ink-3);font-weight:600;letter-spacing:.5px}
.sidebar .nav-item{
  display:flex;gap:8px;align-items:baseline;justify-content:space-between;
  padding:6px 8px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--ink-2);line-height:1.5;
}
.sidebar .nav-item:hover{background:#f2f5fa;color:var(--ink)}
.sidebar .nav-item.on{background:var(--brand-soft);color:var(--brand);font-weight:600}
.sidebar .nav-item .nm{flex:1}
.sidebar .nav-item .st{font-size:10px;color:var(--star);flex:0 0 auto}
.sidebar .sec-title{font-size:12px;color:var(--ink-3);margin:12px 0 4px;font-weight:600}
.sidebar .empty{font-size:12px;color:var(--ink-3);padding:8px}

.content{min-width:0}

/* ---------- generic card ---------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow);
}
.card > h2{margin:0 0 12px;font-size:16px;display:flex;align-items:center;gap:8px}
.card > h2 .ic{font-size:15px}

/* 考情 */
.examgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:4px}
.examgrid .it{background:#f7f9fc;border:1px solid #edf1f7;border-radius:9px;padding:9px 11px}
.examgrid .k{font-size:11px;color:var(--ink-3)}
.examgrid .v{font-size:13px;color:var(--ink);font-weight:600;margin-top:2px}

/* 主线 */
.mainline p{margin:0 0 10px}
.flow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.flow .node{
  background:var(--brand-soft);color:#1d4ed8;border-radius:8px;padding:5px 11px;font-size:13px;font-weight:600;
}
.flow .arw{color:var(--ink-3);font-size:13px}

/* section */
.section-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:26px 0 10px;padding-bottom:8px;border-bottom:2px solid var(--line);
  scroll-margin-top:150px;
}
.section-head h2{margin:0;font-size:17px}
.section-head .skip{font-size:11px;color:var(--ink-3);background:#f1f3f7;border-radius:6px;padding:2px 7px}

/* point */
.point{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid #cfd8e8;
  border-radius:10px;padding:11px 14px;margin-bottom:9px;transition:.15s;
}
.point:hover{border-left-color:var(--brand)}
.point[data-star="5"]{border-left-color:#dc2626}
.point[data-star="4"]{border-left-color:var(--star)}
.point[data-star="3"]{border-left-color:#3b82f6}
.point .ph{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.point .pq{font-weight:600;font-size:14.5px;color:#111827}
.point .pa{font-size:14px;color:var(--ink-2);margin-top:5px}
.point .stars{color:var(--star);font-size:11px;letter-spacing:1px}
.point .tag{
  font-size:10.5px;padding:1px 7px;border-radius:20px;background:#eef2f8;color:#5b6b85;flex:0 0 auto;
}
.point .tag.hi{background:#fdecec;color:#c0392b}
.point .tag.mn{background:#eef7ee;color:#1f7a45}
.point .note{
  margin-top:7px;font-size:12.5px;color:var(--warn);background:var(--warn-soft);
  border-radius:7px;padding:6px 10px;
}
.point .note b{color:#92400e}
.point .mnem{
  display:inline-block;margin-top:6px;font-size:12.5px;color:#1f7a45;background:var(--ok-soft);
  border-radius:7px;padding:3px 10px;
}

/* master checkbox */
.point .mark{
  flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:7px;
  font-size:11px;padding:2px 8px;cursor:pointer;color:var(--ink-3);
}
.point .mark:hover{border-color:var(--ok);color:var(--ok)}
.point.mastered{opacity:.62;background:#fbfdfc}
.point.mastered .mark{background:var(--ok);border-color:var(--ok);color:#fff}

/* table */
.tbl-wrap{overflow-x:auto;margin:10px 0 4px}
table.tbl{border-collapse:collapse;width:100%;font-size:13px;min-width:420px}
table.tbl th,table.tbl td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
table.tbl th{background:#f7f9fc;color:var(--ink-2);font-weight:600;white-space:nowrap}
table.tbl tr:nth-child(even) td{background:#fcfdff}
table.tbl td:first-child{font-weight:600;color:#374151;background:#fafbfe}

/* mnemonic list */
.mnlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.mnitem{background:#f7fbf7;border:1px solid #e4f1e6;border-radius:9px;padding:10px 12px}
.mnitem .mk{font-size:14px;font-weight:700;color:#1f7a45;letter-spacing:1px}
.mnitem .mf{font-size:12px;color:var(--ink-3);margin-top:3px}
.mnitem .mi{font-size:12.5px;color:var(--ink-2);margin-top:5px}

/* ---------- cards mode ---------- */
.flash{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:8px;min-height:340px;display:flex;flex-direction:column;
}
.flash .fb-head{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;font-size:12px;color:var(--ink-3)}
.flash .fb-body{
  flex:1;cursor:pointer;border-radius:11px;background:#fbfcff;border:1px dashed #d9e2f1;
  padding:26px 28px;display:flex;flex-direction:column;justify-content:center;gap:10px;
}
.flash .fb-body .fb-sec{font-size:12px;color:var(--brand);font-weight:600}
.flash .fb-body .fb-q{font-size:19px;font-weight:700;color:#111827;line-height:1.6}
.flash .fb-body .fb-a{font-size:15px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:12px}
.flash .fb-body .hidden-a{color:var(--ink-3);font-size:13px}
.flash .fb-foot{display:flex;gap:8px;align-items:center;padding:10px 12px}
.flash .fb-foot button{
  border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 16px;cursor:pointer;
  font-size:14px;color:var(--ink-2)
}
.flash .fb-foot button:hover{border-color:var(--brand);color:var(--brand)}
.flash .fb-foot .spacer{margin-left:auto}

/* ---------- quiz mode ---------- */
.quiz-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.quiz-head .qt{font-size:13px;color:var(--ink-3)}
.qopt{
  display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;
  padding:10px 13px;margin-bottom:8px;cursor:pointer;transition:.15s;font-size:14px;background:#fff;
}
.qopt:hover{border-color:#bcd0ee;background:#fafcff}
.qopt .ky{
  flex:0 0 auto;width:22px;height:22px;border-radius:6px;background:#eef2f8;color:#5b6b85;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.qopt.picked{border-color:var(--brand);background:var(--brand-soft)}
.qopt.right{border-color:var(--ok);background:var(--ok-soft)}
.qopt.right .ky{background:var(--ok);color:#fff}
.qopt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.qopt.wrong .ky{background:var(--bad);color:#fff}
.qexplain{
  border-radius:10px;padding:11px 14px;margin-top:10px;font-size:13.5px;
  background:#f7f9fc;border:1px solid var(--line);color:var(--ink-2)
}
.qexplain .rt{font-weight:700;margin-bottom:4px}
.qexplain .rt.ok{color:var(--ok)}
.qexplain .rt.bad{color:var(--bad)}
.quiz-nav{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.quiz-nav button{
  border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 16px;cursor:pointer;font-size:14px;color:var(--ink-2)
}
.quiz-nav button:hover{border-color:var(--brand);color:var(--brand)}
.quiz-nav .spacer{margin-left:auto}
.progressline{height:6px;background:#eef1f7;border-radius:6px;overflow:hidden;margin:10px 0 4px}
.progressline i{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#7c3aed);width:0;transition:.25s}

/* ---------- quiz 增强：来源 / 正确率 / 友好解析 ---------- */
.qbadges{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.badge{
  font-size:11px;padding:2px 8px;border-radius:20px;background:#eef2f8;color:#5b6b85;
  border:1px solid transparent;white-space:nowrap;
}
.badge.bank{background:#eef3ff;color:#1d4ed8;border-color:#d8e3ff}
.badge.book{background:#f1f3f7;color:#5b6b85}
.badge.rate.low{background:#fdeeee;color:#b91c1c;border-color:#f7d4d4}
.badge.rate.mid{background:#fdf4e3;color:var(--warn);border-color:#f6e3c0}
.badge.rate.high{background:#eaf7ef;color:#15803d;border-color:#d2ebdb}

.qstem{font-size:16px;font-weight:600;line-height:1.75;margin-bottom:12px}
.qhint{font-size:13px;color:var(--ink-3);background:#fafbfe;border:1px dashed var(--line);border-radius:9px;padding:10px 12px}

.qexplain .qansline{
  font-size:14px;font-weight:600;color:#14532d;background:var(--ok-soft);
  border-radius:8px;padding:7px 11px;margin:6px 0 9px;
}
.qexplain .qansline b{color:#15803d;font-size:15px}
.qexplain .qexp-body{font-size:13.5px;line-height:1.8}
.qexplain .qexp-body b{color:#111827}

.qimgs{margin-top:11px;display:flex;flex-direction:column;gap:6px}
.qimgs img{
  max-width:100%;border:1px solid var(--line);border-radius:9px;background:#fff;
  padding:6px;display:block;cursor:zoom-in;
}
.qimgs a{display:block}
.qimgs .imgcap{font-size:11.5px;color:var(--ink-3)}

.qanchor{
  margin-top:11px;display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  background:var(--brand-soft);border-radius:9px;padding:8px 11px;
}
.qanchor .goto{
  border:1px solid #c7d7f7;background:#fff;color:#1d4ed8;border-radius:8px;
  padding:5px 12px;font-size:13px;font-weight:600;cursor:pointer;
}
.qanchor .goto:hover{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
.qanchor .anote{font-size:11.5px;color:#5b7fd4}

.qtip{margin-top:10px;border-top:1px dashed var(--line);padding-top:9px;display:flex;flex-direction:column;gap:6px}
.qtip .tiprow{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.7}
.qtip .tipn{
  flex:0 0 auto;background:var(--warn-soft);color:var(--warn);border-radius:6px;
  padding:1px 8px;font-weight:600;font-size:11.5px;
}
.qtip .tipd{color:#6b7280}

.tipscard h2{margin-bottom:12px}
.tipsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.tipitem{background:#f7f9fc;border:1px solid #edf1f7;border-radius:9px;padding:9px 12px}
.tipitem .tn{font-size:13.5px;font-weight:700;color:#1d4ed8}
.tipitem .td{font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.7}

/* ---------- 讲义关系图 ---------- */
.diagram{background:#fbfcff}
.diagram .dg-title{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--ink-2)}
.diagram svg{max-width:100%;height:auto;display:block;margin:0 auto}
.diagram .dg-note{margin:10px 0 0;font-size:12.5px;color:var(--ink-3)}

@keyframes flashSec{
  0%{background:#fff8e1}
  100%{background:transparent}
}
.flash-sec{animation:flashSec 1.1s ease-in-out 2;border-radius:8px}

.emptybox{
  background:var(--panel);border:1px dashed var(--line);border-radius:var(--radius);
  padding:40px;text-align:center;color:var(--ink-3);font-size:14px
}

.foottip{
  padding:14px 22px 30px;font-size:12px;color:var(--ink-3);text-align:center
}

@media (max-width:980px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static;max-height:none;order:2}
  .filterbar{position:static}
  .topbar{position:static}
}