/* 改版：比賽辨識 Demo、設備評估、開館清單三頁共用（在 vh.css 之後載入）。
   原頁 <style> 有自己的一套變數（--bg、--panel、--accent…）和深色模式；這裡全部改指向 --vh-*，固定淺色紙底。
   頁別的規則用 body class 區分：.vh-demo、.vh-eval、.vh-checklist。 */

:root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
  --bg: var(--vh-paper); --panel: var(--vh-surface); --cell: var(--vh-surface);
  /* 註解色：--vh-muted 在紙色上對比只有 4.2:1，小字不夠，這三頁混一點墨色到 5:1 */
  --ink: var(--vh-ink); --muted: color-mix(in srgb, var(--vh-muted) 78%, var(--vh-ink)); --line: var(--vh-line);
  --chip: color-mix(in srgb, var(--vh-line) 45%, var(--vh-paper));
  --accent: var(--vh-ink); --accent-ink: var(--vh-surface); --gold: var(--vh-ball);
  --navy: var(--vh-navy); --navy-ink: var(--vh-surface); --sel: var(--vh-ink);
  --ok: var(--vh-ok); --ok-bg: var(--vh-ok-bg); --warn: var(--vh-warn); --warn-bg: var(--vh-warn-bg);
  --note: var(--vh-ink-2); --note-bg: var(--vh-surface);
  --font-display: var(--vh-num); --font-body: var(--vh-font);
  --hover: color-mix(in srgb, var(--vh-ink) 4%, transparent);
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}
@media (min-width: 721px) { :root { --gutter: max(24px, env(safe-area-inset-left, 0px)); } }

