@charset "utf-8";

/* ===========================================================
   悠悠时光 · 金色的大自然（移植自 v1.0 视觉规范，2026-09-29）
   -------------------------------------------------------------------
   整套只有一个主角：金。按明度分工——
     · 金棕 #8b6a1e —— 主色，压深到能当正文（对比度 5.6:1），链接/强调/小标题
     · 亮金 #c69a3d —— 装饰，只画边不写字（序号/描边/分隔线）
     · 陶土 #b0602e —— 点睛，全站仅二三处
   底走暖米 #faf5e8（非纯白）、字走深褐 #2a2118（非纯黑），
   这一暖一沉把金"托"住，纯白底上放金最容易显廉价。
   行情语义色（涨红跌绿）仅用于数据表，不进装饰色系。
   =========================================================== */

/* ---------- 自托管衬线字库（2026-09-29 引入；2026-09-29 晚升 700） ----------
   两个文件、两个字重，由 deploy/font_subset.py 生成：
     yt-serif-700.woff2   GB2312 一级 + ASCII + 中文标点   约 723 KB
     yt-brand-900.woff2   站名 + ASCII + 中文标点          约  10 KB
   站名走 900、其余衬线统一 700（L2-A 冻结方案，2026-09-29 晚从 500 升上来：
   标题层级感偏柔、字号提档也救不回来；同步升字重后视觉与站名同档厚重），理由见 font_subset.py 头部注释。

   三条约定，改的时候别踩：
     1. 不写 unicode-range。字库是子集，缺字时浏览器本来就会顺着 --serif 栈往下找
        下一个家族，比维护一大段 range 省事，也不会漏。
     2. src 的 URL 不带 ?v=。header.php 里那条 rel=preload 必须与这里「逐字节相同」，
        否则浏览器按两个 cache key 各下一次（等于白下 723 KB）。
        要硬刷缓存就改文件名，两处一起改。
     3. font-display: swap —— 字体没到之前先用系统衬线画出来，不让标题空着。
   ---------------------------------------------------------- */
@font-face {
  font-family: "YT Serif";
  src: url("/assets/fonts/yt-serif-700.woff2") format("woff2");
  font-weight: 400 700;   /* 单字面 700；写成区间，请求 400/700 都精确命中，不触发合成粗体 */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "YT Brand Serif";
  src: url("/assets/fonts/yt-brand-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 表面 */
  --bg:      #faf5e8;                 /* 暖米底（非纯白） */
  --paper:   #f3ead6;                 /* 卡片纸（沉米） */
  --paper-2: #efe4cb;                 /* 更亮一档的米，表头/浅底 */
  --ink:     #2a2118;                 /* 深褐正文（非纯黑） */
  --muted:   #6b5a47;                 /* 次要字 */
  --line:    rgba(42, 33, 24, 0.15); /* 分隔线：柔褐半透明 */

  /* 金系 */
  --accent:  #8b6a1e;                 /* 金棕：主色 */
  --gilt:    #c69a3d;                 /* 亮金：只画边不写字 */
  --clay:    #b0602e;                 /* 陶土：点睛 */

  /* 行情语义（备用，红=涨 绿=跌，仅数据表使用） */
  --up:      #a8342a;
  --down:    #4c6b3c;

  /* 光晕 */
  --wash:    rgba(198, 154, 61, 0.20);
  --wash-2:  rgba(176, 96, 46, 0.07);

  /* 字体 */
  /* 栈首是自带的子集字库，后面是回落链 —— 字库里没有的字（生僻字、以后新增的字）
     顺着往下找，绝不会出豆腐块。 */
  --serif: "YT Serif", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
           "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 760px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
}

/* 双光源金色光晕（v1.0 质感核心）：固定视口顶部偏左金 + 右暖，
   单光源会让平面像贴纸，两束方向不一的光才托得住整页。 */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 460px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 100% at 16% 0%, var(--wash), transparent 72%),
    radial-gradient(52% 90% at 92% 12%, var(--wash-2), transparent 70%),
    linear-gradient(180deg, rgba(198, 154, 61, 0.05), transparent 60%);
}

/* 纸感颗粒：内联 SVG 噪声，不引外部资源 */
.grain {
  position: absolute;
  top: 0; left: 0; right: 0; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: .45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
  /* ⚠ 左右内边距只能写成长手（padding-left/right），不能用简写。
     <main> 上同时挂着 .wrap 和 .main 两个类，而 .main 的
     `padding: 30px 0 56px` 是个简写 —— 简写会把四个方向**全部**重置，
     于是 .wrap 的左右留白被清成了 0（2026-09-29 量出来：桌面端内容区
     左右贴边、手机端上下贴边）。两边各退一步，写各自管得着的方向。 */
  padding-left: 24px;
  padding-right: 24px;
}

.main { padding-top: 30px; padding-bottom: 56px; }

/* ---------- 站头（品牌区 hero：v1.0 背景图 + 日轮装饰移植，2026-09-29） ---------- */

.site-head {
  position: relative;
  z-index: 1;                    /* 自建堆叠上下文，压过 body::before 光晕 */
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 245, 232, .82);   /* 图没加载出来时的米色兜底 */
}

/* 背景图（后台上传，存数据库 BLOB）：absolute 铺满 + cover 裁切，
   高度仍由文字内容决定，任何视口宽度下都不用按断点换图 */
.head-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

/* 双层遮罩（v1.0 同款）：整层薄雾把图压进米色世界，再从左往右渐变，
   文字一侧最重、图最有味道的一侧最轻 */
.head-bg-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(250,245,232,.85), rgba(250,245,232,.55) 50%, rgba(250,245,232,.10)),
    linear-gradient(rgba(250,245,232,.40), rgba(250,245,232,.40));
}

/* 右上角那枚日轮（v1.0 原样，viewBox 200）：无背景图时才出场，
   图在时两幅画叠在一起太吵，它退场 */
.head-sun {
  position: absolute;
  right: 16px;
  top: 0;
  width: 150px;
  height: 150px;
  color: var(--gilt);
  opacity: .30;
  pointer-events: none;
}
@media (min-width: 900px) {
  .head-sun { width: 200px; height: 200px; right: 32px; }
}

.site-head.has-hero .head-inner {
  padding-top: 30px;
  padding-bottom: 30px;          /* 有图时把横幅撑高一点，图才有存在感 */
}

