/* ==========================================================================
   地图帮开放平台 · 门户样式层 portal.css（R1，spec 20260726-ui-r0-token-realignment 后续）
   - 由门户 7 模板的内联 <style> 迁出（2026-07-26）；模板内禁止再写 <style> 块。
   - 色值一律走 main.css 令牌；页面段以 body.page-* 作用域隔离，跨页同名类互不渗漏。
   ========================================================================== */

/* ============ base 壳（body / 页脚） ============ */
        /* 设计令牌（品牌色/圆角/阴影等）统一在 /static/css/main.css 的 :root 定义。
           --brand / --brand-rgb / --bg-main 已在其中对齐令牌，无需在此重复硬编码。 */
        body {
            background: var(--bg-main);
            color: var(--text-primary);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            font-family: var(--font-sans);
        }
        /* ==================== 通用页脚 ==================== */
        .site-footer {
            margin-top: auto;
            padding: 22px 0;
            text-align: center;
            font-size: .82rem;
            color: var(--text-muted);
            border-top: 1px solid var(--border-color);
            background: var(--bg-card);
        }
        .site-footer p { margin: 0; }
        .site-footer a {
            color: var(--text-muted);
            text-decoration: none;
        }
        .site-footer a:hover { color: var(--brand); }
    

/* ============ 顶导 dtb-nav（白底 56 轻形态） ============ */
.dtb-nav, .dtb-nav * { box-sizing: border-box; }
.dtb-nav {
    --dtb-brand: var(--accent-primary);
    position: sticky; top: 0; z-index: 1030;
    background: var(--bg-card);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .06), 0 2px 10px rgba(15, 23, 42, .04);
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-sans);
    color: var(--text-primary);
}
.dtb-nav__inner {
    max-width: 1680px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; min-height: 56px;
    gap: 10px;
}
.dtb-nav__brand {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-primary); text-decoration: none; font-weight: 600; font-size: 1rem;
    flex-shrink: 0;
}
.dtb-nav__brand:hover { color: var(--text-primary); text-decoration: none; }
.dtb-nav__brand i { font-size: 1.05rem; color: var(--dtb-brand); }
.dtb-nav__menu {
    display: flex; align-items: center; gap: 2px;
    list-style: none; padding: 0; margin: 0 auto 0 8px;
    flex: 1 1 auto; min-width: 0;
    flex-wrap: wrap;
}
.dtb-nav__link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 11px;
    min-height: 44px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500; font-size: .92rem;
    border-radius: 6px;
    position: relative;
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    white-space: nowrap;
}
.dtb-nav__link:hover { color: var(--dtb-brand); background: var(--accent-light); text-decoration: none; }
.dtb-nav__link.is-active { color: var(--dtb-brand); font-weight: 600; }
.dtb-nav__link.is-active::after {
    content: ""; position: absolute; left: 11px; right: 11px; bottom: -2px;
    height: 2px; background: var(--dtb-brand); border-radius: 2px;
}

/* 一级栏目分组：标题为直达链接，旁侧箭头按钮 / 桌面悬停展开二级菜单 */
.dtb-nav__group { position: relative; display: inline-flex; align-items: center; }
.dtb-nav__group-caret {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer; color: var(--text-muted);
    padding: 8px 10px 8px 2px; margin-left: -8px; border-radius: 6px; font: inherit;
}
.dtb-nav__group-caret:hover { color: var(--dtb-brand); }
.dtb-nav__group-caret .dtb-nav__caret { transition: transform .15s; }
.dtb-nav__group-menu {
    position: absolute; left: 0; top: calc(100% + 8px);
    min-width: 200px; background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15,23,42,.12);
    padding: 6px; list-style: none; margin: 0;
    opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity .15s, transform .15s; z-index: 1031;
}
.dtb-nav__group-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.dtb-nav__group.is-open .dtb-nav__group-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dtb-nav__group.is-open .dtb-nav__group-caret .dtb-nav__caret { transform: rotate(180deg); }
.dtb-nav__group-menu li { list-style: none; }
.dtb-nav__group-menu .dtb-nav__menu-item.is-active { color: var(--dtb-brand); background: var(--accent-light); font-weight: 600; }
/* 桌面端：悬停整个分组即展开（::before 桥接上方 8px 间隙，避免鼠标移入下拉时丢失 hover） */
@media (min-width: 992px) {
    .dtb-nav__menu { flex-wrap: nowrap; }
    .dtb-nav__group:hover .dtb-nav__group-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .dtb-nav__group:hover .dtb-nav__group-caret .dtb-nav__caret { transform: rotate(180deg); }
}

/* 产品切换器（品牌右侧「产品」下拉；4 端统一，跨站 utm_medium=switcher，与 gis 端同款） */
.dtb-nav__switcher { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; margin-left: 4px; }
.dtb-nav__switcher-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 8px;
    min-height: 44px;
    background: var(--accent-light); color: var(--dtb-brand);
    border: 1px solid var(--border-hover); cursor: pointer; font: inherit;
    font-weight: 600; font-size: .9rem; white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.dtb-nav__switcher-btn:hover { background: var(--accent-light-strong); border-color: var(--border-hover); }
.dtb-nav__switcher-btn .dtb-nav__caret { transition: transform .15s; }
.dtb-nav__switcher-menu {
    position: absolute; left: 0; top: calc(100% + 8px);
    min-width: 220px; background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15,23,42,.12);
    padding: 6px; list-style: none; margin: 0;
    opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity .15s, transform .15s; z-index: 1031;
}
.dtb-nav__switcher-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.dtb-nav__switcher-menu li { list-style: none; }
.dtb-nav__switcher.is-open .dtb-nav__switcher-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dtb-nav__switcher.is-open .dtb-nav__switcher-btn .dtb-nav__caret { transform: rotate(180deg); }
@media (min-width: 992px) {
    .dtb-nav__switcher:hover .dtb-nav__switcher-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .dtb-nav__switcher:hover .dtb-nav__switcher-btn .dtb-nav__caret { transform: rotate(180deg); }
}

.dtb-nav__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dtb-nav__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    font-size: .85rem; font-weight: 600;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.dtb-nav__btn--login { background: var(--dtb-brand); color: #fff; }
.dtb-nav__btn--login:hover { background: var(--accent-dark); color: #fff; text-decoration: none; }
.dtb-nav__btn--ghost { background: transparent; color: var(--text-secondary); border-color: var(--border-strong); }
.dtb-nav__btn--ghost:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }

/* 用户头像区 */
.dtb-nav__user { position: relative; }
.dtb-nav__user-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px; border-radius: 999px;
    min-height: 44px;
    background: transparent; border: 0; color: var(--text-primary); cursor: pointer;
    font: inherit;
    transition: background var(--dur-fast) var(--ease-out);
}
.dtb-nav__user-toggle:hover { background: var(--bg-hover); }
.dtb-nav__avatar {
    width: 28px; height: 28px; border-radius: 50%;
    object-fit: cover;
    background: var(--accent-light);
    border: 1px solid var(--border-hover);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--dtb-brand); font-size: 14px; flex-shrink: 0;
}
.dtb-nav__avatar--fallback i { font-size: 13px; }
.dtb-nav__user-name { font-size: .88rem; color: var(--text-primary); }
.dtb-nav__caret { font-size: .7rem; color: var(--text-muted); }
.dtb-nav__member-badge {
    font-size: 11px; padding: 2px 9px; border-radius: 12px; font-weight: 600;
    background: var(--bg-hover); color: var(--text-secondary); line-height: 1.6;
}
.dtb-nav__member-badge--l1 { background: var(--accent-light); color: var(--warning-dark); }
.dtb-nav__member-badge--l2 { background: var(--success-bg); color: var(--success-dark); }

