/* ==========================================================================
   天刀名人堂 · 全区全服榜 —— 月夜描金（按 UI_PNG 素材包 / preview.png 重制）
   --------------------------------------------------------------------------
   底色是月夜山水的墨蓝黑，结构靠描金细线与深色面板，激活态用青玉；
   页面最后一段说明区翻成"宣纸浅色"，与素材包里的浅色面板/背景一致。
   素材全部来自 RANK/全服功力榜_UI_PNG素材包（已同步到 /assets）。
   ========================================================================== */

/* ---------------------------------------------------------------- 令牌 */
:root {
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --num: "Barlow Condensed", "Noto Sans SC", sans-serif;

  /* 月夜底 */
  --ground: #0F1719;
  --ground-2: #131A1B;
  --panel: #121A1C;
  --panel-2: #171F21;
  --panel-3: #1A2224;
  --panel-4: #242D30;
  --ink-line: rgba(209, 166, 83, .16);

  /* 描金 */
  --gold: #D1A653;
  --gold-2: #B08E4C;
  --gold-deep: #8C6E38;
  --gold-pale: #FBE8AE;
  --gold-bright: #F7E8AF;
  --gold-line: rgba(209, 166, 83, .34);
  --gold-line-soft: rgba(209, 166, 83, .18);

  /* 青玉 */
  --jade: #285146;
  --jade-2: #346858;
  --jade-ink: #4B8E72;
  --jade-bright: #AADCCD;
  --jade-line: rgba(52, 104, 88, .55);

  /* 纸面（说明区） */
  --paper: #F2EDE2;
  --paper-2: #EFECE7;
  --paper-3: #E5DFD2;
  --paper-line: rgba(60, 50, 35, .18);
  --paper-ink: #2A241C;
  --paper-ink-2: #5A5145;
  --paper-ink-3: #756A58;

  /* 文本 */
  --text: #F0E9DA;
  --text-dim: rgba(240, 233, 218, .72);
  --text-faint: rgba(240, 233, 218, .52);

  /* 状态 */
  --silver: #C6CEDA;
  --bronze: #C08A56;
  --danger: #D2342A;
  --danger-text: #E4796B;
  --ok: #6FBF95;

  --shell: min(1460px, calc(100vw - clamp(20px, 4.5vw, 88px)));

  /* 圆角：预览稿里深色面板都是圆角，只有翻牌格与切图边保持直角 */
  --r-panel: 14px;
  --r-card: 10px;
  --r-ctl: 8px;
}

/* ---------------------------------------------------------------- 基础 */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scrollbar-color: var(--gold-deep) var(--ground); }
body {
  margin: 0; overflow-x: clip;
  font-family: var(--sans);
  font-size: .94rem;
  line-height: 1.62;
  color: var(--paper-ink);
  /* 页面底＝浅色水墨卷：深色面板浮在这张纸上，而不是反过来 */
  background-color: #E7E8E6;
  background-image: url(/assets/background/bg_light_landscape_inkwash.png);
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  background-attachment: fixed;
  font-variant-numeric: tabular-nums;
}
button, input, select, textarea { font: inherit; color: inherit; }
option { background: var(--panel-2); color: var(--text); }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-underline-offset: 3px; }
::selection { background: rgba(209, 166, 83, .35); color: #FFF8E6; }
input, textarea { caret-color: var(--gold-pale); }
:focus-visible { outline: 2px solid var(--jade-bright); outline-offset: 2px; }
[hidden] { display: none !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0B1113; }
::-webkit-scrollbar-thumb { background: var(--gold-deep); border: 2px solid #0B1113; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-2); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.hidden { display: none !important; }
.quiet { color: var(--text-faint); }
img { max-width: 100%; }

/* 描金细线的统一做法：素材包里的金色细分隔线，横向重复 */
.gold-rule {
  height: 6px;
  background: url(/assets/decor/deco_divider_gold_bottom.png) center / 749px 6px repeat-x;
}

/* ================================================================ 顶栏 */
/* 顶栏＝压在水墨卷最上沿的一条深色横梁（全幅），下沿一道描金 */
.masthead {
  position: sticky; top: 0; z-index: 40;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "origin switch admin" "snap snap snap";
  align-items: center; column-gap: 18px;
  padding: 0 clamp(12px, 2.4vw, 30px);
  color: var(--text);
  background: linear-gradient(180deg, #131A1B, #0D1416);
  border-bottom: 1px solid var(--gold-line);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .4), inset 0 1px 0 rgba(247, 232, 175, .06);
}
.origin {
  grid-area: origin;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 0; text-decoration: none;
}
.origin-mark {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  color: #1B1408;
  font-family: var(--serif); font-size: .92rem; font-weight: 900;
  background: linear-gradient(160deg, var(--gold-pale), var(--gold-2));
  border: 1px solid var(--gold-deep);
  box-shadow: inset 0 0 0 1px rgba(255, 248, 226, .45);
}
.origin-text { font-size: .82rem; font-weight: 500; letter-spacing: .04em; color: var(--text-dim); }
.origin-arrow { color: var(--gold-2); }
.origin:hover .origin-text { color: var(--gold-pale); }

/* 页签＝素文字 + 选中时下方一道描金细线（素材包里那条「金分割线」的中点菱形正好当压线） */
.board-switch { grid-area: switch; display: flex; justify-content: center; align-items: center; gap: clamp(8px, 1.8vw, 26px); min-width: 0; }
.board-btn {
  position: relative;
  padding: 15px 10px 18px;
  font-family: var(--sans);
  font-size: .95rem; font-weight: 500; letter-spacing: .04em;
  color: var(--text-dim);
  background: none;
  border: 0;
  transition: color .18s ease;
}
.board-btn::after {
  content: ""; position: absolute; left: 50%; bottom: 9px;
  width: 150px; max-width: calc(100% + 26px); height: 10px;
  transform: translateX(-50%) scaleX(.4);
  background: url(/assets/decor/deco_divider_gold_bottom.png) center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity .2s ease, transform .24s cubic-bezier(.25, .7, .3, 1);
  pointer-events: none;
}
.board-btn:hover { color: var(--gold-pale); }
.board-btn.is-active { color: var(--gold-pale); font-weight: 700; }
.board-btn.is-active::after { opacity: 1; transform: translateX(-50%) scaleX(1); }

.top-admin {
  grid-area: admin; justify-self: end;
  padding: 8px 16px; font-size: .8rem; font-weight: 500; letter-spacing: .06em;
  color: var(--text-dim);
  background: rgba(23, 31, 33, .72);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-ctl);
  min-height: 34px;
  transition: color .18s ease, border-color .18s ease;
}
.top-admin:hover { color: var(--gold-pale); border-color: var(--gold); }
.top-admin.is-on { color: var(--jade-bright); border-color: var(--jade-line); }

.snapshot {
  grid-area: snap; margin: 0; min-width: 0;
  padding: 8px 0 10px 22px;
  border-top: 1px solid var(--gold-line-soft);
  font-size: .75rem; letter-spacing: .04em; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: url(/assets/icon/business/icon_clock.png) left center / 16px 16px no-repeat;
}

/* ================================================================ 版面 */
.threshold, .roster, .rite { width: var(--shell); margin-inline: auto; }

/* ---------------------------------------------------------------- 主视觉 */
.threshold {
  position: relative;
  margin-top: clamp(18px, 3vh, 34px);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(272px, 330px);
  color: var(--text);
  border-radius: var(--r-panel);
  background-color: var(--panel);
  /* 压暗层并进背景，不用 ::before 覆盖整块：伪元素铺满四边会被判成"内容贴边"，
     而且这里本来就是一叠两层背景，写在 background-image 里更直白。
     ⚠ 底图必须是 `100% auto`，不能是 `cover`：cover 会按元素**高度**跟着缩放，
     而筛片条换行会让这块高度在 1014 ↔ 1047 之间变（点「全部大区」/选单个大区就触发），
     底图跟着缩放 3% —— 看起来就是月亮在跳。改成只跟宽度走，高度怎么变月亮都不动。
     底图下沿是 #0a1213 左右的纯暗色，和 --panel 差 1–2 个色阶，接缝看不出来。 */
  background-image:
    linear-gradient(rgba(9, 14, 16, .62), rgba(9, 14, 16, .62)),
    url(/assets/background/bg_dark_moon_mountain.png);
  background-size: 100% 100%, 100% auto;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  border: 1px solid rgba(209, 166, 83, .42);
  box-shadow: 0 5px 14px rgba(40, 42, 40, .3);
  overflow: hidden;
}
.threshold > * { position: relative; }

.stage { display: contents; }
.threshold-head { grid-area: 1 / 1 / 2 / 2; }
.podium-block { grid-area: 2 / 1 / 3 / 2; }
.colophon { grid-area: 1 / 2 / 3 / 3; }
.instrument { grid-area: 3 / 1 / 4 / 3; }

/* 榜名区：书法字 logo + 一句金色副题。
   左边原来还有一道描金竖标（::before），随 logo 上线一并去掉 —— logo 自己就是烫金的，
   再挂一条金竖线是重复装饰；左内边距也跟着回到与右侧同档，不再为竖标预留。 */
.threshold-head {
  position: relative;
  /* logo 的高度在这里定义一次，下面几处都复用它 —— 副题的对齐量要从它算出来 */
  --logo-h: clamp(103px, 11vw, 144px);
  padding: clamp(18px, 2.6vw, 30px) clamp(18px, 3vw, 34px) 0;
}
.board-title { margin: 0; }
/* 榜名＝素材包的书法字 logo（整幅位图，透明底）。
   原来是一排"描金牌"（每字一格、有底色和描边），现在背景格子去掉、换成 logo：
   逐字翻牌随之做不了，改成整幅翻一次（见 flap.js 的常驻循环）。
   高度用 clamp 控住，免得比原来的牌面高出太多把首屏的搜索顶下去。 */
.board-logo {
  display: block;
  height: var(--logo-h);
  width: auto; max-width: 100%;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .55));
}
/* 副题要和榜名 logo 里第一个字「全」的笔画左沿对齐。
   两张 logo 都是 2172×724，墨迹从 x=84 起（实测包围盒），也就是**载入高度的 84/724 = 11.6%**；
   所以左移量直接用 --logo-h 折算，任何宽度下都贴住那个笔画。1440 上约 16.7px。 */
