/* =====================================================================
   配色 v8 —— 单套暖色系（取消多套切换）
   参考：pidan.dev 的赤陶强调色 + 暖褐 / 暖纸底色
     技术页 = 暖褐黑深色（#1F1B17）   随笔页 = 暖纸白浅色（#FAF9F7）
   ★ 全部文字色经程序实测 >= 7:1（WCAG AAA），深色避开纯黑、浅色避开纯白
   ★ 布局规则未改动，仅替换配色令牌
   ===================================================================== */

/* ---------- 暖褐黑（技术页 · 默认） ---------- */
:root{
  --bg:#1F1B17; --bg-2:#191512; --surface:#2B2520; --surface-2:#332C26;
  --text:#EDE4D9; --text-2:#C9C0B6; --muted:#aca59d;
  --rule:#3A332C; --rule-2:#4A4239;
  --accent:#E89576; --accent-ink:#1F1B17; --structure:#DCAE95; --note:#E8C57A;
  --grid:rgba(232,149,118,.030); --glow1:rgba(232,149,118,.10); --glow2:rgba(220,174,149,.08);
  --code-bg:#15110E; --code-gutter:#a49d97; --code-key:#D49060; --code-str:#96BE80;
  --code-num:#74BFB0; --code-comment:#a49d94;
  --font-display:"Space Grotesk","Inter","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Inter","Segoe UI","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-serif:"Fraunces","LXGW WenKai","KaiTi","Songti SC",Georgia,serif;
  --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --measure:44rem; --p:0%;
}
/* ---------- 暖纸白（随笔 · 浅色） ---------- */
html[data-mood="essay"]{
  --bg:#FAF9F7; --bg-2:#F4F1EC; --surface:#FFFFFF; --surface-2:#F0EBE3;
  --text:#2D2B28; --text-2:#4A453F; --muted:#5a554f;
  --rule:#E5E0D8; --rule-2:#D5CEC4;
  --accent:#8b3f20; --accent-ink:#FFFFFF; --structure:#843f5c; --note:#774d00;
  --grid:rgba(163,74,38,.030); --glow1:rgba(163,74,38,.05); --glow2:rgba(132,63,92,.05);
  --code-bg:#F0EBE3; --code-gutter:#524d48; --code-key:#793e22; --code-str:#335627;
  --code-num:#19574d; --code-comment:#524d48;
}

/* ---------- 基底 + 分层背景（不用纯黑） ---------- */
html{ background:var(--bg); }
body{
  background-color:var(--bg)!important;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px)!important;
  background-size:26px 26px!important; background-attachment:fixed;
  color:var(--text)!important; font-family:var(--font-body)!important;
  font-size:16px; line-height:1.85; -webkit-font-smoothing:antialiased;
  transition:background-color .4s ease,color .4s ease;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(62% 46% at 10% -6%, var(--glow1), transparent 72%),
    radial-gradient(56% 44% at 94% -2%, var(--glow2), transparent 72%),
    radial-gradient(80% 50% at 50% 108%, var(--glow1), transparent 75%);
}
#body-wrap,#content-inner,#page-header,#footer{ background:transparent!important; position:relative; z-index:1; }
#web_bg{ display:none!important; }
#content-inner{ max-width:1120px; }
::selection{ background:var(--accent); color:var(--accent-ink); }
a{ color:var(--accent); }

/* ---------- 首页门户（导航型首页） ---------- */
.hub-topics{ max-width:var(--measure); margin:0 auto 2.6rem; padding:0 1.4rem; }
.hub-topics .k{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.22em; color:var(--accent); text-transform:uppercase; }
.hub-topics h2{ font-family:var(--font-display)!important; font-size:1.45rem; margin:.35rem 0 .25rem; color:var(--text); font-weight:700; letter-spacing:-.01em; }
.hub-topics .hub-head p{ color:var(--muted); font-size:.85rem; margin:0 0 1.1rem; }
.topic-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:10px; }
.topic{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:12px 14px; background:var(--surface); border:1px solid var(--rule);
  border-radius:9px; text-decoration:none; color:var(--text); transition:transform .2s,border-color .2s;
}
.topic:hover{ border-color:var(--accent); transform:translateY(-2px); }
.topic .t-name{ font-weight:600; font-size:.95rem; }
.topic .t-count{ font-family:var(--font-mono); font-size:.78rem; color:var(--accent); }

