/* ==========================================================================
   人间美事 AI 内容台 · 设计系统 v3
   ──────────────────────────────────────────────────────────────────────────
   学习来源（真实开源项目，已 clone 到本地研读源码）：
     · radix-ui/themes   → 环形描边式阴影、::before/::after 边缘分层、
                            可缩放圆角刻度、alpha 灰阶
     · dubinc/dub        → 语义化 token（bg/border/content × 三档）、
                            网格 + 径向渐隐背景、玻璃顶栏、等宽数字
     · kasonye/ui-aesthetics-skill → 反模式清单
   ──────────────────────────────────────────────────────────────────────────
   本版解决的问题：上一版"太平"——只有 1px 发丝线，没有层次与纵深。
   做法不是加装饰，而是给结构加**受控的纵深**：
     1. 环形描边（ring）替代纯边框 → 边缘精确，这是"苹果感"的真正来源
     2. 极淡网格 + 径向渐隐 → 提供科技感的"结构暗示"，不抢内容
     3. 玻璃顶栏 + 分层表面 → 现代产品的空间感
     4. 收紧圆角刻度、拉开字重差 → 精确感来自克制
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* 中性灰阶：带冷调，接近 Apple / Linear 观感 */
  --gray-0:#ffffff;
  --gray-25:#fcfcfd;
  --gray-50:#f8f9fa;
  --gray-100:#f1f2f4;
  --gray-200:#e6e7ea;
  --gray-300:#d5d7db;
  --gray-400:#a8abb2;
  --gray-500:#787c85;
  --gray-600:#565a63;
  --gray-700:#3a3d44;
  --gray-800:#232529;
  --gray-900:#141518;

  /* alpha 层级：文字不用纯灰，用 alpha 叠底，层次更细腻（Radix 思路） */
  --a-line:rgba(20,21,24,.08);
  --a-line-strong:rgba(20,21,24,.13);
  --a-line-soft:rgba(20,21,24,.055);
  --a-text-1:rgba(20,21,24,.94);
  --a-text-2:rgba(20,21,24,.66);
  --a-text-3:rgba(20,21,24,.45);
  --a-text-4:rgba(20,21,24,.30);

  /* 唯一强调色：克制的金褐 */
  --accent:#8a6a35;
  --accent-hi:#a07c3f;
  --accent-lo:#6f5429;
  --accent-a:rgba(138,106,53,.10);
  --accent-ring:rgba(138,106,53,.35);

  --dy:#b0453b;
  --xhs:#a83e66;

  /* ── 阴影：第一层 `0 0 0 1px` 是边缘定义而非阴影（学自 radix shadow-2/3/4） ── */
  --ring-1:0 0 0 1px var(--a-line-soft);
  --surface-1:
    0 0 0 1px var(--a-line-soft),
    0 1px 2px -1px rgba(20,21,24,.06);
  --surface-2:
    0 0 0 1px var(--a-line),
    0 1px 2px -1px rgba(20,21,24,.06),
    0 3px 8px -3px rgba(20,21,24,.05);
  --overlay-1:
    0 0 0 1px var(--a-line),
    0 8px 40px rgba(20,21,24,.07),
    0 12px 32px -16px rgba(20,21,24,.10);

  /* 排版：字重差异拉大，字号差异收紧 */
  --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px;
  --fs-15:15px; --fs-17:17px; --fs-20:20px; --fs-24:24px;
  --lh-tight:1.28; --lh-base:1.55;
  --tk-tight:-.011em; --tk-caps:.07em;

  /* 间距：4px 基准 */
  --u:4px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:72px;

  /* 圆角刻度（学自 radix radius-1..6） */
  --r1:4px; --r2:6px; --r3:8px; --r4:10px; --r5:12px; --r6:16px; --r-full:999px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease:cubic-bezier(.32,.72,0,1);
  --t-fast:120ms; --t:180ms;

  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro SC",
         "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-num:"SF Pro Display", "SF Pro Text", -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --w:1560px;          /* 内容宽度：够宽但不至于让视线跨度过大 */
  --topbar-h:52px;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }

/* ⚠️ 必须放在所有组件规则之前：`[hidden]` 的 display:none 来自浏览器 UA 样式表，
   而作者层的 `.btn{display:inline-flex}` 会压过 UA 层，导致 hidden 属性失效。
   这条统一兜底，任何用了 hidden 的元素都真正隐藏。 */
[hidden] { display:none !important; }

body {
  margin:0; min-height:100vh; color:var(--gray-900);
  font-family:var(--font); font-size:var(--fs-13); line-height:var(--lh-base);
  letter-spacing:var(--tk-tight);
  background:var(--gray-50);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ── 背景：极淡网格 + 径向渐隐（学自 dub 的 Background 组件） ── */
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(20,21,24,.032) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,21,24,.032) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 0%, transparent 78%);
  mask-image:radial-gradient(ellipse 90% 55% at 50% 0%, #000 0%, transparent 78%);
}
body::after {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 45% at 50% -8%, rgba(138,106,53,.055), transparent 70%);
}

