/* ============================================================
   MyBlog2026 · 站点样式
   由 docs/设计方案预览.html 迁移而来，四套主题通过 data-theme 切换
   全部资源本地化，零 CDN 依赖
   ============================================================ */

/* ---------- 字体与基础变量 ----------
   宽度设计以 27″（1920×1080）与 32″（2560×1440）为主：
   --maxw   页面外壳宽度（含边距）
   --tocw   目录侧栏宽度
   --measure 正文阅读宽度上限（中文一行控制在 40~47 字）
   字号用 clamp 随视口缓慢放大，大屏上是「整体变大」而不是「行变得更长」 */
:root{
  --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-serif: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --radius: 14px;
  --radius-sm: 8px;

  --maxw: 1360px;                                  /* 页面外壳（含左右留白） */
  --tocw: 260px;                                   /* 目录侧栏 */
  --gap: 56px;                                     /* 正文与目录的间距 */
  --measure: 1000px;                               /* 正文阅读宽度上限 */

  /* 字号按档位固定：宽度和字号同步放大，行长稳定在 53~56 字，不会因为变宽而难读 */
  --fs-body: 18.5px;   /* 正文 */
  --fs-title: 34px;    /* 文章标题 */
  --fs-lead: 17px;     /* 摘要 / 次要文字 */
}
@media(max-width:900px){
  :root{ --fs-body:17px; --fs-title:28px; --fs-lead:15.5px; }
}

/* 主题一：极简白 —— 干净理性，像 Medium / 技术博客 */
:root[data-theme="light"]{
  --bg:#ffffff;      --bg-soft:#f7f8fa;     --card:#ffffff;
  --text:#1c1c1e;    --text-soft:#5b636b;   --text-mute:#949aa1;
  --accent:#2563eb;  --accent-soft:#eef3ff;  --accent-2:#0d9488;
  --border:#e6e8eb;  --code-bg:#f6f8fa;     --shadow:0 1px 2px rgba(16,24,40,.05);
  --hk:#d73a49;      --hs:#0a7d34;          --hc:#6a737d;  --hf:#6f42c1;  --hn:#005cc5;
}

/* 主题二：暖调杂志 —— 胶片质感的书卷气 */
:root[data-theme="warm"]{
  --bg:#faf6ef;      --bg-soft:#f3ece1;     --card:#fffdf9;
  --text:#2d2a26;    --text-soft:#6f6659;   --text-mute:#9e9484;
  --accent:#c05621;  --accent-soft:#f7ece0;  --accent-2:#2f7d6d;
  --border:#e6ddcd;  --code-bg:#f2ece2;     --shadow:0 1px 2px rgba(94,72,40,.07);
  --hk:#a63a2e;      --hs:#4a7c46;          --hc:#93856d;  --hf:#7a5490;  --hn:#2f6b8f;
}

/* 主题三：暗夜极客 —— 深色护眼，适合长文与技术笔记 */
:root[data-theme="dark"]{
  --bg:#11141a;      --bg-soft:#171b22;     --card:#181d24;
  --text:#e4e8ee;    --text-soft:#a2adb9;   --text-mute:#6f7b88;
  --accent:#2dd4bf;  --accent-soft:#12302c;  --accent-2:#82aaff;
  --border:#242a33;  --code-bg:#141920;     --shadow:0 1px 2px rgba(0,0,0,.4);
  --hk:#f47067;      --hs:#8ddb8c;          --hc:#768390;  --hf:#c792ea;  --hn:#82aaff;
}

/* 主题四：胶片琥珀（默认）—— 暖米白纸底 + 纯白卡片双层质感，焦糖橙点缀 */
:root[data-theme="amber"]{
  --bg:#faf7f2;      --bg-soft:#f5f0e8;     --card:#ffffff;
  --text:#2a2722;    --text-soft:#6b6660;   --text-mute:#9a938a;
  --accent:#d97706;  --accent-soft:#fdf1e0;  --accent-2:#2a9d8f;
  --border:#e7e2da;  --code-bg:#f6f1e8;     --shadow:0 8px 32px rgba(36,30,20,.07);
  --radius:18px;     --radius-sm:10px;
  --hk:#b52a18;      --hs:#4a7c46;          --hc:#8b857c;  --hf:#7a4a10;  --hn:#c15d0c;
}

