/* v3.21 —— 编辑部/刊物风二版（用户反馈 v3.20 "没什么提升、不够高级"后的肉眼可见升级）：
   报头杂志化（大号衬线标题 + 右侧「本期目录」档案卡 + kicker 小字距眉线）、
   章节标题/双标签/序号全部转衬线、目录行 hover 微动效（底色 + 箭头滑入）、
   数字全面 tabular。依旧守住：无 emoji、无渐变、单强调色、无圆角大卡片。 */
:root {
  --bg: #faf9f7;
  --ink: #1c1b1a;
  --ink-2: #6b6660;
  --ink-3: #8f897f;
  --line: #e3e0da;
  --accent: #34559b;
  --accent-ink: #264077;
  --mark: #17a06b;
  --warn: #9a6b10;
  --card: #ffffff;
  --brand-fg: #ffffff;
  --on-accent: #ffffff;   /* 铺在强调色上的字色：暗色下强调色变浅，字要翻成深墨才有对比 */
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  --wm-ai: #34559b;   /* 字标 AI 与书点：与强调色同为一族靛青 */
  --wm-han: #1c1b1a;   /* 字标 路书 */
  --ev-bad: #a13a3a;   /* 评价标签负面色：仅详情页使用（v3.54） */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161513;
    --ink: #e9e6e0;
    --ink-2: #948e86;
    --ink-3: #736d65;
    --line: #35322d;
    --accent: #8db0e8;
    --accent-ink: #a9c4ef;
    --card: #1d1b19;
    --on-accent: #161513;
    --wm-ai: #e9e6e0;
    --wm-han: #e9e6e0;
    --ev-bad: #d98f8f;
  }
}
:root[data-theme="dark"] {
  --bg: #161513;
  --ink: #e9e6e0;
  --ink-2: #948e86;
  --ink-3: #736d65;
  --line: #35322d;
  --accent: #8db0e8;
  --accent-ink: #a9c4ef;
  --card: #1d1b19;
  --on-accent: #161513;
  --wm-ai: #e9e6e0;
  --wm-han: #e9e6e0;
  --ev-bad: #d98f8f;   /* 暗色下负面色提亮保证对比 */
}

* { box-sizing: border-box; }
/* hidden 属性必须永远赢：.ask-below 等 display:flex/grid 的块不加这条会盖掉 hidden，开聊后示例还挂着 */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.65 var(--sans);
}
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: inherit; text-decoration: none; }
a, button, .chip { transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
a:hover { color: var(--accent); }
h1, h2, h3 { font-weight: 650; letter-spacing: .01em; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }

/* —— 头部 —— */
.site-header { /* 通栏 hairline 已按用户要求去除，靠留白分隔 */ }
.header-in { display: flex; align-items: baseline; justify-content: space-between; height: 60px; align-items: center; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
/* 字标 LOGO：AI+书点用 --wm-ai，路书用 --wm-han，深色模式整体转单色 */
.brand-wm { display: block; height: 22px; width: auto; }
.brand-wm .wm-ai, .brand-wm .wm-dot { fill: var(--wm-ai); }
.brand-wm .wm-han { fill: var(--wm-han); }
.nav { display: flex; gap: 20px; align-items: center; }
.nav-link { color: var(--ink-2); font-size: 14px; }
.nav-link:hover { color: var(--accent); }
.nav-link.active { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.theme-btn {
  border: 1px solid var(--line); background: none; color: var(--ink-2);
  font-size: 12px; padding: 3px 9px; cursor: pointer; border-radius: 2px;
}
.theme-btn:hover { color: var(--accent); border-color: var(--accent); }

/* —— 首页 hero —— */
/* v3.48a 用户反馈：报头 2px 墨线在暗色下发白扎眼，删掉；空档收紧 */
.hero { padding: 26px 0 26px; margin-top: 10px; }
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 5.6vw, 48px); line-height: 1.26; margin: 0 0 22px;
  font-weight: 900; letter-spacing: .015em;
  text-wrap: balance;   /* 窄屏折行不出孤字 */
}
.hero-sub { color: var(--ink-2); margin: 0 0 24px; }

/* 搜索框：一体化大框，视觉重心放在 hero 中央 */
.search-form { display: flex; gap: 10px; max-width: 620px; }
.search-box {
  flex: 1; min-width: 0; height: 54px;
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  border: 1.5px solid var(--ink); background: var(--card); border-radius: 2px;
}
.search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.search-ico { color: var(--ink-2); flex-shrink: 0; }
.search-box input {
  flex: 1; min-width: 0; height: 100%; border: none; background: none;
  font-size: 16.5px; color: var(--ink); font-family: inherit;
}
.search-box input:focus { outline: none; }
.search-box input::placeholder { color: var(--ink-2); }
.search-form button {
  height: 54px; padding: 0 28px; font-size: 16px; font-weight: 600; cursor: pointer;
  letter-spacing: .12em; text-indent: .12em;   /* 「搜索」两字略拉开，按钮更有版面感 */
  background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 2px;
}
.search-form button:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.search-form button:disabled { opacity: .4; cursor: default; }
.search-form.compact { max-width: none; margin: 28px 0 8px; }
.search-form.compact .search-box, .search-form.compact button { height: 46px; }
.search-form.compact .search-box { border-color: var(--line); }
.search-form.compact .search-box input { font-size: 15px; }
/* 试试示例：用户反馈「文字要有点按钮的感觉」——描边小按钮，明示可点 */
.hero-try { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; color: var(--ink-2); font-size: 13px; margin: 16px 0 0; }
.hero-try a {
  color: var(--ink-2); background: var(--card); border: 1px solid var(--line);
  padding: 4px 14px; border-radius: 2px; line-height: 1.5;
}
.hero-try a:hover { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* —— 首页双标签：按任务找 / 按分类浏览 —— */
.home-tabs { display: flex; border-bottom: 1px solid var(--line); margin-top: 4px; }
.htab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: var(--serif); font-size: 17.5px; font-weight: 700; color: var(--ink-2);
  padding: 15px 2px; margin-right: 32px; position: relative; letter-spacing: .02em;
}
.htab i { font-style: normal; font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--ink-2); margin-left: 4px; font-variant-numeric: tabular-nums; }
.htab:hover { color: var(--accent); }
.htab.on { color: var(--ink); }
.htab.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--accent);
}
.tab-panel { padding-top: 18px; }

