/* ========================================
   設計 Token（Apple 風格設計系統）
   僅新增變數層，不更動既有 class/id 名稱與 HTML 結構。
   ======================================== */

:root {
  /* 品牌強調色（沿用既有藍色系） */
  --color-accent: #3b82f6;
  --color-accent-hover: #2563eb;
  --color-accent-active: #1d4ed8;
  --gradient-accent: linear-gradient(135deg, #3b82f6, #2563eb);
  --gradient-accent-hover: linear-gradient(135deg, #2563eb, #1d4ed8);

  /* 語意色：危險／成功／警示／強調底色／遮罩 */
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-danger-fill: rgba(239, 68, 68, 0.12);
  --color-success: #16a34a;
  --color-warning-fill: rgba(234, 88, 12, 0.12);
  --color-warning-border: rgba(234, 88, 12, 0.3);
  --color-warning-text: #c2410c;
  --color-accent-fill: rgba(59, 130, 246, 0.12);
  --color-overlay: rgba(0, 0, 0, 0.6);

  /* 表面／文字色（淺色模式預設值） */
  --color-surface: rgba(255, 255, 255, 0.95);
  --color-surface-solid: #ffffff;
  --color-fill-secondary: rgba(0, 0, 0, 0.05);
  --color-fill-primary: rgba(0, 0, 0, 0.08);
  --color-label: #0f172a;
  --color-label-secondary: #64748b;
  --color-separator: #e2e8f0;
  --color-fill-tertiary: #f1f5f9;
  --color-scroll-thumb: #cbd5e1;
  --color-scroll-thumb-hover: #94a3b8;
  --color-panel-border: rgba(255, 255, 255, 0.4);

  /* 8pt 間距系統 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* 圓角尺度（取代原本 19 種雜亂數值） */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* 陰影層級 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);

  /* 動畫曲線：macOS/iOS 常見的彈簧感 easing */
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-decelerate: cubic-bezier(0.22, 1, 0.36, 1);

  /* 毛玻璃（vibrancy）強度 */
  --blur-panel: 20px;
  --blur-menu: 16px;

  /* ── 玻璃材質配方（v0.6.0）──────────────────────────────
     收斂 20+ 處各自手寫的 blur()+saturate() 玻璃；沿用既有變數為底 */
  --glass-blur: var(--blur-panel);
  --glass-saturate: 180%;
  --glass-vibrancy: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  /* 固定深色玻璃：Dynamic Island、衛星底圖控制列（不隨深淺色切換） */
  --glass-dark-bg: rgba(28, 28, 34, 0.82);
  --glass-dark-hairline: rgba(255, 255, 255, 0.12);
  --glass-dark-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  /* 自適應面板玻璃：跟隨深淺色（指向既有 surface / panel-border token） */
  --glass-panel-bg: var(--color-surface);
  --glass-panel-hairline: var(--color-panel-border);
  --glass-panel-shadow: var(--shadow-lg);

  /* ── 動效尺度（v0.6.0）─────────────────────────────────
     easing 沿用既有 --ease-*；此處補「時長」與液態位移曲線 */
  --motion-fast: 0.15s;
  --motion-base: 0.25s;
  --motion-slow: 0.4s;
  --ease-liquid: cubic-bezier(0.68, -0.4, 0.27, 1.4);
  --beam-duration: 6s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-danger: #f87171;
    --color-danger-hover: #ef4444;
    --color-danger-fill: rgba(248, 113, 113, 0.16);
    --color-success: #4ade80;
    --color-warning-fill: rgba(251, 146, 60, 0.16);
    --color-warning-border: rgba(251, 146, 60, 0.35);
    --color-warning-text: #fb923c;
    --color-accent-fill: rgba(96, 165, 250, 0.18);
    --color-overlay: rgba(0, 0, 0, 0.7);

    --color-surface: rgba(30, 32, 40, 0.85);
    --color-surface-solid: #1e2028;
    --color-fill-secondary: rgba(255, 255, 255, 0.08);
    --color-fill-primary: rgba(255, 255, 255, 0.12);
    --color-label: #f1f5f9;
    --color-label-secondary: #94a3b8;
    --color-separator: #3a3d47;
    --color-fill-tertiary: #262933;
    --color-scroll-thumb: #454955;
    --color-scroll-thumb-hover: #5c6170;
    --color-panel-border: rgba(255, 255, 255, 0.08);

    /* 深色模式下自適應面板玻璃略微加深、髮絲線提亮 */
    --glass-dark-bg: rgba(24, 24, 30, 0.8);
    --glass-panel-hairline: rgba(255, 255, 255, 0.1);
  }
}

/* ========================================
   基礎樣式與原生 APP 體驗優化
   ======================================== */

html, body, #map {
  height: 100%; 
  margin: 0; 
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  /* 防止 iOS 橡皮筋效果 */
  overscroll-behavior: none;
  /* 深色背景防止白色區塊 */
  background-color: #1a1a2e;
  /* 禁止滾動 */
  overflow: hidden;
}

/* iOS 原生 APP 體驗 */
html {
  /* 防止雙擊縮放 */
  touch-action: manipulation;
  /* 移除 padding，改用其他方式處理 safe area */
}

body {
  /* 防止 iOS 過度捲動 */
  -webkit-overflow-scrolling: touch;
  /* 防止文字選取（更像原生 APP） */
  -webkit-user-select: none;
  user-select: none;
  /* 防止長按彈出選單 */
  -webkit-touch-callout: none;
  /* 移除點擊高亮 */
  -webkit-tap-highlight-color: transparent;
  /* 固定定位防止滾動 */
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* 允許輸入框選取文字 */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* 獨立模式（已安裝為 APP）時的特殊處理 */
@media (display-mode: standalone) {
  #map {
    /* 地圖佔滿全螢幕 */
    height: 100% !important;
    width: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }
}

/* iOS 狀態欄背景（standalone 模式）- 適應系統深淺色 */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (display-mode: standalone) {
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: env(safe-area-inset-top);
      background: rgba(248, 250, 252, 0.85);
      z-index: 9998;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
  }
  
  /* 深色模式下的狀態欄背景 */
  @media (display-mode: standalone) and (prefers-color-scheme: dark) {
    body::before {
      background: rgba(26, 26, 46, 0.85);
    }
  }
}

/* 頂部提醒樣式（RWD） */
.top-notice {
    position: fixed;
    /* 搜尋動態島固定佔用頂部置中位置，提示需往下錯開避免重疊 */
    top: calc(env(safe-area-inset-top, 0px) + 62px);
    left: 50%;
    transform: translate(-50%, -20px); /* 初始在視口上方一點點 */
    background: rgba(75, 85, 99, 0.95); /* 灰底 */
    color: #ffffff; /* 白字 */
    display: inline-block;
    text-align: left; /* 卡片置中，但文字靠左對齊 */
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.35;
    border-radius: var(--radius-md); /* 矩形圓角 */
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
    max-width: min(520px, 92vw); /* 不滿版 */
    z-index: 3000;
    opacity: 0;
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.top-notice.show {
    transform: translate(-50%, 0); /* 自頂部滑下 */
    opacity: 1;
}

.top-notice.hide {
    opacity: 0;
    transform: translate(-50%, -10px);
    pointer-events: none;
}

@media (max-width: 768px) {
  .top-notice {
    font-size: 13px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
  }
}

/* 優化 Popup 樣式 */
.leaflet-popup-content-wrapper {
    background: var(--color-surface);
    backdrop-filter: blur(var(--blur-panel)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(180%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-panel-border);
}

.leaflet-popup-pane {
    z-index: 10050;
}

/* Popup 開啟期間，讓地圖容器整體浮到搜尋動態島／控制面板／手機版選單按鈕之上，
   避免這些固定定位的輔助按鈕（z-index 屬於 body 層級的獨立堆疊上下文）擋住 popup。
   .leaflet-map-pane 因平移時套用 CSS transform 而自成堆疊上下文，
   popup-pane 內部再高的 z-index 也無法穿透到 #map 外部的兄弟元素之上，
   因此需要讓 #map 本身取得夠高的 z-index 才能讓 popup 顯示在最上層。 */
.leaflet-container.popup-elevated {
    z-index: 3600;
}

.leaflet-popup-content {
    font-size: 14px;
    line-height: 1.5;
    margin: 16px 20px;
    color: var(--color-label);
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 桌面版滾動條樣式 */
.leaflet-popup-content::-webkit-scrollbar {
    width: 6px;
}

.leaflet-popup-content::-webkit-scrollbar-track {
    background: var(--color-fill-tertiary);
    border-radius: var(--radius-xs);
}

.leaflet-popup-content::-webkit-scrollbar-thumb {
    background: var(--color-scroll-thumb);
    border-radius: var(--radius-xs);
    transition: background 0.2s ease;
}

.leaflet-popup-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-scroll-thumb-hover);
}

.leaflet-popup-tip {
    background: var(--color-surface-solid);
    border: 1px solid var(--color-panel-border);
    box-shadow: var(--shadow-sm);
}

.popup-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-separator);
}

.popup-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    flex-shrink: 0;
}

.popup-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--color-label);
    margin: 0;
}

.shape-popup-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-separator);
}

.shape-popup-kicker {
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-danger-hover);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.shape-popup-subtitle {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-label-secondary);
}

.popup-field {
    display: grid;
    grid-template-columns: fit-content(72px) minmax(0, 1fr);
    gap: 8px 10px;
    align-items: start;
    margin-bottom: 10px;
    padding: 0;
}

.popup-field-label {
    color: var(--color-label-secondary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.popup-field-value {
    color: var(--color-label);
    min-width: 0;
    line-height: 1.65;
    white-space: normal;
    word-break: break-word;
}

.popup-field-multiline {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 12px;
    padding: 12px;
    background: var(--color-fill-tertiary);
    border: 1px solid var(--color-separator);
    border-radius: var(--radius-md);
}

.popup-field-multiline .popup-field-label {
    color: var(--color-label-secondary);
}

.popup-field-multiline .popup-field-value {
    white-space: pre-line;
}

.popup-field-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--color-fill-secondary);
    color: var(--field-accent, var(--color-label));
    font-size: 12px;
    line-height: 1.4;
}

@media (prefers-color-scheme: dark) {
    .popup-field-badge {
        color: var(--field-accent-dark, var(--color-label));
    }
}

.ais-vessel-marker {
    background: transparent;
    border: 0;
}

.ais-vessel-symbol {
    position: relative;
    width: 18px;
    height: 18px;
    transform: rotate(var(--ais-heading));
    transform-origin: 50% 50%;
}

.ais-vessel-ship {
    display: block;
    width: 18px;
    height: 18px;
    overflow: visible;
}

