/* 猎冷 COLDCATCH · 设计系统：纸面编辑部（浅色）与夜战雷达（深色）双族共用一套组件
   规则：赛果选项永不着色；颜色只表达状态与交互，不表达观点。 */
:root {
  --paper: #F6F5F1; --panel: #FCFBF8; --well: #EFEEE7;
  --ink: #14150F; --ink-2: #5B5C53; --ink-3: #8B8C82;
  --line: rgba(20, 21, 15, .14); --line-soft: rgba(20, 21, 15, .08);
  --signal: #C8462F; --signal-soft: rgba(200, 70, 47, .10);
  --moss: #2F5D50; --moss-soft: rgba(47, 93, 80, .10);
  --miss: #9A9B94; --void: #6E6F68; --ink-4: #B4B5AC;
  /* 派系色（一色一义，只标来源派系，不标观点强弱） */
  --fx-model: #0E7490; --fx-data: #1B8F62; --fx-expert: #8A5F11;
  --fx-market: #2F5D50; --fx-move: #5B4CC4; --fx-off: var(--ink-2);
  --shadow: 0 8px 30px rgba(20, 21, 15, .10);
  --font-display: "Instrument Serif", "Noto Serif SC", "Songti SC", serif;
  --font-ui: "MiSans", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --row-h: 32px; --radius: 7px; --ease: cubic-bezier(.2, .7, .2, 1); --dur: 160ms;
}
:root[data-dark] {
  /* 夜战雷达：中调板岩青 + 青玉 + 琥珀 + 朱红，灰阶不超过五级。
     提亮史：#06090B(.10) → #0A1014(.22) → #1C262B(.28) → 现在这版。
     前几轮只抬了整体亮度，没拉开「层」——panel 与底色亮度差只有 0.010，
     字是能读了，框还是糊成一片。这一版专门把三级表面的间距拉开：
       paper #131B20 → panel #212E35 → well #30414B → well-2 #3E5360
       相邻亮度比 2.47× / 1.94× / 1.64×（上一版是 1.58× / 1.42×）
     描边同步加粗到 .42，实测叠在 panel 上的亮度差从 0.090 提到 0.166。 */
  --paper: #131B20; --panel: #212E35; --well: #30414B; --well-2: #3E5360;
  --ink: #F7FCF9; --ink-2: #D6E6E1; --ink-3: #B0C4C0; --ink-4: #8A9E9B;
  --line: rgba(200, 245, 225, .42); --line-soft: rgba(200, 245, 225, .26);
  --signal: #FF8574; --signal-soft: rgba(255, 133, 116, .20);
  --moss: #5CF0B8; --moss-soft: rgba(92, 240, 184, .18);
  --miss: #8A9E9B; --void: #A5B8B4;
  --fx-model: #66E4FF; --fx-data: #5CF0B8; --fx-expert: #FFCE63;
  --fx-market: #9AD3BF; --fx-move: #B4A8FF; --fx-off: #C6D8D4;
  --shadow: 0 8px 30px rgba(0, 0, 0, .45);
  /* 底纹网格要比正文描边弱得多，否则描边加粗后整页会「起纹」 */
  --grid-line: rgba(200, 245, 225, .05);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--paper); color: var(--ink); font: 400 14px/20px var(--font-ui);
  -webkit-font-smoothing: antialiased; }
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--signal-soft); }
.num, .matrix, td.n, .prob { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 3px; }
/* 深色下原生 select / 日期控件的箭头与文字（借鉴参考站：暗底控件不靠系统默认色） */
:root[data-dark] select { background-color: var(--panel); color-scheme: dark; }
:root[data-dark] input, :root[data-dark] textarea { color-scheme: dark; }
:root[data-dark] select option { background: var(--panel); color: var(--ink); }

/* ---------- 骨架 ---------- */
.hdr { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 18px;
  height: 56px; padding: 0 22px; background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand b { font: 400 21px/1 var(--font-display); letter-spacing: .02em; }
.brand small { font: 500 10px/1 var(--font-num); color: var(--ink-3); letter-spacing: .18em; }
.nav { display: flex; gap: 2px; margin-left: 6px; }
.nav a { padding: 6px 12px; border-radius: var(--radius); color: var(--ink-2); font-size: 13.5px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.nav a:hover { color: var(--ink); background: var(--well); }
.nav a.on { color: var(--ink); background: var(--well); font-weight: 500; }
.nav a.on::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal); margin-right: 7px; vertical-align: 1px; }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 32px; height: 32px; border-radius: var(--radius); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-2); transition: all var(--dur) var(--ease); }
.icon-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.rec-dot { position: relative; }
.rec-dot i { position: absolute; top: -3px; right: -3px; min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 7px; background: var(--signal); color: var(--paper); font: 500 9px/14px var(--font-num);
  text-align: center; font-style: normal; }
main { padding: 18px 22px 96px; max-width: 1560px; margin: 0 auto; }
.foot { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: flex; gap: 22px; align-items: center;
  padding: 8px 22px; border-top: 1px solid var(--line); background: var(--panel);
  font: 400 11.5px/16px var(--font-num); color: var(--ink-3); }
.foot b { color: var(--ink-2); font-weight: 500; }
.foot .sep { width: 1px; height: 12px; background: var(--line); }

/* ---------- 工具条 ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.toolbar .grow { flex: 1; }
.search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; min-width: 220px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.search input { border: 0; background: none; width: 100%; outline: none; font-size: 13px; }
.search kbd { font: 500 10px/16px var(--font-num); color: var(--ink-3); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 5px; }
.tool-note { font-size: 12px; color: var(--ink-3); }

/* 分段控件 */
.seg { position: relative; display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); }
.seg-btn { position: relative; z-index: 1; padding: 5px 14px; border-radius: 6px; font-size: 13px; color: var(--ink-2);
  transition: color var(--dur) var(--ease); }
.seg-btn.on { color: var(--ink); font-weight: 500; }
.seg-ind { position: absolute; top: 3px; bottom: 3px; border-radius: 6px; background: var(--well);
  border: 1px solid var(--line-soft); transition: left var(--dur) var(--ease), width var(--dur) var(--ease); z-index: 0; }

/* 下拉 */
.sel { position: relative; display: inline-block; }
.sel-btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-size: 13px; color: var(--ink-2);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); max-width: 300px; }
.sel-btn:hover { border-color: var(--ink-3); }
.sel-btn.is-active { color: var(--ink); border-color: var(--ink-3); }
.sel-btn.is-active .sel-label::after { content: " ·"; color: var(--signal); }
.sel-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: var(--ink-3); margin-top: 3px; }
.sel-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; min-width: 220px; max-height: 320px;
  overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  box-shadow: var(--shadow); animation: pop var(--dur) var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
