/* =============================================================================
 * 天眼 —— 行車速度守門員
 *
 * 設計前提:這是開車時瞄一眼的畫面,不是坐著看的網頁。
 * 所以 —— 數字大到荒謬、顏色本身就是資訊、可點的東西一律 ≥56px、
 * 沒有任何廣告版位、沒有彈窗、沒有需要精準點擊的小按鈕。
 * 零外部依賴,離線可用。
 * ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body, h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { display: block; }

/* hidden 屬性要壓得過帶 display 的 class。
   .next-cam 設了 display:flex,優先權比瀏覽器預設的 [hidden]{display:none} 高,
   結果待機時那張空卡片會冒出來。這條是通用防呆,不是只修那一個。 */
[hidden] { display: none !important; }

:root {
  --bg:      #07090c;
  --surface: #12161c;
  --surface2:#1b212a;
  --line:    #2a323d;
  --ink:     #eef2f7;
  --muted:   #94a1b2;
  --faint:   #64707f;

  /* 級距色 —— 顏色本身就是資訊,不需要讀字 */
  --safe:   #2fd58a;
  --over:   #ffd23f;
  --heavy:  #ff8a3d;
  --seize:  #ff3b47;

  --r: 14px;
  --sans: "PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono: ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
}

/* 這裡沒有淺色模式,而且是刻意的。
   夜間開車時一整片白畫面會直接毀掉你的暗適應,比看不到速度更危險。
   白天強光下,深底大字的對比也不會輸白底。所以 —— 永遠深色。 */

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--safe); outline-offset: 3px; border-radius: 8px; }

.app {
  max-width: 640px; margin: 0 auto; min-height: 100dvh;
  display: flex; flex-direction: column;
}

/* ------------------------------------------------------------------ 頁首 -- */

.top {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
}
.brand { font-size: 17px; font-weight: 800; letter-spacing: 3px; }
.brand span { font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-left: 8px; }
.home-link { min-height: 44px; min-width: 44px; display: flex; align-items: center; flex: none; color: var(--ink); font-size: 13px; }
.gps-note { color: var(--muted); font-size: 12px; text-align: center; margin: 8px 0; }
.gauge[data-tier="unknown"] { border-color: var(--line); background: var(--surface); color: var(--muted); animation: none; }
@media (max-width: 480px) {
  .top { gap: 8px; }
  .brand { min-width: 0; flex: none; }
  .brand span { display: block; margin-left: 0; font-size: 10px; }
  .gps { min-width: 0; font-size: 11px; }
}

.gps {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted);
}
.gps .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.gps.on  .dot { background: var(--safe); }
.gps.bad .dot { background: var(--over); }
.gps.err .dot { background: var(--seize); }

/* ------------------------------------------------------------- HUD 主體 -- */

.hud {
  flex: 1; padding: 18px 16px 8px;
  display: flex; flex-direction: column; gap: 14px;
}

/* 整塊卡片依級距換色 —— 開車時用餘光就知道自己在哪一區 */
.gauge {
  border-radius: var(--r); padding: 20px 18px 18px;
  background: var(--surface); border: 2px solid var(--line);
  text-align: center; position: relative; overflow: hidden;
  transition: background-color .25s, border-color .25s;
}
.gauge[data-tier="safe"]  { border-color: color-mix(in srgb, var(--safe) 45%, transparent); }
.gauge[data-tier="over"]  { border-color: var(--over);  background: color-mix(in srgb, var(--over) 9%, var(--surface)); }
.gauge[data-tier="heavy"] { border-color: var(--heavy); background: color-mix(in srgb, var(--heavy) 13%, var(--surface)); }
.gauge[data-tier="seize"] { border-color: var(--seize); background: color-mix(in srgb, var(--seize) 20%, var(--surface)); }

@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
.gauge[data-tier="seize"] { animation: pulse 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .gauge[data-tier="seize"] { animation: none; } }

