/* ============================================================
 *  SYSTEM.CSS — 收敛层（最后一道）
 *
 *  存在的理由：前面 polish / polish-v4 / fx / refine / scaffold
 *  五层各自加效果，叠加到 54 个动画、9 种圆角、9 种阴影，
 *  视觉上表现为"乱"和"细节糙"。
 *
 *  这一层只做三件事：
 *    1. 减法 —— 关掉互相叠加的氛围动画，只保留一层；
 *    2. 令牌 —— 把圆角/阴影/边框/字号收敛成一套刻度；
 *    3. 秩序 —— 修正控件重叠、统一留白节奏。
 *
 *  纯 CSS，无副作用。想恢复某一层，删掉对应覆盖块即可。
 * ============================================================ */

/* ------------------------------------------------------------
 *  0. 设计令牌：全站只用这一套刻度
 * ---------------------------------------------------------- */
html.polish-v4.polish-ready {
  /* 圆角：4 档，不再出现第 5 种 */
  --sys-r-xs: 8px;
  --sys-r-sm: 12px;
  --sys-r-md: 16px;
  --sys-r-lg: 20px;
  --sys-r-pill: 999px;

  /* 阴影：3 档 */
  --sys-sh-1: 0 1px 2px rgba(0, 0, 0, .28);
  --sys-sh-2: 0 8px 24px -14px rgba(0, 0, 0, .78);
  --sys-sh-3: 0 20px 48px -24px rgba(0, 0, 0, .92);

  /* 描边：全部改为「实色」，不再用半透明白。
     原因：rgba(255,255,255,.15) 叠在深底上实际只有 ~rgb(50,50,50)，
     且随底色深浅浮动，边界始终发虚。改用实色后描边值可预期，
     对齐参考站实测值 rgb(61,61,61)（= rgba(255,255,255,.24) 的等效实色）。 */
  --sys-line: #3d3d3d;                /* 基础描边：工具卡/画廊卡/chip */
  --sys-line-strong: #565656;         /* 强调描边：按钮/箭头/输入框 */
  --sys-line-accent: rgb(207, 140, 58);        /* 品牌橙实色：悬停 */
  --sys-line-accent-strong: #ffb45a;  /* 高亮橙：选中/聚焦 */

  /* 表面：2 档（同步略微提亮，让卡片与背景拉开层次） */
  --sys-surface-1: rgba(255, 255, 255, .038);
  --sys-surface-2: rgba(255, 255, 255, .072);

  /* 间距节奏：8 的倍数 */
  --sys-gap-1: 8px;
  --sys-gap-2: 16px;
  --sys-gap-3: 24px;
  --sys-gap-4: 32px;
  --sys-gap-5: 48px;
  --sys-gap-6: 72px;

  /* 唯一强调色 */
  --sys-accent: #ffb45a;

  /* 框架主色令牌覆写：框架在 :root / .dark 上把 --ui-primary 设成了
     青色（#00AFC1 / #00C2D6），全站 18 处消费它（登录页渐变形副标题、
     登录 Tab 下划线、协议链接、各功能页选中态……）。
     这里统一改成 logo 琥珀橙，与 --sys-accent 同源，杜绝残余青色。 */
  --ui-primary: #b5701f;              /* 浅色底：白底 CR≈4.6:1 */

  /* 动效时长：统一节奏 */
  --sys-dur: .28s;
  --sys-ease: cubic-bezier(.22, 1, .36, 1);

  color-scheme: dark;
}
/* 深色主题：框架 .dark 上的青色主色 → 亮琥珀 */
html.polish-v4.polish-ready.dark,
html.polish-v4.polish-ready.theme-dark-workspace {
  --ui-primary: #ffb45a;              /* 深色底：CR≈11:1 */
}
html.polish-v4.polish-ready:not(.dark) {
  /* 浅色底同样改实色描边，保证边界清晰且不随底色浮动。
     2026-10-21：描边/阴影/文字全部从冷蓝灰改为暖纸色（见 light.css §1） */
  --sys-line: #e4daca;
  --sys-line-strong: #cdbfa8;
  --sys-line-accent: #cf8c3a;
  --sys-line-accent-strong: #b5701f;
  --sys-surface-1: rgba(96, 70, 38, .035);
  --sys-surface-2: rgba(96, 70, 38, .07);
  --sys-sh-2: 0 8px 22px -16px rgba(74, 52, 24, .20);
  --sys-sh-3: 0 18px 40px -26px rgba(74, 52, 24, .24);

  /* 文字三级：浅色下必须显式给值，
     否则引用 --sys-t2 的规则会拿到空值而失效。
     与 light.css 里覆写的 --ui-text-* 保持同一套暖墨色。 */
  --sys-t1: #1f1910;
  --sys-t2: #5b5042;
  --sys-t3: #857764;
  color-scheme: light;
}