.ais-vessel-shadow {
    fill: rgba(15, 23, 42, 0.35);
    transform: translate(1.4px, 1.6px);
}

.ais-vessel-arrow {
    fill: var(--ais-color);
    stroke: #ffffff;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ais-popup-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 10px;
    color: #ffffff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}

.popup-distance {
    background: var(--color-accent-fill);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    margin: 8px 0;
    border-left: 4px solid var(--color-accent);
    color: var(--color-label);
}

.popup-distance-alert {
    background: var(--color-danger-fill);
    border: 2px solid var(--color-danger);
    border-left: 4px solid var(--color-danger);
    animation: subtle-pulse 2s infinite;
}

.popup-distance-alert-value {
    color: var(--color-danger);
    font-weight: 700;
}

.popup-links {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-separator);
}

.popup-links-title {
    font-size: 12px;
    color: var(--color-label-secondary);
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.popup-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-separator);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 裝備資訊樣式 */
.equipment-info {
    margin: 15px 0;
    padding: 12px;
    background: var(--color-fill-tertiary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-separator);
}

.equipment-info h4 {
    margin: 0 0 12px 0;
    color: var(--color-label);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.equipment-info h4:before { content: ""; }

.equipment-item {
    margin-bottom: 12px;
    padding: 10px;
    background: var(--color-surface-solid);
    border: 1px solid var(--color-separator);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.equipment-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.equipment-item:last-child {
    margin-bottom: 0;
}

.equipment-item h5 {
    margin: 0 0 6px 0;
    font-size: 14px;
    font-weight: 600;
}

.equipment-item h5 a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

.equipment-item h5 a:hover {
    color: var(--color-accent-active);
    text-decoration: underline;
}

.equipment-item p {
    margin: 6px 0;
    font-size: 12px;
    color: var(--color-label-secondary);
    line-height: 1.4;
}

.equipment-images img {
    max-width: 180px;
    height: auto;
    cursor: pointer;
    border-radius: var(--radius-xs);
    border: 1px solid var(--color-separator);
    transition: all 0.2s ease;
}

.equipment-images img:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.equipment-fallback-note {
    color: var(--color-label-secondary);
    font-size: 12px;
}

.equipment-fallback-warning {
    color: var(--color-danger-hover);
}

.equipment-fallback-success {
    color: var(--color-success);
}

.equipment-loading {
    text-align: center;
    padding: 20px;
    color: var(--color-label-secondary);
    line-height: 1.4;
}

/* 裝備圖片 Lightbox（桌面版點擊圖片放大檢視） */
.image-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-overlay);
    backdrop-filter: blur(6px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    cursor: pointer;
    animation: fadeIn 0.2s ease;
}

.image-lightbox-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    cursor: default;
}

.image-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-panel-border);
    border-radius: 50%;
    background: var(--color-surface);
    backdrop-filter: blur(var(--blur-menu)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-menu)) saturate(180%);
    color: var(--color-label);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s var(--ease-spring), background-color 0.2s ease;
}

.image-lightbox-close:hover {
    background: var(--color-fill-primary);
}

.image-lightbox-close:active {
    transform: scale(0.9);
}

.link-btn {
    display: inline-block;
    margin: 4px 6px 4px 0;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-fill-tertiary);
    color: var(--color-label);
    text-decoration: none;
    font-size: 12px;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-separator);
    white-space: nowrap;
}
.link-btn:hover {
    background: var(--color-fill-secondary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-scroll-thumb);
}

/* 背景遮罩 */
.panel-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 1400;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.panel-backdrop.show {
    display: block;
    opacity: 1;
}

/* 控制面板樣式 */
.control-panel {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--glass-panel-bg);
    backdrop-filter: var(--glass-vibrancy);
    -webkit-backdrop-filter: var(--glass-vibrancy);
    padding: 18px;
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-panel-shadow);
    border: 1px solid var(--glass-panel-hairline);
    z-index: 1500;
    min-width: 320px;
    max-width: 380px;
    max-height: calc(100vh - 30px);
    overflow-y: auto;
    overflow-x: visible;
    box-sizing: border-box;
    /* 桌面版動畫過渡 */
    transition: transform 0.25s var(--ease-decelerate), opacity 0.25s var(--ease-decelerate);
}

/* 桌面版控制面板滾動條樣式 */
.control-panel::-webkit-scrollbar {
    width: 6px;
}

.control-panel::-webkit-scrollbar-track {
    background: var(--color-fill-tertiary);
    border-radius: var(--radius-xs);
}

.control-panel::-webkit-scrollbar-thumb {
    background: var(--color-scroll-thumb);
    border-radius: var(--radius-xs);
    transition: background 0.2s ease;
}

.control-panel::-webkit-scrollbar-thumb:hover {
    background: var(--color-scroll-thumb-hover);
}

.control-title {
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--color-label);
    font-size: 16px;
}

.input-group {
    margin-bottom: 12px;
    position: relative;
}

.input-label {
    display: block;
    font-size: 12px;
    color: var(--color-label-secondary);
    margin-bottom: 4px;
    font-weight: 500;
}

/* v0.6.0 面板重排小工具 */
.field-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.field-row-2 .input-label {
    white-space: nowrap;
}

@media (max-width: 360px) {
    .field-row-2 {
        grid-template-columns: 1fr;
    }
}

.btn-block {
    display: block;
    width: 100%;
    margin: 0;
}

/* 群組內「標題 + 開關」同一行（例：軍事單位 + 顯示切換） */
.panel-inline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.panel-inline-head .input-label {
    margin-bottom: 0;
}

/* ========================================
   控制面板分組（iOS 設定 App 風格的「分組列表」）
   ======================================== */
.settings-section {
    margin-bottom: 16px;
}

.settings-section-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-label-secondary);
    margin: 0 0 8px 2px;
}

.settings-group {
    background: var(--color-fill-tertiary);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.settings-group > .input-group {
    padding: 10px 12px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-separator);
}

.settings-group > .input-group:last-child {
    border-bottom: none;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-separator);
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-row-label {
    font-size: 14px;
    color: var(--color-label);
}

/* iOS 風格開關
   v0.6.0：滑塊改用 --ease-liquid（先微幅回拉再 overshoot）＝彈性液滴手感；
   其餘外觀不變。 */
.ios-switch {
    position: relative;
    flex-shrink: 0;
    width: 46px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-fill-secondary);
    cursor: pointer;
    transition: background-color var(--motion-base) var(--ease-standard);
}

.ios-switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    box-shadow: var(--shadow-sm);
    transition: transform var(--motion-base) var(--ease-liquid);
}

.ios-switch.active {
    background: var(--color-accent);
}

.ios-switch.active::before {
    transform: translateX(20px);
}

@media (prefers-reduced-motion: reduce) {
    .ios-switch::before { transition: none; }
}

.input-field {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-separator);
    border-radius: var(--radius-sm);
    font-size: 14px;
    background: var(--color-surface-solid);
    color: var(--color-label);
    transition: border-color var(--motion-base) ease, box-shadow var(--motion-base) ease;
    box-sizing: border-box;
}

.input-field:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-fill);
}

/* 優化下拉選單樣式 */
select.input-field {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

select.input-field:hover {
    border-color: #3b82f6;
}

/* 自定義軍事標記樣式 */
.custom-military-marker {
    background: none !important;
    border: none !important;
}

/* --- Leaflet.draw / 測距 外觀微調（紅色主題）--- */
/* 新繪圖形的預設紅色（JS 亦會設定；此為保險）
   注意：CSS 的 stroke 會蓋過 Leaflet 寫在 SVG 上的 stroke 屬性，因此任何需要
   自訂顏色的圖層都必須用 className 從這條規則排除（adiz / theater /
   submarine-cable / nfz-shape 皆是），否則 setStyle({color}) 不會生效 */
.leaflet-overlay-pane svg path.leaflet-interactive:not(.adiz-path):not(.theater-path):not(.submarine-cable-path):not(.nfz-shape-path) {
  stroke: #ef4444;
}
.leaflet-overlay-pane svg path.leaflet-interactive + path:not(.adiz-path):not(.theater-path):not(.submarine-cable-path):not(.nfz-shape-path) {
  stroke: #ef4444;
}
/* 編輯控制點顏色（若外掛使用此類名） */
.leaflet-div-icon.leaflet-editing-icon,
.leaflet-vertex-icon {
  border-color: #ef4444 !important;
  background: #ef4444 !important;
}
/* 零距離標記動畫效果 */
@keyframes pulse {
    0% {
    transform: scale(1);
    opacity: 1;
    }
    50% {
    transform: scale(1.2);
    opacity: 0.7;
    }
    100% {
    transform: scale(1);
    opacity: 1;
    }
}

@keyframes pulseRing {
    0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }
    100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.zero-distance-marker {
    z-index: 1000 !important;
}

/* popup中零距離標記的微妙動畫 */
@keyframes subtle-pulse {
    0%, 100% {
    transform: scale(1);
    opacity: 1;
    }
    50% {
    transform: scale(1.02);
    opacity: 0.95;
    }
}

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 590;
    cursor: pointer;
    transition: background-color 0.2s var(--ease-standard), opacity 0.2s var(--ease-standard), transform 0.15s var(--ease-spring);
    margin-right: 8px;
    margin-bottom: 8px;
}

.btn:active {
    transform: scale(0.96);
}

.btn-primary {
    background: var(--color-accent);
    color: white;
    border: none;
}

.btn-primary:hover {
    background: var(--color-accent-hover);
}

.btn-primary:active {
    background: var(--color-accent-active);
}

.btn-secondary {
    background: var(--color-fill-secondary);
    color: var(--color-label);
    border: none;
}

.btn-secondary:hover {
    background: var(--color-fill-primary);
}

.btn-danger {
    background: var(--color-danger-fill);
    color: var(--color-danger-hover);
    border: none;
}

.btn-danger:hover {
    background: var(--color-danger);
    color: white;
}

.info-panel {
    background: var(--color-fill-tertiary);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--color-label-secondary);
    margin-top: 10px;
    border: 1px solid var(--color-separator);
}

/* ========================================
   搜尋動態島（.search-island）
   固定深色毛玻璃、不隨淺色/深色模式切換——比照真實 iOS 動態島恆定深色的觀感
   ======================================== */
