:root {
  --bg: #f3f5f9;
  --panel: #ffffff;
  --panel-alt: #f8fafc;
  --line: #e2e8f0;
  --line-bright: #cbd5e1;
  --text: #182233;
  --text-dim: #5b6b82;
  --text-faint: #94a3b8;
  --accent: #0d9488;
  --accent-soft: rgba(13, 148, 136, 0.1);
  --warm: #d97706;
  --danger: #dc2626;
  --shadow: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06);
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
}

* { box-sizing: border-box; }

/* 關鍵修正：任何元素只要有 hidden 屬性就強制不顯示，蓋過下面所有 display:flex/grid 的宣告。
   沒有這行的話，像 .loading-overlay、.modal-backdrop 這種自己寫了 display:flex 的區塊，
   JS 設定 hidden=true 會完全沒有作用（作者樣式的優先權高於瀏覽器內建的 [hidden] 規則）。 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100vh;
  /* v5.2：原本是 overflow-x: hidden。在 iOS Safari／部分手機瀏覽器，body 設了 overflow 會讓頂部
     header 的 position: sticky 失效——往下捲之後 header（含「我的」選單與模式切換）整個消失，
     手機上就找不到簡單／專業模式切換。改用 clip：一樣不讓整頁被撐開橫向捲動，但不會建立捲動容器。 */
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
}

/* 右上角小型掃描動畫：純裝飾，不橫跨畫面、不擋內容 */
.scan-corner {
  position: fixed;
  top: 14px; right: 28px;
  width: 90px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
  animation: corner-pulse 2.4s ease-in-out infinite;
  z-index: 50;
  pointer-events: none;
}
@keyframes corner-pulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .scan-corner { animation: none; display: none; }
}
@media (max-width: 640px) {
  .scan-corner { display: none; } /* 手機上頂欄空間有限，直接隱藏，避免跟時鐘打架 */
}

