/*
  法考速记卷宗 · 设计系统基础样式（全站唯一样式真相来源）
  ------------------------------------------------------------
  用法：每个页面在 <head> 里直接外链本文件 ——
    <link rel="stylesheet" href="tokens.css">
  页面自己的 <style> 只保留两类内容：
    1) 本页主题色          :root{ --accent: …; }
    2) 该页专属、别处不复用的组件样式
  不要再把本文件整段内联进页面——那会产生多份会各自漂移的副本，难以维护。
  改任何 token / 公共组件，只改这一处，全站生效（页面通过缓存共享，加载更快）。
  ------------------------------------------------------------
*/

:root{
  --desk:#1d1712; --folder:#efe4c8; --folder-2:#e2d2a8;
  --ink:#2a2420; --ink-soft:#6b5e4d; --brass:#b8893b;
  --seal:#a52422; --indigo:#2b4960; --jade:#3f6b4f; --warn:#9a6a1e;
  --accent:var(--indigo); /* 每页按主题覆盖：刑法用 --seal，民法用 --indigo，功能页用 --brass */
  --line:rgba(42,36,32,.16);
  --shadow:0 14px 30px rgba(0,0,0,.38);
  --glow:rgba(184,137,59,.10); /* 书桌一角的微光，默认黄铜；页面可在 :root 覆盖成科目色 */
}

/* ---------- 基础 / 书桌背景 ---------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 48px),
    radial-gradient(circle at 80% -10%, var(--glow), transparent 40%),
    var(--desk);
  color:var(--folder);
  font-family:'Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  min-height:100vh; padding:28px 18px 60px;
}
::selection{background:var(--brass); color:#fff;}
.page{max-width:1080px; margin:0 auto;} /* 默认宽版：网格 / 对比 */
.page.reading{max-width:980px;}  /* 流程图 / 口诀等阅读型版式 */
.page.narrow{max-width:760px;}   /* 留言板等单栏窄版 */
.page.doc{max-width:620px; width:100%;}  /* 404 等单卡文书（配合 body 的 flex 居中） */

/* ---------- 顶部导航 ---------- */
.topbar{display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:13px;
  color:var(--folder-2); opacity:.85; padding-bottom:14px; margin-bottom:26px;
  border-bottom:1px dashed rgba(239,228,200,.25); flex-wrap:wrap;}
.crumb b{color:var(--brass); font-weight:700;}
.pager{display:flex; gap:16px;}
.pager a{color:var(--folder); text-decoration:none; opacity:.75; border-bottom:1px solid transparent;}
.pager a:hover{opacity:1; border-color:var(--brass);}

/* ---------- 卷首叠纸卡 ---------- */
.hero{position:relative; background:linear-gradient(180deg, var(--folder), var(--folder-2));
  border-radius:14px; padding:26px 28px 22px; margin-bottom:30px; box-shadow:var(--shadow); color:var(--ink);}
.hero::before,.hero::after{content:""; position:absolute; inset:0; border-radius:14px;
  background:var(--folder-2); border:1px solid var(--line); z-index:-1;}
.hero::before{transform:rotate(-1.3deg) translate(-7px,5px);}
.hero::after{transform:rotate(1.6deg) translate(9px,7px); opacity:.75;}
.tab{position:absolute; top:-16px; left:26px; background:var(--accent); color:var(--folder);
  font-family:'Noto Serif SC',serif; font-weight:900; font-size:13px; padding:5px 14px 6px;
  border-radius:6px 6px 2px 2px; letter-spacing:.08em; box-shadow:0 -2px 6px rgba(0,0,0,.18);}
.hero h1{font-family:'Noto Serif SC',serif; font-weight:900; font-size:clamp(26px,4.5vw,38px); margin:6px 0 10px;}
.hero-desc,.hero p{font-size:14.5px; line-height:1.75; color:var(--ink-soft); max-width:600px; margin:0;}
.hero .cite{font-family:'SF Mono',Consolas,monospace; font-size:12px; color:var(--ink-soft);
  border:1px solid var(--ink-soft); border-radius:6px; padding:2px 9px; display:inline-block; margin-bottom:10px;}

.tags{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px;}
.subject-tag{background:var(--accent); color:#fff; font-size:12px; font-weight:700;
  padding:4px 11px; border-radius:99px; letter-spacing:.05em;}
.cite-chip{font-family:'SF Mono',Consolas,'Noto Sans SC',monospace; font-size:12px;
  border:1px solid var(--ink-soft); color:var(--ink-soft); padding:3px 10px; border-radius:6px; letter-spacing:.02em;}
.freq{font-size:12.5px; color:var(--seal); font-weight:700;}

/* ---------- 高亮笔 ---------- */
mark{
  background:linear-gradient(100deg, transparent 0%, var(--brass) 6%, var(--brass) 94%, transparent 100%);
  background-size:100% 60%; background-repeat:no-repeat; background-position:0 70%;
  color:var(--ink); font-weight:700; padding:0 3px;
}

