/* templateicl3 / E 分屏横向banner式 / build 2026-09-09 cl3-v2
 * 参考 cricfytv.com.in UI 基因（原创化 token）：
 *   橙主色带 H2 通栏头带（首页）/纯文本居中（下载页）· Aleo serif+capitalize → Roboto Slab
 *   3px 圆角实心按钮 · TOC 四边 4px 橙框可折叠 · FAQ 橙字 h3 · 默认 disc 列表
 * E 骨架：无单一主容器，页面由通栏色带依次堆叠（header/hero/TOC/正文 band 交替/footer）
 * 应用 templateicl1/icl2 教训：
 *   组件选择器一律 .cl3-body 前缀（防 .cl3-body a 0-1-1 覆盖组件色）
 *   手机端 band inner 左右边距 24px（h2 通栏负边距同步）
 *   正文原生 details 全套样式 + JS 单开控制
 */

:root {
    --cl3-orange: #f06a10;       /* 主橙（异于参考 #fe6a00/#ff7300） */
    --cl3-orange-deep: #c05311;  /* 深橙 hover */
    --cl3-orange-soft: #fdf1e7;  /* 淡橙带底 */
    --cl3-ink: #23201d;          /* 暖墨字 */
    --cl3-ink-soft: #57524b;     /* 次级字 */
    --cl3-canvas: #f6f5f2;       /* 暖灰画布 */
    --cl3-band-alt: #efece6;     /* band 交替底 */
    --cl3-line: #e5dfd6;         /* 分隔线 */
    --cl3-link: #1c6bb0;         /* 链接蓝（异于参考 #1e73be） */
    --cl3-red: #c53030;          /* 徽章红 */
    --cl3-cyan: #1893c5;         /* 徽章青 */
    --cl3-amber: #d98e1e;        /* 徽章琥珀 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

.cl3-body {
    font-family: 'Roboto Slab', Georgia, 'Times New Roman', serif;
    font-size: 16px;
    line-height: 1.75;
    color: var(--cl3-ink);
    background: var(--cl3-canvas);
    overflow-x: hidden; /* h2 通栏负边距 calc(50%-50vw) 的横向滚动防护 */
}

img { max-width: 100%; height: auto; }

p:empty { display: none; }

/* ---------- 通用通栏带内衬 ---------- */
.cl3-inner {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Header 带（白） ---------- */
.cl3-header {
    background: #ffffff;
    border-bottom: 1px solid var(--cl3-line);
}

.cl3-header .cl3-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    flex-wrap: wrap;
}

.cl3-branding__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.cl3-body .cl3-branding__link { color: var(--cl3-ink); }

.cl3-branding__logo {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    object-fit: cover;
}

.cl3-branding__name {
    font-weight: 700;
    font-size: 19px;
    color: var(--cl3-orange);
    text-transform: capitalize;
}

.cl3-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.cl3-body .cl3-nav__link {
    display: inline-block;
    padding: 8px 14px;
    font-size: 15px;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--cl3-ink);
    text-decoration: none;
    border-radius: 3px;
}

.cl3-body .cl3-nav__link:hover {
    color: var(--cl3-orange);
    background: var(--cl3-orange-soft);
}

.cl3-menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--cl3-line);
    border-radius: 3px;
    font-size: 20px;
    line-height: 1;
    padding: 6px 10px;
    color: var(--cl3-ink);
    cursor: pointer;
}

/* ---------- Hero 带（白，居中） ---------- */
.cl3-hero {
    background: #ffffff;
    padding: 44px 0 40px;
    text-align: center;
}

.cl3-hero .cl3-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cl3-hero__title {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: capitalize;
    color: var(--cl3-ink);
    margin-bottom: 20px;
    max-width: 760px;
}

.cl3-hero__icon {
    width: 132px;
    height: 132px;
    border-radius: 24px;
    object-fit: cover;
    border: 1px solid var(--cl3-line);
    box-shadow: 0 10px 28px rgba(240, 106, 16, 0.18);
    margin-bottom: 20px;
}

/* 参考站基因：简介为强调色加粗 */
.cl3-hero__lead {
    font-size: 17px;
    font-weight: 700;
    color: var(--cl3-orange);
    max-width: 680px;
    margin-bottom: 20px;
}

/* App 信息行（五字段判空渲染） */
.cl3-appinfo {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    margin-bottom: 24px;
}

.cl3-appinfo__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cl3-ink-soft);
}

