@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');
/* 字号：正文/表格 14–15px，说明文字 13px，面板标题 19px，页面标题 clamp(34–48px)。
   2026-09 整体上调过一档（原来最小到 10px，读起来吃力）——加新样式按这套走，别再往
   12px 以下塞。改字号是全局的事：三个 <style> 块 + responsive.css + 这个文件都算数，
   responsive.css 在 index.html 之后加载、这个文件最后，谁的规则生效看这两个的顺序。 */
.auth-shell{width:min(520px,100%);margin:7vh auto;padding:24px}.auth-shell .brand{padding:0 0 36px}.auth-shell h1{font-size:34px;letter-spacing:-.06em;line-height:1.4}.auth-shell .panel{margin-top:26px}.field label{display:grid;gap:8px}.field input,.field select{min-height:44px;font-size:18px}.check{display:flex;align-items:center;gap:8px;margin:18px 0;min-height:36px}.check input{width:18px;height:18px}.empty{padding:34px 8px;line-height:1.8}.empty h3{font-weight:500}.channel{border-bottom:1px solid var(--line);padding:20px 0}.channel:last-child{border-bottom:0}.sub{line-height:1.8}.table-scroll{overflow:auto}.table td{padding-right:18px}dialog{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;color:var(--ink);background:#111516;border:1px solid var(--line);border-radius:14px}dialog::backdrop{background:#050808ce}.modalhead h2{font-size:22px}.real-qr{width:220px;max-width:100%;height:auto;align-self:center;border-radius:10px;margin:14px auto}.field .btn{text-align:center}a.btn{text-decoration:none;display:inline-block;text-align:center}.message-body{white-space:pre-wrap;overflow-wrap:anywhere;padding:14px;border-radius:8px;line-height:1.8}.secret{display:block;overflow-wrap:anywhere;padding:18px 0}.metric .num{font-size:26px}body:has(dialog[open]){overflow:hidden}button:disabled{opacity:.45;cursor:wait}.toast{z-index:1000}.nav button{font-size:15px}
@media(max-width:600px){.auth-shell{margin:0 auto;padding:22px}.auth-shell h1{font-size:28px}.metric .num{font-size:24px}.top .title{font-size:30px}.modalhead{gap:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.mode{display:flex;flex-direction:column;gap:10px;text-align:left;padding:18px;color:var(--ink);background:#171d1e;border:1px solid var(--line);border-radius:10px;cursor:pointer}.mode:hover,.mode:focus-visible{border-color:var(--accent,#c9f17c);outline-offset:3px}.mode b{font-size:17px}.mode small{font-size:15px;line-height:1.7;color:var(--muted,#a5b0ad)}#authBody .real-qr{display:block}#pushTestStatus{overflow-wrap:anywhere}@media(max-width:480px){.modes{grid-template-columns:1fr}}

/* 爆款雷达：标题长度不可控，靠标题列限宽 + 数字列收窄把版面压住。
   不设 min-width：nowrap 的自然宽度就在 900px 上下，再窄由 .table-scroll 横向滚动接管。 */
.hits th,.hits td{white-space:nowrap}
.hits td{padding-right:16px}
.hits th.num,.hits td.num{text-align:right;font-family:'DM Mono',ui-monospace,SFMono-Regular,monospace;font-variant-numeric:tabular-nums}
.hits .num .sub,.hits .num .delta-up,.hits .num .delta-down{font-family:inherit}
/* 标题保持可点，超长部分单行省略，完整标题在悬停提示里 */
.hits .hit-title{display:block;max-width:min(300px,32vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dbe7c9;text-decoration:none;border-bottom:1px solid transparent}
.hits .hit-title:hover,.hits .hit-title:focus-visible{color:var(--mint);border-bottom-color:currentColor}
/* 平台标签：爆款雷达和达人库共用同一个胶囊样式 */
.tag{display:inline-block;padding:3px 7px;border-radius:5px;background:#1b2422;border:1px solid #2d3836;color:#a9b6b1;font-size:13px}
.hits .delta-up{color:#a9d86b}
.hits .delta-down{color:#d98f7a}
@media(max-width:600px){.hits .hit-title{max-width:46vw}}

/* 爆款雷达筛选栏：一行放得下就一行，窄屏换行，最后一行底部对齐不要让按钮错位 */
.filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin:2px 0 12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.filters .filter{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.filters .filter.wide input{min-width:220px}
/* 筛选栏里的控件用一套外观：深色下 select / 日期控件的浏览器默认样式各不相同。
   只匹配 .filter 的直接子元素，.daterange 里那两个输入自己管自己的边框。 */
.filters .filter>input,.filters .filter>select{padding:9px 11px;min-height:38px;color:var(--ink);background:#0f1314;border:1px solid var(--line);border-radius:9px;font:inherit}
/* 发布起止是一个组件（像酒店选入住/离店）：两头共用一个边框和焦点环，中间用箭头连起来。
   里面还是两个原生日期输入，各管一头，点开的是浏览器自带的日历。 */
.daterange{display:flex;align-items:center;gap:6px;padding:0 11px;min-height:38px;background:#0f1314;border:1px solid var(--line);border-radius:9px}
.daterange:focus-within{border-color:var(--mint)}
.daterange input{padding:8px 0;min-width:118px;color:var(--ink);background:none;border:0;border-radius:0;font:inherit}
.daterange input:focus{outline:none}
.daterange-sep{color:var(--muted)}
/* 日期输入自带的日历图标在深色底上几乎看不见，给它一点对比 */
.daterange input::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.daterange input::-webkit-calendar-picker-indicator:hover{opacity:1}
/* 快捷区间：日常想知道的多半是「最近一周」，省得一天一天点日历 */
.presets{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:-2px 0 12px}
.presets>span{font-size:13px;color:var(--muted)}
.chip{padding:5px 12px;color:var(--muted);background:none;border:1px solid var(--line);border-radius:999px;font-size:13px}
.chip:hover,.chip:focus-visible{color:var(--ink);border-color:var(--mint)}
/* 可排序表头：用按钮承载点击，键盘也能排序；.num 列靠 text-align:inherit 保持右对齐 */
.hits th.sortable{padding:0}
.hits th.sortable .sort-btn{display:block;width:100%;padding:9px 16px 9px 0;color:inherit;background:none;border:0;font:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;white-space:nowrap;cursor:pointer}
.hits th.sortable .sort-btn:hover,.hits th.sortable .sort-btn:focus-visible{color:#dbe7c9}
.hits th.sortable.on .sort-btn{color:#dbe7c9}
.hits th.sortable.on .sort-btn:hover{color:var(--mint)}

/* 达人详情：列表里的达人名是进详情的入口，做成链接的样子而不是按钮，避免整行都是按钮 */
.creator-link{padding:0;color:#dbe7c9;background:none;border:0;border-bottom:1px solid transparent;font:inherit;font-weight:700;text-align:left;cursor:pointer}
.creator-link:hover,.creator-link:focus-visible{color:var(--mint);border-bottom-color:currentColor}
/* 爆款规则控件：订阅弹窗、达人库内联编辑、账号默认规则三处共用同一个外观。
   「一条视频在 [7 天] 内点赞涨 [5000] 以上，就算爆款」——句子里的空档就是输入框，
   所以整块做成一个带边框的行，读起来是一句话而不是三个字段。 */
.rulefield{margin:4px 0 18px}
.rulefield .hint{margin:0 0 10px}
.rule-inputs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px;background:#0f1314;border:1px solid var(--line);border-radius:10px;font-size:15px;line-height:1.7}
.rule-inputs select,.rule-inputs input{min-height:38px;padding:8px 10px;color:var(--ink);background:#171d1e;border:1px solid var(--line);border-radius:9px;font:inherit}
.rule-inputs input{width:130px}
.rule-inputs select:focus,.rule-inputs input:focus{border-color:var(--mint);outline:none}
/* 达人库里的规则单元格：整格可点，「跟随默认」是灰字，改过的才浮出来 */
.rule-cell{padding:0;color:var(--ink);background:none;border:0;border-bottom:1px dashed transparent;font:inherit;text-align:left;cursor:pointer}
.rule-cell:hover,.rule-cell:focus-visible{border-bottom-color:currentColor}
/* 顶部栏头像：users 表没有头像字段，用昵称首字渲染；点进「账号」页改昵称 */
.avatar{border:1px solid #30453c;background:#17231e;color:var(--mint);font-size:15px;cursor:pointer}
.avatar:hover,.avatar:focus-visible{border-color:var(--mint)}
/* 上游资料（头像 + 昵称 + 粉丝数 + 签名）与右侧按钮并排 */
.creator-head{display:flex;gap:14px;align-items:flex-start}
.creator-head .avatar{width:56px;height:56px;flex:none;border-radius:50%;object-fit:cover;background:#1b2422;border:1px solid var(--line)}
.creator-head .who{flex:1;min-width:0}
.creator-head .who h2{margin:0 0 4px}
/* 签名里带换行的多，按原样换行显示 */
.creator-head .signature{white-space:pre-line;overflow-wrap:anywhere;margin:6px 0 0;max-width:80ch}
/* 详情页右上角两个按钮（调整规则 / 返回列表）：靠一个容器整体右推，
   而不是各自 margin-left:auto——那样两个按钮会各分走一半空隙，被撑开。 */
.creator-head .head-actions{display:flex;gap:8px;flex:none;margin-left:auto}
.creator-head .btn{flex:none}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px 18px;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.facts .k{font-size:13px;color:var(--muted)}
.facts .v{margin-top:5px;font-size:17px;overflow-wrap:anywhere}
@media(max-width:600px){.creator-head{flex-wrap:wrap}.creator-head .avatar{width:44px;height:44px}.creator-head .head-actions{margin-left:0}}

/* ═══ 统一层 ═══════════════════════════════════════════════════════════
   上面几段是历史分层（index.html 里三个 <style> 块 + responsive.css + 本文件前半），
   每一层都在覆盖上一层，同一个圆角能查到 5 个不同的值。这一层把它们收成一套：
   圆角只留三档、控件高度只留两档、间距走同一组变量、状态色只表达「好 / 留意 / 坏」。
   新样式一律写在这里——本文件最后加载，和前面任何一层冲突时以这里为准。
   存量规则不动：那是五年份的页面在共用，删一条就可能塌一块，收益不值这个险。 */

:root{
  --r-sm:6px;   /* 标签、胶囊 */
  --r-md:8px;   /* 按钮、输入框、菜单项 */
  --r-lg:12px;  /* 面板、弹窗、侧栏 */
  --ctl:40px;   /* 桌面控件高度 */
  --ctl-sm:30px;/* 表格行内、脚注旁的次级按钮 */
  --pad:20px;   /* 面板内边距 */
  --line-soft:#1c2223; /* 分隔线：比 --line 更轻，表格行、面板内部用它 */
  --ok:#a9d86b;--warn:#e8c46a;--bad:#e08a72;
}
@media(max-width:900px){:root{--ctl:44px;--ctl-sm:36px;--pad:16px}}

/* 正文基准。行高给足：这块界面里成段的中文说明很多，1.5 以下会挤成一坨。 */
body{font-size:15px;line-height:1.6}

/* ── 按钮：只有三档——默认 / primary / 次级(sm)，高度由 --ctl 统一 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--ctl);padding:0 14px;font-size:14px;font-weight:600;letter-spacing:-.01em;
  border-radius:var(--r-md);border:1px solid #303637;background:#15191a;color:#dce1df;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s}
a.btn{display:inline-flex;text-align:center}
.btn:hover:not(:disabled){background:#202627;border-color:#4a5554}
.btn.primary{background:var(--mint);border-color:var(--mint);color:#111712}
.btn.primary:hover:not(:disabled){background:#c9f56a;border-color:#c9f56a}
.btn.sm{min-height:var(--ctl-sm);padding:0 11px;font-size:13px;border-radius:var(--r-sm)}
.btn.block{width:100%}
.auth-tab,.close{min-height:var(--ctl)}

/* ── 面板：统一内边距和圆角。面板里的分隔一律用 --line-soft，别再用 1px 深灰描边 ── */
.panel{border-radius:var(--r-lg);padding:var(--pad)}
.panel h2{font-size:18px;letter-spacing:-.04em}
.panelhead{margin-bottom:16px;gap:14px}
.panel + .panel{margin-top:18px}
.stack{display:grid;gap:18px}
.stack.narrow{max-width:700px;margin-inline:auto}
/* auto-fit 而不是 auto-fill：条目不满一行时让它们把宽度摊开，而不是在右边留一串空列。
   邮箱这类长字符串正是被空列挤到换行、断成「ui- / check@… / m」的。 */
.facts{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-top-color:var(--line-soft)}

/* ── 表格：列间距、行高、分隔线一套；行内按钮用 .btn.sm，不要撑高整行 ── */
.table{font-size:14px}
.table th{padding:0 16px 10px 0;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--muted);border-bottom-color:var(--line)}
.table td{padding:12px 16px 12px 0;border-bottom-color:var(--line-soft);vertical-align:middle}
.table th:last-child,.table td:last-child{padding-right:0}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:#151b1c}
.table td .btn{vertical-align:middle}
.table td .btn + .btn{margin-left:6px}
.table .tag,.table .status-dot{vertical-align:middle}

/* ── 状态标签：颜色只说好 / 留意 / 坏，具体是什么状态由文字讲 ── */
.tag{padding:2px 8px;font-size:12px;line-height:1.7;border-radius:var(--r-sm);
  background:#1a2120;border:1px solid #2a3331;color:#9fada8}
.tag.ok{background:#16231a;border-color:#33502f;color:var(--ok)}
.tag.warn{background:#241f13;border-color:#4d4023;color:var(--warn)}
.tag.bad{background:#241713;border-color:#4d2c23;color:var(--bad)}

/* ── 加载 / 空 / 出错：三种状态全站一个样子 ── */
.state{margin:0;color:var(--muted);font-size:14px}
.state.loading{display:flex;align-items:center;gap:10px;padding:30px 2px}
.spin{width:15px;height:15px;flex:none;border-radius:50%;border:2px solid #2b3435;border-top-color:var(--mint);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.state.error{padding:14px 16px;border-radius:var(--r-md);background:#1c1411;border:1px solid #46291f;color:#eeb49f;line-height:1.6}
.state.error p{margin:0}
.state.error .btn{margin-top:10px;border-color:#5c3a2c;background:#241713;color:#eeb49f}
.empty{padding:38px 8px;text-align:center}
.empty h3{font-size:16px;font-weight:600;margin:0 0 6px}
.empty .sub{max-width:56ch;margin:0 auto}

/* ── 表单控件：和按钮同一档高度和圆角 ── */
.field input,.field select,.field textarea{min-height:var(--ctl);border-radius:var(--r-md);border-color:#303637;background:#0f1314}
.field textarea{min-height:0;padding:11px 12px}
.filters .filter>input,.filters .filter>select{min-height:38px;border-radius:var(--r-md)}
.daterange{min-height:38px;border-radius:var(--r-md)}

/* ── 列表项：靠间距和一条浅分隔线分段，不靠整块灰底 ── */
.channel{padding:16px 0;border-bottom-color:var(--line-soft)}
.alert{padding:14px 0;border-bottom-color:var(--line-soft);gap:14px}
.message-body,.secret{border-radius:var(--r-md)}
pre{border-radius:var(--r-md)}

/* ── 左下角账号区 ──────────────────────────────────────────────────────
   收起状态只有头像、姓名、邮箱三样。原来这里常驻着一段邮箱验证说明加一个按钮，
   把导航挤成两行，而且已验证的用户永远看到一段跟自己无关的文字——那些都挪进菜单。 */
/* 侧栏比原来（190px）宽出 54px：账号区要放下姓名 + 完整邮箱，菜单也住在同一列里。
   再宽就开始挤压正文，窄屏另有布局。 */
.side{width:244px}
.main{margin-left:264px;width:calc(100% - 264px)}
.account{position:relative;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.account-btn{display:flex;align-items:center;gap:10px;width:100%;padding:7px;text-align:left;
  background:none;border:1px solid transparent;border-radius:var(--r-md);color:inherit;min-height:0}
.account-btn:hover,.account-btn.open{background:#171d1e;border-color:#252b2c}
.account-avatar{width:32px;height:32px;flex:none;border-radius:50%;background:var(--mint);color:#121714;
  display:grid;place-items:center;font-weight:700;font-size:14px}
.account-who{flex:1;min-width:0;display:grid;gap:1px}
.account-who b,.account-who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-who b{font-size:14px;font-weight:600;color:#e6e8e7}
.account-who span{font-size:12px;color:var(--muted)}
.account-flag{flex:none;padding:1px 6px;border-radius:var(--r-sm);font-size:11px;
  background:#241f13;border:1px solid #4d4023;color:var(--warn)}

.account-menu{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:20;
  display:grid;gap:4px;padding:12px;border-radius:var(--r-lg);
  background:#141a1b;border:1px solid #2b3334;box-shadow:0 20px 50px #000a}
.account-menu-head{display:flex;align-items:center;gap:10px;padding:2px 2px 12px;margin-bottom:2px;border-bottom:1px solid var(--line-soft)}
.account-facts{display:flex;gap:18px;padding:10px 2px;border-bottom:1px solid var(--line-soft)}
.account-facts>div{display:grid;gap:1px}
.account-facts span{font-size:12px;color:var(--muted)}
.account-facts b{font-size:15px;font-weight:600}
.account-mail{display:grid;gap:8px;justify-items:start;max-width:440px;padding:12px 2px}
.account-menu .account-mail{justify-self:stretch;max-width:none;border-bottom:1px solid var(--line-soft)}
.account-menu .account-mail .btn{justify-self:stretch}
.account-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font-size:13px;color:var(--muted)}
.account-row + .hint{margin:0}
.account-note{margin:0;font-size:13px;line-height:1.6;overflow-wrap:anywhere;color:var(--ok)}
.account-note.bad{color:var(--bad)}
.account-link{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  min-height:var(--ctl);padding:0 8px;border:0;border-radius:var(--r-sm);background:none;
  color:#cdd5d3;font:inherit;font-size:14px;text-align:left}
.account-link:hover{background:#1a2122;color:#fff}
.account-link.danger{color:var(--bad)}
.account-link.danger:hover{background:#241713;color:#f0a58c}
.account-link span{color:#5d6a67}

/* 窄屏：侧栏变成横向条，账号区收成只留头像，菜单从按钮下方展开并靠右对齐。 */
@media(max-width:900px){
  .side{display:flex;align-items:center;gap:12px}
  .brand{padding:0;flex:none}
  .nav{flex:1;min-width:0}
  .account{margin:0;padding:0;border:0;flex:none}
  .account-who,.account-flag{display:none}
  .account-btn{padding:0;border:0}
  .account-menu{left:auto;right:0;bottom:auto;top:calc(100% + 10px);width:min(300px,calc(100vw - 32px))}
}
@media(max-width:600px){
  .panel h2{font-size:17px}
  .table th{padding-bottom:8px}
  .table td{padding:10px 14px 10px 0}
}