/* ═══════════════════════════════════════════════════════════════
   shared.css v2 — Token-first 双主题设计系统
   ───────────────────────────────────────────────────────────────
   v1 (旧): 暴力 *通配 + !important 反色, 各 hub 私自硬编色 → 白框白字、视频被压、5种accent
   v2 (新): 双主题独立设计, 中性色全 token 化, 各 hub 仅定义独有 --accent
   蓝图: docs/features/feat-light-theme-v2-20260413.md
   日期: 2026-04-13 / 2026-04-28 加 Russo One 字体 (招牌动效用)
   ═══════════════════════════════════════════════════════════════ */

/* ═══ 招牌字体 (Russo One — 全站 .brand-title 招牌默认字体, 必须 @import 顶部, 跟 shared.css 同步 head 加载) ═══ */
@import url('https://cdn.jsdelivr.net/npm/@fontsource/russo-one@5.0.13/400.css');

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

/* ═══ Font Stack — 中英分层 (老板诉求: 微软雅黑) ═══
   Win 中文用户: 英文 Inter (或 Segoe UI), 中文自动落微软雅黑
   Mac 用户: 英文 Inter, 中文 PingFang
   Linux: 英文 Inter, 中文思源/Noto */
:root {
  --font-sans:
    "Inter",
    -apple-system, BlinkMacSystemFont,
    "Segoe UI",
    "PingFang SC",
    "Microsoft YaHei",
    "Hiragino Sans GB",
    "Source Han Sans CN",
    "Noto Sans CJK SC",
    sans-serif;
  --font-mono:
    "JetBrains Mono",
    "SF Mono", ui-monospace,
    Consolas, "Cascadia Code",
    "Microsoft YaHei Mono",
    monospace;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ═══ Dark Theme (default) ═══ */
:root, [data-theme="dark"] {
  /* Background — 三阶 */
  --bg-canvas:    #0b0d12;
  --bg-elevated:  #11141b;
  --bg-surface:   #181c25;
  --bg-overlay:   #1e2330;
  --bg-hover:     rgba(255,255,255,.06);
  --bg-active:    rgba(255,255,255,.10);

  /* Text — 三阶 */
  --text-primary:   rgba(255,255,255,.95);
  --text-secondary: rgba(255,255,255,.72);
  --text-tertiary:  rgba(255,255,255,.48);
  --text-inverse:   #1f2328;
  --text-on-accent: #ffffff;

  /* Border — 三阶 */
  --border-subtle:  rgba(255,255,255,.08);
  --border-default: rgba(255,255,255,.14);
  --border-strong:  rgba(255,255,255,.28);

  /* Accent — 默认蓝 (各 hub 可在自己的 :root 覆盖) */
  --accent:         #4b8bf5;
  --accent-hover:   #5c9bff;
  --accent-bg:      rgba(75,139,245,.10);
  --accent-border:  rgba(75,139,245,.38);
  --accent-glow:    rgba(75,139,245,.25);

  /* Semantic */
  --success:        #3fb950; --success-bg: rgba(63,185,80,.12);  --success-border: rgba(63,185,80,.30);
  --warning:        #d29922; --warning-bg: rgba(210,153,34,.12); --warning-border: rgba(210,153,34,.30);
  --danger:         #f85149; --danger-bg:  rgba(248,81,73,.12);  --danger-border:  rgba(248,81,73,.30);
  --info:           #58a6ff; --info-bg:    rgba(88,166,255,.12); --info-border:    rgba(88,166,255,.30);

  /* Severity */
  --p0: #ff5c5c; --p0-bg: rgba(255,92,92,.10);  --p0-bd: rgba(255,92,92,.30);
  --p1: #ff9f43; --p1-bg: rgba(255,159,67,.10); --p1-bd: rgba(255,159,67,.30);
  --p2: #8fa3bf; --p2-bg: rgba(143,163,191,.10);--p2-bd: rgba(143,163,191,.30);

  /* Platform Brand Colors (全站统一) */
  --plat-amazon:   #ff9900;
  --plat-shopify:  #95bf47;
  --plat-tiktok:   #69c9d0;
  --plat-temu:     #fb6d3a;
  --plat-walmart:  #0071ce;
  --plat-youtube:  #ff0000;
  --plat-instagram:#e1306c;
  --plat-facebook: #1877f2;
  --plat-reddit:   #ff4500;
  --plat-pinterest:#bd081c;
  --plat-google:   #4285f4;
  --plat-meta:     #1877f2;

  /* Effects */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --shadow-md:  0 4px 12px rgba(0,0,0,.35);
  --shadow-lg:  0 12px 32px rgba(0,0,0,.45);
  --shadow-glow:0 0 0 3px var(--accent-glow);

  /* Glass (用于 CommandHub 等) */
  --glass-bg:        rgba(13,17,23,.7);
  --glass-border:    rgba(255,255,255,.08);

  /* Geometry */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Heights — 公约 v2.2: 顶栏 48px (招牌大气感, 抄 KOLHub tt4-period 8+32+8) */
  --brand-h:   48px;
  --action-h:  42px;

  /* Typography Scale (固定 7 阶, 禁止散写 px) */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;

  /* Line Height */
  --lh-tight:   1.25;
  --lh-snug:    1.4;
  --lh-normal:  1.6;
  --lh-relaxed: 1.8;

  /* Scrollbar */
  --scrollbar-thumb: rgba(255,255,255,.15);
  --scrollbar-track: transparent;
}

/* ═══ Light Theme — 重新设计, 不是反转 ═══ */
[data-theme="light"] {
  /* Background — Notion 风, 三阶白 + shadow 区分层级 */
  --bg-canvas:    #ffffff;
  --bg-elevated:  #fafbfc;
  --bg-surface:   #ffffff;
  --bg-overlay:   #ffffff;
  --bg-hover:     rgba(0,0,0,.04);
  --bg-active:    rgba(0,0,0,.07);

  /* Text */
  --text-primary:   #1f2328;
  --text-secondary: #59636e;
  --text-tertiary:  #818b94;
  --text-inverse:   #ffffff;
  --text-on-accent: #ffffff;

  /* Border — 浅灰阶 */
  --border-subtle:  #eaeef2;
  --border-default: #d0d7de;
  --border-strong:  #afb8c1;

  /* Accent — GitHub 蓝 (各 hub 可覆盖) */
  --accent:         #0969da;
  --accent-hover:   #0550ae;
  --accent-bg:      rgba(9,105,218,.08);
  --accent-border:  rgba(9,105,218,.30);
  --accent-glow:    rgba(9,105,218,.18);

  /* Semantic */
  --success:        #1a7f37; --success-bg: rgba(26,127,55,.10); --success-border: rgba(26,127,55,.30);
  --warning:        #9a6700; --warning-bg: rgba(154,103,0,.10); --warning-border: rgba(154,103,0,.30);
  --danger:         #cf222e; --danger-bg:  rgba(207,34,46,.10); --danger-border:  rgba(207,34,46,.30);
  --info:           #0969da; --info-bg:    rgba(9,105,218,.08); --info-border:    rgba(9,105,218,.30);

  /* Severity */
  --p0: #cf222e; --p0-bg: rgba(207,34,46,.10);  --p0-bd: rgba(207,34,46,.30);
  --p1: #bf8700; --p1-bg: rgba(191,135,0,.10);  --p1-bd: rgba(191,135,0,.30);
  --p2: #57606a; --p2-bg: rgba(87,96,106,.10);  --p2-bd: rgba(87,96,106,.30);

  /* Platform 色不变 — 品牌色就是品牌色 */

  /* Effects — 柔和 shadow */
  --shadow-sm:  0 1px 2px rgba(31,35,40,.06);
  --shadow-md:  0 3px 6px rgba(31,35,40,.10);
  --shadow-lg:  0 8px 24px rgba(31,35,40,.12);
  --shadow-glow:0 0 0 3px var(--accent-glow);

  /* Glass */
  --glass-bg:        rgba(255,255,255,.75);
  --glass-border:    rgba(208,215,222,.6);

  /* Scrollbar */
  --scrollbar-thumb: rgba(0,0,0,.18);
  --scrollbar-track: transparent;
}

/* ═══ 向后兼容 alias (老代码用 --bg/--t1/--acc 等照常工作) ═══ */
:root, [data-theme="dark"], [data-theme="light"] {
  --bg:       var(--bg-canvas);
  --panel:    var(--bg-elevated);
  --surface:  var(--bg-surface);
  --surface2: var(--bg-overlay);
  --bdr:      var(--border-subtle);
  --bdr-md:   var(--border-default);
  --bdr-hi:   var(--border-strong);
  --t1:       var(--text-primary);
  --t2:       var(--text-secondary);
  --t3:       var(--text-tertiary);
  --acc:      var(--accent);
  --acc-bg:   var(--accent-bg);
  --acc-bd:   var(--accent-border);
  --acc-glow: var(--accent-glow);
  --r-s:      var(--radius-sm);
  --r-m:      var(--radius-md);
  --r-l:      var(--radius-lg);
  --gold:     var(--warning);
  --hover:    var(--bg-hover);
  --card-bg:     var(--bg-surface);
  --card-border: var(--border-default);
  --shadow:      var(--shadow-sm);
}

/* ═══ Body & Page ═══ */
html, body {
  background: var(--bg-canvas);
  color: var(--text-primary);
}
[data-theme="light"] {
  color-scheme: light;
}
[data-theme="dark"] {
  color-scheme: dark;
}

/* ═══ 链接 ═══ */
a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-hover); }

