/* ============================================================
   FMU NAVO 設計系統 v1
   高辨識度標準:正午陽光 × 半罩安全帽風鏡 × 時速 60 × 瞥視 0.5 秒
   設計語彙:公路指示牌(指引卡)+ 重機儀表(速度/距離數字)
   本檔載在 style.css 之後,負責 token / 字級 / 導航版面 / 手套模式
   ============================================================ */

/* ---- 儀表數字字體:Chakra Petch(等寬數字,只收 latin 子集約 10KB/字重)---- */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/font/chakrapetch-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+2212, U+2215;
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/font/chakrapetch-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+2212, U+2215;
}

:root {
  /* 規格 §3.2 色彩 token */
  --asphalt-900: #0B0E11;
  --asphalt-700: #161B21;
  --asphalt-500: #2A323C;
  --sign-green: #0F7A3D;
  --sign-green-deep: #0A5429;   /* 指引卡上放小字時用,白字對比拉到 8:1(AAA) */
  --hi-vis: #C8FF00;
  --alert-red: #FF2D2D;
  --amber: #FFB000;
  --text-primary: #FFFFFF;
  --text-second: #9AA5B1;

  /* 模式強調色:DRIVE 用琥珀(車內夜間不刺眼)、RIDE 用螢光黃綠(陽光下看得見) */
  --navo-accent: var(--amber);
  --navo-accent-ink: #1a1400;   /* 強調色底上的文字 */

  /* 字級縮放:規格以 390px 寬為基準,窄機縮、大機放,夾在 0.86~1.22 之間。
     這個值必須是「無單位數」才能拿去乘 px,CSS 的 clamp() 算不出來
     (clamp(0.86, 100vw/390, 1.22) 是混型別,整條 var 會失效 → font-size 全部掉回 16px),
     所以由 RideUI.applyScale() 在載入與 resize 時寫入。 */
  --ui-scale: 1;

  /* 手套模式命中區(RIDE 覆寫成 88px) */
  --hit: 52px;
  --hit-gap: 12px;

  --num-font: 'Chakra Petch', 'DIN Alternate', 'Roboto Condensed', system-ui, sans-serif;
}

/* ---- 字級表(規格 §3.3)---- */
body {
  /* 全域禁止 300 以下字重:細字在陽光下會消失 */
  font-weight: 500;
  --fs-turn-dist: calc(64px * var(--ui-scale));
  --fw-turn-dist: 900;
  --fs-road: calc(30px * var(--ui-scale));
  --fw-road: 700;
  --fs-speed: calc(44px * var(--ui-scale));
  --fw-speed: 700;
  --fs-limit: calc(28px * var(--ui-scale));
  --fs-second: calc(18px * var(--ui-scale));
  --fw-second: 500;
  --fs-list: calc(18px * var(--ui-scale));
}
body[data-navo-mode="ride"] {
  --fs-turn-dist: calc(96px * var(--ui-scale));
  --fs-road: calc(44px * var(--ui-scale));
  --fw-road: 900;
  --fs-speed: calc(64px * var(--ui-scale));
  --fw-speed: 900;
  --fs-limit: calc(36px * var(--ui-scale));
  --fs-second: calc(24px * var(--ui-scale));
  --fw-second: 700;
  --fs-list: calc(24px * var(--ui-scale));
  --navo-accent: var(--hi-vis);
  --navo-accent-ink: #101400;
  --hit: 88px;
  --hit-gap: 16px;
}
body[data-navo-mode="walk"] { --navo-accent: var(--acc); --navo-accent-ink: #14101f; }

b, strong { font-weight: 700; }
i, em, address, cite { font-style: normal; font-weight: 700; }  /* 禁止斜體 */

/* 數字一律等寬,避免每秒跳動時版面抖動 */
.navo-num, #hudDistNum, #speedVal, #speedSignVal, .cm-metric {
  font-family: var(--num-font);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0;
}
/* 路名字距 */
.navo-road, #hudRoad, #hudText, .result-item .r-name { letter-spacing: .02em; }

/* 地圖上任何文字都要底板(不透明度 ≥ 92%) */
.navo-plate {
  background: rgba(11, 14, 17, .94);
  border: 1px solid rgba(154, 165, 177, .5);
  border-radius: 10px;
  color: var(--text-primary);
}

/* ============================================================
   導航中主畫面:指引卡(公路指示牌語彙)
   ============================================================ */
#hud {
  position: absolute; z-index: 1200;
  top: calc(8px + env(safe-area-inset-top)); left: 10px; right: 10px;
  /* 卡面用深一階的指示牌綠:白字對比 9.08:1(AAA 7:1),用 --sign-green 只有 5.42:1,
     那個值只夠大字。招牌綠仍保留在頂邊高光,視覺上還是公路指示牌。 */
  background: var(--sign-green-deep);
  border: 2px solid rgba(255, 255, 255, .82);
  border-top: 3px solid var(--sign-green);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  padding: 10px 14px;
  display: none; align-items: center; gap: 14px;
  backdrop-filter: none;   /* 指示牌是實心的,不做玻璃 */
}
#hud.show { display: flex; }

#hudArrow {
  flex: 0 0 auto;
  width: calc(var(--fs-turn-dist) * .82); height: calc(var(--fs-turn-dist) * .82);
  display: flex; align-items: center; justify-content: center;
}
#hudTurnIc { width: 100%; height: 100%; filter: brightness(0) invert(1); }  /* 粗黑箭頭 → 反白 */
#hudArrowTxt { font-size: calc(var(--fs-turn-dist) * .7); line-height: 1; color: #fff; font-weight: 900; }

