/* 公開網站共用導覽列（地圖／變化／舖位／關於）。色板喺 theme.css，呢度只寫版面。
   四個公開頁（index/changes/unit/about）共用呢份，巡街 PWA／釘位工具唔用。 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: -apple-system, "PingFang HK", "Noto Sans TC", system-ui, sans-serif;
  font-size: 16px; /* 明確寫死，等於改之前嘅瀏覽器預設值，375px 睇落完全冇變 */
}

#site-nav {
  display: flex; align-items: center; gap: 2px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: max(8px, env(safe-area-inset-top)) 8px 8px;
  overflow-x: auto; flex: 0 0 auto;
  /* ⚠️ z-index 要高過地圖頁嘅 #control-panel／#btn-toggle-controls（兩個都係 1000，見 map.css）
     ——原本 900，結果「篩選」面板彈開會蓋住成條頂欄，連帳號選單個入口都撳唔到
     （2026-08-19 使用者回報）。1050 夾喺中間：高過地圖控制項，低過兩個彈出選單（1100）。 */
  position: sticky; top: 0; z-index: 1050;
}
#site-nav .nav-brand {
  font-weight: 800; font-size: 14px; color: var(--accent);
  padding: 8px 10px 8px 6px; white-space: nowrap; flex: 0 0 auto;
}
#site-nav a, #site-nav span.nav-disabled {
  display: inline-block; white-space: nowrap; font-size: 14px; font-weight: 600;
  padding: 8px 12px; border-radius: 999px; text-decoration: none; color: var(--muted);
  flex: 0 0 auto;
}
#site-nav a:hover { color: var(--text); }
#site-nav a.active { background: var(--accent); color: var(--on-solid); }
#site-nav span.nav-disabled { color: var(--line); cursor: default; }

/* 記錄者登入入口（2026-08-08，見 common.js slInjectAuthNavButton）：
   由 JS 動態加喺 #site-nav 尾，靠 margin-left:auto 谷去成行最右——電腦頂部 nav 就係右上角。
   一直用 accent 底色（唔跟返 .active 嗰種「淨係揀緊嗰頁先變色」邏輯），等佢睇落係個獨立
   嘅行動掣（登入／入口），唔係普通導覽連結。 */
#site-nav .nav-auth-btn {
  margin-left: auto; background: var(--accent); color: var(--on-solid);
}
#site-nav .nav-auth-btn:hover { color: var(--on-solid); opacity: .9; }

.site-main { flex: 1 1 auto; min-height: 0; }

/* 大部分公開頁用同一個「文件型」版面：置中欄，手機全寬 */
.doc-wrap { max-width: 720px; margin: 0 auto; padding: 18px 16px 40px; }
.doc-wrap h1 { font-size: 22px; margin: 4px 0 4px; }
.doc-wrap h2 { font-size: 17px; margin: 26px 0 8px; color: var(--accent); }
.doc-wrap p { line-height: 1.7; }
.doc-wrap .lead { color: var(--muted); font-size: 14px; margin-bottom: 18px; }

.site-app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

@media (max-width: 480px) {
  #site-nav .nav-brand { display: none; }
}

/* ---------- 手機（≤480px）：頂部 nav 改做底部 fixed tab bar ----------
   桌面（≥1024px，見下面另一個 media block）維持頂部橫向 nav，唔郁。
   六個公開頁（含 about/stats/metrics）共用呢份 nav.css，淨係改呢個檔就令全部頁面
   一致變成底部 tab bar，唔使逐頁加標記。
   ⚠️ 2026-08-13 使用者要求全站唔要裝飾性 emoji 圖示，原本靠 `a[href="..."]::before`
   落嘅 🗺️📋ℹ️📊👤 已經全部移除——tab 純文字。唔好加返。
   獲准保留嘅例外（使用者逐個拍板）：「☰ 清單」、「⚙ 篩選」、stats/metrics 嘅 ⚠ 警示。
   （順帶執走一個坑：`href="/"` 嗰條規則會誤中場域選單入面嘅「平台首頁」，
   令佢無端端多咗個 🗺️。） */