/* ---------- 页头 ---------- */
#page-header,#page-header.full_page,#page-header.not-top-img{ background:transparent!important; background-image:none!important; }
#page-header::before{ background:none!important; }
#page-header.full_page{ display:block!important; height:auto!important; padding:11vh 0 5vh!important; border-bottom:1px solid var(--rule); }
#page-header.full_page #site-info{ position:static!important; transform:none!important; text-align:left!important; max-width:var(--measure); margin:0 auto; padding:0 1.4rem; }
#page-header #site-title,#page-header #site-title a{
  font-family:var(--font-display)!important; font-weight:700!important; letter-spacing:-.02em;
  font-size:clamp(1.9rem,4.4vw,2.7rem)!important; line-height:1.1!important; color:var(--text)!important;
  background:none!important; -webkit-text-fill-color:var(--text)!important;
}
#page-header #site-subtitle{ font-family:var(--font-mono)!important; color:var(--muted)!important; font-size:.78rem!important; letter-spacing:.2em; margin-top:1rem; text-transform:uppercase; }
#scroll-down{ display:none!important; }
#page-header.not-top-img{ padding:12vh 0 2.6rem!important; border-bottom:1px solid var(--rule); }
#page-header.not-top-img #post-info{ max-width:var(--measure); margin:0 auto; padding:0 1.4rem; text-align:left; }
.post-title,#post-title{ font-family:var(--font-display)!important; font-weight:700!important; color:var(--text)!important; line-height:1.2!important; }
#page-header .post-meta{ font-family:var(--font-mono)!important; color:var(--muted)!important; font-size:.72rem!important; letter-spacing:.1em; text-transform:uppercase; margin-top:.9rem; }

/* ---------- 导航 ---------- */
#nav{ background:color-mix(in srgb,var(--bg) 90%,transparent)!important; -webkit-backdrop-filter:saturate(150%) blur(12px); backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--rule); box-shadow:none!important; }
#nav #site-name,#nav #site-name a,#nav .site-name,.nav-site-title{ font-family:var(--font-mono)!important; color:var(--text)!important; letter-spacing:.02em; }
#nav .site-page,#nav a{ color:var(--text-2)!important; font-family:var(--font-mono)!important; font-size:.84rem; transition:color .2s; }
#nav .site-page:hover,#nav a:hover{ color:var(--accent)!important; }

