/* 《红楼梦》数字平台 · 样式
   古籍风排版 · 响应式（手机 / 平板 / 笔记本）· 日夜双主题 */

:root{
  --ink:#1f2328; --ink-2:#4b5563; --ink-3:#6b7280;
  --bg:#faf7f2; --bg-2:#f3efe7; --card:#ffffff;
  --line:#e5ded2; --line-2:#d8cfbf;
  --acc:#8c1d18;      /* 朱红 */
  --acc-2:#1f4e79;    /* 靛蓝 */
  --acc-3:#2f6b4f;    /* 苔绿 */
  --gold:#8a6d1f;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05);
  --fs:18px; --lh:1.9;
  --maxw:760px;
  --serif:"Songti SC","Source Han Serif SC","Noto Serif CJK SC",STSong,SimSun,"Georgia",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
}
html[data-theme="night"]{
  --ink:#e8e3da; --ink-2:#b9b2a6; --ink-3:#8d867a;
  --bg:#14161a; --bg-2:#1c1f24; --card:#1b1e23;
  --line:#2c3138; --line-2:#3a4048;
  --acc:#e0736b; --acc-2:#7fb0dd; --acc-3:#7fbf9c; --gold:#d9b44a;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35);
}
html[data-theme="sepia"]{
  --bg:#f6ecd9; --bg-2:#efe2c9; --card:#fbf5e8; --line:#e0d2b6;
}
html[data-fs="s"]{--fs:16px} html[data-fs="m"]{--fs:18px}
html[data-fs="l"]{--fs:20px} html[data-fs="xl"]{--fs:23px}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs); line-height:var(--lh);
  overflow-wrap:break-word; -webkit-font-smoothing:antialiased;
}
a{color:var(--acc-2); text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%; height:auto}

/* ---------- 顶栏 ---------- */
.top{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--line);
}
.top .in{
  max-width:1180px; margin:0 auto; padding:.5rem .9rem;
  display:flex; align-items:center; gap:.7rem;
}
.brand{font-family:var(--serif); font-weight:700; font-size:1.06em; color:var(--ink); white-space:nowrap}
.brand b{color:var(--acc)}
.top nav{display:flex; gap:.15rem; margin-left:auto; flex-wrap:wrap}
.top nav a{
  padding:.32rem .6rem; border-radius:8px; color:var(--ink-2); font-size:.9em; white-space:nowrap;
}
.top nav a:hover{background:var(--bg-2); text-decoration:none; color:var(--ink)}
.top nav a[aria-current="page"]{background:var(--acc); color:#fff}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--line-2);
  color:var(--ink); border-radius:8px; padding:.3rem .55rem; font-size:1em; cursor:pointer}

/* ---------- 容器 ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:1.1rem .9rem 4rem}
.narrow{max-width:var(--maxw); margin:0 auto}
.wide{max-width:1180px; margin:0 auto}

/* ---------- 首页 ---------- */
.hero{padding:2.6rem 0 1.2rem; text-align:center}
.hero h1{font-family:var(--serif); font-size:clamp(1.9rem,5.4vw,3rem); margin:.1rem 0 .5rem; letter-spacing:.06em}
.hero h1 b{color:var(--acc)}
.hero p{color:var(--ink-2); margin:.35rem auto; max-width:44em}
.hero .sub{font-family:var(--serif); color:var(--ink-3); font-size:.95em; letter-spacing:.22em}
.stats{display:flex; gap:.55rem; justify-content:center; flex-wrap:wrap; margin:1.3rem 0 .4rem}
.stats a{background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:.5rem .8rem; min-width:5.4rem; box-shadow:var(--shadow); color:var(--ink);
  display:block; transition:.16s}
.stats a:hover{border-color:var(--acc); transform:translateY(-2px); text-decoration:none}
.stats b{display:block; font-size:1.16em; color:var(--acc); font-family:var(--serif)}
.stats span{font-size:.78em; color:var(--ink-3)}

