/* ═══════════════════════════════════════════════════════
   青云问道 · 水墨淡雅（黑金墨）
   ───────────────────────────────────────────────────────
   设计原则：
   1. 底色近乎纯黑（#0a0a0c），只让金与墨灰跳出来
   2. 金字用字距（letter-spacing）撑开，营造"碑刻"感
   3. 所有分隔用 1px 半透明金线，不用实色块
   4. 大留白：面板内边距至少 32px，卡片间距 20px
   5. 动效一律缓慢（0.6s+），只有"呼吸"与"渐显"，不做弹跳

   ⭐ v11.29 背景插画适配 —— 全部配色问题的根源
   ───────────────────────────────────────────────────────
   原来整套配色是「**压在纯黑上**」设计的：次要文字 --mute-2 只有 2.14 对比度，
   正好卡在不刺眼的边缘。插画一进来，底层亮度从 10 涨到十几到几十，
   这些「刚好够看」的颜色全部塌掉：
       背景 #33302a 时  paper 11.66 / gold 5.82 / jade 5.58 / mute 2.44 ❌ / mute-2 1.42 ❌
       背景 #6b6458 时  gold  2.59 ❌ / jade 2.48 ❌ / cinnabar 1.19 ❌
   修法不是把字调亮（那会破坏"淡雅"），而是**把文字重新放回够暗的底上**：
       · 加一条 20% 黑底的**内容列**（#main-col），面板区从此有不低于 #0d0b0a 的托底；
       · 卡片/输入框/行条目一律用 `--ui-surface-*` 的**不透明底**，不再靠插画透出来；
       · 插画退居**留白区与背景两侧**（那里没有字），反而更清楚；
       · 对比度太低的三个颜色（金、青玉、朱砂、两个墨灰）各提一档，仍保持淡雅。
   改这里的任何一条，都重跑 `node tools/shot_panels.js` 看图，**不要只看代码**。
   ═══════════════════════════════════════════════════════ */

:root {
  --ink: #0a0a0c;
  --ink-2: #101013;
  --ink-3: #17171b;
  --paper: #f4f1ea;

  /* ⚠️ 这四个是**旧配色**，314 处组件直接引用他们（style/rogue/arena/market/… 全部）。
     v11.29 起真正的取值在下面的 --ink-* 别名里，这四行只是"历史原值"的留档，
     新代码**不要再用**它们 —— 用 `var(--mute)` 之类即可（别名已把它指向新色）。 */
  --gold-raw: #c9a86a;
  --jade-raw: #7fb3a8;
  --cinnabar-raw: #b8503f;
  --mute-raw: #6d6a64;
  --mute-2-raw: #4a4742;

  /* ── v11.29 背景插画适配 ───────────────────────────────────────
     用**同名变量重新赋值**，而不是新增一套名字：
     组件里 314 处 `var(--mute-2)` 不必逐个改，在这里换一次值就全线生效。
     （第一版就是只加了 --mute-ink 之类的新名字，结果组件仍然拿到旧色值，
       contrast_probe 直接量出 rgb(74,71,66) 这个旧 --mute-2 才暴露出来。）
     原则：**只往亮的方向挪、不换色相**，纯黑底下的观感几乎不变。 */
  --gold: #d9bb80;
  --jade: #93c5b9;
  --cinnabar: #d9705c;
  --mute: #8f8a80;
  --mute-2: #6e6961;

  /* ── v11.29 层级表面：不透明的底，插画不再透进内容区 ─────────────
     base  = 内容列底色（介于页面与卡片之间）
     raise = 卡片 / 行条目（可读性的主承载）
     hover = 悬停 / 选中前的抬升
     deep  = 输入框、进度槽等"凹下去"的地方 */
  --ui-base: #0e0c0b;
  --ui-raise: #171412;
  --ui-hover: #211d19;
  --ui-deep: #0a0908;
  --ui-line: rgba(255, 255, 255, .075);
  --ui-line-strong: rgba(201, 168, 106, .30);

  --gold-bright: #e8cf9a;
  --gold-dim: rgba(217, 187, 128, .38);   /* 跟着 --gold 一起走，否则金线与金字色相不一致 */
  --gold-faint: rgba(217, 187, 128, .14);
  --jade-bright: #a8d8cc;

  --font-serif: "Songti SC", "STSong", "SimSun", "Noto Serif SC", "Source Han Serif SC", serif;
  --font-sans: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 15px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.dim { color: var(--mute); font-size: 13px; line-height: 1.9; font-weight: 300; }

/* ═══════════ 背景山水 ═══════════ */
/* 兜底层：没有插画（或插画还没加载出来）时就是这套水墨剪影 + 星点。
   ⭐ 插画由 bg.js 叠在 **单独的 `.scenery-art` 子层**上，
      不用改 #scenery 自己的 background-image —— 否则会把这里的渐变一并盖掉。 */
#scenery {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 70% at 50% 115%, rgba(201,168,106,.055), transparent 62%),
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(120,140,160,.05), transparent 60%),
    var(--ink);
}

/* ── 插画层（v11.28，tools/gen_art.py + pack_art.py 的产物）────────────
   层次（**顺序很重要，踩过坑**）：
     z:0-  .scenery-art          插画本体
     z:1   #scenery::before/after 压暗遮罩
     z:2   .mountain / .ink-fog / .stars  兜底剪影（有插画时几乎透明）
   插画是**暗调但仍有亮部**（月、云海、灯火），如果不压：
     · 面板里 #paper 近白的正文落在云海亮部上会糊掉；
     · 而一张纯黑图又看不出画了什么。
   所以由亮到暗分三段渐变压 + 一层轻微去饱和，保证「看得出山水、读得清字」。
   ⚠️ .scenery-art 必须显式给 z-index:0 —— 定位元素默认 z-index 是 auto，
      按**定义顺序**参与排序；剪影 div 定义在它前面，就会被画在遮罩和插画之间。
   改这几条之前先跑 `node tools/shot_panels.js`：它会把每个界面截图存进 shots/art/。 */
.scenery-art {
  position: absolute; inset: 0; z-index: 0; opacity: 0;
  background-size: cover; background-position: center center; background-repeat: no-repeat;
}
#scenery.has-art .scenery-art {
  filter: saturate(.95) contrast(1.06) brightness(1.18);
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0,0,0,.96) 0%, rgba(0,0,0,.92) 46%, rgba(0,0,0,.72) 70%,
    rgba(0,0,0,.46) 86%, rgba(0,0,0,.38) 100%);
          mask-image: linear-gradient(180deg,
    rgba(0,0,0,.96) 0%, rgba(0,0,0,.92) 46%, rgba(0,0,0,.72) 70%,
    rgba(0,0,0,.46) 86%, rgba(0,0,0,.38) 100%);
}
/* 整屏压暗：保证**任何位置**都至少有底色打底。
   ⚠️ 这里的 alpha 直接决定「看不看得出换了图」：
      上一版是 .46，叠加下面两层后两侧实测只剩 rgb(12,11,11)，
      而原图那一带是 rgb(32~70) —— 不同栏目之间的差异被彻底抹平，
      表现就是「切了跟没切一样」。现在降到 .30，靠下面的 #main-col / 侧栏背书文字。 */
#scenery.has-art::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: rgba(10, 10, 12, .30);
}
/* 中轴柔化 + 顶栏暗带
   · 中轴：登录框与面板正文压在中轴线上，那里必须是「雾」不是「山」；
   · 顶栏：#hud 是**无底色的透明栏**，它下面的数字（修为、灵石、洞府阶）
     直接坐在天上。插画最亮的就是天空，所以单独给顶部 118px 压一道暗带。
   · 底部：日志与面板底边，压一条短渐变就够，不必整条 50%。 */
#scenery.has-art::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,10,12,.80) 0px, rgba(10,10,12,.58) 92px, rgba(10,10,12,.20) 118px, transparent 150px),
    linear-gradient(0deg, rgba(10,10,12,.34), transparent 24%),
    radial-gradient(ellipse 46% 74% at 50% 50%, rgba(10,10,12,.30), rgba(10,10,12,.08) 66%, transparent 100%);
}
/* ── 兜底层（剪影 / 星点 / 流雾）的**层序** ──────────────────────────
   ⚠️ v11.29 修：这三类元素原来统一 `z-index: 2`，是**为了盖在别的兜底元素上方**。
   但插画层的 z-index 是 0 —— 于是星点(0.998)、两团流雾(带 blur 22px)、
   三层山脊**全都盖在插画上面**：
       · `.stars` 是 radial-gradient 星点，几乎不透明，直接铺满整屏；
       · `.fog-1/.fog-2` 带 `filter: blur(22px)`，会把下面的插画**糊成一团**。
   表现出来的症状就是「切换背景后画面又回到那片水墨星空」——
   插画其实换对了（DOM 里确实只有 1 层、图也对），只是被这几层压住了。
   现在：**有插画时，兜底层退到插画之下**（z-index:-1），只在没有插画时露出来。 */
#scenery.has-art > .mountain,
#scenery.has-art > .ink-fog,
#scenery.has-art > .stars { z-index: -1; }
#scenery:not(.has-art) > .mountain,
#scenery:not(.has-art) > .ink-fog,
#scenery:not(.has-art) > .stars { z-index: 2; }
/* 有插画时，剪影换成**很淡的暗色**垫在最前面：既能托住 HUD 底边，
   又不会被插画的山脉轮廓打架（两套山叠在一起会很脏）。 */
#scenery.has-art .mountain {
  opacity: .05 !important; filter: none !important;
  background: #0a0a0c;
}
.stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(232,207,154,.55), transparent),
    radial-gradient(1px 1px at 78% 12%, rgba(232,207,154,.4), transparent),
    radial-gradient(1px 1px at 42% 8%,  rgba(232,207,154,.35), transparent),
    radial-gradient(1.5px 1.5px at 63% 26%, rgba(232,207,154,.3), transparent),
    radial-gradient(1px 1px at 88% 34%, rgba(232,207,154,.25), transparent),
    radial-gradient(1px 1px at 25% 32%, rgba(232,207,154,.22), transparent);
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .55 } to { opacity: 1 } }

/* 远山：用 clip-path 做出山脊剪影，层层叠出景深 */
.mountain {
  position: absolute; left: -10%; right: -10%; bottom: 0;
  background: linear-gradient(180deg, rgba(24,26,32,.0), rgba(16,17,21,.95));
}
.mtn-far {
  height: 42vh;
  clip-path: polygon(0% 100%, 0% 62%, 12% 44%, 22% 58%, 34% 34%, 46% 54%,
                     58% 40%, 70% 56%, 82% 38%, 92% 56%, 100% 46%, 100% 100%);
  opacity: .38;
  filter: blur(1.5px);
}
.mtn-mid {
  height: 30vh;
  clip-path: polygon(0% 100%, 0% 70%, 16% 50%, 28% 66%, 44% 44%, 58% 64%,
                     74% 48%, 88% 66%, 100% 56%, 100% 100%);
  opacity: .55;
  filter: blur(.6px);
}
.mtn-near {
  height: 18vh;
  clip-path: polygon(0% 100%, 0% 78%, 20% 62%, 38% 76%, 56% 58%, 76% 74%,
                     90% 64%, 100% 76%, 100% 100%);
  opacity: .72;
}
/* 流雾：缓慢横移 */
.ink-fog {
  position: absolute; left: -40%; right: -40%; height: 22vh;
  background: linear-gradient(90deg, transparent, rgba(201,168,106,.035), transparent);
  filter: blur(22px);
}
.fog-1 { bottom: 22vh; animation: drift 48s linear infinite; }
.fog-2 { bottom: 8vh; height: 16vh; animation: drift 66s linear infinite reverse; opacity: .8; }
@media (max-height: 780px) {
  #naming .seal-wrap { padding-top: 44px; }
  #naming .login-form { gap: 20px; }
  #naming .title { font-size: 34px; margin: 22px 0 8px; }
  #naming .subtitle { margin-bottom: 30px; }
}

@keyframes drift { from { transform: translateX(-8%) } to { transform: translateX(8%) } }

/* ═══════════ 通用 ═══════════ */
.screen {
  position: relative; z-index: 1;
  height: 100%; display: flex; flex-direction: column;
}
.screen[hidden] { display: none; }

/* 烫金按钮 */
.btn-jade, .btn-ghost, .hud-stage {
  margin-top: 10px; font-family: var(--font-serif); font-size: 10px;
  letter-spacing: .28em; color: var(--mute-2); text-align: right;
}

.btn-break {
  position: relative; border-radius: 2px; letter-spacing: .24em;
  transition: all .45s var(--ease); font-family: var(--font-serif); font-size: 14px;
}
.btn-jade {
  background: linear-gradient(160deg, rgba(201,168,106,.16), rgba(201,168,106,.06));
  border: 1px solid var(--gold-dim); color: var(--gold-bright);
  padding: 11px 22px;
}
.btn-jade:hover:not(:disabled) {
  background: linear-gradient(160deg, rgba(201,168,106,.28), rgba(201,168,106,.1));
  border-color: var(--gold); color: #fff6e4;
  box-shadow: 0 0 22px rgba(201,168,106,.12);
}
.btn-jade:disabled {
  background: transparent; border-color: rgba(255,255,255,.06);
  color: var(--mute-2); cursor: not-allowed; letter-spacing: .18em;
}
.btn-jade.wide { width: 100%; margin-top: 22px; padding: 14px; }

.btn-ghost {
  background: transparent; border: 1px solid rgba(255,255,255,.09); color: var(--mute);
  padding: 11px 20px;
}
.btn-ghost:hover { color: var(--paper); border-color: rgba(255,255,255,.2); }

/* 墨色进度条
   ⚠️ transition 用 **linear** 而不是 var(--ease)（v11.7）：
   这些条是「随时间匀速前进」的（挂机周天 / 修为 / 宗门进度），
   用缓动会在每次数据刷新时"冲一下再停"——数据每秒才来一次，
   .8s 的缓动曲线跑完之后还剩 0.2 秒静止，看起来就是一顿一顿的。
   匀速 + 线性才不会破坏"它真的在走"的直觉。
   （战斗行动条走的是另一套：web/battle-anim.js 逐帧插值，这里不涉及。） */
.ink-bar {
  position: relative; height: 2px; background: rgba(255,255,255,.055);
  overflow: hidden; border-radius: 1px;
}
.ink-bar.tall { height: 3px; margin: 26px 0 12px; }
.ink-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, rgba(201,168,106,.35), var(--gold-bright));
  box-shadow: 0 0 12px rgba(232,207,154,.5);
  transition: width .9s linear;
  will-change: width;
}

/* ⭐ v11.7：长周期营生的「流光」。
   周期 1000 秒时条每秒只走 0.78px —— 肉眼根本看不出在动，玩家会怀疑卡住了。
   进度条本身不能造假（它必须如实反映 percent），所以**另加一层与进度无关的光**：
   一道高光在已填充的部分里来回扫，只表达"这东西正在跑"。
   只对挂机条（.ink-bar.tall 内的 #aw-bar）生效，不影响顶栏修为条与宗门条
   （那两条更新频繁、本身就在动，加流光反而会吵）。 */