/* ═══ Brand Bar (各 hub 共用顶栏) ═══ */
/* ═══ 标准 hub 顶栏 logo 组件 (公约: 全站统一)
   用法: <a href="/" class="brand-home"><img src="..." class="brand-logo brand-logo-dark"...></a>
   hover: 框色跟当前 hub --accent 同色 (各 hub 自动差异化)
*/
/* ★ 集团 brand-bar 基础规则 (2026-04-29 加件: 之前缺 desktop 基础, 仅 mobile @media 有)
   防御 commandhub 类 hub 写残缺 .brand-bar{} (只 height/padding 没 display:flex) → 元素换行垮掉 */
.brand-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;height:48px;min-height:48px;padding:0 20px;background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);box-sizing:border-box}

/* 大气版 (2026-04-28 抄 KOLHub 标准, 全站默认尺寸放大) */
.brand-home{display:inline-flex;align-items:center;gap:8px;text-decoration:none;padding:5px 10px;border-radius:8px;border:1px solid transparent;transition:all .15s;cursor:pointer}
.brand-home:hover{border-color:var(--accent);background:var(--accent-bg);text-decoration:none}
/* 匡氏 logo: 32px 大气版 (28→32) */
.brand-logo{width:auto;height:32px;max-width:80px;object-fit:contain;display:block;flex-shrink:0}
.brand-logo-light{display:none}             /* dark 模式默认隐藏 蓝色 logo */
[data-theme="light"] .brand-logo-dark{display:none}    /* light 模式隐藏 白色 logo */
[data-theme="light"] .brand-logo-light{display:block}  /* light 模式显示 蓝色 logo */
/* 公约 v2 铁律 4: wordmark 永远集团蓝, 17px / 900 大气版 */
.brand-wordmark{font-size:17px;font-weight:900;letter-spacing:-.02em;color:var(--brand-wordmark, var(--text-primary));font-family:var(--font-sans);white-space:nowrap}
.brand-dot{color:var(--accent);font-weight:900}

/* ═══ Brand Title 全站默认招牌 (v3 2026-04-28 简化 — 删 enter 入场, 保留 flow + pulse 二相)
   - Russo One 26px 大字, 主色三阶流光 + 光晕脉冲
   - 不要入场动画 (会卡帧 + 过度炫技, KOLHub 自己的 enter 仍保留 hub-specific 覆盖)
   - 厚重感来自 Russo One 字体本身 + 26px + uppercase, 不靠动画
   ════════════════════════════════════════════════════════ */