.search-island {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2500;
    background: var(--glass-dark-bg);
    backdrop-filter: var(--glass-vibrancy);
    -webkit-backdrop-filter: var(--glass-vibrancy);
    border: 1px solid var(--glass-dark-hairline);
    border-radius: 999px;
    box-shadow: var(--glass-dark-shadow);
    max-width: min(560px, calc(100vw - 20px));
    overflow: hidden;
    /* width 用 spring 曲線做彈性動感；border-radius 必須用 ease-decelerate 而非 spring，
       因為 spring 的 overshoot 會讓 border-radius 瞬間跌到 0 或負值（呈現直角），
       ease-decelerate 確保值永遠在起點與目標之間單調遞減，不會出現尖角閃爍 */
    transition: width 0.4s var(--ease-spring), border-radius 0.3s var(--ease-decelerate),
        max-width 0.35s var(--ease-spring), background-color 0.2s ease;
    will-change: width, border-radius;
    contain: layout style;
}

/* 展開時的寬度：calc(100vw - 20px) 這段是手機安全網——螢幕比目標寬度窄時自動改用「螢幕寬度減
   20px 邊界」，min() 會取兩者較小值，所以手機版永遠不會超出螢幕，不需要另外寫 media query */
.search-island.expanded {
    border-radius: var(--radius-lg);
    width: min(460px, calc(100vw - 20px));
}

/* 內容比較多時（目前是查到百科摘要卡片，未來可能還有其他附加資訊）再進一步加寬，
   讓縮圖/摘要文字有更多空間，避免每次都固定佔用最大寬度顯得笨重；
   由 location_search.js 依內容動態加上/移除 .island-wide */
.search-island.expanded.island-wide {
    width: min(560px, calc(100vw - 20px));
}

/* 桌面滑鼠 hover 的輕微視覺回饋（比照 Dock/選單列靠近時的手感），
   在 150ms hover 展開延遲觸發前先給一點「快要展開了」的提示；
   只在有滑鼠的裝置生效，避免觸控裝置長按誤觸發樣式殘留 */
@media (hover: hover) and (pointer: fine) {
    .search-island:not(.expanded):hover {
        background: rgba(40, 40, 55, 0.92);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    }
}

/* 外層裁切框：固定寬度上限 + overflow:hidden，超出的文字交給內層 .island-label-text 用跑馬燈滑出來，
   而不是像原本的 text-overflow:ellipsis 直接截斷——天氣提示常常比「搜尋地點」長很多，
   截斷會讓 OSINT 判讀提示（起霧/強風等）整段看不到 */
.search-island-compact-label {
    display: inline-block;
    overflow: hidden;
    max-width: min(200px, 46vw);
    vertical-align: bottom;
    transition: opacity 0.18s ease;
}

.search-island-compact-label.island-label-fade {
    opacity: 0;
}

/* 內層實際文字：靜態時原地顯示；.marquee 時由 JS 依文字長度算好距離/時間，
   用 --marquee-distance 這個 CSS 變數驅動同一條動畫，滑動速度固定，不會因為文字長短而變快變慢 */
.island-label-text {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
}

/* 開頭/結尾停頓改用 animation-delay + JS 端的 onSettled setTimeout 控制（見 osint_weather.js），
   不寫死在 keyframe 百分比裡——因為總時長會依文字長度變動，若停頓用固定百分比表示，
   算出來的絕對毫秒數會跟著總時長跑掉，達不到「頭尾都停頓固定時間」的效果 */
.island-label-text.marquee {
    animation-name: islandLabelMarquee;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes islandLabelMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(var(--marquee-distance, 0px)); }
}

/* ========================================
   動態島活動指示器（island_activity.js）
   在收合態左側顯示小型狀態圈：loading 旋轉、success/error/warning 靜態色圈
   ======================================== */
.search-island.island-activity-loading .search-island-compact::before,
.search-island.island-activity-success .search-island-compact::before,
.search-island.island-activity-error .search-island-compact::before,
.search-island.island-activity-warning .search-island-compact::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    margin-left: 2px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.search-island.island-activity-loading .search-island-compact::before {
    width: 8px;
    height: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    /* v0.6.0：與全站「三點液態脈動」同語言——收合態空間小，改為單顆呼吸圓點 */
    animation: islandActivityPulse 1.1s var(--ease-standard) infinite;
}

.search-island.island-activity-success .search-island-compact::before {
    background: #34d399;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
}

.search-island.island-activity-error .search-island-compact::before {
    background: #f87171;
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.5);
}

.search-island.island-activity-warning .search-island-compact::before {
    background: #fbbf24;
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
}

/* 展開態不顯示活動指示器（搜尋輸入中不需要干擾） */
.search-island.expanded .search-island-compact::before {
    display: none !important;
}

@keyframes islandActivitySpin {
    to { transform: rotate(360deg); }
}

@keyframes islandActivityPulse {
    0%, 100% { opacity: 0.35; transform: scale(0.7); }
    45%      { opacity: 1;    transform: scale(1); }
}

.search-island-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: none;
    border: none;
    color: #f1f5f9;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
}

.search-island-expanded {
    display: none;
    flex-direction: column;
    width: 100%;
}

.search-island.expanded .search-island-compact {
    display: none;
}

.search-island.expanded .search-island-expanded {
    display: flex;
}

.search-island-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.6);
}

.search-island-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #f1f5f9;
    font-size: 15px;
    min-width: 0;
}

.search-island-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-island-clear {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-island-clear:active {
    transform: scale(0.9);
}

.search-results {
    border-top: 1px solid transparent;
    max-height: 0;
    opacity: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    transition: max-height 0.35s var(--ease-spring), opacity 0.25s ease, border-color 0.25s ease;
}

.search-results.show {
    border-top-color: rgba(255, 255, 255, 0.12);
    max-height: min(50vh, 320px);
    opacity: 1;
}

.search-results::-webkit-scrollbar {
    width: 6px;
}

.search-results::-webkit-scrollbar-track {
    background: transparent;
}

.search-results::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xs);
}

.search-results::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.search-result-item {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover,
.search-result-item.selected {
    background: rgba(255, 255, 255, 0.08);
}

.search-result-item.selected {
    border-left: 3px solid var(--color-accent);
}

.search-result-item.nominatim-result {
    border-left: 2px solid #fbbf24;
}

.search-result-item.nominatim-result:hover,
.search-result-item.nominatim-result.selected {
    background: rgba(251, 191, 36, 0.12);
}

.search-source-badge {
    font-size: 10px;
    margin-left: 4px;
    opacity: 0.8;
}

.search-result-name {
    font-weight: 600;
    color: #f1f5f9;
    font-size: 13px;
    margin-bottom: 4px;
}

.search-result-layer {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 2px;
}

.search-result-coords {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    font-family: monospace;
}

.search-highlight {
    background: rgba(251, 191, 36, 0.35);
    color: #fef3c7;
    font-weight: 600;
    padding: 0 2px;
    border-radius: var(--radius-xs);
}

.search-no-results {
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    line-height: 1.6;
}

.search-loading {
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.search-loading::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 搜尋骨架屏：取代純文字「搜尋中...」，展開瞬間先給出結果卡片的輪廓，比純轉圈圈更有內容感 */
.search-skeleton {
    padding: 10px 16px;
}

.search-skeleton-row {
    height: 13px;
    border-radius: var(--radius-xs);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.15) 37%, rgba(255, 255, 255, 0.06) 63%);
    background-size: 400% 100%;
    animation: searchSkeletonShimmer 1.4s ease infinite;
    margin-bottom: 10px;
}

.search-skeleton-row:last-child {
    width: 55%;
    margin-bottom: 0;
}

@keyframes searchSkeletonShimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ==========================================================
   動態島搜尋的百科結果卡片（OSINT 專有名詞查詢，Wikipedia 摘要）
   跟 .osint-wiki-card 用途相同，但改用島本身固定深色的 rgba 調色盤，
   避免直接沿用 var(--color-*) 在淺色模式下配島的深色玻璃背景時對比度不足
   ========================================================== */
.search-wiki-section {
    padding: 10px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.search-wiki-section-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.search-wiki-empty {
    padding: 8px 2px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12.5px;
}

.search-wiki-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 2px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12.5px;
}

.search-wiki-spinner {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #60a5fa;
    animation: spin 0.8s linear infinite;
}

.search-wiki-card {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    text-decoration: none;
    animation: osintWikiCardIn 0.28s var(--ease-spring);
}

.search-wiki-card-media {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.search-wiki-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.search-wiki-card-body {
    min-width: 0;
    flex: 1;
}

.search-wiki-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 3px;
    line-height: 1.35;
}

.search-wiki-card-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-wiki-card-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11.5px;
    font-weight: 600;
    color: #60a5fa;
}

.search-wiki-card-link::after {
    content: '›';
    font-size: 13px;
    line-height: 1;
}

/* 消歧義候選清單：查太籠統跳出多個同名條目時，直接列前 3 個讓使用者自己選，不盲猜 */
.search-wiki-disambig {
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: osintWikiCardIn 0.28s var(--ease-spring);
}

.search-wiki-disambig-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    padding: 0 2px 2px;
}

.search-wiki-disambig-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: #f1f5f9;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.search-wiki-disambig-item:hover,
.search-wiki-disambig-item:active {
    background: rgba(255, 255, 255, 0.12);
}

.search-wiki-disambig-title {
    font-size: 13px;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-wiki-disambig-arrow {
    flex-shrink: 0;
    font-size: 15px;
    color: #60a5fa;
}

/* 手機版搜尋優化 */
@media (max-width: 768px) {
    /* 需要跟 .show 同時出現才會贏過桌面版 .search-results.show 的 50vh（class 數量相同時後宣告者勝出，
       但寫成 .search-results.show 讓意圖更明確，避免未來誤刪 .show 又忘記這裡的依賴關係） */
    .search-results.show {
        max-height: 45vh;
    }

    .search-result-item {
        padding: 8px 10px;
    }

    .search-result-name {
        font-size: 12px;
    }

    .search-result-layer {
        font-size: 10px;
    }

    .search-result-coords {
        font-size: 9px;
    }
}

/* 載入指示器（v0.6.0：自適應玻璃卡片，深色模式不再爆白；三點脈動 + 環繞光束見檔尾「液態 UI 系統」） */
.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--glass-panel-bg);
    backdrop-filter: var(--glass-vibrancy);
    -webkit-backdrop-filter: var(--glass-vibrancy);
    border: 1px solid var(--glass-panel-hairline);
    color: var(--color-label);
    padding: 20px 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-panel-shadow);
    z-index: 2000;
    text-align: center;
}

.loading .thinking-orbs {
    color: var(--color-accent);
    margin: 2px auto 12px;
    font-size: 15px;
}

/* 隱藏控制面板的按鈕（統一樣式，與 control-panel 同一套毛玻璃語言） */
.toggle-panel {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--glass-panel-bg);
    backdrop-filter: var(--glass-vibrancy);
    -webkit-backdrop-filter: var(--glass-vibrancy);
    border: 1px solid var(--glass-panel-hairline);
    padding: 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    z-index: 1600;
    font-size: 18px;
    box-shadow: var(--shadow-sm);
    transition: opacity 0.15s ease, transform 0.15s var(--ease-spring), background-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-label);
}

