/* ============================================================
 *  zxcloudai · 视觉增强层 v4  (PV4)
 *  ------------------------------------------------------------
 *  设计目标：把参考站的两种高级感结合起来 ——
 *    A. 秩序感（umaxapi / q8s8）：编号系统、eyebrow 英文小标、
 *       字距与字号对比、发丝分隔线、克制的留白节奏
 *    B. 冲击力（q8s8 / show.ai）：鼠标聚光、网格噪点、3D 倾斜、
 *       锥形流光边框、滚动揭示、辉光
 *
 *  安全原则（与 v1-v3 一致）：
 *    · 作用域 html.polish-v4，JS 激活后才生效
 *    · 只叠加视觉，不改业务布局尺寸
 *    · 所有注入层 pointer-events:none + contain 隔离
 *    · 尊重 prefers-reduced-motion
 * ============================================================ */

html.polish-v4 {
  --pv4-cyan: #cf8c3a;
  --pv4-cyan-d: #cf8c3a;
  --pv4-violet: #8b5cf6;
  --pv4-gold: #e8b04b;
  --pv4-hair: rgba(255, 255, 255, .07);
  --pv4-ease: cubic-bezier(.22, 1, .36, 1);
}
html.polish-v4:not(.dark) {
  --pv4-hair: rgba(15, 40, 48, .08);
}

/* ============================================================
 *  1. 背景纹理层：细网格 + 胶片噪点
 *  参考 q8s8 的空间纵深与 umaxapi 的科技秩序
 * ============================================================ */
.pv4-bgfx {
  position: fixed;
  inset: 0;
  z-index: 2;                    /* 高于 #app(1)，低于 naive-ui 弹层(2000+) */
  pointer-events: none;
  contain: strict;
  opacity: 0;
  transition: opacity 1.2s ease;
}
html.polish-v4 .pv4-bgfx { opacity: 1; }

/* 网格：40px 网格线，用径向遮罩只在上下两端显现，中间让位给内容 */
.pv4-bgfx::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(120, 200, 214, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120, 200, 214, .055) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 78% at 50% 0%, #000 0%, rgba(0,0,0,.55) 42%, transparent 78%);
  mask-image: radial-gradient(120% 78% at 50% 0%, #000 0%, rgba(0,0,0,.55) 42%, transparent 78%);
  animation: pv4-grid-drift 40s linear infinite;
}
html.polish-v4:not(.dark) .pv4-bgfx::before {
  background-image:
    linear-gradient(to right, rgba(10, 120, 138, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 120, 138, .07) 1px, transparent 1px);
}
@keyframes pv4-grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 44px 44px, 44px 44px; }
}

