
:root{
  --bg:#fbfbfd; --surface:#ffffff; --text:#1f2328; --muted:#6b7280;
  --border:#e6e8eb; --primary:#5a4fcf; --primary-weak:#efecff;
  --code-bg:#1e2230; --code-text:#e6e8eb;
  --sidebar-w:286px; --topbar-h:56px;
  --radius:12px;
}
[data-theme="dark"]{
  --bg:#0f1115; --surface:#171a21; --text:#e6e8eb; --muted:#9aa0a8;
  --border:#272c35; --primary:#8b85ff; --primary-weak:#211e3a;
  --code-bg:#0b0d12; --code-text:#e6e8eb;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.8; font-size:16px; -webkit-font-smoothing:antialiased;
}
a{color:var(--primary); text-decoration:none;}
a:hover{text-decoration:underline;}

/* 顶栏 */
.topbar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:12px;
  height:var(--topbar-h); padding:0 16px; background:var(--surface);
  border-bottom:1px solid var(--border);
}
.topbar-title{font-weight:600; font-size:1rem;}
.menu-btn{display:none; background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--text);}
.theme-btn{margin-left:auto; background:none; border:1px solid var(--border); border-radius:8px; width:38px; height:34px; cursor:pointer; font-size:1.1rem;}

/* 布局 */
.layout{display:flex; min-height:calc(100vh - var(--topbar-h));}
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--surface); border-right:1px solid var(--border);
  position:sticky; top:var(--topbar-h); height:calc(100vh - var(--topbar-h));
  overflow-y:auto; padding:18px 14px;
}
.content{flex:1; min-width:0; padding:30px 36px 64px;}

/* 侧边栏导航 */
.nav-brand{display:block; font-weight:700; font-size:1.02rem; line-height:1.4; margin:4px 8px 14px; color:var(--text);}
.nav-brand:hover{text-decoration:none;}
.nav-home{display:block; padding:8px 10px; border-radius:8px; margin-bottom:6px; color:var(--muted); font-weight:600;}
.nav-home:hover{background:var(--primary-weak); text-decoration:none; color:var(--primary);}
.nav-part{margin:14px 8px 6px; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); font-weight:700;}
.nav-ch{display:block; padding:7px 10px; border-radius:8px; color:var(--text); font-size:0.94rem; border-left:3px solid transparent;}
.nav-ch:hover{background:var(--primary-weak); text-decoration:none;}
.nav-ch.active{background:var(--primary-weak); border-left-color:var(--primary); color:var(--primary); font-weight:600;}
.nav-home.active{background:var(--primary-weak); color:var(--primary);}

/* 章节页眉 */
.crumb{color:var(--muted); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.05em;}
.chapter-title{font-size:1.9rem; line-height:1.3; margin:8px 0 4px;}
.chapter-sub{color:var(--muted); margin:0 0 1.2em; font-size:1.02rem;}

/* 文章正文 */
.chapter-body{max-width:780px;}
.chapter-body h3{font-size:1.28rem; margin:1.9em 0 0.6em; padding-top:0.4em; border-top:1px solid var(--border);}
.chapter-body h3:first-child{border-top:none;}
.chapter-body p{margin:0.95em 0;}
.chapter-body ul,.chapter-body ol{padding-left:1.5em; margin:0.9em 0;}
.chapter-body li{margin:0.4em 0;}
.chapter-body img{max-width:100%; border-radius:10px;}

/* 行内代码与代码块 */
code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;}
:not(pre) > code{background:var(--primary-weak); color:var(--primary); padding:2px 6px; border-radius:5px; font-size:0.9em;}
pre{background:var(--code-bg); color:var(--code-text); padding:14px 16px; border-radius:10px; overflow-x:auto; margin:1.3em 0; font-size:13.5px; line-height:1.6;}
pre code{background:none; color:inherit; padding:0; font-size:inherit;}

/* 表格 */
table{border-collapse:collapse; width:100%; margin:1.3em 0; font-size:14.5px; display:block; overflow-x:auto;}
th,td{border:1px solid var(--border); padding:8px 12px; text-align:left; vertical-align:top;}
th{background:var(--primary-weak); font-weight:600; white-space:nowrap;}

