/* style-base.css · 设计令牌/暗色/基础/header/模块TAB（阶段五拆分·从 style.css 切出） */
/* ============================================================
   WB-BI看板 · Kimi 现代极简重构
   设计令牌 + 亮暗双主题 + 12列网格布局 + 组件
   原则：id 一个不改；新增结构只用 class；不动 JS 数据逻辑
   ============================================================ */

/* ---------- 设计令牌（浅色 = 默认 Kimi 本味） ---------- */
:root {
  /* 颜色 */
  --bg:            #f6f7f9;
  --surface:       #ffffff;
  --surface-2:     #f0f1f4;
  --surface-hover: #eceef1;
  --border:        #e6e8ec;
  --border-strong: #d3d7de;
  --text-1:        #1a1d21;
  --text-2:        #5b6470;
  --text-3:        #9aa3ae;
  --accent:        #2f6bff;
  --accent-soft:   #e8efff;
  --up:            #e05a4d;   /* 涨·低饱和红 */
  --up-soft:       #fdecea;
  --down:          #1fa87a;   /* 跌·低饱和绿 */
  --down-soft:     #e6f6f0;
  --warn:          #d9971f;
  --warn-soft:     #fbf3e2;
  --danger:        #d6392c;
  --purple:        #8b5cf6;
  /* 字阶 */
  --fs-hero: 26px;
  --fs-h2:   15px;
  --fs-body: 13px;
  --fs-sm:   12px;
  --fs-xs:   11px;
  /* 间距 / 圆角 / 阴影 */
  --gap:    16px;
  --pad:    16px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(20,24,30,.05);
  --shadow-md: 0 4px 16px rgba(20,24,30,.08);
  --chart-grid: #eef0f3;   /* ECharts 细网格线 */
  --chart-h:   320px;
  --chart-h-lg: 420px;
}

/* ---------- 暗色主题（只换变量值） ---------- */
[data-theme="dark"] {
  --bg:            #0e1013;
  --surface:       #171a1f;
  --surface-2:     #1e2229;
  --surface-hover: #242932;
  --border:        #262b33;
  --border-strong: #353c47;
  --text-1:        #e8eaee;
  --text-2:        #a4adb9;
  --text-3:        #6b7480;
  --accent:        #4d84ff;
  --accent-soft:   #1c2a4a;
  --up:            #f0705f;
  --up-soft:       #3a201d;
  --down:          #2fbd8f;
  --down-soft:     #16302a;
  --warn:          #e5ab3c;
  --warn-soft:     #352a15;
  --danger:        #ef5348;
  --purple:        #a78bfa;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.4);
  --chart-grid: #23272e;
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text-1);
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  transition: background .2s, color .2s;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 顶部 header（含预留 #header-modules） ---------- */
header {
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px; height: 56px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
header h1 {
  font-size: 17px; margin: 0; color: var(--text-1);
  font-weight: 700; letter-spacing: .2px; white-space: nowrap;
}
header h1 .logo-dot { color: var(--accent); }
.badge { padding: 3px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; }
.badge-loading { background: var(--warn-soft); color: var(--warn); }
.badge-ok { background: var(--down-soft); color: var(--down); }
.badge-err { background: var(--up-soft); color: var(--up); }
.freshness { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; }
#header-modules {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  /* 预留扩展区：未来模块 append 到这里 */
}
#theme-toggle {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); width: 34px; height: 34px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
#theme-toggle:hover { background: var(--surface-hover); color: var(--text-1); }

/* ---------- 顶层模块切换 TAB ---------- */
.module-tabs { display: inline-flex; background: var(--surface-2); border-radius: var(--radius-sm); padding: 3px; gap: 3px; }
.module-tab {
  background: transparent; color: var(--text-2); border: none;
  padding: 6px 16px; border-radius: 7px; cursor: pointer;
  font-size: var(--fs-body); font-weight: 600; white-space: nowrap; transition: all .12s;
}
.module-tab:hover { color: var(--text-1); }
.module-tab.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }

/* ============ 阶段八手机排版层（≤767.98px·只追加零删除·桌面≥768px 一像素不动） ============ */
@media (max-width: 767.98px) {
  /* header 紧凑：收窄留白、隐藏低频状态小字，390px 不挤爆 */
  header { padding: 0 10px; gap: 8px; height: 52px; }
  header h1 { font-size: 14px; letter-spacing: 0; }
  .badge, .freshness { display: none; }
  #header-modules { gap: 4px; }
  #theme-toggle { width: 44px; height: 44px; font-size: 16px; }
  /* 模块 tab：横滑容器（内容超宽时容器内滚动，不撑破 390px）· 字号≥13px · 触控高≥44px */
  .module-tabs { flex: 1; min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .module-tab { font-size: 13px; padding: 10px 12px; min-height: 44px; }
  /* 字号对齐（双审）：header 标题保持桌面 17px（叠加覆盖上方 14px 反缩·只追加零删除）· 52px 高装得下 */
  header h1 { font-size: 17px; letter-spacing: 0; }
  /* 修2（阶段八亮哥真机反馈）：手机 header 只留三个模块 TAB——标题/视角/状态/版本/预留扩展区全隐藏，TAB 撑满一行 */
  #header-modules, #auth-perspective, #conn-status, #freshness, #version { display: none !important; }
  header h1 { display: none !important; }
  .module-tabs { display: flex; width: 100%; flex: 1 1 100%; overflow-x: visible; }
  .module-tab { flex: 1; min-height: 48px; font-size: 14px; }
  /* ============ L1 iOS 风灌入（阶段八第二期·只追加零删除·桌面≥768px 一像素不动） ============ */
  /* 1) 设计令牌覆盖：:root 33 令牌 → iOS 风。变量名不动只改值；色值对照套件-Codex-2 实际 :root 逐个对齐。 */
  /*    5 个同值令牌（--surface/--fs-sm/--fs-xs/--gap/--pad）保持原值占位（防未来变·④.5 #7）。 */
  /*    ④.5 #8：--danger 用独立 iOS 红 #e5484d，不与 --up #ed4c5c 撞同色（涨红≠删除红）。 */
  :root {
    /* 颜色 */
    --bg:            #f2f4f8;
    --surface:       #ffffff;
    --surface-2:     #f7f8fa;
    --surface-hover: #eef0f3;
    --border:        #e5e8ed;
    --border-strong: #d8dde3;
    --text-1:        #111318;
    --text-2:        #68707d;
    --text-3:        #9ba2ad;
    --accent:        #1479ff;
    --accent-soft:   #eaf3ff;
    --up:            #ed4c5c;
    --up-soft:       #fff0f2;
    --down:          #18a56a;
    --down-soft:     #e9f8f1;
    --warn:          #ee8c20;
    --warn-soft:     #fdf3e7;
    --danger:        #e5484d;
    --purple:        #7569e8;
    /* 字阶 */
    --fs-hero: 32px;
    --fs-h2:   16px;
    --fs-body: 15px;
    --fs-sm:   12px;
    --fs-xs:   11px;
    /* 间距 / 圆角 / 阴影 */
    --gap:    16px;
    --pad:    16px;
    --radius: 16px;
    --radius-sm: 12px;
    --shadow-sm: 0 1px 1px rgba(28,33,43,.04);
    --shadow-md: 0 12px 32px rgba(29,37,53,.12);
    --chart-grid: #e8ebf0;
    --chart-h:   280px;
    --chart-h-lg: 320px;
  }
  /* 2) 暗色分支防混搭（④.5 #3）：媒体层内 [data-theme="dark"] 显式 pin 全部 33 令牌为现有 Kimi 暗色值。 */
  /*    现有桌面 dark 块只 pin 22 个颜色令牌，11 个尺寸令牌靠继承 :root 会被上方 iOS 浅色几何渗入， */
  /*    必须一并 pin 死，防"Kimi配色+iOS几何"混搭。 */
  [data-theme="dark"] {
    /* 颜色（现有 Kimi 暗色值·本期不动） */
    --bg:            #0e1013;
    --surface:       #171a1f;
    --surface-2:     #1e2229;
    --surface-hover: #242932;
    --border:        #262b33;
    --border-strong: #353c47;
    --text-1:        #e8eaee;
    --text-2:        #a4adb9;
    --text-3:        #6b7480;
    --accent:        #4d84ff;
    --accent-soft:   #1c2a4a;
    --up:            #f0705f;
    --up-soft:       #3a201d;
    --down:          #2fbd8f;
    --down-soft:     #16302a;
    --warn:          #e5ab3c;
    --warn-soft:     #352a15;
    --danger:        #ef5348;
    --purple:        #a78bfa;
    /* 字阶（Kimi 尺寸·防 iOS 浅色几何渗入） */
    --fs-hero: 26px;
    --fs-h2:   15px;
    --fs-body: 13px;
    --fs-sm:   12px;
    --fs-xs:   11px;
    /* 间距 / 圆角 / 阴影 */
    --gap:    16px;
    --pad:    16px;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,.4);
    --chart-grid: #23272e;
    --chart-h:   320px;
    --chart-h-lg: 420px;
  }
  /* 3) 全局基础组件 iOS 化（对照 Codex-2 观感·同选择器+特异性≥原规则覆盖）+ 清册 §一 base 硬编码点逐个压过 */
  /* 卡片/面板：iOS 大圆角 16 + 柔和阴影（--shadow-sm 已换 iOS 值） */
  .card, .panel { border-radius: 16px; box-shadow: var(--shadow-sm); }
  /* 按钮：iOS 圆角 12 + 触控高 ≥44px */
  .btn { border-radius: 12px; min-height: 44px; }
  /* 段选：iOS 胶囊（浅底容器 + 白色活动块·Codex-2 .seg 观感） */
  .seg { padding: 4px; background: var(--surface-2); border-radius: 999px; }
  .seg button { min-height: 44px; border-radius: 999px; }
  .seg button.active { background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text-1); }
  /* 清册 base 硬编码点：滚动条变细 / badge 留白加大 / 模块tab 圆角12·字号15·触控48 */
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-thumb { border-radius: 8px; border: 2px solid var(--bg); }
  .badge { padding: 4px 12px; border-radius: 999px; }
  .module-tabs { padding: 4px; gap: 4px; }
  .module-tab { border-radius: 12px; font-size: 15px; min-height: 48px; }
  /* ============ 阶段八第二期 L3：第二栏筛选胶囊条（亮哥点名必修·core.js 注入 .m-filter-pills·只追加零删除·桌面≥768px 一像素不动） ============ */
  /* 侧栏顶部横滑筛选胶囊条：触控≥44px·圆角胶囊·选中高亮 iOS 蓝·sticky 常显（树滚动时胶囊不滚走） */
  .m-filter-pills {
    display: flex; align-items: center; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 4px 0 10px;
    position: sticky; top: 0; z-index: 1;
    background: var(--surface);
    scrollbar-width: none;
  }
  .m-filter-pills::-webkit-scrollbar { display: none; height: 0; }
  .m-filter-pills .m-pill {
    flex: none; min-height: 44px; padding: 0 16px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text-2);
    font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .m-filter-pills .m-pill.on { background: var(--accent); border-color: var(--accent); color: var(--surface); }
  /* 侧栏默认展开态滚动容器（原先只折叠成 46px 条·现在默认展开·内容区可滚） */
  #view-front .fm4-side { overflow-y: auto; }
  /* ============ 阶段八修5（双审⑧.0·缺陷3·健壮性）：筛选胶囊降级兜底 ============ */
  /* core.js 加载失败/网络慢 → 该侧栏未注入 .m-filter-pills 时，不得被旧折叠条(.m-collapsed)藏起筛选入口。
     现代 WebView 有 :has()：无胶囊条 → 强制展开回默认滚动态（JS 挂了用户仍能展开侧栏筛选）+ 去"点展开"误导提示；
     旧 WebView 无 :has() 时此三条忽略，侧栏本就默认展开（m-collapsed 仅 collapseInit 点标题后才加·core.js 崩前不会先跑）。 */
  #view-market .sidebar.m-collapsed:not(:has(.m-filter-pills)),
  #shop-sidebar.m-collapsed:not(:has(.m-filter-pills)) {
    max-height: 200px;
    overflow-y: auto;
  }
  #view-front .fm4-side.m-collapsed:not(:has(.m-filter-pills)) {
    max-height: 40vh;
    overflow-y: auto;
  }
  #view-market .sidebar.m-collapsed:not(:has(.m-filter-pills)) .side-title::after,
  #shop-sidebar.m-collapsed:not(:has(.m-filter-pills)) .side-title::after,
  #view-front .fm4-side.m-collapsed:not(:has(.m-filter-pills)) h4:first-child::after {
    content: none;
  }
}