/* 噪点：极低透明度的胶片颗粒，消除渐变色带、提升质感 */
.pv4-bgfx::after {
  content: "";
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .022;
  animation: pv4-noise 8s steps(6) infinite;
}
html.polish-v4:not(.dark) .pv4-bgfx::after { opacity: .035; }
@keyframes pv4-noise {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-3%, 2%, 0); }
  40%  { transform: translate3d(2%, -3%, 0); }
  60%  { transform: translate3d(-2%, -2%, 0); }
  80%  { transform: translate3d(3%, 1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ============================================================
 *  2. 鼠标聚光（spotlight）—— 让页面"活"起来
 * ============================================================ */
.pv4-spot {
  position: fixed;
  left: 0; top: 0;
  width: 760px; height: 760px;
  margin: -380px 0 0 -380px;
  z-index: 2;
  pointer-events: none;
  contain: strict;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
      rgba(207, 140, 58, .075), rgba(207, 140, 58, .03) 38%, transparent 68%);
  will-change: transform;
  opacity: 0;
  transition: opacity .8s ease;
}
html.polish-v4 .pv4-spot { opacity: 1; }
html.polish-v4:not(.dark) .pv4-spot {
  background: radial-gradient(circle at 50% 50%,
      rgba(207, 140, 58, .065), rgba(207, 140, 58, .022) 38%, transparent 68%);
}
/* 触摸设备不需要 */
@media (hover: none) { .pv4-spot { display: none !important; } }

/* ============================================================
 *  3. Hero 冲击力升级
 * ============================================================ */

/* 3.1 主轮播外围：品牌辉光 + 更深的落地阴影，让画面"浮"起来 */
html.polish-v4 .guide-swiper-stage {
  filter: drop-shadow(0 34px 80px rgba(0, 0, 0, .55));
}
html.polish-v4:not(.dark) .guide-swiper-stage {
  filter: drop-shadow(0 30px 64px rgba(20, 50, 60, .16));
}
/* 氛围光做在 hero 区背景上（swiper 自身 overflow:hidden 会把伪元素裁成方块） */
html.polish-v4 .guide-hero {
  background-image:
    radial-gradient(62% 48% at 50% 54%, rgba(207, 140, 58, .13), rgba(139, 92, 246, .06) 46%, transparent 76%);
  background-repeat: no-repeat;
  background-position: center center;
}
html.polish-v4:not(.dark) .guide-hero {
  background-image:
    radial-gradient(62% 48% at 50% 54%, rgba(207, 140, 58, .1), rgba(139, 92, 246, .045) 46%, transparent 76%);
}

/* 3.2 左右预览图：统一虚化压暗，焦点更明确 */
html.polish-v4 .guide-side-slide {
  filter: saturate(.55) brightness(.52) blur(1.1px);
}
html.polish-v4 .guide-side-slide:hover {
  filter: saturate(1) brightness(.95) blur(0);
}

/* 3.3 轮播圆点：激活态拉成胶囊 + 辉光（q8s8 常见的进度指示器质感） */
html.polish-v4 .guide-swiper-dots {
  gap: 7px;
}
html.polish-v4 .guide-swiper-dots > * {
  width: 7px !important;
  height: 4px !important;
  border-radius: 3px !important;
  transition: width .45s var(--pv4-ease), background-color .35s ease,
              box-shadow .45s ease, opacity .35s ease;
  opacity: .45;
}
html.polish-v4 .guide-swiper-dots > *:hover { opacity: .8; }
html.polish-v4 .guide-swiper-dots > .active,
html.polish-v4 .guide-swiper-dots > [class*="active"] {
  width: 26px !important;
  opacity: 1;
  background: linear-gradient(90deg, var(--pv4-cyan), #ffb45a) !important;
  box-shadow: 0 0 14px rgba(207, 140, 58, .6);
}

/* 3.4 左右切换箭头：毛玻璃圆钮 */
html.polish-v4 .guide-swiper-prev,
html.polish-v4 .guide-swiper-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 20, 24, .42) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid #5a5a5a;
  transition: transform .3s var(--pv4-ease), background-color .3s ease,
              border-color .3s ease, box-shadow .3s ease;
}
html.polish-v4 .guide-swiper-prev:hover,
html.polish-v4 .guide-swiper-next:hover {
  /* 悬停只换色、不缩放：scale 会把按钮撑大，视觉上像"位置跑了"。
     transform 保持与常态一致的 translateY(-50%)，几何位置零位移。 */
  transform: translateY(-50%);
  background: rgba(255, 180, 90, .16) !important;
  border-color: rgba(255, 180, 90, .78);
  box-shadow: 0 0 22px rgba(207, 140, 58, .45);
  color: #ffb45a;
}

/* 3.5 说明：氛围光做在 hero 区背景上而非主图外缘 —— swiper 自身 overflow:hidden，
   任何挂在轮播图上的伪元素辉光都会被裁成方块（上一版踩过的坑）。 */

/* ============================================================
 *  4. 主 CTA：锥形流光边框（q8s8 的"能量环"观感）
 * ============================================================ */
