/* hkraceailab — 共用樣式（由 docs/prototypes 抽出，token 完全一致） */
:root{
  --paper:#F0EEE6; --paper2:#FAF8F2; --ink:#1C1B17; --ink2:#514E45; --ink3:#6B6759;
  --hair:#E2DCCC; --gold:#C99700; --gold-d:#7A5C00; --gold-l:#F5E9C4;
  --teal:#1F7A6B; --forest:#24402F; --rust:#8C3A1E;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang HK","Noto Sans HK",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.7;-webkit-text-size-adjust:100%;
  font-feature-settings:"tnum" 1;overflow-x:hidden}
/* ⛔ 同 chrome.css 嘅 --shell 一致：唔一致嘅話由首頁去其他頁，
   內容同 logo 嘅左邊界會各自跳位。 */
.wrap{max-width:var(--shell,1180px);margin:0 auto;padding:0 20px}
/* 長篇文字唔應該拉到 1180 闊（一行太長好難讀）→ 內文自己收窄，但左邊界唔變 */
.prose{max-width:70ch}
a{color:inherit}
h1{font-size:30px;line-height:1.25;font-weight:600;letter-spacing:-.02em;margin:0 0 6px}
h2{font-size:19px;font-weight:700;margin:34px 0 12px;padding-top:13px;
  border-top:2px solid var(--gold)}
h3{font-size:15px;font-weight:700;margin:20px 0 6px}
p{margin:0 0 12px;color:var(--ink2)}
small,.sm{font-size:12px;color:var(--ink3)}
.mono{font-family:var(--mono)}

.top{position:sticky;top:0;z-index:50;background:rgba(240,238,230,.95);
  border-bottom:1px solid var(--hair)}
.top .in{max-width:920px;margin:0 auto;padding:0 20px;height:58px;
  display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;
  min-height:44px;flex:0 0 auto}
.brand .mk{width:30px;height:30px;border-radius:7px;overflow:hidden;display:block;
  background:var(--paper);flex:0 0 auto}
.brand .mk img{width:205%;height:205%;margin:-52.5%;display:block}
.sp{flex:1}
.badge{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--gold-l);color:#4A3800;white-space:nowrap}

.sitenav{background:var(--paper);border-bottom:1px solid var(--hair)}
.sitenav .in{max-width:920px;margin:0 auto;padding:0 20px;display:flex;gap:2px;
  overflow-x:auto;scrollbar-width:none}
.sitenav .in::-webkit-scrollbar{display:none}
.sitenav a{display:inline-flex;align-items:center;min-height:46px;padding:0 12px;
  white-space:nowrap;color:var(--ink2);text-decoration:none;
  border-bottom:2px solid transparent;flex:0 0 auto}
.sitenav a:hover{color:var(--ink)}
.sitenav a[aria-current=page]{color:var(--ink);font-weight:700;border-bottom-color:var(--gold)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;
  padding:0 16px;border-radius:9px;font-size:15px;font-weight:700;text-decoration:none;
  border:0;cursor:pointer;font-family:inherit;transition:background .18s var(--ease)}