/* 流量豆 / 数据豆余额（已从顶栏收纳进用户下拉菜单） */
.dtb-nav__balance { padding: 2px 4px 4px; }
.dtb-nav__balance-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 7px 12px; border-radius: 8px;
    color: var(--text-secondary); text-decoration: none;
}
.dtb-nav__balance-row:hover { background: var(--accent-light); text-decoration: none; }
.dtb-nav__balance-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .85rem; color: var(--text-secondary);
}
.dtb-nav__balance-label i { width: 16px; text-align: center; color: var(--dtb-brand); opacity: .9; }
.dtb-nav__balance-value {
    font-size: .98rem; font-weight: 600; color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.dtb-nav__balance-recharge {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 6px 12px 2px; padding: 8px 12px;
    background: var(--dtb-brand); color: #fff;
    border-radius: 8px; font-size: .85rem; font-weight: 600;
    text-decoration: none;
}
.dtb-nav__balance-recharge:hover { background: var(--accent-dark); color: #fff; text-decoration: none; }

.dtb-nav__menu-dropdown {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 220px; background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border-color); border-radius: 12px;
    box-shadow: 0 12px 30px rgba(15,23,42,.12);
    padding: 6px; list-style: none; margin: 0;
    opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity .15s, transform .15s;
}
.dtb-nav__user.is-open .dtb-nav__menu-dropdown {
    opacity: 1; transform: translateY(0); pointer-events: auto;
}
.dtb-nav__menu-dropdown li { list-style: none; }
.dtb-nav__menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 8px;
    color: var(--text-secondary); text-decoration: none;
    font-size: .9rem; line-height: 1.4;
    background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer;
}
.dtb-nav__menu-item:hover { background: var(--accent-light); color: var(--dtb-brand); text-decoration: none; }
.dtb-nav__menu-item--danger { color: var(--danger); }
.dtb-nav__menu-item--danger:hover { background: var(--danger-bg); color: var(--danger); }
.dtb-nav__menu-item i { width: 16px; text-align: center; opacity: .85; }
.dtb-nav__menu-divider { height: 1px; background: var(--bg-hover); margin: 6px 0; border: 0; }
.dtb-nav__menu-header { padding: 6px 12px 4px; font-size: .8rem; color: var(--text-muted); }
.dtb-nav__menu-header strong { display: block; color: var(--text-primary); font-size: .92rem; margin-bottom: 2px; font-weight: 600; }

/* 汉堡按钮 */
.dtb-nav__toggler {
    display: none;
    background: transparent; border: 1px solid var(--border-strong);
    color: var(--text-secondary); padding: 4px 10px; border-radius: 8px; cursor: pointer;
    min-width: 44px; min-height: 44px;
    font-size: 1.05rem;
}
.dtb-nav__toggler:hover { background: var(--bg-hover); color: var(--text-primary); }
.dtb-nav :where(a, button):focus-visible,
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow);
}

@media (max-width: 991.98px) {
    .dtb-nav__inner { flex-wrap: wrap; padding: 8px 16px; }
    .dtb-nav__toggler { display: inline-flex; align-items: center; }
    /* 移动端：品牌 + 产品切换器留在左侧，汉堡按钮推到右侧 */
    .dtb-nav__switcher { margin-right: auto; }
    .dtb-nav__menu, .dtb-nav__actions { display: none; flex-basis: 100%; }
    .dtb-nav.is-open .dtb-nav__menu,
    .dtb-nav.is-open .dtb-nav__actions {
        display: flex; flex-direction: column; align-items: stretch;
        margin: 8px 0 4px; gap: 4px; width: 100%;
        padding-top: 8px; border-top: 1px solid var(--border-color);
    }
    .dtb-nav__link { padding: 10px 12px; }
    .dtb-nav__link.is-active::after { display: none; }
    .dtb-nav__link.is-active { background: var(--accent-light); }
    .dtb-nav__user-name { display: inline; }
    .dtb-nav__menu-dropdown { position: static; opacity: 1; transform: none; pointer-events: auto; box-shadow: none; border: 0; padding: 0; background: var(--bg-hover); }
    .dtb-nav__menu-item { color: var(--text-secondary); }
    .dtb-nav__menu-item:hover { background: var(--accent-light); color: var(--dtb-brand); }
    .dtb-nav__menu-item--danger { color: var(--danger); }
    .dtb-nav__menu-item--danger:hover { background: var(--danger-bg); color: var(--danger); }
    .dtb-nav__menu-divider { background: var(--bg-hover); }
    .dtb-nav__caret { display: none; }
    /* 分组在移动端：标题(链接)占主行 + 右侧箭头按钮展开/收起，子项缩进 */
    .dtb-nav__group { width: 100%; display: flex; flex-wrap: wrap; align-items: center; }
    .dtb-nav__link--group { flex: 1 1 auto; justify-content: flex-start; }
    .dtb-nav__group-caret { margin-left: auto; padding: 10px 12px; }
    .dtb-nav__group-caret .dtb-nav__caret { display: inline; transition: transform .15s; }
    .dtb-nav__group.is-open .dtb-nav__group-caret .dtb-nav__caret { transform: rotate(180deg); }
    .dtb-nav__group-menu {
        flex-basis: 100%;
        position: static; opacity: 1; transform: none; pointer-events: auto;
        box-shadow: none; border: 0; background: transparent;
        padding: 2px 0 2px 14px; margin: 0; min-width: 0; display: none;
    }
    .dtb-nav__group-menu::before { display: none; }
    .dtb-nav__group.is-open .dtb-nav__group-menu { display: block; }
}

/* ============ 首页 / ============ */
body.page-home /* Hero：浅底深字 + 右侧代码块（43 稿） */
    .hero {
        background: var(--bg-soft);
        color: var(--text-primary);
        padding: 48px 0 40px;
        text-align: left;
        border-bottom: 1px solid var(--border-soft);
    }
body.page-home .hero-split {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
        gap: 32px;
        align-items: center;
    }
body.page-home .hero h1 { font-size: var(--fs-h1); font-weight: 600; margin-bottom: 12px; color: var(--text-primary); line-height: 1.25; }
body.page-home .hero h1 i { color: var(--accent-primary); }
body.page-home .hero p { font-size: var(--fs-body-lg); color: var(--text-secondary); max-width: 560px; margin: 0; line-height: 1.8; }
body.page-home .hero-actions { margin-top: 24px; display: flex; justify-content: flex-start; gap: 12px; flex-wrap: wrap; }
body.page-home .hero-actions .btn { min-height: 44px; border-radius: 999px; padding: 9px 22px; font-weight: 600; display: inline-flex; align-items: center; }
body.page-home .code-hero {
        background: var(--panel-dark);
        color: #e8edf5;
        border-radius: var(--radius-lg);
        padding: 16px 18px 14px;
        font-family: var(--font-mono);
        font-size: var(--fs-caption);
        line-height: 1.7;
        box-shadow: var(--shadow-md);
    }
body.page-home .code-hero__tabs { display: flex; gap: 6px; margin-bottom: 10px; }
body.page-home .code-hero__tab {
        font-family: var(--font-sans);
        font-size: var(--fs-caption);
        color: rgba(255,255,255,.55);
        background: transparent;
        border: 0;
        padding: 2px 8px;
        border-radius: 999px;
    }