.head-inner {
  position: relative;
  z-index: 2;                    /* 文字永远在背景图 / 日轮之上 */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 20px;
}

.brand { text-decoration: none; color: var(--ink); display: inline-block; }

.brand-main {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* 站名左侧品牌小图标（2026-09-29 起为站长照片，圆形裁剪透明 PNG，与 favicon 同一份） */
.brand-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  /* 照片外缘加一圈亮金细描边，呼应原日轮麦穗的亮金视觉 */
  box-shadow: 0 0 0 1.5px var(--gilt);
  transition: box-shadow .2s ease;
}
.brand:hover .brand-mark { box-shadow: 0 0 0 1.5px var(--accent); }
@media (min-width: 640px) {
  .brand-mark { width: 40px; height: 40px; }
}

.brand-cn {
  position: relative;
  display: inline-block;
  /* 站名单独走 900 的 "YT Brand Serif"。这是把站长本机的观感「转正」：
     本机那份 Source Han Serif SC Heavy 只有 Heavy 一个字面，浏览器把请求的 400
     就近顶成了 900 —— 图 1 那股厚重感其实来自这个意外，现在给它一个明确的名字。
     该字库只装站名 + 符号，站名以后换字时新字会回落 var(--serif)，而不是掉到宋体。 */
  font-family: "YT Brand Serif", var(--serif);
  font-weight: 900;
  font-size: 1.9rem;              /* v1.0 站名：移动端基准字号 */
  line-height: 1.3;
  letter-spacing: -0.025em;       /* tracking-tight */
  color: var(--accent);           /* v1.0「金」主角：站名即全站主色 */
}

/* 站名下方那道手绘感波浪下划线（移植自 v1.0 .underline-swash）
   亮金只画边不写字；preserveAspectRatio=none 让波浪随站名宽窄拉伸对齐 */
.brand-swash {
  position: absolute;
  left: 0;
  bottom: -0.28em;
  width: 100%;
  height: 0.3em;
  overflow: visible;
  color: var(--gilt);
}

@media (min-width: 640px) {
  .brand-cn { font-size: 2.5rem; }   /* v1.0 站名：桌面端放大 */
}
.brand-sub {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-top: 14px;              /* 让位给站名下方的波浪下划线 */
  display: block;
}

/* 后台 · 品牌区背景图预览 */
.hero-prev {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* 后台 · 文章特色图预览（2026-09-29）。限宽 320px：它是 16:9 的辅助判断，
   不该比正文编辑区还抢眼。 */
.cover-prev {
  display: block;
  max-width: 320px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-2);
}

/* 文件选择框：浏览器默认那颗按钮跟本站风格差太远，压成描边胶囊。
   ::file-selector-button 之外的写法（::-webkit-file-upload-button）留给旧内核。 */
input[type="file"] {
  width: 100%;
  padding: 7px 10px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: #fcf8ee;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  margin-right: 10px;
  padding: 4px 13px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--accent);
  color: #fdfbf3;
}

/* 复选框行（如文章页的「移除当前特色图」）。
   选择器带 .field 前缀才压得住上面的 `.field label { display: block }`。 */
.field label.chk {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 0;
  font-size: 12px;
  color: var(--clay);
  letter-spacing: 0;
  cursor: pointer;
}
.field label.chk input[type="checkbox"] { width: auto; margin: 0; }

/* ---------- 模块导航（单行条，品牌区与内容区之间；2026-09-29 移出 LOGO 区） ---------- */

.site-nav {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 245, 232, .82);
}

.site-nav .wrap {
  display: flex;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}

.tab {
  position: relative;
  padding: 0 0 8px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 2px;
  transition: color .16s ease;
}

.tab:hover { color: var(--gilt); }

.tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 700;
}

/* ---------- 区块 ---------- */

.sec { margin-bottom: 42px; }

.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

/* 字号整体提档（2026-09-29 晚，站长反馈「文章里的字普遍偏小」）。
   这一版只动**文章域**——首页卡片、板块标题、详情页正文；站头（.brand-*）、
   顶部 tab、后台表单一律不碰，免得整站节奏被带乱。
   提法统一是「+1~1.5px 或约 8%」，不做倍数缩放：这套字号是照 760px 窄栏配的，
   按比例放大会让卡片区先撑破。 */
.sec-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 2px;
}

.sec-note { font-size: 12px; color: var(--muted); letter-spacing: 1px; }

.group-title {
  margin: 26px 0 14px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
}

/* ---------- 博客摘要 ---------- */

.posts { display: flex; flex-direction: column; gap: 12px; }

.post {
  display: flex;               /* 桌面 / 平板：左图右文（2026-09-29 二次定稿） */
  gap: 16px;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
  transition: transform .28s cubic-bezier(.22,.61,.36,1),
              border-color .28s ease, box-shadow .28s ease;
}
.post:hover {
  transform: translateY(-3px);
  border-color: var(--gilt);
  box-shadow: 0 14px 30px -18px rgba(60, 40, 12, .5);
}

/* 卡片特色图。**两套排法**（2026-09-29 定稿），这里写的是桌面那一套：
   · 桌面 / 平板 → 左图右文：图固定 220px，flex:0 0 auto 让它不被标题长短挤扁，
     自己的圆角由容器 overflow 裁掉。
   · 手机（≤620px，见文件末尾的媒体查询）→ 图挪到文字上方、横向**顶部通栏**：
     那边会覆盖 width / 圆角 / 卡片内边距，靠「图 width:100% + 卡片 padding:0 +
     卡片 overflow:hidden」三件套凑出来。
   两套共用同一个 16:9 形状：容器定比例 + 图 object-fit:cover，
   所以 800×450 的缩略图、竖图、超宽全景图在这里都占同一个形。
   背景色给「图还没加载出来」兜底——容器不会塌成 0 高，滚动不跳版（防 CLS）。 */
.post-cover {
  flex: 0 0 auto;
  width: 220px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper-2);
}
.post-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 卡片文字块。min-width:0 不能少：flex 子项默认 min-width:auto，
   一个超长英文单词或者 URL 就能把卡片顶出容器。 */
.post-body { flex: 1 1 auto; min-width: 0; }