button,input,select { font:inherit; color:inherit; letter-spacing:inherit; }
button { cursor:pointer; background:none; border:none; padding:0; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
::selection { background:var(--accent-a); }

/* 焦点环：双层（外白内色），任何背景上都可见 */
:focus-visible {
  outline:none;
  box-shadow:0 0 0 2px var(--gray-0), 0 0 0 4px var(--accent-ring);
  border-radius:var(--r2);
}

.num { font-family:var(--font-num); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

.cap {
  font-size:var(--fs-10); letter-spacing:var(--tk-caps); text-transform:uppercase;
  color:var(--a-text-4); font-weight:590;
}

/* ---------------------------------------------------------------- 顶栏 */
.topbar {
  position:sticky; top:0; z-index:60; height:var(--topbar-h);
  background:rgba(252,252,253,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--a-line);
}
.topbar::after {   /* 下沿高光，制造悬浮感 */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
}
.topbar-in, .page-in { max-width:var(--w); margin:0 auto; padding:0 var(--s6); }
.topbar-in { height:100%; display:flex; align-items:center; gap:var(--s6); position:relative; z-index:1; }

.brand { display:flex; align-items:center; gap:10px; }
.logo {
  width:26px; height:26px; border-radius:var(--r3); flex:none;
  display:grid; place-items:center;
  background:linear-gradient(160deg, var(--gray-800), var(--gray-900));
  color:#fff; font-size:var(--fs-12); font-weight:640; letter-spacing:.02em;
  box-shadow:0 0 0 1px rgba(20,21,24,.06), 0 1px 2px rgba(20,21,24,.18),
             inset 0 1px 0 rgba(255,255,255,.14);
}
.brand-name { font-size:var(--fs-13); font-weight:620; letter-spacing:var(--tk-tight); }

.tabs { display:flex; gap:var(--s5); height:100%; }
.tab {
  display:flex; align-items:center; position:relative;
  font-size:var(--fs-13); font-weight:510; color:var(--a-text-3);
  transition:color var(--t) var(--ease);
}
.tab:hover:not(.is-disabled) { color:var(--a-text-1); }
.tab.is-active { color:var(--gray-900); font-weight:620; }
.tab.is-active::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--gray-900); border-radius:1px;
}
.tab.is-disabled { color:var(--a-text-4); cursor:default; }