#hudMain { flex: 1; min-width: 0; }
#hudDist { display: flex; align-items: baseline; gap: 6px; color: #fff; }
#hudDistNum { font-size: var(--fs-turn-dist); font-weight: var(--fw-turn-dist); line-height: .95; }
#hudDistUnit { font-size: calc(var(--fs-turn-dist) * .32); font-weight: 700; opacity: .92; }
#hudRoad {
  font-size: var(--fs-road); font-weight: var(--fw-road); color: #fff;
  line-height: 1.15; margin-top: 2px;
  white-space: nowrap; overflow: hidden;
}
/* DRIVE 才顯示完整動作描述;RIDE 只給箭頭+距離+路名 */
#hudText { font-size: var(--fs-second); font-weight: var(--fw-second); color: rgba(255, 255, 255, .92); margin-top: 2px; }
body[data-navo-mode="ride"] #hudText { display: none; }

/* 車道指引(DRIVE 專屬,路口前 500m) */
#hudLanes { display: none; gap: 4px; margin-top: 8px; }
#hudLanes.show { display: flex; }
#hudLanes .lane {
  width: 26px; height: 34px; border-radius: 6px;
  background: rgba(255, 255, 255, .16);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff; opacity: .4;
}
#hudLanes .lane.valid { opacity: 1; }
#hudLanes .lane.best { background: var(--amber); color: #201700; opacity: 1; font-weight: 900; }

/* 續接指引:只在 300m 內出現 */
#hudNextCard {
  position: absolute; z-index: 1190; left: 10px; right: 10px;
  background: #073d1e;                     /* 比主指引卡再深一階,層級一眼分得出來 */
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 10px;
  padding: 8px 14px;
  color: #fff; font-size: var(--fs-second); font-weight: var(--fw-second);
  display: none; align-items: center; gap: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
#hudNextCard.show { display: flex; }
#hudNextIc { width: calc(var(--fs-second) * 1.3); height: calc(var(--fs-second) * 1.3); filter: brightness(0) invert(1); }

/* 浮動警示條(琥珀=注意、紅=警告);3 秒後淡出 */
#alertBar {
  position: absolute; z-index: 1250; left: 10px; right: 10px;
  background: var(--amber); color: #201700;
  border-radius: 10px; padding: 10px 14px;
  font-size: var(--fs-second); font-weight: 700;
  display: none; align-items: center; gap: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .25s;
}
#alertBar.show { display: flex; opacity: 1; }
#alertBar.danger { background: var(--alert-red); color: #fff; }
#alertBar .ab-ic { font-size: 1.3em; }
body[data-navo-mode="ride"] #alertBar { /* RIDE 警示提高一階 */ box-shadow: 0 8px 28px rgba(255, 176, 0, .35), 0 8px 24px rgba(0, 0, 0, .6); }

/* ---- 速度帶(重機儀表語彙)---- */
#navBar {
  background: var(--asphalt-700) !important;
  border-top: 2px solid var(--asphalt-500);
}
#navBar.over { background: var(--alert-red) !important; }
#navBar.over #speedVal, #navBar.over #speedUnit,
#navBar.over #navRemain, #navBar.over #navEta { color: #fff !important; }
#speedVal { font-size: var(--fs-speed); font-weight: var(--fw-speed); line-height: 1; color: var(--text-primary); }
#speedUnit { font-size: calc(var(--fs-second) * .8); color: var(--text-second); font-weight: 700; }
/* 提高一層選擇器:style.css 的 `#speedSign span` 特異度比單一 ID 高 */
#speedSign #speedSignVal { font-size: var(--fs-limit); font-weight: 900; }
#navBar #speedSign {
  width: calc(var(--fs-limit) * 1.85); height: calc(var(--fs-limit) * 1.85);
  border-width: calc(var(--fs-limit) * 0.21);
}
#navRemain, #navEta { font-size: var(--fs-second); font-weight: var(--fw-second); }
#navEta { color: var(--text-second); }
#navRemain { color: var(--text-primary); }
/* 推估速限:數字旁小問號 */
#speedSign.est::after {
  content: '?'; position: absolute; right: -2px; top: -4px;
  font-size: 13px; font-weight: 900; color: var(--amber);
}

/* DRIVE 底部資訊列可上滑展開路線總覽 */
#navSheetHandle {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 4px; border-radius: 2px; background: var(--asphalt-500);
}
#navSheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1150;
  background: var(--asphalt-700); border-top: 2px solid var(--asphalt-500);
  border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform .28s ease;
  max-height: 62vh; overflow-y: auto;
}
#navSheet.show { transform: translateY(0); }
#navSheet h4 { font-size: var(--fs-second); color: var(--text-second); margin-bottom: 10px; font-weight: 700; }
.ns-step { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--asphalt-500); }
.ns-step img { width: 26px; height: 26px; filter: brightness(0) invert(1); opacity: .85; }
.ns-step .d { font-family: var(--num-font); font-variant-numeric: tabular-nums; color: var(--navo-accent); min-width: 68px; font-weight: 700; font-size: var(--fs-list); }
.ns-step .t { font-size: var(--fs-list); color: var(--text-primary); }

/* ============================================================
   RIDE 常駐雙角按鈕(車隊 / SOS)+ 更多
   ============================================================ */
body[data-navo-mode="ride"].navigating #crewBtn,
body[data-navo-mode="ride"].navigating #sosBtn {
  position: absolute;
  width: var(--hit); height: var(--hit); border-radius: 24px;
  bottom: calc(112px + env(safe-area-inset-bottom));
  border-width: 2px;
}
body[data-navo-mode="ride"].navigating #crewBtn { left: 14px; right: auto; }
body[data-navo-mode="ride"].navigating #sosBtn { right: 14px; left: auto; }
body[data-navo-mode="ride"].navigating #crewBtn .ic,
body[data-navo-mode="ride"].navigating #sosBtn .ic { width: 40px; height: 40px; }

