:root{
  --sa-ink: #07142f;
  --sa-cobalt: #344cff;
  --sa-cobalt-deep: #2338c8;
  --sa-acid: #d9f45b;
  --sa-orange: #ff5c3d;
  --sa-sky: #9feaf0;
  --sa-paper: #f5f0e4;
  --sa-paper-deep: #e6dfcf;
  --sa-muted-ink: #4d5a6b;
  --sa-on-dark-muted: #e8ebf7;
  --sa-rule-dark: rgba(7, 20, 47, .34);
  --sa-rule-light: rgba(245, 240, 228, .4);
  /* 旧「重要更新」冰白/墨/钴蓝三色：2026-10-30 站主改为深新闻红底（见文件末尾区块），
     这组变量保留给旧页面引用，不再被首页横栏使用。 */
  --bb-ice: #f1f5ff;
  --bb-ink: #101b38;
  --bb-cobalt: #354bdb;
  --bb-muted: #56618f;
  /* 「重要更新」新闻红底 token：2026-10-30 站主确认深新闻红 #b51225 + 白/淡粉白文字。
     放在 :root 供静态审查解析（此前写在 .benefit-bar 组件里，工具只读 :root 因而无法解析）。 */
  --bb-acid: #b51225;
  --bb-on-acid: #fff;
  --bb-on-acid-soft: #fbe3e6;
  --bb-on-acid-faint: #f6d3d8;
  --bb-rule: rgba(255, 255, 255, .34);
  --bb-hover: #8c0d1b;
  --sans: "Avenir Next", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
  --number: "DIN Alternate", "Avenir Next Condensed", "Helvetica Neue", sans-serif;
  --shell: min(100% - 48px, 1320px);
  --page-max: 1320px;
  --page-pad: clamp(24px, 3vw, 32px);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-18: 72px;
  --space-28: 112px;
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: clip; scroll-behavior: smooth; scrollbar-color: var(--sa-orange) var(--sa-ink); }
body {
  margin: 0;
  min-width: 320px;
  max-width: 100%;
  overflow-x: clip;
  color: var(--sa-paper);
  background: var(--sa-ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
::selection { color: var(--sa-ink); background: var(--sa-acid); }
:focus-visible { outline: 3px solid var(--sa-ink); outline-offset: 4px; box-shadow: 0 0 0 5px var(--sa-paper); }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 100;
  left: 16px;
  top: 12px;
  padding: 10px 14px;
  color: var(--sa-ink);
  background: var(--sa-acid);
  transform: translateY(-180%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) auto minmax(250px, .8fr) auto;
  gap: clamp(16px, 1.7vw, 28px);
  align-items: center;
  width: 100%;
  max-width: var(--page-max);
  min-height: 84px;
  margin-inline: auto;
  padding: 12px var(--page-pad);
  color: var(--sa-paper);
  background: var(--sa-ink);
  border-bottom: 1px solid rgba(245, 240, 228, .27);
}
.brand-block { display: grid; gap: 3px; width: fit-content; text-decoration: none; }
.brand-name { font-family: var(--serif); font-size: 30px; line-height: 1.12; letter-spacing: -.02em; }
.brand-motto { color: var(--sa-on-dark-muted); font-family: var(--serif); font-size: 18px; font-style: italic; line-height: 1.3; }
.primary-nav { display: flex; align-items: center; gap: 22px; }
.primary-nav a {
  display: grid;
  gap: 1px;
  min-height: 44px;
  align-content: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  text-underline-offset: 4px;
}
.primary-nav a span + span { color: var(--sa-on-dark-muted); font-size: 16px; font-weight: 500; }
.primary-nav a:hover span:first-child { text-decoration: underline; text-decoration-color: var(--sa-acid); text-decoration-thickness: 2px; }
/* 语言入口：根路径中文、/en/ 英文；两个 URL 都真实存在，不按 IP 强制跳转。 */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding-left: 10px; border-left: 1px solid rgba(245,240,228,.35); }
.lang-switch a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 7px; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.lang-switch a:hover { text-decoration-color: var(--sa-acid); }
.lang-switch a[aria-current="true"] { color: var(--sa-acid); background: var(--sa-ink); }
.sample-mark { display: grid; gap: 2px; padding-left: 15px; border-left: 1px solid rgba(245, 240, 228, .35); white-space: nowrap; }
.sample-mark b { color: var(--sa-acid); font-size: 14px; line-height: 1.2; }
.sample-mark small { color: var(--sa-on-dark-muted); font-size: 13px; line-height: 1.2; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.66fr) minmax(340px, .74fr);
  grid-template-areas:
    "news news"
    "status forecast"
    "times force";
  align-items: stretch;
  width: 100%;
  max-width: var(--page-max);
  min-height: 0;
  margin-inline: auto;
  border-bottom: 1px solid var(--sa-ink);
}
.hero-status { grid-area: status; }
.hero-times { grid-area: times; }
.benefit-bar { grid-area: news; }
.forecast-panel { grid-area: forecast; }
#force { grid-area: force; }
.hero-main {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  min-width: 0;
  padding: clamp(20px, 2.2vw, 28px) var(--page-pad);
  color: var(--sa-paper);
  background-color: var(--sa-cobalt);
  background-image: linear-gradient(90deg, rgba(245, 240, 228, .12) 1px, transparent 1px);
  background-size: calc((100% - 56px) / 7) 100%;
  overflow: clip;
}
/* 左栏下半段（下次重置 + 距上次重置）在桌面仍在左栏；手机按 DOM 顺序排在预测与新闻之后、原力之前。
   背景延续钴蓝，与 hero-main 连成一块，不因拆分布局出现断层。 */
.hero-times {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 var(--page-pad) clamp(20px, 2.2vw, 28px);
  color: var(--sa-paper);
  background: var(--sa-cobalt);
}
.hero-times > #next-reset { margin-top: 0; padding-top: 18px; border-top: 1px solid var(--sa-rule-light); }
.observation-head { display: none; }
/* 左上角状态小标签已从视觉删除（主标题是唯一的状态表达）。节点保留给旧脚本与服务端注入，
   但永不出现在版面上。 */
.status-compat { display: none; }
/* 2026-10-31：时区控件搬进「关键时间」这一行，只保留一行标签 + 选择器，不再单独占一个高标签行。 */
.key-times .timezone-tools { grid-template-columns: minmax(0, 1fr); width: min(340px, 100%); }
.key-times .timezone-tools dt { margin-bottom: 6px; }
.key-times .key-zone { align-content: start; }
.key-times .key-zone .time-zone-status { font-size: 13px; }
.timezone-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 12px; align-items: center; width: min(360px, 100%); min-width: 0; }
.timezone-tools label { font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.timezone-tools label span { color: var(--sa-on-dark-muted); }
.select-shell { position: relative; display: block; min-width: 0; }
/* 2026-10-31：时区控件是辅助工具，不应比状态更抢眼：纸色底、较小字号，但等待态仍保持可点可用。 */
.select-shell select { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: 8px 36px 8px 11px; color: var(--sa-ink); background: var(--sa-paper); border: 1px solid var(--sa-ink); border-radius: 0; appearance: none; font: 650 16px/1.25 var(--sans); cursor: pointer; }
.select-shell svg { position: absolute; right: 11px; top: 50%; width: 18px; height: 18px; fill: none; stroke: var(--sa-ink); stroke-width: 2; pointer-events: none; transform: translateY(-50%); }
.time-zone-status { grid-column: 1 / -1; color: var(--sa-on-dark-muted); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.time-zone-status[data-fallback="true"] { color: var(--sa-acid); }
/* 2026-10-31：主标题直接从卡片顶部起算（24–32px），不再被上面的时区行推开。 */
.hero-copy { padding: 4px 0 18px; }
h1 { max-width: 920px; margin: 0; text-wrap: balance; }
.title-en, .title-zh { display: block; }
.title-en { font-size: clamp(40px, 4.15vw, 60px); font-weight: 750; line-height: 1.05; letter-spacing: -.03em; }
.title-zh { margin-top: 12px; color: var(--sa-acid); font-family: var(--serif); font-size: clamp(26px, 2.25vw, 35px); font-weight: 750; line-height: 1.25; letter-spacing: -.02em; }
.key-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--sa-rule-light); border-bottom: 1px solid var(--sa-rule-light); }
.key-times > div { min-width: 0; padding: 14px 18px 15px 0; }
.key-times > div + div { padding-left: 18px; border-left: 1px solid var(--sa-rule-light); }
.key-times dt { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 8px; color: var(--sa-on-dark-muted); font-size: 14px; line-height: 1.2; }
.key-times dt span + span { font-weight: 500; }
.key-times dd { display: grid; gap: 4px; margin: 0; }
.key-times time { font-family: var(--number); font-size: clamp(19px, 1.72vw, 25px); font-weight: 750; line-height: 1.16; white-space: normal; font-variant-numeric: tabular-nums; }
.key-times dd small { color: var(--sa-on-dark-muted); font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.key-times dd .beijing-compare { color: var(--sa-acid); }
.key-times .is-expected { position: relative; padding-top: 17px; background: rgba(7,20,47,.12); }
.key-times .is-expected::before { content: ""; position: absolute; inset: 0 18px auto 0; height: 4px; background: var(--sa-orange); }

.forecast-panel {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 32px) var(--page-pad);
  color: var(--sa-ink);
  background: var(--sa-acid);
  overflow: hidden;
}
.forecast-panel::after { content: ""; position: absolute; right: -70px; top: 20%; width: 200px; height: 200px; border: 1px solid rgba(7, 20, 47, .2); border-radius: 50%; }
.forecast-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--sa-rule-dark); font-size: 14px; font-weight: 700; line-height: 1.25; }
.probability { display: flex; align-items: flex-start; margin-top: 24px; font-family: var(--number); }
.probability strong { font-size: clamp(96px, 8.5vw, 132px); font-weight: 800; line-height: .8; letter-spacing: -.04em; }
.probability span { padding-top: 7px; margin-left: 7px; font-size: 24px; font-weight: 750; }
.meter { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; height: 18px; }
.meter i { border: 1px solid var(--sa-ink); }
.meter i:nth-child(-n+9) { background: var(--sa-ink); }
.window-list { margin: 24px 0 0; border-top: 1px solid var(--sa-rule-dark); }
.window-list div { display: grid; grid-template-columns: minmax(105px, .7fr) 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--sa-rule-dark); }
.window-list dt { display: grid; gap: 2px; font-size: 14px; line-height: 1.25; }
.window-list dt span + span { font-weight: 500; }
.window-list dd { display: grid; gap: 3px; margin: 0; text-align: right; min-width: 0; }
.window-list time, .window-list dd small { font-family: var(--number); font-size: 14px; font-weight: 700; line-height: 1.3; }
.window-list dd small { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }

.world-times { width: 100%; max-width: var(--page-max); margin-inline: auto; color: var(--sa-ink); background: var(--sa-paper); border-bottom: 1px solid var(--sa-ink); }
.world-times > summary { display: flex; min-height: 92px; align-items: center; justify-content: space-between; gap: 28px; padding: 18px var(--page-pad); cursor: pointer; list-style: none; }
.world-times > summary::-webkit-details-marker { display: none; }
.world-summary-copy { display: grid; gap: 3px; }
.world-summary-copy > strong { font-family: var(--serif); font-size: clamp(25px, 2.4vw, 34px); line-height: 1.2; }
.world-expand { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 5px 10px; font-size: 14px; font-weight: 750; }
.world-expand svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.world-times[open] .world-expand svg { transform: rotate(180deg); }
.world-times > summary:hover { background: #f9f5eb; }
.city-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--sa-ink); }
.city-grid article { min-width: 0; padding: 20px 24px; border-right: 1px solid var(--sa-rule-dark); }
.city-grid article:nth-child(5n) { border-right: 0; }
.city-grid article:nth-child(n+6) { border-top: 1px solid var(--sa-rule-dark); }
.city-grid h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 20px; line-height: 1.15; }
.city-grid time { display: block; font-family: var(--number); font-size: 16px; font-weight: 750; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.city-grid article > span { display: block; margin-top: 5px; color: var(--sa-muted-ink); font-family: var(--number); font-size: 14px; font-weight: 700; }

/* Compact heading/filter toolbar; the list occupies the full content width. */
.updates { display:block;width:100%;max-width:var(--page-max);margin-inline:auto;padding:48px var(--page-pad);color:var(--sa-ink);background:var(--sa-paper); }
.updates .section-heading { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin:0 0 12px; }
.updates .section-heading .tu-switch { display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0; }
.section-heading { align-self: start; }
.updates h2, .history h2, .force-section h2 { margin: 0; font-family: var(--serif); font-size: clamp(36px, 3.2vw, 48px); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.updates h2 .h2-zh, .history h2 .h2-zh { color: var(--sa-muted-ink); font-size: 20px; font-weight: 500; letter-spacing: 0; }
.history-heading p { margin: 16px 0 0; color: var(--sa-muted-ink); font-family: var(--serif); font-size: 20px; line-height: 1.35; }

.history {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: clamp(40px, 5.5vw, 80px);
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-28) var(--page-pad);
  color: var(--sa-ink);
  background: var(--sa-sky);
  border-block: 1px solid var(--sa-ink);
}
.history-heading { align-self: start; }
.month-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--sa-rule-dark); }
.month-stat { display: grid; align-content: start; gap: 2px; min-width: 0; }
.month-stat strong { font-family: var(--number); font-weight: 800; line-height: .95; font-variant-numeric: tabular-nums; }
.month-stat-reset strong { font-size: 36px; }
.month-stat-credit strong { color: #7c2b1d; font-size: 30px; }
.month-stat span { color: var(--sa-ink); font-size: 14px; font-weight: 700; line-height: 1.35; }
#month-stats-period, #month-stats-note { grid-column: 1 / -1; margin: 0; }
#month-stats-period { color: var(--sa-ink); font-size: 14px; font-weight: 750; }
#month-stats-note { color: var(--sa-muted-ink); font-size: 13px; line-height: 1.4; }
.force-card { position: relative; display: grid; gap: 0; margin: 0; padding: 20px 18px 24px; color: var(--sa-paper); background: var(--sa-ink); border: 1px solid var(--sa-ink); border-radius: 10px; overflow: hidden; }
.force-copy { display: grid; gap: 2px; }
.force-section h2 { margin: 0; color: var(--sa-paper); font-family: var(--serif); font-size: 20px; line-height: 1.2; letter-spacing: -.02em; }

.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; width: 100%; max-width: var(--page-max); margin-inline: auto; padding: 22px var(--page-pad); color: var(--sa-on-dark-muted); background: #030b1d; border-top: 1px solid rgba(245, 240, 228, .22); font-size: 14px; }
.site-footer a { justify-self: end; text-underline-offset: 4px; }

@media (max-width: 1180px) {
  .site-header { grid-template-columns: minmax(250px, 1fr) auto minmax(170px, .65fr); }
  .primary-nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; padding-top: 9px; border-top: 1px solid rgba(245, 240, 228, .25); }
  .sample-mark { display: grid; grid-column: 1 / -1; grid-row: 3; padding: 8px 0 0; border-left: 0; border-top: 1px solid rgba(245, 240, 228, .25); }
  .hero { grid-template-columns: minmax(0, 1.5fr) minmax(320px, .8fr); }
  .observation-head { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; min-height: 78px; }
  .primary-nav { grid-column: 1 / -1; grid-row: 2; gap: 8px; overflow-x: auto; }
  .sample-mark { display: grid; grid-column: 2; grid-row: 1; padding: 0 0 0 12px; border-top: 0; border-left: 1px solid rgba(245, 240, 228, .25); }
  /* 手机顺序：状态 → 预测 → 新闻 → 时间 → 原力，与 DOM 阅读顺序一致。 */
  .hero { grid-template-columns: 1fr; grid-template-areas: "status" "forecast" "news" "times" "force"; min-height: 0; }
  .forecast-panel { min-height: 0; } .updates, .history { grid-template-columns: 1fr; }
  /* 窄屏：标题一行、筛选一行、列表通栏；不再强撑两列。 */
  .updates #tibo-updates > .tu-switch { grid-column: 1; grid-row: 2; justify-self: start; }
  .updates #tibo-updates > .tu-empty,
  .updates #tibo-updates > .tu-list,
  .updates #tibo-updates > .ssr-list { grid-row: 3; }
  .city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .city-grid article:nth-child(5n) { border-right: 1px solid var(--sa-rule-dark); }
  .city-grid article:nth-child(odd) { border-right: 0; }
  .city-grid article:nth-child(n+3) { border-top: 1px solid var(--sa-rule-dark); }
}
@media (max-width: 620px) {
  :root{ --space-28: 76px; }
  .updates { padding: 32px var(--page-pad); }
  .site-header { gap: 10px; min-height: 74px; padding: 10px var(--page-pad); }
  .primary-nav a { flex: 1 0 auto; min-width: 64px; font-size: 18px; }
  .primary-nav a span + span { font-size: 16px; }
  .brand-name { font-size: 30px; }
  .brand-motto { font-size: 18px; }
  .sample-mark { padding-top: 7px; }
  .sample-mark b, .sample-mark small { font-size: 13px; }
  .hero-main { padding: 20px var(--page-pad) 0; background-size: calc((100% - 48px) / 4) 100%; }
  .hero-main { display: flex; flex-direction: column; }
  .observation-head { order: 1; }
  .hero-copy { order: 2; }
  .key-times { order: 3; }
  .observation-head { gap: 6px; font-size: 13px; }
  .timezone-tools { grid-template-columns: auto minmax(0, 1fr); width: 100%; }
  .time-zone-status { font-size: 13px; }
  .hero-copy { padding: 8px 0 26px; }
  .title-en { font-size: clamp(36px, 10.3vw, 45px); line-height: 1.07; }
  .title-zh { margin-top: 12px; font-size: 24px; }
  .key-times { grid-template-columns: 1fr; }
  .key-times .is-expected { order: -1; }
  .key-times > div { padding: 17px 0; }
  .key-times > div + div { padding-left: 0; border-top: 1px solid var(--sa-rule-light); border-left: 0; }
  .key-times time { font-size: 20px; white-space: normal; }
  .forecast-panel { min-height: 0; padding: 24px var(--page-pad) 26px; }
  .forecast-head { font-size: 13px; }
  .probability strong { font-size: clamp(72px, 8vw, 96px); }
  .window-list div { grid-template-columns: 1fr; gap: 5px; }
  .window-list dd { text-align: left; }
  .world-times > summary { min-height: 86px; padding: 16px var(--page-pad); gap: 14px; }
  .world-summary-copy > strong { font-size: 24px; }
  .city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .city-grid article { padding: 17px 24px; } .updates, .history { padding: 68px var(--page-pad); }
  .updates h2, .history h2 { font-size: 36px; }
  .site-footer { grid-template-columns: 1fr; gap: 8px; padding: 20px var(--page-pad); }
  .site-footer a { justify-self: start; }
}
@media (max-width: 350px) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto; }
  .primary-nav { grid-row: 2; }
  .sample-mark { grid-column: 2; grid-row: 1; }
  .title-en { font-size: 36px; }
  .title-zh { font-size: 24px; }
  .key-times time { font-size: 20px; }
  .probability strong { font-size: clamp(72px, 8vw, 96px); }
  .world-times > summary { align-items: flex-start; }
  .world-expand { align-self: end; }
  .city-grid { grid-template-columns: 1fr; }
  .city-grid article, .city-grid article:nth-child(odd), .city-grid article:nth-child(5n) { border-right: 0; border-top: 1px solid var(--sa-rule-dark); }
  .city-grid article:first-child { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Telegram shortcut follows the approved preview only. */
@media (min-width: 901px) { .site-header { position: sticky; top: 0; z-index: 30; } }
@media (max-width: 900px) {
 body { padding-bottom: 56px; }
}

/* Live-contract adaptations for the existing worker DOM. */
.site-header { grid-template-columns: minmax(290px, 1.15fr) auto minmax(240px, .82fr) auto; }
.brand-block { grid-template-columns: minmax(0, 1fr); align-items: center; gap: 8px; }
.brand-copy { display: grid; gap: 2px; }
.brand-motto { font-family: var(--serif); font-size: 18px; font-style: italic; }
.hero-main { grid-template-rows: auto auto auto auto auto; }
#status-title { display: grid; gap: 12px; }
#headline-en, #headline { display: block; }
#headline-en { font-size: clamp(40px, 4.15vw, 60px); font-weight: 750; line-height: 1.05; letter-spacing: -.03em; }
#headline { color: var(--sa-acid); font-family: var(--serif); font-size: clamp(26px, 2.25vw, 35px); font-weight: 750; line-height: 1.25; letter-spacing: -.02em; }
.fact-line { max-width: 820px; margin: 17px 0 0; color: var(--sa-on-dark-muted); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
.source-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 12px; }
.source-row p { margin: 0; color: var(--sa-on-dark-muted); font-size: 14px; line-height: 1.4; }
.hero-source, #next-time-source { display: inline-flex; min-height: 44px; align-items: center; color: var(--sa-acid); font-size: 14px; font-weight: 750; text-underline-offset: 4px; }
.next-reset { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--sa-rule-light); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; align-items: baseline; }
.section-head h2 { margin: 0; font-family: var(--serif); font-size: clamp(24px, 2vw, 31px); line-height: 1.15; }
#next-label { color: var(--sa-acid); font-size: 14px; font-weight: 750; }
.clocks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; margin-top: 12px; border-block: 1px solid var(--sa-rule-light); }
.clock-bj, .clock-pt { display: grid; gap: 4px; min-width: 0; padding: 14px 18px 14px 0; }
.clock-pt { padding-right: 0; padding-left: 18px; border-left: 1px solid var(--sa-rule-light); }
.clock-label { margin: 0; color: var(--sa-on-dark-muted); font-size: 13px; line-height: 1.3; }
.clocks time { font-family: var(--number); font-size: clamp(32px, 3.5vw, 48px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.clock-date, .clock-zone { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.clock-date { color: var(--sa-paper); }
.clock-zone { color: var(--sa-on-dark-muted); }
.next-range { margin-top: 12px; padding: 13px 16px; color: var(--sa-ink); background: var(--sa-acid); }
.next-range time { display: block; margin-top: 3px; font-family: var(--number); font-size: 20px; font-weight: 750; }
#next-time-note, .countdown-line { margin: 12px 0 0; color: var(--sa-on-dark-muted); font-size: 14px; line-height: 1.45; }
.pacific-now { margin-left: auto !important; }
.elapsed-board { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--sa-rule-light); }
.hero-times > .elapsed-board { margin-top: 12px; padding-top: 16px; }
.recent-reset-times { display: grid; gap: 7px; margin: 0 0 14px; padding: 0; color: var(--sa-on-dark-muted); }
.recent-reset-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: baseline; }
.recent-reset-row dt { min-width: 0; font-weight: 650; line-height: 1.4; }
.recent-reset-row dd { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 8px; min-width: 0; margin: 0; text-align: right; }
.recent-reset-row time { color: var(--sa-paper); font-family: var(--number); font-variant-numeric: tabular-nums; }
.recent-reset-row small { flex-basis: 100%; line-height: 1.35; }
.elapsed-label { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 8px; color: var(--sa-on-dark-muted); font-size: 16px; font-weight: 650; }
.elapsed-digits { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid var(--sa-rule-light); }
.elapsed-digits > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; min-width: 0; padding: 12px 10px 12px 0; }
.elapsed-digits > span + span { padding-left: 10px; border-left: 1px solid var(--sa-rule-light); }
/* 2026-10-31：经过计时的翻牌数字放大（几何仍由 em 驱动，不破形）；翻牌卡本身也按 em 同步放大，
   只改父级字号不足以放大 .fc 的实际占位。它是「距上次重置已经过了多久」，不是未来倒计时。 */