body.page-home .code-hero__tab.is-on { color: #fff; background: rgba(255,255,255,.12); }
body.page-home .code-hero pre { margin: 0; white-space: pre-wrap; word-break: break-all; color: inherit; font-family: inherit; font-size: inherit; }
body.page-home .code-hero__out { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(232,237,245,.78); }
@media (max-width: 991.98px) {
    body.page-home .hero-split { grid-template-columns: 1fr; }
    body.page-home .hero { text-align: center; }
    body.page-home .hero p { margin: 0 auto; }
    body.page-home .hero-actions { justify-content: center; }
}
body.page-home /* 入口卡片 */
    .entry-cards { margin-top: 24px; position: relative; z-index: 10; }
body.page-home .entry-card {
        border: none;
        border-left: 4px solid var(--brand);
        border-radius: 10px;
        transition: transform .2s, box-shadow .2s;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        display: block;
    }
body.page-home .entry-card:hover {
        
        box-shadow: 0 8px 24px rgba(0,0,0,.1);
        color: inherit;
    }
body.page-home .entry-card .card-body { padding: 28px 24px; }
body.page-home .entry-card .entry-icon {
        width: 52px; height: 52px;
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        font-size: 22px;
        background: var(--accent-light);
        color: var(--accent-dark);
        margin-bottom: 16px;
    }
body.page-home .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
body.page-home .cap-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: 18px 20px;
        height: 100%;
        box-shadow: none;
        transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    }
body.page-home .cap-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); }
body.page-home .cap-card h3 { font-size: var(--fs-h3); font-weight: 600; margin: 8px 0 6px; }
body.page-home .cap-card p { font-size: var(--fs-body); color: var(--text-secondary); margin: 0 0 12px; line-height: 1.65; }
body.page-home .cap-card a { font-size: var(--fs-body); font-weight: 600; color: var(--brand); text-decoration: none; }
body.page-home .cap-card a:hover { text-decoration: underline; }
body.page-home .honesty {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: 22px;
        box-shadow: none;
    }
body.page-home .honesty h3 { font-size: var(--fs-h3); font-weight: 600; margin: 0 0 6px; }
body.page-home .honesty p { font-size: var(--fs-body); color: var(--text-secondary); margin: 0; line-height: 1.7; }
body.page-home .access-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
body.page-home .access-step {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: 18px 16px;
        height: 100%;
    }
body.page-home .access-step .n {
        display: inline-flex; align-items: center; justify-content: center;
        width: 28px; height: 28px; border-radius: 50%;
        background: var(--accent-primary); color: #fff;
        font-size: var(--fs-caption); font-weight: 600; margin-bottom: 10px;
    }
body.page-home .access-step h3 { font-size: var(--fs-body-lg); font-weight: 600; margin: 0 0 6px; }
body.page-home .access-step p { font-size: var(--fs-body); color: var(--text-secondary); margin: 0; line-height: 1.65; }
@media (max-width: 991.98px) {
    body.page-home .cap-grid, body.page-home .honesty, body.page-home .access-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
    body.page-home .cap-grid, body.page-home .honesty, body.page-home .access-steps { grid-template-columns: 1fr; }
}
body.page-home .entry-card h5 { font-weight: 600; font-size: 1.1rem; margin-bottom: 6px; }
body.page-home .entry-card p { font-size: .88rem; color: var(--text-secondary); margin: 0; }
body.page-home .entry-card .entry-arrow {
        font-size: 13px; color: var(--brand); margin-top: 12px; font-weight: 600;
    }
body.page-home /* 在线工具强入口 banner（平台第一个在线工具 · C 位） */
    .tool-banner {
        display: flex; align-items: center; gap: 22px;
        background: var(--accent-light);
        border: 1px solid var(--border-color);
        border-left: 4px solid var(--brand);
        border-radius: var(--radius-lg);
        padding: 20px 24px;
        text-decoration: none; color: inherit;
        box-shadow: none;
        transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    }
body.page-home .tool-banner:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); color: inherit; }
body.page-home .tool-banner__icon {
        flex-shrink: 0; width: 64px; height: 64px; border-radius: 16px;
        background: var(--accent-gradient); color: #fff;
        display: flex; align-items: center; justify-content: center; font-size: 28px;
    }
body.page-home .tool-banner__main { flex: 1; min-width: 0; }
body.page-home .tool-banner__badge {
        display: inline-block; font-size: .74rem; font-weight: 600; color: var(--brand);
        background: var(--accent-light); border: 1px solid var(--border-hover); border-radius: 999px;
        padding: 2px 10px; margin-bottom: 8px;
    }
body.page-home .tool-banner__main h3 { font-weight: 600; font-size: 1.25rem; margin: 0 0 6px; color: var(--text-primary); }
body.page-home .tool-banner__main p { margin: 0; color: var(--text-secondary); font-size: .9rem; line-height: 1.6; }
body.page-home .tool-banner__cta { flex-shrink: 0; text-align: center; }
body.page-home .tool-banner__btn {
        display: inline-flex; align-items: center; gap: 8px;
        background: var(--accent-gradient); color: #fff;
        border-radius: 999px; padding: 11px 24px; font-weight: 600; font-size: .95rem;
        white-space: nowrap;
    }
body.page-home .tool-banner__sub { display: block; margin-top: 8px; font-size: .78rem; color: var(--text-muted); }
body.page-home .matrix-links {
        display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
        margin-top: 14px; font-size: var(--fs-body);
    }
body.page-home .matrix-links a { color: var(--brand); text-decoration: none; font-weight: 600; }
body.page-home .matrix-links a:hover { text-decoration: underline; }
@media (max-width: 767px) {
    body.page-home .tool-banner { flex-direction: column; text-align: center; align-items: stretch; }
    body.page-home .tool-banner__icon { margin: 0 auto; }
}
body.page-home .section-title { text-align: center; margin-bottom: 24px; }
body.page-home .section-title h2 { font-weight: 600; font-size: var(--fs-h2); margin-bottom: 8px; }
body.page-home .section-title p { color: var(--text-secondary); margin: 0 auto; max-width: 680px; }
body.page-home .api-section { padding: 48px 0 0; }
body.page-home .api-card {
        border: 1px solid var(--border-color);
        border-radius: 14px;
        background: var(--bg-card);
        height: 100%;
        box-shadow: 0 8px 24px rgba(15,23,42,.04);
        transition: transform .18s, box-shadow .18s, border-color .18s;
    }
body.page-home .api-card:hover {
        
        border-color: rgba(var(--brand-rgb), .35);
        box-shadow: 0 12px 28px rgba(15,23,42,.08);
    }
body.page-home .api-card .badge-soft {
        background: var(--accent-light);
        color: var(--accent-dark);
        border: 1px solid var(--border-hover);
    }
body.page-home .api-path {
        background: var(--bg-hover);
        border: 1px solid var(--border-color);
        color: var(--text-secondary);
        border-radius: 8px;
        font-size: .78rem;
        padding: 7px 9px;
        word-break: break-all;
    }
body.page-home .scenario-section { padding: 48px 0; }
body.page-home .scenario-card {
        background: var(--bg-card);
        border-radius: 14px;
        border: 1px solid var(--border-color);
        padding: 22px;
        height: 100%;
    }
body.page-home .scenario-card i { color: var(--brand); font-size: 24px; margin-bottom: 12px; }
body.page-home /* 3 步快速接入 */
    .quickstart-section { padding: 48px 0 0; }