.top-right { margin-left:auto; display:flex; align-items:center; gap:var(--s2); }
/* 状态胶囊：带弱底色的小面 */
.status {
  display:inline-flex; align-items:center; gap:6px;
  height:24px; padding:0 9px; border-radius:var(--r-full);
  background:var(--gray-100); box-shadow:var(--ring-1);
  font-size:var(--fs-11); color:var(--a-text-2); font-weight:510;
}
.status-dot {
  width:6px; height:6px; border-radius:50%; background:var(--gray-400); flex:none;
  transition:background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.status.is-ok .status-dot { background:#2f9e58; box-shadow:0 0 0 2.5px rgba(47,158,88,.16); }
.status.is-bad .status-dot { background:#c4563c; box-shadow:0 0 0 2.5px rgba(196,86,60,.16); }

/* 账号区 */
.account { display:inline-flex; align-items:center; gap:4px; }
.account[hidden] { display:none; }
.account-name {
  font-size:var(--fs-11); font-weight:540; color:var(--a-text-2);
  padding:0 7px; height:24px; display:inline-flex; align-items:center;
  border-radius:var(--r-full); background:var(--accent-a);
  box-shadow:0 0 0 1px var(--accent-ring); color:var(--accent-lo);
}

/* ---------------------------------------------------------------- 登录弹层 */
.modal-mask {
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(20,21,24,.28);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:maskIn 160ms var(--ease-out);
}
.modal-mask[hidden] { display:none; }
@keyframes maskIn { from { opacity:0; } }
.modal {
  width:min(360px, calc(100vw - 32px));
  padding:var(--s5); border-radius:var(--r6);
  background:var(--gray-0); box-shadow:var(--overlay-1);
  animation:modalIn 220ms var(--ease-out);
}
@keyframes modalIn {
  from { opacity:0; transform:translateY(6px) scale(.98); }
}
.modal-title { margin:0 0 6px; font-size:var(--fs-15); font-weight:640; letter-spacing:var(--tk-tight); }
.modal-note { margin:0 0 var(--s4); font-size:var(--fs-12); color:var(--a-text-3); line-height:1.6; }
.modal-field { display:block; margin-bottom:var(--s3); }
.modal-field > span {
  display:block; margin-bottom:5px;
  font-size:var(--fs-11); font-weight:540; color:var(--a-text-2);
}
.modal-field .input { width:100%; height:32px; font-size:var(--fs-13); }
.modal-error {
  margin:0 0 var(--s3); padding:7px 10px; border-radius:var(--r2);
  background:rgba(196,86,60,.08); box-shadow:inset 0 0 0 1px rgba(196,86,60,.22);
  font-size:var(--fs-12); color:#a8402c;
}
.modal-error[hidden] { display:none; }
.modal-actions { display:flex; justify-content:flex-end; gap:var(--s2); margin-top:var(--s4); }

/* ---------------------------------------------------------------- 页面 */
.page { position:relative; z-index:1; padding-bottom:var(--s10); }
.page-in { display:flex; flex-direction:column; gap:var(--s6); padding-top:var(--s7); }

/* 单一面板：监控词与爆文选合并，内部用发丝线分区，不再套两层卡片 */
.panel-merged {
  position:relative; border-radius:var(--r6);
  background:var(--gray-0); box-shadow:var(--surface-1);
  overflow:hidden;
}
.panel-merged::before {
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--a-line-soft);
}
.section-head {
  display:flex; align-items:center; gap:var(--s4);
  padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--a-line-soft);
}
/* 合并后的第二个标题：上方加分隔，视觉上仍是一个面板内的分区 */
.section-head--sub { border-top:1px solid var(--a-line); }
.section-title {
  margin:0; font-size:var(--fs-15); font-weight:640; letter-spacing:var(--tk-tight);
}
.section-note { font-size:var(--fs-12); color:var(--a-text-3); font-weight:450; }
.section-actions { margin-left:auto; display:flex; align-items:center; gap:var(--s2); }
.section-body { padding:var(--s5); }
/* 概览区上下收紧，避免与筛选条之间出现大空隙 */
.section-body--tight { padding:var(--s5) var(--s5) var(--s4); }

/* ---------------------------------------------------------------- 控件 */
.input, .select {
  height:30px; padding:0 10px; border-radius:var(--r3);
  border:1px solid var(--a-line-strong); background:var(--gray-0);
  font-size:var(--fs-12); color:var(--gray-900);
  box-shadow:0 1px 1px rgba(20,21,24,.03);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  outline:none;
}
.input::placeholder { color:var(--a-text-4); }
.input:hover, .select:hover { border-color:var(--gray-400); }
.input:focus, .select:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-a), 0 1px 1px rgba(20,21,24,.03);
}
.select {
  padding-right:26px; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 .5l5 5 5-5' fill='none' stroke='%23787c85' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 9px center;
}

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  height:30px; padding:0 11px; border-radius:var(--r3);
  border:1px solid var(--a-line-strong); background:var(--gray-0);
  font-size:var(--fs-12); font-weight:540; color:var(--gray-700);
  box-shadow:0 1px 1px rgba(20,21,24,.03);
  transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
             transform 80ms var(--ease);
}
.btn:hover:not(:disabled) { background:var(--gray-50); color:var(--gray-900); border-color:var(--gray-400); }
.btn:active:not(:disabled) { transform:scale(.985); background:var(--gray-100); }
.btn:disabled { color:var(--a-text-4); border-color:var(--a-line); background:var(--gray-25); cursor:default; box-shadow:none; }

/* 主按钮：内高光 + 下沉阴影，像实物而不是一块色 */
.btn--primary {
  color:#fff; border-color:transparent; font-weight:570;
  background:linear-gradient(180deg, var(--accent-hi), var(--accent));
  box-shadow:0 1px 2px rgba(111,84,41,.24), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn--primary:hover:not(:disabled) {
  color:#fff; background:linear-gradient(180deg, var(--accent), var(--accent-lo));
}
.btn--primary:active:not(:disabled) {
  background:var(--accent-lo);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.18);
}
.btn--quiet { border-color:transparent; background:transparent; box-shadow:none; color:var(--a-text-3); }
.btn--quiet:hover:not(:disabled) { background:var(--gray-100); border-color:transparent; color:var(--gray-900); }

.kbd {
  display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px;
  border-radius:var(--r1); background:var(--gray-100);
  box-shadow:0 0 0 1px var(--a-line-soft), inset 0 -1px 0 var(--a-line);
  font-size:9.5px; font-family:var(--font-mono); color:var(--a-text-3);
}

/* ---------------------------------------------------------------- 视图切换
   两个视图共用一套「筛选 + 列表」框架，所以切换器做成文字 tab，
   与区块标题同一位置，不额外占一行 */
.view-switch { display:flex; gap:var(--s5); }
.vs-btn {
  position:relative; font-size:var(--fs-15); font-weight:560;
  color:var(--a-text-3); letter-spacing:var(--tk-tight);
  transition:color var(--t) var(--ease);
}
.vs-btn:hover { color:var(--gray-900); }
.vs-btn.is-active { color:var(--gray-900); font-weight:660; }
.vs-btn.is-active::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:2px; border-radius:1px; background:var(--accent);
}

/* ---------------------------------------------------------------- 涨粉榜
   行结构对齐巨量星图原版：9 列严格对齐，行高压到 44px。
   列定义抽成变量，表头与数据行共用，**对齐由构造保证**。 */
