/* 三簧螺鈿鎖盤：數字只刻在不透明的暖象牙銘牌上；其餘一律細金線、拉絲鋼、刻字。沒有米色大卡片。 */
:root {
  --ivory: #E9CBB0;
  --ivory-hi: #FADEBF;
  --ivory-lo: #DDBB9C;
  --ink: #261C16;
  --ink-soft: #5A4636;
  --danger: #D9254C;
  --danger-ink: #801A3A;
  --socket: #3B2A1D;
  --gold: #EBAC62;
  --gold-dark: #C97D3D;
  --gold-deep: #6B4322;
  --steel-blue: #5A67B0;
  --bg: #12141F;
  --rd-main: 28px;
  --rd-mid: 17px;
  --serif: ui-serif, "Songti TC", "Noto Serif TC", "Source Han Serif TC", Georgia, serif;
}
html, body { background: var(--bg); }
body { overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.load-fail { position: fixed; inset: auto 20px 20px; color: var(--ivory-hi); font-size: 17px; }

.stage-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* 開盤：錶下銘牌、鑲片、讀窗、提示依序浮上來（延遲 --d 由 app.mjs 給）。只動 opacity／transform。 */
@keyframes ld-rise { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
body.intro :is(.gauge-plate, .inlay, .plate, .hints, .howto, .pin-tag, .gap-tag, .ruler-label) { animation: ld-rise .55s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) both; }
body.pre-intro :is(.gauge-plate, .inlay, .plate, .hints, .howto, .pin-tag, .gap-tag, .ruler-label) { opacity: 0; }
.stage-hud > * { position: absolute; left: var(--x, 0); top: var(--y, 0); }
.stage-hud [hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ── 象牙銘牌：細金邊＋四角鉚釘；只用在有數字的地方 ── */
.plate, .nameplate {
  color: var(--ink);
  background: linear-gradient(180deg, #FCE7CE, #EDD1B6 58%, #E0C2A4);
  border: 1.5px solid var(--gold-dark);
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(30, 14, 4, .85), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 5px rgba(120, 80, 40, .2), 0 10px 22px rgba(0, 0, 0, .5);
}
.plate {
  width: var(--w); max-height: var(--mh);
  padding: 12px 16px 12px;
  overflow: hidden;
  pointer-events: auto;
  background:
    radial-gradient(circle at 8px 8px, #6b4a2c 0 1.6px, #cfa77c 2px 2.6px, transparent 3px),
    radial-gradient(circle at calc(100% - 8px) 8px, #6b4a2c 0 1.6px, #cfa77c 2px 2.6px, transparent 3px),
    radial-gradient(circle at 8px calc(100% - 8px), #6b4a2c 0 1.6px, #cfa77c 2px 2.6px, transparent 3px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #6b4a2c 0 1.6px, #cfa77c 2px 2.6px, transparent 3px),
    linear-gradient(180deg, #FCE7CE, #EDD1B6 58%, #E0C2A4);
}
button.nameplate { font: inherit; text-align: left; cursor: pointer; }
.nameplate:hover, .plate .ev:hover { filter: brightness(1.04); }

/* ── 刻字（在金屬與暗底上的非數字說明）── */
.engraved { margin: 0; color: rgba(240, 214, 188, .82); font-size: 15px; font-weight: 700; letter-spacing: .05em; text-shadow: 0 1px 0 rgba(0, 0, 0, .9), 0 -1px 0 rgba(255, 220, 180, .08); white-space: nowrap; pointer-events: none; }

/* ── 證據按鈕：數字本身就是按鈕 ── */
.ev {
  display: inline-block; border: 0; padding: 0 2px; margin: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; font-size: var(--rd-mid);
  border-bottom: 1.5px dotted rgba(107, 67, 34, .55); line-height: 1.2; cursor: pointer; text-align: left; white-space: nowrap;
}
.ev.big { font-size: var(--rd-main); letter-spacing: -.015em; line-height: 1.22; }
.ev.mid { font-size: 20px; }
.ev .unit { font-size: 15px; font-weight: 700; color: var(--ink-soft); letter-spacing: 0; }
.ev.danger-ink, .danger-ink { color: var(--danger-ink); }
.socket {
  display: inline-block; padding: 2px 8px; border-radius: 5px; background: var(--socket); color: #F2DCC4; font-size: 15px; font-weight: 600; white-space: nowrap;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .55), 0 0 0 1px rgba(201, 125, 61, .6);
}
.field { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.f-label { font-size: 15px; color: var(--ink-soft); font-weight: 600; line-height: 1.25; }
.f-none { font-size: 15px; color: var(--ink-soft); font-style: italic; white-space: nowrap; }
.big-none { font-size: 17px; color: var(--ink-soft); font-style: italic; line-height: 34px; white-space: nowrap; }
/* 欄寬放不下（德文、西文的「沒看到（不等於 0）」）就換行，不擠出讀窗。 */
.m-col .big-none { white-space: normal; line-height: 1.3; padding: 4px 0; max-width: 100%; }
/* 未公布的月份（例如剛過完、官方還沒公布收入）：德文「Fehlender Zahn: unveröffentlicht (nicht 0)」一行放不下，讓它換行。 */
.m-col .socket { white-space: normal; max-width: 100%; }
.val { font-size: var(--rd-mid); font-weight: 700; }
.val-s { font-size: 15px; font-weight: 600; }
.addr { font: 600 15px ui-monospace, "SF Mono", Menlo, monospace; }
.note { margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: var(--ink-soft); }

/* ── 讀窗 ── */
.plate-month, .plate-sel { container-type: inline-size; }
.m-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1.2px solid rgba(107, 67, 34, .35); padding-bottom: 4px; margin-bottom: 6px; }
.m-title { margin: 0; font-size: 26px; line-height: 1.25; font-family: var(--serif); font-weight: 800; white-space: nowrap; }
.m-idx { font-size: 15px; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
.m-prim { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0 0 4px; }
.m-col { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; min-width: 0; }
.m-col > .f-label { flex: 0 0 100%; }
.m-small { display: inline-flex; align-items: baseline; gap: 5px; flex-wrap: wrap; font-size: 15px; min-width: 0; }
.m-small .ev { font-size: 17px; }
.m-flag { margin: 2px 0 4px; padding: 2px 8px; border-radius: 4px; background: rgba(217, 37, 76, .1); color: var(--danger-ink); font-size: 15px; font-weight: 700; line-height: 1.35; }
.m-line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin-top: 3px; min-width: 0; }
.m-line .ev { font-size: 17px; }
.m-evs { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.m-evs .ev { font-size: 15px; }
.m-sub { margin: 6px 0 2px; font-size: 15px; font-weight: 700; color: var(--gold-deep); }
@container (min-width: 345px) { .plate-sel .m-prim { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; } }
@container (min-width: 440px) { .plate-month .m-prim { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; } }

/* ── 選取層（鑲片背面／金庫／Council／止銷） ── */
.s-head { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 8px; margin-bottom: 4px; }
.sel-title { margin: 0; font-size: 24px; font-family: var(--serif); font-weight: 800; line-height: 1.3; }
.sel-sub { grid-column: 1 / -1; margin: 0; font-size: 15px; color: var(--ink-soft); }
.s-close { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--gold-dark); background: rgba(250, 222, 191, .6); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; padding: 0; }
.pip-title { margin: 0 0 4px; font-size: 15px; color: var(--ink-soft); line-height: 1.3; }
/* 追蹤表另有寫法時，附在官方名稱下面。 */
.pip-alt { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.3; }
.grid3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-top: 6px; }
@container (min-width: 330px) { .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid4 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; margin-top: 4px; }
@container (min-width: 345px) { .grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.state { display: inline-block; margin: 2px 0 6px; padding: 2px 8px; border-radius: 4px; font-size: 15px; font-weight: 700; background: rgba(38, 28, 22, .08); }
.state.st-reconcile, .state.st-attention { color: var(--danger-ink); background: rgba(217, 37, 76, .12); }
.state.st-withdrawn { color: var(--ink-soft); background: transparent; border: 1px dashed rgba(107, 67, 34, .5); }
.lock { margin-top: 8px; padding: 6px 10px; border-radius: 6px; background: rgba(38, 28, 22, .07); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.lock-k { font-size: 15px; font-weight: 700; }
.lock-dots { display: flex; gap: 5px; }
.lock-dots i { width: 13px; height: 13px; border-radius: 50%; background: var(--socket); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }
.lock-dots i.on { background: radial-gradient(circle at 35% 35%, #fff, #7CC2D1 60%, #2c6b78); }
.lamp { display: flex; align-items: center; gap: 7px; font-size: 15px; color: var(--ink-soft); }
.lamp i { width: 13px; height: 13px; border-radius: 50%; background: #4a3a2e; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7), 0 0 0 1.5px var(--gold-dark); }

/* ── 盤頂四錶的刻數銘牌 ── */
.gauge-plate {
  width: var(--w); height: var(--h); padding: 2px 4px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  border-radius: 5px; box-shadow: 0 0 0 1px rgba(30, 14, 4, .85), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 4px rgba(120, 80, 40, .2);
  overflow: hidden;
}
.g-label { font-size: 15px; font-weight: 700; color: var(--ink-soft); line-height: 1.12; white-space: nowrap; }
.g-num { font-size: clamp(28px, calc(var(--h) * 0.44), 34px); font-weight: 800; line-height: 1.18; letter-spacing: -.01em; white-space: nowrap; }
.g-note { font-size: 13px; line-height: 1.12; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
/* 矮銘牌（平板橫放這類 64px 高）放三行會溢出：只在這種高度縮數字與行高，其他尺寸照舊。 */
.gauge-plate { container-type: size; }
@container (max-height: 70px) {
  .g-label { line-height: 1.05; }
  .g-num { font-size: 25px; line-height: 1.08; }
}
.gauge-plate[data-mode="phone"] { flex-direction: row; justify-content: space-between; text-align: left; padding: 2px 12px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(30, 14, 4, .85), inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 14px rgba(0, 0, 0, .45); }
.gauge-plate[data-mode="phone"] { flex-direction: column; align-items: flex-start; justify-content: center; }
.gauge-plate[data-mode="phone"] .g-num { font-size: 28px; }

/* ── 鑲片 ── */
.inlay { width: var(--w); height: var(--h); padding: 0; border: 0; background: none; cursor: pointer; perspective: 320px; }
/* 沒在看鑲片圈時，鑲片只把底色調深、不刺眼；字色不變（幣別小字改用深色，平板 9px 也維持對比 8.7），滑過、聚焦、翻開或切到鑲片圈才回到亮底。 */
body:not([data-active="rim"]) .inlay:not(.flipped):not(:hover):not(:focus-visible) .inlay-face { background: linear-gradient(170deg, #D2C3AF, #C9B9A4 40%, #BCAB95); }
body:not([data-active="rim"]) .inlay:not(.flipped):not(:hover):not(:focus-visible) .i-cur { color: var(--ink); }
.inlay-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  clip-path: polygon(var(--cx, 20%) 0, calc(100% - var(--cx, 20%)) 0, 100% var(--cy, 24%), 100% calc(100% - var(--cy, 24%)), calc(100% - var(--cx, 20%)) 100%, var(--cx, 20%) 100%, 0 calc(100% - var(--cy, 24%)), 0 var(--cy, 24%));
  background: linear-gradient(170deg, #FFF3E2, var(--ivory-hi) 40%, var(--ivory));
  color: var(--ink); transform-origin: 50% 0; transition: transform .32s cubic-bezier(.2, .9, .25, 1.15), filter .2s;
  font-size: 15px; line-height: 1.02; overflow: hidden;
}
.inlay-face > span { white-space: nowrap; }
.i-pip { font-weight: 800; font-size: 16px; }
.i-amt { font-weight: 700; letter-spacing: -.05em; }
.i-cur { font-weight: 600; color: var(--ink-soft); }
.inlay[data-pip="36"] .i-pip { color: var(--danger-ink); }
/* 幣別色：象牙面朝下緣淡淡染上（靜版不染），下緣色帶＝里程碑進度。 */
.inlay { --cur: #ECAC6D; }
.inlay.cur-USDC { --cur: #7CC2D1; }
.inlay.cur-GBP { --cur: #E3A07C; }
.inlay.cur-EUR { --cur: #C9C4B6; }
body:not([data-glow="calm"]) .inlay-face { background: linear-gradient(170deg, #FFF3E2, var(--ivory-hi) 40%, color-mix(in srgb, var(--ivory) 70%, var(--cur))); }
.i-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(38, 28, 22, .16); }
.i-bar::before { content: ''; position: absolute; inset: 0; background: var(--bar, var(--cur)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.i-bar[data-state="reconcile"] { --bar: repeating-linear-gradient(90deg, #D873CF 0 6px, transparent 6px 9px); }
.i-bar[data-state="attention"] { --bar: var(--danger); }
.i-bar[data-state="withdrawn"] { --bar: rgba(90, 70, 54, .45); }
.inlay.is-withdrawn .i-amt { text-decoration: line-through; text-decoration-thickness: 2px; }
body[data-glow="calm"] .i-bar::before { background: var(--ink-soft); }
body.intro .i-bar::before { animation: ld-fill .7s cubic-bezier(.2, .8, .2, 1) calc(var(--d, 0ms) + 260ms) both; }
@keyframes ld-fill { from { transform: scaleX(0); } }
/* 選中的鑲片浮起、提亮，字保持可讀；明細在旁邊的讀窗（鑲片沒有背面，所以不翻）。 */
.inlay-face { filter: var(--f-gray,) var(--f-lit,); }
.inlay:hover .inlay-face { --f-lit: brightness(1.06); }
.inlay.flipped .inlay-face { --f-lit: brightness(1.08); transform: translateY(-3px) scale(1.05); }
/* 通過後撤回：鑲片褪成灰，不像一筆有效撥款（滑過、選中時也維持灰）。 */
.inlay.is-withdrawn .inlay-face { --f-gray: grayscale(1); }
.inlay:focus-visible { outline: none; }
.inlay:focus-visible::after { content: ''; position: absolute; inset: -6px; border-radius: 10px; border: 3px solid var(--ivory-hi); }
/* 初訪的人看不出「36 / 13.99M」是什麼：編號一律帶 PIP-，幣別一律寫出來（小尺寸縮字，不拿掉）。 */
.i-pip.bare .i-pre { display: none; }
.inlay.compact .i-pip { font-size: 13px; }
.inlay.compact .i-cur { font-size: 10px; line-height: 1.1; letter-spacing: .02em; }

.spring-hit, .mirror-hit { width: var(--w); height: var(--h); border-radius: 50%; border: 0; background: transparent; cursor: pointer; }
.spring-hit:focus-visible, .mirror-hit:focus-visible { outline: 3px solid var(--ivory-hi); outline-offset: 2px; }
.ring-control { width: var(--w); height: var(--h); border-radius: 50%; pointer-events: none; }
.ring-control:focus-visible { outline: 3px dashed rgba(250, 222, 191, .85); outline-offset: 6px; }

/* ── 止銷尺的銘牌 ── */
.pin-tag { width: var(--w); padding: 3px 9px; display: flex; flex-direction: column; border-radius: 5px; }
.pin-tag .p-num { font-size: 17px; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.pin-tag .p-label { font-size: 15px; font-weight: 600; color: var(--ink-soft); line-height: 1.2; white-space: nowrap; }
.pin-tag.pin-1 .p-num { color: var(--danger-ink); }
.gap-tag { width: var(--w); padding: 2px 8px; display: flex; flex-wrap: wrap; column-gap: 6px; align-items: baseline; justify-content: center; border-color: var(--gold-dark); border-radius: 5px; }
.gap-tag .p-label { font-size: 15px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.gap-tag .p-num { font-size: 17px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.gap-tag .p-note { flex-basis: 100%; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; line-height: 1.2; }
.ruler-label { width: var(--w); }

/* ── 先試這一步：拉絲鋼刻字鈕 ── */
.hints { display: flex; flex-direction: column; gap: 8px; width: var(--w); pointer-events: auto; }
.hints-title { margin-bottom: 2px; }
.hint {
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; font: inherit;
  padding: 7px 12px 7px 8px; border-radius: 8px; color: var(--ivory-hi);
  background: linear-gradient(180deg, #3a3f49, #22262d 55%, #1a1d23);
  border: 1px solid rgba(235, 172, 98, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 10px rgba(0, 0, 0, .45);
}
.hint:hover { border-color: var(--gold); background: linear-gradient(180deg, #454b56, #272b33 55%, #1d2026); }
.hint-n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #FADEBF, #C97D3D); color: var(--ink); font-weight: 800; font-size: 15px; }
.hint-txt { display: flex; flex-direction: column; min-width: 0; }
.hint-q { font-size: 17px; font-weight: 800; line-height: 1.25; }
.hint-how { font-size: 15px; color: rgba(240, 214, 188, .78); line-height: 1.3; }
.hints.tight { gap: 5px; }
.hints.tight .hint { padding: 4px 10px 4px 6px; }
.hints.tight .hint-q { font-size: 15px; }
.hints.tight .hint-how { font-size: 13.5px; }
.hints.tighter .hint-how { display: none; }
.hints[data-mode="tab"], .hints[data-mode="phone"] { flex-direction: row; height: var(--h); }
.hints[data-mode="tab"] .hint, .hints[data-mode="phone"] .hint { flex: 1 1 0; min-width: 0; padding: 4px 8px; }
.hints[data-mode="tab"] .hint-q, .hints[data-mode="phone"] .hint-q { font-size: 15px; white-space: nowrap; }
.hints[data-mode="phone"] .hint { gap: 5px; padding: 3px 6px; justify-content: center; }
.hints[data-mode="phone"] .hint-n { display: none; }
.grid3 .ev, .grid4 .ev { font-size: 16px; }

/* ── ? 刻字圖例 ── */
.help-btn {
  width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer; font: 800 18px/1 var(--serif); color: var(--ink);
  background: radial-gradient(circle at 35% 30%, #FFF1DC, #E9CBB0 55%, #C97D3D); border: 1.5px solid var(--gold-deep);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
}
.legend-pop {
  width: var(--w); padding: 10px 14px; border-radius: 10px; pointer-events: auto; z-index: 3;
  background: linear-gradient(180deg, rgba(34, 37, 45, .97), rgba(20, 22, 28, .97));
  border: 1px solid rgba(235, 172, 98, .8); box-shadow: 0 14px 30px rgba(0, 0, 0, .6);
  color: var(--ivory-hi);
}
.legend-pop[data-anchor="above"] { transform: translateY(-100%); }
.lg-row { display: flex; align-items: center; gap: 10px; margin: 3px 0; font-size: 15px; line-height: 1.3; }
.glyph { flex: 0 0 28px; height: 18px; position: relative; display: inline-block; }
.gl-long::before, .gl-blue::before, .gl-gap::before { content: ''; position: absolute; left: 10px; bottom: 1px; width: 8px; height: 17px; background: linear-gradient(90deg, #6c7581, #eef2f6, #6c7581); border-radius: 1px; }
.gl-blue::after { content: ''; position: absolute; left: 10px; top: 0; width: 8px; height: 6px; background: #5A67B0; }
.gl-gap::before { background: none; border: 1.5px dashed var(--danger); }
.gl-hollow::before { content: ''; position: absolute; left: 7px; top: 2px; width: 10px; height: 10px; border: 2px solid var(--ivory-hi); border-radius: 50%; }
.gl-three::before { content: ''; position: absolute; left: 3px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--ivory-hi); box-shadow: 8px 0 0 var(--ivory-hi), 16px 0 0 var(--ivory-hi); }
.gl-socket::before { content: ''; position: absolute; left: 2px; top: 2px; width: 24px; height: 14px; border-radius: 3px; background: var(--socket); box-shadow: 0 0 0 1px var(--gold-dark); }
.gl-metal::before { content: ''; position: absolute; left: 0; top: 3px; width: 6px; height: 12px; background: #EBAC62; box-shadow: 7px 0 0 #D5DBE2, 14px 0 0 #C46F43, 21px 0 0 #A9A598; }
.gl-spring::before { content: ''; position: absolute; left: 6px; top: 1px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #eef2f6 0 30%, #C97D3D 34% 60%, transparent 64%); }
.gl-term::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 4px; border-radius: 2px; background: #A29E92; box-shadow: 7px 0 0 #7CC2D1, 14px 0 0 #C091EA, 21px 0 0 #ECAC6D; }
.gl-pie::before { content: ''; position: absolute; left: 7px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(#C091EA 0 72%, #E9CBB0 72% 100%); }
.gl-cur::before { content: ''; position: absolute; left: 4px; top: 4px; width: 20px; height: 9px; border-radius: 1px; background: linear-gradient(90deg, #ECAC6D 0 68%, #7CC2D1 69% 100%); }
.gl-vault::before { content: ''; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #ECAC6D; box-shadow: 13px 0 0 #7CC2D1; }

/* ── 撥桿（聲音、光度）：同一套儀器撥桿 ── */
.sound-toggle { display: flex; align-items: flex-start; gap: 7px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; color: rgba(240, 214, 188, .85); font: 700 15px/22px ui-sans-serif, system-ui, -apple-system, "PingFang TC", sans-serif; white-space: nowrap; }
.sound-toggle:disabled { cursor: not-allowed; opacity: .55; }
.st-glyph { display: none; font-size: 15px; line-height: 1; color: rgba(240, 214, 188, .8); }
.st-track { position: relative; display: block; width: 46px; height: 22px; border-radius: 11px; background: linear-gradient(180deg, #181a20, #2f343c); border: 1px solid var(--gold-dark); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7); flex: 0 0 auto; }
.st-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #A8B2BE 55%, #4B535D); box-shadow: 0 2px 3px rgba(0, 0, 0, .6); transition: left .15s, top .15s; pointer-events: none; }
.sound-toggle[aria-pressed="true"] .st-knob { left: 26px; background: radial-gradient(circle at 35% 30%, #fff, var(--gold) 55%, var(--gold-deep)); }
.sound-toggle[aria-pressed="true"] .st-track { background: linear-gradient(180deg, #2a2016, #4a3420); }

/* 三段光度撥桿：軌道上三個卡位，下方刻「靜 中 亮」，每一段都是按鈕；旋鈕停在所選那一格的正上方。 */
.glow-toggle { cursor: default; --stop: 36px; }
html[lang="en"] .glow-toggle { --stop: 68px; }
.gl-rail { position: relative; display: block; width: calc(var(--stop) * 3); height: 42px; }
.gl-rail .st-track { position: absolute; left: 0; top: 0; width: calc(var(--stop) * 3); }
.gl-rail .st-track::before { content: ''; position: absolute; top: 9px; left: calc(var(--stop) * 1.5 - 2.5px); width: 3px; height: 3px; border-radius: 50%; background: rgba(240, 214, 188, .35); }
.gl-rail .st-knob { top: 2px; }
.glow-toggle[data-pos="0"] .st-knob { left: calc(var(--stop) * 0.5 - 9px); }
.glow-toggle[data-pos="1"] .st-knob { left: calc(var(--stop) * 1.5 - 9px); background: radial-gradient(circle at 35% 30%, #fff, #E7C99A 55%, #7A5A36); }
.glow-toggle[data-pos="2"] .st-knob { left: calc(var(--stop) * 2.5 - 9px); background: conic-gradient(from 30deg, #7CC2D1, #C091EA, #E398DE, #ECAC6D, #7CC2D1); }
.gl-stop { position: absolute; top: 0; width: var(--stop); height: 42px; padding: 0; border: 0; background: none; cursor: pointer; color: rgba(240, 214, 188, .5); font: 600 15px/1 ui-sans-serif, system-ui, -apple-system, "PingFang TC", sans-serif; }
.gl-stop .gl-name { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); white-space: nowrap; }
.gl-calm { left: 0; } .gl-balanced { left: var(--stop); } .gl-vivid { left: calc(var(--stop) * 2); }
.gl-stop[aria-checked="true"] { color: rgba(250, 236, 220, .98); }
.gl-stop:focus-visible { outline: 2px solid var(--ivory-hi); outline-offset: 1px; border-radius: 6px; }

/* 平板、手機：直立撥桿，上面刻一個符號（♪ 聲音、☀ 光度），文字交給 aria-label。 */
body[data-mode="phone"] .sound-toggle, body[data-mode="tab"] .sound-toggle { flex-direction: column; align-items: center; gap: 3px; }
body[data-mode="phone"] .st-label, body[data-mode="tab"] .st-label, body[data-mode="phone"] .gl-name, body[data-mode="tab"] .gl-name { display: none; }
body[data-mode="phone"] .st-glyph, body[data-mode="tab"] .st-glyph { display: block; }
body[data-mode="phone"] .st-track, body[data-mode="tab"] .st-track { width: 22px; height: 38px; border-radius: 11px; }
body[data-mode="phone"] .st-knob, body[data-mode="tab"] .st-knob { left: 2px; top: 19px; }
body[data-mode="phone"] .sound-toggle[aria-pressed="true"] .st-knob, body[data-mode="tab"] .sound-toggle[aria-pressed="true"] .st-knob { left: 2px; top: 2px; }
body[data-mode="phone"] .gl-rail, body[data-mode="tab"] .gl-rail { width: 22px; height: 58px; }
body[data-mode="phone"] .gl-rail .st-track, body[data-mode="tab"] .gl-rail .st-track { width: 22px; height: 58px; }
body[data-mode="phone"] .gl-rail .st-track::before, body[data-mode="tab"] .gl-rail .st-track::before { left: 9px; top: 27px; }
body[data-mode="phone"] .glow-toggle .st-knob, body[data-mode="tab"] .glow-toggle .st-knob { left: 2px !important; }
body[data-mode="phone"] .gl-stop, body[data-mode="tab"] .gl-stop { left: -8px !important; width: 38px; height: 19px; }
body[data-mode="phone"] .gl-calm, body[data-mode="tab"] .gl-calm { top: 39px; }
body[data-mode="phone"] .gl-balanced, body[data-mode="tab"] .gl-balanced { top: 19px; }
body[data-mode="phone"] .gl-vivid, body[data-mode="tab"] .gl-vivid { top: 0; }
body[data-mode="phone"] .glow-toggle .st-knob, body[data-mode="tab"] .glow-toggle .st-knob { left: 2px; }
body[data-mode="phone"] .glow-toggle[data-pos="0"] .st-knob, body[data-mode="tab"] .glow-toggle[data-pos="0"] .st-knob { top: 39px; }
body[data-mode="phone"] .glow-toggle[data-pos="1"] .st-knob, body[data-mode="tab"] .glow-toggle[data-pos="1"] .st-knob { top: 20px; }
body[data-mode="phone"] .glow-toggle[data-pos="2"] .st-knob, body[data-mode="tab"] .glow-toggle[data-pos="2"] .st-knob { top: 2px; }
body[data-mode="phone"] .sound-toggle:not(.glow-toggle) .st-track { height: 32px; }
body[data-mode="phone"] .sound-toggle:not(.glow-toggle) .st-knob { top: 13px; }
body[data-mode="phone"] .sound-toggle[aria-pressed="true"]:not(.glow-toggle) .st-knob { top: 2px; }

/* ── 手機圈層切換：鋼鈕 ── */
.layer-tabs { width: var(--w); height: var(--h); display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; pointer-events: auto; }
.layer-tab {
  display: grid; place-content: center; text-align: center; padding: 2px 4px; line-height: 1.1; cursor: pointer; font: inherit;
  color: rgba(240, 214, 188, .8); border-radius: 8px; border: 1px solid rgba(235, 172, 98, .45);
  background: linear-gradient(180deg, #30343c, #1c1f25);
}
.layer-tab .lt-a { font-size: 15px; font-weight: 800; }
.layer-tab .lt-b { font-size: 15px; font-weight: 600; opacity: .8; }
.layer-tab[aria-selected="true"] { color: var(--ink); border-color: var(--gold-dark); background: linear-gradient(180deg, #FCE7CE, #E0C2A4); }

body[data-mode="phone"] .plate { padding: 9px 14px; }
body[data-mode="phone"] .m-title { font-size: 24px; }
body[data-mode="phone"] .p3 { display: none; }
body[data-mode="tab"] .plate .p3 { display: none; }

.mini-ruler { margin: 8px 4px 2px; padding: 14px 0 28px; }
.mr-bar { position: relative; height: 14px; border-radius: 7px; background: linear-gradient(180deg, #8d96a2, #d9dfe6 45%, #4b535d); box-shadow: 0 0 0 1px var(--gold-dark); }
.mr-tick { position: absolute; left: var(--p); top: 16px; transform: translateX(-50%); font-size: 15px; font-weight: 700; }
.mr-gap { position: absolute; left: var(--p0); width: calc(var(--p1) - var(--p0)); top: -11px; height: 7px; border: 2px solid var(--danger); border-bottom: 0; }
.mr-pin { position: absolute; left: var(--p); top: -8px; width: 5px; height: 26px; margin-left: -2.5px; background: #e6ebf0; border-radius: 2px; }
.mr-pin::after { content: ''; position: absolute; left: 50%; top: -7px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--ivory-hi), var(--gold-dark)); }
.mr-pin-1::after { background: radial-gradient(circle at 35% 35%, #ffd9e1, var(--danger)); }


/* ── 證據抽屜：翻開的鑲片背面 ── */
dialog.ld-evidence {
  background: linear-gradient(180deg, var(--ivory-hi), var(--ivory));
  color: var(--ink);
  border: 1.5px solid var(--gold-dark);
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--gold-deep), 0 30px 80px rgba(0, 0, 0, .6);
}
dialog.ld-evidence::backdrop { background: rgba(8, 7, 14, .62); }
.ld-evidence .ev-kicker { color: var(--gold-deep); font-weight: 700; letter-spacing: .06em; text-transform: none; opacity: 1; font-size: 15px; }
.ld-evidence .ev-title { font-family: var(--serif); }
.ld-evidence .ev-value.is-missing { display: inline-block; padding: 6px 12px; border-radius: 8px; background: var(--socket); color: #F2DCC4; font-size: 22px; }
.ld-evidence .ev-level { background: rgba(38, 28, 22, .1); }
.ld-evidence .lv-council-reported, .ld-evidence .lv-unavailable { background: rgba(217, 37, 76, .14); color: var(--danger-ink); }
.ld-evidence .ev-tx h3 { font-size: 16px; margin: 16px 0 6px; }
.ld-evidence .ev-txrow { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 4px 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(107, 67, 34, .2); font-size: 15px; }
.ld-evidence .ev-txrow code { color: #3b1f8f; }
.ld-evidence .ev-approvals h3 { font-size: 16px; margin: 16px 0 6px; }
.ld-evidence .ev-ap-sum { margin: 0 0 4px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.ld-evidence .ev-source { color: #3b1f8f; }

body[data-motion="off"] .inlay-face, body[data-motion="off"] .st-knob, body[data-motion="off"] .sw-knob { transition: none; }

.pending { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
.pending .ev.pend { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.grid4.force4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-top: 6px; }
.engraved.on-steel { color: #1b1e24; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.hints[data-mode="tab-side"] { height: auto; }
.hints[data-mode="tab-side"] .hints-title { display: none; }
.m-tx { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.m-tx li { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 8px; font-size: 15px; min-width: 0; }
.m-tx .ev { font-size: 15px; }
.tx-date { color: var(--ink-soft); font-weight: 600; min-width: 3.2em; white-space: nowrap; }
.tx-tag { font-size: 15px; padding: 0 6px; border-radius: 4px; background: rgba(90, 103, 176, .16); color: #2b3264; font-weight: 600; white-space: nowrap; }
.tx-more { color: var(--ink-soft); font-style: italic; }
.tx-tag.warn { background: rgba(217, 37, 76, .12); color: var(--danger-ink); }

/* ── 靜版：金框收成低調黃銅，底色更暗更素；象牙錶面、墨色、危險紅不動 ── */
body[data-glow="calm"] { --gold: #B9AB8A; --gold-dark: #86785A; --gold-deep: #4F4532; --bg: #0B0C0E; }
body[data-glow="calm"] .plate, body[data-glow="calm"] .nameplate { box-shadow: 0 0 0 1px rgba(10, 8, 6, .85), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 5px rgba(90, 70, 40, .16), 0 10px 22px rgba(0, 0, 0, .5); }
body[data-glow="calm"] .plate {
  background:
    radial-gradient(circle at 8px 8px, #4a4232 0 1.6px, #a99c80 2px 2.6px, transparent 3px),
    radial-gradient(circle at calc(100% - 8px) 8px, #4a4232 0 1.6px, #a99c80 2px 2.6px, transparent 3px),
    radial-gradient(circle at 8px calc(100% - 8px), #4a4232 0 1.6px, #a99c80 2px 2.6px, transparent 3px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #4a4232 0 1.6px, #a99c80 2px 2.6px, transparent 3px),
    linear-gradient(180deg, #FCE7CE, #EDD1B6 58%, #E0C2A4);
}
body[data-glow="calm"] .hint { background: linear-gradient(180deg, #2c2f34, #1c1e22 55%, #16171a); border-color: rgba(185, 171, 138, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 10px rgba(0, 0, 0, .45); }
body[data-glow="calm"] .hint-n, body[data-glow="calm"] .help-btn { background: radial-gradient(circle at 35% 30%, #F3EBDA, #B9AB8A); }
body[data-glow="calm"] .legend-pop { border-color: rgba(185, 171, 138, .6); }
body[data-glow="calm"] .layer-tab { border-color: rgba(185, 171, 138, .35); background: linear-gradient(180deg, #2a2d32, #18191c); }
body[data-glow="calm"] .layer-tab[aria-selected="true"] { border-color: var(--gold-dark); background: linear-gradient(180deg, #FCE7CE, #E0C2A4); }
body[data-glow="calm"] .engraved, body[data-glow="calm"] .sound-toggle { color: rgba(225, 216, 200, .72); }
body[data-glow="calm"] .gap-tag { border-color: var(--ink-soft); }
.plate.fixed-h { height: var(--mh); }
body[data-glow="calm"] { --ivory: #E9DFD2; --ivory-hi: #F4ECE2; --ivory-lo: #E2D5C5; }
body[data-glow="calm"] .plate { background: linear-gradient(180deg, #F6EFE6, #EEE3D8 60%, #E6DACC); }
body[data-glow="calm"] .nameplate { background: linear-gradient(180deg, #F6EFE6, #EEE3D8 60%, #E6DACC); }
body[data-glow="calm"] .inlay-face { background: linear-gradient(170deg, #FAF5EE, #F1E8DD 50%, #E8DDCF); }
body[data-glow="calm"] .ev { border-bottom: 1px solid rgba(107, 87, 60, .07); }
body[data-glow="calm"] .ev:hover, body[data-glow="calm"] .ev:focus-visible { border-bottom-color: rgba(107, 87, 60, .6); }
body[data-glow="calm"] .hint, body[data-glow="calm"] .layer-tab { border-color: rgba(185, 171, 138, .3); }
body[data-glow="calm"] .m-head { border-bottom-color: rgba(107, 87, 60, .2); }
body[data-glow="calm"] .m-flag { background: rgba(128, 26, 58, .07); }
body[data-glow="calm"] .plate, body[data-glow="calm"] .nameplate { border-color: rgba(134, 120, 90, .7); box-shadow: 0 10px 22px rgba(0, 0, 0, .5); }
body[data-glow="calm"] .gauge-plate { box-shadow: none; }
body[data-glow="calm"] .hint { border-color: rgba(185, 171, 138, .18); box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }

/* ── 中檔：金屬仍是暖黃銅，邊線與亮版一樣銳利；只是飽和與發光收斂 ── */
body[data-glow="balanced"] { --gold: #DCB27A; --gold-dark: #B0844F; --gold-deep: #5E4428; --bg: #0E1016; }
body[data-glow="balanced"] .hint { background: linear-gradient(180deg, #353941, #20232a 55%, #191b21); border-color: rgba(220, 178, 122, .6); }
body[data-glow="balanced"] .layer-tab { border-color: rgba(220, 178, 122, .4); }
body[data-mode="phone"] .gl-rail, body[data-mode="phone"] .gl-rail .st-track { height: 52px; }
body[data-mode="phone"] .gl-rail .st-track::before { top: 24px; }
body[data-mode="phone"] .gl-stop { left: -10px; width: 42px; height: 17px; }
body[data-mode="phone"] .gl-calm { top: 35px; }
body[data-mode="phone"] .gl-balanced { top: 17px; }
body[data-mode="phone"] .glow-toggle[data-pos="0"] .st-knob { top: 33px; }
body[data-mode="phone"] .glow-toggle[data-pos="1"] .st-knob { top: 18px; }

/* 直立光度撥桿：軌道寬 22，按鈕區 38（拇指好按），都在容器內。 */
body[data-mode="phone"] .glow-toggle .gl-rail, body[data-mode="tab"] .glow-toggle .gl-rail { width: 38px; }
body[data-mode="phone"] .glow-toggle .gl-rail .st-track, body[data-mode="tab"] .glow-toggle .gl-rail .st-track { left: 8px; }
body[data-mode="phone"] .glow-toggle .gl-stop, body[data-mode="tab"] .glow-toggle .gl-stop { left: 0 !important; width: 38px; }
body[data-mode="phone"] .glow-toggle .st-knob, body[data-mode="tab"] .glow-toggle .st-knob { left: 10px !important; }

/* ── 刊頭：固定在頂端，高度＝layout.mjs 的 MAST（桌機／平板 52、手機 44）── */
body { --mast: 52px; }
body[data-mode="phone"] { --mast: 84px; }
.ld-mast {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--mast);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 0 22px;
  background: linear-gradient(180deg, #1c1f27, #13151b); border-bottom: 1px solid rgba(235, 172, 98, .55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.mast-brand { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.mast-title { margin: 0; font: 800 21px/1 var(--serif); color: var(--ivory-hi); letter-spacing: .01em; white-space: nowrap; }
.mast-sa { color: var(--ivory-hi); }
.mast-db { color: var(--gold); }
.mast-sub { margin: 0; font-size: 15px; color: rgba(240, 214, 188, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mast-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.mast-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  color: var(--ivory-hi); font: 700 15px/1 ui-sans-serif, system-ui, -apple-system, "PingFang TC", sans-serif; white-space: nowrap;
  background: linear-gradient(180deg, #3a3f49, #22262d 55%, #1a1d23); border: 1px solid rgba(235, 172, 98, .7);
}
.mast-btn:hover { border-color: var(--gold); }
.mast-tables { color: var(--ink); background: linear-gradient(180deg, #FCE7CE, #E0C2A4); border-color: var(--gold-dark); }
.mb-glyph { font-size: 16px; line-height: 1; }
.mb-short { display: none; }
.mast-select {
  min-height: 36px; padding: 0 30px 0 10px; border-radius: 8px; cursor: pointer; appearance: none;
  color: var(--ivory-hi); font: 700 15px/1 ui-sans-serif, system-ui, -apple-system, "PingFang TC", sans-serif;
  background: linear-gradient(180deg, #3a3f49, #22262d) padding-box; border: 1px solid rgba(235, 172, 98, .7);
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%), linear-gradient(180deg, #3a3f49, #22262d);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%, 0 0; background-size: 5px 5px, 5px 5px, 100% 100%; background-repeat: no-repeat;
}
.mast-select option { color: #111; background: #fff; }
/* 刊頭逐級收（chrome.mjs 的 fit() 依實際寬度加 fit1–fit4） */
.ld-mast.fit1 .mast-sub { display: none; }
/* 排程停了：擷取時間改成警示色（各模式的刊頭底色不同，淺底兩種另外指定）。 */
body[data-view] .mast-sub.is-stale { color: #FFB08A; font-weight: 700; }
body[data-view="clean"] .mast-sub.is-stale, body[data-view="reservoir"] .mast-sub.is-stale { color: #A3341A; }
.ld-mast.fit2 .mast-menu .mb-long { display: none; }
.ld-mast.fit3 .mast-tables .mb-long { display: none; }
.ld-mast.fit3 .mast-tables .mb-short { display: inline; }
.ld-mast.fit4 .mast-db { display: none; }
.ld-mast.fit5 .mast-tables .mb-short { display: none; }
.ld-mast.fit6 .mast-select { max-width: 86px; }
body[data-mode="phone"] .ld-mast { padding: 0 8px 0 12px; gap: 6px; }
body[data-mode="phone"] .mast-title { font-size: 17px; }
body[data-mode="phone"] .mast-db { display: none; }
body[data-mode="phone"] .mb-long { display: none; }
body[data-mode="phone"] .mb-short { display: inline; }
body[data-mode="phone"] .mast-btn, body[data-mode="phone"] .mast-select { min-height: 34px; padding-left: 9px; padding-right: 9px; font-size: 15px; }
body[data-mode="phone"] .mast-select { padding-right: 24px; max-width: 108px; }
body[data-mode="phone"] .mast-actions { gap: 5px; }
body[data-glow="calm"] .ld-mast { background: linear-gradient(180deg, #17181c, #101114); border-bottom-color: rgba(185, 171, 138, .45); }
body[data-glow="calm"] .mast-db { color: #CDBB95; }

/* ── 載入中／失敗 ── */
.ld-loading { position: fixed; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; background: var(--bg); }
.ld-l-title { margin: 0; font: 800 26px/1.2 var(--serif); color: var(--ivory-hi); }
.ld-l-msg { margin: 0; max-width: 34em; font-size: 17px; color: rgba(240, 214, 188, .8); }

/* ── 桌機左欄：怎麼讀這個鎖盤 ── */
.howto { width: var(--w); max-height: var(--mh); overflow: hidden; pointer-events: auto; }
.howto-title { margin-bottom: 6px; }
.ring-key { margin: 0; display: grid; gap: 8px; }
.rk-row dt { font-weight: 800; font-size: 15px; }
.rk-row dd { margin: 1px 0 0; font-size: 15px; line-height: 1.38; }
.howto .rk-row dt { color: var(--ivory-hi); }
.howto .rk-row dd { color: rgba(240, 214, 188, .74); }
.howto .ring-key.compact { gap: 6px; }
.howto-more { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--gold); font: 700 15px/1.3 ui-sans-serif, system-ui, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ── 象牙底的大對話框：選單、全部 PIP 表格 ── */
dialog.ld-sheet {
  width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; display: none; flex-direction: column;
  background: linear-gradient(180deg, var(--ivory-hi), var(--ivory)); color: var(--ink);
  border: 1.5px solid var(--gold-dark); border-radius: 12px; box-shadow: 0 0 0 1px var(--gold-deep), 0 30px 80px rgba(0, 0, 0, .6);
}
dialog.ld-sheet[open] { display: flex; }
dialog.ld-sheet::backdrop { background: rgba(8, 7, 14, .66); }
dialog.ld-tables { width: min(1320px, calc(100vw - 24px)); height: calc(100dvh - 32px); }
.sh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 10px; border-bottom: 1.2px solid rgba(107, 67, 34, .3); }
.sh-title { margin: 0; font: 800 22px/1.25 var(--serif); }
.sh-close { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--gold-dark); background: rgba(250, 222, 191, .6); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; padding: 0; flex: none; }
.sh-body { overflow: auto; padding: 6px 18px 18px; min-height: 0; flex: 1 1 auto; }
.sh-sec { padding: 12px 0; border-bottom: 1px solid rgba(107, 67, 34, .18); }
.sh-sec:last-child { border-bottom: 0; }
.sh-sec h3 { margin: 0 0 8px; font: 800 17px/1.3 var(--serif); color: var(--gold-deep); }
.sh-sec .lg-row { color: var(--ink); }
.sh-sec .lg-row .glyph { filter: drop-shadow(0 0 1px rgba(0, 0, 0, .6)); }
.sh-sec .gl-hollow::before { border-color: var(--ink-soft); }
.sh-sec .gl-three::before { background: var(--ink-soft); box-shadow: 8px 0 0 var(--ink-soft), 16px 0 0 var(--ink-soft); }
.sh-p { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.sh-links { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 15px; }
.sh-links a { color: #3b1f8f; font-weight: 600; }
.sh-links .sh-hint { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.sh-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.sh-label { font-weight: 700; font-size: 15px; }
.seg { display: inline-flex; border: 1.5px solid var(--gold-dark); border-radius: 9px; overflow: hidden; }
.seg-btn { min-width: 74px; min-height: 40px; padding: 0 12px; border: 0; border-left: 1px solid rgba(107, 67, 34, .3); background: rgba(250, 236, 220, .5); color: var(--ink); font: 700 15px/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.seg-btn:first-child { border-left: 0; }
.seg-btn[aria-checked="true"] { background: var(--ink); color: var(--ivory-hi); }
.switch { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 4px; border: 0; background: none; color: var(--ink); font: 700 15px/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.switch:disabled { opacity: .55; cursor: not-allowed; }
.sw-track { position: relative; width: 50px; height: 28px; border-radius: 14px; background: #b9a58f; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
.sw-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 3px rgba(0, 0, 0, .35); transition: transform .15s; }
.switch[aria-pressed="true"] .sw-track { background: var(--gold-dark); }
.switch[aria-pressed="true"] .sw-knob { transform: translateX(22px); }
body[data-motion="off"] .sw-knob { transition: none; }

/* ── 全部 PIP 表格 ── */
.tb-body { display: flex; flex-direction: column; padding-top: 10px; }
.tb-tabs { display: flex; gap: 6px; border-bottom: 1.5px solid rgba(107, 67, 34, .3); }
.tb-tab { min-height: 42px; padding: 0 16px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; background: none; color: var(--ink-soft); font: 800 16px/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer; margin-bottom: -1.5px; }
.tb-tab[aria-selected="true"] { color: var(--ink); background: rgba(255, 245, 232, .85); border-color: rgba(107, 67, 34, .3); border-bottom: 1.5px solid #fff3e5; }
.tb-panel { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.tb-panel[hidden] { display: none; }
.tb-tools { display: flex; justify-content: flex-end; padding: 8px 0; }
.tb-csv { color: #3b1f8f; font-weight: 700; font-size: 15px; }
.tb-scroll { overflow: auto; min-height: 0; flex: 1 1 auto; border: 1px solid rgba(107, 67, 34, .25); border-radius: 8px; background: rgba(255, 248, 240, .7); }
.tb-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 15px; }
.tb-cap { caption-side: top; text-align: left; padding: 8px 10px; font-size: 15px; color: var(--ink-soft); }
.tb-table th, .tb-table td { padding: 7px 10px; border-bottom: 1px solid rgba(107, 67, 34, .16); text-align: left; vertical-align: top; white-space: nowrap; }
.tb-table thead th { position: sticky; top: 0; z-index: 2; background: #f4dfc8; font-weight: 800; color: var(--ink); border-bottom: 1.5px solid rgba(107, 67, 34, .4); }
.tb-table tbody th, .tb-table tfoot th { position: sticky; left: 0; z-index: 1; background: #fbeee0; font-weight: 800; }
.tb-table thead th:first-child { left: 0; z-index: 3; }
.tb-table tfoot td, .tb-table tfoot th { background: #f1dcc4; border-top: 1.5px solid rgba(107, 67, 34, .4); font-weight: 700; }
.tb-pip { color: var(--ink); }
.tb-title { white-space: normal !important; min-width: 220px; max-width: 360px; color: var(--ink-soft); }
.tb-num { text-align: right !important; }
.tb-num .ev { font-size: 15px; }
.tb-amt { display: inline-flex; align-items: baseline; gap: 2px; }
.tb-vote { display: inline-flex; align-items: baseline; gap: 8px; }
.tb-cnt { color: var(--ink-soft); font-weight: 600; }
.tb-sum { display: block; font-weight: 800; }
.tb-n { display: block; font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.tb-dim { color: var(--ink-soft); font-style: italic; }
.tb-ranked { color: var(--ink-soft); font-style: italic; text-align: center !important; }
.tb-pass { color: #1f5a3a; font-weight: 800; }
.tb-fail { color: var(--danger-ink); font-weight: 800; }
.tb-state { font-weight: 700; }
.tb-state.st-reconcile, .tb-state.st-attention { color: var(--danger-ink); }
.tb-state.st-withdrawn { color: var(--ink-soft); }
.tb-na { font-size: 13px; color: var(--ink-soft); }
.tb-table tbody tr:hover th, .tb-table tbody tr:hover td { background: rgba(235, 172, 98, .14); }
.tb-table .socket { font-size: 13px; padding: 1px 6px; }
/* 付款對帳、5% 上限：表格上方的說明與開關跟著表格一起捲，表頭仍黏在捲動框頂端。 */
.tb-stack { display: flex; flex-direction: column; }
.tb-summary { margin: 0; padding: 10px 10px 4px; font-size: 15px; line-height: 1.45; color: var(--ink); max-width: 72ch; }
.tb-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; align-self: flex-start; }
.tb-toggle input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; color-scheme: light; }
.tb-desc { margin: 0; padding: 6px 10px 8px; font-size: 15px; line-height: 1.4; color: var(--ink-soft); max-width: 72ch; }
.tb-stack .tb-table + .tb-desc { margin-top: 12px; }
.tb-chip { display: inline-block; padding: 2px 9px; border-radius: 11px; font-size: 13px; font-weight: 800; line-height: 1.45; white-space: nowrap; border: 1px solid transparent; }
.tb-chip.ok { background: rgba(31, 90, 58, .12); color: #1f5a3a; border-color: rgba(31, 90, 58, .35); }
.tb-chip.warn { background: rgba(201, 125, 61, .16); color: #7a4210; border-color: rgba(201, 125, 61, .5); }
.tb-chip.bad { background: rgba(217, 37, 76, .1); color: var(--danger-ink); border-color: rgba(128, 26, 58, .35); }
.tb-chip.muted { background: transparent; color: var(--ink-soft); border: 1px dashed rgba(107, 67, 34, .45); }
.tb-chip.neutral { background: rgba(90, 70, 54, .08); color: var(--ink-soft); border-color: rgba(107, 67, 34, .3); }
.tb-match { white-space: normal !important; min-width: 240px; max-width: 420px; line-height: 1.4; }
.tb-flow { color: var(--ink-soft); }
.tb-addr { color: #3b1f8f; font-size: 14px; }
.tb-check { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tb-note { white-space: normal; max-width: 340px; font-size: 13px; line-height: 1.35; color: var(--ink-soft); font-weight: 600; }
.tb-ledger tr[hidden] { display: none; }
body[data-mode="phone"] .tb-match { min-width: 190px; }
body[data-mode="phone"] .tb-summary { padding: 8px 8px 2px; }
/* 待釐清（例外登記簿） */
.tb-register td, .tb-register th { vertical-align: top; }
.tb-reg-st { width: 1%; white-space: nowrap; }
.tb-register .tb-reg-what, .tb-register .tb-reg-resp { white-space: normal; }
.tb-reg-what { min-width: 36ch; max-width: 64ch; }
.tb-reg-title { display: block; font-size: 15px; line-height: 1.4; color: var(--ink); }
.tb-reg-detail, .tb-reg-ask, .tb-reg-said { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.tb-reg-ask { color: #7a4210; font-weight: 700; }
.tb-reg-meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--ink-soft); }
.tb-reg-id { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-soft); overflow-wrap: anywhere; }
.tb-reg-ev { min-width: 12ch; }
.tb-reg-ev > * { display: block; margin: 0 0 6px; text-align: start; }
.tb-reg-go { font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink); background: none; border: 0; padding: 2px 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tb-reg-go:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.tb-reg-resp { min-width: 14ch; max-width: 36ch; }
body[data-mode="phone"] .tb-desc { padding: 6px 8px 8px; }
/* 手機：付款對應與上限核對改成一列一張卡，每格前面帶欄名；PIP／用途與核對結果整行顯示。 */
body[data-mode="phone"] .tb-cards, body[data-mode="phone"] .tb-cards tbody { display: block; width: 100%; }
body[data-mode="phone"] .tb-cards thead { display: none; }
body[data-mode="phone"] .tb-cards tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 10px; border-bottom: 1px solid rgba(107, 67, 34, .2); }
body[data-mode="phone"] .tb-cards tr[hidden] { display: none; }
body[data-mode="phone"] .tb-cards th, body[data-mode="phone"] .tb-cards td { display: block; position: static; padding: 0; border: 0; background: none; white-space: normal; text-align: left !important; min-width: 0; max-width: none; }
body[data-mode="phone"] .tb-cards [data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 1px; }
body[data-mode="phone"] .tb-cards .tb-match, body[data-mode="phone"] .tb-cards .tb-title, body[data-mode="phone"] .tb-cards td:has(.tb-check) { grid-column: 1 / -1; }
body[data-mode="phone"] .tb-cards .tb-amt { flex-wrap: wrap; }
body[data-mode="phone"] .tb-cards tbody tr:hover th, body[data-mode="phone"] .tb-cards tbody tr:hover td { background: none; }
/* 手機放不下四個頁籤：改成 2×2 的按鈕格，選中的反白。 */
body[data-mode="phone"] .tb-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-bottom: 0; padding-bottom: 4px; }
body[data-mode="phone"] .tb-tab { min-height: 44px; margin: 0; padding: 6px 8px; border: 1px solid rgba(107, 67, 34, .35); border-radius: 8px; font-size: 15px; line-height: 1.2; }
body[data-mode="phone"] .tb-tab[aria-selected="true"] { background: var(--ink); color: var(--ivory-hi); border-color: var(--ink); }
body[data-mode="phone"] dialog.ld-sheet { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); }
body[data-mode="phone"] dialog.ld-tables { height: calc(100dvh - 12px); }
body[data-mode="phone"] .sh-body { padding: 4px 12px 14px; }
body[data-mode="phone"] .tb-title { min-width: 160px; }

/* 觸控：數字按鈕的可點範圍往外擴（不改字的大小與排版）。 */
@media (pointer: coarse) {
  .ev { position: relative; }
  .ev::after { content: ''; position: absolute; inset: -9px -4px; }
}
.gauge-plate[data-mode="tab"] .g-num { font-size: 24px; }
.gauge-plate[data-mode="tab"] { padding: 2px 2px; }
/* 表格裡的「未回報」用淡色虛線框：意思不變，整片看起來不會是一排黑塊。 */
.tb-table .socket { background: transparent; color: var(--ink-soft); box-shadow: none; border: 1px dashed rgba(107, 67, 34, .45); font-weight: 600; }
/* 溢出自檢量測時，暫時拿掉觸控用的擴大點擊範圍（它不佔版面，只是會被算進 scrollWidth）。 */
body.audit-measure .ev::after { display: none; }
.term-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.term-chip { min-height: 30px; padding: 0 10px; border-radius: 15px; border: 1px solid rgba(107, 67, 34, .45); background: rgba(250, 236, 220, .6); color: var(--ink); font: 700 15px/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.term-chip.on { background: var(--ink); color: var(--ivory-hi); border-color: var(--ink); }
.table-link { display: block; margin-top: 10px; padding: 0; border: 0; background: none; color: #3b1f8f; font: 700 15px/1.3 ui-sans-serif, system-ui, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.q-line .val-s { white-space: normal; }
/* 鍵盤焦點：實線框，並在盤上方標出目前轉的是哪一圈。 */
.ring-control:focus-visible { outline: 3px solid var(--ivory-hi); outline-offset: 6px; z-index: 6; }
.ring-control:focus-visible::after {
  content: attr(data-label); position: absolute; left: 50%; top: -40px; transform: translateX(-50%); white-space: nowrap;
  padding: 5px 12px; border-radius: 6px; background: var(--ink); color: var(--ivory-hi); border: 1px solid var(--gold-dark);
  font: 700 15px/1.2 ui-sans-serif, system-ui, -apple-system, "PingFang TC", sans-serif;
}
/* 平板鑲片：字縮一點，放得下三位有效數字（14.0M 與 13.6M 分得出來）。 */
.inlay.compact .i-amt { font-size: 14px; letter-spacing: -.06em; }
.engraved.ruler-label.wrap { white-space: normal; line-height: 1.3; }
/* 屆期那一行：三顆屆別鈕＋日期 */
.term-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.term-line .term-chips { display: inline-flex; gap: 4px; margin: 0; }
.term-line .term-chip { min-height: 26px; padding: 0 8px; font-size: 15px; }
.term-dates { font-weight: 600; color: var(--ink-soft); }
body[data-mode="phone"] .state { margin: 0 0 3px; }
/* 讀數牌的安全網：內容超過高度時在牌內捲動（長語言），不會被切掉。 */
.plate { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: rgba(107, 67, 34, .45) transparent; }
.term-line .term-chip { min-width: 32px; }

/* ── 三個提問的直接答案（鑲片背面、止銷尺）── */
.answer { margin: 2px 0 8px; padding: 5px 10px; border-left: 3px solid var(--gold-dark); border-radius: 0 4px 4px 0; background: rgba(255, 250, 240, .55); font-size: 15px; font-weight: 600; line-height: 1.38; color: var(--ink); }
.gl-bar::before { content: ''; position: absolute; left: 2px; top: 6px; width: 24px; height: 5px; background: linear-gradient(90deg, #ECAC6D 0 62%, rgba(120, 100, 84, .45) 62% 100%); }
.gl-bar::after { content: ''; position: absolute; left: 2px; top: 13px; width: 24px; height: 3px; background: repeating-linear-gradient(90deg, #D873CF 0 5px, transparent 5px 8px); }
.gl-red::before { content: ''; position: absolute; left: 6px; top: 1px; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(from 210deg, #B9A68F 0 46%, #D9254C 46% 67%, transparent 67% 100%); -webkit-mask: radial-gradient(circle, transparent 0 4.5px, #000 5px); mask: radial-gradient(circle, transparent 0 4.5px, #000 5px); }
.howto .ring-key.compact .rk-row dd { font-size: 14px; line-height: 1.3; }
/* 選取層放不下（PIP-36 加了答案）就在牌內捲動；底下淡出一段，讓人知道還有內容。捲到底就收起淡出。 */
.plate-sel, .plate-month { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.plate-sel::after, .plate-month::after { content: ''; position: sticky; bottom: -12px; display: block; height: 30px; margin: -30px -16px 0; background: linear-gradient(180deg, rgba(224, 194, 164, 0), #E0C2A4 85%); pointer-events: none; transition: opacity .2s; }
.plate-sel:not([data-more="1"])::after, .plate-month:not([data-more="1"])::after { opacity: 0; }
/* 平板的鑲片只有 39px 高：三行都縮小才放得下 PIP 編號、金額、幣別。 */
.inlay.tiny .inlay-face { line-height: 1; }
.inlay.tiny .i-pip { font-size: 11px; }
.inlay.tiny .i-amt { font-size: 13px; }
.inlay.tiny .i-cur { font-size: 9px; margin-bottom: 3px; }
.gap-tag.stack { flex-direction: column; align-items: center; gap: 0; line-height: 1.15; }
.gap-tag.stack .p-label { display: none; }
.gap-tag.stack .p-note { white-space: normal; font-size: 12px; }
body[data-mode="phone"] .plate-sel::after, body[data-mode="phone"] .plate-month::after { margin-left: -14px; margin-right: -14px; bottom: -9px; }
/* 最下面那顆晶鈕旁的刻字：告訴人晶鈕能按（開過一次蓋就收起）。 */
.spring-hint { font-size: 14px; letter-spacing: .02em; }
.engraved.spring-hint.wrap { white-space: normal; line-height: 1.3; }