/* ============================================================================
 * uniKiT · Unified Shell (R1.3 Wave1R Rework R2)
 * ----------------------------------------------------------------------------
 * Owner REJECT P1-C/D/E/F 系统级重构：彻底统一首页与工具页的产品壳。
 *   - P1-C: Header persistent sticky（统一 grid + 滚动 elevation，不遮内容）
 *   - P1-D: 导航全可用 + smooth scroll + offset 考虑 header + active 联动
 *   - P1-E: 首页卡一步直达工具（删除展开详情中转层与二次 CTA）
 *   - P1-F: 工具页共享壳（Tool Header 唯一标题 + 官方 badge + capability metadata，
 *           面板内旧标题/旧 badge/旧 status-bar 由壳层隐藏，消除旧 SPA 嵌套感）
 *   - §14: Footer 诚实计数（20 可用 + 1 即将推出，由 shell.js 设置）
 * 设计 token 继承 Accepted R1.2.9 基因；不动任何工具业务逻辑。
 * ========================================================================== */

/* ============ 全站拖选策略：交互文字不可误选，输入与文字结果仍可选 ============ */
html, body, body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable], .ff-live, #b64-out-txt {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
img, canvas, svg {
  -webkit-user-drag: none;
}

/* ============ Design tokens（Accepted 基因） ============ */
:root{
  --paper:#FAF9F6;
  --ink:#1A1D23;
  --ink-2:#565C68;
  --ink-3:#8B909C;
  --footer-record-ink:#6d4f14;
  --line:#ECE9E1;
  --line-2:#DDD8CD;
  --surface-2:#F5F2EC; /* 2026-08-28：模板 var(--surface-2) 无定义回退浅色——补浅/暗两套 */
  --accent:#0E6B57;
  --accent-strong:#0A5544;
  --accent-soft:rgba(14,107,87,.13);
  --accent-line:#C2DBD2;
  --fun:#B25A2B;
  --fun-soft:rgba(178,90,43,.05);
  --fun-line:#EADFD3;
  --surface:#FFFFFF;
  --hover-tint:rgba(26,29,35,.04);
  --ring:rgba(14,107,87,.30);
  --maxw:1460px;
  /* 工具页内容轴：避免宽屏右侧死区（Owner §11） */
  --content-maxw:1320px;
  --pad:48px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --fs-brand:clamp(27px,2.5vw,38px);
  --fs-ch:clamp(24px,2.05vw,31px);
  --fs-tool:clamp(18px,1.45vw,21px);
  --fs-desc:14px;
  --fs-body:15px;
  --fs-meta:12.5px;
  /* 工具面板组件 token（浅色，替代旧 --bg-elevated 等） */
  --panel-surface:#FFFFFF;
  --panel-ink:#1A1D23;
  --panel-ink-2:#565C68;
  --panel-ink-3:#8B909C;
  --panel-line:#E6E2D9;
  --panel-line-2:#D8D2C6;
  --panel-hover:rgba(26,29,35,.07);
  --panel-ring:rgba(14,107,87,.30);
  --panel-radius:10px;
  --panel-radius-sm:8px;
  /* 统一控件高度（Owner §12 control height 统一）
     --ctl-h: 主控件（input/select/textarea/btn 主层级）
     --ctl-h-s: segmented/chip 半高（tab-btn、分段按钮）——不与 input 同行，自成体系 */
  --ctl-h:42px;
  --ctl-h-s:36px;
  --ctl-radius:8px;
  /* sticky header 总高（brand 行 + nav 行）；mtabs/idx/scroll-padding 统一引用 */
  --hd-h:124px;
}
/* ============ 暗色主题（2026-08-28：自动识别 + 手动切换；data-theme 由主题脚本设置） ============ */
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#15171C;
  --ink:#ECEEF2;
  --ink-2:#A9AFBB;
  --ink-3:#6E7480;
  --footer-record-ink:#f0cf8a;
  --line:#262A32;
  --line-2:#333944;
  --surface-2:#1B1E24; /* 2026-08-28：模板 var(--surface-2) 暗色定义（占位/次表面/拖放区暗底） */
  --accent:#3FA88C;
  --accent-strong:#57BFA3;
  --accent-soft:rgba(63,168,140,.16);
  --accent-line:#2B4A42;
  --fun:#D98A54;
  --fun-soft:rgba(217,138,84,.08);
  --fun-line:#4A3A2C;
  --surface:#1D2026;
  --hover-tint:rgba(255,255,255,.06);
  --ring:rgba(63,168,140,.35);
  --panel-surface:#1D2026;
  --panel-ink:#ECEEF2;
  --panel-ink-2:#A9AFBB;
  --panel-ink-3:#6E7480;
  --panel-line:#2A2F38;
  --panel-line-2:#383E4A;
  --panel-hover:rgba(255,255,255,.08);
  --panel-ring:rgba(63,168,140,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* P1-D: 所有锚点滚动统一考虑 sticky header 高度 */
html{scroll-padding-top:var(--hd-h)}
body{
  background:var(--paper); color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:var(--fs-body); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit}
a{color:var(--accent)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
/* 工具页内容轴（共享 grid：breadcrumb/title/meta/workspace 同一主内容轴） */
.content-wrap{max-width:var(--content-maxw);margin:0 auto;padding:0 var(--pad)}

/* ============ 统一 Persistent Header（P1-C） ============ */
.shell-hd{
  position:static;
  background:transparent;
  transition:box-shadow .18s var(--ease);
}
/* 顶部栏与下方内容之间画一条居中分割线（手机/平板基准：左右留 20px，不顶到头） */
.shell-hd::after{
  content:"";
  display:block;
  width:calc(100% - 40px);
  margin:0 auto;
  border-top:3px dashed var(--line);
}
/* 电脑端（≥1025px）：虚线比工具页卡片（content-maxw 1320 - pad 48×2 = 1224）每边略长 8px → 1240（用户：只改电脑端）；
   品牌字号固定 38px（消除 clamp 2.5vw 中间变化，缩放窗口时字号一直不变） */
@media (min-width:1025px){
  :root{--fs-brand:38px}
  .shell-hd::after{
    width:calc(100% - 80px);
    max-width:1240px;
  }
}
/* 滚动后轻量 elevation（克制，禁止跳尺寸/夸张毛玻璃） */
.shell-hd.scrolled{box-shadow:none}
.shell-hd-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:18px;padding-bottom:24px}
.shell-brand{display:flex;align-items:baseline;gap:12px;text-decoration:none;min-width:0;padding-left:33px} /* 2026-08-28：uniKiT. 与下方「媒体处理」标题文字左对齐（ch-no「01」占位 33px） */
/* 电脑端（≥1025px）：uniKiT. 品牌左边缘与虚线左端对齐、模式切换按钮右边缘与虚线右端对齐
   （用户：uniKiT. 也要跟着一起动 / 和模式切换）；须位于 base 规则之后（级联顺序） */
@media (min-width:1025px){
  .shell-brand{padding-left:75px}
  .shell-hd-right{margin-right:62px}
}
.shell-logo{display:inline-flex;align-items:center;align-self:center;color:var(--accent);flex:none}
.shell-logo svg{width:22px;height:22px}
.shell-wordmark{font-size:var(--fs-brand);font-weight:800;letter-spacing:-.5px;line-height:1.15;color:var(--ink);white-space:nowrap}
.shell-wordmark .ko{color:var(--accent)}
/* 2026-08-28：uniKiT. 品牌（用户：图标都删掉——主页词标纯文字）——品牌蓝句点 */
.shell-wordmark .uk-dot{color:#2E5EFF}
/* 2026-08-28：主题切换按钮（搜索框左侧；auto/light/dark 三态循环。
   auto 态=品牌蓝边框高亮（自动跟随设备），图标按当前实际主题（暗→月浅→日，不显示 auto 字母）——
   重做：图标淡入+旋转过渡（切换流畅——用户：切换不流畅） */
.shell-theme{display:inline-flex;align-items:center;justify-content:center;width:var(--ctl-h);height:var(--ctl-h);border:1px solid var(--line-2);border-radius:var(--ctl-radius);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:border-color .22s var(--ease),color .22s var(--ease),background .22s var(--ease);flex:none;position:relative}
.shell-theme:hover{border-color:var(--ink-3);color:var(--ink)}
/* 2026-08-28：鼠标点击不显示选中框（用户：切换松手后框选中态还出现）；键盘导航保留 focus-visible */
.shell-theme:focus{outline:none}
.shell-theme:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.shell-theme .tm-sun,.shell-theme .tm-moon{position:absolute;display:block;opacity:0;transform:scale(.55) rotate(-40deg);transition:opacity .22s var(--ease),transform .22s var(--ease);pointer-events:none}
.shell-theme[data-mode="light"] .tm-sun,html[data-theme="light"] .shell-theme[data-mode="auto"] .tm-sun{opacity:1;transform:none}
.shell-theme[data-mode="dark"] .tm-moon,html[data-theme="dark"] .shell-theme[data-mode="auto"] .tm-moon{opacity:1;transform:none}
.shell-theme[data-mode="auto"]{color:var(--ink)}
/* 主题切换过渡（JS 切换瞬间加 .theme-anim，300ms 后移除——避免全局 transition 长期干扰 hover/交互动效） */
html.theme-anim, html.theme-anim *{transition:background-color .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease,fill .28s ease,stroke .28s ease,opacity .28s ease,transform .28s ease !important}
/* 2026-08-28：header 虚线分隔栏（.shell-hd::after 伪元素——* 选择器不覆盖）主题切换同步渐变——
   与背景/内容同一节奏；修复线与背景渐变不同步（线抢跑/跳变，用户：分隔栏动效不好） */
html.theme-anim .shell-hd::after{border-top-color:var(--line);transition:border-top-color .28s ease}
/* 2026-08-28：移动端 tap 高亮去除（用户：手机端点击后选中框保持态——iOS/Android 点击灰/蓝覆盖层残留） */
*{-webkit-tap-highlight-color:transparent}
/* 2026-08-28：无 hover 设备（触屏）——hover 不粘滞，:active 按压时显示框、松手消失（用户：点击时要有框，松手消失）；
   触摸屏主页不显示「打开工具」（用户：触摸屏主页不要显示打开工具） */
@media (hover:none){
  .shell-theme:hover{border-color:var(--line-2);color:var(--ink-2)}
  .shell-theme:active{border-color:var(--ink-3);color:var(--ink);background:var(--hover-tint)}
}
.shell-toolname{font-size:var(--fs-body);font-weight:600;color:var(--ink-3);letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell-hd-right{display:flex;align-items:center;gap:12px;flex:none}

/* ============ 统一分类导航（首页 + 工具视图同一壳；P1-D） ============ */
.shell-nav{border-top:1px solid var(--line)}
/* R44R4-HF3：工具视图（body.tool-page）隐藏 header 分类导航——工具页已有
   breadcrumb（首页 › 分类 › 工具）作唯一导航层级，避免双导航重复（Owner 实机反馈）。 */
body.tool-page .shell-nav{display:none}
.shell-nav-in{display:flex;gap:4px;padding-top:6px;padding-bottom:6px}
.shell-nav-item{
  display:inline-flex;align-items:center;padding:7px 14px;border-radius:8px;
  font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;
  transition:background-color .14s var(--ease),color .14s var(--ease);
}
.shell-nav-item:hover{background:var(--hover-tint);color:var(--ink)}
.shell-nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shell-nav-item.on{color:var(--accent);background:var(--accent-soft)}
.shell-nav-item.fun.on{color:var(--fun);background:var(--fun-soft)}

.shell-main{min-height:60vh;flex:1 0 auto}
.shell-body{display:flex;flex-direction:column;min-height:100vh}
.shell-body:not(.tool-page) .shell-main{min-height:0;flex:0 0 auto}

/* ============ 全站页脚备案信息 ============ */
.site-footer{
  flex:0 0 auto;
  padding:16px var(--pad) 22px;
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}
.site-footer__records{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;max-width:1200px;margin:0 auto}
.site-footer__filings{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.site-footer__records:has(.site-footer__home-link){justify-content:space-between;flex-wrap:nowrap}
.shell-body:not(.tool-page) .site-footer{padding-top:24px}
.site-footer *{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}
.site-footer__icp{margin:0;font-family:Inter, system-ui, sans-serif;font-size:9px;font-weight:700;letter-spacing:.08em;line-height:1.6;color:var(--footer-record-ink)}
.site-footer__icp a{color:inherit;text-decoration:none}
.site-footer__icp a:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.site-footer__icp a:hover{text-decoration:underline;text-underline-offset:2px}
.site-footer__home-link{flex:0 0 auto;font-family:Inter, system-ui, sans-serif;font-size:9px;font-weight:700;letter-spacing:.08em;line-height:1.6;color:var(--footer-record-ink);text-decoration:none}
.site-footer__home-link:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.site-footer__home-link:hover{text-decoration:underline;text-underline-offset:2px}
.site-footer__police-slot{display:none;margin:0;font-family:Inter, system-ui, sans-serif;font-size:9px;font-weight:700;letter-spacing:.08em;line-height:1.6;color:var(--footer-record-ink)}

/* ============ 移动端分类导航（Accepted mtabs，≤1024px） ============ */
/* 基础隐藏规则必须位于 media query 之前（否则级联覆盖 media 的 display:block） */
.mtabs{display:none;position:sticky;top:var(--hd-h);z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}

.mtabs-in{display:flex;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.mtab{
  flex:1;text-align:center;text-decoration:none;color:var(--ink-2);font-size:14px;font-weight:600;
  padding:13px 4px 11px;border-bottom:2px solid transparent;transition:color .14s var(--ease),border-color .14s var(--ease);
}
.mtab:hover{color:var(--ink)}
.mtab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mtab.on{color:var(--accent);border-bottom-color:var(--accent)}
.mtab.fun.on{color:var(--fun);border-bottom-color:var(--fun)}
.mtab-search{
  flex:none;width:42px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-bottom:2px solid transparent;color:var(--ink-2);cursor:pointer;padding:0;
}
.mtab-search:hover{color:var(--accent)}
.mtab-search:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mtab-search svg{width:17px;height:17px;flex:none}


/* ============ 首页视图（R3 O1：唯一导航后内容全宽；P1-E：卡片一步直达） ============ */
.home-area{padding:40px 0 16px;max-width:1200px;margin:0 auto} /* 2026-08-28：工具区整体居中收缩（用户：电脑端主页工具部分往里收缩收缩；1040 太激进回调 1200） */
.idx{display:none}

.shelf{margin-bottom:76px;/* scroll offset 由 shell.js scrollTo 精确控制 */}
.home-area .shelf:last-child{margin-bottom:0}
/* 电脑比例：02 图片处理 / 03 趣味工具 区块整体上移 20px */
@media (min-width:1025px){
  #shelf-area .shelf:nth-child(2),
  #shelf-area .shelf:nth-child(3){margin-top:-20px}
  /* 2026-10-01：仅桌面主页备案文字累计下移 24px；工具页、404 和平板/手机不变 */
  .shell-body:not(.tool-page):has(.home-area) .site-footer__records{margin-top:24px}
  /* 桌面首页内容不足一屏时由主区吸收余量；短屏仍按文档流滚动，不悬浮遮挡。 */
  .shell-body:not(.tool-page):has(.home-area) .shell-main{flex:1 0 auto}
  .shell-body:not(.tool-page):has(.home-area) .site-footer{padding-bottom:16px}
}
.shelf-head{display:flex;align-items:baseline;gap:14px;margin-bottom:26px}
.ch-no{font-size:15px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:.3px}
.ch-title{font-size:var(--fs-ch);font-weight:800;letter-spacing:-.4px;line-height:1.2}
.ch-cnt{font-size:13px;color:var(--ink-3)}
.ch-rule{flex:1;height:1px;background:var(--line-2);align-self:center;min-width:24px}
.shelf.fun .ch-no{color:var(--fun)}
.shelf.fun .ch-rule{background:var(--fun-line)}

.items{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:48px;align-items:start}
.items::after{content:"";position:absolute;left:calc(50% - 24px);top:2px;bottom:2px;width:1px;background:var(--line)}
.shelf.t3 .items::after{display:none}
.shelf.t3 .item-wrap:nth-child(3){grid-column:1 / -1}
/* R3 O1：删左侧索引后内容全宽，宽屏 3 列提升密度（Benchmark：中密度网格，避免拉太长单列） */
@media (min-width:1281px){
  .items{grid-template-columns:1fr 1fr 1fr;column-gap:40px}
  .items::after{display:none}
  .shelf.t3 .item-wrap:nth-child(3){grid-column:auto}
  .shelf.t3 .item-wrap:nth-child(3) .item{border-bottom:1px solid var(--line)}
}

/* P1-E: 卡片主体 = 直达链接（无展开层、无二次 CTA） */
.item-wrap{position:relative}
.item{
  display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;
  text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line);
  padding:17px 14px 19px;border-radius:0;
  transition:background-color .14s var(--ease);
  position:relative;
}
/* 2026-08-28：工具入口按钮右侧 4px 主题绿圆点（用户：主页每一个工具入口按钮右侧加一个点）
   - 桌面：hover 才显示
   - 触屏（hover:none）：常显；绝对定位钉最右端 */
.item::after{
  content:"";position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--accent);
  opacity:0;transition:opacity .14s var(--ease);
}
.item:hover::after{opacity:1}
/* 触屏（hover:none）：圆点常显。媒体块须位于主规则之后（媒体查询不提升级联优先级，同特异性按源顺序） */
@media (hover:none){
  .item::after{opacity:1;transition:none}
}
.item .ic{color:var(--ink-2);flex:none;margin-top:1px;display:flex;transition:color .14s var(--ease)}
.item .ic svg{width:22px;height:22px}
.item .txt{min-width:0}
.item .nm{display:block;font-size:var(--fs-tool);font-weight:700;letter-spacing:-.2px;line-height:1.35;transition:color .14s var(--ease)}
.item .ds{display:block;font-size:var(--fs-desc);color:var(--ink-2);margin-top:3px;line-height:1.5}
.item:hover{background:var(--hover-tint)}
.item:hover .nm{color:var(--accent)}
.item:hover .ic{color:var(--accent)}
.item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
.shelf.fun .item:hover .nm{color:var(--fun)}
.shelf.fun .item:hover .ic{color:var(--fun)}

/* 未实现工具占位卡（Owner §8 强制保留：诚实 disabled、无假 CTA、不可进入）
   R4 RB-03：增强与可用卡片的视觉区分 —— 更低透明度 + 虚线边框，避免误认为可点 */
.item-unavail{
  display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;
  background:none;border:1px dashed var(--line-2);border-bottom:none;
  padding:17px 14px 10px;border-radius:8px;color:var(--ink);cursor:default;
  opacity:.42;
}
.item-unavail .nm{font-weight:700;font-size:var(--fs-tool);letter-spacing:-.2px;line-height:1.35}
.item-unavail .ds{font-size:var(--fs-desc);color:var(--ink-2);margin-top:3px;line-height:1.5}
/* R4.4R2 HY3-HOME2：补齐 .u-badge 基础规则（与 home.css 同语义）。
   shell 路由（app.py:334 index → shell.html）此前仅有下方 .item-unavail .u-badge 覆盖层，
   缺少基础规则，导致 badge 退化为 UA 默认 display:inline / margin-left:0 —— 标题紧贴
   「即将推出」、无间距、无胶囊边框（Owner 报告的首页薄弱环节）。基础规则提供
   inline-block + 14px 左间距 + 胶囊样式；下方覆盖层仅进一步弱化，互不冲突。 */
.u-badge{
  display:inline-block;margin-left:14px;font-size:11px;font-weight:600;letter-spacing:.3px;
  color:var(--ink-3);border:1px solid var(--line-2);border-radius:999px;padding:1px 9px;
  vertical-align:2px;white-space:nowrap;
}
/* R4.2 F1-001：占位卡内「即将推出」badge 进一步弱化（不与可用工具计数 badge 同级） */
.item-unavail .u-badge{opacity:.75;font-size:10px;color:var(--ink-3);border-color:var(--line-2);background:var(--paper)}
.unavail-inline{font-size:11.5px;color:var(--ink-3);padding:0 14px 14px;margin-top:0;line-height:1.5;opacity:.8}

/* ============ 工具视图（P1-F：共享 Tool Page 壳） ============ */
.tool-view{padding-top:0}
.tool-breadcrumb{
  display:flex;align-items:center;gap:8px;padding:22px var(--pad) 10px;
  font-size:13.5px;color:var(--ink-3);
}
.tool-breadcrumb a{text-decoration:none;color:var(--ink-2)}
.tool-breadcrumb a:hover{color:var(--accent)}
.tool-breadcrumb .tb-cat{color:var(--ink-3)}
.tool-breadcrumb .tb-tool{color:var(--ink);font-weight:600}

/* Tool Header（壳层唯一标题；面板内旧标题由 CSS 隐藏） */
.tool-view-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:4px var(--pad) 18px;border-bottom:1px solid var(--line);margin-bottom:26px;
}
.tool-view-title{min-width:0}
.tool-page-title{
  font-size:clamp(24px,2vw,30px);font-weight:800;letter-spacing:-.4px;
  color:var(--ink);line-height:1.2;
}
.tool-view-subtitle{font-size:15px;color:var(--ink-2);margin-top:6px;line-height:1.55}
.tool-view-badge{
  flex:none;font-size:12px;font-weight:600;color:var(--accent);
  border:1px solid var(--accent-line);border-radius:999px;padding:3px 12px;
  background:var(--accent-soft);white-space:nowrap;margin-top:6px;
}
.tool-view-badge[data-cat-badge="fun"]{color:var(--fun);border-color:var(--fun-line);background:var(--fun-soft)}
.tool-view-chips{display:flex;align-items:flex-start;gap:8px;flex:none;margin-top:6px}
.tool-view-chip{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:600;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:999px;padding:3px 12px;
  background:var(--surface);white-space:nowrap;
}
.tool-view-chip svg{width:13px;height:13px;color:var(--accent);flex:none}
.tool-view-body{margin-top:24px;padding-bottom:64px}

/* ============ 面板旧壳元素隐藏（P1-F：消除重复标题 / 旧 badge IA 残留 / 旧 status-bar） ============ */
.tool-view .tool-panel .tool-status-bar{display:none!important}
.tool-view .tool-panel .tool-header{display:none!important}
.tool-view .tool-panel .tool-badge{display:none!important}
/* R43R-022：隐藏旧 app-core 注入的固定悬浮 PWA 控制（清除离线缓存按钮，深色后台风格，侵入工作区）。
   维护动作不进普通工具流：id + 类 + 容器三重 !important，覆盖 app-core _ensurePwaNav 的 inline display:flex；
   能力保留：window.clearOfflineCache 仍全局可用，footer 提供次要文本入口（shell.html .ft-clear-cache）。 */
#tb-pwa-clear-cache,
.tsb-pwa-clear-btn,
.tsb-left{display:none!important}

/* ============ 工具面板组件（浅色，新版基因） ============ */
.tool-panel{background:transparent;border:none;padding:0;margin-bottom:32px}
.tool-status-bar{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--panel-ink-3);padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--panel-line)}
.tool-status-bar .tsb-home{cursor:pointer;color:var(--accent);font-weight:600;text-decoration:none}
.tool-status-bar .tsb-home:hover{text-decoration:underline}
.tool-status-bar .tsb-sep{color:var(--panel-ink-3)}
.tool-status-bar .tsb-current{color:var(--panel-ink);font-weight:600}
.tool-status-bar .tsb-queue{margin-left:auto;color:var(--panel-ink-3)}
.tool-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.tool-title h2{font-size:clamp(20px,1.6vw,24px);font-weight:800;letter-spacing:-.3px;color:var(--panel-ink)}
.tool-title p{font-size:14px;color:var(--panel-ink-2);margin-top:4px;line-height:1.6}
.tool-badge{flex:none;font-size:11.5px;font-weight:600;color:var(--accent);border:1px solid var(--accent-line);border-radius:999px;padding:2px 10px;background:var(--accent-soft);white-space:nowrap}
.card-title{font-size:13px;font-weight:700;color:var(--panel-ink-2);margin-bottom:10px}
.card-title span{font-weight:400;color:var(--panel-ink-3);margin-left:6px;font-size:12px}