#aw-bar { position: relative; overflow: hidden; }
#aw-bar::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -40%;
  width: 40%;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,.55), transparent);
  animation: aw-flow 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes aw-flow {
  0%   { left: -40%; }
  100% { left: 100%; }
}
/* 尊重系统的"减少动效"设置 */
@media (prefers-reduced-motion: reduce) {
  #aw-bar::after { animation: none; display: none; }
  .ink-bar i { transition: none; }
}

/* ═══════════ 登录 ═══════════ */
#login { align-items: center; justify-content: center; }
/* v11.20：取名页原来**漏了居中**（只给 #login 写了），加了灵根卡片后一眼就能看出来。
   ⚠️ 以后再加 .screen 级页面，记得同步这里的水平/垂直居中。
   ⚠️ v12.16：**居中之外还必须能滚**。
   实测 1440×808 窗口下：
       视口 808px，而 `.seal-wrap` 实际 870px（十种灵根卡片把它撑高了），
       `justify-content: center` 于是把**超出的部分上下对半分** —— 
       顶部印章与「取 道 号」标题被顶出屏幕 31px，底边提示贴死在窗口边缘。
       而 `body { overflow: hidden }` 让它**连滚都滚不动**（body.scrollHeight 839 > 
       viewport 808，但滚轮无效），玩家在常见笔记本分辨率上根本点不到完整界面。
   修法：给 .screen 自己开纵向滚动 + `margin: auto` 居中。
   为什么是 `margin:auto` 而不是 `justify-content:center`：
       前者在内容放得下时等价于居中，放不下时**自动退化成从顶部开始**（可滚），
       不会像 center 那样把两端都裁出屏幕；两者配合起来上下都有可达的余量。
   ⚠️ 给 .screen 加 overflow-y 就会建立**新的滚动容器** —— 因此上面
      `#login::before` 的护底必须改用 `position: fixed`（已经这么写了），
      否则它会跟着内容一起滚，露出没压暗的边。 */
.screen { overflow-y: auto; overflow-x: hidden; }
#login { align-items: center; justify-content: center; }
#login .seal-wrap, #naming .seal-wrap { margin: auto 0; }
#naming { align-items: center; padding: 24px 0; }
#naming .seal-wrap { max-width: 560px; }

/* ⭐ v12.16 登录/取名页「护底」
   症状：登录框直接压在插画上，中轴那条正好落在**云海亮部与山体高光**上，
         「青云问道」的金渐变、输入框的占位字、"账号/密语"标签全部糊进背景。
   根因：这两个页面**不在 #main-col 里**（那是游戏内的内容列），
        没有任何不透明底托着，只有 #scenery 那层全局 .30 压暗。
   做法（与 v11.29 同一套思路：把文字放回够暗的底上，而不是一味把字调白）：
     1. 局部径向压暗 —— 只压中轴那一圈椭圆，不动画面两侧的山峰与月；
        比整屏再加暗一层温和得多，插画该有的观感全保留。
     2. 字色提亮一档 + 细字重 → 抗糊（金渐变顶端的 #f6ecd8 已经接近纸白）。
     3. 标题/大字号加一层极淡的暗色投影，把笔画从背景里"托"出来。
   ⚠️ 这是 `position: fixed` 的伪元素，所以 `#panel` 等后续页面的层叠上下文
      不会被它卷进来（只在 .screen 里画一层，不改变其他面板的 z 序）。
   ⚠️ 改完必须 `node tools/shot_panels.js` 看图，**不要只看代码**——
      护底太重会让插画"发霉"，太轻则回到糊的状态。 */
#login::before, #naming::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 30% 40% at 50% 44%, rgba(8,8,10,.72), rgba(8,8,10,.34) 58%, transparent 100%),
    radial-gradient(ellipse 46% 60% at 50% 52%, rgba(8,8,10,.34), transparent 100%);
}

.seal-wrap {
  position: relative; width: 100%; max-width: 400px;
  padding: 56px 44px 44px; text-align: center;
}
/* 印章：朱砂底、金边
   注意用 background-color + background-image 分开写：
   只用 background 简写时，某些浏览器在渐变下算不出底色（实测 backgroundColor 为透明）。 */
.seal {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 56px; height: 56px; display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 26px; color: #f0e6d2;
  background-color: #7d3225;
  background-image: linear-gradient(160deg, #8e3a2c, #6d2a20);
  border: 1px solid rgba(232,207,154,.5);
  box-shadow: 0 0 30px rgba(142,58,44,.35), inset 0 0 14px rgba(0,0,0,.4);
  border-radius: 3px; letter-spacing: 0;
}

/* 标题：金渐变 + 暗色投影。
   ⚠️ drop-shadow 之所以用算法生成（`-webkit-text-stroke` 不行）：
      这是 `background-clip: text` 的渐变字，文字颜色是 transparent，
      任何"给字加边"的常规手段都会把透明字的填充一起描出来。
      filter 作用在**渲染后的像素**上，所以描的是金字的真实轮廓。 */
.title {
  margin: 26px 0 10px; font-family: var(--font-serif); font-weight: 600;
  font-size: 40px; letter-spacing: .38em; text-indent: .38em;
  background: linear-gradient(180deg, #fbf3e2 6%, #e6cd96 52%, #a98a4f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.95))
    drop-shadow(0 0 18px rgba(201,168,106,.35));
}
.subtitle {
  margin: 0 0 44px; font-size: 11px; font-weight: 400; letter-spacing: .5em;
  color: var(--mute); font-family: var(--font-serif);
  /* 副标题字号小、字重轻，单靠压暗不够——补一层与背景同色的暗影 */
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 12px rgba(8,8,10,.8);
}

.login-form { display: flex; flex-direction: column; gap: 26px; }
.ink-field { position: relative; display: block; text-align: left; }
.ink-field span {
  position: absolute; left: 0; top: -13px;
  font-size: 11px; letter-spacing: .3em; color: var(--mute);
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.ink-field input {
  width: 100%; padding: 10px 2px;
  background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.16);
  color: var(--paper); font-size: 16px; font-family: var(--font-serif);
  letter-spacing: .15em; outline: none;
  transition: border-color .4s var(--ease);
  /* 输入框是透明的、只有一条底线，占位字和已输入内容都直接坐在画上 */
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.ink-field input::placeholder { color: var(--mute-2); letter-spacing: .1em; font-size: 14px; }
.ink-field input:focus { border-bottom-color: var(--gold); }

.login-form .btn-jade {
  margin-top: 10px; padding: 15px; letter-spacing: .5em; text-indent: .5em;
  /* v12.16「入 道」原来只有 .16 的渐变，底几乎和插画同亮；底色抬到能托住金字 */
  background: linear-gradient(160deg, rgba(201,168,106,.26), rgba(12,10,9,.72));
  box-shadow: 0 0 18px rgba(8,8,10,.55);
}
.login-form .btn-jade:hover:not(:disabled) {
  background: linear-gradient(160deg, rgba(201,168,106,.40), rgba(14,11,9,.78));
}

.login-msg {
  min-height: 20px; margin: 20px 0 0; font-size: 12px;
  letter-spacing: .1em; color: var(--cinnabar);
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.login-hint {
  margin: 6px 0 0; font-size: 11px; letter-spacing: .12em; color: var(--mute-2);
  font-family: var(--font-serif);
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}

/* ── 灵根自选（v11.20）──────────────────────────────────────────────────
   取名页的十种灵根卡片。选项内容由服务端 hello.roots 下发，这里只管样式。
   取名页容器只有 400px，所以用两列紧凑网格，别做成大卡片。 */
.root-pick { text-align: left; }
.root-pick-title {
  font-family: var(--font-serif); font-size: 12px; letter-spacing: .3em;
  color: var(--mute); margin-bottom: 12px;
}
.root-pick-title em {
  font-style: normal; letter-spacing: .06em; font-size: 10.5px; color: var(--mute-2);
}
.root-options {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px;
}
.root-opt {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 11px 13px; border-radius: 2px; cursor: pointer;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.09);
  color: var(--mute); font: inherit;
  transition: border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.root-opt:hover { border-color: var(--gold-dim); color: var(--paper); }
.root-opt.sel {
  border-color: var(--gold); background: rgba(201,168,106,.14); color: var(--paper);
}
.root-opt-name {
  display: block; font-family: var(--font-serif); font-size: 14.5px;
  letter-spacing: .14em; line-height: 1.3;
}
.root-opt.sel .root-opt-name { color: var(--gold-bright); }
.root-opt-desc {
  display: block; font-size: 11px; line-height: 1.6; color: var(--mute-2);
  letter-spacing: .02em; white-space: normal;
}
.root-opt.sel .root-opt-desc { color: var(--mute); }
.root-detail {
  min-height: 30px; margin: 12px 0 0; font-family: var(--font-serif);
  font-size: 12px; line-height: 1.7; letter-spacing: .04em; color: var(--mute-2);
}

/* ═══════════ HUD ═══════════ */
#game { padding: 0; }
#hud {
  display: grid; grid-template-columns: minmax(180px, auto) 1fr minmax(260px, auto);
  align-items: center; gap: 40px;
  padding: 22px 40px 20px;
  border-bottom: 1px solid var(--gold-faint);
  position: relative;
}
/* 底部一道极细的金线渐隐 */
#hud::after {
  content: ''; position: absolute; left: 40px; right: 40px; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

.hud-left { min-width: 0; }
.hud-name {
  font-family: var(--font-serif); font-size: 21px; letter-spacing: .2em;
  color: var(--paper); margin-bottom: 8px;
}
.hud-tags { display: flex; gap: 14px; font-family: var(--font-serif); font-size: 11px; }
.tag-realm { color: var(--gold); letter-spacing: .18em; }
.tag-realm::before { content: '境 · '; color: var(--mute-2); }
.tag-root { color: var(--mute); letter-spacing: .12em; }

.hud-center { min-width: 0; }
.bp-label {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px; font-family: var(--font-serif);
}
.bp-label span { font-size: 11px; letter-spacing: .42em; color: var(--mute); }
.bp-label b { font-size: 13px; font-weight: 400; color: var(--gold); letter-spacing: .08em; }
.bp-rate { font-family: var(--font-serif); font-size: 10.5px; letter-spacing: .12em;
  color: var(--mute); margin-top: 6px; text-align: right; }

.hud-stage {
  margin-top: 10px; font-family: var(--font-serif); font-size: 10px;
  letter-spacing: .28em; color: var(--mute-2); text-align: right;
}

.btn-break {
  display: block; width: 100%; margin-top: 16px;
  background: transparent; border: 1px solid rgba(255,255,255,.07);
  color: var(--mute-2); padding: 9px; letter-spacing: .5em; text-indent: .5em; font-size: 12px;
}
.btn-break:not(:disabled) {
  border-color: var(--gold); color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(201,168,106,.14), transparent);
  animation: breathe 2.8s ease-in-out infinite;
}
.btn-break:not(:disabled):hover { background: rgba(201,168,106,.24); }
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(201,168,106,0); }
  50% { box-shadow: 0 0 26px rgba(201,168,106,.28); }
}

.hud-right { display: flex; gap: 34px; justify-content: flex-end; }
.hud-stat span {
  display: block; font-size: 10px; letter-spacing: .32em;
  color: var(--mute-2); margin-bottom: 7px; font-family: var(--font-serif);
}
.hud-stat b {
  font-family: var(--font-serif); font-size: 17px; font-weight: 400;
  color: var(--paper); letter-spacing: .04em;
}
.hud-stat:nth-child(1) b { color: var(--gold-bright); }

/* ═══════════ 主体 ═══════════ */
#body { flex: 1; display: flex; min-height: 0; }

/* 左侧篆书菜单 —— 一级分类（v9.1，v11.10 增至 5 项）
   项数少所以每项给足留白；子标签在 #subtabs 里。
   ⚠️ 5 项时总高约 392px，容器 669px 尚有余量；
      再加分类前先量一遍（v9.1 就是 18 项平铺撑爆容器、首尾点不到的教训）。 */
#nav {
  width: 116px; flex: 0 0 116px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 0 0 40px; border-right: 1px solid rgba(255,255,255,.04);
}
.nav-cat {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 26px 0; background: none; border: none; cursor: pointer;
  font-family: var(--font-serif); font-size: 16px; letter-spacing: .3em; text-indent: .3em;
  color: var(--mute-2); transition: color .5s var(--ease);
}
.nav-cat:hover { color: var(--mute); }
.nav-cat.active { color: var(--gold-bright); }
.nav-word { transition: text-shadow .5s var(--ease); }
.nav-cat.active .nav-word { text-shadow: 0 0 18px rgba(232,207,154,.35); }
.nav-cat.active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 26px; background: linear-gradient(180deg, transparent, var(--gold), transparent);
}

/* 主列：二级标签 + 面板（v9.1）
   包一层是为了让子标签栏**固定在面板上方**，不随面板内容滚走。

   ⭐ v11.29：这一列是**内容区**，必须有不透明托底，但**不能用一整块死色**。
   它原来的 20% 黑对插画**亮部**（灯笼、丹炉火、月）完全不够：插画最亮处 bgL≈0.15，
   而 --mute 这种次要文字在 bgL 0.05 以上就开始糊。
   但直接铺 86% 实色又走到另一个极端 —— 三块（导航/内容/日志）都盖死后，
   插画只剩几道窄缝可见，等于白做。
   所以改成**渐变**：中间文字密集处最实，上下与两侧放开，
   让插画的云海 / 灯火从这些地方透出来，而文字区仍有约 #16130f 的底。
   想整体更清楚就把这些 alpha 一起调低（改这一个区块 + 下方 #nav/#logwrap 三条）。 */
#main-col {
  flex: 1; display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background:
    linear-gradient(90deg, rgba(12,10,9,.52) 0%, rgba(12,10,9,.30) 8%, rgba(12,10,9,.30) 92%, rgba(12,10,9,.52) 100%),
    linear-gradient(180deg, rgba(12,10,9,.20) 0%, rgba(12,10,9,.46) 18%, rgba(12,10,9,.46) 72%, rgba(12,10,9,.22) 100%);
}

/* 二级标签栏：当前一级分类下的面板 */
.subtabs {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0;
  padding: 0 48px; border-bottom: 1px solid rgba(255,255,255,.04);
}
/* ⚠️ 必须显式写：`display:flex` 会盖掉 `hidden` 属性的默认 `display:none`，
   app.js 给「只有一个面板的分类」（百艺）设 hidden 时会失效，留下一根空的分隔线。 */