.cards{display:grid; gap:.85rem; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); margin:1.1rem 0}
.card{
  display:block; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:1rem 1.05rem; box-shadow:var(--shadow); transition:.16s; color:var(--ink);
}
.card:hover{transform:translateY(-2px); text-decoration:none; border-color:var(--acc)}
.card .k{font-family:var(--serif); font-size:1.06em; font-weight:700; margin-bottom:.28rem; display:flex; gap:.45rem; align-items:baseline}
.card .k i{font-style:normal; font-size:.72em; color:#fff; background:var(--acc); border-radius:5px; padding:.08rem .34rem}
.card .k i.c{background:var(--acc-2)} .card .k i.b{background:var(--acc-3)}
.card p{margin:.2rem 0 0; color:var(--ink-2); font-size:.9em; line-height:1.7}

/* ---------- 章节列表 ---------- */
.chapgrid{display:grid; gap:.34rem; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); margin:1rem 0}
.chapgrid a{
  background:var(--card); border:1px solid var(--line); border-radius:9px;
  padding:.5rem .6rem; font-size:.88em; color:var(--ink-2); display:flex; gap:.45rem;
}
.chapgrid a:hover{border-color:var(--acc); color:var(--ink); text-decoration:none}
.chapgrid a b{color:var(--acc); font-family:var(--serif); flex:0 0 auto}
.chapgrid a span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- 正文 ---------- */
.reader{font-family:var(--serif); font-size:calc(var(--fs) * 1.06); line-height:calc(var(--lh) * 1.04)}
.reader p{margin:0 0 1.05em; text-indent:2em}
.reader h2,.reader h3{text-indent:0}
h1,h2,h3,h4{font-family:var(--serif); line-height:1.45}
h1{font-size:clamp(1.4rem,3.6vw,2rem)} h2{font-size:1.24em; margin:1.7em 0 .6em}
h3{font-size:1.1em; margin:1.4em 0 .5em} h4{font-size:1em}
.ctitle{font-family:var(--serif); text-align:center; font-size:clamp(1.16rem,3.4vw,1.6rem); margin:.6rem 0 .2rem}
.cmeta{text-align:center; color:var(--ink-3); font-size:.84em; margin-bottom:1.1rem}

/* 脂批 */
.cmt{
  font-family:var(--sans); font-size:.82em; color:var(--acc);
  border-bottom:1px dashed color-mix(in srgb,var(--acc) 45%,transparent);
  cursor:pointer; padding:0 .1em; margin:0 .12em;
}
.cmt.type-眉批{color:var(--acc-2); border-bottom-color:color-mix(in srgb,var(--acc-2) 45%,transparent)}
.cmt.type-双行夹批{color:var(--acc-3); border-bottom-color:color-mix(in srgb,var(--acc-3) 45%,transparent)}
.cmt.type-总批{color:var(--gold)}
.cmt.on{background:color-mix(in srgb,var(--acc) 12%,transparent); border-radius:4px}
.cmtx{
  display:none; font-family:var(--sans); font-size:.86em; color:var(--ink-2);
  background:var(--bg-2); border-left:3px solid var(--acc); border-radius:0 8px 8px 0;
  padding:.45rem .7rem; margin:.3rem 0 .8rem; line-height:1.75;
}
.cmtx.show{display:block}
.cmtx b{color:var(--acc); font-weight:600}
html[data-cmt="hide"] .cmt{display:none}
html[data-cmt="hide"] .cmtx{display:none}