.toggle-panel i {
    font-size: 20px;
    line-height: 1;
    color: var(--color-label);
    transition: color 0.2s ease;
}

.toggle-panel:hover {
    box-shadow: var(--shadow-md);
}

.toggle-panel:active {
    transform: scale(0.94);
}

/* 當面板展開時，桌面版按鈕立即隱藏避免重疊 */
.toggle-panel.panel-open {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-10px);
}

@media (max-width: 768px) {
    /* 手機版隱藏原本的齒輪按鈕，改用搜尋列內的 */
    .toggle-panel:not(.toggle-panel-mobile) {
        display: none;
    }
}

/* 桌面版隱藏手機版開啟面板按鈕：此按鈕僅由下方 max-width:768px 媒體查詢賦予樣式並顯示，
   桌面寬度下若不隱藏，會與 .control-panel 同時定位在 top:10/left:10，且 z-index 較高，
   導致展開控制面板時被這顆按鈕壓在上面（蓋住面板標題角落） */
@media (min-width: 769px) {
    .toggle-panel.toggle-panel-mobile {
        display: none;
    }
}

.control-panel.hidden {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

/* 手機版開啟面板按鈕（搜尋已獨立為置頂置中的 .search-island，不再與此按鈕同一個容器） */
@media (max-width: 768px) {
    .toggle-panel.toggle-panel-mobile {
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1400;
        padding: 8px;
        background: rgba(40, 40, 60, 0.7);
        backdrop-filter: blur(12px) saturate(150%);
        -webkit-backdrop-filter: blur(12px) saturate(150%);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: var(--radius-md);
        font-size: 16px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        transition: all 0.2s ease;
        min-width: 38px;
        min-height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f1f5f9;
    }

    .toggle-panel.toggle-panel-mobile i {
        font-size: 20px;
        line-height: 1;
        color: #f1f5f9;
        transition: color 0.2s ease;
    }

    .toggle-panel.toggle-panel-mobile:active {
        transform: scale(0.95);
        background: rgba(50, 50, 70, 0.8);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    }

    .toggle-panel.toggle-panel-mobile:active i {
        color: #ffffff;
    }

    /* 手機版按鈕不需要 panel-open 隱藏效果 */
    .toggle-panel.toggle-panel-mobile.panel-open {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    /* 備用方案：直接隱藏第一個 input-group（如果瀏覽器不支援 :has()） */
    @supports not selector(:has(*)) {
        .control-panel > .input-group:first-of-type {
            display: none !important;
        }
    }
}

/* 手機版響應式設計 */
@media (max-width: 768px) {
    .control-panel {
    position: fixed;
    /* 調整位置往上，並蓋住搜尋列 */
    top: 5px;
    left: 10px;
    right: auto;
    width: calc(100vw - 50px);
    max-width: 400px;
    min-width: auto;
    transform: translateX(-120%);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1500;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    padding-bottom: 24px;
    box-sizing: border-box;
    background: var(--color-surface);
    backdrop-filter: blur(var(--blur-panel)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(180%);
    /* 與搜尋列相同的圓角和邊框 */
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-panel-border);
}

/* ========================================
   Leaflet 控制項：Apple Maps 風格浮動圓角按鈕
   毛玻璃背景、圓角膠囊、精簡間距、圖示化
   ======================================== */
.leaflet-right .leaflet-control {
  margin-right: 10px;
}
.leaflet-bottom .leaflet-control {
  margin-bottom: 10px;
}
.leaflet-top .leaflet-control {
  margin-top: 8px;
}

/* 統一 bar 樣式：Apple Maps 圓角膠囊 + 毛玻璃
   預設深色（衛星底圖），切換到道路圖時由 JS 加上 .map-light-controls 改為淺色 */
.leaflet-bar {
  border: none !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  background: var(--glass-dark-bg) !important;
  backdrop-filter: var(--glass-vibrancy);
  -webkit-backdrop-filter: var(--glass-vibrancy);
  overflow: hidden;
}

.leaflet-bar a {
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  font-size: 18px !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border: none !important;
  border-bottom: none !important;
  background-color: transparent !important;
  transition: background-color 0.12s ease;
}

.leaflet-bar a:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.leaflet-bar a:active {
  background-color: rgba(255, 255, 255, 0.18) !important;
}

/* 按鈕之間的細線分隔 */
.leaflet-bar a + a {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 淺色模式（道路底圖）：由 JS switchBaseLayer 加上 .map-light-controls */
.map-light-controls .leaflet-bar {
  background-color: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
}

.map-light-controls .leaflet-bar a {
  color: #1c1c1e !important;
}

.map-light-controls .leaflet-bar a:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
}

.map-light-controls .leaflet-bar a:active {
  background-color: rgba(0, 0, 0, 0.12) !important;
}

.map-light-controls .leaflet-bar a + a {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}

/* Zoom 控制按鈕文字樣式 */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  font-weight: 300 !important;
  font-size: 20px !important;
}

/* Draw 工具列：與 zoom 同樣風格但稍小，不能覆蓋 background-position/size
   （Leaflet.draw 用 sprite sheet 靠 position 切割不同圖示） */
.leaflet-draw-toolbar a {
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  /* 深色底圖下反色顯示（sprite 原本是黑色線條） */
  filter: invert(1) brightness(1.5);
}

.map-light-controls .leaflet-draw-toolbar a {
  filter: none;
}

/* 停用態按鈕 */
.leaflet-bar a.leaflet-disabled {
  opacity: 0.35 !important;
  cursor: default;
}

/* Draw section 之間的間距 */
.leaflet-draw-section + .leaflet-draw-section {
  margin-top: 6px;
}

/* 觸控裝置（含 Leaflet touch 模式） */
.leaflet-touch .leaflet-bar a {
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
}

/* 行動裝置：更精簡 + 位置調整 */
@media (max-width: 768px) {
  .leaflet-top.leaflet-right {
    top: 72px;
  }

  .leaflet-bar {
    border-radius: 10px !important;
  }

  .leaflet-bar a {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    font-size: 16px !important;
  }

  .leaflet-touch .leaflet-bar a {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
  }

  .leaflet-draw-toolbar a {
    width: 30px !important;
    height: 30px !important;
  }

  .leaflet-control-zoom-in,
  .leaflet-control-zoom-out {
    font-size: 17px !important;
  }

  .leaflet-right .leaflet-control {
    margin-right: 8px;
  }

  .leaflet-top .leaflet-control {
    margin-top: 6px;
  }
}

    .control-panel.show-mobile {
    transform: translateX(0);
    opacity: 1;
    }
    
    /* 手機版控制面板標題優化 */
    .control-panel .control-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-label);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-separator);
    display: flex;
    align-items: center;
    justify-content: space-between;
    }

    .control-panel .control-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 20px;
    background: var(--gradient-accent);
    border-radius: var(--radius-xs);
    margin-right: 8px;
    }

    /* 手機版輸入組優化（.settings-group 內的 .input-group 已有自己的排版，這裡只補色彩 token 化） */
    .control-panel .input-group {
    margin-bottom: 16px;
    background: var(--color-surface-solid);
    padding: 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-separator);
    box-shadow: var(--shadow-sm);
    }

    .control-panel .settings-group > .input-group {
    background: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: 0;
    }

    .control-panel .input-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-label-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    }

    .control-panel .input-field {
    background: var(--color-fill-tertiary);
    border: 1px solid var(--color-separator);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    color: var(--color-label);
    transition: all 0.2s ease;
    }

    .control-panel .input-field:focus {
    background: var(--color-surface-solid);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-fill);
    }
    
    /* 手機版按鈕組區域 */
    .control-panel > .btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    margin-right: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    }
    
    .control-panel > .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    }
    
    .control-panel > .btn:active {
    transform: scale(0.97);
    }
    
    .control-panel > .btn:active::before {
    transform: translateX(0);
    }
    
    .control-panel .btn-primary {
    background: var(--gradient-accent);
    border: none;
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
    }
    
    .control-panel .btn-secondary {
    background: white;
    border: 1px solid #e2e8f0;
    color: #475569;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    }
    
    .control-panel .btn-secondary:active {
    background: #f8fafc;
    border-color: #cbd5e1;
    }
    
    /* 手機版按鈕區域分隔 */
    .control-panel > .btn:first-of-type {
    margin-top: 8px;
    }
    
    .control-panel > button[onclick*="searchLocation"] {
    border-bottom: 2px solid #1d4ed8;
    }
    
    /* 手機版提示優化 */
    .mobile-hint {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #93c5fd;
    border-left: 3px solid #3b82f6;
    color: #1e40af;
    font-size: 11px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    text-align: center;
    font-weight: 500;
    }

    /* 桌面版齒輪按鈕在手機版已移到搜尋列內，這裡不需要額外樣式 */
    
    /* 手機版popup優化 */
    .leaflet-popup-content-wrapper {
    max-width: calc(100vw - 40px) !important;
    min-width: 280px;
    max-height: calc(100vh - 120px) !important;
    }
    
    .leaflet-popup-content {
    margin: 12px 16px !important;
    font-size: 13px;
    line-height: 1.4;
    max-height: calc(100vh - 180px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    }
    
    /* 手機版控制面板滾動條樣式 */
    .control-panel::-webkit-scrollbar {
    width: 4px;
    }
    
    .control-panel::-webkit-scrollbar-track {
    background: transparent;
    }
    
    .control-panel::-webkit-scrollbar-thumb {
    background: var(--color-scroll-thumb);
    border-radius: var(--radius-xs);
    }
    
    .control-panel::-webkit-scrollbar-thumb:hover {
    background: var(--color-scroll-thumb-hover);
    }
    
    /* 手機版覆蓋桌面版滾動條樣式 */
    .leaflet-popup-content::-webkit-scrollbar {
    width: 4px;
    }
    
    .leaflet-popup-content::-webkit-scrollbar-track {
    background: var(--color-fill-tertiary);
    border-radius: var(--radius-xs);
    }

    .leaflet-popup-content::-webkit-scrollbar-thumb {
    background: var(--color-scroll-thumb);
    border-radius: var(--radius-xs);
    }

    .leaflet-popup-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-scroll-thumb-hover);
    }

    .leaflet-popup-pane {
    z-index: 10050;
    }

    /* 確保手機版關閉按鈕可見且可點擊 */
    .leaflet-popup-close-button {
    background: var(--color-surface-solid) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 30px !important;
    font-size: 18px !important;
    color: var(--color-label) !important;
    border: 1px solid var(--color-separator) !important;
    box-shadow: var(--shadow-sm) !important;
    z-index: 1000 !important;
    margin: -16px -16px 0 0 !important;
    }

    .leaflet-popup-close-button:hover {
    color: var(--color-danger-hover) !important;
    transform: scale(1.1) !important;
    }
    
    .popup-title {
    font-size: 14px;
    }
    
    .popup-icon {
    width: 20px;
    height: 20px;
    }
    
    .popup-field {
    grid-template-columns: fit-content(64px) minmax(0, 1fr);
    gap: 6px 8px;
    margin-bottom: 8px;
    }

    .popup-field-label {
    font-size: 11px;
    }
    
    .popup-field-value {
    font-size: 13px;
    line-height: 1.6;
    }

    .popup-field-badge {
    padding: 4px 8px;
    font-size: 11px;
    }

    .popup-field-multiline {
    padding: 10px 12px;
    }
    
    .popup-distance {
    padding: 6px 10px;
    margin: 6px 0;
    font-size: 12px;
    }
    
    /* 手機版裝備資訊優化 */
    .equipment-info {
    margin: 10px 0 !important;
    padding: 8px !important;
    }
    
    .equipment-info h4 {
    font-size: 14px !important;
    margin: 0 0 8px 0 !important;
    }
    
    .equipment-item {
    margin-bottom: 8px !important;
    padding: 8px !important;
    }
    
    .equipment-item h5 {
    font-size: 13px !important;
    margin: 0 0 4px 0 !important;
    }
    
    .equipment-item p {
    font-size: 11px !important;
    margin: 4px 0 !important;
    }
    
    .equipment-images {
    text-align: center;
    }
    
    .equipment-images img {
    max-width: 150px !important;
    margin: 2px;
    }
    }
    
    .link-btn {
    padding: 3px 6px;
    font-size: 11px;
    margin: 3px 4px 3px 0;
    }
    
    .popup-links-title {
    font-size: 11px;
    margin-bottom: 6px;
    }
    
    /* 手機版下拉選單按鈕優化 */
    .control-panel .dropdown-toggle {
    background: var(--color-surface-solid);
    border: 1px solid var(--color-separator);
    border-radius: var(--radius-sm);
    padding: 12px;
    font-size: 14px;
    transition: all 0.2s ease;
    }

    .control-panel .dropdown-toggle:active {
    background: var(--color-fill-tertiary);
    border-color: var(--color-scroll-thumb);
    }

    .control-panel .dropdown-option label {
    padding: 12px 10px;
    border-radius: var(--radius-sm);
    }

    .control-panel .dropdown-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    }

    .control-panel .dropdown-option span {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-label-secondary);
    }

    .control-panel .btn-dropdown-action {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    }
    
    .info-panel {
    padding: 10px 14px;
    font-size: 12px;
    margin-top: 12px;
    background: var(--color-fill-tertiary);
    border: 1px solid var(--color-separator);
    border-radius: var(--radius-sm);
    }
    
    /* 極小螢幕優化 */
    @media (max-width: 480px) {
    .leaflet-popup-content-wrapper {
    max-width: calc(100vw - 20px) !important;
    min-width: 260px;
    }
    
    .control-panel {
    left: 5px;
    right: auto;
    top: 5px;
    width: calc(100vw - 50px);
    max-width: 400px;
    }
    
    .toggle-panel {
    left: 5px;
    padding: 10px;
    font-size: 18px;
    }
}