.subtabs[hidden] { display: none; }
.subtab {
  position: relative; padding: 19px 17px 17px; background: none; border: none; cursor: pointer;
  font-family: var(--font-serif); font-size: 14px; letter-spacing: .22em; text-indent: .22em;
  color: var(--mute-2); transition: color .4s var(--ease);
}
.subtab:hover { color: var(--mute); }
.subtab.active { color: var(--gold-bright); }
.subtab.active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ═══ v11.29：插画下的配色体系（取代 v11.28 的"到处加遮罩"）═══════
   v11.28 的做法是不断往组件上加半透明黑，结果组件之间互相透、越叠越脏，
   而卡片里的**不透明写死的颜色**（纸白、金色）又完全没跟着调整。
   现在改成三层固定层级，组件只认变量、不再各自调透明度：
       L0 页面/插画        #scenery
       L1 内容列           #main-col 20% 黑   → 文字底约 #0e0c0b
       L2 卡片 / 行条目    --ui-raise          → 文字底约 #171412
   见文件头「v11.29 背景插画适配」的数据。 */
#scenery.has-art ~ #game #hud {
  background: linear-gradient(180deg, rgba(10,10,12,.86), rgba(10,10,12,.64) 70%, rgba(10,10,12,.34));
}
/* 子标签栏属于内容列，跟内容列同一块底色，不要单独再压一层（会平白暗一块） */
#scenery.has-art ~ #game .subtabs { background: transparent; }
/* 左侧分类与右侧日志同样压在插画上。
   这两列原来给 86~88% 的实底、和内容列等强 —— 结果插画被三块实底彻底盖住。
   现在导航栏用**横向渐变**（靠屏幕外缘最实、靠内容列处放开），
   日志列保留较实的底（文字最密）。这样画面两侧仍能看见插画。 */
#scenery.has-art ~ #game #nav {
  background: linear-gradient(90deg, rgba(12,10,9,.66), rgba(12,10,9,.26));
}
#scenery.has-art ~ #game #logwrap {
  background: linear-gradient(270deg, rgba(12,10,9,.70), rgba(12,10,9,.32));
}
#scenery.has-art ~ #game .nav-cat { color: var(--mute-2); }
#scenery.has-art ~ #game .nav-cat:hover { color: var(--paper); }
#scenery.has-art ~ #game .nav-cat.active { color: var(--gold-bright); }

/* ⚠️ 颜色本身**不在这里改**：上面 :root 已把 --mute/--gold/--jade/--cinnabar
   重新赋值，组件写 `color: var(--mute-2)` 就自动拿到新色，不必逐条覆盖。
   这里只处理"色值改对了、但底还是透的"—— 也就是表面。 */

/* ── 卡片 / 行条目的统一表面 ─────────────────────────────────────
   这些组件原本是 `rgba(255,255,255,.022)` 这种「几乎全透」的底：
   压在纯黑上刚好有一点层次，压在插画上等于没有 —— 文字直接坐在画上。
   这是"有背景图之后颜色看上去很糟"的主因，比色值偏暗更致命。
   改为**不透明**的 --ui-raise，让文字重新回到 #171412 上（paper 对比度 16.3）。
   ⚠️ 类名必须来自 `python tools/list_ui_classes.py`，不要凭印象写：
      第一版手写成 .craft-item / .rogue-card，实际是 .craft-card / .rogue-mode，
      等于整片没生效。 */
#scenery.has-art ~ #game :is(
  .occ, .active-work, .dg-card, .dg-item, .dg-role, .dg-option,
  .sect-card, .attr-row, .eq-row, .skill-card, .src-row, .bag-item,
  .root-box, .farm-box, .farm-expand-box, .farm-seed-box, .farm-stolen-box,
  .craft-card, .bt-wrap,
  .rogue-mode, .rogue-shop, .rogue-shop-row,
  .arena-reward-card, .arena-result-card,
  .market-row, .market-item, .market-mine-row, .market-sell,
  .master-card, .master-row, .master-reward-row,
  .friends-row, .guild-card, .guild-row, .guild-form-row,
  .shopyu-good, .fortune-tier-row, .fortune-speedup-row
) {
  background: var(--ui-raise);
  border-color: var(--ui-line);
}
/* 悬停 / 选中：抬一层，而不是把透明度改来改去 */
#scenery.has-art ~ #game :is(
  .occ:hover:not(.off), .dg-role:hover, .sect-card:hover:not(.off),
  .craft-card:hover, .rogue-mode:hover, .market-row:hover, .master-card:hover
) {
  background: var(--ui-hover);
  border-color: var(--gold-dim);
}
#scenery.has-art ~ #game :is(.occ.current, .sect-card.cur) {
  background: linear-gradient(170deg, rgba(201,168,106,.12), rgba(201,168,106,.04)), var(--ui-raise);
  border-color: var(--gold-dim);
}

/* ── 内容区内部的小底色块 ──────────────────────────────────────
   #main-col 的 86% 底能兜住"普通文字"，但下面这几类**自身带浅色底**
   的模块（聊天区、输入框、`rgba(201,168,106,.03)` 那种提示块）叠上去
   仍然偏透 —— 插画会从它们里面隐约透出来，看着"发脏"。
   统一换成实色 --ui-deep，让这些"凹槽"真正凹下去。 */
#scenery.has-art ~ #game :is(
  .chat-lines, .chat-bar, .chat-input,
  .market-field, .market-sell, .market-filters, .market-pager,
  .farm-seeds, .farm-stolen,
  .bt-log, .rogue-log, .rogue-offers, .rogue-routes, .rogue-shop,
  .arena-targets, .arena-boards, .shopyu-goods, .fortune-tier-list
) {
  background: var(--ui-deep);
  border-color: var(--ui-line);
}
/* 输入框：原来几乎是透明的，插画透进来会让"能不能打字"看不出来 */
#scenery.has-art ~ #game :is(
  input:not([type=hidden]), textarea, select,
  .ink-field input
) {
  background: var(--ui-deep);
}

/* 中间面板 */
#panel { flex: 1; overflow-y: auto; padding: 32px 48px 60px; min-width: 0; }
#panel::-webkit-scrollbar { width: 3px; }
#panel::-webkit-scrollbar-thumb { background: rgba(201,168,106,.2); border-radius: 2px; }
#panel::-webkit-scrollbar-track { background: transparent; }

.pane { animation: fadeUp .6s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

.pane-title {
  display: flex; align-items: center; gap: 20px; margin-bottom: 40px;
  font-family: var(--font-serif);
}
.pane-title span {
  font-size: 13px; letter-spacing: .55em; text-indent: .55em; color: var(--gold);
  white-space: nowrap;
}
.pane-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--gold-faint), transparent);
}

/* ── 当前营生 ── */
.active-work {
  position: relative; margin-bottom: 48px;
  border: 1px solid var(--gold-faint); border-radius: 2px;
  background: linear-gradient(180deg, rgba(201,168,106,.045), rgba(201,168,106,.008));
  overflow: hidden;
}
.aw-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 120% at 50% -30%, rgba(201,168,106,.14), transparent 70%);
  animation: pulse 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulse { 0%,100% { opacity: .5 } 50% { opacity: 1 } }
.aw-inner { position: relative; padding: 30px 34px 26px; }

.aw-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.aw-name {
  font-family: var(--font-serif); font-size: 25px; letter-spacing: .18em;
  color: var(--gold-bright); margin-bottom: 10px;
}
.aw-meta { font-size: 12px; letter-spacing: .12em; color: var(--mute); font-family: var(--font-serif); }
.aw-btns { display: flex; gap: 12px; }
.aw-foot {
  display: flex; justify-content: space-between; font-size: 12px;
  letter-spacing: .12em; color: var(--mute); font-family: var(--font-serif);
}

/* ── 空状态 ── */
.idle-hint {
  display: flex; align-items: center; justify-content: center; gap: 26px;
  padding: 46px 20px; margin-bottom: 48px;
  border: 1px dashed rgba(255,255,255,.055); border-radius: 2px;
}
.idle-hint .brush {
  font-family: var(--font-serif); font-size: 44px; color: rgba(201,168,106,.16);
  writing-mode: vertical-rl; line-height: 1;
}
.idle-hint p { margin: 0; font-family: var(--font-serif); font-size: 15px; letter-spacing: .2em; color: var(--mute); line-height: 2; }
.idle-hint small { font-size: 12px; color: var(--mute-2); letter-spacing: .1em; }

/* ── 营生分组与卡片 ── */
.group-head {
  display: flex; align-items: center; gap: 18px; margin: 46px 0 22px;
  font-family: var(--font-serif);
}
.group-head span { font-size: 12px; letter-spacing: .4em; color: var(--mute); white-space: nowrap; }
.group-head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.06), transparent); }

.occ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 18px; }