.cl3-appinfo__item svg {
    width: 17px;
    height: 17px;
    stroke: var(--cl3-orange);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 下载按钮（3px 圆角实心） */
.cl3-body .cl3-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--cl3-orange);
    color: #ffffff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    text-transform: capitalize;
    text-decoration: none;
    padding: 13px 34px;
    border-radius: 3px;
    transition: background 0.15s ease;
}

.cl3-body .cl3-btn:hover { background: var(--cl3-orange-deep); color: #ffffff; }

.cl3-btn svg {
    width: 19px;
    height: 19px;
    stroke: #ffffff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 安全徽章行（原创三色信任标识，复刻参考站徽章行机制） */
.cl3-badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 26px;
    margin-top: 22px;
}

.cl3-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.cl3-badge svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.cl3-badge--safe { color: var(--cl3-red); }
.cl3-badge--clean { color: var(--cl3-cyan); }
.cl3-badge--trust { color: var(--cl3-amber); }

/* ---------- TOC 带（淡橙底 + 四边 4px 橙框可折叠，默认收起） ---------- */
.cl3-tocband {
    background: var(--cl3-orange-soft);
    padding: 22px 0;
}

.cl3-toc {
    background: #ffffff;
    border: 4px solid var(--cl3-orange);
    border-radius: 4px;
}

.cl3-toc > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
    color: var(--cl3-ink);
    text-align: center;
    user-select: none;
}

.cl3-toc > summary::-webkit-details-marker { display: none; }

.cl3-toc > summary::before { content: '\25BE\00a0\00a0'; color: var(--cl3-orange); }

.cl3-toc[open] > summary { border-bottom: 1px solid var(--cl3-line); }

.cl3-toc__list {
    list-style: disc;
    padding: 16px 24px 18px 46px;
    columns: 2;
    column-gap: 34px;
}

.cl3-toc__list li { margin-bottom: 7px; break-inside: avoid; }

.cl3-toc__list a {
    color: var(--cl3-link);
    text-decoration: underline;
    font-size: 15px;
}

.cl3-toc__list a:hover { color: var(--cl3-orange); }

/* ---------- 正文：E 骨架通栏 band 堆叠（JS initBands 重组） ---------- */
.cl3-main { display: block; }

.cl3-article { display: block; }

/* band 交替背景（奇白/偶暖灰），intro 带（h2 前导内容）恒白 */
.cl3-article > .cl3-band { background: #ffffff; padding: 30px 0 36px; }

.cl3-article > .cl3-band:nth-of-type(even) { background: var(--cl3-band-alt); }

.cl3-article > .cl3-band--intro { background: #ffffff; }

.cl3-band__inner {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 24px;
}

/* 首页 H2：橙底白字居中通栏头带（贴 band 顶，参考站 padding:0 色条基因）
 * 负上边距抵 band 内容 padding；calc(50%-50vw) 让色条溢出到 band 通栏宽 */
.cl3-home .cl3-band__inner > h2:first-child {
    margin: -30px calc(50% - 50vw) 26px;
    padding: 11px 24px;
    background: var(--cl3-orange);
    color: #ffffff;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-transform: capitalize;
}

/* 下载页 H2：纯文本居中（对应参考站下载页无橙底差异） */
.cl3-special .cl3-band__inner > h2:first-child {
    margin: 0 0 18px;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-transform: capitalize;
    color: var(--cl3-ink);
}

/* FAQ 区 h3 橙字（参考站 FAQ 橙字 h3 基因；静态非手风琴） */
.cl3-band--faq h3 { color: var(--cl3-orange); }

.cl3-article h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: capitalize;
    margin: 26px 0 10px;
}

.cl3-article h4 {
    font-size: 17px;
    font-weight: 700;
    margin: 20px 0 8px;
}

.cl3-article p { margin: 0 0 16px; }

.cl3-article h2 + p, .cl3-article h3 + p { margin-top: 0; }

/* 默认 disc 圆点列表（参考站基因） */
.cl3-article ul, .cl3-article ol { margin: 0 0 16px 26px; }

.cl3-article li { margin-bottom: 6px; }

.cl3-article strong { color: var(--cl3-ink); }

.cl3-body .cl3-article a {
    color: var(--cl3-link);
    text-decoration: underline;
}

.cl3-body .cl3-article a:hover { color: var(--cl3-orange); }

/* 正文表格（参考站表格基因：白底细框，居中表头） */
.cl3-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 18px;
    background: #ffffff;
    font-size: 15px;
}

.cl3-article th, .cl3-article td {
    border: 1px solid var(--cl3-line);
    padding: 9px 13px;
    text-align: left;
}

.cl3-article th {
    font-weight: 700;
    color: var(--cl3-orange);
    background: var(--cl3-orange-soft);
}

