/* ===== 三国导读 · 主题样式 ===== */
:root{
  --bg:#efe7d6;
  --paper:#fbf6ea;
  --surface:#fffdf8;
  --ink:#2b2620;
  --ink-soft:#6b5f4d;
  --primary:#9e2b25;       /* 汉红 / 印泥 */
  --primary-dark:#7a1f1a;
  --gold:#b8893b;
  --gold-soft:#e9d9b6;
  --border:#e3d6bd;
  --line:#d8c9aa;
  --blue:#2f6f8f;
  --green:#5a7d4f;
  --shadow:0 4px 18px rgba(60,40,20,.12);
  --radius:14px;
  --maxw:1180px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  background:
     radial-gradient(1200px 600px at 80% -10%, #f7efdd 0%, transparent 60%),
     var(--bg);
  color:var(--ink);
  font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer}
img{max-width:100%}
a{color:var(--primary);text-decoration:none}

/* ===== 顶栏 ===== */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:10px;
  height:54px;padding:0 12px;
  background:linear-gradient(180deg,#a8332c,#9e2b25);
  color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.icon-btn{
  border:none;background:rgba(255,255,255,.14);color:#fff;
  width:38px;height:38px;border-radius:10px;font-size:18px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.icon-btn:active{transform:scale(.94)}
.brand{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.brand-mark{
  width:30px;height:30px;border-radius:8px;background:#fff;color:var(--primary);
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:18px;
}
.brand-text{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== 布局 ===== */
.layout{display:flex;min-height:calc(100vh - 54px)}
.sidebar{
  width:236px;flex:0 0 236px;background:var(--paper);
  border-right:1px solid var(--border);
  padding:14px 10px;overflow-y:auto;
}
.side-title{font-size:12px;color:var(--ink-soft);letter-spacing:2px;padding:4px 10px 8px}
.nav{display:flex;flex-direction:column;gap:4px}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;border-radius:11px;border:none;background:transparent;
  color:var(--ink);text-align:left;font-size:15px;width:100%;font-weight:600;
}
.nav-item .ni-ico{font-size:18px;width:22px;text-align:center}
.nav-item:active{background:var(--gold-soft)}
.nav-item.active{background:var(--primary);color:#fff;box-shadow:var(--shadow)}
.nav-item.active .ni-sub{color:rgba(255,255,255,.8)}
.ni-sub{font-size:11px;font-weight:400;color:var(--ink-soft);margin-left:auto}
.side-foot{margin-top:18px;padding:10px;font-size:11px;color:var(--ink-soft);line-height:1.5}

.view{flex:1;min-width:0;padding:16px;max-width:var(--maxw);margin:0 auto;width:100%}
.loading{padding:60px;text-align:center;color:var(--ink-soft)}

/* ===== 通用卡片/组件 ===== */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;margin-bottom:14px;
}
.section-title{display:flex;align-items:center;gap:8px;margin:6px 2px 14px;font-size:19px;font-weight:800}
.section-title .bar{width:5px;height:20px;background:var(--primary);border-radius:3px}
.muted{color:var(--ink-soft)}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.spacer{flex:1}
.chip{
  display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);font-size:13px;color:var(--ink-soft);
}
.chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.chip:active{transform:scale(.96)}
input[type=search],input[type=text],textarea,select{
  width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:11px;
  background:var(--surface);font-size:15px;color:var(--ink);outline:none;
}
input:focus{border-color:var(--primary)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 16px;border-radius:11px;border:none;background:var(--primary);color:#fff;
  font-size:15px;font-weight:700;box-shadow:var(--shadow);
}
.btn.ghost{background:var(--surface);color:var(--primary);border:1px solid var(--primary)}
.btn:active{transform:scale(.97)}
.btn.block{width:100%}

/* 标记/标签 */
.tag{display:inline-block;padding:2px 9px;border-radius:6px;font-size:12px;font-weight:700}
.tag.shu{background:#fbe9e7;color:#9e2b25}
.tag.wei{background:#e7eef6;color:#2f6f8f}
.tag.wu{background:#e9f3e7;color:#4f7d4f}
.tag.qun{background:#efe9dc;color:#7a6a48}
.tag.gold{background:var(--gold-soft);color:#8a5a18}

/* ===== 导读首页 ===== */
.hero{
  background:linear-gradient(135deg,#8a241f,#9e2b25 60%,#b8893b);
  color:#fff;border-radius:18px;padding:22px 20px;margin-bottom:16px;position:relative;overflow:hidden;
}
.hero h1{margin:0 0 6px;font-size:23px;letter-spacing:1px}
.hero p{margin:0;opacity:.92;font-size:14px}
.hero .stats{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.hero .stat{background:rgba(255,255,255,.16);border-radius:12px;padding:10px 14px;min-width:78px}
.hero .stat b{display:block;font-size:20px}
.hero .stat span{font-size:12px;opacity:.9}
.tip-card{background:var(--gold-soft);border:1px dashed var(--gold);border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:14px}
.tip-card b{color:var(--primary-dark)}

/* 阶段网格 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.stage-card{padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
.stage-card .sn{font-size:12px;color:var(--gold);font-weight:700}
.stage-card h4{margin:4px 0 2px;font-size:16px}
.stage-card .rg{font-size:12px;color:var(--ink-soft)}

/* 列表项 */
.list-item{
  display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border);margin-bottom:10px;box-shadow:var(--shadow);
}
.list-item:active{transform:scale(.99)}
.li-main{flex:1;min-width:0}
.li-title{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}
.li-sub{color:var(--ink-soft);font-size:13px;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fav{font-size:20px;color:var(--line);background:none;border:none;flex:0 0 auto;width:34px}
.fav.on{color:#e0a93b}

/* ===== 人物 ===== */
.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.char-card{padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);cursor:pointer}
.char-card .av{width:46px;height:46px;border-radius:50%;background:var(--gold-soft);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;margin-bottom:8px}
.char-card h4{margin:0 0 4px;font-size:16px}
.char-card p{margin:0;font-size:12.5px;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===== 典故 ===== */
.allu-card{padding:14px 16px;border-radius:14px;background:var(--surface);border-left:4px solid var(--primary);
  border-top:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  margin-bottom:11px;box-shadow:var(--shadow);cursor:pointer}
.allu-card h4{margin:0 0 4px;font-size:16px}
.allu-card .src{font-size:12px;color:var(--gold);margin-bottom:6px}
.allu-card .mean{font-size:13.5px;color:var(--ink-soft)}

/* ===== 年表 ===== */
.timeline{position:relative;padding-left:26px}
.timeline:before{content:"";position:absolute;left:8px;top:4px;bottom:4px;width:3px;background:var(--line);border-radius:3px}
.tl-year{position:relative;margin:18px 0 8px}
.tl-year:before{content:"";position:absolute;left:-22px;top:5px;width:13px;height:13px;border-radius:50%;
  background:var(--primary);border:3px solid #fff;box-shadow:0 0 0 2px var(--primary)}
.tl-year .yr{font-weight:800;font-size:16px;color:var(--primary-dark)}
.tl-event{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 12px;margin-bottom:7px;font-size:14px;box-shadow:var(--shadow)}

/* ===== 历史对照 ===== */
.cmp-section{margin-bottom:18px}
.cmp-head{font-weight:800;font-size:16px;padding:8px 12px;border-radius:10px;margin-bottom:8px}
.cmp-head.true{background:#e9f3e7;color:#4f7d4f}
.cmp-head.move{background:#fbf0e3;color:#a9691f}
.cmp-head.fake{background:#fbe9e7;color:#9e2b25}
.cmp-head.miss{background:#e7eef6;color:#2f6f8f}
table.cmp{width:100%;border-collapse:collapse;background:var(--surface);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);font-size:13.5px}
table.cmp th,table.cmp td{border:1px solid var(--border);padding:9px 10px;vertical-align:top;text-align:left}
table.cmp th{background:var(--gold-soft);font-weight:700}

/* ===== 图谱 ===== */
.graph-wrap{width:100%;height:62vh;min-height:420px;border:1px solid var(--border);border-radius:14px;background:
  radial-gradient(circle at 50% 40%, #fffdf8, #f3ead7);box-shadow:var(--shadow);overflow:hidden;position:relative}
.graph-wrap svg{width:100%;height:100%;display:block;touch-action:none;transform-origin:0 0}
.graph-tools{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:6px;background:rgba(255,253,248,.92);border:1px solid var(--border);border-radius:10px;padding:5px 8px;box-shadow:var(--shadow);z-index:5}
.zoom-btn{width:30px;height:30px;border:1px solid var(--border);background:#fff;border-radius:8px;font-size:17px;line-height:1;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.zoom-btn:hover{background:var(--gold-lt)}
.zoom-btn:active{transform:scale(.94)}
.zoom-level{min-width:46px;text-align:center;font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.gnode{cursor:pointer}
.glabel{font-size:11px;fill:var(--ink);pointer-events:none}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin:10px 2px;font-size:13px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.legend i.ev-mark{position:relative;border-radius:50%;box-shadow:inset 0 0 0 4px #fff}
.gp{stroke:#cdbb98;stroke-width:1}
/* 图谱节点：人物标签默认隐藏，放大后显示，避免拥挤 */
#gsvg .glabel.person{font-size:9px;fill:#5b4636;opacity:0;transition:opacity .15s}
#gsvg.zoomed .glabel.person{opacity:.95}
#gsvg .glabel.ev{font-size:10.5px;fill:#3a2a1a;font-weight:600}
/* 事件密集的阵营（如蜀 24 个事件）：文字默认隐藏，悬停该事件节点时显示，避免压盖 */
#gsvg .glabel.ev.ev-hide{opacity:0;transition:opacity .12s}
#gsvg .gnode.gevent:hover .glabel.ev.ev-hide{opacity:1}
#gsvg .gnode.gevent:hover circle{stroke-width:3}
#gsvg .hub{font-size:16px;font-weight:800;opacity:.45;letter-spacing:2px}

/* ===== 思维导图 ===== */
#msvg{width:100%;height:100%;display:block;touch-action:none;transform-origin:0 0;
  background:radial-gradient(circle at 30% 20%, #fffdf8, #f1e7d2)}
.mlink{fill:none;stroke:#cdbb98;stroke-width:1.6}
.mnode rect{stroke:rgba(255,255,255,.65);stroke-width:1;cursor:pointer;transition:filter .15s}
.mnode:hover rect{filter:brightness(1.08)}
.mnode .mtxt{font-size:13px;font-weight:600;pointer-events:none}
.mtoggle{cursor:pointer}
.mtoggle circle{filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.mtoggle-t{font-size:12px;font-weight:800;pointer-events:none}

/* ===== 刷题 ===== */
.quiz-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.q-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow);margin-bottom:14px}
.q-meta{display:flex;gap:8px;align-items:center;margin-bottom:10px;font-size:12px}
.q-text{font-size:16px;font-weight:700;margin-bottom:12px;line-height:1.6}
.opt{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border:1px solid var(--border);border-radius:11px;margin-bottom:9px;background:var(--surface);cursor:pointer;font-size:14.5px}
.opt:active{transform:scale(.99)}
.opt.sel{background:var(--gold-soft);border-color:var(--gold)}
.opt.correct{background:#e9f3e7;border-color:#7bbf6a}
.opt.wrong{background:#fbe9e7;border-color:#e08a82}
.opt .mk{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.opt.correct .mk{background:#5a7d4f;color:#fff;border-color:#5a7d4f}
.opt.wrong .mk{background:#9e2b25;color:#fff;border-color:#9e2b25}
.q-feedback{margin-top:12px;padding:12px;border-radius:11px;background:var(--gold-soft);font-size:14px;display:none}
.q-feedback.show{display:block}
.q-feedback .ans{color:var(--primary-dark);font-weight:700}
.progress{height:8px;background:var(--border);border-radius:6px;overflow:hidden;margin-bottom:8px}
.progress > i{display:block;height:100%;background:var(--primary);width:0;transition:width .3s}

/* ===== 抽屉详情 ===== */
.detail-mask{position:fixed;inset:0;background:rgba(30,20,10,.45);z-index:50;opacity:0;pointer-events:none;transition:.25s}
.detail-mask.show{opacity:1;pointer-events:auto}
.detail-drawer{
  position:fixed;z-index:60;background:var(--paper);box-shadow:-6px 0 30px rgba(0,0,0,.25);
  transition:transform .28s ease;overflow-y:auto;
}
@media(min-width:760px){
  .detail-drawer{top:0;right:0;height:100%;width:520px;transform:translateX(100%)}
  .detail-drawer.open{transform:translateX(0)}
}
@media(max-width:759px){
  .detail-drawer{left:0;right:0;bottom:0;height:86%;border-radius:18px 18px 0 0;transform:translateY(100%)}
  .detail-drawer.open{transform:translateY(0)}
}
.detail-head{position:sticky;top:0;background:var(--paper);display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--border);z-index:2}
.detail-head h3{margin:0;font-size:18px;flex:1}
.detail-body{padding:16px}
.dfield{margin-bottom:14px}
.dfield .fl{font-weight:800;color:var(--primary-dark);font-size:13px;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.dfield .fl:before{content:"";width:4px;height:14px;background:var(--gold);border-radius:2px}
.dfield .fv{font-size:14.5px;line-height:1.75}

/* ===== 搜索浮层 ===== */
.search-panel{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column}
.search-panel[hidden]{display:none}
.search-box{display:flex;gap:8px;padding:12px;background:#9e2b25}
.search-box input{flex:1;border-radius:10px}
.search-result{flex:1;overflow-y:auto;padding:14px}

/* ===== Toast ===== */
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:rgba(40,28,18,.92);color:#fff;
  padding:10px 18px;border-radius:999px;font-size:14px;z-index:90;box-shadow:var(--shadow)}
.toast[hidden]{display:none}

/* ===== 抽屉侧栏（移动端） ===== */
@media(max-width:899px){
  .sidebar{position:fixed;top:54px;bottom:0;left:0;z-index:45;transform:translateX(-100%);transition:transform .25s;box-shadow:6px 0 24px rgba(0,0,0,.2)}
  .sidebar.open{transform:translateX(0)}
  .drawer-mask{position:fixed;inset:54px 0 0 0;background:rgba(30,20,10,.4);z-index:44;opacity:0;pointer-events:none;transition:.25s}
  .drawer-mask.show{opacity:1;pointer-events:auto}
  .view{padding:12px}
}
@media(min-width:900px){
  .drawer-mask{display:none}
  #menuBtn{display:none}
}
.pc-only{display:none}
@media(min-width:900px){.pc-only{display:inline}}
.empty{padding:40px;text-align:center;color:var(--ink-soft)}
.kbd{font-family:monospace;background:var(--gold-soft);padding:1px 6px;border-radius:5px;font-size:13px}