.occ {
  position: relative; text-align: left; padding: 24px 22px 22px;
  background: linear-gradient(170deg, rgba(255,255,255,.022), rgba(255,255,255,.006));
  border: 1px solid rgba(255,255,255,.06); border-radius: 2px;
  color: var(--paper); overflow: hidden;
  transition: transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
/* 卡片左上角的一枚符印 */
.occ::before {
  content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 0;
  background: linear-gradient(180deg, var(--gold), transparent);
  transition: height .6s var(--ease);
}
.occ:hover:not(.locked) {
  transform: translateY(-3px);
  border-color: var(--gold-dim);
  background: linear-gradient(170deg, rgba(201,168,106,.07), rgba(255,255,255,.008));
}
.occ:hover:not(.locked)::before { height: 100%; }
.occ.current { border-color: var(--gold-dim); background: rgba(201,168,106,.055); }
.occ.locked { opacity: .32; cursor: not-allowed; }

.occ-name {
  font-family: var(--font-serif); font-size: 18px; letter-spacing: .16em;
  margin-bottom: 12px; color: var(--paper);
}
.occ.current .occ-name { color: var(--gold-bright); }
.occ-meta { font-size: 12px; color: var(--mute); letter-spacing: .06em; line-height: 1.9; margin-bottom: 12px; }
.occ-meta em { color: var(--gold); font-style: normal; }
.occ-gain {
  font-size: 12.5px; color: var(--jade); letter-spacing: .04em; line-height: 1.8;
  padding-top: 12px; border-top: 1px solid rgba(255,255,255,.05);
}
.occ-cost { font-size: 11.5px; color: var(--cinnabar); opacity: .85; margin-top: 8px; letter-spacing: .05em; }
.occ-lock {
  font-size: 11px; color: var(--cinnabar); letter-spacing: .18em; margin-top: 12px;
  font-family: var(--font-serif);
}

/* ── 洞府 ── */
.cave-scroll {
  display: flex; align-items: center; gap: 56px; padding: 36px 0 52px;
  border-bottom: 1px solid rgba(255,255,255,.05); margin-bottom: 44px;
  flex-wrap: wrap;
}
.cave-big { text-align: center; min-width: 160px; }
.cave-big span {
  display: block; font-family: var(--font-serif); font-size: 96px; line-height: 1;
  background: linear-gradient(180deg, #f6ecd8, var(--gold) 70%, #7a6238);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 30px rgba(201,168,106,.18));
}
.cave-big em {
  display: block; margin-top: 14px; font-style: normal;
  font-family: var(--font-serif); font-size: 16px; letter-spacing: .3em; color: var(--mute);
}
.cave-eff { flex: 1; min-width: 220px; }
.cave-eff > b {
  display: inline-block; margin-bottom: 14px;
  font-family: var(--font-serif); font-size: 30px; font-weight: 400;
  color: var(--jade-bright); letter-spacing: .06em;
  text-shadow: 0 0 24px rgba(127,179,168,.25);
}

.upgrade { padding: 6px 0; }
.upgrade h3 {
  margin: 0 0 14px; font-family: var(--font-serif); font-weight: 400;
  font-size: 14px; letter-spacing: .42em; color: var(--gold);
}
.up-next { color: var(--mute); font-size: 13px; letter-spacing: .08em; margin: 0 0 20px; font-family: var(--font-serif); }
.cost-list { list-style: none; padding: 0; margin: 0 0 8px; }
.cost-list li {
  padding: 13px 0; font-size: 13px; letter-spacing: .06em;
  border-bottom: 1px solid rgba(255,255,255,.04); color: var(--mute);
  display: flex; justify-content: space-between;
}
.cost-list li.ok { color: var(--jade); }
.cost-list li.no { color: var(--cinnabar); }

/* ── 囊中 ── */
.bag-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.bag-item {
  padding: 24px 22px; border: 1px solid rgba(255,255,255,.06); border-radius: 2px;
  background: linear-gradient(170deg, rgba(255,255,255,.022), transparent);
  transition: border-color .5s var(--ease);
}
.bag-item:hover { border-color: rgba(255,255,255,.12); }
.bag-name {
  font-family: var(--font-serif); font-size: 17px; letter-spacing: .16em;
  color: var(--jade-bright); margin-bottom: 10px;
}
.bag-qty { font-size: 11px; letter-spacing: .22em; color: var(--mute); margin-bottom: 14px; font-family: var(--font-serif); }
.bag-desc { font-size: 12px; color: var(--mute); line-height: 1.9; margin-bottom: 18px; letter-spacing: .04em; }
.bag-item .btn-jade { width: 100%; padding: 10px; }

/* ── 红尘（副本）────────────────────────────────────── */
.dg-card {
  border: 1px solid rgba(255,255,255,.06); border-radius: 2px;
  background: linear-gradient(170deg, rgba(255,255,255,.022), transparent);
  padding: 26px 26px 22px; margin-bottom: 22px;
  transition: border-color .5s var(--ease);
}
.dg-card:hover:not(.locked) { border-color: var(--gold-dim); }
.dg-card.locked { opacity: .42; }

.dg-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.dg-card-name {
  font-family: var(--font-serif); font-size: 20px; letter-spacing: .18em;
  color: var(--gold-bright); margin-bottom: 10px;
}
.dg-card-desc { font-size: 12.5px; color: var(--mute); line-height: 1.9; letter-spacing: .04em; max-width: 46em; }
.dg-card-prog {
  font-family: var(--font-serif); font-size: 26px; color: var(--jade-bright);
  white-space: nowrap; line-height: 1;
}
.dg-card-prog small { font-size: 13px; color: var(--mute-2); }

.dg-endings { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.dg-end {
  font-family: var(--font-serif); font-size: 11.5px; letter-spacing: .12em;
  padding: 4px 12px; border-radius: 2px;
  border: 1px dashed rgba(255,255,255,.1); color: var(--mute-2);
}
.dg-end.cleared { border-style: solid; }
.dg-end.cleared.k-true   { color: #e8cf9a; border-color: rgba(232,207,154,.5); background: rgba(201,168,106,.08); }
.dg-end.cleared.k-good   { color: var(--jade-bright); border-color: rgba(127,179,168,.5); }
.dg-end.cleared.k-normal { color: var(--paper); border-color: rgba(255,255,255,.2); }
.dg-end.cleared.k-bad    { color: var(--cinnabar); border-color: rgba(184,80,63,.5); }
.dg-end.cleared.k-hidden { color: #b9a3d6; border-color: rgba(185,163,214,.5); }

.dg-roles { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.dg-role {
  flex: 1; min-width: 190px; text-align: left;
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07);
  border-radius: 2px; padding: 14px 16px; color: var(--paper);
  transition: all .5s var(--ease);
}
.dg-role:hover { border-color: var(--gold-dim); background: rgba(201,168,106,.06); }
.dg-role-name {
  display: block; font-family: var(--font-serif); font-size: 15px;
  letter-spacing: .2em; color: var(--gold); margin-bottom: 7px;
}
.dg-role-desc { display: block; font-size: 12px; color: var(--mute); line-height: 1.75; letter-spacing: .03em; }
.dg-lock { margin-top: 18px; font-family: var(--font-serif); font-size: 12px; letter-spacing: .2em; color: var(--cinnabar); }

/* 进行中的剧情 */
.dg-run { animation: fadeUp .6s var(--ease); }
.dg-run-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.dg-run-name { font-family: var(--font-serif); font-size: 19px; letter-spacing: .2em; color: var(--gold-bright); }
.dg-run-role { font-size: 12px; color: var(--mute); margin-top: 7px; letter-spacing: .12em; }

.dg-scene { padding: 34px 0 26px; border-bottom: 1px solid rgba(255,255,255,.04); }
.dg-scene-title {
  font-family: var(--font-serif); font-size: 22px; letter-spacing: .28em;
  color: var(--paper); margin-bottom: 20px;
}
.dg-scene-title::before { content: '「'; color: var(--gold-dim); }
.dg-scene-title::after { content: '」'; color: var(--gold-dim); }
.dg-scene-text {
  font-size: 14.5px; line-height: 2.3; letter-spacing: .06em;
  color: #c8d6e0; white-space: pre-wrap; max-width: 42em;
}

.dg-items { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 0 0; }
.dg-item {
  font-size: 12px; letter-spacing: .08em; color: var(--jade-bright);
  border: 1px solid rgba(127,179,168,.28); border-radius: 2px;
  padding: 4px 11px; background: rgba(127,179,168,.05);
}
.dg-item i { font-style: normal; color: var(--mute); margin-left: 6px; }

.dg-choices { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.dg-choice {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  text-align: left; padding: 17px 22px;
  background: linear-gradient(90deg, rgba(201,168,106,.05), transparent);
  border: 1px solid rgba(201,168,106,.2); border-radius: 2px;
  color: var(--paper); font-family: var(--font-serif); font-size: 14.5px;
  letter-spacing: .1em; transition: all .45s var(--ease);
}
.dg-choice:hover:not(:disabled) {
  border-color: var(--gold); background: linear-gradient(90deg, rgba(201,168,106,.16), transparent);
  padding-left: 30px;
}
.dg-choice.locked {
  background: transparent; border-color: rgba(255,255,255,.05);
  color: var(--mute-2); cursor: not-allowed;
}
.dg-choice-why { font-size: 11.5px; color: var(--cinnabar); letter-spacing: .1em; opacity: .8; }
.dg-steps {
  margin-top: 24px; font-family: var(--font-serif); font-size: 11px;
  letter-spacing: .3em; color: var(--mute-2); text-align: right;
}

@media (max-width: 820px) {
  .dg-scene-text { font-size: 14px; line-height: 2.1; }
  .dg-role { min-width: 100%; }
  .dg-card { padding: 20px 18px 18px; }
}

/* ── 根基（属性）────────────────────────────────────── */
/* v9.0 删掉「手动加点」后，.attr-points-bar / .attr-op / .attr-btn /
   .attr-added / .locked-hint 已无任何引用，v9.11 一并清除（死样式）。
   属性面板现在只有：分组标题 + 12 张只读属性卡 + 加成来源。 */
.attr-list { display: block; }

/* ── 灵根卡片（v9.13）────────────────────────────────── */
.root-box {
  margin-bottom: 26px; padding: 20px 22px 16px; border-radius: 2px;
  border: 1px solid var(--gold-faint);
  background:
    radial-gradient(ellipse 60% 130% at 0% 0%, rgba(201,168,106,.08), transparent 62%),
    rgba(255,255,255,.012);
}
.root-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.root-name { font-family: var(--font-serif); font-size: 21px; letter-spacing: .16em; color: var(--gold-bright); }
.root-tier {
  font-family: var(--font-serif); font-size: 12px; letter-spacing: .2em;
  color: var(--jade-bright); border: 1px solid rgba(127,179,168,.3);
  border-radius: 2px; padding: 2px 9px;
}
.root-pips { display: inline-flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.root-pip {
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14); background: transparent;
}
/* 境界够、可升但还没升 */
.root-pip.avail { border-color: var(--gold-dim); background: rgba(201,168,106,.18); }
.root-pip.on { background: var(--gold-bright); border-color: var(--gold-bright); box-shadow: 0 0 5px rgba(232,207,154,.5); }
.root-desc { font-size: 12.5px; color: var(--mute); line-height: 1.85; letter-spacing: .04em; }
.root-flavor { font-family: var(--font-serif); font-size: 11.5px; color: var(--mute-2); letter-spacing: .1em; margin-top: 6px; }
.root-body { margin: 14px 0 16px; display: flex; flex-direction: column; gap: 7px; }
.root-line { display: flex; gap: 14px; font-size: 12.5px; line-height: 1.8; }
.root-label { flex: 0 0 64px; color: var(--mute-2); letter-spacing: .14em; font-family: var(--font-serif); }
.root-val { color: var(--paper); letter-spacing: .03em; }
.root-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.root-actions button { padding: 9px 20px; }
.root-actions button:disabled {
  background: transparent; border-color: rgba(255,255,255,.06);
  color: var(--mute-2); cursor: not-allowed;
}
.root-why { font-size: 11.5px; color: var(--cinnabar); letter-spacing: .04em; margin-top: 9px; min-height: 0; }
.root-why:empty { display: none; }
.root-note { font-size: 11px; color: var(--mute-2); letter-spacing: .04em; line-height: 1.8; margin-top: 10px; }
.root-note b { color: var(--cinnabar); font-weight: 400; }

@media (max-width: 720px) {
  .root-actions { flex-direction: column; }
  .root-actions button { width: 100%; }
}

.attr-group-head {
  font-family: var(--font-serif); font-size: 13px; letter-spacing: .3em;
  color: var(--gold-dim); margin: 26px 0 14px;
  padding-left: 12px; border-left: 2px solid var(--gold-faint);
}
.attr-group-head:first-child { margin-top: 0; }

.attr-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px;
}
.attr-row {
  padding: 16px 16px 13px; border: 1px solid rgba(255,255,255,.06); border-radius: 2px;
  background: linear-gradient(170deg, rgba(255,255,255,.022), transparent);
  transition: border-color .5s var(--ease);
}
.attr-row:hover { border-color: var(--gold-dim); }
.attr-row.locked { opacity: .72; }
.attr-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.attr-name {
  font-family: var(--font-serif); font-size: 13.5px; letter-spacing: .16em;
  color: var(--mute); cursor: help;
}
.attr-value {
  font-family: var(--font-serif); font-size: 21px; color: var(--paper);
  letter-spacing: .02em; line-height: 1;
}
.attr-sub { font-size: 11px; color: var(--mute-2); letter-spacing: .04em; margin-bottom: 11px; }
.attr-pct { color: var(--jade); margin-left: 7px; }

@media (max-width: 820px) {
  .attr-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .attr-value { font-size: 17px; }
  .attr-name { font-size: 12px; }
}

.attr-sources { margin-top: 32px; }
.src-row {
  display: flex; gap: 16px; padding: 10px 0; font-size: 12.5px;
  border-bottom: 1px solid rgba(255,255,255,.04); color: var(--mute);
}
.src-name { color: var(--jade-bright); min-width: 96px; font-family: var(--font-serif); letter-spacing: .1em; }
.attr-tip { margin-top: 28px; font-size: 12px; }

/* ── 法器（装备）────────────────────────────────────── */
.eq-summary {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 14px 20px; margin-bottom: 24px;
  border: 1px solid var(--gold-faint); border-radius: 2px;
  background: linear-gradient(90deg, rgba(201,168,106,.06), transparent);
  font-family: var(--font-serif); font-size: 13px; letter-spacing: .1em;
}
.eq-summary b { color: var(--gold-bright); font-size: 17px; font-weight: 400; }
.eq-summary .dim { font-size: 11.5px; letter-spacing: .04em; }
.eq-stones { margin-left: auto; }
.eq-stones b { color: var(--jade-bright); }

/* 六部位 */
.eq-slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 8px;
}
.eq-slot {
  padding: 14px 15px; border: 1px dashed rgba(255,255,255,.1); border-radius: 2px;
  background: rgba(255,255,255,.012); min-height: 108px;
  display: flex; flex-direction: column;
  transition: border-color .5s var(--ease);
}
.eq-slot.filled { border-style: solid; background: linear-gradient(170deg, rgba(255,255,255,.03), transparent); }
.eq-slot.r-rare    { border-color: rgba(95,179,161,.45); }
.eq-slot.r-epic    { border-color: rgba(201,168,106,.5); }
.eq-slot.r-legendary { border-color: rgba(169,140,214,.55); }
/* v12.4：第 5 档「道器」——当前 0 件，纯占位（加了装备就自动生效） */
.eq-slot.r-mythic  { border-color: rgba(217,79,61,.6); }
.eq-slot-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.eq-slot-name { font-family: var(--font-serif); font-size: 12px; letter-spacing: .24em; color: var(--mute-2); }
.eq-item-name {
  font-family: var(--font-serif); font-size: 15px; letter-spacing: .12em;
  color: var(--paper); margin-bottom: 5px;
}
.eq-item-bonus { font-size: 11px; color: var(--jade); line-height: 1.7; margin-bottom: 10px; flex: 1; }
.eq-empty { font-size: 12px; color: var(--mute-2); letter-spacing: .2em; flex: 1; padding-top: 20px; }

/* 品质色 */
.eq-rarity {
  font-family: var(--font-serif); font-size: 10.5px; letter-spacing: .12em;
  padding: 1px 7px; border-radius: 2px; border: 1px solid currentColor;
}
.r-common    .eq-rarity, .eq-rarity.r-common    { color: #9aa7b3; }
.r-rare      .eq-rarity, .eq-rarity.r-rare      { color: #5fb3a1; }
.r-epic      .eq-rarity, .eq-rarity.r-epic      { color: #c9a86a; }
.r-legendary .eq-rarity, .eq-rarity.r-legendary { color: #a98cd6; }
.r-mythic    .eq-rarity, .eq-rarity.r-mythic    { color: #d94f3d; }   /* v12.4 道器（占位） */

/* 列表行 */
.eq-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.eq-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 13px 16px; border: 1px solid rgba(255,255,255,.06); border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.02), transparent);
  transition: border-color .5s var(--ease);
}
.eq-row:hover { border-color: var(--gold-dim); }
.eq-row.r-rare:hover    { border-color: rgba(95,179,161,.4); }
.eq-row.r-epic:hover    { border-color: rgba(201,168,106,.45); }
.eq-row.r-legendary:hover { border-color: rgba(169,140,214,.5); }
.eq-row.r-mythic:hover    { border-color: rgba(217,79,61,.55); }   /* v12.4 道器（占位） */
.eq-row.poor { opacity: .55; }
.eq-row-main { flex: 1; min-width: 0; }
.eq-row-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.eq-name { font-family: var(--font-serif); font-size: 14px; letter-spacing: .1em; color: var(--paper); }
.eq-owned { font-size: 10.5px; color: var(--jade); border: 1px solid rgba(127,179,168,.3); padding: 0 6px; }
.eq-row-bonus { font-size: 11.5px; color: var(--jade); letter-spacing: .03em; }
.eq-delta { color: var(--gold); margin-left: 8px; }
.eq-row-desc { font-size: 11px; margin-top: 3px; letter-spacing: .02em; }
.eq-row-ops { display: flex; gap: 8px; flex-shrink: 0; }
.eq-none { padding: 16px 4px; font-size: 12px; }
.btn-jade.small, .btn-ghost.small { padding: 6px 14px; font-size: 12px; letter-spacing: .1em; }
.btn-jade.small:disabled { opacity: .4; cursor: not-allowed; }

@media (max-width: 820px) {
  .eq-slots { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 9px; }
  .eq-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .eq-row-ops { justify-content: flex-end; }
}

/* ── 功法（技能）────────────────────────────── */
.skill-section-head {
  font-family: var(--font-serif); font-size: 13px; letter-spacing: .26em;
  color: var(--gold-dim); padding: 18px 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.05); margin-bottom: 16px;
}
.skill-empty { font-size: 12px; color: var(--mute); padding: 8px 0 16px; }
.skill-card {
  border: 1px solid rgba(255,255,255,.06); border-radius: 2px;
  background: linear-gradient(170deg, rgba(255,255,255,.022), transparent);
  padding: 16px 20px; margin-bottom: 12px;
}
.skill-card.passive { border-left: 2px solid var(--jade-dim); }
.skill-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.skill-name {
  font-family: var(--font-serif); font-size: 16px; letter-spacing: .16em;
  color: var(--gold-bright);
}
.skill-kind {
  font-size: 10.5px; letter-spacing: .14em; color: var(--mute);
  border: 1px solid rgba(255,255,255,.12); border-radius: 2px; padding: 1px 6px;
}
.skill-desc { font-size: 12.5px; color: var(--paper-dim); line-height: 1.85; }
.skill-meta { font-size: 11px; color: var(--mute); margin-top: 8px; letter-spacing: .06em; }

.skill-book {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; border: 1px solid rgba(255,255,255,.05);
  border-radius: 2px; margin-bottom: 8px;
}
.skill-book.off { opacity: .5; }
.book-main { min-width: 0; }
.book-name { font-family: var(--font-serif); font-size: 14px; color: var(--paper); margin-bottom: 4px; }
.book-name .dim { font-size: 10.5px; color: var(--mute); margin-left: 8px; }
.book-desc { font-size: 11.5px; color: var(--mute); }

/* 战斗中的技能按钮 */
.bt-skills {
  display: flex; flex-wrap: wrap; gap: 8px; width: 100%;
  margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.bt-skill {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 14px; border-radius: 2px;
  border: 1px solid rgba(169,140,214,.4);
  background: linear-gradient(170deg, rgba(169,140,214,.12), transparent);
  color: var(--paper); transition: all .4s var(--ease);
}
.bt-skill:hover:not(.off) { border-color: #a98cd6; background: rgba(169,140,214,.22); }
.bt-skill.off { opacity: .35; }
.sk-name { font-family: var(--font-serif); font-size: 12.5px; letter-spacing: .1em; }
.sk-cost { font-size: 9.5px; color: var(--mute); letter-spacing: .04em; }


/* ── 红尘：地图与房间分栏（v12.0.11）───────────────────────────────
   左：地图（你在哪）　右：房间里的人与物（这里有什么）。

   为什么分栏：原来纵向堆叠，「地图 → 场景描述 → 立像 → 地上物」，
   地图后面还要滚两三屏才看得到人，而人物立像是这次更新的主角。
   并排之后，「站在哪」和「面前有谁」在同一屏内。

   ⚠️ 两栏都是 `min-width: 0`：grid/flex 子项的默认 `min-width: auto`
      会被内容（72px × 6 列的地图）撑破，导致整页横向溢出。 */
.dg-stage {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-bottom: 6px;
}
/* 左栏：地图宽度基本固定（6 列 × 72px + 间隙）。用 `auto` 列让 grid 按内容定宽，
   同时给个下限，避免被右侧长文本往回挤。
   ⚠️ 不用 `min-inline-size`（那是逻辑属性，混用容易和 min-width 打架），统一 min-width。 */
.dg-stage-map { min-width: 452px; }
.dg-stage-side { min-width: 0; }

/* 右栏为空时（没人在场、地上也没东西）不要留一条空白列 */
.dg-stage-side:empty { display: none; }

/* 窄屏折回上下堆叠（地图在上，人与物在下） */
@media (max-width: 900px) {
  .dg-stage { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* 窄屏时左栏不再需要固定下限，否则会把页面顶出横向滚动条 */
  .dg-stage-map { min-width: 0; }
}

/* ── 红尘地图 ─────────────────────────────────── */
.dg-map { margin-bottom: 18px; }
.dg-grid {
  display: grid; gap: 4px; justify-content: start;
  /* ⚠️ v12.0.8：52 → 72。**格子里不再画地形符号**（`、，～`），
     格面全留给文字：你所在的格写「你」、可走的格写目的地名（「镇口大道」）。
     72px 刚好够四行大字 + 右上角方位词，又不会让整张图宽到撑破面板。 */
  --dg-cell: 72px;
}
.dg-cell {
  position: relative;          /* 方位角标 / 主文字 的定位基准 */
  width: var(--dg-cell); height: var(--dg-cell);
  display: flex; align-items: center; justify-content: center;
  padding: 2px 3px;            /* 给文字留边距，避免贴边被裁 */
  box-sizing: border-box;
  font-family: var(--font-serif);
  border: 1px solid rgba(255,255,255,.06); border-radius: 3px;
  color: var(--mute-2); background: rgba(255,255,255,.015);
  /* ⚠️ 只过渡 hover 会变的两项。整个网格**每秒重建一次**，
     若把所有属性都开 transition，每次重建都会重新起一轮动画 → 看起来在闪。
     border/background 的 hover 反馈用 0.18s 的短过渡就够。 */
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.dg-cell.void { border: none; background: transparent; }
.dg-cell.wall { color: rgba(255,255,255,.10); background: rgba(255,255,255,.03); }
.dg-cell.seen { color: var(--paper-dim); background: rgba(255,255,255,.045); }
.dg-cell.far { opacity: .35; }
.dg-cell.clickable { cursor: pointer; border-color: rgba(201,168,106,.32); }
.dg-cell.clickable:hover {
  border-color: var(--gold); background: rgba(201,168,106,.14);
  transform: translateY(-1px);
}
.dg-cell.here {
  color: var(--gold-bright); border-color: var(--gold);
  background: rgba(201,168,106,.20);
  box-shadow: 0 0 14px rgba(201,168,106,.30);
}

/* ── 格子里的主文字（v12.0.8）─────────────────────────────────────
   原来格心是地形符号（`、` `，` `～`），文字只能挤在底下 8px —— 两层都看不清。
   现在**字就是主角**：
     · 「你」= 你所在的格
     · 「镇口大道」= 相邻可走的目的地（自动折行，最多三行）
   字色按格子状态走（`currentColor` 继承），不另设颜色。 */
.dg-cell-main {
  display: block;
  width: 100%;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0;
  padding: 0 1px;
  box-sizing: border-box;
  text-align: center;
  color: inherit;
  /* 名字长短不一：「镇口大道」四字自动折成两行，
     用 break-all 保证中文逐字可断，max-height 兜住三行。 */
  word-break: break-all;
  max-height: calc(15px * 1.2 * 3);
  overflow: hidden;
  pointer-events: none;
}
/* 当前格就一个字，放得更大更清楚 */
.dg-cell.here .dg-cell-main {
  font-size: 22px;
  letter-spacing: 0;
  max-height: none;
}
/* 可走格的目的地名：字号略小于「你」，但保证**四个字一行**放得下 */
.dg-cell.clickable .dg-cell-main {
  font-size: 13.5px;
  color: var(--paper-dim);
}
.dg-cell.clickable:hover .dg-cell-main { color: var(--paper); }

/* ── 方位角标（v12.0.5 引入，v12.0.8 放大）────────────────────────
   方向按钮删除后，「往哪边走」只能靠这颗角标。字号从 9 → 11px。 */
.dg-cell-dir {
  position: absolute;
  top: 1px; right: 3px;
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--gold-dim);
  pointer-events: none;
}
.dg-cell.clickable:hover .dg-cell-dir { color: var(--gold-bright); }

/* 窄屏：格子缩小一点，主文字同步缩小（否则整张图横向撑破面板） */
@media (max-width: 640px) {
  .dg-grid { --dg-cell: 58px; }
  .dg-cell-main { font-size: 12px; }
  .dg-cell.clickable .dg-cell-main { font-size: 12px; }
  .dg-cell.here .dg-cell-main { font-size: 18px; }
}

/* 交互对象 */
.dg-objects { margin-bottom: 16px; }
.dg-obj {
  border: 1px solid rgba(255,255,255,.06); border-radius: 2px;
  background: linear-gradient(170deg, rgba(255,255,255,.022), transparent);
  padding: 14px 18px; margin-bottom: 10px;
}
.dg-obj-name {
  font-family: var(--font-serif); font-size: 15px; letter-spacing: .14em;
  color: var(--gold-bright); margin-bottom: 6px;
}
.dg-obj-desc { font-size: 12px; color: var(--mute); line-height: 1.8; margin-bottom: 12px; }
.dg-obj-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.dg-act {
  padding: 8px 16px; border-radius: 2px;
  border: 1px solid rgba(201,168,106,.22);
  background: linear-gradient(90deg, rgba(201,168,106,.05), transparent);
  color: var(--paper); font-family: var(--font-serif);
  font-size: 12.5px; letter-spacing: .08em;
  transition: all .4s var(--ease);
}
.dg-act:hover:not(:disabled) { border-color: var(--gold); background: rgba(201,168,106,.16); }
.dg-act:disabled { opacity: .38; cursor: default; }
.dg-act.done { opacity: .45; border-style: dashed; }

/* 地点选项 */
.dg-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.dg-option {
  text-align: left; padding: 13px 18px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
  color: var(--paper); font-family: var(--font-serif);
  font-size: 13.5px; letter-spacing: .06em;
  transition: all .4s var(--ease);
}
.dg-option:hover:not(:disabled) {
  border-color: var(--gold-dim); padding-left: 24px;
  background: rgba(201,168,106,.08);
}
.dg-option:disabled { opacity: .38; cursor: default; }
.dg-option.done { opacity: .45; border-style: dashed; }

/* 副本卡片 */
.dg-roles { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.dg-role {
  text-align: left; padding: 12px 16px; border-radius: 2px;
  border: 1px solid rgba(201,168,106,.2);
  background: linear-gradient(90deg, rgba(201,168,106,.05), transparent);
  transition: all .4s var(--ease);
}
.dg-role:hover { border-color: var(--gold); background: rgba(201,168,106,.14); padding-left: 22px; }
.dg-role-name {
  display: block; font-family: var(--font-serif); font-size: 14px;
  letter-spacing: .16em; color: var(--gold-bright); margin-bottom: 4px;
}
.dg-role-desc { display: block; font-size: 11.5px; color: var(--mute); }


.dg-role.self {
  border-color: rgba(169,140,214,.4);
  background: linear-gradient(90deg, rgba(169,140,214,.08), transparent);
}
.dg-role.self:hover { border-color: #a98cd6; background: rgba(169,140,214,.18); }
.dg-self-tag {
  font-style: normal; font-size: 9.5px; letter-spacing: .1em;
  color: #a98cd6; border: 1px solid rgba(169,140,214,.45);
  border-radius: 2px; padding: 0 5px; margin-left: 8px; vertical-align: middle;
}
.dg-role-stats {
  display: block; font-size: 10.5px; color: var(--mute-2);
  margin-top: 6px; letter-spacing: .02em;
}


/* ── 灵田（v11.9）──────────────────────────────── */
.farm-box {
  border: 1px solid rgba(255,255,255,.06); border-radius: 2px;
  background: linear-gradient(170deg, rgba(255,255,255,.022), transparent);
  padding: 20px 24px; margin-bottom: 24px;
}
.farm-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.farm-head > span:first-child {
  font-family: var(--font-serif); font-size: 16px; letter-spacing: .24em;
  color: var(--gold-bright);
}
.farm-sub { font-size: 11.5px; color: var(--mute); letter-spacing: .06em; }

.farm-guest-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin: 12px 0 4px; padding: 8px 12px;
  border-left: 2px solid var(--cinnabar); background: rgba(255,255,255,.02);
  font-size: 12px; color: var(--mute);
}

.farm-plots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px; padding: 16px 0 6px;
}
.farm-plot {
  min-height: 78px; padding: 12px; border: 1px solid rgba(255,255,255,.06);
  border-radius: 2px; display: flex; flex-direction: column;
  justify-content: space-between; gap: 8px;
}
.farm-plot.empty { opacity: .38; border-style: dashed; }
.farm-plot.ready { border-color: var(--gold-dim); }
.farm-plot.clickable { cursor: pointer; transition: border-color .3s var(--ease); }
.farm-plot.clickable:hover { border-color: var(--gold-bright); }
.fp-name {
  font-family: var(--font-serif); font-size: 13px; color: var(--paper);
  letter-spacing: .1em;
}
.fp-bar {
  height: 3px; background: rgba(255,255,255,.07); border-radius: 2px; overflow: hidden;
}
/* 灵田进度条（v11.9 新增的地块制）：按**真实时间**成熟（10 分~4 小时），
   和营生条一样属于"随时间匀速前进"的条 —— 用 linear 匀速，别用缓动。
   详见上方 .ink-bar 的注释（v11.7 同一套结论）。 */
.fp-bar > i {
  display: block; height: 100%; background: var(--jade);
  transition: width .9s linear;
  will-change: width;
}
.fp-status { font-size: 10.5px; color: var(--mute); letter-spacing: .06em; }
.fp-status.ripe { color: var(--gold-bright); }
.farm-empty { font-size: 12px; color: var(--mute); padding: 8px 0; }
/* 开垦区（v11.11）：地块下方一条，说明下一块的代价 */
.farm-expand-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0 4px; margin-bottom: 4px;
}
.farm-expand-info { font-size: 11.5px; color: var(--mute); letter-spacing: .04em; }
/* 用途标签与肥料（v11.13） */
.fp-kind, .fs-kind {
  font-size: 9.5px; color: var(--gold-dim); margin-left: 6px;
  letter-spacing: .08em; opacity: .85;
}
.fp-fert { color: var(--jade); font-size: 9.5px; }
.farm-fert-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0;
}
.farm-section-head {
  font-family: var(--font-serif); font-size: 12px; letter-spacing: .2em;
  color: var(--gold-dim); margin: 16px 0 8px;
}
.farm-seed-row, .farm-visitor {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border: 1px solid rgba(255,255,255,.05); border-radius: 2px;
  margin-bottom: 6px;
}
.farm-visitor.has-ready { border-color: rgba(200,170,90,.28); }
.fs-name, .fv-name {
  font-family: var(--font-serif); font-size: 13px; color: var(--paper);
  letter-spacing: .08em; margin-right: 8px;
}
.farm-seed-row .dim, .farm-visitor .dim { font-size: 10.5px; color: var(--mute); }
.farm-stolen-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11px; color: var(--mute); padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.fs-who { color: var(--cinnabar); letter-spacing: .06em; }

/* ── 百艺（加工玩法）────────────────────────────── */
.craft-card {
  border: 1px solid rgba(255,255,255,.06); border-radius: 2px;
  background: linear-gradient(170deg, rgba(255,255,255,.022), transparent);
  padding: 22px 24px 18px; margin-bottom: 18px;
  transition: border-color .5s var(--ease);
}
.craft-card:hover:not(.locked) { border-color: var(--gold-dim); }
.craft-card.locked { opacity: .45; }
.craft-card-head { margin-bottom: 16px; }
.craft-card-name {
  font-family: var(--font-serif); font-size: 18px; letter-spacing: .22em;
  color: var(--gold-bright); margin-bottom: 8px;
}
.craft-card-desc { font-size: 12.5px; color: var(--mute); line-height: 1.85; }
.craft-lock { font-family: var(--font-serif); font-size: 12px; letter-spacing: .2em; color: var(--cinnabar); }
.craft-recipes { display: flex; flex-direction: column; gap: 8px; }
.craft-recipe {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 14px; border: 1px solid rgba(255,255,255,.05); border-radius: 2px;
}
.craft-recipe.poor { opacity: .5; }
.craft-recipe-main { min-width: 0; }
.craft-recipe-name {
  font-family: var(--font-serif); font-size: 14px; letter-spacing: .1em;
  color: var(--paper); margin-bottom: 4px;
}
.craft-recipe-name .dim { font-size: 10.5px; margin-left: 8px; letter-spacing: .04em; }
.craft-recipe-io { font-size: 11.5px; color: var(--mute); letter-spacing: .02em; }
.craft-recipe-io .ok { color: var(--jade); }
.craft-recipe-io .lack { color: var(--cinnabar); }

/* 加工中 */
.craft-run { animation: fadeUp .5s var(--ease); }
.craft-run-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.craft-run-name { font-family: var(--font-serif); font-size: 17px; letter-spacing: .16em; color: var(--gold-bright); }
.craft-step { font-size: 12px; color: var(--mute); margin-top: 6px; letter-spacing: .12em; }
.craft-question {
  font-family: var(--font-serif); font-size: 19px; letter-spacing: .12em;
  color: var(--paper); line-height: 1.9;
  padding: 34px 0 26px;
}
.craft-options { display: flex; flex-direction: column; gap: 12px; }
.craft-option {
  text-align: left; padding: 17px 22px;
  background: linear-gradient(90deg, rgba(201,168,106,.05), transparent);
  border: 1px solid rgba(201,168,106,.2); border-radius: 2px;
  color: var(--paper); font-family: var(--font-serif); font-size: 15px;
  letter-spacing: .1em; transition: all .45s var(--ease);
}
.craft-option:hover {
  border-color: var(--gold); background: linear-gradient(90deg, rgba(201,168,106,.16), transparent);
  padding-left: 30px;
}

/* ── 火候条（v13.24：烹饪）─────────────────────────────
   ⚠️ 条上的几何（目标区位置/宽度）全部由**服务端**给，这里只负责画。
      指针位置由 requestAnimationFrame 本地推进 —— 那只影响"看起来在哪"，
      判定在服务端按同样的三角波公式重算，前端改 JS 也改不了结果。 */
.craft-fire { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 30px 0 6px; }
.fire-track {
  position: relative; width: 100%; max-width: 520px; height: 26px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(201,168,106,.28); border-radius: 2px;
  overflow: hidden;
}
.fire-zone-partial, .fire-zone-perfect {
  position: absolute; top: 0; bottom: 0;
}
.fire-zone-partial { background: rgba(201,168,106,.16); }
.fire-zone-perfect {
  background: linear-gradient(180deg, rgba(255,226,150,.55), rgba(201,168,106,.42));
  box-shadow: 0 0 12px rgba(255,214,130,.5);
}
.fire-needle {
  position: absolute; top: -4px; bottom: -4px; width: 2px; left: 0;
  background: var(--cinnabar); box-shadow: 0 0 8px var(--cinnabar);
  will-change: transform;
}
.fire-hint { font-size: 13px; color: var(--mute); letter-spacing: .12em; }
.fire-hint b { color: var(--gold-bright); font-weight: normal; }
.fire-marks { display: flex; gap: 10px; min-height: 20px; }
.fire-mark { font-size: 13px; letter-spacing: .1em; }
.fire-mark.perfect { color: var(--gold-bright); }
.fire-mark.partial { color: var(--mute); }
.fire-mark.fail { color: var(--cinnabar); }

/* ── 战斗 ───────────────────────────────────────────── */
.bt-wrap { animation: fadeUp .5s var(--ease); }
.bt-bars {
  display: flex; align-items: center; gap: 24px;
  padding: 28px 0 22px; border-bottom: 1px solid rgba(255,255,255,.05);
}
.bt-side { flex: 1; min-width: 0; }
.bt-side.enemy { text-align: right; }
.bt-name {
  font-family: var(--font-serif); font-size: 16px; letter-spacing: .2em;
  color: var(--paper); margin-bottom: 10px;
}
.bt-side.enemy .bt-name { color: var(--cinnabar); }
.bt-vs {
  font-family: var(--font-serif); font-size: 22px; color: var(--gold-dim);
  letter-spacing: .1em; flex: 0 0 auto; padding: 0 8px;
}

.bt-hpbar {
  height: 10px; background: #0d151d; border: 1px solid var(--line);
  border-radius: 2px; overflow: hidden;
}
.bt-hpbar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #3f8fa3, #6ee7a0);
  transition: width .5s var(--ease);
}
.bt-hpbar.enemy i { background: linear-gradient(90deg, #8e3a2c, #ff8a8a); }
.bt-hptext {
  font-size: 11px; color: var(--mute); margin: 6px 0 10px; letter-spacing: .06em;
  font-family: var(--font-serif);
}
/* 灵力条：比气血细一点，紫蓝调，和气血/行动条区分开 */
.bt-manabar {
  height: 5px; background: #0d151d; border: 1px solid var(--line);
  border-radius: 2px; overflow: hidden; margin-top: 8px;
}
.bt-manabar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #4a3f8f, #a98cd6);
  transition: width .5s var(--ease);
}
.bt-manabar + .bt-hptext { margin: 4px 0 10px; }

/* 行动条（ATB）：细长条，满格即出手
   ⚠️ 这里**不要加 transition**：条的进度由 JS 用 requestAnimationFrame 逐帧插值
   （服务端每秒才推一次数据，只靠 CSS 过渡会变成"走一段停一段"的顿挫感）。
   见 web/battle-anim.js。 */
.atb { height: 3px; background: rgba(255,255,255,.05); border-radius: 2px; overflow: hidden; }
.atb i {
  display: block; height: 100%; width: 0;
  background: var(--gold); box-shadow: 0 0 8px rgba(201,168,106,.6);
  transition: none;
  will-change: width;
}
.bt-side.enemy .atb i { background: var(--cinnabar); box-shadow: 0 0 8px rgba(184,80,63,.6); }
/* 条满：轻微呼吸光，提示"该你出手了" */
.atb i.full { box-shadow: 0 0 14px rgba(201,168,106,.95); }
.bt-side.enemy .atb i.full { box-shadow: 0 0 14px rgba(184,80,63,.95); }

.bt-log {
  max-height: 200px; overflow-y: auto; padding: 18px 4px;
  font-size: 12.5px; line-height: 2; letter-spacing: .04em;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.bt-log-line { color: var(--mute); animation: logIn .35s var(--ease); }
.bt-log-line.t-good { color: var(--jade); }
.bt-log-line.t-bad { color: var(--cinnabar); }
.bt-log-line.t-warn { color: var(--warn); }
.bt-log-line.t-info { color: var(--paper); }
.bt-log-line.t-hint { color: var(--mute-2); }
.bt-log-line.t-item { color: var(--jade-bright); }
.bt-log-line.t-title { color: var(--gold); }
.bt-log-line.t-gold { color: var(--gold-bright); }

.bt-actions { display: flex; gap: 12px; flex-wrap: wrap; padding: 24px 0 0; }
.bt-act {
  flex: 1; min-width: 110px; padding: 16px 10px;
  font-family: var(--font-serif); font-size: 14px; letter-spacing: .3em; text-indent: .3em;
  background: rgba(201,168,106,.07); border: 1px solid rgba(201,168,106,.24);
  border-radius: 2px; color: var(--gold-bright);
  transition: all .45s var(--ease);
}
.bt-act:hover { background: rgba(201,168,106,.18); border-color: var(--gold); }
.bt-act.auto { background: rgba(127,179,168,.08); border-color: rgba(127,179,168,.3); color: var(--jade-bright); }
.bt-act.auto:hover { background: rgba(127,179,168,.2); }
.bt-act.flee { background: transparent; border-color: rgba(255,255,255,.1); color: var(--mute); }
/* v11.0：行动条未满时「攻击」不可用（条满才有出手机会） */
.bt-act.off, .bt-act:disabled {
  opacity: .38; cursor: not-allowed;
  background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.08); color: var(--mute);
}
.bt-act.off:hover, .bt-act:disabled:hover { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.08); }
.bt-round {
  text-align: right; margin-top: 20px; font-family: var(--font-serif);
  font-size: 11px; letter-spacing: .3em; color: var(--mute-2);
}

@media (max-width: 820px) {
  .bt-bars { gap: 12px; }
  .bt-act { min-width: 0; padding: 13px 6px; font-size: 12.5px; letter-spacing: .16em; }
  .bt-log { max-height: 160px; font-size: 12px; }
  .bt-side .bt-name { font-size: 14px; }
}

/* ── 打坐 ── */
.meditate { max-width: 440px; margin: 30px auto 0; text-align: center; }
/* 太极：缓慢自转 */
.bagua {
  width: 132px; height: 132px; margin: 0 auto 36px; border-radius: 50%;
  border: 1px solid var(--gold-faint); display: grid; place-items: center;
  animation: rotate 44s linear infinite;
  box-shadow: 0 0 44px rgba(201,168,106,.07), inset 0 0 30px rgba(201,168,106,.05);
}
@keyframes rotate { to { transform: rotate(360deg) } }
.bagua-inner {
  position: relative; width: 84px; height: 84px; border-radius: 50%;
  background: linear-gradient(90deg, var(--ink-3) 50%, var(--paper) 50%);
  display: flex; flex-direction: column;
}
.yy { flex: 1; border-radius: 50%; display: block; }
.yy.yang { background: var(--paper); width: 100%; height: 50%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.yy.yin  { background: var(--ink-3); width: 100%; height: 50%; border-radius: 0 0 50% 50% / 0 0 100% 100%; }

.meditate h2 {
  font-family: var(--font-serif); font-weight: 400; font-size: 20px;
  letter-spacing: .4em; text-indent: .4em; color: var(--gold-bright); margin: 0 0 16px;
}
.streak {
  font-family: var(--font-serif); font-size: 13px; letter-spacing: .16em;
  color: var(--mute); margin: 26px 0 0;
}
.streak b { color: var(--gold); font-weight: 400; font-size: 20px; }

/* ── 宗门 ───────────────────────────────────────────── */
/* 未入宗门 / 面板数据未到时的提示块 */
.sect-hint {
  display: flex; align-items: center; gap: 24px;
  padding: 30px 24px; margin-bottom: 34px;
  border: 1px dashed rgba(255,255,255,.055); border-radius: 2px;
}
.sect-hint .brush {
  font-family: var(--font-serif); font-size: 34px; color: rgba(201,168,106,.16);
  writing-mode: vertical-rl; line-height: 1;
}
.sect-hint p {
  margin: 0; font-family: var(--font-serif); font-size: 14px;
  letter-spacing: .18em; color: var(--mute); line-height: 2;
}
.sect-hint small { font-size: 11.5px; color: var(--mute-2); letter-spacing: .08em; }

/* 当前宗门（贡献） */
.sect-cur {
  border: 1px solid var(--gold-faint); border-radius: 2px;
  background: linear-gradient(180deg, rgba(201,168,106,.045), rgba(201,168,106,.008));
  padding: 26px 30px 22px; margin-bottom: 34px;
}
.sect-cur-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 22px; flex-wrap: wrap; }
.sect-cur-name {
  font-family: var(--font-serif); font-size: 24px; letter-spacing: .18em;
  color: var(--gold-bright); margin-bottom: 10px;
}
.sect-cur-motto { font-family: var(--font-serif); font-size: 12.5px; letter-spacing: .1em; color: var(--mute); }
.sect-cur-desc {
  font-size: 12.5px; color: var(--mute); line-height: 1.9; letter-spacing: .04em;
  margin-top: 18px; white-space: pre-wrap; max-width: 46em;
}
/* v12.7：职位体系删除，.sect-cur-rank / .sect-rank-name 两条样式随之删除 */
.sect-cur-nums {
  display: flex; align-items: baseline; gap: 26px; flex-wrap: wrap;
  font-family: var(--font-serif); font-size: 12.5px; letter-spacing: .1em;
  color: var(--mute); margin-bottom: 12px;
}
.sect-cur-nums b { color: var(--gold-bright); font-size: 17px; font-weight: 400; }
.sect-cur-foot { margin-top: 14px; }

/* 风格 / 状态小标签 */
.sect-style {
  font-family: var(--font-sans); font-size: 10.5px; letter-spacing: .14em;
  color: var(--mute); border: 1px solid rgba(255,255,255,.12);
  border-radius: 2px; padding: 1px 7px; margin-left: 10px; vertical-align: middle;
}
.sect-tag {
  font-family: var(--font-serif); font-size: 10.5px; letter-spacing: .12em;
  border: 1px solid currentColor; border-radius: 2px;
  padding: 1px 7px; margin-left: 8px; vertical-align: middle;
}
.sect-tag.on { color: var(--jade); }
.sect-tag.off { color: var(--cinnabar); }

/* 门中功法：换门后失效 → 灰态 */
.skill-card.off { opacity: .5; border-style: dashed; }
.sect-op { margin-top: 12px; }

/* 宗门任务 */
.sect-task {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 18px; margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,.06); border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.02), transparent);
}
.sect-task.done { opacity: .5; border-style: dashed; }
.sect-task.off:not(.done) { opacity: .72; }
.sect-task-main { flex: 1; min-width: 0; }
.sect-task-name {
  font-family: var(--font-serif); font-size: 15px; letter-spacing: .14em;
  color: var(--paper); margin-bottom: 5px;
}
.sect-task-name .dim { font-size: 10.5px; margin-left: 8px; letter-spacing: .06em; }
.sect-task-desc { font-size: 11.5px; color: var(--mute); line-height: 1.75; margin-bottom: 6px; }
.sect-task-req { font-size: 11.5px; color: var(--mute); letter-spacing: .02em; }
.sect-task-req .ok { color: var(--jade); }
.sect-task-req .lack { color: var(--cinnabar); }
.sect-task-reward { font-size: 11.5px; color: var(--gold); letter-spacing: .04em; margin-top: 6px; }
.sect-task .btn-jade.small { flex-shrink: 0; max-width: 16em; }

/* 宗门日常 */
.sect-daily {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 20px; margin-bottom: 10px;
  border: 1px solid var(--gold-faint); border-radius: 2px;
  background: linear-gradient(90deg, rgba(201,168,106,.06), transparent);
}
.sect-daily.done { opacity: .5; }
.sect-daily-name {
  font-family: var(--font-serif); font-size: 15px; letter-spacing: .16em;
  color: var(--gold-bright); margin-bottom: 6px;
}
.sect-daily-name .dim { font-size: 10.5px; margin-left: 8px; letter-spacing: .06em; }
.sect-daily-reward { font-size: 11.5px; color: var(--mute); letter-spacing: .04em; }
.sect-daily-bonus { color: var(--jade); margin-left: 8px; }
.sect-daily .btn-jade.small { flex-shrink: 0; }

/* v12.6 连签档位（第 3 / 7 天给材料） */
.sect-streak {
  display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.sect-streak-cell {
  flex: 1; min-width: 150px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 2px;
  background: rgba(255,255,255,.015);
}
.sect-streak-cell.done { opacity: .45; }
.sect-streak-day {
  font-family: var(--font-serif); font-size: 12px; letter-spacing: .14em;
  color: var(--gold-bright);
}
.sect-streak-items { font-size: 11.5px; color: var(--mute); }
.sect-streak-flag {
  font-size: 10px; letter-spacing: .18em; color: var(--jade);
}
.sect-streak-cell.done .sect-streak-flag { color: var(--mute-2); }

/* v12.6 宗门商店 */
.sect-shop-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 12px 18px; margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,.06); border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.02), transparent);
  transition: border-color .4s var(--ease);
}
.sect-shop-row:hover { border-color: var(--gold-dim); }
.sect-shop-row.off { opacity: .5; }
.sect-shop-name {
  font-family: var(--font-serif); font-size: 14px; letter-spacing: .1em;
  color: var(--paper); margin-bottom: 5px;
}
.sect-shop-name .dim { font-size: 10px; margin-left: 10px; letter-spacing: .14em; }
.sect-shop-meta { font-size: 11px; color: var(--mute); letter-spacing: .04em; }
.sect-shop-why { color: var(--cinnabar); margin-left: 10px; }
.sect-shop-row .btn-ghost.small { flex-shrink: 0; }