/* ---- 「更多」:次要功能一律收在這裡 ----
   RIDE 全程只留 定位 / 更多 / 車隊 / SOS 四顆(88px 命中區疊不下八顆,也違反 6 個可點目標上限);
   DRIVE 導航中留 定位 / 圖層 / 探索 / 更多。 */
#moreBtn { display: none; }
body.navigating #moreBtn,
body[data-navo-mode="ride"] #moreBtn { display: flex; }
body.navigating #nightBtn, body.navigating #personaBtn, body.navigating #trafficBtn,
body.navigating #tiltBtn, body.navigating #routesBtn { display: none; }
body[data-navo-mode="ride"] #nightBtn, body[data-navo-mode="ride"] #personaBtn,
body[data-navo-mode="ride"] #trafficBtn, body[data-navo-mode="ride"] #tiltBtn,
body[data-navo-mode="ride"] #routesBtn, body[data-navo-mode="ride"] #exploreBtn { display: none; }
body[data-navo-mode="ride"].navigating #locateBtn { display: none; }

/* RIDE 的四顆按鈕:100px 間距容得下 88px 命中區 */
body[data-navo-mode="ride"] #locateBtn { bottom: calc(120px + env(safe-area-inset-bottom)); }
body[data-navo-mode="ride"] #moreBtn   { right: 14px; bottom: calc(220px + env(safe-area-inset-bottom)); }
body[data-navo-mode="ride"] #crewBtn   { position: absolute; right: 14px; bottom: calc(320px + env(safe-area-inset-bottom)); }
body[data-navo-mode="ride"] #sosBtn    { right: 14px; bottom: calc(420px + env(safe-area-inset-bottom)); }
/* DRIVE 導航中:更多鈕接在圖層鈕原本的位置 */
body[data-navo-mode="drive"].navigating #moreBtn { right: 14px; bottom: 214px; }
body[data-navo-mode="drive"].navigating #exploreBtn { display: flex; bottom: 278px; }
body[data-navo-mode="walk"].navigating #moreBtn { right: 14px; bottom: 214px; }

/* 更多面板三態(2026-09-02 UI 規格):hidden(全收)/peek(把手+標題)/expanded(全開)
   fixed+bottom:0+translateY,safe-area 算在 padding 內——先前 bottom 位移+小高度會讓標題露出被裁 */
#moreSheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400;
  background: var(--asphalt-700); border-top: 2px solid var(--asphalt-500);
  border-radius: 20px 20px 0 0;
  padding: 0 14px calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform .28s ease;
  max-height: 70vh; display: flex; flex-direction: column;
}
#moreSheet.show, #moreSheet.expanded { transform: translateY(0); }
#moreSheet.peek { transform: translateY(calc(100% - 64px - env(safe-area-inset-bottom, 0px))); }
.ms-drag { flex: 0 0 auto; padding-top: 8px; touch-action: none; }
.ms-handle { width: 36px; height: 4px; border-radius: 2px; background: #4a5170; margin: 0 auto 6px; }
.ms-head { display: flex; align-items: center; justify-content: space-between; }
#moreGrid { overflow-y: auto; }
#moreGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--hit) + 20px), 1fr)); gap: var(--hit-gap); }
.more-item {
  min-height: var(--hit); border-radius: 16px; background: var(--asphalt-500);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--text-primary); font-size: calc(var(--fs-second) * .82); font-weight: 700; padding: 10px 4px;
}
.more-item img { width: 28px; height: 28px; }
.more-item:active { background: var(--navo-accent); color: var(--navo-accent-ink); }
.more-item:active img { filter: brightness(0); }

/* ============================================================
   手套模式(RIDE 預設開啟)
   ============================================================ */
body[data-navo-mode="ride"] .fab {
  width: var(--hit); height: var(--hit); border-radius: 26px; border-width: 2px;
}
body[data-navo-mode="ride"] .fab .ic { width: 34px; height: 34px; }
body[data-navo-mode="ride"] #locateBtn { bottom: calc(120px + env(safe-area-inset-bottom)); }
body[data-navo-mode="ride"] #nightBtn { bottom: calc(220px + env(safe-area-inset-bottom)); }
body[data-navo-mode="ride"] #personaBtn { bottom: calc(320px + env(safe-area-inset-bottom)); }
body[data-navo-mode="ride"] .btn { min-height: var(--hit); font-size: var(--fs-list); }
body[data-navo-mode="ride"] .pp-chip { min-height: var(--hit); font-size: var(--fs-list); padding: 0 18px; display: flex; align-items: center; }
body[data-navo-mode="ride"] .cr-btn { min-height: var(--hit); font-size: var(--fs-list); }
body[data-navo-mode="ride"] .chip { min-height: 56px; font-size: var(--fs-list); }
body[data-navo-mode="ride"] .result-item { padding: 20px 16px; font-size: var(--fs-list); }
body[data-navo-mode="ride"] .cr-input { min-height: 60px; font-size: var(--fs-list); }
/* 手套滑動易誤判:停用水平滑動手勢 */
body[data-navo-mode="ride"] .pp-chips,
body[data-navo-mode="ride"] #quickBar,
body[data-navo-mode="ride"] #motoChips { overflow-x: hidden; flex-wrap: wrap; touch-action: pan-y; }
/* hover 一律等同 active */
body[data-navo-mode="ride"] .fab:hover, body[data-navo-mode="ride"] .pp-chip:hover { filter: brightness(1.25); }

/* 點地圖後的大浮動選單(取代 RIDE 的長按) */
#mapMenu {
  position: absolute; z-index: 1500; left: 12px; right: 12px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  background: var(--asphalt-700); border: 2px solid var(--asphalt-500);
  border-radius: 18px; padding: 14px; display: none;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .6);
}
#mapMenu.show { display: block; }
#mapMenuTitle { font-size: var(--fs-second); font-weight: 700; color: var(--text-second); margin-bottom: 12px; }
#mapMenu .mm-btn {
  width: 100%; min-height: var(--hit); margin-bottom: var(--hit-gap);
  border: none; border-radius: 14px; background: var(--asphalt-500);
  color: var(--text-primary); font-size: var(--fs-list); font-weight: 700;
}
#mapMenu .mm-btn.primary { background: var(--navo-accent); color: var(--navo-accent-ink); }
#mapMenu .mm-btn:last-child { margin-bottom: 0; }

