/* ══════════════════════════════════════════════════════════════
   app.css — 會員區（左 nav ＋ 當日場次）

   只喺 /app/* 用。⛔ 唔好將呢度嘅嘢搬去 site.css：場次盒同左 nav 係
   會員區獨有，放咗落共用檔就會影響首頁同法律頁嗰堆長文排版。

   設計取向：呢一頁係「賽夜工具」，唔係宣傳頁 —— 用戶開機第一件事係搵
   「下一場係邊場、開唔開得」。所以掃描性行先：場號夠大、狀態一眼分得出、
   跑完嘅沉底。
   ══════════════════════════════════════════════════════════════ */

.mlay{display:grid;grid-template-columns:212px minmax(0,1fr);gap:36px;align-items:start}
/* 資料表詳情頁（本地／海外對飛表）—— **收起左側導覽**，成 248px（212 欄 + 36 gap）
   還返畀張表（用戶 2026-08-16：「click 落 detail page 之後唔好再 show 條 left nav，
   開 full page 就 show 到 all data」）。
   ⛔ 唔可以喺文字頁開：逐匹理由靠 .wrap 個行長上限先睇得舒服。
   ⚠️ 拿走側欄唔等於拿走導航 —— 右上角 .umenu 有齊本地／海外／存檔／方法，
      每版本身亦有「← 返回」，海外版仲有 R1–R9 場次列。**冇咗嘅只有賽日 picker**，
      揀日返上一層日頁做（back link 就係去嗰度）。 */
.mlay.solo{grid-template-columns:minmax(0,1fr);gap:0}
/* ⚠️ 收起側欄之後個 shell 有 1400px，但張表得 984（海外）／1183（本地）——
   淨係拿走 nav 嘅話張表會左貼，右邊吊住一大片吉位。
   `width:max-content` ＝ 成條內容欄縮到最闊嗰個仔（就係張表）嘅闊度，
   再 `margin-inline:auto` 置中 → 返回連結、標題、場次列、表、圖例**全部同一條左邊線**。
   ⛔ 唔可以淨係置中 `.otw`：咁樣得張表移咗位，標題同場次列仍然貼左，
      兩條唔同嘅對齊軸擺埋一齊仲難睇過左貼。
   ⛔ `max-width:100%` 唔可以少 —— 手機冇咗佢，`max-content`（1183px）會撐爆成版。
      實測 375px：main 335 / 表喺自己個框內捲 / body 溢出 0。 */
.mlay.solo .mmain{width:max-content;max-width:100%;margin-inline:auto}
/* ⛔ 唔好畀主欄拉到成 890px 闊：場號喺最左、狀態 tag 喺最右，中間一大截吉位，
   眼要由「R1」掃到「賽事已完成」行足成行先搵到。掃描表要窄。 */
.mmain{max-width:790px}
/* ⛔ 賠率走勢表要成個闊度：790px 之下 14 欄迫唔落，電腦都要橫捲，
   而用戶要求全螢幕一定出得晒。掃描式嘅場次卡先要收窄，表唔要。 */
.mmain.wide{max-width:none}
/* 闊版主欄：內容擺喺**剩餘空間**正中（用戶 2026-08-18「put the content
   in center of the remaining space」）。⛔ 只置中有固有闊度嗰啲（張表）——
   正文唔可以置中，一段左右都唔對齊嘅字係最難讀嗰種。 */
.mmain.wide .otw{margin-inline:auto}

/* ══ 左 nav ══ */
/* ⛔ .mnav 本身唔好捲：一捲埋一齊，賽日一多就connect住將「今日賽事／賽後存檔」
   推出視窗外。改為只有下面條賽日清單自己捲，四條主導覽永遠見到。 */
.mnav{position:sticky;top:84px;display:flex;flex-direction:column;gap:22px}
.mgrp{display:flex;flex-direction:column;gap:2px}
.mlab{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--ink3);
  margin:0 0 6px;padding:0 11px;border-top:0}   /* ⛔ 清走 site.css h2 條金線 */

.mnav .mgrp>a{display:flex;align-items:center;gap:11px;min-height:44px;padding:0 11px;
  border-radius:9px;text-decoration:none;color:var(--ink2);font-size:14px;font-weight:600;
  transition:background .16s var(--ease),color .16s var(--ease)}