/* ============================================================
 *  1. 减法：把 5 层背景噪声压到 1 层
 *  保留：极光（唯一氛围） + 静态网格 + 静态噪点
 *  关闭：粒子、光环、网格漂移、噪点抖动、34 张卡片浮动
 * ============================================================ */

/* ① 漂浮粒子 —— 关。与极光重复，属于噪声叠加 */
html.polish-ready body::before {
  display: none !important;
  animation: none !important;
}

/* ② 旋转光环 —— 关。24 个动画里的最后 1 个冗余 */
html.polish-ready body::after {
  display: none !important;
  animation: none !important;
}

/* ③ 网格线：保留，但从 40s 循环漂移改为完全静止，透明度再降 */
html.polish-v4 .pv4-bgfx::before {
  animation: none !important;
  opacity: .5 !important;
}

/* ④ 胶片噪点：保留质感，但停掉 8s 位移抖动（这是细碎闪烁的主因） */
html.polish-v4 .pv4-bgfx::after {
  animation: none !important;
  opacity: .018 !important;
}
html.polish-v4:not(.dark) .pv4-bgfx::after { opacity: .026 !important; }

/* ⑤ 鼠标聚光：保留"活"感但收窄，避免跟随时整块背景泛青 */
html.polish-v4 .pv4-spot {
  width: 520px !important;
  height: 520px !important;
  margin: -260px 0 0 -260px !important;
  background: radial-gradient(circle at 50% 50%,
      rgba(207, 140, 58, .038),
      rgba(207, 140, 58, .014) 42%,
      transparent 70%) !important;
}

/* ⑥ 极光：三层 → 一层，速度放慢一档 */
html.polish-ready .polish-aurora .p-b2,
html.polish-ready .polish-aurora .p-b3 {
  opacity: 0 !important;
  animation: none !important;
}
html.polish-ready .polish-aurora .p-b1 {
  animation-duration: 96s !important;
  opacity: .55 !important;
}
html.polish-ready:not(.dark) .polish-aurora .p-b1 { opacity: .3 !important; }

/* ⑦ 卡片浮动：34 张卡各自上下浮 = 页面永远在动。
      完全关闭，只保留 hover 的静态抬升。 */
html.polish-v4.polish-ready .guide-tool-card,
html.polish-v4.polish-ready .guide-gallery-card {
  animation: p-rise !important;
}
html.polish-v4.polish-ready .guide-tool-card { translate: none !important; }
html.polish-v4.polish-ready .guide-gallery-card { translate: none !important; }

/* ⑧ 标题流光：保留（这是最有效的一个），放慢 */
html.polish-ready .guide-copy.polish-shine-title {
  animation-duration: 12s !important;
}

/* ⑨ 跑马灯：保留（单元素横向运动，提供方向感），放慢 */
html.polish-ready .polish-marquee-track {
  animation-duration: 58s !important;
}

/* ⑩ 按钮扫光：限流，避免常亮 */
html.polish-v4 .pv4-btn-sweep,
html.polish-ready .polish-shine {
  animation-duration: 9s !important;
}

/* ============================================================
 *  2. 令牌收敛：把 9 种圆角 / 9 种阴影归一
 * ============================================================ */

/* 卡片：统一 --sys-r-md + 两档阴影 */
html.polish-v4.polish-ready .guide-tool-card,
html.polish-v4.polish-ready .guide-gallery-card,
html.polish-v4.polish-ready .guide-swiper-stage {
  border-radius: var(--sys-r-md) !important;
  box-shadow: var(--sys-sh-2) !important;
}
html.polish-v4.polish-ready .guide-tool-card:hover,
html.polish-v4.polish-ready .guide-gallery-card:hover {
  box-shadow: var(--sys-sh-3) !important;
}

/* 描边统一 */
html.polish-v4.polish-ready .guide-tool-card,
html.polish-v4.polish-ready .guide-gallery-card {
  border: 1px solid var(--sys-line) !important;
}
/* 悬停：换成品牌青描边，与截图里「开始创作」的强调方式一致 */
html.polish-v4.polish-ready .guide-tool-card:hover,
html.polish-v4.polish-ready .guide-gallery-card:hover {
  border-color: var(--sys-line-accent) !important;
}