.board-subtitle {
  margin: 10px 0 0 calc(var(--logo-h) * 84 / 724);
  font-family: var(--serif);
  font-size: clamp(.86rem, 1.2vw, 1.02rem); font-weight: 600; letter-spacing: .14em;
  color: var(--gold-pale);
}
.board-subtitle i { font-style: normal; margin: 0 .4em; color: var(--gold-2); }

.podium-block { padding: 2px clamp(18px, 3vw, 34px) clamp(10px, 1.3vw, 14px); }
.thesis {
  margin: 8px 0 12px;
  max-width: 82ch;
  font-size: .8rem; line-height: 1.7; color: var(--text-dim);
}
.thesis b { color: var(--gold-pale); font-weight: 700; }

/* ---------------------------------------------------------------- 前三甲＝三张名次卡
   卡片切图 card_rank_*.png 自带"顶上空白圆牌 + 弯月山景 + 金色卡框"，
   所以这里不再自己画框、也不再叠徽章：只把数字放进圆牌圆心，其余内容落在圆牌下方的山景里。
   圆心实测：金 15.1% / 银 15.7% / 铜 16.7%（见 D:\DSH-WORK\png-medallion.mjs）。
   排序是 2 · 1 · 3：头牌居中且更大，与切图构图一致。 */
.podium {
  margin: 0 auto; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(9px, 1.4vw, 22px);
  max-width: 880px;
}
.podium-item {
  /* --ar = 卡片宽高比。卡片高度 = 宽度 / --ar，所以"卡高的百分之几"换算成"宽度的百分之几"就是
     N% / --ar。CSS 里百分比 padding、百分比 top 的参照系不一样（padding 按宽度、top 按高度），
     所以这里统一用"按宽度折算"的写法，避免两种百分比混着算。
     注意：**不能给卡片自己加 container-type: size** —— 那会同时锁住两个轴，卡片不再吃 grid 轨道宽度，
     三张卡会被撑成一样高、并且溢出轨道的 267px（实测 405×342）。这里只用 inline-size，
     让 cqw 能给子元素用。 */
  --ar: .845;
  position: relative;
  container-type: inline-size;
  width: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  row-gap: .5em;
  /* 内容带：圆牌下沿到卡框下沿之间。实测圆牌下沿在卡高 30.2% / 30.4% / 30.5%，卡框下沿约 97%，
     所以上留白 34%、下留白 12%，名分+功力这一组在带内居中 —— 三行是一个整体，
     不要把名字顶在上沿、功力压在下沿（那会在卡中间留出三分之一空白）。 */
  padding: calc(34% / var(--ar)) 9% calc(12% / var(--ar));
  text-align: center;
  background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
  border: 0;
}
.podium-item[data-rank="1"] { --ar: .793; background-image: url(/assets/card/card_rank_1_gold.png); aspect-ratio: 572 / 721; }
.podium-item[data-rank="2"] { --ar: .845; background-image: url(/assets/card/card_rank_2_silver.png); aspect-ratio: 503 / 595; }
.podium-item[data-rank="3"] { --ar: .840; background-image: url(/assets/card/card_rank_3_bronze.png); aspect-ratio: 499 / 594; }
/* 名次数字坐进圆牌圆心：top 用百分比（按高度），字号按宽度算（cqw）。
   圆牌内圈直径 ≈ 卡宽的 29.7% / 27.1% / 25.7%；数字取 25cqw（可见字高≈内圈的 55–60%），四周留一圈环。 */
