/* === 10-base.css — 配色 token(--accent cyan/--money 金)+body/container/.mb-stage/.mb-navbar/.mb-card 共用骨架 === 保序拆分自 styles.css(3753 行 > 2500 行鐵則)；cascade 順序 = 檔名數字序，index.html 依序載入 */
:root {
  /* 配色 C：cyan 為主（UI），金色只給「錢」語意（gil / 最便宜 / HQ）。
     Phase 1 翻基調；各 view 的金幣語意於 Phase 2 改用 --money 套回。 */
  --accent: var(--color-accent-cyan, #4ec9d0);
  --money: var(--color-accent-gold, #e6c068);
  --money-soft: var(--color-accent-gold-soft, rgba(230, 192, 104, 0.18));
  /* （2026-06-10 E 清理：舊 --tool-accent / --nq-accent alias 已全數改寫為 --accent，alias 移除） */
}

* { box-sizing: border-box; }
/* html font-size: default 16px — 2026-05-13 改用 portal --fs-* 統一字級 token */
html, body { margin: 0; padding: 0; }
/* 預留捲軸槽 — 長頁(有捲軸)/短頁(無捲軸)切換時置中容器不再左右飄移 */
html { scrollbar-gutter: stable; }

/* Body: portal CLAUDE.md 鐵則 #2 公式 — 3 層 stack（鑽石壓印 + CRT scanline + radial 底色）
   先寫 fallback 純色背景避免 token 還沒載入時白屏；多層 background 用逗號分隔，上層先疊。 */
body {
  font-family: var(--font-sans, "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif);
  background:
    var(--pattern-overlay, none),
    var(--pattern-scanline, none),
    var(--gradient-body, linear-gradient(180deg, #0a0e18 0%, #131826 50%, #0a0e18 100%));
  color: var(--color-text, #f5f5f5);   /* 內文預設亮色（對齊設計系統；次要文字才用 muted） */
  font-variant-numeric: tabular-nums;  /* 等寬數字 — 全站價格/數量逐位對齊（市場工具掃讀核心） */
  line-height: 1.6;
  /* CLS：同源預留 portal fixed navbar 的 64px。portal header.css 亦有 body{padding-top:64px!important}，
     但它跨網域載入較慢 → 未預留時頁面先以 0 padding paint、header.css 一到才下推 64px（＝Cloudflare
     field data 看到的 html>body 位移）。這裡同源提早預留同值，steady-state 完全不變、消跨域 race。 */
  padding-top: 64px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* margin-top: -14px → 吃 14px breathing（portal 預留 16px），留 2px gap 給 search-bar 跟 navbar */
.container { max-width: var(--container-wide, 1600px); margin: 0 auto; padding: 0 var(--space-4, 1rem) var(--space-4, 1rem); }  /* 1800→1600：內容更聚中（portal --container-wide token） */

/* 細卷軸：所有 overflow 容器（含左右 sidebar 即時 scroll）統一風格，避免亮白默認 scrollbar */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent, #4ec9d0) 25%, transparent) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent, #4ec9d0) 25%, transparent);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent, #4ec9d0) 45%, transparent); }

/* ═══ Phase 1 骨架：大背景 stage + 兩層導航 + 共用模塊卡片（配色 C） ═══ */
.mb-stage {
  background: linear-gradient(180deg, rgba(18, 24, 38, 0.6), rgba(11, 15, 24, 0.66));
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-card-hover, 0 8px 20px rgba(0, 0, 0, 0.4));
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem) var(--space-5, 1.5rem);
}
/* 一行分組導航：分組標籤（可點 → 跳該組第一個功能）+ 攤平功能 tab（長方形 R 角，無 pill） */
.mb-navbar {
  display: flex; align-items: center; gap: var(--space-3, 0.75rem); flex-wrap: wrap;
  padding-bottom: var(--space-3, 0.75rem); border-bottom: 1px solid var(--color-border, #2f3650);
  /* CLS：預留單列導航高度。#mb-nav 初始 HTML 是空的、app.js route() 才填（首訪還在 ~1.2MB
     索引 fetch 之後）→ 空(~13px)→滿(~48px) 會下推整頁。46px 從首次 paint 就預留（border-box 含
     padding+border），略低於實際單列高(≥47.8px @1920) → 內容永遠填滿、不留空隙，只消掉跳動。 */
  min-height: 46px;
}
.mb-navgroup { display: flex; align-items: center; gap: var(--space-2, 0.5rem); }
.mb-grouplabel {
  font-family: var(--font-mono, monospace); font-size: var(--fs-xs, 0.6875rem); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-text-muted, #9aa3b8); background: none; border: 0;
  padding: 2px; cursor: pointer; opacity: 0.85; transition: color var(--transition-fast, 0.15s ease);
}
.mb-grouplabel:hover { color: var(--accent); opacity: 1; }
.mb-fn {
  padding: 6px 13px; border-radius: var(--radius-sm, 6px); border: 1px solid var(--color-border, #2f3650);
  background: var(--color-bg, #1a1f2e); color: var(--color-text-muted, #9aa3b8);
  font-size: var(--fs-small, 0.8125rem); text-decoration: none; white-space: nowrap;
  transition: color var(--transition-fast, 0.15s ease), border-color var(--transition-fast, 0.15s ease), background var(--transition-fast, 0.15s ease);
}
.mb-fn:hover { color: var(--color-text, #f5f5f5); border-color: color-mix(in srgb, var(--accent) 40%, var(--color-border, #2f3650)); }
.mb-fn.active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: var(--accent); color: var(--accent); font-weight: var(--fw-semibold, 600);
}
/* 功能 tab 內 (N) 數量徽章 — app.js refresh*Badge() 回填，空清單留白 */
.mb-fn-badge { font-family: var(--font-mono, monospace); font-size: var(--fs-xs, 0.6875rem); opacity: 0.85; margin-left: 4px; }
.mb-vsep { width: 1px; align-self: stretch; min-height: 24px; background: var(--color-border, #2f3650); margin: 0 var(--space-1, 0.25rem); }
/* 共用模塊卡片（Phase 2 各 view 套用） */
.mb-card {
  background: var(--gradient-tablet, linear-gradient(180deg, rgba(35, 42, 61, 0.92), rgba(19, 24, 38, 0.95)));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--color-border, #2f3650));
  border-radius: var(--radius-md, 8px); box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.25));
  padding: var(--space-4, 1rem); margin-bottom: var(--space-3, 0.75rem);
}
/* 搜尋零結果空狀態 */
.mb-empty {
  grid-column: 1 / -1; text-align: center; padding: var(--space-7, 2.5rem) var(--space-4, 1rem);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3, 0.75rem);
}
/* 初始「提示輸入」引導狀態（未輸入任何條件；≠「查無符合」）— 引導視線到搜尋框 */
.mb-empty--prompt .mb-prompt-icon { font-size: var(--fs-big, 2rem); margin: 0; line-height: 1; opacity: .85; }
.mb-empty--prompt p { margin: 0; }
/* 搜尋列 — nav 下獨立一列（舊 frosted/sticky/金框 .search-bar 已於 2026-06-10 E 清理刪除） */
.mb-stage .search-bar { display: flex; margin: var(--space-4, 1rem) 0 var(--space-3, 0.75rem); }
.mb-stage .search-bar input {
  flex: 1; min-width: 180px;
  background: var(--color-bg, #1a1f2e);
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-sm, 6px);
  height: 38px; padding: 0 var(--space-3, 0.75rem);
  color: var(--color-text, #f5f5f5);
  font-family: inherit;  /* input 預設不繼承字體，明示跟回 body */
}
.mb-stage .search-bar input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--color-accent-cyan-soft, rgba(78, 201, 208, 0.18));
}

/* ─── 共用對話框（modules/dialog.js）— codex-modal 之上的小補強 ─── */
.mb-dialog-msg { margin: 0; white-space: pre-line; }  /* 訊息含 \n 換行（沿用原生 prompt 文案） */
.mb-dialog .codex-input { width: 100%; margin-top: var(--space-3, 0.75rem); }

/* ─── 深色內嵌面板 — 卡片內的清單/表格區再降一階底色，加強內容對比 ─── */
.mb-inset {
  background: rgba(8, 12, 20, 0.45);
  border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--color-border, #2f3650));
  border-radius: var(--radius-sm, 6px);
}

/* ─── 載入骨架（modules/loading.js）— shimmer 條暗示內容形狀 ─── */
.mb-loading { display: grid; gap: var(--space-3, 0.75rem); padding: var(--space-5, 1.5rem) 0; }
.mb-loading .codex-skeleton:nth-child(1) { width: 38%; min-height: 30px; }
.mb-loading .codex-skeleton:nth-child(2) { width: 100%; min-height: 38px; }
.mb-loading .codex-skeleton:nth-child(3) { width: 62%; min-height: 96px; }
.mb-loading .loading { margin: 0; }

/* ─── 返回連結 — 標題列最左的無框麵包屑（不佔獨立一行；框版 user 反映醜，去框） ─── */
.mb-back {
  display: inline-flex; align-items: center;
  flex: 0 0 auto; align-self: center;
  color: var(--color-text-muted, #9aa3b8);
  font-weight: 600;  /* 2026-06-12 灰字準則：導航必讀加粗 */
  font-size: var(--fs-small, 0.8125rem);
  text-decoration: none; white-space: nowrap;
  margin-right: var(--space-1, 0.25rem);
  transition: color var(--transition-fast, .15s ease);
}
.mb-back:hover { color: var(--accent); }

/* ─── a11y A5：尊重系統「減少動態效果」— 前庭敏感使用者關閉動畫/轉場/捲動平滑 ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}