/* ---------- 工具条 ---------- */
.tools{
  display:flex; gap:.4rem; flex-wrap:wrap; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:.5rem .6rem; margin:.9rem 0; box-shadow:var(--shadow);
}
.tools .lbl{font-size:.78em; color:var(--ink-3); margin-right:.1rem}
.btn{
  background:var(--bg-2); border:1px solid var(--line-2); color:var(--ink);
  border-radius:8px; padding:.28rem .6rem; font-size:.84em; cursor:pointer; font-family:inherit;
  display:inline-block; line-height:1.5;
}
.btn:hover{border-color:var(--acc); color:var(--acc)}
.btn.on{background:var(--acc); border-color:var(--acc); color:#fff}
.btn.on:hover{color:#fff}
.btn.sm{padding:.2rem .46rem; font-size:.78em}
a.btn:hover{text-decoration:none}

/* ---------- 表格 ---------- */
.tw{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1rem 0; border:1px solid var(--line); border-radius:10px; background:var(--card)}
table{border-collapse:collapse; width:100%; font-size:.86em}
th,td{padding:.5rem .62rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
th{background:var(--bg-2); font-family:var(--serif); font-weight:700; white-space:nowrap}
tr:last-child td{border-bottom:0}

blockquote{
  margin:1rem 0; padding:.65rem .9rem; background:var(--bg-2);
  border-left:3px solid var(--acc); border-radius:0 8px 8px 0; color:var(--ink-2); font-size:.94em;
}
blockquote p{margin:.25rem 0}
code{background:var(--bg-2); padding:.06em .34em; border-radius:4px; font-size:.92em}
pre{background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:.7rem .85rem;
  overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1rem 0; font-size:.84em; line-height:1.65}
pre code{background:none; padding:0; font-size:1em; white-space:pre}
ul,ol{padding-left:1.5em} li{margin:.22em 0}
hr{border:0; border-top:1px solid var(--line); margin:1.6rem 0}

/* ---------- 人物 ---------- */
.pgrid{display:grid; gap:.6rem; grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.pcard{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.7rem .75rem; color:var(--ink)}
.pcard:hover{border-color:var(--acc); text-decoration:none; transform:translateY(-2px); transition:.16s}
.pcard b{font-family:var(--serif); font-size:1.04em; display:block}
.pcard span{font-size:.8em; color:var(--ink-3); display:block; margin-top:.15rem}
.pcard .tag{display:inline-block; font-size:.72em; color:var(--acc); border:1px solid var(--acc); border-radius:5px; padding:0 .3rem; margin-top:.35rem}
.kv{display:flex; gap:.5rem; flex-wrap:wrap; font-size:.84em; color:var(--ink-3); margin:.5rem 0}
.kv span{background:var(--bg-2); border-radius:6px; padding:.16rem .5rem}

/* 事件/证据列表 */
.ev{list-style:none; padding:0; margin:.5rem 0}
.ev li{border-left:2px solid var(--line-2); padding:.15rem 0 .15rem .7rem; margin:.4rem 0; font-size:.92em}
.ev li b{color:var(--acc)}
.ev li em{font-style:normal; color:var(--ink-3); font-size:.9em}

/* ---------- 音频 ---------- */
.audio{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.7rem .8rem; margin:1rem 0; box-shadow:var(--shadow)}
.audio .t{font-family:var(--serif); font-weight:700; margin-bottom:.45rem; display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap}
.audio .t small{font-weight:400; color:var(--ink-3); font-family:var(--sans); font-size:.76em}
audio{width:100%; margin-top:.2rem}

/* ---------- 检索 ---------- */
.searchbar{display:flex; gap:.45rem; margin:1rem 0}
.searchbar input{
  flex:1; min-width:0; font-size:1em; font-family:inherit; padding:.6rem .8rem;
  border:1px solid var(--line-2); border-radius:10px; background:var(--card); color:var(--ink);
}
.hits{list-style:none; padding:0; margin:1rem 0}
.hits li{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.6rem .75rem; margin:.45rem 0}
.hits .h{font-size:.82em; color:var(--ink-3); margin-bottom:.2rem; display:flex; gap:.5rem; flex-wrap:wrap}
.hits .h b{color:var(--acc)}
.hits .x{font-family:var(--serif); font-size:.95em}
mark{background:color-mix(in srgb,var(--gold) 42%,transparent); color:inherit; border-radius:3px; padding:0 .1em}

/* ---------- 图谱 ---------- */
#graph{width:100%; height:min(74vh,660px); background:var(--card); border:1px solid var(--line); border-radius:12px; touch-action:none; display:block; cursor:grab}
#graph:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
#gstat{min-height:2.4em; align-items:center; font-size:.86em; color:var(--ink-2); margin:.5rem 0}
#gstat.on{border-color:var(--acc); color:var(--ink)}
#gstat b{color:var(--acc); font-family:var(--serif); font-size:1.1em}
#gstat a{font-weight:600}

/* 图谱点选后的人物卡（画像＋链接） */
.gcard{display:none}
.gcard.on{display:block; margin:.7rem 0 1rem}
.gcard .gc{display:flex; gap:1rem; align-items:flex-start; background:var(--card);
  border:1px solid var(--acc); border-radius:14px; padding:.9rem; box-shadow:var(--shadow)}
.gcard img{width:150px; flex:0 0 150px; border-radius:10px; border:1px solid var(--line)}
.gcard .noplate{width:150px; flex:0 0 150px; min-height:190px; border:1px dashed var(--line-2);
  border-radius:10px; display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--ink-3); font-size:.78em; line-height:1.7; background:var(--bg-2)}
.gcard .gi{flex:1; min-width:0}
.gcard h3{font-family:var(--serif); font-size:1.3em; margin:0 0 .3rem; color:var(--acc)}
.gcard .gk{font-size:.82em; color:var(--ink-3); margin-bottom:.5rem}
.gcard blockquote{margin:.4rem 0 .7rem; font-family:var(--serif); font-size:.92em; padding:.45rem .7rem}
@media (max-width:560px){
  .gcard .gc{flex-direction:column}
  .gcard img,.gcard .noplate{width:100%; flex:0 0 auto; min-height:0}
}
.glegend{font-size:.8em; color:var(--ink-3); margin:.5rem 0}

/* 热力图 */
.hm{overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--card); padding:.5rem}
.hm table{border-collapse:separate; border-spacing:1px; font-size:10px; width:auto}
.hm th,.hm td{padding:0; border:0; width:9px; min-width:9px; height:13px}
.hm th.rowh{position:sticky; left:0; background:var(--card); width:5.2em; min-width:5.2em; text-align:right; padding-right:.35rem;
  font-family:var(--serif); font-size:11px; white-space:nowrap; z-index:2}
.hm th.colh{writing-mode:vertical-rl; font-size:9px; color:var(--ink-3); height:2.4em}
.hm td.c{cursor:pointer}
.hm td.c:hover{outline:1px solid var(--acc)}

/* ---------- 页脚 ---------- */
footer{border-top:1px solid var(--line); margin-top:3rem; padding:1.4rem .9rem 2.4rem; color:var(--ink-3); font-size:.84em}
footer .in{max-width:1180px; margin:0 auto; display:flex; gap:1rem; flex-wrap:wrap; justify-content:space-between}
footer a{color:var(--ink-3)}

/* ---------- 分页 ---------- */
.pager{display:flex; justify-content:space-between; gap:.6rem; margin:1.6rem 0}
.pager a{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.5rem .8rem; font-size:.88em; flex:1; text-align:center}
.pager a:hover{border-color:var(--acc); text-decoration:none}
.pager a.dis{opacity:.4; pointer-events:none}

/* 人物页公版画像 */
figure.portrait{margin:1rem auto 1.1rem; max-width:340px; text-align:center}
figure.portrait img{width:100%; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow)}
figure.portrait figcaption{font-size:.78em; color:var(--ink-3); margin-top:.45rem; line-height:1.6}

/* ---------- 提示 ---------- */
.note{background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:.6rem .8rem; font-size:.86em; color:var(--ink-2); margin:.9rem 0}
.badge{display:inline-block; font-size:.72em; padding:.08rem .4rem; border-radius:5px; background:var(--bg-2); border:1px solid var(--line-2); color:var(--ink-3); margin-right:.3rem}
.badge.a{background:color-mix(in srgb,var(--acc) 14%,transparent); color:var(--acc); border-color:transparent}
.badge.c{background:color-mix(in srgb,var(--acc-2) 14%,transparent); color:var(--acc-2); border-color:transparent}
.badge.b{background:color-mix(in srgb,var(--acc-3) 14%,transparent); color:var(--acc-3); border-color:transparent}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .burger{display:block}
  .top nav{
    display:none; position:absolute; left:.6rem; right:.6rem; top:100%;
    background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.5rem;
    box-shadow:var(--shadow); flex-direction:column; margin:0;
  }
  .top nav.open{display:flex}
  .top nav a{padding:.55rem .7rem}
}
@media (max-width:640px){
  :root{--maxw:100%}
  .wrap{padding:.8rem .7rem 3rem}
  .hero{padding:1.5rem 0 .7rem}
  .cards{grid-template-columns:1fr}
  .chapgrid{grid-template-columns:1fr 1fr; gap:.28rem}
  .chapgrid a{padding:.42rem .45rem; font-size:.82em}
  .pgrid{grid-template-columns:1fr 1fr}
  th,td{padding:.42rem .5rem}
  .reader{text-indent:0}
}
@media print{
  .top,.tools,.pager,.burger,footer{display:none}
  body{background:#fff}
}

/* 异文对照 */
.cmp{margin:1rem 0}
details.same{background:var(--bg-2); border:1px dashed var(--line-2); border-radius:9px; padding:.4rem .6rem; margin:.5rem 0; font-size:.86em}
details.same summary{cursor:pointer; color:var(--ink-3)}
details.same .sp{color:var(--ink-3); font-size:.94em; margin:.4rem 0}
.d{border-left:3px solid var(--line-2); padding:.1rem 0 .1rem .7rem; margin:.5rem 0}
.d p{margin:.2rem 0; font-family:var(--serif)}
.d .dl{font-size:.74em; color:#fff; background:var(--ink-3); border-radius:5px; padding:.05rem .4rem}
.d.da{border-left-color:var(--acc)} .d.da .dl{background:var(--acc)}
.d.db{border-left-color:var(--acc-2)} .d.db .dl{background:var(--acc-2)}
figure{margin:0}
.cmt.type-侧批{color:var(--acc); border-bottom-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.cmt.type-眉批{color:var(--acc-2); border-bottom-color:color-mix(in srgb,var(--acc-2) 45%,transparent)}
.cmt.type-双行夹批,.cmt.type-夹批{color:var(--acc-3); border-bottom-color:color-mix(in srgb,var(--acc-3) 45%,transparent)}
.cmt.type-旁批{color:var(--gold)}
.cmt.type-回前总批,.cmt.type-回末总批,.cmt.type-回前总评,.cmt.type-回末总评,.cmt.type-总批,.cmt.type-总评{color:var(--gold); border-bottom-color:color-mix(in srgb,var(--gold) 50%,transparent)}