body.page-home .quickstart-grid {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 18px;
        padding: 28px;
        box-shadow: 0 10px 30px rgba(15,23,42,.04);
    }
body.page-home .qs-step {
        position: relative;
        padding: 18px;
        border-radius: 14px;
        border: 1px solid var(--border-soft);
        background: var(--bg-hover);
        height: 100%;
        transition: border-color .2s, box-shadow .2s, transform .2s;
    }
body.page-home .qs-step:hover {
        border-color: rgba(var(--brand-rgb), .35);
        background: var(--bg-card);
        box-shadow: 0 8px 22px rgba(15,23,42,.06);
        
    }
body.page-home .qs-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px; height: 32px;
        border-radius: 50%;
        background: var(--brand);
        color: #fff;
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 12px;
    }
body.page-home .qs-step h5 { font-weight: 600; font-size: 1.05rem; margin-bottom: 6px; }
body.page-home .qs-step p { font-size: .88rem; color: var(--text-secondary); margin-bottom: 12px; }
body.page-home .qs-step .qs-link {
        font-size: .85rem;
        font-weight: 600;
        color: var(--brand);
        text-decoration: none;
    }
body.page-home .qs-step .qs-link:hover { text-decoration: underline; }
body.page-home .qs-arrow {
        display: none;
    }
@media (min-width: 992px) {
    body.page-home .qs-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 50%;
            right: -22px;
            transform: translateY(-50%);
            width: 32px; height: 32px;
            border-radius: 50%;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            color: var(--text-muted);
            z-index: 2;
        }
}
body.page-home .cta-band {
        margin: 34px 0 50px;
        background: var(--panel-dark);
        color: #fff;
        border-radius: 18px;
        padding: 30px;
    }
body.page-home .cta-band p { color: rgba(255,255,255,.72); margin-bottom: 0; }
body.page-home /* 特性区 */
    .features { padding: 48px 0; }
body.page-home .feature-item { text-align: center; padding: 20px 12px; }
body.page-home .feature-item i { font-size: 28px; color: var(--brand); margin-bottom: 12px; }
body.page-home .feature-item h6 { font-weight: 600; margin-bottom: 6px; }
body.page-home .feature-item p { font-size: .85rem; color: var(--text-secondary); }

/* ============ 接口目录 /apis ============ */
body.page-apis .hero { background: var(--bg-soft); color: var(--text-primary); padding: 48px 0 40px; border-bottom: 1px solid var(--border-soft); }
body.page-apis .hero h1 { font-size: var(--fs-h1); font-weight: 600; margin-bottom: 12px; line-height: 1.25; }
body.page-apis .hero p { max-width: 720px; color: var(--text-secondary); line-height: 1.8; margin: 0; }
body.page-apis .hero-actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
body.page-apis .hero-actions .btn { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
body.page-apis .portal-stats { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
body.page-apis .stat-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 14px 18px; min-width: 120px; box-shadow: var(--shadow-sm); }
body.page-apis .stat-card strong { display: block; font-size: var(--fs-h2); line-height: 1; color: var(--accent-secondary); }
body.page-apis .stat-card span { display: block; margin-top: 6px; font-size: var(--fs-caption); color: var(--text-muted); }
body.page-apis .content-wrap { margin-top: 24px; position: relative; z-index: 2; }
body.page-apis .category-block { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); margin-bottom: 20px; }
body.page-apis .category-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border-soft); padding-bottom: 16px; margin-bottom: 18px; }
body.page-apis .category-head h2 { font-size: 1.125rem; font-weight: 600; margin: 0; }
body.page-apis .category-head p { color: var(--text-secondary); margin: 5px 0 0; font-size: .875rem; line-height: 1.6; }
body.page-apis .api-card { display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 20px; height: 100%; transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
body.page-apis .api-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); }
body.page-apis .api-title { min-width: 0; }
body.page-apis .api-id { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-caption); }
body.page-apis .badge-soft { background: var(--accent-light); color: var(--accent-dark); border: 1px solid var(--border-hover); }
body.page-apis .api-path { background: var(--bg-hover); border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: var(--radius); font-family: var(--font-mono); font-size: .78rem; padding: 8px 10px; word-break: break-all; }
body.page-apis .param-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-hover); color: var(--text-secondary); border-radius: 999px; font-size: .76rem; padding: 4px 8px; margin: 0 5px 6px 0; }
body.page-apis .param-chip.required { background: var(--accent-light); color: var(--accent-dark); }
body.page-apis .param-star { font-size: .55rem; }
body.page-apis .method-pill { display: inline-flex; align-items: center; border-radius: 999px; background: var(--bg-hover); border: 1px solid var(--border-color); color: var(--text-secondary); font-size: .72rem; font-weight: 600; padding: 5px 9px; letter-spacing: .02em; }
body.page-apis .example-box { background: var(--bg-hover); border: 1px solid var(--border-color); border-radius: 12px; padding: 13px 14px; }
body.page-apis .example-row { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; align-items: start; }
body.page-apis .example-row + .example-row { border-top: 1px dashed var(--border-soft); margin-top: 10px; padding-top: 10px; }
body.page-apis .example-label { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent-light); color: var(--accent-dark); font-size: .72rem; font-weight: 600; padding: 3px 8px; }
body.page-apis .example-text { color: var(--text-secondary); font-size: .86rem; line-height: 1.65; }
body.page-apis .api-card__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }
body.page-apis .empty-state { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 18px; padding: 56px 20px; text-align: center; color: var(--text-secondary); }
body.page-apis .cta-panel { background: var(--panel-dark); color: #fff; border-radius: 18px; padding: 28px; margin: 10px 0 44px; }
body.page-apis .cta-panel p { color: rgba(255,255,255,.72); }
body.page-apis /* 分类锚点导航 */
    .anchor-nav { position: sticky; top: 64px; z-index: 5; background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border-color); padding: 10px 14px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
body.page-apis .anchor-nav .anchor-list { display: flex; flex-wrap: wrap; gap: 8px; }
body.page-apis .anchor-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 999px; background: var(--bg-hover); color: var(--text-secondary); font-size: .82rem; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.page-apis .anchor-nav a:hover { background: var(--accent-light); color: var(--brand); }
body.page-apis .anchor-nav a:focus-visible,
body.page-apis .api-card a:focus-visible,
body.page-home .tool-banner:focus-visible,
body.page-home .cap-card a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow);
}
@media (max-width: 991.98px) {
    body.page-apis .portal-stats { justify-content: flex-start; }
}

