/* koukoutu 净室重建 · 亮色清新高级（Linear/Vercel 式） */
:root {
  --bg: #fafafc;
  --bg-soft: #f1f2f7;
  --card: #ffffff;
  --surface: #ffffff; /* 各主题块都定义了 --surface，唯独 :root 漏了 → 默认亮色下 62 处 var(--surface) 全部失效（卡片透明、选中态黑底黑字），补上 */
  --border: rgba(17, 17, 30, .08);
  --border-strong: rgba(17, 17, 30, .14);
  --text: #16161d;
  --text-dim: #56566a;
  --text-faint: #9293a5;
  --brand: #635bff;
  --brand-2: #0ea5e9;
  --grad: linear-gradient(120deg, var(--brand), #8b5cf6);
  /* v9：默认选中/悬停底从"品牌色淡渐变"改成中性 5% 黑。参考站全站的悬停/选中底就是
     rgba(0,0,0,.04)（实测 40 个元素在用），彩色只留给图形本身；4 套亮色主题各自覆盖此值。 */
  --grad-soft: rgba(20, 22, 30, .05);
  --shadow: 0 16px 48px rgba(30, 30, 60, .08);
  --radius: 16px;
  /* 2026-10-02 全主题统一网格背景：几何（28px 方格）写死在 body，只有线条颜色走这个
     token —— 切主题只换颜色、网格不动。亮色主题共用 :root 这一份，暗色主题在各自
     块里覆盖成浅线（暗底上深线不可见）。 */
  --grid-line: rgba(38, 54, 96, .065);
  /* 主题动效光斑（body::after）：每套主题在各自块里覆盖颜色与速度 */
  --fx1: rgba(99, 91, 255, .055);
  --fx2: rgba(14, 165, 233, .045);
  --fx-speed: 26s;
  /* ---- v7 视觉基线（参考 designkit.cn 的克制语言）----
     实测参考站：圆角 12px 用了 163 次、是绝对主导的一档；全程只有 15 个元素带阴影；
     页面底是冷灰、面板纯白。我们原来 999/16/14/12/8 混用 + 彩色大投影，所以显得"堆"。
     这里收成两档圆角 + 药丸，阴影一律中性、极浅；彩色只留给工具图标。 */
  --r-card: 12px;    /* 卡片 / 格子 / 图标块 */
  --r-box: 16px;     /* 容器 / 对话框 / 大面板 */
  --r-pill: 999px;   /* 胶囊 */
  --shadow-card: 0 1px 2px rgba(17, 18, 25, .04), 0 10px 28px -20px rgba(17, 18, 25, .22);
  --shadow-box: 0 1px 2px rgba(17, 18, 25, .03), 0 18px 44px -32px rgba(17, 18, 25, .35);
  /* ---- v10 左侧栏改浅色（2026-10-02，参考「美图设计室」首页截图）----
     参考站实测：侧栏底 = 页面底色（#f6f7fa，**完全无分界**）；选中项 = 比底色深约 6% 的
     浅灰胶囊（#e8eaf0）；文字图标全深色；「创建」是唯一的白底胶囊（主按钮）。
     🔴 与 v8 相反的两条，改回深色前先读：
     ① 底色直接复用 var(--bg)，侧栏与页面同底、无分界 —— 不要再掺 --brand 调深；
     ② 文字层次走 --text / --text-dim / --text-faint 三档深灰。v8 那套 rgba(255,255,255,x)
        白透明度在浅底上就是"白字压白底"（和 v8 注释里"深字压深底"是同一个错，方向相反）。
     （v8 深色版：--side-bg 掺 brand 10% 进近黑 + 白透明度三档，2026-10-01 ~ 10-02 在线。） */
  --side-bg: var(--bg);
  --side-line: color-mix(in srgb, var(--text) 8%, transparent);
  --side-text: var(--text);
  --side-dim: var(--text-dim);
  /* 🔴 --side-faint 不能直接继承 --text-faint：实测对比只剩 2.37~2.56（红线 3，"浅底浅字"）。
     掺 70% 的 --text-dim 压深 → plain 实测 ≈4.4，仍比 --side-dim 浅一档，层次不丢。 */
  --side-faint: color-mix(in srgb, var(--text-dim) 70%, var(--text-faint));
  --side-hover: color-mix(in srgb, var(--text) 5%, transparent);
  --side-active: color-mix(in srgb, var(--text) 6%, var(--bg));
  --side-count: color-mix(in srgb, var(--text) 9%, transparent);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  min-height: 100vh; -webkit-font-smoothing: antialiased; line-height: 1.6;
  /* 2026-10-02 晚：网格挪到 body::before（见下），body 本体只留底色。
     isolation 让 body 成为堆叠上下文，::before 的 z-index:-1 才不会沉到 body 背景之后。 */
  isolation: isolate;
}
/* 全站统一网格（2026-10-02）：28px 方格，几何/动画只有这一份，切主题只换 --grid-line 颜色。
   动态化：position:fixed 的伪元素做 transform 平移（GPU 合成，不动 background，不整页重绘），
   28px = 一个瓦片，位移一个瓦片后循环无缝。prefers-reduced-motion 用户自动回到静态。 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
  animation: kkGrid 12s linear infinite;
  will-change: transform;
}
@keyframes kkGrid { to { transform: translate(28px, 28px); } }

/* 主题动感特效层（2026-10-02 晚）：body::after = 两团主题色光斑缓慢漂移呼吸（极光式）。
   颜色/速度全走 token（--fx1/--fx2/--fx-speed），每套主题一个"动效人格"；
   黑夜主题整体替换成星点闪烁（见 night 块）。同为 GPU transform，不整页重绘。 */
body::after {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 34% at 22% 26%, var(--fx1), transparent 70%),
    radial-gradient(36% 30% at 76% 70%, var(--fx2), transparent 70%);
  animation: kkFx var(--fx-speed, 26s) ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kkFx {
  from { transform: translate3d(-2.5%, -2%, 0) scale(1); }
  to { transform: translate3d(2.5%, 2.5%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }

/* 导航 */
/* 2026-10-02 顶栏「去栏化」（用户：「参考这张图片把顶栏取消，把顶上功能全部集合在点击头像后」）：
   参考站 designkit.cn 的顶栏是一条**无形**的行 —— fixed / 与页面同色 / 无模糊 / 无边框 / 无阴影，
   靠"内容从底下过"来成条。这里照做：
     · 背景改成 var(--bg)（= 页面底色，静止态看不出来；但它不透明，滚动时能把正文盖住 ——
       与"透明 + 不遮内容"是同一件事的两种写法，参考站用的也是这个）；
     · 去掉 backdrop-filter（底色不透明后磨砂没有意义）；
     · 下边线平时 transparent、滚动时由 .nav.scrolled 给一条 10% 的 —— 灰底上不画线的话，
       滚过去的正文会在 64px 处被硬切一刀，反而认不出那是"栏的边界"。
   导航链接（.nav-links）整条删除，内容搬进头像面板；左边只剩 logo、右边只剩三件。
   ⚠ 高度必须保持 64px（+1px 边线 = 65px）：.layout 的 min-height 与 .tk-app 的 height
     都写着 calc(100vh - 64px)，改高度会让工作台整体错位。 */
.nav { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid transparent; }
/* 2026-10-02：通栏从"只有首页"放开到**全站**。
   原来只有首页 .nav-inner 通栏，其余页保持 1280 以对齐 .section / .footer-inner 的 1280 居中容器。
   但顶栏里已经没有导航链接了，左端只剩 logo —— 而 logo 的视觉归属是**它下面的侧栏列**
   （左侧栏在 .layout 里是全宽贴边的，收藏/分类/账号三页都有）。继续按 1280 居中，
   那三页就会出现"logo 悬在 236px 侧栏的中间"这种错位，比尺寸不齐更显眼。
   代价：那 5 个页面的右上控件会比正文右沿（1332）多出 80px —— 顶栏此时已经是 chrome 层、
   不是内容容器，让左右两端都贴视口反而是统一的。
   ⚠ .home 仍然挂在 index.html 的 <body> 上：不是给这里用，是给窄条态 logo 用（见 .logo-name）。 */
.nav-inner { max-width: none; margin: 0 auto; padding: 0 28px; height: 64px; display: flex; align-items: center; gap: 30px; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; }
.logo-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--grad); display: grid; place-items: center; font-size: 15px; color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 22%, transparent); }
/* v9：品牌字从蓝紫渐变 → 深色纯字。参考站的字标就是深色，彩色只留在图形上；
   页眉同时出现"渐变字 + 蓝色图豆胶囊"两处彩色，是页面发花的原因之一。 */
.logo em { font-style: normal; color: var(--text); }
/* 2026-10-02：品牌字包进 .logo-name，好让 logo 跟着侧栏一起收窄 ——
   侧栏收成 64px 窄条时只剩 .logo-mark（参考图里窄条态的左上角就只有一个图形标记）。
   左内边距 28 → 16 是把 32px 的标记摆到 64px 窄条的正中。
   🔴 必须限定 body.home：.rail 这个状态类是挂在 <html> 上的、6 个页面都会套
      （site.js 首屏读 localStorage 无条件设），但只有首页的侧栏真的会收起 ——
      不限定的话，那 5 个页面的 logo 会被一起剃成图标。 */
html.rail body.home .logo-name { display: none; }
html.rail body.home .nav-inner { padding-left: 16px; }
/* 2026-10-02 顶栏「去栏化」：右组从 6 件减到 3 件 —— 搜索 / 主题 / 签到搬进头像面板，
   导航链接搬进面板，剩下的就是参考图右上角那三样：额度胶囊、通知、头像。
   ⚠ 高度一律保持 36px：_chk_navtheme.js 断言 .nav-right 所有直接子元素等高且顶/底边对齐。
   ⚠ DOM 顺序是 铃铛→胶囊→头像（site.js / checkin.js 的注入顺序决定），
     显示顺序靠 order 调成 胶囊→铃铛→头像（参考图里额度在最左、头像在最右）。 */
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-right > .credits-pill { order: 1; }
.nav-right > .site-bell { order: 2; }
.nav-right > .site-user { order: 3; }
/* 2026-10-02：搜索框随顶栏一起收进头像面板 → 从"顶栏里 200px 的固定宽"改成"占满面板一行"，
   原来那条 :focus-within 撑宽动画（240→280 年代的产物）随之去掉，改成聚焦时描边变品牌色。 */
.search-box { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; height: 36px; padding: 0 16px; width: 100%; }
.search-box input { border: none; outline: none; font-size: 13.5px; width: 100%; background: none; }
/* v9：图豆胶囊从"品牌色底 + 渐变数字"收敛成白底描边（参考站页眉右侧全是白底深字的小圆钮），
   数字加重一档来保住信息层级。
   2026-10-02：描边由 --border(5.5%) → --border-strong(12%)。顶栏底色改成白 70% 后，
   白胶囊与白横条只差 6 个色阶，靠 5.5% 的边线已经认不出是个控件了
   （_shot_navright 字符图上胶囊几乎消失）；铃铛/主题/账号三颗本来就用 --border-strong，
   这里补齐后右侧 5 个控件才同一套语言。 */
.credits-pill { display: inline-flex; align-items: center; gap: 4px; height: 36px; background: var(--surface); border: 1px solid var(--border-strong); padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text-dim); text-decoration: none; }
/* 2026-10-02 晚：胶囊 💎 emoji → 线条「图豆」图标（sideicons 同款语言，纯色跟主题走） */
.credits-pill .bean-ico { flex: none; color: var(--brand); margin-right: 2px; }
/* 2026-10-02：图豆胶囊变成 <a href="/pricing.html"> —— 顶栏右上角要保留的"充值"入口就是它
   （原来那条 .nav-links 里的「充值」文本链接已随顶栏一起去掉）。 */
.credits-pill b { color: var(--text); font-weight: 600; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; }

/* 按钮 */
.btn { border: none; border-radius: 12px; font-size: 14px; font-weight: 600; padding: 11px 26px; transition: all .2s; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 28%, transparent); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px color-mix(in srgb, var(--brand) 38%, transparent); }
.btn-ghost { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); }
.btn-ghost:hover { border-color: var(--brand); }
.btn-sm { padding: 8px 18px; font-size: 13px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ===== 首页 Hero（2026-10-01 改版 · 参考稿：居中大标题 + 提示词对话框）=====
   🔴 结构契约（_chk_hero_ui.js 会实测，改版别动）：
     ① .hero-band > .hero-inner > .hero-head（.hero-eyebrow / .hero-title）
     ② #ptBox 对话框 = .pt-top（#ptThumb 缩略图 + #ptInput 指令框）
        + .pt-bar（#ptPick / #ptModel / #ptOpts / #ptCost / #ptSend）
   ⚠ 2026-10-02：原来还有 ③ 推荐工具的大卡（.hero / .hero-card / .hero-badge）——
     那两块（#sec-rec / #sec-same）已按需求整体删除，样式一并清掉，别再参考旧版往这加。
   .hero-band 只承载品牌文案与对话框，是纯静态层，接口挂掉也不影响。 */
.hero-band {
  position: relative;
  padding: 46px 32px 34px; margin: -26px -32px 26px;
  /* v9：白→灰的收边渐变也去掉。参考站整页就是一块纯色 #ebedf2（实测无任何渐变），
     对话框白色面板"浮"在灰底上靠的是色阶差，不需要 band 自己再亮一档；
     亮一档反而让灰底显得脏（对比之下）。 */
  background: var(--bg);
}
.hero-inner { position: relative; z-index: 2; }
.hero-head { max-width: 660px; margin: 0 auto; text-align: center; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 500; color: var(--text);
  /* v9：字从品牌色 → 深色。参考站的"上线提示"胶囊就是淡底深字，彩色只留给 ✨；
     标题上方挂着蓝字胶囊会把视线往下拽。
     2026-10-02 顶部优化补：**底与描边也一起去掉品牌色**（原为 brand 6% / brand 12%，
     实测渲成 #f2f6fe 的淡蓝块）。v9 的原则是"彩色只留 logo 图形与小图标"，
     这是它唯一漏掉的一处彩色面，偏偏位置最显眼（大标题正上方）。
     改成白底 + 一条中性细边，和图豆胶囊 / 其它白胶囊同一套语言。 */
  background: var(--surface);
  border: 1px solid var(--border);
}
/* 🔴 44px/800 → 30px/600 → 28px/600 → **26px/500**。参考站 h1 实测 26px/500/字距 normal。
   v9 复盘：28/600 在 Windows 上经字体回退落到雅黑 **Bold**，而参考站字重 500 落到雅黑
   **Regular** —— 同样是回退，我们整整重一档，这就是"质感差"的最大单一来源。
   字重对齐后字号也回到参考原值 26（已对照 _ref_dk_top.png 目视复核）。 */
.hero-title { margin-top: 16px; font-size: 26px; font-weight: 500; line-height: 1.34; letter-spacing: 0; color: var(--text); }

/* ---- 提示词对话框（首页主入口）：选图 + 写指令 → 发送到工具页 ----
   跳转前会先把选中的图 POST /api/upload 换成服务器地址，再拼 ?slug=&from=&prompt=&prefill=
   （浏览器地址栏放不下 File 对象；工具页读到 from 会自动当输入图，见 tool.js applyIncomingImage）。 */
.pt-box {
  /* 参考站实测：卡片 1060×218 / 视口 1872 ≈ 56.6% 宽；我们在 1440 视口取 880px 上限
     （61%，视口再大也封顶），高度靠加高输入区与内边距对齐参考的比例 */
  position: relative; max-width: 880px; margin: 24px auto 0;
  padding: 20px 20px 14px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border);
  /* v7：原来是把品牌色 62% 混进大投影里 → 盒子下面一圈蓝雾。换成中性极浅投影。 */
  box-shadow: var(--shadow-box);
}
.pt-top { display: flex; gap: 14px; align-items: flex-start; }
.pt-thumb {
  flex: 0 0 84px; width: 84px; height: 84px; padding: 0; border-radius: var(--r-card); cursor: pointer;
  display: grid; place-items: center; overflow: hidden; transition: .18s;
  /* 虚线框显得像"待填的表单"；参考稿的上传位是无框的 +。这里保留方框（结构不动）但改成实线极浅边 */
  background: var(--bg-soft); border: 1px solid var(--border);
}
.pt-thumb:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); background: var(--surface); }
.pt-thumb.has-img { border-style: solid; border-color: var(--border); }
.pt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-thumb-ph { display: grid; justify-items: center; gap: 3px; color: var(--text-faint); font-size: 11.5px; font-weight: 500; }
.pt-input {
  flex: 1 1 auto; min-width: 0; min-height: 96px; max-height: 220px; overflow-y: auto;
  padding: 4px 0 0; border: none; outline: none; background: transparent; resize: none;
  font-family: inherit; font-size: 15px; line-height: 1.7; color: var(--text);
}
.pt-input::placeholder { color: var(--text-faint); }
.pt-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pt-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 240px; height: 34px; padding: 0 13px;
  /* v7：白底 + 1px 浅边（参考稿的胶囊是白底浅边灰字），原来是浅灰底、hover 变蓝字蓝边 —— 蓝用得太多就"廉价" */
  border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface);
  color: var(--text-dim); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: .18s;
}
.pt-chip:hover { border-color: var(--border-strong); color: var(--text); }
.pt-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-chip-model {
  /* 模型胶囊只比普通胶囊"重"一点点（更深边 + 更深字），不再整块上品牌色 */
  color: var(--text); background: var(--surface);
  border-color: var(--border-strong); font-weight: 600;
}
.pt-caret { font-size: 9px; opacity: .75; font-style: normal; }
.pt-caret[hidden] { display: none; }
.pt-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pt-cost { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--text-faint); white-space: nowrap; }
.pt-send {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 20px;
  border: none; border-radius: 999px; cursor: pointer; transition: .18s;
  background: var(--text); color: var(--surface); font-size: 13.5px; font-weight: 600;
}
.pt-send:hover { transform: translateY(-1px); opacity: .92; }
.pt-send:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.pt-send-ico {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 22%, transparent);
}
/* 下拉面板：选工具 / 选某个选项组，两种模式共用（内容由 app.js 注入）
   ⚠ 它的定位包含块是 .pt-box，而 .hero-band 绝不能加 overflow:hidden ——
     面板会伸到柔光底之外，一裁就看不见了（旧版那层漂浮装饰卡才需要裁）。 */