/* ---------- 印章 ---------- */
.seal{width:70px; height:70px; border-radius:50%; border:2.5px double var(--accent); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-family:'Ma Shan Zheng',cursive; font-size:15px;
  transform:rotate(-9deg); opacity:.88; mix-blend-mode:multiply; text-align:center; line-height:1.15;}
.stamp-sq{width:62px; height:62px; border:3px double var(--accent); color:var(--accent);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:'Ma Shan Zheng',cursive; font-size:21px; line-height:1.05;
  background:rgba(0,0,0,.03); mix-blend-mode:multiply; opacity:.92;}

/* ---------- 网格卡片版式 ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.card{position:relative; background:var(--folder); border-radius:12px; padding:22px 20px 20px;
  box-shadow:0 8px 18px rgba(0,0,0,.28); color:var(--ink); border-top:4px solid var(--accent);}
.card.wide{grid-column:span 2;}
.card .num{position:absolute; top:14px; right:16px; font-family:'Noto Serif SC',serif;
  font-size:12px; color:var(--ink-soft); opacity:.55;}
.card h3{font-family:'Noto Serif SC',serif; font-size:18px; font-weight:700; margin:0 0 12px;
  display:flex; align-items:center; gap:8px;}
.card p{font-size:13.5px; line-height:1.7; color:var(--ink-soft); margin:0 0 8px;}
.card .note{font-size:12.5px; color:var(--ink-soft); margin-top:10px; padding-top:10px;
  border-top:1px dashed var(--line); line-height:1.6;}

.bignum{display:flex; align-items:baseline; gap:8px; margin-bottom:10px;}
.bignum .n{font-family:'Noto Serif SC',serif; font-weight:900; font-size:58px; color:var(--accent); line-height:1;}
.bignum .u{font-size:15px; color:var(--ink-soft); font-weight:700;}

.cond-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.cond-list li{display:flex; gap:9px; font-size:13.5px; line-height:1.6; color:var(--ink-soft);}
.cond-list .dot{flex:none; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--brass);
  color:var(--brass); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;
  font-family:'Noto Serif SC',serif;}

/* ---------- 对比表：小型(8a) ---------- */
.compare{width:100%; border-collapse:collapse; font-size:12.5px; margin-top:4px;}
.compare th,.compare td{border:1px solid var(--line); padding:7px 8px; text-align:left; vertical-align:top;}
.compare th{background:var(--accent); color:#fff; font-weight:700; font-family:'Noto Serif SC',serif;}
.compare td{color:var(--ink-soft); line-height:1.55;}
.compare td.k{color:var(--ink); font-weight:700; background:rgba(184,137,59,.12); white-space:nowrap;}

/* ---------- 对比表：大型多列(8b) ---------- */
.hint{display:none; font-size:12px; color:var(--folder-2); opacity:.7; text-align:center; margin-bottom:8px;}
.table-scroll{overflow-x:auto; padding-bottom:6px;}
.cmp{display:grid; grid-template-columns:130px 1fr 1fr 1fr; gap:10px; min-width:760px;}
.cmp .lbl{display:flex; align-items:center; font-size:12.5px; font-weight:700; color:var(--folder-2); opacity:.8; padding:10px 4px;}
.cmp .head{font-family:'Noto Serif SC',serif; font-weight:900; font-size:16px; text-align:center; color:#fff;
  border-radius:10px 10px 4px 4px; padding:12px 8px 10px;}
.cmp .head small{display:block; font-family:'SF Mono',Consolas,monospace; font-weight:400; font-size:10.5px; opacity:.85; margin-top:3px;}
.cell{background:var(--folder); border-radius:10px; padding:12px 13px; font-size:12.8px; line-height:1.65;
  color:var(--ink-soft); box-shadow:0 6px 14px rgba(0,0,0,.22);}
.cell b{color:var(--ink); font-weight:700;}

/* ---------- 思维导图：CSS堆叠树状结构 ---------- */
.tree-stage{display:flex; flex-direction:column; align-items:center;}
.root-node{position:relative; width:fit-content; background:linear-gradient(180deg, var(--folder), var(--folder-2));
  color:var(--ink); border-radius:14px; padding:22px 40px; text-align:center; box-shadow:var(--shadow);}
.root-node::before,.root-node::after{content:""; position:absolute; inset:0; border-radius:14px;
  background:var(--folder-2); border:1px solid var(--line); z-index:-1;}
.root-node::before{transform:rotate(-1.6deg) translate(-6px,5px);}
.root-node::after{transform:rotate(1.8deg) translate(8px,7px); opacity:.7;}
.stem{width:2px; height:26px; background:var(--brass);}
.bus-line{width:92%; max-width:820px; height:2px; background:var(--brass);}
.branches{display:flex; width:92%; max-width:820px; justify-content:space-between; gap:16px;}
.branch{flex:1; display:flex; flex-direction:column; align-items:center; min-width:0;}
.branch-stem{width:2px; height:22px; background:var(--brass);}
.branch-card{width:100%; background:var(--folder); border-radius:12px; padding:18px 16px 16px;
  box-shadow:0 8px 18px rgba(0,0,0,.28); color:var(--ink); border-top:4px solid var(--accent);}

/* ---------- 流程图：地铁线式判断链 ---------- */
.flow-track{position:relative;}
.flow-track::before{content:""; position:absolute; left:19.5px; top:21px; bottom:21px; width:3px; z-index:0;
  background-image:repeating-linear-gradient(to bottom, var(--brass) 0 9px, transparent 9px 18px);
  background-size:3px 18px; animation:flow-move .9s linear infinite;}
@keyframes flow-move{from{background-position:0 0;} to{background-position:0 18px;}}
.step{position:relative; z-index:1; display:flex; gap:16px; margin-bottom:24px;}
.marker{flex:none; width:42px; height:42px; border-radius:50%; background:var(--folder);
  border:3px solid var(--accent); color:var(--accent); font-family:'Noto Serif SC',serif; font-weight:900;
  font-size:15px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(0,0,0,.35);}
.step-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:10px;}
.qn{font-family:'Noto Serif SC',serif; font-weight:900; font-size:11px; color:var(--accent);}
.q-card{background:var(--folder); border-radius:12px; padding:14px 18px; box-shadow:0 8px 18px rgba(0,0,0,.28); color:var(--ink);}
.q-card .qtext{font-size:14.5px; font-weight:700; line-height:1.5; margin-top:3px;}
.path-line{display:flex; align-items:stretch; gap:12px; flex-wrap:wrap;}
.continue-tag{align-self:center; flex:none; font-size:12px; font-weight:700; color:var(--jade);
  display:flex; align-items:center; gap:5px; background:rgba(63,107,79,.12);
  border:1px solid var(--jade); border-radius:999px; padding:5px 13px; white-space:nowrap;}