@media (max-width: 480px) {
  #site-nav {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    justify-content: space-around; align-items: stretch;
    border-bottom: none; border-top: 1px solid var(--line);
    box-shadow: 0 -1px 6px rgba(58,46,32,.15);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    overflow-x: visible;
  }
  /* 2026-08-08 使用者實測反映字太細、掣太細撳唔中，所以要夠大嘅 tap target。
     2026-08-13 移除 emoji 之後冇咗 22px 圖示嗰行高度，用 padding ＋ 字級補返：
     16 + 14 + 13×1.2 ≈ 46px，仍然過到 iOS/Android 建議嘅 44-48px 下限。
     字級揀 13px 唔揀再大：底部有 6 個 tab（場域／地圖／本月變化／關於／數據分析／登入），
     iPhone SE 375px 闊度下每格淨返約 55px，四個中文字 ×13px = 52px 啱啱唔換行；
     再大就會斷成兩行，成條 bar 高一截。改字級前先計返呢條數。 */
  #site-nav a, #site-nav span.nav-disabled {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 16px 3px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; line-height: 1.2;
    white-space: normal; text-align: center;
  }
  /* margin-left 喺呢個 space-around 嘅底部 bar 冇意義（重設走），等登入掣做返
     最右嗰個 tab，唔會扯歪晒其他掣嘅間距。 */
  #site-nav a.nav-auth-btn { margin-left: 0; }

  /* 文件型頁面（changes/unit/about/stats/metrics）用 .doc-wrap 留底部空間，避免俾 tab bar 遮住最後內容
     （tab bar 加大咗，呢個底部預留空間跟住加） */
  .doc-wrap { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }

  /* 地圖頁（index.html）唔用 .doc-wrap，係全螢幕 #map-page——用高特異性選擇器
     （1 個 id + 1 個 class，蓋過 map.css 嗰句淨 #map-page）留返 tab bar 高度，
     等 Leaflet 縮放掣／地圖底部唔會俾 tab bar 蓋住。 */
  #map-page.site-main { padding-bottom: calc(68px + env(safe-area-inset-bottom)); box-sizing: border-box; }
}

/* ---------- 桌面：文件型頁面（changes/stats/metrics/about/unit）收細字＋限制行長 ---------- */
@media (min-width: 1024px) {
  body { font-size: 15px; }
  #site-nav { padding: 10px 20px; }

  .doc-wrap { max-width: 820px; padding: 32px 16px 56px; }
  .doc-wrap h1 { font-size: 20px; }
  .doc-wrap h2 { font-size: 16px; margin: 30px 0 10px; }
  .doc-wrap p { line-height: 1.8; }
  .doc-wrap .lead { font-size: 13.5px; }
}

/* ---------- 記錄工具選單（2026-08-11，見 common.js slBuildToolsMenu） ----------
   撳 👤 掣展開。全部選擇器都要 #site-nav 前綴：menu 係 #site-nav 嘅子元素，
   上面 `#site-nav a`（1 id + 1 type）特異性高過單 class，唔加前綴會俾佢哋蓋過——
   尤其手機嗰個 media block 幫 `#site-nav a` 落咗 flex:1/column，唔覆蓋就會爆版。
   用 position:fixed 而唔係相對 nav 定位：nav 喺手機係 fixed 底部 bar、桌面係 sticky
   頂部，兩種情況 containing block 唔同，fixed ＋ 明確 top/bottom 最穩陣。 */
.nav-tools-menu {
  /* z-index 要高過地圖頁嘅 #control-panel／#btn-toggle-controls（兩個都係 1000，見 map.css）
     ——原本用 950，喺地圖頁彈出嚟會俾篩選面板壓住一大截（2026-08-11 實測踩到）。 */
  display: none; position: fixed; z-index: 1100;
  top: 58px; right: 12px;
  flex-direction: column; gap: 2px;
  min-width: 180px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 6px 24px rgba(58, 46, 32, .22);
}
.nav-tools-menu.open { display: flex; }
.nav-tools-menu .nav-tools-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 11px 12px;
  border: 0; border-radius: 10px; background: none;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  color: var(--text); text-align: left; text-decoration: none;
  white-space: nowrap; cursor: pointer; flex: 0 0 auto;
}
.nav-tools-menu .nav-tools-item:hover { background: var(--bg); color: var(--text); }
.nav-tools-menu .nav-tools-logout {
  margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px;
  color: var(--muted); justify-content: center;
}