/* ═══════════════ 门派 BOSS（v12.8）═══════════════ */
.boss-card {
  border: 1px solid var(--gold-faint); border-radius: 2px;
  background: linear-gradient(180deg, rgba(201,168,106,.05), rgba(201,168,106,.008));
  padding: 24px 28px 20px; margin-bottom: 30px;
}
.boss-top { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.boss-name {
  font-family: var(--font-serif); font-size: 21px; letter-spacing: .18em;
  color: var(--gold-bright);
}
.boss-sect {
  font-size: 11.5px; letter-spacing: .12em; color: var(--mute-2);
  margin-left: 14px; font-family: var(--font-serif);
}
.boss-sub { font-size: 11.5px; color: var(--mute-2); letter-spacing: .08em; }
.boss-desc {
  font-size: 12.5px; color: var(--mute); line-height: 1.9; letter-spacing: .04em;
  margin-top: 14px; max-width: 46em;
}
.boss-stats {
  display: flex; gap: 26px; flex-wrap: wrap; margin: 18px 0 12px;
  font-family: var(--font-serif); font-size: 12.5px; letter-spacing: .08em; color: var(--mute);
}
.boss-stats b { color: var(--gold-bright); font-size: 15px; font-weight: 400; }
.boss-bar-label { font-size: 11.5px; color: var(--mute-2); letter-spacing: .06em; margin-bottom: 6px; }
.boss-reward {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.05);
}
.boss-reward-k { font-size: 11.5px; color: var(--mute-2); letter-spacing: .12em; }
.boss-reward-v { font-size: 12.5px; color: var(--gold); letter-spacing: .04em; }
.boss-op { margin-top: 14px; }
.boss-op .btn-jade.small, .boss-op .btn-ghost.small { max-width: 30em; }
.boss-claimed { margin-top: 14px; font-size: 12px; color: var(--mute-2); letter-spacing: .06em; }
.boss-ranks { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.05); }
.boss-ranks-head { font-size: 11.5px; color: var(--mute-2); letter-spacing: .14em; margin-bottom: 10px; }
.boss-rank-row {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 12.5px; color: var(--mute); padding: 5px 0;
}
.boss-rank-row.me { color: var(--gold-bright); }
.boss-rank-no { width: 1.8em; color: var(--mute-2); font-family: var(--font-serif); }
.boss-rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boss-rank-dmg { font-family: var(--font-serif); letter-spacing: .06em; }