/* 卡片文字块。日期 11→12.5、标题 19→21、摘要 13→14.5、标签 10→11。
   字距、行高一律不动 —— 这次只提字号，版式参数原样保留，改回去随时只改数字。 */
.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.post-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 21px;
  /* 700（2026-09-29 晚从 500 升上来）：YT Serif 只有一个字面就是 700，请求 700
     精确命中，无形状走样；之前 500 不如站名 900 醒目，提档字号也救不回来。 */
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .5px;
  color: var(--ink);
}

.post-sum {
  margin: 6px 0 0;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.8;
}

.tag {
  display: inline-block;
  padding: 0 7px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 1px;
}

/* 卡片整块可点（2026-09-29）：<article> 换成 <a>，所以要把链接的默认样式清掉，
   让标题继承正文色、下划线不出现，鼠标上去靠原有的卡片浮起 + 标题转金棕表达可点。
   display 交给上面的 .post（flex），这里不再覆盖。 */
a.post { text-decoration: none; color: inherit; }
a.post:focus-visible { outline: 2px solid var(--gilt); outline-offset: 2px; }

.post-title { transition: color .2s ease; }
a.post:hover .post-title { color: var(--accent); }

.post-more {
  display: inline-block;
  margin-top: 9px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--gilt);          /* 亮金只画边不写字……这里破例一次：它本身就是装饰性引导 */
  transition: color .2s ease, transform .2s ease;
}
a.post:hover .post-more { color: var(--accent); }

/* ---------- 文章详情 ---------- */

.crumb { margin: 0 0 16px; font-size: 13px; letter-spacing: 1px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); }

.article-head {
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

/* 详情页标题 22→25px。它是全站最大的字，卡片标题 21px 跟上后，
   这里不提就会「点进来标题反而变小」，层级直接倒挂。 */
.article-title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1px;
  color: var(--ink);
}

.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 1px;
}
.article-meta .meta-sep { opacity: .55; }

/* 详情页通栏特色图（2026-09-29 起有真图了）。
   容器定死 16:9、图 object-fit:cover：桌面 820px 正文宽、手机减去左右留白，
   图都会铺满同一条框、永不变形，也不会因为原图是竖构图把标题挤到屏幕外。
   背景色兜底「图还没到」的那一瞬。 */
.article-cover {
  margin: 0 0 24px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-2);
}
.article-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 正文排版：行高比列表宽（长文要能喘气），字号比全站基准大一号。
   2026-09-29 晚 15→16.5px：这是本次提档里最要紧的一处，正文才是真正在读的东西。
   行高倍数（1.95）不动，所以放大后是等比「松开」，段落节奏和原来一致，
   不会因为字大了反而挤。引用块 / 列表 / 段落间距都继承，不用逐个改。 */
.article-body { font-size: 16.5px; line-height: 1.95; letter-spacing: .2px; color: var(--ink); }
.article-body p { margin: 0 0 18px; }

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 1px;
  margin: 32px 0 12px;
}
/* 正文内标题同步 +2：h4 特意压到 17（只比正文大 0.5）——它是「小标题」不是「标题」，
   按 16.5 的正文再撑大就抢了 h3 的位置。 */
.article-body h1 { font-size: 22px; }
.article-body h2 { font-size: 20px; }
.article-body h3 { font-size: 18px; }
.article-body h4 { font-size: 17px; }

.article-body a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--gilt);
}
.article-body a:hover { color: var(--clay); border-bottom-color: var(--clay); }

.article-body ul,
.article-body ol { margin: 0 0 18px; padding-left: 22px; }
.article-body li { margin-bottom: 6px; }

.article-body blockquote {
  margin: 0 0 18px;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--gilt);
  color: var(--muted);
}

/* 行内码与代码块 12.5→13.5px。等宽字体在同字号下本来就比中文看着小一号，
   正文提到 16.5 之后如果不动它，代码块会像脚注。 */
.article-body code {
  font-family: var(--mono);
  font-size: 13.5px;
  background: #ede0c6;
  padding: 1px 5px;
  border-radius: 4px;
}
.article-body pre {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: #ede0c6;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.75;
}
.article-body pre code { background: none; padding: 0; }

.article-body img { max-width: 100%; height: auto; border-radius: 8px; }
.article-body hr { border: none; border-top: 1px solid var(--line); margin: 28px 0; }

/* 详情页底部：更早/更新一篇。左右各一，缺一侧时留空位保持对称 */
.pn {
  display: flex;
  gap: 12px;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.pn-item {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .28s cubic-bezier(.22,.61,.36,1),
              border-color .28s ease, box-shadow .28s ease;
}
.pn-item:hover {
  transform: translateY(-3px);
  border-color: var(--gilt);
  box-shadow: 0 14px 30px -18px rgba(60, 40, 12, .5);
}
.pn-void { flex: 1 1 0; min-width: 0; }

.pn-kind { display: block; font-size: 12px; color: var(--muted); letter-spacing: 1px; margin-bottom: 4px; }
.pn-title { display: block; font-family: var(--serif); font-size: 14.5px; line-height: 1.55; letter-spacing: .5px; }
.pn-item.pn-next { text-align: right; }

/* ---------- 文章分页条（2026-09-29 第四版：照站长的参考图改成方块页码） ----------
   形态照搬参考图：方形页码格 + 断档省略号 + 首尾 « » 箭头，整条居中；
   但**配色不走参考图里的红色**，仍按本站金色系——当前页金棕实底、其余纸底加描边。
   ⚠ 这和详情页的 .pn（「更早/更新一篇」）是**两套东西**，不要合并：
   .pn 是篇章之间的前后跳，.pager 是翻第几页。 */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.pager-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.pager-item:hover { border-color: var(--gilt); color: var(--accent); }

/* 当前页：金棕实底反白（--bg 是暖米底，压在 #8b6a1e 上对比度足够） */
.pager-item.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 700;
}

/* 首尾箭头格子：只放一个符号，字号给大一点才压得住整排方块 */
.pager-step { font-size: 16px; letter-spacing: 0; }