/* ============ 定价 /pricing ============ */
body.page-pricing .hero { background: var(--bg-soft); color: var(--text-primary); padding: 48px 0 40px; border-bottom: 1px solid var(--border-soft); }
body.page-pricing .hero h1 { font-size: var(--fs-h1); font-weight: 600; margin-bottom: 12px; line-height: 1.25; }
body.page-pricing .hero p { max-width: 760px; color: var(--text-secondary); line-height: 1.8; margin: 0; }
body.page-pricing .hero-actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
body.page-pricing .hero-actions .btn { min-height: 44px; border-radius: 999px; padding: 9px 20px; font-weight: 600; display: inline-flex; align-items: center; }
body.page-pricing .portal-stats { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
body.page-pricing .stat-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 14px 18px; min-width: 120px; box-shadow: var(--shadow-sm); }
body.page-pricing .stat-card strong { display: block; font-size: var(--fs-h2); line-height: 1; color: var(--accent-secondary); }
body.page-pricing .stat-card span { display: block; margin-top: 6px; font-size: var(--fs-caption); color: var(--text-muted); }
body.page-pricing .content-wrap { margin-top: 24px; position: relative; z-index: 2; }
body.page-pricing .pricing-utility { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); margin-bottom: 20px; box-shadow: var(--shadow-sm); overflow: hidden; }
body.page-pricing .billing-guide { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: transparent; border: 0; border-radius: 0; padding: 12px 16px; margin: 0; color: var(--accent-dark); font-size: .875rem; }
body.page-pricing .billing-guide i { color: var(--brand); }
body.page-pricing .billing-guide a { color: var(--brand); font-weight: 600; text-decoration: none; }
body.page-pricing .billing-guide a:hover { text-decoration: underline; }
body.page-pricing .tier-anchor { border-top: 1px solid var(--border-soft); padding: 10px 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
body.page-pricing .utility-label { color: var(--text-muted); font-size: var(--fs-caption); font-weight: 600; margin-right: 2px; }
body.page-pricing .tier-anchor a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 999px; background: var(--bg-hover); color: var(--text-secondary); font-size: .82rem; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
body.page-pricing .tier-anchor a:hover { background: var(--accent-light); color: var(--brand); }
body.page-pricing .tier-anchor a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
body.page-pricing .tier-section { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); margin-bottom: 20px; }
body.page-pricing .tier-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
body.page-pricing .tier-head h2 { font-size: 1.2rem; font-weight: 600; margin: 0; }
body.page-pricing .tier-head p { color: var(--text-secondary); margin: 5px 0 0; font-size: .875rem; }
body.page-pricing .tier-icon { width: 40px; height: 40px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; flex-shrink: 0; }
body.page-pricing .tier-meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: .85rem; color: var(--text-secondary); }
body.page-pricing .tier-meta strong { color: var(--text-primary); }
body.page-pricing .tier-meta__price,
body.page-pricing .price-table__price,
body.page-pricing .price-table__validity { font-variant-numeric: tabular-nums; }
body.page-pricing .price-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
body.page-pricing .price-table th { background: var(--bg-hover); color: var(--text-secondary); font-size: .78rem; font-weight: 600; padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--border-color); }
body.page-pricing .price-table th:first-child { border-top-left-radius: 10px; }
body.page-pricing .price-table th:last-child { border-top-right-radius: 10px; }
body.page-pricing .price-table td { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
body.page-pricing .price-table tr:last-child td { border-bottom: none; }
body.page-pricing .price-table tr:hover td { background: var(--bg-hover); }
body.page-pricing .api-id { font-family: var(--font-mono); font-size: .78rem; color: var(--text-secondary); }
body.page-pricing .badge-soft { background: var(--accent-light); color: var(--accent-dark); border: 1px solid var(--border-hover); }
body.page-pricing .price-strong { font-weight: 600; color: var(--accent-dark); font-size: var(--fs-body-lg); }
body.page-pricing .price-eq { font-size: .76rem; color: var(--text-muted); }
body.page-pricing .price-table__price { width: 132px; }
body.page-pricing .price-table__validity { width: 90px; }
body.page-pricing .price-table__actions { width: 160px; }
body.page-pricing .price-actions { display: flex; justify-content: flex-end; gap: 8px; }
body.page-pricing .price-actions .btn { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; }
body.page-pricing .faq-section { margin: 8px 0 36px; }
body.page-pricing .faq-title { font-size: 1.32rem; font-weight: 600; margin: 0 0 16px; }
body.page-pricing .faq-list { display: flex; flex-direction: column; gap: 12px; }
body.page-pricing .faq-item { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden; }
body.page-pricing .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; font-weight: 600; color: var(--text-primary); font-size: .98rem; }
body.page-pricing .faq-item summary::-webkit-details-marker { display: none; }
body.page-pricing .faq-arrow { color: var(--text-muted); font-size: .82rem; transition: transform .2s; flex-shrink: 0; }
body.page-pricing .faq-item[open] .faq-arrow { transform: rotate(180deg); }
body.page-pricing .faq-item[open] summary { border-bottom: 1px solid var(--border-soft); }
body.page-pricing .faq-answer { padding: 14px 20px 18px; color: var(--text-secondary); line-height: 1.8; font-size: .92rem; }
body.page-pricing .cta-panel { background: var(--panel-dark); color: #fff; border-radius: 18px; padding: 28px; margin: 12px 0 44px; }
body.page-pricing .cta-panel p { color: rgba(255,255,255,.72); }
body.page-pricing .empty-state { background: var(--bg-card); border: 1px dashed var(--border-strong); border-radius: 18px; padding: 56px 20px; text-align: center; color: var(--text-secondary); }
@media (max-width: 575.98px) {
    body.page-pricing .price-table thead { display: none; }
    body.page-pricing .price-table, body.page-pricing .price-table tbody, body.page-pricing .price-table tr, body.page-pricing .price-table td { display: block; width: 100%; }
    body.page-pricing .price-table { table-layout: auto; }
    body.page-pricing .price-table tr { border: 1px solid var(--border-color); border-radius: 12px; padding: 8px; margin-bottom: 10px; }
    body.page-pricing .price-table td { border: none; padding: 6px 4px; }
    body.page-pricing .price-table td::before { content: attr(data-label); display: inline-block; min-width: 76px; color: var(--text-muted); font-size: .78rem; font-weight: 600; margin-right: 8px; }
    body.page-pricing .price-table td.text-end { text-align: left !important; }
    body.page-pricing .price-actions { display: inline-flex; justify-content: flex-start; vertical-align: middle; }
}
@media (max-width: 991.98px) {
    body.page-pricing .portal-stats { justify-content: flex-start; }
}

/* ============ API 文档 /apidocs ============ */
body.page-apidocs { background: var(--bg-card); }
body.page-apidocs .doc-shell {
        max-width: 1320px; margin: 0 auto;
        display: grid; grid-template-columns: 250px minmax(0, 1fr) 196px;
        align-items: start;
    }
body.page-apidocs /* ---------- 左侧导航 ---------- */
    .doc-side {
        position: sticky; top: 56px; align-self: start;
        max-height: calc(100vh - 56px); overflow-y: auto;
        border-right: 1px solid var(--border-color); padding: 20px 10px 40px;
    }
body.page-apidocs .doc-side__title { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); padding: 4px 10px 12px; }
body.page-apidocs .doc-side__quick {
        display: flex; align-items: center; gap: 8px;
        padding: 8px 10px; margin-bottom: 4px; border-radius: 8px;
        min-height: 44px;
        color: var(--text-secondary); text-decoration: none; font-size: .9rem; font-weight: 600;
    }
body.page-apidocs .doc-side__quick:hover { background: var(--bg-hover); color: var(--brand); }
body.page-apidocs .doc-side__quick.active { background: var(--accent-light); color: var(--brand); }
body.page-apidocs .doc-side__group { font-size: .76rem; font-weight: 600; color: var(--text-muted); letter-spacing: .04em; padding: 16px 10px 6px; text-transform: none; }
body.page-apidocs .doc-side__link {
        display: flex; align-items: center; min-height: 44px; padding: 7px 10px 7px 16px; border-radius: 8px;
        color: var(--text-secondary); text-decoration: none; font-size: .865rem; line-height: 1.5;
        border-left: 2px solid transparent;
    }