.speed {
  font-family: var(--mono); font-weight: 800; line-height: .9;
  font-size: clamp(84px, 30vw, 168px); letter-spacing: -4px;
}
.gauge[data-tier="safe"]  .speed { color: var(--ink); }
.gauge[data-tier="over"]  .speed { color: var(--over); }
.gauge[data-tier="heavy"] .speed { color: var(--heavy); }
.gauge[data-tier="seize"] .speed { color: var(--seize); }
.speed-unit { font-size: 15px; letter-spacing: 3px; color: var(--muted); margin-top: 2px; }

.tier-label {
  display: inline-block; margin-top: 12px; padding: 4px 16px;
  border-radius: 999px; font-size: 15px; font-weight: 800; letter-spacing: 2px;
}
.gauge[data-tier="safe"]  .tier-label { background: color-mix(in srgb, var(--safe) 18%, transparent);  color: var(--safe); }
.gauge[data-tier="over"]  .tier-label { background: color-mix(in srgb, var(--over) 22%, transparent);  color: var(--over); }
.gauge[data-tier="heavy"] .tier-label { background: color-mix(in srgb, var(--heavy) 22%, transparent); color: var(--heavy); }
.gauge[data-tier="seize"] .tier-label { background: var(--seize); color: #fff; }

/* --------------------------------------------- 核心指標:離吊扣還有幾 -- */
/* 神盾只在照相點叫。這個數字不管有沒有照相機都一直在,因為那條線才是真的會沒車。 */

.headroom {
  border-radius: var(--r); padding: 16px 18px;
  background: var(--surface); border: 2px solid var(--line);
  display: flex; align-items: center; gap: 16px;
}
.headroom .cap { font-size: 13px; color: var(--muted); letter-spacing: .5px; }
.headroom .big {
  font-family: var(--mono); font-weight: 800; font-size: 46px; line-height: 1;
  letter-spacing: -2px;
}
.headroom .big small { font-size: 15px; font-weight: 600; margin-left: 3px; letter-spacing: 0; }
.headroom .bar {
  flex: 1; height: 12px; border-radius: 6px; background: var(--surface2);
  overflow: hidden; border: 1px solid var(--line); min-width: 60px;
}
/* 用 scaleX 而不是百分比寬度:百分比在這個 flex 容器裡解不出來(computed 會是 0),
   而且 transform 走合成層,在低階手機上比改寬度順很多。 */
.headroom .bar i {
  display: block; width: 100%; height: 100%;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .25s, background-color .25s;
}

/* 數字只上文字色,進度條只上底色 —— 兩者寫在同一條規則裡的話,
   數字會拿到跟自己文字同色的背景,變成看不見的一塊色磚。 */
.headroom[data-near="ok"]    { border-color: color-mix(in srgb, var(--safe) 40%, transparent); }
.headroom[data-near="ok"]    .big   { color: var(--safe); }
.headroom[data-near="ok"]    .bar i { background-color: var(--safe); }

.headroom[data-near="close"] { border-color: var(--heavy); }
.headroom[data-near="close"] .big   { color: var(--heavy); }
.headroom[data-near="close"] .bar i { background-color: var(--heavy); }

.headroom[data-near="gone"]  { border-color: var(--seize); background: color-mix(in srgb, var(--seize) 16%, var(--surface)); }
.headroom[data-near="gone"]  .big   { color: var(--seize); }
.headroom[data-near="gone"]  .bar i { background-color: var(--seize); }

/* ----------------------------------------------------- 區間測速進行中 -- */

.section-card {
  border-radius: var(--r); padding: 14px 16px 16px;
  background: var(--surface); border: 2px solid var(--line);
}
.section-card[data-state="over"] { border-color: var(--heavy); background: color-mix(in srgb, var(--heavy) 10%, var(--surface)); }
.section-card[data-state="gone"] { border-color: var(--seize); background: color-mix(in srgb, var(--seize) 14%, var(--surface)); }

.sc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.sc-tag {
  background: var(--ink); color: var(--bg); border-radius: 999px;
  padding: 2px 10px; font-size: 12px; font-weight: 800; letter-spacing: 1px;
}
.section-card[data-state="over"] .sc-tag { background: var(--heavy); color: #150c04; }
.section-card[data-state="gone"] .sc-tag { background: var(--seize); color: #fff; }
.sc-name { font-size: 13px; color: var(--muted); }

.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sc-grid .k { font-size: 12px; color: var(--faint); }
.sc-grid .v { font-family: var(--mono); font-weight: 800; font-size: 34px; line-height: 1.05; }
.sc-grid .v small { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 2px; }
/* 「剩下要壓到幾」才是可以拿來做決定的數字,所以它比平均值更亮 */
.sc-grid .v.hi  { color: var(--safe); }
.sc-grid .v.bad { color: var(--seize); font-size: 26px; }

.sc-bar {
  height: 8px; border-radius: 4px; background: var(--surface2);
  border: 1px solid var(--line); overflow: hidden; margin-top: 12px;
}
.sc-bar i {
  display: block; width: 100%; height: 100%; background: var(--muted);
  transform: scaleX(0); transform-origin: left center; transition: transform .3s;
}
.section-card[data-state="over"] .sc-bar i { background: var(--heavy); }
.section-card[data-state="gone"] .sc-bar i { background: var(--seize); }
.sc-foot { font-size: 12px; color: var(--faint); margin-top: 7px; }

/* --------------------------------------------------------- 前方取締點 -- */

.next-cam {
  border-radius: var(--r); padding: 12px 14px;
  background: var(--surface); border: 2px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.next-cam[data-close="yes"] { border-color: var(--over); background: color-mix(in srgb, var(--over) 10%, var(--surface)); }

.nc-kind {
  width: 38px; height: 38px; flex: none; border-radius: 9px;
  display: grid; place-items: center; font-weight: 800; font-size: 17px;
  background: var(--surface2); color: var(--muted);
}
.next-cam[data-kind="fixed"]   .nc-kind { background: var(--over);  color: #1a1400; }
.next-cam[data-kind="mobile"]  .nc-kind { background: var(--heavy); color: #180b02; }
.next-cam[data-kind="section"] .nc-kind { background: var(--seize); color: #fff; }

.nc-body { min-width: 0; flex: 1; }
.nc-name { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-sub { font-size: 12px; color: var(--faint); margin-top: 1px; }
.nc-dist { font-family: var(--mono); font-weight: 800; font-size: 22px; flex: none; }
.next-cam[data-close="yes"] .nc-dist { color: var(--over); }

/* --------------------------------------------------------------- 速限 -- */

.limit-box {
  border-radius: var(--r); background: var(--surface);
  border: 2px solid var(--line); padding: 14px 16px 16px;
}
.limit-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.limit-head .cap { font-size: 13px; color: var(--muted); letter-spacing: .5px; }

/* 台灣速限標誌:紅圈白底黑字 */
.sign {
  width: 62px; height: 62px; border-radius: 50%; flex: none;
  background: #fff; border: 7px solid #d61f2b; color: #111;
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 800; font-size: 25px; letter-spacing: -1px;
}

.limit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 8px; }
.limit-grid button {
  min-height: 56px; border-radius: 10px;
  background: var(--surface2); border: 2px solid transparent;
  font-family: var(--mono); font-weight: 700; font-size: 19px; color: var(--muted);
}
.limit-grid button:hover { color: var(--ink); }
.limit-grid button[aria-pressed="true"] {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}

/* --------------------------------------------------------------- 控制 -- */

.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn {
  min-height: 58px; border-radius: 12px; padding: 0 14px;
  background: var(--surface); border: 2px solid var(--line);
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover { border-color: var(--muted); }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-wide { grid-column: 1 / -1; }
.btn-go { background: var(--safe); border-color: var(--safe); color: #04120b; font-size: 17px; }
.btn-stop { background: var(--seize); border-color: var(--seize); color: #fff; }
/* 標記鈕做得大而好按 —— 看到三腳架時你只有一兩秒,而且是在開車 */
.btn-mark { border-style: dashed; border-color: var(--heavy); color: var(--heavy); }
.btn-mark:hover { background: color-mix(in srgb, var(--heavy) 12%, transparent); border-color: var(--heavy); }

/* 我標記的移動式取締點 */
.marks { display: grid; gap: 8px; margin-bottom: 14px; }
.marks li {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 5px solid var(--heavy); border-radius: 10px; padding: 10px 12px;
}
.marks .mk-n { font-weight: 700; font-size: 14.5px; }
.marks .mk-s { font-size: 12px; color: var(--faint); margin-top: 1px; }
.marks .mk-del {
  margin-left: auto; flex: none; min-height: 40px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--line); color: var(--muted); font-size: 13px;
}
.marks .mk-del:hover { color: var(--seize); border-color: var(--seize); }
.btn .ico { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; }

/* --------------------------------------------------------------- 狀態 -- */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; text-align: center;
}
.stat .k { font-size: 11px; color: var(--faint); letter-spacing: .5px; }
.stat .v { font-family: var(--mono); font-weight: 700; font-size: 21px; margin-top: 1px; }
.stat .v small { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.stat.hit .v { color: var(--seize); }

.note {
  font-size: 12px; color: var(--faint); line-height: 1.65;
  border-top: 1px solid var(--line); padding: 12px 2px 0;
}
.note b { color: var(--muted); }

/* --------------------------------------------------------------- 頁籤 -- */

.tabs {
  position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs.t5 { grid-template-columns: repeat(5, 1fr); }
.tabs.t6 { grid-template-columns: repeat(6, 1fr); }
.tabs.t6 button { font-size: 12px; }
@media (max-width: 340px) { .tabs.t6 button { font-size: 11px; } }
.tabs button {
  min-height: 58px; font-size: 13px; font-weight: 700; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-top: 3px solid transparent;
}
.tabs button .ico { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.9; fill: none; }
.tabs button[aria-selected="true"] { color: var(--ink); border-top-color: var(--safe); }

.panel { display: none; }
.panel.on { display: block; }

/* --------------------------------------------------------- 罰則 / 說明 -- */

.doc { padding: 18px 16px 26px; }
.doc h2 { font-size: 17px; margin-bottom: 10px; letter-spacing: .5px; }
.doc h2 + p { margin-bottom: 14px; }
.doc p { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.doc p strong { color: var(--ink); }

.tierlist { display: grid; gap: 8px; margin-bottom: 20px; }
.tierlist li {
  border: 2px solid var(--line); border-left-width: 6px;
  border-radius: 10px; padding: 12px 14px; background: var(--surface);
}
.tierlist li[data-k="safe"]  { border-left-color: var(--safe); }
.tierlist li[data-k="over"]  { border-left-color: var(--over); }
.tierlist li[data-k="heavy"] { border-left-color: var(--heavy); }
.tierlist li[data-k="seize"] { border-left-color: var(--seize); background: color-mix(in srgb, var(--seize) 10%, var(--surface)); }
.tierlist .h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tierlist .n { font-family: var(--mono); font-weight: 800; font-size: 17px; }
.tierlist li[data-k="seize"] .n { color: var(--seize); }
.tierlist .t { font-weight: 700; font-size: 15px; }
.tierlist .d { font-size: 13px; color: var(--muted); margin-top: 4px; }
.tierlist .p { font-size: 13px; margin-top: 6px; font-weight: 600; }
.tierlist li[data-k="seize"] .p { color: var(--seize); }

.callout {
  border: 2px solid var(--seize); border-radius: var(--r);
  background: color-mix(in srgb, var(--seize) 12%, var(--surface));
  padding: 14px 16px; margin-bottom: 18px;
}
.callout p { color: var(--ink); margin: 0; font-size: 14px; }
.callout p + p { margin-top: 8px; }

/* 「法規改了而你可能不知道」用的變體。
   跟一般 callout 同一個框,但左邊加一條粗邊 —— 兩個紅框並排時
   要看得出哪一個是「新資訊」,哪一個只是強調。 */
.callout-warn { border-left-width: 6px; }
.callout-warn .fine { margin-top: 10px; font-size: 12px; color: var(--muted); }
.callout-warn .fine a { color: var(--ink); }

.kv { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 13.5px; }
.kv th, .kv td { padding: 9px 2px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.kv td .src { display: block; font-size: 12px; color: var(--faint); font-weight: 400; margin-top: 2px; }
.kv th { color: var(--muted); font-weight: 400; width: 38%; }
.kv tr:first-child th, .kv tr:first-child td { border-top: 0; }

.bullets li { display: flex; gap: 9px; padding: 5px 0; font-size: 14px; color: var(--muted); }
.bullets li .ico { width: 16px; height: 16px; margin-top: 4px; flex: none; stroke-width: 2.2; fill: none; }
.bullets.yes li .ico { stroke: var(--safe); }
.bullets.no  li .ico { stroke: var(--seize); }
.bullets b { color: var(--ink); }

.fine { font-size: 12px; line-height: 1.7; color: var(--faint); }
.hint { font-size: 12px; color: var(--faint); }

/* --------------------------------------------------------------- 贊助 -- */
/* 只活在自己的頁籤裡。不彈窗、不擋功能、HUD 上一個字都不出現 ——
   開車的畫面被募款打斷是會出人命的。 */

.amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.amounts button {
  min-height: 66px; border-radius: 10px; padding: 6px 4px;
  background: var(--surface2); border: 2px solid transparent; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.amounts .amt   { font-family: var(--mono); font-weight: 800; font-size: 19px; }
.amounts .amt-l { font-size: 11px; opacity: .85; white-space: nowrap; }
.amounts button:hover { color: var(--ink); border-color: var(--line); }
.amounts button[aria-pressed="true"] { background: var(--safe); color: #04120b; border-color: var(--safe); }

@media (max-width: 380px) {
  .amounts { grid-template-columns: repeat(2, 1fr); }
}

.pay { display: grid; gap: 10px; margin-bottom: 18px; }
.pay a {
  min-height: 62px; border-radius: 12px; padding: 10px 16px;
  background: var(--surface); border: 2px solid var(--line);
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink);
}
.pay a:hover { border-color: var(--safe); }
/* 只有帳號、沒有網頁連結的收款方式(例如街口) */
.pay .paycode {
  min-height: 62px; border-radius: 12px; padding: 12px 14px 12px 16px;
  background: var(--surface); border: 2px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.pay .pm { min-width: 0; flex: 1; }
.pay .cd {
  font-family: var(--mono); font-weight: 800; font-size: 22px;
  letter-spacing: 1px; color: var(--safe); margin-top: 2px;
  user-select: all;   /* 長按就能整串選起來,不會只選到半截 */
}
.pay .copy {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 10px;
  background: var(--safe); color: #04120b; font-weight: 800; font-size: 14px;
}
.pay .copy:hover { filter: brightness(1.08); }

.pay .nm { font-weight: 700; font-size: 16px; }
.pay .nt { font-size: 12px; color: var(--faint); margin-top: 1px; }
.pay .go { margin-left: auto; color: var(--safe); }
.pay .go svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.2; fill: none; }

.qrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.qrs figure { margin: 0; background: #fff; border-radius: 12px; padding: 12px; text-align: center; }
.qrs img { width: 100%; height: auto; border-radius: 6px; }
.qrs figcaption { font-size: 12px; color: #333; margin-top: 8px; font-weight: 600; }

.setup {
  border: 2px dashed var(--over); border-radius: 12px;
  padding: 14px 16px; color: var(--over); font-size: 13.5px; line-height: 1.7;
}
.setup code { font-family: var(--mono); background: rgba(255,255,255,.07); padding: 1px 5px; border-radius: 4px; }

.thanks {
  text-align: center; font-size: 17px; font-weight: 700;
  color: var(--safe); padding: 8px 0 4px;
}

/* --------------------------------------------------------------- 響應 -- */

@media (min-width: 560px) {
  .hud { padding: 22px 20px 10px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
}

/* 橫向(車架上最常見的方向):速度與剩餘量並排,不用捲動 */
@media (orientation: landscape) and (max-height: 520px) {
  .app { max-width: none; }
  .hud {
    display: grid; grid-template-columns: 1.1fr 1fr;
    grid-template-areas: "g h" "g s" "g n" "g l" "g c";
    align-content: start; gap: 10px; padding: 10px 12px;
  }
  .gauge       { grid-area: g; display: flex; flex-direction: column; justify-content: center; }
  .headroom    { grid-area: h; }
  .section-card{ grid-area: s; }
  .next-cam    { grid-area: n; }
  .limit-box   { grid-area: l; }
  .controls    { grid-area: c; }
  .stats, .note { display: none; }
  .sc-grid .v { font-size: 26px; }
  .speed { font-size: clamp(70px, 17vh, 120px); }
  .limit-grid { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); }
  .limit-grid button { min-height: 46px; font-size: 16px; }
  .btn { min-height: 48px; }
}

/* --------------------------------------- 移動式測速地點(查閱用清單)-- */
/* 這份資料沒有座標,不進接近提醒 —— 所以視覺上刻意跟會發警報的東西區隔開來 */

.warnbox {
  border: 2px dashed var(--heavy); border-radius: 12px;
  background: color-mix(in srgb, var(--heavy) 8%, var(--surface));
  color: var(--muted); font-size: 13px; line-height: 1.7;
  padding: 12px 14px; margin: 12px 0 14px;
}
.warnbox strong { color: var(--heavy); }

.msearch {
  width: 100%; min-height: 52px; padding: 0 14px; margin-bottom: 12px;
  border-radius: 10px; border: 2px solid var(--line);
  background: var(--surface); color: var(--ink); font-size: 16px;
}
.msearch:focus { border-color: var(--safe); outline: none; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.chip {
  min-height: 44px; padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 13.5px;
}
.chip b { color: var(--faint); font-weight: 700; margin-left: 3px; font-variant-numeric: tabular-nums; }
.chip:hover { color: var(--ink); border-color: var(--heavy); }

.mlist { display: grid; gap: 6px; margin-bottom: 14px; }
.mlist li {
  display: flex; gap: 10px; align-items: baseline;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--heavy); border-radius: 8px; padding: 9px 12px;
}
.mlist .md { flex: none; font-size: 12px; color: var(--faint); min-width: 3.6em; }
.mlist .ma { font-size: 14px; }
.mlist .ma em { font-style: normal; color: var(--heavy); font-size: 12.5px; margin-left: 4px; }

/* ---------------------------------------------------------------- 地圖 -- */
/* canvas 自繪的圖磚地圖,沒有用任何地圖套件。
   2,070 個點如果做成 DOM marker,低階手機拖曳會直接卡死。 */

.mapwrap {
  position: relative;
  /* 扣掉頁首與底部頁籤,讓地圖佔滿剩下的畫面 */
  height: calc(100dvh - 58px - 58px - env(safe-area-inset-bottom));
  min-height: 380px;
  background: #0d1014;
}
#map { width: 100%; height: 100%; display: block; cursor: grab; }
#map:active { cursor: grabbing; }

.map-legend {
  position: absolute; left: 10px; top: 10px;
  display: flex; flex-direction: column; gap: 6px; z-index: 2;
}
.map-legend .lg {
  display: flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 0 12px 0 10px; border-radius: 999px;
  background: rgba(7,9,12,.82); border: 1px solid var(--line);
  color: var(--faint); font-size: 12.5px; font-weight: 700;
  backdrop-filter: blur(6px);
}
.map-legend .lg i {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: currentColor; opacity: .35;
}
.map-legend .lg[aria-pressed="true"] { color: var(--ink); }
.map-legend .lg[aria-pressed="true"] i { opacity: 1; }
.map-legend .lg[data-kind="fixed"][aria-pressed="true"]   i { background: var(--over); }
.map-legend .lg[data-kind="section"][aria-pressed="true"] i { background: var(--seize); }
.map-legend .lg[data-kind="mobile"][aria-pressed="true"]  i { background: var(--heavy); }

.map-btns {
  position: absolute; right: 10px; top: 10px;
  display: flex; flex-direction: column; gap: 6px; z-index: 2;
}
.mbtn {
  width: 44px; height: 44px; border-radius: 11px;
  background: rgba(7,9,12,.82); border: 1px solid var(--line);
  color: var(--ink); display: grid; place-items: center;
  backdrop-filter: blur(6px);
}
.mbtn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mbtn:hover { border-color: var(--safe); color: var(--safe); }

.map-info {
  position: absolute; left: 10px; right: 10px; bottom: 34px; z-index: 3;
  background: rgba(7,9,12,.94); border: 2px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
  backdrop-filter: blur(8px);
}
.map-info[data-kind="fixed"]   { border-color: var(--over); }
.map-info[data-kind="section"] { border-color: var(--seize); }
.map-info[data-kind="mobile"]  { border-color: var(--heavy); }
.map-info .mi-k {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; margin-bottom: 5px;
}
.map-info[data-kind="fixed"]   .mi-k { background: var(--over);  color: #1a1400; }
.map-info[data-kind="section"] .mi-k { background: var(--seize); color: #fff; }
.map-info[data-kind="mobile"]  .mi-k { background: var(--heavy); color: #180b02; }
.map-info .mi-n { font-weight: 700; font-size: 14.5px; line-height: 1.45; }
.map-info .mi-s { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.map-info .mi-x {
  position: absolute; right: 6px; top: 6px; width: 32px; height: 32px;
  color: var(--faint); font-size: 18px; line-height: 1;
}

.map-hint {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  font-size: 11.5px; color: var(--faint);
  background: rgba(7,9,12,.7); padding: 3px 8px; border-radius: 6px;
  pointer-events: none;
}
.map-hint.warn { color: var(--over); }

/* ------------------------------------------------ 在地圖上標記測速點 -- */

.mbtn.add { border-color: var(--heavy); color: var(--heavy); }
.mbtn.add[aria-pressed="true"] { background: var(--heavy); color: #180b02; }

/* 準心固定在地圖正中央。用準心而不是「點一下地圖」是因為手指會擋住目標,
   而且開車前單手操作時,把地圖拖到準心下比精準戳一個點容易得多。 */
.map-cross {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  transform: translate(-50%, -50%); pointer-events: none;
}
.map-cross svg {
  width: 60px; height: 60px;
  stroke: var(--heavy); stroke-width: 2.2; fill: none; stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(0,0,0,.9));
}

.map-place {
  position: absolute; left: 10px; right: 10px; bottom: 34px; z-index: 5;
  background: rgba(7,9,12,.94); border: 2px solid var(--heavy);
  border-radius: 12px; padding: 12px 14px; backdrop-filter: blur(8px);
}
.map-place .mp-t { font-weight: 700; font-size: 14.5px; }
.map-place .mp-s { font-size: 12px; color: var(--faint); margin-top: 2px; }
.map-place .mp-btns { display: flex; gap: 8px; margin-top: 10px; }
.map-place button {
  flex: 1; min-height: 48px; border-radius: 10px; font-size: 15px; font-weight: 700;
}
.map-place .mp-cancel { background: var(--surface2); color: var(--muted); border: 1px solid var(--line); }
.map-place .mp-ok { background: var(--heavy); color: #180b02; }

.map-info .mi-del {
  margin-top: 10px; width: 100%; min-height: 44px; border-radius: 10px;
  background: transparent; border: 1px solid var(--seize); color: var(--seize);
  font-size: 14px; font-weight: 700;
}
.map-info .mi-del:hover { background: color-mix(in srgb, var(--seize) 15%, transparent); }