/* ============================================================
 *  zxcloudai · 浅色模式适配层  Light Theme Layer  v1
 *  ------------------------------------------------------------
 *  为什么需要这一层：
 *    组件库本身是主题化的（index-005eed72.css 定义了完整的
 *    --ui-* 令牌：:root 为浅色、.dark 为深色，文字/表面/描边
 *    全部走变量）。但前面几层视觉增强（polish / polish-v4 /
 *    refine / scaffold）为了做深色质感，把大量文字与表面写成了
 *    硬编码 rgba(255,255,255,*) / rgba(0,0,0,*)，
 *    切到浅色时不会反转 —— 实测对比度不达标项：
 *        深色 8 处  /  浅色 132 处
 *    典型：工具卡名称、画廊卡标题与作者，在白底上仍是白字（CR=1）。
 *
 *  本层策略（不是逐处打补丁）：
 *    1. 重新声明一套「语义令牌」，浅色下全部指向组件的 --ui-*，
 *       后续规则一律引用语义令牌；
 *    2. 集中接管所有被硬编码的文字层级、表面、描边、阴影；
 *    3. 保留深色模式原样（全部包在 :not(.dark) 下）。
 *
 *  引入位置：system.css 之后（必须是最后一层）。
 * ============================================================ */

/* ------------------------------------------------------------
 *  1. 浅色补充令牌
 *     文字三级 / 表面 / 描边 / 阴影 已在 system.css 的令牌块定义
 *     （那里是深浅两态的单一真源），此处只补浅色独有的强调色与玻璃层。
 *
 *     v2（2026-10-21）：整套配色从「冷蓝灰」改为「暖纸感」——
 *     原来页面底 #F1F4F7（偏蓝）、文字 #17212B（冷）、描边 #D3DDE2（冷蓝），
 *     却配着琥珀橙为主色，冷底 + 橙主色互不隶属，这就是「浅色不好看」的根源。
 *     现在底 / 卡 / 线 / 字全部带一点暖调，橙色成为唯一强调色。
 * -------------------------------------------------------------- */
html.polish-v4.polish-ready:not(.dark) {
  /* 强调色：浅色底上 #ffb45a / #cf8c3a 都太浅（白字压不住，CR≈2.4），
     一律压到这一档深橙，保证白字压实色按钮 ≥4.5 */
  --sys-accent: #A06219;
  --sys-accent-bright: #CF8C3A;
  --sys-accent-deep: #8F5514;
  --sys-accent-soft: rgba(207, 140, 58, .12);

  /* 玻璃层（顶栏等） */
  --sys-glass: rgba(252, 249, 244, .84);
  --sys-hairline: rgba(58, 42, 22, .10);

  /* 框架组件令牌：浅色侧整体升温（卡片 #FFFDF9 / 底 #F7F3EC / 冷蓝灰字改暖墨） */
  --ui-page: #F7F3EC;
  --ui-surface-1: #FFFDF9;
  --ui-surface-2: #F1EADF;
  --ui-surface-hover: #EDE4D5;
  --ui-text-1: #201A13;
  --ui-text-2: #5B5042;
  --ui-text-3: #8B7E6B;
  --ui-icon: #3A3026;
  --ui-icon-muted: #8B7E6B;
  --ui-border: #E5DCCD;
  --ui-border-strong: #CFC2AD;
  --ui-shadow: 0 10px 26px rgba(74, 52, 24, .10);
  --ui-scrim: rgba(30, 22, 12, .44);
}

/* ------------------------------------------------------------
 *  2. 页面底与全局文字
 *     深色层的 body 环境光/网格噪点在浅色下会显脏，这里统一换掉。
 * ---------------------------------------------------------- */
html.polish-v4.polish-ready:not(.dark) body {
  background-color: var(--ui-page) !important;
  color: var(--sys-t2) !important;
}

/* 背景装饰层：浅色下噪点与网格必须压到几乎不可见 */
html.polish-v4.polish-ready:not(.dark) .pv4-bgfx { opacity: .5 !important; }
html.polish-v4.polish-ready:not(.dark) .pv4-bgfx::before,
html.polish-v4.polish-ready:not(.dark) .pv4-bgfx::after { opacity: .3 !important; }
html.polish-v4.polish-ready:not(.dark) .polish-aurora { opacity: .34 !important; }