@keyframes brand-title-flow{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes brand-title-pulse{
  0%,100%{filter:drop-shadow(0 0 4px var(--accent-glow))}
  50%{filter:drop-shadow(0 0 12px var(--accent-glow)) drop-shadow(0 0 22px var(--accent-glow))}
}
.brand-title,.brand-main,.topbar-title{
  /* 完整抄 KOLHub 字体栈 (Russo One 预制粗体, weight 400 即够, weight 600 反而触发 fake bold 扭曲) */
  font-family:'Russo One','Black Ops One','Audiowide','Helvetica Neue',sans-serif;
  font-size:26px;
  font-weight:400;
  letter-spacing:.02em;
  text-transform:uppercase;
  /* 主色三阶流光 (从 hub --accent 单色派生) */
  background-image:linear-gradient(45deg,
    color-mix(in srgb, var(--accent) 70%, white),
    var(--accent),
    color-mix(in srgb, var(--accent) 70%, black),
    var(--accent),
    color-mix(in srgb, var(--accent) 70%, white));
  background-size:300% 300%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:
    brand-title-flow 4s ease-in-out infinite,
    brand-title-pulse 2.5s ease-in-out infinite;
  padding:0 4px;
  display:inline-block;
  line-height:1.1;
  will-change:filter,background-position;
}
@media (prefers-reduced-motion: reduce){
  .brand-title,.brand-main,.topbar-title{animation:none}
}

/* 公约 v2.1 铁律 1 (顶栏三件套): brand-sub 用左竖线 + 主色, 跟 .brand-title 视觉分隔 */
.brand-sub{font-size:var(--fs-sm);color:var(--text-tertiary);margin-left:8px;border-left:2px solid var(--accent);padding-left:10px;font-weight:600;letter-spacing:.5px;line-height:1.4}

/* ═══ Theme Toggle Button ═══ */
.theme-toggle{
  background:var(--bg-surface);border:1px solid var(--border-default);
  border-radius:var(--radius-sm);
  color:var(--text-secondary);cursor:pointer;
  padding:4px 10px;font-size:var(--fs-sm);
  transition:all .15s;display:inline-flex;align-items:center;gap:4px;
}
.theme-toggle:hover{
  border-color:var(--accent-border);color:var(--accent);background:var(--accent-bg);
}

/* ═══ DB Status Badge ═══ */
.badge-pg{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);padding:2px 8px;border-radius:999px;font-weight:600}
.badge-pg.on{background:var(--success-bg);color:var(--success);border:1px solid var(--success-border)}
.badge-pg.off{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-border)}

/* ═══ Action Bar ═══ */
.ab-sep{width:1px;height:16px;background:var(--border-default);margin:0 4px;flex-shrink:0}
.ab-group{display:flex;align-items:center;gap:4px}

.ptab{padding:4px 12px;border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;color:var(--text-secondary);font-size:var(--fs-sm);cursor:pointer;transition:all .12s;white-space:nowrap}
.ptab:hover{color:var(--text-primary);background:var(--bg-hover)}
.ptab.is-active{background:var(--bg-active);color:var(--text-primary);border-color:var(--border-default)}

.ab-btn{padding:4px 12px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-surface);color:var(--text-secondary);font-size:var(--fs-sm);cursor:pointer;transition:all .12s;white-space:nowrap}
.ab-btn:hover{border-color:var(--accent-border);color:var(--accent);background:var(--accent-bg)}
.ab-btn--primary{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}
.ab-btn--primary:hover{background:var(--accent-hover);color:var(--text-on-accent)}
.ab-btn:disabled{opacity:.4;cursor:default}

/* ═══ 标准化组件 — 各 hub 优先用这些 ═══ */

/* Badge */
.kg-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap; line-height: 1.4;
}
.kg-badge--success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.kg-badge--warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.kg-badge--danger  { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-border); }
.kg-badge--info    { background: var(--info-bg);    color: var(--info);    border-color: var(--info-border); }
.kg-badge--p0 { background: var(--p0-bg); color: var(--p0); border-color: var(--p0-bd); }
.kg-badge--p1 { background: var(--p1-bg); color: var(--p1); border-color: var(--p1-bd); }
.kg-badge--p2 { background: var(--p2-bg); color: var(--p2); border-color: var(--p2-bd); }
.kg-badge--accent { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-border); }
.kg-badge--neutral { background: var(--bg-hover); color: var(--text-secondary); border-color: var(--border-subtle); }

/* Platform badge — 用 CSS 变量自定义颜色 */
.kg-badge--platform {
  background: color-mix(in srgb, var(--platform-color, var(--accent)) 14%, transparent);
  color: var(--platform-color, var(--accent));
  border-color: color-mix(in srgb, var(--platform-color, var(--accent)) 38%, transparent);
}
[data-theme="light"] .kg-badge--platform {
  background: color-mix(in srgb, var(--platform-color, var(--accent)) 10%, white);
  color: color-mix(in srgb, var(--platform-color, var(--accent)) 80%, black);
  border-color: color-mix(in srgb, var(--platform-color, var(--accent)) 30%, transparent);
}

/* Card */
.kg-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kg-card:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-sm);
}
.kg-card--elevated {
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
}
.kg-card--interactive { cursor: pointer; }
.kg-card--interactive:hover {
  border-color: var(--accent-border);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Status Indicator */
.kg-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm);
}
.kg-status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--kg-status-color, var(--text-tertiary));
  flex-shrink: 0;
}
.kg-status--ok       { --kg-status-color: var(--success); color: var(--success); }
.kg-status--warning  { --kg-status-color: var(--warning); color: var(--warning); }
.kg-status--error    { --kg-status-color: var(--danger);  color: var(--danger); }
.kg-status--pending  { --kg-status-color: var(--info);    color: var(--info); }
.kg-status--pending::before { animation: kg-pulse 1.6s ease-in-out infinite; }
@keyframes kg-pulse { 0%,100% {opacity:1} 50% {opacity:.4} }

/* Glass Card (CommandHub) */
.kg-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}
[data-theme="light"] .kg-glass {
  box-shadow: 0 8px 32px rgba(31,35,40,.06);
}
@supports not (backdrop-filter: blur(1px)) {
  .kg-glass { background: var(--bg-surface); }
}

/* Form controls */
.kg-input, input[type="text"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="date"], input[type="password"], select, textarea {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-family: inherit;
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.kg-input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-glow);
}
input::placeholder, textarea::placeholder { color: var(--text-tertiary); }

/* Scrollbar — 集团统一 8px (docs/design-system/03-foundations.md §5). 各 hub 禁止自写 ::-webkit-scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Spinner */
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════════════════════════
   Light Theme — 兜底覆盖 (仅必要项, 不再用 * 通配)
   ═══════════════════════════════════════════════════════════════ */