/* 正文图片 */
.cl3-figure {
    margin: 0 0 20px;
    text-align: center;
}

.cl3-figure img {
    border-radius: 6px;
    border: 1px solid var(--cl3-line);
    max-width: 100%;
    height: auto;
}

/* 正文原生 details 全套样式（AI 内容 FAQ 可能自带 details） */
.cl3-article details {
    background: #ffffff;
    border: 1px solid var(--cl3-line);
    border-left: 4px solid var(--cl3-orange);
    border-radius: 4px;
    margin: 0 0 12px;
}

.cl3-article details > summary {
    cursor: pointer;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 16px;
    list-style: none;
    user-select: none;
}

.cl3-article details > summary::-webkit-details-marker { display: none; }

.cl3-article details > summary::before {
    content: '+';
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    margin-right: 9px;
    text-align: center;
    border-radius: 50%;
    background: var(--cl3-orange-soft);
    color: var(--cl3-orange);
    font-weight: 700;
    transition: transform 0.15s ease;
}

.cl3-article details[open] > summary::before { content: '\2212'; }

.cl3-article details > *:not(summary) { padding: 0 18px; }

.cl3-article details > p:last-child { padding-bottom: 14px; }

/* 锚点跳转时预留 header 高度 */
.cl3-article h2[id], .cl3-article h3[id] { scroll-margin-top: 24px; }

/* ---------- 下载页 App 信息表带 ---------- */
.cl3-apptable {
    background: #ffffff;
    border-top: 1px solid var(--cl3-line);
    padding: 30px 0 36px;
}

.cl3-apptable__table {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    border-collapse: collapse;
    background: #ffffff;
    font-size: 15px;
}

.cl3-apptable__row:nth-child(even) { background: var(--cl3-orange-soft); }

.cl3-apptable__label, .cl3-apptable__data {
    border: 1px solid var(--cl3-line);
    padding: 10px 16px;
    text-align: center; /* 参考站下载页信息表全居中基因 */
}

.cl3-apptable__label {
    font-weight: 700;
    color: var(--cl3-orange);
    width: 44%;
    text-transform: capitalize;
}

/* ---------- Footer 带（淡橙底，极简版权 + 快捷链接） ---------- */
.cl3-footer {
    background: var(--cl3-orange-soft);
    border-top: 3px solid var(--cl3-orange);
    padding: 26px 0;
    text-align: center;
    font-size: 14px;
    color: var(--cl3-ink-soft);
}

.cl3-body .cl3-footer__brand { color: var(--cl3-orange); font-weight: 700; text-decoration: none; }

.cl3-body .cl3-footer__brand:hover { text-decoration: underline; }

.cl3-footer__links {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 20px;
}

.cl3-body .cl3-footer__links a {
    color: var(--cl3-ink-soft);
    text-decoration: none;
    text-transform: capitalize;
}

.cl3-body .cl3-footer__links a:hover { color: var(--cl3-orange); }

/* ---------- 返回顶部（40px 方形 3px 圆角，右下 30px） ---------- */
.cl3-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 3px;
    background: var(--cl3-orange);
    color: #ffffff;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, background 0.15s ease;
}

.cl3-top--show { opacity: 1; visibility: visible; }

.cl3-top:hover { background: var(--cl3-orange-deep); }

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
    .cl3-menu-toggle { display: inline-block; }

    .cl3-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 2px;
        padding: 6px 0 10px;
    }

    .cl3-nav--open { display: flex; }

    .cl3-body .cl3-nav__link { display: block; padding: 10px 12px; }

    .cl3-header .cl3-inner { padding: 14px 20px; }

    .cl3-hero { padding: 32px 0 30px; }

    .cl3-hero__title { font-size: 25px; }

    .cl3-hero__icon { width: 100px; height: 100px; border-radius: 18px; }

    .cl3-hero__lead { font-size: 15.5px; }

    /* 手机端 band 左右边距 24px（icl1 v4 教训），h2 通栏负边距同步 */
    .cl3-band__inner, .cl3-inner { padding-left: 24px; padding-right: 24px; }

    .cl3-home .cl3-band__inner > h2:first-child {
        margin: -30px calc(50% - 50vw) 22px;
        font-size: 20px;
    }

    .cl3-special .cl3-band__inner > h2:first-child { font-size: 20px; }

    .cl3-article > .cl3-band { padding: 24px 0 28px; }

    .cl3-article h3 { font-size: 18px; }

    .cl3-toc__list { columns: 1; }

    .cl3-top { right: 20px; bottom: 20px; }
}