/* C 卡片网格仪表盘式 / build 2026-10-08 cl6-v1
 * 参考站 netmirror.co.in（WordPress + Kadence Theme 1.4.5 本体 + Kadence Blocks）。
 * UI 基因（PHP 直接抓原始 HTML 347KB/128KB + 17 外链 CSS + 42 内联块逐条核实）：
 *   红主色 + 深蓝黑 hero 行（3px 红边 + 大圆角 + 图标|信息表两列）+ 红底 4 格特性行；
 *   infobox 深蓝黑底 2px 红边大圆角卡（Features/Extra/Alternatives 网格，C 骨架核心）；
 *   按钮 5px 圆角 12px padding 600 字重 + 墨色柔阴影 + SVG 图标居左；
 *   FAQ accordion 全收起单开，近白底灰字、激活态深灰底白字；
 *   下载页纯黑 hero 行 + App Info 红字标题下边线 + 信息表；
 *   系统字体栈（参考站无 Google 字体）；无 TOC、无返回顶部（两页实测 x0）。
 * 原创化（token 均异于参考字面值 #cf282b/#af1b1b/#1a2434/#211e1e/#4A5568/#EDF2F7/#F7FAFC）：
 *   红 #c2312c / 深红 #9e2020 / 深蓝黑 #141c2b / 墨 #241f24 / 中灰 #4c5a6e /
 *   次灰 #6d7c8f / 画布 #eef2f7 / 近白 #f6f9fc / 边线 #dde4ec。
 * 应用 icl1~5 全部教训：
 *   - 组件链接选择器一律 .cl6-body 前缀（防 .cl6-body a 0-1-1 覆盖组件色，icl1 v3 教训）
 *   - 正文容器独立限宽（main 内不依赖 inner，icl4 v3 教训）
 *   - 手机端正文左右边距 32px（icl4 v2/v3 用户反馈终值）
 *   - 原生 details 全套样式与重组手风琴同款（icl1 v2 教训）
 *   - 无 CMS 数据模块不造（tabs 三选项卡 / TV 变体双按钮 / 特性行营销文案格均已删改）
 */

/* ================= token ================= */
:root {
    --cl6-red: #c2312c;
    --cl6-red-deep: #9e2020;
    --cl6-red-tint: #fbeeed;
    --cl6-navy: #141c2b;
    --cl6-navy-soft: #1d2940;
    --cl6-ink: #241f24;
    --cl6-gray: #4c5a6e;
    --cl6-gray-2: #6d7c8f;
    --cl6-canvas: #eef2f7;
    --cl6-paper: #ffffff;
    --cl6-soft: #f6f9fc;
    --cl6-line: #dde4ec;
    --cl6-on-dark: #f2f6fb;
    --cl6-on-dark-dim: #b9c5d6;
    --cl6-shadow: 1px 1px 12px rgba(36, 31, 36, .35);
    --cl6-radius: 18px;
    --cl6-radius-sm: 6px;
}

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

html { -webkit-text-size-adjust: 100%; }

body.cl6-body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: var(--cl6-ink);
    background: var(--cl6-canvas);
}

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

.cl6-inner {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ================= header ================= */
.cl6-header {
    background: var(--cl6-paper);
    border-bottom: 1px solid var(--cl6-line);
    position: sticky;
    top: 0;
    z-index: 50;
}

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

.cl6-brand__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--cl6-ink);
}

.cl6-brand__logo { width: 38px; height: 38px; border-radius: 9px; }

.cl6-brand__name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.01em;
}

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

.cl6-body .cl6-nav__link {
    color: var(--cl6-gray);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--cl6-radius-sm);
    transition: color .15s ease, background .15s ease;
}

.cl6-body .cl6-nav__link:hover {
    color: var(--cl6-red);
    background: var(--cl6-red-tint);
}

.cl6-menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--cl6-line);
    border-radius: var(--cl6-radius-sm);
    font-size: 20px;
    line-height: 1;
    padding: 7px 11px;
    color: var(--cl6-ink);
    cursor: pointer;
}