body.page-apidocs .doc-side__link:hover { background: var(--bg-hover); color: var(--brand); }
body.page-apidocs .doc-side__link.active { background: var(--accent-light); color: var(--brand); font-weight: 600; border-left-color: var(--brand); }
body.page-apidocs /* ---------- 中间正文 ---------- */
    .doc-main { padding: 28px 32px 72px; min-width: 0; overflow: hidden; }
body.page-apidocs .doc-bc { font-size: .82rem; color: var(--text-muted); margin-bottom: 10px; }
body.page-apidocs .doc-bc a { color: var(--text-muted); text-decoration: none; }
body.page-apidocs .doc-bc a:hover { color: var(--brand); }
body.page-apidocs .doc-h1 { font-size: var(--fs-h1); font-weight: 600; color: var(--text-primary); margin: 0 0 6px; }
body.page-apidocs .doc-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
body.page-apidocs .doc-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 600; border-radius: 999px; padding: 4px 10px; }
body.page-apidocs .doc-pill--method { background: var(--success-bg); color: var(--success-dark); border: 1px solid var(--success-line); }
body.page-apidocs .doc-pill--id { background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border-color); font-weight: 600; }
body.page-apidocs .doc-pill--price { background: var(--accent-light); color: var(--accent-dark); border: 1px solid var(--border-hover); }
body.page-apidocs .doc-pill--free { background: var(--info-bg); color: var(--info-dark); border: 1px solid var(--info-line); }
body.page-apidocs .doc-section { scroll-margin-top: 70px; padding-top: 24px; }
body.page-apidocs .doc-section h2 { font-size: var(--fs-h2); font-weight: 600; color: var(--text-primary); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
body.page-apidocs .doc-section h3 { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 20px 0 10px; }
body.page-apidocs .doc-p { color: var(--text-secondary); line-height: 1.75; font-size: .94rem; }
body.page-apidocs .doc-callout { background: var(--bg-hover); border: 1px solid var(--border-color); border-left: 3px solid var(--brand); border-radius: 8px; padding: 12px 16px; color: var(--text-secondary); font-size: .88rem; line-height: 1.7; }
body.page-apidocs .doc-url { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel-dark); color: #e8edf5; border-radius: 10px; padding: 12px 14px; font-family: var(--font-mono); font-size: .86rem; word-break: break-all; }
body.page-apidocs .doc-url .m { color: var(--success-dark); font-weight: 600; }
body.page-apidocs /* 参数表 */
    .doc-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
body.page-apidocs .doc-table th, body.page-apidocs .doc-table td { text-align: left; padding: 9px 12px; border: 1px solid var(--border-color); vertical-align: top; }
body.page-apidocs .doc-table th { background: var(--bg-hover); color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
body.page-apidocs .doc-table td code, body.page-apidocs .doc-p code, body.page-apidocs .doc-callout code { background: var(--bg-hover); color: var(--danger-dark); border-radius: 5px; padding: 1px 6px; font-size: .85em; }
body.page-apidocs .doc-req { color: var(--danger); font-weight: 600; }
body.page-apidocs .doc-opt { color: var(--text-muted); }
body.page-apidocs .doc-optvals { color: var(--text-secondary); font-size: .82rem; }
body.page-apidocs /* 代码块 + tabs */
    .code-tabs__bar { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: -1px; }
body.page-apidocs .code-tabs__btn { min-height: 44px; border: 1px solid transparent; border-bottom: none; background: transparent; color: var(--text-secondary); font-size: .84rem; font-weight: 600; padding: 7px 14px; border-radius: 8px 8px 0 0; cursor: pointer; }
body.page-apidocs .code-tabs__btn.active { background: var(--panel-dark); color: #fff; }
body.page-apidocs .code-block { position: relative; background: var(--panel-dark); border-radius: 0 10px 10px 10px; }
body.page-apidocs .code-block pre { margin: 0; padding: 16px 18px; overflow-x: auto; color: #e8edf5; font-family: var(--font-mono); font-size: .85rem; line-height: 1.7; }
body.page-apidocs .code-block.single { border-radius: 10px; }
body.page-apidocs .code-copy { position: absolute; top: 8px; right: 8px; min-height: 34px; background: rgba(255,255,255,.1); color: #e8edf5; border: 0; border-radius: 6px; font-size: .74rem; padding: 4px 10px; cursor: pointer; }
body.page-apidocs .code-copy:hover { background: rgba(255,255,255,.2); color: #fff; }
body.page-apidocs .doc-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
body.page-apidocs /* 概览卡片 */
    .ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
body.page-apidocs .ov-card { display: block; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 14px 16px; text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
body.page-apidocs .ov-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); }
body.page-apidocs .ov-card__name { font-weight: 600; color: var(--text-primary); font-size: .95rem; }
body.page-apidocs .ov-card__desc { color: var(--text-secondary); font-size: .82rem; line-height: 1.55; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.page-apidocs .step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
body.page-apidocs .step-card { border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; }
body.page-apidocs .step-no { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .85rem; }
body.page-apidocs /* ---------- 右侧目录 ---------- */
    .doc-toc { position: sticky; top: 56px; align-self: start; max-height: calc(100vh - 56px); overflow-y: auto; padding: 30px 12px; }
body.page-apidocs .doc-toc__title { font-size: .76rem; font-weight: 600; color: var(--text-muted); letter-spacing: .04em; margin-bottom: 10px; }
body.page-apidocs .doc-toc a { display: flex; align-items: center; min-height: 36px; padding: 5px 10px; color: var(--text-secondary); text-decoration: none; font-size: .83rem; line-height: 1.5; border-left: 2px solid var(--border-color); }
body.page-apidocs .doc-toc a:hover, body.page-apidocs .doc-toc a.active { color: var(--brand); border-left-color: var(--brand); }
body.page-apidocs .doc-sidetoggle { display: none; }
body.page-apidocs :where(.doc-side a, .doc-toc a, .code-tabs__btn, .code-copy, .ov-card, .doc-sidetoggle):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow);
}
@media (max-width: 1180px) {
    body.page-apidocs .doc-shell { grid-template-columns: 240px minmax(0,1fr); }
    body.page-apidocs .doc-toc { display: none; }
}
@media (max-width: 860px) {
    body.page-apidocs .doc-shell { grid-template-columns: 1fr; }
    body.page-apidocs .doc-side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--border-color); display: none; }
    body.page-apidocs .doc-side.open { display: block; }
    body.page-apidocs .doc-sidetoggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 14px 16px 0; padding: 8px 14px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card); color: var(--text-secondary); font-weight: 600; }
    body.page-apidocs .doc-main { padding: 18px 18px 60px; }
    body.page-apidocs .doc-table { display: block; max-width: calc(100vw - 36px); overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============ 企业接入 /enterprise ============ */
body.page-enterprise .ent-hero { background: var(--accent-primary); color:#fff; padding:48px 0; }
body.page-enterprise .ent-hero h1 { font-weight: 600; }
body.page-enterprise .ent-card { background: var(--bg-card); border:1px solid var(--border-color); border-radius:16px; padding:24px; height:100%; }
body.page-enterprise .ent-card h3 { font-weight: 600; font-size:1.05rem; }
body.page-enterprise .ent-card .ent-icon { width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(var(--brand-rgb),.12);color:var(--brand);font-size:1.1rem;margin-bottom:12px;}
body.page-enterprise .ent-form label { font-size:.85rem; color:var(--text-muted); margin-bottom:4px; }
body.page-enterprise .ent-hp { position:absolute; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden; }


/* ============ Bootstrap 语义类映射（R2，02 §6 作用域映射策略） ============ */
/* warning 黄在本站一律呈现品牌橙；业务 DOM 零改动 */
.btn-warning { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.btn-warning:hover, .btn-warning:focus { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-warning:active { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-outline-warning { color: var(--accent-dark); border-color: var(--accent-primary); }
.btn-outline-warning:hover, .btn-outline-warning:focus { background: var(--accent-light); color: var(--accent-dark); border-color: var(--accent-primary); }

/* ============ 控制台壳 console-shell（P1，spec 20260726-console-rebuild-4854） ============ */
.console-shell { display: flex; min-height: calc(100vh - 200px); background: var(--bg-card); }
.console-side { width: 168px; flex: none; background: var(--bg-hover); border-right: 1px solid var(--border-color); padding: 14px 0; }
.console-side__group { padding: 4px 18px 8px; font-size: .72rem; color: var(--text-muted); }
.console-side__item { display: block; padding: 7px 18px; font-size: .84rem; color: var(--text-secondary); text-decoration: none; }
.console-side__item:hover { background: var(--bg-card); color: var(--text-primary); text-decoration: none; }
.console-side__item.is-active { background: var(--accent-light); border-right: 2px solid var(--accent-primary); color: var(--accent-dark); font-weight: 600; }
.console-side__sep { border-top: 1px solid var(--border-color); margin: 10px 18px; }
.console-side__item--muted { color: var(--text-muted); }
.console-main { flex: 1; min-width: 0; padding: 24px 28px 48px; }
.console-main__title { font-size: var(--fs-h2); font-weight: 600; margin: 0 0 4px; color: var(--text-primary); }
.console-main__desc { font-size: .84rem; color: var(--text-secondary); margin: 0 0 18px; }
.bill-validity { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 420px; }
.bill-validity button {
    text-align: left; min-height: 52px; border: 1px solid var(--border-strong); border-radius: 10px;
    background: var(--bg-card); color: var(--text-primary); padding: 8px 12px; cursor: pointer;
}
.bill-validity button.is-on { border-color: var(--accent-primary); background: var(--accent-light); color: var(--accent-dark); }
.bill-validity button .d { display: block; font-weight: 600; }
.bill-validity button .p { display: block; font-size: var(--fs-caption); color: var(--text-muted); }
.bill-pay { text-align: center; padding: 28px 16px; }
.bill-pay .spin { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--accent-primary); border-top-color: transparent; border-radius: 50%; animation: bill-spin .8s linear infinite; vertical-align: -2px; margin-right: 8px; }
@keyframes bill-spin { to { transform: rotate(360deg); } }
.bill-result { max-width: 520px; }
.bill-result .ok-mark {
    width: 56px; height: 56px; border-radius: 50%; background: var(--success-bg); color: var(--success-dark);
    display: flex; align-items: center; justify-content: center; font-size: 24px; margin: 0 auto 12px;
}
.bill-result .wait-mark { background: var(--warning-bg); color: var(--warning-dark); }
/* 通知设置页件（原 notification_settings 内联迁入） */
.ns-wrap { max-width: 680px; }
.ns-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; }
.ns-card h3 { font-weight: 600; font-size: 1.05rem; }
@media (max-width: 767.98px) {
    .console-shell { flex-direction: column; }
    .console-side { width: 100%; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-color); padding: 0 8px; }
    .console-side__group, .console-side__sep { display: none; }
    .console-side__item { white-space: nowrap; padding: 11px 12px; }
    .console-side__item.is-active { border-right: 0; border-bottom: 2px solid var(--accent-primary); }
}

/* 控制台 P2：按日柱条 + 占比条（纯 CSS，正式图表迭代按 dataviz 规范另行） */
.c-bars { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding: 6px 2px 0; }
.c-bar { flex: 1; min-width: 4px; max-width: 26px; height: 100%; display: flex; align-items: flex-end; }
.c-bar i { display: block; width: 100%; background: var(--accent-primary); border-radius: 3px 3px 0 0; opacity: .85; }
.c-bar:hover i { opacity: 1; }
.c-share { background: var(--border-color); border-radius: 3px; height: 8px; max-width: 260px; overflow: hidden; }
.c-share i { display: block; height: 100%; background: var(--accent-primary); border-radius: 3px; }

/* 控制台 P3：调试台代码块（深色 --panel-dark，同 43 稿 hero 代码块口径） */
.c-code { background: var(--panel-dark); color: #e8edf5; border-radius: var(--radius); padding: 14px 16px; font-family: var(--font-mono); font-size: .8rem; line-height: 1.8; white-space: pre-wrap; word-break: break-all; max-height: 420px; overflow: auto; }

/* ============ 品牌主钮 .btn-brand（原仅存在于遗留 city-workspace.css，此处为门户/控制台正式单源） ============ */
.btn-brand { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.btn-brand:hover, .btn-brand:focus { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-brand:active, .btn-brand.active { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn-brand:disabled { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; opacity: .55; }

/* 开关/复选选中态归品牌橙（Bootstrap 默认蓝，亮暗两态一并纠正） */
.form-check-input:checked { background-color: var(--accent-primary); border-color: var(--accent-primary); }
.form-check-input:focus { border-color: var(--border-hover); box-shadow: 0 0 0 .25rem var(--accent-glow); }

/* ============ 深色模式 · Bootstrap 5.2 组件桥接（本站用到的子集，.dark 作用域） ============ */
.dark .form-control, .dark .form-select {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.dark .form-control:focus, .dark .form-select:focus {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 .25rem var(--accent-glow);
}
.dark .form-control::placeholder { color: var(--text-muted); }
.dark .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.dark .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-strong); }
.dark .btn-outline-secondary:hover, .dark .btn-outline-secondary:focus {
    background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong);
}
.dark .alert-warning { background: var(--warning-bg); border-color: var(--warning-line); color: var(--text-secondary); }
.dark .alert-warning a { color: var(--warning-dark); }
.dark .badge.bg-secondary { background-color: var(--bg-elevated) !important; color: var(--text-secondary); }
.dark .text-muted { color: var(--text-muted) !important; }
.dark hr { border-color: var(--border-color); opacity: 1; }
.dark .form-check-input:not(:checked) { background-color: var(--bg-elevated); border-color: var(--border-strong); }

/* ============ 历史工具落地页（A 类，本期只抽样式+令牌化，不按营销页重做） ============ */
body.page-site .site-hero,
body.page-route .rp-hero,
body.page-geocoder .gc-hero,
body.page-dispatch .dsp-hero { padding: 56px 0 40px; text-align: center; }
body.page-site .site-hero h1,
body.page-route .rp-hero h1,
body.page-geocoder .gc-hero h1,
body.page-dispatch .dsp-hero h1 {
    font-size: var(--fs-h1); font-weight: 600; color: var(--text-primary); margin-bottom: 14px;
}
body.page-site .site-hero p,
body.page-route .rp-hero p.lead,
body.page-geocoder .gc-hero p.lead,
body.page-dispatch .dsp-hero p {
    font-size: var(--fs-body-lg); color: var(--text-secondary); max-width: 740px; margin: 0 auto 26px; line-height: 1.7;
}
body.page-site .site-facts, body.page-dispatch .dsp-facts,
body.page-route .rp-badges, body.page-geocoder .gc-badges {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px;
}
body.page-site .site-fact, body.page-dispatch .dsp-fact,
body.page-route .rp-badge, body.page-geocoder .gc-badge {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 999px;
    padding: 6px 14px; font-size: var(--fs-body); color: var(--text-primary);
}
body.page-site .site-fact { border-radius: 12px; color: var(--text-secondary); }
body.page-dispatch .dsp-fact { border-radius: 12px; color: var(--text-secondary); }
body.page-site .site-fact b, body.page-dispatch .dsp-fact b { color: var(--brand); }
body.page-route .rp-badge i, body.page-geocoder .gc-badge i { color: var(--brand); margin-right: 6px; }
body.page-route .rp-cta, body.page-geocoder .gc-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
body.page-route .rp-btn, body.page-geocoder .gc-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: 10px;
    font-weight: 600; font-size: var(--fs-body-lg); text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
body.page-route .rp-btn--primary, body.page-geocoder .gc-btn--primary {
    background: var(--accent-primary); color: #fff; box-shadow: var(--shadow-sm);
}
body.page-route .rp-btn--primary:hover, body.page-geocoder .gc-btn--primary:hover { background: var(--accent-hover); color: #fff; }
body.page-route .rp-btn--ghost, body.page-geocoder .gc-btn--ghost {
    background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color);
}
body.page-route .rp-section, body.page-geocoder .gc-section { padding: 40px 0; }
body.page-route .rp-section h2, body.page-geocoder .gc-section h2 { text-align: center; font-weight: 600; margin-bottom: 28px; }
body.page-route .rp-cards, body.page-geocoder .gc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
body.page-route .rp-card, body.page-geocoder .gc-step {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 22px; box-shadow: var(--shadow-sm);
}
body.page-route .rp-card h4, body.page-geocoder .gc-step h4 { font-size: var(--fs-h3); font-weight: 600; margin-bottom: 8px; }
body.page-route .rp-card h4 i { color: var(--brand); margin-right: 8px; }
body.page-route .rp-card p, body.page-geocoder .gc-step p { color: var(--text-muted); font-size: var(--fs-body); line-height: 1.6; margin: 0; }
body.page-geocoder .gc-step .num {
    width: 34px; height: 34px; border-radius: 50%; background: var(--bg-soft); color: var(--accent-primary);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 600; margin-bottom: 12px;
}
body.page-route .rp-price, body.page-geocoder .gc-price {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 24px; text-align: center; max-width: 640px; margin: 0 auto;
}
body.page-route .rp-price .big, body.page-geocoder .gc-price .big { font-size: var(--fs-h2); font-weight: 600; color: var(--brand); }
body.page-route .rp-price ul, body.page-geocoder .gc-price ul { list-style: none; padding: 0; margin: 14px 0 0; color: var(--text-primary); }
body.page-route .rp-price li, body.page-geocoder .gc-price li { margin: 6px 0; }
body.page-route .rp-price li i, body.page-geocoder .gc-price li i { color: var(--success); margin-right: 6px; }
body.page-geocoder .gc-try { max-width: 720px; margin: 8px auto 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 20px; }
body.page-geocoder .gc-try h3 { font-size: var(--fs-body-lg); font-weight: 600; margin-bottom: 12px; }
body.page-geocoder .gc-try h3 i { color: var(--brand); }
body.page-geocoder .gc-try .row-inputs { display: flex; gap: 8px; flex-wrap: wrap; }
body.page-geocoder .gc-try input { flex: 1; min-width: 180px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-main); color: var(--text-primary); }
body.page-geocoder .gc-try input.gc-try-city { max-width: 200px; }
body.page-geocoder .gc-try-hint { margin: 12px 0 0; font-size: var(--fs-caption); color: var(--text-muted); }
body.page-geocoder .gc-try-result { margin-top: 14px; font-size: var(--fs-body); color: var(--text-primary); display: none; }
body.page-geocoder .gc-try-result.show { display: block; }
body.page-geocoder .gc-try-result code { background: var(--bg-main); padding: 2px 8px; border-radius: 6px; }
body.page-geocoder .gc-try-result a { color: var(--brand); font-weight: 600; }
body.page-geocoder .gc-faq { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 0 auto; }
body.page-geocoder .gc-faq-item { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 4px 18px; box-shadow: var(--shadow-sm); }
body.page-geocoder .gc-faq-item summary {
    cursor: pointer; font-weight: 600; color: var(--text-primary); padding: 14px 0; list-style: none;
    display: flex; align-items: center; justify-content: space-between;
}
body.page-geocoder .gc-faq-item summary::-webkit-details-marker { display: none; }
body.page-geocoder .gc-faq-item summary::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: var(--fs-caption); color: var(--text-muted); transition: transform .2s;
}
body.page-geocoder .gc-faq-item[open] summary::after { transform: rotate(180deg); }
body.page-geocoder .gc-faq-item p { color: var(--text-secondary); font-size: var(--fs-body); line-height: 1.7; margin: 0 0 16px; }
body.page-site .site-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin: 32px 0; }
body.page-site .site-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; }
body.page-site .site-card__icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-h2); color: #fff; margin-bottom: 16px; }
body.page-site .site-card--sel .site-card__icon { background: var(--info); }
body.page-site .site-card--ta .site-card__icon { background: var(--accent-primary); }
body.page-site .site-card--dorm .site-card__icon { background: var(--success); }
body.page-site .site-card h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
body.page-site .site-card p { color: var(--text-secondary); font-size: var(--fs-body); flex: 1; }
body.page-site .site-card ul { margin: 12px 0 18px; padding-left: 18px; color: var(--text-secondary); font-size: var(--fs-body); }
body.page-site .site-card ul li { margin-bottom: 4px; }
body.page-site .site-card .btn { align-self: flex-start; }
body.page-site .site-badge { display: inline-block; font-size: var(--fs-caption); padding: 2px 9px; border-radius: 999px; background: var(--bg-soft); color: var(--text-muted); margin-left: 8px; }
body.page-site .site-badge--soon { background: var(--warning-bg); color: var(--warning-dark); }
body.page-site .site-note, body.page-dispatch .dsp-note {
    background: var(--bg-soft); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px 20px;
    font-size: var(--fs-body); color: var(--text-secondary); margin-bottom: 40px;
}
body.page-site .site-note b, body.page-dispatch .dsp-note b { color: var(--text-primary); }
body.page-dispatch .dsp-flow { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 26px 0; }
body.page-dispatch .dsp-flow__item { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: 18px 22px; min-width: 210px; text-align: left; }
body.page-dispatch .dsp-flow__item .n {
    display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff;
    align-items: center; justify-content: center; font-weight: 600; font-size: var(--fs-caption); margin-bottom: 8px;
}
body.page-dispatch .dsp-flow__item h4 { font-size: var(--fs-body-lg); font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
body.page-dispatch .dsp-flow__item p { font-size: var(--fs-body); color: var(--text-secondary); margin: 0; }
body.page-dispatch .dsp-flow__arrow { align-self: center; color: var(--text-muted); font-size: var(--fs-h3); }
body.page-dispatch .dsp-cta { text-align: center; margin: 8px 0 28px; }
body.page-route .rp-price-actions, body.page-geocoder .gc-price-actions { margin-top: 18px; }
body.page-route .rp-price-note { margin-top: 14px; font-size: var(--fs-body); opacity: .85; }
@media (max-width: 767px) {
    body.page-route .rp-cards, body.page-geocoder .gc-steps { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .dtb-nav *,
    body.page-home *,
    body.page-apis *,
    body.page-pricing *,
    body.page-apidocs * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}