/* 断档省略号：不画边框，只占一格窄位 */
.pager-gap {
  min-width: 18px;
  padding: 0 2px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

@media (max-width: 620px) {
  /* 手机断点同步提档：桌面 25 / 16.5px，手机上 21 / 15.5px。
     这里不能直接沿用桌面值 —— 375px 宽的屏上 25px 标题一行只剩十来个字。 */
  .article-title { font-size: 21px; }
  .article-body { font-size: 15.5px; line-height: 1.9; }
  .pn { flex-direction: column; }
  .pn-item.pn-next { text-align: left; }
  .pn-void { display: none; }
  /* 分页条：窄屏把格子收小、间距收紧；页数多时靠 flex-wrap 自动换行，不会撑破 */
  .pager { gap: 6px; margin-top: 26px; padding-top: 18px; }
  .pager-item { min-width: 34px; height: 34px; font-size: 13px; }
  .pager-step { font-size: 15px; }

  /* 卡片：**手机端才改成「上图下文 + 顶部通栏」**（PC / 平板仍是左图右文，见上面的 base）。
     通栏靠三件套凑：图 width:100%（下面）+ 卡片 padding:0 + 卡片 overflow:hidden，
     内边距因此挪进 .post-body。图自带的 6px 圆角一定要清掉 ——
     不清就会和卡片圆角叠成双层，通栏的上两角看着发毛。
     标题同步收到 18px：桌面那档 21px 加粗在 375px 屏上只剩十来个字一行。 */
  .post { display: block; padding: 0; overflow: hidden; }
  .post-cover { width: 100%; border-radius: 0; }
  .post-body { padding: 13px 14px 15px; }
  .post-title { font-size: 18px; }
}

/* ---------- 表格 ---------- */

.table-wrap { overflow-x: auto; }

table.grid {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}

table.grid th,
table.grid td {
  padding: 9px 11px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: top;
}

table.grid thead th {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  background: var(--paper-2);
}

table.grid tbody tr:last-child td { border-bottom: none; }
table.grid tbody tr:hover { background: var(--paper); }

.col-note {
  white-space: normal;
  min-width: 150px;
  color: var(--muted);
  font-size: 12px;
}

/* ---------- 心情圆点 ---------- */

.mood { display: inline-flex; gap: 4px; align-items: center; height: 12px; }
.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #e3d8c2;
  display: inline-block;
}
.dot.on { background: var(--accent); }

/* ---------- 折线图 ---------- */

.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .area { fill: rgba(139, 106, 30, .12); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }
.chart .dot-end { fill: var(--gilt); }
.chart .axis { fill: var(--muted); font-size: 10px; font-family: var(--sans); }

/* ---------- 指标卡 ---------- */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.metric {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .28s cubic-bezier(.22,.61,.36,1),
              border-color .28s ease, box-shadow .28s ease;
}
.metric:hover {
  transform: translateY(-3px);
  border-color: var(--gilt);
  box-shadow: 0 14px 30px -18px rgba(60, 40, 12, .5);
}

.metric-label { font-size: 11px; color: var(--muted); letter-spacing: 1px; }

.metric-num {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
  letter-spacing: 1px;
}

.metric-num i { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 3px; }

/* ---------- 书架 ---------- */

.books { display: flex; flex-direction: column; gap: 16px; }

.book {
  display: flex;
  gap: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  transition: transform .28s cubic-bezier(.22,.61,.36,1),
              border-color .28s ease, box-shadow .28s ease;
}
.book:hover {
  transform: translateY(-3px);
  border-color: var(--gilt);
  box-shadow: 0 14px 30px -18px rgba(60, 40, 12, .5);
}

.book-cover {
  flex: 0 0 56px;
  height: 78px;
  border-radius: 6px;
  overflow: hidden;
  background: #e9dcc0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cover-ph {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--clay);
}

.book-body { flex: 1 1 auto; min-width: 0; }
.book-title {
  margin: 0 0 5px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
}
.book-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
}
.book-sum {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.75;
  /* 列表里每本只留两行摘要：书一多，摘要全展开会把这页撑成一条长龙 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.progress {
  height: 3px;
  background: #e9dcc0;
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 4px;
}
.progress span { display: block; height: 100%; background: var(--accent); }

/* ---------- 读书页 · 正在读（2026-09-29 新增） ----------
   这一块一次只挂一本，所以给足篇幅：左封面（比列表卡片大一圈）右信息。 */

.now {
  display: flex;
  gap: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 22px;
}
.now-cover {
  flex: 0 0 132px;
  height: 184px;
  border-radius: 6px;
  overflow: hidden;
  background: #e9dcc0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.now-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.now-cover .cover-ph { font-size: 40px; }
.now-body { flex: 1 1 auto; min-width: 0; }
.now-title {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .5px;
}
.now-meta { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); letter-spacing: 1px; }
.now-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.now-badges > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted);
}
.badge-dr { color: var(--accent); }
.now-prog { margin: 0 0 12px; }
.now-prog .progress { margin: 0; height: 4px; }
.now-prog-t { margin: 6px 0 0; font-size: 12px; color: var(--muted); letter-spacing: 1px; }
.now-sum {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink);
  /* 摘要超过四行就裁掉，别让一块把整页顶下去 */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 读书页 · 书架汇总（2026-09-29 新增） ---------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 0 6px;
}
.stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}
.stat-n {
  display: block;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent);
}
.stat-l { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); letter-spacing: 1px; }

/* 分组标题右边那个本数小圆牌 */
.group-title .group-n {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--muted);
  vertical-align: middle;
}

@media (max-width: 620px) {
  .now { flex-direction: column; gap: 14px; padding: 16px; }
  .now-cover { flex: 0 0 auto; width: 108px; height: 150px; }
  .now-title { font-size: 18px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}

.notes { list-style: none; margin: 12px 0 0; padding: 0; }
.note {
  padding: 9px 0 9px 12px;
  border-left: 2px solid var(--line);
  margin-bottom: 8px;
}
.note-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-bottom: 3px;
}
.kind { color: var(--accent); border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; }
.note-loc { color: var(--clay); }
.note-body { font-size: 13px; color: var(--ink); line-height: 1.75; white-space: pre-wrap; }

/* ---------- 健康页（/health 的两块显示内容，2026-09-29） ---------- */

/* 每日提醒：一行一条，前面一个小金点。用 <ul> 是为了屏幕阅读器能念出「列表，N 项」，
   视觉上把默认的圆点和小缩进都去掉了。 */