/* ================= 按钮（参考站 5px 圆角 + 12px padding + 600 + 柔阴影基因） ================= */
.cl6-body .cl6-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--cl6-red);
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    border: 0;
    border-radius: var(--cl6-radius-sm);
    padding: 12px 22px;
    box-shadow: var(--cl6-shadow);
    transition: background .15s ease, transform .15s ease;
}

.cl6-body .cl6-btn:hover {
    background: var(--cl6-red-deep);
    transform: translateY(-1px);
}

.cl6-body .cl6-btn svg { flex: 0 0 auto; }

.cl6-btn--full { width: 100%; }

/* ================= hero-top（首页：h1 居中 → 简介 → 全宽按钮） ================= */
.cl6-hero-top {
    background: var(--cl6-paper);
    padding: 42px 0 30px;
    text-align: center;
}

.cl6-hero-top__title {
    font-size: 34px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.01em;
    max-width: 720px;
    margin: 0 auto 12px;
}

.cl6-hero-top__lead {
    font-size: 17px;
    color: var(--cl6-gray);
    max-width: 680px;
    margin: 0 auto 22px;
}

.cl6-hero-top .cl6-btn { max-width: 460px; }

/* ================= hero-panel（深蓝黑行：图标 | 信息表，参考站 3px 红边 + 大圆角基因） ================= */
.cl6-hero-panel {
    padding: 8px 0 26px;
}

.cl6-hero-panel__box {
    background: var(--cl6-navy);
    border: 3px solid var(--cl6-red);
    border-radius: var(--cl6-radius);
    padding: 26px;
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
    gap: 24px;
    align-items: center;
    overflow: clip;
}

.cl6-hero-panel__figure { display: flex; justify-content: center; }

.cl6-hero-panel__icon {
    width: 168px;
    height: 168px;
    border-radius: 22px;
    box-shadow: 0 0 30px rgba(194, 49, 44, .28);
}

.cl6-hero-panel__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.cl6-hero-panel__table th,
.cl6-hero-panel__table td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(219, 228, 236, .16);
}

.cl6-hero-panel__table tr:last-child th,
.cl6-hero-panel__table tr:last-child td { border-bottom: 0; }

.cl6-hero-panel__table th {
    color: var(--cl6-on-dark-dim);
    font-weight: 600;
    white-space: nowrap;
    width: 42%;
}

.cl6-hero-panel__table td { color: var(--cl6-on-dark); font-weight: 500; }

/* 图标空值回退：单列表格居中（icl 系判空回退惯例） */
.cl6-hero-panel__box--full { grid-template-columns: minmax(0, 1fr); }

.cl6-hero-panel__box--full .cl6-hero-panel__table { max-width: 640px; margin: 0 auto; }

/* ================= feature-strip（红底 4 格信息条，参考站 palette1 特性行基因） ================= */
.cl6-strip {
    padding: 2px 0 26px;
}

.cl6-strip__grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    max-width: 1200px;
    margin: 0 auto;
}

.cl6-strip__item {
    background: linear-gradient(150deg, var(--cl6-red) 0%, var(--cl6-red-deep) 100%);
    border-radius: 14px;
    padding: 18px 14px;
    text-align: center;
    color: #ffffff;
}

.cl6-strip__icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cl6-strip__val {
    display: block;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.cl6-strip__lbl {
    display: block;
    font-size: 13px;
    opacity: .85;
    margin-top: 2px;
}

/* ================= apptable（下载页 App Info：红字标题下边线 + 信息表） ================= */
.cl6-apptable {
    background: var(--cl6-paper);
    padding: 34px 0 10px;
}

.cl6-apptable__title {
    font-size: 30px;
    font-weight: 700;
    color: var(--cl6-red-deep);
    text-align: center;
    max-width: 600px;
    margin: 0 auto 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cl6-line);
}

.cl6-apptable__table {
    width: 100%;
    max-width: 640px;
    margin: 0 auto 24px;
    border-collapse: collapse;
    background: var(--cl6-soft);
    border: 1px solid var(--cl6-line);
    border-radius: var(--cl6-radius-sm);
    overflow: hidden;
    font-size: 15px;
}