/* ---------- 首页索引 ---------- */
#recent-posts{ counter-reset:item; max-width:var(--measure); margin:0 auto; padding:0 1.4rem; }
#recent-posts .recent-post-item{
  background:transparent!important; border:none!important; border-bottom:1px solid var(--rule)!important;
  border-radius:0!important; box-shadow:none!important; padding:1.6rem 0!important; margin:0!important;
  transform:none!important; position:relative; counter-increment:item; display:block!important;
  transition:background-color .25s ease,border-color .25s ease;
}
#recent-posts .recent-post-item:hover{ border-bottom-color:var(--accent)!important; }
#recent-posts .recent-post-item::before{
  content:"[" counter(item,decimal-leading-zero) "]"; font-family:var(--font-mono); font-size:.74rem; color:var(--structure);
  position:absolute; left:0; top:1.9rem; letter-spacing:.03em;
}
#recent-posts .recent-post-item > .recent-post-info{ padding-left:3.1rem!important; width:100%!important; }
.recent-post-item .post_cover{ display:none!important; }
.recent-post-item .recent-post-info .post-title{ font-family:var(--font-display)!important; font-size:1.22rem!important; line-height:1.45!important; font-weight:600!important; color:var(--text)!important; transition:color .2s; }
.recent-post-item:hover .post-title{ color:var(--accent)!important; }
.recent-post-item .post-meta{ font-family:var(--font-mono)!important; color:var(--muted)!important; font-size:.7rem!important; letter-spacing:.08em; text-transform:uppercase; margin-top:.5rem; }
.recent-post-item .post-meta a{ color:var(--structure)!important; }
.recent-post-item .post-meta .post-meta-date{ color:var(--accent)!important; }
.recent-post-item .content{ color:var(--text-2)!important; font-size:.9rem!important; line-height:1.8!important; margin-top:.55rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- 正文（深底用略重字重抵消光晕） ---------- */
#article-container{ font-family:var(--font-body); color:var(--text-2); font-size:1.05rem; line-height:1.92; font-weight:400; counter-reset:h2; }
#article-container p{ margin:1.15em 0; }
#article-container h1,#article-container h2,#article-container h3,#article-container h4{ font-family:var(--font-display)!important; color:var(--text)!important; letter-spacing:-.01em; font-weight:700; }
#article-container h2{ counter-increment:h2; border:none!important; border-top:1px solid var(--rule)!important; padding:1.15em 0 0!important; margin-top:2em!important; }
#article-container h2::before{ content:"\00A7 " counter(h2,decimal-leading-zero) "\00A0\00A0"; font-family:var(--font-mono); font-size:.66em; color:var(--structure); letter-spacing:.06em; font-weight:500; }
#article-container h3::before{ content:""; display:inline-block; width:6px; height:6px; background:var(--accent); margin-right:.55em; transform:translateY(-.12em); }
#article-container a{ color:var(--accent); text-decoration:none; background-image:linear-gradient(var(--accent),var(--accent)); background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .28s ease; }
#article-container a:hover{ background-size:100% 1px; }
#article-container img{ border:1px solid var(--rule-2); border-radius:6px; display:block; margin:1.5em auto; }
#article-container blockquote{ background:var(--surface)!important; border:none!important; border-left:3px solid var(--note)!important; border-radius:0 6px 6px 0!important; padding:1em 1.2em!important; color:var(--text-2)!important; }
#article-container table{ border:none!important; border-top:1px solid var(--rule-2)!important; border-bottom:1px solid var(--rule-2)!important; }
#article-container table th{ background:var(--surface-2)!important; color:var(--text)!important; }
#article-container table th,#article-container table td{ border:none!important; border-bottom:1px solid var(--rule)!important; }
#article-container hr{ border:none!important; height:1px; background:var(--rule)!important; margin:2.4em 0!important; }

#article-container code{ font-family:var(--font-mono)!important; font-size:.87em; background:var(--surface-2); color:var(--text); padding:.12em .42em; border:1px solid var(--rule); border-radius:4px; }
#article-container pre code,#article-container figure.highlight code{ background:none!important; border:none!important; padding:0!important; color:inherit!important; font-size:inherit!important; }

/* ---------- 代码块：头部条 + 突破栏宽 ---------- */
figure.highlight{
  width:min(60rem,94vw); margin:1.6em 0 1.6em 50%!important; transform:translateX(-50%);
  background:var(--code-bg)!important; border:1px solid var(--rule)!important;
  border-radius:9px!important; box-shadow:none!important; overflow:hidden; position:relative;
}
figure.highlight .cb-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 12px; background:var(--surface-2); border-bottom:1px solid var(--rule);
}
figure.highlight .cb-lang{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-2); }
figure.highlight .cb-copy{
  background:transparent; border:1px solid var(--rule-2); color:var(--text-2);
  font-family:var(--font-mono); font-size:.68rem; padding:2px 9px; border-radius:5px; cursor:pointer; transition:all .2s;
}
figure.highlight .cb-copy:hover{ color:var(--accent); border-color:var(--accent); }
figure.highlight .cb-copy.ok{ color:var(--accent); border-color:var(--accent); }
figure.highlight table{ display:block; width:100%; border-collapse:collapse; }
figure.highlight td.gutter{ width:1%; padding:10px 0 10px 12px!important; text-align:right; color:var(--code-gutter)!important; font-family:var(--font-mono)!important; font-size:.82rem; user-select:none; }
figure.highlight td.gutter pre{ border:none!important; background:none!important; }
figure.highlight td.code{ padding:10px 14px 12px 12px!important; }
figure.highlight pre{ background:none!important; border:none!important; margin:0!important; font-family:var(--font-mono)!important; font-size:.88rem; line-height:1.7; color:var(--text-2)!important; font-weight:400; }
figure.highlight .keyword,figure.highlight .selector-tag,figure.highlight .built_in{ color:var(--code-key)!important; }
figure.highlight .string,figure.highlight .attr-value{ color:var(--code-str)!important; }
figure.highlight .number,figure.highlight .literal{ color:var(--code-num)!important; }
figure.highlight .comment{ color:var(--code-comment)!important; font-style:italic; }
figure.highlight .meta{ color:var(--code-comment)!important; }
figure.highlight .title,figure.highlight .function .title{ color:var(--accent)!important; }