html { background: var(--vh-paper); }
body.vh-content { background: var(--vh-paper); color: var(--vh-ink); font-family: var(--vh-font); font-size: 16px; line-height: 1.75; -webkit-text-size-adjust: 100%; }
body.vh-content::before { background: var(--vh-paper); }
.vh-content a { color: var(--vh-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.vh-content a:hover { text-decoration-thickness: 2px; }
.vh-content .wrap { max-width: calc(1120px + 2 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
.vh-content .page { padding-block: 40px 96px; gap: 56px; }
.vh-content .fine { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.vh-content .muted { color: var(--muted); }
.vh-content .block { gap: 16px; }
.vh-content .block > h2, .vh-content h2.vh-h2 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.vh-content .block h3 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.4; }
.vh-content .points { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: 16px; line-height: 1.75; max-width: 46em; }
.vh-content .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ───── 頁首：英文小標 → 標題 → 導言 → 大數字 ───── */
.vh-head { display: grid; gap: 12px; min-width: 0; }
.vh-kicker { margin: 0; font: 500 13px/1 var(--vh-num); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vh-head h1 { margin: 0; font-size: 40px; font-weight: 900; line-height: 1.2; letter-spacing: 0; text-wrap: balance; }
.vh-lede { margin: 0; max-width: 34em; font-size: 18px; line-height: 1.75; color: var(--vh-ink-2); text-wrap: pretty; }
.vh-figs { display: flex; flex-wrap: wrap; gap: 16px 48px; margin: 8px 0 0; padding-top: 20px; border-top: 1px solid var(--vh-line); }
.vh-figs:empty { display: none; }
.vh-fig { display: grid; gap: 8px; min-width: 0; }
.vh-fig b { font: 600 40px/1 var(--vh-num); font-variant-numeric: tabular-nums; color: var(--vh-ink); white-space: nowrap; }
.vh-fig b small { margin-left: 4px; font-size: 18px; font-weight: 500; color: var(--vh-ink-2); }
.vh-fig > span { font-size: 14px; line-height: 1.5; color: var(--muted); }
.vh-figs + .fine { margin-top: -4px; }
@media (max-width: 720px) {
  .vh-content .page { padding-block: 28px 72px; gap: 44px; }
  .vh-head h1 { font-size: 30px; }
  .vh-lede { font-size: 17px; }
  .vh-fig b { font-size: 30px; }
  .vh-figs { gap: 16px 32px; }
  .vh-content .block > h2, .vh-content h2.vh-h2 { font-size: 24px; }
}

/* ───── 提示框（每頁最多一個）───── */
.vh-content .tip { margin: 0; background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: var(--vh-r); padding: 16px 24px; display: grid; gap: 4px; }
.vh-content .tip > b:first-child { font: 500 12px/1.6 var(--vh-num); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vh-content .tip p { margin: 0; font-size: 16px; line-height: 1.75; }
@media (max-width: 720px) { .vh-content .tip { padding: 14px 16px; } }

/* ───── 按鈕：主要（黃，一個畫面一個）／次要（深藍框）／文字 ───── */
.vh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--vh-ink); background: transparent; color: var(--vh-ink); font: 700 16px/1.2 var(--vh-font); text-decoration: none; white-space: nowrap; cursor: pointer; }
.vh-btn:hover { background: var(--hover); }
.vh-btn.pri { background: var(--vh-ball); border-color: var(--vh-ball); color: var(--vh-ball-ink); }
.vh-btn.pri:hover { background: color-mix(in srgb, var(--vh-ball) 88%, var(--vh-ink)); }
.vh-btn.sm { min-height: 32px; padding: 0 12px; font-size: 14px; font-weight: 500; }
.vh-btn[aria-pressed="true"] { background: var(--vh-ink); border-color: var(--vh-ink); color: var(--vh-surface); }
.vh-btn:disabled { opacity: .45; cursor: default; }
.vh-tbtn { all: unset; cursor: pointer; font-size: 14px; color: var(--vh-ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--vh-ink) 35%, transparent); }
.vh-tbtn:hover { color: var(--vh-ink); text-decoration-color: currentColor; }
.vh-tbtn:focus-visible { outline: 2px solid var(--vh-ball); outline-offset: 2px; }

/* ───── 標籤：中性／正面／注意 ───── */
.vh-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.6; white-space: nowrap; background: var(--chip); color: var(--vh-ink-2); }
.vh-tag.ok { background: var(--vh-ok-bg); color: color-mix(in srgb, var(--vh-ok) 82%, var(--vh-ink)); }
.vh-tag.warn { background: var(--vh-warn-bg); color: color-mix(in srgb, var(--vh-warn) 70%, var(--vh-ink)); }

/* ───── 表格 ───── */
.vh-content .tw, .vh-content .tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--vh-line); border-radius: var(--vh-r); background: var(--vh-surface); }
.vh-content .tw table, .vh-content table.tbl { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.6; }
.vh-content .tw th, .vh-content table.tbl th { text-align: left; vertical-align: bottom; padding: 12px 14px 10px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap; border-bottom: 1px solid var(--vh-line); }
.vh-content .tw td, .vh-content table.tbl td { padding: 11px 14px; vertical-align: top; border-bottom: 1px solid var(--vh-line); line-height: 1.6; }
.vh-content .tw tbody tr:last-child td, .vh-content table.tbl tbody tr:last-child td { border-bottom: 0; }
.vh-content .tw tbody tr:hover td, .vh-content table.tbl tbody tr:hover td { background: var(--hover); }
.vh-content .tw .n, .vh-content table.tbl .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vh-content .tw td .fine { font-size: 13px; }
/* 超過 6 欄的表格：手機版一列一張卡片 */
@media (max-width: 720px) {
  .vh-content .tbl-cards { border: 0; background: none; overflow: visible; border-radius: 0; }
  .vh-content .tbl-cards table, .vh-content .tbl-cards tbody, .vh-content .tbl-cards tr, .vh-content .tbl-cards td { display: block; width: auto; }
  .vh-content .tbl-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vh-content .tbl-cards tbody { display: grid; gap: 12px; }
  .vh-content .tbl-cards tr { background: var(--vh-surface); border: 1px solid var(--vh-line); border-radius: var(--vh-r); padding: 14px 16px; }
  .vh-content .tbl-cards tbody tr:hover td { background: none; }
  .vh-content .tbl-cards td { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; padding: 5px 0; border: 0; text-align: left; white-space: normal; font-size: 14px; }
  .vh-content .tbl-cards td::before { content: attr(data-label); color: var(--muted); font-size: 13px; line-height: 1.7; }
  .vh-content .tbl-cards td.lead { display: block; padding: 0 0 8px; font-size: 16px; }
  .vh-content .tbl-cards td.lead::before { content: none; }
  .vh-content .tbl-cards td.blank { display: none; }
  .vh-content .tbl-cards td > .vh-tag { justify-self: start; }
  #demo .tw.tbl-cards td, #demo .tbl-cards td, #eval .tw.tbl-cards td, #eval .tw.tbl-cards td.n { border: 0; padding: 5px 0; text-align: left; }
  #demo .tbl-cards td.lead, #eval .tw.tbl-cards td.lead { padding: 0 0 8px; }
  /* 卡片裡的數字兩兩並排，標題在上 */
  .vh-content .tbl-cards tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .vh-content .tbl-cards td { grid-column: 1 / -1; }
  .vh-content .tbl-cards td.n { grid-column: auto; display: block; font: 600 17px/1.4 var(--vh-num); }
  .vh-content .tbl-cards td.n::before { display: block; font-family: var(--vh-font); font-weight: 400; }
  .vh-content .tbl-cards td.blank { display: none; }
  .vh-content .tbl-cards td.n .u, #eval .tw.tbl-cards td.n .u { display: inline; margin-left: 4px; font-family: var(--vh-font); font-weight: 400; }
}