.cl6-apptable__table th,
.cl6-apptable__table td {
    padding: 11px 16px;
    text-align: left;
    border-bottom: 1px solid var(--cl6-line);
}

.cl6-apptable__table tr:last-child th,
.cl6-apptable__table tr:last-child td { border-bottom: 0; }

.cl6-apptable__table th {
    color: var(--cl6-gray);
    font-weight: 600;
    white-space: nowrap;
    width: 40%;
}

.cl6-apptable__table td { font-weight: 500; }

/* ================= hero-black（下载页：纯黑 hero 行） ================= */
.cl6-hero-black {
    background: #0d0d10;
    padding: 40px 0 36px;
}

.cl6-hero-black__inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.cl6-hero-black__icon {
    width: 128px;
    height: 128px;
    margin: 0 auto 16px;
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(194, 49, 44, .3);
}

.cl6-hero-black__title {
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--cl6-on-dark);
    margin-bottom: 10px;
}

.cl6-hero-black__lead {
    font-size: 16px;
    color: var(--cl6-on-dark-dim);
    margin-bottom: 22px;
}

.cl6-hero-black .cl6-btn { min-width: 280px; }

/* ================= 正文（icl4 v3 教训：article 独立限宽，不依赖 inner） ================= */
.cl6-main {
    background: var(--cl6-paper);
    padding: 38px 0 48px;
}

.cl6-article {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 24px;
}

.cl6-article h2 {
    font-size: 27px;
    line-height: 1.3;
    font-weight: 700;
    margin: 38px 0 14px;
    letter-spacing: -.01em;
}

.cl6-article h2:first-child { margin-top: 0; }

.cl6-article h3 {
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
    margin: 26px 0 10px;
}

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

.cl6-article p { margin: 0 0 14px; }

.cl6-article ul,
.cl6-article ol {
    margin: 0 0 16px;
    padding-left: 26px;
}

.cl6-article li { margin: 0 0 7px; }

.cl6-article a {
    color: var(--cl6-red);
    text-decoration: underline;
    text-decoration-color: rgba(194, 49, 44, .4);
    text-underline-offset: 2px;
}

.cl6-article a:hover { color: var(--cl6-red-deep); }

.cl6-article strong { font-weight: 700; }

.cl6-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 18px;
    font-size: 15px;
    border: 1px solid var(--cl6-line);
    border-radius: var(--cl6-radius-sm);
    overflow: hidden;
}

.cl6-article th,
.cl6-article td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--cl6-line);
    text-align: left;
}

.cl6-article th { background: var(--cl6-soft); font-weight: 600; }

.cl6-article tr:last-child th,
.cl6-article tr:last-child td { border-bottom: 0; }

.cl6-figure {
    margin: 0 0 20px;
    border: 1px solid var(--cl6-line);
    border-radius: var(--cl6-radius-sm);
    overflow: hidden;
    background: var(--cl6-soft);
}

.cl6-figure img { width: 100%; }

/* ================= cl6-grid（C 骨架核心：深蓝黑红边卡片网格，参考站 infobox 基因） ================= */
.cl6-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 6px 0 24px;
}

.cl6-grid__item {
    background: var(--cl6-navy);
    border: 2px solid var(--cl6-red);
    border-radius: var(--cl6-radius);
    padding: 22px 20px;
    text-align: center;
    overflow: clip;
}

.cl6-grid__item h3 {
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 8px;
}

.cl6-grid__item p {
    color: var(--cl6-on-dark-dim);
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}

/* ================= cl6-faq（手风琴：全收起 + 单开；激活态深灰底白字基因） ================= */
.cl6-faq {
    margin: 6px 0 24px;
    border: 1px solid var(--cl6-line);
    border-radius: var(--cl6-radius-sm);
    overflow: hidden;
}

.cl6-faq__item + .cl6-faq__item { border-top: 1px solid var(--cl6-line); }

.cl6-faq__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: var(--cl6-soft);
    border: 0;
    padding: 13px 16px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--cl6-gray);
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.cl6-faq__head:hover { color: var(--cl6-ink); }

.cl6-faq__arrow {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform .2s ease;
}