/* 涨粉榜表格收窄：9 列摊在 1560px 上会显得松散，
   限到 1180px 让列与列紧凑，也更接近星图原版的观感 */
.track--rank {
  padding:0 var(--s5) var(--s5);
  max-width:1180px;
}
:root {
  /* 排名 | 头像 | 达人 | 内容标签 | 粉丝量 | 商单完成度 | 作品数 | 涨粉量 | 播放量 */
  --rk-cols: 46px 36px minmax(0,1fr) 64px 60px 62px 58px 62px 58px;
  --rk-gap: 8px;
}

/* 表头：与数据行同网格 */
.rhead {
  display:grid; grid-template-columns:var(--rk-cols); gap:var(--rk-gap);
  align-items:center; padding:0 var(--s2); height:30px;
  border-bottom:1px solid var(--a-line);
  font-size:11px; color:var(--a-text-3); font-weight:560;
  letter-spacing:.02em;
}
.rhead > span:nth-child(n+5) { text-align:right; }

.rlist { display:flex; flex-direction:column; }
.ritem {
  display:grid; grid-template-columns:var(--rk-cols); gap:var(--rk-gap);
  align-items:center; padding:6px var(--s2);
  border-bottom:1px solid var(--a-line-soft);
  transition:background var(--t-fast) var(--ease);
}
.ritem:hover { background:var(--gray-50); }
.ritem:last-child { border-bottom:0; }