@media (max-width: 480px) {
  /* 手機：由底部 tab bar 上面彈出，左右留邊做成一塊闊卡（單手撳得中） */
  .nav-tools-menu {
    top: auto; bottom: calc(70px + env(safe-area-inset-bottom));
    left: 8px; right: 8px; min-width: 0;
  }
  /* 蓋返上面 `#site-nav a` 喺手機嘅 column flex／置中／細字，選單要保持橫向一行一項 */
  .nav-tools-menu .nav-tools-item {
    flex-direction: row; justify-content: flex-start; text-align: left;
    font-size: 16px; padding: 12px 14px; min-height: 48px;
  }
  .nav-tools-menu .nav-tools-item::before { content: none; }
  .nav-tools-menu .nav-tools-logout { justify-content: center; }
}

@media (min-width: 1024px) { .nav-tools-menu { top: 62px; right: 20px; } }

/* ---------- 場域切換選單（2026-08-12，見 common.js slInjectVenueSwitcher） ----------
   撳左上 brand（#site-nav .nav-brand，或者 platform.html 冇 #site-nav 嘅 .platform-brand）
   展開。同 .nav-tools-menu 一樣用 fixed 定位、.open 顯示，但擺喺左邊（tools menu 喺右邊）
   ——一左一右，兩個唔可以同時開（協調邏輯見 common.js slToggleNavMenu／slOpenNavMenu）。
   呢個檔 platform.html 都有引用（先叫 nav.css 套呢一節樣式），detail 見 platform.html
   嘅 <link> 註解。 */
.nav-venue-trigger { cursor: pointer; }
.nav-venue-trigger::after {
  content: '▾'; margin-left: 4px; font-size: 12px; opacity: .6;
}

.nav-venue-menu {
  display: none; position: fixed; z-index: 1100;
  top: 58px; left: 12px;
  flex-direction: column; gap: 2px;
  min-width: 200px; max-width: 280px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 6px 24px rgba(58, 46, 32, .22);
}
.nav-venue-menu.open { display: flex; }
.nav-venue-loading { padding: 12px; font-size: 14px; color: var(--muted); }
.nav-venue-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 11px 12px;
  border: 0; border-radius: 10px; background: none;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  color: var(--text); text-align: left; text-decoration: none;
  white-space: nowrap; cursor: pointer;
}
.nav-venue-item:hover { background: var(--bg); color: var(--text); }
.nav-venue-item.active { color: var(--accent); }
.nav-venue-check { margin-left: auto; color: var(--accent); font-weight: 800; flex: 0 0 auto; }

/* ⚠️ 呢組 #site-nav 前綴嘅覆蓋唔准刪（同 .nav-tools-menu 嗰組同一原理，見上面註解）：
   .nav-venue-item 係 #site-nav 入面嘅 <a>，會俾 `#site-nav a`（id+type，特異性高過
   單 class）搶走排版同顏色。2026-08-13 手機實測踩過：選單每項變成上下排、撐到成格咁高，
   文字仲要繼承咗頂欄嘅淺金色 --topbar-fg-dim，喺淺色選單底上等於隱形，睇落似「彈錯位」。
   `#site-nav .nav-venue-item` = (1,1,0) > `#site-nav a` = (1,0,1)，所以呢組贏，
   亦唔使喺下面手機 media 再寫多次。 */
#site-nav .nav-venue-item {
  flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 10px; padding: 11px 12px; border-radius: 10px;
  font-size: 15px; font-weight: 600; line-height: 1.2;
  text-align: left; white-space: nowrap; color: var(--text);
}
#site-nav .nav-venue-item:hover { color: var(--text); }
#site-nav .nav-venue-item.active { color: var(--accent); }
#site-nav .nav-venue-loading { color: var(--muted); }