.sel-search { width: 100%; margin: 2px 2px 6px; padding: 6px 9px; border: 1px solid var(--line);
  border-radius: 5px; background: var(--paper); outline: none; font-size: 12.5px; }
.sel-group { padding: 7px 8px 3px; font: 500 10.5px/14px var(--font-num); letter-spacing: .12em; color: var(--ink-3); }
.sel-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; cursor: pointer; font-size: 13px; }
.sel-opt:hover { background: var(--well); }
.sel-opt .sel-box { width: 15px; height: 15px; flex: none; border: 1px solid var(--line); border-radius: 4px;
  display: grid; place-items: center; font-size: 10px; color: var(--paper); background: transparent; }
.sel-opt.on .sel-box { background: var(--signal); border-color: var(--signal); }
.sel-opt.on .sel-txt { font-weight: 500; }
.sel-hint { margin-left: auto; font: 400 11px/14px var(--font-num); color: var(--ink-3); }
.sel-empty { padding: 10px; color: var(--ink-3); font-size: 12.5px; }

/* ---------- 场次矩阵 ---------- */
.wrap { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: clip; }
table.matrix { width: 100%; border-collapse: collapse; }
.matrix thead th { position: sticky; top: 56px; z-index: 5; background: var(--well);
  font: 500 11px/16px var(--font-num); letter-spacing: .08em; color: var(--ink-3); text-align: left;
  padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.matrix tbody tr { border-bottom: 1px solid var(--line-soft); height: var(--row-h); cursor: pointer;
  animation: rowin 240ms var(--ease) backwards; transition: background var(--dur) var(--ease); }
@keyframes rowin { from { opacity: 0; transform: translateY(5px); } }
.matrix tbody tr:hover { background: var(--well); }
.matrix td { padding: 6px 10px; vertical-align: middle; }
.matrix .m-num { font: 500 12px/16px var(--font-num); color: var(--ink-3); white-space: nowrap; }
.matrix .dg { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--moss);
  border-radius: 999px; background: var(--moss-soft); color: var(--moss);
  font: 500 10px/15px var(--font-ui); vertical-align: 1px; white-space: nowrap; }
