:root {
  /* 1. 統一超商企業品牌色系 (Brand & Primary Action) */
  --pcsc-green: #007350;
  --pcsc-green-hover: #005a3e;
  --pcsc-green-light: #e6f4ea;
  --pcsc-orange: #ff6c00;
  --pcsc-orange-hover: #ea580c;
  --pcsc-orange-light: #fff3e0;
  --pcsc-red: #ec0f2a;
  --pcsc-red-light: #fce8e6;

  /* 2. 業務決策三態色 (Strict Decision Semantics) */
  --color-status-success: #059669;
  --color-status-success-bg: #ecfdf5;
  --color-status-success-border: #a7f3d0;
  --color-status-warning: #d97706;
  --color-status-warning-bg: #fffbeb;
  --color-status-warning-border: #fde68a;
  --color-status-danger: #dc2626;
  --color-status-danger-bg: #fef2f2;
  --color-status-danger-border: #fecaca;

  /* 3. GIS 空間中性色系 (Modern Slate Hierarchy) */
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;

  /* 文字與基底 */
  --text-primary: var(--slate-900);
  --text-secondary: var(--slate-600);
  --text-muted: var(--slate-400);
  --border-color: rgba(226, 232, 240, 0.65);

  /* 次世代 Liquid Glass 磨砂玻璃擬態標準 (極致高透光 0.48、鏡面光澤反光、環境景深微光) */
  --glass-bg: rgba(255, 255, 255, 0.48);
  --glass-bg-subtle: rgba(255, 255, 255, 0.28);
  --glass-border: rgba(255, 255, 255, 0.70);
  --glass-blur: 24px;
  --glass-saturate: 200%;
  --glass-shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.03), inset 0 1px 1px 0 rgba(255, 255, 255, 0.85);
  --glass-shadow-hover: 0 16px 36px -4px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.04), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95);

  /* 圓角弧度規範 (Unified Radius Scale) */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* 4px / 8px 模組化間距系統 (Modular Spacing Scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* 字級模組化階梯 (Modular Type Scale) */
  --font-size-xs: 0.75rem;    /* 12px: 附註、狀態標籤、計數器 */
  --font-size-sm: 0.8125rem;  /* 13px: 次要描述、表格內容、標籤 */
  --font-size-base: 0.875rem; /* 14px: 正文、標準按鈕、輸入框 */
  --font-size-md: 1rem;       /* 16px: 面板小標、分組標籤 */
  --font-size-lg: 1.125rem;   /* 18px: 卡片標題 */
  --font-size-xl: 1.5rem;     /* 24px: 首頁大標題、重大指標數值 */

  /* 陰影階層規範 (Unified Elevation Hierarchy) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 2px 6px -1px rgba(15, 23, 42, 0.08), 0 1px 4px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 10px 25px -4px rgba(15, 23, 42, 0.09), 0 3px 8px -2px rgba(15, 23, 42, 0.03);
  --shadow-floating: 0 14px 34px -4px rgba(15, 23, 42, 0.14), 0 4px 10px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 48px -8px rgba(15, 23, 42, 0.22), 0 8px 16px -4px rgba(15, 23, 42, 0.08);
}

/* 次世代深色模式主題 (Dark Mode - 透光磨砂深色液態玻璃) */
body.dark-mode {
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --border-color: rgba(255, 255, 255, 0.1);
  --glass-bg: rgba(15, 23, 42, 0.52);
  --glass-bg-subtle: rgba(15, 23, 42, 0.30);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-blur: 24px;
  --glass-saturate: 200%;
  --glass-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.55), 0 4px 12px -2px rgba(0, 0, 0, 0.35), inset 0 1px 1px 0 rgba(255, 255, 255, 0.16);
  --glass-shadow-hover: 0 20px 42px -6px rgba(0, 0, 0, 0.65), 0 6px 16px -2px rgba(0, 0, 0, 0.45), inset 0 1px 1px 0 rgba(255, 255, 255, 0.22);
  background-color: #0b0f19;
  color: #f8fafc;
}

/* Lucide SVG 圖標全域風格統整 */
.lucide, i[data-lucide] {
  width: 1.1em;
  height: 1.1em;
  stroke-width: 2px;
  vertical-align: -0.16em;
  display: inline-block;
  flex-shrink: 0;
}

/* 方案 A: 圓角彩色微底色徽章 (Duotone Icon Badges) */
.card-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.card-icon svg, .card-icon.lucide {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2.2px !important;
}

/* 多彩語意微底色定義 (色彩前注意識別) */
.icon-emerald {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}
.icon-orange {
  background: #fff7ed !important;
  color: #c2410c !important;
  border: 1px solid #fed7aa !important;
}
.icon-blue {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
}
.icon-purple {
  background: #faf5ff !important;
  color: #7e22ce !important;
  border: 1px solid #e9d5ff !important;
}
.icon-amber {
  background: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}
.icon-indigo {
  background: #eef2ff !important;
  color: #4338ca !important;
  border: 1px solid #c7d2fe !important;
}
.icon-rose {
  background: #fff1f2 !important;
  color: #be123c !important;
  border: 1px solid #fecdd3 !important;
}

/* 深色模式下的徽章 */
body.dark-mode .icon-emerald { background: rgba(6, 78, 59, 0.5) !important; color: #34d399 !important; border-color: #059669 !important; }
body.dark-mode .icon-orange  { background: rgba(124, 45, 18, 0.5) !important; color: #fb923c !important; border-color: #ea580c !important; }
body.dark-mode .icon-blue    { background: rgba(30, 58, 138, 0.5) !important; color: #60a5fa !important; border-color: #2563eb !important; }
body.dark-mode .icon-purple  { background: rgba(88, 28, 135, 0.5) !important; color: #c084fc !important; border-color: #9333ea !important; }
body.dark-mode .icon-amber   { background: rgba(120, 53, 15, 0.5) !important; color: #fcd34d !important; border-color: #d97706 !important; }
body.dark-mode .icon-indigo  { background: rgba(49, 46, 129, 0.5) !important; color: #a5b4fc !important; border-color: #4f46e5 !important; }
body.dark-mode .icon-rose    { background: rgba(136, 19, 55, 0.5) !important; color: #fda4af !important; border-color: #e11d48 !important; }

.btn-icon-xs { width: 14px; height: 14px; }
.inline-info-icon, .inline-help-icon { width: 13px; height: 13px; color: #64748b; margin-right: 3px; }
.pill-inline-icon { width: 15px; height: 15px; margin-right: 4px; color: #047857; }
.opt-table-icon { width: 14px; height: 14px; margin-right: 4px; color: #059669; }
.inline-flyout-icon { width: 16px; height: 16px; margin-right: 6px; color: #0284c7; }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 防止整頁滾動，交由地圖全螢幕底層與內部微型滾動條管理 */
}

body.hud-body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Noto Sans TC", sans-serif;
  background-color: #e5e9ec;
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

body.hud-body.dark-mode,
body.dark-mode,
html.dark-mode {
  background-color: #0b111e !important;
  color: #f8fafc;
}

/* iOS Safari 自動縮放防禦：表單輸入項字級強制鎖定 16px (1rem)，杜絕焦點放大破版 */
input[type="text"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="email"],
select,
textarea,
.address-input,
.google-search-input {
  font-size: 16px !important;
}

/* ======================================================== */
/* 1. 全螢幕 GIS 空間地圖底層 (Full-screen Map Base Layer)    */
/* ======================================================== */
.bg-map-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background: #0f172a;
  overflow: hidden;
}

body.dark-mode .bg-map-layer {
  background-color: #0b111e !important;
}

.store-map-fullscreen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #e2e8f0;
}

body.dark-mode .store-map-fullscreen {
  background: #0f172a;
}

.store-map-3d-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.pinned-stores-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

/* 3D 立體建築物模式右上角狀態與退出操作鈕 (懸浮於右上工具列上方，絕不遮擋正中央商圈範圍控制列) */
.map-3d-hud-bar {
  position: fixed;
  top: 78px;
  right: 24px;
  left: auto;
  transform: none;
  z-index: 860;
  pointer-events: auto;
  animation: fadeInDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.map-3d-hud-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  padding: 5px 12px 5px 10px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.map-3d-hud-pill:hover {
  background: rgba(255, 255, 255, 0.98);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.16);
}

.map-3d-hud-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse 1.8s infinite ease-in-out;
}

.map-3d-hud-badge {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.2px;
}

.btn-map-3d-exit-chip {
  background: rgba(15, 23, 42, 0.08);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  color: #475569;
  font-weight: 600;
  transition: all 0.15s ease;
}

.map-3d-hud-pill:hover .btn-map-3d-exit-chip {
  background: #ef4444;
  color: #ffffff;
}

body.dark-mode .map-3d-hud-pill {
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f8fafc;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

body.dark-mode .map-3d-hud-badge {
  color: #f8fafc;
}

body.dark-mode .btn-map-3d-exit-chip {
  background: rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}

body.dark-mode .store-map-fullscreen,
body.dark-mode .map-fullscreen-wrapper {
  background: #242f3e !important;
}

/* 🌙 Google Maps 官方深色夜間模式：採用 Google 原廠深色主題 (colorScheme: 'DARK') 與官方深色樣式集，絕不使用負片濾鏡，品牌 Logo 100% 維持原廠色彩 */
body.dark-mode #storeMap {
  background-color: #242f3e !important;
}

/* ======================================================== */
/* 2. Ambient Liquid Glow Orbs (為磨砂玻璃提供背部微光散射)   */
/* ======================================================== */
.ambient-glow-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.32;
  will-change: transform;
}

.orb-green {
  top: -100px;
  left: 5%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(0, 115, 80, 0.4) 0%, rgba(0, 115, 80, 0.05) 70%, transparent 100%);
  animation: floatOrb1 20s ease-in-out infinite alternate;
}

.orb-orange {
  top: 15%;
  right: 8%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(255, 108, 0, 0.32) 0%, rgba(255, 108, 0, 0.05) 70%, transparent 100%);
  animation: floatOrb2 24s ease-in-out infinite alternate;
}

.orb-cyan {
  bottom: 5%;
  left: 20%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(2, 136, 209, 0.25) 0%, rgba(0, 115, 80, 0.04) 70%, transparent 100%);
  animation: floatOrb1 22s ease-in-out infinite alternate-reverse;
}

@keyframes floatOrb1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(35px, 25px) scale(1.06); }
}

@keyframes floatOrb2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-30px, 20px) scale(1.04); }
}

/* ======================================================== */
/* 3. 液態霧面玻璃共用擬態核心 (Liquid Glassmorphism)         */
/* ======================================================== */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-md);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  box-shadow: var(--glass-shadow-hover);
}

/* 輕巧細膩的內部自定義滾動條 (Thin Scrollbar) */
.thin-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.thin-scrollbar::-webkit-scrollbar-track {
  background: rgba(241, 245, 249, 0.3);
  border-radius: 4px;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.5);
  border-radius: 4px;
}

.thin-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.8);
}

/* ======================================================== */
/* 4. 前景 HUD 懸浮駕駛艙佈局 (Pass-Through Pointer Events)  */
/* ======================================================== */
.hud-app-layout {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  display: flex;
  pointer-events: none; /* 外層透空，點擊直接穿透到底層 GIS 地圖 */
  overflow: hidden;
  padding: 14px 16px 14px 14px;
  gap: 14px;
}

/* 讓所有卡片、側邊欄、按鈕、輸入框恢復滑鼠事件 */
.app-sidebar,
.floating-header-bar,
.execution-monitor,
.card,
.deck-tabs-header,
.hud-bottom-dock,
.map-floating-bar,
.map-floating-toolbar,
.map-tool-btn,
.map-pin-banner,
.pin-toast,
.btn-pin-location,
.floating-circle-btn,
.sidebar-charts-flyout,
.map-poi-filter-panel,
.map-poi-filter-panel *,
.poi-mode-presets,
.poi-preset-btn,
.poi-category-grid,
.poi-cat-chip,
.poi-cat-switch,
.poi-btn-close,
.modal-content {
  pointer-events: auto;
}

/* 運算渲染期間：隱藏所有分析卡片與浮動 Deck、懸浮按鈕組，僅留地圖與中央載入狀態 */
body.is-analyzing .draggable-card,
body.is-analyzing .hud-left-deck,
body.is-analyzing .hud-dynamic-deck,
body.is-analyzing .sidebar-charts-flyout,
body.is-analyzing .card.is-floating-card,
body.is-analyzing #bepCalcCard,
body.is-analyzing #summarySection,
body.is-analyzing .floating-fab-group,
body.is-analyzing #floatingFabGroup {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
  transform: scale(0.96);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

/* ======================================================== */
/* 5. 左側導航側邊欄 (Sidebar Navigation)                  */
/* ======================================================== */
.app-sidebar {
  width: 80px;
  height: calc(100vh - 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 10px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: visible; /* 允許邊界懸浮拉拔鈕半突出 */
  position: relative;
  z-index: 100;
  contain: layout style; /* 關鍵修復：改為 layout style，絕不因 paint 裁切邊界按鈕與彈窗 (杜絕「被切到了」Bug) */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.app-sidebar.expanded {
  width: 206px;
  align-items: stretch;
  padding: 18px 12px;
}

/* 頂部 Header 列 */
.sidebar-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 24px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: center;
  cursor: pointer;
}

.app-sidebar.expanded .sidebar-brand {
  justify-content: flex-start;
  width: auto;
}

/* 側邊欄頂部收摺 / 展開按鈕 (依使用者需求：上方不要再有縮合按鈕，徹底隱藏) */
.sidebar-header-toggle-btn {
  display: none !important;
}

.app-sidebar.expanded .sidebar-header-toggle-btn {
  display: none !important;
}

/* 側邊欄邊界懸浮拉拔片 (依使用者反饋：不要外凸出去，徹底隱藏) */
.sidebar-edge-toggle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* 側邊欄收摺 / 展開切換按鈕 (位於閃電符號下方，依使用者需求：純圖示按鈕，不顯示收摺文字) */
.sidebar-toggle-container {
  padding: 4px 0;
  margin: 4px 0 2px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.sidebar-bottom-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 10px;
  background: rgba(241, 245, 249, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.85);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-bottom-toggle-btn:hover {
  background: #ffffff;
  color: var(--pcsc-green);
  border-color: var(--pcsc-green);
  box-shadow: 0 4px 12px rgba(0, 115, 80, 0.15);
  transform: scale(1.06);
}

.sidebar-bottom-toggle-btn .toggle-btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.22s ease;
}

.sidebar-bottom-toggle-btn .toggle-btn-label {
  display: none !important;
}

body.dark-mode .sidebar-bottom-toggle-btn {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}

body.dark-mode .sidebar-bottom-toggle-btn:hover {
  background: rgba(51, 65, 85, 0.8);
  color: #34d399;
  border-color: #34d399;
  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.2);
}

/* 側邊欄無論展開或收摺狀態，均維持居中精緻方圓純圖示按鈕，絕不顯示多餘文字 */
.app-sidebar:not(.expanded) .sidebar-toggle-container,
.app-sidebar.expanded .sidebar-toggle-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.app-sidebar:not(.expanded) .sidebar-bottom-toggle-btn,
.app-sidebar.expanded .sidebar-bottom-toggle-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  justify-content: center;
}

.app-sidebar:not(.expanded) .sidebar-bottom-toggle-btn .toggle-btn-label,
.app-sidebar.expanded .sidebar-bottom-toggle-btn .toggle-btn-label {
  display: none !important;
}

.brand-logo-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.9);
  padding: 6px 8px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.brand-dc-badge {
  padding: 4px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.brand-dc-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(0, 115, 80, 0.18);
}

.brand-dc-logo {
  width: 30px;
  height: 30px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.map-bar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.map-bar-dc-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot-orange { background: var(--pcsc-orange); }
.dot-green { background: var(--pcsc-green); }
.dot-red { background: var(--pcsc-red); }

.brand-text-group {
  display: none;
  flex-direction: column;
}

.app-sidebar.expanded .brand-text-group {
  display: flex;
}

.brand-sub {
  font-size: var(--font-size-xs);
  font-weight: 800;
  color: var(--pcsc-orange);
  letter-spacing: 0.5px;
}

.brand-main {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--pcsc-green);
  line-height: 1.2;
  white-space: nowrap;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  flex: 1;
}

.nav-item {
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  position: relative;
}

.app-sidebar.expanded .nav-item {
  justify-content: flex-start;
}

.nav-icon {
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
}

.nav-label {
  display: none;
  white-space: nowrap;
}

.app-sidebar.expanded .nav-label {
  display: inline;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.85);
  color: var(--pcsc-green);
  transform: translateY(-1px);
}

.nav-item.active {
  background: var(--pcsc-green);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 115, 80, 0.3);
}

/* 側邊欄展店 AI 助手特有高亮樣式 (7-ELEVEN 活力橘 #FF6C00) */
.nav-item-agent {
  color: #ff6c00 !important;
}

.nav-item-agent:hover {
  background: rgba(255, 237, 216, 0.9) !important;
  color: #e65100 !important;
}

.badge-orange-adk,
.badge-purple-adk {
  background: linear-gradient(135deg, #ff8533 0%, #ff6c00 100%) !important;
  color: #ffffff !important;
  font-size: var(--font-size-xs);
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  margin-left: auto;
  box-shadow: 0 2px 8px rgba(255, 108, 0, 0.4) !important;
}

/* 側邊欄自選圖卡群組與抽屜 (Sidebar Charts Group & Flyout) */
.sidebar-charts-group {
  position: relative;
  width: 100%;
}

.sidebar-badge {
  background: var(--pcsc-orange);
  color: #ffffff;
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  line-height: 1.3;
  margin-left: auto;
  display: inline-block;
  box-shadow: 0 2px 6px rgba(255, 108, 0, 0.4);
}

.app-sidebar:not(.expanded) .sidebar-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  padding: 1px 5px;
  font-size: var(--font-size-xs);
  margin-left: 0;
}

.sidebar-charts-flyout {
  position: fixed;
  width: 330px;
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.14), inset 0 1px 1px 0 rgba(255, 255, 255, 0.85);
  padding: 14px 16px;
  z-index: 2000;
  animation: flyoutSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes flyoutSlideIn {
  from {
    opacity: 0;
    transform: translateX(-12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.flyout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.65);
}

.flyout-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary);
}

.flyout-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.flyout-options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.flyout-option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  background: rgba(255, 255, 255, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.flyout-option-row:hover {
  background: rgba(0, 115, 80, 0.12);
  border-color: rgba(0, 115, 80, 0.3);
}

body.dark-mode .sidebar-charts-flyout {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.14) !important;
}

body.dark-mode .flyout-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .flyout-option-row {
  background: rgba(30, 41, 59, 0.35);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .flyout-option-row:hover {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.35);
}

.flyout-option-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--pcsc-green);
  cursor: pointer;
}

.flyout-option-row .opt-label {
  font-size: 0.8rem;
  color: var(--text-primary);
  line-height: 1.35;
}

.flyout-option-row .opt-num {
  color: var(--pcsc-green);
  font-weight: 700;
}

.sidebar-divider {
  width: 80%;
  height: 1px;
  background: rgba(226, 232, 240, 0.8);
  margin: 12px 0;
}

.sidebar-quick-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.sidebar-tool-btn {
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}

.app-sidebar.expanded .sidebar-tool-btn {
  justify-content: flex-start;
}

.tool-icon {
  font-size: 1.15rem;
}

.tool-label {
  display: none;
  white-space: nowrap;
}

.app-sidebar.expanded .tool-label {
  display: inline;
}

.sidebar-tool-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-primary);
}

/* 舊版底部收摺鈕已淘汰，由側欄邊界懸浮圓鈕與頂部按鈕取代 */

/* ========================================================
   側邊欄現代 SaaS 帳號膠囊與彈出選單 (如圖 2 & 圖 3，純 SVG 無 Emoji)
   ======================================================== */
.sidebar-account-container {
  position: relative;
  width: 100%;
  margin-top: auto;
  padding: 6px 4px;
}

.sidebar-account-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}

.sidebar-account-trigger:hover,
.sidebar-account-trigger.active {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.08);
}

body.dark-mode .sidebar-account-trigger:hover,
body.dark-mode .sidebar-account-trigger.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.account-avatar-wrapper {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #e2e8f0;
  color: #334155;
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.account-meta {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}

.account-name {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-plan-tag {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.account-plan-tag::before {
  content: "·";
  margin-right: 4px;
}

.account-chevron-icon {
  margin-left: auto;
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.sidebar-account-trigger.active .account-chevron-icon {
  transform: rotate(180deg);
}

/* 帳號向上彈出的 Popover 功能選單 (次世代液態玻璃，純 SVG，零 Emoji) */
.account-popover-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 4px;
  width: 224px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.22), 0 4px 12px -2px rgba(15, 23, 42, 0.08), inset 0 1px 1px 0 rgba(255, 255, 255, 0.9);
  padding: 6px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: popoverFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popoverFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

body.dark-mode .account-popover-menu {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 42px -4px rgba(0, 0, 0, 0.75), inset 0 1px 1px 0 rgba(255, 255, 255, 0.12);
}

/* 關鍵防護：當帳號選單展開時，自動將背後的運算耗時標籤淡出，杜絕文字疊加透光 (Fix overlapping text bug) */
.app-sidebar:has(#accountPopoverMenu:not([style*="display: none"])) .sidebar-perf-container,
.app-sidebar.popover-open .sidebar-perf-container {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.popover-user-brief {
  padding: 6px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.popover-user-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.popover-user-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.popover-email {
  font-size: 0.74rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* 現代微型呼吸狀態燈號 (Status LED Indicator) - 徹底取代生硬突兀的「已連線」字串 */
.auth-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: help;
  position: relative;
}

.status-led-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  transition: all 0.25s ease;
}

.auth-status-chip.online .status-led-dot {
  background-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25), 0 0 8px #10b981;
  animation: ledPulse 2s infinite ease-in-out;
}

.auth-status-chip.offline .status-led-dot {
  background-color: #94a3b8;
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.25);
  animation: none;
}

@keyframes ledPulse {
  0% {
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.35), 0 0 4px #10b981;
    transform: scale(0.95);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15), 0 0 10px #10b981;
    transform: scale(1.1);
  }
  100% {
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.35), 0 0 4px #10b981;
    transform: scale(0.95);
  }
}

/* 側邊欄觸發頭像微型狀態點 */
.account-avatar-wrapper {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
}

.auth-status-dot {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid #ffffff;
  background-color: #94a3b8;
  z-index: 2;
  transition: all 0.2s ease;
}

.auth-status-dot.connected {
  background-color: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
}

body.dark-mode .auth-status-dot {
  border-color: #0f172a;
}

.popover-divider {
  height: 1px;
  background: rgba(226, 232, 240, 0.8);
  margin: 4px 0;
}

body.dark-mode .popover-divider {
  background: rgba(255, 255, 255, 0.1);
}

.popover-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all 0.15s ease;
}

.popover-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

body.dark-mode .popover-item:hover {
  background: #334155;
  color: #ffffff;
}

.popover-icon {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.popover-item:hover .popover-icon {
  color: var(--text-primary);
}

.popover-item-danger {
  color: #dc2626 !important;
}

.popover-item-danger .popover-icon {
  color: #dc2626 !important;
}

.popover-item-danger:hover {
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

body.dark-mode .popover-item-danger:hover {
  background: rgba(239, 68, 68, 0.15) !important;
}

.popover-item-primary {
  color: var(--pcsc-green) !important;
}

/* 側邊欄折疊時的自適應 */
.app-sidebar:not(.expanded) .account-meta,
.app-sidebar:not(.expanded) .account-chevron-icon {
  display: none;
}

.app-sidebar:not(.expanded) .sidebar-account-trigger {
  justify-content: center;
  padding: 6px 0;
}

.app-sidebar:not(.expanded) .account-popover-menu {
  left: calc(100% + 8px);
  bottom: 0;
}

/* ======================================================== */
/* 6. 主要 HUD 工作區 (Top Bar + Twin Decks + Map Bar)      */
/* ======================================================== */
.hud-main-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  height: calc(100vh - 28px);
  position: relative;
}

/* 頂部一體化懸浮控制列 (Floating Top Bar) */
.floating-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  gap: 14px;
  flex-wrap: wrap;
  border-radius: 20px; /* 統一為現代 20px 圓角，與底列及整體卡片視覺完全和諧 */
  flex-shrink: 0;
  z-index: 20;
}

.header-main-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 280px;
}

.search-address-pill,
.search-pill-wrapper {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-full);
  padding: 4px 6px 4px 12px;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 1px #ffffff;
  transition: all 0.25s ease;
  flex: 1;
  min-width: 220px;
}

.search-address-pill:focus-within,
.search-pill-wrapper:focus-within {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(0, 115, 80, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 115, 80, 0.15), 0 8px 24px rgba(0, 115, 80, 0.08);
}

/* 深色模式下的頂部搜尋膠囊輸入框 */
body.dark-mode .search-address-pill,
body.dark-mode .search-pill-wrapper {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.06);
}

body.dark-mode .search-address-pill:focus-within,
body.dark-mode .search-pill-wrapper:focus-within {
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(52, 211, 153, 0.5);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 8px 24px rgba(0, 0, 0, 0.5);
}