/* ========================================
   統一下拉選單樣式 (適用於分層篩選和公共設施)
   ======================================== */

.unified-dropdown {
  position: relative;
  width: 100%;
}

.dropdown-toggle {
  width: 100%;
  padding: 10px 12px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--color-label);
  transition: border-color 0.2s var(--ease-standard), background 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard);
}

.dropdown-toggle:hover {
  border-color: var(--color-accent);
  background: var(--color-fill-tertiary);
}

.dropdown-toggle:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.dropdown-toggle:active {
  background: var(--color-fill-secondary);
}

.dropdown-arrow {
  font-size: 12px;
  transition: transform 0.2s ease;
  color: var(--color-label-secondary);
}

.dropdown-toggle.active .dropdown-arrow {
  transform: rotate(180deg);
}

/* 桌面版：下拉選單使用 fixed 定位，可超出面板 */
.dropdown-menu {
  position: fixed;
  background: var(--color-surface);
  backdrop-filter: blur(var(--blur-menu)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-menu)) saturate(180%);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  max-height: 360px;
  min-width: 280px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: dropdownSlideIn 0.18s var(--ease-decelerate);
}

/* 向上顯示的選單 */
.dropdown-menu.show-above {
  animation: dropdownSlideUp 0.18s var(--ease-decelerate);
}

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

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

.dropdown-content {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
  flex: 1;
}

.dropdown-content::-webkit-scrollbar {
  width: 6px;
}

.dropdown-content::-webkit-scrollbar-track {
  background: var(--color-fill-tertiary);
}

.dropdown-content::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  border-radius: var(--radius-xs);
}

.dropdown-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-scroll-thumb-hover);
}

.dropdown-option {
  padding: 0 12px;
}

.dropdown-option label {
  display: flex;
  align-items: center;
  padding: 10px 8px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  user-select: none;
}

.dropdown-option label:hover {
  background: var(--color-fill-secondary);
  transform: translateX(2px);
}

.dropdown-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

.dropdown-option span {
  flex: 1;
  font-size: 14px;
  color: var(--color-label);
}

.dropdown-option.is-loading label,
.dropdown-option.is-success label,
.dropdown-option.is-error label {
  position: relative;
  overflow: hidden;
}

.dropdown-option.is-loading label {
  background: var(--color-accent-fill);
  border: 1px solid var(--color-accent);
}

.dropdown-option.is-loading label::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--color-fill-primary), transparent);
  transform: translateX(-100%);
  animation: osm-option-sweep 1.2s ease-in-out infinite;
}

.dropdown-option.is-success label {
  background: rgba(22, 163, 74, 0.14);
  border: 1px solid var(--color-success);
}

.dropdown-option.is-error label {
  background: var(--color-danger-fill);
  border: 1px solid var(--color-danger);
}

.dropdown-option[data-detail] label {
  padding-bottom: 24px;
}

.dropdown-option[data-detail] label::before {
  content: attr(data-detail);
  position: absolute;
  left: 36px;
  bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.dropdown-option.is-loading label::before {
  color: var(--color-accent-hover);
}

.dropdown-option.is-success label::before {
  color: var(--color-success);
}

.dropdown-option.is-error label::before {
  color: var(--color-danger-hover);
}

@keyframes osm-option-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.dropdown-actions {
  border-top: 1px solid var(--color-separator);
  padding: 8px 12px;
  background: var(--color-fill-tertiary);
}

.btn-dropdown-action {
  width: 100%;
  padding: 8px 12px;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--color-label-secondary);
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-dropdown-action:hover {
  background: var(--color-fill-tertiary);
  border-color: var(--color-scroll-thumb);
  color: var(--color-label);
}

.btn-dropdown-action:active {
  background: var(--color-fill-secondary);
}

/* 手機版：下拉選單展開為內聯區塊 */
@media (max-width: 768px) {
  .dropdown-menu {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    max-height: none;
    box-shadow: none;
    border: none;
    border-top: 1px solid #e5e7eb;
    border-radius: 0;
    margin-top: 8px;
    animation: none;
    min-width: auto;
  }

  .dropdown-content {
    overflow-y: visible;
    overflow-x: visible;
    max-height: none;
  }
}

/* OSM 狀態顯示（topNotice 樣式） */
.osm-notice {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 50%;
  transform: translate(-50%, -20px);
  background: var(--color-surface);
  color: var(--color-label);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.35;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-panel-border);
  box-shadow: var(--shadow-lg);
  max-width: min(420px, 90vw);
  z-index: 3000;
  opacity: 0;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease;
  backdrop-filter: blur(var(--blur-menu)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-menu)) saturate(180%);
  pointer-events: none;
}

.osm-notice::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 16px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-separator);
  border-top-color: var(--color-label);
  animation: osm-notice-spin 0.9s linear infinite;
}

.osm-notice:not(.osm-notice-loading)::before {
  display: none;
}

.osm-notice.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.osm-notice.hide {
  opacity: 0;
  transform: translate(-50%, -10px);
}

@media (max-width: 768px) {
  .osm-notice {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    max-width: min(360px, 88vw);
  }
}

@keyframes osm-notice-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* OSM Marker 自定義樣式 */
.osm-custom-icon {
  background: transparent !important;
  border: none !important;
}

.osm-marker {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.osm-marker-icon {
  transition: transform 0.2s ease;
}

.osm-marker:hover .osm-marker-icon {
  transform: scale(1.1);
}

/* OSM Popup 樣式增強 */
.osm-feature-popup .leaflet-popup-content-wrapper {
  border-left: 4px solid var(--color-accent);
}

.osm-popup h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 手機版優化 */
@media (max-width: 768px) {
  .dropdown-toggle {
    padding: 8px 10px;
    font-size: 13px;
  }

  .dropdown-option label {
    padding: 8px 6px;
  }

  .dropdown-option span {
    font-size: 13px;
  }
}

/* 更新日誌相關樣式 */
.info-panel-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.info-message {
  flex: 1;
}

.changelog-link {
  cursor: pointer;
  font-size: 13px;
  color: var(--color-danger-hover);
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 0.2s, color 0.2s;
  user-select: none;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.changelog-link:hover {
  color: var(--color-danger);
  opacity: 0.8;
}

.changelog-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-overlay);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.changelog-content {
  background: var(--color-surface);
  backdrop-filter: blur(var(--blur-panel)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(180%);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  animation: slideIn 0.35s var(--ease-spring);
}

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

.changelog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-separator);
}

.changelog-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-label);
}

.changelog-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--color-label-secondary);
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s, color 0.2s;
}

.changelog-close:hover {
  background-color: var(--color-fill-secondary);
  color: var(--color-label);
}

.changelog-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.changelog-item {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-separator);
  line-height: 1.6;
}