/* 战斗中的 BOSS 界面：复用 .bt-*（与红尘/逐境台同一套），这里只补 BOSS 专属的几条 */
.boss-fight-tag {
  font-size: 11px; letter-spacing: .18em; color: var(--cinnabar);
  margin-left: 14px; font-family: var(--font-serif);
}
.boss-dmg-now { margin-top: 12px; font-size: 12px; color: var(--gold); letter-spacing: .06em; }
.boss-battle { margin-top: 8px; }
.boss-battle-stats {
  display: flex; gap: 32px; flex-wrap: wrap;
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.05);
}
.boss-bstats { flex: 1; min-width: 180px; font-size: 11.5px; color: var(--mute); }
.boss-bstats.enemy { text-align: right; }
.boss-bstat { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.boss-bstats.enemy .boss-bstat { flex-direction: row-reverse; }
.boss-bstat b { color: var(--paper); font-weight: 400; font-family: var(--font-serif); }

/* 宗门卡片（未加入＝拜入入口；已加入＝换门入口） */
.sect-card {
  border: 1px solid rgba(255,255,255,.06); border-radius: 2px;
  background: linear-gradient(170deg, rgba(255,255,255,.022), transparent);
  padding: 22px 24px 18px; margin-bottom: 16px;
  transition: border-color .5s var(--ease);
}
.sect-card:hover:not(.off) { border-color: var(--gold-dim); }
.sect-card.cur { border-color: var(--gold-dim); background: rgba(201,168,106,.055); }
.sect-card.off { opacity: .55; }
.sect-card-name {
  font-family: var(--font-serif); font-size: 19px; letter-spacing: .2em;
  color: var(--gold-bright); margin-bottom: 8px;
}
.sect-card-motto { font-family: var(--font-serif); font-size: 12px; letter-spacing: .1em; color: var(--mute); }
.sect-card-desc {
  font-size: 12.5px; color: var(--mute); line-height: 1.9; letter-spacing: .04em;
  margin-top: 14px; white-space: pre-wrap; max-width: 46em;
}
.sect-card-mats { font-size: 11.5px; color: var(--mute-2); letter-spacing: .04em; margin-top: 12px; }
.sect-card-prog {
  font-family: var(--font-serif); font-size: 11.5px; letter-spacing: .08em;
  color: var(--mute); margin-top: 8px;
}
.sect-card .btn-jade.small { margin-top: 16px; max-width: 22em; }

@media (max-width: 820px) {
  .sect-task, .sect-daily, .sect-shop-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .sect-task .btn-jade.small, .sect-card .btn-jade.small,
  .sect-shop-row .btn-ghost.small { max-width: none; width: 100%; }
  .sect-streak-cell { min-width: 0; }
}

/* ── 右侧动静 ── */
#logwrap {
  width: 300px; flex: 0 0 300px; display: flex; flex-direction: column;
  border-left: 1px solid rgba(255,255,255,.04); min-height: 0;
}
.log-title {
  padding: 24px 26px 18px; font-family: var(--font-serif); font-size: 12px;
  letter-spacing: .5em; color: var(--gold); border-bottom: 1px solid rgba(255,255,255,.04);
}
#log {
  flex: 1; overflow-y: auto; padding: 18px 26px 40px;
  font-size: 12.5px; line-height: 2.1; letter-spacing: .04em;
}
#log::-webkit-scrollbar { width: 2px; }
#log::-webkit-scrollbar-thumb { background: rgba(201,168,106,.16); }
.log-line { color: var(--mute); animation: logIn .5s var(--ease); }
@keyframes logIn { from { opacity: 0; transform: translateX(6px) } to { opacity: 1; transform: none } }
.log-line .t-title { color: var(--gold); font-family: var(--font-serif); letter-spacing: .14em; }
.log-line .t-good { color: var(--jade); }
.log-line .t-warn { color: var(--gold); }
.log-line .t-bad { color: var(--cinnabar); }
.log-line .t-gold { color: var(--gold-bright); }
.log-line .t-item { color: var(--jade-bright); }
.log-line .t-realm { color: #b9a3d6; }
.log-line .t-info { color: var(--paper); }
.log-line .t-hint { color: var(--mute-2); }

/* ── toast ── */
#toast {
  position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%) translateY(12px);
  padding: 13px 30px; border-radius: 2px;
  background: rgba(10,10,12,.94); border: 1px solid rgba(201,168,106,.3);
  color: var(--gold-bright); font-family: var(--font-serif); font-size: 13px;
  letter-spacing: .14em; opacity: 0; pointer-events: none;
  transition: all .5s var(--ease); z-index: 80; backdrop-filter: blur(10px);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 加载遮罩（重连时） */