/* ---------- 左目录轨 ---------- */
#rail-left{
  position:fixed; left:16px; top:88px; width:212px; max-height:68vh; overflow:auto; z-index:60;
  padding:10px 12px; background:var(--surface); border:1px solid var(--rule); border-radius:10px;
  transition:width .32s cubic-bezier(.2,.7,.2,1), padding .32s, opacity .3s;
}
#rail-left .item-headline{ display:none!important; }
#rail-left .toc{ font-size:.8rem; }
#rail-left .toc-link, #rail-left .toc a{
  display:block; padding:3px 0 3px 10px; color:var(--muted)!important; text-decoration:none;
  border-left:2px solid var(--rule); transition:color .2s, border-color .2s, opacity .25s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#rail-left .toc-link:hover{ color:var(--text)!important; }
#rail-left .toc-link.is-active-link, #rail-left .toc a.is-active-link{ color:var(--accent)!important; border-left-color:var(--accent); }
html.reading #rail-left{ width:30px; padding:10px 6px; overflow:hidden; }
html.reading #rail-left::before{
  content:""; position:absolute; left:14px; top:10px; width:2px; height:calc(100% - 20px); border-radius:2px;
  background:linear-gradient(180deg, var(--accent) var(--p), var(--rule) var(--p));
}
html.reading #rail-left .toc-link, html.reading #rail-left .toc a{ opacity:0; pointer-events:none; }
html.reading #rail-left:hover{ width:212px; padding:10px 12px; overflow:auto; }
html.reading #rail-left:hover .toc-link, html.reading #rail-left:hover .toc a{ opacity:1; pointer-events:auto; }
html.reading #rail-left:hover::before{ opacity:0; }

/* ---------- 右侧页边注 ---------- */
#rail-right{
  position:fixed; right:16px; top:88px; width:196px; max-height:68vh; overflow:auto; z-index:60;
  transition:width .32s cubic-bezier(.2,.7,.2,1);
}
#rail-right .rail-title{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin:0 0 8px 2px;
}
#rail-right .mnote{
  background:var(--surface); border:1px solid var(--rule); border-left:2px solid var(--structure);
  border-radius:6px; padding:7px 9px; margin-bottom:7px; cursor:pointer; transition:padding .25s, text-align .25s;
}
#rail-right .mnote:hover{ border-left-color:var(--accent); }
#rail-right .mn-badge{ font-family:var(--font-mono); font-size:.66rem; color:var(--accent); display:block; }
#rail-right .mn-body{
  display:block; color:var(--text-2); font-size:.78rem; line-height:1.55; margin-top:4px;
  max-height:110px; overflow:hidden; transition:max-height .3s ease, opacity .25s ease;
}
html.reading #rail-right{ width:52px; }
html.reading #rail-right .rail-title{ opacity:0; }
html.reading #rail-right .mnote{ padding:5px 4px; text-align:center; }
html.reading #rail-right .mn-body{ max-height:0; opacity:0; }
#rail-right .mnote.open .mn-body{ max-height:260px; opacity:1; }
html.reading #rail-right .mnote.open{ width:196px; text-align:left; }