/* ===== Topbar ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--text-faint);
  box-shadow: 0 0 0 3px rgba(15,23,42,0.04);
  transition: background 0.3s, box-shadow 0.3s;
}
.brand-dot.ok { background: var(--accent); box-shadow: 0 0 12px 2px var(--accent); animation: pulse 2s ease-in-out infinite; }
.brand-dot.err { background: var(--danger); box-shadow: 0 0 12px 2px var(--danger); }
.brand-dot.busy { background: var(--warm); box-shadow: 0 0 12px 2px var(--warm); animation: pulse 0.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.brand-title {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 3px;
  font-weight: 700;
}
.brand-sub { font-size: 11px; color: var(--text-dim); letter-spacing: 0.5px; margin-top: 2px; }
.clock { font-family: var(--mono); color: var(--text-dim); font-size: 13px; letter-spacing: 1px; }

/* ===== Layout ===== */
.layout {
  display: grid;
  grid-template-columns: 340px 260px 1fr;
  gap: 24px;
  padding: 24px 28px 60px;
  align-items: start;
  max-width: 1600px;
  margin: 0 auto;
  min-width: 0;
  transition: grid-template-columns 0.22s ease;
}
@media (max-width: 1180px) {
  .layout { grid-template-columns: 340px 1fr; }
  .saved-panel { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .saved-panel { grid-column: auto; order: 0; }
}
/* 桌機版：控制台收合時，欄寬縮成一條窄軌，讓出空間給戰情室（不是手機那種「往上收」，
   桌機螢幕夠寬，收合應該讓橫向空間還給右邊，而不是留著 340px 空白欄位不用）。
   已儲存清單欄位也是同樣道理：戰情室顯示出來之後，這欄如果沒展開查看，也不該一直佔位。 */
@media (min-width: 901px) {
  .layout.console-collapsed { grid-template-columns: 52px 260px 1fr; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .layout.console-collapsed { grid-template-columns: 52px 1fr; }
}
@media (min-width: 1181px) {
  .layout.saved-collapsed { grid-template-columns: 340px 52px 1fr; }
  .layout.console-collapsed.saved-collapsed { grid-template-columns: 52px 52px 1fr; }
}

/* ===== Console (左側控制台) ===== */
.console {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  position: sticky;
  top: 84px;
  box-shadow: var(--shadow);
}
.console-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; cursor: pointer; user-select: none; }
.console-head h2 { flex: 1; margin: 0; font-size: 15px; letter-spacing: 1px; color: var(--text); }
.console-caret { color: var(--text-faint); transition: transform 0.15s; font-size: 13px; }
.console.collapsed .console-caret { transform: rotate(-90deg); }
.console.collapsed .console-head { margin-bottom: 0; }
.console-body { overflow: hidden; }
.console.collapsed .console-body { display: none; }
.idx { font-family: var(--mono); color: var(--accent); font-size: 12px; letter-spacing: 1px; }

/* 桌機版收合成窄軌時：標題文字直排、置中，整個軌道可點擊展開 */
@media (min-width: 901px) {
  .console.collapsed { padding: 16px 6px; }
  .console.collapsed .console-head {
    flex-direction: column; align-items: center; gap: 10px; margin-bottom: 0;
  }
  .console.collapsed .idx { display: none; }
  .console.collapsed .console-head h2 {
    writing-mode: vertical-rl; text-orientation: mixed;
    font-size: 11.5px; letter-spacing: 3px; white-space: nowrap; flex: none;
  }
}
@media (min-width: 1181px) {
  .saved-panel.collapsed { padding: 16px 6px; }
  .saved-panel.collapsed .saved-panel-head {
    flex-direction: column; align-items: center; gap: 10px; margin-bottom: 0;
  }
  .saved-panel.collapsed .saved-panel-head h2 {
    writing-mode: vertical-rl; text-orientation: mixed;
    font-size: 11.5px; letter-spacing: 2px; white-space: nowrap;
  }
  .saved-panel.collapsed #refreshSavedBtn { display: none; }
}

.field { display: block; margin-bottom: 14px; }
.field-advanced { margin-bottom: 14px; font-size: 12px; }
.field-advanced summary { cursor: pointer; color: var(--text-dim); margin-bottom: 8px; }
.field-advanced textarea { width: 100%; font-family: ui-monospace, monospace; font-size: 12px; }
.field-advanced code { background: rgba(255,255,255,0.06); padding: 1px 4px; border-radius: 4px; }
.field-label { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 6px; letter-spacing: 0.3px; }
.field input, .field textarea {
  width: 100%;
  background: var(--panel-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 16px; /* 16px 以上 iOS Safari 才不會在 focus 時自動放大整頁 */
  resize: vertical;
  transition: border-color 0.15s;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.console-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.console-actions .btn { width: 100%; max-width: 100%; box-sizing: border-box; white-space: normal; word-break: break-word; }
.btn {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  font-family: var(--sans);
  cursor: pointer;
  background: transparent;
  color: var(--text);
  transition: all 0.15s;
  letter-spacing: 0.3px;
}
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #ffffff; font-weight: 700; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn-danger { color: #c0392b; border-color: #f0c4c0; }
.btn-danger:hover:not(:disabled) { border-color: #c0392b; color: #c0392b; background: #fdecea; }
/* v4.17：卡片上的「自動」單位鈕跟垃圾桶刪除鈕移進編輯視窗後，改由這一列承載，讓卡片本身更乾淨、
   有更多空間放指標數字/圖表。 */
.edit-modal-toprow { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.edit-modal-toprow #editMetricDeleteBtn { white-space: nowrap; }

.status-line {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.6;
  min-height: 34px;
}
.status-line.err { color: var(--danger); }
.status-line.ok { color: var(--accent); }

/* v4.25：自動探索完成後的「故事已就緒」提示卡——語氣是邀請，不是強迫，出現在資料選好之後、
   使用者按「產生戰情室」之前，呼應「先看故事，再看細節」的產品定位。 */
.story-banner {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #f0f6ff;
  border: 1px solid #cfe0ff;
  color: #1a4d8f;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.story-banner .link-btn { color: #1a4d8f; font-weight: 600; white-space: nowrap; }

.field-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.field-label-row .field-label { margin-bottom: 0; }
.link-btn {
  background: none; border: none; color: var(--accent); font-size: 11px;
  cursor: pointer; padding: 0; font-family: var(--mono); letter-spacing: 0.3px;
}
.link-btn:hover { text-decoration: underline; }
.link-btn:disabled { color: var(--text-faint); cursor: not-allowed; text-decoration: none; }

.topbar-right { display: flex; align-items: center; gap: 18px; }

.member-widget { display: flex; align-items: center; gap: 8px; }
.member-chip { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); }
.member-chip--warn { color: #d9a441; }
.member-avatar { width: 20px; height: 20px; border-radius: 50%; }
.member-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
#memberGateBackdrop .modal-box { max-width: 380px; text-align: center; }
#memberGateBackdrop .modal-actions { justify-content: center; }

/* ===== 維度差異洞察 ===== */
.compare-result-box { max-width: 820px; max-height: 82vh; overflow-y: auto; }
.compare-summary-card { margin-bottom: 14px; }
.compare-insight-target-row {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--text-dim);
}
.compare-insight-target-row select {
  flex: 1; min-width: 0; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-family: var(--sans); font-size: 12.5px;
}
.insights-card { margin-top: 16px; }
.insight-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.insight-item:last-child { border-bottom: none; }
.insight-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.insight-item-label { font-size: 12px; font-weight: 600; color: var(--accent); }
.insight-item-time { font-size: 11px; color: var(--text-faint); flex: 0 0 auto; }
.insight-item-text { margin-top: 4px; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }
.insight-item-actions { margin-top: 6px; }
.insight-item-legacy-note { font-size: 11px; color: var(--text-faint); font-style: italic; }
.compare-matrix-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.compare-matrix-table th, .compare-matrix-table td {
  border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top;
}
.compare-matrix-table th { color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.compare-sig-high { color: #dc2626; font-weight: 600; }
.compare-sig-medium { color: #d97706; font-weight: 600; }
.compare-sig-none { color: var(--text-faint); }
.compare-group-line { font-size: 11.5px; color: var(--text-dim); line-height: 1.6; }
.compare-error-note { color: var(--text-faint); font-style: italic; }
/* v5.8：信心等級、提醒、穩健統計 */
.compare-conf { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2, #f1f5f9); }
.compare-conf-high { background: #dcfce7; color: #166534; }
.compare-conf-medium { background: #fef9c3; color: #854d0e; }
.compare-conf-low { background: #ffedd5; color: #9a3412; }
.compare-conf-none, .compare-conf-insufficient { color: var(--text-faint); }
.compare-warn { color: #b45309; font-size: 12px; }
.compare-robust-line { color: var(--text-faint); font-size: 12px; }
.admin-link { color: var(--text-dim); font-size: 12px; text-decoration: none; letter-spacing: 0.3px; }
.admin-link:hover { color: var(--accent); }

.table-schemas {
  display: flex; flex-direction: column; gap: 4px; /* v5.9：改由每個資料來源群組各自捲動 */
  /* v4.19.2：加高預設可視範圍（260px → 420px），並讓捲軸本身清楚可見——原本完全依賴瀏覽器/作業系統
     預設的 overlay 捲軸，在某些系統主題下平時是透明的，只有滑鼠移到捲軸位置才會浮現，
     使用者展開多個 schema 群組後容易誤以為「內容被截斷、沒辦法看到其他表」，而不是「可以捲動」。 */
  scrollbar-width: thin; scrollbar-color: var(--line-bright) transparent;
}
.table-schemas::-webkit-scrollbar { width: 8px; }
.table-schemas::-webkit-scrollbar-track { background: transparent; }
.table-schemas::-webkit-scrollbar-thumb { background: var(--line-bright); border-radius: 4px; }
.table-schemas::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.chip-empty { font-size: 11.5px; color: var(--text-faint); }

.schema-group {
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  /* v5.9：外層 .table-schemas 是限高的直向 flex 容器，子項目預設會被壓縮（flex-shrink: 1）。
     表很多時（例如 SQL Server 有 258 張表）群組被壓成剛好 420px、多的表被自己的 overflow:hidden 裁掉，
     外層又以為內容沒超出而不出現捲軸 → 看不到後面的表。固定不壓縮，讓外層正常捲動。 */
  flex-shrink: 0;
}
.schema-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; cursor: pointer; background: var(--panel-alt);
  font-family: var(--mono); font-size: 11.5px; color: var(--text-dim);
  user-select: none;
}
.schema-head:hover { color: var(--accent); }
.schema-head .caret { transition: transform 0.15s; display: inline-block; margin-right: 6px; color: var(--text-faint); }
.schema-group.open .schema-head .caret { transform: rotate(90deg); }
.schema-count { color: var(--text-faint); }
.schema-body { display: none; padding: 0 0 6px; }
.schema-group.open .schema-body { display: block; }
/* v5.9：每個資料來源（public / uploads / mssql_xxx）各自有上下與左右捲軸——
   SQL Server 可能有幾百張表、表名也可能很長，不再整個清單擠在一起或把長名稱截斷。 */
.schema-rows {
  max-height: 300px; overflow: auto; padding: 2px 10px 4px;
  display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: thin; scrollbar-color: var(--line-bright) transparent;
}
.schema-rows::-webkit-scrollbar { width: 8px; height: 8px; }
.schema-rows::-webkit-scrollbar-thumb { background: var(--line-bright); border-radius: 4px; }
.schema-rows::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.schema-rows .table-row { min-width: max-content; }
.schema-rows .table-row[hidden] { display: none; }
.schema-rows .table-row .t-name { overflow: visible; text-overflow: clip; }
.schema-search {
  display: flex; align-items: center; gap: 6px;
  margin: 6px 10px 4px; padding: 4px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
}
.schema-search:focus-within { border-color: var(--accent); }
.schema-search-icon { font-size: 12px; opacity: 0.7; }
.schema-search input.schema-search-input {
  /* 蓋掉全站 input 的外框/底色/陰影，避免框中框 */
  flex: 1; min-width: 0; width: auto; height: auto; margin: 0;
  border: none !important; outline: none; box-shadow: none !important; background: transparent !important;
  font-family: var(--mono); font-size: 12px; color: var(--text); padding: 2px 0;
}
/* 左右捲動時勾選框固定在最左邊，表名再長也隨時勾得到 */
.schema-rows .table-row input[type="checkbox"] {
  position: sticky; left: 0; z-index: 1;
  box-shadow: 0 0 0 4px var(--panel), -12px 0 0 4px var(--panel); background: var(--panel);
}
.schema-search-count { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }

.table-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 6px; border-radius: 4px; cursor: pointer;
  font-size: 12px; color: var(--text-dim);
  /* v4.7：上傳表自動產生的名稱可能很長（見 uploads.js makeUploadTableName），就算已經縮短，
     使用者手動改的名稱也可能很長。checkbox 放最前面固定不動、名稱區塊用 min-width:0 + ellipsis
     截斷，這樣不管名稱多長，核取方塊跟後面的 TABLE/列數徽章永遠看得到，不會被擠出畫面外。 */
}
.table-row:hover { background: var(--accent-soft); color: var(--text); }
.table-row input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px; height: 15px; flex: 0 0 15px; margin: 0; /* 固定小尺寸+固定順序在最前面，避免被長名稱擠到看不見 */
}
.table-row .t-name {
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* 允許在 flex 容器裡縮小到比內容還窄，ellipsis 才會生效 */
  flex: 0 1 auto;
  cursor: help; /* 滑鼠移上去有 title 顯示完整名稱 */
}
.table-row .t-rename-btn {
  flex: 0 0 auto; background: none; border: none; color: var(--text-faint);
  cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 3px; line-height: 1;
}
.table-row .t-rename-btn:hover { color: var(--accent); background: var(--panel-alt); }
.table-row .t-delete-btn {
  border: none; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 11.5px;
  padding: 2px 4px; border-radius: 4px; opacity: 0.7;
}
.table-row .t-delete-btn:hover { color: #dc2626; background: rgba(220,38,38,0.1); opacity: 1; }
.table-row .t-meta { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.table-row .t-rows { color: var(--text-faint); font-size: 10.5px; }
.table-row .t-badge { font-size: 9.5px; color: var(--text-faint); border: 1px solid var(--line); border-radius: 3px; padding: 1px 4px; }

/* 保險：就算未來又出現比容器還寬的極端內容，也給整個清單一個明確的橫向捲軸可以滑，
   而不是內容被裁掉或撐爆版面卻無法捲動（Robin 回報的「至少要有 scroll bar」需求）。 */
.schema-body { overflow-x: auto; }

.raw-panel { margin-top: 16px; }
.raw-panel summary { color: var(--text-faint); font-size: 11px; cursor: pointer; }
.raw-panel pre {
  background: #0f172a;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  font-size: 10.5px;
  color: #cbd5e1;
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ===== War room (右側戰情室) ===== */
.warroom { min-height: 400px; min-width: 0; }

.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 100px 20px;
  color: var(--text-faint);
  border: 1px dashed var(--line);
  border-radius: 10px;
}
.empty-glyph { font-size: 40px; color: var(--line-bright); margin-bottom: 12px; }
.empty-title { font-size: 15px; color: var(--text-dim); margin-bottom: 4px; }
.empty-sub { font-size: 12.5px; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
  min-width: 0;
}

/* HUD 卡片：四角括號裝飾，呼應「戰情室」主題 */
.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  min-width: 0; /* grid/flex item 預設 min-width:auto 會用內容最小寬度撐開整個 track，
                   長數字或長文字會把手機版擠成橫向捲動，這裡強制允許卡片縮小、內容改為換行 */
  box-shadow: var(--shadow);
}
.card::before, .card::after,
.card .br-tl, .card .br-br { content: ''; }
.corner {
  position: absolute;
  width: 10px; height: 10px;
  border-color: var(--line-bright);
  border-style: solid;
  border-width: 0;
  opacity: 0.8;
}
.corner.tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; border-radius: 8px 0 0 0; }
.corner.br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; border-radius: 0 0 8px 0; }

.kpi-title { font-size: 11.5px; color: var(--text-dim); letter-spacing: 0.3px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.kpi-title .info { color: var(--text-faint); cursor: help; font-size: 11px; }
.kpi-value {
  font-family: var(--mono); font-weight: 700; color: var(--text); letter-spacing: -0.5px;
  font-size: clamp(18px, 5vw, 28px); /* 大數字（例如營收帶小數）在窄螢幕自動縮小，不撐破卡片 */
  overflow-wrap: anywhere;
}
.kpi-growth { margin-top: 6px; font-family: var(--mono); font-size: 12.5px; }
.kpi-growth.up { color: var(--accent); }
.kpi-growth.down { color: var(--danger); }
.kpi-growth.flat { color: var(--text-dim); }

.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  min-width: 0;
}
.section-card { padding: 18px; min-width: 0; }
.section-title { font-size: 13px; color: var(--text); margin-bottom: 14px; letter-spacing: 0.3px; display: flex; align-items: center; gap: 6px; }
.section-title .info { color: var(--text-faint); font-size: 11px; cursor: help; }

/* bar_trend：月份一多，卡片內部橫向捲動，不會撐開整個頁面寬度 */
.bar-trend-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bar-trend { display: flex; align-items: flex-end; gap: 10px; height: 140px; padding-top: 10px; width: max-content; min-width: 100%; }
.bar-trend .bar-col { flex: 0 0 44px; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; cursor: pointer; border-radius: 4px; transition: background 0.12s; }
.bar-trend .bar-col:hover { background: var(--accent-soft); }
.bar-trend .bar { width: 60%; background: linear-gradient(180deg, var(--accent), rgba(13,148,136,0.25)); border-radius: 3px 3px 0 0; min-height: 2px; }
.bar-trend .bar-val { font-family: var(--mono); font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.bar-trend .bar-label { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }

/* donut */
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut { width: 120px; height: 120px; border-radius: 50%; flex-shrink: 0; position: relative; }
.donut-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; color: var(--text-dim); }
.donut-hole { position: absolute; inset: 22%; background: var(--panel); border-radius: 50%; }
.legend { display: flex; flex-direction: column; gap: 6px; font-size: 12px; flex: 1; min-width: 140px; }
.legend-item { display: flex; align-items: center; gap: 8px; cursor: pointer; border-radius: 4px; padding: 2px 4px; margin: -2px -4px; transition: background 0.12s; }
.legend-item:hover { background: var(--accent-soft); }
.legend-swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.legend-label { color: var(--text-dim); flex: 1; }
.legend-val { font-family: var(--mono); color: var(--text); }

/* top_list / progress_list */
.top-list { display: flex; flex-direction: column; gap: 10px; }
.top-row-clickable { border-radius: 6px; padding: 3px 4px; margin: -3px -4px; cursor: pointer; transition: background 0.12s; }
.top-row-clickable:hover { background: var(--accent-soft); }
.top-row { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; }
.top-rank { font-family: var(--mono); color: var(--accent); font-size: 12px; }
.top-track { background: var(--panel-alt); border-radius: 4px; height: 8px; overflow: hidden; border: 1px solid var(--line); }
.top-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--warm)); }
.top-label-row { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-dim); margin-bottom: 3px; }
.top-cell { display: flex; flex-direction: column; }
.top-val { font-family: var(--mono); font-size: 12px; color: var(--text); text-align: right; min-width: 46px; }

/* ===== 已儲存的戰情室清單 ===== */
.saved-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.saved-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; cursor: pointer; user-select: none; }
.saved-panel-head h2 { margin: 0; font-size: 13.5px; letter-spacing: 0.3px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.saved-panel-head .caret { color: var(--text-faint); font-size: 11px; transition: transform 0.15s; }
.saved-panel.collapsed .caret { transform: rotate(-90deg); }
.saved-panel.collapsed .saved-list { display: none; }
.saved-list { display: flex; flex-direction: column; gap: 8px; }
.saved-item {
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  cursor: pointer; transition: border-color 0.12s, background 0.12s;
}
.saved-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.saved-item-title { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.saved-item-summary { font-size: 11px; color: var(--text-dim); line-height: 1.5; margin-bottom: 6px; }
.saved-item-meta { font-size: 10px; color: var(--text-faint); font-family: var(--mono); display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.saved-item-meta > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-item-delete { color: var(--text-faint); cursor: pointer; padding: 0 4px; }
.saved-item-delete:hover { color: var(--danger); }
.saved-item-rename { color: var(--text-faint); cursor: pointer; padding: 0 4px; }
.saved-item-rename:hover { color: var(--accent); }
.saved-item-share { color: var(--text-faint); cursor: pointer; padding: 0 4px; }
.saved-item-share:hover { color: var(--accent); }

.saved-panel-subhead { margin: 16px 0 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.saved-panel-subhead h3 { margin: 0; font-size: 12.5px; letter-spacing: 0.3px; color: var(--text-dim); font-weight: 600; }

/* v4.16：整張卡片現在可點擊開啟「群組分頁」（見 openSavedGroupView），恢復跟 .saved-item 一樣的
   pointer/hover 樣式；成員 chip 各自的點擊已經用 stopPropagation 跟外層分開，不會互相干擾。 */
.saved-group-item {
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  cursor: pointer; transition: border-color 0.12s, background 0.12s;
}
.saved-group-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.saved-group-summary { font-size: 11px; color: var(--text-dim); line-height: 1.6; margin-bottom: 8px; }
.saved-group-members { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.saved-group-member {
  font-size: 10.5px; color: var(--accent); background: var(--accent-soft);
  border-radius: 4px; padding: 3px 8px; cursor: pointer; font-family: var(--mono);
}
.saved-group-member:hover { text-decoration: underline; }

/* ===== 分析總結 ===== */
.summary-card {
  margin-top: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.summary-title { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 8px; letter-spacing: 0.3px; }
.summary-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.summary-title-row .summary-title { margin-bottom: 0; }
.summary-text { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.75; }

/* v4.30（Insight-First 改版）：重點列表置於 narrative 之上，讓使用者先看結論、再看完整說明 */
.summary-highlights { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.summary-highlight-item {
  font-size: 13px;
  line-height: 1.6;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.summary-highlight-positive { border-left: 3px solid #2e9e5b; }
.summary-highlight-warning { border-left: 3px solid #c98a1a; background: #fff7e6; }
.summary-highlight-neutral { border-left: 3px solid var(--accent); }

/* ===== dash-header 加了儲存按鈕，改成三段式排版 ===== */
.dash-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.dash-header-titles { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dash-header h1 { margin: 0; font-size: 20px; letter-spacing: 0.5px; }
.dash-time { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }

/* ===== v4.16：跨戰情室分析組檢視畫面 ===== */
.group-view-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.group-view-icon { font-size: 20px; }
.group-view-title-row h1 { margin: 0; font-size: 20px; letter-spacing: 0.5px; }
.group-view-title-row input[type="text"] {
  font-size: 18px; font-weight: 600; background: var(--panel-alt); border: 1px solid var(--accent);
  border-radius: 6px; padding: 6px 10px; color: var(--text); font-family: var(--sans); flex: 1; min-width: 200px;
}
.group-cross-summary { margin-top: 0; margin-bottom: 22px; }
.group-members-head { font-size: 12.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 10px; letter-spacing: 0.3px; }
.group-members-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.group-member-card {
  border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px;
  background: var(--panel); cursor: pointer; transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.group-member-card:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.group-member-title { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.group-member-summary { font-size: 11.5px; color: var(--text-dim); line-height: 1.6; }
.group-member-card.group-member-deleted {
  cursor: not-allowed; opacity: 0.55;
}
.group-member-card.group-member-deleted:hover { border-color: var(--line); background: var(--panel); transform: none; }
.group-member-insight-badge {
  font-size: 11px; color: var(--accent); margin-top: 8px; font-weight: 600;
}
.summary-title .link-btn { font-size: 11.5px; font-weight: 500; margin-left: 8px; }

/* ===== 單位切換：v4.17 起改在編輯視窗用下拉選單設定，不再是卡片上的按鈕+彈出選單 ===== */

/* ===== 載入動畫 ===== */
.loading-overlay {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 90px 20px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.loading-ring {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 13.5px; color: var(--text); font-family: var(--mono); }
.loading-sub { font-size: 11.5px; color: var(--text-faint); }
@media (prefers-reduced-motion: reduce) {
  .loading-ring { animation: none; border-top-color: var(--line); }
}

/* v4.17：小尺寸的行內版本，給彈窗裡「執行中」的文字前面用（維度差異洞察等），
   跟上面全螢幕用的 .loading-ring 共用同一組 spin keyframe，只是縮小＋改成行內顯示，
   讓使用者一眼看出「還在跑」而不是誤以為按了沒反應（紅字3）。 */
.inline-spinner {
  display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .inline-spinner { animation: none; border-top-color: var(--accent); }
}

/* ===== Dashboard 分頁籤（每次深入分析都留一個新分頁） ===== */
.dash-tabs {
  display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin-bottom: 14px; padding-bottom: 2px;
}
.dash-tab {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 10px; font-size: 11.5px; color: var(--text-dim);
  cursor: pointer; white-space: nowrap; background: var(--panel);
}
.dash-tab:hover { border-color: var(--line-bright); color: var(--text); }
.dash-tab.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.dash-tab .tab-close {
  color: var(--text-faint); font-size: 12px; line-height: 1; padding: 0 2px;
}
.dash-tab .tab-close:hover { color: var(--danger); }
.dash-tab .tab-root-badge { font-family: var(--mono); font-size: 9px; color: var(--text-faint); }

/* ===== 指標可點擊樣式 + 提示氣泡 ===== */
.kpi-title .info, .section-title .info {
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 3px;
}
.kpi-title .info:hover, .section-title .info:hover { background: var(--accent-soft); color: var(--accent); }

.kpi-value.clickable-metric {
  cursor: pointer;
  border-bottom: 1px dashed var(--line-bright);
  transition: color 0.12s, border-color 0.12s;
}
.kpi-value.clickable-metric:hover { color: var(--accent); border-color: var(--accent); }
.kpi-drill-hint { font-size: 10px; color: var(--text-faint); margin-top: 4px; }

/* 圖表本身也是可深入分析的指標：整個圖表區域可點擊，hover 時淡淡提示可以點 */
.chart-body.clickable-metric {
  cursor: pointer;
  border-radius: 6px;
  padding: 4px;
  margin: -4px;
  transition: background 0.12s, box-shadow 0.12s;
}
.chart-body.clickable-metric:hover {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.tooltip-bubble {
  position: fixed;
  max-width: 280px;
  white-space: pre-line;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 9px 11px;
  font-size: 12px;
  color: #f1f5f9;
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(15,23,42,0.35);
  z-index: 200;
}

/* 指標數值 + 定義浮動卡片：兩段式互動的第一步（第二步才是深入分析） */
.metric-info-popup {
  position: fixed;
  max-width: 280px;
  background: var(--panel);
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 12px 32px rgba(15,23,42,0.18);
  z-index: 210;
}
.metric-info-title { font-size: 11.5px; color: var(--text-dim); margin-bottom: 4px; }
.metric-info-value { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.metric-info-explanation { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin-bottom: 10px; }
.metric-info-drill-btn {
  width: 100%; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 6px;
  color: var(--accent); font-size: 12.5px; font-weight: 600; padding: 8px 10px; cursor: pointer;
}
.metric-info-drill-btn:hover { background: var(--accent); color: #ffffff; }
.metric-info-suggestions { margin-bottom: 10px; }
.metric-info-suggestions-label { font-size: 10.5px; color: var(--text-faint); margin-bottom: 5px; }
.metric-info-suggestions-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.suggestion-chip {
  font-size: 11px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-bright);
  background: var(--panel-alt); color: var(--text-dim); cursor: pointer; white-space: nowrap;
}
.suggestion-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.suggestion-chip .sc-icon { margin-right: 3px; }
.suggestion-empty-note { font-size: 11px; color: var(--text-faint); line-height: 1.5; }
.t-related-btn {
  border: none; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 12px;
  padding: 2px 4px; border-radius: 4px; line-height: 1;
}
.t-related-btn:hover { color: var(--accent); background: var(--accent-soft); }
.metric-info-sql { margin-bottom: 10px; }
.metric-info-sql summary { font-size: 11.5px; color: var(--accent); cursor: pointer; user-select: none; }
.metric-info-sql pre {
  margin-top: 6px; white-space: pre-wrap; word-break: break-all; font-family: var(--mono);
  font-size: 11px; line-height: 1.5; color: var(--text-dim); background: rgba(0,0,0,0.18);
  border: 1px solid var(--line); border-radius: 6px; padding: 8px; max-height: 160px; overflow: auto;
}
.metric-info-sql-badge {
  font-size: 11px; color: #d97706; margin-top: 6px; font-weight: 600;
}
.metric-info-sql-edit-btn {
  margin-top: 8px; background: none; border: 1px dashed var(--line-bright); border-radius: 6px;
  color: var(--text-dim); font-size: 11.5px; padding: 5px 8px; cursor: pointer; width: 100%;
}
.metric-info-sql-edit-btn:hover { color: var(--accent); border-color: var(--accent); }
.metric-info-sql-editor { margin-top: 8px; }
.metric-info-sql-editor textarea {
  width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
  background: rgba(0,0,0,0.25); color: var(--text); border: 1px solid var(--line-bright); border-radius: 6px;
  padding: 8px; resize: vertical;
}
.metric-info-sql-editor-msg { font-size: 11px; color: #dc2626; margin-top: 4px; min-height: 14px; }
.metric-info-sql-hint { font-size: 10.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.5; }
.metric-info-sql-editor-actions { display: flex; gap: 6px; margin-top: 6px; }
.metric-info-sql-editor-actions .btn { flex: 1; padding: 6px 8px; font-size: 11.5px; }

/* 明顯的錯誤提示：取代容易被忽略的 statusLine，深入分析/產生/刷新失敗時使用 */
.error-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(220, 38, 38, 0.12); border: 1px solid #dc2626; color: #dc2626;
  border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; font-weight: 600;
}
.error-banner-close { background: none; border: none; color: inherit; font-size: 14px; cursor: pointer; padding: 0 4px; }

/* ===== 深入分析 Modal ===== */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(5, 10, 18, 0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 300;
}
.modal-box {
  background: var(--panel); border: 1px solid var(--line-bright); border-radius: 10px;
  padding: 22px; max-width: 440px; width: 100%;
  box-shadow: 0 20px 60px rgba(15,23,42,0.25);
}
.modal-title { font-size: 15px; color: var(--text); margin-bottom: 8px; font-weight: 600; }
.modal-title span { color: var(--accent); }
.modal-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; margin: 0 0 12px; }
.modal-box textarea {
  width: 100%; background: var(--panel-alt); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); padding: 10px 12px; font-family: var(--sans); font-size: 16px; resize: vertical;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.modal-actions .btn { padding: 9px 16px; }

/* v4.15：儲存戰情室對話框改成多選清單（原本是單一標題/說明輸入），內容比一般 modal 多，
   給它一個比預設 440px 寬一點的版面，並定義清單/每一列的樣式。 */
#saveBackdrop .modal-box { max-width: 560px; }

/* v4.31：Insight Graph——vis-network 畫布 + 右側證據/建議說明面板，並排顯示。 */
/* v4.32：原本固定 max-width:900px / 畫布固定 440px 高，內容一多（節點+右側證據卡）就擠成一團，
   還要同時看清楚圖跟旁邊的說明幾乎不可能。改成盡量吃滿視窗（給邊界留一點呼吸空間），
   畫布高度也改用視窗高度比例撐開，並加上右下角可拖曳調整大小（resize），
   讓使用者自己再視需要調整版面。實際的「縮放」則交給下面新增的 +/－/縮放至全圖按鈕
   （呼叫 vis.Network 內建的 moveTo/fit），畫面大小和圖的縮放層級是兩件事，都給使用者控制。 */
#insightGraphBackdrop .modal-box.insight-graph-modal-box {
  max-width: min(1400px, calc(100vw - 40px));
  width: 100%;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}
.insight-graph-legend {
  display: flex; gap: 18px; font-size: 11.5px; color: var(--text-dim); margin-bottom: 10px;
}
/* v4.33：展開/收合控制列——洞察關係圖預設就是「全部展開」（跟改版前行為一致，不驚動既有使用者），
   這排按鈕讓使用者可以自己收合到只看「變數」層級，再一層一層／點節點逐步展開，
   圖形太密看不清楚時可以先收合再照興趣展開，而不是每次都要面對整張滿版的圖。 */
.insight-graph-expand-controls {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 11.5px; color: var(--text-dim); margin-bottom: 10px;
}
.insight-graph-expand-hint { color: var(--text-faint); }
.chip-btn {
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line-bright); background: var(--panel);
  color: var(--text); cursor: pointer; white-space: nowrap;
}
.chip-btn:hover { border-color: var(--accent); color: var(--accent); }
.chip-btn.is-active { border-color: var(--accent); color: var(--accent); background: rgba(13,148,136,0.08); }
.legend-swatch { display: inline-block; width: 22px; height: 0; border-top-width: 3px; border-top-style: solid; margin-right: 5px; vertical-align: middle; }
.legend-solid { border-top-color: var(--accent); }
.legend-dashed { border-top-color: var(--warm); border-top-style: dashed; }
.insight-graph-layout {
  display: flex; gap: 14px; flex: 1; min-height: 0;
}
.insight-graph-canvas-wrap {
  position: relative;
  flex: 1.6; min-width: 0;
  display: flex;
}
.insight-graph-canvas {
  flex: 1; min-width: 0;
  height: min(70vh, 780px);
  min-height: 360px;
  resize: both;
  overflow: auto;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel-alt);
}
.insight-graph-zoom-controls {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: flex; flex-direction: column; gap: 4px;
}
.insight-graph-zoom-controls button {
  width: 30px; height: 30px; border-radius: 6px;
  border: 1px solid var(--line-bright); background: var(--panel);
  color: var(--text); font-size: 15px; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 4px rgba(15,23,42,0.15);
}
.insight-graph-zoom-controls button:hover { border-color: var(--accent); color: var(--accent); }
.insight-graph-detail {
  flex: 1; min-width: 220px; max-width: 340px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel-alt);
  padding: 12px; font-size: 12.5px; line-height: 1.7;
}
/* v4.36：詳情面板改成獨立一欄，最上面加一條可點的收合列，讓使用者自己決定要不要讓詳情
   面板佔位置——尤其手機版預設收合，把空間讓給圖本身（見下面 @media 區塊）。 */
.insight-graph-detail-col {
  flex: 1; min-width: 220px; max-width: 340px;
  display: flex; flex-direction: column; min-height: 0;
}
.insight-graph-detail-col.is-collapsed .insight-graph-detail { display: none; }
.insight-graph-detail-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left; font-size: 12.5px; font-weight: 600;
  padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid var(--line-bright); border-radius: 6px;
  background: var(--panel); color: var(--text); cursor: pointer;
}
.insight-graph-detail-toggle:hover { border-color: var(--accent); color: var(--accent); }
/* v4.36：點節點/邊時浮動蓋在畫布上的說明視窗——跟右側 .insight-graph-detail 顯示同一份內容，
   差別只是位置浮在圖上、可以直接關掉，不占用固定版面空間。手機版尤其實用：右側詳情面板
   收合起來省空間時，點一下節點還是能馬上看到說明，不用另外展開右側欄位。 */
.insight-graph-floating-panel {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  max-height: 60%; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line-bright); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.2);
  padding: 14px 34px 14px 14px; font-size: 12.5px; line-height: 1.7;
  z-index: 8;
}
.insight-graph-floating-close {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line-bright); background: var(--panel-alt);
  color: var(--text-dim); cursor: pointer; font-size: 12px; line-height: 1;
}
.insight-graph-floating-close:hover { border-color: var(--accent); color: var(--accent); }

/* v4.36：手機版（窄螢幕）版面重排——原本 flex row 讓畫布跟詳情面板並排，螢幕一窄畫布就被
   擠成一條縫、詳情面板反而佔掉大半版面（使用者回報的問題）。改成直向堆疊：畫布永遠full
   width 優先顯示，詳情面板收在畫布下面且預設收合（靠上面的收合列展開），
   實際看節點說明主要靠浮動視窗，不需要每次都把詳情面板整個展開。 */
@media (max-width: 720px) {
  .insight-graph-layout { flex-direction: column; }
  .insight-graph-canvas-wrap { flex: none; }
  .insight-graph-canvas { height: 52vh; min-height: 300px; resize: vertical; }
  .insight-graph-detail-col { max-width: none; width: 100%; flex: none; }
  .insight-graph-detail { max-height: 32vh; }
  .insight-graph-floating-panel { left: 6px; right: 6px; bottom: 6px; max-height: 70%; }
}
.insight-graph-detail .suggested-badge {
  display: inline-block; font-size: 10.5px; color: var(--warm); background: rgba(217,119,6,0.1);
  border: 1px solid rgba(217,119,6,0.3); border-radius: 4px; padding: 1px 6px; margin-bottom: 8px;
}
.evidence-card {
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-top: 4px;
}
.evidence-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 10px; font-size: 12px; border-bottom: 1px solid var(--line);
}
.evidence-row:last-child { border-bottom: none; }
.evidence-row:nth-child(odd) { background: var(--panel); }
.evidence-label { color: var(--text-dim); flex-shrink: 0; }
.evidence-value { color: var(--text); font-family: var(--mono); text-align: right; }

/* v4.34：節點/邊詳情面板裡的「建議接著看」——純粹依 graph 裡既有的 confidence/isSuggested
   排序組出來的鄰居清單，不是另外呼叫 AI 生成推薦。有統計佐證的鄰居排前面，AI 建議
   （無統計證據）的一律排最後並標明，避免使用者被沒有實證的方向誤導成優先選項。 */
.insight-suggest-wrap { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.insight-suggest-title { font-size: 11px; color: var(--text-faint); margin-bottom: 6px; }
.insight-suggest-chip {
  display: inline-block; font-size: 11.5px; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--line-bright); background: var(--panel); color: var(--text);
  cursor: pointer; margin: 0 4px 4px 0; text-align: left;
}
.insight-suggest-chip:hover { border-color: var(--accent); color: var(--accent); }
.insight-suggest-chip.is-suggested { border-color: rgba(217,119,6,0.35); color: var(--warm); }
.insight-suggest-chip.is-suggested:hover { border-color: var(--warm); }
/* v4.35：AI 生成的口語化長版說明——用跟證據卡不同的底色/斜體標示「這是換句話說，不是新事實」，
   跟下面 renderEvidenceCard 的正式數字表格區分開來。 */
.insight-node-story {
  font-size: 12.5px; font-style: italic; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; margin: 0 0 8px;
}

/* v4.31：AI Insight Story——由後端已驗證的 graph edges 決定性地串成故事步驟，不是另外呼叫 AI；
   每個步驟用小圓角卡片＋箭頭表示先後順序，點下去會在下方圖上高亮對應節點。 */
.insight-story-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.insight-story-card {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; cursor: pointer;
  background: var(--panel); transition: border-color 0.15s;
}
.insight-story-card:hover { border-color: var(--accent); }
.insight-story-steps { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 11.5px; margin-top: 4px; }
.insight-story-step { padding: 2px 7px; border-radius: 10px; background: var(--panel-alt); border: 1px solid var(--line); }
.insight-story-step.is-suggested { background: rgba(217,119,6,0.08); border-color: rgba(217,119,6,0.3); color: var(--warm); }
.insight-story-arrow { color: var(--text-faint); }

/* v4.28：AI 探索這份資料——內容量可能很多（十幾筆發現），modal 本身不能無限撐高超出螢幕，
   內容區要能自己捲動；心智圖式的分類展開樹（.explore-tree）取代原本的長條列表。 */
#exploreBackdrop .modal-box {
  max-width: 640px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}
#exploreBackdrop .explore-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.explore-tree { font-size: 12.5px; }
.explore-tree-branch {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 8px 0;
  overflow: hidden;
}
.explore-tree-branch > summary {
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 600;
  background: var(--panel-alt);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.explore-tree-branch > summary::-webkit-details-marker { display: none; }
.explore-tree-branch > summary::after { content: '▸'; color: var(--text-faint); transition: transform 0.15s; }
.explore-tree-branch[open] > summary::after { transform: rotate(90deg); }
.explore-tree-leaf {
  border-left: 2px solid var(--line);
  margin: 6px 10px 6px 14px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.6;
}
.explore-tree-leaf:hover { background: var(--panel-alt); border-left-color: var(--accent); }
.explore-related-item {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 6px 0;
  cursor: pointer;
  font-size: 12px;
}
.explore-related-item:hover { border-color: var(--accent); background: var(--panel-alt); }
.save-select-all-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.save-select-all-row input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.save-select-all-row .field-label { margin-bottom: 0; font-size: 12px; }
.save-dashboard-list {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 320px; overflow-y: auto; margin-bottom: 10px;
}
.save-dashboard-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
}
.save-dashboard-row input[type="checkbox"] {
  accent-color: var(--accent); width: 15px; height: 15px; flex: 0 0 15px; margin-top: 9px;
}
.save-dash-fields { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.save-dash-title {
  width: 100%; background: var(--panel-alt); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); padding: 7px 10px; font-family: var(--sans); font-size: 13px; font-weight: 600;
}
.save-dash-summary {
  width: 100%; background: var(--panel-alt); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text-dim); padding: 7px 10px; font-family: var(--sans); font-size: 11.5px;
  resize: vertical; min-height: 32px;
}

/* 深入分析 modal：選整個圖表還是只看某一項 */
.scope-choice {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--panel-alt); border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 12px; margin-bottom: 12px;
}
.scope-option { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.scope-option input { accent-color: var(--accent); }

/* 編輯指標用的下拉選單 */
.modal-box select {
  width: 100%; background: var(--panel-alt); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); padding: 9px 12px; font-family: var(--sans); font-size: 16px;
}

/* ===== v4.17：多輪對話分析 Modal（連續追問）===== */
.analysis-chat-box { max-width: 520px; display: flex; flex-direction: column; }
.analysis-chat-log {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 360px; overflow-y: auto; margin-bottom: 12px;
  padding: 4px 2px;
}
.analysis-chat-msg { display: flex; }
.analysis-chat-msg-user { justify-content: flex-end; }
.analysis-chat-msg-assistant { justify-content: flex-start; }
.analysis-chat-bubble {
  max-width: 85%; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.analysis-chat-msg-user .analysis-chat-bubble { background: var(--accent); color: #ffffff; }
.analysis-chat-msg-assistant .analysis-chat-bubble {
  background: var(--panel-alt); color: var(--text); border: 1px solid var(--line);
}
.analysis-chat-loading { color: var(--text-dim); font-style: italic; }
.analysis-chat-assistant-col { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; max-width: 85%; }
.analysis-chat-assistant-col .analysis-chat-bubble { max-width: 100%; }
.analysis-chat-save-btn {
  font-size: 10.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-bright);
  background: transparent; color: var(--text-faint); cursor: pointer;
}
.analysis-chat-save-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.analysis-chat-save-btn:disabled { opacity: 0.7; cursor: default; }
.analysis-chat-steps {
  margin-top: 6px; font-size: 11px; color: var(--text-dim);
  background: rgba(0,0,0,0.15); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px;
  max-width: 85%;
}
.analysis-chat-steps summary { cursor: pointer; color: var(--accent); user-select: none; }
.analysis-chat-step { margin-top: 4px; font-family: var(--mono); word-break: break-all; }
.analysis-chat-inputrow { display: flex; gap: 8px; align-items: flex-end; }
.analysis-chat-suggestions { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.analysis-chat-inputrow textarea {
  flex: 1; background: var(--panel-alt); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); padding: 8px 10px; font-family: var(--sans); font-size: 14px; resize: vertical;
}
.analysis-chat-inputrow .btn { padding: 9px 16px; white-space: nowrap; }

/* v4.17：Cube 快照交叉驗證徽章——純提示性，不擋畫面，滑鼠停留可看兩邊數字（title attr） */
.cube-check-badge {
  display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 600;
  color: #d97706; background: rgba(217,119,6,0.12); border: 1px solid #d97706;
  border-radius: 10px; padding: 2px 8px; cursor: help; vertical-align: middle;
}

/* 指標/圖表標題列上的小工具按鈕（ⓘ / ✎ / 單位切換）統一間距與 hover 樣式 */
.kpi-title, .section-title { flex-wrap: wrap; }
.edit-metric-btn, .duplicate-metric-btn {
  border: none; background: none; color: var(--text-faint); cursor: pointer;
  font-size: 12px; padding: 1px 4px; border-radius: 3px;
}
.edit-metric-btn:hover, .duplicate-metric-btn:hover { background: var(--accent-soft); color: var(--accent); }
.delete-metric-btn {
  border: none; background: none; color: var(--text-faint); cursor: pointer;
  font-size: 12px; padding: 1px 4px; border-radius: 3px;
}
.delete-metric-btn:hover { background: #fde2e2; color: #c0392b; }

/* 卡片拖拉排序 */
.card[draggable="true"] { cursor: grab; }
.card.dragging { opacity: 0.4; }
.card.drag-over { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* 新增卡片：跟其他卡片一起排在 grid 裡的虛線佔位按鈕 */
.add-card-tile {
  display: flex; align-items: center; justify-content: center;
  min-height: 80px; border: 1.5px dashed var(--line-bright); border-radius: 8px;
  background: transparent; color: var(--text-faint); cursor: pointer;
  font-size: 13px; padding: 16px;
}
.add-card-tile:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.field-hint { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-faint); }

/* 上傳資料入口：確認畫面（AI 已理解這份資料）跟已上傳清單 */
.upload-preview {
  margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-alt);
  font-size: 13px;
}
.upload-preview-summary { font-weight: 600; margin-bottom: 8px; }
.upload-preview-cols { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.upload-preview-col { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.upload-preview-col .col-label { color: var(--text); }
.upload-preview-col .col-meta { color: var(--text-faint); }
.uploaded-list { display: flex; flex-direction: column; gap: 6px; }
.uploaded-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-alt);
}
.uploaded-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uploaded-item-meta { color: var(--text-faint); font-size: 11.5px; white-space: nowrap; }
.uploaded-item-delete { border: none; background: none; color: var(--text-faint); cursor: pointer; font-size: 12px; padding: 2px 5px; }
.uploaded-item-delete:hover { background: #fde2e2; color: #c0392b; border-radius: 3px; }

/* 卡片複合篩選條件：已加入的條件用可移除的 chip 列表呈現，下方是選欄位/選值/加入的操作區 */
.filter-conditions-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.filter-conditions-list:empty { margin-bottom: 0; }
.filter-condition-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 12.5px; line-height: 1.3; max-width: 100%;
}
.filter-condition-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-condition-chip-remove {
  border: none; background: rgba(0,0,0,0.08); color: inherit; cursor: pointer; border-radius: 50%;
  width: 18px; height: 18px; min-width: 18px; font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.filter-condition-chip-remove:hover { background: rgba(0,0,0,0.18); }
.filter-condition-picker { border: 1px dashed var(--line-bright); border-radius: 8px; padding: 10px; background: var(--panel-alt); }
.filter-condition-picker select { margin-bottom: 8px; }
.filter-condition-picker .field { margin-bottom: 8px; }
.filter-condition-picker #editMetricFilterAddBtn,
.filter-condition-picker #addMetricFilterAddBtn { width: 100%; }
.drag-handle {
  cursor: grab; touch-action: none; color: var(--text-faint); font-size: 13px;
  padding: 1px 3px; border-radius: 3px; user-select: none;
}
.drag-handle:hover { background: var(--accent-soft); color: var(--accent); }
.drag-handle:active { cursor: grabbing; }

/* ===== RWD ===== */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; padding: 16px 16px 48px; gap: 16px; }
  .console { position: static; } /* 手機上不做 sticky，避免摺疊後還佔住畫面上緣 */
  .saved-panel { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .topbar { padding: 12px 16px; flex-wrap: wrap; gap: 6px; }
  .brand-title { font-size: 13px; letter-spacing: 2px; }
  .brand-sub { font-size: 10px; }
  .clock { font-size: 11px; }
  .topbar-right { gap: 10px; }

  .console { padding: 16px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .kpi-value { font-size: 22px; }
  .section-grid { grid-template-columns: 1fr; }
  .section-card { padding: 14px; }

  .dash-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dash-header h1 { font-size: 17px; }
  .dash-header .btn { width: 100%; }

  .donut-wrap { flex-direction: column; align-items: flex-start; }
  .bar-trend { height: 110px; }

  .empty-state { padding: 60px 16px; }
}
@media (max-width: 400px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .console-actions .btn { font-size: 12.5px; padding: 9px 12px; }
}

/* =====================================================================
   v5 UI/UX 改版：簡單/專業模式、Header「我的」選單、首頁主流程、
   洞察優先結果頁、固定追問欄、手機版（≤720px）重排
   ===================================================================== */

/* ----- 簡單模式／專業模式 ----- */
body.mode-simple .pro-only,
body.mode-simple .pro-tool,
body.mode-simple .add-card-tile { display: none !important; }
body.mode-simple .card[draggable="true"] { cursor: default; }

.mode-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--panel-alt); }
.mode-btn {
  border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: 12px;
  padding: 5px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.mode-btn.active { background: var(--accent); color: #fff; font-weight: 600; }
.mode-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ----- Header「我的」選單：桌機橫排、手機收進下拉 ----- */
.topbar-right { position: relative; }
.user-menu { display: flex; align-items: center; gap: 16px; }
.user-menu-title { display: none; }
.user-menu-btn {
  display: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel); cursor: pointer; padding: 0; overflow: hidden; align-items: center; justify-content: center;
}
.user-menu-btn .member-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.user-menu-btn-fallback { font-size: 16px; }

/* ----- 首頁主流程 ----- */
.step-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); margin: 14px 0 8px; }
.step-label:first-child { margin-top: 0; }
.step-label-plain { font-weight: 600; color: var(--text-dim); font-size: 12.5px; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 700;
}
.step-optional { font-weight: 400; color: var(--text-faint); font-size: 12px; }
.ask-box textarea, .followup-inputrow textarea {
  width: 100%; background: var(--panel-alt); border: 1px solid var(--line); border-radius: 8px; color: var(--text);
  padding: 10px 12px; font-family: var(--sans); font-size: 16px; resize: vertical; transition: border-color 0.15s;
}
.ask-box textarea:focus, .followup-inputrow textarea:focus { outline: none; border-color: var(--accent); }
.ask-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ask-chip { font-size: 12px; }
.btn-cta { font-size: 15px; padding: 12px 16px; }

.recent-block { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.recent-list { display: flex; flex-direction: column; gap: 4px; }
.recent-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; text-align: left;
  border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 7px 8px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--text);
}
.recent-item:hover, .recent-item:focus-visible { background: var(--accent-soft); border-color: var(--accent-soft); outline: none; }
.recent-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-time { color: var(--text-faint); font-size: 11.5px; white-space: nowrap; }

.advanced-settings { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.advanced-settings > summary { cursor: pointer; font-size: 12.5px; color: var(--text-dim); user-select: none; }
.advanced-settings[open] > summary { margin-bottom: 10px; color: var(--text); }
.advanced-link { display: inline-block; margin: 8px 0; font-size: 12.5px; text-decoration: none; }

/* ----- 結果頁：標題列 ⋯ 進階工具選單 ----- */
.dash-menu-wrap { position: relative; }
.icon-btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--text-dim); border-radius: 8px;
  padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.dash-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 210px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,0.12);
  padding: 6px; display: flex; flex-direction: column;
}
.menu-item {
  text-align: left; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--text);
  padding: 9px 10px; border-radius: 6px; cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--accent-soft); color: var(--accent); outline: none; }

/* ----- (1) AI 找到的重點 ----- */
.insight-hero {
  background: linear-gradient(180deg, rgba(13,148,136,0.06), rgba(13,148,136,0) 70%), var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.insight-hero-label { font-size: 12px; color: var(--accent); font-weight: 700; letter-spacing: 0.5px; margin-bottom: 6px; }
.insight-headline { margin: 0 0 14px; font-size: 19px; line-height: 1.45; color: var(--text); }
.insight-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.insight-card {
  background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.insight-card.insight-positive { border-left-color: #2e9e5b; }
.insight-card.insight-warning { border-left-color: #c98a1a; background: #fffbf2; }
.insight-card-badge { align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--text-dim); background: var(--panel-alt); border-radius: 4px; padding: 1px 6px; }
.insight-positive .insight-card-badge { color: #217a45; background: #e8f6ee; }
.insight-warning .insight-card-badge { color: #8a5a00; background: #fff1d6; }
.insight-card-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); flex: 1; }
.insight-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.insight-action {
  border: 1px solid var(--line); background: var(--panel); color: var(--accent); border-radius: 999px;
  font: inherit; font-size: 12px; padding: 4px 10px; cursor: pointer;
}
.insight-action:hover, .insight-action:focus-visible { background: var(--accent-soft); border-color: var(--accent); outline: none; }
.coverage-note { margin-top: 12px; font-size: 12px; color: var(--text-dim); line-height: 1.6; white-space: pre-line; }

/* 查看證據：被引用的卡片閃一下 */
@keyframes evidence-flash { 0%, 100% { box-shadow: var(--shadow); } 30% { box-shadow: 0 0 0 3px var(--accent); } }
.card.evidence-flash { animation: evidence-flash 1.6s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .card.evidence-flash { animation: none; outline: 3px solid var(--accent); } }

/* ----- (2) 支持數字與圖表：卡片標題列 ----- */
.card-title-text { flex: 1; min-width: 0; }
.card-tools { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.pro-tool { display: inline-flex; align-items: center; gap: 2px; }
.card-more-btn { display: none; }
.more-charts-tile { display: none; }
.summary-details > summary { list-style: none; cursor: pointer; }
.summary-details > summary::-webkit-details-marker { display: none; }
.summary-toggle-hint { font-size: 11.5px; color: var(--text-faint); }
.summary-details[open] .summary-toggle-hint { display: none; }
.summary-details[open] > summary { margin-bottom: 8px; }
.summary-details #summaryRefreshBtn { margin-top: 8px; font-size: 12px; }
.top-label-row .legend-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* ----- (3) 固定追問欄 ----- */
.followup { margin-top: 20px; }
.followup-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.followup-title { font-size: 13px; font-weight: 600; color: var(--text); }
.followup-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.fu-exchange {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow);
}
.fu-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 4px; padding: 1px 6px; margin-right: 8px;
  vertical-align: 1px; background: var(--panel-alt); color: var(--text-dim);
}
.fu-finding { font-size: 12.5px; color: var(--text-dim); }
.fu-question { font-size: 13.5px; color: var(--text); font-weight: 600; }
.fu-question .fu-tag { background: rgba(91,141,239,0.12); color: #3558b8; }
.fu-answer { font-size: 13.5px; color: var(--text); line-height: 1.7; white-space: pre-wrap; padding-left: 12px; border-left: 3px solid var(--accent); }
.fu-answer .fu-tag { background: var(--accent-soft); color: var(--accent); }
.fu-loading { color: var(--text-faint); border-left-color: var(--line-bright); }
.fu-error { color: #8a5a00; border-left-color: #c98a1a; }
.fu-evidence summary { cursor: pointer; font-size: 12px; color: var(--text-dim); }
.fu-step { font-size: 12px; color: var(--text-dim); font-family: var(--mono); padding: 3px 0 3px 10px; overflow-wrap: anywhere; }
.fu-zero-warning { margin-top: 6px; padding: 6px 10px; font-size: 12px; color: #92400e; background: #fef3c7; border-left: 3px solid #d97706; border-radius: 4px; }
.fu-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.fu-actions .link-btn { font-size: 12px; }

.followup-dock {
  position: sticky; bottom: 0; z-index: 15;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; box-shadow: 0 -4px 16px rgba(15,23,42,0.08);
}
.followup-suggestions { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.followup-chip { white-space: nowrap; font-size: 12px; flex-shrink: 0; }
.followup-inputrow { display: flex; gap: 8px; align-items: flex-end; }
.followup-inputrow textarea { flex: 1; resize: none; min-height: 42px; max-height: 120px; }
.followup-meta { margin-top: 6px; font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.followup-meta select { font-size: 12px; padding: 3px 6px; }

/* ----- (4) 次要動作 ----- */
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }

/* ----- Insight Graph 手機版關係清單 ----- */
.insight-graph-canvas.as-list { height: auto; min-height: 0; resize: none; overflow: visible; border: 0; background: transparent; }
.insight-relation-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.insight-relation-item { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel); cursor: pointer; }
.insight-relation-item:hover { border-color: var(--accent); }
.relation-line { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 13px; }
.relation-node { font-weight: 600; color: var(--text); }
.relation-arrow { color: var(--text-dim); font-size: 12px; }
.relation-badge { display: inline-block; margin-top: 6px; font-size: 11px; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 1px 6px; }
.relation-badge.suggested { color: var(--warm); background: rgba(217,119,6,0.1); }

/* =====================================================================
   手機版（≤720px）
   ===================================================================== */
@media (max-width: 720px) {
  /* Header：只保留產品名稱＋「我的」按鈕 */
  .topbar { padding: 10px 16px; flex-wrap: nowrap; }
  .brand-sub { display: none; }
  .user-menu-btn { display: inline-flex; }
  .user-menu {
    display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(280px, calc(100vw - 32px));
    flex-direction: column; align-items: stretch; gap: 12px; padding: 14px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(15,23,42,0.16);
  }
  .user-menu.open { display: flex; }
  .user-menu-title { display: block; font-size: 12px; color: var(--text-faint); font-weight: 600; }
  .user-menu .mode-switch { align-self: stretch; }
  .user-menu .mode-btn { flex: 1; }
  .user-menu .member-widget { flex-wrap: wrap; }
  .user-menu .admin-link { font-size: 13px; }

  /* KPI：橫向滑動，不再又高又佔版面的直向堆疊 */
  .kpi-grid {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(44%, 1fr);
    overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; -webkit-overflow-scrolling: touch;
  }
  .kpi-grid > .card { scroll-snap-align: start; padding: 12px; }
  .kpi-grid .add-card-tile { display: none; }
  .kpi-value { font-size: 20px; }

  /* 卡片小圖示收進 ⋯ 選單 */
  .kpi-title, .section-title { position: relative; flex-wrap: nowrap; }
  .card-more-btn {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 28px; height: 24px; border: 0; background: transparent; color: var(--text-faint); font-size: 16px; border-radius: 4px; cursor: pointer;
  }
  .card-more-btn:hover, .card.tools-open .card-more-btn { background: var(--accent-soft); color: var(--accent); }
  .card-tools {
    display: none; position: absolute; right: 30px; top: -6px; z-index: 25; /* 展開在 ⋯ 左側同一列，避免被 KPI 橫向捲動容器裁切 */
    background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px;
    box-shadow: 0 6px 18px rgba(15,23,42,0.14); gap: 6px;
  }
  .card.tools-open .card-tools { display: inline-flex; }
  .card-tools .info, .card-tools .edit-metric-btn, .card-tools .duplicate-metric-btn, .card-tools .drag-handle { font-size: 15px; padding: 4px 6px; }

  /* 圖表：只顯示最相關的一張，其餘可展開 */
  .section-grid:not(.show-all) .section-card:not(.chart-primary) { display: none; }
  .section-grid:not(.show-all) .add-card-tile { display: none; }
  .more-charts-tile {
    display: block; width: 100%; border: 1px dashed var(--line-bright); background: var(--panel-alt); color: var(--accent);
    border-radius: 8px; padding: 12px; font: inherit; font-size: 13px; cursor: pointer;
  }

  /* 洞察區 */
  .insight-hero { padding: 14px; }
  .insight-headline { font-size: 16.5px; }
  .insight-cards { grid-template-columns: 1fr; gap: 10px; }

  /* 結果頁標題列 */
  .dash-header { flex-direction: row; align-items: flex-start; }
  .dash-header-titles { flex: 1; min-width: 0; }

  /* 追問欄貼齊畫面底部 */
  .followup-dock { border-radius: 12px 12px 0 0; margin: 0 -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .result-actions .btn { flex: 1 1 45%; }

  /* Insight Graph：不渲染網路圖，只顯示關係清單 */
  .insight-graph-desktop-only { display: none !important; }
}

/* ===== v5.1：高低表現特徵比較（移植自 Dawho 特徵出現率比較）===== */
#pcBackdrop .modal-box.pc-box { max-width: 980px; max-height: 88vh; overflow-y: auto; }
.pc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pc-head .modal-title { margin-bottom: 0; }
.pc-setup { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin-top: 4px; }
.pc-field { flex: 1 1 160px; min-width: 0; margin-bottom: 0; }
.pc-run { flex: 0 0 auto; }
.pc-run .btn { padding: 9px 18px; }
.pc-status { font-size: 12.5px; color: var(--text-dim); margin: 10px 0 0; min-height: 1em; }
.pc-status.err { color: var(--danger); }

.pc-thresholds {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.pc-threshold { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.pc-th-label { font-weight: 600; white-space: nowrap; }
.pc-th-unit { color: var(--text-dim); font-size: 12.5px; white-space: nowrap; }
.pc-threshold input[type="range"] { width: 130px; accent-color: var(--accent); }
.pc-num {
  width: 64px; padding: 5px 8px; border: 1px solid var(--line-bright); border-radius: 6px;
  font-size: 14px; color: var(--text); background: var(--panel); font-variant-numeric: tabular-nums;
}
.pc-help-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

.pc-auto {
  margin-top: 10px; padding: 8px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.6;
  background: var(--panel-alt); border: 1px solid var(--line); color: var(--text-dim);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
}
.pc-auto strong { color: var(--text); }
.pc-auto.is-manual { border-color: #fcd9a8; background: #fffaf2; }

.pc-help {
  margin-top: 10px; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel-alt); font-size: 13px; color: var(--text); line-height: 1.7;
}
.pc-help h4 { margin: 0 0 8px; font-size: 13.5px; }
.pc-help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.pc-help-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.pc-help-card p { margin: 4px 0; }
.pc-help .ok { color: #15803d; font-weight: 600; }
.pc-help .no { color: var(--danger); font-weight: 600; }
.pc-help ul { margin: 6px 0 0; padding-left: 18px; }
.pc-help .pc-help-foot { color: var(--text-dim); font-size: 12px; margin-top: 8px; }

.pc-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.pc-group {
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel);
}
.pc-group-name { font-size: 12px; color: var(--text-dim); }
.pc-group-count { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.pc-group-range { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pc-group.top { border-top: 3px solid var(--accent); }
.pc-group.bottom { border-top: 3px solid var(--warm); }
.pc-warnings { margin-top: 8px; }
.pc-warning { font-size: 12.5px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 6px 10px; margin-top: 6px; }

.pc-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 14px; }
.pc-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.pc-table th {
  text-align: left; font-weight: 600; color: var(--text-dim); font-size: 12px;
  padding: 8px 10px; border-bottom: 1px solid var(--line-bright); white-space: nowrap;
}
.pc-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: middle; }
.pc-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-table .ctr { text-align: center; white-space: nowrap; }
.pc-table .cnt { color: var(--text-faint); font-size: 11.5px; margin-left: 4px; }
.pc-table td.pc-top { font-weight: 700; }
.pc-table tr.is-weak td { color: var(--text-faint); }
.pc-table tr.is-weak td.pc-top { font-weight: 600; }
.pc-diff-yes { color: #15803d; font-weight: 600; }
.pc-diff-no { color: var(--warm); font-weight: 600; }
.pc-conf { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; }
.pc-conf.high { background: #dcfce7; color: #166534; }
.pc-conf.medium { background: #fef3c7; color: #92400e; }
.pc-conf.low { background: #f1f5f9; color: #64748b; }
.pc-empty { text-align: center; color: var(--text-dim); padding: 18px 10px !important; }
.pc-legend { font-size: 12px; color: var(--text-dim); line-height: 1.7; margin-top: 8px; }

.pc-narrative { margin-top: 14px; }
.pc-narrative-note { font-weight: 400; color: var(--text-faint); font-size: 11.5px; }
#pcNarrative p { margin: 0 0 6px; font-size: 13px; color: var(--text); line-height: 1.75; }
#pcNarrative p:last-child { color: var(--text-dim); font-size: 12.5px; margin-bottom: 0; }

.pc-samples { margin-top: 12px; font-size: 13px; }
.pc-samples summary { cursor: pointer; color: var(--accent); }
.pc-samples-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.pc-samples-grid h5 { margin: 0 0 4px; font-size: 12.5px; color: var(--text-dim); }
.pc-samples-grid ol { margin: 0; padding-left: 20px; }
.pc-samples-grid li { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  #pcBackdrop { padding: 0; }
  #pcBackdrop .modal-box.pc-box { max-height: 100vh; height: 100%; border-radius: 0; padding: 16px; }
  .pc-field { flex-basis: 100%; }
  .pc-run, .pc-run .btn { width: 100%; }
  .pc-threshold { flex-wrap: wrap; }
  .pc-threshold input[type="range"] { flex: 1 1 120px; }
  .pc-groups { grid-template-columns: 1fr; }
  .pc-samples-grid { grid-template-columns: 1fr; }
}

/* v5.2：錯誤訊息的技術細節（專業模式才顯示） */
.error-banner-details { display: block; margin-top: 8px; font-size: 12px; font-weight: 400; }
.error-banner-details summary { cursor: pointer; opacity: 0.8; }
.error-banner-details ul { margin: 6px 0 0; padding-left: 18px; max-height: 180px; overflow-y: auto; }
.error-banner-details li { margin-bottom: 4px; word-break: break-word; }

/* v5.2：簡單／專業模式切換從「我的」選單搬到 header 上，手機也永遠看得到 */
.topbar-mode { flex-shrink: 0; }
@media (max-width: 720px) {
  .topbar-right { gap: 8px; }
  .topbar-mode .mode-btn { padding: 5px 9px; font-size: 11.5px; }
  .brand-title { letter-spacing: 1px; }
}
@media (max-width: 380px) {
  .brand-title { font-size: 12px; letter-spacing: 0.5px; }
  .brand-dot { display: none; }
}

/* v5.2：首頁「共同點」洞察卡、比較結果釘選列 */
.insight-card.insight-contrast { border-left-color: #6d5bd0; background: #faf8ff; }
.insight-contrast .insight-card-badge { color: #4c3aa8; background: #ece8ff; }
#pcResult[hidden] ~ .pc-pin-row { display: none; }
.pc-pin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.pc-pin-row select { flex: 1 1 200px; min-width: 0; width: auto; }
.pc-pin-status { flex-basis: 100%; font-size: 12.5px; color: var(--text-dim); }
.pc-pin-status.err { color: var(--danger); }

/* v5.2：index.html 從來沒有載入 admin.css，「維度差異洞察」視窗的表格（.admin-table／.table-scroll）
   和各處的 .note 說明文字其實都沒有樣式。只把前台實際用到的幾條搬過來，不整份載入 admin.css
   （避免後台版面規則污染前台）；數字欄位不用等寬字，跟前台其他表格一致。 */
.note { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }
.note.err { color: var(--danger); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.admin-table th {
  text-align: left; color: var(--text-dim); font-weight: 600; font-size: 12px;
  padding: 8px 10px; border-bottom: 1px solid var(--line-bright); white-space: nowrap; background: var(--panel-alt);
}
.admin-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: top; line-height: 1.55; }
.admin-table tr:hover td { background: var(--accent-soft); }
.compare-matrix-table td:first-child { font-weight: 600; white-space: nowrap; }
@media (max-width: 720px) {
  .compare-result-box .admin-table { min-width: 640px; }
}

/* v5.2：挑選卡片存成我的儀表板 */
body.pick-mode #insightCards .insight-card,
body.pick-mode #dashSections .card[data-drag-key] { position: relative; cursor: pointer; outline: 2px dashed var(--line-bright); outline-offset: 2px; }
body.pick-mode #insightCards .insight-card.picked,
body.pick-mode #dashSections .card[data-drag-key].picked { outline: 2px solid var(--accent); background-color: #f2fbf9; }
body.pick-mode .card-tools, body.pick-mode .card-more-btn, body.pick-mode .insight-card-actions { visibility: hidden; }
body.pick-mode #insightCards .insight-card .insight-card-badge { margin-left: 30px; }
.pick-box {
  position: absolute; top: 10px; left: 10px; z-index: 5; width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--line-bright); background: var(--panel); display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(15,23,42,0.12);
}
body.pick-mode #dashSections .card[data-drag-key] .kpi-title,
body.pick-mode #dashSections .card[data-drag-key] .section-title { padding-left: 30px; }
.picked > .pick-box { background: var(--accent); border-color: var(--accent); }
.picked > .pick-box::after { content: '✓'; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; }
.pick-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 250;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  width: min(640px, calc(100vw - 24px)); padding: 10px 14px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line-bright); box-shadow: 0 12px 32px rgba(15,23,42,0.18);
}
.pick-bar-count { font-weight: 700; font-size: 14px; }
.pick-bar-spacer { flex: 1; }
@media (max-width: 720px) {
  .pick-bar { bottom: calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  .pick-bar .btn { flex: 1 1 40%; }
  .pick-bar-spacer { display: none; }
  body.pick-mode .followup-dock { display: none; }
}

/* ===== v5.4（APEX v1.8）：深入分析面板——桌面右側、手機全頁；戰情室留在原處 ===== */
.metric-info-apex-row { display: flex; gap: 6px; margin-top: 6px; }
.metric-info-apex-row .apex-go { flex: 1; }
.apex-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 48vw); z-index: 1200;
  background: var(--panel); border-left: 1px solid var(--line-bright);
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.14); display: flex; flex-direction: column;
}
.apex-panel[hidden] { display: none; }
.apex-panel-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.apex-panel-title { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apex-panel-back { display: none; background: none; border: none; color: var(--accent); font-size: 14px; font-weight: 600; cursor: pointer; padding: 4px 0; font-family: var(--sans); }
.apex-panel-expand { background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--text-dim); font-size: 12.5px; padding: 4px 8px; cursor: pointer; font-family: var(--sans); white-space: nowrap; }
.apex-panel-expand:hover { color: var(--accent); border-color: var(--accent); }
.apex-panel-x { background: none; border: none; font-size: 18px; line-height: 1; color: var(--text-dim); cursor: pointer; padding: 4px 6px; }
.apex-frame { flex: 1; width: 100%; border: 0; background: var(--bg); }
@media (max-width: 760px) {
  .apex-panel { width: 100vw; border-left: 0; box-shadow: none; }
  .apex-panel-back { display: inline-block; }
  .apex-panel-title { font-size: 13px; color: var(--text-dim); font-weight: 600; }
  .apex-panel-x { display: none; }
  body.apex-panel-lock { position: fixed; left: 0; right: 0; overflow: hidden; }
}

/* v5.4（APEX v1.8）：開始探索——資料概況、次要入口、沿用說明 */
.data-brief { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--panel-alt); font-size: 13px; line-height: 1.7; }
.brief-title { font-weight: 700; font-size: 13.5px; }
.brief-text { margin: 2px 0 0; color: var(--text); }
.brief-loading { color: var(--text-faint); font-size: 12.5px; }
.brief-confirm { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-bright); }
.brief-q { font-weight: 600; }
.brief-why { font-size: 12px; color: var(--text-dim); margin: 2px 0 6px; }
.brief-opts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.secondary-entry { margin-top: 8px; font-size: 12.5px; color: var(--text-dim); }
.secondary-entry .link-btn { font-size: 12.5px; padding: 0 2px; }
.reuse-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--accent-soft); font-size: 13px; line-height: 1.6; }
.reuse-notice[hidden] { display: none; }
.reuse-notice .rn-text { flex: 1; min-width: 200px; }
.reuse-notice .link-btn { font-size: 12.5px; }
.reuse-notice .rn-x { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 14px; }

/* ===== v1.11：已儲存的分析併入左側控制台，版面改為兩欄 ===== */
.layout { grid-template-columns: 340px 1fr; }
@media (min-width: 901px) {
  .layout.console-collapsed, .layout.console-collapsed.saved-collapsed { grid-template-columns: 52px 1fr; }
}
@media (min-width: 1181px) {
  .layout.saved-collapsed { grid-template-columns: 340px 1fr; }
}
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }
.saved-panel.saved-inline {
  position: static; max-height: none; overflow: visible; box-shadow: none; background: transparent;
  border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 12px 0 0; margin-top: 12px;
}
.saved-panel.saved-inline .saved-panel-head { margin-bottom: 8px; }
.saved-panel.saved-inline.collapsed { padding: 12px 0 0; }
.saved-panel.saved-inline.collapsed .saved-panel-head { flex-direction: row; margin-bottom: 0; }
.saved-panel.saved-inline.collapsed .saved-panel-head h2 { writing-mode: horizontal-tb; letter-spacing: 0.3px; font-size: 13.5px; }
.saved-panel.saved-inline.collapsed #refreshSavedBtn { display: inline; }
.saved-panel.saved-inline.collapsed .saved-panel-subhead { display: none; }
details.recent-block > summary { cursor: pointer; list-style: none; }
details.recent-block > summary::-webkit-details-marker { display: none; }
details.recent-block > summary::before { content: '▸ '; color: var(--text-faint); font-size: 11px; }
details.recent-block[open] > summary::before { content: '▾ '; }

/* v1.11：首頁兩顆主要入口按鈕 */
.entry-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.entry-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.entry-btn .btn-label { font-size: 15px; font-weight: 700; }
.entry-btn .btn-hint { font-size: 11.5px; font-weight: 400; opacity: 0.85; }
#apexBtn.entry-btn { border-width: 1.5px; border-color: var(--accent); color: var(--accent); background: var(--panel); }
#apexBtn.entry-btn:hover:not(:disabled) { background: var(--accent-soft); }
/* v1.20：AI 做報表入口 */
#studioBtn.entry-btn { border: 1.5px dashed #7c3aed; color: #6d28d9; background: var(--panel); }
#studioBtn.entry-btn:hover:not(:disabled) { background: rgba(124, 58, 237, 0.08); }

/* ===== v1.11：新圖表類型（ECharts）、切換圖表類型、卡片上限提示 ===== */
.echart-wrap { position: relative; width: 100%; }
.echart { width: 100%; }
.echart-points { position: absolute; width: 0; height: 0; overflow: visible; }
/* 透明的資料點元素：點圖上的點時被移到滑鼠位置並觸發 click，沿用既有的「看數字／深入分析」流程 */
.echart-points > span { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.echart-note { font-size: 11.5px; color: var(--text-dim); margin: 0 0 4px; }
.kpi-spark .echart-wrap, .kpi-target .echart-wrap { margin-top: 4px; }
.limit-tile { cursor: default; color: var(--text-faint); background: var(--panel-alt); border-style: dashed; }
.limit-tile:hover { border-color: var(--line-bright); color: var(--text-faint); background: var(--panel-alt); }
.switch-type-btn { border: 0; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 14px; padding: 0 4px; line-height: 1; }
.switch-type-btn:hover { color: var(--accent); }
.switch-type-menu {
  position: absolute; z-index: 60; min-width: 190px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(15,23,42,0.16); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.switch-type-title { font-size: 11.5px; color: var(--text-faint); padding: 4px 8px; }
.switch-type-opt { text-align: left; border: 0; background: transparent; padding: 7px 8px; border-radius: 6px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.switch-type-opt:hover { background: var(--accent-soft); color: var(--accent); }
.switch-type-opt.current { color: var(--accent); font-weight: 600; }

/* ===== v1.11：圖表統計標籤 ===== */
.stat-badge {
  display: inline-flex; align-items: center; gap: 4px; margin: -4px 0 8px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-alt); color: var(--text-dim); font: inherit; font-size: 11.5px; cursor: pointer;
}
.stat-badge:hover { border-color: var(--accent); }
.stat-badge.stat-high { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.stat-badge.stat-medium { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.stat-badge.stat-low { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.section-compare-btn { border: 0; background: transparent; cursor: pointer; font-size: 13px; padding: 0 4px; opacity: 0.7; }
.section-compare-btn:hover { opacity: 1; }
.stat-detail {
  position: absolute; z-index: 70; width: min(360px, calc(100vw - 16px)); background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(15,23,42,0.18); padding: 12px 14px; font-size: 13px; line-height: 1.6;
}
.stat-detail-title { font-weight: 700; margin-bottom: 6px; }
.stat-detail ul { margin: 0 0 8px; padding-left: 18px; }
.stat-detail-note { font-size: 11.5px; color: var(--text-faint); margin-bottom: 8px; }

.saved-vis { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 400; border: 1px solid #bfdbfe; color: #1d4ed8; background: #eff6ff; vertical-align: middle; }
.saved-vis.shared { border-color: #a7f3d0; color: #047857; background: #ecfdf5; }

/* ===== v1.13 超大表分段產出 ===== */
.progressive-bar { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 13px; color: var(--text); }
.progressive-bar .pb-track { height: 6px; border-radius: 999px; background: var(--panel-alt); margin-top: 8px; overflow: hidden; }
.progressive-bar .pb-fill { height: 100%; background: var(--accent); transition: width .4s ease; }
.card-pending { opacity: .9; }
.pending-body { display: flex; align-items: center; gap: 8px; min-height: 70px; color: var(--text-dim); font-size: 12.5px; }
.section-card.card-pending .pending-body { min-height: 180px; justify-content: center; }
.pending-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-bright); border-top-color: var(--accent); animation: t2dspin 0.9s linear infinite; }
.pending-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-bright); }
@keyframes t2dspin { to { transform: rotate(360deg); } }
.retry-card-btn { margin-top: 8px; font-size: 12px; padding: 4px 10px; }
/* v1.15 終止查詢 */
.loading-cancel { margin-top: 14px; }
.progressive-bar .pb-cancel { float: right; font-size: 12px; padding: 3px 10px; margin-left: 10px; }

/* ===== v1.16 寬表模式：選擇分析欄位 ===== */
.column-picker { margin-top: 12px; }
.cp-section { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin-bottom: 10px; overflow: hidden; }
.cp-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; font-size: 13px; color: var(--text); }
.cp-head:hover { background: var(--panel-alt); }
.cp-step { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; }
.cp-sum { color: var(--text-dim); font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-badge { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(217,119,6,.12); color: var(--warm); font-weight: 600; }
.cp-caret { color: var(--text-dim); }
.cp-tip { margin: 0 12px 6px; padding: 7px 10px; border-radius: 8px; background: rgba(217,119,6,.08); color: var(--text); font-size: 12px; line-height: 1.6; }
.cp-note { margin: 0 12px 6px; color: var(--text-dim); font-size: 12px; }
.cp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 12px 6px; font-size: 12px; }
.cp-search { flex: 1; min-width: 140px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-alt); color: var(--text); font-size: 13px; }
.cp-chip { border: 1px solid var(--line); background: var(--panel); color: var(--text-dim); border-radius: 999px; padding: 2px 9px; font-size: 12px; cursor: pointer; }
.cp-chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.cp-saved { color: var(--accent); }
.cp-warn { color: var(--warm); }
.cp-list { max-height: 300px; overflow-y: auto; padding: 4px 8px 10px; display: grid; grid-template-columns: 1fr; gap: 2px; }
.cp-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.cp-item:hover { background: var(--panel-alt); }
.cp-item.on { background: var(--accent-soft); }
.cp-name { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-code { color: var(--text-faint); font-family: var(--mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.cp-kind { margin-left: auto; font-size: 10.5px; padding: 0 6px; border-radius: 4px; background: var(--panel-alt); color: var(--text-dim); flex: none; }
.cp-kind.k-time { color: #7c3aed; } .cp-kind.k-numeric { color: var(--accent); } .cp-kind.k-text { color: var(--warm); }
.cp-loading { color: var(--text-dim); font-size: 12px; padding: 6px 0; }
.cp-item { justify-content: flex-start; text-align: left; }
.cp-item input[type="checkbox"] { width: auto; min-width: 0; flex: none; margin: 0; padding: 0; height: auto; }
.cp-item .cp-name { flex: 1 1 auto; min-width: 0; text-align: left; }
.cp-item .cp-code { flex: 0 1 auto; max-width: 40%; }
.cp-search { width: 100%; }
.cp-allbox { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text); cursor: pointer; }
.cp-allbox input { width: auto; margin: 0; }
.cp-tools .btn-sm { padding: 2px 10px; font-size: 12px; }

/* ===== v1.17 篩選資料（WHERE 標籤） ===== */
.cp-filters { margin: 4px 12px 8px; padding: 8px 10px; border: 1px dashed var(--line-bright); border-radius: 8px; background: var(--panel-alt); }
.cp-ftitle { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--text); }
.cp-fsub { font-size: 11.5px; color: var(--text-dim); }
.cp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.cp-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; border: 1px solid var(--accent); max-width: 100%; }
.cp-tag button { border: none; background: none; color: inherit; cursor: pointer; font-size: 11px; padding: 0 4px; }
.cp-join { border: 1px solid var(--line-bright); background: var(--panel); border-radius: 6px; font-size: 11px; padding: 1px 7px; cursor: pointer; font-weight: 600; }
.cp-join.and { color: var(--accent); }
.cp-join.or { color: var(--warm); border-color: var(--warm); }
.cp-fempty { font-size: 12px; color: var(--text-faint); }
.cp-fadd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cp-fadd select, .cp-fadd input { padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 12.5px; min-width: 0; width: auto; }
.cp-ffield { max-width: 100%; flex: 1 1 140px; }
.cp-fval { flex: 1 1 70px; }
.cp-fval-wide { flex: 2 1 140px; }
.cp-fpreview { margin-top: 8px; font-size: 12px; color: var(--text-dim); word-break: break-all; }
.cp-fpreview code { background: var(--panel); padding: 2px 6px; border-radius: 4px; color: var(--text); }
.cp-fcount { margin-left: 6px; color: var(--accent); }
.cp-badge-f { background: var(--accent-soft); color: var(--accent); }
.dash-filter-badge { font-size: 12px; color: var(--accent); margin-top: 2px; }

/* v1.17.1：規則式重點標籤、目標達成說明 */
.insight-source-rule { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; vertical-align: middle; background: var(--line, #e5e7eb); color: var(--text-dim, #6b7280); cursor: help; }
.kpi-target-caption { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }

/* v1.18.3：重點區的重新找重點按鈕與過時提示 */
.insight-hero-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.insight-refresh-btn { font-size: 12px; padding: 2px 10px; }
.insight-stale { margin: 0 0 10px; padding: 6px 10px; border-radius: 8px; font-size: 13px; background: #fff7e6; color: #92400e; border: 1px solid #fcd9a6; }
.insight-stale .link-btn { margin-left: 6px; font-weight: 600; }

/* v1.19：依圖表類型的欄位槽位 */
.slot-box { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px dashed var(--line, #d1d5db); border-radius: 10px; }
.slot-box .slot-field { margin-bottom: 0; }
.slot-row { display: flex; gap: 6px; }
.slot-row select[data-slot] { flex: 1; min-width: 0; }
.slot-row .slot-agg { width: 90px; flex: none; }
.slot-req { color: #dc2626; }
.slot-box [data-slot-swap] { align-self: flex-start; }