/* 胶囊类统一（分类 chip、跑马灯项）
   注：.guide-hot-tag 不在此列——它已按组件原版复刻（实心渐变直角角标），
   由 refine.css 的专属规则接管，不受这里的 box-shadow:none 影响。 */
html.polish-v4.polish-ready .guide-category-list button,
html.polish-v4.polish-ready .polish-mq-item {
  border-radius: var(--sys-r-pill) !important;
  box-shadow: none !important;
}
/* 画廊卡的作者节点与「查看」按钮已单独设计（小圆角方钮），
   不并入上面的胶囊体系，避免被 --sys-r-pill 覆盖成大圆角。 */
html.polish-v4.polish-ready .guide-gallery-author {
  display: none !important;
}
html.polish-v4.polish-ready .guide-gallery-meta button {
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* 小元件统一小圆角 */
html.polish-v4.polish-ready .guide-tool-arrow,
html.polish-v4.polish-ready .guide-icon-btn,
html.polish-v4.polish-ready .navBarBox img {
  border-radius: var(--sys-r-xs) !important;
}

/* 搜索框：与 chip 同体系 */
html.polish-v4.polish-ready .guide-search {
  border-radius: var(--sys-r-pill) !important;
  border: 1px solid var(--sys-line) !important;
  background: var(--sys-surface-1) !important;
  box-shadow: none !important;
  transition: border-color var(--sys-dur) var(--sys-ease),
              background var(--sys-dur) var(--sys-ease),
              box-shadow var(--sys-dur) var(--sys-ease) !important;
}
/* 聚焦态：只让「容器」发一次极淡的外发光，不再叠加内层描边光圈 */
html.polish-v4.polish-ready .guide-search:focus-within {
  border-color: rgba(255, 180, 90, .34) !important;
  background: var(--sys-surface-2) !important;
  box-shadow: 0 0 0 3px rgba(255, 180, 90, .10) !important;
}
html.polish-v4.polish-ready .guide-search input {
  font-size: 13.5px !important;
  color: rgba(255, 255, 255, .88) !important;
}
html.polish-v4:not(.dark) .guide-search input { color: #0a222a !important; }
/* 搜索图标：聚焦时提亮一档，作为「已激活」的静态提示（不吃 hover） */
html.polish-v4.polish-ready .guide-search img {
  opacity: .55 !important;
  transition: opacity var(--sys-dur) var(--sys-ease) !important;
}
html.polish-v4.polish-ready .guide-search:focus-within img { opacity: 1 !important; }

/* CTA 按钮：28px 圆角改为胶囊，与顶栏按钮同语言 */
html.polish-v4.polish-ready .guide-actions button,
html.polish-v4.polish-ready .guide-primary-action,
html.polish-v4.polish-ready .guide-secondary-action {
  /* 圆角与登录/注册按钮一致（10px）。原为胶囊 999px，
     在 44px 高的按钮上显得过于圆润，与顶栏的方角小钮不属一套语言。 */
  border-radius: 10px !important;
  height: 44px !important;
  padding: 0 30px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  box-shadow: var(--sys-sh-2) !important;
  transition: transform var(--sys-dur) var(--sys-ease),
              box-shadow var(--sys-dur) var(--sys-ease),
              border-color var(--sys-dur) var(--sys-ease) !important;
}
/* 主 CTA：参照参考站做法——透明底 + 青色描边 + 青色内发光，
   靠描边而不是填充建立层级（浅灰实心底反而抢了主 CTA 的权重）。 */
html.polish-v4.polish-ready .guide-primary-action {
  border: 1px solid var(--sys-line-accent) !important;
  background: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(207, 140, 58, .12) !important;
  color: #fff !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-primary-action {
  border-color: #cf8c3a !important;
  background: transparent !important;
  box-shadow: inset 0 0 0 1px rgba(181, 112, 31, .14) !important;
  color: #0a222a !important;
}
html.polish-v4.polish-ready .guide-primary-action:hover {
  border-color: #ffb45a !important;
}
/* 次 CTA：透明底 + 中性实色描边，与主 CTA 靠"描边色"区分层级 */
html.polish-v4.polish-ready .guide-secondary-action {
  background: transparent !important;
  border: 1px solid var(--sys-line) !important;
  color: rgba(255, 255, 255, .88) !important;
}
html.polish-v4:not(.dark) .guide-secondary-action { color: rgba(10, 34, 42, .80) !important; }
html.polish-v4.polish-ready .guide-actions button:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--sys-sh-3) !important;
}