html.polish-v4 .guide-primary-action {
  isolation: isolate;
}
/* 锥形流光边框已停用。
   原因：① 旋转的 conic-gradient 让 1px 描边的实际颜色随角度变化，边界读数不稳定；
        ② 与本轮"实色描边建立清晰边界"的设计目标直接冲突；
        ③ 双色（青/紫/橙）流光在深底上过于花哨，喧宾夺主。
   现在主 CTA 用稳定的青色实色描边 + 内发光表达"主行动"，层级反而更清楚。
   若要恢复，取消下面两行注释即可。 */
/* html.polish-v4 .guide-primary-action::before { content: ""; } */

/* ============================================================
 *  5. 工具卡：编号系统 + 3D 倾斜 + 跟随聚光
 *  编号是 umaxapi「01/02/03/04」秩序的移植
 * ============================================================ */
html.polish-v4 .guide-tool-list {
  counter-reset: pv4-tool;
}

html.polish-v4 .guide-tool-card {
  counter-increment: pv4-tool;
  position: relative;
  transform-style: preserve-3d;
  transform:
    perspective(1000px)
    rotateX(var(--pv4-rx, 0deg))
    rotateY(var(--pv4-ry, 0deg))
    translateY(var(--pv4-ty, 0px));
  transition:
    transform .45s var(--pv4-ease),
    border-color .35s ease,
    box-shadow .45s ease,
    background-color .35s ease;
  will-change: transform;
}
html.polish-v4 .guide-tool-card:hover { --pv4-ty: -5px; }

/* 编号：水印式大号数字，压在图片之上但不抢内容 */
html.polish-v4 .guide-tool-card::before {
  content: counter(pv4-tool, decimal-leading-zero);
  position: absolute;
  top: 6px;
  right: 9px;
  font-size: 21px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .2);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
  pointer-events: none;
  transition: color .4s ease, transform .4s var(--pv4-ease), text-shadow .4s ease;
  z-index: 2;
}
html.polish-v4:not(.dark) .guide-tool-card::before {
  color: rgba(255, 255, 255, .42);
  text-shadow: 0 1px 5px rgba(0, 0, 0, .4);
}
html.polish-v4 .guide-tool-card:hover::before {
  color: rgba(125, 240, 252, .92);
  text-shadow: 0 0 12px rgba(0, 214, 232, .85);
  transform: translateY(-1px) scale(1.05);
}

/* 跟随鼠标的卡片内聚光（spotlight border 技巧） */
html.polish-v4 .guide-tool-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(200px circle at var(--pv4-cx, 50%) var(--pv4-cy, 50%),
      rgba(255, 180, 90, .55), rgba(255, 180, 90, 0) 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
html.polish-v4 .guide-tool-card:hover::after { opacity: 1; }

/* 卡片内容层需在编号之下不被遮挡 */
html.polish-v4 .guide-tool-card > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
 *  6. Eyebrow 章节标签（参考站最见效的"高级感"手法）
 * ============================================================ */
html.polish-v4 .pv4-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ui-text-3);
  opacity: .85;
}
html.polish-v4 .pv4-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--pv4-cyan), rgba(207, 140, 58, 0));
}
html.polish-v4 .pv4-eyebrow b {
  font-weight: 700;
  color: var(--pv4-cyan);
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
}
html.polish-v4:not(.dark) .pv4-eyebrow { color: #7d929b; }

/* ============================================================
 *  7. 滚动揭示（IntersectionObserver 驱动）
 * ============================================================ */
html.polish-v4 [data-pv4-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--pv4-ease), transform .8s var(--pv4-ease);
  will-change: opacity, transform;
}
html.polish-v4 [data-pv4-reveal].pv4-in {
  opacity: 1;
  transform: translateY(0);
}
/* 揭示完成后释放 will-change，避免长期占用合成层 */
html.polish-v4 [data-pv4-reveal].pv4-in {
  will-change: auto;
}