.elapsed-digits strong { font-family: var(--number); font-size: clamp(48px, 4.2vw, 60px); line-height: 1; font-variant-numeric: tabular-nums; }
.elapsed-digits small { color: var(--sa-on-dark-muted); font-size: 16px; font-weight: 650; }

.forecast-panel #prediction { position: relative; z-index: 1; margin-top: 20px; }
.forecast-panel #prediction .tu-h { display: none; }
.forecast-panel #prediction .tu-pred { margin: 0; font-family: var(--number); font-size: clamp(96px, 8.5vw, 132px); font-weight: 800; line-height: .84; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.forecast-panel #prediction .tu-pred-pending { font-family: var(--serif); font-size: clamp(27px, 3vw, 42px); line-height: 1.15; letter-spacing: -.02em; }
.forecast-panel #prediction .tu-pred-note { margin: 12px 0 0; font-size: 13px; line-height: 1.4; }
.forecast-panel #prediction .tu-meter { position: relative; height: 18px; margin-top: 22px; background: rgba(7,20,47,.12); border: 1px solid var(--sa-ink); }
.forecast-panel #prediction .tu-meter-fill { display: block; height: 100%; background: var(--sa-ink); transition: width .45s cubic-bezier(.16,1,.3,1); }
.window-list { margin-top: 22px; }

#tibo-updates { min-width: 0; }
.updates .tu-switch { display: flex; gap: 8px; margin-bottom: 12px; }
.updates .tu-btn { min-height: 44px; padding: 9px 14px; color: var(--sa-ink); background: transparent; border: 1px solid var(--sa-ink); cursor: pointer; font-size: 14px; font-weight: 750; }
.updates .tu-btn[aria-pressed="true"] { color: var(--sa-paper); background: var(--sa-ink); }
#tibo-updates .tu-list, #tibo-updates .ssr-list, #tibo-updates .tu-rest { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--sa-ink); }
#tibo-updates .ssr-list li { display: grid; grid-template-columns: 145px minmax(0,1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--sa-rule-dark); }
#tibo-updates .tu-item { display: grid; grid-template-columns: 145px minmax(0,1fr); gap: 0 20px; padding: 16px 0; border-bottom: 1px solid var(--sa-rule-dark); }
/* 桌面两列：时间/分类的 meta 固定左列，其余子项（摘要、影响、时间、英文、展开详情）一律排在右列，
   不再按自动布局回落到左列第二行；行距交给各子项自己的 margin。 */