/* ---------- 基础 ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-sans); font-size:16px; line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:34px 30px 64px;}
@media(max-width:640px){ .wrap{padding:24px 16px 44px;} }

/* ---------- 站点头部 ---------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding-bottom:22px; margin-bottom:34px;
  border-bottom:1px solid var(--border);
}
:root[data-theme="amber"] .site-header{
  position:relative; padding-top:26px; border-bottom:1px solid var(--border);
}
:root[data-theme="amber"] .site-header::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; border-radius:3px;
  background:linear-gradient(90deg,#fde68a 0%,#f6b97f 42%,#e8a14c 72%,#d97706 100%);
}
.site-title{
  font-family:var(--font-serif); font-size:21px; font-weight:600;
  color:var(--text); letter-spacing:.5px;
}
.site-title:hover{text-decoration:none;}
.site-nav{display:flex; align-items:center; gap:16px; font-size:14.5px; flex-wrap:wrap;}
.site-nav a{color:var(--text-soft);}
.site-nav a:hover{color:var(--accent); text-decoration:none;}
.site-nav a.cur{color:var(--accent);}
.theme-toggle{
  cursor:pointer; background:var(--bg-soft); border:1px solid var(--border);
  border-radius:999px; padding:3px 10px; font-size:13px; color:var(--text-soft);
  font-family:inherit;
}
.theme-toggle:hover{color:var(--accent); border-color:var(--accent);}

/* ---------- 首页 hero ---------- */
.hero{margin-bottom:40px;}
.hero h1{
  font-family:var(--font-serif); font-size:calc(var(--fs-title) * 1.15); line-height:1.3;
  margin:0 0 12px; font-weight:600;
}
.hero p{color:var(--text-soft); margin:0 0 14px; font-size:var(--fs-lead); max-width:46em;}
.hero .social{display:flex; gap:14px; font-size:14px;}

/* ---------- 区块标签（◆ EN · CN） ---------- */
.section-label{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:2.5px;
  color:var(--text-soft); margin:0 0 26px; text-transform:uppercase;
}
.section-label::before{
  content:"◆"; color:var(--accent); font-size:10px; letter-spacing:0;
}
.section-label.tight{margin-bottom:12px;}

/* ---------- 首页 / 列表时间线 ---------- */
.tl{list-style:none; margin:0; padding:0; position:relative;}
.tl::before{
  content:""; position:absolute; left:5px; top:10px; bottom:16px; width:2px;
  background:var(--border);
}
.tl-item{position:relative; padding:0 0 38px 32px;}
.tl-item:last-child{padding-bottom:4px;}
.tl-dot{
  position:absolute; left:0; top:5px; width:12px; height:12px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px var(--bg);
}
.tl-item:nth-child(even) .tl-dot{background:var(--accent-2);}
:root[data-theme="amber"] .tl-item:nth-child(odd) .tl-dot{
  background:linear-gradient(135deg,#f6b97f,#d97706);
}
.tl-date{font-family:var(--font-mono); font-size:calc(var(--fs-lead) * 0.86); color:var(--text-mute); margin-bottom:6px;}
.tl-title{margin:0 0 6px; font-family:var(--font-serif); font-size:calc(var(--fs-body) * 1.22); font-weight:600; line-height:1.4;}
.tl-title a{color:var(--text);}
.tl-title a:hover{color:var(--accent); text-decoration:none;}
.tl-sub{font-size:var(--fs-lead); font-weight:600; color:var(--accent); margin-bottom:9px;}
.tl-item:nth-child(even) .tl-sub{color:var(--accent-2);}
.tl-excerpt{color:var(--text-soft); font-size:var(--fs-lead); margin:0 0 14px; max-width:52em;}

/* 文章列表（简版）与卡片网格备选 */
.post-list{list-style:none; padding:0; margin:0;}
.post-item{padding:22px 0; border-bottom:1px solid var(--border);}
.post-item:first-child{padding-top:0;}
.post-item h3{
  margin:0 0 6px; font-size:19px; font-weight:600; line-height:1.5;
  font-family:var(--font-serif);
}
.post-item h3 a{color:var(--text);}
.post-item h3 a:hover{color:var(--accent); text-decoration:none;}
.post-meta{
  font-size:13px; color:var(--text-mute); display:flex; flex-wrap:wrap; gap:12px;
  margin-bottom:8px; font-family:var(--font-mono);
}
.post-excerpt{color:var(--text-soft); font-size:15px; margin:0 0 12px;}
.post-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px;
  list-style:none; padding:0; margin:0;
}
.post-card{
  border:1px solid var(--border); border-radius:var(--radius); padding:20px;
  background:var(--card); transition:.18s;
}
.post-card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--accent);}