/* ───── 展開說明 ───── */
.vh-more { border-top: 1px solid var(--vh-line); border-bottom: 1px solid var(--vh-line); }
.vh-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px 0; font-size: 20px; font-weight: 700; line-height: 1.4; }
.vh-more > summary::-webkit-details-marker { display: none; }
.vh-more > summary small { display: block; font-size: 14px; font-weight: 400; color: var(--muted); }
.vh-more > summary::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--vh-ink); border-bottom: 2px solid var(--vh-ink); transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.vh-more[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.vh-more > summary:focus-visible { outline: 2px solid var(--vh-ball); outline-offset: 4px; }
.vh-more-body { display: grid; gap: 40px; padding: 8px 0 40px; }

/* 焦點：原頁用藍色外框，統一成 vh.css 的黃色 */
.vh-content button:focus-visible, .vh-content select:focus-visible, .vh-content input:focus-visible, .vh-content textarea:focus-visible { outline: 2px solid var(--vh-ball); outline-offset: 2px; }


/* ═════════════════ 比賽辨識 Demo ═════════════════ */
.vh-demo .camhero { background: var(--vh-surface); color: var(--vh-ink); border-bottom: 1px solid var(--vh-line); }
.vh-demo .camhero .wrap { padding-block: 12px; }
.vh-demo .camhero p { margin: 0; max-width: 46em; font-size: 15px; line-height: 1.7; color: var(--vh-ink-2); }
.vh-demo .camhero b { color: var(--vh-ink); }

#demo .demo-grid { grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 32px; }
#demo .demo-main { display: grid; gap: 16px; min-width: 0; align-content: start; }
#demo .vidwrap { background: var(--vh-navy); border: 0; border-radius: var(--vh-r); box-shadow: var(--vh-shadow); }
#demo video { background: var(--vh-navy); }

/* 播放控制：播放是主要按鈕，其餘是小的次要按鈕 */
#demo .ctl { margin: 0; gap: 8px; align-items: center; }
#demo .ctl button { min-width: 0; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--vh-ink) 30%, transparent); background: transparent; color: var(--vh-ink); font: 500 14px/1.2 var(--vh-font); white-space: nowrap; }
#demo .ctl button:hover { border-color: var(--vh-ink); background: var(--hover); }
#demo .ctl button[aria-pressed="true"] { background: var(--vh-ink); border-color: var(--vh-ink); color: var(--vh-surface); }
#demo .ctl #dv-play { min-height: 44px; min-width: 104px; padding: 0 20px; border: 0; background: var(--vh-ball); color: var(--vh-ball-ink); font-weight: 700; font-size: 16px; }
#demo .ctl #dv-play:hover { background: color-mix(in srgb, var(--vh-ball) 88%, var(--vh-ink)); }
/* 成組的按鈕：連在一起的分段樣式 */
#demo .ctl .cg { display: inline-flex; align-items: center; border: 1.5px solid color-mix(in srgb, var(--vh-ink) 30%, transparent); border-radius: 999px; overflow: hidden; }
#demo .ctl .cg button { border: 0; border-radius: 0; min-height: 30px; padding: 0 11px; }
#demo .ctl .cg button + button { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--vh-ink) 18%, transparent); }
#demo .ctl .cg button[aria-pressed="true"] { box-shadow: none; }
#demo .ctl .cg .lab { padding: 0 4px 0 12px; font-size: 13px; color: var(--muted); }
#demo .ctl .tc { margin-left: auto; font: 500 16px/1 var(--vh-num); font-variant-numeric: tabular-nums; color: var(--vh-ink-2); }
#demo .legend { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; line-height: 1.5; color: var(--muted); }
#demo .legend i { width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }

/* 右欄：球場示意（目前狀態）＋ 動作紀錄 */
#demo .demo-side { display: grid; gap: 20px; min-width: 0; align-content: start; }
#demo .now { margin: 0; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px 20px; border-radius: var(--vh-r); background: var(--vh-surface); border: 1px solid var(--vh-line); color: var(--vh-ink); }
#demo .now .st { font: 500 13px/1.4 var(--vh-num); letter-spacing: .06em; color: var(--muted); opacity: 1; }
#demo .now .big { margin: 6px 0 4px; font: 700 20px/1.4 var(--vh-font); text-wrap: balance; }
#demo .now .sub { font-size: 14px; line-height: 1.6; color: var(--vh-ink-2); opacity: 1; }
#demo .court { display: block; width: 104px; height: auto; }
#demo .court .apron { fill: color-mix(in srgb, var(--vh-court) 72%, var(--vh-ink)); }
#demo .court .half { fill: var(--vh-court); transition: fill .3s; }
#demo .court .half.win { fill: color-mix(in srgb, var(--vh-court) 62%, var(--vh-surface)); }
#demo .court .ln { fill: none; stroke: var(--vh-surface); stroke-width: 1.5; }
#demo .court .net { stroke: var(--vh-surface); stroke-width: 3; stroke-linecap: round; }
#demo .court .side { fill: color-mix(in srgb, var(--vh-surface) 88%, transparent); font: 500 15px var(--vh-font); }
#demo .court .pts { fill: var(--vh-surface); font: 600 34px var(--vh-num); text-anchor: middle; dominant-baseline: central; }
#demo .court .ball { fill: var(--vh-ball); stroke: var(--vh-ink); stroke-width: 1.5; transition: transform .35s ease, opacity .2s; }
#demo .court .ball.off { opacity: 0; }

#demo .feedbox { gap: 10px; }
#demo .feedbox h3 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#demo .feedbox h3 small { font-size: 14px; font-weight: 400; color: var(--muted); }
#demo .feed { max-height: 330px; border: 1px solid var(--vh-line); border-radius: var(--vh-r); background: var(--vh-surface); overscroll-behavior: contain; }
#demo .feed li { grid-template-columns: 52px 10px minmax(0, 1fr); gap: 10px; min-height: 44px; padding: 8px 14px; font-size: 14px; line-height: 1.55; border-bottom: 1px solid var(--vh-line); }
#demo .feed li:hover { background: var(--hover); }
#demo .feed li.on { background: color-mix(in srgb, var(--vh-ink) 8%, var(--vh-surface)); font-weight: 700; }
#demo .feed li.past { color: var(--muted); }
#demo .feed .ft { font: 500 13px var(--vh-num); font-variant-numeric: tabular-nums; color: var(--muted); }
#demo .feed .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vh-ink); }
#demo .feed .dot.far { background: transparent; box-shadow: inset 0 0 0 1.5px var(--vh-ink); }
#demo .feed .dot.dead { border-radius: 1px; background: var(--vh-ink-2); }
#demo .feed .rh { position: sticky; top: 0; z-index: 1; min-height: 36px; padding-block: 6px; background: var(--chip); font-size: 13px; font-weight: 700; color: var(--vh-ink-2); }
#demo .feed .rh.on { background: var(--chip); }

/* 三個大數字 */
#demo .demo-figs { margin-top: 0; }

/* 回合時間軸：一行一回合，橫條是這一球在整段影片裡的位置 */
#demo .tl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--vh-line); --p: 0; }
#demo .tl button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 36px 220px 52px minmax(0, 1fr) 104px; align-items: center; gap: 16px; min-height: 56px; padding: 8px 12px; border-bottom: 1px solid var(--vh-line); }
#demo .tl button:hover { background: var(--hover); }
#demo .tl button:focus-visible { outline: 2px solid var(--vh-ball); outline-offset: -2px; }
#demo .tl li.on button { background: color-mix(in srgb, var(--vh-ink) 6%, transparent); }
#demo .tl .rn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 600 16px/1 var(--vh-num); color: var(--vh-ink); background: transparent; box-shadow: inset 0 0 0 1.5px var(--vh-line); }
#demo .tl li.on .rn { background: var(--vh-ink); color: var(--vh-surface); box-shadow: none; }
#demo .tl .who { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
#demo .tl .who .vh-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--vh-ink); }
#demo .tl .who .vh-tag i.far { background: transparent; box-shadow: inset 0 0 0 1.5px var(--vh-ink); }
#demo .tl .who .res { background: transparent; box-shadow: inset 0 0 0 1px var(--vh-line); }
#demo .tl .sc { font: 600 20px/1 var(--vh-num); font-variant-numeric: tabular-nums; text-align: right; }
#demo .tl .track { position: relative; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--vh-line) 70%, var(--vh-paper)); }
#demo .tl .track i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: color-mix(in srgb, var(--vh-ink) 35%, transparent); }
#demo .tl li.on .track i { background: var(--vh-ink); }
#demo .tl .track::after { content: ""; position: absolute; top: -6px; bottom: -6px; left: calc(var(--p) * 100%); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--vh-ink); }
#demo .tl .tt { font: 500 14px/1.2 var(--vh-num); font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; white-space: nowrap; }

#demo .dl { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* 詳細說明裡的內容 */
#demo .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: fl; border-top: 1px solid var(--vh-line); }
#demo .flow li { counter-increment: fl; display: grid; gap: 4px; align-content: start; padding: 16px 16px 16px 0; font-size: 14px; line-height: 1.6; color: var(--vh-ink-2); background: none; border-radius: 0; }
#demo .flow li::before { content: counter(fl, decimal-leading-zero); font: 500 13px/1 var(--vh-num); letter-spacing: .1em; color: var(--muted); }
#demo .flow b { display: block; margin: 0; font-size: 16px; color: var(--vh-ink); }
#demo .rules { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; font-size: 16px; line-height: 1.75; }
#demo .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
#demo .tblwrap { overflow-x: auto; }
#demo table.tbl td:first-child, #demo table.tbl td:nth-child(4), #demo table.tbl td:nth-child(5), #demo table.tbl td:nth-child(6) { white-space: nowrap; }
#demo .vh-more-body .fine { max-width: 46em; }
#demo table.tbl .lead-x { display: none; }

@media (max-width: 1000px) {
  #demo .tl button { grid-template-columns: 36px minmax(0, 1fr) 52px; grid-template-areas: "n who sc" "n tr tt"; row-gap: 10px; padding-block: 12px; }
  #demo .tl .rn { grid-area: n; align-self: start; }
  #demo .tl .who { grid-area: who; }
  #demo .tl .sc { grid-area: sc; }
  #demo .tl .track { grid-area: tr; }
  #demo .tl .tt { grid-area: tt; font-size: 13px; }
}
@media (max-width: 900px) {
  #demo .demo-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #demo .now { grid-template-columns: 80px minmax(0, 1fr); }
  #demo .court { width: 80px; }
  #demo .cols { grid-template-columns: minmax(0, 1fr); }
  #demo .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  #demo .ctl { gap: 6px; }
  #demo .ctl #dv-play { min-width: 92px; padding: 0 16px; }
  #demo .ctl .cg button { padding: 0 9px; }
  #demo .ctl .cg .lab, #demo .ctl #dv-fs span { display: none; }
  #demo table.tbl td.mx { display: none; }
  #demo table.tbl .lead-x { display: block; margin-top: 2px; font-size: 14px; color: var(--vh-ink-2); }
  #demo .ctl .tc { margin-left: 0; }
  #demo .flow { grid-template-columns: minmax(0, 1fr); }
  #demo .flow li { padding: 12px 0; border-bottom: 1px solid var(--vh-line); }
  #demo .tl button { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px 12px; padding-inline: 4px; }
  #demo .demo-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  #demo .tl .rn { width: 28px; height: 28px; font-size: 15px; }
}
html.embed #demo .now { grid-template-columns: 80px minmax(0, 1fr); }
html.embed #demo .court { width: 80px; }


/* ═════════════════ 設備評估 ═════════════════ */
#eval .page { gap: 0; }
#eval .ev { grid-template-columns: 232px minmax(0, 1fr); gap: 56px; }
#eval .ev-main { gap: 24px !important; }

/* 側欄：電腦版黏在左邊，目前項目深藍底白字 */
#eval .ev-nav { position: sticky; top: 80px; gap: 2px; counter-reset: ev; max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: thin; }
#eval .ev-nav button { counter-increment: ev; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; padding: 7px 12px; border-radius: 8px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--vh-ink); }
#eval .ev-nav button::before { content: counter(ev, decimal-leading-zero); grid-row: span 2; font: 500 13px/1.7 var(--vh-num); letter-spacing: .04em; color: var(--muted); }
#eval .ev-nav button small { grid-column: 2; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--muted); }
#eval .ev-nav button:hover { background: var(--hover); }
#eval .ev-nav button[aria-current="true"] { background: var(--vh-ink); color: var(--vh-surface); }
#eval .ev-nav button[aria-current="true"]::before, #eval .ev-nav button[aria-current="true"] small { color: inherit; opacity: .72; }
#eval .ev-nav button:focus-visible { outline: 2px solid var(--vh-ball); outline-offset: 2px; }
#eval .ev-nav .ev-nav-h { margin: 0 12px 12px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--vh-ink); }
#eval .ev-nav .ev-note { margin: 16px 12px 0; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* 從 3D 點進來的提示 */
#eval .ev-from { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 10px 12px 10px 20px; border-radius: var(--vh-r); background: var(--vh-surface); border: 1px solid var(--vh-line); color: var(--vh-ink-2); font-size: 15px; }
#eval .ev-from[hidden] { display: none; }
#eval .ev-from b { color: var(--vh-ink); }
#eval .ev-from button { min-height: 36px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--vh-ink); background: transparent; color: var(--vh-ink); font: 500 14px var(--vh-font); cursor: pointer; }
#eval .ev-from button:hover { background: var(--hover); }

/* 每一頁同一個樣板：頁首（標題、一句話、預算）→ 建議 → 比價表 → 卡片 */
#eval .ev-page { gap: 56px; }
#eval .ev-hero { display: grid; gap: 12px; }
#eval .ev-hero h1 { margin: 0; font-size: 40px; font-weight: 900; line-height: 1.2; text-wrap: balance; }
#eval .ev-hero p.vh-lede { margin: 0; color: var(--vh-ink-2); font-size: 18px; line-height: 1.75; max-width: 34em; }
#eval .ev-hero .fine { max-width: 46em; }
#eval .ev-hero + .tip { margin-top: -24px; }
#eval .ev-figs { display: grid; gap: 12px; }
#eval .ev-figs:empty { display: none; }
#eval .ev-figs .vh-figs { margin-top: 8px; }
.vh-fig b small.cur { margin: 0 4px 0 0; font-size: 20px; }
html.embed .to-sheets { display: none; }

#eval .tw td:nth-child(3) { white-space: normal; }
#eval .tw th, #eval .tw td { padding: 11px 14px; line-height: 1.6; }
#eval .tw th { padding-top: 12px; padding-bottom: 10px; background: transparent; color: var(--muted); font-weight: 500; }
#eval .tw tr.pick td { background: transparent; }
#eval .tw td.n { text-align: right; }
#eval .tw th.n { white-space: normal; }
#eval .tw td:first-child { min-width: 10em; }
#eval .ev-quotes { display: grid; gap: 10px; }
#eval .quotes th, #eval .quotes td { padding-left: 12px; padding-right: 12px; }
#eval .quotes td:first-child { min-width: 10em; }
#eval .quotes td:nth-child(6) { min-width: 4.5em; }
#eval .quotes td .vh-tag { margin-left: 4px; padding: 0 8px; font-size: 12px; vertical-align: 1px; }
#eval .quotes .u { display: block; font-size: 12px; color: var(--muted); }
#eval .quotes td.note { min-width: 9em; }

/* 地墊分層：中性編號清單 */
#eval .layers { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--vh-line); }
#eval .layers div { display: grid; grid-template-columns: 40px 160px minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 14px 0; border-radius: 0; border-bottom: 1px solid var(--vh-line); background: none !important; font-size: 16px; line-height: 1.65; }
#eval .layers em { font: 500 16px/1 var(--vh-num); font-style: normal; color: var(--muted); text-align: left; letter-spacing: .04em; }
#eval .layers b { font-size: 16px; }
#eval .layers span { color: var(--vh-ink-2); }

/* 方案卡片 */
#eval .opts { grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 16px; }
#eval .opt { padding: 20px; border-radius: var(--vh-r); border: 1px solid var(--vh-line); background: var(--vh-surface); gap: 8px; font-size: 15px; line-height: 1.65; }
#eval .opt h4 { margin: 0; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 10px; font-size: 18px; font-weight: 700; line-height: 1.4; }
#eval .opt .cost { font-size: 15px; font-weight: 700; color: var(--vh-ink-2); }
#eval .opt .tagx { padding: 2px 10px; border-radius: 999px; background: var(--chip); color: var(--vh-ink-2); font-size: 13px; font-weight: 500; line-height: 1.6; }
#eval .opt .tagx.go { background: var(--vh-ok-bg); color: color-mix(in srgb, var(--vh-ok) 82%, var(--vh-ink)); }
#eval .opt .tagx.no { background: var(--vh-warn-bg); color: color-mix(in srgb, var(--vh-warn) 70%, var(--vh-ink)); }
#eval .opt ul { margin: 4px 0 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: 14px; line-height: 1.6; color: var(--vh-ink-2); }

/* 攝影機頁：大數字、兩隊統計、精華 */
#eval .kpis { display: flex; flex-wrap: wrap; gap: 16px 44px; padding-top: 20px; border-top: 1px solid var(--vh-line); }
#eval .kpi { padding: 0; border: 0; border-radius: 0; background: none; display: grid; gap: 8px; }
#eval .kpi b { font: 600 32px/1 var(--vh-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
#eval .kpi span { font-size: 14px; line-height: 1.5; color: var(--muted); }
#eval .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
#eval .bars { gap: 8px; font-size: 14px; }
#eval .bars .row { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
#eval .bars .hd b { font-size: 13px; font-weight: 500; color: var(--muted); }
#eval .bars .bar { height: 22px; border-radius: 4px; padding: 0 8px; font: 500 13px/1 var(--vh-num); font-variant-numeric: tabular-nums; color: var(--vh-surface); background: var(--vh-ink); }
#eval .bars .bar.far { background: color-mix(in srgb, var(--vh-ink) 45%, var(--vh-paper)); color: var(--vh-ink); }
#eval .hl { gap: 0; border-top: 1px solid var(--vh-line); }
#eval .hl li { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--vh-line); border-radius: 0; background: none; font-size: 15px; line-height: 1.55; }
#eval .hl li em { font: 500 16px/1 var(--vh-num); color: var(--muted); text-align: left; }
#eval .hl li .fine { display: block; margin-top: 2px; }

/* 次要按鈕（連結）；只有攝影機頁「看比賽辨識 Demo」是主要按鈕 */
#eval .ev-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--vh-ink); background: transparent; color: var(--vh-ink); font: 500 14px/1.3 var(--vh-font); text-decoration: none; text-align: center; }
#eval .ev-btn:hover { background: var(--hover); }
#eval .ev-btn.pri { min-height: 44px; padding: 0 24px; background: var(--vh-ball); border-color: var(--vh-ball); color: var(--vh-ball-ink); font-size: 16px; font-weight: 700; }
#eval .ev-btn.pri:hover { background: color-mix(in srgb, var(--vh-ball) 88%, var(--vh-ink)); }
#eval .hl .ev-btn { min-height: 32px; padding: 0 12px; }
#eval .ext { gap: 10px; }

/* 沙發：搜尋、篩選、排序＋商品卡片 */
#eval .sofa-tools { gap: 12px; }
#eval .sofa-tools input[type=search] { flex: 1 1 240px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--vh-ink) 25%, transparent); background: var(--vh-surface); color: var(--vh-ink); font: 16px var(--vh-font); }
#eval .sofa-tools input[type=search]:focus { border-color: var(--vh-ink); }
#eval .sofa-tools select { height: 44px; padding: 0 12px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--vh-ink) 25%, transparent); background: var(--vh-surface); color: var(--vh-ink); font: 15px var(--vh-font); }
#eval .chips { gap: 6px; }
#eval .chips button { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--vh-ink) 25%, transparent); background: transparent; color: var(--vh-ink); font: 500 14px var(--vh-font); }
#eval .chips button:hover { border-color: var(--vh-ink); }
#eval .chips button[aria-pressed="true"] { background: var(--vh-ink); border-color: var(--vh-ink); color: var(--vh-surface); }
#eval .sum { font-size: 14px; color: var(--muted); margin: 0; }
#eval .sofas { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
#eval .sofa { padding: 20px; gap: 0; border-radius: var(--vh-r); border: 1px solid var(--vh-line); background: var(--vh-surface); font-size: 14px; }
#eval .sofa .br { font-size: 13px; color: var(--muted); line-height: 1.5; }
#eval .sofa .nm { margin-top: 4px; font-size: 17px; font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: calc(2 * 1.45em); }
#eval .sofa .pr { margin-top: 10px; font: 600 22px/1.2 var(--vh-num); font-variant-numeric: tabular-nums; }
#eval .sofa .meta { margin-top: 10px; gap: 6px; }
#eval .sofa .meta span { padding: 2px 10px; border-radius: 999px; background: var(--chip); color: var(--vh-ink-2); font-size: 13px; line-height: 1.6; }
#eval .sofa .fit { margin-top: 10px; font-size: 13px; color: var(--muted); }
#eval .sofa .fit i { font-style: normal; letter-spacing: 2px; color: var(--vh-ink); }
#eval .sofa .fit i s { text-decoration: none; color: var(--vh-line); }
#eval .sofa p { margin: 6px 0 16px; font-size: 14px; line-height: 1.6; color: var(--vh-ink-2); }
#eval .sofa a.ev-btn { margin-top: auto; width: 100%; box-sizing: border-box; padding: 8px 14px; line-height: 1.35; }
#eval .srcs-s { margin: 0; font-size: 12px; line-height: 1.8; color: var(--muted); }
#eval .srcs-s a { color: inherit; }

@media (max-width: 860px) {
  #eval .ev { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* 手機、平板：側欄改成頁首下方一排可以橫向滑的標籤 */
  #eval .ev-nav { position: sticky; top: 56px; z-index: 20; flex-direction: row; gap: 6px; max-height: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding: 10px var(--gutter); background: color-mix(in srgb, var(--vh-paper) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--vh-line); }
  #eval .ev-nav::-webkit-scrollbar { display: none; }
  #eval .ev-nav button { flex: 0 0 auto; display: inline-flex; flex-direction: row; justify-content: center; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--vh-line); background: var(--vh-surface); font-size: 14px; white-space: nowrap; }
  #eval .ev-nav button[aria-current="true"] { border-color: var(--vh-ink); }
  #eval .ev-nav button::before, #eval .ev-nav button small, #eval .ev-nav .ev-note, #eval .ev-nav .ev-nav-h { display: none; }
  #eval .cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  #eval .ev-page { gap: 44px; }
  #eval .ev-hero h1 { font-size: 30px; }
  #eval .ev-hero p.vh-lede { font-size: 17px; }
  #eval .ev-hero + .tip { margin-top: -20px; }
  #eval .kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  #eval .kpi b { font-size: 28px; }
  #eval .layers div { grid-template-columns: 32px minmax(0, 1fr); }
  #eval .layers span { grid-column: 2; }
  #eval .hl li { grid-template-columns: 24px minmax(0, 1fr); }
  #eval .hl li .ev-btn { grid-column: 2; justify-self: start; }
  #eval .sofa-tools select { flex: 1 1 auto; }
  #eval .sofas { grid-template-columns: minmax(0, 1fr); }
  #eval .sofa .nm { min-height: 0; }
}


/* ═════════════════ 開館清單 ═════════════════ */
.vh-checklist main.ck { max-width: calc(880px + 2 * var(--gutter)); margin: 0 auto; padding: 40px var(--gutter) 96px; display: grid; gap: 40px; }
.vh-checklist .ck-figs b small { font-size: 20px; }
.vh-checklist .prog { height: 6px; border-radius: 999px; background: var(--vh-line); overflow: hidden; }
.vh-checklist .prog i { display: block; height: 100%; border-radius: 999px; background: var(--vh-ok); transition: width .3s; }
.vh-checklist .ck-prog { display: grid; gap: 8px; }
.vh-checklist .ck-prog .fine { font-size: 14px; }

/* 儲存列：有密鑰才出現「儲存」；沒有密鑰時換成一行說明 */
.vh-checklist .ck-save { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 12px 12px 12px 20px; border-radius: var(--vh-r); border: 1px solid var(--vh-line); background: var(--vh-surface); }
.vh-checklist .ck-save.edit { flex-wrap: nowrap; position: sticky; bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 10; box-shadow: var(--vh-shadow); }
.vh-checklist .ck-save .sync { flex: 1 1 0; min-width: 0; margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--vh-ink-2); }
.vh-checklist .ck-save .sync[hidden] { display: none; }
.vh-checklist .ck-save.ro .sync { margin-top: 4px; font-size: 13px; color: var(--muted); }
.vh-checklist .ck-save .sync::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.vh-checklist .ck-save .sync[data-s="ok"]::before { background: var(--vh-ok); }
.vh-checklist .ck-save .sync[data-s="busy"]::before { background: var(--vh-ball); }
.vh-checklist .ck-save .sync[data-s="err"]::before { background: var(--vh-danger); }
.vh-checklist .ck-save.ro { padding: 14px 20px; }
.vh-checklist .ck-save.ro p { margin: 0; flex: 1 1 300px; font-size: 15px; line-height: 1.65; color: var(--vh-ink-2); }
.vh-checklist .ck-save.ro p b { color: var(--vh-ink); }
.vh-checklist .ck-save.ro a { font-size: 14px; white-space: nowrap; }

