/* ============================================================
   现代商务版 · PC 首页模板样式
   约定：本文件所有首页选择器都以 .nv- 前缀命名，不覆盖任何 .pc-* 公共类；
   内页换肤规则统一限定在 .pc-body 作用域内。
   因此即使本模板启用（本文件会被所有 PC 页面加载），其它页面的外观也不会被影响。
   卡片内容与文案全部来自后台「模板管理 → 内容设置」。
   ============================================================ */

/* ---------- 通用按钮 ---------- */
.nv-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 30px;border-radius:var(--nv-radius-pill);font-size:15px;font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease,filter .25s ease}
.nv-btn-primary{background:var(--nv-grad);color:var(--nv-on-brand);box-shadow:var(--nv-shadow)}
/* 主药丸按钮：hover 微放大 + 亮度提升 + 蓝色柔光阴影；active 按下缩到 .98 */
.nv-btn-primary:hover{transform:scale(1.04);filter:brightness(1.06);box-shadow:0 26px 54px -18px rgba(63,99,230,.62),0 10px 26px rgba(63,99,230,.26)}
.nv-btn-ghost{background:var(--nv-card);color:var(--nv-ink);border-color:var(--nv-line);box-shadow:var(--nv-shadow-sm)}
.nv-btn-ghost:hover{background:var(--nv-bg-2);border-color:var(--nv-primary);color:var(--nv-primary-strong);transform:translateY(-2px)}
.nv-btn:active,.nv-btn-primary:active{transform:scale(.98)}

/* 首页各区块内的焦点环：只作用于首页 section，公共头/脚保持原有表现（内页外观零变化） */
.nv-sec a:focus-visible{outline:2px solid var(--nv-primary-strong);outline-offset:2px}

/* ---------- 区块骨架 ---------- */
.nv-section{padding:var(--nv-section) 0}
.nv-section-tight{padding:var(--nv-section-tight) 0;background:rgba(255,255,255,.62)}
.nv-head{max-width:720px;margin:0 auto 40px;text-align:center}
.nv-head h2{margin:0;font-size:32px;line-height:1.35;font-weight:800;letter-spacing:-.2px;color:var(--nv-ink)}
.nv-head .nv-eyebrow{display:block;margin-bottom:10px;font-size:13px;font-weight:800;letter-spacing:2px;color:var(--nv-primary-strong)}
.nv-head p{margin:12px 0 0;font-size:15px;line-height:1.8;color:var(--nv-ink-2)}

/* ---------- 主视觉 ---------- */
/* 背景：复刻参考站的大块斜向淡蓝波浪（两层斜向色带 + 一层白光柔化），不用位图；
   底色本身是一个会缓慢自动流动的淡蓝渐变（只在主蓝色系内位移，不改主色），
   波浪层做成半透明，让底色的流动能透出来。 */
.nv-hero{--nv-h1:42px;--nv-pt:76px;position:relative;overflow:hidden;margin-top:calc(var(--nv-head,0px) * -1);padding:calc(var(--nv-pt) + var(--nv-head,0px)) 0 84px}
/* 首屏背景改由 ::before 承载，底部用 mask 渐隐到完全透明：
   背景溶进页面底色，与下一屏之间不再出现一条横向分割线（改回元素自身背景就会重新出现硬边）。 */
.nv-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,#eaf1ff 0%,#dce8ff 20%,#f1f6ff 44%,#e2ecff 66%,#eef4ff 84%,#e9f0ff 100%);
  background-size:240% 240%;animation:nvFlow 26s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 86%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 86%,rgba(0,0,0,0) 100%)}