.pt-pop {
  /* left 只是「JS 还没跑」时的兜底值：真实位置由 openPtPop() 按被点胶囊的 offsetLeft 覆写 */
  position: absolute; left: 16px; top: calc(100% - 8px); z-index: 40;
  min-width: 300px; max-width: 400px; max-height: 288px; overflow-y: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-box);
  box-shadow: 0 26px 54px -24px rgba(20, 20, 40, .38);
}
.pt-pop[hidden] { display: none; }
.pt-opt-head { padding: 7px 10px 5px; font-size: 11.5px; font-weight: 600; color: var(--text-faint); }
.pt-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: none; border-radius: 10px; background: transparent; text-align: left; cursor: pointer;
}
.pt-opt:hover { background: var(--bg-soft); }
/* v7：选中项由"淡蓝底 + 蓝对勾"改成中性 —— 这是全页最后一处大面积品牌色。
   选中态只做"比悬停再深一档"的层级差（否则选中行和悬停行长得一样），对勾改深色。 */
.pt-opt.on { background: color-mix(in srgb, var(--text) 9%, transparent); }
.pt-opt-i {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: 13px; background: var(--bg-soft);
}
/* 🔴 .pt-opt-x / .pt-opt-t / .pt-opt-s 必须显式块级化：
   它们是 <span>（HTML 里嵌在 <button> 中），UA 默认 display:inline ——
   一旦保持 inline，标题与描述会排成同一行、连 nowrap 的截断都失效，整行溢出面板。 */
.pt-opt-x { flex: 1 1 auto; min-width: 0; display: block; }
.pt-opt-t { display: block; font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-opt-s { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-opt-c { flex: 0 0 auto; color: var(--text); font-size: 13px; }

/* 2026-10-02：原来这里的 .hero / .hero-card / .hero-ico / .hero-badge
   （首页「推荐工具」左侧那两张入口大卡）已随区块整体删除。
   ⚠ 别把 .hero-band / .hero-inner / .hero-head / .hero-eyebrow / .hero-title 一起删了 ——
     那几个是**页面顶部**柔光底 + 标题，跟这两个区块没关系。 */

/* 2026-10-02：.pt-sec / .pt-sec-head / .pt-tab / .pt-sec-more / .pt-rec / .pt-grid /
   .pt-cell* / .pt-same / .pt-pill* / .pt-empty（首页「推荐工具」+「一键同款」两块的全部样式）
   已随那两个区块整体删除。
   ⚠ 保留的 .pt-* 是**页面顶部那个对话框**的一套（.pt-box / .pt-top / .pt-bar / .pt-chip /
     .pt-input / .pt-thumb / .pt-cost / .pt-send / .pt-pop / .pt-opt*）—— 别一起清了。 */
/* v9：图标 emoji 统一压一档饱和。emoji 是红粉紫蓝绿各说各话，一排摆开最"花"；
   参考站的图标是**同一套风格**的彩色小图，我们改不了图形语言，但能把饱和度压到 82%
   让它们往"一套图标"的方向靠。只压图标容器，不碰正文文字。 */
.tool-icon { filter: saturate(.82); }

@media (max-width: 1024px) {
  .hero-title { font-size: 24px; }
}
@media (max-width: 700px) {
  .hero-band { padding: 34px 18px 24px; margin: -26px -32px 22px; }
  .pt-box { padding: 13px 13px 10px; }
  .pt-thumb { flex-basis: 60px; width: 60px; height: 60px; }
  .pt-input { min-height: 62px; font-size: 14px; }
  .pt-cost { margin-left: 0; }
}

/* 板块 */
.section { max-width: 1280px; margin: 46px auto 0; padding: 0 28px 30px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
/* v7：22px/800 + 5px 渐变竖条 → 18px/650 + 22px 深色短下划线（与 .pt-sec-head 统一语言）。
   竖条是"后台管理系统"的语汇，下划线是"设计工具"的语汇（参考站两个区块标题都是下划线）。 */
.section-head h2 { position: relative; display: block; padding-bottom: 7px; font-size: 18px; font-weight: 600; }
.section-head h2::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: 22px; height: 2px;
  border-radius: 2px; background: var(--text);
}
.count-pill { font-size: 12.5px; color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); padding: 5px 14px; border-radius: 999px; }

/* 工具卡片网格 */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tool-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all .25s; position: relative; overflow: hidden; padding: 0; }
.tool-card:hover { transform: none; box-shadow: var(--shadow-card); border-color: var(--border-strong); }
.tool-cover { width: 100%; height: 116px; object-fit: cover; display: block; }
.tool-body { padding: 14px 18px 18px; }
/* v9：图标 tile 去描边。彩色 emoji + 彩色描边 = 双重彩色；参考站同位置是无边框的浅灰底。 */
.tool-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--grad-soft); border: 1px solid transparent; display: grid; place-items: center; font-size: 20px; }
.tool-name { margin-top: 4px; font-size: 15.5px; font-weight: 700; }
.tool-desc { margin-top: 6px; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 40px; }
.tool-badge { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700; background: var(--grad); color: #fff; padding: 3px 10px; border-radius: 999px; }
.free-tag { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700; background: #eaf3de; color: #3b6d11; padding: 3px 10px; border-radius: 999px; }
.fav-btn { position: absolute; bottom: 14px; right: 14px; background: none; border: none; font-size: 16px; opacity: .4; transition: .2s; }
.fav-btn.on { opacity: 1; }
.fav-btn:hover { opacity: 1; transform: scale(1.15); }

/* 分类 chip */
.cats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.cat-chip { padding: 8px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); transition: .2s; }
.cat-chip.on { background: var(--brand); color: #fff; border-color: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 30%, transparent); }

/* 页脚 */
.footer { margin-top: 70px; border-top: 1px solid var(--border); background: var(--bg-soft); }
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 40px 28px; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer h4 { font-size: 14px; margin-bottom: 14px; }
.footer a { display: block; font-size: 13px; color: var(--text-faint); margin-bottom: 9px; }
.footer a:hover { color: var(--brand); }

/* toast */
.toast { position: fixed; top: 80px; left: 50%; transform: translateX(-50%) translateY(-16px); background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); padding: 12px 24px; border-radius: 12px; font-size: 14px; z-index: 999; opacity: 0; pointer-events: none; transition: .3s; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== 工具详情工作台 ===== */
.wb { display: grid; grid-template-columns: 400px 1fr; min-height: calc(100vh - 64px); }
.wb-side { background: var(--surface); border-right: 1px solid var(--border); padding: 22px 26px; position: sticky; top: 64px; height: calc(100vh - 64px); display: flex; flex-direction: column; }
.wb-back { font-size: 13px; color: var(--text-faint); }
.wb-back:hover { color: var(--brand); }
.wb-title { margin-top: 12px; font-size: 24px; font-weight: 800; }
.wb-desc { margin-top: 8px; font-size: 13px; color: var(--text-dim); }
.wb-form { flex: 1; overflow-y: auto; margin-top: 18px; padding-right: 8px; min-height: 0; }
.form-item { margin-bottom: 18px; }
.form-item label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.form-item label .req { color: #e24b4a; }
.form-item input[type="text"], .form-item textarea, .form-item select { width: 100%; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 11px; padding: 11px 14px; font-size: 14px; color: var(--text); outline: none; }
.form-item input:focus, .form-item textarea:focus, .form-item select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }
.upload-zone { border: 1.5px dashed var(--border-strong); border-radius: 12px; padding: 26px 16px; text-align: center; color: var(--text-faint); font-size: 13px; cursor: pointer; background: var(--bg-soft); }
.upload-zone:hover { border-color: var(--brand); color: var(--brand); }
.upload-zone .up-ico { font-size: 26px; display: block; margin-bottom: 8px; }
.url-input { margin-top: 8px; width: 100%; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 11px; padding: 10px 14px; font-size: 13px; outline: none; }
.wb-foot { border-top: 1px solid var(--border); padding-top: 16px; }
.wb-cost { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-dim); margin-bottom: 12px; }
.wb-go { font-size: 16px; padding: 14px; letter-spacing: 2px; }
.wb-main { padding: 22px 28px; min-width: 0; display: flex; flex-direction: column; }
.wb-canvas { flex: 1; min-height: 460px; border-radius: 18px; border: 1px solid var(--border); background: radial-gradient(800px 400px at 70% -20%, color-mix(in srgb, var(--brand) 6%, transparent), transparent 60%), #fafafc; display: grid; place-items: center; }
.wb-empty { text-align: center; padding: 40px; }
.wb-empty-ico { font-size: 60px; }
.wb-empty-title { margin-top: 16px; font-size: 20px; font-weight: 800; }
.wb-empty-tip { margin-top: 10px; font-size: 13px; color: var(--text-faint); }
.wb-spinner { width: 54px; height: 54px; margin: 0 auto; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--brand) 18%, transparent); border-top-color: var(--brand); border-right-color: var(--brand-2); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wb-loading { text-align: center; padding: 40px; }
.wb-loading-title { margin-top: 18px; font-size: 16px; font-weight: 700; }
.progress-bar { margin-top: 16px; height: 8px; background: var(--bg-soft); border-radius: 6px; overflow: hidden; }
.progress-bar i { display: block; height: 100%; background: var(--grad); border-radius: 6px; transition: width .5s; }
.wb-loading-pct { margin-top: 10px; font-size: 13px; color: var(--brand); font-weight: 700; }
.wb-result { width: 100%; height: 100%; display: flex; flex-direction: column; }
.wb-result-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; font-size: 13px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.wb-result-img { flex: 1; min-height: 0; width: 100%; object-fit: contain; background-image: conic-gradient(#eef0f5 0 25%, #fafafc 0 50%, #eef0f5 0 75%, #fafafc 0); background-size: 22px 22px; }
.wb-history { margin-top: 16px; }
.wb-history-title { font-size: 13px; font-weight: 700; color: var(--text-dim); margin-bottom: 10px; }
.wb-history-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.hist-item { width: 96px; height: 72px; border-radius: 10px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--border); cursor: pointer; background: var(--surface); }
.hist-item img { width: 100%; height: 100%; object-fit: cover; }
.hist-item.ok { border-color: rgba(52,211,153,.5); }
.hist-item.fail { border-color: rgba(226,75,74,.5); }

.empty { text-align: center; padding: 60px 0; color: var(--text-faint); font-size: 14px; }

/* ===== 左侧锚点导航（首页，简短 + 点击下滑） ===== */
.side-anchor {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 9px; font-size: 13.5px; color: var(--text-dim);
  cursor: pointer; transition: .15s;
}
.side-anchor:hover { background: var(--bg-soft); color: var(--text); }
.side-anchor.active { color: var(--brand); background: var(--grad-soft); font-weight: 600; }
.sa-count { margin-left: auto; font-size: 11px; color: var(--text-faint); background: var(--bg-soft); padding: 1px 8px; border-radius: 999px; }
.side-anchor.active .sa-count { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }

/* 锚点滚动时给 sticky 导航留出高度 */
.section, #sections { scroll-margin-top: 84px; }
.tool-main .hero, .tool-main .section { padding-left: 0; padding-right: 0; }

/* ===== 左侧导航列表（工具目录） ===== */
.layout { display: flex; min-height: calc(100vh - 64px); }
/* v10：整条左栏回浅色（侧栏底 = var(--bg)，与页面同底、无分界 —— 参考「美图设计室」）。
   这里是收藏 / 分类 / 账号三页共用的 45 工具目录，首页那份 .side-nav--home 只是内容不同、
   同一个壳，所以配色必须在这里统一给（token 在 :root 的 --side-*，两段都要走 token）。 */
.side-nav {
  width: 248px; flex-shrink: 0; border-right: 1px solid var(--side-line);
  background: var(--side-bg); color: var(--side-dim);
  position: sticky; top: 64px; height: calc(100vh - 64px);
  overflow-y: auto; padding: 18px 12px;
}
.side-nav::-webkit-scrollbar { width: 6px; }
.side-group { margin-bottom: 6px; }
.side-group-head {
  font-size: 12px; font-weight: 700; color: var(--side-faint);
  letter-spacing: .5px; padding: 8px 12px; cursor: pointer; display: flex;
  align-items: center; justify-content: space-between; border-radius: 8px;
}
.side-group-head:hover { color: var(--side-text); background: var(--side-hover); }
.side-group-head .arr { transition: transform .2s; font-size: 10px; }
.side-group.collapsed .side-tools { display: none; }
.side-group.collapsed .arr { transform: rotate(-90deg); }
.side-tools { display: flex; flex-direction: column; }
.side-tool {
  font-size: 13px; color: var(--side-dim); padding: 7px 12px 7px 24px;
  border-radius: 8px; cursor: pointer; transition: .15s; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.side-tool:hover { color: var(--side-text); background: var(--side-hover); }
/* v10 浅底下选中态回到深字 + 一块浅灰胶囊（--side-active）。
   （v8 深底版：不用品牌色、升到最亮一档白 —— 那条 color:#fff 已随深色一起删。） */
.side-tool.active { color: var(--side-text); background: var(--side-active); font-weight: 600; }

/* ===== 批量上传 ===== */
.upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.upload-tile {
  position: relative; aspect-ratio: 1; border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; background: var(--bg-soft);
}
.upload-tile img { width: 100%; height: 100%; object-fit: cover; }
.upload-tile .rm {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; border: none; font-size: 12px; line-height: 1;
}
.upload-add {
  aspect-ratio: 1; border: 1.5px dashed var(--border-strong); border-radius: 12px;
  display: grid; place-items: center; cursor: pointer; color: var(--text-faint);
  font-size: 12px; text-align: center; transition: .2s; background: var(--surface);
}
.upload-add:hover { border-color: var(--brand); color: var(--brand); }
.upload-add .plus { font-size: 26px; display: block; margin-bottom: 4px; }

/* ===== 模型信息 + 评分 ===== */
.model-badge {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--brand); background: var(--grad-soft); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  padding: 5px 12px; border-radius: 999px; margin-top: 10px;
}
.rating-line { margin-top: 8px; font-size: 12.5px; color: var(--text-faint); }
.rating-line b { color: #ba7517; }

/* ===== 结果网格（批量） ===== */
.result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; width: 100%; padding: 18px; }
.result-item { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.result-item .rimg {
  aspect-ratio: 1; background-image: conic-gradient(#eef0f5 0 25%, #fafafc 0 50%, #eef0f5 0 75%, #fafafc 0);
  background-size: 22px 22px; display: grid; place-items: center; overflow: hidden;
}
.result-item .rimg img { width: 100%; height: 100%; object-fit: contain; }
.result-item .rbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; }
.result-item .rbar .dn { font-size: 12px; color: var(--brand); font-weight: 600; cursor: pointer; }
.result-item .rbar .dn:hover { text-decoration: underline; }

/* 工具页主区 */
.tool-main { flex: 1; min-width: 0; padding: 26px 32px; }
.tool-head { margin-bottom: 20px; }
.tool-head h1 { font-size: 26px; font-weight: 800; }
.tool-head .sub { margin-top: 8px; font-size: 14px; color: var(--text-dim); }
.workbench { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.wb-canvas-full { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); min-height: 360px; }
.params-panel { border: 1px solid var(--border); border-radius: 16px; padding: 20px; background: var(--surface); }

@media (max-width: 900px) {
  .side-nav { display: none; }
  .workbench { grid-template-columns: 1fr; }
}

/* ===== 高级工作台（工具操作端） ===== */
.wb-head { margin-bottom: 24px; }
.wb-back { font-size: 13px; color: var(--text-faint); }
.wb-back:hover { color: var(--brand); }
.wb-title { font-size: 30px; font-weight: 800; letter-spacing: -.5px; margin-top: 10px; line-height: 1.25; }
.wb-sub { margin-top: 8px; font-size: 14px; color: var(--text-dim); max-width: 680px; line-height: 1.7; }
.wb-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

.wb-grid { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.wb-stage { min-width: 0; }
.wb-canvas {
  min-height: 500px; border-radius: 20px; border: 1px solid var(--border);
  /* 2026-10-02 晚：底色/彩晕删掉改透明 —— 操作画布直接透出 body::before 的全站动态网格
     （用户要求「网格操作界面也要」），与页面共用同一张网格、同一套动画。 */
  background: transparent;
  box-shadow: 0 1px 2px rgba(17,17,30,.03);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.wb-empty { text-align: center; padding: 60px 40px; }
.wb-empty-ico { font-size: 76px; line-height: 1; filter: drop-shadow(0 12px 30px color-mix(in srgb, var(--brand) 25%, transparent)); }
.wb-empty-title { margin-top: 20px; font-size: 20px; font-weight: 800; }
.wb-empty-tip { margin-top: 10px; font-size: 13.5px; color: var(--text-faint); }

.wb-params {
  position: sticky; top: 84px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; box-shadow: 0 8px 30px rgba(30,30,60,.06); overflow: hidden;
}
.wb-params-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 700; }
.wb-params-sub { font-size: 10px; letter-spacing: 2px; color: var(--text-faint); font-weight: 600; }
.wb-form { padding: 20px 22px; max-height: 50vh; overflow-y: auto; }
.wb-form::-webkit-scrollbar { width: 6px; }
.wb-actions { padding: 18px 22px; border-top: 1px solid var(--border); background: var(--surface); }
.wb-cost { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-dim); margin-bottom: 14px; }
.wb-cost b { font-size: 18px; color: var(--brand); font-weight: 800; }
.wb-cta {
  width: 100%; padding: 15px; font-size: 16px; font-weight: 700; letter-spacing: 3px;
  border-radius: 14px; background: linear-gradient(120deg, var(--brand), #8b5cf6); color: #fff;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 35%, transparent); transition: all .2s; border: none;
}
.wb-cta:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 34px color-mix(in srgb, var(--brand) 45%, transparent); }
.wb-cta:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.wb-hint { margin-top: 10px; font-size: 12px; color: var(--text-faint); text-align: center; }

/* 表单控件高级化 */
.form-item { margin-bottom: 16px; }
.form-item label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--text); }
.form-item label .req { color: #e24b4a; margin-left: 2px; }
.form-item input[type="text"], .form-item textarea, .form-item select {
  width: 100%; background: var(--bg-soft); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 11px 14px; font-size: 14px; color: var(--text);
  outline: none; transition: all .2s;
}
.form-item input:focus, .form-item textarea:focus, .form-item select:focus { border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }
.form-item select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2356566a' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }

/* 上传区高级化 */
.upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; padding: 22px; width: 100%; }
.upload-add {
  aspect-ratio: 1; border: 1.5px dashed var(--border-strong); border-radius: 14px;
  display: grid; place-items: center; cursor: pointer; color: var(--text-faint);
  font-size: 12px; text-align: center; transition: .2s; background: var(--surface); padding: 8px;
}
.upload-add:hover { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 4%, transparent); }
.upload-add .plus { font-size: 28px; display: block; margin-bottom: 4px; color: var(--brand); }
.upload-tile { border-radius: 14px; }
.url-input { width: calc(100% - 44px); margin: 0 22px 18px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; padding: 11px 14px; font-size: 13px; outline: none; }
.url-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }

/* 结果网格高级化 */
.result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; width: 100%; padding: 22px; align-self: start; }
.result-item { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 2px 10px rgba(30,30,60,.04); }

@media (max-width: 1024px) {
  .wb-grid { grid-template-columns: 1fr; }
  .wb-params { position: static; }
  .wb-form { max-height: none; }
}

@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .wb { grid-template-columns: 1fr; }
  .wb-side { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); }
  /* 2026-10-02：这里原本还有一条 .nav-links{display:none}（窄屏藏掉顶栏链接）——
     链接已随顶栏「去栏化」整体删除，规则跟着清掉。 */
}
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } .search-box { display: none; } }


/* ===== 工具工作台 v3：最左工具导航 + 左操作面板 + 中对比画布 + 右历史（参考 koukoutu 工作台） ===== */
.tk-app { display: grid; grid-template-columns: 300px 1fr 264px; height: calc(100vh - 64px); overflow: hidden; }

/* 最左工具竖排导航（已按需求移除，保留 tk-rail-* 样式以备复用） */

/* 左操作面板 */
.tk-panel { border-right: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; overflow: hidden; }
.tk-panel-intro { padding: 14px 18px 4px; }
.tk-name { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.tk-desc { margin-top: 5px; font-size: 12px; color: var(--text-faint); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-scroll { flex: 1; overflow-y: auto; padding: 10px 18px 18px; min-height: 0; }
.tk-scroll::-webkit-scrollbar { width: 6px; }
.tk-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; margin: 12px 0 8px; }
.tk-label-tip { font-size: 11px; font-weight: 500; color: var(--text-faint); }
.tk-drop { border: 1.5px dashed var(--border-strong); border-radius: 16px; background: var(--bg-soft); transition: .2s; overflow: hidden; }
.tk-drop:hover, .tk-drop.hover { border-color: var(--brand); background: var(--grad-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 8%, transparent); }
.tk-drop-inner { text-align: center; padding: 26px 14px 18px; cursor: pointer; }
.tk-drop-ico { width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; background: var(--grad-soft); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); display: grid; place-items: center; font-size: 20px; color: var(--brand); }
.tk-drop-txt { margin-top: 10px; font-size: 13.5px; font-weight: 600; }
.tk-drop-url { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--text-faint); cursor: pointer; }
.tk-drop-url:hover { color: var(--brand); }
.tk-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.tk-pill { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 999px; padding: 7px 16px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); transition: .18s; }
.tk-pill:hover { border-color: var(--brand); }
.tk-pill.on { background: var(--grad-soft); border-color: color-mix(in srgb, var(--brand) 40%, transparent); color: var(--brand); }
.tk-model-line { margin-top: 10px; font-size: 11.5px; color: var(--text-faint); }
.tk-adv-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; margin: 16px 0 8px; padding: 10px 12px; background: var(--bg-soft); border-radius: 12px; cursor: pointer; }
.tk-adv-head:hover { background: var(--grad-soft); }
.tk-adv-arr { font-size: 11px; color: var(--text-faint); }
.tk-adv { padding-bottom: 6px; }
.tk-adv .wb-form { padding: 0; max-height: none; }
.tk-panel-foot { border-top: 1px solid var(--border); padding: 14px 18px 16px; background: var(--surface); }
.tk-cta { width: 100%; border: none; border-radius: 999px; padding: 14px; font-size: 15.5px; font-weight: 700; letter-spacing: 2px; color: var(--bg); background: var(--text); box-shadow: 0 10px 26px rgba(20,22,30,.18); transition: .25s; }
/* 2026-10-02 暗色适配：字色从写死 #fff 改 var(--bg) —— 浅色主题下不变（深底反白），
   黑夜主题下变成「浅底深字」自动反转，不会白上白。 */