/* 大分類：標題、完成幾項、細進度條 */
.vh-checklist .grp { display: grid; margin: 0; }
.vh-checklist .grp-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px 16px; padding-bottom: 4px; }
.vh-checklist .grp-h h2 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--vh-ink); letter-spacing: 0; }
.vh-checklist .grp-n { font-size: 14px; color: var(--muted); white-space: nowrap; }
.vh-checklist .grp-n b { font: 600 18px/1 var(--vh-num); font-variant-numeric: tabular-nums; color: var(--vh-ink); }
.vh-checklist .grp-h .prog { grid-column: 1 / -1; height: 4px; }

/* 每一項：一列，不套卡片 */
.vh-checklist .it { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; margin: 0; padding: 18px 0; border: 0; border-bottom: 1px solid var(--vh-line); border-radius: 0; background: none; }
.vh-checklist .it .t { font-size: 17px; font-weight: 700; line-height: 1.5; }
.vh-checklist .it .t::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; vertical-align: 1px; box-shadow: inset 0 0 0 1.5px var(--muted); }
.vh-checklist .it[data-s="doing"] .t::before { box-shadow: none; background: var(--vh-warn); }
.vh-checklist .it[data-s="done"] .t::before { box-shadow: none; background: var(--vh-ok); }
.vh-checklist .it[data-s="na"] .t::before { box-shadow: none; background: var(--vh-line); }
.vh-checklist .it[data-s="na"] { opacity: 1; }
.vh-checklist .it[data-s="na"] .t, .vh-checklist .it[data-s="na"] .w { color: var(--muted); }
.vh-checklist .it[data-s="na"] .t { text-decoration: line-through; text-decoration-thickness: 1px; }
.vh-checklist .it .go { margin-left: 10px; font-size: 14px; font-weight: 500; color: var(--vh-ink-2); white-space: nowrap; }
.vh-checklist .it .w { margin: 2px 0 0 20px; font-size: 14px; line-height: 1.65; color: var(--vh-ink-2); }
.vh-checklist .it .nt { grid-column: 1 / -1; margin: 0 0 0 20px; padding: 10px 14px; border-radius: 8px; background: var(--vh-surface); border: 1px solid var(--vh-line); font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--vh-ink); }
.vh-checklist .it .ft { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 20px; margin-left: 20px; }
.vh-checklist .it textarea { grid-column: 1 / -1; margin-left: 20px; width: calc(100% - 20px); box-sizing: border-box; min-height: 88px; padding: 10px 14px; border-radius: 8px; border: 1.5px solid color-mix(in srgb, var(--vh-ink) 25%, transparent); background: var(--vh-surface); color: var(--vh-ink); font: 15px/1.65 var(--vh-font); resize: vertical; }
.vh-checklist .it textarea:focus { border-color: var(--vh-ink); }
.vh-checklist .it textarea[hidden] { display: none; }
.vh-checklist .del { all: unset; cursor: pointer; font-size: 14px; color: var(--vh-danger); text-decoration: underline; text-underline-offset: 3px; }