#tibo-updates .tu-item > * { grid-column: 2; }
#tibo-updates .tu-item > .tu-meta { grid-column: 1; grid-row: 1; align-self: start; }
#tibo-updates .tu-meta { display: grid; align-content: start; gap: 6px; font-family: var(--number); font-size: 14px; font-weight: 750; line-height: 1.3; }
#tibo-updates .tu-cat { color: var(--sa-cobalt-deep); }
#tibo-updates .tu-review { color: #8a4029; }
#tibo-updates .tu-sum { margin: 0; font-family: var(--serif); font-size: clamp(20px,1.5vw,24px); font-weight: 700; line-height: 1.25; }
/* 「重要更新」记录的摘要/说明按正文排，不用大标题字号；内容与其中的链接原样保留。 */
#tibo-updates .tu-benefit-sum { margin: 6px 0 0; font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 1.55; overflow-wrap: anywhere; }
#tibo-updates .tu-impact, #tibo-updates .tu-when, #tibo-updates .tu-scope { margin: 7px 0 0; font-size: 14px; line-height: 1.45; }

#tibo-updates details { margin-top: 9px; }
#tibo-updates summary { min-height: 44px; cursor: pointer; font-size: 14px; font-weight: 750; }
#tibo-updates pre { max-width: 100%; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
#tibo-updates .tu-eng { display: flex; flex-wrap: wrap; gap: 6px; }
#tibo-updates .tu-eng-item { display: inline-flex; gap: 6px; padding: 4px 7px; border: 1px solid var(--sa-rule-dark); }
#tibo-updates .tu-morewrap { padding: 14px 0; }

.history-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 22px; }
.calendar-toolbar { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-bottom: 10px; }
.calendar-toolbar h3 { margin: 0; text-align: center; font-family: var(--serif); font-size: 24px; }
.calendar-toolbar button, .calendar .day-button { min-height: 44px; color: var(--sa-ink); background: transparent; border: 1px solid var(--sa-ink); cursor: pointer; font-size: 14px; font-weight: 700; }
.calendar-toolbar button:disabled { cursor: not-allowed; opacity: .46; }
.calendar { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendar th { padding: 9px 2px; font-size: 14px; line-height: 1.25; border-bottom: 1px solid var(--sa-ink); }
.calendar td { height: 64px; padding: 3px; vertical-align: top; border-bottom: 1px solid rgba(7,20,47,.18); }
.calendar .day-button { position: relative; width: 100%; min-height: 58px; padding: 8px 4px; border-color: transparent; font-family: var(--number); }
.calendar .day-button:hover, .calendar .day-button:focus-visible { border-color: var(--sa-ink); }
.calendar .day-button.is-today { outline: 2px solid var(--sa-ink); outline-offset: -3px; }
.calendar .day-button.uncovered { color: var(--sa-muted-ink); opacity: .55; }
.calendar .day-number { display: block; font-family: var(--number); font-size: 24px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.calendar .day-mark { position: absolute; bottom: 7px; left: calc(50% - 7px); width: 7px; height: 7px; background: var(--sa-ink); border-radius: 50%; }
.calendar .credit-mark { left: calc(50% + 3px); background: var(--sa-sky); border: 2px solid var(--sa-orange); }
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 10px 0 0; font-size: 14px; }
.legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.legend .legend-reset::before { background: var(--sa-ink); }
.legend .legend-credit::before { background: var(--sa-sky); border: 2px solid var(--sa-orange); }
#day-detail { margin-top: 20px; padding: 18px; background: var(--sa-paper); border: 1px solid var(--sa-ink); }
#day-detail h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 24px; }
#day-detail .detail-item { padding: 13px 0; border-top: 1px solid var(--sa-rule-dark); }
#day-detail .detail-item h4 { margin: 0 0 5px; font-size: 16px; }
#day-detail .detail-item p { margin: 5px 0; font-size: 14px; line-height: 1.45; }
#day-detail a { display: inline-flex; min-height: 44px; align-items: center; font-size: 14px; font-weight: 750; }

.force-interaction { display: grid; grid-template-columns: 104px minmax(0,1fr); gap: 18px; align-items: center; padding: 0; border: 0; }
.machine { display: grid; min-height: 0; place-items: center; padding: 0; background: transparent; border: 0; }
.key-well { width: 100%; }
#reset-key { width: min(100%,104px); height: 104px; aspect-ratio: 1; padding: 0; color: var(--sa-ink); background: var(--sa-acid); border: 0; border-radius: 14px; cursor: pointer; touch-action: manipulation; user-select: none; box-shadow: 0 8px 0 #819527, 0 12px 20px rgba(3,11,29,.3); transition: transform .1s cubic-bezier(.2,.8,.2,1), box-shadow .1s cubic-bezier(.2,.8,.2,1), background-color .16s ease; }
#reset-key:hover { background: #e3ff78; }
#reset-key:active, #reset-key.is-down { transform: translateY(6px); box-shadow: 0 2px 0 #819527, 0 4px 8px rgba(3,11,29,.28); }
#reset-key:focus-visible { color: var(--sa-paper); background: var(--sa-ink); outline: 3px solid var(--sa-ink); outline-offset: 4px; box-shadow: 0 0 0 2px var(--sa-paper), 0 0 0 7px var(--sa-acid), 0 8px 0 #819527; }
.keycap { display: grid; width: 100%; height: 100%; place-items: center; align-content: center; gap: 1px; border: 1px solid rgba(7,20,47,.45); border-radius: 12px; font-weight: 800; }
.key-en { font-family: var(--number); font-size: 18px; line-height: 1; }
.key-plus { font-family: var(--number); font-size: 30px; line-height: .8; }
.force-feedback { position: relative; display: grid; align-content: center; gap: 9px; min-width: 0; }
#plus-one { min-width: 2ch; color: var(--sa-acid); font-family: var(--number); font-size: 16px; font-weight: 800; opacity: 0; transform: translateY(6px); }
#plus-one.is-visible { animation: force-plus .5s cubic-bezier(.16,1,.3,1) both; }
.feedback-controls { display: grid; gap: 8px; }
.feedback-controls button { display: inline-flex; min-width: 0; min-height: 44px; flex: 1; gap: 4px; align-items: center; justify-content: flex-start; padding: 8px; color: var(--sa-paper); background: transparent; border: 1px solid rgba(245,240,228,.72); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1.15; }
.feedback-controls svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feedback-controls button:hover { border-color: var(--sa-acid); }
.feedback-controls button:focus-visible { color: var(--sa-paper); background: var(--sa-ink); outline: 3px solid var(--sa-ink); outline-offset: 3px; box-shadow: 0 0 0 2px var(--sa-paper); }
.feedback-controls button[aria-pressed="true"] { color: var(--sa-ink); background: var(--sa-acid); border-color: var(--sa-acid); }
@keyframes force-plus { 0% { opacity: 0; transform: translateY(8px) scale(.8); } 28% { opacity: 1; transform: translateY(-2px) scale(1.08); } 72% { opacity: 1; transform: translateY(-5px) scale(1); } 100% { opacity: 0; transform: translateY(-13px) scale(.92); } }
.site-footer .ops-note { grid-column: 1 / -1; margin: 0; color: var(--sa-on-dark-muted); font-size: 13px; }
.site-footer .ops-note[hidden] { display: none; }

@media (max-width: 1180px) {
  .site-header { grid-template-columns: minmax(250px,1fr) auto minmax(170px,.65fr); }
}
@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  .brand-block { grid-column: 1; grid-row: 1; }
  .sample-mark { grid-column: 2; grid-row: 1; }
  .primary-nav { grid-column: 1 / -1; grid-row: 2; }
  .forecast-panel { min-height: 0; }
}
@media (max-width: 620px) {
  .site-header { grid-template-columns: minmax(0,1fr) auto; }
  #headline-en { font-size: clamp(36px,10.3vw,45px); }
  #headline { font-size: 24px; }
  .clocks { grid-template-columns: 1fr; }
  .clock-pt { padding-left: 0; border-top: 1px solid var(--sa-rule-light); border-left: 0; }
  .elapsed-digits { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .elapsed-digits > span:nth-child(3) { border-left: 0; }
  .elapsed-digits > span:nth-child(n+3) { border-top: 1px solid var(--sa-rule-light); }
  .forecast-panel #prediction .tu-pred { font-size: clamp(72px, 8vw, 96px); }
  .forecast-panel #prediction .tu-pred-pending { font-size: 30px; }
  #tibo-updates .tu-item, #tibo-updates .ssr-list li { grid-template-columns: 1fr; gap: 8px; }
  /* 手机：取消两列，meta 与其余子项全部回到第一列、按文档顺序排。 */
  #tibo-updates .tu-item > * { grid-column: 1; grid-row: auto; }
  .calendar-toolbar { grid-template-columns: 1fr 1fr; }
  .calendar-toolbar h3 { grid-column: 1 / -1; grid-row: 1; }
  .calendar th { font-size: 14px; }
  .calendar td { height: 54px; }
  .calendar .day-button { min-height: 48px; padding: 6px 0; font-size: 13px; }
  .calendar .day-number { font-size: 20px; }
  .force-interaction { grid-template-columns: 104px minmax(0,1fr); gap: 12px; }
}
@media (max-width: 350px) {
  #headline-en { font-size: 36px; }
  #headline { font-size: 24px; }
  .forecast-panel #prediction .tu-pred { font-size: clamp(72px, 8vw, 96px); }
}

/* Hidden is a functional state, including missing source links and disabled entries. */
[hidden] { display: none !important; }


/* Preserve reading order when the hero becomes a mobile flex column. */
#next-reset { order: 4; }
.hero-times > .elapsed-board { order: 3; }
.key-times { grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); }
.key-times > div { overflow-wrap: anywhere; }
.brand-name { line-height: 1.3; }
#elapsed-en { display:block; margin-top:4px; }
@media(max-width:620px) { .key-times { grid-template-columns:1fr; } .calendar th { font-size: 13px; } .sample-mark { display:none; } .brand-block { grid-column:1 / -1; } }