/* 轮播指示点：统一为细长胶囊 */
html.polish-v4.polish-ready .guide-swiper-dots button {
  width: 18px !important;
  height: 3px !important;
  border-radius: var(--sys-r-pill) !important;
  background: rgba(255, 255, 255, .20) !important;
  transition: width var(--sys-dur) var(--sys-ease),
              background var(--sys-dur) var(--sys-ease) !important;
}
html.polish-v4.polish-ready .guide-swiper-dots button.active {
  width: 30px !important;
  background: var(--sys-accent) !important;
}

/* 两侧预览图：圆角对齐横幅 */
html.polish-v4.polish-ready .guide-side-slide {
  border-radius: var(--sys-r-md) !important;
}

/* 顶栏/按钮：统一中圆角 */
html.polish-v4.polish-ready .vipIconWrap .guide-header-btn,
html.polish-v4.polish-ready .vipIconWrap .guide-login-btn {
  border-radius: var(--sys-r-pill) !important;
}

/* ============================================================
 *  3. 秩序：修正控件重叠
 * ============================================================ */

/* ③.1 主题钮与回顶钮在右下角交叠 —— 改为纵向排列，互不遮挡 */
#tt-toggle {
  bottom: 26px !important;
  right: 26px !important;
}
html.polish-v4 .pv4-top {
  bottom: 92px !important;
  right: 30px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--sys-r-pill) !important;
  background: rgba(20, 24, 28, .78) !important;
  border: 1px solid var(--sys-line) !important;
  backdrop-filter: blur(18px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5) !important;
  box-shadow: var(--sys-sh-2) !important;
  transition: opacity var(--sys-dur) var(--sys-ease),
              transform var(--sys-dur) var(--sys-ease) !important;
}
html.polish-v4:not(.dark) .pv4-top {
  background: rgba(255, 255, 255, .86) !important;
  border-color: var(--sys-line) !important;
  box-shadow: var(--sys-sh-2) !important;
}
html.polish-v4 .pv4-top:hover {
  border-color: rgba(255, 180, 90, .36) !important;
  transform: translateY(-2px) !important;
}

/* ③.2 主题钮：视觉全部交给 theme-toggle.css（该文件在 head 末尾加载）。
   这里只保留定位。旧版在此用 !important 写死 44px 胶囊 + padding:0 8px，
   是「图标不在圆圈中间」的成因之一（gap:9px 与标签 0 宽共存把图标挤偏），
   已整体撤掉，避免与控件自身的样式互相打架。 */

/* ③.3 双层 tab：主 tab（绘图/视频/短视频）与次 chip 拉开层级 */
html.polish-v4.polish-ready .guide-tabs {
  gap: 30px !important;
  border-bottom: 1px solid var(--sys-line) !important;
  padding-bottom: 2px !important;
}
html.polish-v4.polish-ready .guide-tabs button {
  position: relative;
  padding-bottom: 12px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, .40) !important;
  transition: color var(--sys-dur) var(--sys-ease) !important;
}
html.polish-v4.polish-ready .guide-tabs button:hover {
  color: rgba(255, 255, 255, .74) !important;
}
html.polish-v4.polish-ready .guide-tabs button.active {
  color: #fff !important;
  font-weight: 600 !important;
}
html.polish-v4.polish-ready .guide-tabs button.active::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg,
      rgba(255, 180, 90, 0),
      var(--sys-accent) 30%,
      var(--sys-accent) 70%,
      rgba(255, 180, 90, 0)) !important;
}
/* 非选中态在深底上实测 CR 3.8，提到 .62 一档 */
html.polish-v4.polish-ready .guide-tabs button { color: rgba(255, 255, 255, .62) !important; }
html.polish-v4:not(.dark) .guide-tabs button { color: var(--sys-t2) !important; }
html.polish-v4:not(.dark) .guide-tabs button:hover { color: var(--sys-t1) !important; }
html.polish-v4:not(.dark) .guide-tabs button.active { color: var(--sys-t1) !important; }

/* 次级 chip：对齐参考站做法——未选中态「无边框无底色」，仅靠文字亮度区分；
   给每个 chip 都加框会让这一排显得又碎又乱。选中态用实心深灰底（rgb(49,51,56)）。 */