/* 狀態：三段式切換 */
.vh-checklist .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--vh-surface); border: 1px solid var(--vh-line); }
.vh-checklist .seg button { all: unset; box-sizing: border-box; cursor: pointer; min-height: 34px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--vh-ink-2); white-space: nowrap; }
.vh-checklist .seg button:hover { background: var(--hover); color: var(--vh-ink); }
.vh-checklist .seg button[aria-checked="true"] { background: var(--vh-ink); color: var(--vh-surface); font-weight: 700; }
/* 「待研究」是預設狀態，選中時用淺底，避免整頁都是深色膠囊 */
.vh-checklist .seg button[data-v="todo"][aria-checked="true"] { background: var(--chip); color: var(--vh-ink); box-shadow: inset 0 0 0 1px var(--vh-line); }
.vh-checklist .seg button:focus-visible { outline: 2px solid var(--vh-ball); outline-offset: 1px; }
.vh-checklist .it[data-s="na"] .seg { opacity: .5; }
.vh-checklist .st-tag { justify-self: end; }
.vh-checklist .st-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.vh-checklist .st-tag.doing i { background: var(--vh-warn); }
.vh-checklist .st-tag.done i { background: var(--vh-ok); }

/* 加一項 */
.vh-checklist .add { display: flex; gap: 8px; margin: 12px 0 0; }
.vh-checklist .add input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px dashed color-mix(in srgb, var(--vh-ink) 25%, transparent); background: transparent; color: var(--vh-ink); font: 15px var(--vh-font); }
.vh-checklist .add input:focus { border-style: solid; border-color: var(--vh-ink); background: var(--vh-surface); }
.vh-checklist .add button { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--vh-ink); background: transparent; color: var(--vh-ink); font: 500 15px var(--vh-font); cursor: pointer; }
.vh-checklist .add button:hover { background: var(--hover); }
.vh-checklist #list { display: grid; gap: 48px; }

@media (max-width: 720px) {
  .vh-checklist main.ck { padding-top: 28px; gap: 32px; }
  .vh-checklist .it { grid-template-columns: minmax(0, 1fr); }
  .vh-checklist .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-left: 20px; }
  .vh-checklist .st-tag { justify-self: start; margin-left: 20px; }
  .vh-checklist .it .go { display: inline-block; margin-left: 20px; }
  .vh-checklist .grp-h h2 { font-size: 22px; }
}