.tk-cta:hover:not(:disabled) { transform: translateY(-2px); opacity: .92; box-shadow: 0 14px 34px rgba(20,22,30,.22); }
.tk-cta:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* 中间画布 */
.tk-stage { display: flex; flex-direction: column; min-width: 0; background: transparent; }
.tk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--surface); }
.tk-tabs { display: flex; gap: 6px; overflow-x: auto; min-width: 0; }
.tk-tabs::-webkit-scrollbar { height: 0; }
.tk-tab { flex-shrink: 0; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); transition: .18s; }
.tk-tab:hover { border-color: var(--brand); color: var(--brand); }
.tk-tab.on { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent); }
.tk-toolbar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.tk-hint { font-size: 11.5px; color: var(--text-faint); }
.tk-up-btn { border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); background: var(--grad-soft); color: var(--brand); border-radius: 999px; padding: 7px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: .18s; }
.tk-up-btn:hover { background: var(--grad); color: #fff; border-color: transparent; }
.tk-canvas { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px;
  background: radial-gradient(700px 360px at 60% -10%, color-mix(in srgb, var(--brand) 5%, transparent), transparent 60%), transparent; }
.tk-compare { display: flex; gap: 12px; align-items: stretch; justify-content: center; width: 100%; }
.tk-pane { flex: 1; max-width: 720px; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.tk-tag { padding: 4px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 12px; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.tk-tag.pink { background: linear-gradient(120deg, #f472b6, #ec4899); }
.tk-tag.green { background: linear-gradient(120deg, #34d399, #10b981); }
.tk-pane-img { width: 100%; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; background-image: conic-gradient(#eef0f5 0 25%, #fafafc 0 50%, #eef0f5 0 75%, #fafafc 0); background-size: 22px 22px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.tk-pane-img img { max-width: 100%; max-height: calc(100vh - 220px); width: auto; height: auto; object-fit: contain; display: block; }
.tk-thumbbar { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; justify-content: center; }
.tk-thumbbar img { width: 58px; height: 58px; object-fit: cover; border-radius: 10px; border: 2px solid transparent; cursor: pointer; opacity: .7; transition: .18s; }
.tk-thumbbar img:hover { opacity: 1; }
.tk-thumbbar img.on { border-color: var(--brand); opacity: 1; box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent); }

/* 底部状态栏 */
.tk-statusbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 18px; border-top: 1px solid var(--border); background: var(--surface); }
.tk-sb-group { display: flex; align-items: center; gap: 8px; }
.tk-sb-btn { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 999px; padding: 6px 15px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); transition: .18s; }
.tk-sb-btn:hover { border-color: var(--brand); color: var(--brand); }
.tk-sb-btn.on { background: var(--grad); color: #fff; border-color: transparent; }
.tk-sb-btn:disabled { opacity: .4; cursor: not-allowed; }
.tk-sb-dims { font-size: 12.5px; color: var(--text-dim); }
.tk-sb-dims b { color: var(--brand); font-weight: 700; }
.tk-zoom { font-size: 12px; color: var(--text-faint); min-width: 34px; text-align: right; }

/* 右历史记录 */
.tk-history { border-left: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; overflow: hidden; }
.tk-his-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.tk-his-title { font-size: 13.5px; font-weight: 800; }
.tk-his-tabs { display: flex; gap: 4px; margin-left: auto; }
.tk-his-tabs button { border: none; background: none; font-size: 12px; font-weight: 600; color: var(--text-faint); padding: 4px 8px; border-radius: 8px; }
.tk-his-tabs button.on { color: var(--brand); background: var(--grad-soft); }
.tk-his-clear { border: none; background: none; font-size: 12px; color: var(--text-faint); cursor: pointer; }
.tk-his-clear:hover { color: #e24b4a; }
.tk-his-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tk-his-list::-webkit-scrollbar { width: 6px; }
.tk-his-empty { text-align: center; color: var(--text-faint); font-size: 12.5px; padding: 40px 0; }
.tk-his-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; cursor: pointer; transition: .15s; border: 1px solid transparent; }
.tk-his-item:hover { background: var(--grad-soft); border-color: color-mix(in srgb, var(--brand) 20%, transparent); }
.tk-his-item img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: var(--bg-soft); }
.tk-his-info { min-width: 0; flex: 1; }
.tk-his-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-his-meta { margin-top: 3px; font-size: 11px; color: var(--text-faint); }
.tk-his-badge { display: inline-block; background: var(--grad-soft); color: var(--brand); border-radius: 6px; padding: 1px 7px; font-size: 10.5px; font-weight: 700; }
.tk-his-time { font-size: 10.5px; color: var(--text-faint); flex-shrink: 0; }

/* 开关（详细参数内） */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; cursor: pointer; }
.switch input { display: none; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong); transition: .2s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); transition: .2s; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.switch input:checked + i { background: var(--grad); }
.switch input:checked + i::after { left: 21px; }

/* 响应式 */
@media (max-width: 1280px) { .tk-app { grid-template-columns: 280px 1fr 232px; } }
@media (max-width: 1080px) { .tk-app { grid-template-columns: 280px 1fr; } .tk-history { display: none; } }
@media (max-width: 860px) { .tk-app { grid-template-columns: 1fr; height: auto; overflow: visible; } .tk-panel { border-right: none; border-bottom: 1px solid var(--border); } }

/* 历史记录折叠 */
.tk-his-fold { border: none; background: none; color: var(--text-faint); font-size: 15px; cursor: pointer; padding: 2px 4px; border-radius: 8px; line-height: 1; }
.tk-his-fold:hover { color: var(--brand); background: var(--grad-soft); }
.tk-app.his-folded { grid-template-columns: 300px 1fr 46px; }
.tk-history.folded { align-items: center; padding: 10px 0; }
.tk-history.folded .tk-his-head, .tk-history.folded .tk-his-list { display: none; }
.tk-his-expand { display: flex; flex-direction: column; align-items: center; gap: 8px; border: none; background: none; color: var(--text-faint); font-size: 12.5px; font-weight: 600; cursor: pointer; writing-mode: vertical-rl; letter-spacing: 3px; padding: 12px 6px; border-radius: 10px; }
.tk-his-expand:hover { color: var(--brand); background: var(--grad-soft); }
@media (max-width: 1280px) { .tk-app.his-folded { grid-template-columns: 280px 1fr 46px; } }


/* ===== 多主题系统（白天/黑夜/九尾灵狐/洁瀚星空/星空之境/清柠时光） ===== */

/* 黑夜模式 · 护眼暗色 */
html[data-theme="dark"] {
  --bg: #101319; --bg-soft: #171b24; --surface: #1a1f2a; --card: #1a1f2a;
  --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.17);
  --text: #e8eaf2; --text-dim: #a3a9bd; --text-faint: #6b7186;
  --brand: #7c7fff; --brand-2: #38bdf8;
  --grad: linear-gradient(120deg, #7c7fff, #a78bfa);
  --grad-soft: linear-gradient(120deg, rgba(124,127,255,.16), rgba(167,139,250,.12));
  --nav-glass: rgba(16,19,25,.72);
  --shadow: 0 16px 48px rgba(0,0,0,.45);
}
html[data-theme="dark"] body { background-image: radial-gradient(900px 480px at 85% -10%, rgba(124,127,255,.1), transparent 60%), radial-gradient(700px 420px at -10% 20%, rgba(56,189,248,.06), transparent 60%); }
html[data-theme="dark"] .tk-pane-img { background-image: conic-gradient(#20242e 0 25%, #181c25 0 50%, #20242e 0 75%, #181c25 0); }

/* 九尾灵狐 · 神秘灵动 */
html[data-theme="fox"] {
  --bg: #1b1114; --bg-soft: #261a1e; --surface: #2b1e22; --card: #2b1e22;
  --border: rgba(255,180,150,.1); --border-strong: rgba(255,180,150,.2);
  --text: #f7ebe4; --text-dim: #c9a89a; --text-faint: #93766a;
  --brand: #ff7e5f; --brand-2: #feb47b;
  --grad: linear-gradient(120deg, #ff7e5f, #ff9a76);
  --grad-soft: linear-gradient(120deg, rgba(255,126,95,.16), rgba(254,180,123,.12));
  --nav-glass: rgba(27,17,20,.72);
  --shadow: 0 16px 48px rgba(0,0,0,.45);
}
html[data-theme="fox"] body { background-image: radial-gradient(900px 480px at 85% -10%, rgba(255,126,95,.12), transparent 60%), radial-gradient(700px 420px at -10% 20%, rgba(254,180,123,.07), transparent 60%); }
html[data-theme="fox"] .tk-pane-img { background-image: conic-gradient(#332326 0 25%, #2a1d20 0 50%, #332326 0 75%, #2a1d20 0); }

/* 洁瀚星空 · 未来科幻 */
html[data-theme="space"] {
  --bg: #0b1026; --bg-soft: #0f1530; --surface: #131a3d; --card: #131a3d;
  --border: rgba(120,150,255,.12); --border-strong: rgba(120,150,255,.22);
  --text: #e6ebff; --text-dim: #9aa6d1; --text-faint: #616d9e;
  --brand: #4f7cff; --brand-2: #22d3ee;
  --grad: linear-gradient(120deg, #4f7cff, #22d3ee);
  --grad-soft: linear-gradient(120deg, rgba(79,124,255,.16), rgba(34,211,238,.1));
  --nav-glass: rgba(11,16,38,.72);
  --shadow: 0 16px 48px rgba(0,0,0,.5);
}
html[data-theme="space"] body { background-image: radial-gradient(900px 480px at 85% -10%, rgba(79,124,255,.14), transparent 60%), radial-gradient(700px 420px at -10% 20%, rgba(34,211,238,.08), transparent 60%); }
html[data-theme="space"] .tk-pane-img { background-image: conic-gradient(#1a2350 0 25%, #141b40 0 50%, #1a2350 0 75%, #141b40 0); }

/* 星空之境 · 明亮璀璨 */
html[data-theme="star"] {
  --bg: #faf7ff; --bg-soft: #f3ecff; --surface: #ffffff; --card: #ffffff;
  --border: rgba(90,50,160,.1); --border-strong: rgba(90,50,160,.18);
  --text: #241b3a; --text-dim: #5d5478; --text-faint: #9a92b5;
  --brand: #8b5cf6; --brand-2: #ec4899;
  --grad: linear-gradient(120deg, #8b5cf6, #ec4899);
  --grad-soft: linear-gradient(120deg, rgba(139,92,246,.12), rgba(236,72,153,.1));
  --nav-glass: rgba(250,247,255,.72);
}
html[data-theme="star"] body { background-image: radial-gradient(900px 480px at 85% -10%, rgba(139,92,246,.1), transparent 60%), radial-gradient(700px 420px at -10% 20%, rgba(236,72,153,.08), transparent 60%); }

/* 清柠时光 · 浅夏清凉 */
html[data-theme="lime"] {
  --bg: #f5faf1; --bg-soft: #eaf4e4; --surface: #ffffff; --card: #ffffff;
  --border: rgba(40,80,50,.1); --border-strong: rgba(40,80,50,.18);
  --text: #1c2b22; --text-dim: #56685c; --text-faint: #8fa096;
  --brand: #57a773; --brand-2: #8fd694;
  --grad: linear-gradient(120deg, #57a773, #8fd694);
  --grad-soft: linear-gradient(120deg, rgba(87,167,115,.12), rgba(143,214,148,.1));
  --nav-glass: rgba(245,250,241,.75);
}
html[data-theme="lime"] body { background-image: radial-gradient(900px 480px at 85% -10%, rgba(87,167,115,.1), transparent 60%), radial-gradient(700px 420px at -10% 20%, rgba(143,214,148,.08), transparent 60%); }

/* 白天模式 = 默认 :root，仅统一 body 光晕 */
html[data-theme="light"] body { background-image: radial-gradient(900px 480px at 85% -10%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 60%), radial-gradient(700px 420px at -10% 20%, rgba(14,165,233,.05), transparent 60%); }

/* ===== 顶栏：通知铃铛 + 主题切换下拉 ===== */
.site-bell, .site-theme { position: relative; }
.site-bell-btn, .site-theme-btn { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 999px; height: 36px; padding: 0 14px; font-size: 13px; font-weight: 600; color: var(--text-dim); transition: .18s; }
.site-bell-btn:hover, .site-theme-btn:hover { border-color: var(--brand); color: var(--brand); }
.site-bell-btn { font-size: 16px; padding: 0 11px; position: relative; }
/* 主题按钮的图标：与铃铛 / 签到 📅 / 图豆 💎 保持同一视觉语言（此前只有纯文字，显得单薄） */
.site-theme-btn .th-ico { font-size: 14px; line-height: 1; }
.site-dot { position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #f43f5e; border: 2px solid var(--surface); }
.site-caret { font-size: 10px; color: var(--text-faint); }
.site-pop { position: absolute; top: calc(100% + 10px); right: 0; width: 300px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 18px; box-shadow: var(--shadow); padding: 10px; z-index: 300; opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none; transition: .2s; }
.site-pop.open { opacity: 1; transform: none; pointer-events: auto; }
.site-theme-pop { width: 268px; }
.theme-item { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none; border-radius: 12px; padding: 10px 12px; cursor: pointer; transition: .15s; text-align: left; }
.theme-item:hover { background: var(--grad-soft); }
.theme-item.on { background: var(--grad-soft); }
.theme-item.on .theme-name { color: var(--brand); }
.theme-swatch { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--border-strong); }
.theme-name { font-size: 14px; font-weight: 700; color: var(--text); }
.theme-sub { margin-left: auto; font-size: 11.5px; color: var(--text-faint); }
.site-notice-pop { width: 320px; }
.notice-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 6px; border-bottom: 1px solid var(--border); }
.notice-head b { font-size: 14px; }
.notice-readall { border: none; background: none; font-size: 12px; color: var(--text-faint); cursor: pointer; }
.notice-readall:hover { color: var(--brand); }
.notice-item { padding: 11px 12px; border-radius: 12px; transition: .15s; cursor: default; }
.notice-item:hover { background: var(--grad-soft); }
.notice-item + .notice-item { margin-top: 2px; }
.notice-top { display: flex; align-items: center; gap: 8px; }
.notice-tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--grad-soft); color: var(--brand); }
.notice-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.notice-time { margin-left: auto; font-size: 10.5px; color: var(--text-faint); }
.notice-text { margin-top: 5px; font-size: 12.5px; color: var(--text-dim); line-height: 1.6; }
.notice-empty { text-align: center; color: var(--text-faint); font-size: 12.5px; padding: 26px 0; }


/* ===== 参考主题面板新增 4 套 ===== */

/* 浅色 · 极简素雅（主色 = 首页参考稿的蓝） */
html[data-theme="plain"] {
  /* v7：--bg 从 #f4f5f7 → #f1f2f5 → **#ebedf2**。参考站实测底是 rgb(235,237,242) = #ebedf2，
     就是取它的原值。规律是「冷灰底 + 纯白面板」两级层次：底太白，卡片只能靠 1px 边框撑，
     整页看着脏且平；底够深，白色面板才会"浮"起来（这是复刻参考站最关键的一条）。
     --bg-soft 同步下压一档，否则它跟 --bg 只差 3 个色阶，悬停/计数胶囊在灰底上直接看不见。 */
  --bg: #ebedf2; --bg-soft: #e4e7ee; --surface: #ffffff; --card: #ffffff;
  --border: rgba(20,22,30,.055); --border-strong: rgba(20,22,30,.12);
  --text: #20232b; --text-dim: #5a5e6a; --text-faint: #9298a4;
  /* 🔴 原来是灰调（#3c4250 / #6b7383）。首页改版按参考稿定为蓝，
     于是 logo 渐变、主按钮、分区标题竖条、chip 选中态、悬停描边、焦点环会**整套**跟着变，
     不需要再去各处硬编码颜色（这也是当初把它们抽成设计变量的意义）。 */
  --brand: #2563eb; --brand-2: #7c6cf0;
  --grad: linear-gradient(120deg, #2563eb, #7c6cf0);
  /* v9：选中/悬停底改中性（参考站全用 rgba(0,0,0,.04)）。品牌色只留给 logo 图形与链接 hover。 */
  --grad-soft: rgba(20, 22, 30, .05);
  /* 2026-10-02 顶栏「去栏化」：原来这里是一条 --nav-glass（白 70% + backdrop-filter 磨砂）。
     顶栏去掉导航链接后回到"与页面同色"，.nav 直接吃 var(--bg) —— 底色不透明，
     滚动时照样把正文盖住，磨砂那层就没有意义了。这个 token 连同 4 套主题里的定义一并删除。 */
}
/* v7：去掉蓝紫两团 radial 彩晕；2026-10-02 起网格背景统一写在 body 基础规则里，
   plain 不再需要 background-image: none 这类覆盖（各主题的 body 背景规则同日全删）。 */

/* 有风 · 森野清风（草地+晴空） */
html[data-theme="breeze"] {
  --bg: #f3f9f4; --bg-soft: #e7f3ea; --surface: #ffffff; --card: #ffffff;
  --border: rgba(30,90,55,.1); --border-strong: rgba(30,90,55,.19);
  --text: #17281e; --text-dim: #56705f; --text-faint: #8ba294;
  --brand: #2f9e63; --brand-2: #7cc9a3;
  --grad: linear-gradient(120deg, #2f9e63, #7cc9a3);
  --grad-soft: linear-gradient(120deg, rgba(47,158,99,.12), rgba(124,201,163,.1));
  --fx1: rgba(47,158,99,.08); --fx2: rgba(125,211,166,.06); --fx-speed: 21s;}

/* 同行 · 澄澈湖蓝（水波纹青蓝） */
html[data-theme="lake"] {
  --bg: #eef7fb; --bg-soft: #e2f0f8; --surface: #ffffff; --card: #ffffff;
  --border: rgba(20,80,110,.1); --border-strong: rgba(20,80,110,.19);
  --text: #142630; --text-dim: #4f6b7a; --text-faint: #88a3b1;
  --brand: #2f8fc4; --brand-2: #7fd0e8;
  --grad: linear-gradient(120deg, #2f8fc4, #7fd0e8);
  --grad-soft: linear-gradient(120deg, rgba(47,143,196,.12), rgba(127,208,232,.1));
  --fx1: rgba(47,143,196,.08); --fx2: rgba(127,208,232,.06); --fx-speed: 30s;}

/* 浅漪 · 天青微澜（淡雅天青） */
html[data-theme="ripple"] {
  --bg: #f2f7fc; --bg-soft: #e9f1f9; --surface: #ffffff; --card: #ffffff;
  --border: rgba(40,70,100,.09); --border-strong: rgba(40,70,100,.17);
  --text: #1a2733; --text-dim: #56697c; --text-faint: #93a4b5;
  --brand: #5b8fc9; --brand-2: #a7c9ec;
  --grad: linear-gradient(120deg, #5b8fc9, #a7c9ec);
  --grad-soft: linear-gradient(120deg, rgba(91,143,201,.12), rgba(167,201,236,.1));
  --fx1: rgba(91,143,201,.07); --fx2: rgba(167,201,236,.06); --fx-speed: 24s;}

/* 科技网格 · 极客蓝图（2026-10-02 新增；同日晚起网格背景全主题统一，此处只留配色 */
html[data-theme="techgrid"] {
  --bg: #eef2f8; --bg-soft: #e4ebf5; --surface: #ffffff; --card: #ffffff;
  --border: rgba(18,42,74,.1); --border-strong: rgba(18,42,74,.2);
  --text: #131c2b; --text-dim: #4d5c72; --text-faint: #8493a8;
  --brand: #2563eb; --brand-2: #22d3ee;
  --grad: linear-gradient(120deg, #2563eb, #22d3ee);
  --grad-soft: linear-gradient(120deg, rgba(37,99,235,.12), rgba(34,211,238,.1));
  --fx1: rgba(37,99,235,.07); --fx2: rgba(34,211,238,.06); --fx-speed: 18s;}

/* 白天 · 晴空白亮（2026-10-02 新增第 6 套）：比 plain 更亮一档的底，网格同全局 */
html[data-theme="day"] {
  --bg: #f7f9fc; --bg-soft: #edf1f8; --surface: #ffffff; --card: #ffffff;
  --border: rgba(25,35,60,.08); --border-strong: rgba(25,35,60,.17);
  --text: #182035; --text-dim: #5a6478; --text-faint: #96a0b5;
  --brand: #2563eb; --brand-2: #22d3ee;
  --grad: linear-gradient(120deg, #2563eb, #22d3ee);
  --grad-soft: linear-gradient(120deg, rgba(37,99,235,.1), rgba(34,211,238,.08));
  --fx1: rgba(37,99,235,.05); --fx2: rgba(34,211,238,.05); --fx-speed: 27s;}

/* 黑夜 · 暗夜星蓝（2026-10-02 新增第 7 套）：全站第一套暗色 —— 全部走 token，
   组件无需改动即自适应；网格线覆盖成浅色（暗底上深线不可见）。
   🔴 对比度红线不变：--text-faint 64748f 对 #0e1420 ≈ 3.5、--text-dim ≈ 7+，过 _sideprobe。 */
html[data-theme="night"] {
  --bg: #0e1420; --bg-soft: #131b2a; --surface: #161f30; --card: #161f30;
  --border: rgba(148,170,215,.14); --border-strong: rgba(148,170,215,.28);
  --text: #e6ecf7; --text-dim: #9fb0c9; --text-faint: #64748f;
  --brand: #4f83f7; --brand-2: #22d3ee;
  --grad: linear-gradient(120deg, #4f83f7, #22d3ee);
  --grad-soft: rgba(255, 255, 255, .06);
  --grid-line: rgba(148, 170, 215, .09);
  --shadow: 0 16px 48px rgba(0, 0, 0, .45);}

/* 黑夜专属动效：光斑换成星空 —— 平铺小星点 + 透明度呼吸（闪烁）+ 46s 缓慢漂移（视差感） */
html[data-theme="night"] body::after {
  background:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 34% 64%, rgba(200,225,255,.7), transparent 60%),
    radial-gradient(1.8px 1.8px at 58% 18%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 72% 52%, rgba(160,210,255,.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 34%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1.1px 1.1px at 46% 84%, rgba(190,220,255,.6), transparent 60%);
  background-size: 520px 420px;
  animation: kkTwinkle 5.5s ease-in-out infinite alternate, kkFx 46s ease-in-out infinite alternate-reverse;
}
@keyframes kkTwinkle { from { opacity: .5; } to { opacity: 1; } }


/* ============================================================
   ===== 全站视觉/交互精修层 v4（不动结构，仅覆盖式增强） =====
   ============================================================ */

/* ---------- 1. 全局基底 ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: .01em; }
::selection { background: color-mix(in srgb, var(--brand) 28%, transparent); color: var(--text); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-faint) 45%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--brand) 60%, transparent); background-clip: content-box; }
a, button { transition: color .22s, background-color .22s, border-color .22s, box-shadow .28s, transform .22s cubic-bezier(.2,.8,.2,1); }

/* ---------- 2. 顶栏导航 ---------- */
.nav { transition: box-shadow .35s, background-color .35s, border-color .35s; }
/* 2026-10-02 顶部优化：原来是「把下边线设成 transparent + 换成 0 10px 34px 的蓝紫大模糊投影」。
   polish.js 在 scrollY > 8 就挂 .scrolled —— 于是顶栏一滚动反而**丢掉**仅有的那条边界线，
   换成一团 legacy 紫影（_shottop.js 实测：滚动后 borderBottomColor = rgba(0,0,0,0)）。
   参考站 designkit.cn 的顶栏实测是 position:fixed + 页面同色 + **零边框零阴影**，
   它靠"内容从底下过"来成条，不需要投影。v9 一路在收装饰，这条最该收。
   改成：留边线、去掉大阴影；滚动后只把边线从 5.5% 加深到 10% 来承担分界。
   ⚠ 下面 dark/fox/space 三条保留各自的深色阴影 —— 那 3 套主题已不在 THEMES 里
     （data-theme 永远不会命中），属既有的无害死代码，按仓库惯例不顺手删。 */
.nav.scrolled { border-bottom-color: color-mix(in srgb, var(--text) 10%, transparent); }
html[data-theme="dark"] .nav.scrolled,
html[data-theme="fox"] .nav.scrolled,
html[data-theme="space"] .nav.scrolled { box-shadow: 0 12px 36px rgba(0,0,0,.5); }
.logo { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.logo:hover { transform: translateY(-1px); }
.logo-mark { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.06); box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 45%, transparent); }
/* 2026-10-02 顶栏「去栏化」：.nav-links 那套（下划线滑入 + 当前页高亮）随链接一起删 ——
   三条链接现在住在头像面板里，那儿的当前页高亮是 .su-item.on（见文件末尾头像面板一节），
   滑入下划线那种"横向导航条"的语汇在竖排列表里没有位置。 */
.search-box { transition: border-color .25s, box-shadow .25s; }
.search-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); }
.credits-pill { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.credits-pill:hover { transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 22%, transparent); }
.avatar { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--brand) 35%, transparent); }
.avatar:hover { transform: scale(1.08) rotate(3deg); }
.site-bell-btn:hover, .site-theme-btn:hover { transform: translateY(-1px); }
.site-pop { backdrop-filter: blur(14px) saturate(160%); }

/* ---------- 3. 按钮质感 ---------- */
.btn { position: relative; overflow: hidden; }
.btn-primary { background-image: var(--grad); background-size: 180% 100%; }
.btn-primary:hover { background-position: 80% 0; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); transition: left .6s cubic-bezier(.2,.8,.2,1); pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn:active { transform: scale(.975); }
.btn-ghost:active { transform: scale(.975); }

/* 2026-10-02：原来这里的「4. 首页 hero」.hero-card 系列已随首页「推荐工具」区块删除。
   ⚠ 页面顶部真正的 hero 是 .hero-band / .hero-inner / .hero-head（见文件上方），不在这一段。 */

/* ---------- 5. 区块标题 ---------- */
.section-head h2 { letter-spacing: 0; }
.section-head h2::before { box-shadow: none; }
.count-pill { transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, color .25s; }
.count-pill:hover { transform: translateY(-1px); border-color: var(--brand); color: var(--brand); }

/* ---------- 6. 工具卡片 ---------- */
.tool-card { transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s, border-color .3s; }
.tool-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity .38s; z-index: 1;
  background: radial-gradient(260px 180px at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%);
}
.tool-card:hover::before { opacity: 1; }
/* v9：hover 从"上浮 6px + 品牌色描边 + 大投影 + 鼠标跟随彩晕"收敛到参考站的分寸
   （参考站 hover = 边框略深 + 极浅投影，不上浮）。整套大动效是"廉价感"的另一来源。 */
.tool-card::before { display: none; }
.tool-card:hover { transform: none; box-shadow: var(--shadow-card); border-color: var(--border-strong); }
.tool-card:active { transform: translateY(-3px) scale(.994); }
.tool-cover { transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .5s; opacity: 0; }
.tool-cover.loaded { opacity: 1; }
.tool-card:hover .tool-cover { transform: scale(1.07); }
.tool-body { position: relative; z-index: 2; }
.tool-name { transition: color .25s; }
.tool-card:hover .tool-name { color: var(--brand); }
.tool-badge, .free-tag { z-index: 3; box-shadow: 0 6px 16px rgba(0,0,0,.14); }
.tool-badge { background-image: var(--grad); }
.fav-btn { transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s; }
.fav-btn:hover { transform: scale(1.25) rotate(6deg); }
.fav-btn.on { animation: favPop .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes favPop { 0% { transform: scale(1); } 45% { transform: scale(1.45) rotate(-10deg); } 100% { transform: scale(1); } }

/* ---------- 7. 左侧锚点导航 ----------
   v7：去掉左侧那根品牌色竖条（下面这条 display:none 对 v5 的 .active::before 同样生效，
   因为 v5 只覆盖了 content/position/尺寸，没覆盖 display）+ 去掉 hover 位移。
   参考站的选中态就是「一块浅灰圆角块」，没有竖条也不平移；竖条 + 位移叠在一起侧栏一直在抖。 */
.side-nav { backdrop-filter: blur(8px); }
.side-anchor { position: relative; transition: background-color .2s, color .2s; }
.side-anchor::before { display: none; }
.side-anchor:hover { color: var(--text); }
.sa-icon { transition: transform .28s cubic-bezier(.34,1.56,.64,1); }
.side-anchor:hover .sa-icon { transform: scale(1.1); }

/* ---------- 8. 滚动入场 / 数字滚动 ---------- */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .62s cubic-bezier(.2,.8,.2,1), transform .62s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ---------- 9. 充值套餐 ---------- */
.plan-card { position: relative; overflow: hidden; transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s, border-color .3s; }
.plan-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .38s;
  background: radial-gradient(280px 200px at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--brand) 13%, transparent), transparent 70%);
}
.plan-card:hover::after { opacity: 1; }
.plan-card:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(30,30,60,.14); border-color: color-mix(in srgb, var(--brand) 34%, transparent); }
.plan-card.best { border-color: color-mix(in srgb, var(--brand) 42%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 10%, transparent), 0 18px 40px rgba(30,30,60,.1); }

/* ---------- 10. 工作台（工具操作端） ---------- */
.tk-panel, .tk-history { box-shadow: 0 1px 2px rgba(17,17,30,.03); }
.tk-drop { position: relative; }
.tk-drop.hover { animation: dropPulse 1.1s ease-in-out infinite; }
@keyframes dropPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 22%, transparent); }
  50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--brand) 0%, transparent); }
}
.tk-drop-inner:hover .tk-drop-ico { transform: translateY(-3px) scale(1.06); }
.tk-drop-ico { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.tk-pill, .tk-tab, .tk-sb-btn { transition: transform .22s cubic-bezier(.2,.8,.2,1), background-color .22s, color .22s, border-color .22s, box-shadow .25s; }
.tk-pill:hover, .tk-tab:hover, .tk-sb-btn:hover { transform: translateY(-1px); }
.tk-cta { position: relative; overflow: hidden; }
.tk-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -55%; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); transition: left .7s cubic-bezier(.2,.8,.2,1); pointer-events: none;
}
.tk-cta:hover:not(:disabled)::after { left: 135%; }
.tk-cta:active:not(:disabled) { transform: scale(.985); }
.tk-pane-img { transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s; }
.tk-pane-img:hover { transform: translateY(-3px); box-shadow: 0 24px 54px rgba(30,30,60,.14); }
.tk-pane-img img { animation: imgIn .55s cubic-bezier(.2,.8,.2,1); }
@keyframes imgIn { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
.tk-thumbbar img:hover { transform: translateY(-2px) scale(1.05); }
.tk-thumbbar img { transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s, border-color .25s; }
.tk-his-item { transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .2s, border-color .2s; }
.tk-his-item:hover { transform: translateX(3px); }
.tk-his-item img { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.tk-his-item:hover img { transform: scale(1.06); }
.progress-bar { position: relative; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.06); }
.progress-bar i { position: relative; box-shadow: 0 0 12px color-mix(in srgb, var(--brand) 60%, transparent); }
.progress-bar i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  animation: barSheen 1.2s linear infinite;
}
@keyframes barSheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.upload-tile { transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s; }
.upload-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(30,30,60,.12); }
.upload-tile .rm { opacity: 0; transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1); }
.upload-tile:hover .rm { opacity: 1; }
.upload-tile .rm:hover { transform: scale(1.12); }
.tk-name { letter-spacing: -.4px; }
.tk-compare { animation: imgIn .5s cubic-bezier(.2,.8,.2,1); }