/* 严重度 P0/P1/P2 (跨 hub 共用) */
[data-theme="light"] .p0,
[data-theme="light"] [class*="severity-p0"]{color:var(--p0)}
[data-theme="light"] .p1,
[data-theme="light"] [class*="severity-p1"]{color:var(--p1)}
[data-theme="light"] .p2{color:var(--p2)}

/* 老 badge live/soon (兼容) */
[data-theme="light"] .badge-live{color:var(--success);background:var(--success-bg);border-color:var(--success-border)}
[data-theme="light"] .badge-soon{color:var(--text-secondary);background:var(--bg-hover);border-color:var(--border-subtle)}

/* 钉钉 badge */
.dingtalk-badge{color:var(--accent);font-size:var(--fs-xs);margin-left:2px}

/* code 块 */
code, pre code { font-family: var(--font-mono); font-size: var(--fs-sm); }
[data-theme="light"] code { background: var(--bg-elevated); padding: 1px 5px; border-radius: 3px; }

/* ═══ Light Theme — 通用浅色加深 (修各 hub 残留低对比度) ═══ */
[data-theme="light"] {
  /* 浅色徽章/标记的文字加深 — 跨 hub 通用 */
}
/* gold/yellow 在白底上太亮 → 深金 */
[data-theme="light"] .lb-rank.gold,
[data-theme="light"] .brand-dot[style*="color:#f1c40f"],
[data-theme="light"] [class*="rank-gold"] {
  color: #b58200 !important;
}
/* silver / bronze 同理 */
[data-theme="light"] .lb-rank.silver { color: #6b7280 !important; }
[data-theme="light"] .lb-rank.bronze { color: #c2410c !important; }
/* mention 浅橙 → 深橙 */
[data-theme="light"] .mention,
[data-theme="light"] .at-mention { color: #c2410c !important; }
/* 评分星星 yellow → 加深 */
[data-theme="light"] .ct-rating { color: #b58200 !important; }
/* P1 浅橙 → 深橙 (ct-sev--p1 等) */
[data-theme="light"] .ct-sev--p1 { color: #c2410c !important; }
/* workai .as-label / .as-caret 浅绿 → 深绿 */
[data-theme="light"] .as-label,
[data-theme="light"] .as-caret { color: #047857 !important; }
/* da-rpt-status--ready / vsp-head-badge 浅绿 → 深绿 */
[data-theme="light"] .da-rpt-status--ready { color: #15803d !important; }
[data-theme="light"] .vsp-head-badge { color: #047857 !important; }
/* 通用: status badge --done 浅绿在浅绿底, 加深字 */
[data-theme="light"] .vi-card-status--done { color: #15803d !important; }
/* gold/yellow 大数字 (KPI val rgb(241,196,15)) → 深金 */
[data-theme="light"] .kpi .val[style*="gold"],
[data-theme="light"] .val.gold,
[data-theme="light"] [style*="color:var(--gold)"],
[data-theme="light"] [style*="color: var(--gold)"] {
  color: #b58200 !important;
}

/* ═══════════════════════════════════════════════════════════════
   Light Theme — 装饰增强层 (v149+)
   解决"白色太素, 表格难看"问题
   设计参考: GitHub Primer + Linear + Notion + Stripe
   ═══════════════════════════════════════════════════════════════ */

/* ① 微纹理: 页面整体细网格点阵 (24x24, 4% 黑) - 不打扰阅读 */
[data-theme="light"] body {
  background-color: #fafbfc;
  background-image: radial-gradient(circle at 1px 1px, rgba(31,35,40,.05) 1px, transparent 0);
  background-size: 24px 24px;
  background-attachment: fixed;
}

/* ② 卡片: 1px hairline + 微梯度阴影 + hover lift */
[data-theme="light"] .card,
[data-theme="light"] .kg-card,
[data-theme="light"] .hub-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .kpi-card,
[data-theme="light"] .kpi,
[data-theme="light"] .panel,
[data-theme="light"] .vi-card,
[data-theme="light"] .connector-card,
[data-theme="light"] .agent-card,
[data-theme="light"] .domain-card,
[data-theme="light"] .layer-card,
[data-theme="light"] .brief-card,
[data-theme="light"] .subject-card,
[data-theme="light"] .asset-card,
[data-theme="light"] .my-voc-kpi,
[data-theme="light"] .vsp-card,
[data-theme="light"] .da-rec-card,
[data-theme="light"] .conv-kpi {
  background: #ffffff;
  border: 1px solid #e5e9ee;
  box-shadow: 0 1px 0 rgba(31,35,40,.04), 0 1px 3px rgba(31,35,40,.06);
  position: relative;
}
[data-theme="light"] .card:hover,
[data-theme="light"] .kg-card:hover,
[data-theme="light"] .hub-card:hover,
[data-theme="light"] .stat-card:hover,
[data-theme="light"] .kpi-card:hover,
[data-theme="light"] .panel:hover,
[data-theme="light"] .vi-card:hover,
[data-theme="light"] .connector-card:hover,
[data-theme="light"] .agent-card:hover,
[data-theme="light"] .domain-card:hover {
  border-color: #cdd5dd;
  box-shadow: 0 1px 0 rgba(31,35,40,.04), 0 4px 12px rgba(31,35,40,.08);
  transform: translateY(-1px);
}

/* ③ 表格: zebra + thead 渐变 + hover 高亮 + 圆角包裹 */
[data-theme="light"] table {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e5e9ee;
  box-shadow: 0 1px 3px rgba(31,35,40,.04);
  border-collapse: separate;
  border-spacing: 0;
}
[data-theme="light"] thead th,
[data-theme="light"] table th {
  background: linear-gradient(180deg, #f7f9fb 0%, #f0f3f6 100%) !important;
  color: #59636e !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
  padding: 10px 14px;
  border-bottom: 2px solid #d8dee4;
  text-align: left;
}
[data-theme="light"] tbody tr {
  transition: background-color .12s;
}
[data-theme="light"] tbody tr:nth-child(even) {
  background: rgba(246,248,250,.6);
}
[data-theme="light"] tbody tr:hover,
[data-theme="light"] tbody tr:hover td {
  background: rgba(9,105,218,.05) !important;
}
[data-theme="light"] tbody td,
[data-theme="light"] table td {
  padding: 9px 14px;
  border-bottom: 1px solid #eaeef2;
  color: #1f2328;
}
[data-theme="light"] tbody tr:last-child td {
  border-bottom: none;
}

/* 数字单元格用等宽 + tabular-nums */
[data-theme="light"] td.num,
[data-theme="light"] td[class*="num"],
[data-theme="light"] td[class*="-val"],
[data-theme="light"] table .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* ④ Section 标题: 左侧加 3px 蓝渐变条 */
[data-theme="light"] .section-title,
[data-theme="light"] .panel h2 {
  position: relative;
  padding-left: 12px;
}
[data-theme="light"] .section-title::before,
[data-theme="light"] .panel h2::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 14px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);
  border-radius: 2px;
  transform: translateY(-50%);
}

/* ⑤ KPI 大数字: 渐变文字, 不再单调黑 */
[data-theme="light"] .kpi .num,
[data-theme="light"] .kpi-val,
[data-theme="light"] .kpi-value,
[data-theme="light"] .stat-val,
[data-theme="light"] .stat-value,
[data-theme="light"] .vi-stat-value {
  background: linear-gradient(135deg, #1f2328 0%, #424950 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* ⑥ Brand bar: 顶部加微渐变 + 微阴影 */
[data-theme="light"] .brand-bar,
[data-theme="light"] .top,
[data-theme="light"] .top-bar,
[data-theme="light"] .topbar,
[data-theme="light"] body > header {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
  border-bottom: 1px solid #e5e9ee !important;
  box-shadow: 0 1px 3px rgba(31,35,40,.04);
}

/* ⑦ Input/select: 凹陷感 + focus ring */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="url"],
[data-theme="light"] input[type="password"],
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  box-shadow: inset 0 1px 2px rgba(31,35,40,.04);
  transition: border-color .15s, box-shadow .15s;
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow), inset 0 1px 2px rgba(31,35,40,.04) !important;
  outline: none;
}

/* ⑧ Button 主按钮: 立体感 (顶部高光 + 底部阴影) */
[data-theme="light"] .btn-primary,
[data-theme="light"] .ab-btn--primary,
[data-theme="light"] button.primary,
[data-theme="light"] .ai-bar-send,
[data-theme="light"] .vi-btn--primary {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
  color: var(--text-on-accent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(9,105,218,.18);
  border: 1px solid var(--accent-hover);
}

/* ⑨ Modal/Drawer: 多层阴影 + hairline */
[data-theme="light"] .modal,
[data-theme="light"] .dialog,
[data-theme="light"] .popup,
[data-theme="light"] .voc-enlarge-card {
  background: #ffffff !important;
  border: 1px solid #e5e9ee !important;
  box-shadow:
    0 0 0 1px rgba(31,35,40,.04),
    0 12px 40px rgba(31,35,40,.12),
    0 24px 80px rgba(31,35,40,.08) !important;
}

/* ⑩ Code/pre 块: 浅蓝灰底 */
[data-theme="light"] pre,
[data-theme="light"] .code-block,
[data-theme="light"] .voc-enlarge-text {
  background: #f6f8fa !important;
  border: 1px solid #e5e9ee !important;
  border-radius: 6px;
  font-family: var(--font-mono);
  color: #1f2328;
}

/* ⑪ 表格 P0/P1/P2 严重度 chip 样式 */
[data-theme="light"] td .badge.p0,
[data-theme="light"] td .severity-p0 {
  background: rgba(207,34,46,.10);
  color: #b91c1c;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid rgba(207,34,46,.25);
}
[data-theme="light"] td .badge.p1,
[data-theme="light"] td .severity-p1 {
  background: rgba(191,135,0,.10);
  color: #b45309;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid rgba(191,135,0,.25);
}
[data-theme="light"] td .badge.p2,
[data-theme="light"] td .severity-p2 {
  background: rgba(87,96,106,.10);
  color: #475569;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid rgba(87,96,106,.20);
}

/* ⑫ Sidebar 左侧导航: 微渐变背景 */
[data-theme="light"] .sidebar,
[data-theme="light"] .ch-sidebar,
[data-theme="light"] .side-panel {
  background: linear-gradient(180deg, #fafbfc 0%, #f6f8fa 100%) !important;
  border-right: 1px solid #e5e9ee !important;
}

/* ⑬ Hub-nav 选中态: 浅蓝底 */
[data-theme="light"] .hub-nav-link.is-active,
[data-theme="light"] .nav-tab.active,
[data-theme="light"] .g-tab.active {
  background: rgba(9,105,218,.06);
  color: var(--accent);
  font-weight: 600;
}

/* ⑭ Scrollbar 浅灰 */
[data-theme="light"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #c7cfd6;
  border: 3px solid #fafbfc;
  border-radius: 6px;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #9da7b1;
}

/* ⑮ 链接 hover 加底部装饰线 */
[data-theme="light"] a:not(.btn):not(.button):not(.ab-btn):not(.tab):not(.nav-link):hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ═══ Light Theme — 平台/类别色加深 (audit 第3轮发现) ═══ */
/* Platform badges: 浅色背景 + 深色文字 (达 WCAG AA) */
[data-theme="light"] .plat-badge.amz { background: #fff3e0; color: #b45309; border: 1px solid rgba(255,153,0,.3); }
[data-theme="light"] .plat-badge.wmt { background: #e0e9f5; color: #1d4ed8; border: 1px solid rgba(0,113,197,.3); }
[data-theme="light"] .plat-badge.shop { background: #e8f5dc; color: #4d7c0f; border: 1px solid rgba(149,191,71,.3); }
[data-theme="light"] .plat-badge.tk { background: #ddf5f6; color: #0e7490; border: 1px solid rgba(105,201,208,.3); }
[data-theme="light"] .plat-badge.temu { background: #ffeadf; color: #c2410c; border: 1px solid rgba(251,109,58,.3); }
[data-theme="light"] .plat-badge.dtc { background: rgba(142,68,173,.08); color: #6d28d9; border: 1px solid rgba(142,68,173,.3); }

/* Forge agent-badge.provider: 深橙 on 白 */
[data-theme="light"] .agent-badge.provider { color: #b45309 !important; border-color: #d97706 !important; }
[data-theme="light"] .agent-badge.tools { color: #1d4ed8 !important; border-color: #1d4ed8 !important; }

/* Forge hub-tab active: --fg 浅橙 → 深橙 */
[data-theme="light"] .hub-tab.active { color: #b45309 !important; background: rgba(180,83,9,.10) !important; }

/* WikiAI hub-tab: --muted/--text 浅色 token → 加深 */
[data-theme="light"] .hub-tab { color: #59636e !important; }
[data-theme="light"] .hub-tab.active { color: var(--accent) !important; background: var(--accent-bg) !important; border-color: var(--accent-border) !important; }

/* IntakeHub ptab.cat-* active: 加深类别色 */
[data-theme="light"] .ptab.cat-voc.is-active { color: #b45309 !important; background: rgba(180,83,9,.08) !important; border-color: rgba(180,83,9,.4) !important; }
[data-theme="light"] .ptab.cat-orders.is-active { color: #6d28d9 !important; background: rgba(109,40,217,.08) !important; border-color: rgba(109,40,217,.4) !important; }
[data-theme="light"] .ptab.cat-products.is-active { color: #15803d !important; background: rgba(21,128,61,.08) !important; border-color: rgba(21,128,61,.4) !important; }
[data-theme="light"] .ptab.cat-competitor.is-active { color: #475569 !important; background: rgba(71,85,105,.08) !important; border-color: rgba(71,85,105,.4) !important; }

/* IntakeHub ptab default state (浅 token 在 dark bg 太淡) — 但 light 主体已 OK */
[data-theme="light"] .ptab { color: #59636e; }
[data-theme="light"] .ptab:hover { background: var(--bg-hover); color: var(--text-primary); }

/* AIHub ai-cost-total #f1c40f gold → 深金 */
[data-theme="light"] .ai-cost-total { color: #b58200 !important; }

/* AIHub TD 中 灰色 unknown text */
[data-theme="light"] td:has(span:empty), 
[data-theme="light"] td.empty,
[data-theme="light"] td:contains("unclassified") {
  color: #59636e;
}
[data-theme="light"] td { color: var(--text-primary); }

/* OrderHub stat-val.green/orange light 加深 */
[data-theme="light"] .stat-val.green { color: #15803d !important; }
[data-theme="light"] .stat-val.orange { color: #c2410c !important; }
[data-theme="light"] .stat-val.red { color: #b91c1c !important; }
[data-theme="light"] .stat-val.blue { color: #1d4ed8 !important; }

/* VOC severity_rules .rule-sev.p1/p2 走全站 token (已是 token, 但 light 还不够深) */
[data-theme="light"] .rule-sev.p1 { color: #b45309 !important; background: rgba(180,83,9,.08) !important; border-color: rgba(180,83,9,.3) !important; }
[data-theme="light"] .rule-sev.p2 { color: #475569 !important; background: rgba(71,85,105,.08) !important; border-color: rgba(71,85,105,.3) !important; }

/* Wiki brand bar 元素 */
[data-theme="light"] a.brand-wordmark,
[data-theme="light"] .brand-wordmark a { color: var(--text-primary) !important; }
[data-theme="light"] .brand-icon { color: var(--accent) !important; }
[data-theme="light"] .brand-sep { color: #cbd5e1 !important; }

/* ═══ Light Theme — 第 8 轮深度修 (audit v156/v157 发现) ═══ */
/* ForgeHub brand-dot/icon/sep 橙色 on 白底 ratio 2.85 — 加深到 WCAG AA */
[data-theme="light"] .brand-dot,
[data-theme="light"] .brand-icon { color: #b45309 !important; }
[data-theme="light"] .brand-sep { color: var(--text-tertiary) !important; }

/* IntakeHub num dashes fg orange/gray on white */
[data-theme="light"] .cc-header .num,
[data-theme="light"] .num { color: var(--text-primary) !important; }
[data-theme="light"] .num[style*="orange"],
[data-theme="light"] .num[style*="e67e22"] { color: #b45309 !important; }

/* CreativeHub ch-pipe-arrow 太淡 */
[data-theme="light"] .ch-pipe-arrow { color: var(--text-tertiary) !important; font-weight: 700; }

/* voc_center brand-dot 及 Forge hub-tab active 浅色 */
[data-theme="light"] .hub-tab.active[data-tab],
[data-theme="light"] .hub-tab.active { color: var(--accent) !important; }

/* Forge .fab 橙底白字 ratio 2.85 - 加深底色到 #b45309 */
[data-theme="light"] .fab { background: #b45309 !important; color: #ffffff !important; border: 1px solid #92400e; box-shadow: 0 2px 8px rgba(180,83,9,.25); }

/* intakehub .rc-kpi .num inline style 硬编色: 改为 light friendly */
[data-theme="light"] .rc-kpi .num[style*="#e67e22"],
[data-theme="light"] .rc-kpi .num[style*="e67e22"] { color: #b45309 !important; }
[data-theme="light"] .rc-kpi .num[style*="#9b59b6"],
[data-theme="light"] .rc-kpi .num[style*="9b59b6"] { color: #6d28d9 !important; }
[data-theme="light"] .rc-kpi .num[style*="#1abc9c"],
[data-theme="light"] .rc-kpi .num[style*="1abc9c"] { color: #0f766e !important; }

/* ═══ Light Theme — 第 9 轮 (剩 7 个真硬伤全修) ═══ */
/* product_map brand-title 橙 on 白 ratio 2.85 → 加深 */
[data-theme="light"] .brand-title { color: #b45309 !important; }

/* product_map action-btn (橙底白字 ratio 2.85) + guardian .action-btn 同理 */
[data-theme="light"] .action-btn:not(.action-btn--secondary) {
  background: #b45309 !important; color: #fff !important; border: 1px solid #92400e;
  box-shadow: 0 2px 6px rgba(180,83,9,.25);
}

/* guardian .g-tab.active color:var(--t1) on var(--s1) 在 light 下 s1 是 elevated bg #fafbfc ≈ white ratio 2.83 — 加强对比 */
[data-theme="light"] .g-tab.active {
  color: #0550ae !important; background: rgba(9,105,218,.08);
  border-bottom-color: #0550ae !important; font-weight: 700;
}

/* creativehub brief-badge priority[P1] 白字 on 浅橙 #ff9f43 ratio 2.04 → 深橙底 */
[data-theme="light"] .brief-badge.priority[data-p="P1"],
[data-theme="light"] .brief-badge.priority {
  background: #c2410c !important; color: #fff !important;
  box-shadow: 0 1px 2px rgba(194,65,12,.25);
}

/* forgehub hub-tab active 橙 on 浅蓝 ratio 2.54 → 加深 */
[data-theme="light"] .hub-tab.active { color: #9a3412 !important; background: rgba(194,65,12,.10) !important; border-color: rgba(194,65,12,.3) !important; }

/* admin_raw badge.pg ratio 2.76 → 加深字色 */
[data-theme="light"] .badge.pg { color: #14532d !important; background: rgba(20,83,45,.08) !important; border: 1px solid rgba(20,83,45,.3) !important; }
[data-theme="light"] .badge.sq { color: #9a3412 !important; background: rgba(154,52,18,.08) !important; border: 1px solid rgba(154,52,18,.3) !important; }

/* voc_mappings brand-sep › ratio 1.17 — 太淡 → text-secondary */
[data-theme="light"] .mappings-page .brand-sep,
[data-theme="light"] main .brand-sep { color: var(--text-secondary) !important; font-weight: 600; }

/* ═══ Light Theme — 最后 2 个真硬伤 + 9px 统一到 10px ═══ */
/* voc_mappings brand-sep › 继承自 body 灰字 ratio 1.17, 强制深化 */
[data-theme="light"] .brand-sep,
[data-theme="light"] body .brand-sep,
[data-theme="light"] main .brand-sep { color: var(--text-secondary) !important; opacity: 1 !important; }

/* 9px mini badge 全部提升到 10px + font-weight 700 保证可读 */
[data-theme="light"] .label,
[data-theme="light"] .lbl,
[data-theme="light"] .tag-group-lbl,
[data-theme="light"] .signal-badge,
[data-theme="light"] .sort-arr,
[data-theme="light"] .vi-card-status,
[data-theme="light"] .vi-badge,
[data-theme="light"] .score-label,
[data-theme="light"] .ab-dd__arr,
[data-theme="light"] .amp-label,
[data-theme="light"] .notif-badge,
[data-theme="light"] .as-caret {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .03em;
}

/* forgehub hub-tab active 再一次强化 (上轮被覆盖) */
[data-theme="light"] .hub-tab.active,
[data-theme="light"] button.hub-tab.active,
[data-theme="light"] .hub-nav .hub-tab.active {
  color: #9a3412 !important;
  background: rgba(194,65,12,.10) !important;
  border-color: rgba(194,65,12,.3) !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
   Mobile responsive — 全站手机端适配 (2026-04-16)
   覆盖 brand-bar / hub-nav / tab-nav / cmd-header 等共享组件
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 全局锁 html 横向滚动, 防止子元素撑破视口 */
  html { overflow-x: hidden !important; max-width: 100vw !important; }
  /* 顶栏改 column + wrap, hub-nav 横向 scroll */
  .brand-bar {
    flex-wrap: wrap !important;
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  .brand-bar .brand-identity { flex: 1 1 auto; min-width: 0; }
  .brand-bar .brand-text { min-width: 0; }
  .brand-bar .brand-main { font-size: 14px !important; }
  .brand-bar .brand-sub { display: none !important; }
  .brand-bar .brand-spacer { display: none !important; }

  /* hub 导航横向 scroll, 不撑开顶栏 */
  .hub-nav {
    width: 100% !important;
    margin-left: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .hub-nav::-webkit-scrollbar { display: none; }
  .hub-nav-link, .hub-tab {
    flex-shrink: 0;
    font-size: 12px !important;
    padding: 5px 10px !important;
  }

  /* user-badge 简化 */
  .user-badge { font-size: 11px !important; padding: 3px 8px !important; }
  .theme-toggle { padding: 4px 8px !important; font-size: 13px !important; }

  /* 通用 tab/sub-nav 横向 scroll */
  .tab-nav, .ch-tabs, .cmd-tabs, .vi-cloud-tab,
  [class*="tab-bar"], [class*="tabnav"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .tab-nav::-webkit-scrollbar,
  .ch-tabs::-webkit-scrollbar { display: none; }

  /* 全局 body 不允许 h-scroll, 长内容收到容器 */
  body { overflow-x: hidden; }

  /* 通用 grid 强制 1 列 */
  .layer-cards,
  [class*="grid-cols-3"], [class*="grid-cols-4"], [class*="grid-cols-5"] {
    grid-template-columns: 1fr !important;
  }

  /* 表格容器允许内部 scroll */
  table, .data-table { font-size: 12px; }
  .table-wrap, [class*="table-container"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ab-group (action bar group) 允许 wrap, 并将 action-bar 收窄 */
  .ab-group { flex-wrap: wrap !important; max-width: 100% !important; min-width: 0 !important; }
  .action-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: wrap !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  /* 极窄屏 < iPhone SE 进一步压缩 */
  .brand-bar { padding: 6px 8px !important; }
  .brand-bar .brand-main { font-size: 13px !important; }
  .hub-nav-link, .hub-tab { font-size: 11px !important; padding: 4px 8px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Mobile UX hardening (Phase 2 — touch + font + bottom nav)
   2026-04-16: 触摸目标 ≥36px / 字体 ≥13px / 底部导航 (登录用户)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 触摸目标 - button / a / clickable */
  button:not(.theme-toggle):not(.x):not([aria-label*="close"]):not(.close),
  a.btn, a.button, .ab-btn, .hub-tab, .hub-nav-link {
    min-height: 36px;
    line-height: 1.3;
  }
  /* 输入框/下拉移动友好 */
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea {
    font-size: 16px !important;  /* iOS 不放大触发 zoom */
    min-height: 38px;
  }
  /* 文字最小 13px (除标识/badge) */
  body, p, td, th, div, li, span, label {
    font-size: max(13px, 1em);
  }
  /* 微小 badge/标签例外保持小字 */
  .badge, .tag, .chip, [class*="-badge"], [class*="-tag"], [class*="-chip"],
  .stat-lbl, .stat-breakdown, .miit, .gc-rank, .gc-lbl,
  .top3-row, .rr, .runners, [class*="-meta"], [class*="-time"], [class*="-date"] {
    font-size: 11px !important;
  }
  /* 移动顶栏 sticky 高度压低 */
  .brand-bar { padding-top: 6px !important; padding-bottom: 6px !important; }
  .brand-wordmark { font-size: 14px !important; }

  /* 移动底部留白 64px (避免被 bottom nav 遮挡) */
  body { padding-bottom: 64px; }
  footer.site-footer { margin-bottom: 0 !important; }
}

/* ── 移动底部固定导航 (登录用户可见,主入口) ──────────────────── */
@media (max-width: 768px) {
  .kg-mobile-bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; height: 56px;
    display: flex; align-items: stretch; z-index: 90;
    background: var(--bg-elevated, #1e293b);
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,.08));
    backdrop-filter: blur(12px);
  }
  .kg-mobile-bottom-nav a {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-decoration: none; color: var(--text-tertiary, #94a3b8);
    font-size: 10px; font-weight: 500; gap: 2px;
    transition: color .15s, background .15s;
  }
  .kg-mobile-bottom-nav a:hover,
  .kg-mobile-bottom-nav a.active {
    color: var(--accent, #6366f1);
    background: rgba(99,102,241,.06);
  }
  .kg-mobile-bottom-nav .icon { font-size: 20px; }
}
@media (min-width: 769px) {
  .kg-mobile-bottom-nav { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Mobile Polish (Phase 6) — 触感/安全区/iOS 细节/性能
   ═══════════════════════════════════════════════════════════════ */
/* iOS 安全区 (刘海屏/底部 home indicator) */
@supports (padding: env(safe-area-inset-top)) {
  .brand-bar {
    padding-top: max(6px, env(safe-area-inset-top)) !important;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .kg-mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(56px + env(safe-area-inset-bottom)) !important;
  }
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
  }
  .ws-drawer {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* iOS 取消默认蓝色 tap 高亮 */
* { -webkit-tap-highlight-color: transparent; }
button, a, .btn, .ab-btn, .hub-tab, .hub-nav-link, .ac, .gc, .ws-drawer a {
  -webkit-tap-highlight-color: rgba(99,102,241,.15);
}

/* iOS 长按禁选 (按钮区域) */
button, .btn, .hub-tab, .ab-btn, .stat, .gc, .ac {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
input, textarea, [contenteditable] {
  -webkit-user-select: auto;
  user-select: auto;
}

/* iOS Safari 100vh bug 修复 (使用 svh 单位) */
@supports (height: 100svh) {
  .ws-drawer { height: 100svh !important; }
}

/* 平滑滚动 */
html { scroll-behavior: smooth; }

/* 减少动画 (用户系统设置) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 横屏适配 (mobile landscape, 小高度设备) */
@media (max-height: 480px) and (orientation: landscape) {
  .brand-bar { padding-top: 4px !important; padding-bottom: 4px !important; }
  .kg-mobile-bottom-nav {
    height: 44px !important;
    padding-bottom: 0 !important;
  }
  .kg-mobile-bottom-nav .icon { font-size: 16px !important; }
  body { padding-bottom: 50px !important; }
}

/* 长按图片不弹默认菜单 (避免误触下载) */
img { -webkit-touch-callout: none; user-select: none; -webkit-user-drag: none; }

/* 首屏图片优先加载, 其他 lazy (HTML 已通过 _footer_scripts 自动加 loading=lazy) */
img:not([loading]) { loading: lazy; }

/* 移动端输入框聚焦时清晰边框 */
@media (max-width: 768px) {
  input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--accent, #6366f1) !important;
    outline-offset: 1px;
  }
}

/* 滚动条更细 (mobile webkit) */
@media (max-width: 768px) {
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-thumb { background: rgba(127,127,127,.3); border-radius: 2px; }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* ═══════════════════════════════════════════════════════════════
   全局返回按钮 .kg-back-btn (2026-04-22)
   Token-based, 白天/黑夜自动适配, 不冲突任何页面的主色
   用法: <a class="kg-back-btn" href="/">← 主页</a>
   ═══════════════════════════════════════════════════════════════ */
.kg-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
  user-select: none;
}
.kg-back-btn:hover {
  border-color: var(--text-secondary);
  background: var(--bg-hover);
  color: var(--text-primary);
  text-decoration: none;
}
.kg-back-btn:active { transform: translateY(0.5px); }
.kg-back-btn svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  flex-shrink: 0;
}
/* 紧凑变体: 只显示 icon (header 空间不够时用) */
.kg-back-btn--icon {
  padding: 7px;
  width: 32px;
  height: 32px;
  justify-content: center;
}
.kg-back-btn--icon .kg-back-label { display: none; }

/* ============================================================
 * Mobile DS v1.0 — 全局 Fallback (赵云 2026-04-30/05-01)
 * 给所有 hub 自动应用的兜底规则, 防止 mobile 横滚/挤压.
 * 各 hub 可在自己 css 里加 @media 进一步细化.
 * ============================================================ */
@media (max-width: 767px) {
  /* 防整页横滚 */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* 媒体不溢出 */
  img, video, iframe, canvas { max-width: 100%; height: auto; }

  /* 大表自动 scroll, 不撑破整页 */
  table { display: block; overflow-x: auto; max-width: 100%; }

  /* desktop sidebar 默认隐藏 (各 hub 用 .sidebar/.left-sidebar/.right-sidebar/.side-col 等通用类名) */
  body > .sidebar:not(.kg-mobile-drawer):not(.sidebar--open),
  body > aside.left-sidebar,
  body > aside.right-sidebar,
  .side-col {
    display: none !important;
  }

  /* 集团 brand-bar 默认让位 mobile-topbar (除非 hub 显式 .show-mobile) */
  body > .brand-bar:not(.show-mobile) { display: none !important; }

  /* 大网格自动单列 (用通用类名兜底) */
  .grid-2-col, .grid-3-col, .grid-4-col, .grid-6-col { grid-template-columns: 1fr !important; }

  /* 按钮 / input 中文底线 */
  input[type="text"], input[type="email"], input[type="password"], input[type="search"],
  textarea, select { font-size: 16px !important; }

  /* 卡片/容器 padding 缩小 (常用类名) */
  .container, .wrapper, .page-wrap { padding-left: 12px !important; padding-right: 12px !important; }

  /* footer 在 mobile 让位 Bottom Tab */
  body > .site-footer, body > footer.site-footer { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}