.search-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.search-icon-pill {
  background: rgba(0, 115, 80, 0.08);
  border: 1px solid rgba(0, 115, 80, 0.15);
  color: var(--pcsc-green);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 5px 12px;
  border-radius: var(--radius-full); /* 由生硬 12px 統一為圓潤膠囊，消除與周邊膠囊按鈕的圓角衝突 */
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body.dark-mode .search-icon-pill {
  background: rgba(0, 115, 80, 0.25);
  border-color: rgba(52, 211, 153, 0.35);
  color: #34d399;
}

body.dark-mode .search-icon-pill .pill-inline-icon {
  color: #34d399;
}

.address-input {
  flex: 1;
  border: none;
  font-size: 1rem; /* 鎖定 16px (1rem)，杜絕 iOS Safari 點擊聚焦時強制自動放大破版 */
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
  font-family: inherit;
  min-width: 150px;
}

body.dark-mode .address-input {
  color: #f8fafc;
}

body.dark-mode .address-input::placeholder {
  color: #64748b;
}

.btn-analyze-pill {
  background: linear-gradient(135deg, #008f63 0%, #007350 100%);
  color: #ffffff;
  padding: 8px 18px;
  font-size: 0.88rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 115, 80, 0.35);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-analyze-pill:hover {
  background: linear-gradient(135deg, #00a370 0%, #005a3e 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 115, 80, 0.42);
}

.btn-analyze-pill:active {
  transform: translateY(1px);
}

/* ============================================================
   環境模式控制 (Production vs Development)
   正式環境 (body.env-prod) 自動徹底隱藏所有開發/測試專用按鈕
   ============================================================ */
body.env-prod #btnPortalQuickExample,
body.env-prod #btnLoadMockData,
body.env-prod #btnQuickExample,
body.env-prod .btn-mock-pill,
body.env-prod .dev-only {
  display: none !important;
}

/* 正式環境下，確保搜尋框大器舒展且與 DEV 寬度一致，兩顆主要按鈕維持飽滿大器佈局 */
body.env-prod .portal-card-search,
body.env-prod .google-search-container {
  width: 100%;
  max-width: 680px;
}

body.env-prod .google-search-buttons .btn-google-cta {
  min-width: 136px;
  padding: 12px 24px;
}

/* 範例資料 (Mock 模式) 快捷按鈕 */
.btn-mock-pill {
  background: rgba(241, 245, 249, 0.95);
  color: var(--slate-700);
  border: 1px solid var(--slate-300);
  padding: 8px 14px;
  font-size: 0.86rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-mock-pill i {
  color: #d97706;
}

.btn-mock-pill:hover {
  background: #ffffff;
  color: var(--pcsc-orange);
  border-color: var(--pcsc-orange);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 108, 0, 0.18);
}

.btn-mock-pill:active {
  transform: translateY(1px);
}

body.dark-mode .btn-mock-pill {
  background: var(--slate-800);
  color: var(--slate-200);
  border-color: var(--slate-700);
}

.btn-top-expansion-pill {
  background: linear-gradient(135deg, #ff8533 0%, #ff6c00 50%, #e65100 100%);
  color: #ffffff;
  padding: 8px 16px;
  font-size: 0.88rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 14px rgba(255, 108, 0, 0.38);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-top-expansion-pill:hover {
  background: linear-gradient(135deg, #ff944d 0%, #ff6c00 50%, #d84315 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 108, 0, 0.48);
}

.btn-top-expansion-pill:active {
  transform: translateY(1px);
}

/* 圖釘選點按鈕 (Pin Location Button in Search Bar) */
.btn-pin-location {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(241, 245, 249, 0.9);
  color: #334155;
  border: 1px solid rgba(203, 213, 225, 0.85);
  border-radius: var(--radius-full);
  padding: 6px 13px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-pin-location:hover {
  background: #ffffff;
  color: var(--pcsc-red, #dc2626);
  border-color: rgba(220, 38, 38, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.15);
}

.btn-pin-location.pin-active {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25), 0 4px 14px rgba(220, 38, 38, 0.35);
  animation: pinPulseGlow 1.5s infinite alternate;
}

@keyframes pinPulseGlow {
  0% { transform: scale(1); box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2); }
  100% { transform: scale(1.03); box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.35); }
}

.btn-pin-location .pin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fee2e2;
  color: #dc2626;
  font-size: 0.95rem;
  line-height: 1;
  transition: all 0.2s ease;
}

.btn-pin-location:hover .pin-icon {
  background: #dc2626;
  color: #ffffff;
}

.btn-pin-location.pin-active .pin-icon {
  background: #ffffff;
  color: #dc2626;
}

body.dark-mode .btn-pin-location {
  background: rgba(30, 41, 59, 0.9);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.35);
}

body.dark-mode .btn-pin-location:hover {
  background: rgba(220, 38, 38, 0.25);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.25);
}

body.dark-mode .btn-pin-location .pin-icon {
  background: rgba(220, 38, 38, 0.25);
  color: #fca5a5;
}

body.dark-mode .btn-pin-location:hover .pin-icon {
  background: #dc2626;
  color: #ffffff;
}

/* 目前位置按鈕 (Current Location Button in Search Bar) */
.btn-current-location {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(241, 245, 249, 0.9);
  color: #334155;
  border: 1px solid rgba(203, 213, 225, 0.85);
  border-radius: var(--radius-full);
  padding: 6px 13px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-current-location:hover {
  background: #ffffff;
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.15);
}

.btn-current-location.is-locating {
  background: #eff6ff;
  color: #2563eb;
  border-color: #3b82f6;
  pointer-events: none;
}

.btn-current-location .pin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dbeafe;
  color: #2563eb;
  font-size: 0.95rem;
  line-height: 1;
  transition: all 0.2s ease;
}

.btn-current-location:hover .pin-icon {
  background: #2563eb;
  color: #ffffff;
}

.btn-current-location.is-locating .pin-icon {
  animation: spin 1s linear infinite;
}

body.dark-mode .btn-current-location {
  background: rgba(30, 41, 59, 0.9);
  color: #cbd5e1;
  border-color: rgba(51, 65, 85, 0.85);
}

body.dark-mode .btn-current-location:hover {
  background: #334155;
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.4);
}

body.dark-mode .btn-current-location .pin-icon {
  background: rgba(37, 99, 235, 0.25);
  color: #60a5fa;
}

.btn-mock-pill .pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fef3c7;
  color: #d97706;
}

body.dark-mode .btn-mock-pill .pill-icon {
  background: rgba(217, 119, 6, 0.25);
  color: #fbbf24;
}

/* 圖釘模式提示橫幅 (Map Pin Mode Banner) */
.map-pin-banner {
  position: fixed;
  top: 86px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  animation: slideDownBanner 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideDownBanner {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.map-pin-banner .pin-banner-icon {
  font-size: 1.1rem;
  animation: pinBounce 0.8s infinite alternate ease-in-out;
}

@keyframes pinBounce {
  from { transform: translateY(0); }
  to { transform: translateY(-4px); }
}

.map-pin-banner .btn-cancel-pin {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.map-pin-banner .btn-cancel-pin:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ==========================================
   🍞 全域統一 Toast 卡片通知 (高質感純白浮雕卡片 · 融入專案清新色系)
   ========================================== */
.app-toast-backdrop {
  display: none !important;
}

.app-toast-container {
  position: fixed;
  top: 84px; /* 避開頂部搜尋導覽列，清楚懸浮於地圖正中央上方 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.app-toast-card {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 400px;
  max-width: min(560px, 92vw);
  background: #ffffff; /* 純白高質感底色，與左側面板一致 */
  padding: 16px 20px 16px 16px;
  border-radius: 14px;
  box-shadow: 0 20px 30px -8px rgba(15, 23, 42, 0.12), 0 8px 12px -4px rgba(15, 23, 42, 0.05);
  border: 1.5px solid #e2e8f0;
  overflow: hidden;
  animation: appToastSlideDown 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-sizing: border-box;
}

.app-toast-card.hiding {
  animation: appToastSlideUp 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 左側圓角色彩線 (Accent Bar) */
.app-toast-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: #ef4444;
  border-radius: 4px 0 0 4px;
}

/* 狀態圖標方塊徽章 (Icon Badge) */
.app-toast-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  background: #ef4444;
  color: #ffffff;
  margin-left: 2px;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.25);
}

.app-toast-badge svg,
.app-toast-badge i {
  width: 20px;
  height: 20px;
  stroke-width: 2.3;
}

/* 文字內容區塊 */
.app-toast-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-right: 8px;
}

.app-toast-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a; /* 質感深黑藍標題 */
  line-height: 1.35;
  margin: 0;
  letter-spacing: -0.01em;
}

.app-toast-desc {
  font-size: 13px;
  font-weight: 400;
  color: #475569; /* 清晰好讀深岩灰 */
  line-height: 1.55;
  margin: 4px 0 0 0;
}

/* 右上角關閉按鈕 */
.app-toast-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin: -4px -6px 0 0;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.app-toast-close:hover {
  color: #1e293b;
  background: rgba(241, 245, 249, 0.9);
}

.app-toast-close svg,
.app-toast-close i {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}

/* 狀態變體：Warning (暖琥珀橘黃細框 + 暖色光暈) */
.app-toast-card.variant-warning {
  border-color: #fde68a;
  box-shadow: 0 20px 30px -8px rgba(245, 158, 11, 0.16), 0 8px 12px -4px rgba(15, 23, 42, 0.05), 0 0 12px rgba(245, 158, 11, 0.1);
}
.app-toast-card.variant-warning .app-toast-accent {
  background: #f59e0b;
}
.app-toast-card.variant-warning .app-toast-badge {
  background: #f59e0b;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}

/* 狀態變體：Error (淺珊瑚紅細框 + 暖紅光暈) */
.app-toast-card.variant-error {
  border-color: #fca5a5;
  box-shadow: 0 20px 30px -8px rgba(239, 68, 68, 0.16), 0 8px 12px -4px rgba(15, 23, 42, 0.05), 0 0 12px rgba(239, 68, 68, 0.1);
}
.app-toast-card.variant-error .app-toast-accent {
  background: #ef4444;
}
.app-toast-card.variant-error .app-toast-badge {
  background: #ef4444;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}

/* 狀態變體：Success (淺薄荷綠細框 + 綠色光暈) */
.app-toast-card.variant-success {
  border-color: #86efac;
  box-shadow: 0 20px 30px -8px rgba(16, 185, 129, 0.16), 0 8px 12px -4px rgba(15, 23, 42, 0.05), 0 0 12px rgba(16, 185, 129, 0.1);
}
.app-toast-card.variant-success .app-toast-accent {
  background: #10b981;
}
.app-toast-card.variant-success .app-toast-badge {
  background: #10b981;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

/* 狀態變體：Info (天藍細框 + 藍色光暈) */
.app-toast-card.variant-info {
  border-color: #7dd3fc;
  box-shadow: 0 20px 30px -8px rgba(2, 132, 199, 0.16), 0 8px 12px -4px rgba(15, 23, 42, 0.05), 0 0 12px rgba(2, 132, 199, 0.1);
}
.app-toast-card.variant-info .app-toast-accent {
  background: #0284c7;
}
.app-toast-card.variant-info .app-toast-badge {
  background: #0284c7;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.3);
}

/* 深色模式支援 */
body.dark-mode .app-toast-card {
  background: #1e293b;
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 20px 30px -8px rgba(0, 0, 0, 0.5);
}
body.dark-mode .app-toast-title {
  color: #f8fafc;
}
body.dark-mode .app-toast-desc {
  color: #cbd5e1;
}
body.dark-mode .app-toast-close {
  color: #94a3b8;
}
body.dark-mode .app-toast-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

@keyframes appToastSlideDown {
  from {
    opacity: 0;
    transform: translateY(-24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes appToastSlideUp {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-20px) scale(0.96);
  }
}

/* 舊版 .pin-toast 相容樣式 (漸進退場) */
.pin-toast {
  display: none !important;
}

/* 圖釘選點模式全域滑鼠十字準星強制穿透 */
body.pin-drop-mode-active,
body.pin-drop-mode-active #storeMap,
body.pin-drop-mode-active .leaflet-container,
body.pin-drop-mode-active .leaflet-grab,
body.pin-drop-mode-active .leaflet-interactive,
body.pin-drop-mode-active .leaflet-pane,
body.pin-drop-mode-active .gm-style,
body.pin-drop-mode-active .gm-style iframe {
  cursor: crosshair !important;
}

/* 🌟 3D 地圖 Shift 鍵視角旋轉手勢游標狀態 */
body.is-shift-rotating-map,
body.is-shift-rotating-map *,
body.is-shift-rotating-map .gm-style,
body.is-shift-rotating-map .gm-style iframe,
body.is-shift-rotating-map canvas {
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

#storeMap.is-shift-ready,
#storeMap.is-shift-ready *,
#storeMap.is-shift-ready .gm-style,
#storeMap.is-shift-ready .gm-style iframe,
#storeMap.is-shift-ready canvas {
  cursor: grab !important;
}

/* Leaflet 高質感專屬圖釘樣式 (自帶微光光環與落點陰影) */
.custom-leaflet-pin-icon {
  background: transparent !important;
  border: none !important;
}

.pin-drop-marker-wrapper {
  position: relative;
  width: 38px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 6px 14px rgba(220, 38, 38, 0.45));
  animation: pinDropBounce 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pinDropBounce {
  0% { transform: translateY(-40px) scale(0.6); opacity: 0; }
  60% { transform: translateY(6px) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.pin-marker-pulse {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 6px;
  background: rgba(220, 38, 38, 0.45);
  border-radius: 50%;
  animation: pinPulseRing 1.8s infinite ease-out;
  pointer-events: none;
}

@keyframes pinPulseRing {
  0% { transform: translateX(-50%) scale(0.6); opacity: 0.9; }
  100% { transform: translateX(-50%) scale(2.6); opacity: 0; }
}

/* AI 預測 PSD 指標膠囊 (Hero KPI Pill - 放大凸顯) */
.predict-badge-pill {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 253, 244, 0.92) 100%);
  border: 1.5px solid rgba(0, 115, 80, 0.3);
  border-radius: var(--radius-full);
  padding: 6px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(0, 115, 80, 0.12), inset 0 1px 2px #ffffff;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.predict-badge-pill:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 115, 80, 0.18), inset 0 1px 2px #ffffff;
}

body.dark-mode .predict-badge-pill {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(6, 78, 59, 0.4) 100%);
  border-color: rgba(52, 211, 153, 0.4);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.predict-meta-text {
  display: flex;
  flex-direction: column;
}

.predict-tag {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--pcsc-green);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

body.dark-mode .predict-tag {
  color: #34d399;
}

.predict-desc {
  display: none;
}

.predict-number {
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--pcsc-green);
  font-family: 'Roboto Mono', monospace;
  line-height: 1;
  letter-spacing: -0.5px;
  text-shadow: 0 1px 2px rgba(0, 115, 80, 0.15);
}

body.dark-mode .predict-number {
  color: #10b981;
  text-shadow: 0 0 14px rgba(16, 185, 129, 0.4);
}

/* 頂部操作按鈕群組 */
.header-action-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-hud-action {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.9);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s;
}

@media (hover: hover) and (pointer: fine) {
  .btn-hud-action:hover {
    background: #ffffff;
    color: var(--text-primary);
    border-color: #cbd5e1;
    transform: translateY(-1px);
  }
}

.btn-hud-action.active {
  background: var(--pcsc-green);
  color: #ffffff;
  border-color: var(--pcsc-green);
}

.btn-icon-only {
  width: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
  font-size: 1rem;
}

/* 登入身分膠囊 */
.auth-box-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(248, 250, 252, 0.85);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: var(--radius-full);
  padding: 4px 10px;
}

.status-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
}

.status-badge.disconnected {
  background: #f1f5f9;
  color: var(--text-muted);
}

.status-badge.connected {
  background: var(--pcsc-green-light);
  color: var(--pcsc-green);
}

.email-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-auth-sm {
  background: var(--pcsc-green);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-auth-sm:hover {
  background: var(--pcsc-green-hover);
}

.btn-auth-sm.btn-logout {
  background: #64748b;
}

.btn-auth-sm.btn-logout:hover {
  background: #475569;
}

/* ======================================================== */
/* 6.5 正中央 Data Center Logo + 7-Eleven 流光絲帶 WebGL 載入等待模組 */
/* ======================================================== */
.center-loading-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  overflow: hidden;
}

body.dark-mode .center-loading-overlay {
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}

.center-loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* 7-Eleven WebGL 流光絲帶互動背景 Canvas (運算載入畫面) */
.loading-webgl-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

.loading-glass-pod {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08),
              0 0 28px rgba(255, 108, 0, 0.08);
  border-radius: 28px;
  padding: 32px 38px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 320px;
  max-width: 400px;
  text-align: center;
  animation: podPopIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body.dark-mode .loading-glass-pod {
  background: rgba(30, 41, 59, 0.48);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 32px rgba(255, 135, 31, 0.16);
}

body.dark-mode .loading-title {
  color: #f8fafc;
}

body.dark-mode .loading-sub {
  color: #94a3b8;
}

body.dark-mode .loading-timer-badge {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(51, 65, 85, 0.8);
  color: #00e394;
}

body.dark-mode .loading-timer-badge strong {
  color: #f8fafc;
}

body.dark-mode .btn-cancel-analysis {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(51, 65, 85, 0.8);
  color: #cbd5e1;
}

body.dark-mode .btn-cancel-analysis:hover {
  background: rgba(225, 29, 72, 0.2);
  border-color: rgba(225, 29, 72, 0.4);
  color: #fb7185;
}

@keyframes podPopIn {
  from {
    transform: scale(0.88) translateY(16px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* 統一居中容器：跑馬燈、光暈、純白底座與 Logo 共享絕對同心圓 (0,0) */
.loading-hero-circle {
  position: relative;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  margin: 0 auto 2px;
  flex-shrink: 0;
}

/* 1. 橘色柔和散射光暈 (Pure Orange Ambient Glow) - 純淨乾淨不混雜、不顯髒 */
.aura-ambient-glow.orange-ambient-glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 108, 0, 0.46) 0%,
    rgba(255, 140, 0, 0.22) 50%,
    transparent 72%
  );
  filter: blur(12px);
  animation: orangeGlowPulse 2.2s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes orangeGlowPulse {
  0% { transform: scale(0.92); opacity: 0.65; }
  100% { transform: scale(1.14); opacity: 0.95; }
}

/* 2. 橘色動態旋轉跑馬燈光圈 (Pure Orange Marquee Spinner) */
.aura-marquee-spinner.orange-marquee-spinner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #FF6C00 0%,
    #FFA842 35%,
    rgba(255, 108, 0, 0.1) 75%,
    #FF6C00 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #fff calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #fff calc(100% - 3.5px));
  animation: spinMarquee 1.5s linear infinite;
  z-index: 2;
  box-shadow: 0 0 14px rgba(255, 108, 0, 0.4);
}

@keyframes spinMarquee {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 3. 純白高雅底座 (Inner Disc) - 提供 Logo 純白襯底，徹底杜絕背底髒暗色彩 */
.logo-inner-disc {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid rgba(255, 237, 213, 0.95);
  box-shadow: 0 4px 18px rgba(255, 108, 0, 0.14),
              inset 0 1px 2px rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

/* 4. 正中央 Data Center Logo - 幾何居中與呼吸光微動態 */
.dc-loading-logo {
  width: 50px;
  height: 50px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: auto;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.08));
}

@keyframes logoPulse {
  0%, 100% {
    transform: scale(0.96);
  }
  50% {
    transform: scale(1.04);
  }
}

.loading-status-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 3;
}

.loading-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.5px;
  margin: 0;
}

.loading-sub {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0;
  max-width: 280px;
  line-height: 1.4;
}

.loading-timer-badge {
  margin-top: 6px;
  background: rgba(241, 245, 249, 0.9);
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: var(--radius-full);
  padding: 4px 14px;
  font-size: 0.8rem;
  color: var(--pcsc-green);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.loading-timer-badge strong {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.92rem;
  color: #0f172a;
}

.loading-cancel-wrap {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.btn-cancel-analysis {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--radius-full);
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.btn-cancel-analysis .cancel-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
  color: #94a3b8;
  transition: color 0.15s ease;
}

.btn-cancel-analysis:hover {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #e11d48;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.12);
}

.btn-cancel-analysis:hover .cancel-icon {
  color: #e11d48;
}

.btn-cancel-analysis:active {
  transform: translateY(0);
}

/* ======================================================== */
/* 6.6 卡片拖曳 (Draggable) 與縮合 (Collapsible) 通用系統     */
/* ======================================================== */
.card-drag-handle {
  cursor: grab !important;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.card-drag-handle:active {
  cursor: grabbing !important;
}

.drag-handle-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 1.15rem;
  margin-right: 2px;
  opacity: 0.65;
  transition: all 0.2s;
}

.card-drag-handle:hover .drag-handle-grip {
  opacity: 1;
  color: var(--pcsc-green);
  transform: scale(1.1);
}

.card-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-action-btn {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(203, 213, 225, 0.8);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
  padding: 0;
}

.card-action-btn:hover {
  background: #ffffff;
  color: var(--pcsc-green);
  border-color: var(--pcsc-green);
  box-shadow: 0 2px 6px rgba(0, 115, 80, 0.15);
  transform: scale(1.08);
}

body.dark-mode .card-action-btn {
  background: rgba(51, 65, 85, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}

body.dark-mode .card-action-btn:hover {
  background: #334155;
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transform: scale(1.08);
}

body.dark-mode .card-action-btn.btn-collapse {
  color: #f8fafc;
}

.card-collapsible-body {
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  max-height: 2200px;
  opacity: 1;
  overflow: hidden;
}

/* 縮合折疊為條狀 Bar 狀態 (Collapsed into Sleek Horizontal Bar) */
.card.is-collapsed,
.modular-chart-card.is-collapsed {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 14px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  border-radius: 21px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), inset 0 1px 1px 0 rgba(255, 255, 255, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.72) !important;
  background: rgba(255, 255, 255, 0.48) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex: 0 0 42px !important;
  resize: none !important;
}

/* 左側雙卡 (損益試算與商圈財務) 縮合時完全收起隱藏，僅保留頂部膠囊按鈕 */
#summarySection.is-collapsed,
#bepCalcCard.is-collapsed {
  display: none !important;
}

.card.is-collapsed:hover,
.modular-chart-card.is-collapsed:hover {
  background: rgba(255, 255, 255, 0.65) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.85) !important;
}

/* 深色模式下的縮合折疊條 (Dark Mode Sleek Collapsed Bar) */
body.dark-mode .card.is-collapsed,
body.dark-mode .modular-chart-card.is-collapsed {
  background: rgba(15, 23, 42, 0.52) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), inset 0 1px 1px 0 rgba(255, 255, 255, 0.14) !important;
}

body.dark-mode .card.is-collapsed:hover,
body.dark-mode .modular-chart-card.is-collapsed:hover {
  background: rgba(30, 41, 59, 0.65) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 1px 1px 0 rgba(255, 255, 255, 0.20) !important;
}

.card.is-collapsed .card-header,
.modular-chart-card.is-collapsed .card-header {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

body.dark-mode .card.is-collapsed .card-header,
body.dark-mode .modular-chart-card.is-collapsed .card-header {
  background: transparent !important;
}

.card.is-collapsed .card-collapsible-body,
.modular-chart-card.is-collapsed .card-collapsible-body {
  display: none !important;
  max-height: 0 !important;
  opacity: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.card.is-collapsed .card-title,
.card.is-collapsed h3,
.card.is-collapsed h4,
.modular-chart-card.is-collapsed .card-title {
  font-size: 0.84rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.dark-mode .card.is-collapsed .card-title,
body.dark-mode .card.is-collapsed h3,
body.dark-mode .card.is-collapsed h4,
body.dark-mode .modular-chart-card.is-collapsed .card-title {
  color: #f8fafc !important;
}

body.dark-mode .card.is-collapsed .drag-handle-grip,
body.dark-mode .modular-chart-card.is-collapsed .drag-handle-grip {
  color: #64748b;
}

body.dark-mode .card.is-collapsed:hover .drag-handle-grip,
body.dark-mode .modular-chart-card.is-collapsed:hover .drag-handle-grip {
  color: #34d399;
}

/* 自由拖曳與尺寸調整 (Draggable & Resizable Cards) */
.draggable-card {
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.draggable-card:not(.is-collapsed) {
  resize: both;
  overflow: auto;
  min-width: 300px;
  min-height: 160px;
  max-width: 96vw;
  max-height: 90vh;
}

.card-drag-handle {
  cursor: grab !important;
  user-select: none;
  touch-action: none;
}

.card-drag-handle:active,
.draggable-card.is-dragging .card-drag-handle {
  cursor: grabbing !important;
}

.drag-handle-grip {
  font-size: 1rem;
  color: #94a3b8;
  cursor: grab;
  margin-right: 4px;
  user-select: none;
  line-height: 1;
}

.card-resize-handle {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 14px;
  height: 14px;
  cursor: se-resize;
  pointer-events: auto;
  background-image: radial-gradient(circle, rgba(100, 116, 139, 0.7) 1.5px, transparent 1.5px);
  background-size: 4px 4px;
  background-position: bottom right;
  opacity: 0.45;
  transition: opacity 0.2s;
  z-index: 20;
}

.draggable-card:hover .card-resize-handle {
  opacity: 0.95;
}

.card.is-collapsed .card-resize-handle {
  display: none !important;
}

/* 自由拖曳時的浮動卡片樣式 (Floating Dragged Card) */
.draggable-card.is-floating-card {
  position: fixed !important;
  margin: 0 !important;
  z-index: 950 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.8) !important;
  transition: top 0.28s cubic-bezier(0.16, 1, 0.3, 1), left 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s, opacity 0.2s;
}

body.dark-mode .draggable-card.is-floating-card {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
}

.draggable-card.is-dragging {
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28), 0 0 0 2px var(--pcsc-green) !important;
  z-index: 1100 !important;
  cursor: grabbing !important;
  opacity: 0.96;
  transition: none !important;
}

/* 底部地圖條整併之耗時指標 */
.map-bar-perf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 115, 80, 0.09);
  border: 1px solid rgba(0, 115, 80, 0.25);
  color: var(--pcsc-green);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  animation: fadeInBadge 0.3s ease;
}