.changelog-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.changelog-date {
  font-weight: 600;
  color: var(--color-danger-hover);
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

.changelog-desc {
  color: var(--color-label-secondary);
  font-size: 14px;
  display: block;
}

/* 手機版樣式調整 */
@media (max-width: 768px) {
  .changelog-content {
    width: 95%;
    max-height: 70vh;
  }

  .changelog-header {
    padding: 16px 20px;
  }

  .changelog-header h3 {
    font-size: 18px;
  }

  .changelog-body {
    padding: 16px 20px;
  }

  .changelog-date,
  .changelog-desc {
    font-size: 13px;
  }

  .changelog-link {
    font-size: 12px;
  }

  .info-panel-content {
    gap: 8px;
  }
}

/* ========================================
   PWA 相關樣式
   ======================================== */

/* 安裝、更新與離線面板樣式已移至 pwa.css。 */

/* 獨立模式（已安裝為 APP）時的調整 */
@media (display-mode: standalone) {
  /* 頂部提醒位置調整（考慮狀態欄背景，需避開搜尋動態島） */
  .top-notice {
    top: calc(env(safe-area-inset-top, 0px) + 62px);
  }

  /* 搜尋動態島位置調整 */
  .search-island {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
  }

  /* Leaflet 控制項調整 */
  .leaflet-top.leaflet-right {
    top: calc(env(safe-area-inset-top, 0px) + 72px);
  }

  /* 控制面板調整 */
  .control-panel {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
  }


}

/* iOS PWA 全螢幕模式特殊處理 */
@media (display-mode: standalone) and (max-width: 768px) {
  /* 確保手機版 APP 體驗最佳 */
  .search-island {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
  }

  .control-panel {
    top: calc(env(safe-area-inset-top, 0px) + 5px);
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
  }
}

/* ========================================
   筆記功能樣式
   ======================================== */

/* 筆記地圖標記 */
.note-marker-icon {
  background: transparent !important;
  border: none !important;
}

.note-marker {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.note-marker svg {
  transform: rotate(45deg);
  width: 18px;
  height: 18px;
  color: white;
}

.note-marker:hover {
  transform: rotate(-45deg) scale(1.1);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.5);
}

/* 筆記控制按鈕 */
.notes-control {
  margin-bottom: 10px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.notes-control-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notes-control-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px !important;
  text-decoration: none !important;
  background: var(--glass-dark-bg) !important;
  color: #fbbf24 !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--glass-dark-hairline) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: var(--glass-vibrancy);
  -webkit-backdrop-filter: var(--glass-vibrancy);
  transition: all 0.2s ease !important;
}

.notes-control-btn.is-off {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* 淺色底圖時切回淺色風格 */
.map-light-controls .notes-control-btn {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #f59e0b !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.map-light-controls .notes-control-btn.is-off {
  color: #64748b !important;
}

/* 沒有任何筆記時，隱藏「顯示/隱藏筆記圖層」按鈕（無筆記可切換） */
.notes-control-btn.is-hidden {
  display: none !important;
}

.notes-control-btn svg {
  width: 20px;
  height: 20px;
}

/* 筆記按鈕 hover：預設深色底圖 */
.notes-control-btn:hover {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fcd34d !important;
  transform: scale(1.05);
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3) !important;
}

.map-light-controls .notes-control-btn:hover {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #d97706 !important;
}

/* ========================================
   OSINT 工具浮動工具列（分享目前畫面／衛星過境預測／周邊航空動態）
   視覺語言比照 .notes-control-*，但用中性色以區別於筆記的琥珀色
   ======================================== */
.osint-toolbar {
  margin-bottom: 10px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.osint-toolbar-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.osint-toolbar-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px !important;
  text-decoration: none !important;
  background: var(--glass-dark-bg) !important;
  backdrop-filter: var(--glass-vibrancy);
  -webkit-backdrop-filter: var(--glass-vibrancy);
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s var(--ease-spring), box-shadow 0.2s ease !important;
}

/* 淺色底圖時切回淺色風格 */
.map-light-controls .osint-toolbar-btn {
  background: var(--color-surface) !important;
  color: var(--color-label-secondary) !important;
  border: 1px solid var(--color-panel-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.osint-toolbar-btn svg {
  width: 20px;
  height: 20px;
}

.osint-toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 1) !important;
  transform: scale(1.05);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3) !important;
}

.map-light-controls .osint-toolbar-btn:hover {
  background: var(--color-fill-primary) !important;
  color: var(--color-accent) !important;
  box-shadow: var(--shadow-md) !important;
}

.osint-toolbar-btn:active {
  transform: scale(0.94);
}

/* 筆記對話框覆蓋層 */
.note-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-overlay);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
  box-sizing: border-box;
  animation: fadeIn 0.2s ease;
}

/* 筆記對話框 */
.note-dialog {
  background: var(--color-surface);
  backdrop-filter: blur(var(--blur-panel)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(180%);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s var(--ease-spring);
}

.note-dialog-large {
  max-width: 560px;
}

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

.note-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-separator);
}

.note-dialog-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-label);
}

.note-dialog-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--color-fill-secondary);
  border-radius: 50%;
  font-size: 20px;
  color: var(--color-label-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.note-dialog-close:hover {
  background: var(--color-fill-primary);
  color: var(--color-label);
}

.note-dialog-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.note-dialog-minimize {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--color-fill-secondary);
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  color: var(--color-label-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease, transform 0.25s var(--ease-spring);
}

.note-dialog-minimize:hover {
  background: var(--color-fill-primary);
  color: var(--color-label);
}

.note-dialog.minimized .note-dialog-minimize {
  transform: rotate(180deg);
}

.note-dialog-toolbar {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-separator);
  flex-wrap: wrap;
}

.note-dialog-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.note-dialog-feature {
  background: var(--color-fill-tertiary);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--color-label-secondary);
  border: 1px solid var(--color-separator);
}

.note-dialog-feature-shape {
  background: var(--color-warning-fill);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}

.note-input-group {
  margin-bottom: 16px;
}

.note-input-group label,
.note-input-group-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-label-secondary);
  margin-bottom: 6px;
}

.note-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-md);
  font-size: 15px;
  color: var(--color-label);
  background: var(--color-surface-solid);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.note-input:focus {
  outline: none;
  border-color: var(--color-accent-hover);
  box-shadow: 0 0 0 3px var(--color-accent-fill);
}

.note-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-md);
  font-size: 15px;
  color: var(--color-label);
  background: var(--color-surface-solid);
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.note-textarea:focus {
  outline: none;
  border-color: var(--color-accent-hover);
  box-shadow: 0 0 0 3px var(--color-accent-fill);
}

.note-dialog-info {
  font-size: 12px;
  color: var(--color-label-secondary);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.note-dialog-footer {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--color-separator);
  border-radius: 0 0 16px 16px;
}

/* 筆記按鈕 */
.note-btn {
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.note-btn-sm {
  padding: 6px 10px;
  font-size: 13px;
}

.note-btn-primary {
  background: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
  flex: 1;
  box-shadow: none;
}

.note-btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.note-btn-primary-shape {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.note-btn-primary-shape:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.note-btn-secondary {
  background: var(--color-fill-secondary);
  color: var(--color-label);
  border: 1px solid transparent;
  flex: 1;
}

.note-btn-secondary:hover {
  background: var(--color-fill-primary);
}

.note-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.note-btn-danger {
  background: var(--color-danger-fill);
  color: var(--color-danger-hover);
  border: 1px solid transparent;
}

.note-btn-danger:hover {
  background: var(--color-danger);
  color: white;
}

/* 雲端同步按鈕 */
.note-btn-cloud {
  background: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
  box-shadow: none;
}

.note-btn-cloud:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* 筆記列表 */
.notes-list-container {
  max-height: 400px;
  overflow-y: auto;
  padding: 0 20px 20px;
}

.notes-list-container::-webkit-scrollbar {
  width: 6px;
}

.notes-list-container::-webkit-scrollbar-track {
  background: var(--color-fill-tertiary);
  border-radius: var(--radius-xs);
}

.notes-list-container::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  border-radius: var(--radius-xs);
}

.notes-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: var(--color-surface-solid);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  transition: all 0.2s ease;
  border: 1px solid var(--color-separator);
}

.notes-list-item:hover {
  background: var(--color-fill-tertiary);
  border-color: var(--color-scroll-thumb);
}

.notes-list-item:last-child {
  margin-bottom: 0;
}

.notes-list-item-type {
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-fill-tertiary);
  color: var(--color-label-secondary);
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-full);
}

.notes-list-item-content {
  flex: 1;
  min-width: 0;
}

.notes-list-item-title {
  font-weight: 600;
  color: var(--color-label);
  font-size: 14px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notes-list-item-preview {
  font-size: 13px;
  color: var(--color-label-secondary);
  margin-bottom: 6px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notes-list-item-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--color-label-secondary);
  flex-wrap: wrap;
}

.notes-list-item-visibility {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}

.notes-list-item-visibility.is-visible {
  background: var(--color-accent-fill);
  color: var(--color-accent);
}

.notes-list-item-visibility.is-hidden {
  background: var(--color-fill-tertiary);
  color: var(--color-label-secondary);
}

.notes-list-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}

.note-dialog-info-block {
  margin-bottom: 14px;
}

.note-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.note-choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-md);
  background: var(--color-fill-tertiary);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.note-choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.note-choice-card:hover {
  border-color: var(--color-scroll-thumb-hover);
  background: var(--color-fill-secondary);
}

.note-choice-card.is-selected {
  border-color: var(--color-accent-hover);
  background: var(--color-accent-fill);
  box-shadow: 0 0 0 3px var(--color-accent-fill);
  transform: translateY(-1px);
}

.note-choice-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-label);
}

.note-choice-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-label-secondary);
}

.note-geometry-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.note-geometry-summary {
  font-size: 12px;
  color: var(--color-label-secondary);
}

.note-geometry-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.note-geometry-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-md);
  background: var(--color-fill-tertiary);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.note-geometry-item.is-selected {
  border-color: #0891b2;
  background: rgba(8, 145, 178, 0.12);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.14);
}

.note-geometry-checkbox {
  margin-top: 2px;
  accent-color: #0891b2;
}

.note-geometry-item-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.note-geometry-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-label);
}

.note-geometry-item-type {
  font-size: 12px;
  color: var(--color-label-secondary);
}

.note-choice-card.is-selected .note-choice-title {
  color: var(--color-accent-hover);
}

.note-choice-card.is-selected .note-choice-desc {
  color: var(--color-accent-hover);
}

/* 筆記列表圖標按鈕 */
.note-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--color-surface-solid);
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-sm);
  color: var(--color-label-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.note-icon-btn:hover {
  background: var(--color-fill-tertiary);
  color: var(--color-label);
  border-color: var(--color-scroll-thumb-hover);
}

.note-icon-btn:active {
  transform: scale(0.95);
}

.note-icon-btn-danger {
  color: var(--color-danger);
}

.note-icon-btn-danger:hover {
  background: var(--color-danger-fill);
  border-color: var(--color-danger-fill);
  color: var(--color-danger-hover);
}

.notes-list-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-label-secondary);
  font-size: 15px;
  line-height: 1.6;
}

/* ========================================
   OSINT 對話框／變更日誌的 Apple 風格細滾動軸
   （原與已移除的 ADS-B／衛星結果清單共用一組規則，這裡只留仍在使用的兩個目標）
   ======================================== */