/* buttons（统一控件语言，Owner §12） */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--accent);color:#fff;border:none;border-radius:var(--ctl-radius);
  padding:0 18px;height:var(--ctl-h);font-size:14px;font-weight:600;cursor:pointer;
  transition:background-color .14s var(--ease);
}
.btn-primary:hover{background:var(--accent-strong)}
.btn-primary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-primary:disabled{background:var(--panel-line-2);color:var(--panel-ink-3);cursor:not-allowed}
.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--surface);color:var(--ink);border:1px solid var(--panel-line-2);
  border-radius:var(--ctl-radius);padding:0 16px;height:var(--ctl-h);font-size:13.5px;font-weight:600;cursor:pointer;
  transition:border-color .14s var(--ease),background-color .14s var(--ease);
}
.btn-secondary:hover{border-color:var(--ink-3);background:var(--panel-hover)}
.btn-secondary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:none;color:var(--accent);border:1px solid var(--accent-line);
  border-radius:var(--ctl-radius);padding:0 14px;height:var(--ctl-h);font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background-color .14s var(--ease);
}
.btn-ghost:hover{background:var(--accent-soft)}
.btn-ghost:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:none;color:#C0392B;border:1px solid #E8B4AE;border-radius:var(--ctl-radius);
  padding:0 14px;height:var(--ctl-h);font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background-color .14s var(--ease);
}
.btn-danger:hover{background:rgba(192,57,43,.06)}
.btn-sm{padding:0 10px;height:32px;font-size:12.5px;border-radius:6px}
.btn-icon{width:var(--ctl-h);height:var(--ctl-h);padding:0;display:inline-flex;align-items:center;justify-content:center}
.btn-run{min-width:150px}
.btn-group{display:flex;flex-wrap:wrap;gap:8px}