/* 破壞性動作:按住 0.8 秒 + 進度環(震動中比對話框好按) */
.hold-btn { position: relative; overflow: hidden; }
.hold-btn .hold-ring {
  position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(var(--alert-red) calc(var(--hold, 0) * 360deg), transparent 0);
  opacity: .45; transition: opacity .2s;
}
.hold-btn[data-holding="1"] .hold-ring { opacity: .8; }
.hold-hint { font-size: calc(var(--fs-second) * .78); color: var(--text-second); font-weight: 500; }

/* ============================================================
   騎乘鎖定:>20km/h 持續 10 秒
   ============================================================ */
#lockBtn {
  position: absolute; z-index: 1600; display: none;
  top: 50%; right: 14px; transform: translateY(-50%);
  width: var(--hit); height: var(--hit); border-radius: 50%;
  background: rgba(11, 14, 17, .92); border: 2px solid var(--navo-accent);
  color: var(--navo-accent); font-size: 30px;
  align-items: center; justify-content: center;
}
body.ride-locked #lockBtn { display: flex; }
body.ride-locked #searchWrap,
body.ride-locked #moreBtn,
body.ride-locked #locateBtn,
body.ride-locked #navSheetHandle,
body.ride-locked #preview { pointer-events: none; opacity: .55; }
body.ride-locked #map { pointer-events: none; }
/* 鎖定時仍可用:車隊 / SOS / 結束 */
body.ride-locked #crewBtn, body.ride-locked #sosBtn, body.ride-locked #stopBtn { pointer-events: auto; opacity: 1; }
#lockToast {
  position: absolute; z-index: 1590; left: 50%; transform: translateX(-50%);
  bottom: calc(210px + env(safe-area-inset-bottom));
  background: rgba(11, 14, 17, .94); border: 1px solid var(--navo-accent);
  color: var(--navo-accent); border-radius: 22px; padding: 10px 18px;
  font-size: var(--fs-second); font-weight: 700; display: none;
}
body.ride-locked #lockToast { display: block; }

/* ============================================================
   模式徽章(右上角常駐)
   ============================================================ */
/* 模式徽章縮成 icon-only 小圓鈕(只留車種圖示,不再佔右上角一大條擋畫面);
   搜尋列只讓開一顆圓鈕的寬度 */
body:not(.navigating) #searchBar { margin-right: 54px; }
#modeBadge {
  position: absolute; z-index: 1300; right: 12px;
  top: calc(12px + env(safe-area-inset-top));
  width: 44px; height: 44px; padding: 0;
  border-radius: 50%; background: rgba(20, 20, 30, .85);
  /* 2026-09-02 規格:全域禁黃(黃=RIDE 主題 accent 曾滲進來),統一紫系 */
  border: 2px solid #A78BFA; color: #A78BFA;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
#modeBadge.show { display: flex; }
#modeBadge img { width: 24px; height: 24px; }
/* 車種字樣(DRIVE/RIDE/WALK)收進圖示裡,不再顯示文字條 */
#modeBadge #modeBadgeTx { display: none; }
body.navigating #modeBadge { display: none; }

/* 模式切換二次確認 */
#modeConfirm {
  position: fixed; inset: 0; z-index: 2400; display: none;
  background: rgba(11, 14, 17, .88); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 24px;
}
#modeConfirm.show { display: flex; }
.mc-card {
  width: 100%; max-width: 420px; background: var(--asphalt-700);
  border: 2px solid var(--asphalt-500); border-radius: 20px; padding: 22px;
}
.mc-card h3 { font-size: calc(var(--fs-road) * .72); font-weight: 900; margin-bottom: 8px; }
.mc-card p { font-size: var(--fs-second); color: var(--text-second); margin-bottom: 18px; line-height: 1.5; }
.mc-row { display: flex; gap: var(--hit-gap); }
.mc-row button {
  flex: 1; min-height: var(--hit); border: none; border-radius: 14px;
  font-size: var(--fs-list); font-weight: 700; color: var(--text-primary); background: var(--asphalt-500);
}
.mc-row button.primary { background: var(--navo-accent); color: var(--navo-accent-ink); }

/* ============================================================
   首次啟動:選擇你的載具
   ============================================================ */
