/* 墨序润笔 —— 视觉方向：浅米纸底 × 朱砂印 × 极简功能版
 *
 * ══════════════════════════════════════════════════════════════════════
 * 2026-08-25 换底：深墨底 → 浅米底。**这一次不是调色，是换了组织规则。**
 * ══════════════════════════════════════════════════════════════════════
 *
 * 旧规则是「正文永远在浅色稿纸上，其余一切在墨色里」——深墨的壳子配宣纸色的
 * 稿面，"哪一块是我的稿子"不需要标签来说明。**底色一改成浅米，那条规则当场
 * 失效**：壳子和稿纸都是浅的，稿子就淹在页面里了。
 *
 * 所以换了一条等价的规则，写在这里，改配色的人必须先读它：
 *
 *     三层亮度，越亮越是"你的东西"。
 *       --纸  #f2ece1  页面底 = 桌面。最暗。
 *       --面  #faf6ee  面板（说明、账目、档位、报价）= 桌上的卡片。
 *       --稿  #fffdf8  稿纸（原文与成稿）= 桌上那张白纸。最亮，且只有它有格线。
 *
 * 判据没变：进了这个站，最白的那一块永远是用户的正文。**不要给别的东西用
 * `--稿`**，给了就等于把这条规则关掉，而症状不是"变丑"，是用户在编辑台上要
 * 找一下自己的稿子在哪。
 *
 * `--朱亮` 这个名字随之作废，改叫 `--朱重`：浅底上"强调"意味着更深而不是更亮。
 * 类名里那些 `朱`（`.朱字`、`.条.朱`）指的是那个红，不是旧品牌名——
 * 改类名要连模板一起改，收益是零。
 *
 * ── 「简约功能化」这一轮删掉了什么（都是刻意的，不是漏了）──────────────
 *   · body 的三团径向渐变 + SVG 噪点层：那一层是给大面积纯黑补气氛的，
 *     浅米底本身不显脏，留着只是让文字对比度变差。
 *   · 首页背景里那个巨大的「墨」字（`.大字`）：装饰，且在浅底上必然要么看不见
 *     要么压住正文。
 *   · 按钮的 `4px 4px 0` 硬投影和 hover 位移：那是复古印刷的手法，与"功能化"
 *     相反——按钮该看起来能按，不该看起来会动。
 *   · 编辑台右栏的 `translateY` 错位：错位是用来暗示顺序的，而顺序现在由
 *     「①粘/传 → ②修」两个标号明说了，明说比暗示可靠。
 *
 * △ 是本站的记号：它是剧本动作行的标记（见 引擎/提示词.py 格式门禁第 6 条），
 * 在这里被复用成列表符号和加载指示。用一个用户本来就在正文里天天写的符号做
 * 界面记号，比再造一个图标系统贴。
 *
 * ---- 一处诚实的约束：字体 ----
 * 中文显示字体只能用系统栈，不自托管 webfont。一份可用的中文字体子集也在
 * 5–10 MB 量级，而这站的用户是在等一次几十秒的模型调用——首屏再压上 8 MB
 * 字体不是"更好看"，是更慢。Google Fonts 那条路更不能走：它在国内直接超时，
 * 症状是首屏白屏三秒然后回落系统字体，比一开始就用系统字体差。
 * 所以：标题用宋体系（衬线，撑住"墨"这个调子），正文用黑体系（浅底上小字
 * 更清楚），数字用等宽。靠字号、字距和留白拉开层次，不靠字体文件。
 */

/* ---------------- 变量 ---------------- */
:root {
  --纸: #f2ece1;          /* 页面底：浅米 */
  --面: #faf6ee;          /* 面板 */
  --稿: #fffdf8;          /* 稿纸——只给用户的正文用 */
  --格: rgba(120, 96, 70, .14);   /* 稿纸格线 */

  --墨: #22201d;          /* 正文字 */
  --墨浓: #0f0e0c;        /* 强调字（旧配色里的 #fff 对应到这里） */
  --字弱: #6c645b;
  --字更弱: #968d83;

  --线: #ddd4c4;
  --线重: #c9beaa;

  --朱: #bb3826;          /* 朱砂：印章、主按钮、强调 */
  --朱重: #9a2a19;        /* 浅底上的"更强"= 更深 */
  --朱淡: #f6e6e1;
  --金: #8a6d1c;
  --金淡: #f7efd9;
  --绿: #2e7d43;

  --显示: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC",
          "SimSun", "宋体", serif;
  --正文: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
          "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --码: "JetBrains Mono", "IBM Plex Mono", "Cascadia Mono", "SFMono-Regular",
        Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--纸);
  color: var(--墨);
  font-family: var(--正文);
  font-size: 15px;
  line-height: 1.75;
}