#reconnect {
  position: fixed; inset: 0; z-index: 90; display: flex;
  align-items: center; justify-content: center;
  background: rgba(10,10,12,.9); backdrop-filter: blur(6px);
  font-family: var(--font-serif); letter-spacing: .4em; color: var(--mute);
}

/* ═══════════ 窄屏 ═══════════ */
@media (max-width: 1100px) {
  #hud { grid-template-columns: 1fr auto; gap: 22px; padding: 18px 24px; }
  .hud-center { grid-column: 1 / -1; order: 3; }
  .hud-right { gap: 20px; }
  #logwrap { width: 252px; flex-basis: 252px; }
  #panel { padding: 32px 30px 50px; }
}

@media (max-width: 820px) {
  html, body { overflow: auto; }
  #game { height: auto; min-height: 100%; }
  #body { flex-direction: column; }
  #nav {
    order: 3; width: 100%; flex: 0 0 auto; flex-direction: row;
    border-right: none; border-top: 1px solid var(--gold-faint);
    padding: 0; justify-content: space-around;
    position: sticky; bottom: 0; background: rgba(10,10,12,.96);
    backdrop-filter: blur(14px); z-index: 20;
  }
  .nav-cat { flex: 1; padding: 17px 0; font-size: 14px; }
  .nav-cat.active::before { left: 50%; top: auto; bottom: 0; transform: translateX(-50%); width: 22px; height: 1px; }
  /* #panel 被包进 #main-col，order 由 #main-col 接管 */
  #main-col { order: 2; }
  .subtabs { padding: 0 20px; }
  .subtab { padding: 14px 11px 13px; font-size: 13px; letter-spacing: .16em; text-indent: .16em; }
  #panel { padding: 22px 20px 44px; }
  #logwrap { order: 1; width: 100%; flex: 0 0 24vh; border-left: none; border-bottom: 1px solid rgba(255,255,255,.04); }
  .log-title { padding: 14px 20px 10px; }
  #log { padding: 10px 20px 20px; font-size: 12px; line-height: 1.95; }

  .hud-right { display: none; }
  .title { font-size: 32px; letter-spacing: .28em; }
  .seal-wrap { padding: 48px 26px 30px; }
  .cave-big span { font-size: 68px; }
  .occ-grid { grid-template-columns: 1fr; }
  .aw-inner { padding: 22px 20px; }
  .aw-name { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   天道赐福（v9.9）
   结构与 web/fortune.js 对应：head / 仙缘条 / 加速区 / 四档列表。
   全部沿用上面的设计令牌（金色＝赐福，青玉＝可操作）。
   ══════════════════════════════════════════════════════════════════════════ */
.fortune-wrap { max-width: 880px; }

/* ── 当前档位 ── */
.fortune-head {
  display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start;
  padding: 26px 26px 22px; border-radius: 2px;
  background:
    radial-gradient(ellipse 70% 120% at 0% 0%, rgba(201,168,106,.10), transparent 62%),
    linear-gradient(170deg, rgba(255,255,255,.022), rgba(255,255,255,.006));
  border: 1px solid rgba(255,255,255,.07);
}
.fortune-head-main { flex: 1 1 260px; min-width: 0; }
.fortune-tier-name {
  font-family: var(--font-serif); font-size: 25px; letter-spacing: .18em;
  color: var(--gold-bright); margin-bottom: 10px;
}
.fortune-tier-desc { font-size: 12.5px; color: var(--mute); line-height: 1.9; letter-spacing: .04em; }
.fortune-stats { display: flex; gap: 14px; flex: 0 0 auto; }
.fortune-stat {
  min-width: 92px; padding: 12px 14px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.012);
}
.fortune-stat-label { font-size: 10.5px; letter-spacing: .2em; color: var(--mute-2); margin-bottom: 8px; }
.fortune-stat-value { font-family: var(--font-serif); font-size: 17px; color: var(--paper); }

/* ── 仙缘 ── */
.fortune-xy-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin: 16px 0; padding: 14px 20px; border-radius: 2px;
  border: 1px solid var(--gold-faint); background: rgba(201,168,106,.035);
}
.fortune-xy-label { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-serif); }
.fortune-xy-name { font-size: 12px; letter-spacing: .34em; color: var(--mute); }
.fortune-xy-value { font-size: 26px; color: var(--gold-bright); letter-spacing: .04em; }
.fortune-claim-btn { min-width: 200px; }
.fortune-claim-btn:disabled {
  background: transparent; border-color: rgba(255,255,255,.06);
  color: var(--mute-2); cursor: not-allowed;
}

/* ── 加速 ── */
.fortune-sec-title {
  margin: 26px 0 12px; font-family: var(--font-serif); font-size: 13px;
  letter-spacing: .3em; text-indent: .3em; color: var(--gold-dim);
}
.fortune-speedup {
  padding: 18px 20px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.012);
}
.fortune-speedup .fortune-sec-title { margin-top: 0; }
.fortune-speedup-hint {
  font-size: 12px; color: var(--mute); line-height: 1.9;
  letter-spacing: .04em; margin-bottom: 14px;
}
.fortune-speedup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fortune-speedup-input {
  width: 120px; padding: 9px 12px; border-radius: 2px;
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1);
  color: var(--paper); font-family: var(--font-serif); font-size: 15px;
  letter-spacing: .08em;
}
.fortune-speedup-input:focus { outline: none; border-color: var(--gold-dim); }
.fortune-speedup-row button { padding: 9px 22px; }
.fortune-speedup-row button:disabled {
  background: transparent; border-color: rgba(255,255,255,.05);
  color: var(--mute-2); cursor: not-allowed;
}