/* forms（统一控件语言：form-group / form-row 归一为同一视觉）
   R4.3 RC-A：选择器从 [type=text|number|color] 改为「排除式全匹配」——
   无显式 type 的 input（如 GIF 页起始/时长）此前不匹配导致 19px 浏览器默认高度。 */
.form-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.form-row label{flex:none;min-width:92px;font-size:13px;color:var(--panel-ink-2)}
.form-row input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
.form-group input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
.form-row select,.form-group select{
  /* R4.3 RC-A：flex-basis 用 auto 而非 0%——移动端 form-row column 时 flex-basis 作用于主轴（高度），
     0% 会让 height:var(--ctl-h) 失效回落到内容高（19px）；auto 保持 height 生效 */
  flex:1 1 auto;min-width:0;background:var(--surface);border:1px solid var(--panel-line-2);border-radius:var(--ctl-radius);
  padding:0 12px;height:var(--ctl-h);font-size:13.5px;color:var(--panel-ink);outline:none;font-family:inherit;
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease);
}
.form-row input[type=color],.form-group input[type=color]{flex:none;width:42px;height:var(--ctl-h);padding:2px;border:1px solid var(--panel-line-2);border-radius:var(--ctl-radius);background:var(--surface);cursor:pointer}
.form-row textarea,.form-group textarea{height:auto;padding:10px 12px;min-height:88px}
.form-row input:focus,.form-group input:focus,.form-row select:focus,.form-group select:focus,.form-row textarea:focus,.form-group textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--panel-ring);
}
.form-hint{font-size:11.5px;color:var(--panel-ink-3);margin-top:4px}
/* R3 P3: range 控件统一（label + slider + 值回显对齐） */
.form-group input[type="range"],.form-row input[type="range"]{
  flex:1;min-width:0;accent-color:var(--accent);height:28px;margin:auto 0;align-self:center;
}
.range-val{font-size:12px;color:var(--panel-ink-2);font-variant-numeric:tabular-nums;min-width:38px;text-align:right;margin-left:8px}
.inline-pair{display:flex;gap:8px;flex:1;min-width:0}
.inline-pair input{flex:1;min-width:0}
/* R3 P3: inline-pair 内浏览按钮与输入框同高 */
.inline-pair .btn-ghost{height:var(--ctl-h);flex:none}
.field-error{color:#C0392B;font-size:12px;margin-top:4px}
.checkbox-label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--panel-ink-2);cursor:pointer}