/* —— 工具库分类筛选条 —— */
.cat-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  border: 1px solid var(--line); border-radius: 2px;
  padding: 4px 12px; font-size: 13px; color: var(--ink-2); background: var(--card);
}
.chip i { font-style: normal; font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chip:hover { color: var(--accent); border-color: var(--accent); }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip.on i { color: inherit; opacity: .7; }
.chip-access { margin-left: auto; }

/* —— 区块 —— */
.sect { padding: 22px 0 8px; }
/* 章节小标尺：每组标题前一小段强调色短线，全站统一的分节记号；v3.21 标题转衬线加重 */
.sect-title { font-family: var(--serif); font-size: 17px; font-weight: 700; margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; letter-spacing: .02em; }
.sect-title::before { content: ''; width: 14px; height: 2px; background: var(--accent); flex: none; align-self: center; }
.sect-note { color: var(--ink-2); font-weight: 400; font-size: 13px; font-family: var(--sans); letter-spacing: 0; }
.page-title {
  font-family: var(--serif);
  font-size: 30px; margin: 34px 0 6px; letter-spacing: .02em; font-weight: 800;
}
.page-title small { font-size: 14px; color: var(--ink-2); font-weight: 400; margin-left: 10px; font-family: var(--sans); letter-spacing: 0; }
.hint { color: var(--ink-2); margin: 0 0 8px; }
.h3 { font-size: 15px; margin: 24px 0 8px; }
.text-link { color: var(--accent); }
.text-link:hover { color: var(--accent-ink); text-decoration: underline; }

/* —— 免费教程链出（v3.25，站外资源，目录式细线列表）—— */
.tut-list { list-style: none; margin: 8px 0 4px; padding: 0; }
.tut-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tut-list li:last-child { border-bottom: none; }
.tut-link { font-weight: 600; }
.tut-list small { display: block; color: var(--ink-2); font-size: 12px; margin-top: 2px; }
.tut-note { color: var(--ink-2); font-size: 13px; text-align: right; max-width: 46%; }
.tut-plays { color: var(--accent); font-weight: 700; font-size: 13px; margin-right: 10px; white-space: nowrap; }
@media (max-width: 640px) { .tut-list li { flex-direction: column; gap: 4px; } .tut-note { text-align: left; max-width: none; } }

/* —— 目录行（核心组件）—— */
.list { margin: 12px 0 8px; }
.row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 17px 2px; border-bottom: 1px solid var(--line);
  transition: background-color .15s ease;
}
.row:first-child { border-top: 1px solid var(--line); }
/* 行 hover：淡靛底让整行「活」起来，列表再长也有反馈 */
article.row:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
/* v3.29d：46px 大 logo 与标题行顶对齐（视觉锚），下移 2px 做光学居中 */
.row > .tool-logo { margin-top: 2px; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: 15px; margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; row-gap: 3px; }
.row-title > a { white-space: nowrap; }
.row-title a:hover { color: var(--accent); }
/* v3.29d 阶段②：决策 meta 行——额度红绿灯打头（前置），决策标签跟排，行内不与描述争密度 */
.row-meta { margin: 5px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 4px; }
.row-meta .quota-main { font-size: 12px; flex-shrink: 0; }
.row-meta .light { width: 8px; height: 8px; }
.row-meta .quota-text b { font-weight: 600; }
/* v3.24b 决策小标签（同类名次 + 多用户共识口碑）：视觉与「易上手」完全同款，一排标签一个长相 */
.row-diff, .row-rep { font-size: 11px; color: var(--ink-2); border: 1px solid var(--line); padding: 0 5px; border-radius: 2px; font-weight: 400; white-space: nowrap; }
.net-chip {
  font-size: 11px; color: var(--accent-ink); border: 1px solid currentColor;
  padding: 0 5px; border-radius: 2px; font-weight: 400; white-space: nowrap;
}
/* v3.29d：长描述收详情页——桌面一行截断（hover 有 title 兜底全文），手机仍两行 */
.row-desc { margin: 5px 0 0; color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.row-side { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.row-count { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row > .row-count { margin-top: 2px; }   /* flex-start 下与标题行光学对齐 */
/* 箭头微动效：hover 时「→」滑入，指示「这行可以进」 */
.row-count::after {
  content: '→'; display: inline-block; margin-left: 6px; color: var(--accent);
  opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease;
}
.row-link { display: flex; }
.row-link:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.row-link:hover .row-count::after { opacity: 1; transform: none; }
.row-no {
  flex-shrink: 0; width: 26px; color: var(--ink-2);
  font-family: var(--serif); font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  padding-top: 2px; align-self: flex-start;
}
.row-link:hover .row-no { color: var(--accent); }

.row-actions { display: flex; gap: 10px; font-size: 12px; }
.row-actions a, .linklike {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--ink-2); border-bottom: 1px solid transparent;
}
.row-actions a:hover, .linklike:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* —— Logo 三级 fallback —— */
.tool-logo {
  --size: 36px; --brand: transparent;
  width: var(--size); height: var(--size); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 2px; overflow: hidden; position: relative;
  background: var(--brand); color: var(--brand-fg);
}
.tool-logo img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 2; background: #fff; }
.tool-logo.no-brand { background: var(--line); color: var(--ink-2); }
.logo-letter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(var(--size) * .42); z-index: 1; }

/* —— 额度徽标 —— */
.quota-main { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.quota-text { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.quota-text b { color: var(--ink); font-weight: 600; }
.quota-none, .muted { color: var(--ink-2); }
.light { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.light-green { background: #17a06b; }
.light-yellow { background: #d9930d; }
.light-red { background: #c4453a; }
.age-warn { font-size: 11px; color: var(--warn); border: 1px solid currentColor; padding: 0 4px; border-radius: 2px; }
.hidden-price { color: var(--ink-2); font-style: normal; }

/* —— 分类索引 —— */
.cat-index { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; margin: 12px 0 8px; }
.cat-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 15px;
  transition: background-color .15s ease;
}
.cat-line:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.cat-n { color: var(--ink-2); font-size: 14px; font-weight: 600; font-family: var(--serif); font-variant-numeric: tabular-nums; }
.cat-n::after {
  content: '→'; display: inline-block; margin-left: 6px; color: var(--accent);
  font-family: var(--sans); font-weight: 400; font-size: 13px;
  opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease;
}
.cat-line:hover .cat-n::after { opacity: 1; transform: none; }
.cat-line:hover span:first-child { color: var(--accent); }

/* —— 任务页组合提示 —— */
.page-head { margin-bottom: 8px; }
.combo-note {
  margin: 16px 0 4px; padding: 14px 16px;
  border-left: 2px solid var(--accent); background: var(--card);
  font-size: 14px; color: var(--ink);
}
.combo-label { display: block; font-size: 12px; color: var(--accent); letter-spacing: .08em; margin-bottom: 4px; }
/* v3.29f 阶段③ 路线可视化：combo_note 本是分步写法，拆成编号竖轨（节点+连线），工具名链到详情页。
   纯文字段落 → 可扫读的路线图，数据一字不改 */
.route-steps { list-style: none; margin: 10px 0 0; padding: 0; }
.route-steps li { position: relative; padding: 0 0 14px 38px; line-height: 1.7; }
.route-steps li:last-child { padding-bottom: 2px; }
.route-n {
  position: absolute; left: 0; top: 2px; width: 22px; height: 22px;
  border: 1px solid var(--accent); color: var(--accent); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; background: var(--card);
}
.route-steps li::before {
  content: ''; position: absolute; left: 11px; top: 26px; bottom: 0;
  width: 1px; background: var(--line);
}
.route-steps li:last-child::before { display: none; }
.route-t { color: var(--ink); }
.route-t .text-link { font-weight: 600; }

/* —— 搜索直达卡（#58）：品牌词精确命中时置顶全信息卡，hairline + 无渐变 —— */
.direct-card {
  margin: 14px 0 20px; padding: 16px 18px;
  border: 1px solid var(--line); border-left: 2px solid var(--accent); background: var(--card);
}
.direct-main { display: flex; gap: 16px; align-items: flex-start; }
.direct-info { flex: 1; min-width: 0; }
.direct-name { font-size: 18px; font-weight: 600; margin: 2px 0 6px; }
.direct-badge {
  font-size: 12px; font-weight: 400; color: var(--accent); letter-spacing: .06em;
  border: 1px solid var(--accent); padding: 1px 8px; margin-left: 8px; vertical-align: 2px;
}
.direct-info .hint { margin: 0 0 4px; }
.direct-info .for-who { margin: 0; }
.direct-acts { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
@media (max-width: 720px) {
  .direct-main { flex-direction: column; }
  .direct-acts { flex-direction: row; }
}

/* —— 工具详情 —— */
.tool-head { display: flex; gap: 18px; padding: 34px 0 8px; }
.tool-head-main { min-width: 0; }
.for-who { font-size: 14px; margin: 6px 0; }
.net-note { font-size: 13px; color: var(--accent-ink); margin: 4px 0; }
.net-note.ok { color: var(--ink-2); }
.net-note::before { content: '● '; font-size: 9px; vertical-align: 2px; }
.head-actions { display: flex; gap: 10px; margin: 14px 0 6px; flex-wrap: wrap; }
.btn, .btn-ghost {
  display: inline-block; padding: 8px 18px; font-size: 14px; cursor: pointer; border-radius: 2px;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
}
.btn-ghost { background: none; color: var(--ink-2); border-color: var(--line); }
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); }
.fav-btn.active { color: var(--accent); border-color: var(--accent); }

/* —— 收藏面板（v3.14d）：顶栏入口下拉，hairline + 无渐变，随明暗 —— */
#favCount { font-weight: 600; margin-left: 4px; color: var(--accent); }
.fav-panel {
  position: fixed; top: 52px; right: max(16px, calc((100vw - 1120px) / 2)); z-index: 95;
  width: min(440px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgb(0 0 0 / .12); padding: 6px 16px 12px;
}
.fav-panel[hidden] { display: none; }
.fav-head { font-size: 13px; color: var(--ink-2); margin: 10px 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.fav-head b { color: var(--ink); font-size: 15px; }
.fav-miss { color: var(--warn); }
.fav-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.fav-row:last-child { border-bottom: none; }
.fav-row img { border-radius: 2px; flex: none; }
.fav-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fav-name a { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-name a:hover { color: var(--accent); }
.fav-name small { color: var(--ink-2); font-size: 12px; }
.fav-acts { display: flex; align-items: center; gap: 12px; flex: none; }
.fav-site { font-size: 12px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.fav-site:hover { color: var(--accent); }
.fav-empty { color: var(--ink-2); font-size: 13px; padding: 14px 0; margin: 0; }
@media (max-width: 720px) {
  .fav-panel { top: 46px; right: 12px; }
  /* 手机上保留「已收藏」按钮：点它=取消收藏，收藏必须处处可逆，不能让用户去别处找入口 */
  .fav-acts { gap: 8px; }
}

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-weight: 600; color: var(--ink-2); font-size: 13px; border-bottom: 1px solid var(--ink); }
tbody tr.warn { background: color-mix(in srgb, var(--warn) 6%, transparent); }
td.basis { color: var(--ink-2); font-size: 13px; }
td.basis small { display: block; color: var(--ink-2); opacity: .8; }
.restrict-chip { display: inline-block; border: 1px solid var(--line); border-radius: 2px; padding: 0 6px; font-size: 12px; margin: 1px 4px 1px 0; color: var(--ink-2); }
.fine-print { color: var(--ink-2); font-size: 12px; }
.compare-table th, .compare-table td { min-width: 120px; }
.compare-table tbody th { font-weight: 500; color: var(--ink-2); white-space: nowrap; width: 90px; }
.compare-table thead th { min-width: 150px; }
.cmp-col-head { display: flex; align-items: center; gap: 8px; }
.cmp-col-name { font-weight: 600; color: var(--ink); font-size: 14px; }
.cmp-col-head .cmp-x { color: var(--ink-2); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.pc-list { margin: 0; padding-left: 18px; }
.pc-list li { margin: 4px 0; font-size: 14px; }
.tags-row { margin: 20px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.tag-chip { border: 1px solid var(--line); padding: 2px 10px; font-size: 13px; color: var(--ink-2); border-radius: 2px; }
.tag-chip:hover { color: var(--accent); border-color: var(--accent); }

/* —— 表单 / 提示 —— */
.form label { display: block; margin: 16px 0; font-size: 14px; }
.form input, .form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 15px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 2px;
  font-family: inherit;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--accent); }
.alert { padding: 12px 16px; margin: 16px 0; font-size: 14px; border-left: 2px solid; }
.alert.ok { border-color: var(--mark); background: color-mix(in srgb, var(--mark) 7%, transparent); }
.alert.err { border-color: #c4453a; background: color-mix(in srgb, #c4453a 7%, transparent); }
.empty-state { padding: 36px 0; color: var(--ink-2); }
.empty-state a { color: var(--accent); }

/* —— Toast —— */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 9px 20px; font-size: 14px;
  border-radius: 2px; z-index: 99;
}
/* v3.29e：对比底栏在场时 toast 抬到它上方，不再压在 chips 上 */
body:has(.cmp-bar:not([hidden])) .toast { bottom: calc(var(--cmp-bar-h, 64px) + 20px); }

/* —— 对比浮动条 v3：出场动画 + 大号橙色 CTA，一眼能看到 —— */
.cmp-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: var(--ink); color: var(--bg);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 12px 16px; font-size: 14px;
  border-top: 2px solid var(--accent);
  box-shadow: 0 -6px 24px rgb(0 0 0 / .18);
  animation: cmpIn .22s ease-out;
}
@keyframes cmpIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cmp-bar[hidden] { display: none; }
.cmp-count { white-space: nowrap; opacity: .85; }
.cmp-count b { font-size: 16px; }
.cmp-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; min-width: 0; }
.cmp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid color-mix(in srgb, var(--bg) 35%, transparent);
  padding: 3px 4px 3px 10px; border-radius: 2px; font-size: 13px; white-space: nowrap;
}
.cmp-x {
  background: none; border: none; color: inherit; cursor: pointer; font: inherit;
  font-size: 15px; line-height: 1; padding: 2px 6px; opacity: .7;
}
.cmp-x:hover { opacity: 1; color: var(--accent); }
.cmp-actions { display: flex; gap: 10px; align-items: center; }
.cmp-actions .btn { background: var(--accent); border-color: var(--accent); color: #fff; padding: 9px 20px; font-size: 15px; font-weight: 600; }
.cmp-actions .btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.cmp-actions .btn[disabled] { opacity: .5; cursor: not-allowed; }
.cmp-actions .btn-ghost { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 35%, transparent); padding: 8px 14px; }
.cmp-actions .btn-ghost:hover { border-color: var(--bg); color: var(--bg); }
/* 列表里「对比」按钮的选中态：实心橙底，一眼可辨 */
.cmp-btn.active, .head-actions .cmp-btn.active {
  color: #fff; background: var(--accent); border-radius: 2px; padding: 0 7px 1px;
}
/* 对比页「添加一列」 */
.cmp-add { margin: 22px 0 8px; }
.cmp-add-label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.cmp-add-row { display: flex; gap: 8px; max-width: 420px; }
.cmp-add-row select {
  flex: 1; min-width: 0; padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 2px;
}
.cmp-add-row input {
  flex: 1; min-width: 0; padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 2px;
}
.cmp-add { position: relative; }
.cmp-sug {
  position: absolute; z-index: 30; top: calc(100% + 2px); left: 0; min-width: 280px; max-width: 320px;
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: 2px; box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.cmp-sug[hidden] { display: none; }
.cmp-sug button {
  text-align: left; padding: 8px 12px; font-size: 14px; background: none; border: 0;
  border-bottom: 1px solid var(--line); color: var(--ink); cursor: pointer;
}
.cmp-sug button:last-child { border-bottom: 0; }
.cmp-sug button:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
/* 对比页结论行：hairline 盒 + 左缘刻度线，编辑部口径与 sect-title 一致 */
.cmp-concl { margin-top: 18px; padding: 14px 18px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 2px; }
.cmp-concl-label { font-family: var(--serif); font-weight: 600; letter-spacing: .06em; }
.cmp-concl ul { list-style: none; margin: 8px 0 0; padding: 0; }
.cmp-concl li { padding: 3px 0; font-size: 14px; color: var(--ink); }
.cmp-concl li b { font-weight: 600; }
/* v3.29e：底栏是 fixed，滚动途中遮的不只是页脚——原 92px 只补给页脚，
   列表最后一行照样被压住。改由 body 加等高滚动余量（高度由 paintCmp 实测写入
   --cmp-bar-h，chips 折行 / 手机换行 / 窗口缩放都跟得准） */
body:has(.cmp-bar:not([hidden])) { padding-bottom: calc(var(--cmp-bar-h, 64px) + 16px); }

/* —— 对比页：大陆可用 —— */
.acc-ok { color: var(--mark); }
/* 手机：横向表改为竖向卡片 */
.cmp-cards { display: none; }
@media (max-width: 640px) {
  .compare-table { display: none; }
  .cmp-cards { display: grid; gap: 0; border-top: 1px solid var(--ink); }
  .cmp-card { border-bottom: 1px solid var(--line); padding: 14px 0; }
  .cmp-card .cmp-col-head { color: var(--ink); }
  .cmp-dl { margin: 10px 0 0; }
  .cmp-dl > div { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
  .cmp-dl > div:last-child { border-bottom: none; }
  .cmp-dl dt { width: 72px; flex: none; color: var(--ink-2); font-weight: 500; font-size: 13px; }
  .cmp-dl dd { margin: 0; font-size: 14px; }
}

/* —— 后台：数据看板 —— */
.trend { display: flex; align-items: stretch; gap: 6px; height: 150px; margin: 14px 0 6px; }
.trend-col { flex: 1; min-width: 0; position: relative; }
.trend-pv, .trend-uv { position: absolute; left: 0; right: 0; border-radius: 1px 1px 0 0; }
.trend-pv { bottom: 18px; background: var(--ink); min-height: 2px; }
.trend-uv { bottom: 18px; background: color-mix(in srgb, var(--accent) 45%, transparent); z-index: 1; }
.trend-d { position: absolute; bottom: 0; left: -4px; right: -4px; font-size: 10px; color: var(--ink-2); text-align: center; white-space: nowrap; }
.rank-list { margin: 8px 0 0; padding-left: 24px; font-size: 14px; }
.rank-list li { margin: 0; padding: 6px 0; border-bottom: 1px dashed var(--line); display: flex; justify-content: space-between; gap: 12px; }
.rank-k { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list b { font-variant-numeric: tabular-nums; color: var(--accent); flex-shrink: 0; }
.admin-cols { margin-top: 20px; }

/* —— 页脚 —— */
.site-footer { margin-top: 64px; padding: 28px 0 44px; color: var(--ink-2); font-size: 13px; }
.site-footer p { margin: 4px 0; }
.site-footer a:hover { color: var(--accent); }

/* —— 响应式：≥960px 双列目录；≤640px 收紧 —— */
@media (min-width: 960px) {
  .list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .row:first-child { border-top: none; }
  .list .row:nth-child(-n+2) { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .hero { padding: 20px 0 22px; }
  .hero h1 { font-size: 28px; }
  .page-title { font-size: 24px; }
  .row { gap: 10px; }
  .row-side { flex-shrink: 1; min-width: 0; }
  .quota-main { white-space: normal; }   /* 长额度文案手机上折行，不撑破右缘 */
  /* 窄屏 header 两行式：第一行 Logo+站名（不许再被压换行），第二行导航横向轻扫 */
  .header-in { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 0; row-gap: 2px; }  /* 只动上下，别把 .wrap 的左右 20px 抹了（否则 logo/导航贴屏幕边） */
  .brand { white-space: nowrap; flex-shrink: 0; }
  .theme-btn { margin-left: auto; }
  .nav { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 18px; padding: 8px 0 10px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-link { font-size: 13px; white-space: nowrap; flex-shrink: 0; }
  .row-desc { -webkit-line-clamp: 2; white-space: normal; }
  .row-side { align-items: flex-end; }
  .row-actions { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
  .row-actions a { display: none; }   /* 手机收起「官网」，保留 对比/收藏 */
  .linklike { font-size: 12px; }
  .cat-index { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .tool-head { flex-direction: column; }
  .search-form.compact { margin-top: 20px; }
  .hero h1 br { display: none; }           /* 窄屏让标题自然折行 */
  .brand-wm { height: 20px; }
  .search-form { gap: 8px; }
  .search-box, .search-form button { height: 48px; }
  .search-box input { font-size: 16px; }
  .search-form button { padding: 0 18px; }
  .htab { font-size: 15px; margin-right: 22px; }
  .cmp-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .cmp-actions { margin-left: auto; }
}

/* —— 排行榜：吸顶分类锚点 + 紧凑名次行 + Top10 折叠 —— */
/* v3.24b：全宽一律换行——手机端也全部显示不滑动（用户 2026-10-19 拍板，
   原先手机单行横滑看不到全部分类）；模型榜分隔线独占一行不变 */
.rk-nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; gap: 7px;
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: 8px 0; margin-bottom: 4px;
}
/* v3.56b（2026-10-22 老板反馈「很多用户不知这里还有按钮」）：纯文字只有 hover 才像可点，
   全部 TAB 补 hairline 描边 + 卡片底，选中态靛青描边加深——排行榜/API广场/教程/Skill/任务页五处共用本类 */
.rk-nav a {
  font-size: 13px; color: var(--ink-2);
  padding: 4px 11px; border-radius: 2px; white-space: nowrap;
  border: 1px solid var(--line); background: var(--card);
}
.rk-nav a:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.rk-nav a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); font-weight: 600; }
/* v3.13b：TAB 化后的分组小标（「模型榜」），不可点，与前面的工具榜 TAB 隔开 */
.rk-nav .rk-nav-sep {
  flex-basis: 100%; display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--ink-2);
  padding: 7px 0 1px; margin: 3px 0 0;
  letter-spacing: .05em; white-space: nowrap;
}
.rk-nav .rk-nav-sep::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
/* 手机端密度收紧一点：17 个 TAB 少占一行是一行 */
@media (max-width: 640px) {
  .rk-nav { gap: 6px; padding: 6px 0; }
  .rk-nav a { padding: 3px 9px; font-size: 12px; }
}
.rk-panel[hidden] { display: none; }

/* —— 返回顶部悬浮按钮（排行榜 / API 广场长页）—— */
.back-top {
  position: fixed; right: 18px; bottom: 30px; z-index: 40;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-2);
  font-size: 17px; cursor: pointer; display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
}
.back-top.show { display: flex; }
.back-top:hover { color: var(--accent); border-color: var(--accent); }

/* —— API 广场：官方自营标 + 模型种类标 —— */
.official-chip {
  font-size: 11px; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 1px 6px; border-radius: 2px; font-weight: 600; white-space: nowrap;
}
.kind-chip {
  font-size: 11px; color: var(--ink-3); border: 1px solid var(--line);
  padding: 0 5px; border-radius: 2px; font-weight: 400; white-space: nowrap;
}
.price-chip { color: var(--ink-2); font-weight: 500; }
.rk-sec { padding-top: 16px; }
.rk-sec h2 { scroll-margin-top: 52px; }
/* —— v3.31a 榜单卡：一块一榜，报头 + 大名次 + 卡底署名 ——
   目标：截一张图出去，图里自带「谁出的榜、哪天更新、第几名是谁」，
   不再是一张没有出处的表格。守住：无 emoji、无渐变、单强调色、衬线标题。 */
.rk-board {
  border: 1px solid var(--line); background: var(--card);
  padding: 16px 26px 14px;
}
.rk-mast {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-bottom: 9px; border-bottom: 2px solid var(--accent);
}
.rk-mast-brand { font-size: 12px; letter-spacing: .18em; color: var(--ink-2); font-weight: 600; }
.rk-mast-date { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rk-board-title {
  font-family: var(--serif); font-size: 28px; font-weight: 800; letter-spacing: .02em;
  margin: 15px 0 3px; line-height: 1.25;
}
.rk-board-sub { font-size: 13px; color: var(--ink-2); margin: 0 0 12px; }
.rk-list { margin: 0; border-top: 1px solid var(--line); }
/* v3.48 榜单骨架：名次(衬线大数字，前三名靛青加大、榜首更大) / 标题 / 一句话短评 / 证据行，
   行尾独立评分大数字列（豆瓣同样右置评分）。无进度条、无徽章块——层级只靠字号与靛青 */
.rk-row {
  display: grid; grid-template-columns: 46px 40px minmax(0, 1fr) auto;
  gap: 13px; align-items: start;
  padding: 14px 2px; border-bottom: 1px solid var(--line);
}
.rk-row:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.rk-no {
  text-align: right; font-family: var(--serif); line-height: 1;
  font-size: 21px; font-weight: 700; color: var(--ink-2); padding-top: 5px;
  font-variant-numeric: tabular-nums;
}
.rk-top .rk-no { color: var(--accent); font-size: 26px; }
.rk-first .rk-no { font-size: 34px; font-weight: 800; }
.rk-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rk-name { font-size: 15px; font-weight: 600; display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.rk-name > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-first .rk-name { font-size: 17px; }
.rk-note { font-size: 12px; color: var(--ink-2); line-height: 1.7; }
/* 证据行（免费额度/直连等）+ 行尾评分列 */
.rk-ev { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.rk-ev > span { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-score { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; padding-top: 3px; }
.rk-score b {
  font-family: var(--serif); font-size: 25px; font-weight: 800; color: var(--ink);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.rk-top .rk-score b { color: var(--accent); }
.rk-score i { font-style: normal; font-size: 10.5px; color: var(--ink-3); letter-spacing: .14em; white-space: nowrap; }
.rk-rep-line { font-size: 11px; color: var(--ink-3); }
.rk-logo-slot { width: 40px; height: 40px; }
.rk-more { border-bottom: 1px solid var(--line); }
.rk-more summary {
  list-style: none; cursor: pointer; padding: 9px 2px;
  font-size: 13px; color: var(--ink-2); text-align: center;
}
.rk-more summary::-webkit-details-marker { display: none; }
.rk-more summary:hover { color: var(--accent); }
.rk-more[open] summary { border-bottom: 1px solid var(--line); }
/* 卡底署名：出处随截图走 */
.rk-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 4px 2px; font-size: 12px; color: var(--ink-2);
}
.rk-foot-brand { font-weight: 700; letter-spacing: .02em; color: var(--ink); font-family: var(--serif); }
@media (max-width: 640px) {
  .rk-nav { position: sticky; }
  .rk-board { padding: 12px 14px 10px; }
  .rk-board-title { font-size: 22px; margin-top: 12px; }
  .rk-row { grid-template-columns: 26px 32px minmax(0, 1fr) auto; gap: 10px; padding: 12px 2px; }
  .rk-no { font-size: 18px; padding-top: 3px; }
  .rk-top .rk-no { font-size: 21px; }
  .rk-first .rk-no { font-size: 26px; }
  .rk-name { font-size: 15px; }
  .rk-first .rk-name { font-size: 15px; }
  .rk-score b { font-size: 20px; }
  .rk-score i { font-size: 9.5px; letter-spacing: .1em; }
  .rk-foot { flex-direction: column; gap: 3px; padding-top: 9px; }
}

/* —— 搜索结果页「再筛」行（二级标签，幕后能力的唯一入口）—— */
.refine-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; font-size: 13px; }
.refine-row .refine-label { color: var(--ink-2); flex-shrink: 0; }
.refine-row a {
  color: var(--ink-2); border: 1px solid var(--line); border-radius: 2px;
  padding: 2px 9px; font-size: 12px; white-space: nowrap;
}
.refine-row a:hover { color: var(--accent); border-color: var(--accent); }
.refine-row a.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* —— 工具行/详情：榜单徽章与「新上架」标记 —— */
.rank-badge {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 12px; color: var(--accent-ink); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  padding: 1px 8px; border-radius: 2px; white-space: nowrap;
}
.rank-badge b { font-weight: 700; }
.rank-badge:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.new-chip {
  font-size: 11px; color: #fff; background: var(--accent);
  padding: 1px 6px; border-radius: 2px; white-space: nowrap; font-weight: 500;
}

/* —— 详情页徽章行 + 首页提交入口 —— */
.head-badges { margin: 4px 0 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.head-badges:empty { display: none; }
.hero-submit { margin: 18px 0 0; font-size: 13px; color: var(--ink-2); }
.hero-submit a {
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  padding: 4px 14px; border-radius: 2px; margin-left: 2px; display: inline-block;
}
.hero-submit a:hover { color: #fff; background: var(--accent); border-color: var(--accent); }

/* —— 后台：筛选 / 批量操作 —— */
.admin-filter { display: flex; gap: 8px; margin: 14px 0 10px; }
.admin-filter input { flex: 1; max-width: 360px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 2px; background: var(--card); color: var(--ink); }
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.filter-chips .chip { cursor: pointer; }
.filter-chips .chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.bulk-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px; margin: 12px 0 24px; border: 1px dashed var(--line); border-radius: 12px; background: var(--card); }
.bulk-bar label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.bulk-bar .hint { font-size: 12px; color: var(--ink-3); flex: 1; min-width: 200px; }
.admin-table .qk { width: 15px; height: 15px; accent-color: var(--accent); }

/* —— v3.8 详情页决策区：对比直达 + 反馈框 —— */
.decide { margin-top: 22px; }
.alt-cmp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.alt-cmp .btn-ghost { padding: 6px 12px; font-size: 13px; }
.fb-box { margin: 28px 0 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.fb-box summary { cursor: pointer; font-size: 13px; color: var(--ink-2); list-style: none; }
.fb-box summary::-webkit-details-marker { display: none; }
.fb-box summary:hover { color: var(--accent); }
.fb-box summary .fine-print { margin-left: 6px; }
.fb-form { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-top: 10px; }
.fb-form textarea { flex: 1; min-width: 220px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 2px; background: var(--card); color: var(--ink); font: inherit; font-size: 13px; }

/* —— v3.8 任务页分组折叠（手机端收起，宽屏 JS 展开）—— */
details.tgroup > summary { cursor: pointer; list-style: none; }
details.tgroup > summary::-webkit-details-marker { display: none; }
details.tgroup > summary > .sect-title { position: relative; padding-right: 22px; }
details.tgroup > summary > .sect-title::after {
  content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  color: var(--ink-2); font-size: 18px; font-weight: 400;
}
details.tgroup[open] > summary > .sect-title::after { content: '−'; }

/* —— v3.9 搜索联想下拉 —— */
.search-box { position: relative; }
.search-box input { position: relative; z-index: 2; background: transparent; }
.sg-list {
  position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 50;
  background: var(--card); border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12); overflow: hidden;
}
.sg-item {
  display: flex; align-items: center; gap: 9px; padding: 9px 14px;
  font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--line);
}
.sg-item:last-child { border-bottom: none; }
.sg-item:hover, .sg-item.on { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); }
.sg-item img { border-radius: 2px; flex-shrink: 0; }
.sg-ico { font-size: 11px; color: var(--ink-2); width: 18px; text-align: center; flex-shrink: 0; }
.sg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-kind { font-size: 11px; color: var(--ink-2); flex-shrink: 0; }
.group-box { margin: 20px 0 0; padding: 16px; border: 1px solid var(--line); }
.qr-img { display: block; background: #fff; padding: 6px; border: 1px solid var(--line); }

/* v3.10 详情页信息条：编辑实测过的字段才显示，横排换行，hairline 分隔 */
.fact-strip { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 12px 0; margin: 4px 0 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact { display: flex; align-items: baseline; gap: 7px; }
.fact-k { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.fact-v { font-size: 13px; color: var(--ink); }
/* 后台：适机平台勾选行 */
.ck-row { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.ck-item { display: inline-flex; align-items: center; gap: 4px; }

/* v3.11 顶栏 TAB 化：换页时主区轻微降透明度，避免白屏突兀 */
main.wrap { transition: opacity .12s ease; }
main.wrap.swapping { opacity: .45; }
/* v3.11 详情页头部：标题与 Logo 垂直对齐（原先 h1 自带 34px 上边距把名称拽下去了） */
.tool-head { align-items: flex-start; }
.tool-head .page-title { margin: 7px 0 6px; }

/* —— v3.12 模型榜：模型行（无工具链接）—— */
.mrow { cursor: default; }
.mrow .rk-name > b { font-weight: 600; }
.mrow .rk-name a { color: inherit; }
.mrow .rk-name a:hover { color: var(--accent); }
.rk-mhead { margin-top: 34px; }
.rk-mhead .sect-title { font-size: 19px; }

/* —— v3.12 关于页：少字、可视化 —— */
.about-lede { font-size: 16px; line-height: 1.8; margin: 14px 0 0; }
.about-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin: 22px 0 0;
}
.about-stats .stat { background: var(--card); padding: 16px 14px; }
.about-stats .stat b {
  display: block; font-family: var(--serif); font-size: 26px; line-height: 1.2;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.about-stats .stat span { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.about-steps { margin: 26px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.about-steps .step { display: flex; gap: 14px; padding: 14px 2px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.about-steps .step i {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--accent); color: var(--accent);
  font-style: normal; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.about-steps .step b { display: block; font-size: 14px; }
.about-steps .step span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.rules-grid { margin: 26px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; border-top: 1px solid var(--line); }
.rules-grid > div {
  padding: 11px 2px; border-bottom: 1px solid var(--line);
  font-size: 13px; line-height: 1.7; display: flex; gap: 8px; align-items: baseline;
}
.rules-grid > div::before { content: '—'; color: var(--accent); flex-shrink: 0; }
details.about-more { margin: 14px 0 0; border: 1px solid var(--line); }
details.about-more > summary {
  padding: 12px 14px; cursor: pointer; font-size: 14px; font-weight: 600;
  list-style: none; position: relative; padding-right: 40px;
}
details.about-more > summary::-webkit-details-marker { display: none; }
details.about-more > summary::after {
  content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--ink-2); font-size: 18px; font-weight: 400;
}
details.about-more[open] > summary::after { content: '−'; }
details.about-more > summary:hover { color: var(--accent); }
details.about-more > ul, details.about-more > p, details.about-more > div { margin: 0; padding: 0 14px 14px; font-size: 13px; color: var(--ink-2); line-height: 1.9; }
details.about-more > summary + * { padding-top: 2px; }
details.about-more > ul { padding-left: 30px; }
details.about-more li { margin: 2px 0; }
details.about-more strong { color: var(--ink); font-weight: 600; }
.about-foot { margin: 30px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
@media (max-width: 640px) {
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .rules-grid { grid-template-columns: 1fr; }
}

/* #59 排序/筛选条：与分类 chip 同款，紧贴其下 */
.sort-row { margin: -8px 0 18px; }

/* v3.29 教程封面卡片墙：16:9 真封面 + 播放量角标，无渐变无 emoji，卡边用 hairline */
.tut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 18px; margin: 14px 0 6px; }
.tut-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.tut-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.tut-cover { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--line); }
.tut-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tut-plays { position: absolute; right: 6px; bottom: 6px; background: rgba(17, 24, 39, .78); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; padding: 4px 7px; border-radius: 4px; white-space: nowrap; }
.tut-card-t { font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--ink); padding: 10px 12px 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tut-card:hover .tut-card-t { color: var(--accent); }
.tut-card-m { font-size: 12px; color: var(--ink-2); padding: 4px 12px 12px; }
@media (max-width: 640px) { .tut-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .tut-card-t { font-size: 13px; padding: 8px 9px 2px; } .tut-card-m { font-size: 11px; padding: 3px 9px 9px; } }

/* —— v3.42 Skill 专页（/skills）：复用 sect/about-steps/rk-nav 语言，只补四件新壳 —— */
.sk-lede { font-size: 15px; line-height: 1.85; margin: 14px 0 0; max-width: 72ch; }
.sk-lede b { color: var(--ink); }
.sk-code {
  margin: 16px 0 8px; padding: 14px 16px; overflow-x: auto;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--line); border-left: 2px solid var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.75; color: var(--ink); border-radius: 2px;
}
.sk-code code { font-family: inherit; background: color-mix(in srgb, var(--accent) 8%, transparent); padding: 0 3px; border-radius: 2px; }
.sk-rows { margin-top: 14px; border-top: 1px solid var(--line); }
.sk-num { font-style: normal; font-size: 12px; color: var(--accent); font-weight: 600; margin-left: 10px; white-space: nowrap; }
@media (max-width: 640px) {
  .sk-code { font-size: 11px; padding: 11px 12px; }
}
.sk-nav { justify-content: flex-start; }

/* —— v3.45 Skill 页：TAB 面板 + 优质SKILL 分类卡片墙（点击直接下载）+ 市场卡片 + 兼容表 —— */
.sk-sec { padding-top: 20px; }
.sk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.sk-card { border: 1px solid var(--line); border-top: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 3px; padding: 16px 18px 14px; background: color-mix(in srgb, var(--accent) 2%, transparent); display: flex; flex-direction: column; }
.sk-card h3 { margin: 0; font-size: 15px; line-height: 1.5; }
.sk-card h3 a { color: inherit; }
.sk-card-by { margin: 4px 0 0; font-size: 12px; color: var(--ink-2); display: flex; align-items: baseline; flex-wrap: wrap; }
.sk-card-desc { margin: 10px 0 0; font-size: 13px; line-height: 1.75; color: var(--ink); }
.sk-card-use { margin: 6px 0 0; font-size: 12px; line-height: 1.7; color: var(--ink-2); }
.sk-card-act { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 12px; }
.sk-dl {
  font-size: 12px; font-weight: 600; color: #fff; background: var(--accent);
  padding: 5px 14px; border-radius: 2px; white-space: nowrap; transition: opacity .15s ease;
}
.sk-dl:hover { opacity: .85; }
.sk-kind { font-style: normal; font-size: 11px; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 2px; padding: 0 5px; margin-right: 10px; white-space: nowrap; }
.sk-fmt { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.sk-fmt-step { flex: 1 1 200px; border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px; font-size: 13px; line-height: 1.6; background: color-mix(in srgb, var(--accent) 2%, transparent); }
.sk-fmt-step b { display: inline-block; font-size: 11px; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 50%; width: 17px; height: 17px; line-height: 17px; text-align: center; margin-right: 8px; }
.sk-table { margin-top: 14px; border-top: 1px solid var(--line); }
.sk-tr { display: grid; grid-template-columns: minmax(200px, 36%) minmax(0, 1fr); gap: 4px 22px; padding: 12px 2px; border-bottom: 1px solid var(--line); align-items: baseline; }
.sk-tr b { font-size: 14px; line-height: 1.5; }
.sk-tr b small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--ink-2); }
.sk-tr span { font-size: 13px; color: var(--ink); line-height: 1.7; }
@media (max-width: 720px) {
  .sk-grid { grid-template-columns: 1fr; gap: 10px; }
  .sk-tr { grid-template-columns: 1fr; gap: 4px; padding: 11px 0; }
}

/* —— v3.46 优质SKILL：分类二级 TAB（切面板不下拉）+ 整包取用提示 —— */
.sk-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sk-sub {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-2);
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  padding: 6px 13px; cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.sk-sub b { font-weight: 600; font-size: 11px; color: var(--ink-3, var(--ink-2)); margin-left: 6px; }
.sk-sub:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.sk-sub.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.sk-sub.on b { color: color-mix(in srgb, #fff 75%, transparent); }
.sk-pick { font-style: normal; font-size: 11px; color: var(--ink-2); margin-left: 10px; }

/* —— v3.47 优质SKILL：每卡安装引导（借鉴阿里云门户：Agent 自主安装提示词 + CLI 命令，原生 details 折叠）—— */
.sk-inst { margin-top: 10px; border-top: 1px dashed var(--line); }
.sk-inst summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 500; color: var(--ink-2);
  padding: 8px 0 2px; transition: color .15s ease;
}
.sk-inst summary::-webkit-details-marker { display: none; }
.sk-inst summary::before {
  content: ''; display: inline-block; width: 0; height: 0; margin-right: 6px;
  border-left: 4px solid currentColor; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
  transition: transform .15s ease;
}
.sk-inst[open] summary::before { transform: rotate(90deg); }
.sk-inst summary:hover { color: var(--accent); }
.sk-inst-body { margin-top: 8px; display: grid; gap: 12px; }
.sk-inst-row { position: relative; }
.sk-inst-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ink-2); margin-bottom: 6px; }
.sk-inst-txt {
  font-size: 12px; line-height: 1.7; color: var(--ink-2); word-break: break-all;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  border: 1px solid var(--line); border-radius: 2px; padding: 8px 10px; margin: 0 0 6px;
}
.sk-cmd {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; color: var(--ink); word-break: break-all;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  border: 1px solid var(--line); border-radius: 2px; padding: 8px 10px; margin: 0 0 6px;
}
.copy-btn {
  font: inherit; font-size: 11px; font-weight: 500; color: var(--accent);
  background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 2px; padding: 2px 9px; cursor: pointer; margin-bottom: 6px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.copy-btn:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.copy-btn.ok { color: #fff; background: var(--accent); border-color: var(--accent); }

/* —— v3.48 首页：报头数据条 / 各榜第一摘要 / 更多版块 —— */
.hero-stats {
  display: flex; max-width: 620px; margin: 24px 0 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hero-stats a {
  flex: 1; display: flex; flex-direction: column; gap: 3px;
  padding: 13px 12px 13px 0; text-decoration: none;
}
.hero-stats a + a { padding-left: 16px; border-left: 1px solid var(--line); }
.hero-stats b {
  font-family: var(--serif); font-size: 25px; font-weight: 800; color: var(--ink);
  line-height: 1.05; font-variant-numeric: tabular-nums;
}
.hero-stats a:hover b { color: var(--accent); }
.hero-stats span { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 640px) {
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-stats a { padding: 10px 10px 10px 0; }
  .hero-stats a:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .hero-stats a:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hero-stats b { font-size: 21px; }
}

/* 各榜第一摘要行：名次大数字 + 榜名 + 榜首（logo+名）+ 一句话 + 评分，点进完整排行榜 */
.home-rank { border-top: 1px solid var(--line); }
.rk-line {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 2px; border-bottom: 1px solid var(--line);
  transition: background-color .15s ease;
}
.rk-line:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.rk-line-no {
  font-family: var(--serif); font-size: 24px; font-weight: 800; color: var(--accent);
  line-height: 1; min-width: 28px; text-align: right; font-variant-numeric: tabular-nums;
}
.rk-line-cat { flex: 0 0 84px; font-size: 13px; color: var(--ink-2); }
.rk-line-name { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; font-size: 15px; color: var(--ink); }
.rk-line-name b { font-weight: 700; }
.rk-line:hover .rk-line-name b { color: var(--accent); }
.rk-line-note { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-line-rate {
  font-family: var(--serif); font-size: 21px; font-weight: 800; color: var(--ink);
  line-height: 1; font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .rk-line { gap: 10px; }
  .rk-line-cat { flex-basis: auto; }
  .rk-line-note { flex-basis: 100%; order: 5; white-space: normal; }
  .rk-line-rate { margin-left: auto; }
}

/* 版块行副说明（cat-line 里加一行小字，不影响原有用法） */
.cat-line span:first-child { display: flex; flex-direction: column; gap: 2px; }
.cat-line em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.sect-more { margin: 12px 0 0; font-size: 13px; }

/* —— v3.48b 工具库分片加载 —— */
.load-more { display: flex; justify-content: center; padding: 20px 0 26px; }
.load-more .btn-ghost { padding: 9px 26px; font-size: 14px; }
.group-more { display: inline-block; margin: 10px 0 4px 56px; font-size: 13px; }

/* —— v3.48b 后台整修：登录页 + 导航态 + 巡检操作 —— */
body.admin .site-header { position: sticky; top: 0; z-index: 60; background: var(--bg); padding: 14px 0 10px; }
body.admin .site-header .nav { flex-wrap: wrap; row-gap: 8px; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 26px; }
.inline-form { display: inline-block; margin: 0; }
.lc-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 14px 0 6px; }
.lc-actions .hint { margin: 0; }
body.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px; background: var(--bg);
}
.login-box {
  width: 100%; max-width: 380px; background: var(--card);
  border: 1px solid var(--line); border-top: 2px solid var(--accent);
  padding: 38px 34px 26px;
}
.login-kicker {
  font-size: 12px; letter-spacing: .14em; color: var(--ink-3);
  text-transform: uppercase; margin-bottom: 10px;
}
.login-kicker span { color: var(--wm-han); font-weight: 700; }
.login-box h1 {
  font-family: var(--serif); font-size: 26px; font-weight: 800;
  color: var(--ink); margin: 0 0 18px; letter-spacing: .02em;
}
.login-box .form label, .login-box label { display: block; margin: 0 0 16px; font-size: 14px; color: var(--ink-2); }
.login-box input {
  width: 100%; margin-top: 8px; padding: 10px 12px; font-size: 15px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 2px;
}
.login-box input:focus { outline: none; border-color: var(--accent); }
.login-box .btn { width: 100%; padding: 11px 0; font-size: 15px; }
.login-back { display: inline-block; margin-top: 20px; font-size: 13px; color: var(--ink-3); }
.login-back:hover { color: var(--accent); }

/* —— v3.48c 后台版式：内容居中限宽（此前 admin-main 无任何容器样式，全页贴边、输入框拉满） —— */
.admin-head-in, .admin-main {
  max-width: 1000px; margin: 0 auto; padding-left: 20px; padding-right: 20px;
}
.admin-head-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .admin-head-in { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.admin-main { padding-top: 26px; padding-bottom: 60px; }
/* 表单控件限宽：1000px 版心下一个输入框拉满整行太蠢 */
.admin-main .form input, .admin-main .form textarea, .admin-main .form select {
  max-width: 560px; display: block;
}
.admin-main .form textarea { min-height: 90px; }
.admin-main .form select[multiple] { max-width: 560px; width: 100%; }
.admin-main .admin-filter input { max-width: 360px; }
/* 仪表盘数字卡：此前 stat-grid/stat 完全无样式，挤成一行长文本 */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 0 0 28px; }
.stat { background: var(--card); border: 1px solid var(--line); padding: 14px 16px; display: block; }
a.stat { text-decoration: none; color: inherit; }
.stat.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.stat:hover { border-color: var(--accent); }
.stat b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.stat.warn b { color: var(--warn); }
.stat.bad b { color: #c4453a; }
/* 手机端后台表格横向滚动，不再把整页撑宽（顶栏贴边的根源之一） */
@media (max-width: 720px) {
  .admin-main .admin-table, .admin-main form:has(.admin-table) { display: block; overflow-x: auto; }
  .admin-main .admin-table { white-space: nowrap; }
}
/* 工具列表名称=编辑入口（v3.48e）：手机上最右操作列被横滚藏住也点得到 */
.tname { color: var(--ink); font-weight: 600; text-decoration: none; }
.tname:hover { color: var(--accent); text-decoration: underline; }

/* —— 数据编辑器表单化（v3.48f）：数组=条目卡片可增删，对象=分组，长文本=textarea —— */
/* v3.48g 规模化：条目默认折叠成一行标题，点开编辑；顶部关键词筛选，命中的自动展开 */
#editor .esearch { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#editor .esearch input { max-width: 340px; }
#editor .ecount { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
#editor .elist { display: flex; flex-direction: column; gap: 8px; }
#editor .eitem { border: 1px solid var(--line); background: var(--card); }
#editor .eitem .eitem { background: var(--bg); }          /* 组内条目再降一层底色，看清层级 */
#editor .eitem-sum {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer; font-weight: 650; font-size: 14px;
  list-style: none;
}
#editor .eitem-sum::-webkit-details-marker { display: none; }
#editor .eitem-sum::before { content: '▸'; color: var(--ink-2); margin-right: 2px; flex-shrink: 0; }
#editor .eitem[open] > .eitem-sum::before { content: '▾'; }
#editor .eitem-cap { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#editor .eitem-body { padding: 2px 14px 14px; border-top: 1px solid var(--line); }
#editor .eobj { display: flex; flex-direction: column; }
#editor .erow { min-width: 0; }
#editor .elab { display: block; font-size: 12px; color: var(--ink-2); margin: 9px 0 3px; }
#editor input, #editor textarea {
  width: 100%; max-width: 560px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 2px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: 13px;
}
#editor textarea { max-width: 100%; resize: vertical; }
#editor .edel {
  border: 1px solid var(--line); background: none; color: var(--ink-2);
  font-size: 12px; padding: 2px 9px; cursor: pointer; border-radius: 2px; flex-shrink: 0;
}
#editor .edel:hover { color: #fff; background: #a13a3a; border-color: #a13a3a; }
#editor .eadd {
  border: 1px dashed var(--line); background: none; color: var(--ink-2);
  font-size: 13px; padding: 6px 16px; cursor: pointer; border-radius: 2px; margin: 2px 0 8px;
}
#editor .eadd:hover { color: var(--accent); border-color: var(--accent); }

/* —— 问路书（v3.49）：对话式工具参谋。全走 CSS 变量，明暗自适应 —— */
.hero-ask { margin: 12px 0 4px; font-size: 13px; color: var(--ink-2); }
.hero-ask a {
  color: var(--accent); font-weight: 650; text-decoration: none;
  border-bottom: 1px solid var(--line);
  border-bottom-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.hero-ask a:hover { border-bottom-color: var(--accent); }
/* v3.50b：落地页形态=问候+示例+输入框聚成一组垂直居中（聊天工具的空状态都这么做），
   开聊（.live）后输入框才吸底、线程自然生长。之前空状态和输入框中间一大段死空隙，像没加载完。 */
.ask-shell { max-width: 760px; margin: 20px auto 60px; display: flex; flex-direction: column; }
.ask-shell.live { min-height: 58vh; }
/* v3.51：落地态整组（问候+示例+输入框）撑起首屏并垂直居中，输入框下方不再留大段死空隙 */
.ask-shell:not(.live) { min-height: calc(100vh - 280px); justify-content: center; }
/* v3.52：落地页一组居中——问候/输入框/示例收紧，不再各自撑开留大空档 */
.ask-shell:not(.live) .ask-dock { position: static; margin-top: 0; }
.ask-empty { text-align: center; padding: 0 0 26px; }
.ask-hello { font-family: var(--serif); font-size: 34px; font-weight: 650; letter-spacing: .02em; }
.ask-sub { margin: 12px auto 0; max-width: 560px; font-size: 13px; color: var(--ink-2); line-height: 1.8; text-wrap: balance; }
.ask-below { display: flex; flex-direction: column; align-items: center; }
.ask-resume-row { display: flex; justify-content: center; margin-top: 10px; }
/* 落地态输入框收窄居中（跟问候一组），对话态恢复通栏 */
.ask-shell:not(.live) .ask-form { max-width: 680px; margin-left: auto; margin-right: auto; }
.ask-shell:not(.live) .ask-foot { justify-content: center; }
.ask-thread { display: flex; flex-direction: column; gap: 20px; padding: 12px 0 8px; }
.ask-msg { display: flex; flex-direction: column; gap: 6px; animation: askin 0.28s ease both; }
.ask-msg.user { align-items: flex-end; }
.ask-who { font-size: 12px; color: var(--ink-3); letter-spacing: .08em; }
.ask-bubble {
  max-width: 88%; padding: 11px 15px; font-size: 14px; line-height: 1.75;
  border: 1px solid var(--line); background: var(--card); overflow-wrap: break-word;
}
.ask-msg.user .ask-bubble { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.ask-bubble p { margin: 0 0 8px; }
.ask-bubble p:last-child { margin-bottom: 0; }
.ask-bubble a { color: var(--accent); text-decoration: underline; }
.ask-msg.user .ask-bubble a { color: var(--on-accent); }
@keyframes askin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ask-pending { color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.ask-sec { font-size: 12px; color: var(--ink-3); }
.ask-dots { display: inline-flex; gap: 3px; }
.ask-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  animation: askdot 1.1s ease-in-out infinite;
}
.ask-dots i:nth-child(2) { animation-delay: 0.18s; }
.ask-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes askdot { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.ask-retry {
  border: 1px solid var(--line); background: var(--card); color: var(--accent);
  font: inherit; font-size: 13px; padding: 3px 12px; cursor: pointer; border-radius: 2px; margin-left: 6px;
}
.ask-retry:hover { border-color: var(--accent); }
/* 输入区吸底：实底遮住滚过的消息，聚焦时描边亮起（无渐变，用纯色 + 阴影给质感） */
.ask-dock { position: sticky; bottom: 0; margin-top: auto; background: var(--bg); padding: 14px 0 4px; }
/* v3.57（豆包定调）：输入区收成一个大圆角容器，框内底部一条工具条——左示例问题入口、右发送。
   圆角是本页唯一放宽处（2px→14px），换取对话产品的亲和感；依旧无渐变无 emoji，靛青强调色不变 */
.ask-form {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 10px;
  /* 描边混入墨色抬对比（暗色下 --line 太暗，卡片几乎看不见）；底色比 --card 微亮一档 */
  border: 1px solid color-mix(in srgb, var(--ink-3) 42%, var(--line));
  background: color-mix(in srgb, var(--card) 86%, var(--ink) 5%);
  border-radius: 14px;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--ink) 9%, transparent);
  transition: border-color 0.15s ease;
}
.ask-form:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.ask-form textarea {
  flex: 1; padding: 6px 4px; border: none; border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 14px;
  resize: none; outline: none; min-height: 42px;
}
.ask-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ask-bar .ask-examples { margin: 0; flex: 1 1 auto; min-width: 0; }
/* 发送钮只锁 type=submit——示例 chips 也是 form 里的 button，选择器写宽会把它们染成实心靛青 */
.ask-form button[type="submit"] {
  padding: 8px 22px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
  font: inherit; font-weight: 650; cursor: pointer; border-radius: 999px; flex-shrink: 0; margin-left: auto;
}
.ask-form button[type="submit"]:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.ask-form button[type="submit"]:disabled { opacity: 0.55; cursor: wait; }
.ask-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
/* v3.52b 新对话入口按主流对话工具的惯例提到顶部常驻吸顶（DeepSeek/Kimi/ChatGPT 都在顶栏），页脚那版不显眼 */
.ask-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg); padding: 10px 0 8px;
}
.ask-top-kicker { font-size: 12px; letter-spacing: .14em; color: var(--ink-3); }
.ask-new {
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
  font: inherit; font-weight: 650; font-size: 13px; padding: 5px 14px; cursor: pointer; border-radius: 2px;
}
.ask-new:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.ask-foot .fine-print { margin: 0; }
@media (max-width: 640px) {
  .ask-shell { margin: 8px auto 30px; }
  .ask-shell.live { min-height: 52vh; }
  .ask-shell:not(.live) { min-height: calc(100vh - 300px); }
  .ask-empty { padding: 0 0 18px; }
  .ask-new { padding: 4px 10px; font-size: 12px; }
  .ask-hello { font-size: 26px; }
  .ask-bubble { max-width: 94%; }
  .ask-form { padding: 10px 12px 8px; border-radius: 12px; }
  .ask-form button[type="submit"] { padding: 8px 16px; }
}
/* v3.55e 推荐卡升级：logo + 名称 + 决策 meta 一行 + 详情入口，两列网格（回答里被点名的工具才上卡） */
.ask-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ask-card {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--line); background: var(--bg); text-decoration: none;
  transition: border-color .15s ease;
}
.ask-card .tool-logo { flex: 0 0 auto; }
.ask-card-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ask-card-main b { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-card-meta { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask-card-go { margin-left: auto; flex: 0 0 auto; font-size: 12px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; transition: color .15s ease, border-color .15s ease; }
.ask-card:hover { border-color: var(--accent); }
.ask-card:hover .ask-card-main b { color: var(--accent); }
.ask-card:hover .ask-card-go { color: var(--accent); border-color: var(--accent); }
@media (max-width: 640px) { .ask-cards { grid-template-columns: 1fr; } }
.ask-tasks { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.ask-tasks a { color: var(--accent); }
.ask-examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
/* v3.57：示例 chip 随输入容器一起转胶囊形（豆包同款），悬停描边变靛青 */
.ask-chip {
  border: 1px solid color-mix(in srgb, var(--ink-3) 42%, var(--line));
  background: color-mix(in srgb, var(--card) 86%, var(--ink) 5%); color: var(--ink-2);
  font-size: 12px; padding: 4px 12px; cursor: pointer; border-radius: 999px; font-family: inherit;
}
.ask-chip:hover { color: var(--accent); border-color: var(--accent); }
.ask-chip-resume { color: var(--accent); text-decoration: none; }
.ask-chip-resume:hover { border-color: var(--accent); }

/* v3.54 评价标签：列表行小标签 + 详情页 7 维体检条。
   色彩纪律（用户拍板）：正向才上色（靛青一系），负向灰阶，警示赭黄，#a13a3a 只在详情页出现；
   全部走 var/color-mix，暗色由变量自动翻转，无渐变。 */
.ev-tag { font-size: 11px; line-height: 1.7; padding: 0 5px; border-radius: 2px; white-space: nowrap; border: 1px solid var(--line); color: var(--ink-2); }
.ev-tag.ev-good { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 38%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ev-tag.ev-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.ev-tag.ev-bad { color: var(--ev-bad); border-color: color-mix(in srgb, var(--ev-bad) 45%, transparent); background: color-mix(in srgb, var(--ev-bad) 8%, transparent); }
.ev-tag.ev-none { border-style: dashed; color: var(--ink-3); }
.ev-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px 24px; padding: 12px 0; margin: 4px 0 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ev-item { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.ev-dim { font-size: 12px; color: var(--ink-2); white-space: nowrap; flex-shrink: 0; }
.ev-val { flex-shrink: 0; }
.ev-basis { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 640px) { .ev-strip { grid-template-columns: 1fr; gap: 7px; } .ev-basis { white-space: normal; } }

/* ===== v3.55a 分类彩色体系：11 分类专属低饱和色，只上小面积元素（色点/筛选 chip/榜单徽章）===== */
:root {
  --cat-chat: #34559b;   /* 对话助手=主色靛青 */
  --cat-search: #6e7b2f; /* 搜索=橄榄 */
  --cat-write: #3e7d54;  /* 写作=绿 */
  --cat-draw: #9c4f43;   /* 图像/设计=绛红 */
  --cat-video: #705a9c;  /* 视频=紫 */
  --cat-audio: #2e7d74;  /* 音频=青 */
  --cat-code: #35708e;   /* 编程=钢蓝 */
  --cat-office: #8a6d2f; /* 办公=赭黄 */
  --cat-agent: #97527a;  /* 智能体=梅紫 */
  --cat-api: #5b6b7d;    /* API 平台=石板灰蓝 */
  --cat-detect: #6a6a6a; /* 检测=炭灰 */
}
/* 落 --cat 变量的桥类（tcat- 前缀，避免与 cat-filter/cat-line 等布局类撞选择器） */
.tcat-chat { --cat: var(--cat-chat); }
.tcat-search { --cat: var(--cat-search); }
.tcat-write { --cat: var(--cat-write); }
.tcat-draw { --cat: var(--cat-draw); }
.tcat-video { --cat: var(--cat-video); }
.tcat-audio { --cat: var(--cat-audio); }
.tcat-code { --cat: var(--cat-code); }
.tcat-office { --cat: var(--cat-office); }
.tcat-agent { --cat: var(--cat-agent); }
.tcat-api { --cat: var(--cat-api); }
.tcat-detect { --cat: var(--cat-detect); }
/* 分类行：色点 + 悬停名称染本类色（无 tcat 的版块行回退主色） */
.cat-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--cat, var(--accent)); margin-right: 7px; vertical-align: -1px; }
.cat-line:hover span:first-child { color: var(--cat, var(--accent)); }
/* 搜索页分类筛选 chip：常态带本类色点，选中态整枚染本类色（「全部/仅看大陆可用」无 tcat，回退主色） */
.chip[class*="tcat-"]::before { content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 2px; background: var(--cat, var(--accent)); align-self: center; }
.cat-filter .chip.on { color: var(--cat, var(--accent)); border-color: color-mix(in srgb, var(--cat, var(--accent)) 45%, transparent); background: color-mix(in srgb, var(--cat, var(--accent)) 9%, transparent); }
/* 详情页榜单徽章 + 排行榜分榜：本类色细描 */
.rank-badge[class*="tcat-"] { border-color: color-mix(in srgb, var(--cat, var(--accent)) 40%, transparent); }
.rank-badge[class*="tcat-"] b { color: var(--cat, var(--accent)); }
.rk-sec[class*="tcat-"] { border-top: 2px solid color-mix(in srgb, var(--cat, var(--accent)) 55%, transparent); }
/* 暗色：11 色统一提亮降饱和（手动切换） */
:root[data-theme="dark"] {
  --cat-chat: #748bbb; --cat-search: #929f83; --cat-write: #79a096; --cat-draw: #aa888d;
  --cat-video: #938ebc; --cat-audio: #71a0a7; --cat-code: #7499b4; --cat-office: #a19883;
  --cat-agent: #a78aaa; --cat-api: #8897ac; --cat-detect: #9096a2;
}
/* 暗色：跟随系统（未手动切换时） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cat-chat: #748bbb; --cat-search: #929f83; --cat-write: #79a096; --cat-draw: #aa888d;
    --cat-video: #938ebc; --cat-audio: #71a0a7; --cat-code: #7499b4; --cat-office: #a19883;
    --cat-agent: #a78aaa; --cat-api: #8897ac; --cat-detect: #9096a2;
  }
}

/* ===== v3.55c 对比页逐项对垒：7 维复用 evalDims 口径，正向靛青/负向灰阶/更优标注 ===== */
.vs-grid { border: 1px solid var(--line); border-radius: 3px; margin: 0 0 22px; background: var(--card); }
.vs-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.vs-row:last-child { border-bottom: none; }
.vs-row > * { flex: 1; min-width: 0; padding: 10px 12px; font-size: 13px; }
.vs-dim { flex: 0 0 76px; color: var(--ink-2); font-weight: 500; display: flex; align-items: center; border-right: 1px solid var(--line); }
.vs-head { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.vs-head-dim { font-size: 12px; color: var(--ink-2); }
.vs-head-tool { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--ink); }
.vs-cell { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.vs-good { color: var(--accent); font-weight: 600; }
.vs-warn { color: #9a6b10; }
.vs-bad { color: #a13a3a; }
.vs-flat { color: var(--ink-2); }
.vs-win { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.vs-win-tag {
  font-style: normal; font-size: 11px; font-weight: 600; line-height: 1;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 2px; padding: 2px 5px;
}
.vs-row .vs-cell + .vs-cell { border-left: 1px dashed var(--line); }
@media (max-width: 560px) {
  .vs-row > * { padding: 9px 8px; font-size: 12px; }
  .vs-dim { flex-basis: 58px; font-size: 12px; }
  .vs-head-tool span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
:root[data-theme="dark"] .vs-warn { color: #c39a4a; }
:root[data-theme="dark"] .vs-bad { color: #c97a7a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vs-warn { color: #c39a4a; }
  :root:not([data-theme="light"]) .vs-bad { color: #c97a7a; }
}

/* ===== v3.55b 官方界面截图（详情页，有文件才出）===== */
.shot-fig { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); overflow: hidden; }
.shot-fig img { display: block; width: 100%; height: auto; }
.shot-fig figcaption { padding: 8px 12px; font-size: 12px; color: var(--ink-2); border-top: 1px solid var(--line); }

/* ===== v3.55e 问路书视觉跃升（老板 2026-10-22 拍板「大大跃升」）=====
   问候语放大、示例 chip 可点感、流式打字光标、气泡质感——全部纯色无渐变，主色靛青 */
.ask-hello { font-size: clamp(26px, 4.5vw, 36px); font-weight: 700; }
.ask-hello::after { content: ''; display: block; width: 34px; height: 3px; margin: 14px auto 0; background: var(--accent); }
.ask-shell:not(.live) .ask-empty { padding: 0 0 24px; }
.ask-sub { font-size: 14px; }
.ask-chip { transition: border-color .15s ease, color .15s ease, background .15s ease; }
.ask-chip:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ask-chip:active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* 流式打字光标：delta 阶段由前端拼在文本尾，done 到达即整体替换消失 */
.ask-caret {
  display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  background: var(--accent); vertical-align: -0.15em;
  animation: askcaret 1s steps(1) infinite;
}
@keyframes askcaret { 50% { opacity: 0; } }
/* 气泡质感：极浅的墨色投影勾出层次（不引渐变），用户气泡同步加深一档描边 */
.ask-bubble { box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent); }
.ask-msg.user .ask-bubble { box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 22%, transparent); }
@media (max-width: 640px) {
  .ask-hello::after { margin-top: 10px; width: 28px; }
}

/* =====================================================================
   v3.59 设计系统升级（ui-b2 方向拍板落地）
   白卡纯阴影 + 18px 圆角 + 大字重对比 + 分类色体系；明暗双 token。
   追加于文件末尾，靠层叠覆盖旧规则；回滚 = 删除本段。
   ===================================================================== */
:root{
  --bg:#f6f7f9;
  --card:#ffffff;
  --ink:#171a20;
  --ink-2:#5c6370;
  --ink-3:#8a909c;
  --line:#ececef;
  --serif:var(--sans);
  --hd-bg:rgba(255,255,255,.92);
  --chip-bg:#f2f4f7;
  --shadow-1:0 1px 2px rgba(23,26,32,.05),0 4px 14px rgba(23,26,32,.05);
  --shadow-2:0 16px 38px rgba(23,26,32,.11);
}
[data-theme="dark"]{
  --bg:#131519;
  --card:#1c1f24;
  --ink:#e8eaee;
  --ink-2:#a2a8b3;
  --ink-3:#7b8290;
  --line:#2a2e35;
  --hd-bg:rgba(19,21,25,.9);
  --chip-bg:#262a31;
  --shadow-1:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  --shadow-2:0 16px 38px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --bg:#131519; --card:#1c1f24; --ink:#e8eaee; --ink-2:#a2a8b3; --ink-3:#7b8290; --line:#2a2e35;
    --hd-bg:rgba(19,21,25,.9); --chip-bg:#262a31;
    --shadow-1:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
    --shadow-2:0 16px 38px rgba(0,0,0,.5);
  }
}

/* ---------- 基底 ---------- */
body{background:var(--bg);color:var(--ink);font-size:15px}
.site-header{background:var(--hd-bg);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.site-footer{background:var(--card);border-top:1px solid var(--line)}

/* ---------- 版式 ---------- */
.sect{padding:52px 0 20px}
.sect-title{font-size:26px;font-weight:800;letter-spacing:-.02em}
.sect-note{font-size:13px;color:var(--ink-3)}
.page-title{font-weight:800;letter-spacing:-.02em}
.shead{display:flex;align-items:baseline;gap:14px;margin-bottom:24px}
.shead-more{margin-left:auto;font-size:13px;color:var(--accent);font-weight:600;white-space:nowrap}

/* ---------- 首屏 ---------- */
.hero{background:var(--card);border-bottom:1px solid var(--line);padding:88px 0 56px;text-align:center}
.hero h1{font-family:var(--sans);font-weight:800;letter-spacing:-.03em}
.hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);background:var(--chip-bg);border-radius:999px;padding:6px 16px;margin-bottom:28px}
.hero-badge b{color:var(--accent);font-weight:700}
.search-box{border:1px solid var(--line);border-radius:14px;background:var(--chip-bg);box-shadow:var(--shadow-1);transition:border-color .15s,box-shadow .15s,background .15s}
.search-box:focus-within{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 4px rgba(52,85,155,.1)}
.search-form button{border-radius:12px;background:var(--accent);border-color:var(--accent);font-weight:600;transition:background .15s}
.search-form button:hover{background:var(--accent-ink)}
.hero-try{margin-top:20px}
.hero-try a{display:inline-block;background:var(--chip-bg);border-radius:999px;padding:5px 14px;margin:0 3px;transition:background .15s,color .15s}
.hero-try a:hover{background:#e8edf6;color:var(--accent)}
.hero-stats{margin-top:48px}
.hero-stats a{padding:0 40px;border-left:1px solid var(--line)}
.hero-stats a:first-child{border-left:0}
.hero-stats b{font-family:var(--sans);font-size:25px;font-weight:800;letter-spacing:-.02em}

/* 首屏 logo 墙（真实收录工具，灰度→彩色） */
.cloud{margin:42px auto 0;display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap;max-width:940px}
.cloud a{display:inline-flex}
.hlogo{display:inline-block;object-fit:cover;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.hlogo-tile{display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.cloud .hlogo{filter:grayscale(1);opacity:.5;transition:filter .2s,opacity .2s,transform .2s}
.cloud .hlogo:hover{filter:none;opacity:1;transform:translateY(-3px)}

/* ---------- 卡片化：工具行 / 分类行 / 统计 ---------- */
.row{background:var(--card);border:0;border-radius:14px;box-shadow:var(--shadow-1);margin:0 0 12px;transition:box-shadow .18s,transform .18s}
.row:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.cat-line{background:var(--card);border:0;border-radius:12px;box-shadow:var(--shadow-1);margin:0 0 10px;transition:box-shadow .15s,transform .15s}
.cat-line:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.stat{background:var(--card);border:0;border-radius:14px;box-shadow:var(--shadow-1)}
.stat b{font-family:var(--sans);font-weight:800}

/* ---------- 胶囊与按钮 ---------- */
.chip,.tag-chip{border:0;border-radius:999px;background:var(--chip-bg);color:var(--ink-2)}
.chip.on{background:var(--accent);color:#fff}
.btn{background:var(--accent);border-color:var(--accent);color:#fff;border-radius:12px;font-weight:600;transition:background .15s,box-shadow .15s}
.btn:hover{background:var(--accent-ink);box-shadow:0 6px 16px rgba(52,85,155,.25)}
.btn-ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line);border-radius:12px}
.home-tabs .htab{border-radius:999px}
.htab.on{color:var(--accent)}

/* ---------- v3.59 首页组件：编辑榜单特写卡 ---------- */
.p-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pick{position:relative;display:flex;flex-direction:column;background:var(--card);border-radius:14px;padding:24px 22px 20px;overflow:hidden;box-shadow:var(--shadow-1);transition:transform .18s,box-shadow .18s}
.pick::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--c,var(--accent))}
.pick:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.pick-cat{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3);margin-bottom:16px}
.pick-no{font-style:normal;margin-left:auto;font-size:12px;font-weight:700;color:var(--c,var(--accent));background:var(--chip-bg);border-radius:999px;padding:2px 8px}
.pick-body{display:flex;align-items:center;gap:12px}
.pick-nm{min-width:0}
.pick-nm b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.pick-nm i{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin-top:2px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-rate{margin-left:auto;text-align:right;flex:none}
.pick-rate b{display:block;font-size:22px;font-weight:800;line-height:1.1}
.pick-rate i{display:block;font-style:normal;font-size:11px;color:var(--ink-3);white-space:nowrap}
.pick-note{margin-top:14px;font-size:13px;color:var(--ink-2);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}
.pick-foot{margin-top:12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pick-foot i{font-style:normal;font-size:11px;color:var(--ink-2);background:var(--chip-bg);border-radius:999px;padding:3px 10px}
.pick-foot .quota{font-size:12px;font-weight:600;color:#1d7a52;background:rgba(23,160,107,.09);border-radius:8px;padding:4px 11px}
[data-theme="dark"] .pick-foot .quota{color:#4ec99a;background:rgba(23,160,107,.16)}
.pick-foot em{margin-left:auto;font-style:normal;font-size:13px;font-weight:600;color:var(--c,var(--accent))}
.pick.feat{grid-column:span 2;padding:26px 26px 22px}
.pick.feat .pick-body{gap:16px}
.pick.feat .pick-nm b{font-size:21px}
.pick.feat .pick-nm i{max-width:none}
.pick.feat .pick-rate b{font-size:30px}
.pick.feat .pick-note{font-size:14px;margin-top:16px;min-height:0}
.pick.feat .pick-foot{margin-top:auto;padding-top:14px}

/* ---------- v3.59 首页组件：任务卡 ---------- */
.t-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tcard{display:flex;flex-direction:column;background:var(--card);border-radius:14px;padding:24px 22px 20px;box-shadow:var(--shadow-1);transition:transform .18s,box-shadow .18s}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.tcard>b{font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.tcard>i{font-style:normal;margin-top:6px;font-size:13px;color:var(--ink-3)}
.tcard-logos{display:flex;align-items:center;margin-top:auto;padding-top:18px}
.tcard-logos .hlogo{width:34px;height:34px;border-radius:8px;box-shadow:0 0 0 2px var(--card)}
.tcard-logos .hlogo+*{margin-left:-9px}
.tcard-logos em{font-style:normal;margin-left:auto;font-size:12px;color:var(--ink-3);white-space:nowrap}
.tcard-logos em b{color:var(--accent);font-weight:700}

/* ---------- v3.59 首页组件：分类胶囊 / 上新 ---------- */
.cat-flow{display:flex;flex-wrap:wrap;gap:12px}
.cat-pill{display:inline-flex;align-items:center;gap:9px;background:var(--card);border-radius:12px;padding:12px 19px;font-size:14px;font-weight:600;box-shadow:var(--shadow-1);transition:transform .15s,box-shadow .15s}
.cat-pill:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.cat-pill i{width:9px;height:9px;border-radius:3px;background:var(--cat,var(--accent))}
.cat-pill span{font-size:12px;color:var(--ink-3);font-weight:500}
.f-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fcard{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:15px 17px;box-shadow:var(--shadow-1);transition:transform .15s,box-shadow .15s}
.fcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.fcard-nm{min-width:0}
.fcard-nm b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcard-nm i{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin-top:2px}
.fcard>em{font-style:normal;margin-left:auto;font-size:11px;font-weight:700;color:var(--accent);background:rgba(52,85,155,.08);border-radius:999px;padding:2px 7px;flex:none}

/* ---------- 响应式 ---------- */
@media (max-width:1020px){
  .p-grid,.t-grid,.f-grid{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:38px}
  .hero-stats a{padding:0 24px}
}
@media (max-width:640px){
  .p-grid,.t-grid,.f-grid{grid-template-columns:1fr}
  .pick.feat{grid-column:span 1}
  .hero{padding:56px 0 40px}
  .hero-stats{flex-wrap:wrap;gap:18px}
  .hero-stats a{border-left:0;padding:0 14px}
  .shead{flex-wrap:wrap;gap:6px 14px}
  .cat-pill{padding:10px 15px}
}

/* ---------- v3.59 落地验收修正 ---------- */
.wrap { max-width: 1200px; }
.pick-nm b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.tcard-logos .hlogo + .hlogo { margin-left: -9px; }
.tcard-logos .hlogo + * { margin-left: 0; }
.tcard-logos .hlogo + .hlogo { margin-left: -9px; }
.tcard-logos em { margin-left: auto; }
.fcard-nm i { white-space: nowrap; }
.fcard-nm b { max-width: 150px; }
.hero-stats { display: flex; justify-content: center; }

/* 视觉隐藏（供 SEO 的 h1） */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =====================================================================
   v3.59b 贴边修复（老板验收反馈：字/logo 贴边、hero 色带内缩）
   根因：.row/.cat-line 旧为分隔线列表（padding 左右仅 2px），v3.59 卡化后
   未补卡片内边距；hero 被 main.wrap 限宽；hero-stats 旧样式左对齐限宽。
   回滚 = 删除本段。
   ===================================================================== */
/* ① 列表行卡化补内边距（工具库/搜索/API广场/任务页全量生效） */
.row { padding: 16px 20px; }
.row:first-child { border-top: 0; }
.cat-line { padding: 14px 20px; }
.cat-line:first-child { border-top: 0; }
/* ② hero 色带全出血：抵消 main.wrap 限宽，内容仍对齐版心 */
.hero {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}
body { overflow-x: clip; }
/* ③ 首屏横排元素居中（旧样式 flex 左对齐 / 左对齐限宽） */
.hero-try { justify-content: center; }
.hero-stats { max-width: none; margin: 44px auto 0; }
.hero-submit { text-align: center; }
/* ④ 窄屏 logo 墙不落单：缩小尺寸与间距，12 个一行收进 */
@media (max-width: 900px) {
  .cloud { gap: 15px; }
  .cloud .hlogo { width: 38px !important; height: 38px !important; }
}
/* ⑤ 手机统计条 2×2，避免 3+1 落单 */
@media (max-width: 640px) {
  .hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 0; justify-items: center; }
}
/* =====================================================================
   v3.59c 首屏居中版式修复（.search-form 无 margin:auto 贴左 + stats 撑满）
   根因：.search-form{display:flex;max-width:620px} 从旧版左对齐设计继承，
   text-align:center 管不到 flex 块；.hero-stats a{flex:1} 撑满整行。
   回滚 = 删除本段。
   ===================================================================== */
.hero .search-form { margin-left: auto; margin-right: auto; }
.hero-stats { border-top: 0; border-bottom: 0; justify-content: center; }
.hero-stats a { flex: 0 0 auto; padding: 0 40px; }
.hero-stats a + a { padding-left: 40px; }

/* =====================================================================
   v3.59d 首页饱满度（回滚=删本段）
   老板验收意见：留空大、要琳琅满目 → ① hero 顶距 88→40、各元素间距压缩；
   ② 新增 mx-grid 分类×工具密集矩阵（数据=编辑榜真实条目，不造数）；
   ③ sect 板块间距 52→36；④ 版心 1200→1280
   ===================================================================== */
.wrap { max-width: 1280px; }
.hero { padding: 40px 0 32px; }
.hero-badge { margin-bottom: 18px; }
.hero-try { margin-top: 14px; }
.hero .cloud { margin-top: 22px; }
.hero-stats { margin-top: 24px; }
.hero-submit { margin-top: 20px; }
.sect { padding: 36px 0 16px; }
.shead { margin-bottom: 18px; }
.mx-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.mx-cat { background: var(--card); border-radius: 14px; padding: 14px 16px 12px; box-shadow: var(--shadow-1); min-width: 0; }
.mx-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 9px; }
.mx-head i { width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--accent)); flex: 0 0 auto; }
.mx-head b { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink-3); background: var(--chip-bg); border-radius: 999px; padding: 1px 8px; }
.mx-links { display: block; line-height: 2; }
.mx-links a { display: inline-block; font-size: 13px; color: var(--ink-2); white-space: nowrap; transition: color .15s; }
.mx-links a:not(:last-child)::after { content: '·'; margin: 0 7px; color: var(--line); }
.mx-links a:hover { color: var(--accent); }
@media (max-width: 1280px) { .mx-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .mx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mx-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   v3.59e 全站统一性+紧凑性（回滚=删本段）
   老板验收意见：画面紧凑性 / 全站设计元素统一性 / 设计质感 —— 全量 12 类页面检索后收口：
   ① Skill 市场卡由旧灰底描边卡改 v3.59 白卡纯阴影；② 排行榜描边盒改白卡、行距与大数字收紧；
   ③ TAB/小徽章统一胶囊圆角；④ 对比页/截图容器并入白卡语言；⑤ 独立表单收窄入白卡；
   ⑥ 圆角/字号令牌已在上文机械并档（2/4/8/12/14/999 六档 + 字号整数化）
   ===================================================================== */
.sk-card { border: 0; border-top: 0; border-radius: 12px; background: var(--card); box-shadow: var(--shadow-1); }
.sk-fmt-step { border: 0; border-radius: 12px; background: var(--card); box-shadow: var(--shadow-1); }
.sk-kind { border-radius: 999px; }
.vs-grid, .shot-fig { border: 0; border-radius: 12px; box-shadow: var(--shadow-1); }
.rk-board { border: 0; border-radius: 14px; box-shadow: var(--shadow-1); padding: 14px 22px 12px; }
.rk-board-title { font-size: 24px; }
.rk-row { gap: 12px; padding: 11px 2px; }
.rk-main { gap: 3px; }
.rk-no { font-size: 17px; padding-top: 3px; }
.rk-top .rk-no { font-size: 21px; }
.rk-first .rk-no { font-size: 25px; }
.rk-score b { font-size: 21px; }
.rk-nav a { border-radius: 999px; padding: 4px 12px; }
.official-chip, .kind-chip, .tag-chip { border-radius: 999px; }
main.wrap > .form { max-width: 620px; background: var(--card); border-radius: 14px; box-shadow: var(--shadow-1); padding: 20px 24px 18px; margin-top: 4px; }
main.wrap > .form input, main.wrap > .form textarea { border-radius: 8px; background: var(--bg); }
@media (max-width: 640px) {
  .rk-board { padding: 12px 14px 10px; }
  .rk-row { padding: 10px 2px; gap: 10px; }
  .rk-no { font-size: 18px; }
  .rk-top .rk-no { font-size: 21px; }
  .rk-first .rk-no { font-size: 26px; }
  .rk-score b { font-size: 20px; }
}

/* =====================================================================
   v3.59f 全站密度+质感（回滚=删本段）
   老板验收意见：改造要落在「全部」页面上 —— 本段为全站生效的密度与质感：
   ① 底色加深一档，白卡纯阴影的分离度全站立起来；② 卡片内边距/纵向间距全站降档，
   列表更密；③ 板块节奏 36→26。暗色底在本段内重申，防止层叠覆盖。
   ===================================================================== */
:root { --bg: #eef0f3; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --bg: #101216; } }
html[data-theme="dark"] { --bg: #101216; }
.row { padding: 13px 16px; margin: 0 0 10px; }
.cat-line { padding: 12px 16px; margin: 0 0 8px; }
.fcard { padding: 12px 15px; }
.pick, .tcard { padding: 18px 18px 16px; }
.pick.feat { padding: 20px 22px 18px; }
.p-grid, .t-grid { gap: 12px; }
.pick-cat { margin-bottom: 10px; }
.pick-note { margin-top: 10px; }
.tcard-logos { padding-top: 14px; }
.cat-pill { padding: 10px 16px; }
.mx-grid { gap: 10px; }
.mx-cat { padding: 12px 14px 10px; }
.sect { padding: 26px 0 12px; }
.shead { margin-bottom: 14px; }
@media (max-width: 640px) {
  .row { padding: 12px 14px; }
  .cat-line { padding: 11px 14px; }
  .pick, .tcard { padding: 16px 15px 14px; }
  .sect { padding: 22px 0 10px; }
}

/* =====================================================================
   v3.59g 问路书落地页（回滚=删本段）
   老板意见：「问路书」浮标去掉、「新对话」按钮位置很奇怪 →
   ① 空状态（落地页）没有对话可清，ask-top 整行不显示；② 对话态「新对话」右置
   ===================================================================== */
.ask-shell:not(.live) .ask-top { display: none; }
.ask-shell.live .ask-top { justify-content: flex-end; }