.rem-list { list-style: none; margin: 0; padding: 0; }
.rem-item {
  display: flex;
  gap: 11px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.rem-item:last-child { border-bottom: none; }
.rem-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--gilt);
}
.rem-text { min-width: 0; }
.rem-main { display: block; font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.rem-note { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }

/* 健康小常识：一张卡片，左边一条金线（和读书笔记的 .note 同一套语言） */
.tip {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gilt);
  border-radius: 8px;
  padding: 18px 20px;
}
.tip-title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .5px;
  color: var(--ink);
}
.tip-body {
  font-size: 15.5px;
  line-height: 1.95;
  letter-spacing: .2px;
  color: var(--ink);
  /* 正文里的换行原样保留：后台填的是纯文本，不是 Markdown */
  white-space: pre-wrap;
}
.tip-source { margin: 13px 0 0; font-size: 12.5px; color: var(--muted); letter-spacing: .5px; }
.tip-source a { color: var(--accent); text-decoration: none; }
.tip-source a:hover { color: var(--clay); text-decoration: underline; }

/* ---------- 空态 / 按钮 / 404 ---------- */

.empty { color: var(--muted); font-size: 13px; margin: 0; }
.empty.small { font-size: 12px; margin-top: 10px; }

.btn {
  display: inline-block;
  padding: 7px 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 2px;
}
.btn:hover { background: var(--accent); color: var(--bg); }

.notfound { text-align: center; padding: 40px 0; }
.notfound h1 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  margin: 0 0 10px;
}
.notfound p { color: var(--muted); margin: 0 0 22px; }

/* ---------- 页脚 ---------- */

.site-foot {
  border-top: 1px solid var(--line);
  padding: 20px 0;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 2px;
}

/* ===========================================================
   后台
   =========================================================== */

.admin {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  max-width: 1040px;
}

.admin-head { margin-bottom: 8px; }
.admin-head h1 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 0;
}
/* 后台两栏左栏菜单（2026-09-29 引入）。旧横向 .admin-sub 已废弃，
   菜单改为左栏 .admin-nav，分组与高亮逻辑见 _guard.php 的 $groups。 */
.admin-nav {
  flex: 0 0 200px;
  position: sticky;
  top: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 14px 16px;
}
.admin-nav-brand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.admin-nav-site {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--ink);
}
.admin-nav-front { font-size: 11px; color: var(--muted); text-decoration: none; }
.admin-nav-front:hover { color: var(--accent); }
.admin-nav-group { margin-bottom: 14px; }
.admin-nav-group:last-child { margin-bottom: 0; }
.admin-nav-group-title {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted);
  margin: 0 4px 6px;
}
.admin-nav-link {
  display: block;
  padding: 7px 10px;
  margin-bottom: 2px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid transparent;
}
.admin-nav-link:hover { background: #ede0c6; color: var(--clay); }
.admin-nav-link.is-active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.admin-nav-link--exit { color: #a32d2d; }
.admin-nav-link--exit:hover { background: #fcebeb; color: #a32d2d; }
.admin-main { flex: 1 1 auto; min-width: 0; }

@media (max-width: 620px) {
  .admin { flex-direction: column; gap: 16px; }
  .admin-nav { flex: none; width: 100%; position: static; top: auto; }
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 18px;
}

.card h2 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
}

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; letter-spacing: 1px; }

input[type="text"], input[type="password"], input[type="number"], input[type="date"],
select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fcf8ee;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gilt);
  box-shadow: 0 0 0 3px rgba(198, 154, 61, .16);
}
textarea { min-height: 120px; resize: vertical; }
textarea.mono {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
}

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > .field { flex: 1 1 160px; margin-bottom: 14px; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.btn-solid, .btn-ghost {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 1px;
  text-decoration: none;
  border: 1px solid var(--accent);
}
.btn-solid { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn-ghost { color: var(--accent); }
.btn-solid:hover { background: var(--gilt); border-color: var(--gilt); }
.btn-ghost:hover { background: #ede0c6; }

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.list-row:last-child { border-bottom: none; }
.list-row .lr-main { min-width: 0; }
.list-row .lr-title { font-size: 13px; }
.list-row .lr-meta { font-size: 11px; color: var(--muted); letter-spacing: 1px; }
.list-row .lr-act { display: flex; gap: 8px; flex: 0 0 auto; }
.accent-link { color: var(--accent); text-decoration: none; font-size: 12px; }
.accent-link:hover { color: var(--clay); text-decoration: underline; }
.danger-link { color: #a32d2d; text-decoration: none; font-size: 12px; }
.danger-link:hover { text-decoration: underline; }

.flash {
  padding: 9px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 16px;
  border: 1px solid var(--accent);
  background: #f0e4c9;
  color: var(--clay);
}
.flash.err { border-color: #e24b4a; background: #fcebeb; color: #a32d2d; }
.flash.ok  { border-color: #1d9e75; background: #e1f5ee; color: #0f6e56; }

/* 仪表盘「服务器信息」键值网格（2026-09-29 替换原「要改的东西」模块导航） */
.kv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.kv { display: flex; flex-direction: column; gap: 4px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.kv-k { font-size: 11px; color: var(--muted); letter-spacing: 1px; }
.kv-v { font-size: 13px; color: var(--ink); font-family: var(--mono); word-break: break-all; line-height: 1.5; }
@media (max-width: 620px) { .kv-grid { grid-template-columns: 1fr; } }

/* 字段下的一行小字说明 */
.field .hint { font-size: 11px; color: var(--muted); margin: 5px 0 0; line-height: 1.6; }
.field .hint code {
  font-family: var(--mono);
  background: #ede0c6;
  padding: 0 3px;
  border-radius: 3px;
  font-size: 10.5px;
}

/* 正文渲染预览（后台编辑器内置，一期前台无详情页） */
.preview {
  margin: -4px 0 14px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 8px 12px;
}
.preview summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--gilt);
  letter-spacing: 1px;
  list-style: none;
}
.preview summary::-webkit-details-marker { display: none; }
.preview summary::before { content: "► "; font-size: 9px; }
.preview[open] summary::before { content: "▼ "; }
.preview-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink);
}
.preview-body h1, .preview-body h2 { font-size: 15px; margin: 14px 0 6px; }
.preview-body p { margin: 0 0 10px; }
.preview-body ul, .preview-body ol { margin: 0 0 10px; padding-left: 20px; }
.preview-body blockquote {
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 2px solid var(--accent);
  color: var(--muted);
}
.preview-body pre {
  background: #ede0c6;
  padding: 8px 10px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 12px;
}

/* ---------- 正文里的媒体（前台文章用，2026-09-29 加） ----------
   图片走上面已有的 .article-body img（max-width:100% / height:auto / 圆角）；
   音频视频由 Markdown 的 @[audio] / @[video] 语法渲染成 .md-media 里的原生控件。 */
.md-media { margin: 0 0 18px; }
.md-media video,
.md-media audio {
  display: block;
  width: 100%;
  border-radius: 8px;
  background: #ede0c6;
}
.md-media video { height: auto; max-height: 70vh; }
.md-media figcaption {
  margin-top: 7px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 1px;
}

/* ===========================================================
   媒体库（后台，2026-09-29 加）
   =========================================================== */

.media-toolbar { margin-bottom: 14px; }

/* 筛选条复用分页格子的样式（同一套方块视觉），只把尺寸压小一号 */
.media-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.media-filter .pager-item { min-width: auto; height: 32px; padding: 0 12px; font-size: 12px; }

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
}

.media-cell {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-2);
  overflow: hidden;
}

/* 缩略区固定成正方形：不管原图是横是竖、是图是视频，格子都一样大，
   网格不会参差不齐（object-fit: cover 负责裁切，不拉伸）。 */
.media-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: #eadcc0;
  overflow: hidden;
  text-decoration: none;
}
.media-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-kind {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 2px;
}