/* ---------- 标签 ---------- */
.tags-row{display:flex; flex-wrap:wrap; gap:8px;}
.tag{
  font-size:12.5px; color:var(--text-soft); background:var(--bg-soft);
  border:1px solid var(--border); border-radius:999px; padding:2px 10px;
  font-family:var(--font-mono);
}
.tag:hover{color:var(--accent); border-color:var(--accent); text-decoration:none;}
.tag-cloud{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px;}
.tag-cloud .tag.big{font-size:15px; padding:4px 14px; color:var(--accent); background:var(--accent-soft); border-color:transparent;}
:root[data-theme="amber"] .tag-cloud .tag.big{
  background:linear-gradient(135deg,#fef3c7,#fcd9a3);
}

/* ---------- 分页 ---------- */
.pager{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  margin-top:38px; padding-top:22px; border-top:1px solid var(--border);
  font-size:14px; color:var(--text-soft);
}
.pager .pages{display:flex; gap:8px; flex-wrap:wrap;}
.pager .pages a, .pager .pages span{
  padding:2px 9px; border-radius:var(--radius-sm); border:1px solid var(--border);
  font-family:var(--font-mono); font-size:13px;
}
.pager .pages .cur{background:var(--accent); color:#fff; border-color:var(--accent);}

/* ---------- 文章页 ---------- */
.post-wrap{
  display:grid; grid-template-columns:minmax(0,1fr) var(--tocw);
  gap:var(--gap); align-items:start;
}
body.no-toc .post-wrap{grid-template-columns:minmax(0,1fr);}
/* 窄屏时侧栏目录让位，改用正文上方的折叠目录（.toc-mobile） */
@media(max-width:1000px){
  .post-wrap{grid-template-columns:minmax(0,1fr);}
  .toc{display:none;}
}

.article-header{margin-bottom:32px;}
.article-header h1{
  font-family:var(--font-serif); font-size:var(--fs-title); line-height:1.3; margin:0 0 12px;
}
.post-content{font-size:var(--fs-body); line-height:1.85; max-width:var(--measure);}
.post-content h2{
  font-family:var(--font-serif); font-size:calc(var(--fs-body) * 1.4); margin:44px 0 14px;
  padding-bottom:8px; border-bottom:1px solid var(--border);
}
.post-content h3{font-size:calc(var(--fs-body) * 1.15); margin:32px 0 10px;}
.post-content h4{font-size:var(--fs-body); margin:26px 0 8px;}
.post-content p{margin:0 0 20px;}

/* 标题锚点：悬停时出现在标题左侧 */
.post-content h2, .post-content h3, .post-content h4{scroll-margin-top:24px; position:relative;}
.post-content h2 .anchor, .post-content h3 .anchor, .post-content h4 .anchor{
  position:absolute; left:-0.85em; width:0.7em;
  color:var(--text-mute); opacity:0; text-decoration:none; font-weight:400;
  transition:opacity .12s;
}
.post-content h2:hover .anchor, .post-content h3:hover .anchor, .post-content h4:hover .anchor{opacity:1;}
.post-content .anchor:hover{color:var(--accent); text-decoration:none;}
.post-content ul, .post-content ol{margin:0 0 18px; padding-left:24px;}
.post-content li{margin-bottom:6px;}
.post-content blockquote{
  margin:0 0 20px; padding:2px 0 2px 18px; border-left:3px solid var(--accent);
  color:var(--text-soft); font-style:italic;
}
.post-content hr{border:0; border-top:1px solid var(--border); margin:38px 0;}
.post-content img{max-width:100%; border-radius:var(--radius-sm); display:block; margin:0 0 18px;}

/* 代码 */
pre{
  background:var(--code-bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:16px 18px; overflow-x:auto; margin:0 0 20px; line-height:1.65;
}
pre code{font-family:var(--font-mono); font-size:calc(var(--fs-body) * 0.8); background:none; padding:0; border-radius:0;}
code{
  font-family:var(--font-mono); font-size:calc(var(--fs-body) * 0.8); background:var(--code-bg);
  padding:2px 6px; border-radius:5px;
}

/* highlight.js token → 主题变量别名（不改动 hljs 输出，换肤只动变量） */
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-type{color:var(--hk);}
.hljs-string,.hljs-regexp,.hljs-addition,.hljs-meta .hljs-string{color:var(--hs);}
.hljs-comment,.hljs-quote,.hljs-deletion{color:var(--hc); font-style:italic;}
.hljs-function,.hljs-title,.hljs-section,.hljs-name,.hljs-selector-class,.hljs-selector-id{color:var(--hf);}
.hljs-number,.hljs-built_in,.hljs-builtin-name,.hljs-symbol,.hljs-bullet,.hljs-link,
.hljs-attr,.hljs-attribute,.hljs-variable,.hljs-template-variable{color:var(--hn);}
.hljs-meta{color:var(--hc);}
.hljs-emphasis{font-style:italic;}
.hljs-strong{font-weight:600;}

/* Callout 提示框（Obsidian 语法） */
.callout{
  display:flex; gap:12px; border:1px solid var(--border); border-left:4px solid var(--accent);
  border-radius:var(--radius-sm); padding:14px 16px; margin:0 0 20px;
  background:var(--bg-soft);
}
.callout .ico{font-size:17px; line-height:1.6; flex:0 0 auto;}
.callout .ico svg{display:block; margin-top:4px; stroke:currentColor; fill:none;}
.callout-body{min-width:0; flex:1;}
.callout-title{font-weight:600; margin-bottom:4px;}
.callout-content{color:var(--text-soft); font-size:15.5px;}
.callout-content p:last-child{margin-bottom:0;}
.callout-note{border-left-color:var(--accent);}
.callout-warning{border-left-color:#e0a400;}
.callout-tip{border-left-color:#3aa76d;}
.callout-quote{border-left-color:var(--text-mute);}
.callout-note .ico{color:var(--accent);}
.callout-warning .ico{color:#e0a400;}
.callout-tip .ico{color:#3aa76d;}
.callout-quote .ico{color:var(--text-mute);}

/* 数学公式 */
.math-block{
  text-align:center; padding:14px 0; margin:0 0 20px; font-family:var(--font-serif);
  font-size:19px; letter-spacing:.4px; overflow-x:auto;
}
.katex-error{color:var(--hk); font-family:var(--font-mono); font-size:14px;}

/* 表格 */
.post-content table{
  width:100%; border-collapse:collapse; margin:0 0 20px;
  font-size:calc(var(--fs-body) * 0.92);
}
.post-content th, .post-content td{
  border:1px solid var(--border); padding:9px 12px; text-align:left;
}
.post-content th{background:var(--bg-soft); font-weight:600;}

/* 目录侧栏 */
.toc{
  position:sticky; top:24px; font-size:calc(var(--fs-body) * 0.82); color:var(--text-soft);
  border-left:1px solid var(--border); padding-left:18px;
  max-height:calc(100vh - 48px); overflow-y:auto;
}
.toc .t{font-weight:600; color:var(--text); margin-bottom:12px; font-size:12px; letter-spacing:1.5px;}
.toc .t .n, .toc-mobile summary .n{
  display:inline-block; margin-left:6px; padding:0 7px;
  font-family:var(--font-mono); font-size:11px; font-weight:400; letter-spacing:0;
  color:var(--accent); background:var(--accent-soft);
  border-radius:999px;
}
.toc ul{list-style:none; padding:0; margin:0;}
.toc li{margin-bottom:8px; line-height:1.5;}
.toc ul ul{padding-left:14px; margin-top:8px;}
.toc ul ul li{margin-bottom:6px; font-size:.94em;}
.toc a{color:var(--text-soft); display:block;}
.toc a:hover{color:var(--accent); text-decoration:none;}
.toc ul ul a{color:var(--text-mute);}

/* 上下篇 */
.post-nav{
  display:flex; justify-content:space-between; gap:20px; margin-top:44px;
  padding-top:22px; border-top:1px solid var(--border); font-size:14.5px;
}
.post-nav span{display:block; font-size:12px; color:var(--text-mute); margin-bottom:3px;}

/* 窄屏折叠目录：宽屏隐藏，1000px 以下显示在正文上方 */
.toc-mobile{display:none;}
@media(max-width:1000px){
  .toc-mobile{
    display:block; margin:0 0 30px;
    border:1px solid var(--border); border-left:3px solid var(--accent);
    border-radius:var(--radius-sm);
    background:var(--bg-soft); padding:2px 16px;
    font-size:calc(var(--fs-body) * 0.92);
    box-shadow:var(--shadow);
  }
  .toc-mobile summary{cursor:pointer; font-weight:600; padding:11px 0; list-style:none;}
  .toc-mobile summary::-webkit-details-marker{display:none;}
  .toc-mobile summary::after{content:"\25BE"; color:var(--text-mute); margin-left:6px;}
  .toc-mobile[open] summary{border-bottom:1px solid var(--border);}
  .toc-mobile[open] summary::after{content:"\25B4";}
  .toc-mobile ul{padding:10px 0 12px; margin:0;}
  .toc-mobile li{margin-bottom:8px; list-style:none; line-height:1.5;}
  .toc-mobile ul ul{padding-left:16px; margin-top:8px;}
  .toc-mobile a{color:var(--text-soft);}
  .toc-mobile a:hover{color:var(--accent); text-decoration:none;}
}

/* ---------- 归档时间线 ---------- */
.year-group{margin-bottom:36px;}
.year-group h3{
  font-family:var(--font-mono); font-size:14px; color:var(--text-mute);
  margin:0 0 18px; letter-spacing:2px;
}
.timeline{list-style:none; padding:0; margin:0; position:relative;}
.timeline::before{
  content:""; position:absolute; left:5px; top:8px; bottom:10px; width:2px;
  background:var(--border);
}
.timeline li{position:relative; padding:0 0 20px 32px;}
.timeline li:last-child{padding-bottom:2px;}
.timeline li::before{
  content:""; position:absolute; left:0; top:5px; width:12px; height:12px;
  border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px var(--bg);
}
.timeline li:nth-child(even)::before{background:var(--accent-2);}
:root[data-theme="amber"] .timeline li:nth-child(odd)::before{
  background:linear-gradient(135deg,#f6b97f,#d97706);
}
.timeline .d{font-family:var(--font-mono); font-size:12.5px; color:var(--text-mute); margin-bottom:2px;}
.timeline .t a{color:var(--text); font-size:16.5px; font-weight:600; font-family:var(--font-serif);}
.timeline .t a:hover{color:var(--accent); text-decoration:none;}

/* ---------- 搜索 ---------- */
.search-box{display:flex; gap:10px; margin-bottom:26px;}
.search-box input{
  flex:1; font:inherit; font-size:15px; padding:11px 16px; color:var(--text);
  background:var(--bg-soft); border:1px solid var(--border); border-radius:999px;
  outline:none; min-width:0;
}
.search-box input:focus{border-color:var(--accent);}
.search-box button{
  font:inherit; cursor:pointer; padding:0 22px; border-radius:999px; border:0;
  background:var(--accent); color:#fff;
}
.search-result{list-style:none; padding:0; margin:0;}
.search-result li{padding:16px 0; border-bottom:1px solid var(--border);}
.search-result li h4{margin:0 0 4px; font-size:17px; font-family:var(--font-serif);}
.search-result mark{background:var(--accent-soft); color:var(--accent); padding:0 2px; border-radius:3px;}
.search-tip{color:var(--text-mute); font-size:14px;}

/* ---------- 页脚 ---------- */
.site-footer{
  margin-top:52px; padding-top:22px; border-top:1px solid var(--border);
  font-size:13px; color:var(--text-mute);
}

/* ---------- 未命中的双链 ---------- */
/* 说明：引用的笔记未发布时，默认渲染成「虚线底 + 跳搜索」的链接，而不是一截死字 */
.broken{
  color:var(--text-soft);
  border-bottom:1px dashed var(--border);
  text-decoration:none;
}
a.broken{cursor:pointer;}
a.broken:hover{color:var(--accent); border-bottom-color:var(--accent); text-decoration:none;}

/* ---------- 空状态 ---------- */
.empty{
  border:1px dashed var(--border); border-radius:var(--radius);
  padding:28px 24px; color:var(--text-mute); text-align:center; font-size:14.5px;
}

/* ============================================================
   大屏适配：27″（≈1920）与 32″（≈2560 及以上）
   策略不是把行拉长，而是整页比例一起放大：
   更大的外壳、更宽的目录栏、更大的留白与字号。
   ============================================================ */
@media(min-width:1800px){
  :root{
    --maxw: 1600px;
    --tocw: 300px;
    --gap: 64px;
    --measure: 1180px;
    --fs-body: 21px;
    --fs-title: 42px;
    --fs-lead: 19px;
  }
  .wrap{padding:44px 40px 84px;}
  .site-header{padding-bottom:26px; margin-bottom:42px;}
  .hero{margin-bottom:52px;}
  .section-label{margin-bottom:30px;}
  .tl-item{padding-bottom:44px;}
  .post-content p{margin-bottom:22px;}
  .article-header{margin-bottom:38px;}
  .site-footer{margin-top:64px; padding-top:26px;}
  .callout{padding:18px 20px; margin-bottom:24px;}
  pre{padding:18px 22px;}
  .empty{padding:34px 28px; font-size:16px;}
}

/* 超宽屏（4K / 32″ 4K）：再放大一档，但仍封顶，避免行长失控 */
@media(min-width:2400px){
  :root{
    --maxw: 1820px;
    --tocw: 320px;
    --gap: 72px;
    --measure: 1300px;
    --fs-body: 23px;
    --fs-title: 48px;
    --fs-lead: 21px;
  }
  .wrap{padding:52px 44px 96px;}
  .tl-excerpt{max-width:56em;}
}