/* dropzone（R3 O2：产品级统一状态） */
.dropzone{
  border:1.5px dashed var(--panel-line-2);border-radius:var(--panel-radius);background:var(--paper);
  padding:30px 18px;text-align:center;cursor:pointer;color:var(--panel-ink-2);
  transition:border-color .14s var(--ease),background-color .14s var(--ease);
}
.dropzone:hover,.dropzone.dragover{border-color:var(--accent);background:var(--accent-soft)}
.dropzone:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dropzone .dz-icon{display:flex;justify-content:center;color:var(--accent)}
.dropzone .dz-icon svg{width:28px;height:28px}
.dropzone .dz-main{display:block;font-size:15px;font-weight:600;color:var(--panel-ink);margin-top:9px}
.dropzone .dz-sub{display:block;margin-top:5px;font-size:12.5px;color:var(--panel-ink-3)}
.dropzone strong{display:block;font-size:15px;color:var(--panel-ink);font-weight:600;margin-top:9px}
.dropzone small{display:block;margin-top:5px;font-size:12.5px;color:var(--panel-ink-3)}
.file-list{list-style:none;margin-top:10px}
.file-list li{font-size:12.5px;color:var(--panel-ink-2);padding:4px 8px;border-bottom:1px solid var(--panel-line)}
.file-list li:last-child{border-bottom:none}