#vehicleGate {
  position: fixed; inset: 0; z-index: 2500; display: none;
  background: var(--asphalt-900); overflow-y: auto;
  padding: calc(28px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
}
#vehicleGate.show { display: block; }
#vehicleGate .vg-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
#vehicleGate .vg-brand img { width: 38px; height: 38px; }
#vehicleGate .vg-brand span { font-size: 24px; font-weight: 900; letter-spacing: .04em; }
#vehicleGate h2 { font-size: 30px; font-weight: 900; margin: 18px 0 6px; }
#vehicleGate .vg-sub { font-size: 16px; color: var(--text-second); margin-bottom: 22px; line-height: 1.5; }
.vg-opt {
  display: flex; align-items: center; gap: 14px;
  background: var(--asphalt-700); border: 2px solid var(--asphalt-500);
  border-radius: 18px; padding: 16px; margin-bottom: 14px; min-height: 88px;
}
.vg-opt.sel { border-color: #A78BFA; background: #1c2229; }   /* 全域禁黃 */
.vg-opt img { width: 44px; height: 44px; flex: 0 0 auto; }
.vg-opt .vg-t { font-size: 20px; font-weight: 900; }
.vg-opt .vg-d { font-size: 15px; color: var(--text-second); margin-top: 4px; line-height: 1.45; }
.vg-opt .vg-badge {
  display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 700; background: var(--asphalt-500); color: var(--text-second);
}
.vg-opt .vg-badge.no { background: rgba(255, 45, 45, .18); color: #ff9a9a; }
.vg-opt .vg-badge.part { background: rgba(255, 176, 0, .18); color: #ffd07a; }
#vgGo {
  width: 100%; min-height: 66px; border: none; border-radius: 16px;
  background: var(--navo-accent); color: var(--navo-accent-ink);
  font-size: 20px; font-weight: 900; margin-top: 8px;
}
#vgNote { font-size: 13px; color: var(--text-second); margin-top: 14px; line-height: 1.6; }

/* ============================================================
   FMU 帳號登入門(2026-09-02):蓋在載具門之上(z-index 2600>2500)
   ============================================================ */
#authGate {
  position: fixed; inset: 0; z-index: 2600; display: none;
  background: var(--asphalt-900); overflow-y: auto;
  padding: calc(28px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
  /* 產品標準(09-02):雙版面照 FMU 規格——.ag-panel 是置中直欄 max-width 400px,
     手機滿版、電腦鎖寬置中,同一套 CSS 兩種版面都對 */
  flex-direction: column; align-items: center;
}
#authGate.show { display: flex; }
#authGate > * { width: 100%; max-width: 400px; }
#authGate .vg-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
#authGate .vg-brand img { width: 38px; height: 38px; }
#authGate .vg-brand span { font-size: 24px; font-weight: 900; letter-spacing: .04em; }
#authGate h2 { font-size: 30px; font-weight: 900; margin: 18px 0 6px; }
#authGate .vg-sub { font-size: 16px; color: var(--text-second); margin-bottom: 22px; line-height: 1.5; }
#authGate input {
  width: 100%; min-height: 58px; border-radius: 16px; margin-bottom: 12px;
  background: var(--asphalt-700); border: 2px solid var(--asphalt-500);
  color: inherit; font-size: 18px; padding: 0 16px;
}
#authGate input:focus { border-color: var(--navo-accent); outline: none; }
#agErr { min-height: 22px; font-size: 15px; color: #ff9a9a; margin: 2px 2px 8px; }
#agGo {
  width: 100%; min-height: 66px; border: none; border-radius: 16px;
  background: var(--navo-accent); color: var(--navo-accent-ink);
  font-size: 20px; font-weight: 900;
}
#agGo:disabled { opacity: .6; }
#agNote { font-size: 14px; color: var(--text-second); margin-top: 14px; line-height: 1.7; }
#agNote a { color: var(--navo-accent); }

/* ============================================================
   車種設定面板(可從播報員/更多進入)
   ============================================================ */
#vehiclePanel {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1400;
  background: var(--asphalt-700); border: 2px solid var(--asphalt-500);
  border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  display: none; max-height: 82vh; overflow-y: auto;
}
#vehiclePanel.show { display: block; }
#vehiclePanel .vp-opt {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 2px solid var(--asphalt-500); border-radius: 14px; margin-bottom: 10px; min-height: 76px;
}
#vehiclePanel .vp-opt.sel { border-color: var(--navo-accent); }
#vehiclePanel .vp-opt img { width: 34px; height: 34px; }
#vehiclePanel .vp-t { font-size: var(--fs-list); font-weight: 700; }
#vehiclePanel .vp-d { font-size: calc(var(--fs-second) * .82); color: var(--text-second); margin-top: 3px; }
.vp-meta { font-size: 13px; color: var(--text-second); line-height: 1.6; margin-top: 12px; }
.vp-warn {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 176, 0, .12); border: 1px solid rgba(255, 176, 0, .35);
  color: #ffd07a; font-size: 13px; font-weight: 700; line-height: 1.5;
}

/* ============================================================
   摔車偵測警報(規格 §6.D1)
   畫面只有一顆超大按鈕:摔倒的人手可能在抖、可能戴著手套
   ============================================================ */
#crashAlarm {
  position: fixed; inset: 0; z-index: 3000; display: none;
  background: var(--alert-red);
  flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
  animation: crash-flash 1s steps(2, end) infinite;
}
#crashAlarm.show { display: flex; }
@keyframes crash-flash {
  0%, 100% { background: #FF2D2D; }
  50% { background: #b40000; }
}
#caTitle { font-size: 28px; font-weight: 900; color: #fff; letter-spacing: .04em; }
#caCount {
  font-family: var(--num-font); font-variant-numeric: tabular-nums;
  font-size: 150px; font-weight: 700; color: #fff; line-height: 1; margin: 8px 0;
}
#caDesc { font-size: 17px; font-weight: 700; color: rgba(255, 255, 255, .92); margin-bottom: 28px; line-height: 1.5; }
#caCancel {
  width: 100%; max-width: 420px; min-height: 120px;
  border: 4px solid #fff; border-radius: 22px; background: rgba(0, 0, 0, .32);
  color: #fff; font-size: 32px; font-weight: 900;
}
#caCancel:active { background: #fff; color: var(--alert-red); }
#caInfo { margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, .8); }

/* 掉隊提示條 */
#dropBar {
  position: absolute; z-index: 1450; left: 12px; right: 12px;
  bottom: calc(100px + env(safe-area-inset-bottom));
  background: var(--alert-red); border-radius: 16px; padding: 12px 14px;
  display: none; align-items: center; gap: 10px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .55);
}
#dropBar.show { display: flex; }
#dropBar .db-tx { flex: 1; color: #fff; font-size: var(--fs-second); font-weight: 900; }
#dropBar button {
  min-height: calc(var(--hit) * .72); border: none; border-radius: 12px;
  padding: 0 14px; font-size: calc(var(--fs-second) * .92); font-weight: 700;
  background: #fff; color: #b40000;
}
#dropBar #dbDismiss { background: rgba(0, 0, 0, .3); color: #fff; }