html.polish-v4.polish-ready .guide-category-list button {
  height: 30px !important;
  padding: 0 15px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, .52) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: color var(--sys-dur) var(--sys-ease),
              border-color var(--sys-dur) var(--sys-ease),
              background var(--sys-dur) var(--sys-ease) !important;
}
html.polish-v4.polish-ready .guide-category-list button:hover {
  color: rgba(255, 255, 255, .82) !important;
  border-color: var(--sys-line) !important;
}
html.polish-v4.polish-ready .guide-category-list button.active {
  color: #fff !important;
  background: #313338 !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}
html.polish-v4:not(.dark) .guide-category-list button { color: rgba(10, 34, 42, .52) !important; }
html.polish-v4:not(.dark) .guide-category-list button.active {
  color: #fff !important;
  background: #0f8f9f !important;
  border-color: transparent !important;
}

/* ============================================================
 *  4. 留白节奏：统一模块间距
 * ============================================================ */
html.polish-v4.polish-ready .guide-tools { padding-top: 40px !important; }
html.polish-v4.polish-ready .guide-inspiration { padding-top: 40px !important; }

/* 卡片之间的呼吸统一 */
html.polish-v4.polish-ready .guide-tool-list { gap: 14px !important; }

/* ④ 版心：.guide-page 是固定高 + overflow:hidden 的舞台，
   内容超出就被裁掉 —— 表现为"最后一行卡片被切、页脚被压上来"。
   放开高度约束，让内部 .guide-scrollbar 自己滚。 */
html.polish-v4.polish-ready .guide-page {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: visible !important;
}

/* 页脚：与最后一行卡片保持适度间距。
   结构：.guide-copyright（flex 兄弟节点） > .copy-container（position:absolute）
   绝对定位元素的 margin/padding 不撑高父级，因此要改父容器 min-height。
   构成：上间距 32 + 文字区 36 + 下间距 24 ≈ 92px。
   跑马灯移入后：32 + 跑马灯 30 + 间距 14 + 版权区 44 ≈ 120px。 */
html.polish-v4.polish-ready .guide-copyright {
  position: relative !important;
  height: auto !important;
  /* 112 → 128：容纳跑马灯（30）后仍有 8px 下呼吸；
     小于内容高度会在页面底部露出 html 黑底（"黑条"） */
  min-height: 128px !important;
  flex: 0 0 auto !important;
}
/* 分割线：灵感画廊（上方图片）与页脚跑马灯之间的一条发丝线。
   注意：polish.css 旧规则给 ::before 设了 width:min(68vw,680px)+margin:0 auto，
   绝对定位下 left/right/width 过约束时 width 胜出，会缩成居中一小段，
   必须显式 width:auto + margin:0 才能拉满整宽。 */
html.polish-v4.polish-ready .guide-copyright {
  position: relative !important;
}
html.polish-v4.polish-ready .guide-copyright::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  margin: 0 !important;
  height: 1px !important;
  pointer-events: none !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 180, 90, .22) 18%,
    rgba(255, 180, 90, .22) 82%,
    transparent 100%) !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-copyright::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(181, 112, 31, .30) 18%,
    rgba(181, 112, 31, .30) 82%,
    transparent 100%) !important;
}
/* .copy-container 框架写死 height:80px 且是 flex 列容器：
   跑马灯作为 flex item（flex:0 1 auto）会被压缩到 31px，
   而轨道本身高 30px + 上下 padding 20px → 底部被裁掉 10px（只露 2/3）。
   放开高度并解除压缩，跑马灯才能完整显示。 */