.site-header { grid-template-columns: minmax(240px,1fr) auto minmax(280px,370px); }
.site-header .sample-mark { display: none; }
.telegram-header-entry { display: block; margin: 0; padding: 0; color: var(--sa-ink); background: var(--sa-sky); border: 1px solid var(--sa-ink); border-radius: 8px; }
.telegram-header-entry a { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 10px; align-items: center; min-height: 56px; padding: 10px 12px; color: inherit; line-height: 1.25; text-decoration: none; }
.telegram-header-entry svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.telegram-entry-copy { display: grid; gap: 2px; min-width: 0; }
.telegram-entry-copy strong { font-size: 16px; line-height: 1.25; }
.telegram-entry-copy small { color: var(--sa-ink); font-size: 13px; font-weight: 600; line-height: 1.35; }
.telegram-header-entry a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.telegram-header-entry a:focus-visible { outline: 3px solid var(--sa-ink); outline-offset: 4px; }
.telegram-header-entry:focus-within { outline: 0; box-shadow: none; }
@media(max-width:1100px) { .site-header { grid-template-columns: 1fr auto; } .primary-nav { grid-column: 1; grid-row: 2; } .telegram-header-entry { grid-column: 2; grid-row: 1 / 3; max-width: 350px; } }
@media(max-width:620px) { .site-header { grid-template-columns: minmax(0,1fr); gap: 16px; } .brand-block { grid-column: 1; grid-row: 1; } .primary-nav { grid-column: 1; grid-row: 2; } .telegram-header-entry { grid-column: 1; grid-row: 3; width: 100%; max-width: none; } .telegram-header-entry a { padding-inline: var(--page-pad); } }

