/**
 * FastTick 深色皮肤 —— 把浅色的 fasttick.css 接到 Kenmore 设计令牌上。
 *
 * 为什么是"覆盖"而不是直接改 fasttick.css：
 *   回滚开关（?skin=legacy / .env fasttick.skin=0）只是不加载本文件，
 *   fasttick.css 里仍保留完整的浅色定义，所以回退是一次模板层跳过，
 *   不依赖任何样式回滚，也不会出现"只改到一半的深色"。
 *
 * 结构固定为九段，顺序不要调：
 *   ① 令牌映射   ② 基座与版心   ③ 通用组件   ④ 页面专项
 *   ⑤ 账号页（U12）   ⑥ 控制台壳（U13）   ⑦ 控制台页面（U14）
 *   ⑧ 响应式   ⑨ 收银台（U17）
 *
 * 作用域严格限定 .ft-site / .ft-console / .fa-auth，禁止裸元素选择器：
 * 本文件与主站、后台可能同页加载，任何一条裸 body{} 都会串出去。
 * 登录页的页面底色是唯一写到 body 上的规则，但它带了 .fa-auth 类（body.fa-auth），
 * 仍然锁在这 4 个页面的 body 上；tests/site/SiteSkinTest 按这条口径校验。
 *
 * 加载顺序：kenmore.css → fasttick.css → 本文件。
 * 因此同选择器的覆盖天然生效，不需要 !important，也不需要堆特异性。
 */

/* ==========================================================================
   ① 令牌映射：旧 --ft-* → Kenmore 令牌
   这一段决定 70% 的观感，后面的选择器只处理写死的字面 hex。
   ========================================================================== */

.ft-site,
.ft-console,
.fa-auth {
    /* 底色：body 用最深的 #070814，卡片用 --km-bg-surface */
    --ft-white: var(--km-bg-surface);
    --ft-bg: var(--km-bg-main);
    --ft-text: #e6ebf7;
    --ft-muted: var(--km-text-body);
    --ft-line: var(--km-border);

    /*
       主站的 --km-text-dim (#626c85) 是给"深底上还要再淡一档"的注释用的，
       但它在模块的卡片底 #12152d 上只有 3.4:1、在最深底 #070814 上 3.8:1，
       都低于 AA 的 4.5:1 —— 用它渲染的终端注释、目录三级项、状态页心跳时间全都读不清。
       模块内统一改用 --ft-meta (#8b95ac)：卡片底 5.5:1、最深底 7:1。
       不动 --km-text-dim 本身，那是主站在用的令牌，改它等于顺手改主站。
    */
    --ft-meta: #8b95ac;

    /*
       --ft-ink 在 fasttick.css 里有 41 处引用，其中 35 处是标题文字色、6 处是深色面板背景。
       因此这里把它映射成"文字白"，6 处背景在 ③④ 段逐个改回深色——
       反过来映射会让所有标题变成不可见的近黑色，而且不会报错。
    */
    --ft-ink: var(--km-text-light);
    --ft-ink-2: var(--km-bg-surface);

    /* 品牌色：整站只有一种强调色，外汇模块不再保留科技蓝 */
    --ft-blue: var(--km-primary-orange);
    --ft-blue-dark: var(--km-primary-orange-hover);
    --ft-cyan: var(--km-accent-cyan);

    /* 语义色在深底上必须提亮：绿 #0f9f6e 在 #12152d 上只有 3.1:1，不达标 */
    --ft-green: #34d399;
    --ft-amber: #fbbf24;
    --ft-red: #f87171;

    --ft-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    --ft-shadow-sm: 0 8px 24px rgba(0, 0, 0, .35);
}

/* 字体只在营销区切换：控制台与登录页的皮肤还没做（U13/U14），
   现在改字体只会让它们"半新半旧"，等各自皮肤落地时再跟着切 */
.ft-site {
    font-family: var(--km-font);
}

/* ==========================================================================
   ② 基座与版心
   页头是 position:fixed（kenmore.css），内容必须自己让出 76px，
   否则首屏标题会被压在导航条底下。二级导航是 sticky，紧接其后。
   ========================================================================== */

.ft-site {
    background: var(--km-bg-darkest);
    color: var(--km-text-body);
    /* 主站页头 fixed，模块页也跟着锁横向滚动 */
    overflow-x: hidden;
    /* fastadmin.css 给 body 加了 60px 顶距（给后台的固定工具条让位），
       模块页没有那条工具条，留着会让整页整体下沉 60px */
    padding-top: 0;
}

.ft-site .ft-main {
    padding-top: 76px;
}

/* 版心与主站对齐：1180 在 1440 视口下比主站窄一截，视觉上会"缩进去" */
.ft-site .ft-shell {
    max-width: 1260px;
}

/* hero 原本靠 sticky 页头自然下移，现在要给 fixed 页头补回留白 */
.ft-site .ft-hero {
    padding-top: 72px;
}

/* .ft-code 是页面里内嵌的深色代码块，本身已经是深色，只把边角对齐卡片体系 */
.ft-site .ft-code {
    border-radius: var(--ft-radius-sm);
}

/*
   锚点跳转的落点要让开吸顶层。
   页头 76px + 二级导航 53px，正文里的 #sec-3 之类如果按默认顶到 0，
   章节标题会被压在两条固定栏下面，看起来像"点了没反应"。
*/
.ft-site .ft-main [id] {
    scroll-margin-top: 132px;
}

/* ==========================================================================
   ③ 通用组件
   ========================================================================== */

/* ---- 首屏（U06）：对齐主站 .km-hero 的语言 ----
   主站首屏的信号是"深底 + 橙色辉光 + 橙描边小标签 + 白字大标题"；
   模块原来用的是"深底 + 青蓝辉光 + 蓝→绿渐变标题"，同一站里出现两套强调色。
   这一步不动 DOM（Hero 结构已经是对的），只把配色与字重拉齐。 */

/* 辉光从青蓝换成品牌橙：蓝色辉光在橙色体系里显得发脏 */
.ft-site .ft-hero-glow {
    background: radial-gradient(circle, rgba(250, 108, 6, .22), rgba(250, 108, 6, .06) 42%, transparent 68%);
}

/* 网格纹理去掉蓝调：rgba(148,180,255) 在深底上泛紫，改成中性白 */
.ft-site .ft-hero::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
}

/* 小标签对齐 .km-hero-badge-tag（橙底 12% + 橙描边 30% + #ffa154 字） */
.ft-site .ft-eyebrow {
    background: rgba(250, 108, 6, .12);
    border-color: rgba(250, 108, 6, .3);
    color: #ffa154;
    font-weight: 600;
}

/* 呼吸点：橙系里保留一个绿点会像"状态灯坏了"，同步换橙 */
.ft-site .ft-pulse {
    background: var(--km-primary-orange);
    box-shadow: 0 0 0 4px rgba(250, 108, 6, .18);
}

.ft-site .ft-hero h1 {
    font-weight: 900;
    letter-spacing: -.05em;
}

/* 首屏三条打勾项：绿勾在橙系首屏里是第二个强调色 */
.ft-site .ft-hero-points {
    color: var(--km-text-body);
}

.ft-site .ft-hero-points i {
    color: var(--km-primary-orange);
}

/* ---- 首屏右侧终端（对齐 .km-terminal-window） ---- */

.ft-site .ft-terminal {
    background: #090a16;
    border-color: rgba(255, 255, 255, .1);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
}

.ft-site .ft-terminal-bar {
    background: #121428;
}

.ft-site .ft-terminal-title {
    font-family: var(--km-code-font);
}

/* 行情卡片里的青色徽标是"科技蓝"残留，换成橙色低饱和底 */
.ft-site .ft-quote-tag {
    background: rgba(250, 108, 6, .12);
    color: #ffa154;
}

.ft-site .ft-quote-price,
.ft-site .ft-terminal-grid strong {
    font-family: var(--km-code-font);
}

.ft-site .ft-terminal-note {
    color: var(--ft-meta);
}

/* 首屏那条 spark 折线是 SVG 里写死的 #22d3ee，改不动填充就只能调色偏：
   用 hue-rotate 把青蓝推到橙色，避免动模板里的 SVG 定义 */
.ft-site .ft-spark {
    filter: hue-rotate(-155deg) saturate(1.15);
}

/* ---- 数据条（对齐 .km-stats-banner） ---- */

.ft-site .ft-stats {
    background: var(--km-bg-main);
    border-bottom: 1px solid var(--km-border);
}

.ft-site .ft-stat {
    border-left: 1px solid rgba(255, 255, 255, .06);
}

.ft-site .ft-stat:first-child {
    border-left: none;
}

.ft-site .ft-stat strong {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--km-text-light);
    font-variant-numeric: tabular-nums;
}

/* 数字后缀（如 `ms`）是橙色重音，与主站 .km-stat-number 的处理一致 */
.ft-site .ft-stat strong span {
    color: var(--km-primary-orange);
}

.ft-site .ft-stat > span {
    color: var(--km-text-body);
}

