/* build 2026-10-09 cl7-v1
 * templateicl7 · A 单栏长文式 · 深色画布（V2 首个全站深色皮肤）
 * 参考 netmirrorapps.online 结构与视觉基因（神似）：深色容器 + 红系强调 +
 * "深蓝灰渐变盒 + 红边 + 居中白字"分区标题机制 + 红底 hover 反白按钮。
 * 所有色值/类名/文案均为原创，未复制参考站 CSS。
 */
:root{
  --cl7-red:#e0242b;          /* 红主色（异于参考 #E70612） */
  --cl7-red-deep:#a1161c;     /* 深红（异于参考 #AD0410） */
  --cl7-red-hot:#d42a34;      /* 链接 hover 红（异于参考 #e50914） */
  --cl7-ink:#1a222f;          /* 深蓝黑卡片（异于参考 #1A2434） */
  --cl7-ink-2:#12161f;        /* 更深卡片基色 */
  --cl7-canvas:#191d24;       /* 全站画布黑（异于参考 #211E1E） */
  --cl7-paper:#20252e;        /* 白色容器在深色下的对应层 */
  --cl7-soft:#2a3140;         /* 浅层填充 */
  --cl7-line:rgba(255,255,255,.09);   /* 白透明边线（异于参考 .08） */
  --cl7-line-red:rgba(224,36,43,.34); /* 红透明边线（异于参考 .28） */
  --cl7-text:#f2f4f8;         /* 主文字 */
  --cl7-gray:#aeb6c4;         /* 次级文字 */
  --cl7-gray-2:#7e8798;       /* 三级文字 */
  --cl7-radius:12px;
  --cl7-radius-lg:16px;
  --cl7-shadow:0 14px 34px rgba(0,0,0,.34);
  --cl7-shadow-red:0 10px 26px rgba(224,36,43,.16);
  --cl7-font-head:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --cl7-font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
/* ============ 基础 ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body.cl7-body{
  background:var(--cl7-canvas);
  color:var(--cl7-text);
  font-family:var(--cl7-font-body);
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--cl7-red-hot);text-decoration:none;transition:color .2s ease}
.cl7-body a:hover{color:#fff}
img{max-width:100%;height:auto;display:block}
p:empty{display:none}
.cl7-inner{max-width:1150px;margin:0 auto;padding:0 24px}
/* 通用滚动条（深色站点细节） */
.cl7-body ::-webkit-scrollbar{width:10px;height:8px}
.cl7-body ::-webkit-scrollbar-track{background:var(--cl7-ink-2)}
.cl7-body ::-webkit-scrollbar-thumb{background:var(--cl7-soft);border-radius:6px}
.cl7-body ::-webkit-scrollbar-thumb:hover{background:var(--cl7-gray-2)}

/* ============ Header（双层：品牌条 + 黑底导航条） ============ */
.cl7-header{background:var(--cl7-ink-2);border-bottom:1px solid var(--cl7-line)}
.cl7-header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.cl7-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.cl7-brand__logo{width:34px;height:34px;border-radius:8px}
.cl7-brand__name{font-family:var(--cl7-font-head);font-weight:700;font-size:1.18rem;color:var(--cl7-text);letter-spacing:.01em}
.cl7-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.cl7-nav__link{padding:8px 13px;border-radius:8px;font-family:var(--cl7-font-head);font-weight:600;font-size:.92rem;color:var(--cl7-gray);transition:color .2s,background .2s}
.cl7-nav__link:hover{color:#fff;background:var(--cl7-red-deep)}
.cl7-menu-toggle{display:none;background:none;border:1px solid var(--cl7-line);border-radius:8px;color:var(--cl7-text);font-size:1.15rem;padding:6px 11px;cursor:pointer;line-height:1}
.cl7-nav--open{display:flex}

/* ============ Hero（纯文字标题 → 简介 → 图标 → 红按钮） ============ */
.cl7-hero{padding:46px 0 30px;text-align:center}
.cl7-hero__title{font-family:var(--cl7-font-head);font-size:clamp(1.65rem,4.2vw,2.5rem);font-weight:800;line-height:1.22;color:#fff;letter-spacing:-.015em;margin-bottom:14px}
.cl7-hero__lead{max-width:820px;margin:0 auto 22px;color:var(--cl7-gray);font-size:1.02rem}
.cl7-hero__cta-row{display:flex;flex-direction:column;align-items:center;gap:18px}
.cl7-hero__icon{width:148px;height:148px;border-radius:26px;box-shadow:var(--cl7-shadow),var(--cl7-shadow-red)}
.cl7-hero__icon-wrap{padding:4px;border-radius:30px;background:linear-gradient(140deg,rgba(224,36,43,.35),rgba(255,255,255,.04));display:inline-block}

/* ============ 按钮基因：红底白字 + 2px 同色边 + 12px 圆角 + hover 反白上浮 ============ */
.cl7-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:56px;padding:14px 30px;
  background:var(--cl7-red);color:#fff!important;
  border:2px solid var(--cl7-red);border-radius:var(--cl7-radius);
  font-family:var(--cl7-font-head);font-size:1.05rem;font-weight:700;
  box-shadow:0 6px 18px rgba(224,36,43,.24);
  transition:all .25s ease;cursor:pointer;text-decoration:none!important;
}
.cl7-btn svg{width:21px;height:21px;flex-shrink:0}
.cl7-btn:hover{background:#fff;color:var(--cl7-red)!important;border-color:var(--cl7-red);transform:translateY(-2px);box-shadow:0 9px 22px rgba(224,36,43,.3)}
.cl7-btn--full{width:100%;max-width:430px}
.cl7-btn--sm{min-height:42px;padding:9px 20px;font-size:.92rem;border-radius:10px}

/* ============ App 信息盒（深色渐变盒 + 红边 + 信息表） ============ */
.cl7-appbox{margin:28px auto;padding:22px;max-width:1150px}
.cl7-appbox__panel{
  display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;
  background:linear-gradient(135deg,#0c0f16 0%,#161b26 55%,#0a1a14 100%);
  border:1px solid var(--cl7-line-red);
  border-radius:20px;box-shadow:var(--cl7-shadow);
  padding:26px 30px;
}
.cl7-appbox__table-wrap{flex:1 1 480px;min-width:0;max-width:640px}
.cl7-appbox__heading{
  text-align:center;font-family:var(--cl7-font-head);font-weight:700;font-size:1.08rem;
  color:#fff;padding:10px 14px;margin-bottom:14px;
  background:linear-gradient(135deg,#141926,#1e2534);
  border:2px solid var(--cl7-red);border-radius:10px;
}
table.cl7-table{width:100%;border-collapse:collapse;font-size:.95rem}
table.cl7-table th,table.cl7-table td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--cl7-line);vertical-align:top}
table.cl7-table th{color:var(--cl7-gray);font-weight:600;white-space:nowrap;width:38%}
table.cl7-table td{color:var(--cl7-text);font-weight:600}
table.cl7-table tr:last-child th,table.cl7-table tr:last-child td{border-bottom:none}
table.cl7-table tr:hover td{color:var(--cl7-red-hot)}
.cl7-appbox__shots{flex:0 0 320px;display:flex;gap:14px;justify-content:center}
.cl7-appbox__shots img{width:150px;border-radius:14px;border:1px solid var(--cl7-line);box-shadow:var(--cl7-shadow)}

/* ============ 正文容器（A 骨架：单栏长文） ============ */
.cl7-main{padding:14px 0 40px}
.cl7-article{max-width:900px;margin:0 auto;padding:0 24px}
.cl7-article h2{
  /* 分区标题机制（核心基因）：深蓝灰渐变盒 + 2px 红边 + 白字居中 */
  font-family:var(--cl7-font-head);font-size:1.42rem;font-weight:700;line-height:1.35;
  text-align:center;color:#fff;
  background:linear-gradient(135deg,#151a26,#242c3d);
  border:2px solid var(--cl7-red);border-radius:10px;
  padding:14px 20px;margin:34px 0 18px;
  overflow-wrap:break-word;
}
.cl7-article h3{font-family:var(--cl7-font-head);font-size:1.12rem;font-weight:700;color:#fff;margin:24px 0 10px;padding-left:12px;border-left:3px solid var(--cl7-red)}
.cl7-article h4{font-family:var(--cl7-font-head);font-size:1rem;font-weight:700;color:var(--cl7-text);margin:18px 0 8px}
.cl7-article p{color:var(--cl7-gray);margin:0 0 14px}
.cl7-article ul,.cl7-article ol{color:var(--cl7-gray);margin:0 0 16px;padding-left:24px}
.cl7-article li{margin:7px 0}
.cl7-article li::marker{color:var(--cl7-red)}
.cl7-article strong{color:var(--cl7-text)}
.cl7-article a{color:var(--cl7-red-hot);border-bottom:1px solid rgba(224,36,43,.35)}
.cl7-article a:hover{border-bottom-color:var(--cl7-red-hot)}
.cl7-article table{width:100%;border-collapse:collapse;margin:16px 0 20px;font-size:.95rem}
.cl7-article table th,table.cl7-article td{padding:9px 12px;border:1px solid var(--cl7-line)}
.cl7-article table th{background:var(--cl7-ink);color:#fff;font-weight:600}
.cl7-article table td{color:var(--cl7-gray)}
.cl7-article img{border-radius:12px;border:1px solid var(--cl7-line);margin:8px auto 16px}
.cl7-figure{margin:8px 0 18px;text-align:center}
.cl7-figure img{margin:0 auto}
.cl7-figure figcaption{color:var(--cl7-gray-2);font-size:.86rem;margin-top:8px}

/* FAQ 原生 details（icl2/icl6 同款基因：单开 + 右侧图标） */
.cl7-article details{
  background:var(--cl7-ink);border:1px solid var(--cl7-line);
  border-radius:14px;padding:0;margin:0 0 12px;overflow:hidden;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.cl7-article details:hover{border-color:var(--cl7-line-red)}
.cl7-article details[open]{border-color:var(--cl7-line-red);box-shadow:var(--cl7-shadow-red)}
.cl7-article details summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;font-family:var(--cl7-font-head);font-weight:600;color:var(--cl7-text);font-size:1rem;
}
.cl7-article details summary::-webkit-details-marker{display:none}
.cl7-article details summary::after{
  content:'+';font-size:1.35rem;font-weight:700;color:var(--cl7-red);
  transition:transform .25s ease;flex-shrink:0;line-height:1;
}
.cl7-article details[open] summary::after{transform:rotate(45deg)}
.cl7-article details .cl7-faq-a, .cl7-article details > *:not(summary){
  padding:0 18px 16px;color:var(--cl7-gray);font-size:.96rem;
}
.cl7-article details p{margin:0 0 10px}

/* ============ 特性卡网格（JS 运行时对真实 h3+p 网格化） ============ */
.cl7-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:20px 0 26px}
.cl7-grid__item{
  background:var(--cl7-ink);border:1.5px solid var(--cl7-red-deep);
  border-radius:16px;padding:22px 20px;
  box-shadow:var(--cl7-shadow);transition:transform .25s ease,box-shadow .25s ease;
}
.cl7-grid__item:hover{transform:translateY(-3px);box-shadow:var(--cl7-shadow),var(--cl7-shadow-red)}
.cl7-grid__item h3{margin:0 0 8px;padding:0;border:none;font-size:1.02rem;color:#fff}
.cl7-grid__item p{margin:0;font-size:.92rem;color:var(--cl7-gray)}
@media (max-width:920px){.cl7-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cl7-grid{grid-template-columns:1fr}}

/* ============ 截图横向滚动区（参考站 TV 滑块基因 → 正文图片展示带） ============ */
.cl7-shots{margin:26px 0;padding:20px 0;background:var(--cl7-ink-2);border-top:1px solid var(--cl7-line);border-bottom:1px solid var(--cl7-line)}
.cl7-shots__title{font-family:var(--cl7-font-head);text-align:center;font-weight:700;font-size:1.15rem;color:#fff;margin-bottom:16px}
.cl7-shots__track{display:flex;gap:16px;overflow-x:auto;padding:6px 24px 16px;scroll-snap-type:x mandatory}
.cl7-shots__track figure{flex:0 0 300px;scroll-snap-align:center;margin:0}
.cl7-shots__track img{width:300px;border-radius:12px;border:1px solid var(--cl7-line)}

/* ============ Pros/Cons 双列卡（JS 检测 h3 Pros/Cons 后应用） ============ */
.cl7-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:20px 0 26px}
.cl7-duo__col{border-radius:16px;padding:24px 22px;box-shadow:var(--cl7-shadow)}
.cl7-duo__col--pro{background:linear-gradient(150deg,#0d1a12,#12241a);border:1px solid rgba(47,191,113,.32)}
.cl7-duo__col--con{background:linear-gradient(150deg,#1c0f10,#241416);border:1px solid rgba(224,36,43,.32)}
.cl7-duo__col h3{margin:0 0 12px;padding:0;border:none;color:#fff;font-size:1.08rem;display:flex;align-items:center;gap:9px}
.cl7-duo__col--pro h3::before{content:'';width:9px;height:9px;border-radius:50%;background:#2fbf71}
.cl7-duo__col--con h3::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--cl7-red)}
.cl7-duo__col ul{margin:0;padding-left:20px;color:var(--cl7-gray)}
.cl7-duo__col li{margin:8px 0;font-size:.95rem}
@media (max-width:720px){.cl7-duo{grid-template-columns:1fr}}

/* ============ 返回顶部（40px 方形红底 3px 圆角，icl 系首次） ============ */
.cl7-top{
  position:fixed;right:26px;bottom:26px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--cl7-red);color:#fff;border-radius:8px;
  box-shadow:var(--cl7-shadow-red);cursor:pointer;border:none;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
  z-index:60;
}
.cl7-top--show{opacity:1;visibility:visible;transform:translateY(0)}
.cl7-top:hover{background:var(--cl7-red-deep)}
.cl7-top svg{width:20px;height:20px}

/* ============ Footer ============ */
.cl7-footer{background:var(--cl7-ink-2);border-top:1px solid var(--cl7-line);margin-top:30px}
.cl7-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px;padding:40px 0 30px}
.cl7-footer__brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cl7-footer__brand img{width:28px;height:28px;border-radius:6px}
.cl7-footer__brand-name{font-family:var(--cl7-font-head);font-weight:700;color:#fff}
.cl7-footer__desc{color:var(--cl7-gray-2);font-size:.92rem;max-width:400px}
.cl7-footer__title{font-family:var(--cl7-font-head);font-size:.95rem;font-weight:700;color:#fff;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--cl7-red);display:inline-block}
.cl7-footer__list{list-style:none;padding:0}
.cl7-footer__list li{margin:8px 0}
.cl7-footer__link{color:var(--cl7-gray);font-size:.93rem;transition:color .2s}
.cl7-footer__link:hover{color:var(--cl7-red-hot)}
.cl7-footer__bar{border-top:1px solid var(--cl7-line);padding:16px 0}
.cl7-footer__bar-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;color:var(--cl7-gray-2);font-size:.87rem}
.cl7-footer__bar a{color:var(--cl7-gray)}
@media (max-width:760px){.cl7-footer__grid{grid-template-columns:1fr;gap:26px;padding:32px 0 22px}}

/* ============ 响应式 ============ */
@media (max-width:860px){
  .cl7-menu-toggle{display:block}
  .cl7-nav{
    display:none;position:absolute;top:64px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--cl7-ink-2);border-bottom:1px solid var(--cl7-line);
    padding:10px 24px 16px;z-index:50;
  }
  .cl7-nav__link{padding:11px 14px;border-radius:8px}
  .cl7-header{position:relative}
}
@media (max-width:640px){
  .cl7-hero{padding:34px 0 22px}
  .cl7-hero__title{font-size:clamp(1.45rem,6vw,1.8rem)}
  .cl7-hero__icon{width:116px;height:116px;border-radius:20px}
  .cl7-appbox__panel{padding:18px 16px;gap:18px}
  .cl7-appbox__shots{flex:1 1 100%}
  .cl7-appbox__shots img{width:132px}
  .cl7-article{padding:0 18px}
  .cl7-article h2{font-size:1.2rem;padding:12px 14px;margin:26px 0 14px}
  .cl7-shots__track{padding:6px 14px 14px}
  .cl7-shots__track figure{flex:0 0 240px}
  .cl7-shots__track img{width:240px}
  .cl7-top{right:16px;bottom:16px}
}