/* ============================================================
 *  8. 画廊卡片：更细腻的媒体层次
 * ============================================================ */
html.polish-v4 .guide-gallery-card {
  position: relative;
  overflow: hidden;
}
/* 底部信息区渐变衬底，文字永远可读 */
html.polish-v4 .guide-gallery-meta {
  position: relative;
  z-index: 2;
}
/* 悬停时从底部升起一层品牌色渐变，强化"被选中"的感觉 */
html.polish-v4 .guide-gallery-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
      rgba(3, 14, 18, .78), rgba(3, 14, 18, .28) 46%, transparent);
  opacity: 0;
  transition: opacity .42s ease;
}
html.polish-v4 .guide-gallery-card:hover::after { opacity: 1; }
html.polish-v4:not(.dark) .guide-gallery-card::after {
  background: linear-gradient(to top,
      rgba(8, 30, 36, .72), rgba(8, 30, 36, .2) 46%, transparent);
}

/* ============================================================
 *  9. 顶栏：滚动收敛 + 品牌指示
 * ============================================================ */
html.polish-v4.pv4-scrolled .guide-header {
  background: rgba(8, 10, 12, .82);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 14px 40px -18px rgba(0, 0, 0, .8);
}
html.polish-v4.pv4-scrolled:not(.dark) .guide-header {
  background: rgba(241, 244, 247, .86);
  box-shadow: 0 1px 0 rgba(15, 40, 48, .05), 0 12px 32px -20px rgba(20, 60, 70, .25);
}

/* 顶栏登录按钮：常驻微光，引导转化 */
html.polish-v4 .guide-login-btn {
  position: relative;
  overflow: hidden;
}
html.polish-v4 .guide-login-btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -70%;
  width: 42%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-20deg);
  animation: pv4-btn-sweep 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pv4-btn-sweep {
  0%, 70% { left: -70%; }
  92%, 100% { left: 140%; }
}

/* ============================================================
 *  10. 滚动进度条 + 回到顶部
 * ============================================================ */
.pv4-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  z-index: 3000;
  pointer-events: none;
  background: linear-gradient(90deg, var(--pv4-cyan), #ffb45a 45%, var(--pv4-violet));
  box-shadow: 0 0 12px rgba(207, 140, 58, .7);
  transition: width .12s linear;
}

.pv4-top {
  position: fixed;
  right: 26px;
  bottom: 92px;
  z-index: 900;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--pv4-hair);
  background: rgba(16, 22, 26, .62);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  color: var(--ui-text-2, #cfd8dc);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px) scale(.9);
  transition: opacity .35s ease, transform .4s var(--pv4-ease),
              border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
  pointer-events: none;
}
html.polish-v4.pv4-scrolled-deep .pv4-top {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.pv4-top:hover {
  border-color: rgba(255, 180, 90, .5) !important;
  box-shadow: 0 0 24px rgba(207, 140, 58, .38);
  background: rgba(207, 140, 58, .26) !important;
  color: #fff;
}
.pv4-top svg { width: 18px; height: 18px; }
html.polish-v4:not(.dark) .pv4-top {
  background: rgba(255, 255, 255, .78);
  color: #3d565e;
  box-shadow: 0 8px 24px -12px rgba(20, 60, 70, .35);
}

/* ============================================================
 *  11. 搜索与标签：聚焦时的仪式感
 * ============================================================ */
html.polish-v4 .guide-search {
  transition: box-shadow .35s ease, border-color .35s ease, background-color .35s ease;
}
/* 注：原这里有一条 .guide-hot-tag 的 position:relative + overflow:hidden
   + ::after 悬停渐变。但角标是 pointer-events:none 的静态标记，
   hover 永不触发，那层渐变是死代码；而 overflow:hidden 会连同
   width:70px 一起把「热门推荐」裁成两行。整体移交 refine.css 专属规则。 */

/* 分类行：hover 时左侧出现品牌色短杠 */
html.polish-v4 .guide-category-row {
  position: relative;
  transition: color .25s ease, padding-left .3s var(--pv4-ease);
}
html.polish-v4 .guide-category-row::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 0;
  border-radius: 2px;
  background: var(--pv4-cyan);
  transform: translateY(-50%);
  transition: height .3s var(--pv4-ease), box-shadow .3s ease;
}
html.polish-v4 .guide-category-row:hover::before {
  height: 14px;
  box-shadow: 0 0 8px rgba(207, 140, 58, .8);
}