/* ---------------- 排版基元 ---------------- */
a { color: var(--朱重); text-decoration: none; border-bottom: 1px solid rgba(154, 42, 25, .3); }
a:hover { color: var(--朱); border-bottom-color: currentColor; }

h1, h2, h3 { font-family: var(--显示); font-weight: 600; line-height: 1.3; margin: 0; }
h1 { font-size: clamp(26px, 4.2vw, 44px); letter-spacing: .02em; }
h2 { font-size: clamp(19px, 2.2vw, 25px); letter-spacing: .03em; }
h3 { font-size: 17px; letter-spacing: .03em; }

p { margin: 0 0 .9em; }

code, .码 { font-family: var(--码); font-size: .92em; }

.眉 {                       /* 小字标签：等宽 + 大字距 + 弱色 */
  font-family: var(--码);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--字更弱);
  margin: 0 0 .6em;
}
.弱 { color: var(--字弱); }
.更弱 { color: var(--字更弱); font-size: 13px; }
.朱字 { color: var(--朱重); }
.数 { font-family: var(--码); font-variant-numeric: tabular-nums; }

/* ---------------- 印章 ---------------- */
/* 站标：一枚歪着盖下去的朱砂方印。歪 -4° 保留了（正着摆就成了 logo 方块，
 * 歪着才像"盖"上去的），但去掉了那圈发光投影——浅底上它只是一团脏影子。 */
.印 {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  background: var(--朱);
  color: #fff6f2;
  font-family: var(--显示);
  font-size: 19px;
  letter-spacing: 0;
  transform: rotate(-4deg);
  flex: none;
}
.印.小 { width: 26px; height: 26px; font-size: 14px; }

/* ---------------- 页头 / 页脚 ---------------- */
.页头 {
  display: flex; align-items: center; gap: 18px;
  padding: 14px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid var(--线);
  background: var(--面);
  position: sticky; top: 0; z-index: 20;
}
.站名 {
  display: flex; align-items: center; gap: 11px;
  border: 0; color: var(--墨);
}
.站名 b { font-family: var(--显示); font-size: 20px; letter-spacing: .12em; font-weight: 600; }
.站名 span { display: block; }
.站名 .眉 { margin: 0; }
.导航 { margin-left: auto; display: flex; align-items: center; gap: clamp(10px, 2vw, 24px); flex-wrap: wrap; }
.导航 a { color: var(--字弱); border: 0; font-size: 14px; }
.导航 a:hover, .导航 a.在 { color: var(--墨); }
.导航 a.在 { box-shadow: 0 2px 0 var(--朱); }

.余额牌 {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--线重);
  background: var(--纸);
  color: var(--墨);
}
.余额牌 b { font-family: var(--码); font-size: 16px; }
.余额牌 i { font-style: normal; font-size: 11px; letter-spacing: .16em; color: var(--字弱); }

.页脚 {
  margin-top: 56px; padding: 22px clamp(16px, 4vw, 48px) 34px;
  border-top: 1px solid var(--线);
  color: var(--字更弱); font-size: 13px;
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}

/* ---------------- 版心 ---------------- */
.版心 {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 44px) clamp(16px, 4vw, 36px) 0;
}
.版心.窄 { max-width: 620px; }
.版心.中 { max-width: 840px; }

/* ---------------- 卡片 / 面板 ---------------- */
.块 {
  background: var(--面);
  border: 1px solid var(--线);
  padding: clamp(16px, 2.2vw, 24px);
}
.块 + .块 { margin-top: 16px; }
.块 h2, .块 h3 { margin-bottom: 10px; }

/* 稿纸：正文永远在这上面，而且**只有它是这个亮度**（见文件头那三层）。
 * 横线是 repeating-linear-gradient 画的，行高与 textarea 的 line-height
 * 对齐，所以字是坐在线上的。 */