@keyframes fadeInBadge {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.map-bar-perf-badge .perf-icon {
  font-size: 0.9rem;
}

/* 底部列縮合狀態 */
.map-floating-bar.is-collapsed {
  padding: 6px 14px;
}

.map-floating-bar.is-collapsed .map-controls-left,
.map-floating-bar.is-collapsed .legend-group {
  display: none !important;
}

.map-floating-bar.is-collapsed::before {
  content: "🗺️ 地圖圖例與圖層控制 (已收摺)";
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
}

.alert-danger {
  background: #ffffff;
  border: 1px solid #fca5a5;
  border-left: 5px solid var(--pcsc-red, #ea1d25);
  box-shadow: 0 8px 24px rgba(234, 29, 37, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  color: #1e293b;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 0.9rem;
  margin: 12px 0 16px 0;
  animation: alertFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
  pointer-events: auto;
}

.generic-error-container {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.generic-error-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.generic-error-text {
  flex: 1;
  color: #334155;
  font-weight: 600;
  line-height: 1.45;
  word-break: break-word;
}

.generic-error-close {
  background: transparent;
  border: none;
  font-size: 1.1rem;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}

.generic-error-close:hover {
  background: #f1f5f9;
  color: #334155;
}

/* 🔒 登入憑證逾期專屬高質感提示卡片 */
.alert-auth-expired {
  background: #ffffff;
  border: 1px solid #fde047;
  border-left: 5px solid #eab308;
  box-shadow: 0 10px 28px rgba(234, 179, 8, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 18px 20px;
  border-radius: 14px;
  margin: 12px 0 16px 0;
  animation: alertFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
  pointer-events: auto;
}

.auth-expired-container {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.auth-expired-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(234, 179, 8, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ca8a04;
  flex-shrink: 0;
}

.auth-expired-icon {
  width: 24px;
  height: 24px;
}

.auth-expired-body {
  flex: 1;
  min-width: 0;
}

.auth-expired-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.auth-expired-badge {
  background: #fef08a;
  color: #854d0e;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.auth-expired-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
}

.auth-expired-desc {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.5;
  margin: 0 0 12px 0;
}

.auth-expired-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-alert-relogin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-alert-relogin:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

.relogin-btn-icon {
  width: 16px;
  height: 16px;
}

.btn-alert-dismiss {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-alert-dismiss:hover {
  background: #e2e8f0;
  color: #334155;
}

@keyframes alertFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ======================================================== */
/* 7. 雙翼 HUD 懸浮卡片區 (HUD Content Grid)                 */
/* ======================================================== */
.hud-content-grid {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* 讓 Deck 高度隨內部卡片自動收折，不強制 stretch 拉長到底部 */
  gap: 16px;
  min-height: 0;
  pointer-events: none; /* 讓底層地圖可穿透拖曳縮放 */
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 沉浸模式 (Immersive Map Mode): 收摺所有卡片，讓出完整底圖視野 */
body.immersive-mode .hud-content-grid {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  pointer-events: none;
}

/* 左翼面板 (Left Deck: 商圈數據與 BEP 敏感度試算) */
.hud-left-deck {
  width: 418px;
  flex: 0 0 418px;
  max-width: calc(100vw - 80px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 170px) !important; /* 保留充足底邊安全距離，絕不遮擋或碰撞底部品牌橫幅 */
  padding-right: 6px;
  padding-bottom: 24px;
  pointer-events: none !important; /* 容器穿透：底層地圖可自由拖曳、平移與縮放，徹底消除空白框架遮擋！ */
  overscroll-behavior: contain; /* 滾動邊界阻斷：到達頂部或底部時，絕不串聯滾動縮放底層地圖！ */
  -webkit-overflow-scrolling: touch;
}

/* 左側欄卡片快捷視角切換器 (雙卡並列 / 商圈財務 / 損益試算) */
.deck-view-switcher {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 20px;
  padding: 3px;
  gap: 3px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  align-self: flex-start;
  margin-bottom: 2px;
}

body.dark-mode .deck-view-switcher {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(255, 255, 255, 0.12);
}

.view-switch-btn {
  border: none;
  background: transparent;
  padding: 3px 11px;
  border-radius: 14px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  white-space: nowrap;
}

.view-switch-btn:hover {
  color: #0f172a;
}

.view-switch-btn.active {
  background: #ffffff;
  color: var(--pcsc-green);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

body.dark-mode .view-switch-btn.active {
  background: #334155;
  color: #34d399;
}

.hud-left-deck > * {
  pointer-events: auto !important; /* 實體卡片才攔截指標事件 */
}

.card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
}

/* 確保左側及右側欄內卡片長度100%根據內部內容自適應，不無謂拉長 */
.hud-left-deck .card,
.hud-dynamic-deck .card {
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
}

/* 卡片主體內容區：移除內部多餘滾動軸，徹底杜絕內外兩層滾動條相互衝突卡頓的現象！ */
.card-collapsible-body {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.card-header {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-icon {
  font-size: 1.05rem;
}

.card-header h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
}

.card-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge-pill-light {
  background: rgba(0, 115, 80, 0.08);
  color: var(--pcsc-green);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid rgba(0, 115, 80, 0.15);
}

body.dark-mode .badge-pill-light {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
}

.card-action-btn.btn-float-toggle,
.card-action-btn.btn-pin-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #64748b;
  background: rgba(241, 245, 249, 0.8);
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

body.dark-mode .card-action-btn.btn-float-toggle,
body.dark-mode .card-action-btn.btn-pin-toggle {
  background: rgba(51, 65, 85, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}

.card-action-btn.btn-float-toggle:hover,
.card-action-btn.btn-pin-toggle:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0369a1;
}

.card-action-btn.btn-float-toggle.is-active,
.card-action-btn.btn-pin-toggle.is-active {
  background: #059669 !important;
  color: #ffffff !important;
  border-color: #047857 !important;
  box-shadow: 0 0 8px rgba(5, 150, 105, 0.45);
}

body.dark-mode .card-action-btn.btn-float-toggle.is-active,
body.dark-mode .card-action-btn.btn-pin-toggle.is-active {
  background: #10b981 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.45);
}

.card-body {
  padding: 8px 12px;
  height: auto !important;
  min-height: 0 !important;
}

.metric-table {
  width: 100%;
  border-collapse: collapse;
}

.metric-table td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(241, 245, 249, 0.8);
  font-size: 0.86rem;
}

.td-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.td-value {
  color: var(--text-primary);
  font-weight: 700;
  text-align: right;
  font-family: 'Roboto Mono', monospace;
}

.highlight-green {
  color: var(--pcsc-green);
  font-weight: 800;
}

.formula-note,
.card-formula-note {
  margin-top: 10px;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
  border-top: 1px dashed rgba(203, 213, 225, 0.75);
  padding-top: 8px;
}

body.dark-mode .formula-note,
body.dark-mode .card-formula-note {
  border-top-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

.formula-details {
  width: 100%;
}

.formula-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  user-select: none;
  gap: 8px;
}

.formula-summary::-webkit-details-marker {
  display: none;
}

.formula-summary-left {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary, #334155);
  font-weight: 600;
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

body.dark-mode .formula-summary-left {
  color: #cbd5e1;
}

.formula-summary-left .inline-info-icon {
  width: 13px;
  height: 13px;
  color: #0284c7;
  flex-shrink: 0;
}

body.dark-mode .formula-summary-left .inline-info-icon {
  color: #38bdf8;
}

.formula-toggle-text {
  font-size: 0.68rem;
  font-weight: 500;
  color: #0284c7;
  background: rgba(2, 132, 199, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.formula-summary:hover .formula-toggle-text {
  background: rgba(2, 132, 199, 0.16);
  color: #0369a1;
}

body.dark-mode .formula-toggle-text {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
}

body.dark-mode .formula-summary:hover .formula-toggle-text {
  background: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
}

.formula-expanded-body {
  margin-top: 6px;
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.70rem;
  color: var(--text-muted, #64748b);
  border-left: 2px solid rgba(2, 132, 199, 0.25);
  margin-left: 5px;
}

body.dark-mode .formula-expanded-body {
  color: #94a3b8;
  border-left-color: rgba(56, 189, 248, 0.25);
}

/* ============================================================
   統一精緻毛玻璃卡片系統 (Unified Glassmorphism Card System)
   移除所有強弱分級對比，所有卡片一律統一為「鄰近商圈財務分析」典雅毛玻璃格式
   ============================================================ */

.market-summary-card,
#bepCalcCard,
.hero-decision-card,
.modular-chart-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
  position: relative;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

body.dark-mode .market-summary-card,
body.dark-mode #bepCalcCard,
body.dark-mode .hero-decision-card,
body.dark-mode .modular-chart-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.bep-header,
.summary-header {
  background: rgba(255, 255, 255, 0.35);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

body.dark-mode .bep-header,
body.dark-mode .summary-header {
  background: rgba(15, 23, 42, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* 展店決策評估卡 (BEP Calculator) 統一標籤 */
.header-tag {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.bep-card-body {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: auto !important;
  min-height: 0 !important;
}

.bep-comparison-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) auto minmax(0, 1.05fr) minmax(0, 1.15fr);
  align-items: stretch;
  gap: 4px;
  background: rgba(255, 255, 255, 0.35);
  padding: 5px 4px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.bep-metric-box {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 2px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.bep-metric-box .m-label {
  font-size: var(--font-size-xs);
  color: #64748b;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2px;
  line-height: 1.15;
  word-break: break-word;
  white-space: normal; /* 空間狹小時自然折行，絕不截斷！ */
}

.bep-metric-box .m-val {
  font-size: clamp(0.92rem, 1.05vw, 1.05rem);
  font-weight: 800;
  font-family: 'Roboto Mono', monospace;
  line-height: 1.2;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.bep-metric-box .m-sub {
  font-size: var(--font-size-xs);
  color: #94a3b8;
  white-space: nowrap;
  text-align: center;
  margin-top: 1px;
}

.metric-pred .m-val { color: var(--pcsc-green); }
.metric-bep .m-val { color: var(--pcsc-orange); }

.metric-margin.safe {
  border: 1px solid #86efac;
  background: #f0fdf4;
}
.metric-margin.safe .m-val { color: var(--pcsc-green); }

.metric-margin.warning {
  border: 1px solid #fca5a5;
  background: #fff1f2;
}
.metric-margin.warning .m-val { color: var(--pcsc-red); }

.bep-metric-vs {
  font-size: 0.72rem;
  font-weight: 800;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1px;
}

body.dark-mode .bep-comparison-row {
  background: rgba(15, 23, 42, 0.35);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .bep-metric-box {
  background: rgba(30, 41, 59, 0.55);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .metric-margin.safe {
  background: rgba(6, 78, 59, 0.35);
  border-color: rgba(52, 211, 153, 0.4);
}

body.dark-mode .metric-margin.warning {
  background: rgba(153, 27, 27, 0.3);
  border-color: rgba(248, 113, 113, 0.4);
}

.calculator-bar {
  background: rgba(255, 243, 224, 0.45);
  border: 1px solid rgba(255, 216, 168, 0.65);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* 避免在窄寬度時硬生生切掉每坪租金 */
  gap: 6px 8px;
}

.calc-input-wrap, .calc-rent-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}

.calc-text {
  font-size: 0.82rem;
  color: #9a3412;
  font-weight: 600;
}

.calc-divider {
  color: var(--pcsc-orange);
  opacity: 0.4;
}

.calc-input {
  width: 52px;
  padding: 2px 4px;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  border: 1.5px solid rgba(255, 108, 0, 0.6);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.7);
  color: #9a3412;
  outline: none;
}

.calc-rent-input {
  width: 72px;
}

.calc-input:focus {
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 108, 0, 0.2);
}

.calc-input.calc-input-error {
  border-color: #ef4444 !important;
  background: rgba(254, 242, 242, 0.9) !important;
  box-shadow: 0 0 0 2.5px rgba(239, 68, 68, 0.3) !important;
  animation: inputShake 0.35s ease-in-out;
}

@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-3px); }
  40%, 80% { transform: translateX(3px); }
}

body.dark-mode .calculator-bar {
  background: rgba(67, 20, 7, 0.35);
  border-color: rgba(251, 146, 60, 0.25);
}

body.dark-mode .calc-text {
  color: #fdba74;
}

body.dark-mode .calc-input {
  background: rgba(30, 41, 59, 0.65);
  color: #fed7aa;
  border-color: rgba(251, 146, 60, 0.4);
}

body.dark-mode .calc-input:focus {
  background: rgba(30, 41, 59, 0.9);
  border-color: #fb923c;
  box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.3);
}

body.dark-mode .calc-input.calc-input-error {
  border-color: #f87171 !important;
  background: rgba(69, 10, 10, 0.6) !important;
  box-shadow: 0 0 0 2.5px rgba(248, 113, 113, 0.35) !important;
}

.calc-highlight {
  font-weight: 800;
  color: var(--pcsc-orange);
  font-size: 0.95rem;
  font-family: 'Roboto Mono', monospace;
}

.calc-subtext {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.calc-eval-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(255, 255, 255, 0.4);
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.6);
}

body.dark-mode .calc-eval-box {
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(255, 255, 255, 0.08);
}

.eval-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.74rem;
  width: fit-content;
}

.eval-badge.safe {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.eval-badge.warning {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

#calcEvalText {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-primary);
  font-weight: 500;
}

/* 展店決策評估卡片專屬 AI 診斷按鈕 */
.card-agent-trigger-box {
  margin: 5px 0 2px;
}

.btn-card-expansion-agent {
  width: 100%;
  padding: 8px 16px;
  background: linear-gradient(135deg, #ff8533 0%, #ff6c00 50%, #e65100 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9999px;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(255, 108, 0, 0.38);
}

.btn-card-expansion-agent:hover {
  background: linear-gradient(135deg, #ff944d 0%, #ff6c00 50%, #d84315 100%);
  color: #ffffff;
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 6px 20px rgba(255, 108, 0, 0.48);
}

.btn-card-expansion-agent:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 2px 8px rgba(255, 108, 0, 0.3);
}

.btn-agent-sparkle {
  animation: pulseBadge 1.5s infinite;
}

/* ======================================================== */
/* 8. 右翼自選模組化圖卡層 (Modular Dynamic Deck)             */
/* ======================================================== */
.hud-dynamic-deck {
  width: 440px;
  flex: 0 0 440px;
  margin-left: auto;
  margin-right: 64px; /* 避讓地圖右側垂直懸浮工具列 (.map-floating-toolbar 寬 52px + 18px 邊距)，預設打開卡片絕不被工具列覆蓋遮擋 */
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 145px);
  padding-top: 4px;
  padding-right: 6px;
  padding-bottom: 40px;
  pointer-events: none; /* 容器穿透，徹底解決右半部地圖變箭頭無法拖曳的問題 */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hud-dynamic-deck:has(#cardStoreTable:not([style*="display: none"]):not(.is-collapsed)) {
  width: min(840px, calc(100vw - 80px));
  flex: 0 0 min(840px, calc(100vw - 80px));
  max-width: calc(100vw - 80px);
}

.hud-dynamic-deck:has(#cardStoreTable.is-collapsed) {
  width: auto !important;
  flex: 0 0 auto !important;
  max-width: 260px !important;
}

#cardStoreTable.is-collapsed {
  width: 240px !important;
  min-width: 240px !important;
  max-width: 260px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  border-radius: 20px !important;
  padding: 0 12px !important;
  margin-left: auto !important;
  overflow: hidden !important;
}

#cardStoreTable.is-collapsed .table-card-header {
  padding: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#cardStoreTable.is-collapsed .card-title {
  font-size: 0.8rem !important;
  max-width: 100px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#cardStoreTable.is-collapsed .btn-reset-sort,
#cardStoreTable.is-collapsed .btn-maximize-card,
#cardStoreTable.is-collapsed .meta-tag,
#cardStoreTable.is-collapsed .store-table-toolbar,
#cardStoreTable.is-collapsed .card-collapsible-body {
  display: none !important;
}

.table-card-header .card-header-actions {
  margin-left: auto;
  flex-shrink: 0;
}

.hud-dynamic-deck > * {
  pointer-events: auto; /* 實體卡片才攔截指標事件 */
}

.modular-chart-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  transition: transform 0.25s ease, box-shadow 0.25s ease, height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: slideInModularCard 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 浮動圖表卡片：預設標準寬度 440px，防止脫離 Deck 後因 width: 100% 橫向拉滿螢幕變成扁平長條 */
.modular-chart-card.is-floating-card:not(.table-card):not(.is-maximized) {
  width: 440px;
  max-width: calc(100vw - 32px);
}

/* 在右側動態 Deck 中，非明細表圖卡寬度上限 440px，避免被明細表 (840px) 撐成長條 */
.hud-dynamic-deck .modular-chart-card:not(.table-card):not(.is-maximized) {
  width: 440px;
  max-width: 100%;
  margin-left: auto;
}

@keyframes slideInModularCard {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modular-chart-card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.22);
  cursor: grab;
  user-select: none;
}

.modular-chart-card .card-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.modular-chart-card .card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modular-chart-card .chart-canvas-wrapper {
  position: relative;
  width: 100%;
  padding: 10px;
  flex: 1;
}

/* 非滿版狀態下，圖表畫布容器預設標準高度 240px，嚴防滿版退出後被 canvas 殘留高度撐成直立長條 */
.modular-chart-card:not(.table-card):not(.is-maximized) .chart-canvas-wrapper {
  height: 240px !important;
  max-height: 240px !important;
  min-height: 220px;
}

/* 滿版狀態下，畫布容器自適應展開 */
.modular-chart-card.is-maximized .chart-canvas-wrapper {
  height: calc(100% - 48px) !important;
  max-height: none !important;
  min-height: 300px;
}

.modular-chart-card .card-collapsible-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.modular-chart-card.table-card {
  width: 100%;
}

.modular-chart-card.table-card .card-body {
  padding: 8px 12px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

/* 關閉圖卡按鈕樣式 */
.btn-close-card {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.04);
  color: #64748b;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}

.btn-close-card:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
  transform: scale(1.1);
}

body.dark-mode .btn-close-card {
  background: rgba(51, 65, 85, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
  color: #94a3b8;
}

body.dark-mode .btn-close-card:hover {
  background: rgba(220, 38, 38, 0.25);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.45);
}

/* ======================================================== */
/* 8.5 自選圖卡下拉選單 (Chart Selector Dropdown)             */
/* ======================================================== */
.chart-selector-container {
  position: relative;
  display: inline-block;
}

.btn-chart-selector {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 115, 80, 0.35);
  color: var(--pcsc-green);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 115, 80, 0.08);
}

.btn-chart-selector:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--pcsc-green);
  box-shadow: 0 4px 12px rgba(0, 115, 80, 0.18);
  transform: translateY(-1px);
}

body.dark-mode .btn-chart-selector {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(52, 211, 153, 0.35);
  color: #34d399;
}

body.dark-mode .btn-chart-selector:hover {
  background: rgba(15, 23, 42, 0.85);
  border-color: #34d399;
}

.btn-chart-selector .selector-badge {
  background: var(--pcsc-green);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 2px;
}

.btn-chart-selector .selector-arrow {
  font-size: 0.72rem;
  color: #64748b;
  transition: transform 0.2s ease;
}

.chart-selector-container.open .selector-arrow {
  transform: rotate(180deg);
}

.chart-selector-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-height: 440px;
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.14), inset 0 1px 1px 0 rgba(255, 255, 255, 0.85);
  padding: 12px;
  z-index: 1050;
  animation: dropdownPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

body.dark-mode .chart-selector-dropdown {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.14);
  color: #f8fafc;
}

@keyframes dropdownPop {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.selector-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.65);
}

body.dark-mode .selector-dropdown-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dropdown-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
}

body.dark-mode .dropdown-title {
  color: #f8fafc;
}

.dropdown-quick-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-quick-text {
  background: none;
  border: none;
  color: var(--pcsc-green);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}

.btn-quick-text:hover {
  background: rgba(0, 115, 80, 0.08);
  text-decoration: underline;
}

.quick-sep {
  color: #cbd5e1;
  font-size: 0.75rem;
}

.selector-options-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.selector-option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: rgba(255, 255, 255, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.selector-option-row:hover {
  background: rgba(0, 115, 80, 0.12);
  border-color: rgba(0, 115, 80, 0.3);
}

body.dark-mode .selector-option-row {
  background: rgba(30, 41, 59, 0.35);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .selector-option-row:hover {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.35);
}

.selector-option-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--pcsc-green);
  cursor: pointer;
}

.selector-option-row .opt-label {
  font-size: 0.82rem;
  color: #334155;
  font-weight: 600;
  line-height: 1.3;
}

.selector-option-row .opt-num {
  color: var(--pcsc-green);
}

/* 商圈門市明細表 (寬版比例與自適應滾動) */
.modular-chart-card.table-card {
  min-width: 780px;
  width: min(880px, calc(100vw - 120px));
  max-width: 96vw;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.table-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  flex-wrap: nowrap;
  background: rgba(248, 250, 252, 0.85);
  border-bottom: 1px solid var(--border-color);
}

.table-card-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.table-card-header-left .card-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
}

.filter-pill-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
  flex-shrink: 0;
}

.store-table-toolbar {
  padding: 8px 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.75);
  background: rgba(248, 250, 252, 0.6);
  display: flex;
  align-items: center;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}

body.dark-mode .store-table-toolbar {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.45);
}

.btn-reset-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
  border: 1px solid rgba(2, 132, 199, 0.3);
  border-radius: 12px;
  padding: 2px 9px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.btn-reset-sort:hover {
  background: #0284c7;
  color: #ffffff;
}

body.dark-mode .btn-reset-sort {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.35);
}

body.dark-mode .btn-reset-sort:hover {
  background: #38bdf8;
  color: #0f172a;
}

/* 卡片最大化滿版模式 */
.modular-chart-card.is-maximized {
  position: fixed !important;
  top: 72px !important;
  left: 20px !important;
  right: 20px !important;
  width: calc(100vw - 40px) !important;
  max-width: none !important;
  height: calc(100vh - 90px) !important;
  max-height: none !important;
  z-index: 1200 !important;
  transform: none !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

.modular-chart-card.is-maximized .card-collapsible-body {
  height: calc(100% - 50px);
}

.modular-chart-card.is-maximized .card-body {
  height: calc(100% - 52px);
}

.modular-chart-card.is-maximized .table-responsive {
  max-height: 100% !important;
  height: 100% !important;
}

.filter-pill {
  white-space: nowrap !important;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(241, 245, 249, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(203, 213, 225, 0.65);
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-pill:hover {
  background: rgba(226, 232, 240, 0.85);
  color: var(--text-primary);
}

.filter-pill.active {
  background: var(--pcsc-green);
  color: #ffffff;
  border-color: var(--pcsc-green);
  box-shadow: 0 2px 6px rgba(0, 115, 80, 0.25);
}

body.dark-mode .filter-pill {
  background: rgba(30, 41, 59, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}

body.dark-mode .filter-pill:hover {
  background: rgba(51, 65, 85, 0.75);
  color: #ffffff;
}

.meta-tag {
  background: rgba(226, 232, 240, 0.8);
  color: #475569;
  font-size: 0.76rem;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
}

.table-responsive {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 190px);
  scrollbar-width: thin;
}

/* 浮動卡片模式下，卡片本體安全自適應螢幕，並支援手動 Resize */
.draggable-card.is-floating-card.table-card,
#cardStoreTable.is-floating-card {
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

#cardStoreTable .card-collapsible-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#cardStoreTable .table-responsive {
  flex: 1;
  min-height: 0;
}

#storeDetailTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.84rem;
  text-align: left;
}

#storeDetailTable th {
  background: #f8fafc;
  color: #334155;
  font-weight: 700;
  padding: 8px 10px;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 2px solid #cbd5e1;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

#storeDetailTable th.sortable-th {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#storeDetailTable th.sortable-th:hover {
  background-color: #f1f5f9;
  color: #0f172a;
}

#storeDetailTable th.sortable-th.active-sort {
  color: #0284c7;
  border-bottom-color: #0284c7;
}

#storeDetailTable th .sort-icon {
  display: inline-block;
  margin-left: 3px;
  font-size: 0.72rem;
  color: #94a3b8;
  vertical-align: middle;
}

#storeDetailTable th.active-sort .sort-icon {
  color: #0284c7;
  font-weight: 800;
}

/* 凍結前兩欄（品牌與店名）水平固定 */
#storeDetailTable th:nth-child(1),
#storeDetailTable td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 5;
  background: #ffffff;
  min-width: 82px;
}

#storeDetailTable th:nth-child(2),
#storeDetailTable td:nth-child(2) {
  position: sticky;
  left: 82px;
  z-index: 5;
  background: #ffffff;
  min-width: 120px;
  border-right: 2px solid rgba(203, 213, 225, 0.7);
  box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.06);
}

#storeDetailTable th:nth-child(1),
#storeDetailTable th:nth-child(2) {
  z-index: 15;
  background: #f8fafc;
}

#storeDetailTable td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(241, 245, 249, 0.9);
  color: #1e293b;
  white-space: nowrap;
  background: #ffffff;
}

#storeDetailTable tbody tr:hover td {
  background: #f8fafc;
}

/* 地圖點選連動高亮列 */
#storeDetailTable tbody tr.table-row-highlight td {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  font-weight: 600;
}

#storeDetailTable tbody tr.table-row-highlight {
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
}

/* ======================================================== */
/* 9. 底部懸浮 HUD 控制 Dock (Map Bar + FABs 並排不重疊)    */
/* ======================================================== */
.hud-bottom-dock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  flex-shrink: 0;
  pointer-events: none;
  z-index: 25;
}

.hud-bottom-dock > * {
  pointer-events: auto;
}

/* 懸浮於底列框架上方的地圖指標膠囊 (Floating Subtitle Badge Above Map Card) */
.map-floating-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08), inset 0 1px 1px #ffffff;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  margin-left: 2px;
}

.map-floating-subtitle .floating-subtitle-icon {
  width: 14px;
  height: 14px;
  color: var(--pcsc-green);
  flex-shrink: 0;
}

.map-floating-subtitle .map-subtitle-text {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

body.dark-mode .map-floating-subtitle {
  background: rgba(15, 23, 42, 0.65) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}

body.dark-mode .map-floating-subtitle .floating-subtitle-icon {
  color: #34d399 !important;
}

.map-floating-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 18px;
  border-radius: 20px; /* 統一與頂部 floating-header-bar 一致的 20px 圓角 */
  font-size: 0.82rem;
  color: #334155;
  flex-wrap: wrap;
  gap: 12px;
  z-index: 15;
}

.map-controls-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* 氣泡大小 / 3D 柱狀比例尺無框呈現 (自然融入底欄，不額外加框) */
.legend-psd-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 4px;
  height: 32px;
  box-sizing: border-box;
  flex-shrink: 0;
}