.cl6-faq__item--open .cl6-faq__head {
    background: var(--cl6-gray);
    color: #ffffff;
}

.cl6-faq__item--open .cl6-faq__arrow { transform: rotate(90deg); }

.cl6-faq__body {
    display: none;
    padding: 14px 16px 16px;
    background: var(--cl6-paper);
}

.cl6-faq__item--open .cl6-faq__body { display: block; }

.cl6-faq__body p { margin: 0; }

/* ================= 原生 details（与重组手风琴同款视觉，icl1 v2 教训） ================= */
.cl6-article details {
    border: 1px solid var(--cl6-line);
    border-radius: var(--cl6-radius-sm);
    background: var(--cl6-soft);
    margin: 0 0 10px;
    overflow: hidden;
}

.cl6-article details + details { margin-top: -1px; border-radius: var(--cl6-radius-sm); }

.cl6-article summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--cl6-gray);
    cursor: pointer;
    list-style: none;
}

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

.cl6-article summary::after {
    content: "\203A";
    font-size: 18px;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform .2s ease;
}

.cl6-article details[open] summary {
    background: var(--cl6-gray);
    color: #ffffff;
}

.cl6-article details[open] summary::after { transform: rotate(90deg); }

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

.cl6-article details > p { padding: 12px 16px 14px; margin: 0; background: var(--cl6-paper); }

/* ================= footer（参考站三列 + 版权） ================= */
.cl6-footer {
    background: var(--cl6-navy);
    color: var(--cl6-on-dark-dim);
    padding: 40px 0 0;
    font-size: 15px;
}

.cl6-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    padding-bottom: 30px;
}

.cl6-footer__brand {
    color: #ffffff;
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.cl6-footer__brand img { width: 30px; height: 30px; border-radius: 7px; }

.cl6-footer__desc {
    color: var(--cl6-on-dark-dim);
    font-size: 14px;
    line-height: 1.65;
}

.cl6-footer__title {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
}

.cl6-footer__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cl6-body .cl6-footer__link {
    color: var(--cl6-on-dark-dim);
    text-decoration: none;
    font-size: 14px;
}

.cl6-body .cl6-footer__link:hover { color: #ffffff; }

.cl6-footer__bar {
    border-top: 1px solid rgba(219, 228, 236, .14);
    padding: 16px 0;
}

.cl6-footer__bar .cl6-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--cl6-on-dark-dim);
}

.cl6-footer__bar a { color: var(--cl6-on-dark); text-decoration: none; }

.cl6-footer__bar a:hover { color: #ffffff; }

/* ================= 响应式（参考站断点 1024 / 767） ================= */
@media (max-width: 1024px) {
    .cl6-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .cl6-hero-panel__box { grid-template-columns: minmax(0, 1fr); }

    .cl6-hero-panel__icon { width: 140px; height: 140px; }
}

@media (max-width: 767px) {
    .cl6-menu-toggle { display: block; }

    .cl6-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--cl6-paper);
        border-bottom: 1px solid var(--cl6-line);
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px 24px 14px;
    }

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

    .cl6-body .cl6-nav__link { padding: 10px 12px; }

    /* 手机端边距（icl4 v2/v3 用户反馈终值） */
    .cl6-inner { padding: 0 32px; }

    .cl6-article { padding: 0 32px; }

    .cl6-hero-black__inner { padding: 0 32px; }

    .cl6-hero-top { padding-top: 32px; }

    .cl6-hero-top__title { font-size: 26px; }

    .cl6-hero-black__title { font-size: 24px; }

    .cl6-apptable__title { font-size: 25px; }

    .cl6-hero-panel__box { padding: 20px 18px; }

    .cl6-hero-panel__icon { width: 112px; height: 112px; border-radius: 16px; }

    .cl6-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

    .cl6-strip__item { padding: 14px 10px; }

    .cl6-article h2 { font-size: 22px; }

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

    .cl6-grid { grid-template-columns: minmax(0, 1fr); }

    .cl6-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }

    .cl6-hero-black .cl6-btn { min-width: 0; width: 100%; }
}