/* Callout 提示框 */
.callout{border-left:4px solid var(--primary); background:var(--primary-weak); padding:12px 16px; border-radius:0 10px 10px 0; margin:1.3em 0;}
.callout p{margin:0.45em 0;}
.callout p:first-child{margin-top:0;}
.callout p:last-child{margin-bottom:0;}
.callout-experience{border-color:#2563eb; background:#eff6ff;}
.callout-suggestion{border-color:#16a34a; background:#f0fdf4;}
.callout-warning{border-color:#d97706; background:#fffbeb;}
.callout-highlight{border-color:#7c3aed; background:#f5f3ff;}
.callout-summary{border-color:#0d9488; background:#f0fdfa;}
.callout-author{border:none; background:transparent; text-align:center; color:var(--muted); font-size:14px; border-top:1px solid var(--border); padding-top:16px; margin-top:2.2em; border-radius:0;}
[data-theme="dark"] .callout-experience{background:#15233f;}
[data-theme="dark"] .callout-suggestion{background:#11261a;}
[data-theme="dark"] .callout-warning{background:#2a2113;}
[data-theme="dark"] .callout-highlight{background:#1e1838;}
[data-theme="dark"] .callout-summary{background:#0f2b27;}
.callout-experience p:first-child strong{color:#1d4ed8;}
.callout-suggestion p:first-child strong{color:#15803d;}
.callout-warning p:first-child strong{color:#b45309;}
.callout-highlight p:first-child strong{color:#6d28d9;}
.callout-summary p:first-child strong{color:#0f766e;}

/* 本章目录 */
.toc-details{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 16px; margin:1.4em 0;}
.toc-details summary{cursor:pointer; font-weight:600; user-select:none;}
.toc-details ul{margin:0.6em 0 0; padding-left:1.2em;}
.toc-details a{font-size:14.5px;}

/* 翻页 */
.pager{display:flex; justify-content:space-between; gap:12px; margin:2.6em 0 0.5em; flex-wrap:wrap;}
.pager a{padding:10px 18px; border:1px solid var(--border); border-radius:10px; background:var(--surface); font-weight:600;}
.pager a:hover{text-decoration:none; border-color:var(--primary); color:var(--primary);}

/* 首页 hero */
.hero{text-align:center; padding:52px 20px 38px; max-width:820px; margin:0 auto;}
.hero-badge{display:inline-block; background:var(--primary-weak); color:var(--primary); padding:4px 14px; border-radius:999px; font-size:13px; font-weight:600; margin-bottom:16px;}
.hero h1{font-size:2.3rem; margin:0 0 12px; line-height:1.25;}
.hero-sub{color:var(--muted); font-size:1.06rem; max-width:620px; margin:0 auto 8px;}
.hero-meta{color:var(--muted); font-size:0.9rem;}
.hero-cta{display:inline-block; margin-top:24px; background:var(--primary); color:#fff; padding:12px 30px; border-radius:999px; font-weight:600;}
.hero-cta:hover{text-decoration:none; opacity:0.92; color:#fff;}

.reading-plan,.toc-full,.about{max-width:840px; margin:0 auto 38px; padding:0 20px;}
.reading-plan h2,.toc-full h2,.about h2{font-size:1.4rem; border-bottom:2px solid var(--primary); padding-bottom:8px; display:inline-block; margin-bottom:0.6em;}
.plan-table{display:table;}
.toc-full .part-title{font-size:1.15rem; margin:1.6em 0 0.3em; color:var(--primary);}
.toc-full .part-intro{color:var(--muted); margin:0 0 0.7em; font-size:0.95rem;}
.toc-full ul{list-style:none; padding-left:0; max-width:780px;}
.toc-full li{padding:9px 0; border-bottom:1px solid var(--border);}
.toc-full li a{font-weight:600;}
.toc-full li span{color:var(--muted); font-size:0.92rem; display:block; margin-top:2px;}
.about p{color:var(--text); max-width:780px;}

/* 页脚 */
.site-footer{text-align:center; padding:22px 16px; border-top:1px solid var(--border); color:var(--muted); font-size:0.85rem; background:var(--surface);}

/* 移动端 */
@media (max-width:860px){
  .menu-btn{display:block;}
  .topbar-title{font-size:0.95rem;}
  .sidebar{position:fixed; left:0; top:var(--topbar-h); bottom:0; z-index:40; transform:translateX(-100%); transition:transform .25s ease; box-shadow:2px 0 14px rgba(0,0,0,.12);}
  .sidebar.open{transform:translateX(0);}
  .content{padding:22px 18px 64px;}
  .hero h1{font-size:1.75rem;}
  .chapter-title{font-size:1.55rem;}
}