/* ── 四档列表 ── */
.fortune-list-note { font-size: 11.5px; color: var(--mute-2); letter-spacing: .06em; margin-bottom: 14px; }
.fortune-tier-list { display: flex; flex-direction: column; gap: 10px; }
.fortune-tier-row {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 18px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(170deg, rgba(255,255,255,.018), rgba(255,255,255,.004));
  transition: border-color .5s var(--ease), background .5s var(--ease);
}
.fortune-tier-row.owned {
  border-color: var(--gold-dim);
  background: linear-gradient(170deg, rgba(201,168,106,.075), rgba(255,255,255,.006));
}
.fortune-tier-badge {
  flex: 0 0 auto; font-family: var(--font-serif); font-size: 15px;
  letter-spacing: .16em; color: var(--paper); padding-top: 2px;
}
.fortune-tier-row.owned .fortune-tier-badge { color: var(--gold-bright); }
.fortune-tier-body { flex: 1 1 auto; min-width: 0; }
.fortune-tier-effects { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fortune-chip {
  font-size: 11px; letter-spacing: .06em; color: var(--jade);
  border: 1px solid rgba(127,179,168,.26); border-radius: 2px; padding: 2px 8px;
}
.fortune-tier-row.owned .fortune-chip { color: var(--jade-bright); border-color: rgba(168,216,204,.36); }
.fortune-tier-desc { font-size: 12px; color: var(--mute); line-height: 1.8; letter-spacing: .03em; }
.fortune-tier-flag {
  flex: 0 0 auto; align-self: center; font-family: var(--font-serif);
  font-size: 11px; letter-spacing: .2em; color: var(--gold-bright);
  border: 1px solid var(--gold-dim); border-radius: 2px; padding: 3px 9px;
}
/* 已过期（v9.10）：压暗并换成朱砂，与「生效中」区分开 */
.fortune-tier-row.expired {
  border-color: rgba(184,80,63,.34);
  background: linear-gradient(170deg, rgba(184,80,63,.05), rgba(255,255,255,.004));
}
.fortune-tier-row.expired .fortune-tier-badge { color: var(--mute); }
.fortune-tier-row.expired .fortune-chip {
  color: var(--mute); border-color: rgba(255,255,255,.08);
}
.fortune-tier-flag.stale { color: var(--cinnabar); border-color: rgba(184,80,63,.5); }

@media (max-width: 720px) {
  .fortune-head { padding: 20px 18px; }
  .fortune-stats { flex: 1 1 100%; }
  .fortune-stat { flex: 1; min-width: 0; }
  .fortune-xy-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .fortune-claim-btn { min-width: 0; }
  .fortune-speedup-input { width: 100%; }
  .fortune-tier-row { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════════════════
   仙玉商城（v9.11）
   结构与 web/shopyu.js 对应：余额条 / 说明 / 货架卡片。
   ══════════════════════════════════════════════════════════════════════════ */
.shopyu-wrap { max-width: 880px; }

.shopyu-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 20px; border-radius: 2px;
  border: 1px solid var(--gold-faint);
  background:
    radial-gradient(ellipse 60% 140% at 0% 0%, rgba(201,168,106,.10), transparent 62%),
    rgba(201,168,106,.035);
}
.shopyu-balance { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-serif); }
.shopyu-balance-name { font-size: 12px; letter-spacing: .34em; color: var(--mute); }
.shopyu-balance-value { font-size: 28px; color: var(--gold-bright); letter-spacing: .04em; }
.shopyu-claim-btn { min-width: 200px; }
.shopyu-claim-btn:disabled {
  background: transparent; border-color: rgba(255,255,255,.06);
  color: var(--mute-2); cursor: not-allowed;
}

.shopyu-note { font-size: 11.5px; color: var(--mute-2); letter-spacing: .05em; line-height: 1.9; margin: 12px 0 0; }

.shopyu-sec-title {
  margin: 28px 0 14px; font-family: var(--font-serif); font-size: 13px;
  letter-spacing: .3em; text-indent: .3em; color: var(--gold-dim);
}

.shopyu-goods { display: flex; flex-direction: column; gap: 12px; }
.shopyu-good {
  padding: 18px 20px 14px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(170deg, rgba(255,255,255,.018), rgba(255,255,255,.004));
  transition: border-color .5s var(--ease);
}
.shopyu-good:hover { border-color: var(--gold-dim); }
.shopyu-good-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.shopyu-good-name { font-family: var(--font-serif); font-size: 17px; letter-spacing: .14em; color: var(--paper); }
.shopyu-good-price { font-family: var(--font-serif); font-size: 14px; color: var(--gold-bright); letter-spacing: .08em; }
.shopyu-good-desc { font-size: 12.5px; color: var(--mute); line-height: 1.85; letter-spacing: .03em; margin: 10px 0 14px; }
.shopyu-good-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.shopyu-good-meta { font-size: 11.5px; color: var(--mute); letter-spacing: .06em; }
.shopyu-good-foot button { padding: 8px 22px; }
.shopyu-good-foot button:disabled {
  background: transparent; border-color: rgba(255,255,255,.05);
  color: var(--mute-2); cursor: not-allowed;
}
/* 买不了的原因：直接写出来，别让玩家盯着灰按钮猜 */
.shopyu-good-why { font-size: 11.5px; color: var(--cinnabar); letter-spacing: .04em; margin-top: 8px; }
.shopyu-good-why:empty { display: none; }

@media (max-width: 720px) {
  .shopyu-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .shopyu-claim-btn { min-width: 0; }
}

/* ═══════════════ 功法（v12.10）：品级 / 主修 / 技能槽 ═══════════════ */
/* 天地玄黄四色：天=金、地=紫、玄=青、黄=暗金 */
.grade-tag {
  display: inline-block; font-family: var(--font-serif);
  font-size: 11px; letter-spacing: .1em; padding: 1px 6px;
  border: 1px solid currentColor; border-radius: 2px;
  margin-right: 8px; line-height: 1.5; flex-shrink: 0;
}
.grade-tag.g-tian { color: #e8c96a; box-shadow: 0 0 8px rgba(232,201,106,.35); }
.grade-tag.g-di   { color: #b98cd6; }
.grade-tag.g-xuan { color: #7fb3a8; }
.grade-tag.g-huang{ color: var(--mute-2); }

.tech-master-card {
  border: 1px solid var(--gold-dim); border-radius: 2px;
  background: linear-gradient(180deg, rgba(201,168,106,.07), rgba(201,168,106,.01));
  padding: 20px 24px 16px; margin-bottom: 28px;
}
.tech-master-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tech-master-name {
  font-family: var(--font-serif); font-size: 19px; letter-spacing: .16em;
  color: var(--gold-bright);
}
.tech-master-kind { font-size: 11.5px; color: var(--mute-2); letter-spacing: .1em; }
.tech-master-lv {
  margin-top: 10px; font-size: 12px; color: var(--mute);
  letter-spacing: .06em; font-family: var(--font-serif);
}
.tech-master-bonus { margin-top: 10px; font-size: 12.5px; color: var(--jade); letter-spacing: .03em; }
.tech-master-bonus .dim { color: var(--mute-2); margin-left: 6px; }
.tech-empty {
  font-size: 12.5px; color: var(--mute-2); letter-spacing: .04em;
  padding: 16px 0 20px; line-height: 1.9;
}

#tech-slots { margin-bottom: 28px; }
.slot-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid rgba(255,255,255,.06); border-radius: 2px;
  padding: 10px 14px; margin-bottom: 8px;
  background: rgba(255,255,255,.015);
}
.slot-row.on { border-color: rgba(127,179,168,.35); background: rgba(127,179,168,.06); }
.slot-row.off { opacity: .55; }
.slot-name { flex: 1; min-width: 0; font-size: 13px; color: var(--paper); letter-spacing: .06em; }
.slot-meta { font-size: 11.5px; color: var(--mute-2); letter-spacing: .04em; }
.slot-row .btn-jade.small, .slot-row .btn-ghost.small { flex-shrink: 0; max-width: 8em; }

.tech-tag {
  display: inline-block; font-size: 10.5px; letter-spacing: .1em;
  padding: 1px 6px; margin-left: 8px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,.14); color: var(--mute-2);
}
.tech-tag.on { color: var(--gold-bright); border-color: var(--gold-dim); }
.tech-tag.off { color: var(--cinnabar); border-color: rgba(184,80,63,.4); }
.tech-card.is-master { border-color: var(--gold-dim); background: rgba(201,168,106,.05); }
.tech-card.off { opacity: .55; }
.tech-sect { font-size: 11px; letter-spacing: .1em; margin-top: 6px; }
.tech-op { margin-top: 10px; }
.tech-op .btn-ghost.small { max-width: 14em; }

/* ══════════════════════════════════════════════════════════════════════════
   社区四功能（v13.34）：邮件 / 公告 / 反馈 / 引荐
   结构与 web/mail.js / notice.js / feedback.js / referral.js 一一对应。
   四个面板共用 cm-* 的通用件（条 / 列表 / 分页 / 标签），
   各自再叠一层专有类（nt- / fb- / rf-）。
   颜色只用 style.css 里**已定义**的变量（见 pm.css 顶部约定）。
   ══════════════════════════════════════════════════════════════════════════ */
.cm-wrap { max-width: 880px; }

.cm-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.cm-counts { display: flex; align-items: baseline; gap: 18px; font-family: var(--font-serif); }
.cm-count { font-size: 12px; letter-spacing: .12em; color: var(--mute); }
.cm-count.hot { color: var(--gold-bright); }

.cm-note {
  margin: 0 0 12px; font-size: 12px; letter-spacing: .04em;
  color: var(--cinnabar); line-height: 1.8;
}
.cm-note.rf-ok { color: var(--jade); }

.cm-list { display: flex; flex-direction: column; gap: 8px; }
.cm-empty {
  padding: 26px 20px; text-align: center; font-family: var(--font-serif);
  letter-spacing: .16em; border: 1px dashed rgba(255,255,255,.055); border-radius: 2px;
}

.cm-row {
  border: 1px solid rgba(255,255,255,.06); border-radius: 2px;
  background: linear-gradient(170deg, rgba(255,255,255,.02), rgba(255,255,255,.004));
  transition: border-color .4s var(--ease);
}
.cm-row:hover { border-color: var(--gold-dim); }
.cm-row.unread { border-left: 2px solid var(--gold-dim); }
.cm-row.open { border-color: var(--gold-dim); background: rgba(201,168,106,.05); }
.cm-row.expired { opacity: .62; }

.cm-row-btn {
  display: block; width: 100%; text-align: left; padding: 12px 16px;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
}
.cm-row-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.cm-row-subject { font-family: var(--font-serif); font-size: 14.5px; letter-spacing: .06em; color: var(--paper); }
.cm-row.unread .cm-row-subject { color: var(--gold-bright); }
.cm-row-meta { margin-top: 5px; font-size: 11.5px; color: var(--mute); letter-spacing: .05em; }
.cm-row-meta span + span { margin-left: 12px; }
.cm-row-preview { margin-top: 6px; font-size: 12px; color: var(--mute); line-height: 1.8; }
.cm-row-body {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.05);
  font-size: 13px; color: var(--paper); line-height: 1.95; white-space: pre-wrap; word-break: break-word;
}

.cm-tag {
  display: inline-block; font-size: 10.5px; letter-spacing: .1em;
  padding: 0 6px; border-radius: 2px; line-height: 1.6;
  border: 1px solid rgba(255,255,255,.14); color: var(--mute-2);
}
.cm-tag-new { color: var(--gold-bright); border-color: var(--gold-dim); }
.cm-tag-att { color: var(--jade); border-color: rgba(147,197,185,.4); }
.cm-tag-pin { color: var(--cinnabar); border-color: rgba(217,112,92,.45); }
.cm-tag-old { color: var(--mute-2); }
.cm-tag-ok { color: var(--jade); border-color: rgba(147,197,185,.45); }
.cm-tag-kind { color: var(--gold); border-color: var(--gold-faint); }

.cm-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.cm-pager-info { font-size: 12px; color: var(--mute); letter-spacing: .1em; }

/* ── 邮件：正文卡 ── */
.cm-detail { margin-bottom: 18px; }
.cm-card {
  padding: 18px 20px 14px; border-radius: 2px;
  border: 1px solid var(--gold-faint);
  background: linear-gradient(180deg, rgba(201,168,106,.05), rgba(201,168,106,.008));
}
.cm-card-subject { font-family: var(--font-serif); font-size: 17px; letter-spacing: .1em; color: var(--gold-bright); }
.cm-card-meta { margin-top: 6px; font-size: 11.5px; color: var(--mute); letter-spacing: .05em; }
.cm-card-meta span + span { margin-left: 14px; }
.cm-card-body {
  margin-top: 14px; font-size: 13.5px; color: var(--paper); line-height: 2;
  white-space: pre-wrap; word-break: break-word;
}
.cm-card-att { margin-top: 14px; font-size: 12.5px; color: var(--jade); }
.cm-card-att-label { color: var(--mute); margin-right: 6px; }
.cm-card-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.cm-card-why { font-size: 11.5px; color: var(--cinnabar); }

/* ── 公告：置顶横幅 ── */
.nt-banner {
  padding: 20px 22px; margin-bottom: 22px; border-radius: 2px;
  border: 1px solid var(--gold-dim);
  background:
    radial-gradient(ellipse 70% 140% at 0% 0%, rgba(201,168,106,.12), transparent 62%),
    rgba(201,168,106,.03);
}
.nt-banner-title { font-family: var(--font-serif); font-size: 19px; letter-spacing: .12em; color: var(--gold-bright); }
.nt-banner-meta { margin: 8px 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  font-size: 11.5px; color: var(--mute); letter-spacing: .05em; }
.nt-banner-body { font-size: 13.5px; color: var(--paper); line-height: 2; white-space: pre-wrap; word-break: break-word; }

/* ── 反馈：提交卡 + 列表 ── */
.fb-form {
  padding: 18px 20px 14px; margin-bottom: 22px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(170deg, rgba(255,255,255,.018), rgba(255,255,255,.004));
}
.fb-form-title { font-family: var(--font-serif); font-size: 13px; letter-spacing: .3em; color: var(--gold-dim); }
.fb-kinds { display: flex; gap: 10px; margin: 14px 0 12px; }
.fb-kind, .fb-filter {
  padding: 5px 14px; font-family: var(--font-serif); font-size: 12.5px; letter-spacing: .12em;
  background: transparent; border: 1px solid rgba(255,255,255,.1); border-radius: 2px;
  color: var(--mute); cursor: pointer; transition: color .3s var(--ease), border-color .3s var(--ease);
}
.fb-kind:hover, .fb-filter:hover { color: var(--paper); }
.fb-kind.on, .fb-filter.on { color: var(--gold-bright); border-color: var(--gold-dim); }
.fb-input {
  display: block; width: 100%; box-sizing: border-box; resize: vertical;
  padding: 10px 14px; font-family: var(--font-sans); font-size: 13px; line-height: 1.8;
  color: var(--paper); background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08); border-radius: 2px; outline: none;
}
.fb-input:focus { border-color: var(--gold-dim); }
.fb-input::placeholder { color: var(--mute-2); }
.fb-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.fb-form-hint { font-size: 11.5px; }
.fb-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.fb-row {
  padding: 14px 16px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(170deg, rgba(255,255,255,.018), rgba(255,255,255,.004));
}
.fb-row.mine { border-left: 2px solid var(--gold-dim); }
.fb-row.accepted { border-color: rgba(147,197,185,.3); }
.fb-row-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.fb-row-who { font-family: var(--font-serif); font-size: 13px; letter-spacing: .1em; color: var(--paper); }
.fb-row-ts { margin-left: auto; font-size: 11px; color: var(--mute-2); }
.fb-row-body { margin-top: 8px; font-size: 13px; color: var(--paper); line-height: 1.9; word-break: break-word; }
.fb-row-reply {
  margin-top: 10px; padding: 8px 12px; border-left: 2px solid rgba(147,197,185,.45);
  background: rgba(147,197,185,.06); font-size: 12.5px; line-height: 1.85; color: var(--jade);
}
.fb-row-reply-label { color: var(--mute); margin-right: 6px; }

/* ── 引荐 ── */
.rf-card {
  padding: 22px 24px 18px; border-radius: 2px;
  border: 1px solid var(--gold-dim);
  background:
    radial-gradient(ellipse 60% 140% at 0% 0%, rgba(201,168,106,.10), transparent 62%),
    rgba(201,168,106,.03);
}
.rf-label { font-size: 12px; letter-spacing: .34em; color: var(--mute); }
.rf-code {
  margin-top: 8px; font-family: var(--font-serif); font-size: 26px;
  letter-spacing: .28em; color: var(--gold-bright); word-break: break-all;
}
.rf-link { margin-top: 14px; padding: 10px 12px; border: 1px dashed rgba(255,255,255,.1); border-radius: 2px; }
.rf-link-text { font-size: 12.5px; color: var(--jade); word-break: break-all; line-height: 1.7; }
.rf-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rf-stat {
  margin-top: 22px; padding: 16px 20px; border-radius: 2px;
  border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.015);
  display: flex; align-items: baseline; gap: 12px;
}
.rf-count { font-family: var(--font-serif); font-size: 28px; color: var(--gold-bright); }
.rf-count-label { font-size: 12px; letter-spacing: .2em; color: var(--mute); }

@media (max-width: 720px) {
  .fb-form-foot { flex-direction: column; align-items: stretch; }
  .cm-pager { gap: 8px; }
  .rf-code { font-size: 21px; letter-spacing: .18em; }
}