.matrix .m-lg { display: inline-block; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.matrix .m-vs b { font-weight: 500; }
.matrix .m-vs i { font-style: normal; color: var(--ink-3); font-size: 12px; margin: 0 5px; }
.matrix .m-vs small { display: block; color: var(--ink-3); font-size: 11px; }
.matrix .m-ko { font-family: var(--font-num); font-size: 12.5px; white-space: nowrap; }
.matrix .m-ko small { display: block; color: var(--ink-3); font-size: 10.5px; }
.cells { display: flex; gap: 6px; flex-wrap: wrap; }
.cell { min-width: 64px; padding: 4px 8px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--paper); }
.cell .k { font: 500 10px/14px var(--font-num); color: var(--ink-3); letter-spacing: .04em; }
.cell .p { font: 500 13px/18px var(--font-num); color: var(--ink); }
.cell .q { font: 400 10.5px/14px var(--font-num); color: var(--ink-3); }
.cell .q em { font-style: normal; }
.cell .q em.up { color: var(--ink-2); }
.cell .q em.dn { color: var(--ink-2); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px;
  font: 500 11px/17px var(--font-ui); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.badge.lvA { border-color: var(--moss); color: var(--moss); }
.badge.lvB { border-color: var(--line); }
.badge.lvC { border-style: dashed; color: var(--ink-3); }
.badge.gated { border-color: var(--signal); color: var(--signal); background: var(--signal-soft); }
.chip-row { display: flex; gap: 5px; }
.chip { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font: 500 11.5px/18px var(--font-ui);
  color: var(--ink-2); transition: all 120ms var(--ease); white-space: nowrap; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.saved { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip.saved::before { content: "✓ "; }
.st { display: inline-flex; align-items: center; gap: 5px; font: 500 11px/16px var(--font-ui); white-space: nowrap; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.st.pending { color: var(--signal); }
.st.hit { color: var(--moss); }
.st.miss { color: var(--miss); }
.st.voided { color: var(--void); }
.st.voided::before { border-radius: 1px; transform: rotate(45deg); width: 6px; height: 6px; }
.st::after { content: attr(data-x); }

/* ---------- 抽屉 ---------- */
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(12, 12, 8, .38); opacity: 0; transition: opacity var(--dur) var(--ease); }
.scrim.in { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; width: min(560px, 94vw); overflow-y: auto;
  background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow);
  transform: translateX(30px); opacity: 0; transition: transform 220ms var(--ease), opacity 220ms var(--ease); }
.drawer.in { transform: none; opacity: 1; }
.dw-hd { position: sticky; top: 0; z-index: 2; display: flex; gap: 12px; align-items: flex-start; padding: 18px 22px 14px;
  background: var(--panel); border-bottom: 1px solid var(--line); }
.dw-hd h2 { margin: 0; font: 400 24px/30px var(--font-display); }
.dw-hd .sub { color: var(--ink-3); font-size: 12px; margin-top: 4px; }
.dw-close { margin-left: auto; }
.dw-body { padding: 6px 22px 40px; }
.sect { margin: 20px 0 8px; }
.sect h3 { margin: 0 0 10px; font: 500 11px/16px var(--font-num); letter-spacing: .14em; color: var(--ink-3); }
.sect h3 a { margin-left: 8px; letter-spacing: 0; font-family: var(--font-ui); color: var(--signal); }
table.read { width: 100%; border-collapse: collapse; }
.read th { text-align: left; font: 500 10.5px/16px var(--font-num); color: var(--ink-3); padding: 4px 8px; border-bottom: 1px solid var(--line); }
.read td { padding: 7px 8px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.read td.n { font-family: var(--font-num); font-size: 12.5px; }
.read tr.best td { background: var(--well); }
.note { margin: 10px 0; padding: 10px 12px; border-left: 2px solid var(--signal); background: var(--signal-soft);
  border-radius: 0 8px 8px 0; font-size: 12.5px; line-height: 19px; color: var(--ink-2); }
.note.moss { border-color: var(--moss); background: var(--moss-soft); }
.kv { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 12.5px; color: var(--ink-2); }
.kv b { font-family: var(--font-num); font-weight: 500; color: var(--ink); }
.pickbar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mini { color: var(--ink-3); font-size: 11.5px; line-height: 18px; margin: 6px 0; }
.mini.warn { color: var(--signal); }

/* ---------- 抽屉：爆冷概率区块（中性配色，不表达赛果倾向） ---------- */
.sect.upset { padding: 12px 14px 10px; border: 1px solid var(--line); border-left: 2px solid var(--ink-2);
  border-radius: 0 8px 8px 0; background: var(--well); }
.sect.upset .read th, .sect.upset .read td { background: var(--panel); }
.upset-big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.upset-big .k { font-size: 12px; color: var(--ink-2); }
.upset-big b { font: 500 30px/36px var(--font-num); font-variant-numeric: tabular-nums; }
.upset-big .g { font-size: 12px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); background: var(--panel); }

/* ---------- 我的记录 ---------- */
.views { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 6px 0 18px; }
.views button { padding: 9px 16px; font-size: 13.5px; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.views button.on { color: var(--ink); font-weight: 500; border-bottom-color: var(--signal); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.card { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 14px 16px; position: relative; overflow: hidden; }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); }
.card.hit::before { background: var(--moss); }
.card.miss::before { background: var(--miss); }
.card.pending::before { background: var(--signal); }
.card.voided::before { background: repeating-linear-gradient(45deg, var(--void) 0 3px, transparent 3px 6px); }
.card .top { display: flex; align-items: center; gap: 8px; }
.card .vs { font: 400 17px/24px var(--font-display); margin: 8px 0 2px; }
.card .meta { color: var(--ink-3); font-size: 12px; }
.card .pick { margin: 10px 0 4px; }
.card .pick .lbl { font-size: 11px; color: var(--ink-3); margin-right: 6px; }
.card .x { position: absolute; top: 10px; right: 10px; color: var(--ink-3); font-size: 14px; padding: 2px 6px; border-radius: 4px; }
.card .x:hover { color: var(--signal); background: var(--signal-soft); }
.wm { font: 400 10px/14px var(--font-num); color: var(--ink-3); margin-top: 8px; letter-spacing: .08em; }
.empty { padding: 60px 20px; text-align: center; color: var(--ink-3); }
.empty b { display: block; font: 400 20px/28px var(--font-display); color: var(--ink-2); margin-bottom: 6px; }
.panel { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 18px 20px; margin-bottom: 16px; }
.panel h3 { margin: 0 0 4px; font: 400 19px/26px var(--font-display); }
.panel .sub { color: var(--ink-3); font-size: 12.5px; margin-bottom: 14px; }
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel); font-size: 13px; transition: all var(--dur) var(--ease); }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.danger { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 45%, var(--line)); }
textarea.in, input.in { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); outline: none; font-family: var(--font-num); font-size: 12.5px; }
textarea.in { min-height: 88px; resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; }
.stat b { display: block; font: 400 26px/34px var(--font-num); }
.stat span { font-size: 12px; color: var(--ink-3); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.method h2 { font: 400 26px/34px var(--font-display); margin: 34px 0 10px; }
.method p, .method li { color: var(--ink-2); max-width: 720px; }
.method .formula { display: inline-block; margin: 8px 0; padding: 10px 16px; border: 1px dashed var(--line);
  border-radius: 8px; font: 500 14px/22px var(--font-num); color: var(--ink); }

/* ---------- 反馈 ---------- */
#toast-box { position: fixed; left: 50%; bottom: 56px; transform: translateX(-50%); z-index: 100;
  display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { padding: 9px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px;
  opacity: 0; transform: translateY(8px); transition: all var(--dur) var(--ease); box-shadow: var(--shadow); }
.toast.in { opacity: 1; transform: none; }

/* ---------- 行内展开（混合多选） ---------- */
.exp { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); display: grid;
  place-items: center; color: var(--ink-3); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.mrow:hover .exp { color: var(--ink); border-color: var(--ink-3); }
.mrow.open .exp { transform: rotate(180deg); color: var(--ink); }
tr.drow > td { padding: 0 10px 14px; background: var(--well); }
tr.drow[hidden] { display: none; }
.dpanel { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  animation: pop var(--dur) var(--ease); }
.dp-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.dp-head .grow { flex: 1; }
.dp-head .meta { color: var(--ink-3); font: 400 11.5px/16px var(--font-num); }
.dp-selcnt { font: 500 11.5px/16px var(--font-ui); color: var(--ink-2); }
.dp-selcnt b { color: var(--signal); font-family: var(--font-num); }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 6px; }
.opt { display: grid; gap: 1px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); text-align: left; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.opt:hover { border-color: var(--ink-3); }
.opt .k { font-weight: 500; font-size: 12.5px; }
.opt .o, .opt .p, .opt .q { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.opt .o { font-size: 11px; color: var(--ink-3); }
.opt .p { font-size: 14px; font-weight: 500; }
.opt .q { font-size: 10.5px; color: var(--ink-3); }
.opt.saved { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.opt.saved .o, .opt.saved .q { color: color-mix(in srgb, var(--paper) 68%, transparent); }
.opt.saved .k::before { content: "✓ "; }
.m-sel { font: 400 11.5px/16px var(--font-num); color: var(--ink-3); white-space: nowrap; }
.m-sel b { color: var(--signal); font-weight: 500; }

/* ---------- 本机查看额度 chip ---------- */
.plan-chip { font: 500 11.5px/1 var(--font-num); padding: 6px 12px; border: 1px solid var(--line);
  border-radius: 999px; color: var(--ink-2); background: var(--paper); cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.plan-chip:hover { border-color: var(--ink-3); }
.plan-chip b { color: var(--signal); font-weight: 500; }
.plan-chip[data-plan="paid"] { border-color: var(--moss); color: var(--moss); }
.plan-chip[data-plan="paid"] b { color: var(--moss); }
.sect.lock p { margin: 0 0 8px; font: 400 13px/1.75 var(--font-ui); color: var(--ink-2); }
.sect.lock .mini { color: var(--ink-3); font-size: 11.5px; }
.sect .row { display: flex; gap: 8px; margin-top: 12px; }

/* ---------- 本期已选条 ---------- */
.basket { position: fixed; left: 0; right: 0; bottom: 33px; z-index: 55; display: flex; gap: 8px;
  align-items: center; flex-wrap: wrap; padding: 7px 22px; border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(8px);
  transform: translateY(120%); transition: transform 220ms var(--ease); }
.basket.in { transform: none; }
.basket .lbl { font: 500 10.5px/16px var(--font-num); letter-spacing: .1em; color: var(--ink-3); }
.basket .lbl b { color: var(--signal); }
.bk-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border: 1px solid var(--line);
  border-radius: 999px; font-size: 12px; background: var(--panel); }
.bk-chip i { font-style: normal; font-family: var(--font-num); color: var(--ink-3); }
.bk-chip b { font-weight: 500; }
.bk-chip button { color: var(--ink-3); font-size: 12px; line-height: 1; }
.bk-chip button:hover { color: var(--signal); }
.basket .btn { padding: 4px 11px; font-size: 12px; }

/* ---------- 外部读数：按来源站点分块（行内标签 + 展开面板区块） ---------- */
.badge.xtag { margin-left: 6px; border-style: dashed; color: var(--ink-3); cursor: pointer; }
.badge.xtag:hover { border-color: var(--ink-2); color: var(--ink); }
.badge.xtag.none { color: var(--ink-3); }
.badge.xtag.pp { border-style: solid; border-color: color-mix(in srgb, var(--fx-expert) 55%, transparent); color: var(--fx-expert); }
.badge.xtag.pp:hover { border-color: var(--fx-expert); color: var(--fx-expert); }
.xwrap { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); display: grid; gap: 9px; }
.xwrap-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); }
.xwrap-hd b { font: 500 11px/16px var(--font-num); letter-spacing: .14em; color: var(--ink-2); }
.xwrap-hd .grow { flex: 1 1 auto; }
.xwrap-hd a.xmore { color: var(--signal); border-bottom: 1px solid var(--signal-soft); }
.xblk { border: 1px solid var(--line); border-left: 2px solid var(--ink-2); border-radius: 0 8px 8px 0;
  background: var(--well); padding: 10px 12px 9px; }