/* Required geometry for the existing flip controller, without legacy page styling. */
.elapsed-digits strong{display:flex;align-items:center;justify-content:center;height:1.32em;box-sizing:border-box}
.elapsed-digits strong{padding:0 .2em;gap:.05em;border-radius:.24em;background:#161a17;color:#f6f5ef;box-shadow:inset 0 0 0 1px rgba(246,245,239,.14)}
.elapsed-digits strong>.fc{position:relative;width:.62em;height:1.08em;perspective:180px;font-variant-numeric:tabular-nums}
.elapsed-digits strong>.fc-plain{display:flex;align-items:center;justify-content:center;width:auto;background:none}
.elapsed-digits strong .fc-half{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:linear-gradient(#242b25,#191f1a)}
.elapsed-digits strong .fc-half-top{top:0;border-radius:.16em .16em 0 0}
.elapsed-digits strong .fc-half-bottom{bottom:0;border-radius:0 0 .16em .16em}
.elapsed-digits strong .fc-top,.elapsed-digits strong .fc-bottom,.elapsed-digits strong .fc-glyph-front,.elapsed-digits strong .fc-glyph-back{position:absolute;left:0;width:100%;height:200%;display:flex;align-items:center;justify-content:center;line-height:1}
.elapsed-digits strong .fc-top,.elapsed-digits strong .fc-glyph-front{top:0}
.elapsed-digits strong .fc-bottom,.elapsed-digits strong .fc-glyph-back{top:-100%}
.elapsed-digits strong .fc-leaf{top:0;z-index:2;transform-origin:50% 100%;transform-style:preserve-3d;visibility:hidden;border-radius:.16em .16em 0 0;background:linear-gradient(#242b25,#1b211c)}
.elapsed-digits strong .fc-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;border-radius:.16em .16em 0 0}
.elapsed-digits strong .fc-face-back{transform:rotateX(180deg);border-radius:0 0 .16em .16em}
.elapsed-digits strong>.fc::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:rgba(246,245,239,.18);z-index:3;pointer-events:none}
.elapsed-digits strong>.fc.is-flip .fc-leaf{visibility:visible;animation:fc-fall .42s cubic-bezier(.55,.06,.4,.95) forwards}
@keyframes fc-fall{from{transform:rotateX(0)}to{transform:rotateX(-180deg)}}
@media(prefers-reduced-motion:reduce){.elapsed-digits strong>.fc.is-flip .fc-leaf{visibility:hidden;animation:none}}

.elapsed-digits strong { background:var(--sa-ink);color:var(--sa-paper); }

@media (min-width: 901px) {
  .hero-main { padding-block: 24px; }
  .observation-head { align-items: center; }
  .key-times > div { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 16px; align-items: center; padding-block: 10px; }
  .key-times dt { margin-bottom: 0; }
  .elapsed-board { margin-top: 14px; padding-top: 12px; }
}

/* Navigation anchors clear the desktop sticky header. */
#status, #updates, #history, #force { scroll-margin-top: 112px; }
@media (max-width: 620px) {
  #status, #updates, #history, #force { scroll-margin-top: 72px; }
  .month-stats { gap: 10px; margin-top: 22px; }
  .force-card { padding: 14px; }
}
@media (max-width: 350px) {
  .force-card { padding: 12px; }
  .force-interaction { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #plus-one.is-visible { animation: none; opacity: 1; transform: none; }
}


@media (max-width: 620px) {
  .force-interaction { grid-template-columns: 96px minmax(0, 1fr); }
  #reset-key { width: 96px; height: 96px; }
  .feedback-controls { flex-direction: column; }
  .feedback-controls button { flex: none; word-break: keep-all; }
}

/* ── 重要更新（Important updates）───────────────────────────────────────────── */
/* 首页右栏第一块：深新闻红底、白字为主、淡粉白为辅。一次只显示一条故事（轮播），
   编号 n/N；自动切换 8 秒一次、整条淡入 200ms。所有轮播条目放在同一个网格单元里，
   块高按最高一条撑住，切换时不跳动；长标题与原条件不被截断。 */
.benefit-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 20px var(--page-pad) 16px;
  color: var(--bb-on-acid);
  background: var(--bb-acid);
  border: 0;
  border-bottom: 1px solid var(--sa-ink);
  border-radius: 0;
}
.benefit-bar-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--bb-rule); }
.benefit-bar-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; margin: 0; font-size: 30px; line-height: 1.2; background: var(--bb-acid); color: var(--bb-on-acid); }
.bb-eyebrow { font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; background: var(--bb-acid); color: var(--bb-on-acid); }
.bb-title-zh { font-size: 16px; line-height: 1.4; font-weight: 600; background: var(--bb-acid); color: var(--bb-on-acid-soft); }
#benefit-bar-body { display: flex; flex-direction: column; min-width: 0; margin-top: 12px; background: var(--bb-acid); color: var(--bb-on-acid); }
.bb-track { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; background: var(--bb-acid); color: var(--bb-on-acid); }
.bb-slide { grid-area: 1 / 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; padding: 0; background: var(--bb-acid); color: var(--bb-on-acid); }
.bb-slide[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
.bb-copy { min-width: 0; background: var(--bb-acid); color: var(--bb-on-acid); }
.bb-title { display: block; margin: 0; font-size: 24px; line-height: 1.3; font-weight: 700; overflow-wrap: break-word; background: var(--bb-acid); color: var(--bb-on-acid); }
.bb-s-title { display: block; margin: 0; font-size: 20px; line-height: 1.4; font-weight: 700; overflow-wrap: break-word; background: var(--bb-acid); color: var(--bb-on-acid); }
/* 被截成一行标题的完整原文（可能是整段原帖）：只在展开区出现，按正文排、不抢标题字级。 */
.bb-full { display: block; margin: 0 0 8px; font-size: 16px; line-height: 1.55; overflow-wrap: break-word; white-space: pre-wrap; background: var(--bb-acid); color: var(--bb-on-acid); }
.bb-summary { display: block; margin-top: 8px; font-size: 16px; line-height: 1.5; overflow-wrap: break-word; background: var(--bb-acid); color: var(--bb-on-acid); }
.bb-zh { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; overflow-wrap: break-word; background: var(--bb-acid); color: var(--bb-on-acid-soft); }
.bb-story .bb-title + .bb-zh { display: inline; margin-left: 10px; }
.bb-meta, .bb-arrival, .bb-last-verified { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; overflow-wrap: break-word; background: var(--bb-acid); color: var(--bb-on-acid-faint); }
.benefit-bar a { background: var(--bb-acid); color: var(--bb-on-acid); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.benefit-bar a:hover { color: var(--bb-on-acid); background: var(--bb-hover); }
.bb-link { display: inline-flex; justify-self: start; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 0 14px; border: 1px solid rgba(255,255,255,.6); border-radius: 6px; font-size: 16px; line-height: 1.4; text-decoration: none; background: var(--bb-acid); color: var(--bb-on-acid); }
.bb-link:hover { border-color: #fff; background: var(--bb-hover); }
.bb-link:focus-visible, .bb-controls button:focus-visible, .bb-all:focus-visible { background: var(--bb-acid); outline: 3px solid var(--bb-on-acid); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255,255,255,.24); }
.bb-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.bb-controls button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; color: var(--bb-on-acid); background: var(--bb-acid); border: 1px solid rgba(255,255,255,.6); border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 700; line-height: 1; }
.bb-controls button:hover { background: var(--bb-hover); border-color: #fff; }
.bb-controls button:disabled { opacity: .5; cursor: default; }
.bb-pause { margin-left: auto; font-size: 14px; }
.bb-all { display: inline-flex; align-self: flex-end; align-items: center; justify-content: flex-end; min-height: 44px; margin-top: 6px; padding: 0; border: 0; font-size: 14px; line-height: 1.4; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; background: var(--bb-acid); color: var(--bb-on-acid); }
.bb-all:hover { color: var(--bb-on-acid); background: var(--bb-hover); }
.bb-story.bb-alert { border: 1px solid rgba(255,255,255,.8); border-left: 4px solid var(--bb-on-acid); border-radius: 6px; padding: 12px; }
@media (max-width: 900px) {
  #benefit-bar-body { margin-top: 10px; }
}
@media (max-width: 620px) {
  .benefit-bar { padding: 16px var(--page-pad); }
  .benefit-bar-title { padding-right: 0; }
  .bb-eyebrow { font-size: 24px; }
  .bb-title { font-size: 20px; }
  .bb-story .bb-title + .bb-zh { display: block; margin-left: 0; }
  .bb-s-title { font-size: 20px; }
  .bb-pause { margin-left: 0; }
}

.force-score { position: relative; min-width: 0; }
.force-value { margin: 14px 0 20px; color: var(--sa-paper); background: var(--sa-ink); font-family: var(--number); font-size:clamp(64px,22vw,76px); font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.force-score #plus-one { position: absolute; right: 0; bottom: 8px; }
.feedback-controls [data-control-state] { margin-left: auto; font-size: 13px; color: var(--sa-acid); background: var(--sa-ink); }
.feedback-controls button[aria-pressed="true"] { color: var(--sa-paper); background: var(--sa-ink); border-color: rgba(245,240,228,.5); }
body[data-effects="off"] #force #reset-key { transition: none; }

/* Shared bilingual headings and consolidated arrival date. */
.updates h2, .history h2 { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 14px; }
#elapsed-at { margin:12px 0 0; color:var(--sa-on-dark-muted); font-size:16px; font-weight:600; line-height:1.4; }

.tu-zone { margin-left:auto; font-size:14px; color:var(--sa-muted-ink); }

/* One content column per event: title, excerpt and action flow together, independent of meta height. */
#tibo-updates .tu-item { padding-block:10px; }
#tibo-updates .tu-body { min-width:0; }
#tibo-updates .tu-body > .tu-impact:first-child,
#tibo-updates .tu-body > .tu-when:first-child { margin:0;font-family:var(--serif);font-size:clamp(20px,1.5vw,24px);font-weight:700;line-height:1.25; }

#tibo-updates .tu-src > summary { display:inline-flex;align-items:center; }

/* ── 英文视图（/en/）──────────────────────────────────────────────────────────
   两种语言共用同一份 DOM 与事实；英文页只显示英文那一半，并隐藏没有英文对应的
   中文辅助行。中文页（根路径）完全不受这些规则影响。 */
html[data-lang="en"] [lang="zh-CN"] { display: none !important; }
html[data-lang="en"] #elapsed-label { display: none; }
html[data-lang="en"] #elapsed-en { display: block; background: var(--sa-cobalt); color: var(--sa-on-dark-muted); font-size: 14px; }
html[data-lang="en"] .bb-title-zh,
html[data-lang="en"] .h2-zh,
html[data-lang="en"] .title-zh { display: none !important; }
html[data-lang="en"] .lang-switch a[aria-current="true"] { background: var(--sa-ink); color: var(--sa-paper); }
html[data-lang="en"] .lang-switch a[hreflang="en"] { background: var(--sa-ink); color: var(--sa-acid); }

/* ── 2026-10-31 首屏有界修正（站主 390x844 实拍）────────────────────────────────
   1) 中文根：只有中文标题这一个主标题（英文版 /en/ 仍是英文主标题）。品牌英文口号
      「May the tokens be with you.」与 Tibo 原帖链接一个字都没动。
   2) 蓝卡只留主状态：标题 + 事实行 + 公告时间 + 原帖来源；时区选择器与详细换算搬到
      预测摘要之后的 hero-times（手机顺序：状态 → 轮播 → 概率 → 时间细节）。 */
html:not([data-lang="en"]) #headline-en { display: none; }
html:not([data-lang="en"]) #status-title { gap: 0; }
html:not([data-lang="en"]) #headline { margin-top: 0; font-size: clamp(31px, 3.5vw, 44px); line-height: 1.18; }

.status-announce { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 12px 0 0; font-size: 14px; line-height: 1.4; }
.status-announce .sa-label { background: var(--sa-cobalt); color: var(--sa-on-dark-muted); font-size: 13px; font-weight: 650; }
.status-announce time { font-family: var(--number); font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; }
.status-announce small { background: var(--sa-cobalt); color: var(--sa-on-dark-muted); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.hero-copy { padding: 2px 0 14px; }
.source-row { margin-top: 6px; }

.hero-times { padding-top: 4px; }
.hero-times > .key-times { margin: 0 0 16px; }
.hero-times > .key-times > div { padding-top: 14px; padding-bottom: 14px; }
.hero-times #recent-reset { margin: 0 0 14px; }

/* 2026-11-01：没有可用的未来时间时，这一行只剩时区控件。它就不再是一条空的「时间工具条」：
   去掉上下边框与分栏线、收掉内边距，只留一行标签 + 选择器；时区照旧可用、可点区不变。 */
.key-times[data-sparse="true"] { grid-template-columns: minmax(0, 1fr); border-top: 0; border-bottom: 0; }
.key-times[data-sparse="true"] > div { padding-block: 6px 0; }
.key-times[data-sparse="true"] > div + div { padding-left: 0; border-top: 0; border-left: 0; }
.key-times[data-sparse="true"] .timezone-tools { width: min(360px, 100%); }

/* 3) 深红轮播：一条标题 + 最少必要范围/条件 + 可见来源；长正文收进标题自带的展开区。 */
.benefit-bar { padding: 14px var(--page-pad) 12px; }
.benefit-bar-head { padding-bottom: 8px; }
.benefit-bar-title { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.25; }
.bb-eyebrow { font-size: clamp(18px, 1.7vw, 22px); }
.bb-title-zh { font-size: 14px; }
#benefit-bar-body { margin-top: 6px; }
.bb-slide { gap: 6px; }
.bb-detail { min-width: 0; }
.bb-detail > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0; list-style: none; cursor: pointer; }
.bb-detail > summary .bb-title { min-width: 0; }
.bb-detail > summary::-webkit-details-marker { display: none; }
.bb-detail-body { padding: 0 0 4px; }
.bb-title { margin: 0; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.35; }
.bb-summary { margin: 0; font-size: 16px; line-height: 1.55; }
.bb-meta, .bb-arrival, .bb-last-verified { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; }
.bb-controls { margin-top: 8px; gap: 6px; }
.bb-all { margin-top: 2px; }

/* 4) 手机：导航与语言入口换行而不是被裁切；状态区不再用整块时区表把首屏挤走。 */
@media (max-width: 620px) {
  .site-header { gap: 8px 10px; padding: 10px var(--page-pad); }
  .primary-nav { flex-wrap: wrap; overflow: visible; row-gap: 2px; }
  .primary-nav .lang-switch { margin-left: auto; padding-left: 0; border-left: 0; }
  html:not([data-lang="en"]) #headline { font-size: 30px; }
  .hero-main { padding: 16px var(--page-pad) 18px; }
  .hero-copy { padding: 0 0 2px; }
  .fact-line { margin-top: 10px; }
  .status-announce { margin-top: 10px; }
  .benefit-bar { padding: 12px var(--page-pad) 10px; }
  .bb-eyebrow { font-size: 20px; }
  .bb-title { font-size: 20px; }
}


/* Compact controls keep the current headline above the forecast. */
#benefit-bar-body { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:8px; }
.bb-track { grid-column:1 / -1; }
.bb-controls { grid-column:1; }
.bb-all { grid-column:2; grid-row:2; margin:0; }
.bb-slide:has(.bb-detail:not([open])) > .bb-link { display:none; }
@media (max-width:620px) { .benefit-bar-head { padding-bottom:4px; } .bb-meta { line-height:1.3; } }
/* In the Chinese view, navigation uses one language; brand motto remains bilingual. */
html:not([data-lang="en"]) .primary-nav > a > span:first-child { display:none; }
html:not([data-lang="en"]) .primary-nav > a > span + span { font-size:18px; font-weight:700; }
@media (max-width:620px) {
  .primary-nav { gap:12px; }
  .primary-nav .lang-switch { margin-left:auto; }
}
@media (max-width:620px) {
  .primary-nav { flex-wrap:nowrap; gap:4px; }
  .primary-nav > a { min-width:44px; flex:1 1 auto; }
  .primary-nav .lang-switch { flex:0 0 auto; gap:0; }
  .primary-nav .lang-switch a { min-width:44px; flex:0 0 auto; padding-inline:4px; }
}
@media (max-width:360px) {
  .primary-nav { flex-wrap:wrap; }
  .primary-nav .lang-switch { margin-left:auto; }
}
@media (max-width:620px) {
  html[data-lang="en"] .primary-nav { gap:6px; }
  html[data-lang="en"] .primary-nav > a { min-width:0; flex:0 0 auto; font-size:16px; }
  html[data-lang="en"] .primary-nav .lang-switch { margin-left:auto; }
}
@media (max-width:380px) { html[data-lang="en"] .primary-nav { flex-wrap:wrap; } }
html:not([data-lang="en"]) .benefit-bar-title .bb-eyebrow,
html:not([data-lang="en"]) .section-heading h2 > span:first-child { display:none; }
html:not([data-lang="en"]) .benefit-bar-title .bb-title-zh { font-size:20px; color:var(--bb-on-acid); background:var(--bb-acid); }

/* ── 2026-10-31 Reset-first 首屏（已批准）───────────────────────────────────────
   桌面：红色精选轮播横跨主区，位于状态与预测之前；其下左栏状态+时间（同一块钴蓝），
   右栏预测+原力（同一块酸黄）。两栏各自按内容高度收口，不因对侧更高而被拉伸留白。
   手机：状态 → 概率 → 新闻 → 时间 → 原力。时区选择器仍在「时间」块首位。 */
.brand-name-en { display: none; }
.brand-name-zh { display: inline; }
html[data-lang="en"] .brand-name-en { display: inline; }
html[data-lang="en"] .brand-name-zh { display: none; }
html[data-lang="zh"] .brand-name-en { display: none; }
html[data-lang="zh"] .brand-name-zh { display: inline; }
.brand-purpose { display: block; color: var(--sa-on-dark-muted); font-size: 14px; line-height: 1.3; }
.brand-purpose-en { display: none; }
html[data-lang="en"] .brand-purpose-en { display: inline; }
html[data-lang="en"] .brand-purpose-zh { display: none; }
html[data-lang="zh"] .brand-purpose-en { display: none; }
html[data-lang="zh"] .brand-purpose-zh { display: inline; }

/* 单语言视图：中文页不重复英文辅助行（品牌英文口号与原文引用不在此列）。 */
html:not([data-lang="en"]) .skip-link > span:first-child,
html:not([data-lang="en"]) #elapsed-en,
html:not([data-lang="en"]) .history-heading h2 > span:first-child { display: none; }

.hero {
  grid-template-columns: minmax(0, 1.66fr) minmax(340px, .74fr);
  grid-template-areas: "news news" "status forecast" "times force";
  align-items: stretch;
}
.hero > .hero-main { border-bottom: 0; }
.hero > .hero-times { padding-top: 0; }
/* 原力卡仍留在右栏：区块本身是酸黄底，深色卡片只占内层，桌面观感与上一版一致。
   2026-11-01：右栏最后一块跟着网格行一起撑满（原先 align-self:start 会在对侧更高时
   在右栏底部留下一条海军蓝断层，看起来像两栏错位）。 */
.hero > #force {
  display: block;
  align-self: stretch;
  margin: 0;
  padding: 0 var(--page-pad) clamp(20px, 2.2vw, 28px);
  color: var(--sa-ink);
  background: var(--sa-acid);
  border: 0;
  border-bottom: 1px solid var(--sa-ink);
  border-radius: 0;
  overflow: visible;
}

@media (max-width: 1180px) {
  .hero { grid-template-columns: minmax(0, 1.5fr) minmax(320px, .8fr); }
}
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-areas: "status" "forecast" "news" "times" "force";
  }
  .hero > #force {
    padding: 16px var(--page-pad) 0;
    background: transparent;
    border-bottom: 0;
  }
  .force-card { border-color: var(--sa-rule-light); }
}
@media (max-width: 620px) {
  .hero > .hero-main { padding-bottom: 0; }
  .hero-times > .elapsed-board { margin-top: 12px; padding-top: 14px; padding-bottom: 18px; }
  .hero > #force { padding: 12px var(--page-pad) 0; }
}


