/* ============================================================
   世足正確比數 · 賠率盤 — 夜間運彩交易終端
   Depth: 分層墨色 + 髮絲邊框 (dark mode 靠邊框定義結構)
   Brand hue: emerald(價值/主推) · 語意: amber(高賠挑戰) / red(損失)
   數字一律等寬 tabular，文字用系統中文字體。Spacing base = 4px。
   ============================================================ */
:root {
  /* 表面分層 — 同色相只變亮度，whisper 級跳階 */
  --ink-900: #090d15;          /* canvas */
  --ink-850: #0d121c;          /* deck / sticky */
  --ink-800: #111722;          /* card / row */
  --ink-750: #161d2b;          /* hover / elevated */
  --ink-700: #1b2433;          /* input inset 反而略亮的 outline 用 */

  /* 文字四階 */
  --fg:    #e9eef6;
  --fg-2:  #a7b6c9;
  --fg-3:  #6f8098;
  --fg-4:  #4c5a70;

  /* 邊框漸進 */
  --bd:     rgba(255,255,255,.07);
  --bd-soft:rgba(255,255,255,.045);
  --bd-emph:rgba(255,255,255,.14);

  /* 語意 / 品牌 */
  --val:   #34d8a0;            /* 價值 / 主推 / 品牌 emerald */
  --val-dim: rgba(52,216,160,.14);
  --gold:  #f3b13c;            /* 高賠挑戰 */
  --gold-dim: rgba(243,177,60,.13);
  --loss:  #f4736b;            /* 負 EV / break-even 下 */
  --loss-dim: rgba(244,115,107,.12);

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC",
          "Segoe UI", system-ui, sans-serif;

  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-full: 999px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink-900);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* 頂部一抹冷光，像球場夜空 */
  background-image: radial-gradient(120% 60% at 50% -10%, rgba(52,216,160,.06), transparent 60%);
  background-attachment: fixed;
}
.wrap { max-width: 1080px; margin-inline: auto; padding-inline: 20px; }
b { font-weight: 650; }
em { font-style: normal; }

/* ===== 數字一律等寬 ===== */
.num, .stake, .val, .lev-num, .sum-val b, .score, input[type=number] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============================================================ topbar */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(13,18,28,.78);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--bd);
}
.topbar-in { display: flex; align-items: center; justify-content: space-between; height: 52px; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand .dot {
  width: 9px; height: 9px; border-radius: var(--r-full);
  background: var(--val); box-shadow: 0 0 12px var(--val);
}
.brand-name { font-weight: 650; letter-spacing: -.01em; font-size: 15px; }
.topbar-meta { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--fg-3); }
.topbar-meta .sep { color: var(--fg-4); }
.warn-pill {
  color: var(--gold); border: 1px solid var(--gold-dim);
  background: var(--gold-dim); padding: 2px 8px; border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 600;
}

/* ============================================================ 控制甲板 */
.deck {
  position: sticky; top: 52px; z-index: 30;
  background: var(--ink-850);
  border-bottom: 1px solid var(--bd);
}
.deck-in {
  display: grid;
  grid-template-columns: 200px 1fr 220px;
  gap: 18px;
  align-items: stretch;
  padding-top: 16px; padding-bottom: 14px;
}
.ctrl { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ctrl-lab { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--fg-3); text-transform: uppercase; }