/* F1（2026-08-13）：「籌備中」標籤＋「＋提議新場域」項 */
.nav-venue-prep {
  margin-left: 8px; flex: 0 0 auto;
  font-size: 12px; font-weight: 700; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
}
.nav-venue-propose { border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
.nav-venue-propose .nav-venue-name { color: var(--muted); font-weight: 600; }

@media (max-width: 480px) {
  /* 手機：由頂部彈出（brand 喺 ≤480px 嘅場域頁被隱藏，改由底部 .nav-venue-tab 觸發，
     但選單本身照舊靠近底部 tab bar 彈出，方便單手撳——同 .nav-tools-menu 手機版一致做法）。 */
  .nav-venue-menu {
    top: auto; bottom: calc(70px + env(safe-area-inset-bottom));
    left: 8px; right: 8px; min-width: 0; max-width: none;
  }
}

@media (min-width: 1024px) { .nav-venue-menu { top: 62px; left: 20px; } }

/* 手機底部 tab bar 嘅「場域」掣：#site-nav .nav-brand 喺 ≤480px 隱藏咗，撳唔到，
   要補呢個掣（見上面第 51-53 行 .nav-brand{display:none}）。桌面／平板隱藏（brand
   本身撳得到，唔使多一粒重複嘅掣）。要用 #site-nav 前綴先蓋得過通用 `#site-nav a`
   （id+class > id+type，同 .nav-tools-menu 嗰段註解講嘅原理一樣）。 */
#site-nav .nav-venue-tab { display: none; }
@media (max-width: 480px) {
  /* ⚠️ 顏色要用 --topbar-fg-dim 唔用 --muted：呢粒掣坐喺深墨底嘅 tab bar 上面，
     --muted 係淺底主題嘅深啡灰，喺墨底上對比度唔夠（2026-08-13 手機截圖見到佢
     明顯比隔籬幾個 tab 暗）。--topbar-fg-dim 先係頂欄自己嗰套前景色。 */
  #site-nav .nav-venue-tab { display: flex; color: var(--topbar-fg-dim); }
}

/* ============================================================
   場域主題頂欄（2026-08-12）
   街舖＝墨招牌（深墨底＋銅金字＋紅印章）；商場＝白底＋藍綠漸變飾邊。
   兩者共用同一份結構，靠 theme.css 嘅 --topbar-* 變數切換，
   再加下面呢啲場域專屬裝飾。
   ============================================================ */
#site-nav {
  /* 紙皮石飾帶用 background 疊喺頂欄底部，唔用 ::after 伸出去——
     #site-nav 有 overflow-x:auto，CSS 規定 overflow-y 會跟住變 auto，
     伸出框外嘅 ::after 會俾佢剪走（2026-08-12 踩過）。
     ⚠️ 唔准喺呢度寫 position：原本嘅 sticky 要保住，寫 relative 會蓋死佢。 */
  background: var(--mosaic) repeat-x bottom / auto 20px, var(--topbar-bg);
  border-bottom: none;
  padding-bottom: 26px;
  box-shadow: inset 0 -20px 3px -19px rgba(0,0,0,.25);
}
#site-nav .nav-brand { color: var(--topbar-fg); }
#site-nav a { color: var(--topbar-fg-dim); }
#site-nav a:hover { color: var(--topbar-active); }
#site-nav a.active {
  background: transparent; color: var(--topbar-active);
  border-radius: 0; box-shadow: inset 0 -3px 0 var(--topbar-underline);
}

/* 商場：冇紙皮石，改用藍綠漸變飾邊；印章換成圓角、唔傾斜 */
.venue-mall #site-nav {
  background: var(--topbar-bg);      /* 蓋走紙皮石 */
  padding-bottom: 8px;
  border-bottom: 4px solid;
  border-image: var(--topbar-band) 1;
  box-shadow: none;
}
.venue-mall #site-nav a.active { box-shadow: inset 0 -3px 0 var(--topbar-underline); }