/* ============================================================
   離線與續航面板
   ============================================================ */
#endurancePanel {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1400;
  background: var(--asphalt-700); border: 2px solid var(--asphalt-500);
  border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  display: none; max-height: 82vh; overflow-y: auto;
}
#endurancePanel.show { display: block; }
.en-progress {
  height: 8px; border-radius: 4px; background: var(--asphalt-500);
  margin-top: 10px; overflow: hidden; display: none;
}
.en-progress.show { display: block; }
#enBar { height: 100%; width: 0%; background: var(--navo-accent); transition: width .3s; }

/* 省電模式:關掉會吃 GPU 的裝飾 */
body.power-save .navo-cursor { animation: none !important; }
body.power-save #lightOverlay { display: none; }
body.power-save .cm-halo { display: none; }

/* 隧道模式:自動轉夜間配色 */
body.tunnel .maplibregl-canvas { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.5); }
body.tunnel #hud { border-top-color: var(--amber); }
#tunnelTag {
  position: absolute; z-index: 1260; left: 50%; transform: translateX(-50%);
  top: calc(8px + env(safe-area-inset-top));
  background: rgba(11, 14, 17, .94); border: 1px solid var(--amber);
  color: var(--amber); border-radius: 20px; padding: 6px 14px;
  font-size: calc(var(--fs-second) * .85); font-weight: 700; display: none;
}
body.tunnel #tunnelTag { display: block; }

/* ============================================================
   地圖上的隊員(規格 §6.B6)
   ============================================================ */
.cmk { position: relative; pointer-events: none; width: 46px; height: 46px; }
.cmk-ring {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(11, 14, 17, .94);
  border: 3px solid var(--text-second);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .55);
}
.cmk-veh {
  width: 26px; height: 26px; display: block;
  background: var(--text-second);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* 航向:圖標上方的小三角(外層不轉,名牌永遠水平) */
.cmk-head {
  position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -6px;
  width: 12px; height: 12px; transform-origin: 50% 50%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: var(--text-second);
}
.cmk.lead .cmk-ring { border-color: var(--hi-vis); }
.cmk.lead .cmk-veh, .cmk.lead .cmk-head { background: var(--hi-vis); }
.cmk.dropped .cmk-ring { border-color: var(--alert-red); animation: cmk-blink 1s steps(2, end) infinite; }
.cmk.dropped .cmk-veh, .cmk.dropped .cmk-head { background: var(--alert-red); }
@keyframes cmk-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.cmk.stale { opacity: .4; }
.cmk.offscreen { display: none; }
body.power-save .cmk.dropped .cmk-ring { animation: none; }

.cmk-label {
  position: absolute; left: 50%; top: 50px; transform: translateX(-50%);
  display: none; align-items: baseline; gap: 6px; white-space: nowrap;
  background: rgba(11, 14, 17, .94);
  border: 1px solid rgba(154, 165, 177, .5);
  border-radius: 8px; padding: 3px 8px;
  font-size: calc(var(--fs-second) * .72); font-weight: 700; color: var(--text-primary);
}
.cmk-label.show { display: flex; }
.cmk-label.above { top: auto; bottom: 50px; }
.cmk.lead .cmk-label { border-color: var(--hi-vis); }
.cmk.dropped .cmk-label { border-color: var(--alert-red); }
.cmk-metric {
  font-family: var(--num-font); font-variant-numeric: tabular-nums;
  color: var(--text-second); font-weight: 600;
}
.cmk-age { color: var(--alert-red); font-size: .85em; }

/* 畫面外的隊員:邊緣指示器(團騎時多數隊友都在畫面外,這個比圖標更常用) */
#crewEdges { position: absolute; inset: 0; z-index: 1150; pointer-events: none; }
.cedge {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  background: rgba(11, 14, 17, .94);
  border: 1px solid rgba(154, 165, 177, .55);
  border-radius: 10px; padding: 4px 9px;
  font-size: calc(var(--fs-second) * .72); font-weight: 700; color: var(--text-primary);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
}
.cedge .ce-arrow { color: var(--text-second); font-size: 11px; line-height: 1; }
.cedge .ce-metric { font-family: var(--num-font); font-variant-numeric: tabular-nums; color: var(--text-second); font-weight: 600; }
.cedge.lead { border-color: var(--hi-vis); }
.cedge.lead .ce-arrow { color: var(--hi-vis); }
.cedge.dropped { background: var(--alert-red); border-color: #fff; color: #fff; }
.cedge.dropped .ce-metric, .cedge.dropped .ce-arrow { color: #fff; }

/* ============================================================
   軌跡錄製 / 路線資訊卡
   ============================================================ */
#recBar {
  position: absolute; z-index: 1180; left: 12px; right: 12px;
  top: calc(76px + env(safe-area-inset-top));
  background: rgba(11, 14, 17, .94); border: 2px solid var(--alert-red);
  border-radius: 14px; padding: 8px 12px;
  display: none; align-items: center; gap: 10px;
}
#recBar.show { display: flex; }
#recDot { width: 12px; height: 12px; border-radius: 50%; background: var(--alert-red); animation: cmk-blink 1.2s steps(2, end) infinite; }
#recStat { flex: 1; font-size: var(--fs-second); font-weight: 700; }
#recStat .n { font-family: var(--num-font); font-variant-numeric: tabular-nums; color: var(--navo-accent); }
#recBar button {
  min-height: 40px; border: none; border-radius: 10px; padding: 0 14px;
  font-size: calc(var(--fs-second) * .9); font-weight: 700;
  background: var(--asphalt-500); color: var(--text-primary);
}
#recBar #recStop { background: var(--alert-red); color: #fff; }

.ri-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.ri-cell {
  background: var(--asphalt-500); border-radius: 10px; padding: 8px 10px;
}
.ri-cell .k { font-size: calc(var(--fs-second) * .74); color: var(--text-second); font-weight: 600; }
.ri-cell .v {
  font-family: var(--num-font); font-variant-numeric: tabular-nums;
  font-size: calc(var(--fs-second) * 1.05); font-weight: 700; color: var(--text-primary); margin-top: 2px;
}
.ri-cell .v small { font-family: inherit; font-size: .7em; color: var(--text-second); }
.ri-note { font-size: calc(var(--fs-second) * .72); color: var(--text-second); margin-top: 6px; }

.tk-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--asphalt-500);
}
.tk-item .tk-main { flex: 1; min-width: 0; }
.tk-item .tk-name { font-size: var(--fs-list); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-item .tk-sub { font-size: calc(var(--fs-second) * .78); color: var(--text-second); margin-top: 2px; }
.tk-item button {
  min-height: 40px; border: none; border-radius: 10px; padding: 0 12px;
  background: var(--asphalt-500); color: var(--text-primary);
  font-size: calc(var(--fs-second) * .82); font-weight: 700;
}

/* 隊員狀態列補充(B4)與集合點 */
.cr-batt { font-family: var(--num-font); font-variant-numeric: tabular-nums; }
.cr-batt.low { color: var(--alert-red); font-weight: 900; }
.cr-drop {
  display: inline-block; padding: 1px 6px; border-radius: 6px;
  background: var(--alert-red); color: #fff; font-size: .72em; font-weight: 900;
}
.cr-member.dropped { outline: 1px solid var(--alert-red); outline-offset: -1px; border-radius: 8px; }
.rally-pin {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--navo-accent); color: var(--navo-accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 15px;
  border: 3px solid rgba(11, 14, 17, .9);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .5);
}