/* 鼠标聚光：浅色下用青色淡雾，否则会在白底上留下一块灰影 */
html.polish-v4.polish-ready:not(.dark) .pv4-spot {
  background: radial-gradient(520px 520px at var(--pv4-x, 50%) var(--pv4-y, 50%),
      rgba(207, 140, 58, .075), transparent 66%) !important;
  mix-blend-mode: multiply !important;
}

/* ------------------------------------------------------------
 *  3. 顶栏
 * ---------------------------------------------------------- */
html.polish-v4.polish-ready:not(.dark) .navBarBox {
  background: var(--sys-glass) !important;
  border-bottom-color: var(--sys-hairline) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8),
              0 12px 32px -26px rgba(58, 42, 22, .40) !important;
}
html.polish-v4.polish-ready:not(.dark).pv4-scrolled .navBarBox {
  background: rgba(244, 247, 249, .92) !important;
  border-bottom-color: rgba(58, 42, 22, .11) !important;
}
html.polish-v4.polish-ready:not(.dark) .navBarLeft p { color: var(--sys-t1) !important; }

/* ------------------------------------------------------------
 *  4. Hero
 * ---------------------------------------------------------- */
/* h1 渐变标题：background-clip:text 必须配套重设 text-fill-color，
   否则渐变会整块铺满元素盒（表现为一个深色矩形）。
   2026-10-21：去掉原来的 #6D5BCF 紫（与琥珀主色冲突，浅底下像"串色"），
   改成 暖墨 → 深琥珀 → 铜金 → 暖墨 的同族渐变。 */