@media (max-width: 480px) {
  /* 手機底部 tab bar：飾帶改貼喺 bar 頂邊（背景位置由 bottom 改 top） */
  #site-nav {
    background: var(--mosaic) repeat-x top / auto 14px, var(--topbar-bg);
    padding-top: 18px; padding-bottom: calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -1px 6px rgba(58,46,32,.15);
  }
  .venue-mall #site-nav { background: var(--topbar-bg); padding-top: 4px; }
}

/* 商場卡片：右上角水波紋（token 冇呢樣，所以留喺呢度）。
   ⚠️ 卡片嘅圓角／陰影／左邊墨條、標籤形狀，全部由 theme.css 嘅版式 token 話事，
   唔好喺呢度重複定義，否則兩邊打交。 */
.venue-mall .stage-card,
.venue-mall .history-item,
.venue-mall .mall-unit-card { position: relative; overflow: hidden; }
.venue-mall .stage-card::after,
.venue-mall .history-item::after,
.venue-mall .mall-unit-card::after {
  content: ""; position: absolute; right: -30px; top: -30px;
  width: 104px; height: 104px; border-radius: 50%;
  border: 13px solid rgba(55, 181, 164, .08);
  box-shadow: 0 0 0 13px rgba(79, 179, 208, .05);
  pointer-events: none;
}

/* ============================================================
   手機頂帶（2026-08-12）
   手機版 #site-nav 係底部 tab bar，brand 隱藏，頂部本身乜都冇——
   即係主題重點（墨底＋銅金字＋紙皮石）喺手機完全見唔到。
   所以另外加一條幼身頂帶：場域名 ＋ 紙皮石飾帶，高度細，唔搶內容空間。
   由 common.js slInjectMobileTopbar() 注入（同一個 brand 名同切換行為）。
   ============================================================ */
.mobile-topbar { display: none; }

@media (max-width: 480px) {
  .mobile-topbar {
    display: flex; align-items: center;
    position: sticky; top: 0; z-index: 890;
    padding: max(6px, env(safe-area-inset-top)) 14px 0;
    min-height: 42px;
    background: var(--mosaic) repeat-x bottom / auto 10px, var(--topbar-bg);
    padding-bottom: 12px;
  }
  .mobile-topbar .mt-brand {
    font-size: 15px; font-weight: 800; color: var(--topbar-fg);
    background: none; border: 0; padding: 0; font-family: inherit;
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  }
  .mobile-topbar .mt-brand::after { content: '▾'; font-size: 12px; opacity: .65; }

  /* 商場：冇紙皮石，改用藍綠飾邊 */
  .venue-mall .mobile-topbar {
    background: var(--topbar-bg);
    padding-bottom: 6px;
    border-bottom: 3px solid;
    border-image: var(--topbar-band) 1;
  }
}

/* ---------- 印章（2026-08-12）----------
   brand 前面「舖」、卡片右上角「記」。淨係街舖場域出現。 */
#site-nav .nav-brand::before,
.mobile-topbar .mt-brand::before {
  content: ""; display: inline-block; flex: 0 0 auto;
  width: 24px; height: 24px; margin-right: 7px; vertical-align: -5px;
  background: var(--seal-brand) center/contain no-repeat;
  transform: rotate(-5deg);
}
.venue-mall #site-nav .nav-brand::before,
.venue-mall .mobile-topbar .mt-brand::before { content: none; }

/* 卡片角落「記」：只落喺經營階段卡（唔好每張卡都蓋，會太吵） */
.venue-street .stage-card { position: relative; }
.venue-street .stage-card::before {
  content: ""; position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; pointer-events: none;
  background: var(--seal-note) center/contain no-repeat;
  transform: rotate(6deg); opacity: .9;
}
/* 印章唔好壓住標題文字 */
.venue-street .stage-header { padding-right: 44px; }

/* 貢獻榜連結（2026-08-19）：擺喺登入掣左邊。用 margin-left:auto 谷去右——
   ⚠️ 原本 .nav-auth-btn 都有 margin-left:auto，兩個都有嘅話第二個唔會再谷，
   所以呢度攞返個 auto、登入掣嗰邊改用固定 gap。 */