.podium-medal {
  position: absolute; left: 50%; top: 15.1%; transform: translate(-50%, -50%);
  font-family: var(--num); font-weight: 600; line-height: 1;
  font-size: clamp(1.35rem, 25cqw, 5rem);
  color: #FFF4D6;
  /* 不用彩色光晕：圆心里的数字靠深色投影从位图圆牌上"坐"起来 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.podium-item[data-rank="2"] .podium-medal { top: 15.7%; color: #EFF3F8; }
.podium-item[data-rank="3"] .podium-medal { top: 16.7%; color: #F6DFC0; }
.podium-item .who { display: grid; justify-items: center; gap: .3em; min-width: 0; max-width: 100%; }
/* 子元素的字号用 cqw / --ar 折算出"卡高的百分之几"，clamp 的下限兜住 12px。
   上限只作安全阀，正常宽度下不生效 —— 字号该跟着卡片大小走，不要被上限压小。
   ⚠ 选择器必须写成 `.podium-item .who-name`：三甲卡里的名字是 `<button class="name-btn who-name">`，
   而 `.name-btn`（表格里的角色名）在文件后面、特异性相同，写裸 `.who-name` 会被它的 1.02rem 反压回去。 */
.podium-item .who-name {
  font-family: var(--serif);
  font-size: clamp(1.1rem, calc(8.2cqw / var(--ar)), 2rem); font-weight: 900; line-height: 1.2;
  color: var(--gold-pale);
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
  overflow-wrap: anywhere;
}
button.who-name:hover { color: #FFF6DC; text-decoration: underline; text-underline-offset: 4px; }
.podium-item .who-meta {
  font-size: clamp(.75rem, calc(4.6cqw / var(--ar)), .95rem); letter-spacing: .04em; line-height: 1.5;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}
.podium-item .who-power {
  font-family: var(--num);
  font-size: clamp(1.25rem, calc(12cqw / var(--ar)), 2.6rem); font-weight: 600; line-height: 1;
  color: var(--gold-pale);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .7);
}
.podium-item .who-power small {
  display: block; margin-top: .35em;
  font-family: var(--sans); font-size: clamp(.72rem, calc(4.2cqw / var(--ar)), .9rem); font-weight: 500;
  letter-spacing: .16em; color: var(--text-dim);
}
.podium-item .who-power-none {
  font-size: clamp(.85rem, calc(5.4cqw / var(--ar)), 1.15rem); font-weight: 700; color: var(--text-dim);
}
.podium-item .who-power-none small {
  display: block; margin-top: .3em; font-size: clamp(.72rem, calc(4cqw / var(--ar)), .85rem); font-weight: 500; color: var(--text-faint);
}

/* ---------------------------------------------------------------- 侧栏口径牌 */
.colophon {
  padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2vw, 22px);
  background-color: rgba(15, 21, 23, .78);
  border-left: 1px solid var(--gold-line-soft);
  /* 单列紧凑：它跨榜名与前三甲两行，行数或行高一涨，整个主视觉就跟着涨 */
  display: flex; flex-direction: column; justify-content: center;
}
.colophon-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--gold-line-soft);
}
.colophon-row dt, .colophon-row dd { white-space: nowrap; }
.colophon-row dt {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .75rem; font-weight: 500; letter-spacing: .04em; color: var(--text-dim);
  white-space: nowrap;
}
.colophon-icon { width: 18px; height: 18px; object-fit: contain; opacity: .92; }
.colophon-row dd {
  margin: 0;
  font-family: var(--num); font-size: 1.34rem; font-weight: 600;
  color: var(--gold-pale); text-align: right;
}
/* 三个隐藏计数挤在一行会顶破右栏，这一行允许换行并降一档字号 */
.colophon-row.is-wide { flex-wrap: wrap; row-gap: 1px; }
.colophon-row.is-wide dd { font-size: .96rem; line-height: 1.5; white-space: normal; }
.colophon-note { margin: 10px 0 0; font-size: .72rem; line-height: 1.75; color: var(--text-dim); }
.colophon-note b { color: var(--gold-pale); }

/* ---------------------------------------------------------------- 搜索与筛片
   这一块是主视觉面板的底段：一条描金细线把它和前三甲分开，自己不另起面板 */
.instrument {
  border-top: 1px solid var(--gold-line-soft);
  padding: 16px 28px 20px;
  background-color: rgba(11, 17, 19, .82);
}
.find { display: flex; align-items: stretch; gap: 10px; }
.find input {
  flex: 1; min-width: 0;
  padding: 12px 14px 12px 42px;
  color: var(--text);
  background-color: rgba(18, 26, 28, .9);
  background-image: url(/assets/icon/function/icon_search_gold.png);
  background-repeat: no-repeat; background-position: 12px center; background-size: 22px 22px;
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--r-ctl);
  font-size: 1rem;
}
.find input::placeholder { color: var(--text-faint); }
.find input::-webkit-search-cancel-button, .find input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.find input:focus-visible { outline-offset: 0; border-color: var(--jade-bright); }
/* 主按钮＝实心金：预览稿里「搜索」就是一块扁平金锭，不用切图（切图金条是面板级素材） */
.find-go {
  padding: 0 30px;
  color: #2A1E08;
  font-family: var(--serif); font-weight: 900; font-size: 1rem; letter-spacing: .12em;
  background: linear-gradient(180deg, #F7E9BA, #DCBD6E 60%, #C6A355);
  border: 1px solid var(--gold-deep);
  border-radius: var(--r-ctl);
  box-shadow: inset 0 1px 0 rgba(255, 250, 228, .6);
  transition: filter .16s ease;
}
.find-go:hover { filter: brightness(1.08); }
.find-go:active { transform: translateY(1px); }
.find-clear {
  padding: 0 18px;
  color: var(--text-dim);
  background: rgba(20, 27, 29, .72);
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--r-ctl);
  transition: color .16s ease, border-color .16s ease;
}
.find-clear:hover { color: var(--gold-pale); border-color: var(--gold-line); }