.btn.gold{background:var(--gold);color:#241C00}
.btn.gold:hover{background:var(--gold-d);color:#fff}
.btn.ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--hair);background:none}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink3);background:var(--paper2)}
.btn.sm{padding:0 12px;font-size:12px;border-radius:8px}
.btn.danger{color:var(--rust);box-shadow:inset 0 0 0 1.5px #E4C7BE;background:none}

.card{background:var(--paper2);border:1px solid var(--hair);border-radius:12px;
  padding:16px 18px 18px;margin-bottom:12px}
.note{background:var(--paper2);border:1px solid var(--hair);border-radius:10px;
  padding:13px 15px;font-size:13px;color:var(--ink2);margin:0 0 14px}
.note.warn{background:var(--forest);border-color:var(--forest);color:#C7D6CB}
.note.warn b{color:#fff}
.err{background:#FBEDE8;border:1px solid #E4C7BE;color:#7A2E15;border-radius:10px;
  padding:11px 14px;margin:0 0 14px;font-size:13px}

.grid{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);
  border-radius:12px;overflow:hidden;grid-template-columns:repeat(2,1fr)}
.cell{background:var(--paper2);padding:14px 15px 16px}
/* ⛔ 數字唔准摺行：「12 · 9 · 1」喺 375px 手機摺成兩行（2026-08-08 實測），
   個「1」跌咗落下一行，睇落似另一個數字，成排格仔仲會高低不齊。
   窄螢幕情願用 clamp 縮細少少，都唔可以摺。 */
.cell .v{font-size:clamp(19px,5.4vw,24px);font-weight:700;font-family:var(--mono);
  letter-spacing:-.02em;white-space:nowrap}
.cell .k{font-size:12px;color:var(--ink3);font-weight:700;margin-top:3px}

table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;font-size:12px;color:var(--ink3);font-weight:700;padding:0 8px 8px;
  border-bottom:1px solid var(--hair);white-space:nowrap}
td{padding:10px 8px;border-bottom:1px solid var(--hair);vertical-align:middle}
tr:last-child td{border-bottom:0}
tr.out td{color:var(--ink3)}
.no{font-family:var(--mono);font-weight:700;width:34px;text-align:center}
.tag{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:5px;
  white-space:nowrap}
.tag.banker{background:#1D4ED8;color:#fff}
.tag.pbanker{background:#4C1D95;color:#fff}
.tag.leg{background:var(--gold-l);color:#4A3800}
.tag.edge{background:#EDE8DA;color:var(--ink2)}
.tag.out{color:var(--ink3);box-shadow:inset 0 0 0 1px var(--hair)}
.pos{font-family:var(--mono);font-weight:700;text-align:center;width:42px}
.pos b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;
  font-size:12px}
.pos.p1 b{background:var(--gold);color:#241C00}
.pos.p2 b,.pos.p3 b{background:var(--gold-l);color:#4A3800}
.pos.pn b{color:var(--ink3)}

.lockbox{border:1px dashed var(--hair);border-radius:12px;background:var(--paper2);
  padding:22px 18px;text-align:center}
.lockbox .t{font-weight:700;margin-bottom:6px}
.rowlist{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}

input[type=email],input[type=text],input[type=file],select{
  font:inherit;width:100%;min-height:48px;padding:0 13px;border-radius:9px;
  border:1.5px solid var(--hair);background:#fff;color:var(--ink)}
input[type=file]{padding:11px 13px;height:auto}
label{display:block;font-size:12px;font-weight:700;color:var(--ink3);margin:14px 0 5px}
.code{letter-spacing:.5em;font-family:var(--mono);font-size:24px;text-align:center}

footer{border-top:1px solid var(--hair);margin-top:34px;padding:24px 0 44px;
  font-size:12px;color:var(--ink3)}
footer a{text-decoration:none;margin-right:16px;display:inline-flex;align-items:center;
  min-height:44px}
@media(min-width:720px){ .grid{grid-template-columns:repeat(4,1fr)} }

/* ── 賽後對照（賽事頁最頂）──────────────────────────────────
   ⛔ 舊版係四格統計（首三名在範圍內／範圍隻數／首三名／頭馬派彩）。
      用戶 2026-08-09：「賽後對照嘅 data 冇用」—— 因為三格喺講我哋自己
      （命中率、範圍幾大），第四格同頁尾派彩表重覆，而真正想知嘅
      「邊隻贏、我哋當時點睇佢」反而冇。而家改成逐個名次一行。 */
.rres3{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);
  border-radius:10px;overflow:hidden;margin:14px 0 0}
.rres3 .rr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--paper2);padding:11px 14px}
.rres3 .rr.p1{background:var(--gold-l)}
.rres3 .pos{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--ink);
  min-width:20px;text-align:center}
.rres3 .nm{font-weight:700;color:var(--ink);display:flex;align-items:center;gap:7px}
.rres3 .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}
.rres3 .div{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--ink2);
  white-space:nowrap}
.rres3 .div + .div{margin-left:0}
@media(max-width:560px){ .rres3 .div{margin-left:0} }

/* ── 方案結算（賽後對照下面）────────────────────────────────
   ⛔ 「未結算」(.na) 唔可以樣似「中」或者「唔中」：序池同指定位置飛
      證唔到，扮有結論就係講大話。 */
.stl2{margin:12px 0 0;border:1px solid var(--hair);border-radius:10px;
  background:var(--paper2);padding:12px 14px}
.stl2 .hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 8px}
.stl2 h3{margin:0;font-size:14px;font-weight:700;color:var(--ink)}
.stl2 .sum{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--ink3)}
.stl2 .sum b{font-size:13.5px}
.stl2 .sum b.up{color:#1B5E3F}
.stl2 .sum b.dn{color:#7A2E15}
.stl2 ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.stl2 li{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13px;
  color:var(--ink2);line-height:1.6}
.stl2 .m{flex:0 0 auto;width:22px;text-align:center;font-size:11.5px;font-weight:700;
  border-radius:4px;padding:1px 0;background:#EDE8DA;color:var(--ink3)}
.stl2 li.hit .m{background:#DCEAE2;color:#1B4030}
.stl2 li.miss .m{background:transparent;color:var(--ink3)}
.stl2 .p{font-weight:700;color:var(--ink);flex:0 0 auto}
.stl2 .l{flex:1 1 auto;min-width:0;color:var(--ink2)}
.stl2 .s,.stl2 .v{font-family:var(--mono);font-size:12px;flex:0 0 auto}
.stl2 .s{color:var(--ink3)}
.stl2 .v{color:#1B5E3F;font-weight:700}
.stl2 .w{font-size:11.5px;color:var(--ink3);flex:0 0 auto}
.stl2 .fine{margin:9px 0 0;font-size:11.5px;color:var(--ink3);line-height:1.7}
/* 手機：唔可以淨係將 .l 掟落第二行（order:9）—— 標籤會孤零零貼住左邊，
   同上面個「中／—」對唔齊，睇落似兩件事。改為兩欄 grid：
   marker 佔第一欄，其餘全部喺第二欄自己疊。 */
@media(max-width:560px){
  .stl2 li{display:grid;grid-template-columns:22px minmax(0,1fr);
    column-gap:8px;row-gap:2px;align-items:baseline}
  .stl2 .m{grid-row:1;grid-column:1}
  .stl2 .p,.stl2 .s,.stl2 .v,.stl2 .w{grid-column:2;display:inline}
  .stl2 .p{grid-row:1}
  .stl2 .l{grid-column:2;grid-row:2;flex-basis:auto;font-size:12.5px;
    color:var(--ink3)}
  .stl2 .hd .sum{margin-left:0;flex-basis:100%}
}