/* 資金欄 — input 為 inset，較暗 */
.field {
  display: flex; align-items: center; gap: 6px;
  background: var(--ink-900);
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  padding: 0 12px; height: 44px;
  transition: border-color .15s;
}
.field:focus-within { border-color: var(--val); box-shadow: 0 0 0 3px var(--val-dim); }
.field .prefix { color: var(--fg-3); font-size: 13px; font-family: var(--mono); }
#bankroll {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--fg); font-size: 17px; font-weight: 600; height: 100%;
}
#bankroll::-webkit-outer-spin-button, #bankroll::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ===== 風險槓桿油門 — signature ===== */
.throttle { gap: 6px; }
.throttle-top { display: flex; align-items: baseline; justify-content: space-between; }
.throttle-read { display: flex; align-items: baseline; gap: 8px; }
.lev-num { font-size: 22px; font-weight: 700; color: var(--val); letter-spacing: -.02em; line-height: 1; }
.lev-tag {
  font-size: 11px; font-weight: 650; color: var(--val);
  background: var(--val-dim); padding: 2px 8px; border-radius: var(--r-full);
}
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: var(--r-full);
  margin: 6px 0 2px;
  /* 填滿到 --fill 為 emerald，其後為深槽 */
  background:
    linear-gradient(to right, var(--val) 0 var(--fill, 35%), var(--ink-700) var(--fill, 35%) 100%);
  outline: none; cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: var(--r-full);
  background: #f4fbf8; border: 2px solid var(--val);
  box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 12px var(--val-dim);
  cursor: grab; transition: transform .1s;
}
.slider::-webkit-slider-thumb:active { transform: scale(1.12); cursor: grabbing; }
.slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: var(--r-full);
  background: #f4fbf8; border: 2px solid var(--val); cursor: grab;
}
.ticks { display: flex; justify-content: space-between; gap: 4px; }
.tick {
  background: none; border: none; cursor: pointer;
  color: var(--fg-4); font-family: var(--sans); font-size: 11px; font-weight: 600;
  padding: 2px 4px; border-radius: var(--r-sm); transition: color .12s, background .12s;
}
.tick:hover { color: var(--fg-2); background: var(--ink-800); }

/* 即時總覽 */
.summary {
  background: var(--ink-800);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  padding: 12px 16px; gap: 4px; justify-content: center;
}
.sum-main { display: flex; flex-direction: column; gap: 2px; }
.sum-lab { font-size: 11.5px; color: var(--fg-3); font-weight: 600; }
.sum-val { display: flex; align-items: baseline; gap: 5px; }
.sum-val b { font-size: 26px; font-weight: 700; color: var(--fg); letter-spacing: -.01em; }
.sum-val i { font-size: 12px; color: var(--fg-3); }
.sum-sub { font-size: 12px; color: var(--fg-3); display: flex; gap: 7px; align-items: center; }
.sum-sub em { color: var(--val); font-weight: 650; font-family: var(--mono); }
.sum-sub .sep { color: var(--fg-4); }