/* ---------- 11. 提示条 ---------- */
.toast { display: flex; align-items: center; gap: 9px; backdrop-filter: blur(14px) saturate(160%); }
.toast::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 12px; flex-shrink: 0; }
.toast.warn::before { content: "!"; background: linear-gradient(120deg, #f59e0b, #ef4444); }
.toast { transform: translateX(-50%) translateY(-18px) scale(.96); }
.toast.show { transform: translateX(-50%) translateY(0) scale(1); }

/* ---------- 12. 空状态（仅空集合显示图标，加载中不显示） ---------- */
.empty { position: relative; }
.grid > .empty::before, .tk-his-empty::before, .notice-empty::before { content: "🗂️"; display: block; font-size: 40px; opacity: .45; margin-bottom: 10px; }

/* ---------- 13. 页脚 ---------- */
.footer { position: relative; }
.footer h4 { position: relative; padding-left: 12px; }
.footer h4::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 3px; background: var(--grad); }
.footer a { transition: color .2s, transform .22s cubic-bezier(.2,.8,.2,1); }
.footer a:hover { transform: translateX(3px); }

/* ===== v5 侧栏精修（静态高级版：去渐变、细线制、低饱和） ===== */

/* ---- 首页左侧锚点导航 ---- */
.side-nav { width: 236px; padding: 22px 14px 26px; background: var(--side-bg); color: var(--side-dim); }
.side-nav::before {
  content: "工具目录"; display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  color: var(--side-faint); padding: 0 10px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--side-line);
}
/* v8：基础色**必须**在这里重申一次。第 417 行那条老规则给的是 color: var(--text-dim)，
   而 --text-dim 是"浅底用的深灰"，深色侧栏上就是暗底暗字（实测对比 2.57，肉眼几乎看不清）。
   这条规则里如果只写 padding/圆角而不写 color，老色值会一路继承下来 —— 漏过一次。 */
.side-anchor { position: relative; padding: 9px 10px; border-radius: 10px; gap: 10px; color: var(--side-dim); transition: background-color .16s, color .16s; }
/* 深底下把 emoji 的灰度滤镜调轻：浅底时要"压住"彩色，深底上反而要让它亮出来 */
.side-anchor .sa-icon { font-size: 14px; line-height: 1; opacity: .92; filter: grayscale(.15); transition: opacity .16s, filter .16s; }
/* v11 线条图标（sideicons.js）：SVG 描边走 currentColor —— 颜色跟文字走，
   悬停/选中自动换色，灰度滤镜对它无效也不需要；emoji 回退仍走上面的滤镜。 */
.sa-icon svg { display: block; }
.side-anchor:hover { background: var(--side-hover); color: var(--side-text); }
/* v7：选中态就是一块浅色圆角块（与参考站一致）。原来这里还有一根 2px 品牌色竖条，
   已在 v4 段用 .side-anchor::before{display:none} 关掉（那条对 .active::before 同样生效）。
   v8：深底下换成"浅白块"+ 最亮一档白字。
   v10：回浅底，胶囊用 --side-active（底色加深 6%，即参考站的 #e8eaf0 那一档），字回深色。 */
.side-anchor.active { background: var(--side-active); color: var(--side-text); font-weight: 650; }
.side-anchor.active .sa-icon { opacity: 1; filter: none; }
/* 计数从「带边框的小方块」改成「浅色药丸」：边框在侧栏里会显出一排小格子，很碎 */
.sa-count { background: var(--side-count); border: none; color: var(--side-faint); font-size: 10.5px; padding: 2px 8px; border-radius: var(--r-pill); }
.side-anchor.active .sa-count { background: var(--side-count); color: var(--side-text); }

/* ---- 首页侧栏「窄条折叠」（2026-10-01）：236px ↔ 64px，窄条态只留图标 ----
   🔴 三条硬约束，改之前先读：
     ① 状态类 .rail 挂在 <html> 上、样式全部限定在 .side-nav--home 之内 ——
        收藏 / 分类 / 账号三页的 45 工具目录**共用 .side-nav**，样式一旦不限定作用域，
        那三页的目录会被一起压成 64px（目录型侧栏见下方「目录型侧栏」段）。
     ② .rail 由 site.js 在 <head> 里**首屏同步**套上（和 data-theme 同一套路）。若等
        app.js（body 末尾）来套，主内容会先按 236px 侧栏排好、再跳宽 —— 肉眼可见闪一下。
     ③ 按钮 #snRail 与列表 #snList 必须是两个兄弟节点：app.js 的 renderSideNav() 用
        innerHTML 整块重画列表，按钮放进去会被一起抹掉。 */
.side-nav--home {
  display: flex; flex-direction: column;
  transition: width .22s cubic-bezier(.2,.8,.2,1), padding .22s cubic-bezier(.2,.8,.2,1);
}
/* 滚动收进列表内部，让「工具目录」标题与折叠按钮钉住 ——
   否则列表长到要滚动时（窗口很矮 / 以后分类变多），按钮会被一起滚出视野，收成窄条后就再也点不回去了。
   滚动条宽 6px 与原 .side-nav 一致，一进一出内宽不变。 */
.side-nav--home .sn-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.side-nav--home .sn-scroll::-webkit-scrollbar { width: 6px; }
.sn-rail {
  /* top 对齐 ::before「工具目录」那行文字的中心（aside 上内边距 22px + 11px 字行的半高） */
  position: absolute; top: 16px; right: 12px; width: 26px; height: 26px;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--side-line); border-radius: 8px;
  background: var(--side-hover); color: var(--side-dim);
  font-size: 13px; line-height: 1; transition: color .16s, border-color .16s, transform .22s;
}
.sn-rail:hover { color: var(--side-text); border-color: color-mix(in srgb, var(--text) 28%, transparent); }
.sn-rail:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* 方向箭头用纯 CSS 细线画：不依赖字体里 ‹ › 的字形宽窄与字重，跟 v5/v6 的细线语言一致。
   展开态指左（←收起来），窄条态指右（→展开）。 */
.sn-rail-ico {
  display: block; width: 7px; height: 7px; margin-left: 3px;
  border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
}

/* 窄条态：宽度、内边距、按钮居中一起换；标题与标签让位给图标 */
html.rail .side-nav--home { width: 64px; padding: 48px 12px 20px; }
html.rail .side-nav--home::before { display: none; }
html.rail .side-nav--home .sn-rail { top: 12px; right: auto; left: 50%; transform: translateX(-50%); }
html.rail .side-nav--home .sn-rail-ico { margin-left: -2px; transform: rotate(-135deg); }
html.rail .side-nav--home .side-anchor { justify-content: center; padding: 9px 0; }
html.rail .side-nav--home .sa-label,
html.rail .side-nav--home .sa-count { display: none; }
html.rail .side-nav--home .side-anchor .sa-icon { font-size: 16px; }
html.rail .side-nav--home .side-anchor .sa-icon svg { width: 16px; height: 16px; }
html.rail .side-nav--home .side-anchor.active::before { left: -12px; }

/* ---- 工作台左操作面板 ---- */
.tk-panel { background: var(--surface); }
.tk-panel-intro { padding: 20px 18px 14px; border-bottom: 1px solid var(--border); }
.tk-name { font-size: 17px; font-weight: 750; letter-spacing: -.2px; }
.tk-desc { margin-top: 6px; font-size: 12.5px; line-height: 1.65; color: var(--text-faint); -webkit-line-clamp: 3; }
.tk-scroll { padding: 6px 18px 18px; }
.tk-label { margin: 16px 0 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--text-faint); }
.tk-label-tip { font-size: 11px; font-weight: 500; letter-spacing: 0; opacity: .85; }

.tk-drop { border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--bg); }
.tk-drop:hover, .tk-drop.hover { border-color: var(--brand); background: var(--bg-soft); box-shadow: none; animation: none; }
.tk-drop-inner { padding: 22px 14px 16px; }
.tk-drop-ico {
  width: 38px; height: 38px; margin: 0 auto; border-radius: 10px; background: var(--bg-soft);
  border: 1px solid var(--border); color: var(--text-dim); display: grid; place-items: center; transition: none;
}
.tk-drop-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tk-drop-inner:hover .tk-drop-ico { transform: none; }
.tk-drop-txt { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.tk-drop-url { margin-top: 6px; font-size: 11.5px; color: var(--text-faint); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.tk-drop-url:hover { color: var(--text); }

.tk-pills { gap: 6px; }
.tk-pill {
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px;
  padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--text-dim); box-shadow: none;
}
.tk-pill:hover { transform: none; background: var(--bg-soft); border-color: var(--border-strong); color: var(--text); }
.tk-pill.on, .tk-pill.on:hover { background: var(--text); border-color: var(--text); color: var(--surface); font-weight: 650; }
.tk-model-line { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 11.5px; color: var(--text-faint); }
.tk-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }

.tk-adv-head {
  margin: 18px 0 0; padding: 14px 0 10px; background: none; border-radius: 0;
  border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 650; color: var(--text-dim);
}
.tk-adv-head:hover { background: none; color: var(--text); }
.tk-adv-arr { font-size: 10px; }
.tk-adv { padding-bottom: 0; }
.tk-adv .form-item { margin-bottom: 14px; }
.tk-adv .form-item label { display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.tk-adv .form-item input[type="text"], .tk-adv .form-item textarea, .tk-adv .form-item select {
  background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; font-size: 13px;
}
.tk-adv .form-item input:focus, .tk-adv .form-item textarea:focus, .tk-adv .form-item select:focus {
  background: var(--surface); border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); outline: none;
}
.switch i { background: var(--border-strong); }
.switch input:checked + i { background: var(--brand); }