#site-nav .nav-lb-link { margin-left: auto; }
#site-nav .nav-lb-link + .nav-auth-btn { margin-left: 4px; }
@media (max-width: 480px) {
  #site-nav .nav-lb-link { margin-left: 0; }
  #site-nav .nav-lb-link + .nav-auth-btn { margin-left: 0; }
}

/* ---------- 輕頂欄（2026-08-19 由 platform.css 搬過嚟） ----------
   /leaderboard、/profile、/wish、/wishes 都用呢條頂欄，但佢哋只引 nav.css 唔引 platform.css，
   所以之前成條頂欄冇樣式（使用者回報「頂欄好像爛咗」）。共用嘢就要放喺共用檔案。
   ⚠️ 呢個頂欄特登唔用 #site-nav：嗰個喺 ≤480px 會變底部 tab bar，呢啲頁唔需要。 */
.platform-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.platform-brand { font-weight: 800; font-size: 16px; color: var(--accent); text-decoration: none; }
.platform-brand em { font-style: normal; font-weight: 600; font-size: 13px; opacity: .7; }
.platform-login {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px;
  border-radius: 999px; background: var(--accent); color: var(--on-solid);
  font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.platform-login:active { opacity: .85; }
@media (min-width: 1024px) { .platform-top { padding: 12px 24px; } }

/* 頂欄導覽掣（2026-08-19 建，2026-08-21 由 platform.css 搬過嚟）。
   ⚠️ 一定要放喺呢個共用檔：`slInjectPlatformNav()`（common.js）係共用函數，
   邊個頁 call 都會注入 .pnav-item，樣式擺喺 platform.css 就等於
   「唔載 platform.css 嗰啲頁頂欄爛晒」——/start 上線即刻中過一次。 */
.pnav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; flex-wrap: wrap; }
.pnav-item {
  font: inherit; font-size: 14px; font-weight: 600;
  background: none; border: 0; cursor: pointer; text-decoration: none;
  color: var(--muted); padding: 8px 11px; border-radius: 999px; min-height: 40px;
  display: inline-flex; align-items: center; white-space: nowrap;
}
.pnav-item:hover { color: var(--text); background: var(--panel); }
.pnav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 560px) {
  .pnav { order: 3; width: 100%; gap: 0; justify-content: space-between; overflow-x: auto; }
  .pnav-item { padding: 8px 7px; font-size: 13px; }
}

/* ⚠️ #site-nav 專用防污染（2026-08-19 把選單選擇器由 `#site-nav .nav-tools-menu`
   拆做 `.nav-tools-menu` 之後要明寫返）：平台首頁冇 #site-nav 但都要用同一個工具選單
   （之前首頁撳自己個名淨係跳得去 /survey，揀唔到其他工具）。
   而喺場域頁，`#site-nav a`（id+type）特異性高過 `.nav-tools-item`（單 class），
   會搶走選單項目嘅排版同顏色——手機嗰個 media block 仲會落 flex:1／column，直情爆版。
   同 .nav-venue-item 嗰組完全同一原理，唔准刪。 */
#site-nav .nav-tools-menu .nav-tools-item {
  flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 10px; padding: 11px 12px; border-radius: 10px;
  font-size: 15px; font-weight: 600; line-height: 1.2;
  text-align: left; white-space: nowrap; color: var(--text);
}
#site-nav .nav-tools-menu .nav-tools-item:hover { color: var(--text); }
#site-nav .nav-tools-menu .nav-tools-logout { color: var(--muted); justify-content: center; }

/* 首頁頂欄矮啲，選單貼近少少 */
.platform-top .nav-tools-menu, .platform-top .nav-venue-menu { top: 54px; }

/* 場域選單按生活圈分組（P2，2026-09-13）。得一個生活圈嗰陣唔 render 呢個標題。 */
.nav-venue-group {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); padding: 9px 14px 3px;
  border-top: 1px solid var(--line); margin-top: 4px;
}
.nav-venue-menu > .nav-venue-group:first-child { border-top: 0; margin-top: 0; }