/* ═══════════════════════════════════════════
   🔴 共享文件 · 修改前必须告知 OP-01
      详见 /COLLABORATION.md
   ═══════════════════════════════════════════
   Bloodbound · 血契之书 — 全新视觉系统
   温暖羊皮纸 / 深邃暗夜 · 双主题
   ═══════════════════════════════════════════ */

/* ── 日间模式 ── */
:root {
  --bg:            #faf6f0;
  --bg-container:  #faf6f0;
  --bg-card:       #fffdf9;
  --bg-accent:     #f5ede0;
  --bg-elevated:   #ffffff;
  --text:          #3d3629;
  --text-muted:    #8c8070;
  --text-header:   #2c2416;
  --link:          #8b2500;
  --link-hover:    #b83a14;
  --border:        #e8dcc8;
  --border-card:   #e8dcc8;
  --border-accent: #c9a87c;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);
  --shadow:        0 4px 24px rgba(0,0,0,.05), 0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:     0 12px 40px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
  --toolbar-bg:    rgba(250,246,240,.92);
  --btn-bg:        #f5ede0;
  --btn-border:    #d4c4a8;
  --btn-hover-bg:  #ebe0cc;
  --divider:       #e8dcc8;
  --tag-bg:        #f5ede0;
  --tag-color:     #5c3d20;
  --accent-red:    #8b2500;
  --accent-gold:   #b8860b;
  --accent-blue:   #3a7bb8;
  --accent-green:  #3a6a4a;
  --accent-purple: #7b4fa0;
  --gradient-hero: linear-gradient(135deg, #faf6f0 0%, #f0e4d0 40%, #faf6f0 100%);
}

/* ── 夜间模式 ── */
[data-theme="night"] {
  --bg:            #121214;
  --bg-container:  #121214;
  --bg-card:       #1c1c1f;
  --bg-accent:     #242427;
  --bg-elevated:   #28282b;
  --text:          #b0b0b5;
  --text-muted:    #707078;
  --text-header:   #d0d0d6;
  --link:          #d4786e;
  --link-hover:    #e89088;
  --border:        #2a2a2d;
  --border-card:   #2a2a2d;
  --border-accent: #5a4030;
  --shadow-sm:     0 1px 2px rgba(0,0,0,.3);
  --shadow:        0 4px 24px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.3);
  --shadow-lg:     0 12px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
  --toolbar-bg:    rgba(18,18,20,.92);
  --btn-bg:        #242427;
  --btn-border:    #3a3a3d;
  --btn-hover-bg:  #2e2e32;
  --divider:       #2a2a2d;
  --tag-bg:        #242427;
  --tag-color:     #b0b0b5;
  --accent-red:    #d4786e;
  --accent-gold:   #c9a050;
  --accent-blue:   #6ba3d8;
  --accent-green:  #6aaa7a;
  --accent-purple: #b088d0;
  --gradient-hero: linear-gradient(135deg, #121214 0%, #1a1715 40%, #121214 100%);
}

/* ── 基础重置 ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:110px}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'PingFang SC','Microsoft YaHei','Hiragino Sans GB','Inter','Noto Sans SC',sans-serif;
  font-size:16px;
  line-height:1.75;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
code,pre,kbd{font-family:'Cascadia Code','Fira Code','Consolas','Courier New',monospace}
h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:.02em}

a{color:var(--link);text-decoration:none;transition:color .2s}
a:hover{color:var(--link-hover)}

/* ═══════════════════════════════════════
   工具栏
   ═══════════════════════════════════════ */
.toolbar-wrap{
  position:sticky;top:0;z-index:100;
  background:var(--toolbar-bg);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
}
.toolbar{
  border-bottom:1px solid var(--border);
  padding:6px 0;
}
.toolbar-inner{
  max-width:1280px;margin:0 auto;
  padding:0 24px;
  display:flex;align-items:center;
}
.toolbar-left{
  display:flex;align-items:center;gap:6px;
  flex-wrap:wrap;flex:0 0 auto;
}
.toolbar-sub{
  border-top:1px solid var(--border);
  padding:6px 24px;
  display:flex;justify-content:center;gap:10px;
  font-size:.8em;
}
.toolbar-title{
  font-size:.82em;color:var(--text-muted);font-weight:500;
  letter-spacing:.02em;
}
/* 跨站切换按钮 */
.switch-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:8px;border:2px solid #3a7bb830;background:#3a7bb808;color:#3a7bb8;cursor:pointer;font-weight:700;font-size:.85em;transition:all .2s;text-decoration:none}
.switch-btn:hover{background:#3a7bb815;border-color:#3a7bb8;box-shadow:0 2px 10px rgba(58,123,184,.15)}
.switch-btn-spec{border-color:#8b735530;background:#8b735508;color:#8b7355}
.switch-btn-spec:hover{background:#8b735515;border-color:#8b7355;box-shadow:0 2px 10px rgba(139,115,85,.15)}

/* ═══ B区操作栏（hero-actions / page-hero-actions）═══ */
.hero-actions,.page-hero-actions{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 0;font-size:.62em}
.hero-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:8px;border:2px solid;font-weight:700;text-decoration:none;cursor:pointer;transition:all .2s}
.hero-btn.spec{border-color:#c88b2c40;background:#c88b2c08;color:#c88b2c}
.hero-btn.spec:hover{background:#c88b2c15;border-color:#c88b2c}
.hero-btn.link{border-color:#3a7bb840;background:#3a7bb808;color:#3a7bb8}
.hero-btn.link:hover{background:#3a7bb815;border-color:#3a7bb8}
.hero-btn.pill{border-color:var(--border);background:var(--bg-accent);color:var(--text-muted);cursor:default}
.hero-btn.git{border-color:#27ae6060;background:#27ae6012;color:#27ae60}
.hero-btn.git:hover{background:#27ae6020;border-color:#27ae60}
.hero-btn.status{border-color:var(--border);background:var(--bg-accent);color:var(--text-muted);cursor:default}
.hero-btn.status.ok{border-color:#27ae6060;background:#27ae6010;color:#27ae60}
.hero-btn.status.dirty{border-color:rgba(184,134,11,.6);background:rgba(184,134,11,.1);color:var(--accent-gold)}
.hero-actions .sep,.page-hero-actions .sep{color:var(--border);margin:0 2px}

.hero-btn.showcase{border-color:#2d7a6a40;background:#2d7a6a08;color:#2d7a6a}
.hero-btn.showcase:hover{background:#2d7a6a15;border-color:#2d7a6a}

/* 工具栏按钮 */
.tb-link{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 12px;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  font-size:.78em;font-weight:500;
  white-space:nowrap;
  transition:all .18s;
  text-decoration:none;
  line-height:1.5;
  position:relative;
  letter-spacing:.01em;
}
.tb-link:hover{
  background:var(--bg-accent);
  color:var(--link);
  text-decoration:none;
}
.tb-link.current{
  background:var(--bg-accent);
  color:var(--link);
  font-weight:600;
}

/* 工具栏分组分隔 */
.tb-sep{
  display:inline-block;width:1px;height:20px;
  background:var(--border);margin:0 3px;
  align-self:center;opacity:.5;
}

/* 分类色标 — hover填充完整颜色 */
.tb-cat-story:hover{background:#c9510c;color:white;border-color:#c9510c}
.tb-cat-people:hover{background:#c0392b;color:white;border-color:#c0392b}
.tb-cat-system:hover{background:#3b7dd8;color:white;border-color:#3b7dd8}
.tb-cat-ref:hover{background:#8e6b9e;color:white;border-color:#8e6b9e}

.tb-cat-matrix:hover{background:#8b4a00;color:white;border-color:#8b4a00}
.tb-cat-world:hover{background:#2d6a4f;color:white;border-color:#2d6a4f}
.tb-cat-adapt:hover{background:#2d7a6a;color:white;border-color:#2d7a6a}

/* 首页按钮 */
.tb-home{padding:5px 14px;font-weight:600;color:#c0392b;border:1px solid #e0b8b4}
.tb-home:hover{background:#fdf0ee;color:#a03020}
.tb-home.current{background:#c0392b;color:white;border-color:#c0392b}
[data-theme="night"] .tb-home{color:#e06050;border-color:#5a2820}
[data-theme="night"] .tb-home:hover{background:#301818;color:#e87868}
[data-theme="night"] .tb-home.current{background:#c0392b;color:white}

/* 分组底板色 */
.tb-group{display:inline-flex;gap:0;padding:2px 4px;border-radius:8px}
.tb-grp-story{background:rgba(201,81,12,.06)}
.tb-grp-people{background:rgba(192,57,43,.05)}
.tb-grp-system{background:rgba(59,125,216,.05)}
.tb-grp-ref{background:rgba(142,107,158,.05)}
[data-theme="night"] .tb-grp-story{background:rgba(200,120,60,.1)}
[data-theme="night"] .tb-grp-people{background:rgba(210,80,60,.08)}
[data-theme="night"] .tb-grp-system{background:rgba(80,140,230,.08)}
[data-theme="night"] .tb-grp-ref{background:rgba(150,110,170,.08)}

/* 卷行布局（横版章节目录） */
.vol-stat{font-size:.66em;padding:2px 10px;border-radius:10px;background:var(--bg-accent);border:1px solid var(--border)}
.vol-row{margin-bottom:20px}
.vol-row-hd{padding:10px 14px;background:var(--bg-card);border:1px solid var(--border-card);border-radius:0 8px 8px 0;margin-bottom:6px}
.vol-row-name{font-size:.88em;font-weight:700;color:var(--text-header);margin-right:10px}
.vol-row-ch{font-size:.66em;color:var(--text-muted)}
.vol-row-sub{display:block;font-size:.68em;color:var(--text-muted);margin-top:3px;opacity:.8}
.vol-row-body{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.vch{display:inline-block;padding:4px 12px;border-radius:5px;font-size:.72em;text-decoration:none;border:1px solid var(--border);transition:all .15s;line-height:1.5}
.vch-done{background:var(--bg-accent);color:var(--link);border-color:#5a93a5}
.vch-done:hover{background:var(--bg-card);color:#5a93a5;border-color:#5a93a5;text-decoration:none}
.vch-pend{background:transparent;color:var(--text-muted);cursor:default;opacity:.4}
@media(max-width:768px){.vch{padding:3px 8px;font-size:.68em}}

/* 返回按钮 */
.toolbar-back{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 12px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--btn-bg);
  color:var(--text);
  cursor:pointer;
  font-size:.78em;font-weight:500;
  white-space:nowrap;
  transition:all .18s;
  text-decoration:none;
  line-height:1.5;
}
.toolbar-back:hover{
  background:var(--btn-hover-bg);
  color:var(--link);
  text-decoration:none;
}

.hero-btn.theme{border-color:rgba(123,79,160,.4);background:rgba(123,79,160,.08);color:var(--accent-purple);cursor:pointer;font-size:1.15em;line-height:1;padding:5px 10px;min-width:32px;justify-content:center}
.hero-btn.theme:hover{background:rgba(123,79,160,.15);border-color:var(--accent-purple);box-shadow:0 0 10px rgba(123,79,160,.3),0 0 20px rgba(123,79,160,.1)}
[data-theme="night"] .hero-btn.theme{border-color:rgba(176,136,208,.4);background:rgba(176,136,208,.08);color:var(--accent-purple)}
[data-theme="night"] .hero-btn.theme:hover{background:rgba(176,136,208,.15);border-color:var(--accent-purple);box-shadow:0 0 10px rgba(176,136,208,.3)}

.tool-btn{
  width:36px;height:36px;
  border:1px solid var(--border);
  border-radius:50%;
  background:var(--bg-card);
  color:var(--text);
  cursor:pointer;
  font-size:.9em;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s;
  flex-shrink:0;
}
.tool-btn:hover{background:var(--bg-accent);border-color:var(--border-accent)}
.tool-btn.pushing{color:var(--accent-gold);pointer-events:none;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.btn-git{
  height:36px;padding:0 12px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--bg-card);
  color:var(--text);
  cursor:pointer;
  font-size:.72em;font-weight:700;
  letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
  flex-shrink:0;
  box-shadow:var(--shadow-sm);
}
.btn-git:hover{
  background:var(--accent-red);
  color:white;border-color:var(--accent-red);
}

.preserved-tag{
  padding:1px 10px;
  background:#f5ead0;
  border:1px solid #c9a96e;
  border-radius:8px;
  font-size:.68em;
  color:#8b6914;
  font-weight:600;
}
[data-theme="night"] .preserved-tag{
  background:#3a2e10;
  border-color:#8b6914;
  color:#d4b34c;
}

.footer-divider{
  color:var(--border);
  font-size:.85em;
  user-select:none;
}
.git-tag{
  display:inline-flex;align-items:center;gap:3px;
  padding:1px 9px;
  border:1px solid var(--border);
  border-radius:12px;
  font-size:.78em;
  font-weight:600;
  color:var(--text-muted);
  text-decoration:none;
  letter-spacing:.03em;
  transition:all .2s;
}
.btn-git-hero{
  height:22px;padding:0 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg-accent);
  color:var(--text);
  cursor:pointer;
  font-size:.68em;font-weight:600;
  letter-spacing:.03em;
  transition:all .2s;
  line-height:22px;
}
.btn-git-hero:hover{
  background:var(--accent-red);
  color:white;border-color:var(--accent-red);
}
[data-theme="night"] .btn-git-hero:hover{
  background:#c0392b;color:white;
}

.btn-copy{
  padding:2px 8px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg-accent);
  color:var(--text-muted);
  cursor:pointer;
  font-size:.6em;font-weight:600;
  letter-spacing:.03em;
  transition:all .2s;
  white-space:nowrap;
}
.btn-copy:hover{color:var(--link);border-color:var(--link)}
.btn-copy.copied{color:#2d8a4e;border-color:#2d8a4e}

.git-tag:hover{
  border-color:#c9510c;
  color:#c9510c;
  background:rgba(201,81,12,.06);
}
[data-theme="night"] .git-tag:hover{
  border-color:#e07838;
  color:#e07838;
  background:rgba(224,120,56,.1);
}

/* 下拉菜单 */
.tb-dropdown{position:relative}
/* 透明桥梁：填补按钮与菜单之间的空隙，防止鼠标穿过时菜单消失 */
.tb-dropdown::after{
  content:'';
  position:absolute;top:100%;left:0;width:100%;height:8px;
  z-index:199;
}
.tb-drop-menu{
  display:none;
  position:absolute;top:calc(100% + 8px);left:0;z-index:200;
  min-width:170px;
  padding:6px 0;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(-4px);
  transition:all .2s;
}
.tb-dropdown:hover .tb-drop-menu{
  display:block;
  opacity:1;transform:translateY(0);
}
.tb-drop-menu a{
  display:block;
  padding:7px 18px;
  font-size:.8em;font-weight:450;
  color:var(--text);
  white-space:nowrap;
  transition:all .15s;
}
.tb-drop-menu a:hover{
  background:var(--bg-accent);
  color:var(--link);
  text-decoration:none;
}
.tb-drop-sep{
  display:block;
  height:1px;
  margin:4px 12px;
  background:var(--border);
  pointer-events:none;
}

/* ═══════════════════════════════════════
   主容器
   ═══════════════════════════════════════ */
.container{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px 100px;
  min-height:calc(100vh - 57px);
}

/* ═══════════════════════════════════════
   首页 Hero
   ═══════════════════════════════════════ */
.hero{
  text-align:center;
  padding:80px 20px 64px;
  position:relative;
  overflow:hidden;
}
.hero h1{
  font-size:2.8em;
  font-weight:700;
  color:var(--text-header);
  letter-spacing:.08em;
  position:relative;z-index:1;
  line-height:1.3;
}
.hero h1 .accent,
.hero h1 .a{
  color:var(--accent-red);
}
.hero .sub{
  color:var(--text-muted);
  margin-top:16px;
  font-size:.95em;
  font-weight:400;
  letter-spacing:.04em;
  position:relative;z-index:1;
}
.hero .divider-line{
  display:block;
  width:80px;height:2px;
  background:var(--accent-red);
  margin:28px auto;
  opacity:.5;
  position:relative;z-index:1;
}
.hero .desc{
  max-width:600px;
  margin:0 auto;
  color:var(--text-muted);
  font-size:.88em;
  line-height:1.8;
  position:relative;z-index:1;
}

/* ═══════════════════════════════════════
   章节卡片网格 (首页)
   ═══════════════════════════════════════ */
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin:48px 0 20px;
  padding-bottom:12px;
  border-bottom:1px solid var(--divider);
}
.section-header h2{
  font-size:1.1em;
  font-weight:600;
  color:var(--text-header);
  letter-spacing:.03em;
}
.section-header .badge{
  font-size:.75em;
  color:var(--text-muted);
  background:var(--bg-accent);
  padding:3px 12px;
  border-radius:20px;
  font-weight:500;
}
.section-title{
  font-size:1.08em;color:var(--text-header);font-weight:600;
  margin:48px 0 20px;padding-bottom:12px;
  border-bottom:1px solid var(--divider);
  letter-spacing:.03em;
}

/* 章节列表 */
.chapter-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:12px;
}
.chapter-card{
  display:flex;align-items:center;
  gap:16px;
  padding:16px 20px;
  background:var(--bg-card);
  border:1px solid var(--border-card);
  border-radius:10px;
  transition:all .25s;
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.chapter-card::after{
  content:'';
  position:absolute;top:0;left:0;
  width:3px;height:100%;
  background:var(--accent-red);
  opacity:0;
  transition:opacity .25s;
}
.chapter-card:hover{
  border-color:var(--border-accent);
  box-shadow:var(--shadow);
  transform:translateY(-2px);
}
.chapter-card:hover::after{opacity:1}
.chapter-card .ch-num{
  flex-shrink:0;
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-accent);
  border-radius:10px;
  font-size:.82em;font-weight:700;
  color:var(--text-header);
}
.chapter-card .ch-info{flex:1;min-width:0}
.chapter-card .ch-title{
  font-size:.92em;font-weight:600;
  color:var(--text-header);
  margin-bottom:2px;
}
.chapter-card .ch-sub{
  font-size:.75em;
  color:var(--text-muted);
}
.chapter-card .ch-status{
  flex-shrink:0;
  font-size:.7em;font-weight:600;
  padding:3px 10px;
  border-radius:20px;
  background:#e8f0e0;
  color:#4a6e3a;
}
[data-theme="night"] .chapter-card .ch-status{
  background:#1e2a1a;
  color:#7aa86a;
}

/* ═══════════════════════════════════════
   资源卡片网格
   ═══════════════════════════════════════ */
.resource-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
  margin-bottom:40px;
}
.resource-card{
  display:flex;flex-direction:column;
  padding:24px;
  background:var(--bg-card);
  border:1px solid var(--border-card);
  border-radius:12px;
  transition:all .3s;
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.resource-card::before{
  content:'';
  position:absolute;top:0;left:0;
  width:100%;height:3px;
  background:linear-gradient(90deg,var(--accent-red),var(--accent-gold));
  opacity:0;
  transition:opacity .3s;
}
.resource-card:hover{
  border-color:var(--border-accent);
  box-shadow:var(--shadow);
  transform:translateY(-4px);
}
.resource-card:hover::before{opacity:1}
.resource-card h3{
  font-size:.95em;font-weight:600;
  color:var(--text-header);
  margin-bottom:6px;
  letter-spacing:.02em;
}
.resource-card p{
  font-size:.78em;
  color:var(--text-muted);
  line-height:1.6;
  flex:1;
}

/* ═══════════════════════════════════════
   快速导航区
   ═══════════════════════════════════════ */
.quick-nav{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:32px 0 48px;
}
.quick-nav a{
  padding:8px 20px;
  background:var(--bg-card);
  border:1px solid var(--border-card);
  border-radius:24px;
  font-size:.82em;font-weight:500;
  color:var(--text);
  transition:all .2s;
  box-shadow:var(--shadow-sm);
}
.quick-nav a:hover{
  background:var(--bg-accent);
  border-color:var(--border-accent);
  color:var(--link);
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}


/* ═══════════════════════════════════════
   导航 (旧版兼容)
   ═══════════════════════════════════════ */
nav{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:40px;padding:20px 0 16px;
  border-bottom:1px solid var(--divider);
}
nav a{
  padding:6px 16px;
  border:1px solid var(--border);
  border-radius:20px;
  font-size:.78em;font-weight:500;
  color:var(--text-muted);
  background:transparent;
  white-space:nowrap;
  transition:all .2s;
}
nav a:hover,nav a.active{
  background:var(--bg-accent);
  color:var(--link);
  border-color:var(--border-accent);
  text-decoration:none;
}

/* ═══════════════════════════════════════
   正文样式
   ═══════════════════════════════════════ */
article h1{
  font-size:1.5em;font-weight:700;color:var(--text-header);
  text-align:center;margin:48px 0 12px;letter-spacing:.06em;
}
article .meta{
  text-align:center;color:var(--text-muted);font-size:.8em;margin-bottom:40px;
}
article p{
  text-indent:2em;
  margin-bottom:.6em;
  text-align:justify;
  line-height:1.85;
}
article hr{
  border:none;height:1px;background:var(--divider);margin:48px 0;
}
article h2{
  font-size:1.2em;font-weight:600;color:var(--text-header);
  margin:40px 0 16px;text-align:center;letter-spacing:.04em;
}
article h3{
  font-size:1.05em;font-weight:600;color:var(--text-header);
  margin:32px 0 12px;letter-spacing:.02em;
}
article blockquote{
  color:var(--text-muted);
  margin:1.2em 0;padding:.7em 1em .7em 1.4em;
  border-left:3px solid var(--accent-red);
  font-size:.93em;line-height:1.8;
  background:var(--bg-accent);
  border-radius:0 6px 6px 0;
}

/* ═══════════════════════════════════════
   表格
   ═══════════════════════════════════════ */
table{
  width:100%;border-collapse:collapse;margin:20px 0;font-size:.84em;
}
th,td{
  padding:10px 14px;text-align:left;border-bottom:1px solid var(--divider);
}
th{color:var(--text-header);font-weight:600;font-size:.82em;letter-spacing:.03em}
strong{color:var(--text-header);font-weight:600}
em{color:var(--link);font-style:normal}

/* ═══════════════════════════════════════
   页脚
   ═══════════════════════════════════════ */
.footer{
  text-align:center;color:var(--text-muted);font-size:.75em;
  margin-top:80px;padding:32px 0;
  border-top:1px solid var(--divider);
  letter-spacing:.03em;
}

/* ═══════════════════════════════════════
   角色卡片
   ═══════════════════════════════════════ */
.card{
  background:var(--bg-card);
  border:1px solid var(--border-card);
  border-radius:10px;overflow:hidden;
  margin-bottom:18px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s;
}
.card:hover{box-shadow:var(--shadow)}
.card-header{
  background:var(--bg-accent);
  padding:14px 20px;
  border-bottom:1px solid var(--border-card);
  color:var(--text-header);font-weight:600;
  font-size:.95em;
}
.card-header .en{
  display:block;
  font-size:.78em;color:var(--text-muted);font-weight:400;
  margin-top:3px;
}
.card-body{padding:16px 20px}
.card-meta{
  display:flex;flex-wrap:wrap;gap:10px;
  padding:12px 20px;
  font-size:.76em;color:var(--text-muted);
  background:var(--bg-card);
  border-top:1px solid var(--border-card);
}
.card-meta span{border-right:1px solid var(--border-card);padding-right:12px}
.card-meta span:last-child{border-right:none}

.block{margin-bottom:14px}
.block:last-child{margin-bottom:0}
.block .label{
  font-size:.72em;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:4px;font-weight:600;
}
.block .text{font-size:.88em;line-height:1.7}

.tag{
  display:inline-block;
  background:var(--tag-bg);
  color:var(--tag-color);
  padding:3px 10px;
  border-radius:14px;
  font-size:.73em;font-weight:500;
  margin:2px;
}

/* ═══════════════════════════════════════
   动画
   ═══════════════════════════════════════ */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.fade-in{animation:fadeInUp .5s ease-out}

/* ═══════════════════════════════════════
   响应式
   ═══════════════════════════════════════ */
@media(max-width:1024px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .toolbar-inner{flex-wrap:wrap}
}

@media(max-width:768px){
  .hero{padding:56px 16px 40px}
  .hero h1{font-size:2em}
  .hero .sub{font-size:.85em}
  .chapter-grid{grid-template-columns:1fr}
  .resource-grid{grid-template-columns:1fr}
  .toolbar-inner{padding:0 12px;gap:8px}
  .toolbar-left{gap:4px}
  .toolbar-sub{padding:4px 12px;gap:6px;font-size:.72em}
  .tb-link{padding:5px 8px;font-size:.73em}
}

@media(max-width:480px){
  body{font-size:15px}
  .container{padding:0 14px 60px}
  .hero h1{font-size:1.6em}
  nav{flex-direction:column;gap:6px}
  nav a{text-align:center}
  .chapter-item{flex-direction:column;align-items:flex-start;gap:6px}
  .chapter-item .num{min-width:auto}
  table{font-size:.76em}
  th,td{padding:8px 10px}
  .card-meta{flex-direction:column;gap:4px}
  .card-meta span{border-right:none}
  .resource-card{padding:18px}
}

/* ═══════════════════════════════════════
   首页统计卡片
   ═══════════════════════════════════════ */
.stats-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px;
}
.stat-card{
  background:var(--bg-card);
  border:1px solid var(--border-card);
  border-radius:10px;
  padding:16px 16px 14px;
  box-shadow:var(--shadow-sm);
}
.stat-card:hover{
  box-shadow:var(--shadow);
}
.stat-main{
  display:flex;align-items:baseline;gap:4px;margin-bottom:4px;
}
.stat-num{
  font-size:2em;font-weight:700;line-height:1;
  letter-spacing:-.02em;
}
.stat-card--setting .stat-num{color:var(--accent-red)}
.stat-card--chapter .stat-num{color:var(--accent-gold)}
.stat-card--token .stat-num{color:var(--text-header)}
.stat-unit{
  font-size:.85em;font-weight:500;
  color:var(--text-muted);
}
.stat-label{
  font-size:.78em;font-weight:600;
  color:var(--text-header);margin-bottom:8px;
}
.stat-bars{
  height:2px;background:var(--bg-accent);border-radius:2px;
  margin-bottom:8px;overflow:hidden;
}
.stat-bar--full{
  display:block;height:100%;border-radius:2px;width:100%;
}
.stat-card--setting .stat-bar--full{background:var(--accent-red);opacity:.35}
.stat-card--chapter .stat-bar--full{background:var(--accent-gold);opacity:.45}
.stat-card--token .stat-bar--full{background:var(--text-header);opacity:.2}
.stat-detail{
  font-size:.68em;line-height:1.5;
  color:var(--text-muted);
}
.stat-detail b{
  color:var(--text);font-weight:600;
}
/* ═══════════════════════════════════════
   三栏状态卡片 — v5.0 母体维度
   ═══════════════════════════════════════ */
.status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.status-card{
  background:var(--bg-card);
  border:1px solid var(--border-card);
  border-radius:10px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.status-card:hover{box-shadow:var(--shadow)}
.status-header{
  padding:10px 14px 6px;
}
.status-head-title{font-size:.8em;font-weight:700;color:var(--text-header)}
.status-body{padding:0 14px 10px}
.s-note{font-size:.72em;color:var(--text-muted);margin-top:4px;font-style:italic}

/* ─ 花园状态 ─ */
.s-garden{margin-bottom:8px}
.s-garden-top{display:flex;align-items:baseline;gap:6px;margin-bottom:2px}
.s-garden-phase{font-size:.75em;color:var(--text-muted);font-weight:600}
.s-garden-countdown{font-size:1.3em;font-weight:700;color:var(--accent-red);letter-spacing:-.01em}
.s-garden-meta{font-size:.68em;color:var(--text-muted);display:flex;flex-direction:column;gap:1px}
.s-fork{display:flex;flex-direction:column;gap:4px;margin:8px 0}
.s-fork-line{display:flex;align-items:center;gap:4px;font-size:.7em}
.s-fork-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.s-fork-dot.on{background:#5a9a4a}
.s-fork-dot.off{background:var(--accent-red)}
.s-fork-label{font-weight:700;color:var(--text-header);width:40px;flex-shrink:0}
.s-fork-arrow{color:var(--text-muted);font-size:.9em}
.s-fork-text{color:var(--text);opacity:.85}

/* ─ 节点网络 ─ */
.s-node-grid{display:flex;flex-direction:column;gap:5px;margin-bottom:6px}
.s-node-row{display:flex;align-items:center;gap:6px;font-size:.7em}
.s-node-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.s-node-dot.clean{background:#5a9a4a}
.s-node-dot.poison{background:var(--accent-red)}
.s-node-dot.new{background:#6ba3b8;box-shadow:0 0 6px #6ba3b8}
.s-node-label{font-weight:600;color:var(--text-header);width:50px;flex-shrink:0}
.s-node-num{font-weight:700;color:var(--text-header)}
.s-node-desc{color:var(--text-muted);flex:1}

/* ─ 母体翻译者 ─ */
.s-translator{display:flex;flex-direction:column;gap:5px}
.s-trans-row{display:flex;align-items:center;gap:5px;font-size:.7em;line-height:1.5}
.s-trans-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.s-trans-dot.red{background:#8b0000}
.s-trans-dot.blue{background:#2d5a9e}
.s-trans-dot.gold{background:#d4a017}
.s-trans-label{font-weight:700;width:28px;flex-shrink:0;font-size:.85em}
.s-trans-num{font-weight:700;color:var(--text-header);width:28px;text-align:center;flex-shrink:0}
.s-trans-desc{color:var(--text);opacity:.85}

@media(max-width:768px){
  .status-grid{grid-template-columns:1fr;gap:14px}
}


/* ═══════════════════════════════════════
   版本标签
   ═══════════════════════════════════════ */
.ver-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;
  background:var(--bg-accent);
  border:1px solid var(--border);
  border-radius:8px;
  font-size:.78em;
  transition:all .2s;
}
.ver-tag:hover{
  border-color:var(--border-accent);
  box-shadow:var(--shadow-sm);
}
.ver-tag a{
  color:var(--text);
  text-decoration:none;
  font-weight:500;
}
.ver-tag a:hover{color:var(--link)}
.ver-num{
  font-size:.7em;font-weight:700;
  padding:1px 7px;
  border-radius:10px;
  letter-spacing:.03em;
}
.ver-tag--spec .ver-num{background:#e8e0d0;color:#6b5a3a}
.ver-tag--setting .ver-num{background:#d8e4d8;color:#3a5a3a}
[data-theme="night"] .ver-tag--spec .ver-num{background:#3a3020;color:#c8b88a}
[data-theme="night"] .ver-tag--setting .ver-num{background:#203020;color:#88b88a}

/* ═══════════════════════════════════════
   会话日志卡片
   ═══════════════════════════════════════ */
.log-cards{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.log-card{display:flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg-card);transition:all .18s}
.log-card:hover{border-color:var(--accent-red);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.log-card--loading{justify-content:center;padding:16px;color:var(--text-muted);font-size:.75em}
.log-stripe{width:4px;flex-shrink:0;opacity:.75;transition:opacity .18s}
.log-card:hover .log-stripe{opacity:1}
.log-card-body{flex:1;padding:8px 12px;min-width:0}
.log-card-top{display:flex;align-items:center;gap:8px;margin-bottom:3px;flex-wrap:wrap}
.log-idx{font-size:.68em;font-weight:700;color:var(--text-muted);background:var(--bg-accent);padding:0 6px;border-radius:4px;letter-spacing:.04em}
.log-date{font-size:.72em;color:var(--text-header);font-weight:600}
.log-time{font-size:.7em;color:var(--text-muted);opacity:.6}
.log-tok{font-size:.7em;font-weight:600;color:var(--accent-red);margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.log-card-meta{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.log-src{display:inline-block;padding:0 8px;border-radius:6px;font-size:.7em;font-weight:700;letter-spacing:.04em;line-height:1.7}
.log-src.cb{background:#d8e4d8;color:#3a5a3a}
.log-src.ds{background:#d8dce8;color:#3a3a6a}
.log-src.cl{background:#e8d8c0;color:#6a4a2a}
.log-src.gp{background:#e0d8e0;color:#5a3a5a}
.log-src.cu{background:#d8e8e8;color:#2a6a6a}
[data-theme="night"] .log-src.cb{background:#203020;color:#88b88a}
[data-theme="night"] .log-src.ds{background:#202838;color:#8898b8}
[data-theme="night"] .log-src.cl{background:#302010;color:#b88a60}
[data-theme="night"] .log-src.gp{background:#301830;color:#b878b8}
[data-theme="night"] .log-src.cu{background:#183030;color:#78b8b8}
.log-model{font-size:.73em;color:var(--text-muted)}
.log-model.v4{color:var(--text-header);font-weight:600}
.log-card-work{font-size:.72em;color:var(--text);line-height:1.45;word-break:break-all}

@media(max-width:768px){
  .stats-grid{grid-template-columns:1fr;gap:12px}
  .stat-num{font-size:2em}
  .ver-tag{font-size:.72em;padding:4px 10px}
  .log-card-body{padding:6px 8px}
  .log-card-work{font-size:.7em}
}

/* ═══════════════════════════════════════
   万智牌卡面 · 生存守则
   ═══════════════════════════════════════ */
.mtg-cards{display:flex;flex-direction:column;gap:8px}
.mtg-card{
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:var(--bg-card);
  transition:all .18s;
}
.mtg-card:hover{box-shadow:0 2px 14px rgba(0,0,0,.1);border-color:var(--border-accent)}
.mtg-card--mythic{border-left:4px solid #c06020}
.mtg-card--rare{border-left:4px solid #c0a040}
.mtg-card--uncommon{border-left:4px solid #8090b0}
.mtg-top{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px 2px;
  font-size:.65em;color:var(--text-muted);
}
.mtg-num{
  font-weight:800;font-size:1.1em;color:var(--text-header);
  background:var(--bg-accent);padding:0 6px;border-radius:4px;
  letter-spacing:.04em;
}
.mtg-rarity{font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.mtg-card--mythic .mtg-rarity{color:#c06020}
.mtg-card--rare .mtg-rarity{color:#c0a040}
.mtg-card--uncommon .mtg-rarity{color:#8090b0}
.mtg-source{color:var(--text-header);font-weight:600}
.mtg-type{color:var(--text-muted);font-style:italic}
.mtg-name{
  font-size:.85em;font-weight:700;color:var(--text-header);
  padding:2px 12px 4px;
}
.mtg-body{
  font-size:.76em;line-height:1.6;color:var(--text);
  padding:0 12px 6px;
}
.mtg-flavor{
  font-size:.68em;line-height:1.5;color:var(--text-muted);font-style:italic;
  padding:6px 12px 8px;
  border-top:1px dashed var(--border);
  margin:0 12px;
}

/* ── 页面区域角标 ──
   给各区域容器添加 data-zone="X区" 属性后，
   左上角自动显示半隐形的区域编号，
   鼠标悬停时显形，方便人工沟通时引用。 */
[data-zone]{position:relative}
[data-zone]::before{
  content:attr(data-zone);
  position:absolute;top:2px;left:4px;
  font-size:10px;font-family:Consolas,Monaco,"Courier New",monospace;
  font-weight:500;color:var(--text-muted,#8c8070);
  opacity:.25;pointer-events:none;z-index:5;
  letter-spacing:0;transition:opacity .2s;
}
[data-zone]:hover::before{opacity:.7}

@media(max-width:768px){
  .mtg-card-body{padding:0 8px 4px}
  .mtg-name{padding:2px 8px 4px;font-size:.8em}
}

/* ═══════════════════════════════════════
   D区 · 页面目录 (page-toc)
   ═══════════════════════════════════════ */
.page-toc{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:24px 0 32px;
}
.toc-item{
  display:block;
  padding:14px 16px;
  background:var(--bg-card);
  border:1px solid var(--border-card);
  border-radius:10px;
  text-decoration:none;
  color:var(--text);
  font-size:.85em;
  font-weight:600;
  line-height:1.5;
  transition:all .25s;
  box-shadow:var(--shadow-sm);
}
.toc-item:hover{
  border-color:var(--border-accent);
  box-shadow:var(--shadow);
  transform:translateY(-2px);
  color:var(--link);
}
.toc-num{
  font-weight:700;
  font-size:1.05em;
}
.toc-desc{
  font-weight:400;
  font-size:.88em;
  color:var(--text-muted);
}
@media(max-width:1024px){.page-toc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.page-toc{grid-template-columns:1fr}}

/* ═══════════════════════════════════════
   F区 · 卡片色彩修饰
   ═══════════════════════════════════════ */
.card--red{border-left:4px solid var(--accent-red)}
.card--blue{border-left:4px solid var(--accent-blue)}
.card--green{border-left:4px solid var(--accent-green)}
.card--gold{border-left:4px solid var(--accent-gold)}
.card--purple{border-left:4px solid var(--accent-purple)}

/* ═══════════════════════════════════════
   E区 · 文档模式 (md-wrap)
   ═══════════════════════════════════════ */
.md-wrap{max-width:900px;margin:0 auto;padding:24px}
.md-wrap h1{font-size:1.6em;border-bottom:2px solid var(--border);padding-bottom:8px;margin:32px 0 16px;color:var(--text-header)}
.md-wrap h2{font-size:1.25em;margin:28px 0 12px;color:var(--text-header);border-bottom:1px solid var(--border);padding-bottom:6px}
.md-wrap h3{font-size:1.05em;margin:22px 0 8px;color:var(--text-header)}
.md-wrap h4{font-size:.95em;margin:18px 0 6px;color:var(--text-header)}
.md-wrap p{margin:8px 0;line-height:1.7;color:var(--text)}
.md-wrap strong{color:var(--text-header)}
.md-wrap a{color:var(--accent-blue);text-decoration:none}
.md-wrap a:hover{text-decoration:underline}
.md-wrap code{background:var(--bg-accent);padding:2px 6px;border-radius:4px;font-size:.88em;font-family:Consolas,monospace;color:var(--accent-red)}
.md-wrap pre{background:var(--bg-accent);padding:14px 18px;border-radius:8px;overflow-x:auto;margin:12px 0;border:1px solid var(--border)}
.md-wrap pre code{background:none;padding:0;color:var(--text);font-size:.82em;display:block;line-height:1.6}
.md-wrap blockquote{border-left:3px solid var(--accent-gold);margin:12px 0;padding:6px 16px;background:var(--bg-accent);border-radius:0 8px 8px 0;color:var(--text-muted)}
.md-wrap ul,.md-wrap ol{padding-left:24px;margin:8px 0}
.md-wrap li{margin:4px 0;line-height:1.7;color:var(--text)}
.md-wrap hr{border:none;border-top:1px solid var(--border);margin:24px 0}
.md-wrap table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.85em}
.md-wrap th{text-align:left;padding:8px 12px;background:var(--bg-accent);border:1px solid var(--border);font-weight:700;color:var(--text-header)}
.md-wrap td{padding:8px 12px;border:1px solid var(--border);color:var(--text)}
.md-wrap tr:nth-child(even) td{background:var(--bg-accent)}
.md-wrap em{color:var(--accent-gold)}
.md-wrap pre.diagram{font-size:.72em;line-height:1.3;white-space:pre;overflow-x:auto;background:var(--bg-accent);padding:16px;border-radius:8px;border:1px solid var(--border)}

/* ═══════════════════════════════════════
   占位页 (placeholder)
   ═══════════════════════════════════════ */
.placeholder{text-align:center;padding:80px 20px;color:var(--text-muted)}
.placeholder .icon{font-size:3em;margin-bottom:16px;opacity:.4}
.placeholder h2{color:var(--text-header);margin-bottom:12px}
.placeholder p{font-size:.9em;margin:6px 0}
.placeholder .note{font-size:.8em;opacity:.7}

/* ═══════════════════════════════════════
   章节页导航 (chapter-nav.js)
   ═══════════════════════════════════════ */
.ch-nav-bar{
  display:flex;justify-content:center;align-items:center;
  max-width:760px;margin:0 auto;
  padding:10px 16px;
  border-radius:10px;
  background:var(--bg-accent,#f5f3ee);
  border:1px solid var(--border,#e0ddd5);
}
.ch-nav-top{margin-bottom:16px}
.ch-nav-bottom{margin-top:24px}
.ch-nav-inner{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;gap:12px;
}
.ch-nav-bar a,.ch-nav-bar .ch-nav-disabled{
  display:flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:8px;
  font-size:.88em;font-weight:500;
  text-decoration:none;cursor:pointer;
  transition:all .2s;
  white-space:nowrap;overflow:hidden;
}
.ch-nav-bar a{
  color:var(--text,#333);
  background:var(--bg,#fff);
  border:1px solid var(--border,#e0ddd5);
}
.ch-nav-bar a:hover{
  background:var(--accent-red,#c44);
  color:#fff;border-color:var(--accent-red,#c44);
}
.ch-nav-bar a:hover .ch-nav-arrow{transform:none}
.ch-nav-disabled.ch-nav-disabled{
  color:var(--text-muted,#aaa);
  background:transparent;
  border-color:transparent;
  cursor:default;
}
.ch-nav-arrow{font-size:1.1em;line-height:1}
.ch-nav-label{
  overflow:hidden;text-overflow:ellipsis;
  max-width:200px;
}
.ch-nav-info{
  display:flex;flex-direction:column;align-items:center;
  gap:2px;flex-shrink:0;
}
.ch-nav-pos{
  font-size:.82em;font-weight:500;
  color:var(--text-muted,#888);
  font-family:Consolas,Monaco,monospace;
}
.ch-nav-vol{
  font-size:.76em;
  color:var(--text-muted,#aaa);
}
.ch-nav-center{
  display:flex;gap:8px;align-items:center;
}
.ch-nav-toc.ch-nav-toc,.ch-nav-top-btn.ch-nav-top-btn{
  padding:5px 12px;
  font-size:.82em;
  background:var(--bg-accent,#f0ede7);
  border:1px solid var(--border,#e0ddd5);
  border-radius:6px;
  color:var(--text-muted,#666);
  text-decoration:none;
  transition:all .2s;
}
.ch-nav-toc:hover,.ch-nav-top-btn:hover{
  color:var(--text,#333);
  background:var(--bg,#fff);
}
[data-theme="night"] .ch-nav-bar{
  background:var(--bg-accent,#2a2825);
  border-color:var(--border,#3a3835);
}
[data-theme="night"] .ch-nav-bar a{
  background:var(--bg,#1e1c1a);
  color:var(--text,#ddd);
  border-color:var(--border,#3a3835);
}
[data-theme="night"] .ch-nav-disabled.ch-nav-disabled{
  color:#555;
}
@media(max-width:768px){
  .ch-nav-label{max-width:80px;font-size:.78em}
  .ch-nav-vol{display:none}
  .ch-nav-bar{padding:8px 10px}
  .ch-nav-bar a,.ch-nav-bar .ch-nav-disabled{padding:5px 8px}
  .ch-nav-center{flex-direction:column;gap:4px}
}