.media-info { padding: 8px 10px 10px; font-size: 11px; color: var(--muted); }
.media-name {
  display: block;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 3px;
  /* 带日期与随机后缀的文件名很长，必须能断，否则把格子顶宽 */
  word-break: break-all;
}
.media-meta { display: block; letter-spacing: .5px; }
.media-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 7px; }

/* 每格那个「删」是行内表单。form 默认块级，不压成 inline 会把 flex 行撑开 */
.inline-form { display: inline; }
.as-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* 「长得像链接」的行内按钮：删除 / 停用这类写操作要走 POST 表单 + CSRF，
   但一行里堆四个按钮太吵，所以视觉上压成链接 */
.mini-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
}
.mini-link:hover { color: var(--clay); text-decoration: underline; }
.mini-link.danger { color: #a32d2d; }

/* ---------- 后台 · 书架搜索（2026-09-29 新增） ----------
   输入书名 → 豆瓣候选版本一排排开，点一个把字段填进下面的表单。
   候选卡是自适应网格：手机一行一个、宽屏一行三四个。 */

.search-row { display: flex; gap: 10px; margin: 0 0 14px; }
.search-row input[type="text"] { flex: 1 1 auto; min-width: 0; }
.search-row .btn-solid { flex: 0 0 auto; }

.cand-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.cand {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fcf8ee;
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.cand:hover { border-color: var(--gilt); transform: translateY(-2px); }

.cand-pic {
  flex: 0 0 40px;
  height: 56px;
  border-radius: 4px;
  overflow: hidden;
  background: #e9dcc0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cand-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cand-ph { font-family: var(--serif); font-size: 18px; color: var(--clay); }

.cand-body { flex: 1 1 auto; min-width: 0; }
.cand-title {
  display: block;
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--ink);
}
.cand-meta { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); letter-spacing: .5px; }

/* 封面预览图紧跟在输入框下面（.cover-prev 本来的定义是给 post.php 用的） */
.field .cover-prev { margin-top: 8px; }

/* 后台分区 tab（健康页的 记录 / 提醒 / 小常识）。复用前台 .tabs/.tab 的外观，
   只把字缩小一档、底下补一条分隔线撑住视觉 */
.admin-tabs { margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.admin-tabs .tab { font-size: 13px; letter-spacing: 1px; }

/* 停用的条目（提醒 / 小常识）：整行压暗，一眼看出「这条前台不显示」。
   ⚠ 别用 display:none —— 站长得看得见它才能把它启回来。 */
.list-row.is-off { opacity: .5; }
.badge-off {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
  vertical-align: 1px;
}
.rem-no {
  display: inline-block;
  min-width: 15px;
  margin-right: 4px;
  color: var(--muted);
  font-size: 11px;
}

/* 编辑卡里的大图 / 播放器 */
.media-big {
  display: block;
  max-width: 100%;
  max-height: 420px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-2);
}
.media-audio { display: block; width: 100%; }

/* 后台媒体选择器（文章页的「从媒体库选 / 插入」） */
.picker {
  margin: 12px 0 6px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 8px 12px;
}
.picker summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--gilt);
  letter-spacing: 1px;
  list-style: none;
}
.picker summary::-webkit-details-marker { display: none; }
.picker summary::before { content: "► "; font-size: 9px; }
.picker[open] summary::before { content: "▼ "; }

.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 6px;
  margin: 10px 0 6px;
}
.picker-cell {
  padding: 0;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fcf8ee;
  overflow: hidden;
  cursor: pointer;
}
.picker-cell img { display: block; width: 100%; height: 100%; object-fit: cover; }
.picker-cell.is-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.picker-kind {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
}

@media (max-width: 620px) {
  .media-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
  .picker-grid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }
}

.login-card { max-width: 340px; margin: 28px auto 60px; }

/* ---------- 页脚登录 ---------- */

.site-foot .foot-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
}
/* 左下角：版权 + 备案 */
.foot-left { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* 右下角：网址 + 登录入口 */
.foot-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
/* 窄屏：两栏各占一行，居中排布 */
@media (max-width: 560px) {
  .site-foot .foot-inner { justify-content: center; text-align: center; }
  .foot-right { justify-content: center; }
}

.site-foot .foot-sep { opacity: .55; }

.foot-login {
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 2px;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

.foot-url {
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 1px;
  font-family: var(--mono);
  font-size: 10.5px;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  word-break: break-all;
}
.foot-url:hover { border-bottom-color: var(--gilt); }

.foot-login:hover { border-bottom-color: var(--accent); }

/* ---------- 登录弹层 ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* hidden 属性必须压过上面的 display:flex，否则弹层常驻 */
.modal[hidden] { display: none; }

.modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(42, 33, 24, .42);
  cursor: default;
}

.modal-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 22px 18px;
  box-shadow: 0 18px 44px rgba(42, 33, 24, .18);
}