.稿纸 {
  background: var(--稿);
  border: 1px solid var(--线重);
  /* 一层极浅的外发光 + 一道底边：浅底上要靠"边界比周围清楚"来把纸抬起来，
   * 不靠投影。投影在浅米底上是一圈灰，比没有更糟。 */
  box-shadow: 0 1px 0 rgba(120, 96, 70, .10), 0 0 0 4px rgba(255, 253, 248, .55);
}
.稿纸 .纸头 {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 14px;
  border-bottom: 1px solid var(--线);
  font-family: var(--码); font-size: 11.5px; letter-spacing: .1em;
  color: #7a6754; text-transform: uppercase;
}
.稿纸 .纸头 .右 { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

textarea.纸面, pre.纸面 {
  display: block; width: 100%;
  min-height: 340px;
  margin: 0; padding: 14px 18px;
  border: 0; outline: 0; resize: vertical;
  background: transparent;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0, transparent 30px, var(--格) 30px, var(--格) 31px);
  background-position: 0 14px;
  color: #201b16;
  font-family: var(--显示); font-size: 16px; line-height: 31px;
  white-space: pre-wrap; word-break: break-word;
}
pre.纸面 { overflow: auto; max-height: 62vh; }
textarea.纸面::placeholder { color: #a9987f; }

/* 拖文件进来时给稿纸一个明确的"接住了"的样子。**只在拖到稿纸上时亮**，
 * 不做整页高亮：整页高亮会让人以为随便丢哪儿都行，而丢在页脚上没有反应。 */
.稿纸.接 { border-color: var(--朱); box-shadow: 0 0 0 4px var(--朱淡); }

/* ---------------- 按钮 ---------------- */
.钮 {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--朱);
  background: var(--朱); color: #fff6f2;
  font-family: var(--正文); font-size: 15px; letter-spacing: .04em;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.钮:hover { background: var(--朱重); border-color: var(--朱重); }
.钮[disabled], .钮.忙 { opacity: .45; cursor: not-allowed; }
.钮[disabled]:hover, .钮.忙:hover { background: var(--朱); border-color: var(--朱); }
.钮.大 { padding: 13px 28px; font-size: 16px; }
.钮.次 {
  background: transparent; color: var(--墨); border-color: var(--线重);
}
.钮.次:hover { background: var(--面); border-color: var(--墨); color: var(--墨); }
.钮.素 {
  background: transparent; color: var(--字弱); border-color: transparent;
  padding: 7px 10px;
}
.钮.素:hover { color: var(--墨); background: rgba(34, 32, 29, .05); border-color: transparent; }

.钮行 { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------------- 表单 ---------------- */
label.格 { display: block; margin-bottom: 16px; }
label.格 > span { display: block; margin-bottom: 6px; font-size: 13px; color: var(--字弱); }
input.输, select.输 {
  width: 100%; padding: 11px 13px;
  background: #fff;
  border: 1px solid var(--线重);
  color: var(--墨);
  font-family: var(--码); font-size: 16px; letter-spacing: .04em;
}
input.输:focus, select.输:focus { outline: 0; border-color: var(--朱); }
select.输 { font-family: var(--正文); }

.双 { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.双 label.格 { margin-bottom: 0; }

/* 文件上传：`input[type=file]` 的原生样子在每个浏览器上都不一样，所以把它
 * 藏起来、用 label 当按钮。**不做成整块虚线拖拽区**——那一大块在这一页会
 * 抢掉"粘正文"那个更常用的动作。拖拽照样支持（丢到稿纸上），只是不占版面。 */
input.文件 {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0);
}
.传钮 {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; cursor: pointer;
  border: 1px solid var(--线重); background: var(--纸);
  font-family: var(--码); font-size: 11.5px; letter-spacing: .08em;
  color: #6b5a48; text-transform: none;
}
.传钮:hover { border-color: var(--朱); color: var(--朱重); }
input.文件:focus-visible + .传钮 { outline: 2px solid var(--朱); outline-offset: 2px; }

/* ---------------- 提示条 ---------------- */
.条 {
  padding: 11px 14px;
  border-left: 3px solid var(--线重);
  background: var(--面);
  font-size: 14px;
  margin-bottom: 16px;
}
.条.朱 { border-left-color: var(--朱); background: var(--朱淡); }
.条.金 { border-left-color: var(--金); background: var(--金淡); }
.条 b { color: var(--墨浓); }
.条 ul { margin: 6px 0 0; padding-left: 1.1em; }

/* △ 列表：站里所有的项目符号都是动作行标记 */
ul.角 { list-style: none; padding: 0; margin: 0; }
ul.角 li { position: relative; padding-left: 1.5em; margin-bottom: .5em; }
ul.角 li::before {
  content: "△"; position: absolute; left: 0; top: 0;
  color: var(--朱); font-size: .9em;
}

/* ---------------- 徽标 ---------------- */
.签 {
  display: inline-block; padding: 2px 9px;
  font-family: var(--码); font-size: 11px; letter-spacing: .12em;
  border: 1px solid currentColor; color: var(--字弱);
}
.签.成 { color: var(--绿); }
.签.败 { color: var(--朱重); }
.签.跑 { color: var(--金); }

/* ---------------- 表格 ---------------- */
table.账 { width: 100%; border-collapse: collapse; font-size: 14px; }
table.账 th, table.账 td { padding: 9px 11px; text-align: left; border-bottom: 1px solid var(--线); }
table.账 th { font-family: var(--码); font-size: 11px; letter-spacing: .12em; color: var(--字更弱); text-transform: uppercase; font-weight: 400; }
table.账 td.右, table.账 th.右 { text-align: right; }
table.账 tr:hover td { background: rgba(34, 32, 29, .035); }
.正 { color: var(--绿); }
.负 { color: var(--朱重); }
.滚 { overflow-x: auto; }

/* ---------------- 编辑台专有 ---------------- */
.台 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
  align-items: start;
}
@media (max-width: 900px) {
  .台 { grid-template-columns: minmax(0, 1fr); }
}
/* 两栏各自的标号。顺序靠明写，不靠错位（见文件头「简约功能化删掉了什么」）。 */
.栏头 {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px;
}
.栏头 .序 {
  font-family: var(--码); font-size: 12px; letter-spacing: .14em;
  color: var(--朱); flex: none;
}
.栏头 h3 { font-size: 16px; }
.栏头 .尾 { margin-left: auto; font-size: 12px; color: var(--字更弱); }

.计价条 {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline;
  padding: 10px 14px;
  border: 1px solid var(--线重); border-top: 0;
  background: var(--面);
  font-size: 13.5px;
}
.计价条 b { font-family: var(--码); color: var(--墨浓); font-size: 15px; }

/* 加载：三个 △ 依次亮。用 △ 而不是转圈——转圈是通用组件，
 * 这三个角在这站里是有出处的。 */
.等 { display: inline-flex; gap: 5px; }
.等 i { font-style: normal; animation: 角闪 1.1s infinite; }
.等 i:nth-child(2) { animation-delay: .18s; }
.等 i:nth-child(3) { animation-delay: .36s; }
@keyframes 角闪 { 0%, 100% { opacity: .25; } 45% { opacity: 1; } }

.跑表 { font-family: var(--码); color: var(--字弱); font-variant-numeric: tabular-nums; }

/* ---------------- 首页 ---------------- */
.头屏 { padding-bottom: 4px; }
.头屏 h1 { max-width: 22em; }
.头屏 .引 { font-size: clamp(15.5px, 1.6vw, 18px); color: var(--字弱); max-width: 38em; margin-top: 14px; }

/* 核心功能：2×2（窄屏一列）。`minmax(min(100%, 380px), 1fr)` 而不是
 * `minmax(380px, 1fr)`——后者在 375px 宽的手机上会让格子比视口宽，
 * 于是整页横向滚动。 */
.功能 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 14px; margin-top: 16px;
}
.功 { border: 1px solid var(--线); background: var(--面); padding: 20px 22px; }
.功 .号 { font-family: var(--码); font-size: 11.5px; letter-spacing: .16em; color: var(--朱); }
.功 h3 { margin: 6px 0 8px; font-size: 17.5px; }
.功 p { color: var(--字弱); font-size: 14.5px; line-height: 1.85; margin: 0; }