.tk-panel-foot { padding: 14px 18px 18px; background: var(--surface); }
.wb-cost { margin-bottom: 11px; font-size: 12.5px; color: var(--text-faint); }
.wb-cost b { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.tk-cta {
  border-radius: 10px; padding: 13px; font-size: 14.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--brand); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 24%, transparent);
  transition: background-color .18s, box-shadow .18s, transform .18s;
}
.tk-cta:hover:not(:disabled) { transform: translateY(-1px); background: color-mix(in srgb, var(--brand) 86%, #000); box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 30%, transparent); }
.tk-cta:active:not(:disabled) { transform: translateY(0); }
.tk-cta::after { display: none; }
.wb-hint { margin-top: 10px; font-size: 11.5px; color: var(--text-faint); }

/* ---- 工作台工具栏 / 状态栏 ---- */
.tk-toolbar { padding: 12px 18px; background: var(--surface); }
.tk-tab { border-color: transparent; background: transparent; border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.tk-tab:hover { transform: none; background: var(--bg-soft); border-color: transparent; color: var(--text); }
.tk-tab.on, .tk-tab.on:hover { background: var(--text); border-color: var(--text); color: var(--surface); box-shadow: none; font-weight: 650; }
.tk-up-btn { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: 8px; padding: 7px 14px; font-weight: 650; }
.tk-up-btn:hover { background: var(--bg-soft); border-color: var(--border-strong); color: var(--text); }
.tk-statusbar { padding: 10px 18px; background: var(--surface); }
.tk-sb-btn { border-color: transparent; background: transparent; border-radius: 8px; padding: 6px 12px; color: var(--text-dim); }
.tk-sb-btn:hover { transform: none; background: var(--bg-soft); border-color: transparent; color: var(--text); }
.tk-sb-btn.on, .tk-sb-btn.on:hover { background: var(--text); border-color: var(--text); color: var(--surface); font-weight: 650; }
.tk-sb-btn.tk-dl { border-color: var(--border-strong); background: var(--surface); color: var(--text); font-weight: 650; }
.tk-sb-btn.tk-dl:not(:disabled):hover { background: var(--text); border-color: var(--text); color: var(--surface); }
/* 结果图「继续处理」：比下载轻一档的次按钮 */
.tk-sb-btn.tk-cont { border-color: transparent; background: var(--grad-soft); color: var(--brand); font-weight: 650; }
.tk-sb-btn.tk-cont:not(:disabled):hover { background: var(--brand); color: #fff; border-color: transparent; }

/* ---- 结果图 → 送其他工具继续处理（二次/三次处理）弹窗 ---- */
.tk-pick-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; z-index: 998; }
.tk-pick-mask[hidden] { display: none; }
.tk-pick-modal { width: min(92vw, 560px); max-height: 82vh; background: var(--card); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); display: flex; flex-direction: column; }
.tk-pick-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.tk-pick-head b { font-size: 15px; }
.tk-pick-body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.tk-pick-preview { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: var(--bg-soft); }
.tk-pick-preview img { width: 56px; height: 56px; object-fit: cover; border-radius: 9px; background: var(--surface); flex: none; }
.tk-pick-preview-tip { font-size: 12px; color: var(--text-faint); line-height: 1.5; }
.tk-pick-search { width: 100%; box-sizing: border-box; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 9px 12px; font-size: 13px; color: var(--text); outline: none; }
.tk-pick-search:focus { border-color: var(--brand); }
.tk-pick-list { flex: 1; overflow-y: auto; min-height: 120px; max-height: 46vh; display: flex; flex-direction: column; gap: 2px; }
.tk-pick-list::-webkit-scrollbar { width: 6px; }
.tk-pick-cat { padding: 10px 4px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-faint); }
.tk-pick-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: none; border-radius: 9px; padding: 9px 10px; font-size: 13px; color: var(--text); cursor: pointer; transition: background-color .16s; }
.tk-pick-item:hover { background: var(--bg-soft); }
.tk-pick-item.cur { background: var(--grad-soft); }
.tk-pick-ico { flex: none; font-size: 14px; }
.tk-pick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-pick-cur { flex: none; font-size: 10.5px; color: var(--brand); font-weight: 700; }
.tk-pick-empty { padding: 26px 0; text-align: center; font-size: 12.5px; color: var(--text-faint); }
.tk-sb-dims { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.tk-sb-dims b { color: var(--text-dim); font-weight: 650; }

/* ---- 画布（2026-10-02 晚改透明：操作区透出 body::before 的全站动态网格） ---- */
.tk-stage { background: transparent; }
.tk-canvas { background: transparent; }
.tk-tag { padding: 4px 14px; font-size: 11.5px; font-weight: 650; letter-spacing: .04em; box-shadow: none; margin-bottom: 10px; }
.tk-tag.pink { background: color-mix(in srgb, #ec4899 10%, transparent); color: #ec4899; border: 1px solid color-mix(in srgb, #ec4899 24%, transparent); }
.tk-tag.green { background: color-mix(in srgb, #10b981 10%, transparent); color: #10b981; border: 1px solid color-mix(in srgb, #10b981 24%, transparent); }
.tk-thumbbar { gap: 8px; margin-top: 16px; }
.tk-thumbbar img { border: 1px solid var(--border); border-radius: 8px; opacity: .75; }
.tk-thumbbar img.on { border-color: var(--text); box-shadow: none; opacity: 1; }
.wb-empty { padding: 40px; }
.wb-empty-ico { width: 56px; height: 56px; margin: 0 auto; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; filter: none; }
.wb-empty-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--text-faint); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wb-empty-title { margin-top: 16px; font-size: 15px; font-weight: 650; color: var(--text-dim); }
.wb-empty-tip { margin-top: 8px; font-size: 12.5px; color: var(--text-faint); }
.progress-bar { height: 4px; border-radius: 999px; box-shadow: none; }
.progress-bar i { background: var(--brand); box-shadow: none; }
.progress-bar i::after { display: none; }

/* ---- 右历史记录 ---- */
.tk-history { background: var(--surface); }
.tk-his-head { padding: 14px 14px 12px; gap: 10px; }
.tk-his-title { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--text-dim); }
.tk-his-tabs { gap: 2px; background: var(--bg-soft); padding: 2px; border-radius: 8px; }
.tk-his-tabs button { border-radius: 6px; padding: 4px 10px; font-size: 11.5px; color: var(--text-faint); }
.tk-his-tabs button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.tk-his-clear { font-size: 11.5px; }
.tk-his-list { padding: 8px; gap: 2px; }
.tk-his-item { padding: 8px; border-radius: 8px; border: none; }
.tk-his-item:hover { background: var(--bg-soft); border: none; transform: none; }
.tk-his-item img { width: 44px; height: 44px; border-radius: 8px; }
.tk-his-item:hover img { transform: none; }
.tk-his-name { font-size: 12.5px; font-weight: 600; }
.tk-his-meta { margin-top: 4px; font-size: 11px; }
.tk-his-badge { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 5px; color: var(--text-faint); font-size: 10px; font-weight: 600; padding: 1px 6px; }
.tk-his-time { font-size: 10.5px; }
.tk-his-fold:hover, .tk-his-expand:hover { color: var(--text); background: var(--bg-soft); }

/* ---- 历史记录：一条 = 一次任务，点击折叠展开本次全部出图 ---- */
.tk-his-n { color: var(--text-faint); }
.tk-his-task .tk-his-caret { flex-shrink: 0; font-size: 9px; color: var(--text-faint); transition: color .16s; }
.tk-his-task.open { background: var(--bg-soft); }
.tk-his-task.open .tk-his-caret { color: var(--brand); }
.tk-his-detail { display: flex; flex-direction: column; gap: 8px; padding: 2px 8px 10px; }
.tk-his-grp + .tk-his-grp { border-top: 1px dashed var(--border); padding-top: 8px; }
.tk-his-grp-t { margin-bottom: 5px; font-size: 10.5px; font-weight: 700; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-his-grp-g { display: flex; flex-wrap: wrap; gap: 5px; }
.tk-his-mini { width: 46px; height: 46px; object-fit: cover; border-radius: 7px; cursor: pointer; background: var(--bg-soft); flex: none; transition: transform .16s, box-shadow .16s; }
.tk-his-mini:hover { transform: scale(1.06); box-shadow: 0 3px 10px rgba(0, 0, 0, .16); }
.tk-his-mini.failed { display: grid; place-items: center; font-size: 10px; color: #e5484d; border: 1px dashed rgba(229, 72, 77, .45); background: rgba(229, 72, 77, .07); cursor: default; }
.tk-his-mini.failed:hover { transform: none; box-shadow: none; }

/* ---- 失败任务记录：任务在离开期间失败时也要留痕，否则右栏会「凭空变空」 ---- */
.tk-his-task.is-failed .tk-his-name { color: var(--text-faint); }
.tk-his-task.is-failed .tk-his-badge { border-color: transparent; background: rgba(229, 72, 77, .12); color: #e5484d; }
.tk-his-thumb-fail {
  width: 44px; height: 44px; flex: none; border-radius: 8px;
  display: grid; place-items: center; font-size: 15px; font-weight: 700;
  color: #e5484d; border: 1px dashed rgba(229, 72, 77, .45); background: rgba(229, 72, 77, .07);
}
.tk-his-err {
  font-size: 11px; line-height: 1.5; color: #e5484d;
  background: rgba(229, 72, 77, .07); border-radius: 7px; padding: 6px 8px;
  word-break: break-word;
}

/* ---- 目录型侧栏（收藏/分类/充值页共用的 45 工具目录） ---- */
/* v8：本段在文件末尾，同优先级下会盖掉上面那版深色定义 —— 这里必须同步改成 --side-*
   （踩过的坑：只改前半段，后半段浅色值照样胜出，侧栏看着还是白的）。 */
.side-group { margin-bottom: 2px; }
.side-group-head {
  padding: 9px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; color: var(--side-faint);
}
.side-group-head:hover { background: var(--side-hover); color: var(--side-text); }
.side-group-head .sg-ico { filter: grayscale(.15); opacity: .85; margin-right: 7px; font-size: 12px; }
/* v11：目录页分组头的线条 SVG —— 行内对齐（跟文字基线走），颜色同样跟 currentColor */
.sg-ico svg { display: inline-block; vertical-align: -2.5px; }
.side-group-head .arr { font-size: 9px; color: var(--side-faint); }
.side-tools { padding: 2px 0 8px; }
.side-tool { padding: 7px 10px 7px 22px; margin: 1px 0; border-radius: 8px; font-size: 12.5px; color: var(--side-dim); transition: background-color .15s, color .15s; }
.side-tool:hover { background: var(--side-hover); color: var(--side-text); }
/* v10 浅底：选中态深字 + 浅灰胶囊（--side-active），左侧小圆点用 --side-text。
   （v8 深底版的 color:#fff 已随深色一起删。） */
.side-tool.active { position: relative; background: var(--side-active); color: var(--side-text); font-weight: 650; }
.side-tool.active::before {
  content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--side-text);
}

/* ===== v6 侧栏改版：分组卡片语言（大留白 + 卡片分组 + 单一深色主按钮） ===== */
.tk-panel { background: var(--bg-soft); border-right: 1px solid var(--border); }
.tk-panel-intro { padding: 20px 20px 14px; border-bottom: none; }
.tk-name { font-size: 16.5px; font-weight: 700; letter-spacing: -.2px; }
.tk-desc { margin-top: 5px; font-size: 12.5px; line-height: 1.6; color: var(--text-faint); }

.tk-scroll { padding: 2px 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.tk-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.tk-card-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 11px;
  font-size: 12px; font-weight: 650; letter-spacing: .02em; color: var(--text-faint);
}
.tk-card-note { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--text-faint); opacity: .85; }
.tk-card-toggle { cursor: pointer; margin-bottom: 0; transition: color .16s; }
.tk-card-toggle:hover { color: var(--text); }

/* 输入区：卡片内的浅底投放区（无边框盒子，最安静的做法） */
.tk-drop { border: none; background: var(--bg-soft); border-radius: 10px; box-shadow: inset 0 0 0 1px transparent; transition: background-color .18s, box-shadow .18s; }
.tk-drop:hover, .tk-drop.hover {
  background: color-mix(in srgb, var(--text) 4%, var(--bg-soft)); border: none; animation: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 38%, transparent);
}
.tk-drop-inner { padding: 22px 12px 18px; }
.tk-drop-ico { width: auto; height: auto; background: none; border: none; border-radius: 0; color: var(--text-dim); }
.tk-drop-ico svg { width: 19px; height: 19px; }
.tk-drop-txt { margin-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.tk-drop-url { margin-top: 5px; font-size: 11.5px; color: var(--text-faint); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.tk-drop-url:hover { color: var(--text); }
.upload-grid { gap: 10px; }

/* 模型版本 */
.tk-pills { gap: 6px; }
.tk-pill { border: 1px solid var(--border); background: var(--surface); border-radius: 9px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--text-dim); box-shadow: none; }
.tk-pill:hover { transform: none; background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.tk-pill.on, .tk-pill.on:hover { background: var(--text); border-color: var(--text); color: var(--surface); font-weight: 650; }
.tk-model-line { margin-top: 11px; font-size: 11.5px; color: var(--text-faint); }
.tk-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }

/* 详细参数 */
.tk-adv-arr { font-size: 10px; color: var(--text-faint); }
.tk-adv { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); padding-bottom: 0; }
.tk-adv .form-item { margin-bottom: 13px; }
.tk-adv .form-item label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.tk-adv .form-item input[type="text"], .tk-adv .form-item textarea, .tk-adv .form-item select {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; font-size: 12.5px;
}
.tk-adv .form-item input:focus, .tk-adv .form-item textarea:focus, .tk-adv .form-item select:focus {
  background: var(--surface); border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); outline: none;
}

/* 底部动作区：单一深色主按钮 */
.tk-panel-foot { background: var(--bg-soft); border-top: none; padding: 8px 14px 16px; }
.wb-cost { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 10px; font-size: 12px; color: var(--text-faint); }
.wb-cost b { font-size: 13px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.tk-cta {
  border-radius: 999px; padding: 13px; font-size: 14px; font-weight: 700; letter-spacing: .01em;
  background: var(--text); color: var(--bg); box-shadow: none; transition: background-color .18s, opacity .18s;
}
.tk-cta:hover:not(:disabled) { transform: none; box-shadow: none; background: color-mix(in srgb, var(--text) 86%, var(--bg)); }
.tk-cta:active:not(:disabled) { transform: none; }
.tk-cta::after { display: none; }
.tk-cta:disabled { background: var(--text); }
.wb-hint { margin-top: 9px; font-size: 11px; color: var(--text-faint); text-align: center; }

/* 历史记录栏：同一套卡片语言 */
.tk-history { background: var(--bg-soft); border-left: 1px solid var(--border); }
.tk-his-head { padding: 16px 16px 12px; border-bottom: none; }
.tk-his-tabs { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 2px; gap: 2px; }
.tk-his-tabs button { border-radius: 6px; padding: 3px 9px; font-size: 11.5px; color: var(--text-faint); }
.tk-his-tabs button.on { background: var(--text); color: var(--bg); box-shadow: none; }
.tk-his-list { padding: 4px 12px 12px; gap: 8px; }
.tk-his-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 9px; }
.tk-his-item:hover { background: var(--surface); border-color: var(--border-strong); transform: none; }
.tk-his-item img { width: 42px; height: 42px; border-radius: 9px; }
.tk-his-item:hover img { transform: none; }
.tk-his-empty { padding: 44px 12px; font-size: 12px; line-height: 1.7; }

/* 画布与工具栏对齐同一底色体系（2026-10-02 晚改透明：透出全站动态网格） */
.tk-stage { background: transparent; }
.tk-canvas { background: transparent; }

/* ---- v6 细节收口 ---- */
.tk-card .upload-grid { padding: 12px; }
.tk-card .url-input { width: calc(100% - 24px); margin: 2px 12px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; font-size: 12.5px; }
.tk-his-empty::before { display: none; }
.tk-his-empty { color: var(--text-faint); }

/* ===== 前后端绑定：引擎徽标 + 后台案例展示 ===== */
/* 首页卡片：引擎状态 + 单价 */
.engine-tag { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 2.5px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; backdrop-filter: blur(6px); }
.engine-tag.real { background: rgba(16,185,129,.14); color: #0d9e6e; border: 1px solid rgba(16,185,129,.35); }
.engine-tag.mock { background: rgba(120,122,140,.12); color: var(--text-faint, #8a8b9e); border: 1px solid rgba(120,122,140,.3); }
.cost-tag { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 2.5px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: rgba(255,255,255,.85); color: var(--text-dim, #6f7080); border: 1px solid var(--border, #e7e8ef); backdrop-filter: blur(6px); }
[data-theme="dark"] .cost-tag { background: rgba(30,30,40,.75); }

/* 工作台头部：引擎徽标已移除（不再显示「演示回显 / 已接入」） */

/* 空画布：后台配置的示例效果 */
.tk-example { margin-top: 26px; width: 100%; max-width: 720px; }
.tk-example-head { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--text-faint, #8a8b9e); margin-bottom: 14px; letter-spacing: 1px; }
.tk-example .tk-pane-img img { max-height: 220px; }
.tk-example-desc { text-align: center; margin-top: 12px; font-size: 12px; color: var(--text-faint, #8a8b9e); }

/* v7：出图选项 + 视频教程入口（后台配置驱动） */
.tut-link { display:inline-flex; align-items:center; gap:4px; margin-top:6px; font-size:12.5px; color:var(--text-dim); text-decoration:none; border:1px solid var(--border); border-radius:999px; padding:3px 10px; transition:.15s; }
.tut-link:hover { color:var(--text); border-color:var(--border-strong); }
.opt-row { display:flex; align-items:center; gap:10px; padding:6px 0; flex-wrap:wrap; }
.opt-label { font-size:12.5px; color:var(--text-faint); min-width:60px; }
.opt-pills { display:flex; gap:6px; flex-wrap:wrap; }
.opt-pill { border:1px solid var(--border); background:transparent; color:var(--text-dim); border-radius:999px; padding:5px 12px; font-size:12.5px; cursor:pointer; transition:.15s; font-family:inherit; }
.opt-pill:hover { border-color:var(--border-strong); color:var(--text); }
.opt-pill.on { background:var(--text); color:var(--bg); border-color:var(--text); }

/* v8：滑动对比 + 标签选择 + 裁剪弹窗 */
.tk-slide { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; user-select:none; touch-action:none; }
.tk-slide-base { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.tk-slide-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; clip-path: inset(0 50% 0 0); }
.tk-slide-line { position:absolute; top:0; bottom:0; width:2px; background:#fff; box-shadow:0 0 6px rgba(0,0,0,.45); left:50%; }
.tk-slide-line::after { content://; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:28px; height:28px; border-radius:50%; background:#fff; border:1px solid rgba(0,0,0,.15); box-shadow:0 1px 4px rgba(0,0,0,.3); }
.tk-slide-tag-l { position:absolute; left:10px; top:10px; }
.tk-slide-tag-r { position:absolute; right:10px; top:10px; }
.tag-chips { display:flex; gap:6px; flex-wrap:wrap; }
.tag-chip { border:1px solid var(--border); background:transparent; color:var(--text-dim); border-radius:999px; padding:5px 12px; font-size:12.5px; cursor:pointer; transition:.15s; font-family:inherit; }
.tag-chip:hover { border-color:var(--border-strong); color:var(--text); }
.tag-chip.on { background:var(--text); color:var(--bg); border-color:var(--text); }
/* 上传裁剪弹窗 */
.crop-mask { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:999; }
.crop-mask[hidden] { display:none; }
.crop-modal { width:min(92vw,860px); background:var(--card); border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35); display:flex; flex-direction:column; }
.crop-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); }
.crop-head b { font-size:15px; }
.crop-x { border:none; background:none; font-size:22px; color:var(--text-faint); cursor:pointer; line-height:1; padding:0 4px; }
.crop-stage { position:relative; flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--bg-soft); min-height:320px; padding:20px; }
.crop-imgwrap { position:relative; display:inline-block; line-height:0; }
.crop-imgwrap img { display:block; max-width:100%; max-height:58vh; }
.crop-box { position:absolute; border:2px solid #fff; box-shadow:0 0 0 9999px rgba(0,0,0,.45); cursor:move; box-sizing:border-box; }
.crop-handle { position:absolute; right:-7px; bottom:-7px; width:16px; height:16px; background:#fff; border:1px solid rgba(0,0,0,.2); border-radius:3px; cursor:nwse-resize; }
.crop-foot { display:flex; align-items:center; gap:10px; padding:14px 18px; border-top:1px solid var(--border); }
.crop-hint { font-size:12px; color:var(--text-faint); flex:1; }
.crop-btn { border:1px solid var(--border); background:transparent; color:var(--text-dim); border-radius:10px; padding:8px 18px; font-size:13px; cursor:pointer; font-family:inherit; }
.crop-btn-dark { background:var(--text); color:var(--bg); border-color:var(--text); }

/* 工具图标（后台配置） */
.tool-icon { margin-right:5px; font-size:14px; }

/* ---------- 右上角用户菜单（头像下拉） ---------- */
.site-user { position: relative; }
.site-user-btn { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 999px; height: 36px; padding: 0 12px 0 3px; cursor: pointer; font-family: inherit; transition: .18s; }
.site-user-btn:hover { border-color: var(--brand); }
.site-user-btn .site-caret { margin-left: -2px; }
.su-av { width: 30px; height: 30px; overflow: hidden; }
.su-av:hover, .su-av-lg:hover { transform: none; }
.su-av img, .su-av-lg img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.su-name { font-size: 13px; font-weight: 600; color: var(--text-dim); max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-user-pop { width: 268px; padding: 14px; max-height: calc(100vh - 96px); overflow-y: auto; }
.su-head { display: flex; align-items: center; gap: 12px; }
.su-av-lg { width: 44px; height: 44px; font-size: 18px; overflow: hidden; flex: none; }
.su-id { min-width: 0; }
.su-id b { display: block; font-size: 14.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-id span { display: block; font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.su-credit { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; padding: 11px 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-soft, var(--surface)); }
.su-credit-num { font-size: 15px; color: var(--text-dim); }
.su-credit-num b { font-size: 19px; color: var(--text); margin-left: 2px; }
.su-buy { border: none; background: var(--text); color: var(--bg); border-radius: 999px; padding: 7px 16px; font-size: 12.5px; font-weight: 700; text-decoration: none; transition: .18s; }
.su-buy:hover { opacity: .85; }
/* 企业子账号：不显示「购买」，改显示共享池说明（子账号不能充值） */
.su-subnote { padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--text-dim, #6b7280); background: var(--bg-soft, #f1f2f7); white-space: nowrap; }
.su-menu, .su-foot { display: flex; flex-direction: column; gap: 2px; }
.su-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.su-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: transparent; color: var(--text-dim); font-family: inherit; font-size: 13.5px; padding: 9px 10px; border-radius: 10px; cursor: pointer; text-decoration: none; transition: .16s; }
.su-item:hover { background: var(--grad-soft); color: var(--brand); }
.su-item i { font-style: normal; font-size: 14px; width: 18px; text-align: center; opacity: .85; }
/* v11：面板菜单线条图标（与侧栏同一套 sideicons.js）—— currentColor 继承文字色，
   hover 变品牌色 / 危险色自动跟随，无需单独的状态色 */
.su-item i svg { display: block; margin: 0 auto; }
.su-item.su-danger:hover { background: color-mix(in srgb, #f43f5e 12%, transparent); color: #f43f5e; }
.su-item.su-primary { justify-content: center; background: var(--grad); color: #fff; font-weight: 700; margin-top: 8px; }
.su-item.su-primary:hover { opacity: .9; color: #fff; }

/* 工具页使用提示（后台「工具文案」） */
.tool-tips{margin:8px 0 0;padding:7px 10px;border-radius:8px;font-size:12.5px;line-height:1.55;color:var(--text-soft,#8a8f98);background:var(--bg-soft,rgba(127,127,127,.08));border:1px dashed var(--line,rgba(127,127,127,.25))}

/* ---- 画布工作区：对比视图 + 滚轮缩放 + 拖拽平移 + 悬浮缩略图 ---- */
.tk-canvas{position:relative}
.tk-cv{position:absolute;inset:0;display:flex;flex-direction:column}
.tk-cv-view{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none}
.tk-cv-view:active{cursor:grabbing}
.tk-cv-view.dragging{cursor:grabbing}
.tk-cv-view img{-webkit-user-drag:none;user-select:none}
.tk-cv-stage{transform-origin:center center;will-change:transform;display:flex;align-items:center;justify-content:center;max-width:100%}
.tk-cv-hint{position:absolute;top:15px;left:50%;transform:translateX(-50%);z-index:7;font-size:11.5px;color:var(--text-faint);background:rgba(255,255,255,.85);padding:3px 12px;border-radius:99px;border:1px solid var(--border);pointer-events:none}
.tk-cv-thumbs{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;z-index:8;display:flex;gap:8px;background:rgba(255,255,255,.94);border:1px solid var(--border);border-radius:14px;padding:8px;box-shadow:0 8px 28px rgba(30,30,60,.16);backdrop-filter:blur(6px);max-width:82%;overflow-x:auto}
.tk-cv-thumb{width:58px;height:58px;object-fit:cover;border-radius:9px;border:2px solid transparent;cursor:pointer;flex:none;opacity:.8;transition:.18s;background:var(--bg-soft,#f2f3f7)}
.tk-cv-thumb:hover{opacity:1;transform:translateY(-2px)}
.tk-cv-thumb.on{border-color:var(--brand);opacity:1;box-shadow:0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent)}
.tk-cv-thumb.pending{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-faint);border:2px dashed var(--border);opacity:1}
.tk-cv-thumb.pending.on{border-color:var(--brand);color:var(--brand)}
.tk-cv-thumb.failed{display:flex;align-items:center;justify-content:center;font-size:11px;color:#e5484d;border:2px dashed rgba(229,72,77,.45);background:rgba(229,72,77,.07);opacity:1}
.tk-cv-thumb.failed.on{border-color:#e5484d}
/* 处理失败态：原图照常展示，右侧明确给出原因，避免把原图误认为结果 */
.tk-tag.gray{background:color-mix(in srgb,#e5484d 10%,transparent);color:#e5484d;border:1px solid color-mix(in srgb,#e5484d 24%,transparent)}
.tk-pane-img.tk-fail{min-height:200px;background-image:none;background:color-mix(in srgb,#e5484d 5%,transparent);border:1px dashed color-mix(in srgb,#e5484d 32%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:34px 24px;text-align:center}
.tk-pane-img.tk-fail:hover{transform:none;box-shadow:var(--shadow)}
.tk-fail-ico{width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,#e5484d 14%,transparent);color:#e5484d;font-weight:800;font-size:19px;display:grid;place-items:center}
.tk-fail-msg{font-size:13.5px;font-weight:600;color:var(--text);line-height:1.6;max-width:36ch}
.tk-fail-tip{font-size:12px;color:var(--text-faint)}
.tk-cv-pending{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
.tk-cv-pending>img{display:block;filter:blur(3px) brightness(.82);max-height:calc(100vh - 220px)}
.tk-cv-pending-mask{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;color:#fff;font-size:13.5px;font-weight:600;background:rgba(15,15,25,.28);text-shadow:0 1px 6px rgba(0,0,0,.4)}
.tk-cv-pending-mask .wb-spinner{width:38px;height:38px;margin:0}

/* ---- 提示词标签下拉选择（提取模式） ---- */
.opt-row-col{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.pt-select{position:relative;border:1px solid var(--border);border-radius:10px;background:var(--card)}
.pt-select-sum{cursor:pointer;display:flex;align-items:center;gap:9px;padding:8px 12px;list-style:none;user-select:none}
.pt-select-sum::-webkit-details-marker{display:none}
.pt-dot{width:8px;height:8px;border-radius:50%;flex:none}
.pt-select-sum span[data-ptsel]{flex:1;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-arrow{flex:none;color:var(--text-faint);transition:transform .15s ease}
.pt-select[open] .pt-arrow{transform:rotate(180deg)}
.pt-list{position:relative;padding:4px;max-height:248px;overflow:auto}
.pt-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text-dim);transition:.12s}
.pt-item:hover{background:rgba(127,127,127,.08)}
.pt-item.on{color:var(--brand);background:color-mix(in srgb, var(--brand) 7%, transparent)}
.pt-check{margin-left:auto;flex:none;display:none;color:var(--brand)}
.pt-item.on .pt-check{display:block}

/* v8：工具介绍收进「小灯泡」——默认隐藏，悬停/聚焦/点击才浮出 */
.tk-panel-intro{position:relative}
.tk-intro-row{display:flex;align-items:center;gap:8px;min-width:0}
.tk-intro-row .tk-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-lamp{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12.5px;line-height:1;cursor:help;background:rgba(127,127,127,.12);border:1px solid var(--border,rgba(127,127,127,.25));color:var(--text-faint);user-select:none;transition:background .15s,color .15s,border-color .15s}
.tk-lamp:hover,.tk-lamp:focus-visible{background:color-mix(in srgb, var(--brand) 14%, transparent);border-color:color-mix(in srgb, var(--brand) 40%, transparent);color:var(--brand);outline:none}
.tk-desc{position:absolute;left:0;right:0;top:calc(100% - 4px);z-index:40;display:block;margin:0;padding:9px 11px;border-radius:9px;background:var(--card,#fff);border:1px solid var(--border,#e7e8ef);box-shadow:0 8px 24px rgba(20,20,40,.14);font-size:12.5px;line-height:1.6;color:var(--text-soft,var(--text-faint));-webkit-line-clamp:unset;overflow:visible;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease,visibility .16s;pointer-events:none}
.tk-desc.show{opacity:1;visibility:visible;transform:none}
[data-theme="dark"] .tk-desc{background:var(--card,#1e1e28);box-shadow:0 8px 24px rgba(0,0,0,.45)}

/* v12：全站唯一登录框（左右分栏 · 品牌区 + 表单卡）——原 login.html 已下线，视觉并入此处 */
.auth-gate{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(18,18,30,.42);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
[data-theme="dark"] .auth-gate{background:rgba(0,0,0,.62)}
.ag-card{position:relative;width:100%;max-width:720px;max-height:calc(100vh - 40px);overflow:auto;display:flex;align-items:stretch;
  background:var(--card,#fff);border:1px solid var(--border,#e7e8ef);border-radius:20px;padding:0;
  box-shadow:0 28px 70px rgba(30,30,60,.28);animation:agIn .22s ease}
[data-theme="dark"] .ag-card{box-shadow:0 28px 70px rgba(0,0,0,.6)}
@keyframes agIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.ag-close{position:absolute;top:10px;right:12px;z-index:3;width:30px;height:30px;line-height:1;padding:0;border:none;border-radius:8px;
  background:transparent;color:var(--text-faint);font-size:20px;font-family:inherit;cursor:pointer;transition:background .15s,color .15s}
.ag-close:hover{background:rgba(127,127,127,.14);color:var(--text)}

/* —— 左：品牌区 —— */
.ag-brand{position:relative;flex:0 0 44%;padding:38px 34px;display:flex;flex-direction:column;color:#fff;overflow:hidden;
  border-radius:19px 0 0 19px;background:linear-gradient(150deg,var(--brand) 0%,#7c5cf9 48%,#8b5cf6 100%)}
.ag-brand-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(340px 240px at 88% 6%,rgba(255,255,255,.28),transparent 62%),radial-gradient(300px 260px at 6% 96%,rgba(14,165,233,.34),transparent 60%)}
.ag-brand-logo{position:relative;display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:#fff;font-size:19px;font-weight:800;letter-spacing:.4px}
.ag-brand-logo .logo-mark{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.34);color:#fff}
.ag-brand-logo em{font-style:normal;color:#c7f2ff}
.ag-brand-title{position:relative;margin:38px 0 0;font-size:25px;line-height:1.4;font-weight:800;letter-spacing:.3px}
.ag-brand-desc{position:relative;margin:13px 0 0;font-size:13px;line-height:1.75;color:rgba(255,255,255,.82)}
.ag-brand-list{position:relative;list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.ag-brand-list li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:rgba(255,255,255,.9)}
.ag-tick{width:17px;height:17px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.34);font-size:10px;font-style:normal;font-weight:700}
.ag-brand-foot{position:relative;margin-top:auto;padding-top:30px;font-size:11.5px;color:rgba(255,255,255,.72)}
.ag-brand-foot b{color:#fff;font-weight:800}

/* —— 右：表单卡 —— */
.ag-pane{flex:1;min-width:0;padding:36px 36px 28px;display:flex;flex-direction:column;align-self:center}
.ag-card-logo{display:none;align-items:center;justify-content:center;gap:6px;font-size:17px;font-weight:800;color:var(--text);margin-bottom:14px}
.ag-card-logo em{font-style:normal;color:var(--brand)}
.ag-tabs{display:flex;gap:26px;border-bottom:1px solid var(--border);margin-bottom:22px}
.ag-tab{position:relative;background:none;border:none;padding:0 0 12px;font-family:inherit;font-size:14.5px;font-weight:700;
  color:var(--text);cursor:default}
.ag-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--grad)}
/* 2026-10-01：登录框从「手机号 / 企业子账号」改为「微信登录 / 企业子账号」双页签 → 未选中的那个要可点、要弱化 */
.ag-tab{cursor:pointer}
.ag-tab:not(.active){color:var(--text-faint)}
.ag-tab:not(.active):hover{color:var(--text)}
.ag-title{margin:0;font-size:22px;font-weight:800;letter-spacing:.2px;color:var(--text)}
.ag-sub{margin:8px 0 20px;font-size:12.5px;line-height:1.65;color:var(--text-faint)}
.ag-field{position:relative;display:flex;align-items:center}
.ag-field-code{margin-top:12px}
.ag-ico{position:absolute;left:14px;display:flex;color:var(--text-faint);pointer-events:none}
.ag-input{width:100%;box-sizing:border-box;height:46px;padding:0 14px 0 41px;border-radius:12px;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:14px;font-family:inherit;outline:none;
  transition:border-color .15s,box-shadow .15s}
.ag-input::placeholder{color:var(--text-faint)}
.ag-input:focus{border-color:var(--brand);box-shadow:0 0 0 3.5px color-mix(in srgb, var(--brand) 14%, transparent)}
.ag-btn{width:100%;box-sizing:border-box;height:46px;margin-top:12px;border-radius:12px;border:1px solid transparent;
  display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14.5px;font-weight:700;
  cursor:pointer;transition:filter .15s,transform .12s,background .15s,color .15s,border-color .15s}
.ag-btn:active:not(:disabled){transform:translateY(1px)}
.ag-btn:disabled{opacity:.6;cursor:default}
.ag-primary{margin-top:22px;background:var(--grad);color:#fff;box-shadow:0 10px 24px color-mix(in srgb, var(--brand) 30%, transparent)}
.ag-primary:hover:not(:disabled){filter:brightness(1.07)}
/* 2026-10-01：登录方式收敛为「微信 + 企业子账号」，微信按钮从「或」下方的次要按钮提升为主操作 */
.ag-wxbox{margin-top:2px}
.ag-wx{height:50px;margin-top:0;background:#07c160;color:#fff;font-size:15.5px;
  box-shadow:0 10px 24px rgba(7,193,96,.28)}
.ag-wx:hover:not(:disabled){filter:brightness(1.06)}
/* 微信按钮里的小图标（用纯 CSS 画三瓣，不引外链图标） */
.ag-wx-ico{position:relative;width:16px;height:16px;flex:none;border-radius:50%;background:currentColor;opacity:.92}
.ag-wx-ico::after{content:"";position:absolute;right:-4px;bottom:-3px;width:9px;height:9px;border-radius:50%;
  background:inherit;box-shadow:0 0 0 2px #07c160}
/* 微信登录不可用时的占位：与按钮等高，避免登录框塌一块 */
.ag-wx-loading{display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 14px;
  border-radius:12px;border:1px dashed var(--border-strong);color:var(--text-faint);
  font-size:12.5px;text-align:center;line-height:1.6}
.ag-wx-note{margin:14px 0 0;font-size:11.5px;line-height:1.7;color:var(--text-faint);text-align:center}
.ag-hint{margin:12px 0 0;min-height:15px;font-size:11.5px;line-height:1.5;color:var(--text-faint);text-align:center}
.ag-hint.err{color:#e5484d}

/* —— 窄屏：弹窗收成单列，品牌区压扁 —— */
@media (max-width:820px){
  .auth-gate{padding:14px}
  .ag-card{flex-direction:column;max-width:420px;border-radius:18px}
  .ag-brand{flex:none;padding:22px 22px 20px;text-align:center;align-items:center;justify-content:center;border-radius:17px 17px 0 0}
  .ag-brand-logo{display:none}
  .ag-brand-title{margin:0;font-size:20px}
  .ag-brand-desc{margin-top:9px;font-size:12.5px}
  .ag-brand-list{display:none}
  .ag-brand-foot{margin-top:13px;padding-top:0;font-size:11px}
  .ag-pane{padding:22px 20px 20px}
  .ag-card-logo{display:flex}
}

/* v12：原「登录 / 注册页」独立样式（.auth-shell / .auth-brand* / .auth-card* / .auth-*）
   已随 web/login.html 下线整体删除；品牌视觉并入上方 .ag-* 弹窗。 */

/* v10：右栏历史里「正在处理中」的任务（置顶显示，点一下回到该任务继续等待） */
.tk-his-run{background:linear-gradient(180deg,color-mix(in srgb, var(--brand) 8%, transparent),color-mix(in srgb, var(--brand) 3%, transparent));border:1px solid color-mix(in srgb, var(--brand) 30%, transparent)}
.tk-his-run:hover{background:linear-gradient(180deg,color-mix(in srgb, var(--brand) 14%, transparent),color-mix(in srgb, var(--brand) 6%, transparent));border-color:color-mix(in srgb, var(--brand) 55%, transparent);transform:none}
.tk-his-runico{width:42px;height:42px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--brand) 12%, transparent)}
.tk-his-runico .wb-spinner{width:18px;height:18px;margin:0;border-width:2px}
.tk-his-badge.live{background:color-mix(in srgb, var(--brand) 16%, transparent);border-color:transparent;color:var(--brand)}
.tk-his-run .tk-his-time{color:var(--brand);font-weight:700}
[data-theme="dark"] .tk-his-run{background:linear-gradient(180deg,rgba(139,131,255,.14),rgba(139,131,255,.05));border-color:rgba(139,131,255,.32)}
[data-theme="dark"] .tk-his-run:hover{background:linear-gradient(180deg,rgba(139,131,255,.2),rgba(139,131,255,.08));border-color:rgba(139,131,255,.55)}
[data-theme="dark"] .tk-his-badge.live,[data-theme="dark"] .tk-his-run .tk-his-time{color:#a9a3ff}
[data-theme="dark"] .tk-his-runico{background:rgba(139,131,255,.16)}
/* 同时有多个任务在跑时，给每条「处理中」行标个序号，避免两条长得一模一样分不清 */
.tk-his-runno{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:99px;font-size:10px;font-weight:700;color:var(--brand);background:color-mix(in srgb, var(--brand) 12%, transparent);vertical-align:1px}
[data-theme="dark"] .tk-his-runno{color:#a9a3ff;background:rgba(139,131,255,.18)}
/* v10b：窄窗口（~1264px 面板 232px）下历史头部不再把「历史记录」/标签挤到竖排换行 */
.tk-his-head{flex-wrap:nowrap;gap:8px}
.tk-his-title{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tk-his-tabs{flex:none}
.tk-his-tabs button{white-space:nowrap}
.tk-his-clear,.tk-his-fold{flex:none;white-space:nowrap}
/* v10c：处理中行的「点击回到任务」单独占一行，避免在 232px 宽的面板里被折成半截词 */
.tk-his-hint{margin-top:3px;font-size:10.5px;font-weight:600;color:var(--brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-theme="dark"] .tk-his-hint{color:#a9a3ff}
/* 窄窗口下给头部再挤点空间，别再让「历史记录」被省略号截断 */
@media (max-width:1440px){.tk-his-head{padding:12px 12px 10px;gap:6px}.tk-his-tabs button{padding:3px 7px}}

/* v11：聚合工具 —— 左栏方案清单 + 画布网格（一张图出多种效果） */
.tk-combo-list{padding:2px 0}
.tk-combo-list-title{font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:6px}
.tk-combo-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--border);font-size:12.5px}
.tk-combo-row-name{color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tk-combo-row-cost{color:var(--text-faint);flex:none}
.tk-combo-row.total{border-bottom:none;font-weight:700;color:var(--text)}
.tk-combo-row.total .tk-combo-row-cost{color:var(--brand)}

.tk-cv-combo{overflow:auto;padding:20px;align-items:stretch;justify-content:flex-start}
.tk-combo-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-size:13px;font-weight:700;color:var(--text)}
.tk-combo-status{font-weight:600;font-size:12px;color:var(--brand)}
.tk-combo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.tk-combo-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface,#fff);box-shadow:0 1px 3px rgba(17,17,30,.05);display:flex;flex-direction:column}
.tk-combo-name{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border);min-height:36px}
.tk-combo-more{font-size:10.5px;color:var(--text-faint)}
.tk-combo-img{position:relative;aspect-ratio:1/1;background:var(--bg-soft,#f2f3f7);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tk-combo-card.done .tk-combo-img{cursor:zoom-in}
.tk-combo-img img{width:100%;height:100%;object-fit:contain;background:repeating-conic-gradient(#f0f1f5 0% 25%,#fff 0% 50%) 0/16px 16px}
.tk-combo-img .wb-spinner{width:28px;height:28px;margin:0}
.tk-combo-pct{margin-top:8px;font-size:12px;color:var(--text-faint)}
.tk-combo-card.pending .tk-combo-img{flex-direction:column;gap:6px}
.tk-combo-img.tk-fail{flex-direction:column;gap:8px;padding:22px 14px;text-align:center;min-height:180px}
.tk-combo-ops{display:flex;gap:8px;padding:8px 10px;border-top:1px solid var(--border)}
.tk-combo-dl,.tk-combo-view{flex:1;border:1px solid var(--border);background:var(--surface,#fff);color:var(--text);border-radius:8px;font-size:12px;font-weight:600;padding:6px 0;cursor:pointer}
.tk-combo-dl{background:var(--brand);border-color:var(--brand);color:#fff}
.tk-combo-view:hover{border-color:var(--brand);color:var(--brand)}
.tk-cv-thumb.combo{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--brand);border:2px dashed color-mix(in srgb, var(--brand) 50%, transparent);background:color-mix(in srgb, var(--brand) 7%, transparent);opacity:1}
[data-theme="dark"] .tk-combo-card{background:var(--surface,#1e1e28)}
[data-theme="dark"] .tk-combo-img img{background:repeating-conic-gradient(#16161f 0% 25%,#1e1e28 0% 50%) 0/16px 16px}

/* v12b 多张出图：已出的图直接上「处理后」对比位，未出的在下方缩略图区转圈 */
.tk-live-bar{position:absolute;top:15px;right:15px;z-index:7;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--text,#222);background:rgba(255,255,255,.92);border:1px solid var(--border);border-radius:99px;padding:5px 14px;box-shadow:0 4px 14px rgba(30,30,60,.12);backdrop-filter:blur(6px);pointer-events:none}
.tk-live-bar b{color:var(--brand)}
.tk-live-bar .wb-spinner{width:14px;height:14px;margin:0;border-width:2px}
.tk-cv-thumb.mg-wait{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:2px dashed color-mix(in srgb, var(--brand) 45%, transparent);background:color-mix(in srgb, var(--brand) 6%, transparent);opacity:1;cursor:default}
.tk-cv-thumb.mg-wait:hover{transform:none;opacity:1}
.tk-cv-thumb.mg-wait .wb-spinner{width:20px;height:20px;margin:0;border-width:2px}
.tk-cv-thumb.mg-wait b{font-size:10px;font-weight:700;color:var(--text-faint,#9aa2af)}
[data-theme="dark"] .tk-live-bar{background:rgba(30,30,46,.92);color:var(--text,#e8e8ef)}
[data-theme="dark"] .tk-cv-thumb.mg-wait{background:color-mix(in srgb, var(--brand) 12%, transparent)}
/* 缩略图条里的「任务分隔块」：多次任务的格子并排时，用一条竖线 + 序号把归属分开 */
.tk-cv-sep{flex:none;width:1px;align-self:stretch;margin:2px 2px;background:var(--border);position:relative}
.tk-cv-sep>span{position:absolute;top:-1px;left:50%;transform:translate(-50%,-50%);font-size:9.5px;font-weight:700;line-height:1;color:var(--text-faint,#9aa2af);background:rgba(255,255,255,.94);padding:2px 4px;border-radius:99px;border:1px solid var(--border)}
[data-theme="dark"] .tk-cv-sep>span{background:rgba(30,30,46,.94)}
.wb-cost-v{display:inline-flex;align-items:baseline;gap:6px}
.wb-cost-v i{font-style:normal;font-size:11px;color:var(--text-faint,#9aa2af)}
.form-hint{font-size:11.5px;line-height:1.5;color:var(--text-faint,#9aa2af);margin-top:6px}

/* ---------- v13 每日签到：导航入口 + 弹窗 ---------- */
.site-checkin{position:relative}
.site-checkin-btn{display:inline-flex;align-items:center;gap:6px;position:relative;border:1px solid var(--border-strong);background:var(--surface);border-radius:999px;height:36px;padding:0 13px;font-size:13px;font-weight:600;color:var(--text-dim);cursor:pointer;font-family:inherit;transition:.18s}
.site-checkin-btn:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.site-checkin-btn.done{color:var(--brand);border-color:color-mix(in srgb, var(--brand) 45%, transparent);background:var(--grad-soft)}
.site-checkin-btn .ck-ico{font-size:14px;line-height:1}
.site-checkin-btn .ck-dot{position:absolute;top:-1px;right:2px;width:8px;height:8px;border-radius:50%;background:#ff4d4f;box-shadow:0 0 0 2px var(--surface)}
.kk-ck-mask{position:fixed;inset:0;z-index:900;background:rgba(18,18,32,.46);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:.18s}
.kk-ck-mask[hidden]{display:none}
.kk-ck-mask.open{opacity:1}
.kk-ck-card{position:relative;width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border-strong);border-radius:20px;box-shadow:var(--shadow);padding:22px 20px 18px;transform:translateY(6px) scale(.98);transition:.2s}
.kk-ck-mask.open .kk-ck-card{transform:none}
.kk-ck-x{position:absolute;top:9px;right:12px;border:none;background:transparent;font-size:20px;line-height:1;color:var(--text-faint);cursor:pointer;font-family:inherit}
.kk-ck-x:hover{color:var(--text)}
.kk-ck-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.kk-ck-head b{font-size:17px;font-weight:800;color:var(--text)}
.kk-ck-head span{font-size:12px;color:var(--text-faint)}
.kk-ck-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:14px}
.kk-ck-day{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;border-radius:12px;border:1px dashed var(--border-strong);font-style:normal}
.kk-ck-day span{font-size:10.5px;color:var(--text-faint)}
.kk-ck-day b{font-size:13px;color:var(--text-faint);line-height:1.2}
.kk-ck-day.on{border-style:solid;border-color:transparent;background:var(--grad);box-shadow:0 4px 12px color-mix(in srgb, var(--brand) 28%, transparent)}
.kk-ck-day.on span,.kk-ck-day.on b{color:#fff}
.kk-ck-day.today:not(.on){border-style:solid;border-color:var(--brand);background:var(--grad-soft)}
.kk-ck-day.today:not(.on) b{color:var(--brand)}
.kk-ck-gain{text-align:center;font-size:13px;color:var(--text-dim);margin-bottom:12px}
.kk-ck-gain b{font-size:17px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kk-ck-go{display:block;width:100%;border:none;border-radius:12px;padding:12px 0;font-size:14px;font-weight:700;color:#fff;background:var(--grad);cursor:pointer;font-family:inherit;transition:.18s}
.kk-ck-go:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
.kk-ck-go:disabled{background:var(--border-strong);color:var(--text-faint);cursor:not-allowed;transform:none;filter:none}
.kk-ck-rule{font-size:11.5px;line-height:1.6;color:var(--text-faint);margin-top:12px;padding-top:10px;border-top:1px dashed var(--border)}
.kk-ck-foot{font-size:11.5px;color:var(--text-faint);margin-top:8px;text-align:center}
.kk-ck-foot b{color:var(--text-dim)}
[data-theme="dark"] .kk-ck-mask{background:rgba(6,6,14,.62)}
@media (max-width:680px){.site-checkin-btn .ck-txt{display:none}.site-checkin-btn{padding:0 10px}}

/* ===== 前端参数控件补充：数字输入 / 取色器 / 参数级提示语 ===== */
.form-item input[type="number"] { width: 100%; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 11px; padding: 11px 14px; font-size: 14px; color: var(--text); outline: none; }
.form-item input[type="number"]:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }
.form-item textarea::placeholder, .form-item input::placeholder { color: var(--text-faint); }
.form-hint b { color: var(--text); font-weight: 700; }
.form-hint code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; background: var(--bg-soft); border-radius: 4px; padding: 1px 4px; }
.clr-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clr-row input[type="color"] { width: 40px; height: 34px; padding: 0; border: 1px solid var(--border-strong); border-radius: 9px; background: none; cursor: pointer; flex: 0 0 auto; }
.clr-row input[type="color"]:disabled { opacity: .45; cursor: not-allowed; }
.clr-row .clr-hex { flex: 1 1 110px; min-width: 110px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 11px; padding: 9px 12px; font-size: 13px; color: var(--text); outline: none; font-family: ui-monospace, Menlo, Consolas, monospace; }
.clr-row .clr-hex:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }
.clr-none { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-dim); white-space: nowrap; cursor: pointer; margin-bottom: 0; }
.clr-none input { cursor: pointer; margin: 0; }

/* ---------- 非图片产物（EPS / PDF，位图转矢量的其他输出格式）----------
   <img> 画不出来，改用文件卡；背景走 color-mix 自动适配深浅主题 */
.tk-pane .tk-pane-img.tk-filebox { background: color-mix(in srgb, var(--text) 5%, transparent); border-style: solid; min-height: 240px; padding: 28px 22px; }
.tk-pane .tk-pane-img.tk-filebox:hover { transform: none; box-shadow: var(--shadow); }
.tk-filecard { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.tk-filecard-ico { width: 66px; height: 66px; border-radius: 16px; display: grid; place-items: center; font-weight: 800; font-size: 15px; letter-spacing: .5px; color: #fff; background: linear-gradient(135deg, var(--brand), #8b7bff); box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 28%, transparent); }
.tk-filecard-name { font-size: 14.5px; font-weight: 700; color: var(--text); }
.tk-filecard-tip { font-size: 12px; color: var(--text-faint); line-height: 1.7; }
.tk-filecard-btn { margin-top: 4px; display: inline-block; padding: 9px 22px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transition: .18s; }
.tk-filecard-btn:hover { background: #544cf0; transform: translateY(-1px); }
.tk-cv-thumb.file { display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; color: var(--brand); letter-spacing: .3px; border: 2px dashed color-mix(in srgb, var(--brand) 50%, transparent); background: color-mix(in srgb, var(--brand) 7%, transparent); opacity: 1; }
.tk-cv-thumb.file.on { border-color: var(--brand); }

/* ---------- 页脚备案栏 ----------
   工信部要求：ICP 备案号须标注在网站底部，并链接至 https://beian.miit.gov.cn/
   颜色全部走主题变量，10 套主题自动适配 */
.beian-bar { border-top: 1px solid var(--border); background: var(--bg-soft); padding: 15px 28px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; line-height: 1.5; color: var(--text-faint); }
/* index.html 的备案栏嵌在 <footer class="footer"> 里，会被 .footer a 的
   display:block / margin-bottom:9px 与 .footer a:hover 的 translateX 波及，故显式复位 */
.beian-bar a { display: inline; margin: 0; font-size: inherit; color: var(--text-faint); transition: color .2s; }
.beian-bar a:hover { color: var(--brand); transform: none; }
.beian-bar .beian-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); flex: 0 0 auto; }
/* 工具页是全屏应用布局（.tk-app 高度 = 100vh - 64px）：备案栏占 32px，从 .tk-app 里扣掉，
   否则会出现整页滚动条。窄屏下 .tk-app 本来就是 height:auto，故只在 >=861px 生效 */
.tk-beian { height: 32px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 12px; border-top: 1px solid var(--border); background: var(--bg-soft); font-size: 12px; color: var(--text-faint); overflow: hidden; }
.tk-beian a { color: var(--text-faint); transition: color .2s; }
.tk-beian a:hover { color: var(--brand); }
.tk-beian .beian-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); flex: 0 0 auto; }
@media (min-width: 861px) { .tk-app { height: calc(100vh - 64px - 32px); } }

/* 备案栏贴底：内容不足一屏的页面，备案栏不能浮在页面中部。
   用 :has() 只在「body 的直接子元素就是备案栏」时开启 flex 列布局；
   index.html 的备案栏嵌在 .footer 里，选择器不匹配，故首页布局完全不受影响。
   浏览器不支持 :has() 时整条规则被忽略 → 退回普通文档流，不会破版。 */
body:has(> .beian-bar), body:has(> .tk-beian) { display: flex; flex-direction: column; }
body:has(> .beian-bar) > .beian-bar, body:has(> .tk-beian) > .tk-beian { margin-top: auto; flex: 0 0 auto; }

/* ============ 切换式聚合：顶部一排模型入口（点哪个用哪个；输入图与结果不动） ============
   刻意不用「品牌色实底 + 白字」：各主题的 --brand 明度差异很大（暗色主题里是浅色），
   实底+白字在暗色主题下会糊。选中的视觉只靠 --brand 描边 + 常规文字色，全主题都稳。 */
.tk-model-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-model-pill {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%; padding: 6px 11px;
  border: 1px solid var(--border); border-radius: 99px;
  background: transparent; color: var(--text-dim);
  font-size: 12.5px; font-weight: 600; line-height: 1.2;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color .16s, color .16s, background .16s;
  font-family: inherit;
}
.tk-model-pill:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); }
.tk-model-pill.on {
  border-color: var(--brand, var(--brand)); color: var(--text); font-weight: 700;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--brand, var(--brand));
}
.tk-model-pill:disabled { opacity: .45; cursor: not-allowed; }
.tk-model-ico { font-style: normal; font-size: 13px; line-height: 1; }
.tk-model-desc {
  margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--border);
  font-size: 12px; line-height: 1.55; color: var(--text-faint);
}
@media (max-width: 1440px) { .tk-model-pill { padding: 5px 9px; font-size: 12px; } }

/* ===== 2026-10-02 头像面板：顶上功能的收容所 =====
   顶栏「去栏化」以后，原来挂在 .nav-right 上的六件只留下三件（额度胶囊 / 通知 / 头像，
   见文件开头 .nav-right 那段），其余四件（导航链接、搜索框、主题、签到）全部收进 #userPop。
   🔴 面板里那几块**不是新建的节点**：site.js 的 mountTools() 把原来 .nav-right 上的
     .search-box / .site-theme / .site-checkin 直接 appendChild 搬进来 —— 主题的
     paintThemeMenu、签到的 render 都把状态挂在节点上，重建会一起丢掉。
   所以下面这些样式几乎只做一件事：把"横向小胶囊"改写成"竖排列表行"。 */
.site-user-pop { width: 300px; }

/* —— 收容区：搜索 / 主题 / 签到 —— */
.su-tools { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.su-hd { font-size: 11px; font-weight: 600; letter-spacing: .4px; color: var(--text-faint); padding: 0 2px; }

/* 主题：原来自带一个 .site-theme-pop 下拉（绝对定位 + opacity 切换），
   搬进面板后改成**平铺** —— 4 个色块直接摆在面板里，点一下就换，不必先展开一层。 */
.site-user-pop .site-theme-btn { display: none; }
.site-user-pop .site-theme-pop {
  position: static; width: auto; padding: 0; border: 0; background: none; box-shadow: none;
  opacity: 1; transform: none; pointer-events: auto;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.site-user-pop .theme-item { width: auto; padding: 5px 11px 5px 6px; gap: 7px; border: 1px solid var(--border-strong); border-radius: 999px; }
.site-user-pop .theme-item:hover, .site-user-pop .theme-item.on { background: var(--grad-soft); }
.site-user-pop .theme-item.on { border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.site-user-pop .theme-swatch { width: 15px; height: 15px; border-width: 1px; }
.site-user-pop .theme-name { font-size: 12.5px; font-weight: 500; }
.site-user-pop .theme-sub { display: none; }

/* 签到：横向胶囊 → 列表行（和下面 .su-item 同一套语汇） */
.site-user-pop .site-checkin-btn {
  width: 100%; justify-content: flex-start; height: 34px; padding: 0 10px;
  border-color: transparent; background: transparent; border-radius: 10px;
}
.site-user-pop .site-checkin-btn:hover { border-color: transparent; transform: none; color: var(--brand); background: var(--grad-soft); }
.site-user-pop .site-checkin-btn .ck-dot { position: static; margin-left: auto; box-shadow: none; }

/* —— 菜单：前三条（首页 / 我的工具 / 充值）各占一整行，下面 5 项排两列省高度 —— */
.su-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.su-menu .su-nav { grid-column: 1 / -1; }
.su-sep { grid-column: 1 / -1; height: 1px; margin: 7px 2px; background: var(--border); }
/* 当前页高亮：polish.js 按 location.pathname 给这三条挂 .on（取代原来的 .nav-links a.active） */
.su-item.on { color: var(--brand); background: var(--grad-soft); }