.note-dialog-body::-webkit-scrollbar,
.changelog-body::-webkit-scrollbar {
  width: 6px;
}

.note-dialog-body::-webkit-scrollbar-track,
.changelog-body::-webkit-scrollbar-track {
  background: transparent;
}

.note-dialog-body::-webkit-scrollbar-thumb,
.changelog-body::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  border-radius: var(--radius-full);
  transition: background-color 0.2s ease;
}

.note-dialog-body::-webkit-scrollbar-thumb:hover,
.changelog-body::-webkit-scrollbar-thumb:hover {
  background: var(--color-scroll-thumb-hover);
}

.note-dialog-body,
.changelog-body {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scroll-thumb) transparent;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================
   OSINT 維基百科查詢卡片（設施 popup 的相關條目摘要，見 markers_render.js）
   Apple 風格：細分節標籤 + 卡片式圖文並排 + 系統風格活動指示器
   ========================================================== */
.osint-wiki-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-separator);
}

.osint-wiki-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-label-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.osint-wiki-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  color: var(--color-label-secondary);
  font-size: 13px;
}

.osint-spinner {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--color-fill-secondary);
  border-top-color: var(--color-accent);
  animation: spin 0.8s linear infinite;
}

.osint-wiki-empty {
  padding: 8px 2px;
  color: var(--color-label-secondary);
  font-size: 12.5px;
  line-height: 1.5;
}

.osint-wiki-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  background: var(--color-fill-tertiary);
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-md);
  animation: osintWikiCardIn 0.28s var(--ease-spring);
}

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

.osint-wiki-card-media {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-fill-secondary);
}

.osint-wiki-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.osint-wiki-card-body {
  min-width: 0;
  flex: 1;
}

.osint-wiki-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-label);
  margin-bottom: 3px;
  line-height: 1.35;
}

.osint-wiki-card-desc {
  font-size: 12px;
  color: var(--color-label-secondary);
  line-height: 1.5;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.osint-wiki-card-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

.osint-wiki-card-link:hover {
  text-decoration: underline;
}

.osint-wiki-card-link::after {
  content: '›';
  font-size: 14px;
  line-height: 1;
}

/* Popup 內筆記按鈕 - 跟一般 link-btn 樣式一致 */
.popup-note-btn {
  /* 繼承 link-btn 樣式，不需要特別突出 */
}

/* 筆記 Popup 樣式 */
.note-popup .leaflet-popup-content-wrapper {
  border-left: 4px solid var(--color-accent-hover);
}

.note-popup-content {
  min-width: 250px;
}

.note-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-separator);
}

.note-type-badge {
  font-size: 12px;
  color: var(--color-accent);
  background: var(--color-accent-fill);
  border: 1px solid transparent;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  font-weight: 600;
}

.note-popup-actions {
  display: flex;
  gap: 4px;
}

.note-popup-actions .note-btn {
  padding: 4px 8px;
  font-size: 12px;
  background: var(--color-fill-secondary);
  border: 1px solid transparent;
  color: var(--color-label);
}

.note-popup-actions .note-btn:hover {
  background: var(--color-fill-primary);
}

.note-popup-actions .note-btn-delete:hover {
  background: var(--color-danger-fill);
  color: var(--color-danger-hover);
}

.note-popup-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-label);
}

.note-feature-name {
  font-size: 12px;
  color: var(--color-label-secondary);
  margin-bottom: 10px;
  padding: 6px 10px;
  background: var(--color-fill-tertiary);
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-sm);
}

.note-popup-body {
  font-size: 14px;
  color: var(--color-label);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 12px;
}

.note-popup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: var(--color-label-secondary);
  padding-top: 10px;
  border-top: 1px solid var(--color-separator);
}

/* 筆記 Toast */
.note-toast {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(30, 41, 59, 0.95);
  color: white;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  z-index: 10002;
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
}

.note-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.note-toast-error {
  background: rgba(220, 38, 38, 0.95);
}

.note-toast-warning {
  background: rgba(245, 158, 11, 0.95);
  color: #1e293b;
}

/* 手機版筆記樣式調整 */
@media (max-width: 768px) {
  .note-dialog {
    max-width: none;
    margin: 0;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    animation: slideUpMobile 0.3s ease;
  }

  @keyframes slideUpMobile {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .note-dialog-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .note-dialog-large {
    max-width: none;
  }

  .notes-list-container {
    max-height: calc(85vh - 180px);
  }

  .note-btn {
    padding: 12px 16px;
  }

  .notes-list-item {
    padding: 12px;
  }

  .notes-list-item-actions {
    flex-direction: row;
    gap: 8px;
  }
  
  .note-icon-btn {
    width: 32px;
    height: 32px;
  }

  .note-choice-grid {
    grid-template-columns: 1fr;
  }

  .note-geometry-list {
    grid-template-columns: 1fr;
  }

  .note-toast {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 100px);
  }
}

/* ========================================
   Shape 模式筆記樣式
   ======================================== */

/* Shape 儲存按鈕 - 繼承 link-btn 樣式 */
.shape-save-btn {
  margin-top: 0 !important;
}

.shape-export-btn {
  margin-top: 0 !important;
}

.shape-copy-url-btn {
  margin-top: 0 !important;
}

/* Drawing Popup 容器 */
.drawing-popup {
  min-width: 180px;
  font-size: 14px;
  line-height: 1.5;
}

.drawing-popup strong {
  display: block;
  font-size: 15px;
  color: var(--color-label);
  margin-bottom: 6px;
}

/* ========================================
   PWA 優化 - 對話框與互動
   ======================================== */

/* 確保對話框在 PWA 中正確顯示 */
@media (display-mode: standalone) {
  .note-dialog-overlay {
    /* 考慮 iOS 安全區域 */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .note-dialog {
    /* PWA 環境下的對話框調整 */
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 40px);
  }

  .note-toast {
    bottom: calc(env(safe-area-inset-bottom) + 80px);
  }

  /* 手機版 PWA */
  @media (max-width: 768px) {
    .note-dialog {
      padding-bottom: env(safe-area-inset-bottom);
    }

    .note-dialog-footer {
      padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
  }
}

/* 改善觸控體驗 */
.note-btn,
.notes-control-btn,
.osint-toolbar-btn {
  /* 增加點擊區域 */
  min-height: 44px;
  /* 移除觸控延遲 */
  touch-action: manipulation;
  /* 防止文字選取 */
  -webkit-user-select: none;
  user-select: none;
  /* 移除點擊高亮 */
  -webkit-tap-highlight-color: transparent;
}


/* 對話框輸入框觸控優化 */
.note-input,
.note-textarea {
  /* 增加觸控友善性 */
  min-height: 44px;
  font-size: 16px; /* 防止 iOS 自動縮放 */
  -webkit-appearance: none;
  appearance: none;
}

/* 列表項目觸控優化 */
.notes-list-item {
  min-height: 60px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 按鈕點擊反饋 */
.note-btn:active {
  transform: scale(0.97) !important;
  opacity: 0.9;
}

/* 筆記標記圖標 - 確保在 PWA 中可見 */
.note-marker {
  /* 添加背景以提高可見度 */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* 空狀態優化 */
.notes-list-empty {
  padding: 60px 30px;
  text-align: center;
  color: #9ca3af;
}

.notes-list-empty svg {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

/* 動畫效果 - 減少 PWA 中的動畫卡頓 */
@media (prefers-reduced-motion: reduce) {
  .note-dialog,
  .note-toast,
  .note-marker,
  .notes-control-btn {
    animation: none !important;
    transition: none !important;
  }
}

/* ========================================
   圖層切換按鈕樣式
   ======================================== */

/* iOS/macOS 風格 segmented control
   v0.6.0：選取藥丸改為單一 ::before 元素，在兩個位置間以帶 overshoot 的
   --ease-liquid 曲線滑動＝液滴流過再回彈的手感。
   :has() 依哪顆按鈕帶 .active 決定藥丸落點，切換邏輯（map_init.js）不需改動。 */
.layer-toggle-group {
  position: relative;
  display: flex;
  gap: 2px;
  margin-top: 4px;
  padding: 3px;
  background: var(--color-fill-tertiary);
  border-radius: var(--radius-sm);
  isolation: isolate;
}

.layer-toggle-group::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--radius-xs);
  background: var(--color-surface-solid);
  box-shadow: var(--shadow-sm);
  transform: translateX(0) scaleX(1);
  transition: transform var(--motion-base) var(--ease-liquid);
}

/* 藥丸落在「空域」那半邊；--ease-liquid 的 overshoot 讓它抵達時輕微回彈＝液滴手感 */
.layer-toggle-group:has(.layer-toggle-btn[data-layer="air"].active)::before {
  transform: translateX(calc(100% + 2px));
}

.layer-toggle-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 6px 10px;
  background: transparent;
  color: var(--color-label-secondary);
  border: none;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--motion-base) var(--ease-standard);
  box-shadow: none;
}

.layer-toggle-btn:active {
  transform: scale(0.97);
}

.layer-toggle-btn.active {
  color: var(--color-label);
}

@media (prefers-reduced-motion: reduce) {
  .layer-toggle-group::before { transition: none; }
}

/* 手機版優化 */
@media (max-width: 768px) {
  .layer-toggle-btn {
    padding: 8px 6px;
    font-size: 11px;
  }
}

/* 移除 Leaflet 形狀點擊時的瀏覽器預設 focus 邊框 */
.leaflet-interactive:focus {
  outline: none;
}

/* 形狀 hover tooltip */
.shape-hover-tooltip {
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(239, 68, 68, 0.6);
  border-radius: var(--radius-sm);
  color: #f1f5f9;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 12px;
  padding: 6px 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  pointer-events: none;
}
.shape-hover-tooltip::before {
  border-top-color: rgba(239, 68, 68, 0.6) !important;
}

/* 深色模式 */
/* .layer-toggle-btn 深色模式已由 :root 的 --color-fill-tertiary / --color-surface-solid /
   --color-label(-secondary) token 自動處理，見檔案開頭設計 token 區塊，此處不需再覆蓋。 */

/* ========================================
   深色模式補完：控制面板／搜尋／下拉選單／變更日誌
   （桌面與手機共用同一批 class，故此處集中覆蓋一次即可）
   ======================================== */