.三步 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px; margin-top: 16px;
}
.步 { border: 1px solid var(--线); background: var(--面); padding: 18px; }
.步 .号 { font-family: var(--码); font-size: 12px; letter-spacing: .18em; color: var(--朱); }
.步 h3 { margin: 6px 0 6px; }
.步 p { color: var(--字弱); font-size: 14px; margin: 0; }

/* 档位表 */
.档表 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.档 { border: 1px solid var(--线); padding: 11px 13px; background: var(--纸); }
.档 .字数 { font-family: var(--码); font-size: 12.5px; color: var(--字弱); }
.档 .分 { font-family: var(--显示); font-size: 23px; color: var(--墨浓); }

/* 充值预设 */
.价格 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; }
.价 {
  border: 1px solid var(--线重); padding: 15px; text-align: left; cursor: pointer;
  background: var(--面); color: var(--墨);
  font-family: var(--正文); transition: border-color .12s, background .12s;
}
.价:hover { border-color: var(--朱); }
.价.选中 { border-color: var(--朱); background: var(--朱淡); }
.价 .元 { font-family: var(--显示); font-size: 27px; }
.价 .得 { font-family: var(--码); font-size: 12px; color: var(--字弱); letter-spacing: .08em; }

/* 二维码 */
.码框 { display: inline-block; padding: 12px; background: #fff; border: 1px solid var(--线重); }
.码框 img { display: block; width: 220px; height: 220px; image-rendering: pixelated; }
.已到账 { color: var(--绿); }

/* ---------------- 入场动画 ---------------- */
/* 位移从 16px 降到 8px、时长从 .62s 降到 .38s：这一层的作用是让人看出块与块
 * 的先后，不是表演。 */
@keyframes 升起 { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.起 { animation: 升起 .38s ease-out both; }
.起一 { animation-delay: .02s; }
.起二 { animation-delay: .07s; }
.起三 { animation-delay: .12s; }
.起四 { animation-delay: .17s; }
.起五 { animation-delay: .22s; }

@media (prefers-reduced-motion: reduce) {
  .起, .等 i { animation: none !important; }
  .钮, .价 { transition: none; }
}

/* ---------------- 杂项 ---------------- */
.行 { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.行.散 { justify-content: space-between; }
.堆 > * + * { margin-top: 14px; }
.隐 { display: none !important; }
hr.细 { border: 0; border-top: 1px solid var(--线); margin: 20px 0; }
.居中 { text-align: center; }

/* ---------------- 折叠块：价钱与承诺 ---------------- */
/* 用原生 `<details>`，不自己做展开收起。理由不是省代码：原生的那个**没有 JS
 * 也能开**，而这一块里装的是价钱和保留期——JS 挂了的时候，最不该跟着消失的
 * 就是"我们对你的稿子承诺了什么"。 */
.折 {
  background: var(--面);
  border: 1px solid var(--线);
}
.折 > summary {
  padding: 13px clamp(14px, 2vw, 20px);
  cursor: pointer;
  font-family: var(--正文); font-size: 14px; color: var(--字弱);
  list-style: none;              /* Firefox */
  display: flex; align-items: center; gap: 8px;
}
.折 > summary::-webkit-details-marker { display: none; }
/* 记号用 △（本站的记号，见文件头），展开时转成 ▽。**不用 ▶/▼**：那两个是
 * 系统控件的样子，而这一整套界面里没有别的地方长成系统控件。 */
.折 > summary::before { content: "△"; color: var(--朱); font-size: 11px; }
.折[open] > summary::before { content: "▽"; }
.折 > summary:hover { color: var(--墨); }
.折[open] > summary { border-bottom: 1px solid var(--线); }
.折芯 { padding: clamp(14px, 2vw, 20px); }

/* ---------------- 原地登录弹层 ---------------- */
/* 只有首页（= 编辑台）用它。**存在的理由是左边框里那一整集正文**：整页跳一次
 * 登录，那段字就只能靠 localStorage 草稿捞回来，而草稿是尽力而为的
 * （隐私模式下 localStorage 直接抛）。原地登录一次都没碰过那个 textarea。 */
.罩 {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  /* 压深而不是压浅：浅米底上要让人一眼看出"后面那一页现在不能点"。 */
  background: rgba(34, 32, 29, .46);
  /* 手机上弹层比屏幕高时要能滚。`overflow:hidden` 的症状是"登录按钮看不见
   * 也划不到"，而那是彻底走不通。 */
  overflow-y: auto;
  animation: 渐显 .16s ease-out both;
}
@keyframes 渐显 { from { opacity: 0; } to { opacity: 1; } }
.弹 {
  position: relative;
  width: 100%; max-width: 400px;
  margin: auto;
  background: var(--面);
  border: 1px solid var(--线重);
  padding: clamp(18px, 3vw, 26px);
  box-shadow: 0 18px 40px rgba(60, 44, 26, .22);
}
.弹关 {
  position: absolute; top: 8px; right: 10px;
  background: none; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--字更弱);
  padding: 4px 8px;
}
.弹关:hover { color: var(--朱); }
/* 弹层里那两个格子的下边距收一点：登录按钮要在不滚动的情况下露出来。 */
.弹 label.格 { margin-bottom: 12px; }

@media (prefers-reduced-motion: reduce) {
  .罩 { animation: none !important; }
}

/* 透明分组：只为给一组元素挂一个 id 好统一显示/隐藏，本身不参与布局。
 * `display:contents` 让子元素直接参与外层 flex/grid——套普通 div/span 的话
 * 那一组会被当成**一个** flex 项，`.导航` 的 gap 全塌在一起。
 * 注意 `.隐` 是 `display:none !important`，压得过这一条，所以两者能叠加用。 */
.透组 { display: contents; }