.modal-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 0 0 6px;
}

.modal-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0 0 16px;
}

.modal-box .btn-row { justify-content: flex-end; margin-top: 16px; }

body.modal-open { overflow: hidden; }

@media (max-width: 620px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .head-inner { padding-top: 16px; }
  .tabs { gap: 18px; }
  .tab { font-size: 13px; letter-spacing: 1px; }
  .book { flex-direction: column; gap: 12px; }
  .book-cover { flex: 0 0 auto; height: 60px; width: 44px; }
}

/* ===========================================================
   日历（/calendar）与投资（/invest）
   2026-09-29 从 v1.0 复刻。两段都只用既有令牌（--accent 金棕 /
   --gilt 亮金 / --clay 陶土 / --up 涨红 / --down 跌绿）。
   ⚠ 日历里「忌 / 凶」用朱砂红 #b4232a，这是 v1.0 第 20 期定死的：
     忌与凶要和宜拉开明显差距，主题色系里没有现成的红，
     所以这个色值单独写。别顺手换成 --up（那是"行情涨"的语义，两回事）。
   =========================================================== */

/* ---------- 日历 · 翻日条（零 JS：链接 + 表单） ---------- */

.cal-step {
  font-family: var(--serif);
  font-size: .8rem;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  padding: 6px 12px;
}
.cal-step:hover { border-color: var(--gilt); color: var(--accent); }
.cal-step.is-off { opacity: .4; }

.cal-back {
  margin-left: auto;
  font-family: var(--serif);
  font-size: .8rem;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid rgba(139, 106, 30, .4);
  border-radius: 4px;
  background: rgba(139, 106, 30, .05);
  padding: 6px 12px;
}
.cal-back:hover { background: rgba(139, 106, 30, .12); }