.xblk.none { border-left: 2px dashed var(--line); background: transparent; }
.xblk-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.xblk-hd .grow { flex: 1 1 auto; }
.xblk-hd b { font-weight: 500; font-size: 12.5px; letter-spacing: .01em; }
.xblk-host { font-family: var(--font-num); font-size: 11px; color: var(--ink-3); }
.xblk-kind { font-size: 11px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; background: var(--panel); }
.xblk-state { font-size: 11px; color: var(--ink-2); font-family: var(--font-num); }
.xblk-state.off { color: var(--signal); }
.xnote { margin: 6px 0 0; font-size: 11px; line-height: 16px; color: var(--ink-3); }
.xnone { margin: 0; font-size: 12px; line-height: 18px; color: var(--ink-3); }
.xrow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 7px; }
.xrow .xk { font-size: 11px; color: var(--ink-3); }
.xrow b { font-weight: 500; }
.xraw { font-family: var(--font-num); font-size: 11px; color: var(--ink-3); }
table.xtab { background: var(--panel); border: 1px solid var(--line-soft); }
.xtab th { background: var(--well); }
.xtab td { vertical-align: top; font-size: 12.5px; }
.xtab td.xwho { font-family: var(--font-num); font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.xtab td.xwhy { color: var(--ink-2); font-size: 11.5px; line-height: 16px; max-width: 420px; }
.xtab td.xtt { font-size: 11.5px; color: var(--ink-3); }
.xtab td b { font-weight: 500; }

/* ---------- 外部读数 · 派系与偏离标记（insight.js 输出） ---------- */
.xfam { display: inline-flex; align-items: center; gap: 4px; font: 500 10.5px/1 var(--font-num);
  letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor;
  color: var(--ink-2); vertical-align: 1px; white-space: nowrap; }
.xfam.fx-model { color: var(--fx-model); } .xfam.fx-data { color: var(--fx-data); }
.xfam.fx-expert { color: var(--fx-expert); } .xfam.fx-market { color: var(--fx-market); }
.xfam.fx-move { color: var(--fx-move); } .xfam.fx-off { color: var(--ink-3); }
.xblk.fx-model { border-left-color: var(--fx-model); }
.xblk.fx-data { border-left-color: var(--fx-data); }
.xblk.fx-expert { border-left-color: var(--fx-expert); }
.xblk.fx-market { border-left-color: var(--fx-market); }
.xblk.fx-move { border-left-color: var(--fx-move); }
.xblk.fx-off { border-left-color: var(--ink-3); }
.xblk-hd .xfam { margin-right: 2px; }

/* 时效状态灯：绿=阈值内 琥珀=超阈值 朱红=保留上一份 灰=本期未取到 */
.xdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4);
  vertical-align: 1px; margin: 0 4px 0 2px; }
.xdot.fresh { background: var(--moss); }
.xdot.aged { background: var(--fx-expert); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fx-expert) 22%, transparent); }
.xdot.stale { background: var(--signal); box-shadow: 0 0 0 2px var(--signal-soft); }
.xdot.dead { background: var(--ink-4); border: 1px solid var(--line); }
.xdot.ok { background: var(--ink-2); }
.xage { font: 400 11px/16px var(--font-num); color: var(--ink-3); }

/* 分级标记：金色只用来说「有肉」，朱红只用来说「反向/爆冷」，不用于报错 */
.xmeat { display: inline-flex; align-items: center; gap: 5px; font: 500 11.5px/1 var(--font-ui);
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2);
  white-space: nowrap; cursor: help; }
.xmeat.g-s, .xmeat.g-a { border-color: var(--fx-expert); color: var(--fx-expert);
  background: color-mix(in srgb, var(--fx-expert) 12%, transparent); }
.xmeat.g-x, .xmeat.g-y { border-color: var(--signal); color: var(--signal);
  background: var(--signal-soft); }
.xmeat.g-b { border-color: var(--ink-3); color: var(--ink); }
.xmeat.g-c { border-color: var(--line); color: var(--ink-3); }
.xmeat.g-— { border-style: dashed; color: var(--ink-3); }

/* 三指标条 */
.xmetrics { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 2px 0 10px; }
.xmetrics > .xmeat { align-self: center; }
.xm { flex: 1 1 190px; min-width: 176px; border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--well); padding: 7px 10px; display: flex; flex-direction: column; gap: 2px; }
.xm i { font-style: normal; font-size: 11px; color: var(--ink-3); letter-spacing: .02em; }
.xm b { font: 500 16px/20px var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink); }
.xm small { font-size: 11px; line-height: 15px; color: var(--ink-3); }
.xmetrics.none .xm b { color: var(--ink-3); }