/* ============================================================
   3.4 環境模式
   ============================================================ */
/* 陽光模式(RIDE 專屬):純黑底 + 螢光黃綠,亮度拉到最高,關閉 3D 與所有漸層 */
body.sun-mode {
  --asphalt-900: #000000;
  --asphalt-700: #000000;
  --asphalt-500: #2f3a00;
  --text-primary: #ffffff;
  --text-second: #C8FF00;
}
body.sun-mode #hud { background: #000; border-color: var(--hi-vis); border-top-color: var(--hi-vis); }
body.sun-mode #hudDistNum, body.sun-mode #hudRoad, body.sun-mode #hudArrowTxt { color: var(--hi-vis); }
body.sun-mode #hudTurnIc { filter: brightness(0) saturate(100%) invert(88%) sepia(58%) saturate(1200%) hue-rotate(20deg); }
body.sun-mode #hudNextCard { background: #000; border-color: var(--hi-vis); color: var(--hi-vis); }
body.sun-mode #navBar { background: #000 !important; border-top-color: var(--hi-vis); }
body.sun-mode #speedVal { color: var(--hi-vis); }
body.sun-mode .fab { background: #000; border-color: var(--hi-vis); }
body.sun-mode #lightOverlay { display: none; }
body.sun-mode .maplibregl-canvas { filter: contrast(1.25) brightness(1.15) saturate(.75); }
body.sun-mode #searchBtn, body.sun-mode .btn-go { background: var(--hi-vis) !important; color: #101400 !important; }

/* 雨天模式:命中區加大 20%、指引卡加一行路面濕滑 */
body.rain-mode { --hit: calc(var(--hit-base, 52px) * 1.2); }
body.rain-mode[data-navo-mode="ride"] { --hit: 106px; }
body.rain-mode .fab { width: var(--hit); height: var(--hit); }
body.rain-mode .pp-chip, body.rain-mode .btn, body.rain-mode .cr-btn { min-height: var(--hit); }
#wetTag {
  display: none; margin-top: 4px;
  font-size: calc(var(--fs-second) * .9); font-weight: 900; color: #cfe9ff;
}
body.rain-mode #wetTag { display: block; }