.sieve { margin-top: 12px; display: grid; gap: 7px; }
.sieve-row { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.sieve-label {
  flex: 0 0 58px; padding-top: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 500; letter-spacing: .16em; color: var(--text-dim);
}
.sieve-label::before {
  content: ""; width: 12px; height: 12px; flex: 0 0 auto;
  background: url(/assets/icon/function/icon_filter_jade.png) center / contain no-repeat;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  color: var(--text-dim);
  font-size: .8rem; font-weight: 500;
  background: rgba(20, 27, 29, .74);
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--r-ctl);
  min-height: 34px;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.chip:hover { color: var(--gold-pale); border-color: var(--gold-line); }
.chip .tally { font-family: var(--num); font-size: .84rem; font-weight: 600; color: var(--gold-2); letter-spacing: .04em; }
/* 选中＝青玉描边 + 青玉文字（预览稿里筛片就是这么标的：不填色，只换色） */
.chip.is-active {
  color: var(--jade-bright);
  border-color: var(--jade-bright);
  background-color: rgba(40, 81, 70, .3);
}
.chip.is-active::before { content: "+"; font-weight: 700; opacity: .9; }
.chip.is-active .tally { color: var(--jade-bright); }
.chip:disabled { opacity: .45; cursor: default; }

.result-line { margin: 13px 0 0; font-size: .78rem; letter-spacing: .04em; color: var(--text-dim); }
.result-line .stamp { font-family: var(--num); font-size: 1.06rem; font-weight: 600; color: var(--gold-pale); padding: 0 3px; }

/* ================================================================ 榜单
   排行榜工具条 + 长表 + 分页是同一块深色面板的三段（预览稿里它们是连着的） */
.roster {
  margin-top: clamp(18px, 3vh, 34px);
  background: var(--panel);
  border: 1px solid rgba(209, 166, 83, .42);
  border-radius: var(--r-panel);
  box-shadow: 0 5px 14px rgba(40, 42, 40, .3);
  overflow: hidden;
}
.roster-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 12px 16px;
  background-color: var(--panel-3);
  border-bottom: 1px solid var(--gold-line-soft);
  color: var(--text-dim);
}
.bar-label { font-size: .75rem; letter-spacing: .14em; padding-left: 4px; }
.bar-group { display: flex; gap: 5px; flex-wrap: wrap; }
.bar-btn {
  padding: 7px 14px; min-height: 34px;
  font-size: .78rem; font-weight: 500; color: var(--text-dim);
  background: rgba(20, 27, 29, .7);
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--r-ctl);
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.bar-btn:hover { color: var(--gold-pale); border-color: var(--gold-line); }
/* 当前口径＝青玉实底（预览稿的「全部」就是这么标的） */
.bar-btn.is-on {
  color: #06342B;
  background: linear-gradient(180deg, #B4E2D4, #8CCBB8);
  border-color: #5FA893;
}
.bar-btn.is-done { color: var(--gold-pale); border-color: var(--gold-line); }
.bar-right { margin-left: auto; }

.table-shell {
  background: #0B1113;
  border: 0;
  overflow-x: auto;
}
@media (min-width: 821px) { .table-shell { max-height: min(74vh, 900px); overflow-y: auto; } }
.ledger { width: 100%; border-collapse: collapse; table-layout: fixed; color: var(--text); }
.ledger thead th {
  position: sticky; top: 0; z-index: 3;
  padding: 11px 12px;
  background-color: var(--panel-3);
  box-shadow: inset 0 -1px 0 var(--gold-line);
  font-family: var(--sans);
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  color: var(--gold-pale); text-align: left; white-space: nowrap;
}
.ledger thead th.c-power, .ledger thead th.c-leader, .ledger thead th.c-extra, .ledger thead th.c-op { text-align: right; }
.sort-live { color: var(--jade-bright); }
.ledger tbody td {
  padding: 9px 12px;
  background-color: var(--panel);
  box-shadow: inset 0 -1px 0 var(--gold-line-soft);
  vertical-align: middle; overflow: hidden;
}
.ledger tbody tr:nth-child(even) td { background-color: #141C1E; }
.rowline:hover > td { background-color: #1A2325; }
.rowline.is-open > td { background-color: #1A2325; }
.rowline.is-hit > td:first-child { box-shadow: inset 3px 0 0 var(--gold-pale), inset 0 -1px 0 var(--gold-line-soft); }

.cell-rank { white-space: nowrap; }
/* 前三甲＝完整的数字奖章切图（章里已经画了数字）；第 4 名起才是窄体数字 */
.rank-medal { display: block; width: clamp(28px, 2.4vw, 34px); height: auto; }
.cell-op { text-align: right; padding-right: 16px !important; }
.row-chev {
  display: inline-block; width: 8px; height: 8px;
  border-right: 1.5px solid var(--gold-2);
  border-bottom: 1.5px solid var(--gold-2);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease, border-color .22s ease;
}
.rowline:hover .row-chev { border-color: var(--gold-pale); }
.row-chev.is-open { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--gold-pale); }
.ranknum { font-family: var(--num); font-size: 1.36rem; font-weight: 600; color: var(--text); line-height: 1; }
.ranknum .tilde, .tilde { color: var(--gold-pale); font-style: normal; }
.ranknum.estimated { color: var(--gold-2); }
.tier-tag { display: block; margin-top: 4px; font-size: .75rem; letter-spacing: .12em; color: var(--text-faint); white-space: nowrap; }

/* 名称列与名次列都向内缩进（不要贴紧行首）；表头一起缩，否则列头会和内容错位。 */
.ledger thead th.c-rank, .ledger tbody td.c-rank,
.ledger thead th.c-name, .ledger tbody td.cell-name { padding-left: 24px; }
.ledger thead th.c-name, .ledger tbody td.cell-name { padding-right: 22px; }
/* 角色名 + 铭牌：一行，铭牌跟在名字后面；名字后面那段空出来的列宽就是给铭牌留的 */
.name-line { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.name-btn {
  font-family: var(--serif);
  font-size: 1.02rem; font-weight: 700; color: var(--gold-pale);
  text-align: left; text-decoration: none;
  overflow-wrap: anywhere;
}
.name-btn:hover { color: #FFF6DC; text-decoration: underline; text-underline-offset: 4px; }
.name-btn.is-hidden-name { color: var(--text-dim); text-decoration: underline dotted; text-underline-offset: 4px; font-weight: 500; }
.former { display: block; margin-top: 4px; font-size: .75rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.former-key { margin-right: 7px; font-size: .75rem; letter-spacing: .12em; color: var(--text-faint); }
/* ---------------------------------------------------------------- 铭牌（管理员授予）
   圆角牌 + 一道横向扫光。扫光用 background-position 动画做，不用覆盖整块的伪元素
   （铺满四边的伪元素会被检测器判成"内容贴边"）。颜色/字体走 CSS 变量，由管理员在编辑面板里定。 */
.name-plate {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 3px 14px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 4px rgba(0, 0, 0, .5);
  color: var(--plate-ink, #F7F8F4);
  font-family: var(--serif);
  font-size: .84rem; font-weight: 700; letter-spacing: .06em; line-height: 1.55;
  white-space: nowrap;
  /* 两层背景：上层是扫光带，下层是牌底色 */
  background-image:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, .62) 50%, rgba(255, 255, 255, 0) 66%),
    linear-gradient(var(--plate-bg, #3F7268), var(--plate-bg, #3F7268));
  background-size: 190% 100%, 100% 100%;
  background-position: -190% 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  animation: plate-sweep 3.6s cubic-bezier(.45, .05, .35, 1) infinite;
}
/* 停在 55% 再走一段静止，扫光才不像"一直在闪" */
@keyframes plate-sweep {
  0% { background-position: -190% 0, 0 0; }
  55%, 100% { background-position: 190% 0, 0 0; }
}
.name-plate-text { position: relative; z-index: 1; }
/* 字体四选一（走 class 而不是内联 CSS 变量，见 fullserver.js 里的说明） */
.plate-font-serif { font-family: "Noto Serif SC", "Songti SC", "STSong", serif; }
.plate-font-sans { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }
.plate-font-num { font-family: "Barlow Condensed", "Noto Sans SC", sans-serif; letter-spacing: .1em; }
.plate-font-kai { font-family: "Kaiti SC", "STKaiti", "KaiTi", "Noto Serif SC", serif; }
.name-line .name-plate { margin-left: 2px; }
@media (prefers-reduced-motion: reduce) {
  .name-plate { animation: none; background-image: linear-gradient(var(--plate-bg, #3F7268), var(--plate-bg, #3F7268)); background-size: 100% 100%; background-position: 0 0; }
}
.subline { display: none; margin-top: 4px; font-size: .75rem; color: var(--text-dim); }
.cell-plain { color: var(--text-dim); font-size: .88rem; }
.cell-guild { color: var(--text-dim); font-size: .88rem; overflow-wrap: anywhere; }
.cell-power { text-align: right; white-space: nowrap; }
.cell-power .val { font-family: var(--num); font-size: 1.3rem; font-weight: 600; color: var(--gold-pale); }
.cell-power .unit { display: block; font-size: .75rem; letter-spacing: .14em; color: var(--text-faint); }
.cell-pnum { text-align: right; font-family: var(--num); font-size: 1.16rem; font-weight: 500; color: var(--text-dim); }

/* 隐藏数值 / 隐藏帮派：金线小牌，明确"这里没有数" */
.cell-power .val.is-hidden,
.cell-guild .val.is-hidden {
  font-family: var(--sans); font-size: .78rem; font-weight: 500;
  padding: 3px 9px;
  color: var(--text-dim);
  border: 1px solid var(--gold-line);
  background: rgba(209, 166, 83, .06);
}
.cell-guild .val.is-hidden { display: inline-block; }
.cell-guild .unit { display: block; margin-top: 3px; font-size: .75rem; letter-spacing: .14em; color: var(--text-faint); }

.tag-row { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; vertical-align: 2px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; font-size: .75rem; font-weight: 500; border: 1px solid rgba(0, 0, 0, .5); }
.tag-x { color: inherit; opacity: .7; font-size: .8rem; line-height: 1; }
.tag-x:hover { opacity: 1; }

/* ---------------------------------------------------------------- 展开＝名次详录 */
.rubbing-row > td { padding: 0 !important; background: #0D1416 !important; border-bottom: 1px solid var(--gold-line) !important; }
.rubbing { border-top: 1px solid var(--gold-line-soft); }
.rubbing-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px;
  padding: 16px clamp(16px, 2.4vw, 30px) 12px;
  background-color: var(--panel-2);
  border-bottom: 1px solid var(--gold-line-soft);
}
.rubbing-rank { font-family: var(--num); font-size: 2.38rem; font-weight: 600; line-height: 1; color: var(--gold-pale); }
.rubbing-name { font-family: var(--serif); font-size: 1.42rem; font-weight: 900; color: var(--gold-pale); display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rubbing-name .name-plate { font-size: .8rem; }
.rubbing-head .tagline { font-size: .75rem; letter-spacing: .12em; color: var(--text-dim); }
.rubbing-copy { margin-left: auto; }
.copy-btn { padding: 6px 14px; font-size: .75rem; color: var(--text-dim); background: url(/assets/decor/deco_tab_dark_default.png) center / 100% 100% no-repeat; border: 0; }
.copy-btn:hover { color: var(--gold-pale); }
.copy-btn.is-done { color: var(--jade-bright); }

.rubbing-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  gap: clamp(18px, 3vw, 40px);
  padding: 18px clamp(16px, 2.4vw, 30px) 22px;
}
.rubbing-body[data-reveal] { animation: flap-reveal .38s cubic-bezier(.25, .7, .3, 1) both; }
@keyframes flap-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.rubbing-grid { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; }
.rubbing-grid dt { font-size: .75rem; letter-spacing: .14em; color: var(--text-faint); margin-bottom: 4px; }
.rubbing-grid dd { margin: 0; font-size: .92rem; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.rubbing-grid dd a { color: var(--jade-bright); text-decoration: none; }
.rubbing-grid dd a:hover { text-decoration: underline; }
.link-btn { color: var(--jade-bright); text-align: left; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.leader-power { display: block; font-size: .75rem; color: var(--text-dim); }
.rubbing-note, .marks-note-read { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--gold-line-soft); font-size: .84rem; color: var(--text-dim); }
.rubbing-note .k, .marks-note-read .k { margin-right: 10px; font-size: .75rem; letter-spacing: .14em; color: var(--text-faint); }
.rubbing-quiet { color: var(--text-faint); }
.rubbing-side { display: grid; gap: 16px; align-content: start; }
.rubbing-former dt { font-size: .75rem; letter-spacing: .14em; color: var(--text-dim); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rubbing-former ul { margin: 8px 0 0; padding: 0; list-style: none; }
.rubbing-former li { padding: 6px 0; border-bottom: 1px solid var(--gold-line-soft); font-size: .92rem; color: var(--text); }
.rubbing-former p { margin: 8px 0 0; font-size: .78rem; line-height: 1.7; color: var(--text-dim); }
.badge { padding: 2px 8px; font-size: .75rem; letter-spacing: .08em; border: 1px solid var(--gold-line); color: var(--text-dim); }
.badge.is-guess { border-color: var(--gold); color: var(--gold-pale); }
.badge.is-ok { border-color: var(--jade-bright); color: var(--jade-bright); }
.badge.is-no { border-color: var(--danger); color: var(--danger-text); }
.former-why b { color: var(--gold-pale); }
.review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.review-msg, .marks-msg { font-size: .75rem; color: var(--gold-pale); }
.rubbing-foot { margin: 0; font-size: .75rem; line-height: 1.9; color: var(--text-faint); }

/* ---------------------------------------------------------------- 签名 */
.signature {
  margin-top: 16px;
  padding: 13px 15px;
  background-color: rgba(18, 26, 28, .86);
  border: 1px solid var(--gold-line-soft);
  border-left: 2px solid var(--jade-2);
}
.signature-hd { display: flex; align-items: baseline; gap: 10px; }
.signature-hd .k { font-family: var(--serif); font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--gold-pale); }
.signature-flag { padding: 1px 8px; font-size: .75rem; color: var(--text-faint); border: 1px solid var(--gold-line-soft); }
.signature-text { margin: 9px 0 0; font-family: var(--serif); font-size: 1.04rem; line-height: 1.95; color: var(--text); overflow-wrap: anywhere; }
.signature-empty { margin: 9px 0 0; font-size: .8rem; color: var(--text-faint); }
.signature-why { margin: 9px 0 0; font-size: .75rem; line-height: 1.8; color: var(--text-dim); }

/* ---------------------------------------------------------------- 成长曲线 */
.curve { margin-top: 16px; padding: 13px 15px 11px; border: 1px solid var(--gold-line-soft); background-color: rgba(18, 26, 28, .86); }
.curve-hd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.curve-title {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--serif); font-size: .82rem; font-weight: 700; letter-spacing: .08em; color: var(--gold-pale);
}
.curve-title::before { content: ""; width: 16px; height: 16px; background: url(/assets/icon/business/icon_chart_growth.png) center / contain no-repeat; }
.curve-meta { font-size: .75rem; color: var(--text-faint); }
.curve-delta { margin-left: auto; font-family: var(--num); font-size: 1.12rem; font-weight: 600; }
.curve-delta.up { color: var(--ok); }
.curve-delta.down { color: var(--danger-text); }
.curve-delta.flat { color: var(--text-dim); }
.curve-delta i { font-style: normal; font-size: .75rem; margin-left: 3px; color: var(--text-faint); }
.curve-now { margin: 8px 0 10px; font-size: .82rem; color: var(--text-dim); }
.curve-chart { overflow-x: auto; }
.curve-svg { width: 100%; min-width: 420px; height: auto; display: block; }
.curve-grid { stroke: rgba(209, 166, 83, .16); stroke-width: 1; }
.curve-axis { fill: var(--text-faint); font-size: 12px; font-family: var(--num); letter-spacing: .04em; }
.curve-area { fill: rgba(209, 166, 83, .14); }
.curve-line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.curve-dot { fill: var(--gold-pale); stroke: #0D1416; stroke-width: 1.5; }
.curve-dot.is-last { stroke: #FFF8E6; stroke-width: 2; }
.curve-legend { margin: 10px 0 0; font-size: .75rem; line-height: 1.8; color: var(--text-faint); }
.curve .curve-empty { margin: 8px 0 0; font-size: .8rem; line-height: 1.9; color: var(--text-dim); }

/* ---------------------------------------------------------------- 档案标记 */
.marks-block { border: 1px solid var(--gold-line-soft); padding: 13px 15px; background-color: rgba(18, 26, 28, .8); }
.marks-hd {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-family: var(--serif); font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--gold-pale);
  padding-bottom: 9px; margin-bottom: 11px;
  border-bottom: 1px solid var(--gold-line-soft);
}
.marks-hint { font-family: var(--sans); font-size: .75rem; font-weight: 400; letter-spacing: .04em; color: var(--text-faint); }
.marks-empty { margin: 0; font-size: .78rem; color: var(--text-faint); }
.marks-line { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.marks-line.items { gap: 8px; }
.item-icon { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 5px; border: 1px solid var(--gold-line-soft); font-size: .75rem; color: var(--text-dim); }
.item-icon img { width: 20px; height: 20px; object-fit: contain; }
.marks-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.tag-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.tag-input { padding: 9px 11px; min-width: 180px; background: var(--panel-2); border: 1px solid var(--gold-line); color: var(--text); font-size: .84rem; }
.tag-input:focus-visible { outline-offset: 0; border-color: var(--jade-bright); }
.tag-colors { display: flex; gap: 5px; }
.swatch { width: 24px; height: 24px; border: 1px solid rgba(0, 0, 0, .6); }
.swatch.is-on { outline: 2px solid var(--jade-bright); outline-offset: 2px; }
.marks-items { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 10px; }
.item-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-dim); }
.item-toggle input { accent-color: var(--jade-2); }
.marks-note { width: 100%; min-height: 76px; resize: vertical; padding: 10px 11px; background: var(--panel-2); border: 1px solid var(--gold-line); color: var(--text); font-size: .84rem; line-height: 1.6; }
.marks-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }

/* ---------------------------------------------------------------- 铭牌编辑面板 */
.plate-editor { margin-top: 14px; padding: 13px 15px; border: 1px solid var(--gold-line-soft); border-radius: var(--r-card); background-color: rgba(18, 26, 28, .8); }
.plate-editor-hd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; font-family: var(--serif); font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--gold-pale); }
.plate-editor-title { white-space: nowrap; }
.plate-editor-hd .marks-hint { letter-spacing: .02em; }
.plate-editor-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 9px; }
.plate-text-input { flex: 1 1 190px; min-width: 150px; }
.plate-select { padding: 9px 11px; min-width: 88px; background: var(--panel-2); border: 1px solid var(--gold-line-soft); border-radius: var(--r-ctl); color: var(--text); font-size: .84rem; color-scheme: dark; }
.plate-select:focus-visible { outline-offset: 0; border-color: var(--jade-bright); }
.plate-field-label { font-size: .75rem; letter-spacing: .12em; color: var(--text-faint); }
.plate-preview { display: flex; align-items: center; gap: 10px; padding-top: 3px; }
.plate-preview .name-plate { font-size: .86rem; }

.ghost-btn { padding: 8px 15px; font-size: .78rem; color: var(--text-dim); background: rgba(20, 27, 29, .72); border: 1px solid var(--gold-line-soft); border-radius: var(--r-ctl); transition: color .16s ease, border-color .16s ease; }
.ghost-btn:hover:not(:disabled) { color: var(--gold-pale); border-color: var(--gold-line); }
.ghost-btn:disabled { opacity: .45; cursor: default; }
.primary-btn { padding: 9px 20px; font-family: var(--serif); font-size: .84rem; font-weight: 900; color: #23190A; background: url(/assets/decor/deco_panel_light_bar.png) center / 100% 100% no-repeat; border: 0; }
.primary-btn:hover:not(:disabled) { filter: brightness(1.12); }
.primary-btn:active:not(:disabled) { transform: translateY(1px); }
.primary-btn:disabled { opacity: .45; cursor: default; }

/* 帮派成员名单 */
.guild-members { margin-top: 16px; border: 1px solid var(--gold-line-soft); }
.guild-member-list { margin: 0; padding: 0; list-style: none; max-height: 320px; overflow-y: auto; scrollbar-color: var(--gold-deep) #0B1113; }
.guild-member-list li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--gold-line-soft); }
.gm-ranks { display: inline-flex; gap: 5px; }
.gm-rank {
  display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 8px;
  background: rgba(18, 26, 28, .9); border: 1px solid var(--gold-line-soft);
  font-family: var(--num); font-size: .92rem; font-weight: 600; color: var(--text);
}
.gm-rank i { font-family: var(--sans); font-style: normal; font-size: .75rem; letter-spacing: .1em; color: var(--text-faint); }
.guild-member-meta { margin-left: auto; font-size: .76rem; color: var(--text-dim); white-space: nowrap; }
.guild-more { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--gold-line-soft); }
.guild-progress { font-size: .75rem; color: var(--text-dim); }
.guild-progress b { color: var(--gold-pale); }
.guild-progress.is-loading { color: var(--jade-bright); }
.guild-change-list ul { margin: 6px 0 0; padding: 0; list-style: none; }
.guild-change-list li { padding: 4px 0; display: flex; gap: 10px; align-items: baseline; }

/* 空态与骨架 */
.empty { margin: 0; padding: 48px 24px; background: var(--panel); color: var(--text-dim); font-size: .9rem; line-height: 2; text-align: center; }
.empty-q { color: var(--gold-pale); }
.empty button { margin-left: 12px; padding: 7px 15px; color: var(--text-dim); background: url(/assets/decor/deco_tab_dark_default.png) center / 100% 100% no-repeat; border: 0; font-size: .78rem; }
.empty button:hover { color: var(--gold-pale); }
.skeleton-row td { background: var(--panel) !important; }
.skeleton-bar { display: inline-block; height: 12px; background: rgba(209, 166, 83, .16); animation: skeleton-pulse 1.2s ease-in-out infinite alternate; }
.skeleton-bar.w-24 { width: 24%; } .skeleton-bar.w-40 { width: 40%; } .skeleton-bar.w-62 { width: 62%; }
@keyframes skeleton-pulse { from { opacity: .45; } to { opacity: 1; } }

/* ---------------------------------------------------------------- 分页
   注意：deco_pagination_*.png 是素材包里"分页按钮的样式示例图"（数字 1/2/3 是画在图里的），
   不能当按钮底图用 —— 这里按示例图的样式用 CSS 重画：圆角方钮、深底细金边；
   当前页＝青玉实底 + 深墨数字，下一页＝实心金。 */
.pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 14px 16px 18px; border-top: 1px solid var(--gold-line-soft); }
.pager button {
  padding: 8px 22px; min-height: 40px;
  color: var(--text-dim); font-size: .84rem; font-weight: 500;
  background: rgba(20, 27, 29, .72);
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--r-ctl);
  transition: color .16s ease, border-color .16s ease, filter .16s ease;
}
.pager button:hover:not(:disabled) { color: var(--gold-pale); border-color: var(--gold-line); }
.pager button:disabled { opacity: .4; cursor: default; }
.pager button.page-btn { padding: 0; min-width: 40px; font-family: var(--num); font-size: 1rem; }
.pager button.page-btn.is-current {
  color: #06342B;
  background: linear-gradient(180deg, #B4E2D4, #8CCBB8);
  border-color: #5FA893;
}
.pager button.is-next { color: #2A1E08; background: linear-gradient(180deg, #F7E9BA, #DCBD6E 60%, #C6A355); border-color: var(--gold-deep); box-shadow: inset 0 1px 0 rgba(255, 250, 228, .6); }
.pager button.is-next:hover:not(:disabled) { color: #2A1E08; filter: brightness(1.08); }
.pager .where { font-family: var(--num); font-size: 1.02rem; font-weight: 500; color: var(--text-dim); letter-spacing: .06em; }
.pager .jump { display: inline-flex; align-items: baseline; gap: 6px; font-size: .8rem; color: var(--text-dim); }
.pager .jump input { width: 68px; padding: 7px 9px; background: var(--panel-2); border: 1px solid var(--gold-line-soft); border-radius: 6px; color: var(--text); text-align: center; }
.pager-arrow { width: 14px; height: 14px; object-fit: contain; vertical-align: -2px; margin-right: 7px; opacity: .9; }
.pager-arrow.is-right { margin: 0 0 0 7px; }

/* ================================================================ 说明区
   页面底本来就是浅色水墨卷，所以这一段不再另起一块"宣纸面板"，
   只有说明卡本身是纸：浅底 + 暖灰细边 + 圆角。 */
.rite {
  margin-top: clamp(34px, 6vh, 64px); margin-bottom: clamp(30px, 5vh, 56px);
  padding: 0;
  color: var(--paper-ink);
  background: none;
  border: 0;
  box-shadow: none;
}
.rite h2 {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px;
  font-family: var(--serif); font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 900; letter-spacing: .04em;
  color: #241C12;
}
.rite h2::before {
  content: ""; flex: 0 0 auto; width: 30px; height: 30px;
  background: url(/assets/decor/deco_cloud_main_gold.png) center / contain no-repeat;
  filter: hue-rotate(120deg) saturate(.55) brightness(.75);
}
.rite h2::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(60, 50, 35, .3), rgba(60, 50, 35, 0));
}
.rite-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 20px); }
/* 说明卡＝纸上的一张浅色卡片：暖灰细边 + 圆角 + 极浅投影，和预览稿里那四张一致 */
.rite-grid article {
  padding: clamp(16px, 2vw, 24px) clamp(16px, 2.2vw, 26px);
  background-color: rgba(250, 248, 243, .92);
  border: 1px solid rgba(120, 104, 84, .26);
  border-radius: var(--r-card);
  box-shadow: 0 2px 8px rgba(70, 60, 45, .1);
}
.rite-grid h3 {
  margin: 0 0 9px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 1.02rem; font-weight: 900; letter-spacing: .02em; color: #241C12;
}
.rite-grid h3::before {
  content: ""; flex: 0 0 auto; width: 22px; height: 22px;
  background: url(/assets/icon/business/icon_info_chat.png) center / contain no-repeat;
}
.rite-grid p { margin: 0; font-size: .84rem; line-height: 1.95; color: var(--paper-ink-2); }
.rite-grid b { color: #241C12; }
.rite-grid .tilde { color: #8A5A16; }

/* ---------------------------------------------------------------- 本屏公告编辑（管理员） */
.notice-edit-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rite-grid article.is-editing { background-color: rgba(255, 252, 245, .97); }
.notice-title-input { width: 100%; padding: 9px 11px; margin-bottom: 8px; background: #fff; border: 1px solid rgba(120, 104, 84, .4); border-radius: var(--r-ctl); color: var(--paper-ink); font-family: var(--serif); font-size: .96rem; font-weight: 900; }
.notice-body-input { width: 100%; min-height: 190px; resize: vertical; padding: 10px 11px; background: #fff; border: 1px solid rgba(120, 104, 84, .4); border-radius: var(--r-ctl); color: var(--paper-ink-2); font-family: var(--sans); font-size: .84rem; line-height: 1.9; }
.notice-title-input:focus-visible, .notice-body-input:focus-visible { outline-offset: 0; outline: 2px solid #5FA893; }
.rite-grid article.is-editing .hint-line { display: block; margin-top: 6px; font-size: .72rem; color: #756A58; }

/* ================================================================ 页脚
   深色横梁压在卷尾，顶沿一道描金收口 */
.site-footer {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px;
  padding: 20px clamp(14px, 2.6vw, 34px);
  color: var(--text-dim);
  background: linear-gradient(180deg, #131A1B, #0B1113);
  border-top: 1px solid var(--gold-line);
  box-shadow: inset 0 1px 0 rgba(247, 232, 175, .07);
  font-size: .75rem; letter-spacing: .04em;
}
.icp-link { color: var(--text-dim); text-decoration: none; }
.icp-link:hover { color: var(--gold-pale); text-decoration: underline; }

/* 回顶 */
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 45;
  width: 46px; height: 46px; display: grid; place-items: center;
  color: var(--gold-pale);
  background-color: rgba(18, 26, 28, .92);
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--r-ctl);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.to-top.is-on { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { border-color: var(--jade-bright); color: var(--jade-bright); }

/* ---------------------------------------------------------------- 弹窗 */
.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(28, 32, 32, .58); padding: 20px; }
.modal-card {
  position: relative; width: min(440px, 100%);
  padding: 28px 28px 26px;
  color: var(--text);
  background-color: var(--panel);
  border: 1px solid rgba(209, 166, 83, .42);
  border-radius: var(--r-panel);
  box-shadow: 0 6px 14px rgba(18, 22, 22, .45);
}
.modal-card h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 1.24rem; font-weight: 900; color: var(--gold-pale); }
.modal-card p { margin: 0 0 14px; font-size: .8rem; line-height: 1.8; color: var(--text-dim); }
.modal-close { position: absolute; top: 10px; right: 12px; padding: 6px; font-size: 1.3rem; line-height: 1; color: var(--text-dim); }
.modal-close:hover { color: var(--gold-pale); }
.modal-input { width: 100%; padding: 12px 13px; margin-bottom: 14px; background: var(--panel-2); border: 1px solid var(--gold-line); color: var(--text); }
.modal-input:focus-visible { outline-offset: 0; border-color: var(--jade-bright); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.modal-message { min-height: 1.2em; margin: 10px 0 0 !important; color: var(--gold-pale) !important; }

/* （逐字翻牌的 .flap-char / .flap-settle 已随需求去掉：数据行现在是普通文本） */

/* ================================================================ 响应式 */
@media (max-width: 1080px) {
  /* 必须写 minmax(0, 1fr)：裸 1fr 的隐式最小值是 min-content，
     中文长标签 + nowrap 的口径行会把这一列撑到 800px，整段主视觉在手机上被裁掉。 */
  .threshold { grid-template-columns: minmax(0, 1fr); }
  .threshold-head { grid-area: 1 / 1 / 2 / 2; }
  .podium-block { grid-area: 2 / 1 / 3 / 2; }
  .colophon { grid-area: 3 / 1 / 4 / 2; border-left: 0; border-top: 1px solid var(--gold-line-soft); }
  .instrument { grid-area: 4 / 1 / 5 / 2; }
}

@media (max-width: 820px) {
  body { font-size: .9rem; }
  .masthead { grid-template-columns: 1fr auto; grid-template-areas: "origin admin" "switch switch" "snap snap"; row-gap: 4px; }
  .masthead > * { min-width: 0; }
  .board-switch { justify-content: stretch; }
  .board-btn { flex: 1; padding: 12px 10px; text-align: center; }
  .origin-text { font-size: .75rem; }
  .snapshot { white-space: normal; padding-left: 20px; }
  .threshold, .roster, .rite { max-width: 100%; }
  .table-shell { max-width: 100%; }
  /* 窄屏上名次列本身就只有 3–4 个字宽，缩进收到 14px，别把奖章挤出去 */
  .ledger thead th.c-rank, .ledger tbody td.c-rank { padding-left: 14px; }
  .ledger thead th.c-name, .ledger tbody td.cell-name { padding-left: 16px; padding-right: 14px; }
  /* 窄屏：logo 按宽度收，别让整条榜名撑破卡片。
     改的是 --logo-h（而不是直接改 .board-logo 的 height）—— 副题的对齐量跟着它走。 */
  .threshold-head { --logo-h: clamp(89px, 22.8vw, 115px); }
  .colophon { grid-template-columns: 1fr; }
  .colophon-note { grid-column: auto; }

  /* 前三甲：卡片保持竖版比例，横向滑动看另外两张 */
  .podium {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px;
    padding-bottom: 6px; scroll-snap-type: x mandatory;
    mask-image: linear-gradient(to right, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
    scrollbar-width: none;
  }
  .podium::-webkit-scrollbar { display: none; }
  .podium.is-end { mask-image: none; -webkit-mask-image: none; }
  .podium-item { flex: 0 0 64vw; aspect-ratio: .92; scroll-snap-align: start; }
  /* 手机上三张卡是横滑的，DOM 里的 2·1·3 顺序会让访客先看到第二名 —— 手机端把头牌排到最前 */
  .podium-item[data-rank="1"] { order: -1; }

  .find { flex-wrap: wrap; }
  .find input { flex: 1 1 100%; }
  .find-go { flex: 1; padding: 14px 0; }
  .find-clear { padding: 14px 18px; }
  .sieve-row { flex-wrap: nowrap; align-items: center; min-width: 0; }
  .chips {
    flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
    mask-image: linear-gradient(to right, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
    scrollbar-width: none;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chips.is-end { mask-image: none; -webkit-mask-image: none; }
  .chip { flex: 0 0 auto; min-height: 44px; padding: 10px 15px; }
  .bar-btn, .top-admin { min-height: 44px; }
  .top-admin { padding: 11px 16px; }

  .subline { display: block; }
  .ledger .c-area, .ledger .c-menpai, .ledger .c-guild, .ledger .c-leader, .ledger .c-extra { display: none; }
  .ledger { table-layout: auto; }
  .cell-power .val { font-size: 1.16rem; }
  .rubbing-body { grid-template-columns: 1fr; }
  .rubbing-grid { grid-template-columns: 1fr 1fr; }
  .roster-bar { gap: 6px; }
  .bar-right { margin-left: 0; flex-basis: 100%; }
  .pager { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pager .where { grid-column: 1 / -1; text-align: center; order: -1; }
  .pager .jump { grid-column: 1 / -1; justify-content: center; }
  .pager button { min-height: 48px; }
  .rite-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .rubbing-body[data-reveal] { animation: none; }
  .skeleton-bar { animation: none; }
  .to-top { transition: none; }
  /* 铭牌扫光也停（那一处写在 .name-plate 自己的 reduce 分支里） */
}