/* ---- 尾段 CTA（对齐 .km-fast-banner） ----
   不做整段渐变：主站这条横幅是一张内嵌圆角卡片（渐变底 + 橙描边 + 24px 圆角 + 径向辉光），
   整段铺色会让 7 个页面的页脚上方都变成一条横向色带，反而比卡片更重。
   卡片挂在 .ft-cta-grid 上——它就是那个 1260 版心容器。 */

.ft-site .ft-section-dark {
    background: var(--km-bg-main);
    border-top: none;
    border-bottom: none;
    padding-top: 64px;
    padding-bottom: 72px;
}

.ft-site .ft-section-dark > .ft-cta-grid {
    position: relative;
    overflow: hidden;
    padding: 52px 48px;
    border: 1px solid rgba(250, 108, 6, .3);
    border-radius: 24px;
    background:
        radial-gradient(620px 300px at 82% -40%, rgba(250, 108, 6, .22), transparent 70%),
        linear-gradient(135deg, #1c1538 0%, #2c1228 50%, #1f1124 100%);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .5);
}

.ft-site .ft-cta-grid h2 {
    letter-spacing: -.02em;
}

.ft-site .ft-cta-unit {
    color: var(--km-text-body);
}

.ft-site .ft-kicker-light {
    color: #ffa154;
}

/* ---- 卡片：--ft-white 已指向 --km-bg-surface，
        但卡片底色在 fasttick.css 里是写死的 #fff，必须逐个改回 ---- */

.ft-site .ft-feature,
.ft-site .ft-category,
.ft-site .ft-included,
.ft-site .ft-status-card,
.ft-site .ft-channel,
.ft-site .ft-plan,
.ft-site .ft-table-wrap {
    background: var(--km-bg-surface);
}

/* 二级底色（原 #fbfcfe）：比卡片再浅一档，用半透明白叠在深底上 */
.ft-site .ft-docs-side-card,
.ft-site .ft-docs-meta,
.ft-site .ft-faq-aside-card {
    background: rgba(255, 255, 255, .03);
}

/* 英文协议缺译提示：深色下用琥珀低透明度，避免整块发白 */
.ft-site .ft-docs-fallback {
    border-color: rgba(250, 204, 21, .28);
    border-left-color: var(--fc-amber, #facc15);
    background: rgba(250, 204, 21, .08);
    color: #f5d68a;
}

/* ---- 卡片描边与 hover ---- */

.ft-site .ft-feature,
.ft-site .ft-category,
.ft-site .ft-included,
.ft-site .ft-status-card,
.ft-site .ft-channel,
.ft-site .ft-plan,
.ft-site .ft-table-wrap,
.ft-site .ft-docs-side-card,
.ft-site .ft-faq-aside-card,
.ft-site .ft-docs-meta,
.ft-site .ft-empty {
    border-color: var(--km-border);
    box-shadow: var(--ft-shadow-sm);
}

.ft-site .ft-feature:hover,
.ft-site .ft-category:hover {
    border-color: var(--km-border-hover);
}

.ft-site .ft-feature h3,
.ft-site .ft-category h3,
.ft-site .ft-included h3,
.ft-site .ft-steps h3,
.ft-site .ft-docs-side-card h2,
.ft-site .ft-status-section-head h2,
.ft-site .ft-faq-item summary,
.ft-site .ft-mini-faq summary {
    color: var(--km-text-light);
}

/* 图标底板：浅蓝 #eef4ff 在深底上会变成一块刺眼的白斑 */
.ft-site .ft-feature-icon,
.ft-site .ft-included > i {
    background: rgba(250, 108, 6, .14);
    color: var(--km-primary-orange);
}

.ft-site .ft-category-arrow {
    color: var(--ft-meta);
}

/* ---- 按钮：ghost 原本是白底 ---- */

.ft-site .ft-btn-ghost {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--km-border);
    color: var(--km-text-light);
}

.ft-site .ft-btn-ghost:hover,
.ft-site .ft-btn-ghost:focus {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}

/*
   主按钮的文字色必须显式压一次。
   fasttick.css 的 `.ft-site a { color: inherit }` 是 (0,1,1)，
   比 `.ft-btn-primary { color:#fff }` 的 (0,1,0) 更高，
   于是 <a class="ft-btn ft-btn-primary"> 会继承外层正文色 ——
   浅色主题下是"深灰字压蓝底"，深色主题下是"灰字压橙底"，都不报错、只是难看。
*/
.ft-site a.ft-btn-primary,
.ft-site a.ft-btn-primary:hover,
.ft-site a.ft-btn-primary:focus {
    color: #fff;
}

/* 深色代码卡：原本 --ft-ink 当底，现在 --ft-ink 是白色，必须显式改回 */
.ft-site .ft-code-card {
    background: #05060f;
    border: 1px solid var(--km-border);
}

.ft-site .ft-code-card-head {
    color: #dbe4f5;
    border-bottom: 1px solid var(--km-border);
}

.ft-site .ft-code-lang {
    color: var(--ft-meta);
}

.ft-site .ft-code-link {
    color: var(--km-primary-orange);
}

.ft-site .ft-code-link:hover {
    color: var(--km-primary-orange-hover);
}

/* ---- 深色面板：同样依赖 --ft-ink 做底 ----
   hero 与尾段 CTA 的具体配色在上一节（U06）给，这里只兜住"凡是 --ft-ink 当底的，
   都要从白变回深"，避免漏掉某一个面板就出现整块白色。 */

.ft-site .ft-hero {
    background: var(--km-bg-darkest);
}

/* ---- 页头区渐变：蓝调 #2563eb 在深底上显得发脏，换橙色辉光 ---- */

.ft-site .ft-page-head {
    background:
        radial-gradient(700px 300px at 15% -20%, rgba(250, 108, 6, .12), transparent 70%),
        var(--km-bg-main);
    border-bottom: 1px solid var(--km-border);
}

/* hero 里那条蓝→青→绿渐变文字，统一成橙→琥珀 */
.ft-site .ft-gradient-text {
    background: linear-gradient(100deg, #ffb457 0%, var(--km-primary-orange) 55%, #ff8a3d 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* ---- 分段控件（价格页币种 / 周期） ---- */

.ft-site .ft-segmented {
    background: rgba(0, 0, 0, .35);
    border: 1px solid var(--km-border);
}

.ft-site .ft-segment {
    color: var(--km-text-body);
}

.ft-site .ft-segment:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.ft-site .ft-segment.is-active {
    background: var(--km-primary-orange);
    color: #fff;
    box-shadow: 0 2px 10px var(--km-primary-orange-glow);
}

/* ---- 表单 ---- */

.ft-site .ft-symbol-search i {
    color: var(--ft-meta);
}

.ft-site .ft-symbol-search input {
    background: var(--km-bg-darkest);
    border: 1px solid var(--km-border);
    color: var(--km-text-light);
}

.ft-site .ft-symbol-search input::placeholder {
    color: var(--ft-meta);
}

.ft-site .ft-symbol-search input:focus {
    border-color: var(--km-primary-orange);
    box-shadow: 0 0 0 3px rgba(250, 108, 6, .18);
}

/* ---- 表格：表头 6% 白、斑马 3% 白、hover 8% 白 ---- */

.ft-site .ft-table th {
    background: rgba(255, 255, 255, .06);
    color: var(--km-text-body);
    border-bottom: 1px solid var(--km-border);
}

.ft-site .ft-table td {
    color: #d7ddec;
    border-bottom: 1px solid var(--km-border);
}

.ft-site .ft-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, .03);
}

.ft-site .ft-table tbody tr:hover {
    background: rgba(255, 255, 255, .08);
}

/* 数值列对齐：切币种 / 周期时数字不能左右跳动 */
.ft-site .ft-plan-amount {
    font-variant-numeric: tabular-nums;
    font-family: var(--km-code-font);
}

/* ---- 徽标：三态在深底重配色，文字对比度 ≥ 4.5:1 ---- */

.ft-site .ft-badge.is-ok {
    background: rgba(52, 211, 153, .14);
    color: #6ee7b7;
}

.ft-site .ft-badge.is-ok .ft-status-dot {
    background: #34d399;
}

.ft-site .ft-badge.is-warn {
    background: rgba(251, 191, 36, .14);
    color: #fcd34d;
}

.ft-site .ft-badge.is-warn .ft-status-dot {
    background: #fbbf24;
}

.ft-site .ft-badge.is-bad {
    background: rgba(248, 113, 113, .14);
    color: #fca5a5;
}

.ft-site .ft-badge.is-bad .ft-status-dot {
    background: #f87171;
}

.ft-site .ft-badge.is-muted {
    background: rgba(255, 255, 255, .08);
    color: var(--km-text-body);
}

.ft-site .ft-badge.is-muted .ft-status-dot {
    background: var(--km-text-dim);
}

/* ---- 标签 / 内联代码 ---- */

.ft-site .ft-tag {
    background: rgba(255, 255, 255, .06);
    color: var(--km-text-body);
}

.ft-site .ft-mono-muted {
    color: var(--ft-meta);
}

.ft-site .ft-docs-meta code,
.ft-site .ft-markdown code,
.ft-site .ft-status-note code {
    background: rgba(255, 255, 255, .08);
    color: #ffb86b;
}

/* ==========================================================================
   ④ 页面专项
   ========================================================================== */

/* ---- 价格页 ---- */

.ft-site .ft-plan-top h2 {
    color: var(--km-text-light);
}

.ft-site .ft-plan-cats span {
    background: rgba(255, 255, 255, .06);
    color: var(--km-text-body);
}

.ft-site .ft-plan-features li {
    color: #c3cbe0;
}

.ft-site .ft-plan-limits dd {
    color: var(--km-text-light);
    font-family: var(--km-code-font);
    font-variant-numeric: tabular-nums;
}

/* 推荐档：只靠橙色描边与角标区分，不再整卡换底色 */
.ft-site .ft-plan.is-featured {
    background: rgba(250, 108, 6, .06);
    border-color: rgba(250, 108, 6, .45);
    color: var(--km-text-light);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

/* 非推荐档 hover 只改描边：改底色会和推荐档的橙色底撞车，
   用户会以为鼠标下的卡片也是推荐档 */
.ft-site .ft-plan:not(.is-featured):hover {
    border-color: var(--km-border-hover);
}

/*
   推荐档上浮 6px。放在宽屏里做——375 宽是三张卡竖排，
   上浮会把它上面的间距压掉，看起来像错位。
*/
@media (min-width: 901px) {
    .ft-site .ft-plan.is-featured {
        transform: translateY(-6px);
    }
}

.ft-site .ft-plan-badge {
    background: linear-gradient(90deg, var(--km-primary-orange), #ff9a3d);
    color: #1a0c00;
}

.ft-site .ft-plan.is-featured .ft-plan-top h2,
.ft-site .ft-plan.is-featured .ft-plan-amount {
    color: var(--km-text-light);
}

.ft-site .ft-plan.is-featured .ft-plan-subtitle,
.ft-site .ft-plan.is-featured .ft-plan-period,
.ft-site .ft-plan.is-featured .ft-plan-subprice,
.ft-site .ft-plan.is-featured .ft-plan-limits dt {
    color: var(--km-text-body);
}

.ft-site .ft-plan.is-featured .ft-plan-cats span {
    background: rgba(255, 255, 255, .08);
    color: #c3cbe0;
}

.ft-site .ft-plan.is-featured .ft-plan-features li {
    color: #c3cbe0;
}

.ft-site .ft-plan.is-featured .ft-plan-features li i,
.ft-site .ft-plan.is-featured .ft-plan-trial {
    color: #6ee7b7;
}

.ft-site .ft-plan.is-featured .ft-plan-limits dd {
    color: var(--km-text-light);
}

.ft-site .ft-plan.is-featured .ft-plan-divider {
    /* 原来是 12% 白，在推荐档的橙底上对比度 1.44:1 —— 这行文字等于看不见 */
    color: var(--ft-meta);
}

.ft-site .ft-plan.is-featured .ft-plan-divider::after {
    background: rgba(255, 255, 255, .14);
}

/* fasttick.css 给这一列写了 #5c6c84 !important，必须带 !important 才压得住 */
.ft-site .ft-channel-meta > span:first-child {
    color: var(--ft-meta) !important;
}

.ft-site .ft-plan.is-featured .ft-plan-cta,
.ft-site .ft-plan.is-featured .ft-plan-cta:hover {
    background: var(--km-primary-orange);
    color: #fff;
}

/* ---- 品种页 ---- */

.ft-site .ft-symbol-tab {
    color: var(--km-text-body);
    border: 1px solid var(--km-border);
    background: transparent;
}

.ft-site .ft-symbol-tab span {
    color: var(--ft-meta);
}

.ft-site .ft-symbol-tab:hover {
    background: rgba(255, 255, 255, .05);
    color: #fff;
}

.ft-site .ft-symbol-tab.is-active {
    border-color: rgba(250, 108, 6, .5);
    background: rgba(250, 108, 6, .14);
    color: #fff;
}

.ft-site .ft-symbol-tab.is-active span {
    color: #ffb86b;
}

.ft-site .ft-symbol-note {
    border: 1px solid var(--km-border);
    background: rgba(255, 255, 255, .04);
    color: var(--km-text-body);
}

.ft-site .ft-symbol-code {
    color: var(--km-text-light);
    font-family: var(--km-code-font);
}

.ft-site .ft-symbol-group-head h2 {
    color: var(--km-text-light);
    /* 分区标题加橙色左标线：一屏滚过五个分类时，
       比只靠字重更容易看出"换分类了" */
    padding-left: 12px;
    border-left: 3px solid var(--km-primary-orange);
    line-height: 1.25;
}

.ft-site .ft-empty {
    border: 1px dashed rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .03);
}

.ft-site .ft-empty i {
    color: var(--ft-meta);
}

/* ---- 状态页 ---- */

.ft-site .ft-status-banner.is-ok {
    border-color: rgba(52, 211, 153, .35);
    background: rgba(52, 211, 153, .08);
}

.ft-site .ft-status-banner.is-warn {
    border-color: rgba(251, 191, 36, .35);
    background: rgba(251, 191, 36, .08);
}

.ft-site .ft-status-banner h2,
.ft-site .ft-status-name {
    color: var(--km-text-light);
}

.ft-site .ft-status-banner p {
    color: var(--km-text-body);
}

.ft-site .ft-status-banner.is-ok .ft-status-banner-icon {
    background: rgba(52, 211, 153, .16);
    color: #34d399;
}

.ft-site .ft-status-banner.is-warn .ft-status-banner-icon {
    background: rgba(251, 191, 36, .16);
    color: #fbbf24;
}

.ft-site .ft-status-name i {
    color: var(--ft-meta);
}

.ft-site .ft-status-meta {
    border-top: 1px solid var(--km-border);
    color: var(--ft-meta);
}

/* ---- 文档页 ---- */

.ft-site .ft-docs {
    background: var(--km-bg-darkest);
}

/*
   目录吸顶要绕开两层固定条：主站页头 76px + 模块二级导航 53px。
   只写 top: 96px（原值）会让目录第一项藏在二级导航底下 —— 不报错，但点不到。
*/
.ft-site .ft-docs-side {
    top: 142px;
}

.ft-site .ft-docs-side-card {
    max-height: calc(100vh - 200px);
}

.ft-site .ft-docs-toc a {
    color: var(--km-text-body);
}

.ft-site .ft-docs-toc .ft-toc-level-3 {
    color: var(--ft-meta);
}

.ft-site .ft-docs-toc a.is-active {
    color: var(--km-primary-orange);
    border-left-color: var(--km-primary-orange);
}

.ft-site .ft-docs-side-foot p {
    color: var(--ft-meta);
}

.ft-site .ft-docs-version {
    background: rgba(250, 108, 6, .16);
    color: #ffb86b;
}

.ft-site .ft-markdown {
    color: #c3cbe0;
    line-height: 1.75;
}

/* 中文长段落靠行高拉开呼吸，段落间距同步放大一档 */
.ft-site .ft-markdown p {
    margin: 14px 0;
}

.ft-site .ft-markdown li {
    margin: 7px 0;
    line-height: 1.7;
}

.ft-site .ft-markdown h1,
.ft-site .ft-markdown h2,
.ft-site .ft-markdown h3,
.ft-site .ft-markdown h4,
.ft-site .ft-markdown strong,
.ft-site .ft-markdown th {
    color: var(--km-text-light);
}

.ft-site .ft-markdown blockquote {
    background: rgba(255, 255, 255, .04);
    color: var(--km-text-body);
    border-left: 3px solid var(--km-primary-orange);
}

.ft-site .ft-markdown th {
    background: rgba(255, 255, 255, .06);
}

/*
   代码块套上主站终端窗的外观：顶部 26px 深色标题带 + 三颗窗口圆点。
   不包一层 DOM：圆点用 radial-gradient 画，标题带用 linear-gradient 铺，
   background-attachment 默认是 scroll（相对元素定位，不随内容滚动），
   所以横向滚动代码时圆点不会跟着跑掉。
*/
.ft-site .ft-markdown pre {
    padding: 38px 18px 16px;
    border: 1px solid var(--km-border);
    border-radius: 12px;
    background-color: #05060f;
    background-image:
        radial-gradient(circle 4px at 4px 4px, #ff5f57 99%, transparent 100%),
        radial-gradient(circle 4px at 4px 4px, #febc2e 99%, transparent 100%),
        radial-gradient(circle 4px at 4px 4px, #28c840 99%, transparent 100%),
        linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)),
        linear-gradient(#121428, #121428);
    background-repeat: no-repeat;
    background-size: 8px 8px, 8px 8px, 8px 8px, 100% 1px, 100% 26px;
    background-position: 14px 11px, 28px 11px, 42px 11px, 0 26px, 0 0;
}

.ft-site .ft-markdown pre code {
    color: #c9d4ea;
    background: transparent;
}

/* ---- FAQ / 条款页 ---- */

.ft-site .ft-faq-no {
    color: var(--ft-meta);
}

.ft-site .ft-faq-aside-links a {
    color: var(--km-text-body);
}

.ft-site .ft-faq-aside-links i,
.ft-site .ft-faq-item summary i {
    color: var(--ft-meta);
}

.ft-site .ft-faq-item[open] summary,
.ft-site .ft-faq-item summary:hover {
    color: var(--km-primary-orange);
}

/*
   展开态加橙色左标线：整页 20 多条问答，只靠标题变色不够醒目。
   左标线的 3px 边框常驻（透明），不然展开瞬间正文会横向跳 17px。
*/
.ft-site .ft-faq-item {
    border-left: 3px solid transparent;
    padding-left: 14px;
    transition: border-color .2s ease;
}

.ft-site .ft-faq-item[open] {
    border-left-color: var(--km-primary-orange);
}

.ft-site .ft-faq-item[open] summary i {
    color: var(--km-primary-orange);
}

.ft-site .ft-faq-answer {
    color: #c3cbe0;
}

.ft-site .ft-terms-toc a {
    color: var(--km-text-body);
}

.ft-site .ft-terms-body h2 {
    color: var(--km-text-light);
}

.ft-site .ft-terms-body p,
.ft-site .ft-terms-body li {
    color: #c3cbe0;
    /* 条款是长段法律文本，1.85 比正文默认行高更容易逐行核对 */
    line-height: 1.85;
}

.ft-site .ft-terms-body li {
    margin: 8px 0;
}

/* ==========================================================================
   ⑤ 登录 / 注册 / 找回 / 验证邮箱（U12）

   这 4 页共用 layout/fasttick_auth.html，正文结构完全一致（左说明 + 右表单），
   所以整套皮肤只需要覆盖 fasttick-auth.css 的 `.fa-auth-*` 组件，
   4 个模板一行都不用改 —— 这是 U04 把壳抽成布局留下的红利。
   唯一例外是模板里写死的说明文案，属于 i18n 范畴，留给 U18。

   旧 CSS 用 --fa-* 自定义属性配色，这里优先改属性本身（改一处、全页生效），
   只有写死 hex 的地方才逐个覆盖。
   ========================================================================== */

.fa-auth {
    /* 文案三级：标题白 / 正文浅灰 / 注释中灰 */
    --fa-ink: #e6ebf7;
    --fa-ink-soft: #c3cbe0;
    /* 与营销区同款 --ft-meta：旧 --fa-muted(#5f6e85) 在深底上只有 3.1:1 */
    --fa-muted: #8b95ac;
    --fa-line: var(--km-border);
    --fa-bg: var(--km-bg-darkest);
    /* 比 --km-bg-card 再压暗一档：登录页只有一块卡片，卡片与页面同色就分不出边界 */
    --fa-card: rgba(9, 11, 24, .74);

    --fa-primary: var(--km-primary-orange);
    --fa-primary-dark: #ffa154;

    /* 语义色提亮：#15734a / #c22f2f / #9a5b00 在深底上全部低于 AA */
    --fa-ok: #34d399;
    --fa-bad: #fca5a5;
    --fa-warn: #fcd34d;

    --fa-shadow: 0 30px 80px rgba(0, 0, 0, .55);

    font-family: var(--km-font);
    /* 让原生下拉、自动填充、日期选择器跟着走深色，否则白底下拉框会闪一下 */
    color-scheme: dark;
}

/* 页面底色：主站首屏的橙辉光移到居中偏上，login 页本来就没有内容可看，
   纯 #070814 会像"页面没渲染完"，加一层辉光既有品牌感又不干扰表单 */
body.fa-auth {
    background:
        radial-gradient(circle at 50% -10%, rgba(250, 108, 6, .16), transparent 46%),
        radial-gradient(circle at 88% 104%, rgba(0, 229, 255, .06), transparent 42%),
        var(--km-bg-darkest);
    color: var(--km-text-body);
}

/* ---- 页头 / 页脚 ---- */

.fa-auth a.fa-auth-brand,
.fa-auth a.fa-auth-brand:hover {
    color: var(--km-text-light);
}

.fa-auth .fa-auth-mark {
    background: linear-gradient(140deg, #ff8a2b, #fa6c06 52%, #c9510a);
    box-shadow: 0 8px 22px rgba(250, 108, 6, .35);
}

.fa-auth .fa-auth-nav a {
    color: var(--km-text-body);
}

.fa-auth .fa-auth-nav a:hover {
    color: var(--km-text-light);
}

/* 字标里的句号改成品牌橙，和主站 "KENMORE DESIGN" 的双色字标同一个语言 */
.fa-auth .fa-auth-brand-name span {
    color: var(--km-primary-orange);
}

.fa-auth .fa-auth-footer-inner {
    border-top-color: var(--km-border);
}

.fa-auth .fa-auth-footer a:hover {
    color: var(--km-text-light);
}

/* ---- 卡片：玻璃层 ---- */

.fa-auth .fa-auth-card-wrap {
    background: var(--fa-card);
    /* 卡片本身压得比页面更暗，8% 描边只剩一条几乎看不见的线，这里单独提到 10% */
    border-color: rgba(255, 255, 255, .10);
    box-shadow: var(--fa-shadow);
    /* 卡片背后有辉光，半透明 + 模糊才能让辉光透上来又不影响表单可读性 */
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* ---- 左侧说明栏：蓝渐变改为橙色辉光收在右上角 ----
   说明栏要明显比表单侧亮一档，否则整张卡片在深底上就是一块没有层次的板砖。
   底色取比 --km-bg-surface(#12152d) 略亮的 #1a1f3c 起手，压到 #141832 收尾，
   橙色辉光压右上角，与主站卡片同一种材质。 */

.fa-auth .fa-auth-aside {
    background:
        radial-gradient(circle at 100% 0, rgba(250, 108, 6, .20), transparent 55%),
        linear-gradient(180deg, #1a1f3c 0%, #161a35 58%, #141832 100%);
    border-right: 1px solid rgba(255, 255, 255, .10);
    /* base 用 space-between 把"标题 / 打勾项 / 脚注"三等分，
       在 855px 高的注册卡片上会拉出两条 160px 的空白，像漏渲染；
       这里改成居中对齐：内容整体垂直居中，脚注用一条细线跟正文分开 */
    justify-content: center;
    gap: 26px;
}

.fa-auth .fa-auth-aside::after {
    border-color: rgba(250, 108, 6, .22);
}

.fa-auth .fa-auth-aside h2 {
    color: var(--km-text-light);
}

.fa-auth .fa-auth-aside p {
    color: #c3cbe0;
}

.fa-auth .fa-auth-points {
    color: #d5dcec;
}

.fa-auth .fa-auth-points i {
    color: #ffa154;
}

.fa-auth .fa-auth-side-foot {
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: var(--fa-muted);
}

/* ---- 表单 ---- */

.fa-auth .fa-auth-form h1,
.fa-auth .fa-auth-form strong {
    color: var(--km-text-light);
}

.fa-auth .fa-auth-kicker {
    color: #ffa154;
}

.fa-auth .fa-auth-field label {
    color: var(--fa-ink-soft);
}

.fa-auth .fa-auth-input {
    background: rgba(255, 255, 255, .04);
    border-color: var(--km-border);
    color: var(--fa-ink);
}

.fa-auth .fa-auth-input::placeholder {
    color: var(--fa-muted);
    /* Firefox 默认给 placeholder 加 .54 透明度，会把 5.5:1 稀释到 3:1 */
    opacity: 1;
}

.fa-auth .fa-auth-input:hover {
    border-color: rgba(255, 255, 255, .16);
}

.fa-auth .fa-auth-input:focus {
    border-color: var(--km-primary-orange);
    box-shadow: 0 0 0 4px rgba(250, 108, 6, .18);
}

/*
   Chrome 的自动填充会强行铺一层 #e8f0fe 浅蓝底，文字变黑，
   在深色登录页上是最容易被截图出来的破绽。box-shadow 内阴影盖不住文字色，
   必须同时改 -webkit-text-fill-color。
*/
.fa-auth .fa-auth-input:-webkit-autofill,
.fa-auth .fa-auth-input:-webkit-autofill:hover,
.fa-auth .fa-auth-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--fa-ink);
    -webkit-box-shadow: 0 0 0 1000px #141830 inset;
    caret-color: var(--fa-ink);
    transition: background-color 100000s ease-in-out 0s;
}

.fa-auth .fa-auth-check input,
.fa-auth .fa-auth-row input[type="checkbox"] {
    accent-color: var(--km-primary-orange);
}

.fa-auth .fa-auth-check,
.fa-auth .fa-auth-row {
    color: var(--fa-muted);
}

.fa-auth .fa-auth-hint {
    color: var(--fa-muted);
}

/* 发送验证码：次级按钮，不再用浅蓝底，避免在深色卡片上挖出一个白块 */
.fa-auth .fa-auth-code-btn {
    background: rgba(250, 108, 6, .10);
    border-color: rgba(250, 108, 6, .32);
    color: #ffa154;
}

.fa-auth .fa-auth-code-btn:hover:not(:disabled) {
    background: rgba(250, 108, 6, .18);
    border-color: rgba(250, 108, 6, .5);
}

.fa-auth .fa-auth-code-btn:disabled {
    background: rgba(255, 255, 255, .04);
    border-color: var(--km-border);
    color: var(--fa-muted);
}

/* 图形验证码是白底 PNG，容器必须保持白色，只把外框对齐深色卡片 */
.fa-auth .fa-auth-captcha img {
    border-color: var(--km-border);
    background: #fff;
}

.fa-auth .fa-auth-submit {
    background: var(--km-primary-orange);
    color: #fff;
    box-shadow: 0 10px 26px rgba(250, 108, 6, .32);
}

.fa-auth .fa-auth-submit:hover,
.fa-auth a.fa-auth-submit:hover {
    background: var(--km-primary-orange-hover);
    color: #fff;
    box-shadow: 0 12px 30px rgba(250, 108, 6, .42);
}

.fa-auth a.fa-auth-submit,
.fa-auth a.fa-auth-submit:focus {
    color: #fff;
}

.fa-auth .fa-auth-submit:focus-visible {
    outline: 2px solid #ffb37a;
    outline-offset: 3px;
}

.fa-auth .fa-auth-alt {
    color: var(--fa-muted);
}

/* Google 按钮保持白底深字（品牌规范），只有分隔线的浅灰要压暗 */
.fa-auth .fa-auth-divider::before,
.fa-auth .fa-auth-divider::after {
    background: rgba(255, 255, 255, .12);
}

/* ---- 提示条：错误 / 信息 / 警告三态 ---- */

.fa-auth .fa-auth-alert {
    border-color: rgba(248, 113, 113, .32);
    background: rgba(248, 113, 113, .10);
    color: var(--fa-bad);
}

.fa-auth .fa-auth-alert.is-info {
    border-color: rgba(96, 165, 250, .30);
    background: rgba(96, 165, 250, .10);
    color: #93c5fd;
}

.fa-auth .fa-auth-alert.is-warn {
    border-color: rgba(251, 191, 36, .30);
    background: rgba(251, 191, 36, .10);
    color: var(--fa-warn);
}

.fa-auth .fa-auth-flash {
    border-color: rgba(96, 165, 250, .30);
    background: rgba(96, 165, 250, .10);
    color: #93c5fd;
}

.fa-auth .fa-auth-flash.is-success {
    border-color: rgba(52, 211, 153, .32);
    background: rgba(52, 211, 153, .10);
    color: var(--fa-ok);
}

.fa-auth .fa-auth-flash.is-warn {
    border-color: rgba(251, 191, 36, .30);
    background: rgba(251, 191, 36, .10);
    color: var(--fa-warn);
}

.fa-auth .fa-auth-flash.is-error {
    border-color: rgba(248, 113, 113, .32);
    background: rgba(248, 113, 113, .10);
    color: var(--fa-bad);
}

.fa-auth .fa-auth-status {
    background: rgba(250, 108, 6, .14);
    color: #ffa154;
}

.fa-auth .fa-auth-status.is-ok {
    background: rgba(52, 211, 153, .14);
    color: var(--fa-ok);
}

@media (max-width: 860px) {
    /* 说明栏收起后卡片只剩表单一列，左右圆角要重新收一次，
       否则顶部 24px 的圆角配上整宽背景会显得"卡片在页面里飘" */
    .fa-auth .fa-auth-card-wrap {
        border-radius: 20px;
    }
}

@media (max-width: 560px) {
    /* 375 视口：卡片外留 14px 让辉光透出来，内边距收到 22px，
       保证验证码输入框 + 发送按钮在同一行不换行 */
    .fa-auth .fa-auth-card-wrap {
        border-radius: 16px;
    }

    .fa-auth .fa-auth-form {
        padding: 30px 22px;
    }

    .fa-auth .fa-auth-code-row {
        gap: 8px;
    }

    .fa-auth .fa-auth-code-btn {
        min-width: 92px;
        padding: 0 10px;
    }
}

/* ==========================================================================
   ⑥ 控制台壳：布局、侧边栏、顶栏与共享组件（U13）

   控制台有 18 个模板、约 1,800 行 CSS，但颜色基本都走 --fc-* 令牌。
   所以这一步先整表映射（改一处、全站生效），再逐个修写死 hex 的组件。
   控制台不套营销页头，页面底色就在 body 上，映射必须落在 .ft-console 上。

   注意两个"映射后反而更糟"的地方：
   · --fc-ink 同时被当作标题色（21 处）和深色底（2 处：tabs 选中底、图表提示气泡底）。
     映射成白色后这两处会变成"白底白字"，因此 ⑥ 段必须显式改回深色/橙色。
   · --fc-blue 原本是科技蓝，映射成品牌橙后，主按钮白字对比度只有 2.9:1 ——
     这是全站既有决策（见计划 §U07 的对比度说明），这里保持一致，不单独破例。
   ========================================================================== */

.ft-console {
    --fc-ink: var(--km-text-light);
    --fc-ink-2: #dbe3f5;
    /* 侧栏比内容底再深两档，靠明暗而不是描边分层 */
    --fc-navy: #0a0f1f;
    --fc-text: #e6ebf7;
    /* 旧 #5f6e85 在 #12152d 上只有 3.4:1，与营销区同款换成 #8b95ac（5.5:1） */
    --fc-muted: var(--ft-meta);
    --fc-line: rgba(255, 255, 255, .08);
    --fc-line-strong: rgba(255, 255, 255, .16);
    --fc-bg: var(--km-bg-main);
    --fc-white: var(--km-bg-surface);
    --fc-blue: var(--km-primary-orange);
    --fc-blue-dark: var(--km-primary-orange-hover);
    --fc-blue-soft: rgba(250, 108, 6, .12);
    --fc-green: #34d399;
    --fc-green-soft: rgba(52, 211, 153, .14);
    --fc-amber: #fbbf24;
    --fc-amber-soft: rgba(251, 191, 36, .14);
    --fc-red: #f87171;
    --fc-red-soft: rgba(248, 113, 113, .12);
    --fc-shadow: 0 20px 48px rgba(0, 0, 0, .45);
    --fc-shadow-sm: 0 6px 18px rgba(0, 0, 0, .32);

    font-family: var(--km-font);
    color-scheme: dark;
}

/* ---- 侧边栏 ---- */

.ft-console .fc-sidebar {
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.ft-console .fc-brand,
.ft-console .fc-brand:hover {
    color: var(--km-text-light);
}

.ft-console .fc-brand-mark {
    background: linear-gradient(140deg, #ff8a2b, #fa6c06 52%, #c9510a);
    box-shadow: 0 6px 18px rgba(250, 108, 6, .32);
}

.ft-console .fc-brand-text span {
    color: var(--km-primary-orange);
}

.ft-console .fc-nav-label {
    color: var(--ft-meta);
}

.ft-console .fc-nav-item {
    color: #b7c4d8;
}

.ft-console .fc-nav-item:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

/* 选中态：左侧 3px 实心橙 + 12% 橙底，替掉原来的蓝色 inset 2px */
.ft-console .fc-nav-item.is-active {
    background: rgba(250, 108, 6, .12);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--km-primary-orange);
}

.ft-console .fc-nav-item.is-active svg {
    fill: #ffa154;
}

/* 计数徽标：深底重配色，字号不低于 11px（11px 已是 WCAG 之外的可用下限） */
.ft-console .fc-nav-count {
    background: rgba(255, 255, 255, .10);
    color: #dbe3f5;
    font-size: 11px;
}

.ft-console .fc-nav-count.is-warn {
    background: rgba(250, 108, 6, .18);
    color: #ffb37a;
}

.ft-console .fc-sidebar-foot {
    border-top-color: rgba(255, 255, 255, .08);
}

.ft-console .fc-sidebar-foot a {
    color: var(--ft-meta);
}

.ft-console .fc-sidebar-foot a:hover {
    color: #fff;
}

.ft-console .fc-overlay {
    background: rgba(3, 5, 12, .66);
    backdrop-filter: blur(3px);
}

/* ---- 顶栏 ---- */

.ft-console .fc-topbar {
    background: rgba(12, 14, 30, .88);
    border-bottom-color: var(--fc-line);
}

.ft-console .fc-topbar-link {
    color: var(--ft-meta);
}

.ft-console .fc-topbar-link:hover {
    color: #fff;
}

.ft-console .fc-logout {
    background: rgba(255, 255, 255, .04);
    border-color: var(--fc-line);
    color: var(--ft-meta);
}

.ft-console .fc-logout:hover {
    border-color: rgba(248, 113, 113, .45);
    color: var(--fc-red);
}

.ft-console .fc-lang {
    background: rgba(255, 255, 255, .04);
    border-color: var(--fc-line);
}

.ft-console .fc-lang-item {
    color: var(--ft-meta);
}

.ft-console .fc-lang-item:hover {
    color: #fff;
}

.ft-console .fc-lang-item.is-active {
    background: rgba(96, 165, 250, .16);
    color: #dbeafe;
}

.ft-console .fc-menu-btn {
    background: rgba(255, 255, 255, .04);
    border-color: var(--fc-line);
}

/* ---- Flash ---- */

.ft-console .fc-flash {
    background: var(--km-bg-surface);
    border-color: var(--fc-line);
    color: var(--fc-text);
}

.ft-console .fc-flash-success {
    background: rgba(52, 211, 153, .08);
}

.ft-console .fc-flash-error {
    background: rgba(248, 113, 113, .08);
}

.ft-console .fc-flash-warn {
    background: rgba(251, 191, 36, .08);
}

.ft-console .fc-flash-close {
    color: var(--ft-meta);
}

/* ---- 按钮 ---- */

.ft-console .fc-btn-ghost,
.ft-console a.fc-btn-ghost {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .14);
    color: var(--fc-text);
}

.ft-console .fc-btn-ghost:hover,
.ft-console a.fc-btn-ghost:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .24);
    color: #fff;
}

.ft-console .fc-btn-subtle,
.ft-console a.fc-btn-subtle {
    background: rgba(250, 108, 6, .12);
    color: #ffa154;
}

.ft-console .fc-btn-subtle:hover,
.ft-console a.fc-btn-subtle:hover {
    background: rgba(250, 108, 6, .20);
    color: #ffb37a;
}

.ft-console .fc-btn-danger,
.ft-console a.fc-btn-danger {
    background: transparent;
    border-color: rgba(248, 113, 113, .35);
    color: var(--fc-red);
}

.ft-console .fc-btn-danger:hover,
.ft-console a.fc-btn-danger:hover {
    border-color: var(--fc-red);
    background: rgba(248, 113, 113, .12);
    color: var(--fc-red);
}

/* ---- 文本链接与焦点环 ----
   base 的元素级重置写了 `.ft-console a { color: inherit }`（0,1,1），
   比单类 `.fc-link`（0,1,0）高一级，于是控制台里所有 fc-link 都退化成正文色，
   "查看订单 →"这类入口看不出可点。这里用 a.fc-link 提权补回来。 */

.ft-console a.fc-link {
    color: #ffa154;
    font-weight: 600;
}

.ft-console a.fc-link:hover,
.ft-console a.fc-link:focus {
    color: #ffb37a;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ft-console a.fc-link-muted {
    color: var(--ft-meta);
}

/* base 的焦点环是科技蓝 35%，深色底上几乎看不出，换成品牌橙 */
.ft-console :focus-visible {
    outline-color: rgba(250, 108, 6, .55);
}

/* ---- 卡片与指标：--fc-white 已指向 surface，这里只补深色下的阴影与悬停 ---- */

.ft-console .fc-card {
    box-shadow: var(--fc-shadow-sm);
}

.ft-console .fc-card-head,
.ft-console .fc-card-foot {
    border-color: var(--fc-line);
}

.ft-console .fc-metric-value {
    /* 指标数字逐位对齐，切换统计周期时不左右跳 */
    font-variant-numeric: tabular-nums;
}

/* ---- 徽标 / 标签 ---- */

.ft-console .fc-badge {
    background: rgba(255, 255, 255, .06);
    color: #c3cbe0;
}

.ft-console .fc-badge-ok {
    background: var(--fc-green-soft);
    color: var(--fc-green);
}

.ft-console .fc-badge-warn {
    background: var(--fc-amber-soft);
    color: var(--fc-amber);
}

.ft-console .fc-badge-bad {
    background: var(--fc-red-soft);
    color: var(--fc-red);
}

.ft-console .fc-badge-muted {
    background: rgba(255, 255, 255, .06);
    color: var(--ft-meta);
}

.ft-console .fc-badge-blue {
    background: rgba(250, 108, 6, .14);
    color: #ffa154;
}

.ft-console .fc-tag {
    background: rgba(255, 255, 255, .04);
    border-color: var(--fc-line);
    color: #c3cbe0;
}

/* ---- 行内 code ----
   行内 code 的浅粉底（#f9f2f4）来自营销区 base 样式，在深色卡片里像贴了张白纸。
   只作用于段落/列表里的无类名 code，Token 展示块与弹层里有各自的样式，不受影响。 */

.ft-console :is(p, li, dd, dt) > code:not([class]) {
    padding: 1px 6px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 5px;
    background: rgba(255, 255, 255, .07);
    color: #ffb37a;
    font-size: .92em;
    word-break: break-word;
}

/* ---- 表格 ---- */

.ft-console .fc-table th {
    background: rgba(255, 255, 255, .03);
    color: var(--ft-meta);
}

.ft-console .fc-table tbody tr:hover {
    background: rgba(255, 255, 255, .04);
}

/* ---- 分页 ---- */

.ft-console .fc-pager .pagination li a,
.ft-console .fc-pager .pagination li span,
.ft-console .fc-pager .pagination > a,
.ft-console .fc-pager .pagination > span {
    background: rgba(255, 255, 255, .04);
    border-color: var(--fc-line);
    color: var(--ft-meta);
}

.ft-console .fc-pager .pagination li a:hover {
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}

.ft-console .fc-pager .pagination li.active a,
.ft-console .fc-pager .pagination li.active span {
    border-color: var(--km-primary-orange);
    background: var(--km-primary-orange);
    color: #fff;
}

/* ---- 筛选 tabs ----
   base 的选中态是 `background: var(--fc-ink)`：--fc-ink 映射成白色后
   会变成"白底白字"，必须显式改成橙底。 */

.ft-console .fc-tabs {
    background: rgba(255, 255, 255, .03);
    border-color: var(--fc-line);
}

.ft-console .fc-tabs a:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.ft-console .fc-tabs a.is-active {
    background: var(--km-primary-orange);
    color: #fff;
}

/* ---- 表单 ---- */

.ft-console .fc-input,
.ft-console .fc-select,
.ft-console .fc-textarea {
    background: rgba(255, 255, 255, .04);
    border-color: var(--fc-line-strong);
    color: var(--fc-text);
}

.ft-console .fc-input::placeholder,
.ft-console .fc-textarea::placeholder {
    color: var(--ft-meta);
    opacity: 1;
}

.ft-console .fc-input:hover,
.ft-console .fc-select:hover,
.ft-console .fc-textarea:hover {
    border-color: rgba(255, 255, 255, .24);
}

.ft-console .fc-input:focus,
.ft-console .fc-select:focus,
.ft-console .fc-textarea:focus {
    border-color: var(--km-primary-orange);
    box-shadow: 0 0 0 3px rgba(250, 108, 6, .16);
}

/* Chrome 自动填充会把输入框刷成浅蓝底 + 黑字 */
.ft-console .fc-input:-webkit-autofill {
    -webkit-text-fill-color: var(--fc-text);
    -webkit-box-shadow: 0 0 0 1000px #141830 inset;
    caret-color: var(--fc-text);
}

.ft-console .fc-check {
    background: rgba(255, 255, 255, .03);
    border-color: var(--fc-line);
}

.ft-console .fc-check:hover {
    border-color: rgba(255, 255, 255, .20);
}

/* ---- 提示条 ---- */

.ft-console .fc-alert {
    border-color: rgba(248, 113, 113, .28);
    background: rgba(248, 113, 113, .08);
    color: #fca5a5;
}

.ft-console .fc-alert-info {
    border-color: rgba(96, 165, 250, .28);
    background: rgba(96, 165, 250, .10);
    color: #93c5fd;
}

.ft-console .fc-alert-warn {
    border-color: rgba(251, 191, 36, .28);
    background: rgba(251, 191, 36, .10);
    color: #fcd34d;
}

/* ---- Token 展示区 ---- */

.ft-console .fc-secret {
    background: linear-gradient(180deg, rgba(250, 108, 6, .10), rgba(250, 108, 6, .03));
    border-color: rgba(250, 108, 6, .30);
}

.ft-console .fc-secret-code {
    background: #05060f;
    border-color: var(--fc-line);
    color: #e6ebf7;
}

/* ---- 弹层 ---- */

.ft-console .fc-dialog {
    background: var(--km-bg-surface);
    border-color: var(--fc-line);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

.ft-console .fc-dialog::backdrop {
    background: rgba(0, 0, 0, .60);
}

.ft-console .fc-dialog-foot {
    background: rgba(255, 255, 255, .03);
}

.ft-console .fc-dialog-secret {
    background: #05060f;
    border-color: var(--fc-line);
}

.ft-console .fc-dialog-secret code {
    color: #e6ebf7;
}

/* ==========================================================================
   ⑦ 控制台页面：概览 / 订阅 / Token（U14）

   ⑥ 的令牌映射解决了"整页变深",这一段处理卡片里那几层自绘色块：
   订阅 hero 的蓝色渐变、进度条的蓝青渐变、hero 里"白底 + --fc-ink"的主按钮。
   它们都在 base 里直接写了 hex 或用了会被映射成白色的令牌，必须逐个点名。
   ========================================================================== */

/* ---- 订阅 hero ----
   旧底是"科技蓝渐变 + 蓝辉光"，与全站橙色主色是两套品牌语言；
   换成深海军蓝 + 橙辉光：保留"这是一张特殊卡"的层次，又不引入第二种品牌色。 */

.ft-console .fc-sub-hero {
    background: linear-gradient(135deg, #0d1524 0%, #16233a 55%, #1e3150 100%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .50);
}

.ft-console .fc-sub-hero::after {
    background: radial-gradient(circle, rgba(250, 108, 6, .30), transparent 70%);
}

.ft-console .fc-sub-progress {
    background: rgba(255, 255, 255, .12);
}

.ft-console .fc-sub-progress i {
    background: linear-gradient(90deg, #ff8a2b, #fa6c06);
}

/* hero 里"白底 + var(--fc-ink)"的主按钮：--fc-ink 已映射成白色，会变成白底白字。
   改成品牌橙。
   注意 base 里有 `.ft-console .fc-sub-hero a.fc-btn-primary:focus`（0,4,1），
   所以覆盖规则必须带 a，也要把 :hover / :focus 一起写上，否则悬停时会闪回白底。 */

.ft-console .fc-sub-hero .fc-btn-primary,
.ft-console .fc-sub-hero .fc-btn-primary:hover,
.ft-console .fc-sub-hero .fc-btn-primary:focus,
.ft-console .fc-sub-hero a.fc-btn-primary,
.ft-console .fc-sub-hero a.fc-btn-primary:hover,
.ft-console .fc-sub-hero a.fc-btn-primary:focus {
    background: var(--km-primary-orange);
    color: #fff;
}

/* ⑥ 的 .fc-badge 把 hero 底部的徽标也压到 6% 白；hero 底色更亮，恢复 10% 才有层次 */
.ft-console .fc-sub-foot .fc-badge {
    background: rgba(255, 255, 255, .10);
    color: #dbe6f7;
}

/* ---- Token 展示区 ----
   新建成功后那条"只显示一次"的横幅：浅蓝渐变改深色橙调，code 块压到 #05060f。 */

.ft-console .fc-secret-icon {
    background: var(--km-primary-orange);
    color: #fff;
}

.ft-console .fc-token-prefix::after {
    color: #6b7693;
}

/* 弹层里的完整 Token：营销区的行内 code 带浅粉底（#f9f2f4），
   base 只改了文字色，白字压在粉底上等于看不见。这里把底色去掉，
   让外层 .fc-dialog-secret 的 #05060f 透上来。 */

.ft-console .fc-dialog-secret code {
    background: transparent;
    color: #e6ebf7;
}

/* ---- 用量图（U15 会继续补坐标轴与网格；先把柱身与提示气泡换掉） ---- */

.ft-console .fc-chart-bar {
    background: linear-gradient(180deg, #ff8a2b, #fa6c06);
}

.ft-console .fc-chart-col.is-empty .fc-chart-bar {
    background: #22263f;
}

.ft-console .fc-chart-tip {
    background: #05060f;
    border: 1px solid var(--fc-line);
    color: #e6ebf7;
}

/* ---- 用量图基线 ----
   柱状图原来只有柱身、没有地平线，柱脚像悬在半空。补一条基线当 0 轴，
   和坐标文字凑成最小网格（不做横向格线：30 根柱子加满格线会变成
   一张记账凭证，反而看不清趋势）。基线只补这一条，与主题无关。 */

/* ---- 表格：金额列 ----
   财务页能"扫一眼比大小"的前提是小数点对齐。对齐方式与字号属于布局，
   已下沉到 fasttick-console.css（.is-amount / .is-end），这里不再重复；
   深色下唯一需要额外处理的是吸顶表头的底色（见下）。 */

/* ---- 表格：吸顶表头 ----
   吸顶的行为在 base（>=961px 才启用，容器自己滚动）；
   base 的表头底色是 #f8fafd，深色下必须换成不透明的深色，
   否则滚过去的行会从表头里透出来。 */

.ft-console .fc-table-wrap.is-sticky thead th {
    background: #181d33;
}

/* ---- 复选框 ----
   原生 checkbox 在深底上是"黑框 + 黑勾"，勾选状态几乎看不出来。
   accent-color 一行搞定，不重画控件也不影响键盘操作。
   （base 里也加了同一条，指向 --fc-blue；这里换成品牌橙。） */

.ft-console input[type="checkbox"],
.ft-console input[type="radio"] {
    accent-color: var(--km-primary-orange);
}

/* ---- 发票合计 ----
   「已选 N 个，合计 ¥X」是提交前唯一的对账锚点，深色下把数字提亮；
   等宽由 base 的 #fc-invoice-total 负责，这里只管颜色。 */

.ft-console #fc-invoice-total {
    color: #fff;
}

/* ==========================================================================
   ⑧ 响应式：只补本文件引入的偏移，不改 fasttick.css 已有的断点行为
   ========================================================================== */

@media (max-width: 768px) {
    /* 窄屏版心内边距收到 16px，与主站 .km-nav-container 对齐 */
    .ft-site .ft-shell {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ft-site .ft-hero {
        padding-top: 48px;
    }

    /* 首屏 CTA 在平板宽度保持并排（≤720px 由 fasttick.css 改为通栏堆叠），
       只补一层居中，避免 flex-start 让按钮贴左显得松散 */
    .ft-site .ft-hero-actions {
        justify-content: flex-start;
    }

    /* 尾段横幅在窄屏收紧内边距，否则 24px 的圆角会被内容压掉 */
    .ft-site .ft-section-dark > .ft-cta-grid {
        padding: 34px 24px;
        border-radius: 18px;
    }
}

/* ==========================================================================
   ⑨ 收银台与银行凭证（U17）

   作用域 .ft-site：收银台的 body 同时带 ft-site（基线 + 令牌）与 co-page（组件），
   所以这一段只写"深色专属"，布局、间距、断点全在 fasttick-checkout.css 里。
   回退（?skin=legacy）不加载本文件，四个页面保持浅色但结构完整。

   两处必须保留纯白底，不要"顺手统一成深色"：
   · 二维码容器 —— 深底会把静区吃掉，扫码器直接识别失败；
   · Stripe Elements 挂载点 —— 它自带白底输入框，套在深色容器里像"白卡贴黑框"。
   ========================================================================== */

/* ---- 页头 / 页脚骨架 ---- */

.ft-site .co-header {
    background: rgba(7, 8, 20, .88);
    border-bottom-color: var(--km-border);
}

.ft-site .co-brand,
.ft-site .co-brand:hover,
.ft-site .co-brand:focus {
    color: var(--km-text-light);
}

.ft-site .co-brand-mark {
    background: linear-gradient(135deg, var(--km-primary-orange), #ff9a4d);
    color: #fff;
    box-shadow: 0 6px 16px rgba(250, 108, 6, .28);
}

.ft-site .co-brand-text span {
    color: var(--km-primary-orange);
}

.ft-site .co-header-link {
    color: var(--ft-meta);
}

.ft-site .co-header-link:hover,
.ft-site .co-header-link:focus {
    color: var(--km-text-light);
}

/* ---- 三步进度 ---- */

.ft-site .co-steps {
    color: var(--ft-meta);
}

.ft-site .co-steps li + li::before {
    background: var(--km-border);
}

.ft-site .co-steps b {
    border-color: var(--km-border);
    background: rgba(255, 255, 255, .04);
    color: var(--ft-meta);
}

.ft-site .co-steps li.is-active {
    color: var(--km-text-light);
}

.ft-site .co-steps li.is-active b {
    border-color: var(--km-primary-orange);
    background: var(--km-primary-orange);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(250, 108, 6, .18);
}

.ft-site .co-steps li.is-done b {
    border-color: rgba(250, 108, 6, .45);
    background: rgba(250, 108, 6, .12);
    color: #ffa154;
}

/* ---- 标题层级 ----
   --co-ink 在深色下映射成白字；这里不用令牌映射（.co-page 的令牌定义在
   fasttick-checkout.css，皮肤不重复声明一整组），直接点名需要的几处。 */

.ft-site .co-eyebrow {
    color: #ffa154;
}

.ft-site .co-title,
.ft-site .co-card-head h2,
.ft-site .co-channel-name,
.ft-site .co-dl dd,
.ft-site .co-drop strong,
.ft-site .co-result h1,
.ft-site .co-total .co-amount {
    color: var(--km-text-light);
}

.ft-site .co-sub,
.ft-site .co-label,
.ft-site .co-note,
.ft-site .co-card-head p,
.ft-site .co-dl dt,
.ft-site .co-note-box,
.ft-site .co-total > span,
.ft-site .co-qr-hint,
.ft-site .co-drop span,
.ft-site .co-footer,
.ft-site .co-result > p {
    color: var(--ft-meta);
}

.ft-site .co-note a {
    color: #ffa154;
}

.ft-site .co-footer a:hover {
    color: var(--km-primary-orange);
}

/* base 的 .co-footer-inner 自带 color: var(--co-muted)（#67758c），比祖先的
   .ft-site .co-footer 颜色优先级高；深色底下只有 4.13:1，必须显式覆盖。 */
.ft-site .co-footer-inner {
    color: var(--ft-meta);
}

/* 页脚语言切换：深色下选中态反过来用浅底深字，否则深底 + 深底等于看不见 */
.ft-site .co-lang-switcher {
    border-color: var(--km-border);
}

.ft-site .co-lang-btn {
    color: var(--ft-meta);
}

.ft-site .co-lang-btn.is-active {
    background: var(--km-text-light);
    color: #0a1220;
}

/* ---- 卡片 ---- */

.ft-site .co-card {
    background: var(--km-bg-surface);
    border-color: var(--km-border);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

.ft-site .co-card-head {
    border-bottom-color: var(--km-border);
}

.ft-site .co-card-foot {
    background: rgba(0, 0, 0, .18);
    border-top-color: var(--km-border);
}

.ft-site .co-note-box {
    border-color: var(--km-border);
    background: rgba(255, 255, 255, .03);
}

.ft-site .co-total {
    border-top-color: var(--km-border);
}

/* ---- 金额 ----
   浅色用 #c2410c 表示"要付的钱"，深底上这个红偏暗（4.6:1 勉强达标但显得脏），
   换成白字 + 等宽：收银台里金额是唯一主角，不需要第二种强调色。 */

.ft-site .co-amount {
    color: var(--km-text-light);
}

/* ---- 按钮 ---- */

.ft-site .co-btn-primary {
    background: var(--km-primary-orange);
    color: #fff;
    box-shadow: 0 10px 26px rgba(250, 108, 6, .26);
}

.ft-site .co-btn-primary:hover,
.ft-site .co-btn-primary:focus {
    background: var(--km-primary-orange-hover);
    color: #fff;
}

.ft-site .co-btn-ghost {
    background: rgba(255, 255, 255, .04);
    border-color: var(--km-border);
    color: var(--km-text-light);
}

.ft-site .co-btn-ghost:hover,
.ft-site .co-btn-ghost:focus {
    border-color: var(--km-border-hover);
    background: rgba(250, 108, 6, .08);
    color: var(--km-text-light);
}

.ft-site .co-btn-quiet {
    color: var(--ft-meta);
}

.ft-site .co-btn-quiet:hover {
    color: var(--km-primary-orange);
}

/* ---- 渠道单选 ---- */

.ft-site .co-channel {
    background: rgba(255, 255, 255, .02);
    border-color: var(--km-border);
}

.ft-site .co-channel:hover {
    border-color: rgba(255, 255, 255, .18);
}

.ft-site .co-channel:has(input:checked) {
    border-color: var(--km-primary-orange);
    background: rgba(250, 108, 6, .08);
    box-shadow: 0 0 0 3px rgba(250, 108, 6, .14);
}

.ft-site .co-channel input {
    accent-color: var(--km-primary-orange);
}

.ft-site .co-channel-desc {
    color: var(--ft-meta);
}

.ft-site .co-features li {
    color: #dbe4f5;
}

.ft-site .co-features i {
    color: var(--ft-green);
}

/* ---- 徽标 ---- */

.ft-site .co-tag {
    background: rgba(255, 255, 255, .06);
    color: var(--ft-meta);
}

.ft-site .co-tag.is-accent {
    background: rgba(250, 108, 6, .14);
    color: #ffa154;
}

.ft-site .co-tag.is-ok {
    background: rgba(52, 211, 153, .12);
    color: var(--ft-green);
}

.ft-site .co-tag.is-warn {
    background: rgba(251, 191, 36, .14);
    color: var(--ft-amber);
}

.ft-site .co-tag.is-muted {
    background: rgba(255, 255, 255, .06);
    color: var(--ft-meta);
}

/* ---- 二维码 / Stripe：保留白底 ---- */

.ft-site .co-qr {
    border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}

.ft-site .co-stripe-mount {
    border-color: rgba(255, 255, 255, .14);
}

.ft-site .co-stripe-error {
    color: var(--ft-red);
}

/* ---- 代码块 ---- */

.ft-site .co-pre,
.ft-site .co-code {
    background: #0a0c19;
    border-color: var(--km-border);
    color: #e6ebf7;
}

/* ---- 提示条 ---- */

.ft-site .co-alert.is-ok {
    border-color: rgba(52, 211, 153, .3);
    background: rgba(52, 211, 153, .1);
    color: #9be8c8;
}

.ft-site .co-alert.is-warn {
    border-color: rgba(251, 191, 36, .3);
    background: rgba(251, 191, 36, .1);
    color: #ffd98a;
}

.ft-site .co-alert.is-info {
    border-color: rgba(250, 108, 6, .3);
    background: rgba(250, 108, 6, .1);
    color: #ffc79a;
}

/* ---- 轮询状态 ---- */

.ft-site .co-status {
    color: var(--ft-meta);
}

.ft-site .co-status i {
    background: var(--km-primary-orange);
}

/* ---- 支付结果 ---- */

.ft-site .co-result-icon.is-ok {
    background: rgba(52, 211, 153, .12);
    color: var(--ft-green);
    box-shadow: 0 0 0 8px rgba(52, 211, 153, .06);
}

.ft-site .co-result-icon.is-wait {
    background: rgba(250, 108, 6, .12);
    color: #ffa154;
    box-shadow: 0 0 0 8px rgba(250, 108, 6, .06);
}

.ft-site .co-result-icon.is-bad {
    background: rgba(248, 113, 113, .12);
    color: var(--ft-red);
    box-shadow: 0 0 0 8px rgba(248, 113, 113, .06);
}

/* ---- 凭证 dropzone：虚线橙描边 ---- */

.ft-site .co-drop {
    border-color: rgba(250, 108, 6, .38);
    background: rgba(255, 255, 255, .02);
}

.ft-site .co-drop:hover,
.ft-site .co-drop.is-drag {
    border-color: var(--km-primary-orange);
    background: rgba(250, 108, 6, .08);
}

.ft-site .co-drop-icon {
    background: rgba(250, 108, 6, .12);
    border-color: rgba(250, 108, 6, .3);
    color: #ffa154;
}

.ft-site .co-drop-file {
    color: var(--ft-green);
}

/* ---- 页脚 ---- */

.ft-site .co-footer {
    background: rgba(255, 255, 255, .02);
    border-top-color: var(--km-border);
}

/* ==========================================================================
   ⑩ 橙底文字可读性
   品牌橙 #FA6C06 配白字只有 2.91:1（AA 要求 4.5:1）。这里统一把「橙底 + 文字」
   的填充控件改成近黑字（6.5:1），橙色的强调感不变，只是把文字压深。
   只列真正承载文案的控件；纯图标（呼吸点、时间线圆点）不受影响。
   ========================================================================== */

.ft-site .ft-btn-primary,
.ft-site .ft-btn-primary:hover,
.ft-site .ft-btn-primary:focus,
.ft-site a.ft-btn-primary,
.ft-site a.ft-btn-primary:hover,
.ft-site a.ft-btn-primary:focus,
.ft-site .ft-plan.is-featured .ft-plan-cta,
.ft-site .ft-plan.is-featured .ft-plan-cta:hover,
.ft-site .ft-segment.is-active,
.ft-site .co-btn-primary,
.ft-site .co-btn-primary:hover,
.ft-site .co-btn-primary:focus,
.ft-site .co-steps li.is-active b,
.fa-auth .fa-auth-submit,
.fa-auth .fa-auth-submit:hover,
.fa-auth a.fa-auth-submit,
.fa-auth a.fa-auth-submit:hover,
.ft-console .fc-btn-primary,
.ft-console .fc-btn-primary:hover,
.ft-console a.fc-btn-primary,
.ft-console a.fc-btn-primary:hover,
.ft-console a.fc-btn-primary:focus,
.ft-console .fc-sub-hero .fc-btn-primary,
.ft-console .fc-sub-hero .fc-btn-primary:hover,
.ft-console .fc-sub-hero .fc-btn-primary:focus,
.ft-console .fc-sub-hero a.fc-btn-primary,
.ft-console .fc-sub-hero a.fc-btn-primary:hover,
.ft-console .fc-sub-hero a.fc-btn-primary:focus,
.ft-console .fc-pager .pagination li.active a,
.ft-console .fc-pager .pagination li.active span,
.ft-console .fc-tabs a.is-active {
    color: var(--km-on-orange);
}

/* ==========================================================================
   ⑩ 资讯页（快讯 / 财经日历）

   浅色版用极淡的红/琥珀色区分「重要」与「延迟提示」，同样的透明度在深底上
   等于看不见；这里换成带透明度的强调色，保持同样的语义层次。
   ========================================================================== */

.ft-site .ft-news-item.is-important {
    background: rgba(255, 122, 69, .06);
}

.ft-site .ft-news-item:hover {
    background: rgba(255, 255, 255, .03);
}

.ft-site .ft-news-flag {
    background: rgba(255, 122, 69, .16);
}

.ft-site .ft-news-notice {
    border-color: rgba(255, 176, 89, .28);
    background: rgba(255, 176, 89, .08);
}

.ft-site .ft-news-stock {
    background: rgba(255, 255, 255, .04);
}