/* EXPLORE:RIDE 單卡模式 + 營業狀態 */
.ex-open { color: #6be3a8; font-weight: 900; }
.ex-closed { color: var(--text-second); }
#exResults.ex-single .ex-item { min-height: 96px; font-size: var(--fs-list); }
.ex-nav { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ex-nav button {
  flex: 1; min-height: var(--hit); border: none; border-radius: 14px;
  background: var(--asphalt-500); color: var(--text-primary); font-size: 30px; font-weight: 900;
}
.ex-nav button:active { background: var(--navo-accent); color: var(--navo-accent-ink); }
.ex-nav-n {
  font-family: var(--num-font); font-variant-numeric: tabular-nums;
  font-size: var(--fs-second); font-weight: 700; color: var(--text-second); min-width: 56px; text-align: center;
}

/* ============================================================
   Google Maps 整合(選用):搜尋建議署名 + 鎖定樣式提示
   ============================================================ */
.r-g-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px; margin-right: 6px;
  background: #4285F4; color: #fff; font-size: 11px; font-weight: 900; vertical-align: middle;
}
.r-g-attr {
  padding: 8px 16px; font-size: 12px; color: var(--text-second, var(--ink3));
  border-top: 1px solid rgba(154, 165, 177, .25); text-align: right;
}
.pp-chip.locked { opacity: .55; }

/* TDX 即時停車:額滿標紅 */
.ex-item.ex-full .rt-sub b { color: var(--alert-red, #ff7b70); }

/* 路權提示(路線預覽面板內) */
.pv-rights {
  margin-top: 8px; padding: 9px 12px; border-radius: 10px;
  font-size: calc(var(--fs-second) * .88); font-weight: 700; line-height: 1.45;
  background: rgba(154, 165, 177, .14); color: var(--text-second);
}
.pv-rights.warn { background: rgba(255, 176, 0, .14); border: 1px solid rgba(255, 176, 0, .4); color: #ffd07a; }
.pv-rights.bad { background: rgba(255, 45, 45, .16); border: 1px solid rgba(255, 45, 45, .5); color: #ff9a9a; }

/* ============================================================
   無障礙:鍵盤焦點 / 減少動態
   ============================================================ */
button:focus-visible, .pp-chip:focus-visible, .chip:focus-visible,
.result-item:focus-visible, .more-item:focus-visible, .vg-opt:focus-visible, input:focus-visible {
  outline: 3px solid var(--navo-accent);
  outline-offset: 2px;
  border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ============================================================
   手機版面(≤640px):對齊 FMU 手機格式(2026-09-02)
   FMU 慣例:貼邊 16px、大圓鍵 44px、次要功能收進選單、
   底部面板圓角 20 / 82dvh、safe-area 用 calc(env()+N)。
   RIDE 的 88px 手套規格 specificity 更高,不受此段影響。
   ============================================================ */
@media (max-width: 640px) {
  /* FMU 手法:主畫面只留核心鈕,次要功能(播報員/路況/路線/探索)收進側欄 */
  body:not(.navigating) #personaBtn,
  body:not(.navigating) #trafficBtn,
  body:not(.navigating) #routesBtn,
  body:not(.navigating) #exploreBtn { display: none; }

  /* 圖示鍵:FMU 大圓鍵 44px、貼邊 16px、56px 步進(原 52px×9 顆佔掉大半個螢幕) */
  /* 2026-09-02 UI 規格:52px 鈕、12px 間距(64 步進)、深色底、啟用=實心紫 */
  .fab { width: 52px; height: 52px; font-size: 22px; background: rgba(20, 20, 30, .85); }
  .fab img.ic { width: 24px; height: 24px; }
  .navo-icon-button.selected { background: #7C6CF0; border-color: #A78BFA; }
  body.in-crew #crewBtn { background: #7C6CF0; border-color: #A78BFA; }
  /* SOS:紅只留在描邊(狀態意義),不再整顆實心紅 */
  #sosBtn { background: rgba(20, 20, 30, .85); border-color: #ff6b6b; box-shadow: none; }
  #locateBtn { right: 16px; bottom: calc(env(safe-area-inset-bottom) + 96px); }
  #nightBtn  { right: 16px; bottom: calc(env(safe-area-inset-bottom) + 160px); }
  #tiltBtn   { right: 16px; bottom: calc(env(safe-area-inset-bottom) + 224px); font-size: 15px; }
  /* crewBtn 原始樣式為了徽章用了 position:relative,會讓 bottom 變相對偏移飛出畫面,這裡改回 absolute */
  #crewBtn   { position: absolute; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 288px); }
  #sosBtn    { right: 16px; bottom: calc(env(safe-area-inset-bottom) + 352px); }
  #sosBtn img { width: 24px; height: 24px; }
  /* 「更多」鈕上主畫面(P0-1):最上位=最少用位置 */
  /* RIDE 排除:它有自套 88px 鈕陣與自己的更多鈕位,這條會疊到 SOS(覆核#1)*/
  body:not(.navigating):not([data-navo-mode="ride"]) #moreBtn { display: flex; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 416px); }

  /* 最近搜尋/常用 chips 不再常駐佔地圖(P0-2):聚焦搜尋框才在結果列表看到最近 */
  body:not(.navigating) #quickBar { display: none; }

  /* DRIVE/WALK 導航中(此時圖層/3D 等已被藏,剩 定位/更多/探索/車隊/SOS):64 步進 */
  body.navigating #locateBtn { bottom: calc(env(safe-area-inset-bottom) + 150px); }
  body[data-navo-mode="drive"].navigating #moreBtn,
  body[data-navo-mode="walk"].navigating #moreBtn { right: 16px; bottom: calc(env(safe-area-inset-bottom) + 214px); }
  body[data-navo-mode="drive"].navigating #exploreBtn { display: flex; bottom: calc(env(safe-area-inset-bottom) + 278px); }
  body.navigating #crewBtn { bottom: calc(env(safe-area-inset-bottom) + 342px); }
  body.navigating #sosBtn { bottom: calc(env(safe-area-inset-bottom) + 406px); }

  /* 搜尋列:貼邊 16、輸入 16px(iOS 聚焦不再自動放大)、搜尋鈕收成 FMU 膠囊尺寸 */
  #searchWrap { left: 16px; right: 16px; top: calc(env(safe-area-inset-top) + 12px); }
  #searchBar { border-radius: 18px; padding: 4px 4px 4px 8px; }
  #searchInput { font-size: 16px; padding: 7px 6px; }
  #searchBtn { padding: 8px 14px; font-size: 14px; border-radius: 14px; }
  #brandMark { width: 24px; height: 24px; }
  .result-item { padding: 11px 16px; }
  .result-item .r-name { font-size: 15px; }
  .result-item .r-detail { font-size: 12.5px; }

  /* 模式徽章跟著縮 */
  #modeBadge { width: 40px; height: 40px; }
  #modeBadge img { width: 22px; height: 22px; }
  body:not(.navigating) #searchBar { margin-right: 50px; }

  /* 面板:FMU bottom sheet 規格(貼邊 16、圓角 20、最高 82dvh) */
  #preview, #sosPanel, #explorePanel, #routesPanel, #crewPanel,
  #mapPanel, #personaPanel, #vehiclePanel, #endurancePanel {
    left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 12px);
    border-radius: 20px; max-height: 82dvh;
  }
  .pp-head { font-size: 17px; }

  /* 導航底部列與 HUD 貼邊 16 */
  #navBar, #hud { left: 16px; right: 16px; }
  #navBar { bottom: calc(env(safe-area-inset-bottom) + 12px); }
}