@media (max-width:1400px){ #rail-right{ display:none!important; } }
@media (max-width:1080px){ #rail-left{ display:none!important; } }
@media (min-width:1200px){
  body.post-rails #aside-content{ display:none!important; }
  body.post-rails #content-inner{ max-width:980px; }
}

/* ---------- 随笔声部：浅色 + 衬线 + 诗体 ---------- */
html[data-mood="essay"] #article-container{ font-family:var(--font-serif)!important; font-size:1.12rem; line-height:2.15; color:var(--text-2); max-width:40rem; margin:0 auto; }
html[data-mood="essay"] #article-container p{ margin:1.7em 0; }
html[data-mood="essay"] #article-container h2{ border-top:none!important; text-align:center; font-family:var(--font-serif)!important; }
html[data-mood="essay"] #article-container h2::before{ content:none; }
html[data-mood="essay"] #article-container blockquote{ background:transparent!important; border-left:none!important; text-align:center; font-family:var(--font-serif); border-radius:0!important; }
html[data-mood="essay"] .post-title{ font-family:var(--font-serif)!important; }
html[data-mood="essay"] #page-header.not-top-img #post-info,html[data-mood="essay"] #page-header.not-top-img .post-meta{ text-align:center; }
html[data-mood="essay"] figure.highlight{ width:min(52rem,92vw); }

/* ---------- 进度条 / 切换器 / 显现 ---------- */
.read-progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:9999; transition:width .12s linear; }
  position:fixed; left:16px; bottom:16px; z-index:9999; display:flex; gap:4px; align-items:center;
  padding:7px 10px; background:var(--surface); border:1px solid var(--rule); border-radius:8px;
  font-family:var(--font-mono); font-size:11px; box-shadow:0 10px 30px -12px rgba(0,0,0,.5);
}
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1); }
.reveal.reveal-in{ opacity:1; transform:none; }

/* ---------- 分页 / 页脚 / 右侧按钮 ---------- */
#pagination .page-number,#pagination .extend{ border-radius:6px!important; background:transparent!important; color:var(--text-2)!important; border:1px solid var(--rule)!important; transition:all .2s; }
#pagination .page-number:hover{ color:var(--accent)!important; border-color:var(--accent)!important; }
#pagination .page-number.current{ background:var(--accent)!important; color:var(--accent-ink)!important; border-color:var(--accent)!important; }
#footer{ border-top:1px solid var(--rule); color:var(--muted)!important; }
#footer #footer-wrap,#footer .copyright,#footer a{ color:var(--muted)!important; font-family:var(--font-mono); font-size:.78rem; }
#footer a:hover{ color:var(--accent)!important; }
#rightside>div>button,#rightside>div>a{ background:var(--surface)!important; color:var(--text-2)!important; border:1px solid var(--rule)!important; border-radius:8px!important; transition:all .2s; }
#rightside>div>button:hover,#rightside>div>a:hover{ background:var(--accent)!important; color:var(--accent-ink)!important; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{ background:var(--rule-2); border-radius:6px; }
::-webkit-scrollbar-track{ background:var(--bg); }

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms!important; animation-duration:.01ms!important; }
}
@media print{ .read-progress,#rail-left,#rail-right{ display:none!important; } }