/* ═══════════════════════════════════════════════════════════════
   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
   ═══════════════════════════════════════════════════════════════ */

/* ═══ 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 */
  --brand-h:   44px;
  --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 共用顶栏) ═══ */
.brand-home{display:flex;align-items:center;text-decoration:none;opacity:.8;transition:opacity .15s}
.brand-home:hover{opacity:1;text-decoration:none}
.brand-wordmark{font-size:var(--fs-md);font-weight:800;letter-spacing:-.03em;color:var(--text-primary);font-family:var(--font-sans);white-space:nowrap}
.brand-dot{color:var(--accent)}
.brand-title,.brand-main,.topbar-title{font-size:var(--fs-md);font-weight:700;color:var(--text-primary)}
.brand-sub{font-size:var(--fs-sm);color:var(--text-tertiary);margin-left:8px}

/* ═══ 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 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 5px; }
::-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;
}