/* 页面级样式 — 提取自 网站前端模板/product.html */
/* ================================================================
产品全集专用样式
================================================================ */
:root{
--prod-cyan:#22d3ee; --prod-blue:#3b82f6; --prod-green:#34d399;
--prod-amber:#f59e0b; --prod-violet:#8b5cf6; --prod-pink:#fb7185;
--ph-art-op:.15; /* 深色模式 Hero 背景图透明度 10% */
}
[data-theme="light"]{ --prod-window:#0b1220; --prod-wintxt:#e6edf7; --prod-winline:rgba(255,255,255,.08); --ph-art-op:.15; }
:root{ --prod-window:#0b1220; --prod-wintxt:#e6edf7; --prod-winline:rgba(255,255,255,.08); }
/* ---------- Hero ---------- */
.ph-hero{
position:relative; overflow:hidden; padding:118px 0 84px;
background-image:
radial-gradient(1000px 460px at 82% -10%, rgba(139,92,246,.22), transparent 60%),
radial-gradient(800px 420px at 8% 0%, rgba(34,211,238,.16), transparent 55%);
background-repeat:no-repeat;
background-color:var(--bg);
}
/* 背景图独立成层，便于控制透明度 */
.ph-hero::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:url("/assets/images/banner3.jpg") center/cover no-repeat;
opacity:var(--ph-art-op);
}
.ph-hero .wrap{ position:relative; z-index:2; }
.ph-tag{
display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:999px;
border:1px solid var(--line); background:var(--panel); font-size:13px; color:var(--txt2);
}
.ph-tag i{ width:8px; height:8px; border-radius:50%; background:var(--prod-cyan); box-shadow:0 0 10px var(--prod-cyan); }
.ph-hero h1{ font-size:clamp(34px,5vw,56px); font-weight:800; line-height:1.15; margin:20px 0 16px; }
.ph-hero h1 em{ font-style:normal; background:linear-gradient(90deg,#22d3ee,#8b5cf6,#fb7185); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ph-hero .sub{ max-width:760px; color:var(--txt2); font-size:16px; line-height:1.9; }
.ph-stats{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.ph-stat{
min-width:150px; padding:16px 20px; border-radius:16px; background:var(--panel);
border:1px solid var(--line); position:relative; overflow:hidden;
}
.ph-stat::after{ content:""; position:absolute; inset:auto 0 0 0; height:3px; background:linear-gradient(90deg,var(--sc,#22d3ee),transparent); }
.ph-stat b{ font-size:26px; display:block; }
.ph-stat small{ color:var(--txt2); font-size:12.5px; }
.ph-hero .ph-cta{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
/* 手机端：hero 渐变标题是 fit-content 收缩块，text-align:center 管不到，需 margin auto 居中 */
@media(max-width:600px){
.ph-hero h1{ margin-left:auto; margin-right:auto; }
}
/* ---------- 层级导航 ---------- */
.lb-nav{
position:sticky; top:76px; z-index:90; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
background:color-mix(in srgb, var(--bg) 78%, transparent); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.lb-nav .wrap{ display:flex; gap:4px; overflow-x:auto; padding:10px 0; scrollbar-width:none; }
.lb-nav .wrap::-webkit-scrollbar{ display:none; }
.lb-nav a{
flex:none; display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
font-size:14px; color:var(--txt2); border:1px solid transparent; transition:.25s; white-space:nowrap;
}
.lb-nav a i{ width:8px; height:8px; border-radius:50%; background:var(--sc,#22d3ee); opacity:.85; }
.lb-nav a:hover{ color:var(--txt); border-color:var(--line); background:var(--panel); }
.lb-nav a.on{ color:#fff; background:var(--sc,#22d3ee); box-shadow:0 6px 18px color-mix(in srgb, var(--sc,#22d3ee) 40%, transparent); }
.lb-nav a.on i{ background:#fff; }
/* ---------- 层级分区 ---------- */
.lp-sec{ padding:72px 0 24px; scroll-margin-top:150px; }
.lp-head{ display:flex; align-items:flex-start; gap:20px; margin-bottom:38px; }
.lp-num{
flex:none; width:72px; height:72px; border-radius:20px; display:grid; place-items:center;
font-size:30px; font-weight:800; color:#fff; background:linear-gradient(135deg, var(--lc,#22d3ee), color-mix(in srgb,var(--lc,#22d3ee) 55%, #0b1220));
box-shadow:0 14px 30px color-mix(in srgb, var(--lc,#22d3ee) 35%, transparent); position:relative;
}
.lp-num::after{ content:""; position:absolute; inset:6px; border:1px dashed rgba(255,255,255,.4); border-radius:14px; }
.lp-head h2{ font-size:clamp(24px,3.4vw,34px); margin:2px 0 6px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.lp-head h2 small{ font-size:14px; font-weight:600; letter-spacing:.12em; color:var(--lc); text-transform:uppercase; }
.lp-head p{ color:var(--txt2); font-size:15px; line-height:1.85; max-width:860px; margin:0; }
.lp-desc{ background:linear-gradient(90deg, color-mix(in srgb,var(--lc) 10%, transparent), transparent); border-left:3px solid var(--lc); padding:12px 18px; border-radius:0 12px 12px 0; margin:16px 0 8px; }
.lp-desc p{ margin:0; color:var(--txt2); font-size:14px; line-height:1.85; }
/* ---------- 产品模块通用 ---------- */
.p-prod{ position:relative; margin:34px 0; border-radius:22px; background:var(--panel); border:1px solid var(--line); overflow:hidden; transition:.35s; }
.p-prod:hover{ border-color:color-mix(in srgb, var(--pc,#22d3ee) 45%, var(--line)); box-shadow:0 18px 44px color-mix(in srgb, var(--pc,#22d3ee) 14%, transparent); transform:translateY(-3px); }
.p-prod::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--pc,#22d3ee),transparent 70%); opacity:.9; }
.p-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:0; }
.p-body{ padding:30px 32px 32px; min-width:0; }
.p-art{ position:relative; padding:26px; background:
radial-gradient(120% 140% at 20% 0%, color-mix(in srgb,var(--pc,#22d3ee) 13%, transparent), transparent 55%),
color-mix(in srgb, var(--panel) 92%, #000 8%);
border-right:1px solid var(--line); display:grid; align-content:center; min-height:340px; }
.p-art::after{ content:""; position:absolute; inset:14px; border:1px dashed color-mix(in srgb,var(--pc,#22d3ee) 22%, transparent); border-radius:16px; pointer-events:none; }
.p-art > *{ position:relative; z-index:1; }
.p-no{
display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--pc,#22d3ee);
}
.p-no::before{ content:""; width:22px; height:2px; background:var(--pc,#22d3ee); }
.p-name{ font-size:clamp(20px,2.6vw,26px); margin:10px 0 4px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-weight:800; }
.p-abbr{
font-size:12px; font-weight:800; letter-spacing:.06em; padding:4px 10px; border-radius:8px; color:#fff;
background:linear-gradient(135deg,var(--pc,#22d3ee),color-mix(in srgb,var(--pc,#22d3ee) 60%, #0b1220));
}
.p-brief{ color:var(--txt2); font-size:14.5px; line-height:1.85; margin:10px 0 14px; }
.p-mods{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; }
.p-mods span{
font-size:12.5px; padding:6px 12px; border-radius:999px; border:1px solid color-mix(in srgb,var(--pc,#22d3ee) 38%, transparent);
background:color-mix(in srgb,var(--pc,#22d3ee) 9%, transparent); color:var(--txt); font-weight:600;
}
.p-desc{ color:var(--txt2); font-size:13.8px; line-height:1.95; margin:16px 0 0; }
.p-feats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin-top:16px; }
.p-feats span{
font-size:12.5px; padding:8px 11px; border-radius:10px; background:color-mix(in srgb,var(--pc,#22d3ee) 7%, var(--panel));
border:1px solid var(--line); color:var(--txt2); display:flex; align-items:center; gap:6px;
}
.p-feats span::before{ content:"✓"; color:var(--pc,#22d3ee); font-weight:800; flex:none; }
.p-feats-num{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:8px; }
.p-feats-num li{
font-size:13px; color:var(--txt2); display:flex; gap:10px; align-items:flex-start; line-height:1.6;
padding:8px 12px; border-radius:10px; background:var(--panel); border:1px solid var(--line);
}
.p-feats-num li i{
flex:none; width:22px; height:22px; border-radius:7px; display:grid; place-items:center; font-style:normal;
font-size:11.5px; font-weight:800; color:#fff; background:var(--pc,#22d3ee);
}
.p-feats-num li b{ color:var(--txt); font-weight:600; }
.p-more{
display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-size:13px; font-weight:700; color:var(--pc,#22d3ee);
}
.p-more::after{ content:"→"; transition:.3s; }
.p-prod:hover .p-more::after{ transform:translateX(4px); }
/* ===== 8 种布局变体 ===== */
/* L1 左图右文 (art+body) */
.pl-1 .p-grid{ grid-template-columns:1fr 1.15fr; }
.pl-1 .p-art{ border-right:1px solid var(--line); border-left:none; }
/* L2 右图左文 (body+art) */
.pl-2 .p-grid{ grid-template-columns:1.15fr 1fr; }
.pl-2 .p-art{ border-right:none; border-left:1px solid var(--line); }
/* L3 上图下文 (art+body) */
.pl-3 .p-grid{ grid-template-columns:1fr; }
.pl-3 .p-art{ border-right:none; border-bottom:1px solid var(--line); min-height:auto; }
.pl-3 .p-art .app-shell{ max-width:720px; margin:0 auto; }
/* L4 下图上文 (body+art) */
.pl-4 .p-grid{ grid-template-columns:1fr; }
.pl-4 .p-art{ border-right:none; border-top:1px solid var(--line); min-height:auto; }
.pl-4 .p-art .app-shell{ max-width:720px; margin:0 auto; }
/* L5 浮图右上 (body+art, art absolute 右上) */
.pl-5 .p-grid{ grid-template-columns:1fr 1fr; }
.pl-5 .p-art{
position:absolute; top:26px; right:26px; width:330px; border:1px solid var(--line); border-radius:16px;
min-height:0; padding:16px; box-shadow:0 22px 50px rgba(0,0,0,.28); z-index:2;
}
.pl-5 .p-body{ padding-right:392px; }
@media (max-width:1100px){ .pl-5 .p-grid{ grid-template-columns:1fr; } .pl-5 .p-art{ position:relative; top:0; right:0; width:auto; border-radius:0; } .pl-5 .p-body{ padding-right:32px; } }
/* L6 左图宽 + 右功能网格 (art+body) */
.pl-6 .p-grid{ grid-template-columns:1fr 1fr; }
.pl-6 .p-art{ border-right:1px solid var(--line); border-left:none; min-height:400px; }
/* L7 右图宽 + 左编号功能列表 (body+art) */
.pl-7 .p-grid{ grid-template-columns:1fr 1fr; }
.pl-7 .p-art{ border-right:none; border-left:1px solid var(--line); min-height:400px; }
/* L8 全宽横幅 (art+body) */
.pl-8 .p-grid{ grid-template-columns:1fr; }
.pl-8 .p-art{ border-right:none; border-bottom:1px solid var(--line); min-height:auto; }
.pl-8 .p-art .app-shell{ max-width:860px; margin:0 auto; }
/* L9 左右分栏 · 编号功能清单 + 系统界面（HCM 专属） */
.pl-9 .p-grid{ grid-template-columns:1.18fr .82fr; }
.pl-9 .p-body{ padding:32px 38px 34px; }
.pl-9 .p-art{
border-right:none; border-left:1px solid var(--line); min-height:360px; padding:18px;
background:
radial-gradient(130% 150% at 85% -10%, color-mix(in srgb,var(--pc,#22d3ee) 16%, transparent), transparent 55%),
linear-gradient(180deg, color-mix(in srgb,var(--panel) 97%, #000 3%), color-mix(in srgb,var(--panel) 90%, #000 10%));
}
.pl-9 .p-art::after{ inset:14px; border-radius:16px; }
.pl-9 .p-art .app-shell{ height:100%; display:flex; flex-direction:column; }
.pl-9 .p-art .app-body{ display:flex; flex-direction:column; }
.pl-9 .p-art .ui-table{ flex:1; }
.pl-9 .p-brief{ font-size:14px; }
.pl-9 .p-mods span{ background:color-mix(in srgb,var(--pc,#22d3ee) 10%, var(--panel)); }
.pl-9 .p-feats-num{ grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.pl-9 .p-feats-num li{ padding:11px 12px; }
.pl-9 .p-feats-num li i{
background:linear-gradient(135deg,var(--pc,#22d3ee),color-mix(in srgb,var(--pc,#22d3ee) 50%, #0b1220));
box-shadow:0 3px 10px color-mix(in srgb,var(--pc,#22d3ee) 35%, transparent);
}
@media (max-width:1100px){ .pl-9 .p-grid{ grid-template-columns:1fr; } .pl-9 .p-art{ border-left:none; border-top:1px solid var(--line); min-height:0; } }
/* L10 上图下文 · 全宽检测看板 + 信息区（LIMS 专属） */
.pl-10 .p-grid{ grid-template-columns:1fr; }
.pl-10 .p-art{
border-right:none; border-bottom:1px solid var(--line); min-height:auto; padding:22px 28px;
background:
radial-gradient(120% 160% at 50% -20%, color-mix(in srgb,var(--pc,#fb7185) 13%, transparent), transparent 55%),
color-mix(in srgb, var(--panel) 92%, #000 8%);
}
.pl-10 .p-art::after{ inset:14px; border-radius:16px; }
.pl-10 .p-art .app-shell{ max-width:880px; margin:0 auto; }
.pl-10 .p-body{ padding:32px 38px 34px; }
.pl-10 .p-feats-num{ grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.pl-10 .p-feats-num li{ padding:11px 12px; }
.pl-10 .p-feats-num li i{
background:linear-gradient(135deg,var(--pc,#fb7185),color-mix(in srgb,var(--pc,#fb7185) 50%, #0b1220));
box-shadow:0 3px 10px color-mix(in srgb,var(--pc,#fb7185) 35%, transparent);
}
.pl-10 .p-mods span{ background:color-mix(in srgb,var(--pc,#fb7185) 10%, var(--panel)); }
@media (max-width:760px){ .pl-10 .p-feats-num{ grid-template-columns:1fr 1fr; } }
/* L11 左图右文 · 文档库界面 + 信息区（DMS 专属） */
.pl-11 .p-grid{ grid-template-columns:.85fr 1.15fr; }
.pl-11 .p-art{
border-right:1px solid var(--line); border-left:none; min-height:360px; padding:18px;
background:
radial-gradient(130% 150% at 15% -10%, color-mix(in srgb,var(--pc,#8b5cf6) 16%, transparent), transparent 55%),
linear-gradient(180deg, color-mix(in srgb,var(--panel) 97%, #000 3%), color-mix(in srgb,var(--panel) 90%, #000 10%));
}
.pl-11 .p-art::after{ inset:14px; border-radius:16px; }
.pl-11 .p-art .app-shell{ height:100%; display:flex; flex-direction:column; }
.pl-11 .p-art .app-body{ display:flex; flex-direction:column; }
.pl-11 .p-art .ui-doc{ flex:1; }
.pl-11 .p-body{ padding:32px 38px 34px; }
.pl-11 .p-feats-num{ grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.pl-11 .p-feats-num li{ padding:11px 12px; }
.pl-11 .p-feats-num li i{
background:linear-gradient(135deg,var(--pc,#8b5cf6),color-mix(in srgb,var(--pc,#8b5cf6) 50%, #0b1220));
box-shadow:0 3px 10px color-mix(in srgb,var(--pc,#8b5cf6) 35%, transparent);
}
.pl-11 .p-mods span{ background:color-mix(in srgb,var(--pc,#8b5cf6) 10%, var(--panel)); }
@media (max-width:1100px){ .pl-11 .p-grid{ grid-template-columns:1fr; } .pl-11 .p-art{ border-right:none; border-bottom:1px solid var(--line); min-height:0; } }
/* L12 上图下文 · AI 识别演示 + 信息区（OCR 专属） */
.pl-12 .p-grid{ grid-template-columns:1fr; }
.pl-12 .p-art{
border-right:none; border-bottom:1px solid var(--line); min-height:auto; padding:22px 28px;
background:
radial-gradient(120% 160% at 50% -20%, color-mix(in srgb,var(--pc,#34d399) 13%, transparent), transparent 55%),
color-mix(in srgb, var(--panel) 92%, #000 8%);
}
.pl-12 .p-art::after{ inset:14px; border-radius:16px; }
.pl-12 .p-art .app-shell{ max-width:880px; margin:0 auto; }
.pl-12 .p-body{ padding:32px 38px 34px; }
.pl-12 .p-feats-num{ grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.pl-12 .p-feats-num li{ padding:11px 12px; }
.pl-12 .p-feats-num li i{
background:linear-gradient(135deg,var(--pc,#34d399),color-mix(in srgb,var(--pc,#34d399) 50%, #0b1220));
box-shadow:0 3px 10px color-mix(in srgb,var(--pc,#34d399) 35%, transparent);
}
.pl-12 .p-mods span{ background:color-mix(in srgb,var(--pc,#34d399) 10%, var(--panel)); }
@media (max-width:760px){ .pl-12 .p-feats-num{ grid-template-columns:1fr 1fr; } }
/* L13 左图右文 · 风险监控中心 + 信息区（AIRM 专属） */
.pl-13 .p-grid{ grid-template-columns:.85fr 1.15fr; }
.pl-13 .p-art{
border-right:1px solid var(--line); border-left:none; min-height:360px; padding:18px;
background:
radial-gradient(130% 150% at 15% -10%, color-mix(in srgb,var(--pc,#3b82f6) 16%, transparent), transparent 55%),
linear-gradient(180deg, color-mix(in srgb,var(--panel) 97%, #000 3%), color-mix(in srgb,var(--panel) 90%, #000 10%));
}
.pl-13 .p-art::after{ inset:14px; border-radius:16px; }
.pl-13 .p-art .app-shell{ height:100%; display:flex; flex-direction:column; }
.pl-13 .p-art .app-body{ display:flex; flex-direction:column; }
.pl-13 .p-art .ui-risk-alerts{ flex:1; }
.pl-13 .p-body{ padding:32px 38px 34px; }
.pl-13 .p-feats-num{ grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.pl-13 .p-feats-num li{ padding:11px 12px; }
.pl-13 .p-feats-num li i{
background:linear-gradient(135deg,var(--pc,#3b82f6),color-mix(in srgb,var(--pc,#3b82f6) 50%, #0b1220));
box-shadow:0 3px 10px color-mix(in srgb,var(--pc,#3b82f6) 35%, transparent);
}
.pl-13 .p-mods span{ background:color-mix(in srgb,var(--pc,#3b82f6) 10%, var(--panel)); }
@media (max-width:1100px){ .pl-13 .p-grid{ grid-template-columns:1fr; } .pl-13 .p-art{ border-right:none; border-bottom:1px solid var(--line); min-height:0; } }
/* ===== 软件界面示意图（配图） ===== */
.app-shell{
width:100%; border-radius:14px; overflow:hidden; background:var(--prod-window); color:var(--prod-wintxt);
border:1px solid var(--prod-winline); box-shadow:0 24px 60px rgba(2,8,20,.45); font-size:12px;
}
.win-bar{
display:flex; align-items:center; gap:6px; padding:9px 13px; background:rgba(255,255,255,.05);
border-bottom:1px solid var(--prod-winline);
}
.win-bar i{ width:9px; height:9px; border-radius:50%; display:block; }
.win-bar i:nth-child(1){ background:#ff5f57; } .win-bar i:nth-child(2){ background:#febc2e; } .win-bar i:nth-child(3){ background:#28c840; }
.win-bar span{ margin-left:8px; opacity:.65; font-size:11px; letter-spacing:.03em; }
.app-body{ padding:16px; }
.ui-board{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ui-board .bk{
border-radius:10px; padding:12px 10px; background:rgba(255,255,255,.05); border:1px solid var(--prod-winline);
}
.ui-board .bk b{ font-size:20px; display:block; line-height:1.2; }
.ui-board .bk small{ opacity:.6; font-size:10.5px; }
.ui-board .bk i{ display:block; height:4px; border-radius:3px; margin-top:8px; background:linear-gradient(90deg,var(--pc),transparent); width:70%; }
.ui-board .bars{ grid-column:1/-1; display:flex; align-items:flex-end; gap:6px; height:66px; padding:8px; border-radius:10px; background:rgba(255,255,255,.04); }
.ui-board .bars span{ flex:1; border-radius:3px 3px 0 0; background:linear-gradient(180deg,var(--pc),color-mix(in srgb,var(--pc) 20%, transparent)); min-height:10%; }
.ui-table .trow{ display:grid; grid-template-columns:1.6fr .9fr; gap:8px; padding:8px 10px; border-radius:8px; font-size:11.5px; }
.ui-table .trow + .trow{ margin-top:6px; }
.ui-table .trow.th{ background:rgba(255,255,255,.06); font-weight:700; opacity:.75; }
.ui-table .trow:not(.th){ background:rgba(255,255,255,.04); }
.ui-table .trow em{ font-style:normal; display:inline-flex; align-items:center; gap:5px; }
.ui-table .trow em::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--pc); box-shadow:0 0 8px var(--pc); }
.ui-chart{ display:flex; align-items:flex-end; gap:10px; height:150px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.04); }
.ui-chart span{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; justify-content:flex-end; height:100%; }
.ui-chart span i{ width:70%; border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--pc),color-mix(in srgb,var(--pc) 18%, transparent)); }
.ui-chart span small{ font-size:9.5px; opacity:.55; }
.ui-chat{ display:grid; gap:8px; }
.ui-chat .cm{ max-width:78%; padding:8px 11px; border-radius:11px; font-size:11.5px; line-height:1.6; }
.ui-chat .cm.in{ justify-self:start; background:rgba(255,255,255,.07); border-bottom-left-radius:3px; }
.ui-chat .cm.out{ justify-self:end; background:var(--pc); color:#08121f; font-weight:600; border-bottom-right-radius:3px; }
.ui-chat .cs{ justify-self:center; font-size:10px; opacity:.5; }
.ui-flow{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.ui-flow .fn{
flex:1; min-width:72px; text-align:center; padding:9px 4px; border-radius:9px; font-size:10.5px; font-weight:700;
background:rgba(255,255,255,.06); border:1px solid var(--prod-winline); position:relative;
}
.ui-flow .fn::after{ content:"→"; position:absolute; right:-12px; top:50%; transform:translateY(-50%); color:var(--pc); font-weight:900; }
.ui-flow .fn:last-child::after{ display:none; }
.ui-flow .fn.on{ background:color-mix(in srgb,var(--pc) 26%, transparent); border-color:var(--pc); color:#fff; }
.ui-term{ font-family:ui-monospace,Consolas,monospace; font-size:11px; line-height:1.9; background:rgba(0,0,0,.4); border-radius:10px; padding:12px 14px; }
.ui-term .t1{ color:#7dd3fc; } .ui-term .t2{ color:#86efac; } .ui-term .t3{ color:#fbbf24; } .ui-term .t4{ opacity:.55; }
.ui-term .cur::after{ content:"▊"; color:var(--pc); animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.ui-pie{ position:relative; width:170px; height:170px; margin:0 auto; }
.ui-pie svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ui-pie .pb{ fill:none; stroke-width:16; stroke-linecap:round; }
.ui-pie .pbg{ stroke:rgba(255,255,255,.08); }
.ui-pie .pfg{ stroke:var(--pc); transition:.8s; }
.ui-pie .ctr{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.ui-pie .ctr b{ font-size:24px; } .ui-pie .ctr small{ display:block; opacity:.55; font-size:10px; }
.ui-line{ position:relative; }
.ui-line svg{ width:100%; height:150px; display:block; }
.ui-line .area{ fill:color-mix(in srgb,var(--pc) 26%, transparent); }
.ui-line .line{ fill:none; stroke:var(--pc); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.ui-line .dot{ fill:var(--pc); }
.ui-line .grid{ stroke:rgba(255,255,255,.07); stroke-width:1; }
.ui-radar{ width:190px; height:190px; margin:0 auto; }
.ui-radar svg{ width:100%; height:100%; }
.ui-radar .rg{ fill:none; stroke:rgba(255,255,255,.1); }
.ui-radar .rf{ fill:color-mix(in srgb,var(--pc) 34%, transparent); stroke:var(--pc); stroke-width:2; }
.ui-radar .rd{ fill:var(--pc); }
.ui-topo{ position:relative; height:210px; display:grid; place-items:center; }
.ui-topo .tc{
position:absolute; width:88px; height:88px; border-radius:50%; display:grid; place-items:center; text-align:center;
background:radial-gradient(circle at 32% 30%, color-mix(in srgb,var(--pc) 55%, #0b1220), #0b1220 75%);
border:2px solid var(--pc); box-shadow:0 0 30px color-mix(in srgb,var(--pc) 45%, transparent); font-size:10.5px; font-weight:800;
}
.ui-topo .tc.center{ z-index:3; }
.ui-topo .ts{ position:absolute; width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:9.5px; font-weight:700; background:rgba(255,255,255,.07); border:1px solid var(--prod-winline); text-align:center; z-index:2; }
.ui-topo .ts.on{ border-color:var(--pc); color:var(--pc); }
.ui-topo svg{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.ui-topo svg line{ stroke:var(--pc); stroke-width:1.4; opacity:.5; stroke-dasharray:3 4; }
.ui-list{ display:grid; gap:7px; }
.ui-list .li{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px; background:rgba(255,255,255,.05); font-size:11.5px; }
.ui-list .li i{ flex:none; width:20px; height:20px; border-radius:6px; display:grid; place-items:center; font-style:normal; font-weight:800; font-size:10px; background:color-mix(in srgb,var(--pc) 30%, transparent); color:#fff; }
.ui-list .li span{ opacity:.85; }
.ui-list .li em{ margin-left:auto; font-style:normal; width:7px; height:7px; border-radius:50%; background:var(--pc); box-shadow:0 0 8px var(--pc); }
.ui-gauge{ position:relative; width:190px; height:120px; margin:0 auto; }
.ui-gauge svg{ width:100%; height:100%; }
.ui-gauge .gb{ fill:none; stroke:rgba(255,255,255,.09); stroke-width:14; stroke-linecap:round; }
.ui-gauge .gf{ fill:none; stroke:var(--pc); stroke-width:14; stroke-linecap:round; filter:drop-shadow(0 0 6px color-mix(in srgb,var(--pc) 60%, transparent)); }
.ui-gauge .gv{ font-size:22px; font-weight:800; fill:var(--prod-wintxt); text-anchor:middle; }
.ui-gauge .gl{ font-size:8px; fill:rgba(255,255,255,.5); text-anchor:middle; }
.app-legend{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:12px; }
.app-legend span{ font-size:10px; padding:4px 9px; border-radius:999px; border:1px solid var(--prod-winline); opacity:.75; }
.ui-hcm-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px; }
.ui-hcm-stats div{ border-radius:10px; padding:10px 6px; text-align:center; background:rgba(255,255,255,.05); border:1px solid var(--prod-winline); }
.ui-hcm-stats b{ font-size:16px; display:block; line-height:1.25; }
.ui-hcm-stats small{ opacity:.55; font-size:9.5px; }
.ui-hcm-bar{ margin-top:10px; border-radius:9px; background:rgba(255,255,255,.06); height:26px; position:relative; overflow:hidden; border:1px solid var(--prod-winline); }
.ui-hcm-bar span{ display:block; height:100%; border-radius:9px; opacity:.75; }
.ui-hcm-bar small{ position:absolute; inset:0; display:grid; place-items:center; font-size:10px; font-weight:700; }
.ui-lab-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px; }
.ui-lab-stats div{ border-radius:10px; padding:10px 6px; text-align:center; background:rgba(255,255,255,.05); border:1px solid var(--prod-winline); }
.ui-lab-stats b{ font-size:16px; display:block; line-height:1.25; }
.ui-lab-stats small{ opacity:.55; font-size:9.5px; }
.ui-lab-flow{ display:flex; align-items:center; gap:6px; margin-bottom:10px; padding:12px 14px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid var(--prod-winline); }
.ui-lab-flow span{ flex:1; text-align:center; font-size:10.5px; font-weight:700; padding:7px 4px; border-radius:8px; background:rgba(255,255,255,.05); border:1px solid var(--prod-winline); color:var(--prod-wintxt); opacity:.6; }
.ui-lab-flow span.on{ background:color-mix(in srgb,var(--pc) 28%, transparent); border-color:var(--pc); color:#fff; opacity:1; box-shadow:0 0 14px color-mix(in srgb,var(--pc) 35%, transparent); }
.ui-lab-flow i{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--pc); opacity:.55; }
@media (max-width:560px){ .ui-lab-stats{ grid-template-columns:repeat(2,1fr); } }
.ui-doc-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px; }
.ui-doc-meta div{ border-radius:10px; padding:10px 6px; text-align:center; background:rgba(255,255,255,.05); border:1px solid var(--prod-winline); }
.ui-doc-meta b{ font-size:16px; display:block; line-height:1.25; }
.ui-doc-meta small{ opacity:.55; font-size:9.5px; }
.ui-doc{ display:grid; grid-template-columns:.95fr 1.35fr; gap:10px; min-height:150px; }
.ui-doc-tree{ border-radius:10px; padding:10px; background:rgba(255,255,255,.04); border:1px solid var(--prod-winline); display:flex; flex-direction:column; gap:6px; }
.ui-doc-tree b{ font-size:11px; opacity:.6; padding:2px 6px; }
.ui-doc-tree span{ font-size:11px; padding:7px 9px; border-radius:8px; background:rgba(255,255,255,.05); color:var(--prod-wintxt); opacity:.7; }
.ui-doc-tree span.on{ background:color-mix(in srgb,var(--pc) 26%, transparent); border:1px solid var(--pc); color:#fff; opacity:1; }
.ui-doc-files{ display:flex; flex-direction:column; gap:7px; }
.ui-doc-files div{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px; background:rgba(255,255,255,.05); border:1px solid var(--prod-winline); }
.ui-doc-files b{ font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui-doc-files small{ opacity:.5; font-size:9.5px; flex:none; }
.ui-doc-files em{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--pc); box-shadow:0 0 8px var(--pc); margin-left:auto; }
@media (max-width:560px){ .ui-doc-meta{ grid-template-columns:repeat(2,1fr); } }
.ui-ocr{ display:grid; grid-template-columns:.88fr 1.12fr; gap:10px; }
.ui-ocr-bill{
border-radius:10px; padding:14px; position:relative; overflow:hidden;
background:linear-gradient(165deg,#fffdf6,#fdf5e6); color:#1c2333;
box-shadow:0 10px 26px rgba(0,0,0,.32);
}
.ui-ocr-bill::after{
content:"发票专用章"; position:absolute; right:8px; bottom:8px; width:56px; height:56px; border-radius:50%;
border:2px solid rgba(225,29,72,.45); color:rgba(225,29,72,.6); display:grid; place-items:center;
font-size:7.5px; font-weight:800; transform:rotate(-18deg); letter-spacing:.02em;
}
.ob-head{ text-align:center; font-weight:800; font-size:12.5px; letter-spacing:.08em; }
.ob-num{ text-align:center; font-size:8.5px; opacity:.55; margin:2px 0 8px; }
.ob-row{ display:flex; justify-content:space-between; gap:8px; font-size:9.5px; padding:4px 0; border-bottom:1px dashed rgba(0,0,0,.14); }
.ob-row span{ opacity:.6; flex:none; }
.ob-row i{ font-style:normal; font-weight:700; }
.ui-ocr-out{ display:flex; flex-direction:column; gap:7px; }
.of{ background:rgba(255,255,255,.05); border:1px solid var(--prod-winline); border-radius:9px; padding:7px 10px 9px; }
.of small{ font-size:9px; opacity:.55; }
.of em{ float:right; font-style:normal; font-size:9.5px; font-weight:700; }
.of b{ font-size:11.5px; display:block; margin:2px 0 5px; }
.of i{ display:block; height:4px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; }
.of i span{ display:block; height:100%; border-radius:3px; }
.ui-ocr-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; justify-content:center; }
.ui-ocr-chips span{ font-size:10px; padding:4px 10px; border-radius:999px; border:1px solid var(--prod-winline); opacity:.7; }
@media (max-width:560px){ .ui-ocr{ grid-template-columns:1fr; } }
.ui-risk-top{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px; }
.ui-risk-top div{ border-radius:10px; padding:10px 6px; text-align:center; background:rgba(255,255,255,.05); border:1px solid var(--prod-winline); }
.ui-risk-top b{ font-size:16px; display:block; line-height:1.25; }
.ui-risk-top small{ opacity:.55; font-size:9.5px; }
.ui-risk-alerts{ display:flex; flex-direction:column; gap:7px; }
.ui-risk-alerts div{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:9px; background:rgba(255,255,255,.05); border:1px solid var(--prod-winline); font-size:11px; }
.ui-risk-alerts div span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui-risk-alerts em{ margin-left:auto; flex:none; font-style:normal; font-size:9px; font-weight:800; color:#fff; padding:2px 8px; border-radius:6px; }
.ui-risk-bar{ margin-top:10px; border-radius:9px; background:rgba(255,255,255,.06); height:26px; position:relative; overflow:hidden; border:1px solid var(--prod-winline); }
.ui-risk-bar span{ display:block; height:100%; border-radius:9px; opacity:.75; }
.ui-risk-bar small{ position:absolute; inset:0; display:grid; place-items:center; font-size:10px; font-weight:700; }
@media (max-width:560px){ .ui-risk-top{ grid-template-columns:repeat(2,1fr); } }
/* ---------- 7层体系架构 ---------- */
.arch-sec{ padding:76px 0; scroll-margin-top:150px; }
.arch-head{ text-align:center; margin-bottom:44px; }
.arch-head h2{ font-size:clamp(26px,3.6vw,38px); }
.arch-head h2 em{ font-style:normal; background:linear-gradient(90deg,#22d3ee,#8b5cf6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.arch-head p{ color:var(--txt2); max-width:760px; margin:12px auto 0; line-height:1.85; }
.arch-stack{ max-width:980px; margin:0 auto; display:grid; gap:10px; position:relative; }
.arch-stack::before{
content:""; position:absolute; left:50%; top:-14px; bottom:-14px; width:2px; transform:translateX(-50%);
background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--prod-cyan) 45%, transparent) 0 6px, transparent 6px 12px);
z-index:0;
}
.arch-row{
position:relative; z-index:1; display:grid; grid-template-columns:190px 1fr; align-items:center; gap:16px;
padding:16px 20px; border-radius:16px; background:var(--panel); border:1px solid var(--line); transition:.3s;
}
.arch-row:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--ac,#22d3ee) 45%, var(--line)); }
.arch-row .a-name{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:15px; }
.arch-row .a-name i{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; font-size:15px; background:linear-gradient(135deg,var(--ac,#22d3ee),color-mix(in srgb,var(--ac,#22d3ee) 55%, #0b1220)); }
.arch-row .a-name small{ display:block; font-size:11px; color:var(--txt2); font-weight:500; margin-top:2px; }
.arch-row .a-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.arch-row .a-chips span{
font-size:12px; font-weight:700; padding:6px 11px; border-radius:9px; color:var(--txt);
border:1px solid color-mix(in srgb,var(--ac,#22d3ee) 35%, transparent); background:color-mix(in srgb,var(--ac,#22d3ee) 9%, transparent);
}
@media (max-width:680px){
.arch-row{ grid-template-columns:1fr; gap:10px; }
.lb-nav .wrap{ flex-wrap:wrap; overflow-x:visible; gap:6px 4px; }
}
/* ---------- CTA ---------- */
.ph-cta-sec{ padding:70px 0 96px; }
.ph-cta-box{
position:relative; overflow:hidden; border-radius:26px; padding:54px 40px; text-align:center;
background:linear-gradient(120deg, #0e2439, #151a3a 55%, #2a1238);
border:1px solid rgba(139,92,246,.3);
}
.ph-cta-box::before{
content:""; position:absolute; inset:-40%; background:
radial-gradient(420px 240px at 20% 0%, rgba(34,211,238,.25), transparent 60%),
radial-gradient(420px 240px at 80% 100%, rgba(139,92,246,.3), transparent 60%);
animation:ctaFloat 9s ease-in-out infinite;
}
@keyframes ctaFloat{ 50%{ transform:translate(2%,-2%) scale(1.04); } }
.ph-cta-box h3{ font-size:clamp(24px,3.4vw,34px); color:#fff; position:relative; }
.ph-cta-box p{ color:rgba(255,255,255,.72); max-width:640px; margin:12px auto 26px; position:relative; line-height:1.85; }
.ph-cta-box .cta-btns{ position:relative; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.ph-cta-box .btn-main{ background:linear-gradient(90deg,#22d3ee,#8b5cf6); color:#fff; border:none; }
.ph-cta-box .btn-ghost{ border:1px solid rgba(255,255,255,.35); color:#fff; background:rgba(255,255,255,.06); }
/* 浅色模式：CTA 卡片改为通透浅色玻璃，避免深色大块与整体浅色页面冲突 */
html[data-theme="light"] .ph-cta-box{
background:linear-gradient(120deg, #eff6ff, #f5f3ff 55%, #fdf2f8);
border:1px solid rgba(59,130,246,.18);
box-shadow:0 26px 60px -18px rgba(37,99,235,.18);
}
html[data-theme="light"] .ph-cta-box::before{
background:
radial-gradient(420px 240px at 20% 0%, rgba(59,130,246,.14), transparent 60%),
radial-gradient(420px 240px at 80% 100%, rgba(139,92,246,.14), transparent 60%);
}
html[data-theme="light"] .ph-cta-box h3{ color:var(--txt); }
html[data-theme="light"] .ph-cta-box p{ color:var(--txt2); }
html[data-theme="light"] .ph-cta-box .btn-main{ box-shadow:0 12px 34px -8px rgba(37,99,235,.42); }
html[data-theme="light"] .ph-cta-box .btn-ghost{ border:1px solid rgba(37,99,235,.28); color:var(--txt); background:#fff; }
html[data-theme="light"] .ph-cta-box .btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); }
/* ---------- 响应式 ---------- */
@media (max-width:1000px){
.p-grid{ grid-template-columns:1fr; }
.p-art{ border-right:none; border-bottom:1px solid var(--line); min-height:0; }
.pl-1 .p-grid,.pl-2 .p-grid,.pl-6 .p-grid,.pl-7 .p-grid{ grid-template-columns:1fr; }
.pl-1 .p-art,.pl-2 .p-art,.pl-6 .p-art,.pl-7 .p-art{ border-right:none; border-left:none; border-bottom:1px solid var(--line); min-height:0; }
.pl-2 .p-art,.pl-7 .p-art{ order:-1; }
.pl-4 .p-art,.pl-5 .p-art,.pl-9 .p-art{ border-bottom:none; }
.pl-5 .p-art{ border-top:1px solid var(--line); }
.pl-5 .p-body{ padding-right:32px; }
.lp-sec{ padding:52px 0 12px; }
}
@media (max-width:560px){
.p-body{ padding:22px 18px 24px; }
.p-art{ padding:16px; }
.ui-hcm-stats{ grid-template-columns:repeat(2,1fr); }
.lp-num{ width:58px; height:58px; font-size:24px; }
.arch-row{ grid-template-columns:1fr; }
}
.faq-list{max-width:900px;margin:8px auto 0;display:grid;gap:14px}
.faq-item{position:relative;overflow:hidden;--accent:#22d3ee;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(120,160,200,.16);border-left:3px solid var(--accent);border-radius:16px;padding:20px 22px;transition:.35s cubic-bezier(.4,0,.2,1);box-shadow:0 6px 22px -16px var(--accent)}
.faq-item h3{position:relative;font-size:16.5px;font-weight:700;margin:0 0 8px;color:var(--txt)}
.faq-item h3::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:9px;background:var(--accent);box-shadow:0 0 10px var(--accent);vertical-align:middle}
.faq-item p{position:relative;margin:0;color:var(--txt2);line-height:1.85;font-size:14.5px}
.faq-item:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 14px 38px -12px var(--accent)}
.faq-item:nth-child(1){--accent:#22d3ee}
.faq-item:nth-child(2){--accent:#3b82f6}
.faq-item:nth-child(3){--accent:#8b5cf6}
/* ===== 详情页样式（提取自模板 product-N.html 内联