/* layouts（共享 workspace 骨架） */
.single-file-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sf-source,.sf-params,.sf-actions,.sf-preview,.sf-summary,.sf-result{min-width:0}
.sf-preview,.sf-summary,.sf-result{grid-column:1 / -1}
.content-gen-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cg-input,.cg-params,.cg-actions{min-width:0}
/* R3 P3: cg-preview 默认与 cg-input 并排（E 族生成结果小）；仅 live-preview（实时预览 img）需全宽 */
.cg-preview{min-width:0}
.cg-preview:has(.live-preview){grid-column:1 / -1}
.cg-section{background:var(--surface);border:1px solid var(--panel-line);border-radius:10px;padding:16px;margin-bottom:14px}
.cg-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* R3 P3: E 族（eva/xzk/fontfont）cg-label-group 裸控件统一（textarea/input/select 高度/宽度/圆角一致） */
.cg-input textarea,.cg-input input[type="text"],.cg-input input[type="number"],.cg-input select,
.cg-label-group + textarea,.cg-label-group + input,.cg-label-group + select{
  width:100%;background:var(--surface);border:1px solid var(--panel-line-2);border-radius:var(--ctl-radius);
  padding:0 12px;height:var(--ctl-h);font-size:13.5px;color:var(--panel-ink);outline:none;font-family:inherit;
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease);box-sizing:border-box;
}
.cg-input textarea{height:auto;padding:10px 12px;min-height:72px}
.cg-input textarea:focus,.cg-input input:focus,.cg-input select:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--panel-ring);
}
.cg-label-group{display:block;margin-bottom:6px}
.cg-label-main{display:block;font-size:13px;font-weight:600;color:var(--panel-ink-2);margin-bottom:4px}
.cg-label-hint{font-size:11.5px;color:var(--panel-ink-3);font-weight:400;margin-left:6px}
.text-gen-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tg-section{min-width:0}
.output-header{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--panel-ink-2);margin-bottom:10px}
.char-count{font-weight:400;font-size:12px;color:var(--panel-ink-3)}
.text-output{background:var(--paper);border:1px solid var(--panel-line);border-radius:10px;padding:14px;min-height:120px;font-size:13.5px;color:var(--panel-ink);white-space:pre-wrap;word-break:break-word}
.text-preview-empty{color:var(--panel-ink-3);font-size:13px}
.text-preview-result{color:var(--panel-ink);font-size:13.5px;line-height:1.6}
.output-actions{display:flex;gap:10px;margin-top:12px}
.source-card{background:var(--surface);border:1px solid var(--panel-line);border-radius:10px;padding:16px;margin-bottom:14px}
.source-advanced{margin-top:10px}
.source-advanced summary{font-size:13px;color:var(--accent);cursor:pointer;padding:4px 0}
.advanced-body{margin-top:8px;padding:10px;background:var(--paper);border-radius:8px;border:1px solid var(--panel-line)}