/* 源指纹条：哪个来源在这场有读数（源页复用同一控件做分级筛选，故 button 也生效） */
.xfp button.pick { box-shadow: 0 0 0 1px currentColor; font-weight: 700; }
.xfp button:hover { border-color: currentColor; }
.xfp { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.xfp i, .xfp button { font-style: normal; font: 500 10.5px/1 var(--font-num); padding: 3px 7px; border-radius: 3px;
  border: 1px solid var(--line); }
.xfp i.on, .xfp button.on { color: var(--panel); background: currentColor; }
.xfp i.on.fx-model, .xfp button.on.fx-model { color: #fff; background: var(--fx-model); border-color: var(--fx-model); }
.xfp i.on.fx-market, .xfp button.on.fx-market { color: #fff; background: var(--fx-market); border-color: var(--fx-market); }
.xfp i.on.fx-expert, .xfp button.on.fx-expert { color: #1a1408; background: var(--fx-expert); border-color: var(--fx-expert); }
.xfp i.on.fx-move, .xfp button.on.fx-move { color: #f4f2ff; background: var(--fx-move); border-color: var(--fx-move); }
.xfp i.on.fx-data, .xfp button.on.fx-data { color: #04170f; background: var(--fx-data); border-color: var(--fx-data); }
.xfp i.off, .xfp button.off { color: var(--ink-4); border-style: dashed; text-decoration: line-through; }
:root[data-dark] .xfp i.on.fx-model, :root[data-dark] .xfp button.on.fx-model { color: #041a20; }
:root[data-dark] .xfp i.on.fx-expert, :root[data-dark] .xfp button.on.fx-expert { color: #241800; }
:root[data-dark] .xfp i.on.fx-move, :root[data-dark] .xfp button.on.fx-move { color: #0d0a24; }
:root[data-dark] .xfp i.on.fx-data, :root[data-dark] .xfp button.on.fx-data { color: #04170f; }

/* 爆冷/风险代理信号 */
.xsig { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.xsig li { display: grid; grid-template-columns: 148px 1fr; gap: 10px; font-size: 12px; line-height: 17px;
  border-left: 2px solid var(--signal); padding: 2px 0 2px 8px; }
.xsig li b { font-weight: 500; color: var(--signal); }
.xsig li span { color: var(--ink-2); }
@media (max-width: 720px) { .xsig li { grid-template-columns: 1fr; gap: 1px; } }

/* 原文与中文口径并置（摘录纪律：原文优先，口径只解释数字） */
.xorig { display: block; font: 400 11px/15px var(--font-num); color: var(--ink-3); }
.xorig::before { content: "\201C"; } .xorig::after { content: "\201D"; }
.xcn { display: block; font-size: 12px; line-height: 17px; color: var(--ink); margin-top: 2px; }
.xext { font: 500 11px/1 var(--font-num); color: var(--ink-3); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 9px; }
.xext:hover { color: var(--ink); border-color: var(--ink-3); }

/* 偏离明细表 / 有肉—爆冷总表 */
table.xtab td.xd-neg { color: var(--ink-3); }
table.xtab td.xd-pos { color: var(--fx-expert); font-weight: 500; }
table.xtab tr.xrow-hot td { background: var(--signal-soft); }
.ledger { display: flex; flex-direction: column; gap: 10px; }
.ledger .lg-fam { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ledger .lg-fam p { margin: 0; font-size: 11.5px; color: var(--ink-3); }
.disc { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.disc li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; font-size: 12.5px; line-height: 18px;
  border-top: 1px solid var(--line-soft); padding-top: 8px; }
.disc li b { font-weight: 500; } .disc li span { color: var(--ink-2); }

/* ---------- 首页主题头（借鉴参照站：品牌名 ＋ 定位短语 ＋ 主题一句话，只上首页，不改信息架构） ---------- */
.hero { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--panel); margin-bottom: 12px; position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, color-mix(in srgb, var(--moss) 7%, transparent), transparent 46%),
              linear-gradient(300deg, color-mix(in srgb, var(--signal) 5%, transparent), transparent 40%); }
.hero-brand { display: flex; align-items: center; gap: 12px; flex: none; position: relative;
  padding: 15px 20px 15px 17px; border-right: 1px solid var(--line); }
.hero-mark { width: 38px; height: 38px; flex: none; position: relative; border-radius: 9px;
  background: conic-gradient(from 40deg, var(--signal), var(--moss), var(--fx-model), var(--signal)); }
.hero-mark::after { content: ""; position: absolute; inset: 4px; border-radius: 6px; background: var(--panel); }
.hero-mark::before { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; z-index: 1;
  transform: translate(-50%, -50%) rotate(45deg); border-radius: 2px;
  background: linear-gradient(135deg, var(--signal), var(--moss)); }
.hero-name { display: flex; flex-direction: column; gap: 3px; }
.hero-name b { font: 400 25px/1 var(--font-display); letter-spacing: .03em; }
.hero-name b em { font-style: normal; color: var(--signal); }
.hero-name small { font: 500 9.5px/1 var(--font-num); letter-spacing: .22em; color: var(--ink-3); }
.hero-copy { flex: 1 1 420px; min-width: 300px; position: relative; padding: 14px 20px; align-self: center; }
.hero-slogan { margin: 0 0 5px; font-size: 16px; line-height: 1.5; color: var(--ink); letter-spacing: .01em; }
.hero-slogan b { color: var(--signal); font-weight: 600; }
.hero-slogan .hk { font: 500 11px/1 var(--font-num); letter-spacing: .1em; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; margin-right: 8px; vertical-align: 2px; }
.hero-desc { margin: 0; font-size: 12px; line-height: 1.7; color: var(--ink-2); max-width: 112ch; }
.hero-desc b { color: var(--ink); font-weight: 500; }
@media (max-width: 940px) {
  .hero-brand { border-right: 0; border-bottom: 1px solid var(--line); width: 100%; padding: 12px 14px; }
  .hero-copy { padding: 12px 14px; }
  .hero-slogan { font-size: 14.5px; }
}

/* ======================================================================
   猎冷主题层（令牌与版式取自 ~/Desktop/web/design.md §6 + index.html 原型）
   配置入口：assets/config.js —— theme / layout / view / card / meat / sources
   纪律：金色只说「有肉」，朱红只说「爆冷与陷阱」，青绿只说数据，紫只说异动。
   ====================================================================== */

/* 语义别名：只写一次，随主题自动换值（CSS 变量是动态解析的） */
:root {
  --gold: var(--fx-expert); --gold-dim: color-mix(in srgb, var(--fx-expert) 12%, transparent);
  --cold: var(--signal);    --cold-dim: var(--signal-soft);
  --jade: var(--moss);      --jade-dim: var(--moss-soft);
  --cyan: var(--fx-model);  --violet: var(--fx-move);
  --col-l: 258px; --col-r: 336px; --card-min: 430px; --col-gap: 12px;
  --bp-right: 1340px; --bp-left: 920px; --grid-px: 46px;
}
/* 窄体数字：报表感来自字面而不是框线 */
:root[data-numerals="din"] {
  --font-num: "DIN Condensed", "DIN Alternate", "Avenir Next Condensed", "PingFang SC", ui-sans-serif, sans-serif;
}
/* 夜战氛围层：46px 网格底纹 + 双径向光晕 + 顶部扫描线（各只有一层，克制） */
:root[data-theme="ops"][data-ambience] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(760px 420px at 78% -6%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 62%),
    radial-gradient(680px 380px at 8% 4%, color-mix(in srgb, var(--jade) 6%, transparent), transparent 60%),
    repeating-linear-gradient(0deg, var(--grid-line, var(--line-soft)) 0 1px, transparent 1px var(--grid-px)),
    repeating-linear-gradient(90deg, var(--grid-line, var(--line-soft)) 0 1px, transparent 1px var(--grid-px));
}
:root[data-theme="ops"][data-ambience][data-sweep] body::after {
  content: ""; position: fixed; left: 0; right: 0; top: -120px; height: 120px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--jade) 6%, transparent), transparent);
  animation: sweep 9s linear infinite;
}
@keyframes sweep { 0% { transform: translateY(0); } 100% { transform: translateY(140vh); } }
:root[data-dark] ::-webkit-scrollbar { width: 9px; height: 9px; }
:root[data-dark] ::-webkit-scrollbar-track { background: var(--paper); }
:root[data-dark] ::-webkit-scrollbar-thumb { background: var(--well-2, var(--well)); border-radius: 5px; }

/* 深色下的控件可读性：分段控件的选中段、按钮、下拉、搜索框都靠「实底反白」而不是靠边框区分 */
:root[data-dark] .seg { background: var(--well); border-color: var(--line); }
:root[data-dark] .seg-ind { background: var(--ink-2); border-color: transparent; }
:root[data-dark] .seg-btn { color: var(--ink-2); }
:root[data-dark] .seg-btn.on { color: #10181D; }
:root[data-dark] .btn { border-color: var(--line); color: var(--ink-2); background: var(--well); }
:root[data-dark] .btn:hover { color: var(--ink); border-color: var(--ink-3); }
:root[data-dark] .btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
:root[data-dark] .sel-btn, :root[data-dark] .search, :root[data-dark] .plan-chip { background: var(--well); border-color: var(--line); }
:root[data-dark] .sel-btn { color: var(--ink-2); }
:root[data-dark] .plan-chip:hover { border-color: var(--ink-3); color: var(--ink); }
:root[data-dark] .chip { border-color: var(--line); color: var(--ink-2); }
:root[data-dark] .badge { border-color: var(--line); color: var(--ink-2); }
:root[data-dark] .mc-play { background: var(--well); border-color: var(--line); }
:root[data-dark] .mc-play .tag { color: var(--ink-2); }
:root[data-dark] .mc-play.on { border-color: var(--ink-2); background: var(--well-2); }
:root[data-dark] .xm { background: var(--well); border-color: var(--line); }
:root[data-dark] .xm i { color: var(--ink-2); }
:root[data-dark] .kcell { background: var(--panel); }
:root[data-dark] .kcell i { color: var(--ink-2); }
:root[data-dark] .rail > h4, :root[data-dark] .rail-h { color: var(--ink-2); }
:root[data-dark] .gchip { border-color: var(--line); color: var(--ink-2); }
:root[data-dark] .srow { color: var(--ink-2); }
:root[data-dark] .srow .sname { color: var(--ink); }

/* ---------- 三栏骨架：左「我信哪些源」→ 中「合出了什么」→ 右「为什么」 ---------- */
.shell { display: grid; grid-template-columns: var(--col-l) minmax(0, 1fr) var(--col-r);
  gap: var(--col-gap); align-items: start; }
:root[data-col-l="off"] .shell { grid-template-columns: minmax(0, 1fr) var(--col-r); }
:root[data-col-l="off"] .col-l { display: none; }
:root[data-col-r="off"] .shell { grid-template-columns: var(--col-l) minmax(0, 1fr); }
:root[data-col-r="off"] .col-r { display: none; }
:root[data-col-l="off"][data-col-r="off"] .shell { grid-template-columns: minmax(0, 1fr); }
.col-l, .col-r { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 10px;
  max-height: calc(100vh - 96px); overflow-y: auto; padding-bottom: 8px; }
.col-m { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rail { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 10px 11px; }
/* 注意：.note 已被抽屉的朱砂说明块占用，栏内说明一律用 .rnote，不要复用 */
.rail > h4, .rail-h { margin: 0 0 8px; display: flex; align-items: baseline; gap: 6px;
  font: 500 10.5px/16px var(--font-ui); letter-spacing: .1em; color: var(--ink-3); }
.rail > h4 .grow, .rail-h .grow { flex: 1; }
.rail > h4 em, .rail-h em { font-style: normal; letter-spacing: 0; font-family: var(--font-num); color: var(--ink-4); }
/* 折叠标题：去掉浏览器默认三角，换成自绘 caret，整行可点 */
details.rail > summary { list-style: none; cursor: pointer; margin-bottom: 8px; user-select: none; }
details.rail > summary::-webkit-details-marker { display: none; }
details.rail > summary::after { content: ""; width: 0; height: 0; margin-left: auto; flex: none;
  border: 4px solid transparent; border-top-color: currentColor; transform: translateY(3px);
  transition: transform var(--dur) var(--ease); }
details.rail[open] > summary::after { transform: rotate(180deg) translateY(2px); }
details.rail > summary:hover { color: var(--ink); }
details.rail:not([open]) { padding-bottom: 8px; }
details.rail:not([open]) > summary { margin-bottom: 0; }
.rail .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rail .rnote { margin: 7px 0 0; font-size: 11px; line-height: 16.5px; color: var(--ink-3); }
.rail .rnote b { color: var(--ink-2); font-weight: 500; }
.rail .rnote code { font-family: var(--font-num); font-size: 10.5px; color: var(--ink-2); }
/* 源勾选行 */
.srow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 2px 3px; font-size: 12.5px; cursor: pointer; }
.srow:hover { color: var(--ink); }
.srow input { width: 14px; height: 14px; accent-color: var(--gold); margin: 0; flex: none; }
.srow .sname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .scnt { font: 400 11px/15px var(--font-num); color: var(--ink-3); }
.srow .xdot { margin: 0 2px 0 0; }
.srow .xage { font-size: 10px; color: var(--ink-4); white-space: nowrap; }
.srow.off .sname { color: var(--ink-4); text-decoration: line-through; }
.sgrp { margin-top: 8px; }
.sgrp:first-child { margin-top: 0; }
/* 分级 chip（左栏筛选与首屏 KPI 同一套色） */
.gchip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); font: 500 11.5px/18px var(--font-ui); color: var(--ink-2); cursor: pointer; }
.gchip b { font-family: var(--font-num); font-weight: 500; }
.gchip:hover { border-color: var(--ink-3); color: var(--ink); }
.gchip.on { border-color: var(--ink); color: var(--ink); background: var(--well); }
.gchip.g-S, .gchip.g-A { border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: var(--gold); }
.gchip.g-X, .gchip.g-Y { border-color: color-mix(in srgb, var(--cold) 55%, transparent); color: var(--cold); }
.gchip.g-— { border-style: dashed; color: var(--ink-3); }

/* ---------- 首屏 KPI：第一公民是肉度，不是赛程表 ---------- */
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 1px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--line); overflow: hidden; }
.kcell { background: var(--panel); padding: 9px 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.kcell i { font-style: normal; font: 500 10px/14px var(--font-num); letter-spacing: .1em; color: var(--ink-3); }
.kcell b { font: 500 26px/30px var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink); }
.kcell s { text-decoration: none; font-size: 11px; line-height: 15px; color: var(--ink-3); }
.kcell.gold b { color: var(--gold); }
.kcell.red b { color: var(--cold); }
.kcell.jade b { color: var(--jade); }
.kcell.cyan b { color: var(--cyan); }
.kcell.clk { cursor: pointer; }
.kcell.clk:hover { background: var(--well); }
.kcell.clk::after { content: "点击筛选"; font: 400 9.5px/14px var(--font-num); color: var(--ink-4); }
.kcell.clk.on { background: var(--well); box-shadow: inset 0 0 0 1px var(--ink-4); }

/* ---------- 赛场卡片（.mcard；.card 已被记录墙占用，故另起命名空间） ---------- */
.mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); gap: var(--col-gap); }
.mcards.one { grid-template-columns: minmax(0, 1fr); }
.mcard { position: relative; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  overflow: hidden; animation: rowin 240ms var(--ease) backwards;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.mcard:hover { border-color: var(--ink-4); }
.mcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mcard > .rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; display: block;
  border: 0; border-radius: 0; background: var(--line); padding: 0; }
.mcard.g-s > .rail, .mcard.g-a > .rail { background: var(--gold); }
.mcard.g-x > .rail, .mcard.g-y > .rail { background: var(--cold); }
.mcard.g-b > .rail { background: var(--ink-3); }
.mcard.g-c > .rail, .mcard.g-— > .rail { background: var(--line); }
.mcard.g-s { border-color: color-mix(in srgb, var(--gold) 42%, transparent); }
.mcard.g-x { border-color: color-mix(in srgb, var(--cold) 42%, transparent); }
:root[data-sglow] .mcard.g-s { box-shadow: 0 0 22px -6px color-mix(in srgb, var(--gold) 45%, transparent); }
:root[data-sglow] .mcard.g-s > .rail { animation: breathe 3.2s var(--ease) infinite; }
@keyframes breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.mcard.flash { animation: flash 1.1s var(--ease); }
@keyframes flash { 0%, 60% { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 30%, transparent); } }

