/* Gate 0809 受影響用戶集結站
 *
 * 設計取向：像一份「卷宗」，不像一個「行銷頁」。
 * 這頁的說服力全部來自數字與可複驗的來源，所以版面要做的事只有兩件：
 *   1. 讓數字大、對齊、好比較（tabular-nums，右對齊）
 *   2. 讓每個數字旁邊的「來源」一眼看得到
 * 不要動畫、不要漸層、不要情緒色。唯一的強調色是紅色，只給「尚未補償」用。
 *
 * 主色調跟證據圖表對齊（圖表底是白的、接管價那條線是紅的），
 * 所以整站以淺色為主，深色模式只是把底翻黑，圖表仍然給白底卡片托住。
 */

/* 單一深色主題。
 *
 * ⚠ 這裡**沒有**淺色模式，也不要加回來。使用者 2026-08-24 指定「網頁整體改成黑底」。
 * 之前那套 prefers-color-scheme 雙主題已經移除 —— 兩份色票要一起維護，
 * 而首頁那兩張引用卡本來就寫死各自平台的顏色，雙主題只會讓對比一直對不準。
 *
 * /evidence 的圖表是白底 PNG，所以 figure img 保留白底卡片托著它。
 */
:root {
  --bg: #0a0a0c;
  --surface: #141519;
  --surface-2: #1c1d22;
  --text: #eceef2;
  --text-2: #a5a8b0;
  --text-3: #71747c;
  --line: #24262c;
  --line-strong: #383b44;
  --accent: #ff4436;          /* 只給「尚未賠付」與那個章用 */
  --accent-soft: #2a1310;
  --up: #0ecb81;              /* K 線的漲綠：只給「已賠付」與進度條已賠的那段用 */
  --support: #ffb020;         /* 琥珀黃：只給首頁「其他 Gate 事件的受災戶…聲援」那行連結。
                                 使用者 2026-09-13：「要改成另一個顯眼的顏色」——不能用紅（欠款／指控）
                                 也不能用綠（已賠付），黑底上黃最跳、而且全站沒別的東西用黃。 */
  --accent-deep: #b3241a;     /* 暗紅：slogan 的兩個動詞與兩張卡上的章。像乾掉的印泥，
                                 跟 --accent 那個亮紅（尚未賠付、CTA）刻意分開 */
  --ok: #4ec98a;
  --warn: #e0b054;
  --warn-soft: #241d10;
  --link: #6fb2ef;
  --radius: 10px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "Noto Sans SC",
          "PingFang TC", "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* 首頁的貼文牆用 100vw 做滿版，而 100vw 含垂直捲軸的寬度，
   會讓整頁多出一條水平捲軸。clip 可以夾掉，而且（不像 hidden）
   不會把頁首的 position: sticky 弄壞。 */
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; }
.wide { max-width: 1080px; }

a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration: none; }

/* ---------- 頁首 ---------- */

header.top {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky; top: 0; z-index: 20;
}
/* 招牌貼最左、語言鈕貼最右（使用者 2026-08-24 指定）。
   所以這條 bar 是滿版的，不套 .wrap 那個 1080px 的置中容器。 */
header.top .topbar {
  display: flex; align-items: center; gap: 16px;
  min-height: 52px; padding: 0 22px; flex-wrap: wrap;
}
header.top .top-langs { margin-left: auto; }
/* ⚠ 2026-08-26 使用者：招牌「改成一行就好」，整串是
   「Gate 0809 受災戶維權網站 (TUT／龍蝦／BICO 永續合約異常行情爆倉事件)」。
   括號那段（site_tagline）從第二行副標改成同一行的補述：display 從 block 改 inline。
   ⚠ 因此 .brand 不能再 white-space: nowrap —— 整串在 390 手機寬約是螢幕的兩倍半，
   nowrap 會把語言鈕擠出畫面。改成允許折行，並用 clamp 讓字級跟著視窗縮。 */
.brand {
  font-weight: 700; letter-spacing: -0.01em; text-decoration: none; color: var(--text);
  font-size: clamp(14px, 1.15vw, 18px); line-height: 1.25;
  min-width: 0;
}
.brand small { font-weight: 400; font-size: 0.78em; color: var(--text-3); letter-spacing: 0; margin-left: 0.4em; }
nav.main { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; font-size: 15px; }
nav.main a { color: var(--text-2); text-decoration: none; }
nav.main a:hover, nav.main a.on { color: var(--text); text-decoration: underline; }
.langs { display: flex; gap: 8px; font-size: 13px; }
.langs a { color: var(--text-3); text-decoration: none; }
.langs a.on { color: var(--text); font-weight: 600; }

/* ---------- 排版 ---------- */

h1 { font-size: 34px; line-height: 1.3; letter-spacing: -0.02em; margin: 0 0 14px; }
h2 { font-size: 24px; line-height: 1.35; letter-spacing: -0.01em; margin: 52px 0 14px; padding-top: 8px; }
h3 { font-size: 18px; margin: 30px 0 10px; }
p { margin: 0 0 16px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 8px; }
b, strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }

.kicker { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.lede { font-size: 19px; color: var(--text-2); }
.small { font-size: 14px; color: var(--text-2); }
.muted { color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

section { padding-bottom: 4px; }

/* ---------- 計數器 ---------- */

.counters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  margin: 24px 0 10px;
}
.counter { background: var(--surface); padding: 20px 18px; }
.counter .label { font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.counter .value {
  font-size: 30px; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.counter .unit { font-size: 14px; font-weight: 400; color: var(--text-3); margin-left: 4px; }
.counter.owed .value { color: var(--accent); }
.counter.loading .value { color: var(--text-3); }

/* ---------- 按鈕 ---------- */

.btn {
  display: inline-block; padding: 12px 22px; border-radius: 8px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-weight: 600; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; font-size: 16px;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.small { padding: 7px 14px; font-size: 14px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0; align-items: center; }

/* ---------- 表格 ---------- */

.tablewrap { overflow-x: auto; margin: 0 0 10px; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-size: 13px; color: var(--text-2); font-weight: 600; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:hover { background: var(--surface-2); }
tr.total td { font-weight: 700; border-top: 1px solid var(--line-strong); background: var(--surface-2); }
td.hi { color: var(--accent); font-weight: 700; }
.mark-yes { color: var(--ok); font-weight: 600; }
.mark-no { color: var(--accent); font-weight: 600; }

/* ---------- 卡片・引言・註記 ---------- */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin: 18px 0;
}
.note { font-size: 14px; color: var(--text-2); margin: 6px 0 26px; }
.note b { color: var(--text); }

blockquote {
  margin: 16px 0; padding: 14px 18px;
  border-left: 3px solid var(--line-strong); background: var(--surface);
  color: var(--text); font-size: 16px;
}
blockquote .who { display: block; margin-top: 8px; font-size: 13px; color: var(--text-3); }

.callout {
  border: 1px solid var(--line); border-left: 3px solid var(--warn);
  background: var(--warn-soft); border-radius: 6px;
  padding: 14px 18px; margin: 20px 0; font-size: 15px;
}
.callout.red { border-left-color: var(--accent); background: var(--accent-soft); }

/* ---------- 圖表 ---------- */

figure { margin: 20px 0 26px; }
figure img {
  width: 100%; height: auto; display: block;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
figcaption { font-size: 14px; color: var(--text-2); margin-top: 8px; }

/* ---------- 指令區 ---------- */

.cmd { margin: 14px 0 26px; }
.cmd .t { font-weight: 600; margin-bottom: 4px; }
.cmd .w { font-size: 14px; color: var(--text-2); margin-bottom: 8px; }
.cmd .box { position: relative; }
.cmd pre {
  margin: 0; padding: 14px 76px 14px 14px; overflow-x: auto;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; font-family: var(--mono); font-size: 13px; line-height: 1.6;
}
.cmd .copy { position: absolute; top: 8px; right: 8px; }

/* ---------- 表單 ---------- */

form.join { margin: 24px 0; }
.field { margin-bottom: 22px; }
.field > label { display: block; font-weight: 600; margin-bottom: 4px; }
.field .hint { font-size: 13px; color: var(--text-3); margin-bottom: 8px; }
input[type=text], input[type=number], input[type=url], textarea, select {
  width: 100%; padding: 11px 13px; font-size: 16px; font-family: inherit;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 8px;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--link); outline-offset: 1px; }
/* 深色底上的預設核取方塊是白色小方塊，很刺眼也不像同一套設計。
   accent-color 讓瀏覽器自己把勾選狀態染成站上的紅。 */
input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; }
textarea { min-height: 90px; resize: vertical; }
.checks { display: flex; gap: 8px 18px; flex-wrap: wrap; }
.checks label { display: flex; gap: 7px; align-items: center; font-weight: 400; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.consent input { margin-top: 6px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.owedbox {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 16px; margin: 4px 0 22px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.owedbox .v { font-size: 24px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

.steps { counter-reset: s; list-style: none; padding: 0; margin: 20px 0 28px; }
.steps li { counter-increment: s; position: relative; padding-left: 38px; margin-bottom: 12px; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
}

.codebox {
  font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: .06em;
  background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: 8px;
  padding: 14px 18px; text-align: center; margin: 12px 0 18px; user-select: all;
}
pre.tweet {
  white-space: pre-wrap; word-break: break-word;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px; font-family: inherit; font-size: 15px; line-height: 1.7; margin: 0 0 12px;
}

.msg { padding: 12px 16px; border-radius: 8px; margin: 14px 0; font-size: 15px; }
.msg.err { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--text); }
.msg.ok { background: var(--surface-2); border: 1px solid var(--ok); }
.hidden { display: none !important; }

/* ---------- FAQ ---------- */

details.faq {
  border-bottom: 1px solid var(--line); padding: 4px 0;
}
details.faq summary {
  cursor: pointer; font-weight: 600; padding: 12px 0; list-style: none;
  display: flex; justify-content: space-between; gap: 12px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--text-3); font-weight: 400; }
details.faq[open] summary::after { content: "−"; }
details.faq .body { padding: 0 0 16px; color: var(--text-2); font-size: 15px; }

/* ---------- 頁尾 ----------
 *
 * 2026-09-13 使用者：「所有頁面都要能不用滾動就看完全部」——頁尾壓成一列 .foot-compact：
 *   左「導覽（名單・我也是・聲援・條款）」、中「聯絡 mailto」、右「語言 繁/简/EN」，
 *   下面一行 11.5px 免責。總高 7 + 22 + 3 + 16 + 7 + 1（上框線）≈ 56px。
 * ⚠ 免責文字與聯絡信箱一定要留：條款承諾了退出管道，靠的就是這個信箱；首頁沒頁尾，其他頁一定要有。
 * ⚠ 這條 bar 是滿版的（padding 0 22px，跟頁首 .topbar 對齊），不套 .wrap——英文免責在 11.5px
 *   約 1,280px 寬，1366 的螢幕用 1080 的 .wide 會折成兩行、頁尾就變 72px。 */
footer.bot {
  margin-top: 0; border-top: 1px solid var(--line);
  background: var(--surface); padding: 7px 22px; font-size: 12.5px; color: var(--text-2);
}
.foot-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-height: 22px; }
.foot-mail { color: var(--text-2); }
footer.bot .langs { margin-left: auto; gap: 12px; font-size: 12.5px; }
footer.bot .disclaimer {
  margin: 3px 0 0; padding: 0; border: 0;
  font-size: 11.5px; line-height: 1.4; color: var(--text-3);
}

/* ---------- 後台 ---------- */

.admin .claim { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin: 16px 0; overflow: hidden; }
.admin .claim .hd { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.admin .claim .bd { padding: 14px 16px; }
.admin .flags { background: var(--accent-soft); border-bottom: 1px solid var(--accent); padding: 10px 16px; font-size: 14px; }
.admin .flag { display: inline-block; background: var(--accent); color: #fff; border-radius: 4px; padding: 1px 7px; margin: 2px 4px 2px 0; font-size: 12px; }
/* 卡片左上「0809／聲援」的徽章：中性框，不用紅 —— 紅是紅旗的顏色，這只是分類 */
.admin .kind { display: inline-block; border: 1px solid var(--line-strong); color: var(--text-2); border-radius: 4px; padding: 0 7px; font-size: 12px; line-height: 1.6; }
.admin pre.t { white-space: pre-wrap; word-break: break-word; background: var(--surface-2); border-radius: 6px; padding: 12px; font-family: inherit; font-size: 14px; margin: 0 0 12px; }
.admin .kv { font-size: 14px; }
.admin .kv div { display: flex; gap: 10px; padding: 3px 0; }
.admin .kv span:first-child { color: var(--text-3); min-width: 116px; }
.admin .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
/* 後台第二排 .tabs.kinds（0809／聲援篩選）直接沿用這組樣式，沒有另外的規則 */
.tabs { display: flex; gap: 6px; margin: 18px 0; flex-wrap: wrap; }
.tabs button { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); cursor: pointer; font: inherit; font-size: 14px; }
.tabs button.on { background: var(--text); color: var(--bg); border-color: var(--text); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: 27px; }
  h2 { font-size: 21px; margin-top: 40px; }
  .counter .value { font-size: 26px; }
  nav.main { width: 100%; margin-left: 0; gap: 12px; font-size: 14px; }
}

@media print {
  header.top, nav.main, .actions, .btn { display: none; }
  body { background: #fff; color: #000; font-size: 12px; }
}

/* 工具類別。
 * CSP 的 style-src 只給 'self'，所以 HTML 裡不能有 style="..." 屬性
 *（那算 inline style，會被整條擋掉，版面直接跑掉）。
 * 需要一次性的微調就在這裡開一個類別，不要圖快寫成行內樣式。 */
.mt { margin-top: 14px; }
.push { margin-left: auto; }
.w-amt { width: 120px; }
.w-grow { flex: 1; min-width: 180px; }
.offscreen { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; }

/* 頁首的語言切換。
 * 放在頁首而不是只放頁尾，是因為現在 `/` 會照瀏覽器語言自動分流 ——
 * 猜錯的時候，那個人要能一眼看到「怎麼換回去」，不然他只會關掉分頁。 */
.top-langs {
  display: flex; gap: 0; align-items: center;
  border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
  font-size: 13px; flex-shrink: 0;
}
.top-langs a {
  padding: 4px 11px; color: var(--text-2); text-decoration: none; line-height: 1.6;
  border-right: 1px solid var(--line);
}
.top-langs a:last-child { border-right: 0; }
.top-langs a:hover { background: var(--surface-2); color: var(--text); }
.top-langs a.on { background: var(--text); color: var(--bg); font-weight: 600; }
/* 手機上也維持「招牌貼左、語言鈕貼右」的同一列排法。
   舊版把語言鈕用 order:-1 丟到上面自成一列，跟使用者要的左右對齊不一樣。
   要同一列就得讓兩者加起來塞得下 390 的螢幕，所以字級一起縮。 */
@media (max-width: 700px) {
  header.top .topbar { padding: 0 14px; min-height: 46px; flex-wrap: nowrap; }
  /* 手機：整串排不進一行，讓括號那段掉到第二行（招牌本身仍是一行）。
     ⚠ 不要在這裡把 .brand 改回 nowrap，會把語言鈕推出畫面。 */
  .brand { font-size: 13px; }
  .brand small { display: block; margin-left: 0; font-size: 10px; }
  .top-langs { flex-shrink: 0; }
  .top-langs a { padding: 3px 8px; font-size: 12px; }
}

/* ======================================================================
 * 首頁：兩個數字 + 一面貼文牆
 *
 * 這頁刻意只有三樣東西。使用者 2026-08-24 的原話是「太多雜訊了，首頁要乾淨」。
 * 想深入的人自己會點「證據」；被雜訊嚇跑的人不會再回來。
 * ================================================================== */

.hero { padding: 46px 0 8px; text-align: center; }

/* ⚠ 這兩個數字要**並排**，不要用 auto-fit 讓它自己決定。
   auto-fit 在中間欄不夠寬的時候會把它們疊成上下兩行，
   而「損失」跟「尚未賠付」要並排才看得出那個落差 —— 那是整頁的重點。
   真的窄到放不下（手機）才在底下的 media query 疊起來。 */
.bignums {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px 32px; margin-bottom: 18px;
}
.bignum .label { font-size: 15px; color: var(--text-2); margin-bottom: 6px; }
.bignum .value {
  /* 用 clamp 讓它在手機上不會撐爆、在桌機上夠大 —— 這兩個數字就是整個首頁 */
  /* ⚠ 字級要跟著中間欄的寬度縮，而且整串不准換行。
     用固定字級的話，欄位一窄「USDT」就會被擠到下一行變成孤兒
     （只有其中一個會掉下去，兩邊高度還會對不齊）。 */
  font-size: clamp(26px, 3.2vw, 56px);
  white-space: nowrap;
  font-weight: 800; line-height: 1.05; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  /* ⚠ 不要用 word-break: break-all —— 它會從 "USDT" 中間斷成 "USD" / "T"。
     數字本身用 clamp 縮到放得下，單位再自己咬住不放。 */
  overflow-wrap: anywhere;
}
.bignum .unit {
  font-size: 0.36em; font-weight: 600; color: var(--text-3);
  margin-left: 8px; letter-spacing: 0; white-space: nowrap;
}
.bignum.owed .value { color: var(--accent); }
.bignum.loading .value { color: var(--text-3); }

.hero .people { font-size: 14px; color: var(--text-2); margin: 0 0 16px; }
.hero .actions { justify-content: center; margin: 0 0 20px; }
.hero .note { max-width: 640px; margin: 0 auto; text-align: left; }
.btn.big { padding: 12px 26px; font-size: 16px; }

/* 整頁滿版：貼文牆要能從螢幕的一邊滑到另一邊 */
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }

.wallsection { margin-top: 0; }
.wallhead {
  margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--text-2);
  text-align: center; letter-spacing: 0.02em;
}

.wall { overflow: hidden; position: relative; padding: 2px 0 6px; }
/* 兩側淡出，讓卡片是「滑進滑出」不是「被切斷」 */
.wall::before, .wall::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.wall.isempty::before, .wall.isempty::after { display: none; }
.wall::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.wall::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }

/* 軌道裝的是「整組卡片」的複本，不是散裝卡片 ——
   這樣只要位移一組的寬度就能無縫接回開頭，卡片幾張都成立。 */
.walltrack { display: flex; gap: 16px; width: max-content; }
.wallset { display: flex; gap: 16px; }

/* ---------- 貼文牆的卡片 ----------
 *
 * 排版照 X 深色模式的時間軸（使用者 2026-08-25：「要更像 X 的貼文樣式」）。
 * 用的是量到的實值，跟左邊那張物證卡 .xcard 同一套：
 *   底 #000、框 #2f3336、主字 #e7e9ea、次要 #71767b、內文 15px/1.34。
 * 這張卡**不吃本站的色票**，它要看起來像從 X 上剪下來的。
 *
 * ⚠ 沒有互動數那一排。X 有，我們沒有那些數字，編一個出來就是偽造 —— 少一排比捏造好。
 * ⚠ 底下的「尚未賠付」是本站自己加的註，用虛線＋本站的紅隔開，
 *    一眼看得出不是 X 的東西（跟 .srcstrip 同一個作法）。仿樣式跟冒充的界線就在這裡。
 */
.tweetcard {
  display: flex; flex-direction: column; gap: 9px;
  width: 348px; padding: 12px 14px;
  background: #000; border: 1px solid #2f3336; border-radius: 16px;
  text-decoration: none; color: #e7e9ea;
}
.tweetcard:hover { background: #080808; border-color: #3e4144; }
.tweetcard .who { display: flex; align-items: center; gap: 10px; }
.tweetcard .avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 700; font-size: 17px; color: #fff;
}
/* 頭像底色用 handle 雜湊挑一個，不是隨機 —— 同一個人每次都要同一個顏色。
   （不能用行內樣式，CSP 的 style-src 只給 self，所以做成類別。） */
.av0 { background: #7a5cc4; } .av1 { background: #2f7d6b; } .av2 { background: #b3261e; }
.av3 { background: #1f5f9e; } .av4 { background: #9a6a00; } .av5 { background: #5b5f68; }
/* 名字、@handle、日期同一行，中間用「·」——X 的時間軸就是這樣排，不是上下疊。
   名字會被擠掉的時候先截名字（min-width: 0 + ellipsis），@handle 與日期不縮。 */
.tweetcard .names {
  display: flex; align-items: baseline; gap: 4px; min-width: 0; line-height: 1.25;
}
.tweetcard .names b {
  font-size: 15px; font-weight: 700; color: #e7e9ea;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tweetcard .names .handle,
.tweetcard .names .dot,
.tweetcard .names .when { font-size: 14px; color: #71767b; white-space: nowrap; flex-shrink: 0; }
.tweetcard .names .handle { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
.tweetcard .xlogo { margin-left: auto; width: 15px; height: 15px; fill: #71767b; flex-shrink: 0; }
.tweetcard .text {
  margin: 0; font-size: 15px; line-height: 1.34; color: #e7e9ea;
  /* 卡片高度要一致，太長的貼文截掉，點進去看全文 */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-wrap; word-break: break-word;
}
/* 這一條是本站的註，不是 X 的一部分 —— 虛線與色票都刻意跟上面不同。 */
.tweetcard .meta {
  margin-top: auto; display: flex; align-items: baseline;
  gap: 10px; font-size: 13px;
  padding-top: 8px; border-top: 1px dashed #2f3336;
}
.tweetcard .meta .owedtag { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.tweetcard .meta .owedlabel { color: #71767b; font-weight: 400; margin-right: 5px; }
/* 其他 Gate 事件聲援者的卡片：底下那條寫的是「自報損失」不是「尚未賠付」。
   ⚠ 用主字色，不用亮紅也不用暗紅 —— 亮紅＝欠款、暗紅＝指控，
   聲援者的自報損失兩者都不是。標籤那半（.owedlabel）維持 #71767b。 */
.tweetcard .meta.support .owedtag { color: var(--text); }

.wallempty { text-align: center; color: var(--text-3); font-size: 15px; padding: 34px 20px; }


@media (max-width: 640px) {
  .hero { padding: 30px 0 4px; }
  .bignums { gap: 26px; }
  .tweetcard { width: 280px; }
  .wall::before, .wall::after { width: 40px; }
}

/* ======================================================================
 * 首頁中段：三欄舞台
 *
 *   左＝Gate 高管的 X 貼文（做得跟 X 上長得幾乎一樣）
 *   中＝兩個大數字與加入鈕
 *   右＝Gate 官方公告（做得跟 gate.com 公告頁長得幾乎一樣）
 *
 * ⚠ 兩張卡片刻意**不吃本站的深色模式**，配色是各自平台的原色寫死的。
 * 那是刻意的：它們要看起來像「從別的地方剪下來貼上的文件」，
 * 而不是本站自己排版的內容。
 *
 * Gate 那張的字級與配色是 2026-08-24 從 gate.com 實際量出來的：
 * 文字 #070808、次要 #a0a3a7、連結 #0068ff、內文 16px/1.55、標題 600。
 * ================================================================== */

/* ⚠ margin 的簡寫會把 .bleed 的 margin-left 蓋成 0，整排就會偏到右邊去。
   滿版位移寫在同一條規則裡，不要指望前面那個 class 還活著。 */
.stagewrap { width: 100vw; margin: 10px 0 16px calc(50% - 50vw); }
.stage {
  position: relative;
  max-width: 1720px; margin: 0 auto; padding: 0 20px;
  /* 兩張卡片拉成一樣高，章才會平均壓在兩份文件的下緣上；
     中間那欄不跟著拉長，它本來就該貼齊上方。 */
  display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 26px; align-items: stretch;
}
/* DOM 順序是中→左→右（手機要先看到數字），桌機再擺回左中右 */
/* 中間欄比兩張卡矮很多，貼齊上方的話下面會留一大塊空白。
   垂直置中之後，剩下的空白平均分到上下，看起來才是有意排的。 */
.stage-mid { grid-column: 2; grid-row: 1; align-self: center; text-align: center; }
.xcard     { grid-column: 1; grid-row: 1; }
.gatecard  { grid-column: 3; grid-row: 1; }

/* ── slogan 專用字型：真的 Black，不是瀏覽器撐出來的假粗體 ──────────
   首頁那句 h1 是 font-weight 900，但 Windows 上命中的是微軟正黑體 ——
   那個字型**只有 Regular 與 Bold 兩個字重**，900 是瀏覽器把 Bold 硬撐胖的假粗。
   假粗體的筆劃不夠厚，「沉入黑」的漸層與「厚度」的側面都撐不起來，是效果的天花板。

   ⚠ 不能 <link> Google Fonts：CSP 是 default-src 'self'，整條會被擋掉而且不報錯。
   所以自己 host 子集化的 woff2 —— 這句話總共只用到 12 個漢字 + 17 個拉丁字元，
   兩個檔案加起來 8KB。產生方式見 make_slogan_font.py（會自己從 content.py 的
   home_slogan 三語抓字元，**改文案要重跑那支腳本**，不然新字會掉回系統字型）。

   ⚠ **子集裡只有漢字，沒有拉丁。** 假粗體的問題只發生在中文；拉丁那半本來就已經是
   真 Black（Windows 的 Segoe UI Black、macOS 的 SF Pro Black）。換成 Noto 的拉丁反而更寬 ——
   實測英文版整句從 806px 撐到 814px 塞滿欄寬，「their assets」被擠到第三行、
   首頁超出一屏 72px。unicode-range 不涵蓋 A-Z，瀏覽器就自動掉回 var(--sans)，
   所以**英文版等於完全沒動**，中文版的「Gate」也還是原本的 Segoe UI Black。

   兩個檔案的 unicode-range 不重疊：繁簡同形的字（欺／用／侵／占）跟著 TC 檔走，
   SC 檔只放簡體特有的四個字，所以每個語言只會下載自己要的那一份。
   授權：OFL，assets/fonts/OFL.txt 要跟著字型一起發布，不要刪。 */
@font-face {
  font-family: "Slogan Black";
  src: url("/assets/fonts/slogan-tc-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+4E0D, U+53EA, U+5EF6, U+62D6, U+6703, U+8CA0, U+8CAC, U+9858;   /* 2026-09-13：只會拖延不願負責 */
}
@font-face {
  font-family: "Slogan Black";
  src: url("/assets/fonts/slogan-sc-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+4F1A, U+613F, U+8D1F, U+8D23;   /* 2026-09-13：会愿负责（其餘與 TC 同形，走 TC 檔） */
}

/* 首頁最上面那句 slogan —— 整站最大的一行字，這個站的論點本身。
 *
 * ⚠ 2026-08-25 重做過，不要改回舊版（clamp(20px,2.1vw,32px) 的紅字一行）。
 * 使用者：「太像普通粗體字、不像標題」「設計感要夠強」。舊版壞在三個關係，不是壞在字型：
 *
 *   1. **層級倒置**：它是 h1 卻只有 32px，正下方的數字是 56px。
 *      一句話比自己的佐證還小一號半，讀起來當然是標籤不是標題。
 *      → 字級拉到 clamp(28px, 3.4vw, 60px)，比數字大，層級歸位。
 *   2. **紅色排序輸給章**：卡片上的章有 46px + 紅框 + 旋轉，是全版最「有設計」的紅物件。
 *      slogan 用同一個紅又更小，就變成章的附屬品。
 *      → slogan 改成白字，紅只留給那兩個動詞的底線。紅還給「尚未賠付」與章。
 *   3. **Windows 上的 900 是假的**：微軟正黑體只有 Regular/Bold，中文是瀏覽器硬撐胖的假粗；
 *      但「Gate」四個拉丁字命中 Segoe UI Black 是真黑 —— 同一句話一半真一半假，所以糊。
 *      → 真正的解是自己 host 一份子集化的 Noto Sans TC Black（OFL、二十幾個字、約 10 KB），
 *        還沒做。做了之後在這裡加 font-family，字級不用動。
 *
 * ⚠ body 的 line-height 1.75 會把這種字級撐開一大截，自己壓回來（老坑）。 */
.slogan {
  margin: 0 auto 18px;
  /* 這是**連接詞**的字級，不是動詞的。動詞在下面 .slogan em 再放大 1.42 倍。 */
  font-size: clamp(28px, 3.4vw, 60px);
  /* 真 Black 排在最前面，字集外的字（不會有）自動掉回原本的 stack。 */
  font-family: "Slogan Black", var(--sans);
  /* ⚠ 2026-08-26 使用者指定：「把所有字都改成粗體」。
     原本連接詞是 400 的細體、只有動詞 900，兩級對比裡的「粗細」那一級因此拿掉了。
     現在整句都是 900，分級只剩**字級**（動詞 1.42 倍）與**顏色**（灰 vs 暗紅）。
     要改回兩級對比就是把這裡改回 400，不要動 .slogan em。 */
  font-weight: 900; line-height: 1.24; letter-spacing: 0;
  /* fallback：不支援 background-clip 才看得到。跟著字面一起提亮，不要留 --text-2（會黯淡）。 */
  color: var(--text);
  text-wrap: balance;
  /* 兩行錯開：上排靠左、下排靠右。
     ⚠ 錯開的量是「一個字」，不是「整個中間欄的寬度」。
     貼欄位左右兩緣試過，被打回（使用者 2026-08-25：「太分開了，第一行的用戶跟第二行的侵占重疊到」）——
     欄寬 814、兩行各才 420 左右，貼兩緣的結果是兩行幾乎完全錯開（1366 甚至中間空 16px），
     只剩尾字與首字那一小段疊在一起，看起來是撞到不是錯開。
     解法：整塊 width: fit-content 收成「跟字一樣寬」再置中，下排只往右推 1em。
     這樣兩行大面積重疊、只差一個字的縮排，才讀得出是同一句話的兩行。 */
  display: flex; flex-direction: column;
  width: fit-content; max-width: 100%;
}

/* ⚠ 分行是寫死在 content.py 的 <span class="ln"> 裡，不是靠 <br>、也不是靠自動折行 ——
   因為兩行要各自對齊不同的邊，必須是兩個獨立的區塊。
   三語各兩行，句子在哪裡斷是人決定的，不要交給瀏覽器。 */
.slogan .ln { display: block; }
.slogan .ln:first-child { align-self: flex-start; text-align: left; }
/* 1em = 一個中文字寬。em 吃的是 slogan 的基準字級，所以縮放時縮排跟著縮。
   ⚠ 這個值同時決定整塊多寬（fit-content 會把 margin 算進去），
   英文那句本來就快滿版，再大就會被擠到折行 —— 改之前先跑 /tmp/measure_slogan.py 量。 */
.slogan .ln:last-child { align-self: flex-end; text-align: right; margin-left: 1em; }

/* 指控的兩個動詞：放大 1.42 倍、顏色從灰轉暗紅。
 * ⚠ 2026-08-26 起整句都是 900（使用者：「把所有字都改成粗體」），所以這裡的 900
 *   不再是「跟連接詞的差別」，只是把粗體寫明；分級靠字級與顏色兩件事：
 *   說明的部分（Gate、用戶、資產）是灰，
 *   指控的部分（欺騙、侵占／deceived、misappropriated）大 1.42 倍且轉暗紅，仍是全頁最大的字。
 *
 * ⚠ 這一句**沒有任何裝飾**，這是設計決定，不是還沒做完：
 *   - 用過紅色底線 → 被打回（使用者 2026-08-25：「哪一個有設計感的網站會用底線啊」）。
 *     底線是瀏覽器的預設裝飾，不是排版。
 *   - 用過紅色實心色塊 → 太像螢光筆。
 * 不要再往這一句加底線、色塊、陰影、外框 —— 只有大小、粗細、顏色三件事。
 *
 * 顏色用的是 --accent-deep（暗紅）不是 --accent（亮紅）：亮紅屬於「尚未賠付」與 CTA，
 * 暗紅屬於「指控」—— 兩個章也是暗紅，所以 slogan 跟章講的是同一件事、
 * 跟數字講的是另一件事，兩組紅不會互相稀釋。 */
.slogan em {
  font-style: normal;
  font-size: 1.42em;
  font-weight: 900;
  letter-spacing: -0.03em;
  /* fallback：不支援 background-clip: text 的瀏覽器只看得到這一層，
     所以必須是讀得到的暗紅。沉入黑的漸層在下面 @supports 裡覆蓋掉。 */
  color: #d42a1c;
  margin: 0 0.04em;
}

/* ── 沉入黑：整句共用同一盞光 ──────────────────────────────────────
   2026-08-26 第三輪定案。前兩輪的死因是**整句不是一個物件**：
   紅動詞活在「被破壞的材質世界」（切開、錯位、毛邊），灰字活在「無設計的預設世界」。
   使用者原話：「除了暗紅字部分要連灰字一同考慮進去設計」。
   （中間試過「整句一起鋪磨損」把灰字拉進同一世界 —— 失敗，均勻紋理蓋滿整句就是套了個
   grunge 濾鏡，跟撕裂同一個死因：**均勻的破損是樣式，不是事件**。材質路線整條放棄。）

   這一版靠的不是共用紋理，是**共用光源**：一盞從上方打下來的暗光，
   所有字的下緣都在沉進背景的黑，第二行沉得比第一行深，階梯一路走進黑裡。
   消失是單向的（只往下、只往黑），跟事件的方向一致：資產沉下去了。
   灰與紅的差別只剩「沉沒速度」—— 紅動詞沉得慢，指控比其他東西活得久。

   ⚠ **絕對不能在上方提亮。** 試過上亮下暗，直接變成金屬浮雕字（效果字／AI 味）。
      只保留「向下沉」那一半才成立：上半是本色，下半才開始掉。
   ⚠ 漸層值比原始提案保守：提案是在**還沒有厚度**的情況下測的，
      厚度本身也是一層暗，兩者疊加會把灰字整個沉掉（「用戶資產」讀不到）。
      所以沉沒起點往後推、末端提亮。要調的話兩者一起看，不要只調一邊。
   ⚠ **紅字不准再變輕。** #b3241a 貼 #0a0a0c 的對比只有約 3.0:1，剛好卡在大字門檻上，
      透明度／柔化／再加暗色一律禁；漸層下緣的比例也不能再往上拉。 */
/* ⚠ 2026-08-26 第三輪：**沉太深，整句變黯淡。** 使用者：「為什麼我看起來這麼黯淡，
   SLOGAN 應該要是最搶眼的啊」—— 這是「層級倒置」老坑第三次犯，這次是**平均亮度**倒置。

   量法：canvas 依真實幾何重繪（`.ln` 實際高 106px，是被 85.2px 的紅動詞撐開的，
   60px 灰字只落在盒子的 31.6%~87.2% 這一段，所以漸層停點的數字不等於字上看到的顏色），
   分別取灰字與紅字的墨色像素平均亮度，跟背景 #0a0a0c 比 WCAG 對比。實測：

     舊值：灰字 11.51 ／ 紅字 3.27       ← 正下方那兩個數字是 白 17.02 ／ 亮紅 5.78
     現值：灰字 16.55 ／ 紅字 3.78

   **h1 比自己的佐證還暗**，就是這樣來的。修法是**把字面提亮、少沉一點**，
   ⚠ **不是把厚度的側面提亮** —— 側面一亮，第二輪修掉的模糊就整個回來
   （側面 #4a4d52→#6e727a，筆劃/間隙對比從 11.73 掉到 8.56）。
   **字面要亮（視覺層級）、側面要暗（清晰度），這兩件事方向相反，永遠不要一起調。**
   附帶好處：字面提亮同時把清晰度一起拉上去（灰字 8.17 → 11.73）。

   ⚠ **紅字有物理天花板。** #d42a1c 貼 #0a0a0c 最多只能到 3.8，
      連亮紅 --accent #ff4436 自己也才 5.78 —— 紅色在黑底上就是這樣，不是參數問題。
      所以整句的亮度由**灰字**扛；紅字改成「幾乎不沉 + 側面壓到近黑」，
      換到的是**乾淨飽和**（紅字清晰 2.58 → 3.63），而不是更亮。
      要再亮就得動紅色本身（#ec3220 可到 4.58），但那會靠近 --accent、稀釋紅色分工，
      **要使用者點頭才做**。

   ⚠ 沉入黑的敘事沒有變弱：灰字仍然由 16.4 沉到 11.3、第二行整體再暗半階，
      而紅字現在沉得**最少** —— 正好就是原始設計要的「指控比其他東西活得久」。 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .slogan .ln {
    background-image: linear-gradient(180deg, #f7f9fc 0%, #f7f9fc 72%, #babec6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* 第二行整體再暗半階：階梯往右下走，也往黑裡走 */
  .slogan .ln:last-child {
    background-image: linear-gradient(180deg, #f0f2f6 0%, #f0f2f6 68%, #aeb2ba 100%);
  }
  .slogan em {
    background-image: linear-gradient(180deg, #d42a1c 0%, #d42a1c 86%, #c22619 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .slogan .ln:last-child em {
    background-image: linear-gradient(180deg, #d42a1c 0%, #d42a1c 80%, #bb2418 100%);
  }
}

/* ── 厚度：**已整條移除（2026-08-26 第三輪）** ────────────────────
   使用者 2026-08-26 原本要「字型可以再更有立體感一點」，做成 text-shadow 的 extrude
   （字往正下方長出側面）。兩輪之後確認**這個手法在這句中文上做不起來**，整條拿掉。

   ⚠ 不要再加回來。前因後果如下，重做一次只會再撞同一面牆：

   【第一輪】8 層、側面從 #83878f 起跳（跟字面差不多亮）→ 使用者：「看起來還是很模糊」。
     根因量出來是結構性的，不是參數問題：
       Noto Sans TC Black 60px 的中文筆劃間隙，「侵」中位數 **1px**、「騙／資／產」**2px**
       （同尺寸拉丁的 G 是 15px、a 是 8px —— 所以這個病只發生在中文）。
       text-shadow 每一層都是完整的字形複本，**往下 1px 就填掉一半的間隙**。
     量法：canvas 用同一組陰影重繪「用戶資產」，拿乾淨字形當遮罩分出「筆劃像素」與
     「間隙像素」，比兩者平均亮度的 WCAG 對比。
     結果：8 層淺側面 3.81 ／ 4 層暗側面 8.83 ／ 完全沒有厚度 12.38。

   【第二輪】照上面把側面壓暗、深度收到 4px（清晰度 3.81 → 8.83）
     → 使用者：「為什麼我看起來這麼黯淡，SLOGAN 應該要是最搶眼的啊」。
     ⚠ 這裡有個陷阱：**儀器量不到這件事。** 同一組字面配「暗厚度」與「無厚度」，
       字面平均亮度 10.29 vs 10.23、整塊亮度 5.11 vs 5.03 —— 數字上暗厚度甚至略高。
       但把兩者放在同一張畫面上看，暗厚度明顯偏灰。原因是暗側面緊貼在每一筆劃下方，
       跟本來就是黑的筆劃間隙連成一片，**把筆劃看起來吃細了**，
       再加上局部對比被拉低（同時對比效應）。
     實測連 **1px** 的暗邊都會讓整句明顯變灰 —— 沒有「薄一點就好」這個折衷。

   【結論】**模糊與黯淡是同一個病：厚度在吃字。** 中文 Black 的筆劃間隙只有 1~2px，
     裝不下任何往下的 extrude。所以厚度整條拿掉，立體感改由「沉入黑」單獨承擔
     （那盞從上方打下來的暗光本來就是深度訊號，而且它不碰筆劃間隙）。

   ⚠ 要再挑戰立體感的話，唯一還沒被否掉的方向是**不碰字形本身**的作法
     （例如 slogan 區塊背後放一團極淡的光暈，暗示光源）。
     任何會在字上疊第二份字形的手法（text-shadow / -webkit-text-stroke /
     背後放一份位移的複本）都已經被實測否掉，不要再試。 */

/* 英文那句 56 個字（中文才 13），同字級會爆成三行。單獨降一級收成兩行。 */
.slogan:lang(en) { font-size: clamp(24px, 2.4vw, 40px); line-height: 1.3; }

/* ⚠ row-gap 要歸零：.actions 的 gap:12px 也會算在折下來的那行（.support-entry）上面，
   跟它自己的 margin-top:6px 疊成 18px，中間欄就多長 10px、在 1886×920 反過來比卡片高。
   歸零後入口那行的上方就只有那 6px，加上 .note 還回來的 26px，整欄淨 −2px（實測 519→517）。 */
.stage-mid .actions { justify-content: center; margin: 0 0 18px; row-gap: 0; }
/* 主按鈕正下方的第二個入口：其他 Gate 事件的受災戶也能加入聲援（2026-09-13 使用者指定）。
   ⚠ 這是一行 13px 的文字連結，**不是第二顆 .btn** —— 首頁一屏預算極緊
   （1366×768 英文只剩 12px），多一顆按鈕就破功。flex-basis:100% 讓它在同一個
   .actions 裡自己佔一整行、落在主按鈕下面，不用開第二個 .actions。
   多出來的高度由下面 body.home .stage-mid .note 的 margin-bottom 26→0 補回來。 */
.support-entry {
  flex-basis: 100%; text-align: center;
  font-size: 13px; line-height: 1.4; margin-top: 6px;
  color: var(--support); font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.support-entry:hover { filter: brightness(1.15); }
/* 尾端的統計（N 人・自報損失 X USDT）：跟連結同色，數字加粗 */
.support-stat b { color: var(--support); font-variant-numeric: tabular-nums; }
/* 中間欄整欄置中，這行說明也要跟著置中（使用者 2026-08-24 指出它是靠左的）。
   ⚠ 不要加 max-width 把它縮窄：限成 34em 時英文版會多折一行，
   首頁就超出一屏 9px（實測 1886x920 /en/ over=9）。讓它用滿中間欄的寬度。 */
/* text-wrap: balance：英文那句比中文長，會折成兩行。交給瀏覽器平衡兩行的長度，
   斷點就會落在語意講得通的地方，而不是把「before it counts.」孤零零丟到第二行
   （使用者 2026-08-24：「英文如果太長請用自然語句去換行」）。 */
.stage-mid .note { text-align: center; text-wrap: balance; }
.quotenote { font-size: 11.5px; color: var(--text-3); margin: 10px 0 0; text-align: left; }

/* 兩張卡片共用的來源列。這是本站自己的樣式，跟卡片本體刻意不同 ——
   一眼就看得出「上面是引用，這一行是我們加的註」。 */
.srcstrip {
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed #d8d8d8;
  font-size: 11.5px; line-height: 1.6; color: #6b7076;
}
.srcstrip p { margin: 0 0 3px; }

/* ---------- 左：X 貼文卡（深色介面） ----------
 *
 * 配色照 X 的深色模式：底 #000、框 #2f3336、主字 #e7e9ea、次要 #71767b、
 * 連結與 cashtag #1d9bf0、轉推綠 #00ba7c、愛心粉 #f91880。
 * 這張卡不吃本站的色票 —— 它要看起來像從 X 上剪下來的，不是本站排的版。
 */

.xcard {
  background: #000; color: #e7e9ea;
  border: 1px solid #2f3336; border-radius: 16px;
  padding: 12px 14px 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "Noto Sans SC", sans-serif;
}
.xc-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; }
.xc-av { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover; display: block; }
.xc-id { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.xc-name { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; color: #e7e9ea; }
.xc-name svg { width: 18px; height: 18px; fill: #1d9bf0; flex-shrink: 0; }
.xc-sub { font-size: 15px; color: #71767b; }
.xc-tools { margin-left: auto; display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.xc-tools svg { width: 18px; height: 18px; fill: #71767b; display: block; }

.xc-text {
  font-size: 16px; line-height: 1.42; color: #e7e9ea;
  white-space: pre-wrap; word-break: break-word; margin-bottom: 9px;
}
.xc-tag { color: #1d9bf0; }
/* 放大的那幾個字。這是本站加的重點，不是 X 的樣式，所以用本站的紅。 */
.xcard .hl {
  font-style: normal; font-weight: 800; font-size: 1.3em; line-height: 1.3;
  color: #ff5a4a;
}

/* 他在那則貼文裡引用的 Gate 官方帳號貼文 */
.xc-quoted { border: 1px solid #2f3336; border-radius: 14px; padding: 9px 11px; margin-bottom: 10px; }
.xc-qhead { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; flex-wrap: wrap; }
/* 引用貼文的大頭貼。以前是藍底一個「G」字，2026-08-24 改成照官方頭像畫的圖形。
   X 的頭像是圓的，官方那張是白底方圖 —— 白底圓形裁切後看起來就是同一張。 */
.xc-qav {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  overflow: hidden; background: #fff; display: block;
}
.xc-qav .qav-mark { width: 100%; height: 100%; display: block; }
.xc-qname { font-size: 14px; font-weight: 700; color: #e7e9ea; }
.xc-qbadge svg { width: 15px; height: 15px; fill: #e2b719; display: block; }
.xc-qsub { font-size: 14px; color: #71767b; }
.xc-qtag {
  display: inline-block; font-size: 11px; color: #e7e9ea;
  background: #202327; border-radius: 4px; padding: 2px 6px; margin-bottom: 8px;
}
.xc-qtitle { font-size: 13.5px; font-weight: 700; line-height: 1.4; color: #e7e9ea; margin: 0 0 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xc-qtext { font-size: 12.5px; line-height: 1.48; color: #71767b; margin: 0;
  /* 引用卡的摘要在 X 上本來就是截斷的，這裡也截 —— 完整內容右邊那張就有 */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.xc-actions {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  border-top: 1px solid #2f3336; padding-top: 9px;
}
.xc-act { display: inline-flex; align-items: center; gap: 5px; color: #71767b; font-size: 13px; margin-right: 14px; }
.xc-act:last-child, .xc-act:nth-last-child(2) { margin-right: 0; margin-left: auto; }
.xc-act:nth-last-child(2) { margin-left: auto; }
.xc-act svg { width: 17px; height: 17px; fill: #71767b; display: block; }
.xc-act:nth-child(2) svg { fill: #00ba7c; }
.xc-act:nth-child(2) { color: #00ba7c; }
.xc-act:nth-child(3) svg { fill: #f91880; }
.xc-act:nth-child(3) { color: #f91880; }

/* ---------- 右：Gate 公告頁卡 ----------
 *
 * 上面一條黑色導覽列（Gate 站上就是黑的），底下白色的公告內文。
 * 字級配色是 2026-08-24 從 gate.com 量的：文字 #070808、次要 #a0a3a7、
 * 連結 #0068ff、內文 16px/1.55、標題 600。
 */

.gatecard {
  background: #fff; color: #070808;
  border: 1px solid #2a2c33; border-radius: 12px; overflow: hidden;
  font-family: "Gate_Sans", Arial, "Noto Sans TC", "Noto Sans SC", sans-serif;
}
.gc-nav {
  background: #000; padding: 7px 12px;
  display: flex; align-items: center; gap: 14px;
}
.gc-brand { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.gc-mark { width: 20px; height: 20px; display: block; }
.gc-word { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.gc-navitems { display: flex; gap: 12px; overflow: hidden; }
.gc-navitems span { font-size: 12.5px; color: #fff; white-space: nowrap; }

.gc-page { padding: 12px 16px 12px; }
.gc-crumb { font-size: 11.5px; color: #a0a3a7; margin: 0 0 8px; }
.gc-crumb i { font-style: normal; margin: 0 6px; }
.gc-title { font-size: 17px; line-height: 1.38; font-weight: 600; color: #070808; margin: 0 0 8px; }
.gc-meta { font-size: 12px; color: #a0a3a7; margin: 0 0 10px; }
/* ⚠ Gate 站上量到的是 16px/1.55；這裡縮到 15px 是為了讓首頁塞進一屏
   （使用者 2026-08-24：「不用上下滾動就能看到全部網頁」）。
   /evidence 那頁不受限制，要看完整排版去那裡。 */
.gc-body p { font-size: 15px; line-height: 1.5; color: #070808; margin: 0 0 9px; }
.gc-link { display: inline-block; font-size: 14px; color: #0068ff; text-decoration: none; }
.gc-link:hover { text-decoration: underline; }
.gatecard .hl {
  font-style: normal; font-weight: 800; font-size: 1.3em; line-height: 1.3;
  color: #d4160a;
}
.gatecard .srcstrip { padding: 0 16px 10px; margin-top: 0; border-top: 0; }

/* ---------- 壓在卡片上的章（左右各一個） ----------
 *
 * ⚠ 一張卡一個，不是整個版面一個。
 * 做成版面中央一個的時候，它剛好蓋掉中間欄的兩個大數字與加入鈕 ——
 * 而那兩個數字就是這個站存在的理由。
 *
 * ⚠ 底板是**必要的**，不要再改回全透明。
 * 透明版本（紅字 + 紅光暈壓在密密麻麻的內文上）實測讀不出來 ——
 * 使用者 2026-08-24：「紅字不能配紅光暈，重點是要看清楚」。
 * 紅色發光的邊緣跟紅色的字糊在一起，底下的內文又從字縫裡透上來，等於三層紅疊在一起。
 * 現在改成：**不透光的底板（順著各自卡片的底色）+ 紅字 + 紅框**，
 * 光暈只剩一圈中性的投影，用來把章從卡片上「墊高」，不再是紅的。
 * 底板只蓋在安全區（見下面的 top 百分比），四句放大的承諾都不會被壓到。
 * pointer-events:none 讓底下的連結還點得到。
 */
/* 兩個章的垂直位置是**對稱**的：以卡片中線為軸，左卡往下多少、右卡就往上多少
 * （使用者 2026-08-24：「左邊相對下移多少，右邊就相對上移多少，這樣看起來比較平衡」）。
 *
 * ⚠ 位置不能放中間。實測放正中央會壓到左卡的「全額補償」四個字，
 * 而放大的都是承諾句，那是整頁最不能被蓋的東西。剛好兩張卡的安全區也是反的：
 *   左卡的承諾在上半部（12~47%）→ 章往下
 *   右卡的承諾在下半部（60~81%）→ 章往上
 * 所以「對稱」跟「不蓋到字」在這裡是同一個答案。
 *
 * 容器做成**零高度的一條線**（top: X%; height: 0），章以那條線置中，
 * 這樣兩邊只要 top 對稱，視覺上就精準對稱，不受卡片內容高度影響。
 * 改百分比之後請重跑覆蓋檢查（三種尺寸 × 三種語言 × 四個放大句都要 0 覆蓋）。 */
.xcard, .gatecard { position: relative; }
.stamp {
  position: absolute; left: 0; right: 0; height: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.xcard > .stamp    { top: 71%; }   /* 中線下方 21 */
.gatecard > .stamp { top: 29%; }   /* 中線上方 21 —— 跟左邊等距 */
.stamp > span {
  display: inline-block;
  font-size: clamp(26px, 3.1vw, 46px); font-weight: 900; letter-spacing: 0.08em;
  /* body 的 line-height 是 1.75，套在這種字級上會讓章高出一大截。這裡壓回來。 */
  line-height: 1.1;
  padding: 8px 24px;
  border-radius: 12px;
  transform: rotate(-7deg);
  white-space: normal; text-align: center; max-width: 90%;

  /* 暗紅字 + 同色框，兩張卡共用同一個紅，才會看起來是同一顆章。
     用的是 --accent-deep，跟 slogan 的兩個動詞同一個顏色（使用者 2026-08-25 指定）——
     章跟 slogan 講的是同一件事，所以同色；亮紅 --accent 留給「尚未賠付」與 CTA。 */
  color: var(--accent-deep);
  border: 6px solid var(--accent-deep);
  text-shadow: none;
  /* 底板背後再糊一層，萬一半透明處還透出字也糊掉；不支援的瀏覽器不影響。 */
  backdrop-filter: blur(3px);
}

/* ⚠ 底板要分兩種，因為底色是反的：
 *   左卡是純黑底（X 深色介面）→ 黑底板，紅字浮在上面
 *   右卡是純白底（Gate 公告頁）→ 白底板，像蓋在紙上的橡皮章
 * 只用一種的話，總有一邊會像貼錯的補丁。紅色本身兩邊都不換，換的只有底板。
 * 投影是中性色（黑／灰藍），不要再改回紅色 —— 紅光配紅字就是這次要修掉的東西。 */
.xcard .stamp > span {
  background: rgba(0, 0, 0, .9);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .8);
}
.gatecard .stamp > span {
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 10px 28px rgba(15, 20, 30, .35);
}

/* ---------- 頁尾導覽（頁首那排搬下來的） ---------- */

/* 2026-09-13 頁尾壓成一列後，導覽跟聯絡、語言同一列，不再自己佔一行、也沒有底線 */
.footnav {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px;
}
.footnav a { color: var(--text-2); text-decoration: none; }
.footnav a:hover, .footnav a.on { color: var(--text); text-decoration: underline; }

/* 中間欄 2fr 是為了讓兩個大數字並排得好看，但螢幕一窄，側邊那兩張卡就被擠瘦、
   內容變高，一屏就守不住了。窄一點的螢幕把比例拉回來，數字字級同步縮，
   兩個數字照樣並排。 */
@media (max-width: 1560px) {
  .stage { grid-template-columns: 1fr 1.45fr 1fr; }
  .bignum .value { font-size: clamp(22px, 2.5vw, 40px); }
  .bignums { gap: 12px 22px; }
}

@media (max-width: 980px) {
  /* 三欄擠不下就攤成一欄。DOM 順序本來就是中→左→右，
     所以手機上會是「先兩個數字，再兩份物證」。 */
  .stage { grid-template-columns: 1fr; gap: 16px; }
  .stage-mid, .xcard, .gatecard { grid-column: 1; grid-row: auto; }
  .bignums { grid-template-columns: 1fr; }   /* 手機才疊起來 */
  .xcard .hl, .gatecard .hl { font-size: 1.2em; }
  .gc-navitems { display: none; }        /* 窄螢幕上 Gate 站本來也只留 logo */
  .stamp span { border-width: 4px; padding: 8px 18px; letter-spacing: 0.05em; }
}

/* ======================================================================
 * 首頁：一屏
 *
 * 使用者 2026-08-24：「我不用上下滾動就能看到全部網頁」。
 * body.home 只有首頁會有（layout(footer=False) 時掛上去），
 * 其他頁面照舊可以捲。
 *
 * ⚠ 這是「盡量塞進一屏」不是「硬切」：卡片內容不裁切，
 * 螢幕真的太矮（例如 600px 高的視窗）還是會出現捲軸 ——
 * 寧可讓它捲，也不要把引文切一半。
 * ================================================================== */

body.home {
  min-height: 100dvh;
  display: flex; flex-direction: column;
}
body.home main.wrap {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 0; padding-bottom: 6px;
}
body.home .stage-mid { padding-top: 0; }
/* 中間欄最底下那行說明原本帶 26px 的 margin-bottom（.note 的預設），在置中欄的底部
   那是一塊死空間。2026-09-13 加了聲援那行文字連結（.support-entry，約 24px），
   把這個安全邊還回來剛好抵掉，首頁一屏的高度不變。 */
body.home .stage-mid .note { margin-bottom: 0; }

/* 螢幕不高的時候整個首頁按比例縮，讓「一屏看完」在筆電上也成立。
 * 用 max-height 而不是 max-width —— 塞不下的是高度不是寬度。
 * 縮的是留白與字級，內容一個字都沒少。 */
@media (max-height: 840px) {
  body.home .bignum .value { font-size: clamp(24px, 2.8vw, 46px); }
  /* slogan 的動詞是基準字的 1.42 倍，所以它縮一點點、整句就縮很多。
     矮螢幕（1366x768 就是）不縮的話首頁會超出一屏 17px（英文 42px）。 */
  body.home .slogan { font-size: clamp(24px, 2.7vw, 48px); margin-bottom: 12px; }
  body.home .slogan:lang(en) { font-size: clamp(20px, 2vw, 33px); }
  body.home .bignums { gap: 14px 34px; margin-bottom: 14px; }
  body.home .xc-text { font-size: 15px; margin-bottom: 8px; }
  body.home .gc-body p { font-size: 14px; margin-bottom: 8px; }
  body.home .gc-title { font-size: 15.5px; }
  body.home .xc-qtext { -webkit-line-clamp: 2; }
  body.home .tweetcard { width: 330px; }
  body.home .tweetcard .text { -webkit-line-clamp: 3; }
  body.home .stagewrap { margin-top: 6px; margin-bottom: 12px; }
  body.home .xc-head { margin-bottom: 7px; }
  body.home .xc-av { width: 40px; height: 40px; }
  body.home .xc-quoted { padding: 7px 9px; margin-bottom: 8px; }
  body.home .xc-qtitle { -webkit-line-clamp: 1; }
  body.home .xc-actions { padding-top: 7px; }
  body.home .gc-page { padding: 10px 14px 10px; }
  body.home .gc-meta { margin-bottom: 7px; }
  body.home .tweetcard { padding: 10px 13px; }
  body.home .wallhead { margin-bottom: 7px; }
  body.home .srcstrip { font-size: 11px; margin-top: 7px; padding-top: 6px; }

  /* ⚠ 螢幕矮的時候讓兩張卡自己內部捲，不要裁切內容。
     這兩張是**別人說的話**，截一半就變成斷章取義；
     而兩段承諾都在卡片最上面，不捲也看得到，捲的是後面的細節。
     這是「一屏」與「不動別人的引文」之間唯一沒有代價的解法。 */
  @media (min-width: 981px) {
    body.home .xcard, body.home .gatecard { max-height: 58dvh; overflow-y: auto; }
  }
}
@media (max-height: 720px) {
  body.home .bignum .value { font-size: clamp(22px, 2.4vw, 38px); }
  body.home .bignum .label { font-size: 13px; }
  body.home .slogan { font-size: clamp(24px, 2.6vw, 44px); margin-bottom: 12px; }
  body.home .slogan:lang(en) { font-size: clamp(20px, 2vw, 34px); }
  body.home .hero .people, body.home .stage-mid .note { font-size: 12.5px; }
  body.home .xc-text { font-size: 14px; line-height: 1.4; }
  body.home .gc-body p { font-size: 13px; line-height: 1.45; }
  body.home .xc-quoted { display: none; }   /* 引用卡先讓位，完整內容右邊那張就有 */
  body.home .tweetcard .text { -webkit-line-clamp: 2; }
  body.home .wallhead { margin-bottom: 6px; }
  @media (min-width: 981px) {
    body.home .xcard, body.home .gatecard { max-height: 55dvh; }
  }
}

/* 卡片內部的捲軸細一點，不要在深色底上出現一條亮灰帶 */
body.home .xcard, body.home .gatecard { scrollbar-width: thin; }
body.home .xcard::-webkit-scrollbar, body.home .gatecard::-webkit-scrollbar { width: 6px; }
body.home .xcard::-webkit-scrollbar-thumb { background: #2f3336; border-radius: 3px; }
body.home .gatecard::-webkit-scrollbar-thumb { background: #d5d7db; border-radius: 3px; }

/* ---------- 賠付進度條 ---------- */

.paybar { margin: 0 auto 18px; max-width: 460px; }
.paybar-track {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--accent); /* 底色就是「還沒賠的」 */
}
/* 已賠的那段用 K 線的漲綠，沒賠的那段是軌道本身的紅（--accent）——
   紅綠是交易所看盤的語言，不用讀字就知道哪邊是好消息（使用者 2026-08-24 指定）。 */
.paybar-fill {
  display: block; height: 100%; width: 100%;
  background: var(--up); border-radius: 999px;
  transform: scaleX(0); transform-origin: left center;
}
.paybar-labels {
  display: flex; justify-content: space-between;
  margin-top: 7px; font-size: 13px; color: var(--text-2);
}
.paybar-labels b { font-variant-numeric: tabular-nums; }
.paybar-labels .paid, .paybar-labels .paid b { color: var(--up); }
.paybar-labels .owed, .paybar-labels .owed b { color: var(--accent); }

@media (max-height: 840px) { body.home .paybar { margin-bottom: 12px; } }

/* ======================================================================
 * 非首頁：一屏（/join /support /roster /terms）
 *
 * 2026-09-13 使用者：「所有頁面都要能不用滾動就看完全部」。
 * body.onescreen 由 layout(footer=True) 掛上（首頁是 body.home，自己那套，不在這裡）。
 *
 * 機制（規格 §7）：body 固定 100dvh 的 flex 直欄，頁首與頁尾 flex:none，
 * main 吃掉剩下的高度而且 overflow:hidden——內容塞不下會被**裁掉**，不會出現捲軸。
 * ⚠ 所以每頁的內容要真的縮到夠小，不能靠裁；只有 /roster 的兩張表允許內部捲
 *   （名單會長大，這是唯一沒有代價的解）。
 * ⚠ 桌機（min-width: 981px）才這樣；手機在最底下的 media query 全部還原成單欄可捲，
 *   不在手機上裁內容。
 *
 * 1366×768 的高度預算（頁首 53 ＋ 頁尾 56 ＝ 109，main 剩 659，扣 main 上下 padding 20 → 639）：
 *   /join    左欄 h1 35 + lede 21~42 + 範本 ~230 + 鈕 44 + 標籤提醒 54~72 ≈ 390~420
 *            右欄 h2 26 + 表單 ~110 + 說明 36 + h2 26 + FAQ 三條 ~200~240 ≈ 400~440
 *   /roster  標題列 40 + 計數器 60+6 + 註記 34+8 → 兩張表各分到 ≈ 490（內部捲）
 *   /terms   標題 34 → 多欄區 ≈ 600；中文三欄估 ~550、英文四欄 12px 估 ~540
 * ================================================================== */

body.onescreen {
  height: 100dvh; min-height: 100dvh;
  display: flex; flex-direction: column;
  font-size: 14px; line-height: 1.5;
}
body.onescreen > header.top, body.onescreen > footer.bot { flex: none; }
body.onescreen main.wrap {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  width: 100%; max-width: 1240px; padding: 12px 20px 8px;
}
/* 條款與名單要吃寬度（多欄／兩張表並排）；加入頁兩欄 1180 就夠，再寬一行字太長 */
body.page-terms main.wrap, body.page-roster main.wrap { max-width: 1320px; }
body.page-terms h1 { font-size: 20px; }   /* 規格 §5：h1 縮 20px 一行，版本號併進右側小字 */
body.page-join main.wrap, body.page-support main.wrap { max-width: 1180px; }

/* 字級與間距：整頁縮一級。h2 原本 52px 的上邊距在一屏裡是奢侈品。 */
body.onescreen h1 { font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 6px; }
body.onescreen h2 { font-size: 15px; line-height: 1.35; letter-spacing: 0; margin: 0 0 6px; padding-top: 0; }
body.onescreen p { margin: 0 0 8px; }
body.onescreen .lede { font-size: 14px; line-height: 1.5; margin: 0 0 8px; }
body.onescreen .note { font-size: 12.5px; line-height: 1.45; margin: 0 0 8px; }
body.onescreen section { padding-bottom: 0; }
body.onescreen .actions { margin: 0 0 8px; gap: 10px; }
body.onescreen .btn { padding: 8px 16px; font-size: 14px; line-height: 1.3; }
body.onescreen .btn.small { padding: 6px 12px; font-size: 13px; }

/* 標題列：h1、lede、（名單頁的兩顆入口鈕）同一列 */
.pagehead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 8px; }
.pagehead h1, .pagehead .lede { margin: 0; }
.pagehead .actions { margin: 0 0 0 auto; align-self: center; }
.pagehead h1 small { font-size: 12.5px; font-weight: 400; color: var(--text-3); margin-left: 8px; letter-spacing: 0; }

/* ---- /join /support：兩欄（規格 §3） ---- */

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-items: start; }
.two-col pre.tweet { font-size: 13.5px; line-height: 1.45; padding: 12px; margin: 0 0 8px; }
.two-col form { margin: 0 0 8px; }
.two-col .field { margin-bottom: 8px; }
.two-col .field .hint { font-size: 12.5px; margin-bottom: 4px; }
.two-col input[type=url] { padding: 8px 11px; font-size: 14px; }
.two-col .msg { padding: 8px 12px; margin: 8px 0; font-size: 13px; line-height: 1.45; }
/* 送出成功後 #step4 蓋在表單原位（app.js 藏 form、開 #step4），三行以內，比表單矮 */
.two-col #step4 .msg { margin: 0 0 8px; }
.two-col #step4 a { display: inline-block; margin-top: 4px; }

/* FAQ：問答並列的小字清單。⚠ 不用 <details>——收起來的東西不算「看完全部」 */
.faq-compact { margin: 0; font-size: 12.5px; line-height: 1.4; }
.faq-compact dt { font-weight: 600; margin: 0 0 2px; color: var(--text); }
.faq-compact dd { margin: 0 0 8px; color: var(--text-2); }
.faq-compact dd:last-child { margin-bottom: 0; }
.faq-compact:lang(en) { font-size: 12px; }   /* 英文字多，右欄 FAQ 再小半級 */

/* ---- /roster：計數器一列小卡＋兩張表並排（規格 §4） ---- */

body.onescreen .counters { margin: 0 0 6px; grid-template-columns: repeat(4, 1fr); }
body.onescreen .counter { padding: 8px 14px; }                 /* 8+16+2+24+8 ≈ 58px ≤ 72 */
body.onescreen .counter .label { font-size: 12px; line-height: 1.3; margin-bottom: 2px; }
body.onescreen .counter .value { font-size: 20px; line-height: 1.2; }
body.onescreen .counter .unit { font-size: 12px; }
.roster-note { font-size: 12px; line-height: 1.4; color: var(--text-2); margin: 0 0 8px; }
.roster-note b { color: var(--text); }
.roster-note [data-updated]:not(:empty), .roster-note [data-empty-note]:not(.hidden) { margin-right: 10px; }

/* 兩張表各自吃掉剩下的高度、內部捲、表頭 sticky。
   用 flex 而不是 calc(100dvh - …)：標題列與註記的高度三語不同，flex 自己算比手寫常數準。 */
.roster-cols { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.roster-col { display: flex; flex-direction: column; min-height: 0; }
.roster-col h2 { flex: none; }
.roster-col h2 small { font-size: 12px; font-weight: 400; color: var(--text-3); margin-left: 8px; }
.roster-col .tablewrap.scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0;
  border: 1px solid var(--line); border-radius: 8px; scrollbar-width: thin;
}
.roster-col table { font-size: 13px; }
.roster-col th, .roster-col td { padding: 6px 10px; }
/* sticky 表頭：border-collapse 下 sticky 的框線會跟著跑掉，底線改用 inset 陰影畫 */
.roster-col thead th {
  position: sticky; top: 0; z-index: 1; background: var(--surface);
  font-size: 12px; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line-strong);
}

/* ---- /terms：CSS 多欄（規格 §5），文字一個字不動 ---- */

.terms-body {
  column-count: 3; column-gap: 28px;
  font-size: 12.5px; line-height: 1.45; color: var(--text);
}
.terms-body h2 {
  font-size: 14px; line-height: 1.3; margin: 10px 0 4px; padding: 0;
  break-after: avoid; break-inside: avoid;
}
.terms-body h2:first-child { margin-top: 0; }
.terms-body p { margin: 0 0 8px; break-inside: avoid; }
.terms-body ul { margin: 0 0 8px; padding-left: 18px; }
.terms-body li { margin: 0 0 2px; break-inside: avoid; }
/* 英文 4,327 字最難塞：三欄在 1366×768 估算會超出，直接 12px／1.4 ＋ 四欄（規格 §5 允許的兩級退路） */
.terms-body:lang(en) { column-count: 4; font-size: 12px; line-height: 1.4; }
@media (min-width: 1500px) { .terms-body { column-count: 4; } }

/* 螢幕不高再縮一級（跟首頁同一套作法：縮留白與字級，內容一個字都不少） */
@media (max-height: 840px) {
  body.onescreen main.wrap { padding: 8px 20px 6px; }
  body.onescreen h1 { font-size: 20px; }
  body.onescreen .lede { font-size: 13.5px; margin-bottom: 6px; }
  body.onescreen .note { font-size: 12px; margin-bottom: 6px; }
  .two-col pre.tweet { font-size: 13px; line-height: 1.4; padding: 10px; }
  .faq-compact { font-size: 12px; }          /* 英文本來就 12px，規格的下限，不再往下 */
  .terms-body { font-size: 12px; line-height: 1.4; }   /* 英文本來就 12px／1.4 四欄，維持 */
  .terms-body h2 { margin-top: 8px; }
}

/* 手機：全部還原成單欄可捲，不在手機上裁內容 */
@media (max-width: 980px) {
  body.onescreen { height: auto; display: block; }
  body.onescreen main.wrap { overflow: visible; display: block; }
  .two-col, .roster-cols { display: block; }
  .roster-col { display: block; margin-bottom: 18px; }
  .roster-col .tablewrap.scroll { overflow-y: visible; border: 0; border-radius: 0; }
  .terms-body, .terms-body:lang(en) { column-count: 1; }
  .pagehead .actions { margin-left: 0; }
  body.onescreen .counters { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}