/* ================================================================
   喊单研究 · 统一设计系统
   两页共用: index.html(效应看板) + people.html(人物榜)
   约定: 亮色默认; body.dark 或 :root[data-theme=dark] 切暗色
   ================================================================ */

:root, :root[data-theme=light]{
  /* 底色 */
  --bg:#f6f7f9;            /* 页面底 */
  --card:#ffffff;          /* 卡片/面板 */
  --chip:#eef1f5;          /* 次级底/hover */
  --border:#e4e8ef;
  --border-strong:#d3dae4;
  /* 文字 */
  --text:#101828;
  --muted:#667082;
  --faint:#98a2b3;
  /* 品牌与数据色 */
  --accent:#2757d1;        /* 专业蓝 */
  --accent-weak:#eaf0fe;
  --up:#0a8a55;
  --down:#d92d20;
  --warn:#b7690a;
  /* 效果 */
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg:0 8px 24px -6px rgba(16,24,40,.14);
  --radius:10px;
}
body.dark, :root[data-theme=dark]{
  --bg:#0c0f14;
  --card:#141922;
  --chip:#1d2430;
  --border:#242c3a;
  --border-strong:#334055;
  --text:#e7ecf3;
  --muted:#8e99ad;
  --faint:#5d6778;
  --accent:#5b8def;
  --accent-weak:#1a2440;
  --up:#34d399;
  --down:#f87171;
  --warn:#f0b429;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 10px 30px -8px rgba(0,0,0,.55);
}

/* ---------- 基座 ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .18s,color .18s;
}
::selection{background:var(--accent-weak)}

/* ---------- 统一导航 ---------- */
.tnav{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 0 12px; margin-bottom:8px;
  border-bottom:1px solid var(--border);
}
.tnav .brand{
  font-size:17px; font-weight:800; letter-spacing:.2px;
  display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text);
}
.tnav .brand .logo{
  width:26px;height:26px;border-radius:8px;background:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:14px;font-weight:900;
}
.tnav .navlink{
  padding:6px 13px;border-radius:8px;font-size:13.5px;font-weight:550;
  color:var(--muted);text-decoration:none;border:1px solid transparent;
}
.tnav .navlink:hover{color:var(--text);background:var(--chip)}
.tnav .navlink.on{color:var(--accent);background:var(--accent-weak);font-weight:650}
.tnav .spacer{flex:1}
.tnav .sub{font-size:12px;color:var(--muted)}

/* ---------- 按钮 ---------- */
.btn{
  border:1px solid var(--border); background:var(--card); color:var(--text);
  border-radius:8px; padding:6px 12px; cursor:pointer; font-size:13px;
  text-decoration:none; display:inline-flex; align-items:center; gap:5px;
  transition:border-color .12s, background .12s;
}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn.active,.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.active:hover,.btn.primary:hover{color:#fff;filter:brightness(1.06)}

/* ---------- 卡片/面板 ---------- */
.card,.panel{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.panel{padding:14px 16px}
.card{padding:12px 14px}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{
  color:var(--muted); font-weight:550; font-size:12px; text-align:left;
  padding:8px 10px; border-bottom:1px solid var(--border-strong);
  position:sticky; top:0; background:var(--card); z-index:2; white-space:nowrap;
}
td{padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
tbody tr:hover td{background:var(--chip)}
tbody tr:last-child td{border-bottom:none}

/* ---------- 输入 ---------- */
input,select{
  border:1px solid var(--border); background:var(--card); color:var(--text);
  border-radius:8px; padding:6px 10px; font-size:13px; outline:none;
  transition:border-color .12s;
}
input:focus,select:focus{border-color:var(--accent)}
input::placeholder{color:var(--faint)}

/* ---------- 语义色 ---------- */
.up{color:var(--up)} .down{color:var(--down)}
.sub{color:var(--muted);font-size:12px}
.num{font-variant-numeric:tabular-nums}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--faint)}
::-webkit-scrollbar-track{background:transparent}