/* tabs */
.tabs { display: flex; gap: 4px; padding-bottom: 0; }
.tab {
  background: none; border: none; cursor: pointer;
  color: var(--fg-3); font-family: var(--sans); font-size: 14px; font-weight: 600;
  padding: 11px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.tab:hover { color: var(--fg-2); }
.tab.active { color: var(--fg); border-bottom-color: var(--val); }

/* ============================================================ 內容 */
#content { padding-top: 18px; padding-bottom: 8px; }
.empty {
  border: 1px dashed var(--bd-emph); border-radius: var(--r-md);
  padding: 40px 24px; text-align: center; color: var(--fg-3); font-size: 14px;
}

/* ===== 賽事列表 ===== */
.match-list { display: flex; flex-direction: column; gap: 10px; }
.match {
  background: var(--ink-800);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .15s, background .15s;
}
.match:hover { border-color: var(--bd-emph); }
.match.open { border-color: var(--bd-emph); background: var(--ink-850); }
.match-head {
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 18px; color: inherit; font-family: var(--sans);
}
.match-teams { min-width: 0; }
.teams { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.teams .at { color: var(--fg-4); margin: 0 4px; font-weight: 400; }
.meta { font-size: 12px; color: var(--fg-3); margin-top: 3px; }
.match-side { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 320px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-full); font-size: 12px;
  border: 1px solid transparent;
}
.chip b { font-family: var(--mono); font-weight: 650; }
.chip i { font-family: var(--mono); font-style: normal; opacity: .75; font-size: 11px; }
.chip.b-main { background: var(--val-dim); color: var(--val); border-color: rgba(52,216,160,.25); }
.chip.b-chal { background: var(--gold-dim); color: var(--gold); border-color: rgba(243,177,60,.25); }
.chip.b-skip { background: var(--ink-750); color: var(--fg-3); font-size: 11.5px; }
.match-stake { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 78px; }
.match-stake .lab { font-size: 10.5px; color: var(--fg-4); }
.match-stake .val { font-size: 16px; font-weight: 650; color: var(--fg); }
.caret { color: var(--fg-3); font-size: 13px; width: 14px; text-align: center; }

/* ===== 詳細：比分賠率表 ===== */
.detail { border-top: 1px solid var(--bd); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 22px; }
.sect-h {
  font-size: 13.5px; font-weight: 650; color: var(--fg); margin-bottom: 10px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.sect-sub { font-size: 11.5px; font-weight: 400; color: var(--fg-3); font-family: var(--mono); }
.lambda { font-size: 12px; color: var(--fg-3); font-family: var(--mono); margin-bottom: 12px; }
/* 半全場標的格：主→客 + 原始名稱小字 */
td.score .arr { color: var(--fg-4); margin: 0 2px; }
td.score .hf-raw { display: block; font-family: var(--sans); font-weight: 400; font-size: 11px; color: var(--fg-3); margin-top: 1px; }
/* 收合列 chip 的「半全」小標 */
.chip u { text-decoration: none; font-size: 9.5px; font-style: normal; opacity: .7; margin-right: 1px; }
/* 高賠挑戰：市場標籤 */
.mk { display: inline-block; padding: 2px 8px; border-radius: var(--r-full); font-size: 11px; font-weight: 650; white-space: nowrap; }
.mk-cs { background: rgba(140,170,210,.14); color: #9fc0e6; }
.mk-hf { background: rgba(243,177,60,.14); color: var(--gold); }
.table-wrap { overflow-x: auto; border-radius: var(--r-sm); }
.table-wrap.card { background: var(--ink-800); border: 1px solid var(--bd); }
table.cs { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 720px; }
table.cs thead th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: var(--fg-3); padding: 9px 12px; border-bottom: 1px solid var(--bd);
  white-space: nowrap; position: sticky; top: 0;
}
table.cs th.num, table.cs td.num { text-align: right; }
table.cs tbody td { padding: 9px 12px; border-bottom: 1px solid var(--bd-soft); white-space: nowrap; }
table.cs tbody tr:last-child td { border-bottom: none; }
table.cs td.score { font-family: var(--mono); font-weight: 650; color: var(--fg); }
table.cs td.num { color: var(--fg-2); }
table.cs td.dim { color: var(--fg-4); }
table.cs td.pos { color: var(--val); }
table.cs td.neg { color: var(--loss); }
table.cs td.stake { color: var(--fg); font-weight: 650; }
.row-main { background: var(--val-dim); }
.row-chal { background: var(--gold-dim); }
.row-main td.score, .row-chal td.score { color: var(--fg); }

.badge {
  display: inline-block; padding: 2px 9px; border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 650; white-space: nowrap;
}
.badge.b-main { background: var(--val); color: #04140d; }
.badge.b-chal { background: var(--gold); color: #1c1303; }
.badge.b-skip { background: var(--ink-750); color: var(--fg-3); }

/* 推薦理由 */
.reasons { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.reason { display: flex; gap: 10px; font-size: 13px; color: var(--fg-2); align-items: baseline; }
.r-score { font-family: var(--mono); font-weight: 650; color: var(--fg); flex-shrink: 0; }
.reason-empty {
  margin-top: 12px; font-size: 13px; color: var(--gold);
  background: var(--gold-dim); border-radius: var(--r-sm); padding: 10px 14px;
}

/* ===== 高賠挑戰 ===== */
.chal-intro {
  font-size: 13px; color: var(--fg-2); line-height: 1.65;
  background: var(--ink-800); border: 1px solid var(--bd);
  border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 14px;
}
.chal-intro .warn { color: var(--gold); }
.c-match { font-weight: 650; font-size: 14px; }
.c-meta { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }

/* ============================================================ footer */
.foot {
  color: var(--fg-4); font-size: 12px; line-height: 1.75;
  padding-top: 18px; padding-bottom: 48px; margin-top: 8px;
  border-top: 1px solid var(--bd-soft);
}
.foot b { color: var(--fg-3); }

/* ============================================================ 響應式 */
@media (max-width: 860px) {
  .deck-in { grid-template-columns: 1fr 1fr; gap: 14px; }
  .throttle { grid-column: 1 / -1; order: -1; }
  .summary { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (max-width: 560px) {
  .wrap { padding-inline: 14px; }
  .deck-in { grid-template-columns: 1fr; }
  .summary { order: 3; }
  .chips { display: none; }
  .match-head { padding: 14px; gap: 10px; }
  .teams { font-size: 15px; }
  .match-side { gap: 10px; }
  .brand-name { font-size: 14px; }
  .topbar-meta { font-size: 11.5px; }
}