html.polish-v4.polish-ready .copy-container {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  /* 2026-10-20：原 32px 让版权分隔线离最后一行画廊只有 32px（像压在图上）
     2026-10-21：线（.guide-copyright::before）定为 top:40px，
     这里再往下 16px 到 80px，保证"线 → 标签行"有 24px 呼吸，不与标签贴住 */
  top: 80px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.polish-v4.polish-ready .copy-container .polish-marquee {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 30px !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
}
html.polish-v4.polish-ready .copy-container .copyright-info {
  margin-top: 0 !important;
  /* 2026-10-21：这里不再画线。真正的分隔线是 .guide-copyright::before
     （琥珀渐变线，见文件末尾），避免出现"两条线"。
     上下留白严格对称（用户要求：以页脚黑条上边缘为基准，而不是"上方文字底部"）：
     原 28 / 43 —— 上 32 vs 下 43，视觉上"下面空了一大截"。
     改为 28 / 28：黑条上边缘 → 文字 = 32px，文字 → 页面底部黑边 = 31px，两段一致。 */
  padding: 28px 0 28px !important;
  border-top: 0 !important;
}
html.polish-v4.polish-ready .copy-container .copyright-info::after { opacity: .45 !important; }

/* 章节编号与标题：统一基线，间距一致 */
html.polish-v4.polish-ready .guide-tools .pv4-eyebrow,
html.polish-v4.polish-ready .guide-inspiration .pv4-eyebrow {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  /* .34 透明度在 #0D0D0E 上实测 CR 仅 3.06（不达 AA），
     提到 .52 一档；子 span 继承同一色，靠第三条 span 的 inline opacity:.55 拉开层次 */
  color: rgba(255, 255, 255, .52) !important;
  margin-bottom: 14px !important;
}

/* ============================================================
 *  5. 细节打磨：把"糙"的地方收掉
 * ============================================================ */

/* 5.1 全局字体渲染与文字层级 */
html.polish-v4.polish-ready body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 5.1b Hero 副标题：强制单行
   起因：refine.css 给 .guide-copy p 设了 max-width:580px，
   而 .guide-page 整体有 zoom 缩放（实测 hero 版心仅 1065px @1440 视口），
   580px 的框放不下这句 41 个字 → 必然折成两行。
   改法：宽度跟随版心（max-width:none + width:max-content），
        并在版心确实不够的窄屏（≤1180px）再降级为正常折行，
        避免溢出裁切。深浅两态共用。 */
html.polish-v4.polish-ready .guide-copy p {
  max-width: none !important;
  width: max-content !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  line-height: 1.7 !important;
}
@media (max-width: 1180px) {
  html.polish-v4.polish-ready .guide-copy p {
    width: auto !important;
    max-width: 620px !important;
    white-space: normal !important;
  }
}

/* 5.2 画廊卡文字：统一两行截断，避免长短不齐 */
html.polish-v4.polish-ready .guide-gallery-card > p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.55 !important;
  font-size: 12.5px !important;
  color: rgba(255, 255, 255, .68) !important;
}
/* 5.3 画廊卡作者节点已从模板移除（用户要求删除全部「用户昵称」），此处保留隐藏兜底 */
html.polish-v4.polish-ready .guide-gallery-author {
  display: none !important;
}

/* 5.3 工具卡名称：横版布局下允许两行，最多两行后省略 */
html.polish-v4.polish-ready .guide-tool-card strong,
html.polish-v4.polish-ready .guide-tool-card .guide-tool-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .01em !important;
  max-width: 128px !important;
}

/* 5.4 卡片索引号：降到可忽略的层级 */
html.polish-v4.polish-ready .guide-tool-card::before {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  color: rgba(255, 255, 255, .34) !important;
}
html.polish-v4:not(.dark) .guide-tool-card::before {
  color: rgba(10, 34, 42, .30) !important;
}

/* 5.5 工具卡：还原原始横版规格（不被 2.x 节的通用卡片规则污染） */
html.polish-v4.polish-ready .guide-tool-card {
  flex: 0 0 225px !important;
  width: 225px !important;
  min-width: 225px !important;
  height: 127px !important;
  padding: 22px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  border-radius: 15px !important;
}
html.polish-v4.polish-ready .guide-tool-card img {
  position: static !important;
  inset: auto !important;
  width: 66px !important;
  height: 58px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}
@media (max-width: 920px) {
  html.polish-v4.polish-ready .guide-tool-card {
    flex: 0 0 196px !important;
    width: 196px !important;
    min-width: 196px !important;
    height: 116px !important;
    padding: 20px 16px !important;
  }
  html.polish-v4.polish-ready .guide-tool-card img { width: 54px !important; height: 48px !important; }
  html.polish-v4.polish-ready .guide-tool-card strong { max-width: 104px !important; font-size: 14px !important; }
}

/* 5.6 hover：只做静态抬升，不再叠缩放（缩放会让图片糊） */
html.polish-v4.polish-ready .guide-tool-card:hover,
html.polish-v4.polish-ready .guide-gallery-card:hover {
  transform: translateY(-3px) !important;
  transition: transform var(--sys-dur) var(--sys-ease),
              box-shadow var(--sys-dur) var(--sys-ease),
              border-color var(--sys-dur) var(--sys-ease) !important;
}

