/* ======================================================
home-v5 · 首页工具卡片重排(取代 home-v4.css,首页改为引用本文件)
- 8 张工具卡统一大小、整齐网格:宽屏 4×2 / 中屏 2 列 / 手机 1 列(容器查询,按内容区宽度自适应)
- 统一风格(同一套圆角/阴影/排版),仅用各卡自带的强调色 --ac / --ac2 / --acs 区分
- 每张卡片都有拟真预览(纯 CSS + 内联 SVG,无外部图片)
- 智贸对话不再是卡片,而是下方独立的深色入口面板(说明 + 搜索 + 对话示意 + 技能分类)
依赖:home-v2.css 提供的 .v2 变量与基础规则;本文件最后加载,只覆盖样式,不改结构与功能
====================================================== */
/* ---- 区块标题 ---- */
.v2 .ws-sec{container-type:inline-size;container-name:tcs}
.v2 .ws-sec .ws-h{align-items:flex-end;margin:8px 4px 16px}
.v2 .ws-sec .ws-h h3{font-size:1.6rem;letter-spacing:.02em;display:flex;align-items:center;gap:12px;line-height:1}
.v2 .ws-sec .ws-h h3::before{content:"";width:6px;height:26px;border-radius:4px;background:linear-gradient(180deg,#2fbf90,#e0a43a)}
.v2 .ws-sec .ws-h h3 small{font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.1em;color:var(--v-mute);margin-left:4px;padding:4px 9px;border-radius:99px;background:#fff;border:1px solid var(--v-line)}
.v2 .ws-sec .ws-h span{font-size:13px}
/* ---- 网格:按内容区宽度自适应(8 张工具卡:4×2 / 2×4 / 1×8) ---- */
.v2 .tc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.v2 .tc-grid .tc,.v2 .tc-grid .tc.w2{grid-column:auto}
@container tcs (min-width:900px){ .v2 .tc-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@container tcs (max-width:459px){ .v2 .tc-grid{grid-template-columns:minmax(0,1fr)} }
/* ---- 卡片本体(全部统一) ---- */
.v2 .tc-grid .tc{
position:relative;display:flex;flex-direction:column;overflow:hidden;
border-radius:20px;border:1px solid var(--v-line);background:#fff;
box-shadow:0 1px 2px rgba(11,20,16,.04),0 14px 30px -24px rgba(11,20,16,.35);
transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .25s}
.v2 .tc-grid .tc::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:6;
background:linear-gradient(90deg,var(--ac),var(--ac2))}
.v2 .tc-grid .tc:hover{
transform:translateY(-5px);border-color:color-mix(in srgb,var(--ac) 55%,var(--v-line));
box-shadow:0 1px 2px rgba(11,20,16,.04),0 28px 44px -26px color-mix(in srgb,var(--ac) 60%,transparent),0 0 0 3px color-mix(in srgb,var(--ac) 12%,transparent)}
.v2 .tc-grid .tc:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
/* 预览区:强调色淡底 + 光斑 */
.v2 .tc-grid .tc-vis{
position:relative;height:158px;padding:16px;overflow:hidden;box-sizing:border-box;
display:flex;flex-direction:column;justify-content:center;
border-bottom:1px solid color-mix(in srgb,var(--ac) 14%,#e4ebe6);
background:
radial-gradient(280px 150px at 92% -12%,color-mix(in srgb,var(--ac) 30%,transparent),transparent 70%),
linear-gradient(165deg,color-mix(in srgb,var(--ac) 8%,#fff),color-mix(in srgb,var(--ac) 17%,#f6f9f7))}
.v2 .tc-grid .tc-vis>*{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.v2 .tc-grid .tc:hover .tc-vis>*{transform:scale(1.035)}
.v2 .tc-grid .tc-vis::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;
background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);
transform:translateX(-120%);transition:transform .9s cubic-bezier(.22,1,.36,1)}
.v2 .tc-grid .tc:hover .tc-vis::after{transform:translateX(120%)}
/* 文字区 */
.v2 .tc-grid .tc-body{padding:14px 16px 16px;gap:9px;flex:1}
.v2 .tc-grid .tc-top{gap:11px;align-items:center}
.v2 .tc-grid .tc-ic{width:40px;height:40px;border-radius:12px;flex:none;
background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;box-shadow:0 10px 16px -10px var(--ac2)}
.v2 .tc-grid .tc-ic svg{width:21px;height:21px}
.v2 .tc-grid .tc-nm h3{font-size:17px;line-height:1.25}
.v2 .tc-grid .tc-nm em{font-size:12px;margin-top:3px}
.v2 .tc-grid .tc-go{width:30px;height:30px;background:color-mix(in srgb,var(--ac) 13%,#fff);color:var(--ac2)}
.v2 .tc-grid .tc-go svg{width:14px;height:14px}
.v2 .tc-grid .tc:hover .tc-go{background:var(--ac);color:#fff;transform:translate(2px,-2px)}
.v2 .tc-grid .tc-body>p{font-size:13px;line-height:1.62;color:#3d5046;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.24em}
.v2 .tc-grid .tc-chips{gap:5px;margin-top:auto;padding-top:2px}
.v2 .tc-grid .tc-chips span{font-size:11.5px;padding:3px 9px;
background:color-mix(in srgb,var(--ac) 11%,#fff);border:1px solid color-mix(in srgb,var(--ac) 20%,transparent);color:var(--ac2)}
.v2 .tc-grid .bt-badge{position:absolute;top:14px;right:14px;z-index:8;margin:0;box-shadow:0 6px 12px -6px rgba(11,20,16,.5)}
/* ---- 入场(尊重 reduced-motion) ---- */
@keyframes tcIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js .v2 .tc-grid .tc{animation:tcIn .55s cubic-bezier(.22,1,.36,1) both}
.js .v2 .tc-grid .tc:nth-child(2){animation-delay:.05s}.js .v2 .tc-grid .tc:nth-child(3){animation-delay:.1s}
.js .v2 .tc-grid .tc:nth-child(4){animation-delay:.15s}.js .v2 .tc-grid .tc:nth-child(5){animation-delay:.2s}
.js .v2 .tc-grid .tc:nth-child(6){animation-delay:.25s}.js .v2 .tc-grid .tc:nth-child(7){animation-delay:.3s}
.js .v2 .tc-grid .tc:nth-child(8){animation-delay:.35s}.js .v2 .tc-grid .tc:nth-child(9){animation-delay:.4s}
.js .v2 .tc-grid .tc:nth-child(10){animation-delay:.45s}.js .v2 .tc-grid .tc:nth-child(11){animation-delay:.5s}
.js .v2 .tc-grid .tc:nth-child(12){animation-delay:.55s}
@media (prefers-reduced-motion:reduce){
.js .v2 .tc-grid .tc{animation:none}
.v2 .tc-grid .tc,.v2 .tc-grid .tc-vis>*{transition:none}
.v2 .tc-grid .tc-vis::after{display:none}
}
@media(max-width:600px){
.v2 .tc-grid .tc-vis{height:150px;padding:14px}
.v2 .ws-sec .ws-h h3{font-size:1.4rem}
}
/* ======================================================
智贸对话 · 独立入口(深色面板,有别于上方的工具卡片)
左:标题/说明/功能标签/进入按钮/技能搜索 右:对话示意窗口 下:技能分类
依赖 index.html 里的 #chSearch / #chSearchBox / #chResults / #chCats(脚本据此渲染)
====================================================== */
.v2 .chat-hub{
position:relative;margin-top:24px;overflow:visible;
display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);grid-template-areas:"main demo" "cats cats";
gap:24px 40px;align-items:center;
padding:32px 36px 28px;border-radius:28px;color:#eaf5ef;
border:1px solid rgba(47,191,144,.24);
background:
radial-gradient(560px 300px at 100% 0,rgba(47,191,144,.26),transparent 62%),
radial-gradient(420px 260px at 0 110%,rgba(217,164,65,.13),transparent 65%),
radial-gradient(circle at 1px 1px,rgba(255,255,255,.05) 1px,transparent 1.5px) 0 0/22px 22px,
linear-gradient(165deg,#0a1410,#10261c 70%,#14352a);
box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 40px 70px -40px rgba(8,30,22,.85)}
.v2 .chat-hub::before,.v2 .chat-hub::after{display:none}
/* 左栏 */
.v2 .chat-hub .ch-main{grid-area:main;min-width:0}
.v2 .chat-hub .ch-head{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:0 0 20px}
.v2 .chat-hub .ch-eyebrow{margin:0 0 12px}
.v2 .chat-hub .ch-title{font-size:clamp(1.7rem,2.5vw,2.2rem);line-height:1.2;margin:0}
.v2 .chat-hub .ch-sub{display:block;max-width:560px;margin:12px 0 0;font-size:14px;line-height:1.75}
.v2 .chat-hub .ch-feats{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.v2 .chat-hub .ch-feats span{font-size:12px;font-weight:600;padding:4px 12px;border-radius:99px;
color:var(--v-mint);background:rgba(191,240,220,.07);border:1px solid rgba(191,240,220,.22)}
.v2 .chat-hub .ch-enter{margin-top:20px;padding:11px 22px;font-size:14px}
.v2 .chat-hub .ch-searchbox{margin:0;position:relative}
.v2 .chat-hub .ch-search{height:50px;font-size:14px;border-radius:14px}
/* 右栏:对话示意窗口 */
.v2 .chat-hub .ch-demo{grid-area:demo;min-width:0;border-radius:20px;overflow:hidden;background:#fff;color:#14201a;
transform:rotate(1.2deg);transition:transform .5s cubic-bezier(.22,1,.36,1);
box-shadow:0 40px 60px -28px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.18) inset,0 0 0 6px rgba(47,191,144,.1)}
.v2 .chat-hub:hover .ch-demo{transform:rotate(0)}
.v2 .chat-hub .chd-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#eef3ef;border-bottom:1px solid #dce4de}
.v2 .chat-hub .chd-bar i{width:9px;height:9px;border-radius:50%;background:#cfd9d2}
.v2 .chat-hub .chd-bar b{margin-left:8px;font:700 12.5px/1 Inter,sans-serif;color:#25352c}
.v2 .chat-hub .chd-bar u{margin-left:auto;text-decoration:none;font:700 10px/1 'JetBrains Mono',monospace;color:#1c7a58;background:#d7f1e5;padding:4px 9px;border-radius:99px}
.v2 .chat-hub .chd-body{padding:16px 16px 6px;display:flex;flex-direction:column;gap:10px}
.v2 .chat-hub .chd-body .b{max-width:88%;font-size:12.5px;line-height:1.55;padding:9px 13px;border-radius:15px}
.v2 .chat-hub .chd-body .me{align-self:flex-end;display:flex;align-items:center;gap:8px;background:#12251c;color:#fff;border-bottom-right-radius:4px}
.v2 .chat-hub .chd-body .ai{align-self:flex-start;background:#f2f6f3;border:1px solid #e1e8e3;color:#25352c;border-bottom-left-radius:4px}
.v2 .chat-hub .chd-body .route{display:inline-block;font:700 9.5px/1 'JetBrains Mono',monospace;padding:3px 7px;border-radius:99px;margin-right:7px;background:#d7f1e5;color:#1c7a58}
.v2 .chat-hub .chd-body .img{flex:none;width:28px;height:28px;border-radius:8px;border:2px solid rgba(255,255,255,.55);
background:linear-gradient(135deg,#eef2f3,#aebbc1)}
.v2 .chat-hub .chd-body .cur{display:inline-block;width:2px;height:13px;margin-left:3px;vertical-align:-2px;background:#2fbf90;animation:rvCaret 1s steps(1) infinite}
.v2 .chat-hub .chd-in{display:flex;align-items:center;gap:10px;margin:8px 16px 16px;padding:8px 8px 8px 16px;border-radius:99px;border:1px solid #dce4de;background:#f7faf8}
.v2 .chat-hub .chd-in i{flex:1;min-width:0;font-style:normal;font-size:12px;color:#8a9a91;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2 .chat-hub .chd-in u{flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:14px;color:#fff;background:#2fbf90}
/* 下栏:技能分类(始终展开) */
.v2 .chat-hub .ch-cats{grid-area:cats;display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:10px;
margin:0;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
.v2 .chat-hub .ch-cat{padding:10px 12px;border-radius:12px;gap:10px}
.v2 .chat-hub .ch-cat:hover{transform:translateY(-2px)}
.v2 .chat-hub .ch-cat .cc-ic{width:32px;height:32px;border-radius:10px;font-size:16px}
.v2 .chat-hub .ch-cat .cc-nm{font-size:13px}
.v2 .chat-hub .ch-cat .cc-ct{font-size:10.5px}
@media (prefers-reduced-motion:reduce){.v2 .chat-hub .ch-demo{transform:none;transition:none}.v2 .chat-hub .chd-body .cur{animation:none}}
@media(max-width:1200px){
.v2 .chat-hub{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "demo" "cats";gap:20px}
.v2 .chat-hub .ch-demo{transform:none;max-width:560px}
}
@media(max-width:700px){
.v2 .chat-hub{padding:22px 18px 20px;border-radius:22px}
.v2 .chat-hub .ch-demo{display:none}
.v2 .chat-hub .ch-cats{grid-template-columns:1fr 1fr}
}
/* ======================================================
卡片预览 · 拟真渲染(纯 CSS + 内联 SVG,无外部图片)
统一产品:珍珠白泵头瓶(#pv-bottle),用不同场景/光线/景深呈现
====================================================== */
.v2 .tc-grid .rv-grid4,.v2 .tc-grid .rv-tri,.v2 .tc-grid .rv-ba,.v2 .tc-grid .rv-bn,.v2 .tc-grid .rv-doc,.v2 .tc-grid .rv-ed,
.v2 .tc-grid .rv-sg,.v2 .tc-grid .rv-lrn{width:100%;height:100%}
/* 通用场景块 */
.rv-sc{position:relative;overflow:hidden;border-radius:12px;isolation:isolate;
box-shadow:0 16px 24px -16px rgba(11,20,16,.55),0 0 0 1px rgba(255,255,255,.35) inset}
.rv-sc .pd{position:absolute;left:50%;bottom:11%;height:68%;width:auto;transform:translateX(-50%);z-index:3;
filter:drop-shadow(0 8px 6px rgba(0,0,0,.28))}
.rv-sc .fl{position:absolute;left:50%;bottom:7%;width:62%;height:9%;transform:translateX(-50%);z-index:2;border-radius:50%;
background:radial-gradient(ellipse at center,rgba(0,0,0,.42),rgba(0,0,0,.14) 55%,transparent 72%);filter:blur(3px)}
.rv-sc span{position:absolute;left:6px;bottom:6px;z-index:6;font-size:10px;font-weight:600;padding:3px 7px;border-radius:7px;
background:rgba(11,20,16,.62);color:#eaf5ef;backdrop-filter:blur(6px)}
.rv-sc em{position:absolute;right:6px;top:6px;z-index:6;font:700 9.5px/1 'JetBrains Mono',monospace;font-style:normal;padding:3px 6px;border-radius:6px;background:var(--ac);color:#052116}
/* —— 产品主图:四种方案 —— */
.rv-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rv-grid4 .rv-sc{height:100%}
.rv-sc.b.on{outline:2px solid var(--ac);outline-offset:2px}
.rv-sc.a{background:radial-gradient(120% 70% at 50% 100%,#e9ecea 0,#f7f8f7 55%,#fff 100%)}
.rv-sc.a .fl{background:radial-gradient(ellipse at center,rgba(0,0,0,.30),rgba(0,0,0,.08) 55%,transparent 72%)}
.rv-sc.b{background:radial-gradient(90% 70% at 28% 6%,#fff 0,#e3e8ea 42%,#b6c1c6 100%)}
.rv-sc.b .box{position:absolute;left:-10%;top:-8%;width:62%;height:46%;z-index:1;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,0));filter:blur(10px);transform:rotate(-12deg)}
.rv-sc.c{background:linear-gradient(180deg,#f3e0c4 0,#e6bf93 56%,#a97748 56.5%,#8a5c33 100%)}
.rv-sc.c::before{content:"";position:absolute;left:0;right:0;top:56%;bottom:0;z-index:0;
background:repeating-linear-gradient(92deg,rgba(255,255,255,.07) 0 3px,rgba(0,0,0,.06) 3px 7px),linear-gradient(180deg,rgba(255,255,255,.22),rgba(0,0,0,.18))}
.rv-sc .bk{position:absolute;z-index:1;border-radius:50%;filter:blur(4px);background:radial-gradient(circle,rgba(255,244,214,.95),rgba(255,226,170,.3) 70%,transparent 72%)}
.rv-sc .bk.k1{width:34%;aspect-ratio:1;left:-6%;top:6%}
.rv-sc .bk.k2{width:22%;aspect-ratio:1;right:8%;top:10%;opacity:.8}
.rv-sc .bk.k3{width:16%;aspect-ratio:1;right:30%;top:30%;opacity:.7}
.rv-sc .lf{position:absolute;z-index:2;right:2%;bottom:30%;height:50%;width:auto;filter:drop-shadow(0 6px 5px rgba(0,0,0,.25))}
.rv-sc.c .pd{left:44%}
.rv-sc.d{background:radial-gradient(80% 70% at 50% 28%,#44535a 0,#1a2327 55%,#0b0f11 100%)}
.rv-sc.d::before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:0;background:linear-gradient(180deg,#1c262a,#080b0c)}
.rv-sc.d .pd{filter:drop-shadow(0 0 12px rgba(120,235,205,.38)) brightness(.92) contrast(1.08)}
.rv-sc.d .pd.rf{bottom:auto;top:calc(100% - 11% + 0px);transform:translateX(-50%) scaleY(-1);transform-origin:50% 0;opacity:.22;filter:blur(1.2px);z-index:2;
-webkit-mask-image:linear-gradient(180deg,#000,transparent 55%);mask-image:linear-gradient(180deg,#000,transparent 55%)}
.rv-sc.d .fl{background:radial-gradient(ellipse at center,rgba(47,191,144,.28),transparent 70%)}
/* —— 文章配图:三张风格统一、构图不同 —— */
.rv-tri{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px;align-items:stretch}
.rv-tri .rv-sc{height:100%}
.rv-tri .t2{transform:translateY(8px)}.rv-tri .t3{transform:translateY(-4px)}
.rv-tri .t1 .pd{height:60%;left:40%}
.rv-sc.m{background:radial-gradient(100% 80% at 70% 0,#f2fff9 0,#bfe6d4 50%,#78b79a 100%)}
.rv-sc.m .pd{height:96%;bottom:-16%;left:60%;filter:drop-shadow(0 12px 10px rgba(0,60,40,.35))}
.rv-sc.m .fl{display:none}
.rv-sc.s{background:linear-gradient(170deg,#ffd9c6 0,#f5a58c 55%,#d9765f 100%)}
.rv-sc.s .pd{height:56%;bottom:14%}
.rv-sc.s .bk.k1{width:60%;left:auto;right:-14%;top:-8%}
.rv-sc.s .bk.k3{width:24%;left:10%;right:auto;top:40%}
/* —— 修图助手:前后对比 —— */
.rv-ba{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 18px 28px -18px rgba(10,40,70,.6)}
.rv-ba .lay{position:absolute;inset:0;overflow:hidden}
.rv-ba .lay .pd{position:absolute;left:50%;bottom:9%;height:74%;transform:translateX(-50%);z-index:3}
.rv-ba .lay .fl{position:absolute;left:50%;bottom:5%;width:46%;height:9%;transform:translateX(-50%);border-radius:50%;z-index:2;background:radial-gradient(ellipse,rgba(0,0,0,.4),transparent 70%)}
.rv-ba .l{clip-path:inset(0 50% 0 0);background:linear-gradient(135deg,#8a7a68,#5d6a5a 45%,#7a6a80);filter:saturate(.55) contrast(.85)}
.rv-ba .l .msy{position:absolute;inset:0;z-index:1;
background:radial-gradient(circle at 18% 28%,rgba(255,200,120,.55) 0 14%,transparent 15%),radial-gradient(circle at 80% 70%,rgba(110,170,220,.5) 0 18%,transparent 19%),radial-gradient(circle at 60% 20%,rgba(220,120,120,.4) 0 12%,transparent 13%)}
.rv-ba .l .pd{filter:blur(2.4px) brightness(.9)}
.rv-ba .l::after{content:"";position:absolute;inset:0;z-index:4;opacity:.38;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,")}
.rv-ba .r{clip-path:inset(0 0 0 50%);background:radial-gradient(90% 80% at 70% 10%,#fff 0,#d8ecf8 55%,#a9d3ee 100%)}
.rv-ba .r .pd{filter:drop-shadow(0 12px 10px rgba(10,50,90,.3))}
.rv-ba .tg{position:absolute;bottom:7px;z-index:6;font-size:10px;font-weight:700;padding:3px 7px;border-radius:7px;background:rgba(11,20,16,.68);color:#fff}
.rv-ba .tl{left:7px}.rv-ba .tr{right:7px;background:var(--ac2)}
.rv-ba .hd{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:#fff;z-index:7;box-shadow:0 0 12px rgba(0,0,0,.25)}
.rv-ba .hd::after{content:"";position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px;border-radius:50%;background:#fff;
box-shadow:0 6px 16px rgba(0,0,0,.3);
background-image:url("data:image/svg+xml;utf8,");background-size:17px;background-position:center;background-repeat:no-repeat}
/* —— Banner:电商大促横幅 —— */
.rv-bn{position:relative;border-radius:12px;overflow:hidden;display:flex;align-items:center;padding:0 16px;
background:radial-gradient(70% 120% at 80% 50%,#d95a40 0,#8c2a1d 55%,#3a1410 100%);box-shadow:0 18px 28px -18px rgba(80,25,15,.7)}
.rv-bn .ring{position:absolute;border-radius:50%;border:1.5px solid rgba(255,255,255,.18)}
.rv-bn .r1{width:180px;height:180px;right:-40px;top:-50px}.rv-bn .r2{width:260px;height:260px;right:-90px;top:-90px;border-color:rgba(255,255,255,.1)}
.rv-bn .dot{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(255,200,180,.35) 60%,transparent 70%)}
.rv-bn .d1{width:11px;height:11px;right:34%;top:16%}.rv-bn .d2{width:8px;height:8px;right:20%;top:70%}.rv-bn .d3{width:14px;height:14px;right:8%;top:14%;opacity:.8}
.rv-bn .glow{position:absolute;right:6%;top:50%;width:46%;aspect-ratio:1;transform:translateY(-50%);background:radial-gradient(circle,rgba(255,190,150,.65),transparent 65%);filter:blur(6px)}
.rv-bn .pd{position:absolute;right:9%;bottom:-6%;height:108%;width:auto;z-index:3;filter:drop-shadow(0 14px 12px rgba(0,0,0,.45));transform:rotate(8deg)}
.rv-bn .tx{position:relative;z-index:4;color:#fff}
.rv-bn small{display:block;font:500 8.5px/1 'JetBrains Mono',monospace;letter-spacing:.2em;opacity:.8}
.rv-bn b{display:block;margin-top:7px;font:900 18px/1.15 'Noto Serif SC',serif;text-shadow:0 2px 10px rgba(0,0,0,.3)}
.rv-bn u{display:inline-block;margin-top:9px;text-decoration:none;font-size:10px;font-weight:700;color:#8c2a1d;background:#fff;padding:4px 10px;border-radius:99px;box-shadow:0 8px 14px -6px rgba(0,0,0,.4)}
/* —— 产品详情写作:文案编辑器窗口 —— */
.rv-doc{background:#fff;border-radius:12px;padding:0 12px 10px;overflow:hidden;box-shadow:0 18px 28px -18px rgba(50,35,120,.55);display:flex;flex-direction:column;gap:8px}
.rv-doc .bar{display:flex;align-items:center;gap:5px;margin:0 -12px;padding:7px 12px;background:#f4f2fc;border-bottom:1px solid #e8e4f6}
.rv-doc .bar i{width:7px;height:7px;border-radius:50%;background:#d6d0ee}
.rv-doc .bar b{margin-left:6px;font:600 10.5px/1 Inter,sans-serif;color:#5a4bb0;white-space:nowrap}
.rv-doc .bar u{margin-left:auto;text-decoration:none;font:600 9px/1 'JetBrains Mono',monospace;color:#fff;background:linear-gradient(135deg,#8d7ae0,#6b57c4);padding:3px 7px;border-radius:99px;white-space:nowrap}
.rv-doc .hd{display:flex;gap:10px;align-items:center}
.rv-doc .th{position:relative;flex:none;width:46px;height:46px;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#efeaff,#cfc6f3)}
.rv-doc .th .pd{position:absolute;left:50%;bottom:-2px;height:88%;transform:translateX(-50%);filter:drop-shadow(0 4px 3px rgba(0,0,0,.25))}
.rv-doc .tt{flex:1;min-width:0}
.rv-doc .h1{display:block;height:10px;width:72%;border-radius:6px;background:#2a2450}
.rv-doc .h2{display:block;height:6px;width:48%;border-radius:6px;background:#c9c2e8;margin-top:6px}
.rv-doc .tags{display:flex;gap:4px;margin-top:6px}.rv-doc .tags span{font-size:9px;font-weight:600;color:#5a4bb0;background:#efeaff;padding:2px 6px;border-radius:99px}
.rv-doc .tb{display:none}
.rv-doc .ln{height:6px;margin:0;background:#ebe8f6;border-radius:3px}
.rv-doc .ln.cur{background:linear-gradient(90deg,#8d7ae0 62%,#ebe8f6 62%);position:relative}
.rv-doc .ln.cur::after{content:"";position:absolute;left:62%;top:-3px;width:2px;height:12px;background:#6b57c4;animation:rvCaret 1s steps(1) infinite}
/* —— 文章写作:大纲 + 正文编辑器 —— */
.rv-ed{display:grid;grid-template-columns:82px 1fr;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 18px 28px -18px rgba(10,70,66,.55)}
.rv-ed .ol{padding:9px 7px;background:#f1f8f7;border-right:1px solid #dcebe8;display:flex;flex-direction:column;gap:5px}
.rv-ed .ol b{font:700 10px/1 Inter,sans-serif;color:#1b827c;margin-bottom:1px}
.rv-ed .ol span{display:flex;align-items:center;gap:5px;font-size:9.5px;color:#4a6662;padding:4px 5px;border-radius:6px;white-space:nowrap;overflow:hidden}
.rv-ed .ol span i{width:13px;height:13px;border-radius:4px;background:#d3e8e5;color:#1b827c;font:700 8.5px/13px 'JetBrains Mono',monospace;text-align:center;font-style:normal;flex:none}
.rv-ed .ol span.on{background:linear-gradient(135deg,#2fa7a0,#1b827c);color:#fff;font-weight:600}
.rv-ed .ol span.on i{background:rgba(255,255,255,.25);color:#fff}
.rv-ed .pg{padding:10px 11px;display:flex;flex-direction:column;gap:6px;position:relative}
.rv-ed .h1{display:block;height:10px;width:66%;border-radius:6px;background:#12312e;margin-bottom:2px}
.rv-ed .ln{height:5px;margin:0;background:#e3eeec;border-radius:3px}
.rv-ed .ln.cur{background:linear-gradient(90deg,#2fa7a0 58%,#e3eeec 58%);position:relative}
.rv-ed .ln.cur::after{content:"";position:absolute;left:58%;top:-3px;width:2px;height:11px;background:#1b827c;animation:rvCaret 1s steps(1) infinite}
.rv-ed .im{display:grid;grid-template-columns:1fr 1fr;gap:5px;height:24px}
.rv-ed .im i{border-radius:6px;background:linear-gradient(135deg,#bfe6d4,#78b79a)}.rv-ed .im i+i{background:linear-gradient(135deg,#ffd9c6,#f0a58c)}
.rv-ed .ft{display:flex;gap:5px;margin-top:auto}
.rv-ed .ft span{font:600 8.5px/1 'JetBrains Mono',monospace;color:#1b827c;background:#e3f3f1;padding:3px 6px;border-radius:99px}
@keyframes rvCaret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.rv-doc .ln.cur::after,.rv-ed .ln.cur::after{animation:none}}
/* —— SEO · GEO:双得分 —— */
.rv-sg{display:flex;align-items:center;justify-content:space-around;gap:8px}
.rv-sg .dial{position:relative;flex:none;width:76px;height:76px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(11,20,16,.09) 0);box-shadow:0 14px 20px -14px rgba(11,20,16,.5)}
.rv-sg .dial::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}
.rv-sg .dial b,.rv-sg .dial small{position:relative;z-index:1}
.rv-sg .dial b{font:700 23px/1 'JetBrains Mono',monospace;color:#14201a}
.rv-sg .dial small{font:700 9px/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:#62736a;margin-top:3px}
.rv-sg .dial.s{--c:#1f9d72}.rv-sg .dial.g{--c:#d9a441}
.rv-sg .iss{display:flex;flex-direction:column;gap:5px}
.rv-sg .iss span{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap;text-align:center}
.rv-sg .iss .f{background:#fbeceb;color:#9e2a1e}.rv-sg .iss .w{background:#fbf0d8;color:#8f6f30}.rv-sg .iss .p{background:#e4efe0;color:#2e6b3a}
/* —— SEO 学习教练:进度环 + 章节 —— */
.rv-lrn{display:flex;align-items:center;gap:14px}
.rv-lrn .pr{position:relative;flex:none;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:conic-gradient(var(--ac) calc(var(--p)*1%),rgba(11,20,16,.09) 0);box-shadow:0 14px 20px -14px rgba(11,20,16,.5)}
.rv-lrn .pr::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}
.rv-lrn .pr b{position:relative;z-index:1;font:700 16px/1 'JetBrains Mono',monospace;color:#14201a}
.rv-lrn ul{list-style:none;margin:0;padding:0;flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.rv-lrn li{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:#25352c;padding:5px 9px;border-radius:9px;
background:#fff;border:1px solid #e1e8e3;white-space:nowrap;overflow:hidden}
.rv-lrn li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:2px solid #cfd9d2;box-sizing:border-box}
.rv-lrn li.ok::before{content:"✓";background:var(--ac);border-color:var(--ac);color:#fff;font-size:9px;line-height:10px;text-align:center;font-weight:700}
.rv-lrn li.on{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 16%,transparent)}
.rv-lrn li.on::before{border-color:var(--ac)}
/* 窄屏 */
@media(max-width:600px){
.rv-grid4{grid-template-columns:repeat(2,1fr)}
.rv-grid4 .rv-sc:nth-child(n+3){display:none}
}