.mc-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px 8px 15px; border-bottom: 1px solid var(--line-soft); background: var(--well); }
.mc-code { font: 500 14px/18px var(--font-num); letter-spacing: .02em; color: var(--ink); }
.mc-lg { display: inline-block; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.mc-t { font: 400 11.5px/16px var(--font-num); color: var(--ink-3); white-space: nowrap; }
.mc-t .imminent { color: var(--cyan); }
.mc-hd .grow { flex: 1 1 auto; }
.mc-grade { flex: none; }

.mc-vs { display: grid; grid-template-columns: 1fr minmax(148px, 1.1fr) 1fr; gap: 8px; align-items: center;
  padding: 12px 14px 8px 15px; }
.mc-tm { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-tm.away { text-align: right; }
.mc-tm b { font-weight: 500; font-size: 15px; line-height: 20px; }
.mc-tm small { font: 400 11px/15px var(--font-num); color: var(--ink-3); }
.mc-mid { text-align: center; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mc-arrow { font: 500 19px/24px var(--font-num); letter-spacing: .01em; color: var(--gold); }
.mc-arrow.cold { color: var(--cold); }
.mc-arrow.none { color: var(--ink-4); font-size: 15px; line-height: 22px; }
.mc-mid small { font: 400 11px/15px var(--font-num); color: var(--ink-3); }

/* 四指标在卡片里排 2×2（偏离度 / 官方主推 / 跨派系一致 / 爆冷信号）。
   注意结构是 .mcard > .xmetrics-wrap > .xmetrics，选择器要经过 wrap，否则覆盖不到基类的 flex。 */
.xmetrics-wrap { padding: 0 14px 10px 15px; }
.xmetrics-wrap .xmetrics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
.xmetrics-wrap .xmetrics .xm { min-width: 0; flex: none; }
.xmetrics-wrap .xmetrics .xmeat { grid-column: 1 / -1; justify-self: start; }

/* 五玩法格：外部指向 + 信号条 + SP 灰角标（SP 永远落在最暗两级——把赔率压到角落本身就是主题声明） */
.mc-plays { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px;
  padding: 0 14px 10px 15px; }
.mc-play { display: grid; gap: 2px; padding: 6px 7px 5px; text-align: left; min-width: 0;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--well);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.mc-play:hover { border-color: var(--ink-4); }
.mc-play.on { border-color: var(--ink-3); background: var(--panel); }
.mc-play .tag { font: 500 10px/14px var(--font-num); letter-spacing: .04em; color: var(--ink-3); }
.mc-play .pv { font-size: 12.5px; line-height: 17px; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-play .pb { height: 3px; border-radius: 2px; background: var(--line-soft); overflow: hidden; margin: 2px 0 1px; }
.mc-play .pb i { display: block; height: 100%; border-radius: 2px; background: var(--ink-3); }
.mc-play .ps { font: 400 10px/13px var(--font-num); color: var(--ink-4); }
.mc-play.sig-hi { border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: var(--gold-dim); }
.mc-play.sig-hi .pv, .mc-play.sig-hi .tag { color: var(--gold); }
.mc-play.sig-hi .pb i { background: var(--gold); }
.mc-play.sig-cold { border-color: color-mix(in srgb, var(--cold) 45%, transparent); background: var(--cold-dim); }
.mc-play.sig-cold .pv, .mc-play.sig-cold .tag { color: var(--cold); }
.mc-play.sig-cold .pb i { background: var(--cold); }
.mc-play.sig-md .pb i { background: var(--jade); }
.mc-play.sig-no .pv { color: var(--ink-3); }
.mc-play.sig-no .pb i { width: 6% !important; }
.mc-play.sold .pv { color: var(--ink-4); }

.mc-facs { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 14px 10px 15px; }
.mc-fac { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 11px; line-height: 17px; color: var(--ink-2); cursor: help; }
.mc-fac.up { border-color: color-mix(in srgb, var(--cold) 45%, transparent); color: var(--cold); background: var(--cold-dim); }
.mc-fac.dn { border-color: color-mix(in srgb, var(--gold) 45%, transparent); color: var(--gold); background: var(--gold-dim); }
.mc-fac i { font-style: normal; font-family: var(--font-num); }

.mc-ft { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px 8px 15px; border-top: 1px solid var(--line-soft); background: var(--well); }
.mc-ft .grow { flex: 1 1 auto; }
.mc-ft .meta { font: 400 11px/16px var(--font-num); color: var(--ink-3); }
.mc-ft .m-sel { color: var(--ink-3); }
.mc-ft .exp { cursor: pointer; }
.mcard.open .exp { transform: rotate(180deg); }
.mc-open { padding: 12px 14px 13px 15px; border-top: 1px solid var(--line-soft); background: var(--well); }
.mc-open[hidden] { display: none; }
.mc-open .xwrap { margin-top: 12px; }

/* 右栏：爆冷雷达（条即榜单，不用雷达图）/ 陷阱板 / 源情报流 */
.rad { display: flex; flex-direction: column; gap: 7px; }
.rad-i { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; cursor: pointer; }
.rad-i:hover .rad-t { color: var(--ink); }
.rad-t { font-size: 12px; line-height: 17px; color: var(--ink-2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rad-t code { font: 500 11px/16px var(--font-num); color: var(--cyan); background: none; }
.rad-n { font: 500 14px/18px var(--font-num); color: var(--cold); }
.rad-b { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.rad-b i { display: block; height: 100%; background: var(--cold); }
.trap { border-left: 2px solid var(--cold); background: var(--cold-dim); border-radius: 0 6px 6px 0;
  padding: 5px 8px; font-size: 11.5px; line-height: 17px; color: var(--ink-2); }
.trap b { color: var(--cold); font-weight: 500; }
.trap code { font: 500 11px/16px var(--font-num); color: var(--cyan); background: none; }
.feed { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.feed-i { border-left: 2px solid var(--line); padding: 0 0 0 8px; font-size: 11.5px; line-height: 17px; }
.feed-i.fx-model { border-left-color: var(--fx-model); }
.feed-i.fx-market { border-left-color: var(--fx-market); }
.feed-i.fx-expert { border-left-color: var(--fx-expert); }
.feed-i .fh { display: flex; gap: 6px; align-items: baseline; }
.feed-i .fs { font: 500 11.5px/16px var(--font-num); color: var(--ink-2); }
.feed-i .ft { font: 400 10.5px/16px var(--font-num); color: var(--ink-4); margin-left: auto; }
.feed-i .fq { display: block; font: 400 10.5px/15px var(--font-num); color: var(--ink-3); }
.feed-i .fq::before { content: "\201C"; } .feed-i .fq::after { content: "\201D"; }
.feed-i .fz { display: block; color: var(--ink); font-size: 12px; line-height: 17px; }
.feed-i code { font: 500 11px/16px var(--font-num); color: var(--cyan); background: none; cursor: pointer; }

/* ---------- 响应式 / 打印 / 减弱动效 ---------- */
/* 右栏降级为三列铺底，再窄则左栏折成横向 chip 条。
   断点不用 @media 写死：core.js 按 config.layout.bp 挂 matchMedia，结果落在 <html data-narrow> 上，
   所以改 config.js 的 1340 / 920 就真的改了降级点。 */
:root[data-narrow="right"] .shell { grid-template-columns: var(--col-l) minmax(0, 1fr); }
:root[data-narrow="right"] .col-r { display: grid; grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); position: static; max-height: none; overflow: visible; }
:root[data-narrow="left"] .shell, :root[data-narrow="both"] .shell { grid-template-columns: minmax(0, 1fr); }
:root[data-narrow="left"] .col-r, :root[data-narrow="both"] .col-r { display: grid; grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); position: static; max-height: none; overflow: visible; }
:root[data-narrow="left"] .col-l, :root[data-narrow="both"] .col-l { position: static; max-height: none;
  overflow: visible; display: flex; flex-direction: row; flex-wrap: wrap; }
:root[data-narrow="left"] .col-l .rail, :root[data-narrow="both"] .col-l .rail { flex: 1 1 220px; }
:root[data-narrow="left"] .mcards, :root[data-narrow="both"] .mcards { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 940px) {
  main { padding: 14px 12px 110px; }
  .hdr { padding: 0 12px; gap: 10px; }
  .nav a { padding: 6px 8px; font-size: 12.5px; }
  .wrap { overflow-x: auto; }
  table.matrix { min-width: 980px; }
  .row2, .row3 { grid-template-columns: 1fr; }
  .foot { flex-wrap: wrap; gap: 8px 14px; }
  .mc-vs { grid-template-columns: 1fr; }
  .mc-tm.away { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .hdr, .foot, .toolbar, .views, .no-print, #toast-box { display: none !important; }
  body { background: #fff; }
  .wrap, .panel, .card { border-color: #bbb; box-shadow: none; }
  /* 打印只出一栏正文：左右两栏是交互口径控件，纸上没有意义 */
  .shell { display: block !important; }
  .col-l, .col-r { display: none !important; }
  .mcard { break-inside: avoid; border-color: #bbb; box-shadow: none; }
  .mcard > .rail { width: 2px; }
  :root[data-theme="ops"][data-ambience] body::before,
  :root[data-theme="ops"][data-ambience] body::after { display: none !important; }
}

/* ---------- 实时刷新信标 chip（assets/live.js） ---------- */
.live-chip { display: inline-flex; align-items: center; gap: 7px; font: 500 11.5px/1 var(--font-num);
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2);
  background: var(--paper); cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.live-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none;
  box-shadow: 0 0 0 0 var(--moss-soft); }
.live-chip[data-state="ok"] .live-dot { background: var(--moss); animation: live 2.6s var(--ease) infinite; }
.live-chip[data-state="ok"] { color: var(--ink-2); }
.live-chip[data-state="new"] { border-color: var(--signal); color: var(--signal); }
.live-chip[data-state="new"] .live-dot { background: var(--signal); animation: live 1.1s var(--ease) infinite; }
.live-chip[data-state="down"] { border-color: var(--line); color: var(--ink-3); }
.live-chip[data-state="down"] .live-dot { background: var(--signal); opacity: .55; }
.live-chip[data-state="paused"] .live-dot { background: var(--ink-3); opacity: .5; }
@keyframes live { 0% { box-shadow: 0 0 0 0 var(--moss-soft); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
:root[data-dark] .live-chip { background: var(--well); border-color: var(--line); }
:root[data-dark] .live-chip:hover { border-color: var(--ink-3); color: var(--ink); }
:root[data-dark] .live-chip[data-state="new"] { border-color: var(--signal); color: var(--signal); }

/* 在售时效：诚实提示条 + 场次状态标签（前端本地判定，见 assets/core.js matchPhase） */
.stale-banner { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--signal); border-left: 3px solid var(--signal);
  border-radius: 10px; background: var(--signal-soft); color: var(--ink); font-size: 13px; line-height: 1.6; }
.stale-banner b { color: var(--signal); }
.stale-banner .sb-note { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12px; }
.stale-banner.live { border-color: var(--line); border-left-color: var(--line); background: var(--panel); color: var(--ink-2); }
.stale-banner.live b { color: var(--ink-2); font-weight: 500; }
.stale-banner.live .sb-note { color: var(--ink-3); }
.mc-ph { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-3); font-size: 11px; white-space: nowrap; vertical-align: middle; }
.mc-ph.closed { border-color: var(--ink-3); }
.mc-ph.finished { border-style: dashed; }