/* 5.6 焦点可见性统一（键盘可达性）
   注意：这里必须排除「本身已有可见焦点样式」的控件，否则会出现框中框：
     - .guide-searchinput  —— 外层胶囊容器已用 focus-within 发光，
                             input 再套outline 会形成难看的双层方框；
     - .inpBox input      —— 登录页输入框，同样由外层容器负责聚焦反馈
                             （login-theme.css：边框转色 + 外发光），
                             再套 2px 描边就是用户反馈的"橙色丑方框"；
     - .modelBox .search  —— 后台功能区菜单上方的搜索框（input 自身即 .search，
                             由 workspace-theme.css 统一成登录输入框的胶囊 +
                             琥珀发光）。此前漏排，导致聚焦时被这条规则同时
                             压上 2px 描边和 8px 圆角，既刺眼又把胶囊打回方角；
     - 按钮/卡片类—— 有自己的 hover 与边框反馈。
   键盘聚焦（:focus-visible）仍保留 outline，仅排除这些已自处理的场景。

   2026-10 补充修正（用户反馈"橙色线条与输入框不协调 / 方形描边"）：
   A. 去掉 border-radius: 8px 的强制覆盖。描边必须跟随控件自身圆角，
      强制 8px 会把胶囊输入框、15px 圆角卡片里的输入框"打回方角"，
      这正是描边与被框住的控件形状对不上的直接原因。
   B. 继续排除「聚焦反馈由外层容器负责」的复合输入控件，否则永远
      是"框中框"：内层一条 2px 橙线嵌在大圆角容器里，既不对齐也不协调。
        - .n-input__textarea-el —— 大模型/聊天页输入区（naive-ui textarea，
          外层 .inpBox 卡片负责边框与发光）
        - .n-input__input-el    —— naive-ui 单行输入
        - .inputBg              —— 知识库搜索框（外层 .inputOut 负责）
        - .search-box input     —— 个人中心搜索框（外层 .search-box 负责）
       （.rich-editor 是单行富文本，自身 8px 圆角就是它的真实形状，
        去掉上面的圆角强制覆盖后描边已能贴合，故继续保留键盘焦点描边。） */
html.polish-v4.polish-ready :focus-visible:not(.guide-search input):not(.inpBox input):not(.modelBox .search):not(.n-input__textarea-el):not(.n-input__input-el):not(.inputBg):not(.search-box input) {
  outline: 2px solid rgba(255, 180, 90, .55) !important;
  outline-offset: 2px !important;
}

/* 5.6b 上面被排除掉的控件，统一由外层容器给出聚焦反馈：
       边框转琥珀 + 一圈 3px 极淡外发光（与 .guide-search / .inpBox 同参数）。
       容器圆角原本就是对的，发光自然贴合，不会再出现"方形橙框"。 */
html.polish-v4.polish-ready .inputOut,
html.polish-v4.polish-ready .search-box {
  transition: border-color var(--sys-dur) var(--sys-ease),
              box-shadow var(--sys-dur) var(--sys-ease) !important;
}
html.polish-v4.polish-ready .inputOut:focus-within,
html.polish-v4.polish-ready .search-box:focus-within {
  border-color: rgba(255, 180, 90, .34) !important;
  box-shadow: 0 0 0 3px rgba(255, 180, 90, .10) !important;
}
html.polish-v4.polish-ready:not(.dark) .inputOut:focus-within,
html.polish-v4.polish-ready:not(.dark) .search-box:focus-within {
  border-color: rgba(181, 112, 31, .42) !important;
  box-shadow: 0 0 0 3px rgba(181, 112, 31, .10) !important;
}

/* 5.6c naive-ui 的 .n-input 自身没有可见聚焦反馈（边框 0、无阴影），
       禁掉内层 outline 后必须补一个：内描边 1px 琥珀 + 3px 柔光，
       圆角由控件自己决定（弹窗里 12px、卡片里 15px 都自动贴合）。
       聊天输入区例外——它由外层 .inpBox 卡片统一表达聚焦（见 login-theme.css），
       这里再画一圈就又是"框中框"了。 */
html.polish-v4.polish-ready .n-input.n-input--focus:not(.inpBox .n-input) {
  box-shadow: inset 0 0 0 1px rgba(255, 180, 90, .45),
              0 0 0 3px rgba(255, 180, 90, .08) !important;
  transition: box-shadow var(--sys-dur) var(--sys-ease) !important;
}
html.polish-v4.polish-ready:not(.dark) .n-input.n-input--focus:not(.inpBox .n-input) {
  box-shadow: inset 0 0 0 1px rgba(181, 112, 31, .50),
              0 0 0 3px rgba(181, 112, 31, .08) !important;
}