/* 排名 + 变化徽标：竖排，徽标压在数字下方 —— 原版就是这个结构 */
.ritem-rank {
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.ritem-rank b {
  font-size:var(--fs-13); font-weight:600; color:var(--a-text-2); line-height:1;
}
.ritem-rank .chg {
  display:inline-flex; align-items:center; justify-content:center;
  height:14px; padding:0 5px; border-radius:3px;
  font-size:9px; font-weight:660; line-height:1; white-space:nowrap;
}
/* 新上榜：实心橙（对齐原版配色语义） */
.chg--new { background:#f0a04b; color:#fff; }
.chg--up { background:rgba(47,122,72,.12); color:#2f7a48; }
.chg--down { background:rgba(196,86,60,.12); color:#a8402c; }

/* 头像：固定方形 + 圆形裁切，任何比例的图都不变形 */
.ritem-ava {
  position:relative; width:36px; height:36px; border-radius:50%;
  overflow:hidden; background:var(--gray-100); flex:none;
  box-shadow:0 0 0 1px var(--a-line);
}
.ritem-ava img { width:100%; height:100%; object-fit:cover; display:block; }
.ritem-ava .ph {
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:9px; color:var(--a-text-4);
}

/* 达人块：昵称 + 性别/地域 上下排 */
.ritem-id { display:flex; flex-direction:column; gap:1px; min-width:0; }
.ritem-name {
  font-size:var(--fs-13); font-weight:540; color:var(--gray-900); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ritem-loc {
  display:flex; align-items:center; gap:4px;
  font-size:11px; color:var(--a-text-4); line-height:1.3;
}
.ritem-loc > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gd { font-style:normal; font-size:10px; }
.gd--m { color:#4a7bb5; }
.gd--f { color:#c0658f; }

.ritem-cat {
  font-size:11.5px; color:var(--a-text-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ritem-n {
  font-size:var(--fs-12); color:var(--a-text-2); text-align:right;
  font-variant-numeric:tabular-nums;
}
/* 涨粉量是榜单排序依据，做视觉重点 */
.ritem-n--hot { font-weight:640; color:var(--gray-900); }

/* ---------------------------------------------------------------- 筛选
   监控词并入此区，作为「赛道」维度，与平台/分类同级；筛选用文字 tab + 下划线 */
.filters {
  display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap;
  padding:0 var(--s5) var(--s4);
}
.fgroup { display:flex; gap:var(--s4); align-items:center; flex-wrap:wrap; }
.fgroup > .cap { margin-right:var(--s1); }
.fkw-list {
  display:flex; gap:var(--s4); align-items:center; flex-wrap:wrap;
}
.fbtn {
  position:relative; font-size:var(--fs-12); font-weight:510; color:var(--a-text-3);
  transition:color var(--t) var(--ease);
  white-space:nowrap;
}
.fbtn:hover { color:var(--gray-900); }
.fbtn.is-active { color:var(--gray-900); font-weight:620; }
.fbtn.is-active::after {
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1.5px;
  border-radius:1px; background:var(--gray-900);
}
/* 选中的赛道上加一个点，与平台/分类的纯文字 tab 区分开 */
.fkw.is-active::before {
  content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--accent); margin-right:5px; vertical-align:middle;
}
.filters .input { margin-left:auto; width:190px; }

/* ---------------------------------------------------------------- 监控词编辑面板 */
.kw-editor {
  margin:0 var(--s5) var(--s4);
  padding:var(--s4);
  border-radius:var(--r4);
  background:var(--gray-50);
  box-shadow:inset 0 0 0 1px var(--a-line);
}
.kw-editor[hidden] { display:none; }
.kw-editor-head {
  display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4);
}
.kw-editor-actions { margin-left:auto; display:flex; gap:var(--s2); }

.kw-list { display:flex; flex-wrap:wrap; gap:var(--s2); }
/* 编辑态的删除热区 */
.kw {
  display:inline-flex; align-items:center; gap:2px;
  height:28px; padding:0 6px 0 10px; border-radius:var(--r2);
  background:var(--gray-0); box-shadow:var(--ring-1);
  font-size:var(--fs-12); font-weight:530; color:var(--gray-700);
}
.kw.is-new { background:var(--accent-a); box-shadow:0 0 0 1px var(--accent-ring); color:var(--accent-lo); }
.kw-x {
  width:18px; height:18px; border-radius:var(--r1); display:grid; place-items:center;
  font-size:var(--fs-13); line-height:1; color:var(--a-text-3); flex:none;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.kw-x:hover { background:rgba(20,21,24,.12); color:var(--gray-900); }
.kw-add { display:flex; align-items:center; gap:var(--s2); margin-top:var(--s4); }
.kw-add { display:flex; align-items:center; gap:var(--s2); margin-top:var(--s4); }
.kw-add[hidden] { display:none; }
/* 只读标记：小标签，明确告知状态而不是让人误以为坏了 */
.readonly-tag {
  display:inline-flex; align-items:center; height:19px; padding:0 7px;
  border-radius:var(--r1); background:var(--gray-100); box-shadow:var(--ring-1);
  font-size:10.5px; font-weight:540; color:var(--a-text-3);
}

/* ---------------------------------------------------------------- 概览
   左侧：一行可扫读摘要 + 平台配比条
   右侧：本期之最焦点卡（带封面）—— 给统计区一个视觉落点 */
.summary { display:block; }
.summary-top {
  display:flex; align-items:center; gap:var(--s6); flex-wrap:wrap;
}
.summary-left { display:flex; flex-direction:column; gap:var(--s3); min-width:0; }

.summary-seg { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.summary-seg .sum { font-size:var(--fs-12); color:var(--a-text-3); font-weight:500; }
.summary-seg .sum b {
  font-size:var(--fs-20); font-weight:640; color:var(--gray-900);
  letter-spacing:-.02em; margin-right:3px;
}
.summary-seg .sum--warn b { color:#c4563c; }
.summary-seg i { color:var(--a-text-4); font-style:normal; }

.split { display:flex; align-items:center; gap:12px; }
.split-bar {
  display:flex; height:4px; width:180px; border-radius:var(--r-full);
  overflow:hidden; background:var(--gray-200);
  box-shadow:inset 0 1px 1px rgba(20,21,24,.04);
}
.split-dy { background:var(--dy); }
.split-xhs { background:var(--xhs); }
.split-legend {
  display:flex; gap:14px; font-size:var(--fs-11);
  color:var(--a-text-3); font-weight:500;
}
.split-legend b { color:var(--gray-900); font-weight:620; }

/* 本期之最：统计区的视觉焦点 */
.best {
  display:flex; align-items:center; gap:var(--s3);
  margin-left:auto; padding:var(--s2) var(--s4) var(--s2) var(--s2);
  border-radius:var(--r4); background:var(--gray-50);
  box-shadow:inset 0 0 0 1px var(--a-line);
  transition:background var(--t) var(--ease), box-shadow var(--t) var(--ease);
  max-width:420px;
}
.best:hover { background:var(--accent-a); box-shadow:inset 0 0 0 1px var(--accent-ring); }
.best-thumb {
  position:relative; width:48px; height:48px; border-radius:var(--r3);
  overflow:hidden; flex:none; background:var(--gray-200);
  box-shadow:0 0 0 1px var(--a-line-soft);
}
.best-thumb img { width:100%; height:100%; object-fit:cover; }
.best-thumb .ph { position:absolute; inset:0; display:grid; place-items:center; font-size:9px; color:var(--a-text-4); }
.best-body { display:flex; flex-direction:column; gap:1px; min-width:0; }
.best-k { font-size:10px; letter-spacing:var(--tk-caps); text-transform:uppercase; color:var(--a-text-4); font-weight:580; }
.best-v { font-size:var(--fs-20); font-weight:680; color:var(--accent); line-height:1.1; letter-spacing:-.02em; }
.best-t {
  font-size:var(--fs-12); color:var(--a-text-2); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.best-a { font-size:var(--fs-11); color:var(--a-text-3); }

@media (max-width:800px) {
  .best { margin-left:0; max-width:100%; }
}

/* ---------------------------------------------------------------- 筛选
   监控词并入此区，作为「赛道」维度，与平台/分类同级；筛选用文字 tab + 下划线 */
.filters {
  display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap;
  padding:0 var(--s5) var(--s4);
}
.fgroup { display:flex; gap:var(--s4); align-items:center; flex-wrap:wrap; }
.fgroup > .cap { margin-right:var(--s1); }
.fkw-list {
  display:flex; gap:var(--s4); align-items:center; flex-wrap:wrap;
}
.fbtn {
  position:relative; font-size:var(--fs-12); font-weight:510; color:var(--a-text-3);
  transition:color var(--t) var(--ease);
  white-space:nowrap;
}
.fbtn:hover { color:var(--gray-900); }
.fbtn.is-active { color:var(--gray-900); font-weight:620; }
.fbtn.is-active::after {
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1.5px;
  border-radius:1px; background:var(--gray-900);
}
/* 选中的赛道上加一个点，与平台/分类的纯文字 tab 区分开 */
.fkw.is-active::before {
  content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--accent); margin-right:5px; vertical-align:middle;
}
.filters .input { margin-left:auto; width:190px; }

/* ---------------------------------------------------------------- 监控词编辑面板 */
.kw-editor {
  margin:0 var(--s5) var(--s4);
  padding:var(--s4);
  border-radius:var(--r4);
  background:var(--gray-50);
  box-shadow:inset 0 0 0 1px var(--a-line);
}
.kw-editor[hidden] { display:none; }
.kw-editor-head {
  display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4);
}
.kw-editor-actions { margin-left:auto; display:flex; gap:var(--s2); }

.kw-list { display:flex; flex-wrap:wrap; gap:var(--s2); }
/* 编辑态的删除热区 */
.kw {
  display:inline-flex; align-items:center; gap:2px;
  height:28px; padding:0 6px 0 10px; border-radius:var(--r2);
  background:var(--gray-0); box-shadow:var(--ring-1);
  font-size:var(--fs-12); font-weight:530; color:var(--gray-700);
}
.kw.is-new { background:var(--accent-a); box-shadow:0 0 0 1px var(--accent-ring); color:var(--accent-lo); }
.kw-x {
  width:18px; height:18px; border-radius:var(--r1); display:grid; place-items:center;
  font-size:var(--fs-13); line-height:1; color:var(--a-text-3); flex:none;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.kw-x:hover { background:rgba(20,21,24,.12); color:var(--gray-900); }
.kw-add { display:flex; align-items:center; gap:var(--s2); margin-top:var(--s4); }
.kw-add { display:flex; align-items:center; gap:var(--s2); margin-top:var(--s4); }
.kw-add[hidden] { display:none; }
/* 只读标记：小标签，明确告知状态而不是让人误以为坏了 */
.readonly-tag {
  display:inline-flex; align-items:center; height:19px; padding:0 7px;
  border-radius:var(--r1); background:var(--gray-100); box-shadow:var(--ring-1);
  font-size:10.5px; font-weight:540; color:var(--a-text-3);
}

/* ---------------------------------------------------------------- 概览 */
.summary { display:flex; flex-direction:column; gap:var(--s4); }
.summary-line { display:flex; align-items:flex-end; gap:var(--s6); flex-wrap:wrap; }
.summary-item { display:flex; flex-direction:column; gap:2px; }
.summary-value {
  font-size:var(--fs-24); font-weight:600; line-height:1;
  font-family:var(--font-num); letter-spacing:-.02em;
}
.summary-value--accent { color:var(--accent); }
.summary-value--warn { color:#c4563c; }
.summary-label { font-size:var(--fs-11); font-weight:500; color:var(--a-text-3); }

.split { display:flex; align-items:center; gap:12px; }
.split-bar {
  display:flex; height:4px; width:200px; border-radius:var(--r-full);
  overflow:hidden; background:var(--gray-200);
  box-shadow:inset 0 1px 1px rgba(20,21,24,.04);
}
.split-dy { background:var(--dy); }
.split-xhs { background:var(--xhs); }
.split-legend { display:flex; gap:14px; font-size:var(--fs-11); color:var(--a-text-3); font-weight:500; }
.split-legend i { display:inline-block; width:6px; height:6px; border-radius:2px; margin-right:5px; }

/* ---------------------------------------------------------------- 筛选 */
.filters {
  display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap;
  padding:0 var(--s5) var(--s4);
}
.fgroup { display:flex; gap:var(--s4); align-items:center; }
.fbtn {
  position:relative; font-size:var(--fs-12); font-weight:510; color:var(--a-text-3);
  transition:color var(--t) var(--ease);
}
.fbtn:hover { color:var(--gray-900); }
.fbtn.is-active { color:var(--gray-900); font-weight:600; }
.fbtn.is-active::after {
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1.5px;
  border-radius:1px; background:var(--gray-900);
}
.filters .input { margin-left:auto; width:190px; }

/* ---------------------------------------------------------------- 赛道 */
.tracks { display:flex; flex-direction:column; }
.track { padding:0 var(--s5) var(--s5); }
.track + .track { padding-top:var(--s5); border-top:1px solid var(--a-line-soft); }
.track-head {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4) 0 var(--s3);
}
.track-name { font-size:var(--fs-14); font-weight:640; letter-spacing:var(--tk-tight); }
.track-badge {
  display:inline-flex; align-items:center; height:19px; padding:0 6px;
  border-radius:var(--r1); background:var(--gray-100); box-shadow:var(--ring-1);
  font-size:10.5px; font-weight:530; color:var(--a-text-2); font-family:var(--font-num);
}
.track-flag { font-size:10.5px; font-weight:530; color:#a8792c; }
.track-meta {
  margin-left:auto; font-size:10.5px; color:var(--a-text-4);
  font-family:var(--font-num); letter-spacing:.01em;
}

/* ── 列说明与数据行共用同一套网格模板 ──
   对齐问题的根因：说明条用 flex、数据行用 grid，两套算法推不出同一套列宽。
   这里把列定义抽成变量，两边都用 grid，**对齐由构造保证**，不再靠手调宽度。 */
:root {
  --row-cols: 28px 64px minmax(0, 1fr) 96px 104px;
  --row-gap: var(--s4);
}

/* 列说明条：与数据行同网格，仅单元格对齐方式不同 */
.col-legend {
  display:grid; align-items:center;
  grid-template-columns:var(--row-cols);
  gap:var(--row-gap);
  padding:0 var(--s3); height:28px; margin-bottom:2px;
  border-radius:var(--r2); background:var(--gray-50);
  box-shadow:inset 0 0 0 1px var(--a-line-soft);
  font-size:10px; letter-spacing:var(--tk-caps); text-transform:uppercase;
  color:var(--a-text-4); font-weight:570;
}
.col-legend .lead { grid-column:2 / 4; }   /* 覆盖封面 + 正文 + 账号三栏 */
.col-legend .c1 { text-align:right; }
.col-legend .c2 { text-align:right; }

/* ── 数据行 ── */
.list { display:flex; flex-direction:column; gap:1px; }
.item {
  display:grid; align-items:center;
  grid-template-columns:var(--row-cols);
  gap:var(--row-gap); padding:10px var(--s3); border-radius:var(--r3);
  transition:background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.item:hover { background:var(--gray-50); box-shadow:inset 0 0 0 1px var(--a-line-soft); }
.item:active { background:var(--gray-100); }

.item-rank {
  font-size:var(--fs-12); font-weight:550; color:var(--a-text-4);
  font-family:var(--font-num); text-align:right;
}
.item.is-1 .item-rank { color:var(--accent); font-weight:680; }

/* 封面：从 40×52 放大到 64×84，接近真实浏览比例 */
.item-thumb {
  position:relative; width:64px; height:84px; border-radius:var(--r3);
  overflow:hidden; background:var(--gray-100);
  box-shadow:0 0 0 1px var(--a-line-soft), 0 1px 3px rgba(20,21,24,.08);
}
.item-thumb img { width:100%; height:100%; object-fit:cover; }
.item-thumb .ph {
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:10px; color:var(--a-text-4);
}
.item.is-1 .item-thumb {
  box-shadow:0 0 0 1px var(--accent-ring), 0 2px 6px rgba(138,106,53,.16);
}

.item-main { min-width:0; max-width:100%; }
/* 标题：超长一律截断。max-width 是硬上限——即使列被撑宽也不会失控 */
.item-title {
  display:block; max-width:62ch;
  font-size:var(--fs-13); font-weight:530; color:var(--gray-900);
  line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.item.is-1 .item-title { font-weight:620; }
/* 副信息行：单行不换行；只让「账号名」截断，平台/分类/时间/新增 永远可见 */
.item-sub {
  display:flex; align-items:center; gap:6px; flex-wrap:nowrap;
  max-width:62ch; overflow:hidden;
  margin-top:2px; font-size:var(--fs-11); color:var(--a-text-3);
}
.item-sub .who {
  min-width:0; max-width:18ch; flex:0 1 auto;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.item-sub > * { flex:none; }        /* 其余标记不允许被压缩 */
.item-sub .who { flex:0 1 auto; }   /* 只有账号名可压缩 */
.item-sub .plat { font-weight:570; }
.item-sub .plat--dy { color:var(--dy); }
.item-sub .plat--xhs { color:var(--xhs); }
.item-sub .sep { color:var(--a-text-4); }
.item-sub .cls { font-weight:510; }
.item-sub .cls--head { color:#2f7a48; }
.item-sub .cls--dark { color:#5a4dab; }
.item-sub .isnew {
  padding:0 5px; height:15px; display:inline-flex; align-items:center;
  border-radius:var(--r1); background:var(--accent-a); color:var(--accent-lo);
  font-size:9.5px; font-weight:620;
}
.item-metrics {
  display:flex; gap:var(--s3); margin-top:3px;
  font-family:var(--font-num); font-size:var(--fs-11); color:var(--a-text-3);
}
.item-metrics .lbl { color:var(--a-text-4); margin-right:2px; font-weight:500; }

.item-fans, .item-tot { text-align:right; font-family:var(--font-num); }
.item-fans .v { font-size:var(--fs-12); font-weight:510; color:var(--a-text-2); }
.item-tot .v { font-size:var(--fs-14); font-weight:640; color:var(--gray-900); letter-spacing:-.015em; }
.item.is-1 .item-tot .v { color:var(--accent); }

/* ---------------------------------------------------------------- 空态 */
.empty { padding:var(--s10) var(--s5); text-align:center; }
.empty-icon {
  width:40px; height:40px; margin:0 auto var(--s4); border-radius:var(--r4);
  display:grid; place-items:center; color:var(--a-text-3); font-size:var(--fs-17);
  background:var(--gray-100); box-shadow:var(--ring-1);
}
.empty-title { font-size:var(--fs-14); font-weight:620; margin-bottom:var(--s2); }
.empty-text { max-width:400px; margin:0 auto; font-size:var(--fs-12); color:var(--a-text-3); line-height:1.7; }
.empty-text code {
  padding:1px 5px; border-radius:var(--r1); background:var(--gray-100);
  font-family:var(--font-mono); font-size:var(--fs-11); color:var(--gray-700);
  box-shadow:var(--ring-1);
}

/* ---------------------------------------------------------------- 骨架 */
.skeleton {
  height:70px; border-radius:var(--r3);
  background:linear-gradient(90deg,var(--gray-50) 25%,var(--gray-100) 50%,var(--gray-50) 75%);
  background-size:200% 100%; animation:shimmer 1.2s infinite;
}
@keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* ---------------------------------------------------------------- toast */
.toast {
  position:fixed; left:50%; bottom:var(--s6); z-index:100;
  transform:translateX(-50%) translateY(8px) scale(.97);
  padding:9px 14px; border-radius:var(--r4);
  background:rgba(20,21,24,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:#fff; font-size:var(--fs-12); font-weight:510;
  box-shadow:var(--overlay-1); opacity:0; pointer-events:none;
  transition:opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out);
}
.toast.is-on { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }

/* ---------------------------------------------------------------- 响应式
   手机端是主要问题来源，这里重做（不是简单缩窄）：
     · 面板头改成「标题行 + 控件行」两行，避免文字被挤成竖排
     · 涨粉榜 9 列在手机上一定挤，改成**横向滚动**（表格类数据的标准做法）
     · 爆文选隐藏次要信息（四项互动、粉丝列），保留标题/账号/时间/互动总量
   列定义仍走 --row-cols / --rk-cols，保证表头与数据行永远对齐。 */
@media (max-width:1200px) {
  :root { --row-cols: 24px 56px minmax(0,1fr) 88px 96px; --row-gap: var(--s3); }
}

@media (max-width:1000px) {
  /* 面板头：换行成两行 */
  .section-head {
    flex-wrap:wrap; row-gap:var(--s3);
    padding:var(--s4) var(--s4) var(--s4);
  }
  .section-head .section-actions { margin-left:0; width:100%; }
  .view-switch { width:100%; }
  .section-note { order:3; }
  .filters { padding:0 var(--s4) var(--s4); }
  .filters .input { margin-left:0; width:100%; order:9; }
  .fgroup { width:100%; }
  .track { padding:0 var(--s4) var(--s4); }
  .kw-editor { margin:0 var(--s4) var(--s4); }
}

@media (max-width:760px) {
  .topbar-in, .page-in { padding-left:var(--s3); padding-right:var(--s3); }
  .tabs { display:none; }
  .page-in { padding-top:var(--s4); gap:var(--s4); }
  .brand-name { font-size:var(--fs-12); }
  .status { display:none; }

  /* 长标题不撑破 */
  .item-title, .ritem-name { max-width:100%; }
  .summary-top { gap:var(--s4); }
  .best { max-width:100%; margin-left:0; }
  .split-bar { width:120px; }

  /* 爆文选：只留核心信息，行高压到最小 */
  .item { grid-template-columns:40px minmax(0,1fr) auto; gap:var(--s3); padding:8px var(--s2); }
  .item-rank, .item-fans { display:none; }
  /* 列说明在手机上无意义（列已简化，且会换行占位）→ 隐藏 */
  .col-legend { display:none; }
  .item-sub .sep, .item-sub .who { display:none; }
  .item-thumb { width:40px; height:52px; }

  /* 涨粉榜：横向滚动，列宽固定，不挤压 */
  .track--rank { max-width:none; padding:0 0 var(--s4); }
  .rhead, .rlist { overflow-x:auto; }
  .rhead > span, .ritem > span { flex:none; }
  .rhead, .ritem {
    grid-template-columns:52px 40px 132px 76px 68px 70px 66px 70px 64px;
    min-width:640px; padding-left:var(--s3); padding-right:var(--s3);
    gap:8px;
  }
  .rhead::-webkit-scrollbar, .rlist::-webkit-scrollbar { height:0; }
  .rlist { display:block; }
  .ritem { display:grid; }
  .track--rank { overflow-x:auto; }
}

@media (max-width:480px) {
  .stat-value, .summary-seg .sum b { font-size:var(--fs-17); }
  .filters .input { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}