/* ---------- 日历 · 月历选择器（零 JS：每天都是直达链接） ---------- */
.cal-picker {
  margin-top: 20px;
  padding: 16px 16px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(239, 228, 203, .6);
}
.cal-picker-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.cal-picker-title {
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--serif);
  font-size: .92rem;
  color: var(--accent);
  letter-spacing: 2px;
}
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}
.cal-weekdays span {
  text-align: center;
  font-size: .68rem;
  color: var(--muted);
  letter-spacing: 1px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-cell {
  aspect-ratio: 1 / 1;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: var(--serif);
  font-size: .86rem;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 6px;
  background: rgba(255, 255, 255, .35);
  transition: border-color .15s, background .15s;
}
.cal-cell:hover {
  border-color: var(--gilt);
  background: rgba(255, 255, 255, .6);
}
.cal-cell.is-empty {
  background: transparent;
  pointer-events: none;
}
.cal-cell.is-today {
  color: var(--accent);
  font-weight: 700;
}
.cal-cell.is-selected {
  background: var(--gilt);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}
.cal-cell.is-out { opacity: .4; }
.cal-dot {
  position: absolute;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.cal-cell.is-selected .cal-dot { background: #fff; }
.cal-picker-hint {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: .72rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- 日历 · 黄历大卡 ---------- */

.cal-card {
  margin-top: 20px;
  padding: 20px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(239, 228, 203, .6);
}

.cal-eyebrow {
  margin: 0;
  font-size: .68rem;
  letter-spacing: 3px;
  color: var(--muted);
}

.cal-date {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.3;
}

.cal-today-tag {
  margin-left: 8px;
  vertical-align: middle;
  font-size: .72rem;
  letter-spacing: 3px;
  color: var(--accent);
}

.cal-summary { margin: 16px 0 0; font-family: var(--serif); font-size: .86rem; color: var(--muted); }

.cal-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }

.cal-tag {
  font-family: var(--serif);
  font-size: .76rem;
  border-radius: 4px;
  padding: 2px 8px;
  border: 1px solid var(--line);
}
.cal-tag.jieqi    { border-color: rgba(198, 154, 61, .5); background: rgba(198, 154, 61, .1); color: var(--accent); }
.cal-tag.festival { border-color: rgba(176, 96, 46, .4);  background: rgba(176, 96, 46, .1);  color: var(--clay); }

/* 干支三柱：三行式（年 / 月 / 日 各一行） */
.cal-pillars {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(250, 245, 232, .6);
  overflow: hidden;
}
.cal-pillar {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr 1fr;
  align-items: baseline;
  column-gap: 16px;
  padding: 10px 16px;
}
.cal-pillar + .cal-pillar { border-top: 1px solid var(--line); }
.cal-pillar-gz {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #b4232a;
}
.cal-pillar-sx { font-family: var(--serif); font-size: .86rem; }
.cal-pillar-ny { font-family: var(--serif); font-size: .86rem; color: var(--muted); }

/* 宜忌 */
.cal-yiji { display: grid; gap: 20px; margin-top: 24px; }

.cal-yiji-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--serif);
  font-size: .95rem;
  font-weight: 700;
  color: var(--accent);
}
.cal-yiji-h::before {
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--gilt);
}
.cal-yiji-h.ji { color: #b4232a; }
.cal-yiji-h.ji::before { background: #b4232a; }

.cal-tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.cal-tag-list .cal-tag.yi { border-color: rgba(139, 106, 30, .25); background: rgba(139, 106, 30, .05); }
.cal-tag-list .cal-tag.ji { border-color: rgba(180, 35, 42, .3); background: rgba(180, 35, 42, .05); color: #b4232a; }

/* 次要信息：冲煞三神星宿值神天神吉神凶煞彭祖百忌 */
.cal-extra {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
  row-gap: 12px;
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: .8rem;
}
.cal-x { display: flex; gap: 8px; }
.cal-x.wide { grid-column: 1 / -1; }
.cal-x dt { flex: 0 0 auto; color: var(--muted); }
.cal-x dd { margin: 0; }

.cal-luck {
  margin-left: 4px;
  font-family: var(--serif);
  font-size: .72rem;
  border-radius: 4px;
  border: 1px solid var(--line);
  padding: 0 4px;
}
.cal-luck.good { color: var(--accent); border-color: rgba(139, 106, 30, .4); background: rgba(139, 106, 30, .1); }
.cal-luck.bad  { color: #b4232a;      border-color: rgba(180, 35, 42, .4);  background: rgba(180, 35, 42, .1); }
.cal-luck.mid  { color: var(--muted); }
.cal-luck.right { margin-left: auto; }

.cal-hint { margin: 8px 0 0; font-family: var(--serif); font-size: .78rem; color: var(--muted); }

/* ---------- 日历 · 十二时辰 ---------- */

.cal-hours { display: grid; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }

.cal-hour {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 12px;
}

/* 当前时辰：普通格 1px 灰线，这格 2px 金线 + 一圈柔光。
   只换底色在扫读时容易漏，这是 v1.0 第 20 期专门加码的地方。 */
.cal-hour.is-now {
  border: 2px solid var(--gilt);
  background: rgba(198, 154, 61, .1);
  box-shadow: 0 0 0 3px rgba(198, 154, 61, .25);
}

.cal-hour-head { display: flex; align-items: baseline; gap: 8px; }
.cal-hour-zhi { font-family: var(--serif); font-size: .9rem; }
.cal-hour.is-now .cal-hour-zhi { color: var(--accent); font-weight: 700; }
.cal-hour-span { font-family: var(--mono); font-size: .7rem; color: var(--muted); }

/* 「此刻」徽：实心底、反白字，是这张卡里唯一一个实心元素 */
.cal-now-badge {
  font-family: var(--serif);
  font-size: .7rem;
  letter-spacing: 2px;
  color: #faf5e8;
  background: var(--accent);
  border-radius: 4px;
  padding: 2px 6px;
}

.cal-hour-sub { margin: 8px 0 0; font-family: var(--serif); font-size: .78rem; color: var(--muted); }
.cal-hour-yi  { margin: 8px 0 0; font-family: var(--serif); font-size: .74rem; color: var(--muted); }
.cal-hour-ji  { margin: 4px 0 0; font-family: var(--serif); font-size: .74rem; color: #b4232a; }

/* ---------- 投资 · 头部卡 ---------- */

.iv-head {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(239, 228, 203, .6);
}

.iv-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.iv-title { margin: 0; font-family: var(--serif); font-size: 1.6rem; font-weight: 700; letter-spacing: 1px; }
.iv-status { margin: 6px 0 0; font-size: .8rem; color: var(--muted); }

.iv-summary {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: .85rem;
  color: var(--muted);
}
.iv-summary b { font-family: var(--mono); font-size: 1.05rem; font-weight: 600; }
.iv-dim { color: var(--muted); }
.iv-clock { margin: 8px 0 0; font-family: var(--mono); font-size: .7rem; color: var(--muted); }

/* ---------- 投资 · 工具条与排序 ---------- */

.iv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  padding: 0 4px;
}
.iv-unit { margin: 0; font-family: var(--mono); font-size: .7rem; color: var(--muted); }
.iv-sort { display: flex; align-items: center; gap: 4px; margin: 0; font-size: .72rem; color: var(--muted); }

.iv-sort-btn { color: var(--muted); text-decoration: none; border-radius: 4px; padding: 2px 8px; }
.iv-sort-btn:hover { color: var(--accent); }
.iv-sort-btn.is-on { background: var(--paper-2); color: var(--accent); }

/* ---------- 投资 · 股票卡 ---------- */

.iv-list { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }

.iv-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  padding: 16px;
  transition: border-color .15s;
}
.iv-card:hover { border-color: rgba(198, 154, 61, .6); }

.iv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.iv-id { min-width: 0; }
.iv-name {
  margin: 0;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.iv-code { margin: 4px 0 0; font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.iv-miss { color: var(--clay); }

.iv-quote { flex: 0 0 auto; text-align: right; }

/* 最新价是这一页的主角：字号最大，且跟着涨跌走涨红跌绿 */
.iv-price {
  margin: 0;
  font-family: var(--mono);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.iv-pct { margin: 4px 0 0; font-family: var(--mono); font-size: .78rem; }

/* 涨红跌绿：全站唯一一对带数据语义的颜色（令牌注释里就写着"仅数据表使用"） */
.up   { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--muted); }

.iv-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 16px;
  row-gap: 8px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.iv-metrics dt { font-size: .68rem; color: var(--muted); }
.iv-metrics dd { margin: 2px 0 0; font-family: var(--mono); font-size: .82rem; }

.iv-note { margin: 12px 0 0; font-family: var(--serif); font-size: .76rem; color: var(--muted); }

.iv-source {
  margin-top: 20px;
  padding: 0 4px;
  font-family: var(--mono);
  font-size: .68rem;
  line-height: 1.8;
  color: var(--muted);
}

/* ---------- 窄屏收束 ---------- */
@media (max-width: 620px) {
  .cal-card { padding: 16px; }
  .cal-date { font-size: 1.45rem; }
  .cal-pillar { grid-template-columns: minmax(84px, auto) 1fr 1fr; column-gap: 10px; padding: 9px 12px; }
  .cal-extra { grid-template-columns: 1fr; }
  .cal-back { margin-left: 0; }

  .iv-head { padding: 16px; }
  .iv-title { font-size: 1.35rem; }
}

/* ---------- 宽屏：宜忌并排、时辰两列、股票卡两列 ---------- */
@media (min-width: 621px) {
  .cal-yiji { grid-template-columns: 1fr 1fr; }
  .cal-hours { grid-template-columns: 1fr 1fr; }
  .cal-extra { grid-template-columns: repeat(3, 1fr); }
  .iv-list { grid-template-columns: 1fr 1fr; }
}

/* ---------- 后台 · 投资名单行 ---------- */

.iv-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 2px;
  border-top: 1px solid var(--line);
}
.iv-row:first-of-type { border-top: 0; }

.iv-row-main { flex: 1 1 200px; min-width: 0; }
.iv-row-title { margin: 0; font-family: var(--serif); font-size: .95rem; }
.iv-row-meta { margin: 3px 0 0; font-family: var(--mono); font-size: .7rem; color: var(--muted); }

.iv-row-quote { flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px; }
.iv-row-price { font-family: var(--mono); font-size: 1rem; font-weight: 600; }
.iv-row-pct { font-family: var(--mono); font-size: .74rem; }

.iv-row-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }