/* build 2026-10-10 cl8-v1
 * templateicl8 · C 卡片网格仪表盘式 · 浅色画布 + 金黄渐变品牌色
 * 参考 picassoapp.tv 结构与视觉基因（神似，非克隆）：
 *   金黄-棕渐变主视觉（按钮/页脚/返回顶部/hover）、hero 旋转大色块装饰、
 *   135° 多色渐变信息卡、深色 FAQ 区 + 聊天气泡对话流、H2 纯加粗无装饰。
 * 所有色值/类名/文案均为原创，未复制参考站 CSS 源码。
 */
:root{
  --cl8-gold:#e8b64c;         /* 金黄主色（异于参考 #FDE034） */
  --cl8-amber:#c98a1e;        /* 琥珀（渐变中段，异于参考 #FDE034 重复段） */
  --cl8-brown:#8a5a1e;        /* 棕（渐变深端，异于参考 #855322） */
  --cl8-grad:linear-gradient(119deg,#8a5a1e 0%,#e8b64c 55%,#f0c75e 100%); /* 品牌渐变（三段原创配比） */
  --cl8-grad-v:linear-gradient(135deg,#3f7fd4 0%,#5ec9c9 100%);  /* 信息卡变体1 蓝青（异于参考 #3e82ff→#64e3e8） */
  --cl8-grad-v2:linear-gradient(135deg,#2fa98c 0%,#8fce62 100%); /* 变体2 青绿（异于参考 #38cbdb→#45c657） */
  --cl8-grad-v3:linear-gradient(135deg,#d8892e 0%,#e8b64c 100%); /* 变体3 金橙（异于参考 #f0e825→#de5430） */
  --cl8-ink:#26282e;          /* 深色 FAQ 区底（异于参考 #212121） */
  --cl8-ink-2:#31343c;        /* 气泡底（异于参考 #333333） */
  --cl8-canvas:#ffffff;       /* 白画布（参考站纯白底） */
  --cl8-soft:#f5f5f3;         /* 浅灰圆底（异于参考 #f5f5f5，带暖调） */
  --cl8-soft-2:#faf8f2;       /* 更浅暖底 */
  --cl8-line:#e9e4d8;         /* 暖灰边线（原创，参考站无对应） */
  --cl8-red-edge:#d4544a;     /* 次按钮描边红（异于参考 #f34042） */
  --cl8-link:#1c56b0;         /* 链接深蓝（异于参考 #182e7c） */
  --cl8-text:#33322e;         /* 主文字（异于参考 #333，暖调） */
  --cl8-gray:#75736b;         /* 次级文字（异于参考 #757575） */
  --cl8-radius:8px;
  --cl8-radius-lg:16px;
  --cl8-shadow:0 3px 12px rgba(51,50,46,.08);
  --cl8-shadow-lift:0 6px 18px rgba(51,50,46,.13);
  --cl8-font-head:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --cl8-font-body:-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
}
/* ============ 基础 ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body.cl8-body{
  background:var(--cl8-canvas);
  color:var(--cl8-text);
  font-family:var(--cl8-font-body);
  font-size:16px;line-height:1.66;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--cl8-link);text-decoration:none;transition:color .2s ease}
.cl8-body a:hover{color:var(--cl8-brown)}
img{max-width:100%;height:auto;display:block}
p:empty{display:none}
.cl8-inner{max-width:1120px;margin:0 auto;padding:0 24px}

/* ============ Header（细窄白底 + 右对齐大字导航 + hover 渐变底白字） ============ */
.cl8-header{background:#fff;border-bottom:1px solid var(--cl8-line);position:relative;z-index:20}
.cl8-header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.cl8-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.cl8-brand__logo{width:38px;height:38px;border-radius:9px}
.cl8-brand__name{font-family:var(--cl8-font-head);font-weight:700;font-size:1.22rem;color:var(--cl8-text);letter-spacing:.01em}
.cl8-nav{display:flex;align-items:center;flex-wrap:wrap}
.cl8-nav__link{padding:10px 15px;font-family:var(--cl8-font-head);font-weight:600;font-size:1.02rem;color:var(--cl8-text);border-radius:6px;transition:color .2s,background .2s}
.cl8-body .cl8-nav__link:hover{color:#fff;background:var(--cl8-grad)}
.cl8-menu-toggle{display:none;background:none;border:1.5px solid var(--cl8-line);border-radius:8px;color:var(--cl8-text);font-size:1.15rem;padding:6px 11px;cursor:pointer;line-height:1}

/* ============ Hero（左文右图 + 旋转渐变大色块装饰，参考站标志性基因） ============ */
.cl8-hero{position:relative;overflow:hidden;padding:64px 0 72px}
/* 旋转 120° 的金黄渐变大色块（绝对定位装饰层，从右上角切入；原创色值与配比） */
.cl8-hero__blob{
  position:absolute;width:640px;height:640px;right:-180px;top:-240px;
  transform:rotate(120deg);border-radius:120px;opacity:.14;z-index:0;
  background:var(--cl8-grad);pointer-events:none;
}
/* 旋转色块的第二层：更小更淡（增强层次，参考站大色块的节奏感） */
.cl8-hero__blob--2{width:360px;height:360px;right:-60px;top:-120px;opacity:.10;border-radius:90px}
.cl8-hero__inner{position:relative;z-index:1;display:flex;align-items:center;gap:48px}
.cl8-hero__txt{flex:1 1 63%;min-width:0}
.cl8-hero__kicker{display:inline-block;font-family:var(--cl8-font-head);font-weight:600;font-size:.95rem;color:var(--cl8-brown);background:var(--cl8-soft-2);border:1px solid var(--cl8-line);border-radius:999px;padding:6px 16px;margin-bottom:18px}
.cl8-hero__title{font-family:var(--cl8-font-head);font-size:clamp(2.1rem,5vw,3.25rem);line-height:1.14;font-weight:800;color:var(--cl8-text);margin-bottom:10px}
.cl8-hero__sub{font-family:var(--cl8-font-head);font-size:clamp(1.3rem,3vw,1.9rem);line-height:1.3;font-weight:600;color:var(--cl8-brown);margin-bottom:10px}
.cl8-hero__desc{font-size:1.06rem;color:var(--cl8-gray);max-width:560px;margin-bottom:26px}
.cl8-hero__btn-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.cl8-hero__img{flex:0 0 300px;max-width:300px;position:relative}
.cl8-hero__img img{width:100%;border-radius:14px;box-shadow:var(--cl8-shadow-lift)}

/* ============ 按钮体系 ============ */
.cl8-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--cl8-font-head);font-weight:700;cursor:pointer;border:0;transition:filter .2s,background .2s,color .2s,box-shadow .2s}
/* 主按钮：渐变底白字 + 小圆角 + 轻投影（参考站 btn_down 基因） */
.cl8-btn--grad{background:var(--cl8-grad);color:#fff;padding:16px 34px;font-size:1.12rem;border-radius:10px;box-shadow:0 2px 10px rgba(138,90,30,.25)}
.cl8-btn--grad:hover{filter:brightness(.96)}
.cl8-btn--grad svg{width:22px;height:22px;flex-shrink:0}
/* 次按钮：渐变底 + 红描边 + 全大写 + hover 反白（参考站 more_link 基因） */
.cl8-btn--edge{background:var(--cl8-grad);color:#fff;border:1.5px solid var(--cl8-red-edge);border-radius:6px;padding:12px 26px;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;box-shadow:2px 2px 5px rgba(51,50,46,.12)}
.cl8-body .cl8-btn--edge:hover{background:#fff;color:var(--cl8-link)}
.cl8-btn--edge svg{width:18px;height:18px;flex-shrink:0}
.cl8-btn--sm{padding:10px 22px;font-size:.92rem;border-radius:8px}

/* ============ 徽章行（原创盾牌，非第三方品牌 logo） ============ */
.cl8-badges{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cl8-badges__title{font-family:var(--cl8-font-head);font-weight:600;font-size:1.05rem;color:var(--cl8-text)}
.cl8-badges__list{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cl8-badge{display:flex;align-items:center;gap:8px}
.cl8-badge svg{width:30px;height:30px;flex-shrink:0}
.cl8-badge__txt{font-size:.95rem;font-weight:600;color:var(--cl8-gray)}
.cl8-badge__txt b{display:block;font-size:.8rem;font-weight:600;color:var(--cl8-gray);opacity:.75}

/* ============ App 信息行（真实字段判空渲染） ============ */
.cl8-appinfo{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px}
.cl8-appinfo__item{display:flex;align-items:center;gap:7px;background:var(--cl8-soft);border-radius:999px;padding:7px 15px;font-size:.92rem;color:var(--cl8-text)}
.cl8-appinfo__item svg{width:15px;height:15px;color:var(--cl8-brown);flex-shrink:0}
.cl8-appinfo__item b{font-weight:600;color:var(--cl8-gray)}

/* ============ 正文（C 骨架：h2 分区容器 + h3 渐变网格卡） ============ */
.cl8-main{padding:26px 0 30px}
.cl8-article{max-width:880px;margin:0 auto}
.cl8-article h2{
  font-family:var(--cl8-font-head);font-size:1.55rem;line-height:1.3;font-weight:700;color:var(--cl8-text);
  margin:38px 0 14px;padding:0 0 10px;border-bottom:2px solid var(--cl8-line);/* H2 纯加粗 + 细底线（参考站 H2 无装饰纯加粗，底线为版式辅助线非色块装饰） */
}
.cl8-article h2:first-child{margin-top:6px}
.cl8-article h3{font-family:var(--cl8-font-head);font-size:1.2rem;font-weight:700;color:var(--cl8-text);margin:26px 0 10px}
.cl8-article p{margin:0 0 14px;text-align:justify}
.cl8-article ul{list-style:disc;padding-left:24px;margin:0 0 16px}
.cl8-article ol{list-style:decimal;padding-left:24px;margin:0 0 16px}
.cl8-article li{margin:0 0 7px}
.cl8-article strong{font-weight:700}
.cl8-article table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:.95rem}
.cl8-article table th,.cl8-article table td{border:1px solid var(--cl8-line);padding:9px 12px;text-align:left}
.cl8-article table th{background:var(--cl8-soft-2);font-family:var(--cl8-font-head);font-weight:600}
/* 正文图片 */
.cl8-figure{margin:22px 0;text-align:center}
.cl8-figure img{max-width:100%;border-radius:12px;box-shadow:var(--cl8-shadow)}
/* h3 渐变网格卡（C 骨架核心，JS 重组生成 .cl8-grid） */
.cl8-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:18px 0 24px}
.cl8-grid__item{
  background:var(--cl8-grad-v);color:#fff;border-radius:14px;padding:22px 20px;
  box-shadow:var(--cl8-shadow);position:relative;overflow:hidden;
}
.cl8-grid__item:nth-child(3n+2){background:var(--cl8-grad-v2)}
.cl8-grid__item:nth-child(3n){background:var(--cl8-grad-v3)}
.cl8-grid__item h3,.cl8-grid__item h3 *{color:#fff;margin:0 0 8px;font-size:1.06rem;font-family:var(--cl8-font-head);font-weight:700}
.cl8-grid__item p,.cl8-grid__item p *{color:rgba(255,255,255,.92);margin:0;font-size:.93rem;line-height:1.55;text-align:left}
/* 网格卡白字圆底图标（呼应参考站 ficon 圆底基因） */
.cl8-grid__item::before{content:"";display:block;width:38px;height:38px;border-radius:50px;background:rgba(255,255,255,.22);margin-bottom:12px}
/* 原生 details（正文防御样式，与 FAQ 气泡区视觉统一） */
.cl8-article details{background:var(--cl8-soft-2);border:1px solid var(--cl8-line);border-left:4px solid var(--cl8-gold);border-radius:10px;padding:13px 16px;margin:0 0 12px}
.cl8-article details summary{font-weight:600;cursor:pointer;font-family:var(--cl8-font-head)}
.cl8-article details[open] summary{margin-bottom:8px}

/* ============ FAQ 深色气泡区（JS 运行时重组，全展开无折叠） ============ */
.cl8-faqwrap{background:var(--cl8-ink);border-radius:var(--cl8-radius-lg);padding:44px 30px 50px;margin:46px 0 6px}
.cl8-faqwrap__title{
  font-family:var(--cl8-font-head);font-size:1.5rem;font-weight:700;text-align:center;margin:0 0 30px;
  /* 渐变文字（绿→黄→橙，呼应参考站 FAQ 标题渐变文字基因，原创色值） */
  background:linear-gradient(90deg,#4db36b 0%,#e0c34c 55%,#e8853c 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#e0c34c;
}
.cl8-bubble{display:flex;gap:12px;margin:0 0 22px;align-items:flex-start}
.cl8-bubble__num{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--cl8-ink-2);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--cl8-font-head);font-weight:700;font-size:.95rem;
}
.cl8-bubble__body{flex:1;min-width:0}
.cl8-bubble__q{font-family:var(--cl8-font-head);font-weight:600;color:#fff;font-size:1.02rem;margin:0 0 8px;line-height:1.45}
.cl8-bubble__a{
  display:inline-block;background:var(--cl8-ink-2);color:#b9bcc6;border-radius:12px;border-top-left-radius:0;
  padding:11px 16px;font-size:.94rem;line-height:1.6;text-align:left;max-width:100%;
}

/* ============ 下载页专属 ============ */
.cl8-dl-head{max-width:760px;margin:0 auto 30px;text-align:center;padding:46px 0 0}
.cl8-dl-head__title{font-family:var(--cl8-font-head);font-size:clamp(1.8rem,4vw,2.5rem);font-weight:800;color:var(--cl8-text);margin-bottom:12px}
.cl8-dl-head__desc{color:var(--cl8-gray);font-size:1.02rem}
.cl8-dl-box{max-width:760px;margin:0 auto 30px;background:var(--cl8-soft-2);border:1px solid var(--cl8-line);border-radius:var(--cl8-radius-lg);padding:34px 30px;text-align:center}
.cl8-dl-box__appinfo{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:24px}
.cl8-dl-cta{display:flex;flex-direction:column;gap:14px;align-items:center}
.cl8-dl-cta .cl8-btn--grad{width:100%;max-width:480px}
.cl8-dl-cta .cl8-btn--edge{width:100%;max-width:480px}
.cl8-dl-note{margin-top:16px;font-size:.9rem;color:var(--cl8-gray)}

/* ============ App 信息表（下载页 apptable，9 行判空） ============ */
.cl8-apptable-wrap{max-width:760px;margin:6px auto 34px}
.cl8-apptable{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--cl8-radius);overflow:hidden;box-shadow:var(--cl8-shadow)}
.cl8-apptable__title{
  font-family:var(--cl8-font-head);font-size:1.3rem;font-weight:700;color:var(--cl8-brown);text-align:center;
  padding:18px 16px 14px;border-bottom:2px solid var(--cl8-gold);
}
.cl8-apptable th{width:38%;text-align:left;background:var(--cl8-soft-2);padding:11px 16px;font-family:var(--cl8-font-head);font-weight:600;font-size:.92rem;color:var(--cl8-text);border-bottom:1px solid var(--cl8-line)}
.cl8-apptable td{padding:11px 16px;font-size:.95rem;border-bottom:1px solid var(--cl8-line)}
.cl8-apptable tr:last-child th,.cl8-apptable tr:last-child td{border-bottom:0}
.cl8-apptable tbody tr:nth-child(even) td{background:var(--cl8-soft-2)} /* 斑马纹（呼应参考站审美节奏） */

/* ============ Footer（金黄渐变顶带 + 灰字版权底带，参考站两段式） ============ */
.cl8-footer{margin-top:50px}
.cl8-footer__top{background:var(--cl8-grad);padding:30px 0 26px;color:#fff}
.cl8-footer__links{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 0;margin-bottom:12px}
.cl8-footer__link{display:inline-block;color:#fff;font-size:.98rem;padding:4px 0;margin:0 6px;font-family:var(--cl8-font-head);font-weight:500}
.cl8-footer__link::after{content:"|";color:rgba(255,255,255,.35);padding-left:12px}
.cl8-footer__link:last-child::after{content:""}
.cl8-body .cl8-footer__link:hover{color:rgba(255,255,255,.85)}
.cl8-footer__contact{text-align:center;font-size:.95rem;color:rgba(255,255,255,.92)}
.cl8-footer__contact a{color:#fff;text-decoration:underline}
.cl8-footer__bottom{background:var(--cl8-soft);color:#a8a49a;padding:15px;text-align:center;font-size:.88rem}
.cl8-footer__bottom a{color:var(--cl8-gray)}

/* ============ 返回顶部（圆形渐变，参考站基因） ============ */
.cl8-top{
  position:fixed;bottom:22px;right:26px;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:var(--cl8-grad);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--cl8-shadow-lift);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s,visibility .25s,transform .25s,filter .2s;z-index:60;
}
.cl8-top--show{opacity:1;visibility:visible;transform:translateY(0)}
.cl8-top:hover{filter:brightness(.9)}
.cl8-top svg{width:20px;height:20px}

/* ============ 响应式 ============ */
@media (max-width:960px){
  .cl8-hero__inner{flex-direction:column-reverse;gap:34px}
  .cl8-hero__img{flex:0 0 auto;max-width:280px}
  .cl8-hero__txt{text-align:center}
  .cl8-hero__desc{margin-left:auto;margin-right:auto}
  .cl8-hero__btn-row{justify-content:center}
  .cl8-badges{justify-content:center}
}
@media (max-width:860px){
  .cl8-menu-toggle{display:block}
  .cl8-nav{
    display:none;position:fixed;top:0;left:0;width:250px;height:100%;flex-direction:column;align-items:stretch;
    background:#fff;box-shadow:5px 0 12px rgba(18,26,33,.1);padding:56px 0 30px;z-index:999999;overflow-y:auto;
  }
  .cl8-nav--open{display:flex}
  .cl8-nav__link{padding:13px 22px;font-size:1rem;border-radius:0;border-bottom:1px solid var(--cl8-line)}
  .cl8-nav--open + .cl8-menu-toggle, .cl8-nav--open ~ .cl8-menu-toggle{display:none}
}
@media (max-width:640px){
  .cl8-inner{padding:0 18px}
  .cl8-hero{padding:44px 0 54px}
  .cl8-hero__blob{width:420px;height:420px;right:-140px;top:-160px}
  .cl8-hero__title{font-size:2rem}
  .cl8-article{font-size:.98rem}
  .cl8-article h2{font-size:1.3rem}
  .cl8-faqwrap{padding:34px 18px 40px}
  .cl8-dl-box{padding:26px 18px}
  .cl8-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:440px){
  .cl8-grid{grid-template-columns:1fr}
  .cl8-badges__list{gap:12px}
}