/* 5.7 尊重「减少动态」 */
@media (prefers-reduced-motion: reduce) {
  html.polish-v4.polish-ready *,
  html.polish-v4.polish-ready *::before,
  html.polish-v4.polish-ready *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ============================================================
 *  6. 描边可见性收口（最后一层兜底）
 *     问题：深色底上大量元素沿用 rgba(255,255,255,.055~.07)，
 *     与 rgb(13,13,14) 底色仅差 2~3 级灰阶，卡片/按钮/分隔线
 *     全部"糊"进背景，元素边界读不出来。
 *     做法：先按语义分档（基础 / 强调 / 主CTA / 焦点），
 *     再统一在此兜底，避免遗漏散落在组件样式里的弱描边。
 * ============================================================ */

/* 6.1 主 CTA：常态已在 5.x 段按参考站做法设定（透明底 + 青色实色描边 + 内发光），
     此处只补悬停时的青色辉光，不重复常态描边。 */
html.polish-v4.polish-ready .guide-primary-action:hover {
  border-color: #ffb45a !important;
  box-shadow:
    inset 0 0 0 1px rgba(207, 140, 58, .24),
    0 14px 38px -14px rgba(255, 180, 90, .50) !important;
  transition: border-color var(--sys-dur) var(--sys-ease),
              box-shadow var(--sys-dur) var(--sys-ease),
              background var(--sys-dur) var(--sys-ease) !important;
}

/* 6.2 次要 CTA：常态描边已在 5.x 段设定为 var(--sys-line)，此处只补悬停 */
html.polish-v4.polish-ready .guide-secondary-action:hover {
  border-color: var(--sys-line-strong) !important;
}

/* 6.3 分类 chip：已在 5.x 段按参考站做法处理（未选中无框、选中实心底），
   此处不再重复描边，避免把chip 又框起来。 */

/* 6.4 工具卡/ 画廊卡内的图标与箭头按钮：描边提一档，保证可点性 */
html.polish-v4.polish-ready .guide-tool-arrow,
html.polish-v4.polish-ready .guide-icon-btn {
  border: 1px solid var(--sys-line-strong) !important;
  transition: border-color var(--sys-dur) var(--sys-ease),
              background var(--sys-dur) var(--sys-ease) !important;
}
html.polish-v4.polish-ready .guide-tool-arrow:hover,
html.polish-v4.polish-ready .guide-icon-btn:hover {
  border-color: var(--sys-line-accent) !important;
}

/* 6.5 卡片阴影：参考站是「纯描边、无 inset 高光、无投影」。
     inset 顶部高光会在描边内侧再画一条亮线，反而把描边冲淡、边界读不清，
     这里去掉，靠实色描边本身建立轮廓；悬停时才给青色辉光。 */
html.polish-v4.polish-ready .guide-tool-card,
html.polish-v4.polish-ready .guide-gallery-card {
  box-shadow: var(--sys-sh-2) !important;
}
html.polish-v4.polish-ready .guide-tool-card:hover,
html.polish-v4.polish-ready .guide-gallery-card:hover {
  box-shadow:
    0 0 0 1px rgba(255, 180, 90, .20),
    var(--sys-sh-3) !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-tool-card,
html.polish-v4.polish-ready:not(.dark) .guide-gallery-card {
  box-shadow: var(--sys-sh-2) !important;
}

/* 6.6 媒体框（画廊封面容器）：描边单独提亮，与图片区分 */
html.polish-v4.polish-ready .guide-gallery-media {
  border: 1px solid #4a4a4a;
}

/* 6.7 搜索框聚焦：外发光加强一档，聚焦状态更明确 */
html.polish-v4.polish-ready .guide-search:focus-within {
  border-color: var(--sys-line-accent-strong) !important;
  box-shadow: 0 0 0 3px rgba(255, 180, 90, .16) !important;
}

/* ============================================================
 * 页脚空间修正（2026-10-20）
 * 原状态：.home-page 写死 height:900 + overflow:hidden；
 *        .home-copyright 只有 23px 高；.copy-container 是 absolute。
 *        三者叠加导致页脚被压在最底部，版权分隔线离图片仅 32px。
 * 处理：让页面可随内容长高、给 .home-copyright 明确高度，
 *       页脚才有空间把线往下放（见上方 .copy-container 的 top:64px）。
 * ============================================================ */
html.polish-v4.polish-ready .home-page {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
}
html.polish-v4.polish-ready .home-copyright {
  height: 150px !important;
  min-height: 150px !important;
  flex: 0 0 auto !important;
}

/* ============================================================
 * 页脚分隔线定位修正（2026-10-21）
 * 用户圈出的那条线 = .guide-copyright::before：
 *   height:1px; background: linear-gradient(90deg, transparent, rgba(255,180,90,.22) 18%, ...)
 * 原样式 top:0，而 .guide-copyright 的顶部正好等于画廊底部（1440 视口下同为 780px），
 * 于是线条与图片下沿间距为 0，视觉上"压在图片上"。
 * 处理：把线整体下移到 top:40px（距画廊 40px）；
 *       .copy-container 仍为 top:64px，跑马灯从 844 开始，线与标签间距 24px。
 *       同时撤掉 .copyright-info 上重复的第二条边框线（见上方规则）。
 * ============================================================ */
html.polish-v4.polish-ready .guide-copyright::before {
  top: 40px !important;
}