/* ============================================================
 *  12. 页脚：秩序感收尾
 * ============================================================ */
html.polish-v4 .guide-copyright {
  position: relative;
  letter-spacing: .04em;
}
html.polish-v4 .guide-copyright::before {
  content: "";
  display: block;
  height: 1px;
  margin: 0 auto 18px;
  width: min(680px, 76%);
  background: linear-gradient(90deg,
      transparent, var(--pv4-hair) 22%, rgba(207, 140, 58, .22) 50%,
      var(--pv4-hair) 78%, transparent);
}

/* ============================================================
 *  13. 品牌蓝中和（Element 默认蓝 #409eff / Tailwind 蓝 #3b82f6）
 *  ------------------------------------------------------------
 *  前端活跃样式表本身是干净的，但若干懒加载路由 chunk 里散落着
 *  写死的蓝色，与品牌青冲突。这里统一收敛到品牌色。
 *  注意：.axis-z / .label-z 是全景图 3D 坐标轴的 Z 轴，
 *  蓝/绿/红是三维软件通用约定，故意保留不改。
 * ============================================================ */

/* 画布编辑器：对白标签的选中态 */
html.polish-v4 .cv-dialogue-kind.is-dialogue {
  background: rgba(207, 140, 58, .15) !important;
  color: #cf8c3a !important;
}
/* 画布编辑器：提示词编辑器"生成中"态（保留原有深色底，只换蓝） */
html.polish-v4 .cv-final-prompt-editor.is-generating {
  border-color: rgba(207, 140, 58, .24) !important;
  background: linear-gradient(90deg, rgba(207, 140, 58, .05), transparent 42%), #151515 !important;
}

/* Markdown 主题（md-editor）：优先改自定义属性，一处生效全局 */
html.polish-v4 .mk-cute-theme {
  --md-theme-link-color: #cf8c3a;
  --md-theme-link-hover-color: #00909e;
  --md-theme-quote-border: 4px solid #cf8c3a;
  --md-theme-quote-bg-color: rgba(181, 112, 31, .78);
}
html.polish-v4 .mk-cute-theme a {
  border-bottom: 1px solid #cf8c3a !important;
}
html.polish-v4 .mk-cute-theme a:hover,
html.polish-v4 .mk-cute-theme a:active {
  border-bottom: 1px solid #00909e !important;
}
html.polish-v4 .mk-cute-theme blockquote:before,
html.polish-v4 .mk-cute-theme blockquote:after {
  color: #cf8c3a !important;
}

/* ============================================================
 *  14. 无障碍 / 降级
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html.polish-v4 .pv4-bgfx::before,
  html.polish-v4 .pv4-bgfx::after,
  html.polish-v4 .guide-primary-action::before,
  html.polish-v4 .guide-login-btn::after {
    animation: none !important;
  }
  html.polish-v4 [data-pv4-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  html.polish-v4 .guide-tool-card {
    transform: none !important;
  }
  .pv4-spot { display: none !important; }
}

/* 窄屏：关闭 3D 倾斜与聚光，保证移动端流畅 */
@media (max-width: 768px) {
  html.polish-v4 .guide-tool-card {
    transform: none !important;
  }
  .pv4-spot { display: none !important; }
  .pv4-top { right: 16px; bottom: 84px; }
}