/* Desktop: restore the original left-blue / right-forecast+force composition. The trusted
   recent-time block flexes inside the blue column instead of leaving a stretched empty tail. */
@media (min-width: 901px) {
  .hero {
    grid-template-areas: "news news" "status forecast" "times forecast" "times force";
    grid-template-rows: auto max-content minmax(max-content, 1fr) max-content;
    align-content: start;
  }
  .hero > .hero-main { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
  .hero > .hero-times { padding-top: 0; padding-bottom: 20px; }
  .hero > .hero-times > .key-times { margin-bottom: 0; }
  .hero-times > .elapsed-board { flex: 1 1 auto; min-height: max-content; display: grid; grid-template-rows: auto auto minmax(max-content, 1fr) auto; }
  .hero-times > .elapsed-board .elapsed-label { align-self: start; font-size: 16px; font-weight: 650; }
  .hero-times > .elapsed-board .elapsed-digits { align-self: stretch; align-items: center; }
  .hero-times > .elapsed-board .elapsed-digits > span { padding-block: 18px; }
  .hero-times > .elapsed-board .elapsed-digits strong { font-size: clamp(48px, 4.2vw, 60px); }
  .hero-times > .elapsed-board .elapsed-digits small { font-size: 16px; font-weight: 650; }
  .hero-times > .elapsed-board #elapsed-at { align-self: end; margin-top: 14px; font-size: 16px; font-weight: 650; }
  .benefit-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 22px; padding-block: 12px; }
  .benefit-bar-head { padding: 0; border: 0; }
  #benefit-bar-body { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; margin: 0; }
  .bb-controls, .bb-all { margin: 0; align-self: center; }
  .bb-title { font-size: clamp(20px, 1.4vw, 24px); }
  .bb-meta { margin-top: 4px; }
}

@media (min-width: 901px) {
  #benefit-bar-body .bb-track { grid-column: 1; grid-row: 1; }
  #benefit-bar-body .bb-controls { grid-column: 2; grid-row: 1; }
  #benefit-bar-body .bb-all { grid-column: 3; grid-row: 1; }
}

/* ── 2026-11-01 手机页头：两行收口，Telegram 占右上角 ────────────────────────────
   原来品牌、导航、Telegram 各占一行，首屏在 390px 上先被页头吃掉三段高度。
   现在品牌与 Telegram 同行（Telegram 在右上、浅青底、深字，仍是整块外链），导航单独一行。 */
@media (max-width: 620px) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; min-height: 0; }
  .brand-block { grid-column: 1; grid-row: 1; align-self: center; }
  .brand-name { font-size: 24px; }
  .brand-motto { font-size: 16px; }
  .primary-nav { grid-column: 1 / -1; grid-row: 2; }
  .telegram-header-entry { grid-column: 2; grid-row: 1; width: auto; max-width: 44vw; align-self: center; }
  .telegram-header-entry a { grid-template-columns: 22px minmax(0, 1fr); gap: 8px; min-height: 48px; padding: 8px 10px; }
  .telegram-header-entry svg { width: 22px; height: 22px; }
  .telegram-entry-copy strong { font-size: 14px; line-height: 1.2; }
  .telegram-entry-copy small { display: none; }
}