body.dark-mode .legend-psd-inline {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.map-mode-switch-group {
  display: inline-flex;
  align-items: center;
  background: rgba(241, 245, 249, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(203, 213, 225, 0.6);
  border-radius: var(--radius-full); /* 統一為全域膠囊圓角 (9999px) */
  padding: 3px;
  gap: 4px;
  transition: all 0.2s ease;
}

body.dark-mode .map-mode-switch-group {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

.map-mode-btn {
  border: none;
  background: transparent;
  padding: 5px 14px;
  border-radius: var(--radius-full); /* 統一為全域膠囊圓角 (9999px) */
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.map-mode-btn .mode-icon-svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2px;
}

.map-mode-btn:hover:not(.active) {
  color: #0f172a;
}

.map-mode-btn.active {
  background: #ffffff;
  color: var(--pcsc-green);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  font-weight: 700;
}

/* 深色模式下的地圖圖示/品牌切換器 */
body.dark-mode .map-mode-switch-group {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.14);
}

body.dark-mode .map-mode-btn {
  color: #94a3b8;
}

body.dark-mode .map-mode-btn:hover:not(.active) {
  color: #f8fafc;
}

body.dark-mode .map-mode-btn.active {
  background: rgba(15, 23, 42, 0.95);
  color: #34d399;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(52, 211, 153, 0.3);
  font-weight: 700;
}

.map-legend-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.legend-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-title {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.78rem;
}

.bubble-scale {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.bubble-sample {
  border-radius: 50%;
  background: rgba(0, 115, 80, 0.45);
  border: 1.5px solid var(--pcsc-green);
  display: inline-block;
}

.bubble-sm { width: 8px; height: 8px; }
.bubble-md { width: 14px; height: 14px; }
.bubble-lg { width: 20px; height: 20px; }

.legend-brands {
  display: flex;
  gap: 8px;
  align-items: center;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.65);
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.legend-item:hover {
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.legend-item.legend-target-anchor {
  cursor: pointer;
  background: rgba(254, 242, 242, 0.85);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #dc2626;
  opacity: 1 !important;
  font-weight: 700;
}

.legend-item.legend-target-anchor:hover {
  background: #fee2e2;
  border-color: #ef4444;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

.legend-item[data-brand-filter="all"].active,
.legend-item[data-brand-filter="all"].checked {
  border-color: #007350;
  color: #007350;
  font-weight: 800;
}

.legend-item.active,
.legend-item.checked {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  opacity: 1;
}

.legend-item[data-brand-filter="7-11"].active,
.legend-item[data-brand-filter="7-11"].checked {
  border-color: #007350;
  color: #007350;
}

.legend-item[data-brand-filter="family"].active,
.legend-item[data-brand-filter="family"].checked {
  border-color: #005bac;
  color: #005bac;
}

.legend-item[data-brand-filter="591"].active,
.legend-item[data-brand-filter="591"].checked {
  border-color: #f97316;
  color: #ea580c;
}

.legend-item[data-brand-filter="target"].active,
.legend-item[data-brand-filter="target"].checked {
  border-color: #ef4444;
  color: #dc2626;
}

.legend-item.dimmed,
.legend-item.unchecked {
  opacity: 0.35;
  background: rgba(241, 245, 249, 0.4);
  border-color: transparent;
  color: #94a3b8;
  box-shadow: none;
}

body.dark-mode .legend-item {
  background: rgba(30, 41, 59, 0.65);
  border-color: rgba(51, 65, 85, 0.6);
  color: #cbd5e1;
}

body.dark-mode .legend-item:hover {
  background: #1e293b;
}

body.dark-mode .legend-item.active,
body.dark-mode .legend-item.checked {
  background: #1e293b;
  border-color: #475569;
  color: #f8fafc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

body.dark-mode .legend-item[data-brand-filter="7-11"].active,
body.dark-mode .legend-item[data-brand-filter="7-11"].checked {
  border-color: #10b981;
  color: #34d399;
}

body.dark-mode .legend-item[data-brand-filter="family"].active,
body.dark-mode .legend-item[data-brand-filter="family"].checked {
  border-color: #38bdf8;
  color: #38bdf8;
}

body.dark-mode .legend-item[data-brand-filter="591"].active,
body.dark-mode .legend-item[data-brand-filter="591"].checked {
  border-color: #fb923c;
  color: #fb923c;
}

body.dark-mode .legend-item[data-brand-filter="target"].active,
body.dark-mode .legend-item[data-brand-filter="target"].checked {
  border-color: #f87171;
  color: #f87171;
}

body.dark-mode .legend-item.dimmed,
body.dark-mode .legend-item.unchecked {
  opacity: 0.32;
  background: rgba(15, 23, 42, 0.4);
  border-color: transparent;
  color: #64748b;
}

.isochrone-engine-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px;
  border-radius: 999px;
}

.engine-toggle-pill {
  padding: 3px 9px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.engine-toggle-pill:hover {
  color: #0f172a;
}

.engine-toggle-pill.active {
  background: #ffffff;
  color: #0284c7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-brand-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 4px;
  vertical-align: middle;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  padding: 1px;
}

.legend-target-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  vertical-align: middle;
}

.dot-seven { background: var(--pcsc-green); }
.dot-target { background: var(--pcsc-red); }
.dot-family { background: #0288d1; }
.dot-591 { background: #f59e0b; }
.dot-hilife { background: #ed1b24; }
.dot-ok { background: #0052FF; }
.dot-pxmart { background: #003399; }
.dot-simplemart { background: #A8007B; }
.dot-shopee { background: #ee4d2d; }
.dot-generic { background: #64748b; }

.tag-seven { background: rgba(0, 115, 80, 0.12); color: #007350; border: 1px solid rgba(0, 115, 80, 0.25); }
.tag-family { background: rgba(2, 136, 209, 0.12); color: #0288d1; border: 1px solid rgba(2, 136, 209, 0.25); }
.tag-hilife { background: rgba(237, 27, 36, 0.12); color: #ed1b24; border: 1px solid rgba(237, 27, 36, 0.25); }
.tag-ok { background: rgba(0, 82, 255, 0.12); color: #0052FF; border: 1px solid rgba(0, 82, 255, 0.25); }
.tag-pxmart { background: rgba(0, 51, 153, 0.12); color: #003399; border: 1px solid rgba(0, 51, 153, 0.25); }
.tag-simplemart { background: rgba(168, 0, 123, 0.12); color: #A8007B; border: 1px solid rgba(168, 0, 123, 0.25); }
.tag-shopee { background: rgba(238, 77, 45, 0.12); color: #ee4d2d; border: 1px solid rgba(238, 77, 45, 0.25); }
.tag-generic { background: rgba(100, 116, 139, 0.12); color: #475569; border: 1px solid rgba(100, 116, 139, 0.25); }

/* 地圖點位 Tooltip & Overlap Popup */
.map-hover-box {
  padding: 6px 8px;
  font-size: 12px;
  color: #1e293b;
  line-height: 1.45;
}

.map-hover-header {
  font-weight: 800;
  color: #0f172a;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 3px;
  margin-bottom: 4px;
}

.popup-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.popup-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  color: #ffffff;
}

.popup-badge.seven { background: #00875a; }
.popup-badge.family { background: #0288d1; }
.popup-badge.shopee { background: #ee4d2d; }
.popup-badge.hilife { background: #ed1b24; }
.popup-badge.ok { background: #0052FF; }
.popup-badge.pxmart { background: #003399; }
.popup-badge.simplemart { background: #A8007B; }
.popup-badge.target { background: #d32f2f; }
.popup-badge.rent591 { background: #f59e0b; }

.popup-metric {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 2px 0;
  color: #475569;
}

/* ======================================================== */
/* 10. 懸浮按鈕 (FAB) 與 BQCA 對話抽屜                      */
/* ======================================================== */
.floating-fab-group {
  position: fixed !important;
  right: 22px !important;
  bottom: 80px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 在尚未進入正式儀表板 (登入卡片 / 中央搜尋首頁開啟 / AI 運算進行中) 時，完全隱藏右下角懸浮按鈕組 */
#landingPortal:not(.is-hidden) ~ .floating-fab-group,
#landingPortal:not(.is-hidden) ~ #floatingFabGroup,
.landing-portal-active .floating-fab-group,
body.is-analyzing .floating-fab-group,
body.is-analyzing #floatingFabGroup,
.floating-fab-group.is-hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* 次世代 HUD 液態磨砂玻璃功能按鈕 (放大至 52px，圖示 24px) */
.floating-circle-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), var(--glass-shadow);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
}

.fab-svg-icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  transition: transform 0.25s ease, stroke 0.25s ease;
}

.fab-pulse-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--glass-bg);
}

.fab-pulse-dot.ai-dot {
  background-color: var(--pcsc-green);
  box-shadow: 0 0 6px rgba(0, 115, 80, 0.8);
}

.fab-pulse-dot.feedback-dot {
  background-color: #2563eb;
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.8);
}

.btn-bqca-fab:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--pcsc-green);
  color: var(--pcsc-green);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(0, 115, 80, 0.3), var(--glass-shadow);
}

.btn-bqca-fab:hover .fab-svg-icon {
  transform: scale(1.12);
}

/* 次世代 HUD 長橢圓形膠囊懸浮按鈕 (Pill Capsule Floating FAB) */
.floating-pill-fab {
  height: 46px;
  min-width: 96px;
  padding: 0 16px;
  border-radius: 9999px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), var(--glass-shadow);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.uni-ai-fab-logo {
  height: 26px;
  width: auto;
  object-fit: contain;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  user-select: none;
}

.floating-pill-fab:hover .uni-ai-fab-logo {
  transform: scale(1.08);
}

/* 展店 Uni AI 助手長橢圓膠囊按鈕專屬樣式 (7-ELEVEN 品牌雙色融合) */
.btn-expansion-fab {
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid rgba(0, 115, 80, 0.28);
  box-shadow: 0 8px 24px -4px rgba(0, 115, 80, 0.18), 0 4px 12px rgba(255, 108, 0, 0.12), var(--glass-shadow);
}

body.dark-mode .btn-expansion-fab {
  background: rgba(15, 23, 42, 0.90);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.12);
}

.btn-expansion-fab:hover {
  background: #ffffff;
  border-color: #007350;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 30px -4px rgba(0, 115, 80, 0.28), 0 6px 16px rgba(255, 108, 0, 0.18);
}

body.dark-mode .btn-expansion-fab:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(255, 108, 0, 0.6);
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.75);
}

.floating-pill-fab .fab-pulse-dot.expansion-dot {
  position: absolute;
  top: -2px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #ff6c00;
  border: 1.5px solid var(--glass-bg);
  box-shadow: 0 0 8px rgba(255, 108, 0, 0.9);
}

.btn-feedback-fab:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: #2563eb;
  color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.3), var(--glass-shadow);
}

.btn-feedback-fab:hover .fab-svg-icon {
  transform: scale(1.12);
}

.fab-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  left: auto;
  bottom: auto;
  transform: translateY(-50%) translateX(6px);
  background: rgba(15, 23, 42, 0.92);
  color: #ffffff;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.floating-circle-btn:hover .fab-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.fab-pulse-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  background-color: #ff6c00;
  border: 2px solid #ffffff;
  border-radius: 50%;
  animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 108, 0, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(255, 108, 0, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 108, 0, 0); }
}

/* BQCA & 展店 AI 對話抽屜 (液態磨砂玻璃 Liquid Frosted Glass) */
.bqca-chat-panel {
  position: fixed;
  bottom: 76px;
  right: 76px; /* 往左移開，避免遮擋右側 FAB 懸浮群組與邊界 */
  width: clamp(340px, 26vw, 420px);
  max-width: calc(100vw - 32px);
  height: clamp(440px, 60vh, 580px);
  max-height: calc(100vh - 125px);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  animation: slideUpFade 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 1px 2px rgba(255, 255, 255, 0.95) !important;
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.bqca-panel-header {
  flex-shrink: 0;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.75) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), inset 0 1px 1px rgba(255, 255, 255, 0.85) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bqca-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bqca-avatar {
  font-size: 1.25rem;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 1px 1px #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bqca-header-title h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.bqca-subtitle {
  font-size: 0.74rem;
  color: var(--text-secondary);
  display: block;
}

.bqca-header-actions {
  display: flex;
  gap: 6px;
}

.bqca-btn-ctrl {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), inset 0 1px 1px #ffffff;
  border-radius: 9px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.95rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.bqca-btn-ctrl:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-primary);
  transform: scale(1.05);
}

.bqca-knowledge-strip {
  flex-shrink: 0;
  padding: 6px 14px;
  background: rgba(241, 245, 249, 0.85);
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
  display: flex;
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 0.74rem;
}

.knowledge-pill {
  background: #ffffff;
  color: #334155;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  font-weight: 500;
}

.bqca-chips-container {
  flex-shrink: 0;
  padding: 8px 14px 4px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
}

.bqca-chip {
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.bqca-chip:hover {
  background: #e0e7ff;
}

.bqca-messages-container {
  flex: 1 1 0;
  min-height: 0;
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bqca-message {
  display: flex;
  flex-direction: column;
  max-width: 90%;
}

.bqca-message.user { align-self: flex-end; }
.bqca-message.bot { align-self: flex-start; }

.bqca-bubble {
  padding: 12px 15px;
  border-radius: 16px;
  font-size: 0.90rem;
  line-height: 1.6;
  word-break: break-word;
}

.bqca-message.user .bqca-bubble {
  background: linear-gradient(135deg, rgba(0, 115, 80, 0.92) 0%, rgba(0, 135, 94, 0.96) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 14px rgba(0, 115, 80, 0.32), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  border-bottom-right-radius: 4px;
}

.bqca-message.bot .bqca-bubble {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.95);
  border-bottom-left-radius: 4px;
}

.bqca-input-bar {
  flex-shrink: 0;
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.50);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.02), inset 0 1px 1px rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  gap: 8px;
}

.bqca-textarea {
  flex: 1;
  resize: none;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(203, 213, 225, 0.7);
  border-radius: 14px;
  padding: 9px 12px;
  font-size: 0.9rem;
  outline: none;
  font-family: inherit;
  color: var(--text-primary);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.bqca-textarea:focus {
  background: rgba(255, 255, 255, 0.8);
  border-color: #007350;
  box-shadow: 0 0 0 3px rgba(0, 115, 80, 0.16);
}

.btn-send-bqca {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--pcsc-green);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-send-bqca:hover:not(:disabled) {
  background: #00875e;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 115, 80, 0.35);
}

.btn-send-bqca:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-send-bqca svg {
  display: block;
}

/* 展店 AI 助手面板與 Markdown 美化 (7-ELEVEN 品牌經典活力橘 #FF6C00 + 液態磨砂玻璃) */
.expansion-chat-panel {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 20px 50px rgba(255, 108, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 1px 2px rgba(255, 255, 255, 0.95) !important;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.3s ease, box-shadow 0.3s ease;
}

/* 浮動狀態下 Header 作為拖曳手柄 */
.expansion-chat-panel:not(.is-docked-sidebar) .bqca-panel-header {
  cursor: grab;
  user-select: none;
}
.expansion-chat-panel:not(.is-docked-sidebar) .bqca-panel-header:active {
  cursor: grabbing;
}

/* ======================================================== */
/* 展店 AI 助手：雙模設計 (預設浮動小視窗 + Gemini 固定側欄) */
/* ======================================================== */

/* 絕對隱藏規則：只要有 .is-hidden 或是 inline style 包含 display: none，必定完全隱藏且不可點擊 */
.expansion-chat-panel.is-hidden,
.expansion-chat-panel[style*="display: none"],
.expansion-chat-panel[style*="display:none"],
.expansion-chat-backdrop.is-hidden,
.expansion-chat-backdrop[style*="display: none"],
.expansion-chat-backdrop[style*="display:none"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 1. 展開為固定側欄模式 (像問問 GEMINI 功能側邊欄一樣，整體工作區向左收縮) */
.expansion-chat-panel.is-docked-sidebar {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: var(--expansion-panel-width, 460px) !important;
  min-width: 340px !important;
  max-width: calc(100vw - 100px) !important;
  height: 100vh !important;
  max-height: 100vh !important;
  /* 依使用者需求：側欄本體頂部與底部完全貼齊邊界 (border-radius: 0)，頂部左側由專屬內凹圓角 (fillet) 平滑銜接主舞台，徹底消除白角 */
  border-radius: 0 !important;
  border: none !important;
  border-left: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(36px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(200%) !important;
  box-shadow: -10px 0 36px rgba(15, 23, 42, 0.12) !important;
  z-index: 1060 !important;
  display: flex;
  flex-direction: column !important;
  overflow: visible !important;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

body.dark-mode .expansion-chat-panel.is-docked-sidebar {
  background: rgba(15, 23, 42, 0.96) !important;
  border-left-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: -10px 0 36px rgba(0, 0, 0, 0.6) !important;
}

/* 側欄模式頂部平滑內凹圓角 (Docked Concave Corner Fillet - 依使用者橘色手繪線條設計) */
.expansion-corner-fillet {
  display: none;
  position: absolute;
  top: 0;
  left: -40px;
  width: 40px;
  height: 40px;
  pointer-events: none;
  z-index: 1065;
  overflow: visible;
}

.expansion-chat-panel.is-docked-sidebar .expansion-corner-fillet {
  display: block !important;
}

.expansion-corner-fillet .fillet-fill {
  fill: rgba(255, 255, 255, 0.94);
  transition: fill 0.25s ease;
}

.expansion-corner-fillet .fillet-stroke {
  stroke: rgba(226, 232, 240, 0.95);
  transition: stroke 0.25s ease;
}

body.dark-mode .expansion-corner-fillet .fillet-fill {
  fill: rgba(15, 23, 42, 0.96);
}

body.dark-mode .expansion-corner-fillet .fillet-stroke {
  stroke: rgba(255, 108, 0, 0.55);
}

.expansion-chat-panel.is-docked-sidebar .bqca-panel-header {
  cursor: default !important;
}

/* 左右拉動對話視窗寬度手柄 (Left Resize Handle for Docked Panel) */
.expansion-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -5px;
  width: 10px;
  cursor: col-resize;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  user-select: none;
}

.resize-handle-bar {
  width: 3px;
  height: 52px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.45);
  transition: all 0.2s ease;
}

.expansion-resize-handle:hover .resize-handle-bar,
body.is-resizing-ai-panel .resize-handle-bar {
  background: var(--pcsc-orange);
  height: 76px;
  width: 4px;
  box-shadow: 0 0 10px rgba(255, 108, 0, 0.6);
}

body.is-resizing-ai-panel {
  user-select: none !important;
  cursor: col-resize !important;
}

/* 當 AI 助手展開為固定側欄時，像問問 GEMINI 功能側邊欄一樣：整體工作區與底圖自適應收縮，絕不被遮擋 */
body.expansion-chat-docked .hud-app-layout,
body:has(#expansionChatPanel.is-docked-sidebar:not([style*="display: none"]):not(.is-hidden)) .hud-app-layout {
  width: calc(100vw - var(--expansion-panel-width, 460px)) !important;
  max-width: calc(100vw - var(--expansion-panel-width, 460px)) !important;
  right: var(--expansion-panel-width, 460px) !important;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body.expansion-chat-docked .bg-map-layer,
body:has(#expansionChatPanel.is-docked-sidebar:not([style*="display: none"]):not(.is-hidden)) .bg-map-layer {
  width: calc(100vw - var(--expansion-panel-width, 460px)) !important;
  max-width: calc(100vw - var(--expansion-panel-width, 460px)) !important;
  right: var(--expansion-panel-width, 460px) !important;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body.expansion-chat-docked .map-floating-toolbar,
body:has(#expansionChatPanel.is-docked-sidebar:not([style*="display: none"]):not(.is-hidden)) .map-floating-toolbar {
  right: calc(var(--expansion-panel-width, 460px) + 16px) !important;
  transition: right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body.expansion-chat-docked .floating-fab-group,
body.expansion-chat-docked #floatingFabGroup,
body:has(#expansionChatPanel.is-docked-sidebar:not([style*="display: none"]):not(.is-hidden)) .floating-fab-group,
body:has(#expansionChatPanel.is-docked-sidebar:not([style*="display: none"]):not(.is-hidden)) #floatingFabGroup {
  right: calc(var(--expansion-panel-width, 460px) + 20px) !important;
  transition: right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. 預設浮動小聊天視窗模式 (依圖 2 & 圖 3：懸浮於 Uni AI icon 正上方，調高視窗高度賦予更多對話空間) */
.expansion-chat-panel:not(.is-docked-sidebar) {
  position: fixed !important;
  right: 22px !important;
  bottom: 138px !important; /* Uni AI 按鈕高 46px 且 bottom: 80px，此處 138px 完美懸浮於其正上方 */
  left: auto !important;
  top: auto !important;
  width: clamp(380px, 30vw, 460px) !important;
  height: clamp(600px, 72vh, 760px) !important;
  max-height: calc(100vh - 155px) !important;
  min-height: 520px !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.90) !important;
  backdrop-filter: blur(36px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(210%) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 20px 56px rgba(15, 23, 42, 0.16), 0 4px 20px rgba(255, 108, 0, 0.08), inset 0 1px 1px #ffffff !important;
  z-index: 1050 !important;
  display: flex;
  flex-direction: column !important;
  overflow: hidden !important;
  transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1), height 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.28s ease, box-shadow 0.28s ease !important;
}

body.dark-mode .expansion-chat-panel:not(.is-docked-sidebar) {
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* 3. 乾淨純粹的 Header 區域 (僅保留「展店 AI 助手」標題與圓角方塊按鈕) */
.expansion-header {
  padding: 12px 16px !important;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

body.dark-mode .expansion-header {
  background: rgba(30, 41, 59, 0.75) !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* Uni AI 品牌頭像徽章 (圖 2：採用官方 Uni AI Logo) */
.expansion-avatar-badge {
  height: 34px;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 1px 1px #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

body.dark-mode .expansion-avatar-badge {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.expansion-avatar-img {
  height: 20px;
  width: auto;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}

.expansion-title-group {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.expansion-clean-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.2px;
}

body.dark-mode .expansion-clean-title {
  color: #f1f5f9;
}

/* 控制按鈕 (圓角微光方塊) */
.expansion-header .bqca-btn-ctrl {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(241, 245, 249, 0.75);
  border: 1px solid rgba(226, 232, 240, 0.9);
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.expansion-header .bqca-btn-ctrl * {
  pointer-events: none !important;
}

.expansion-header .bqca-btn-ctrl:hover {
  background: #ffffff;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.expansion-header .bqca-btn-ctrl:hover {
  background: #ffffff;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

body.dark-mode .expansion-header .bqca-btn-ctrl {
  background: rgba(51, 65, 85, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

body.dark-mode .expansion-header .bqca-btn-ctrl:hover {
  background: rgba(71, 85, 105, 0.9);
  color: #ffffff;
}

/* 4. 快捷推薦晶片區 (液態毛玻璃膠囊) */
.expansion-chips-container {
  padding: 10px 14px 6px !important;
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
}

.expansion-chips-container::-webkit-scrollbar {
  display: none;
}

.expansion-chip {
  background: rgba(255, 247, 237, 0.85) !important;
  border: 1px solid rgba(251, 146, 60, 0.35) !important;
  color: #c2410c !important;
  padding: 6px 13px !important;
  border-radius: 20px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.05) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.expansion-chip:hover {
  background: #ffedd5 !important;
  border-color: #f97316 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.18) !important;
}

body.dark-mode .expansion-chip {
  background: rgba(255, 108, 0, 0.12) !important;
  border-color: rgba(255, 108, 0, 0.3) !important;
  color: #fdba74 !important;
}

body.dark-mode .expansion-chip:hover {
  background: rgba(255, 108, 0, 0.22) !important;
  border-color: #f97316 !important;
  color: #ffedd5 !important;
}

/* 5. 訊息與對話氣泡 */
.expansion-chat-panel .bqca-message.user .bqca-bubble {
  background: linear-gradient(135deg, rgba(255, 133, 51, 0.95) 0%, rgba(255, 108, 0, 0.98) 100%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 4px 16px rgba(255, 108, 0, 0.30), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
  border-radius: 18px !important;
  border-bottom-right-radius: 4px !important;
}

.expansion-chat-panel .bqca-message.bot .bqca-bubble {
  background: rgba(255, 255, 255, 0.90) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.95) !important;
  border-radius: 18px !important;
  border-bottom-left-radius: 4px !important;
}

/* 歡迎卡片 */
.expansion-greeting-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.98) !important;
  border-radius: 20px 20px 20px 6px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
  padding: 16px 18px !important;
}

.greeting-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 108, 0, 0.1);
  color: #ea580c;
  border: 1px solid rgba(255, 108, 0, 0.25);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.greeting-icon {
  width: 14px;
  height: 14px;
}

.greeting-intro {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #334155;
  margin: 0 0 10px 0;
}

.greeting-cta-box {
  background: rgba(255, 247, 237, 0.9);
  border: 1px dashed rgba(251, 146, 60, 0.5);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.84rem;
  color: #c2410c;
  font-weight: 600;
  line-height: 1.5;
}

body.dark-mode .expansion-greeting-card {
  background: rgba(30, 41, 59, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .greeting-intro {
  color: #e2e8f0;
}

body.dark-mode .greeting-cta-box {
  background: rgba(255, 108, 0, 0.12);
  border-color: rgba(255, 108, 0, 0.3);
  color: #fdba74;
}

/* 6. 底部一體化輸入框 (Modern Integrated Copilot Input Pill) */
.expansion-input-wrapper {
  padding: 8px 14px 4px;
  flex-shrink: 0;
  background: transparent;
}

.expansion-input-pill {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  border-radius: 24px;
  padding: 4px 6px 4px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 1px #ffffff;
  transition: all 0.22s ease;
}

.expansion-input-pill:focus-within {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15), 0 8px 24px rgba(249, 115, 22, 0.08);
  background: #ffffff;
}

body.dark-mode .expansion-input-pill {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body.dark-mode .expansion-input-pill:focus-within {
  border-color: #f97316;
  background: rgba(30, 41, 59, 0.98);
}

.expansion-textarea {
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  font-family: inherit;
  font-size: 0.88rem;
  color: #0f172a;
  flex: 1;
  padding: 6px 0;
  max-height: 100px;
  line-height: 1.45;
}

body.dark-mode .expansion-textarea {
  color: #f1f5f9;
}

.expansion-textarea::placeholder {
  color: #94a3b8;
}

.btn-send-expansion {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #ea580c 0%, #f97316 100%) !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 3px 10px rgba(234, 88, 12, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-send-expansion:hover:not(:disabled) {
  transform: scale(1.08) !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.45) !important;
}

.btn-send-expansion:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* 7. AI 免責聲明欄 */
.expansion-chat-panel .ai-disclaimer-bar {
  flex-shrink: 0;
  padding: 4px 14px 8px;
  text-align: center;
  background: transparent !important;
}

.disclaimer-text {
  font-size: 0.70rem;
  color: #94a3b8;
  letter-spacing: 0.2px;
  line-height: 1.3;
  display: inline-block;
  user-select: none;
}

/* Markdown 排版在 bubble 內的優化 */
.expansion-bubble h3, .expansion-bubble h4 {
  margin: 10px 0 6px;
  color: #0f172a;
  font-weight: 700;
}
.expansion-bubble h3 { 
  font-size: 1.05rem; 
  border-bottom: 1px solid rgba(226, 232, 240, 0.85); 
  padding-bottom: 4px; 
}
.expansion-bubble h4 { 
  font-size: 0.95rem; 
}
.expansion-bubble ul, .expansion-bubble ol {
  padding-left: 20px;
  margin: 6px 0;
}
.expansion-bubble li {
  margin-bottom: 5px;
  line-height: 1.6;
}
.expansion-bubble hr {
  border: none;
  border-top: 1px dashed rgba(203, 213, 225, 0.85); 
  margin: 12px 0;
}
.expansion-bubble code {
  background: rgba(255, 245, 238, 0.95);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.86em;
  color: #e65100;
  border: 1px solid rgba(255, 108, 0, 0.2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.expansion-bubble strong {
  color: #0f172a;
  font-weight: 700;
}
.expansion-bubble blockquote {
  border-left: 3px solid #ff6c00;
  padding-left: 10px;
  margin: 6px 0;
  color: #475569;
}

/* ======================================================== */
/* 展店 AI 思考中動態進度泡泡 (Thinking Progress Indicator)   */
/* ======================================================== */
.thinking-bubble {
  background: linear-gradient(135deg, rgba(255, 248, 242, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%) !important;
  border: 1px solid rgba(255, 108, 0, 0.3) !important;
  box-shadow: 0 4px 16px rgba(255, 108, 0, 0.14) !important;
  min-width: 270px;
  max-width: 90%;
  padding: 12px 14px !important;
}

.thinking-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.thinking-spinner-ring {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 108, 0, 0.25);
  border-top-color: #ff6c00;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

.thinking-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: #e65100;
  letter-spacing: 0.3px;
}

.thinking-status-text {
  font-size: 0.78rem;
  color: #64748b;
  margin-bottom: 8px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 1.4em;
  transition: opacity 0.2s ease;
}

.thinking-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(226, 232, 240, 0.8);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.thinking-progress-fill {
  height: 100%;
  width: 5%;
  background: linear-gradient(90deg, #ff8533 0%, #ff6c00 100%);
  border-radius: 2px;
  transition: width 0.3s ease-out;
}

/* ======================================================== */
/* 10.1 意見回饋全螢幕毛玻璃彈窗 (Feedback Modal)           */
/* ======================================================== */
.feedback-modal-backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.feedback-modal-card {
  width: 100%;
  max-width: 580px;
  max-height: 88vh;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.9);
  padding: 24px;
  display: flex;
  flex-direction: column;
  animation: modalScaleIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.feedback-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  margin-bottom: 16px;
}

.feedback-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feedback-title-wrap h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.btn-close-modal {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  line-height: 1;
}

.btn-close-modal:hover {
  color: var(--pcsc-red);
  transform: scale(1.15);
}

.feedback-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  padding-bottom: 6px;
}

.feedback-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.feedback-tab:hover {
  color: var(--text-primary);
}

.feedback-tab.active {
  color: var(--pcsc-green);
  border-bottom-color: var(--pcsc-green);
}

.tab-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.form-select, .form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  outline: none;
  background: #ffffff;
  color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.form-select:focus, .form-textarea:focus {
  border-color: var(--pcsc-green);
  box-shadow: 0 0 0 3px rgba(0, 115, 80, 0.12);
}

.form-textarea {
  resize: vertical;
  min-height: 110px;
  font-family: inherit;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.btn-primary-action {
  background: linear-gradient(135deg, #007350 0%, #009366 100%);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 22px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 115, 80, 0.3);
  transition: all 0.2s;
}

.btn-primary-action:hover {
  box-shadow: 0 6px 18px rgba(0, 115, 80, 0.45);
  transform: translateY(-1px);
}

.feedback-list-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.feedback-card-item {
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.85rem;
}

.feedback-card-item .item-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.feedback-card-item .item-category {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0, 115, 80, 0.12);
  color: var(--pcsc-green);
  font-weight: 700;
}

/* ======================================================== */
/* 10.2 卡片磁吸對齊高亮反饋 (Magnetic Snap Feedback)       */
/* ======================================================== */
.card.is-snapped {
  box-shadow: 0 0 0 2px var(--pcsc-green), var(--glass-shadow-hover) !important;
  transition: transform 0.08s ease-out;
}

/* ======================================================== */
/* 10.3 深色模式深度適應 (Dark Mode Deep Theming)           */
/* ======================================================== */
body.dark-mode .floating-header-bar,
body.dark-mode .app-sidebar,
body.dark-mode .map-floating-bar,
body.dark-mode .sidebar-charts-flyout,
body.dark-mode .bqca-chat-panel {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
  color: var(--text-primary);
}

body.dark-mode .table-card-header,
body.dark-mode .card-header {
  background: rgba(15, 23, 42, 0.25);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .table-card-header-left .card-title,
body.dark-mode .card-title {
  color: #f8fafc;
}

body.dark-mode .filter-pill {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
}

body.dark-mode .filter-pill:hover {
  background: rgba(51, 65, 85, 0.9);
  color: #f8fafc;
}

body.dark-mode .filter-pill.active {
  background: var(--pcsc-green);
  border-color: var(--pcsc-green);
  color: #ffffff;
}

body.dark-mode #storeDetailTable th {
  background: #1e293b;
  color: #94a3b8;
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode #storeDetailTable th.sortable-th:hover {
  background-color: #334155;
  color: #f8fafc;
}

body.dark-mode #storeDetailTable th.sortable-th.active-sort {
  color: #38bdf8;
  border-bottom-color: #38bdf8;
}

body.dark-mode #storeDetailTable th .sort-icon {
  color: #64748b;
}

body.dark-mode #storeDetailTable th.active-sort .sort-icon {
  color: #38bdf8;
}

body.dark-mode #storeDetailTable th:nth-child(1),
body.dark-mode #storeDetailTable td:nth-child(1) {
  background: #0f172a;
}

body.dark-mode #storeDetailTable th:nth-child(2),
body.dark-mode #storeDetailTable td:nth-child(2) {
  background: #0f172a;
  border-right-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode #storeDetailTable th:nth-child(1),
body.dark-mode #storeDetailTable th:nth-child(2) {
  background: #1e293b;
}

body.dark-mode #storeDetailTable tbody td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
  background: #0f172a;
}

body.dark-mode #storeDetailTable tbody tr:hover td {
  background: #1e293b;
}

body.dark-mode #storeDetailTable tbody tr.table-row-highlight td {
  background-color: #78350f !important;
  color: #fef3c7 !important;
}

body.dark-mode #storeDetailTable tbody tr.table-row-highlight {
  outline: 2px solid #f59e0b;
}

body.dark-mode .feedback-modal-card {
  background: rgba(15, 23, 42, 0.96);
  border-color: rgba(255, 255, 255, 0.15);
  color: #f8fafc;
}

body.dark-mode .feedback-modal-header,
body.dark-mode .feedback-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .form-select,
body.dark-mode .form-textarea,
body.dark-mode .bqca-textarea {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.16);
  color: #f8fafc;
}

body.dark-mode .feedback-card-item {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .sidebar-auth-user {
  background: rgba(30, 41, 59, 0.5);
}

body.dark-mode .auth-avatar-pill {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .btn-sidebar-auth {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.15);
  color: #f8fafc;
}

body.dark-mode .btn-sidebar-auth:hover {
  background: rgba(51, 65, 85, 0.95);
}

body.dark-mode .bep-input-box {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .bep-input-box label {
  color: #94a3b8;
}

body.dark-mode .bep-input-box input {
  color: #f8fafc;
  background: transparent;
}

body.dark-mode .bep-param-block {
  background: rgba(30, 41, 59, 0.65);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .bep-stat-item {
  background: rgba(30, 41, 59, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ======================================================== */
/* 深色模式下展店 AI 助手頂級高對比與高辨識度 UI 適配 (High Contrast Dark Mode) */
/* ======================================================== */
body.dark-mode .expansion-chat-panel,
body.dark-mode .bqca-chat-panel {
  background: rgba(15, 23, 42, 0.96) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 108, 0, 0.08) !important;
}

body.dark-mode .expansion-chat-panel.is-docked-sidebar {
  background: rgba(15, 23, 42, 0.96) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  border: none !important;
  border-left: 1.5px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 0 !important;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .expansion-header {
  background: rgba(22, 30, 46, 0.95) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode .expansion-clean-title {
  color: #ffffff !important;
  font-weight: 700 !important;
}

body.dark-mode .expansion-avatar-badge {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}

body.dark-mode .expansion-header .bqca-btn-ctrl {
  background: rgba(51, 65, 85, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #f8fafc !important;
}

body.dark-mode .expansion-header .bqca-btn-ctrl:hover {
  background: rgba(71, 85, 105, 0.95) !important;
  border-color: #ff8533 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* 快捷推薦標籤 (高亮清晰橘金膠囊) */
body.dark-mode .expansion-chip {
  background: rgba(30, 41, 59, 0.95) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1.5px solid rgba(255, 152, 0, 0.6) !important;
  color: #ffedd5 !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 108, 0, 0.15) !important;
}

body.dark-mode .expansion-chip .chip-icon {
  color: #fb923c !important;
}

body.dark-mode .expansion-chip:hover {
  background: linear-gradient(135deg, rgba(255, 108, 0, 0.35) 0%, rgba(234, 88, 12, 0.45) 100%) !important;
  border-color: #ff9800 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(255, 108, 0, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* 歡迎卡片高對比 */
body.dark-mode .expansion-greeting-card {
  background: rgba(24, 33, 49, 0.96) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .greeting-badge {
  background: rgba(255, 108, 0, 0.22) !important;
  border: 1.2px solid rgba(255, 152, 0, 0.55) !important;
  color: #ff9800 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 12px rgba(255, 108, 0, 0.25) !important;
}

body.dark-mode .greeting-intro {
  color: #f1f5f9 !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
}

body.dark-mode .greeting-intro strong,
body.dark-mode .expansion-greeting-card strong {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.4) !important;
}

body.dark-mode .greeting-cta-box {
  background: rgba(255, 108, 0, 0.18) !important;
  border: 1.5px dashed rgba(255, 152, 0, 0.55) !important;
  color: #fed7aa !important;
  font-size: 0.88rem !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

body.dark-mode .greeting-cta-box strong {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(255, 152, 0, 0.45) !important;
}

/* 對話氣泡與排版 */
body.dark-mode .expansion-chat-panel .bqca-message.user .bqca-bubble {
  background: linear-gradient(135deg, rgba(255, 133, 51, 0.95) 0%, rgba(255, 108, 0, 0.98) 100%) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 16px rgba(255, 108, 0, 0.45) !important;
  color: #ffffff !important;
}

body.dark-mode .expansion-chat-panel .bqca-message.bot .bqca-bubble,
body.dark-mode .expansion-bubble {
  background: rgba(30, 41, 59, 0.96) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  color: #f8fafc !important;
  border: 1.2px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .expansion-bubble strong,
body.dark-mode .bqca-message.bot .bqca-bubble strong {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.4) !important;
}

body.dark-mode .expansion-bubble h1,
body.dark-mode .expansion-bubble h2,
body.dark-mode .expansion-bubble h3,
body.dark-mode .expansion-bubble h4,
body.dark-mode .expansion-bubble h5,
body.dark-mode .expansion-bubble h6 {
  color: #ffffff !important;
  font-weight: 700 !important;
  border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .expansion-bubble p,
body.dark-mode .expansion-bubble li {
  color: #f1f5f9 !important;
  line-height: 1.65 !important;
}

body.dark-mode .expansion-bubble blockquote {
  color: #cbd5e1 !important;
  border-left: 3px solid #ff8533 !important;
  background: rgba(255, 108, 0, 0.1) !important;
  padding: 6px 12px !important;
  border-radius: 0 8px 8px 0 !important;
}

body.dark-mode .expansion-bubble code {
  background: rgba(67, 20, 7, 0.7) !important;
  color: #fed7aa !important;
  border-color: rgba(255, 108, 0, 0.4) !important;
}

body.dark-mode .expansion-bubble table {
  border-color: rgba(255, 255, 255, 0.16) !important;
}

body.dark-mode .expansion-bubble th {
  background: rgba(51, 65, 85, 0.9) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

body.dark-mode .expansion-bubble td {
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 底部輸入框高對比 */
body.dark-mode .expansion-input-pill {
  background: rgba(22, 30, 46, 0.96) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .expansion-input-pill:focus-within {
  border-color: #ff8533 !important;
  background: rgba(30, 41, 59, 0.98) !important;
  box-shadow: 0 0 0 3px rgba(255, 108, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .expansion-textarea {
  color: #ffffff !important;
}

body.dark-mode .expansion-textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

/* AI 思考中動態進度泡泡深色高對比 */
body.dark-mode .thinking-bubble {
  background: linear-gradient(135deg, rgba(38, 24, 18, 0.96) 0%, rgba(22, 30, 46, 0.98) 100%) !important;
  border: 1px solid rgba(255, 108, 0, 0.45) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .thinking-title {
  color: #ff9800 !important;
  font-weight: 700 !important;
}

body.dark-mode .thinking-status-text {
  color: #cbd5e1 !important;
}

/* 底部免責宣告 */
body.dark-mode .expansion-chat-panel .ai-disclaimer-bar {
  background: rgba(11, 17, 30, 0.75) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .disclaimer-text {
  color: #94a3b8 !important;
}

body.dark-mode .bqca-input-bar {
  background: rgba(15, 23, 42, 0.95);
  border-top-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .btn-hud-action {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f8fafc;
}

body.dark-mode .btn-hud-action:hover {
  background: rgba(51, 65, 85, 0.9);
  border-color: var(--pcsc-green);
  color: #34d399;
}

body.dark-mode .floating-circle-btn {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(255, 255, 255, 0.15);
  color: #f8fafc;
}

body.dark-mode .btn-bqca-fab:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: #10b981;
  color: #34d399;
}

body.dark-mode .btn-feedback-fab:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: #60a5fa;
  color: #93c5fd;
}

.spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}

.spinner-sm {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ======================================================== */
/* 11. 響應式佈局與行動端抽屜轉換 (Responsive Architecture) */
/* ======================================================== */

/* 行動端漢堡選單觸發鈕與遮罩基礎樣式 */
.btn-mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(226, 232, 240, 0.8);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--slate-700);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

body.dark-mode .btn-mobile-nav-toggle {
  background: rgba(15, 23, 42, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10040;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* AI 展店助手行動端全域遮罩 (Frosted Modal Backdrop) */
.expansion-chat-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10045;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

@media (min-width: 769px) {
  .expansion-chat-backdrop {
    display: none !important;
  }
}

/* 行動端 Bottom Sheet 頂部拖曳手柄 */
.bottom-sheet-drag-bar {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 16px 8px;
  cursor: pointer;
  touch-action: none;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  user-select: none;
  -webkit-user-select: none;
  background: rgba(255, 255, 255, 0.25);
}

body.dark-mode .bottom-sheet-drag-bar {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.25);
}

.sheet-drag-pill {
  width: 42px;
  height: 5px;
  border-radius: var(--radius-full);
  background: rgba(148, 163, 184, 0.6);
  margin-bottom: 5px;
  transition: all 0.2s ease;
}

.sheet-drag-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.bottom-sheet-drag-bar:active .sheet-drag-pill {
  background: var(--pcsc-green);
  width: 50px;
}

/* --- 斷點 1: 大平板 / 筆電 (1200px) --- */
@media (max-width: 1200px) {
  .hud-left-deck {
    width: 380px;
    flex: 0 0 380px;
  }
  .header-search-section {
    min-width: 280px;
  }
}

/* --- 斷點 2: 平板直式 (992px) --- */
@media (max-width: 992px) {
  .hud-app-layout {
    padding: 8px;
    gap: 8px;
  }
  .app-sidebar {
    width: 68px;
    padding: 12px 6px;
  }
  .app-sidebar .brand-text-group,
  .app-sidebar .nav-label,
  .app-sidebar .account-meta,
  .app-sidebar .account-chevron-icon,
  .app-sidebar .sidebar-edge-toggle {
    display: none;
  }
  .hud-left-deck {
    width: 340px;
    flex: 0 0 340px;
    max-height: none;
  }

  /* 平板端隱藏「以目標點為中心500m...」副標題與卡片視角切換器 */
  #mapFloatingSubtitle,
  .map-floating-subtitle,
  #deckViewSwitcher,
  .deck-view-switcher {
    display: none !important;
  }
}

/* --- 斷點 3: 縱向空間壓縮防禦 (max-height: 850px) --- */
@media (max-height: 850px) {
  .hud-left-deck {
    gap: 6px;
    max-height: calc(100vh - 130px);
  }
  .card-header {
    padding: 7px 12px;
  }
  .card-body, .bep-card-body {
    padding: 7px 12px;
  }
  .metric-table td {
    padding: 4px 6px;
    font-size: 0.82rem;
  }
  .bep-metric-box {
    padding: 4px 2px;
  }
  .bep-metric-box .m-val {
    font-size: 0.96rem;
  }
  .calculator-bar {
    padding: 4px 8px;
  }
  .calc-eval-box {
    padding: 5px 8px;
  }
  .btn-card-expansion-agent {
    padding: 5px 8px;
    font-size: 0.78rem;
  }
}

/* --- 斷點 4: 手機與微型平板 (768px) --- */
@media (max-width: 768px) {
  /* 導覽列：啟用漢堡按鈕，側欄轉化為滑出式抽屜 (Off-canvas Drawer) */
  .btn-mobile-nav-toggle {
    display: inline-flex !important;
  }

  .app-sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 82vw !important;
    z-index: 10050 !important;
    transform: translateX(-105%) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45) !important;
    pointer-events: auto !important;
    border-radius: 0 24px 24px 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .app-sidebar.mobile-open {
    transform: translateX(0) !important;
  }

  /* 行動端抽屜已有頂部右上角關閉按鈕，隱藏邊界突出的拉拔鈕以防截斷與遮擋地圖 (Fix cutting off bug) */
  .app-sidebar .sidebar-edge-toggle {
    display: none !important;
  }

  /* 行動端抽屜頂部右上角現代圓角關閉方塊按鈕 (Modern SaaS Close Button) */
  .app-sidebar .sidebar-header-toggle-btn {
    display: flex !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    color: #1e293b !important;
    margin-left: auto !important;
  }

  .app-sidebar .sidebar-header-toggle-btn:hover {
    background: #ffffff !important;
    color: var(--pcsc-green) !important;
  }

  body.dark-mode .app-sidebar .sidebar-header-toggle-btn {
    background: rgba(30, 41, 59, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #f1f5f9 !important;
  }

  /* 帳號選單 Popover 在手機端抽屜內自適應寬度與圓角 */
  .app-sidebar .account-popover-menu {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100% - 16px) !important;
    bottom: calc(100% + 8px) !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }

  .sidebar-backdrop {
    display: block !important;
  }

  /* 頂部一體化懸浮控制列：手機版完整跨度排版，雙列整齊架構 */
  .floating-header-bar {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    z-index: 40 !important;
  }

  /* 頂部第一列：漢堡按鈕 + 獨立地址搜尋區塊 (獨立一塊，絕不被按鈕擠壓) */
  .header-main-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .search-address-pill,
  .search-pill-wrapper {
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    padding: 4px 12px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-full) !important;
  }

  .search-icon-pill {
    padding: 0 4px !important;
    background: transparent !important;
    border: none !important;
    color: var(--pcsc-green) !important;
  }

  .search-icon-pill .pill-title-text,
  .search-icon-pill span {
    display: none !important; /* 手機端隱藏「目標商圈」文字，僅保留 📍 圖釘圖標，釋放空間 */
  }

  .address-input {
    font-size: 16px !important; /* 鎖定 16px，徹底杜絕 iOS Safari 自動放大破版 */
    width: 100% !important;
    min-width: 0 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* 頂部第二列：動作工具按鈕群組 (手機端優先顯示純 Icon，等寬勻稱排列) */
  .search-actions-group {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .search-actions-group .btn-header-tool {
    flex: 1 1 0 !important;
    height: 38px !important;
    min-width: 36px !important;
    max-width: 52px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
  }

  /* 手機端隱藏所有按鈕內的文字標籤，落實「剩下的功能已顯示icon優先」！ */
  .search-actions-group .btn-header-tool .tool-text,
  .search-actions-group .btn-header-tool .pin-text,
  .search-actions-group .btn-header-tool .pill-label,
  .search-actions-group .btn-header-tool .hud-text,
  .btn-current-location .pin-text,
  .btn-pin-location .pin-text {
    display: none !important;
  }

  .search-actions-group .btn-header-tool .tool-icon,
  .search-actions-group .btn-header-tool i,
  .search-actions-group .btn-header-tool svg {
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
  }

  .predict-badge-pill {
    display: none !important; /* 手機端節省頂部空間 */
  }

  /* 手機端隱藏「以目標點為中心500m...」標籤 */
  #mapFloatingSubtitle,
  .map-floating-subtitle {
    display: none !important;
  }

  /* 隱藏右下角意見回饋按鈕 */
  #btnOpenFeedback,
  .btn-feedback-fab {
    display: none !important;
  }

  /* 分析卡片群轉化為現代可滑動底部抽屜 (Bottom Sheet) */
  .bottom-sheet-drag-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 14px 4px !important;
    height: 38px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.4) !important;
  }

  .sheet-drag-pill {
    width: 36px !important;
    height: 4px !important;
    margin-bottom: 3px !important;
  }

  .sheet-drag-label {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
  }

  .hud-content-grid {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 60 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
  }

  .hud-left-deck {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.35) !important;
    pointer-events: auto !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(24px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
    transition: max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
    max-height: 38px; /* 預設收合底端狀態 (Peek)，緊貼最下方，不擋地圖 */
    z-index: 60 !important; /* 商圈分析決策卡位於最上層，絕不被右側工具列或地圖標記遮擋 */
  }

  /* 抽屜嚴格二態切換 (收合 <-> 半展開，徹底移除跑至頂部的狀態)：
     1. Peek (38px)：緊貼最下方，僅顯露精緻拖曳膠囊與「商圈分析決策卡 (點擊展開)」，下移到底，不漏卡片內容
     2. Half (50vh)：舒適半高檢視重點財務與商圈圖表，不遮擋頂部 Header 與核心地圖
  */
  .hud-left-deck.sheet-peek {
    max-height: 38px !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  .hud-left-deck.sheet-half {
    max-height: 50vh !important;
    padding-bottom: 24px !important;
    overflow-y: auto !important;
  }

  .hud-left-deck.sheet-full {
    max-height: 50vh !important; /* 強制降級為 50vh，絕不跑至頂端 */
    padding-bottom: 24px !important;
    overflow-y: auto !important;
  }

  /* 3. 最下面的那個雙卡並列那排請直接隱藏 (Hide Deck View Switcher in Mobile) */
  #deckViewSwitcher,
  .deck-view-switcher {
    display: none !important;
  }

  /* 避開頂部與功能列衝突：右側垂直懸浮工具列錨定於頂部控制列下方 (Header 底部約在 144px，設 top: 160px 留出 16px 充足呼吸空間，絕不遮擋任何功能列) */
  .map-floating-toolbar {
    top: 160px !important;
    bottom: auto !important;
    right: 12px !important;
    z-index: 30 !important; /* 確保位於商圈分析決策卡 (z-index: 60) 之下 */
    max-height: none !important;
    padding: 6px !important; /* 嚴格維持原本 6px 舒適內距 */
    gap: 5px !important; /* 嚴格維持原本 5px 間距 */
    border-radius: 14px !important;
  }

  /* 📱 行動端垂直工具列：完全維持原本按鈕間距 (gap: 5px) 與尺寸 (40px)，固定顯示 5 個功能項目，其餘支援順暢上下滑動 (Touch Scroll) 瀏覽選擇 */
  .map-floating-toolbar .map-toolbar-items {
    max-height: 232px !important; /* 剛好完整容納 5 個原本 40px 高度按鈕 + 原本 5px 間距 + 原本分隔線 */
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    scroll-behavior: smooth !important;
    padding: 0 !important; /* 維持原本無內距設定 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important; /* 嚴格維持原本 5px 間距，絕不壓擠 */
    scrollbar-width: thin !important;
    scrollbar-color: rgba(100, 116, 139, 0.4) transparent !important;
  }

  /* 確保按鈕與分隔線維持原本尺寸與間距，杜絕 flexbox 任何擠壓或變形 */
  .map-floating-toolbar .map-tool-btn {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }

  .map-floating-toolbar .map-tool-divider {
    width: 24px !important;
    height: 1px !important;
    margin: 1px 0 !important;
    flex-shrink: 0 !important;
  }

  .map-floating-toolbar .btn-toolbar-toggle {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
  }

  .map-floating-toolbar .map-toolbar-items::-webkit-scrollbar {
    width: 3px !important;
  }

  .map-floating-toolbar .map-toolbar-items::-webkit-scrollbar-track {
    background: transparent !important;
  }

  .map-floating-toolbar .map-toolbar-items::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.4) !important;
    border-radius: 9999px !important;
  }

  body.dark-mode .map-floating-toolbar .map-toolbar-items::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35) !important;
  }

  /* 📱 商圈分析決策卡展開時，強制將右側懸浮功能欄縮合，釋放地圖視野與杜絕重疊遮擋 */
  body.sheet-expanded .map-floating-toolbar .map-toolbar-items,
  body:has(#hudLeftDeck.sheet-half) .map-floating-toolbar .map-toolbar-items {
    max-height: 0 !important;
    opacity: 0 !important;
    transform: translateY(-8px) scale(0.92) !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.sheet-expanded .map-floating-toolbar,
  body:has(#hudLeftDeck.sheet-half) .map-floating-toolbar {
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.sheet-expanded .map-floating-toolbar .toolbar-toggle-icon,
  body:has(#hudLeftDeck.sheet-half) .map-floating-toolbar .toolbar-toggle-icon {
    transform: rotate(180deg) !important;
  }

  /* 1. AI 展店助手在行動端展開：背後採用優雅圓角邊框與懸浮磨砂液態玻璃 (Rounded Border Glass Modal) */
  #expansionChatPanel,
  .expansion-chat-panel,
  .bqca-chat-panel {
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top, 10px)) !important;
    bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    height: auto !important;
    max-height: calc(100dvh - max(22px, env(safe-area-inset-top, 10px) + env(safe-area-inset-bottom, 12px))) !important;
    border-radius: 24px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    margin: 0 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.45) !important;
    background: rgba(255, 255, 255, 0.84) !important;
    backdrop-filter: blur(32px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
    z-index: 10050 !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .expansion-resize-handle,
  .expansion-corner-fillet {
    display: none !important;
  }

  body.dark-mode #expansionChatPanel,
  body.dark-mode .expansion-chat-panel,
  body.dark-mode .bqca-chat-panel {
    background: rgba(15, 23, 42, 0.96) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(32px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  }

  /* 行動版預設展開，隱藏固定側欄與縮小按鈕 */
  .expansion-chat-panel #btnDockToggleExpansion,
  .expansion-chat-panel #btnMinimizeExpansion,
  .bqca-chat-panel #btnMinimizeBqca {
    display: none !important;
  }

  /* 頂部 Header 安全邊界與手勢 (承襲上方圓角 22px) */
  .expansion-chat-panel .bqca-panel-header,
  .bqca-chat-panel .bqca-panel-header {
    cursor: default !important;
    padding-top: 14px !important;
    padding-bottom: 12px !important;
    border-radius: 22px 22px 0 0 !important;
  }

  /* 2. 頂部重新整理按鈕與關閉按鈕：幾何尺寸與設計語言嚴格一致 (Unified 36x36px Squircle Glass Buttons) */
  .expansion-chat-panel .bqca-header-actions,
  .bqca-chat-panel .bqca-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .expansion-chat-panel #btnNewSessionExpansion,
  .expansion-chat-panel #btnCloseExpansion,
  .bqca-chat-panel #btnNewSessionBqca,
  .bqca-chat-panel #btnCloseBqca {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05), inset 0 1px 1px #ffffff !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    outline: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .expansion-chat-panel #btnNewSessionExpansion svg,
  .expansion-chat-panel #btnCloseExpansion svg,
  .expansion-chat-panel #btnNewSessionExpansion .lucide,
  .expansion-chat-panel #btnCloseExpansion .lucide,
  .bqca-chat-panel #btnNewSessionBqca svg,
  .bqca-chat-panel #btnCloseBqca svg {
    width: 17px !important;
    height: 17px !important;
    stroke-width: 2.2px !important;
  }

  .expansion-chat-panel #btnNewSessionExpansion:hover,
  .expansion-chat-panel #btnNewSessionExpansion:active {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #ff6c00 !important;
    border-color: rgba(255, 108, 0, 0.4) !important;
    transform: scale(1.05);
  }

  .expansion-chat-panel #btnCloseExpansion:hover,
  .expansion-chat-panel #btnCloseExpansion:active {
    background: rgba(254, 242, 242, 0.95) !important;
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    transform: scale(1.05);
  }

  body.dark-mode .expansion-chat-panel #btnNewSessionExpansion,
  body.dark-mode .expansion-chat-panel #btnCloseExpansion,
  body.dark-mode .bqca-chat-panel #btnNewSessionBqca,
  body.dark-mode .bqca-chat-panel #btnCloseBqca {
    background: rgba(30, 41, 59, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
  }

  body.dark-mode .expansion-chat-panel #btnNewSessionExpansion:hover {
    background: rgba(255, 108, 0, 0.2) !important;
    border-color: #ff6c00 !important;
    color: #ff8533 !important;
  }

  body.dark-mode .expansion-chat-panel #btnCloseExpansion:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: #ef4444 !important;
    color: #f87171 !important;
  }

  /* 對話訊息區自適應彈性填滿且平滑滾動 */
  .expansion-chat-panel .bqca-messages-container,
  .bqca-chat-panel .bqca-messages-container {
    flex: 1 1 auto !important;
    max-height: none !important;
    height: auto !important;
    padding: 14px 16px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 快捷推薦標籤橫向滑動 */
  .expansion-chat-panel .bqca-chips-container,
  .bqca-chat-panel .bqca-chips-container {
    padding: 10px 14px !important;
    flex-shrink: 0 !important;
  }

  /* 底部輸入區域貼齊底部與安全區域 */
  .expansion-chat-panel .bqca-input-bar,
  .bqca-chat-panel .bqca-input-bar {
    padding: 10px 14px !important;
    flex-shrink: 0 !important;
  }

  .expansion-chat-panel .ai-disclaimer-bar,
  .bqca-chat-panel .ai-disclaimer-bar {
    padding-bottom: 10px !important;
    border-radius: 0 0 22px 22px !important;
    flex-shrink: 0 !important;
  }

  /* 3. 商圈範圍雙模式懸浮控制器行動端響應式重構 (符合液態磨砂玻璃設計語言，全寬舒適排列) */
  .map-boundary-controller {
    position: fixed !important;
    bottom: 50px !important;
    top: auto !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    transform: none !important;
    padding: 8px 10px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(28px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.14), inset 0 1px 1px #ffffff !important;
    z-index: 55 !important;
    box-sizing: border-box !important;
    display: none; /* 預設完全關閉，杜絕未開啟時自發彈出 */
    grid-template-columns: 1fr auto !important;
    row-gap: 8px !important;
    column-gap: 8px !important;
    align-items: center !important;
  }

  .map-boundary-controller:not(.is-hidden):not([style*="display: none"]):not([style*="display:none"]) {
    display: grid !important;
  }

  /* 當手機端商圈範圍列開啟時，Uni AI 懸浮膠囊自動往上避讓至 bottom: 154px，徹底杜絕任何遮擋與疊加！ */
  body.boundary-controller-open .floating-fab-group,
  body:has(#mapBoundaryController:not(.is-hidden):not([style*="display: none"]):not([style*="display:none"])) .floating-fab-group {
    bottom: 154px !important;
  }

  body.sheet-expanded .map-boundary-controller {
    display: none !important;
  }

  body.dark-mode .map-boundary-controller {
    background: rgba(15, 23, 42, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
  }

  /* 核心技巧：容器採用 display: contents，使內部模式切換與選項面板直接成為 Grid 元素參與網格佈局 */
  .boundary-expanded-content {
    display: contents !important;
  }

  /* 第一列左側：模式切換分段標籤 (佔第 1 行第 1 欄) - 次世代液態磨砂分段控制 */
  .boundary-mode-switch {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    background: rgba(241, 245, 249, 0.72) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(226, 232, 240, 0.7) !important;
    padding: 3px !important;
    border-radius: 12px !important;
    gap: 3px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  body.dark-mode .boundary-mode-switch {
    background: rgba(30, 41, 59, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .boundary-mode-switch .mode-switch-btn {
    flex: 1 1 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 6px 6px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    white-space: nowrap !important;
    background: transparent !important;
    color: #64748b !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .boundary-mode-switch .mode-switch-btn.active {
    background: #ffffff !important;
    color: var(--pcsc-green) !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(0, 115, 80, 0.12), inset 0 1px 1px #ffffff !important;
  }

  body.dark-mode .boundary-mode-switch .mode-switch-btn {
    color: #94a3b8 !important;
  }

  body.dark-mode .boundary-mode-switch .mode-switch-btn.active {
    background: rgba(51, 65, 85, 0.9) !important;
    color: #34d399 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  }

  .boundary-mode-switch .mode-switch-btn .switch-icon {
    width: 13px !important;
    height: 13px !important;
  }

  /* 第一列右側：控制按鈕組 (圖層開關 + 收合 + 關閉，佔第 1 行第 2 欄) */
  .boundary-control-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    justify-self: end !important;
    flex-shrink: 0 !important;
  }

  /* 行動端控制按鈕升級為 30x30px 磨砂玻璃圓角方鈕，與全站 bqca-btn-ctrl 統一語言 */
  .boundary-layer-toggle-btn,
  .boundary-toggle-collapse-btn,
  .boundary-close-btn {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), inset 0 1px 1px #ffffff !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .boundary-layer-toggle-btn.is-active-layer {
    background: rgba(0, 115, 80, 0.12) !important;
    border-color: rgba(0, 115, 80, 0.35) !important;
    color: var(--pcsc-green) !important;
  }

  .boundary-close-btn:hover,
  .boundary-close-btn:active {
    background: rgba(254, 242, 242, 0.95) !important;
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
  }

  body.dark-mode .boundary-layer-toggle-btn,
  body.dark-mode .boundary-toggle-collapse-btn,
  body.dark-mode .boundary-close-btn {
    background: rgba(30, 41, 59, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
  }

  .boundary-layer-toggle-btn .layer-toggle-text {
    display: none !important;
  }

  .boundary-layer-toggle-btn .layer-toggle-icon {
    width: 14px !important;
    height: 14px !important;
  }

  /* 關鍵修復：尊重 inline style="display: none"，絕不讓未啟用的子面板被強制顯示 (杜絕雙模式同時疊加 Bug) */
  .boundary-subpanel[style*="display: none"] {
    display: none !important;
  }

  /* 第二列：半徑選項全寬自適應 (300m / 500m / 800m / 1,000m，佔滿第 2 行整列) */
  .boundary-subpanel.panel-radius:not([style*="display: none"]) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    display: flex !important;
    gap: 6px !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .boundary-subpanel.panel-radius .boundary-pill {
    flex: 1 1 0 !important;
    min-height: 34px !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 6px 2px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    border-radius: 11px !important;
    white-space: nowrap !important;
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    color: #334155 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), inset 0 1px 1px #ffffff !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .boundary-subpanel.panel-radius .boundary-pill.active {
    background: linear-gradient(135deg, #007350 0%, #00875a 100%) !important;
    border-color: #007350 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 10px rgba(0, 115, 80, 0.28) !important;
  }

  .boundary-subpanel.panel-radius .pill-default-tag {
    display: none !important;
  }

  body.dark-mode .boundary-subpanel.panel-radius .boundary-pill {
    background: rgba(30, 41, 59, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  }

  body.dark-mode .boundary-subpanel.panel-radius .boundary-pill.active {
    background: linear-gradient(135deg, #007350 0%, #00875a 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 115, 80, 0.4) !important;
  }

  /* 第二列：等時商圈選項 (步行/自行車/汽車 + 時間膠囊，佔滿第 2 行整列) */
  .boundary-subpanel.panel-isochrone:not([style*="display: none"]) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .boundary-subpanel.panel-isochrone .isochrone-profiles {
    display: flex !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .boundary-subpanel.panel-isochrone .isochrone-profiles .profile-btn {
    flex: 1 1 0 !important;
    justify-content: center !important;
    padding: 6px 4px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    color: #334155 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), inset 0 1px 1px #ffffff !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .boundary-subpanel.panel-isochrone .isochrone-profiles .profile-btn.active {
    background: linear-gradient(135deg, #ff6c00 0%, #ea580c 100%) !important;
    border-color: #ea580c !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 10px rgba(234, 88, 12, 0.28) !important;
  }

  body.dark-mode .boundary-subpanel.panel-isochrone .isochrone-profiles .profile-btn {
    background: rgba(30, 41, 59, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
  }

  body.dark-mode .boundary-subpanel.panel-isochrone .isochrone-profiles .profile-btn.active {
    background: linear-gradient(135deg, #ff6c00 0%, #ea580c 100%) !important;
    color: #ffffff !important;
  }

  .boundary-subpanel.panel-isochrone .isochrone-times {
    display: flex !important;
    width: 100% !important;
    gap: 4px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .boundary-subpanel.panel-isochrone .isochrone-times .time-pill {
    flex: 1 0 auto !important;
    padding: 5px 8px !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    color: #334155 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), inset 0 1px 1px #ffffff !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .boundary-subpanel.panel-isochrone .isochrone-times .time-pill.active {
    background: linear-gradient(135deg, #ff6c00 0%, #ea580c 100%) !important;
    border-color: #ea580c !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 10px rgba(234, 88, 12, 0.28) !important;
  }

  body.dark-mode .boundary-subpanel.panel-isochrone .isochrone-times .time-pill {
    background: rgba(30, 41, 59, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
  }

  body.dark-mode .boundary-subpanel.panel-isochrone .isochrone-times .time-pill.active {
    background: linear-gradient(135deg, #ff6c00 0%, #ea580c 100%) !important;
    color: #ffffff !important;
  }

  .boundary-subpanel.panel-isochrone .subpanel-divider,
  .boundary-subpanel.panel-isochrone .isochrone-engine-group,
  .boundary-subpanel.panel-isochrone .isochrone-status-tag {
    display: none !important;
  }

  /* 收合狀態：精巧置中微膠囊 (懸浮於底部卡片上方，不遮擋任何地圖重要標記) */
  .map-boundary-controller.is-collapsed {
    display: inline-flex !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 50px !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
  }

  /* POI 圖層面板改為行動端滿版底部彈窗 (Bottom Action Panel) */
  .map-poi-filter-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 72vh !important;
    z-index: 10030 !important;
  }

  /* 觸控熱區升級 (符合 Apple HIG 44px 與 Google Material 48px) */
  .map-tool-btn {
    width: 44px !important;
    height: 44px !important;
  }

  .btn-hud-action {
    min-height: 40px !important;
    padding: 8px 14px !important;
  }

  .boundary-pill {
    min-height: 32px !important;
  }

  /* 📱 行動端專用：底部 HUD 控制 Dock (僅保留左下角「氣泡圖 / 依品牌」切換膠囊，並與右下角 Uni AI 完美對齊) */
  .hud-bottom-dock {
    position: fixed !important;
    left: 14px !important;
    bottom: 48px !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: fit-content !important;
    z-index: 45 !important; /* 與右下角 Uni AI (z-index: 45) 處於同一視覺層級並齊平對齊 */
    pointer-events: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: bottom 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
  }

  .hud-bottom-dock > * {
    pointer-events: auto !important;
  }

  /* 當商圈範圍設定列開啟時，與 Uni AI (bottom: 154px) 同步向上避讓保持齊平對齊 */
  body.boundary-controller-open .hud-bottom-dock,
  body:has(#mapBoundaryController:not(.is-hidden):not([style*="display: none"]):not([style*="display:none"])) .hud-bottom-dock {
    bottom: 154px !important;
  }

  /* 抽屜展開 (半螢幕或全螢幕) 時，平滑收折底部懸浮列避免遮擋下方分析卡片 */
  body.sheet-expanded .hud-bottom-dock,
  body:has(#hudLeftDeck.sheet-half) .hud-bottom-dock,
  body:has(#hudLeftDeck.sheet-full) .hud-bottom-dock {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(20px) scale(0.95) !important;
  }

  /* 手機端外層容器：完全透明且僅貼合內容寬度，不再橫跨螢幕遮擋地圖 */
  .map-floating-bar {
    width: auto !important;
    max-width: fit-content !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .map-controls-left {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 氣泡圖 / 依品牌 切換膠囊：高度 42px、圓角 9999px、優雅毛玻璃，與右側 Uni AI (42px) 完美對稱呼應 */
  .map-mode-switch-group {
    display: inline-flex !important;
    align-items: center !important;
    height: 42px !important;
    padding: 3px 4px !important;
    border-radius: var(--radius-full, 9999px) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12), inset 0 1px 1px #ffffff !important;
    gap: 3px !important;
  }

  body.dark-mode .map-mode-switch-group {
    background: rgba(15, 23, 42, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  }

  .map-mode-btn {
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    border-radius: var(--radius-full, 9999px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    border: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .map-mode-btn.active {
    background: var(--pcsc-green, #007350) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 115, 80, 0.3) !important;
  }

  body.dark-mode .map-mode-btn.active {
    background: #10b981 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4) !important;
  }

  /* 手機端徹底隱藏副標題與右側比例尺圖例，確保視野極致清爽無遮擋 */
  .map-floating-subtitle,
  #mapFloatingSubtitle,
  .map-legend-right,
  .legend-brands,
  #legendBrandsGroup,
  #btnCollapseMapBar,
  #legendOverlapHint,
  #legendPsdGroup {
    display: none !important;
  }

  /* 📸 截圖模式在手機端的全響應式佈局適配 (Screenshot Studio Mobile Adaptation) */
  body.screenshot-mode .floating-header-bar {
    width: calc(100% - 20px) !important;
    left: 10px !important;
    right: 10px !important;
    top: 10px !important;
    border-radius: 18px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  /* 截圖模式下：隱藏與截圖無關的搜尋工具列 (✨、🎯、⚡ 等)，釋放高度與視覺焦點給地圖畫面 */
  body.screenshot-mode .search-actions-group {
    display: none !important;
  }

  /* 非截圖模式下，絕對隱藏截圖操作群組 (複製圖片、下載圖片、清空、退出) */
  body:not(.screenshot-mode) .screenshot-action-group,
  body:not(.screenshot-mode) #screenshotActionGroup,
  body:not(.screenshot-mode) .screenshot-btns-row,
  body:not(.screenshot-mode) #screenshotBtnsRow {
    display: none !important;
  }

  /* 僅在進入截圖模式 (body.screenshot-mode) 時才滿版縱向排列動作按鈕列 */
  body.screenshot-mode .screenshot-action-group,
  body.screenshot-mode #screenshotActionGroup {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 6px !important;
    align-items: stretch !important;
  }

  /* 品牌膠囊篩選列：手機端預設顯示為第3列 (落實要求1：預設要有圖2這列)，橫向平滑微滾動，緊湊呈現不溢出 */
  .screenshot-brand-filter-group,
  #screenshotBrandFilterGroup,
  body.screenshot-mode .screenshot-brand-filter-group {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px 4px !important;
    gap: 4px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  /* 手機端若放不下：隱藏中文品牌字，僅顯示品牌 Logo + (間數)，超緊湊防溢出 (完全符合圖2規格) */
  .ss-brand-pill .ss-brand-name {
    display: none !important;
  }

  .ss-brand-pill {
    padding: 3px 6px !important;
    gap: 2px !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    height: 26px !important;
    box-sizing: border-box !important;
  }

  .ss-brand-logo {
    width: 16px !important;
    height: 16px !important;
    border-radius: 3px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }

  .ss-count-badge {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 0 1px !important;
    min-width: unset !important;
    height: auto !important;
    line-height: 1.2 !important;
    background: transparent !important;
    color: inherit !important;
  }

  .screenshot-brand-filter-group::-webkit-scrollbar {
    display: none !important;
  }

  .ss-action-divider,
  body.screenshot-mode .ss-action-divider {
    display: none !important;
  }

  /* 動作按鈕列：平分螢幕寬度，排在同一列清晰點選 */
  .screenshot-btns-row,
  body.screenshot-mode .screenshot-btns-row {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    gap: 5px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .btn-screenshot-action,
  body.screenshot-mode .btn-screenshot-action {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 4px !important;
    font-size: 0.74rem !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .btn-screenshot-action .hud-icon {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
  }

  .btn-screenshot-action .hud-text {
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }

  /* 右下角 Uni AI 長橢圓形膠囊懸浮按鈕行動端適配：
     1. 預設收合狀態緊鄰底部 38px 決策卡 (bottom: 48px，保留 10px 呼吸感，不再遠離)
     2. 支援平滑過渡動態位移 */
  .floating-fab-group {
    right: 14px !important;
    bottom: 48px !important;
    transition: bottom 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 45 !important;
  }

  /* 2. 當商圈分析決策卡展開至 50vh 時，Uni AI 按鈕同步向上聯動位移至卡片上方 */
  body.sheet-expanded .floating-fab-group,
  body:has(#hudLeftDeck.sheet-half) .floating-fab-group,
  body:has(#hudLeftDeck.sheet-expanded) .floating-fab-group,
  .floating-fab-group.sheet-expanded {
    bottom: calc(50vh + 12px) !important;
  }

  .floating-pill-fab {
    height: 42px !important;
    min-width: 86px !important;
    padding: 0 14px !important;
  }

  .uni-ai-fab-logo {
    height: 22px !important;
  }
}

/* --- 斷點 5: 超小螢幕手機 (480px / iPhone SE / 375px) --- */
@media (max-width: 480px) {
  .floating-header-bar {
    padding: 6px 8px !important;
    gap: 6px !important;
    border-radius: 16px !important;
  }

  .search-address-pill,
  .search-pill-wrapper {
    height: 38px !important;
    padding: 2px 10px !important;
  }

  .search-actions-group {
    gap: 4px !important;
  }

  .search-actions-group .btn-header-tool {
    height: 36px !important;
    max-width: 46px !important;
    border-radius: 10px !important;
  }

  .btn-analyze-pill {
    padding: 0 !important;
    font-size: 0.8rem;
  }

  .btn-mock-pill {
    padding: 0 !important;
    font-size: 0.78rem;
  }
}

/* 品牌 Logo 影像自動圓角與比例保護 (避免變形且比照 7-Eleven Logo 圓角弧度 22%) */
img[src*="logo_"],
.marker-logo-img,
.brand-icon-img,
.legend-brand-logo,
.pop-brand-logo,
.ss-brand-logo {
  border-radius: 22% !important;
  object-fit: contain !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

/* ======================================================== */
/* 24. 全新 Google 登入入口與 Google 風格中央搜尋頁面 (Landing & Search Portal) */
/* ======================================================== */
.landing-portal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.96) 0%, rgba(241, 245, 249, 0.94) 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.45s ease;
  overflow-y: auto;
  pointer-events: auto;
}

.landing-portal-overlay.is-hidden {
  opacity: 0;
  transform: translateY(-24px) scale(1.02);
  visibility: hidden;
  pointer-events: none;
}

body.dark-mode .landing-portal-overlay {
  background: radial-gradient(circle at 50% 28%, rgba(15, 23, 42, 0.96) 0%, rgba(2, 6, 23, 0.98) 100%);
}

/* 7-Eleven 企業三原色 WebGL 流光絲帶與星空星塵互動背景 Canvas */
.portal-webgl-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

/* 頂部導覽列 (純右側功能按鈕區) */
.portal-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px 36px 12px;
  width: 100%;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.portal-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.portal-brand-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(255, 122, 0, 0.35));
}

.portal-brand-title {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.portal-brand-sub {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--pcsc-red);
}

.portal-brand-main {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text-primary);
}

.portal-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.portal-user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border-color);
  border-radius: 28px;
  padding: 4px 12px 4px 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

body.dark-mode .portal-user-chip {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
}

.portal-avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--pcsc-green);
}

.portal-avatar-fallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #007350 0%, #004d35 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  border: 1.5px solid var(--pcsc-green);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
}

.portal-user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.portal-user-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

.portal-user-email {
  font-size: 0.72rem;
  color: var(--text-muted);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-portal-logout {
  background: transparent;
  border: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pcsc-red);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 12px;
  transition: all 0.2s ease;
  margin-left: 4px;
}

.btn-portal-logout:hover {
  background: rgba(239, 68, 68, 0.1);
}

.btn-portal-action {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s ease;
  color: var(--text-primary);
}

.btn-portal-action:hover {
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

body.dark-mode .btn-portal-action {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

/* 中央主舞台 */
.portal-main-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* 視圖 A：未登入時 Google 登入卡片 */
.portal-card-login {
  position: relative;
  width: 100%;
  max-width: 540px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  padding: 42px 36px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.09), 0 0 0 1px rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: portalFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

body.dark-mode .portal-card-login {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.portal-dc-symbol {
  width: 84px;
  height: 84px;
  margin: 0 auto 20px auto;
  border-radius: 24px;
  background: #ffffff;
  border: 1.5px solid rgba(255, 237, 213, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(255, 108, 0, 0.15),
              0 4px 12px rgba(0, 0, 0, 0.05);
}

body.dark-mode .portal-dc-symbol {
  background: #1e293b;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45),
              0 0 24px rgba(255, 135, 31, 0.22);
}

.portal-dc-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.portal-login-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.portal-login-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 28px;
}

.portal-login-auth-box {
  margin-bottom: 24px;
}

.portal-login-prompt {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.btn-google-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #ffffff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: 28px;
  padding: 13px 32px;
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(60, 64, 67, 0.12);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-google-large:hover {
  background: #f8fafd;
  border-color: #d2e3fc;
  box-shadow: 0 6px 18px rgba(66, 133, 244, 0.2);
  transform: translateY(-2px);
}

body.dark-mode .btn-google-large {
  background: #1e293b;
  border-color: #475569;
  color: #f1f5f9;
}

body.dark-mode .btn-google-large:hover {
  background: #334155;
  border-color: #60a5fa;
  box-shadow: 0 6px 20px rgba(96, 165, 250, 0.25);
}

.portal-features-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 18px;
}

.portal-feat-dot {
  color: #cbd5e1;
}

/* 視圖 B：登入後 Google 首頁風格中央搜尋區 */
.portal-card-search {
  width: 100%;
  max-width: 740px;
  min-width: min(680px, 94vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  animation: portalFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.google-brand-hero {
  margin-bottom: 30px;
}

.hero-logo-halo {
  width: 96px;
  height: 96px;
  margin: 0 auto 18px auto;
  border-radius: 28px;
  background: #ffffff;
  border: 1.5px solid rgba(255, 237, 213, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(255, 108, 0, 0.16),
              0 4px 14px rgba(0, 0, 0, 0.05);
}

body.dark-mode .hero-logo-halo {
  background: #1e293b;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5),
              0 0 28px rgba(255, 135, 31, 0.22);
}

.google-hero-logo {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.google-hero-title {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.6px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.google-hero-title .title-uni {
  color: var(--pcsc-red);
}

.google-hero-title .title-main {
  color: var(--text-primary);
}

.google-hero-subtitle {
  font-size: 0.98rem;
  color: var(--text-secondary);
}

/* Google 搜尋容器與輸入框 */
.google-search-container {
  width: 100%;
  max-width: 680px;
  min-width: min(680px, 94vw);
  box-sizing: border-box;
}

.google-search-box {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: min(680px, 94vw);
  height: 54px;
  background: #ffffff;
  border: 1px solid #dfe1e5;
  border-radius: 28px;
  padding: 0 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
  box-sizing: border-box;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.google-search-box:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border-color: rgba(223, 225, 229, 0);
}

.google-search-box:focus-within {
  border-color: rgba(0, 115, 80, 0.45);
  box-shadow: 0 4px 22px rgba(0, 115, 80, 0.2);
}

body.dark-mode .google-search-box {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .google-search-box:hover {
  border-color: #475569;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

body.dark-mode .google-search-box:focus-within {
  border-color: #10b981;
  box-shadow: 0 4px 24px rgba(16, 185, 129, 0.25);
}

.google-search-icon {
  color: #9aa0a6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.google-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 0 14px;
  font-size: 1.05rem;
  color: var(--text-primary);
  font-family: inherit;
}

.google-search-clear {
  border: none;
  background: transparent;
  color: #9aa0a6;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.google-search-clear:hover {
  color: var(--text-primary);
}

.google-search-locate {
  border: none;
  background: transparent;
  color: #1a73e8;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-right: 2px;
}

.google-search-locate:hover {
  background: rgba(66, 133, 244, 0.12);
  color: #155724;
  transform: scale(1.08);
}

.google-search-locate.is-locating svg {
  animation: spin 1s linear infinite;
  color: #2563eb;
}

/* 搜尋按鈕組 */
.google-search-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

.btn-google-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  border-radius: 24px;
  font-size: 0.94rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
}

.btn-google-primary {
  background: linear-gradient(135deg, var(--pcsc-green), #009360);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 115, 80, 0.3);
}

.btn-google-primary:hover {
  background: linear-gradient(135deg, #00875e, #00aa6f);
  box-shadow: 0 6px 20px rgba(0, 115, 80, 0.42);
  transform: translateY(-2px);
}

.btn-google-locate {
  background: rgba(255, 255, 255, 0.9);
  color: #2563eb;
  border: 1px solid rgba(191, 219, 254, 0.9);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.btn-google-locate:hover {
  background: #eff6ff;
  border-color: #60a5fa;
  color: #1d4ed8;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2);
  transform: translateY(-2px);
}

.btn-google-locate.is-locating {
  opacity: 0.75;
  cursor: wait;
}

body.dark-mode .btn-google-locate {
  background: rgba(30, 41, 59, 0.9);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .btn-google-locate:hover {
  background: #334155;
  border-color: #60a5fa;
  color: #93c5fd;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.btn-google-secondary {
  background: rgba(255, 255, 255, 0.85);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.btn-google-secondary:hover {
  background: #ffffff;
  color: var(--text-primary);
  border-color: #cbd5e1;
  transform: translateY(-2px);
}

body.dark-mode .btn-google-secondary {
  background: rgba(30, 41, 59, 0.85);
  border-color: #334155;
  color: #cbd5e1;
}

body.dark-mode .btn-google-secondary:hover {
  background: #334155;
  color: #ffffff;
}

/* 推薦商圈 Chips */
.google-recommend-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}

.chips-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.portal-chip {
  background: rgba(0, 115, 80, 0.08);
  border: 1px solid rgba(0, 115, 80, 0.22);
  color: var(--pcsc-green);
  border-radius: 18px;
  padding: 5px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.portal-chip:hover {
  background: var(--pcsc-green);
  color: #ffffff;
  border-color: var(--pcsc-green);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 115, 80, 0.25);
}

body.dark-mode .portal-chip {
  background: rgba(0, 115, 80, 0.25);
  border-color: rgba(16, 185, 129, 0.35);
  color: #6ee7b7;
}

body.dark-mode .portal-chip:hover {
  background: #10b981;
  color: #0f172a;
}

/* 頁尾 */
.portal-footer {
  padding: 16px 24px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* 動畫：向上淡入渲染效果 (Upward Fade-In with Spring Effect) */
@keyframes portalFadeUp {
  0% {
    opacity: 0;
    transform: translateY(32px) scale(0.97);
  }
  60% {
    opacity: 0.95;
    transform: translateY(-2px) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes portalFadeInUpChild {
  0% {
    opacity: 0;
    transform: translateY(22px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.portal-card-login {
  animation: portalFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.portal-card-search {
  animation: portalFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.google-brand-hero {
  animation: portalFadeInUpChild 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.08s;
}

.google-search-container {
  animation: portalFadeInUpChild 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.16s;
}

/* ======================================================== */
/* 25. 側邊欄運算耗時指示器 (移至左側 Menu 展開下方) */
/* ======================================================== */
.sidebar-perf-container {
  padding: 4px 6px;
  margin: 6px 4px 2px 4px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.sidebar-perf-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 115, 80, 0.08);
  border: 1px solid rgba(0, 115, 80, 0.22);
  border-radius: 12px;
  padding: 5px 8px;
  color: var(--pcsc-green);
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  width: 100%;
}

.sidebar-perf-pill:hover {
  background: rgba(0, 115, 80, 0.14);
  border-color: var(--pcsc-green);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 115, 80, 0.15);
}

body.dark-mode .sidebar-perf-pill {
  background: rgba(0, 168, 104, 0.14);
  border-color: rgba(0, 168, 104, 0.32);
  color: #34d399;
}

body.dark-mode .sidebar-perf-pill:hover {
  background: rgba(0, 168, 104, 0.24);
  border-color: #34d399;
  box-shadow: 0 4px 14px rgba(52, 211, 153, 0.2);
}

.sidebar-perf-icon {
  font-size: 0.82rem;
  flex-shrink: 0;
  display: inline-flex;
}

.sidebar-perf-text {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.32;
  letter-spacing: -0.2px;
  word-break: break-word;
}

/* 側邊欄收摺時 (Mini mode) 的微型簡潔呈現 */
.app-sidebar:not(.expanded) .sidebar-perf-container {
  padding: 4px 0;
  margin: 4px 0 2px 0;
  display: flex;
  justify-content: center;
}

.app-sidebar:not(.expanded) .sidebar-perf-pill {
  padding: 6px;
  width: 32px;
  height: 32px;
  justify-content: center;
  border-radius: 50%;
}

.app-sidebar:not(.expanded) .sidebar-perf-text {
  display: none;
}

/* ======================================================== */
/* 26. 地圖右側垂直懸浮工具列 (街道/衛星、3D、街景、圖釘) */
/* ======================================================== */
.map-floating-toolbar {
  position: fixed;
  top: 92px; /* 避開頂部懸浮控制列 (bottom ~72px)，留出充足間距絕不重疊 */
  right: 18px;
  z-index: 50;
  pointer-events: auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 1px 1px #ffffff;
  gap: 5px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

body.dark-mode .map-floating-toolbar {
  background: rgba(15, 23, 42, 0.68);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

/* 展開/收合專用按鈕 (Animated Toolbar Toggle Button) - 統一 Squircle 圓角設計語言 */
.btn-toolbar-toggle {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(0, 115, 80, 0.08) !important;
  color: var(--pcsc-green) !important;
  border: 1px solid rgba(0, 115, 80, 0.18) !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  margin-bottom: 2px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.dark-mode .btn-toolbar-toggle {
  background: rgba(52, 211, 153, 0.12) !important;
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.25) !important;
}

.btn-toolbar-toggle:hover {
  background: var(--pcsc-green) !important;
  color: #ffffff !important;
}

body.dark-mode .btn-toolbar-toggle:hover {
  background: #10b981 !important;
  color: #ffffff !important;
}

.btn-toolbar-toggle:focus,
.btn-toolbar-toggle:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 115, 80, 0.25) !important;
}

/* 內部工具項目清單：支援流暢彈性展開與收合動畫 */
.map-toolbar-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  max-height: 600px;
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: top center;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease,
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              margin 0.3s ease;
  overflow: hidden;
}

.map-floating-toolbar.is-collapsed .map-toolbar-items {
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-8px) scale(0.92) !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 收合狀態：徹底消除外層圓形與內層方形的視覺衝突 (解決「有圓的有方的」問題) */
.map-floating-toolbar.is-collapsed {
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.map-floating-toolbar.is-collapsed .btn-toolbar-toggle {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: var(--glass-bg, rgba(255, 255, 255, 0.85)) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.8)) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1), inset 0 1px 1px #ffffff !important;
  color: var(--pcsc-green) !important;
  margin: 0 !important;
}

body.dark-mode .map-floating-toolbar.is-collapsed .btn-toolbar-toggle {
  background: var(--glass-bg, rgba(15, 23, 42, 0.85)) !important;
  border-color: var(--glass-border, rgba(255, 255, 255, 0.14)) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  color: #34d399 !important;
}

.toolbar-toggle-icon {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.map-floating-toolbar.is-collapsed .toolbar-toggle-icon {
  transform: rotate(180deg);
}

.map-tool-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  pointer-events: auto !important;
  color: #475569;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  flex-shrink: 0;
}

body.dark-mode .map-tool-btn {
  color: #cbd5e1;
}

.map-tool-btn .tool-icon {
  font-size: 1.25rem;
  line-height: 1;
  pointer-events: none;
}

.map-tool-btn .tool-label {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .map-tool-btn:hover {
    background: rgba(0, 115, 80, 0.08);
    color: var(--pcsc-green);
    transform: scale(1.08);
  }

  body.dark-mode .map-tool-btn:hover {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
  }
}

.map-tool-btn.active {
  background: var(--pcsc-green) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(0, 115, 80, 0.35);
}

body.dark-mode .map-tool-btn.active {
  background: #10b981 !important;
  color: #0f172a !important;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.45);
}

.map-tool-btn.is-locating {
  background: rgba(37, 99, 235, 0.12) !important;
  color: #2563eb !important;
}

.map-tool-btn.is-locating .tool-icon {
  animation: spin 1s linear infinite;
  color: #2563eb !important;
}

.btn-tool-pegman {
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-tool-pegman:hover {
  background: rgba(244, 180, 0, 0.16) !important;
  color: #b45309 !important;
  transform: scale(1.12);
}

.btn-tool-pegman.active {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 3px 12px rgba(245, 158, 11, 0.45) !important;
}

.btn-tool-pegman.active .tool-pegman-svg {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.tool-pegman-svg {
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  transition: transform 0.2s ease;
}

.btn-tool-pegman:hover .tool-pegman-svg {
  transform: translateY(-1px);
}

.btn-tool-pegman.is-dragging {
  opacity: 0.35 !important;
  transform: scale(0.92) !important;
}

.floating-pegman-avatar {
  position: fixed;
  pointer-events: none;
  z-index: 9999999;
  width: 36px;
  height: 48px;
  transform: translate(-50%, -85%) scale(1.15) rotate(-6deg);
  transition: transform 0.06s ease-out;
  cursor: grabbing;
}

/* ======================================================== */
/* 26-C. Google Maps 點位類別自訂篩選器懸浮面板 */
/* ======================================================== */
.map-poi-filter-panel {
  position: fixed;
  top: 92px;
  right: 76px;
  width: 320px;
  max-height: calc(100vh - 120px);
  z-index: 2500 !important;
  pointer-events: auto !important;
  user-select: none;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating), inset 0 1px 1px #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  animation: poiPanelFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes poiPanelFadeIn {
  from {
    opacity: 0;
    transform: translateX(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

body.dark-mode .map-poi-filter-panel {
  background: rgba(15, 23, 42, 0.75);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
}

.poi-panel-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  background: rgba(255, 255, 255, 0.35);
  pointer-events: auto !important;
}

body.dark-mode .poi-panel-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.35);
}

.poi-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.poi-header-icon {
  width: 18px;
  height: 18px;
  color: #FF6C00;
  stroke-width: 2.2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.dark-mode .poi-header-icon {
  color: #ff8c38;
}

.poi-header-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
}

body.dark-mode .poi-header-title {
  color: #ffffff;
}

.poi-btn-close {
  background: transparent;
  border: none;
  cursor: pointer !important;
  pointer-events: auto !important;
  color: #94a3b8;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.poi-btn-close * {
  pointer-events: none !important;
}

.poi-btn-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #334155;
}

body.dark-mode .poi-btn-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

/* 快捷模式切換列 */
.poi-mode-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(241, 245, 249, 0.5);
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
  pointer-events: auto !important;
}

body.dark-mode .poi-mode-presets {
  background: rgba(15, 23, 42, 0.4);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* 分區標題 */
.poi-layer-section-title {
  padding: 10px 14px 4px 14px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

body.dark-mode .poi-layer-section-title {
  color: #94a3b8;
}

.poi-section-facilities {
  padding-top: 6px;
  border-top: 1px solid rgba(226, 232, 240, 0.7);
}

body.dark-mode .poi-section-facilities {
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* 商圈進階分析圖層項目 */
.poi-advanced-layers {
  display: flex;
  flex-direction: column;
  padding-bottom: 4px;
  pointer-events: auto !important;
}

.poi-adv-chip {
  margin: 0 14px 6px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: var(--radius-sm);
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.poi-adv-chip * {
  pointer-events: none !important;
}

.poi-adv-chip:active {
  transform: scale(0.98);
}

body.dark-mode .poi-adv-chip {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
}

.poi-adv-chip:hover {
  background: rgba(255, 245, 238, 0.85);
  border-color: rgba(255, 108, 0, 0.4);
  transform: translateY(-1px);
}

body.dark-mode .poi-adv-chip:hover {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(255, 108, 0, 0.6);
}

.poi-adv-chip.active {
  background: rgba(255, 247, 237, 0.95);
  border-color: #FF6C00;
  box-shadow: 0 2px 8px rgba(255, 108, 0, 0.14);
}

body.dark-mode .poi-adv-chip.active {
  background: rgba(255, 108, 0, 0.14);
  border-color: #ff8c38;
}

.poi-adv-chip.active .poi-cat-switch {
  background: #FF6C00;
}

.poi-adv-chip.active .poi-cat-switch::after {
  transform: translateX(14px);
}

.poi-cat-desc {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: #64748b;
  margin-top: 1px;
  line-height: 1.25;
}

body.dark-mode .poi-cat-desc {
  color: #94a3b8;
}

.poi-preset-btn {
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.poi-preset-btn * {
  pointer-events: none !important;
}

.poi-preset-btn:active {
  transform: scale(0.96);
}

body.dark-mode .poi-preset-btn {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}

.poi-preset-btn:hover {
  border-color: var(--pcsc-orange);
  color: var(--pcsc-orange);
}

.poi-preset-btn.active {
  background: linear-gradient(135deg, var(--pcsc-orange), var(--pcsc-orange-hover));
  border-color: var(--pcsc-orange);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(255, 108, 0, 0.3);
}

/* 類別開關網格列表 */
.poi-category-grid {
  padding: 8px 14px 16px 14px;
  overflow-y: auto;
  max-height: 380px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto !important;
}

.poi-category-grid::-webkit-scrollbar {
  width: 5px;
}
.poi-category-grid::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.poi-cat-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: var(--radius-sm);
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.poi-cat-chip * {
  pointer-events: none !important;
}

.poi-cat-chip:active {
  transform: scale(0.98);
}

body.dark-mode .poi-cat-chip {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
}

.poi-cat-chip:hover {
  background: rgba(255, 245, 238, 0.8);
  border-color: rgba(255, 108, 0, 0.4);
  transform: translateY(-1px);
}

body.dark-mode .poi-cat-chip:hover {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(255, 108, 0, 0.6);
}

.poi-cat-chip.active {
  background: rgba(255, 247, 237, 0.95);
  border-color: #FF6C00;
  box-shadow: 0 2px 8px rgba(255, 108, 0, 0.12);
}

body.dark-mode .poi-cat-chip.active {
  background: rgba(255, 108, 0, 0.14);
  border-color: #ff8c38;
}

.poi-cat-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.poi-cat-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.poi-cat-icon.poi-vector-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.poi-cat-icon.poi-vector-icon svg,
.poi-cat-icon.poi-vector-icon i {
  width: 15px;
  height: 15px;
  stroke-width: 2.2px;
}

/* 各分類向量微徽章配色 (Duotone Icon Badges) */
.poi-cat-icon.icon-business { background: rgba(234, 88, 12, 0.12); color: #ea580c; }
.poi-cat-icon.icon-transit { background: rgba(2, 132, 199, 0.12); color: #0284c7; }
.poi-cat-icon.icon-school { background: rgba(217, 119, 6, 0.12); color: #d97706; }
.poi-cat-icon.icon-medical { background: rgba(225, 29, 72, 0.12); color: #e11d48; }
.poi-cat-icon.icon-attraction { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.poi-cat-icon.icon-government { background: rgba(71, 85, 105, 0.12); color: #475569; }
.poi-cat-icon.icon-worship { background: rgba(147, 51, 234, 0.12); color: #9333ea; }
.poi-cat-icon.icon-arterial { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.poi-cat-icon.icon-traffic { background: rgba(16, 185, 129, 0.12); color: #10b981; }

body.dark-mode .poi-cat-icon.icon-business { background: rgba(234, 88, 12, 0.24); color: #fb923c; }
body.dark-mode .poi-cat-icon.icon-transit { background: rgba(2, 132, 199, 0.24); color: #38bdf8; }
body.dark-mode .poi-cat-icon.icon-school { background: rgba(217, 119, 6, 0.24); color: #fbbf24; }
body.dark-mode .poi-cat-icon.icon-medical { background: rgba(225, 29, 72, 0.24); color: #fb7185; }
body.dark-mode .poi-cat-icon.icon-attraction { background: rgba(139, 92, 246, 0.24); color: #a78bfa; }
body.dark-mode .poi-cat-icon.icon-government { background: rgba(148, 163, 184, 0.24); color: #cbd5e1; }
body.dark-mode .poi-cat-icon.icon-worship { background: rgba(147, 51, 234, 0.24); color: #c084fc; }
body.dark-mode .poi-cat-icon.icon-arterial { background: rgba(239, 68, 68, 0.24); color: #f87171; }
body.dark-mode .poi-cat-icon.icon-traffic { background: rgba(16, 185, 129, 0.24); color: #34d399; }

.poi-cat-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
}

body.dark-mode .poi-cat-name {
  color: #f1f5f9;
}

.poi-cat-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  margin-left: 4px;
}

.poi-cat-switch {
  width: 34px;
  height: 20px;
  background: #cbd5e1;
  border-radius: 10px;
  position: relative;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

body.dark-mode .poi-cat-switch {
  background: #475569;
}

.poi-cat-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.poi-cat-chip.active .poi-cat-switch {
  background: #FF6C00;
}

.poi-cat-chip.active .poi-cat-switch::after {
  transform: translateX(14px);
}

.poi-panel-footer {
  padding: 10px 14px;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  background: rgba(248, 250, 252, 0.7);
}

body.dark-mode .poi-panel-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.6);
}

.poi-footer-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.35;
}

body.dark-mode .poi-footer-info {
  color: #94a3b8;
}

.poi-info-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #0284c7;
}

.poi-active-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF6C00;
  box-shadow: 0 0 6px #FF6C00;
  border: 1.5px solid #ffffff;
}

body.dark-mode .poi-active-badge {
  border-color: #1e293b;
}

@media (max-width: 768px) {
  .map-poi-filter-panel {
    right: 12px;
    left: 12px;
    width: auto;
    top: auto;
    bottom: 84px;
    max-height: 55vh;
  }
}

body.streetview-active .map-poi-filter-panel,
body.screenshot-mode .map-poi-filter-panel,
body.is-analyzing .map-poi-filter-panel {
  display: none !important;
}

/* 全域即時定位提示通知 (Location Toast) */
.location-toast {
  position: fixed;
  top: 92px;
  left: 50%;
  transform: translateX(-50%) translateY(-24px) scale(0.95);
  z-index: 10005;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 9999px;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 90vw;
  text-align: center;
}

.location-toast.show {
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.location-toast.success {
  border-color: rgba(52, 211, 153, 0.4);
}

.location-toast.error {
  border-color: rgba(248, 113, 113, 0.4);
}

.location-toast-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

/* 目前定位彈窗樣式 */
.user-location-info-window {
  padding: 12px 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-width: 250px;
  text-align: left;
}

.user-loc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--pcsc-green-light);
  color: var(--pcsc-green);
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 115, 80, 0.2);
}

.btn-location-analyze-cta {
  width: 100%;
  background: linear-gradient(135deg, var(--pcsc-green), var(--pcsc-green-hover));
  color: #ffffff !important;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: var(--font-size-base);
  font-weight: 700;
  cursor: pointer !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 115, 80, 0.32);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-location-analyze-cta:hover {
  background: linear-gradient(135deg, #00875e, var(--pcsc-green));
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(0, 115, 80, 0.45) !important;
}

.btn-location-analyze-cta:active {
  transform: translateY(1px);
}

.btn-location-clear-cta {
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(203, 213, 225, 0.8);
  background: #f8fafc;
  color: #64748b;
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-location-clear-cta:hover {
  background: #e2e8f0;
  color: #334155;
  border-color: #94a3b8;
}

body.dark-mode .user-location-info-window #userLocAddrText {
  color: #f8fafc !important;
}

body.dark-mode .btn-location-clear-cta {
  background: #1e293b;
  color: #cbd5e1;
  border-color: #334155;
}

body.dark-mode .btn-location-clear-cta:hover {
  background: #334155;
  color: #ffffff;
}

/* ======================================================== */
/* 26-B. 地圖商圈範圍雙模式懸浮控制器 (幾何半徑 vs 等時商圈) */
/* ======================================================== */
.map-boundary-controller {
  position: fixed;
  top: 96px; /* 賦予充足 28px 呼吸間距，告別緊貼頂部搜尋列與左右 Deck */
  /* 智慧居中避讓：居中對齊中段可用地圖視野，確保不覆蓋左翼 Deck (418px) 與右翼自選圖卡 (440px) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 850 !important;
  pointer-events: auto !important;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 40px;
  padding: 4px 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 1px 1px #ffffff;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

body.dark-mode .map-boundary-controller {
  background: rgba(15, 23, 42, 0.68);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.boundary-expanded-content {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.2s ease;
}

/* 嚴格隱藏規則：只要有 is-hidden 或是 style display: none，不分螢幕尺寸一律隱藏！ */
.map-boundary-controller.is-hidden,
.map-boundary-controller[style*="display: none"],
.map-boundary-controller[style*="display:none"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 一鍵收折狀態：極簡微型膠囊 */
.map-boundary-controller.is-collapsed {
  padding: 4px 8px;
  border-radius: 24px;
}

.map-boundary-controller.is-collapsed .boundary-expanded-content {
  display: none !important;
}

.boundary-compact-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 20px;
  transition: background 0.15s ease;
}

body.dark-mode .boundary-compact-pill {
  color: #f8fafc;
}

.boundary-compact-pill:hover {
  background: rgba(241, 245, 249, 0.85);
}

body.dark-mode .boundary-compact-pill:hover {
  background: rgba(255, 255, 255, 0.1);
}

.boundary-compact-pill .compact-icon {
  width: 14px;
  height: 14px;
  color: var(--pcsc-green);
}

.boundary-compact-pill .compact-chevron {
  width: 12px;
  height: 12px;
  color: #94a3b8;
}

/* 動作控制按鈕群組：範圍圖層開關 + 收合圓鈕 + 關閉圓鈕 */
.boundary-control-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* 範圍圖層開關膠囊按鈕 */
.boundary-layer-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 115, 80, 0.08);
  border: 1px solid rgba(0, 115, 80, 0.25);
  color: var(--pcsc-green);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.boundary-layer-toggle-btn:hover {
  background: rgba(0, 115, 80, 0.15);
  border-color: rgba(0, 115, 80, 0.45);
  transform: translateY(-1px);
}

.boundary-layer-toggle-btn.is-hidden-layer {
  background: rgba(241, 245, 249, 0.7);
  border-color: rgba(203, 213, 225, 0.85);
  color: #64748b;
  text-decoration: none;
}

.boundary-layer-toggle-btn .layer-toggle-icon {
  width: 14px;
  height: 14px;
}

body.dark-mode .boundary-layer-toggle-btn {
  background: rgba(0, 115, 80, 0.22);
  border-color: rgba(52, 211, 153, 0.4);
  color: #34d399;
}

body.dark-mode .boundary-layer-toggle-btn:hover {
  background: rgba(0, 115, 80, 0.35);
  border-color: #34d399;
}

body.dark-mode .boundary-layer-toggle-btn.is-hidden-layer {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(71, 85, 105, 0.6);
  color: #94a3b8;
}

/* 收合開關圓鈕 */
.boundary-toggle-collapse-btn {
  border: none;
  background: rgba(241, 245, 249, 0.9);
  color: #64748b;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  outline: none;
  flex-shrink: 0;
}

.boundary-toggle-collapse-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

body.dark-mode .boundary-toggle-collapse-btn {
  background: rgba(15, 23, 42, 0.6);
  color: #94a3b8;
}

body.dark-mode .boundary-toggle-collapse-btn:hover {
  background: rgba(15, 23, 42, 0.9);
  color: #f8fafc;
}

.boundary-toggle-collapse-btn .collapse-toggle-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.map-boundary-controller.is-collapsed .boundary-toggle-collapse-btn .collapse-toggle-icon {
  transform: rotate(180deg);
}

/* 關閉開關圓鈕 */
.boundary-close-btn {
  border: none;
  background: rgba(241, 245, 249, 0.9);
  color: #64748b;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  outline: none;
  flex-shrink: 0;
}

.boundary-close-btn:hover {
  background: #fee2e2;
  color: #ef4444;
}

body.dark-mode .boundary-close-btn {
  background: rgba(15, 23, 42, 0.6);
  color: #94a3b8;
}

body.dark-mode .boundary-close-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
}

.boundary-close-btn .close-icon-sm {
  width: 13px;
  height: 13px;
}

.boundary-mode-switch {
  display: flex;
  background: rgba(241, 245, 249, 0.9);
  padding: 3px;
  border-radius: 30px;
  gap: 2px;
}

body.dark-mode .boundary-mode-switch {
  background: rgba(15, 23, 42, 0.6);
}

.mode-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.mode-switch-btn:hover {
  color: var(--text-primary);
}

.mode-switch-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

body.dark-mode .mode-switch-btn.active {
  background: #334155;
  color: #f8fafc;
}

.mode-switch-btn.active .icon-zap {
  color: #ea580c;
}

.boundary-subpanel {
  display: flex;
  align-items: center;
  gap: 6px;
}

.boundary-pill, .profile-btn, .time-pill {
  border: 1px solid rgba(203, 213, 225, 0.8);
  background: #ffffff;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.18s ease;
  outline: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body.dark-mode .boundary-pill, 
body.dark-mode .profile-btn, 
body.dark-mode .time-pill {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}

.boundary-pill:hover, .profile-btn:hover, .time-pill:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.boundary-pill.active, .profile-btn.active, .time-pill.active {
  background: #00875a;
  border-color: #00875a;
  color: #ffffff;
}

.profile-btn.active {
  background: #ea580c;
  border-color: #ea580c;
  color: #ffffff;
}

.subpanel-divider {
  width: 1px;
  height: 18px;
  background: rgba(203, 213, 225, 0.7);
  margin: 0 3px;
}

body.dark-mode .subpanel-divider {
  background: rgba(255, 255, 255, 0.15);
}

.custom-time-wrap {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 14px;
  padding: 2px 6px;
  gap: 2px;
  transition: border-color 0.2s;
}

body.dark-mode .custom-time-wrap {
  background: #1e293b;
  border-color: #334155;
}

.custom-time-wrap:focus-within {
  border-color: #ea580c;
  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.15);
}

.custom-time-input {
  width: 38px;
  border: none;
  outline: none;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  color: #0f172a;
  background: transparent;
}

body.dark-mode .custom-time-input {
  color: #f8fafc;
}

.custom-time-unit {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 600;
}

.isochrone-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: #64748b;
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid rgba(203, 213, 225, 0.7);
}

body.dark-mode .isochrone-status-tag {
  border-color: rgba(255, 255, 255, 0.15);
  color: #94a3b8;
}

.status-indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.status-indicator-dot.online {
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}

.status-indicator-dot.fallback {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

.status-indicator-dot.loading {
  background: #3b82f6;
  animation: pulse-dot 1s infinite alternate;
}

@keyframes pulse-dot {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1.2); opacity: 1; }
}

.map-tool-divider {
  width: 24px;
  height: 1px;
  background: rgba(203, 213, 225, 0.85);
  margin: 1px 0;
  flex-shrink: 0;
}

body.dark-mode .map-tool-divider {
  background: rgba(71, 85, 105, 0.85);
}

/* ======================================================== */
/* 27. 次世代 HUD 地圖資訊彈窗 (Pop-over Card UI 深度重新設計) */
/* ======================================================== */
.gm-style .gm-style-iw-c {
  padding: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  max-width: 320px !important;
  min-width: 290px !important;
  overflow: hidden !important;
}

/* 徹底消除 Google Maps InfoWindow 原生頂部空白標頭列 (iw-chr) */
.gm-style .gm-style-iw-chr {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.gm-style .gm-style-iw-d {
  overflow: hidden !important;
  padding: 0 !important;
  max-height: none !important;
}

.gm-style .gm-style-iw-tc::after {
  background: rgba(255, 255, 255, 0.72) !important;
}

body.dark-mode .gm-style .gm-style-iw-tc::after {
  background: rgba(15, 23, 42, 0.75) !important;
}

/* 隱藏 Google 原生關閉按鈕，改由內容區標題行自訂微型關閉鍵取代 */
.gm-style button.gm-ui-hover-or-focus {
  display: none !important;
}

.pop-card-wrapper {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 頂部標頭與品牌標籤 (水平對齊，關閉按鈕置於最右側) */
.pop-brand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.pop-brand-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

/* 自訂標題列微型關閉按鈕 (✕) */
.pop-close-btn {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  border: 1px solid rgba(203, 213, 225, 0.7);
  background: #f1f5f9;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all 0.2s ease;
  margin-left: auto;
  flex-shrink: 0;
}

.pop-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: scale(1.08);
}

body.dark-mode .pop-close-btn {
  background: #334155;
  border-color: rgba(255, 255, 255, 0.15);
  color: #94a3b8;
}

body.dark-mode .pop-close-btn:hover {
  background: #475569;
  color: #f8fafc;
}

.pop-brand-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.pop-brand-tag.tag-target {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

.pop-brand-tag.tag-seven {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.pop-brand-tag.tag-family {
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

.pop-brand-tag.tag-591 {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.pop-brand-logo {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.pop-store-title {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 地址微型資訊列 */
.pop-address-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #64748b;
  margin-top: -2px;
  line-height: 1.3;
}

.pop-addr-icon {
  font-size: 12px;
  opacity: 0.8;
  flex-shrink: 0;
}

.pop-addr-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 雙欄指標卡片網格 (Dual KPI Grid) - 告別醜陋純列表 */
.pop-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 2px;
}

.pop-stat-box {
  background: #f8fafc;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.pop-stat-box:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pop-stat-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 2px;
}

.pop-stat-val {
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-mono, -apple-system, BlinkMacSystemFont, monospace);
  letter-spacing: -0.3px;
  line-height: 1.25;
}

.pop-stat-val.val-red {
  color: #dc2626;
}

.pop-stat-val.val-green {
  color: #059669;
}

.pop-stat-val.val-blue {
  color: #0284c7;
}

.pop-stat-val.val-orange {
  color: #d97706;
}

.pop-stat-val.val-slate {
  color: #1e293b;
}

.pop-stat-val .val-unit {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  margin-left: 2px;
}

.pop-stat-sub {
  font-size: 9.5px;
  color: #94a3b8;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 距離與細節提示徽章 */
.pop-distance-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #475569;
  background: rgba(241, 245, 249, 0.7);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.pop-distance-bar b {
  color: #0f172a;
}

/* 底部操作按鈕列 */
.pop-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}

.btn-pop-streetview {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #ffffff !important;
  border: none;
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.28);
}

.btn-pop-streetview:hover {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4);
}

.btn-pop-591 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #fff7ed;
  color: #c2410c !important;
  border: 1px solid #fed7aa;
  border-radius: 9px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}

.btn-pop-591:hover {
  background: #fed7aa;
  color: #9a3412 !important;
}

/* 多重重疊分頁切換列 */
.pop-tabs-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 14px 4px 14px;
  border-bottom: 1px solid #f1f5f9;
}

.pop-tabs-list {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  flex: 1;
}

body.dark-mode .pop-tabs-nav {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.pop-tab-pill {
  border: none;
  background: #f1f5f9;
  color: #475569;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.pop-tab-pill.active {
  background: var(--pcsc-green);
  color: #ffffff;
}

/* 重疊門市卡片分頁控制：非活躍分頁嚴格隱藏，活躍分頁單獨呈現 */
.overlap-popup-container {
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}

.overlap-content-panel {
  display: none !important;
}

.overlap-content-panel.active {
  display: block !important;
}

/* 點位圖釘自訂分析彈窗按鈕 */
.btn-pin-analyze {
  width: 100%;
  margin-top: 8px;
  background: linear-gradient(135deg, #008f63 0%, #007350 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-pin-analyze:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 115, 80, 0.35);
}

/* 圖釘選點後，頂部商圈分析按鈕呼吸脈衝提醒 */
@keyframes analyzePulseEffect {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(16, 185, 129, 0);
    transform: scale(1.03);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    transform: scale(1);
  }
}

.btn-analyze-pulse {
  animation: analyzePulseEffect 1.5s infinite ease-in-out !important;
  outline: 2px solid #10b981 !important;
  outline-offset: 2px !important;
}

/* 深色模式深層優化 */
body.dark-mode .gm-style .gm-style-iw-c {
  background: rgba(15, 23, 42, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .pop-store-title {
  color: #f8fafc;
}

body.dark-mode .pop-address-row {
  color: #94a3b8;
}

body.dark-mode .pop-stat-box {
  background: #0f172a;
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .pop-stat-val.val-slate {
  color: #f1f5f9;
}

body.dark-mode .pop-distance-bar {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

body.dark-mode .pop-distance-bar b {
  color: #f8fafc;
}

body.dark-mode .pop-actions-row {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* ======================================================== */
/* 25. 街景專屬沉浸視野與退出控制條 (Street View Immersive & Exit) */
/* ======================================================== */
.streetview-exit-bar {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  animation: slideDownFade 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-exit-streetview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(220, 38, 38, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.2);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.3px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-exit-streetview:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 34px rgba(220, 38, 38, 0.55);
}

.btn-exit-streetview:active {
  transform: translateY(0) scale(0.97);
}

.exit-sv-icon {
  font-size: 1rem;
  font-weight: 900;
}

.exit-sv-text {
  font-size: 0.92rem;
}

.exit-sv-hint {
  font-size: 0.76rem;
  opacity: 0.85;
  font-weight: 500;
}

/* 街景模式下：自動隱藏所有會遮擋街道招牌、路口與門市的 HUD 卡片與工具列 */
body.streetview-active .hud-content-grid,
body.streetview-active .draggable-card.is-floating-card,
body.streetview-active .floating-header-bar,
body.streetview-active .map-floating-toolbar,
body.streetview-active .map-floating-bar,
body.streetview-active .map-floating-subtitle,
body.streetview-active .floating-fab-group,
body.streetview-active .bqca-chat-panel,
body.streetview-active .app-sidebar,
body.streetview-active #landingSearchPortal,
body.streetview-active #mapBoundaryController,
body.streetview-active .map-boundary-controller {
  display: none !important;
}

/* ======================================================== */
/* 26. 頂部一鍵截圖報告模式 (Screenshot / Report Layout Mode) */
/* ======================================================== */
.btn-screenshot-mode {
  padding: 5px 12px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  color: #334155 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.btn-screenshot-mode:hover {
  background: #f8fafc !important;
  border-color: #ff6c00 !important;
  color: #ff6c00 !important;
}

.btn-screenshot-mode.active {
  background: #007350 !important;
  border-color: #00563b !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 115, 80, 0.25) !important;
}

body.dark-mode .btn-screenshot-mode {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .btn-screenshot-mode:hover {
  background: rgba(51, 65, 85, 0.95) !important;
  border-color: #ff6c00 !important;
  color: #ff8533 !important;
}

body.dark-mode .btn-screenshot-mode.active {
  background: linear-gradient(135deg, #007350 0%, #005a3e 100%) !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

body.screenshot-mode .app-sidebar,
body.screenshot-mode .floating-fab-group,
body.screenshot-mode .bqca-chat-panel,
body.screenshot-mode #mapFloatingToolbar,
body.screenshot-mode .hud-bottom-dock,
body.screenshot-mode .map-floating-bar,
body.screenshot-mode .map-floating-subtitle,
body.screenshot-mode .gm-bundled-control,
body.screenshot-mode .gm-fullscreen-control,
body.screenshot-mode .gm-svpc,
body.screenshot-mode .leaflet-control,
body.screenshot-mode .gmnoprint {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transform: translateY(20px) !important;
  transition: all 0.25s ease !important;
}

body.screenshot-mode .floating-header-bar {
  background: rgba(255, 255, 255, 0.52) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  box-shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.10), inset 0 1px 1px 0 rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
}

@media (min-width: 769px) {
  body.screenshot-mode .floating-header-bar {
    border-radius: 999px !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 6px 14px !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    max-width: calc(100% - 32px) !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
}

/* 🌙 深色模式下一鍵截圖頂部控制列與所有元件深度適應 (Dark Mode Screenshot Theming) */
body.dark-mode.screenshot-mode .floating-header-bar,
body.dark-mode.immersive-mode .floating-header-bar {
  background: rgba(15, 23, 42, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), inset 0 1px 1px 0 rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  color: #f8fafc !important;
}

body.dark-mode.screenshot-mode .predict-badge-pill {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(6, 78, 59, 0.4) 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.4) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode.screenshot-mode .predict-tag {
  color: #34d399 !important;
}

body.dark-mode.screenshot-mode .predict-number {
  color: #10b981 !important;
}

body.dark-mode.screenshot-mode .screenshot-brand-filter-group {
  background: rgba(30, 41, 59, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode.screenshot-mode .btn-screenshot-action {
  background: rgba(30, 41, 59, 0.88) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

body.dark-mode.screenshot-mode .btn-screenshot-action:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}

body.dark-mode.screenshot-mode .btn-screenshot-action.btn-clear-pins:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #f87171 !important;
}

body.dark-mode.screenshot-mode .btn-hud-action.btn-icon-only {
  background: rgba(30, 41, 59, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #f8fafc !important;
}

body.dark-mode.screenshot-mode .btn-hud-action.btn-icon-only:hover {
  background: rgba(51, 65, 85, 0.95) !important;
  border-color: #34d399 !important;
  color: #34d399 !important;
}

body.dark-mode.screenshot-mode .btn-screenshot-mode.active {
  background: linear-gradient(135deg, #007350 0%, #005a3e 100%) !important;
  border: 1px solid #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

body.dark-mode.screenshot-mode .ss-action-divider {
  background: rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode.screenshot-mode .screenshot-export-address-pill {
  background: rgba(30, 41, 59, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f8fafc !important;
}

body.dark-mode.screenshot-mode .screenshot-export-address-pill .export-addr-label {
  color: #94a3b8 !important;
}

body.dark-mode.screenshot-mode .screenshot-export-address-pill .export-addr-val {
  color: #f8fafc !important;
}

/* 📸 截圖模式：依使用者需求隱藏目標商圈與地址列，以及常態搜尋工具列 (釋放頂部空間，呈現純淨視覺焦點) */
body.screenshot-mode .search-actions-group,
body.screenshot-mode #searchActionsGroup,
body.screenshot-mode .header-main-row,
body.screenshot-mode #headerMainRow,
body.screenshot-mode .search-address-pill,
body.screenshot-mode #searchAddressPill,
body.screenshot-mode .header-search-section {
  display: none !important;
}

body.screenshot-mode .floating-header-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
  gap: 10px !important;
}

body.screenshot-mode .predict-badge-pill {
  padding: 3px 10px !important;
  height: 32px !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.screenshot-mode .predict-number {
  font-size: 1.15rem !important;
  line-height: 1 !important;
}

body.screenshot-mode .predict-tag {
  font-size: 0.72rem !important;
}

body.screenshot-mode .screenshot-brand-filter-group,
body.screenshot-mode #screenshotBrandFilterGroup {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  width: auto !important;
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  box-sizing: border-box !important;
}

body.screenshot-mode .screenshot-brand-filter-group::-webkit-scrollbar,
body.screenshot-mode #screenshotBrandFilterGroup::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body.dark-mode.screenshot-mode .screenshot-brand-filter-group,
body.dark-mode.screenshot-mode #screenshotBrandFilterGroup {
  background: rgba(30, 41, 59, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.screenshot-mode .header-action-group {
  gap: 6px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.screenshot-mode .screenshot-action-group,
body.screenshot-mode #screenshotActionGroup {
  gap: 6px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: auto !important;
}

body.screenshot-mode .screenshot-btns-row,
body.screenshot-mode #screenshotBtnsRow {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

body.screenshot-mode .btn-screenshot-action {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

body.screenshot-mode .btn-screenshot-action .hud-icon {
  width: 14px !important;
  height: 14px !important;
}

/* 🏢 3D 地圖圖例比例尺樣式 (依圖3簡約單色風格：淺色蓋 + 單色柱身) */
.bubble-scale.is-3d-scale {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  height: 26px;
}

.bubble-scale.is-3d-scale .bubble-sample {
  position: relative;
  background: #10b981 !important;
  border-radius: 2px 2px 3px 3px !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.3s ease;
}

.bubble-scale.is-3d-scale .bubble-sample::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 50%;
  background: #a7f3d0 !important;
}

.bubble-scale.is-3d-scale .bubble-sm {
  width: 8px !important;
  height: 12px !important;
}

.bubble-scale.is-3d-scale .bubble-md {
  width: 8px !important;
  height: 18px !important;
}

.bubble-scale.is-3d-scale .bubble-lg {
  width: 8px !important;
  height: 25px !important;
}

@keyframes slideDownFade {
  from { opacity: 0; transform: translate(-50%, -15px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ======================================================== */
/* 27. 截圖工作室 (Screenshot Studio) 與多門市資訊釘選系統 */
/* ======================================================== */

/* 釘選資訊卡覆蓋容器 */
.pinned-stores-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1040;
  overflow: visible;
}

/* 釘選引線 SVG 圖層 */
.pinned-connector-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1039;
}

/* 單一釘選門市卡片 (Pinned Store Card) - 次世代液態透光磨砂玻璃 */
.pinned-store-card {
  position: absolute;
  pointer-events: auto;
  user-select: none;
  width: 290px;
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.14), inset 0 1px 1px 0 rgba(255, 255, 255, 0.85);
  transform: translate(-50%, -100%);
  margin-top: -16px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  z-index: 1050;
  cursor: grab;
}

.pinned-store-card:active,
.pinned-store-card.dragging {
  cursor: grabbing;
  box-shadow: 0 20px 38px -4px rgba(15, 23, 42, 0.25), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95);
  border-color: #0284c7;
  z-index: 1060;
}

/* 卡片底部固定定位指針三角形 (Pointer Tail) */
.pinned-card-pointer {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 8px;
  overflow: hidden;
  pointer-events: none;
}

.pinned-card-pointer::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.58);
  border-right: 1px solid rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.06);
}

/* 門市 Marker 被選中時的外框高亮 (對齊使用者截圖中的藍色外框) */
.store-marker-selected {
  outline: 3px solid #0284c7 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.6) !important;
  border-radius: 6px !important;
}

/* 深色模式支援 - 液態深色磨砂透光玻璃 */
body.dark-mode .pinned-store-card {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), inset 0 1px 1px 0 rgba(255, 255, 255, 0.14);
  color: #f8fafc;
}

body.dark-mode .pinned-card-pointer::after {
  background: rgba(15, 23, 42, 0.65);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* 📸 截圖模式：徹底收合左側卡片群、側邊欄、商圈控制器，讓出全螢幕底圖且完全不阻擋滑鼠穿透 */
body.screenshot-mode .hud-content-grid,
body.screenshot-mode .app-sidebar,
body.screenshot-mode .map-boundary-controller,
body.screenshot-mode .map-floating-toolbar {
  opacity: 0 !important;
  transform: translateY(24px) scale(0.98) !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

/* 📸 截圖模式：隱藏圖釘選點、常態搜尋列與目標商圈地址列，釋放寬度給品牌列與操作按鈕 */
body.screenshot-mode #btnPinLocation,
body.screenshot-mode .search-actions-group,
body.screenshot-mode #searchActionsGroup,
body.screenshot-mode .header-main-row,
body.screenshot-mode #headerMainRow,
body.screenshot-mode .search-address-pill,
body.screenshot-mode #searchAddressPill,
body.screenshot-mode .header-search-section {
  display: none !important;
}

/* 確保 SVG 引線圖層及其所有內部圖形元素絕不攔截滑鼠事件，點擊 100% 穿透至地圖 Marker */
.pinned-connector-svg,
.pinned-connector-svg * {
  pointer-events: none !important;
}

.pinned-stores-container {
  pointer-events: none !important;
}

/* -------------------------------------------------------- */
/* 釘選門市專屬精簡資訊卡 (Pinned Clean Card) - 四大核心指標 */
/* -------------------------------------------------------- */
.pinned-clean-wrapper {
  padding: 10px 12px;
  gap: 8px;
}

/* PSD Sales 大字體強化英雄區塊 */
.pinned-psd-hero {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.7);
}

.pinned-psd-hero.hero-seven {
  border-left: 4px solid #007350;
  background: rgba(236, 253, 245, 0.45);
}

.pinned-psd-hero.hero-family {
  border-left: 4px solid #0284c7;
  background: rgba(240, 249, 255, 0.45);
}

.pinned-psd-hero.hero-shopee {
  border-left: 4px solid #ee4d2d;
  background: rgba(254, 242, 242, 0.45);
}

.pinned-psd-hero.hero-target {
  border-left: 4px solid #ef4444;
  background: rgba(254, 242, 242, 0.50);
}

.pinned-psd-hero.hero-ok {
  border-left: 4px solid #0052FF;
  background: rgba(239, 246, 255, 0.45);
}

.pinned-psd-hero.hero-simplemart {
  border-left: 4px solid #A8007B;
  background: rgba(253, 242, 248, 0.45);
}

.pinned-psd-hero.hero-generic {
  border-left: 4px solid #64748b;
  background: rgba(241, 245, 249, 0.45);
}

.pinned-psd-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pinned-psd-tag {
  font-size: 11px;
  font-weight: 800;
  color: #334155;
  letter-spacing: 0.3px;
}

.pinned-psd-sub {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  background: rgba(255, 255, 255, 0.85);
  padding: 1px 6px;
  border-radius: 4px;
}

.pinned-psd-val {
  font-size: 21px;
  font-weight: 800;
  font-family: var(--font-mono, -apple-system, BlinkMacSystemFont, monospace);
  letter-spacing: -0.5px;
  line-height: 1.25;
}

.pinned-psd-val.val-green {
  color: #007350;
}

.pinned-psd-val.val-blue {
  color: #0284c7;
}

.pinned-psd-val.val-ok {
  color: #0052FF;
}

.pinned-psd-val.val-purple {
  color: #A8007B;
}

.pinned-psd-val.val-red {
  color: #dc2626;
}

.pinned-psd-val.val-orange {
  color: #ea580c;
}

/* 坪數 (單位：坪) 與 每坪租金 (單位：元/坪) 雙指標網格 */
.pinned-metrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pinned-metric-col {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.60);
  border-radius: 8px;
  padding: 6px 9px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pinned-metric-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
}

.pinned-metric-val-group {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.pinned-metric-num {
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
  font-family: var(--font-mono, -apple-system, BlinkMacSystemFont, monospace);
  letter-spacing: -0.3px;
}

.pinned-metric-unit {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
}

/* 深色模式支援 - 液態透光磨砂玻璃 */
body.dark-mode .pinned-psd-hero {
  background: rgba(30, 41, 59, 0.35);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .pinned-metric-col {
  background: rgba(30, 41, 59, 0.35);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .pinned-metric-num {
  color: #f1f5f9;
}

/* -------------------------------------------------------- */
/* 頂部 Header 截圖模式按鈕組 (Screenshot Action Group) */
/* -------------------------------------------------------- */
.screenshot-action-group,
#screenshotActionGroup {
  display: none !important;
}

body.screenshot-mode .screenshot-action-group,
body.screenshot-mode #screenshotActionGroup {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 📸 截圖多選品牌篩選器容器 (緊湊排版，支援超寬自適應平滑微滾動) */
@media (min-width: 769px) {
  body:not(.screenshot-mode) .screenshot-brand-filter-group,
  body:not(.screenshot-mode) #screenshotBrandFilterGroup {
    display: none !important;
  }

  body.screenshot-mode .screenshot-brand-filter-group,
  body.screenshot-mode #screenshotBrandFilterGroup {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
}

.screenshot-brand-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-shrink: 1;
}

.screenshot-brand-filter-group::-webkit-scrollbar {
  display: none;
}

.ss-action-divider {
  width: 1px;
  height: 20px;
  background: rgba(203, 213, 225, 0.8);
  margin: 0 2px;
  flex-shrink: 0;
}

/* 截圖專用多選品牌膠囊按鈕 (強制不換行、緊湊銳利) */
.ss-brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  border: 1px solid transparent;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.55;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1.2;
}

.ss-brand-pill:hover {
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}

/* 激活勾選狀態 (多選中) */
.ss-brand-pill.active {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(203, 213, 225, 0.9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  opacity: 1;
}

/* 各品牌專屬邊框微色標 (提升辨識度) */
.ss-brand-pill[data-ss-brand="7-11"].active {
  border-color: #007350;
  color: #007350;
}

.ss-brand-pill[data-ss-brand="family"].active {
  border-color: #005bac;
  color: #005bac;
}

.ss-brand-pill[data-ss-brand="591"].active {
  border-color: #f97316;
  color: #ea580c;
}

.ss-brand-pill[data-ss-brand="all"].active {
  border-color: #007350;
  color: #007350;
  font-weight: 800;
}

/* 🎯 預定點錨點標籤 (固定常駐，不可反選，點擊回正置中) */
.ss-brand-pill.ss-target-anchor {
  opacity: 1 !important;
  cursor: pointer;
  background: rgba(254, 242, 242, 0.85);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #dc2626;
  font-weight: 800;
}

.ss-brand-pill.ss-target-anchor:hover {
  background: #fee2e2;
  border-color: #ef4444;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

.ss-brand-pill[data-ss-brand="target"].active {
  border-color: #ef4444;
  color: #dc2626;
}

.ss-brand-logo {
  width: 15px;
  height: 15px;
  object-fit: contain;
  border-radius: 2px;
}

.ss-target-dot {
  font-size: 0.82rem;
  line-height: 1;
}

.ss-count-badge {
  font-size: var(--font-size-xs);
  font-weight: 800;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.12);
  color: inherit;
  min-width: 14px;
  height: 15px;
  line-height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap !important;
}

.ss-brand-pill.active .ss-count-badge {
  background: rgba(0, 0, 0, 0.06);
}

/* 暗色模式適配 */
body.dark-mode .screenshot-brand-filter-group {
  background: rgba(30, 41, 59, 0.40);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .ss-action-divider {
  background: rgba(51, 65, 85, 0.8);
}

body.dark-mode .ss-brand-pill {
  color: #94a3b8;
}

body.dark-mode .ss-brand-pill:hover {
  background: rgba(51, 65, 85, 0.5);
}

body.dark-mode .ss-brand-pill.active {
  background: #1e293b;
  color: #f8fafc;
  border-color: rgba(71, 85, 105, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

body.dark-mode .ss-brand-pill[data-ss-brand="7-11"].active {
  border-color: #10b981;
  color: #34d399;
}

body.dark-mode .ss-brand-pill[data-ss-brand="family"].active {
  border-color: #38bdf8;
  color: #38bdf8;
}

body.dark-mode .ss-brand-pill[data-ss-brand="591"].active {
  border-color: #fb923c;
  color: #fb923c;
}

body.dark-mode .ss-brand-pill[data-ss-brand="target"].active {
  border-color: #f87171;
  color: #f87171;
}

body.dark-mode .ss-brand-pill[data-ss-brand="all"].active {
  border-color: #10b981;
  color: #34d399;
}

body.dark-mode .ss-brand-pill.ss-target-anchor,
body.dark-mode .legend-item.legend-target-anchor {
  background: rgba(127, 29, 29, 0.35) !important;
  border-color: rgba(248, 113, 113, 0.45) !important;
  color: #fca5a5 !important;
}

body.dark-mode .ss-count-badge {
  background: rgba(255, 255, 255, 0.1);
}

.btn-screenshot-action {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.70);
  transition: all 0.2s ease;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 4px 10px !important;
  font-size: 0.78rem !important;
  gap: 5px !important;
  height: 32px !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

.btn-screenshot-action .hud-text {
  white-space: nowrap !important;
}

.screenshot-btns-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.screenshot-mode .btn-screenshot-mode {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 4px 12px !important;
  font-size: 0.8rem !important;
  height: 32px !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}

.btn-screenshot-action.btn-screenshot-exit {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #dc2626 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

.btn-screenshot-action.btn-screenshot-exit:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
}

body.dark-mode .btn-screenshot-action.btn-screenshot-exit {
  background: rgba(239, 68, 68, 0.22) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
}

body.dark-mode .btn-screenshot-action.btn-screenshot-exit:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
}

.btn-screenshot-action:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  transform: translateY(-1px);
}

.btn-screenshot-action.btn-clear-pins:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
}

body.dark-mode .btn-screenshot-action {
  background: rgba(30, 41, 59, 0.45);
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.14);
}

body.dark-mode .btn-screenshot-action:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

/* 截圖中隱藏暫時干擾元素 (維持純淨畫面) */
body.capturing-screenshot .screenshot-action-group,
body.capturing-screenshot .btn-screenshot-mode,
body.capturing-screenshot .btn-icon-only,
body.capturing-screenshot .pop-close-btn,
body.capturing-screenshot .gm-bundled-control,
body.capturing-screenshot .leaflet-control {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 截圖匯出專用地址膠囊 (預設隱藏，僅在匯出截圖時優雅呈現於頂部空白區) */
.screenshot-export-address-pill {
  display: none !important;
  align-items: center;
  gap: 7px;
  padding: 4px 14px;
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 999px;
  font-size: 0.82rem;
  height: 32px;
  box-sizing: border-box;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-left: 4px;
}

.screenshot-export-address-pill .export-addr-icon {
  font-size: 0.85rem;
}

.screenshot-export-address-pill .export-addr-label {
  color: #64748b;
  font-weight: 700;
}

.screenshot-export-address-pill .export-addr-val {
  color: #0f172a;
  font-weight: 800;
  letter-spacing: 0.2px;
}

body.dark-mode .screenshot-export-address-pill {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(51, 65, 85, 0.9);
}

body.dark-mode .screenshot-export-address-pill .export-addr-label {
  color: #94a3b8;
}

body.dark-mode .screenshot-export-address-pill .export-addr-val {
  color: #f8fafc;
}

/* 匯出截圖當下立即呈現於頂部懸浮列 */
body.capturing-screenshot .screenshot-export-address-pill {
  display: inline-flex !important;
}

/* -------------------------------------------------------- */
/* 截圖預覽與匯出視窗樣式 (Screenshot Preview Modal) */
/* -------------------------------------------------------- */
.screenshot-preview-backdrop {
  z-index: 2000 !important;
}

.screenshot-modal-card {
  width: 90vw;
  max-width: 960px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(226, 232, 240, 0.9);
  overflow: hidden;
}

body.dark-mode .screenshot-modal-card {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(51, 65, 85, 0.9);
}

.screenshot-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.screenshot-img-preview-box {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(203, 213, 225, 0.8);
  background: #0f172a;
  text-align: center;
}

.screenshot-preview-img {
  max-width: 100%;
  max-height: 52vh;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.screenshot-summary-panel {
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 10px;
  padding: 12px 14px;
}

body.dark-mode .screenshot-summary-panel {
  background: rgba(30, 41, 59, 0.65);
  border-color: rgba(51, 65, 85, 0.8);
}

.summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.summary-title {
  font-weight: 700;
  font-size: 0.86rem;
  color: #1e293b;
}

body.dark-mode .summary-title {
  color: #f1f5f9;
}

.summary-subtitle {
  font-size: 0.78rem;
  color: #64748b;
}

.pinned-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.pinned-summary-table th,
.pinned-summary-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

body.dark-mode .pinned-summary-table th,
body.dark-mode .pinned-summary-table td {
  border-bottom-color: rgba(51, 65, 85, 0.8);
}

.pinned-summary-table th {
  font-weight: 700;
  color: #475569;
  background: rgba(241, 245, 249, 0.5);
}

body.dark-mode .pinned-summary-table th {
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.5);
}

.screenshot-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  background: rgba(248, 250, 252, 0.6);
}

body.dark-mode .screenshot-modal-footer {
  border-top-color: rgba(51, 65, 85, 0.8);
  background: rgba(15, 23, 42, 0.6);
}

@media (max-width: 768px) {
  .screenshot-studio-toolbar {
    top: 10px;
    padding: 6px 10px;
    flex-wrap: wrap;
    border-radius: 16px;
    justify-content: center;
  }
  .studio-center-hint {
    display: none;
  }
  .studio-store-select {
    max-width: 120px;
  }
}

/* ======================================================== */
/* 28. 全域移除 Google Maps 原生全螢幕/縮放/小黃人按鈕 (改由懸浮工具列統一操控) */
/* ======================================================== */
.gm-fullscreen-control,
.gm-bundled-control,
.gm-svpc,
button[title*="全螢幕"],
button[title*="Toggle fullscreen view"],
button[aria-label*="全螢幕"],
button[aria-label*="Toggle fullscreen view"],
.gmnoprint:has(.gm-fullscreen-control),
.gm-style > div:has(.gm-fullscreen-control),
.gm-style .gm-fullscreen-control {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ======================================================== */
/* 29. 試用白名單鎖定提示橫幅 (高質感懸浮卡片風格，比照 Toast 卡片) */
/* ======================================================== */
.portal-whitelist-notice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  max-width: 660px;
  margin: 0 auto 22px auto;
  padding: 16px 20px 16px 18px;
  background: #ffffff; /* 純白高質感浮雕卡片底色 */
  border: 1.5px solid #fee2e2; /* 淡珊瑚色極細高雅邊框 */
  border-radius: 14px;
  box-shadow: 0 20px 30px -8px rgba(239, 68, 68, 0.12), 0 8px 12px -4px rgba(15, 23, 42, 0.05);
  box-sizing: border-box;
  overflow: hidden;
  animation: portalFadeUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
  text-align: left;
}

body.dark-mode .portal-whitelist-notice {
  background: #1e293b;
  border-color: rgba(248, 113, 113, 0.35);
  box-shadow: 0 20px 30px -8px rgba(0, 0, 0, 0.45);
}

/* 左側紅色垂直邊框 (Accent Bar，比照 Toast 左側彩色邊條) */
.portal-whitelist-notice .portal-whitelist-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: #ef4444;
  border-radius: 14px 0 0 14px;
}

/* 狀態圖標方塊徽章 (Icon Badge) */
.portal-whitelist-notice .portal-whitelist-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  background: #ef4444;
  color: #ffffff;
  margin-left: 2px;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.25);
  flex-shrink: 0;
}

.portal-whitelist-notice .portal-whitelist-badge svg,
.portal-whitelist-notice .portal-whitelist-badge i {
  width: 20px;
  height: 20px;
  stroke-width: 2.3;
}

/* 內容區塊 */
.portal-whitelist-notice .portal-whitelist-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-right: 4px;
}

/* 標題：深黑藍 15px 加粗 700 */
.portal-whitelist-notice .portal-whitelist-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
  margin: 0;
  letter-spacing: -0.01em;
}

body.dark-mode .portal-whitelist-notice .portal-whitelist-title {
  color: #f8fafc;
}

/* 內文：深岩灰 13.5px */
.portal-whitelist-notice .portal-whitelist-text {
  font-size: 13.5px;
  font-weight: 400;
  color: #475569;
  line-height: 1.55;
  margin: 4px 0 0 0;
}

body.dark-mode .portal-whitelist-notice .portal-whitelist-text {
  color: #94a3b8;
}

.btn-disabled-whitelist {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.85) !important;
  pointer-events: auto !important; /* 保留 hover 事件以顯示 title tooltip */
}

.btn-disabled-whitelist:hover {
  transform: none !important;
  box-shadow: none !important;
}

.google-search-locate.btn-disabled-whitelist:hover {
  background: transparent !important;
  color: #9ca3af !important;
  transform: none !important;
}

/* 試用白名單鎖定下的搜尋輸入框樣式 */
.google-search-box.is-disabled-whitelist,
.search-address-pill.is-disabled-whitelist {
  background: rgba(241, 245, 249, 0.85) !important;
  border-color: #cbd5e1 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.google-search-box.is-disabled-whitelist:hover,
.search-address-pill.is-disabled-whitelist:hover,
.google-search-box.is-disabled-whitelist:focus-within,
.search-address-pill.is-disabled-whitelist:focus-within {
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
}

.google-search-box.is-disabled-whitelist .google-search-input,
.search-address-pill.is-disabled-whitelist .address-input {
  cursor: not-allowed !important;
  color: #94a3b8 !important;
  user-select: none;
}

.google-search-box.is-disabled-whitelist .google-search-icon,
.search-address-pill.is-disabled-whitelist .search-icon-pill {
  opacity: 0.55;
}

body.dark-mode .google-search-box.is-disabled-whitelist,
body.dark-mode .search-address-pill.is-disabled-whitelist {
  background: rgba(30, 41, 59, 0.6) !important;
  border-color: #475569 !important;
  box-shadow: none !important;
}

body.dark-mode .google-search-box.is-disabled-whitelist .google-search-input,
body.dark-mode .search-address-pill.is-disabled-whitelist .address-input {
  color: #64748b !important;
}