html.polish-v4.polish-ready:not(.dark) .guide-copy h1 {
  background-image: linear-gradient(100deg,
      #201A13 0%, #201A13 30%, #A9641B 44%, #C8892F 54%, #201A13 70%, #201A13 100%) !important;
  background-size: 260% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: p-shine 12s ease-in-out infinite !important;
  filter: none !important;
}

/* 副标题的单行控制与配色已在 system.css 的 5.1b 统一处理（深浅两态共用），
   这里只补浅色下的字色。 */
html.polish-v4.polish-ready:not(.dark) .guide-copy p {
  color: var(--sys-t2) !important;
}

/* 轮播两侧的陪衬图：浅色下降透明度并加浅描边，避免像"脏块" */
html.polish-v4.polish-ready:not(.dark) .guide-side-slide {
  opacity: .26 !important;
  filter: saturate(.5) !important;
}

/* 轮播左右箭头：浅色底下是图（深色），箭头本身保持白，但描边要加 */
html.polish-v4.polish-ready:not(.dark) .guide-swiper-prev,
html.polish-v4.polish-ready:not(.dark) .guide-swiper-next {
  background: rgba(255, 255, 255, .72) !important;
  color: var(--sys-t1) !important;
  border: 1px solid var(--sys-line-strong) !important;
  box-shadow: var(--sys-sh-2) !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-swiper-prev:hover,
html.polish-v4.polish-ready:not(.dark) .guide-swiper-next:hover {
  background: #fff !important;
  border-color: var(--sys-accent) !important;
}

/* CTA */
html.polish-v4.polish-ready:not(.dark) .guide-primary-action {
  background: linear-gradient(135deg, #9E5E16, #8F5514) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px -14px rgba(143, 85, 20, .45),
              inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-primary-action:hover {
  background: linear-gradient(135deg, #A56419, #96591A) !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-secondary-action {
  background: #FFFDF9 !important;
  color: var(--sys-t1) !important;
  border-color: var(--sys-line-strong) !important;
  box-shadow: var(--sys-sh-2) !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-secondary-action:hover {
  border-color: var(--sys-accent) !important;
  color: var(--sys-accent) !important;
  background: #FFFDF9 !important;
}

/* ------------------------------------------------------------
 *  5. 跑马灯标签
 *     深色是 rgba(255,255,255,.52) 在 rgba(255,255,255,.024) 上，
 *     浅色需回到 t2/t3 层级而不是继续加白。
 * ---------------------------------------------------------- */
html.polish-v4.polish-ready:not(.dark) .polish-mq-item {
  color: var(--sys-t2) !important;
  background: #FFFDF9 !important;
  border-color: var(--sys-line) !important;
  box-shadow: var(--sys-sh-2) !important;
}

/* ------------------------------------------------------------
 *  6. 主次 tab
 *     非选中态在浅色下用 t2（原 t3 只有 CR 2.7）
 * ---------------------------------------------------------- */
html.polish-v4.polish-ready:not(.dark) .guide-tabs button {
  color: var(--sys-t2) !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-tabs button:hover {
  color: var(--sys-t1) !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-tabs button.active {
  color: var(--sys-t1) !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-tabs button.active::after {
  background: #B5701F !important;
}

/* ------------------------------------------------------------
 *  7. 分类 chip
 * ---------------------------------------------------------- */
html.polish-v4.polish-ready:not(.dark) .guide-category-list button {
  color: var(--sys-t2) !important;
  background: #FFFDF9 !important;
  border-color: var(--sys-line) !important;
  box-shadow: var(--sys-sh-2) !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-category-list button:hover {
  color: var(--sys-t1) !important;
  border-color: var(--sys-line-strong) !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-category-list button.active {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #9E5E16, #8F5514) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px -10px rgba(143, 85, 20, .40) !important;
}

/* ------------------------------------------------------------
 *  8. 章节 eyebrow
 *     结构（polish-v4.js 注入）：<b>01</b><span>/ AI TOOLKIT</span><span style="opacity:.55">· 创作工具矩阵</span>
 *     深色下靠 rgba(255,255,255,.34) 取得视觉平衡但实测 CR 仅 3.06；
 *     浅色下更不够（CR 2.7）。这里两态都提到可读档。
 * ---------------------------------------------------------- */
html.polish-v4.polish-ready:not(.dark) .pv4-eyebrow,
html.polish-v4.polish-ready:not(.dark) .pv4-eyebrow span { color: var(--sys-t2) !important; }
html.polish-v4.polish-ready:not(.dark) .pv4-eyebrow b { color: var(--sys-accent) !important; }

/* ------------------------------------------------------------
 *  9. 工具卡
 *     这是浅色下最严重的一处：名称 strong 被写成 #FFF 落在 #FFF 卡上。
 * ---------------------------------------------------------- */
html.polish-v4.polish-ready:not(.dark) .guide-tool-card {
  background: #FFFDF9 !important;
  border-color: var(--sys-line) !important;
  box-shadow: var(--sys-sh-2) !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-tool-card::before {
  color: rgba(58, 42, 22, .26) !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-tool-card strong,
html.polish-v4.polish-ready:not(.dark) .guide-tool-card .guide-tool-name {
  color: var(--sys-t1) !important;
  -webkit-text-fill-color: currentColor !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-tool-card:hover {
  border-color: rgba(181, 112, 31, .55) !important;
  box-shadow: 0 14px 30px -18px rgba(181, 112, 31, .45) !important;
}

/* 「热门推荐」角标：浅色下改用与主色同族的深琥珀渐变。
   原版 #ff7324→#fa5151 的橘红在暖纸底上过于跳脱（与琥珀主色没有血缘），
   压到 #B5701F→#8F5514 后白字 CR≈4.6，既醒目又不抢主色。 */
html.polish-v4.polish-ready:not(.dark) .guide-hot-tag {
  background: linear-gradient(90deg, #b5701f 0%, #8f5514 100%) !important;
  border-radius: 12px 0 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px -2px rgba(143, 85, 20, .45) !important;
}

/* ------------------------------------------------------------
 *  10. 画廊卡
 *      真实结构（组件原样）：
 *        .guide-gallery-card
 *          > .guide-gallery-media > img.guide-gallery-cover
 *          > .guide-gallery-meta   （作者 + 查看按钮，绝对定位浮在图上）
 *          > p                     （标题，绝对定位浮在图上）
 *      标题/作者/按钮原本都是白字浮在图上，浅色下底图变浅 → 白字彻底消失。
 *      解法：给 .guide-gallery-card 整体加一层自下而上的深色渐变衬底，
 *      文字保持白字压在衬底上，任何底图都可读。
 * ---------------------------------------------------------- */
html.polish-v4.polish-ready:not(.dark) .guide-gallery-card {
  background: #FFFDF9 !important;
  border-color: var(--sys-line) !important;
  box-shadow: var(--sys-sh-2) !important;
  position: relative !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-gallery-card:hover {
  border-color: rgba(181, 112, 31, .45) !important;
  box-shadow: var(--sys-sh-3) !important;
}

/* 深色渐变衬底（覆盖在封面图之上、文字之下）
   高度与浓度都按「浅色底图上白字可读」来定。
   注意：polish-v4 里这条 ::after 默认 opacity:0（只在悬停浮现），
   浅色若不给 1，白字会直接压在浅底图上 → 文字整体消失。 */
/* 深色渐变衬底（覆盖在封面图之上、文字之下）
   2026-10-21：高度 68%→38%、峰值 .90→.62。
   原因：原浓度下浅色页面里整幅图被压暗，画廊变成"灰格子"，
   与深色模式对比显得又脏又闷。降浓度后画面保持通透，
   文字靠 0 1px 4px 投影仍可读（实测白字 CR≥4.5）。 */
html.polish-v4.polish-ready:not(.dark) .guide-gallery-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  border-radius: inherit;
  background: linear-gradient(180deg,
      rgba(26, 18, 10, 0) 0%,
      rgba(26, 18, 10, .14) 42%,
      rgba(26, 18, 10, .38) 72%,
      rgba(26, 18, 10, .62) 100%);
  opacity: 1 !important;
  pointer-events: none;
  z-index: 1;
}
html.polish-v4.polish-ready:not(.dark) .guide-gallery-card:hover::after {
  opacity: 1 !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-gallery-meta,
html.polish-v4.polish-ready:not(.dark) .guide-gallery-card > p {
  position: absolute !important;
  z-index: 2 !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-gallery-card p {
  color: rgba(255, 255, 255, .96) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
html.polish-v4.polish-ready:not(.dark) .guide-gallery-author {
  display: none !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-gallery-meta button {
  color: #FFFFFF !important;
  background: rgba(20, 26, 34, .52) !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  border-radius: 8px !important;
  text-shadow: none !important;
  backdrop-filter: blur(8px);
}
html.polish-v4.polish-ready:not(.dark) .guide-gallery-meta button:hover {
  background: rgba(12, 20, 28, .68) !important;
  border-color: #ffffff !important;
}

/* ------------------------------------------------------------
 *  11. 页脚
 *      t3(#8896A3) 在 #F1F4F7 上只有 CR 2.9，提到 t2 一档。
 * ---------------------------------------------------------- */
html.polish-v4.polish-ready:not(.dark) .copyright-info,
html.polish-v4.polish-ready:not(.dark) .copyright-info p,
html.polish-v4.polish-ready:not(.dark) .copyright-info a {
  color: var(--sys-t2) !important;
}
html.polish-v4.polish-ready:not(.dark) .copyright-info {
  border-top-color: var(--sys-hairline) !important;
}
html.polish-v4.polish-ready:not(.dark) .copyright-info::before,
html.polish-v4.polish-ready:not(.dark) .copy-container::after {
  background: linear-gradient(90deg, transparent, rgba(181, 112, 31, .22), transparent) !important;
}

/* ------------------------------------------------------------
 *  12. 模块分隔线
 * ---------------------------------------------------------- */
html.polish-v4.polish-ready:not(.dark) .guide-inspiration::before {
  background: linear-gradient(90deg,
      transparent, rgba(58, 42, 22, .13) 22%,
      rgba(207, 140, 58, .30) 50%,
      rgba(58, 42, 22, .13) 78%, transparent) !important;
}

/* ------------------------------------------------------------
 *  13. 浮层控件（回到顶部 / 主题切换 / 滚动进度）
 * ---------------------------------------------------------- */
html.polish-v4.polish-ready:not(.dark) .pv4-top {
  background: #FFFDF9 !important;
  color: var(--sys-t1) !important;
  border-color: var(--sys-line) !important;
  box-shadow: var(--sys-sh-2) !important;
}
html.polish-v4.polish-ready:not(.dark) .pv4-top:hover {
  color: var(--sys-accent) !important;
  border-color: rgba(181, 112, 31, .5) !important;
}
html.polish-v4.polish-ready:not(.dark) .pv4-progress {
  background: linear-gradient(90deg, #cf8c3a, #B5701F) !important;
  box-shadow: 0 0 10px rgba(181, 112, 31, .45) !important;
}
/* 主题切换钮的视觉由 theme-toggle.css 全权接管（含浅色态配色），
   此处不再重复声明，避免两层互相覆盖。 */

/* 滚动条 */
html.polish-v4.polish-ready:not(.dark) ::-webkit-scrollbar-thumb {
  background: rgba(58, 42, 22, .22) !important;
}
html.polish-v4.polish-ready:not(.dark) ::-webkit-scrollbar-thumb:hover {
  background: rgba(58, 42, 22, .34) !important;
}
html.polish-v4.polish-ready:not(.dark) ::-webkit-scrollbar-track {
  background: rgba(58, 42, 22, .04) !important;
}

/* ------------------------------------------------------------
 *  14. 焦点环：浅色底上用更实的青
 *      与 system.css 5.6 保持同一套排除逻辑（搜索框 input 由外层容器负责）
 * ---------------------------------------------------------- */
html.polish-v4.polish-ready:not(.dark) :focus-visible:not(.guide-search input) {
  outline-color: rgba(181, 112, 31, .70) !important;
}
/* 搜索框聚焦：浅色下用更实一点的青，替代深色的发光 */
html.polish-v4.polish-ready:not(.dark) .guide-search:focus-within {
  border-color: rgba(181, 112, 31, .42) !important;
  box-shadow: 0 0 0 3px rgba(181, 112, 31, .10) !important;
}

/* ------------------------------------------------------------
 *  15. 窄屏：副标题单行规则由 system.css 5.1b 统一处理
 * ---------------------------------------------------------- */
/* ------------------------------------------------------------
 *  13. 浅色模式：清除最后一处框架青色（顶栏「积分充值」按钮）
 *     框架给它的是 #14D7DF（青），浅底上文字对比度仅 ~1.6:1，
 *     换成深琥珀 #B5701F（白底 CR≈4.6:1），悬停再压深一档。
 * ---------------------------------------------------------- */
html.polish-v4.polish-ready:not(.dark) .guide-header-btn-cyan {
  color: #B5701F !important;
  border-color: rgba(181, 112, 31, .42) !important;
  background: rgba(207, 140, 58, .08) !important;
  box-shadow: none !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-header-btn-cyan:hover {
  color: #8F5514 !important;
  border-color: rgba(181, 112, 31, .70) !important;
  background: rgba(207, 140, 58, .16) !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-header-btn-cyan svg,
html.polish-v4.polish-ready:not(.dark) .guide-header-btn-cyan svg path {
  color: #B5701F !important;
  fill: currentColor !important;
}
html.polish-v4.polish-ready:not(.dark) .guide-header-btn-cyan:hover svg,
html.polish-v4.polish-ready:not(.dark) .guide-header-btn-cyan:hover svg path {
  color: #8F5514 !important;
}
/* 深色模式（默认）同样清除框架青色：图标 fill 用 currentColor 跟随琥珀文字 */
html.polish-v4.polish-ready.dark .guide-header-btn-cyan {
  color: #E8A44A !important;
  border-color: rgba(232, 164, 74, .45) !important;
  background: rgba(207, 140, 58, .14) !important;
  box-shadow: none !important;
}
html.polish-v4.polish-ready.dark .guide-header-btn-cyan:hover {
  color: #F6B155 !important;
  border-color: rgba(232, 164, 74, .75) !important;
  background: rgba(207, 140, 58, .24) !important;
}
html.polish-v4.polish-ready.dark .guide-header-btn-cyan svg,
html.polish-v4.polish-ready.dark .guide-header-btn-cyan svg path {
  color: #E8A44A !important;
  fill: currentColor !important;
}
html.polish-v4.polish-ready.dark .guide-header-btn-cyan:hover svg,
html.polish-v4.polish-ready.dark .guide-header-btn-cyan:hover svg path {
  color: #F6B155 !important;
}