.exit-link{display:flex; align-items:center; gap:8px; flex:1; min-width:230px;}
.exit-link .conn{flex:none; font-size:15px; color:var(--folder-2); opacity:.65;}
.exit-tag{flex:none; font-size:11.5px; font-weight:900; border-radius:999px; padding:4px 11px; color:#fff;}
.exit-card{flex:1; min-width:0; background:var(--folder); border-radius:10px; padding:10px 13px;
  font-size:12.3px; line-height:1.55; display:flex; gap:8px; box-shadow:0 6px 14px rgba(0,0,0,.24);}
.exit-card .ic{flex:none; font-size:15px;}
.exit-card b{display:block; font-family:'Noto Serif SC',serif; font-size:12.8px; margin-bottom:1px;}
.exit-card span{color:var(--ink-soft);}
.exit-link.tone-good .exit-tag{background:var(--jade);}
.exit-link.tone-good .exit-card{border-left:4px solid var(--jade);}
.exit-link.tone-warn .exit-tag{background:var(--warn);}
.exit-link.tone-warn .exit-card{border-left:4px solid var(--warn);}
.exit-link.tone-no .exit-tag{background:var(--accent);}
.exit-link.tone-no .exit-card{border-left:4px solid var(--accent);}
.dual-exit{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- 悬浮反馈按钮 ---------- */
.fab-feedback{position:fixed; bottom:22px; right:22px; display:flex; align-items:center; gap:8px;
  background:var(--brass); color:#2a2420; text-decoration:none; padding:12px 16px; border-radius:999px;
  box-shadow:0 10px 24px rgba(0,0,0,.4); font-size:13px; font-weight:700; z-index:50;
  border:2px solid rgba(255,255,255,.25);}

/* ---------- 翻页指示 ---------- */
.pagefoot{display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:36px;}
.dots{display:flex; gap:8px;}
.dots span{width:7px; height:7px; border-radius:50%; background:rgba(239,228,200,.3);}
.dots span.active{background:var(--brass); width:20px; border-radius:4px;}
.footnav{display:flex; gap:26px; font-size:13px;}
.footnav a{color:var(--folder); opacity:.8; text-decoration:none; border-bottom:1px solid var(--brass);}

/* ---------- 响应式断点 ---------- */
@media (max-width:760px){
  .grid{grid-template-columns:1fr;}
  .card.wide{grid-column:span 1;}
  .branches{flex-direction:column; width:100%;}
  .branch-stem,.bus-line{display:none;}
  .branch-card{border-left:4px solid var(--accent); border-top:none;}
  .hint{display:block;}
}
@media (max-width:480px){
  .step{gap:10px;}
  .marker{width:34px; height:34px; font-size:13px;}
  .flow-track::before{left:15.5px; top:17px; bottom:17px;}
}

/* ---------- 无障碍：尊重"减少动态效果"系统设置 ---------- */
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important;}}
