/* ============================================================
 * 产品内页专属设计组件（.pp-*）。配合 site.css 变量，自动深色。
 * 每个产品内页独立设计，此文件提供可复用的版块组件。
 * ============================================================ */
.pp-hero{ position:relative; overflow:hidden; }
.pp-hero .hero-grid{ padding-top:120px; padding-bottom:96px; }
.pp-hero .hero-trust{ margin-top:22px; }

/* ===== 内页首屏·深色科技风（区别首页亮彩 hero）===== */
.pp-h{ position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(130% 120% at 78% -10%, #1a2a5e 0%, #101835 42%, #0a0f1e 100%); }
.pp-h::before{ content:""; position:absolute; inset:0; opacity:.6;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px; -webkit-mask:radial-gradient(circle at 72% 18%, #000, transparent 68%); mask:radial-gradient(circle at 72% 18%, #000, transparent 68%); }
.pp-h::after{ content:""; position:absolute; right:-120px; top:-140px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(58,110,255,.35), transparent 62%); filter:blur(10px); }
.pp-h .wrap{ position:relative; z-index:2; }
.pp-h-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:40px; align-items:center; padding:120px 0 92px; }
.pp-h .kicker{ display:inline-block; font-size:12px; letter-spacing:2px; color:#8fb0ff;
  border:1px solid rgba(125,162,255,.42); background:rgba(125,162,255,.08); padding:5px 15px; border-radius:999px; margin-bottom:18px; }
.pp-h h1{ font-size:38px; line-height:1.3; font-weight:600; margin:0 0 15px; white-space:pre-line; letter-spacing:.5px; }
.pp-h .sub{ font-size:15px; color:#aeb9d6; line-height:1.9; margin:0 0 26px; white-space:pre-line; max-width:520px; }
.pp-h .hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.pp-h .btn-glass{ border-color:rgba(255,255,255,.5); color:#fff; }
.pp-h .btn-glass:hover{ background:rgba(255,255,255,.12); }
.pp-h .mini{ display:flex; gap:34px; margin-top:30px; }
.pp-h .mini .n{ font-size:23px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.pp-h .mini .n small{ font-size:14px; }
.pp-h .mini .l{ font-size:12px; color:#8a97b8; margin-top:3px; }
.pp-h-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:280px; }
.pp-h-wave{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:64px; display:block; z-index:3; }
.pp-h-wave path{ fill:var(--page); }
/* 每个产品首屏不同背景色调（深色科技风 + 产品色相）*/
.pp-h.h-cloud { background:linear-gradient(155deg,#1a3f9e 0%,#122a6b 42%,#0b1636 100%); }
.pp-h.h-metal { background:linear-gradient(155deg,#3a4a66 0%,#232f45 42%,#10151f 100%); }
.pp-h.h-game  { background:linear-gradient(155deg,#5322a8 0%,#301662 42%,#160c30 100%); }
.pp-h.h-web   { background:linear-gradient(155deg,#0d6d84 0%,#0a3f4e 42%,#07202a 100%); }
.pp-h.h-ssl   { background:linear-gradient(155deg,#0a7a5c 0%,#06503c 42%,#032821 100%); }
.pp-h.h-domain{ background:linear-gradient(155deg,#413cb0 0%,#26236e 42%,#12123a 100%); }
.pp-h.h-cdn   { background:linear-gradient(155deg,#0a6188 0%,#083a52 42%,#051d29 100%); }
.pp-h.h-db    { background:linear-gradient(155deg,#0d7d80 0%,#0a4d54 42%,#062429 100%); }
.pp-h.h-waf   { background:linear-gradient(155deg,#a12b34 0%,#6d1a24 42%,#2c0c12 100%); }
.pp-h.h-lite  { background:linear-gradient(155deg,#2f9e44 0%,#186b31 42%,#08331a 100%); }
/* 深色模式：首屏进一步压暗，与暗色页面融合 */
[data-theme="dark"] .pp-h.h-cloud { background:linear-gradient(155deg,#0f265e 0%,#0a1740 42%,#060b1c 100%); }
[data-theme="dark"] .pp-h.h-metal { background:linear-gradient(155deg,#1f2c42 0%,#141b28 42%,#070a11 100%); }
[data-theme="dark"] .pp-h.h-game  { background:linear-gradient(155deg,#2f156a 0%,#1c0f42 42%,#0c0620 100%); }
[data-theme="dark"] .pp-h.h-web   { background:linear-gradient(155deg,#093f4f 0%,#062832 42%,#03121a 100%); }
[data-theme="dark"] .pp-h.h-ssl   { background:linear-gradient(155deg,#064836 0%,#043125 42%,#021812 100%); }
[data-theme="dark"] .pp-h.h-domain{ background:linear-gradient(155deg,#29257c 0%,#191650 42%,#0b0a2a 100%); }
[data-theme="dark"] .pp-h.h-cdn   { background:linear-gradient(155deg,#093b52 0%,#062736 42%,#03121b 100%); }
[data-theme="dark"] .pp-h.h-db    { background:linear-gradient(155deg,#08484b 0%,#052e32 42%,#02171a 100%); }
[data-theme="dark"] .pp-h.h-waf   { background:linear-gradient(155deg,#5f1a22 0%,#3d1017 42%,#1c070c 100%); }
[data-theme="dark"] .pp-h.h-lite  { background:linear-gradient(155deg,#175f2a 0%,#0d3e1c 42%,#051d0e 100%); }
[data-theme="dark"] .pp-h::after{ opacity:.6; }
/* 光晕随产品主色 */
.pp-h.h-metal::after { background:radial-gradient(circle, rgba(147,197,253,.26), transparent 62%); }
.pp-h.h-game::after  { background:radial-gradient(circle, rgba(168,85,247,.40), transparent 62%); }
.pp-h.h-web::after   { background:radial-gradient(circle, rgba(20,184,166,.34), transparent 62%); }
.pp-h.h-ssl::after   { background:radial-gradient(circle, rgba(16,185,129,.34), transparent 62%); }
.pp-h.h-domain::after{ background:radial-gradient(circle, rgba(129,140,248,.38), transparent 62%); }
.pp-h.h-cdn::after   { background:radial-gradient(circle, rgba(6,182,212,.34), transparent 62%); }
.pp-h.h-db::after    { background:radial-gradient(circle, rgba(45,212,191,.34), transparent 62%); }
.pp-h.h-waf::after   { background:radial-gradient(circle, rgba(248,113,113,.38), transparent 62%); }
.pp-h.h-lite::after  { background:radial-gradient(circle, rgba(132,204,22,.40), transparent 62%); }
/* kicker 颜色随产品主色 */
.pp-h.h-game .kicker { color:#c4b5fd; border-color:rgba(196,181,253,.42); background:rgba(196,181,253,.08); }
.pp-h.h-web .kicker,.pp-h.h-cdn .kicker{ color:#7dd3fc; border-color:rgba(125,211,252,.42); background:rgba(125,211,252,.08); }
.pp-h.h-ssl .kicker  { color:#6ee7b7; border-color:rgba(110,231,183,.42); background:rgba(110,231,183,.08); }
.pp-h.h-domain .kicker{ color:#c7d2fe; border-color:rgba(199,210,254,.42); background:rgba(199,210,254,.08); }
.pp-h.h-db .kicker   { color:#5eead4; border-color:rgba(94,234,212,.42); background:rgba(94,234,212,.08); }
.pp-h.h-waf .kicker  { color:#fca5a5; border-color:rgba(252,165,165,.42); background:rgba(252,165,165,.08); }
.pp-h.h-lite .kicker { color:#bef264; border-color:rgba(190,242,100,.42); background:rgba(190,242,100,.08); }

/* 域名内页首屏：居中搜索表单风格 */
.pp-h-center{ position:relative; z-index:2; max-width:760px; margin:0 auto; text-align:center; padding:120px 24px 96px; }
.pp-h-center .kicker{ margin-bottom:18px; }
.pp-h-center h1{ font-size:38px; font-weight:600; margin:0 0 14px; white-space:pre-line; letter-spacing:.5px; }
.pp-h-center .sub{ font-size:15px; color:#aeb9d6; margin:0 auto 28px; max-width:560px; line-height:1.9; }
.pp-h-search{ display:flex; max-width:600px; margin:0 auto; background:var(--surface); border-radius:14px; box-shadow:0 22px 54px rgba(0,0,0,.38); overflow:hidden; }
.pp-h-search input{ flex:1; height:58px; border:0; background:transparent; padding:0 22px; font-size:16px; color:var(--ink); outline:none; }
.pp-h-search button{ width:140px; height:58px; border:0; background:var(--blue); color:#fff; font-size:16px; cursor:pointer; transition:.2s; }
.pp-h-search button:hover{ background:var(--blue-d); }
.pp-h-tags{ display:flex; flex-wrap:wrap; gap:22px; justify-content:center; margin-top:24px; }
.pp-h-tags span{ font-size:13px; color:rgba(255,255,255,.82); }
.pp-h-tags b{ color:#fff; font-weight:500; } .pp-h-tags em{ color:#ffe08a; font-style:normal; margin-left:4px; }
@media(max-width:900px){ .pp-h-center{ padding:100px 22px 72px; } .pp-h-center h1{ font-size:27px; } .pp-h-search{ flex-direction:column; } .pp-h-search input,.pp-h-search button{ width:100%; } }

/* ===== 产品专属版块 ===== */
/* 物理服务器·硬件规格对比表 */
.pp-spec{ overflow-x:auto; border-radius:16px; }
.pp-spec table{ width:100%; border-collapse:collapse; min-width:720px; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.pp-spec th,.pp-spec td{ padding:15px 18px; text-align:left; font-size:14px; border-top:1px solid var(--line); color:var(--text); white-space:nowrap; }
.pp-spec thead th{ background:var(--surface-2); color:var(--muted); font-weight:500; font-size:13px; border-top:0; }
.pp-spec tbody tr:hover td{ background:var(--surface-2); }
.pp-spec .name{ font-weight:600; color:var(--ink); }
.pp-spec .price{ color:var(--price); font-weight:700; font-size:16px; }
.pp-spec .sbuy{ background:var(--blue); color:#fff; padding:7px 16px; border-radius:8px; font-size:13px; cursor:pointer; display:inline-block; }
.pp-spec .sbuy:hover{ background:var(--blue-d); }

/* SSL·证书类型对比表 */
.pp-compare{ background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.pp-compare table{ width:100%; border-collapse:collapse; }
.pp-compare th,.pp-compare td{ padding:16px 18px; text-align:center; border-top:1px solid var(--line); font-size:14px; color:var(--text); }
.pp-compare thead th{ background:var(--surface-2); border-top:0; }
.pp-compare thead th.col{ color:var(--ink); font-weight:600; font-size:16px; }
.pp-compare thead th.col small{ display:block; font-size:12px; color:var(--muted); font-weight:400; margin-top:3px; }
.pp-compare thead th.col.hot{ position:relative; }
.pp-compare thead th.col.hot::after{ content:'推荐'; position:absolute; top:8px; right:14px; font-size:10px; color:#fff; background:var(--price); padding:2px 8px; border-radius:999px; }
.pp-compare tbody td:first-child{ text-align:left; color:var(--muted); }
.pp-compare tbody .yes{ color:var(--ok); font-size:15px; } .pp-compare tbody .no{ color:#c4ccd8; }
.pp-compare tbody .p{ color:var(--price); font-weight:700; }
.pp-compare tfoot td{ border-top:1px solid var(--line); }
.pp-compare .cbuy{ background:var(--blue); color:#fff; padding:8px 22px; border-radius:9px; font-size:13px; display:inline-block; cursor:pointer; }
.pp-compare .cbuy:hover{ background:var(--blue-d); }
@media(max-width:700px){ .pp-compare{ overflow-x:auto; } .pp-compare table{ min-width:560px; } }

/* 轻量/虚拟主机·镜像与程序 logo 墙 */
.pp-mkt{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.pp-mkt .m{ background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:22px 10px; text-align:center; transition:.2s; cursor:default; }
.pp-mkt .m:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(9,24,74,.08); border-color:#c9d6f5; }
.pp-mkt .m i{ font-size:30px; color:var(--blue); }
.pp-mkt .m span{ display:block; font-size:12.5px; color:var(--text); margin-top:11px; white-space:nowrap; }
@media(max-width:900px){ .pp-mkt{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:560px){ .pp-mkt{ grid-template-columns:repeat(3,1fr); } }

/* 流程步骤（3 步）*/
.pp-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pp-step{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:32px 24px; text-align:center; }
.pp-step .no{ width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--blue),#5b86ff); color:#fff; font-size:18px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; box-shadow:0 6px 16px rgba(29,79,232,.28); }
.pp-step h4{ font-size:16px; color:var(--ink); margin:0 0 8px; }
.pp-step p{ font-size:13px; color:var(--muted); margin:0; line-height:1.7; }
.pp-step .arw{ position:absolute; right:-13px; top:50%; transform:translateY(-50%); color:#c9d6f5; font-size:18px; z-index:2; }
[data-theme="dark"] .pp-step .arw{ color:#2a3550; }
@media(max-width:900px){ .pp-steps{ grid-template-columns:1fr; } .pp-step .arw{ display:none; } }

/* 域名生命周期 */
.pp-life{ display:flex; align-items:flex-start; overflow-x:auto; padding:6px 0; }
.pp-life .ls{ flex:1; min-width:120px; text-align:center; position:relative; padding:0 8px; }
.pp-life .ls .dot{ width:18px; height:18px; border-radius:50%; background:var(--blue); margin:0 auto 16px; position:relative; z-index:2; box-shadow:0 0 0 5px var(--chip); }
.pp-life .ls::before{ content:''; position:absolute; top:8px; left:-50%; width:100%; height:2px; background:var(--line); z-index:1; }
.pp-life .ls:first-child::before{ display:none; }
.pp-life .ls h4{ font-size:14px; color:var(--ink); margin:0 0 4px; }
.pp-life .ls p{ font-size:12px; color:var(--muted); margin:0; line-height:1.6; }
@media(max-width:900px){
  .pp-h-grid{ grid-template-columns:1fr; gap:30px; padding:100px 0 70px; }
  .pp-h h1{ font-size:27px; }
  .pp-h-visual{ order:2; min-height:auto; }
  .pp-h .mini{ gap:24px; }
}

/* 通用版块头 */
.pp-sec{ padding:74px 0; }
.pp-sec.alt{ background:var(--bg-alt); }
.pp-head{ text-align:center; max-width:660px; margin:0 auto 46px; }
.pp-head .kick{ display:inline-block; font-size:12px; letter-spacing:2px; color:var(--blue); background:var(--chip); padding:5px 14px; border-radius:999px; margin-bottom:14px; }
.pp-head h2{ font-size:29px; font-weight:600; color:var(--ink); margin:0 0 12px; }
.pp-head p{ font-size:15px; color:var(--muted); line-height:1.85; margin:0; }

/* 核心特性网格 */
.pp-feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pp-feat{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px 24px; transition:.2s; }
.pp-feat:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(9,24,74,.10); border-color:#c9d6f5; }
.pp-feat-ic{ width:50px; height:50px; border-radius:14px; background:var(--chip); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; }
.pp-feat h3{ font-size:17px; font-weight:600; color:var(--ink); margin:0 0 8px; }
.pp-feat p{ font-size:13.5px; color:var(--muted); line-height:1.8; margin:0; }

/* 应用场景 */
.pp-scenes{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pp-scene{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px 20px; text-align:center; transition:.2s; }
.pp-scene:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(9,24,74,.08); }
.pp-scene i{ font-size:28px; color:var(--blue); }
.pp-scene h4{ font-size:15px; font-weight:600; margin:12px 0 6px; color:var(--ink); }
.pp-scene p{ font-size:12.5px; color:var(--muted); margin:0; line-height:1.7; }

/* 信任数据条 */
.pp-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:40px 24px; }
.pp-stat{ text-align:center; }
.pp-stat .n{ font-size:32px; font-weight:700; color:var(--blue); font-variant-numeric:tabular-nums; }
.pp-stat .n small{ font-size:16px; font-weight:600; }
.pp-stat .l{ font-size:13px; color:var(--muted); margin-top:6px; }

/* FAQ */
.pp-faqs{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.pp-faq{ background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:20px 24px; }
.pp-faq h4{ font-size:15px; color:var(--ink); margin:0 0 9px; display:flex; align-items:flex-start; gap:9px; }
.pp-faq h4 i{ color:var(--blue); font-size:14px; margin-top:3px; }
.pp-faq p{ font-size:13.5px; color:var(--muted); line-height:1.85; margin:0; padding-left:23px; }

/* 底部大 CTA 区 */
.pp-cta{ position:relative; overflow:hidden; border-radius:22px; padding:56px 40px; text-align:center;
  background:linear-gradient(135deg,#1740c9,#1d4fe8 55%,#2a5cf5); color:#fff; }
[data-theme="dark"] .pp-cta{ background:linear-gradient(135deg,#0a1224,#122152 55%,#16307a); }
.pp-cta::before{ content:""; position:absolute; right:-70px; top:-70px; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.08); }
.pp-cta h2{ font-size:28px; font-weight:600; margin:0 0 12px; position:relative; }
.pp-cta p{ font-size:15px; color:rgba(255,255,255,.85); margin:0 0 26px; position:relative; }
.pp-cta .hero-actions{ justify-content:center; position:relative; }

@media(max-width:900px){
  .pp-feats{ grid-template-columns:1fr 1fr; }
  .pp-scenes{ grid-template-columns:1fr 1fr; }
  .pp-stats{ grid-template-columns:1fr 1fr; gap:26px; }
  .pp-sec{ padding:56px 0; }
  .pp-hero .hero-grid{ padding-top:96px; padding-bottom:72px; }
}
@media(max-width:560px){
  .pp-feats,.pp-scenes{ grid-template-columns:1fr; }
  .pp-cta{ padding:44px 22px; }
}

/* ===== 云数据库·实例面板视觉（首屏）===== */
.db-visual{ width:300px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  border-radius:16px; padding:18px; backdrop-filter:blur(4px); }
.db-head{ display:flex; align-items:center; gap:10px; }
.db-ic{ width:38px; height:38px; flex:0 0 38px; border-radius:10px; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; color:#5eead4; font-size:17px; }
.db-t{ font-size:13px; font-weight:500; color:#fff; font-family:ui-monospace,Consolas,monospace; }
.db-s{ font-size:11px; color:rgba(255,255,255,.65); }
.db-live{ margin-left:auto; font-size:10px; color:#bbf7d0; background:rgba(34,197,94,.24); padding:3px 9px; border-radius:999px; }
.db-live i{ font-size:6px; vertical-align:2px; margin-right:3px; }
.db-metrics{ display:flex; gap:9px; margin:15px 0; }
.db-metric{ flex:1; background:rgba(255,255,255,.08); border-radius:10px; padding:11px 6px; text-align:center; }
.db-metric b{ display:block; font-size:18px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.db-metric b.ok{ color:#5eead4; }
.db-metric span{ display:block; font-size:11px; color:rgba(255,255,255,.7); margin-top:3px; }
.db-nodes{ display:flex; align-items:center; gap:8px; }
.db-node{ flex:1; display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14); border-radius:11px; padding:11px 12px; }
.db-node > i{ font-size:16px; color:rgba(255,255,255,.55); }
.db-node.on{ border-color:rgba(94,234,212,.55); background:rgba(94,234,212,.12); }
.db-node.on > i{ color:#5eead4; }
.db-node span{ display:block; font-size:12.5px; color:#fff; font-weight:500; }
.db-node em{ display:block; font-size:10.5px; color:rgba(255,255,255,.6); font-style:normal; margin-top:2px; }
.db-sync{ flex:0 0 auto; color:#5eead4; font-size:14px; animation:db-spin 2.6s linear infinite; }
@keyframes db-spin{ to{ transform:rotate(360deg); } }

/* ===== WAF·攻击拦截面板视觉（首屏）===== */
.waf-visual{ width:300px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  border-radius:16px; padding:18px; backdrop-filter:blur(4px); }
.waf-head{ display:flex; align-items:center; gap:10px; }
.waf-ic{ width:38px; height:38px; flex:0 0 38px; border-radius:10px; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; color:#fca5a5; font-size:17px; }
.waf-t{ font-size:13px; font-weight:500; color:#fff; }
.waf-s{ font-size:11px; color:rgba(255,255,255,.65); font-family:ui-monospace,Consolas,monospace; }
.waf-live{ margin-left:auto; font-size:10px; color:#bbf7d0; background:rgba(34,197,94,.24); padding:3px 9px; border-radius:999px; }
.waf-live i{ font-size:6px; vertical-align:2px; margin-right:3px; }
.waf-count{ margin:15px 0; text-align:center; background:rgba(248,113,113,.14); border:1px solid rgba(248,113,113,.3); border-radius:12px; padding:14px; }
.waf-count b{ display:block; font-size:30px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:.5px; }
.waf-count span{ display:block; font-size:11.5px; color:rgba(255,255,255,.75); margin-top:3px; }
.waf-logs{ display:flex; flex-direction:column; gap:8px; }
.waf-log{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:rgba(255,255,255,.85); }
.waf-tag{ flex:0 0 62px; text-align:center; padding:3px 0; border-radius:6px; font-size:10.5px; color:#fff; }
.waf-tag.sqli{ background:rgba(239,68,68,.4); } .waf-tag.xss{ background:rgba(245,158,11,.4); } .waf-tag.cc{ background:rgba(168,85,247,.4); }
.waf-ip{ flex:1; font-family:ui-monospace,Consolas,monospace; color:rgba(255,255,255,.7); }
.waf-blk{ flex:0 0 auto; color:#6ee7b7; } .waf-blk::before{ content:"\f05e"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:9px; margin-right:4px; }

/* ===== 轻量应用·一键部署面板视觉（首屏）===== */
.lite-visual{ width:300px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  border-radius:16px; padding:18px; backdrop-filter:blur(4px); }
.lite-head{ display:flex; align-items:center; gap:10px; }
.lite-ic{ width:38px; height:38px; flex:0 0 38px; border-radius:10px; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; color:#bef264; font-size:17px; }
.lite-t{ font-size:13px; font-weight:500; color:#fff; }
.lite-s{ font-size:11px; color:rgba(255,255,255,.65); }
.lite-badge{ margin-left:auto; font-size:10px; color:#1a2e05; background:#bef264; padding:3px 9px; border-radius:999px; font-weight:600; }
.lite-apps{ display:flex; gap:9px; margin:15px 0; }
.lite-apps span{ flex:1; height:42px; border-radius:11px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.72); font-size:19px; }
.lite-apps span.on{ background:rgba(190,242,100,.16); border-color:rgba(190,242,100,.55); color:#d9f99d; }
.lite-deploy{ margin-bottom:13px; }
.lite-prow{ display:flex; justify-content:space-between; font-size:12px; color:rgba(255,255,255,.85); margin-bottom:6px; }
.lite-prow b{ color:#fff; } .lite-prow b.ok{ color:#bef264; }
.lite-bar{ height:7px; background:rgba(255,255,255,.16); border-radius:4px; overflow:hidden; }
.lite-bar span{ display:block; height:100%; width:100%; background:linear-gradient(90deg,#84cc16,#bef264); border-radius:4px; }
.lite-meta{ display:flex; gap:16px; font-size:11px; color:rgba(255,255,255,.75); }
.lite-meta i{ font-size:10px; margin-right:3px; color:#bef264; }

@media(max-width:900px){ .db-visual,.waf-visual,.lite-visual{ width:100%; max-width:340px; } }