/* Compact information groups; shared data/state logic is unchanged. */
.key-times[data-sparse="true"] .timezone-tools { display:flex;align-items:center;gap:12px;width:auto; }
.key-times[data-sparse="true"] .timezone-tools dt { margin:0; }
.key-times[data-sparse="true"] .timezone-tools dd { display:flex;align-items:center;gap:12px;margin:0; }
.key-times[data-sparse="true"] .select-shell { width:180px;max-width:100%; }
.key-times[data-sparse="true"] .time-zone-status { margin:0; }
@media(min-width:901px) {
  .hero { grid-template-columns:minmax(0,1.45fr) minmax(360px,1fr); }
  .hero > .hero-main { padding-bottom:20px; }
  .hero-times { padding-bottom:24px; }
  .forecast-panel { padding-bottom:20px; }
  .forecast-panel .window-list { margin-top:16px; }
  .forecast-panel .window-list > div { padding-block:12px; }
  #force .force-card { display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:12px 16px;padding:20px; }
  #force .force-copy { grid-column:1;grid-row:1;align-self:start; }
  #force .force-copy h2 { font-size:24px;margin:0; }
  #force .force-score { grid-column:1;grid-row:1;margin:48px 0 0;align-self:start; }
  #force .force-value { font-size:clamp(44px,4.5vw,68px);line-height:1.1; }
  #force .force-interaction { grid-column:2;grid-row:1;display:block;margin:0; }
  #force .force-feedback { margin-top:12px; }
  #force .feedback-controls { gap:6px; }
  #force .feedback-controls button { min-height:36px;padding:6px;font-size:14px; }
  #force .feedback-controls svg { width:16px;height:16px; }
}
@media(max-width:620px) {
  .key-times[data-sparse="true"] .timezone-tools dd { flex-wrap:wrap;gap:4px;min-width:0; }
  .key-times[data-sparse="true"] .select-shell { width:150px; }
  .key-times[data-sparse="true"] .time-zone-status { font-size:14px; }
}

@media(min-width:901px) {
  #force .force-card { padding-bottom:78px; }
  #force .force-score { align-self:start; }
  #force .force-feedback { position:absolute;bottom:20px;left:20px;right:20px;margin:0; }
  #force .feedback-controls { display:flex;gap:10px; }
  #force .feedback-controls button { min-height:44px;padding:8px 12px;font-size:14px; }
  .forecast-panel #prediction { margin-top:16px; }
  .forecast-panel #prediction .tu-pred { font-size:clamp(96px,8vw,112px); }
  .forecast-panel #prediction .tu-meter { margin-top:16px; }
}
@media(max-width:380px) {
  .site-header { grid-template-columns:minmax(0,1fr); }
  .brand-block { grid-column:1;grid-row:1; }
  .telegram-header-entry { grid-column:1;grid-row:2;width:100%;max-width:none; }
  .telegram-header-entry a { display:flex;min-height:44px; }
  .primary-nav { grid-column:1;grid-row:3;gap:12px; }
  .primary-nav a { font-size:14px; }
}

/* 2026-11-01 重要动态：单行酒红新闻带。服务端保持一条可横向阅读的静态序列；
   浏览器只轮转这组真实条目，不复制可交互内容。 */
.benefit-bar {
  display: block;
  min-width: 0;
  padding: 10px var(--page-pad);
}
.benefit-bar-head {
  min-width: 0;
  padding: 0 0 7px;
  border-bottom: 1px solid var(--bb-rule);
}
.benefit-bar-title { gap: 7px; font-size: 20px; line-height: 1.2; }
.bb-eyebrow { font-size: 20px; line-height: 1.2; }
.bb-title-zh { font-size: 14px; }
#benefit-bar-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "ticker ticker" "controls all";
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  margin-top: 7px;
}
.bb-viewport {
  grid-area: ticker;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.bb-viewport::-webkit-scrollbar { display: none; }
.bb-viewport[data-bb-reading="true"] {
  -webkit-mask-image: none;
  mask-image: none;
}
.bb-track {
  display: flex;
  width: max-content;
  min-width: 100%;
}
.bb-sequence {
  display: flex;
  flex: none;
  align-items: flex-start;
  width: max-content;
  padding-left: 24px;
}
.bb-slide {
  display: block;
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
  min-width: 0;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid var(--bb-rule);
  border-radius: 0;
  background: var(--bb-acid);
  color: var(--bb-on-acid);
}
.bb-slide:first-child { padding-left: 0; }
.bb-copy { min-width: 0; }
.bb-detail { min-width: 0; }
.bb-detail > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  list-style: none;
  cursor: pointer;
}
.bb-detail > summary::-webkit-details-marker { display: none; }
.bb-detail > summary:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--bb-on-acid), 0 0 0 6px rgba(255,255,255,.24);
}
.bb-title {
  display: block;
  flex: none;
  margin: 0;
  background: var(--bb-acid);
  color: var(--bb-on-acid);
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.bb-detail-action {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 14px;
  min-height: 44px;
  background: var(--bb-acid);
  color: var(--bb-on-acid-soft);
}
.bb-detail-icon::before { content: "›"; font-family: var(--number); font-size: 16px; }
.bb-detail[open] .bb-detail-icon::before { content: "⌄"; }
.bb-detail-body {
  width: clamp(260px, 44vw, 640px);
  max-width: calc(100vw - 48px);
  padding: 3px 0 4px;
}
.bb-full,
.bb-summary {
  margin: 0 0 7px;
  background: var(--bb-acid);
  color: var(--bb-on-acid);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.bb-slide-facts { display: grid; gap: 2px; }
.bb-meta,
.bb-arrival,
.bb-last-verified {
  margin: 2px 0 0;
  background: var(--bb-acid);
  color: var(--bb-on-acid-faint);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.bb-link {
  min-height: 44px;
  margin-top: 6px;
  padding-inline: 10px;
  font-size: 13px;
}
.bb-controls {
  grid-area: controls;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin: 0;
}
.bb-controls button {
  min-width: 44px;
  min-height: 44px;
  padding-inline: 9px;
  font-size: 14px;
}
.bb-pause { margin-left: 0; }
.bb-all {
  grid-area: all;
  align-self: center;
  min-height: 44px;
  margin: 0;
  font-size: 13px;
}
@media (min-width: 901px) {
  .benefit-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px 22px;
    padding-block: 9px;
  }
  .benefit-bar-head { padding: 0; border-bottom: 0; }
  #benefit-bar-body {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "ticker controls all";
    gap: 12px;
    margin: 0;
  }
}
@media (max-width: 620px) {
  .benefit-bar { padding: 9px var(--page-pad) 8px; }
  .benefit-bar-title { font-size: 18px; }
  .bb-eyebrow { font-size: 18px; }
  .bb-slide {
    padding-inline: 11px;
  }
  .bb-slide:first-child { padding-left: 0; }
  .bb-title { font-size: 16px; }
  .bb-controls { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-viewport { scroll-behavior: auto; }
}

/* ── 2026-11-01 时区联动：只作用于时间区 ──────────────────────────────────────
   浏览器按所选时区重画之后，主时间是 key-times 里的「预计重置时间」卡（紧挨选择器），
   #next-clocks 只剩「原帖 PT / 北京时间」的紧凑对照；与所选区相同的那一栏合并掉，
   所以这里把两栏压小、去掉分栏线，并在合并后收成一列。无 JS（服务端渲染）时没有
   data-zone-live，仍保持原来的大号北京 / PT 对照。 */
html[data-zone-live="true"] #next-clocks { margin-top: 10px; border-block: 0; }
html[data-zone-live="true"] #next-clocks > div { padding-block: 8px; }
html[data-zone-live="true"] .clocks time { font-size: clamp(19px, 1.7vw, 24px); }
html[data-zone-live="true"] #next-clocks[data-merged] { grid-template-columns: minmax(0, 1fr); }
html[data-zone-live="true"] #next-clocks[data-merged] > div { padding-left: 0; border-left: 0; }
/* 主时间卡与选择器同处一处：给一个比对照略大的字号，仍沿用原配色与橙条。 */
.key-times .is-expected time { font-size: clamp(22px, 2vw, 27px); }
/* 范围块自己的区名：酸黄底上按深色排（仍是时间区局部）。 */
#next-range-zone-label { color: var(--sa-ink); opacity: .72; }
/* 范围态下原帖 PT / 北京时间的紧凑对照：一条小字，紧贴所选区范围，不另起卡片。 */
#next-range-compare { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; opacity: .75; }