.mnav .mgrp>a:hover{background:var(--paper2);color:var(--ink)}
.mnav .mgrp>a[aria-current=page]{background:#E9E3D3;color:var(--ink);font-weight:700}
/* ⛔ 用底色＋字重做「而家喺呢度」，唔用左邊嗰條粗色線 */
.mnav .mgrp>a[aria-current=page] .ic{color:var(--gold-d)}
.mnav a:focus-visible{outline:2px solid var(--gold-d);outline-offset:2px}

.ic{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic.sm{width:13px;height:13px;stroke-width:2}

/* ══ 賽日下拉 ══ 20 個賽日直排會食晒成條側欄，改為撳開先出。 */
.dsel{position:relative}
.dsel>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  min-height:48px;padding:0 12px;border-radius:11px;
  background:var(--paper2);border:1px solid var(--hair);
  transition:border-color .16s var(--ease),background .16s var(--ease)}
.dsel>summary::-webkit-details-marker{display:none}
.dsel>summary:hover{border-color:#CDC5B0;background:#fff}
.dsel>summary:focus-visible{outline:2px solid var(--gold-d);outline-offset:2px}
.dsel-k{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink3);
  flex:0 0 auto}
.dsel-v{flex:1;font-size:13px;font-weight:700;color:var(--ink)}
.dsel-c{width:16px;height:16px;color:var(--ink3);flex:0 0 auto;
  transition:transform .18s var(--ease)}
.dsel[open]>summary{border-color:var(--gold);background:#fff}
.dsel[open] .dsel-c{transform:rotate(180deg)}

.dsel-m{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:40;
  display:flex;flex-direction:column;gap:1px;padding:6px;
  max-height:min(52vh,360px);overflow-y:auto;scrollbar-width:thin;
  overscroll-behavior:contain;
  background:var(--paper2);border:1px solid var(--hair);border-radius:12px;
  box-shadow:0 14px 34px rgba(28,27,23,.16)}
.mday{display:flex;align-items:center;min-height:44px;padding:0 11px;border-radius:8px;
  font-family:var(--mono);font-size:13px;color:var(--ink3);text-decoration:none;
  transition:background .16s var(--ease),color .16s var(--ease)}
.mday:hover{background:#EDE8DA;color:var(--ink)}
.mday.on{background:#E9E3D3;color:var(--ink);font-weight:700}

/* ══ 日子標題 ══ */
.dhead{margin:0 0 20px}
.dhead h1{font-family:var(--mono);font-size:32px;font-weight:700;letter-spacing:-.035em;
  margin:0 0 7px}
.dmeta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-size:13px;color:var(--ink3)}
.dvenue{font-weight:700;color:#3A3529;background:#E9E3D3;border-radius:6px;padding:3px 9px}
.dsec{font-size:17px}

/* ══ 內容分頁 ══ 底線式，跟參考圖：現頁深色加粗 + 一條底線，其餘灰色。
   ⛔ 唔用膠囊掣 —— 呢度係「同一版嘅唔同段」，唔係三個獨立動作。 */
/* 賽日層工具入口（信號表 · 對飛表）。
   ⛔ 呢兩版一直起好咗但**冇任何 inbound link**（2026-08-18 查出）——
      客搵唔到 = 冇做。tab 係同一版入面切換，呢啲係去第二版，所以
      唔可以扮做 tab，要睇得出係 link。 */
.dtools{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 20px}
.dtools a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-size:13px;font-weight:700;color:var(--ink2);background:var(--paper);
  border:1px solid var(--hair);border-radius:999px;padding:6px 13px}
.dtools a:hover{color:var(--ink);border-color:var(--ink3)}
.dtools a:focus-visible{outline:2px solid var(--gold-d);outline-offset:2px}
.dtools .ic{width:14px;height:14px;flex:0 0 auto}
.dtabs{display:flex;gap:4px;margin:0 0 20px;
  border-bottom:1px solid var(--hair);overflow-x:auto;scrollbar-width:none}
.dtabs::-webkit-scrollbar{display:none}
.dtabs [role=tab]{flex:0 0 auto;appearance:none;border:0;background:none;cursor:pointer;
  font:inherit;font-size:15px;font-weight:600;color:var(--ink3);
  min-height:46px;padding:0 12px;margin-bottom:-1px;
  border-bottom:2px solid transparent;
  transition:color .16s var(--ease),border-color .16s var(--ease)}
.dtabs [role=tab]:hover{color:var(--ink2)}
.dtabs [role=tab][aria-selected=true]{color:var(--ink);font-weight:700;
  border-bottom-color:var(--gold)}
.dtabs [role=tab]:focus-visible{outline:2px solid var(--gold-d);outline-offset:-3px;
  border-radius:6px}

/* ══ 場次盒 ══ */
.rlist{display:flex;flex-direction:column;gap:18px}

.rbox{position:relative;display:grid;gap:0 20px;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"no body";align-items:center;
  /* ⛔ 用固定 height 唔用 min-height：內容多寡唔同（有啲場有分層 chip + 賽果 +
     掣，有啲淨係得排位），min-height 之下實測由 132px 去到 217px，
     一列排落去高高低低好散。統一高度先掃得快。 */
  height:236px;padding:22px 24px;border-radius:18px;
  text-decoration:none;color:inherit;overflow:hidden;
  background:linear-gradient(150deg,#FFFDF8 0%,var(--paper2) 62%);
  border:1px solid var(--hair);
  box-shadow:0 1px 2px rgba(28,27,23,.05),0 8px 22px -12px rgba(28,27,23,.28);
  transition:background .2s var(--ease),border-color .2s var(--ease),
             box-shadow .2s var(--ease),transform .2s var(--ease)}

a.rbox:hover{border-color:#CDC5B0;transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(28,27,23,.06),0 18px 34px -16px rgba(28,27,23,.34)}
a.rbox:focus-visible{outline:2px solid var(--gold-d);outline-offset:3px}

/* 跑完 / 鎖住 / 未分析 = 退到背景。⛔ 唔用 opacity 調暗：一調就連字都跌落
   4.5:1 以下。改為換一個更淡嘅面同更淺嘅框，字色照樣夠對比。 */
.rbox.s-done{background:linear-gradient(150deg,#FBF9F3,#F3F0E6);border-color:#E7E1D1;
  box-shadow:0 1px 2px rgba(28,27,23,.04),0 5px 14px -10px rgba(28,27,23,.22)}
.rbox.s-locked,.rbox.s-pending{background:#F7F5EE;border-style:dashed;
  box-shadow:none}

.rno{grid-area:no;display:grid;place-items:center;min-width:78px;height:78px;
  border-radius:16px;color:#3A3529;
  background:linear-gradient(150deg,#EFEADB,#DFD8C2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  font-family:var(--mono);font-size:26px;font-weight:700;letter-spacing:-.04em}
.rbox.s-done .rno{background:linear-gradient(150deg,#E9E3D2,#DAD3BD);color:#5C5849}
.rbox.s-locked .rno,.rbox.s-pending .rno{background:none;color:var(--ink3);
  box-shadow:inset 0 0 0 1.5px var(--hair)}

.rbody{grid-area:body;min-width:0}
.rline1{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-height:22px}
.rtime{font-family:var(--mono);font-size:17px;font-weight:700;letter-spacing:-.02em;
  color:var(--ink)}
.rnext{font-size:11px;font-weight:700;letter-spacing:.07em;color:#6B4E00;
  background:var(--gold-l);border-radius:5px;padding:2px 7px}
.rfree{font-size:11px;font-weight:700;color:#1B4030;background:#DCEAE2;
  border-radius:5px;padding:2px 7px}
.rmeta{display:block;font-size:13px;color:var(--ink2);margin-top:1px}
.rrange{display:block;font-size:12px;color:var(--ink3);margin-top:5px}
.rrange a{color:var(--gold-d);font-weight:700}

.rres{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.rp{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);
  background:#EDE7D8;border-radius:6px;padding:2px 9px 2px 6px;white-space:nowrap}
.rp b{display:grid;place-items:center;width:17px;height:17px;border-radius:4px;
  background:#fff;color:#5B4300;font-family:var(--mono);font-size:11px}

/* ══ 狀態 tab ══
   右上角由一條 S 形曲線切出嚟，唔係貼上去嘅膠囊 —— 佢係卡嘅一部分。
   做法：tab 本身左下角圓角（凸），再喺佢左邊用 radial-gradient 補一個
   **凹**圓角，兩段接埋就係嗰條 S。⛔ 唔用 clip-path:path()：
   path() 唔收百分比，文字一長（「AI 隔晚已分析」）條曲線就會扯到變形。 */
.rtab{position:absolute;top:0;right:0;z-index:1;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:10px 20px 11px 20px;
  font-size:12.5px;font-weight:700;letter-spacing:.01em;line-height:1.2;
  border-bottom-left-radius:20px;border-top-right-radius:17px;
  background:linear-gradient(135deg,var(--g1),var(--g2));color:var(--fg);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset}
/* 凹角：填返卡底色，令 tab 左邊由「直角」變成向內收嘅弧 */
.rtab::before{content:"";position:absolute;top:0;left:-20px;width:20px;height:20px;
  background:radial-gradient(circle at 0 100%,transparent 20px,var(--g1) 20.5px)}

/* 五個狀態 = 一支溫度計：休眠（石）→ 已備好（淺金）→ 最新（實金）→ 完場（綠）。
   未解鎖用冷灰藍，明顯唔同溫度 —— 佢係「冇嘢」，唔應該同有內容嘅狀態爭注意力。 */
.t-pending{--g1:#EAE4D2;--g2:#D6CFB8;--fg:#4E4A3A}
.t-draft{--g1:#F7EBC6;--g2:#E6C978;--fg:#4A3800}
.t-final{--g1:#E8B824;--g2:#B98705;--fg:#2A1F00}
.t-done{--g1:#DFEDE4;--g2:#B9D3C4;--fg:#1B4030}
.t-locked{--g1:#E7E7E9;--g2:#CFD3D8;--fg:#3D4248}

/* ══ 分層點數 ══ 客買緊嘅嘢，要一眼睇到，唔係一句「範圍 6 匹」
   ⛔ 唔可以叫 .sp：site.css 已經有 `.sp{flex:1}`（舊 top bar 嘅 spacer），
      撞名之後每粒 chip 都會 flex-grow:1 扯到等闊，鋪滿成行。
      通用到得兩個字母嘅 class 名一定要當佢已經有人用咗。 */
.rsplit{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rchip{display:inline-flex;align-items:baseline;gap:5px;font-size:12px;flex:0 0 auto;
  padding:3px 10px;border-radius:8px;background:#EFEADC;color:var(--ink2)}
.rchip b{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:-.02em}
.rc-banker{background:#E4EAF7;color:#243A6B}
.rc-banker b{color:#1D4ED8}
.rc-leg{background:var(--gold-l);color:#4A3800}
.rc-edge{background:#EDE8DA;color:#54503F}
.rc-hit{background:#DCEAE2;color:#1B4030}

/* ══ 品牌馬水印 ══ 出血到卡右邊。⛔ 唔用 <img>：原圖 logo.png 係全不透明，
   要靠 mask-image + background-color 先上到色跟住狀態走（同會員卡同一招）。
   ⛔ 盒要闊過 61% 卡高 × 0.784，否則隻馬會畀盒切走左邊，出一條垂直硬邊。 */
.rmark{position:absolute;right:-4%;top:-14%;width:30%;height:128%;
  pointer-events:none;background:#8A8266;opacity:.10;
  -webkit-mask:url(/static/logo-mask.png) no-repeat right center/auto 100%;
  mask:url(/static/logo-mask.png) no-repeat right center/auto 100%}

/* ══ 真嘅掣 ══ 之前得個細箭嘴，用戶唔知成張卡撳得 */
.rcta{display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  min-height:36px;padding:0 15px;border-radius:9px;
  font-size:13px;font-weight:700;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px #CFC7B2;background:rgba(255,255,255,.7);
  transition:background .18s var(--ease),box-shadow .18s var(--ease)}
a.rbox:hover .rcta{background:var(--gold);color:#241C00;
  box-shadow:inset 0 0 0 1.5px var(--gold-d)}
.rcta .ic{width:15px;height:15px}

/* ══ 未解鎖 overlay ══ 成張卡蓋一層，中間打大字。
   ⛔ 唔喺角落塞個細 icon 就算 —— 客要一眼知「呢張唔到我睇」同「點先睇到」。
   右上個 tab z-index 高過佢，所以仍然讀到。 */
.rlock{position:absolute;inset:0;z-index:0;border-radius:inherit;
  display:flex;align-items:center;justify-content:center;
  background:rgba(16,20,24,.82);backdrop-filter:blur(2px)}
.rlock-t{display:inline-flex;align-items:center;gap:9px;
  font-size:19px;font-weight:700;letter-spacing:.04em;color:#fff}
.rlock-t .ic{width:20px;height:20px;stroke-width:1.9}

/* ══ 下一場 ══ 深色卡，同淺色頁面拉開最大對比 —— 賽夜一眼搵到「而家嗰場」。
   全頁唯一一個動作：一圈金光由邊界推出去再散開。 */
.rbox.nx{background:linear-gradient(145deg,#243036 0%,#141C21 100%);
  border-color:#2E3C44;color:#EAF1F4;
  box-shadow:0 2px 5px rgba(20,28,33,.28),0 18px 34px -16px rgba(20,28,33,.55)}
.rbox.nx .rno{background:linear-gradient(150deg,#EBC44A,#B98705);color:#2A1F00;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.rbox.nx .rtime{color:#fff}
.rbox.nx .rmeta{color:#AFC0C8}
.rbox.nx .rrange{color:#9FB0B9}
.rbox.nx .rmark{background:#8FD3F4;opacity:.13}
.rbox.nx .rcta{color:#EAF1F4;background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1.5px rgba(234,241,244,.35)}
a.rbox.nx:hover .rcta{background:var(--gold);color:#241C00;
  box-shadow:inset 0 0 0 1.5px var(--gold)}
.rbox.nx .rchip{background:rgba(255,255,255,.10);color:#D7E3E9}
.rbox.nx .rchip b{color:#fff}
.rbox.nx .rc-banker{background:rgba(125,165,255,.20);color:#CBDBFF}
.rbox.nx .rc-banker b{color:#9FBEFF}
.rbox.nx .rc-leg{background:rgba(235,196,74,.20);color:#F0DFA8}
.rbox.nx .rc-leg b{color:#EBC44A}
.rbox.nx::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;animation:nxpulse 2.9s var(--ease) infinite}
/* ⛔ 用 inset（向內）唔用外擴：張卡而家有 overflow:hidden（要剪住隻馬水印），
   向外擴嘅 box-shadow 會即刻被剪走，個脈衝就完全睇唔到。 */
@keyframes nxpulse{
  0%,72%,100%{box-shadow:inset 0 0 0 1.5px rgba(235,196,74,.75)}
  36%{box-shadow:inset 0 0 0 5px rgba(235,196,74,0)}
}
@media(prefers-reduced-motion:reduce){.rbox.nx::after{animation:none}}

/* ══ 今場提供卡 ══（用戶 2026-08-12：「第一眼應該係想睇到提供」）
   皮跟賽日卡（.rbox）同會員卡（.mcard）：漸變 + 品牌馬水印 + 同一批 .rchip。
   ⛔ 唔另開一套視覺 —— 呢張卡係賽日卡撳入嚟之後嘅延續，換皮等於斷咗條線。
   ⛔ 唔用 nested card：入面三段（分層／出飛／結果）用間隔線同留白分，唔套盒。 */
.offer{position:relative;overflow:hidden;margin:18px 0 30px;
  padding:20px 24px 22px;border-radius:18px;
  background:linear-gradient(150deg,#FFFDF8 0%,var(--paper2) 62%);
  border:1px solid var(--hair);
  box-shadow:0 2px 5px rgba(28,27,23,.06),0 18px 34px -20px rgba(28,27,23,.34)}
.offer.done{background:linear-gradient(150deg,#FBF9F3,#F3F0E6);border-color:#E7E1D1}
/* ⛔ 水印個盒闊度**唔可以用 %**（我第一版寫 26%，即刻出咗條垂直硬邊）：
   mask 係 `auto 100%`，即係跟盒高縮放，盒窄過「盒高 × 382/487」就會由左邊
   切走隻馬，露出一條直邊 —— .rbox／.mcard 兩邊個註都寫過呢個坑。
   關鍵係**呢張卡嘅高度會隨內容變**（膽腳幾多隻、出幾多張飛、跑咗未），
   一個固定 % 只可以喺一個高度啱：實測 397px 高要 53.5%，600px 高就要 81%。
   所以改用 aspect-ratio 由高度反推闊度，幾高都唔會切。 */
/* ⛔ 由**闊度**驅動，唔可以由高度（.rbox／.mcard 嗰兩張卡高度固定，先用得高度）。
   呢張卡嘅高度隨內容變，用高度驅動就變成「卡越高、隻馬越大」——
   實測手機（卡 335×595）個盒漲到 632×806，**覆蓋 100% 卡面**，
   左邊仲畀切走 225px 露條直邊。
   闊度驅動 + aspect-ratio：盒高 = 闊 ÷ 0.784，而 mask 係 `auto 100%`（跟盒高縮），
   出嚟嘅圖闊度啱啱等於盒闊 —— 數學上永遠唔會切，卡幾高都一樣。 */
.offer>.rmark{top:-10%;right:-8%;width:42%;max-width:300px;height:auto;
  aspect-ratio:382/487;opacity:.07}
.of-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
/* ⛔ 清走 site.css 落喺 h2 嗰條金線同上邊距 —— 呢個 h2 住喺卡入面。 */
.offer h2{margin:0;padding:0;border:0;font-size:17px;letter-spacing:-.01em}
.of-h .rsplit{margin-top:0}

/* 逐層點名 —— 一層一行，層名做定錨，馬名跟住排。
   ⛔ 唔可以淨係出數量：數量喺賽日頁已經有，撳入嚟仲係數量等於冇進展。 */
.of-tier{list-style:none;margin:16px 0 0;padding:0;display:flex;
  flex-direction:column;gap:9px}
.of-tier>li{display:flex;align-items:flex-start;gap:10px;min-width:0}
.of-tier .tag{flex:0 0 auto;margin-top:2px}
.of-tier .hs{display:flex;flex-wrap:wrap;gap:5px 8px;min-width:0}
.of-tier .h{display:inline-flex;align-items:baseline;gap:5px;font-size:14px;
  color:var(--ink);white-space:nowrap}
.of-tier .h b{font-family:var(--mono);font-size:12.5px;font-weight:700;
  color:var(--ink3);min-width:17px;text-align:right}
/* 跑完先出嘅名次角標。⛔ 唔用背景色塊：一行五六隻馬，六個色塊會蓋過馬名本身。 */
.of-tier .h i{font-style:normal;font-family:var(--mono);font-size:11px;
  font-weight:700;color:var(--ink3)}
.of-tier .h.win{font-weight:700}
.of-tier .h.win i,.of-tier .h.plc i{color:#1B4030}
/* ⛔ 第／名兩個字要落**每一個**名次角標，唔可以淨係前三：得個裸「4」跟喺
   馬名後面，讀落似馬匹編號多過名次（實測 R1「12 勁爽 4」）。 */
.of-tier .h i::before{content:"第"}
.of-tier .h i::after{content:"名"}

/* 今場出飛 */
.of-tk{margin-top:18px;padding-top:15px;border-top:1px solid var(--hair)}
.of-tk .hd{display:flex;align-items:baseline;gap:10px;
  font-size:13px;font-weight:700;color:var(--ink2)}
.of-tk .sum{margin-left:auto;font-size:14px;font-weight:700;color:var(--ink)}
.of-tk ul{list-style:none;margin:9px 0 0;padding:0;
  display:flex;flex-direction:column;gap:6px}
.of-tk li{display:flex;align-items:baseline;gap:10px;min-width:0;font-size:13.5px}
.of-tk .p{flex:0 0 auto;min-width:58px;font-size:12px;font-weight:700;
  color:#4A3800;background:var(--gold-l);border-radius:6px;
  padding:2px 8px;text-align:center}
.of-tk .l{flex:0 1 auto;min-width:0;color:var(--ink);overflow-wrap:anywhere}
/* 方案名（基本／加注…）—— ⛔ 一定要 ellipsis：實際 label 有長到
   「基本·單膽 cover 全範圍（含邊線 #4）」，唔截就會撞爆隔籬個銀碼。 */
.of-tk .n{flex:1 1 60px;min-width:0;color:var(--ink3);font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-tk .c{flex:0 0 auto;margin-left:auto;color:var(--ink2);font-weight:700}
.of-more{display:inline-block;margin-top:11px;font-size:12.5px;
  color:var(--gold-d);font-weight:700}
.of-none{margin:16px 0 0;padding-top:15px;border-top:1px solid var(--hair);
  font-size:13px;color:var(--ink3)}

/* 結果條 —— 跑完先出，卡最底一行 */
.of-res{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);
  font-size:13.5px;color:var(--ink2)}
.of-res b{color:var(--ink)}
.of-res .net{margin-left:8px;font-family:var(--mono);font-weight:700;
  padding:2px 8px;border-radius:7px}
.of-res .net.up{background:#DCEAE2;color:#1B4030}
.of-res .net.dn{background:#EAE6DA;color:#6B6759}

@media(max-width:700px){
  .offer{padding:17px 16px 18px;border-radius:15px}
  .of-tier>li{flex-direction:column;gap:5px}
  .of-tier .tag{margin-top:0}
  .of-tk li{flex-wrap:wrap;gap:4px 8px}
  .of-tk .l{flex:1 0 100%;order:3}
  /* 手機一行放唔落方案名 —— 佢係輔助資料，讓位畀池名同銀碼。 */
  .of-tk .n{display:none}
}

/* 場次 bar 上面睇唔到嗰啲 —— 出得但撳唔到（唔可以做 <a>，見 race.html 個註） */
.rbtn.off{color:var(--ink3);background:var(--paper);border-style:dashed;
  cursor:not-allowed}

/* ══ 過關／大彩池區塊 ══ 同場次盒同一款皮，未解鎖用同一層深色 overlay */
.sbox{position:relative;overflow:hidden;min-height:152px;padding:22px 24px;
  border-radius:18px;display:flex;align-items:center;
  background:linear-gradient(150deg,#FFFDF8 0%,var(--paper2) 62%);
  border:1px solid var(--hair);
  box-shadow:0 1px 2px rgba(28,27,23,.05),0 8px 22px -12px rgba(28,27,23,.28)}
.sbox p{margin:0;position:relative;z-index:1}
.sbox.s-locked{background:#F7F5EE}

/* ══ 海外場地盒 ══ 同場次盒同一款皮，但唔用固定高度：
   一個場地 4–8 場，時間 chip 會自然換行，鎖死高度會切走尾幾場。 */
.obox{position:relative;overflow:hidden;min-height:132px;padding:22px 24px;
  border-radius:18px;display:flex;flex-direction:column;justify-content:center;gap:14px;
  background:linear-gradient(150deg,#FFFDF8 0%,var(--paper2) 62%);
  border:1px solid var(--hair);
  box-shadow:0 1px 2px rgba(28,27,23,.05),0 8px 22px -12px rgba(28,27,23,.28)}
.obox.s-locked{background:#F7F5EE;box-shadow:none}
/* 鋪滿成張卡嘅隱形連結（見 overseas.html 註）。z-index 0 = 墊底，
   場次 chip 同標題喺 z-index 1 浮喺上面，各自撳到自己嗰個目標。 */
.ostretch{position:absolute;inset:0;z-index:0;border-radius:inherit}
.obox:has(.ostretch){cursor:pointer}
.obox:has(.ostretch:hover),.obox:has(.ostretch:focus-visible){
  border-color:#CDC5B0;box-shadow:0 2px 4px rgba(28,27,23,.06),
  0 16px 30px -16px rgba(28,27,23,.32);transform:translateY(-2px)}
.obox:has(.ostretch:focus-visible){outline:2px solid var(--gold-d);outline-offset:3px}
.obox{transition:border-color .18s var(--ease),box-shadow .18s var(--ease),
  transform .18s var(--ease)}

/* ⛔ .ovh / .ovr 要 pointer-events:none，只有真正撳得嘅 chip 收返。
   佢哋 z-index:1 浮喺隱形連結上面，唔放行嘅話卡入面啲吉位（標題右邊、
   chip 之間嘅罅）就撳唔到 —— 實測撳右上角命中咗 .ovh 而唔係連結。 */
.ovh{display:flex;align-items:baseline;gap:12px;position:relative;z-index:1;
  pointer-events:none}
.ovn{font-size:20px;font-weight:700;letter-spacing:-.01em}
.ovc{font-size:13px;color:var(--ink3)}
.ovr{display:flex;flex-wrap:wrap;gap:7px;position:relative;z-index:1;
  pointer-events:none}
.ovt{pointer-events:auto}
.ovt{display:inline-flex;align-items:baseline;gap:7px;font-size:13px;color:var(--ink2);
  font-family:var(--mono);background:#EFEADC;border-radius:9px;padding:5px 11px}
.ovt b{color:var(--ink);font-weight:700}

/* ══ 賠率走勢表 ══
   數字係主角：全部 mono、右對齊、tabular 對位，掃一眼就見到邊個縮咗。
   ⛔ 表要自己橫向捲（.otw），唔可以令成版 body 捲 —— 12 欄喺手機一定放唔落。 */
/* ⚠️ `width:max-content` ＋ `max-width:100%` ＝ 個 box 貼住張表本身，
   容器有幾闊都唔會撐開。冇呢句嘅話（舊版淨係 100%），多出嚟嘅位會由
   table-layout:auto **全部塞落馬名欄**——實測闊版之下馬名欄由 154px 變 264px，
   騎練同「檔」中間空一大截，眼要跳過去（用戶 2026-08-12 就係嫌呢個）。
   ⛔ max-width:100% 唔可以少：冇佢就唔會捲，會撐爆版面。 */
.otw{overflow-x:auto;width:max-content;max-width:100%;
  border:1px solid var(--hair);border-radius:16px;
  background:var(--paper2);
  box-shadow:0 1px 2px rgba(28,27,23,.05),0 8px 22px -14px rgba(28,27,23,.26)}
/* ⛔ 電腦全螢幕要出齊全部欄，唔准橫向捲；手機先至捲。
   840px min-width 之下 13 欄根本迫唔落，所以欄距收窄 + 字細少少，
   實測 1180px 版面出得晒。 */
/* ⛔ **唔可以寫死 px min-width**（2026-08-16 修）。沿革：864 →（加咗評／班／十個
   信號欄）→ 1112。個數係照**本地**表度出嚟嘅，但寫喺 `.otab` 呢個共用 base class，
   於是**海外**表（17 欄、冇信號欄、天然只需 889px）被夾硬撐到 1112 →
     ① 憑空多咗 222px 橫向捲軸，右邊 W3／中W%／關W%／孖寶 睇唔到；
     ② 撐出嚟嘅位全部由 table-layout:auto 塞落馬名欄：185px → **313px**
        ＝ 成張表 28%，正正係上面 `.otw{width:max-content}` 嗰段註釋話要避免嗰件事。
   呢個 bug 上面 `.c-nm` 段落自己預言咗：「⚠️ 改呢度之前先量返 .otw 個 scrollW：
   一旦有一日欄多到超過 864px，呢個『免費』就冇咗」—— 欄加咗，min-width 跟住加，
   但**容器冇跟住加**，於是兩張表一齊中招。
   改用 `max-content` ＝ 「唔准迫窄」呢個原意嘅正確寫法：表永遠等於自己真實內容闊度，
   唔會被人為撐闊，亦唔會被壓到 wrap。實測海外 984px／本地 1183px，
   配合 `.mlay.solo`（詳情頁收起側欄）兩張都零橫向捲。
   ⚠️ 手機照樣捲（1183 > 390），靠 sticky 嘅馬號欄跟得返係邊隻馬 —— 呢點冇變。 */
.otab{width:100%;min-width:max-content;border-collapse:collapse;font-size:13.5px}
.otab th{position:sticky;top:0;z-index:1;background:#EFEADC;text-align:right;
  padding:7px 5px;font-size:11px;font-weight:700;color:var(--ink2);
  white-space:nowrap;border-bottom:1px solid var(--hair);vertical-align:bottom}
.otab th i{display:block;font-style:normal;font-weight:600;font-size:10px;
  color:var(--ink3);letter-spacing:.02em;margin-top:2px}
/* ⛔ 行高係呢張表最貴嘅資源，唔係欄闊（用戶 2026-08-12 攞 vendor 原表對比：
   佢 12 匹一個畫面睇晒，我哋要捲）。實測我哋每行 47px，12 匹 ＝ 564px。
   ⚠️ 嗰 47px **唔係 padding 造成** —— 我一開始淨係改 padding，量返冇乜變。
      真兇係 `.hn` 個 28px 圓 chip 撐起成行。所以 padding 同 chip 要一齊收，
      改一樣係做白工。收完 ~32px，12 匹 ＝ 384px，一個畫面入面。 */
.otab td{padding:4px 5px;text-align:right;border-bottom:1px solid var(--hair);
  vertical-align:middle}
.otab tbody tr:last-child td{border-bottom:0}
.otab tbody tr:nth-child(even) td{background:#F6F3EA}
.otab tbody tr:hover td{background:#FFFDF6}

.c-no{width:52px;text-align:center !important}
/* 馬號欄釘死喺左邊。
   ⛔ 冇呢段嘅話，橫向捲到 W 賠率同孖寶嗰邊，成行淨返一堆數字 ——
      眼前呢一行係邊隻馬完全睇唔返，要捲返去頭再數行數（2026-08-08 手機實測）。
   ⛔ 只釘馬號，唔釘馬名：馬名欄闊 120px，手機得 333px 可視闊度，
      釘埋就剩返一半位嚟睇數字，比冇釘更差。
   ⚠️ 由 max-width:700px 改為**全尺寸**：加咗信號 block 之後 min-width 去到
      1112px，1280 手提電腦都要橫向捲，唔再係「淨係手機先會捲」。
      表本身塞得落嗰陣，sticky 冇任何副作用（冇嘢捲）。 */
.otab .c-no{position:sticky;left:0;z-index:2;background:var(--paper2);
  box-shadow:1px 0 0 var(--hair)}
.otab tbody tr:nth-child(even) .c-no{background:#F6F3EA}
.otab tbody tr:hover .c-no{background:#FFFDF6}
.otab thead .c-no{z-index:3;background:#EFEADC}

/* 資料表闊版（main.wrap.wrapx，由 template `{% set wrapx = true %}` 開）。
   ⛔ 唔可以改 .wrap 本身：1180px 個上限係為咗**行長**——文章同逐匹理由
      靠佢先睇得舒服。資料表冇呢個問題，所以淨係資料表版解鎖。 */
@media(min-width:1440px){ .wrap.wrapx{max-width:1560px} }
/* 闊版分頁（飛數表 · 速勢圖）：右邊放到盡，**但左邊留返原位**。
   ⛔ 唔可以淨係 `max-width:none`（我第一版就係咁）：咁樣成條左側導覽會由
      平時嘅 x=150 飛去 x=20 —— 用戶 2026-08-18：「個條 bar stay in same spot
      but not push to left」。由一版揭去另一版，個 nav 喺畫面度跳位，讀落
      好似入咗第二個網站。
   做法：整返一個同 `.wrap`（1180 置中）一模一樣嘅左邊界，右邊先至放開。
   `padding-left = (可用闊 − 1180) / 2 + 20`，同 `.wrap` 置中後嘅內容左邊線
   完全重合；窄過 1180 就跌返 20px（同普通頁一樣）。
   ⚠️ 用 `100%` 唔用 `100vw`：`100vw` 計埋捲軸嗰十幾 px，會憑空多咗橫向捲。
   ⛔ 唔可以改 `.wrap` 本身：1180 個上限係為**行長**而設，文章同逐匹理由
      靠佢先讀得舒服。呢兩版先解鎖。 */
.wrap.wrapfull{max-width:none;
  padding-left:max(20px, calc((100% - var(--shell,1180px)) / 2 + 20px))}

.hn{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 6px;
  border-radius:8px;background:#E9E3D3;color:#3A3529;
  font-family:var(--mono);font-size:13px;font-weight:700}
/* ⛔ 只收賠率表入面嗰個 —— `.hn` 喺 landing.html 都用緊（`.pair .rz .hn`），
   全域改高度會靜靜郁咗首頁。 */
.otab .hn{min-width:25px;height:22px;padding:0 5px;border-radius:6px;font-size:12.5px}
/* G1／G2／G3 組間粗線（用戶 2026-08-18）。同信號表個 `.sbx tr.cut` 用同一個
   粗度同色，睇落先似同一個系統嘅「分組線」而唔係另一種嘢。
   ⛔ 唔可以用 `border-top`：sticky 表頭同 `border-collapse` 之下，
      第一行嘅 top border 會畀表頭蓋住。一律做落**上一組最後一行**嘅 bottom。 */
.otab tbody tr.gcut > td{border-bottom:2px solid var(--ink3)}

/* ══ 表頭排序 ══（用戶 2026-08-12：vendor 原表每欄有個 ▼，我哋死鎖馬號次序）
   ⛔ 個箭嘴**唔可以佔欄闊**：16 欄 × ~10px ＝ 160px，而張表本來就啱啱好
      890px 塞入 892px 個 wrap，加咗就變成電腦全螢幕都要橫向捲 ——
      違返上面「⛔ 電腦全螢幕要出齊全部欄」嗰條。
      header 係右對齊，左邊本來就空住 → 箭嘴絕對定位貼左，零成本。 */
/* ⛔ 呢度**唔可以**寫 `position:relative`（我第一版寫咗，係個 bug）：
   `.otab th.sortable`（0,2,1）specificity 蓋過 `.otab .c-no`（0,2,0），
   表頭嗰個「馬」就由 sticky 變返 relative —— 一橫捲，body 啲馬號釘住左邊
   但表頭個「馬」跟住走，兩者對唔齊，客見到嘅係「號碼」下面寫住「P3」。
   caret 唔需要嗰句：`.otab th` 本身已經係 position:sticky（做 top 釘頭），
   sticky 一樣係 absolute 子元素嘅 containing block。 */
.otab th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:background .14s var(--ease),color .14s var(--ease)}
.otab th.sortable:hover{background:#E7E0CE;color:var(--ink)}
.otab th.sortable:focus-visible{outline:2px solid var(--gold-d);outline-offset:-2px}
.otab th.sa,.otab th.sd{background:#E7E0CE;color:var(--ink)}
.otab th.sa::before,.otab th.sd::before{content:"";position:absolute;left:3px;
  border:4px solid transparent}
.otab th.sa::before{top:50%;margin-top:-6px;border-bottom-color:var(--gold-d)}
.otab th.sd::before{top:50%;margin-top:-2px;border-top-color:var(--gold-d)}

/* 今場考慮範圍 —— 馬號格左邊一條金線。
   ⛔ 唔用整行底色：行入面本來已經有三種語意底色（綠單段跌／黃落飛／藍孖寶），
      再疊一層就邊個都讀唔出。 */
.otab tbody td.c-no{border-left:3px solid transparent}
.otab tbody tr.inr td.c-no{border-left-color:var(--gold-d)}

.c-nm{text-align:left !important;min-width:120px;padding-right:4px !important}
/* ⛔ 馬名後面唔好留太多位：原本 12px padding + 168px min-width，
   馬名同「檔」中間空一大截，眼要跳過去。 */
.c-nm + .c-sm{padding-left:4px !important}
/* ⛔ 馬名同騎練排同一行（用戶 2026-08-12：「馬名／騎練 個 row 佔太多位」）。
   原本兩個都 display:block，每行變兩行文字高 —— 十二匹馬就白白高一倍，
   而張表本身要橫向捲，行高一大就更加見唔到嘢。窄screen 自然 wrap 返兩行。 */
.c-nm{white-space:nowrap}
/* ⛔ 呢欄實測食咗 168px ＝ 成張表 19%（vendor 原表得約 6%：佢練馬師壓成一個字）。
   我哋唔壓字（會員未必認得「廖」＝廖康銘），改為收字級 + 用細分隔號：
   「田泰安 ／ 姚本輝」個全形斜線淨係佔 11px，換做細點得 9px，加埋字級 ~130px。 */
.c-nm b{font-size:13.5px;letter-spacing:-.01em}
.jt{font-size:10.5px;color:var(--ink3);margin-left:5px}
.jt i{font-style:normal}
.jt i::before{content:"·";margin:0 3px;opacity:.55}
/* ⚠️ 淨係 inline 唔夠：唔加 nowrap，長名會 wrap 落第二行、短名唔會，
   十二行入面幾行高幾行矮，比齊齊兩行仲難睇。寧願個欄闊 ~55px，
   換返十二行每行慳一行文字高。 */
/* ⛔ 手機**唔好**再拆返兩行。舊版喺呢度寫「慳橫向位要緊過慳高」，
   而家實測嗰個取捨根本唔存在：張表 min-width 864px，本來就有鬆位，
   馬名欄由 120px 撐到 154px 之後 `scrollW` **仍然係 864px** —— 橫向零成本。
   換返嚟嘅係每行 50px → 32px，12 匹由 ~630px 縮到 418px（差成個手機畫面）。
   ⚠️ 改呢度之前先量返 `.otw` 個 scrollW：一旦有一日欄多到超過 864px，
      呢個「免費」就冇咗，嗰陣先值得拆返兩行。 */
/* 時間點對照（表下面）—— header 淨出 P1／W1，對照擺喺 box 以外。 */
.ostage{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:10px 0 0;font-size:12px;color:var(--ink3)}
.ostage span{display:inline-flex;align-items:center;gap:5px}
.ostage b{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink2);
  background:var(--paper);border:1px solid var(--hair);border-radius:5px;padding:1px 5px}
.ostage i{font-style:normal;color:var(--ink3)}
.c-sm{width:34px;color:var(--ink3);font-size:13px}
.c-od{width:48px;font-size:13.5px;letter-spacing:-.02em}
.c-mv{width:54px}
/* 信號欄（齊慳換閘蝕配初隱pp sb）—— 十欄迫喺一齊，所以每欄要窄到盡。
   ⛔ padding 唔可以跟 .otab td 嗰個 5px：十欄 × 左右各 5px ＝ 100px 純空氣。 */
.c-sg{width:22px;text-align:center !important;padding-left:1px !important;
  padding-right:1px !important}
.otab th.c-sg{padding-left:1px;padding-right:1px;font-size:10.5px}
.c-cc{width:26px;text-align:center !important;padding-left:2px !important;
  padding-right:2px !important}
/* ⛔ 升／降**唔可以用顏色分好壞**，兩個原因：
   ① 呢張表嘅顏色已經寫死咗一套意思（綠＝單段跌／黃＝落飛／藍＝孖寶）。
      「降」著綠 ＝ 同一個綠喺同一行有兩個意思，客一定讀錯。
   ② 我哋自己條規則講明**升班唔係負點**（只有 §16 三項齊先封膽）。
      用綠好啡去暗示「降＝好、升＝差」，等於喺板面度講反自己套嘢。
   降／升兩個字本身已經分得清楚，中性 chip 就夠。 */
.cc{display:inline-block;min-width:17px;padding:0 2px;border-radius:4px;
  background:#EAE6DA;color:var(--ink2);
  font-size:10.5px;font-weight:700;line-height:16px}
/* 信號表個定義 block 搬過嚟。⛔ 唔好加 margin-top：緊接住圖例。 */
.odef{margin:8px 0 2px;font-size:12px}
@media(min-width:900px){ .odef{grid-template-columns:repeat(3,minmax(0,1fr))} }
.odef b{min-width:34px}

/* ⛔ 唔用紅綠：喺賭博語境紅綠會讀成「贏／輸」。
   用金色（資金流入）對灰色（走資），同全站色系一致。 */
.mv{display:inline-flex;align-items:center;gap:1px;font-family:var(--mono);
  font-size:12px;line-height:1.35;font-weight:700;padding:2px 5px;border-radius:6px}
.mv.in{background:var(--gold-l);color:#5B4300}
.mv.out{background:#EAE6DA;color:#6B6759}
.mv.na{background:none;color:var(--ink3);font-weight:400}

.olegend{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  margin:14px 0 6px;font-size:12px;color:var(--ink2)}
.olegend .mv{margin-right:5px}
/* 「撳表頭可排序」—— 唔講就冇人會試（vendor 張 Excel 靠個 ▼ 明示，我哋冇）。
   擺喺圖例第一格，用金色上下箭嘴同其餘色塊圖例分開。 */
.olegend .ohint{font-weight:700;color:var(--ink2)}
.olegend .ohint::before{content:"↕";font-family:var(--mono);font-size:13px;
  margin-right:5px;color:var(--gold-d)}
.omuted{font-size:12px;color:var(--ink3);margin:4px 0 0}

/* 場地卡入面嘅場次 chip 而家係連結 */
a.ovt{text-decoration:none;transition:background .16s var(--ease),color .16s var(--ease)}
a.ovt:hover{background:var(--gold-l);color:#4A3800}
a.ovt:hover b{color:#4A3800}

@media(max-width:560px){ .olegend{gap:6px 12px} }

/* ══ 三個底色 ══ 圖例（用戶 2026-08-08 更正）：
   黃＝單段跌 ≥10% ｜ 藍＝孖寶 ｜ 綠＝整段落飛（W 或 P 三點一路縮）
   ⛔ 用淡底 + 深字，唔用原本嗰啲高飽和螢光色：一版 18 行螢光黃會睇到眼痛，
      而且喺 paper 底色上面同品牌完全唔夾。 */
/* 綠＝該段跌 ≥10%（落喺百分比格）｜ 黃＝W1≥W2≥W3 整段落飛（落喺三格 W 賠率）
   ⛔ 呢個對應係跟用戶 2026-08-08 張截圖 —— 我照住 HTML 嘅 swatch 次序估過兩次，
      兩次都反轉咗。以後改呢度先睇返張圖。
   ⛔ 用淡底 + 深字，唔用原表嗰啲高飽和螢光：一版 15 行螢光綠喺 paper 底色上面
      會睇到眼痛，而且同品牌完全唔夾。深淺分得出就夠。 */
.otab td.hit{background:#CFEBC9 !important}
.otab td.hit .mv{background:none;color:#1B4030}
.otab td.fall{background:#FBEFB8 !important;color:#4A3800;font-weight:700}
.otab td.sep{border-left:1px solid var(--hair)}

.gp{display:inline-grid;place-items:center;min-width:30px;height:21px;border-radius:6px;
  font-size:11px;font-weight:700;letter-spacing:.02em}
.gp.g1{background:#F6DAD5;color:#7A2E15}
.gp.g2{background:var(--gold-l);color:#5B4300}
.gp.g3{background:#E6E2D6;color:#54503F}
/* ⚠️ nowrap 要留返：一匹馬可以同時有兩個信號（例：pp ＋ sb），
   準佢 wrap 就淨係嗰兩三行變雙行高，成張表行高唔齊 ——
   2026-08-12 量到 47 / 65 混住（嗰陣係「隱W★★★★」斷行，★ 而家已拆走，
   但兩個 chip 一樣會斷）。寧願個欄自己撐闊，換返十二行齊高。 */
.c-gp{width:46px;text-align:center !important;white-space:nowrap}

.sw{display:inline-block;width:13px;height:13px;border-radius:4px;margin-right:6px;
  vertical-align:-2px;border:1px solid rgba(28,27,23,.12)}
.sw-y{background:#FBEFB8}
.sw-g{background:#CFEBC9}
.sw-b{background:#CDE7F5}
/* 考慮範圍嗰條金線 —— 圖例要同板面同一個形狀（直棍），唔可以出個色塊：
   出色塊客會去搵一格金色底，但板面根本冇。 */
.sw-r{width:4px;height:15px;border-radius:2px;border:0;background:var(--gold-d);
  margin-right:8px;margin-left:4px}

/* ══ 錢流 chip ══
   ⛔ 呢個 class 之前**完全冇 CSS** —— 兩個信號（pp ＋ sb）會黐埋渲染成
      「ppsb」，客只會當係亂碼。
   ⛔ 唔好逐個信號畀唔同顏色：一套配色 ＝ 一套分類法，等於用色去講返
      「邊隻信號重要啲」，同拆走 ★ 強度嗰個決定（用戶 2026-08-12）自相矛盾。
      全部一個樣，個**名**先係資訊。 */
.sig{display:inline-block;margin:1px;padding:1px 5px;border-radius:5px;
  background:var(--gold-l);color:#5B4300;
  font-size:10.5px;font-weight:700;letter-spacing:.01em;line-height:1.5;
  white-space:nowrap}
.olegend .sig{margin-right:6px}

/* 孖寶格：跌幅做主角，細行寫返 2×1獨贏 → 直接孖寶 */
.c-db{width:62px;text-align:center !important}
.otab td.dbl{background:#CDE7F5 !important}
.dp{display:block;font-family:var(--mono);font-size:12.5px;font-weight:700;color:#0C4A6E}
.dp.up{color:#7A2E15}
.dp.cap{color:var(--ink3);font-weight:600}
.otab td.dbl .dp{color:#0B3D57}

/* ══ 場次橫 bar ══ 同一場地跳場，唔使返上一頁 */
/* 賽事頁分頁列（全場分析 / 速勢圖·信號表 / 飛數表）—— 喺 .rbar（R1…Rn）下面。
   ⛔ 樣唔可以同 .rbtn 一模一樣：上面一行係「揀邊場」，呢行係「同一場睇邊部分」，
      兩件事。全部做成金色藥丸就會變咗一堆撳掣，眼睇唔出邊行係邊個層級。
      所以呢行用底線式（似 tab），.rbar 保留藥丸式。 */
.vbar{display:flex;flex-wrap:wrap;gap:2px;margin:-6px 0 20px;
  border-bottom:1px solid var(--hair)}
.vbtn{display:inline-flex;align-items:center;padding:9px 14px;text-decoration:none;
  font-size:13.5px;font-weight:700;color:var(--ink3);white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.vbtn:hover{color:var(--ink2)}
.vbtn.on{color:var(--ink);border-bottom-color:var(--gold-d)}
.vbtn:focus-visible{outline:2px solid var(--gold-d);outline-offset:-3px;border-radius:4px}
@media(max-width:560px){ .vbtn{padding:8px 10px;font-size:12.5px} }

.rbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.rbtn{display:inline-flex;align-items:center;justify-content:center;min-width:46px;
  min-height:38px;padding:0 12px;border-radius:10px;text-decoration:none;
  font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink2);
  background:var(--paper2);border:1px solid var(--hair);
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease)}
.rbtn:hover{background:#fff;border-color:#CDC5B0;color:var(--ink)}
.rbtn.on{background:linear-gradient(150deg,#EBC44A,#B98705);color:#2A1F00;
  border-color:var(--gold-d)}

/* ══ 隱w／隱q ══ 擺喺表上面：呢兩樣係「呢場最值得知嘅一兩件事」 */
.hwq{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 16px}
.hw{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:9px 14px;border-radius:12px;font-size:13px}
.hw>b{font-size:12px;font-weight:800;letter-spacing:.06em}
.hwn{font-weight:700}
.hw-w{background:#F3E8FF;color:#4C1D95}
.hw-w>b{color:#6D28D9}
.hw-q{background:var(--gold-l);color:#4A3800}
.hw-q>b{color:#7A5C00}

/* ══ 空狀態 ══ */
.mempty{border:1px dashed var(--hair);border-radius:13px;background:var(--paper2);
  padding:40px 22px;text-align:center}
.mempty .t{font-weight:700;margin-bottom:5px}
.mempty p{font-size:13px;color:var(--ink3);margin:0}

/* ══ 窄機 ══ */
@media(max-width:880px){
  /* ⛔ 一定要 minmax(0,1fr) 唔可以淨係 1fr：grid item 預設 min-width:auto，
     即係佢唔肯縮到細過裡面內容。下面啲橫向捲軸內容闊 934px，結果成條 .mnav
     撐到 934px，overflow-x:auto 永遠唔會生效，成版 390px 嘅頁變咗 954px 闊。
     ⚠️ 而且 site.css 有 body{overflow-x:hidden}，肉眼**睇唔出**佢爆咗 ——
     要靠 documentElement.scrollWidth > clientWidth 先驗到。 */
  .mlay{grid-template-columns:minmax(0,1fr);gap:20px}
  .mnav{position:static;max-height:none;overflow:visible;gap:14px;min-width:0}
  /* 導覽同賽日喺手機變橫向捲軸 —— 直排會食晒成個第一屏 */
  .mnav .mgrp{flex-direction:row;gap:4px;overflow-x:auto;scrollbar-width:none;
    padding-bottom:2px;min-width:0}
  .mnav .mgrp::-webkit-scrollbar{display:none}
  .mnav .mgrp>a,.mday{flex:0 0 auto;white-space:nowrap}
  .mlab{display:none}
  /* 下拉喺手機一樣係下拉，唔使變橫向捲 —— 撳開浮出嚟就得 */
  .dsel-m{max-height:min(46vh,320px)}
}
@media(max-width:560px){
  /* ⛔ 手機一定要放返 height:auto。
     上面 236px 固定高度係為咗桌面一欄掃得快，但手機得 280–335px 闊，
     同一張卡啲字要摺多兩三行：實測 375px 要 278px 高、320px 要 330px，
     兩個都爆過 236 —— 加上 overflow:hidden，**每一張卡**個「查看分析」掣
     都被剪走咗（2026-08-08 手機實測捉到）。
     一個固定值救唔到 320–560 成段闊度，所以呢度改用 min-height 保底。
     手機一屏得兩張卡，高高低低嘅代價遠細過剪走粒掣。 */
  .rbox{grid-template-columns:auto minmax(0,1fr);gap:0 14px;
    padding:20px 18px;height:auto;min-height:212px}
  .rno{min-width:62px;height:62px;font-size:21px;border-radius:13px}
  .rtab{padding:8px 14px 9px 16px;font-size:11.5px}
  .dhead h1{font-size:27px}
}

/* ══ 信號榜 ══ 一場一個 box，一眼睇哂（用戶 2026-08-08 指定版式）
   ⛔ 唔用「一匹一行、只列有信號」嗰個舊版：要碌好耐先睇完一場，
      而且睇唔到「邊隻冇信號」——「冇」本身就係資訊。
   格仔式矩陣：橫向係九種信號、直向係全部馬（按賽前排序）。 */
.sgrid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:700px){ .sgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:1180px){ .sgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* 賽事頁只出一個 box。⛔ 唔可以由得佢攤足 790px：全日表個 .sgrid 入面
   每欄得 ~40px，攤開就變 93px 一欄 —— 一粒點浮喺一大片空白中間，
   行同行之間對唔到眼，矩陣本身嘅意義（一眼掃邊隻多信號）冇晒。
   ⚠️ 收得太窄又會喺 790px 欄入面睇落好孤：560 令每欄 ~64px，最接近原設計。 */
.rsig .sbx{max-width:560px}
.sbx{border:1px solid var(--hair);border-radius:14px;overflow:hidden;
  background:var(--paper2);
  box-shadow:0 1px 2px rgba(28,27,23,.05),0 6px 18px -12px rgba(28,27,23,.24)}
.sbx-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:11px 13px;background:#FFFDF8;border-bottom:1px solid var(--hair)}
.sbx-h .r{font-size:15px;font-weight:700;color:var(--rust);letter-spacing:-.01em}
.sbx-h .m{font-size:12.5px;color:var(--ink3)}
.sbx-h .t{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--ink3)}
/* 夜Q 橫條 —— 深色，同下面淺色格仔拉開，一眼搵到 */
.sbx-q{padding:7px 13px;background:#24402F;color:#EAF1EC;
  font-size:13px;font-weight:700;letter-spacing:-.01em}
.sbx-q i{font-style:normal;font-weight:400;color:#A8C2B0;margin-left:6px}

/* 矩陣。⛔ 用 table 唔用 grid：欄同欄之間要對齊，而每場匹數唔同，
   table 嘅欄寬自己會跟內容對齊，grid 就要人手夾死每格闊度。 */
.sbx table{width:100%;border-collapse:collapse;table-layout:fixed}
.sbx th{font-size:11px;font-weight:700;color:var(--ink3);text-align:center;
  padding:6px 0;background:#F3F0E6;border-bottom:1px solid var(--hair)}
.sbx th:first-child{width:44px}
.sbx td{padding:0;height:26px;text-align:center;border-bottom:1px solid #EFEADF;
  font-size:12px;color:var(--ink2)}
.sbx tbody tr:last-child td{border-bottom:0}
.sbx .hno{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink)}
/* 初出 —— 貼喺馬號隔籬，唔另開一欄：佢唔係「信號」（唔係今場邊樣嘢著咗），
   係匹馬本身嘅狀態。開多欄就要成排box都留返個位畀佢，但 121/2794 匹先有。 */
.sdeb{display:inline-block;margin-left:3px;padding:0 3px;border-radius:3px;
  background:#E3EDF4;color:#1B4A63;font-size:9.5px;font-weight:700;
  line-height:13px;vertical-align:1px}
/* 熱門四匹之後嗰條線 —— 同公開文章嗰套三層切法一致 */
.sbx tr.cut td{border-bottom:2px solid var(--ink3)}
/* 入咗考慮範圍嘅馬標底色。⛔ 唔用深色：一場成半數馬入範圍，
   深底會令成個 box 花晒，反而睇唔到啲點。 */
/* 成行著黃 = 基本面有正面（齊／慳／賺）。用戶 2026-08-08 指定用黃色。
   #FBEFB8 同賠率走勢表嘅「整段落飛」黃係同一隻 —— 全站黃色只得一個意思：
   「呢一行／呢一格值得停一停」。⛔ 唔好另開第二隻黃。
   對比驗過：字 #514E45 落呢個黃 ≈ 6.5:1、橙點 #C0603C 仍然浮得出。 */
.sbx tr.hl td{background:#FBEFB8}
.sbx tr.hl .hno{color:#3A2E00}
/* 落點 = 有嗰個信號。用磚橙圓點（品牌色），唔用剔／交叉。 */
.sdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#C0603C}
/* ⛔ 字色要三種底色（黃行 #FBEFB8／白 #FAF8F2／斑馬 #FFFDF8）都過 4.5:1。
   本來用 #C0603C，落黃行得 3.64:1 —— 而黃行正正就係最多信號嗰啲行，
   即係最緊要嗰啲字最難睇。整體壓深一級。 */
.stxt{font-family:var(--mono);font-size:11.5px;font-weight:700;color:#A0472A}
/* 信號強度用深淺講，唔用星 —— 八欄一個 box，一粒星就撐爆條欄。
   ⛔ 唔可以淨靠顏色：個字母本身（w／q）已經帶咗「係邊種」呢個資訊，
      深淺只係附加嘅第二層，睇唔到都唔會漏咗嘢。 */
.stxt.s3{color:#83341A}
.stxt.s4,.stxt.s5{color:#6B2510}

/* 信號定義 —— 每行兩個（用戶指定）。
   ⛔ 唔可以用 flex-wrap 由佢自己執：字長唔同，一行有時兩個有時三個，
      眼要重新搵每行由邊度開始。grid 兩欄先真係「每行兩個」。 */
.sdef{display:grid;grid-template-columns:1fr;gap:6px 26px;
  background:var(--paper2);border:1px solid var(--hair);border-radius:12px;
  padding:14px 16px;margin:0 0 10px;font-size:13px;color:var(--ink2)}
@media(min-width:640px){ .sdef{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sdef>div{display:flex;align-items:baseline;gap:10px;min-width:0}
.sdef b{flex:0 0 auto;min-width:46px;font-weight:700;color:var(--ink);
  font-size:13.5px}
.sdef span{color:var(--ink3);min-width:0}

.sleg{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--ink3);
  background:var(--paper2);border:1px solid var(--hair);border-radius:12px;
  padding:13px 15px;margin:0 0 20px}
.sleg div{display:flex;align-items:center;gap:7px}
.sleg b{color:var(--ink2);font-weight:700}

/* ══ 全日工具連結（信號表／賠率走勢）══
   ⛔ 樣要同上面條 .dtabs 分得出：嗰啲係「同一版嘅段」，呢啲係「跳去另一版」。
      所以用膠囊掣 + 箭嘴，唔用底線式。 */
.dmore{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 22px}
.dmore a{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;
  border-radius:10px;text-decoration:none;font-size:13.5px;font-weight:700;
  color:var(--ink);background:var(--paper2);
  box-shadow:inset 0 0 0 1.5px var(--hair);
  transition:background .16s var(--ease),box-shadow .16s var(--ease)}
.dmore a:hover{background:#fff;box-shadow:inset 0 0 0 1.5px #CDC5B0}
.dmore a:focus-visible{outline:2px solid var(--gold-d);outline-offset:2px}
.dmore a::after{content:"→";font-weight:700;color:var(--ink3);margin-left:1px}
.dmore a:hover::after{color:var(--gold-d)}
.dmore .ic{color:var(--gold-d)}

/* ══ 完整分析·六步 ══ */
.stp{margin:0 0 34px}
.stp-h{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin:0 0 4px}
.stp-h .n{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--gold-d);
  background:var(--gold-l);border-radius:6px;padding:2px 8px}
.stp-h h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.015em;border-top:0;
  padding-top:0}
.stp-d{font-size:13px;color:var(--ink3);margin:0 0 12px;line-height:1.7}
.stp-sub{font-size:13px;font-weight:700;color:var(--ink2);margin:18px 0 7px}

/* 緊湊資料表。⛔ 唔借 .otab：嗰個係賠率專用（min-width 864、mono 右對齊），
   呢度啲表窄好多，硬套會逼到成版橫捲。 */
.mtb{width:100%;border-collapse:collapse;font-size:13.5px;min-width:420px}
.mtb th{font-size:11px;font-weight:700;color:var(--ink3);text-align:right;
  padding:0 8px 7px;white-space:nowrap;border-bottom:1.5px solid var(--ink3)}
.mtb td{padding:8px;text-align:right;border-bottom:1px solid var(--hair);
  color:var(--ink2);white-space:nowrap}
.mtb th:nth-child(-n+2),.mtb td:nth-child(-n+2){text-align:left}
.mtb tbody tr:last-child td{border-bottom:0}
.mtb .n{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.mtb .nm{font-weight:700;color:var(--ink)}
/* 「修正後」＝成張表嘅結論欄（用戶 2026-08-09 要大粒啲）：
   其餘欄係輸入，得呢欄係換算完嘅答案。 */
.mtb .n.big{font-size:16px;font-weight:700;color:var(--ink);
  letter-spacing:-.02em}
.mtb tr.base td{background:var(--gold-l)}          /* 基準馬 */
.mtb tr.cut td{color:var(--ink3)}                  /* 大敗／已剔除 */
.mtw{overflow-x:auto;margin:0 0 8px;-webkit-overflow-scrolling:touch}

.pill{display:inline-flex;align-items:center;border-radius:6px;padding:2px 8px;
  font-size:11.5px;font-weight:700;white-space:nowrap}
.pill.ok{background:#DCEAE2;color:#1B4030}
.pill.ex{background:#EDE8DA;color:#5A5445}
.pill.no{background:#F3DCD4;color:#7A2E15}
.stl{display:flex;flex-wrap:wrap;gap:6px}
.stl span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--ink2);background:var(--paper2);border:1px solid var(--hair);
  border-radius:8px;padding:4px 10px}
.stl b{font-family:var(--mono);font-weight:700;color:var(--ink)}
/* 熱門／半冷門／冷門 —— 同公開文章〈熱門、半冷門、冷門〉嗰三隻色一致。
   ⛔ 唔可以另揀色：篇文出面已經教咗讀者邊隻色代表邊層。 */
.stl .ht-a{background:#F6E9CF;border-color:#E0C88E}
.stl .ht-b{background:var(--paper2)}
.stl .ht-c{background:#EDEEF0;border-color:#D6D9DE}
.stl i{font-style:normal;font-size:11px;color:var(--ink3)}
/* 速指圖：圖本身好闊，細螢幕要捲得郁，⛔ 唔可以令成版 body 橫捲 */
.spro{margin:14px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.spro a{display:block;text-decoration:none}
/* ⛔ 舊版 `width:80%`：嗰陣張圖住喺「完整分析」一大版長文中間，出到盡會搶哂。
   2026-08-18 佢有咗自己一版（速勢圖·信號表分頁），情況反轉 —— 用戶話
   「第一眼睇唔清」。實測原本淨係出到原圖嘅 **37%**：1500px 闊嘅圖畫成
   559px，馬名細到 6px。而家出到盡。
   ⛔ 但唔可以超過原圖闊度：放大點陣圖淨係會糊，「睇唔清」變得更差。
   ⚠️ `min-width:640px` 係手機用嘅：375px 電話上面，塞到 335px 即係 0.22 倍，
      馬名細過 4px ＝ 一舊嘢。寧願喺 `.spro`（overflow-x:auto）入面打橫捲，
      同飛數表喺手機嘅做法一致。desktop 由 `width:100%` 話事，min 唔會生效。 */
.spro img{display:block;width:100%;min-width:640px;max-width:1500px;height:auto;
  border:1px solid var(--hair);border-radius:10px;background:#fff}
.spro figcaption{font-size:12px;color:var(--ink3);margin:6px 0 0}
/* 速勢圖分頁：成版開闊咗，但**正文唔可以跟住拉到成 1,400px 一行** ——
   `.wrap` 個 1180 上限本來就係為行長而設，呢度拆咗佢，所以要逐段收返。
   ⛔ 只收字，唔收圖同表：張圖就係要闊，信號表自己有 560 上限。 */
.rpace .stp-d,
.rpace .stl,
.rpace .sm,
.rpace .lockbox,
.rpace .mempty{max-width:78ch}
.rpace .sdef{max-width:900px}
@media(max-width:560px){ .stp-h h2{font-size:18px} }

/* ── 對飛之後嘅提示（_oddsnote.html）───────────────────────────
   ⛔ 唔可以做到似「貼士」咁 loud：呢啲係注碼結構建議，唔係預測。
      實測（110 場）① 同 ③ 嘅命中率同基準只差 2pp —— 樣做得太搶眼，
      客會當佢係必中提示。 */
.onote{margin:18px 0 0;display:grid;gap:12px}
.onote section{border:1px solid var(--hair);border-radius:10px;
  background:var(--paper2);padding:13px 15px}
.onote section.warn{border-color:#E3C4B6;background:#FBF1EC}
.onote section.add{border-color:#CFE0D4;background:#F2F8F4}
.onote h3{margin:0 0 6px;font-size:14px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em}
.onote p{margin:0;font-size:13px;line-height:1.75;color:var(--ink2)}
.onote p.fine{margin:8px 0 0;font-size:12px;color:var(--ink3)}
.onote .no{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--ink2);
  background:var(--paper);border:1px solid var(--hair);border-radius:5px;
  padding:1px 6px;min-width:22px;text-align:center;display:inline-block}
.og1{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:5px}
.og1 li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.og1 .w{color:var(--ink);font-weight:700}
.og1 .bk{font-size:11px;font-weight:700;background:#1D4ED8;color:#fff;
  border-radius:4px;padding:1px 6px}
.og1 .mv{font-size:11.5px;color:var(--ink3)}
.og1 .mv.up{color:#1B5E3F}
.og1 .mv.dn{color:#7A2E15}
/* 熱門組排序（我哋自己判嘅重排·Step 1-4 頁）。
   ⛔ 主角係**條次序**，唔係四段理由：`.g1line` 一眼睇晒，理由收埋落 `<details>`。
   ⛔ 並列要喺次序度睇得出（`2＝9`），唔可以做註腳 —— 舊版用 1./2./3. 逐行列，
      客照個編號讀就會以為 9 > 2（用戶 2026-08-12）。 */
.g1line{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:2px 0 6px}
.g1line .grp{display:inline-flex;align-items:center;gap:5px;
  background:var(--paper);border:1px solid var(--hair);border-radius:8px;padding:4px 9px}
.g1line .grp b{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--ink)}
.g1line .grp i{font-style:normal;font-size:12px;color:var(--ink3)}
.g1line .grp.out{opacity:.45}
.g1line .gt{font-size:13px;color:var(--ink3)}
.g1meta{font-size:12.5px;color:var(--ink3);margin:0 0 10px;line-height:1.7}
.g1why summary{font-size:13px;color:var(--ink2);cursor:pointer;
  padding:6px 0;border-top:1px solid var(--hair)}
.g1r{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:13px}
.g1r li{font-size:13px}
.g1r .hd{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.g1r .rk{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--gold-d);
  min-width:16px}
.g1r .no{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--ink2);
  background:var(--paper);border:1px solid var(--hair);border-radius:5px;
  padding:1px 6px;min-width:22px;text-align:center;display:inline-block}
.g1r .tie{font-size:11.5px;color:var(--ink3)}
.g1r p{margin:5px 0 0 24px;font-size:12.5px;color:var(--ink3);line-height:1.7}

.oadd{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.oadd li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.oadd .cat{font-size:11px;font-weight:700;background:#EDE8DA;color:var(--ink2);
  border-radius:4px;padding:1px 6px}
.oadd .r{font-size:11.5px;color:var(--ink3)}
.oadd .r.hint{color:#7A5C00;font-weight:700}

/* ── 獨贏角度（race.html·CAP_WIN_ANGLE）────────────────────────
   ⛔ 三層要一眼分得出強弱，但**唔可以做到似「貼士」**：呢個係角度，唔係保證。
      所以用左邊一條色邊分層，唔用大色塊。
   ⛔ 唔出 🅰🅱🅲、唔出星、唔出概率。 */
.wang{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);
  border-radius:10px;overflow:hidden}
.wa{display:grid;grid-template-columns:60px auto minmax(0,1fr);gap:12px;
  align-items:baseline;background:var(--paper2);padding:12px 15px 12px 12px;
  border-left:4px solid transparent}
.wa-a{border-left-color:#B08328}     /* 主搏 */
.wa-b{border-left-color:#8A8570}     /* 威脅 */
.wa-c{border-left-color:#C4BFAC}     /* 博冷 */
.wa .lay{font-size:12px;font-weight:700;color:var(--ink2);white-space:nowrap}
.wa-a .lay{color:#6B4E00}
.wa .nm{font-weight:700;color:var(--ink);display:flex;align-items:center;gap:7px;
  white-space:nowrap}
.wa .no{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink2);
  background:var(--paper);border:1px solid var(--hair);border-radius:5px;
  padding:1px 6px;min-width:22px;text-align:center}
.wa .why{font-size:13px;color:var(--ink2);line-height:1.7}
@media(max-width:560px){
  .wa{grid-template-columns:auto minmax(0,1fr);row-gap:5px}
  .wa .why{grid-column:1/-1}
}

/* ── 出飛卡（_slips.html·過關／大彩池共用）────────────────────
   ⛔ 買／唔買要一眼分得出。舊版兩個 badge 只差底色深淺、注碼排位一樣，
      掃落去會當三張都要買 —— 喺講飛嘅版面度呢個誤讀最貴。 */
.slipc{padding:16px 18px}
.sc-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 4px}
.sc-h b{font-size:15px;color:var(--ink)}
.sc-sum{margin-left:auto;font-size:13px;font-weight:700;color:#1B4030}

.slip{margin-top:14px;padding-top:14px;border-top:1px solid var(--hair)}
.slip:first-of-type{margin-top:8px;padding-top:0;border-top:0}
/* 唔買嗰啲：淡化 ＋ 打斜紋，唔靠讀個 badge 先知 */
.slip.skip{opacity:.72}
.slip.skip .legs{background:repeating-linear-gradient(135deg,
  transparent 0 7px,rgba(28,27,23,.035) 7px 14px)}

.sl-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sl-h b{font-size:14px;color:var(--ink);flex:1 1 auto;min-width:0}
.badge.yes{background:#DCEAE2;color:#1B4030}
.badge.nope{background:transparent;color:var(--ink3);
  box-shadow:inset 0 0 0 1px var(--hair);font-weight:600}

.legs{display:grid;gap:6px;margin:8px 0 0;padding:9px 11px;
  background:var(--paper2);border:1px solid var(--hair);border-radius:9px}
.leg{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px}
.leg .rn{font-family:var(--mono);font-size:12px;font-weight:700;color:#5B4300;
  background:var(--gold-l);border-radius:5px;padding:1px 7px;flex:0 0 auto}
.leg .kind{font-size:11.5px;font-weight:700;color:var(--ink3);flex:0 0 auto}
.leg .kind.bk{color:#1D4ED8}
.leg .kind.box{color:var(--ink2)}
.leg .hs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0}
.leg .hno{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink2);
  background:var(--paper);border:1px solid var(--hair);border-radius:5px;
  padding:1px 6px;min-width:23px;text-align:center}
.leg .hno.b{background:#1D4ED8;border-color:#1D4ED8;color:#fff}
.leg .hnm{font-size:12.5px;color:var(--ink2)}
.leg .bn{margin-left:auto;font-size:11.5px;color:var(--ink3);flex:0 0 auto}

.sl-f{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin:7px 0 0;font-size:12px;color:var(--ink3)}
.sl-f .c{font-weight:700;color:var(--ink2)}
.sl-w{margin:6px 0 0;font-size:12.5px;color:var(--ink3);line-height:1.7}
@media(max-width:560px){ .leg .bn{margin-left:0} }