@media (prefers-color-scheme: dark) {
  .control-title {
    color: var(--color-label);
  }

  .input-label {
    color: var(--color-label-secondary);
  }

  .input-field,
  .note-input,
  input.input-field,
  select.input-field {
    background: var(--color-surface-solid);
    border-color: #454955;
    color: var(--color-label);
  }

  select.input-field {
    background: var(--color-surface-solid);
  }

  .input-field::placeholder {
    color: #6b7280;
  }

  .search-result-item:hover,
  .search-result-item.selected {
    background: var(--color-fill-tertiary);
  }

  .search-result-item.selected {
    background: rgba(59, 130, 246, 0.15);
    border-left-color: var(--color-accent);
  }

  .search-result-item.nominatim-result {
    background: rgba(251, 191, 36, 0.1);
    border-left-color: #fbbf24;
  }

  .search-result-item.nominatim-result:hover,
  .search-result-item.nominatim-result.selected {
    background: rgba(251, 191, 36, 0.18);
  }

  .search-result-name {
    color: var(--color-label);
  }

  .search-result-layer {
    color: var(--color-label-secondary);
  }

  .search-result-coords {
    color: #6b7280;
  }

  .search-highlight {
    background: rgba(251, 191, 36, 0.35);
    color: var(--color-label);
  }
}


/* ==========================================================
   Shape popup（禁航／管制區）— iOS 群組式清單版面
   ----------------------------------------------------------
   設計原則：
   1. 資訊分組收在圓角卡片內，以髮絲線分隔，取代「每個欄位一個框」的碎裂感。
   2. 標籤靠左（次要色）、數值靠右（主色 + 等寬數字），掃視時視線只需走兩條垂直線。
   3. 顏色只用在必要處（動作按鈕的強調色、使用者選定的圖形色），其餘一律中性灰階。
   4. 可展開的內容一律用 disclosure 列，收合時右側先給出結論值。
   ========================================================== */

/* ---- popup 外框：寬度由 JS 依視窗計算，這裡負責高度與捲動 ---- */
.shape-popup .leaflet-popup-content {
    /* 右側留出捲軸寬度 + 間距，文字不會黏在捲軸上；scrollbar-gutter 讓有無捲軸時寬度一致 */
    margin: 16px 8px 16px 18px;
    padding-right: 10px;
    scrollbar-gutter: stable;
    max-height: 520px;
    max-height: min(62vh, 520px);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Apple 風格細捲軸：透明軌道 + 圓角滑塊（不可使用 scrollbar-width/-color，
   Chrome 一旦看到標準屬性就會停用 ::-webkit-scrollbar 自訂樣式而退回原生外觀） */
.shape-popup .leaflet-popup-content::-webkit-scrollbar,
.custom-popup .leaflet-popup-content::-webkit-scrollbar {
    width: 6px;
}

.shape-popup .leaflet-popup-content::-webkit-scrollbar-track,
.custom-popup .leaflet-popup-content::-webkit-scrollbar-track {
    background: transparent;
}

.shape-popup .leaflet-popup-content::-webkit-scrollbar-thumb,
.custom-popup .leaflet-popup-content::-webkit-scrollbar-thumb {
    background: var(--color-scroll-thumb);
    border-radius: var(--radius-full);
}

.shape-popup .leaflet-popup-content::-webkit-scrollbar-thumb:hover,
.custom-popup .leaflet-popup-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-scroll-thumb-hover);
}

.shape-popup .leaflet-popup-content::-webkit-scrollbar-button,
.custom-popup .leaflet-popup-content::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}

.custom-popup .leaflet-popup-content {
    padding-right: 10px;
    scrollbar-gutter: stable;
}

/* ---- 標題區：類型 → 標題 → 副標，三層字級遞減，不用分隔線 ---- */
.shape-popup .shape-popup-header {
    margin: 0 0 14px;
    padding: 0;
    border-bottom: 0;
}

.shape-popup .shape-popup-kicker {
    margin: 0 0 3px;
    color: var(--color-label-secondary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: none;
}

.shape-popup .popup-title {
    margin: 0;
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-label);
    overflow-wrap: anywhere;
}

.shape-popup .shape-popup-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--color-label-secondary);
    overflow-wrap: anywhere;
}

/* ---- 區塊與區塊標題 ---- */
.shape-section {
    margin: 0 0 10px;
}

/* ---- 群組式清單卡片 ---- */
.shape-list {
    border-radius: var(--radius-md);
    background: var(--color-fill-tertiary);
    overflow: hidden;
}

.shape-row,
.shape-disclosure-summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 32px;
    padding: 6px 12px;
}

/* 髮絲線由標籤起始處內縮，是 iOS 清單的辨識特徵 */
.shape-list > * + *::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    right: 0;
    height: 1px;
    background: var(--color-separator);
}

.shape-row-label {
    flex: 0 1 auto;
    overflow-wrap: anywhere;
    color: var(--color-label-secondary);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

.shape-row-value {
    min-width: 0;
    color: var(--color-label);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* ---- 可展開列（AI 研判／顏色）---- */
.shape-disclosure {
    position: relative;
}

.shape-disclosure-summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
}

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

/* iOS 樣式的 chevron：收合時指右，展開時指下 */
.shape-disclosure-summary::after {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-left: -4px;
    border-right: 1.8px solid var(--color-scroll-thumb);
    border-bottom: 1.8px solid var(--color-scroll-thumb);
    transform: rotate(-45deg);
    transition: transform 0.2s var(--ease-standard);
}

.shape-disclosure[open] > .shape-disclosure-summary::after {
    transform: rotate(45deg);
}

.shape-disclosure-summary:hover {
    background: var(--color-fill-secondary);
}

.shape-disclosure-body {
    padding: 2px 12px 10px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--color-label);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* ---- 公告內容：長文用同樣的卡片底，維持群組節奏 ---- */
.shape-note {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--color-fill-tertiary);
    color: var(--color-label);
    font-size: 13px;
    line-height: 1.65;
    overflow-wrap: anywhere;
    /* 約 5 行後自行捲動，超長公告不會把度量與按鈕推到看不見的地方 */
    max-height: 8.6em;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ---- 動作按鈕：iOS 風格填色按鈕，強調色只用在文字 ---- */
.shape-popup .popup-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 8px;
    margin-top: 6px;
    padding-top: 0;
    border-top: 0;
}

.shape-popup .popup-actions .link-btn {
    margin: 0;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-fill-tertiary);
    box-shadow: none;
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    white-space: normal;
    cursor: pointer;
    transition: background 0.2s ease;
}

.shape-popup .popup-actions .link-btn:hover {
    background: var(--color-fill-secondary);
    transform: none;
    box-shadow: none;
    border: 0;
}

.shape-popup .popup-actions .link-btn:active {
    opacity: 0.6;
}

/* ---- 顏色選擇器（作為清單中的一列展開）---- */
.shape-color-current {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.shape-color-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--swatch-color, #ef4444);
    box-shadow: 0 0 0 1px var(--color-separator);
}

.shape-color-hex {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-label);
}

.shape-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.shape-color-swatch,
.shape-color-custom {
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--color-separator);
    cursor: pointer;
    transition: transform 0.18s var(--ease-spring), box-shadow 0.18s ease;
}

.shape-color-swatch {
    background: var(--swatch-color, #ef4444);
}

.shape-color-swatch:hover,
.shape-color-custom:hover {
    transform: scale(1.1);
}

.shape-color-swatch:active,
.shape-color-custom:active {
    transform: scale(0.94);
}

/* 選中：外圈留白 + 強調色細環，比整顆放大更安靜 */
.shape-color-swatch.is-active,
.shape-color-custom.is-active {
    box-shadow: 0 0 0 2px var(--color-fill-tertiary), 0 0 0 4px var(--color-accent);
}

.shape-color-swatch:focus-visible,
.shape-color-custom:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.shape-color-custom {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(#ef4444, #d97706, #16a34a, #0891b2, #2563eb, #9333ea, #ef4444);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.shape-color-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.shape-color-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shape-color-action {
    flex: 1 1 96px;
    min-width: 0;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-fill-secondary);
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.shape-color-action:hover {
    background: var(--color-fill-primary);
}

.shape-color-action:active {
    opacity: 0.6;
}

/* ---- 手機／小螢幕 ---- */
@media (max-width: 768px) {
    .shape-popup .leaflet-popup-content {
        margin: 16px 6px 16px 16px !important;
        max-height: calc(100vh - 200px) !important;
        max-height: min(58dvh, calc(100dvh - 200px)) !important;
    }

    .shape-color-swatch,
    .shape-color-custom {
        width: 32px;
        height: 32px;
    }

    .shape-row,
    .shape-disclosure-summary {
        min-height: 38px;
    }
}

@media (max-width: 380px) {
    .shape-popup .popup-actions {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shape-color-swatch,
    .shape-color-custom,
    .shape-color-action,
    .shape-disclosure-summary::after {
        transition: none;
    }
}

/* ==========================================================
   液態 UI 系統 (Liquid UI System) — v0.6.0
   參考 Libraries.dev（liquid-gooey / border-beam / thinking-orbs）之技術原理，
   以純 CSS + 單一內嵌 SVG 濾鏡重寫，無任何套件或建置工具。
   刻意克制：只落在「載入 / 處理中」與少數控制項，不做全站動畫。
   ========================================================== */

/* ── 三點液態脈動（thinking-orbs）────────────────────────────
   取代散落各處的環形 spinner。三顆同色圓點靠得夠近，脈動時被
   #liquid-goo 濾鏡短暫黏合＝「液態思考」指示器。color 用 currentColor，
   自動吃深/淺色。 */
.thinking-orbs {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  filter: url(#liquid-goo);
  line-height: 0;
}

.thinking-orbs i {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  animation: thinkingOrb 1.1s var(--ease-standard) infinite;
}

.thinking-orbs i:nth-child(2) { animation-delay: 0.14s; }
.thinking-orbs i:nth-child(3) { animation-delay: 0.28s; }

@keyframes thinkingOrb {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.62); }
  40%           { opacity: 1;    transform: scale(1); }
}

/* ── 環繞光束（border-beam）─────────────────────────────────
   一道緩慢繞邊的光束＝「正在處理」。目前只掛在資料載入卡片 .loading。
   @property 不支援時退化為靜態微光邊框，功能不受影響。 */
@property --beam-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.border-beam {
  position: relative;
  isolation: isolate;
}

.border-beam::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--beam-angle),
    transparent 0 62%,
    var(--color-accent) 78%,
    #ffffff 87%,
    var(--color-accent) 94%,
    transparent 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: beamSpin var(--beam-duration) linear infinite;
  pointer-events: none;
}

@keyframes beamSpin {
  to { --beam-angle: 360deg; }
}

/* ── 全域「減少動態效果」無障礙收斂 ─────────────────────────
   一次涵蓋：動態島展開、骨架屏、跑馬燈、光束、三點脈動、gooey 位移。
   （已確認全專案無 transitionend 依賴，可安全全域套用。） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .border-beam::after { animation: none; opacity: 0; }
  .thinking-orbs { filter: none; }
  .thinking-orbs i { animation: none; opacity: 0.55; }
}