@keyframes nvFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.nv-hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.78;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 86%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 86%,rgba(0,0,0,0) 100%)}
.nv-hero-bg span{position:absolute;inset:0}
.nv-hero-bg .b1{background:linear-gradient(158deg,#d3e1f8 0%,#e3ecfb 58%,#eff5fd 100%);clip-path:polygon(0 0,100% 0,56% 100%,0 100%)}
.nv-hero-bg .b2{background:linear-gradient(202deg,rgba(194,213,244,.88) 0%,rgba(226,237,252,.28) 72%);clip-path:polygon(68% 0,100% 0,100% 100%,20% 100%)}
.nv-hero-bg .b3{background:radial-gradient(70% 78% at 76% 30%,rgba(255,255,255,.96),rgba(255,255,255,0) 72%)}
.nv-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.12fr;gap:52px;align-items:center;
  animation:nvHeroIn .6s ease-out both}
/* 主视觉整体载入淡入（0.6s），不做位移，避免与卡片簇的飞入动画抢戏 */
@keyframes nvHeroIn{from{opacity:0}to{opacity:1}}
.nv-hero h1{margin:20px 0 0;font-size:var(--nv-h1);line-height:1.28;font-weight:600;letter-spacing:-.4px;color:var(--nv-ink)}
.nv-hero h1.is-long{font-size:calc(var(--nv-h1) - 4px)}
.nv-hl{font-style:normal;color:var(--nv-primary-strong)}
.nv-hero-desc{margin:18px 0 0;max-width:520px;font-size:15px;line-height:1.7;color:var(--nv-ink-2)}
.nv-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.nv-hero-copy .nv-btn{min-width:168px}

/* 主视觉右侧：浮动卡片簇（整块 aria-hidden，纯装饰） */
/* 复刻 yun.98fk.cn：参考站的这组卡片是 5 张 PNG，绝对定位摆在一张 804×595 的画布上，
   入场时各自从画面外飞入（style_A_crossA~E，.8s cubic-bezier(.165,.84,.44,1)）。
   关键点：PNG 比 CSS 盒子大 1.5 倍且四周带透明边距（左 15 / 上 9 / 右 42 / 下 42 像素），
   所以「盒子」互相叠压、而「可见卡片」之间其实留着 2~6px 空隙，并不叠压。
   下面用的是扣掉透明边距之后的可见边界，叠压只发生在阴影上。
   画布内尺寸与字号一律用 cqw（容器宽度百分比）标注，整块像位图一样等比缩放，
   因此不需要为不同断点重排卡片，也不会出现文字溢出。 */
.nv-hero-visual{position:relative}
.nv-cluster{position:relative;width:100%;aspect-ratio:804/595;container-type:inline-size}
/* 层级取自参考站的 DOM 次序：订单 < 我的小店 < 商品 < 用户 < 账户（蓝卡压在最上面） */
.nv-fc{position:absolute;box-sizing:border-box;background:var(--nv-card);border:1px solid rgba(232,238,248,.9);border-radius:1.5cqw;
  box-shadow:0 1.2cqw 2.6cqw rgba(29,42,77,.09),0 .2cqw .7cqw rgba(29,42,77,.05);
  animation-duration:.8s;animation-timing-function:cubic-bezier(.165,.84,.44,1);animation-fill-mode:backwards}
/* 四角向内交叉汇聚 + 蓝卡从正左推入（位移量 = 参考站的 50 / 89 画布像素换算成 cqw） */
@keyframes nvCrossA{from{transform:translate(-6.218cqw,-6.218cqw);opacity:0}to{transform:translate(0,0);opacity:1}}
@keyframes nvCrossB{from{transform:translate(6.218cqw,-11.07cqw);opacity:0}to{transform:translate(0,0);opacity:1}}
@keyframes nvCrossC{from{transform:translate(6.218cqw,6.218cqw);opacity:0}to{transform:translate(0,0);opacity:1}}
@keyframes nvCrossD{from{transform:translate(-6.218cqw,6.218cqw);opacity:0}to{transform:translate(0,0);opacity:1}}
@keyframes nvCrossE{from{transform:translate(-6.218cqw,0);opacity:0}to{transform:translate(0,0);opacity:1}}
.nv-fc-label{display:block;font-size:2.15cqw;font-weight:800;line-height:1.25;color:var(--nv-ink)}
.nv-fc-sub{display:block;font-size:1.95cqw;line-height:1.3;color:var(--nv-ink-3)}
/* 骨架条 / 缩略图行：纯装饰占位（对齐参考站的灰色占位行），不给读屏留噪音 */
.nv-fc-sk{display:block;height:1.1cqw;border-radius:999px;background:var(--nv-line-solid)}
.nv-fc-sk+.nv-fc-sk{margin-top:1.4cqw}
.nv-fc-lines{flex:1 1 auto;min-width:0}
/* ① 订单卡（左上，275×275）：淡黄柱 + 红色渐变上升曲线 + 端点圆点与箭头 */
.nv-fc-chart{left:13.184%;top:1.008%;width:29.478%;height:40%;z-index:1;display:flex;flex-direction:column;padding:2.4cqw;animation-name:nvCrossA}
.nv-fc-plot{position:relative;flex:1 1 auto;min-height:0;margin-top:1.4cqw}
.nv-fc-bars{display:flex;align-items:flex-end;gap:1.1cqw;height:100%}
.nv-fc-bars i{flex:1 1 0;border-radius:.6cqw .6cqw .2cqw .2cqw;background:linear-gradient(180deg,#f6e3bd,#efd5a4)}
.nv-fc-curve{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nv-fc-tip{position:absolute;left:93%;top:7%;width:1.3cqw;height:1.3cqw;margin:-.65cqw 0 0 -.65cqw;border-radius:50%;background:#ee3b54;box-shadow:0 0 0 .6cqw rgba(238,59,84,.16)}
.nv-fc-arrow{position:absolute;left:93%;top:-2%;width:1.5cqw;height:1.5cqw}
/* ② 我的小店卡（右上，274×185）：橙色圆形图标 + 标题 + 5 颗橙星 */
.nv-fc-shop{left:43.408%;top:6.891%;width:29.353%;height:25.4%;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;padding:2.2cqw;text-align:center;animation-name:nvCrossB}
.nv-fc-orb{display:grid;place-items:center;width:6.6cqw;height:6.6cqw;border-radius:50%;background:var(--nv-success-soft);color:var(--nv-success);font-size:2.6cqw;font-weight:800}
.nv-fc-orb.is-shop{background:linear-gradient(140deg,#f79b2e,#ef7222);box-shadow:0 1.4cqw 2.6cqw rgba(239,114,34,.28)}
.nv-fc-orb svg{width:3.2cqw;height:3.2cqw}
.nv-fc-stars{display:block;color:#f5a623;font-size:2.6cqw;letter-spacing:.5cqw;line-height:1}
/* ③ 账户卡（正左，359×189，比订单卡更宽并向左突出，压在最上层） */
.nv-fc-account{left:0.995%;top:41.176%;width:42.164%;height:28.437%;z-index:5;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.8cqw;padding:2cqw 2.4cqw;
  background:linear-gradient(135deg,#2f5be0,#4a6ceb 58%,#5f6ce8);border-color:transparent;
  box-shadow:0 1.8cqw 3.6cqw rgba(47,91,224,.28),0 .2cqw .8cqw rgba(29,42,77,.10);animation-name:nvCrossE}
.nv-fc-account .nv-fc-label{font-size:2.05cqw;color:rgba(255,255,255,.82)}
.nv-fc-amount{display:block;font-size:4.6cqw;font-weight:900;letter-spacing:-.08cqw;line-height:1.15;color:#fff;font-variant-numeric:tabular-nums}
.nv-fc-pill{display:inline-flex;align-items:center;height:3.6cqw;margin-top:.4cqw;padding:0 2.2cqw;border-radius:999px;background:rgba(255,255,255,.24);color:#fff;font-size:2.05cqw;font-weight:800}
/* ④ 商品卡（右列，465×355）：商品缩略图 + 骨架行 + 状态点 */
.nv-fc-list{left:43.408%;top:32.605%;width:54.279%;height:55.983%;z-index:3;display:flex;flex-direction:column;gap:1.6cqw;padding:2.6cqw;animation-name:nvCrossC}
.nv-fc-row{display:flex;align-items:center;gap:1.8cqw}
.nv-fc-thumb{flex:0 0 auto;width:8cqw;height:8cqw;border-radius:1.2cqw}
/* 缩略图用渐变模拟商品照（保持模板零位图：不引入二进制资源） */
.nv-fc-thumb.p1{background:linear-gradient(150deg,#f2708a 0,#d92a4a 62%,#a81436 100%)}
.nv-fc-thumb.p2{background:linear-gradient(140deg,#f7c948 0,#ef5f7a 48%,#6a5de6 100%)}
.nv-fc-thumb.p3{background:linear-gradient(150deg,#d8dfe9 0,#9aa7bb 60%,#6f7d92 100%)}
.nv-fc-dot{flex:0 0 auto;width:1.1cqw;height:1.1cqw;border-radius:999px;background:var(--nv-line-solid)}
.nv-fc-dot.ok{background:var(--nv-success)}
.nv-fc-dot.warn{background:#f0a53c}
/* ⑤ 用户卡（左下，294×185）：蓝色头像圆 + 三条错落骨架 */
.nv-fc-user{left:11.692%;top:69.916%;width:31.754%;height:25.328%;z-index:4;display:flex;align-items:center;gap:1.8cqw;padding:2.2cqw;animation-name:nvCrossD}
.nv-fc-avatar{flex:0 0 auto;display:grid;place-items:center;width:8.4cqw;height:8.4cqw;border-radius:50%;background:linear-gradient(140deg,#5b7cf0,#3f63e6)}
.nv-fc-avatar svg{width:4.3cqw;height:4.3cqw}

/* ---------- 三大优势（横向白卡） ---------- */
.nv-adv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
/* 无硬边框 + 大范围柔和阴影，对齐参考站（yun.98fk.cn）的白卡质感 */
.nv-adv-card{padding:30px 26px;background:var(--nv-card);border-radius:var(--nv-radius);box-shadow:var(--nv-shadow-sm);transition:transform .3s ease,box-shadow .3s ease}
.nv-adv-card:hover{transform:translateY(-4px);box-shadow:0 26px 52px -20px rgba(29,42,77,.26),0 8px 20px rgba(29,42,77,.08)}
.nv-adv-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--nv-primary-soft);color:var(--nv-primary-strong)}
.nv-adv-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nv-adv-card h3{margin:20px 0 0;font-size:17px;font-weight:800;color:var(--nv-ink)}
.nv-adv-card p{margin:10px 0 0;font-size:15px;line-height:1.8;color:var(--nv-ink-2)}

/* ---------- 能力条（左对齐小标签 + 四列紧凑瓦片） ---------- */
.nv-strip-lead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.nv-strip-lead h2{margin:0;font-size:17px;font-weight:800;color:var(--nv-ink)}
.nv-strip-lead p{margin:0;font-size:13px;color:var(--nv-ink-2)}
.nv-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.nv-feature{padding:22px 20px;background:rgba(242,247,255,.82);border:1px solid var(--nv-line-solid);border-radius:var(--nv-radius-sm);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.nv-feature:hover{transform:translateY(-4px);border-color:#cfe0ff;box-shadow:0 22px 44px -18px rgba(29,42,77,.24),0 6px 16px rgba(29,42,77,.07)}
.nv-feature-icon{display:grid;place-items:center;width:40px;height:40px;margin-bottom:14px;border-radius:var(--nv-radius-sm);background:var(--nv-card);color:var(--nv-primary-strong);box-shadow:var(--nv-shadow-sm)}
.nv-feature-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nv-feature h3{margin:0;font-size:17px;font-weight:800;color:var(--nv-ink)}
.nv-feature p{margin:6px 0 0;font-size:13px;line-height:1.7;color:var(--nv-ink-2)}

/* ---------- 四步流程（大号描边序号，序号由视图补零） ---------- */
.nv-flow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.nv-flow-step{padding-top:22px;border-top:2px solid var(--nv-line)}
.nv-flow-step b{display:block;font-size:46px;font-weight:900;line-height:1;color:var(--nv-flow-num);-webkit-text-stroke:1.5px var(--nv-primary)}
.nv-flow-step h3{margin:10px 0 0;font-size:17px;font-weight:800;color:var(--nv-ink)}
.nv-flow-step p{margin:6px 0 0;font-size:15px;line-height:1.8;color:var(--nv-ink-2)}

/* ---------- 一站式品类（左清单 + 右面板） ---------- */
.nv-one{background:rgba(255,255,255,.62)}
.nv-one-inner{display:grid;grid-template-columns:1fr .82fr;gap:56px;align-items:center}
.nv-one h2{margin:0;font-size:32px;line-height:1.35;font-weight:800;letter-spacing:-.2px;color:var(--nv-ink)}
.nv-one-desc{margin:14px 0 0;font-size:15px;line-height:1.8;color:var(--nv-ink-2)}
.nv-one-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin:26px 0 0;padding:0;list-style:none}
.nv-one-list li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.8;color:var(--nv-ink)}
.nv-one-list svg{flex:0 0 auto;width:18px;height:18px;margin-top:6px;fill:none;stroke:var(--nv-success);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nv-one-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.nv-panel{padding:26px 24px;background:var(--nv-bg);border:1px solid var(--nv-line);border-radius:var(--nv-radius);box-shadow:var(--nv-shadow)}
.nv-panel-title{font-size:15px;font-weight:800;color:var(--nv-ink)}
.nv-panel-sub{margin:4px 0 0;font-size:13px;color:var(--nv-ink-3)}
.nv-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.nv-panel-cell{padding:14px;background:var(--nv-card);border:1px solid var(--nv-line-solid);border-radius:var(--nv-radius-sm);transition:transform .3s ease,box-shadow .3s ease}
.nv-panel-cell:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(29,42,77,.24)}
.nv-panel-cell span{display:block;font-size:13px;color:var(--nv-ink-3)}
.nv-panel-cell b{display:block;margin-top:6px;font-size:15px;font-weight:800;color:var(--nv-ink)}
.nv-panel-cell b.ok{color:var(--nv-success)}
.nv-panel-note{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-size:13px;color:var(--nv-ink-2)}
.nv-panel-note i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--nv-success)}

/* ---------- 指标带（能力词 + 单行说明；浅底，非深色） ---------- */
.nv-metrics{background:rgba(238,243,255,.66);border-top:1px solid var(--nv-line);border-bottom:1px solid var(--nv-line)}
.nv-metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;text-align:center}
.nv-metric-word{display:block;font-size:46px;font-weight:900;line-height:1.1;color:var(--nv-ink)}
.nv-metric-desc{display:block;margin-top:10px;font-size:13px;color:var(--nv-ink-2)}

/* ---------- 安全保障（两列横向卡片） ---------- */
.nv-guard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.nv-guard-item{display:flex;gap:16px;padding:22px;background:var(--nv-card);border-radius:var(--nv-radius-sm);box-shadow:var(--nv-shadow-sm);transition:transform .3s ease,box-shadow .3s ease}
.nv-guard-item:hover{transform:translateY(-4px);box-shadow:0 26px 52px -20px rgba(29,42,77,.26),0 8px 20px rgba(29,42,77,.08)}
.nv-guard-icon{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--nv-success-soft);color:var(--nv-success)}
.nv-guard-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nv-guard-item h3{margin:0;font-size:17px;font-weight:800;color:var(--nv-ink)}
.nv-guard-item p{margin:6px 0 0;font-size:15px;line-height:1.8;color:var(--nv-ink-2)}


/* ---------- 降低动效（生产 JS 已短路 .pc-reveal，这里再兜一层 CSS） ---------- */
@media (prefers-reduced-motion:reduce){
  .nv-fc{animation:none}
  .nv-hero,.nv-hero-inner,.nv-hero::before{animation:none}
  .nv-btn,.nv-adv-card,.nv-feature,.nv-panel-cell,.nv-guard-item{transition:none}
  .nv-btn:hover,.nv-btn:active,.nv-adv-card:hover,.nv-feature:hover,.nv-panel-cell:hover,.nv-guard-item:hover{transform:none}
  .pc-body .pc-main .pc-reveal{opacity:1;transform:none;transition:none}
}

/* ---------- 响应式（PC 模板在窄窗口下也不挤） ---------- */
@media(max-width:1080px){
  .nv-hero{--nv-h1:34px;--nv-pt:60px;padding-bottom:64px}
  .nv-hero-inner{grid-template-columns:1fr;gap:44px}
  /* width:100% 不能省：仅有 margin:0 auto 时网格项会退化成 shrink-to-fit（实测只剩 149px） */
  .nv-hero-visual{width:100%;max-width:560px;margin:0 auto}
  .nv-adv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nv-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nv-flow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nv-one-inner{grid-template-columns:1fr;gap:36px}
  .nv-metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
}
@media(max-width:680px){
  .nv-hero{--nv-h1:28px}
  .nv-section{padding:52px 0}
  .nv-section-tight{padding:40px 0}
  .nv-hero{--nv-pt:44px;padding-bottom:52px}
  .nv-hero-actions .nv-btn,.nv-one-actions .nv-btn{width:100%}
  /* 窄屏时卡片簇整块等比缩小即可：内部尺寸与字号全部是 cqw，等价于把参考站的位图缩下来，
     不重排卡片、也不隐藏元素，避免留下空洞 */
  .nv-head h2,.nv-one h2{font-size:25px}
  .nv-adv-grid,.nv-strip,.nv-flow-grid,.nv-guard{grid-template-columns:1fr}
  .nv-flow-grid{gap:20px}
  .nv-one-list{grid-template-columns:1fr}
  .nv-metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .nv-metric-word{font-size:36px}
}

/* ============================================================
   其它 PC 页面统一换肤
   订单查询 / 常见问题 / 禁售目录 / 举报入口 / 工单 / 工单详情 / 404 这些页面复用公共
   视图（application/index/view/pc 目录下的公共视图），这里用 body.pc-body 与 .pc-body 作用域重写
   公共 .pc-* 组件，让它们跟随本模板的配色与卡片风格。
   两条约束：
     1) 页面结构、字段与交互逻辑一律不改，只调整配色、圆角、阴影与排版细节；
     2) 本文件只在本模板启用时加载，且所有规则都限定在 .pc-body 内，
        因此「默认版」模板下的 PC 前台外观完全不受影响。
   ============================================================ */
body.pc-body{
  --pc-primary:#2f6bff;--pc-primary-2:#4f8dff;--pc-primary-3:#6ea8ff;
  --pc-grad:linear-gradient(135deg,#2f6bff,#4f8dff);
  --pc-bg:#f6f8fc;--pc-card:#ffffff;--pc-text:#132040;--pc-muted:#6b7c9c;
  --pc-line:#e8eef8;--pc-radius:18px;
  --pc-shadow:0 2px 8px rgba(19,32,64,.04);--pc-shadow-lg:0 20px 40px rgba(47,107,255,.14);
  /* 底色交给根元素上的整页流动渐变（public/static/pc/ui-refresh.css），这里只叠一层淡淡的右上角高光；
     写成不透明的 var(--pc-bg) 会把整页渐变整条盖掉。 */
  background:radial-gradient(900px 420px at 88% -12%,rgba(47,107,255,.10) 0,rgba(47,107,255,0) 62%)
}

/* 首页设计令牌（浅色蓝紫）：只服务 .nv-* 模块，全部声明在这一个块内，不污染其它模板 */
body.pc-body{
  --nv-primary:#4f7cf6;
  --nv-primary-strong:#3f63e6;
  --nv-purple-strong:#6a5de6;
  --nv-primary-soft:#eef3ff;
  --nv-grad:linear-gradient(135deg,#3f63e6,#6a5de6);
  --nv-ink:#1d2a4d;
  --nv-ink-2:#626d88;
  --nv-ink-3:#64708f;
  --nv-bg:#f7faff;
  --nv-bg-2:#f2f7ff;
  --nv-card:#ffffff;
  --nv-line:rgba(79,124,246,.13);
  --nv-line-solid:#e8eefb;
  --nv-success:#0d7d4c;
  --nv-success-soft:#e6f7ee;
  --nv-on-brand:#ffffff;
  --nv-flow-num:rgba(79,124,246,.15);
  --nv-shadow-sm:0 12px 28px rgba(29,42,77,.09),0 2px 6px rgba(29,42,77,.05);
  --nv-shadow:0 20px 48px -24px rgba(79,124,246,.38);
  --nv-shadow-btn:0 26px 54px -22px rgba(63,99,230,.55);
  --nv-shadow-float:0 30px 60px -30px rgba(29,42,77,.28);
  --nv-radius:18px;
  --nv-radius-sm:14px;
  --nv-radius-pill:999px;
  --nv-section:80px;
  --nv-section-tight:56px
}

/* 通用区块 / 卡片 */
.pc-body .pc-section-head h2{color:#132040;font-weight:900;letter-spacing:.4px}
.pc-body .pc-section-head p{color:#6b7c9c}
.pc-body .pc-card{padding:28px;border:1px solid #e8eef8;border-radius:18px;box-shadow:0 2px 8px rgba(19,32,64,.04);transition:transform .3s ease,box-shadow .3s ease}
/* 功能卡片统一悬浮效果：上抬 4px + 加深柔和阴影 */
.pc-body .pc-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -20px rgba(19,32,64,.22),0 8px 20px rgba(19,32,64,.07)}
.pc-body .pc-card-title{color:#132040;font-size:17px;font-weight:800;border-bottom:1px solid #eef3fb}
.pc-body .pc-card-title::before{border-radius:3px;background:linear-gradient(180deg,#2f6bff,#7fb2ff)}

/* 按钮：全部药丸（与 ui-refresh.css 保持一致，若前者加载失败也仍然是药丸）
   底色、文字色、字号由后台「内容设置 → 圆角按钮」配置，变量在 header.php 里输出 */
.pc-body .pc-btn{height:44px;border-radius:999px;font-size:var(--pc-btn-font-size,15px);font-weight:700}
.pc-body .pc-btn-lg{height:52px;padding:0 30px;font-size:16px}
.pc-body .pc-btn-sm{height:34px;padding:0 16px;font-size:13px;border-radius:999px}
.pc-body .pc-btn-primary{background:var(--pc-btn-primary-bg,#2f6bff);color:var(--pc-btn-primary-fg,#fff);box-shadow:0 10px 24px rgba(47,107,255,.28)}
.pc-body .pc-btn-primary:hover{transform:scale(1.04);filter:brightness(1.06);box-shadow:0 18px 36px rgba(47,107,255,.4)}
.pc-body .pc-btn:active{transform:scale(.98)}
.pc-body .pc-btn-ghost{background:var(--pc-btn-ghost-bg,#fff);color:var(--pc-btn-ghost-fg,#2f6bff);border-color:#cfe0ff}
.pc-body .pc-btn-ghost:hover{background:#f2f7ff;border-color:#2f6bff;color:var(--pc-btn-ghost-fg,#2f6bff)}
.pc-body .pc-btn-danger{border-radius:999px}

/* 订单查询页两个按钮可单独配色（后台「内容设置」） */
.pc-body .pc-order-search-form .pc-order-query-btn{background:var(--pc-order-query-btn-bg,var(--pc-btn-primary-bg,#2f6bff));color:var(--pc-order-query-btn-fg,var(--pc-btn-primary-fg,#fff))}
.pc-body .pc-order-search-form .pc-order-cache-btn{background:var(--pc-order-cache-btn-bg,var(--pc-btn-primary-bg,#2f6bff));color:var(--pc-order-cache-btn-fg,var(--pc-btn-primary-fg,#fff))}

/* 表单 */
.pc-body .pc-input{border-color:#dbe6f5!important;border-radius:12px!important;box-shadow:0 2px 8px rgba(19,32,64,.04)!important}
.pc-body .pc-input:focus{border-color:#8aa9ff!important;box-shadow:0 0 0 3px rgba(47,107,255,.14)!important}
.pc-body textarea.pc-input{height:auto;min-height:104px;padding:12px 14px;line-height:1.7}
.pc-body .pc-form-label{color:#2c3a52;font-weight:700}
.pc-body .pc-form-remark{color:#8a97ab;line-height:1.75}

/* 提示条 / 空状态 */
.pc-body .pc-msg{border-radius:14px;box-shadow:0 2px 8px rgba(19,32,64,.04)}
.pc-body .pc-empty{color:#8a97ab}
.pc-body .pc-alert{border-radius:12px}

/* 静态页外壳（常见问题 / 禁售目录） */
.pc-body .pc-static{padding:56px 0}
.pc-body .pc-static h1{color:#132040;font-size:32px;font-weight:900;letter-spacing:.4px}
.pc-body .pc-static .pc-static-lead{color:#6b7c9c;line-height:1.95}

/* 常见问题 */
.pc-body .pc-faq-item{border:1px solid #e8eef8;border-radius:16px;box-shadow:0 2px 8px rgba(19,32,64,.04);background:#fff;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.pc-body .pc-faq-item:hover{transform:translateY(-4px);border-color:#cfdeff;box-shadow:0 24px 48px -20px rgba(47,107,255,.24),0 8px 20px rgba(19,32,64,.07)}
.pc-body .pc-faq-item h3{color:#132040;font-weight:800}
.pc-body .pc-faq-item h3::before{border-radius:10px;background:linear-gradient(140deg,#eaf1ff,#d7e5ff);color:#2f6bff}
.pc-body .pc-faq-item .pc-faq-rich{color:#4a5a6e}

/* 禁售目录 */
.pc-body .pc-forbidden-list{gap:16px}
.pc-body .pc-forbidden-item{padding:18px;border:1px solid #f3dcdc;border-radius:16px;background:#fff;box-shadow:0 2px 8px rgba(19,32,64,.04);transition:transform .3s ease,box-shadow .3s ease}
.pc-body .pc-forbidden-item:hover{transform:translateY(-4px);box-shadow:0 24px 46px -20px rgba(229,72,77,.26),0 8px 20px rgba(19,32,64,.07)}
.pc-body .pc-forbidden-item .pc-fi-icon{border-radius:10px}
.pc-body .pc-forbidden-item .pc-fi-rich{line-height:1.75}

/* 表格 / 工单沟通记录 */
.pc-body .pc-table th{background:linear-gradient(180deg,#f7faff,#f1f6ff);color:#33425c;font-weight:800;border-bottom:1px solid #e8eef8}
.pc-body .pc-table td{border-bottom:1px solid #eef3fb}
.pc-body .pc-table tr:hover td{background:#fafcff}
.pc-body .pc-mono{color:#33425c}
.pc-body .pc-chat-msg{border:1px solid #e8eef8;border-radius:14px;background:#f7f9fd;box-shadow:0 2px 8px rgba(19,32,64,.03)}
.pc-body .pc-chat-msg.buyer{background:#eef4ff;border-color:#dbe7ff}
.pc-body .pc-chat-msg .pc-chat-meta{color:#33425c;font-weight:800}

/* 订单查询页：背景改成透明，让整页那层流动渐变一路透到导航栏下方，
   导航栏与内容之间不会再出现颜色不一致的白色细缝 */
.pc-body .pc-order-query{padding:56px 20px 64px;background:transparent}
.pc-body .pc-order-hero h1{color:#132040;font-size:32px;font-weight:900;letter-spacing:.4px}
.pc-body .pc-order-hero p{margin-top:12px;color:#7d8ba0;line-height:1.9}
.pc-body .pc-order-search-form .pc-input{height:50px;border-radius:12px}
.pc-body .pc-order-search-form .pc-btn{height:50px;border-radius:999px;box-shadow:0 8px 18px rgba(47,107,255,.22)}
.pc-body .pc-order-search-form .pc-btn:hover{transform:scale(1.04);filter:brightness(1.06);box-shadow:0 12px 24px rgba(47,107,255,.30)}

/* 订单查询页 · 温馨提示与本机记录 */
.pc-body .pc-order-tips{border:1px solid #ffeccc;border-radius:16px;background:linear-gradient(135deg,rgba(255,250,241,.92),rgba(255,253,248,.92));box-shadow:none;color:#7b6a55}
.pc-body .pc-order-tips h2{color:#e08600}
.pc-body .pc-order-records{border:1px solid #e8eef8;border-radius:16px;box-shadow:0 2px 8px rgba(19,32,64,.04)}
.pc-body .pc-order-records-head{color:#132040}
.pc-body .pc-order-records-item{border:1px solid #eef3fb;border-radius:12px;background:#fbfcff;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.pc-body .pc-order-records-item:hover{transform:translateY(-4px);border-color:#cfe0ff;background:#f5f9ff;box-shadow:0 20px 40px -20px rgba(47,107,255,.24)}
.pc-body .pc-order-records-item.on{border-color:#2f6bff;background:#f2f6ff;box-shadow:0 8px 18px rgba(47,107,255,.10)}

/* 订单详情 */
.pc-body .pc-order-grid{gap:10px 26px}
.pc-body .pc-order-row{border-bottom:1px dashed #e8eef8}
.pc-body .pc-order-row .l{color:#8a97ab}
.pc-body .pc-order-row .v{color:#132040}
.pc-body .pc-cd{border:1px solid #e4edfa;border-radius:12px;background:#f7faff;color:#2f6bff;letter-spacing:.4px}

/* 窄窗口下的换肤微调 */
@media(max-width:1080px){
  .pc-body .pc-order-search-form{flex-wrap:wrap}
}
@media(max-width:680px){
  .pc-body .pc-static{padding:34px 0}
  .pc-body .pc-static h1{font-size:25px}
  .pc-body .pc-card{padding:20px 18px;border-radius:16px}
  .pc-body .pc-order-query{padding:34px 16px 44px}
  .pc-body .pc-order-hero h1{font-size:24px}
  .pc-body .pc-order-search-form .pc-input,.pc-body .pc-order-search-form .pc-btn{height:46px}
}

/* ---------- 顶部栏：与主视觉无缝，下滑后才浮出 ---------- */
/* 只覆盖外观、不动公共 header 的结构：border-bottom 只把颜色改透明（保留 1px 占位以免高度跳动），
   任何情况下都不再出现分割线；页面在顶部时连阴影也不要，白底直接接上主视觉的斜向波浪；
   一旦向下滑动，就加一层毛玻璃 + 阴影（而不是加线），让导航浮在内容之上。 */
.pc-body .pc-header{background:#fff;border-bottom-color:transparent;box-shadow:none;
  transition:background .25s ease,box-shadow .25s ease}
.pc-body .pc-header.is-stuck{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 3px 18px rgba(22,38,70,.06)}
/* 首页：主视觉的波浪已经铺到页面最顶端（--nv-head 是由脚本写入的头部高度），
   头部在顶部时改成透明，白底横带与波浪之间那条硬边界才会真正消失。 */
.pc-body:has(.nv-hero) .pc-header:not(.is-stuck){background:transparent}