/* Shared Empty State / Preview（Owner §10：空态克制、不巨大空洞） */
.preview-box{background:var(--surface);border:1px solid var(--panel-line);border-radius:10px;padding:18px;min-height:90px;text-align:center;color:var(--panel-ink-3);font-size:13px;display:flex;align-items:center;justify-content:center}
.summary-text{font-size:13.5px;color:var(--panel-ink-2)}
/* 统一警示/提示条 */
.tool-notice,.alert.alert-warning{
  background:var(--warning-bg,#FBF3E2);border:1px solid var(--warning-border,#EAD9B0);
  border-radius:8px;padding:10px 14px;font-size:13px;color:#6B5B1E;margin-bottom:18px;line-height:1.6;
}
/* R3 P3: 文件摘要信息入卡（batch-rename #br-info 等裸文本容器） */
.sf-info{background:var(--surface);border:1px solid var(--panel-line);border-radius:10px;padding:12px 16px;margin-bottom:14px;font-size:13px;color:var(--panel-ink-2)}
/* R3 P3: file-card 图标统一（SVG symbol，替代旧 emoji） */
.file-card-icon{display:flex;align-items:center;justify-content:center;color:var(--accent)}
.file-card-icon svg{width:18px;height:18px}

/* responsive */
@media (max-width:1024px){
  .home-area{padding-top:34px}
  /* P3-1 修复：≤1024px 时 header 内分类导航隐藏，移动端用 mtabs（避免两层重复分类导航） */
  .shell-nav{display:none}
  .mtabs{display:block}
  .shelf{margin-bottom:64px;/* scroll offset 由 shell.js scrollTo 精确控制 */}
  .items{grid-template-columns:1fr}
  .items::after{display:none}
  .shelf.t3 .item-wrap:nth-child(3) .item,
  .shelf.t3 .item-wrap:nth-child(3) .det-inner{max-width:none}
  .shell-hd-right{flex:1;min-width:0;justify-content:flex-end}
  .single-file-layout,.content-gen-layout,.text-gen-layout{grid-template-columns:1fr}

}
/* R44R4-UI-01: ≤800px 布局精简（品牌区仅词标） */
/* 平板（641–1024px）：品牌字号与电脑版一致（clamp 2.5vw 在平板区间偏小，统一按电脑端 38px）；
   品牌位置按视口比例往左（≈40px，桌面 75px 的等比）；手机版（≤640）保持不动 */
@media (min-width:641px) and (max-width:1024px){
  :root{--fs-brand:38px}
  .shell-brand{padding-left:25px}
}
@media (max-width:640px){
  :root{--pad:20px;--content-maxw:100%;--hd-h:112px;--fs-ch:19px;--fs-tool:16px;--fs-desc:13px}
  .site-footer__records:has(.site-footer__home-link) .site-footer__filings{flex-direction:column;align-items:flex-start;gap:2px}
  .shell-hd-in{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;padding-bottom:12px}
  .shell-hd-right{flex:none;width:auto}
  /* 手机版：搜索框已删除（2026-08-28 全局移除）——header 右侧仅主题按钮 */
  .shell-nav-in{padding-top:4px;padding-bottom:4px;overflow-x:auto}
  .shell-nav-item{flex:none}
  .items{grid-template-columns:1fr}
  .items::after{display:none}
  .home-area{padding-top:24px;padding-left:12px;padding-right:12px}
  .shelf{margin-bottom:52px;/* scroll offset 由 shell.js scrollTo 精确控制 */}
  .shelf-head{gap:10px;margin-bottom:18px}
  .ch-rule{min-width:12px}
  .item{padding:15px 12px 17px}
  .tool-view-head{flex-direction:column;gap:10px}

  .tool-breadcrumb{flex-wrap:wrap}
  .form-row{flex-direction:column;align-items:stretch}
  .form-row label{min-width:0}
  .inline-pair{flex-direction:column}
  /* R3 P2-1：移动端主 CTA 始终可见 —— sticky bottom action（不遮内容，仅占底部一条） */
  .tool-actions{position:sticky;bottom:0;background:var(--paper);padding:10px 0;margin-top:12px;border-top:1px solid var(--line);z-index:40}
  .tool-actions .btn-primary{width:100%;min-height:46px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ============ Footer（统一；诚实计数由 shell.js 设置） ============ */
.shell-ft{border-top:1px solid var(--line);padding:30px 0 56px;text-align:center;font-size:var(--fs-meta);color:var(--ink-3)}
.shell-ft b{color:var(--ink-2);font-weight:600}
.shell-ft .ft-ver{margin-left:10px;opacity:.7}
/* R43R-022：清除离线缓存的 footer 次要文本入口（能力保留；工具页加载 app-core.js 后
   window.clearOfflineCache 可用；首页未加载 app-core.js 时 ?.() 静默无操作，不报错） */
.shell-ft .ft-clear-cache{
  background:none;border:none;padding:0;font:inherit;
  font-size:var(--fs-meta);color:var(--ink-3);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line-2);
}
.shell-ft .ft-clear-cache:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* 2026-08-28：气泡提示（toast）整体移除 —— 对应样式一并删除。
   window.toast 已置为空函数，不再产生 .toast / .toast-container 元素。 */

/* 内联状态文字（取代气泡的反馈形式）：位于页面正常流内，不 fixed、不浮层、不遮挡。
   R1.1.2：默认按浅色主题给轻量浅底配色（原深底色块在浅色面板中过于突兀）；
   暗色主题在下方 :root[data-theme="dark"] 覆盖回原深底，暗侧零变化。 */
.inline-status{display:none;margin:10px 0;padding:9px 13px;border-radius:8px;
  font-size:13px;line-height:1.5;border:1px solid transparent;word-break:break-word}
.inline-status.is-error{background:#fdf1f0;border-color:#efd2cf;color:#8f3b32}
.inline-status.is-success{background:#eef6f0;border-color:#cfe6d7;color:#2f6c46}
.inline-status.is-info{background:#f0f3f8;border-color:#dae0ea;color:#41577d}
.inline-status.is-warning{background:#fdf6e7;border-color:#eddfba;color:#8a6116}
:root[data-theme="dark"] .inline-status.is-error{background:#2d1215;border-color:#5e1a1a;color:#ffd9d2}
:root[data-theme="dark"] .inline-status.is-success{background:#0d2818;border-color:#1a5e33;color:#d9f2e6}
:root[data-theme="dark"] .inline-status.is-info{background:#141a2d;border-color:#2a3a5e;color:#dcedff}
:root[data-theme="dark"] .inline-status.is-warning{background:#2d1f08;border-color:#5e3a0a;color:#f0a040}
/* 工具面板内：提示条不整幅铺满，与面板内容卡片同宽居中（视觉与面板协调） */
.tool-panel > .inline-status{max-width:560px;margin-left:auto;margin-right:auto;text-align:center}

/* ============ 404 视图（R4.3R1 FIX-01） ============ */
.nf-wrap{padding:56px 0 80px}
.nf-card{
  max-width:460px;margin:0 auto;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:44px 32px;box-shadow:0 10px 30px rgba(26,29,35,.05);
}
.nf-code{font-size:64px;font-weight:700;line-height:1;letter-spacing:-2px;color:var(--line-2)}
.nf-title{margin:14px 0 8px;font-size:20px;color:var(--ink)}
.nf-desc{margin:0 0 24px;font-size:14px;line-height:1.6;color:var(--ink-3)}
.nf-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.nf-actions .btn-primary,.nf-actions .btn-secondary{min-height:40px;padding:0 20px;align-items:center;text-decoration:none}